Formation CSS - Le blog d`Alexandre Paixao

Alex Team
FORMATION CSS
DEFINITION (WIKIPEDIA) : CSS (CASCADING STYLE SHEETS :
FEUILLES DE STYLE EN CASCADE) EST UN LANGAGE INFORMATIQUE
QUI SERT A DECRIRE LA PRESENTATION DES DOCUMENTS HTML ET
XML. LES STANDARDS DEFINISSANT CSS SONT PUBLIES PAR LE
WORLD WIDE WEB CONSORTIUM (W3C). INTRODUIT AU MILIEU
DES ANNEES 1990, CSS DEVIENT COURAMMENT UTILISE DANS LA
CONCEPTION DE SITES WEB ET BIEN PRIS EN CHARGE PAR LES
NAVIGATEURS WEB DANS LES ANNEES 2000.

SOMMAIRE
Histoire et enjeux du CSS ........................................................................................................................................ 4
L’histoire du standard ......................................................................................................................................... 4
Un concept parmi d'autres, présent dès l'origine du web .............................................................................. 4
Les premiers développements – CSS 1............................................................................................................ 4
CSS2, des ambitions précipitées...................................................................................................................... 4
CSS 2.1, retour aux implémentations .............................................................................................................. 4
CSS3, implémentation modulaire ................................................................................................................... 4
Les enjeux ............................................................................................................................................................ 5
Séparer la structure d'un document de ses styles de présentation ................................................................ 5
Décliner les styles de présentation selon le récepteur ................................................................................... 5
Permettre la cascade des styles ...................................................................................................................... 6
Principes techniques et syntaxe de CSS .................................................................................................................. 7
Les concepts fondamentaux ............................................................................................................................... 7
Sélecteurs et blocs de règles ........................................................................................................................... 7
Propriétés et valeurs ....................................................................................................................................... 7
Boites et flux CSS ............................................................................................................................................. 7
Points techniques ................................................................................................................................................ 7
La propriété « display » ................................................................................................................................... 7
Les blocs flottants ......................................................................................................................................... 10
Positionnement ............................................................................................................................................. 11
Collapsing ...................................................................................................................................................... 11
Unités de mesure .......................................................................................................................................... 13
Priorités des sélecteurs ................................................................................................................................. 14
Point sur les sélecteurs ..................................................................................................................................... 14
Sélecteurs compatibles IE6 ........................................................................................................................... 14
Sélecteurs compatibles IE7 ........................................................................................................................... 17
Sélecteurs compatibles IE8 ........................................................................................................................... 20
Cibler le dispositif de visualisation .................................................................................................................... 21

@media ......................................................................................................................................................... 21
Hack CSS ........................................................................................................................................................ 22
Les plus gros bugs et particularités d’IE6 et IE7 ............................................................................................ 22
Critiques et avenir du standard CSS ...................................................................................................................... 25
Les limites du CSS .............................................................................................................................................. 25
Indépendance de la présentation et de la structure ..................................................................................... 25
Accessibilité ................................................................................................................................................... 25
Simplicité ....................................................................................................................................................... 26
Un avant gout de CSS 3 ..................................................................................................................................... 26
Implémentations propriétaires (navigateur) ................................................................................................ 26
Quelques propriétés ..................................................................................................................................... 26
Font-face ....................................................................................................................................................... 29
Modèles de boite flexible .............................................................................................................................. 29
BONUS : LessCSS ................................................................................................................................................... 33
Variables ............................................................................................................................................................ 33
Mixins ................................................................................................................................................................ 33
Nested Rules ..................................................................................................................................................... 33
Operations......................................................................................................................................................... 34

HISTOIRE ET ENJEUX DU CSS
Les origines des CSS sont liées à trois alternatives majeures :
- HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?
- Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?
- La réponse aux besoins est-elle un format de description de la mise en forme, ou un langage de
transformation ?
L’HISTOIRE DU STANDARD
UN CONCEPT PARMI D'AUTRES, PRESENT DES L'ORIGINE DU WEB
- En 1992, le premier navigateur Web (« WorldWideWeb », renommé par la suite « Nexus ») recoure à
un mécanisme permettant de déterminer le rendu des polices de caractères, des couleurs ou de
l'alignement du texte. Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les
premières implémentations HTML ne comportant pas non plus d'éléments de présentation.
- Courant 1994-1995, le tout nouveau Netscape Navigator introduit les premiers éléments HTML de
présentation, tandis qu'apparaissent concurremment les premières propositions de formats de styles
externes.
LES PREMIERS DEVELOPPEMENTS – CSS 1
- La spécification CSS1 finale est publiée le 17 décembre 1996, et définit une cinquantaine de propriétés
tout en ayant en vue une compatibilité ascendante.
- En 1996, Internet Explorer 3.0 est le premier navigateur commercial à implémenter partiellement CSS
alors que celle-ci est encore en cours de formulation. Netscape Navigator milite quant à lui pour le
JSSS.
- En 2000, Internet Explorer 5.0 pour Macintosh lancé en mars 2000, basé sur Tasman, un moteur de
rendu spécifique sans rapport avec Trident, est le premier navigateur à supporter complètement (à
plus de 99 %) CSS1. Il introduit également le système de Doctype Switching.
CSS2, DES AMBITIONS PRECIPITEES
- Interruption du développement d'Internet Explorer, navigateur dominant du marché, de 2001 à 2006.
Håkon Lie écrivait en effet en 2005 : « 2001 est un tournant pour CSS. C'est l'année où Microsoft
produit Internet Explorer 6.0 qui offre une prise en charge fonctionnelle, bien qu'incomplète et
buggée, de CSS (…). Aucun autre navigateur n'a été capable de concurrencer WinIE en termes de
nombre d'utilisateurs. WinIE a, de ce fait, déterminé le sous-ensemble de CSS utilisable par les
auteurs. La prise en charge limitée de CSS par WinIE, combinée à un monopole de fait en matière de
navigateur Web, est actuellement le plus grave problème du déploiement de CSS. »
CSS 2.1, RETOUR AUX IMPLEMENTATIONS
- Les retours d'implémentation de CSS2 conduisent le groupe de travail CSS du W3C à rédiger à partir de
2001 une version révisée CSS 2.1 (« CSS Level 2, Revision 1 »), sur la base de ce qui était effectivement
adopté par les différents navigateurs.
CSS3, IMPLEMENTATION MODULAIRE

Le développement du troisième niveau des feuilles de styles en cascade commence dès 1999, parallèlement à
celui de CSS 2.1.
En 2008, aucun module CSS 3 n'est considéré comme terminé par le W3C, et l'implémentation dans les
navigateurs est donc marginale, souvent à titre de test, comme les fonctions -moz-xxx du moteur Gecko, dont
le préfixe limite l'utilisation aux seuls navigateurs basés sur Gecko.
LES ENJEUX
SEPARER LA STRUCTURE D'UN DOCUMENT DE SES STYLES DE PRESENTATION
L'un des objectifs majeurs de CSS est de permettre la mise en forme hors des documents. Il est par exemple
possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une
feuille de style CSS séparée (cf Zen Garden). Les styles sont appliqués au dernier moment, dans le navigateur
web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices,
permettant d'améliorer l'accessibilité, de changer plus facilement de présentation, et de réduire la complexité
de l'architecture d'un document.
Ainsi, les avantages des feuilles de style sont multiples :
- La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
- La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui
permet d'être plus efficace.
- Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font
référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme
rapide de l'aspect visuel.
- Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour
l'impression et une pour la lecture à l'écran. Certains navigateurs web permettent au visiteur de
choisir un style parmi plusieurs.
- Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de
balises ni d'attributs de présentation.
DECLINER LES STYLES DE PRESENTATION SELON LE RECEPTEUR
CSS permet de définir le rendu d'un document en fonction du média de restitution et de ses capacités (type de
moniteur ou de dispositif vocal), de celles du navigateur (texte ou graphique), ainsi que des préférences de son
utilisateur.
Les feuilles de styles peuvent être différenciées pour les médias suivants, selon CSS2.1 :
- all : quel que soit le média
- screen : écrans d'ordinateur de bureau
- print : pour l'impression papier
- handheld : écrans de très petite taille et clients aux capacités limitées (ex: WAP, mais pas iPhone)
- projection : quand le document est projeté
- tv : quand le document est affiché sur un appareil de type télévision
- speech : pour le rendu via une synthèse vocale (remplaçant aural, initialement prévu par CSS2.0
puis déprécié par CSS2.1)
Dans chaque média, les styles de présentation déterminés par l'auteur du document se combinent avec ceux
par défaut de l'agent utilisateur et ceux issus des préférences de l'utilisateur et de sa configuration personnelle.