FLASH INFORMATIQUE FI



css2, les habits neufs de l’empereur




Natalie MEYSTRE


Une css, cascading stylesheet, (ou feuille de style) est un document qui ordonne l’aspect et la mise en page des pages html. Ainsi, plutôt que de définir pour chaque cas l’aspect désiré d’un caractère ou d’un groupe de caractères au moment où il apparaît sur une page html, on place ce genre d’information sur un document indépendant, sur lequel on pointe.
On voit immédiatement les avantages que cela comporte :

  • le contenu proprement dit est séparé des indications de mise en page ;
  • il est possible de créer plusieurs feuilles de style selon votre média (écran, imprimante, pda,...)ou selon vos goûts sans avoir à retoucher toutes les pages html de votre site ;
  • si vous avez choisi une couleur pour un style de caractère et qu’elle ne vous plaît plus, plus besoin de parcourir chaque page à la recherche des mentions de ladite couleur, il suffit de la corriger dans la feuille de style !
  • le document html est plus court, donc plus léger ;
  • de même qu’il le fait avec une image qui se répète, le navigateur de votre visiteur stocke la feuille de style dans son cache, images de fond comprises. Les temps de téléchargement des pages se raccourcissent.

Maîtriser l’aspect des pages

Dans un premier temps, les css se contentaient de définir les polices, les couleurs, les dimensions des caractères, plus quelques autres fonctionnalités, via les balises courantes (<p> <h1>,...) Mais, vu le succès de cette technologie, l’offre des paramètres proposés s’est amplement étoffée. Il est désormais possible de placer des images de fond, de déterminer la position des éléments dans la page, de leur donner des cadres, de créer des listes à puces personnalisées, de positionner des éléments par rapport à d’autres, de jouer avec des marges, des espacements, des effets sur les caractères, etc.

Créér des effets

Pour les allergiques au Javascript, certains effets obtenus via du script peuvent être programmés en css (boutons dynamiques, menus déroulants).

Une syntaxe concise et élégante

