CSS – :has parent selector, @container container query, transform replacement, subgrid (2022 期待新功能)

前言

CSS 一直有一些老问题没有被解决. 2022 视乎看见了曙光.

参考

4 Exciting New CSS Features in 2022

:has()

参考:

YouTube – How to use CSS :has and :not - Future CSS!

CSS Parent Selector

顾名思义就是拥有的意思

p:has(.child)   // p 有子孙 .child
p:has(> .child) // p 有孩子 .child
p:has(+ .child) // p 的 next 是 .child

配合 :not(:has(.child)) 表示没有的意思.

支持度挺好的

@container (container query)

参考:

YouTube – How to inspect CSS container queries | DevTools Tips

MDN – CSS Container Queries

media query 只能对应 viewport, 这个局限太大了.

container query 的出现就是让 media query 可以对应任何一个 element

例子说明, 有 2 个 div

CSS Style

.container {
  width: 150px;
  aspect-ratio: 1 / 1;
  border: 1px solid blue;
  display: grid;
  place-items: center;

  .box {
    width: 100px;
    aspect-ratio: 1 / 1;
    border: 1px solid red;
  }
}

需求, 当 container width > 100px 时, .box 要有 background-color: red

@container

.container {
  container-type: inline-size;
  container-name: my-container;

  @container my-container (inline-size > 100px) {
    .box {
      background-color: red;
    }
  }
}

它有几个语法

container-type 声明, 这个 selector element 是一个 container. value: inline-size 表示我们关注 width 而已, 因为通常都是 depend on width 的啦

container-name 是声明这个 container 的名字. 这样就不会弄错了.

@container 就是 @media 啦. 紧跟着 container name, 然后圆括弧内就是判断条件. 它的语法比 @media 的 min-width 好太多了, 直接支持 symbol > >= < <=

p.s. inline-size = width, 这个 width 依据 box-sizing 而定, 比如 border-box 的话, padding 不算 width 哦.

支持度还不错，只是 IOS 需要 16.0 才能用，也就是 iPhone 8 或以上 (2017年9月发布的)

No More Transform

参考: YouTube – CSS Transform Is Dead! Use This Instead

从前 rotate, scale, translateX, translateY 都必须定义在 transform 属性内. 这个超级不优化.

往后可以一个一个定义了.

.box {
  scale: 2;
  translate: 50px 50px;
  rotate: 100deg;

  transform: translate(50px, 50px) rotate(100deg) scale(2); // 相等于
}

支持度不明

Subgrid

TODO...