6 ms·

Don’t use @import

75 points by mcxx 18y ago

Alex3917 18y 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 18y 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.
  - Alex3917 18y 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 18y 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/howto/ssi.html * http://httpd.apache.org/docs/2.0/mod/mod_include.html http://httpd.apache.org/docs/2.0/mod/mod_include.html I'm sure other servers have similar options.
  - eworoshow 18y ago
    Nginx also supports server-side includes: http://wiki.nginx.org/NginxHttpSsiModule http://wiki.nginx.org/NginxHttpSsiModule
  - tsally 18y 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 http://www.w3.org/Security/Faq/wwwsf3.html
nihilocrat 18y 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 18y 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 18y 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
  - deleted 18y ago
    [deleted]
- johns 18y ago
  You can use @import inside an externally linked style sheet mimicking includes.
- boucher 18y 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 18y 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 18y 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 http://developer.yahoo.com/performance/rules.html
tremendo 18y 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.

75 points by mcxx 18y 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 18y 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.
- Alex3917 18y 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 18y 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/howto/ssi.html * http://httpd.apache.org/docs/2.0/mod/mod_include.html http://httpd.apache.org/docs/2.0/mod/mod_include.html I'm sure other servers have similar options.
- eworoshow 18y ago
  Nginx also supports server-side includes: http://wiki.nginx.org/NginxHttpSsiModule http://wiki.nginx.org/NginxHttpSsiModule
- tsally 18y 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 http://www.w3.org/Security/Faq/wwwsf3.html

nihilocrat 18y 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 18y 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 18y 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
- deleted 18y ago
  [deleted]
johns 18y ago
You can use @import inside an externally linked style sheet mimicking includes.
boucher 18y 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 18y 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 18y 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 http://developer.yahoo.com/performance/rules.html

tremendo 18y 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.