Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03550.jsonl.gz/18

Mit transparenten Elementen im Web zu arbeiten ist ja leider mit einigen Hürden verbunden…
Problematik
Einerseits liegt es in der Vererbung des Elternelementes an die darunter liegenden Kinder und andererseits an den Browser (Hauptsächlich die Internet Explorer Reihe – wie kann es auch anders sein), die diese opacity-Deklarierungen unterschiedlich interpretieren.
Lösungsansätze
Es gibt viele Wege in der Webprogrammierung um ans Ziel zu gelangen, nur welche ist die ökonomischte und Cross-Browsertauglichste?
1. CSS: Opacity
Der einfachste erdenkliche Weg ist natürlich das gewünschte Element mit CSS Transparenz zu verleihen. Leider geht dies nur in neuen Browsern und auch nur mit mehreren Deklarierungen:
Für alle anderen Browser (Hier wird der Wert von 0 – 1 Definiert)
opacity: 0.5;
Für alle Internet Explorer (Hier wird der Wert von 0 – 100 definiert)
Damit diese Deklarationen in allen IE funktionieren muss unbedingt diese Reihenfolge eingehalten werden:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: alpha(opacity=50);
Wie schon oben erwähnt stellt sich bei dieser CSS-Technik das Problem der Vererbung. Versehe ich also ein Element mit 50% Transparenz und füge dem Element einen Paragraphen mit Text hinzu, wird der Text folglich auch mit der Transparenz versehen (Siehe Beispiel)
Dieser Text ist schwarz definiert, wird aber durch die Vererbung 50% Transparent.
Workaround
Für das Vererbungsproblem gibt es aber einen Workaround, der in gewissen Fällen funktioniert. Es wird das transparent gesetzte Element einfach aus dem Dokumentenfluss enfernt und dann wieder richtig positioniert. Das wird einfach mit der CSS-Deklaration position: absolute; bewerkstelligt. Damit die Elemente in der richtigen Reihenfolge übereinander sitzen fügt man diesen noch einen z-index hinzu. Beispielseite
2. PNG Alpha
Ein weiterer Weg ist es mit PNG-Grafiken zu arbeiten und diese dann zusätzlich per Script für ältere IE Browsertreihen interpretierbar zu machen wie zum Beispiel mit dem IE PNG Alpha FIX oder mit folgender CSS-Deklaration für den IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bildname.png’);
wobei auch diese nur eingeschränkt nutzbar ist. Beispielseite. Justin Koivistc hat ein Script (KOIVI PNG Alpha IMG Tag Replacer) geschrieben das diesen Filter per PHP aufruft und den IMG Tag ersetzt.
3. RGBA
Letzte Woche dachte ich es gäbe eine weitere Möglichkeit der CSS deklarierten, grafikfreien Transparenz. Leider funktioniert diese Variante nur im Firefox 3, neue Versionen des Operas (9.22+) und Safari (2.0+). Der Internet Explorer (5.5+) erkennt rgba() nicht als valide background-color. Dennoch gibt es für die IE Reihe eine Möglichkeit mit RGBA-Ähnlichem Prinzip zu arbeiten. Mit der Gradient Komponente lässt sich derselbe Effekt erzielen.
Beispiel RGBA
Firefox 3, Opera 9.22+, Safari 2.0+
background:rgba(0, 0, 0, 0.30);
Dieses Element ist für FF3, Opera und Safari mit RGBA gefärbt und auf 70% Transparenz gesetzt.
Die Hintergrundfarbe der obigen Box ist also statt mit Hexadezimalwerten, mit dem rgba-Werten definiert. Neben Rot (r), Grün (g), Blau (b) wird noch ein weiterer vierter Wert mitgegeben, der Alphawert, in unserem Falle nun 0.30 für 70% Durchsicht. Mit dem Alphakanal definiert den Transparenzwert wobei 0 maximale und 1 minimale Durchsicht zulässt. Wie schon erwähnt versteht der Internet Explorer diese Alphainterpretation nicht als valide und ignoriert diese Deklaration komplett.
Beispiel RGBA anhand des Gradient Filters
IE 5.5+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70000000,endColorstr=#70000000);
zoom: 1;
Dieses Element ist für den Internet Explorer mit Gradient gefärbt und auf 70% Transparenz gesetzt.
Bei der Verwendung des Gradientfilters setzt einfach den Anfang und Endwert auf den selben Farb- und Transparentwert. Der Farbwert wird in folgender Reihenfolge eingegeben: #AARRGGBB
Fazit
Es ist also schon Möglich (mit Trickserei) transparente Elemente zu erzeugen. Man würde sich aber wünschen das auch hier klare Standarts geschaffen würden die in allen einheitlich Browsern valide verstanden und richtig interpretiert würden. Die oben genannten Beispiele sind meine bisherigen Erfahrungen die ich zum Thema Transparenz gesammelt habe. Falls Ihr noch weitere Möglichkeiten gefunden habt könnt Ihr mir diese gerne senden.