I was reading an html book and it said I could use the import@ tag to have it where users' browsers that can't handle complicated css can use a simpler one. What is an example of a complicated css sheet and a simple one?

  • Please ask the question in the form of a question Andy Ford over 9 years ago

3 answers

2
points
This was chosen as the best answer

@import isn't supported by very old (4.x class) browsers. Using it in a stylesheet is one way of locking them out of complicated and unsupported CSS and forcing them to use basic stylesheets or just the browser's built-in one, for example:

@import url(/path/to/stylesheet.css);
body { some-styles: here; }
a { more-styles: here; }
div { you-get-the: idea; }

This way you can define some very basic styles and also import more complicated ones for newer user-agents.

Answered over 9 years ago by Nathan DeGruchy
2
points

In the bad old days this was a hack to allow browsers that didn't understand CSS to use the page.

Nowadays it's not that useful, though you could use it to split your CSS into sections like so:

On page:

<link rel="stylesheet" href="/main.css" />

In main.css:

@import "blog.css"
@import "galleries.css"
@import "contactform.css"

Then you can keep things seperate, and perhaps allow different teams to work on different files more easily.

I wouldn't recommend this strategy thought, as it increases the number of HTTP requests which will make your site slower to load.

Answered over 9 years ago by Rich Bradshaw
Dunk 5
1
point

Use Link over @import for performance reasons. Adding a link to a stylesheet in the head of the html allows page rendering from the get-go. @import's are equivalent to placing links to CSS at the very end of your HTML (bad-practise)

Answered over 9 years ago by Dunk