<html>
<body>
<head>
<style type="text/css">
@import url(/css/style.css);
</style>
</head>
</body>
</html>
But not all browsers support @import. I wanted to see exactly which ones didn't so I used browsershots.org with a simple test.
Here are the results: http://browsershots.org/http://volatileminds.net/import_test.html
Black means it supports it. White means it doesn't.
You have to remember to use it correctly too. A few browsers in there (Safari et al) follow the specs to the letter and only import if the import statements are the first statements in a CSS file.
ReplyDeleteSee: http://www.thinkoomph.com/thinking/2011-04/odd-css-bug-in-webkit-and-safari-4/
For testing, you'd do better to have a separate CSS file using link which then did an import on another file.
And @import is generally an awful idea if you like a fast website. All external files should ideally be linked to from the main HTML page so that things can be done and completed sooner:
1. Download/process HTML
2. Download CSS/JS
3. Download media (images/whatnot)
If you stick an @import in an already-linked CSS file, step two has to keep running until all the CSS is downloaded.
Put the url in quotes.
ReplyDelete@import url("/css/style.css");
I remember having issues with some browsers not liking url literals.