核心要点
getComputedStyle 来确定该属性是否已设置，从而仅在受支持的浏览器中加载或运行脚本。“Cutting the Mustard” 是 BBC 的 Tom Maslen 创造的一个术语。此方法使用 JavaScript 检查浏览器功能，然后加载更多 CSS 和 JavaScript 以提供“增强型”体验；否则，浏览器将仅加载“核心”体验所需的必要文件。
最近对“Cutting the Mustard” 的兴趣激增，例如《通过“Cutting the Mustard” 迁移到 Flexbox》和《服务器端 Mustard Cut》，以及更广泛的渐进增强。
改进方法
然而，根据我的经验，即使是非常基本的“核心”体验也可能在某些非常旧的浏览器上造成问题，因此我想在此基础上进行改进，看看是否有可能完全拒绝非常旧的浏览器使用任何 CSS，只留下 HTML。
当然，显而易见的解决方案是使用 JavaScript 有条件地加载所有 CSS（如果浏览器通过“Cutting the Mustard” 测试），但这对我来说感觉过于粗暴；无法加载 JavaScript 的现代功能强大的浏览器将因完全没有样式而受到惩罚。因此，我寻找了一种仅使用 CSS 的方法来解决这个问题，我找到了 Craig Buckler 的一篇旧文章。经过大量的实验和调整后，我想出了以下方法：
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
让我们来分析一下这里发生了什么。
工作原理
第一个 <link> 元素的媒体查询仅允许在以下浏览器中加载样式表：
第二个 <link> 元素的媒体查询仅允许在以下浏览器中加载样式表：
结合使用时，除非浏览器是以下浏览器，否则此技术不会加载样式表：
注意：无论有多少 <link> 元素，样式表都只加载一次。
可以通过逗号分隔声明，将媒体查询组合到一个 <link> 元素中，如下所示：
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
但是，我个人更喜欢将它们分开，因为我发现更容易看出发生了什么。
因此，如果您以语义化和可访问的方式构建标记，旧版浏览器仍然能够以纯 HTML 查看您未设置样式的内容。
这当然是非常主观的，但我的观点是，仍然使用这些浏览器的任何人都应该能够获得他们需要的内容。很有可能，通过为这些浏览器提供针对较新浏览器的 CSS，某些内容会中断，这可能意味着页面完全无法使用。使用此方法，他们至少可以获得一个干净的页面。更重要的是，您将永远不需要再次在这些浏览器中进行测试。您已经完成了！至少，理论上是这样。
当然，您的支持需求可能会有所不同，但此技术的优点在于您可以在此基础上进行构建。例如，如果您需要添加对 IE8 的支持，您可以使用条件注释仅为该浏览器加载相同的样式表：
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
或者，如果您需要支持像素比率大于 1 的旧版 WebKit 设备，您可以添加另一个具有目标媒体查询的 <link> 元素，如下所示：
<!--[if IE 8]> <link rel="stylesheet" href="css/your-stylesheet.css"> <![endif]-->
就其本身而言，这只会为 Android 2.2 加载样式表（我无法测试早期版本），但由于它除了其他 <link> 元素之外还包含在内，因此它实际上只是为这组其他浏览器添加了支持。
您还可以更改此处我提供的 <link> 元素的主要媒体查询，以获得您需要的自定义支持。但是，要做到这一点需要大量的测试，所以请注意！
“但是，它们是 hack！”
是的，我想它们是，但这取决于您的定义。媒体查询旨在测试浏览器功能，然后再应用 CSS，而这正是我们在此案例中想要做的，尽管是间接的。
尽管如此，无论是否是 hack，我都对这项技术感到满意，并且在我的所有测试中它都运行良好，我计划很快将其用于生产站点。
无效之处
在我迄今为止进行的所有测试中，我只发现了一种情况，即事情没有按预期工作。在 Android 4.4 上，UC 浏览器对媒体查询没有响应。据我所知，UC 浏览器使用的是旧版 WebKit，这可以解释这种情况。
如果您想支持此浏览器，可以使用少量用户代理嗅探来强制加载 CSS：
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
作为奖励，据我所知，无法在 Android UC 浏览器中禁用 JavaScript，因此样式表应始终加载，除非网络故障等。
当然，如果您发现需要支持其他特定浏览器，您可以随时添加到用户代理嗅探条件中，但我建议您谨慎使用它，因为它违背了这是一种仅限 CSS 技术的目的。
我制作了一个测试页面来在不同的浏览器上测试基本方法。如果您发现任何浏览器无法按预期工作，或者如果您发现任何其他可以为特定浏览器或浏览器范围添加支持的媒体查询，请在评论中告诉我或在 GitHub 存储库中提出问题。
加载脚本？
好的，如果您使用 CSS 来检测浏览器支持，那么您很可能希望仅在您支持的浏览器中加载或运行部分或全部脚本。那么我们该如何做到这一点呢？
好吧，有几种方法可以实现这一点，但我发现最简单的一种方法如下：
getComputedStyle 在 body 元素上确定您的属性是否已设置。例如，clear 属性的默认值为 none。将其设置为 body 的 both 几乎不会对页面的显示产生任何影响（如果确实如此，则必须使用其他属性）。因此，代码在您的样式表中将如下所示：
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
在您的页面（或脚本文件中）：
<!--[if IE 8]> <link rel="stylesheet" href="css/your-stylesheet.css"> <![endif]-->
最终代码
无论是否是 hack，我试图在此处展示的是一种可重用的方法，用于检测相对较新的浏览器并防止旧版浏览器应用样式或运行脚本，从而导致它们仅显示页面的 HTML。所需的代码非常少，它应该允许您专注于使用更现代的技术为更现代的浏览器构建精彩的功能，而无需担心。
尽管您可能不需要我在这里提供的所有内容，但将所有部分放在一起会得到以下结果：
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:1.1)">
我已经制作了另一个包含所有额外内容的测试页面（SitePoint 偶尔会删除在单独的 HTML 页面上托管的多年历史的演示。我们这样做是为了降低过时代码（具有公开漏洞）对用户构成风险的风险。感谢您的理解。）。
致谢
如果没有 BrowserStack、Can I Use 以及 Browserhacks 和 Jeff Clayton 的工作人员的工作，我将无法做到这一点，因此感谢所有参与的人，如果您有任何想法或反馈，请告诉我。
关于 CSS 媒体查询和“Cutting the Mustard” 的常见问题解答 (FAQ)
在 CSS 媒体查询的上下文中，“Cutting the Mustard” 用于描述一种技术，其中网站或 Web 应用程序会在提供完整体验之前检查用户的浏览器是否支持某些功能。如果浏览器无法“Cutting the Mustard”，则会提供更简单、更基本的网站或应用程序版本。这种方法确保所有用户都可以访问网站的内容，而不管其浏览器的功能如何。
要确定浏览器是否“Cutting the Mustard”，您可以使用简单的 JavaScript 测试。此测试检查浏览器是否支持某些功能，例如 querySelector 和 localStorage。如果浏览器通过测试，则认为它“Cutting the Mustard”，并且可以处理网站或应用程序的完整体验。
“Cutting the Mustard” 技术很重要，因为它确保您的网站或 Web 应用程序可供所有用户访问，而不管其浏览器的功能如何。通过向无法“Cutting the Mustard” 的浏览器提供更简单的网站版本，您可以确保所有用户都可以访问您的内容。
是的，您可以在没有 JavaScript 的情况下使用 CSS 媒体查询。但是，将 JavaScript 与 CSS 媒体查询结合使用，您可以根据用户的浏览器功能为用户提供更量身定制的体验。
“Cutting the Mustard” 测试可能会检查诸如 querySelector、localStorage 和 addEventListener 之类的功能。这些都是现代浏览器支持的功能，但在旧版浏览器中可能不可用。
要实现“Cutting the Mustard” 测试，您可以使用一个简单的 JavaScript 测试来检查某些功能。如果浏览器通过测试，则可以使用 CSS 媒体查询来提供网站或应用程序的完整体验。
如果浏览器无法“Cutting the Mustard”，它将获得更简单、更基本的网站或应用程序版本。这确保了所有用户都可以访问您的内容，而不管其浏览器的功能如何。
是的，您可以自定义为无法“Cutting the Mustard” 的浏览器提供的体验。您可以使用 CSS 媒体查询为这些浏览器定制网站或应用程序的设计和功能。
使用“Cutting the Mustard” 技术的一个潜在缺点是，它需要额外的开发时间来创建和测试网站或应用程序的简化版本。但是，确保所有用户都可以访问内容的好处通常超过了这个缺点。
是的，“Cutting the Mustard” 技术在今天仍然相关。虽然现代浏览器支持各种各样的功能，但仍然有许多用户使用可能不支持这些功能的旧版浏览器。通过使用“Cutting the Mustard” 技术，您可以确保您的网站或应用程序可供所有用户访问。
以上是用CSS媒体查询切割芥末的详细内容。更多信息请关注PHP中文网其他相关文章！
