You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique.
Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of …
There is an HTML attribute that does exactly what you think it should do:
<div>I'm visible</div>
<div hidden>I'm hidden</div>It even has great browser support. Is it useful? Uhm. Maybe. Not really. …
Scott O’Hara recently published “Inclusively Hidden,” a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when it comes to the web! What complicates this is that hidden begs the question: …
There is no one true way to hide something on the web. Nor should there be, because hiding is too vague. Are you hiding visually or temporarily (like a user menu), but the content should still be accessible? Are you …
J. Renée Beach:
Over a few sessions, Matt mentioned that the string of text “Show more reactions” was being smushed together and read as “Showmorereactions”.
Turns out a popular technique for hiding content visually (but not hiding it for assistive …
There isn’t just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we’ll go over in this video.
For instance, there is the display property in which …
The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that opacity is not well supported by screen readers and so if we want to hide an element in a transition …
display: none;. This involves some tricks like using more clever class names, being fancier with how you deal with JavaScript library animations, or avoiding hiding all together.
The visibility property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element without changing the layout.
p {
visibility: hidden;
}
tr {
visibility: collapse;
}visibility has …
.screen-reader-text {
position: absolute;
top: -9999px;
left: -9999px;
}This class can remove an item from the page, taking it out of flow and doesn’t cause overflow scrolling.
It’s better than display: none; or even visibility: hidden; when the goal …