Question

基本上，这是我的问题。

在链接标记中使用media属性是否有任何优势或改进？

如果是这样？，那么我不需要在我的CSS中使用@media规则，使用media属性就足以为我的网页设置断点了吗？

Answer 1

在明暗模式下可以方便使用。

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

Answer 2

嗯，如果在链接的样式表中使用完全不同的样式会很有用，例如，如果你没有与屏幕样式有任何共同点的打印样式，那么你有一个额外的样式表。除此之外，IMO使用它们并不是真的有用。

Answer 3

在链接标记中使用media属性的一个很好的优点是没有提到我们可以避免CSS渲染阻塞。

我们说我有一个页面，其中非常基本的样式设置为内联，但我也有外部文件中的平板电脑样式（768px）和其他一些仅应用于平板电脑的样式。

我已经在链接标记中记录了具有媒体属性的两种情况的渲染过程，而没有使用谷歌浏览器开发工具。为了看到这个工作，我已将网络限制添加到Slow 3G，CPU减速到（20x slowndown）

这是第一个在链接标记中未使用media属性的版本：

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

统计数据：

首先渲染2000ms
呈现样式是因为浏览器知道链接标记仅应用于比728px

因此，使用media属性有助于我们防止渲染阻塞并改善关键渲染路径。有关详细信息，请阅读开发人员Google Render Blocking CSS

中的文章

Answer 4

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

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

我没有看到使用html属性优于css属性的任何优点，也许如果你在每个媒体中有很多样式差异，你会希望它们在单独的文件中用于审美目的。

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

Answer 5

无论媒体属性如何，浏览器都会下载所有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文件及其内容将不会被渲染阻止。 < / p>

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

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

某些工具可根据您的媒体查询自动将CSS代码分隔在不同文件中

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

Link标签中media属性的用途是什么？

5 个答案:

这是第一个在链接标记中未使用media属性的版本：

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