Seite 2: Webstandards I

Inhaltsverzeichnis

Runde Sache mit Webstandards

Runde Ecken sind in modernen Screendesigns fast schon Pflicht, und obwohl der Trend mittlerweile dahin geht, runde Ecken dezent einzusetzen, werden sie für die nächsten Jahre ein wichtiges Stilmittel bleiben. Das umso mehr, da IE 9 künftig mit der CSS-Eigenschaft border-radius umzugehen versteht und damit auch runde Ecken ohne den Einsatz entsprechender Grafiken erlaubt. Die im Testing Center veröffentlichten Tests zeigen, dass Microsoft es mit der border-radius-Unterstützung ernst meint: Die mehr als 30 Tests zeigen im direkten Vergleich, dass die Preview besser abschneidet als aktuelle Browser anderer Hersteller. Darüber hinaus hat Microsoft angekündigt, weitere Teile des CSS Backgrounds and Borders Module zu unterstützen.

IE 9 als Preview unterstützt jetzt die Eigenschaft opacity, sodass Webautoren für Transparenzeffekte nicht mehr auf den proprietären Alpha-Filter oder transparente PNGs zurückgreifen müssen. Eine weitere Neuerung ist die Unterstützung des RGBA-Farbmodells, den das W3C im CSS Color Module definiert. Dabei handelt es sich um kein Farbmodell im engeren Sinn, sondern um eine Erweiterung des bekannten RGB-Modells durch einen (vierten) Alphawert. Dieser bestimmt die Transparenz der angegebenen Farbe und liegt wie bei opacity zwischen 0.0 (völlige Transparenz) und 1.0 (völlige Deckkraft). Ein Element E mit der Deklaration

E { background-color: rgba(255, 255, 255, 0.6); }

hat einen weißen Hintergrund mit 60 Prozent Deckkraft. Im Gegensatz zur Eigenschaft opacity ist nicht das komplette Element mitsamt seinem Inhalt inklusive aller Nachfahren transparent, sondern – in diesem Fall – nur die Hintergrundfarbe. Genauso ist es möglich, teiltransparente Schrift oder Rahmen zu erzeugen.

Aufgeholt haben die IE-Entwickler hinsichtlich der Unterstützung der CSS3-Selektoren. Den CSS3-Selectors-Test auf CSS3.Info besteht die Preview mit Bravour: Alle 578 Tests durchläuft sie erfolgreich. Damit können Webautoren bald browserübergreifend mit Struktur-Pseudoklassen wie E:first-child und E:last-child (E als erstes beziehungsweise letztes Kind seines Elternelements) arbeiten, was mittelfristig Auszeichnungen wie <li class="first"> überflüssig machen dürfte. Selbst der "mathematische Selektor" :nth-child(n) funktioniert in der Preview. Wenn man das n durch einen Zähler ersetzt, kann man alle Kinder an ungerader (E:nth-child(2n+1)) beziehungsweise gerader (E:nth-child(2n)) Position herausfinden – die Schlüsselwörter odd und even bewirken dasselbe.

Endlich könnten Webautoren auf einfache Weise Tabellenzeilen unterschiedlich einfärben:

/* Zeilen mit ungerader Nummer */
tr:nth-child(odd) {
  color: black;
  background-color: white;
}
/* Zeilen mit gerader Nummer */
tr:nth-child(even) {
  color: black;
  background-color: #ddd;
}

Solche Regeln finden sich seit Jahren in den Stylesheets zahlreicher Websites (Stichwort: Progressive Enhancement). Bald können IE-Nutzer ebenfalls davon profitieren.

IE 9 unterstützt jetzt auch die Elementstatus-Pseudoklassen :enabled, :disabled und :checked, über die Webentwickler Formularelemente wie Schaltflächen, Optionsfelder oder Kontrollkästchen abhängig von ihrem Status gestalten können.

Anders als die erste Preview kann die zweite Vorschauversion mit CSS3 Media Queries umgehen. Hier zieht Microsoft lediglich nach und implementiert eine CSS-Funktion, mit dem aktuelle Versionen der Konkurrenten Firefox, Opera, Safari und Chrome seit einziger Zeit umzugehen wissen. Media Queries beschränken die Einbindung von CSS auf Fälle, die sogenannte "Media Features" bestimmen. Es handelt sich um Ausdrücke, die CSS-Eigenschaften ähneln und die Ausgabe eines Stylesheets oder die Anwendung einer Regel davon abhängig machen, ob das Gerät oder der Browser die Einschränkung erfüllt oder nicht.

Das über das folgende link-Element eingebundene Stylesheet wird nur dann berücksichtigt, wenn das Ausgabemedium ein Computerbildschirm ist, dessen Breite maximal 300 Pixel beträgt:

<link rel="stylesheet" type="text/css" href="style.css"
      media="screen and (max-width: 300px)" />

Auch Regeln innerhalb eines style-Elements können Webautoren per Media Queries einschränken. Im folgenden Beispiel ändert sich die Hintergrundfarbe des body-Elements abhängig davon, wie ein Nutzer das Ausgabegerät, beispielsweise ein iPad, in der Hand hält.

<style type="text/css">
  @media all and (orientation: portrait) {
    body { background-color: white; }
  }

  @media all and (orientation: landscape) {
    body { background-color: black; }
  }
</style>

Microsoft demonstriert die Anwendung von Media Queries am Beispiel einer Bildergalerie, deren Darstellung von der Breite des Browserfensters abhängig ist. Abbildung 2 zeigt, dass sich die Anzahl der Bilder pro Zeile sowie die Menge der dargestellten Elemente ändern. Dafür sorgen unter anderem folgende Media Queries, die die Wirkungsbereiche der darin enthaltenen Regeln entsprechend einschränken:

@media (min-width: 950px) {
  /* Regeln für die Darstellung in breiten Browserfenstern */
}

@media (min-width: 450px) and (max-width: 950px) {
  /* Regeln für die Darstellung auf Netbooks */
}

@media (max-width:450px) {
  /* Regeln für die Darstellung auf mobilen Geräten */
}