🔖 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/comple…

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

her: “eat a bag of dicks” 🙄

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

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

🔥 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

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.

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 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.

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

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…

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: rawgit.com/w3c/aria/maste…

👀 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

CSS scroll-snap is a classic CSS property; small, innocent looking API with huge potential. Adam Argyle showed us a whole bag of snappy tricks at #cssday Full talk: youtu.be/34zcWFLCDIc Slides: oh-snap.netlify.app

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

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

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