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() 是接受两个参数的函数，且这两个参数都必须为 <color>。系统会根据使用的配色方案选择其中一种。

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

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

从 Chromium 114 中的 popover API 开始，我们将面向浏览器推出一组新的声明式 HTML API，用于构建弹出式窗口。

这些功能包括能够轻松为进入和退出动画添加动画效果，以及针对可关闭的元素（例如对话框和弹出式窗口）顺畅地从顶层添加动画效果。

同时在弹出式窗口和主页上设置 COOP: restrict-properties 不会导致限制。如果仅在弹出式窗口或主页面上设置此政策，系统将禁止通过 opener 访问除 postMessage 和 closed 以外的属性，即使这两个项目同源也是如此。

滚动驱动的动画是一种向您的网站或 Web 应用添加互动和视觉吸引力的方式，由用户的滚动位置触发。这是一种非常棒的方法，可以持续吸引用户，并让您的网站在视觉上更具吸引力。

“Inert”表示无法移动，因此，当您标记某些元素时，会移除这些 DOM 元素的移动或互动。

滚动条驱动的动画是 Web 上常见的用户体验模式。滚动驱动的动画与滚动容器的滚动位置相关联。这意味着，当您向上或向下滚动时，链接的动画会以直接响应的形式向前或向后拖动。例如，视差背景图片或阅读指示器会随着您滚动而移动

CSS 变量在 50% 存储了不透明度值，该值随后与 HSL 一起使用，以创建半透明的蓝色背景。嵌套媒体查询会检查用户对降低透明度的偏好，如果为 true，则将不透明度变量调整为 95%（一个近乎不透明的值）。

多年来，我们一直构想一个“父级选择器”。现在终于来了！采用 :has() 伪选择器的形状。您可以想到哪些有趣的 :has() 用例？这里最吸引人的就是打破你的心智模式。这会让人想到“我可以换种方式处理这些风格吗？”。

有一天，我在 MDN 上浏览时，决定寻找一些鲜为人知的标记。

由于 CSS 一直以来都不允许动画调整为 height: auto;，因此我们不得不使用 JavaScript 来测量内容的高度，并根据该像素值调整动画。当calc-size() 函数功能在浏览器中出现时，我们就可以这样实现了

Windows 中有一个 WSC（Windows 安全中心）服务，防病毒软件使用它来让 Windows 知道有其他防病毒软件在运行，并禁用 Windows Defender。

向选择选项列表添加 <hr>（水平线）元素，这些元素将显示为分隔符，从视觉上分解各个选项，以便提供更好的用户体验。

排版孤立词和孤立词是指段落或文本块末尾独立的单个字词。孤子是指单独显示在文本块顶部的字词，而孤立字符则位于文本块末尾。它们会妨碍我们的眼睛浏览文字，导致内容难以阅读

某些东亚语言（如中文或日语）不使用空格来分隔字词，并且行可以在任何字符处换行，即使它位于单词中间也是如此。这是这些语言的正常换行行为，但在标题或诗歌等短文本中，最好在自然短语边界处换行

随着近期（甚至之前）推出的 Document Picture-in-Picture API 推出，Web 开发者越来越希望能够在用户从当前标签页切换焦点时自动打开画中画窗口。这对于视频会议 Web 应用尤为有用

在 WordPress 中，设置可读性好 URL 地址结构非常简单。只有搜索页面尚未受到该设置的影响，它的默认语法是带有搜索参数 "s"。但有一种方法可以随心所欲地更改搜索结果显示页面的url网址。

表单控件元素的垂直写入模式意味着这些元素可以以垂直写入模式显示。

这篇博文详细介绍了如何使用 Puppeteer 运行和测试支持蓝牙的 Web 应用。其中的关键部分是 Puppeteer 能够操作 Chrome 的蓝牙设备选择器。

考虑到通过 Web MIDI API 自由访问连接的 MIDI 设备存在安全问题，W3C 音频工作组要求针对 Web MIDI 规范中的所有 MIDI API 使用提出明确权限要求。

css 锚点定位简化了许多界面功能（例如菜单和子菜单、提示、选择、标签、卡片、设置对话框等）的复杂布局要求。借助内置于浏览器中的锚点定位，您将能够构建分层界面，而无需依赖第三方库，开启了一个充满创意的世界。