CSS Rule

width

min-content - 固有的最小宽度
max-content - 固有的最大宽度
fit-content = min(max-content, max(min-content, fill-available))
stretch
fit-content(<length-percentage>) -> min(max-content, max(min-content, <length-percentage>))
- 目前浏览器还没有支持
https://developer.mozilla.org/en-US/docs/Web/CSS/width

theme

prefers-color-scheme light,dark

<!-- 告诉浏览器支持配色 - 且优先选择 dark -->
<meta name="color-scheme" content="dark light" />

:root {
  /* 表示支持配置方案 */
  color-scheme: dark light;
}

/* 根据用户配置选择 */
body {
  background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: darkslategray;
  }
}

color

命名颜色
特殊颜色
- transparent
- currentcolor
系统颜色
- Canvas 应用或文档背景色
- CanvasText 应用或文档文本前景色
- LinkText - non-active, non-visited - 蓝色
- VisitedText - visited - 紫色
- ActiveText - active - 红色
- ButtonFace - 按钮背景颜色
- ButtonText
- ButtonBorder
- Field - input 背景色
- FieldText
- Highlight - 选中文本背景颜色 ::selection
- HighlightText - 选中文本颜色
- SelectedItem - 选中元素背景色 - 例如 checkbox
- SelectedItemText
- Mark - mark 标签
- MarkText
- GrayText - disabled 的颜色
CSS Color Module Level 4

@layer

Chrome 99+, FF97+
定义级联层级
没有在层里的会默认在一个匿名层

/* 1. 命名层 */
@layer layer-name {
  /*rules*/
}
/* 2. 定义层 - 优先级占位 - 第一次出现的位置很重要，和之后再添加规则 */
/* 越后优先级越高 */
@layer theme, layout, utilities;
/* 3. 匿名层 - 命名层之后 - 优先级最高 - 等同于没有定义层 */
@layer {
  /*rules*/
}

/* 4. import 到 层 */
@import 'theme.css' layer(utilities);
@import 'theme.css' layer; /* 匿名层 */

/* 嵌套层 */
@layer framework {
  @layer layout {
  }
}

/* 后续增加规则到嵌套层 */
@layer framework.layout {
}

<link rel="stylesheet" href="zxx-lib.css" layer="lib" />
<link rel="stylesheet" href="zxx-lib.css" layer />
<link rel="stylesheet" href="zxx-lib.css" layer media="supports(at-rule(@layer))" />

@layer

对齐和排列

{align,justify}-{items,self,content}
align & justify
- align - Block Axis
- justify - Inline Axis
align-self 默认 stretch
flex - flex-direction
- justify - 主轴
- align - 副轴
alignment
- 位置
  - center
  - start - 受书写模式影响
  - end
  - self-start
  - self-end
  - flex-start
  - flex-end
  - left
  - right
- 基线
  - baseline
  - first baseline
  - last baseline
- 分布
  - stretch
  - space-between
  - space-around
  - space-evenly
safe & unsafe
- safe - 溢出时使用 start

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment

flexbox

flex item has a 100% by default

width​

theme​

color​

@layer​

对齐和排列​

flexbox​

width

theme

color

@layer

对齐和排列

flexbox