Friday, February 3, 2012

What browsers support @import in their CSS?

I prefer the following CSS:
<style type="text/css">
        @import url(/css/style.css);

But not all browsers support @import. I wanted to see exactly which ones didn't so I used with a simple test.

Here are the results:

Black means it supports it. White means it doesn't.


  1. 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.


    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.

  2. Put the url in quotes.
    @import url("/css/style.css");

    I remember having issues with some browsers not liking url literals.