Michelle Barker delivered a really fun & inspiring presentation called Modern CSS Layout is Awesome! She covers all the great innovations of the last few years, and shows how we can use them IRL. When she gets into the container queries demo, things get really fun… :-)
Chris Coyier continues the trend by writing about Modern CSS in Real Life. Chris goes beyond just “what can you do”, but “how you can do it in your day-to-day work”.
And the great Kevin Powell covers a bunch of CSS features with better browser support than you might have thought, including such faves as Custom Properties, Object Fit, Intrinsic and Extrinsic Sizing, Conic Gradients, Logical Properties and much, much more!
Sticking with Kevin for a second, he shares a freaking awesome approach to animating height from 0 to auto, with no JS… The first example is a little simple (as a good first demo should be), but the accordion example really shines!
And Una Kravits shares another common animation example, transitioning from display: none; opacity: 0; to display: block; opacity: 1;! (This one might still be behind a flag for now, but if it still is, it is coming!)
Consider this a Public Service Announcement from @StackBlitz, reminding us that we can customize form element highlights to match our site’s branding with one simple line of CSS:
body {
/* change the rgb to your brand color */
accent-color: rgb(112, 70, 112);
}
Zoran Jambor offers a very nice, easy-to-follow Advanced Positioning in CSS Grid tutorial video, including some useful tips for setting up DevTools for debugging.
Zoran also shows how to find all the changes you made while tinkering with a layout or design in DevTools. So handy!
And speaking of DevTools, Patrick Brosset offers DevTools Tips. Currently boasting 150 tips to help with your debugging!
And speaking of Patrick, he also presented Style Recalculation Secrets They Don’t Want You To Know at CSS Day 2023. Always fun to get “insider info”! ;-)
Geoff Graham writes about Writing CSS In 2023: Is It Any Different Than A Few Years Ago?. It’s no secret that CSS has changed a tremendous amount in recent years, and there is much more on the immediate horizon. What are some of your fave changes in how you write CSS?
Joan León shares a collection of Web Perf Snippets that you can use either as part of your CI/CD pipeline or from within DevTools. Handy stuff!
Hidde de Vries helps us understand Positioning anchored popovers. Like the dialog element, I love using these semantic elements & attributes!
Ahmad Shadeed provides some really great examples of creating Conditional CSS with :has and :nth-last-child including dynamic layouts based on the number children, modal actions, timelines and more.
And finally, for anyone that has had the brutal experience of coding HTML emails, you will finally find comfort knowing that tables are no longer required… There are, of course, still some buggaboos, but nesting tables within tables within tables is no longer one of them…
Happy reading,
Atg