Dans les technologies du web on aime à parler en acronyme, avec bien souvent des chiffres derrières. Petit échantillon des derniers né en la matière : web 2.0, HTML 5 ou CSS 3. Qui sont-ils, à quoi servent-ils ? petit aperçu du dictionnaire de la famille, le CSS 3.
Le CSS par la pratique
Imaginez un mach de football dont l’arbitre devrait à
chaque faute énoncer l’explication d’une faute. « Le
joueur attaquant 10 de l’équipe rouge à reçu une passe alors
qu’il se trouvait entre le dernier défenseur et le gardien adverse
au moment de la passe... ». Offside ! Hors-jeu !
précédé d’un bon coup de sifflet permet à l’arbitre de résumer
la situation.
Le CSS c’est pareil. Au lieu du ballon rond, parlons web. Un
univers rempli de règles dans lequel aucun élément ne choisit sa
place par hasard, ni sa couleur, ni sa taille. Finalement, pas de
place au hasard dans le web, mais là c’est une autre discussion.
Revenons-en aux règles.
Un site web, c’est comme un livre, les éléments similaires
doivent présenter une uniformité dans leur apparence et leur
position. Les paragraphes seront tous de la même couleur, disons
noir, de taille 11 et de police Arial, avec un alignement à gauche
et un interligne de 1,5. Jusqu’ici rien d’étrange. Prenons le
cas d’un site web avec énormément de paragraphes. Va-t-on à
chaque fois définir la couleur, la position, la police, avec le
risque de devoir tout redéfinir si la taille doit passer à 10 ?
Non, parce qu’il y a le CSS.
Acro-quoi ?
Acronyme. CSS pour Cascade Style
Sheet, ou feuille de style en cascade. Un nom complexe pour un
langage qui simplifie bien des choses. Les débuts du CSS se font peu
de temps après celui du HTML (voir l'article consacré), dès le début des années 90. Sa
maturation sera cependant lente, et la version entièrement intégrée
par tous les navigateur ne verra le jour qu'en 2007, sous le nom de
CSS 3.0.
Pour reprendre l’image de l’arbitre de football, le CSS permet de
définir une seule fois une règle, et ensuite de choisir à quel cas
elle s’applique. Dans le cas de l’arbitre c’est « offside »,
dans celui du CSS c’est « paragraphe ». Il suffit
d’appeler un groupe de mots « paragraphe » et toutes les
règles de taille, position, couleur, et j’en passe,
s’appliqueront.
 | ||
| HTML (à gauche) et CSS auteur : Boskampi source : https://pixabay.com/photo-1832991/ |
Des classes...
Menons encore une comparaison pour
illustrer le prochain sujet. Je fais parti de plusieurs groupes
d’individus : famille, citoyen d’un pays, étudiant à la
HES, homme, et bien d’autres. Dans chacun de ces groupes sont a
priori comprises plusieurs caractéristique. Parler au moins une des
langues du pays en question, avoir la possibilité de porter une
moustache pour le genre homme, ou avoir une carte d’étudiant de la
HES. Ce sont les classes du CSS.
Une classe est le nom de famille
d’un élément d’une page web, ou son genre. Tous les Dupont
parlent français, donc le petit Marc qui se voit naître Dupont
parlera français. Ainsi tous les titres d’un site web qui seront
de la classe .titre_de_mon_site hériteront de propriétés
identiques. Le point devant la classe permet de la distinguer. Mais
la distinguer de quoi ?
et des identifiants
C’est la que le statut d’individu apparaît. Les membres d’une
famille n’en sont pas moins des individus, et le petit Marc Dupont
pourra très bien avoir l'envie d’apprendre le finlandais. Il
répondra donc aux caractéristique de la famille Dupont et parlera
toujours français, mais il faudra aussi lui attribuer un statut qui
reconnaisse ses compétences dans la langue scandinave. C’est à
cela que sert l’identifiant, reconnaissable à un # placé devant
le nom. Ainsi Marc Dupont appartient à .Dupont mais c’est avant
tout un individu, un #Marc.
Cet identifiant permet de
reconnaître un élément qui se veut unique dans une page,
mais qui peut se retrouver dans plusieurs page. Et le jour où le
petit Marc sera grand et aura toute une famille à lui, alors on
fondera peut-être une classe à son nom, avec des petits .Marc à
travers toutes les pages.
Un puissant outil
Pour reprendre la définition du W3C, « le CSS est un langage
de feuille de style utilisé pour définir la présentation d’un
document écrit en langage de balise ». Cela inclus aussi bien
le HTML que le XHTML ou le XML. Ses avantages sont multiples :
- Séparation du contenu est de la présentation, permettant d’efficacement et facilement modifier l’apparence d’une page web sans avoir à en modifier le contenu.
- Meilleures gestion de la largeur de la présentation, dans le cas d’un site web qui doit s’adapter tant aux écrans larges qu’aux smartphones.
- Un allègement du téléchargement des pages, les règles n’étant pas décrites pour chaque élément.
Vous l'aurez compris, le CSS est devenu un outil incontournable du webdesign.
Frank.
Frank.
