Seit dem 16. September steht nun die Beta Version des Internet Explorers 9 zu Download bereit. Leider konnte ich diese Version noch nicht testen, da ich hier mit einem XP System arbeite und die Version 9 nur für Vista und Windows 7 ausgeliefert wird.

Mit dem Internet Explorer 9 stellen wir die Internetseite selbst in den Mittelpunkt. Im Zeitalter des Cloud Computing ist der Browser nicht mehr nur das Fenster zum Internet. Vielmehr soll er dem Anwender eine Umgebung bieten, über die er das Web, seine Inhalte, Anwendungen und Dienste in erstklassiger Qualität, so realitätsnah wie möglich, schnell und sicher nutzen und erleben kann.
[Dr. Dorothee Ritz, General Manager Consumer & Online, Microsoft Deutschland]

Download IE9 Beta

Probiert es aus und “erlebt das Internet neu”. Ob das Internet mit IE9 schneller, einfacher und ansprechender ist, sei mal so dahingestellt. Ich werde Euch in nächster Zeit einen Erfahrungsbericht geben, wenn ich den Browser auf einem Vista System getestet habe.

The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ”
[Roger Johansson]

Jaja, die ewige CSS / IE Problematik…hier ein paar Lösungsansätze von R. Johansson : )

CSS tips and tricks, Part 1 [Englisch]

CSS tips and tricks, Part 2 [Englisch]

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)

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);

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;

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.