现代css的一些实验性特性 【译】

All TutorialsMTopics List

现代css的一些实验性特性

这是系列中的第31集，探讨了Stephanie Eckles在过去15年多的前端开发中一直在解决的问题的现代CSS解决方案。

目录

1. 了解CSS的新特性
2. 测试CSS支持
3. 决定使用新功能
4. CSS特征检测的替代方法
5. 使用构建工具和多边形填充
6. 额外资源

CSS语言的步伐可能很难跟上！浏览器每月发布功能和修复，CSS工作组也在不断制定规范。那么，你怎么知道使用一个新功能是"安全"的呢？做出这个选择的考虑是什么？

让我们回顾一下如何：

• 查找有关新功能的信息
• 支持试验
• 确定何时使用功能
• 决定是否需要后备
• 使用构建工具和多边形填充

了解CSS的新特性

以下是您可以了解新的和即将推出的CSS功能的方法列表：

• 来自不同浏览器制造商的开发者关系人员Una Kravets 和 Jen Simmons

• 在公共GitHub中查看和关注您感兴趣的问题，并将其添加到CSS the public GitHub 中

• 订阅CSS工作组（CSSWG）博客提要

• 查看浏览器引擎的发行说明和功能博客

  • Webkit (Safari) Webkit（Safari）
  • Firefox
  • Chrome

• 消费来自出版物和个人的材料，他们专注于CSS

  • CSS IRL by Michelle Barker
    CSS IRL作者：Michelle Barker
  • Miriam Suzanne 米里亚姆·苏珊娜
  • Bramus Van Damme 布拉姆斯货车达姆
  • Chen Hui Jing 陈慧静
  • Andy Bell 安迪·贝尔
  • Kevin Powell 凯文·鲍威尔

• subscribe to newsletters

  订阅新闻通讯

  • Frontend Focus 前端焦点
  • CSS Layout News CSS布局新闻
  • The CodePen Spark CodePen Spark
  • Smashing Magazine Newsletter
    Smashing杂志通讯
  • CSS Weekly CSS周刊

此外，浏览器制造商已经开始每年努力提高网络的互操作性，这意味着努力使功能在跨浏览器中一致地工作。您可以在Interop控制面板上查看这些工作的列表和进度。

当你现在吸收CSS中所有可能的东西时，记住：这不是关于现在学习一切;这是关于在需要的时候意识到什么是可能帮助你开发解决方案的！

测试CSS支持

CSS支持测试-也称为"功能检测"-可以使用 @supports 直接在样式表中完成。

这个at规则允许测试：

• 性能
• 值
• 选择器

在 @supports 中，如果浏览器理解属性和值，则测试条件将返回正数。

@supports (accent-color: red) {
  /* styles when accent-color is supported */
}

您还可以测试选择器，如 :is() 、 :where() 、 :focus-visible 等。当在类似于 :is() 的函数中使用 selector 条件时，还必须向选择器提供一个值。

@supports selector(:is(a)) {
  /* styles when :is() is supported */
}

与媒体查询一样，您可以使用 and 和 or 组合联合收割机测试，并使用 not 否定测试。

@supports (leading-trim: both) or (text-box-trim: both) {
  /* Styles when either property is supported */
}

@supports (transform: scale(1)) and (scroll-timeline-name: a) {
  /* Styles when both properties are supported */
}

@supports not selector(:focus-visible) {
  /* Styles when :focus-visible is not supported */
}

@supports 的限制

@supports 的一个重要限制是它目前无法测试at-rules，这意味着它无法检测对 @container （容器查询）， @layer （级联层）和其他的支持。这种缺乏检测是有问题的，因为at规则通常会极大地影响您如何编写和构建CSS。

此外，部分实现的测试可能存在问题。

作为部分实现失败的一个例子，CSS最近添加的是 :has() 选择器。不幸的是，在Firefox 112中编写时的实现可能会在使用 :has() （如 li:has(+ ) ）测试关系选择器时返回误报。这是假的，因为部分实现只支持更直接的选择器，如 li:has(a) 。

/* This should fail in Firefox 112 */
@supports selector(li:has(+ *)) {
  /* It may not fail, so the body becomes red */
  body {
    background: red;
  }

  /* This rule does fail to apply */
  li:has(+ *) {
    background: green;
  }
}

使用 @supports 时，请确保在多个浏览器中测试结果，以确保您的样式应用于您想要的结果。

还要注意，使用 @supports 测试您的条件需要支持 @supports 本身！换句话说，检查您正在测试的特性和 @supports 的支持，以确保您没有创建一个实际上不会有机会失败的条件，因为如果不支持 @supports 则会被忽略。

