CSS Spatial: Apples offener Web-Standard für Spatial Computing
- CSS Spatial ist Apples neuer Standard-Entwurf, mit dem normale Websites räumliche Tiefe bekommen sollen, ganz ohne aufwändige 3D-Programmierung.
- Die beiden Autoren sind keine reinen Apple-Angestellten, sondern zugleich führende Köpfe im W3C, dem Gremium, das Webstandards für die gesamte Branche verabschiedet.
- Der Standard ist noch ein früher Entwurf, kein verabschiedetes Regelwerk. Andere Browserhersteller sind erst zur Stellungnahme eingeladen.
Was ist CSS Spatial? Apples Standard für räumliche Websites
Vor zweieinhalb Jahren, mit dem Start der Apple Vision Pro, bauten wir unsere erste „3D-Website”, deren volle Funktionen nur auf der Apple Vision Pro liefen, und haben das Thema seither in mehreren Artikeln weitergedacht, unter anderem im Beitrag zum model-Element, das Apple im WebKit-Blog vorgestellt hat. Unseren aktuellen Stand fasst die Leistungsseite Spatial Website zusammen.
CSS Spatial ist ein Entwurf im offiziellen WebKit-Repository, der ein Grundproblem heutiger Websites löst: Sie sind flach, selbst auf Geräten, die Tiefe darstellen können. Statt einer eigenen 3D-Anwendung sollen normale HTML/CSS-Seiten künftig selbst festlegen können, was näher an den Betrachter heranrückt und was im Hintergrund bleibt.
So funktioniert CSS Spatial: von schwebenden Elementen bis zum 3D-Fenster
Zwei Grundideen stecken dahinter, im Entwurf CSS Spatial Layout genannt. Im ersten Modus, spatial: page, heben sich einzelne Elemente per position: spatial-absolute wie eine Visitenkarte vom Bildschirm ab, etwa ein Button, der beim Hovern näher zum Betrachter rückt. Im zweiten Modus, spatial: portal, öffnet sich die Seite wie ein Fenster in einen Raum dahinter, mit mehreren Ebenen, durch die man hindurchblickt, ideal für ein Produkt, das auf einer eigenen kleinen Bühne präsentiert wird. Auf gewöhnlichen Bildschirmen bleibt alles flach lesbar, nichts bricht.
Modus spatial: page: einzelne Elemente heben sich aus der Seitenfläche heraus, hier die mittlere von drei Produktkarten. Diagramm: WebKit CSS Spatial Layout Explainer, Apple.
Modus spatial: portal: die Seite öffnet sich wie ein Fenster, die Überschrift bleibt auf der Fläche und der Raum liegt dahinter. Diagramm: WebKit CSS Spatial Layout Explainer, Apple.
W3C und Apple: die Doppelrolle hinter dem neuen Webstandard
Die beiden Autoren hinter CSS Spatial sind nicht zwei Apple-Mitarbeiter mit einem internen Wunschpapier. Ada Rose Cannon leitet als Co-Chair die Immersive-Web-Arbeitsgruppe des W3C und arbeitet zugleich bei Apple an AR/VR. Elika Etemad, bekannt als „fantasai”, schreibt seit rund zwei Jahrzehnten an den zentralen CSS-Spezifikationen des Web mit und ist mittlerweile ebenfalls bei Apple. Beide sitzen also an der Schnittstelle zwischen Konzern-Interesse und offenem Web-Standard. Das gibt CSS Spatial mehr Gewicht als eine reine Apple-Hausmeinung, auch wenn es noch keine Zusage anderer Browser gibt.
Mein Gedanke dazu: Auswirkungen für heutige Websites
Kurzfristig nichts, denn CSS Spatial ist ein Entwurf, kein Regelwerk, und kein zweiter Browser-Hersteller hat bisher zugesagt. Wer heute eine Website plant, plant sie flach… oder sagen wir, ohne diesen Standard.
Mittelfristig verschiebt sich aber die Ausgangsfrage. Bisher hieß räumlich im Browser immer: eigene 3D-Anwendung, eigenes Budget, eigene Wartung. Wenn Tiefe zu einer Website- / CSS-Eigenschaft wird, sinkt die Einstiegshürde auf das Niveau einer Layout-Entscheidung.
Für Produkte, die man heute mit Fotos und Explosionszeichnungen erklärt, ist das der interessantere Teil der Meldung: nicht die AR- oder VR-Brille, sondern der Weg dahin.
Funfact: Die Teedosen-Szene haben wir 2023 als AR-Demo umgesetzt: Interface-Design der AR-Brille von Apple schon 2021 in einem Spielfilm?
Häufige Fragen
Was ist CSS Spatial?
CSS Spatial ist ein Entwurf aus dem WebKit-Repository von Apple, der räumliche Tiefe als CSS-Eigenschaft einführt. Statt Tiefe mit Grafiktricks auf einer flachen Fläche vorzutäuschen, sollen Elemente tatsächlich vor oder hinter der Seite liegen können. Der Explainer heißt vollständig CSS Spatial Layout.
Brauche ich eine Apple Vision Pro, damit CSS Spatial etwas bringt?
Nein. Der Entwurf ist so angelegt, dass jedes Gerät mit räumlicher Darstellung die Tiefe zeigt und alle anderen die Seite flach rendern. Die Vision Pro ist heute das bekannteste Gerät dieser Art, aber nicht die Voraussetzung.
Was passiert auf einem normalen Bildschirm?
Die Seite bleibt flach und vollständig lesbar. Der Entwurf nennt das ausdrücklich als Ziel: räumliche Angaben sollen sich auf flachen Bildschirmen sauber zurückfalten, damit nichts bricht.
Ist CSS Spatial schon ein verabschiedeter Webstandard?
Nein. Es ist ein früher Entwurf in einem Apple-Repository, kein W3C-Dokument und keine fertige Spezifikation. Im Abschnitt Stakeholder Feedback steht Apple als Befürworter, für die übrigen Browserhersteller steht dort Seeking feedback.
Was ist der Unterschied zu 3D im Browser mit WebGL oder Three.js?
Heute bedeutet Tiefe im Browser eine eigene 3D-Anwendung mit eigener Programmierung und Wartung. CSS Spatial verlagert einen Teil davon in das Layout: Tiefe wird zu einer Eigenschaft, die im Stylesheet steht, nicht zu einem Programm, das eine Szene rendert. Für aufwendige Produktvisualisierung ersetzt es 3D-Anwendungen nicht.
Sollten wir für unsere Website jetzt etwas ändern?
Kurzfristig nein. Solange kein zweiter Browserhersteller zugesagt hat, plant man Websites weiter flach. Interessant wird es für alle, die ohnehin über 3D-Inhalte nachdenken: Sinkt die Einstiegshürde von einer eigenen Anwendung auf eine Layout-Entscheidung, verschiebt sich die Kosten-Nutzen-Rechnung.