The Thirteenth Fourth

Well boy howdy. The 13th birthday of CSS-Tricks has rolled around. A proper teenager now, howabouthat? I always take the opportunity to do a bit of a state of the union address at this time, so let’s get to it! Design Technically, we’re still on v17 of the site design. This was the first design that I hired first-class help to do, and I’m still loving it, so I haven’t had much of an itch to do massive changes to it. Although it is quite different¹ today than it was…

The Thirteenth Fourth

Well boy howdy. The 13th birthday of CSS-Tricks has rolled around. A proper teenager now, howabouthat? I always take the opportunity to do a bit of a state of the union address at this time, so let’s get to it! Design Technically, we’re still on v17 of the site design. This was the first design that I hired first-class help to do, and I’m still loving it, so I haven’t had much of an itch to do massive changes to it. Although it is quite different¹ today than it was…

Settling down in a Jamstack world

One of the things I like about Jamstack is that it’s just a philosophy. It’s not particularly prescriptive about how you go about it. To me, the only real requirement is that it’s based on static (CDN-backed) hosting. You can use whatever tooling you like. Those tools, though, tend to be somewhat new, and new sometimes comes with issues. Some pragmatism from Sean C Davis here: I have two problems with solving problems using the newest, best tool every time a problem arises. 1. It’s simply not productive. Introducing new processes…

Some Performance Links

Just had a couple of good performance links burning a hole in my pocket, so blogging them like a good little blogger. Web Performance Recipes With Puppeteer Puppeteer is an Node library for spinning up a copy of Chrome “headlessly” (i.e. no UI) and controlling it. People use it for stuff like taking a screenshot of a website or running integration tests. You can even run it in a Lambda. Another use case is running synthetic (i.e. not based on real-users) performance tests, like some of these new Web Core…

Refreshing Sidebar for 2020

The new design for Sidebar is lovely. I like how it goes even deeper with the sticky elements than the last design. But even more notably, Sacha Greif has been posting five links per day to Sidebar since 2012. That’s a remarkable achievement. Direct Link to Article — Permalink The post Refreshing Sidebar for 2020 appeared first on CSS-Tricks. Source: csstricks

How-to guide for creating edge-to-edge color bars that work with a grid

Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that’s otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop layout with a unique background color. Easy enough. But then say you want that background color to stretch to the right edge of the browser window even though the grid itself is width-constrained. Tricker. CodePen Embed Fallback Direct Link to Article — Permalink The post How-to guide for creating edge-to-edge…

Global and Component Style Settings with CSS Variables

The title of this Sara Soueidan article speaks to me. I’m a big fan of the idea that some CSS is best applied globally, and some CSS is best applied scoped to a component. I’m less interested in how that is done and more interested in just seeing that conceptual approach used in some fashion. Sara details an approach where components don’t have too much styling by default, but have CSS custom properties applied to them that are ready to take values should you choose to set them. For each…

Five 5-minute Videos from Ethan on Design & Accessibility

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 states• Flexible and accessible typesetting• Responsively designing with viewport units• Designing beautiful and accessible drop caps Five minutes is a real sweet spot for a how-to video. Ain’t no time to screw around. I loved every minute of these.…

Book: The Greatest CSS Tricks Vol. I

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 true to this site’s name! The big idea is to make it like a coffee-table book for CSS, where each chapter is totally independent and talks about one…

Quick Tips for High Contrast Mode

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 default browser focus styles with outline: none, make it transparent instead: outline 3px solid transparent. That will essentially do nothing outside of WHCM, but in WHCM, it will be a thick white border, which is…