新的 CSS 功能：锚点定位、形状、滚动捕捉

terry 2年前 (2023-09-28) 阅读数 307 #数据结构与算法

锚点定位

❝CSS 锚点定位是一项实验性的新 CSS 功能，允许您相对于页面上的另一个元素定位一个元素。这是使用属性 锚点位置 完成的。例如，以下代码将元素定位到锚元素左侧 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;  
}

此代码创建一个工具提示，当鼠标悬停在锚元素上时，该工具提示放置在锚元素上方 10 像素处。来自

❝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）。 1_v7Da3Upqlr8Z9iSTc4nokA.gif

CSS 锚点定位的用例

当用户向下滚动页面时跟随用户的元素。
当用户单击按钮时展开和折叠的手风琴。
根据多个锚点位置放大图像。
在页面的其余部分显示模式对话框。
更多动态工具提示！属性

CSS Shapes

> CSS Shapes允许你使用 CSS 轻松创建复杂的形状。CSS Shapes允许在 CSS 中设置几何形状来定义文本流动的区域。包括属性 `shape-outside、shape-margin 和 shape-image-threshold`

image.png

shape-outside 是不久前开发的。这允许您创建与页面上的特定位置相关的形状。例如，您可以创建一个圆心位于页面左上角的圆：

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

您可以创建三角形、梯形、多边形等。您可以根据需要将其变得复杂。

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

CSS 形状其他新功能：

shape-inside 可用于创建填充图像或其他内容的形状。
shape-image 可用于创建响应元素大小的形状。
shape-overflow 可用于创建被剪裁或内容流到形状外部的形状。在下面的示例中， shape-overflow:clip 允许内容在形状上流动，但将其限制在元素的行框中：

scroll snap

❝CSS 滚动 snap 模块提供属性允许您通过定义捕捉位置来控制平移和滚动行为。当用户滚动滚动容器中的内容时，内容可以被捕捉到位，从而允许分页和滚动定位。

❞ image.png

.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 更新的一部分，添加了一些表示加载的图像和视频的伪类。

❞

在媒体播放方面，：播放、：暂停 和 ：搜索 伪-课程似乎也非常有用。因为现在我们可以轻松地设计这些元素的样式，以创建更具交互性和吸引力的用户体验。
另一部分控制媒体的加载状态，包括：缓冲和：冻结。这些类向用户表明，一旦加载问题得到解决，媒体将继续播放。还将添加伪类 :muted 和 :volume-locked。这些伪类是提供视觉反馈、让用户了解情况并使用不同样式的好方法，如以下示例所示：

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

这些 CSS 伪类非常有用。它们将成为我们网站开发工具包的宝贵补充，使媒体元素的使用变得更加容易，并改善我们网站上的整体用户体验。

当前元素伪类 (:current)

❝:current 伪类很简单；它代表当前正在显示的元素，或该元素的前身。我们可以使用它为特定元素中的当前位置创建用户样式响应。

❞

例如，以下行可用于突出显示文档语音显示中朗读的段落或锚点元素：

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

此外，:过去 和 ： future 伪类还提供了显示完全出现在元素 :current 之前或之后的元素的有趣可能性。 :past 伪类表示被定义为之前的所有元素：当前元素之前的任何元素。然而，伪类 :future 表示下一个元素。

`CSS 网格`

❝CSS 子网格是 CSS 网格布局的一项功能。允许您在单个栅格容器中创建嵌套栅格，新功能即将推出！以下是如何创建子网格的示例：

❞image.pngimage.png

.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 {  
  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 子网格是创建复杂响应式布局的宝贵工具。