原生模态对话框

HTML 的 <dialog> 元素用于创建对话框或其他交互式组件，如弹出窗口、警告框等。它提供了一种标准化的方法来实现模态（modal）和非模态（non-modal）对话框。

基本用法

要定义一个对话框，可以使用 <dialog> 标签：

<dialog id="myDialog">
  <h1>对话框标题</h1>
  <p>这是一个对话框。</p>
  <form method="dialog">
    <button>关闭</button>
  </form>
</dialog>

<dialog> 元素包含了一段文本和一个关闭按钮。<form method="dialog"> 的使用允许在点击按钮时自动关闭对话框。

可以使用 JS 来控制对话框的显示和关闭：

const dialog = document.getElementById('myDialog');
 
// 显示非模态对话框
dialog.show();
 
// 显示模态对话框
dialog.showModal();
 
// 关闭对话框
dialog.close();

可以使用 CSS 伪元素 ::backdrop 来自定义模态对话框的背景样式：

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

这将使对话框外的背景呈现半透明的黑色遮罩效果。

可折叠内容区域

HTML 中的 <details> 和 <summary> 元素是一种内置的方式，用来创建可折叠的内容区域，不需要 JavaScript 就可以实现简单的展开/收起效果，非常适合展示 FAQ、附加信息、代码块等内容。

基本语法：

<details>
  <summary>点击展开内容</summary>  <h1>这里是折叠标题</h1>
  <p>这里是可折叠的内容。</p>
</details>

<details>  容器，表示内容可以展开/折叠。 <summary>  折叠区域的标题，点击这个标题可以展开/收起内容。

样式自定义：

details[open] summary::marker {
  content: "→";
}
details:not([open]) summary::marker {
  content: "↓";
}

默认的 <summary> 会带有小三角图标（根据浏览器不同略有差异）

可以通过 CSS 做样式自定义

滚动驱动动画

滚动驱动动画（Scroll-driven animation），也叫“基于滚动的动画”或“滚动动画”，是指：动画的播放与页面滚动进度相关联，而不是由时间自动驱动。

实现方式概览：

.box {
      width: 150px;
      height: 150px;
      background: dodgerblue;
      border-radius: 12px;
      animation: spinZoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

animation-timeline: view();  启用基于视窗的滚动时间线（新标准）

animation-range: cover 0% cover 100%;  动画播放的触发范围（元素从“进入视窗”到“完全覆盖视窗”）

linear both  线性播放，both 让起始和结束帧保留

容器查询

CSS 容器查询（Container Queries）是一项强大的新特性，它允许你根据容器的大小（而不是视窗大小）来应用不同的样式。这是对响应式设计的一次重大升级，使组件更具适应性和复用性，特别适合构建“自适应组件”。

使用语法示例：

.card {
  container-type: inline-size; /* 启用容器查询（基于宽度） */
  container-name: card;        /* 可选，给容器命名 */
}

/* 基于容器宽度进行样式调整 */
@container (min-width: 600px) {
  .card-content {
    …
  }
}

container-type  启用容器查询，常用值是 inline-size（宽度）或 size（宽高）

container-name  可选，命名容器以供 @container name (...) 使用

@container  容器查询的语法规则，类似媒体查询，但针对容器而非视口

样式嵌套

CSS 样式嵌套（CSS Nesting）是一项新特性，它允许你在 CSS 中像写 SCSS 或 LESS （预处理器）一样嵌套选择器，使结构更加清晰、组件化，减少重复代码。

基本语法示例：

.card {
  padding: 1rem;
  background: #f5f5f5;

  &:hover {
    background: #eee;
  }
}

从 2023 年开始，主流浏览器已经逐步支持原生 CSS 样式嵌套，无需预处理器。

• 写法：&
• 含义：引用当前选择器（和 SCSS 相同）