每周平台新闻：:not() 伪类、视频媒体查询、clip-path: path() 支持

Avatar of Šime Vidas
Šime Vidas 于

DigitalOcean 为您旅程的每个阶段提供云产品。从 200 美元的免费积分 开始！

大家好，我们又回到了 每周更新，了解来自 Šime Vidas 的浏览器领域动态。

在本周的更新中，CSS :not 伪类可以接受复杂的选择器，如何在 Chrome 中使用“在页面上查找…”时禁用平滑滚动，Safari 对 <video> 元素上的 media 属性的支持，以及期待已久的 CSS clip-path 属性的 path() 函数的首次亮相。

让我们进入新闻…

增强的 :not() 伪类支持新的强大选择器

经过多年的等待，增强的 :not() 伪类终于在 Chrome 和 Firefox 中发布，现在已在 所有主要浏览器引擎 中得到支持。这个新版本的 :not() 接受 复杂选择器 甚至整个选择器列表。

例如，您现在可以选择所有 不 包含在 <article> 元素内的 <p> 元素。

/* select all <p>s that are descendants of <article> */
article p {
}

/* NEW! */
/* select all <p>s that are not descendants of <article> */
p:not(article *) {
}

在另一个示例中，您可能希望选择不具有 hidden 属性（或任何其他属性）的第一个列表项。此任务的最佳选择器将是 :nth-child(1 of :not([hidden]))，但 of 表示法仍然 仅在 Safari 中受支持。幸运的是，此不受支持的选择器现在可以使用增强的 :not() 伪类重写。

/* select all non-hidden elements that are not preceded by a non-hidden sibling (i.e., select the first non-hidden child */
:not([hidden]):not(:not([hidden]) ~ :not([hidden])) {
}

HTTP Refresh 标头可能存在可访问性问题

HTTP Refresh 标头（以及等效的 HTML <meta> 标签）是一个 非常古老 且 广泛支持 的非标准功能，它指示浏览器在给定时间后自动定期重新加载页面。

<!-- refresh page after 60 seconds -->
<meta http-equiv="refresh" content="60">

根据 Google 的数据，<meta http-equiv="refresh"> 标签在 Chrome 中的使用率高达 2.8% 的页面加载（比一年前下降了 4%）。所有这些网站都存在 违反 Web 内容可访问性指南 (WCAG) 的多个成功标准 的风险。

如果时间间隔太短，并且无法关闭自动刷新，那么盲人将没有足够的时间让他们的屏幕阅读器读取页面，然后 页面意外刷新 并导致屏幕阅读器从顶部开始读取。

但是，WCAG 确实允许将 <meta http-equiv="refresh"> 标签专门与值 0 一起使用，以在作者无法控制服务器并且因此无法执行正确的 HTTP 重定向的情况下执行 客户端重定向。

（来自 Stefan Judis）

如何在 Chrome 中禁用“在页面上查找…”功能的平滑滚动

CSS scroll-behavior: smooth 在 Chrome 和 Firefox 中 受支持。当此声明设置在 <html> 元素上时，浏览器会“以平滑的方式”滚动页面。这适用于导航、标准滚动 API（例如，window.scrollTo({ top: 0 })）和滚动捕捉操作（CSS 滚动捕捉）。

不幸的是，Chrome 错误地 保持平滑滚动启用，即使用户在页面上执行文本搜索（“在页面上查找…”功能）。有些人发现这 很烦人。在修复之前，您可以使用 Christian Schaefer 的巧妙 CSS 解决方法，该方法可以有效地仅对“在页面上查找…”功能禁用平滑滚动。

@keyframes smoothscroll1 {
  from,
  to {
    scroll-behavior: smooth;
  }
}

@keyframes smoothscroll2 {
  from,
  to {
    scroll-behavior: smooth;
  }
}

html {
  animation: smoothscroll1 1s;
}

html:focus-within {
  animation-name: smoothscroll2;
  scroll-behavior: smooth;
}

在下面的演示中，请注意单击链接如何平滑滚动页面，而搜索“顶部”和“底部”这两个词则会立即滚动页面。

Safari 仍然支持视频源上的 media 属性

使用 HTML <video> 元素，可以声明多种不同 MIME 类型和编码的视频源。这允许网站在支持的浏览器中使用更新、更高效的视频格式，同时为其他浏览器提供回退。

<video>
  <source src="/flower.webm" type="video/webm">
  <source src="/flower.mp4" type="video/mp4">
</video>

过去，浏览器也支持视频源上的 media 属性。例如，如果用户的视口超过某个大小，网页可以加载更高分辨率的视频。

<video>
  <source media="(min-width: 1200px)" src="/large.mp4" type="video/mp4">
  <source src="/small.mp4" type="video/mp4">
</video>

上述语法实际上今天仍然 在 Safari 中受支持，但它已从其他浏览器中删除 大约在 2014 年，因为它 不被认为是一个好功能。

它不适合在低分辨率和高分辨率之间进行选择，因为环境可能会发生变化（例如，用户可能在视频开始加载后将其全屏显示并希望获得高分辨率）。此外，媒体查询中不提供带宽，但即使提供，用户代理比作者更适合确定什么是合适的。

