Eines der tollsten Neuigkeiten von CSS3 ist die Möglichkeit, RGBA Farbwerte zu bentuzen. RGBA steht für RGB mit Alpha-Kanal. So ist es möglich, direkt einer Schrift oder einem Hintergrund eine halb-transparente Farbe zuzuordnen. Wir kennen schon schöne solcher Effekte von PNG-24 Bildern: Webseiten erhielten dadurch auf einfache Weise Tiefenwirkung. Auch die CSS-Regel “opacity” wurde für genau diese Zwecke eingeführt, doch ist RGBA der opacity-Regel meist vorzuziehen, denn opacity bezieht sich immer auf das ganze Objekt. Das heisst, auch die Schriften, welche im Block enthalten sind, werden transparent und somit schlechter leserlich. Mit RGBA ist es möglich, nur einem Hintergrund eine Transparenz zuzuweisen, ohne die Inhalte selber zu ändern. Wow!
Hier ein Beispiel, bei welchem RGBA-Werte für Textschatten eingesetzt werden:
Solche Dinge sind mit “opacity” kaum machbar.
Aber kommen wir zum eigentlichen Problem: Browsersupport bzw. der Internet Explorer. Firefox kann damit seit Version 3 und Safari seit Version 3.2.1 umgehen. Doch erst der IE9 kennt RGBA und viele Besucher benutzen noch eine ältere IE-Version.
Nun kann man entweder sagen “Selber Schuld” oder aber einen Weg suchen, RGBA auch in älteren Browsern zu unterstützen. Dazu gibt es einige Möglichkeiten, wobei insbesondere das Projekt CSS3 Pie zu erwähnen ist.
Doch leider klappte das bei einem meiner Projekte nicht. Das liegt wahrscheinlich daran, dass Inhalte per AJAX nachgeladen werden und so bestimmte Skripte nicht ausgeführt wurden. So machte ich mich daran, und erstellte von Grund auf eine eigene Lösung des Problems.
Dabei benutzte ich das jQuery Framework. Hier ist mein Code:
function fixIEAlpha(element,alpha) {
if (jQuery(element).children().length>1) {
jQuery(element).children().wrapAll('<div class="elementWrapper">');
}
else {
jQuery(element).children().addClass('elementWrapper');
}
jQuery(element).append('<div class="IEFixBG">');
var theBGColor=jQuery(element).css('background-color');
jQuery(element).css('position', 'relative');
jQuery('div.IEFixBG').css({
opacity: alpha,
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
'z-index': 0
});
jQuery('div.IEFixBG').css('background-color', theBGColor);
jQuery('div.elementWrapper').css({
'z-index':'100',
'position':'relative'
});
jQuery(element).css('background-color', 'transparent');
}
Die Funktion wird nun für IE kleiner neun mit den Argumenten:
element = zu korrigierendes Element (z.B. ‘#container’)
alpha = Alpha-Wert (zwischen 0 und 1)
aufgerufen.
Die Grundidee hinter der Funktion:
Alle Elemente innerhalb des Containers werden erst einmal in einen eigenen Container gepackt, der dann separat über die erhaltene Klasse “elementWrapper” angesprochen werden kann. Wenn es nur 1 Element gibt, kann man gleich diesem die Klasse angeben
if (jQuery(element).children().length>1) {
jQuery(element).children().wrapAll(‘<div class=”elementWrapper”>’);
}
else {
jQuery(element).children().addClass(‘elementWrapper’);
}
Nun wird ein neuer DIV-Container mit der Klasse “IEFixBG” erstellt und unten im eigentlichen Element eingefügt:
jQuery(element).append(‘<div class=”IEFixBG”>’);
Der DOM-Baum würde jetzt also z.B. folgendermassen aussehen:
<div id="container"> <div class="elementWrapper">…</div> <div class="IEFixBG"></div> </div>
Nun werden die entsprechenden Original-CSS Werte vom Haupt-Container geholt, damit man diese später dem IE-Hintergrund-Container mitgeben kann:
var theBGColor=jQuery(element).css(‘background-color’);
Jetzt folgen ein paar CSS-Definitionen:
jQuery(element).css('position', 'relative');
jQuery('div.IEFixBG').css({
opacity: alpha,
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
'z-index': 0
});
jQuery('div.IEFixBG').css('background-color', theBGColor);
jQuery('div.elementWrapper').css({
'z-index':'100',
'position':'relative'
});
jQuery(element).css('background-color', 'transparent');
- Damit der IE klare Anweisung hat, an welchem Element er alles weitere ausrichten soll, wird für das übergeordnete Element die Regel “position” auf “relativ” gestellt.
- Der IE-Hintergrund-Container wird nun absolut innerhalb dieses Elements positioniert und Grösse und Positionierung so angegeben, dass der Container genau über dem Hauptcontainer liegt. Anschliessend wird die Hintergrundfarbe, welche wir weiter oben abgefragt haben, definiert.
- Der Container-Inhalt (also der Original-Inhalt) wird mit “z-index” über den Hintergrund-Container gesetzt.
- Zu guter Letzt wird die Hintergrundfarbe des übergeordneten Containers auf “transparent” gesetzt.
Sieht vielleicht zuerst komplizierter aus, als es in Wirklichkeit ist. Auch bin ich mir sicher, dass bestimmte Dinge je nach Webseite angepasst werden müssen, oder aber auch wegfallen könnten.
So. Das war mein kleiner Exkurs in jQuery, Javascript, RGBA. Wenn ihr Anregungen oder Korrekturen habt, lasst es mich wissen.
Zur Info: obige Funktion wird nicht einfach so funktionieren, also macht nicht den Fehler und kopiert es einfach. Das liegt daran, dass der IE8 die Hintergrundfarbe aus dem CSS nicht abfragen kann, wenn diese schon als RGBA vorliegt. Bei mir ist die Farbe in RGB bzw. Hex-Code im CSS und wird danach (je nach Wunsch) zu RGBA transformiert:
function addBGAlpha(element,alpha) {
if (jQuery.browser.msie && (parseInt(jQuery.browser.version,10))<9 ) {
fixIEAlpha(element,alpha);
}
else {
var rgbVal=jQuery(element).css('background-color');
rgbVal=rgbVal.replace(/\s/g, "");
var rgbaVal=rgbVal.substring(0,rgbVal.length-1)+','+alpha+')';
rgbaVal=rgbaVal.replace('rgb', 'rgba');
jQuery(element).css('background-color', rgbaVal);
}
}