Helping build a better web. #CSS #JavaScript #FrontEnd #WebDev
Portland, ME
Joined January 2011
- Tweets8K
- Following64
- Followers2.2K
- Likes4.3K
Pinned Tweet
I snuck this little #CSS gem into a project stylesheet to help the team remember #accessibility. 😎 #WebDev
ALT Screenshot of a CSS rule for images that don't have an "alt" attribute
Matt Smith retweeted
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;
}
Matt Smith retweeted
CSS is becoming 🔥
I had to write so much JavaScript for snappy scrollbars and now it's just two lines of code...
Matt Smith retweeted
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/
Matt Smith retweeted
👀 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/
Matt Smith retweeted
my toxic trait is replacing flaky JS solutions with reliable CSS ones
ALT a github PR change graphic showing 4 lines added and 46 lines removed
Matt Smith retweeted
#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: rawgit.com/w3c/aria/master/#…
Matt Smith retweeted
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/work…
Matt Smith retweeted
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()
![label:has(> input[type="checkbox"]) {
display: inline-flex;
align-items: center;
gap: 1ch;
}](/pic/https%3A%2F%2Fpbs%2Etwimg%2Ecom%2Fmedia%2FFP9PNFJaUAA0PcP%2Ejpg%3Fname%3Dsmall%26format%3Dwebp)
ALT label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 1ch; }
Matt Smith retweeted
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.
Matt Smith retweeted
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.
ALT .old-container { width: 100%; max-width: 70rem; padding: 2rem; margin: 0 auto; } .modern-container { width: min(100% - 2rem, 70rem); margin-inline: auto; }
Matt Smith retweeted
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
ALT Screenshot of my video because it won't autoplay on here for some reason
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 retweeted
If you missed my talk yesterday, check out the article!
web.dev/new-responsive/
Matt Smith retweeted
🔥 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.
Matt Smith retweeted
Input focus combined with validation 👀
lab.hakim.se/focussss/
Matt Smith retweeted
🔖 A Complete Guide To Accessible Front-End Components.
– :focus styles
– autocomplete
– content sliders
– checkboxes
– data charts
– dark mode
– date pickers
– navigation
– modals
– radio buttons
– skip links
– SVGs
– tabs
– tables
– tooltips
smashingmagazine.com/2021/03…
ALT Accessible modals, an example.
ALT If it’s not a button, then if it’s a link, then it’s a link.
ALT Accessible data visualization