Let’s take a look at the 2nd :has() demo. We can make a grid for our content. Allow most cards to automatically fill a 1x1 area. And then use :has() to tell any card that has an image to instead take up a 2x2 area.
article:has(img) {
grid-column: span 2;
grid-row: span 2;
}
CSS scroll-snap is a classic CSS property; small, innocent looking API with huge potential. @argyleink showed us a whole bag of snappy tricks at #cssday
Full talk: https://t.co/GrUPIiA39U
Slides: https://t.co/g1FCdmnVpq
👀 You may have heard of container queries, but have you heard of ✨ style queries?✨
🎨 Style queries (also a part of the contain-level-3 spec) allow you to query for styles, not just sizes
✍🏼 I looked at some use cases & wrote up some early thoughts:
https://t.co/TTilRwpA25
#a11y reminder:
These are not valid:
<div aria-label="hello">
<span aria-label="hi">
div and span are generic containers that can only be labelled when they are assigned a meaningful ARIA role.
aria-label is prohibited on these elements. See: https://t.co/fEKOafnrU1
Blogged: "Why I don't miss React: a story about using the platform".
Some notes on my experience since leaving a React focused role to work on DevTools and how surprisingly pleasant it's been.
https://t.co/Ih1B92Rivc
CSS co-designer here.
!important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it.
Anything else is probably misuse, and a sign you may not understand the cascade properly.
Modern CSS can make a lot of impossible things possible, but it also simplifies some things as well.
One use case that I have on pretty much every project these days is setting up a container/wrapper width with min() and margin-inline.
CSS Cascade layers are coming to Chromium 99 (currently in Canary) & Firefox 97 (currently in Nightly)
So what are they & how do you use them? 👀
I made a quick video to show you:
https://t.co/Z9qUJrR9C7
Something that I’ve been curious about:
If you use a pot to boil water and that’s all you use it for, do you wash the pot when you’re done? 🤔
Okay, fight.
🔥 CSS Features to start learning, as I expect them to ship in all browsers in 2022:
1. Container Queries
2. Cascade Layers
3. Color Functions
4. Viewport Units
5. :has()
6. Overscroll Behaviour
7. Subgrid
8. Accent Color
9. Media Query Ranges