Überspringe Navigation

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):
  1. <!ELEMENT blockquote %Block;>
  2. <!ENTITY % Block "(%block; | form | %misc;)*">
  3. <!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 sieht der XHTML-Code aus: 
<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:

  1. 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">

  2. 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&#228;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&#228;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:
Zusammenfassung
XHTML im Vergleich zu HTML ist

snippets

Block- und Inline-Elemente

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.

<Pine.GSO.4.58.0312101619330.29323@korppi.cs.tut.fi>

Kommentare in <style>

While 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.

und

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 &lt; 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.

Übersicht

Redesign

XHTML

snippets