CSS-Checkliste

Im Nachhinein und Live-Betrieb meines neuen Layouts ist mir aufgefallen, dass ich für ein paar Elemente das Styling völlig vergessen habe. Dadurch kam ich auf die Idee, eine Liste zu mit den wohl meist gebrauchten Elementen zu schreiben.

Elemente zur Dokumentstrukturierung:

div im Zusammenspiel mit aussagekräftigen IDs wie zum Beispiel <div id="#content">

Überschriften zur Dokumentgliederung

h1, h2, h3, h4, h5, h6

Absätze

p

Links und verschiede Link-Zustände

a(:link), a:visited, a:focus, a:hover, a:active.
Diese Reihenfolge sollte man sich einprägen, beispielsweise durch den Satz Lord Vaders former handle, Anakin. Siehe auch Website in an hour von Andrew Krespanis.

hervorgehobene Textstellen

em, strong

Abkürzungen

abbr, acronym

ungeordnete Listen (Ulli)

ul, li

geordnete Listen (Olli)

ol, li

Definitionslisten

dl, dt, dd

Zitate

q, blockquote, cite

gelöschten und nachträglich eingefügten Text

del, ins

Tabellen

table, caption, thead, tfoot, tbody, tr, th, td

diverse Elemente zum Anzeigen von Code

code, pre*, var, kbd.
==* = mehr oder weniger =

weitere logische Textauszeichnungen

samp, dfn

Ich habe selber noch nicht alle Bestandteile in mein Stylesheet eingebaut, das wird sich aber sicherlich noch ändern, ein entsprechender Aufruf zur Cache-Aktualisierung wird dann auch folgen ;)

Nur, wenn sich kein passendes Element finden lässt, kann man außerdem auf das span-Element zurückgreifen, bei der Wahl eines Klassennamens ist es wichtig, die Funktion des Elements und nicht das Aussehen zu benutzen. Es kann ja immer mal passieren, dass .greenText plötzlich rot sein soll.

Im Hinblick auf XHTML 2 sei drauf hingewiesen, dass dort viele neue Elemente hinzukommen und Links nicht mehr zwingend mit dem <a>-Element ausgezeichnet werden müssen. Da XHTML 2 bisher nur als Entwurf fungiert, können sich selbst hier noch Änderungen ergeben.