TIPS - CSS: Professional Techniques for Modern Layout - page 79

h e most obvious way to make an element disappear is to switch of its display.
.hide { display : none ;}
h at will suppress display of any element with a class of hide , of course. h at means any
such element will generate no element box at all. It will therefore have no ef ect on the layout
of any other element. It's like it never even existed. Like it was a ninja.
h ere are a couple of pitfalls with display: none , though—one potential, one persistent.
h e potential problem is if you directly set the value of none via JavaScript, then how do you
know how to unset it? h is is trickier than it might seem. Suppose you wrote:
var obj = document.getElementById('linker');
obj.style.display = 'none';
h en, later in the JS, you want to show the element again. What value do you give? It depends
on the element, doesn't it? If it's a span element, you probably want it to be inline . If it's a
p , then you probably want block . (h en again, maybe not: You can make span s generate
block boxes and div s generate inline boxes easily enough.)
h ere's one fairly commonplace solution: assign no value at all:
obj.style.display = '';
81
h at will cause the element to default back to whatever display value is called for in the rest
of the CSS, or by the browser's built-in styles.
h e other commonplace solution is to not set the display value directly, but instead add a
class value of, say, hide to the element. When you want to reveal it again later, you just
strip of the class . h is is a little more complicated because it requires you to write (or i nd
via Google) JavaScript that will add or remove class values, but it's a very workable solution.
h e persistent problem is that (as of this writing) elements with a display of none are not
“seen” by the vast majority of assistive technologies like screen readers. Since the element isn't
rendered to the screen, the reader can't i nd it and so doesn't read it. h is is ot en exactly what
is wanted, but at other times, it's exactly what isn't wanted.
For example, suppose you have assistive links (generally called “skiplinks”) in your page. You
want them there for people who are using screen readers so they can jump forward in the
document, but you don't want them on-screen getting in the way of people who are sighted. If
you set their container to display: none , then they disappear … for everyone, sighted or
not. h e people who need them don't hear them.
Similarly, if you have dropdown menus that are hidden (absent mouse action) for sighted
users, screen readers won't be able to i nd them if they're hidden with display: none .