支持旧版浏览器

您网站的浏览器格局是什么样的？

每个网站的目标受众都不同。在决定采用哪种方法之前，请先了解使用旧版浏览器访问您网站的访问者数量。如果您正在添加或替换现有网站，这很容易做到，因为您可能拥有分析数据，可以告诉您访问者正在使用的技术。如果您没有分析数据或正在启动一个全新的网站，那么像 Statcounter 这样的网站可以提供相关统计数据，这些数据可以按位置过滤。

您还应该考虑设备类型以及人们使用您网站的方式。例如，您可以预期您的网站在移动设备上的使用率高于平均水平。始终优先考虑可访问性和使用辅助技术的人；对于某些网站来说，这可能更为关键。开发人员通常非常担心 1% 用户的体验，却忽略了数量更多、有可访问性需求的用户。

您要使用的功能支持情况如何？

上表包含在每个功能页面的底部“浏览器兼容性”部分。在确定您的网站访问者使用的浏览器后，您可以根据其在浏览器中的支持情况以及为没有该技术的访问者提供替代方案的容易程度来评估您想要使用的任何技术。

在 MDN 上，我们为每个 CSS 属性页面提供浏览器兼容性信息。此兼容性信息以表格形式呈现，包括主要浏览器的列表以及开始支持该属性的版本。浏览器名称占据列标题。例如，查看上表或 grid-template-columns 页面，特别关注 subgrid（最近支持）和 masonry（实验性且不受支持）值。

这些浏览器兼容性表提供了有关哪些浏览器与您正在寻找的技术兼容以及浏览器开始支持该功能的版本的信息。浏览器和手机浏览器兼容性信息分别显示。

另一种了解功能支持情况的常用方法是 Can I Use 网站。该网站列出了大多数 Web 平台功能，并提供了有关其浏览器支持状态的信息。您可以按位置查看使用统计数据——如果您在一个用户主要集中在世界特定地区的网站上工作，这将非常有用。您甚至可以链接您的 Google Analytics 帐户，根据您的用户数据获取分析。

了解用户因其使用的浏览器而拥有的技术以及您可能希望在网站上使用的功能的跨浏览器支持，使您能够很好地做出所有决策，并了解如何最好地支持所有用户。

功能支持不意味着外观完全相同

一个网站不可能在所有浏览器中看起来都一样。您的一些用户将在手机上查看网站，另一些用户将在大型桌面屏幕上查看。同样，您的一些用户将使用旧版浏览器，另一些用户将使用最新浏览器。您的一些用户可能需要屏幕阅读器为他们朗读内容，而另一些用户可能需要放大页面才能阅读。支持所有用户意味着提供经过防御性设计的内容版本，使其在现代浏览器上看起来很棒，但无论用户如何访问您的内容，都能在基本层面上可用。

基本级别的支持来自于良好地组织您的内容，使页面正常流具有意义。对于数据计划有限的用户，他们的浏览器可能不会加载图像、字体，甚至您的 CSS。但是，即使这些元素没有完全加载，内容也应该以可访问和可读的方式呈现。一个结构良好的 HTML 文档应该始终是您的起点。问自己：如果您删除样式表，您的内容是否仍然有意义？

花费时间试图让每个人都获得相同的网站体验在商业上是没有意义的。这是因为用户环境可能差异很大，并且超出您的控制。您需要在纯 HTML 页面和功能齐全的网站之间取得平衡。测试您网站的纯 CSS-less 视图有助于确保您网站的备用体验是可访问的。这种备用方案可能永远不会被使用非常旧或有限浏览器的用户看到，但可能会被您的主要目标受众（现代浏览器的用户）在他们的浏览器或互联网连接暂时中断时看到。CSS 简化了创建这些备用方案。因此，最好关注您可以控制的方面，即花时间使您的网站 可访问，从而为更多用户服务。

在 CSS 中创建备用方案

CSS 规范包含解释当两个相似功能（例如布局方法）应用于同一项目时浏览器会做什么的信息。例如，它们定义了如果一个项目浮动并且也是网格项且是 CSS 网格容器的一部分时会发生什么。还有关于元素同时设置了 margin-top 和 margin-block-start 属性时会发生什么的定义。

当浏览器无法识别新功能时，它会将声明丢弃为无效 而不会抛出错误。因为浏览器会丢弃它们不支持的 CSS 属性和值，所以旧值和新值可以共存于同一规则集中。只需确保在新值之前声明旧值，这样，当支持时，新值会覆盖旧值（备用方案）。

例如，大多数浏览器都支持 display 属性的两个值语法。如果浏览器不支持，它将使用较旧的单值语法。

.container {
  display: inline-flex;
  display: inline flex;
}

同样，这种 错误处理 确保旧的 CSS 代码库即使在不再支持旧版 厂商前缀 功能的情况下也能继续工作。虽然厂商前缀不再常用，但如果您必须包含厂商前缀属性或值，请确保在标准值之前声明前缀值，这样，当支持时，新值会覆盖备用值。

使用新选择器

包含并非所有浏览器都支持的新选择器需要更仔细地处理。如果逗号分隔的 选择器列表中的选择器无效，则整个样式块将被忽略。

如果使用浏览器可能尚未支持的带厂商前缀的 伪元素 或新的 伪类，请使用 :is() 或 :where() 将前缀值包含在 宽容的选择器列表 中，这样整个选择器块就不会 失效并被忽略。

:is(:-prefix-mistake, :unsupported-pseudo),
.valid {
  font-family: sans-serif;
}
:-prefix-mistake,
:unsupported-pseudo,
.valid {
  color: red;
}

在上面的例子中，.valid 的内容将是 sans-serif 而不是 red。

特性查询

功能查询允许您测试浏览器是否支持特定的 CSS 功能。这意味着您可以为不支持某个功能的浏览器编写一些 CSS，然后检查浏览器是否支持，如果支持，则添加您花哨的新功能。

我们可以添加一个功能查询来测试 subgrid 支持，并根据该支持提供样式

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: palegoldenrod;
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border-radius: 5px;
  background-color: rgb(207 232 220);
}

@supports (grid-template-rows: subgrid) {
  .wrapper {
    grid-template-rows: subgrid;
    gap: 10px;
    background-color: lightblue;
    text-align: center;
  }
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
  <div class="item">Item Four</div>
  <div class="item">Item Five</div>
  <div class="item">Item Six</div>
</div>

功能查询在所有现代浏览器中都受支持。首先，在任何功能查询之外为完全支持的功能编写 CSS。一旦您的网站对所有用户都可用和可访问，请在功能查询块中添加新功能。支持所查询功能的浏览器 then 可以渲染功能查询块内的新 CSS。采用首先编写良好支持的 CSS，然后根据支持增强功能的方法。

测试旧版浏览器

一种方法是使用在线测试工具，例如 Sauce Labs，具体细节在 测试 模块中。

总结

您现在掌握了为旧版浏览器提供备用 CSS 并自信地测试新功能的知识。您现在应该对使用任何可能出现的新技术感到自信。

现在您已经学习了我们关于 CSS 布局的文章，是时候通过我们的模块评估来测试您的理解了：基本布局理解。

另见

• @supports @规则
• CSS at-rules
• 使用特性查询
• CSS 条件规则模块