When CSS Says 'Yes' but Browsers Say 'LOL No'
CSS treats @supports as context-blind, and that leads to surprising (and misleading) behavior in real browsers. This article showcases examples when @supports doesn't work as expected and explores the reasons. :: Blog post at Alvaro Montoro's Personal Website.
View Transitions Toolkit
A collection of utility functions to more easily work with View Transitions.
CSS position: sticky now sticks to the nearest scroller on a per axis basis!
If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick.
A recent change to CSS fixes this: position: sticky now plays nice with single-axis scrollers, allowing you to have sticky elements that track different scroll containers on different axes. This change is available in Chrome 148 with the experimental web platform features flag flipped.
Detect at-rule support in CSS with @supports at-rule(@keyword)
Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional Rules Module Level 5 specification has solidified how this feature works and Chromium (Chrome, Edge, etc.) is about to ship it in Chromium 148!
Introducing the <geolocation> HTML element | Blog | Chrome for Developers
Discover the new way to request user location data.
A Progressive Enhancement Challenge – Frontend Masters Blog
You want to hide an interactive element that you don't need anymore after JavaScript loads/runs. Can you do it without a
How much do you really know about media queries? – Frontend Masters Blog
There are a ton more @media queries than
First Look at The Modern attr()
Exploring the modern attr() in CSS
More options for styling <details> | Chrome for Developers
You can now set the display type and also style the container for the part that expands and collapses using the new ::details-content pseudo-element.
The Undeniable Utility Of CSS :has • Josh W. Comeau
Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly at the top of my wishlist. Once I started using it, however, I kept discovering incredible things I could do with it. It’s now become a core part of my toolkit! In this blog post, I'll show you some practical real-world problems I solved using “:has”, as well as some wild experiments that blew my mind!
Inautilo
Frontend Dogma