Ausblick auf CSS 3

Es ist unter den Webprogrammierern allgemein bekannt, dass die bekannten Browser die bisher bekannten CSS-Standards 1.0, 2.0 und 2.1 nicht vollständig und richtig unterstützen. Warum die Browser-Hersteller dies bis heute nicht realisiert haben, bleibt wohl deren Geheimnis. Trotzdem wird im World Wide Web Consortium (W3C) bereits seit einiger Zeit an der CSS 3-Spezifikation gearbeitet. Die neue Version der Cascading Style Sheets sollen einige interessante Neuerungen mit sich bringen, auf die dieser Artikel näher eingehen wird.

CSS 3 - Allgemein

Diese Spezifikation von CSS basiert im wesentlichen auf Ideen und Entwicklungen, die bereits in CSS2 begonnen wurden. CSS3 wird allerdings modular aufgebaut sein. Das hat zur Folge, dass die Teilbereiche der neuen Spezifikation unabhängig voneinander entwickelt werden und auch eigene Versionen bekommen sollen. Zudem soll die Möglichkeit geschaffen werden, dass man den Browsern mitteilt, welche CSS-Module unterstützt werden sollen und welche nicht.

Einige Browser wie der Firefox oder der Internet Explorer besitzen bereits heute propritäre Funktionen, die geplante CSS3-Features realisieren. Sie greifen somit der eigentlichen Spezifikation vor.

Wann wird CSS 3 veröffentlicht?

Es wurden bereits einige Termine angesetzt und auch wieder abgesagt. Zum jetzigen Zeitpunkt besteht kein konkreter Termin, wann CSS3 offizielle W3C-Empfehlung werden soll.
Grund zur Eile besteht aber auch nicht, wenn man sich - unabhängig vom Browser - die bisherige CSS-Umsetzung betrachtet.

CSS 3 Module

Wie eingangs erwähnt wird CSS3 in mehrere Module aufgeteilt werden, die unabhängig voneinander entwickelt werden. Im folgenden wollen wir kurz auf die wichtigsten Module eingehen.

Ausgabemedien

Wenn man CSS aus einer externen Datei einbinden will, ist es bis jetzt möglich, über das Attribut media anzugeben, für welches Ausgabemedium die Kommandos dienen sollen. Beispiel:

Mit CSS 3 sollen die möglichen Werte für das media-Attribut noch näher definiert werden. Wenn CSS für einen Drucker definiert wurden, kann in der link-Zeile zum Beispiel mit angegeben werden, dass die Druckerauflösung einen bestimmten Wert nicht unterschreiten darf. Eine andere Unterteilung, die möglich sein soll, ist nach Farb- oder Schwarzweißdruckern zu trennen. Sind die Bedingungen nicht erfüllt, werden die CSS-Befehle nicht umgesetzt. Beispiel:

Selektoren

Im Vergleich zu den bisherigen CSS-Spezifikationen werden die Filterungsmöglichkeiten bei den Selektoren in CSS3 deutlich verfeinert sein.
Zwei Beispiele dazu sind:

Vom Besucher einer Webseite markierte/genutzte Formularelemente (z.B. Radio- oder Checkboxen) können anders als unbenutzte Elemente formatiert werden.
Bei den Formatierungen für Textabsätze wird der Inhalt des Textes für die CSS-Nutzung entscheidend sein. Das bedeutet in der Praxis, dass Texte nach dem Prinzip der regulären Ausdrücke gestaltet werden können - z.B. Ist der Ausdruck "test" im Absatz enthalten ist die Schriftfarbe grau, wenn nicht ist die Schriftfarbe blau.

Ein Beispiel für eine komplett neue Pseudoklasse, die eingeführt werden soll ist die :has-Klasse. Damit soll gezielt nach bestimmten Kindelementen im HTML-Code gefiltert werden. Beispiel:

p:has(u)

... bezieht sich auf alle Textabsätze, die ein u-Element beinhalten.

Mehrspaltiges Layout einer Webseite

In CSS3 sollen Befehle festgelegt werden, mit denen ohne einen komplexen Quellcode mehrspaltige Layouts für eine Webseite erstellt werden können. Konkrete Einzelheiten stehen dazu noch nicht fest, aber es soll dabei auf CSS-Formatierungen hinauslaufen, die es ermöglichen, einen Text automatisch auf mehrere Spalten aufteilen zu können (z.B. wie in einer Zeitung).
Dazu werden drei neue CSS-Eigenschaften eingeführt. Zum einen kann man mit column-count festlegen, aus wie viel Spalten der Text bestehen soll, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.

