Menu

CSS

The Fastest Google Fonts

May 22nd, 2020

When you use font-display: swap;, which Google Fonts does when you use the default &display=swap part of the URL, you’re already saying, “I’m cool with FOUT,” which is another way of saying web text is displayed right away, and when the web font is ready, “swap” to it. There is already an async nature to…

Flexbox-like “just put elements in a row” with CSS grid

May 21st, 2020

It occurred to me while we were talking about flexbox and gap that one reason we sometimes reach for flexbox is to chuck some boxes in a row and space them out a little. My brain still reaches for flexbox in that situation, and with gap, it probably will continue to do so. It’s worth…

First Steps into a Possible CSS Masonry Layout

May 18th, 2020

It’s not at the level of demand as, say, container queries, but being able to make “masonry” layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of a layout where unevenly-sized elements are played out in ragged rows. Sorta like a typical brick wall turned…

CSS fix for 100vh in mobile WebKit

May 15th, 2020

A surprisingly common response when asking people about things they’d fix about anything in CSS is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t…

How to Tame Line Height in CSS

May 15th, 2020

In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead between lines of type. Leading and line-height, however similar,…

Using CSS Masks to Create Jagged Edges

May 12th, 2020

I was working on a project that had this neat jagged edge along the bottom of a banner image. Looking sharp… in more ways than one. It’s something that made me think for a second and I learned something in the process! I thought I’d write up how I approached it so you can use…

min(), max(), and clamp() are CSS magic!

May 11th, 2020

Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with font-size usage, but they are just functions, so they can be used anywhere you’d use a number, like a length. Sometimes pretty basic usage allows for tighter code,…

Turning a Fixed-Size Object into a Responsive Element

May 11th, 2020

I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. I found a great library called marvelapp/devices.css. The library implemented the device…

Chromium lands Flexbox gap

May 8th, 2020

I mentioned this the other day via Michelle Barker’s coverage, but here I’ll link to the official announcement. The main thing is that we’ll be getting gap with flexbox, which means: .flex-parent { display: flex; gap: 1rem; } .flex-child { flex: 1; } That’s excellent, as putting space in between flex items has been tough…

A Complete Guide to CSS Functions

May 4th, 2020

Introduction In programming, functions are a named portion of code that performs a specific task. An example of this could be a function written in JavaScript called sayWoof(): function sayWoof() {   console.log(“Woof!”); } We can use this function later in our code, after we have defined our desired behavior. For this example, any time…