Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

CSS der Zukunft

CSS 3 nimmt immer mehr Konturen an. Und auch wenn CSS 3, das im Gegensatz zu CSS 1 und 2 aus einzelnen "Modulen" besteht, in seiner Gesamtheit auch 2008 noch keine offizielle W3C-Spezifikation sein wird, sind einige Module wie das Syntax- oder Farben-Modul relativ weit fortgeschritten. Dieser Artikel beschreibt ein paar Neuerungen, die mit unterschiedlicher Wahrscheinlichkeit mit CSS 3 kommen werden.

Eine Anmerkung vorab: Daß manches aus CSS 3 auch bereits implementiert wurde, darf nicht darüber hinwegtäuschen, daß bisher noch kein einziges CSS-3-Modul Empfehlungsstatus erreicht hat, also einer Spezifikation entspricht.

Mehr Freiheit durch mehr Selektoren

Dies steht fest: CSS 3 wird einige neue Selektoren mitbringen. Derzeit sieht der Entwurf vor, drei neue Attributsselektoren (E[foo^='bar'], E[foo$='bar'] und E[foo*='bar']), eine Reihe neuer Pseudoklassen (wie E:root und E:not(s)) sowie einen neuen Geschwisterkombinierer ~ (E ~ F) einzuführen. Zudem wird syntaktisch zwischen Pseudoelementen und -klassen unterschieden werden, indem Pseudoelemente (wie ::first-line) mit zwei Doppelpunkten, Pseudoklassen (wie :last-child) aber nur mit einem Doppelpunkt beginnen.

Die neuen Selektoren werden es ermöglichen, wesentlich einfacheren HTML-Code zu schreiben, da in sehr vielen Fällen auf Klassen und IDs verzichtet werden kann – dies ist derzeit in der Praxis schwer zu realisieren beziehungsweise basiert mehr auf kontextuellen Selektoren. Einige Beispiele:

• h1 ~ div trifft auf alle div-Elemente zu, denen ein h1-Element vorangeht;
• a[href^='http://'] trifft auf alle a-Elemente zu, deren href-Attribut mit der Zeichenkette "http://" beginnt;
• img[src$='.gif'] trifft auf alle img-Elemente zu, deren src-Attribut mit der Zeichenkette ".gif" endet;
• div[title*='belanglos'] trifft auf alle div-Elemente zu, deren title-Attribut die Zeichenkette "belanglos" beinhaltet;
• :root trifft auf das Hauptelement des Dokuments zu (in HTML würde der Selektor body:root nicht zutreffen);
• tr:nth-child(2n) (dasselbe wie tr:nth-child(even)) trifft auf alle tr-Elemente zu, die das zweite Kind ihres Elternelements sind, in diesem Fall also jede gerade Tabellenzeile (für jede ungerade Zeile gilt tr:nth-child(2n+1) beziehungsweise tr:nth-child(odd));
• img:nth-of-type(2n) trifft auf jedes zweite img-Element zu (man beachte den Unterschied zur Pseudoklasse :nth-child(n)!);
• li:last-child trifft auf das letzte li-Element einer Liste zu;
• address:only-child trifft auf alle address-Elemente zu, die einziges Kind ihres Elternelements sind;
• h2:target trifft auf alle h2-Elemente zu, deren id-Attributswerte dem Fragmentidentifikator des Dokumentaufrufs entsprechen (beim Aufruf der URL http://www.example.org/#einleitung trifft h2:target auf das Element <h2 id="einleitung" /> zu);
• input:disabled trifft auf alle input-Elemente zu, die "deaktiviert" sind;
• div:not(.error) trifft auf alle div-Elemente zu, deren Klasse nicht error lautet;
• p::selection trifft auf jede vom Benutzer vorgenommene Auswahl oder Hervorhebung eines p-Elements zu.

In der Schwebe sind zudem Vorschläge wie die :matches- beziehungsweise :has-Pseudoklasse, die es ermöglichen würde, Elemente zu formatieren, die bestimmte Kinder haben: p:has(span) trifft auf alle Absätze zu, die ein span-Element beinhalten.

Nicht mehr ein, sondern zwei Boxmodelle mit box-sizing

Mit der box-sizing-Eigenschaft wird CSS 3 eine alternative Form des CSS-Boxmodells bieten. Nach CSS 1 und 2 definieren die Werte der width- und height-Eigenschaften die Breite und Höhe des Inhalts eines Elements, nicht seiner gesamten Box (mitsamt Inhalt, Innenabstand, Rahmen und Außenabstand). Der Standardwert von box-sizing, content-box, entspricht diesem Modell. Der alternative Wert, border-box, bezieht in die Breite und Höhe neben dem Elementinhalt auch Innenabstand und Rahmen ein.

Während der Code

div#beispiel {
padding: 50px;
width: 300px;
}

gemäß CSS 1 und 2 eine Gesamtbreite von 400 Pixel ergibt, wird dieselbe Regel mit der Deklaration box-sizing: border-box; in einer Breite von 300 Pixel resultieren, wobei dem Elementinhalt aufgrund des horizontalen Gesamtinnenabstands von 100 Pixel nur noch 200 Pixel zustehen würden.

Assistive Technologien und der reader-Medientyp