Une feuille de style définit en premier lieu les balises génériques (body, p, h1...), puis, selon les besoins particuliers, des classes (.class1,.class), réutilisables à volonté, ainsi que des id (#id1, #id2), qui ne peuvent apparaître qu’une seule fois par page et servent essentiellement à définir des zones (pour le bandeau, des colonnes, le pied de page).
Chaque balise peut se voir attribuer plusieurs classes.

Exemple :

ne dites pas :

.redbox         { font-weight: bold; padding-left: 5px; width: 100px; background-color:red }
.bluebox         { font-weight: bold; padding-left: 5px; width: 100px; background-color:blue }

mais :

.box         { font-weight: bold; padding-left: 5px; width: 100px; }
.red        { background-color:red }
.blue        { background-color:blue }

et dans la page :

<div class="box red">Mon texte</div>

De plus, pour un élément ou classe, il est possible de préciser un aspect particulier pour chacun de ses composants, par exemple l’aspect des liens pour une classe donnée, voir, plus sophistiqué, l’aspect d’un lien pointant sur une url définie.

Ne nous emballons pas

À noter, et c’est un gros bémol à tant d’enthousiasmantes innovations, que ces nouveaux paramètres :

  • ne sont pas lus par les anciennes versions des navigateurs (Netscape 4, Internet Explorer sur Mac)
  • ne sont pas interprétés de la même manière par Internet Explorer et par la famille Firefox/Mozilla/Netscape.
  • peuvent engendrer dans les situations limites un chevauchement des contenus, dû à une gestion hasardeuse des dimensions fixes et relatives.

Cependant, pour la grande joie des programmeurs et des puristes du Web, il est désormais possible de faire l’économie de tant de lignes de code imposées par les graphistes pour que la mise en page des pages soit conforme à leur charte graphique. Je fais allusion aux tables imbriquées comme des poupées russes et aux images pour caler les éléments, les fameux pixel.gif et autre spacer.gif.

CSS pour jahia

Vous reconnaîtrez donc une mise en page utilisant les css2 à son code exempt de balise <table>pour la mise en page (nouveau site le l’A3, a3.epfl.ch). En est-il ainsi dans la nouvelle version de notre cms Jahia ? Nous devons admettre que nous nous sommes résignés à des compromis. En effet, nos objectifs étaient de respecter la Charte graphique telle qu’elle a été définie et de maintenir l’aspect des pages identique à ce que nos utilisateurs avaient composé avec l’ancienne version de Jahia.
En utilisant une syntaxe purement css, des conflits apparaissaient entre la feuille de style et le code html rajouté par les divers administrateurs de site, c’est pourquoi nous avons quand même défini une <table> définissant la structure principale de la page.

Charte graphique et modèles en css

Des modèles de mise en page et une feuille de style purement css sont à disposition des personnes intéressées à la page suivante : http://atelierweb.epfl.ch/page1110.html.
Vous pouvez les récupérer pour votre propre travail, mais sans garantie de manipulations ultérieures telles que

  • ajout de <table> dans une page
  • titre de boîte trop long, bousculant les successions d’éléments
  • image splash d’une largeur différente de 375px
  • ...

Quelques éléments de la css epfl

À la demande générale, les polices de dimension fixe ont été remplacées par des polices adaptables, paramétrables dans les navigateurs. La css comporte 4 catégories :

1. les balises génériques

body  { font-size: 0.6em; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular, sans-serif; margin-top: 15px }

Définition de la balise de texte, de titre

p          { margin: 0; padding: 0 }
h1        { color: #999999; font-size: 1.2em; font-weight: bold; margin: 0; padding-top: 7px; padding-bottom: 4px }
.clear {clear : both}
. . .

Dans la définition du titre, le padding permet d’aérer la succession de paragraphe. L’attribut clear:both empêche le nouveau paragraphe de se mêler au précédent si ce dernier comporte une image.

2. des balises uniques (id)

pour diviser la page en plusieurs zones, à savoir le bandeau et le pied de page, puis pour la page contenu, les 3 colonnes et, pour la page vitrine, l’image splash surmontant 2 colonnes, une colonne centrale et une colonne de droite.

#header_title1  { margin-right: 30px; margin-bottom: 1px; margin-left: 159px; height: 34px }
#left { padding-top: 10px; position: absolute; top: 98px; left: 10px; width: 155px }

3. des classes à utiliser pour le positionnement des images, des éléments de la boîte de recherche

4. les classes pour les différentes couleurs de bandeau et de boîte

.headercolor_admin1 { background-color: #cccccc;}
.headercolor_admin2 { background-color: #999999;}
...

Le but de cet article n’est pas de détailler chaque élément de la css epfl, vous vous ferez une meilleure idée en testant nos modèles en ligne, et en posant vos questions à Natalie.Meystre@epfl.ch.

Quelques références



Cherchez ...

- dans tous les Flash informatique
(entre 1986 et 2001: seulement sur les titres et auteurs)
- par mot-clé

Avertissement

Cette page est un article d'une publication de l'EPFL.
Le contenu et certains liens ne sont peut-être plus d'actualité.

Responsabilité

Les articles n'engagent que leurs auteurs, sauf ceux qui concernent de façon évidente des prestations officielles (sous la responsabilité du DIT ou d'autres entités). Toute reproduction, même partielle, n'est autorisée qu'avec l'accord de la rédaction et des auteurs.


Archives sur clé USB

Le Flash informatique ne paraîtra plus. Le dernier numéro est daté de décembre 2013.

Taguage des articles

Depuis 2010, pour aider le lecteur, les articles sont taggués:
  •   tout public
    que vous soyiez utilisateur occasionnel du PC familial, ou bien simplement propriétaire d'un iPhone, lisez l'article marqué tout public, vous y apprendrez plein de choses qui vous permettront de mieux appréhender ces technologies qui envahissent votre quotidien
  •   public averti
    l'article parle de concepts techniques, mais à la portée de toute personne intéressée par les dessous des nouvelles technologies
  •   expert
    le sujet abordé n'intéresse que peu de lecteurs, mais ceux-là seront ravis d'approfondir un thème, d'en savoir plus sur un nouveau langage.