CSS

CSS `:has()` 选择器在 2023 年底拿到主流浏览器支持，到 2025 年已经可以放心使用了。它被称作"CSS 的父选择器"——虽然不只是选父元素，但这是它最常见的用法。 `:has()` 的用法是根据后代元素的状态来匹配祖先元素： /* 选中"包含 img 子元素的 figure" */ figure:has(img) { border: 1px solid #ddd; pa

做了好几年前端，媒体查询（Media Query）一直有个让人不爽的地方：它只能根据视口宽度来调整样式。但实际开发中，一个组件可能在大屏的侧边栏里宽度只有 300px，在小屏下全宽反而有 375px。视口宽度一样，组件的实际空间完全不同。 Container Queries 解决的就是这个问题。它在 2023 年底拿到了所有主流浏览器的支持，到 2025 年已经成为我日常开发中用得最多的 CSS

Tailwind CSS v4 在 2025 年初发布正式版，变化比预期的大。如果你在考虑升级，这篇文章可能会帮到你。 v4 最大的改变是配置方式。不再用 `tailwind.config.js`，改成了 CSS-first 的配置： /* 以前的 tailwind.config.js */ module.exports = { content: ['./src/**/*.{js,ts,jsx

CSS Anchor Positioning API 让元素可以相对于其他元素定位，不再需要 JavaScript 计算位置。 /* 定义锚点 */ .anchor { anchor-name: --my-anchor; } /* 相对于锚点定位 */ .tooltip { position: absolute; position-anchor: --my-anchor; top:

View Transitions API 让页面切换有了原生动画支持，2024 年已经可以在主流浏览器使用。 View Transitions API 通过截图旧状态、过渡到新状态，实现平滑的页面切换。 // 最简单的用法 document.startViewTransition(() => { // 更新 DOM updateContent(); }); 浏览器会： 1. 捕获当前页面状

Tailwind CSS 4.0 在 2024 年初发布 Alpha 版本，带来了一些重要变化。 Tailwind 4 使用 Rust 重写了核心引擎，编译速度大幅提升。 npm install tailwindcss@next 在我们的项目测试中： | 项目规模 | v3 编译 | v4 编译 | 提升 | |---------|--------|--------|------| | 小型 (5

CSS 原生嵌套终于在 2023 年底得到主流浏览器支持。不用预处理器也能写嵌套了。 /* 原生嵌套 */ .card { padding: 1rem; & .title { font-size: 1.5rem; } & .content { color: #666; } &:hover { box-shadow: 0 2px 8px rgba(0,

Container Queries 在 2023 年得到主流浏览器支持。 .card-container { container-type: inline-size; } .card { display: grid; gap: 1rem; } @container (min-width: 400px) { .card { grid-template-columns: 200

Tailwind Typography 是一个处理富文本样式的官方插件。 npm install @tailwindcss/typography // tailwind.config.js module.exports = { plugins: [ require('@tailwindcss/typography'), ], }; <article class="prose">

Tailwind CSS 3.0 带来了期待已久的 JIT 模式成为默认。 JIT 现在是默认引擎： // tailwind.config.js module.exports = { // 不需要显式配置 JIT content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, }; 使用任意值，无需配置： <

Container Queries 终于来了，这是 CSS 的重大突破。 Media Queries 基于视口大小，但有时我们需要基于容器大小： /* Media Query: 基于视口 */ @media (min-width: 768px) { .card { display: flex; } } /* Container Query: 基于容器 */ @container (

Tailwind CSS 1.5 引入了多个实用特性，为后来的 JIT 模式奠定

CSS Grid 已经得到所有主流浏览器支持，现在是使用它的最佳时机。

CSS Grid 是 2018 年最令人兴奋的 CSS 特性之一，彻底改变了网页布局方式。

Flexbox 是现代 CSS 布局的基础，彻底改变了网页布局方式。

构建适配各种设备的响应式网站。

CSS Grid 是最强大的 CSS 布局系统。

OOCSS、SMACSS、BEM 等 CSS 架构方法论。