CSS实用功能

CSS实用功能

自定义属性与变量

  在构建主题时，通常会选择一种主题色，并在不同的地方使用相同的颜色。然而，当需要切换到不同的主题色时，手动修改所有相关的颜色会变得非常繁琐。
  CSS 提供了一种解决方案，即自定义属性，这些属性以 – 开头的属性名，例如 --example-name，表示带有值的自定义属性。这些自定义属性可以在整个文档范围内重复使用，并通过 var() 函数进行引用。
  这样，当需要修改主题色时，只需要更新自定义属性的值，而无需逐个修改相关的样式。这种方式极大地简化了主题切换的过程。

a {
    color: #cd2653;
}

.social-icons a {
    background: #cd2653;
}

.wp-block-button.is-style-outline {
    color: #cd2653;
}

  自定义属性就解决了这个问题。在它们的帮助下，我们可以轻松地将刚才所说的配色分配给一个变量，然后每次使用该颜色时，只需将其作为 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 下的声明即可。这样，所有使用该变量的地方都会自动更新为新的值。

@supports

你可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。

如果您熟悉媒体查询，则使用支持检查将非常容易。使用方法如下：

@supports (display: grid) {
    .site-content {
        display: grid;
    }
}

上面的示例指出，如果浏览器支持 CSS 网格功能，则应用 display: grid; 样式到 .site-content 的元素。

同样重要的是要注意 @supports 支持使用运算符 not、and 和 or（也可以结合使用）以创建更具体的规则，例如对不支持该特定功能的浏览器的优雅降级：

@supports not (display: grid) {
    .site-content {
        float: left;
    }
}

为了能够正常使用 @supports 功能，你需要知道哪些浏览器支持它（我知道，这是一种元数据）。好消息是**所有的现代浏览器都支持**。

内容可见性

content-visibility 控制元素是否渲染其内容，像延迟加载一样工作，而且不仅适用于图像，还适用于任何 HTML 元素。可以使用它来实现网站的懒加载，如下所示：

.content-below-fold {
    content-visibility: auto;
}

content-visibility 支持三个值。默认情况下为 visible，此时元素将照常加载。将其设置为 hidden，即无论元素是否可见都不会呈现该元素。设置为 auto 时，则在它们出现在屏幕上时才开始进行渲染。

滚动捕捉

滚动捕捉让我们可以设置在有滚动容器的情形下吸附至吸附点的严格程度，简单的演示。

这种效果在移动设备的应用程序中很明显，但是，通过滚动捕捉，我们也可以将其带到网站上。

在最基本的情况上用法也相对简单。我们只需将滚动捕捉的类型应用于容器并定义其子对象应捕捉到的位置。

.container {
    scroll-snap-type: y mandatory;
}

.container div {
    scroll-snap-align: start;
}

当然还有更多有关它的使用特色。如果你想了解它，CSS Tricks 已经有了一篇很完美的文章了。

: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 {
    /* 样式 */
}

:where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。