chadmichael Posted December 24, 2008 Share Posted December 24, 2008 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 More sharing options...
jeffman Posted December 24, 2008 Share Posted December 24, 2008 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 More sharing options...
rzea Posted December 25, 2008 Share Posted December 25, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.