• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 08/01/2018

Avant de commencer...

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Parce que ça serait trop beau, il y a évidemment quelques soucis avec CSS3... :(

Loin de moi l'idée de vous démoraliser avant même que nous ayons commencé, mais il est important que vous sachiez dans quoi vous vous engagez en attaquant ce webdesign nouvelle génération. ;)

Un peu d'histoire

Félicitations, CSS gagne un niveau et évolue !

Déjà, pourquoi parle-ton de CSS3 ? Si vous avez juste suivi le cours de M@teo21, vous ne devez jamais avoir entendu parler d'un quelconque système de versions de CSS !

En fait, il est un peu abusif de parler de "versions", il serait plus correct d'utiliser le terme de "niveaux". En effet, CSS n'est pas un logiciel mais une liste de normes. Les spécifications de CSS1 doivent donc être reprises dans CSS2, qui lui-même est un sous-ensemble de CSS3, qui devra lui aussi pouvoir être implémenté dans le très futuriste CSS4.

Mais qui décide de ces normes ?

Ce sont les membres du W3C : dans la grande majorité des cas, il s'agit d'acteurs incontournables dans le domaine du Web et de l'informatique. On y retrouve par exemple Microsoft, Cisco et même Facebook !

Mais revenons à nos niveaux de CSS, voulez-vous ? :)

Imaginez un peu le bazar si, un jour, les personnes qui écrivent ces normes se rendent compte que ce qu'elles ont établi dans CSS1 est bancal : il faudrait ainsi revoir toutes les bases des spécifications et les navigateurs Web n'auront plus rien de stable sur quoi s'appuyer...
Pour éviter un tel scénario, il faut donc être certain que les normes décidées soient correctes et qu'elles ne nuisent pas à la navigation des utilisateurs.

Concrètement, tout ça veut dire que mettre en place les normes d'un nouveau niveau de CSS est un processus extrêmement long. Tellement long que ça va faire plus de 10 ans qu'on attend CSS3 !

Une vitesse d'évolution digne d'un escargot

Pour résumer grossièrement l'histoire, CSS est né en 1996. Grâce à la guerre des navigateurs, qui commençait déjà à cette époque, les normes qu'il imposait furent vite l'objectif à atteindre. En effet, chaque navigateur refusait que ses concurrents puissent s'affirmer comme étant les plus conformes ! :p
Mais ce n'est qu'en 2000, soit quatre ans plus tard, que Microsoft réussit le premier à respecter plus de 99% des normes de CSS1 avec Internet Explorer 5. Et oui !
Image utilisateur
En parallèle, CSS2 a vu le jour en 1998. Malheureusement trop ambitieux avec des idées comme des affichages en braille ou des rendus vocaux, le W3C a dû revoir ses objectifs à la baisse dès 2001 avec un niveau de correction : CSS2.1. De nouveaux sélecteurs, de nouvelles propriétés... En fait, vous connaissez sûrement très bien CSS2.1 car, si vous êtes développeur Web, vous l'utilisez tous les jours !

A force de travail, ce n'est qu'en 2007 que CSS2.1 devient une recommandation candidate. Un peu comme les logiciels qui peuvent avoir une version release candidate, CSS2.1 était devenue stable, prêt à sortir pour de bon, mais pouvant contenir encore quelques bogues. Neuf ans après sa création, on n'avait toujours pas une version 100% stable de CSS2 !
Et tenez-vous bien, ce n'est que le 7 Juin 2011 que le W3C a officialisé ses recommandations : ce n'est que depuis cette date que nous sommes censés utiliser les propriétés CSS2.1 sans risque de bogues ! :waw:

Et CSS3 dans tout ça ?

Le développement de CSS3 s'est fait en parallèle de CSS2.1, dès 1999. Et oui, si tôt !
Selon certaines personnes, il s'agirait d'une erreur de la part du W3C : établir les normes de deux niveaux différents mais complémentaires est loin d'être aisé, il suffit de voir la date de recommandation officielle de CSS2.1 pour s'en rendre compte !
Mais maintenant que ce dernier est enfin finalisé, il ne fait aucun doute que CSS3 sera le prochain objectif du W3C.

Attention cependant, ce n'est pas parce qu'ils sont désormais focalisés dessus qu'il sortira prochainement... Encore une fois, reprenons l'exemple de CSS2.1...

Heureusement pour nous, les navigateurs Web modernes préfèrent prendre le risque d'interpréter les propriétés avant l'officialisation de leurs recommandations : imaginez un peu si nous avions dû attendre plus d'une dizaine d'années avant de pouvoir utiliser CSS2.1 !

Ainsi, même s'ils ne gèrent pas encore le CSS2.1 à 100%, les navigateurs modernes ont un point d'honneur à interpréter le plus de propriétés CSS3 possible : tout comme en 1996, ils ne souhaitent pas que leurs concurrents puissent se dire être les plus conformes. Comme quoi, les années passent mais tout se répète. :p

Bien évidement c'est nous, les utilisateurs, qui sommes bénéficiaires de cette guerre des navigateurs : même si le W3C n'a pas officialisé toutes les propriétés CSS3, nous pouvons d'ores et déjà en tester une grande partie et se rendre compte de leur puissance !

Seulement, comme tout n'est pas normé, il va nous falloir gérer quelques soucis de compatibilité...

Les problèmes de compatibilité

Comme nous venons de le voir, toutes les propriétés CSS3 ne sont pas gérées par tous les navigateurs : à vouloir aller plus vite que ceux qui établissent les normes, on se casse parfois un peu les dents ! :-°

