At @ Rule CSS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take the pain out of building site search with the Algolia hosted API. Start free now!

The default way to include an external stylesheet is to use the the link tag inside your pages head:

<link rel="stylesheet" href="default.css">

That is a tried and true method and supports the whole spectrum of browsers from old and ancient to hip and modern. But let’s say you grown tired of the old and ancient… You don’t want your page to be completely unusable, but you would rather it look completely non-styled than broken and clumsy. You could use an @rule to declare your CSS instead like this:

<style>@import url(default.css);</style>

This leaves outdated browsers like Netscape 4.x out of the mix and will deliver to them a style-less page. Assuming your markup is good, you should be fine.

At-Rules are good for other fanciness, but none of it as globally effective as this. Internet Explorer (IE) supports the embedding of external fonts with @rules, which is something every designer should drool over, but IE is the only one on the bandwagon which makes it mostly pointless and implementing it would be a step in the wrong direction.