Jonathan Neal hat kürzlich einen verblüffenden kleinen CSS-Trick getwittert, bei dem JSON in CSS eingefügt und mit JavaScript ausgelesen wird. Gültige Werte für benutzerdefinierte Eigenschaften sind ziemlich liberal! Dies sucht nach einer CSS-Regel (z. B. einem ganzen Block, wie #x { y: z; }, dessen cssText mit -- beginnt (was kein gültiger Selektor ist, aber wen kümmert's – Sie könnten ihn ändern, wenn Sie wollen, in thisIsJson oder etwas Ähnliches) und schneidet dann einen String aus, mit dem JSON.parse() funktioniert.
Ich habe sein Beispiel hier abgetippt
Ist das nützlich?
NUN.
Wahrscheinlich nicht, so im täglichen Gebrauch. Aber denken Sie daran, dass JSONP immer noch existiert, weil CORS existiert. Etwas JSON in CSS zu packen, wäre meiner Meinung nach eine weitere Möglichkeit, CORS zu umgehen. Ich bezweifle, dass es sich durchsetzen wird, aber es ist möglich. Erinnern Sie sich, vor nicht allzu langer Zeit sprachen wir darüber, CSS als API für Literaldaten zu verwenden. Eine weitere fragwürdige Idee. ;)
Ich denke, "seltsame Dinge in benutzerdefinierte Eigenschaften einfügen" ist das neue "seltsame Dinge in CSS-Inhalt einfügen".
Zum Beispiel, Sie wissen, wie es Media Queries in JavaScript gibt, à la matchMedia? Und natürlich gibt es auch Media Queries in CSS. Es gab eine Zeit (und ich bin mir nicht sicher, ob sie vorbei ist), da schien es eine gute Idee zu sein, diese Media Queries nur einmal zu definieren, damit wir Media Queries nicht an mehreren Stellen pflegen müssten. Um sie "synchron" zu halten, war eine Idee, sie in CSS zu definieren und sie den Wert eines bestimmten CSS-content ändern zu lassen (z. B. @media (max-width: 500px) { body::after { content: "max500"; display: none; } }), und dann buchstäblich zu beobachten, wie sich dieser content mit JavaScript ändert – und Sie wüssten, dass diese Media Query aktiv ist. Wirklich! Kein Scherz!
Und wo wir gerade von JSON in CSS sprechen, Sie können auch direkt JavaScript hineinpacken. Das ist nicht so clever wie Jonathans Extraktion, weil es einfach nur den Wert ausliest und ihn evaluiert.
Caleb Williams hat einen Web Worker mit CSS erstellt.
Danke. Das war sehr nützlich
Das ist so hässlich, dass meine Augen schmerzen, wenn ich es ansehe... Alles daran.
Ich verstehe es ehrlich gesagt nicht. Also, wenn CORS ein Ding ist, warum nicht die Zeit nehmen, die Herausforderungen zu verstehen, die es mit sich bringt, zu der Erkenntnis zu gelangen, dass Cross-Origin-Ressourcenrichtlinien aus einem guten Grund (Sicherheit) existieren; und mit dem WHATWG-anerkannten Standard zur Umgehung dieser Einschränkungen arbeiten, alias dem HTTP-Header 'Access-Control-Allow-Origin'. Siehe https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Ich lobe css-tricks für seine großartigen Frontend-Inhalte, aber – wie ein Großteil der JavaScript-Community – scheint es sich auf eine Weltanschauung zu versteifen, die alles mit JavaScript erledigen muss, oder auf so viele Problembereiche, die nicht unter die Zuständigkeit von JavaScript fallen. Das sehe ich nirgendwo deutlicher als beim Einsatz von Hacks, weil Sicherheitsmaßnahmen nur dazu da zu sein scheinen, das Leben des Frontend-Entwicklers zu erschweren. Das sind sie nicht: Sie sind dazu da, das Leben des Hackers zu erschweren.
Es ist nur ein Trick. In keiner Weise wird jemand dafür eintreten, dass es eine wundersame Lösung für irgendein Problem ist. Es macht einfach Spaß, darüber nachzudenken.
Auf der anderen Seite bekomme ich Kommentare, wenn ich Dinge veröffentliche, die *keine* "CSS" "Tricks" sind, lol.
Hä? Akzeptieren CSS Custom Properties direkt JavaScript? Das hat mich verwirrt.
Hat dieses JS irgendeine Sichtbarkeit auf den tatsächlichen aktuellen Selektor oder die Stile? Könnte es für etwas wie das Folgende verwendet werden?
Das JS wird tatsächlich nicht im Stylesheet ausgeführt. Soweit CSS weiß, ist dieser Inhalt nur ein zufälliger String. Aber Sie können benutzerdefinierte CSS-Eigenschaften mit JavaScript lesen, das diesen String dann als JS-Code auswerten kann.
Ja, das stimmt.
Weil man nach all dem manchmal einfach keinen Zugriff auf den Server hat oder nicht die Ressourcen, um Änderungen vorzunehmen, usw. usw. Ich würde niemals einen Trick wie diesen verwenden, wenn ich eine korrekte Alternative hätte, aber manchmal muss man eben tun, was man tun muss.
Manchmal sollte man das niemals tun.
Das Gleiche wie auf Twitter gesagt. Nichts Neues, das kann man schon seit Ewigkeiten machen, aber den String woanders platzieren (z. B. im Inhalt eines `before`).
Der Grund, warum es niemand getan hat, ist wahrscheinlich, dass es keinen Grund dafür gibt; welchen Anwendungsfall auch immer dies angeblich adressieren soll, man kann ihn mit anderen Werkzeugen erreichen und es wird sich immer weniger nach einem Hack anfühlen.
Und dieses "eval"... oh je. Kein Kommentar. Ich dachte, CSS-Tricks sei ein Ort der Weisheit.
Warum nicht einfach das JSON in die JS-Datei packen?
Ich habe 2019 darüber geschrieben, als ich JSON innerhalb einer CSS-Eigenschaft zur Steuerung des Paint Worklets verwendet habe.
https://itnext.io/controlling-paint-worklet-with-json-in-css-298a7b10e41c