Menu

CSS

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…

No-Comma Color Functions in CSS

May 4th, 2020

There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more clear. Before, every single color function actually needs two functions, one for transparency and one without, this eliminates that need and brings the syntax…

@property

April 25th, 2020

The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about! There is a draft spec and an “intent to ship” document. The code from that document shows: @property –my-property { syntax: “<color>”; initial-value: green; inherits: false; } That it’s the CSS exact-equivalent to…

How to Make a CSS-Only Carousel

April 24th, 2020

We mentioned a way to make a CSS-only carousel in a recent issue of the newsletter and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one. So, here’s what we’re making today: There’s no JavaScript here, whatsoever! No jQuery plugins. No trickiness. Just a…

Dark mode and variable fonts

April 23rd, 2020

Not so long ago, we wrote about dark mode in CSS and I’ve been thinking about how white text on a black background is pretty much always harder to read than black text on a white background. After thinking about this for a while, I realized that we can fix that problem by making the…

Accessible Font Sizing, Explained

April 23rd, 2020

The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web. But we know there’s such a thing as text that is too small to be legible, just as text that can be too large to consume. So, how can we…

Building a Scalable CSS Architecture With BEM and Utility Classes

April 21st, 2020

Maintaining a large-scale CSS project is hard. Over the years, we’ve witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals: Efficiency: we want to reduce the time spent thinking about how things should be done and increase the time doing…

The Contrast Triangle

April 20th, 2020

Chip Cullen: Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you’re working from have somebody copy, but…

Creating Playful Effects With CSS Text Shadows

April 20th, 2020

Let’s have a look at how we can use the CSS text-shadow property to create truly 3D-looking text. You might think of text-shadow as being able to apply blurred, the gradient-looking color behind the text, and you would be right! But just like box-shadow, you can control how blurred the shadow is, including taking it…