Going forward, invalid selectors in a comma-separated chain will NOT invalidate the whole selector. But in older browsers, they DO.
/* dangerous! */
.menu:focus .submenu,
.menu:focus-within .submenu {
display: block;
}
https://css-tricks.com/one-invalid-pseudo-selector-equals-an-entire-ignored-selector/
Give Users Control: The Media Session API by @broods_
https://css-tricks.com/give-users-control-the-media-session-api/
HTTP Archive’s Annual State of the Web Report
https://css-tricks.com/http-archives-annual-state-of-the-web-report/
::marker is fantastic and now available in all the modern browsers.
@simevidas notes a favorite use-case (list markers matching size of headers):
https://css-tricks.com/almanac/selectors/m/marker/
https://jsbin.com/mogotoxazo/edit?html,css,output
RT Adam Argyle
✅ *fixed* conic gradient background
✅ svg masked
<button>
✅ light & dark mode
✅ clean markup
✅ beautiful & dynamic result (imo)
`background: conic-gradient(...) fixed;` 🎉
effect is like each icon is a window to a shared color dimension.. 🤓
</button>
You don't have to keep chasing the hype, says @HugoGiraudel. There is no rush, you're doing well.
https://css-tricks.com/there-is-no-normal/
Let’s Create a Lightweight Native Event Bus in JavaScript
https://css-tricks.com/lets-create-a-lightweight-native-event-bus-in-javascript/
Why I love Tailwind
https://css-tricks.com/why-i-love-tailwind/
Unconventional Stock Image Sources by @melchoyce
https://css-tricks.com/unconventional-stock-image-sources/
It's all relative, by @geoffreygraham
https://css-tricks.com/its-all-relative/
Optimize Images According to Network and Device Constraints in React
https://css-tricks.com/optimize-images-according-to-network-and-device-constraints-in-react/
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode
https://css-tricks.com/using-css-custom-properties-to-adjust-variable-font-weights-in-dark-mode/
2020 was not a good year for learning by @natalyathree
https://css-tricks.com/2020-was-not-a-good-year-for-learning/
RT Rick Viscomi
Re @argyleink Thanks Adam! I think you'll enjoy the ~75 pages of CSS insights excavated by @leaverou @svgeesus and @rachelandrew this year 😁
https://almanac.httparchive.org/en/2020/css
npm ruin dev by @adactio
https://css-tricks.com/npm-ruin-dev/
How to Create a Favicon That Changes Automatically by @melkon88
https://css-tricks.com/how-to-create-a-favicon-that-changes-automatically/
Very Extremely Practical CSS Art by @mirisuzanne
https://css-tricks.com/very-extremely-practical-css-art/
TypeScript & Relevance by @jake_albaugh
https://css-tricks.com/typescript-relevance/
RT Adam Argyle
💡 FYI 💡
DevTools has Guides for when you need to check alignment 🤓
⚙️ Settings
▹ Preferences
▹ Elements
✅ Show rulers
They draw guides for the margin, padding and border boxes! Even for pseudo elements!! (VisBug doesn't do that)
Pretty rad.
