Inline Styles as Classes (lol)

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

Useful and Useless Code Comments

Jim Nielsen: If somebody says a comment isn’t adding any value, I would ask: to whom? Personally, I’ve never liked the advice that writing obvious comments is bad practice—probably because I write obvious comments all the time. Jim showed off some examples of “code comments that are at the same l..

How I Used the WAAPI to Build an Animation Library

The Web Animations API lets us construct animations and control their playback with JavaScript. The API opens the browser’s animation engine to developers and was designed to underlie implementations of both CSS animations and transitions, leaving the door open to future animation effects. It is one..

Detect Unused Classes in… HTML

Usually, when “unused” comes up in conversation regarding CSS, it’s about removing chunks of CSS that are not used in your site or, at least, the styles not currently in use on a specific page. The minimal amount of CSS is best! I’ve written about how this is a hard problem in the past. In JavaScrip..

Media Queries in Times of @container

Max Böck took me up on my challenge to look through a codebase and see how many of the @media queries could ultimately become @container queries. I took the bait and had a look at some of my projects – and yes, most of what I use @media for today can probably be accomplished by @container at some p..

Just How Niche is Headless WordPress?

I wonder where headless WordPress will land. And by “headless” I mean only using the WordPress admin and building out the user-facing site through the WordPress REST API rather than the traditional WordPress theme structure. Is it… big? The future of WordPress? Or relatively niche? Where’s the dem..

Making Tables With Sticky Header and Footers Got a Bit Easier

It wasn’t long ago when I looked at sticky headers and footers in HTML s in the blog post A table with both a sticky header and a sticky first column. In it, I never used position: sticky on any , , or element, because even though Safari and Firefox could do that, Chrome co..

CSS-Tricks Chronicle XXXX

Just a little link roundup of some off-site stuff I’ve done recently. As I’m wont to do from time to time. DevJourney Podcast #151 Chris Coyier from ceramics to CSS-Tricks and CodePen‘ Chris took us from playing on his first C64 to his bachelor of arts in ceramics and back to web development. We..

Securing Your Website With Subresource Integrity

When you load a file from an external server, you’re trusting that the content you request is what you expect it to be. Since you don’t manage the server yourself, you’re relying on the security of yet another third party and increasing the attack surface. Trusting a third party is not inherently ba..

Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo?

There’s a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail. Look who’s got a little cameo in there: Perhaps the most noticeable thing there in Safari 15 on iOS is URL bar at the bottom! Dave was speculati..