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 ID
s verzichtet werden kann – dies ist derzeit in der Praxis schwer zu realisieren beziehungsweise basiert mehr auf
kontextuellen Selektoren. Einige Beispiele:
h1 ~ div
trifft auf allediv
-Elemente zu, denen einh1
-Element vorangeht;a[href^='http://']
trifft auf allea
-Elemente zu, derenhref
-Attribut mit der Zeichenkette "http://" beginnt;img[src$='.gif']
trifft auf alleimg
-Elemente zu, derensrc
-Attribut mit der Zeichenkette ".gif" endet;div[title*='belanglos']
trifft auf allediv
-Elemente zu, derentitle
-Attribut die Zeichenkette "belanglos" beinhaltet;:root
trifft auf das Hauptelement des Dokuments zu (in HTML würde der Selektorbody:root
nicht zutreffen);tr:nth-child(2n)
(dasselbe wietr:nth-child(even)
) trifft auf alletr
-Elemente zu, die das zweite Kind ihres Elternelements sind, in diesem Fall also jede gerade Tabellenzeile (für jede ungerade Zeile gilttr:nth-child(2n+1)
beziehungsweisetr:nth-child(odd)
);img:nth-of-type(2n)
trifft auf jedes zweiteimg
-Element zu (man beachte den Unterschied zur Pseudoklasse:nth-child(n)
!);li:last-child
trifft auf das letzteli
-Element einer Liste zu;address:only-child
trifft auf alleaddress
-Elemente zu, die einziges Kind ihres Elternelements sind;h2:target
trifft auf alleh2
-Elemente zu, derenid
-Attributswerte dem Fragmentidentifikator des Dokumentaufrufs entsprechen (beim Aufruf der URLhttp://www.example.org/#einleitung
triffth2:target
auf das Element<h2 id="einleitung" />
zu);input:disabled
trifft auf alleinput
-Elemente zu, die "deaktiviert" sind;div:not(.error)
trifft auf allediv
-Elemente zu, deren Klasse nichterror
lautet;p::selection
trifft auf jede vom Benutzer vorgenommene Auswahl oder Hervorhebung einesp
-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.