Page Web Responsive avec les styles Css
Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Pages Web Responsive
Vous le savez, les pages Web doivent désormais pouvoir s'adapter à toutes les plateformes, qu'il s'agisse de smartphones, de tablettes ou d'ordinateurs de bureau. Pourtant les supports sont bien différents pour continuer d'offrir un contenu organisé et clair quel que soit le contexte. Mais l'enjeu est de taille. Il se situe au niveau du référencement. Pour Google, un site qui n'est pas Mobile Friendly, est déclassé et relégué dans les bas-fonds de l'index. Cette nouvelle astuce Css démontre comment ajuster automatiquement le contenu des pages aux dimensions variables des fenêtres de destination.
Dans l'exemple illustré par la capture, des articles sont écrits dans plusieurs colonnes. Cette disposition est parfaite pour un ordinateur de bureau avec un écran suffisamment grand.
Mais si l'utilisateur décide de réduire la taille de la fenêtre de façon significative, tous les articles basculent automatiquement les uns en dessous des autres. La page Web s'ajuste donc pour offrir un contenu suffisamment explicite et lisible depuis un Smartphone.
Sources de développement
Pour la démonstration de cette importante technique, nous suggérons d'appuyer l'étude sur une page Web existante.
- Télécharger le fichier compressé page-web-responsive.rar en cliquant sur ce lien,
- Puis, le décompresser dans le dossier de votre choix,
- Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,
Comme vous pouvez le voir, les blocs de textes sont bien présents mais ne cohabitent pas. Dans cette version de base, ils sont tous disposés les uns en dessous des autres. Il semblerait que nous ayons du chemin à parcourir. Quoique, pas tant que ça et nous allons le découvrir.
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
...
<title>Pages Web Mobile Friendly</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mes-styles.css">
<body>
...
La construction qui nous concerne est placée plus bas dans le code Html, plus précisément dans le calque (Balise Div) associé au style ligne.
...
<div class="ligne">
<div class="article">
<h2>Définition 1</h2>
<p class="texte">Les CSS sont des feuilles de style en cascade : Cascading Style Sheets. On les exploite pour définir les attributs des éléments Html qui composent les pages d'un site Web...</p>
</div>
<div class="article">
<h2>Définition 2</h2>
<p class="texte">Conventionnellement, on les lie et on les déclare dans l'entête de la page, la section head. Ils sont ainsi externalisés pour être exploités par toutes les pages du site...</p>
</div>
<div class="article">
<h2>Définition 3</h2>
<p class="texte">C'est une excellente manière de normaliser les réglages de mise en forme et de mise en page. Mais c'est aussi une excellente façon d'optimiser les travaux de retouche...</p>
</div>
<div class="article">
<p class="texte"><strong>Sur un grand écran, le contenu sera affiché sous la forme d'une mise en page à 4 colonnes. Sur un petit écran, le contenu s'ajustera en une seule colonne. Redimensionnez la fenêtre du navigateur pour voir l'effet.</strong></p>
</div>
</div>
...
Ce calque parent héberge quatre autres calques. Cette fois, ils sont tous associés au style article. Et chacun héberge effectivement un article indépendant. Mais comme nous l'avons vu, ils ne sont pas encore disposés à s'accepter les uns à côté des autres.
- A la racine du dossier de décompression, double cliquer sur le sous dossier Css,
- Dès lors, cliquer droit sur la feuille de styles mes-styles.css,
- Dans le menu contextuel, choisir là encore de l'ouvrir avec un éditeur comme le Notepad ++,
.ligne:after,.ligne:before
{
content:"";
display:table;
clear:both;
}
Grâce aux éléments after et before, nous définissons le comportement des éléments Html situés avant et après le calque parent associé au style ligne. En positionnant un contenu (content) avec un affichage sous forme de tableau (table), ces réglages entrepris permettent de repousser les contenus avant et après (Header et Footer), pour que tous ces éléments Html ne se chevauchent pas.
Règle de comportement
Maintenant et c'est une nouveauté, nous allons voir qu'il est possible de définir des règles de comportement pour certains éléments Html dans la page Web. Les calques concernés sont ceux des blocs de textes associés au style article. D'ailleurs et vous l'avez sans doute constaté, dans ce style, la largeur du calque est réglée à 100% (width:100%). Forcément, avec un tel paramétrage, si chaque article occupe tout l'espace disponible en largeur, aucun ne peut se positionner à côté de l'autre. Et pourtant, c'est bien ce comportement qu'ils doivent adopter dans le cas d'un affichage sur un matériel mobile comme un smartphone. Donc, dans notre cas, la règle doit nous permettre de basculer cette attitude selon la largeur de l'écran.
- Après le style article, ajouter la règle suivante :
Une règle de comportement est nécessairement annoncée par le mot clé media. Et c'est le symbole de l'arobase qui indique qu'il s'agit d'une règle. Grâce à l'attribut Css min-width, nous définissons la largeur de la fenêtre à partir de laquelle le comportement doit changer. Et le comportement à adopter concerne les calques associés au style article, soit les blocs de textes. Tant que l'espace est encore supérieur à la largeur minimale définie (600px), les 100% de l'attribut width du style article sont remplacés par une valeur frôlant le quart de la largeur totale (24.99999%), pour conserver une infime marge de manoeuvre. Il s'agit donc d'un premier pas pour disposer ces quatre blocs de textes côte à côte dans une configuration d'ordinateur de bureau par exemple.
- Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
- Puis, actualiser le cache du navigateur,
Les blocs de textes sont toujours placés les uns en dessous des autres mais comme vous pouvez le voir effectivement, ils n'occupent plus que le quart de la largeur disponible. Et si vous redimensionnez la fenêtre en réduisant sa largeur progressivement, vous notez que les calques réduisent la leur au rythme des 25% définis. Mais dès lors que cette fenêtre passe sous la largeur minimale autorisée, ces mêmes calques s'étirent pour occuper 100% de l'espace disponible. Il s'agit donc d'un comportement dynamique tout à fait intéressant pour adapter automatiquement la mise en page d'une plateforme à une autre.
Dispositions côte à côte
Dans une version ordinateur de bureau, il est maintenant question de remonter tous ces calques sur une même ligne. Et comme vous le savez, c'est l'attribut Css float qui permet de gérer les placements des éléments Html les uns par rapport aux autres.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
- Dans le style article, ajouter l'instruction Css suivante :
{
padding:0 1%;
width:100%;
float:left;
}
Avec la valeur left passée à l'attribut Css float, les calques sont censés se placer les uns à côté des autres dans la mesure de l'espace disponible en largeur.
- Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
- Puis, actualiser le cache du navigateur,
Certains calques remontent en effet sur la même ligne. Mais la disposition globale n'est pas encore parfaite. Le dernier, faute de place malgré notre réglage à moins de 25%, file sur la ligne du dessous. Tout est une question de marges et de décalages naturels au sein du corps de la page Html et des éléments Html enfants. Ces petites unités ajoutées les unes aux autres font que chaque calque article occupe un peu plus de 25% de largeur. Nous allons devoir forcer globalement les dimensions de ces éléments.
Par contre, le comportement des blocs de textes au redimensionnement devient intéressant. En réduisant la largeur de la fenêtre, les blocs de textes s'amenuisent en largeur pour continuer de s'accepter sur la même ligne. Mais dès lors que la limite de la largeur minimale est franchie, ils reprennent leur largeur à 100% pour occuper tout l'espace et se positionner les uns en dessous des autres.
Contraindre les dimensionnements
Les styles Css offrent une propriété tout à fait particulière pour contraindre les dimensions des éléments Html. Cette propriété Css se nomme box-sizing. Elle permet d'inclure le remplissage et la bordure dans la largeur et la hauteur totales d'un élément.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
- En entête de la feuille, avant le style body, créer le style suivant :
Grâce au symbole de l'astérisque, nous appliquons ce réglage à tous les éléments Html de la page. Grâce à la valeur border-box passée à l'attribut box-sizing, nous intégrons en effet les bordures et décalages dans le calcul de toutes les dimensions. C'est ainsi que nous devrions corriger les petites marges d'erreur.
- Enregistrer les modifications et revenir sur la page Web,
- Puis, actualiser le cache du navigateur,
Comme vous pouvez le voir, tout rentre dans l'ordre. Les quatre blocs de texte sont parfaitement disposés sur la même horizontale. Et si vous réduisez la largeur de la fenêtre, jusqu'à descendre sous la dimension minimale autorisée, l'affichage bascule en configuration Smartphone (width:100%). C'est ainsi, pour une meilleure lisibilité, que les articles sont dès lors tous placés les uns en dessous les autres.
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
