关于前端:2023-年了解即将推出的-CSS-功能

引言

原文

Anchor Positioning

CSS 锚点定位是一项实验性的新 CSS 性能，容许你绝对于页面上的另一个元素定位一个元素。这是通过应用 anchor-position 属性来实现的。例如，以下代码会将元素定位到锚元素左侧 10px 处：

.element {anchor-position: my-anchor left 10px;}

CSS 锚点定位是一项弱小的新性能，可用于创立各种交互元素，例如工具提醒、模式和弹出窗口。它使工具提醒更加动静。这是一个小示例，展现了如何锚定定位以创立工具提醒：

<div id="anchor">This is the anchor element</div>  
<div id="tooltip">This is the tooltip</div>

#tooltip {  
position: absolute;  
display: none;  
}  
#anchor:hover #tooltip {display: block;}  
#tooltip {anchor-position: my-anchor top 10px;}

当锚元素悬停在上方时，此代码将创立一个位于锚元素上方 10px 的工具提醒。

Developers.chrome.com 的另一个示例应用锚点定位来跟踪聚焦输出字段的视觉指示器。正如你所看到的，锚点能够解决多个地位和布局。

jcode

未来，咱们将可能绝对于多个锚元素定位一个元素：

.anchor1 {anchor-name: anchor1;}  
.anchor2 {anchor-name: anchor2;}  
.positioned {  
position: absolute;  
top: 0;  
left: 0;  
anchor: anchor1, anchor2;  
}

上面是一个元素的多个处理程序的示例，其中工具提醒通过将其与图表的最大值和最小值相结合来锚定（起源：developers.chrome.com）。

CSS 锚点定位应用场景

• 当用户向下滚动页面时追随用户的元素。
• 当用户单击按钮时开展和折叠的手风琴。
• 依据多个锚点地位调整图像大小
• 显示在页面其余部分的模式对话框。
• 更动静的工具提醒！

CSS Shapes

> CSS Shapes 容许你应用 CSS 轻松创立简单的形态。CSS Shapes 容许在 CSS 中设置几何形态来定义文本流动的区域。包含属性 `shape-outside、shape-margin 和 shape-image-threshold`

shape-outside 属性不久前曾经开发结束。这使你能够创立与页面上特定地位相干的形态。例如，你能够创立一个以页面左上角为核心的圆：

.circle {shape-outside: circle(50px at 10px 10px);  
}

能够创立如三角形、梯形、多边形等。你能够依据须要将其复杂化。

.triangle {shape-outside: triangle(50px, 0, 50px, 100px, 0, 100px);  
}

CSS Shapes 其余新性能：

• shape-inside 可用于创立填充图像或其余内容的形态。
• shape-image 可用于创立响应元素大小的形态。
• shape-overflow 可用于创立被剪切的形态或内容流到形态内部的形态。在上面的示例中，shape-overflow: clip 将容许内容溢出形态，但它将被限度在元素的笔画框内：

滚动捕获(scroll snap)

CSS 滚动捕获模块提供的属性可让您通过定义捕获地位来管制平移和滚动行为。当用户滚动滚动容器内的溢出内容时，内容能够被捕获到位，从而提供分页和滚动定位。

.my-element {  
  scroll-snap-type: mandatory;  
  scroll-snap-points-x: repeat(50px, 100px);  
}

此代码将创立一个元素，该元素在 x 轴上每隔 50 像素捕获一次，在 y 轴上每隔 100 像素捕获一次。

滚动对齐： 新的 scroll-snap-align 属性容许你管制元素在对齐到对齐地位时的对齐形式。例如，你能够应用此属性来确保元素始终与滚动容器的顶部、底部、核心或左 / 右对齐。同样在上面的示例中，你能够看到两个轴都反对滚动捕获。

.container {  
  overflow-x: scroll;  
  overflow-y: scroll;  
  scroll-snap-type: both mandatory; // Support both axes  
  scroll-snap-align: center;  
}

