Der CSS-Validator mag meinen Reset nicht

Gleich vorab, es geht hier nicht um den Abspielschutz™ auf DVDs, sondern um die Cascading Style Sheets, die sich die Abkürzung CSS mit dem genannten DRM-System teilen.

Ein Stolperstein, der vielen bei der Erstellung von Stylesheets einige Kopfschmerzen bereitet, ist die Tatsache, dass Webbrowser vielen Entities präventiv schon mal einen Style zuweisen. Macht auch Sinn, auf diese Art und Weise erspart man sich so manche Definition – solange man sich das Ergebnis nur im gleichen Browser ansieht. Das perfide an den voreingestellten Styles ist, dass sie sich von Browser zu Browser minimal unterscheiden (manchmal auch mehr als minimal). Soll heissen, man kann sich einen Wolf programmieren, die schönste typographische Kaskade entwickeln, und beim Betrachten in einem anderen Browser trifft einen der Schlag. Was ist also zu tun?Sich mit “made for [irgendein Browser]” herauszumogeln, macht das Ganze auch nicht besser. Wirft eher ein schlechtes Licht auf den / die Web-Designer(in).

Einfach das Naheliegende, am besten alle Entities am Beginn des ersten Stylesheets auf einen definierten Anfangswert setzen. Wer das sagt? Eric Meyer, und der sollte wissen wovon er redetIch habe das Gefühl, dass man Leuten mit diesem (oder ähnlich klingendem) Vornamen vertrauen sollte, Sie nicht auch? . Auf seiner Website meyerweb.com (Pflichtlektüre für alle die sich mit CSS befassen) findet sich ein Beitrag mit dem Titel Reset Reloaded, welcher ein Beispiel für das Rücksetzen der eingestellten Browserwerte enthält. Meine Variante sieht so aus:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
/* background-image: transparent; */
background: transparent;
}


Wer die von mir ausgelassene Entity auf den ersten Blick entdeckt, gewinnt keinen Preis, aber meine Hochachtung. Geübten CSSlern(innen) erschliesst sich dieser Rundumschlag sofort, jegliche “Hilfestellung” des Browsers wird ausgehebelt, man beginnt mit dem sprichwörtlichen weissen Blatt Papier. Das hat den Nachteil, dass man wirklich alles selbst definieren muss, und den Vorteil, dass man die totale Kontrolle über das Erscheinungsbild der Website behält.

Ich möchte hier keine Debatte über Sinn oder Unsinn dieser Vorgehensweise vom Zaun brechen, ich halte es so, wer dazu keine Lust hat, bekommt zwar nicht meinen Segen, aber soll doch tun und lassen was er / sie will, oder “jede(r) wie er / sie magKennt jemand eine Öko-Bilanz über die CO₂-Belastung durch zusätzlich übertragenen Netzwerk-Pakete wegen politisch korrektem Schreibens? Wenn ja, bitte E-Mail an mich, danke. “.

Mein nächster Schritt, nach dem Erstellen oder Modifizieren eines Stylesheets, führt mich zu dem W3C CSS Validation Service, oder über den Web Developer Toolbar in FireFox, zum gleichen Ziel. Wenn sich schon jemand die Arbeit gemacht hat, warum sollte ich das CSS mühsam per eigenem Augenschein überprüfen? (Ausserdem wird man “betriebsblind” wenn man zu lange auf den eigenen Code starrt. ) Also lasse ich den Validator über mein CSS laufen, und was passiert? Zwei Tippfehler und das:

Parse Error – html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; background-image: transparent; }

Der Code ist valide, anscheinend ist der Validator nur durch die schiere Anzahl von Entities einfach überfordert. Oder sollte jemand bei der W3C etwas gegen Resets haben? Ich für meinen Teil “resette” auf jeden Fall munter weiter.

Edit: Danke an Mike, ich hatte tatsächlich einen Fehler im Reset, es muss background: transparent; heissen. Der Fehler ist im Code oben auskommentiert.

Technorati Tags: CSS-Validator, CSS Reset, CSS, Cascading Style Sheets