L'annotation BEM et
les boites flexibles (la suite)

Quelques propriétés CSS utiles

Les CSS3 ont amené un cortège de nouvelles propriétés aujourd'hui très utilisées. La plupart de ses propriétés sont fonctionnelles dans les navigateurs les plus récents, mais il y a des exceptions.

Coins arrondis : border-radius

Nom de la propriété standard: border-radius

Supportée par : http://caniuse.com/#feat=border-radius

Syntaxe

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Prenons l'exemple d'un paragraphe : la mise est forme des coins ronds est exécutée par la règle de style suivante :

Code

              p {
                border-radius: 32px; 
              } 
            

La déclaration raccourcie border-radius:32px produit des coins arrondis avec un rayon de 32 pixels. Elle est l'équivalent de ces quatres déclarations longues :

Code

              border-top-left-radius: 32px;
              border-top-right-radius: 32px;
              border-bottom-left-radius: 32px;
              border-bottom-right-radius: 32px;
            

Ainsi, il est possible de personnaliser le rayon de chacun des coins, comme le montre cet exemple :

Code

                border-top-left-radius: 0px;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 50px;
            

En syntaxe raccourcie, cela donne :

Code

              border-radius: 0px 5px 20px 50px;
            

Au rendu, on obtient :

Résultat

Allons plus loin et précisons des arrondis diférents en X et en Y, comme ceci:

Code

                border-top-left-radius: 20px 10px;
                border-top-right-radius: 6px 20px;
                border-bottom-left-radius: 10px 25px;
                border-bottom-right-radius: 14px 50px;
            

En syntaxe raccourcie, cela donne :

Code

              border-radius: 20px 6px 10px 14px/10px 20px 25px 50px;
            

Au rendu on obtient :

Résultat

Grâce à un choix judicieux de valeur pour width, height et border-radius, cette propriété permet de créer des formes personnalisées, comme, par exemple, un cercle :

Ombre projetée : box-shadow

Nom de la propriété : box-shadow

Supportée par : http://caniuse.com/#feat=css-boxshadow

Syntaxe

box-shadow: none|décalage-h décalage-v flou étendue couleur|inset|intitial|inherit;

Il est possible de créer une ombre projetée ou encore une lueur sous un conteneur (type bloc) comme le montre les exemples qui suivent.

Les valeurs associées à la propriété box-shadow dans la déclaration
box-shadow: 5px 5px 12px 3px #999;
contrôlent respectivement les paramètres suivants de l'ombre:

• 5px : décalage vers la droite (valeur négative vers la gauche)
• 5px : décalage vers le bas (valeur négative vers le haut)
• 12px : niveau de flou
• 3px : étendue de l'ombre vers l'extérieur
• #999 : couleur de l'ombre

En supprimant les décalages en x et en y, cette propriété permet d'obtenir une sorte de lueur qui fait tout le tour de la boîte comme le montre l'exemple suivant :

Où:

• 0 : décalage horizontal nul
• 0 : décalage vertical nul
• 20px : quantité de flou vers l'extérieur
• 5px : étendue de l'ombre
• #999 : couleur de l'ombre

Par défaut, l'ombre est projetée vers l'extérieur comme le montre les exemples précédents. La valeur inset permet de simuler une ombre qui se projète plutôt vers l'intérieur :

Où:

• 0 : décalage horizontal nul
• 0 : décalage vertical nul
• 20px : niveau de flou
• 5px : étendue de l'ombre
• #bbb : couleur de l'ombre
• inset : projection de l'ombre vers l'intérieur

Ombre projetée sous le texte : text-shadow

Nom de la propriété standard : text-shadow

Supportée par : http://caniuse.com/#feat=css-textshadow

Syntaxe

text-shadow: none|décalage-h décalage-v flou couleur|intitial|inherit;

Il est possible de créer une ombre projetée sous un texte avec CSS3, comme le montre cet exemple:

Considérez les valeurs de cette déclaration :

Code

                text-shadow: 2px 2px 2px #999; 
              

Elles contrôlent respectivement les paramètres de l'ombre suivants :

