Let’s start this week’s newsletter with conic gradients: they’re super neat! And they’re coming to a browser near you! Available in Chrome and Safari today (coming to Firefox soon, and also polyfillable), they’re an interesting addition to what’s possible with CSS these days.
The idea is that we can make gradients in a way that we haven’t been able to before and this opens us up to a bunch of interesting design options. Not so long ago Geoff wrote about how to use them and showed how we can make the following design now with just a single line of CSS:
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
Just like we can create hard color stops with other types of gradients (e.g. how we can make stripes with
linear-gradient) we can do the same with conic-gradient. That makes pie charts a pretty solid use case:
But of course, you can get weird too.
Next up, here’s an impressive bit of CSS trickery from Ben Evans where he’s drawn a beautiful landscape with nothing but pure CSS. That sunflare technique is particularly lovely, and the reflection on the water, too!
Laura Schenck has some thoughts on how we write CSS and why so many folks struggle with the language:
The problem is…unless you are “a CSS person” this understanding of specificity and its impact on the future of the code-base is somewhat specialized knowledge. Should everyone who writes CSS be expected to understand these details? Maybe, but the more experienced I become in all kinds of development, I’m starting to think that’s an unrealistic expectation given how much other stuff we have to know as developers.
I also made a few notes about why CSS is frustrating and how writing CSS is sort of like designing a book:
What we’re seeing on screen and what the final product will become are two very different things. We need to constantly remind ourselves that there are invisible edge cases, problems that in this context, on this screen, are made utterly invisible to us. And the only way to combat that is to change the context; to always be looking at our websites from multiple angles, moving them about, shaking them up. Whether that happens to be a bad connection, a phone, a screen reader, or a lo-res screen.
I really like Laura’s conclusion to all this frustration though: we’re designing and building websites outside of the browser. When we’re writing CSS we’re doing it at one-step removed from Chrome or Firefox or Safari. And that makes a whole bunch of sense to me.
Una Kravets and Adam Argyle have just started a new podcast about CSS and the very first episode is all about the box model. That’s how elements are rendered on screen and how their margins, padding, height, and width are taken into consideration. Also, as Una mentions in the episode, it’s one of the reasons a lot of us tend to add
border: 1px solid red to our designs, so we can see all these boxes as we’re debugging a problem. (And how you’re better off using
outline instead because it doesn’t effect the box model.)
Brad Frost wrote about the
!default flag in Sass and how it can be used when making themes and preventing a whole bunch of unnecessary CSS from being rendered. If you’re working on a big codebase right now then this post could come in mighty handy for you.
Here’s a swell post on how to animate CSS width and height without the squish effect that’s often annoying. Rik Schennink writes:
heightCSS properties are (along with most other properties) not suitable for animation. They impact render performance too much.
We switched to the
transformproperty and animated our square on the GPU to greatly improve performance but ended up with some other limitations (squishy square corners).
By applying the 9-slice technique in a smart way we worked around some of these limitations to create an element that we can animate while not impacting performance.
Adrian Roselli argues that block links are a bad idea — those are the kind where you have a card with content inside and the link wraps the whole thing. The problem is an accessibility one and, instead, he reckons we should just wrap text within that card with a link.
This was a problem that my design systems team struggled with for quite a while. We wondered whether we should just have a
Read more link within a card instead of the whole thing being clickable. Thankfully Adrian’s argument is pretty dang compelling here.
In our coverage, Chris notes text selection is the other problem. If you solve the problem of the block link not reading out far too much content, you still the problem of not being able to properly select bits of text. Tough call, especially considering a larger tap target might be an accessibility win. Looks like there is a best-of-both-worlds possibility covered by Heydon.
And finally, on a completely unrelated note, the other day I found out about Glyphfinder. This is an app for Windows and macOS that allows you to quickly search for any glyph, emoji, or bit of punctuation and quickly copy/paste that into a separate app.
It’s already saved me a bit of time looking for particularly hard to find punctuation and so you might find it helpful. Oh, and also the site is rather lovely, too!
And it’s awesome. We’re talking about a complete overhaul of the dashboard, that not only includes better reporting and analytics, but the ability to customize it along with a new activity panel that makes finding orders easier than ever. Oh, and for those just starting out with WooCommerce: there’s an updated onboarding flow that helps you set your store up in a snap. As aways, WooCommerce is free, so there’s never been a better time to get your online store up and running.
Hey, you spending a bit more time at home?
Good, that’s what the world needs right now. Occupying our brains with interesting stuff might help us from going stir-crazy, too. Here’s some YouTube videos I’ve bookmarked recently: