2024年应该知道的5个CSS特性；更好的包管理器 Bun，速度惊人！
今天是坚持日更的第138天，如果文章对您有帮助， 点击关注、点赞、在看支持我
2024年你应该知道的5个CSS特性
1.Nesting
原生 CSS 嵌套可以像 SASS、LESS 预处理器一样，将相关的选择器组合在一起，从而减少需要编写的规则数量，它可以节省打字时间，并使语法更易于阅读和维护。您可以将选择器嵌套到任意深度，但要小心不要超过两层或三层。嵌套深度没有技术限制，但它会使代码更难以阅读，并且生成的 CSS 可能会变得不必要的冗长。
.button {
background-color: red;
&.warning {
background-color: blue;
}
& .icon {
width: 1rem;
height: 1rem;
}
}
原生 CSS 嵌套（Native CSS nesting）已经被所有现代桌面浏览器所支持！详细阅读：现代CSS：原生 CSS 嵌套快速入门
2.:has() 选择器
继 Firefox 121 支持 :has() 后，:has() 已经被所有现代浏览器所支持，可以说它已经变得普遍可用。
:has() 选择器的主要应用场景：
1）选择父元素：
查找 span 元素为空的 div.box 父元素，并设置 display: none
.box:has(span:empty) {
display: none;
}
2）检查是否有多个孩子节点：
:has() 允许传递一个包含多个标签的列表，这意味着你可以在给定元素中检查任意多个选择器。
.box:has(p, span, h3) {
display: none;
}
3）选择前一个兄弟元素：
通过将 CSS 相邻同级组合器与 :has() 伪类相结合，可以选择前一个同级。邻接同级组合器会选择给定元素的下一个同级元素。我们可以使用 has() 来获取上一个同级元素。简而言之，如果一个元素有下一个同级元素，那么使用 :has() 和 + 组合器就可以轻松选择它！
.box:has(+ .select-my-previous-sibling) {
color: green;
}
4）有条件的装饰：
比如隐藏 p 为空元素的父节点。
.box:has(p:empty) {
display: none;
}
5）和 :not()、:empty及其他选择器配合使用：
和 :not()、:empty及其他选择器配合使用，应用范围将更加广泛。
3.text-wrap: balance
text-wrap:balance 可以让每一行文字的个数尽可能的相等，即使宽度足够的大。
4.subgrid
多年来，前端 Web 社区一直希望 subgrid 帮助完善和完善这一广受欢迎且功能强大的 CSS 网格布局引擎。它现在适用于所有三大主要引擎。
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
5.container units
新增了六个自定义单元：
内嵌变体 cqi。 宽度变体 cqw。 块变体 cqb。 高度变体 cqh。 cqmin 是长度较小的变体的变体。 cqmax 中较长者的变体。
设想一个容器的相对和固有动画场景。使用 100cqi（即容器内嵌大小的 100%）从容器完全滑出的子元素。
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}更好的包管理器 Bun，速度惊人！
Bun 是一个快速的全能工具包，用于运行、构建、测试和调试 JavaScript 和 TypeScript（从单个文件到全栈应用程序）。Bun 的核心是一个快速的 JavaScript 运行时，旨在取代 Node.js。它是用 Zig 语言编写的，并在底层由 JavaScriptCore 提供支持，大大减少了启动时间和内存使用。
从一个张包管理的 benchmark 的对比图，我们可以看到与 npm、pnpm、yarn对比，Bun 的速度惊人！
在2024年，建议在内部项目中使用 Bun 尝试一下。Bun 团队每天都在迭代，让我们一起期待 Bun 的未来有更好的表现，被更多的开发者所喜爱！
大家都在看