不要错过CSS特征检测的替代方法部分。

决定使用新功能

CSS语言的发展是因为网络是复杂的，我们的需求是不断变化的。此外，设备激增和用户需求推动了底层浏览器引擎的大量变化和改进。

例如，人们认为容器查询永远不可能实现，但相关功能的可用性使其能够在2023年2月完成跨浏览器的发布。

但是你什么时候知道是时候开始使用一个新功能了呢？毕竟，虽然浏览器Chrome、Edge和Firefox被称为"万年青"--这意味着它们可以自动更新自己--但无法保证用户会很快允许更新。Safari也可以以与操作系统更新分离的方式进行更新，但这样做不会主动推送，通常只有高级用户才会寻求更新。正如埃里克·贝利（Eric Bailey）所写的那样，万年青并不意味着立即可用。

caniuse.com是一个检查功能可用性的流行资源。这是一个很好的地方，可以获得浏览器功能添加的概述，以及部分实现或已知错误的注释。但是，显示的支持百分比应作为一个指标，并与您的实际受众分析一起使用。

根据您在世界上的位置，您的行业或您的产品的特定营销，您可能需要延迟使用特定功能。或者，你可能会发现积极的迹象，你的大多数观众将能够看到最新和最伟大的！

如果您使用VSCode，我也强烈推荐webhint扩展，当您编写的功能可能不受支持时，它会提醒您。这就省去了去caniuse的麻烦，因为它还为您提供了不支持该功能的列表。有了这些信息，您就可以决定在编写样式时是否需要创建支持解决方案。这也有助于减少以后在您可能没有测试过的浏览器中出现的错误（尽管您应该尽可能多地测试！）。

您希望集成的功能的影响也在此决策中占很大比重。例如，一些现代的CSS功能是"值得拥有的"，它们提供了一个更新的体验，当它们工作时很棒，但当它们失败时也不一定会导致用户体验的中断。 低影响功能的一些示例包括：

• accent-color -更改原生表单元素的颜色，包括复选框和单选按钮
• ::marker -应用自定义列表项目符号或数字样式，如更改颜色
• overscroll-behavior -当到达可滚动容器的末尾时，防止滚动链接到后台页面
• scroll-margin -能够为滚动位置添加边距，对锚目标很有用
• text-underline-offset -允许调整文本下划线和文本之间的距离

影响布局结构或与提供更易访问的体验相关的其他功能，可能不建议使用，直到您确信支持的可能性很高。作为一个快速的措施，考虑如果现代功能失败，用户是否会被阻止在您的网站上执行他们需要执行的任务。

后备解决方案

合理使用新功能的另一种方法是将它们与后备解决方案一起包含。"回退"是一种解决方案，当理想的功能不受支持时，它可以很好地保持积极的用户体验。

回退工作有两个原因。首先，因为CSS会默默地失败--这意味着它会跳过它不理解的定义，而不会破坏整个样式表。第二，因为CSS中的"C"是使用定义的列表顺序作为浏览器确定应用哪个定义的一部分的级联。级联规则说，在相同的特定性下，浏览器理解的最后一个顺序的定义将"获胜"。

例如， aspect-ratio 是一个很棒的功能，我喜欢用它在卡片网格或图像库中创建统一大小的图像。回退可以为图像提供高度，以便至少它们在布局中受到约束，即使不使用理想的 aspect-ratio 。

下面的例子来自我的资源SmolCSS和"Smol Aspect Ratio Gallery"演示。

首先，我们假设没有支撑，并给予一个明确的高度。然后，使用 @supports 检查 aspect-ratio 支持，我们删除显式高度，然后使用 aspect-ratio 。

.smol-aspect-ratio-gallery li {
  height: max(25vh, 15rem);
}

@supports (aspect-ratio: 1) {
  .smol-aspect-ratio-gallery li {
    aspect-ratio: var(--aspect-ratio);
    height: auto;
  }
}

通常，回退可以是使用较旧语法或方法的一行替代。这些解决方案被放置在理想解决方案之前，这允许在支持的地方使用现代解决方案。当它不受支持时，将使用受支持的最后一个顺序的定义，这是由于级联。

在这个例子中，我们的回退使用了支持良好的 height 属性和 100vh 。然后，我们将其升级为使用 block-size 和 100dvh 的逻辑属性，其中 dvb 是更适合iOS Safari等环境的"动态视口单元"。

/* Fallback */
height: 100vh;
/* Ideal, modern version */
block-size: 100dvb;

更多请查看原文 moderncss.dev/testing-fea...