Guten Morgen!

Heute bin ich extra früh aufgestanden (ja – um 9:00 Uhr ist sehr früh) um euch einen neuen Eintrag im Adventskalender zu schreiben. Naja jedenfalls gehts heute um das kleine Wort transparent, das – wie ihr sicherlich wisst – an sich nichts Neues ist. ABER in der Verbindung mit dem anderen kleinen Wort color durchaus etwas Neues darstellt.

Browserunterstützung

Browser
ab Version	3.0	3.1	10.0	1.0	9.0

Ja transparent sollte euch zumindest schon einmal begegnet sein.. vermutlich im Zusammengang mit background oder ganz speziell als background-color. Außerdem kann man es auch als border-color benutzen, beides geht seit CSS2.

Als Wert für Color allerdings ist es erst in CSS3 “erlaubt”, deswegen ist die Unterstützung im IE auch recht dürftig. Nichtsdestotrotz will ich euch die Vorzüge dieser Variante nicht vorenthalten.

Beispiel

Viele von euch kennen sicherlich das leidige Thema Image Replacement. Jens Meiert hat mal eine Übersicht mit so ziemlich allen bis dato bekannten Methoden auf- und vorgestellt (kann ich nur empfehlen mal zu lesen), mit denen man Text durch Bilder ersetzen kann. Seine, ich nenne es jetzt mal Favoriten sind demnach die..

[...] Phark-Methode, bedingt durch ihre Einfachheit, und SIIR, bedingt durch ihr Potential [...]

Da die Phark-Methode die einzige von beiden ist, die ausschließlich mit CSS zu realisieren ist, ist sie mein Favorit.

Wie ich vor einer ganze Weile bei Twitter schonmal schrieb, hat color:transparent im Prinzip einen richtig guten Anwendungsfall: Die prima Phark-Methode wird sauberer, indem text-indent wegfällt. Also lautet der Code für halbwegs gutes Image Replacement in guten Browsern ab jetzt so (zumindest bei mir):

HTML

1

<h1>Firefox</h1>

CSS

1
2
3
4
5
6

h1 {
	background:url(firefox.png);
	color:transparent;
	height:150px;
	width:150px;
}

Ergebnis

Firefox

Von der Schrift “Firefox” ist nichts mehr zu sehen, außer man markiert die ganze Überschrift. Übrigens könnte man auch rgba(0,0,0,0) nehmen, quasi das Äquivalent zu transparent.

Der Fallback im IE ist die Farbe Schwarz, was aber Mozilla nicht davon abhält es einzusetzen. Schönen dritten Dezember noch!