2023年CSS新功能记录

Mzz
450 阅读6分钟

稍微记录一下2023年CSS推出的新功能。

参考来源：developer.chrome.com/blog/css-wr…

架构基础

三角函数

添加了对三角函数的支持，分别为sin() cos() tan() asin() acos() atan() atan2()。

可以通过三角函数，更加精确地计算出旋转的位置。


<div class="main">
    <div class="container">
        <div class="center"></div>
        <div class="round"></div>
    </div>
</div>

.round {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #088ea7;
    border-radius: 50%;
    transform: translate(calc(100px * cos(30deg)), calc(100px * sin(30deg)));
}

Snipaste_2024-03-29_21-51-21.png

复杂的第n-*选择

可以将选择器列表传递到:nth-child :nth-last-child中，即可以在使用An+B进行子元素选择之前，对子元素进行过滤。


<div class="main">
    <div class="box">1</div>
    <div class="box special">2</div>
    <div class="box special">3</div>
    <div class="box">4</div>
    <div class="box special">5</div>
</div>

.special {
    color: red;
}

.main :nth-child(2n-1 of .special) {
    background-color: #b1d7c8;
}

如图中，子元素选择时会从.special中进行选择。

Snipaste_2024-03-29_22-19-47.png

镜

使用@scope，可以限制选择器的覆盖面。为此，可以设置作用域根，确定需要定位的子树的上限。设定作用域根集后， 其中包含的样式规则将只会从DOM的这一有限子树中进行选择。


<div class="main">
    <div class="container1">
        <div class="container2">
            <div class="box">123</div>
        </div>
    </div>
    <div class="box">456</div>
</div>

@scope (.container2)  {
  .box {
    background-color: #71c3b5;
  }
}

如图中，我们可以不必使用.main.container1.container2.box来选择其中的div，以此避开选择外层的box。 我们可以使用@scope(.container2)，将后续的样式选择，指定为.container2中，在准确选中div的同时，避免编写 特异性高抑或与DOM紧密耦合的选择器。

Snipaste_2024-03-29_22-38-05.png

嵌套

以前的css样式写法一般如下，在嵌套之前，每个选择器都需要单独进行显式声明，这可能会导致重复、大量的样式表以及零散的创作体验。

.main {
}

.main .box1 {
}

.main .box2 {
}

支持嵌套之后，选择器可以继续，并且其相关的样式规则可以在其中分组。

.main {
    .box1 {

    }

    .box2 {

    }
}

同时，css原生也内置支持&嵌套选择器，样式的继承以及层级结构会更加的直观。也算是加入了Less等预处理器中，让人体验舒适的样式写法。

排版

首字母

initial-letter属性，可以调整字母的放置位置，使其变为向下或突起。

属性接受两个参数：

  • 第一个参数，表示将字母放到相应段落中的深度。
  • 第二个参数，表示将字母放到相应段落中的高度。

一般处理首字母突出，会采用::first-letter为元素来实现。

但是，在计算第一个字母的大小时，可能需要float等属性。也可以使用lh来解决这部分的问题，但是lh仅在Chrome中受支持。

p::first-letter {
    color: hsl(220, 94%, 51%);
    font-weight: bold;
    font-size: 3lh;
    float: left;
    line-height: 1;
    margin-right: 0.1lh;
}

Snipaste_2024-03-29_23-04-02.png

而采用initial-letter,可以更加精细、方便地控制首字母的样式。

p::first-letter {
    initial-letter: 3.5 3;
}

Snipaste_2024-03-29_23-04-53.png

文本换行平衡/美观

使用text-wrap:balance;，可以让文本的换行更为平衡、美观。可以理解为，将调整文本布局，使其更为平衡/美观的任务，交给浏览器， 让浏览器来计算如何进行排版。

(未使用text-wrap)

Snipaste_2024-03-29_23-10-40.png

(使用text-wrap)

Snipaste_2024-03-29_23-10-57.png

但它的使用有限制。由于浏览器需要遍历迭代以发现最佳平衡的封装解决方案，它更适用于6个及以下的换行段落。

颜色

CSS Color 4 为网页提供了广色域颜色工具和功能：更多的颜色、操作函数、更好的渐变效果。

可查阅：developer.chrome.com/docs/css-ui…

自适应设计

