CSS : position, classes et design réactif

Le sélecteur de classe

Le sélecteur de classe permet de cibler un élément ou un bloc d'éléments sans passer par la hiérarchie de la structure des éléments HTML.

Code

           <p class="note">...<⧸p> 
          

Dans l'exemple qui suit, la classe note permet de cibler le troisième paragraphe à l'aide du sélecteur .note, passant ainsi outre à la hiérarchie HTML.

Exemple

Le modèle de boite flexible (flexbox) : une intro

Flexbox offre un modèle de boite dont les règles et les fonctionnalités s'écartent de celles du modèle de boite traditionnel (display: block | inline | inline-block...).

Les quatre possibilités du modèle de boite flexible sont :

• distribution des éléments : horizontale ou verticale avec passage à la ligne ou non ;
• alignements et centrages horizontaux et verticaux, justifiés, répartis ;
• réorganisation des éléments indépendamment de l'ordre du flux ;
• gestion de l'espace disponible.

flex-container et flex-item

La structure de base de flexbox repose sur :

• un flex-container qui génère le contexte d'affichage pour ses enfants directs : les flex-item;
• des flex-item qui sont les enfants directs du flex-container.

Un flex-container peut être n'importe quel éléments HTML affublé d'une déclaration display:flex.

Ses enfants directs deviennent alors automatiquement des flex-item qui occupent initialement la taille minimale de leur contenu.

Utiliser une liste en tant que flex-container et
des éléments de liste en tant que flex-item

Prenons l'exemple de la liste d'éléments suivante:

Code

                        <ul>
                          <li>Clou</li>
                          <li>Vis</li>
                          <li>Écrou</li>
                          <li>Boulon</li>
                          <li>Oeillet</li>
                        </ul> 
                    

Voyons comment flexbox permet d'ajuster la disposition des éléments de liste.

Les propriétés du modèle de boite flexible qui sont mises à profit dans les quatre exemples apparaissant plus bas sont les suivantes:

• display:flex : appliquée sur le flex-container (soit ul dans cet exemple) afin d'activer le comportement flex-item chez ses enfants (soit les éléments li dans cet exemple).
• flex-direction : appliquée sur le flex-container, elle dicte la direction des flex-item, soit row (rangée), soit column (colonne).
  

  Syntaxe

  flex-direction: row | row-reverse | column | column-reverse;

• flex-wrap : appliquée sur le flex-container, cette propriété permet (wrap) ou empêche (nowrap) le retour à la ligne des flex-item.
  

  Syntaxe

  flex-wrap: no-wrap | wrap | wrap-reverse | column-reverse;

• justify-content : appliquée sur le flex-container, cette propriété gère l'espace autour des flex-item.
  

  Syntaxe

  justify-content: start | center | space-between | space-around | space-evenly;

flex-direction:row et justify-content

flex-direction:column et justify-content

flex-direction:row et align-items

flex-direction:column et align-items

Exemple simple d'application des boites flexibles (flexbox) pour une liste de liens de navigation

Exemple

La propriété position

Rappel

Les éléments de type bloc et les éléments de type en-ligne

• Les éléments de type bloc se placent toujours les uns sous les autres par défaut. Par exemple: une suite de paragraphes (<p>) ou les éléments d'une liste (<li>).
• Un élément bloc occupe par défaut toute la largeur disponible dans son conteneur parent.
• Les éléments de type en-ligne se placent toujours côte-à-côte afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise <strong>.
• Les éléments de type en-ligne occupent par défaut la place minimum nécessaire à leur contenu. C'est le cas des éléments <a>, <strong>, <em>, <span>, etc.

Ancêtres, Parents, Enfants, Descendants, Frères

Comprendre l'imbrication des éléments les uns dans les autres est primordial pour comprendre le positionnement.

Chaque document HTML est composé de conteneurs qui peuvent être ancêtres, parents, enfants, descendants ou frères. Ces éléments forment une hiérarchie d'imbrications.

Le flux

Les éléments HTML sont placés les uns après les autres dans le code de la page: c'est ce qu'on appelle le flux du contenu.

Cela signifie que chaque élément est dépendant des éléments frères qui l'entourent.

Par défaut, les éléments bloc et les éléments en-ligne ont un comportement différent dans le flux normal du contenu, comme on l'a vu.

