OR 

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 Read article

favicon of http://css-tricks.com

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

favicon of http://css-tricks.com

Fluid Images in a Variable Proportion Layout

Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card: For now, let‘s say this image is not semantic content, but only decoration. That‘s a good use for background-image. And because in this context the image contains an object, we can‘t allow any parts to be cropped out when it‘s

favicon of http://css-tricks.com

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 Read article Refreshing Sidebar for 2020 The post Refreshing Sidebar for 2020 appeared first on CSS-Tricks.

favicon of http://css-tricks.com

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 Read a

favicon of http://css-tricks.com

When a Line Doesn‘t Break

We expect a line to break when the text on that line reaches the parent box boundaries. We see this every time we create a paragraph, just like this one. When the parent box doesn‘t have enough room for the next word in a line, it breaks it and moves down to the next line and repeats that process. Well, that‘s how it works when words are separated by spaces or other whitespace. As far as CSS goes, there are Read article When a Line

favicon of http://css-tricks.com

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

favicon of http://css-tricks.com

A Complete Guide to Dark Mode on the Web

‘Dark mode‘ is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface. The post A Complete Guide to Dark Mode on the Web appeared first on CSS-Tricks.

favicon of http://css-tricks.com

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

favicon of http://css-tricks.com

New in Chrome: CSS Overview

Here‘s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations even down to the total number of defined media queries. Again, this is an experimental feature. Not only does that mean it‘s still in progress, but it means you‘ll have to enable it to start using it in DevTools. Open up DevTools (Command+Option+ Read art

favicon of http://css-tricks.com

Five 5-minute Videos from Ethan on Design & Accessibility

Ethan: I‘ve been working withAquent Gymnasiumto 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 ca

favicon of http://css-tricks.com

Responsive Styling Using Attribute Selectors

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 class="span-4"/div!-- we want this for large screens -- It‘s common to use a prefix to target each breakpoint: div class="sm-span-12 md-span-6 lg-span-4"/div This works well until we

favicon of http://css-tricks.com