2024 年值得关注的六大全新 CSS 特性
阅读：25
点赞：0
一、CSS 容器查询
容器查询允许你根据容器元素的尺寸来应用样式。容器查询的运作方式类似于媒体查询。
如何使用容器查询
使用容器查询，可以根据父元素的尺寸动态调整子元素的样式。
要做到这一点，首先必须为父元素定义一个容器上下文。这是通过 container-type 属性来指定的。
/* 设置容器类型为尺寸 */
.container {
container-type: size;
}
/* 设置容器类型为内联尺寸 */
.container {
container-type: inline-size;
}
当设置为 size 时，你可以通过宽度和高度值来进行查询。当设置为 inline-size 时，查询仅基于宽度（水平维度）。
由于这一特性，可以根据父元素的尺寸改变子元素的样式属性。
示例代码
<div class="post">
<div class="card">
<h2>卡片标题</h2>
<p>卡片内容</p>
</div>
</div>
/* 定义容器类型 */
.post {
container-type: size;
}
/* 默认样式 */
.card h2 {
font-size: 1em;
color: blue;
}
/* 当容器宽度大于等于 700px 时 */
@container (min-width: 700px) {
.card h2 {
font-size: 5em;
color: purple;
}
}
效果展示
二、CSS 嵌套规则
通过 CSS 嵌套规则，可以将一条规则放置在另一条规则内部。这对于管理依赖上下文的样式特别有用。例如，如果你有一个 .container 类，并且想要对其 .item 元素进行样式设置，你可以直接在 .container 规则内书写 .item 的规则。
浏览器可以直接解析嵌套规则。这意味着你不需要预处理器来编译嵌套规则；它们可以在浏览器中本机运行。
示例代码
<form>
<label for="name">姓名:
<input type="text" id="name" />
</label>
<label for="surname">姓氏:</label>
<input type="text" id="surname" />
</form>
/* 输入框样式 */
input {
border: 2px solid red;
}
/* 标签样式 */
label {
font-family: system-ui;
font-size: 1.25rem;
/* 子输入框样式 */
& input {
border: 2px solid purple;
}
}
效果展示
三、:scope 伪类
:scope 选择器用于定义 CSS 中样式的范围。
使用方法
如果 :scope 在 CSS 的根级别，它等同于 :root。
示例代码
<html></html>
/* 相当于 :root */
:scope {
background-color: orange;
}
效果展示
图像描述
在 @scope 块内部使用 :scope 可以根据由类名定义的上下文进行清晰且有针对性的样式设置。
示例代码
<div class="light">
<p>
<a href="#">dev.to</a>,
</p>
</div>
<div class="dark">
<p>
Lorem Ipsum
<a href="#">dev.to</a>,
</p>
</div>
/* 定义 light 上下文 */
@scope (.light) {
:scope {
background-color: black;
}
a {
font-size: 2rem;
}
}
/* 定义 dark 上下文 */
@scope (.dark) {
:scope {
background-color: yellow;
color: purple;
}
a {
font-size: 4rem;
}
}
效果展示
四、:has() 伪类
:has() 选择器允许你在父元素包含特定子元素时对其应用样式。
示例代码
<p>
Lorem Ipsum is that it has a more-or-less normal distribution of letters,
<a href="/">as opposed to using 'Content here, content here', making it look like readable English.</a>
</p>
/* 当 p 包含 a 时 */
p:has(a) {
font-size: 40px;
}
效果展示
五、颜色函数
通过新的颜色函数，如 color-mix() 和 color-contrast()，你可以对颜色的色调和对比度有更多的控制。
示例代码
/* 混合两种颜色 */
color-mix(in lab, plum 60%, #f00 50%)
/* 对比两种颜色 */
color-contrast(wheat vs tan, sienna, #d2691e)
/* 使用变量对比颜色 */
color-contrast(#008080 vs olive, var(--myColor), #d2691e)
六、锚点定位
CSS 锚点定位模块定义了可以将元素绑定在一起的特性。某些元素被定义为锚点元素；锚点定位的元素可以根据它们所绑定的锚点元素的大小和位置来设置其大小和位置。