CSS 新特性总结

2023-10-29

CSS 伪类选择器

:is() 和 :where()

:is() 将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素，其优先级是由它的选择器列表中优先级最高的选择器决定的，列表值中不能使用伪元素。

:where()将会选择所有能被该选择器列表中任何一条规则选中的元素，其优先级为 0。

:not() 和 :has()

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。

:has() 至少匹配一个满足参数选择器的元素，而且能匹配父元素。在当前规范中，并未列为实时选择器配置的一部分，意味着其不能用于样式表中，只能用于如 document.querySelector() 的函数中。

:empty 和 :blank

:empty 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

:blank 选择用户输入为空的输入框。:blank 选择器被认为尚有一定风险，正在持续改进它。

:focus-visible 和 :focus-within

:focus 当用户使用鼠标点击焦点元素或使用键盘的 Tab 键（或快捷键）触发焦点元素焦点环的样式。

:focus-visible ：只有使用键盘的 Tab 键（或快捷键）触发焦点元素焦点环的样式。如果仅使用 :focus-visible 设置焦点环样式的话，那么用户使用鼠标点击焦点元素时不会触发焦点环样式。

:focus-within：表示一个元素获得焦点，或该元素的后代元素获得焦点。这也意味着，它或它的后代获得焦点，都可以触发 :focus-within。

CSS 颜色

rgb()、rgba() 、hsl() 和 hsla() ，以往用逗号（,）作为分割符，现在可以直接使用空格做分割符，并且rgb() 和 hsl() 函数在第三个值和第四个值之间加上 / 可以取替 rgba() 和 hsla() ：

另外，十六进制描述颜色，也可以在原本的语法规则中最后两位添加新的位值来描述透度明。比如 #rrggbbaa 或 #rgba。

可以在color() 函数中指定颜色空间，不同颜色空间，色彩度不一样。使用了color() 函数指定颜色空间除了要考虑该函数支持度（浏览器的兼容性）还需要考虑硬件设备对颜色空间的支持度。

在 CSS 中可以借助媒体查询 @media 来做相应的判断。

CSS 蒙层和剪切

蒙层和剪切对应的 CSS 属性就是 mask 和 clip-path ，其中 mask 是一个简写属性。

mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

clip-path 使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

clip-path 、float 和 CSS 的 Shapes 结合可以实现一些不规则的图文混排的布局效果。

CSS 混合模式

目前主要有 mix-blend-mode 和 background-blend-mode 两个属性。前者是用于多个元素的合成，后者是用于多个背景的合成。

CSS 自定义属性

CSS 自定义属性又被称为 CSS 变量。在 CSS 中注册自定义属性时是使用 -- 来注册的，可以给已注册的自定义属性赋值，包括空字符串。

var() 函数有两个参数，第一个参数就是自定义属性，第二个参数是备用值。当第一个参数是个无效值时，会采用第二个参数。无效变量是指当一个自定义属性的值是 initial 时。

--invalid: initial; // 无效变量
--valid: ;			// 有效变量

上述效果代码：

<div class="element">
  <i>Element</i>
</div>

<i>Element</i>

<style>
  .element {
  	--color: red;  // 只作用于 .element 元素及其后代元素
  }

  i {
  	--foo: initial;                         // 无效变量
  	--color: var(--foo);					// 无效变量
  	background-color: var(--color, orange); // --color是无效变量，采用备用值 orange
  }
</style>

color 属性相当于设置了 color: ; 值，客户端在计算该值时将被忽略，因此会继承其祖先元素的 color 值，该例继承了 body 元素的 color 值 black 。

<section>Element</section>

<style>
  :root {
    --initial: initial; // 无效变量
    --valid: ;			// 有效变量
  }
  section {
  	background-color: var(--initial, red); // 无效变量，会采用备用值 red
    color: var(--valid, red);			   //	有效变量，备用值被忽略
  }
</style>

借助无效变量和有效变量，可以实现多种换肤效果：

label {
  --box-shadow: var(--ON);
  --box-shadow-active: var(--OFF);
  box-shadow: 0 0 0 3px var(--box-shadow, rgba(0, 0, 0, 0.05))
    var(--box-shadow-active, #2196f3);
  cursor: pointer;
}

label.dark {
  background-color: var(--dark-bgcolor);
}

label.light {
  background-color: var(--light-bgcolor);
}

label.blue {
  background-color: var(--blue-bgcolor);
}

#dark:checked ~ div .dark,
#light:checked ~ div .light,
#blue:checked ~ div .blue {
  --box-shadow: var(--OFF);
  --box-shadow-active: var(--ON);
}

.nav {
  color: var(--light, var(--light-color)) var(--dark, var(--dark-color))
    var(--blue, var(--blue-color));
  background-color: var(--light, var(--light-bgcolor))
    var(--dark, var(--dark-bgcolor)) var(--blue, var(--blue-bgcolor));
}

a.active,
a:hover {
  background-color: var(--light, var(--light-active-bgcolor))
    var(--dark, var(--dark-active-bgcolor))
    var(--blue, var(--blue-active-bgcolor));
}

/* 设置切换开关 */
:root {
  --ON: initial; // 无效变量,相当于开启 var()的备用值
  --OFF: ; // 有效变量,相当于关闭 var()的备用值

  /* Dark */
  --dark-color: rgba(156, 163, 175, 1);
  --dark-bgcolor: rgba(17, 24, 39, 1);
  --dark-active-bgcolor: rgba(55, 65, 81, 1);

  /* Light */
  --light-color: rgba(55, 65, 81, 1);
  --light-bgcolor: rgba(243, 244, 246, 1);
  --light-active-bgcolor: rgba(209, 213, 219, 1);

  /* Blue */
  --blue-color: rgba(165, 180, 252, 1);
  --blue-bgcolor: rgba(49, 46, 129, 1);
  --blue-active-bgcolor: rgba(67, 56, 202, 1);
}

