The five best design links, every weekday


Progressively Enhanced Popover Toggletips

The CSS Anchor Positioning specification enables us to position elements relative to an anchor, wherever they are in our web page.

Shades of Grey with color-mix()

When it comes to building websites, it can be handy having a few shades of grey at your disposal, no matter your colour palette.

Design Patterns that Encourage Junk Data

It’s estimated that up to 88% of the data stored in the cloud is ROT (Redundant, Obsolete or Trivial) data, or “dark data”.

Oh No, Overflow!

The overflow CSS property controls what happens when the stuff you put inside a box is bigger than the box itself.

Stop Using AI-Generated Images

No doubt you won’t have failed to notice how AI (artificial intelligence) is proliferating in almost every area of our lives.

(Don’t) Mind the Gap

I don’t see people using the gap property for flexbox out in the wild all that often, but it’s pretty cool!

Messing About with CSS Gradients

I’m not a person who creates CSS “art” (as in drawings), but I do like messing about with CSS gradients and seeing what comes up.

Styling External Links with Attribute Selectors

You might notice on some websites you visit that external links display a little icon next to them.

Greenwashing and the COP28 Website

A member of the Sustainable Web Design Community Group recently highlighted some sustainability issues with the COP28 website.

Cool Tools

Chris Brandrick at Frontend Focus asked me to share five tools, libraries or packages that I love.

Modern CSS Layout is Awesome

If you want to get up to speed on what’s new in CSS layout, this is a good place to start.

Reducing Complexity in Front End Development

As web applications grow larger, they inevitably fall prey to complexity, despite our best intentions.

Exploring :has() Again

What I’m realizing as I continue to play around with :has() is that in practice, we can select any element in the DOM relative to another.

Resizing with CSS

In case you missed it, container queries landed in all stable browsers this week.

Logical Border Radius

Logical properties typically refer to the inline or block axis, which are different depending on the direction or writing mode.

CSS Halftone Patterns

A little while ago, Ana Tudor created an impressive collection of halftone patterns using only CSS.

Web Sustainability and the Ethical Dilemma

It was interesting to hear about the challenges of measuring the carbon emissions of a website.

A Handy Use For Cascade Layers

I was just preparing a demo and it suddenly occurred to me that cascade layers would be a perfect solution to a problem I was having.

Logical Properties for Useful Shorthands

Something I like about logical properties is the ability to set margins or padding on just a single axis on an element, while leaving the other alone.

Masonry? In CSS?!

Pinterest’s grid design is a commonly-cited example whenever the masonry conversation comes up.