CSS is a Strongly Typed Language

April 13th, 2021

One of the ways you can classify a programming language is by how strongly or weakly typed it is. Here, “typed” means if variables are known at compile time. An example of this would be a scenario where an integer (1) is added to a string containing an integer (“1”): result = 1 + “1”;…

Tools for Auditing CSS

March 29th, 2021

Auditing CSS is not a common task in a developer’s everyday life, but sometimes you just have to do it. Maybe it’s part of a performance review to identify critical CSS and reduce unused selectors. Perhaps is part of the effort to improve accessibility where all the colors used in the codebase evaluated for contrast….

Want to Write a Hover Effect With Inline CSS? Use CSS Variables.

March 26th, 2021

The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that color in the CMS when they’re writing the post. Just a super-light layer of art direction. To make that color show up on the…

Long Hover

March 16th, 2021

I had a very embarrassing CSS moment the other day. I was working on the front-end code of a design that had a narrow sidebar of icons. There isn’t enough room there to show text of what the icons are, so the idea is that we’ll use accessible (but visually hidden, by default) text that…

How to Map Mouse Position in CSS

March 1st, 2021

Let’s look at how to get the user’s mouse position and map it into CSS custom properties: –positionX and –positionY. We could do this in JavaScript. If we did, we could do things like make make an element draggable or move a background. But actually, we can still do similar things, but not use any…

CSS Border Font

February 28th, 2021

Every letter in this “font” by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic syntax like border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; which rounds just the top of an element with a certain chillness that works here. Plus, using…

A DRY Approach to Color Themes in CSS

February 24th, 2021

The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a proper solution. What we want is to avoid redefining—and thus repeating—custom properties when switching between…

Clipping Scrollable Areas On The inline-start Side

February 19th, 2021

On a default left-to-right web page, “hanging” an element off the right side of the page (e.g. position: absolute; right: -100px;) triggers a horizontal scrollbar that scrolls as far as needed to make that whole element visible. But if you hang an element on the left side of the page, it’s just hidden (no scrollbar…

Things You Can Do With CSS Today

February 17th, 2021

Some nice coverage from Andy about CSS things that are truly new. If you haven’t looked at new things in CSS in, say, a year, I’d bet pretty much all of this will be new to you. A lot of it is cutting-edge enough that you might not be able to get it into projects…

Nested Media Queries

February 9th, 2021

Using media queries in CSS as part of responsive websites is bread and butter stuff to today’s front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well. I spent a few months experimenting with a dozen different approaches to media queries in Sass and…