Chapitre 6 : CSS : Faites-le avec du style

Dans cette page :

← Chapitre 5Chapitre 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 5Chapitre 7 →