Der folgende Code zeigt ein praktisches Beispiel für die Anwendung in einem div-Container:

#div_container { column-count: 3; column-gap: 20px; }

Übrigens: Der Firefox-Browser unterstützt diese Eigenschaften jetzt schon.

Drucken von Webseiten

Wenn eine Webseite ausgedruckt werden soll, wird es mit CSS3 die Möglichkeit geben, verschiedene Informationen zur ausgewählten Page mit anzugeben. Dazu zählen u.a. Angaben zum Autor, Datum der Erstellung, die URL des Dokumentes, den Titel der Webseite und die Seitenzahl.

Druckansichten von Webseiten mit Cascading Style Sheets zu gestalten ist heute schon eine weit verbreitete Praxis. Allerdings gibt es dabei noch einige Einschränkungen, die speziell bei den Hyperlinks zum tragen kommen.
Bisher wurde "nur" der eigentliche Linktext mit ausgedruckt. Mit einer Weiterentwicklung der content-Eigenschaft kann mit CSS3 auch auf das Ziel des Links zugegriffen und mit ausgegeben werden.

Bis dato wird der Rahmen von Elementen, die beim Drucken einen Seitenumbruch durchlaufen, unterbrochen. Das heißt, dass Element hat auf der ersten Seite keinen Rand an der Unterkante und auf der zweiten Seite keinen Rand an der Oberkante.
Mit der neuen Eigenschaft border-break kann bei Bedarf ein Rand an der Ober- und an der Unterkante für das Drucken gesetzt werden. Wenn die Eigenschaft genutzt wird, wird an beiden Kanten ein Rand gesetzt.

Variable Breiten- und Höhenangaben

Bisher ist es innerhalb CSS nur möglich Breiten- und Höhenangaben entweder mit festen Werten oder mit prozentualen Angaben festzulegen.
Mit CSS3 kann man sich diese Längenangaben ausrechnen lassen. Dazu wird es die Eigenschaft calc() geben, mit der das realisiert werden kann.

Beispiel für die Breite von div-Containern:

#left { width: calc( 50% - 2*1em - 5px ); }
#right { width: calc( 70% - 2*1em ); }

Alternatives Box-Modell

Mit CSS3 sollen die Schwächen des bekannten Box-Modells, dass es schon seit CSS 1.0 gibt, beseitigt werden. Eine dieser Schwächen ist die Ermittlung der Gesamtbreite eines Containers, wenn die Breitenangaben in unterschiedlichen Einheiten definiert wurden.
Mit der neuen Eigenschaft box-sizing und dem dazugehörigen Wert border-box wird die angegebene Breite automatisch als die Gesamtbreite der Box interpretiert. Gleichzeitig können damit Längen- und Breitenangaben innerhalb der Box flexibel und unabhängig von Maßeinheiten angegeben werden. Die angegebene Breite im Zusammenhang mit der box-sizing-Eigenschaft bleiben davon unberührt.

Dieses neue Modell ist allerdings kein Ersatz für das bekannte Box-Modell. Es ist "nur" eine Alternative.

Neugestaltung von Rändern

CSS3 wird die Option anbieten, Images als Ränder von HTML-Elementen einzusetzen. Dazu wird es die Eigenschaft border-image neu geben, mit der dies realisiert werden kann. Die neue Eigenschaft benötigt die Angabe von bis zu drei URL's, um die Bilder einzubauen. Zudem können mit den Eigenschaften border-top-image, border-bottom-image, border-left-image und border-right-image für alle Kanten eigene Images definiert werden.

Hinweis: Die Definitionen der CSS-Eigenschaft border-style werden bei einem Einsatz von border-image überschrieben.

Neben den Kanten gibt es bei einem Rahmen auch noch die einzelnen Ecken. In CSS3 wird es auch dafür die Möglichkeit geben, Bilder (= Images) zu definieren. Die dazugehörige Eigenschaft wird border-corner-image heißen. Ebenso wie bei border-image können aber auch alle 4 Ecken einzeln definiert werden: Die dazu nötigen Eigenschaften heißen border-top-left-image, border-top-right-image, border-bottom-right-image und border-bottom-left-image.

Abgerundete Rahmenecken

