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

All TutorialsMTopics List

现代css的一些实验性特性

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

目录

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

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

让我们回顾一下如何:

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

了解CSS的新特性

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

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

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

测试CSS支持

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

这个at规则允许测试:

  • 性能
  • 选择器

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

scss 复制代码
@supports (accent-color: red) {
  /* styles when accent-color is supported */
}

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

python 复制代码
@supports selector(:is(a)) {
  /* styles when :is() is supported */
}

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

scss 复制代码
@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)

less 复制代码
/* 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

css 复制代码
.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-size100dvh 的逻辑属性,其中 dvb 是更适合iOS Safari等环境的"动态视口单元"。

css 复制代码
/* Fallback */
height: 100vh;
/* Ideal, modern version */
block-size: 100dvb;

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

相关推荐
风尚云网17 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020419 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing21 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月24 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆32 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China33 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q33 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海34 分钟前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端
Myli_ing2 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html