| Website | https://css-tricks.com |
| https://twitter.com/css | |
| Everything | * { box-sizing: border-box; } |
Short n’ sweet but ever so neat, this issue of What’s !important covers light/dark favicons, @mixin, anchor-interpolated morphing, object-view-box, new web features, and more.
Contact forms and CRM integration is fairly easy, right? Capture data and send. It's not always as simple as that, though, especially when there are business requirements that rely on that data.
https://css-tricks.com/form-automation-tips-for-happier-user-and-clients/
That gap between "the form works" and "the business works" is something we don't really tend to discuss much as front-enders. We focus a great deal on user experience, validation methods, and accessibility, yet we overlook what the data does once it leaves our control
No spicy takes here, just genuine interest and notes on whatever the heck "Generative UI" is supposed to be.
So, corner-shape can be animated. Notice the added sprinkle of color-contrast().
https://css-tricks.com/experimenting-with-scroll-driven-corner-shape-animations/
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.
Patrick Brosset
