css的一些你不知道的功能，提升开发效率
1.1、自定义属性/变量
背景：在构建一个主题时，你会选择一个配色方案，然后每次都要声明这些颜色。
a{
color:#cd2653;
}
.social-icons a{
background:#cd2653;
}
.wp-block-button.is-style-outline{
color:#cd2653;
}
这种方法的问题是，如果你想对其中一种颜色进行更改，你必须更改它的每一个实例。虽然代码编辑器可以通过搜索和替换轻松做到这一点，但这仍然很烦人，特别是当你只是想做一个快速的测试，而又要把所有的东西反过来的时候。
css有更好的解决方案
自定义属性可以解决这个问题。在它们的帮助下，你可以将有关颜色指定给一个变量一次，然后每次使用时只需将该变量作为css属性输入即可，就像这样：
:root{
--global--color-primary:#28303d;
}
a{
color:var(--global--color-primary);
}
.social-icons a{
background:var(--global--color-primary);
}
这样，当您要进行更改时，只需要在一个地方进行更改即可。过去，你需要采用SASS这样的预处理程序来使用变量，现在它是CSS的一个原生功能。
在文档开头的:root选择器下定义你的变量（注意双连字符--在变量面前，这就是将它们定义为自定义属性的原因，而且它们是区分大小写的！）。之后，通过var()函数在整个文档中使用它们。
如果你想改变一个变量，只需改变:root下的声明就可以了。
1.2、@supports
使用@supports为更现代的浏览器添加额外的功能或样式，以便处理它们（”功能查询“）
如何使用功能查询？
//如果浏览器支持CSS grid，它应该将 dispaly:grid 应用到带有.site-content 类的元素上。
@supports (display:grid) {
.site-content {
display:grid;
}
}
简单的规则，后面的括号里是你要检查的属性或属性值对。之后就是通常的css声明，如果满足条件，要应用什么规则。
1.3、Flexbox Gaps
使用gap，row-gap，colum-gap在使用Grid，Flexbbox和Multi-Column Layouts创建的布局中创建空间。
这是一个简短的实例，说明在flexbox中的外观：
.flex-gap-test{
display:inline-flex;
flex-wrap:wrap;
gap:16px;
}
<div class="flex-gap-test">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
1.4、content-visibility：新css功能，提高网站性能
它的工作原理基本上就像懒惰加载一样，只是不针对图片，而是针对任何HTML元素。可以用它来阻止网站的任何加载，直到其可见为止。
使用也超级简单，只需将其应用到你所选择的元素上
.content-below-fold{
content-visibility:auto;
}
content-visibility有三个值，默认情况下，它被设置为可见，在这种情况下，元素会像往常一样加载。也可以将其设置为hidden，在这种情况下，无论元素是否可见，都不会被渲染。另一方面，当设置为auto时，可见区域外的元素将被跳过，一旦出现在屏幕上，就会被渲染。
由于设置content-visibility:hidden;的元素实际上为零，这让你可以为隐藏的元素应用一个理论上的高度和宽度，以便浏览器可以从一开始就考虑到它，而不是在元素渲染时才考虑
。这样，可以避免在滚动过程中布局突然改变。
1.5、Transitions,Transforms,Animations
1.5.1、CSS过渡
//当有人悬停在元素上时，上面的标记将使div高度增加，速度减慢到3秒
div{
width:100px;
height:100px;
transition:height 3s;
}
div:hover{
height:500px;
}
1.5.2、CSS转换
div:hover{
transform:rotate(30deg);
}
1.5.3、CSS动画
@keyframes color-change{
from{
background-color:blue;}
to{
background-color:yellow;}
}
div:hover{
animation-name:color-change;
animation-duration:3s;
}
注意使用@keyframes命名动画并定义其功能，然后使用animation-name将其应用与元素。animation-duration控制完成的时间。
1.6、滚动捕捉
scroll snapping 让你可以选择将用户的视口锁定在你网站的某个部分或元素上。它对创建酷炫的过度非常有用，并帮助用户在向下滚动页面时关注最重要的页面元素。
.container{
scroll-snap-type:y mandatory;
}
.container div{
scroll-snap-align:start;
}
1.7、:is和:where伪类：允许你通过缩短css选择器的列表来减少CSS标记的重复
例如，比较一下：
.main a:hover,
.sidebar a:hover,
.site-footer a:hover{
...
}
对比：
:is(.main,.sidebar,.site-footer) a:hover{
...
}
相同的东西适用于:where：
:where(.main,.sidebar,.site-footer) a:hover{
...
}
如果标记是一样的，有什么区别呢？不同的是:is更具体。它取括号中最特殊的元素的特殊性成都。相比之下，:where的特异性永远是零。因此，再往下覆盖就容易多了。
浏览器的应用还有点不稳定，但慢慢就会有了。所以，请随意开始尝试。
1.8、res简化写法
res && res.data && res.data.data 可以写成 res?.data?.data