Links
The Undeniable Utility Of CSS :has
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!
Querying the Color Scheme
Media queries are nice, but for many things, we don’t even need them: there is this great CSS property
color-scheme
, which allows us to make various things adapt to the current color scheme. We can even set it on a per-element basis. This post describes how we can use registered custom properties and style queries to read the current value of alight-dark()
color for styling any non-color properties as well.
CSS @property and the New Style
An exploration of the newly supported at-rule for explicitly defining and animating custom properties in CSS.
Sticky Headers And Full-Height Elements: A Tricky Combination
Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like
100vh
. Philip Braunen explores why this happens and presents a solution to fix it.
Going Buildless
Can we do modern web development without a build step? How can we solve common build problems in HTML, CSS and Javascript using just the platform?
Videos
Scroll-Enhanced Experiences
Embark on a journey through the art of scrollytelling with CSS. This talk will guide you through the process of creating dynamic, story-driven experiences that leverage the user's scroll behavior. Learn to control the pace and rhythm of your story with the CSS Scroll Timeline API, creating a captivating narrative that unfolds with each tick of the mouse wheel.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.