CSS nesting just got a whole lot better!
Tag Archives: link
Benchmarking the performance of CSS @property
With @property now being Baseline Newly Available, I thought it’d be a good time benchmark the impact – if any – it has on the performance of your CSS. When starting to use a new CSS feature it’s important to understand its impact on the performance of your websites, whether positive or negative. With @property …
Continue reading “Benchmarking the performance of CSS @property”
The CSS Podcast 089: View Transitions
Last week I joined my colleagues Adam and Una on The CSS Podcast to talk about View Transitions.
Animate to height: auto; (and other intrinsic sizing keywords) in CSS
Use the interpolate-size property or the calc-size() function to enable smooth transitions and animations from lengths to intrinsic sizing keywords and back.
CSS-only Custom Range Slider with Motion
Introducing “Unleash the Power of Scroll-Driven Animations”
I built a thing: a 10-part video course that teaches you all there is to know about scroll-driven animations with CSS or JavaScript.
CSS color-scheme-dependent colors with light-dark()
I’ve written about light-dark() before here on bram.us, and last month I also wrote an article for web.dev about it. The article takes a bit of a different approach, so it’s still worth a read even when you’ve seen my previous one before. System colors have the ability to react to the current used color-scheme …
Continue reading “CSS color-scheme-dependent colors with light-dark()“
CSS ::backdrop now inherits from its originating element
Screenshot of the demo featured in the article. In Chrome 122 the backdrop is light purple because it can access the custom property from the dialog element. If you ever struggled with ::backdrop not having access to custom properties, here’s some good news: As of Chrome 122 – and also in Firefox 120 and soon …
Continue reading “CSS ::backdrop now inherits from its originating element”
Tailwind marketing and misinformation engine
Nuanced piece by Tero Piirainen on where Tailwind took a good practice, twisted it around, and took it for a run. Use it or don’t, love it or hate it, but this last sentence of the article hits close to home: Learn to write clean HTML and CSS and stay relevant for years to come. …
Continue reading “Tailwind marketing and misinformation engine”
View transitions: Handling aspect ratio changes
Great article by Jake, packed with demos on how to handle changes in aspect ratios between the old and new snapshots in View Transitions. View transitions: Handling aspect ratio changes →