这是一篇来自web.dev的文章，作者为亚当·阿盖尔，主要介绍了5个css特性，小胖对原文做了节选，另外添加了css的mozilla org官方文档地址，大家权当扫盲帖搂一眼咯，原文地址在文章末尾！

CSS:has(.potential-beyond-being-a-parent-selector)

Map.prototype.has() - JavaScript | MDNMDN Web DocsMDN logoMozilla logo

:has() 已于 2023 年底登陆所有主流浏览器！这个新的选择器看起来很小巧，但对于它可以解锁的所有用例，您都会感到惊讶：游戏、响应式、内容感知布局、智能组件，以及 Jhey 的这篇文章中探讨的许多其他用例。

button:has(.icon) {  gap: 1ch;}.card:has(img) {  grid-auto-flow: row;}

创建子网格 subgrid

Subgrid - CSS: Cascading Style Sheets | MDNMDN Web DocsMDN logoMozilla logo

多年来，前端 Web 社区一直希望 subgrid 帮助完善和完善这一广受欢迎且功能强大的 CSS 网格布局引擎。它现在适用于所有三大主要引擎。

body {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));  > article {    display: grid;    grid-row: span 4;     grid-template-rows: subgrid;  }}

嵌套 CSS 的方式 nesting

CSS nesting - CSS: Cascading Style Sheets | MDNMDN Web DocsMDN logoMozilla logo

内置 CSS 嵌套已于 2023 年在所有主流浏览器中推出。 我甚至更新了我的网站，移除了编译嵌套的构建流程。现在，我发布了更小的样式表！没错，支持嵌套的样式表比较小，而且所有浏览器开发者工具都已准备好呈现这种样式。

.you {  .can-totally-ship-this {    &.if-you-wanted {      /* it's VERY MUCH like SCSS */            &:is(:hover, :focus-visible) {        /* put a bird on it */      }    }  }}.for-theming {  @media (prefers-color-scheme: dark) {    /* you can nest media queries */  }}/* or for theming with [data-theme="dark"] */.button {  background: black;  color: white;  /* nest and do more than just append, flip it and reverse it */  [data-theme="dark"] & {    background: white;    color: black;  }}

让浏览器平衡标题 balance

text-wrap - CSS: Cascading Style Sheets | MDNMDN Web DocsMDN logoMozilla logo

如果没有 text-wrap: balance，开发者和文案作者就需要换行提示，例如 <wbr> 元素或 ­。这主要是一场失败的战斗，因为一旦内容以任何方式翻译、缩放或修改，就无法保证这些封装提示将出现在内容的新呈现方式中。

使用容器查询单元 cqw

CSS values and units - CSS: Cascading Style Sheets | MDNMDN Web DocsMDN logoMozilla logo

有六个新的容器查询单元：

1. 内联变体cqi。
2. 宽度变体cqw。
3. 块变体cqb。
4. 高度变体cqh。
5. 长度较小者的变体cqmin。
6. 以较大长度为准的变体cqmax。

原文地址：
https://web.dev/articles/5-css-snippets-every-front-end-developer-should-know-in-2024#
csshaspotential-beyond-being-a-parent-selector