Matt Smith

Helping build a better web. #CSS #JavaScript #FrontEnd #WebDev

[Matt Smith @AllThingsSmitty]

I snuck this little #CSS gem into a project stylesheet to help the team remember #accessibility. 😎 #WebDev

[Jen Simmons @jensimmons]

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;
}

[Minko Gechev @mgechev]

CSS is becoming 🔥

I had to write so much JavaScript for snappy scrollbars and now it's just two lines of code...

[CSS Day conference @CSSDayConf]

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

[Una 🇺🇦 @Una]

👀 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

[Matt Smith @AllThingsSmitty]

Taking a peek a someone’s #CSS and now I think I’ve been activated as the Winter Solider. 😳 #WebDev

[Rachel Leggett @rleggos]

my toxic trait is replacing flaky JS solutions with reliable CSS ones

[Sara Soueidan is on Bluesky @SaraSoueidan]

#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

[Jack Franklin @Jack_Franklin]

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

[Adam Argyle @argyleink]

teach a label element to give itself a nice layout upgrade when it's wrapping a checkbox

we :has()'nt seen nothing yet with :has()

[Steven Pemberton @[email protected] @stevenpemberton]

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.

[Kevin Powell @KevinJPowell]

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.

[Una 🇺🇦 @Una]

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

[Matt Smith @AllThingsSmitty]

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.

[Matt Smith @AllThingsSmitty]

A #WebDev's valentine. ❤️ https://t.co/g2RQB5taO4 #CSS #ValentinesDay

[Una 🇺🇦 @Una]

If you missed my talk yesterday, check out the article!

https://t.co/bGrn5KiRE7

[Bramus @bramus]

🔥 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

[Matt Smith @AllThingsSmitty]

When you think about it, all of the reasons Corey Hart lists for wearing sunglasses at night seem pretty legit.

[Hakim El Hattab @hakimel]

Input focus combined with validation 👀

https://t.co/56mvxCl6iI

[Matt Smith @AllThingsSmitty]

@bramus @michaelketzer @JoshWComeau I had been using @​supports (background: -webkit-named-image(i)), but that works, too.

[Matt Smith @AllThingsSmitty]

her: “eat a bag of dicks” 🙄