Deze cross browser (radiale) gradiënt background werkt in alle browsers en het javascript is valide volgens de JSLint-norm. Alle browsers gebruiken hun eigen "hebbelijkheden" om deze radiale gradiënt op het scherm te zetten. IE (t/m versie 8) gebruikt zijn "DXImageTransform.Microsoft.Alpha", IE9 kan overweg met standaard svg (on page!), Opera gebruikt inline svg en de overige strict browsers gebruiken hun "eigen" radial-gradient eigenschappen. Een kleine javascript-routine zorgt er voor dat alle browsers dezelfde data (voor wat betreft positie, kleur en afmeting) gebruiken in hun eigen routine. Om IE9 de svg niet extern, maar op dezelfde pagina te laten uitvoeren, is er een extra div toegevoegd (die zo laag als mogelijk in de body-sectie geplaatst moet worden). De procedure is "progressive enhancement". Als er geen javascript voorhanden is, zal niemand iets merken van het ontbreken van de radiale achtergrond.
Onder aan het javascript, staat bij de window.onload de regel
maak_radial_gradient_voor(['body', '#fa8072', '#ffffff', '500', 'boven_midden']);
body slaat op de tag die door het script aangesproken wordt, de twee #xxxxxx bepalen de kleurstelling van de gradiënt, de 500 dient voor de diameter van de radial (in pixels) en boven-midden bepaalt waar de radiale achtergrond op het scherm geplaatst moet worden. Natuurlijk kan je de radiale achtergrond op elke positie "neer zetten". In het script is er als voorbeeld een stukje code toegevoegd om aangepast_midden te definiëren. Gebruik dit als leidraad om andere positie's voor de achtergrond aan te maken. Verander in de opdracht-regel boven_midden in aangepast_midden (of één van jouw eigen bepalingen) om de positie te veranderen. Plaats het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina.
<p id="radial_gradient_voor_ie9"></p>
<script>
/*global document: false */
/*global window: false */
/*global navigator: false */
var svg, vertaal_de_data, ie9_radial, radial_ie9_gradient,
ie_browser = {
browser_versie: function () {
'use strict';
var de_versie = 999;
if (navigator.appVersion.indexOf("MSIE") !== -1) {
de_versie = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return de_versie;
}
};
function maak_voor_ie(radial_background) {
'use strict';
var positie_horizontaal, positie_verticaal,
creer_een_div,
begin_met_kleur = radial_background[1],
eindig_met_kleur = radial_background[2],
radius_background = radial_background[3],
een_element = radial_background[0] === 'body' ? document.body : document.getElementById(radial_background[0]);
if (radial_background[4] === 'boven_midden') {
positie_horizontaal = een_element.offsetWidth / 2 - radius_background;
positie_verticaal = -radius_background;
}
if (radial_background[4] === 'aangepast_midden') {
positie_horizontaal = een_element.offsetWidth / 2 - radius_background;
positie_verticaal = een_element.offsetHeight / 2 - radius_background;
}
creer_een_div = document.createElement('div');
creer_een_div.style.width = radius_background * 2;
creer_een_div.style.height = radius_background * 2;
creer_een_div.style.position = 'absolute';
creer_een_div.style.zIndex = '-1';
creer_een_div.style.top = '0px';
creer_een_div.style.left = '0px';
creer_een_div.style.marginLeft = positie_horizontaal;
creer_een_div.style.marginTop = positie_verticaal;
creer_een_div.style.backgroundColor = begin_met_kleur;
creer_een_div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2)';
een_element.appendChild(creer_een_div);
een_element.style.backgroundColor = eindig_met_kleur;
}
function maak_voor_opera(radial_background) {
'use strict';
var x_hoogte, x_breedte, positie_horizontaal, positie_verticaal,
een_element = radial_background[0] === 'body' ? document.body : document.getElementById(radial_background[0]),
begin_met_kleur = radial_background[1],
eindig_met_kleur = radial_background[2],
radius_background = radial_background[3],
verticale_start = radius_background - (radius_background * 2);
if (radial_background[0] === 'body') {
x_breedte = document.body.clientWidth;
x_hoogte = document.body.clientHeight;
} else {
x_breedte = document.getElementById(radial_background[0]).offsetWidth;
x_hoogte = document.getElementById(radial_background[0]).offsetHeight;
}
if (radial_background[4] === 'boven_midden') {
positie_horizontaal = ((x_breedte) / 2) - (radius_background);
positie_verticaal = verticale_start;
}
if (radial_background[4] === 'aangepast_midden') {
positie_horizontaal = ((x_breedte) / 2) - (radius_background);
positie_verticaal = ((x_hoogte) / 2) - (radius_background);
}
svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="' + (radius_background * 2) + 'px" height="' + (radius_background * 2) + 'px"><defs><radialGradient id="rg" cx="50%" cy="50%" r="100%"><stop stop-color="' + begin_met_kleur + '" offset="0%"></stop><stop stop-color="' + eindig_met_kleur + '" offset="50%"></stop></radialGradient></defs><rect style="fill:url(#rg);" width="' + (radius_background * 2) + 'px" height="' + (radius_background * 2) + 'px"/> </svg> ';
vertaal_de_data = window.btoa(svg);
een_element.style.background = 'url("data:image/svg+xml;base64,' + vertaal_de_data + '") no-repeat ' + eindig_met_kleur + ' ' + positie_horizontaal + 'px ' + positie_verticaal + 'px';
}
function maak_voor_overige_strict_browsers(radial_background) {
'use strict';
var de_eerste_positie, de_tweede_positie,
een_element = radial_background[0] === 'body' ? document.body : document.getElementById(radial_background[0]),
radius_background = radial_background[3];
if (radial_background[4] === 'boven_midden') {
de_eerste_positie = 'center';
de_tweede_positie = 'top';
}
if (radial_background[4] === 'aangepast_midden') {
de_eerste_positie = 'center';
de_tweede_positie = 'center';
}
een_element.style.background = '-webkit-gradient(radial, ' + de_eerste_positie + ' ' + de_tweede_positie + ', 0, ' + de_eerste_positie + ' ' + de_tweede_positie + ', ' + radial_background[3] + ', from(' + radial_background[1] + '), to(' + radial_background[2] + '))';
een_element.style.background = '-moz-radial-gradient(' + de_tweede_positie + ' ' + de_eerste_positie + ' ,circle farthest-side,' + radial_background[1] + ' 0%,' + radial_background[2] + ' ' + radius_background + 'px)';
}
function maak_voor_ie9(radial_background) {
'use strict';
var positie_horizontaal, positie_verticaal,
begin_met_kleur = radial_background[1],
eindig_met_kleur = radial_background[2],
radius_background = 2 * (radial_background[3]),
een_element = radial_background[0] === 'body' ? document.body : document.getElementById(radial_background[0]);
if (radial_background[4] === 'boven_midden') {
positie_horizontaal = een_element.offsetWidth / 2 - (radius_background / 8);
positie_verticaal = 0;
}
if (radial_background[4] === 'aangepast_midden') {
positie_horizontaal = een_element.offsetWidth / 2 - (radius_background / 8);
positie_verticaal = 50;
}
ie9_radial = '<svg>' + '<defs>' + '<radialGradient id="radial_gradient_ie9" cx="' + 50 + '%" cy="50%" r="50%"' + 'fx="50%" fy="50%">' + '<stop offset="0%" style="stop-color:' + begin_met_kleur + '; ' + 'stop-opacity:1"/>' + '<stop offset="50%" style="stop-color:' + eindig_met_kleur + '; ' + 'stop-opacity:0.0"/>' + '</radialGradient>' + '</defs>' + '<ellipse cx="' + 50 + '%" cy="0%" rx="' + radius_background + 'px" ry="' + radius_background + 'px"' + 'style="fill:url(#radial_gradient_ie9)"/>';
radial_ie9_gradient = document.getElementById('radial_gradient_voor_ie9');
radial_ie9_gradient.style.position = "absolute";
radial_ie9_gradient.style.top = positie_verticaal + "%";
radial_ie9_gradient.style.left = positie_horizontaal + "px";
radial_ie9_gradient.style.zIndex = "-1";
radial_ie9_gradient.innerHTML = ie9_radial;
}
var de_user_agent = navigator.userAgent.toLowerCase();
function maak_radial_gradient_voor(radial_background) {
'use strict';
if ((!window.opera && de_user_agent.indexOf("msie") !== -1) && (ie_browser.browser_versie() < 9)) {
maak_voor_ie(radial_background);
} else if (window.opera) {
maak_voor_opera(radial_background);
} else if ((!window.opera && de_user_agent.indexOf("msie") !== -1) && (ie_browser.browser_versie() > 8)) {
maak_voor_ie9(radial_background);
} else {
maak_voor_overige_strict_browsers(radial_background);
}
}
window.onload = function () {
'use strict';
maak_radial_gradient_voor(['body', '#fa8072', '#ffffff', '500', 'boven_midden']);
};
</script>