La propriété position

La propriété position est à considérer dès lors qu'il est nécessaire de passer outre le flux normal du contenu pour une mise en page particulière.

Valeurs possibles: static (par défaut), relative, absolute, fixed.

La position statique: position:static

La valeur statique (position:static) correspond à la valeur par défaut de la propriété position, donc la valeur par défaut d'un élément du flux. Il n'y a que peu d'intérêt à la préciser dans le code, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi une série qui serait positionnée hors du flux.

La position relative: position:relative

La position relative (position:relative) permet de décaler un élément par rapport à une position de référence, soit celle qu'il avait dans le flux.

Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage; ils font comme si l'élément est toujours dans le flux, à sa position initiale. En pratique, ce comportement est rarement recherché bien qu'il puisse s'avérer utile dans certaines situations.

Attribuer à un élément une position relative peut par contre être pratique à certains égards, dont:

• Servir de référence à un élément enfant ou descendant positionné en absolu.
  (Voir plus bas pour le positionnement absolu.) ;
• Bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions d'éléments. (Voir plus bas les détails à propos de z-index.)

Dans l'exemple ci-dessous, l'élément strong est en position relative. On utilise les propriétés top, right, bottom ou left jumelées à des valeurs en px ou % pour le positionner:

Exemple

La position absolue: position:absolute

La position absolue (position:absolute) permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code.

La position absolue s'affranchit définitivement du cordon liant jusqu'alors intimement contenu et présentation. L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient. Il faut voir le positionnement absolu comme étant une méthode radicale - mais puissante - qui retire tout à fait un élément du flux: il n'existe pour ainsi dire plus aux yeux des éléments qui, eux, restent dans le flux.

N'étant plus dans le flux naturel, l'élément perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l'élément parent.

Il est capital de noter qu'un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés top, bottom, left ou right n'a pas été précisée; il s'agit d'ailleurs là d'un comportement appliquable à toutes les positions :

Exemple

La position fixe: position:fixed

Le positionnement fixe (position:fixed) est caractérisée par les points suivants:

• Lorsque le positionnement est précisé (top, bottom, left, right), l'élément est toujours positionné par rapport à la fenêtre du navigateur ;
• L'élément est fixé à un endroit et ne pourra se mouvoir, même en présence d'une barre de défilement. En d'autres termes, la position intiale est fixée au chargement de la page; le fait qu'une éventuelle barre de défilement puisse être utilisée n'a aucune influence sur le positionnement de l'élément: il ne bouge plus de la position initialement définie.

Dans l'exemple ci-dessous, faites défiler le contenu et vous noterez que le texte en jaune reste sur place (cliquez sur « CSS » ou « HTML » pour faire afficher le code et expérimenter) :

Exemple

Cet autre exemple montre l'utilisation de la position fixe pour « fixer » un menu dans le haut de la page. Faites défiler le contenu : la barre de navigation reste en place.

Exemple

z-index

La propriété z-index permet de changer la position naturelle des éléments dans l'axe z, c'est-à-dire en profondeur. Prenons l'exemple de trois éléments div placés l'un à la suite de l'autre dans le HTML et positionnés en absolu : le premier élément se trouvera en arrière-plan, et le dernier, au premier plan. Cet ordre ne sera évident dans le navigateur que si les éléments se superposent au moins en partie.

Dans l'exemple ci-dessous, le HTML contient trois div positionnés en absolu qui se superposent partiellement en raison de leurs positions. Sans autre indication, l'ordre de superposition des div suit l'ordre du flux: DIV est arrière plan, DIV3 est au premier plan.

La valeur de z-index permet de modifier cet ordre naturel.

En faisant afficher le code, modifiez la valeur de z-index pour constater l'effet.

Exemple

Le design réactif et l'approche « mobile d'abord »

L'approche Mobile d'abord (ou Mobile first) repose sur ces fondements :

• Un site web doit être construit en premier lieu pour les appareils les plus simples et les navigateurs les plus simples, et donc à partir des fonctionnalités les moins exigentes en terme de technologie.
• Afin de profiter des avantages pratiques et technologiques des appareils les plus sophistiqués, des « couches » de complexité sont ajoutées progressivement au site.

