Links
Using CSS to fix the irradiation illusion
Ever noticed how white text on a black background looks thicker than black text on a white background, even though the weights are the same? This post teaches you how to account for this and adjust perceived font weight for dark mode without layout shift, with variable fonts and the GRAD axis.
The Google Antigravity website, rebuilt with Modern CSS
As an experiment to see if Modern CSS is up to the task, I recreated the Google Antigravity website with Modern CSS.
Masonry: Things You Won’t Need A Library For Anymore
CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.
Anchor Positioning and the Inset-Modified Containing Block (IMCB)
If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short).
"Hard CSS gradients" can be shortened to not include redundant values
The CSS images specification includes fixup rules which can be helpful to remove redundant values from CSS gradient definitions.
Videos
Getting started with CSS Nesting
CSS Nesting is awesome, though there are a few important things to know about it, which I break down in this video.
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.