支持旧版浏览器

¥What is the browser landscape for your site?

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

¥Every website is different in terms of its target audience. Before deciding on an approach, find out the number of visitors coming to your site using older browsers. This is straightforward if you're adding to or replacing an existing website, as you probably have analytics available that can tell you the technology your visitors are using. If you don't have analytics or you're launching a brand new site, then sites such as Statcounter can provide relevant statistics, which can be filtered by location.

你还应该考虑设备的类型以及人们使用你网站的方式。例如，你的网站在移动设备上的使用率预计会高于平均水平。始终优先考虑可访问性和使用辅助技术的人员；对于某些网站来说，这可能更为重要。开发者常常非常担心 1% 用户的体验，而忽视了更多有无障碍需求的用户。

¥You should also consider the type of devices and the way people use your site. For example, you can expect a higher-than-average usage of your website on mobile devices. Always prioritize accessibility and people using assistive technology; for some sites, this may be even more critical. Developers are often very worried about the experience of 1% of users, while overlooking the far greater number who have accessibility needs.

¥Feature support does not mean identical appearance

网站不可能在所有浏览器中看起来都一样。你的一些用户将在手机上查看该网站，而其他用户将在大桌面屏幕上查看该网站。同样，你的一些用户将使用旧的浏览器版本，而其他用户将使用最新的浏览器。你的一些用户可能会听到屏幕阅读器向他们读出你的内容，而其他用户可能需要放大页面才能阅读。支持所有人意味着提供防御性设计的内容版本，以便它在现代浏览器上看起来很棒，但无论用户如何访问你的内容，仍然可以在基本级别上使用。

¥A website can't possibly look the same in all browsers. Some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, while others might need to zoom in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for all users no matter how they are accessing your content.

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

¥A basic level of support comes from structuring your content well so that the normal flow of your page makes sense. For users on a limited data plan, their browsers might not load images, fonts, or even your CSS. However, the content should be presented in a way such that it is accessible and readable even when these elements are not fully loaded. A well-structured HTML document should always be your starting point. Ask yourself: if you remove your stylesheet, does your content still make sense?

花时间试图为每个人提供相同的网站体验没有商业意义。这是因为用户环境可能差异很大并且超出你的控制范围。你需要在纯 HTML 页面和功能齐全的网站之间取得平衡。测试网站的简单、无 CSS 视图会很有帮助，以确保网站的后备体验可访问。使用非常旧的或功能有限的浏览器的人可能永远看不到此回退，但当你的主要目标受众（现代浏览器的用户）的浏览器或互联网连接暂时失败时，他们可能会看到此回退。CSS 简化了这些后备的创建。因此，最好专注于你可以控制的事情，即花时间让你的网站 accessible，从而服务更多的用户。

¥It doesn't make commercial sense to spend time trying to give everyone an identical experience of your website. This is because user environments can vary widely and are beyond your control. There is a balance you need to strike between a plain HTML page and a fully featured website. It is helpful to test a plain, CSS-less view of your site to ensure that the fallback experience of your site is accessible. This fallback may never be viewed by people using very old or limited browsers, but may be viewed by your main target audience — users of modern browsers — when their browser or Internet connection fails temporarily. CSS simplifies creating these fallbacks. Therefore, it is better to focus on what you can control, that is, spend the time to make your site accessible, thereby serving more users.

¥Creating fallbacks in CSS

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

¥CSS specifications contain information that explain what the browser does when two similar features, such as layout methods, are applied to the same item. For example, they define what happens if an item is floated and is also a grid item and part of a CSS grid container. There is also a definition for what happens when an element has both margin-top and margin-block-start properties set.

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

¥When a browser doesn't recognize a new feature, it discards the declaration as invalid without throwing an error. Because browsers discard CSS properties and values they don't support, both old and new values can coexist in the same ruleset. Just make sure to declare the old value before the new value so that, when supported, the new value overwrites the old value (the fallback).

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

¥For example, most browsers support the two-value syntax of the display property. If a browser doesn't, it will use the older, single-value syntax.

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

同样，即使不再支持旧的 vendor-prefixed 功能，此 error-handling 也可确保旧的 CSS 代码库继续工作。虽然供应商前缀不再常用，但如果必须包含供应商前缀的属性或值，请确保在标准值之前声明前缀值，以便在支持时新值会覆盖后备值。

¥Similarly, this error-handling ensures old CSS code bases continue to work even if legacy vendor-prefixed features are no longer supported. While vendor prefixing is no longer commonly used, if you must include a vendor-prefixed property or value, make sure to declare the prefixed value before the standard value so that, when supported, the new value overwrites the fallback value.

¥Using new selectors

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

¥Including new selectors that aren't supported in all browsers needs to be handled more carefully. If a selector in a comma-separated list of selectors is invalid, the entire style block is ignored.

如果使用供应商前缀的 pseudo-elements 或新的 pseudo-classes，浏览器可能尚不支持，请使用 :is() 或 :where() 在 宽容选择器列表 中包含前缀值，这样整个选择器块就不会得到 无效并被忽略。

¥If using vendor-prefixed pseudo-elements or new pseudo-classes a browser may not yet support, include the prefixed values within a forgiving selector list by using :is() or :where() so the entire selector block doesn't get invalidated and ignored.

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

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

¥In the above example, the .valid content will be sans-serif but not red.

¥Feature queries

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

¥Feature queries allow you to test whether a browser supports a particular CSS feature. This means that you can write some CSS for browsers that don't support a certain feature, then check to see if the browser has support and if so, throw in your fancy new features.

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

¥We can add a feature query to test for subgrid support, and provide styles based on that support:

* {
  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，然后基于支持增强功能的方法。

¥Feature queries are supported in all modern browsers. Write your CSS for fully supported features first, outside of any feature queries. Once your site is usable and accessible to all users, add new features within feature query blocks. Browsers that support the feature queried can then render the newer CSS inside the feature query block. Use the approach of writing well-supported CSS first, then enhancing features based on support.

¥Testing older browsers

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

¥One way is to use an online testing tool such as Sauce Labs, as detailed in the Cross browser testing module.

¥Summary

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

¥You now have the knowledge to provide fallback CSS for older browsers and confidently test for new features. You should now feel confident making use of any new techniques that might come along.

现在你已经阅读了我们有关 CSS 布局的文章，现在是时候通过我们对该模块的评估来测试你的理解程度了：基本布局理解。

¥Now that you have worked through our articles on CSS layout, it's time to test your comprehension with our assessment for the module: Fundamental layout comprehension.

¥See also

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