Warum Webautoren schon heute CSS 2.1 verwenden sollten

Michael Jendryschik

Agenda

• CSS (Cascading Style Sheets)
• Versionen
• Fazit
• Änderungen
• Links

CSS (Cascading Style Sheets)

• Sprache zur Formatierungen von strukturierten Dokumenten
• Wird verwendet, HTML- und XHTML-Dokumente für die Ausgabe in unterschiedlichen Medien visuell aufzubereiten
  • Computerbildschirme
  • Drucker
  • Akustische Geräte
  • Handhelds

CSS (Cascading Style Sheets)

• In Kombination mit semantisch reichem (X)HTML erleichtert CSS die Erstellung und Wartung von Webseiten, die
  • weniger Bandbreiten erfordern,
  • zugänglicher sind und dadurch
  • eine größere Klientel erreichen.

Agenda

• CSS (Cascading Style Sheets)
• Versionen
• Fazit
• Änderungen
• Links

Versionen

• CSS 1
  • Veröffentlichung: Dezember 1996
  • Übersichtliche und intuitive Syntax
  • Definition von Farben und Schriftarten
  • Bestimmung von Breiten und Höhen
  • Formatierung und Ausrichtung von Schrift und Text
  • Definition von Abstände und Rahmen

Versionen

• CSS 2
  • Veröffentlichung: Mai 1998
  • 4-facher Umfang von CSS 1
  • Unterstützung medienspezifischer Stylesheets
  • Positionierung von Elementen
  • Tabellenlayout
  • Internationalisierung
  • Automatische Zähler und Nummerierung

Versionen

• CSS 2.1
  • Aktueller Arbeitsentwurf: April 2006
  • Veröffentlichung: Voraussichtlich noch 2006

Versionen

• CSS 2.1
  • Kein neuer Standard, sondern Neudefinition von CSS 2
    • Aufrechterhalten der Kompatibilität mit den Teilen von CSS 2, die bereits auf breiter Basis akzeptiert und implementiert sind
      • Eigenschaften und Werte, die noch überhaupt nicht implementiert wurden, werden entfernt
    • Einfügen aller veröffentlichten CSS-2-Errata
    • Wo Implementierungen in modernen Browsern ganzheitlich vom Standard abweichen, wird der Standard angepasst
    • Einige wenige neue Werte wurden eingeführt

Versionen

• CSS 3
  • Aktuelle Arbeitsentwürfe: 2001 - 2006
  • Veröffentlichung: Voraussichtlich 2007 - 2010
  • Aufteilung in derzeit rund 30 Module
  • Starke Erweiterung des bisherigen Standards, u.a.
    • Mehrspaltigkeit
    • Formatierung von Hypertextverhalten (Popups, auf- und zuklappbare Listen, Fußnoten),
    • Mathematische Formeln
    • Neue Text- und Hintergrundeffekte

Agenda

• CSS (Cascading Style Sheets)
• Versionen
• Fazit
• Änderungen
• Links

Fazit

• Zusammenfassung
  • CSS 1 ist veraltet bzw. vollständig in CSS 2 enthalten
  • CSS 2 ist der aktuelle Standard
  • CSS 2.1 definiert CSS 2 neu, wie fast alle modernen Browser es implementiert haben
    • Bis zur Verabschiedung ist nicht mehr mit inhaltlichen Änderungen zu rechnen
  • CSS 3 gehört die ferne Zukunft

Fazit

• Widerspricht die Verwendung von CSS 2.1 nicht der BITV?
  • Anforderung 3: »Markup-Sprachen (insbesondere HTML) und Stylesheets sind entsprechend ihrer Spezifikationen und formalen Definitionen zu verwenden.«
  • Anforderung 11: »Die zur Erstellung des Internetangebots verwendeten Technologien sollen öffentlich zugänglich und vollständig dokumentiert sein, wie z.B. die vom World Wide Web Consortium entwickelten Technologien.«
    • Bedingung 11.1: »Es sind öffentlich zugängliche und vollständig dokumentierte Technologien in ihrer jeweils aktuellen Version zu verwenden, soweit dies für die Erfüllung der angestrebten Aufgabe angemessen ist.«