En conséquence :

• Selon cette approche, les règles de style de base s'adressent aux appareils à petits écrans comme les téléphones mobiles, d'ou l'expression 'mobile d'abord'.
• Des points de rupture, contrôlés par des requêtes médias (media queries), sont ajoutés afin d'augmenter progressivement le degré de complexité de l'interface pour des appareils dont l'écran est plus large.

Étude de cas

Jetons un coup d'oeil sur la maquette suivante qui montre un répertoire de professeurs.

Selon la largeur de l'écran, la liste de profs se dispose sur une, deux ou trois colonnes.

Comment y arriver sans dupliquer les contenus?

La requête media : @media

On y arrive en ajoutant des règles de style conditionnelles.

La condition dans cet exemple est fondée sur la largeur de l'écran.

Ainsi, à partir d'une certaine largeur d'écran, la fonction @media permet de modifier la valeur d'une propriété (ou d'ajouter de nouvelles déclarations), comme ceci :

Code

                      .catalogue {
                        display: flex;
                        flex-direction: column;
                      }
                      @media (min-width:600px) {
                        .catalogue {
                          flex-direction: row;
                        }
                      }
                    

Résultat

La requête media : @media

Reprenez le Codepen précédent.

Complétez la feuille de style de ce "pen" en utilisant uniquement des sélecteurs de classe. (Voir en classe pour les directives.)

À l'aide de la fonction @media, rendez réactive la disposition des six items.

Les six items forment au départ une colonne.

À mesure que l'écran s'élargit, ces items doivent former des rangées de deux items, puis, enfin, des rangées de trois items.

Utiliser Google Fonts pour intégrer des polices de caratères dans vos pages web

Activités d'évaluation

TP2

Le TP2 a pour objectif d'expérimenter la propriété CSS position et le web réactif.

Documents à remettre

Un dossier rigoureusement nommé comme suit:

• groupe du vendredi 8h : gr2_nominitialeprenom_tp2
• groupes du vendredi 12h : gr1_nominitialeprenom_tp2

Structure de fichiers :

ou

Matériel fourni

Téléchargez le dossier archive grx_nominitialeprenom_tp2.zip à partir du Devoir publié dans Teams.

Échéancier

Remettez le dossier complet, zippé, sur Teams/Devoir, dans l'espace prévu à cette fin, au plus tard :

• le mercredi suivant le cours, 9h le matin, groupe 2 (vendredi 8h).
• le mercredi suivant le cours, midi, groupe 1 (vendredi 12h).

TP2: Travail à faire

Créez une feuille de style pour le fichier catalogue.html

1. Ouvrez le dossier de travail du tp2 dans Visual Studio Code.
2. Créez le dossier css.
3. Dans le dossier css, créez un nouveau fichier styles.css.
4. Liez la feuille de style au document html en insérant ce code dans la partie head:
   

                   
   <link type="text/css" rel="stylesheet" href="css/styles.css"> 
                   

5. Ajoutez cette meta dans la partie head du document HTML afin que les fonctions @media soient interprétées correctement:
   

                     
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
                   

6. Liez le favicon à la page.
7. Ajoutez le code @charset "UTF-8"; au tout début de la feuille de style.
8. À la suite de ce code, ajoutez le code @import... de Google Fonts afin d'importer la police de caractères de votre choix. (Voir en classe pour les détails.)
9. À la suite de Google Fonts, ajoutez les règles de style de réinitialisation habituelles :



10. Effectuez la mise en forme du menu réactif de la page web à l'aide des directives données en classe.
11. Reproduisez la mise en forme du catalogue en observant les images de maquette affichées plus bas.
    • Effectuez une mise en forme fluide, basée sur le principe du 'Mobile d'abord' ;
    • Créez des requêtes media pour la version '2 colonnes' ;
    • Créez une requête media pour la version 3 colonnes' ;
    • Établissez une largeur maximale pour le catalogue.
12. Créez les règles de style nécessaires en vous inspirant des travaux formatifs effectués durant le cours.
13. N'utilisez que des sélecteurs de classe dans vos règles de style.
14. Mettez votre feuille de style en ordre.
15. Insérez des commentaires dans votre feuille de style afin de vous y retrouver plus facilement.