Les fonctionnalités CSS3 avec Internet Explorer

L’utilisation du CSS3 est probablement une des tendances les plus fortes actuellement dans la conception web, permettant ainsi d’implémenter des solutions à des sites web en éliminant l’utilisation de certaines images ou de code JavaScript.

Malheureusement, il n’est pas surprenant de voir qu’Internet Explorer, même dans la version 8 du fureteur, ne supporte toujours pas la majorité des nouvelles fonctionnalités qu’offre le CSS3.

Vous trouverez, dans le billet suivant, des solutions afin de rendre plusieurs des nouvelles fonctionnalités compatibles avec les différentes versions d’Internet Explorer (6,7 et 8).

Opacité/Transparence

Même si la propriété d’opacité CSS3 n’est pas compatible dans IE, nous pouvons utiliser un paramètre appelé filter afin d’arriver au même résultat.

La syntaxe

#monElement {
	opacity: .4; /* pour les autres fureteurs */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* fonctionne pour IE6, IE7, et IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* fonctionne seulement avec IE8 */
}

Pour la compatibilité complète avec les différentes versions de IE, vous aurez besoin seulement de la 2e ligne de code.

Cependant, si pour quelques raisons que ce soit, vous avez besoin que la fonctionnalité ne soit que compatible dans la version 8 d’Internet Explorer, utilisez dans ce cas la 3e ligne.

Démonstration

Les Inconvénients

• La propriété filter fonctionne seulement pour Microsoft, alors votre feuille de style sera non validée par le W3C.
• Tous les éléments enfants du bloc contenant la propriété de transparence hériteront de cette même propriété.

Coins ronds (border-radius)

La propriété border-radius est une autre amélioration considérable offerte par l’arrivée du CSS3. Heureusement, pour rendre cette propriété compatible avec IE, le développeur Remiz Rahnas de HTML Remix a développé la solution du fichier HTC appelé CSS Curved Corner pouvant être téléchargé à partir de Google Code.

Ce qu’il y a de formidable avec ce bout de code est qu’il ne requiert aucun ajustement supplémentaire si vous voulez modifier la valeur de la courbe des coins ronds de l’élément en question. Vous n’aurez qu’à lier le fichier dans votre feuille de style CSS et le script analysera automatiquement votre code pour repérer les valeurs assignées à la propriété border-radius.

La syntaxe

Voici un exemple du code que vous aurez à écrire :

.border-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

Idéalement, vous devriez appliquer la propriété behavior dans une feuille de style pour IE seulement (ou avec les commentaires conditionnels pour IE) en utilisant le même sélecteur dans votre CSS, pour que le code comprenne où trouver la valeur du border-radius.

Les Inconvénients

• Le fichier HTC a 142 lignes de codes (suggestion : vous pouvez utiliser minifying ou GZipping)
• La propriété behavior rendra votre CSS non valide pour le W3C
• Votre serveur devra être en mesure de charger les fichiers HTC (généralement pas un problème)
• Il est possible d’éprouver des problèmes avec IE8 si vous forcer l’élément avec une valeur négative pour la propriété z-index.

Ombres (drop shadow) pour les contenants

Autre propriété très utile du CSS3 réduisant ainsi l’utilisation d’images PNG transparentes.

N.B. La propriété box-shadow a été enlevée du module CSS3 pour les arrières-plan et les bordures. Le futur de la propriété est alors un peu incertain.

La Syntaxe

.box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* Pour Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Pour Safari et Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

Démonstration

Les Inconvénients

• Les valeurs pour le code IE ne rendent pas visuellement la même ombre que les autres fureteurs. Vous aurez besoin de jouer avec les valeurs afin d’obtenir un effet visuellement semblable
• La propriété de drop-shadow ne se valide pas avec le W3C (pas à cause du code spécifique pour IE)

Ombres (drop-shadow) pour les textes

Il existe une méthode développée par Kilian Valkhof qui utilise un plug-in jQuery afin d’implémenter de l’ombre (drop-shadow) sur des textes dans IE. Cependant, son utilisation est fortement déconseillée par le site web SmashingMagazine.com à cause des inconvénients que sont utilisation peut engendrer.

Il existe un second plug-in jQuery qui applique les drop shadows et cela, peu importe le fureteur utilisé.

Couleur d’arrière-plan avec transparence (RGBA)

