Inhaltsverzeichnis. Vorwort 1. 1 CSS3 heute 9. 2 Umgang mit unterschiedlichen Browsern 33

Transkript

1 D3kjd3Di38lk323nnm v Vorwort Besser mit CSS Was in diesem Buch steht Was nicht in diesem Buch steht Was Sie sonst noch wissen sollten CSS3 heute CSS3 Stand der Dinge CSS3 und die aktuellen Browser...13 Verbreitung der Browser...15 Herstellerspezifische Präfixe CSS3 heute was geht? Leben entsteht durch den kleinen Unterschied Vorteile durch CSS CSS3 für mobile Geräte CSS3 heute ganz pragmatisch Umgang mit unterschiedlichen Browsern Wer kann s? Unschlagbar: Modernizr...35 Auftritt Modernizr...36 JavaScript-Schnittstelle von Modernizr...40 Modernizr einsetzen oder nicht Nachbessern mit JavaScript Eintauchen in proprietäre Untiefen: Filter...43 filter und -ms-filter und der IE Filter zum Nachrüsten von CSS3-Features...46 Filter-Fazit Noch mehr Proprietäres: htc-dateien am Beispiel...48 htc-dateien Grundprinzip...48 Die Rundum-sorglos-Lösung CSS3 PIE Jedem IE sein Süppchen Conditional Comments...50 Florence Maurice, CSS3, dpunkt.verlag, ISBN

2 vi Conditional Comments Basics...50 Conditional Comments und Performance...52 Conditional Comments ohne externe Stylesheets Ausblick Transparenzen opacity weniger ist mehr Transparenz...56 Das Grundprinzip von opacity...56 opacity in den heutigen Browsern Farben notieren: rgb() und hsl()...59 RGB und Co...59 HSL Am Ende steht a: rgba() und hsla()...62 Grundprinzip von hsla() und rgba()...63 Nicht nur als Hintergrund...64 rgba() und hsla() am Beispiel: Bildbeschriftung...66 Strategien für ältere Browser Steckbrief Alle Macht den Selektoren Attributselektoren...76 Das gab es bereits in CSS Neu in CSS 3 Attributselektoren für Teilübereinstimmungen Strukturelle Pseudoklassen...82 Verwandtschaftsbeziehungen...82 Abzählen mit :nth-child()...83 Der Soundsovielte seiner Art...86 Erst-, Letztgeborene und Einzelkind...87 Überblick über die strukturellen Pseudoklassen zur Auswahl bestimmter Kindelemente Weitere Pseudoklassen :empty, :not() und :root :target das Ziel vor Augen...90 Klassisches Beispiel für :target...91 Fortgeschrittene Einsatzbereiche von :target Pseudoklassen für Formularelemente...94 Zustand der Formularelemente...94 Pseudoklassen für die Validierung mit HTML Pseudoklassen am Beispiel: Zebratabelle...96 Nachbessern für ältere IEs...98 Komfortabler nachbessern mit Selectivizr Die liebe Verwandtschaft: allgemeiner Geschwisterkombinator & Co

3 vii 4.8 :checked und Geschwisterkombinator zum Filtern von Inhalten Ausblick: Selektoren der Zukunft Steckbrief Mehr Typografie Webfonts, Textschatten und mehr Webfonts herunterladbare Schriften Schriftformate Die Sache mit den Lizenzen Schriften konvertieren Die richtige Dienste nutzen Google Fonts nutzen Das Webfont Kit von Font Squirrel FOUT vermeiden Umgang mit Schriftauszeichnungen Webfonts, aber richtig Icon-Fonts OpenType-Features Textschatten Schatteneffekte Textschatten in den aktuellen Browsern Bereit für den Umbruch: word-wrap bzw. overflow-wrap Steckbrief Rahmen, Schatten und Hintergrundbilder border-radius: abgerundete Ecken Die Anatomie von border-radius Asymmetrische Rundungen Kreise und Ellipsen Allerlei Verkürzungen Browsergeschichten und Steckbrief Browserunterstützung für border-radius background-image: altbekannte Eigenschaft in neuem Gewand Zeichenreihenfolge Parallax-Effekt Mehr Möglichkeiten für background-position, background-repeat und background-attachment background-clip Reichweite des Hintergrundbilds Schöner Einsatzbereich: transparente Rahmen Browsergeschichten und Steckbrief Florence Maurice, CSS3, dpunkt.verlag, ISBN

