CHAPTER 6 ■ BOX MODELS PROPERTIESVisibility
Problem You want to hide an element and leave a blank spot where the element would have
been rendered.
Solution CSS provides the visibility property for hiding an element without affecting the
position of other elements in the inline flow, block flow, or float flow. Contrast this
with display:none, which doesn’t render an element by completely removing it from
all flows—as if it never existed. Because absolute elements are already removed from
all flows, there is no functional difference in applying visibility:hidden and
display:none to absolute elements.
Apply styles to your chosen class or ID as follows:
Use visibility:hidden to hide an element without removing it.
Use visibility:visible to show an element. This is the default.
Pattern CSS
SELECTOR { visibility:hidden; }
SELECTOR { visibility:visible; }
Location This design pattern applies to all elements. visibility is inherited by all elements.
Tips The main advantage of visibility:hidden is that you can hide content using
JavaScript without forcing the browser to reflow the entire page. This could be useful
when you want to hide selected content while the user drags and drops it to a new
location. Note that hover is not supported by mobile devices and can be an issue
when you’re doing web development for iOS or Android devices.
A document-management system can mark text for removal and let the user toggle
the display of such text between visibility:visible, visibility:hidden,
display:none, and text-decoration:line-through. This toggles through showing
the text, hiding it, removing it, and running a line through it.
You can create an unpleasant flickering effect when a user mouses over an element by
selecting an element using the hover pseudo class and styling it with
visibility:hidden as shown in the example.
display:none is more commonly used than visibility:hidden because it not only
hides an element—it completely removes it from the flow.
Related to Page Break; Box Model, Display (Chapter 4); Row and Column Groups, Hidden and
Removed Cells, Removed and Hidden Rows and Columns (Chapter 15); Popup Alert
(Chapter 20)