RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
100+ CSS features from the past 5 years or so
A cartoon skull with a hotpink hat on.3 min read

One List To Rule Them All

css

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 #

Pseudo Elements #

Language #

@rules #

Color #

Functions #

Properties #

Values #

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 #

Container #

Have a suggestion? Let me know on Bluesky or Twitter! 🤝

49 comments #

392likes
48reposts
  • Bill Ludwig
  • Iron
  • iamdtms
  • ???? Andy P.
  • Álvaro Montoro
  • comiCSS
  • Kevin Powell
  • Alvaro Montoro
  • Stuart Rutherford
  • Brad E
  • Marcos de Miguel
  • diekus
  • Ilja
  • Wenzel ????‍????
  • Andy Bell
  • AnjaB
  • Michael
  • Iron Orchid
  • Sia Karamalegos
  • Matthias Ott
  • Андрей Ситник
  • Leanne Renard
  • Andrey Sitnik
  • Sleepy Gallows
  • Lindsay Wardell ????️‍⚧️
  • Colin
  • Sangeeth Sudheer
  • Hubert Souchaud
  • Dan Denney
  • Cathy Chi (朱永平)
  • Ahmad Shadeed
  • Luminarious
  • Jamie York
  • Orges Mihaj
  • Brecht De Ruyte

Join the conversation on

Thank you! I’ve been mostly working with Tailwind of late (because reasons) and am eager to reacquaint myself with the good stuff; this is super helpful.
Erik VorhesErik Vorhes
Thank you, Adam! I could use some of these for css-questions.com. :)
Sunkanmi FafoworaSunkanmi Fafowora
My first Bluesky bookmark aww yiss
DIANADIANA
great list!
Andrew HudsonAndrew Hudson
small text change: @if() to if()
Andrew HudsonAndrew Hudson
I’d love if I could filter by Baseline status. I find since lots of stuff can’t be used as a progressive enhancement I learn about it when it’s trending and then forget about it by the time I can actually use it a few years later.
Sam ????Sam ????
you could combine this with browserscore.dev by @lea.verou.me and that'd be super cool :)
Andrew HudsonAndrew Hudson
* tries out the @bsky.app bookmark feature for this ????
Joran Quinten ⚡️Joran Quinten ⚡️
Write it! If you want it, certainly others do
Adam ArgyleAdam Argyle
Good stuff Adam, thanks for the compilation.
RalphRalph
ty, fixed!
Adam ArgyleAdam Argyle
mash it up with the baseline info from web platform features explorer? web-platform-dx.github.io/web-features...
Mary BranscombeMary Branscombe
Same thanks for the reminder!
Frank NoirotFrank Noirot
Fantastic work as always, Adam! ???? NB: The link to the Container Size Queries page is broken. I believe the correct URL is web.dev/learn/css/co...
Øystein HåbergØystein Håberg
ty ty, you are correct, and the link update is deploying now ????????
Adam ArgyleAdam Argyle
should the “fit-content()” function link to this page instead? developer.mozilla.org/en-US/docs/W...
deployed a `scroll-target-group` and `:target-current` #CSS scroll spy upgrade from the scroll driven animation variant that was a little uncanny to my site, now it's always right read about the feature from @una.im una.im/scroll-targe... try it here in Canary nerdy.dev/cascading-se...
Adam ArgyleAdam Argyle
looks super cool! I love all the ways css is removing the need for JS!
Andrew HudsonAndrew Hudson
Also, crashes the browser in Chrome
Andrew HudsonAndrew Hudson
i bet you're on a version without this bug fix! issues.chromium.org/issues/44328... sorry about that!
Adam ArgyleAdam Argyle
Want to really get CSS? Adam has a huge list of resources to documentation for loads of CSS capabilities for you. nerdy.dev/cascading-se...
PiccalilliPiccalilli