Links
CSS or BS?
We show you a CSS property name. You tell us if it's real or if we made it up. That's it. It starts easy. It does not stay easy. The CSS spec has over 600 properties. Some of them sound made up. Some of our fakes sound terrifyingly real. Good luck.
Inverted themes with light-dark()
The goal was to make it so that when the browser switched from light/dark modes, themed elements would switch to their inverse theme. The trick I uncovered was setting the current theme as a CSS variable.
SVG Filters Guide: Getting Started with the Basics
While I firmly believe the best way to get started with SVG filters is to just start using SVG filters, I’d also like to provide this starter’s guide, the stuff I wish I had read while getting into all this.
Multi-stroke text effect in CSS
For different values of the
text-stroke-width, browsers will automatically draw outlines of the character, The larger you set the stroke width, the thicker the outline will get, while still maintain its original shape. The next step is to use different colors and put them in order.
The Intl API: The best browser API you're not using
Intlis built on one core idea: you have a type of data, and you want an easy way to format it in natural language. Whether you're formatting dates, numbers, currencies, lists, plurals, words, or sorted strings, the API shape stays similar.
Videos
5 CSS fouls that I see way too often
Kevin Powell shares five common CSS mistakes. Learn about avoiding useless declarations and overly prescriptive height settings. The video also covers refactoring, focus styles, and choosing between Flexbox and Grid.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.