'What is the utility of the media attribute in the Link tag?

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?

htmlcssmedia-queries


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[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

Solution 4:[4]

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.

Solution 5:[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ivan Bila
Solution 2
Solution 3 Juanma Menendez
Solution 4
Solution 5 Monish Sen

Related Questions