A few CSS tricks

A few CSS tricks from A List Apart, e.g.:

If your site serves all browsers (and most of our sites do), you can write a text message explaining why the buttons don’t work in 4.0 and older browsers. Use a CSS class such as the one below to hide the message from compliant browsers:

.hidden { display: none; }

Include the Style Sheet rule in a secondary, “sophisticated” Style Sheet. Then hide the sophisticated Style Sheet from 4.0 browsers by using the @import linking method.

Compliant browsers will parse the imported Style Sheet and hide the message; cruddy browsers will display the message. You can see this in action by visiting zeldman.com with a compliant browser and then re–visiting with, oh, say, Netscape Navigator 4.

If you feel like doing even more work, you can use CSS to hide the buttons themselves from 4.0 and older browsers by placing the buttons in an invisible DIV and then over–riding the invisibility with a more specific CSS–2 rule in your @import Style Sheet. But in so doing, you’ll miss the chance to gently evangelize browser upgrades by tantalizing your readers with functionality their current browser fails to support.

Leave a Reply