One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. <div class="span-12"></div> <!-- we want this for small screens --> <div class="span-6"></div> <!-- we want this for medium screens --> <div...

Ethan: I’ve been working with Aquent Gymnasium to produce a series of five short tutorial videos, which have been launching over the course of this past week. Since the last video just went live, I’m thrilled to share the whole list with you: • Introduction to using VoiceOver on macOS • Designing beautiful focus...

Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the issues I’ve encountered, how I go around them, and why...

Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most seemingly simple things. Working with wrapper elements is definitely on both those lists. Wrappers (or containers or whatever) are so common — especially when establishing...

Ya know, for a site called “CSS-Tricks” that I’ve run for well over a decade, it’s a little funny we’ve never done a book under that name. I’ve written a book about WordPress and SVG, but never CSS! Well, allow me to change that. I’ve been working on a “book” called The Greatest CSS Tricks Vol. I, as my attempt to stay...

Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM. Here’s the first trick: […] if the default CSS outline property doesn’t give you the visual effect you want [in WHCM] for focus states, there’s a very simple fix. Instead of overriding...

One of my forever-lessons here on CSS-Tricks is that having your own website and blogging on it is a good idea. It’s probably one of the best decisions I’ve ever made, as it’s been a direct source of fun, career development and, eventually, income. I always chuckle at little blogging is cool again declarations from the...

The other day, I was doom-scrolling Twitter and saw a delightful article titled “The Case for Fussy Breakfasts.” I love food — especially breakfast — and since the pandemic hit I’ve been using my breaks in between meetings (or, shh, sometimes in meetings) to make a full bacon, poached egg, vegetable plate. Suffice to say,...

This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the “three lines” thing you’re well familiar with), but then animate it in a way that is surprising and fun by controlling the SVG properties in CSS. CodePen Embed Fallback The trick is that the top and bottom...

When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016: Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns. Ahmad Shadeed wrote a post where...

This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to perfectly line up with those folds. The...

I just can’t stop opening excellent typography-related articles, which means I need to subject you to blog posts that round them up so I can clean up my open tabs. Vistaserve is “a grass-roots web hosting initiative hailing from Thornbury, Australia. Inspired by the quirky web of the 90s, we allow users to create home...

I’ve long been skeptical of quoting global browser usage percentages to justify their usage of browser features. It doesn’t matter what global usage of a browser is, other than nerdy cocktail party fodder. The usage that matters is what users on your site are using, and that can be wildly different from site to site. That...

The following is a guest post written by Carlos Schults. Being able to disable code in production is a power that many developers aren’t aware of. And that’s a shame. The ability to switch off some portions—or even complete features—of the codebase can dramatically improve the software development process by allowing best...

CSS still can’t animate to auto dimensions. .dropdown { transition: 0.2s; height: 0; } .dropdown.open { /* the height will change, but it won't animate. */ height: auto; } There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back. My mind always goes to this solution...