Link 标签中的 media 属性有什么用处？答案

【问题标题】：What is the utility of the media attribute in the Link tag?Link 标签中的 media 属性有什么用处？
【发布时间】：2022-04-27 23:02:52
【问题描述】：

在链接标签中使用媒体属性对我们有什么好处或改进吗？如果是这样？那么我不需要在我的 CSS 中使用 @media 规则，使用 media 属性就足以为我的网页设置断点，对吧？

【问题讨论】：

标签： html css media-queries

【解决方案1】：

在未提及的链接标签中使用 media 属性的一个优点是，通过以这种方式包含样式，我们可以避免 CSS 渲染阻塞。

假设我有一个页面，其基本样式设置为内联，但我在外部文件中也有用于平板电脑 (768px) 的样式以及仅适用于平板电脑的其他一些样式。

我已经记录了在链接标签中使用媒体属性和没有使用 Google Chrome DevTools 的两种情况的渲染过程。为了看到这个工作，我在Slow 3G 中添加了网络限制，CPU 速度降低到 (20x slowndown)

这是第一个没有在链接标签中使用媒体属性的版本：

<!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>

统计数据：

首次渲染时间为 1100 毫秒
样式渲染延迟到所有 css 下载并解析（CSS 渲染阻塞）

使用媒体属性的第二个版本：

<!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>

统计数据：

首次渲染时间为 2000 毫秒
样式被渲染是因为浏览器知道链接标签只应用于比728px更宽的屏幕

所以使用媒体属性可以帮助我们防止渲染阻塞并改善关键渲染路径。如需更多信息，请阅读 Google 开发者中的文章Render Blocking CSS

【讨论】：

【解决方案2】：

它可以方便地用于亮/暗模式。

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

例子：

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/highlight.js@10.3.2/styles/github-gist.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="https://unpkg.com/highlight.js@10.3.2/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>

这也行

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

默认为 light.css，但如果用户更喜欢深色，则使用 dark.css 覆盖

【讨论】：

我会提醒这一点。代码块确实涵盖了没有报告他们喜欢哪种配色方案的用户代理，除非您预先填充了默认值，否则消费者也不会得到。

【解决方案3】：

浏览器会下载所有的 CSS 资源，而不考虑媒体属性。

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

不同之处在于，如果 media 属性的 media-query 被评估为 false 则该 .css 文件及其内容将不会被渲染阻塞。

因此，建议在<link>标签中使用media属性，因为它可以保证更好的用户体验。

您可以在此处阅读有关此问题的 Google 文章 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

一些工具可以帮助您根据媒体查询自动将 css 代码分离到不同的文件中

网页包 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

【讨论】：

【解决方案4】：

好吧，如果您在链接的样式表中使用完全不同的样式，它会很有用，例如，如果您有一个额外的样式表，仅用于打印样式，如果它们与屏幕样式没有任何共同之处。除此之外，IMO 使用这些并不是很有用。

【讨论】：

【解决方案5】：

HTML 标签中的 media 属性是专门将链接的 CSS 应用于给定媒体。

在css中指定@media属性是没有意义的，因为它没有任何作用。

我没有看到使用 html 属性优于 css 属性的任何优势，也许如果您在每种媒体中有很多样式差异，您可能希望将它们放在单独的文件中以达到审美目的。

或者，您可能希望将引用的 css（例如引导程序）限制为特定媒体

【讨论】：