CSS Custom Filters

CSS custom filter versprachen kreative Freiheit durch shader-ähnliches Rendering von HTML-Elementen. Obwohl dieser Vorschlag längst überholt ist und nicht mehr unterstützt wird, ist es interessant, sich anzusehen, welche Effekte möglich gewesen wären, wenn diese Funktion umgesetzt worden wäre.

Paul Dittrich
Paul Dittrich
2024-08-09

Disclaimer: Die unten aufgeführten Funktionen werden nicht mehr unterstützt und funktionieren daher nicht mehr in modernen Browsern. Sie waren über ein experimentelles Flag in Chromium-basierten Browsern verfügbar.

Was sind CSS Custom Filter?

Obwohl es im Internet fast keine Informationen mehr darüber gibt, ist das Prinzip sehr einfach. Mit custom filters kann man jedes Element durch eine 3D-Pipeline laufen lassen. Man kann es sich als eine Funktion vorstellen, die 2D-Pixelkoordinaten eines Elements als Eingabe nimmt und 3D-Koordinaten zurückgibt. Dies würde Effekte wie das Verzerren eines Bildes ermöglichen:

A picture of an distorted image using css custom filters(Quelle)

Mit CSS muss man einen vertex und fragment shader code spezifizieren und anschließend noch ein paar weitere Informationen, um den custom filter auf ein Element anzuwenden.

.customShader {
    -webkit-filter: custom(
        url(vertexShader.vert)
        mix(url(fragmentShader.frag) normal source-atop),
        50 50, /* Zeilen, Spalten - Das Element wird automatisch gerastert */
        time 0 /* Weitere Parameter (uniforms) */
    )
}

Was ist der Vorteil?

Wenn man schon einmal mit CSS-Transformation gearbeitet hat, weiß man vielleicht, warum dieses Feature so mächtig wäre. Nichtlineare Transformationen wie oben behalten ihre Interaktivität (z.B. Hovering-Effekte) und können in Echtzeit animiert werden.

Obwohl viele 3D-Effekte mit den modernen CSS-Transformationen möglich sind, sind einige immer noch schwer zu erreichen. Zum Beispiel die Projektion von Bildern auf eine 3d-Kugel. Es ist unmöglich, die Krümmung des Bildes richtig darzustellen und simultan die Interaktivität zu behalten.

Warum wurden Sie abgeschafft?

Ich denke, es gibt einige Gründe, warum diese Funktion aufgegeben wurde.

  1. Sicherheitsbedenken: Da Shader auf der Grafikkarte ausgeführt werden, könnten sie für andere Zwecke missbraucht werden.
  2. Komplexe Implementierung: Eine so leistungsstarke Funktion erfordert eine Optimierung der Browser-Engine und kann bei unvorsichtiger Handhabung zu Leistungsproblemen führen.
  3. Konzentration auf andere Funktionen: Ohne weit verbreitete Benutzung gab es möglicherweise nicht genug Motivation, die Entwicklung voranzutreiben und der Fokus wurde auf andere Projekte verlagert.

Ähnliche Lösungen

Wenn es nur um eine Möglichkeit geht, einfache Transformationen wie Verschiebungen oder Drehungen durchzuführen, ist CSS Transform wahrscheinlich ausreichend.

Eine anspruchsvollere Lösung erfordert eine 3D-Bibliothek wie Three.js und die Verwendung von WebGL oder WebGPU. Ein Weg, die HTML-Elemente zu rastern, besteht darin, sie in ein SVG zu packen und das SVG auf ein Canvas zu rendern.

Fazit

Ich denke, es ist sehr verständlich, warum dieses Feature aufgegeben wurde. Die 3D-Effekte, die wir verpasst hätten, lassen sich besser mit WebGL oder WebGPU realisieren. Wenn es mit CSS-Funktionen wie Hover-Effekten und Border zusammengepasst hätte, wäre diese Funktion sehr praktisch gewesen. Weiterhin war sie nur sehr kurzlebig, immerhin ist es heutzutage fast unmöglich, Artikel über dieses Thema zu finden.