Inspired by NES.css

Kate Rose Morley:

A tree view (collapsible list) can be created using only html and css, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

TIL!

KBall interviews CSS instructor & YouTuber extraordinaire Kevin Powell in a wide ranging discussion about CSS and how to learn it - what to start with, what to ignore, and various topics in between.

When choosing between pixels and rems in CSS, you should almost always use rems. It’s a simple rule to follow. This article explains why.

Jake Lazaroff spent the last few months learning Tailwind with an open mind and he’s ready to share his opinion of the popular CSS framework:

Tailwind is commonly described as “utility classes”, but that’s a bit of an understatement. It’s essentially a small language you write in the class attributes of your HTML that compiles to a combination of CSS rules and selectors — an abstraction over CSS. But all abstractions leak, and Tailwind is very leaky.

When an abstraction leaks, it means you still have to be aware of (and sometimes deeply so) the underlying layer that’s being abstracted. In this case, Jake is saying that you still need to know CSS to use Tailwind and lays out a few scenarios in which this is the case.

This might be unfair to Tailwind. To my knowledge, the team has never promoted it as a CSS replacement. At its core, it really is just a set of class names that apply styles. But even after working with it for months, there’s still a mental translation layer between “Tailwind CSS” and “real CSS”.

Estelle Weyl has been building the web since 1999 and documenting it since 2007. Today she joins Amal for a loooong and deeeep conversation about new and !important features of CSS & HTML. Sit down, strap in, and prepare to be schooled!

Now that we’re out of the ‘dark times’ where CSS was so limited that we spent countless hours developing hacks, tricks, and workarounds… Sacha Greif wonders if the pendulum has swung the other way:

we are now faced with an embarrassment of CSS riches, and it can be hard to catch up. CSS Grid started being supported in major browsers almost five years ago, yet I still check a reference every time I use it. And as cool as subgrid seems, I’ve yet to even try it out.

Perhaps CSS is even starting to reach over into areas best handled by HTML or JavaScript?

In CSS, we’ve been encoding colors with rgb() or hex (mostly for historical reasons). However, the new CSS Color 4 specification adds many better ways of declaring colors in CSS. Of these, oklch() is the most interesting one—this article explains why.

Nick & Amelia welcome the co-authors of Tiny CSS Projects to discuss their awesome new (and still in-progress) Manning book all about CSS!

Use code podjsparty20 when checking out to save 40% (good for all products in all formats!) and join the JS Party community chat for a chance to win a free ebook copy!

Sacha Greif gets out his crystal ball and tries to anticipate the future CSS trends (as well as some far-fetched and futuristic CSS features that might one day make their way to the browser) based on his learnings from running the State of CSS survey (go take it!)

This is a great starter snippet for any web page:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

The linked post explains the why behind these rules and expands with a 100 byte alternative and the comments have a bunch of variants and conversation about each specific rule.

Dave Rupert brainstorms some new CSS organization acronyms.

I’m not anti-BEM nor anti-roboclasses, but as we enter a new era for CSS I think we have an opportunity to rethink best practices around architecting CSS. Before we get lost rethinking the wheel, let’s hold on to some good principles from the past decade or so:

• We want to author in components
• We generally want low-specificity to avoid collisions
• We want a bucket of global utility classes/variables for ad-hoc composition or customizations

With those principles, let’s dive into some CSS architecture alternatives.

He goes on to describe CUBE, HECS, WILS, GPC, and other systems that haven’t even been named yet 😆

This was my favorite moment from our episode with Chris Coyier. I asked him what’s interesting in the frontend world these days and Chris went off for almost five minutes. His enthusiasm is contagious!

This course from the folks at web.dev targets beginners and advanced developers alike.

You’ll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

System.css is a CSS library for building interfaces that resemble Apple’s System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.

Episode 500!!! And it has been a journey! Nearly 13 years ago we started this podcast and as of today (this episode) we’ve officially shipped our 500th episode. As a companion to this episode, Jerod and Adam shipped a special Backstage episode where they reflect on 500 episodes. And…not only has it been a journey for us, but it’s also been a journey for our good friend Chris Coyier and CSS-Tricks — which he grew from his personal blog to a massively popular contributor driven model, complete with an editor-in-chief, a wide array of influential contributors, and advertisers to help fund the way. The news, of course, is that CSS-Tricks was recently acquired by DigitalOcean in March of 2022. We get into all the details of this deal, his journey, and the legacy of CSS-Tricks.

What’s this? A Frontend Feud! The ShopTalk guys return to defend their championship over Syntax against new contenders: Una and Adam from The CSS Podcast!

Robb Owen:

Why let JS have all the fun? With mix-blend-mode finally gaining wide browser-support, we now have access to many of most common shading techniques in CSS. With some choice images and a bit of careful layering it’s possible to build some surprisingly high-quality effects without the need for introducing any JS dependencies.

If you’ve ever used Photoshop’s Blend Modes… you can basically do that in CSS now. So cool! Check out Robb’s entire article. He includes a lot of great examples.

And if you like Alpine, there’s a companion collection of snippets that you can copy/paste into your project.

Jen Looper from Web Dev for Beginners and Front-end Foxes joins Jerod and Ali to discuss the exciting (but also intimidating) prospect of getting in to web development in 2022! Where should you start? What technologies should you focus on? Is it better to go all-in on a framework or stick with the fundamentals? Stuff like that!

CSS co-designer Steven Pemberton, on Twitter:

!important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it.

Anything else is probably misuse, and a sign you may not understand the cascade properly.

Chris does a great job answering what will surely be the most common question about this acquisition in his announcement post:

1. What happens to CSS-Tricks?
2. Will you still be running CSS-Tricks?
3. Why now?

The amount of value this team has given to the web world over the years is immeasurable.

I sincerely hope DigitalOcean turns out to be a worthy new steward of this precious resource and the site’s best years are ahead of it. 🤞

Almond.CSS helps in two ways: it normalizes the CSS styles to provide similar experience cross-browser, and it spices things a little by adding custom styles (that can be personalized!)

Use the different HTML5 semantic tags on your website, include the library in your project, and let CSS and the browser work their magic. Just combine your HTML and Almond CSS (no JavaScript needed.)

Demo here. Looks like a great starter for simple side projects and the like.

Jim Nielsen:

It’s easy, in hindsight, to critique things CSS got wrong or should’ve prioritized differently. But I want to take a moment to marvel at the things they got right.

It’s incredibly difficult to build APIs that solve today’s problems while anticipating an unknown future. In some cases, I think the original CSS authors did precisely that.

Anybody who’s had to design/implement HTML emails knows how utterly painful it is. With Mailwind you get to do it the same way you’d build a site with Tailwind and then run:

mailwind --input-html email.html --output-css style.css
# or for inline styles
mailwind --input-html email.html --output-html email-inlined.html

And you’re off to the outbox! 📤