State of CSS 2024

问卷调查会持续到 September 12, 2024 为止。查看问卷调查结果 »

8/12其他特征

@supports (display: table-cell) and (display: list-item) {
  //...
}

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

a:has(> img) {
  border: 2px solid grey;
}

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

@layer layer-name {rules}

原生 CSS 嵌套，不包括预处理器或后处理器。

.parent {
  color: blue;

  .child {
    color: red;
  }
}

.box {
  background-image: image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
}

.foo {
  background-image: image("myimage.webp#xywh=0,20,40,60");
}

@scope (.card) {
  :scope {
    padding: 1rem;
  }

  .title {
    font-size: 1.2rem;
  }
}

Pre-filter a set of child elements before applying nth-child to it.

:nth-child(2 of .highlight)
  border: 2px red solid;
}