The five best design links, every weekday

Domain: css-irl.info

css-irl.info

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.

css-irl.info

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.

css-irl.info

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

css-irl.info

Oh No, Overflow!

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

css-irl.info

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.

css-irl.info

(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!

css-irl.info

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.

css-irl.info

Styling External Links with Attribute Selectors

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

css-irl.info

Greenwashing and the COP28 Website

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

css-irl.info

Cool Tools

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

css-irl.info

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.

css-irl.info

Reducing Complexity in Front End Development

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

css-irl.info

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.

css-irl.info

Resizing with CSS

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

css-irl.info

Logical Border Radius

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

css-irl.info

CSS Halftone Patterns

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

css-irl.info

Web Sustainability and the Ethical Dilemma

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

css-irl.info

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.

css-irl.info

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.

css-irl.info

Masonry? In CSS?!

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