4

Is there any advantage or improvement to us using the media attribute in the link tag? If so?, then I don't need to use the @media rule in my CSS, using the media attribute will be enough to set the breakpoints for my web page, right?

Improve this question

5 Answers 5

Reset to default
8

An advantage of using the media attribute in a link tag that was not mentioned is that by including styles this way we can avoid CSS render blocking.

Let's say I have a page that the very basic style is set inline, but I also have styles for tablet (768px) in an external file and some others styles that are only applied on tablets.

I have recorded the rendering process for both cases with media attribute in link tag and without with Google Chrome DevTools. In order to see this working, I have added network throttling to Slow 3G and CPU slow down to (20x slowndown)

This is the first version not using media attribute in the link tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="http://demo.wpthemego.com/themes/sw_emarket/wp-content/cache/wpfc-minified/228b2c494ae153cae7dd875ddf3b1a2f/1503393313index.css" rel="stylesheet">
  <link href="https://www.youtube.com/yts/cssbin/player-vflSoLyqv/www-player-webp.css" rel="stylesheet">
  <style>
    h1 {
      background: yellow;
      color: black;
      font-size: 2rem;
      font-weight: lighter;
    }
  </style>
</head>
<body>
  <h1>blocked render</h1>
</body>
</html>

enter image description here

The stats:

  • First render at 1100ms
  • The style rendering is deferred until all css are downloaded and parsed (CSS render blocking)

The second version using media attribute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link media="(min-width: 768px)" href="http://demo.wpthemego.com/themes/sw_emarket/wp-content/cache/wpfc-minified/228b2c494ae153cae7dd875ddf3b1a2f/1503393313index.css" rel="stylesheet">
  <link media="(min-width: 768px)" href="https://www.youtube.com/yts/cssbin/player-vflSoLyqv/www-player-webp.css" rel="stylesheet">
  <style>
    h1 {
      background: yellow;
      color: black;
      font-size: 2rem;
      font-weight: lighter;
    }
  </style>
</head>
<body>
  <h1>Not render blocked under 768px</h1>
</body>
</html>

enter image description here

The stats:

  • First render at 2000ms
  • The style is rendered because the browser knows that the links tags are only applied to screens wider than 728px

So using media attribute helps us to prevent render blocking and improve the critical rendering path. For further information please read the article in Developers Google Render Blocking CSS

Improve this answer
1
  • Am I getting something backwards or are the stats reversed? Version 1 with no media attribute that is supposed to render block hits first render at 1100ms, and Version 2 that is supposed to be better hits first render at 2000ms. Either I completely misunderstand something or there is a typo here?
    – Fred Polli
    Commented Apr 23 at 13:42
3

The browser downloads all CSS resources, regardless of the media attribute.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Improve this answer
3

It can be handy for light/dark mode.

<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

Example:

html, body {
  background: #EEE;
}
@media (prefers-color-scheme: dark) {
  html, body {
    background: #444;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/styles/github-gist.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/styles/monokai-sublime.css" media="(prefers-color-scheme: dark)">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre class="hljs"><code class="language-javascript">function some(javacript) {
  console.log(javascript);
}</code></pre>

This would also work

<link rel="stylesheet" href="light.css">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

Defaults to light.css but overrides with dark.css if the user prefers dark

Improve this answer
1
  • I'd caution this. The code block does cover user agents that aren't reporting which color scheme they prefer which unless you have prefilled defaults, a consumer will not get either.
    – toastal
    Commented Nov 7, 2021 at 8:21
1

Well, it can be useful if you use completely different styles in the linked stylesheets, for example if you have an extra stylesheet only for the print styles if they don't have anything in common with the screens styles. Apart from that, IMO it's not really useful to use those.

Improve this answer
0

The media attribute in HTML tag is to specifically apply the linked CSS to given media.

It is pointless to specify @media attribute in the css, as it will have no effect.

I do not see any advantage of using html attribute over css attribute, perhaps if you have a lot of styling differences in each media, you would want them in separate files for aesthetic purposes.

Or maybe, you'd want referenced css (such as bootstrap) to be restricted to a specific media

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.