: css

Introduction aux CSS

Définition

Les feuilles de style CSS (Cascading style sheet) permettent de spécifier la manière dont les pages html (et xml) doivent se présenter. Elles permettent de faire la mise en page, par exemple:

Bref historique

Dans les années nonantes, les sites internet un peu graphiques étaient construits en html à base de tableaux, afin de positionner les différents éléments sur la page. Certains attributs html, aujourd'hui dépréciés, permettaient d'ajouter de la couleur, de modifier les textes,... Le langage CSS a été créé afin de bien différencier le fond (html) de la forme (css), le contenu(html) de la mise en page (CSS).

La première version css1 a été finalisée fin 1996. Si la version 2 est publiée 2ans après, il aura fallu ensuite environ 12 ans pour que sa révision (css 2.1) passe enfin au stade final de recommandation (2011) !! D'ailleurs, css3 était déjà largement en cours d'élaboration à cette époque-là. Début 2014 certains modules css 3 sont finalisés déjà depuis plus de 2 ans, d'autres sont encore en cours de travail, de même que certains modules de css4 sont déjà à l'étude (par exemple celui sur les sélecteurs).

Il a fallu cependant du temps avant que les concepteurs de sites internet ne séparent clairement le contenu de la présentation. Pour deux raisons majeures:

la Guerre des navigateurs

Lors de l'ouverture massive d'Internet au grand public, Netscape Navigator et Internet Explorer se partageaient les parts de marché. Après une "guerre des navigateurs" Internet Explorer a fini par l'emporter, par une meilleure évolutivité et, surtout, parce qu'il était installé par défaut sur les PC équipés de Windows (ce qui a d'ailleurs fait l'objet d'un procès remporté à l'encontre de Microsoft). La sortie d'Internet explorer 5 puis 6 a définitivement enterré Netscape et Internet explorer est devenu en situation de quasi monopole. Seuls quelques navigateurs outsider se partageaient quelques parts de marché:

Au vu de sa situation prédominante, sans concurrence, Microsoft délaissa le développement de IE et sa version 6 ne verra aucune évolution de version pendant 5ans. S'il a été un bon navigateur pour son époque, il deviendra, au fil des ans, le cauchemar des développeurs. 13 ans après sa sortie, il reste encore environ 4% d'utilisateurs au niveau mondial mais essentiellement concentrés en Asie (Chine).

L'émergence de Firefox poussera Microsoft a sortir la version 7 d'Internet Explore. S'il corrige quelques problèmes rencontrés sur IE6 et implémente de nouvelles fonctionnalités, il fera un "flop". Toujours basée sur le même moteur de rendu que IE6, et donc avec certains mécanismes propre comme le haslayout, cette nouvelle mouture reste bien en-deçà de ses concurrents.

Les parts de Marché de Firefox augmentent, Microsoft réagit avec un Internet Explorer 8 construit sur de nouvelles bases. Une avancée plus significative, cette fois-ci, en matière de support des standards (surtout des différents comportements) mais il reste à la traîne concernant l'implémentation des nouvelles fonctionnalités css3 (bordures arrondies, rgba,...).

Google Chrome se lance dans la bataille et les versions s'enchaînent chez tous les protagonistes. D'après les statistiques, il caracole début 2014 en-tête de classement.

Aujourd'hui, début 2014

Aujourd'hui, de nombreux anciens sites construits à l'aide de tableaux figurent encore sur Internet. S'il est compréhensible que de vieux sites n'aient pas encore été remis au goût du jour, il est inadmissible d'en voir encore se créer. Ce type de construction représente de nombreux désavantages comme expliqué avec humour sur cette page.

Tous les navigateurs actuels évoluent à un rythme soutenu afin d'intégrer de plus en plus de fonctionnalités html5 et css3. On peut même dire qu'ils se livrent une guerre acharnée pour savoir qui offrira le meilleur support. La norme css3 n'est de loin pas encore finalisée dans tous ses modules cependant les navigateurs intègrent déjà bon nombre de propriétés. Certains modules de css4 sont déjà en cours d'élaboration. Il est parfois difficile de savoir ce que l'on peut utiliser ou non lors de la création d'un site.

Quelles fonctionnalités puis-je utiliser ?

Les langages du web évoluent rapidement, une fonctionnalité délaissée encore quelques mois auparavant peut devenir extrêmement utile et simplifier la tâche une fois supportée correctement sur tous les navigateurs récents. L'intégrateur web doit veiller à:

Le choix des fonctionnalités utilisées va dépendre pour chaque projet des ces différents points.

Certains sites, comme caniuse.com permettent de visualiser le support des propriétés sur les différents navigateurs.

Il est possible d'émuler les propriétés non reconnues sur les anciens navigateurs par le biais de javascript. Le script http://css3pie.com/ permet par exemple de reproduire la plus part des nouveaux effets graphiques de css 3 sur les vieilles versions d'Internet Explorer. On devrait néanmoins toujours se poser la question du gain réel d'un aspect purement graphique en regard d'une augmentation du code, de la bande passante,...

le principe de dégradation progressive

Ce principe consiste à accepter qu'un site ne présente pas de la même manière d'un navigateur à l'autre, spécifiquement sur les plus anciens. Ainsi on ne se privera plus d'utiliser les nouvelles fonctionnalités, pour autant que le site reste consultable sur les anciennes versions. L'aspect graphique peut en souffrir, mais l'information doit rester consultable.

A l'extrême, on peut imaginer une désactivation complète du css personnalisé et ne miser que sur la présentation faite à l'aide du css par défaut du navigateur.

Editer