📝 CSS-Tricks 233: CSS as a content API? No. But also sort of yes.

View this newsletter on the web.

CSS as a content API

Okay, this is a neat idea but also probably highly foolish: using CSS as a content API. We’ll get to that. But first: in Custom Properties as State, Chris writes about Seasonal.css which “supplies a seasonal colour scheme based on the day of the year.”

You can import the CSS file…

<link rel="stylesheet" type="text/css" href="https://seasonal-css.incoherency.co.uk/seasonal.css"&gt;

And then use the variables within this CSS file to style your site. All of the variables in that file are then updated for every day of the year as they show on the example website:

Chris looks at all this and then writes:

This makes me think that a CDN-hosted CSS file like this could have other useful stuff, like today’s date for usage in pseudo content, or other special time-sensitive stuff. Maybe the phase of the moon? Sports scores?! Soup of the day?!

It’s almost like a data API that is tremendously easy to use. Pseudo content is even accessible content these days — but you can’t select the text of pseudo-elements, so don’t read this as an actual endorsement of using CSS as a content API.

Simon Willison took that idea and ran (caveating it all as a very weird idea) building an API for arbitrary database queries that return the results as… CSS custom properties. 🤯

Super interesting stuff here. I wrote not so long ago that CSS variables will soon be like the checkbox hack: they’re remarkable and extremely flexible. And I believe that this “CSS as content API” stuff proves me right. Just wait until we get Higher Level Custom Properties, things will get even weirder.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s