12 Modern CSS One-Line Upgrades
📰 css
5 CSS snippets every front-end developer should know in 2024
A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()
With just CSS you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements and much more.
weeklyfoo #17 / 2024-01-28cssanimations
An Interactive Guide to CSS Grid
An official logo for CSS
Bonfire with CSS
browser-window web component
Can you convert a video to pure css?
Cascading Spy Sheets
Exploiting the Complexity of Modern CSS for Email and Browser Fingerprinting
weeklyfoo #69 / 2025-01-27csssecurity
Centering things: a solved problem?
CSS @function + CSS if() = 🤯
This post is about an upcoming CSS feature. You can’t use it … yet.
weeklyfoo #73 / 2025-02-24css
CSS Almanac
CSS finally adds vertical centering in 2024
One of the most challenging programming skills is becoming a one-liner ;)
weeklyfoo #49 / 2024-09-09css
CSS for printing to paper
Maybe an edge case, but get some insights how to style a webpage for printing.
weeklyfoo #23 / 2024-03-11cssprinting
CSS Grid Areas
A fresh look at the CSS grid template areas and how to take advantage of its full potential today.
weeklyfoo #43 / 2024-07-29css
CSS Hooks: A new way to style your React apps
CSS is fun again
CSS Masonry & CSS Grid
CSS One-Liners to Improve (Almost) Every Project
A collection of simple one-line CSS solutions to add little improvements to any web page.
weeklyfoo #41 / 2024-07-14css
CSS Selectors: A Visual Guide
CSS Wishlist 2025
CSS Wrapped 2024
Chrome and CSS in 2024 journeyed through the forest, over the mountains, and across the seas…
weeklyfoo #62 / 2024-12-09css
Designing better target sizes
An interactive guide that is all about enhancing the target size area with CSS.
weeklyfoo #16 / 2024-01-22css
Easy vertical alignment without flexbox
ecss
Avoiding common styling problems is simple. And you only need efficient CSS. Nothing more.
weeklyfoo #24 / 2024-03-18css
ESLint now officially supports linting of CSS
Taking our next step towards providing a language-agnostic platform for source code linting.
weeklyfoo #73 / 2025-02-24eslintcss
Fit-to-Width Text: A New Technique
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.
weeklyfoo #60 / 2024-11-25css
Fun with Custom Cursors
Functions in CSS?!
Get The Screen Width & Height Without JavaScript
Gotchas in Naming CSS View Transitions
I’m playing with making cross-document view transitions work on this blog.
weeklyfoo #68 / 2025-01-19css
Help us choose the final syntax for Masonry in CSS
Help us invent CSS Grid Level 3, aka Masonry layout
How Bear does analytics with CSS
How To Center a Div
Introducing StyleX
StyleX takes the developer experience of CSS-in-JS libraries and uses compile-time tooling to bridge it with the performance and scalability of static CSS.
weeklyfoo #10 / 2023-12-13reactcss
Introducing the CSS anchor positioning API
Minimal CSS-only blurry image placeholders
Here’s a CSS technique that produces blurry image placeholders (LQIPs) without cluttering up your markup — Only a single custom property needed!
weeklyfoo #79 / 2025-04-07css
My Modern CSS Reset
New Magic For Animations in CSS
Next.js exploring Lightning CSS
Printing music with CSS Grid
Results of State of CSS 2024
Revisiting CSS Multi-Column Layout
Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layout module.
weeklyfoo #70 / 2025-02-03css
Scrollbar styling
So you think you know box shadows?
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.
weeklyfoo #50 / 2024-09-16css
Tailwind CSS v4.0 Beta
Preview what’s coming in the next version of Tailwind CSS.
weeklyfoo #60 / 2024-11-25tailwindcss
The Frontend Challenge: bananas are the superior fruit
The Gap
The select element can now be customized with CSS
From Chrome 135, web developers and designers can finally unite on an accessible, standardized and CSS styleable select element on the web.
weeklyfoo #78 / 2025-03-31csschrome
The Valley of Code
Three modern CSS properties your website must have
Let’s explore three lesser-known CSS secrets that can help you fixing some UI problems on your website.
weeklyfoo #12 / 2023-12-24css
Top Pens of 2024
transparent borders
Using & Styling the Details Element
You can find the details element all over the web these days. We were excited about it when it first dropped and toyed with using it as a menu back in 2019 (but probably don’t) among many other experiments.
weeklyfoo #75 / 2025-03-10css