Matt Smith

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

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 is becoming 🔥 I had to write so much JavaScript for snappy scrollbars and now it's just two lines of code...

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: youtu.be/34zcWFLCDIc Slides: oh-snap.netlify.app

👀 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: una.im/style-queries/

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

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

#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: #generic" target="_blank" rel="nofollow noopener">rawgit.com/w3c/aria/maste…

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. jackfranklin.co.uk/blog/working-w…

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()

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: youtu.be/ilrPpSQJb3U

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.

A #WebDev's valentine. ❤️ codepen.io/AllThingsSmitt… #CSS #ValentinesDay

If you missed my talk yesterday, check out the article! web.dev/new-responsive/

🔥 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

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

Input focus combined with validation 👀 lab.hakim.se/focussss/

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

@michaelketzer @JoshWComeau 💡 Best is to wrap that in a @​supports(-webkit-touch-callout: none) feature query so that it only targets Safari on iOS. Reason: in some cases it can mess up things in Chromium.

her: “eat a bag of dicks” 🙄