CSS3: Die Referenz für Webentwickler

Von Daniel Koch

Animationen, Schattenwürfe, runde Ecken, Responsive Design, Spaltenlayouts und
Media Queries: All das lässt sich dank CSS3 realisieren. Somit ist CSS3 - neben HTML5 - einer der Grundpfeiler modernen Webdesigns. Dieses Buch zeigt die neuen CSS3- Eigenschaften und beschreibt, wie man sie effektiv einsetzt. Zu jeder CSS3-Eigenschaft werden die verfügbaren Werte und der jeweilige Browsersupport gezeigt. Webentwickler erhalten dadurch ein unverzichtbares Werkzeug für die tägliche Arbeit mit CSS3. Das Buch ist explizit darauf zugeschnitten, schnell und effizient die notwendigen Informationen zu liefern.

• Sprache: Deutsch
• Herausgeber: entwickler.press
• Erscheinungsdatum: 6. Okt. 2014
• ISBN: 9783868026580

Buchvorschau

Koch

1 CSS-Maßeinheiten und Co.

In diesem Buch werden Sie bei vielen CSS-Eigenschaften als mögliche Werte Längenangabe oder Zahl finden. Die entsprechenden Informationen und eine Kurzzusammenfassung der möglichen Maßeinheiten finden Sie in diesem Kapitel. Darüber hinaus bekommen Sie eine Übersicht der möglichen Selektoren und deren tatsächliche Unterstützung durch die einzelnen Browser. Kurzum, die folgenden Seiten liefern alles, was Sie als CSS-Entwickler während Ihrer täglichen Arbeit benötigen.

Maßeinheiten

Viele CSS-Eigenschaften erwarten einen Wert mit einer entsprechenden Maßeinheit. Welche Maßeinheiten in CSS möglich sind, zeigen die Tabellen 1.1 bis 1.5.

Tabelle 1.1: Relative Längenangaben

Tabelle 1.2: Absolute Längenangaben

Tabelle 1.3: Prozentuale Angaben

Tabelle 1.4: Winkel

Zahlenwerte

2 Herstellerkürzel

Die Browserhersteller haben sich bereits vor mehreren Jahren dazu entschlossen, CSS-Features zu implementieren, selbst wenn diese noch nicht offiziell zum CSS3-Standard gehörten. Damit es nach der Verabschiedung der finalen CSS3-Spezifkation aufgrund von veränderter CSS-Syntax keine Anzeigeprobleme gibt, sollte man herstellerspezifische Anweisungen verwenden. Ein Beispiel soll diesen Aspekt verdeutlichen.

Auf vielen Webseiten werden mittlerweile „runde Ecken" verwendet. Im CSS3-Arbeitsentwurf gibt es dafür die Eigenschaft border-radius. Die Mozilla- und WebKit-Browser bieten für eine experimentelle Unterstützung dieser Eigenschaft alternative Schreibweisen:

moz-border-radius

webkit-border-radius

Auf diesem Wissen aufbauend, könnte eine border-radius-Definition nun folgendermaßen aussehen:

#teaser {

  height: 65px;

  width: 160px;

  border: 3px solid #ccc;

  border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

}

Das Problem dabei: Eine solche CSS-Syntax wird niemals valide sein. Andererseits können Sie so bereits jetzt CSS3-Features einsetzen, die dann auch tatsächlich das machen, was sie sollen.

Die folgende Tabelle 2.1 zeigt die Problematik der Browsersuffixe anhand der verschiedenen border-Eigenschaften.

Tabelle 2.1: „border"-Eigenschaften der Browser

So müssten die Definitionen also angepasst werden. Nachfolgend eine Übersicht der gängigsten Herstellerkürzel:

-webkit- = WebKit

-moz- = Mozilla

-o- = Opera

-ms- = Microsoft

-mso- = Microsoft Office

-wap- = The Wap Forum

-atsc- = Advanced Television Standards Committee

Weiterführende Informationen zum Thema gibt es auch auf den Seiten des W3C unter http://www.w3.org/TR/CSS21/syndata.html# ven­dor-keywords.

3 Attribute und Selektoren

Über Selektoren wird geregelt, auf welche Weise CSS-Eigenschaften den Klassen oder HTML-Elementen zugeordnet werden. Die allgemeine Syntax ist, auch wenn es eine Vielzahl an Selektoren gibt, immer die gleiche.

Selektor {

  CSS-Eigenschaft1: Wert;

  CSS-Eigenschaft2: Wert;

  CSS-Eigenschaft3: Wert;

}

Auf den folgenden Seiten werden die verschiedenen Selektoren vorgestellt.

3.1 Einfache Selektoren

CSS stellt eine Reihe von Selektoren zur Verfügung, die sich sehr einfach anwenden lassen und schon sehr lange zum Sprachumfang gehören.

Der Universalselektor

Mit dem Universalselektor wird jedes vorhandene Element mit den Style-Sheet-Definitionen verknüpft. Er ist dort am nützlichsten, wo man unterschiedlichen Elementen dieselben Eigenschaften zuordnen will.

*.wichtig {

  font-weight: bold;

  color: red;

}

* {

  font-size: 14px;

  color: #ff0000;

}

Klassenselektoren

Mit Klassenselektoren können HTML-Elemente mit Klassenattributen ganz gezielt selektiert werden. Im betreffenden HTML-Element muss dazu das Attribut class angegeben werden.

h1 {

  font-size: 12px;

  font-style: italic;

}

h1.rahmen {

  border: 1px solid #000;

}

Typ- bzw. Elementselektoren

Hierüber können einem bestimmten HTML-Element die gewünschten Eigenschaften zugewiesen werden. Durch die folgende Syntax werden alle em-Elemente im HTML-Dokument blau eingefärbt.

em {

  color: blue;

}

ID-Selektoren

Mit diesen Selektoren können Elemente, die mit einer ID dateiweit eindeutig gekennzeichnet wurden, formatiert werden.

#linkeseite {

  font-size: small;

}

3.2 Attributselektoren

Hierüber lassen sich Elemente anhand ihrer Attribute ansprechen. Dabei stehen die folgenden Varianten zur Verfügung:

[att] – Das Element muss nur das Attribut enthalten. Ob auch ein Wert übergeben wird, ist unerheblich.

a[hfref] – Es werden alle Hyperlinks () markiert. Auf Anker-Definitionen () trifft das jedoch nicht zu.

[align=left] – Markiert alle Elemente, deren Attribut align den Wert left besitzt.

[attr~=wert] – Es werden alle Elemente markiert, in denen wert in einer durch Leerzeichen getrennten Werteliste enthalten ist.

[attr|=wert] – Markiert ein Element, wenn innerhalb des Attributs der angegebene Wert am Anfang einer durch Bindestrich getrennten Zeichenfolge steht.

img[width=200] – Hier werden alle Grafiken markiert, die eine Breite von 200 Pixel besitzen.

Ein Beispiel:

h1[title] {

  color: blue;

}

3.3 Strukturpseudoklassen

Eine interessante Neuerung in CSS3 sind die Strukturpseudoklassen. Dank ihnen kann man beispielsweise jede zweite Zeile einer Tabelle einfärben.

Dokumentwurzel