System *Things

June 28th, 2021

I think we’re all largely aware of colors like this: color: OldLace; background: rebeccapurple; I guess you’d just call those “named colors” in CSS. Those aren’t the only kind of named colors there are though. Some of them are a bit more fluid. Jim Nielsen was blowin’ minds the other day when he blogged about…

Inline Styles as Classes

June 16th, 2021

If you’re abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box. I’ve revolutionized CSS. — Sam Thorogood (@samthor) June 10, 2021 OK lemme dig in and totally ruin the joke. First…

Should DevTools teach the CSS cascade?

May 21st, 2021

Stefan Judis, two days before I mouthed off about using (X, X, X, X) for talking about specificity, has a great blog post not only using that format, but advocating that browser DevTools should show us that value by selectors. I think that the above additions could help to educate developers about CSS tremendously. The…

Chapter 8: CSS

May 3rd, 2021

In June of 2006, web developers and designers from around the world came to London for the second annual @media conference. The first had been a huge success, and @media 2006 had even more promise. Its speaker lineup was pulled from some of the most exciting and energetic voices in the web design and browser…

Not Your Typical Horizontal Rules

April 16th, 2021

The default browser style for <hr> is so weird. It’s basically: border-style: inset; border-width: 1px; The default border-color is black, but the border doesn’t actually look black, because the inset border “adds a split tone to the line that makes the element appear slightly depressed.” If I kick up the border-width to 40px you can…

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…