Modern CSS Solutions for Old CSS Problems

A series examining state of the art CSS technology.

Announcing Style Stage: A Community CSS Showcase

Challenge your web design skills while learning in public.

Learn How To Make a Website with Steph

A web development video course for beginners.

Apply Aspect Ratio Sizing to Images with CSS object-fit

The magic of an under-used CSS property.

The 3 CSS methods for adding element borders

It’s time to revive an old CSS property.

ButtonBuddy

Learn about and create button styles with accessible contrast.

Guide to advanced CSS selectors

Universal selector, attribute selector, and many others.

Word Wrap

A podcast about the life and work of developers in the 21st century.

SmolCSS

Minimal snippets for modern CSS layouts and components.

Quick Tips

Useful snippets and ideas for Eleventy projects.

“CSS architecture starts with accessible HTML.”

Developing for imperfect: Future proofing CSS styles

Things can break, but modern CSS provides solutions.

Modern CSS upgrades to improve accessibility

CSS accessibility tweaks for users across any device.

A primer on CSS Container Queries

What to expect from the long-awaited responsive components.

Generating ‘font-size’ CSS rules and creating a fluid type scale

Let’s take the mystery out of sizing type.

CSS Dev Roulette LIVE

Conversations about CSS, JavaScript, and accessibility.

When CSS isn’t enough

JavaScript requirements for accessible components.

“Browser defaults are mostly ok, actually. Few know this.”

“I’m not a CSS developer, I’m a code stylist.”

HTML Recipes

A collection of HTML snippets for a variety of common scenarios.

Practical uses of CSS math functions: calc, clamp, min, max

Syntax, demos, familiar and unfamiliar use cases for each function.

“At the end of the day, CSS is just painting, stacking, and nudging boxes.”

A guide to CSS debugging

Ways to figure out how to fix unexpected layout results.

“For Halloween, I’m going as a link disguised as a button.”

12 Days of Web 2021

A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.

“CSS and JavaScript should work in harmony to produce accessible experiences. When you don’t understand what CSS offers you, your JavaScript ends up overengineered.”

CSS animation

From the best-supported options to the most cutting-edge.

“If you’re a maker of the web, consider your New Year’s resolution to be making usable, accessible, performant sites/applications.”

Getting started with CSS cascade layers

An incoming method to orchestrate the “C” in CSS.

CSS scroll snap slide deck that supports live coding

Live editing of CSS demos with a responsive and shareable slide deck.

Contextual spacing for intrinsic web design

The user’s browsing environment is unpredictable, but CSS can help in many ways.

“Psst, users don’t care whether the space is 24px or 36px, they just want a readable, usable experience.”

“Your periodic reminder that accessible web interfaces start with semantic HTML.”

12 Days of Web 2022

A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.

Level up your CSS skills with the :has() selector

How you can create advanced CSS selectors with :has().

CSS container query units and fluid typography

New ways to create dynamically calculated typography rules.

SupportsCSS

Feature detection for modern CSS, inspired by the legacy of Modernizr.

Shipping resilient CSS components

Container queries empower us to build reusable components.

Modern CSS for dynamic component-based architecture

Cutting-edge techniques to craft scalable, future-friendly web projects.

“Kids these days don’t know we couldn’t always rely on transparency for .png or support for SVG.”

How CSS custom property values are computed

Efficient and confident troubleshooting of CSS variables.

12 modern CSS one-line upgrades

Easy ways to modernize your website’s CSS.

Type definitions for CSS with @property

How to write safer, more resilient CSS custom properties.