Whether I'm giving a talk or on a podcast, these two things constantly pop up:
- how do I find what to study to keep up?
- what's new in CSS?
If you've wondered those things before, then this list is for you.
Find something you've never heard of, click the link; and look at you, you're already getting more familiar with what's new!
Selectors #
- :has()
- :is() and :where()
- :focus-visible
- :user-valid
- :user-invalid
- :active-view-transition
- :active-view-transition-type()
- :target-current
- :popover-open
- :scope
Pseudo Elements #
- ::backdrop
- ::view-transition-new()
- ::view-transition-old()
- ::view-transition-group()
- ::view-transition-image-pair()
- ::scroll-button()
- ::scroll-marker()
- ::details-content
- ::picker()
- ::picker-icon
- ::checkmark
- ::column
Language #
@rules #
- @property
- @container
- @scope
- @layer
- @keyframes with entry and exit
- @supports
- @starting-style
- @view-transition
- @position-try
- @mixin
- @function
- @if
Color #
- color-mix()
- color(from …)
- contrast-color()
- oklch(), oklab(), hwb(), color()
- linear-gradient(in oklab, …)
Functions #
- var()
- linear()
- fit-content()
- repeat()
- min()
- max()
- attr()
- env()
- circle(), polygon()
- scroll()
- view()
- clamp()
- sibling-count() and sibling-index()
- cos(), sin(), tan(), pow(), atan2() asin() acos()
- shape()
- light-dark()
- at-rule()
- image-set()
- anchor()
- random()
- random-item()
- control-value()
- progress()
- media-progress()
- container-progress()
- mix()
- calc-mix()
- cross-fade()
- transform-mix()
- first-valid()
- toggle()
Properties #
- accent-color
- color-scheme
- container-type
- content-visibility
- contain-intrinsic-size
- aspect-ratio
- animation-composition
- animation-timeline
- animation-range
- text-wrap
- font-palette and font-palette-values
- scrollbar-gutter
- forced-color-adjust
- reading-flow
- scroll-behavior
- interpolate-size
- corner-shape
- overscroll-behavior
- scroll-marker-group
- scroll-target-group
- transition-behavior
- scrollbar-color and scrollbar-size
- text-box
- anchor-name
- anchor-scope
- position-anchor
- position-area
- position-try-fallbacks
- position-try-order
- position-visibility
- field-sizing
Values #
- grid-template-columns: subgrid;
- text-align: start | end;
- overflow: clip;
Queries: #
Units #
There's a whole lot of units now. In my opinion, each are unique and useful in their own occasions. Super powers, knowing which to use when.
Relative #
Root Relative #
Absolute #
Viewport #
- vw
- vh
- vi
- vb
- vmin
- vmax
- dvw
- dvh
- dvi
- dvb
- dvmin
- dvmax
- svw
- svh
- svi
- svb
- svmin
- svmax
- lvw
- lvh
- lvi
- lvb
- lvmin
- lvmax
