Introduction
Infos
Il existe une technique qui consiste à mettre en javascript dans l'attribut class de la balise html un nom de propriété CSS et de le préfixer par no- quand cette dernière n'est pas reconnue par le navigateur.
Cette technique vous permet en CSS de prévoir les deux cas, le cas où la propriété est reconnue et le cas où la propriété n'est pas reconnue.
.propriete #moblock{}
.no-propriete #moblock{}Par exemple, nous voulons tester la propriété css box-sizing. Voici le code HTML de la balise HTML au départ :
<html class="">Si après nos tests javascript la propriété css box-sizing est reconnue on obtient :
<html class="boxsizing">sinon :
<html class="no-boxsizing">Vous devrez avoir dans votre feuille de style :
.boxsizing #moblock{}
.no-boxsizing #moblock{}Fonction pour ajouter à l'attribut class
Voici, un exemple de fonction qui va vous permettre d'ajouter une propriété dans l'attribut class de la balise html.
La fonction addClass accepte comme paramètres :
- sPropriete, valeur de type String qui représente est le nom de la propriété.
- bTest, valeur de type Boolean, pour la valeur false la propriété sera préfixée de 'no-'.
function addClass(sPropriete, bTest){
var sPropriete = sPropriete.toLowerCase(),
sNewClass = (bTest ? '' : 'no-') + sPropriete,
bFind=false,
aPropExist = document.documentElement.className.split(' ');
for (var i in aPropExist) {
if(bTest){
if(aPropExist[i] == sPropriete){bFind=true;break;}
else if(aPropExist[i] == 'no-'+sPropriete){ aPropExist[i] = sPropriete;bFind=true;break;}
}else{
if(aPropExist[i] == sNewClass){bFind=true;break;}
else if(aPropExist[i] == sPropriete){ aPropExist[i] = 'no-'+sPropriete;bFind=true;break;}
}
}
if(!bFind){ aPropExist.push(sNewClass); }
document.documentElement.className = aPropExist.join(' ');
}Les tests des propriétés en javascript
box-sizing CSS
La propriété CSS box-sizing n'est pas reconnue par tous les navigateurs. Il est donc nécessaire à mon avis de pouvoir proposer une alternative.
Dans cette fonction, nous testons aussi les propriétés préfixées telles que -moz-box-sizing ou -webkit-box-sizing.
Et si on est en compatMode supérieur à Internet Explorer 7.
La fonction boxSizingTest renvoi une valeur de type Boolean :
- true, la propriété box-sizing ou une de ses versions préfixées est comprise,
- false, la propriété box-sizing et ses versions préfixées se sont pas comprises,
function boxSizingTest(){
var aJsPre = ('Webkit Moz O ms').split(' '),
sjPro = 'boxSizing',
aJsCssPre = (sjPro + ' ' + aJsPre.join(sjPro + ' ') + sjPro).split(' ');
docElement = document.documentElement,
myDiv = document.createElement('div');
for (var i in aJsCssPre) {
var sProp = aJsCssPre[i];
if (myDiv.style[sProp] !== undefined && (document.documentMode === undefined || document.documentMode > 7)) {
return true;
}
}
return false;
}
addClass('boxsizing', boxSizingTest());.boxsizing #moblock{}
.no-boxsizing #moblock{}box-shadow CSS
La propriété CSS box-shadow n'est pas reconnue par tous les navigateurs. Il est donc nécessaire à mon avis de pouvoir proposer une alternative.
Dans cette fonction, nous testons aussi les propriétés préfixées telles que -moz-box-shadow ou -webkit-box-shadow.
Et si on est en compatMode supérieur à Internet Explorer 7.
La fonction boxShadowTest renvoi une valeur de type Boolean :
- true, la propriété box-shadow ou une de ses versions préfixées est comprise,
- false, la propriété box-shadow et ses versions préfixées se sont pas comprises,
function boxShadowTest(){
var aJsPre = ('Webkit Moz O ms').split(' '),
sjPro = 'boxShadow',
aJsCssPre = (sjPro + ' ' + aJsPre.join(sjPro + ' ') + sjPro).split(' ');
docElement = document.documentElement,
myDiv = document.createElement('div');
for (var i in aJsCssPre) {
var sProp = aJsCssPre[i];
if (myDiv.style[sProp] !== undefined && (document.documentMode === undefined || document.documentMode > 7)) {
return true;
}
}
return false;
}
addClass('boxshadow', boxShadowTest());.boxshadow#moblock{}
.no-boxshadow#moblock{}border-radius CSS
La propriété CSS border-radius n'est pas reconnue par tous les navigateurs. Il est donc nécessaire à mon avis de pouvoir proposer une alternative.
Dans cette fonction, nous testons aussi les propriétés préfixées telles que -moz-border-radius ou -webkit-border-radius.
Et si on est en compatMode supérieur à Internet Explorer 7.
La fonction borderRadiusTest renvoi une valeur de type Boolean :
- true, la propriété border-radius ou une de ses versions préfixées est comprise,
- false, la propriété border-radius et ses versions préfixées se sont pas comprises,
function borderRadiusTest(){
var aJsPre = ('Webkit Moz O ms').split(' '),
sjPro = 'borderRadius',
aJsCssPre = (sjPro + ' ' + aJsPre.join(sjPro + ' ') + sjPro).split(' ');
docElement = document.documentElement,
myDiv = document.createElement('div');
for (var i in aJsCssPre) {
var sProp = aJsCssPre[i];
if (myDiv.style[sProp] !== undefined && (document.documentMode === undefined || document.documentMode > 7)) {
return true;
}
}
return false;
}
addClass('borderradius', borderRadiusTest());.borderradius#moblock{}
.no-borderradius#moblock{}content CSS
La génération de texte avec la propriété CSS content via le sélecteur :after ou :before n'est pas reconnue par tous les navigateurs. Il est donc nécessaire à mon avis de pouvoir proposer une alternative.SELECTEUR:after{content:"texte";}
La fonction textContent renvoi une valeur de type Boolean :
- true, la génération de texte avec content est comprise,
- false, la génération de texte avec content n'est pas comprise,
function textContent(){
var sStyle ='<style id="textContentcss">#textContent{font:0/0 a}#textContent:after{content:"(!)";font:3px/1 a}</style>',
bool=false,
docElement = document.documentElement,
myDiv = document.createElement('div');
myDiv.id = 'textContent';
docElement.appendChild(myDiv);
myDiv.innerHTML += sStyle;
bool = myDiv.offsetHeight >= 3;
docElement.removeChild(myDiv);
return bool;
}
addClass('contenttext', textContent());.contenttext#moblock{}
.no-contenttext#moblock{}