HTML and CSS Reference
In-Depth Information
background. You could also change the font, put a border around the element being
hovered, or alter anything else the browser will allow.
Real-world issues with dynamic styling
Dynamic pseudo-classes present some interesting issues and peculiarities. For example,
it's possible to set visited and unvisited links to one font size and make hovered links
a larger size, as shown in Figure 1-37 :
a:link, a:visited {font-size: 13px;}
a:hover {font-size: 20px;}
Figure 1-37. Changing layout with dynamic pseudo-classes
As you can see, the user agent increases the size of the anchor while the mouse pointer
hovers over it. A user agent that supports this behavior must redraw the document
while an anchor is in hover state, which could force a reflow of all the content that
follows the link.
However, the CSS specification states that user agents are not required to redraw a
document once it's been rendered for initial display, so you can't absolutely rely on
your intended effect taking place. I strongly recommend that you avoid designs that
use, let alone depend on, such behavior.
UI State Pseudo-Classes
Closely related to the dynamic pseudo-classes are the user interface (UI) state pseudo-
classes, which are summarized in Table 1-4 . These pseudo-classes allow for styling
based on the current state of user interface elements like checkboxes.
Table 1-4. UI state pseudo-classes
Refers to user interface elements (such as form elements) that are enabled; that is, available for input.
Refers to user interface elements (such as form elements) that are disabled; that is, not available for input.
Refers to radio buttons or checkboxes that have been selected, either by the user or by defaults within
the document itself.
Refers to radio buttons or checkboxes that are neither checked nor unchecked; this state can only be set
via DOM scripting, and not due to user input.
Search WWH ::

Custom Search