CSS的冷门特性：有哪些你还没用过？

最近几年 CSS 界的大事之一是每年年底的 《State Of CSS》，也就是 CSS 现状调查，去年年底发布了《State Of CSS 2021》。其中关于特性这一章，会列出一些比较新的 CSS 特性。但在这些特性中，有一些可能并不为人所知，今天就来盘点一下 2021 年 CSS 最冷门的特性。

1. 嵌套规则

嵌套规则允许你在一个选择器内部定义另一个选择器，从而可以更方便地组织你的 CSS 代码。例如，你可以使用嵌套规则来为一个元素定义不同的状态，或者为一个组件定义不同的样式。

.container {
  color: black;
  font-size: 16px;

  .header {
    color: white;
    font-size: 24px;
  }

  .footer {
    color: gray;
    font-size: 12px;
  }
}

2. 自定义属性

自定义属性允许你定义自己的 CSS 变量，然后可以在你的 CSS 代码中使用这些变量。这可以让你更轻松地更改你的网站的外观，而无需修改多个选择器。

:root {
  --primary-color: blue;
  --secondary-color: red;
}

.button {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

3. CSS Grid Layout

CSS Grid Layout 是一种新的布局系统，它允许你创建复杂的布局，而无需使用浮动或绝对定位。CSS Grid Layout 还支持响应式设计，因此你的布局可以在不同的屏幕尺寸下自动调整。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: red;
  color: white;
  padding: 10px;
}

4. Flexbox

Flexbox 是一种布局系统，它允许你创建灵活的布局，这些布局可以根据容器的大小自动调整。Flexbox 还支持响应式设计，因此你的布局可以在不同的屏幕尺寸下自动调整。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-item {
  background-color: red;
  color: white;
  padding: 10px;
  margin: 10px;
}

5. CSS Shapes

CSS Shapes 允许你使用各种形状来裁剪你的内容。这可以让你创建出非常有趣的效果，例如，你可以使用 CSS Shapes 来创建圆形或三角形的文本。

.shape-container {
  width: 200px;
  height: 200px;
  background-color: red;
  shape-outside: circle(50% at 50% 50%);
}

.shape-text {
  color: white;
  font-size: 24px;
  text-align: center;
}