- Marcin Wichary made an incredible demo exploring "segmented type" as in, the kind you might see on a display like a microwave, but scaling up in complexity from there.
- "Datalegreya is a typeface which can interweave data curves with text."
- Airbnb commissions their own new font, Cereal (complete with hype video), and then talks about how they are rolling out usage. I wonder what the price tag is for work like this. Seems like it would be both incredibly high but no-brainer worth it for big brands that are big enough.
Hey CSS-Tricksters! 👋 We have a special long-form series we’re kicking off here totally dedicated to Gutenberg, a major change to the WordPress editor. I’ve invited a dynamic duo of authors to bring you this series, which will bring you up to speed on what Gutenberg is, what it can do for your site, and how you can actually develop for it.
Lea Verou with some extra super fancy CSS trickery. No way we could miss linking this one up!
One of the problems with responsive table solutions, at least the ones where you are using CSS to rejigger things, is that there is duplicated content somewhere. Either in CSS or HTML.
Lea finds two ways to prevent that. One of which uses
text-shadow to "duplicate" a copy of the text and move it into place. Another uses the Firefox-only
Another thing to remember: if you're forcing table elements to anything other than their natural display value (like block), make sure to use ARIA roles so they don't lose their accessibility usefulness.
CSS preprocessor variables and CSS custom properties (often referred to as "CSS variables") can do some of the same things, but are not the same.
Practical advice from Mike Riethmuller:
If it is alright to use static variables inside components, when should we use custom properties? Converting existing preprocessor variables to custom properties usually makes little sense. After all, the reason for custom properties is completely different. Custom properties make sense when we have CSS properties that change relative to a condition in the DOM — especially a dynamic condition such as
Jetpack is an official WordPress plugin directly from Automattic. It's an interesting plugin in that it doesn't just do *one thing* — it does a whole slew of things that enhance what your WordPress site can do. *Any* WordPress site, that is, and often with extremely little effort. Those easy win features Jesse Friedman calls light switch features, meaning you literally flip a switch in Jetpack's settings and start benefitting. I love that.
There are dozens of features in Jetpack, and I personally make use of most of them and see the benefit in all of them. Allow me to share with you five of my favorites and how they are actively used right here on this site. It's actually a bit hard to pick, so perhaps I'll do this again sometime!
Brad Frost thinks it's:
- Lack of portability
- Context Switching
- Flushing best practices down the toilet
In the spirit of good-ol-fashioned blog-and-response, here's:
I'd like to point out that "CSS-in-JS" is an umbrella term, and that there are lots of takes on actual implementations of this. It's possible to like one approach and not another.
My guess is we'll end up with a split down the middle as a best practice someday.
When we write styles, we will always make a choice. Is this a global style? Am I, on purpose, leaking this style across the entire site? Or, am I writing CSS that is specific to this component? CSS will be split in half between these two. Component-specific styles will be scoped and bundled with the component and used as needed.