Le CSS3 offre une autre méthode afin d’implémenter la transparence grâce à l’utilisation du «channel» alpha que l’on peut désormais spécifier pour une couleur d’arrière-plan. Voici la procédure pour la compatibilité avec les versions d’Explorer 7 et 8.

La Syntaxe

La syntaxe CSS3:

#rgba p {
	background: rgba(98, 135, 167, .4);
}

Avec le code CSS précédent, la couleur d’arrière-plan utilise des valeurs RGB et également une valeur alpha de «.4» ce qui fait 40% d’opacité.

Pour Internet Explorer, vous devrez utiliser une image PNG semi-transparente de 1-pixel avec une propriété «repeat» dans une feuille de style dédiée uniquement à IE. Dans votre image, vous devrez régler la valeur de transparence désirée au PNG que vous utiliserez :

#rgba p {
	background: transparent url(rgba-ie.png) repeat 0 0;
}

Le PNG qui sera répété aura la même transparence que la propriété CSS3 utilisant le RGBA.

Démonstration

Les Inconvénients

• Si vous ajustez la valeur d’opacité, vous devrez recréer un nouveau fichier PNG
• Son utilisation ajoute une requête HTTP puisque l’on réfère à une image plutôt qu’à une valeur de couleur
• * Ne sera pas compatible avec IE6 puisqu’il ne supporte pas les PNG transparents. (À moins bien sûr d’y insérer un «hack»)

Dégradés

Une autre fonctionnalité très pratique introduite par le CSS3 est la faculté de créer des dégradés en arrière-plan. Point positif : il est très simple de faire fonctionner le dégradé dans les versions d’Internet Explorer.

La Syntaxe

Pour créer un dégradé qui aura visuellement le même aspect dans tous les types de fureteurs, utilisez le code CSS ci-bas :

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari et Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 et IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Dans la propriété filter pour IE, le GradientType peut être défini à « 1 » (pour un dégradé horizontal) ou à « 0 » (pour un dégradé vertical).

Démonstration

Les Inconvénients

• Votre CSS ne sera pas validé par le W3C (Pas seulement à cause du code spécifique à IE)
• Les propriétés pour Safari, Chrome et Mozilla permettent l’application de la valeur “stops”. Cette option n’est pas disponible pour IE limitant ainsi les possibilités
• Les filtres pour IE ne supportent pas les dégradés en radial
• Pour que le dégradé soit visible dans IE, l’élément doit être visible (soit avec une propriété display:block, height, width, etc. Voir l’explications en anglais)

Plusieurs images d’arrière-plan

La Syntaxe

Pour utiliser plusieurs images en arrières-plan avec Firefox, Safari et Chrome :

#multi-bg {
	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

Pour appliquer deux arrières-plan dans le même élément avec IE, utilisez ce code dans une page dédiée uniquement à Explorer:

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6, 7 et 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 seulement */
}

Les Inconvénients

• Votre CSS ne sera pas validé par le W3C
• Le deuxième arrière-plan s’appliquera en utilisant la propriété filter et se placera toujours dans le coin gauche dans le haut et ne pourra pas se répéter. C’est pourquoi cette méthode n’est pas très flexible. Pour placer l’élément au centre, vous devrez créer une image avec la même quantité d’espace blanc sur les côté de l’image, afin de simuler que l’image est centrée.

Rotation sur des éléments

La Syntaxe

Voici la syntaxe CSS3 pour effectuer une rotation de 180 degrés à un élément :

#rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}

Pour reproduire exactement le même effet dans Internet Explorer:

#rotate {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Démonstration

Visible dans tous les fureteurs :

Les Inconvénients

• Votre CSS ne sera pas validé par le W3C (Pas seulement à cause du code spécifique à IE)
• Le filtre de IE permet d’effectuer une rotation que de 90, 180, 270 ou 360 degrés en utilisant les valeurs 1, 2, 3 ou 4.

Conclusion

Rappelez-vous que lorsque vous avez besoins de passer outre mesure les propriétés CSS initiales pour IE ou si vous avez besoin d’utiliser du JavaScript, du JQuery ou un fichier HTC, veillez à utiliser les commentaires conditionnels pour IE () dans votre CSS ou à utiliser un fichier CSS spécifique pour IE. Ceci assurera que les autres fureteurs n’effectuerons pas des requêtes HTTP non nécessaires.

Utilisez-vous les nouvelles fonctionnalités CSS3 lors de la conception de vos sites web? Est-ce que cet article vous incite à le faire?