Avec le nombre de navigateurs sur le marché, je nous vois mal tester nos pages Web au cas par cas... Heureusement, des gens très patients ont construit des tableaux résumant ce qui est compatible et ce qui ne l'est pas, comme celui visible sur FindMeByIP. Attention cependant, la fiabilité de ce genre de tests n'est pas garantie à 100%, encore une fois parce que rien n'est officiellement normé !

Par exemple, ce n'est pas parce qu'il est marqué que Firefox 3.6 interprète border-radius que la commande border-radius: 10px; fonctionnera ! Pourquoi ? Encore et toujours à cause du W3C !

Ce dernier a en effet bien remarqué que les navigateurs veulent aller plus vite que les normes. Puisqu'on ne peut pas empêcher les navigateurs d'implémenter des propriétés, le W3C leur recommande de préfixer celles qui ne sont pas 100% officialisées.

Préfixer ? Késako ?

C'est une façon de rendre "propriétaire" une propriété. En préfixant le nom d'une propriété par un tiret et un petit code correspondant au navigateur, seul ce dernier sera capable de l'interpréter. Cela permet aux navigateurs qui le souhaitent (c'est-à-dire la plupart :p ) de proposer aux développeurs Web un support des futurs modules CSS.

Voici une liste non exhaustive des préfixes à utiliser :

  • -moz- pour le moteur Gecko (Mozilla Firefox) ;

  • -webkit- pour le moteur Webkit (Google Chrome, Safari...) ;

  • -o- pour Opera ;

  • -ms- pour Internet Explorer 8+ ;

  • etc.

Ces préfixes sont donc à placer devant chaque propriété non finalisée. Lorsqu'une propriété est finalisée, le préfixe peut être supprimé, car elle est considérée comme officialisée et donc prête à l'emploi !

Pour en revenir à Firefox 3.6, il est donc nécessaire d'écrire -moz-border-radius: 10px; pour qu'il prenne en compte la propriété. Ce n'est cependant plus vrai à partir de Firefox 4.0 car cette dernière s'est standardisée entre temps !

Je pense que vous commencez à voir le casse-tête que tout ceci peut représenter...

Bon alors, on fait quoi du coup ?

Halàlà, quelle question. ^^

Mine de rien, cette problématique provoque de longs débats dans le monde du développement Web.

  • Doit-on attendre qu'une propriété soit officialisée avant de commencer à l'utiliser ?

  • Peut-on commencer à tester les nouvelles fonctionnalités au risque d'avoir du code invalide ?

  • Est-il préférable de conserver nos vieilles solutions JavaScript pour simuler les effets CSS3 ?

Ce n'est qu'une question de point de vue, et le but de ce tutoriel n'est pas de relancer cet éternel débat. Tout dépend du type de projet réalisé, du public visé, voire de vos clients.

Imaginons que vous voulez ajouter des coins arrondis sur les cadres de votre page et que vous décidez d'adopter la solution CSS3. Cela sera-t-il pénalisant pour vos visiteurs utilisant un vieux navigateur ? Certes, ils verront des coins bien carrés, mais cela va-t-il gêner leur confort de navigation ?

Le fait de ne pas voir les coins arrondis va-t-il complètement changer leur expérience sur votre site ?

Si oui, faut-il laisser tomber l'idée au risque de pénaliser ceux qui ont un navigateur décent ? Ou faut-il adopter une solution en JavaScript, en sacrifiant ainsi l'optimisation ?

Encore une fois, le seul capable de répondre à ces questions est vous-même. C'est selon vos envies, votre humeur, vos besoins, votre philosophie... Enfin bref, je ne déciderai pas pour vous ! :p

Quelques informations pour la suite

Quelle que soit votre décision, je dois continuer le tuto moi ! :p

Compte tenu des particularités liées à ces problèmes de norme, voici comment sera construit le tutoriel.

Tout d'abord, chaque chapitre sera consacré à une nouvelle propriété CSS3, ou à un ensemble de propriétés liées. Ainsi, il ne sera pas nécessaire d'avoir lu le chapitre 3 (traitant des couleurs) pour comprendre le chapitre 5 (qui parlera des arrière-plans). Même si une certaine logique fera qu'ils découleront plus ou moins naturellement les uns à la suite des autres, ils resteront complètement indépendants : vous pouvez les lire dans l'ordre que vous voulez !

Quitte à jouer avec la modernité, sachez que tous les exemples de codes HTML seront écrits en HTML5. Ne vous étonnez donc pas si vous pensez que le code n'est pas valide W3C : il ne le sera en effet pas selon les normes XHTML, mais bien entendu tout sera parfaitement valide HTML5.

Enfin, pour éviter les complications, les navigateurs les plus récents seront utilisés lors des différents exemples et explications. A l'heure où ces lignes sont écrites, il s'agit donc de :

  • Internet Explorer 9

  • Google Chrome 20

  • Mozilla Firefox 14

  • Opera 12

  • Safari 5

Si un navigateur de cette liste n'interprète pas la propriété CSS3 ciblée par un chapitre, je vous l'indiquerai, bien évidement. :)

Je suis désolé si ces petites mises au point vous ont semblé rébarbatives, mais elles sont essentielles pour que tout soit clair entre nous. :)

Si vous êtes toujours motivés à en apprendre plus sur la puissance de CSS3, on se retrouve au prochain chapitre, dans lequel on commencera à attaquer la bête sérieusement !

Exemple de certificat de réussite
Exemple de certificat de réussite