Vergleichende Evaluierung der Unterstützung von W3C-Standards … · 2005. 12. 5. · 2. Einleitung 2.1. Eine kurze Vorstellung des W3C Das World Wide Web Consortium (W3C) wurde

Vergleichende Evaluierung derUnterstützung von W3C-Standards

durch Web-BrowserMarkus Domko

Copyright © 2005 Markus Domko

Am Lehrstuhl für Internet-Technologie

Prof. Dr. Gerd Wagner

Brandenburgische Technische Universität Cottbus

Fakultät 1: Mathematik, Naturwissenschaften und Informatik

Institut für Informatik

Eingereicht von: Markus Domko

Matrikelnummer: 2045899

Studiengang: Informations- und Medientechnik

eMail: [email protected]

Cottbus, 24. 09. 2005

1

Table of Contents

1. Aufgabenstellung und Lösungsansatz ............................................................................. 62.Einleitung ........................................................................................................................7

2.1. Eine kurze Vorstellung des W3C ......................................................................... 72.2. Einordnung der Web-Standards und ihrer Versionen .......................................... 8

2.2.1. Von HTML zu XHTML ........................................................................... 82.2.2. Cascading Style Sheets ............................................................................. 10

3. XHTML 1.0 .................................................................................................................... 133.1. Warum man XHTML verwenden sollte .............................................................. 133.2. Einführung in die Terminologie ........................................................................... 13

3.2.1.Terminologie .............................................................................................133.2.2. Allgemeine Begriffe .................................................................................. 14

3.3.DTD .....................................................................................................................153.3.1.Elementtyp-Deklaration ............................................................................163.3.2.Attributlisten-Deklaration .........................................................................163.3.3.Entity-Deklaration .....................................................................................17

3.4. Aufbau von XHTML 1.0 Dokumenten ................................................................ 173.4.1.XML-Deklaration .....................................................................................173.4.2.Dokumenttyp-Deklaration ........................................................................173.4.3.Namensräume ...........................................................................................183.4.4.Dokumentenkopf .......................................................................................193.4.5.Dokumentenrumpf ....................................................................................19

3.5. Unterschiede zu HTML ....................................................................................... 203.5.1. Wohlgeformte Dokumente ........................................................................ 203.5.2.Kleinschreibung ........................................................................................203.5.3. Attributwerte und Attributminimierung .................................................... 203.5.4. Script- und Style-Elemente ....................................................................... 213.5.5.Fragmentbezeichner ..................................................................................213.5.6.Element-Ausschlüsse ................................................................................213.5.7. Medientypen und Dateiendungen ............................................................. 22

4. XHTML 1.1 .................................................................................................................... 234.1. XHTML 1.1 - modulbasiertes XHTML ............................................................... 234.2. Aufbau von XHTML 1.1 Dokumenten ................................................................ 234.3. Die XHTML 1.1 Module ..................................................................................... 24

4.3.1. Structure Module ...................................................................................... 254.3.2. Text Module .............................................................................................. 254.3.3. Hypertext Module ..................................................................................... 254.3.4. List Module ............................................................................................... 264.3.5. Object Module .......................................................................................... 264.3.6. Presentation Module ................................................................................. 264.3.7. Edit Module .............................................................................................. 26

Vergleichende Evaluierung der Unterstützung von W3C-Standards durch Web-Browser

2

4.3.8. Bidirectional Text Module ........................................................................ 264.3.9. Forms Module ........................................................................................... 274.3.10. Table Module .......................................................................................... 274.3.11. Image Module ......................................................................................... 274.3.12. Client-Side Image Map Module .............................................................. 274.3.13. Server-Side Image Map Module ............................................................. 284.3.14. Intrinsic Events Module .......................................................................... 284.3.15. Metainformation Module ........................................................................ 284.3.16. Scripting Module .................................................................................... 284.3.17. Stylesheet Module ................................................................................... 284.3.18. Style Attribut Module ............................................................................. 294.3.19. Link Module ............................................................................................ 294.3.20. Base Module ........................................................................................... 294.3.21. Ruby Annotation Module ....................................................................... 29

4.4. Unterschiede zu XHTML 1.0 strict ..................................................................... 295. XHTML 2.0 .................................................................................................................... 31

5.1. Ziele von XHTML 2.0 ......................................................................................... 315.2. Aufbau von XHTML 2.0 Dokumenten ................................................................ 325.3. Unterschiede zu früheren XHTML Versionen .................................................... 33

5.3.1. Strukturierende Elemente .......................................................................... 335.3.2.Navigationslisten .......................................................................................345.3.3.Bilder .........................................................................................................345.3.4.Typen ........................................................................................................345.3.5.Tabellen .....................................................................................................355.3.6. Bidirektionaler Text .................................................................................. 355.3.7. Editierter Text ........................................................................................... 355.3.8.Verlinkungen .............................................................................................355.3.9.Metainformationen ....................................................................................355.3.10. Funktion (role) ........................................................................................ 365.3.11.Events ......................................................................................................365.3.12.Formulare ................................................................................................365.3.13. Frames und Framesets ............................................................................. 36

5.4. Fehlende DTD ...................................................................................................... 376.CSS2.1 ............................................................................................................................38

6.1.Grundlagen ...........................................................................................................386.1.1. Aufbau von CSS-Dokumenten ................................................................. 386.1.2.Selektoren .................................................................................................386.1.3. Die Kaskade .............................................................................................. 426.1.4. Berechnung von Eigenschaftswerten ........................................................ 436.1.5. Vererbung von Eigenschaftswerten .......................................................... 446.1.6.@-Regeln ..................................................................................................44

6.2. Das Box-Modell ................................................................................................... 456.2.1. Ausdehnung einer Box .............................................................................. 46

6.3. Das visuelle Formatierungsmodell ...................................................................... 47


3

6.3.1.Box-Arten .................................................................................................486.3.2. Positionierung von Boxen ......................................................................... 496.3.3. Überlappende Boxen ................................................................................. 496.3.4. Visuelle Effekte ........................................................................................ 50

6.4. Automatisch erzeugter Inhalt ............................................................................... 506.5. Farben und Hintergründe ..................................................................................... 506.6. Schrift- und Textformatierung ............................................................................. 51

6.6.1.Schrift-Eigenschaften ................................................................................516.6.2.Text-Eigenschaften ...................................................................................52

6.7. Unterschiede zu CSS2 .......................................................................................... 526.7.1.Spezifität ...................................................................................................526.7.2.Vererbung .................................................................................................536.7.3. clip-Eigenschaft ........................................................................................536.7.4. Schrift- und Textformatierung .................................................................. 53

7.CSS3 ...............................................................................................................................547.1.Modularisierung ...................................................................................................547.2. Das Selektor-Modul ............................................................................................. 57

7.2.1.Namensraum .............................................................................................577.2.2. Neue Attribut-Selektoren .......................................................................... 587.2.3. Neue Pseudo-Klassen ................................................................................ 587.2.4. Neue Pseudo-Elemente ............................................................................. 607.2.5. ~Kombinierer ........................................................................................... 607.2.6. Spezifität von Selektoren .......................................................................... 60

7.3. Kaskadierung und Vererbung .............................................................................. 617.4. Das Box-Model .................................................................................................... 62

7.4.1. Neue Eigenschaften des Box-Models ....................................................... 637.4.2. Umverlagerte Eigenschaften ..................................................................... 63

7.5. Das Farbmodul ..................................................................................................... 647.5.1.Transparenz ...............................................................................................657.5.2.Farbprofile .................................................................................................657.5.3.Farbwerte ..................................................................................................65

7.6. Das Media-Queries-Modul .................................................................................. 657.6.1.Media-Features .........................................................................................667.6.2. Medientyp: reader ................................................................................... 67

7.7. Modul für mehrspaltige Layouts .......................................................................... 677.7.1. Aufbau des Spaltenlayouts ........................................................................ 67

8.Untersuchung ..................................................................................................................708.1. Die Test-Kandidaten ............................................................................................ 70

8.1.1. Internet Explorer 6 .................................................................................... 708.1.2. Internet Explorer 7 beta 1 ......................................................................... 708.1.3. Firefox 1.0 ................................................................................................. 708.1.4. Firefox 1.5 beta 1 ...................................................................................... 718.1.5. Opera 8.0 ................................................................................................... 718.1.6. Konqueror 3.4.0 ........................................................................................ 71


4

8.2. Die Browser-Tests ............................................................................................... 728.2.1.XHTML-Tests ...........................................................................................728.2.2.CSS-Tests ..................................................................................................75

8.3. Auswertung der Browser-Tests ............................................................................ 828.3.1.XHTML ....................................................................................................838.3.2.CSS ...........................................................................................................938.3.3.Zusammenfassung .....................................................................................101

9.Schlussbemerkungen .......................................................................................................1039.1.Zusammenfassung ................................................................................................1039.2.Ausblick ...............................................................................................................104

Bibliography .......................................................................................................................105A. Eidesstattliche Erklärung ............................................................................................... 106

Table 1. Abkürzungsverzeichnis

CERN European Organisation for Nuclear Research

CSAIL Computer Science and Artificial IntelligenceLaboratory

CSS Cascading Style Sheets

DARPA Defense Advanced Research Projects Agency

DTD Document Type Definition

ERCIM European Research Consortium for Informat-ics and Mathematics

HTML Hypertext Markup Language

LCS Laboratory of Computer Science

MIT Massachusetts Institute of Technology

PNG Portable Network Graphics

RDF Resource Description Framework

Relay NG Regular Language for XML Next Generation

SGML Standard Generalized Markup Language

SVG Scalable Vector Graphics

URI Uniform Resource Identifier

URL Uniform Resource Locater

W3C World Wide Web Consortium

XHTML Extensible Hypertext Markup Language

XML Extensible Markup Language


5

1. Aufgabenstellung und Lösungsansatz

Das Medium Internet hat sich in den vergangenen Jahren zu einem ständigen Begleiter fürMenschen aller Altersgruppen und Gesellschaftsschichten entwickelt. Die zentraleSchnittstelle zwischen dem Mensch und dem Internet bilden dabei die Web-Browser.

Diese Arbeit soll untersuchen, in wie weit die am weitesten verbreiteten Web-Browser die In-ternet-Standards XHTML und CSS des W3C unterstützen. Die wichtigsten Merkmale derStandards sollen herausgearbeitet werden. Darauf aufbauend gilt es Test-Dokumente zu en-twerfen, anhand derer sich die einzelnen Browser bezüglich der Unterstützung derW3C-Standards vergleichen lassen.

Zunächst werden die drei Versionen XHTML 1.0, XHTML 1.1 und XHTML 2.0 vorgestellt.Es wird für jeden dieser Standards beschrieben, wie Dokumente, die konform zu dem jeweili-gen Standard sind, aufgebaut sein müssen. Dabei wird besonders darauf eingegangen,wodurch sich die Standards zueinander unterscheiden. Die aus dem theoretischen Teil resul-tierenden Tests sind mehr darauf ausgelegt, die Browser dahingehend zu untersuchen, obDokumente eines Standards von den Browsern überhaupt verarbeitet werden. Es werden zwarfür alle Elemente der Standards XHTML 1.0 und XHTML 1.1 in die Test-Dokumenteaufgenommen, wichtiger ist es jedoch herauszufinden, ob die allgemeinen Regeln, die dieXHTML-Standards von dem Vorgänger HTML abgrenzen, von den einzelnen Browserbeachtet werden. Zu diesem Zweck wurde eine Reihe von Test-Dokumenten erstellt, die denneuen strengeren Regeln widersprechen.

Die Ausführungen zu XHTML 2.0 sind eher als Ausblick zu betrachten, da sich dieser Stan-dard zurzeit noch im Entwicklungsstadium befindet. Zu diesem zukünftigen Standard wurdejedoch trotzdem ein einfaches Test-Dokument erstellt.

Der zweite Standard, den diese Arbeit betrachtet, umfasst ebenso zwei Versionen: CSS2.1und CSS3. Dabei werden zunächst die wesentlichen Eigenschaften von CSS2.1 herausgear-beitet. Es wird beschrieben, wie CSS-Dokumente aufgebaut sein müssen und wie die Eigen-schaften von den Browsern interpretiert werden sollten. Da CSS2.1 ein sehr mächtiger Stan-dard ist, sind die Tests darauf ausgelegt, nur die wichtigsten Eigenschaften und Werte zuüberprüfen.

CSS3 befindet sich ebenfalls noch in der Entwicklung. Es wird das Grundkonzept des neuenStandards vorgestellt und darüber hinaus werden einige Veränderungen zu CSS2.1aufgeführt.

Die Auswertung der Ergebnisse der Browser-Tests beschränkt sich bewusst darauf, dieeventuell aufgetretenen Fehler aufzuzeigen. Wie die Quellcodes von Dokumenten zu modi-fizieren sind, damit eine einheitliche Darstellung und Funktionalität in allen Browserngleichermaßen gewährleistet wird, ist nicht Teil dieser Arbeit.


6

2. Einleitung

2.1. Eine kurze Vorstellung des W3C

Das World Wide Web Consortium (W3C) wurde im Oktober 1994 von Tim Berners-Lee inZusammenarbeit mit dem CERN (European Organization for Nuclear Research) am MIT(Massachusetts Institute of Technology), LCS (Laboratory for Computer Science) gegründet.Unterstützt wurde er dabei außerdem von der DARPA (Defense Advanced Research ProjectsAgency) und der Europäischen Kommission. Tim Berners-Lee ist seither Direktor des W3Cund maßgeblich an der Entwicklung von Web-Standards beteiligt (ihm ist z. B. auch dieErfindung des World Wide Web zuzuschreiben). Das internationale Konsortium wird vomMIT/CSAIL (Computer Science and Artificial Intelligence Laboratory) mit Sitz in den USA,der ERCIM (European Research Consortium for Informatics and Mathematics) in Frankreichund der Keio University in Japan geleitet. Zu diesen Organisationen kommen noch weltweitdiverse W3C-Mitglieder aus den Bereichen der Wirtschaft und Forschung hinzu. Um nichtnur das Internet weiter zu entwickeln, sondern auch die eigenen Standards und Richtlinienglobal zugänglich zu machen, unterhält das W3C 14 World Offices und stellt Übersetzungender technischen Reports in 44 Sprachen bereit (vgl. Jacobs 2005).

Das internationale Konsortium hat es sich zur Aufgabe gemacht, das World Wide Web durchRichtlinien und Web-Standards zu verbessern. Vier langfristige Ziele wurden definiert (vgl.Tikwinski 2005).

1. Das Web für Jedermann

Das Web als Kommunikationsmedium, Wissenspool oder Grundlage fürGeschäftsbeziehungen aller Art, sollte jedem Menschen zur Verfügung stehen. Dabeisteht Unabhängigkeit im Vordergrund, Unabhängigkeit von Hardware, Software undNetzinfrastrukturen, Unabhängigkeit von Sprache und Kultur, sowie physischen odergeistigen Einschränkungen.

2. Das Web auf allen Geräten

Der PC ist nicht mehr die einzige Maschine, über die wir heute auf das Internet zu-greifen können. Mit dieser Zielsetzung wird versucht die große Vielzahl von internet-fähigen Endgeräten zu bedienen. Das Spektrum dieser Geräte reicht heute vom Handyüber Smartphones und PDAs bis hin zu interaktiven Fernsehern oder Kiosksystemen.Bei all diesen Geräten soll der Zugriff auf die Web-Dienste durch einheitliche Standardserleichtert werden.

3. Wissensschatz

Mit dem Hintergrund die Arbeit für den Menschen zu erleichtern ist das W3C bestrebt,das Internet in einen nicht nur für Menschen, sondern auch für Maschinen (Computern)verständlichen Informationspool umzuwandeln. Stichwort hierbei ist das Semantische


7

Web, welches eben die Bereitstellung von Informationen über Inhalte, von z. B. Doku-menten oder Bildern, in maschinenlesbare Form beinhaltet und es Programmenermöglicht auf diese Informationen zu zugreifen.

4. Sicherheit und Vertrauen

Geschäftsprozesse, die über das Web abgewickelt werden, verlangen ein hohes Maß anSicherheit und Vertrauen, da es zu keinem direkten persönlichen Kontakt der beteiligtenPersonen kommt. Es werden Technologien gefördert, die die nötige Sicherheit in Bezugauf Kommunikationsprozesse, Dienstleistungen im World Wide Web und internet-basierte Transaktionen gewährleisten.

Seit bestehen des W3C wurden über 80 sog. Recommendations (Empfehlungen)veröffentlicht. Recommendations, sind als de-facto Standards zu verstehen, da das W3C imVergleich z. B. zur ISO (International Organization for Standardization) keine Standards ver-abschieden darf. Diese Empfehlungen sind Spezifikationen bzw. eine Ansammlung vonRichtlinien, die von den Mitgliedern und dem Direktor des W3C bestätigt sind und an diesich alle Web-Publisher halten sollten, um ein "sauberes", allen Menschen zugängliches Webzu erreichen. Die erste W3C Recommendation, Portable Network Graphics 1.0 (PNG) - einlizenzfreies Grafikformat, wurde 1996 veröffentlicht.

Bevor jedoch ein sog. technischer Report zur Recommendation wird, durchläuft er folgendeStufen: Working Drafts (Arbeitsentwürfe) werden von den jeweiligen Arbeitsgruppen(W3C-Mitglieder) veröffentlicht und skizzieren die Richtlinien von zukünftigen Standards.Sie sind jedoch nicht als Referenz-Material zu verstehen, sondern werden denW3C-Mitgliedern und der Gemeinschaft zur Überprüfung bereitgestellt. Die nächste Stufesind die sog. Candidate Recommendations (Empfehlungskandidaten). Diese Dokumentegenügen den technischen Ansprüchen der W3C-Arbeitgruppen und werden veröffentlicht, umErfahrungen bezüglich der Implementierung zu sammeln. Als letzte Vorstufe im Entwick-lungsprozess einer Empfehlung stehen die Proposed Recommendations(Empfehlungsvorschläge). Dokumente diesen Status sind ausgereifte und bereits überprüftetechnische Reports, die dem Beratungskomitee (W3C Advisory Committee) zur endgültigenÜberprüfung vorgelegt werden. Erst nachdem ein Report diese Stufen durchlaufen hat, in de-nen die W3C-Mitglieder das Dokument immer wieder überprüft und gegebenenfalls kor-rigiert haben, wird er als Recommendation veröffentlicht und gilt als Standard (vgl. Berners-Lee 2005).

2.2. Einordnung der Web-Standards und ihrer Versio-nen

2.2.1. Von HTML zu XHTML

Die Geschichte der Hypertext Markup Language (HTML) geht bis in das Jahr 1989 zurück,


8

in dem Tim Berners-Lee eine erste Version der Sprache definierte. Zum W3C Standard wirdHTML zum ersten Mal 1996 in der Version 3.2. Die frühen Versionen beherrschen jedochnur reinen Text. Die Unterstützung von Bildern, Tabellen oder auchFormatierungsmöglichkeiten mittels Style Sheets sind noch nicht vorhanden und folgen erstnach und nach in den späteren Spezifikationen. Die letzte, auf SGML (Standard GeneralizedMarkup Language) basierende, HTML-Version erschien im Dezember 1999. Die HTML4.01-Spezifikation hat den Status einer W3C Recommendation (Empfehlung), mit erweiterterUnterstützung von Multimedia-Erweiterungen, Script-Sprachen und Style Sheets. Zusätzlichzur Formatierung von Dokumenten durch externe Cascading Style Sheets (CSS), besteht dieMöglichkeit HTML-Dokumente mit internen Style-Angaben oder durch einzelne Elementeder HTML-Spezifikation zu gestalten. Das führte zu einer Vermischung von Designangaben,Struktur und Inhalt, was wiederum eine schlechte Strukturierung und Wartbarkeit vonHTML-Dokumenten zur Folge hatte.

Eine klare Trennung von Design und Struktur war das erklärte Ziel bei den neuen Internet-Standards. Nachfolgend wird ein Überblick über die verschiedenen XHTML- und CSS-Spezifikationen gegeben.

• XHTML 1.0

Die erste Neuformulierung und Erweiterung von HTML auf der Basis von XML(Extensible Markup Language) erschien im Januar 2000 als Recommendation. XHTML1.0 (Extensible Hypertext Markup Language) enthält alle auch in HTML 4.01 vorhande-nen Elemente und stellt die Übergangsversion von HTML zu XHTML dar.

Da keine neuen Elemente eingeführt wurden, sondern die Elemente aus HTML 4 benutztwerden, kann die XHTML 1.0 Spezifikation nicht losgelöst von der HTML 4.01 Spezi-fikation betrachtet werden. Mit XHTML 1.0 als Übergangsversion, wurde zunächst dieTrennung von Struktur und Gestaltung realisiert. Die Änderungen sind jedoch noch nichtso umfangreich, um den Webentwicklern den Umstieg zu erleichtern.

Der nächste Schritt in der Entwicklung von HTML zu XHTML ist die Modularisierung derAuszeichnungssprache. Die HTML-Spezifikation ist im Laufe ihrer Entwicklung immerstärker erweitert worden, sodass ein sehr umfangreicher und unübersichtlicherer Standardentstanden ist. Da aber selten der komplette Umfang der Auszeichnungssprache benötigtwird, stellt die Aufteilung der Spezifikation in Module eine sinnvolle Entwicklung dar.

• XHTML Basic

In XHTML Basic werden die minimal notwendigen Module beschrieben, die ein Doku-ment vom Typ XHTML benötigt. Hintergrund von XHTML Basic ist es, die Vielzahl derheutigen (mobilen) Endgeräte mit Zugriff auf das Internet zu bedienen und sie nicht we-gen einer zu umfangreichen und komplexen Sprache auszuschließen. Diese Spezifikation


9

bietet eine minimale Konfiguration, z. B. einfachen Text, Tabellen und Grafiken, die auchvon Kleinstgeräten mit niedrigen Prozessortakt und geringem Speicher verarbeitet werdenkönnen. Gleichzeitig besteht jedoch die Möglichkeit XHTML Basic durch verschiedeneModule zu erweitern, wenn sie benötigt werden.

• Modularisierung von XHTML

Die "Modularisierung von XHTML" stellt eine Aufteilung von XHTML 1.0 in abstrakteModule dar. Die Verwendung von abstakten Modulen, die als Teilmengen von XHTMLverstanden werden können, erlaubt es verschiedenste Geräte, die nicht demherkömmlichen PC entsprechen, mit für sie zugeschnittenen Inhalten zu versorgen. Mitder Möglichkeit, die Spezifikation immer wieder durch neue Module zu erweitern,besteht die Chance mit den technischen Entwicklungen neuer Geräte mitzuhalten, ohneden XHTML-Standard zu verletzen. Auch ist die Spezifiktation an sich verständlichergeworden, da sie durch die Module klar strukturiert ist. Als Beispiele sind hier stellvertre-tend die vier Kernmodule genannt: Strukturmodul, Textmodul, Linkmodul und Listen-modul.

• XHTML 1.1

Diese Spezifikation verbindet die Übergangsversion XHTML 1.0 mit der Modular-isierung von XHTML und bildet die Grundlage aller zukünftigen XHTML-Doku-menttypen. Dabei wurden alle Elemente und Attribute entfernt, die in HTML 4 als "depre-cated" (missbilligt) gekennzeichnet, jedoch von XHTML 1.0 toleriert wurden. Damitentspricht diese Spezifikation der XHTML 1.0 strict Variante, das bedeutet auch, dassFrames endgültig nicht mehr erlaubt sind.

• XHTML 2.0

Der neuste Dokumententyp aus der XHTML-Familie ist XHTML 2.0, hat jedoch bis jetzt(Stand: 27. Mai 2005) nur den Status Working Draft (Arbeitsentwurf). Ende 2005 sollXHTML 2.0 als Standard (Recommendation) verabschiedet werden. Es wird ebenfallsmodular aufgebaut sein, wobei die Module jedoch teilweise neu definiert werden. DesWeiteren werden 40 Elemente und 90 Attribute, die es in vorherigen Versionen vonXHTML noch gab, gestrichen. Neu hinzukommen lediglich 10 Elemente und ca. 30 At-tribute (vgl. Braun 2005 S. 172-178).

2.2.2. Cascading Style Sheets

Mit CSS steht Webentwicklern eine Sprache zur Verfügung, mit der sie ihre strukturiertenDokumente formatieren können. Mit einem Style Sheet kann man ein und dasselbe Designauf beliebig viele Seiten anwenden, was eine Arbeitserleichterung darstellt, gerade wenn mannachträglich Änderungen an den Formatierungen vornehmen will oder muss.

Mit Style Sheets lassen sich z. B. Schriftarten, Schriftfarben, Positionen und Hintergründe


10

etc. für die verschiedenen Elemente eines Dokumentes festzulegen. Mittlerweile ist CSS je-doch nicht nur auf die Formatierung für die visuelle Darstellung von Informationenbeschränkt, sondern bietet auch Eigenschaften für die akustische Wiedergabe von Webseitenoder z. B. deren Wiedergabe auf, an den Computer angeschlossene, Braillezeilen.

• CSS level 2 revision 1 (CSS2.1)

Die Version 2.1 ist eine Revision von CSS level 2 (CSS2), welche wiederum in CSS level1 (CSS1) ihren Ursprung hat. Mit CSS2 wurden eine Menge neuer Funktionen eingeführt,die mit der Version 2.1 noch weiter überarbeitet wurden. Es wurden die bekannten Fehleraus CSS2 bereinigt und solche Elemente entfernt, die von Style Sheet-Autoren nur weniggenutzt wurden und auch solche, die es CSS3 nicht mehr geben wird. Neu ab CSS2 war z.B. das Konzept der Medientypen, von denen zehn verschiedene zur Verfügung stehen. Sounterstützt CSS nun, neben den visuellen Ausgabegeräten, z. B. auch akustische oder hap-tische Geräte.

Neben den neuen Funktionen wurden außerdem noch die Beschreibungen überarbeitet,sodass die Spezifikation jetzt zwar umfangreicher, aber auch besser lesbar geworden ist.Prinzipiell sind alle gültigen CSS1-Stylesheets auch gültige CSS2-Stylesheets. Jedochwurden mit dem Versionswechsel auch semantische Änderungen vorgenommen. Dadurchkann es vorkommen, dass einige Anweisungen eines CSS1-Stylesheets andere Bedeutun-gen haben, wenn das Stylesheet als CSS2-Steylesheet interpretiert wird. Diese Fälle wer-den im CSS-Abschnitt dieser Arbeit noch ausführlich beschrieben.

CSS2.1 hat bisher den Status Working Draft und ist somit noch kein Standard. Laut CSS-Roadmap des W3C wird die Spezifikation 2006 den Status Recommendation erlangen(vgl. Bos 2005a).

• CSS level 3 (CSS3)

CSS3 befindet sich noch in der Entwicklungsphase, frühestens Ende 2005 sind ersteModule aus dieser Spezifikation als Recommendation zu erwarten. Wann jedoch diegesamte Spezifikation zum Standard wird, lässt sich nicht genau sagen. Die CSS-Roadmap nennt für einige Module das Jahr 2008, als das Jahr in dem sie zu Recommen-dation werden. Für andere Module sind nicht einmal Angaben gemacht worden.

Eine grundsätzliche Neuerung von CSS3 wird, ebenso wie im XHTML, der modulareAufbau der Spezifikation sein. Es wird z. B. Module für Text, zur Positionierung, demBox Modell, zu Tabellen usw. geben. Durch die Modularisierung wird die Spezifikationgenerell einfacher zu handhaben sein. Entwickler müssen sich nur mit den Modulen be-fassen, die sie benötigen. Browser- und Geräte-Hersteller müssen nur noch Module inte-grieren, die sie auch tatsächlich benutzen. Ein Hersteller eines Screenreaders beispiel-sweise, braucht gewiss nicht das Farbmodul unterstützen.

Des Weiteren werden neue Funktionen sowie die Unterstützung von weiteren Medien-


11

typen in den Spezifikationen zu finden sein (vgl. Bos 2005a).


12

3. XHTML 1.0

3.1. Warum man XHTML verwenden sollte

Mit XHTML wird versucht, das Web und insbesondere HTML wieder zu seinem Ursprungzurück zuführen. Das bedeutet, das XHTML Texte mehr strukturieren sollte und die For-matierung außen vor lässt (für die Präsentation von Dokumenten sieht das W3C CSS vor). ImLaufe der Entwicklung von HTML wurden immer neue Elemente der Sprache hinzugefügt.Unter anderem waren das auch Elemente, die nicht der Strukturierung von Texten dienten,sondern der Darstellung bzw. Formatierung wie beispielsweise das <font>-Element. Es kamdazu, dass in HTML Struktur- und Präsentations-Elemente vermischt wurden oder dass struk-turierende Elemente zu Präsentationszwecken missbraucht wurden (z. B. Tabellen-Elemente,die häufig zur Realisierung mehrspaltiger Seitenlayouts verwendet wurden). Das wiederumführte zum einen zu schwer verständlichem Quellcode von Dokumenten und zum anderenverschlechterte sich die Wartbarkeit von Dokumenten. Trennt man Struktur und Präsentation,ist es einfach möglich, Inhalte, unabhängig vom Design und umgekehrt, zu ändern. Mit an-deren Worten: inhaltliche Änderungen erfordern Aktualisierung der XHTML-Dokumente.Gestalterische Änderungen finden im Style Sheet statt.

