Simon Willison's Weblog: css-custom-properties

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

Minimal CSS-only blurry image placeholders

2025-04-03T02:44:18+00:00

Minimal CSS-only blurry image placeholders

Absolutely brilliant piece of CSS ingenuity by Lean Rada, who describes a way to implement blurry placeholder images using just CSS, with syntax like this:

<img src="…" style="--lqip:192900">

That 192900 number encodes everything needed to construct the placeholder - it manages to embed a single base color and six brightness components (in a 3x2 grid) in 20 bits, then encodes those as an integer in the roughly 2 million available values between -999,999 and 999,999 - beyond which range Lean found some browsers would start to lose precision.

The implementation for decoding that value becomes a bunch of clever bit-fiddling CSS expressions to expand it into further CSS variables:

[style*="--lqip:"] {
  --lqip-ca: mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 18))), 4);
  --lqip-cb: mod(round(down, calc((var(--lqip) + pow(2, 19)) / pow(2, 16))), 4);
  /* more like that */
}

Which are expanded to even more variables with code like this:

--lqip-ca-clr: hsl(0 0% calc(var(--lqip-ca) / 3 * 100%));
--lqip-cb-clr: hsl(0 0% calc(var(--lqip-cb) / 3 * 100%));

And finally rendered using a CSS gradient definition that starts like this:

[style*="--lqip:"] {
  background-image:
    radial-gradient(50% 75% at 16.67% 25%, var(--lqip-ca-clr), transparent),
    radial-gradient(50% 75% at 50% 25%, var(--lqip-cb-clr), transparent),
    /* ... */
    linear-gradient(0deg, var(--lqip-base-clr), var(--lqip-base-clr));
}

The article includes several interactive explainers (most of which are also powered by pure CSS) illustrating how it all works.

Their Node.js script for converting images to these magic integers uses Sharp to resize the image to 3x2 and then use the Oklab perceptually uniform color space (new to me, that was created by Björn Ottosson in 2020) to derive the six resulting values.

Via Hacker News

Tags: css, css-custom-properties

APIs from CSS without JavaScript: the datasette-css-properties plugin

2021-01-07T20:50:44+00:00

I built a new Datasette plugin called datasette-css-properties. It's very, very weird - it adds a .css output extension to Datasette which outputs the result of a SQL query using CSS custom property format. This means you can display the results of database queries using pure CSS and HTML, no JavaScript required!

I was inspired by Custom Properties as State, published by by Chris Coyier earlier this week. Chris points out that since CSS custom properties can be defined by an external stylesheet, a crafty API could generate a stylesheet with dynamic properties that could then be displayed on an otherwise static page.

This is a weird idea. Datasette's plugins system is pretty much designed for weird ideas - my favourite thing about having plugins is that I can try out things like this without any risk of damaging the integrity of the core project.

So I built it! Here are some examples:

roadside_attractions is a table that ships as part of Datasette's "fixtures" test database, which I write unit tests against and use for quick demos.

The URL of that table within Datasette is /fixtures/roadside_attractions. To get the first row in the table back as CSS properties, simply add a .css extension:

/fixtures/roadside_attractions.css returns this:

:root {
  --pk: '1';
  --name: 'The Mystery Spot';
  --address: '465 Mystery Spot Road, Santa Cruz, CA 95065';
  --latitude: '37.0167';
  --longitude: '-122.0024';
}

You can make use of these properties in an HTML document like so:

<link rel="stylesheet" href="https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css">
<style>
.attraction-name:after { content: var(--name); }
.attraction-address:after { content: var(--address); }
</style>
<p class="attraction-name">Attraction name: </p>
<p class="attraction-address">Address: </p>

Here that is on CodePen. It outputs this:

Attraction name: The Mystery Spot

Address: 465 Mystery Spot Road, Santa Cruz, CA 95065

Apparently modern screen readers will read these values, so they're at least somewhat accessible. Sadly users won't be able to copy and paste their values.

Let's try something more fun: a stylesheet that changes colour based on the time of the day.

I'm in San Francisco, which is currently 8 hours off UTC. So this SQL query gives me the current hour of the day in my timezone:

SELECT strftime('%H', 'now') - 8

I'm going to define the following sequence of colours:

Midnight to 4am: black
4am to 8am: grey
8am to 4pm: yellow
4pm to 6pm: orange
6pm to midnight: black again

