使用css 定义属性\变量 & @supports查询 & content-visibility提高网站性能 & CSS过渡\转换\动画 & 滚动捕捉 & :is/:where伪类 & res简化写法

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>1div>
	<div>2div>
	<div>3div>
	<div>4div>
	<div>5div>
	<div>6div>
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