Spätestens mit Dafürhalten des Barrierefreiheitsexperten Joe Clark wurde der Medientyp reader in den Entwurf zu CSS 3 aufgenommen. Die bisherigen CSS-Spezifikationen sehen es vor, daß ein User-Agent zu einer bestimmten Zeit immer nur einen Medientyp beziehungsweise eine Ausgabeart verwendet, auch wenn er mehrere unterstützen und zwischen diesen wechseln darf. Der reader-Medientyp würde einige dieser Ausgabearten (wie screen und speech) gewissermaßen vereinen.

Prinzipiell könnte dieser Medientyp angewendet werden, um die bekannten Probleme zum Beispiel mit dem "Fahrner Image Replacement" zu umschiffen:

@media reader {
  h1 span {
  visibility: visible;
  }
}

Werte berechnen mit calc

Eine der ersehntesten Neuerungen in CSS 3 könnte die calc-Funktion werden – leider ist sie bislang noch fast gar nicht spezifiziert. Wenn sie es in angedachter Form in die Spezifikation schafft, wird sie es ermöglichen, Werte einer Eigenschaft wie folgt zu berechnen (hier bei drei angenommenen spalte-Containern):

div.spalte {
float: left;
margin: 1em;
width: calc(100%/3 - 2*1em);
}

Mehrere Hintergrundbilder mit background-image

Eine nützliche Veränderung erfährt wahrscheinlich die bereits bekannte background-image-Eigenschaft, die mit der neuen Spezifikation mehrere Hintergrundbilder zulässt. In der einfachsten Form sieht diese vor, daß bei Angabe von zwei Hintergrundbildern (in kommaseparierter Form) das erste über dem zweiten angezeigt wird:

html {
background-image: url(bild-1.gif), url(bild-2.gif);
}

In Kombination mit anderen background-Eigenschaften (wie background-position, background-repeat, aber auch dem neuen background-size) ergeben sich hieraus einige neue Möglichkeiten für Designer und Entwickler. Da dieser Artikel nur kurz auf zu erwartenden CSS-3-Zauber eingeht, wird Interessierten ein Blick in das CSS-3-Hintergrund- und Rahmen-Modul nahegelegt.

"Transparenter" mit opacity

Die opacity-Eigenschaft macht offiziell, was abseits der Spezifikation bereits in proprietärer Form vom Internet Explorer (via filter) und Gecko-User-Agents (via -moz-opacity) angeboten wird: Die Änderung der Deckkraft eines Elements. Bilder, die nur mit halber Deckkraft dargestellt werden sollen, würden mit der neuen Eigenschaft wie folgt bedacht werden:

img {
opacity: .5;
}

Abgerundete Ecken mit border-radius

Eine weitere oft gewünschte Formatierungsmöglichkeit stellen abgerundete Ecken dar, was in CSS 3 mit der border-radius-Eigenschaft adressiert werden soll. Ein ein Pixel breiter gepunkteter schwarzer Rahmen, der in allen Ecken mit fünf Pixel Radius abgerundet wird, könnte dann einfach erzielt werden:

div {
border: 1px dotted black;
border-radius: 5px;
}

Anmerkung: Die Spezifikation beschreibt bisher noch nicht, wie die border-Kurzschreibweise border-radius integriert, aus diesem Grund wurde border-radius im Beispiel separat gekennzeichnet. Mit der neuen Eigenschaft können übrigens auch Ellipsen beschrieben werden: border-radius akzeptiert zwei Längenangaben, wobei deren erste den horizontalen, die zweite den vertikalen Radius definiert (Ausnahmen davon sind noch nicht hinreichend spezifiziert).

Neue Fenster und Tabs mit target

Die target-Eigenschaft ist eine neue Eigenschaft, die aller Voraussicht nach als Kurzschreibweise für die Eigenschaften target-name, target-new und target-position dienen wird. An dieser Stelle soll nur der Einsatz der target-new-Eigenschaft beschrieben werden, die mit den drei erlaubten Werten window, tab und none auch sehr einfach gestrickt ist:

a {
target: tab;
}

…womit sich alle Links in einem neuen Tab öffnen würden (dies funktioniert, auch wenn hier die Kurzschreibweise target anstelle von target-new eingesetzt wird). Die Eigenschaft target-name mit ihrem Standardwert current spezifiziert den Namen des Linkziels, target-position mit dem Standardwert above die Plazierung des Ziels.

Anmerkung: Mit XHTML 2.0 werden voraussichtlich mehr potentielle Ziele als nur a-Elemente zur Anwendung der target-Eigenschaft zur Verfügung stehen, denn bisher sieht der W3C-Entwurf vor, daß das href-Attribut auf allen Elementen angegeben werden darf, also alle Elemente einen Hypertext-Link repräsentieren können.

Zurück in die Zukunft mit marquee

Zum Ende dieses kleinen Ausblicks auf CSS 3 begrüßen wir die CSS-Antwort auf das proprietäre und "ausgestorbene" marquee-Element: Die marquee-Eigenschaft, Kurzform für die Eigenschaften marquee-style, marquee-direction, marquee-speed und marquee-repetition. Zwar können nur vage und deshalb noch nicht stichhaltige Argumente gegen diese Eigenschaft(en) vorgebracht werden, doch wir bringen unsere besondere Wiedersehensfreude zum Ausdruck, indem wir diese Neuigkeit nur erwähnen.