205 - 《笔记：现代 CSS 100 天挑战之 1-20 天》

好久没关注 CSS，发现 CSS 不仅可以画 Github 猫，也可以画高清美女。最近看到这个 https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css/ ，感觉是时候补充下 CSS 的知识了，因为好多点都不知道。

以下是笔记。

Day 1、自定义属性的第二个参数是 fallback 值

// --not-set 没有设置时，会 fallback 到 #000
color: var(--not-set, #000);

// 可以嵌套自定义属性
color: var(--not-set, var(--also-not-set, #000));

// 自定义属性没有值时，会导致前面声明的 red 也失效
color: red;
color: var(--not-set);

Day 2、逻辑属性，不区分 left、right、top、bottom，改用 start 和 end 表示，对于需要同时支持 LTR 和 RTL 网站时有奇效。margin-inline-end 只是其一，还有 margin-block、padding-inline、padding-block 等方式的布局定义方式。block 用于垂直，inline 用于水平。

// 之前
.item { margin-right: 1em }
.media[dir="rtl"] .item { margin-left: 1em }

// 之后
.item { margin-inline-end: 1em }

Day 3、逻辑属性简写。由于只有两个值，所以简写的方式是 1 个值是表示两个用一个值，两个值是就分别设置。

margin-inline: 1em 2em;

Day 4、min 函数。表示取其中最小值，这在绝对数值时没啥意义，但遇到相对数值时就有用了。

width: min(100%, 800px);

// 上述定义的等价定义
width: 100%;
max-width: 800px;

Day 5、max 函数。类似 min 函数。

width: max(300px, 50vw);

// 上述定义的等价定义
min-width: 300px;
width: 50vw;

Day 6、:has 伪类。这个属性比较熟，周报里写过好几次，用于定义包含了子元素的父元素的样式。

.form-item:has([aria-invalid="true"]) {
  --color: #F00;
}

Day 7、subgrid。目前只支持 Firefox 71+ 和 Safari 16+。没看懂，因为不会 grid，略。

Day 8、:has 伪类嵌套。:has 是不支持嵌套的。

div:has(p) { border: 4px solid red }
p:has(strong) { border: 4px solid blue }

// 这行不支持
div:has(p:has(strong)) { border: 4px solid green; }
// 但这样可以，也算是曲线救国了
div:has(p strong) { border: 4px solid green; }

Day 9、inset 属性简写。inset 是 top、right、bottom、left 属性的简写，和 margin 规则一致。

.child {
  positoin: absolute;
  /* top: auto; right: 20px; bottom: 20px; left: auto; */
  /* 以下是上一行的简写 */