CSS Modules (The Native Ones)

August 2nd, 2021

They are actually called “CSS Module Scripts” and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. Native CSS Modules are a part of ES Modules (a lot like JSON modules we recently covered): // Regular…

:focus-visible in WebKit

July 9th, 2021

This is a nice update from Manuel Rego Casasnovas. Igalia has this idea to sort of crowd-source important web platform features that need to get worked on (that’s the sort of work they do). They call it Open Prioritization. The “winner” of that (the one with the most-pledged dollars) is what they’ll do. That turned…

CSS for Web Vitals

July 1st, 2021

The marketing for Core Web Vitals (CWV) has been a massive success. I guess that’s what happens when the world’s dominant search engine tells people that something’s going to be an SEO factor. Ya know what language can play a huge role in those CWV scores? I’ll wait five minutes for you to think of…

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….