Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

CSS der Zukunft

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.

Kommentare

Dwayne
am 24.12.2005 - 13:55

Das mit dem "Marquee" finde ich interessant. Ich wurde schon hin und wieder von jemandem angesprochen, ob ich marquee, in Form eines Newstickers, nicht in sein Website einbauen könnte. Bisher habe ich das immer mit "nicht spezifiziert" oder "das können wir auch anders lösen" verhindern können, weil ich das auch designtechnisch nicht so schön finde :D
Aber wenn ich das richtig verstanden habe, kann darüber, wie das nun im Endeffekt aussehen wird, noch nicht viel gesagt werden, oder?

Permanenter Link

Uwe Keim
am 25.12.2005 - 09:55

Jede irgendwann mal einfach benutzbare Spezifikation strebt scheinbar danach von Version zu Version komplizierter zu werden so daß keiner sie mehr anwenden kann.

Mir fällt da spontan neben CSS noch C/C++ und C# ein.

Permanenter Link

Christian Simon
am 25.12.2005 - 11:42

Irgendwie muss ich gestehen, dass mich dieser ganze Schnickschnack á la marqueen nicht sonderlich interessiert - einzig die neuen Selektoren machen einen sinnvollen Eindruck.
Aber es ist ja jetzt schon chaotisch. Man kann kaum noch ein Dokument mit mehr als den einfachsten Formatierungen aufsetzen; schon kommt irgendein Browser daher und kennt irgendeinen Selektor, irgendein Attribut oder sonst was nicht - oder stellt es einfach falsch dar.
Ich habe nicht sehr viel Lust, in 5 Jahren für jeden zweiten Browser ein eigenes Stylesheet synthetisieren zu müssen, das dann in der nächsten Version sowieso wieder über den Haufen geworfen wird.
Sinnvoller wäre das Ganze mit CSS3, wenn man sich darauf verlassen könnte, dass die Browserhersteller die Spezifikationen auch umsetzen (oder es wenigstens probieren).

Permanenter Link

Carsten Witt
am 25.12.2005 - 22:52

Herzlichen Dank an das webkrauts-Team für diesen famosen und spannenden Adventskalender!

Permanenter Link

tobias
am 26.12.2005 - 09:33

Ich hatte viel Spaß mit dem Adventskalender und hab viel gelernt. Von mir aus kann der das ganze Jahr gemacht werden. Jeden Tag häppchenweise etwas CSS/HTML etc. und am Ende des Jahres ist man deutlich.

Vielen Dank nochmals!

Permanenter Link

Heiko
am 26.12.2005 - 12:17

Klasse Artikel und ein würdiger Abschluss des Adventskalenders 2005, allen einen guten & gesunden Rutsch ins Jahr 2006

Permanenter Link

André Lieder
am 31.10.2006 - 20:22

Ich finde CSS wurde mit der Zeit immer komplexer. Soweit ist das nicht schlimm, jedoch merke ich immer wieder das letztlich nur die grundlegenden Attribute bei dem Bau einer (simplen) Webseite gebraucht werden.

Die Beschreibung mit den Selektoren ist aber wirklich eine gute Hilfe, dank!

Permanenter Link

Frischeblog
am 17.03.2007 - 09:54

CSS wird in der Tat immer umfangreicher. Nicht zuletzt weil es 100 verschiedene Browser gibt, die alle etwas anders damit umgehen. Nichtsdestotrotz ist CSS ein sehr mächtiges Tool im vergleich zu html mit tabellendesign. Die Seiten sind einfach dann nur einen bruchteil so groß.

Permanenter Link

Jens Meiert (Autor)
am 08.12.2007 - 12:36

Der Artikel ist mittlerweile in einigen Punkten veraltet; beachten Sie bitte die revidierte Fassung, die den Stand 2007 widerspiegelt.

Permanenter Link

Thomas
am 22.04.2008 - 01:59

Sicherlich wird CSS immer umfangreicher und damit auch komplizierter. Es ergeben sich kontinuierlich weitere Möglichkeiten die mit neuen Befehlen einher gehen.
Jeder kann bei den Basics bleiben, wenn nicht unbedingt mehr benötigt wird, da meist simples CSS vollkommen ausreicht...

Permanenter Link

Die Kommentare sind geschlossen.