Code-network

En dépit de toute notre attention, il reste possible qu'un article insatisfaisant soit affiché entre son envoi et la vérification quotidienne des nouveaux articles. Nous faisons de notre mieux pour donner à Code-network un contenu fiable et gréable à parcourir. Merci de votre compréhension.
Utiliser les propriétés CSS3
Sent by Tahmahal (16/02/2009 - 15:44)
Commentaires : 0 • Commenter cet article

Bonjour !

Cet article traitera des propriétés CSS 3 ; en premier lieu, nous verrons de quoi est-ce que ça retourne ; puis comment utiliser ces fameuses propriétés.
Première partie : informations générales

1) CSS3, c'est quoi ?

Comme vous le savez sans doute, la présentation des sites internet est désormais séparée de leur contenu (devrait en réalité). On utilise le langage CSS (Cascading Style Sheets) pour présenter le contenu d'une page (x)HTML.
Bien entendu, ce langage est en constante évolution ; des normes on été mises en place, définissant les propriétés CSS et leurs valeur(s) possibles. Actuellement, la norme utilisée est CSS 2.1 . Mais depuis un certain temps, le W3C travaille sur la norme CSS 3 ! Et désormais, les navigateurs récents commencent à intégrer les propriétés CSS3.

Mais nous sommes dans une période de transition, ce qui signifie qu'il ne sera pas aussi simple d'utiliser ces propriétés nouvelles que les anciennes ... pour le moment, on peut espérer que dans un ou deux ans cet article n'aura plus lieu d'être :)

2) Le souci de compatibilité :

Le GROS souci qu'on rencontre quand on tente de faire un design s'appuyant sur CSS3, c'est celui de la compatibilité. Les navigateurs anciens ne comprennent pas les propriétés CSS3. Il faut prendre cela en compte lors du codage de votre design. De plus, même quand les navigateurs récents comprennent les propriétés CSS3, ils ne les intègrent pas tous sous le même nom ...

... et bien entendu, inutile de vous dire qu'INTERNET EXPLORER ÇA PUE et que donc qu'INTERNET EXPLORER NE COMPREND PAS CSS3, et ne le comprendra que très partiellement dans sa version 8 (encore en bêta à l'heure actuelle). Nous reviendrons sur le cas du navigateur de Microsoft en seconde partie de cet article.

3) Le principe d'utilisation :

Actuellement, il existe une méthode assez simple à comprendre pour utiliser CSS3 dans les navigateurs le supportant :
il faut déclarer le nom de la propriété, précédé d'un préfixe indiquant quel navigateur est concerné. Les préfixes à utiliser sont :

-moz- pour Firefox et les navigateurs basés sur Gecko.
-webkit- pour les navigateurs basés sur Webkit (Safari et bientôt Konqueror).
-khtml- pour Konqueror actuel (je crois !).

Ainsi, pour utiliser la propriété border-radius sous Firefox, on utilisera -moz-border-radius :)

Seconde partie : en pratique

1) Quelles sont les propriétés ?

Je ne ferais pas (encore) une liste exhaustive ou non des propriétés CSS3 disponibles pour chaque moteur de rendu web. Voici une petite liste des propriétés -moz-xxx et le résultat en images. Essayez donc ces propriétés en remplaçant -moz- par -webkit- :)

2) Le cas Internet Explorer :

Internet Explorer est un navigateur obsolète, commercial, peu sécurisé et moins performant que ses concurrents conformes au standards, rapides et gratuits (qui a dit que j'avais un truc contre IE ?). Et, comme prévu, c'est de pire en pire quand on remonte le temps : si IEv7 ou IEv8b semblent un peu respecter la norme CSSv2.1, c'est une autre affaire quand on doit coder un design compatible IEv6 ou - pire - IEv5.5 ou inférieur (on entre dans le domaine de la paléontologie là quand même).

Cependant, IE est très utilisé. La raison est simple : IE est livré de base avec Windows. Windows est livré de base sur 95% des ordinateurs vendus ... on peut compter 3 sortes d'utilisateurs d'IE :

Les utilisateurs forcés : collectivités, au travail, etc. Bien souvent on trouve du IE6 (livré avec win XP) ; c'est catastrophique.
Les utilisateurs inconscients : L'internaute lambda, qui n'a que faire du HTML, du CSS et de s'embêter à DL Firefox. Il ne faut pas oublier que la majorité des internautes n'est pas passionée de codage web :)
L'utilisateur acharné : Lui, il sait tout des relations IE-CSS, et il défend IE face aux autres navigateurs et au W3C. C'est assez rare.

. Le problème est que même maintenant, d'après XiTi, 20% d'internautes utilisent IE... 6 ! Et plus encore IE 7 ... ce qui signifie qu'on ne peut faire un site web en disant : "Rien à faire, je ne fais pas un deuxième ensemble de feuilles CSS pour IE. Qu'ils téléchargent un navigateur potable". Surtout quand on gère une entreprise, donc ses clients.

On fait alors souvent un design alternatif pour son site, adapté à IE ... mais comment "reproduire" les propriétés CSS3 ?
Déjà, on ne peut pas toutes les reproduire. Essayez actuellement d'arrondir une bordure sans avoir recours à des images sous IE, c'est perdu d'avance. Ensuite, on peut utiliser la propriété spécifique à Internet Explorer filter:valeur();.

On peut ainsi avoir accès à l'opacité (-moz-opacity: 0.5; devient filter: alpha(opacity=50);), etc. Pour avoir une petite liste de certains filtres : suivez ce lien.

3) Javascript et CSS3 :

Pour accéder à une propriété CSS d'un objet en JS, on fait :
Code : javascript

     objet.style.propriete = valeur;

Mais comment faire si il y a -moz, -webkit, ... ?

La réponse est simple mais importante :p Chaque fois qu'il y a un tiret, on le supprime et la lettre suivante est en majuscule.
Code : javascript

     objet.style.MozBorderRadius = '20px';

     objet.style.backgroundColor = 'red'; //Eh oui, pour les vielles propriétés c'était déjà comme ça :)

-------------------------
Conclusion : CSS3, c'est bien, mais c'est pas toujours simple à appliquer pour le moment ...
Tschüss !

Tahmahal.