Die Notwendigkeit der Trennung von Struktur und Präsentation lässt sich an hand folgenderSituation weiter bekräftigen: Die technische Entwicklung und der mit ihr einhergehendenMinimalisierung von Bauteilen, bringt eine immer größere Anzahl verschiedensterinternetfähiger Endgeräte hervor. So haben heutzutage nicht nur der heimische PC sonderneben Handys oder PDAs Zugriff auf Informationen aus dem Internet. Diese mobilen Gerätesind meist mit nur kleinen Displays sowie geringer Rechenleistung und Speicherkapazitätausgestattet. Hier ist es vorstellbar, dass die Präsentation völlig dem Gerät bzw. dem daraufbefindlichem Browser überlassen wird. Im XHTML-Dokument ist eine Zeile z. B. alsÜberschrift gekennzeichnet, wie diese jedoch hervorgehoben wird bleibt dem Browserüberlassen.

Wie bereits in der Einleitung erwähnt, ist XHTML eine XML-Anwendung, während HTMLnoch auf SGML basiert. Beide, XML und SGML, sind Metasprachen, wobei XML eine Teil-menge von SGML bildet. Eine Metasprache dient der Beschreibung von Daten und definiertRegeln, mit denen sich andere Sprachen festlegen lassen. SGML (und somit auch XML)basieren auf dem Konzept des Generic Coding. Darunter versteht man die Beschreibung derStruktur von Elementen eines Dokumentes und nicht deren Darstellung. Es ist also nicht vonInteresse, wie z. B. eine Überschrift aussieht, sondern dass es eine ist (vgl. Behme, Mintert2005). Mit dem XML-Regelwerk hat es das W3C geschafft, die Stärken von SGML zu ex-trahieren, gleichzeitig jedoch auf den Umfang und die Komplexität zu verzichten.

3.2. Einführung in die Terminologie

3.2.1. Terminologie


13

Um die W3C Spezifikationen richtig zu verstehen, muss man sich zunächst über einige Be-griffe im Klaren sein. Bei den Bedeutungen der Begriffe werden zwei Sichtweisen unter-schieden: zum einen bezüglich der Implementierung und zum anderen in Hinblick auf Doku-menten-Konformität. Die Implementierungssichtweise beschreibt das Verhalten eines Be-nutzerprogramms (siehe 3.2.2 Allgemeine Begriffe), welches angibt, Dokumente gemäß einerSpezifikation zu unterstützen. Wird von Dokumentenkonformität gesprochen, dann wirdBezug auf die Bestandteile eines Dokumentes genommen, die es haben darf oder muss, wenndieses Dokument angibt, konform zu einer Spezifikation zu sein.

• Kann, Darf (may), Optional (optional):

Die Begriffe haben alle die gleiche Bedeutung in der XHTML 1.0 Spezifikation. Betra-chtet man die Begriffe bezüglich Implementierung, so sagen sie aus, dass z. B. Funktions-merkmale nicht zwingend erforderlich, jedoch erlaubt sind. Aus Sicht derDokumentenkonformität hingegen bedeuten Verbindungen mit dem Wort "kann", dassdiese Funktionsmerkmale nicht verwendet werden dürfen.

• Muss (must), Soll (shall):

Die Begriffe signalisieren eine vorgeschriebene Notwendigkeit, bezüglich Implemen-tierung und Dokumentenkonformität (für streng konforme XHTML-Dokumente).

• Reserviert (reserved):

Sind Werte oder Verhalten reserviert, so bedeutet das, dass sie zwar nicht detailliertbeschrieben sind, aber auch nicht in konformen Dokumenten enthalten sein dürfen. Siesind z. B. anderen Anwendungen oder für spätere Verwendung vorbehalten.

• Sollte (should):

Bezogen auf die Implementierung bezeichnet "sollte" eine nicht zwingende Forderung,sondern eher eine Richtlinie oder Empfehlung. Für streng konforme XHTML-Dokumentesind Verbindungen mit "sollte" als Forderungen zu verstehen.

• Unterstützt (supportet):

In der XHTML Spezifikation gibt es optionale Funktionsmerkmale, werden diese"unterstützt", so müssen sie so implementiert sein.

• Nicht spezifiziert (unspecified):

Werte oder Verhalten von Funktionsmerkmalen, die nicht spezifiziert sind, können zwarvorkommen, wie die Implementierung dieser Verhalten oder Werte auszusehen hat, wirdvon der Spezifikation jedoch nicht vorgegeben. Streng konforme XHTML-Dokumentedürfen solches Verhalten nicht aufweisen.

3.2.2. Allgemeine Begriffe


14

In diesem Abschnitt werden einige, häufig auftretende, Begriffe der XHTML 1.0 Spezifika-tion erklärt.

• Dokument

Als Dokument wird ein Datenstrom bezeichnet, welcher mit weiteren Strömen, auf die esverweist, kombiniert wird. Die Datenströme werden so kombiniert, dass sich die Informa-tionen des Dokumentes in den Elementen befinden und diese genauso angeordnet sindwie es die DTD (Document Type Definition) vorschreibt.

• Element

Ein Element ist diejenige Einheit, mit der ein Dokument strukturiert wird und das den In-halt eines Dokumentes einschließt. Der Aufbau und die Semantik eines Elementes, sindin der DTD festgelegt.

• Attribut

Attribute sind Parameter, die ein Element um Eigenschaften oder Verhalten erweitern.Attribute können für einzelne oder auch mehrere Elemente zulässig sein. Ihr Aufbau, Da-tentyp und Wertebereich sind in der DTD festgelegt.

• Document Type Definition

Als DTD versteht man eine Ansammlung von Regeln für den Aufbau von Dokumenten.Es werden die erlaubten Elemente und ihre zugehörigen Attribute einer Sprache definiertsowie die zu verwendende Syntax und Struktur eines Dokuments festgelegt. Es gibt ver-schiedene DTDs für die verschiedenen HTML und XHTML Versionen. Für XHTML 1.0stehen beispielsweise drei in XML verfasste DTDs zur Verfügung: strict, transitional undframeset.

Da das Thema DTD ein sehr umfangreiches ist, gibt es einen eigenen Abschnitt, auf denhier verwiesen sei (siehe 3.3 DTD).

• User Agent

Unter User Agents versteht man Benutzer- oder Anwendungsprogramme, die Zugriff aufDaten bzw. Dokumente im Internet haben. User Agents können ganz unterschiedlicherArt sein: Webbrowser, E-Mail-Programme oder auch Software, wie die sog. Webcrawler,die das Web "eigenständig" nach Informationen durchsuchen, sind nur einige Vertreter.

3.3. DTD

Wie bereits erwähnt, stellt eine Document Type Definition ein Regelwerk dar, das beschreibtaus welchen Elementen, Attributen und in welcher Struktur ein Dokument aufgebaut ist, dasangibt, konform zu einem Standard zu sein. Mit der Deklaration des Dokumenttyps am An-


15

fang eines Dokumentes, wird dem User-Agent mitgeteilt, in welcher Sprache bzw. Versioneiner Sprache das Dokument verfasst wurde. Die DTD ist also insofern wichtig, als dass sie z.B. dem Browser mitteilt, wie er Elemente und Attribute zu interpretieren hat. Gibt ein Doku-ment an nach den Regeln einer DTD verfasst zu sein, so ist es möglich, das Dokument gegendiese DTD zu validieren. Das bedeutet, das Dokument bezüglich seines korrekten syntaktis-chen Aufbaus zu überprüfen. Sind alle in der DTD festgeschriebenen Regeln eingehaltenworden, so spricht man von validen bzw. gültigen Dokumenten. Nachfolgend werden dreiwesentliche Bestandteile einer DTD beschrieben, die zum Verständnis der Verwendung desBegriffes DTD in dieser Arbeit genügen.

3.3.1. Elementtyp-Deklaration

Die Elemente werden in den Elementtyp-Deklarationen definiert. Zwei verschiedene Artenvon Elementen lassen sich unterscheiden. Zum einen gibt es die leeren Elemente und zum an-deren die, die selbst andere Elemente enthalten dürfen. Bekannte Vertreter beider Gruppensind das <br>-Element, welches keine Elemente enthalten darf und als Vertreter der zweitenGruppe das <p>-Element, in dem z. B. ein <br>-Element vorkommen darf. Bezüglich der At-tribute definiert sie, welchen Datentyp ein Attribut verlangt und gibt die möglichen Werte an,gegebenenfalls auch, ob ein Attribut ein Standardwert hat an. Für nicht-leere Elemente ist dieArt des Inhalts definiert. Es ist geregelt, ob sich der Inhalt aus Text, anderen Elementen oderbeiden zusammensetzt. Das folgende einfache Beispiel zeigt die Deklaration des -<title>Elements:

<!ELEMENT title (#PCDATA)>

Dabei steht in den runden Klammern der Inhaltstyp des Elementes. Im Beispiel ist das#PCDATA (Parsed Character Data), was für einfachen Text steht.

3.3.2. Attributlisten-Deklaration

Attributlisten geben die in Elementen erlaubten Attribute an, sie definieren den Wertetypeines Attributs und legen, falls er existiert, ein Standardwert (default) für ein Attribut fest.Die gültigen Parameter eines Attributes werden in Parameter-Entity-Definition festgelegt.Hier dient die ATTLIST-Deklaration des <title>-Elements als Beispiel:

<!ATTLIST title%i18n;id ID #IMPLIED>

Nach dem Schlüsselwort ATTLIST steht der Name des Elements dessen Attributliste definiertwerden soll, in diesem Beispiel ist das eben das <title>-Element. Die Referenz %i18n; ver-weist auf drei Attribute, nämlich lang, xml:lang und dir, die ebenfalls in der DTD definiertsind. Als nächstes wird dem Element <title> das Attribut id mit dem gleichnamigen Daten-typ (ID) zugewiesen. Das Schlüsselwort #IMPLIED bedeutet, dass das Attribut kein notwendi-


16

ges ist. Falls Attribute für ein Element zwingend erforderlich sind, so wird dies in einer DTDdurch das #RQUIRED angezeigt.

3.3.3. Entity-Deklaration

Eine Entity (Entität) ist ein Platzhalter bzw. Referenz auf eine Zeichenkette oder ein externesDokument. Es werden außerdem Abkürzungen, Zeichenreferenzen festgelegt, die z. B. immerdann benutzt werden, wenn ein Zeichen im Dokument angezeigt werden soll, welches in derAuszeichnungssprache eine besondere Bedeutung hat. So ist "<" eine Zeichenreferenzauf das kleiner-gleich-Zeichen ("<"), welches in HTML einen Tag einleitet. In der DTD wer-den Entity-Deklaration auch genutzt um die Parameter von Attributen festzulegen. Des Weit-eren ist es möglich, eigene Entitäten im Dokument zu definieren, um später auf diesezurückzugreifen.

3.4. Aufbau von XHTML 1.0 Dokumenten

3.4.1. XML-Deklaration

Einleitend sollte in jedem XHTML-Dokument eine XML-Deklaration enthalten sein, sie istallerdings für konforme Dokumente nicht erforderlich. Die XML-Deklaration erfüllt zweiAufgaben: zum einen wird über diese Deklaration dem User-Agent mitgeteilt, auf welcherXML-Version das Dokument basiert und zum anderen welche Zeichenkodierung verwendetwurde.

<?xml version="1.0" encoding="UTF-8"?>

Die verwendete XML-Version im Beispiel ist XML 1.0 mit der Zeichenkodierung UTF-8,was auf einen 8-Bit Unicode verweist. Weil jedoch XML-Parser standardmäßig die Ze-ichenkodierung UTF-8 annehmen, ist die XML-Deklaration nicht erforderlich. Wird eine an-dere Zeichenkodierung verwendet, sollte es an dieser Stelle angegeben werden.

3.4.2. Dokumenttyp-Deklaration

Als nächstes muss das Dokument eine Dokumenttyp-Deklaration aufweisen, die festlegt,welche DTD dem Dokument zugrunde liegt. Für XHTML-Dokumente stehen drei DTDs zurVerfügung, die Deklaration hat folgende Form:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Das Schlüsselwort PUBLIC kennzeichnet den sog. public indentifier (öffentlicher Bezeichner),welcher den Namen der DTD angibt. Danach folgt die URL (Uniform Resource Locator)unter der man die DTD im Web finden kann. Die Dokumenttyp-Deklarationen für die transi-tional- und frameset-DTD sind analog zu der von strict aufgebaut:


17

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

3.4.2.1. Die strict-DTD

Wird die strict-DTD verwendet, so sind alle veralteten, in der HTML 4 Spezifikation mit "dep-recated" gekennzeichnete, Elemente nicht mehr erlaubt. Dabei handelt es sich häufig um Ele-mente oder Attribute, die der Präsentation und nicht der Strukturierung dienten. Die Funktio-nen dieser Elemente bzw. Attribute werden durch CSS ersetzt. Des Weiteren müssen Doku-mente, die angeben der strict-DTD zu genügen, ordentlich strukturiert sein und sich stren-geren Verschachtelungsregeln unterwerfen. Das bedeutet z. B., dass sich zwischen den Ele-menten <body> und </body> kein einfacher Text befinden darf, der von keinen anderen Ele-menten umschlossen ist.

3.4.2.2. Die transitional-DTD

Wird diese DTD verwendet, darf alles verwendet werden was in der strict-DTD verboten ist.Die veralteten Elemente sind noch erlaubt und auch Angaben bezüglich der Formatierungdürfen in dem Dokument enthalten sein. Sinnvoll ist diese Variante besonders dann, wennman sicher gehen möchte, dass die Dokumente von den Browsern unterstützt werden, die z.B. kein CSS verstehen.

3.4.2.3. Die frameset-DTD

In dieser Variante ist es erlaubt Frames zu benutzen. Mit Frames ist es gestattet das Anzeige-fenster eines Browsers in verschiedene Bereiche zu untergliedern und darin verschiedeneDokumente anzuzeigen. Von ihrer Verwendung sollte jedoch abgesehen werden, da sie z. B.wichtige Funktionen von Browsern einschränken. Auch Suchmaschinen bereiten FramesSchwierigkeiten, da sich die einzelnen Frames nicht indexieren lassen (vgl. o. V. 2005a).

3.4.3. Namensräume

Jedes XHTML-Dokument muss ein Wurzelelement enthalten, welches bereits in derDOCTYPE-Deklaration festgelegt wurde. Für XHTML 1.0 ist es das Element <html>. Indiesem Element wird des Weiteren der Namensraum für das Dokument festgelegt. Der Na-mensraum ermöglicht dem Browser eine klare Zuordnung von Elementen oder Attributen zueiner Sprache. Es ist durchaus möglich, dass verschiedene Sprachen unter gleichen Element-namen unterschiedliche Funktionen anbieten. Mit der Angabe des Namensraumes kann sodas Element eindeutig zu der richtigen Sprache zugeordnet werden.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


18

Der Wert des xmlns-Attributs sieht zwar aus wie eine URL, ist aber lediglich ein Name.Unter dieser Adresse ist zwar tatsächlich ein Dokument hinterlegt, dieses hat aber nur infor-mativen Charakter und definiert keine Elemente aus einem Namensraum. Es ist möglich,zusätzlich noch andere Namensräume für ein Dokument anzugeben, um z. B. auf Elementevon MathML zuzugreifen, dann allerdings wäre ein Dokument kein streng konformesXHTML-Dokument, wie es das W3C definiert.

Die Sprache, in der der Inhalt verfasst wurde, sollte angegeben werden, damit z. B. Such-maschinen oder Screenreader danach unterscheiden können und gegebenenfalls sich andersverhalten können. Üblicherweise werden zwei Angaben (mit identischer Bedeutung) zuSprache gemacht. Das lang-Attribut ist für HTML-Parser, die das XML-Universalattributxml:lang nicht verstehen, vorgesehen. Ändert sich im laufenden Text die Sprache oder wer-den Fremdwörter benutzt, so ist ebenfalls möglich und sinnvoll, die Sprachwechsel durchlang-Attribute anzuzeigen, um z. B. Screenreadern eine korrekte Aussprache zuermöglichen.

3.4.4. Dokumentenkopf

Der weitere Aufbau eines XHTML-Dokuments lässt sich in zwei Bereiche unterteilen, denKopf- und den Rumpfbereich. Durch das <head>-Element wird der Kopfbereich einer Seitebeschrieben, hier muss der Titel des Dokuments, mit Hilfe des <title>-Elements, festgelegtwerden. Die Informationen in diesem Element werden jedoch nicht auf der Seite dargestellt,sondern werden vom Browser z. B. in der Titel-Zeile des Fensters angezeigt oder für Leseze-ichen (Bookmarks) verwendet. Weil auch Suchmaschinen diese Informationen auswerten,sollte der Titel eines Dokuments stets aussagekräftig gewählt werden. Im Dokument-Kopfkönnen außerdem noch verschiedene Schlüsselwörter und Metainformationen, sowie die Ein-bindung von Style Sheets und Scripts enthalten sein.

3.4.5. Dokumentenrumpf

Der Inhalt eines Dokumentes befindet sich im, durch das <body>-Element eingeschlossenen,Dokumentenrumpf bzw. wenn mit Frames gearbeitet wird im <frameset>-Element. Da dieElemente <body> und <frameset> optional sind, ist es möglich ohne diese streng konformeXHTML-Dokumente zu schreiben, vorausgesetzt, sie sind so aufgebaut wie in diesem Ab-schnitt beschrieben. Allerdings stellt sich dann die Frage, wie sinnvoll Dokumente ohne In-halt sind.

Folgendes Beispiel zeigt ein minimales XHTML-Dokument:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head><title>Jedes XHTML-Dokument muss einen Titel enthalten!</title>

</head>


19

<body><p>...Hier steht der Inhalt...</p>

</body></html>

3.5. Unterschiede zu HTML

Wie bereits erwähnt, ist XHTML 1.0 inhaltlich identisch zu HTML 4.01, nur basiert esanstatt von SGML auf XML und XML wiederum ist eine Teilmenge von SGML. HeutigeWeb-Browser, speziell deren HTML-Parser, tolerieren unsauberen HTML-Code, sie zeigenInhalte korrekt an, obwohl z. B. Elemente falsch verschachtelt sind. Das hat den Vorteil, dasssie dem Autor Nachlässigkeiten verzeihen, trägt jedoch nicht zu einem wohlgeformten undstandardkonformen Web bei. In XML gelten strengere Regeln für den syntaktischen Aufbaueines Dokuments und da XHTML eine Anwendung von XML ist, erbt es quasi auch diesestrengeren Regeln. Diese Tatsache macht den Unterschied zwischen HTML und XHTML aus(vgl. Mintert 2003 Seite 374-381).

3.5.1. Wohlgeformte Dokumente

Weil mit XML 1.0 das Konzept der wohlgeformten Dokumente eingeführt gilt dieses auchfür XHTML 1.0. Wohlgeformte Dokumente sind jene, deren Elemente korrekt ineinanderverschachtelt sind und jedes Element besteht aus einem Anfangs- bzw. Start-Tag und einemAbschluss- bzw. End-Tag. Die Forderung, dass Elemente korrekt verschachtelt werdenmüssen bedeutet, wenn sich ein Start-Tag im Kontext eines anderen Elementes befindet, somuss auch das dazugehörige End-Tag darin notiert sein.

<p>Ein falsch <em>verschachteler Absatz</p></em>

<p>Ein richtig <em>verschachtelter Absatz</em></p>

In HTML 4 gab es Elemente, deren Abschluss-Tag optional war – die sog. leeren Elemente.Für diese Elemente ist in XHTML ein entweder Abschluss-Tag oder aber eine spezielleSchreibweise vorgeschrieben. Die minimierte Schreibeweise für leere Elemente endet auf "/>

3.5.2. Kleinschreibung

Da XML zwischen Groß- und Kleinschreibung unterscheidet, müssen auch in XHTML alleElement- und Attributnamen klein geschrieben werden. Das gilt auch für vordefinierte Werte,wie z. B. dem type-Attribut des <input>-Elements. Waren in HTML 4 "TEXT" und "text"noch äquivalent, so ist XHTML nur noch die kleingeschriebene Variante erlaubt. Ähnlichverhält es sich mit den hexadezimalen Werten von Entity-Referenzen; "&#F123;" und"&#f123;" waren in HTML äquivalent, in XHTML jedoch ist nur noch die Kleinschreibunggültig.

3.5.3. Attributwerte und Attributminimierung


20

In XHTML müssen alle Attributwerte in Anführungszeichen gesetzt werden. Die Min-imierung von Attributen wird von XML nicht unterstützt und ist somit in XHMTL nicht mehrerlaubt. Gab es in HTML noch wertelose Attribute (boolsche Attribute) wie: <dl compact>,so sind für diese in XHTML Werte definiert worden. Der Standardwert eines solchen At-tributs lautet so wie der Name des Attributs, das o. g. Beispiel würde also wie folgt ausehen:<dl compact="compact">. Attributwerte müssen immer in Anführungszeichen notiert wer-den, auch wenn es sich um numerische Werte handelt. Tauchen in Attributwerten Leerze-ichen auf, so müssen sich die Browser an die für diesen Fall vorgesehenen Regeln aus derXML 1.0 Spezifikation halten. Führende und abschließende Leerzeichen sind zu entfernen.Mehrere Leerzeichen und Zeilenumbrüche werden durch ein einzelnes Leerzeichen ersetzt.

3.5.4. Script- und Style-Elemente

Werden in XHTML-Dokumente Script- oder Style-Elemente eingefügt, so sollte man diesezusätzlich noch durch den XML-Ausdruck <![CDATA[ … ]]> kapseln. Dadurch wird verhin-dert, dass z. B. "<", "&" fälschlicherweise als Markup-Beginn erkannt werden und man erspartsich die Schreibweise dieser Zeichen als Entities (< für "<" und & für "&"). In At-tributwerten hingegen ist die Ersetzung der genannten Zeichen durch deren Entitiesnotwendig, um valides XHTML zu schreiben: <img src="bild.jpg" alt="Äpfel &

Birnen"/>.

3.5.5. Fragmentbezeichner

Aus HTML 4 gibt es zwei verschiedene Attribute, die als Fragmentbezeichner dienen: dasname- und id-Attribut. Dabei sind die Werte des name-Attributs vom Typ CDATA, währenddas id-Attribut Werte vom Typ ID verlangt. In XML sind nur Fragmentbezeichner vom TypID erlaubt, dass bedeutet, dass gültige XHTML-Dokumente das id-Attribut als Fragment-bezeichner benutzen müssen.. Für die Elemente a, applet, form, frame, iframe, img undmap wird es in zukünftigen XHTML-Versionen kein name-Attribut mehr geben. Um dieKompatibilität von XHTML 1.0 Dokumenten zu heutigen Browsern sicherzustellen, wirdempfohlen beide Attribute mit gleichen Werten für die Elemente zu verwenden (z. B. <aid="foo" name="foo">).

3.5.6. Element-Ausschlüsse

In XHTML gibt es eine Reihe von Element-Ausschlüssen, welche als Ausnahmen von denVerschachtelungsregeln zu verstehen sind. Mit SGML war es möglich, solche Ausschlüsse inder DTD zu definieren, diese Möglichkeit besteht in XML nicht mehr. Autoren von Web-seiten sollten sich an die im Anhang der XHTML 1.0 Spezifikation aufgelisteten Elemente-Ausschlüsse halten.

• Das a-Element darf keine anderen a-Elemente enthalten.

• Das pre-Element darf die Elemente img, object, big, small, sub und sup nicht enthal-ten.


21

• Das button-Element darf die Elemente input, select, textarea, label, button, form,fieldset, iframe und isindex nicht einthalten.

• Das label-Element darf keine anderen label-Elemente enthalten.

• Das form-Element darf keine anderen form-Elemente enthalten.

3.5.7. Medientypen und Dateiendungen

Der Medientyp eines Dokumentes, auch bekannt als MIME-Typ (Multipurpose Internet MailExtensions), gibt an, um welchen Datentypen bzw. welche Dateiformate es sich bei derÜbertragung handelt. Der MIME-Typ für HTML ist text/html. Dabei steht text für denMedientyp und html bezeichnet den Subtyp bzw. das Dateiformat. Für XHTML 1.0 Doku-mente empfiehlt das W3C den MIME-Typ application/xhtml+xml. Es erlaubt aber eben-falls, XHTML-Dokumente mit dem MIME-Typ von HTML 4 zu verwenden, um dieKompatibilität zu HTML-Browser zu gewährleisten. Wird eine XHTML-Datei mit demtext/html gekennzeichnet, so wird der Browser den HTML-Parser benutzen, um das Doku-ment aufzubauen. Mit der Verwendung von application/xhtml+xml übernimmt diese Auf-gabe hingegen der XML-Parser. Neben den eben genannten MIME-Type sind ebenfalls nochapplication/xml und text/xml erlaubt. Ähnlich verhält es sich mit den Dateiendungen vonXHTML-Dokumenten. Erlaubt sind wiederum ".html" und ".xhtml", wobei erstere demBrowser signalisiert, den HTML-Parser zu benutzen und ".xhtml", die vom W3c empfohleneDateiendung, um den XML-Parser zu verwenden. Dabei sollte jedoch darauf geachtet wer-den, dass MIME-Typ und Dateiendung zueinander passen, text/html sollte zusammen mit".html" und analog dazu application/xhtml+xml mit der Dateiendung ".xhtml" verwendetwerden (vgl. o. V. 2005b).


22

4. XHTML 1.1

4.1. XHTML 1.1 - modulbasiertes XHTML

Nachdem mit XHTML 1.0 der Übergang von HTML zu XHTML eingeleitet wurde, folgt mitXHTML 1.1 ein neuer, auf Modulen basierter Dokumenttyp. Dabei ist diese Spezifikationstärker auf strukturelle Funktionen ausgelegt. Es wurden auf alle missbilligten Elemente undAttribute aus HTML 4 und XHTML 1.0, welche meist der Präsentation von Inhalten dienten,verzichtet. Dieser Umstand führt jedoch auch zu einer eingeschränkten Funktionalität im Ver-gleich zu den früheren (X)HTML Standards.

Ziel des modularisierten XHTML 1.1 ist es, ein breites Spektrum an Geräten mit nahezu allenInternetinhalten zu versorgen. Durch die Modularisierung ist es möglich, auf Teile der Spezi-fikation zu verzichten, was sich besonders Ressourcen-schonend für z. B. mobile Geräte mitwenig Leistung auswirkt, die aber dennoch auf Internetinhalte Zugriff haben. Auch derumgekehrte Fall ist vorstellbar, so lässt sich dieser Dokumenttyp um andere Module erweit-ern, ohne damit eine Verletzung des bestehenden XHTML 1.1 Standards hervorzurufen.

Die Module wurden bereits in der Recommendation "Modularisierung von XHTML"eingeführt. XHTML 1.1 kann zusammenfassend als Neuformulierung der XHTML 1.0 strictVariante, kombiniert mit der "Modularisierung von XHTML" verstanden werden. Im Folgen-den werde ich den Aufbau von XHTML 1.1 Dokumenten beschreiben und auf die einzelnenModule des Dokumenttyps eingehen.


XHTML 1.1 konforme Dokumente müssen den in der Spezifikation festgelegten Regelngenügen und dürfen keine anderen Elemente und Attribute aus denen des XHTML-Na-mensraum verwenden.

Das Wurzelelement für diesen Dokumenttyp ist, wie bereits aus HTML und XHTML 1.0bekannt, das Element <html>. Ebenso muss in diesem Element der Namensraum für diesenDokumenttyp festgelegt werden. Der Namensraumbezeichner, der mit Hilfe des -xmlnsAttributs angeben wird ist http://www.w3.org/1999/xhtml. Für XHTML1.1-Dokumente gibt es eine vorgeschriebene DTD, die am Anfang des Dokumentes (vor demWurzelelement) festgelegt wird:

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Das W3C empfiehlt außerdem am Anfang des Dokuments eine XML-Deklarationeinzufügen, in der auch die Zeichenkodierung des Dokumentes anzugeben ist. Ergänzt mandiese Elemente noch um das <title>- und <body>-Element und befolgt die Richtlinien von


23

wohlgeformten XML-Dokumenten (siehe 3.5 Unterschiede zu HTML und 4.4 Unterschiedezu XHTML 1.0 strict), erhält man ein minimales XHTML 1.1 Dokument:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" ><head><title>Minimales XHTML 1.1 Dokument</title>

</head><body><p>...hier steht der Inhalt...</p>

</body></html>

4.3. Die XHTML 1.1 Module

Die Beschreibungen der in XHTML 1.1 vorhandenen Module befinden sich in der Recom-mendation "Modularisierung von XHTML". Hier sind zu jedem Modul die erlaubten Ele-mente und ihnen zugeordnet, die zulässigen Attribute definiert. Um ein Modul in einemXHTML 1.1 Dokument zu verwenden, muss dieses nicht explizit aufgeführt oder etwa in dasDokument eingebunden werden. Ein Modul wird immer dann benutzt, wenn dessen Elementeim Dokument verwendet werden.

Zu jedem Element eines Moduls, ist ein minimales content model (Inhaltsmodell) festgelegt.Mit einem Inhaltsmodell wird der Inhalt für ein Element definiert. Es werden zwei Arten vonInhalten unterschieden, zum einen Elementinhalt (ohne Zeichendaten) und zum anderengemischter Inhalt, worunter Elementinhalt plus Zeichendaten zu verstehen ist. Neben derAngabe von einzelnen Elementen als Inhaltmodell, gibt es die sog. content sets(Inhaltsmengen), in denen Elemente als logische Gruppierung in Listen zusammengefasstsind.

Nachfolgend wird der Zusammenhang von Inhaltsmodell und Inhaltsmenge am Beispiel des<body>- und <html>-Elements verdeutlicht.

Table 2. Inhaltsmodell-Inhaltsmenge-Beziehung

Element minimales Inhaltsmodell

body (Heading | Block | List)*

html head, body

Ein <body>-Element muss Elemente entweder der Heading-, Block- oder List- Inhaltsmengeenthalten. Das Sternchen (*) sagt darüber hinaus noch aus, dass auch mehrere Instanzen derMengen erlaubt sind. Die Heading-Inhaltsmenge ist im Textmodul definiert, ihr sind die Ele-mente <h1>, <h2>, <h3>, <h4>, <h5> und <h6> zugeordnet, von denen mindestens eins en-


24

thalten sein muss, wenn diese Inhaltsmenge verwendet wird (siehe 4.3.2 Text Module). DasInhaltmodell des <html>-Elements hingegen sagt aus, das die Elemente <head> und <body>

enthalten sein müssen und zudem genau in dieser Reihenfolge.

In meinen weiteren Ausführungen werde ich mich auf die inhaltliche Beschreibung der Mod-ule und die Aufzählung der Elemente beschränken. Die erlaubten Attribute und deren Wertekönnen unter http://www.w3.org/TR/xhtml-modularization/ nachgelesen werden.

Für XHTML 1.1 gibt es vier Module, die sog. Core Modules (Kernmodule), die als required(notwendig) gekennzeichnet sind. Es handelt sich dabei um das Struktur-, Text-, Hypertext-und Listenmodul, die von jedem XHTML konformen Dokumententyp unterstützt werdenmüssen.

4.3.1. Structure ModuleStrukturmodel

In diesem Modul werden diejenigen Elemente zusammengefasst, die der Strukturierung einesXHTML-Dokuments dienen. Es handelt sich um die schon ausführlich im Abschnitt 3.4dieser Arbeit besprochenen Elemente <html>, <head>, <title> und <body>. Da sich in derBedeutung dieser Elemente im Vergleich zu XHTML 1.0 nichts ändert, möchte ich hier nichtnäher auf diese Elemente eingehen.

4.3.2. Text ModuleTextmodul

Das Textmodul beinhaltet alle Elemente, die zur Strukturierung von Texten dienen. Damit istes möglich, bestimmte Bestandteile eines Textes z. B. als Überschrift, Zitat usw. zudefinieren. Die Elemente sind hier, bereits nach Inhaltsmengen gruppiert, aufgelistet.

Heading:h1 | h2 | h3 | h4 | h5 | h6

Block:address | blockquote | div | p | pre

Inline:abbr | acronym | br | cite | code | dfn | em | kbd | q | samp | span | strong | var

Flow:Heading | Block | Inline

4.3.3. Hypertext ModuleHypertext-Modul

Mit dem vom Hypertext-Modul zur Verfügung gestellten Elementen ist es möglich, Hyper-links zu anderen Dokumenten einzubinden. Das <a>-Element erweitert, bei Verwendung des


25

Moduls, die Inhaltmenge der Inline-Elemente des Text Moduls. Eine Verschachtelung von<a>-Elementen ist nicht erlaubt.

4.3.4. List ModuleListenmodul

In (X)HTML stehen verschiedene Typen von Listen zur Verfügung, welche in diesem Mod-ule zusammengefasst definiert werden. Zur Auswahl stehen Definitionslisten sowie sortierteund unsortierte Listen. Mit dem Listenmodul ist die Inhaltsmenge List definiert, die die In-haltsmenge "Flow" des Textmoduls erweitert.

List:dl | ol | ul

Des Weiteren werden die Elemente <dt>, <dd> und <li> definiert, die als Elemente fürListeneinträge zur Verfügung stehen.

4.3.5. Object ModuleObjektmodul

Das Objektmodul erlaubt es mittels des zur Verfügung gestellten <objekt>-Elements z. B.Multimedia-Objekte in das Dokument einzubinden. Außerdem enthält dieses Modul noch das<param>-Element, welches verschiedene Parameter für Objekte bereitstellen kann.

4.3.6. Presentation ModuleDarstellungsmodul

Im Gegensatz zum Textmodul, dessen Elemente strukturorientiert sind, dienen die Elementedes Darstellungsmoduls der gestalterischen Auszeichnung, z. B. für kursive oder fettge-druckte Darstellung. Dabei wird die Block-Inhaltsmenge um das <hr>-Element und die In-line-Inhaltsmenge des Textmoduls um die Elemente <b>, <big>, <i>, <small>, <sub>, <sup>und <tt> erweitert.

4.3.7. Edit ModuleEdit-Modul

Dieses Modul stellt zwei Elemente bereit, mit denen es möglich ist, Text als bearbeitet zukennzeichnen. Das <del>-Element vom Autor benutzt, um Text als entfernt bzw. inhaltlichnicht mehr gültig zu kennzeichnen. Es wird von Browsern häufig durchgestrichen dargestellt.Das <ins>-Element hingegen kennzeichnet (nachträglich) eingefügten Text. Die beiden Ele-mente erweitern die Inline-Inhaltsmenge des Textmoduls.

4.3.8. Bidirectional Text ModuleModul für bidirektionalen Text

Mit dem Modul für bidirektionalen Text wird das <bdo>-Element bereitgestellt, welches die


26

Inline-Inhaltsmenge des Textmoduls erweitert. Zusammen mit dem Attribut dir ermöglichtdas <bdo>-Element Text auszuzeichnen, dessen Leserichtung auch von rechts nach links seinkann. Das bereitgestellte Element wird der Inline-Inhaltsmenge des Textmoduls hinzugefügt.Diese Modul erweitert zudem die 118N-Attributsammlung, das bedeutet, dass alle Elemente,die diese Attributsammlung benutzen, nun auch das dir-Attribut verwenden dürfen. Die At-tributsammlungen stellen eine formale Zusammenfassung der Attribute dar, die aber nur in-nerhalb der Spezifikation gültig sind. Es wird einfach die Attributsammlung in der Moduldef-inition angegeben, statt immer wieder die erlaubten Attribute für ein Element einzelnaufzuführen (vgl. Altheim et al. 2001).

4.3.9. Forms ModuleFormularmodul

Zwei Inhaltsmengen werden bereitgestellt, um Formulare in XHTML 1.1 einzubinden:

Formform | fieldset

Formctrlinput | select | textarea | label | button

Die Inhaltsmenge Form erweitert die Block-Inhaltsmenge und Formctrl die Inline-In-haltsmenge des Textmoduls. Des Weiteren vervollständigen die Elemente <option>,<optgroup> und <legend> die Formularfunktionalität.

4.3.10. Table ModuleTabellenmodul

Durch das Tabellenmodul werden die aus HTML bekannten Tabellen-Elemente bereitgestellt.Die Elemente dieses Moduls sind: <table>, <caption>, <thead>, <tfoot>, <tbody>, <tr>,<th>, <td>, <colgroup> und <col>. Mit dem Tabellenmodul lassen sich Tabelleninhalte um-fangreich strukturieren, sodass die Interpretation dieser Daten auch für nicht visuelle UserAgents ermöglicht wird. Das <table>-Element erweitert dabei die Block-Inhaltsmenge desTextmoduls.

4.3.11. Image ModuleBildmodul

Zum einbinden von Bildern in XHTML 1.1 Dokumente stellt dieses Modul das leere -<img>Element bereit. Dieses Element erweitert, bei Verwendung des Moduls, die Inline-Inhaltsmenge des Textmoduls.

4.3.12. Client-Side Image Map ModuleModul für client-seitige Image-Maps

Neben dem Bereitstellen der Elemente <area> und <map>, ergänzt dieses Modul die Ele-


27

mente <a>, <img>, <input> und <object>, falls diese verwendet werden, um einige At-tribute. Das <a>-Element wird z. B. um das coords-Attribut erweitert, welches eine Ver-linkung von bestimmten Bereichen von Bildern (durch Koordinaten ausgezeichnet) zu an-deren Dokumenten oder Objekten gestattet. Wird dieses Modul verwendet, muss jedoch gle-ichzeitig das Bildmodul verwendet werden. Zudem erweitert das Modul die Inline-In-haltsmenge um das <map>-Element.

4.3.13. Server-Side Image Map ModuleModul für server-seitige Image Maps

Dieses Modul stellt keine neuen Elemente zur Verfügung, die Elemente <img> und <input>werden zusätzlich mit dem ismap-Attribut ausgestattet. Mit server-seitigen Image Maps wer-den beim Klicken auf die Bereiche eines Bildes die Koordinaten zum Server übertragen,worauf dieser dann die durch die Koordinaten referenzierten Ressourcen an das Benutzerpro-gramm liefert.

4.3.14. Intrinsic Events ModuleModul für eingebaute Ereignisse

Mit diesem Modul werden die Event-Handler den Elementen <a>, <area>, <form>, <body>,<label>, <input>, <select>, <textarea> und <button> bereitgestellt. Mit diesenzusätzlichen Attributen kann auf, in den Elementen, auftretende Ereignisse reagiert werden,in dem Scripte aufgerufen werden. Voraussetzung für die Erweiterung der Elemente um dieseAttribute ist, dass diejenigen Module verwendet werden, die die oben aufgeführten Elementeverwenden.

4.3.15. Metainformation ModuleMetainformationsmodul

Das Metainformationsmodul stellt das <meta>-Element zur Verfügung Bei Verwendungwird das Inhaltsmodell des <head>-Elements um das Element <meta> erweitert. Dem Autoreiner Seite ist es durch dieses Modul gestattet, zusätzliche Informationen und Anweisungenfür Web-Server und User Agents in den Header-Bereich eines Dokumentes einzufügen.

4.3.16. Scripting ModuleScripting-Modul

Mit den Elementen <script> und <noscript> des Scripting-Moduls, lassen sich Script-Anweisungen direkt in XHTML 1.1 Dokumente einbinden. Durch das Modul werden denbeiden Inhaltsmengen Block und Inline des Textmoduls die Elemente <script> und<noscript> hinzugefügt. Das Inhaltsmodell des <head>-Elements wird durch das -<script>Element ergänzt.

4.3.17. Stylesheet ModuleStyle Sheet Modul


28

Um interne Style-Anweisungen im Dokument zu deklarieren, wird das Element <style>

benötigt, welches von diesem Modul definiert wird. Das Inhaltsmodell des <head>-Elementswird um das <style>-Element erweitert.

4.3.18. Style Attribut ModuleStyle-Attributmodul

Dieses Modul ist als deprecated gekennzeichnet, da es die Style-Attributsammlung aktiviert.Gestalterisch-orientierte Auszeichnungen sollten von externen Style Sheets, wie z. B. CSSübernommen werden.

4.3.19. Link ModuleLink-Modul

Mit dem <link>-Element des Moduls, können externe Ressourcen, wie z. B. Style Sheets mitdem XHTML-Dokument verknüpft oder auch XHTML-Dokumente untereinander inBeziehung gesetzt werden. Mit dem Link-Modul wird das Inhaltsmodell von <head> um das<link>-Element ergänzt.

4.3.20. Base ModuleBase-Modul

Das Base-Modul definiert das Element <base>, mit dem sich eine Adresse (URI) als Basisfür ein Dokument festlegen lässt. Das Modul erweitert das Inhaltsmodell des -<head>Elements um das <base>-Element.

4.3.21. Ruby Annotation ModuleRuby-Anmerkungs-Modul

Das Modul definiert die Elemente <ruby>, <rbc>, <rtc>, <rb>, <rt> und <rp>. Dieses neueModul ermöglicht sog. Ruby-Text in das Dokument einzufügen. Die Ruby-Anmerkungenstammen aus ostasiatischen Dokumenten, in denen häufig Anmerkungen (Ruby-Text) zueiner Textbasis gemacht werden. Die Anmerkungen können als Zusatzinformationen ver-standen werden oder sind z. B. Anmerkungen zur richtigen Aussprache von Wörtern (vgl.Suignard et al. 2001).

4.4. Unterschiede zu XHTML 1.0 strict

• XHTML 1.1 verwendet keine missbilligten Elemente von HTML 4 und XHTML 1.0.

• Das lang-Attribut zur Angabe der Sprache wurde entfernt, an seine Stelle tritt das At-tribut xml:lang.

• War es in XHTML 1.0 noch erlaubt, zusätzlich zum id-Attribut, das name-Attribut alsFragmentbezeichner zu verwenden (hauptsächlich aus Kompatibilitätsgründen), so ist das


29

name-Attribut in XHTML 1.1 für die Elemente <a> und <map> verboten.

(Die Elemente, die in früheren Versionen ebenfalls das name-Attribut im Sinne einesFragmentbezeichners benutzten, werden von XHTML 1.1 nicht mehr unterstützt, da sieals veraltet gelten. Es handelte sich dabei um die Elemente <applet>, <frame> und<iframe>.)

• Es gibt ein neues Modul, welches die ruby-Elementsammlung hinzufügt.


30

5. XHTML 2.0

Ende dieses Jahres wird XHTML 2.0 als neuer Standard für Web-Dokumente erwartet. Dochobwohl der die Spezifikation eine kontinuierliche Weiterentwicklung der Standards HTML 4,XHTML 1.0 und XHTML 1.1 darstellt, wird sie nicht abwärtskompatibel zu den genanntenStandards sein. Die Abwärtskompatibilität ist nach Angaben des W3C nicht nötig, da schonüber 95% der zurzeit genutzten Web-Browser XML und Style Sheets unterstützen und somitdie auf XML basierenden XHTML 2.0-Auszeichnungen interpretieren können.

Das Konzept der Modularisierung wurde in XHTML 2.0 beibehalten, jedoch werden dieModule aus der "Modularisierung von XHTML" und XHTML 1.1 nicht einfachübernommen, sondern umstrukturiert und teilweise neu definiert. Hinzukommen noch dreiextern definierte Module: Das Ruby Annotation Module, welches es bereits in XHTML 1.1gab (siehe 4.3.21 Ruby Annotation Module), das XML Events Module, das Event-Listenerund Event-Handler in XML bereitstellt und das XForms Module, welches eine XML-Anwendung darstellt, die die Verarbeitung von Formularen in XHTML 2.0 und anderenAuszeichnungssprachen gewährleistet. Dabei werden in den Modulen die Elemente, Attributeund Inhaltsmodelle spezifiziert.

5.1. Ziele von XHTML 2.0

Welche Absichten verfolgt das W3C mit dem kommenden Standard für webbasierte Doku-mente?

• Soviel allgemeines XML nutzen wie möglich

Schon in XML vorhandene Technologien werden genutzt, statt sie nachzuahmen oder zukopieren. Ein Beispiel hierfür sind die Module XForms und XML Events, die aus XMLübernommen wurden.

• Weniger Präsentation, mehr Struktur

Dieses Ziel ist nicht neu, sondern galt bereits für die Einführung von XHTML. XHTML2.0 trennt sich von weiteren Elementen und Attributen, welche eher gestaltungsorientiertwaren. Der Einsatz von Style Sheets wird mit XHTML 2.0 unumgänglich werden.

• Mehr Usability (Bedienerfreundlichkeit)

Durch die einfachen Regeln aus XML und Module der Spezifikation, sollen Dokumenteeinerseits vom Autor leicht herstellbar und andererseits vom Nutzer leicht handhabbarsein.

• Mehr Accessablity (Zugänglichkeit)

Gerade Nutzern mit eingeschränkten kognitiven Fähigkeiten sollte der Zugang zu Infor-mationen nicht durch den Aufbau von Dokumenten oder deren Design verwehrt werden.


31

• Bessere Internationalisierung

Mit der Anpassung des Standards an internationale Bedürfnisse, schafft man ein Medium,das die Bezeichnung World Wide Web zu Recht tragen darf. Somit können den Nutzernunabhängig von Sprache und Kultur die Informationen bereitgestellt werden, die siebenötigen.

• Mehr Geräteunabhängigkeit

Um möglichst viele Nutzer zu erreichen, sollten verschiedenste Geräte, die überSchnittstellen zum Internet verfügen, bedient werden können. Das bedeutet, statt mehrereVersionen eines Dokuments für verschiedene Geräte anzubieten, sollte ein Dokument un-terschiedlich darstellbar sein, um so von verschiedenen Geräten interpretiert werden zukönnen.

• Weniger Script

XHTML 2.0 integriert erweiterte Funktionen, die in vorherigen Versionen von z. B.Javascript ausgeführt wurden. Das stellt zum einen eine Arbeitserleichterung für Autorendar, die sich nun nicht mehr mit zusätzlichen Script-Sprachen auseinandersetzen müssen.Zum anderen müssen Benutzerprogramme nicht noch zusätzliche Funktionalitäten inForm von Script-Sprachen unterstützen.

• Mehr Semantik

Neben mehr Struktur sollten Dokumente und deren Bestandteile mit mehr Sinn ausgestat-tet werden. Das bedeutet, dass die Elemente nicht nur der Strukturierung von Texten di-enen und damit die Darstellung beeinflussen, sondern dass ihnen auch eine inhaltlicheBedeutung (Semantik) zugewiesen wird.


Streng konforme XHTML 2.0 Dokumente entsprechen den Regeln und Beschränkungen derSpezifikation. Die Definitionen befinden sich in der XHTML 2.0 Relax NG Definition, inXHTML 2.0 Schema und in der XHTML 2.0 Document Type Definition, wobei die letztenbeiden noch nicht veröffentlicht sind.

Seit der Einführung von XHTML 1.0 ist die Angabe der Dokumenttyp-Deklaration Pflicht,das Beispiel zeigt den public-identifier der XHTML 2.0 Dokumenttyp-Deklaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN""http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

Das Wurzelelement von XHTML 2.0 Dokumenten ist <html>, es ist im Document Moduleder Spezifikation definiert. In diesem Element ist der Namensraum von XHTML 2.0anzugeben sowie mit Hilfe des xsi:schemaLocation-Attributs die Angabe, wo das XHTML


32

2.0 Schema definiert ist. Des Weiteren muss hier die Landessprache des Dokuments mittelsdes xml:lang-Attributs festgelegt werden. Das Wurzelelement sieht dann folgendermaßenaus:

<html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="en"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/

http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd">

Danach folgt das <head>-Element, in dem die Angabe des Dokumenttitels notwendig ist. DerDokumentrumpf wird durch das <body>-Element eingeleitet, welches die restlichen Be-standteile (Elemente und Attribute der XHTML 2.0 Module) des Dokuments umschließt.Damit lässt sich ein minimales XHTML 2.0 Dokument wie folgt darstellen:

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/css"

href="http://www.w3.org/MarkUp/style/xhtml2.css"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd"><html xmlns="http://www.w3.org/2002/06/xhtml2/"

xml:lang="de"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/

http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd"><head><title>Minimales XHTML 2.0 Dokument</title>

</head><body><p>...hier steht der Inhalt...</p>

</body></html>

5.3. Unterschiede zu früheren XHTML Versionen

5.3.1. Strukturierende Elemente

In XHTML 2.0 gibt es ein neues Element <section>, mit dem sich Dokumente in Abschnitteuntergliedern lassen. Mit dem ebenfalls neuen Element <h> können Überschriften erzeugtwerden, die je nach Verschachtelung der <section>-Elemente, in denen sie verwendet wer-den, in Hierachieebenen gegliedert werden und somit automatisch verschieden formatiertwerden können. Wie die Überschriften im Einzelnen dargestellt werden, wird mit CSS ges-teuert. Die bekannten Elemente <h1>-<h6> aus Heading-Inhaltsmodell des Textmoduls vonXHTML 1.1 stehen weiterhin zur Verfügung.

Um Textabschnitte voneinander zu trennen, gab es in früheren (X)HTML-Versionen das<hr>-Element. Das <hr>-Element wurde jedoch von den Browsern nur als horizontale Linieinterpretiert. Um dem Element wieder strukturellen Charakter zu verleihen, wurde es durch<separator> ersetzt. Mit dem <separator>-Element können nun z. B. vertikale Abgrenzun-gen von Abschnitten vorgenommen werden oder Sterne zum trennen von Abschnitten


33

angezeigt werden. Die Steuerung der Darstellung ist wiederum CSS vorbehalten.

Manuelle Zeilenumbrüche konnten bisher mit dem Element <br> erzeugt werden, in XHTML2.0 wurde dieses Element zugunsten des <l>-Elements ersetzt. Es umschließt eine Zeile mitStart- und End-Tag und kennzeichnet somit nicht mehr nur die Position des Zeilenumbruchs,sondern zeichnet eine einzelne Textzeile mit Anfang und Ende aus. Damit ist es möglich, dieDarstellung einzelner Zeilen mit CSS zu formatieren, sie automatisch zu nummerieren oder z.B. verschieden einzufärben.

Die Beschränkung des Inhaltsmodells des <p>-Elementes auf Inline-Elemente wurde aufge-hoben. Erlaubt sind nun auch ausgewählte Block-Elemente wie Listen, Tabellen,<blockquote>- und <pre>-Elemente. Das genaue Inhaltsmodell ist dem aktuellen Arbeitsen-twurf zu XHTML 2.0 jedoch noch nicht zu entnehmen. Durch den Wegfall derBeschränkungen ist es Autoren gestattet, logische Textabsätze zusammenzufassen, die jetztauch Block-Elemente enthalten dürfen.

5.3.2. Navigationslisten

Mit dem neuen Element <nl> wird XHTML 2.0 um Funktionen zur Gestaltung vonNavigationsmenüs für Webseiten bereichert. In früheren Versionen mussten für Navigation-sstrukturen Scriptsprachen oder ähnliche Techniken eingesetzt werden, was einenMehraufwand für Entwickler von Webseiten bedeutete. Prinzipiell funktionieren die Naviga-tionslisten wie gewöhnliche verlinkte Listen, mit dem Unterschied, dass diese nun semantischals Navigation gekennzeichnet sind. Damit erreicht man eine bessere Strukturierung vonDokumenten und erhöht die Usability einer Seite, da z. B. Screenreader diese Listen als Navi-gation erkennen und sie somit im normalen Kontext überspringen können.

5.3.3. Bilder

Für das Einbinden von Bildern in Dokumente gab und gibt es weiterhin das <img>-Element.Es entspricht aber nur wenig den Vorstellungen des W3C, denn es erlaubt nur eine Quelle fürein Bild mittels src-Attribut zu definieren. Des Weiteren wird die Möglichkeit alternativeBeschreibungen hinzuzufügen nur unbefriedigend durch das alt-Attribut und das weniggenutzte longdesc-Attribut bewerkstelligt. Deshalb ist in XHTML 2.0 das src-Attribut fürjedes Element vorgesehen. Dadurch lassen sich mit jedem Element Bilder oder andere Ob-jekte wie z. B. Audiofiles einbinden und wenn diese nicht geladen oder dargestellt werdenkönnen, wird alternativ dazu der Inhalt des Elements angezeigt. Dieser Ansatz erlaubt Inhaltevon Objekten umfangreich zu beschreiben und verlagert damit die Funktionalität deslongdesc-Attributs direkt in das Dokument.

5.3.4. Typen

Laut W3C gab es in HTML4 ein srctype-Attribut, mit dem man dem User-Agent mitteilenkonnte, um welchen Datentyp es sich bei einer angegebenen Quelle handelt. Das soll auch inXHTML 2.0 mit diesem Attribut möglich sein. Ein Attribut in dieser Form gab es jedoch in


34

keiner früheren Version von (X)HTML. Der Datentyp einer Quelle (src-Attribut) ließ sichmit dem type-Attribut definieren. Auch die in der XHTML 2.0 Spezifikation angegebenenBeispiele für das srctype-Attribut weisen lediglich die getrennte Schreibweise auf:

<p src="w3c-logo" type="image/png, image/jpeg;q=0.2">W3C logo</p>

Das Beispiel weist einem Paragraphen zwei Quellen mit unterschiedlichen Datentypen fürdas W3C-Logo zu. Ob es tatsächlich das srctype-Attribut gibt, wird sich zeigen, wenn dieXHTML 2.0 Spezifikation als Recommendation veröffentlicht wird (vgl. Axelsson 2005).

5.3.5. Tabellen

Das Tabellenmodul wurde um viele Attribute bereinigt und vereinfacht, ohne den Funktion-sumfang einzuschränken. Bei den entfernten Attributen handelt es sich um jene, die derPräsentation dienten, wie z. B. das border- und align-Attribut.

5.3.6. Bidirektionaler Text

Zur Darstellung von Text in anderer Schreibweise als von links nach rechts, kann das Attributdir universell eingesetzt werden. Das Element <bdo>, dass in früheren (X)HTML-VersionenText als bidirektional kennzeichnete, wurde entfernt.

5.3.7. Editierter Text

Die Elemente <ins> und <del> wurden zugunsten des edit-Attributs entfernt. Mit diesemAttribut und den Attributwerten inserted, deleted, changed und moved lassen sich die In-halte von Textelementen als geändert (editiert) auszeichnen.

5.3.8. Verlinkungen

In XHTML 2.0 kann nicht nur jedes Element durch die Verwendung von Fragmentbezeichn-ern als Ziel eines Hyperlinks dienen, sondern ebenso die Quelle einer Verknüpfung sein. Dashref-Attribut und die damit verwandten Attribute sowie einige neu definierte Attribute,können nun von jedem Element des Dokuments benutzt werden. Damit ist das <a>-Elementeigentlich überflüssig, wurde aber dennoch beibehalten.

5.3.9. Metainformationen

Die Elemente <meta> und <link> wurden überarbeitet und verallgemeinert. Die Syntaxwurde an RDF (Resource Description Framework) angepasst, was mehr Semantik erlaubt.Außerdem wurde das aus RDF bekannte Attribut about eingeführt, mit dem sich Metainfor-mation und Beziehungen zu anderen Dokumenten herstellen lassen. Der Inhalt einer Eigen-schaft (property-Attribut) darf nun auch im Inhaltsbereich des <meta>-Elements stehen. Dascontent-Attribut steht aber weiterhin zur Verfügung, um den Inhalt einer "property"zuzuweisen. Die nachfolgenden Beispiele sind demzufolge äquivalent:


35

<meta property="dc:creator" content="NameDesAutors"/>

<meta property=”dc:creator”>NameDesAutors</meta>

Die Attribute der beiden Elemente dürfen in XHTML 2.0 universell in allen Elementeneingesetzt werden, was wesentlich zur Verbesserung der Semantik in Dokumenten beiträgt(vgl. Birbeck, Pemberton 2005).

5.3.10. Funktion (role)

Es gibt in XHTML 2.0 ein neues Modul mit dem Namen Role Access. Durch das bereit-gestellte Element <access> und den dazugehörigen Attributen key, targetid, und target-

role, lassen sich Verweise innerhalb eines Dokuments für einzelne Tasten der Tastaturdefinieren. Des Weiteren wird ein universell in allen Elementen einsetzbares Attribut namensrole angeboten. Damit werden Elementen verschiedene semantische Funktionen (Rollen) zu-geordnet. Elemente können beispielsweise als Navigation, Notiz oder Hauptinhalt gekennze-ichnet werden (vgl. Birbeck, Pemberton 2005).

5.3.11. Events

Die Funktionalitäten des Event Handlings werden in XHTML 2.0 durch das externe ModulXML Events bereitgestellt. Das bietet den Vorteil, dass nicht mehr die gesamte Sprachegeändert werden muss, um neue z. B. Geräte-spezifische Events hinzuzufügen. Auch konntenin früheren Versionen von HTML Events immer nur von einer Scriptsprache verarbeitetetwerden. Mit dem XML Event Modul können Event-Handler von verschiedenen Script-sprachen bedient werden. Die Auslagerung hat aber auch zur Folge, dass die Attributnamennicht mehr zum Namensraum von XHTML 2.0 gehören. Bei Verwendung des Moduls mussder Namensraum von XML Events angegeben werden, die Attribute können dann über einenNamensraumpräfix verwendet werden. Der XML Events Namensraum ist:http://www.w3.org/2001/xml-events Das Element <script> wurde in XHTML 2.0 in<handler> umbenannt, um die erweiterten Fähigkeiten des Event-Handlings und dieveränderte Semantik zu zeigen (vgl. McCarron, Pemberton, Raman 2003).

5.3.12. Formulare

Wie bereits in der Einleitung erwähnt, werden die Funktionen für die Verarbeitung von For-mularen ebenfalls durch ein externes Modul angeboten. Die Elemente und Attribute des sehrumfangreichen und komplexen XForms-Moduls sind im XHTML 2.0 Namensraum integri-ert. Mit diesem Modul wurden die Funktionen überarbeitet und aktualisiert, um moderne For-mulare in XHTML 2.0 Dokumente einzubinden (vgl. Boyer et al. 2004).

5.3.13. Frames und Framesets

Frames und Framesets wurden endgültig aus XHTML verbannt. Es gibt zwar den XML-Standard XFrames, dieser ist jedoch nicht in XHTML 2.0 integriert, er stellt einen eigenen


36

Dokumenttyp dar (vgl. Herbert 2005).

5.4. Fehlende DTD

Bisher gibt für XHTML 2.0 keine Dokumenttyp-Definition, die den XHTML 2.0 formalbeschreibt und implementiert. Stattdessen sind die Elemente und Attribute von XHTML 2.0mit Hilfe der XML-Beschreibungssprache Relax NG (Regular Language for XML Next Gen-eration) implementiert. Wenn die XHTML 2.0 Spezifikation als Recommendationveröffentlicht wird, wird es eine DTD geben. Dieser Punkt steht an erster Stelle auf der Listeder noch ausstehenden Aufgaben des W3C bezüglich XHTML 2.0.


37

6. CSS2.1

6.1. Grundlagen

CSS ist eine Sprache, mit der sich Dokumente, wie z. B. HTML oder XHTML bezüglichihrer Darstellung durch den User-Agent formatieren lassen. Diese Formatierungsangabenwerden für die jeweiligen Elemente von Dokumenten entweder intern, in den zu formatieren-den Dokumenten oder in externen Dokumenten verfasst, die dann mittels des(X)HTML-Elements <link> eingebunden werden. Bei der internen Angabe von For-matierungsanweisungen können zwei Konzepte unterschieden werden: Zum einen können dieAngaben in einem geschlossenen Block im Header einer Seite definiert werden. Die zweiteMöglichkeit erlaubt die Informationen über die Darstellung, in Form von Attributen, direkt indie Elemente des Dokuments einzufügen. Mit der Forderung der Trennung von Inhalt undPräsentation und der Einführung von XHTML ist die zweite Möglichkeit nicht mehrerwünscht bzw. erlaubt.

Die Regeln zur Formatierung von Dokumenten sollten daher in den externen Dokumentenverfasst werden und auch gegenüber den Angaben im Header des (X)HTML-Dokumentsbevorzugt werden. Der nachfolgende Abschnitt bezieht sich auf die externen Style Sheets, derAufbau der CSS-Regeln im Header entspricht der gleichen Form und Bedeutung.

6.1.1. Aufbau von CSS-Dokumenten

Externe Style Sheets sind einfache Textdateien, die die einzelnen Anweisungen zusammen-fassen. Neben den Anweisungen oder CSS-Regeln gibt es noch die sog. @-Regeln, auf dieich im Abschnitt 6.1.6 näher eingehen werde. Eine CSS-Regel lässt sich in zwei Bereiche un-tergliedern, der Selektor und der Deklarationsblock. Der Selektor gibt, im einfachsten Fall,das Element des (X)HTML-Dokuments an, auf das sich die Regel bezieht. Der Deklarations-block ist von geschweiften Klammern umschlossen, die eine oder mehrere Deklarationenzusammenfassen. Eine Deklaration wiederum besteht aus einer Eigenschaft, gefolgt voneinem Doppelpunkt und mindestens einem Wert. Mehrere Deklarationen werden durchSemikolons voneinander getrennt. Das nachfolgende Beispiel zeigt den Aufbau einer ein-fachen CSS-Regel:

div {background-color: red;

}

Mit dieser Angabe wird jedem <div>-Element eines Dokuments die Hintergrundfarbe Rotzugewiesen.

6.1.2. Selektoren

Die Auswahl der Formatierungsanweisungen für ein Element geschieht anhand von Selek-


38

toren. Der Selektor ist dabei nach einem Schema bzw. Muster notiert, dass das Ansprecheneinzelner Elemente, aller Elemente des selben Typs oder beispielsweise auch nur Elementedie in einer bestimmten Relation zu anderen Elementen stehen, ermöglicht.

Um herauszufinden, ob ein Selektor einem bestimmten Element entspricht, wird ein Vergle-ich zwischen dem Muster nach dem der Selektor notiert ist und der Abbildung der Elementeim Dokumentbaum durchgeführt. In einem Dokumentbaum wird die Verschachtelung der El-emente des (X)HTML-Dokuments, beginnend mit dem Wurzelelement, in eine Baumstrukturüberführt. Das nachfolgende Beispiel zeigt einfaches XHTML-Dokument und denzugehörigen Dokumentbaum:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" ><head><title>Minimales XHTML 1.1 Dokument</title>

</head><body><p>...hier steht der Inhalt...</p><div><ul><li>item1</li><li>item2</li><li>item3</li>

</ul></div>

</body></html>

Figure 1. Schematische Darstellung des Dokumentbaums eines einfachenXHTML-Dokuments


39

Aus der Baumstruktur resultieren die Begriffe, die die Beziehungen der Elementeausdrücken. Das Elternelement von <p> und <div> ist <body>, <p> und <div> heißenKindelemente. Alle Elemente die sich von <body> aus verzweigen, werden als Nachfahrenbezeichnet, also auch <ul> und die drei <li>-Elemente, die wiederum als benachbarteGeschwister bezeichnet werden. Diese und weitere Begriffe werden zu Erläuterung und Defi-nition der Selektoren verwendet.

CSS2.1 sieht eine Abstufung der Selektoren vor. Einfache Selektoren bestehen aus einemUniversalselektor oder ein Typselektor, die noch von Attributselektoren, ID-Selektoren oderPseudo-Klassen begleitet werden können. Die zweite Gruppe wird, ohne Zusatz, als Selek-toren bezeichnet, mit ihnen lassen sich sehr komplexe Muster aufstellen. Sie bilden eineVerbindung aus mehreren einfachen Selektoren, die durch sog. Kombinierer miteinanderverknüpft sind. Zur Auswahl stehen drei Kombinierer: Leerzeichen " ", ">" und das "+",dabei darf zwischen den beiden letzten Kombinierern und dem Selektor ebenfalls ein Leerze-ichen stehen.

Selektoren (im allgemeinen Sinn) können auch durch Komma, voneinander getrennt, grup-piert werden. Das bedeutet, dass sich alle Anweisungen des darauf folgenden Deklarations-blockes, auf alle von den Selektoren angesprochenen Elemente beziehen.

Nachfolgend werden die in CSS möglichen Selektoren beschrieben, dabei ist nach dem Na-men des Selektors immer ein Muster angegeben. Die Zeichen haben folgende Bedeutung:

Table 3. Bedeutung der Notation

Abkürzung Bedeutung

E, F Elementnamen

att Attributname

val Wert eines Attributs

c (Landes-)Sprache des Dokuments

:link Pseudo-Klasse, Pseudo-Element

.myclass Klassenname

#myid Name des Fragmentbezeichners, id-Attribut

" ", ">", "+" Kombinierer

Universalselektor (*): (Das "*" ist nicht nur ein Muster, sondern tatsächlich die Syntaxdieses Selektors.) Mit diesem Selektor wird jedes Element eins Dokuments angesprochen, diedeklarierten Eigenschaften gelten also für alle Elemente. Das "*" kann dann weggelassenwerden, wenn es sich nicht um die einzige Komponente eines einfachen Selektors handelt.Typselektor (E): Der Typselektor stimmt mit jedem <E>-Element überein.Nachfahren-Selektor (E F): Für jedes Element <F>, welches ein Nachfahre eines -


40

Elements ist, gelten die Anweisungen des Deklarationsblockes.Kind-Selektor (E > F): Jedes Element <F>, welches ein Kindelement des Elements <E> ist,wird formatiert. Der Selektor würde für folgendes Beispiel gelten:

<E><X>Inhalt</X><F>Inhalt</F><X>Inhalt</X>

</E>

jedoch nicht für:

<E><X><F>Inhalt</F>

</X></E>

Um im zweiten Beispiel das <F>-Element zu formatieren, müsste man den Nachfahren-Selek-tor benutzen.Benachbarte-Geschwister-Selektor (E + F): Dieser Selektor gilt für alle Elemente <F>, dieals direkten Nachbar ein Element <E>, dasselbe Elternelement besitzen und in der Reihen-folge <E> <F> notiert sind. Der Selektor würde für folgendes Beispiel gelten:

<X><E>Inhalt</E><F>Inhalt</F>

</X>

Attribut-Selektoren: Es gibt verschiedene Attribut-Selektoren, die entweder nur das Attributoder eine Attribut-Wert-Kombination enthalten.[att]: Betrifft jedes Element, das das Attribut mit beliebigem Wert enthält.[att=val]: Betrifft jedes Element, dessen Attribut den angegebenen Wert besitzt.[att~=val]: Betrifft jedes Element, dessen Attribut eine Liste von Werten besitzt, die durchLeerzeichen voneinander getrennt werden und einer der Listeneinträge genau dem im Selek-tor angegebenen Wert entspricht.[att|=val]: Betrifft jedes Element, dessen Attribut eine Liste von durch Bindestriche ge-trennte Wörter enthält und diese mit dem angegebenen Wert beginnt.Klassen-Selektoren (.myclass): Dieser Selektor bezieht sich auf alle Elemente, derenclass-Attribute den Wert myclass aufweisen. Es ist eine verkürzte Schreibweise von[att~=val], wobei att=class und val=myclass ist ([class~=myclass]).ID-Selektor (#myid): In (X)HTML werden Fragmentbezeichner für Elemente durch das -idAttribut vergeben. Dabei ist der Wert dieses Attributs immer einzigartig, d. h. es dürfen ineinem Dokument niemals mehrere Elemente mit der gleichen ID auftreten. Der ID-Selektorbezieht sich also immer genau auf das eine Element, dessen ID der im Selektor angegebenenID entspricht. Der ID-Selektor entspricht der Notation [id=myid], jedoch ändert sich dann dieSpezifität des Selektors.Pseudo-Klassen und Pseudo-Elemente: Mit Pseudo-Klassen und -Elementen lassen sich


41

bestimmte Inhalte von Elementen formatieren, welche sich nicht direkt über den Dokument-baum erreichen lassen. Mit Pseudo-Elementen kann z. B. der erste Buchstabe oder die ersteZeile eines Absatzes formatiert werden. Mit Pseudo-Klassen lassen sich Inhalte unter an-derem anhand ihres Zustands formatieren, bei Links z. B. ob diese bereits besucht wurdenoder fokussiert sind.Pseudo-Klasse first-child (E:first-child): Mit diesem Selektor lässt sich das ersteKindelement <E> formatieren. Diese Pseudo-Klasse bildet eine Ausnahme, denn das ersteKindelement lässt sich sehr wohl anhand des Dokumentbaums identifizieren.Link-Pseudo-Klassen (E:link, E:visited): Diese beiden Klassen bewirken eine For-matierung der Elemente, die das href-Attribut aufweisen. Dabei bezieht sich :link aufVerknüpfungen die noch unbesucht sind und :visited auf Links, die bereits besucht wur-den.Dynamische Pseudo-Klassen (E:hover, E:active, E:focus): Die Klasse :hover formatiertalle Elemente <E>, die z. B. mit dem Mauszeiger "überfahren" werden. :active bezieht sichauf diejenigen Elemente, die mittels Maus angeklickt wurden, :focus betrifft Elemente, dieden Focus haben.Sprach-Pseudo-Klasse (E:lang(c)): Mit dieser Klasse lassen sich die Elemente <E> for-matieren, die das Sprachattribut und die angegebene Sprache c enthalten.Pseudo-Elemente first-line, first-letter (E:first-line, E:first-letter): Diese Selek-toren beeinflussen die Darstellung der ersten Zeile (:first-line) oder des ersten Buch-staben (:first-letter) des Inhalts eines Elements <E>.Pseude-Elemente before, after (E:before, E:after): Diese Selektoren gestatten vor odernach dem Inhalt eines Elementes <E> automatisch generierten Inhalt einzufügen. Das könnenz. B. ein einfacher Text oder auch automatische Nummerierungen von Listen etc. sein.

6.1.3. Die Kaskade

Die Kaskade ist ein Verfahren, mit dem die Regeln eines Style Sheets gewichtet werden. Mitder Gewichtung der Regeln wird bestimmt, welche Regel sich gegenüber anderen Regeln, diedas gleiche Element betreffen, durchsetzt und somit angewendet werden muss. DieseNotwendigkeit besteht immer dann, wenn verschiedene Regeln für gleiche Elemente verfasstsind. Dabei müssen diese Überlappungen der Regeln nicht unbedingt in ein und demselbenCSS enthalten sein. Es können auch mehrere Style Sheets für ein Dokument vorhanden sein.Neben den Autoren kann auch der Nutzer selbst ein Style Sheet angeben, nach dem das Be-nutzerprogramm die Seiten formatiert. Auch das Benutzerprogramm hält ein Standard StyleSheet bereit, um die Seiten darzustellen. Die Kaskade ist in vier Stufen unterteilt:

1. Alle Deklarationen, die sich auf dasselbe Element beziehen, werden anhand des Selek-tors ermittelt.

2. Die Regeln werden anhand der Wichtigkeit, in aufsteigender Reihenfolge sortiert:

a. Style Sheets des Benutzerprogramms

b. Style Sheets des Nutzers

c. Style Sheets des Autors


42

d. Style Sheets des Autors, die mit !importend gekennzeichnet sind

e. Style Sheets des Nutzers, die mit !importend gekennzeichnet sind

3. Immer noch überlappende Regeln werden anhand ihrer Spezifität sortiert.

4. Regeln mit der gleichen Spezifität werden in der Reihenfolge sortiert, in der sie im StyleSheet notiert wurden, zuletzt notierte haben Vorrang.

Mit !importend können Nutzer und Autoren Regeln kennzeichnen, die besonderen Vorranghaben. Dabei sind die !importend-Regeln des Nutzers höher eingestuft als die des Autors.Die Spezifität, die von der 3. Regel der Kaskade benutzt wird, beschreibt die Wichtigkeit derCSS-Regeln anhand der Bestandteile von Selektoren und besteht aus einem Zahlensystemvon vier Ziffern (a-b-c-d).a: ist 1, wenn die Regel durch ein style-Attribut in einem Element des HTML-Dokumentsdefiniert wird, in allen anderen Fällen 0.b: ergibt sich aus der Anzahl der id-Attribute im Selektor.c: ergibt sich aus der Anzahl anderer Attribut-Namen und Pseudo-Klassen des Selektors.d: ergibt sich aus der Anzahl der Element-Namen und Pseudo-Elemente des Selektors.

Ein Selektor dessen Spezifität 0-1-0-1 ist, hat eine höhere Wertigkeit als z. B. ein Selektor derSpezifität 0-0-1-3. Die Kaskade muss nicht alle vier Stufen durchlaufen, gibt es beispiel-sweise nach der zweiten Stufe nur noch eine Regel, die ein Element betrifft, so werden dieStufen drei und vier nicht mehr durchgeführt.

6.1.4. Berechnung von Eigenschaftswerten

Der Wert, den eine Eigenschaft für ein bestimmtes Element annimmt, wird in einer vierStufen umfassenden Berechnung ermittelt. Anhand der Spezifizierung, wird der sog. spezi-fizierte Wert einer Eigenschaft durch das Benutzerprogramm ermittelt. Der spezifizierte Wertentspricht dem im Style Sheet angegebenen Wert einer Eigenschaft. Dieser wird auf folgendeWeise ermittelt:

1. Liefert die Kaskade einen Wert für eine Eigenschaft, wird dieser verwendet.

2. Falls die Eigenschaft geerbt wird und das Element, dessen Eigenschaftswert ermitteltwerden soll, nicht das Wurzelelement ist, wird der berechnete Wert des übergeordnetenElements benutzt.

3. Kann durch die ersten beiden Mechanismen kein Wert ermittelt werden, wird der Aus-gangswert der Eigenschaft benutzt.

In der zweiten Stufe wird der spezifizierte Wert in den berechneten Wert überführt. Berech-nete Werte werden an die Kindelemente vererbt. Zwei Fälle werden unterschieden: Ist derspezifizierte Wert einer Eigenschaft nicht der Wert inherit (siehe 6.1.5 Vererbung vonEigenschaftswerten), dann erfolgt die Berechnung so, wie sie in der betreffenden Eigenschaft


43

(in der Spezifikation) notiert ist. Andernfalls, wenn es sich um den Wert inherit handelt, soist der berechnete Wert gleich dem berechneten Wert des Elternelementes.

Ist der berechnete Wert ein relativer Wert (wie z. B. eine Prozentangabe), wird dieser in derdritten Stufe in einen absoluten Wert umgerechnet, dieser heißt dann verwendeter Wert. Derverwendete Wert wird nicht gerundet.

In der letzten Stufe wird der Wert gegebenenfalls noch an die lokalen Bedingungenangepasst. Das bedeutet, wenn ein Browser z. B. nur ganze Zahlen als Werte für einen Rah-men verwenden kann, wird der Wert in dieser Stufe durch Annäherung ermittelt. Das Ergeb-nis ist der aktuelle Wert.

6.1.5. Vererbung von Eigenschaftswerten

Elemente können die Werte einer Eigenschaft von ihrem Elternelement erben. Das nachfol-gende Beispiel verdeutlicht das Prinzip der Vererbung von Werten des Elternelements an einKindelement:

h1 {color: red;}

...<body><h1>Die Überschrift enthält ein <em>hervorgehobenes</em> Wort.</h1>...

</body>...

In dem Beispiel ist h1 {color: red;} die einzige Stilanweisung, diese veranlasst dieDarstellung der Überschrift in roter Schriftfarbe. Da für das Element <em> keine Stilan-weisung existiert, erbt dieses Element die Farbe des Elternelements <h1>.

Dabei werden in CSS2.1 auch relative Werte vererbt, eine Liste der Eigenschaften, dessenberechnete Werte Prozentangaben sein können, findet sich im Anhang der Spezifikation. ObWerte von Eigenschaften vererbbar sind oder nicht, ist in der Spezifikation definiert. Es stehtjedoch für jede Eigenschaft der Wert inherit zur Verfügung, welcher angibt, dass der Wertdieser Eigenschaft vom Elternelement geerbt wird. Dadurch vererben auch Eigenschaftenihre Werte, die laut Definition nicht vererbbar sind.

6.1.6. @-Regeln

In CSS2.1 gibt es drei besondere Regeln, die sog. @-Regeln. Diese sind durch das einleitende@-Zeichen gekennzeichnet.@import: Mit dieser Regel können, mit Angabe einer URI (Uniform Resource Identifier),andere Style Sheets in das Dokument importiert werden. Die @import-Regeln müssen vorallen anderen Regeln des Style Sheets notiert werden.@media: Mit dieser Regel werden normale CSS-Regelmengen zusammengefasst, die sich aneinen Medientypen richten. In CSS2.1 stehen zehn Medientypen zur Verfügung: all,


44

braille, embossed, handheld, print, projection, screen, speech, tty und tv. Die@media-Regel erlaubt mit einem einzigen Style Sheet die Darstellung eines Dokumentes aufverschiedenen Geräten zu steuern.@page: Mit dieser Regel lassen sich Regelmengen zusammenfassen, die für die Druckaus-gabe von Webseiten verwendet werden sollen. Hier lassen sich Regeln definieren, die festle-gen, wie der Inhalt der Webseite auf einer Seite mit fester Größe (z. B. DIN A4-Format) an-geordnet werden soll oder wie breit beispielsweise die Ränder der Seite sein sollen.

6.2. Das Box-Modell

Die Darstellung der Elemente einer Webseite bzw. des Dokumentenbaums wird durch dasCSS-Box-Modell beschrieben. Eine Box ist ein Rechteck, welches den Inhalt eines jeden Ele-ments des Dokuments umgibt. Dabei wird ein solches Rechteck durch vier verschiedeneBereiche charakterisiert. Der innerste Bereich einer Box wird als content-Bereich(Inhaltsbereich) bezeichnet und enthält, je nach Element, z. B. Text, Bilder oder Tabellen.Umgeben wird der Inhaltsbereich vom padding-Bereich, welcher den Abstand des Inhalts derBox zum Rahmen definiert. Mit dem darauf folgenden border-Bereich kann ein Rahmen füreine Box definiert werden. Der äußerste Bereich heißt margin-Bereich, mit ihm werden dieRänder angegeben, die den Abstand zu benachbarten oder umgebenen Elementen festlegen.

Die Bereiche padding, border und margin sind optional und können für jede Seite der Boxeinzeln festgelegt werden. Neben den räumlichen Ausdehnungen der Bereiche einer Boxlassen sich auch gestalterische Eigenschaften, wie z. B. Farben, Hintergründe und Linienstilefür Rahmen festlegen. Allein der margin-Bereich wird immer transparent dargestellt. Dienachfolgende Grafik zeigt die einzelnen Bereiche einer Box:

Figure 2. Die Bereiche des CSS2.1 Box-Model


45

6.2.1. Ausdehnung einer Box

Die Breite und Höhe einer Box ergibt sich aus der Summe der Breiten- und Höhenangabender einzelnen Bereiche. Dabei kann die Breite des Inhaltsbereiches explizit mit der Eigen-schaft width und die Höhe des Bereiches mit height festgelegt werden. Werden diese Eigen-schaften nicht explizit festgelegt, wird die Breite und Höhe des Inhaltsbereichs durch den In-halt des Elements, das die Box erzeugt, festgelegt. Die Box nimmt die Ausdehnung an, dieder Inhalt benötigt.

Die Gesamtbreite einer Box, ergibt sich aus den Werten der Eigenschaften: border-left +padding-left + width + padding-right + border-right.

Die Gesamthöhe einer Box, ergibt sich aus den Werten der Eigenschaften: border-top +padding-top + height + padding-bottom + border-bottom.

Nachfolgend werden die eben genannten und gegebenenfalls weitere Eigenschaften der Bere-iche beschrieben.

6.2.1.1. padding-Eigenschaften

Für diesen Bereich stehen folgende Eigenschaften zu Verfügung: padding-top, padding-

right, padding-bottom, padding-left und padding. Die Eigenschaften können festeLängenwerte oder prozentuale Werte annehmen. Prozentwertangaben beziehen sich auf dieAusdehnung des umschließenden Blocks (siehe 6.3.1 Box-Arten). Die Werte der Eigen-schaften werden nicht vererbt. Mit den vier erstgenannten Eigenschaften lassen sich die Bre-iten für jede Seite extra festlegen, padding ist eine Kurzfassung dieser vier Eigenschaften.Die Nachfolgende Tabelle zeigt die Zuordnung der notierten Werte der Eigenschaft paddingzu den Seiten einer Box.

Table 4. Zuordnung der Eigenschaftswerte zu den Seiten einer Box

Notation der padding-Deklaration Bedeutung

padding: 10px; alle vier Seiten sind 10px breit

padding: 10px 15px; top und bottom=10px, left und right=15px

padding: 10px 15px 20px; top=10px, left & right=15px, bottom=20px

padding: 10px 15px 20px 25px; top=10px, right=15px, bottom=20px,left=25px

6.2.1.2. margin-Eigenschaften

Für diesen Bereich stehen die Eigenschaften margin-top, margin-right, margin-bottom,margin-left und margin zur Verfügung. Sie können feste Längenwerte, prozentuale Werte


46

oder den Wert auto annehmen. Die Werte der Eigenschaften werden nicht vererbt. Die vierersten Eigenschaften legen die Breite der jeweils betreffenden Seite fest, während margin

wiederum eine Kurzfassung für die Angabe aller Ränderbreiten darstellt. Die Zuordnung derangegebenen Werte der Eigenschaft margin zu den jeweiligen Seiten erfolgt analog zupadding. Werden zwei Boxen nebeneinander angeordnet, für die beide eine Randbreiteangegeben ist, so fallen diese zusammen. Der Abstand zwischen den border-Bereichenzweier Boxen, ist das Maximum der Eigenschaften margin-right der linken Box und mar-

gin-left der rechten Box.

6.2.1.3. border-Eigenschaften

Die Breiten der Rahmen einer Box lassen sich durch die Eigenschaften border-top-width,border-right-width, border-bottom-width, border-left-width oder die Kurzfassungborder-width (analog zu padding) einstellen. Die erlaubten Werte sind thin für dünneRahmen, medium für mittlere Rahmenstärken, thick für dicke Rahmen, sowie die Angabevon Längenwerten, zur Einstellung individueller Rahmenstärken. Die Werte der Eigen-schaften werden nicht vererbt. Wie die Werte thin, medium und thick interpretiert werden,ist dem Benutzerprogramm überlassen, jedoch unterliegen sie der notierten Ordnung.

Die Farbe der Rahmen wird über die Eigenschaften border-top-color, border-

right-color, border-bottom-color, border-left-color oder über die zusammen-fassende Eigenschaft border-color (analog zu padding) festgelegt. Als Werte der Eigen-schaften können Farbwerte oder die Angabe transparent, für transparente Darstellung,notiert werden. Wird kein Farbwert angegeben, so muss die Farbe der color-Eigenschaft desElements, für das der Rahmen erzeugt wird, benutzt werden. Die Werte werden nicht vererbt.

Über die Eigenschaften border-top-style, border-right-style, border-bottom-style,border-left-style und border-style lassen sich verschiedene Linienstile für den ver-wendeten Rahmen angeben. Es stehen zehn verschiedene Stile zur Verfügung, gepunktete,gestichelte oder durchgezogene Linien seien hier als drei typische Vertreter der Linienstilegenannt. Die Werte der Eigenschaft border-style werden den Seiten analog zu padding zu-geordnet.

Des Weiteren gibt es noch fünf zusammenfassende Rahmeneigenschaften: border-top, bor-

der-right, border-bottom, border-left und border. Diese Eigenschaften erlauben dieAngabe der Rahmenbreite, des Rahmenstils und der Rahmenfarbe. Das nachfolgendeBeispiel deklariert einen dünnen, durchgezogenen, blauen linken Rahmen:

border-left: thin solid blue;

Werden einzelne Werte dieser Eigenschaft weggelassen, so wird der Standardwert derweggelassenen Eigenschaft benutzt. Mit der Eigenschaft border lassen dieselben Werte füralle vier Seiten der Box gemeinsam festlegen.

6.3. Das visuelle Formatierungsmodell


47

Das visuelle Formatierungsmodell beschreibt die Verarbeitung, der von den Elementen imDokumentbaum erzeugten Boxen, in visuellen Medien. Es spezifiziert die Art der Box, dieein Element erzeugt, wie diese zu positionieren ist und wie sie sich zu anderen Boxen verhält.Das sehr umfangreiche und komplexe visuelle Formatierungsmodell ist besonders wichtig, daes die gesamte Darstellung eines Dokuments beeinflusst. Im Folgenden werden die wichtig-sten Aspekte zusammengefasst.

6.3.1. Box-Arten

Die Darstellung von strukturierten Dokumenten wie HTML oder XHTML in visuellen Me-dien, erfolgt im Fenster des Benutzerprogramms. Dieses Fenster wird als Viewport bezeich-net und stellt den Raum zur Darstellung von Webdokumenten zur Verfügung. Der Viewportbildet den sog. umschließenden Block für ein Dokument. Ein umschließender Block wirdauch von Elementen erzeugt, die diesen ihren Nachkommen bereitstellen. So wird z. B. dieBox eines <p>-Elements, welches in einem <div>-Element verschachtelt ist, im content-Bereich des <div>-Elements, der den umschließenden Block für <p> bildet, dargestellt. Dienachfolgende Grafik zeigt den Zusammenhang an einem Beispiel:

Figure 3. Umschließender Block einer Box

Grundsätzlich gibt es in CSS zwei Arten von Boxen, die sich jedoch weiter untergliedernlassen: zum einen Block-Boxen, die von Block-Level-Elementen erzeugt werden, zum anderendie Inline-Boxen, die durch Inline-Level-Elemente generiert werden. Block-Level-Elementesind z. B. <div>, <p> und <table>, typische Vertreter der Inline-Level-Elemente sind z. B.<span> und <em>.


48

Der Unterschied zwischen den genannten Box-Arten ist die Anordnung der Boxen im View-port, wenn diese nicht individuell beeinflusst wird und wie die Box-Arten sich zueinanderverhalten. Block-Boxen werden in der Regel vertikal angeordnet, d. h. zwei direkt benach-barte Elemente im (X)HTML-Dokument würden untereinander im Browserfenster angezeigtwerden. Inline-Boxen hingegen werden horizontal angeordnet, das bedeutet direkt benach-barte Elemente würden nebeneinander, zeilenweise angeordnet werden.

Mit der Eigenschaft display lässt sich die Art der erzeugten Box steuern. Neben den Wertenblock und inline gibt es weitere, die andere Box-Arten erzeugen. Setzt man die Eigenschaftdisplay für ein Inline-Level-Element auf block, so würde dieses Element genausodargestellt werden, wie gewöhnliche Block-Boxen. Das Anzeigen von Boxen kann durch denWert none der display-Eigenschaft unterbunden werden. Das hat zur Folge, dass Elementemit dieser Eigenschaft nicht nur unsichtbar sind, sondern dass sie keine Box erzeugen undsomit keinen Einfluss auf das weitere Layout des Dokuments nehmen.

6.3.2. Positionierung von Boxen

Die Positionierung von Boxen wird mit der Eigenschaft position gesteuert. Wird dieseEigenschaft nicht angegeben oder mit den Werten static oder relative benutzt, heißt das,dass Block- und Inline-Boxen im normalen Fluss angezeigt werden. Das hat zur Folge, dassBoxen der Elemente genau in der Reihenfolge und Anordnung, wie sie im(X)HTML-Dokument notiert sind, dargestellt werden.

Es ist jedoch auch gestattet, eine Box aus ihrem normalen Fluss herauszulösen und sie z. B.ganz links oder rechts des umschließenden Blocks zu positionieren. So positionierte Boxenwerden als Floats bezeichnet. Um eine Box als Float zu deklarieren, stehen in CSS die Eigen-schaften float und clear zur Verfügung. Mit der Eigenschaft float wird der Textflusslinks oder rechts um die Box festgelegt, mit clear kann der Textfluss um die Box unterbun-den werden.

Die absolute Positionierung geht noch einen Schritt weiter. Elemente die mit position: ab-

solute oder position: fixed deklariert werden, werden vollständig aus dem normalenFluss gelöst und können überall platziert werden. Der Wert absolute bewirkt eine Anord-nung relativ zum umschließenden Block, der Wert fixed hingegen eine feste Positionierungbezüglich des Viewports. Die Position der Box wird horizontal mit den Eigenschaften left

oder right und vertikal mit top oder bottom festgelegt.

6.3.3. Überlappende Boxen

Durch die individuelle Positionierung von Boxen kann es zur Überlappung von Boxen kom-men. CSS stellt eine Eigenschaft bereit, mit der man die Sichtbarkeit der Boxen steuern kann.Mit der Eigenschaft z-index lassen sich den Boxen ganzzahlige Werte zuweisen, die die Po-sition entlang der z-Achse bestimmen. Dabei verdeckt eine Box mit einem größeren z-Indexeine Box mit einem kleinerem.


49

6.3.4. Visuelle Effekte

Die nachfolgenden Beschreibungen der Eigenschaften overflow, clip und visibility sindTeil eines eigenen Abschnittes der CSS2.1-Spezifikation, fügen sich hier jedoch gut in denKontext ein.

Die Eigenschaft overflow steuert das Verhalten des Inhalts einer Box, wenn diese mehr Platzbenötigt, als ihr der umschließende Block einräumt. Es können z. B. die Werte scroll, vis-

ible oder hidden zugeordnet werden. Der Wert scroll bewirkt einen scrollbaren Inhalt,hidden dagegen dass der Inhalt, der die Boxbreite überschreitet, nicht angezeigt wird. Ist dieEigenschaft auf den Wert visible gesetzt, wird der Inhalt über die Grenzen der Box hinausangezeigt.

Mit der Eigenschaft clip lässt sich der Inhalt einer Box abschneiden. Dazu werden Koordi-naten für ein Rechteck angegeben, anhand derer die Bereiche abgeschnitten werden, dieaußerhalb dieser Koordinaten liegen. Der als Bezugspunkt dienende Koordinatenursprung istdabei die linke obere Ecke des umschließenden Blocks.

Die Eigenschaft visibility mit dem Wert hidden erlaubt den Inhalt einer Box eines Ele-ments auszublenden. Eine unsichtbare Box nimmt jedoch, im Gegensatz zur Deklarationdisplay: none Einfluss auf das Layout einer Seite. Das bedeutet, der Inhalt ist unsichtbaraber es wird der benötigte Raum für die Box reserviert.

6.4. Automatisch erzeugter Inhalt

Wie bereits im Abschnitt Selektoren erwähnt, besteht in CSS die Möglichkeit mit denPseudo-Elementen :before und :after Inhalte, durch CSS gesteuert, in das Dokumenteinzubinden. Unter Verwendung der Eigenschaft content lassen sich so z. B. Zeichenketten(string), Nummerierungen oder Anführungszeichen einfügen. Das scheint zunächst einWiderspruch zu den Entwicklungen von XHTML zu sein, dessen erklärtes Ziel die Trennungvon Inhalt/Struktur und Präsentation war. Die Möglichkeit, Zeichenketten einzubinden istaber z. B. dann sinnvoll, wenn der eigentliche Inhalt, beispielsweise Bilder, nicht geladenwerden können. Es ist auch vorstellbar, Überschriften automatisch zu nummerieren oderAnführungszeichen, abhängig von der verwendeten Sprache eines Zitats, unterschiedlichdarzustellen.

Des Weiteren stehen noch umfangreiche Eigenschaften zur Formatierung vonAufzählungszeichen von Listeneinträgen bereit, die mit Hilfe von CSS eingeblendet werdenkönnen. Dabei kann die Art der Aufführungszeichen und die Position bezüglich des Lis-teneintrags individuell festgelegt werden.

6.5. Farben und Hintergründe

Zur farblichen Gestaltung von Dokumenten, stehen in CSS2.1 diverse Eigenschaften zur


50

Verfügung. Farbige Textinhalte oder Vordergrundfarben von Elementen werden mit derEigenschaft color festgelegt. Farben werden dabei durch 17 Farbnamen, durch hexadezimaleZeichenketten oder durch die dreistellige Angabe von RGB-Farbwerten angesprochen. DerFarbname orange wurde in CSS2.1 neu eingeführt, sein Hexadezimalwert ist: #FFA500.

Der Hintergrund von Elementen kann mit Bildern oder Hintergrundfarben gestaltet werden.Hintergrundbilder lassen sich auf Seiten so platzieren, dass sie wiederholende Muster bildenoder z. B. auf der Seite so fixiert werden, dass sie sich beim scrollen einer Seite nicht mit be-wegen.

6.6. Schrift- und Textformatierung

Das Gebiet der Formatierung von Schrift und Text ist prinzipiell problematisch, da es keineeinheitlichen Konventionen für die Vergabe von Schriftnamen und Eigenschaften gibt. Es ex-istieren verschiedenste Bezeichnungen, für z. B. kursive Darstellung der Schrift oder dieSchriftgewichtung (fett oder dünn). Die Angabe eines expliziten Schriftnamens, wie z. B."AvantGarde Bk Bt Demi Oblique", würde in den meisten Fällen wahrscheinlich wenig Sinnergeben. Auch kann nicht vorausgesetzt werden, dass auf jedem Computer die gleichenSchriften vorhanden sind. Diese Tatsache erschwert die Arbeit der Autoren, bezüglich derDarstellung von Texten.

In CSS wird, wegen der eben beschriebenen Probleme, ein anderer Ansatz gewählt. Die For-matierung von Schrift, wird durch mehrere Eigenschaften schrittweise durchgeführt.

6.6.1. Schrift-Eigenschaftenfont-family: Mit dieser Eigenschaft werden Schriftfamilien, wie z. B. Verdana, Helveticaoder Arial, angegeben. Auch die Angabe von generischen Familien, wie sans, sans-serifoder monospace, ist gestattet. Generische Schriftfamilien können auch als Ergänzung zu den"normalen" Schriftfamilien angegeben werden. Diese bedingen dann die Auswahl einerSchrift, die als Ersatz für nicht verfügbare, explizit angegegene Schriftarten verwendet wird.Welche Schrift tatsächlich verwendet wird, hängt dabei vom Benutzerprogramm und denverfügbaren Systemschriften ab.font-style: Diese Eigenschaft legt den Stil einer Schrift fest. Zur Auswahl stehen die Wertenormal für noramle, sowie italic und oblique für geneigte Schrift.font-variant: Soll eine Schrift in Kapitelchen (nur Grossbuchstaben) angezeigt werden,kann das durch diese Eigenschaft und den Wert small-caps veranlasst werden.font-weight: Diese Eigenschaft legt das Gewicht, respektive die Stärke einer Schrift fest.Werte dieser Eigenschaft sind entweder die Schlüsselwörter lighter, normal, bold undbolder oder die Angabe von Zahlen zwischen 100 und 900 (nur hunderter Schritte), wobei z.B. bold mit dem Wert 700 gleichzusetzen ist.font-size: Die Schriftgröße lässt sich durch absolute, relative oder Längenwerte festlegen.Absolute Werte sind Schlüsselwörter, wie small, medium oder large. Relative Werte sindsmaller und larger, welche sich auf die Schriftgrößen übergeordneter Elemente beziehen,genauso wie die Angabe von Prozentwerten. Die letzte Möglichkeit stellt die Angabe von


51

Längenwerten dar, die abhängig von ihrer Einheit ebenfalls absolute oder relative Werterepräsentieren.font: Die Eigenschaft erlaubt eine zusammenfassende Angabe der o g. Schrifteigenschaftenoder bedingt, durch die Angabe von speziellen Schlüsselwörtern, die Verwendung der Stan-dardschriften des Systems auf dem die Seiten angezeigt werden.

6.6.2. Text-Eigenschaften

Zur Gestaltung von Text steht eine Reihe von Text-Eigenschaften zur Verfügung. Mit ihnenlassen sich ganze Absätze formatieren, Zeilen oder Wörter ausrichten bzw. einrücken oder z.B. Leerräume zwischen Wörtern beeinflussen.text-indent: Mit der Eigenschaft text-indent kann die erste Zeile eines Absatzeseingerückt werden. Erlaubt sind dabei prozentuale oder Längenwerte.text-align: Textabsätze werden durch diese Eigenschaft linksbündig, rechtsbündig, zentri-ert oder im Blocksatz dargestellt.text-decoration: Die Eigenschaft ermöglicht Texte unterstrichen, durchgestrichen odersogar blinkend darzustellen.letter-spacing, word-spacing: Mit diesen Eigenschaften lassen sich die Abstände zwis-chen einzelnen Wörtern bzw. Buchstaben definieren.text-transform: Die Eigenschaft verändert den Text so, dass z. B. jeder Anfangsbuchstabeeines Wortes groß geschrieben wird oder alle Wörter eines Textes nur groß oder kleingeschrieben werden.white-space: Treten im Inhalt eines Elements Leerzeichen auf, so kann man die Darstellungrespektive die Handhabung dieser Zeichen durch die Eigenschaft white-space steuern.

6.7. Unterschiede zu CSS2

CSS2.1 stellt eine Entwicklungsstufe zwischen CSS2 und der zukünftigen SpezifikationCSS3 dar. Dabei wurden die bekannten Fehler der CSS2-Spezifikation bereinigt. Die Listeder bekannten Fehler, die CSS2-Errata, kann unterhttp://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html abgerufen werden.

Nicht verändert wurden die Bereiche von CSS2, die weitläufig akzeptiert und bereits von denBenutzerprogrammen sowie den Autoren von Style Sheets umgesetzt wurden. In Fällen, indenen die Umsetzung der Eigenschaften durch Benutzerprogramme von den Beschreibungender Spezifikation abwich, wurde die Spezifikation bezüglich dieser Abweichungen geändert.Eigenschaften, die aufgrund mangelnder Unterstützung durch Benutzerprogramme von denAutoren nicht verwendet wurden, sind aus CSS2.1 entfernt worden. Ebenso wurden Eigen-schaften entfernt, die von CSS3 nicht unterstützt werden, da sie bereits als veraltet gelten. MitCSS2.1 sind auch einige neue Werte für Eigenschaften eingeführt, die benötigt werden, umCSS2 richtig umzusetzen (vgl. Bos 2005b).

Im Folgenden werden stellvertretend einige Unterschiede kurz zusammengefasst.

6.7.1. Spezifität


52

In CSS2 wurden Pseudo-Elemente bei der Berechnung der Spezifität eines Selektors außerAcht gelassen. In CSS2.1 fließt deren Anzahl nun in die Ziffer d des Zahlensystems (a-b-c-d)mit ein (siehe 6.1.3 Die Kaskade). Die höchste Spezifität haben nun style-Attribute imHTML-Quellcode.

6.7.2. Vererbung

In CSS2 wurden in der Regel nur berechnete Werte vererbt. Wenn im Style Sheet relativeWerte für Eigenschaften angegeben wurden (spezifizierter Wert), so wurden diese zunächstin einen absoluten Wert umgerechnet (berechneter Wert), der dann vererbt werden konnte. InCSS2.1 hingegen, erbt eine Eigenschaft mit dem Wert inherit den Wert des Elternelements,der eine Prozentangabe sein kann. Das hat zur Folge, dass bevor ein Eigenschaftswertangewendet wird, noch eine weitere Stufe (verwendeter Wert) in die Berechnung der Eigen-schaftswerte eingefügt werden muss. Diese Stufe rechnet dann die Prozentangaben in abso-lute Werte um (siehe 6.1.4 Berechnung von Eigenschaftswerten).

6.7.3. clip-Eigenschaft

Die Werte der Eigenschaft clip wurden in CSS2 bezüglich der jeweiligen Kante, an derabgeschnitten werden sollte, angegeben. Der neue Bezugspunkt ist nun die linke obere Ecke,da die clip-Eigenschaft von den meisten Benutzerprogrammen genauso gehandhabt wird.

6.7.4. Schrift- und Textformatierung

Es wurden drei Eigenschaften entfernt: font-stretch für die Veränderung Schriftlaufweite,font-size-adjust zur Veränderung des Aspektwertes einer Schrift sowie die Eigenschafttext-shadow, mit der sich Schatten von Text erzeugen lassen sollen, die bisher aber vonkeinem Benutzerprogramm unterstützt wurde.

Außerdem wurde die @-Regel @font-face entfernt, mit der sich Schriftbeschreibungen inCSS2 einfügen ließen, die dann zum Formatieren von Text benutzt werden konnten. Insge-samt wurde der Abschnitt zur Schriftformatierung vereinfacht und in seinem Umfangbeschränkt.


53

7. CSS3

7.1. Modularisierung

Das W3C geht bei der Entwicklung des künftigen Standard CSS3 einen ähnlichen Weg wiein XHTML. Die CSS3 Spezifikation wird kein zusammenhängendes Dokument sein, sondernist in einzelne Module aufgeteilt. Dadurch ergibt sich eine Reihe von Vorteilen für die En-twickler von CSS3-Modulen sowie für die Hersteller von z. B. Benutzerprogrammen.

Einzelne Module lassen sich einfacher und effizienter bearbeiten und erweitern. Im Gegen-satz dazu, mussten in früheren CSS-Versionen eine oder mehrere Änderungen in einemgesamten Dokument durchgeführt werden. Die Modularisierung gestattet eine flexiblere undzeitlich betrachtet schnellere Evolution des Standards.

Für Hersteller von Benutzerprogrammen und internetfähigen Endgeräten bietet sich dieMöglichkeit CSS3 differenziert zu unterstützen. Nicht jedes Gerät muss alle Moduleunterstützen, visuelle Anzeigegeräte sowie User-Agents können z. B. auf das Speech-Modulverzichten, welches Eigenschaften zur Aussprache, Lautstärke etc. bereithält. Jedoch solltenUser-Agents und Geräte, die angeben bestimmte Module zu unterstützen, diese dann auchvollständig verarbeiten können.

Gleichwohl wird es eine Basismenge von Modulen geben, die von allen User-Agentsunterstützt werden muss. Diese Menge wird als CSS Core (CSS-Kern) bezeichnet und um-fasst die Module Syntax (Syntax), Selectors (Selektoren), Values (Eigenschaftswerte) undCascading and Inheritance (Kaskadierung und Vererbung). Diese Module definieren diegrundlegenden Regeln von CSS3. Sie beschreiben den Aufbau von Style Sheets, Selektorenund Eigenschaften oder legen fest, wie Werte definiert sind und beispielsweise vererbt wer-den.

Ein einzelnes Modul beschreibt immer die zur Verfügung gestellten Eigenschaften mit denzugelassenen Werten und ihren Auswirkungen bezüglich der Darstellung von Elementen. Diefolgende Tabelle listet alle Module mit einer kurzen Beschreibung des Inhalts auf:

Table 5. CSS3 Module

Modul Beschreibung

Introduction gibt ein Überblick und eine kurze Beschrei-bung aller Module

Syntax beschreibt die zugrunde liegende Grammatikvon CSS3

Selectors zählt neben den aus CSS2.1 bekannten aucheine Reihe neuer Selektoren


54

Modul Beschreibung

Values beschreibt alle zur Verfügung gestelltenWerte und Einheiten

Cascading and Inheritance beschreibt das Auswahlverfahren der gültigenRegel, wenn sich mehrere Regeln auf ein Ele-ment beziehen sowie die Vererbung vonEigenschaftswerten

The Box Model beschreibt die möglichen Box-Arten und ihreEigenschaften sowie deren Verhalten im nor-malen Fluss

Positioning erläutert die Eigenschaften zum positionierenvon Boxen, die dadurch aus ihrem normalenFluss gelöst werden

Color beschreibt Eigenschaften für Vordergrundfar-ben, Transparenz von Elementen, die Ver-wendung von Farbprofilen aber auch Farbw-erte, Einheiten und Farbnamen

Backgrounds and Borders beschreibt Eigenschaften für Hintergrundfar-ben und -bilder sowie Rahmeneigenschaften,die es erlauben Bilder in Rahmen einzubettenoder Rahmen mit abgerundeten Ecken zu ver-wenden

Line zeigt die Eigenschaften für Zeilen-Boxen undderen Ausrichtung sowie Eigenschaften zurFormatierung der Pseudo-Elemente first-line,first-letter

Text beschreibt die Eigenschaften zur For-matierung von Texten

Ruby Eigenschaften zur Formatierung der Ruby-Elemente des Ruby-Moduls aus XHTML

Fonts beschreibt die Eigenschaften zur Schriftfor-matierung

WebFonts stellt Eigenschaften zur Beschreibung vonSchriftarten zur Verfügung, die Benutzerpro-gramme verwenden können, um äquivalenteSchriften auszuwählen oder zu downloaden,falls sie Schriften nicht verfügbar haben, dievon Style Sheet Autoren vorgesehen waren

Generated and Replaced Content beschreibt Eigenschaften zum Einfügen vonautomatisch generierten Inhalten, Zählernoder Nummerierungen


55

Modul Beschreibung

Lists Eigenschaften zur Listenformatierung, wieAufzählunszeichen etc.

Paged Media stellt Eigenschaften bereit, mit denen sichFormatierungen für seitenorientierte Darstel-lung von Dokumenten (z. B. für Druckversio-nen von Webseiten) vornehmen lassen

Basic User Interface beschreibt Eigenschaften, mit denen sich z. B.die Darstellung des Mauszeigers verändernlässt, wenn dieser über bestimmte Elementeeines Dokuments "fährt" oder legt fest wieFormularelemente, Textfelder oder Buttons,formatiert werden können

Tables beschreibt die Eigenschaften zur visuellenDarstellung von Tabellen, deren Zeilen, Spal-ten usw.

Multi-column Layout mit diesem Modul werden Eigenschaftenbereitgestellt, mit denen sich auf einfacheWeise mehrspaltige Seitenlayouts entwerfenlassen sollen

Math bietet besondere Eigenschaften zur For-matierung von mathematischen Formeln ausMathML

Speech beschreibt Eigenschaften zur Aussprache,Stimme und Lautstärke etc. für auditiveWiedergabegeräte und Sprachsynthesizer

Audio dieses Modul beschreibt Eigenschaften, mitdenen sich Sound-Dateien in strukturierendeDokumente, z. B. als Hintergrundmusik ein-binden lassen

Media Queries mit diesem Modul lassen sich@media-Regeln festlegen, die die Verwen-dung von Stilanweisungen an bestimmteEigenschaften des Ausgabemediums koppeln,wie z. B. die Auflösung, Farbtiefe etc.

CSS-OM beschreibt das CSS Objekt Model, welchesden Zugriff auf das Layout und die Strukturvon Dokumenten erlaubt

Hypertext Presentation beschreibt Eigenschaften zur Darstellung vonLinks

Presentation Levels stellt Eigenschaften bereit, mit denen sich


56

Modul Beschreibung

Bildschirmpräsentationen (slide show presen-tations) gestalten lassen

'Reader' Media Type stellt den neuen Medientyp reader zur Ver-wendung in den Media-queries bereit,welcher Screen-Reader, Braillezeilen oderSprachgeneratoren anspricht

Advanced Layout weitere Eigenschaften zur Positionierung undAusrichtung von Boxen, den Abständen zwis-chen ihnen etc.

In den nachfolgenden Abschnitten werden nur einige wichtige Module vorgestellt und vorallem neue Funktionen im Vergleich zu CSS2.1 erläutert. Der Abschnitt kann jedoch CSS3nicht vollständig darstellen, da noch nicht alle Module veröffentlicht wurden. Die Module,die bereits veröffentlicht wurden, unterscheiden sich zudem in ihrem Status, teilweise sind esnur erste Working Drafts oder wie beispielsweise das Selektor-Modul Candidate Recommen-dations. Es ist also auch noch offen, ob wirklich alle neuen Eigenschaften in der Form inCSS3 vorhanden sein werden.

7.2. Das Selektor-Modul

Um Stilanweisungen mit den Elementen des Dokuments zu verbinden sieht CSS das Konzeptder Selektoren vor. Das Modul Selektoren beschreibt die für CSS3 vorgesehen Selektoren(vgl. Glazman 2001). Neben den neuartigen Selektoren werden auch die aus CSS2.1 bekan-nten Selektoren beschrieben und erweitert.

7.2.1. Namensraum

Für Typselektoren, den Universalselektor und die Attribut-Selektoren steht ab CSS3 eine Na-mensraum-Komponente zur Verfügung. Diese Komponente erlaubt es, Elemente anzus-prechen, für die ein Namensraum im Dokument angegeben wurde. Die Komponente wirdunter Verwendung eines Schefferstrichs ("|") vom eigentlichen Selektor getrennt. Die fol-gende Tabelle zeigt die verschieden Notationen von Typselektoren mit der zusätzlichenAngabe des Namensraums und deren Bedeutung:

Table 6. Selektoren und Namensräume

Selektor Beschreibung

ns | E bezieht sich auf Elemente <E> des Namen-sraumes, dessen Namensraum-Präfix ns ist

* | E bezieht sich auf Elemente <E> aus jedem Na-mensraum


57

Selektor Beschreibung

| E bezieht sich auf Elemente <E>, für die keinNamensraum angeben wurde

E = * | E, falls kein Standard-Namensraumangeben wurde; = ns | E, falls ns der Stan-dard-Namensraum ist

Für den Universalselektor und die Attribut-Selektoren gilt die gleiche Notation und Bedeu-tung mit dem Unterschied, dass diese sich dann natürlich auf andere Elemente beziehen. DerSelektor * | * bezieht sich beispielsweise auf alle Elemente aus jedem Namensraum. DerAttribut-Selektor [ns|att=val] hingegen bezieht sich auf alle Elemente des Namensraumns deren Attribut att den Wert val besitzt.

7.2.2. Neue Attribut-Selektoren

Neben den vier bekannten Attribut-Selektoren aus CSS2 (siehe 6.1.2 Selektoren), werden mitCSS3 drei neue Attribut-Selektoren eingeführt. Mit ihnen lassen sich Elemente identifizieren,dessen Attribut-Werte mit der im Selektor angegebenen Zeichenkette übereinstimmen.[att^=substring]: dieser Selektor stimmt mit allen Elementen überein, dessen Wert desAttributs att exakt mit der Zeichenkette substring beginnt.[att$=substring]: der Selektor stimmt mit allen Elementen überein, dessen Wert des At-tributs att genau mit der Zeichenkette substring endet.[att*=substring]: alle Elemente, dessen att-Attribut mindestens einmal die Zeichenkettesubstring beinhaltet, werden angesprochen.

7.2.3. Neue Pseudo-Klassen

Den größten Zuwachs an neuen Selektoren bekommt die Gruppe der Pseudo-Klassen. Insge-samt stehen 17 neue Selektoren bereit, welche in Gruppen zusammengefasst sind.

In CSS3 besteht die Möglichkeit mit der Pseudo-Klasse Negation einfache Selektoren zuverneinen und somit genau diejenigen Elemente anzusprechen, auf die sich der einfache Se-lektor nicht bezieht.:not(s): bezieht sich auf alle Elemente, die nicht vom einfachen Selektor s angesprochenwerden. Dabei kann für s jeder einfache Selektor eingesetzt werden, mit der Ausnahme vonPseudo-Elementen und der Negations-Pseudo-Klasse selbst.

Eine neue Pseudo-Klasse Constent identifiziert alle Elemente, die die vom Selektorangegebene Zeichenkette enthält.:contains("string"): bezieht sich auf alle Elemente, deren Inhalt die Zeichenkette string

enthält. Dabei werden auch Elemente angesprochen, in denen das Wort string durch weitereElemente "unterbrochen" wird: <p>st<em>ring</em></p>.

Die Pseudo-Klasse Target betrifft Elemente, die das angegebene Ziel eines Links sind. Das


58

bedeutet, diese Elemente müssen ein Fragmentbezeichner in Form eines id-Attributsaufweisen und von einem anderem Element mittels des href-Attributs referenziert werden.Folgendes Beispiel zeigt die Notation des Selektors und den relevanten (X)HTML-Code:

*:target {background-color: red;} /* CSS-Regel */

...<p id="foo">Dieser Absatz ist Ziel eines Links</p>...<a href="#foo">Zum Ziel</a>

Die Hintergrundfarbe von <p> ist rot, da ein <a>-Element darauf verweist. Der Selektorwürde auch andere Elemente (nicht nur <p>-Elemente) ansprechen, wenn diese einen Frag-mentbezeichner aufweisen und von einem anderen Element referenziert würden, da :target

mit dem Universalselektor ("*") verknüpft ist.

Vier neue Selektoren stehen bereit, um Elemente des User Interface (Benutzerschnittstelle)anzusprechen. Buttons können z. B. mit der Pseudo-Klasse :enabled oder :disabled ver-schieden formatiert werden, je nachdem ob der Button bereits geklickt wurde oder nochnicht. Elemente des Typs radio (Radio-Button) oder checkbox können, wenn sie aktiviertsind, mit den Pseudo-Klassen :checked angesprochen werden. Elemente, dessen Zustandnicht eindeutig bestimmbar ist, werden mit der Pseudo-Klasse :inderterminate ange-sprochen.

Die größte Gruppe der neuen Selektoren bildet die Ansammlung der strukturellen Pseudo-Klassen.E:nth-child(n): das n-te Kindelement <E>, eines Elternelements an.E:nth-of-type(n): spricht das n-te Nachfahren-Element des Typs <E> an.E:nth-last-child(n): spricht das n-te Kindelement <E>, eines Elternelements an, jedochbeginnt die Zählung beim letzten Kindelement.E:nth-last-of-type(n): spricht das n-te Element des Typs <E> an, beginnend beim letztenauftretenden Element des Typs.

Wird für n eine Integer-Zahl eingesetzt, z. B. "1", "2" oder "3", so wird genau das erste,zweite oder dritte Element angesprochen. Es können jedoch auch Angaben in der Form an+b

gemacht werden. Die Notation 2n+1 würde alle ungeraden Elemente ansprechen, 2n (b=0)hingegen alle geraden Elemente. Äquivalent dazu sind die Angaben der Schlüsselwörter even(gerade) und odd (ungerade). Werden die Pseudo-Klassen tatsächlich mit dem Buchstaben "n

ul:nth-child(3n+1) {background-color: red;}ul:nth-child(3n+2) {background-color: green;}ul.nth-child(3n+3) {background-color: blue;}

Das Beispiel würde alle Kindelemente von unsortierten Listen in logische Dreier-Gruppengliedern. Jedem ersten Element dieser Gruppen würde die Hintergrundfarbe rot, jedemzweiten grün und jedem dritten blau zugeordnet werden.


59

E:first-child: spricht das erste Kindelement <E> eines Elternelements an.E:last-child: spricht das letzte Kindelement <E> eines Elternelements an.E:only-child: spricht das einzige Kindelement <E> eines Elternelements an.E:first-of-type: spricht das erste Element <E> an.E:last-of-type: spricht das letzte Element <E> an.E:only-of-type: spricht das Element <E> an, dass keine Geschwister-Elemente mit demgleichen Elementnamen hat.E:empty: spricht leere Elemente an, in diesem Fall <E></E>.:root: spricht das Wurzelelement des Dokumentes an.

7.2.4. Neue Pseudo-Elemente

In CSS3 werden Pseudo-Elemente durch einen doppelten Doppelpunkt ("::") eingeleitet, umsie von den Pseudo-Klassen abzugrenzen. Neben den aus CSS2.1 bekannten Pseudo-Ele-menten ::fist-line, ::first-letter, ::before und ::after gibt es ein neues Pseudo-Element.E::selection: betrifft den Teil eines Elements <E> der durch den Benutzer markiert wurde.

Wird z. B. in einem editierbaren Textfeld ein bestimmtes Wort markiert, so kann mit dem::selection-Pseudo-Element die Art der Hervorhebung bestimmt werden. Dafür stehen dieEigenschaften color, cursor, background und outline zur Verfügung.

7.2.5. ~ Kombinierer

Mit dem Kombinierer (Tilde-Zeichen "~") lassen sich indirekt benachbarte Elementeansprechen. Das nachfolgende Beispiel zeigt die Notation und den betreffenden(X)HTML-Code:

h1 ~ pre {color: red;} /* CSS-Regel */

...<h1>Überschrift</h1><p>Ich bin einleitender Textabsatz</p><p>Ich habe auch etwas zu sagen</p><pre>Ich bin der vorformatierte indirekte Nachbar von "h1"</pre>...

7.2.6. Spezifität von Selektoren

Die Spezifität eines Selektors wird in einem Zahlensystem aus drei Ziffern angegeben(a-b-c). Die Werte berechnen sich wie folgt:a: Anzahl der ID-Attribute im Selektorb: Anzahl anderer Attribute und Pseudo-Klassen im Selektorc: Anzahl der Element-Namen im Selektor

Nicht berücksichtigt werden Pseudo-Elemente. Die Spezifität negativer Selektoren (:not(s))


60

entspricht der des äquivalenten nicht-negativen Selektors (s). Die Pseudo-Klasse :not()

wird demzufolge bei der Berechnung der Spezifität nicht berücksichtigt.

7.3. Kaskadierung und Vererbung

In diesem CSS3-Modul geht es um die Auswahl der gültigen Style Sheet Regeln, fallsmehrere Regeln das gleiche Element betreffen. Dabei spielt wieder das Gewicht einer Regeleine entscheidende Rolle. Es hängt davon ab, in welchen Style Sheet die Regel notiert ist undob sie besonders wichtig gekennzeichnet wurde. Wie solche Eigenschaften gekennzeichnetwerden, ist aber noch offen. In CSS2.1 geschah dies mit !importend. In der Reihenfolge derGewichtung hat sich jedoch im Vergleich zu CSS2.1 nichts geändert:

1. Style Sheets des Benutzerprogramms

2. Style Sheets des Nutzers

3. Style Sheets des Autors

4. Als wichtig gekennzeichnete Style Sheets des Autors

5. Als wichtig gekennzeichnete Style Sheets des Nutzers

Die Kaskade sortiert die einzelnen Deklarationen, die sich auf ein Element beziehen und er-mittelt schließlich diejenige Deklaration, die sich durchsetzt (winning declaration).

1. Die Deklarationen werden nach ihrem Gewicht sortiert

2. Deklarationen mit dem gleichen Gewicht werden anhand ihrer Spezifität sortiert (siehe7.2.6 Spezifität von Selektoren)

3. Deklarationen mit der gleichen Spezifität werden anhand ihrer Position im Style Sheetsortiert, die zuletzt notierte Deklaration "gewinnt"

Die Vererbung beschreibt das Verfahren, wie Eigenschaften bzw. deren Werte der Elternele-mente an ihre Kindelemente vererbt werden. Viele Eigenschaften werden von sich ausvererbt, falls keine eigenen Angaben für die Kindelemente gemacht wurden. Das -<em>Element im folgenden Beispiel erbt die Farbe des Elternelementes (<h1>), da für <em>nicht explizit eine Farbe angegeben wurde.

h1 {color: red;} /* CSS-Regel */

...<h1>Überschrift mit <em>betontem</em> Wort</h1>...

Mit dem Wert inherit lässt sich auch explizit angeben, dass ein Eigenschaftswert des Elter-nelements geerbt werden soll. Das gilt auch für Eigenschaftswerte die ihrer Definition nach


61

nicht vererbt werden:

/* CSS-Regeln */h1 {background-color: red;}em {background-color: inherit;}

...<h1>Überschrift mit <em>betontem</em> Wort</h1>...

Der Eigenschaftswert, der letzten Endes auf ein Element angewendet wird, ist das Ergebnisder Kaskadierung und Vererbung. Er wird als cascaded value (kaskadierter Wert) bezeichnet.Der kaskadierte Wert ist das Ergebnis des Kaskadierungs- und Vererbungsprozesses:

1. liefert die Kaskade ein Wert, welcher nicht "inherit" oder "initial" ist, so ist dieserWert der kaskadierte Wert

2. handelt es sich um den Wert "inherit", so wird der vom Elternelement geerbte Wertzum kaskadierten Wert

3. handelt es sich um den Wert "initial", so wird der Ausgangswert einer Eigenschaft(dieser ist in der Spezifikation für jede Eigenschaft festgelegt) zum kaskadierten Wert

4. wurde die gesamte Eigenschaft geerbt (wie im ersten Beispiel h1 {color: red;}),dann wird der Wert dieser Eigenschaft zum kaskadierten Wert

5. konnte bis hierhin kein Wert für die Eigenschaft ermittelt werden, wird der Aus-gangswert der Eigenschaft zum kaskadierten Wert

Gegebenenfalls muss der kaskadierte Wert noch umgerechnet werden, seien es relative Werte(wie Prozentangaben), die in absolute Werte aufgelöst werden oder Werte, die vor ihrer An-wendung noch gerundet werden müssen.

Mit diesem Verfahren kann ein Benutzerprogramm einem Element immer die gültige Eigen-schaft mit dem zugehörigen Wert zuordnen, auch wenn sich mehrere Regeln, sei es aus einund demselben oder aus verschieden Style Sheets, auf das gleiche Element beziehen (vgl.Håkon Wium 2002).

7.4. Das Box-Model

Das Modul Box-Model befindet sich in dem Status Working Draft. Es ist im Vergleich zuCSS2.1 sehr viel umfangreicher, jedoch sind zu einigen neuen Eigenschaften auch Angabengemacht, die die Ausgliederung dieser Eigenschaften in andere Module vorschlagen. Obwirklich alle neuen Eigenschaften in der Form umgesetzt werden, wird die Recommendationzeigen. Am Aufbau einer Box (content-, padding-, border- und margin-Bereich) hat sichallerdings nichts geändert.


62

Die padding- und margin-Eigenschaften sind nach wie vor in diesem Module enthalten. Dieborder-color- und border-style-Eigenschaften wurden bereits in das Modul Backgroundsand Borders ausgelagert. Die border-width-Eigenschaften hingegen finden sich in beidenModulen wieder. Jedoch ist im Modul Box-Model die Anmerkung gemacht worden, die bor-

der-width-Eigenschaften ebenfalls aus dem Modul auszulagern.

7.4.1. Neue Eigenschaften des Box-Models

Zwei neue Eigenschaften fit und fit-position erlauben ersetzte Elemente zu skalierenund entsprechend auszurichten. Ersetzte Elemente können zum Beispiel Bilder sein, die mitCSS in eine Box im Dokument eingefügt werden. Die Eigenschaft fit kann dann angewen-det werden, wenn z. B. für einzufügende Bilder keine Größenangaben gemacht wurden undderen width- und height-Eigenschaften nicht den Wert auto haben. Es ist in diesem Fallmöglich, das Bild so zu skalieren, dass es vollständig in einer Box Platz hat oder die Boxkomplett ausfüllt (gegebenenfalls mit Verlust des Seitenverhältnisses).

Neu im Box-Model sind die marquee-Eigenschaften. Mit den Eigenschaften können Lauf-schriften erzeugt werden, die sich durch den Inhaltsbereich einer Box bewegen. Umfangre-iche Einstellungen für Geschwindigkeit, Richtung oder verschiedene Stile der Laufschriftkönnen vorgenommen werden. Die Eigenschaften lassen sich auf alle Block-Level-Elementeund ersetzte Elemente anwenden.

7.4.2. Umverlagerte Eigenschaften

Die Eigenschaften width und height sind nun direkt in diesem Modul definiert. In CSS2.1befanden sich diese Eigenschaften noch im Kapitel des Visuellen Formatierungsmodels.Diese beiden Eigenschaften geben die Breite und Höhe des Inhaltsbereichs an. Zudem wer-den zwei neue Eigenschaften in diesem Zusammenhang etabliert: box-width und box-

height. Mit ihnen lässt sich die Größe einer Box von border-Kante zu border-Kantedefinieren. Demzufolge entspricht box-width der Summe aus width, padding-left,padding-right, border-left-width und border-right-width. Die Höhe box-heigth

ergibt sich analog zu box-width unter Verwendung der jeweiligen top- und -bottomAngaben.

Die Eigenschaften float und clear sind jetzt im Box-Model-Modul definiert. Das Prinzipdieser Eigenschaften hat sich nicht verändert. Es wurden allerdings einige neue Werte fürdiese Eigenschaften definiert. Mit der neuen Eigenschaft float-displace, lassen sich dieAbstände zwischen Floats und anderen Boxen oder dem Textinhalt einer Box steuern. DasModul Positioning, welches den Nachfolger des CSS2.1-Kapitels visuelles For-matierungsmodel bildet und welches die grundlegende Anordnung der Boxen beschreibt,wurde noch nicht veröffentlicht.

Auch die Eigenschaft overflow, aus dem CSS2.1 Kapitel visuelle Effekte (siehe 6.3.4 Vi-suelle Effekte), findet nun im Modul Box-Model seinen Platz. Es wird darüber nachgedachtzwei neue Eigenschaften overflow-x und overflow-y einzuführen. Dabei werden die gle-


63

ichen Werte wie bei overflow benutzt (hidden, scroll, etc.), overflow-x betrifft dabeialles, was horizontal über die Boxgrenzen hinaus ragt und overflow-y betrifft die vertikaleRichtung. Ein anderer Gedanke sieht vor die zugelassen Werte für overflow in der Weise zuerweitern, dass Wertepaare angeben werden. Zum Beispiel overflow: auto-scroll

entspräche overflow-x: auto und overflow-y: scroll. Die Eigenschaft overflow-clipentspricht der "normalen" Eigenschaft clip (siehe 6.3.4 Visuelle Effekte) mit der Vorausset-zung, dass overflow auf hidden gesetzt sein muss. Damit lässt sich also steuern, wievielvom Inhaltsbereich an den Rändern der Box abgeschnitten werden soll. Auch bei dieserEigenschaft ist noch nicht sicher, ob sie tatsächlich Einzug in das endgültige Modul haltenwird.

Die letzte Eigenschaft für visuelle Effekte wurde unverändert aus CSS2.1 übernommen. Eshandelt sich um die Eigenschaft visibility, mit der man den Inhalt von Boxen ein- undausblenden kann. Es wird jedoch auch darauf hingewiesen, dass es im Color-Modul vonCSS3 eine Eigenschaft opacity gibt, mit der man die Transparenz von Elementen bzw.deren Inhalten steuern kann.

Wie bereits anfangs erwähnt, ist das aktuelle Modul zum Box-Model nur ein erster Arbeitsen-twurf. Es wurde kein Termin festgelegt, wann das Modul den Status Recommendation erre-ichen wird und die Arbeiten daran abgeschlossen sein werden. Ob dann wirklich alle neuenEigenschaften enthalten sein werden, welche Eigenschaften in andere Module ausgelagertwerden oder noch aus anderen Modulen importiert werden, wird sich dann erst zeigen. Dasaktuelle Modul befindet sich unter: http://www.w3.org/TR/css3-box/.

7.5. Das Farbmodul

Das CSS3 Farbmodul (Color Module) definiert neben der aus CSS2.1 bekannten Eigenschaftcolor, mit der sich die Vordergrundfarbe bestimmen lässt, drei neue Eigenschaften, eineneue @-Regel und die zugelassenen Farbwerte.

Nach wie vor werden Farbwerte der color-Eigenschaft durch Schlüsselwörter, d. h. Farbna-men oder durch numerische Werte angegeben. Die numerischen Werte sind entweder RGB-Farbwerte - eine Ganzzahl (integer) zwischen null und 255 bzw. ein Prozentwert für jedeKomponente (Rot, Grün, Blau) oder ein sechsstelliger Hexadezimalwert. Eine neueMöglichkeit eine Farbe festzulegen, besteht durch die Angabe eines RGBA-Wertes. Das "A"steht dabei für Alpha und gibt die Transparenz der Farbe an. Die Transparenz wird durch eineZahl zwischen eins und null angegeben, wobei kleine Werte eine sehr hohe Transparenz undWerte nahe eins eine sehr geringe Transparenz ausdrücken.

Darüber hinaus besteht in CSS3 eine weitere Möglichkeit den Farbwert für die color-Eigenschaft anzugeben:

color: attr(<attributname>, color)

Das bedeutet, es wird die Farbe verwendet, die vom Attribut ("attributname") des Ele-


64

mentes angegeben wird, auf das sich der Selektor bezieht. Ist ein solches Attribut im Elementnicht vorhanden oder enthält es keinen gültigen Farbwert, dann wird der Wert inherit be-nutzt. Allerdings gelten diejenigen Attribute, die Farbewerte als Parameter haben ab XHTML1.0 strict als veraltet. Warum es eine solche Angabe des Farbwertes gibt, geht aus der Modul-spezifikation nicht hervor.

7.5.1. Transparenz

Die neue Eigenschaft opacity steuert die Transparenz von Elementen, auf die sie angewen-det wird. Die Eigenschaft lässt Alphawerte zwischen null und eins zu. Wird z. B. eine ein-facher Textabsatz mit der Eigenschaft opacity transparent dargestellt, so ist das Ergebnis dasgleiche, als wenn man für die Textfarbe einen RGBA-Wert angibt, vorausgesetzt man gibtden gleichen Alphawert an.

7.5.2. Farbprofile

CSS3 erlaubt die Angabe eines Farbprofils. Die Eigenschaft color-profile mit dem Wertauto veranlasst die Verwendung des eingebetteten Farbprofils der eingebundenen Bilddatei.Das Standard-Farbprofil ist sRGB (standard Rot Grün Blau). Verwendet ein Bild jedoch einanderes Farbprofil, so wird dieses verwendet. Das eingebettete Farbprofil lässt sich aber auchdurch die Angabe eines Farbprofilnamens bzw. einer URI, die auf ein Farbprofil verweist,überschreiben.

Eine andere Form Farbprofile in das Style Sheet einzubinden, stellt die Angabe der @-Regel@color-profile dar. Hiermit werden die Farbprofil-Eigenschaften zusammengefasst undanhand von Farbprofil-Beschreibungen eingebunden.

7.5.3. Farbwerte

Auch bei den zugelassenen Farbwerten gibt es in CSS3 einige Änderungen. Neben dem bere-its vorgestellten RGB- bzw. RGBA-Farbschema erlaubt CSS3 jetzt Farben nach dem HSL-Farbschema (Hue Saturation Lightness) anzugeben. Analog zu RGBA gibt es das HSLA-Farbschema, wobei auch hier die letzte Komponente die Transparenz der Farbe angibt.

Des Weiteren stehen neue Farbnamen zur Verfügung. Diese wurden aus der SVG 1.0(Scalable Vector Graphics) Spezifikation entnommen. Eine vollständige Liste der insgesamt140 Farbnamen findet sich in der Color-Modul-Spezifikation (vgl. Pemberton, Pettit 2003).

7.6. Das Media-Queries-Modul

Die Verwendung eines bestimmten Style Sheets konnte seit HTML 4 an einen bestimmtenMedientyp gebunden werden. Dazu wurde bei der Einbindung des Style Sheets durch das<link>-Elemente das Attribut media auf den Medientyp gesetzt, an den sich das Style Sheetrichtet. Mit CSS2 wurde die @media-Regel eingeführt. Diese Regel gestattete es Stilan-wisungen zusammenzufassen, die sich an einen spezifischen Medientyp richten. In CSS2.1


65

wurde ein neuer Medientyp hinzugefügt (siehe 6.1.6 @-Regeln).

CSS3 geht mit dem Media-Queries-Modul nun einen Schritt weiter. Zusätzlich zum Medien-typ kann die Auswahl des Style Sheets an weitere Bedingungen, die sog. Media Features,geknüpft werden. Die Angabe der Media-Features erfolgt dabei entweder im media-Attributdes <link>-Elements oder in der @media-Regel. Das nachfolgende Beispiel zeigt beideVarianten:

<link rel="stylesheet" media="screen and (color)" href="colored.css">

/* CSS */@media screen and (color) { ... }

7.6.1. Media-Featureswidth, height: Die Abfrage dieser Werte richtet sich an die Größe des Viewports (siehe 6.3.1Box-Arten). Die Angabe der Werte erfolgt analog zur Notation der Werte in CSS-Eigenschaftsdeklarationen (z. B. width: 400px).device-width, device-height: Diese beiden Features richten sich an die Ausgabegröße desGerätes, auf dem die Dokumente angezeigt werden. Die Anzeige auf einem Monitor ist dannan die Bildschirmauflösung geknüpft.device-aspect-ratio: Das Seitenverhältnis des Ausgabegerätes ist das Kriterium für die Ver-wendung des Style Sheets bzw. der Stilanweisungen.color: Wird nur der Name color angegeben, muss das Ausgabemedium Farben darstellenkönnen. Wird zudem noch eine Ganzzahl angegeben, beispielsweise screen and (color:

2), so muss die Anzahl der verwendeten Bit pro Farbkomponente dieser Zahl entsprechen,damit die Stilanweisungen angewendet werden.color-index: Gibt an, wie viele Farben ein Ausgabegerät darstellen können muss, damit dasStyle Sheet verwendet wird.monochrome: Dieses Feature macht die Darstellung von der Anzahl der verwendeten Bit jePixel abhängig, es bezieht sich somit auf die Anzahl der darstellbaren Grautöne.resolution: Die Auflösung des Ausgabegerätes ist das Merkmal für die Anwendung des StyleSheets. Werte können entweder in dpi (dots per inch) oder in dpcm (dots per centimeter)angegeben werden.scan: Dieses Feature richtet sich an Fernsehgeräte. Zur Auswahl stehen die Werte progres-

sive und interlace. Der erste Wert bedeutet, dass Fernsehgeräte ein Vollbild je Sekundeanzeigen, interlace hingegen richtet sich an Geräte, die im Zeilensprungverfahren arbeiten.grid: Die Abfrage richtet sich an die Art des Displays, auf dem das Dokument dargestelltwird. Diese Displays verwenden im Gegensatz zu modernen Grafikdisplays ein Gitter bzw.Raster zur Darstellung des Inhalts. Sie sind unter dem Begriff Zeilendisplays bekannt undwurden in meist älteren Handys verbaut.

Bis auf die beiden letzten Features scan und grid können die Restlichen noch mit den Vor-silben min- oder max- verwendet werden:

@media print and (min-resolution: 300dpi) { ... }


66

oder:

<link rel="stylesheet" media="screen and (device-max-width: 1024px) ... >

Durch den Ausdruck von min- bzw. max-Werten lassen sich Mindestanforderung an ein Gerätoder dem entsprechend das Maximum eines Merkmals festlegen.

Das Modul wurde als Empfehlungskandidat unter http://www.w3.org/TR/css3-mediaqueries/veröffentlicht. Es ist somit schon sehr viel ausgereifter als z. B. das Box-Model-Modul.

7.6.2. Medientyp: reader

Es gibt Überlegungen einen neuen Medientyp einzuführen, der sich speziell an sog. Screen-Reader richtet. Screen-Reader sind Benutzerprogramme, die den Inhalt eines Dokumentsneben der grafischen Darstellung auch akustisch wiedergeben. Eine sehr kurze Einführungfindet sich im Modul 'Reader' Media Type (vgl. Bos 2004).

7.7. Modul für mehrspaltige Layouts

Bisher wurden mehrspaltige Layouts für Internetseiten meist mit den Tabellen-Elementen ausHTML umgesetzt. Aus Sicht der Trennung von Struktur und Präsentation ist das jedoch nichtsinnvoll. Tabellen sollen semantische Zusammenhänge zwischen Daten herstellen und nichtder Realisierung eines Layouts dienen.

Einen äquivalenten Ersatz bildete das Container-Element <div>. Wird der Inhalt eines(X)HTML-Dokuments mit <div>-Elementen strukturiert und mit CSS entsprechend angeord-net und formatiert, lassen sich mehrspaltige Layouts auch ohne die Verwendung vonTabellen bewerkstelligen. Allerdings hängt der Inhalt der einzelnen Spalten immer von derStrukturierung des (X)HTML-Dokuments ab, was sich als Nachteil herausstellt, wenn manbesonders flexible Layouts erstellen möchte.

CSS3 bietet nun ein Modul an, mit dem sich besonders einfach flexible, mehrspaltige Lay-outs erstellen lassen sollen. Dabei werden die Eigenschaften direkt auf ein einziges Elementangewendet, woraus folgt, dass der gesamte Inhalt des Elements auf die angegebene Spalte-nanzahl verteilt wird.

7.7.1. Aufbau des Spaltenlayouts

Es gibt vier Eigenschaften, mit denen sich das Grundgerüst eines Spaltenlayouts festlegenlässt. Die Anzahl der Spalten wird mit column-count angegeben. Einzelne Spalten könnenunter Verwendung der Eigenschaft column-rule voneinander getrennt werden. Erlaubt sindhierbei Werte, die die Farbe, den Stil und die Breite festlegen. Der Abstand der einzelnenSpalten zueinander wird mit der Eigenschaft column-gap definiert, dabei teilt die Eigenschaftcolumn-rule den Abstand zwischen zwei Spalten in gleichgroße Hälften. Möchte man dieSpaltenbreite explizit festlegen, so steht dazu die Eigenschaft column-width bereit. Die


67

nachfolgende Grafik zeigt ein einfaches Spaltenlayout mit den bisherigen Eigenschaften:

Figure 4. Einfaches zwei-spaltiges Layout

/* CSS-Teil */div {border: 25px solid #9C9;padding: 30px;}

div#cl {width: 1000px;column-count: 2;column-rule: 50px solid #069;column-gap: 60px;}

...<div id="cl">Hier steht der Inhalt</div>...

Es besteht jedoch auch die Möglichkeit, die Anzahl der Spalten oder die Spaltenbreite dy-namisch zu gestalten. Wird z. B. nur die Anzahl der Spalten festgelegt, resultiert die Spal-tenbreite aus der Größe des umschließenden Blocks und der angegebenen Spaltenanzahl.Legt man die Spaltenbreite fest und lässt die Anzahl der zu verwendenden Spalten offen,ergibt sich die Anzahl aus der Größe des umschließenden Blocks geteilt durch die Spal-tenbreite.

Werden alle vier Eigenschaften mit Werten belegt und überschreitet die daraus resultierendeBreite des Spaltenlayouts die Größe des umschließenden Blocks, so muss die Spaltenanzahl


68

verringert werden.

Mit der Eigenschaft column-width-policy kann festgelegt werden, ob die Spaltenbreitengenau eingehalten werden müssen (column-width-policy: strict) oder ob sie gegebenen-falls erweitert werden können (column-width-policy: flexible), falls der umschließendeBlock größer ist als das definierte Spaltenlayout.

Sollen die Spaltenbreiten genau eingehalten werden und ist der umschließende Block größerals das Spaltenlayout, so kann mit der Eigenschaft column-space-distribution festgelegtwerden, wie Freiraum auf die Spalten verteilt werden soll.

Alle Eigenschaften des Moduls sind nur auf Block-Level-Elemente anwendbar. Das Modulist als Working Draft unter http://www.w3.org/TR/css3-multicol/ zu finden.


69

8. Untersuchung

Im Folgenden werden die Web-Browser vorgestellt, an denen die Tests bezüglich derUnterstützung der XHTML- und CSS-Standards durchgeführt wurden. Es handelt sich dabeium die aktuelle Version des Internet Explorers, Firefox, Opera und Konqueror sowie dieBeta-Version des Internet Explorers und des Firefox. Der darauf folgende Abschnitt stellt dievon mir erstellten Tests bzw. Test-Seiten vor. Die Auswertung der Ergebnisse der einzelnenBrowser ist Bestandteil des letzten Abschnittes.

8.1. Die Test-Kandidaten

8.1.1. Internet Explorer 6

Seit 1995 entwickelt die Firma Microsoft den Internet Explorer und liefert ihn vorzüglich mitden eigenen Betriebssystemen aus. Seit 1998 ist er fester Bestandteil der Microsoft Betrieb-ssysteme (damals Windows 98). Dieser Punkt stand häufig in der Kritik. Da der Browser mitdem Betriebssystem mitgeliefert wurde, bestand für viele Nutzer nicht die Notwendigkeit an-dere, eventuell auch bessere, Browser zu installieren und zu verwenden. Die Marktanteile desBrowser bewegen sich zurzeit um die 85% (vgl. o. V. 2005c). Damit ist der Internet Explorerder weltweit am meisten verbreitete Browser.

Für meine Tests lag der Internet Explorer 6 in der Version 6.0.2900.2180, Service Pack 2 vor.Er wurde mit dem Betriebssystem Microsoft Windows XP Home Edition (deutsch), Version2002, Service Pack 2 getestet.

8.1.2. Internet Explorer 7 beta 1

Der Internet Explorer 7 ist der neuste Browser von Microsoft. Er wird Bestandteil des neuenMicrosoft Betriebssystems werden, jedoch soll es auch eine Version für die aktuellen Win-dows XP Betriebssysteme geben. Derzeit liegt der Browser nur in einer Beta-Version vor, dasist eine Vorabversion der Software, die die wesentlichen Funktionen des fertigen Produktesbeinhaltet, jedoch nicht zwangsläufig fehlerfrei funktioniert. Beta-Versionen werdenveröffentlicht, um Erfahrungen zu sammeln und eventuelle Fehler in der Softwareaufzuspüren. Von der fertigen Version werden vor allem Verbesserungen derBenutzeroberfläche, der Sicherheitseinstellungen und nicht zuletzt der Unterstützung derW3C-Standards erwartet. Der Internet Explorer 7 beta 1 (Version 7.0.5112.0) wurde mit demBetriebssystem Microsoft Windows XP Professional Edition (englisch), Version 2002, Ser-vice Pack 2 getestet.

8.1.3. Firefox 1.0

Der Browser Firefox wurde von der Mozilla Foundation entwickelt. Die Organisation wurde2003 gegründet und betreut seither die Mozilla open-source Projekte. Dabei handelt es sichum Software, deren Quellcode frei einsehbar ist, die in der Regel kostenlos erhältlich ist und


70

deren Vervielfältigung ausdrücklich erlaubt und sogar erwünscht ist. Neben dem Browser bi-etet Mozilla noch einen E-Mail-Client, eine Kalender-Software und mit der Mozilla-Suite einSoftwarepaket aus Web-Browser, E-Mail-Client und HTML-Editor an.

Die Ursprünge des Firefox gehen auf den von der Firma Netscape entwickelten Netscape-Navigator zurück, der neben dem Internet Explorer einer der ersten Web-Browser gewesenist. Die erste stabile Version des Firefox wurde 2002 veröffentlicht, der Marktanteil beträgtzwischen acht und zehn Prozent, wobei der Anteil in Europa etwas darüber liegt ca. 15%(vgl. o. V. 2005d). In Deutschland ist die Verbreitung und die Nutzung des Firefox jedochum einiges höher. WebSideStory, ein Anbieter von on-demand Web-Analysen, berichtete imMai 2005 von steigenden Marktanteilen des Firefox. Der Marktanteil des Browser beläuftsich in Deutschland auf knapp 23% (vgl. o. V. 2005e). In meiner Arbeit wurde der Firefox inder Version 1.0.6 auf dem Betriebssystem Microsoft Windows XP Home Edition (deutsch),Version 2002, Service Pack 2 getestet.

8.1.4. Firefox 1.5 beta 1

Zu der noch für Ende dieses Jahres geplanten Version 1.5 des Firefox wurde im September2005 die erste Beta-Version des Browsers veröffentlicht (vgl. Pakalski 2005). Neben einigenVerbesserungen bezüglich der Bedienung des Browsers wurde auch die Rendering Engineüberarbeitet. Die Rendering-Engine verarbeitet die reinen Text-Anweisungen des (X)HTML-und CSS-Codes und ermöglicht somit die grafische Darstellung der Dokumente im Web-Browser. Durch die überarbeitete Rendering-Engine sollen neue CSS-Eigenschaften sowiedas SVG Grafikformat unterstützt werden.

Der Firefox 1.5 beta 1 wurde zusammen mit dem Betriebssystem Windows XP Home Edition(deutsch), Version 2002, Service Pack 2 getestet.

8.1.5. Opera 8.0

Die norwegische Firma Opera Software ASA entwickelte und veröffentliche die erste Ver-sion der Opera Browsers 1997. Der Browser ist frei erhältlich, jedoch handelt es sich nichtum open-source Software. Der Browser ist bezüglich seiner Oberfläche vielfältig manipulier-bar, zeichnet sich durch schnelle Ladezeiten der Internetseiten aus und unterstützt, laut Her-stellerangaben, unter anderem CSS2.1 und XHTML 1.1. Die Marktanteile dieses Browsersind jedoch sehr gering, sie belaufen sich zwischen einem und sechs Prozent (vgl. o. V.2005f).

Der Opera Browser wurde in der Version 8.02, Build 7680 auf dem Betriebssystem WindowsXP Home Edition (deutsch), Version 2002, Service Pack 2 getestet.

8.1.6. Konqueror 3.4.0

Der Browser Konqueror ist Bestandteil des KDE (K Desktop Enviroment) für Unix-Betriebssysteme und z. B. für Linux. KDE wurde als Projekt erstmals 1996 ins Lebengerufen. 1997 wurde dann die Organisation KDE e. V. gegründet, die sich um alle rechtlichen


71

und finanziellen Belange des Projekts und den Entwicklern kümmert. KDE inklusive desWeb-Browser ist frei erhältlich und der Quellcode ist frei einsehbar (open-source). Dabei istder Konqueror mehr als nur ein Web-Browser. Ähnlich wie der Internet Explorer dient er alsDateimanager und Dateibetrachter sowie als FTP-Client (File Transfer Protocol). Die ersteVersion dieses Browsers wurde im Oktober 2002 zusammen mit KDE 2.0 veröffentlicht. Inmeiner Arbeit wurde der Konqueror in der Version 3.4.0 unter SUSE Linux Professional 9.3,live version getestet.

8.2. Die Browser-Tests

Es gibt zwei Haupteile, in die sich die Browser Tests untergliedern lassen: Der XHTML-Teilbefasst sich mit den Standards XHTML 1.0, XHTML 1.1 sowie einem sehr einfachenXHTML 2.0 Dokument. Der zweite Teil beschäftigt sich hauptsächlich mit CSS2.1, jedochwerden auch einige Features des neuen CSS3-Standards getestet.

Alle Test-Dokumente befinden sich auf einer, der Arbeit beiliegenden, CD-ROM. Als Ein-stieg in die Browser Tests dient die Seite index.html im Hauptverzeichnis tests der CD-ROM. Von dieser Seite können alle Test-Dokumente meiner Arbeit erreicht werden.

8.2.1. XHTML-Tests

8.2.1.1. XHTML 1.0

Der XHTML 1.0 Test untergliedert sich in drei Teile: Der erste Teil umfasst vier Dokumente,die alle die XHTML 1.0 strict-DTD verwenden. Diese vier Dokumente sind identisch aufge-baut, es werden alle Elemente aufgelistet, die durch die DTD bereitgestellt werden. Ebensoverwenden alle Dokumente die optionale, jedoch empfohlene, XML-Deklaration(XML-Prolog) mit der Angabe der Zeichenkodierung des Dokuments (siehe 3.4.1 XML-Deklaration). Sie unterscheiden sich jedoch durch den im <meta>-Element angegebenenMIME-Typ und die verwendete Dateiendung. Die vier Dokumente befinden sich imHauptverzeichnis tests der beiliegenden CD-ROM, die nachfolgende Tabelle zeigt die Zuord-nung der MIME-Typen und Dateiendungen.

Table 7. Dateinamen und MIME-Typ

Dateiname und -endung MIME-Type

index1.html "text/html"

index2.xhtml "application/xhtml+xml"

index3.xhtml "application/xml"

index4.xhtml "text/xml"

Neben der Überprüfung aller zur Verfügung stehenden Elemente wird mit den Dokumenten


72

untersucht, welche Auswirkung die Angabe des MIME-Typs und die Verwendung unter-schiedlicher Dateiendungen bezüglich der Darstellung im Browser hat.

Der zweite Teil der XHTML 1.0 Testreihe umfasst die gleichen vier Dokumente, mit identis-chem Inhalt, jedoch wurde die XML-Deklaration am Anfang der Dokumente entfernt. DieMIME-Typen, Dateinamen und -endungen wurden ebenfalls beibehalten. Die vier Doku-mente befinden sich im Unterordner noXmlProlog.

Der dritte Teil umfasst eine Reihe von Dokumenten, mit denen das Verhalten der Browsergetestet wird, wenn diese auf Dokumente treffen, die nicht wohlgeformt sind, veraltete Ele-mente benutzen oder anderen Regeln der Spezifikation widersprechen. Zu diesen Tests gibtes im Unterordner depr eine eigene Einstiegsseite: deprecated.html. Die nachfolgendeTabelle listet die einzelnen Dokumente anhand ihrer Dateinamen auf und gibt jeweils dieBeschreibung des Tests an.

Table 8. 'Deprecated' und 'Conformance' Test-Dokumente

Dateiname Beschreibung des Tests

depr1.xhtml zwei XHTML-Elemente sind falsch ineinan-der verschachtelt

depr2.xhtml beinhaltet ein Absatz ohne schließendes End-Tag

depr22.xhtml das leere <br>-Element wird verwendet,anstelle der richtigen Schreibweise: <br/>

depr3.xhtml die Kleinschreibung von Elementnamenwurde missachtet

depr4.xhtml es wird die in XHTML nicht mehr erlaubteAttributminimierung verwendet (checkedstatt checked="checked"

dep42.xhtml ein Wert eines Attributs ist nicht vonAnführungszeichen umschlossen

depr5.xhtml es wird das missbilligte Element <applet>

verwendet

depr52.xhtml es wird das missbilligte Element <basefont>verwendet

depr53.xhtml es wird das missbilligte Element <center>

verwendet

depr54.xhtml es werden die missbilligten Elemente <dir>

und <menu> verwendet

depr55.xhtml es werden die missbilligten Elemente <s>,


73

Dateiname Beschreibung des Tests

<u> und <strike> verwendet

conf1.xhtml in diesem Dokument werden zwei erfundeneElementnamen verwendet, die Browser soll-ten den Inhalt trotzdem darstellen

conf2.xhtml es werden zwei erfundene Attribute verwen-det, die vom Browser ignoriert werden sollten

conf3.xhtml das Attribut dir wird mit einem nicht-zulässigen Wert benutzt, die Browser solltenden Standardwert benutzen

conf4.xhtml es wird eine unbekannte Zeichenreferenz(&xyz;) benutzt, die Browser sollten die Ze-ichen so darstellen, wie sie im Quellcode desDokuments notiert sind (eben genau &xyz;)

frag.xhtml es werden die Attribute id und name mit demgleichen Wert als Fragmentbezeichner be-nutzt, des Weiteren verweist ein Link aufdiesen Wert, die Browser sollten das Elementmit dem id-Attribut als Ziel der Verknüpfungverwenden

8.2.1.2. XHTML 1.1

Die XHTML 1.1 Tests sind analog zu denen von XHTML 1.0 aufgebaut, jedoch mit der fürXHTML 1.1 vorgesehenen DTD. Zunächst gibt es zwei Dokumente mit XML-Deklaration(xhtml11.html und xhtml11.xhtml), die alle Module von XHTML 1.1 und die beinhaltetenElemente verwenden. Diese Dokumente unterscheiden sich wieder in dem verwendetenMIME-Typ sowie der Dateiendung. Ein drittes Dokument (xhtml11noXmlProlog.xhtml) istidentisch zu den beiden vorigen, jedoch ohne die Angabe einer XML-Deklaration. Die Doku-mente befinden sich im Unterordner xhtml11. Im Unterordner deprxhtml11 befinden sichdie Dokumente, mit denen wieder die Browser auf ihr Verhalten getestet werden, wenn sieauf nicht wohlgeformte Dokumente oder unbekannte Elementnamen etc. treffen. Auch dieseTests entsprechen denen von XHTML 1.0. Die Tabelle 'Deprecated' und 'Conformance' Test-Dokumente beschreibt demzufolge auch die Test-Dokumente für XHTML 1.1, mit der Aus-nahme, dass in der Datei frag.xhtml das id-Attribut entfernt wurde. Somit verweist der Linkam Ende des Dokuments auf das verbleibende name-Attribut. Dieses Attribut ist jedoch inXHTML 1.1 nicht mehr erlaubt. Browser, die sich konform zu der XHTML 1.1 Spezifikationverhalten, dürfen das Element, in dem das name-Attribut verwendet wird, nicht mehr als Zieldes Links anerkennen.

8.2.1.3. XHTML 2.0


74

Zu XHTML 2.0 gibt es nur ein einziges, sehr einfaches Test-Dokument. Die Dateixhtml2.xhtml befindet sich im Unterordner xhtml2. Der Test beschränkt sich auf die neuenElemente <section> und <h>, die Verwendung eines href-Attributs in einem Element dasnicht <a> ist sowie den für XHTML 2.0 gültigen Header des Dokuments. Außerdem ist dieAdresse eines Style Sheets angegeben, welches Formatierungsanweisungen für die beiden ne-une Elemente bereithält. Selbst wenn ein Browser diese Elemente noch nicht kennt, sollte erzumindest die Inhalte darstellen können und durch das verwendete Style Sheet sogar for-matieren.

8.2.2. CSS-Tests

8.2.2.1. CSS2.1

Im Unterordner css befindet sich mit index.html die Einstiegseite zu den einzelnen CSS2.1und CSS3 Test-Dokumenten. Als erstes sind 15 Dokumente verlinkt, die jeweils einenCSS2.1 Selektor verwenden, die Ausnahme bilden dabei die Dokumente, die z. B. die At-tribut-Selektoren oder die dynamischen Pseudo-Klassen testen. Hier wurden die verwandtenSelektoren in einem Dokument zusammengefasst. Alle Dokumente ähneln sich in ihrem Auf-bau: Die Überschrift nennt den Namen des getesteten Selektors und beinhaltet gleichzeitigdasselbe Muster wie im Theorieteil der CSS2.1 Selektoren (siehe 6.1.2 Selektoren). Danachfolgt meist ein Absatz, der beschreibt wie die Elemente, die von den Selektoren angesprochenwerden, formatiert werden sollten. Am Ende eines jeden Dokuments befindet sich ein Linkzum nächsten Selektor-Test. Die nachfolgende Tabelle zeigt welcher Selektor in welchemDokument verwendet wurde.

Table 9. Selektor-Test-Dokumente

Dateiname angewendeter Selektor

index1.html Universalselektor

index2.html Typselektor

index3.html Nachfahren-Selektor

index4.html Kind-Selektor

index5.html Benachbarte-Geschwister-Selektor

index6.html Attribut-Selektoren

index7.html Klassen-Selektor

index8.html ID-Selektor

index9.html Pseudo-Klasse :first-child

index10.html Link-Pseudo-Klassen

index11.html Dynamische Pseudo-Klassen

index12.html Sprach-Pseudo-Klasse


75

Dateiname angewendeter Selektor

index13.html Pseudo-Element :first-line

index14.html Pseudo-Element :first-letter

index15.html Pseudo-Elemente :before, :after

Die Stilanweisungen wurden der Einfachheit halber jeweils im Dokumentkopf, vom<style>-Element umschlossen, notiert.

Das Dokument complex.html ist ebenfalls ein Dokument, welches die CSS2.1 Selektorentestet. Hier wurden drei umfangreichere zusammengesetzte Selektoren sowie derentsprechender HTML-Code notiert.

Als nächste folgt mit dem Dokument boxmodel.html eine Testseite, die neben dem Box-Model-Test einen Abschnitt enthält, mit dem getestet wird, ob die Browser margin-Bereichebenachbarter Boxen korrekt darstellen.

Der Box-Model-Test umfasst drei <div>-Elemente, wobei die beiden letzten eine feste Größehaben und somit als Vergleich dienen, ob die Browser die Breite der ersten Box richtigberechnen und darstellen.

Figure 5. Screenshot des Box-Model Test-Dokuments

Der Collapsing-Margin-Test weist allen Elementen innerhalb der umschließenden Box diegleichen margin-Werte zu. Dabei sollten vertikal-benachbarte margin-Werte zusammen-fallen, horizontale hingegen nicht. In der letzten Zeile sind zwei <span>-Elemente notiert.Diese haben keine feste Breite und auch kein margin-top- und margin-bottom-Bereich,wohingegen die erste Zeile eine feste Breite und die eben genannten margin-Bereiche besitzt,da es sich um ein Überschrift-Element (<h3>) handelt.


76

Figure 6. Aufbau des Collapsing-Margin-Test

Mit dem Dokument position.html werden einfache Tests zur Positionierung von Boxendurchgeführt (Figure 7). Es sind zwei Boxen mit position: static, drei mit dem Wert rela-

tive, drei mit dem Wert absolute und weitere drei mit position: fixed notiert. Bis aufdie ersten beiden Boxen (static) wurden alle Boxen mit den Eigenschaften top, right,bottom oder left in dem Dokument verschoben. Als Werte für diese Eigenschaften wurdenentweder absolute oder prozentuale Werte sowie negative Werte gewählt, um das Verhaltender Browser zu testen. Um ungefähr abschätzen zu können, inwieweit die Browser die Boxenan der angegebenen Position darstellen, wurde ein Hintergrundbild mit einem festen Rastergewählt. Außerdem wurde bei der zweiten relativ positionierten Box der z-index derartverändert, dass diese im Vordergrund von allen anderen Boxen erscheint.

Figure 7. Ausschnitt aus dem Test zur einfachen Positionierung vonBoxen


77

Da die einfache Positionierung von Boxen eher unproblematisch ist, wurde ein erweiterterTest zur Anordnung von Boxen erstellt. Die Verschachtelung von Boxen mit unter-schiedlichen Werten der Eigenschaft position stellt einen kritischen Punkt in der Verar-beitung von CSS durch Web-Browser dar (Figure 8). Die Datei adv-position.html beinhalteteine statische Box, in der eine weitere Box relativ positioniert wurde. Für die innere Boxwurden die Werte für margin-left und margin-right auf auto gesetzt, dass sollte zurFolge haben, dass die Box horizontal zentriert in ihrer umgebenen Box dargestellt wird.

Figure 8. Ausschnitt aus dem erweiterten Test zur Positionierung vonBoxen


78

Eine weitere Box beinhaltet zwei relativ und eine statisch positionierte Box, bei dieser Kon-stellation sollten die Browser keine größeren Schwierigkeiten haben.

Kritisch ist es dagegen, wenn absolut positionierte Boxen in einer relativ positionierten Boxangeordnet werden sollen. Für diesen Fall wurden drei absolute Boxen in einer relativen inte-griert, dabei hat eine der drei inneren Boxen eine sehr große Höhe und ragt somit über dieGrenzen der umschließenden Box hinaus. Das kann bei einigen Browser zu Darstellungs-fehlern führen.

In einer letzten Box werden noch Block-Level-Elemente mit der Eigenschaft display: in-

line in einer Zeile dargestellt. Dazu wurden außerdem die Rahmen mit der Eigenschaft bor-

der gesetzt, was wiederum bei einigen Browsern Fehler hervorrufen kann.

Eine weitere Möglichkeit Boxen aus ihrem Fluss im Dokument zu lösen und zu replatzieren,besteht mit der Eigenschaft float. Die Anwendung von Floats bedingt im Internet Explorerimmer wieder Fehler. Deshalb gibt es zwei Dokumente, die sich dieser Problematik an-nehmen. Das erste Dokument float.html stellt einen einfachen Test der -floatFunktionalitäten dar (Figure 9). In einer statischen Box werden zwei Boxen "gefloatet",die erste wird an den linken Rand verschoben und der Text fließt rechts um die Box. Eineweitere Box befindet sich am rechten Rand und die Textabsätze fließen um die linke Box-Seite. Dabei sind diese Textabsätze rechtsbündig ausgerichtet.


79

Figure 9. Ausschnitt aus dem einfachen Test von Floats

Mit dem Dokument adv-float.html wurden umfangreichere Tests zu Floats durchgeführt. Imersten (Figure 10) Teil wird eine große Box rechts "gefloatet" (hellgrau), welche eine weitere"rechts-gefloatete" Box enthält (roter Rahmen) und auch in dieser Box befindet sich eine"rechts-gefloatete" Box (grau).

Figure 10. Teil 1 des erweiterten Test zu Floats

Die erste hellblaue Box enthält eine "links-gefloatete" Box (grau), deren Höhe die Größe derumschließenden (hellblauen) Box übersteigt. Der darauf folgende Textabsatz fließt rechts umdie kleine graue Box (Figure 11).


80


Es folgt noch eine Box, die nach demselben Prinzip aufgebaut wurde (zweite hellblaue Box),allerdings wurde hier die gesamte Box mit der Eigenschaft float: left versehen (Figure12). Das hat zur Folge, dass der nachfolgende Absatz nicht mehr um die kleine graue Boxfließt, sondern um die hellblaue Box. Die Eigenschaft float: left bedingt außerdem, dassdie hellblaue Box derart erweitert wird, dass sie die graue Box umschließt. Es wurdenzusätzlich zwei Links in die äußere Box eingefügt. Der zweite wird zudem noch durch diePseudo-Klasse :hover formatiert. In dieser Kombination ruft der Link den sog. GuillotineBug im Internet Explorer hervor (vgl. Sirisena 2005). Bei diesem Fehler wird beim"überfahren" des Links mit der Maus der Teil der Box abgeschnitten, der sich unterhalb desLinks befindet. Der erste Link hingegen sollte diesen Fehler nicht hervorrufen.


Das nächste Test-Dokument verwendet alle Eigenschaften zur Schriftformatierung. Da jederTextabsatz extra angesprochen werden muss, gibt es zu dem Dokument font.html ein eigenesexternes Style Sheet: font.css. Diese Eigenschaften sind als eher unkritisch einzustufen. DieDarstellung der Schrift ist jedoch immer abhängig von dem System, auf dem der Browserausgeführt wird. Außerdem lassen sich einige Eigenschaften schwer testen, z. B. die Eigen-


81

schaft font-weight und die für sie zugelassenen Werte. Das Problem bei dieser Eigenschaftist, dass die Schriften häufig nicht über so viele Abstufungen des Schriftgewichtes verfügen,wie sich mit den Werten 100 bis 900 (neun Abstufungen) einstellen lassen.

Mit dem Dokument text.html und dem zugehörigen Style Sheet text.css werden alle Eigen-schaften rund um die Formatierung von Texten getestet. Es handelt sich um die Eigen-schaften zur Textausrichtung, zum einstellen des Word- oder Buchstaben-Abstandes, derLeerraum-Behandlung usw.

Der letzte CSS2.1-Test stellt in dem Dokument color.html allen Farbnamen die RGB-Wert-Angaben und Hexadezimalwert-Angaben gegenüber. Es gibt auch hier wegen derÜbersichtlichkeit ein eigenes externes Style Sheet: color.css.

8.2.2.2. CSS3

Die CSS3-Testreihe umfasst drei Teile: Mit dem Dokument css3sel.html und dem externenStyle Sheet css3sel.css werden alle neuen, in CSS3 zur Verfügung stehenden Selektorengetestet. Eine Beschreibung, wie bzw. welche Elemente formatiert werden sollen, befindetsich in dem Dokument. Bei diesem Selektor-Test wurden alle Selektoren in einem Dokumentzusammengefasst.

In dem bereits erwähnten Dokument color.html befindet sich auch ein Abschnitt, der sichhauptsächlich mit den neuen Farbwert-Angaben in CSS3 beschäftigt. Es wird getestet, ob dieBrowser die neuen Wertangaben RGBA, HSL und HSLA verarbeiten können. Zusätzlichwird noch die Eigenschaft opacity, mit der sich die Transparenz von Elementen einstellenlässt, getestet.

Das letzte Dokument column.html testet das neue Modul zur Erstellung von einfachenmehrspaltigen Layouts. Dabei sollte die Box mit der festen Breite von 800 Pixeln in zweiSpalten geteilt sein. Zwischen den beiden Spalten müsste eine 50-Pixel-breite Trennungslinieangezeigt werden.

8.3. Auswertung der Browser-Tests

Die Auswertung der Tests ist in zwei Teile untergliedert: Als erstes folgen alle Tests zuXHTML, wobei diese wiederum anhand der verschiedenen Browser-Hersteller sortiert sind.Das bedeutet, dass die Testergebnisse des Internet Explorer 6 denen des Internet Explorer 7beta 1 gegenüber gestellt werden. Analog gilt dies für den Firefox 1.0 und den Firefox 1.5beta 1. Dabei listet zunächst eine Tabelle alle Test-Dokumente auf und nennt das Ergebnisfür den bzw. die jeweiligen Browser. Danach ist eine Beschreibung der eventuell aufgetrete-nen Probleme notiert.

Den zweiten Teil bildet die Auswertung der CSS-Tests, hier wurden alle getesteten Browserin einer Tabelle gegenüber gestellt. Eventuelle Probleme werden nach jeder Tabelle und fürjeden Browser aufgeführt.


82

8.3.1. XHTML

8.3.1.1. Internet Explorer

Table 10. Internet Explorer XHTML 1.0

XHTML 1.0 - Tests Internet Explorer 6 Internet Explorer 7 beta 1

XHTML 1.0 strict, mitXML-Prolog

index1.html, text/html eingeschränkt eingeschränkt

index2.xhtml, application/xhtml+xml

generischer XML-Code generischer XML-Code

index3.xhtml, application/xml generischer XML-Code generischer XML-Code

index4.xhtml, text/xml generischer XML-Code generischer XML-Code

XHTML 1.0 strict, ohneXML-Prolog

index1.html, text/html eingeschränkt eingeschränkt


eingeschränkt eingeschränkt

index3.xhtml, application/xml eingeschränkt eingeschränkt

index4.xhtml, text/xml eingeschränkt eingeschränkt

deprecated.html

depr1.xhtml Fehler erkannt, XML-Fehlermeldung

Fehler erkannt, XML-Fehlermeldung





depr3.xhtml generischer XML-Code generischer XML-Code





depr5.xhtml Fehler nicht erkannt, gener-ischer XML-Code

Fehler nicht erkannt, gener-ischer XML-Code



depr53.xhtml Fehler nicht erkannt, gener- Fehler nicht erkannt, gener-


83


ischer XML-Code ischer XML-Code





conf1.xhtml generischer XML-Code generischer XML-Code



conf4.xhtml Fehler erkannt, aber falschverarbeitet

Fehler erkannt, aber falsch ve-rarbeitet

frag.xhtml generischer XML-Code generischer XML-Code

Bei der Verarbeitung der index1.html (mit XML-Prolog) zeigen beide Internet Explorer diegleichen Fehler. Das Element <abbr> verstehen beide Browser nicht. Die Erklärung, wofürdie in dem Element notierte Abkürzung steht, wird nicht angezeigt. Bei der Darstellung desElements <q>, welches Inhalte in Anführungszeichen darstellt, werden eben dieseAnführungszeichen nicht angezeigt. Außerdem gibt es Probleme mit den Elementen<opject>, <map> und <area>. Die durch das <object>-Element eingebundene Grafikdateiwird nicht angezeigt. Ebenso werden die Image-Maps der beiden zuletzt genannten Elementenicht dargestellt.

Die gleichen Verarbeitungsschwierigkeiten bei den oben genannten Elementen treten in allenvier Dokumenten ohne XML-Deklaration auf. Die Dokumente index2.xhtml, index3.xhtmlund index4.xhtml werden zwar von beiden Browsern dargestellt, allerdings werden dieDokumente zunächst temporär gespeichert und dann angezeigt. Hinzu kommt noch, dass nunJavascript nicht mehr funktioniert. Das liegt aber daran, dass der Inhalt des -<script>Elements, so wie es die XHTML 1.0 Spezifikation vorschreibt, durch denn -CDATAAbschnitt eingehüllt wurde (<![CDATA[ ...hier steht das script ...]]>).

Zu den Dokumenten, die die Verarbeitung nicht wohlgeformter Ausdrücke sowie veralteterElemente etc. testen, ist anzumerken, dass immer dann, wenn der Browser den Fehler erkannthat, eine XML-Fehlermeldung ausgegeben wurde. Ansonsten wurde der generische XML-Code des Dokuments angezeigt. Daraus schließe ich, dass die Fehler entweder nicht bemerktoder aber ignoriert worden sind. Für das Dokument conf4.xhtml, welches eine nichtdefinierte Zeichenreferenz beinhaltet, wurde die Fehlermeldung, dass eine nicht definierteZeichenreferenz im Dokument vorhanden ist, angezeigt. Die Spezifikation schreibt jedochvor, dass diese Zeichenreferenzen so dargestellt werden sollen, wie sie im Quellcode notiertsind.

Table 11. Internet Explorer XHTML 1.1


84


XHTML 1.1, mit XML-Prolog

xhtml11.html, text/html eingeschränkt eingeschränkt

xhtml11.xhtml, application/xhtml+xml

Fehlermeldung Fehlermeldung

XHTML 1.1, ohne XML-Prolog

xhtml11noXmlProlog.xhtml,application/xhtml+xml

eingeschränkt eingeschränkt

deprecated.html Fehlermeldungen für alleDokumente (depr1.xhtml,conf1.xhtml, ...)

Fehlermeldungen für alleDokumente (depr1.xhtml,conf1.xhtml, ...)

Die nachfolgenden Beschreibungen gelten für beide Browser gleichermaßen, da sie eine iden-tische Verarbeitung der Dokumente aufwiesen. Bei den Dokumenten xhtml11.html (mitXML-Prolog) und xhtml11noXmlProlog.xhtml traten die gleichen Schwierigkeiten mit denElementen <abbr>, <q> und <object> wie unter XHTML 1.0 strict auf. Bei den client-seit-igen Image-Maps (<map>- und <area>-Element) wurden zwar die Grafikdateien angezeigt,jedoch funktionierten die Verlinkungen nicht. Außerdem funktionierte in keinem der beidenDokumente das Javascript.

Das Dokument xhtml11.xhtml und alle Dokumente, die sich von deprecated.html ausverzweigen, wurden mit folgender Fehlermeldung quittiert:

"Die XML-Seite kann nicht angezeigt werden. Die Parameterentität muss definiert werden,bevor sie verwendet wird. Fehler beim Bearbeiten der Ressource'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd' %xhtml-prefw-redecl.mod;"

Positiv aufgefallen ist, dass beide Internet Explorer als einzige Browser im Test, die Ele-mente des Ruby-Moduls, nicht wie alle anderen Browser, als reinen Text dargestellt haben.

Figure 13. Screenshot der Verarbeitung des Ruby Annotation Module(Internet Explorer 6)


85

XHTML 2.0

Beide Internet Explorer nutzen die Stilanweisungen des externen Style Sheets, um das Doku-ment xhtml2.xhtml darzustellen. Allerdings funktionierten die Verlinkungen im Dokumentnicht.

Figure 14. Screenshot der Verarbeitung eines XHTML2-Dokuments(Internet Explorer 6)

8.3.1.2. Firefox

Table 12. Firefox XHTML 1.0

XHTML 1.0 - Tests Firefox 1.0 Firefox 1.5 beta 1

XHTML 1.0 strict, mit


86


XML-Prolog

index1.html, text/html ja ja


ja ja

index3.xhtml, application/xml ja ja

index4.xhtml, text/xml ja ja

XHTML 1.0 strict, ohneXML-Prolog

index1.html, text/html ja ja


ja ja

index3.xhtml, application/xml ja ja

index4.xhtml, text/xml ja ja

deprecated.html







depr3.xhtml Fehler nicht erkannt Fehler nicht erkannt






depr52.xhtml Fehler erkannt Fehler erkannt




conf1.xhtml ja ja

conf2.xhtml ja ja

conf3.xhtml ja ja

conf4.xhtml Fehler erkannt, aber falschverarbeitet

Fehler erkannt, aber falsch ve-rarbeitet

frag.xhtml ja ja


87

XHTML 1.0 Dokumente bereiten den beiden Browsern keine Probleme. Alle Elemente wer-den so dargestellt, wie es die Spezifikation vorschreibt. Allerdings werden auch von beidenBrowsern die Javascript-Anweisungen nicht verarbeitet, wenn diese durch einen -CDATAAbschnitt eingeschlossen werden.

Werden Elementnamen, entgegen den Vorschriften der XHTML 1.0 Spezifikation, großgeschrieben, so ignorieren das beide Browser und stellen den Inhalt des Elementes ohneFehlermeldungen dar. Des Weiteren werden alle veralteten Elemente, bis auf das<basefont>-Element (depr52.xhtml), weiterhin angezeigt. Wird das eben genannte Elementim Dokument verwendet, so zeigt der Firefox an dieser Stelle keinen Inhalt an, zeigt jedochebenso wenig eine Fehlermeldung. Genau wie die beiden Internet Explorer, verarbeiten beideFirefox-Versionen nicht definierte Zeichenreferenzen fehlerhaft. Anstatt den Quellcode derZeichenreferenz darzustellen zeigen sie eine Fehlermeldung.

Table 13. Firefox XHTML 1.1



xhtml11.html, text/html eingeschränkt eingeschränkt

xhtml11.xhtml, application/xhtml+xml

ja eingeschränkt


xhtml11noXmlProlog.xhtml,application/xhtml+xml

ja eingeschränkt

deprecated.html für alle Dokumente wie inXHTML 1.0

für alle Dokumente wie inXHTML 1.0

Prinzipiell bereiten auch die XHTML 1.1 Dokumente den Firefox-Browsern keine Probleme.Der Firefox 1.0 hat ebenso wie die Version 1.5 beta 1 Probleme mit dem <map>- und -<area>Element, wenn das Dokument mit dem MIME-Typ "text/html" ausgeliefert wird.Die Ursache liegt darin, dass sich die Syntax derart geändert hat, sodass client-seitige Image-Maps nicht mehr vom <object>-Element umschlossen werden. Der MIME-Typ veranlasstdie Browser aber den HTML-Parser zu benutzen, welcher wiederum die Notation der Ele-mente, wie noch in XHTML 1.0, erwartet. Werden die Dokumente als "application/

xhtml+xml" ausgeliefert, so wird der XML-Parser benutzt und die Image-Maps funktionierenwieder.

Im Firefox 1.5 beta 1 funktioniert in XHTML 1.1 Dokumenten kein Javascript. Die Version1.0 des Firefox hingegen hat damit keine Schwierigkeiten. Das Ruby-Modul wird von


88

keinem der beiden Browser verarbeitet, der Inhalt der Ruby-Elemente wird hintereinander ineiner Zeile dargestellt.

XHTML 2.0

Beide Firefox Browser stellen den Inhalt des XHTML 2.0 Test-Dokuments nur als reinenText dar. Weder die externe Verknüpfung eines Style Sheets, noch die interne Notation vonStilanweisungen hat Einfluss auf die Darstellung.

Figure 15. Screenshot der Verarbeitung eines XHTML2-Dokuments(Firefox 1.5 beta 1)

8.3.1.3. Opera

Table 14. Opera XHTML 1.0

XHTML 1.0 - Tests Opera 8.0

XHTML 1.0 strict, mit XML-Prolog

index1.html, text/html ja

index2.xhtml, application/xhtml+xml ja

index3.xhtml, application/xml ja

index4.xhtml, text/xml ja

XHTML 1.0 strict, ohne XML-Prolog

index1.html, text/html ja

index2.xhtml, application/xhtml+xml ja

index3.xhtml, application/xml ja

index4.xhtml, text/xml ja

deprecated.html


89





depr3.xhtml Fehler nicht erkannt




depr52.xhtml Fehler erkannt




conf1.xhtml ja

conf2.xhtml ja

conf3.xhtml ja

conf4.xhtml Fehler erkannt, aber falsch verarbeitet

frag.xhtml Fehler nicht erkannt

In Bezug auf XHTML 1.0 verhält sich der Opera 8.0 genauso wie die beiden FirefoxBrowser. Javascript funktioniert im Zusammenhang mit CDATA nicht mehr. Die vom Doku-ment deprecated.html ausgehenden Tests, werden identisch zum Firefox verarbeitet.

Table 15. Opera XHTML 1.1



xhtml11.html, text/html eingeschränkt

xhtml11.xhtml, application/xhtml+xml eingeschränkt


xhtml11noXmlProlog.xhtml, application/xhtml+xml

eingeschränkt

deprecated.html für alle Dokumente wie in XHTML 1.0

Der Opera 8.0 hat bei der Verarbeitung von XHTML 1.1 Dokumenten Probleme mitJavascript und client-seitigen Image-Maps. Javascript funktioniert nicht mehr, egal mitwelchem MIME-Typ das Dokument ausgeliefert wird und unabhängig davon, ob ein XML-


90

Prolog angegeben ist oder nicht. Die Grafiken der client-seitigen Image-Maps werden zwarvom Browser dargestellt, es fehlt ihnen aber jegliche Funktionalität.

Die Inhalte der Ruby-Elemente werden nur unformatiert, als reiner einzeiliger Textdargestellt.

XHTML 2.0

Bei der Verarbeitung des XHTML 2.0 Dokument gibt es im Opera keine Überraschungen.Der Browser zeigt den Inhalt des Dokuments, unabhängig von Stilanweisungen, als reinenText ohne jegliche funktionale Eigenschaften.

8.3.1.4. Konqueror

Table 16. Konqueror XHTML 1.0

XHTML 1.0 - Tests Konqueror 3.4.0

XHTML 1.0 strict, mit XML-Prolog

index1.html, text/html eingeschränkt

index2.xhtml, application/xhtml+xml eingeschränkt

index3.xhtml, application/xml eingeschränkt

index4.xhtml, text/xml eingeschränkt

XHTML 1.0 strict, ohne XML-Prolog

index1.html, text/html eingeschränkt

index2.xhtml, application/xhtml+xml eingeschränkt

index3.xhtml, application/xml eingeschränkt

index4.xhtml, text/xml eingeschränkt

deprecated.html





depr4.xhtml eingeschränkt



depr52.xhtml eingeschränkt




91

XHTML 1.0 - Tests Konqueror 3.4.0


conf1.xhtml ja

conf2.xhtml ja

conf3.xhtml ja

conf4.xhtml ja

frag.xhtml Fehler nicht erkannt

Egal welcher MIME-Typ in den XHTML 1.0 angegeben wurde oder ob ein XML-Prolognotiert ist oder nicht, der Konqueror zeigt alle Dokumente an. Jedoch gibt esEinschränkungen in der Verarbeitung der einzelnen Elemente. Wird die Leserichtung von El-ementinhalten mit Hilfe des <bdo>-Elements und dir-Attributs auf "rechts-nach-links"gesetzt, so stellt der Konqueror lediglich das letzte Zeichen der Zeile ganz links dar.

Ist in Tabellen eine feste Spaltenbreite im XHTML-Quellcode notiert, ignoriet das der Kon-queror. Die Spaltenbreite kann mit Hilfe des width-Attributs festgelegt werden. Dieses At-tribut ist nach wie vor für die Elemente <table>, <col> und <colgroup> erlaubt. Der Kon-queror berechnet die einzelnen Spaltenbreiten und somit auch die Gesamtbreite der Tabelleanhand der Inhalte der einzelnen Zellen der Tabelle.

Probleme gibt es auch mit den Elementen <object>, <map> und <area>. Zum einen werdendie eingebundenen Grafikdateien zusammengestaucht angezeigt und zum anderen funktion-ieren die Verlinkungen der Image-Maps nicht.

Ebenso wie in allen anderen Browsern funktioniert auch im Konqueror das Javascript imZusammenhang mit dem CDATA-Abschnitt nicht.

Im Dokument depr4.xhtml wird die minimierte Schreibeweise des Attributs checked ver-wendet. Der Konqueror ignoriert zwar diesen Fehler, aber die Checkbox, für die das Attributgesetzt wurde, ist in der Darstellung des Dokumentes im Browser nicht ausgewählt. Ebensowerden die Formatierungsanweisungen des <basefont>-Elements im Dokumentdepr52.xhtml ignoriert.

Table 17. Konqueror XHTML 1.1

XHTML 1.1 - Tests Konqueror


xhtml11.html, text/html eingeschränkt

xhtml11.xhtml, application/xhtml+xml eingeschränkt


xhtml11noXmlProlog.xhtml, application/ eingeschränkt


92

XHTML 1.1 - Tests Konqueror

xhtml+xml

deprecated.html für alle Dokumente wie in XHTML 1.0

Die Schwierigkeiten mit den unter XHTML 1.0 aufgeführten Elementen setzen sich in derVerarbeitung von XHTML 1.1 Dokumenten fort. Nach wie vor werden durch das -<object>Element eingebundene Grafiken gestaucht dargestellt. Die in den client-seitigenImage-Maps verwendeten Bilder werden in XHTML 1.1 Dokumenten jedoch in ihrer richti-gen Größe dargestellt. Die Funktionalität einer Image-Map ist jedoch auch hier nichtgegeben. Javascript hingegen funktioniert in allen Dokumenten.

XHTML 2.0

Der Konqueror verarbeitet das XHTML 2.0 Dokument zwar nur als reinen Text, stellt diesenallerdings mit Zeilenumbrüchen im Browserfenster dar. Der einzige Link im Dokument istfunktionstüchtig, das href-Attribut in einem <p>-Element hingegen wird ignoriert.

8.3.2. CSS

8.3.2.1. CSS2.1 Selektoren

Table 18. CSS2.1 Selektoren

CSS2.1 -Tests

IE 6 IE 7 beta 1 FF 1.0 FF 1.5 beta1

O8 K3.4.0

Univer-salselktor

ja ja ja ja ja ja

Typselektor ja ja ja ja ja ja

Nachfahren-Se-lektor

ja ja ja ja ja ja

Kind-Se-lektor

nein nein ja ja ja ja

Benach-barte-

Geschwis-ter-Selektor


Attribut-Selektoren

nein nein ja ja bis auf[att=val]

ja

Klassen-Selektore

ja ja ja ja ja ja

ID-Selektor ja ja ja ja ja ja


93

CSS2.1 -Tests


O8 K3.4.0

:first-Child nein nein ja ja ja ja

:link,:visited

ja ja ja ja ja ja

:hover,:active,:focus

teilweise teilweise ja ja ja ja

Sprach-Pseudo-

Klasse


:first-Line ja ja ja ja ja ja

first-letter ja ja ja ja ja ja

:before,:after

nein nein teilweise teilweise ja ja

KomplexeSelektoren

nein nein ja ja teilweise ja

Internet Explorer: Beide Browser haben Probleme mit den dynamischen Pseudo-Klassen.Wenn für Links alle drei Pseudo-Klassen mit verschiedenen Eigenschaften belegt sind, habendie Internet Explorer Schwierigkeiten die Eigenschaften, gemäß den Zuständen des Links,richtig zuzuordnen. Die komplex zusammengesetzten Selektoren funktionieren deshalb nicht,weil diese Selektoren aus Kombinationen von z. B. Kind- oder Benachbarte-Geschwis-ter-Selektoren bestehen.

Firefox: Die Pseudo-Elemente :before und :after funktionieren zwar prinzipiell, jedochlassen sich dann nur über die Eigenschaft content einfache Zeichenketten einfügen. Au-tomatisch generierte Counter, die mit Hilfe der beiden Pseudo-Elemente eingefügt werden,verarbeiten beide Firefox Browser noch nicht.

Opera 8.0: Einer der drei komplexen Selektoren hat unter anderem den Attribut-Selektor[att=val] als Komponente. Da dieser Selektor vom Opera nicht unterstützt wird, funktion-iert auch der komplexe Selektor nicht.

8.3.2.2. CSS2.1 Box-Model und Positionierung

Table 19. CSS2.1 Box-Model und Positionierung

CSS2.1 -Tests


O8 K3.4.0

Box-Model falsche Bre-ite

falsche Bre-ite

ja ja ja ja


94

CSS2.1 -Tests


O8 K3.4.0

Collapsing-Margins


Position-ierung

posi-tion.html


adv-po-sition.html

teilweise teilweise teilweise teilweise ja teilweise

float.html teilweise teilweise ja ja ja ja

adv-float.html


Internet Explorer: Dass der Internet Explorer 6 das Box-Model nicht korrekt umsetzt, istbekannt. Jedoch gibt es auch im Internet Explorer 7 beta 1 diesbezüglich keine Verbesserung.Beide Browser errechnen die Breite der Box aus der Gleichung:

Boxbreite = width - border-left - padding-left - padding-right - border-right

Das CSS2.1 Box-Model schreibt jedoch folgende Gleichung vor:

Boxbreite = width + border-left + padding-left + padding-right + border-right

Anmerkung: Wird in dem XHTML-Dokument der optionale XML-Prolog (<?xml ver-

sion="1.0" encoding="UTF-8"?>) weggelassen, so schaltet der Internet Explorer in densog. „standards-compliant mode“. In diesem Modus verarbeitet der Internet Explorer CSS-Anweisungen bezüglich des Box-Modells getreu der CSS-Spezifikation des W3C.

Bei dem Collapsing-Margin-Test haben auch beide Browser die gleichen Probleme. Einer-seits haben Überschrift-Elemente keine vertikalen margin-Bereiche, wohingegen für -<span>Elemente eine feste Breite der Box verwendet wird. Entgegen der Spezifikation be-sitzen diese Elemente vertikale margin-Bereiche.

Bei der Positionierung von Boxen fällt das Ergebnis nicht wesentlich besser aus. Bei ein-fachen nicht verschachtelten Block-Boxen funktioniert lediglich die Positionierung vonBoxen nicht, die mit position: fixed formatiert werden. Diese Boxen werden in ihremnormalen Fluss angezeigt.

Kritischer wird es, wenn Boxen mit verschiedenen position-Werten ineinander ver-schachtelt werden. Absolut positionierte Boxen, die in relativ positionierten Boxen angeord-net werden, stellen die Internet Explorer entweder gar nicht oder an der falschen Stelle dar.Ragt eine absolut positionierte Box über die Grenzen ihrer umschließenden, relativ position-ierten Box hinaus und befindet sich diese Konstellation am unteren Rand des Viewports, so


95

"schneiden" die Internet Explorer die Box an der unteren Kante des Viewports ab. Es wirdkein Scrollbalken im Browserfenster angezeigt, was zur Folge hat, dass man den Inhalt dieserBox nicht erreicht.

Figure 16. Screenshot adv-position.html (Internet Explorer 6)

Figure 17. Screenshot adv-position.html (Firefox 1.5 beta 1)

Auch bei den Floats haben beide Internet Explorer die gleichen Schwierigkeiten mit derDarstellung. Textabsätze, die direkt um eine gefloatete Box fließen, haben einen horizontalen


96

Abstand von drei Pixeln zu der gefloateten Box, obwohl kein padding-Bereich definiertwurde. Dieser CSS-Bug wird als Three Pixel Text-Jog bezeichnet und tritt nur im InternetExplorer auf (vgl. Bergevin 2004a). Nach wie vor erweitern beide Internet Explorer einegefloatete Box, wenn diese ebenfalls eine gefloatete Box mit größerer Höhe beinhaltet.

Anmerkungen zum Internet Explorer 7 beta 1: Der in der Vorstellung der CSS-Test-Dokumente beschriebene Guillotine-Bug wurde im Internet Explorer 7 beta 1 behoben.In diesem Browser wurden zusätzlich alle unter der Kategorie "Explorer Exposed" der Inter-netseite positioniseverything.net aufgelisteten CSS-Bugs getestet. Dabei wurde festgestellt,dass neben dem Guillotine-Bug lediglich der sog. Peekaboo-Bug behoben wurde. Dabei han-delt es sich um einen Fehler, der beispielsweise dann auftritt, wenn Links in einem -<div>Element angezeigt werden, welches zusätzlich eine gefloatete Box enthält (vgl.Bergevin 2004b). Die von der Internetseite aufgelisteten CSS-Bugs wurden deshalb nichtvollständig in meine Test-Dokumente aufgenommen, da sie teilweise sehr komplexe Kombi-nationen von CSS-Eigenschaften erfordern. Zudem ist die Wahrscheinlichkeit, dass solcheKombinationen in der Praxis häufig zum Einsatz kommen eher gering. Meine Tests zeigentrotzdem die wichtigsten und grundlegenden Probleme, die im Zusammenhang mit Position-ierung und Floats auftreten können.

Firefox & Konqueror: Beide Firefox-Versionen und der Konqueror 3.4.0 haben Probleme,wenn relativ positionierte Boxen in einer Box, die absolut positioniert ist, verschachtelt wer-den. Wird in dieser Anordnung die Eigenschaft bottom mit einem Prozentwert belegt, sowird diese Eigenschaft von den Browsern ignoriert. Die Box wird dann nicht um denangegebenen Prozentwert aus ihrer Position im normalen Fluss verschoben.

Figure 18. relativ positionierte Box mit der Eigenschaft bottom: 10%

(Firefox vs. Opera)

8.3.2.3. CSS2.1 font-Eigenschaften


97

Table 20. CSS2.1 font-Eigenschaften

CSS2.1 -Tests


O8 K3.4.0

font-family ja ja ja ja ja ja

font-style ja ja ja ja ja ja

font-variant ja ja ja ja ja ja

font-weight ja ja ja ja ja ja

font-size ja ja ja ja teilweise ja

Die Eigenschaften zur Formatierung der Schrift eines Dokuments können im Allgemeinen alsunkritisch betrachtet werden. Die Darstellung ist jedoch immer abhängig von dem Systemund den darauf installierten Schriftarten. Das Problem mit den Schriftgewichten wurde bere-its bei der Vorstellung der Font-Tests erwähnt. Deshalb ist der Test der Eigenschaft font-

weight mit den Werten zwischen 100 bis 900 zu vernachlässigen. Keiner der getestetenBrowser stellt neun unterschiedliche Schriftstärken dar, was jedoch kein Fehler der Test-Kandidaten, sondern auf die verwendete Schrift zurückzuführen ist.

Opera 8.0: Beim Opera 8.0 ist aufgefallen, dass der Browser kein Unterschied zwischenEigenschaften font-size: xx-small und font-size: x-small macht.

8.3.2.4. CSS2.1 text-Eigenschaften

Table 21. CSS2.1 text-Eigenschaften

CSS2.1 -Tests


O8 K3.4.0

text-indent ja ja ja ja ja ja

text-align ja ja ja ja ja ja

text-decoration

teilweise teilweise ja ja ja teilweise

letter-spacing

ja ja ja ja ja ja

word-spacing

ja ja ja ja ja ja

text-transform

ja ja ja ja ja ja

white-space teilweise teilweise teilweise teilweise teilweise ja


98

Internet Explorer: Der Wert blink der Eigenschaft text-decoration wird nichtunterstützt. Die Eigenschaft white-space, mit der festgelegt werden kann, wie Leerzeichenund Zeilenumbrüche aus dem (X)HTML-Quellcode die Darstellung des Dokuments imBrowser beeinflussen, wird von den beiden Browsern teilweise ignoriert. Einzig die Angabewhite-space: nowrap wird unterstützt. Der Wert nowrap bedingt, dass der Inhalt eines Ele-ments an der Grenze des umschließenden Blocks nicht in eine neue Zeile umgebrochen wird.Ist eine Textzeile länger als die Breite des umschließenden Blocks, erweitern die Internet Ex-plorer diesen soweit, dass die Zeile darin Platz hat. Dieses Verhalten ist jedoch nicht korrekt,die Box sollte nicht verbreitert werden, sondern die Textzeile sollte über die Grenzen der Boxhinausragen.

Firefox: Auch beide Firefox Browser unterstützen nicht alle vier Werte der Eigenschaftwhite-space. Unterstüzt werden pre und nowrap, pre-wrap und pre-line hingegen nicht.Dabei bedingt der Wert pre, dass Leerzeichen aus dem (X)HTML-Quellcode in die Darstel-lung des Dokuments im Browser übernommen werden. Mit dem Wert pre-warp solltenZeilenumbrüche aus dem Quellcode übernommen werden. Der Wert pre-line bedeutet, dassmehrere aufeinander folgende Leerzeichen im Quellcode zu einem Leerzeichen zusam-mengefasst und Zeilenumbrüche aus dem Quellcode übernommen werden. Jedoch dürfenZeilen, im Gegensatz zum Wert pre-warp, auch an der Grenze des umschließenden Blocksumgebrochen werden.

Opera 8.0: Der Browser unterstützt nur die Werte pre, nowrap und pre-wrap der Eigen-schaft white-space.

Konqueror 3.4.0: Der Konqueror ist der einzige Browser im Test, der alle vier Werte fürwhite-space korrekt verarbeitet. Allerdings versteht auch dieser Browser den Wert blinkder Eigenschaft text-decoration nicht.

8.3.2.5. CSS2.1 color-Eigenschaften

Table 22. CSS2.1 color-Eigenschaften

CSS2.1 -Tests


O8 K3.4.0

Farbnamen ja ja ja ja ja ja

RGB-Werte ja ja ja ja ja ja

hexadezi-male Werte

ja ja ja ja ja ja

8.3.2.6. CSS3 Selektoren

Table 23. CSS3 Selektoren


99

CSS3 -Tests


O8 K3.4.0

'~' - Kom-binierer

nein nein ja ja nein ja

Attribut-Selektoren


Pseudo-Klassen

:not(s) nein nein ja ja nein ja

:contains("string")

nein nein nein nein nein ja

:target nein nein ja ja nein ja

:enabled,:disabled


:checked,:indeterminate


:nth-child(n)


:nth-of-type(n)


:nth-last-child(n)


:nth-last-of-type(n)


:first-child nein nein ja ja nein ja

:last-child nein nein nein ja nein ja

:only-child nein nein nein ja nein ja

:first-of-type


:last-of-type nein nein nein nein nein ja

:only-of-type


:empty nein nein ja ja nein ja

Pseudo-Elemente

::fist-line ja ja ja ja ja ja

::fist-letter ja ja ja ja ja ja

::before nein nein ja ja ja ja


100

CSS3 -Tests


O8 K3.4.0

::after nein nein ja ja ja ja

::selection nein nein nein nein nein ja

8.3.2.7. CSS3 color-Eigenschaften und mehrspalige Layouts

Table 24. CSS3 color-Eigenschaften und mehrspalige Layouts

CSS2.1 -Tests


O8 K3.4.0

RGBA-Werte

nein nein nein nein nein nein

HSL-Werte nein nein ja ja nein nein

HSLA-Werte


opacity nein nein ja ja nein nein

mulit-col-umn Layout


8.3.3. Zusammenfassung

Dem Internet Explorer merkt man das Defizit an Entwicklung und das "fortgeschrittene" Al-ter deutlich an. XHTML-Dokumente werden von diesem Browser nur geringfügigunterstützt. Werden die Dokumente mit dem durch die Spezifikation vorgeschriebenemMIME-Typ ausgeliefert, zeigt der Browser nur den Quellcode des Dokuments an. Standard-konforme XHTML 1.1 Dokumente werden hingegen mit einer Fehlermeldung quittiert. Imdirekten Vergleich zwischen Internet Explorer 6 und der Version 7 beta 1 konnten keine Un-terschiede bezüglich der Verarbeitung von XHTML-Dokumenten festgestellt werden. Bei derUnterstützung von CSS sieht es nur unwesentlich besser aus. Von den zur Verfügung gestell-ten Selektoren werden nicht alle unterstützt. Das ändert sich auch nicht in der Vorabversiondes Internet Explorer 7. Die Beta 1 des Browsers hat immer noch Probleme mit dem Box-Model, der Positionierung von Boxen und mit Floats. Betrachtet man die Ergebnisse unterdem Gesichtspunkt, dass der Internet Explorer der weltweit am meisten verbreitete Browserist, so ist das Ergebnis als erschreckend zu bezeichnen.

Die Browser Opera und beide getesteten Versionen des Firefox liefern ein ähnlich gutesTestergebnis ab. XHTML-Dokumente werden von den Browsern gleichermaßen verarbeitet.Und auch beim CSS-Test lassen sich keine gravierenden Unterschiede feststellen. Bei deneinfachen CSS3-Tests gibt es jedoch Unterschiede zwischen dem Firefox und dem Opera.


101

Der Firefox unterstützt bereits einige neue Selektoren, einen Teil der neuen MöglichkeitFarbwerte anzugeben sowie die Eigenschaft zur Darstellung von transparenten Elementen.Der Opera unterstützt bis auf die veränderte Syntax der Pseudo-Elemente keine der getestetenCSS3-Eigenschaften.

Der Konqueror sticht einzig bei der Unterstützung der CSS hervor, er verarbeitet bereits alleCSS2.1- und alle CSS3-Selektoren. Auch in den restlichen CSS-Tests leistet sich dieserBrowser kaum Ausfälle. Bei den XHTML-Tests ist aufgefallen, dass der Konqueror gerade inden Bereichen schlecht abschneidet, die den Unterschied zwischen HTML und XHTML aus-machen. Es handelt sich dabei um Tests der nicht wohlgeformten Ausdrücke, fehlenden End-Tags, die Kleinschreibung von Elementnamen sowie Attributwerten, die nicht inAnführungszeichen gesetzt sind. Alle diese Fehler werden vom Konqueror ignoriert und dieDokumente trotzdem dargestellt.


102

9. Schlussbemerkungen

9.1. Zusammenfassung

Das W3C stellt mit den Spezifikationen XHTML 1.0 und XHTML 1.1 zwei Standards bereit,mit denen es möglich ist, strukturierende Dokumente für Web-Browser zu erstellen. Dabeisind klarere Regeln im Vergleich zu HTML definiert worden, die es bei der Erstellung dieserDokumente zu beachten gilt. Die Trennung des Inhalts und der Struktur eines Dokumentsvom Layout und Design wurde in XHTML 1.0 begonnen und wird mit XHTML 1.1 konse-quent weitergeführt. Dazu wurden darstellungsbezogene Elemente und Attribute aus denSpezifikationen entfernt. Die Folge daraus ist, dass die Dokumente zum einen übersichtlicherwerden und zum anderen von den Autoren leichter aktualisierbar und erweiterbar sind. Zu-dem führt dieser Aspekt zu einer Verbesserung der Zugänglichkeit von Dokumenten für mo-bile Kleinst-Geräte sowie für Benutzerprogramme, die es Menschen mit eingeschränkten ph-ysischen oder kognitiven Fähigkeiten erlauben, Informationen aus dem Internetaufzunehmen.

Der noch nicht als Recommendation veröffentlichte XHTML 2.0 Standard trennt sich radikalvon veralteten Elementen und Attributen aus früheren (X)HTML Versionen. Neue Elemente,mit denen sich Dokumente noch logischer strukturieren lassen, wurden in die Spezifikationaufgenommen. Des Weiteren wurden XML-Techniken integriert, die den Standard um er-weiterte Formularfunktionalitäten und erweiterte Ereignisverarbeitung durch Event-Handlerausdehnen. Die Behandlung von Frames wird endgültig aus der XHTML-Familie ausge-lagert. Bisher wird dieser Standard jedoch von keinem Browser unterstützt. Erst wenn sichdas ändert, wird sich der Standard bei den Autoren von Web-Dokumenten durchsetzten.

Der Standard CSS2.1 stellt eine Überarbeitung von CSS2 dar. Prinzipiell ist dieser Standardeine Entwicklungsstufe hin zu CSS3. Bekannte Fehler aus CSS2 wurden bereinigt und Eigen-schaften entfernt, die es in CSS3 nicht mehr geben wird. Durch die vielfältigen Selektorenund Eigenschaften kann fast jedes Element in XHTML-Dokumenten bezüglich der Darstel-lung im Browser beeinflusst werden. Die Kombination von XHTML und CSS erlaubtweitaus mehr gestalterische Freiheit für Web-Designer als mit HTML allein.

Der CSS3 Standard wird noch mehr Selektoren enthalten, womit sich mehr Wege eröffnen,die Elemente von XHTML-Dokumenten anzusprechen. Gerade die Bereiche Attribut-Se-lektoren und Pseudo-Klassen werden um viele neue Selektoren erweitert. Des Weiteren ges-tattet CSS3 die Stilanweisungen zu gruppieren und die Anwendung dieser Regeln an einenbestimmten Medientyp mit genau definierten Eigenschaften zu koppeln. Aber auch gänzlichneue Konzepte für die visuelle Darstellung von Dokumenten werden mit CSS3 vorgestellt.So wird es ein Modul geben, mit dem sich auf einfache Art und Weise mehrspaltige Seiten-layouts erstellen lassen werden. Ein Ende der Arbeiten an CSS3 ist jedoch noch nicht abse-hbar, daher ist die Unterstützung der Eigenschaften durch die Web-Browser eher marginal.Erst wenn die Arbeiten abgeschlossen sein werden und auch die Web-Browser den Standard


103

unterstützen, wird er sich auch bei den Web-Designern durchsetzen.

Was die Unterstützung der W3C-Standards durch die getesteten Web-Browser betrifft, so ze-ichnet sich ein sehr durchwachsendes Ergebnis ab. Sollte man einen Gewinner und einenVerlierer der Browser-Tests bestimmen, dann könnte zumindest der Verlierer klar aus-gemacht werden. Diese Rolle lässt sich eindeutig dem Internet Explorer zuordnen. Einenklaren Gewinner hingegen kann man zwischen dem Firefox, Opera und Konqueror nicht aus-machen.

Der Internet Explorer unterstützt die XHTML-Standards nicht, wenn Dokumente dieses Typsgemäß den XHTML-Spezifikationen erstellt wurden. Dies gilt für den getesteten Internet Ex-plorer 6 sowie für die Version 7 beta 1gleichermaßen. Beide Browser unterstützen CSS2.1mit einigen Einschränkungen bezüglich der Positionierung von Boxen.

Die Browser Opera, Firefox und Konqueror verarbeiten XHTML-Dokumente größtenteilsordnungsgemäß. Einschränkungen gibt es allerdings beim Auftreten von missbilligten Ele-menten in Dokumenten des Typs XHTML 1.0 und XHTML 1.1. CSS2.1 unterstützen dieeben genannten Browser ähnlich gut und mit nur geringfügigen Einschränkungen. Der Kon-queror hebt sich dadurch hervor, dass er alle Selektoren beider CSS-Standards unterstützt.

9.2. Ausblick

Mit den Standards XHTML 2.0 und CSS3 ist der Grundstein für die Basis der zukünftigenWeb-Dokumente gelegt. Die Trennung zwischen Inhalt und Design wird zu mehr Bediener-freundlichkeit, Zugänglichkeit, Geräteunabhängigkeit und mehr Semantik führen.

Werden die beiden Standards von den am meisten verbreiteten Web-Browsern vollständigunterstützt, so werden sich diese Standards auch nach und nach bei den Autoren von Web-Dokumenten durchsetzen.

Unterstützt der Internet Explorer in seinen zukünftigen Versionen die W3C-Standards weiter-hin nur unzureichend, so wird das nach wie vor einen Mehraufwand für Web-Designer beider Erstellung von Web-Dokumenten bedingen und "unsaubere", nicht standard-konformeDokumente zur Folge haben. Denn schon heute werden Internetseiten dahingehend modi-fiziert, dass sie auch im Internet Explorer in der gewünschten Weise dargestellt werden.Abschließend ist anzumerken, dass durch die mangelhafte Unterstützung von W3C-Standardsdurch den Internet Explorer, sich die Marktanteile kontinuierlich zu Gunsten andererBrowser, wie beispielsweise dem Firefox, verschieben werden.


104

BibliographyAltheim, Murray et al. (2001). 5. XHTML Abstract Modules. in: Modularization of XHTML.

URL: http://www.w3.org/TR/xhtml-modularization/abstract_modules.html.

Axelsson, Jonny et al. (2005). 17. XHTML Embedding Attributes Module. in: XHTML 2.0.URL: http://www.w3.org/TR/xhtml2/mod-embedding.html.

Behme, Henning; Mintert, Stefan. (2000). Die neue, alte Idee: Strukturorientiert schreiben.in: XML in der Praxis. URL:http://www.linkwerk.com/pub/xmlidp/2000/strukturorientiert.html.

Bergevin, Holly. (2004a). The IE Three Pixel Text-Jog. in: Position Is Everything. URL:http://www.positioniseverything.net/explorer/threepxtest.html.

Bergevin, Holly. (2004b). IE6 Peekaboo Bug. in: Position Is Everything. URL:http://www.positioniseverything.net/explorer/peekaboo.html.

Berners-Lee, Tim. (2005). W3C Technical Reports and Publications. URL:http://www.w3.org/TR/.

Birbeck, Mark; Pemberton, Steven. (2005). XHTML2: Accessible, Usable, Device Indepen-dent and Semantic. URL: http://www.w3.org/2005/Talks/05-steven-xtech/.

Bos, Bert. (2004). The CSS 'Reader' Media Type. URL: http://www.w3.org/TR/css3-reader/.

Bos, Bert. (2005a). Cascading Style Sheets "Under Construction". URL:http://www.w3.org/Style/css/current-work.

Bos, Bert et al. (2005b). 1 About the CSS 2.1 Specification. in: Cascading Style Sheets, level2 revision 1. URL: http://www.w3.org/TR/CSS21/about.html.

Boyer, John et al. (2004). XFORMS 1.1. URL: http://www.w3.org/TR/xforms11/.

Braun, Herbert. (2005). Das neue Web. Internet-Seiten mit XHTML2. in: c't Magazin, Heft15.

Glanzman, Daniel et al. (2001). Selectors. URL: http://www.w3.org/TR/css3-selectors.

Håkon Wium, Lie. (2002). CSS3 module: Cascading and inheritance. URL:http://www.w3.org/TR/css3-cascade.

Jacobs, Ian. (2005). History. in: About W3C. URL: http://www.w3.org/Consortium/history.

McCarron, Shane; Pemberton, Steven; Raman, T. V. (2003). XML Events, An Events Syntax


105

for XML. URL: http://www.w3.org/TR/xforms11/.

Mintert, Stefan. (2003). Die W3C-Spezifikationen für das Web-Publishing. München.

o. V. (2005a). Zwei Frames gleichzeitig ändern. in: Selfhtml. URL:http://de.selfhtml.org/javascript/beispiele/zweiframes.htm.

o. V. (2005b). Unterschiede: MIME-Typen. in: Selfhtml, Unterschiede zwischen XHTMLund HTML. URL: http://de.selfhtml.org/html/xhtml/unterschiede.htm.

o. V. (2005c). Usage Share of web browser. in: Wikipedia, the free encyclopedia. URL:http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.

o. V. (2005d). Mozilla Firefox. in: Wikipedia, the free encyclopedia. URL:http://en.wikipedia.org/wiki/Mozilla_Firefox.

o. V. (2005e). Firefox's Market Share Nears 7 Procent. in: WebSideStory. URL:http://www.websidestory.com/products/web-analytics/datainsights/spotlight/05-10-2005.html.

o. V. (2005f). Opera (web browser). in: Wikipedia, the free encyclopedia. URL:http://en.wikipedia.org/wiki/Opera_%28web_browser%29.

Pakalski, Ingo. (2005). Firefox 1.5 mit verbesserter Tab-Steuerung. in: golem.de, IT-Newsfür Profis. URL: http://www.golem.de/0509/40349.html.

Pemberton, Steven; Pettit, Brad. (2003). CSS3 Color Module. URL:http://www.w3.org/TR/css3-color/.

Sirisena, Prabhath. (2005). IE/WIN Guillotine Bug. in: Position Is Everything. URL:http://www.positioniseverything.net/explorer/guillotine.html.

Suignard, Michel. (2001). Ruby Annotation. URL: http://www.w3.org/TR/ruby/.

Tikwinski, Thomas. (2005). History. in: About W3C. URL:http://www.w3c.de/about/mission.html.

A. Eidesstattliche Erklärung

Ich erkläre hiermit an Eides statt, dass ich die vorliegende Studienarbeit/ Diplomarbeitselbständig und ohne unerlaubte Hilfe angefertigt habe, andere als die angegebenen Quellenund Hilfsmittel nicht be-nutzt und die den benutzten Quellen wörtlich oder inhaltlich ent-nommenen Stellen als solche kenntlich gemacht habe.

Cottbus, 24.09.2005

________________


106

Documents

Vergleichende Evaluierung der Unterstützung von W3C-Standards … · 2005. 12. 5. · 2. Einleitung 2.1. Eine kurze Vorstellung des W3C Das World Wide Web Consortium (W3C) wurde