| Website | https://css-tricks.com |
| https://twitter.com/css | |
| Everything | * { box-sizing: border-box; } |
If you've been on the fence about
@piccalilli's JavaScript for Everyone course, first off: be like Nike and just do it.
We've published an excerpt from it about destructuring by none other than
@wil.to to give you just a taste.
https://css-tricks.com/javascript-for-everyone-destructuring/
For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve missed and new CSS that you don’t want to miss. This includes random(), random-item(), folded corners using clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning in general, DOOM in CSS, the customizable select element, :open, scroll-triggered animations, the toolbar element, and somehow, more.
For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve missed and new CSS that you don’t want to miss. This includes random(), random-item(), folded corners using clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning in general, DOOM in CSS, customizable , :open, scroll-triggered animations, , and somehow, more.
Curious about custom <select>?
I wrote about some of my recent demos over at @csstricks!
Take a look ✨ https://css-tricks.com/abusing-customizable-selects/
A few wild examples of the customizable select have been floating around. Here are a few more from @patrickbrosset that push the envelope.
Aren't z-index values one of those things we all sorta struggle with? How we choose them, how we manage them, how we balance the stacking contexts, etc.
@amit_sheen
has a great way to approach it... all around tokens for intentional intentional layers.
A really good look at the Popover and Dialog APIs... and what makes them different.
https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/
Choosing between Popover API and Dialog API is difficult because they seem to do the same job, but they don’t! After a bit lots of research, I discovered that the Popover API and Dialog API are wildly different in terms of accessibility and we'll go over that in this article.
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten your seatbelts!
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue of What’s !important that’s prrrretty jam-packed. The web community had a lot to say, it seems, so fasten your seatbelts!
TIL: We can center an absolutely positioned element with justify-self:
.element {
position: absolute;
place-self: center;
inset: 0;
}
Juan Diego explains it nicely here:
https://css-tricks.com/yet-another-way-to-center-an-absolute-element/
Lee Meyer's sane, thoroughly reported, and well-grokked explanation of the recent CVE-2026-2441 vulnerability that was labeled a "CSS exploit" that "allowed a remote attacker to execute arbitrary code inside a sandbox via a crafted HTML page."
SVG or raster? The short answer to that question is: there’s almost no difference at all if you are working on something very small and specific.
But it's more nuanced than that, and Mariana Beldi has all the nerdy details.
https://css-tricks.com/loading-smarter-svg-vs-raster-loaders-in-modern-web-design/
Patrick Brosset
