[Chris]: Hey! Thanks for tuning in for another week of CSS-Tricks news! Future issues of this newsletter will be coming from the gang at DigitalOcean so if they look a smidge different, that’s why! Reminder! If you’d like to keep getting this newsletter going forward, you have to opt-in to that. 🙏
🎨 🔠 🤷♀️
COLRv1 Color Gradient Vector Fonts in Chrome 98:
Today, for most users, emojis are the only color fonts they see. Emojis typically appear on the web via the system emoji font, or by inserting images (which has its own complications, (editor’s note: lol, image of a “sad panda” here but I’d rather not deal with embedding it inline in a blockquote in an HTML email). Large file sizes especially for bitmap-based color fonts have made it difficult to use web fonts for emoji. By supporting COLRv1, we hope to see a proliferation of creative color font use on the web and beyond.
I’ve been pretty skeptical of color fonts. Seems weird to force specific colors of a font? And if the main point is single-glyph usage like emoji, why not just use a very simple just-put-<svg>-in-place method? I don’t love that this might encourage a new era of typically-problematic icon font usage. Still—It’s cool that any given glyph can use a whole bunch of colors, that’s new territory for fonts, and the idea that it enables alternate emoji systems is interesting. Here’s hoping people do it with performance, accessibility, and fallbacks in mind.
Low hanging fruit is low
Top Ten Most Common Web Accessibility Issues:
- Image alt text errors
- Not providing a visual indication of the current focus
- Failure to use proper labels
- Non-descriptive text for hyperlinks
- Link areas are too small
- Tables markup
- Improper use of heading elements
- Color contrast
- Embedding non-accessible documents
- Same descriptive text for different resources
Like Sudoku only you get paid for it
More traditional, general-purpose languages (like JavaScript) give us tools like Conditions (
if/then), Loops (for,while), Logical Gates (===,&&, etc.) and Variables. Those structures are named differently in CSS, their syntax is wildly different to better accommodate the specific use case of styling a document, and some of those simply weren’t available in CSS up until a few years ago.
CSS is all logic. Every single selector. It applies if it matches (or :not()) But the logic just keeps going from there. Even if it matches, does it win? If it wins, do all the declarations take effect or are there other things at play, like !important?
Maybe that’s why I love CSS so much, all the logic! I love logic puzzles!
Oh hey, there are even more obviously logical structures coming to CSS, if we can get them named right.
An excellent way to explain to some unfamiliar with the business of creating websites…
- $50 Websites – “DIY”
- $5,000 Websites – “Mom & Pop”
- $50,000 Websites – “Brochureware”
- $500,000 Websites – “Revenue Generator”
- $5,000,000 Websites – “Mission Critical”
Not exactly losing marketshare
WordPress: Where It’s Headed in 2022:
Here are three major areas the WordPress Performance Team is focused on:
• Performance (there is a team in place)
• Creation of a Theme to End All Themes (e.g. Full Site Editing)
• Headless WordPress (it’s already a thing)
I feel like WordPress really has a knack for seeing things that might cause them future grief and tackling them head on early enough that the grief never materializes.
CSS-Tricks
That’s right, there is new content starting to roll right on CSS-Tricks. Didn’t take the new editorial team long to get situated and pushing out great new stuff!
- Optimizing SVG Patterns to Their Smallest Size — Bence Szabó looks at how
<pattern>works in SVG and how you can be extra efficient with it. Make sure to check out the Collection of demos, all of which are extraordinarily small in file size, where a raster alternative would likely be many, many orders of magnitude larger in size. - Write HTML, the HTML Way (Not the XHTML Way) — Jens Oliver Meiert shows us that it’s very likely we have some HTML-writing habits that are left over from they bygone era of XHTML, and if we switch, it’s worth some micro-optimization bonus points.
- 6 Useful Bookmarklets to Boost Web Development — Daniel Schwarz shares some ideas for one-click in-browser scripts that do useful things. Don’t write it off as clickbait, these are hand-authored by Daniel and might trigger some similar ideas for writing some yourself.
Don’t forget to re opt-in to this newsletter if you want to keep getting it, and keep in mind that DigitalOcean is offering $100 in credit, which should be awfully useful for the next server you need to spin up.
Lemme just leave you with this fun one. Hakim built this funny little slider (literally a <input type="range">) where you cannot slide to the end of it, it just keeps growing! I commented on it and he replied he thinks this one is even sillier (goes both ways) and I think he’s right.
