Sunday, September 8, 2013

At @ Rule CSS

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

<link rel="stylesheet" type="text/css" 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 grow tried 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 type="text/css" media="all">@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 font faces 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. A better way to embed font’s (on a small scale) is to use sIFR, which we will cover if we can find some way to relate it to CSS =)