best practices
Erfahrungen im Web-Design
Redesing von gungfu.de
Sachen, die ich bei der Umstellung von gungfu.de auf 'strukturelles' XHTML gelernt habe.
<blockquote>
<blockquote>
darf nicht direkt CDATA
enthalten (aus der XHTML1.0strict DTD):
<!ELEMENT blockquote %Block;>
<!ENTITY % Block "(%block; | form | %misc;)*">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
Zu viel <span>
Um Text klein zu machen gibt es <small> - Ich hatte bisher immer eine span-class definiert.Generated Content - erzeugte Inhalt - ID_anzeiger
Der 'generated content' bei Elementen mit ID wackelt nicht, wenn man den 'content' floaten lässt.Trotzdem muss in der entsprechenden Zeile noch genügend Platz für den GC sein! Generell denke ich, dass das Element, dass den GC enthalten soll, groß genug sein muss, den GC anzeigen zu können. Der nachfolgende Text wackelt z.B. bei den bebilderten <h1>-Elementen auf gungfu.de nicht.
Positionierung von Bildern
Man kann Bilder, d.h.<img>
direkt
positionieren. Wenn man also keine Bildunterschrift braucht, benötigt man kein <div>
um das
Bild zurecht zu rücken.
Generated Content - display:marker
Für die CSS-pseudo-Klassen
:after
und :before
gibt es eine Eigenschaft display: marker;
, die sich auf
den generated content auswirkt. Standardmäßig ist für diese beiden Klassen der Display-Wert
bereits marker
. Mehr dazu.
Inhalt von Listenelementen als Blocklevelelemente im IE
In den TableOfContents hat sich folgendes Layout-Problem ergeben:
So soll's aussehen: Opera7 und Mozilla Firebird 0.7 haben damit kein Problem
so sieht's beim InternetExplorer6 aus. Aus zunächst unerfindlichen Gründen werden die einzelnen ListItems gepadded.
<ul class="toc mLinks">
<li><a href="link.html">Link</a></li>
...
</ul>
Und so, vereinfacht, der CSS-Code:
ul.toc{width:50%;margin-left:auto;margin-right:auto;}
ul.toc li a{display:block;border:;padding:0 12px;}
ul.mLinks{float:left;width:auto;}
Ich hab versucht überall ein margin:0;padding:0;
einzufügen - ohne Erfolg.
Schließlich bin ich darauf gekommen, dass es am display:block;
des a-Elements liegt. Lässt
man's weg, verschwindet auch das 'padding'.
Lösung
Ich dachte zu erst, es gibt keine Lösung, da auch bei den Beispielen von Eric Meyer diese Unschönheit auftritt .
Doch: Es gibt eine Lösung! Nach dem Einfügen der markierten Codeschnippsel:
ul.toc li{display:inline;}
ul.toc li a{display:block;margin:0 0 5px 0;border:;padding:0 12px;}
sieht's auch beim IE schön aus!
Wie man auf den Bildern auch sehen kann: Der IE erzeugt nicht den hover-Effekt im <li>-Element. Aber das ist kein Problem. IE6 (und alle Vorgänger) können halt kaum CSS2.
Die vollständige Liste befindet sich z.B. auf dieser Linksammlung.
Versenden der Seiten als application/xhtml+xml
Durch Einfügen der Zeile AddType application/xhtml+xml html
in die
.htaccess
-Datei im Wurzelverzeichnis kann man den Server dazu veranlassen, alle Dateien, die die
Endung html
haben, als xhtml-Seiten an den Browser zu schicken.
Bei Seiten, die in XHTML-codiert sind, scheint dies nahe zu liegen.
Aus verschiedenen Gründen habe ich es sein lassen:
-
Opera hat einen Parser-Fehler gemeldet: auch nach Einfügen einer XML-Deklaration blieb der Fehler - dann allerdings in der zweiten Zeile ;-).
Ergebnis
Wenn ich die doctype-Deklaration einer anderen Seite (literarymoose.info) hernehme, die auch xhtml als application/xhtml+xml verschickt, dann gibt's keinen Parserfehler. Es liegt irgendwie also an dem <.
Seltsam.
Lösung (09.01.2004)
Offensichtlich ist die Doctype-Deklaration (zumindest für XHTML/XML) case-sensitive. Ist auch irgendwie logisch, da ja XML generell case-sensitive ist.
Auf jeden Fall funktioniert folgende Deklaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -
Weit schwererwiegend war jedoch die Tatsache, dass der InternetExplorer(6) als application/xhtml+xml verschickte Dateien (in der Standardkonfiguration) nicht darstellt.
Bei einer Seite, die zu mindestens 50% von IE-Benutzern betrachtet wird, könnte das verheerend sein.
Ergebnis
Das Web ist noch nicht bereit für application/xhtml+xml
.
Further Reading
Im Artikel A warning to others gibt es weitere interessante Informationen zum Thema.
hover-Effekt der Startseite für IE
Wenn man auf der Startseite über die Links geht, so erscheint ein Text über dem Bambushain. Das war bisher nur bei Opera, Mozilla, etc. so. Beim IE ging's nicht. Durch Abändern des XHTML und des CSS funktioniert's jetzt auch beim IE(6).
Alt
Der alte XHTML-Code (auszugsweise)
<ul id="abstract">
<li><a href="gungfu.html">gungfu?</a> <span>Was bedeutet 'gungfu'?
<br />
Sprachwissenschaftliche Erklärungsversuche...</span></li>
...
</ul>
und das CSS
ul#abstract span{line-height:1.4em;}
ul#abstract li{border:1px dotted black;width:130px;}
ul#abstract li:hover{border:1px solid black;}
ul#abstract span{display:none;}
ul#abstract li:hover span{display:block;position:absolute;border:1px solid black;}
ul#abstract a{display:block;width:100%;}
ul#abstract a:hover{background:white;}
Neu
Das Markup
<ul id="abstract">
<li><a href="gungfu.html">gungfu?<span>Was bedeutet 'gungfu'?
<br />
Sprachwissenschaftliche Erklärungsversuche...</span></a></li>
...
</ul>
das CSS
ul#abstract li{width:130px;}
ul#abstract a span{display:none;line-height:1.4em;}
ul#abstract a:hover span{display:block;position:absolute;border:1px solid black;color:black;}
ul#abstract a:hover{background:white;border:1px solid black;}
ul#abstract a{display:block;width:100%;border:1px dotted black;}
Zusammenfassung
In der alten Version wurde das <li> gestylt. Das kann der IE nicht (speziell das Tricksen mit dem <span>). In der neuen Version wird das <a> gestylt. Und das kann auch der IE.
XHTML
xml-Prolog in XHTML
Der (optionale) XML-Prolog<?xml version="1.0"
encoding="iso-8859-1"?>
sollte nicht am Anfang einer XHTML-Seite stehen, obwohl es sich bei einer
xhtml-Datei ja auch um eine xml-Datei handelt.
Steht der Prolog nämlich am Anfang einer Datei, so bringt er einige Browser (z.B. den IE6/Win) in den Quirks-Modus, und zwar, weil sie als erste Angabe in der Datei den Doctype erwarten. D.h. das XHTML wird wie schlecht geschriebenes HTML behandelt.
Einstellungen im HTML-Editor phase5 mit dem HTML-Tidy - Plugin
Ändert man im Plugin die Zeichenkodierung auf 'latin1' (iso-8859-1), so wird automatisch der (ungewollte) XML-Prolog eingefügt. Dieses Verhalten kann man nirgends abschalten.Erst der Wechsel auf die Zeichenkodierung 'ascii' oder 'utf8' lässt den Prolog nicht mehr auftauchen. Doch: phase5 kommt mit utf8 nicht zurecht. Bleibt also us-ascii... ;-(
us-ascii ist eine Untermenge von utf8.
Die Verwendung von numerischen Entities ist generell anzuraten.
Warum überhaupt XHTML?
Es gibt verschiedene Gründe von HTML auf XHTML zu wechseln:- XHTML wird von Browsern mit einem eigenen (XML-)Parser eingelesen. Dieser Parser ist etwas schneller
als der für HTML verwendete. Daher wird eine xhtml-Seite etwas schneller verarbeitet, als eine html-Seite.
Wie ist das möglich?
Die Restriktionen, an die sich ein XTHML-Dokument halten muss, sind stärker als die, an die ein HTML-Dokument gebunden ist. Das liegt hauptsächlich daran, dass XML, die Meta-Sprache, die XHTML definiert, diese 'Einschränkungen' verlangt. SGML, die HTML zugrundeliegende Meta-Sprache ist weit weniger restriktiv, dafür wesentlich komplizierter. - Alle modernen Browser verarbeiten XHTML in ihrem Standard-Modus. 'Standard' im Sinn von 'standardkonform'.
- Durch Verwendung von XHTML wird seitens der verarbeitenden Software (Browser oder generell: User
Agents) noch stärker, als dies z.B. bei bei HTML4.01strict der Fall war, der Verzicht
auf Darstellungs-Markup forciert.
Somit wird die Trennung von Darstellung (CSS) und Struktur (Markup) erreicht. - Diese Trennung ist neben den Vorteilen beim Entwickeln von Web-Seiten auch für Benutzer der Seiten
vorteilhaft, wenn diese keinen normalen Browser verwenden, sondern z.B. wegen einer Sehstörung sich den
Inhalt der Seite vorlesen lassen.
Generell gilt: Beim Einsatz von alternativen User Agents bietet die Trennung von Daten und Darstellung, z.B. durch die Verwendung von XHTML und CSS, Vorteile bei der Verarbeitung der Daten einer Seite. - XHTML ist der neue Standard des W3C und soll HTML ersetzen.
Zusammenfassung
XHTML im Vergleich zu HTML ist- schneller
- neuer Standard
- universeller
- zugänglicher (Accessibilty)
- praktischer (beim Entwickeln)
snippets
Block- und Inline-Elemente
<Pine.GSO.4.58.0312101619330.29323@korppi.cs.tut.fi>The distinction between block and inline is probably partly a consequence of the original design where <p> was definitely a paragraph separator (with no end tag allowed) and later decision to make the p element a container but allow </p> tag omission - which more or less implied that they needed to specify which tags implicitly close an open p element - and "block" was born.
Kommentare in <style>
undWhile CSS information inside the <style> tag should indeed be parsed as CSS, it is still a part of HTML and must be treated that way.
These comments are not necessary at all anymore, as anyone using such archaic browsers can't use the web anyway, and everyone should know that you close what you open.
In XHTML, the script and style elements are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as < and & will be recognized as entity references by the XML processor to < and & respectively. Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities.