L'importance du style

Une transition nécessaire

1. Le HTML sans le style

Traditionnellement, une page HTML se construit à coups de tags qui créent, paragraphes, titres et mises en forme du texte. Dans une approche WebApp, l’usage du HTML est sensiblement différent : on va produire un contenu HTML aussi neutre que possible, donc sans mise en forme. Ce sont donc les feuilles de style qui permettront de gérer la mise en forme avec beaucoup plus de finesse que ne le permet le HTML seul. La migration n’est pas particulièrement difficile, c’est juste une question d’habitude.

Au début, le Web n’était composé qu’en HTML. Il n’y a qu’à voir cet exemple, il s’agit d’une page d’accueil destinée à un jeu de taquin. Il s’agit d’une mise en page typiquement HTML : il n’y a pas une seule déclaration de style.

<!DOCTYPE html> 
<html> 
<head> 
<title>TAQUIN</title> 
<meta charset='utf-8'></meta> 
</head> 
<h1>TAQUIN</h1> 
<p><a href="new.html">Nouvelle partie</a></p> 
<p><a href="old.html">Partie existante</a></p> 
</html>

Le résultat n’est franchement pas engageant, et sans style il est difficile de faire mieux. En fait, c’est ainsi qu’était le Web à ses débuts.

Mais les temps ont changé, on ne peut plus faire une WebApp qui ressemble à cela. Heureusement, il suffit juste de définir quelques styles pour améliorer déjà un peu l’affichage.

2. Création d’une feuille de style

On parle généralement de CSS, ce qui signifie Cascading Style Sheet, feuille de style en cascade. On parle de cascade, car il est possible d’en cumuler plusieurs, les définitions de style les plus précises prenant le dessus sur les définitions les plus généralistes. Elles sont apparues avec le HTML 4, et ont déjà connu plusieurs évolutions, puisque l’on en est actuellement à la version 3. Une nouvelle version est en préparation, certaines fonctionnalités sont déjà disponibles sur certains navigateurs, mais il vaut mieux rester dans...

Généralités sur les CSS

1. Les unités

Il faut tout d’abord présenter les unités de mesure CSS utilisées dans les styles, c’est essentiel pour réussir une mise en page adaptative. Elles sont utilisées dès qu’il s’agit de définir une dimension, qu’il s’agisse de la taille d’une police de caractères, l’épaisseur d’un trait, la longueur d’un objet ou d’une de ses bordures. Il existe toute une variété d’unités de mesure, mais certaines sont plus utiles que d’autres. Une abréviation d’un à deux caractères permet de spécifier l’unité, elle doit être accolée à la valeur numérique qui la précède.

On pense immédiatement à mesurer les dimensions en pixels, ce qui se fait déjà couramment en langage HTML. C’est l’abréviation px qui doit suivre la valeur. Par exemple, border-width : 1px permet de définir une bordure d’un pixel d’épaisseur. Il faut utiliser avec parcimonie les dimensions en pixels, comme il s’agit de mesures absolues, elles ne varient pas lorsque l’on fait varier le niveau de zoom ou que l’on utilise un périphérique d’affichage avec une définition différente de celle d’origine. Par conséquent, on en réservera l’usage aux éléments de petites dimensions (entre un et trois pixels), comme l’épaisseur de la bordure d’un élément. On peut aussi l’utiliser pour fixer la largeur générale du document, si l’on ne veut pas qu’il s’étire sur toute la largeur de l’écran. Il faut cependant utiliser cette possibilité avec précaution, le résultat pouvant être inadapté aux terminaux mobiles.

La mesure en pourcentage est aussi fréquemment utilisée. On utilise le symbole %, que l’on emploie aussi en langage HTML pour définir la dimension des éléments composant la page. Cela permet de spécifier des dimensions relatives, ce qui est très pratique car le rendu s’adapte alors aux caractéristiques (résolution, zoom) de chaque affichage. Par exemple...

La généralisation du div

1. Le placement

Maintenant de retour au jeu de taquin, l’étape suivante va consister à positionner correctement les deux boutons. Il faut tout d’abord cesser d’utiliser le tag p, qui ne doit servir qu’à créer des paragraphes de texte. Le tag div, qui est utilisé à la place, est plus adapté lorsqu’il s’agit de mettre en page des blocs, et justement, les deux boutons sont des blocs. De la même façon, les styles décrivant le contour et le fond du bouton ne sont plus définis pour le tag a, car c’est aussi le tag div qui s’en charge.

<!DOCTYPE html> 
<html> 
<head> 
<title>TAQUIN</title> 
<meta charset='utf-8'></meta> 
<style> 
body 
{ 
      margin:0px 
} 
 
h1 
{ 
      font-family:sans-serif; 
      margin:0px; 
      padding:0.5em 1em 0.5em 1em; 
      background-color:#C90 
} 
 
a 
{ 
      font-family:sans-serif; 
      text-decoration:none; 
      color:#FFF 
} 
 
div 
{ 
      border:1px solid #000; 
      padding:0.5em; 
      margin:0.5em; 
      background-color:#960 
} 
 
</style> 
</head> 
<h1>TAQUIN</h1> 
<div><a href="new.html">Nouvelle partie</a></div> 
<div><a href="old.html">Partie existante</a></div> 
</html>

C’est un peu mieux. Les boutons sont bien alignés et espacés, mais ce n’est pas encore terminé, ils sont encore trop larges et le texte n’est pas centré.

Mais il y a moyen de faire mieux. Il suffit de modifier les définitions de style des tags h1 et div, le reste du code étant inchangé.

h1 
{ 
      png font-family:sans-serif; ...

Tout en div

1. Transition en douceur

Cette nouvelle version du programme de taquin fait un usage intensif des blocs div. Tout a été remplacé, même les liens. Les interactions de l’utilisateur sont gérées au moyen de pseudo-classes, et des événements JavaScript prennent en charge les liens.

<!DOCTYPE html> 
<html> 
<head> 
<title>TAQUIN</title> 
<meta charset='utf-8'></meta> 
<style> 
body 
{ 
      margin:0px 
} 
 
div.mainTitle 
{ 
      font-family:sans-serif; 
      font-size:1.8em; 
      font-weight:bold; 
      margin:0px; 
      padding:0.5em 1em 0.5em 1em; 
      background-color:#C90; 
      text-align:center 
} 
 
div.buttonLink 
{ 
      font-family:sans-serif; 
      text-decoration:none; 
      color:#FFF; 
      border:1px solid #000; 
      padding:0.5em; 
      margin:1em auto 1em auto; 
      background-color:#960; 
      width:10em; 
      text-align:center 
} 
 
div.buttonLink:hover 
{ 
      cursor:pointer; 
      filter:brightness(1.1) 
} 
 
div.buttonLink:active 
{ 
      filter:brightness(1.2) 
} 
</style> 
</head> 
<div class='mainTitle'>TAQUIN</div> 
<div class='buttonLink' 
onClick=document.location='new.html'>Nouvelle partie</div> 
<div class='buttonLink' 
onClick=document.location='old.html'>Partie existante</div> 
</html>

Inutile d’insérer une copie d’écran, l’aspect est similaire à...