CSS Import or <Link Rel...> with "Media" Attribute

CSS import or link rel... with media attribute

It has been discussed many times, you can read more here:

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

Difference between @import and link in CSS

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

to mention some...

Personally I never use @import as for the performance impact.

CSS: What is better practice? Import all at once or Link one by one per html?

To optimise the speed, you should try to:

• have as few CSS files as possible
• load only the CSS needed for each page
• reuse CSS files in different pages

These goals will partly conflict. Normally you will have some CSS that is not used in a specific page, but that is all right because that allows you to have fewer files and reuse the files.

"does the browsers cache the css files all the time?"

Yes, they normally do. Making browsers download new versions of CSS files is an actual problem.

How to use HTML link media attribute in Wordpress with wp_enqueue_style()?

wp_enqueue_style() accepts media as the final argument:

wp_enqueue_style(
    'custom-stylesheet',
    get_stylesheet_directory_uri() . '/stylesheets/style.css',
    array(),
    '1.0.0',
    'screen and (min-width: 140px) and (max-width: 380px)'
);

Read more in the docs.

html link media attribute (ie8)

Internet Explorer versions before IE9 do not support media queries.

If you are looking for a way of degrading the design for IE8 users, you may find IE's conditional commenting helpful. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.

For example:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

There is also a javascript plugin for media query support in browsers that don't natively support it:

http://code.google.com/p/css3-mediaqueries-js/

Correct syntax for include css file?

All are correct.
The type attribute is not required - it is just a hint for browsers but can be omitted.
The media attribute tells the browser when the CSS file should be used. For example, if you specify media="print" the CSS file will only get used when printing the page (try to print a Wikipedia page, for example).

Generally this variant is fine in most situations:

<link rel="stylesheet" type="text/css" href="..."/>

How to use both rel= preload and rel= stylesheet for the same tag?

For loading CSS styles asynchronously, you should indicate it, as a preload stylesheet. Whenever you use rel="preload" alone, it won't transform to stylesheet on page load and it will remain as preload, so to indicate it as stylesheet you should use another attribute such as as which indicate the type of element and in your case, it should be style. Then you need to tell the browser whenever the loading process got finished you need to consider this as a stylesheet, so you have to define another attribute like onload and then define its real relation.

so you have to import it like this:

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">

NOTE: You can read more about it here in google developers.

UPDATE

Since preload is not supported in firefox until now (according to this), the only way to do it, is to declare it twice in the one rel tag or two separate tags.

<link rel="preload" as="style" href="http://www.example.com/style.css">
<link rel="stylesheet" href="http://www.example.com/style.css">

Or

<link rel="stylesheet" rel="preload" as="style" href="http://www.example.com/style.css">

NOTE: As @JohnyFree tested the second one (one with a line through) in the Google page speed, it won't be recognized as valid preload style, whilst the format is valid according to W3.org.

Is there no difference between No media and media= all in css link?

In HTML 4.01, the default value is screen.

In HTML5, the default value has been changed to all.

Therefore, it depends on the doctype declaration you use in your page. Never mind, user agents get confused about standards anyway; see Knu's comment. (I bet this is why they changed it to all in HTML5.)

Then again, this only really matters if you're supporting user agents that don't present pages on digital screens, or display any visual information for that matter.

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

---

Related Topics