One List To Rule Them All

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 :heading :heading() :state() Pseudo Elements # ::backdrop ::slotted() ::part() ::highlight() ::grammar-error ::spelling-error ::view-transition-new() ::view-transition-old() ::view-transition-group() ::view-transition-image-pair() ::scroll-button() ::scroll-marker() ::details-content ::picker() ::picker-icon ::checkmark ::column ::target-text Language # CSS Nesting @rules # @property @container size query style query state query @scope @layer @keyframes with entry and exit @supports @starting-style @view-transition @position-try @mixin @function @else @when Color # color-mix() color(from …) contrast-color() oklch(), oklab(), hwb(), color() linear-gradient(in oklab, …) Functions # var() if() 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 initial-letter Values # grid-template-columns: subgrid ; text-align: start | end ; overflow: clip ; Queries: # @media (prefers-contrast) @media (prefers-reduced-data) 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 # ex ch cap ic lh Root Relative # rex rch rlh ric rcap Absolute # pt pc in cm mm Q 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 Container # cqw cqh cqi cqb cqmin cqmax Have a suggestion? Let me know on Bluesky or Twitter ! 🤝