CSS on Commentary of Takao

带有父选择器的创意 CSS 食谱：has()

Tue, 10 Mar 2026 00:00:00 +0900

带有父选择器的创意 CSS 食谱 `:has()`

多年来，CSS 开发人员梦想着一个 父选择器 — 一种根据子元素设置元素样式的方法。 JavaScript 和额外的类名是唯一的解决方法。然后是 :has()，这个 CSS 伪类最终使“如果这个元素包含 X，则相应地设计它的样式”成为本机现实。

Tailwind CSS v4.0 发布和纯 CSS 配置

Thu, 05 Feb 2026 00:00:00 +0900

介绍

Tailwind CSS v4.0 标志着从基于 JavaScript 的配置到 CSS 优先架构 的范式转变。 tailwind.config.js 文件消失了；设计标记现在使用 @theme 直接在 CSS 中定义。此版本还集成了 Lightning CSS 以实现极快的构建，采用了 CSS 嵌套和 @layer 等现代 CSS 功能，并提供了完全重写的引擎。本文详细介绍了 v3 的主要变化并提供了实用的迁移指南。

使用 CSS 纵横比防止累积布局偏移

Wed, 10 Dec 2025 00:00:00 +0900

了解累积布局偏移

累积布局偏移 (CLS) 是 Google 衡量视觉稳定性的 Core Web Vitals 指标之一。它量化了用户经历意外布局变化的频率。高 CLS 分数会损害用户体验和 SEO 排名。主要原因是？媒体元素（图像、视频、iframe）加载时无需保留空间。

使用 CSS light-dark() 实现简单的深色模式

Fri, 10 Oct 2025 00:00:00 +0900

传统深色模式的问题

传统上，实现深色模式需要将重复的 CSS 规则封装在 @media (prefers-color-scheme: dark) 中：

:root {
 --bg: #ffffff;
 --text: #111111;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg: #1a1a2e;
 --text: #e0e0e0;
 }
}

这可行，但会产生维护开销，特别是在跨大型样式表管理多个颜色属性时。 light-dark() CSS 函数完全消除了这种重复。

没有预处理器的 CSS 嵌套的标准语法

Fri, 15 Aug 2025 00:00:00 +0900

介绍

从历史上看，编写嵌套 CSS 规则需要 Sass (SCSS)、Less 或 PostCSS 等预处理工具。

然而，浏览器供应商已经标准化了 CSS 嵌套规范。如今，您可以直接在纯 CSS 文件中编写嵌套选择器，并在所有现代 Web 浏览器中本机运行它们。

使用 CSS 容器查询设计模块化布局

Thu, 10 Jul 2025 00:00:00 +0900

介绍

多年来，媒体查询 (@media) 一直是响应式网页设计的基础。

媒体查询根据浏览器窗口的视口宽度触发布局更改。然而，在现代组件驱动开发（使用 React、Vue 或 Web Components）中，基于视口的样式组件有明显的局限性。

与 CSS 网格子网格完美对齐

Sat, 10 May 2025 00:00:00 +0900

介绍

在卡片布局中跨列对齐嵌套组件是响应式网页设计中常见的布局挑战。

虽然 CSS Grid 和 Flexbox 可以轻松均衡同级卡片容器的高度，但对齐内部元素（例如标题、正文和 CTA 按钮）仍然很困难。如果一张卡片具有多行标题，而另一张卡片具有单行标题，则以下元素将错位，从而导致 UI 不一致。

使用视图转换 API 实现平滑页面转换

Sat, 05 Apr 2025 00:00:00 +0900

介绍

提供动态页面转换是提升现代 Web 应用程序整体用户体验 (UX) 的关键因素。

从历史上看，为了在页面导航之间平滑地变形或淡出元素，开发人员必须导入大量 JavaScript 库，例如 Framer Motion 或 GSAP。这些库需要深度挂钩渲染生命周期，以在对旧 DOM 节点进行动画处理时延迟卸载。

CSS 锚点定位简介和示例

Mon, 10 Feb 2025 00:00:00 +0900

介绍

在 Web 开发中，相对于特定参考元素（锚点）定位浮动元素（例如工具提示、弹出窗口、下拉菜单和悬停卡）历来是一项复杂的挑战。

