这篇文章主要介绍“CSS新特性有哪些及如何使用”,在日常操作中,相信很多人在CSS新特性有哪些及如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS新特性有哪些及如何使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
一、容器查询
1. 基本概念
容器查询使我们能够根据其父元素的大小设置元素的样式,它类似于 @media查询,不同之处在于它根据容器的大小而不是视口的大小进行判断。这一直是响应式设计的一个问题,因为我们有时候希望组件能够适应它的上下文。
2. 使用方法
对于容器查询,需要使用 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 规范目前处于工作草案中,这意味着语法可能随时改变。
3. 当前状态
目前容器查询在主流浏览器是不可用的,可以期待一下容器查询在浏览器的实现。
二、:has()
1. 基本概念
:has()
通常被称为“父选择器”,这个伪类使我们能够根据其后代选择一个元素。它有一些非常有趣的用例。例如,可以根据图像是否包含 <figcaption>
,而在<figure>
中对图像进行不同的样式设置。
2. 使用方法
要设置包含<h3>
的<section>
元素的样式,可以执行以下操作:
section:has(h3) {
background: lightgray;
}
当 <img>
的父级 <section>
包含 <h3>
时,设置 <img>
的样式:
section:has(h3) img {
border: 5px solid lime;
}
3 当前状态
目前还没有主流浏览器支持该属性,但可以在 Safari 技术预览版中使用它。
三、@when/@else
1. 基本概念
@when/@else 是CSS中的条件规则,类似于其他编程语言中的if/else 逻辑。它可以使编写复杂的媒体查询更加符合逻辑。这里选择使用@when而不是@if是为了避免与 Sass 产生冲突。
2. 使用方法
可以查询多种媒体条件或支持的功能,例如用户的视口是否超过一定宽度,用户浏览器是否支持 subgrid。
@when media(min-width: 30em) and supports(display: subgrid) {
} @else {
}
3. 当前状态
现在改属性还没有在浏览器得到支持。现在还为时过早,仍在讨论中。预计今年不会广泛被浏览器支持,但它肯定是值得关注的一个非常实用的属性。
四、accent-color
1. 基本概念
color-scheme 属性允许元素指示它可以轻松呈现的配色方案。操作系统配色方案的常见选择是“亮”和“暗”,或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时,操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。
2. 使用方法
用法很简单,而且该属性是可继承的。所以可以在根级别设置它,以在任何地方应用它:
:root {
accent-color: lime;
}
可以在单个元素上使用:
form {
accent-color: lime;
}
input[type="checkbox"] {
accent-color: hotpink;
}
3. 当前状态
目前,accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色,并且输入是完全可用的。
五、颜色函数
1. 基本概念
我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数,使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括:
hwb():色相、白度、黑度。
lab():亮度以及决定色调的 a和b值。
lch():亮度、色度、色调。
color-mix():将两种颜色混合在一起。
color-contrast():从颜色列表中,输出与第一个参数相比对比度最高的颜色。
color():指定不同颜色空间中的颜色(例如display-p3)。
2. 使用方法
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);
}
.my-element {
color: white;
background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}
3. 当前状态
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);
}
这样,当浏览器支持该函数时,就可以直接使用了。
六、层叠层
1. 基本概念
层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前,有几个因素决定了 CSS 代码中将应用哪些样式,包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组(或者“分层”)。顺序较低的层中的代码将优先于较高层中的代码,即使较高层中的选择器具有更高的权重。
2. 使用方法
下面来看看层叠层的基本使用:
@layer reset, base, theme;
@layer reset {
}
@layer base {
h2.title {
font-size: 5rem;
}
}
@layer theme {
h2 {
font-size: 3rem;
}
}
theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明,尽管后者选择器具有更高的权重。
3. 当前状态
最新版本的 Firefox 已经支持了层叠层,并且可以在 Chrome 和 Edge 中使用 flag 启用(Chrome 99 版本将全面支持层叠层)。看起来所有主流浏览器都在使用这个规范,所以希望尽快能得到更广泛的支持。
七、subgrid
1. 基本概念
作为 CSS Grid Layout Module 2 规范的一部分,subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。
例如,以下面这个带有的图像为例。的长度各不相同,使用 subgrid 可以直接让它们对齐,而无需设置固定的高度。
2. 使用方法
首先将父元素设置为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;
}
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;
}
}
3. 当前状态
值得注意的是,自 2019 年以来,Firefox 已经支持了 subgrid,但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它,所以可能有幸在今年看到它登陆 Chrome 和 Edge。
八、@scroll-timeline
1. 基本概念
@scroll-timeline 属性定义了一个AnimationTimeline,其时间值由滚动容器中的滚动进度决定(而不是时间决定)。一旦指定,@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。
2. 使用方法
这里来看一个简单的例子:
@keyframes slide {
to { transform: translateX(calc(100vw - 2rem)); }
}
@scroll-timeline slide-timeline {
source: auto;
orientation: vertical;
scroll-offsets: 0%, 100%;
.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;
}
3. 当前状态
如果对 @scroll-timeline 感兴趣,可以在 Chrome 中使用 flag 来启用它。当我们遇到一个复杂的动画时,可能需要使用 JavaScript 动画库来实现,但是对于相对简单的动画,使用该属性就可以减少不必要的import。
九、嵌套
1. 基本概念
如果你熟悉 Sass,就会知道嵌套选择器的便利性。本质上,就是在父级中编写子级规则。嵌套可以使编写CSS代码更加方便,现在嵌套终于来到了原生 CSS!
2. 使用方法
从语法上讲,它与 Sass 相似。下面来给 class 为 card 中的 h3 子元素定义样式规则:
.card {
color: red;
& h3 {
color: blue;
}
}
可以将其用于伪类和伪元素:
.link {
color: red;
&:hover,
&:focus {
color: blue;
}
}
这些就等价于下列 CSS 代码:
.link {
color: red;
}
.link:hover,
.link:focus {
color: blue;
}
3. 当前状态
目前还没有浏览器支持嵌套。如果你使用PostCSS,可以通过预置的 postcss-preset-env 插件来尝试嵌套。
到此,关于“CSS新特性有哪些及如何使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!