Mit der in CSS3 neu zur Verfügung stehenden Eigenschaft border-radius können Elemente mit abgerundeten Ecken dargestellt werden. Bei der Darstellung der Ecken wird von einer Ellipse ausgegangen, so dass bei jeder Definition von border-radius zwei Werte angegeben werden müssen: horizontaler und vertikaler Radius der Elipse.
Außerdem kann auch hier für jede Ecke einzeln der Radius festgelegt werden.

Hinweis: Mozilla-basierte Browser unterstützen heute schon die Eigenschaften -moz-border-radius, -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomleft und -moz-border-radius-bottomright, welche die gleichen Eigenschaften haben. Sie sind allerdings propritär und werden wahrscheinlich nicht mehr unterstützt, wenn CSS3 endgültig kommt.

Textgestaltung

Bei der Textgestaltung wird sich einiges neues ergeben, etwa die Möglichkeit einen Zeilenumbruch innerhalb eines Wortes zu ermöglichen. Mit der Eigenschaft hyphenate bietet CSS3 die Option, Zeilenumbrüche innerhalb eines Wortes allgemein zuzulassen oder nicht.

Ebenfalls neu ist die Ausrichtung der letzten Zeile. Die letzte Zeile in einem Textblock oder vor einem geplanten Zeilenumbruch kann mit der Eigenschaft text-align-last nach eigenem Wunsch ausgerichtet werden. Neben den bekannten möglichen Werten werden in CSS3 noch start und end hinzugefügt.

Eine weitere neue Eigenschaft wird text-justify heißen und zur Definition eines Blocksatzes dienen. Sie trägt den unterschiedlichen Schriften und Schreibsystemen auf der Welt Rechnung. Mit Ihr kann festgelegt werden, auf welche Art und Weise der Blocksatz in einem Element erzeugt werden soll.

Sprachausgabe

CSS-Eigenschaften zur Ausgabe von CSS-formatierten Seiten auf Audiosystem waren bereits Teil des Standards CSS 2.0. Nachdem jedoch der Opera der einzige Browser war, der ab der Version 8.0 einen Teil der CSS-Kommandos unterstützt, wurden die CSS-Befehle im Standard 2.1 in den informativen Teil verschoben. Das bedeutet, dass der Browser die Eigenschaften nicht unterstützen musste, um als CSS 2.1-konform zu gelten. Es ist jedoch geplant, die Eigenschaften für die Sprachausgabe erneut in CSS 3 aufzunehmen.

Hintergrundbilder

Für die bekannte CSS-Eigenschaft background-position kann im Boxmodell die Position des Hintergrundbildes nur am Wert der padding-Eigenschaft festgelegt werden. Mit der CSS3-Eigenschaft background-origin erweitern sich die Möglichkeiten auf den Innenabstand, dem Inhalt und dem Rahmen des Containers.

Mit der CSS3-Eigenschaft background-clip kann in einem Container festgelegt werden, wie weit die Hintergrundbilder reichen sollen. Zum Beispiel kann angegeben werden, dass ein Hintergrundbild auch bis zum Außenrahmen angezeigt werden soll.

Die Eigenschaft opacity soll festlegen, mit welcher Transparenz ein Hintergrundbild dargestellt werden soll. Dabei gibt man einen Wert zwischen 0.00 und 1.00 an. Dabei gilt die Regel, dass 1.00 keine Transparenz bedeutet und 0.00 komplette Transparenz darstellt.

Eine Erweiterung der bereits bekannten Eigenschaft background-image bietet die Möglichkeit, mehrere Hintergrundbilder gleichzeitig anzeigen zu lassen. Für die Angabe der einzelnen Bilder gilt das bereits bekannte url()-Prinzip. Bei mehreren Bildern werden die einzelnen Dateinamen durch Komma getrennt angegeben. Beispiel:

background-image:url(bild1.gif), url(bild2.gif)

Ersatz für HTML-Attribut target

Bisher konnte man nur über das Attribut target, welches in einem a-Element angegeben wird, festlegen, wie ein Linkziel geöffnet werden soll. Dies soll im Rahmen von CSS3 mit der neuen Eigenschaft target realisiert werden. Die Eigenschaft soll drei verschiedene Werte bekommen, so dass es möglich sein soll, die Ziel-URL eines Links entweder im gleichen Fenster (none), in einem neuen Tab (tab) oder in einem neuen Browserfenster (window) geöffnet werden soll. Beispiel:

a {target:window}

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Drucken mit CSS

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Ausblick auf CSS 3

Über uns

Cookie-Einstellungen