這篇文章跟大家分享幾個2022年值得期待的、不該錯過的 CSS 新功能,一起收藏學習吧!
對CSS來說,2022年是非常值得期待的一年,大量的新功能即將出現,有些已經開始登入瀏覽器,有些可能會在2022年獲得瀏覽器的廣泛支援。下面就來看看2022年有哪些值得期待的 CSS 新功能吧! (推薦學習:css影片教學)
容器查詢使我們能夠根據其父元素的大小設定元素的樣式,它類似於@media查詢,不同之處在於它根據容器的大小而不是視口的大小進行判斷。這一直是響應式設計的問題,因為我們有時希望元件能夠適應它的上下文。
對於容器查詢,需要使用 container 屬性(它是 container-type 和 container-name 的縮寫)指定一個元素作為容器。 container-type 可以是width、height、inline-size、block-size。 inline-size 和 block-size 是邏輯屬性,根據文件的寫入模式,它們可能會產生不同的結果。
main, aside { container: inline-size; }
可以使用類似媒體查詢的方式來使用@container。需要注意,兩者在括號中表達規則的方式有所不同(在容器查詢中應該使用 inline-size > 30em 而不是 min-width: 30em)。這是媒體查詢 4 級規範的一部分。當容器寬度大於 30rem 時,就切換到 flex 佈局:
@container (inline-size > 30em) { .card { display: flex; } }
CSS Containment Level 3 規範目前處於工作草案中,這表示語法可能隨時改變。
目前容器查詢在主流瀏覽器是不可用的,可以期待容器查詢在瀏覽器的實作。
CSS Containment Module Level 3 (官方規範):https://www.w3.org/TR/css-contain-3
:has()
通常被稱為“父選擇器”,這個偽類別使我們能夠根據其後代選擇一個元素。它有一些非常有趣的用例。例如,可以根據圖像是否包含 614eb9dc63b3fb809437a716aa228d24
,而在24203f2f45e6606542ba09fd2181843a
中對圖像進行不同的樣式設定。
要設定包含c1a436a314ed609750bd7c7d319db4da
的2f8332c8dcfd5c7dec030a070bf652c3
元素的樣式,可以執行以下操作:
section:has(h2) { background: lightgray; }
當a1f02c36ba31691bcfe87b2722de723b
的父級2f8332c8dcfd5c7dec030a070bf652c3
包含c1a436a314ed609750bd7c7d319db4da
時,設定a1f02c36ba31691bcfe87b2722de723b
的樣式:
section:has(h2) img { border: 5px solid lime; }
目前還沒有主流瀏覽器支援該屬性,但可以在Safari 技術預覽版中使用它。
Safari 技術預覽版:https://developer.apple.com/safari/technology-preview/
CSS Selectors Level 4 (官方規格):https://www .w3.org/TR/selectors-4/
@when media(min-width: 30em) and supports(display: subgrid) { } @else { }
CSS Conditional Rules Module Level 5(官方規範):https://www.w3.org/TR/css-conditional-5四、accent- color
:root { accent-color: lime; }
可以在单个元素上使用:
form { accent-color: lime; } input[type="checkbox"] { accent-color: hotpink; }
目前,accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色,并且输入是完全可用的。
CSS Basic User Interface Module Level 4(官方规范):https://www.w3.org/TR/css-ui-4/
我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数,使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括:
hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同,都有一个可选的alpha 参数:
.my-element { background-color: lch(80% 100 50); } .my-element { background-color: lch(80% 100 50 / 0.5); }
color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数:
.my-element { background-color: color-mix(in lch, blue, lime); }
color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色,或者在提供额外关键字的情况下,输出列表中符合相应对比度的第一种颜色:
/* 输出对比度最高的颜色 */ .my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue); } /* 输出符合AA对比度的第一种颜色 */ .my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue to AA); }
Safari 目前在浏览器支持方面处于领先地位,从版本 15 就开始支持hwb()、 lch()、lab()、color(),color-mix() 和 color-contrast() 可以通过 flag 启用。Firefox 支持 hwb(),并且还标记了对 color-mix() 和 color-contrast() 的支持。令人惊讶的是,Chrome 现在还不支持这些函数。
在代码中提供样式兼容并不难:给定两种颜色规则,如果浏览器不支持第二种颜色规则,它将忽略第二种颜色规则:
.my-element { background-color: rgb(84.08% 0% 77.36%); background-color: lch(50% 100 331); }
这样,当浏览器支持该函数时,就可以直接使用了。
CSS Color Module Level 4(官方规范):https://www.w3.org/TR/css-color-4/
CSS Color Module Level 5(官方规范):https://www.w3.org/TR/css-color-5
层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前,有几个因素决定了 CSS 代码中将应用哪些样式,包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组(或者“分层”)。顺序较低的层中的代码将优先于较高层中的代码,即使较高层中的选择器具有更高的权重。
下面来看看层叠层的基本使用:
/* 按顺序创建图层 */ @layer reset, base, theme; /* 将CSS添加到每个层 */ @layer reset { } @layer base { h1.title { font-size: 5rem; } } @layer theme { h1 { font-size: 3rem; } }
theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明,尽管后者选择器具有更高的权重。
最新版本的 Firefox 已经支持了层叠层,并且可以在 Chrome 和 Edge 中使用 flag 启用(Chrome 99 版本将全面支持层叠层)。看起来所有主流浏览器都在使用这个规范,所以希望尽快能得到更广泛的支持。
CSS Cascading and Inheritance Level 5(官方规范):https://www.w3.org/TR/css-cascade-5/
作为 CSS Grid Layout Module 2 规范的一部分,subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。
例如,以下面这个带有标题的图像为例。标题的长度各不相同,使用 subgrid 可以直接让它们对齐,而无需设置固定的高度。
首先将父元素设置为grid布局,将子元素的“grid-template-columns”或“grid-template-rows”属性设置为 subgrid:
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); } .grid > figure { display: grid; grid-template-rows: subgrid; } .grid figcaption { grid-row: 2; }
实现效果:
完整代码:
html:
<div class="grid"> <figure> <img src='https://images.unsplash.com/photo-1633083018029-bd1d4d52cb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTYyMw&ixlib=rb-1.2.1&q=80&w=400' alt='Bluetit'> <figcaption>A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.</figcaption> </figure> <figure> <img src='https://images.unsplash.com/photo-1619976302135-5efbc2a7785a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTY4NA&ixlib=rb-1.2.1&q=80&w=400' alt='Robin'> <figcaption>Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.</figcaption> </figure> <figure> <img src='https://images.unsplash.com/photo-1623627733740-4724cb1fe84e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTc4NQ&ixlib=rb-1.2.1&q=80&w=400' alt='Chaffinch'> <figcaption>The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.</figcaption> </figure> </div>
CSS:
* { box-sizing: border-box; } body { font-family: "Open Sans", sans-serif; margin: 0; padding: max(1rem, 3vw); } figure { margin: 0; display: grid; /* grid-template-rows: subgrid; */ /* grid-row: 1 / 3; */ } img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; grid-row: 1 / 3; grid-column: 1; } figcaption { padding: 1rem; grid-column: 1; grid-row: 2; background: hsl(0 0% 0% / 0.6); color: white; } .grid { display: grid; max-width: 80rem; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; } @media (min-width: 62em) { .grid { grid-template-rows: 1fr auto; } figure { grid-template-rows: subgrid; grid-row: 1 / 3; } }
演示demo:https://codepen.io/michellebarker/pen/YzERyor
值得注意的是,自 2019 年以来,Firefox 已经支持了 subgrid,但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它,所以可能有幸在今年看到它登陆 Chrome 和 Edge。
CSS Grid Layout Module Level 2(官方规范):https://www.w3.org/TR/css-grid-2/
@scroll-timeline 属性定义了一个AnimationTimeline,其时间值由滚动容器中的滚动进度决定(而不是时间决定)。一旦指定,@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。
这里来看一个简单的例子:
/* 设置关键帧动画 */ @keyframes slide { to { transform: translateX(calc(100vw - 2rem)); } } /* 配置scroll timeline,这里将它命名为了slide-timeline */ @scroll-timeline slide-timeline { source: auto; orientation: vertical; scroll-offsets: 0%, 100%; /* 指定关键帧动画和 scroll-timeline */ .animated-element { animation: 1s linear forwards slide slide-timeline; }
我们也可以对scroll-offsets属性使用基于元素的偏移量,以在特定元素滚动到视图中时触发 timeline:
@scroll-timeline slide-timeline { scroll-offsets: selector(#element) end 0, selector(#element) start 1; }
如果对 @scroll-timeline 感兴趣,可以在 Chrome 中使用 flag 来启用它。当我们遇到一个复杂的动画时,可能需要使用 JavaScript 动画库来实现,但是对于相对简单的动画,使用该属性就可以减少不必要的import。
Scroll-linked Animations(官方规范):https://drafts.csswg.org/scroll-animations-1/
如果你熟悉 Sass,就会知道嵌套选择器的便利性。本质上,就是在父级中编写子级规则。嵌套可以使编写CSS代码更加方便,现在嵌套终于来到了原生 CSS!
从语法上讲,它与 Sass 相似。下面来给 class 为 card 中的 h2 子元素定义样式规则:
.card { color: red; & h2 { color: blue; } }
可以将其用于伪类和伪元素:
.link { color: red; &:hover, &:focus { color: blue; } }
这些就等价于下列 CSS 代码:
.link { color: red; } .link:hover, .link:focus { color: blue; }
目前还没有浏览器支持嵌套。如果你使用PostCSS,可以通过预置的 postcss-preset-env 插件来尝试嵌套。
CSS Nesting Module(官方规范):https://www.w3.org/TR/css-nesting-1/
现在正处于 CSS 蓬勃发展的时代。在写这篇文章时,我注意到这些新功能有一些共同点,它们都是为了帮助我们编写更好、更干净、更高效的代码。随着时间的推移,预处理工具(如 Sass)可能会变得不再重要。让我们一起期待更多新的 CSS 功能出现吧!
英文原文:https://www.smashingmagazine.com/2022/03/new-css-features-2022/
作者:Michelle Barker
译者:CUGGZ
(学习视频分享:web前端)
以上是2022年你值得了解的幾個CSS新功能(收藏學習)的詳細內容。更多資訊請關注PHP中文網其他相關文章!