2022好用的css特性(1)

前言

state-of-css发布了2022 css使用数据的统计。大概率浏览了一遍，从中选取了一些使用率逐年增长并且使用率较高的特性进行学习记录。

aspect-ratio

MDN文档

设置元素的宽高比, 例如aspect-ratio: 2 / 1，表示宽高比2比1。
主要使用案例是为不知道具体宽高的元素设置宽高比。

@container

可以根据元素的大小进行媒体查询

// html
<div class="container">
  <div class="item"></div>
</div>
// css
.container {
  width: 380px;
  container-type: inline-size;
  container-name: container;
}

.item {
  width: 10px;
  height: 10px;
  background-color: red;
}

@container container (max-width: 400px) {
  .item {
    background-color: yellow;
  }
}

在container元素小于等于400px时，item显示黄色，大于时item为红色
感觉比@media媒体查询好用很多，唯一的缺点可能没有@media那么好管理，@media的样式可以拆开，在媒体满足条件时再加载，这个感觉不好实现。

min-content max-content fix-content

width: min-content: 装下单个最大内容的最小宽度

width: max-content: 无视父容器宽度，获得能装下所有内容的宽度

width: fix-content: 在父容器宽度的限制下，适配内容宽度

// html
<div class="container">
  <div class="max-content">max-content longlonglonglonglong测试测试</div>
  <div class="min-content">>min-content longlonglonglonglong测试测试</div>
  <div class="min-content">>min-content short short short测试测试</div>
  <div class="fix-content">>fix-content short short short测试测试</div>
<div>
// css
.container {
  width: 100px;
}

.max-content {
  width: max-content;
  background-color: red;
  padding: 5px;
  margin-bottom: 1em;
}

.min-content {
  width: min-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

.fix-content {
  width: fix-content;
  background-color: green;
  padding: 5px;
  margin-bottom: 1em;
}

得到效果如下：

emmm，看起来是挺方便的，但是实际使用场景咋感觉想不到呢？

scroll-behavior

主要配合ScrollTo或者是scroll-page之类的导航触发，以达到如下所示的效果：

variable Fonts

看起来可以把几种字体按权重进行融合展示，挺有意思，但实践场景应该较少。

@supports

判断浏览器是否支持css属性，从而做出不同处理

// html
<h1 class="supported">Your browser supports :has()</h1>
<h1 class="unsupported">Your browser does not support :has()</h1>
// css
* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: 'Google Sans', sans-serif, system-ui;
}

.supported {
  display: none;
  color: hsl(130 80% 40%);
}

.unsupported {
  color: hsl(0 80% 50%);
}

@supports(selector(:has(+ *))) {
  .supported { display: block; }
  
  .unsupported {
    display: none;
  }
}

可以得到如下结果

确实挺实用了，但是公司只需要支持chrome浏览器了，之前竟没听说这个css rule, 实在惭愧。

::has()

额，这貌似是除了css variable之外蓝线最长的，可以对照这篇google提供的文档系统学习。