explain import css & why not follow w3c standards?

unwashed potato! · 29 Nov 2009 at 21:30

1. can someone explain what importing css does? i see if often but don't understand the benefits of using it over the normal method of including css, and articles explaining it aren't helping either.

2. why don't browsers follow the css standards (unsure what they are exactly) to the book? i.e. why does ie handle css differently to firefox and to safari etc? i can't see any benefit to it

djkav · 29 Nov 2009 at 22:27

Mammalian said:
1. can someone explain what importing css does? i see if often but don't understand the benefits of using it over the normal method of including css, and articles explaining it aren't helping either.

2. why don't browsers follow the css standards (unsure what they are exactly) to the book? i.e. why does ie handle css differently to firefox and to safari etc? i can't see any benefit to it

1. @import is what you would use to include 1 .css file into another .css file. It can also be used to hide some style sheets from older browsers who don't understand the @import command. Also if used with a .htm file, the @import needs to be in <style> tags.

Link is the old trusted method of attaching a .css file to a .htm file. My rule is LINK to the .htm and @import to the .css.

2) Most of the browsers are developed before the final standards for the CSS draft are signed. This leaves browser developers open to interpretation of the CSS draft. Hence why some browsers behave differently. They may also add some custom CSS to their browser which causes even more headaches than how they interpret exisiting CSS rules.

Hope that helps.

mr.sly · 29 Nov 2009 at 23:34

The rules aren't set in stone either so each browser can interpret the W3C spec differently.

unwashed potato! · 29 Nov 2009 at 23:38

thanks guys for the helpful replies.

i'm still a little lost with importing the css. does the user see that css has been importated if looking at the source code? what benefit would come from importating it? the only one i can think of is that it will reduce the amount of files needed to be sent across but then i wouldn't imagine that a css would be "that" large that having it on one file would make a difference?

Tripnologist · 30 Nov 2009 at 00:15

Personally, I use two CSS files. default.css and style.css.
In default is my resets and common things I use on almost every site I do. I import the default in to the style just to keep things nice and tidy.

If I'm doing a larger website though. I find it even nicer to keep layout, typography, forms, etc. all separate. Rather than having to link in all the css files, I only need to link to one.

Dj_Jestar · 30 Nov 2009 at 10:54

@import allows you to break up your style into smaller, encapusalted CSS files, and then instead of copy/pasting or having multiple <link> tags, you just have a few @import lines in other files.

Example:
main.css

Code:

* {
  margin: 0pt;
  padding: 0pt;
}
body {
  font-family: verdana, tahoma, arial;
}

form.css

Code:

input.text {
  border: 1px solid #cccccc;
}
label {
  color: #77ff33;
}
input.submit {
  background-color: #ffffff;
  border: 1px solid black;
}

loginpage.html

Code:

<!-- snip ... -->
<style type="text/css">
  @import url("main.css");
  @import url("form.css");
  @import url("other.css");
</style>
<!-- snip ... -->
<div class="content">
  <p>Lorem ipsum blah blah</p>
</div>
<!-- snip ... -->
<form action="" method="post">
  <label for="username">Username:</label>
  <input id="username" type="text" class="text" name="username"/>
  <br />
  <label for="password">Password:</label>
  <input id="password" type="password" class="text password" name="password"/>
  <br />
  <input type="submit" value="Submit" />
</form>
<!-- snip ... -->

so in summary, it prevents copy/pasting a lot of style, allowing you to keep the style in 'one place' and also reduces the need to transfer lots and lots of styles when you may only need to "import" a few things (i.e. prevent one massive style sheet, with lots of page-specific styles on every page.)

unwashed potato! · 30 Nov 2009 at 11:26

Dj_Jestar said:
instead of copy/pasting or having multiple <link> tags, you just have a few @import lines in other files.

so is the only benefit that it uses less characters to write out?

instead of putting...

Code:

<link rel="stylesheet" type="text/css" href="[URL="http://forums.overclockers.co.uk/view-source:http://localhost/imListed/style/style_default.css"]/style/default.css[/URL]" />
<link rel="stylesheet" type="text/css" href="[URL="http://forums.overclockers.co.uk/view-source:http://localhost/imListed/style/style_colorsEnd.css"]/style/footer.css[/URL]" />

you can put...

Code:

<style type="text/css">
  @import url("main.css");
  @import url("form.css");
  @import url("other.css");
</style>

Dj_Jestar · 30 Nov 2009 at 12:31

no, there are also the other (and more important) benefits that I described.

robmiller · 30 Nov 2009 at 13:08

Mammalian said:
you can put...

Code:

<style type="text/css"> @import url("main.css"); @import url("form.css"); @import url("other.css"); </style>

Well, you could put

Code:

<link rel="stylesheet" href="foo.css" type="text/css" />

...and then in foo.css:

Code:

@import url('bar.css');
@import url('baz.css');

Since the stylesheet gets cached, so to will your second two imports, saving you a precious 20-odd bytes of markup and neatly avoiding the need to update CSS links every time you add/remove a stylesheet.

probedb · 30 Nov 2009 at 15:01

mr.sly said:
The rules aren't set in stone either so each browser can interpret the W3C spec differently.

Not quite. The rules aren't always specific enough which means they can be interpreted differently. It's not that the rules aren't set in stone.

Dj_Jestar · 30 Nov 2009 at 15:11

The rules aren't set in stone. If any of the browser vendors wanted to, they could write their own rules. Microsoft have done a number of times.

robmiller · 30 Nov 2009 at 16:35

Dj_Jestar said:
The rules aren't set in stone. If any of the browser vendors wanted to, they could write their own rules. Microsoft have done a number of times.

His point was that you can still be standards compliant while rendering slightly differently to other browsers, because there are several things that aren't explicitly specified and others that are open to interpretation.

Dj_Jestar · 30 Nov 2009 at 16:56

Fair play.

djkav · 30 Nov 2009 at 18:24

Mammalian said:

so is the only benefit that it uses less characters to write out?

instead of putting...

Code:

<link rel="stylesheet" type="text/css" href="[URL="http://forums.overclockers.co.uk/view-source:http://localhost/imListed/style/style_default.css"]/style/default.css[/URL]" />
<link rel="stylesheet" type="text/css" href="[URL="http://forums.overclockers.co.uk/view-source:http://localhost/imListed/style/style_colorsEnd.css"]/style/footer.css[/URL]" />

you can put...

Code:

<style type="text/css">
  @import url("main.css");
  @import url("form.css");
  @import url("other.css");
</style>

Thats not what @import was implemented for.

The sole purpose of @import in CSS was to allow a .CSS file to nest another .CSS file. Thats why the @import has to be in <STYLE> tags.

<LINK> really should be used in the .HTML file source.

So, if you want A.CSS to also link B.CSS then you need to @import B.CSS into A.CSS.

If you just want A.CSS and B.CSS in the .HTML file then you use <LINK> in html.

The only reason to use @import directly with the .HTML page is to hide a .CSS file from older browsers.

Dj_Jestar · 30 Nov 2009 at 22:42

Re: Hiding from older browsers, that happens whether it is embedded in style tags on the HTML page or whether nested in a css file. It's still the same browser, with the same parser, regardless of function location