嘿，亲爱的前端老司机和萌新朋友们，虽然官方从未正式冠名CSS4，但在我们心里，那些新鲜的CSS规范和模块就是它，版本号无所谓，关键是它让我们撸代码更丝滑。
今天不说枯燥的理论知识，直接分享几个CSS4的骚操作小技巧，助你代码开挂，UI飞升！让你在下次代码审查中，成为那位神秘的前端大佬！
1.::part() 让组件更加灵活
如果你在开发Web组件（Web Components），::part() 让你能直接控制组件的部分元素。它能改变一个封装元素内部的某些样式，酷吧？
my-button::part(button) {
background-color: red;
}
2.@supports 语句增强
@supports语句可以判断浏览器是否支持某个CSS特性。CSS4在此基础上新增了“多个条件”的写法，可以用and和not来组合多个条件判断。
@supports (display: grid) and (width: 100px) {
/* 支持grid布局且宽度为100px的样式 */
}
@supports not (display: grid) {
/* 不支持grid布局样式 */
.container {
float: left;
}
}3.@layer 控制CSS层级
@layer是CSS4引入的新特性，可以让你组织和控制CSS规则的层级顺序，比传统的样式表引入顺序更灵活。
@layer reset {
/* 重置样式 */
}
@layer default {
/* 默认样式 */
}
4.display: grid 的更强大功能
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，这个可以让你创建一个响应式网格系统，列的宽度会根据可用空间自动调整，不需要你手动写断点。
5.::slotted() 让插槽更加酷
在Web组件中，::slotted()可以让你为插槽中的内容单独设置样式。给Web组件增添了一丝灵动。
::slotted(p) {
color: red;
}
6.::before和::after 的内容自动适配
CSS4让::before和::after伪元素的内容更加灵活，你可以直接使用content属性来引入数据，甚至可以通过attr()引入HTML属性值。
.box::before {
content: attr(data-content);
}
7.place-items 更加简洁的Grid对齐方式
place-items是align-items和justify-items的简写，使用它可以一行代码解决纵向和横向的对齐问题。
.grid {
display: grid;
place-items: center;
}
8.object-fit 和 object-position 更强大的图像控制
object-fit 和 object-position 在处理图像时非常强大，可以让你像背景图一样控制图像的显示方式，不再需要使用background-image。
img {
object-fit: cover;
object-position: center;
}
9.:is() 优化复杂选择器
:is() 让复杂的选择器简洁清晰，减少了重复的代码。例如，你可以通过:is()同时应用多个规则。
:is(h1, h2, h3) {
color: red;
}
10.scroll-snap-type 让页面滚动更顺滑
想要页面滚动更“聪明”一点？scroll-snap-type帮助你设置滚动的对齐方式，达到非常流畅的滚动体验。
.scroll-container {
scroll-snap-type: y mandatory;
}
11.accent-color 让表单控件自定义颜色
accent-color让你定制表单控件的颜色，哪怕是浏览器默认的“勾选框”，也可以变得时尚起来。
input[type="checkbox"] {
accent-color: blue;
}
12.min(), max() 和 clamp() 动态尺寸控制
CSS4提供了这些强大的函数，可以让你根据环境动态计算值，从而实现更加灵活的响应式布局。
.box {
width: min(100%, 500px);
}
13.position: sticky 的更强表现
position: sticky 让你可以轻松实现粘性元素，避免了JS来控制滚动监听。它简直是懒人必备的功能。
.sticky-header {
position: sticky;
top: 0;
}
14.writing-mode 让文字排版更加自由
CSS4增强了writing-mode，现在可以非常轻松地实现竖排文字了，再也不需要JavaScript来搞定了。
.vertical-text {
writing-mode: vertical-rl;
}
15.backdrop-filter 打造炫酷背景模糊效果
backdrop-filter可以实现背景模糊等效果，这种效果曾经是通过JavaScript实现的，但CSS4已经帮你解决了。
.blurred-background {
backdrop-filter: blur(5px);
}
16.contain 提高页面性能
想让页面元素独立渲染，不影响其他部分？试试 contain。它告诉浏览器这个元素可以独立运作，不需要考虑它对其他元素的影响。
.element {
contain: layout style;
}
17.:where() 优化选择器性能
:where()选择器是:is()的“懒兄弟”，它的优点是不会影响优先级（权重永远是零），性能更好。
:where(h1, h2, h3) {
color: green;
}
18.grid的新写法：grid-template-rows
grid-template-rows 允许你直接使用minmax()设置每行的大小，适应更多布局需求。
.grid {
display: grid;
grid-template-rows: minmax(100px, auto) minmax(150px, 1fr);
}
19.overflow-anchor 让滚动更自然
使用overflow-anchor，你可以控制元素的滚动锚点位置，使得动态内容加载时页面滚动更加自然。
.content {
overflow-anchor: none;
}
20.:focus-visible 让焦点状态更加灵活
:focus-visible使得浏览器仅在键盘导航时显示焦点样式，从而提升无障碍性同时不影响鼠标用户。
:focus-visible {
outline: 2px solid blue;
}
21.aspect-ratio 保持元素比例
aspect-ratio可以让你轻松保持图片或者视频的固定比例，而不用用JavaScript来搞定了。
img {
aspect-ratio: 16/9;
}
22.:empty 对空元素的选择
:empty伪类允许你选择没有任何内容的元素，这对于清理空白元素非常有用。
div:empty {
display: none;
}
23.grid-auto-columns 和 grid-auto-rows 更灵活的网格布局
如果你想自动控制grid中的列或行的大小，grid-auto-columns和grid-auto-rows会派上大用场。
.grid {
grid-auto-columns: 1fr;
grid-auto-rows: minmax(100px, auto);
}
24.@media查询优化
在CSS4中，prefers-color-scheme来根据用户系统的主题色切换样式。
@media (prefers-color-scheme: dark) {
body {
background-color: black;
}
}
CSS4 prefers-reduced-motion: reduce 给用户带来更多的贴心功能了！你可以根据用户是否启用了减少动画的设置来控制你的动画效果，你可以说这简直是对那些晕动画的用户的专属关爱。
@media (prefers-reduced-motion: reduce) {
* {
animation: none;
}
}
25.font-feature-settings 打开高级字体功能
font-feature-settings可以让你启用字体的高级特性，比如OpenType的连字、斜体等，进一步提升页面的美观。
.text {
font-feature-settings: "liga" 1;
}
26.filter效果加持
CSS4中的filter能给图片、元素添加各种炫酷的视觉效果。你可以像玩魔法一样调节元素的对比度、模糊、亮度等。
img {
filter: blur(3px) brightness(0.7);
}
27.box-sizing 让布局更简单
box-sizing: border-box是前端开发中不可或缺的一部分，它让你不再为padding和border的计算而烦恼。
* {
box-sizing: border-box;
}
28.text-align-last 实现最后一行的对齐
你可以使用text-align-last来设置文本的最后一行如何对齐，特别适合需要排版的地方。
p {
text-align-last: center;
}
29.transition的cubic-bezier()控制动画
如果你想精确控制过渡动画的曲线，cubic-bezier()允许你自定义动画的加速和减速，达到完美的动画效果。
.button {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
30.env()：环境变量的魔法门
env() 是 CSS 和设备之间的桥梁。它可以读取设备环境变量，比如安全区域。苹果的刘海屏用户再也不会觉得你的网站“掉了角”。这是贴心开发者的秘密武器，用了它，你能假装是苹果设计师的远房亲戚
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
31.@property：自定义属性的贴心管家
CSS 自定义属性（变量）已经够酷了，但 CSS4 再次升级，给它配了个保姆：@property。你可以定义属性的类型、默认值，还能设置是否可以动画！来，瞧瞧这个宝贝。
@property --main-color {
syntax: '';
initial-value: #ff6600;
inherits: true;
}
.box {
color: var(--main-color);
transition: color 0.5s ease;
} 32.@import的未来，@use 的革命
虽然大家都知道 @import，但现在 CSS4 提出了 @use，它比 @import 更高效，也能避免加载多次。让你对 CSS 模块化的理解更上一层楼！
@use 'base.css';33.logical properties 让布局更智能
padding-left 和 padding-right？早就过时了！用 padding-inline-start 和 padding-inline-end，可以让你轻松支持从左到右、从右到左的多语言布局。
div {
padding-inline-start: 10px;
padding-inline-end: 20px;
}
34.mix-blend-mode，让颜色也能融合起来
如果你觉得网页太单调，那就试试 mix-blend-mode，让颜色和背景实现一些神奇的融合效果，搞得像是艺术品一样。
h1 {
mix-blend-mode: multiply;
}35.scroll-timeline——滚动触发动画的神器
要用滚动驱动动画？scroll-timeline闪亮登场！滚动页面时，动画同步触发，交互效果瞬间高大上。设计师和PM看到估计会直接给你升职加薪！
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.element {
animation: slide-in 1s linear;
scroll-timeline-name: slide-in;
scroll-timeline-axis: block;
}如果你也有想补充的小技巧，评论区摆摊，我们一起拍桌子~