前端CSS小笔记-01

1. 容器查询

A container query

关键代码：

.panel {  
  container: layers-panel / inline-size;  
}

.card {  
  padding: 1rem;  
}  
  
@container layers-panel (min-width: 20rem) {  
  .card {  
    padding: 2rem;  
  }  
}

示例：

浏览器支持：

@container

Chrome	Firefox	Microsoft Edge	Sarafi
105	110	105	16

container

Chrome	Firefox	Microsoft Edge	Sarafi
105	110	105	16

2. 滚动快照

Scroll snap

关键代码

.snaps {  
  overflow-x: scroll;  
  scroll-snap-type: x mandatory;  
  overscroll-behavior-x: contain;  
}
  
.snap-target {  
  scroll-snap-align: center;  
}  
  
.snap-force-stop {  
  scroll-snap-stop: always;  
}

示例

浏览器支持

scroll-snap-type

Chrome	Firefox	Microsoft Edge	Sarafi
69	99	79	11

scroll-snap-align

Chrome	Firefox	Microsoft Edge	Sarafi
69	68	79	11

scroll-snap-stop

Chrome	Firefox	Microsoft Edge	Sarafi
75	103	79	15

overscroll-behavior

Chrome	Firefox	Microsoft Edge	Sarafi
63	59	18	16

3. 网络桩

Grid pile

关键代码

.pile {  
  display: grid;  
  place-content: center;  
}
  
.pile > * {  
  grid-area: 1/1;  
}

示例

浏览器支持

grid

Chrome	Firefox	Microsoft Edge	Sarafi
57	52	16	10.1

4. 快速生成圆圈

Quick circle

听说是个很简约的写法😀

关键代码

.circle {  
  inline-size: 25ch;  
  aspect-ratio: 1;  
  border-radius: 50%;  
}

示例

浏览器支持

aspect-ratio

Chrome	Firefox	Microsoft Edge	Sarafi
88	89	88	15

5. 用@layer控制变体

Control variants with @layer

关键代码

级联层可以帮助将后来发现或创建的变体插入到级联的正确位置，与原始变体集一起。

/* file buttons.css */  
@layer components.buttons {  
  .btn.primary {  
     …  
  }  
}

然后，在完全不同的文件中，在其他随机的时间加载，将一个新的变量附加到按钮层，就好像它一直存在于那里一样。

/* file video-player.css */  
@layer components.buttons {  
  .btn.player-icon {  
    …  
  }  
}

示例

浏览器支持

@layer

Chrome	Firefox	Microsoft Edge	Sarafi
99	97	99	15.4

6. 通过逻辑属性记忆更少，达到更多的效果

Memorize less and reach more with logical properties

不用担心因国际书写模式和文档的文字方向而更改左右对齐或者边距。只需使用逻辑属性如padding-inline，margin-inline和inset-inline代替物理属性，浏览器会自己调整。

关键代码

button {  
  padding-inline: 2ch;  
  padding-block: 1ch;  
}  
  
article > p {  
  text-align: start;  
  margin-block: 2ch;  
}  
  
.something::before {  
  inset-inline: auto 0;  
}

示例

浏览器支持

padding-inline

Chrome	Firefox	Microsoft Edge	Sarafi
87	66	87	14.1

margin-block

Chrome	Firefox	Microsoft Edge	Sarafi
87	66	87	14.1

inset-inline

Chrome	Firefox	Microsoft Edge	Sarafi
87	63	87	14.1

消息来源于：Google Developers