2022年鲜为人知的CSS 特性了解起来~

前言

随着CSS的不断发展，一些很酷且有用的属性要么完全被忽视，要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性，这些属性你可能听说过，也可能没听说过，但了解之后你会觉得它们是如此的实用。

如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～

:is()和:where()伪选择器

这两个伪选择器在去年获得了更广泛的浏览器支持，并且都是用来处理分组和特异性。

:is()

它是一个匹配伪类，:is()接受选择器列表作为它的参数来尝试匹配

:is()选择器列表的几个独特行为：

  • 如果列出的选择器无效，规则将继续匹配有效的选择器。鉴于:is(-ua-invalid, article, p)规则将匹配article和p。
  • 计算出的特异性将等于传递的具有最高特异性的选择器的特异性。例如，:is(#id, p)将具有#id— 1.0.0 — 的特异性，而:is(p, a)将具有 0.0.1 的特异性。

CSS 中的伪选择:is()器让你可以更简洁地编写复合选择器。

例子：

我们或许看过这样的CSS，为大量元素赋予同一段CSS样式

section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #BADA55;
}

使用:is()写法后看起来就简洁了许多

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

兼容性

css-is-1.png

:where()

这个伪类除了它总是具有零特异性这一特点外，其余跟:is()基本相同。它同样是接受选择器列表来作为它尝试匹配的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

例子：

当header、main、footer中的p标签被hover时，给它添加如下样式，我们可能会这么写：

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

我们也可以用:where()来实现：

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

这样看起来就比上面简洁了许多。

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

我们可以使用:is和:where将多个选择器组合成一个表达式。使用:where，我们可以使用复杂的选择器设置安全的默认样式，这些选择器可以很容易地用简单的实用程序类覆盖，而无需增加特异性。

兼容性

css-where-1.png

currentColor

通常被称为“第一个 CSS 变量”，currentColor是一个等于元素color属性的值。它可用于将等于属性值的color给任何接受颜色值的 CSS 属性。它强制 CSS 属性继承该color属性的值。

这个值对于避免将相同的值分配给多个 CSS 属性非常有用，这些属性在同一选择器中接受颜色，例如border-color, background,box-shadow等。

例子：

如果我们需要将每个段落的文字颜色、边框、阴影做到统一，我们或许会这么写：

.green {
  color: darkgreen;
  border-left: 5px solid darkgreen;
  box-shadow: 5px 5px 10px darkgreen;
}

.brown {
  color: darkgoldenrod;
  border-left: 5px solid darkgoldenrod;
  box-shadow: 5px 5px 10px darkgoldenrod;
}

.red {
  color: darkred;
  border-left: 5px solid darkred;
  box-shadow: 5px 5px 10px darkred;
}

但有了currentColor我们便可以这么写

.box {
  border-left: 5px solid currentColor;
  box-shadow: 5px 5px 10px currentColor;
}
.green {
  color: darkgreen;
}
.brown {
  color: darkgoldenrod;
}
.red {
  color: darkred;
}

css-current-1.png

兼容性

css-current-2.png

自定义属性备用值

自定义属性通过允许开发人员在其样式表中创建可重用的值而无需像 SASS 这样的 CSS 预处理器，从而显着改进了 CSS。自定义属性立即被采用并在今天被广泛使用并产生了巨大的影响，尤其是在主题化和与 JavaScript 的交互方面。但很多人可能都忽略了var函数的第二个参数，它作为一个备用选项，在自定义属性无效时应用。

定义变量 --

  • 以-- 开头，大小写敏感
  • 变量的定义必须有作用域，不能在外部直接定义，这点与scss和less不同
:root {
	--myColor: blue;
  --color-default: black;
}

使用变量 var(variable_name, def_value)

var的第一个参数为变量名，第二个参数为变量找不到时的备用值

div {
	background-color: var(--myColor, 'red');
}

我们还可以设置另外一个变量作为备用值

color: var(--myColor, var(--color-default));

交互媒体查询

在创建响应式网站时，我们通常会根据屏幕尺寸对输入机制做出假设。我们假设屏幕尺寸1920px属于台式电脑或笔记本电脑，并且用户使用鼠标和键盘与网站进行交互，但是带有触摸屏或智能电视屏幕的笔记本电脑呢？

这就是交互媒体功能的用武之地，它允许我们根据主要的输入机制——触摸、手写笔、鼠标，微调用户可以与之交互的组件的可用性（输入、画布外菜单、下拉菜单、模式等）指针等。

@media (pointer: fine) {
  /* 使用鼠标或手写笔 */
}
@media (pointer: coarse) {
  /* 触摸 */
}
@media (hover: hover) {
  /* 可以hover */
}
@media (hover: none) {
  /* 不能hover */
}

scroll-padding

在实现固定头部时，页面锚点滚动链接导致固定页眉覆盖部分内容。在之前我们必须使用 JavaScript 来解决这个问题并实现自定义滚动逻辑以考虑固定的标题偏移量。如果标头高度在断点处发生变化，事情只会变得更加复杂，幸运的是，我们不必再为此依赖 JavaScript。我们可以scroll-padding-top使用标准 CSS 媒体查询指定和更改它的值。

html {
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

我们也可以设置其他方向或使用 普通的 scroll-padding。

scroll-padding: /* ... */;

scroll-padding-top: /* ... */;
scroll-padding-right: /* ... */;
scroll-padding-bottom: /* ... */;
scroll-padding-left: /* ... */;

兼容性

css-scroll-1.png

字体渲染选项

相信大家都做过一些倒计时场景，这里我们会发现如果纯文本渲染时，会出现一种奇怪的现象 —- 数字诡异跳动。造成这个现象的主要原因是每个数字的渲染宽度其实并不一样。

css-font-1.gif

比如这个，数字在变化的过程中，整个文本也在跟随左右跳动，这里我们可能会为每一个数字包一层盒子，然后将盒子的宽固定，再让数字剧中就可以避免这种情况了，但这样很麻烦。今天给大家介绍一种纯CSS的解决方案，只需要一行CSS！

font-variant-numeric: tabular-nums

tabular-nums通过为所有数字字符设置相同的宽度来解决上述问题。

我们再来对比看一下：

css-font-2.gif

兼容性

css-font-3.png

喜欢的同学欢迎点个赞呀～ 原文首发地址点这里，欢迎大家关注公众号 「前端南玖」，如果你想进前端交流群一起学习，请点这里

我是南玖，我们下期见！！！

Tags:

VirMach 便宜 VPS

QNews

QNews