Erstellen von CSS-APIs ohne JavaScript mit dem Datasette-css-properties-Plugin

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Simon Willison hat ein Projekt namens Datasette, ein Open-Source-Multi-Tool zum Erkunden und Veröffentlichen von Daten. Ich bin mir nicht sicher, ob ich qualifiziert bin, es zu erklären, aber es ist wie ein Werkzeug, das die Handhabung von Daten erleichtert und mehr – über das Web – mit Ihren Daten ermöglicht. Zum Beispiel, um diese Daten abfragbar zu machen und ihnen eine API zu geben.

Ich würde denken, typischerweise erhält man die Ergebnisse eines API-Aufrufs gegen seine Daten in etwas Nützlichem, wie z. B. JSON. Aber Simon hat ein Plugin erstellt, das die Ergebnisse stattdessen als CSS-Custom-Properties ausgibt, und hat darüber gebloggt.

Es ist sehr, sehr seltsam – es fügt Datasette eine .css-Ausgabeerweiterung hinzu, die das Ergebnis einer SQL-Abfrage im CSS-Custom-Property-Format ausgibt. Das bedeutet, dass Sie die Ergebnisse von Datenbankabfragen mit reinem CSS und HTML anzeigen können, ganz ohne JavaScript!

Hier ist, was ich kürzlich in „Custom Properties as State“ gesagt habe:

Das bringt mich zu dem Gedanken, dass eine CDN-gehostete CSS-Datei wie diese andere nützliche Dinge enthalten könnte, wie das heutige Datum für die Verwendung in Pseudoinhalten oder andere spezielle zeitabhängige Dinge. Vielleicht die Mondphase? Sportergebnisse?! Suppe des Tages?!

Und Simon meint, wie wäre es mit Straßenattraktionen?

Mein Gehirn macht sich automatisch Sorgen um die Barrierefreiheit, aber… werden Pseudoelemente heute nicht ziemlich und zuverlässig von Screenreadern gelesen? Sie können den Text aber immer noch nicht auswählen oder mit der Suchfunktion finden, was beides Benutzerfreundlichkeits- und Barrierefreiheitsprobleme sind. Betrachten Sie dies also nicht als etwas Reales, das Sie für die Produktionsarbeit mit unbekannten Benutzern wirklich tun.

Sein Blogbeitrag demonstriert ein etwas dynamischeres Beispiel, bei dem die Tageszeit eine andere Farbe ausgibt. Das bringt mich zu @property und der Deklaration von Typen für Custom Properties. Ich denke, das wird ein kleines bisschen nützlicher, wenn man die zurückkommenden Werte als spezifische Syntaxen verwenden kann.