(http://ayads.co/click.php?

z=190&a=171) (/)

Rejoignez-nous
(/login)

Tutoriels (/tutoriels)
Recherche

Forums (/forum/)

Librairie tudes (/etudes/) (http://boutique.siteduzero.com/boutique.html)

Emploi (/emploi)

Tutoriels (/tutoriels)
Ici, on apprend tout partir de Zro !
Accueil (/) Informatique (/informatique/tutoriels) Apprenez crer votre site web avec HTML5 et CSS3 (/informatique/tutoriels/apprenez-a-creer-votre-siteweb-avec-html5-et-css3) La petite histoire du CSS Web (/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3) Livre (/informatique/book/apprenez-a-creer-votre-site-web-avec-html5-et-css3) eBook (/informatique/ebook/apprenez-a-creer-votre-site-web-avec-html5-et-css3) PDF (/informatique/exportPdf/apprenez-a-creer-votre-site-web-avec-html5-et-css3) Vido (/informatique/video/apprenez-a-creer-votre-site-web-avec-html5-et-css3)

La petite histoire du CSS

Par Mateo21
Note

Difficult Facile

Dure 20 jours
Mis jour le lundi 22 avril 2013

Thmatiques
Web (/informatique/web/tutoriels), CSS (/informatique/css/tutoriels), HTML (/informatique/html/tutoriels) Mettre en place le CSS (/informatique/tutoriels/appren

O crit-on le CSS ?

(/informatiqu

Je vous avais avertis ds le dbut de ce cours : nous allons apprendre deux langages. Nous avons dj bien entam notre dcouverte du HTML, mme s'il reste encore de nombreuses choses apprendre (nous y reviendrons dans quelques chapitres). En revanche, il est temps maintenant de nous intresser au CSS. CSS (Cascading Style Sheets), c'est cet autre langage qui vient complter le HTML. Vous vous souvenez de son rle ? Grer la mise en forme de votre site.

Petit rappel : quoi sert CSS ?

CSS ? C'est lui qui vous permet de choisir la couleur de votre texte. Lui qui vous permet de slectionner la police utilise sur votre site. Lui encore qui permet de dfinir la taille du texte, les bordures, le fond Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit gauche et occupe telle largeur, que l'en-tte de mon site soit cal en haut et qu'il soit toujours visible, etc. Souvenez-vous de ce petit comparatif que nous avions vu ds le premier chapitre (figure suivante).

(http://uploads.siteduzero.com/files/339001_340000/339428.png) La mme page HTML, sans et avec CSS (www.csszengarden.com) Grce au HTML, nous avons pu rdiger le contenu de notre site mais il est brut de dcoffrage. Le CSS vient complter ce code pour mettre en forme tout cela et donner au contenu l'apparence que l'on souhaite.

CSS : des dbuts difficiles

Il faut savoir qu'aux dbuts du Web, CSS n'existait pas. En fait, il n'y avait initialement que le langage HTML. Le HTML est n en 1991 et CSS en 1996. Alors, vous vous dites srement : comment faisait-on la mise en forme de 1991 1996 ? Eh bien, uniquement en HTML ! Il y avait en effet des balises HTML ddies la mise en forme. <font color="#aab1c3"> , par exemple, permettait de dfinir la couleur du texte. Cependant, les pages HTML commenaient devenir assez complexes. Il y avait de plus en plus de balises et c'tait un joyeux mlange entre le fond et la forme, qui rendait la mise jour des pages web de plus en plus complexe. C'est pour cela que l'on a cr le langage CSS. Cependant, le CSS n'a pas t adopt immdiatement par les webmasters, loin de l. Il fallait se dfaire de certaines mauvaises habitudes et cela a pris du temps. Encore aujourd'hui, on peut trouver des sites web avec des balises HTML de mise en forme, anciennes et obsoltes, comme <font> !

CSS : la prise en charge des navigateurs

Tout comme le HTML, le CSS a volu. Je vous avais indiqu qu'il y avait quatre versions importantes de CSS : CSS 1 ; CSS 2.0 ; CSS 2.1 ; CSS 3. En fait, la version CSS 3 n'est pas encore totalement finalise (ce n'est pas encore une version officielle). Cependant, elle est bien avance et aujourd'hui dj bien prise en charge par de nombreux navigateurs, ce qui fait qu'on peut dj s'en servir. Il serait dommage de passer ct car CSS 3 apporte de nombreuses fonctionnalits CSS (leur nombre double par rapport CSS 2.1 !). Nous nous baserons donc dans ce cours sur CSS 3, qui reprend et complte la plupart des fonctionnalits de CSS 2.1. Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page. Au dbut des annes 2000, Internet Explorer tait le navigateur le plus rpandu mais sa gestion du CSS est longtemps reste assez mdiocre (pour ne pas dire carrment mauvaise). C'tait la grande poque de la version 6 (IE6), hlas encore utilise aujourd'hui par une petite partie des internautes (heureusement, cette proportion tend diminuer). Depuis, de nombreux navigateurs sont arrivs et ont chahut Internet Explorer : Mozilla Firefox bien sr, mais aussi Google Chrome. Et je ne vous parle pas du succs des Mac et iPhone avec leur navigateur Safari. Cela a incit Microsoft ragir et publier (aprs une longue priode d'inactivit) IE 7, puis IE 8 et IE 9. On parle dj de IE 10. Bon, ton cours d'histoire, c'est bien joli mais en quoi cela me concerne-t-il aujourd'hui ? Que faut-il retenir de tout cela ? Que les navigateurs ne connaissent pas toutes les proprits CSS qui existent. Plus le navigateur est vieux, moins il connat de fonctionnalits CSS. Je vais vous prsenter dans ce cours un certain nombre de fonctionnalits de CSS qui ne marchent pas forcment sur les navigateurs les plus vieux. Je ne peux pas l'viter, c'est comme cela : aucun navigateur ne connat parfaitement toutes les fonctionnalits CSS de toute faon ! Au pire,

vieux. Je ne peux pas l'viter, c'est comme cela : aucun navigateur ne connat parfaitement toutes les fonctionnalits CSS de toute faon ! Au pire, si le navigateur ne connat pas une proprit CSS, il l'ignore et ne met pas en forme, mais cela ne fait pas planter votre page : celle-ci sera donc toujours lisible. Je vous recommande fortement de mettre dans vos favoris les sites www.caniuse.com (http://www.caniuse.com) et normansblog.de (http://www.normansblog.de/demos/browser-support-checklist-css3/) qui proposent des tables de compatibilit des fonctionnalits de HTML et CSS sur diffrents navigateurs (et sur leurs diffrentes versions). Regardez en particulier les tables de compatibilit pour CSS (http://www.caniuse.com/#cats=CSS) de www.caniuse.com (figure suivante).

Table de compatibilit CSS (http://www.caniuse.com)

Table de compatibilit CSS de caniuse.com (http://www.caniuse.com) Fatigu(e) de lire sur un cran ? Dcouvrez ce cours en livre.
Mettre en place le CSS (/informatique/tutoriels/appren O crit-on le CSS ?

(/informatiqu

Partager
J'ai une question ou une remarque (/forum/categorie/questions-sur-les-tutoriels)

Licence

L'auteur
Mateo21 (/membres/mateo21)

Entrepreneur temps plein, auteur temps plein et fondateur du Site du Zro :o) (/membres/mateo21)

Tutoriels (/tutoriels)
Inscrivez-vous la newsletter
Entrez votre e-mail

Forums (/forum/)

Librairie

tudes (/etudes/)

Emploi (/emploi)

(http://boutique.siteduzero.com/boutique.html)
Ok

Restez connect
Devenez fan sur Facebook (http://facebook.com/siteduzero) Suivez nous sur Twitter (https://twitter.com/#!/siteduzero)

Conditions Gnrales d'Utilisation (/conditions-generalesutilisation)

Roadmap (/roadmap)

Bugs

(http://suggestions.siteduzero.c rapports-de-bugs-v4? sso=)

Suggestions (http://suggestions.siteduzero.com/forums/150761-

site-du-z%C3%A9ro-v4?sso=)

Ralis par

(http://simple-it.fr)