2023年你应该需要知道的CSS新特性-选择器和AT规则篇

Hi~，我是 一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~

🍎 写在前面

前一段时间State of CSS发起了2022年的调查问卷，该文件的内容主要是CSS新特性、框架、工具库的使用情况，这里我将会用几篇文章整理一下这个问卷中涉及到的新特性。

这篇文章将介绍如下内容：

• :focus-visible伪类选择器
• ::marker伪元素选择器
• :has()伪类选择器
• :where()和:is()伪类
• @supports特征查询
• @layer规则
• 媒体查询中新增五个的媒体特征

• 2022年你应该需要知道的CSS新特性-交互篇
• 2022年你应该需要知道的CSS新特性-选择器和@规则篇

🍍 :focus-visible伪类选择器

CSS中的:focus-visible选择器可以简单理解为使用键盘聚焦元素时生效，这与:focus不同，:focus是元素的聚焦状态，但是并不能区分是鼠标点击还是通过tab键使元素获取焦点。

:focus-visible的示例如下：

代码片段

我们可以通过【Tab】键和鼠标来查看聚焦的效果。

上面的核心代码如下：

.focus:focus {
  outline: 2px solid lightcoral;
}

.focus-visible:focus-visible {
  outline: 4px dashed lightgreen;
}

该选择器的浏览器兼容性如下：

🥭 ::marker伪元素

CSS中::marker伪元素选择器可以用来匹配任意设置了display:list-item的元素或伪元素，例如<li>，可以通过content为元素来修改项目符号的颜色，大小以及内容；

示例代码如下：

代码片段

核心代码如下：

ul li::marker {
  /* 设置颜色 */
  color: lightcoral;
}

ul li:nth-child(2)::marker {
  /* 设置大小 */
  font-size: 2.5rem;
}

还有一点需要注意的是该元素目前支持的CSS属性数量有限，目前已经支持的有：

• 所有的字体属性
• color属性
• text-combine-upright、unicode-bidi和direction属性
• content属性
• 所有动画和过渡相关的CSS属性，也就是animation和transition属性

浏览器兼容性如下：

🍎:has()伪类选择器

CSS中的:has()伪类选择器比较有意思，如果某元素匹配()中的选择器，则该样式就会匹配该元素；如果这么说还不明白的话，可以看一下下面的例子：

• 匹配直接包含<img>元素的<a>元素：

a:has(> img) {
  display: block;
}

• 匹配其后紧跟着<p>元素的<h1>元素：

h1:has(+ p) {}

不过这个伪类的浏览器兼容性并不是很好，如下：

🍏 :where()伪类选择器

:where()伪类的作用是简化复杂且重复选择器的书写，直接看下面的代码：

/* 原始写法 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}


/* 使用 :where() 选择器 */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

在CSS中的选择器中还存在一个:is()伪类选择器，它与:where()的作用是一样的，不同的是:is()的优先级是由它的选择器列表中优先级最高的选择器决定的；而:where()的优先级始为0。

浏览器兼容性如下：

🍐 特征查询

特征查询指的是CSS中@supports，它是一个AT规则，用于检测浏览器是否支持某些特性或者某些选择器：示例代码如下：

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

上面这段代码的意思是如果当前浏览器支持grid布局就采用grid方案，如果不支持，则采用浮动布局。

这里就简单介绍一下特征查询，想要了解更多内容可以去MDN。

🍑 @layer

CSS中的@layer可以创建一个级联层，在同一层同将CSS属性绑定到一起，这些属性的优先级也是在最底部的，如果不理解看后面的例子就能一目了然了。

在CSS中定义@layer有下面几种方式：

1. 普通写法：

@layer utilities {
  .padding-sm { padding: .5rem; }
  .padding-lg { padding: .8rem; }
}

1. 匿名写法：

@layer {
  .padding-sm { padding: .5rem; }
  .padding-lg { padding: .8rem; }
}

1. 多个命名层也可以被同时定义：

@layer theme, layout, utilities {}
/* 如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层 */

1. 通过@import引入一个CSS文件：

@import(utilities.css) layer(utilities);

1. 通过link标签：

<!-- style.css的样式属于名为 lib 的级联层 -->
<link rel="stylesheet" href="zxx-lib.css" layer="lib">

<!-- 样式引入到一个匿名级联层中 -->
<link rel="stylesheet" href="style.css" layer>

除此之外，级联层还支持嵌套，不过需要注意的是，嵌套的内的优先级是小于外层的，示例如下：

@layer framework {
  @layer layout {

  }
}

向layout层内部的framework层附加规则，只需用.连接这两层。

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

关于@layer的用法如下所示：

p {
  color: rebeccapurple;
}

@layer ywz {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

使用@layer定义的规则可以很轻松的被覆盖，如下所示：

代码片段

浏览器兼容性如下：

🍈 媒体特征

首先我们介绍一下问卷中涉及到的五个媒体特性：

🍉 prefers-reduced-motion

CSS中的prefers-reduced-motion媒体特征用于检测用户的系统是否被开启了动画减弱功能。

它有两个值一个是no-preference表示用户没有修改系统动画减弱的功能，还有一个就是reduce表示用户已经开启了系统动画减弱功能，我们可以将动画效果最小化，示例如下：

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

🍊 prefers-color-scheme

该媒体特征用于检测用户是否有将系统的主题色设置为亮色或者暗色，它的值有三个：

• no-preference：不知道用户是否启动亮色或者暗色，出现这个的原因可以可能是无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。
• light：用户的系统颜色为亮色
• dark用户的系统为暗色。

示例代码如下：

@media (prefers-color-scheme: dark) {
  body { background:  #333; color: white; }
}

@media (prefers-color-scheme: light) {
  body { background: white; color:  #555; }
}

🍋 prefers-reduced-data

这个媒体特征是用于检测用户是否开启了减少Web资源加载的选项，不过目前没有浏览器支持该特性。

🍌 prefers-contrast和forced-colors

CSS中提供的prefers-contrast媒体特征用于检测用户用户是否要求以更高或者更低的对比度来展示页面；forced-colors用户检测用户是否开启强调颜色。

我个人感觉这两个媒体特征挺鸡肋的，如果想要了解更多可以参考MDN：

• prefers-contrast - CSS: Cascading Style Sheets | MDN (mozilla.org)
• forced-colors - CSS: Cascading Style Sheets | MDN (mozilla.org)

🍓 写在最后

如果对本篇文章对你有所帮助，可以点赞收藏评论支持一下我；如果有所疑问，欢迎私信~