Wissenswert

Neue CSS-Spezifikationen

Wer in Sachen Webdesign auf dem Stand der Dinge sein will, der muss nicht nur mit den aktuellen Standards vertraut sein, sondern auch wissen, was die Zukunft bringen wird. Dr. Holger Reibold

internet, webdesign, css, textverarbeitung, spezifikation, pseudoelemente

© Internet Magazin

internet, webdesign, css, textverarbeitung, spezifikation, pseudoelemente

Um den Gerüchten um CSS4 ein Ende zu bereiten, hat Tab Atkins junior auf seiner Website ein klares Statement veröffentlicht: "THERE IS NO SUCH THING AS CSS4". Atkins arbeitet für Google am Chrome-Browser, er ist Mitglied der CSS Working Group und arbeitet an verschiedenen anderen Arbeitsgruppen des W3C mit. Somit kommt dieses Statement aus berufenem Munde. Quasi von höchster Instanz wissen wird jetzt, dass die Spezifikation "Selectors Level 4" kein Modul von CSS4 sind, sondern eben nur ein Schritt in die Zukunft von CSS ist. Gleiches gilt auch für andere Spezifikationen wie "CSS Backgrounds and Borders Module Level 2".

Bildübergänge

In CSS 1 und 2 beschränkt sich die Verwendung von Bildern weitgehend auf simple Möglichkeiten wie die Eigenschaft background-image, die lediglich einen URL-Wert unterstützt. Die Spezifikation "CSS Image Values and Replaced Content Module Level 4" erlaubt die Überblendung von zwei Hintergrundbildern mit dem Element cross-fade.

internet, webdesign, css, textverarbeitung, spezifikation, pseudoelemente

© Internet Magazin

Tab Atkins junior ließ alle Gerüchte rund um CSS4 verstummen. Aus dem Zentrum der CSS Working Group kommt das eindeutige Statement, dass es keine CSS4 geben wird. Die Zukunft heißt einfach nur CSS.

Sie geben dazu einfach die beiden URLs der Hintergrundbilder an und bestimmen den Prozentsatz, mit dem das vordere Bild in das hintere überblendet werden soll. Dabei bedeutet der Wert 0 Prozent, dass nur das hintere Bild sichtbar ist, bei 100 Prozent nur das vordere. Wenn Sie den Wert 50 verwenden, erfolgt eine 1:1-Überblendung. Der konkrete Code hierfür sieht wie folgt aus:

background-image: cross-fade(
url("bild1.png"),
url("bild2.png"),
50%);

Durch eine Erweiterung lassen sich weitere Details steuern. Soll die Überblendung der beiden Bilddateien innerhalb von zwei Sekunden erfolgen und sich die Animation unendlich oft wiederholen, so erweitern Sie obigen Code um folgende Zeile:

animation: fading 2s infinite;

Laut Spezifikation ist die Verwendung von cross-fade auf alle Bilder möglich, also auch auf border-image. In Zeiten, in denen Responsive Design eine immer wichtigere Rolle spielt, benötigt man einen Mechanismus, der für die optimierter Renderung der Bilder sorgt. Hierfür sieht die "CSS Image Values and Replaced Content Module"-Spezifikation das Element image-rendering vor. Das Element unterstützt zwei Optionen: Die Standardeinstellung auto für die Optimierung der Bildqualität und crisp-edges für die Optimierung von Detailschärfe und Geschwindigkeit.

Ein Beispiel:

img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-opti
mize-contrast; /* Webkit */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-
neighbor; /* IE */
}

Anfangs waren in der Spezifikation die Werte optimizeQuality und optimizeSpeed vorgesehen, aber die sind inzwischen im auto-Wert aufgegangen.

Optimierte Textverarbeitung

Um Webdesignern mehr Möglichkeiten in Sachen Textmanipulation an die Hand zu geben, hat die CSS Working Group mit dem aktuellen "CSS Text Level 4"-Modul eine Fülle an Verarbeitungsmechanismen vorgesehen. Dazu gehören beispielsweise der Zeilenumbruch, die Ausrichtung, der Umgang mit Leerzeichen sowie Textdekoration- und Transformation. Das Dokument verspricht interessante Verbesserungen für all die Webentwickler, denen die typografische Aufmachung von Inhalten am Herzen liegt.

Eine der interessantesten Textverarbeitungsmöglichkeiten bietet die Eigenschaft text-transform. Sie unterstützt verschiedene Werte. Mit dem Wert capitalize wird der Anfangsbuchstaben eines jeden Worts großgeschrieben, alle anderen Buchstaben bleiben unverändert. Die Werte uppercase beziehungsweise lowercase formatieren den Text groß- beziehungsweise kleingeschrieben.

