CSS-Tricks is joining the DigitalOcean community! We are so excited to be joining forces. Learn more about this change here. As a special welcome offer, enjoy $100 of free credit to try DigitalOcean on us.
An email newsletter with the most interesting news, ideas, fresh content, thoughts, and incredibly mature jokes from Team CSS-Tricks. This is your ticket to saying up to date with web dev.
[Robin]: Here’s the deal: I’m scared of Houdini. Not the illusionist famed for jumping off waterfalls and burying himself alive, but the newish set of APIs available in CSS. That’s why I so thoroughly enjoyed this piece by George Francis …
[Robin]: Not so long ago, David Jonathan Ross (whose newsletter you should subscribe to because he sends out a free font with each edition) wrote about how variable fonts are still, oddly enough, seen as an experimental font format …
[Robin]: 🤔 Is it :before or ::before? I always get a little confused when writing a pseudo-element like this…
.element:before { }
.element::before { }Spoilers: it’s ::before. Sorry to start this newsletter off with so much drama. …
[Robin]: I have a terrible confession to make: I still think in media queries. When I’m working on a design that requires changing the layout, I always turn to media queries to help me out. This isn’t a problem, and …
[Robin]: Chris just made The Greatest CSS Tricks Vol. I available via PDF and EPUB and wrote about the process. He walks through a few snags he hit along the way when programmatically creating the eBook version:
…All this book-writing
[Robin]: Last week we talked a bit about weird browsers and why I’m so gosh-darned excited for them. Well, this week I’ve been thinking a bit about weird tools for making websites like utopia.app:
…In its simplest form, you
[Robin]: “Perhaps for what we’re losing in browser engine diversity, we’ll gain in browser UI/UX diversity” Chris quipped the other day in a post all about Bonsai. It’s an interesting little browser that’s pretty different from the browsers that …
[Robin]: Jamstack Conf 2021 wrapped earlier this week and I’m slowly catching up on the videos from the event. There’s lots of good stuff in there, so make sure to bookmark that for later, but here are some quick …
[Robin]: Here’s my photo of the week: a picture from a 2015 blog post by Paul Irish of the Wikipedia team walking through an enormous printed version of their performance timeline:
As bananas as this might seem at first, …
[Robin]: Harry Roberts has been doing a ton of interesting work when it comes to the <head element and—no! stop yawning!—there’s good reason for that; it’s the place where all performance problems begin. Or, as Harry says in “Get Your …
[Robin]: Let’s start this week off with something odd and fun. I stumbled upon this interesting form pattern by Hakim El Hattab:
This is neat because I’ve never thought that a focus state could have flair and a personality—I’ve always …
⚛
[Robin]: One of the criticisms thrown at writing Atomic CSS is that it generates a ton of classes that your users don’t need. Let’s say you want to add some padding to the top of an element, like …
[Robin]: Everything on the web is a rectangle. No matter what element you choose or what CSS you write, under the hood you’re always filling up the page with squares and rectangles of various shapes and sizes. You can make …
[Robin]: I stumbled upon this nifty VS Code plugin called TabOut this week that lets you hit the tab key and jump between quotes in a line of code. It’s a brilliant plugin because I think it does precisely what …
😯
[Robin]: This week I’ve been thinking about page transitions on the web and this post from Chris earlier this year:
…We can technically build page transitions now, even without single-page-app architecture, but what I want are purpose-built APIs that
[Robin]: Let’s say you need some margin and padding utility classes. In Tailwind, for example, you’d write some HTML like this:
<div class="pt-6"...</divThis sets the padding-top CSS property to 6 in the scale. 1 is less …
[Robin]: Lately in the newsletter, we’ve written about neat things we’ll be able to do with CSS in the future. CSS nesting! Container queries! Query units! New pseudo-elements! All this is very exciting but I think we need to slow …
Nesting CSS classes is pretty handy. If you’re familiar with preprocessing languages like Sass and Less then you’re probably used to nesting like this:
.card {
.card-text {
font-size: 1em;
}
&.card-large {
padding: 2em;
}
body.home & .card-title Chris here, filling in for Robin, our usually weekly correspondent. And speaking of Robin, you should subscribe to his blog, as it’s a great personal blog, which he’s moving to Astro and writing about that as just one worthy …
[Robin]: Have you ever heard of CSS query units? They aren’t a thing in CSS just yet, but let me set the stage to explain exactly how they would be useful. I only stumbled across the idea because I bumped …
