Menu
i have a website and i have multiple css style sheet for print, tv, screen, handheld etc...
i want to know which one of these method is better to use (performance, usability, etc...)
<link href="all.css" media="all" type="text/css" />
<link href="handheld.css" media="handheld" type="text/css" />
<link href="tv_print.css" media="tv, print" type="text/css" />
or
<style type="text/css">
@import url("all.css") all;
@import url("handheld.css") handheld;
@import url("tv_print.css") tv, print;
</style>
thank you
597
<link> is preferred in all cases over @import , because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section.
Best Approach: The External Style Sheet (using HTML <link> Tag) is the best method which is used to link the element. Maintaining and re-using the CSS file across different pages is easy and efficient. The <link> tag is placed in the HTML <head> element.
Avoid using CSS @import and use other methods like link tags, inlining CSS, or combining CSS to allow the browser to load your page faster, and also vastly improve your visitors' page experience.
The first method (link) is the best.
The main reason is that there is a bug in IE 6,7 and 8 (not sure about 9 or higher) means that when you use @import in conjunction with link the files are loading in series rather than in parallel. This can slow things down a lot when using more than one style sheet.
Just using @import downloads in series, but the order isn't guaranteed, meaning that if there is a reset for instance, that may or may not be applied first.
This article has a good summary: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
