Chapitre 6 : CSS : Faites-le avec du style

Dans cette page :

← Chapitre 5 — Chapitre 7 →

Sommaire du chapitre

  • Le style pour les petits et l’écran
    • Le bon pixel et le mauvais pixel
      • Les unités en CSS
      • La fenêtre d’affichage : pixels réels et pixels CSS
      • Taille de la fenêtre et zoom initial (viewport)
    • Insister sur la compacité
    • Privilégier la linéarité
      • Largeur des blocs
      • Blocs flottants et blocs positionnés
    • Accentuer les contrastes
    • En résumé…
  • Des styles adaptés au contexte
    • Cibler un type de média donné
      • Déclarer un type de média
      • @media handheld : une utilité limitée
    • Les requêtes de média pour un ciblage plus précis [*]
      • width ou device-width : telle est la question
      • Détecter l’orientation du terminal
  • Quelques techniques d’adaptation
    • « Le retour de la feuille de styles mobile »
    • Cibler les navigateurs de bureau plutôt que les navigateurs mobiles
    • Adaptation côté serveur : pour CSS aussi !
    • Prévoir l’avenir
  • Tirer parti de CSS
    • Plusieurs tailles d’images
    • Un menu voyageur
    • Récapitulons

      Apartés

      • Attention Largeur de l’écran… ou presque
      • Attention Il y a compact et compact
      • Le Web vu du ciel Et les tableaux ?
      • Le Web vu du ciel La fin du règne pour le type de média handheld ?
      • Attention device-width, non deux noms !
      • Point de vue d’expert CSS et les mobiles

      Extraits de code

      Les différents morceaux de code du chapitre sont à votre disposition ci-dessous pour faciliter leur copie…

      Déclaration d’une fenêtre d’affichage de 520 pixels de large
      <meta name="viewport" content="width=520,initial-scale=1.0" />

      Déclaration conseillée pour la fenêtre d’affichage
      <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Une page à la bonne taille…</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0" />
 </head>
 <body>
  […]
 </body>
</html>

      Balises imbriquées
      <body>
 <div>
  <div>
   <p>Un paragraphe imbriqué</p>
  </div>
 </div>
</body>

      Feuille de styles faussement anodine pour le contenu précédent
      body, div, p { margin: 1em; }

      Utiliser des pourcentages pour centrer un bloc
      <div style="width: 80%; margin: 0 auto;">
 <p>
  Ce bloc est centré avec une largeur imposée de 80%.
 </p>
</div>

      Image flottante à droite d’un texte
      <p>
 <img style="float: right" src="tidoust.png"
      alt="Avatar de tidoust" />
 Tidoust aime faire flotter son avatar à droite de l’écran.
</p>

      Positionnement absolu et marges
      <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Positionnement absolu et marges</title>
  <style type="text/css">
   /* Le menu est affiché en haut à gauche */
   #menu { position: absolute; top: 2em; left: 0; width: 5em; }
   /* Contenu décalé de 6em vers la droite pour laisser de la
    place au menu à gauche */
   #contenu { margin-left: 6em; }
  </style>
 </head>
 <body>
  <div id="contenu">[…]</div>
  <div id="menu">[…]</div>
 </body>
</html>

      Correction des styles de l’exemple précédent
      /* Le menu est affiché en haut à gauche */
#menu { position: absolute; top: 2em; left: 0; width: 5em; }
/* Contenu décalé de 6em vers la droite pour laisser de la
 place au menu à gauche */
#contenu { position: absolute; left: 6em; }

      Lien vers des feuilles de styles spécifiques à un type de média en HTML
      <link rel="stylesheet" href="mobile.css" media="handheld" />
<link rel="stylesheet" href="bureau.css" media="screen" />

      Import de feuilles de styles depuis une autre feuille CSS
      /* Feuilles de styles importées dans tous les cas */
@import "commun.css";
@import "commun-aussi.css" all;
 
/* Styles spécifiques aux terminaux mobiles */
@import "mobile.css" handheld;
 
/* Styles spécifiques aux écrans de bureau */
@import "bureau.css" screen;

      Règles spécifiques en fonction du type de média
      /* Règles appliquées dans tous les cas */
h1 { font-size: 2em; }   /* Taille du titre doublée */
p { margin: 1em; }       /* Marges des paragraphes */
@media all {
 #menu { float: right; } /* Menu flottant à droite */
}
 
