Kai Laborenz. CSS-Praxis. Galileo Press

Transkript

1 Kai Laborenz CSS-Praxis Galileo Press

2 Geleitwort der Fachgutachterin 19 Vorwort 21 TEIL I: Einführung 'SBBBD&BSHEii 1.1 Von HTMLzu CSS Nachteile des Tabellenlayouts Was sind Cascading Stylesheets? Wie sehen Cascading Stylesheets aus? »Hallo Welt!«auf CSS 37 U«..-MfamllpliMilMillllMiilM 2.1 Vorteile und Grenzen des CSS-Einsatzes Einschränkungen CSS CSS CSS CSS XHTML, XML und CSS Von HTML zu X(H)TML XML und CSS 53 TEIL II: Grundlegende Konzepte 4.1 Die verschiedenen Selektoren Einfache Element-Selektoren Class-und ID-Selektoren Kombinierte Selektoren Kind-Selektoren (CSS 2) Folgeelement-Selektoren (CSS 2) 71 5

3 4.1.6 Attribut-Selektoren (CSS 2 und CSS 3) Tabellen-Selektoren Pseudo-Klassen und Pseudo-Elemente Universal-Selektor Vererbung Rangfolge und Kaskadierung Die Important-Anweisung Das Kastenmodell Kastenmodell -»The Microsoft Way« Zusammenfallende Außenabstände (collapsing margins) Element-Typen in CSS Layout- und Positionierungsmodelle in CSS Stilanweisungen im HTML-Tag Stilanweisungen im Dokumentenkopf Verlinkte Stylesheets Alternative Stylesheets Importierte Stylesheets Medienspezifische Stylesheets (CSS 2) Medienspezifische Stylesheets mit CSS Namen für Stylesheets, Klassen und IDs Längen- und Größenangaben Absolute Einheiten Relative Einheiten Prozentwerte Farben Hexadezimal (#RRGGBB oder #RGB) Prozentwerte rgb(rrr.rr%, ggg.gg%, bbb.bb%) Dezimalwerte rgb(rrr, ggg, bbb) Dezimalwerte mit Alpha-Kanal (CSS 3) Schlüsselwörter 107 6

4 7.5 URLs(url) Schlüsselwörter CSS-Kommentare 108 TEIL IM: CSS und Anzeigegeräte 8.1 Allgemeines zur Browserkompatibilität Der Box Acid-Test Acid2-Test Ältere Browser Netscape Mozilla, Firefox und Netscape Navigator Firefox Firefox Firefox Mobile Netscape Navigator und andere Gecko- Browser Microsoft Internet Explorer Internet Explorer 3 und Internet Explorer 5.x Internet Explorer Internet Explorer Internet Explorer 8 (Beta-Version) Internet Explorer Mobile Verschiedene Versionen des Internet Explorers parallel betreiben Bugs des Internet Explorers Neue Bugs des Internet Explorers Opera Opera 7 und Opera Opera Opera Mini und Opera Mobile Safari und Konqueror (Webkit/KHTML) Weitere Browser Lynx Screenreader Mobile Geräte Browseranteile 139 7

5 9.1 Strategien für das mobile Web: Mobilisieren statt miniaturisieren Mobile Standards Betriebssysteme für Mobilgeräte und Organizer Stylesheets für mobile Browser ausliefern CSS-Design für den mobilen Einsatz Safari auf dem iphone Opera Mini und Opera Mobile Palm Blazer Weitere mobile Browser Grundsätzliche Probleme Echte -Clients Microsoft Outlook Mozilla Thunderbird Apple Mail Webmail-Dienste Google Mail Yahoo! Mail und Windows Live Mail GMX Web.de Strategien für -Newsletter Techniken für mittels CSS gestaltete und alle anderen s CSS-Eigenschaften im Einzelnen Strategien für die Anwendung von Browserweichen:»To Hack or not to Hack« Doctypes und Doctype-Switching Doctype-Switching Browserweichen und Filter Sternchen-Filter Box-Modell-Hacks 185 8

6 Hochpass-Filter Selektoren-Tricks Opera Catcher le/mac-filter Important-Filter Conditional Comments Browser-Sniffer Filter selber entwickeln CSS-Bugs per JavaScript beheben 194 TEIL IV: CSS in der Praxis 12.1 Webstandards beachten Was ist für eine standardkonforme Webseite erforderlich? DerW3C-Validator Bessere Entwurfsverfahren mit CSS (Rapid Prototyping) Festlegen der Seitenstruktur in semantischem HTML Bereiche ausrichten in Ihrem bevorzugten Browser Einfügen der Inhalte Dynamische Bereiche umsetzen Benutzertests Finetuning, Browsertests und technische Optimierungen Stylesheets organisieren Ordnung durch Stylesheet-Module Allesauf null: Reset-Stylesheets Kurzschreibweise Filter-Management Kommentieren von Stylesheets Sprung-Links, Inhaltsverzeichnis und Farbdefinitionen Fehlersuche in CSS-Dateien 221 9

7 13.1 Die Positionierungsart (»position«) position: static position: relative position: absolute position: fixed float und clear float mit clear aufheben clear ohne zusätzliches Markup Grundlegende Layoutvarianten mit CSS fixed, flexibel, elastisch Zweispalter Dreispalter Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der Breiteneinheiten CSS-Layoutricks Das Problem der (nicht) gleich langen Spalten Minimale und maximale Breiten für flexible Layouts Feststehende Bereiche und CSS-Frames Zentrieren Vorlagen und Frameworks Arbeit mit Vorlagen Arbeiten mit CSS-Frameworks Kritik an CSS-Frameworks YAML Yahoo! Grids Weitere CSS-Frameworks Arbeiten mit Text Schriftgrößen Typografie mit CSS Initialien und Einrückungen Korrekte Auszeichnung von Zitaten CSS-Menüs mit Listen Vertikale Menüs

8 CSS-Flyout-Menüs Horizontale Menüs Schönere Formulare Formulare mit Hintergrund Inline-Fehlermeldungen Arbeiten mit Transparenz Deckkraft von Ebenen steuern PNG: Grafiken mit weichem Verlauf (Alpha-Kanal) Tabellen und CSS Bildergalerie Druckversion per CSS Stylesheet-Wechsler Simpler Styleswitcher mit HTML-Mitteln Styleswitcher mit JavaScript Styleswitcher mit PHP Styleswitcher mit AJAX Browserweiche für Stylesheets Schlanke Dokumente durch CSS Semantik für Suchmaschinen Grundsätze für zugängliche Websites Inhalt und Präsentation trennen Logische Strukturen schaffen Kennzeichnung der natürlichen Sprache und von Sprachwechseln Nicht für bestimmte Geräte arbeiten Abwärtskompatible Seiten erstellen Alternativen bereitstellen Standards beachten Einzelne Tipps für barrierefreie Funktionen Barrierefreie Sprung-Links Link-Auszeichnungen - Nützlich und barrierefrei

9 16.3 Testen Automatische Testprogramme Testen mit einem Screenreader Testen mit Betroffenen Aktion Mensch:»Einfach für Alle« »EfA« »EfA« »EfA« Der Code von»einfach für Alle« »EfA« Lycos Deutschland »CSS Zen Ocean«- Ein Beispiellayout für den»css Zen Garden« Editoren Topstyle Pro Style Master Cascade Adobe Dreamweaver CS AptanaStudio PSPad Serverseitiger CSS-Editor Eledicss Analysewerkzeuge und andere Hilfsmittel Firebug Web DeveloperToolbar(s) Debugbar XyleScope Online-Screenshot-Dienste Virtualisierung Adobe Device Central Hilfsmittel für Barrierefreiheit Tidy OpTool

10 Calipers IrfanView Eigene Tools herstellen: Benutzer- Stylesheets 581 TEIL V: CSS-Referenz 20.1 Alphabetische Übersicht Pseudo-Elemente und Pseudo-Formate :llnk :visited :hover(css2) :focus(css2) :active :lang(css2) :first-line :first-letter :first-child (CSS 2) :before und :after (CSS 2) :not(css3) Inhaltserzeugung content (CSS 2, Änderung in CSS 2.1) countero und counterso counter-increment (CSS 2) counter-reset (CSS 2) quotes(css2) Schriftformatierungen font-family font-style font-variant font-weight font-size font-size-adjust (CSS, nicht in CSS 2.1, wieder da in CSS 3) font-stretch (CSS 2, nicht in CSS 2.1, wieder da in CSS 3) fönt 625 (CSS 2, nicht in CSS 2.1) text-decoration

11 text-shadow (CSS 2, nicht in CSS 2.1, wieder da in CSS 3) text-transform letter-spacing word-spacing (CSS 2) white-space line-height text-indent text-align (Änderung in CSS 2.1) vertical-align direction (CSS 2) unicode-bidi (CSS 2) Farben und Hintergründe color background-color background-image background-repeat background-attachment background-position (Änderung in CSS 2.1) background Kastenformatierungen margin padding border-width border-color border-style border width height overflow (CSS 2) clip (CSS 2, Änderung in CSS 2.1) float clear position (CSS 2) box-sizing (CSS 3) top (CSS 2) right(css2) bottom(css2) left(css2) visibility (CSS 2)

12 opacity (CSS 3) z-index (CSS2) list-style-type list-style-image list-style-position list-style Anzeigemodus display (CSS 1, Erweiterung in CSS 2 - table, Änderung in CSS 2.1, Erweiterung in CSS3-icon) Tabellenformatierungen table-layout (CSS 2) caption-side (CSS 2, nicht in CSS 2.1, wieder da in CSS 3) border-collapse (CSS 2, Änderung in CSS 2.1) border-spacing (CSS 2) empty-cells (CSS 2) speak-header (CSS 2) Benutzeroberfläche Cursor (CSS 2) outline (CSS 2) Seitenlayout (CSS 2) size (CSS 2, nicht in CSS 2.1) marks (CSS 2, nicht CSS 2.1) :left :right :first (CSS 2) page-break-before, page-break-after (CSS 2) page-break-inside (CSS 2) page (CSS 2, nicht CSS 2.1) orphans (CSS 2) widows(css2) Sprachausgabe speak (CSS 2, Änderung in CSS 2.1) volume (CSS 2, Änderung in CSS 2.1) speech-rate (CSS 2, Änderung in CSS 2.1) pause (CSS 2, Änderung in CSS 2.1) cue (CSS 2, Änderung in CSS 2.1) play-during (CSS 2, Änderung in CSS 2.1) voice-familiy (CSS 2, Änderung in CSS 2.1) pitch (CSS 2, Änderung in CSS 2.1) stress (CSS 2, Änderung in CSS 2.1) richness (CSS 2, Änderung in CSS 2.1)

13 azimuth (CSS 2, Änderung in CSS 2.1) elevation (CSS 2, Änderung in CSS 2.1) speak-punctuation (CSS 2, Änderung in CSS 2.1) speak-numeral (CSS 2, Änderung in CSS 2.1) Proprietäre CSS-Eigenschaften Microsoft Firefox Safari/ Webkit Opera 737 A Die DVD-ROM zum Buch 741 B Die Website zum Buch 743 C Die Referenzkarte 745 D Glossar 747 Index

14 Video-Lektionen auf der DVD-Rom 1 CSS-Frameworks: YAML und YUI Crids [01:09 Std.] 1.1 Einleitung [00:29 Min.] 1.2 Der Aufbau des YAML-Frameworks [10:16 Min.] 1.3 YAML-Screenlayouts anwenden [09:33 Min.] 1.4 Spalten anordnen und ausblenden [06:49 Min.] 1.5 Seitennavigation mit YAML gestalten [08:01 Min.] 1.6 Spalten unterteilen mit Subtemplates [05:13 Min.] 1.7 CSS Hacks in YAML [02:49 Min.] 1.8 Druckversion mit Print-Stylesheets erstellen... [05:09 Min.] 1.9 Die Yahoo! User Interface Library (YUI) [05:45 Min.] 1.10 YUIGridsCSS [14:29 Min.] 1.1 Einleitung [00:27 Min.] 1.2 Die Zauberagentur im Überblick [01:30 Min.] 1.3 Seiten anlegen [07:02 Min.] 1.4 YAML- Eine Einführung [05:49 Min.] 1.5 YAML-Die Funktionen [08:38 Min.] 1.6 Die Designvorlage [07:07 Min.] 1.7 TemplaVoilä [11:14 Min.] 1.8 Das Layout anpassen [08:34 Min.] 1.9 Subtemplates [11:40 Min.] 1.10 Die Website konfigurieren [12:13 Min.] 1.11 Top-Navigation erstellen [10:50 Min.] 1.12 Hauptnavigation hinzufügen [10:55 Min.] V