调查问卷 / State of CSS 2024
问卷调查会持续到 September 12, 2024 为止。

1/12布局

  1. Subgrid
  2. CSS 书写模式 （Writing Modes）
  3. CSS Logical Properties
  4. aspect-ratio
  5. 小型、大型和动态视口单位
  6. Media Queries Range Contexts
  7. Anchor Positioning
  8. @container size queries
  9. @container style queries

欢迎参与调查！第一部分主要是分享你对各种 CSS 特性的使用体验：

  • 从未听说：这是你第一次看到这个特性——或者你听说过但不清楚它的作用。

  • 听说过：你读过或学习过这个特性，但还没有实际使用过。

  • 使用过：你至少使用过一次这个特性，哪怕只是尝试性质的。

顺便说一下，如果你想详细说明任何选择，只需点击那个小小的"评论"图标！

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;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

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

css 
body {
  height: 100dvh;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
@media (400px < width < 1000px) {
  /* ... */
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
.slider-link {
  anchor-name: var(--is);
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
@container (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
@container style(color: green) {
  /* <stylesheet> */
}
告诉我们更多：
告诉我们更多：
告诉我们更多：