From the blog

✻ In Things to Watch Out for When Working with CSS 3D Ana Tudor...well, actually I suppose the title explains it all. Never mind. The important thing to note is that 3D geometry and rendering contexts probably aren’t a big part of how most of us write CSS on a day-to-day basis. So this post is excellent for making us rethink what CSS is truly capable of.

✻ Ryan Christiani writes in to discuss Template Literals, a relatively new feature in JavaScript which allows developers to do really neat things with strings. So before we’d write a string like this:

var string = "Today is Saturday";

Instead, we can now write a template literal like this:

var string = `Today is Saturday`;

By doing so, we get a bunch of nice features, like easy multi-line strings and easy insertion of variables. Ryan explains in great detail in the post. Nicolás Bevacqua has even said they are strictly better.

✻ Next up, Geoff Graham wrote about a few methods to control spacing in web typography. Typographers have a whole bunch of tools to make the text more readable, from changing the word spacing and toggling kerning off to changing subpixel rendering. 

✻ Chris shares what apps he uses in Dock Show & Tell. Be sure to check out the comments on this one, there’s some useful apps in there that readers have told us about.

✻ Next up, Chris digs into System Fonts in SVG, where you can set the font-family attribute of a text element:

If the OS uses "San Francisco" in the UI, the font-stack should display San Francisco. If the OS uses Roboto, so it shall be. The actual font stack to do this is fairly thick. But that's the point, just list a bunch of fonts in the order you want to use them and CSS will fall down the stack until it finds one it has.

Accessible SVGs in High Contrast Mode by Eric Bailey explores methods to ensure that users can view our content, even under the most challenging conditions. Eric argues that:

...making accommodations for low vision ties into "true" responsive design. More than just making the design work on a phone, it ensures that the content of your site works on the widest possible range of devices and situations.

In addition to all the great benefits, there are also plenty of concrete gains to be had by embracing accessibility. That’s not even counting the warm fuzzies you’ll feel knowing you’re helping people!

What we’ve been reading, listening and watching

Max Beier has made a repo of text-spinners using a clever CSS trick. Each "icon" is really a pseudo element that has an :after pseudo element. That element has a content string and in a @keyframes animation we can push along each item in that string. Chris isolated an example here:

✻ ✻ ✻

Choreographer.js by Christine Cha is a JS library to “take care of complex CSS animations.” But Chris mentioned that: 

Seems to me it's not so much for helping build complex CSS animations, but for doing animations through CSS that you can't otherwise do, because you can't get things like mouse or scroll position in CSS.

Either way, this is pretty darn cool:
✻ ✻ ✻
And Philip Walton wrote about polyfills:

New JavaScript and HTML features are being introduced all the time that make our lives as developers easier.

In many cases, these new features are so helpful we choose to use them on production websites before they’re fully implemented in all browsers. To not break the experience for users on older browsers, we of course include polyfills for any not-fully-supported features.

The problem with this approach is it prioritizes developer convenience over user experience, and it unnecessarily penalizes users on modern browsers by forcing them to download a lot of code they don’t need.

What have you learnt this week?

Robin Rendle: Do you remember the first time you opened Google Maps? The first time when the interface zoomed out and you gasped as it revealed your hometown on the globe as a tiny blip? Did you smile when you were then thrown back down towards the earth, back onto the street where you grew up and you could see your family’s car in the driveway? 

It was a shocking revelation for me; the browser, almost overnight, had changed from a series of hyperlinked documents to a wildly intelligent and complex operating system.

I only mention this because I had the same feeling when, a few months ago, I was introduced to Figma. It’s a design tool that’s completely based in the browser and it has a number of exciting features for designers. My favourite is Multiplayer, where you can invite other folks into the doc you’re working on and see their changes live as they make them.

This isn’t an ad in disguise or anything, I just wanted to think about that rare feeling I get when suddenly I recognise the browser is capable of so much more than I originally believed. Every once in a while there’s a new feature or app or site that pushes the technologically boundary by a single pixel, and each month we get to contribute to that nudge.

Every nudge is an experiment, a push to make the web a weird and vibrant place. But it’s important to note that, no matter how small, each nudge counts.

Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list