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
Name
Description
:enabled
Refers to user interface elements (such as form elements) that are enabled; that is, available for input.
:disabled
Refers to user interface elements (such as form elements) that are disabled; that is, not available for input.
:checked
Refers to radio buttons or checkboxes that have been selected, either by the user or by defaults within
the document itself.
:indeterminate
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