#dark:checked ~ .nav {
  --light: var(--OFF);
  --dark: var(--ON);
  --blue: var(--OFF);
}

/* 默认为Light */
#light:checked ~ .nav {
  --light: var(--ON);
  --dark: var(--OFF);
  --blue: var(--OFF);
}

#blue:checked ~ .nav {
  --light: var(--OFF);
  --dark: var(--OFF);
  --blue: var(--ON);
}

CSS 等比缩放

指的是 “容器高度按比例根据宽度改变”，很多时候也称为宽高比或纵宽比。使用 aspect-ratio 直接设置：

.container {
	width: 100%;
  aspect-ratio: 16 / 9;
}

CSS 滚动捕捉

在 Web 布局中，时常会碰到内容溢出容器的现状，如果 overflow 设置为 auto 或 scroll 时容器会出现水平或垂直滚动条：

比如，实现每次滚动时，图片的中心位置和容器中心位置对齐：

.container {
  scroll-behavior: smooth;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
}

img {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

scroll-behavior接受两个值：

auto ：滚动框立即滚动
smooth ：滚动框通过一个用户代理定义的时间段使用定义的时间函数来实现平稳的滚动，用户代理平台应遵循约定，如果有的话。

CSS 媒体查询

CSS 媒体查询 @media 又称为 CSS 条件查询。新的媒体查询特性可以查询到用户在设备上的喜好设置：

prefers-reduced-motion
prefers-contrast
prefers-reduced-transparency
prefers-color-scheme
inverted-colors

比如 prefers-color-scheme 实现暗黑模式的皮肤切换效果：

:root {
  /* Light theme */
  --c-text: #333;
  --c-background: #fff;
}

body {
  color: var(--c-text);
  background-color: var(--c-background);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme */
    --c-text: #fff;
    --c-background: #333;
  } 
}

又比如，根据网格数据设置来控制资源的加载：

@media (prefers-reduced-data: reduce) {
  header {
    background-image: url(/grunge.avif);
  }
}

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Radness';
    src: url(megafile.woff2);
  }
}

CSS 比较函数

min() 和 max()

min() 函数会从多个参数（或表达式）中返回一个最小值作为CSS属性的值，即使用 min() 设置最小值，等同于 min-width。

max() 函数会从多个参数（或表达式）中返回一个最大值作为CSS属性的值，即使用max()设置最大值，等同于 max-width。

clamp()

clamp(MIN, VAL, MAX)，返回一个值，即在定义的最小值和最大值之间的数值范围内的一个中间值。该函数接受三个参数：

最小值（MIN），VAL 小于 MIN 时返回；
中间值（VAL），一般是一个相对值，也称首选值，默认作为函数返回值返回；
最大值（MAX），VAL 大于 MAX 时作为函数返回值返回。

CSS 内容可见性

指 content-visibilit 和 contain-intrinsic-size 两个属性，主要功能是可以用来提高页面的渲染性能。

大多时候可以使用CSS的 content-visibility 来跳过屏幕外的内容渲染。

而 contain-intrinsic-size 属性控制由 content-visibility 指定的元素的自然尺寸。它的意思是，content-visibility 会将元素的高度（height）视为 0，浏览器在渲染之前会将这个元素的高度变为 0，从而使我们的页面高度和滚动变得混乱。但如果已经为元素或其子元素显式设置了高度，那这种行为就会被覆盖。如果你的元素中没显式设置高度，并且因为显式设置 height可能会带来一定的副作用而没设置，那么我们可以使用 contain-intrinsic-size 来确保元素的正确渲染，同时也保留延迟渲染的好处。 contain-intrinsic-size 和 content-visibility一般是同时设置：

section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

CSS 内在尺寸

<img> 的 src 路径上浮出来的图片底下有一行对图像的尺寸的描述，其实现这表述图片尺寸中两个重要信息：

外在尺寸： 252 x 158 px ，开发者给 img 设置的尺寸；
内在尺寸： 800 x 533 px ，图片原始尺寸。

其实在 CSS 中给一个元素框设置大小时，有的是根据元素框内在的内容来决定，有的是根据上下文来决定的。根据该特性，CSS的尺寸也分为内部(内在)尺寸和外部（外在）尺寸。

内部尺寸：指的是元素根据自身的内容（包括其后代元素）决定大小，而不需要考虑其上下文；而其中 min-content 、 max-content 和 fit-content 能根据元素内容来决定元素大小，因此它们统称为内部尺寸。
外部尺寸：指的是元素不会考虑自身的内容，而是根据上下文来决定大小。最为典型的案例，就是 width 、min-width 、max-width 等属性使用了 % 单位的值。

简单地说，fit-content 相当于 min-content 和 max-content，其取值:

如果元素的可用空间(Available)充足，fit-content 将使用 max-content
如果元素的可用空间(Available)不够充足，比 max-content 小点，那就是用可用空间的值，不会导致内容溢出
如果元素的可用空间(Available)很小，比 min-content还小，那就使用 min-content。

其他 CSS 知识点

margin 左右负边距的负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似。

input 的默认宽度取决于内联属性 size 值。

position = “absolute” | ‘fixed’时，同时设置 left 和 right 等同于隐式地设置宽度，同时设置 top 和 bottom 则等同于隐式地设置高度。

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中：

animation-direction = “alternate”，可以使得动画去回交替进行。animation-play-state = "pasued"，可以使得动画暂停。

fliter = blur()，可以使得背景高斯模糊（背景虚化）。

利用 CSS 渐变实现进度条：

使用 transform + transition 可以实现旋转元素的效果：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

css