更好地反对触摸设施： 应用触摸手势更容易捕捉到捕获地位。

.container {  
  scroll-snap-type: both mandatory;  
  scroll-snap-touch-snap-points: true;  
}

音频伪类

作为选择器级别 4 更新的一部分，增加了一些代表加载的图像和视频的伪类。

• 当波及到媒体播放时，:playing、:paused 和 :seeking 伪类仿佛十分有用。因为咱们当初能够轻松地设计这些元素的款式，以创立更具交互性和吸引力的用户体验。
• 另一部分解决媒体加载状态，包含 :buffering 和 :stalled。这些类向用户表明，一旦加载问题失去解决，媒体将持续播放。还将增加伪类 :muted 和 :volume-locked。这些伪类是提供视觉反馈、让用户理解状况并应用不同款式的好办法，例如以下示例：

video {opacity: 1;}  
video:buffering {  
  background-color: #ccc;  
  opacity: 0.5;  
}

这些 CSS 伪类十分实用。它们将成为咱们网络开发工具包的贵重补充，使解决媒体元素变得更加容易，并改善咱们网站上的整体用户体验。

以后元素伪类(:current)

:current 伪类很简略；它代表以后正在显示的元素，或该元素的先人。咱们能够应用它来创立响应用户在特定元素中的以后地位的款式。

例如，以下规定可用于突出显示在文档的语音渲染中正在朗诵的段落或锚元素：

:current(p, a) {background: yellow;}

此外，:past 和 :future 伪类还提供了乏味的可能性，示意齐全呈现在 :current 元素之前或之后的元素。:past 伪类示意定义为齐全呈现在 :current 元素之前的任何元素。然而，:future 伪类代表前面的元素。

CSS Grid

CSS 子网格是 CSS 网格布局的一项性能，容许你在单个网格容器中创立嵌套网格，并且还有新性能行将推出！以下是如何创立子网格的示例：

.my-grid {  
  display: grid;  
  grid-template-columns: repeat(2, 1fr);  
}  
.my-subgrid {  
  display: grid;  
  grid-template-columns: repeat(2, 50px);  
}  
.my-grid > .my-subgrid {grid-column: 1 / 2;}

Grid Container  
   Column 1  
       Subgrid  
         Row 1  
         Row 2  
   Column 2

子网格嵌套在网格容器内。子网格有本人的网格布局，它独立于网格容器的网格布局。

grid lines

子网格的一个新性能称为网格线。你将可能命名网格上的网格线，而后依据这些名称而不是行号来定位我的项目，例如本例中：

.grid {  
  display: grid;  
  grid-template\-names: a b c;  
}  
.grid .item.a {grid-column: a;}  
.grid .item.b {grid-column: b;}  
.grid .item.c {grid-column: c;}

另一种是子网格的子网格对齐，以将 网格与父网格对齐：

.grid {  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  grid-template-rows: 1fr 1fr 1fr;  
}  
.grid .item {  
  background-color: #ccc;  
  border: 1px solid black;  
}  
.grid .item > .child-grid {  
  grid-template-columns: 1fr 1fr;  
  grid-template-rows: 1fr 1fr;  
  grid-alignment: start start;  
}

grid-alignment 属性可用于将子网格与其父网格对齐。在此示例中，子网格在程度轴和垂直轴上都与父网格对齐。

子网格的一个毛病是：它们很难调试。如果它们变得难以调试：应用网格查看器来可视化布局。在查看器面板中，你将看到许多不同的选项卡。其中一个选项卡是“网格”选项卡。“网格”选项卡将向你显示 CSS 网格布局的可视化。可视化将向你显示网格线、网格轨道和网格我的项目。

CSS 子网格是一个有价值的工具，可用于创立简单的响应式布局。

参考链接

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shapes
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
• https://drafts.csswg.org/
• https://developer.mozilla.org/en-US/docs/Web/CSS/:playing

小册

整顿两本小册，一本是前端面试小册，一本是图解算法，浏览体验都很好, 欢送增加我微信 linwu-hi 获取