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() 是接受两个参数的函数，且这两个参数都必须为 <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。