Helping build a better web. #CSS #JavaScript #FrontEnd #WebDev
Joined January 2011
- Tweets 8,038
- Following 64
- Followers 2,169
- Likes 4,282
362 Photos and videos
Pinned Tweet
15 Nov 2017
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
112
2,228
5,797
Matt Smith retweeted
23 Aug 2022
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;
}
12
83
707
Matt Smith retweeted
18 Aug 2022
CSS is becoming π₯
I had to write so much JavaScript for snappy scrollbars and now it's just two lines of code...
48
672
4,288
Matt Smith retweeted
4 Aug 2022
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/
6
75
405
Matt Smith retweeted
27 Jun 2022
π 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/
6
67
285
Matt Smith retweeted
20 May 2022
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
12
7
339
Matt Smith retweeted
21 May 2022
#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/#β¦
6
65
334
Matt Smith retweeted
3 May 2022
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β¦
11
59
296
Matt Smith retweeted
10 Apr 2022
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;
}](https://venexa.site/media/FP9PNFJaUAA0PcP.jpg)
ALT label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 1ch; }
10
86
742
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.
104
560
2,919
Matt Smith retweeted
9 Mar 2022
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; }
32
359
2,459
Matt Smith retweeted
14 Jan 2022
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
21
128
652
13 Feb 2022
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.
1
Matt Smith retweeted
8 Feb 2018
ALT Valentine's Day card that says "You are the CSS to my HTML"
1
3
15
Matt Smith retweeted
19 May 2021
If you missed my talk yesterday, check out the article!
web.dev/new-responsive/
2
34
167
π₯ 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
12
297
1,449
21 Sep 2021
When you think about it, all of the reasons Corey Hart lists for wearing sunglasses at night seem pretty legit.
3
Matt Smith retweeted
14 Sep 2021
Input focus combined with validation π
lab.hakim.se/focussss/
64
473
5,041
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
8
409
1,419