Fazit

• CSS 2.1 ist öffentlich zugänglich
• CSS 2.1 ist aktuell

Fazit

• Webautoren sollten ihre Stylesheets nach CSS 2.1 verfassen
  • W3C CSS-Validierungsservice verwenden und als Profil »CSS Version 2.1« angeben
  • Und natürlich: Testen, Testen, Testen!

Agenda

• CSS (Cascading Style Sheets)
• Versionen
• Fazit
• Änderungen
• Links

Änderungen

• Benannte Farben
  • Es wird der Farbwert orange eingeführt
    • #FFA500
    • rgb(255, 165, 0)
  • Nicht verwenden, da nicht alle Browser ihn verstehen und mit der hexadezimalen und RGB-Schreibweise brauchbare Alternativen bereit stehen

Änderungen

• Berechnung der Spezifität
  • Deklarationen, die im style-Attribut im (X)HTML-Quelltext notiert werden, haben eine höhere Spezifizität als jede Regel in einem Stylesheet

Änderungen

• Berechnung der Spezifität
  • Die Spezifität eines Selektors besteht aus vier einzelnen Werten, die nacheinander notiert werden: A, B, C und D.
    1. A wird auf 1 gesetzt für Regeln, die durch ein Attribut style im Quelltext definiert sind, ansonsten 0.
    2. B ist die Anzahl der id-Attribute eines Selektors.
    3. C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudo-Klassen innerhalb des Selektors.
    4. D ist die Anzahl der Elementnamen und Pseudo-Elemente, die der Selektor beinhaltet.

Änderungen

• Berechnung der Spezifität

  • *              /* A=0 B=0 C=0 D=0 -> Spezifität = 0,0,0,0 */
    li             /* A=0 B=0 C=0 D=1 -> Spezifität = 0,0,0,1 */
    li:first-line  /* A=0 B=0 C=0 D=2 -> Spezifität = 0,0,0,2 */
    ul li          /* A=0 B=0 C=0 D=2 -> Spezifität = 0,0,0,2 */
    ul ol+li       /* A=0 B=0 C=0 D=3 -> Spezifität = 0,0,0,3 */
    h1 + *[rel=up] /* A=0 B=0 C=1 D=1 -> Spezifität = 0,0,1,1 */
    ul ol li.red   /* A=0 B=0 C=1 D=3 -> Spezifität = 0,0,1,3 */
    li.red.level   /* A=0 B=0 C=2 D=1 -> Spezifität = 0,0,2,1 */
    #x34y          /* A=0 B=1 C=0 D=0 -> Spezifität = 0,1,0,0 */
    style=""       /* A=1 B=0 C=0 D=0 -> Spezifität = 1,0,0,0 */

  • Die Änderung entspricht der gängigen Praxis. Webautoren haben auf die Art der Berechnung keinen Einfluss.

Änderungen

• Änderung der Werte der Eigenschaft display

  • Folgende Werte wurden entfernt:

    • marker
    • compact
  • Folgender Wert kam neu hinzu:
    • inline-block
    • Das Element wird als Blockelement innerhalb der Textzeile dargestellt, also wie ein Inline-Element, hat aber ansonsten alle Eigenschaften eines Blockelements.
  • Nur an unkritischen Stellen oder als Bugfix verwenden, beispielsweise zur Behebung diverser float-Bugs im IE/Win und IE/Mac bis Version 6

Änderungen

• Änderung der Interpretation der Eigenschaft clip

  • Der Umriss definiert die rechteckige Form des Ausschnitts mit vier Werte in folgender Form:

    • E { clip:rect(<top>, <right>, <bottom>, <left>); }
  • In CSS 2 galten die vier Variablen für den Abstand von der zugehörigen Seite der Box (oben, rechts, unten, links)
  • In CSS 2.1 definieren top und bottom die Abstände von der oberen Außenkante der Box, right und left die Abstände von der linken Außenkante der Box
  • Bedenkenlos zu verwenden. Alle modernen Browser verhalten sich so, wie CSS 2.1 definiert

