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

4/12交互

  1. Scroll Snap
  2. overscroll-behavior
  3. scroll-behavior
  4. scrollbar-gutter
  5. ViewTransition API
  6. scroll-timeline
  7. view-timeline
  8. 离散特性动画

scroll-snap-type, scroll-snap-align, scroll-padding…

css 
.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
.foo {
  height: 200px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
.foo {
  scroll-behavior: auto;
  scroll-behavior: smooth;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
.container {
  scrollbar-gutter: stable;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
::view-transition-old(main-image),
::view-transition-new(main-image) {
  transform-origin: right top;
}

::view-transition-new(main-image) {
  animation: 400ms ease-out both grow;
}

figure {
  view-transition-name: main-image;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: --squareTimeline y;
  position: relative;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

css 
.animation {
  view-timeline: --subjectReveal block;
  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms;
}
告诉我们更多：
告诉我们更多：
告诉我们更多：

轻松为对话框和弹出窗口等可删除元素制作进入和退出动画。
css 
/*   IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}

/*   0. BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}
告诉我们更多：
告诉我们更多：
告诉我们更多：