/* Règles spécifiques aux terminaux mobiles
(écrasent les règles ci-dessus) */
@media handheld {
 h1 { font-size: 1.4em; } /* Titre plus petit */
 p { margin: 0; }         /* Pas de marges entre paragraphes */
 #menu { float: none; }   /* Pas de menu flottant */
}

      Exemple de requêtes de média CSS
      /* Styles spécifiques aux fenêtres dont la largeur est: */
/* 1. strictement plus grande que 320 pixels: */
@media all and (min-width: 321px) { … }
/* 2. plus petite que 480 pixels: */
@media all and (max-width: 480px) { … }

      Styles spécifiques aux écrans dont la largeur est inférieure à 480 px
      @media all and (max-device-width: 480px) { … }

      Cibler différentes tailles d’écran
      @import "petit.css" all and (max-width: 320px);
@import "moyen.css" all and (min-width: 321px)
                        and (max-width: 480px);

      Lier deux feuilles de styles dans la page web
      <link rel="stylesheet" href="core.css"  media="screen" />
<link rel="stylesheet" href="handheld.css"  media="handheld,
only screen and (max-device-width:480px)" />

      Lier core.css à deux autres feuilles de styles via la directive @import
      @import url("screen.css"); 
@import url("antiscreen.css") handheld; 
@import url("antiscreen.css") only screen and
(max-device-width:480px);

      Une méthode simple pour cibler petites et grandes fenêtres
      <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
  <title>La méthode simple</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0" /> 
  <link rel="stylesheet" type="text/css" href="mobile.css" /> 
  <link rel="stylesheet" type="text/css" href="screen.css"
        media="only all and (min-width: 600px)" /> 
  <!--[if lt IE 9]><link rel="stylesheet" type="text/css"
        href="screen.css"  media="screen" /><![endif]--> 
 </head>
 <body>
  […]
 </body>
</html>

      Annulation des styles spécifiques aux mobiles
      /* Dans mobile.css */
body, p { margin: 0; }       /* Pas de marges */
#menu a { padding: 2em; }    /* Liens plus espacés */
.tropgros { display: none; } /* Trop gros pour les mobiles */
 
/* Dans screen.css */
body, p { margin: inherit; }
#menu a { padding: inherit; }
.tropgros { display: inherit; }

      Adaptation des CSS côté serveur
      # Condition: Pour les navigateurs IE Mobile
RewriteCond %{HTTP_USER_AGENT} " MSIE " [NC] 
RewriteCond %{HTTP_USER_AGENT} "Windows Phone| IEMobile" [NC] 
# Règle: Interdiction d’accéder à screen.css
RewriteRule ^screen.css$ [F,L] 
 
# Ne pas oublier de spécifier l’en-tête Vary pour indiquer
# une adaptation en fonction de l’en-tête User-Agent
<Files screen.css>
 Header merge Vary User-Agent
</Files>

      Déclaration de la petite taille d’image dans la page HTML
      <p class="illustration mounier">
 <img src="mounier-petit.jpg" alt="Le Mont Mounier"
      width="320" height="240" />
</p>

      Propriétés CSS à déclarer dans screen.css
      /* Supprime l’affichage des petites images */
.illustration img { display: none; }
 
/* Remplace l’image par une image plus grande */
.mounier {
 width: 800px; height: 600px;
 background: transparent url("mounier-grand.jpg") no-repeat;
}

      Exemple de page HTML avec un menu
      <h1>Un menu voyageur</h1>
<p class="menu"><a href="#menu">Navigation</a></p> 
<div id="conteneur"> 
 <div id="contenu"> 
  […]
 </div>
 <div id="menu"> 
  <ul>
   <li></li>
   […]
  </ul>
 </div>
</div>

      Déplacement du menu dans screen.css
      #conteneur { position: relative; } 
.mob { display: none; } 
#menu { 
 position: absolute; top: 0; width: 100%;
}
li { display: inline; }
#contenu { position: absolute; top: 3em; }

      Liens

      Retrouvez les liens donnés dans le chapitre ci-dessous :

      Pour aller plus loin…

      Erreurs et corrections connues

      • Notez que les navigateurs (mobiles ou non) téléchargent les feuilles de style marquées avec une requête de media qui a priori ne les concerne pas : autrement dit, les requêtes de media permettent d’optimiser l’affichage d’une page Web, mais ne permettent pas d’alléger le chargement de la page ; le chapitre 8 donne des indications pour alléger les feuilles de style.

      ← Chapitre 5 — Chapitre 7 →