Importing css through the @import command is a beautiful thing because it allows you to control how legacy browsers like IE 5, IE 5.5 and mac IE render your sites. We all know that these browsers have poor css support and that it's impossible to have css that will render the same way in all browsers including legacy and modern browsers. I found that the best way to filter legacy browsers out is to use the @import method. So here's how to do it.
You should always have separate stylesheets for different logical elements for example master.css (contains basic rules), typography.css (contains typographical rules), layout.css (contains layout rules)... So with that in mind add the css to the head of your html template like this:
‹style type="text/css" title="Default" media="all"› @import url(css/master.css); ‹/style›
This command will import your master stylesheet from which it will get basic styles and all other advanced style information. Next open your master.css and at the top of the file, import all other stylesheets like this:
@import url("typography.css");
@import url("color.css");
@import url("layout.css");
@import url("advanced.css");
Now here is the interesting part, you can use different @import rules to filter out browsers for example:
@import "advanced.css"/**/; --------->modern browsers
@import\ url("ie.css"); --------->only IE 5.5 and IE 5
@import_url("ie.css"); --------->only mac IE
As you can see, advanced.css will only be loaded by modern browsers while ie.css will only be loaded by IE 5, IE 5.5 and mac IE.
The @import technique is a very powerful css tool for targeting different browsers and as such should be used wisely. Here is a list of different @import rules and how they interact with different browsers.