Änderungen

• Änderung der Werte der Eigenschaft content

  • Folgender Wert wurden entfernt:

    • <uri>
  • Folgender Wert kam neu hinzu:
    • normal
    • Der in der Regel beschriebene zu generierende Inhalt wird nicht erzeugt. Dieser Wert wurde in CSS 2.1 mit Hinblick auf CSS 3 ergänzt, da er sich dort von none deutlich unterscheiden wird.
  • Bedenkenlos zu verwenden. Alle Browser, die content verstehen, verhalten sich so, wie CSS 2.1 definiert

Änderungen

• Hintergrundeigenschaften
  • Die Eigenschaft background-position
    • Schlüsselwörter dürfen mit Längenwerten und Prozentangaben gemischt werden.
      • E { background: white url(bg) left 50% no-repeat; }
      • Mit Bedacht verwenden, da alte Browser bei gemischten Angaben kein Hintergrundbild darstellen.
    • Nicht für Inline-Elemente definiert
  • Die Eigenschaft background-repeat
    • Nicht für Inline-Elemente definiert
  • background-position und background-repeat nicht für Inline-Elemente verwenden.

Änderungen

• Schrifteigenschaften und Texteigenschaften
  • Folgende Werte wurden entfernt:
    • font-stretch
    • font-size-adjust
    • text-shadow
  • Folgende At-Regel wurden entfernt:
    • @font-face
  • Auf die gestrichenen Werte und die At-Regel verzichten, da kaum ein Browser sie bisher implementiert hat.

Änderungen

• Folgende Werte wurden hinzugefügt:
  • pre-wrap
    • Leerraumzeichen werden in voller Länge dargestellt; Zeilenumbrüche werden dargestellt und am Ende der Zeile wird umbrochen
  • pre-line
    • Leerraumzeichen werden zu einem Zeichen zusammengezogen; Zeilenumbrüche werden dargestellt und am Ende der Zeile wird umbrochen
• Nicht verwenden, da kein Browser sie bisher implementiert hat.

Änderungen

• Tabelleneigenschaften
  • Die Eigenschaft caption-side
    • Folgende Werte wurden entfernt
      • left
      • right
  • Die Eigenschaft text-align
    • Folgender Wert wurden entfernt
      • <string>
  • Auf die gestrichenen Werte verzichten, da kaum ein Browser sie bisher implementiert hat.

Änderungen

• Tabelleneigenschaften
  • Die Eigenschaft border-collapse
    • Der Initialwert ist nicht mehr collapse, sondern separate
    • Bedenkenlos zu verwenden, da alle modernen Browser sich so verhalten, wie CSS 2.1 definiert

Änderungen

• Mauszeiger: Die Eigenschaft cursor

  • Folgender Wert wurde hinzugefügt:

    • progress
    • Zeigt einen Wartevorgang an, bei dem der Benutzer noch mit dem Programm interagieren kann
  • Bedenkenlos zu verwenden, da alle modernen Browser den Wert interpretieren

Änderungen

• Berechnung der Breite und Höhe von absolut positionierten Elementen
  • Die meisten modernen Browser verhalten sich so, wie CSS 2.1 definiert

Agenda

• CSS (Cascading Style Sheets)
• Versionen
• Fazit
• Änderungen
• Links

Links

• W3C: Cascading Style Sheets, level 1
• W3C: Cascading Style Sheets, level 2
• W3C: Cascading Style Sheets, level 2 revision 1
• W3C: Cascading Style Sheets, under construction
• Klaus Langenberg: Änderungen und Ergänzungen in CSS 2.1
• Michael Jendryschik: Einführung in CSS

Vielen Dank für Ihre Aufmerksamkeit!

Michael Jendryschik
michael@jendryschik.de