Daniel Koch
CSS3. Die Referenz für Webentwickler

schnell+kompakt
ISBN: 978-3-86802-658-0

© 2014 entwickler.press
ein Imprint der Software & Support Media GmbH

http://www.entwickler-press.de
http://www.software-support.biz

Ihr Kontakt zum Verlag und Lektorat: lektorat@entwickler-press.de

Bibliografische Information Der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.

Lektorat: Theresa Vögle
Korrektorat: Lisa Pychlau-Ezli
Copy-Editor: Nicole Bechtel
Satz: Dominique Kalbassi
Umschlaggestaltung: Maria Rudi

Alle Rechte, auch für Übersetzungen, sind vorbehalten. Reproduktion jeglicher Art (Fotokopie, Nachdruck, Mikrofilm, Erfassung auf elektronischen Datenträgern oder andere Verfahren) nur mit schriftlicher Genehmigung des Verlags. Jegliche Haftung für die Richtigkeit des gesamten Werks, kann, trotz sorgfältiger Prüfung durch Autor und Verlag, nicht übernommen werden. Die im Buch genannten Produkte, Warenzeichen und Firmennamen sind in der Regel durch deren Inhaber geschützt.

Vorwort

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 diese effektiv einsetzt. Zu jeder CSS3-Eigenschaft werden die verfügbaren Werte 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.

Der Fokus wird auf den CSS3-Eigenschaften liegen. „Ältere“ Eigenschaften werden aber, wenn sie in der Praxis besonders wichtig sind, ebenfalls berücksichtigt.

Das vor Ihnen liegende Buch ist als hilfreicher Begleiter für Ihre tägliche Style-Sheet-Arbeit konzipiert. Eine Einführung in CSS soll es hingegen nicht sein (was natürlich auch den Rahmen dieses Buchs sprengen würde). Es wird davon ausgegangen, dass Sie wissen, was CSS ist und wie es eingesetzt wird. Dazu gehört beispielsweise auch das Wissen, wie sich Eigenschaften weitervererben (inherit) lassen.

Sollten Sie während oder nach dem Lesen des Buchs Fragen oder Anmerkungen haben, Kontakt zum Autor aufnehmen oder Kritik bzw. Lob loswerden wollen, können Sie das über kontakt@medienwerke.de tun – Ihre Nachricht ist herzlich willkommen.

Berlin, September 2014

Daniel 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.