CSS APIs Without JavaScript? This Datasette Plugin Serves Up Results as CSS Custom Properties
Simon Willison’s Datasette is an open source tool for exploring and publishing data through the web, making data queryable and giving it an API. Typically, you’d expect API results in a format like JSON — but Willison built a plugin that spits query results out as CSS custom properties instead.
He blogged it as “very, very weird”: the .css output extension takes the result of a SQL query and outputs it using CSS custom property format, so the results of database queries can be displayed with pure CSS and HTML — no JavaScript required.
His post demonstrates a slightly more dynamic example where the time of day outputs a different color. That raises a thought about @property and declaring types for custom properties: the approach gets a little more useful when returned values can be used as specific syntaxes.
There’s an accessibility angle worth worrying about: pseudo-elements are fairly and reliably read by screen readers these days, but text still can’t be selected or found on the page — both usability and accessibility issues. So this isn’t something to reach for in production with unknown users. It is, however, a neat trick for scenarios like displaying roadside attractions or soup of the day.
