告别 JavaScript : 现代 CSS 特性

现代 CSS 引入了许多新特性和功能，提升了网页设计的灵活性和表现力。本文将介绍一些现代 CSS 的重要特性，包括容器查询、 :has() 伪类、选择器嵌套、滚动驱动动画、CSS 锚点定位、作用域样式、级联层、颜色函数、文本优化等。 容器查询 传统的 @media 查询基于视口大小，而容器查询允许组件根据其 父容器 的大小自适应样式，实现真正的组件级响应式设计。 基础用法 .card-container { container-name : card ; container-type : inline-size ; } @container card ( min-width : 400px ) { .card { display : grid ; grid-template-columns : 1fr 2fr ; } } 容器类型 类型 说明 size 可查询容器的块级和内联尺寸…