时间：2023-09-06 02:30:01 | 来源：网站运营
时间：2023-09-06 02:30:01 来源：网站运营
3 种在任何浏览器中使用 CSS 网格的后备方案：“特性查询 是使用 CSS 的 at 规则如果你曾经使用过媒体查询，那么我想，你也会非常熟悉@supports创建的。它给予 Web 开发者一种有效的方法去测试浏览器是否支持某个确定特性，而后提供基于测试结果生效的 CSS 。在此指南中你将学习如何使用特性查询实现渐进式增强。” — [MDN Web文档]（https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries）
在线咨询
@supports 的语法，毕竟两者是很相似的。不过在这里我们使用 @supports 不是希望基于浏览器的视口大小来调整布局，而是希望基于 CSS 属性的支持与否来定义指定的样式。@supports，我们将检查浏览器是否支持 Grid。如果支持，我们就会使用 Grid 来增强布局。@supports 查询基本的 display：grid 功能：@supports (display: grid) { /* ... code here */}完整的例子如下：<!DOCTYPE html><html lang="en"><head> <title>生产中的 Grid</title> <meta charset="UTF-8"/></head><body><style> #container { display: flex; flex-direction: column; gap: 10px; border: 1px solid #000; padding: 10px; } @supports (display: grid) { #container { display: grid; } @media (min-width: 768px) { #container { grid-template-columns: 100px 1fr 100px; } } } .side1 { padding: 10px; background-color: #CEB992; } .side2 { padding: 10px; background-color: #CEB992; } .content { padding: 10px; min-height: 400px; background-color: #5B2E48; } body { color: #FFF; font-weight: 500; }</style><div id="container"> <div class="side1"> 侧边栏 </div> <div class="content"> 主要内容 </div> <div class="side2"> 侧边栏 </div></div></body></html>注意，我们并没有断言 Grid 特性 grid-template-columns。如果浏览器不支持该怎么办？在这种情况下，Grid 将退回到默认的定位算法 —— 它将堆叠 div。在我们的示例中，该方法可以正常运行，因此我们不需要再去进行额外的工作。CSSSupportsRule 来访问 @supports。让我们看一下它的定义：CSSSupportsRule接口代表一个 CSS@supports和at-rule— [MDN Web文档]（https://developer.mozilla.org/en-US/docs/Web/API/CSSSupportsRule）
function supports(property: string, value: string): boolean;我们在一个假设的案例中使用看看。如果用户使用的浏览器不支持 Grid 布局功能，它就会给用户发出警告。不过我们可不能在生产环境中这样做，这只是一个有趣的例子。if (!CSS || !CSS.supports('display', 'grid')) { // ...}请注意，某些浏览器可能不支持 CSS.supports，因此我们还添加了空检查。<!DOCTYPE html><html lang="en"><head> <title>生产中的 Grid</title> <meta charset="UTF-8"/></head><body><style> #container { display: flex; flex-direction: column; gap: 10px; border: 1px solid #000; padding: 10px; } @supports (display: grid) { #container { display: grid; } @media (min-width: 768px) { #container { grid-template-columns: 100px 1fr 100px; } } } .side1 { padding: 10px; background-color: #CEB992; } .side2 { padding: 10px; background-color: #CEB992; } .content { padding: 10px; min-height: 400px; background-color: #5B2E48; } body { color: #FFF; font-weight: 500; }</style><script> (function warnSupport() { if (!CSS || !CSS.supports('display', 'grid')) { alert('Warning your Browser does not support the latests features. Consider switching to a newer one') } })();</script><div id="container"> <div class="side1"> 侧边栏 </div> <div class="content"> 主要内容 </div> <div class="side2"> 侧边栏 </div></div></body></html>CSS.supports 是用于以编程方式创建后备布局的优秀工具。如果我们必须处理非常复杂的布局，那么我们可能需要选用此方法而不是 CSS 特性查询。有了这种程序化的后备方案，我们可以使用它来创建 Web 组件。#container { display: flex; display: grid; /* 如果 Grid 不可用，则第二个属性声明将失效，且浏览器会应用第一个属性声明的值 `flex` */}我们可以以更简单的方式重写先前的 CSS 特性查询示例：<!DOCTYPE html><html lang="en"><head> <title>生产中的 Grid</title> <meta charset="UTF-8"/></head><body><style> #container { display: flex; display: grid; flex-direction: column; gap: 10px; border: 1px solid #000; padding: 10px; } @media (min-width: 768px) { #container { grid-template-columns: 100px 1fr 100px; } } .side1 { padding: 10px; background-color: #CEB992; } .side2 { padding: 10px; background-color: #CEB992; } .content { padding: 10px; min-height: 400px; background-color: #5B2E48; } body { color: #FFF; font-weight: 500; }</style><script> (function warnSupport() { if (!CSS || !CSS.supports('display', 'grid')) { alert('Warning your Browser does not support the latests features. Consider switching to a newer one') } })();</script><div id="container"> <div class="side1"> 侧边栏 </div> <div class="content"> 主要内容 </div> <div class="side2"> 侧边栏 </div></div></body></html>这种后备方案虽然简单但是功能强大。在许多情况下它很有用 —— 毕竟我们可能无法对所有要使用的 Grid 功能都进行查询。subgrid 进行回退吧。我们应该如何使用呢？subgrid 的场景，划重点：#content { grid-template-columns: inherit; grid-template-columns: subgrid;}在此示例中，当不支持 subgrid 时候，它将仅继承父级的 Grid 定义。这将创建一个大致相似的布局。grid-template-columns 微调到某些固定大小，或者在我们的特定情况下最适合的大小。<!DOCTYPE html><html lang="en"><head> <title>Grid 案例</title> <meta charset="UTF-8"/></head><body><style> body { color: white; text-align: center; box-sizing: content-box; margin: 20px; } .palette-1 { background-color: #CEB992; } .palette-2 { background-color: #471323; } .palette-3 { background-color: #73937E; } .palette-4 { background-color: #5B2E48; } .palette-5 { background-color: #585563; } #container { padding: 10px; background-color: #73937E; height: 500px; width: calc(100vw - 60px); display: grid; grid-template-rows: repeat(8, 1fr); grid-template-columns: max-content 1fr 1fr 1fr; row-gap: 1rem; } .item { padding: 20px; } .content-main { grid-column: span 3; } #content { background-color: #73937E; grid-column: 1 / -1; display: grid; grid-template-columns: inherit; grid-template-columns: subgrid; column-gap: 1rem; }</style><div id="container"> <div id="content"> <div class="content-left item palette-5"> 标题 </div> <div class="content-main item palette-4"> </div> </div> <div id="content"> <div class="content-left item palette-5"> 另一个标题 </div> <div class="content-main item palette-4"> </div> </div></div></script></body></html>至于结果：subgrid，更多的用户都可以看到布局的像素级完美版本！subgrid 之类的最新功能。如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、本站专栏。
关键词：方案,使用,任何,浏览
