Utiliser HTML5 et CSS3 sans se sentir coupable
Développement Web - CSS

C'est vrai que les merveilles de HTML5 et CSS3 ne sont plus à démontrer. Mais, malheureusement le problème de la compatibilité avec IE certains navigateurs se pose. Du coup, vous hésitez à les intégrer dans vos sites Web. Mais sachez que vous n'avez aucun souci à vous faire. Voici 3 outils avec lesquels vous pourrez utiliser HTML5 et CSS3 sans vous sentir coupables.

html5shiv

Internet Explorer ne reconnaît pas les éléments HTML5 - et donc ne peut les styler. La solution est de créer les éléments HTML5 avec du Javascript:

document.createElement('header');

html5shiv utilise cette technique pour apporter le support de HTML5 dans IE.

Utilisation:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Selectivizr

Selectivizr émule les pseudo-classes et les sélecteurs d'attribut CSS3 dans IE. Avant de l'utiliser, vous devez insérer d'abord une librairie Javascript dans votre page Web.

Utilisation:

<script type="text/javascript" src="/[librairie JS]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
    <script type="text/javascript" src="/selectivizr.js"></script>
<![endif]-->

CSS3Pie

CSS3Pie apporte le support des fonctionnalités de décoration CSS3 dans IE:

  • border-radius
  • box-shadow
  • border-image
  • dégradés 
  • couleurs RGBA

 Utilisation:

#monElement {
border: 1px solid #696;
padding: 60px 0;
text-align: center; 
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc);
}

 

 

Mise à jour le Jeudi, 24 Février 2011 20:04
 

ismael.toe[at]gmail[dot]com

Page Facebook