The five best design links, every weekday

Domain: css-irl.info

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.

css-irl.info

Exciting Times for Browsers (and CSS)

This month saw Safari drop a new release that includes support for a tonne of new stuff.

css-irl.info

Aspect Ratio is Great

A little thing about why aspect-ratio sparks joy.

css-irl.info

Is it Time to Ditch the Design Grid?

I came across this website, Gridless Design recently, and it immediately struck a chord.

css-irl.info

Detecting Hover-Capable Devices

We developers can no longer rely on viewport size as the factor that determines the styles we serve up to our website users.

css-irl.info

Paper Snowflakes: Combining Clipping and Masking in CSS

Just after Christmas I made a fun little Codepen demo recreating realistic-looking paper snowflakes in CSS, inspired by our homemade decorations!

css-irl.info

A Utility Class for Covering Elements

Here’s something I find myself needing to do again and again in CSS: completely covering one element with another.

css-irl.info

Drop-Shadow: The Underrated CSS Filter

If you’re familiar with CSS, you probably know all about the box-shadow property.

css-irl.info

Irregular-shaped Links with Subgrid

Card-based UIs are commonly-used web design patterns, and it’s not unusual to build a UI that requires a hover effect to be applied to an entire card.

css-irl.info

Exciting Things on the Horizon For CSS Layout

This past week has brought a few announcements from browser vendors of some exciting things that might have a big impact on CSS layout.