• 2px : décalage vers la droite (valeur négative vers la gauche)
• 2px : décalage vers le bas (valeur négative vers le haut)
• 2px : quantité de flou vers l'extérieur
• #999 : couleur

La même propriété peut être utilisée pour créer du texte incrusté, comme le montre l'exemple suivant :

Notez bien que pour produire l'effet d'incrustation, un choix judicieux de valeurs pour les propriétés color (couleur des caractères) et background-color (couleur de l'arrière-plan) est important car la valeur "inset" n'existe pas pour text-shadow.

Transparence (d'un élément HTML) : opacity

Nom de la propriété standard : opacity

Supportée par : http://caniuse.com/#feat=css-opacity

Syntaxe

opacity: nombre(0-1)|intitial|inherit;

L'opacité d'un élément HTML (et son contenu) est contrôlée par la propriété opacity.

La propriété opacity permet d'attribuer un certain degré d'opacité (et donc de transparence) à un élément HTML et son contenu, quel que soit cet élément. L'exemple suivant montre l'application successive d'une opacité de 100% (1), 60% (0.6), 30% (0.3) et 10% (0.1) à l'élément div :

Transparence (couleur d'arrière-plan): rgba, hsla

Le format de couleur rgba permet d'obtenir une couleur d'arrière-plan semi-transparente pour n'importe quel élément HTML.

L'exemple de code suivant permet d'obtenir la couleur vert avec 50 % d'opacité :

Code

              p { 
                background-color: rgba(0, 255, 0, 0.5) 
              }
            

Le même effet peut être obtenu par le format de couleur hsla :

Code

              p { 
                background-color: hsla(120, 100%, 50%, 0.5) 
              }
            

L'exemple suivant présente différentes valeur d'opacité de la même couleur d'arrière-plan :

Exemple

L'exemple suivant met en parallèle la propriété opacity et le conteneur rgba. Notez que la propriété opacity agit à la fois sur le contenu et l'arrière-plan alors que le conteneur rgba n'agit que sur l'arrière-plan :

Exemple

Box sizing

Propriété standard : box-sizing

Supportée par : http://caniuse.com/#feat=css3-boxsizing

Syntaxe

box-sizing: content-box|border-box|initial|inherit;

Le modèle de boîte CSS par défaut est parfois frustrant pour le développeur. En effet, si on déclare une largeur de 200 pixels et une marge interne (padding) de 20 pixels, cet élément aura dans les faits une largeur totale de 240 pixels. Ce n'est pas un problème en soi jusqu'au moment où l'on doive changer la marge interne: il faut alors recalculer la largeur, et éventuellement les valeurs de marge externe et de bordure.

La propriété CSS3 box-sizing avec la valeur border-box permet d'inclure dans la largeur (width) les valeurs de marge interne (padding) et de bordure (border). Sa valeur par défaut est content-box, soit le modèle de boîte courant.

L'exemple suivant montre une comparaison entre deux éléments comportant les mêmes valeurs de width, padding et border, mais dont la valeur de box-sizing est différente:

Exemple

Transition

Nom de la propriété standard: transition

Supportée par : http://caniuse.com/#feat=css-transitions

Syntaxe

transition: propriété durée fonction-rythme délai|initial|inherit;

Il est possible de créer des animations simples avec CSS3 qui démarrent lorsque certains événements se déclenchent sur la page.

Exemple

La propriété transition permet, pour la propriété visée, de passer d'une valeur à une autre de manière graduelle et selon une vitesse définie. Le déclenchement de la transition peut se faire au chargement de la page ou encore à la suite d'une action comme le survol (hover) ou le clic (target) d'un élément.

Les transitions sur les liens sont courantes. Voici un exemple de transition de couleur appliquée sur un lien :

Exemple

La propriété transition est en fait composée de quatre sous-propriétés :

• transition-delay : détermine le délai en secondes (s) avant le démarrage de la transition ;
• transition-duration : détermine la durée de la transtion en secondes (s) ou millisecondes (ms) ;
• transition-property : détermine la propriété à animer (valeurs: toutes les noms de propriétés ou le mot-clé all qui permet d'animer plusieurs propriétés à la fois) ;
• transition-timing-function : détermine la courbe de vitesse de l'animation (valeurs: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) ).
• le délai, non présent dans l'exemple (s ou ms).

Transform

Nom de la propriété standard : transform

Support par les navigateurs : http://caniuse.com/transforms2d

Syntaxe

transform: none|transform-functions|initial|inherit;

La propriété transform permet des transformations, des déplacements (translate), des rotations (rotate), des déformations (skew), des changements de taille (scale).

Voici un exemple avec la fonction 'rotate' où la valeur '9deg' produit une rotation positive de neuf degrés :

Code

            .transform {
              transform: rotate(9deg);
            }
            

Il est possible de jumeler cette propriété à la propriété transition pour créer des animations fluides au survol par exemple.

Il est possible de jumeler plusieurs types de transformations dans la même déclaration, comme rotate et scale dans l'exemple suivant :

Code

            a:link {  
              transition: all .3s ease; 
            }

            a:hover {
              transform: rotate(9deg) scale(1.5); 
            }
          

Dans l'exemple suivant, les deux cercles s'animent au survol: le premier sans transition et le second, avec. L'animation du second cercle dure une seconde: cela permet de rendre plus évident les effets d'accélération et de décélération engendrés par la valeur ease :

Exemple

Filter

Nom de la propriété standard : filter

Supportée par : https://caniuse.com/#feat=css-filters

Syntaxe

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Exemple

Propriétés de l'arrière-plan: background

La propriété background permet de mettre en forme l'arrière-plan des éléments d'une page Web.

Couleur d'arrière-plan: background-color

Valeurs: transparent, inherit ou un code de couleur

Valeur initiale: transparent

Syntaxe

background-color: color | transparent | initial | inherit;

Cet exemple montre plusieurs façons d'écrire une valeur désignant une couleur d'arrière-plan:

{background-color: #FD3401;}

{background-color: #0F0;}

{background-color: rgb(200,88,5);}

{background-color: rgb(0%,0%,0%);}

Images d'arrière-plan: background-image

Valeurs: url(adresse de l'image), none, inherit

Valeur initiale: none

Syntaxe

background-image: url | none | initial | inherit;

Exemple d'utilisation:

Code

ul { 
          list-style-type: none;
        } 
        li { 
          background-image:url(images/pique.gif); 
          background-repeat:no-repeat; 
          background-position:0 0; 
        } 

Résultat

• Premier élément de liste
• Deuxième élément de liste

Mosaïque d'arrière-plan: background-repeat

Valeurs: repeat, repeat-x, repeat-y, no-repeat, inherit

Valeur initiale: repeat

Syntaxe

background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;

Utilisation de la valeur repeat en arrière-plan d'un paragraphe :

Exemple

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement? Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Utilisation de la valeur no-repeat :

Exemple

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement? Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Utilisation de la valeur repeat-x :

Exemple

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement? Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Utilisation de la valeur repeat-y :

Exemple

Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement? Ce paragraphe est tapissé d'image d'arrière-plan qui rendent la lecture hasardeuse, sinon impossible. Pourquoi en est-il ainsi, quand on pourrait faire autrement?

Position d'arrière-plan: background-position

Valeurs:

• % : pourcentage (en x et y, à partir du coin supérieur gauche du conteneur parent),
• px : distance en pixels (en x et y, à partir du coin supérieur gauche du conteneur parent),
• mots-clés (en x: left, center, right; en y: top, middle, bottom), inherit

Valeur initiale: 0 0 (identique à left top)

Syntaxe

background-position: value;

L'utilisation de background-position: 10% 25% donnent ce résultat:

Résultat

Ces valeurs correspondent à un point se trouvant à 10% du bord gauche du paragraphe et à 25% du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici. Ces valeurs correspondent à un point se trouvant à 10% du bord gauche du paragraphe et à 25% du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici.

L'utilisation de background-position: 10px 25px donnent ce résultat:

Résultat

Ces valeurs correspondent à un point se trouvant à 10 pixels du bord gauche du paragraphe et à 25 pixels du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici. Ces valeurs correspondent à un point se trouvant à 10 pixels du bord gauche du paragraphe et à 25 pixels du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici.

On peut mélanger mots clés et valeurs, comme le montre cet exemple où l'utilisation de background-position: center 15px donne ce résultat:

Résultat

Ces valeurs correspondent à un point centré horizontalement dans le paragraphe et se trouvant à 30 pixels du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici. Ces valeurs correspondent à un point centré horizontalement dans le paragraphe et se trouvant à 30 pixels du bord supérieur de ce même paragraphe, comme le montre l'image en arrière-plan affichée ici.

Voici un exemple d'utilisation d'images d'arrière-plan multiples (cliquez sur CSS pour voir le code CSS) :

Exemple

Point d'attache de l'arrière-plan: background-attachment

Valeurs: scroll, fixed, inherit

Valeur initiale: scroll

Syntaxe

background-attachment: scroll | fixed | local | initial | inherit;

L'utilisation de background-attachment: scroll; (la valeur par défaut) permet d'ajouter une image d'arrière-plan qui défile avec le contenu :

Résultat

Ce paragraphe contient une image d'arrière-plan avec la valeur scroll pour la propriété background-attachment.






Lorsque la page défile, l'image défile avec le reste du contenu de cette page.

L'utilisation de background-attachment: fixed; permet d'ajouter une image d'arrière-plan qui demeure fixe et ne défile pas avec le contenu :

Résultat

Ce paragraphe contient une image d'arrière-plan avec la valeur fixed pour la propriété background-attachment.





Lorsque la page défile, l'image reste en place, comme si le contenu défilait par dessus.

Super propriété de l'arrière-plan: background

Valeurs: background-color, background-image, background-repeat, background-attachment, background-position

Syntaxe

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

Règles d'utilisation: aucune valeur n'est obligatoire et les valeurs peuvent apparaître dans n'importe quel ordre.

Si deux valeurs sont fournies pour la propriété background-position, elles doivent apparaître ensemble en commençant par la valeur horizontale (x), suivie immédiatement par la valeur verticale (y).

Exemple 1

          background: #fff url(images/decor.jpg) repeat-x scroll 0 4px;
          

Exemple 2

          background: url(images/rond.jpg) no-repeat 0 50%, url(images/carre.jpg) no-repeat 120px 10px, url(images/triangle.jpg) repeat-y center top;
          

Ajuster la taille de l'arrière-plan : background-size

Valeurs : auto, [taille], cover, contain, initial, inherit

Valeur initiale : auto

Syntaxe

background-size: auto | length | cover | contain | initial | inherit;

La propriété background-size permet de modifier la taille de l'arrière-plan au besoin. Bien qu'il soit préférable d'optimiser au préalable la taille des images en fonction de l'usage qu'on en fait, cette propriété est utile dans certains contextes.

• [taille] : %, px, etc. Ajuste la largeur et la hauteur de l'image d'arrière-plan. La premières valeur est la largeur, la deuxième, la hauteur. Si une seule valeur est donnée, la deuxième est réglée à "auto" par défaut.
• cover : Redéfinit la taille de l'image afin de couvrir l'entièreté de l'arrière-plan du conteneur, même si cela signifie d'agrandir l'image au-delà de sa taille d'origine ou encore d'en couper une partie au besoin.
• contain : Red.finit la taille de l'image d'arrière-plan afin qu'elle soit affichée en entier, selon son ratio original.

Essayez-le sur w3schools

Expérimentez les propriétés d'arrière-plan (background)

Complétez le code à l'aide de consignes données en classe. L'objectif est de faire afficher, au survol du lien correspondant, le logo de chaque navigateur, ainsi qu'une couleur d'arrière-plan et une couleur de texte personnalisées, comme le montre l'image suivante) :

See the Pen background-size01 by Sylvain Lamoureux (@slamoureux) on CodePen.

L'annotation BEM : Bloc-Élément-Modificateur

L'annotation BEM, ou Bloc-Élément-Modificateur, est une méthode qui sert à nommer les classes de manière signifiante.

On peut donner n'importe quel nom aux classes, dans la mesure où celui-ci ne contient ni espaces, ni caractères spéciaux, ou encore, ne commence pas par un chiffre.

Cela dit, si on n'y prête pas attention, la variété des noms de classe peut devenir déroutante dans un site web qui prend une certaine ampleur.

C'est pourquoi il existe des approches qui consistent à mettre de l'ordre dans les noms de classes afin de les rendre signifiants.

L'annotation BEM est l'approche que nous adoptons dans le cadre de ce cours.

Voyons chacune des composantes de la méthode BEM.

Bloc

bloc

La première étape consiste à donner un nom signifiant aux blocs.

Le bloc est un ensemble cohérent d'éléments qui est susceptible d'être réutilisé tel quel dans une autre partie du document ou dans un autre document.

Comme on le voit dans l'illustration suivante, les blocs peuvent être imbriqués les uns dans les autres.

Source: https://en.bem.info

L'exemple suivant comporte les blocs titrePrincipal, navigation et menu :

Exemple

                        <h1 class="titrePrincipal">Restaurant Chez Rosario</h1>
                        <nav class="navigation">
                          <ul class="menu">
                            (...)
                          </ul>
                        </nav>
                    

Au besoin, le nom du bloc peut être composé de plus d'un mot. Dans ce cas, pour distinguer chaque mot, on utilise la majuscule intercalée (Camel case), comme par exemple titrePrincipal. Il existe d'autres conventions de nomenclature (Kebab case (titre-principal), Snake case (titre_principal)...) : l'important est de choisir une méthode et de s'y tenir.

Élément

bloc__element

La deuxième étape consiste à donner un nom signifiant aux éléments et aux sous-éléments du bloc (quand il y en a).

Contrairement au bloc, l'élément ne peut être réutilisé seul dans une autre section ou une autre page, sans le contexte de son parent bloc.

Source: https://en.bem.info

Le nom d'un élément est composé du nom du bloc, suivi de DEUX traits soulignés, puis terminé par le nom spécifique de l'élément (voir l'élément menu__item dans l'exemple suivant) ou du sous-élément (voir l'élément menu__lien dans l'exemple suivant).

Exemple

                    <h1 class="titrePrincipal">Restaurant Chez Rosario</h1>
                        <nav class="navigation">
                          <ul class="menu">
                            <li class="menu__item">
                              <a class="menu__lien">Accueil</a>
                            </li>
                            <li class="menu__item">
                              <a class="menu__lien">Blogue</a>
                            </li>
                            <li class="menu__item">
                              <a class="menu__lien">Contact</a>
                            </li>
                          </ul>
                        </nav>
                    

Voici une autre application mettant en cause un formulaire :

Exemple

                        <form class="formRecherche">
                          <div class="formRecherche__contenu">
                            <input type="search" class="formRecherche__champ">
                            <button class="formRecherche__bouton">
                          </div>
                        </form>
                    

Modificateur

bloc__element--modificateur

La troisième étape consiste à donner un nom signifiant aux modificateurs (quand il y en a) d'un bloc ou d'un élément.

Source: https://en.bem.info

Le modificateur indique un changement d'apparence, de comportement ou d'état d'une entité (bloc, élément, sous-élément).

Le modificateur ne peut être utilisé seul, sans l'entité qu'il modifie.

Son nom s'ajoute à celui du bloc ou de l'élément en les séparant de deux traits d'union (voir menu__lien--actif en jaune dans l'exemple suivant).

Exemple: le modificateur

                        <h1 class="titre-principal">Restaurant Chez Rosario</h1>
                        <ul class="menu">
                          <li class="menu__item">
                            <a class="menu__lien menu__lien--actif">Accueil</a>
                          </li>
                          <li class="menu__item">
                            <a class="menu__lien">Blogue</a>
                          </li>
                          <li class="menu__item">
                            <a class="menu__lien">Contact</a>
                          </li>
                        </ul>
                    

Le modèle de boite flexible (flexbox) : quelques propriétés des flex-items

Rappelons que la structure de base de flexbox repose sur :

• un flex-container qui génère le contexte d'affichage pour ses enfants directs ;
• des flex-items 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.

Nous allons voir ici les principales propriétés des flex-items.

Les propriétés des flex-items

Les propriétés suivantes s'appliquent aux flex-items, c'est-à-dire aux enfants des flex-containers.

flex-grow

flex-shrink

flex-basis

flex (flex-direction: row)

flex (flex-direction: column)

Activités d'évaluation

Ex5

L'exercice 5 a pour objectif d'approfondir vos habiletés dans l'utilisation des boites flexibles ou flexbox et d'introduire l'utilisation d'images d'arrière-plan.

Sources

• Téléchargez les fichiers sources à partir de Teams/Devoir.

Documents à remettre

Un dossier rigoureusement nommé comme suit:

• groupe du vendredi 8h : gr2_nominitialeprenom_ex5
• groupes du vendredi 12h : gr1_nominitialeprenom_ex5

contenant les fichiers et dossiers indiqués ici :

Structure de fichiers :

Échéancier

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

• À la fin du cours.

Travail à faire

Renommez le dossier fourni et ouvrez-le dans VSCode.

Le travail consiste monter un gabarit entier à l'aide de flexbox.

1. Dans le dossier css, créez un nouveau fichier nommé styles.css.
2. À l'aide de l'élément link habituel, liez les quatre pages HTML à la feuille de style externe.
3. Débutez la rédaction de la feuille de style par l'encodage de caractères :
   

   

   Vérifiez le travail en cours de route :

   

   Et poursuivez en inscrivant la charte graphique à la racine, comme ceci :

   

   Vérifiez le travail en cours de route :

   

4. Rédigez maintenant la règle de style de réinitialisation :

   

   Vérifiez le travail en cours de route :

   

5. Avant de débuter la formation des boites flexibles, vous allez inscrire quelques règles afin de décorer les conteneurs et de bien les distinguer en ajoutant les règles suivantes :

   

   Vérifiez le travail en cours de route :
   

   

6. La classe page est attribuée à un élément neutre div afin de contrôler l'alignement des conteneurs principaux. Vous utiliserez le sélecteur .page pour créer un premier conteneur flex, ce qui transformera ses enfants, soit .header-principal, .conteneur et .footer-principal, en flex-items :
   

   

7. Transformez également l'élément div entourant la zone de contenu en conteneur flex à l'aide du sélecteur .conteneur :

   

   Ajustez le comportement des flex-items du flex-container .conteneur :

   

   

   Vérifiez le résultat :

   

8. À l'aide de requêtes média, ajoutez maintenant ces règles conditionnelles sous chacune des règles mères correspondantes; elles permettent de disposer les flex-items de .conteneur à l'horizontal à partir d'une largeur d'écran de 700px :
   

   

   

   

   
   Vérifiez le résultat en écran large :

   

9. Amorcez maintenant la mise en forme des liens de la navigation principale par les états :link et :visited :

   

   Vérifiez le résultat :

   

10. Ensuite, vous allez créer l'effet au survol (:hover) et au clic (:active) des liens. Modifiez la couleur du texte (color) et faites apparaître une image en arrière-plan (background-image), comme ceci :

    

    Vérifiez le résultat. Au survol du lien, on devrait voir ceci :

    

11. On ne voit qu'une petite partie de l'image de laitue. Pour la voir au complet dans l'espace du lien, ajustez ses paramètres en modifiant sa position (background-position), sa répétition (background-repeat) et sa taille (background-size).
    
    Vérifiez le résultat. Au survol du lien, l'image devrait maintenant être visible au complet :

    

12. C'est réussi, mais vous avez reproduit le même effet pour les quatre liens. Personnalisez les effets pour chacun des liens en utilsant correctement le sélecteur :nth-child(n) avec les classes appropriées (voir le travail formatif réalisé en classe comme référence pour l'utilisation de :nth-child avec une classe).
    
    Pour chacun des liens, ajustez la couleur du texte et associez la bonne image de légume afin d'obtenir un résultat semblable à ceci :

    

13. Vous allez maintenant modifier le code HTML pour ajouter une image et sa légende dans le texte, soit juste sous l'élément h1 du contenu principal. Vérifiez le résultat :

    

    Faites flotter l'image dans le texte et ajustez la taille de la légende pour obtenir un résultat semblable à ceci :

    

    

14. Ajoutez le code HTML de l'image dans toutes les pages, tout en ajustant l'adresse pour faire afficher l'image correspondante :
    

    

    

    

Bravo ! Le travail est terminé.