此演示版使用 checkbox 来实现其大部分功能，优势在于无需使用 CSS 或 JavaScript 即可完全正常运行且可访问。加载 CSS 支持从右到左的语言、垂直度、动画等。加载 JavaScript 会使开关变得可拖动且有形

JavaScript 事件处理通常很简单。在处理简单（相对扁平的）HTML 结构时尤其如此。不过，当事件通过元素层次结构传输（或传播）时，情况会更复杂一些。这通常是开发者联系 stopPropagation() 和/或 preventDefault() 来解决所遇到的问题时

借助新的 CSS 模块脚本功能，您可以使用 import 语句加载 CSS 样式表，就像加载 JavaScript 模块一样。然后，样式表可以像可构造的样式表一样应用于文档或shadow roots

CSS 界面规范中的 CSS accent-color 支持使用一行 CSS 为元素着色，提供一种将品牌融入元素的方法，让您无需进行自定义。

本文介绍了不同类型的范围。JavaScript 作用域是 Web 开发中更高级的概念之一，因此您应该已通读此内容并花时间了解了这个主题。

如果出于任何原因，您无法避免对预加载扫描器加速加载性能的能力产生负面影响的模式，请考虑使用 rel=preload 资源提示。

本文介绍了使用 Fetch API 时的一些错误处理方法。通过 Fetch API，您可以向远程网络资源发出请求。当您进行远程网络调用时，您的网页可能会受到各种潜在网络错误的影响。

如果您能够遵循移动优先、基于断点的方法（目前大多数开发者都在这样做）的局限性，那么为该方法实现基于容器的回退要比实现对每个容器查询功能的全面支持要容易得多。

translate、rotate 和 scale 的动画在合成器上运行的方式与 transform 的动画相同，因此它们有利于提升动画性能，与 transform 相同

在本文中，我们将深入介绍网络上可供我们使用的不同 HTML 列表类型以及何时使用这些列表类型，包括一些您可能不熟悉的属性。我们还将学习使用 CSS 设置样式的一些实用且富有创意的方式。

您可以通过以下几种方法设置元素边框：border、outline 和 box-shadow，每种方法都有自己的优缺点，尤其是在为边框添加动画效果时。不使用适当 CSS border 的主要原因是出于动画目的。

CSS 中的媒体查询(media query)可让你根据屏幕尺寸或设备类型等特定条件更改样式。它使用媒体类型（如屏幕或打印）和一些规则来决定何时应用样式。

说到 CSS，有时边框 border 并不是真正的边框 border。

在本集中，我们将介绍以下两者之间的区别：border，outline，box-shadow。我们还将讨论在什么情况下可以使用其中一种而不是另一种。

快速 CSS 技巧！一个动画加载 loading，请注意使用 steps(var(–count)) 以实现正确的效果 ✨

随着 Chrome 浏览器 125 中引入 CSS 锚点位置 API，将一个元素相对于另一个元素进行定位变得前所未有的简单。这是管理弹出窗口和工具提示等复杂定位用例的绝佳方法。

Async Clipboard API 的 Clipboard 接口提供对系统剪贴板内容的读写权限。这允许 Web 应用实现剪切、复制和粘贴功能。

本文适合初学 JavaScript 中的 Set 并希望了解如何使用这些新 JavaScript 方法的读者阅读。我将通过基本示例强调使用这些方法的一些优势，以说明为什么您可能会选择这些方法而不是构建自己的实现。

HTMLVideoElement.requestVideoFrameCallback() 方法允许网页创作者注册一个回调，该回调在向合成器发送新视频帧时在渲染步骤中运行。这样一来，开发者就可以对视频执行高效的每视频帧操作，例如视频处理和在画布上绘制、视频分析或与外部音频源同步。

em 是一种很好的测量方法，因为它是圆形的。最终，浏览器会选择字体大小，这意味着如果你在字体大小中从不使用像素，那么你的排版在任何浏览器中都能很好地运行。

我们使用限定范围的自定义属性和背景剪辑来制作动画渐变文本效果

Source maps 源代码映射是现代 Web 开发中的重要工具，可以大幅简化调试工作。本页面介绍了有关Source maps 源代码映射的基础知识、其生成方式，以及源代码映射如何改善调试体验。

无论是从同一网站还是跨网站，并发使用 IndexedDB 的速度都更快。这篇博文提供了所有详细信息，并说明了您需要执行哪些操作才能充分利用这一变更（Chrome 126 及以上版本均提供）。

AVIF 是在网络上提供图片的绝佳选择；AVIF 可以快速编码和解码，同时能够提供最佳的质量或最小的文件大小，具体取决于你的网站。AVIF 是在网页上投放动画的最高效方式。

:user-valid 和 :user-invalid 伪类选择器仅在用户更改输入后才提供有关错误的反馈，从而帮助改善输入验证的用户体验。有了这些新的选择器，您就不再需要编写有状态代码来跟踪用户已更改的输入。

借助 subgrid，可以与嵌套网格共享轨道大小、模板和名称。本文介绍了相关工作原理。

在本文中，我们将介绍 3 种有效技术，用于检测使用无头和非无头 Chrome 浏览器的 Puppeteer 僵 […]

CSS 中的新长度单位层出不穷，你知道多少呢？在这个 Codepen 中测试一下你的技能，或者只是探索一下，看看自从你上次查看以来有什么变化。

我认为每个前端开发者都应该知道，:has() 不仅仅是一个“父级选择器”，subgrid 如何和为何、如何使用内置 CSS 语法进行嵌套、如何让浏览器在标题文本换行之间取得平衡，以及如何使用容器查询单元。

我认为每个前端开发者都应该知道如何使用容器查询、打造快速滚动体验、避免使用网格执行 position: absolute、快速敲出圆形、使用级联层，以及通过逻辑属性以更少的费用实现更多覆盖范围。

HTML5 的兴起引发了对设备硬件访问的激增。地理定位 (GPS)、Orientation API（加速度计）、WebGL (GPU) 和 Web Audio API（音频硬件）都是理想的示例。本教程介绍了一个新 API GetUserMedia，可让 Web 应用访问用户的摄像头和麦克风。

IndexedDB 是一个大规模的 NoSQL 存储系统，几乎可以存储用户浏览器中的任何内容。除了常见的搜索、获取和放置操作之外，IndexedDB 还支持事务，非常适合存储大量结构化数据。

在 CSS 网格中，您可以使用 grid-template-columns 和 grid-template-rows 属性分别定义线条名称，并跟踪网格列和行的大小。

light-dark() 是接受两个参数的函数，且这两个参数都必须为 。系统会根据使用的配色方案选择其中一种。

这种令人沮丧的体验是由对话框和全屏模式“争”得 Esc 键造成的。这是一场非平等的战斗，因为在默认情况下，全屏模式会获胜。但是，如何才能让对话框成为 Esc 键的胜出者？这正是 Keyboard Lock API 的用武之地。

我们在 Chrome 中添加了侧边栏。这是一个新的配套 surface，用户可以在浏览内容旁边使用工具。今天，我们很高兴地宣布，从 Chrome 114 开始，您的扩展程序将可以在侧边栏中显示内容。