Surveys / State of CSS 2023
This survey closed on July 15, 2023. View Survey Results »

7/13Other Features

  1. CSS Variables (Custom Properties)
  2. @supports
  3. CSS Comparison Functions
  4. @property
  5. ::marker
  6. :has()
  7. :where()
  8. Cascade Layers
  9. Shadow DOM Features
  10. Trigonometric Functions
  11. CSS Nesting
  12. image-set()
  13. image()
  14. Individual Transform Properties

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 
li::marker {
  content: '⭐️ ';
}

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

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

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");
}

css 
.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}