Großen Raum nimmt in der Spezifikation der Zeilenumbruch ein. In Zukunft werden Sie (fast) die gleichen Umbruchmöglichkeiten nutzen können, wie Sie sie von Ihrer Textverarbeitung kennen. Mit der Eigenschaft line-break können Sie verschiedene Umbrüche definieren. Mit dem Wert auto erfolgt der Zeilenumbruch automatisch durch den User Agent, also den Browser. Wenn Sie einen weniger restriktiven Umbruch verwenden wollen, kommt der Wert loose zum Einsatz. Seine Verwendung ist insbesondere bei kurzen Zeilen wichtig. Um die gängigen Zeilenumbruchregeln anzuwenden, verwenden Sie den Wert normal.

Auch in Sachen Silbentrennung hat "CSS Text Level 4" einige Neuerungen zu bieten. Von CSS3 kennt man die Eigenschaft hyphen mit den mögliche Werten none, manual und auto. Damit legen Sie fest, ob die Silbentrennung prinzipiell deaktiviert ist (none), die Trennung manuell (manual) oder automatisch durch sprachspezifische Regeln (auto) erfolgt. In der Text-Level-4-Spezifikation kommen neue Eigenschaften hinzu. Mit der Eigenschaft hyphenate-character können Sie beispielsweise ein bestimmtes Zeichen als Trennzeichen anlegen. Die Eigenschaft hyphenate-limit-zone bestimmt den maximalen Wert für ungenutzten Raum in einer Zeile. Beim Überschreiten dieses Werts erfolgt die Trennung durch den Browser.

Die Spezifikation sieht bislang zwei weitere praktische Eigenschaften vor: Mit hyphenate-limit-chars bestimmen Sie die Anzahl der Zeichen vor und nach der Trennung. Aus Sicht der Typografie wirkt ein Dokument nicht sonderlich professionell, wenn viele Zeilen mit einer Silbentrennung enden. Auch hierfür hat das Modul die passende Lösung: Mit der Eigenschaft hyphenate-limit-lines können Sie die maximal Anzahl aufeinander folgender Zeilen mit Trennung festlegen.

Pseudoelemente

Auch die Pseudoelemente kennt man von CSS3 und deren Verwendung dürfte den meisten Webdesignern nicht fremd sein. Damit können Sie festlegen, dass vor oder nach einem Element automatisch bestimmte Inhalte eingefügt werden. Mögliche Einfügungen sind statischer Text, beliebige Ressourcen wie beispielsweise Grafiken, aber auch variable Inhalte.

Eine der interessantesten Anwendungsbereiche ist das Einfügen einer Initiale. Dabei wird einfach der erste Buchstabe aus einer Zeile zu Beginn des Absatzes eingefügt. Um eine Initiale zu generieren, muss außerdem eine Texttransformation vorgenommen und der erste Buchstabe großgeschrieben werden. Dazu ein konkretes Beispiel, das die Initale über zwei Zeilen hinweg erzeugt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"><HTML><HEAD><TITLE>Beispiel fuer eine Initiale</
TITLE><STYLE type="text/css">
P { font-size: 12pt; line-height:
1.2 }
P::first-letter { font-size: 200%;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }</STYLE></HEAD><BODY><P><SPAN>Das sind die </SPAN> ersten
Woerter eines Artikels, wie man millio
nenfach im Internet findet.</P></BODY></HTML></body></html>

Besondere Beachtung verdienen die Elemente ::before und ::after, mit denen man verschiedene Elemente vor und nach einem bestimmten Content einfügen kann. Dabei kann man auch mehrere solcher Elemente mit grafischen Effekten mischen. Hierzu ein Beispiel:

div::before {
content: """;
}
div::after {
content: """;
}
div::after(2) {
content: ".";
position: absolute;
bottom: -10px;
right: 20%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #111;
width: 0;
height: 0;
}
div{
position: relative;
float: left;
background: #111;
padding: 1em;
border-radius: 1em;
color: white;
}<div>Mit CSS Pseudo-Elementen lassen
sich spannende Dinge realisieren. </div>

Pseudoelemente sind außerdem über Skripts ansprechbar und auch als Event-Ziel verfügbar. Die Spezifikation sieht auch in diesem Bereich Neuerung vor. So ist beispielsweise der Stil anpassbar. Auch Listen von Pseudoelementen können angelegt werden.

internet, webdesign, css, textverarbeitung, spezifikation, pseudoelemente

© Internet Magazin

Die Gestaltung einer Umrandung entsprechend der Spezifikation "CSS Backgrounds and Borders Module Level 4".

Hintergründiges

Das Modul "CSS Backgrounds and Borders Module Level 4" stellt verschiedene Neuerungen für die Gestaltung von Hintergründen und Rahmen zur Verfügung. Level 4 bietet gegenüber seinem Vorgänger verschiedene Erweiterungen. Die wichtigen sind Rahmenbearbeitung (border-clip), Schatten (box-shadow) und Rahmenformatierung (border). Mit border-clip können Sie die Umrandung eines Bereichs anpassen. Dabei sind beispielsweise durchgehende und unterbrochene Umrandungen möglich, auch ein Mix aus beiden Varianten und die Verwendung von Farbe.

