HTML 5, CSS 3 c’est bien beau, ça rend bien service et c’est sympa… malheureusement, tout n’est pas parfait au pays des rêves car de nombreux utilisateurs (vos lecteurs et utilisateurs) ne peuvent pas profiter de ces nouveaux attributs HTML et CSS.
Il est important de penser « utilisateurs ». Les modifications apportées par HTML 5 et CSS 3 ne sont pas encore implémentées par tous les navigateurs. Ne pouvant pas forcer tout le monde à utiliser un seul navigateur, il faut s’efforcer de prendre en compte cet compatibilité.
Comment pouvons nous vérifier cette compatibilité, comment savoir quel navigateur est compatible avec tel attribut HTML ou CSS ? C’est ce que je vous propose de voir dans cet article.
Solution Javascript
Une des première solution consiste à utiliser javascript pour vérifier
<script>
alert( 'pattern' in document.createElement('input') ) // boolean;
</script>
Si vous mettez ce simple script sur votre page, vous déclencherez une alerte « true » ou « false » selon les navigateurs.
Alerte sur un navigateur supportant l'attribut Pattern
Alerte sur un navigateur ne supportant pas l'attribut Pattern
C’est un moyen simple mais assez contraignant de vérifier la compatibilité de tel ou tel attribut…
Commentaires conditionnels
Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d’inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l’une ou l’autre de ses versions.
Techniquement, il s’agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s’il doit interpréter le contenu du commentaire ou bien l’ignorer.
<!--[if gte IE 6]> pour IE 6.0 et version plus récentes <![endif]--> <!--[if IE 5.0]> pour IE 5.0 <![endif]--> <!--[if IE 5.5000]> pour IE 5.5 <![endif]--> <!--[if IE 6]> pour IE 6.0 <![endif]--> <!--[if IE 7]> pour IE 7.0 <![endif]--> <!--[if IE 8]> pour IE 8.0 <![endif]--> <!--[if gte IE 7]> pour IE 7 et supérieur <![endif]--> <!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]--> <!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 mais pas IE7.0 <![endif]-->
Cette technique a le mérite d’exister, surtout lorsque l’on connait les différences qu’il existe entre IE et les autres navigateurs mais, elle ne s’applique que à Internet Explorer et elle devient vite lourde à gérer…
Class Modernizr
Modernizr ajoute classes à l’élément
qui vous permettent de cibler les fonctionnalités du navigateur spécifique dans votre feuille de style. Vous n’avez pas réellement besoin d’écrire du Javascript pour l’utiliser.
Initialisation :
Il suffit de lier la bibliothèque dans votre doument HTML :
<head> <script type="text/javascript" src="medias/modernizr-1.5.min.js"></script> </head>
Voici un exemple concret concernant l’attribut « border-radius » qui n’est pas disponible sur IE… Eh bien, avec Modernizr vous pouvez accomplir tout cela! La syntaxe est très intuitive, aussi:
Code HTML
<div class="radius"> <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis fermentum quam, ut feugiat dui ornare eu. Aenean vitae purus eget nunc sagittis sollicitudin eget a lorem.</span></p> </div>
Feuille de style CSS :
.radius p span{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display:block;
width:300px;
}
.borderradius p span{
border:1px solid #cc3300;
}
.no-borderradius p span{
border:1px solid #000;
}
L’opération est simple, vous déclarer une class « .[mon attribut] » ou « .no-[mon atribut] » dans votre feuille de style pour gérer les différentes compatibilité…
Border Radius sous firefox
Border radius sous IE après mise en forme via ".no-borderradius"
Il est également possible d’appliquer des conditions sur des éléments javascript. Voici un exemple concernant « localStorage »
<script>
if (Modernizr.localstorage){
// Utilisez tous les avantages de localStorage
} else {
// Passez par les Cookies
}
</script>
Cette bibliothèque ne répond surement pas à toutes les problématiques mais elle mérite que l’on s’y arrette. Elle est simple d’utilisation et bien documentée
Pour télécharger « Modernizr », rendez-vous sur le site de l’auteur : http://www.modernizr.com/.
Conclusion
Il n’existe pas de solution parfaite, cela dit, vous disposez de différentes techniques qui vous permettrons d’adapter vos pages Web sur tous les navigateurs. Vous pouvez également orienter vos utilisateurs à utiliser un autre navigateur.
<script>
$(document).ready(function(){
if ($.browser.msie) {
$("#topMsg").html("Votre navigateur n'est pas compatible avec ce site, certaines fonctiionalités et styles seront desactivés. Changer pour <a href=\"http://www.mozilla-europe.org/fr/firefox/\">firefox</a> ou <a href=\"http://www.apple.com/fr/safari/\">Safari</a> ?");
}
});
</script>
-----
<p id="topMsg">
</p>
A bientôt…
#1 by Sylvain on 14 août 2010 - 13 h 39 min
Hello !
Pour une meilleure compatibilité CSS3 avec IE, j’utilise css3pie (http://css3pie.com/) une solution très simple à mettre en place et qui gère pas mal de règles CSS3, il reste les vilains filtres Microsoft pour le reste.
Bonne continuation.