Menu

CSS

When is it “Right” to Reach for contain and will-change in CSS?

November 26th, 2021

I’ve got some blind spots in CSS-related performance things. One example is the will-change property. It’s a good name. You’re telling the browser some particular property (or the scroll-position or content) uh, will, change: .el { will-change: opacity; } .el.additional-hard-to-know-state { opacity: 0; } But is that important to do? I don’t know. The point,…

CSS-ing Candy Ghost Buttons

October 31st, 2021

Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and compact code… I came across these candy ghost buttons! They seemed like the perfect choice…

Exploring the CSS Paint API: Rounding Shapes

October 22nd, 2021

Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue!. Exploring the CSS Paint API series: Part 1: Image Fragmentation Effect Part 2: Blob Animation Part 3: Polygon Border Part 4: Rounding Shapes (you are here!) Here’s…

@supports selector()

October 19th, 2021

I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support as well. It looks like this: @supports selector(:nth-child(1 of .foo)) { } You just drop the…

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. pic.twitter.com/1AWCldyCwP — 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…