Ein einfaches Beispiel:

border-clip-top: 0 10px 1fr 10px;
border-clip-bottom: 0 10px 1fr 10px;
border-clip-right: 0 5px 1fr 5px;
border-clip-left: 0 5px 1fr 5px;

Mit der Eigenschaft box-shadow können Sie Ihrem Rahmen verschiedene Schatten zuweisen. Der Schatten kann innerhalb und außerhalb des Rahmens positioniert werden. Für die Rahmengestaltung sieht die Spezifikation verschiedene Möglichkeiten vor. Sie können grafische Elemente wie Linien und geometrische Figuren, aber auch Bilder verwenden.

Selektoren

Am meisten Beachtung fand in den letzten Monaten die Spezifikation "Selectors Level 4", die es Ihnen endlich erlaubt, Elternelemente anzusprechen. Unter Webdesignern dürfte sich herumgesprochen haben, dass Selektoren eine große Hilfe bei der Entwicklung von semantischem und performantem Code sein können. Allgemein formuliert repräsentierten Selektoren eine Struktur, die in CSS als Bedingung für die Auswahl von Elementen in einem Dokument verwendet werden kann, um auf diese dann eine bestimmte Aktion anzuwenden. Es kann sich auch um eine einfache Beschreibung eines HTML- oder XML-Fragments handeln.

Über die Selektoren können alle relevanten Elemente in einem Webdokument angesprochen werden, beispielsweise Klassen, Attribute, Links und Pseudoklassen. Die Elemente eines Dokumentenbaums, die durch einen Selektor repräsentiert werden, sind die Subjcets des Selektors. Mit dieser Technik können Sie beispielsweise ein Elternelement ($E) auf Grundlage des Kindelements (F) gestalten.

Hier ein Beispiel:

/* Stil des LI-Elements */
ul > $li > p { border: 1px solid
#ccc; }

Obiger Code bestimmt den Stil des LI-Elements, nicht aber den des P-Elements. Mit dem Selektor ist das einfach:

$ol > li:only-child {
list-style-type: none;
}

In diesem Beispiel wird das OL-Element durch das LI-Kindelement gestaltet. Das Subjekt des Selektors soll dabei explizit durch das Dollarzeichen gekennzeichnet werden. Mit den beidem Pseudoklassen :any-link und :local-link können Sie lokale Elemente ansprechen.

Die Pseudoklasse :any-link wird für allgemeine Links verwendet, :local-link hingegen für Quellen, die sich auf dem gleichen Host befinden.

Das folgende einfache Beispiel verhindert beispielsweise, dass Links, die auf die aktuelle Seite zielen, unterstrichen werden, wenn sie nicht Teil der Navigationsliste sind:

nav :local-link { text-decoration:
none; }

Mit local-link können Sie sogar lokale Links abhängig von der URI ansprechen:

a:local-link {...}
a:local-link(0) {...}
a:local-link(1) {...}
a:local-link(2) {...}
a:local-link(3) {...}

Viel Beachtung fand auch die Einführung des Pseudoklasse matches (), denn damit lassen sich Elemente ansprechen, die bestimmten Argumenten entsprechen. Dazu gibt es auch das passende Gegenstück, über das der Ausschluss von Elementen möglich ist: not().

Der folgende Selektor repräsentiert alle Element außer haus-Elemente:

*:not(haus)

Ein weiteres Beispiel zeigt, wie man alle HTML-Elemente bis auf Links auswählt:

html|*:not(:link):not(:visited)

Fazit

Der modulare Aufbau von CSS ist für alle Entwickler von Browern und von Entwicklungskits ein wahrer Segen, denn so können sie sich peau a peau neue Feature implementieren, ohne gleich vollständige Spezifikationen umsetzen zu müssen. Auch Webdesigner profitieren vom modularen Aufbau, da sie sich so kontinuierlich an neue Features gewöhnen und diese gezielt in ihren Entwicklungen umsetzen können. Doch soviel ist gewiss: CSS ist auf einem guten Weg und wird uns noch manch interessante Möglichkeiten offerieren.

Mehr zum Thema

internet, webdesign, tablets, design
Interface Trends

Mit Smart-TVs, Settop-Boxen und vor allem Tablets verschmelzen die unterschiedliche Bedienkonzepte von TV, Mobile und Desktop. Welche Bedeutung hat…
internet, webdesign, responsive webdesign, Performance, optimierung
Responsives Webdesign

Trotz aller Verzüge gibt es auch einen Schwachpunkt beim Responsive Webdesign: Die Performance ist oft schlecht, da dieselben Ressourcen für…
internet, webdesign, adobe,  Illustrator, CS6
Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook stellte die neue Suche
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Der BGH erklärt das Internet zur Lebensgrundlage.
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.