medani-pixel
news
29
Jul 10

CSS3 - Neuheiten

Seit einigen Jahren beherrschen Stylesheets das Webdesign. Mit der neuen Spezifikation CSS3 wird sich im Vergleich zu den aktuellen CSS2.1 Stylesheets einiges ändern. Welche neuen Möglichkeiten sich daraus für das Webdesign ergeben, stellen wir hier kurz vor.

Neuigkeiten gibt es aus dem Bereich der Stylesheets.  Seit mittlerweile fast 10 Jahre entwickelt das W3C die neuen Spezifikationen für CSS3 in enger Zusammenarbeit mit den Browserherstellern. Mittlerweile gilt ca. 1/4 der Spezifikation als „Stabil“.

Viele der neuen Selektoren werden bereits von den verschiedenen Browsern umgesetzt und richtig interpretiert. Auch können die neuen Selektoren gefahrlos in Webdesigns umgesetzt werden, da unbekannte CSS-Anweisungen und Selektoren von den Browsern einfach ignoriert werden.

CSS3 baut vor allem die Pseudoklassen deutlich aus. Eine wichtige Pseudoklasse wird dabei :nth-of-type().
So kann man zum Beispiel Tabellen ganz einfach mit tr:nth-of-type(2n){style-anweisung} jeder zweiten Tabellenzeile eine andere Farbe zuweisen.

Das vermutlich spektakulärste Feature von CSS3 ist die Unterstützung von Webfonts – also herunterladbare Schriftarten. Das ermöglicht Werbeagenturen neue Schriftarten einzusetzen. Überlange Texte, die über das Webdesign Layout hinaus gehen würden, können zusätzlich mit der neuen CSS-Eigenschaft break-word formatiert werden.

Weitere interessante CSS-Eigenschaften sind vor allem Transparenzen und runde Ecken.
Aktuell werden transparenzen und runde Ecken hauptsächlich über komplizierte Verschachtelungen oder Grafiken realisiert.
Runde Ecken werden ab CSS3 einfach mit dem Attribut border-radius zugewiesen, während Transparenz mit dem Attribut opacity gesteuert wird.

Neu ist auch die CSS-Eigenschaft background-size.
Mit ihr ist es möglich für Hintergrundbilder Größen anzugeben. Angenommen werden von background-size Pixel und Prozentwerte.

Abschließend kann man sagen, dass noch viele neue Selektoren und Eigenschaften bis zur offiziellen Freigabe von CSS3 in die Spezifikation einfließen werden. Vieles davon ist durchaus praktisch und wird im Webdesign sehr schnell umgesetzt werden.

  1. Leo sagt:

    Danke, super Artikel!
    Kleiner Schreibfehler: Webfonts, nicht Webfonds.

    1. medaniWG sagt:

      Hallo Leo! Der Tippfehler wurde korrigiert 😉

SENDEN
SENDEN