Surveys / State of CSS 2022
This survey closed on October 30, 2022. View Survey Results »

8/14Other Features

  1. CSS Variables (Custom Properties)
  2. @supports
  3. will-change
  4. CSS Comparison Functions
  5. @property
  6. Cascade Layers
  7. Shadow DOM Features
  8. Trigonometric Functions
  9. CSS Nesting
  10. image-set()
  11. image()

css 
:root {
  --main-bg-color: brown;
}
.foo {
  background-color: var(--main-bg-color);
}

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

min(), max(), clamp()

css 
.element {
  width: clamp(100px, 50vw, 600px);
}

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

css 
@layer layer-name {rules}

::part(), :host(), ::slotted()

css 
custom-element::part(foo) {
  /* Styles to apply to the `foo` part */
}

:host(.special-custom-element) {
  font-weight: bold;
}

::slotted(*) {
  font-weight: bold;
}

sin(), cos(), tan()…

css 
div {
  width: calc(100px * cos(45deg));
  height: calc(100px * cos(45deg));
}

Native CSS nesting, excluding pre- or post-processors.
css 
.parent {
  color: blue;

  .child {
    color: red;
  }
}

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

css 
.foo {
  background-image: image("myimage.webp#xywh=0,20,40,60");
}
Next sectionCSS Frameworks
Previous section Selectors