likes
comments
collection
share

CSS&UI的最新动态：I/O 2023更新

作者站长头像
站长
· 阅读数 39

原文链接: What’s new in CSS and UI: I/O 2023 Edition

CSS&UI的最新动态：I/O 2023更新 过去的几个月迎来了Web UI的黄金时代。新的平台功能已经随着跨浏览器的采用而落地，支持比以往更多的 Web 功能和自定义功能。

以下是最近或即将推出的 5 个最令人兴奋和最具影响力的功能，我觉得最吸引人：

👉 样式查询 (Style Queries)

容器查询规范还允许您查询父容器的样式值。这目前在 Chrome 111 中部分实现，您可以在其中使用 CSS 自定义属性来应用容器样式。

下面的示例向我们展示了如何使用样式查询。

@container style(--sunny: true) {
    .weather-card {
        background: linear-gradient(30deg, yellow, orange);
    }
    .weather-card:after {
        content: url(<date-uri-for-demo-brevity>);
        background: gold;
    }
}

这只是样式查询的开始。将来，我们将使用布尔查询来确定自定义属性值是否存在并减少代码重复，目前正在讨论的范围查询，以基于值范围应用样式。这样就可以使用下雨或云量的百分比值应用此处显示的样式。

您可以在有关样式查询的博客文章中了解更多信息并查看更多演示。

👉 :has() 

说到强大的动态功能，:has() 选择器是现代浏览器中最强大的新 CSS 功能之一。使用 :has（），您可以通过检查父元素是否包含特定子元素的存在或这些子元素是否处于特定状态来应用样式。这意味着，我们现在基本上有一个父选择器。

在容器查询示例的基础上，您可以使用 :has() 使组件更加动态。在其中，带有“星号”元素的项目将应用灰色背景，而带有选中复选框的项目将应用蓝色背景。

但此 API 不仅限于父选择。您还可以设置父级中的任何子级样式。例如，当项目存在星形元素时，标题为粗体。这是通过 .item：has(.star) .title 完成的。使用 :has() 选择器可以访问父元素、子元素甚至同级元素，使其成为一个非常灵活的 API。

为了防止大型 DOM 树中的渲染性能下降，我们建议您尽可能限定此选择器的范围。例如，使用 :has() 检查根 html 元素上的匹配项比在导航栏或具有较小树的卡片元素中检查匹配项要慢。

👉nth-of syntax

网络平台现在具有更高级的第 n 个子选项。提供了一个新关键字 （“of”），它允许您使用 An+B 的现有微语法，以及更具体的子集进行搜索。

如果在特殊类上使用常规的第 n 个子级，例如 :nth-child(2)，浏览器将选择应用了特殊类的元素，并且也是第二个子级。这与 :nth-child(.special) 的 2 个相反，后者将首先预过滤所有 .special 元素，然后从该列表中选择第二个元素。

:nth-child(2 of .highlight) {
   outline: 0.3rem dashed hotpink;
   outline-offset: 0.7rem;
}

👉 动态视口单元 ( Dynamic viewport units)

Web 开发人员今天面临的一个常见问题是准确且一致的全视口大小调整，尤其是在移动设备上。作为开发人员，您希望 100vh（视口高度的 100%）表示“与视口一样高”，但 vh 单位不考虑移动设备上收回导航栏之类的事情，因此有时它最终会太长并导致滚动。

CSS&UI的最新动态：I/O 2023更新

为了解决此问题，他们现在在 Web 平台上具有新的单位值，包括：

  • 小视口高度和宽度（或 svh 和 svw），表示最小的活动视口大小。
  • 较大的视口高度和宽度（lvh 和 lvw），表示最大大小。
  • 动态视口高度和宽度（dvh 和 dvw）。

当其他动态浏览器工具栏（如顶部的地址或底部的选项卡栏）可见时，动态视口单元的值会发生变化，而当它们不可见时，动态视口单元的值会发生变化。

CSS&UI的最新动态：I/O 2023更新

👉 嵌 套 (Nesting)

CSS嵌套，人们喜欢Sass的东西，也是CSS开发人员多年来最热门的要求之一，终于登陆了Web平台。嵌套允许开发人员以更简洁的分组格式编写，从而减少冗余。

还可以嵌套媒体查询，这也意味着可以嵌套容器查询。在以下示例中，如果卡片的容器中有足够的宽度，则卡片将从纵向布局更改为横向布局：

.card {
    display: grid;
    pap: 1rem;
}
@container (width >= 480px) {
    display: flex;
}

当容器具有更多（或等于）480px 的内联空间时，会发生对 flex 的布局调整。当满足条件时，浏览器将简单地应用该新显示样式。

有关更多信息和示例，请查看我们关于 CSS 嵌套的文章CSS nesting。

👉 作用域内 CSS (Scoped CSS)

CSS 作用域样式允许开发人员指定应用特定样式的边界，实质上是在 CSS 中创建本机命名空间。以前，开发人员依靠第三方脚本来重命名类，或依靠特定的命名约定来防止样式冲突，但很快，您可以使用@scope。

在这里，我们将 .title 元素的范围限定为 .card。这将防止该标题元素与页面上的任何其他 .title 元素（如博客文章标题或其他标题）冲突。

@scope (.card) {
    .title {
        font-weight: 900;
    }
}

您可以在此演示中看到具有范围限制的@scope以及@layer：

😘 结论 

在 developer.chrome.com 上了解CSS和HTML，并查看I/O视频以获取更多Web详细信息。

最后，如果这篇文章可以帮助您了解最新的技术或至少对您有所帮助，请给我留下. 👏这对我来说意义重大🥰.

转载自:https://juejin.cn/post/7259605860602937399
评论
请登录