支持旧版浏览器

每个网站的目标受众都不同。在确定方法之前，请了解使用旧版浏览器访问您网站的访客数量。如果您正在添加或替换现有网站，这很简单，因为您可能已拥有可用于告知访客使用的技术的分析信息。如果您没有分析信息，或者您正在启动一个全新的网站，那么像 Statcounter 这样的网站可以提供相关统计信息，这些信息可以按位置进行过滤。

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

网站不可能在所有浏览器中都呈现相同。一些用户将使用手机查看网站，而另一些用户则使用大型台式机屏幕。同样，一些用户将使用旧版浏览器，而另一些用户将使用最新版浏览器。一些用户可能通过屏幕阅读器收听内容，而另一些用户可能需要放大页面才能阅读。支持所有人意味着提供一个防御性设计的版本，这样它在现代浏览器上看起来很棒，但在所有用户访问内容时，无论他们如何访问，都可以在基本级别上使用。

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

花费时间尝试让每个人对您的网站拥有相同的体验从商业意义上来说是不合理的。这是因为用户环境可能差异很大，而且您无法控制。您需要在纯 HTML 页面和功能齐全的网站之间取得平衡。测试您网站的纯 CSS-less 视图非常有用，以确保您网站的回退体验是可访问的。这个回退可能永远不会被使用非常旧或有限浏览器的用户查看，但可能会被您的主要目标受众查看 - 使用现代浏览器的用户 - 当他们的浏览器或互联网连接暂时出现故障时。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，这些功能位于任何功能查询之外。一旦您的网站对所有用户都可用且可访问，请在功能查询块内添加新功能。支持查询的功能的浏览器可以渲染功能查询块内的更新 CSS。使用先编写良好支持的 CSS，然后根据支持来增强功能的方法。

一种方法是使用在线测试工具，例如 Sauce Labs，如 跨浏览器测试 模块中所述。

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

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

• @supports at-规则
• CSS at-规则
• 使用功能查询
• CSS 条件规则 模块

• 上一个
• 概述：CSS 布局
• 下一个