微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home
在过来一年中，CSS 的新性能爆发式增长，它们彻底改变了咱们编写 CSS 的形式。无论你在网页开发的旅程中处于什么阶段，都会有新的货色须要学习。对于一个简略的款式语言来说，它的变动速度的确相当快！
:has() 选择器
新的选择器在除了 Firefox 之外的所有浏览器中都能够工作，然而当标记关上时它是被反对的，所以咱们晓得它行将到来。
:has()选择器容许咱们依据子元素来为父元素设置款式。例如，咱们能够这样做：
figure {background: white;}
figure:has(img) {background: grey;}如果 figure 元素内有 img，则将其背景更改为灰色。当然，这样做还能够有更多理论的用处，比方：
form:has(input:invalid) { /*there an invalid input*/
background: red;
}
form:not(:has(input:invalid)) { /*all inputs valid*/
background: green
}那个 :not(:has(input:invalid)) 很酷，但有点让人困惑。基本上，如果 form 没有有效的 input，它只蕴含无效的 inputs，所以它是无效的 form 👍。
:focus-within 伪类
你可能曾经应用了 :focus 一段时间了，但 :focus 只能在以后元素上起作用。如果你想晓得用户是否聚焦在子元素上怎么办？如果页面上有一个 iframe 或者菜单中的子链接，这将十分有用。你能够像这样应用它：
div:focus-within {background: red;}
如果用户关注 div 中的任何内容，div 会变成红色。这很不便！你甚至能够在咱们之前的例子中也这样做！
form:has(input:invalid):focus-within {background: red;}
form:not(:has(input:invalid)):focus-within {background: green}这样，除非用户与之交互，否则 form 不会变成红色或绿色。从技术上讲，一个空表单是有效的表单 😱
3. 级联层
这个有点独特，尽管我从未见过它的理论用处，但必定有一个。从这个 HTML 开始：
<div class="box">
<p>Hello, world!</p>
</div>抉择 <p> 标签：
p {font-size: 18px}然而如果咱们想要增加更多的款式呢？好吧，CSS 是向下级联的，所以咱们只须要在它之后增加一些款式即可。
p {font-size: 18px}
p {
font-weight: bold;
font-size: 20px;
color: red;
}到目前为止，这只是根本的 CSS，没有什么革命性的货色。然而，如果咱们想要为 font-weight 和 color 增加款式，但保留 font-size 怎么办？不言而喻的解决方案是删除 font-size: 20px 这一行，但当初有一种新的办法，应用“Layers”：
p {font-size: 18px;}
@layer type {
p {
font-weight: bold;
font-size: 20px;
color: red;
}
}
这个 CSS 的后果将以粗体、红色和 18 像素 的字体大小显示段落。再读一遍。只管第二个 p 选择器更具体（因为它在更深的地位），但因为它位于 “type” 层外部，20 像素 的字体大小不会笼罩 18 像素 的字体大小
也能够这么认为，@layer 内的所有内容都写在样式表的顶部，就像这样：
/*How it's written*/
p {font-size: 18px;}
@layer type {
p {
font-weight: bold;
font-size: 20px;
color: red;
}
}
/*How it's rendered*/
p {
font-weight: bold;
font-size: 20px;
color: red;
}
p {font-size: 18px;}咱们还能够通过这样的形式来组织图层的渲染程序：
@layer template, unique;
p {font-size: 18px;}
@layer unique {
p {font-size: 12px;}
}
@layer template {
p {font-size: 20px;}
}这样出现是因为在样式表的顶部，template 在 unique 之前。
p {font-size: 12px;}
p {font-size: 20px;}
p {font-size: 18px;}还能够在样式表中导入特定的图层，就像导入 JS 模块或 Python 库一样：
@import "style.css" layer(template);4. 再见 Transforms
我记得当 transforms 首次推出时，它们真是太棒了。你能够缩放元素、旋转它们、扭曲它们，甚至能够将它们变成 3D 形态。
然而他们总是有一个问题。如果你有这样的 CSS：
div {transform: translate(-50%, -50%) rotate(10deg)
}而后你想要增加一个悬停成果来进行缩放，你就必须再次编写它：
div:where(:hover, :focus) {transform: translate(-50%, -50%) rotate(10deg) scale(1.1)
}这个编码真是让人头疼 😔
谢天谢地，当初咱们有了一个新的抉择。咱们能够齐全摈弃 transforms，并且在没有它们的状况下为咱们的元素增加款式。
div {
translate: -50%, -50%;
rotate: 10deg;
}
div:where(:hover, :focus) {scale: 1.1;}代码来自用户代理
CSS 自定义属性让咱们能够在代码中保留款式并在当前重复使用，就像这样：
:root {--color: red;}
p {var(--color); }
img {border: 2px solid var(--red); }然而，只管这些由咱们程序员定义，还有其余由用户代理定义的款式。咱们能够通过 env() 款式来拜访它们。目前，只有八种这样的款式可用：
/*the safe-area-inset-* styles */
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
/*the titlebar-are-* styles */
env(titlebar-area-x)
env(titlebar-area-y)
env(titlebar-area-width)
env(titlebar-area-height)前四个定义了浏览器窗口顶部、右侧、底部和左侧的填充。这在非方形屏幕上十分不便，比方智能手表或一些手机的屏幕蜿蜒到边缘。你能够间接应用这些 safe-area-inset-*，但它们的值是 0 像素。
这些 titlebar-area-* 款式仅实用于渐进式网络应用程序，并且仅在应用 window-controls-overlay display_override 值时才无效。它们能够用来避免 PWA 笼罩最小化、最大化和敞开按钮。
嗯，我想不出其余状况下用户代理能够与样式表进行通信以确定显示方式的例子。是的，你能够应用 @media (prefers-color-scheme: dark) 查看暗模式，或者你能够强制打印机打印带有背景图像的内容。
@media print {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}但这些与理论从用户代理中获取值并将其放入样式表中不同。只管以后的利用无限，但我能够设想将来的利用可能是获取默认的操作系统字体或通过相似这样的形式获取浏览器的缩放级别。
body {font-size: calc(100% * env(browser-zoom-level)); }目前咱们无奈做到这一点，这对开发人员来说是一个难题。
尽管 env() 的实用案例并不多，但它的确有后劲扭转咱们编写 CSS 的形式，这是咱们应该留神的事件。
你还能想到哪些扭转咱们编写 CSS 的新个性？在评论中通知大家吧！
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。