"What's New in CSS" - Training Session
Way back in 2011, I delivered my first ever training session at Adtrak, in which I covered a selection of the new "CSS3" features that were making their way into the major browsers of the time.
It was essentially a summary of "what's new in CSS", which also happened to be the title for my very last training session at Adtrak which I recently delivered, just a few days before I left for pastures new on Christmas Eve.
I've always been the CSS guy (even re-christened SteCSS) so it was a fitting way to end my lengthy [and enjoyable] Adtrak tenure.
So What is New in CSS?
As part of the training, I developed an app (built in Next.js) which would act as both the medium I'd deliver the session through, and as a source of reference for the future.
It's far from exhaustive (there are a ton of new features in CSS) but it covers a selection of the most useful and exciting new additions, many of which haven't yet received the coverage they warrant.
The full list covered is:
- The CSS Backstory
- text-wrap: balance
- scroll-behaviour: smooth
- align-content in Block elements
- isolate
- inset
- light-dark() function
- :has() pseufo-class
- Container Queries
- Transition to auto height/width
- Transition from display none/block
- View Transitions
- clamp()
- Scroll driven animations
The team are heavy Tailwind users (as is a significant chunk of the industry) so I was keen to include demos and examples using both vanilla CSS and Tailwind where possible.
Naturally, the app also makes heavy usage of much of the new CSS features discussed, such as scroll driven animations, scroll-behaviour, :has(), view transitions and more.
The session was recorded too if you ever suddenly feel the urge to hear me say um a lot.