Don’t use @import

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

by mcxx • 17 years ago

75 14 17 years ago

Alex39172• 17 years ago

Speaking of, is there a way to import the navigation menu into an xhtml page without php or somesuch? Both "link" and @import are only valid within the header, so they are no good for importing data into the body of the page.

halo• 17 years ago

You could do it via JavaScript or iframes, but it's generally a bad idea. Server-side scripting languages like PHP or even server-side includes exist for a reason and fulfil this exact need transparently from the user and there's no good reason to shy away from it.

Alex39172• 17 years ago

Fair enough. I was having trouble getting PHP working the other day on my web server, so I guess I need to call my hosting company and ask what's up.

erlanger• 17 years ago

Yes, if you're serving from Apache:

* http://httpd.apache.org/docs/2.0/howto/ssi.html

* http://httpd.apache.org/docs/2.0/mod/mod_include.html

I'm sure other servers have similar options.

eworoshow• 17 years ago

Nginx also supports server-side includes: http://wiki.nginx.org/NginxHttpSsiModule

tsally• 17 years ago

If you do this, be aware of the security risks associated with SSI.

Read the relevant part of: http://www.w3.org/Security/Faq/wwwsf3.html

nihilocrat• 17 years ago

I wasn't even aware @import existed, and I don't really see any redeeming reasons to use it instead of 'link' anyways, as 'link' is "cleaner" and is HTML and thus can reap all the rewards that linked javascript, image links, etc. enjoy. Can someone please explain?

aristus• 17 years ago

It's just one of the many cosmic jokes of web programming. We have first-class functions, classes, DSLs, modules and mixins. Unfortunately these features are spread out over three separate languages: HTML/Javascript/CSS.

eli• 17 years ago

@imported stylesheets have high precedence over <link>ed ones. If you @import a stylesheet it's as if you typed it inline in the <style> block.

AFAIK, that's the only functional difference

johns• 17 years ago

You can use @import inside an externally linked style sheet mimicking includes.

boucher• 17 years ago

There's nothing "clean" about using a link. @import is an actually useful feature: the ability to define dependencies. "This file depends on another, which I've imported." Instead, using link tags forced you to push dependencies all the way to the top of every project (just like script tags). This is a huge failure of web technologies, and its one reason why all the good frameworks have to include build tools to flatten dependencies.

mr_justin• 17 years ago

I highly recommend his book (or wait for the upcoming 2nd edition), it is filled with invaluable stuff like this. Really an eye opener for me.

scorxn• 17 years ago

Or more succinctly: "In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it." Know and love http://developer.yahoo.com/performance/rules.html

tremendo• 17 years ago

The original rationale for using @import for including a CSS file in HTML was that Netscape Navigator 4 did not understand the command and thus was an easy, effective and compliant way to exclude that browser, since it had atrocious support for stylesheets. Now that NN is no longer a factor it makes sense to relegate the use of @import to only within a CSS file. BWT, the screen flicker of IE is eliminated if LINK is used first (say to load a reset.css file) and any subsequent stylesheet loaded via @import behaves as it should.

Don’t use @import

Related Stories