最好的新 CSS 功能

The best new CSS features for 2022

自 1996 年引入 CSS 以来，它仍然是 Web 开发堆栈中必不可少的、不断发展的部分。 CSS 不断推出新功能以响应现实世界的实践。多年来，CSS 发生了巨大的变化，以改进其功能和代码。这是您不想错过的七个级联样式表的最新更新和功能。

1. 子网格

如果您从那时起就开始研究 CSS，您一定发现一个反复出现的问题是将嵌套的子网格与父网格对齐。这是因为嵌套网格独立于主网格和彼此独立运行。

子网格 是网格布局模块的一个新的非常有用的功能。这 子网格 功能允许您定义将继承其父布局的子网格。这与将网格显示嵌套在另一个中不同；在这种情况下，子网格定义了自己的尺寸和间隙。和 子网格 , 父布局应用于子网格，但子网格仍可以在必要时覆盖布局的各个方面。

截至撰写本文时， 子网格 仅在 Firefox 71 或更高版本中实现，但它在路线图上 Safari WebKit 、谷歌浏览器和 微软边缘 .子网格将成为一个非常有用的布局功能。

2. 容器查询

在当今世界，在响应式网页设计方面没有任何协商。因此，您的网站必须准备好迎合具有不同屏幕尺寸的不同小工具。

为了实现响应性，需要根据视口的大小调整设计并在视觉元素周围移动。但目前的问题是，很少有元素不会根据对其父容器所做的更改自动调整。 例如 ：即使容器缩小以适合屏幕，照片仍会保持其原始大小。

考虑一下根据不同容器的大小微调布局的强大功能，这些容器在 UI 的嵌套层中表现出来。这是一个相当彻底的变化，可能会引发一波界面创新。

容器查询在 CSS 中还没有完全稳定，但它们很快就会出现。它们将对我们如何看待响应式设计产生重大影响。基本思想是，您不仅可以根据视口和媒体设置断点，还可以根据父容器的大小设置断点。

语法尚未完全定义，但可能类似于：

@容器

 @container (最大宽度: 650px){ ... }

这个特性为 CSS 网格的常见问题提供了一个优雅的解决方案。

3. 强调色

样式化表单是构建网站时最繁琐的任务之一。表单以及许多其他控件都遵循 Web 浏览器的默认样式。如果你想自定义它们的外观，你就必须不遗余力地从头开始编写代码。

一些显示元素尽管被普遍使用，但传统上难以设置样式。例如，复选框和单选按钮通常被替换为自定义小部件，该小部件模仿这些元素的行为，同时隐藏浏览器的实现。新的 CSS 强调色 选项允许您定位这些元素。

例如：您可以将洋红色应用于页面上的所有单选按钮。如下图

** <style>**  
 输入[类型=“收音机”] {  
 强调色：洋红色；  
 }  
 ** </style>** ** <form** 动作="/foo.bar" ** >**  
  ** <p>** 选择您最喜欢的户外探险类型 ** </p>**  
  ** <input** type="radio" id="mountain" name="type" value="mountain" ** >**  
  ** <label** 对于="山" ** >** 山 ** </label><br>**  
  ** <input** type="radio" id="ocean" name="type" value="ocean" ** >**  
  ** <label** 为=“海洋” ** >** 海洋 ** </label><br>**  
  ** <input** type="radio" id="desert" name="type" value="desert" ** >**  
  ** <label** 为=“沙漠” ** >** 沙漠 ** </label>**  
 ** </form>**

4. CSS 逻辑属性

如果您曾经想在左右或底部和顶部设置容器边框，您一定遇到过烦恼。问题是没有办法使用快捷方式属性而不会对您不想更改的边界产生影响。 Margin 和 Padding 也是这种不便的受害者。

由于 CSS 逻辑属性模块，内联和块关键字可用于对项目进行抽象引用。当你想谈论左右时，使用 排队 ;当您想参考顶部和底部时，请使用 堵塞 .

 分区 {  
 边界- **排队** ：10px 虚线海绿；  
 }

inline 和 block 逻辑关键字也可以在各种其他属性中找到，但它们是特别有用的边框快捷方式。

5.滚动快照

CSS 提供的有用的属性集合，用于管理 Web 浏览器的滚动行为。

和 scroll-snap-* 属性 开发人员将获得很少的方法来微调滚动位置在容器上的工作方式，最终用户将获得更流畅、更可控的用户体验。

** <style>**  
 .滚动容器，  
 .滚动区域{  
 最大宽度：850px；  
 高度：300px；  
 字体大小：60px；  
 } .滚动容器{  
 溢出： **汽车** ;  
 滚动快照类型：y 强制；  
 高度：500px；  
 } .滚动区域{  
 滚动对齐：开始；  
 } .滚动容器，  
 .滚动区域{  
 边距：0 **汽车** ;  
 } .滚动区域{  
 显示：弯曲；  
 对齐项目：居中；  
 证明内容：中心；  
 白颜色;  
 } .scroll-area:nth-of-type(1) { 背景： **印度红** ; }  
 .scroll-area:nth-of-type(2) { 背景： **莫卡辛** ; }  
 .scroll-area:nth-of-type(3) { 背景：蓟； }  
 .scroll-area:nth-of-type(4) { 背景：海绿； }  
 ** </style>** ** <div** 类="滚动容器" ** >**  
	** <div** 类=“滚动区域” ** >** 1 ** </div>**  
	** <div** 类=“滚动区域” ** >** 2 ** </div>**  
	** <div** 类=“滚动区域” ** >** 3 ** </div>**  
	** <div** 类=“滚动区域” ** >** 4 ** </div>**  
 ** </div>**

无论您在何处释放滚动动作， 是的 滚动位置自动移动到子元素。这是因为滚动容器有 滚动捕捉类型 属性设置为 是强制性的 ，并且子元素具有 滚动对齐：开始 宣言。

作为旁注，相关的 过度滚动行为 属性允许您定义嵌套滚动容器的行为方式。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/5888/14060100