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

1/13Layout

  1. Subgrid
  2. CSS Writing Modes
  3. CSS Logical Properties
  4. aspect-ratio
  5. content-visibility
  6. gap property for flexbox
  7. @container Queries
  8. object-view-box
  9. Small, Large, and Dynamic Viewport Units
  10. Media Queries Range Contexts
  11. Anchor Positioning

Welcome to the survey! This first part is all about figuring out which features of CSS you know about.

By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!

css 
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.item {
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: subgrid;
}

css 
.vertical-text {
  writing-mode: vertical-lr;
}

margin-block-start, padding-inline-end, border-inline-start…

css 
section {
  border-block: 8px solid blue;
  border-inline: 8px solid green;
}

css 
.square {
  aspect-ratio: 1 / 1;
}

css 
.card {
  content-visibility: auto;
  contain-intrinsic-size: 350px;
}

css 
section {
  display: flex
  gap: 1em 2em;
}

Including size and style queries
css 
@container (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

css 
img {
  aspect-ratio: 1;
  width: 300px;
  object-view-box: inset(25% 20% 15% 0%);
}

lvh / lvw / lvmin / lvmax, sv*, dv*, etc.

css 
body {
  height: 100dvh;
}

css 
@media (400px < width < 1000px) {
  /* ... */
}

css 
.anchor {
  anchor-name: --my-anchor;
}
.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: start end;
}