Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Useful CSS tips Re: Useful CSS tips

#46935
2kool2
Participant

This tip isn’t actually CSS but JavaScript and relates to separating web layers effectively.
Consider content hidden and displayed via JavaScript something like:

Code:
Show

.hidden {display:none}

The problem occurs when Javascript is unavailable, the content will never be able to display.

To circumvent the issue add this straight after the page title in the HTML and not in a separate file:

Code:

It adds a class of .hasJS to the html tag but only if JavaScript is available.

Now change the .hidden declaration to:

Code:
.hasJS .hidden {display:none}

Now the content will only be hidden if both JavaScript and CSS are available.
An important accessibility consideration.
Because it’s hidden as the page is built so there’s no flash of hidden content as JavaScript affects page elements.

regards

mike foskett