Re: Useful CSS tips

[Historical Forums User]

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

content

.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