Neuerungen in CSS3

Die Anforderungen an gut aussehende, suchmaschinenoptimierte und benutzerfreundliche Webseiten sind in den letzten Jahren gestiegen. Cascading Style Sheets (CSS)Version 3 ist eine Aktualisierung der seit 10 Jahren bestehenden letzten CSS2-Version und bringt große Änderungen, die das CSS3-Seminar vorstellt. Zunächst lernen die Teilnehmer die neuen Module kennen, denn CSS3 wird nicht mehr in einer Spezifikation definiert, sondern in vielen kleinen Modulen. Einige Module sind noch in der Spezifikationsphase, andere werden schon vollständig von den aktuellen Browsern unterstützt. Das Seminar konzentriert sich daher auf die Module, die in der Endphase der Spezifikation sind, etwa Selektoren. So stellt der CSS3-Kurs an vielen praxisnahen Beispielen etwa die neuen Attributselektoren und Pseudoklassen vor, die Unterstützung für runde Rahmen und weitere Text-/Absatzformatierungen sowie weitere Neuerungen wie Spalten oder 2D-Transformationen.

Inhalte des Seminars

Entwicklung von CSS2 nach CSS3

• Schwächen von CSS2
• CSS3-Module
• Fortschritt der Standards: Candidate/Proposed Recommendation, Working Draft
• Wiederholung CSS-Selektoren
• Gruppieren von Selektoren
• Kombinatoren: Nachfahr-/Kindkombinator, direkter/indirekter Nachbarkombinator
• Namensräume (CSS Namespaces)
• Zusammenspiel HTML5 und CSS3
• Aktuelle Browser-Unterstützung

Hintergründe und Rahmen

• Wiederholung vom Box-Modell
• Mehrere Hintergrundbilder
• Beschnitt von Hintergrundbildern
• Überblick über alle background-Properties
• Rahmentypen, Breiten, Rundungen
• Rahmen mit Grafiken
• Umbruch von Boxen steuern mit box-decoration-break

Das Texteffekt-Modul CSS Text

• Verarbeitung von Leerraum in HTML
• Wie Leerraum zusammengeführt wird: white-space-collapse
• Zeilenumbruch mit word-break steuern
• Textumbruch mit text-wrap steuern
• Blocksatzsteuerung über text-align, Textzentrierung und text-justify
• text-indent: Einrücken der ersten Zeile steuern
• text-align-last: Zeilenausrichtung für letzte Zeile steuern
• word-spacing für Wortabstände nutzen
• Wie sieht minimaler/maximaler/optimaler Leerraum aus?
• letter-spacing für Zeichenabstände
• Steuerung zur Zusammenfassung von Punktionszeichen
• punctuation-trim für mathematische Formeln verwenden
• Kleine Symbole über text-emphasis setzen
• Photoshop-ähnliche Schattierungen mit text-shadow

Die CSS3-Selektoren

• Universal-Selektor
• Typ-Selektor
• Klassen- und ID-Selektor
• Erweiterungen beim Attribut-Selektor, Teilzeichenketten erkennen
• Namensräume bei CSS3-Selektoren

Pseudo-Klassen in CSS3

• Aufgaben von Pseudo-Klassen
• Dynamische und strukturelle Pseudo-Klassen
• Elemente mit :lang aufgrund der Sprache auswählen
• URI-Ziele mit :target auswählen
• Ein- und Ausblenden von Inhalten mit Hilfe von :target
• Dynamische Pseudo-Klassen :link und :visited
• :hover, :active und :focus für Links
• :enabled, :disabled, :checked, :indeterminate als Kriterium für Gui-Zustände
• :root für HTML-Wurzelelement
• Elemente ohne Kinder mit :empty selektieren
• Kindselektion mit :first-child, :last-child, :nth-child …
• Abwechselnd farbige Tabellenzeilen
• Selektion von Typen mit :first-of-type, :last-of-type, :nth-of-type …
• Logische Verneinung mit not

Pseudo-Elemente in CSS3

• Unterschied Pseudo-Klassen und Pseudo-Elemente
• Elemente vor/hinter einem Element über before/after
• Erste Zeile über ::first-line
• CSS-Formatierungsmöglichkeiten
• Initialen mit ::first-letter

Spalten Modul in CSS3

• Box-Modell und Spalten-Modell
• Anzahl von Spalten steuern
• Breite und Abstände von Spalten
• Spaltenfarbe und -stil
• Spaltenumbruch
• Spaltenausgleich
• Elemente, die über mehrere Spalten laufen
• Überlauf durch zu große Elemente steuern

Vorstellung weiterer CSS3-Module

• CSS3 Values and Units, calc-Funktion
• CSS Ruby Modul für Betonungen oder Zusatzerklärungen
• Webtypografie mit CSS Fonts (WebFonts), Fonts laden
• Paginierte Ausgaben, @page-Regel, Boxen, Seitenumbrüche
• CSS für 2D- und 3D-Transformationen