为了使浮动元素在窗口大小调整或页面滚动时跟随锚点，开发人员传统上依靠连续的 JavaScript 坐标计算（使用 getBoundingClientRect()）来动态更改内联样式。因此，像 Popper.js 或 Floating UI 这样的库成为了行业标准。但是，在滚动事件期间在主线程上执行脚本循环经常会导致渲染延迟和卡顿，尤其是在移动设备上。

CSS 作用域样式：@scope 和封装策略

Sun, 15 Dec 2024 00:00:00 +0900

CSS 范围界定一直是一个挑战。默认情况下，样式是全局级联的，这意味着一个组件中的选择器可能会无意中影响另一个组件中的元素。多年来，开发人员采用命名约定、构建时工具和完整的 DOM 隔离来解决这个问题。该工具包的最新成员是 CSS @scope at 规则，它引入了基于邻近度的级联控制。本文比较了所有主要的范围界定策略，并帮助您选择正确的策略。

CSS 三角函数：样式表中的数学

Tue, 05 Nov 2024 00:00:00 +0900

CSS 已经从一种简单的样式语言发展成为一种强大的计算引擎。 CSS 值和单位模块级别 4 中引入的三角函数（在 Chrome 111+、Firefox 108+ 和 Safari 15.4+ 中发布）标志着范式转变。开发人员现在可以直接在样式表中执行几何计算，无需预处理器或 JavaScript。

CSS Popover API：无需 JavaScript 的原生覆盖

Tue, 20 Aug 2024 00:00:00 +0900

介绍

传统上，构建工具提示、下拉菜单和模式等叠加层需要大量 JavaScript。开发人员依赖 CSS position: absolute 进行手动坐标计算、ARIA 属性以实现可访问性，以及特定于框架的解决方案（例如 React 门户或浮动 UI）。 CSS Popover API 改变了这一点，它提供了一种原生的声明性方式来创建覆盖层，无需任何 JavaScript 即可处理定位、显示/隐藏切换、焦点管理和灯光关闭。

CSS 滚动驱动的动画：基于滚动的效果的未来

Tue, 25 Jun 2024 00:00:00 +0900

JavaScript 滚动事件的问题

传统上，基于滚动的效果依赖于在主线程上运行的 JavaScript 滚动事件侦听器，这通常会导致卡顿、丢帧和糟糕的用户体验。即使有被动侦听器和 requestAnimationFrame 限制，布局抖动仍然是一个持续存在的问题。 CSS 滚动驱动动画通过将滚动跟踪移动到合成器线程来解决这个问题，从而实现流畅的 60fps 效果，而无需任何 JavaScript 开销。

CSS @layer：使用层架构管理级联

Tue, 11 Jun 2024 00:00:00 +0900

如果您曾经在大型 CSS 项目中经历过特殊性战争 - 覆盖第三方样式、散布 !important 声明，或者重组 HTML 只是为了赢得级联 - @layer 就是您一直在等待的解决方案。 CSS @layer at 规则使开发人员能够明确控制级联顺序，而与特殊性或源顺序无关。

CSS 自定义属性：可扩展样式的策略模式

Tue, 09 Apr 2024 00:00:00 +0900

CSS 自定义属性（也称为 CSS 变量）从根本上改变了我们编写和维护样式表的方式。与 Sass 或 Less 中的预处理器变量不同，自定义属性是实时的、动态的，并且参与级联和继承。本文探讨了在生产应用程序中使用它们的战略模式——从设计令牌管理到运行时操作。

CSS Grid高级模式：复杂布局简单化

Fri, 15 Dec 2023 00:00:00 +0900

CSS Grid has transformed web layout design, but many developers only scratch the surface. Beyond the basic grid-template-columns: 1fr 1fr 1fr lies a powerful set of features that handle complex, responsive layouts with minimal code. This article explores advanced Grid patterns that every professional front-end developer should know.

Named Grid Areas for Semantic Layouts

Line-based placement works, but it becomes unreadable as layouts grow complex. Named grid areas let you define layouts that read like a wireframe directly in CSS.