Scott Jehl（Filament Group）认为 删除此功能是一个错误，并且网站应该能够仅使用 <video> 提供响应式视频源。

对于我们在 HTML 中嵌入的每个视频，我们都必须选择提供可能对许多用户设备而言过大或过小的源文件……或者求助于更复杂的服务器端或脚本或第三方解决方案来提供正确的大小。

Scott 已经为在视频 <source> 元素中重新引入 media 编写了一个 提案，并欢迎反馈。

CSS clip-path: path() 函数在 Chrome 中发布

最新的 “Chrome 88 中的新增功能”文章 中没有提到，但 Chrome 刚刚 发布 了 CSS clip-path 属性的 path() 函数，这意味着此功能现在在所有三个主要浏览器引擎（Safari、Firefox 和 Chrome）中都受支持。

path() 函数在 CSS 形状 模块中定义，它接受 SVG 路径字符串。Chris 将其称为 clip-path 属性的 终极语法，因为它可以使用“任何形状”剪辑元素。例如，这是一张用心形剪辑的照片

嘘！ 创建一个 DigitalOcean 帐户，并获得 200 美元的免费积分 用于基于云的托管和服务。

评论

  1. Konstantin
    评论永久链接#

    好消息！一些说明。第一个关于使用 :not 伪类的示例。我们不能将此示例重写为

    ul > :not(:not([hidden]) ~ :not([hidden])) {
  color: red;
}

    这是没有第一个 :not([hidden]) 选择器吗？

    关于更好的平滑滚动示例，我再次有点困惑，为什么我们需要两个动画，除非我遗漏了什么，我认为我们可以按以下方式重写它

    @keyframes smoothscroll1 {
  from, to {
    scroll-behavior: smooth;
  }
}

/*
@keyframes smoothscroll2 {
  from, to {
    scroll-behavior: smooth;
  }
}
*/


html {
  animation: smoothscroll1 1s;
}

html:focus-within {
/*   animation-name: smoothscroll2; */
  animation: none;
  scroll-behavior: smooth;
}

    也就是说，我们只使用单个动画，然后当焦点在 html 内时，我们删除此动画。

    • Šime Vidas
      评论永久链接#

      如果我正确理解了选择器，:not(:not([hidden]) ~ :not([hidden])) 确实选择了我们想要的项目（第一个未隐藏的项目），但它也选择了所有隐藏的项目。

      因此，为了仅选择第一个非隐藏项目而不是隐藏项目，我们需要使用额外的 :not([hidden]) 进一步限定选择器。

      我必须承认，我不明白解决方法是如何工作的，但我已经测试了您的代码（CodePen），并且 Firefox 中的滚动对我来说不再平滑了。

    • Konstantin
      评论永久链接#

      感谢 Šime 的回复。

      至少可以说，这种双重否定仍然令人困惑。

      例如，如果此选择器
      ul > :not(:not([hidden]) ~ :not([hidden]))
      意思是，如果一个列表项前面有一个带有hidden属性的列表项，并且后面还有其他带有hidden属性的列表项，
      那么为什么列表中的第一个列表项（它前面没有带有hidden属性的兄弟节点）会被选中呢？

      关于smooth-scroll技巧。在第一次点击“到底部”链接后，后续点击将不会有任何效果，也就是说，页面不会滚动甚至跳转到页面底部。
      这可能是FF中的某个bug。
      我在Windows 10，FF 85上进行了检查

    • Šime Vidas
      评论永久链接#

      是的，它有点像正则表达式，功能强大但不容易阅读。

      我认为弄清楚这个选择器作用的一个好方法是先看内部部分。:not([hidden]) ~ :not([hidden])选择什么？它选择所有非隐藏元素，这些元素前面至少有一个非隐藏元素。所以在我的演示中，这将是第5、6、8和9项。

      外部的:not()反转了这一点，这意味着:not(:not([hidden]) ~ :not([hidden]))选择所有其他项：第1、2、3、4和7项。

      我们只想选择第2项，该组中唯一一个非隐藏的项，因此我们在选择器的前面添加另一个:not([hidden])来排除隐藏的项。

      关于smooth-scroll，我怀疑问题是由CodePen的包装器引起的。当我在一个干净的页面上打开演示时*，问题不会出现。

      *Firefox 中有一个“在新标签页中打开框架”选项

  2. Richard Nash
    评论永久链接#

    对于:not()选择器，选择器列表看起来像什么……像这样

    .class:not(.other-class, .yet-another-class, .one-more-class) { ...css stuffz...}

    ?

    • Šime Vidas
      评论永久链接#

      是的，一个用逗号分隔的选择器列表。

      选择器的特异性由最具体的参数决定，因此，如果你写.foo:not(.bar, #baz)，则完整选择器的特异性将是1个ID（#baz）+ 1个类（.foo），这相当高。

      此外，如果列表中的某个参数在浏览器中不受支持，则整个选择器将被忽略。例如，.foo:not(.bar, :focus-visible)在不支持:focus-visible的浏览器中会被忽略。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。

© 2024 . All rights reserved.