CSS der Zukunft

Artikel vom 24. Dezember 2005 (↻ 8. Dezember 2007), exklusiv für den Webkrauts-Adventskalender 2005. ISSN 1614-3124, #18. Schwerpunkt: (RSS-Feed für alle Themen).

Dieser Artikel ist stellenweise veraltet.

CSS 3 nimmt langsam weitere Konturen an. Und auch wenn CSS 3, das im Gegensatz zu CSS 1 und 2 aus einzelnen Modulen besteht, in seiner Gesamtheit auch 2010 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: Dass manches aus CSS 3 auch bereits implementiert wurde und damit schon verwendet werden kann, darf nicht darüber hinwegtäuschen, dass bisher noch kein einziges CSS-3-Modul Empfehlungsstatus erreicht hat, also einer Spezifikation entspricht.

Inhalt

  1. Mehr Freiheit durch mehr Selektoren
  2. Nicht mehr ein, sondern zwei Boxmodelle mit box-sizing
  3. Assistive Technologien und der reader-Medientyp
  4. Werte berechnen mit calc
  5. Mehrere Hintergrundbilder mit background-image
  6. »Transparenter« mit opacity
  7. Abgerundete Ecken mit border-radius
  8. Neue Fenster und Tabs mit target
  9. ZurĂĽck in die Zukunft mit marquee

Mehr Freiheit durch mehr Selektoren

Dies steht fest: CSS 3 bringt einige neue Selektoren mit. 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, indem Pseudoelemente (wie ::first-line) mit zwei Doppelpunkten, Pseudoklassen (wie :last-child) aber nur mit einem Doppelpunkt beginnen.

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

In der Schwebe sind zudem Vorschläge wie die :matches- bzw. :has-Pseudoklasse, die es ermöglichen würde, Elemente zu formatieren, die bestimmte Kinder haben: p:has(span) träfe 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 Pixeln ergibt, wird dieselbe Regel mit der Deklaration box-sizing: border-box; in einer Breite von 300 Pixeln resultieren, wobei dem Elementinhalt aufgrund des horizontalen Gesamtinnenabstands von 100 Pixeln nur noch 200 Pixel zustehen würden.

Ein anderes CSS-3-Modul geht derzeit sogar von weiteren Werten aus; es ist abzuwarten, wo und wie diese Eigenschaft letztendlich genau definiert wird.

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, dass ein User-Agent zu einer bestimmten Zeit immer nur einen Medientyp bzw. 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 zum Beispiel die bekannten Probleme mit dem Fahrner Image Replacement zu umschiffen: 

@media reader {

  h1 span {
    visibility: visible;
  }

}

Werte berechnen mit calc

Eine der ersehntesten Neuerungen in CSS 3 wird die calc-Funktion werden, und nach und nach nimmt ihre Definition Formen an. In angedachter Form wird sie 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);
}

calc soll nach aktuellen Vorstellungen natĂĽrlich auch in der Kurzform einiger Eigenschaften einsetzbar sein, wie im folgenden Fall bei einem ĂĽber diesen CSS-Ausdruck berechneten AuĂźenabstand nach oben/unten sowie links/rechts: 

p {
  margin: calc(1em - 1px) calc(1em - 2px);
}

Mehrere Hintergrundbilder mit background-image

Eine ebenfalls erbetene Veränderung erfährt auch die bereits bekannte background-image-Eigenschaft, die mit der neuen Spezifikation mehrere Hintergrundbilder zulässt. In der einfachsten Form sieht diese vor, dass 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 seit langem 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 – und gerne mal mit zusätzlichem HTML erzwungene – Formatierungsmöglichkeit stellen abgerundete Ecken dar, was in CSS 3 mit der border-radius-Eigenschaft berücksichtigt werden soll. Ein ein Pixel breiter gepunkteter schwarzer Rahmen, der in allen Ecken mit fünf Pixeln Radius abgerundet wird, könnte dann einfach erzielt werden: 

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

Die Spezifikation beschreibt bislang nicht, ob und 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 einfach gestrickt ist: 

a {
  target: tab;
}

… womit sich alle Links in einem neuen Tab öffnen würden (dies funktioniert, auch wenn hier die Schreibweise 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 Platzierung des Ziels.

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, dass das href-Attribut auf allen Elementen angegeben werden darf, also alle Elemente einen Hyperlink 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 nahezu »ausgestorbene« marquee-Element: Die marquee-Eigenschaften, die via overflow-style: marquee; ins Leben gerufen und mittels marquee-style, marquee-play-count, marquee-direction und marquee-speed verfeinert werden dürfen. 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 lediglich erwähnen.

War dies nützlich oder interessant? Teile diesen Beitrag, und unterstütze meine Arbeit, indem du mit meinen E-Books lernst!

Ăśber mich

Jens Oliver Meiert, am 9. November 2024.

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Webentwickler, Manager und Autor. Ich habe als technischer Leiter und Engineering Manager für kleine und große Unternehmen gearbeitet, ich bin ein gelegentlicher Mitwirkender an Webstandards (wie HTML, CSS, WCAG) und ich schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung und im Engineering Management, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Sei jederzeit kritisch, interpretiere wohlwollend und gib Feedback.)