Here's a SQL query for that, using the CASE expression:

SELECT
  CASE
    WHEN strftime('%H', 'now') - 8 BETWEEN 4
    AND 7 THEN 'grey'
    WHEN strftime('%H', 'now') - 8 BETWEEN 8
    AND 15 THEN 'yellow'
    WHEN strftime('%H', 'now') - 8 BETWEEN 16
    AND 18 THEN 'orange'
    ELSE 'black'
  END as [time-of-day-color]

Execute that here, then add the .css extension and you get this:

:root {
  --time-of-day-color: 'yellow';
}

This isn't quite right. The yellow value is wrapped in single quotes - but that means it won't work as a colour if used like this:

<style>
nav {
  background-color: var(--time-of-day-color);
}
</style>
<nav>This is the navigation</nav>

To fix this, datasette-css-properties supports a ?_raw= querystring argument for specifying that a specific named column should not be quoted, but should be returned as the exact value that came out of the database.

So we add ?_raw=time-of-day-color to the URL to get this:

:root {
  --time-of-day-color: yellow;
}

(I'm a little nervous about the _raw= feature. It feels like it could be a security hole, potentially as an XSS vector. I have an open issue about that and I'd love to get some feedback - I'm serving the page with the X-Content-Type-Options: nosniff HTTP header which I think should keep things secure but I'm worried there may be attack patterns that I don't know about.)

Let's take a moment to admire the full HTML document for this demo:

<link rel="stylesheet" href="https://latest-with-plugins.datasette.io/fixtures.css?sql=SELECT%0D%0A++CASE%0D%0A++++WHEN+strftime(%27%25H%27,+%27now%27)+-+8+BETWEEN+4%0D%0A++++AND+7+THEN+%27grey%27%0D%0A++++WHEN+strftime(%27%25H%27,+%27now%27)+-+8+BETWEEN+8%0D%0A++++AND+15+THEN+%27yellow%27%0D%0A++++WHEN+strftime(%27%25H%27,+%27now%27)+-+8+BETWEEN+16%0D%0A++++AND+18+THEN+%27orange%27%0D%0A++++ELSE+%27black%27%0D%0A++END+as+%5Btime-of-day-color%5D&_raw=time-of-day-color">
<style>
nav {
  background-color: var(--time-of-day-color);
}
</style>
<nav>This is the navigation</nav>

That's a SQL query URL-encoded into the querystring for a stylesheet, loaded in a <link> element and used to style an element on a page. It's calling and reacting to an API with not a line of JavaScript required!

Is this plugin useful for anyone? Probably not, but it's a really fun idea, and it's a great illustration of how having plugins dramatically reduces the friction against trying things like this out.

Tags: apis, css, projects, datasette, css-custom-properties

datasette-css-properties

2021-01-07T19:42:37+00:00

datasette-css-properties

My new Datasette plugin defines a “.css” output format which returns the data from the query as a valid CSS stylesheet defining custom properties for each returned column. This means you can build a page using just HTML and CSS that consumes API data from Datasette, no JavaScript required! Whether this is a good idea or not is left as an exercise for the reader.

Via @simonw

Tags: css, projects, datasette, css-custom-properties

Custom Properties as State

2021-01-07T19:39:49+00:00

Custom Properties as State

Fascinating thought experiment by Chris Coyier: since CSS custom properties can be defined in an external stylesheet, we can APIs that return stylesheets defining dynamically server-side generated CSS values for things like time-of-day colour schemes or even strings that can be inserted using ::after { content: var(--my-property).

This gave me a very eccentric idea for a Datasette plugin...

Tags: apis, css, css-custom-properties

Why "variables" in CSS are harmful

2008-08-06T00:13:55+00:00

Why "variables" in CSS are harmful

Bert Bos thinks constants or macros in CSS will make it harder to learn. I personally think that the problem with CSS isn’t the learning curve, it’s how difficult it is to maintain later—and I see macros as a great way of reducing that maintainability burden.

Tags: bert-bos, css, cssconstants, maintainability, css-custom-properties

CSS Variables

2008-04-25T23:26:46+00:00

CSS Variables

Hooray! My number one requested CSS feature (and I know I’m not alone), proposed by Daniel Glazman and David Hyatt so I imagine we’ll see it trialled in WebKit pretty soon.

Tags: css, daniel-glazman, david-hyatt, variables, webkit, css-custom-properties