Jump to content

@import From Within A Css Sheet


chadmichael
 Share

Recommended Posts

I've never used an @import directive from within a CSS sheet itself. I want to reference a second sheet from the first sheet. What little documentation I can find suggests that this is a nobrainer, but the scant coverage of this in the CSS books that I generally use makes me wonder if this technique is arcane, perhaps due to some blemishes in the browser compatibiility arena.Does anyone use the @import directive from within a CSS sheet to reference a second sheet? Does anyone know of any issues with this technique?Note, I'm not talking about the use of the <style> @import (blahblay.css) </style> from within my HTML page.

Link to comment
Share on other sites

Two issues: (1) the import rules have to be the first text in a style sheet; and (2) each rule must end with a semicolon.A non-issue but sometimes forgotten: we're still cascading, so you still have to bear in mind inheritance and overwriting.I've been recommending the use of this rule for people who use a lot of server-side includes and want to associate a unique style sheet with each include file. Upkeep is easy if you have an include file named menu.php and css for that file in menu.css.

Link to comment
Share on other sites

In simple words, the @import directive is perfectly safe to use nowadays. The only issues with using this 'include' method are in the past now, in other words, very old browsers like IE5, Netscape 4 and earlier, did not understand the @import directive.I personally use this method all the time in all my projects and I have no issues whatsoever.I use this method when I have several style sheets, I import all those style sheets into my 'main' CSS file and in the <head> of the HTML documents I only have to write one single line to call all the CSS files.For example, I have three CSS files:top-navbar.css (the top nav bar can be extremely complex sometimes, so when the project demands it, I make a separate CSS file for easy updates)inner-pages.css (the home page and inner pages are usually very different layout-wise, so I treat them as separate 'entities')'project-name'-base.css (the MAIN CSS file for the site)And in the <head> section I write only one line to call all three CSS files:<link href="/css/'project-name'-base.css" type="text/css" rel="stylesheet" /> (this is an include as well, but that's another topic)Inside 'project-name'-base.css, I write:

@import url("top-navbar.css");@import url("inner-pages.css");

And that's it.Hope this helps.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...