容器查询

容器查询支持查询网页中的父元素，而不是使用视口的全局尺寸信息来应用CSS样式，即可以在多个布局和多个视图中为组件设置动态样式。

容器查询对于自适应设计和可重复使用的组件特别有用。例如，启用一个卡片组件，该组件在置于边栏中时可采用一种布局方式，在产品网格中可采用另一种配置布局。

使用容器查询，需要先在父元素上设置包含，同时为其指定类型和名称。

.card-container {
    container: card / inline-size;
}

然后,该容器可以通过@container将样式应用于子级中。

.card-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
    .card-child {
        grid-template-columns: 1fr;
    }
}

样式查询

可以使用@container style()查询父元素上的自定义属性的值，如container style(--rain: true)。 但现在仅为部分功能实现，可期待。

:包含选择器

如下图，可以使用has()根据是否包含某个子元素来筛选父元素。


<div class="everybody">
    <div>
        <div class="a-good-time">a good time</div>
    </div>
</div>
<div class="everybody"></div>

.everybody {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.everybody:has(.a-good-time) {
    background-color: #0e7d91;
}

Snipaste_2024-03-30_21-28-41.png

更新媒体查询

使用update媒体查询，可以使界面适应设备的刷新频率。可以传入三个值

  • fast，查询设备是否渲染内容时具有较快的刷新频率
  • slow，适合电子阅读器等刷新率较慢的设备
  • none，适合打印纸张、电子墨水显示屏等只提供一个渲染通道的设备，不刷新
@media (update: fast) {

}

为媒体查询编写脚本

透明度媒体查询

详见：developer.chrome.com/blog/css-pr…

交互

视图转换

详见：developer.chrome.com/docs/web-pl…

线性加/减速函数

详见：developer.chrome.com/docs/css-ui…

滚动

在滚动完成后触发事件。

document.onscrollend = event => {

}

滚动驱动的动画

可以获取现有的CSS动画或使用Web Animations API构建的动画，并将其与滚动条的滚动偏移量相结合。 在水平滚动条中上下滚动或左右滚动的时候，关联的动画会以直接响应的方式向前和向后拖动。 详见：developer.chrome.com/docs/css-ui…

延迟时间轴附加功能

详见：developer.chrome.com/docs/css-ui…

离散属性转换

详见：developer.chrome.com/blog/entry-…

起始样式规则

详见：developer.chrome.com/blog/entry-…

叠加动画

详见：developer.chrome.com/blog/entry-…

组件

弹出式窗口

Popover API可以构建叠加在页面其余部分上的元素。 创建简单的弹出式窗口，可以向弹出的元素添加popover属性和id，然后使用popovertarget="my-popover"将其id属性连接到调用按钮。

Popover API支持以下功能：

  • 提升到顶层。弹出式窗口将显示在页面其余部分之上的单独一层中，从而不必再调整z-index。
  • 轻度关闭功能。点击弹出式窗口区域以外的位置会关闭弹出式窗口并返回焦点。
  • 默认的焦点管理。打开弹出式窗口会是下一个标签页停止在弹出式窗口内显示。
  • 无障碍键盘绑定。点按esc键或进行双重切换会关闭弹出式窗口并返回焦点。
  • 可访问的组件绑定。从语义上将弹出式窗口元素连接到弹出式窗口触发器。

<button class="menu-btn" popovertarget="menu">
    test
</button>
<div popover role="menu" id="menu">
    <button class="close-btn" popovertarget="menu" popovertargetaction="hide">
        <span>close</span>
    </button>
    <ul>
        <li>云想衣裳花想容，</li>
        <li>春风拂槛露华浓。</li>
        <li>若非群玉山头见，</li>
        <li>会向瑶台月下逢。</li>
    </ul>
</div>

Snipaste_2024-03-30_21-59-18.png

Snipaste_2024-03-30_21-59-33.png

选定小时数

详见：developer.chrome.com/blog/hr-in-…

用户有效/无效的伪类

详见：web.dev/articles/us…

专属手风琴

可以在<details>元素上使用name属性，使用此属性时，具有相同name值的多个<details>元素会形成语义组。 组中最多只能有一个元素同时打开。即当打开组中的某个<details>元素时，之前打开的元素将自动关闭。

avatar
文章
阅读
粉丝