Die Anpassung des Design an verschiedene Endgeräte erfolgt unter CSS 2.0 durch Auswahl eines passenden Endgerätes. Bei CSS-Informationen innerhalb des HTML-Dokumentes wird dies durch die Angabe “@media Medientyp” vor dem eigentlichen Formatierungsangaben (also beispielsweise “@media print {body {color:#000000;}}”) erreicht, bei externen CSS-Quellen genügt die genaue Angabe des Medientypes innerhalb des “link”-Tags im Dokument. Die Browser-Software entscheidet bei beiden Möglichkeiten zwischen der genutzten CSS-Datei. Verwendbare Medientypen-Profile sind dabei visuelle Browser, akustische Geräte, Drucker, Braille-Geräte oder Handhelds.

Formate für Klassen

Eine Formatdefinition für eine Klasse wird durch einen Punkt im Selektor gefolgt von einem freigewählten Klassennamen notiert. Mit *.hinterlegt wird im Beispiel demonstriert, dass man durchaus den gleichen Klassennamen sowohl allgemein als auch gleichzeitig für andere Elemente verwenden kann, der Stern kann dabei entfallen.

Pseudoformate

Pseudoformaten dienen der Präsentation von Elementen, wie beispielsweise dem XForms-Input-Tag, welcher unterschiedliche Zustände besitzen kann, so beispielsweise einen unbedingt durch die Formularvalidierung verlangten (:required) bzw. optionalen Tag (:optional), dessen aktueller value-Eintrag den XForms-Regeln entspricht (:valid) bzw. ungültig sein kann (:invalid), usw. Die verwendeten Bezeichnungen sind dabei keine frei wählbaren Namen, sondern feste Schlüsselwörter und für das obige Anwendungsbeispiel unter [14] notiert.

Elementbedingte Formate

Es kann mit Hilfe von Style-Sheets bestimmt werden, dass ein HTML-bzw. XForms-Element bestimmte Eigenschaften nur dann besitzt, wenn es innerhalb eines bestimmten anderen Elements vorkommt. So kann man etwa bestimmen, dass <xforms:input>...</ xforms:input> innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während das gleiche Element innerhalb anderer Tags nach wie vor nichts anderes als eine Standarddarstellung bewirkt.

Durch div input { color:red; } wird nach CSS-1.0-Syntax festgelegt, dass input-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, immer rote Textfarbe (color:red;) erhalten. Ab CSS 2.0 gibt es zusätzlich die Möglichkeit, genauer festzulegen, für welche Verschachtelung die Formatdefinition gelten soll, so beispielsweise *:invalid > xforms|alert { display: inline; } und *:valid > xforms|alert { display: none;}, welche einen XForms-Alarmtag nur unterhalb eines ungültigen Input-Tags anzeigen, diesen Text bei korrektem Input-Eintrag dagegen verbergen.

Eine weitere Möglichkeit bildet div * b { color:violet; }, wo durch das Zeichen * festgelegt wird, dass b-Elemente, sofern sie mindestens 2 Ebenen unterhalb eines div-Bereichs vorkommen, violette Textfarbe (color:violet;) erhalten. Das Gegenstück bildet div + p { margin-top:100px; }, wo mit dem Zeichen + in diesem Selektor festgelegt wird, dass p-Elemente, die unmittelbar auf ein div-Element hin folgen, einen Abstand von 100 Pixel nach oben erhalten (margin-top:100px;).

Attribut-Bedingte Formulare (CSS 2.0)

Elementformatierungen können ab Version CSS 2.0 ebenfalls in Abhängigkeit zu bestimmten verwendeten Attributen genutzt werden, hier am Beispiel des Attribut appearance gezeigt.

Mit select1[appearance=”minimal”] werden alle select1-Elemente erfasst, die ein appearance="minimal" im einleitenden Tag haben. Mit td[abbr~=Berlin] werden alle Tabellenzellen des Typs td erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute.

Individualformate

In dem Beispiel werden zwei Individualformate definiert: zunächst eines mit den Namen #blauerBereich. Ein HTML-Element, das diesen Namen als Wertzuweisung an das id-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. Ab CSS 2.0 kann für einen HTML-Elementtyp auch ein spezialisiertes Individualformat festgelegt werden.

Die Weiterentwicklung liegt derzeit nur als “Working Draft” des W3Cs vor, kann also vom späteren Standard noch sehr weit entfernt sein. Wobei eine vollständige Implementierung in gängige Browser (bei Einbezug der Erfahrung mit CSS 2.0, welches bis heute nicht vollständig unterstützt wird) noch sehr lange auf sich warten lassen kann, wenn es überhaupt irgendwann eintreten sollte. In jedem Fall werden eine Vielzahl der einzelnen Module in der Praxis genutzt werden und haben dadurch die Berechtigung, hier kurz angesprochen zu werden.

Unterteilung in Module

Mit CSS 3.0 wird der Trend hin zur Modularisierung weiter fortgesetzt, wobei die einzelnen Module des CSS-Standards jeweils einen seiner Teile abdecken, wie beispielsweise “Introduction”, “Selectors” oder “Paged Media”, und oft voneinander abhängig sind. Das klare Ziel des W3C, die angegebenen Module ebenfalls in anderen Technologien verwenden zu können, ist ebenfalls ersichtlich und in ersten Prototypen mit Kombination zu xForms und SVG bereits realisiert. Ebenfalls ist es für das W3C leichter, einzelne Module zu updaten anstatt den gesamten Standard umzuschreiben. Geräteprofile für bestimmte Endgeräte werden ebenso ermöglicht. Dadurch wird angegeben, welche CSS-Module durch ein Endgerät unterstützt werden − ein Handheld braucht beispielsweise das Modul “paged media” nicht.

Spaltenlayout

Ein großer Nachteil von CSS ist bisher das Fehlen eines Spaltenlayouts, mit dem das Hantieren mit unflexiblen Tabellen entfällt. Einige Highlights dabei sind das automatische Anpassen von Tabellen an den vorhandenen Platz, automatischer Text-Umfluss in die nächste Spalte und das Strecken von Elementen über mehrere Spalten.

Selektoren

Durch das Entfallen von HTML-Elementen wie < h1 > ist deren Formatierung nicht mehr durch das eigentliche Element möglich (durch das Element <h > lässt sich nicht die Position innerhalb der Hierarchie erkennen), daher unterstützt CSS 3.0 die Ansprache über die Element-Struktur eines Dokumentes (z.B. n-tes Kind des Elternelementes). Ebenfalls neu ist die Möglichkeit, Elemente über deren Inhalt wie beispielsweise Absätze mit dem Wort “Preis” anzusprechen. Andere Selektoren werden auf Userinteraktionen eingehen und zum Beispiel die spezielle Formatierung von aktivierten Checkboxen oder markiertem Text ermöglichen.

User-Interface

Sich mit den Interaktionen des Users, dem Browser, der Systemumgebung, etc. befassend, bringt dieses Modul auch Möglichkeiten mit sich, den Fullscreen-Modus zu aktivieren oder für die Vollbilddarstellung ein eigenes Design zu definieren. Auch die Lese- und Schreibrechte in Formularfeldern können gesteuert werden, die Farbwahl je nach Zustand eines Formularelements (aktiviert, deaktiviert, nichts ausgewählt), oder das Aussehen eines Formularfeldes (statt ein gewöhnliches Dropdown-Menue kann zum Beispiel eine Reihe von Checkboxen genutzt werden). Es sind ebenfalls eigene ShortCuts innerhalb von Webseiten denkbar, und das Festlegen der Reihenfolge der Tabulatorentaste.

Paged Media

Im Bereich der seitenbasierten Ausgabe (dieses Dokument beispielsweise) kommt es ebenfalls zu starken Weiterentwicklungen. So können nun automatisch Seitenanzahlen vergeben werden, oder die Gesamtseitenzahl inklusive Fußnote und mit einer automatischen Kapiteleinteilung wird genutzt. Für interne Verweise innerhalb des Elementes kann die Seitenzahl hinter dem Link automatisch mit angegeben werden (Bsp.: “Link zu Goethe (Seite 41)”). Ebenfalls geplant ist das automatische Einfügen der URL in das Dokument sowie die letzte Änderung.

Color und Ruby

Das Farbmodul ermöglicht die Verwendung von Transparenten bzw. halbtransparenten Elementen, wobei die Stärke der Transparenz frei gewählt werden kann. Ebenfalls ist die Einbindung von ICC-Farbprofilen. Das Modul “Ruby” trägt der Internationalisierung Rechnung und integriert die Unterstützung von asiatischen Schriftzeichen.

CSS wächst stetig und stellt mittlerweile eine befriedigende Alternative zum Design innerhalb von HTML-Dokumenten dar. Leider wird der aktuelle Standard nicht zu 100% in den aktuellen Browsern umgesetzt und auch die Mächtigkeit der 3. Ausbaustufe wird wohl erst in einigen Monaten verfügbar sein. Ab diesem Zeitpunkt wird die Modularisierung den Einsatz auf neuen Geräten erleichtern und CSS aufgrund der XML-Basis der meisten modernen Websprachen der Mittelpunkt des Layouts werden. Die Aussicht, sowohl mit XForms, XHTML und SVG auf ein und dieselbe Formatvorlage erfolgreich zugreifen zu können, stellt ein weiteres Beispiel für die Vernetzung der in dieser Ausarbeitung vorgestellten Sprachen dar.