Articles
Quelle que soit la taille de votre site Web, son
design évoluera avec le temps. Parce qu'ils permettent de séparer le contenu de
sa présentation, les CSS représentent le moyen idéal pour permettre cette
évolution sans avoir à réécrire l'ensemble de vos pages.
En bref ...
Qu'est-ce (que sont) que le(s) CSS ? C'est un
système destiné à mettre en forme les contenus de pages Web. La partie CSS d'un
document Web se contente de définir les différents styles de textes ou de blocs
qui seront utilisés pour la mise en forme tandis que la partie HTML ne contient
que le texte encadré de quelques balises. Chaque style CSS se voit attribuer un
nom. Pour attribuer l'un de ces styles à un segment de texte particulier, il
suffit d'ajouter les attributs "class=nom_du_style" ou
"id=nom_du_style" au sein de n'importe quelle balise HTML.
Que signifie le sigle CSS ? CSS est
l'abréviation de "cascading style sheets" (feuilles de style en
cascade). Dans le système du CSS, on crée des styles de présentation dont on
définit les caractéristiques (taille et couleur du texte, par exemple). Ces
définitions peuvent figurer dans un ou plusieurs documents séparés du document
contenant le texte de la page. Un style défini dans un document peut être
redéfini ou légèrement modifié par un autre document qui sera situé après lui
dans l'ordre de lecture. Il peut également être redéfini dans une balise. Ces
définitions/redéfinitions sont donc faites en "cascade".
Pourquoi utiliser les CSS ? Une fois votre site
organisé à l'aide de CSS, il vous suffira de changer les définitions de style
figurant dans une seule feuille CSS pour que l'ensemble de votre site soit mis
à jour et voit sa présentation modifiée. Les CSS permettent également les
présentations "alternatives" qui offrent à l'internaute le choix de
l'habillage du site. En vous obligeant à structurer vos pages de façon précise,
les CSS vous amènent à organiser votre site, ce qui facilitera grandement ses
évolutions futures. Cette organisation facilite également
l'"accessibilité" de votre site, c'est-à-dire sa navigation à travers
des moyens un peu particuliers (navigation sans souris pour les handicapés
moteurs, navigation à l'aide de lecteurs automatiques, pour les malvoyants,
etc.)
En détail ...
Pourquoi est-il souhaitable de séparer
la présentation du contenu ? L'avantage principal de cette
séparation est de faciliter la maintenance du site, c'est-à-dire ses capacités
d'évolution dans le temps. On peut également souhaiter :
1-
Clarifier le code ou alléger la lecture du code (un code moins brouillon sera
plus facile à consulter, donc à étudier, à modifier ou à transmettre à
quelqu'un d'autre)
2- Faciliter la modification de la présentation
ou du contenu (possibilité de travailler en équipe plus efficacement, par
exemple)
3- Uniformiser la présentation sur plusieurs
pages (un seul fichier CSS à modifier pour que les changements se répercutent
sur l'ensemble du site)
Consulter
l'article très complet du W3C du Québec à ce
sujet.
On oublie
cependant souvent que cette séparation n'est pas toujours possible ni
souhaitable. Lire à ce sujet "Le Full CSS
est-il un mythe ?".
Qu'est-ce que la sémantique ? La
sémantique étudie la signification d'un discours, c'est-à-dire le sens des mots
et des phrases. Dans le cadre de l'utilisation des balises HTML, la sémantique
consiste à définir un sens précis à chaque balise et à utiliser chacune d'elles
en respectant strictement les usages qui leurs sont réservés. H1, H2, H3
encadrent des titres, par exemple, et vous ne devez pas utiliser ces balises
pour "mettre en gras" une portion de texte qui n'est pas un titre. La
balise <p> ne devrait jamais être utilisée pour créer un espace, mais
uniquement pour encadrer une portion de texte indépendante, etc. Respecter la sémantique
des balises, permet de structurer le document correctement, indépendamment de
la forme qu'il va prendre. Ceci permet aux programmes qui traiteront
l'information contenue dans la page (dont Google ou les lecteurs de pages pour
handicapés, par exemple), de l'interpréter correctement, et donc de l'utiliser
comme il se doit. . Le respect de cette sémantique est donc un avantage en
termes d'accessibilité. Consulter l'article de OpenWeb
pour en savoir plus.
Qu'est-ce que l'accessibilité d'un
site Web ? Un site est dit accessible lorsqu'il est
utilisable dans un grand nombre de conditions de navigation. L'accessibilité du
Web intéresse aussi bien les personnes handicapées (par une inaptitude physique
ou une déficience visuelle, auditive, cognitive, neurologique ou liée à la
parole) que tout individu devant faire face à des difficultés liées à des
aspects intrinsèques (langue maternelle, culture, tranche d'âge) ou à leur
environnement (matériel et logiciel désuets, infrastructure réseau obsolète,
droits réseaux limités, connexion à faible débit, contexte de navigation). Le W3C Québec propose une réflexion détaillée sur ce
thème. A lire aussi : "Accessibilité, oublions les handicapés" par cybercodeur.
Quelle est la différence entre class
et ID ? Les classes sont destinées à être utilisées
plusieurs fois dans le document HTML qui sera mis en forme alors que les ID ne
doivent en principe être utilisés qu'une seule fois dans chaque page HTML. Pour
définir une classe CSS, on ajoute un point devant son nom. Pour définir une ID,
on ajoute un dièse devant son nom. A titre d'exemple :
On utilisera une classe pour
définir un style de paragraphe.
On utilisera une ID pour définir
la position d'un bloc particulier dans la page.
Les ID sont également pratiques pour
l'utilisation de certaines fonctions des langages Javascript et Flash pour
lesquels ils remplacent peu à peu l'attribut "name". On appelle
dorénavant les objets et calques avec getElementById, ce qui facilite la
compatibilité entre tous les navigateurs. Ajoutons enfin que l'ID peut servir
d'ancre de navigation : le code <a href="#nom_du_style">Voir le
bloc</a> permet de naviguer jusqu'au bloc ayant l'ID
"nom_du_style".
Qu'est-ce que le W3C ? W3C est l'abréviation de " World Wide Web
Consortium". Il s'agit d'une association démocratique gérée par le
Massachusetts Institute of Technology (MIT) au USA, le European Research
Consortium for Informatics and Mathematics (ERCIM) en Europe et l' Université
Keio au Japon. L'objectif de ce consortium est de définir les règles d'écriture
des langages du Web (HTML, CSS, Javascript, etc.). Pour faire court, disons que
le W3C est aux langages du Web ce que l'académie française est à la langue
française.
Pourquoi faire valider ses pages Web
par W3C ? Faire valider ses
pages, c'est s'assurer qu'elles sont conformes aux normes édictées par
le W3C. Pourquoi respecter l'orthographe et la grammaire ? Pour s'assurer qu'on
sera bien compris par tout le monde. Ce n'est pas strictement indispensable,
mais ça aide beaucoup !
Note : Validateur.ca permet de vérifier/valider
l'ensemble de votre site en une seule opération.
Qu'est-ce qu'un "DocType" et
à quoi ça sert ? Le langage HTML évolue avec les années. Le
doctype d'une page Web indique aux navigateurs ou autres lecteurs de pages
qu'elle est la version précise du langage utilisé afin qu'ils sachent
exactement comment "comprendre" le contenu de cette page. DocType est
l'abréviation de "document type", c'est-à-dire "type de
document". Le doctype est une ligne qui doit être placée en tête de page,
avant quoi que ce soit d'autre, et qui doit respecter une syntaxe extrêmement
précise pour être valable. Le coin des experts et Alsacréations vous proposent d'autres réflexions
sur ce sujet.
Exemple
de texte
<img
src="images/exemple-image.jpgf" alt="image"
width="100" height="100">
</div>
Dans cet exemple, la balise <div> n'a
d'autre but que "d'encadrer" le texte et l'image dans le but de
positionner ce contenu. Cette balise ayant un "ID", on va pouvoir
déplacer son contenu par une liste dattributs CSS telle que :
#bloc_exemple {position: absolute; left: 100px;
top: 150px;}
Dans la plupart des cas, c'est la balise
<div> qui est utilisée comme contener, mais ce terme n'est pas
spécifiquement réservé à cette balise.
Des mises
en page un peu maladroites peuvent aboutir à une multiplication de conteners
<div> à l'intérieur d'une page. On parle alors ironiquement de
"divite", comme s'il s'agissait d'une maladie.
Qu'est-ce qu'un layer (calque) ? C'est
le nom donné par les utilisateurs des forums à une balise ayant l'attribut "position: absolute". Cette appellation
a d'abord été utilisée par le logiciel d'édition "Dreamweaver" avant
de se généraliser. On comprend le sens de cette appellation lorsque l'on
réalise que des blocs positionnés en absolu peuvent se superposer les uns aux
autres, tout comme des calques.
Qu'est-ce que les
"pseudo-frames" (pseudo-cadres) ? Il
existe un système de mise en page nommé "frames"
(ou "cadres") qui permet de
construire une page Web à partir de plusieurs documents HTML. Ce système est
malheureusement victime de graves inconvénients parfaitement résumés par Denis Boudreau. Les "pseudo-frames"
tentent de proposer les avantages des "frames" sans en avoir les
inconvénients. Le but principal d'une mise en page en "pseudo-frames"
est d'avoir un menu fixe et un contenu fluide,
Aucun commentaire:
Enregistrer un commentaire