Register now or log in to join your professional community.
<p>Since as you may know, <link> is preferred to @import as @import blocks parallel requests , why would anyone use @import? Is there any cases where @import serves better?</p>
Basm Allah Alrahman Alrahim
like friends said @import not supported in some browsers
here is an Article I found about link vs @import
your excellent question lead to some great issues like why we put script link at the button of HTML tags before the </body> tag ?
to make execute and link to all tags and CSS links at the bigening ( that mean form the page first ) , then we start to make events on that page by making script functions , consider that you want to make script function execute to assign the color of a navigation menu , what will happen if you put this function at the <head> <script> tag , it will be executed before the menu exist so nothing will happens
Note
the execution done sequentially line by line
Advantage of the @import method is to use multiple style sheets on a page, but only one link in your <head>.
Disadvantage: @import is not supported in older browser.
Advantage of <link> : To provide alternate style sheets for your customers. Browsers like Firefox, Safari, and Opera support the rel="alternate stylesheet" attribute and when there is one available will allow viewers to switch between them.
It depends on your needs. If you are using google fonts u will import them. @import is not supported by old browsers, and if you dont care then use it ;).... I like to use <link> because when ever I need to load some plugins I use their css files.. And if I have to load the pluging on everypage ill @import that once and thats it.
@import is used to import an existing CSS file into another CSS. Whereas <link> is used to import ths css files in <head> tag in html.
I use @import to load a css file (font definitions, for example) from within another css file. That's basically all there is to it.
There's little benefit to it. It is a blocking way of loading css resources because the file specified in the import url will be loaded first before the rest of the css is loaded. Link is preferred except in media queries situations where you load one file depending on the device. If you care much about page load speed, avoid careless use of @import
In my opinion @import is not much useful but in some cases where web design needs to be moulded with media queries @import will be helpful.
Cases where @import serves better:
- Faster and more convenient to integrate with existing CSS files (good for lazy people)
- Use @import if you need a stylesheet that depends on another one
- Useful for media queries, to apply different styles to different devices or screen sizes
- Keep your main style.css nice and clean; by dividing stylesheets into files; i.e. reset.css, nav.css, typography.css, etc then use @import to import all files into the main style.css
- Old browsers do not support @import, so you can put new browsers style in a separate css file, so that old browser won't recognize it.
- Spacial font type require you to use @import