4 viii 6.5 background-origin Startpunkt des Hintergrundbildes border-image: Bilder für Rahmen Rahmenbild definieren Browsergeschichten und Steckbrief background-size: Hintergrundbilder skalieren Das Browserfenster füllen Browsergeschichten und Steckbrief Angenehme Schatten: box-shadow Schattensteuerung Buttons Glühendes Textfeld Browsergeschichten und Steckbrief Farbverläufe Geschichte der CSS3-Farbverläufe Lineare Farbverläufe Mehr Optionen für Farben Unterschied zwischen box-shadow und linear-gradient() Richtung des Farbverlaufs bestimmen Radiale Farbverläufe Form des Farbverlaufs Position festlegen Größe bestimmen Sich wiederholende Farbverläufe Alte Webkit-Syntax Muster über Farbverläufe erzeugen Browsergeschichten und Steckbrief Syntaxvarianten Nachbessern in älteren Browsern (= IEs) Steckbrief Transformationen D-Transformationen rotate() Drehen Mittelpunkt für die Drehung festlegen Größenveränderung über scale() Verschieben mit translate() Transformationen kombinieren Gerader Text auf gedrehtem Element Schicke Schatten zwei Nichts erzeugt, gedreht und in den Hintergrund gesetzt Browsergeschichten und Steckbrief...219

5 ix 8.2 3D-Transformationen Position des Betrachters Kindelemente bei Transformationen Sichtbarkeit der Rückseite Mehr als Drehungen D-Transformationen einsetzen Browsergeschichten und Steckbrief Transitions und Animations Transition Einführungsbeispiel transition-property: Auswahl der Eigenschaft Zeitangaben: transition-duration und transition-delay Ablauf des Übergangs Animierte Bildübergänge Animierten Seitenwechsel implementieren Browsergeschichten und Steckbrief Animationen Animation definieren und zuweisen Animationen genauer steuern Glüheffekt bei Button Unendlicher Slider Weitere Effekte Browserkompatibilität und Steckbrief Responsive Webdesign Gestatten: responsive Media Queries Metaangabe für Smartphones Aus fest mach flüssig Ein Desktop-First-Responsive Layout Nachbessern in älteren Browsern Mobile-First-Herangehensweise Bilder im Responsive Webdesign Bilder flexibilisieren Bilder für hochauflösende Displays: Retina & Co Weiterführende Techniken Navigationen im Responsive Webdesign Off Canvas Layoutänderungen die Wahl der Breakpoints Fazit Responsive Webdesign Steckbrief Media Queries Florence Maurice, CSS3, dpunkt.verlag, ISBN

6 x 11 Layouten mit CSS Mehrspaltendarstellung Anzahl der Spalten Breite der Spalten Trennlinie Spalten verbinden Mehr Steuerung bei der Aufteilung Spaltenumbruch vermeiden Browsergeschichten und Steckbrief Flexbox Flexbox-Basics Finetuning: Ausdehnung Leerraumverteilung Praktisch: horizontal und vertikal zentrieren Reihenfolge der Flexitems Flexible Breiten Alles fürs Responsive Webdesign Steckbrief Browsergeschichten Crossbrowser-Lösungen Noch mehr Layoutmodule Neue Einheiten und mehr Freie Wahl des Boxmodells und CSS lernt rechnen box-sizing Wahl des Boxmodells CSS-Rechner Browsergeschichten und Steckbrief Neue Einheiten braucht das Land: rem und vw rem wie em, nur einfacher Passend zur Viewport-Größe Browsergeschichte und Steckbrief Anhang Einführung in LESS/Sass Erste Schritte mit LESS LESS-Konzepte Und Sass & Compass & Co Präprozessor einsetzen oder nicht? Quellen im Netz Browserunterstützung der vorgestellten Features Index 360