Le CSS 3 est l’avenir du web design à ce qu’on dit et même si la plupart des navigateurs supportent de nombreuses fonctions, on remarque qu’il reste encore beaucoup à faire sur la normalisation du truc. Le CSS 3 permet de créer de beaux effets sans utiliser d’images. Ainsi, on peut créer des ombrages sur le texte, sur des blocs (DIV), jouer sur l’opacité d’un élément (très utile) sans oublier des images d’arrière-plan multiples sur un seul bloc. Et on peut aussi créer des dégradés uniquement avec le CSS 3. Pour cette dernière option, il y a un tel bordel dans les normes des différents navigateurs qu’on se croirait revenu au temps d’Internet Explorer 6 et de Netscape ! Pour faire court, il faut coder les styles CSS 3 pour le dégradé pour chaque navigateur sinon c’est la merde.

background: linear-gradient(to bottom, #000, #666);

Le code ci-dessus est la norme du W3C pour un simple dégradé linéaire qui va du noir jusqu’au gris foncé. Assez simple hein ! Mais si vous codez ce truc et que vous le lancez sur n’importe quel navigateur, cela ne fonctionnera pas que ce soit pour Chrome, Firefox, Opera et ce n’est même pas la peine de parler d’Internet Explorer. Pour Firefox, on doit utiliser le code suivant :

background: -moz-linear-gradient(top, #000, #666);

Pour Opera, ce sera le code :

background: -o-linear-gradient(top, #000, #666);

Et pour Chrome, on va utiliser :

background: -webkit-linear-gradient(top, #000, #666);

ou

background: -moz-gradient(top, #000, #666);

Et enfin pour Internet Explorer :

background: -ms-linear-gradient(top, #000, #666);

Mais comme Internet Explorer est le truc inventé par Microsoft pour uniquement faire chier tous les webmesters de cette planète, son code fonctionne uniquement pour IE 10 et supérieur et pour IE 9, on doit faire :

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000, endColorstr='#666666',GradientType=0 );

Non mais vous avez vu ce code de merde de Microsoft et le pire est qu’IE 8 ne supporte pas une grande partie des styles CSS 3. Mais IE 8 est le navigateur préféré pour Windows XP (impossible d’installer IE 9 dans ce dernier) et donc, les utilisateurs de XP vont rester très en arrière par rapport aux standards du web alors qu’ils sont encore très nombreux.

Mais au delà de ça, je déteste ces pratiques de ces développeurs qui créent leurs propres standards dans leurs coins ce qui complique énormément la tâche aux designers. Le CSS 3 est censé nous faciliter la vie, mais cet exemple nous prouve au contraire que le dégradé est bien plus facile avec des images. Heureusement, ce mic mac de codes est assez rare. Mais le détail qui tue dans cette histoire de dégradé avec le CSS 3 et qu’aucun navigateur ne supporte le code selon le W3C et c’est vraiment se foutre du monde !

Mais le CSS 3 n’est pas uniquement utilisé pour faire beaux designs, car c’est dans le Responsive Design qu’il montre un potentiel phénoménal. L’approche du Responsive Design est de créer des pages web pour qu’ils s’adaptent automatiquement selon la résolution du terminal que ce soit pour un PC ou un smartphone. Le processus se fait par l’intermédiaire de feuilles de style ce qui offre une grande souplesse. On utilise l’option meta avec l’attribut media tel que l’exemple ci-dessous :

<link rel="stylesheet" media="screen and (max-width:480px)" href="mobile.css" type="text/css" />

Ce code fait un test sur la résolution du terminal et s’il dépasse les 480 pixels alors il utilise la feuille de style mobile.css (qui doit dans le même répertoire que la page dans cet exemple). Cette résolution de 480px est adaptée pour les smartphones tels que l’iPhone ou le Blackberry, mais on peut indiquer toutes les résolutions possibles tels que 240px pour les petits téléphones. Ainsi, on n’a pas besoin de créer des versions mobiles pour le site, car on optimise directement le contenu avec le CSS. Par ailleurs, cette méthode n’utilise pas du JavaScript ce qui allège considérablement la page. Mais l’inconvénient est la redondance du code, car on sera obligé de coder à plusieurs reprises les mêmes styles en les modifiant légèrement. Le Responsive Design utilise uniquement des unités de mesures fluides tels que le pourcentage ou l’em (pour les versions mobiles du site). En bref, le Responsive Design vous permet de créer un site standard très riche en images et en animations et proposer une version très légère dès que la résolution est inférieure à certains seuils. On parle surtout du Responsive Design pour les petits terminaux, mais on peut aussi faire le contraire en proposant des pages pour de hautes résolutions telles que celles qui dépassent les 1500 pixels ou même un format tel que le 16/9. Les possibilités sont infinies, mais espérons juste que les navigateurs ne vont pas aussi foutre le bordel avec leur codes propriétaires.

Note : Mon exemple sur les médias queries CSS 3 n’est pas exclusif. Si vous voulez, vous pouvez mettre directement l’attribut media dans votre feuille de style principal avec @media screen (option) {votre code css}, mais cela rallonge considérablement la page et c’est difficile de modifier par la suite. En créant des pages séparées, c’est beaucoup simple de travailler séparément sur chaque format.

Pour plus d’informations sur le Responsive Design, je vous invite à lire les articles ci-dessous :

• L’article d’Ethan Marcotte sur le Responsive Design (l’inventeur de cette méthode)
• L’article du WC3 sur l’attribut Medias Queries