Simon Willison's Weblog: ahmad-shadeed

First look at the modern attr()

2025-04-03T15:53:52+00:00

Chrome 133 (released February 25th 2025) was the first browser to ship support for the advanced CSS attr() function (MDN), which lets attr() be used to compose values using types other than strings.

Ahmad Shadeed explores potential applications of this in detail, trying it out for CSS grid columns, progress bars, background images, animation delays and more.

I like this example that uses the rows="5" attribute on a <textarea> to calculate its max-height - here wrapped in a feature detection block:

@supports (x: attr(x type(*))) {
  textarea {
    min-height: calc(
      attr(rows type(<number>)) * 50px
    );
  }
}

That type(<number>) is the new syntax.

Many of Ahmad's examples can be achieved today across all browsers using a slightly more verbose CSS custom property syntax.

Here are the tracking issues for CSS values support in attr() for Firefox (opened 17 years ago) and WebKit (16 years ago).

Tags: chrome, css, web-standards, css-custom-properties, ahmad-shadeed

Inside the mind of a frontend developer: Hero section

2022-11-09T19:54:54+00:00

Inside the mind of a frontend developer: Hero section

Ahmad Shadeed provides a fascinating, hyper-detailed breakdown of his approach to implementing a “hero section” component using HTML and CSS, including notes on CSS grids and gradient backgrounds.

Tags: css, ahmad-shadeed

Defensive CSS

2022-07-06T17:16:30+00:00

Defensive CSS

Fantastic new site by Ahmad Shadeed describing in detail CSS patterns which can help build layouts that adapt well to unexpected content—things like overly long titles or strange aspect ratio images, common when you are designing against UGC.

Via Hacker News

Tags: css, frontend, ahmad-shadeed