Transparenz, Farbe und Benutzereinstellungen

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Mit einem Trick können wir für jedes Element einzeln sicherstellen, dass seine Hintergrundfarbe identisch mit der des body-Elements ist. Dafür benötigen wir nur eine Stilregel, in der background-color mit transparent definiert wird. In unserem Beispiel legen wir sie für eine Klasse an, die wir transbox nennen, denn mit ihr kann man die Hintergrundfarbe einer jeden Box auf der Seite einfach auf transparent umschalten:

Die Eigenschaft background-color ist auch standardmäßig immer auf transparent gesetzt und wird nicht vom Vaterelement vererbt. Ein Hintergrundbild zum Beispiel muss dadurch nicht extra noch einmal jedem einzelnen Element zugeordnet werden, um auf der Seite durchgehend angezeigt zu werden.

Wenn jedoch ein Element einen farbigen Hintergrund zugewiesen bekommt, vererbt es diese Eigenschaft an alle untergeordneten Elemente weiter. Möchten wir das für ein bestimmtes Element verhindern, weisen wir es einfach der Klasse unserer Stilregel transbox zu. Der vererbte Wert wird überschrieben und der Hintergrund ist wieder durchsichtig bis zur body-Einstellung.

Besonders knifflig sind Hintergrundfarben, wenn Benutzer ihre eigenen Einstellungen im Browser vornehmen. Sämtliche Hintergrundfarben und -bilder werden damit einfach außer Kraft gesetzt. (Anmerkung: Im IE5 für Macintosh werden automatisch sämtliche Stilregeln und HTML-Attribute durch das lokale Stylesheet des Benutzers überschrieben. Im IE6 für Windows hingegen passiert dies nur, wenn der Benutzer ein lokales Stylesheet anlegt und ausdrücklich anweist, dass sein Stylesheet immer Vorrang haben soll. Der Netscape Navigator für Windows bietet dem Benutzer zwar erst gar nicht an, ein lokales Stylesheet anzulegen, berücksichtigt aber Vorgaben in einer editierbaren CSS-Datei namens ua.css. Der Netscape Navigator für Macintosh akzeptiert auch diesen Umweg nicht und erkennt prinzipiell keine lokalen Stylesheets an.) Zum Glück machen aber nur wenige Benutzer von Voreinstellungen Gebrauch, sodass den CSS-Anweisungen unserer Seiten normalerweise nichts entgegensteht und Browsereinstellungen nur für die Elemente zum Tragen kommen, für die keine CSS-Regeln definiert wurden. Nehmen wir folgendes Beispiel: Der Vorgabewert für die Hintergrundfarbe sei auf Grau oder Weiß gesetzt. Gibt man nun als Hintergrundfarbe für body den Wert transparent an, ist alles möglich. In solchen Fällen ist die Ausgabe nicht definiert, wie das W3C in seiner Spezifikation ausführt.