diff options
Diffstat (limited to 'files/fr/learn/css')
52 files changed, 7240 insertions, 7179 deletions
diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md index da13496b05..5be0014eeb 100644 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md @@ -14,86 +14,80 @@ tags: translation_of: Learn/CSS/Building_blocks/A_cool_looking_box original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> - -<p>Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.</p> +Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de faire cet exercice vous devez avoir vu tous les articles de ce + module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester votre compréhension du modèle de boîte CSS et toutes les + fonctionnalités associées comme les encadrements et les arrière‑plans. + </td> + </tr> + </tbody> </table> -<h2 id="Départ">Départ</h2> +## Départ + +Pour débuter, vous devez : -<p>Pour débuter, vous devez :</p> +- faire des copies locales de ces [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. -<ul> - <li>faire des copies locales de ces <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> — enregistrez‑les sous les noms <code>index.html</code> et <code>style.css</code> dans un nouveau répertoire.</li> -</ul> +> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document. -<div class="note"> -<p><strong>Note :</strong> Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> -</div> +## Résumé du projet -<h2 id="Résumé_du_projet">Résumé du projet</h2> +Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS. -<p>Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.</p> +### Généralités -<h3 id="Généralités">Généralités</h3> +- Appliquez la CSS au HTML. -<ul> - <li>Appliquez la CSS au HTML.</li> -</ul> +### Composition de la boîte -<h3 id="Composition_de_la_boîte">Composition de la boîte</h3> +Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant : -<p>Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :</p> +- une largeur raisonnable pour un gros bouton, disons autout de 200 pixels, +- une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus, +- un texte centré horizontalement, +- une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur. +- une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan. +- la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire. +- un encadrement avec des coins arrondis subtils, +- un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée. +- un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité. +- des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété `inset` — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte. -<ul> - <li>une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,</li> - <li>une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,</li> - <li>un texte centré horizontalement,</li> - <li>une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur.</li> - <li>une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan.</li> - <li>la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire.</li> - <li>un encadrement avec des coins arrondis subtils,</li> - <li>un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée.</li> - <li>un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité.</li> - <li>des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété <code>inset</code> — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte.</li> -</ul> +## Exemple -<h2 id="Exemple">Exemple</h2> +Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler : -<p>Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :</p> + -<p><img alt="" src="fancy-box.png"></p> +## Évaluation -<h2 id="Évaluation">Évaluation</h2> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abord, il n'y rien à gagner en trichant !</p> +{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> -</ul> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Creation d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md index 3d0b3c1fe5..579e5cccc9 100644 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md @@ -15,43 +15,53 @@ tags: translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> - -<p>Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p> +Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Donner des idées sur l'utilisation d'effets avancés pour les boîtes et apprendre quelques outils de style natifs propres au langage des CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions de HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >) et idées sur le fonctionnement des CSS (voir + <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Donner des idées sur l'utilisation d'effets avancés pour les boîtes et + apprendre quelques outils de style natifs propres au langage des CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Ombres_des_boîtes">Ombres des boîtes</h2> - -<p>Revenons au module <a href="/fr/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p> +## Ombres des boîtes -<p>Vous trouverez les exemples de cet article dans le fichier <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">code source</a> également).</p> +Revenons au module [Styling text](/fr/docs/Learn/CSS/Styling_text) — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage. -<h3 id="Ombre_simple_pour_une_boîte">Ombre simple pour une boîte</h3> +Vous trouverez les exemples de cet article dans le fichier [box-shadow.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html) également). -<p>Débutons avec un exemple simple. D'abord, un peu de HTML :</p> +### Ombre simple pour une boîte +Débutons avec un exemple simple. D'abord, un peu de HTML : -<pre class="brush: html"><article class="simple"> - <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> -</article></pre> +```html +<article class="simple"> + <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> +</article> +``` -<p>Puis la CSS:</p> +Puis la CSS: -<pre class="brush: css">p { +```css +p { margin: 0; } @@ -66,34 +76,34 @@ article { .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); -}</pre> - +} +``` -<p>donnent le résultat suivant :</p> +donnent le résultat suivant : -<p>{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}</p> +{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }} -<p>Notez les quatre éléments valeur de la propriété <code>box-shadow</code> :</p> +Notez les quatre éléments valeur de la propriété `box-shadow` : -<ol> - <li>La première valeur est la mesure du <strong>décalage horizontal</strong> — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte.</li> - <li>La deuxième valeur est la mesure du <strong>décalage vertical</strong> — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte.</li> - <li>La troisième valeur est le <strong>rayon de flou</strong> — il représente la « quantité » de flou appliquée à l'ombre.</li> - <li>La valeur de la couleur : <strong>couleur de base</strong> de l'ombre.</li> -</ol> +1. La première valeur est la mesure du **décalage horizontal** — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte. +2. La deuxième valeur est la mesure du **décalage vertical** — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte. +3. La troisième valeur est le **rayon de flou** — il représente la « quantité » de flou appliquée à l'ombre. +4. La valeur de la couleur : **couleur de base** de l'ombre. -<p>Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.</p> +Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs. -<h3 id="Ombres_multiples_pour_une_boîte">Ombres multiples pour une boîte</h3> +### Ombres multiples pour une boîte -<p>Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :</p> +Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules : -<pre class="brush: html hidden"><article class="multiple"> - <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> -</article></pre> -</div> +```html hidden +<article class="multiple"> + <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> +</article> +``` -<pre class="brush: css hidden">p { +```css hidden +p { margin: 0; } @@ -111,23 +121,26 @@ article { 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } -</pre> +``` -<p>Nous obtenons le résultat suivant :</p> +Nous obtenons le résultat suivant : -<p>{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}</p> +{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }} -<p>Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.</p> +Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière. -<h3 id="Autres_fonctionnalités_des_ombres_de_boîtes">Autres fonctionnalités des ombres de boîtes</h3> +### Autres fonctionnalités des ombres de boîtes -<p>Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé <code>inset</code> — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie.</p> +Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé `inset` — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie. -<p>D'abord un HTML différent pour cet exemple :</p> +D'abord un HTML différent pour cet exemple : -<pre class="brush: html"><button>Appuyez ici !</button></pre> +```html +<button>Appuyez ici !</button> +``` -<pre class="brush: css">button { +```css +button { width: 150px; font-size: 1.1rem; line-height: 2; @@ -147,39 +160,40 @@ button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); -}</pre> +} +``` -<p>Et voici le résultat :</p> +Et voici le résultat : -<p>{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}</p> +{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }} -<p>Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.</p> +Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage. -<p>Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.</p> +Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé. -<div class="note"> -<p><strong>Note :</strong> il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code> — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p> -</div> +> **Note :** il y a un autre élément qui peut être paramétré parmi les valeurs de `box-shadow` — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le **rayon de diffusion**. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler. -<h2 id="Filtres">Filtres</h2> +## Filtres -<p>Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles : vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants.</p> +Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles : vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants. -<p>Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété <code>filter</code> et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple <code>drop-shadow()</code> fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}} et donne des effets analogues. Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède :</p> +Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété `filter` et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple `drop-shadow()` fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}} et donne des effets analogues. Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède : -<p>Tout d'abord, un HTML simple :</p> +Tout d'abord, un HTML simple : -<pre class="brush: html"><p class="filter">Filtre</p> +```html +<p class="filter">Filtre</p> -<p class="box-shadow">Ombre de boîte</p> -</pre> +<p class="box-shadow">Ombre de boîte</p> +``` -<p>Et maintenant un peu de CSS pour créer une ombre portée à chacun :</p> +Et maintenant un peu de CSS pour créer une ombre portée à chacun : -<pre class="brush: css">p { +```css +p { margin: 1rem auto; padding: 20px; - <code class="language-css">text-align: center</code> ; + text-align: center ; width: 100px; border: 5px dashed red; } @@ -191,56 +205,52 @@ button:active { .box-shadow { box-shadow: 5px 5px 1px rgba(0,0,0,0.7); -}</pre> +} +``` -<p>Vous obtiendrez le résultat suivant :</p> +Vous obtiendrez le résultat suivant : -<p>{{ EmbedLiveSample('Filtres', '100%', 200) }}</p> +{{ EmbedLiveSample('Filtres', '100%', 200) }} -<p>Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur.</p> +Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur. -<p>Quelques autres points à noter :</p> +Quelques autres points à noter : -<ul> - <li>Les filtres sont une fonctionnalité très récente — ils sont pris en charge dans la plupart des navigateurs modernes, y compris Microsoft Edge, mais ils ne sont pas du tout pris en charge dans Internet Explorer. Si vous utilisez des filtres dans vos designs, vous devrez vous assurer que le contenu reste utilisable sans filtres.</li> - <li>Comme vous pouvez le voir, nous avons inclus une version de la propriété <code>filter</code> préfixée par <code>-webkit-</code>. On appelle cela un {{glossary("Vendor Prefix")}} (préfixe fournisseur) : c'est parfois utilisé par un navigateur avant de rendre définitive l'implémentation d'une nouvelle fonctionnalité. Cela permet de la prendre en charge et de l'expérimenter sans entrer en conflit avec la version non préfixée. Les préfixes fournisseur ne sont pas destinés à être utilisés par les développeurs web, mais ils sont parfois utilisés dans les pages de production si ces fonctionnalités expérimentales sont vraiment désirées. Dans notre cas, la version <code>-webkit-</code> de la propriété est actuellement requise pour une prise en charge par Chrome/Safari/Opera, alors que Edge et Firefox utilisent la version finale non préfixée.</li> -</ul> +- Les filtres sont une fonctionnalité très récente — ils sont pris en charge dans la plupart des navigateurs modernes, y compris Microsoft Edge, mais ils ne sont pas du tout pris en charge dans Internet Explorer. Si vous utilisez des filtres dans vos designs, vous devrez vous assurer que le contenu reste utilisable sans filtres. +- Comme vous pouvez le voir, nous avons inclus une version de la propriété `filter` préfixée par `-webkit-`. On appelle cela un {{glossary("Vendor Prefix")}} (préfixe fournisseur) : c'est parfois utilisé par un navigateur avant de rendre définitive l'implémentation d'une nouvelle fonctionnalité. Cela permet de la prendre en charge et de l'expérimenter sans entrer en conflit avec la version non préfixée. Les préfixes fournisseur ne sont pas destinés à être utilisés par les développeurs web, mais ils sont parfois utilisés dans les pages de production si ces fonctionnalités expérimentales sont vraiment désirées. Dans notre cas, la version `-webkit-` de la propriété est actuellement requise pour une prise en charge par Chrome/Safari/Opera, alors que Edge et Firefox utilisent la version finale non préfixée. -<div class="note"> -<p><strong>Note :</strong> Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p> -</div> +> **Note :** Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés. -<p>Vous pouvez voir d'autres exemples de filtres sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">code source</a>).</p> +Vous pouvez voir d'autres exemples de filtres sur [filters.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html)). -<h2 id="Modes_de_mélange_de_couleurs">Modes de mélange de couleurs</h2> +## Modes de mélange de couleurs -<p>Les modes de mélanges de couleurs des CSS permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop.</p> +Les modes de mélanges de couleurs des CSS permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop. -<p>Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :</p> +Deux propriétés utilisent les modes de mélange de couleurs dans les CSS : -<ul> - <li>{{cssxref("background-blend-mode")}} qui mélange plusieurs images d'arrière‑plan et des couleurs sur un seul élément.</li> - <li>{{cssxref("mix-blend-mode")}} qui mélange les couleurs de l'élément auquel la propriété est appliquée avec un élément de superposition — à la fois le fond et le contenu.</li> -</ul> +- {{cssxref("background-blend-mode")}} qui mélange plusieurs images d'arrière‑plan et des couleurs sur un seul élément. +- {{cssxref("mix-blend-mode")}} qui mélange les couleurs de l'élément auquel la propriété est appliquée avec un élément de superposition — à la fois le fond et le contenu. -<p>Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">code source</a>) et à la page de référence de {{cssxref("<blend-mode>")}}.</p> +Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page [blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) et à la page de référence de {{cssxref("<blend-mode>")}}. -<div class="note"> -<p><strong>Note :</strong> Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p> -</div> +> **Note :** Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement. -<h3 id="background-blend-mode">background-blend-mode</h3> +### background-blend-mode -<p>Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs :</p> +Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs : -<pre class="brush: html"><div> -</div> -<div class="multiply"> -</div></pre> +```html +<div> +</div> +<div class="multiply"> +</div> +``` -<p>Maintenant la CSS — nous ajoutons aux <code><div></code> une image d'arrière‑plan sur un fond vert :</p> +Maintenant la CSS — nous ajoutons aux `<div>` une image d'arrière‑plan sur un fond vert : -<pre class="brush: css">div { +```css +div { width: 250px; height: 130px; padding: 10px; @@ -252,37 +262,41 @@ button:active { .multiply { background-blend-mode: multiply; -}</pre> +} +``` -<p>Le résultat obtenu est le suivant — à gauche l'original et le mode mélange <code>multiply</code> à droite :</p> +Le résultat obtenu est le suivant — à gauche l'original et le mode mélange `multiply` à droite : -<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> +{{ EmbedLiveSample('background-blend-mode', '100%', 200) }} -<h3 id="mix-blend-mode">mix-blend-mode</h3> +### mix-blend-mode -<p>Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même <code><div></code>, mais chacun est posé sur un fond mauve pour montrer les effets du mélange :</p> +Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même `<div>`, mais chacun est posé sur un fond mauve pour montrer les effets du mélange : -<pre class="brush: html"><article> +```html +<article> Mode sans mélange - <div> + <div> - </div> - <div> - </div> -</article> + </div> + <div> + </div> +</article> -<article> +<article> Mélange "multiply" - <div class="multiply-mix"> + <div class="multiply-mix"> - </div> - <div> - </div> -</article></pre> + </div> + <div> + </div> +</article> +``` -<p>Voici la CSS avec laquelle nous stylisons :</p> +Voici la CSS avec laquelle nous stylisons : -<pre class="brush: css">article { +```css +article { width: 280px; height: 180px; margin: 10px; @@ -315,49 +329,48 @@ article div:last-child { .multiply-mix { mix-blend-mode: multiply; -}</pre> +} +``` -<p>Nous obtenons le résultat suivant :</p> +Nous obtenons le résultat suivant : -<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> +{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }} -<p>Vous voyez ici que <code>mix-blend-mode: multiply;</code> a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <code><div></code> situé dessous.</p> +Vous voyez ici que `mix-blend-mode: multiply;` a mélangé non seulement les deux images d'arrière plan, mais également la couleur du `<div>` situé dessous. -<div class="note"> -<p><strong>Note :</strong> Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/fr/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> -</div> +> **Note :** Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module [CSS Layout](/fr/docs/Learn/CSS/CSS_layout). -<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> +## -webkit-background-clip: text -<p>L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire <code>-webkit-text-fill-color: transparent;</code> cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur <code>-webkit-</code> même pour les navigateurs non-Webkit/Chrome :</p> +L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire `-webkit-text-fill-color: transparent;` cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur `-webkit-` même pour les navigateurs non-Webkit/Chrome : -<pre class="brush: css">.text-clip { +```css +.text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; -}</pre> - -<p>Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe <code>-webkit-</code> ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe <code>-webkit-</code> que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes.</p> +} +``` -<p>Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.</p> +Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe `-webkit-` ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe `-webkit-` que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes. -<div class="note"> -<p><strong>Note :</strong> Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>, allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p> -</div> +Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable. -<h2 id="Apprentissage_actif_expérimenter_certains_effets">Apprentissage actif : expérimenter certains effets</h2> +> **Note :** Pour un exemple de code complet avec `-webkit-background-clip: text`, allez à la page [background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). -<p>À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous.</p> +## Apprentissage actif : expérimenter certains effets -<p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> l'exemple avec le bouton correspondant.</p> +À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous. +Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ l'exemple avec le bouton correspondant. -<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>Zone de saisie HTML</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> -</div></textarea> +```html hidden +<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>Zone de saisie HTML</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> +</div></textarea> - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { width: 280px; height: 130px; padding: 10px; @@ -366,17 +379,18 @@ article div:last-child { background-color: red; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, linear-gradient(to bottom right, #f33, #a33); -} </textarea> +} </textarea> - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - </div> -</div> -</pre> + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + </div> +</div> +``` -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -401,25 +415,22 @@ reset.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> - +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations.</p> +Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations. -<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> +{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> -</ul> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Creation d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md index 105df053a6..e8d7882fc1 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -4,313 +4,330 @@ slug: Learn/CSS/Building_blocks/Backgrounds_and_borders translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} -<p>Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p> +Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Compétences informatique basiques, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base installés</a + >, connaissance simple en + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >manipulation de fichiers</a + >, les bases du HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), et une esquisse du fonctionnement du CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. ) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td> + </tr> + </tbody> </table> -<h2 id="styling_backgrounds_in_css">Mettre en forme l'arrière-plan avec CSS</h2> +## Mettre en forme l'arrière-plan avec CSS -<p>La propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> +La propriété CSS [`background`](/fr/docs/Web/CSS/background) est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété `background` difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important. -<pre class="brush: css">.box { +```css +.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; -}</pre> +} +``` -<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p> +Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans. -<h3 id="background_colors">Couleurs d'arrière-plan</h3> +### Couleurs d'arrière-plan -<p>La propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> +La propriété [`background-color`](/fr/docs/Web/CSS/background-color) définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle [`<color>`](/fr/docs/Web/CSS/color_value). La `background-color` s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément. -<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>.</p> +Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément [`<span>`](/fr/docs/Web/HTML/Element/span). -<p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value"><color></a> dans les différentes déclarations.</strong></p> +**Expérimentez avec ce code, en faisant varier les valeurs [\<color>](/fr/docs/Web/CSS/color_value) dans les différentes déclarations.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}} -<h3 id="background_images">Images d'arrière-plan</h3> +### Images d'arrière-plan -<p>La propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg">balloons.jpg</a>), l'autre avec comme fond une petite image représentant une étoile (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png">star.png</a>).</p> +La propriété [`background-image`](/fr/docs/Web/CSS/background-image) permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande ([balloons.jpg](https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg)), l'autre avec comme fond une petite image représentant une étoile ([star.png](https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png)). -<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> +Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}} -<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> +**Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété** `background-color` **dans l'exemple ci-dessus.** -<h4 id="controlling_background-repeat">Contrôler la répétition de l'arrière-plan</h4> +#### Contrôler la répétition de l'arrière-plan -<p>La propriété <a href="/fr/docs/Web/CSS/background-repeat"><code>background-repeat</code></a> permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> +La propriété [`background-repeat`](/fr/docs/Web/CSS/background-repeat) permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont : -<ul> - <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li> - <li><code>repeat-x</code> — répétition horizontale.</li> - <li><code>repeat-y</code> — répétition verticale.</li> - <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li> -</ul> +- `no-repeat` — aucune répétition de l'arrière-plan. +- `repeat-x` — répétition horizontale. +- `repeat-y` — répétition verticale. +- `repeat` — comportement par défaut : répétition dans les deux directions. -<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code> et observez.</strong></p> +**Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à `no-repeat`, une seule étoile apparaît donc. Remplacez par `repeat-x` et `repeat-y` et observez.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}} -<h4 id="sizing_the_background_image">Dimensionner l'image de fond</h4> +#### Dimensionner l'image de fond -<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété <a href="/fr/docs/Web/CSS/background-size"><code>background-size</code></a> — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> +Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété [`background-size`](/fr/docs/Web/CSS/background-size) — avec comme valeur une [longueur](/fr/docs/Web/CSS/length) ou un [pourcentage](/fr/docs/Web/CSS/percentage), permet d'adapter l'image à l'élément pour en occuper tout le fond. -<p>On peut aussi utiliser les mots-clé :</p> +On peut aussi utiliser les mots-clé : -<ul> - <li><code>cover</code> — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.</li> - <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li> -</ul> +- `cover` — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte. +- `contain` — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image. -<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p> +Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image. -<p>Essayez ce qui suit :</p> +Essayez ce qui suit : -<ul> - <li>Changez les dimensions de l'arrière-plan.</li> - <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li> - <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li> -</ul> +- Changez les dimensions de l'arrière-plan. +- Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par `background-size: cover` ou `background-size: contain`. +- Si votre image est plus petite que la boîte, vous pouvez changer la valeur de `background-repeat` pour répéter l'image. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}} -<h4 id="positioning_the_background_image">Positionner l'image de fond</h4> +#### Positionner l'image de fond -<p>La propriété <a href="/fr/docs/Web/CSS/background-position"><code>background-position</code></a> permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> +La propriété [`background-position`](/fr/docs/Web/CSS/background-position) permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine `(0,0)` au coin en haut à gauche de la boîte, l'axe (`x`) étant horizontal, l'axe (`y`) vertical. -<div class="note"> -<p><strong>Note :</strong> La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> -</div> +> **Note :** La valeur par défaut de `background-position` est `(0,0)`. -<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p> +Les valeurs les plus communes pour `background-position` se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale. -<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>) :</p> +Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les autres valeurs possibles sur la page [`background-image`](/fr/docs/Web/CSS/background-image)) : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; -}</pre> +} +``` -<p>Ainsi que des valeurs de <a href="/fr/docs/Web/CSS/length">longueurs</a>, ou des <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> +Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcentages](/fr/docs/Web/CSS/percentage) : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; -}</pre> +} +``` -<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> +On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; -}</pre> +} +``` -<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p> +La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : -<pre class="brush: css">.box { +```css +.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; -}</pre> +} +``` -<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p> +**Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}} -<div class="note"> -<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour<a href="/fr/docs/Web/CSS/background-position-x"><code>background-position-x</code></a> et <a href="/fr/docs/Web/CSS/background-position-y"><code>background-position-y</code></a>, qui permettent de fixer individuellement les positions sur chaque axe.</p> -</div> +> **Note :** `background-position` est un raccourci pour[`background-position-x`](/fr/docs/Web/CSS/background-position-x) et [`background-position-y`](/fr/docs/Web/CSS/background-position-y), qui permettent de fixer individuellement les positions sur chaque axe. -<h3 id="gradient_backgrounds">Utiliser un dégradé comme arrière-plan</h3> +### Utiliser un dégradé comme arrière-plan -<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p> +Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété [`background-image`](/fr/docs/Web/CSS/background-image). -<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui-là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> +Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type [`<gradient>`](/fr/docs/Web/CSS/gradient). Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple [celui-là](https://cssgradient.io/). Créez votre dégradé puis copiez-collez le code source qui l'a généré. -<p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p> +Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}} -<h3 id="multiple_background_images">Images de fond multiples</h3> +### Images de fond multiples -<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p> +Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour `background-image`, chacune séparé par une virgule. -<p>Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p> +Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier. -<div class="note"> -<p><strong>Note :</strong> On peut joyeusement mélanger dégradés et images de fond classiques.</p> -</div> +> **Note :** On peut joyeusement mélanger dégradés et images de fond classiques. -<p>Les autres propriétés <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> +Les autres propriétés `background-*` peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que `background-image`: -<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +```css +background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; -background-position: 10px 20px, top right;</pre> +background-position: 10px 20px, top right; +``` -<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'<code>image3</code> recevra la première valeur, et l'<code>image4</code> recevra la seconde valeur.</p> +Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur `background-repeat` de l' `image1` sera `no-repeat`. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs `background-position`. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'`image3` recevra la première valeur, et l'`image4` recevra la seconde valeur. -<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.</strong></p> +**Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}} -<h3 id="background_attachment">Défilement de l'arrière-plan</h3> +### Défilement de l'arrière-plan -<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> , qui peut prendre ces valeurs:</p> +Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) , qui peut prendre ces valeurs: -<ul> - <li><code>scroll</code> : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.</li> - <li><code>fixed</code> : L'arrière-plan de l'élément est fixe dans la zone d'affichage (<i lang="en">viewport</i>) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran.</li> - <li><code>local</code> : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur <code>scroll</code> et son comportement qui ne correspond pas aux cas d'usage. <code>local</code> permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.</li> -</ul> +- `scroll` : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle. +- `fixed` : L'arrière-plan de l'élément est fixe dans la zone d'affichage ( -<p>La propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (vous pouvez également consulter <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">le code source de cette démo</a>).</p> + <i lang="en">viewport</i> -<h3 id="using_the_background_shorthand_property">Utiliser la propriété raccourcie background</h3> + ) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran. -<p>Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété <a href="/fr/docs/Web/CSS/background"><code>background</code></a>. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.</p> +- `local` : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur `scroll` et son comportement qui ne correspond pas aux cas d'usage. `local` permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui. -<p>Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec <code>no-repeat</code> et un position et enfin une couleur d'arrière-plan.</p> +La propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : [background-attachment.html](https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (vous pouvez également consulter [le code source de cette démo](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds)). -<p>Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :</p> +### Utiliser la propriété raccourcie background -<ul> - <li>La valeur pour <code>background-color</code> ne peut être définie qu'après la virgule finale.</li> - <li>La valeur pour <code>background-size</code> ne peut être incluse qu'immédiatement après celle <code>background-position</code> en la séparant de celle-ci avec une barre oblique (« / »), par exemple : <code>center/80%</code>.</li> -</ul> +Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété [`background`](/fr/docs/Web/CSS/background). Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration. -<p>N'hésitez pas à consulter la page de documentation pour <a href="/fr/docs/Web/CSS/background"><code>background</code></a> qui détaille ces différents points.</p> +Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec `no-repeat` et un position et enfin une couleur d'arrière-plan. -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}</p> +Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie : -<h3 id="accessibility_considerations_with_backgrounds">Arrière-plans et accessibilité</h3> +- La valeur pour `background-color` ne peut être définie qu'après la virgule finale. +- La valeur pour `background-size` ne peut être incluse qu'immédiatement après celle `background-position` en la séparant de celle-ci avec une barre oblique (« / »), par exemple : `center/80%`. -<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p> +N'hésitez pas à consulter la page de documentation pour [`background`](/fr/docs/Web/CSS/background) qui détaille ces différents points. -<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}} -<h2 id="borders">Bordures</h2> +### Arrière-plans et accessibilité -<p>Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.</p> +Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une `background-color` qui rendra le texte lisible si l'image n'est pas chargée. -<p>On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> :</p> +Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond. -<pre class="brush: css">*.box { +## Bordures + +Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure. + +On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété [`border`](/fr/docs/Web/CSS/border) : + +```css +*.box { border: 1px solid black; -}*</pre> +}* +``` -<p>On peut aussi cibler un seul des côtés de la boîte, par exemple :</p> +On peut aussi cibler un seul des côtés de la boîte, par exemple : -<pre class="brush: css">.box { +```css +.box { border-top: 1px solid black; -}</pre> +} +``` -<p>Les propriétés individuelles équivalentes pour ces notations raccourcies seraient :</p> +Les propriétés individuelles équivalentes pour ces notations raccourcies seraient : -<pre class="brush: css">.box { +```css +.box { border-width: 1px; border-style: solid; border-color: black; -}</pre> +} +``` -<p>Pour la propriété qui concerne un des côtés :</p> +Pour la propriété qui concerne un des côtés : -<pre class="brush: css">.box { +```css +.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes <em>logiques</em> qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">de la directionnalité du texte</a>.</p> -</div> +> **Note :** Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes _logiques_ qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera [de la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions). -<p><strong>Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.</strong></p> +**Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.** -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}} -<h3 id="rounded_corners">Coins arrondis</h3> +### Coins arrondis -<p>On peut arrondir les coins d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a> ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.</p> +On peut arrondir les coins d'une boîte avec la propriété [`border-radius`](/fr/docs/Web/CSS/border-radius) ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure. -<p>Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> +Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins : -<pre class="brush: css">.box { +```css +.box { border-radius: 10px; -}</pre> +} +``` -<p>Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p> +Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% : -<pre class="brush: css">.box { +```css +.box { border-top-right-radius: 1em 10%; -}</pre> +} +``` + +Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de [`border-radius`](/fr/docs/Web/CSS/border-radius), vous y trouverez la syntaxe pour les différentes options. + +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}} -<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, vous y trouverez la syntaxe pour les différentes options.</p> +## Testez vos compétences ! -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}</p> +Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas : -<h2 id="test_your_skills">Testez vos compétences !</h2> +1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px. +2. Ajouter une image de fond (utiliser l'URL `balloons.jpg`) à redimensionner pour qu'elle recouvre la boîte. +3. Donnez au `<h2>` une couleur de fond noire semi-transparente, avec un texte en blanc. -<p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p> +{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}} -<ol> - <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li> - <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li> - <li>Donnez au <code><h2></code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li> -</ol> +> **Note :** Vous pouvez [jeter un œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md) — mais essayez d'abord de la trouver par vous-même ! -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}</p> +## Résumé -<div class="note"> -<p><strong>Note :</strong> Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> -</div> +Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances. -<h2 id="summary">Résumé</h2> +Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ? -<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}} -<p>Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?</p> +## Dans ce cours -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="Dans_ce_cours">Dans ce cours</h2> + - [Sélecteurs de classe, de type et d'identifiant](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li>Arrières-plans et bordures</li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> - </ol>
\ No newline at end of file +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. Arrières-plans et bordures +5. [Gérer la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Le dépassement du contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Dimensionnement des objets en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias, et formulaires](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mettre en forme les tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Déboguer CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser son code CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.md b/files/fr/learn/css/building_blocks/box_model_tasks/index.md index 0d4034be70..715db21d91 100644 --- a/files/fr/learn/css/building_blocks/box_model_tasks/index.md +++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.md @@ -6,80 +6,67 @@ tags: - CSS translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.</p> +L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices.</p> -<p>Si vous bloquez, demandez-nous de l'aide : voir la section <a href="#assessment_or_further_help">Évaluation et aide</a> en bas de cette page.</p> -</div> +> **Note :** Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices. +> +> Si vous bloquez, demandez-nous de l'aide : voir la section [Évaluation et aide](#assessment_or_further_help) en bas de cette page. -<h2 id="the_box_model_one">Modèle de boîte : numéro 1</h2> +## Modèle de boîte : numéro 1 -<p>Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous :</p> +Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous : -<p><img alt="Deux boîtes de la même taille" src="mdn-box-model1.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}} -<div class="note"> -<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> -</div> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="the_box_model_two">Modèle de boîte : numéro 2</h2> +## Modèle de boîte : numéro 2 -<p>Dans cet exercice, ajoutez à la boîte :</p> +Dans cet exercice, ajoutez à la boîte : -<ul> - <li>une bordure pointillée, noire, de 5px d'épaisseur ;</li> - <li>une marge supérieure de 20px ;</li> - <li>une marge à droite de 1em ;</li> - <li>une marge inférieure de 40px ;</li> - <li>une marge gauche de 2em ;</li> - <li>un espace intérieur sur tous les côtés de 1em.</li> -</ul> +- une bordure pointillée, noire, de 5px d'épaisseur ; +- une marge supérieure de 20px ; +- une marge à droite de 1em ; +- une marge inférieure de 40px ; +- une marge gauche de 2em ; +- un espace intérieur sur tous les côtés de 1em. -<p><img alt="Une boîte avec une bordure pointillée" src="mdn-box-model2.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}} -<div class="note"> -<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> -</div> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="the_box_model_three">Modèle de boîte : numéro 3</h2> +## Modèle de boîte : numéro 3 -<p>Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?</p> +Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ? -<p><img alt="Une boîte en ligne avec un espace entre elle et le texte qui l'entoure" src="mdn-box-model3.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}} -<div class="note"> -<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> -</div> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="assessment_or_further_help">Évaluation et aide</h2> +## Évaluation et aide -<p>Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.</p> +Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page. -<p>Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :</p> +Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide : -<ol> - <li>Enregistrez votre travail dans un éditeur en ligne partageable, du type <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a>. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.</li> - <li>Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie <a href="https://discourse.mozilla.org/c/mdn/learn">"Apprentissage" (Learning) du forum Discourse de MDN</a>. Votre message doit inclure : - <ul> - <li>Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".</li> - <li>Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.</li> - <li>Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code!</li> - <li>Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.</li> - </ul> - </li> -</ol> +1. Enregistrez votre travail dans un éditeur en ligne partageable, du type [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/). Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus. +2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie ["Apprentissage" (Learning) du forum Discourse de MDN](https://discourse.mozilla.org/c/mdn/learn). Votre message doit inclure : + + - Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1". + - Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail. + - Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code! + - Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide. diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md index 7bc80fb59e..855f04d88b 100644 --- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -13,332 +13,272 @@ tags: translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage --- -<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} -<p>Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.</p> +Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus. -<p>Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.</p> +Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >suite logicielle de base installée</a + >, compétences élémentaires pour <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. <a + href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >), et une idée de <a + href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" + >Comment fonctionne CSS</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Découvrir la cascade et la spécificité, et comment l'héritage fonctionne + en CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Règles_contradictoires">Règles contradictoires</h2> +## Règles contradictoires -<p>CSS est l'acronyme de <strong>Cascading Style Sheets</strong>, qu'on peut traduire par <em>feuilles de style en cascade</em> et la compréhension de ce premier mot <em>cascading</em> est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.</p> +CSS est l'acronyme de **Cascading Style Sheets**, qu'on peut traduire par *feuilles de style en cascade* et la compréhension de ce premier mot *cascading* est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS. -<p>À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La <strong>cascade</strong>, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.</p> +À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La **cascade**, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent. -<p>Le concept d'<strong>héritage</strong> est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.</p> +Le concept d'**héritage** est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus. -<p>Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.</p> +Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous. -<h3 id="La_cascade">La cascade</h3> +### La cascade -<p>À un niveau élémentaire, la <strong>cascade</strong> des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.</p> +À un niveau élémentaire, la **cascade** des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme. -<p>Dans l'exemple ci-dessous deux règles pourraient s'appliquer à <code>h1</code>. Au final <code>h1</code> est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.</p> +Dans l'exemple ci-dessous deux règles pourraient s'appliquer à `h1`. Au final `h1` est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} -<h3 id="Spécificité">Spécificité</h3> +### Spécificité -<p>Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :</p> +Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise : -<ul> - <li>Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ;</li> - <li>Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut <code>class</code> a la valeur choisie — son score est plus important.</li> -</ul> +- Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ; +- Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut `class` a la valeur choisie — son score est plus important. -<p>Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à <code>h1</code>. Au final <code>h1</code> est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.</p> +Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à `h1`. Au final `h1` est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} -<p>Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.</p> +Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin. -<h3 id="Héritage">Héritage</h3> +### Héritage -<p>L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.</p> +L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non. -<p>Par exemple, si vous fixez une <code>color</code> et une <code>font-family</code> pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.</p> +Par exemple, si vous fixez une `color` et une `font-family` pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} -<p>Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !</p> +Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant ! -<div class="note"> -<p><strong>Note :</strong> Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la <a href="/fr/docs/Web/CSS/color#Specifications">section des spécifications de la propriété color</a>, par exemple.</p> -</div> +> **Note :** Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la [section des spécifications de la propriété color](/fr/docs/Web/CSS/color#Specifications), par exemple. -<h2 id="Comprendre_comment_ces_concepts_se_combinent">Comprendre comment ces concepts se combinent</h2> +## Comprendre comment ces concepts se combinent -<p>Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !</p> +Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici ! -<h2 id="Comprendre_lhéritage">Comprendre l'héritage</h2> +## Comprendre l'héritage -<p>Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (<code>padding</code>) et une couleur de police pour la <code><ul></code> extérieure.</p> +Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (`padding`) et une couleur de police pour la `<ul>` extérieure. -<p>La couleur est transmise aux enfants directs, et aussi enfants indirects — les <code><li></code> de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe <code>special</code> à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.</p> +La couleur est transmise aux enfants directs, et aussi enfants indirects — les `<li>` de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe `special` à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} -<p>Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !</p> +Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange ! -<p>Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.</p> +Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas. -<h3 id="Contrôler_lhéritage">Contrôler l'héritage</h3> +### Contrôler l'héritage -<p>CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.</p> +CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS. -<dl> - <dt>{{cssxref("inherit")}}</dt> - <dd>La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".</dd> - <dt>{{cssxref("initial")}}</dt> - <dd>La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à <code>inherit</code>.</dd> - <dt>{{cssxref("unset")}}</dt> - <dd>Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que <code>inherit</code>, sinon il est identique à <code>initial</code>.</dd> -</dl> +- {{cssxref("inherit")}} + - : La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage". +- {{cssxref("initial")}} + - : La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à `inherit`. +- {{cssxref("unset")}} + - : Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que `inherit`, sinon il est identique à `initial`. -<div class="note"> -<p><strong>Note :</strong> Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.</p> -</div> +> **Note :** Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité. -<div class="note"> -<p><strong>Note :</strong> Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.</p> -</div> +> **Note :** Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent. -<p>Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.</p> +Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS. -<p>Par exemple :</p> +Par exemple : -<ol> - <li>Le deuxième item de la liste est dans la classe <code>my-class-1</code>. Cela définit la couleur de l'élément <code><a></code> qu'il contient à <code>inherit</code>. Si vous supprimez cette règle, quelle est la couleur du lien ?</li> - <li>Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.</li> - <li>Quels liens changeront de couleur si on redéfinit la couleur de l'élément <code><a></code> — par exemple <code>a { color: red; }</code> ?</li> -</ol> +1. Le deuxième item de la liste est dans la classe `my-class-1`. Cela définit la couleur de l'élément `<a>` qu'il contient à `inherit`. Si vous supprimez cette règle, quelle est la couleur du lien ? +2. Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus. +3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément `<a>` — par exemple `a { color: red; }` ? -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} -<h3 id="Réinitialiser_la_valeur_de_toutes_les_propriétés">Réinitialiser la valeur de toutes les propriétés</h3> +### Réinitialiser la valeur de toutes les propriétés -<p>En CSS, la propriété raccourci <code>all</code> peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (<code>inherit</code>, <code>initial</code>, <code>unset</code>, ou <code>revert</code>). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.</p> +En CSS, la propriété raccourci `all` peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (`inherit`, `initial`, `unset`, ou `revert`). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications. -<p>Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément <code><blockquote></code> lui-même, le second <code><blockquote></code> appartient à une classe qui définit la valeur de <code>all</code> à <code>unset</code>.</p> +Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément `<blockquote>` lui-même, le second `<blockquote>` appartient à une classe qui définit la valeur de `all` à `unset`. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} -<p>Essayez de donner à <code>all</code> l'une des autres valeurs possibles et observez les changements.</p> +Essayez de donner à `all` l'une des autres valeurs possibles et observez les changements. -<h2 id="Comprendre_la_cascade">Comprendre la cascade</h2> +## Comprendre la cascade -<p>Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <code><body></code>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.</p> +Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le `<body>`, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément. -<p>Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :</p> +Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après : -<ol> - <li><strong>Importance</strong></li> - <li><strong>Spécificité</strong></li> - <li><strong>Ordre d'apparition dans le source</strong></li> -</ol> +1. **Importance** +2. **Spécificité** +3. **Ordre d'apparition dans le source** -<p>Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.</p> +Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué. -<h3 id="Ordre_dapparition_dans_le_source">Ordre d'apparition dans le source </h3> +### Ordre d'apparition dans le source -<p>Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..</p> +Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément.. -<h3 id="Spécificité_2">Spécificité</h3> +### Spécificité -<p>L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une <strong>spécificité</strong> plus élevée — elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.</p> +L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une **spécificité** plus élevée — elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément. -<p>Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.</p> +Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément. -<p>Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.</p> +Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée. -<p>Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.</p> +Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> +{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} -<p>Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.</p> +Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles. -<p>Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :</p> +Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes : -<ol> - <li><strong>Milliers </strong>: ajouter 1 dans cette colonne si la déclaration apparaît dans un {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.</li> - <li><strong>Centaines </strong>: ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.</li> - <li><strong>Dizaines </strong>: ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.</li> - <li><strong>Unités </strong>: ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.</li> -</ol> +1. **Milliers** : ajouter 1 dans cette colonne si la déclaration apparaît dans un {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000. +2. **Centaines** : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global. +3. **Dizaines** : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global. +4. **Unités** : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global. -<div class="note"> -<p><strong>Note :</strong> Le sélecteur universel (<code>*</code>), les combinateurs (<code>+</code>, <code>></code>, <code>~</code>, ' '), et la pseudo-class de négation (<code>:not</code>) n'affectent en rien la spécificité.</p> -</div> +> **Note :** Le sélecteur universel (`*`), les combinateurs (`+`, `>`, `~`, ' '), et la pseudo-class de négation (`:not`) n'affectent en rien la spécificité. -<p>Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la <a href="/fr/docs/Web/CSS/CSS_Selectors">référence MDN des sélecteurs</a>.</p> +Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la [référence MDN des sélecteurs](/fr/docs/Web/CSS/CSS_Selectors). -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Milliers</th> - <th scope="col">Centaines</th> - <th scope="col">Dizaines</th> - <th scope="col">Unités</th> - <th scope="col">Spécificité</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>h1</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1</td> - <td>0001</td> - </tr> - <tr> - <td><code>h1 + p::first-letter</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>3</td> - <td>0003</td> - </tr> - <tr> - <td><code>li > a[href*="fr"] > .inline-warning</code></td> - <td>0</td> - <td>0</td> - <td>2</td> - <td>2</td> - <td>0022</td> - </tr> - <tr> - <td><code>#identifiant</code></td> - <td>0</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0100</td> - </tr> - <tr> - <td>pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément </td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1000</td> - </tr> - </tbody> -</table> +| Sélecteur | Milliers | Centaines | Dizaines | Unités | Spécificité | +| ------------------------------------------------------------------------------------------------------- | -------- | --------- | -------- | ------ | ----------- | +| `h1` | 0 | 0 | 0 | 1 | 0001 | +| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 | +| `li > a[href*="fr"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 | +| `#identifiant` | 0 | 1 | 0 | 0 | 0100 | +| pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément | 1 | 0 | 0 | 0 | 1000 | + +Avant de continuer, regardons un exemple en action. -<p>Avant de continuer, regardons un exemple en action.</p> +{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> +Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune. -<p>Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.</p> +- Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un. +- Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104. +- Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24. -<ul> - <li>Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un.</li> - <li>Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104.</li> - <li>Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24.</li> -</ul> +> **Note :** Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un *million* de sélecteurs de **class** combinés ne prendront jamais le dessus sur *un* sélecteur d'**id**. +> +> Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs. -<div class="note"> -<p><strong>Note :</strong> Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un <em>million</em> de sélecteurs de <strong>class</strong> combinés ne prendront jamais le dessus sur <em>un</em> sélecteur d'<strong>id</strong>.</p> +### !important -<p>Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.</p> -</div> +Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale `!important` mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade. -<h3 id="!important">!important</h3> +Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID. -<p>Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale <code>!important</code> mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.</p> +{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} -<p>Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.</p> +Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe. -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> +1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures. +2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques ! +3. Les deux éléments sont dans la classe `better`, mais le deuxième a aussi l'{{htmlattrxref("id")}} `winning`. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément, alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe. +4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration `!important` dans la deuxième règle — écrit après `border: none`, ce mot-clé signifie que cette déclaration l'emporte sur le `border` définie dans la règle précédente, même si l'ID a une spécificité plus élevée. -<p>Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.</p> +> **Note :** La seule façon de dépasser cette déclaration `!important` serait d'ajouter un `!important` dans une déclaration de même *spécificité* apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande. -<ol> - <li>Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.</li> - <li>Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !</li> - <li>Les deux éléments sont dans la classe <code>better</code>, mais le deuxième a aussi l'{{htmlattrxref("id")}} <code>winning</code>. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément, alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.</li> - <li>Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration <code>!important</code> dans la deuxième règle — écrit après <code>border: none</code>, ce mot-clé signifie que cette déclaration l'emporte sur le <code>border</code> définie dans la règle précédente, même si l'ID a une spécificité plus élevée.</li> -</ol> +Il est utile de connaître `!important` , ne serait-ce que pour le reconnaître dans le code des autres. **Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.** `!important` modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style. -<div class="note"> -<p><strong>Note :</strong> La seule façon de dépasser cette déclaration <code>!important</code> serait d'ajouter un <code>!important</code> dans une déclaration de même<em> spécificité</em> apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.</p> -</div> +Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser `!important`. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas. -<p>Il est utile de connaître <code>!important</code> , ne serait-ce que pour le reconnaître dans le code des autres. <strong>Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.</strong> <code>!important</code> modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.</p> +## Où sont écrites les règles CSS -<p>Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser <code>!important</code>. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.</p> +Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture. -<h2 id="Où_sont_écrites_les_règles_CSS">Où sont écrites les règles CSS</h2> +## En résumé -<p>Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.</p> +Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures : -<h2 id="En_résumé">En résumé</h2> +1. Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini). +2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur). +3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web). +4. Déclarations `!important` dans les feuilles de style d'auteur. +5. Déclarations `!important` dans les feuilles de style utilisateur. -<p>Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :</p> +Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant `!important` dans leurs règles. -<ol> - <li>Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).</li> - <li>Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).</li> - <li>Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).</li> - <li>Déclarations <code>!important</code> dans les feuilles de style d'auteur.</li> - <li>Déclarations <code>!important</code> dans les feuilles de style utilisateur.</li> -</ol> +## Activité : jouer dans la cascade -<p>Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant <code>!important</code> dans leurs règles.</p> +Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur `<color>`. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle. -<h2 id="Activité_jouer_dans_la_cascade">Activité : jouer dans la cascade</h2> +Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, [jetez un coup d'œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade). -<p>Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur <code><color></code>. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.</p> +{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}} -<p>Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">jetez un coup d'œil à la solution ici</a>.</p> +## À suivre -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p> +Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs. -<h2 id="À_suivre">À suivre</h2> +Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir. -<p>Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.</p> +En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité. -<p>Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.</p> +{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} -<p>En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.</p> +## Dans ce cours -<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="Dans_ce_cours">Dans ce cours</h2> + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md index 720f34217f..8af917335c 100644 --- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md @@ -17,97 +17,88 @@ tags: translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}</div> - -<p>Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.</p> +Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de faire cet exercice vous devez avoir vu tous les articles de ce + module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester votre compréhension du modèle de boîte CSS et toutes les + fonctionnalités associées comme l'implémentation d'arrière‑plans. + </td> + </tr> + </tbody> </table> -<h2 id="Départ">Départ</h2> +## Départ + +Pour débuter cet exercice, vous devez : + +- faire une copie locale du [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html) et de la [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. +- enregistrer des copies locales des images d'[en‑tête](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png), [pied de page](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png) et [logo](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png) dans le même répertoire que les fichiers de code. + +> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document. + +## Résumé du projet -<p>Pour débuter cet exercice, vous devez :</p> +Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut : -<ul> - <li>faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> et de la <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> — enregistrez‑les sous les noms <code>index.html</code> et <code>style.css</code> dans un nouveau répertoire.</li> - <li>enregistrer des copies locales des images d'<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">en‑tête</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">pied de page</a> et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a> dans le même répertoire que les fichiers de code.</li> -</ul> +### La lettre -<div class="note"> -<p><strong>Note :</strong> Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> -</div> +- appliquer la CSS au HTML, +- ajouter à la lettre une déclaration `background` qui : -<h2 id="Résumé_du_projet">Résumé du projet</h2> + - place l'image haute en en‑tête de lettre + - place l'image basse en pied de lettre + - ajoute un gradient semi-transparent au‑dessus des deux arrière‑plans ci‑dessus pour donner un peu de texture à la lettre. Faites en sorte qu'il soit légèrement obscurcissant en en‑tête et pied de page, mais totalement transparent sur la plus grande partie du centre de la lettre, -<p>Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut :</p> +- ajouter une autre déclaration `background` qui mette uniquement l'image haute en en‑tête, en recours pour les navigateurs qui ne prennent pas en charge la précédente déclaration, +- ajouter un arrière‑plan de couleur blanche à la lettre. +- ajouter un encadrement plein de 1mm en haut et en bas de la lettre, dans une couleur qui soit en accord avec le schéma de couleur général, -<h3 id="La_lettre">La lettre</h3> +### Le logo -<ul> - <li>appliquer la CSS au HTML,</li> - <li>ajouter à la lettre une déclaration <code>background</code> qui : - <ul> - <li>place l'image haute en en‑tête de lettre</li> - <li>place l'image basse en pied de lettre</li> - <li>ajoute un gradient semi-transparent au‑dessus des deux arrière‑plans ci‑dessus pour donner un peu de texture à la lettre. Faites en sorte qu'il soit légèrement obscurcissant en en‑tête et pied de page, mais totalement transparent sur la plus grande partie du centre de la lettre,</li> - </ul> - </li> - <li>ajouter une autre déclaration <code>background</code> qui mette uniquement l'image haute en en‑tête, en recours pour les navigateurs qui ne prennent pas en charge la précédente déclaration,</li> - <li>ajouter un arrière‑plan de couleur blanche à la lettre.</li> - <li>ajouter un encadrement plein de 1mm en haut et en bas de la lettre, dans une couleur qui soit en accord avec le schéma de couleur général,</li> -</ul> +- à l'élément {{htmlelement("h1")}}, ajouter le logo en tant qu'image de fond, +- ajouter un filtre au logo pour donner une très légère ombre portée,. +- puis, commenter le filtre et implémenter l'ombre portée d'une autre manière pour être compatible inter-navigateurs, mais qui suive encore la forme ronde de l'image. -<h3 id="Le_logo">Le logo</h3> +## Astuces -<ul> - <li>à l'élément {{htmlelement("h1")}}, ajouter le logo en tant qu'image de fond,</li> - <li>ajouter un filtre au logo pour donner une très légère ombre portée,.</li> - <li>puis, commenter le filtre et implémenter l'ombre portée d'une autre manière pour être compatible inter-navigateurs, mais qui suive encore la forme ronde de l'image.</li> -</ul> +- Souvenez‑vous que vous pouvez créer un recours pour les navigateurs les plus anciens en faisant la déclaration de la version de recours avant celle qui n'est prise en charge que par les navigateurs modernes. Les anciens navigateurs appliqueront la première déclaration tout en ignorant la seconde, alors que les navigateurs récents appliqueront la première déclaration, mais l'écraseront avec la seconde. +- Vous êtes bien entendu libre de créer vos propres graphes si vous le souhaitez. -<h2 id="Astuces">Astuces</h2> +## Exemple -<ul> - <li>Souvenez‑vous que vous pouvez créer un recours pour les navigateurs les plus anciens en faisant la déclaration de la version de recours avant celle qui n'est prise en charge que par les navigateurs modernes. Les anciens navigateurs appliqueront la première déclaration tout en ignorant la seconde, alors que les navigateurs récents appliqueront la première déclaration, mais l'écraseront avec la seconde.</li> - <li>Vous êtes bien entendu libre de créer vos propres graphes si vous le souhaitez.</li> -</ul> +Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera : -<h2 id="Exemple">Exemple</h2> + -<p>Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :</p> -<p><img alt="" src="letterhead.png"></p> -<p> </p> +## Évaluation -<h2 id="Évaluation">Évaluation</h2> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abord, il n'y rien à gagner en trichant !</p> +{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}} -<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p> -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> -</ul> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Création d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.md b/files/fr/learn/css/building_blocks/debugging_css/index.md index e367a4cd59..0ce7d1dc55 100644 --- a/files/fr/learn/css/building_blocks/debugging_css/index.md +++ b/files/fr/learn/css/building_blocks/debugging_css/index.md @@ -4,200 +4,209 @@ slug: Learn/CSS/Building_blocks/Debugging_CSS translation_of: Learn/CSS/Building_blocks/Debugging_CSS original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}} -<p>Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.</p> +Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="/fr/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="/fr/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td> + Basic computer literacy, + <a + href="/fr/Learn/Getting_started_with_the_web/Installing_basic_software" + >basic software installed</a + >, basic knowledge of + <a href="/fr/Learn/Getting_started_with_the_web/Dealing_with_files" + >working with files</a + >, HTML basics (study + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction to HTML</a + >), and an idea of how CSS works (study + <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a>.) + </td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td> + To learn the basics of what browser DevTools are, and how to do simple + inspection and editing of CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Comment_accéder_aux_outils_de_développement_du_navigateur">Comment accéder aux outils de développement du navigateur</h2> +## Comment accéder aux outils de développement du navigateur -<p>L'article <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement de navigateurs</a> est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.</p> +L'article [Que sont les outils de développement de navigateurs](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs. -<p>You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, and <a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.</p> +You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit [Grid Layouts](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), [Flexbox](/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts), and [Shapes](/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes). However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor. -<p>In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">an example file</a>. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.</p> +In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using [an example file](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above. -<h2 id="The_DOM_versus_view_source">The DOM versus view source</h2> +## The DOM versus view source -<p>Something that can trip up newcomers to DevTools is the difference between what you see when you <a href="/fr/docs/Tools/View_source">view the source</a> of a webpage, or look at the HTML file you put on the server, and what you can see in the <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.</p> +Something that can trip up newcomers to DevTools is the difference between what you see when you [view the source](/fr/docs/Tools/View_source) of a webpage, or look at the HTML file you put on the server, and what you can see in the [HTML Pane](/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane) of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences. -<p>In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <code><h2></code> but closing with an <code></h3></code>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <code><h2></code> with an <code></h2></code>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.</p> +In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an `<h2>` but closing with an `</h3>`, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open `<h2>` with an `</h2>`. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript. -<p>View Source in comparison, is simply the HTML source code as stored on the server. The <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.</p> +View Source in comparison, is simply the HTML source code as stored on the server. The [HTML tree](/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree) in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on. -<h2 id="Inspecting_the_applied_CSS">Inspecting the applied CSS</h2> +## Inspecting the applied CSS -<p>Select an element on your page, either by right/ctrl-clicking on it and selecting <em>Inspect</em>, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of <code>box1</code>; this is the first element on the page with a bordered box drawn around it.</p> +Select an element on your page, either by right/ctrl-clicking on it and selecting _Inspect_, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of `box1`; this is the first element on the page with a bordered box drawn around it. -<p><img alt="The example page for this tutorial with DevTools open." src="inspecting1.png"></p> + -<p>If you look at the <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code><body></code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p> +If you look at the [Rules view](/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view) to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class `box1` and also the CSS that is being inherited by the box from its ancestors, in this case to `<body>`. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element. -<p>Also useful is the ability to expand out shorthand properties. In our example the <code>margin</code> shorthand is used.</p> +Also useful is the ability to expand out shorthand properties. In our example the `margin` shorthand is used. -<p><strong>Click on the little arrow to expand the view, showing the different longhand properties and their values.</strong></p> +**Click on the little arrow to expand the view, showing the different longhand properties and their values.** -<p><strong>You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example <code>border-radius</code>, and the CSS will stop applying.</strong></p> +**You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example `border-radius`, and the CSS will stop applying.** -<p>You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.</p> +You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem. -<p>The following video provides some useful tips on debugging CSS using the Firefox DevTools:</p> +The following video provides some useful tips on debugging CSS using the Firefox DevTools: -<p>{{EmbedYouTube("O3DAm82vIvU")}}</p> +{{EmbedYouTube("O3DAm82vIvU")}} -<h2 id="Editing_values">Editing values</h2> +## Editing values -<p>In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.</p> +In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page. -<p><strong>With <code>box1</code> selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.</strong></p> +**With `box1` selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.** -<p><img alt="DevTools Styles Panel with a color picker open." src="inspecting2-color-picker.png"></p> + -<h2 id="Adding_a_new_property">Adding a new property</h2> +## Adding a new property -<p>You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <code><body></code> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.</p> +You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the `<body>` element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file. -<p><strong>You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting <code>font-size</code>, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.</strong></p> +**You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting `font-size`, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.** -<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="inspecting3-font-size.png"></p> + -<div class="note"> -<p><strong>Note :</strong> There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> -</div> +> **Note :** There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at [Examine and edit CSS](/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). -<h2 id="Understanding_the_box_model">Understanding the box model</h2> +## Understanding the box model -<p>In previous lessons we have discussed <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p> +In previous lessons we have discussed [the Box Model](/fr/docs/Learn/CSS/Building_blocks/The_box_model), and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated. -<p>The <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p> +The [Layout view](/fr/docs/Tools/Page_Inspector/UI_Tour#Layout_view) shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set. -<p>In this panel, one of the detailed properties is the <code>box-sizing</code> property, which controls what box model the element uses.</p> +In this panel, one of the detailed properties is the `box-sizing` property, which controls what box model the element uses. -<p><strong>Compare the two boxes with classes <code>box1</code> and <code>box2</code>. They both have the same width applied (400px), however <code>box1</code> is visually wider. You can see in the layout panel that it is using <code>content-box</code>. This is the value that takes the size you give the element and then adds on the padding and border width.</strong></p> +**Compare the two boxes with classes `box1` and `box2`. They both have the same width applied (400px), however `box1` is visually wider. You can see in the layout panel that it is using `content-box`. This is the value that takes the size you give the element and then adds on the padding and border width.** -<p>The element with a class of <code>box2</code> is using <code>border-box</code>, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case <code>width: 400px</code>.</p> +The element with a class of `box2` is using `border-box`, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case `width: 400px`. -<p><img alt="The Layout section of the DevTools" src="inspecting4-box-model.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Find out more in <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p> -</div> +> **Note :** Find out more in [Examining and Inspecting the Box Model](/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model). -<h2 id="Solving_specificity_issues">Solving specificity issues</h2> +## Solving specificity issues -<p>Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.</p> +Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out. -<p>In our example file there are two words that have been wrapped in an <code><em></code> element. One is displaying as orange and the other hotpink. In the CSS we have applied:</p> +In our example file there are two words that have been wrapped in an `<em>` element. One is displaying as orange and the other hotpink. In the CSS we have applied: -<pre class="brush: css">em { +```css +em { color: hotpink; font-weight: bold; -}</pre> +} +``` -<p>Above that in the stylesheet however is a rule with a <code>.special</code> selector:</p> +Above that in the stylesheet however is a rule with a `.special` selector: -<pre class="brush: css">.special { +```css +.special { color: orange; -}</pre> +} +``` -<p>As you will recall from the lesson on <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p> +As you will recall from the lesson on [cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet. -<p><strong>Inspect the <code><em></code> with the class of <code>.special</code> and DevTools will show you that orange is the color that applies, and also shows you the <code>color</code> property applied to the em crossed out. You can now see that the class is overriding the element selector.</strong></p> +**Inspect the `<em>` with the class of `.special` and DevTools will show you that orange is the color that applies, and also shows you the `color` property applied to the em crossed out. You can now see that the class is overriding the element selector.** -<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="inspecting5-specificity.png"></p> + -<h2 id="Find_out_more_about_the_Firefox_DevTools">Find out more about the Firefox DevTools</h2> +## Find out more about the Firefox DevTools -<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/fr/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/fr/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p> +There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main [DevTools section](/fr/docs/Tools), and for more detail on the things we have briefly covered in this lesson see [The How To Guides](/fr/docs/Tools/Page_Inspector#How_to). -<h2 id="Debugging_problems_in_CSS">Debugging problems in CSS</h2> +## Debugging problems in CSS -<p>DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.</p> +DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help. -<h3 id="Take_a_step_back_from_the_problem">Take a step back from the problem</h3> +### Take a step back from the problem -<p>Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.</p> +Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier. -<h3 id="Do_you_have_valid_HTML_and_CSS">Do you have valid HTML and CSS?</h3> +### Do you have valid HTML and CSS? -<p>Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.</p> +Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors. -<ul> - <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li> - <li><a href="https://validator.w3.org/">HTML validator</a></li> -</ul> +- [CSS Validator](https://jigsaw.w3.org/css-validator/) +- [HTML validator](https://validator.w3.org/) -<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">Is the property and value supported by the browser you are testing in?</h3> +### Is the property and value supported by the browser you are testing in? -<p>Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.</p> +Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}. -<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="no-support.png"></p> + -<p>You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.</p> +You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property. -<p>{{compat("css.shape-outside")}}</p> +{{compat("css.shape-outside")}} -<h3 id="Is_something_else_overriding_your_CSS">Is something else overriding your CSS?</h3> +### Is something else overriding your CSS? -<p>This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.</p> +This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it. -<h3 id="Make_a_reduced_test_case_of_the_problem">Make a reduced test case of the problem</h3> +### Make a reduced test case of the problem -<p>If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.</p> +If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively. -<p>A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.</p> +A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature. -<p>To create a reduced test case:</p> +To create a reduced test case: -<ol> - <li>If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like <a href="https://codepen.io/">CodePen</a> is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.</li> - <li>If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript <em>does</em> make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.</li> - <li>Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.</li> - <li>Remove any CSS that doesn't impact the issue.</li> -</ol> +1. If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like [CodePen](https://codepen.io/) is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident. +2. If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript _does_ make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue. +3. Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue. +4. Remove any CSS that doesn't impact the issue. -<p>In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.</p> +In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds. -<p>If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.</p> +If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help. -<p>In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>).</p> +In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's [bugzilla site](https://bugzilla.mozilla.org)). -<p>As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.</p> +As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found. -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md index 114467a4f8..a0a87e37ce 100644 --- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md @@ -15,124 +15,109 @@ tags: translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}} -<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</div> - -<p>Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.</p> +Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de vous lancer dans cet exercice vous devez avoir déja travaillé + l'ensemble des articles de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester votre compréhension des fondements de la théorie, de la syntaxe + et des mécanismes des CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ + +Pour demarrer cet exercice, vous devez : + +- Récupérer et enregistrer le [fichier HTML de l'exercice](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html) ainsi que le [fichier image associé](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée. +- Enregistrez le [fichier texte des ressources de la CSS](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice. + +> **Note :** À défaut, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet [URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) pour faire pointer l'élément `<img>` sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément `<style>` dans l'élément `head` du document. + +## Énoncé du projet -<p>Pour demarrer cet exercice, vous devez :</p> +Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire. -<ul> - <li>Récupérer et enregistrer le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">fichier HTML de l'exercice</a> ainsi que le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">fichier image associé</a> dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée.</li> - <li>Enregistrez le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">fichier texte des ressources de la CSS</a> — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice.</li> -</ul> +Construction de base : -<div class="note"> -<p><strong>Note :</strong> À défaut, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">URL</a> pour faire pointer l'élément <code><img></code> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> -</div> +- Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme `style.css`. +- Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément `<link>`. +- Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML. +- Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié. -<h2 id="Énoncé_du_projet">Énoncé du projet</h2> +Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS : -<p>Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.</p> +- Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS. +- Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que : -<p>Construction de base :</p> + - entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !). + - l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale. + - le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale. + - l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne). -<ul> - <li>Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme <code>style.css</code>.</li> - <li>Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément <code><link></code>.</li> - <li>Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.</li> - <li>Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.</li> -</ul> +- Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre. -<p>Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :</p> +Nouveaux jeux de règles à écrire : -<ul> - <li>Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS.</li> - <li>Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que : - <ul> - <li>entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !).</li> - <li>l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li> - <li>le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li> - <li>l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne).</li> - </ul> - </li> - <li>Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre.</li> -</ul> +- Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en `em`. +- La marge par défaut appliquée aux éléments \<h2> et \<p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0. +- Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément `<article>`), nous devons lui donner une hauteur spécifique. Réglez la hauteur de `<article>` à 120px, mais exprimez‑la en `em`. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi. +- Écrivez un jeu de règles qui donne à `<h2>` une taille de police effective de 20px (mais exprimée en `em`) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne. +- Écrivez un jeu de règles qui donne à `<p>` dans le pied de page une taille de police effective de 15px (mais exprimée en `em`) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne. +- Comme dernière petite touche, donnez au paragraphe à l'intérieur de `<article>` une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe `<h2>` et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire. -<p>Nouveaux jeux de règles à écrire :</p> +> **Note :** Gardez présent à l'esprit que le 2e jeu de règles définit `font-size: 10px;` pour l'élément `<html>` — cela signifie que pour tous les enfants de `<html>`, un `em` vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un `font-size` différent placés entre eux et `<html>` dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème). -<ul> - <li>Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en <code>em</code>.</li> - <li>La marge par défaut appliquée aux éléments <h2> et <p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0.</li> - <li>Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément <code><article></code>), nous devons lui donner une hauteur spécifique. Réglez la hauteur de <code><article></code> à 120px, mais exprimez‑la en <code>em</code>. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi.</li> - <li>Écrivez un jeu de règles qui donne à <code><h2></code> une taille de police effective de 20px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li> - <li>Écrivez un jeu de règles qui donne à <code><p></code> dans le pied de page une taille de police effective de 15px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li> - <li>Comme dernière petite touche, donnez au paragraphe à l'intérieur de <code><article></code> une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe <code><h2></code> et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire.</li> -</ul> +Autres choses à prendre en considération : -<div class="note"> -<p><strong>Note :</strong> Gardez présent à l'esprit que le 2e jeu de règles définit <code>font-size: 10px;</code> pour l'élément <code><html></code> — cela signifie que pour tous les enfants de <code><html></code>, un <code>em</code> vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un <code>font-size</code> différent placés entre eux et <code><html></code> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).</p> -</div> +- Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale. +- Vous devriez mettre `.card` en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus. -<p>Autres choses à prendre en considération :</p> +## Conseils et astuces -<ul> - <li>Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale.</li> - <li>Vous devriez mettre <code>.card</code> en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus.</li> -</ul> +- Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS. +- Quand vous calculez le nombre de pixels correspondant à la valeur `em` dont vous avez besoin, pensez à la taille de police de base de l'élément racine (`<html>`), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de `em`, au moins dans un cas simple comme celui-ci. -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Exemple -<ul> - <li>Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS.</li> - <li>Quand vous calculez le nombre de pixels correspondant à la valeur <code>em</code> dont vous avez besoin, pensez à la taille de police de base de l'élément racine (<code><html></code>), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de <code>em</code>, au moins dans un cas simple comme celui-ci.</li> -</ul> +La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée : -<h2 id="Exemple">Exemple</h2> + -<p>La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :</p> -<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="business-card.png"></p> -<p> </p> +## Évaluation -<h2 id="Évaluation">Évaluation</h2> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercise](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">le fil de discussion à propos de cet exercise</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites l'exercice d'abors, il n'y rien à gagner en trichant !</p> +{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}} -<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</p> -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS">Comment fonctionnent les CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">Sélecteurs</a></li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Sélecteurs simples</a></li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinaisons et sélecteurs multiples</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Unités et valeurs pour les CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade et héritage</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Débogage des CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Compréhension des fondements des CSS</a></li> -</ul> +- [Comment fonctionnent les CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS) +- [Syntaxe CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe) +- [Sélecteurs](/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) +- [Sélecteurs simples](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors) +- [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors) +- [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements) +- [Combinaisons et sélecteurs multiples](/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors) +- [Unités et valeurs pour les CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units) +- [Cascade et héritage](/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage) +- [Le modèle de boîte](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte) +- [Débogage des CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS) +- [Compréhension des fondements des CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension) diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md index 6d01ee3f41..3be45a5e6a 100644 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md @@ -4,155 +4,161 @@ slug: Learn/CSS/Building_blocks/Handling_different_text_directions translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions original_slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}} -<p>Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordures en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web a tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le français) que celles qui se lisent de droite à gauche (comme l'arabe).</p> +Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordures en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web a tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le français) que celles qui se lisent de droite à gauche (comme l'arabe). -<p>Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées <strong>modes d'écriture</strong> (<i lang="en">writing modes</i> en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.</p> +Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées **modes d'écriture** (<i lang="en">writing modes</i> en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions informatiques de base, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">avoir installé les logiciels de base</a>, notions élémentaires sur <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">la manipulation des fichiers</a>, notions élémentaires sur HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">l'introduction à HTML</a>), et une idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">les premiers pas en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre l'importance des modes d'écriture pour le CSS moderne.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions informatiques de base, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >avoir installé les logiciels de base</a + >, notions élémentaires sur + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >la manipulation des fichiers</a + >, notions élémentaires sur HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >l'introduction à HTML</a + >), et une idée du fonctionnement de CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">les premiers pas en CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre l'importance des modes d'écriture pour le CSS moderne.</td> + </tr> + </tbody> </table> -<h2 id="Que_sont_les_modes_décritures">Que sont les modes d'écritures?</h2> +## Que sont les modes d'écritures? -<p>Un mode d'écriture en CSS fait référence au sens d'écriture du texte : horizontal ou vertical. La propriété <a href="/fr/docs/Web/CSS/writing-mode"><code>writing-mode</code></a> nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.</p> +Un mode d'écriture en CSS fait référence au sens d'écriture du texte : horizontal ou vertical. La propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif. -<p>Dans l'exemple ci-dessous nous avons un titre affiché qui utilise <code>writing-mode: vertical-rl</code>. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.</p> +Dans l'exemple ci-dessous nous avons un titre affiché qui utilise `writing-mode: vertical-rl`. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}} -<p>Les trois valeurs possibles pour la propriété <code><a href="/fr/docs/Web/CSS/writing-mode">writing-mode</a></code> sont :</p> +Les trois valeurs possibles pour la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) sont : -<ul> - <li><code>horizontal-tb</code> : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement.</li> - <li><code>vertical-rl</code> : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement.</li> - <li><code>vertical-lr</code> : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement.</li> -</ul> +- `horizontal-tb` : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement. +- `vertical-rl` : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement. +- `vertical-lr` : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement. -<p>La propriété <code>writing-mode</code> définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases.</p> +La propriété `writing-mode` définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases. -<h2 id="writing_modes_and_block_and_inline_layout">Modes d'écriture et disposition en bloc ou en ligne</h2> +## Modes d'écriture et disposition en bloc ou en ligne -<p>Nous avons déjà abordé <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes">la disposition en ligne et en bloc</a> et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français.</p> +Nous avons déjà abordé [la disposition en ligne et en bloc](/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français. -<p>Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise <code>writing-mode: horizontal-tb</code>, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise <code>writing-mode: vertical-rl</code>, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche.</p> +Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise `writing-mode: horizontal-tb`, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise `writing-mode: vertical-rl`, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}} -<p>Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture <code>horizontal-tb</code>, la direction de bloc va de haut en bas avec un mode d'écriture <code>vertical-rl</code>, la direction de bloc va de droite à gauche. Ainsi, la <strong>dimension de bloc</strong> correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La <strong>dimension en ligne</strong> correspond toujours à la direction selon laquelle les phrases sont écrites.</p> +Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture `horizontal-tb`, la direction de bloc va de haut en bas avec un mode d'écriture `vertical-rl`, la direction de bloc va de droite à gauche. Ainsi, la **dimension de bloc** correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La **dimension en ligne** correspond toujours à la direction selon laquelle les phrases sont écrites. -<p>Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal.</p> +Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal. -<p><img alt="Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture horizontal." src="horizontal-tb.png"></p> + -<p>Ce schéma illustre les deux dimensions pour un mode d'écriture vertical.</p> +Ce schéma illustre les deux dimensions pour un mode d'écriture vertical. -<p><img alt="Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture vertical." src="vertical.png"></p> + -<p>Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les méthodes de disposition récentes, les notions de bloc et d'en ligne se révèlent cruciales. Nous y reviendrons par la suite.</p> +Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les méthodes de disposition récentes, les notions de bloc et d'en ligne se révèlent cruciales. Nous y reviendrons par la suite. -<h3 id="Direction">Direction</h3> +### Direction -<p>En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite !</p> +En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite ! -<p>Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de <em>début</em> et de <em>fin</em>, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS.</p> +Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de _début_ et de _fin_, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS. -<h2 id="logical_properties_and_values">Propriétés et valeurs logiques</h2> +## Propriétés et valeurs logiques -<p>Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal.</p> +Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal. -<p>Reprenons nos deux boîtes : celle avec le mode d'écriture <code>horizontal-tb</code> et celle avec le mode d'écriture <code>vertical-rl</code>. Pour ces deux boîtes, on a défini <a href="/fr/docs/Web/CSS/width"><code>width</code></a>. Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte.</p> +Reprenons nos deux boîtes : celle avec le mode d'écriture `horizontal-tb` et celle avec le mode d'écriture `vertical-rl`. Pour ces deux boîtes, on a défini [`width`](/fr/docs/Web/CSS/width). Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}} -<p>Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal.</p> +Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal. -<p>Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme <code>width</code> ou <code>height</code> par des versions <strong>logiques</strong> ou <strong>relatives au flux</strong>.</p> +Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme `width` ou `height` par des versions **logiques** ou **relatives au flux**. -<p>La propriété logique qui correspond à <code>width</code> lorsqu'on utilise un mode d'écriture horizontal est appelée <a href="/fr/docs/Web/CSS/inline-size"><code>inline-size</code></a> : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à <code>height</code> est quant à elle intitulée <a href="/fr/docs/Web/CSS/block-size"><code>block-size</code></a> et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé <code>width</code> par <code>inline-size</code>.</p> +La propriété logique qui correspond à `width` lorsqu'on utilise un mode d'écriture horizontal est appelée [`inline-size`](/fr/docs/Web/CSS/inline-size) : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à `height` est quant à elle intitulée [`block-size`](/fr/docs/Web/CSS/block-size) et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé `width` par `inline-size`. -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}} -<h3 id="logical_margin_border_and_padding_properties">Propriétés logiques pour les marges, bordures et remplissages</h3> +### Propriétés logiques pour les marges, bordures et remplissages -<p>Dans les deux précédentes leçons, nous avons abordé le modèle de boîte CSS et les bordures. Pour les propriétés qui régissent les marges, bordures et le remplissage, vous verrez de nombreuses propriétés physiques comme <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a>, <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a>, et <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a>. À l'instar de la hauteur et de la largeur, ces propriétés disposent de propriétés logiques équivalentes.</p> +Dans les deux précédentes leçons, nous avons abordé le modèle de boîte CSS et les bordures. Pour les propriétés qui régissent les marges, bordures et le remplissage, vous verrez de nombreuses propriétés physiques comme [`margin-top`](/fr/docs/Web/CSS/margin-top), [`padding-left`](/fr/docs/Web/CSS/padding-left), et [`border-bottom`](/fr/docs/Web/CSS/border-bottom). À l'instar de la hauteur et de la largeur, ces propriétés disposent de propriétés logiques équivalentes. -<p>La propriété physique <code>margin-top</code> correspond à la propriété logique <a href="/fr/docs/Web/CSS/margin-block-start"><code>margin-block-start</code></a> pour un mode d'écriture horizontal. Cette propriété logique fera toujours référence à la marge située au début de la dimension de bloc.</p> +La propriété physique `margin-top` correspond à la propriété logique [`margin-block-start`](/fr/docs/Web/CSS/margin-block-start) pour un mode d'écriture horizontal. Cette propriété logique fera toujours référence à la marge située au début de la dimension de bloc. -<p>La propriété physique <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a> trouve son équivalent avec <a href="/fr/docs/Web/CSS/padding-inline-start"><code>padding-inline-start</code></a>, le remplissage (<i lang="en">padding</i>) appliqué au début de la direction en ligne. Cela correspond à l'endroit où les phrases commencent pour le mode d'écriture courant. La propriété <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a> a quant à elle l'équivalent <a href="/fr/docs/Web/CSS/border-block-end"><code>border-block-end</code></a> qui représente la bordure sur à la fin de la dimension de bloc.</p> +La propriété physique [`padding-left`](/fr/docs/Web/CSS/padding-left) trouve son équivalent avec [`padding-inline-start`](/fr/docs/Web/CSS/padding-inline-start), le remplissage (<i lang="en">padding</i>) appliqué au début de la direction en ligne. Cela correspond à l'endroit où les phrases commencent pour le mode d'écriture courant. La propriété [`border-bottom`](/fr/docs/Web/CSS/border-bottom) a quant à elle l'équivalent [`border-block-end`](/fr/docs/Web/CSS/border-block-end) qui représente la bordure sur à la fin de la dimension de bloc. -<p>Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci-après.</p> +Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci-après. -<p><strong>Si vous changez le mode d'écriture des boîtes en modifiant la valeur de <code>writing-mode</code> sur le sélecteur <code>.box</code> afin de la passer à <code>vertical-rl</code>, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.</strong></p> +**Si vous changez le mode d'écriture des boîtes en modifiant la valeur de `writing-mode` sur le sélecteur `.box` afin de la passer à `vertical-rl`, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.** -<p><strong>Vous pouvez également voir que <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a> a une bordure avec <code>border-bottom</code>. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?</strong></p> +**Vous pouvez également voir que [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements) a une bordure avec `border-bottom`. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?** -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}} -<p>Il existe de nombreuses propriétés détaillées pour gérer les différents aspects des bordures, vous pouvez voir l'ensemble des correspondances sur la page MDN des <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">propriétés et valeurs logiques</a>.</p> +Il existe de nombreuses propriétés détaillées pour gérer les différents aspects des bordures, vous pouvez voir l'ensemble des correspondances sur la page MDN des [propriétés et valeurs logiques](/fr/docs/Web/CSS/CSS_Logical_Properties). -<h3 id="logical_values">Valeurs logiques</h3> +### Valeurs logiques -<p>Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme <code>top</code>, <code>right</code>, <code>bottom</code>, et <code>left</code>. Ces valeurs disposent également d'équivalences logiques : <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, et <code>inline-start</code>.</p> +Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme `top`, `right`, `bottom`, et `left`. Ces valeurs disposent également d'équivalences logiques : `block-start`, `inline-end`, `block-end`, et `inline-start`. -<p>Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer <code>left</code> avec <code>inline-start</code>.</p> +Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer `left` avec `inline-start`. -<p><strong>Modifiez le mode d'écriture de cet exemple afin de le passer à <code>vertical-rl</code> pour voir ce qui se produit sur l'image. Modifiez <code>inline-start</code> à <code>inline-end</code> pour changer l'emplacement du flottement.</strong></p> +**Modifiez le mode d'écriture de cet exemple afin de le passer à `vertical-rl` pour voir ce qui se produit sur l'image. Modifiez `inline-start` à `inline-end` pour changer l'emplacement du flottement.** -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 850)}}</p> +{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 850)}} -<p>Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture.</p> +Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture. -<div class="notecard note"> - <p><strong>Note :</strong> Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour <code>float</code>. Si vous utilisez <strong>Google Chrome</strong> ou <strong>Microsoft Edge</strong>, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.</p> -</div> +> **Note :** Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour `float`. Si vous utilisez **Google Chrome** ou **Microsoft Edge**, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas. -<h3 id="should_you_use_physical_or_logical_properties">Faut-il utiliser les propriétés physiques ou logiques ?</h3> +### Faut-il utiliser les propriétés physiques ou logiques ? -<p>Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou <i lang="en">flexbox</i>.</p> +Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou <i lang="en">flexbox</i>. -<h2 id="test_your_skills!">Testez vos compétences !</h2> +## Testez vos compétences ! -<p>Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir <a href="/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Testez vos compétences : les modes d'écriture</a>.</p> +Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir [Testez vos compétences : les modes d'écriture](/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks). -<h2 id="summary">Résumé</h2> +## Résumé -<p>Les concepts expliqués ici revêtent une importance croissante en CSS. Comprendre les directions en ligne et de bloc, ainsi que la façon dont le flux de texte change selon le mode d'écriture vous sera désormais très utile. Vous aurez une meilleure compréhension de CSS, même si vous n'utilisez qu'un seul mode d'écriture horizontal.</p> +Les concepts expliqués ici revêtent une importance croissante en CSS. Comprendre les directions en ligne et de bloc, ainsi que la façon dont le flux de texte change selon le mode d'écriture vous sera désormais très utile. Vous aurez une meilleure compréhension de CSS, même si vous n'utilisez qu'un seul mode d'écriture horizontal. -<p>Dans le prochain module, nous verrons comment les dépassements sont gérés en CSS.</p> +Dans le prochain module, nous verrons comment les dépassements sont gérés en CSS. -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/index.md b/files/fr/learn/css/building_blocks/index.md index 996ef6e24f..d90d79ae16 100644 --- a/files/fr/learn/css/building_blocks/index.md +++ b/files/fr/learn/css/building_blocks/index.md @@ -8,72 +8,62 @@ tags: translation_of: Learn/CSS/Building_blocks original_slug: Apprendre/CSS/Building_blocks --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Ce cours fait suite aux <a href="/fr/docs/Learn/CSS/First_steps">premiers pas avec CSS</a> : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.<br> - <br> - L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme <a href="/fr/docs/Learn/CSS/Styling_text">le style de texte</a> et la <a href="/fr/docs/Apprendre/CSS/CSS_layout">mise en page CSS</a>.</p> +Ce cours fait suite aux [premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses. -<h2 id="Prérequis">Prérequis</h2> +L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme [le style de texte](/fr/docs/Learn/CSS/Styling_text) et la [mise en page CSS](/fr/docs/Apprendre/CSS/CSS_layout). -<p>Avant de commencer ce cours, nous vous recommandons :</p> +## Prérequis -<ol> - <li>D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.</li> - <li>De disposer d'un environnement de travail comme il est décrit dans l'article <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a> et de savoir créer et gérer des fichiers (cf. leçon <a href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>).</li> - <li>D'être suffisamment à votre aise avec HTML (voir le cours <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">introduction au HTML</a>).</li> - <li>D'avoir compris les bases du CSS telles qu'exposées dans le cours <a href="/fr/docs/Learn/CSS/First_steps">premiers pas avec CSS.</a></li> -</ol> +Avant de commencer ce cours, nous vous recommandons : -<div class="note"> -<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/fr/">Thimble</a>.</p> -</div> +1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet. +2. De disposer d'un environnement de travail comme il est décrit dans l'article [installation des outils de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et de savoir créer et gérer des fichiers (cf. leçon [gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers)). +3. D'être suffisamment à votre aise avec HTML (voir le cours [introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML)). +4. D'avoir compris les bases du CSS telles qu'exposées dans le cours [premiers pas avec CSS.](/fr/docs/Learn/CSS/First_steps) -<h2 id="Guides">Guides</h2> +> **Note :** Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/fr/). -<p>Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.</p> +## Guides -<div class="note"> -<p><strong>Note :</strong> Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.</p> -</div> +Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension. -<dl> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance (Cascade et héritage)</a></dt> - <dd>Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors (sélecteurs CSS)</a></dt> - <dd>Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model (le modèle des boîtes)</a></dt> - <dd>Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders (arrières-plans et bordures)</a></dt> - <dd>Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions (manipuler les différentes directions du texte)</a></dt> - <dd>Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (<strong>writing modes</strong>). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content (quand ça dépasse)</a></dt> - <dd>Autre concept important du CSS: le dépassement (<strong>overflow</strong>) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units (valeurs et unités)</a></dt> - <dd>Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS (dimensionner les éléments en CSS)</a></dt> - <dd>Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements (images, médias et éléments de formulaires)</a></dt> - <dd>Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.</dd> - <dt><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page des tableaux</a></dt> - <dd>Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS (déboguer le CSS)</a></dt> - <dd>Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.</dd> - <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS (organiser votre CSS)</a></dt> - <dd>Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.</dd> -</dl> +> **Note :** Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez. -<h2 id="Voir_aussi">Voir aussi</h2> +- [Cascade and inheritance (Cascade et héritage)](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) + - : Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent. +- [CSS selectors (sélecteurs CSS)](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<dl> - <dt><a href="/fr/docs/Apprendre/CSS/Building_blocks/Advanced_styling_effects">Effets de boîte avancés</a></dt> - <dd>Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres.</dd> -</dl> + - : Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +- [The box model (le modèle des boîtes)](/fr/docs/Learn/CSS/Building_blocks/The_box_model) + - : Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie. +- [Backgrounds and borders (arrières-plans et bordures)](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) + - : Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS. +- [Handling different text directions (manipuler les différentes directions du texte)](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) + - : Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (**writing modes**). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. . +- [Overflowing content (quand ça dépasse)](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) + - : Autre concept important du CSS: le dépassement (**overflow**) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer. +- [Values and units (valeurs et unités)](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) + - : Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées. +- [Sizing items in CSS (dimensionner les éléments en CSS)](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) + - : Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir. +- [Images, media, and form elements (images, médias et éléments de formulaires)](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) + - : Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir. +- [Mise en page des tableaux](/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables) + - : Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables. +- [Debugging CSS (déboguer le CSS)](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) + - : Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe. +- [Organizing your CSS (organiser votre CSS)](/fr/docs/Learn/CSS/Building_blocks/Organizing) + - : Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité. + +## Voir aussi + +- [Effets de boîte avancés](/fr/docs/Apprendre/CSS/Building_blocks/Advanced_styling_effects) + - : Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres. diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.md b/files/fr/learn/css/building_blocks/overflowing_content/index.md index 6eb65c2dca..d44a3e9f3c 100644 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.md +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.md @@ -4,121 +4,132 @@ slug: Learn/CSS/Building_blocks/Overflowing_content translation_of: Learn/CSS/Building_blocks/Overflowing_content original_slug: Apprendre/CSS/Building_blocks/Overflowing_content --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}} -<p>Dans ce cours nous allons étudier un autre concept important en CSS : les <strong>débordements</strong> (<i lang="en">overflows</i> en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.</p> +Dans ce cours nous allons étudier un autre concept important en CSS : les **débordements** (<i lang="en">overflows</i> en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances élémentaires en informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), et une idée <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">du fonctionnement de CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre le principe des débordements et comment les gérer.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances élémentaires en informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction à HTML</a + >), et une idée + <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" + >du fonctionnement de CSS</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre le principe des débordements et comment les gérer.</td> + </tr> + </tbody> </table> -<h2 id="what_is_overflow">Qu'est-ce qu'un débordement ?</h2> +## Qu'est-ce qu'un débordement ? -<p>Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a> (ou <a href="/fr/docs/Web/CSS/inline-size"><code>inline-size</code></a> et <a href="/fr/docs/Web/CSS/block-size"><code>block-size</code></a>). Un dépassement correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas de dépassement fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.</p> +Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height) (ou [`inline-size`](/fr/docs/Web/CSS/inline-size) et [`block-size`](/fr/docs/Web/CSS/block-size)). Un dépassement correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas de dépassement fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS. -<h2 id="css_tries_to_avoid_data_loss">CSS essaie d'éviter les pertes de données</h2> +## CSS essaie d'éviter les pertes de données -<p>Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.</p> +Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu. -<p>Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur <code>height</code>. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte.</p> +Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur `height`. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}} -<p>Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte.</p> +Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}} -<p>Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ?</p> +Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ? -<p>Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.</p> +Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger. -<p>Si vous avez défini une boîte avec des valeurs <code>width</code> ou <code>height</code>, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.</p> +Si vous avez défini une boîte avec des valeurs `width` ou `height`, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police. -<p>Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant !</p> +Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant ! -<h2 id="the_overflow_property">La propriété overflow</h2> +## La propriété overflow -<p>La propriété <a href="/fr/docs/Web/CSS/overflow"><code>overflow</code></a> est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est <code>visible</code>, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.</p> +La propriété [`overflow`](/fr/docs/Web/CSS/overflow) est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est `visible`, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde. -<p>Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir <code>overflow: hidden</code> pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.</p> +Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir `overflow: hidden` pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}} -<p>Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez <code>overflow: scroll</code> alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu.</p> +Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez `overflow: scroll` alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu. -<p><strong>Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.</strong></p> +**Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.** -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}} -<p>Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe <code>y</code>, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété <a href="/fr/docs/Web/CSS/overflow-y"><code>overflow-y</code></a>, qui définit <code>overflow-y: scroll</code> afin de faire défiler uniquement sur l'axe <code>y</code>.</p> +Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe `y`, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété [`overflow-y`](/fr/docs/Web/CSS/overflow-y), qui définit `overflow-y: scroll` afin de faire défiler uniquement sur l'axe `y`. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}} -<p>Vous pourriez également faire défiler sur l'axe x en utilisant <a href="/fr/docs/Web/CSS/overflow-x"><code>overflow-x</code></a>, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés <a href="/fr/docs/Web/CSS/word-break"><code>word-break</code></a> ou <a href="/fr/docs/Web/CSS/overflow-wrap"><code>overflow-wrap</code></a>. En complément, certaines méthodes présentées dans le cours <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a> peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.</p> +Vous pourriez également faire défiler sur l'axe x en utilisant [`overflow-x`](/fr/docs/Web/CSS/overflow-x), bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés [`word-break`](/fr/docs/Web/CSS/word-break) ou [`overflow-wrap`](/fr/docs/Web/CSS/overflow-wrap). En complément, certaines méthodes présentées dans le cours [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu. -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}} -<p>Comme pour <code>scroll</code>, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.</p> +Comme pour `scroll`, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement. -<div class="notecard note"> -<p><strong>Note :</strong> vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété <code>overflow</code> en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à <code>overflow-x</code> et le second à <code>overflow-y</code>. Sinon, <code>overflow-x</code> et <code>overflow-y</code> sont définis sur la même valeur. Par exemple, <code>overflow: scroll hidden</code> définira <code>overflow-x</code> sur <code>scroll</code> et <code>overflow-y</code> sur <code>hidden</code>.</p> -</div> +> **Note :** vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété `overflow` en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à `overflow-x` et le second à `overflow-y`. Sinon, `overflow-x` et `overflow-y` sont définis sur la même valeur. Par exemple, `overflow: scroll hidden` définira `overflow-x` sur `scroll` et `overflow-y` sur `hidden`. -<p>Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez <code>overflow: auto</code>. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.</p> +Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez `overflow: auto`. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement. -<p><strong>Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.</strong></p> +**Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.** -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}} -<h2 id="overflow_establishes_a_block_formatting_context">Overflow crée un "Block Formatting Context"</h2> +## Overflow crée un "Block Formatting Context" -<p>Il existe un concept dans le CSS de <strong><i lang="en">Block Formatting Context</i></strong> (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur de <code>overflow</code> comme <code>scroll</code> ou <code>auto</code> vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de <code>overflow</code> devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.</p> +Il existe un concept dans le CSS de **<i lang="en">Block Formatting Context</i>** (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur de `overflow` comme `scroll` ou `auto` vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de `overflow` devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente. -<h2 id="unwanted_overflow_in_web_design">Débordements indésirables en web design</h2> +## Débordements indésirables en web design -<p>Les méthodes de mise en page modernes (comme étudiées dans le module <a href="/fr/docs/Learn/CSS/CSS_layout">La mise en page avec le CSS</a>) gèrent très bien le débordement. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un débordement ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.</p> +Les méthodes de mise en page modernes (comme étudiées dans le module [La mise en page avec le CSS](/fr/docs/Learn/CSS/CSS_layout)) gèrent très bien le débordement. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un débordement ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte. -<p>Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'<code>overflow</code> pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.</p> +Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'`overflow` pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement. -<h2 id="test_your_skills!">Testez vos compétences !</h2> +## Testez vos compétences ! -<p>Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) <a href="/fr/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Testez vos compétences: overflow</a>.</p> +Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) [Testez vos compétences: overflow](/fr/docs/Learn/CSS/Building_blocks/Overflow_Tasks). -<h2 id="summary">Résumé</h2> +## Résumé -<p>Cette courte leçon a introduit le concept de débordement ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un débordement éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un débordement problématique.</p> +Cette courte leçon a introduit le concept de débordement ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un débordement éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un débordement problématique. -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md index f56a321023..243de46424 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -4,153 +4,154 @@ slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}} -<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p> +Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >), et une idée de + <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" + >Comment fonctionne CSS</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td> + </tr> + </tbody> </table> -<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2> +## Sélecteur de présence et de valeur -<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p> +Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple `href`), ou sur des correspondances variées avec la valeur d'un attribut donné <table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Exemple</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[<em>attr</em>]</code></td> - <td><code>a[title]</code></td> - <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td> - </tr> - <tr> - <td><code>[<em>attr</em>=<em>value</em>]</code></td> - <td><code>a[href="https://example.com"]</code></td> - <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td> - </tr> - <tr> - <td><code>[<em>attr</em>~=<em>value</em>]</code></td> - <td><code>p[class~="special"]</code></td> - <td> - <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p> - - <p>Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.</p> - </td> - </tr> - <tr> - <td><code>[<em>attr</em>|=<em>value</em>]</code></td> - <td><code>div[lang|="zh"]</code></td> - <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Sélecteur</th> + <th scope="col">Exemple</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td> + Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur + entre les crochets droits. + </td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td> + Cible les éléments dont l'attribut <em>attr</em> a la valeur + <em>value</em> — la chaîne entre guillemets. + </td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <p> + Cible les éléments avec un attribut <em>attr</em> dont la valeur est + exactement <em>value</em>, ou les éléments dont l'attribut + <em>attr</em> contient une ou plusieurs valeurs, dont au moins une + correspond à <em>value</em>. + </p> + <p> + Notez que dans une liste de plusieurs valeurs, le séparateur est + l'espace. + </p> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td> + Cible les éléments avec un attribut <em>attr</em> dont la valeur peut + être exactement <em>value</em> ou peut commencer par + <em>value</em> immédiatement suivie d'un trait d'union. + </td> + </tr> + </tbody> </table> -<p>Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :</p> +Dans l'exemple ci-dessous vous voyez ces sélecteurs en action : -<ul> - <li>Avec <code>li[class]</code> on cible tout élément <code><li></code> possédant un attribut <code>class</code>. On cible ainsi tous les éléments de la liste sauf le premier.</li> - <li><code>li[class="a"]</code> cible les <code><li></code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code><li></code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li> - <li><code>li[class~="a"]</code> cible tout élément <code><li></code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li> -</ul> +- Avec `li[class]` on cible tout élément `<li>` possédant un attribut `class`. On cible ainsi tous les éléments de la liste sauf le premier. +- `li[class="a"]` cible les `<li>` appartenant à la classe `a` et seulement elle. Un élément `<li>` dans la classe `a` mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste. +- `li[class~="a"]` cible tout élément `<li>` dont l'attribut `class` contient `a` dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}} -<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2> +## Sélecteurs ciblant une sous-chaîne -<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes <code>box-warning</code> et <code>box-error</code>, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p> +Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes `box-warning` et `box-error`, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut `[class ^= "box-"]` est là pour ça. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Exemple</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[<em>attr</em>^=<em>value</em>]</code></td> - <td><code>li[class^="box-"]</code></td> - <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td> - </tr> - <tr> - <td><code>[<em>attr</em>$=<em>value</em>]</code></td> - <td><code>li[class$="-box"]</code></td> - <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td> - </tr> - <tr> - <td><code>[<em>attr</em>*=value<em> </em>]</code></td> - <td><code>li[class*="box"]</code></td> - <td>élément sélectionné quand la<br> - la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td> - </tr> - </tbody> -</table> +| Sélecteur | Exemple | Description | +| ---------------- | ------------------- | -------------------------------------------------------------------------------------------------------------- | +| `[attr^=value]` | `li[class^="box-"]` | élément sélectionné quand la valeur _value_ de l'attribut _attr_ commence par la sous-chaîne _value._ | +| `[attr$=value]` | `li[class$="-box"]` | élément sélectionné quand la valeur de l'attribut _attr_ finit par la sous-chaîne _value._ | +| `[attr*=value ]` | `li[class*="box"]` | élément sélectionné quand la la sous-chaîne _value_ apparaît quelque part dans la valeur de l'attribut _attr._ | + +L'exemple suivant montre ces sélecteurs en action : + +- `li[class^="a"]` correspond à toute valeur d'attribut commençant par un _a,_ ce sélecteur cible donc les deux premiers items de la liste. +- `li[class$="a"]` correspond à toute valeur d'attribut finissant par un _a,_ ce sélecteur cible donc les items un et trois de la liste. +- `li[class*="a"]` correspond à toute valeur d'attribut contenant quelque part un _a,_ ce sélecteur cible donc tous les items de la liste. -<p>L'exemple suivant montre ces sélecteurs en action :</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}} -<ul> - <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li> - <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li> - <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelque part un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li> -</ul> +## Sensibilité à la casse -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> +Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur `i` avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (_a_ = _A_). Sans le drapeau `i`, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse. -<h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2> +Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un `a` — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau _insensible à la casse,_ il cible donc tous les éléments de la liste. -<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}} -<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p> +> **Note :** Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur `s` nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> +## Pas suivants -<div class="note"> -<p><strong>Note :</strong> Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p> -</div> +Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux [sélecteurs de pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements). -<h2 id="Pas_suivants">Pas suivants</h2> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}} -<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p> +## Dans ce cours -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="Dans_ce_cours">Dans ce cours</h2> + - [Sélecteurs de classe, de type et d'identifiant](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - Sélecteurs d'attribut + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> - <li>Sélecteurs d'attribut</li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> -</ol> +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrières-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gérer la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Le dépassement du contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Dimensionnement des objets en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias, et formulaires](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mettre en forme les tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Déboguer CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser son code CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.md b/files/fr/learn/css/building_blocks/selectors/combinators/index.md index ecef10ea21..7bbafe2f86 100644 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.md @@ -8,108 +8,134 @@ tags: translation_of: Learn/CSS/Building_blocks/Selectors/Combinators original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} -<p>Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.</p> +Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Connaissances informatiques de base, + <a + href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >les outils de base installés</a + >, connaissance de base de + <a + href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + >gestion des fichiers</a + >, les bases du HTML (voir <a + href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction au HTML</a + >), et une idée du fonctionnement du CSS (voir + <a + href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps" + >Premiers pas avec CSS</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + En savoir plus sur les différents sélecteurs combinateurs utilisables en + CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Combinateur_descendant">Combinateur descendant</h2> +## Combinateur descendant -<p>Le <strong>combinateur descendant</strong>— en général représenté par un seul espace (<code> </code>) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.</p> +Le **combinateur descendant**— en général représenté par un seul espace (` `) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants. -<pre class="brush: css">body article p -</pre> +```css +body article p +``` -<p>Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <code><p></code>, qui est à l'intérieur d'un élément de classe <code>.box</code>.</p> +Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément `<p>`, qui est à l'intérieur d'un élément de classe `.box`. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}} -<h2 id="Combinateur_enfant">Combinateur enfant</h2> +## Combinateur enfant -<p>Le combinateur enfant (<code>></code>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <code><p></code> qui sont des enfants directs des éléments <code><article></code>:</p> +Le combinateur enfant (`>`) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments `<p>` qui sont des enfants directs des éléments `<article>`: -<pre class="brush: css">article > p</pre> +```css +article > p +``` -<p>Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <code><li></code> qui sont un enfant direct d'un <code><ul></code>, et leur ai donné une bordure supérieure.</p> +Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments `<li>` qui sont un enfant direct d'un `<ul>`, et leur ai donné une bordure supérieure. -<p>si vous supprimez le <code>></code> qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <code><li></code> auront une bordure rouge.</p> +si vous supprimez le `>` qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments `<li>` auront une bordure rouge. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}} -<h2 id="Combinateur_frère_adjacents">Combinateur frère adjacents</h2> +## Combinateur frère adjacents -<p>Le sélecteur de frère adjacent (<code>+</code>) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <code><img></code> qui viennent juste après les éléments <code><p></code>:</p> +Le sélecteur de frère adjacent (`+`) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments `<img>` qui viennent juste après les éléments `<p>`: -<pre class="brush: css">p + img</pre> +```css +p + img +``` -<p>Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <code><h1></code>, et le stylisons.</p> +Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un `<h1>`, et le stylisons. -<p>Si vous insérez un autre élément tel qu'un <code><h2></code> entre le <code><h1></code> et le <code><p></code>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.</p> +Si vous insérez un autre élément tel qu'un `<h2>` entre le `<h1>` et le `<p>`, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}} -<h2 id="Combinateur_général_de_frères">Combinateur général de frères</h2> +## Combinateur général de frères -<p>Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (<code>~</code>). Pour sélectionner tous les éléments <code><img></code> qui viennent n'importe où après les éléments <code><p></code>, nous ferions ceci:</p> +Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (`~`). Pour sélectionner tous les éléments `<img>` qui viennent n'importe où après les éléments `<p>`, nous ferions ceci: -<pre class="brush: css">p ~ img</pre> +```css +p ~ img +``` -<p>Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <code><p></code> qui viennent après le <code><h1></code>, et même s'il y a aussi un <code><div></code> dans le document, le <code><p></code> qui vient après qu'il est sélectionné.</p> +Dans l'exemple ci-dessous, nous sélectionnons tous les éléments `<p>` qui viennent après le `<h1>`, et même s'il y a aussi un `<div>` dans le document, le `<p>` qui vient après qu'il est sélectionné. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}} -<h2 id="Utilisation_de_combinateurs">Utilisation de combinateurs</h2> +## Utilisation de combinateurs -<p>Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <code><ul></code>, je pourrais utiliser ce qui suit.</p> +Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un `<ul>`, je pourrais utiliser ce qui suit. -<pre class="brush: css">ul > li[class="a"] { }</pre> +```css +ul > li[class="a"] { } +``` -<p>Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.</p> +Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage. -<p>Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.</p> +Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS. -<h2 id="Testez_vos_compétences!">Testez vos compétences!</h2> +## Testez vos compétences! -<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p> +Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir [Test your skills: Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks). -<h2 id="Passer_à_la_suite">Passer à la suite</h2> +## Passer à la suite -<p>Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le <a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">modèle de Boîte</a>.</p> +Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le [modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ol> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li> - <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments">Pseudo-classes and pseudo-élements</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">Le modèle de Boîte</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content">Débordement de contenu</a></li> - <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">Valeurs et unités</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Taille des élements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li> - <li><a href="/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +1. [Cascade et héritage](/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage) +2. [Sélecteurs CSS](/fr/docs/Apprendre/CSS/Building_blocks/Selectors) + + - [Sélecteurs de type, de classe, d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) + - [Pseudo-classes and pseudo-élements](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments) + - [Combinateurs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs) + +3. [Le modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite) +4. [Arrières-plans et bordures](/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordement de contenu](/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS) +8. [Taille des élements](/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, média, et élements de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables) +11. [Débogage CSS](/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/index.md b/files/fr/learn/css/building_blocks/selectors/index.md index ece86d8018..ad59f05b6a 100644 --- a/files/fr/learn/css/building_blocks/selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/index.md @@ -4,221 +4,204 @@ slug: Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors original_slug: Apprendre/CSS/Building_blocks/Selectors --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} -<p>Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p> +Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions de base en l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base installés</a + >, + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >savoir manipuler des fichiers</a + >, connaissance de base de HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >.) et une première idée du fonctionnement de CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> + </tr> + </tbody> </table> -<h2 id="what_is_a_selector">Qu'est-ce qu'un sélecteur ?</h2> +## Qu'est-ce qu'un sélecteur ? -<p>Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet</em> de ce sélecteur.</p> +Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le _sujet_ de ce sélecteur. -<p><img alt="Du code où h1 est surligné." src="selector.png"></p> + -<p>Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p> +Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments `h1`, ou la classe `.special`. -<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">spécification de niveau 3 pour les sélecteurs</a>, une spécification mature, aussi la prise en charge par les navigateurs est excellente.</p> +En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la [spécification de niveau 3 pour les sélecteurs](https://www.w3.org/TR/selectors-3/), une spécification mature, aussi la prise en charge par les navigateurs est excellente. -<h2 id="selector_lists">Listes de sélecteurs</h2> +## Listes de sélecteurs -<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p> +Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un `h1` et pour une classe `.special`, je pourrais écrire deux règles : -<pre class="brush: css">h1 { +```css +h1 { color: blue; } .special { color: blue; -}</pre> +} +``` -<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p> +ou bien une seule règle en combinant les sélecteurs, séparés par une virgule : -<pre class="brush: css">h1, .special { +```css +h1, .special { color: blue; -}</pre> +} +``` -<p>L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :</p> +L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne : -<pre class="brush: css">h1, +```css +h1, .special { color: blue; -}</pre> +} +``` -<p>Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.</p> +Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} -<p>Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.</p> +Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée. -<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p> +Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le `h1` sera mis en forme comme prévu. -<pre class="brush: css">h1 { +```css +h1 { color: blue; } ..special { color: blue; -}</pre> +} +``` -<p>En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni <code>h1</code> ni les éléments de classe <code>.special</code> ne seront mis en forme.</p> +En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni `h1` ni les éléments de classe `.special` ne seront mis en forme. -<pre class="brush: css">h1, ..special { +```css +h1, ..special { color: blue; -}</pre> +} +``` -<h2 id="types_of_selectors">Types de sélecteurs</h2> +## Types de sélecteurs -<p>On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.</p> +On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs. -<h3 id="type_class_and_id_selectors">Sélecteurs de type, de classe, et d'ID</h3> +### Sélecteurs de type, de classe, et d'ID -<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code><h1></code> :</p> +Ce groupe inclut les sélecteurs ciblant les élements HTML tels que `<h1>` : -<pre class="brush: css">h1 { }</pre> +```css +h1 { } +``` -<p>On trouve aussi les sélecteurs ciblant une classe :</p> +On trouve aussi les sélecteurs ciblant une classe : -<pre class="brush: css">.box { }</pre> +```css +.box { } +``` -<p>ou un ID :</p> +ou un ID : -<pre class="brush: css">#unique { }</pre> +```css +#unique { } +``` -<h3 id="attribute_selectors">Sélecteurs d'attribut</h3> +### Sélecteurs d'attribut -<p>Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :</p> +Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné : -<pre class="brush: css">a[title] { }</pre> +```css +a[title] { } +``` -<p>Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :</p> +Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise : -<pre class="brush: css">a[href="https://example.com"] { }</pre> +```css +a[href="https://example.com"] { } +``` -<h3 id="pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</h3> +### Pseudo-classes et pseudo-éléments -<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p> +Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe `:hover` sélectionne un élément seulement s'il est survolé par le pointeur de la souris : -<pre class="brush: css">a:hover { }</pre> +```css +a:hover { } +``` -<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code><p></code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <code><span></code> et qu'après coup on appliquait un style sur cet élément.</p> +Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, `::first-line` sélectionne la première ligne d'un texte contenu dans un élément (un `<p>` dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre `<span>` et qu'après coup on appliquait un style sur cet élément. -<pre class="brush: css">p::first-line { }</pre> +```css +p::first-line { } +``` -<h3 id="combinators">Combinateurs</h3> +### Combinateurs -<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code><article></code> grâce au combinateur enfant (<code>></code>) :</p> +Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de `<article>` grâce au combinateur enfant (`>`) : -<pre class="brush: css">article > p { }</pre> +```css +article > p { } +``` -<h2 id="next_steps">À faire ensuite</h2> +## À faire ensuite -<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">sélecteurs de type, de classe, et d'ID</a>.</p> +Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section _Apprendre_ ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les [sélecteurs de type, de classe, et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} -<h2 id="reference_table_of_selectors">Table de référence des sélecteurs</h2> +## Table de référence des sélecteurs -<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.</p> +Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Exemple</th> - <th scope="col">Tutoriel CSS</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a></td> - <td><code>h1 { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a></td> - <td><code>* { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector">The universal selector</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a></td> - <td><code>.box { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors">Class selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d'ID</a></td> - <td><code>#unique { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors">ID selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Descendant_combinator">Sélecteur descendant</a></td> - <td><code>article p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector">Descendant combinator</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Child_combinator">Sélecteur enfant</a></td> - <td><code>article > p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator">Child combinator</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Sélecteur de frère adjacent</a></td> - <td><code>h1 + p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling">Adjacent sibling</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/General_sibling_combinator">Sélecteur de frère général</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling">General sibling</a></td> - </tr> - </tbody> -</table> +| Sélecteur | Exemple | Tutoriel CSS | +| --------------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| [Sélecteur de type](/fr/docs/Web/CSS/Type_selectors) | `h1 { }` | [Sélecteurs de type](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) | +| [Sélecteur universel](/fr/docs/Web/CSS/Universal_selectors) | `* { }` | [The universal selector](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector) | +| [Sélecteur de classe](/fr/docs/Web/CSS/Class_selectors) | `.box { }` | [Class selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors) | +| [Sélecteur d'ID](/fr/docs/Web/CSS/ID_selectors) | `#unique { }` | [ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors) | +| [Sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | +| [Pseudo-class selectors](/fr/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [Pseudo-classes](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class) | +| [Pseudo-element selectors](/fr/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [Pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element) | +| [Sélecteur descendant](/fr/docs/Web/CSS/Descendant_combinator) | `article p` | [Descendant combinator](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector) | +| [Sélecteur enfant](/fr/docs/Web/CSS/Child_combinator) | `article > p` | [Child combinator](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator) | +| [Sélecteur de frère adjacent](/fr/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [Adjacent sibling](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling) | +| [Sélecteur de frère général](/fr/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p` | [General sibling](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling) | + +## Dans ce module + +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<h2 id="in_this_module">Dans ce module</h2> - -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 8e89104fdd..6e9c0d478a 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -12,389 +12,212 @@ tags: translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} -<p>Voyons maintenant les sélecteurs de <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</p> +Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-éléments**. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >suite logicielle de base installée</a + >, compétences élémentaires pour <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. <a + href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >), et une idée de <a + href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" + >Comment fonctionne CSS</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.</td> + </tr> + </tbody> </table> -<h2 id="Quest_ce_quune_pseudo-classe">Qu'est ce qu'une pseudo-classe ?</h2> +## Qu'est ce qu'une pseudo-classe ? -<p>Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.</p> +Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir. -<p>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p> +Les pseudo-classes sont signalées par un mot clé commençant par deux points `:` -<pre>:<em>pseudo-class-name</em></pre> + :pseudo-class-name -<h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3> +### Exemple d'une pseudo-classe élémentaire -<p>Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :</p> +Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous : -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} -<p>Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible <em>dans tous les cas</em> le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)</p> +Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible *dans tous les cas* le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.) -<p>{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> +{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}} -<p>Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :</p> +Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN : -<ul> - <li><code><a href="/fr/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/:invalid">:invalid</a></code></li> -</ul> +- [`:last-child`](/fr/docs/Web/CSS/:last-child) +- [`:only-child`](/fr/docs/Web/CSS/:only-child) +- [`:invalid`](/fr/docs/Web/CSS/:invalid) -<h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3> +### Pseudo-classes d'action utilisateur -<p>Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées <em>pseudo-classes dynamiques</em>, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :</p> +Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées _pseudo-classes dynamiques_, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple : -<p><code><a href="/fr/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br> - <code><a href="/fr/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p> +[`:hover`](/fr/docs/Web/CSS/:hover) — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien. +[`:focus`](/fr/docs/Web/CSS/:focus) — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} -<h2 id="Quest_ce_quun_pseudo-élément">Qu'est ce qu'un pseudo-élément ?</h2> +## Qu'est ce qu'un pseudo-élément ? -<p>Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points <code>::</code>.</p> +Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points `::`. -<pre><em>::pseudo-element-name</em></pre> + ::pseudo-element-name -<div class="note"> -<p><strong>Note :</strong> Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p> -</div> +> **Note :** Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité. -<p>Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.</p> +Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément \<span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML. -<p>Le pseudo-sélecteur d'éléments <code>::first-line</code> le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.</p> +Le pseudo-sélecteur d'éléments `::first-line` le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} -<p>Il agit comme si un <code><span></code> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.</p> +Il agit comme si un `<span>` était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait. -<p>Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.</p> +Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes. -<h2 id="Combiner_pseudo-classes_et_pseudo-éléments">Combiner pseudo-classes et pseudo-éléments</h2> +## Combiner pseudo-classes et pseudo-éléments -<p>Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs <code>:first-child</code> et <code>::first-line</code> Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <code><p></code>, qui se trouve à l'intérieur d'un élément <code><article></code></p> +Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs `:first-child` et `::first-line` Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément `<p>`, qui se trouve à l'intérieur d'un élément `<article>` -<pre class="brush: css">article p:first-child::first-line { +```css +article p:first-child::first-line { font-size: 120%; font-weight: bold; -}</pre> - -<h2 id="Générer_du_contenu_avec_before_et_after">Générer du contenu avec ::before et ::after</h2> - -<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/fr/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p> - -<p>Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément <code>::before</code> en <code>::after</code> et voir le texte inséré à la fin de l'élément au lieu du début.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> - -<p>L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.</p> - -<p>Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> - -<p>Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.</p> - -<p>Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément <code>::before</code> pseudo-element. Nous l'avons défini en <code>display: block</code> afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> - -<p>L'utilisation des pseudo-éléments <code>::before</code> et <code>::after</code> avec la propriété <code>content</code> est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.</p> - -<h2 id="Section_de_référence">Section de référence</h2> - -<p>Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.</p> - -<h3 id="Pseudo-classes">Pseudo-classes</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref(":active") }}</td> - <td>Matches when the user activates (for example clicks on) an element.</td> - </tr> - <tr> - <td>{{ Cssxref(":any-link") }}</td> - <td>Matches both the <code>:link</code> and <code>:visited</code> states of a link.</td> - </tr> - <tr> - <td>{{ Cssxref(":blank") }}</td> - <td>Matches an <a href="/fr/docs/Web/HTML/Element/input"><code><input></code> element</a> whose input value is empty.</td> - </tr> - <tr> - <td>{{ Cssxref(":checked") }}</td> - <td>Matches a radio button or checkbox in the selected state.</td> - </tr> - <tr> - <td>{{ Cssxref(":current") }}</td> - <td>Matches the element, or an ancestor of the element, that is currently being displayed.</td> - </tr> - <tr> - <td>{{ Cssxref(":default") }}</td> - <td>Matches the one or more UI elements that are the default among a set of similar elements.</td> - </tr> - <tr> - <td>{{ Cssxref(":dir") }}</td> - <td>Select an element based on its directionality (value of the HTML <code><a href="/fr/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/fr/docs/Web/CSS/direction">direction</a></code> property).</td> - </tr> - <tr> - <td>{{ Cssxref(":disabled") }}</td> - <td>Matches user interface elements that are in an disabled state.</td> - </tr> - <tr> - <td>{{ Cssxref(":empty") }}</td> - <td>Matches an element that has no children except optionally white space.</td> - </tr> - <tr> - <td>{{ Cssxref(":enabled") }}</td> - <td>Matches user interface elements that are in an enabled state.</td> - </tr> - <tr> - <td>{{ Cssxref(":first") }}</td> - <td>In <a href="/fr/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td> - </tr> - <tr> - <td>{{ Cssxref(":first-child") }}</td> - <td>Matches an element that is first among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":first-of-type") }}</td> - <td>Matches an element which is first of a certain type among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus") }}</td> - <td>Matches when an element has focus.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-visible")}}</td> - <td>Matches when an element has focus and the focus should be visible to the user.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-within") }}</td> - <td>Matches an element with focus plus an element with a descendent that has focus.</td> - </tr> - <tr> - <td>{{ Cssxref(":future") }}</td> - <td>Matches the elements after the current element.</td> - </tr> - <tr> - <td>{{ Cssxref(":hover") }}</td> - <td>Matches when the user hovers over an element.</td> - </tr> - <tr> - <td>{{ Cssxref(":indeterminate") }}</td> - <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/fr/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> - </tr> - <tr> - <td>{{ Cssxref(":in-range") }}</td> - <td>Matches an element with a range when its value is in-range.</td> - </tr> - <tr> - <td>{{ Cssxref(":invalid") }}</td> - <td>Matches an element, such as an <code><input></code>, in an invalid state.</td> - </tr> - <tr> - <td>{{ Cssxref(":lang") }}</td> - <td>Matches an element based on language (value of the HTML <a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td> - </tr> - <tr> - <td>{{ Cssxref(":last-child") }}</td> - <td>Matches an element which is last among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":last-of-type") }}</td> - <td>Matches an element of a certain type that is last among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":left") }}</td> - <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td> - </tr> - <tr> - <td>{{ Cssxref(":link")}}</td> - <td>Matches unvisited links.</td> - </tr> - <tr> - <td>{{ Cssxref(":local-link")}}</td> - <td>Matches links pointing to pages that are in the same site as the current document.</td> - </tr> - <tr> - <td>{{ Cssxref(":is", ":is()")}}</td> - <td>Matches any of the selectors in the selector list that is passed in.</td> - </tr> - <tr> - <td>{{ Cssxref(":not") }}</td> - <td>Matches things not matched by selectors that are passed in as a value to this selector.</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-child") }}</td> - <td>Matches elements from a list of siblings — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-of-type") }}</td> - <td>Matches elements from a list of siblings that are of a certain type (e.g. <code><p></code> elements) — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-child") }}</td> - <td>Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-of-type") }}</td> - <td>Matches elements from a list of siblings that are of a certain type (e.g. <code><p></code> elements), counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td> - </tr> - <tr> - <td>{{ Cssxref(":only-child") }}</td> - <td>Matches an element that has no siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":only-of-type") }}</td> - <td>Matches an element that is the only one of its type among its siblings.</td> - </tr> - <tr> - <td>{{ Cssxref(":optional") }}</td> - <td>Matches form elements that are not required.</td> - </tr> - <tr> - <td>{{ Cssxref(":out-of-range") }}</td> - <td>Matches an element with a range when its value is out of range.</td> - </tr> - <tr> - <td>{{ Cssxref(":past") }}</td> - <td>Matches the elements before the current element.</td> - </tr> - <tr> - <td>{{ Cssxref(":placeholder-shown") }}</td> - <td>Matches an input element that is showing placeholder text.</td> - </tr> - <tr> - <td>{{ Cssxref(":playing") }}</td> - <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.</td> - </tr> - <tr> - <td>{{ Cssxref(":paused") }}</td> - <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-only") }}</td> - <td>Matches an element if it is not user-alterable.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-write") }}</td> - <td>Matches an element if it is user-alterable.</td> - </tr> - <tr> - <td>{{ Cssxref(":required") }}</td> - <td>Matches form elements that are required.</td> - </tr> - <tr> - <td>{{ Cssxref(":right") }}</td> - <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td> - </tr> - <tr> - <td>{{ Cssxref(":root") }}</td> - <td>Matches an element that is the root of the document.</td> - </tr> - <tr> - <td>{{ Cssxref(":scope") }}</td> - <td>Matches any element that is a scope element.</td> - </tr> - <tr> - <td>{{ Cssxref(":valid") }}</td> - <td>Matches an element such as an <code><input></code> element, in a valid state.</td> - </tr> - <tr> - <td>{{ Cssxref(":target") }}</td> - <td>Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment</a>).</td> - </tr> - <tr> - <td>{{ Cssxref(":visited") }}</td> - <td>Matches visited links.</td> - </tr> - </tbody> -</table> - -<h3 id="Pseudo-éléments">Pseudo-éléments</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Sélecteur</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref("::after") }}</td> - <td>Matches a stylable element appearing after the originating element's actual content.</td> - </tr> - <tr> - <td>{{ Cssxref("::before") }}</td> - <td>Matches a stylable element appearing before the originating element's actual content.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-letter") }}</td> - <td>Matches the first letter of the element.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-line") }}</td> - <td>Matches the first line of the containing element.</td> - </tr> - <tr> - <td>{{ Cssxref("::grammar-error") }}</td> - <td>Matches a portion of the document containing a grammar error as flagged by the browser.</td> - </tr> - <tr> - <td>{{ Cssxref("::selection") }}</td> - <td>Matches the portion of the document that has been selected.</td> - </tr> - <tr> - <td>{{ Cssxref("::spelling-error") }}</td> - <td>Matches a portion of the document containing a spelling error as flagged by the browser.</td> - </tr> - </tbody> -</table> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Dans_ce_cours">Dans ce cours</h2> - -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +} +``` + +## Générer du contenu avec ::before et ::after + +Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété [`content`](/fr/docs/Web/CSS/content) pour insérer du contenu dans votre document en utilisant le CSS. + +Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément `::before` en `::after` et voir le texte inséré à la fin de l'élément au lieu du début. + +{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} + +L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir. + +Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran : + +{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}} + +Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page. + +Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement. + +{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} + +L'utilisation des pseudo-éléments `::before` et `::after` avec la propriété `content` est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site [CSS Arrow Please](http://www.cssarrowplease.com/), qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document. + +## Section de référence + +Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation. + +### Pseudo-classes + +| Sélecteur | Description | +| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{ Cssxref(":active") }} | Matches when the user activates (for example clicks on) an element. | +| {{ Cssxref(":any-link") }} | Matches both the `:link` and `:visited` states of a link. | +| {{ Cssxref(":blank") }} | Matches an [`<input>` element](/fr/docs/Web/HTML/Element/input) whose input value is empty. | +| {{ Cssxref(":checked") }} | Matches a radio button or checkbox in the selected state. | +| {{ Cssxref(":current") }} | Matches the element, or an ancestor of the element, that is currently being displayed. | +| {{ Cssxref(":default") }} | Matches the one or more UI elements that are the default among a set of similar elements. | +| {{ Cssxref(":dir") }} | Select an element based on its directionality (value of the HTML [`dir`](/fr/docs/Web/HTML/Global_attributes/dir) attribute or CSS [`direction`](/fr/docs/Web/CSS/direction) property). | +| {{ Cssxref(":disabled") }} | Matches user interface elements that are in an disabled state. | +| {{ Cssxref(":empty") }} | Matches an element that has no children except optionally white space. | +| {{ Cssxref(":enabled") }} | Matches user interface elements that are in an enabled state. | +| {{ Cssxref(":first") }} | In [Paged Media](/fr/docs/Web/CSS/Paged_Media), matches the first page. | +| {{ Cssxref(":first-child") }} | Matches an element that is first among its siblings. | +| {{ Cssxref(":first-of-type") }} | Matches an element which is first of a certain type among its siblings. | +| {{ Cssxref(":focus") }} | Matches when an element has focus. | +| {{ Cssxref(":focus-visible")}} | Matches when an element has focus and the focus should be visible to the user. | +| {{ Cssxref(":focus-within") }} | Matches an element with focus plus an element with a descendent that has focus. | +| {{ Cssxref(":future") }} | Matches the elements after the current element. | +| {{ Cssxref(":hover") }} | Matches when the user hovers over an element. | +| {{ Cssxref(":indeterminate") }} | Matches UI elements whose value is in an indeterminate state, usually [checkboxes](/fr/docs/Web/HTML/Element/input/checkbox). | +| {{ Cssxref(":in-range") }} | Matches an element with a range when its value is in-range. | +| {{ Cssxref(":invalid") }} | Matches an element, such as an `<input>`, in an invalid state. | +| {{ Cssxref(":lang") }} | Matches an element based on language (value of the HTML [lang](/fr/docs/Web/HTML/Global_attributes/lang) attribute). | +| {{ Cssxref(":last-child") }} | Matches an element which is last among its siblings. | +| {{ Cssxref(":last-of-type") }} | Matches an element of a certain type that is last among its siblings. | +| {{ Cssxref(":left") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches left-hand pages. | +| {{ Cssxref(":link")}} | Matches unvisited links. | +| {{ Cssxref(":local-link")}} | Matches links pointing to pages that are in the same site as the current document. | +| {{ Cssxref(":is", ":is()")}} | Matches any of the selectors in the selector list that is passed in. | +| {{ Cssxref(":not") }} | Matches things not matched by selectors that are passed in as a value to this selector. | +| {{ Cssxref(":nth-child") }} | Matches elements from a list of siblings — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.) | +| {{ Cssxref(":nth-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements) — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.) | +| {{ Cssxref(":nth-last-child") }} | Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) | +| {{ Cssxref(":nth-last-of-type") }} | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements), counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) | +| {{ Cssxref(":only-child") }} | Matches an element that has no siblings. | +| {{ Cssxref(":only-of-type") }} | Matches an element that is the only one of its type among its siblings. | +| {{ Cssxref(":optional") }} | Matches form elements that are not required. | +| {{ Cssxref(":out-of-range") }} | Matches an element with a range when its value is out of range. | +| {{ Cssxref(":past") }} | Matches the elements before the current element. | +| {{ Cssxref(":placeholder-shown") }} | Matches an input element that is showing placeholder text. | +| {{ Cssxref(":playing") }} | Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”. | +| {{ Cssxref(":paused") }} | Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”. | +| {{ Cssxref(":read-only") }} | Matches an element if it is not user-alterable. | +| {{ Cssxref(":read-write") }} | Matches an element if it is user-alterable. | +| {{ Cssxref(":required") }} | Matches form elements that are required. | +| {{ Cssxref(":right") }} | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches right-hand pages. | +| {{ Cssxref(":root") }} | Matches an element that is the root of the document. | +| {{ Cssxref(":scope") }} | Matches any element that is a scope element. | +| {{ Cssxref(":valid") }} | Matches an element such as an `<input>` element, in a valid state. | +| {{ Cssxref(":target") }} | Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current [URL fragment](https://en.wikipedia.org/wiki/Fragment_identifier)). | +| {{ Cssxref(":visited") }} | Matches visited links. | + +### Pseudo-éléments + +| Sélecteur | Description | +| -------------------------------------------- | ---------------------------------------------------------------------------------------- | +| {{ Cssxref("::after") }} | Matches a stylable element appearing after the originating element's actual content. | +| {{ Cssxref("::before") }} | Matches a stylable element appearing before the originating element's actual content. | +| {{ Cssxref("::first-letter") }} | Matches the first letter of the element. | +| {{ Cssxref("::first-line") }} | Matches the first line of the containing element. | +| {{ Cssxref("::grammar-error") }} | Matches a portion of the document containing a grammar error as flagged by the browser. | +| {{ Cssxref("::selection") }} | Matches the portion of the document that has been selected. | +| {{ Cssxref("::spelling-error") }} | Matches a portion of the document containing a spelling error as flagged by the browser. | + +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} + +## Dans ce cours + +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md index 376bfcb1cd..43772eb59f 100644 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -4,115 +4,129 @@ slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} -<p>Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.</p> +Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions de base en l'informatique, + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >logiciels de base installés</a + >, + <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + >savoir manipuler des fichiers</a + >, connaissance de base de HTML (cf. <a + href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >.) et une première idée du fonctionnement de CSS (voir <a + href="/fr/docs/Learn/CSS/First_steps" + >premiers pas en CSS</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> + </tr> + </tbody> </table> -<h2 id="Sélecteur_de_type">Sélecteur de type</h2> +## Sélecteur de type -<p>Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <code><span></code>, <code><em></code> et <code><strong></code> est ainsi mise en forme.</p> +Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de `<span>`, `<em>` et `<strong>` est ainsi mise en forme. -<p><strong>Essayez d'ajouter une règle CSS pour sélectionner l'élément <code><h1></code> et changer sa couleur en bleu.</strong></p> +**Essayez d'ajouter une règle CSS pour sélectionner l'élément `<h1>` et changer sa couleur en bleu.** -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}} -<h2 id="Le_sélecteur_universel">Le sélecteur universel</h2> +## Le sélecteur universel -<p>Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.</p> +Le sélecteur universel est indiqué par un astérisque (\*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}} -<p>On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.</p> +On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous. -<h3 id="Utiliser_le_sélecteur_universel_pour_rendre_les_sélecteurs_plus_lisibles">Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles</h3> +### Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles -<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code><article></code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> : </p> +On peut utiliser `*` pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément `<article>` pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les [pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) : -<pre class="brush: css">article :first-child { +```css +article :first-child { -}</pre> +} +``` -<p>On peut néanmoins confondre ce sélecteur avec <code>article:first-child</code> ciblant les éléments <code><article></code> qui sont le premier descendant d'un élément.</p> +On peut néanmoins confondre ce sélecteur avec `article:first-child` ciblant les éléments `<article>` qui sont le premier descendant d'un élément. -<p>Pour éviter cette confusion, on peut ajouter le sélecteur universel <code>*</code> à <code>:first-child</code>, le fonctionnement de ce dernier sera plus clair : il cible <em>tout</em> élément premier descendant d'un élément <code><article></code> :</p> +Pour éviter cette confusion, on peut ajouter le sélecteur universel `*` à `:first-child`, le fonctionnement de ce dernier sera plus clair : il cible *tout* élément premier descendant d'un élément `<article>` : -<pre class="brush: css">article *:first-child { +```css +article *:first-child { -} </pre> +} +``` -<h2 id="Sélecteurs_de_classe">Sélecteurs de classe</h2> +## Sélecteurs de classe -<p>Le sélecteur de classe commence par un point <code>.</code> et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée <code>.highlight</code> et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.</p> +Le sélecteur de classe commence par un point `.` et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée `.highlight` et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}} -<h3 id="Cibler_des_classes_dun_élément_donné">Cibler des classes d'un élément donné</h3> +### Cibler des classes d'un élément donné -<p>On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe <code>highlight</code> met en surbrillance, mais elle le fait différemment quand elle s'applique à un <span> ou à un titre <h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.</p> +On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe `highlight` met en surbrillance, mais elle le fait différemment quand elle s'applique à un \<span> ou à un titre \<h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}} -<p>Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.</p> +Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments. -<h3 id="Cibler_un_élément_appartenant_à_plus_dune_classe">Cibler un élément appartenant à plus d'une classe</h3> +### Cibler un élément appartenant à plus d'une classe -<p>Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.</p> +Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site. -<p>L'exemple ci-dessous présente trois <code><div></code> contenant chacun une note. Si la boîte est dans la classe <code>notebox</code> elle a une bordure grise. Si de plus elle est dans la classe <code>warning</code> ou <code>danger</code>, on change la {{cssxref("border-color")}}.</p> +L'exemple ci-dessous présente trois `<div>` contenant chacun une note. Si la boîte est dans la classe `notebox` elle a une bordure grise. Si de plus elle est dans la classe `warning` ou `danger`, on change la {{cssxref("border-color")}}. -<p>On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.</p> +On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre. -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}} -<h2 id="Sélecteurs_dID">Sélecteurs d'ID</h2> +## Sélecteurs d'ID -<p>Un sélecteur d'ID commence par un <code>#</code> plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'<code>id</code> associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :</p> +Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'`id` associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant : -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> +{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}} -<div class="blockIndicator note"> -<p><strong>Note :</strong> Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p> -</div> +> **Note :** Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera. -<h2 id="Prochain_article">Prochain article</h2> +## Prochain article -<p>Notre exploration des sélecteurs se poursuit par l'étude des <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut">sélecteurs d'attributs</a>.</p> +Notre exploration des sélecteurs se poursuit par l'étude des [sélecteurs d'attributs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut). -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> +1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) + + - [Type, class, and ID selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Attribute selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes and pseudo-elements](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinators](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) + +3. [The box model](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Backgrounds and borders](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Handling different text directions](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Overflowing content](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Values and units](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Sizing items in CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, media, and form elements](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Styling tables](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organizing your CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md index 74258dbe1b..9f10afa344 100644 --- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md @@ -4,16 +4,28 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> - -<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> <td> - <p>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>.</p> + <p> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >), et une idée de + <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>. + </p> </td> </tr> <tr> @@ -23,114 +35,109 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS </tbody> </table> -<h2 id="the_natural_or_intrinsic_size_of_things">La taille naturelle ou intrinsèque des choses</h2> +## La taille naturelle ou intrinsèque des choses + +Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une **taille intrinsèque** — qui provient de l'image elle-même. + +Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise `<img>` ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille. -<p>Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle-même.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}} -<p>Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code><img></code> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p> +Un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide en revanche, n'a pas de taille en soi. Si vous ajouter une [`<div>`](/fr/docs/Web/HTML/Element/div) à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}} -<p>Un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.</p> +Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette `<div>` dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> +## Spécifier une taille -<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code><div></code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.</p> +Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de **taille extrinsèque**. Reprenons notre `<div>` de l'exemple précédent — nous pouvons lui donner une [`width`](/fr/docs/Web/CSS/width) spécifique et une [`height`](/fr/docs/Web/CSS/height) spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans [notre précédente leçon sur le concept d'overflow,](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur. -<h2 id="setting_a_specific_size">Spécifier une taille</h2> +{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}} -<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code><div></code> de l'exemple précédent — nous pouvons lui donner une <a href="/fr/docs/Web/CSS/width"><code>width</code></a> spécifique et une <a href="/fr/docs/Web/CSS/height"><code>height</code></a> spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.</p> +Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> +### Avec les pourcentages -<p>Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.</p> +De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans [la leçon sur les valeurs et unités en CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units), ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent. -<h3 id="using_percentages">Avec les pourcentages</h3> +{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}} -<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.</p> +En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre `<div>` prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la ` <div``> ` aurait normalement occupé dans l'élément parent. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> +### Marges et remplissage en pourcentages -<p>En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code><div></code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code><div</code><code>></code> aurait normalement occupé dans l'élément parent.</p> +Si vous définissez les `margins` (marges extérieures) et les `paddings` (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété [`margin`](/fr/docs/Web/CSS/margin) à 10% et la propriété [`padding`](/fr/docs/Web/CSS/padding) à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite. -<h3 id="percentage_margins_and_padding">Marges et remplissage en pourcentages</h3> +{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}} -<p>Si vous définissez les <code>margins</code> (marges extérieures) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à 10% et la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.</p> +On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas ! -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> +Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la **taille en ligne** — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière. -<p>On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !</p> +## Tailles min- et max- -<p>Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la <strong>taille en ligne</strong> — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.</p> +En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait _au moins_ une certaine hauteur, vous pourriez lui attribuer la propriété [`min-height`](/fr/docs/Web/CSS/min-height). La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale. -<h2 id="min-_and_max-_sizes">Tailles min- et max-</h2> +Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels. -<p>En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait <em>au moins</em> une certaine hauteur, vous pourriez lui attribuer la propriété <a href="/fr/docs/Web/CSS/min-height"><code>min-height</code></a>. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}} -<p>Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.</p> +C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> +Une utilisation courante de [`max-width`](/fr/docs/Web/CSS/max-width) consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur. -<p>C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.</p> +À titre d'exemple, si vous définissiez `width: 100%` sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez. -<p>Une utilisation courante de <a href="/fr/docs/Web/CSS/max-width"><code>max-width</code></a> consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.</p> +Si vous utilisez plutôt `max-width : 100%`, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille. -<p>À titre d'exemple, si vous définissiez <code>width: 100%</code> sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.</p> +Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le `width: 100%` et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du `max-width : 100%` et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec `max-width : 100%` défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur. -<p>Si vous utilisez plutôt <code>max-width : 100%</code>, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}} -<p>Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le <code>width: 100%</code> et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du <code>max-width : 100%</code> et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec <code>max-width : 100%</code> défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.</p> +Cette technique est utilisée pour rendre les images _responsive_, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> +> **Note :** En savoir plus sur [les techniques d'images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). -<p>Cette technique est utilisée pour rendre les images <em>responsive</em>, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.</p> +## Unités de la fenêtre d'affichage -<div class="note"> - <p><strong>Note :</strong> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p> -</div> +La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — `vw` pour _viewport width_ (largeur de la fenêtre), et `vh` pour _viewport height_ (hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur. -<h2 id="viewport_units">Unités de la fenêtre d'affichage</h2> +`1vh` correspond à 1% de la hauteur de la fenêtre, `1vw` à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre `A`, de [`font-size`](/fr/docs/Web/CSS/font-size) 10vh. -<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p> +{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}} -<p><code>1vh</code> correspond à 1% de la hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> 10vh.</p> +Si vous changez les valeurs `vh` et `vw`, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le `<iframe>` intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). [Ouvrez l'exemple](https://mdn.github.io/css-examples/learn/sizing/vw-vh.html), redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte. -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> +Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler. -<p>Si vous changez les valeurs <code>vh</code> et <code>vw</code>, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <code><iframe></code> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Ouvrez l'exemple</a>, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.</p> +## Testez vos compétences ! -<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p> +Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir [Tester vos compétences : Dimensionnement](/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks). -<h2 id="test_your_skills">Testez vos compétences !</h2> +## Résumé -<p>Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Tester vos compétences : Dimensionnement</a>.</p> +Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez [les dispositions en CSS](/fr/docs/Learn/CSS/CSS_layout), le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin. -<h2 id="summary">Résumé</h2> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}} -<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions en CSS</a>, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.</p> +## Dans ce module -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="in_this_module">Dans ce module</h2> + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md index 2543732c2a..253f8338c6 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.md +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -13,93 +13,102 @@ tags: translation_of: Learn/CSS/Building_blocks/Styling_tables original_slug: Apprendre/CSS/Building_blocks/Styling_tables --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> - -<p>Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.</p> +Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Notions de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre à donner effectivement un style aux tableaux HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Notions de HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une + idée du fonctionnement des CSS (voir + <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre à donner effectivement un style aux tableaux HTML.</td> + </tr> + </tbody> </table> -<h2 id="Un_tableau_HTML_typique">Un tableau HTML typique</h2> - -<p>Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :</p> - -<pre class="brush: html"><table> - <caption>Récapitulatif des groupes punk les plus célébres du RU</caption> - <thead> - <tr> - <th scope="col">Groupe</th> - <th scope="col">Année de formation</th> - <th scope="col">Nombre d'albums</th> - <th scope="col">Morceau le plus célèbre</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Buzzcocks</th> - <td>1976</td> - <td>9</td> - <td>Ever fallen in love (with someone you shouldn't've)</td> - </tr> - <tr> - <th scope="row">The Clash</th> - <td>1976</td> - <td>6</td> - <td>London Calling</td> - </tr> +## Un tableau HTML typique + +Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci : + +```html +<table> + <caption>Récapitulatif des groupes punk les plus célébres du RU</caption> + <thead> + <tr> + <th scope="col">Groupe</th> + <th scope="col">Année de formation</th> + <th scope="col">Nombre d'albums</th> + <th scope="col">Morceau le plus célèbre</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> ... quelques lignes supprimées pour condenser le texte - <tr> - <th scope="row">The Stranglers</th> - <td>1974</td> - <td>17</td> - <td>No More Heroes</td> - </tr> - </tbody> - <tfoot> - <tr> - <th scope="row" colspan="2">Total albums</th> - <td colspan="2">77</td> - </tr> - </tfoot> -</table></pre> + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table> +``` + +Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici [punk-bands-unstyled.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html)) : -<p>Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>) :</p> + -<p><img alt="Liste des groupes punk du Royaume Uni" src="punk.png"></p> +Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela. -<p>Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.</p> +## Mettre en forme notre tableau -<h2 id="Mettre_en_forme_notre_tableau">Mettre en forme notre tableau</h2> +Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus. -<p>Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.</p> +1. Pour débuter, faites une copie locale de l'[exemple de balisage](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html), téléchargez les images ([noise.png](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png) et [leopardskin.jpg](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg)) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur. +2. Ensuite, créez un nouveau fichier nommé `style.css` et enregistrez‑le dans le même répertoire que les autres fichiers. +3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : -<ol> - <li>Pour débuter, faites une copie locale de l'<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">exemple de balisage</a>, téléchargez les images (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise.png</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin.jpg</a>) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.</li> - <li>Ensuite, créez un nouveau fichier nommé <code>style.css</code> et enregistrez‑le dans le même répertoire que les autres fichiers.</li> - <li>Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : - <pre class="brush: html"><link href="style.css" rel="stylesheet" type="text/css"></pre> - </li> -</ol> + ```html + <link href="style.css" rel="stylesheet" type="text/css"> + ``` -<h3 id="Espacement_et_disposition">Espacement et disposition</h3> +### Espacement et disposition -<p>La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier <code>style.css</code> :</p> +La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier `style.css` : -<pre class="brush: css">/* espacement */ +```css +/* espacement */ table { table-layout: fixed; @@ -126,38 +135,41 @@ thead th:nth-child(4) { th, td { padding: 20px; -}</pre> +} +``` -<p>Voici les choses les plus importantes à noter :</p> +Voici les choses les plus importantes à noter : -<p>Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.</p> +Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente. -<ul> - <li>Définir pour le tableau la valeur <code>fixed</code> pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec <code>table-layout: fixed</code>, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur <code>thead th:nth-child(n)</code> ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> - <br> - Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).</li> - <li>La valeur <code>collapse</code> pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : <img alt="Encadrement des éléments d'un tableau" src="cadre_1.png"> Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec <code>border-collapse : collapse;</code>, les bordures se condensent en une seule, ce qui est beaucoup mieux :<img alt="Avec border-collapse: collapse; les encadrements se condensent" src="cadre_2.png"></li> - <li>Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.</li> - <li>Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.</li> -</ul> +- Définir pour le tableau la valeur `fixed` pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec `table-layout: fixed`, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur `thead th:nth-child(n)` ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans [Fixed Table Layouts](https://css-tricks.com/fixing-tables-long-strings/). -<p>À ce stade, le tableau a déjà meilleure mine :</p> + Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites). -<p><img alt="Première mise en forme du tableau" src="punk_A.png"></p> +- La valeur `collapse` pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration :  Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec `border-collapse : collapse;`, les bordures se condensent en une seule, ce qui est beaucoup mieux : +- Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net. +- Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table. -<h3 id="Simple_typographie">Simple typographie</h3> +À ce stade, le tableau a déjà meilleure mine : -<p>Maintenant, différencions un peu nos polices de caractère.</p> + -<p>Tout d'abord, nous avons trouvé une police sur <a href="https://www.google.com/fonts">Google Fonts</a> convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.</p> +### Simple typographie -<p>D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML <code>head</code>, juste au‑dessus de l'élément <code><link></code> déjà présent :</p> +Maintenant, différencions un peu nos polices de caractère. -<pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> +Tout d'abord, nous avons trouvé une police sur [Google Fonts](https://www.google.com/fonts) convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts. -<p>Puis ajoutons le CSS suivant dans le fichier <code>style.css</code> :</p> +D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML `head`, juste au‑dessus de l'élément `<link>` déjà présent : -<pre class="brush: css">/* typographie */ +```html +<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'> +``` + +Puis ajoutons le CSS suivant dans le fichier `style.css` : + +```css +/* typographie */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; @@ -181,50 +193,49 @@ tbody td { tfoot th { text-align: right; -}</pre> +} +``` -<p>Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.</p> +Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture. -<ul> - <li>Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ».</li> - <li>Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif.</li> - <li>Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à <code>left</code> et les en–têtes à <code>center</code>, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules.</li> - <li>Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données.</li> -</ul> +- Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ». +- Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif. +- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules. +- Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données. -<p>Cela fait un peu plus propre :</p> +Cela fait un peu plus propre : -<p><img alt="Deuxième mise en forme : modifications des polices de caractères." src="punk_B.png"></p> + -<h3 id="Graphisme_et_couleurs">Graphisme et couleurs</h3> +### Graphisme et couleurs -<p>Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.</p> +Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût. -<p>Commençons par ajouter le CSS suivant à la fin du fichier <code>style.css</code> :</p> +Commençons par ajouter le CSS suivant à la fin du fichier `style.css` : -<pre>thead, tfoot { - background: url(leopardskin.jpg); - color: white; - text-shadow: 1px 1px 1px black; -} + thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; + } -thead th, tfoot th, tfoot td { - background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); - border: 3px solid purple; -} -</pre> + thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; + } -<p>Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.</p> +Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses. -<p>Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.</p> +Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible. -<p>Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.</p> +Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires. -<h4 id="Zébrures">Zébrures</h4> +#### Zébrures -<p>Nous avons souhaité dédier un paragraphe séparé à la mise en place de <strong>zèbrures</strong> — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier <code>style.css</code> :</p> +Nous avons souhaité dédier un paragraphe séparé à la mise en place de **zèbrures** — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier `style.css` : -<pre class="brush: css">tbody tr:nth-child(odd) { +```css +tbody tr:nth-child(odd) { background-color: #ff33cc; } @@ -238,25 +249,25 @@ tbody tr { table { background-color: #ff33cc; -}</pre> +} +``` -<ul> - <li>Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés <code>odd</code> (impair) et <code>even </code>(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes)</li> - <li>Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un <code>.png</code> semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture.</li> - <li>Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur <code>:nth-child</code> disposent encore d'une teinte de fond pour les lignes du corps de tableau.</li> -</ul> +- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even `(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes) +- Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un `.png` semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture. +- Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur `:nth-child` disposent encore d'une teinte de fond pour les lignes du corps de tableau. -<p>Et voici l'explosion de couleurs résultante :</p> +Et voici l'explosion de couleurs résultante : -<p><img alt="Troisième mise en forme : coloriage agressif" src="punk_C.png"></p> + -<p>Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.</p> +Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques. -<h3 id="Styliser_lintitulé">Styliser l'intitulé</h3> +### Styliser l'intitulé -<p>Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier <code>style.css</code> :</p> +Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier `style.css` : -<pre class="brush: css">caption { +```css +caption { font-family: 'Rock Salt', cursive; padding: 20px; font-style: italic; @@ -264,45 +275,40 @@ table { color: #666; text-align: right; letter-spacing: 1px; -}</pre> - -<p>Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur <code>bottom</code>. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>) :</p> - -<p><img alt="Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin" src="punk_D.png"></p> +} +``` -<h2 id="Apprentissage_actif_mettez_en_page_votre_propre_tableau">Apprentissage actif : mettez en page votre propre tableau</h2> +Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur `bottom`. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur [punk-bands-complete.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)) : -<p>Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.</p> + -<h2 id="Quelques_conseils_rapides">Quelques conseils rapides</h2> +## Apprentissage actif : mettez en page votre propre tableau -<p>Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :</p> +Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus. -<ul> - <li>Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable.</li> - <li>Utilisez {{cssxref("table-layout")}}<code>: fixed</code> pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}).</li> - <li>Utilisez {{cssxref("border-collapse")}}<code>: collapse</code> pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler.</li> - <li>Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire.</li> - <li>Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture.</li> - <li>Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre.</li> -</ul> +## Quelques conseils rapides -<h2 id="Résumé">Résumé</h2> +Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus : -<p>Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes <code>blend</code> et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).</p> +- Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable. +- Utilisez {{cssxref("table-layout")}}`: fixed` pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}). +- Utilisez {{cssxref("border-collapse")}}`: collapse` pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler. +- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire. +- Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture. +- Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre. -<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p> +## Résumé +Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes `blend` et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages). +{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li> - <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> - <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> -</ul> +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) +- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) +- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) +- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects) +- [Création d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper) +- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box) diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.md b/files/fr/learn/css/building_blocks/the_box_model/index.md index b099bc42fb..628ba79d32 100644 --- a/files/fr/learn/css/building_blocks/the_box_model/index.md +++ b/files/fr/learn/css/building_blocks/the_box_model/index.md @@ -4,337 +4,360 @@ slug: Learn/CSS/Building_blocks/The_box_model translation_of: Learn/CSS/Building_blocks/The_box_model original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}} -<p>En CSS, tout élément est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p> +En CSS, tout élément est inclus dans une boîte ("_box_" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le _Modèle de Boîtes CSS_ - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Compétences informatique basiques, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >Logiciels de base installés</a + >, connaissance simple en + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >manipulation de fichiers</a + >, les bases du HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), et une esquisse du fonctionnement du CSS (voir + <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le + Modèle de Boîte et comment passer au modèle alternatif. + </td> + </tr> + </tbody> </table> -<h2 id="block_and_inline_boxes">Les boîtes en ligne et boîte de bloc</h2> +## Les boîtes en ligne et boîte de bloc -<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em> en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes :</p> +En CSS, il existe deux type de boîtes : les boîtes **en bloc** ("_block boxes_" en anglais) et les boîtes **en ligne** (_"inline boxes"_ en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes : -<p>Si une boîte est définie en bloc, elle suivra alors les règles suivantes :</p> +Si une boîte est définie en bloc, elle suivra alors les règles suivantes : -<ul> - <li>La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible.</li> - <li>La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après.</li> - <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) sont toujours respectées.</li> - <li>Les propriétés <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a> — correspondantes respectivement aux écarts de <i lang="en">padding</i>, à la marge et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li> -</ul> +- La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible. +- La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après. +- Les propriétés de largeur ([`width`](/fr/docs/Web/CSS/width)) et de hauteur ([`height`](/fr/docs/Web/CSS/height)) sont toujours respectées. +- Les propriétés [`padding`](/fr/docs/Web/CSS/padding), [`margin`](/fr/docs/Web/CSS/margin) et [`border`](/fr/docs/Web/CSS/border) — correspondantes respectivement aux écarts de -<p>À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<code><h1></code>,<code><h2></code>, etc.) et les paragraphes (<code><p></code>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.</p> + <i lang="en">padding</i> -<p>Si une boîte est positionnée en ligne, alors :</p> + , à la marge et à la bordure de la boîte — auront pour effet de repousser les autres éléments. -<ul> - <li>La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.</li> - <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) ne s'appliquent pas.</li> - <li>Le <i lang="en">padding</i>, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li> - <li>Le <i lang="en">padding</i>, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li> -</ul> +À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (`<h1>`,`<h2>`, etc.) et les paragraphes (`<p>`) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut. -<p>Les éléments <code><a></code>, utilisés pour les liens, ou encore <code><span></code>, <code><em></code> et <code><strong></code> sont tous des éléments qui s'affichent "en ligne" par défaut.</p> +Si une boîte est positionnée en ligne, alors : -<p>Le type de boîte appliqué à un élément est défini par la valeur de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieure de positionnement (ou "<em>display</em>" en anglais).</p> +- La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne. +- Les propriétés de largeur ([`width`](/fr/docs/Web/CSS/width)) et de hauteur ([`height`](/fr/docs/Web/CSS/height)) ne s'appliquent pas. +- Le -<h2 id="aside_inner_and_outer_display_types">Aparté : les positionnements intérieurs et extérieurs</h2> + <i lang="en">padding</i> -<p>Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement <strong>intérieurs</strong> ("<em>inner dipslay</em>") et <strong>extérieurs</strong> ("<em>outer display</em>"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement <em>extérieur</em> qui détermine si la boîte est "en ligne" ou bien "en bloc".</p> + , les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours. -<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p> +- Le -<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type de positionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p> + <i lang="en">padding</i> -<div class="note"> -<p><strong>Note :</strong> Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p> -</div> + , les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours. -<p>Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> +Les éléments `<a>`, utilisés pour les liens, ou encore `<span>`, `<em>` et `<strong>` sont tous des éléments qui s'affichent "en ligne" par défaut. -<p>Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p> +Le type de boîte appliqué à un élément est défini par la valeur de la propriété [`display`](/fr/docs/Web/CSS/display) tel que `block` ou `inline`, et se réfère à la valeur extérieure de positionnement (ou "_display_" en anglais). -<h2 id="examples_of_different_display_types">Exemples de quelques types de positionnement</h2> +## Aparté : les positionnements intérieurs et extérieurs -<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p> +Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement **intérieurs** ("_inner dipslay_") et **extérieurs** ("_outer display_"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement _extérieur_ qui détermine si la boîte est "en ligne" ou bien "en bloc". -<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p> +Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la **[disposition normale](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow)**, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant). -<p>Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <code><span></code>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <code><span></code> une classe CSS nommée "block" qui lui attribue la propriété <code>display: block;</code>, ce qui explique la différence de mise en page observée.</p> +Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur `flex` de la propriété `display`. Ainsi, si on donne la propriété `display: flex;` à un élément, son type de positionnement extérieur est "en bloc" (`block`), mais son type de positionnement intérieur est modifié en `flex`. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox), dont on reparlera plus tard. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}}</p> +> **Note :** Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la [Disposition en ligne et en bloc](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). -<p>Nous avons dans cet exemple le comportement typique d'un élément en ligne (<code>inline</code>), observant chacune des règles énoncées plus haut : l'élément <code><span></code> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - <em>en ligne</em> donc - des autres éléments.</p> +Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que `flex`, ou encore [`grid`](/fr/docs/Learn/CSS/CSS_layout/Grids). -<p>Nous avons en suite un élément <code><ul></code> dont la propriété de positionnement est <code>display: inline-flex;</code>, ce qui fait du <code><ul></code> une boîte en ligne, contenant des éléments de liste (<code><li></code>) dipsosés en "flex".</p> +Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la **disposition normale** ("_normal flow_" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page. -<p>Pour finir, nous avons deux paragraphes, tous deux définis en <code>display: inline;</code>. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc.</p> +## Exemples de quelques types de positionnement -<p><strong>Dans cet exemple, nous vous invitons à passer de <code>display: inline;</code> à <code>display: block;</code> ou encore de <code>display: inline-flex;</code> à <code>display: flex;</code> pour observer les modifications apportées par ces modes de positionnement.</strong></p> +Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (`block`). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p> +Le deuxième élément est une liste, qui est disposée selon la règle `display: flex;`. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe. -<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page.</p> +Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments `<span>`. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux `<span>` une classe CSS nommée "block" qui lui attribue la propriété `display: block;`, ce qui explique la différence de mise en page observée. -<p>Pour le reste de la leçon, nous ne parlerons plus que du <strong>type de positionnement extérieur</strong>.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}} -<h2 id="what_is_the_css_box_model">Qu'est-ce que le modèle de boîte CSS ?</h2> +Nous avons dans cet exemple le comportement typique d'un élément en ligne (`inline`), observant chacune des règles énoncées plus haut : l'élément `<span>` du premier paragraphe ne force pas de retour à la ligne et se place à la suite - _en ligne_ donc - des autres éléments. -<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la <em>marge</em>, la <em>bordure</em>, le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p> +Nous avons en suite un élément `<ul>` dont la propriété de positionnement est `display: inline-flex;`, ce qui fait du `<ul>` une boîte en ligne, contenant des éléments de liste (`<li>`) dipsosés en "flex". -<h3 id="parts_of_a_box">Les composants d'une boîte</h3> +Pour finir, nous avons deux paragraphes, tous deux définis en `display: inline;`. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc. -<p>Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :</p> +**Dans cet exemple, nous vous invitons à passer de `display: inline;` à `display: block;` ou encore de `display: inline-flex;` à `display: flex;` pour observer les modifications apportées par ces modes de positionnement.** -<ul> - <li><strong>La boîte de contenu </strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a>.</li> - <li><strong>La boîte de <i lang="en">padding</i></strong> <strong>(marge intérieure) </strong>: Le <i lang="en">padding</i> (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et ses autres propriétés connexes.</li> - <li><strong>La boîte de bordure </strong>: La bordure englobe le contenu et le <i lang="en">padding</i> pour former une bordure. Sa taille et son style sont paramétrés par la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> et ses propriétés sous-jacentes.</li> - <li><strong>La boîte de marge </strong>: La marge est la couche la plus à l'extérieur, englobant le contenu, le <i lang="en">padding</i> et la bordure. Comme le <i lang="en">padding</i>, il s'agit d'une zone vierge d'espacement mais qui est cette fois située à l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et ses autres propriétés connexes.</li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} -<p>Le schéma ci-dessous montre la structure de ces différentes couches:</p> +Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété `display` qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page. -<p><img alt="Diagramme du modèle de boîte" src="box-model.png"></p> +Pour le reste de la leçon, nous ne parlerons plus que du **type de positionnement extérieur**. -<h3 id="the_standard_css_box_model">Le modèle de boîte CSS standard</h3> +## Qu'est-ce que le modèle de boîte CSS ? -<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du <i lang="en">padding</i> et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p> +Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la _marge_, la _bordure_, le _padding_ (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif. -<p>En prenant une boîte définie avec les valeurs suivantes de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code> :</p> +### Les composants d'une boîte -<pre class="brush: css">.box { +Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant : + +- **La boîte de contenu** : Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height). +- **La boîte de <i lang="en">padding</i>** **(marge intérieure)** : Le + + <i lang="en">padding</i> + + (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété [`padding`](/fr/docs/Web/CSS/padding) et ses autres propriétés connexes. + +- **La boîte de bordure** : La bordure englobe le contenu et le + + <i lang="en">padding</i> + + pour former une bordure. Sa taille et son style sont paramétrés par la propriété [`border`](/fr/docs/Web/CSS/border) et ses propriétés sous-jacentes. + +- **La boîte de marge** : La marge est la couche la plus à l'extérieur, englobant le contenu, le + + <i lang="en">padding</i> + + et la bordure. Comme le + + <i lang="en">padding</i> + + , il s'agit d'une zone vierge d'espacement mais qui est cette fois située à l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être contrôlée sur chaque côté en utilisant la propriété [`margin`](/fr/docs/Web/CSS/margin) et ses autres propriétés connexes. + +Le schéma ci-dessous montre la structure de ces différentes couches: + + + +### Le modèle de boîte CSS standard + +Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (`width`) et de hauteur (`height`), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du <i lang="en">padding</i> et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans `width` et `height` pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous. + +En prenant une boîte définie avec les valeurs suivantes de `width`, `height`, `margin`, `border` et `padding` : + +```css +.box { width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black; } -</pre> +``` -<p>L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de <code>padding</code> et de <code>border</code> (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de <code>width</code> et de <code>height</code>.</p> +L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de `padding` et de `border` (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de `width` et de `height`. -<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard." src="standard-box-model.png"></p> + -<div class="note"> -<p><strong>Note :</strong> La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p> -</div> +> **Note :** La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge. -<h3 id="the_alternative_css_box_model">Le modèle de boîte CSS alternatif</h3> +### Le modèle de boîte CSS alternatif -<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du <i lang="en">padding</i> aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le <i lang="en">padding</i> et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du <i lang="en">padding</i> et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px.</p> +À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du <i lang="en">padding</i> aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur **totale** de la boîte en comprenant le contenu, le <i lang="en">padding</i> et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du <i lang="en">padding</i> et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px. -<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte alternatif." src="alternate-box-model.png"></p> + -<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte de la bordure</strong> comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p> +Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété `box-sizing: border-box;` sur notre boîte. Cela revient à demander au navigateur de considérer la **boîte de la bordure** comme la zone d'effet de `width` et `height`, et non la boîte du contenu comme dans le modèle standard ! -<pre class="brush: css">.box { +```css +.box { box-sizing: border-box; -} </pre> +} +``` -<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code><html></code> et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p> +Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant `box-sizing` sur l'élément `<html>` et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (`inherit`). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de [l'article des Astuces CSS sur box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/). -<pre class="brush: css">html { +```css +html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; -}</pre> +} +``` + +> **Note :** Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle ! + +## Manipuler les modèles de boîte -<div class="note"> -<p><strong>Note :</strong> Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p> -</div> +Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe `.box` qui leur confère les mêmes valeurs pour les propriétés `width`, `height`, `margin`, `border` et `padding`. La seule différence est que la seconde boîte utilise le modèle alternatif. -<h2 id="playing_with_box_models">Manipuler les modèles de boîte</h2> +**Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe `.alternate`) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?** -<p>Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe <code>.box</code> qui leur confère les mêmes valeurs pour les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. La seule différence est que la seconde boîte utilise le modèle alternatif.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} -<p><strong>Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe <code>.alternate</code>) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?</strong></p> +> **Note :** vous pouvez trouver une solution [ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model). -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> +### Utiliser les outils de développement pour voir le modèle de boîte -<div class="note"> -<p><strong>Note :</strong> vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p> -</div> +Les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, <i lang="en">padding</i>, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire ! -<h3 id="use_browser_devtools_to_view_the_box_model">Utiliser les outils de développement pour voir le modèle de boîte</h3> + -<p>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, <i lang="en">padding</i>, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p> +## Marges, remplissages (paddings), et bordures -<p><img alt="Inspecter le modèle de boîte d'un élément grâce aux outils de développement de Firefox" src="box-model-devtools.png"></p> +Nous avons déjà rencontré ensemble les propriétés [`margin`](/fr/docs/Web/CSS/margin), [`padding`](/fr/docs/Web/CSS/padding) et [`border`](/fr/docs/Web/CSS/border), ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des **raccourcis** qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation. -<h2 id="margins_padding_and_borders">Marges, remplissages (paddings), et bordures</h2> +Regardons de plus près ces nouvelles propriétés. -<p>Nous avons déjà rencontré ensemble les propriétés <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation.</p> +### Les marges -<p>Regardons de plus près ces nouvelles propriétés.</p> +La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée. -<h3 id="Margin">Les marges</h3> +On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété [`margin`](/fr/docs/Web/CSS/margin), ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes : -<p>La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée.</p> +- [`margin-top`](/fr/docs/Web/CSS/margin-top) +- [`margin-right`](/fr/docs/Web/CSS/margin-right) +- [`margin-bottom`](/fr/docs/Web/CSS/margin-bottom) +- [`margin-left`](/fr/docs/Web/CSS/margin-left) -<p>On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes :</p> +**Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de `margin` pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.** -<ul> - <li><a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a></li> - <li><a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a></li> - <li><a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a></li> - <li><a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a></li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}} -<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de <code>margin</code> pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.</strong></p> +#### La fusion des marges -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}}</p> +Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux. -<h4 id="margin_collapsing">La fusion des marges</h4> +Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un `margin-bottom` de 50 pixels. Le second paragraphe a un `margin-top` de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges. -<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux.</p> +**Vous pouvez tester cette propriété par vous-même en modifiant la propriété `margin-top` du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété `margin-bottom` du premier paragraphe.** -<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}} -<p><strong>Vous pouvez tester cette propriété par vous-même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété <code>margin-bottom</code> du premier paragraphe.</strong></p> +Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée [Maîtriser la fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}}</p> +### Les bordures -<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p> +La bordure se situe entre la marge et le remplissage (<i lang="en">padding</i>) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (`width`) et la hauteur (`height`) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible. -<h3 id="borders">Les bordures</h3> +Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure. -<p>La bordure se situe entre la marge et le remplissage (<i lang="en">padding</i>) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible.</p> +Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété `border`. -<p>Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure.</p> +Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser : -<p>Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété <code>border</code>.</p> +- [`border-top`](/fr/docs/Web/CSS/border-top) +- [`border-right`](/fr/docs/Web/CSS/border-right) +- [`border-bottom`](/fr/docs/Web/CSS/border-bottom) +- [`border-left`](/fr/docs/Web/CSS/border-left) -<p>Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :</p> +Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes : -<ul> - <li><a href="/fr/docs/Web/CSS/border-top"><code>border-top</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right"><code>border-right</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left"><code>border-left</code></a></li> -</ul> +- [`border-width`](/fr/docs/Web/CSS/border-width) +- [`border-style`](/fr/docs/Web/CSS/border-style) +- [`border-color`](/fr/docs/Web/CSS/border-color) -<p>Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :</p> +Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés : -<ul> - <li><a href="/fr/docs/Web/CSS/border-width"><code>border-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-style"><code>border-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-color"><code>border-color</code></a></li> -</ul> +- [`border-top-width`](/fr/docs/Web/CSS/border-top-width) +- [`border-top-style`](/fr/docs/Web/CSS/border-top-style) +- [`border-top-color`](/fr/docs/Web/CSS/border-top-color) +- [`border-right-width`](/fr/docs/Web/CSS/border-right-width) +- [`border-right-style`](/fr/docs/Web/CSS/border-right-style) +- [`border-right-color`](/fr/docs/Web/CSS/border-right-color) +- [`border-bottom-width`](/fr/docs/Web/CSS/border-bottom-width) +- [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style) +- [`border-bottom-color`](/fr/docs/Web/CSS/border-bottom-color) +- [`border-left-width`](/fr/docs/Web/CSS/border-left-width) +- [`border-left-style`](/fr/docs/Web/CSS/border-left-style) +- [`border-left-color`](/fr/docs/Web/CSS/border-left-color) -<p>Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :</p> +**Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.** -<ul> - <li><a href="/fr/docs/Web/CSS/border-top-width"><code>border-top-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-top-style"><code>border-top-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-top-color"><code>border-top-color</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right-width"><code>border-right-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right-style"><code>border-right-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-right-color"><code>border-right-color</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left-width"><code>border-left-width</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left-style"><code>border-left-style</code></a></li> - <li><a href="/fr/docs/Web/CSS/border-left-color"><code>border-left-color</code></a></li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}} -<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p> +### Le padding (remplissage) -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}</p> +Le <i lang="en">padding</i> (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un <i lang="en">padding</i>, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la <i lang="en">padding</i>, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure. -<h3 id="padding">Le padding (remplissage)</h3> +On peut une fois de plus configurer le <i lang="en">padding</i> pour tous les côtés à la fois à l'aide de la propriété [`padding`](/fr/docs/Web/CSS/padding), ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes : -<p>Le <i lang="en">padding</i> (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un <i lang="en">padding</i>, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la <i lang="en">padding</i>, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure.</p> +- [`padding-top`](/fr/docs/Web/CSS/padding-top) +- [`padding-right`](/fr/docs/Web/CSS/padding-right) +- [`padding-bottom`](/fr/docs/Web/CSS/padding-bottom) +- [`padding-left`](/fr/docs/Web/CSS/padding-left) -<p>On peut une fois de plus configurer le <i lang="en">padding</i> pour tous les côtés à la fois à l'aide de la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p> +**Si vous modifiez les valeurs du <i lang="en">padding</i> sur la classe `.box` de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.** -<ul> - <li><a href="/fr/docs/Web/CSS/padding-top"><code>padding-top</code></a></li> - <li><a href="/fr/docs/Web/CSS/padding-right"><code>padding-right</code></a></li> - <li><a href="/fr/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li> - <li><a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a></li> -</ul> +**Tentez aussi de modifier la valeur du <i lang="en">padding</i> dans la classe `.container`, cela aura pour effet d'espacer le conteneur et la boîte. Le <i lang="en">padding</i> peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.** -<p><strong>Si vous modifiez les valeurs du <i lang="en">padding</i> sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p> +{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}} -<p><strong>Tentez aussi de modifier la valeur du <i lang="en">padding</i> dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le <i lang="en">padding</i> peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.</strong></p> +## Le modèle de boîte et la disposition en ligne -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}}</p> +Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément `<span>` par exemple ? -<h2 id="the_box_model_and_inline_boxes">Le modèle de boîte et la disposition en ligne</h2> +Dans l'exemple ci-après, nous avons un élément `<span>` inclus dans un paragraphe auquel on a défini les propriétés `width`, `height`, `margin`, `border` et `padding`. Vous pouvez alors observer que les paramètres `width` et `height` sont totalement ignorés. Les propriétés de `margin`, `padding` et `border` sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe. -<p>Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <code><span></code> par exemple ?</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}} -<p>Dans l'exemple ci-après, nous avons un élément <code><span></code> inclus dans un paragraphe auquel on a défini les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. Vous pouvez alors observer que les paramètres <code>width</code> et <code>height</code> sont totalement ignorés. Les propriétés de <code>margin</code>, <code>padding</code> et <code>border</code> sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.</p> +## le positionnement display: inline-block -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}}</p> +Il existe une valeur spéciale pour la propriété `display`, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés `width` et `height`, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc). -<h2 id="using_display_inline-block">le positionnement display: inline-block</h2> +C'est la solution apportée par la disposition `display: inline-block;` qui emprunte des règles des deux dispositions pour satisfaire ces motivations : -<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p> +- La hauteur (`height`) et la largeur (`width`) seront appliqués sur l'élément (et non ignorés). +- Les propriétés `padding`, `margin` et `border` repousseront bien les éléments alentours. -<p>C'est la solution apportée par la disposition <code>display: inline-block;</code> qui emprunte des règles des deux dispositions pour satisfaire ces motivations :</p> +Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés `width` et `height` le définissent ainsi. -<ul> - <li>La hauteur (<code>height</code>) et la largeur (<code>width</code>) seront appliqués sur l'élément (et non ignorés).</li> - <li>Les propriétés <code>padding</code>, <code>margin</code> et <code>border</code> repousseront bien les éléments alentours.</li> -</ul> +**Dans cet exemple, nous avons ajouté la propriété `display: inline-block;` à notre élément `<span>`. Changez donc la valeur en `display: block;` ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.** -<p>Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés <code>width</code> et <code>height</code> le définissent ainsi.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}} -<p><strong>Dans cet exemple, nous avons ajouté la propriété <code>display: inline-block;</code> à notre élément <code><span></code>. Changez donc la valeur en <code>display: block;</code> ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.</strong></p> +Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le `padding`. l'élément `<a>` est par défaut "en ligne", comme un `<span>`, mais vous pouvez alors utiliser `display: inline-block;` pour permettre au <i lang="en">padding</i> d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur. -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}}</p> +Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un <i lang="en">padding</i> aux liens `<a>` pour pouvoir modifier la couleur de fond (`background-color`) au survol du curseur. Le <i lang="en">padding</i> semble se superposer sur la bordure de l'élément `<ul>`. Ceci est dû au fait que `<a>` est un élément en ligne. -<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code><a></code> est par défaut "en ligne", comme un <code><span></code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au <i lang="en">padding</i> d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p> +**Ajoutez la propriété `display: inline-block;` en utilisant le sélecteur `.links-list a` pour voir le respect du <i lang="en">padding</i> régler ce problème.** -<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un <i lang="en">padding</i> aux liens <code><a></code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le <i lang="en">padding</i> semble se superposer sur la bordure de l'élément <code><ul></code>. Ceci est dû au fait que <code><a></code> est un élément en ligne.</p> +{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} -<p><strong>Ajoutez la propriété <code>display: inline-block;</code> en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du <i lang="en">padding</i> régler ce problème.</strong></p> +## Résumé -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> +À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici ! -<h2 id="summary">Résumé</h2> +Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante. -<p>À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}} -<p>Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante.</p> +## Dans ce module -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="in_this_module">Dans ce module</h2> + - [Sélecteurs de classe, de type et d'identifiant](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li>Le modèle de boîte</li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> - </ol> +3. Le modèle de boîte +4. [Arrières-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gérer la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Le dépassement du contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Dimensionnement des objets en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias, et formulaires](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mettre en forme les tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Déboguer CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser son code CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.md b/files/fr/learn/css/building_blocks/values_and_units/index.md index 7542b9e2e5..a803e5340c 100644 --- a/files/fr/learn/css/building_blocks/values_and_units/index.md +++ b/files/fr/learn/css/building_blocks/values_and_units/index.md @@ -4,391 +4,299 @@ slug: Learn/CSS/Building_blocks/Values_and_units translation_of: Learn/CSS/Building_blocks/Values_and_units original_slug: Apprendre/CSS/Building_blocks/Values_and_units --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}} -<p>Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes.</p> +Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction à HTML</a + >), et une idée de + <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" + >Comment fonctionne CSS</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre les différents types de valeurs et d'unités utilisés dans les + propriétés CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_quune_valeur_CSS">Qu'est-ce qu'une valeur CSS ?</h2> +## Qu'est-ce qu'une valeur CSS ? -<p>Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code> ou <code><a href="/fr/docs/Web/CSS/length"><length></a></code>. Quand vous voyez le type de valeur <code><color></code>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>.</p> +Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que [`<color>`](/fr/docs/Web/CSS/color_value) ou [`<length>`](/fr/docs/Web/CSS/length). Quand vous voyez le type de valeur `<color>`, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de [`<color>`](/fr/docs/Web/CSS/color_value). -<div class="note"> -<p><strong>Note :</strong> Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p> -</div> +> **Note :** Vous verrez également des valeurs CSS appelées _types de données_. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme _valeur_ se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser. -<div class="note"> -<p><strong>Note :</strong> Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, comparée au type de données <a href="/fr/docs/Web/CSS/color_value"><color></a>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p> -</div> +> **Note :** Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété [`color`](/fr/docs/Web/CSS/color), comparée au type de données [\<color>](/fr/docs/Web/CSS/color_value)). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents. -<p>Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction <code>rgb()</code> :</p> +Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction `rgb()` : -<pre class="brush: css ">h1 { +```css +h1 { color: black; background-color: rgb(197,93,161); -} -</pre> +} +``` -<p>Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <code><color></code> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions <code>rgb()</code>, etc. Vous pouvez utiliser <em>n'importe quelle</em> valeur <code><color></code> disponible, en supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.</p> +Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez `<color>` comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions `rgb()`, etc. Vous pouvez utiliser _n'importe quelle_ valeur `<color>` disponible, en supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page [`<color>`](/fr/docs/Web/CSS/color_value), vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support. -<p>Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.</p> +Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles. +## Nombres, longueurs et pourcentages -<h2 id="numbers_lengths_and_percentages">Nombres, longueurs et pourcentages</h2> +Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types qui suivent sont classés comme numériques : -<p>Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types qui suivent sont classés comme numériques :</p> +| Type de donnée | Description | +| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [`<integer>`](/fr/docs/Web/CSS/integer) | Une valeur de type `<integer>` est un nombre entier comme `1024` ou `-55`. | +| [`<number>`](/fr/docs/Web/CSS/number) | Une valeur de type `<number>` représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : `0.255`, `128`, ou `-1.2`. | +| [`<dimension>`](/fr/docs/Web/CSS/dimension) | Une valeur de type `<dimension>` est une valeur de type `<number>` à laquelle est attachée une unité. Par exemple : `45deg`, `5s`, ou `10px`. `<dimension>` est une catégorie de type qui inclut les types [`<length>`](/fr/docs/Web/CSS/length), [`<angle>`](/fr/docs/Web/CSS/angle), [`<time>`](/fr/docs/Web/CSS/time), et [`<resolution>`](/fr/docs/Web/CSS/resolution). | +| [`<percentage>`](/fr/docs/Web/CSS/percentage) | Une valeur de type `<percentage>` représente une fraction relative à une autre valeur. Par exemple : `50%`. Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent. | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Type de donnée</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/fr/docs/Web/CSS/integer"><integer></a></code></td> - <td>Une valeur de type <code><integer></code> est un nombre entier comme <code>1024</code> ou <code>-55</code>.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/CSS/number"><number></a></code></td> - <td>Une valeur de type <code><number></code> représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : <code>0.255</code>, <code>128</code>, ou <code>-1.2</code>.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/CSS/dimension"><dimension></a></code></td> - <td>Une valeur de type <code><dimension></code> est une valeur de type <code><number></code> à laquelle est attachée une unité. Par exemple : <code>45deg</code>, <code>5s</code>, ou <code>10px</code>. <code><dimension></code> est une catégorie de type qui inclut les types <code><a href="/fr/docs/Web/CSS/length"><length></a></code>, <code><a href="/fr/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/fr/docs/Web/CSS/time"><time></a></code>, et <code><a href="/fr/docs/Web/CSS/resolution"><resolution></a></code>.</td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/CSS/percentage"><percentage></a></code></td> - <td>Une valeur de type <code><percentage></code> représente une fraction relative à une autre valeur. Par exemple : <code>50%</code>. Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent.</td> - </tr> - </tbody> -</table> +### Longueurs -<h3 id="lengths">Longueurs</h3> +Le type numérique que vous rencontrerez le plus souvent est le type `<length>`. Par exemple : `10px` (pixels) ou `30em`. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront. -<p>Le type numérique que vous rencontrerez le plus souvent est le type <code><length></code>. Par exemple : <code>10px</code> (pixels) ou <code>30em</code>. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront.</p> +#### Unités de longueur absolue -<h4 id="absolute_length_units">Unités de longueur absolue</h4> +La liste qui suit contient uniquement des unités de longueur **absolue**. Ces quantités ne sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme constante. -<p>La liste qui suit contient uniquement des unités de longueur <strong>absolue</strong>. Ces quantités ne sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme constante.</p> +| Unité | Nom | Équivalent à | +| ----- | -------------------------------- | -------------------- | +| `cm` | Centimètres | 1cm = 38px = 25/64in | +| `mm` | Millimètres | 1mm = 1/10th of 1cm | +| `Q` | Quarts de millimètre | 1Q = 1/40th of 1cm | +| `in` | Pouces (<i lang="en">inches</i>) | 1in = 2.54cm = 96px | +| `pc` | Picas | 1pc = 1/6e de 1in | +| `pt` | Points | 1pt = 1/72e de 1in | +| `px` | Pixels | 1px = 1/96th de 1in | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unité</th> - <th scope="col">Nom</th> - <th scope="col">Équivalent à</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cm</code></td> - <td>Centimètres</td> - <td>1cm = 38px = 25/64in</td> - </tr> - <tr> - <td><code>mm</code></td> - <td>Millimètres</td> - <td>1mm = 1/10th of 1cm</td> - </tr> - <tr> - <td><code>Q</code></td> - <td>Quarts de millimètre</td> - <td>1Q = 1/40th of 1cm</td> - </tr> - <tr> - <td><code>in</code></td> - <td>Pouces (<i lang="en">inches</i>)</td> - <td>1in = 2.54cm = 96px</td> - </tr> - <tr> - <td><code>pc</code></td> - <td>Picas</td> - <td>1pc = 1/6e de 1in</td> - </tr> - <tr> - <td><code>pt</code></td> - <td>Points</td> - <td>1pt = 1/72e de 1in</td> - </tr> - <tr> - <td><code>px</code></td> - <td>Pixels</td> - <td>1px = 1/96th de 1in</td> - </tr> - </tbody> -</table> +La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas `cm` (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est `px` (pixels). -<p>La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas <code>cm</code> (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est <code>px</code> (pixels).</p> +#### Unités de longueur relative -<h4 id="relative_length_units">Unités de longueur relative</h4> +Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (<i lang="en">viewport</i>). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit. -<p>Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (<i lang="en">viewport</i>). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit.</p> +| Unité | Relative à | +| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `em` | Pour les propriétés typographiques comme [`font-size`](/fr/docs/Web/CSS/font-size), relative à la taille de la police de l'élément parent. Pour les autres propriétés comme [`width`](/fr/docs/Web/CSS/width), relative à la taille de la police de l'élément; | +| `ex` | La hauteur d'x de la police de l'élément. | +| `ch` | La [chasse/avance](<https://fr.wikipedia.org/wiki/Chasse_(typographie)>) du glyphe « 0 » pour la police de l'élément. | +| `rem` | La taille de la police pour l'élément racine. | +| `lh` | La hauteur de ligne pour l'élément. | +| `vw` | 1% de la largeur du <i lang="en">viewport</i> (la zone d'affichage). | +| `vh` | 1% de la hauteur du <i lang="en">viewport</i> (la zone d'affichage). | +| `vmin` | 1% de la plus petite dimension du <i lang="en">viewport</i> (la zone d'affichage). | +| `vmax` | 1% de la plus grande dimension du <i lang="en">viewport</i> (la zone d'affichage). | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unité</th> - <th scope="col">Relative à</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>em</code></td> - <td>Pour les propriétés typographiques comme <code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, relative à la taille de la police de l'élément parent. Pour les autres propriétés comme <code><a href="/fr/docs/Web/CSS/width">width</a></code>, relative à la taille de la police de l'élément;</td> - </tr> - <tr> - <td><code>ex</code></td> - <td>La hauteur d'x de la police de l'élément.</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>La <a href="https://fr.wikipedia.org/wiki/Chasse_(typographie)">chasse/avance</a> du glyphe « 0 » pour la police de l'élément.</td> - </tr> - <tr> - <td><code>rem</code></td> - <td>La taille de la police pour l'élément racine.</td> - </tr> - <tr> - <td><code>lh</code></td> - <td>La hauteur de ligne pour l'élément.</td> - </tr> - <tr> - <td><code>vw</code></td> - <td>1% de la largeur du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - <tr> - <td><code>vh</code></td> - <td>1% de la hauteur du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - <tr> - <td><code>vmin</code></td> - <td>1% de la plus petite dimension du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - <tr> - <td><code>vmax</code></td> - <td>1% de la plus grande dimension du <i lang="en">viewport</i> (la zone d'affichage).</td> - </tr> - </tbody> -</table> +#### Exploration d'un exemple + +Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété [`width`](/fr/docs/Web/CSS/width) définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements. -<h4 id="exploring_an_example">Exploration d'un exemple</h4> +La deuxième boîte a sa largeur définie avec l'unité `vw` (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du <i lang="en">viewport</i>. Ainsi, `10vw` correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir [l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre](https://mdn.github.io/css-examples/learn/values-units/length.html). -<p>Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements.</p> +La troisième boîte utilise les unités `em`. Ces unités sont relatives à la taille de la police. On a défini une taille de police de `1em` sur l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) englobant et qui a la classe `.wrapper`. Passez cette valeur à `1.5em` et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police. -<p>La deuxième boîte a sa largeur définie avec l'unité <code>vw</code> (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du <i lang="en">viewport</i>. Ainsi, <code>10vw</code> correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément <code><a href="/fr/docs/Web/HTML/Element/iframe"><iframe></a></code>, cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre</a>.</p> +Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne. -<p>La troisième boîte utilise les unités <code>em</code>. Ces unités sont relatives à la taille de la police. On a défini une taille de police de <code>1em</code> sur l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> englobant et qui a la classe <code>.wrapper</code>. Passez cette valeur à <code>1.5em</code> et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}} -<p>Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne.</p> +#### ems et rems -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> +`em` et `rem` sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme [la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text) ou [les dispositions CSS](/fr/docs/Learn/CSS/CSS_layout). L'exemple qui suit fournit une démonstration. -<h4 id="ems_and_rems">ems et rems</h4> +Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe _ems_ et que le second utilise une classe _rems_. -<p><code>em</code> et <code>rem</code> sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme <a href="/fr/docs/Learn/CSS/Styling_text">la mise en forme du texte</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions CSS</a>. L'exemple qui suit fournit une démonstration.</p> +Pour commencer, on définit la taille de la police à 16px sur l'élément `<html>`. -<p>Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe <em>ems</em> et que le second utilise une classe <em>rems</em>.</p> +**Pour récapituler, l'unité `em` signifie « la taille de police de l'élément parent »** pour ce qui concerne la typographie. Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `ems` prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de `1.3em` soit 1,3 fois plus grand que la taille de police pour l'élément parent. -<p>Pour commencer, on définit la taille de la police à 16px sur l'élément <code><html></code>.</p> +**Pour récapituler, l'unité `rem` signifie « la taille de police de l'élément racine »** (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `rems` prendront leur taille à partir de l'élément racine (`<html>`). Cela signifie que les niveaux successifs ne gagneront pas en largeur. -<p><strong>Pour récapituler, l'unité <code>em</code> signifie « la taille de police de l'élément parent »</strong> pour ce qui concerne la typographie. Les éléments <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> à l'intérieur de <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et qui ont un attribut <code>class</code> avec <code>ems</code> prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de <code>1.3em</code> soit 1,3 fois plus grand que la taille de police pour l'élément parent.</p> +Toutefois, si vous modifier la taille de la police avec `font-size` pour `<html>` dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent `rem` que celles qui utilisent `em`. -<p><strong>Pour récapituler, l'unité <code>rem</code> signifie « la taille de police de l'élément racine »</strong> (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> à l'intérieur de <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et qui ont un attribut <code>class</code> avec <code>rems</code> prendront leur taille à partir de l'élément racine (<code><html></code>). Cela signifie que les niveaux successifs ne gagneront pas en largeur.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} -<p>Toutefois, si vous modifier la taille de la police avec <code>font-size</code> pour <code><html></code> dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent <code>rem</code> que celles qui utilisent <code>em</code>.</p> +### Pourcentages -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> +Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété `font-size` d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de `font-size` de l'élément parent. Si vous utilisez un pourcentage pour `width`, la valeur obtenue sera le pourcentage de la valeur de `width` pour l'élément parent. -<h3 id="percentages">Pourcentages</h3> +Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px. -<p>Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété <code>font-size</code> d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de <code>font-size</code> de l'élément parent. Si vous utilisez un pourcentage pour <code>width</code>, la valeur obtenue sera le pourcentage de la valeur de <code>width</code> pour l'élément parent.</p> +La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre ! -<p>Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px.</p> +**Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.** -<p>La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre !</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} -<p><strong>Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.</strong></p> +Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque élément `<li>` a `font-size` avec 80%, ainsi les éléments de listes imbriqués deviennent de plus en plus petits en héritant de la taille de leur parent. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> +{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} -<p>Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque élément <code><li></code> a <code>font-size</code> avec 80%, ainsi les éléments de listes imbriqués deviennent de plus en plus petits en héritant de la taille de leur parent.</p> +On notera que, bien que de nombreuses propriétés acceptent une longueur ou un pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs autorisées incluent le type [`<length-percentage>`](/fr/docs/Web/CSS/length-percentage), on peut utiliser une longueur ou un pourcentage. Si les valeurs autorisées n'incluent que `<length>`, il n'est pas possible d'utiliser un pourcentage. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> +### Nombres -<p>On notera que, bien que de nombreuses propriétés acceptent une longueur ou un pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs autorisées incluent le type <code><a href="/fr/docs/Web/CSS/length-percentage"><length-percentage></a></code>, on peut utiliser une longueur ou un pourcentage. Si les valeurs autorisées n'incluent que <code><length></code>, il n'est pas possible d'utiliser un pourcentage.</p> +Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par exemple, `opacity` qui contrôle l'opacité d'un élément. Cette propriété acceptera une valeur numérique (sans unité) comprise entre `0` (transparence complète) et `1` (complètement opaque). -<h3 id="numbers">Nombres</h3> +**Dans l'exemple qui suit, essayez de modifier la valeur de la propriété `opacity` en utilisant différentes valeurs décimales entre `0` et `1` afin de voir comment la boîte et son contenu changent en opacité.** -<p>Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par exemple, <code>opacity</code> qui contrôle l'opacité d'un élément. Cette propriété acceptera une valeur numérique (sans unité) comprise entre <code>0</code> (transparence complète) et <code>1</code> (complètement opaque).</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} -<p><strong>Dans l'exemple qui suit, essayez de modifier la valeur de la propriété <code>opacity</code> en utilisant différentes valeurs décimales entre <code>0</code> et <code>1</code> afin de voir comment la boîte et son contenu changent en opacité.</strong></p> +> **Note :** Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> +## Couleur -<div class="notecard note"> -<p><strong>Note :</strong> Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour.</p> -</div> +Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur. -<h2 id="color">Couleur</h2> +Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS. -<p>Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur.</p> +> **Note :** Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes. -<p>Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.</p> +### Mots-clés pour les couleurs -<div class="notecard note"> -<p><strong>Note :</strong> Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.</p> -</div> +Dans la plupart des exemples de cette section d'apprentissage ou à d'autres endroits sur MDN, vous verrez des mots-clés utilisés pour définir des couleurs : il s'agit d'une méthode simple et compréhensible pour indiquer une couleur. Il existe de nombreux mots-clés, certains avec des noms plutôt amusants. Vous pouvez consulter la liste complète sur la page pour le type de valeur [`<color>`](/fr/docs/Web/CSS/color_value). -<h3 id="color_keywords">Mots-clés pour les couleurs</h3> +**Essayez de manipuler les différentes valeurs de couleur dans l'exemple ci-après afin de mieux comprendre comment celles-ci fonctionnent.** -<p>Dans la plupart des exemples de cette section d'apprentissage ou à d'autres endroits sur MDN, vous verrez des mots-clés utilisés pour définir des couleurs : il s'agit d'une méthode simple et compréhensible pour indiquer une couleur. Il existe de nombreux mots-clés, certains avec des noms plutôt amusants. Vous pouvez consulter la liste complète sur la page pour le type de valeur <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>.</p> +### Valeurs RGB hexadécimales -<p><strong>Essayez de manipuler les différentes valeurs de couleur dans l'exemple ci-après afin de mieux comprendre comment celles-ci fonctionnent.</strong></p> +Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : `0123456789abcdef`). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles. -<h3 id="hexadecimal_rgb_values">Valeurs RGB hexadécimales</h3> +Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette. -<p>Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : <code>0123456789abcdef</code>). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} -<p>Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette.</p> +**Là encore, essayez de modifier les valeurs pour voir comment les couleurs varient.** -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> +### Les valeurs RGB et RGBA -<p><strong>Là encore, essayez de modifier les valeurs pour voir comment les couleurs varient.</strong></p> +La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction `rgb()` à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple. -<h3 id="rgb_and_rgba_values">Les valeurs RGB et RGBA</h3> +Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB : -<p>La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction <code>rgb()</code> à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} -<p>Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB :</p> +Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de `0` pour le canal alpha, la couleur sera complètement transparente tandis qu'avec `1`, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> +> **Note :** Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété [`opacity`](/fr/docs/Web/CSS/opacity) dont nous avons parlé auparavant. Lorsqu'on utilise `opacity`, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque. -<p>Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de <code>0</code> pour le canal alpha, la couleur sera complètement transparente tandis qu'avec <code>1</code>, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.</p> +Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible. -<div class="notecard note"> -<p><strong>Note :</strong> Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> dont nous avons parlé auparavant. Lorsqu'on utilise <code>opacity</code>, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.</p> -</div> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}} -<p>Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.</p> +**Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.** -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> +> **Note :** Avec la spécification <i lang="en">CSS Colors Level 4</i>, `rgba()` est un alias pour `rgb()` et `hsla()` est un alias pour `hsl()` (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions `rgba()` à des fonctions `rgb()` pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies. -<p><strong>Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.</strong></p> +### Valeurs HSL et HSLA -<div class="note"> -<p><strong>Note :</strong> Avec la spécification <i lang="en">CSS Colors Level 4</i>, <code>rgba()</code> est un alias pour <code>rgb()</code> et <code>hsla()</code> est un alias pour <code>hsl()</code> (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions <code>rgba()</code> à des fonctions <code>rgb()</code> pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.</p> -</div> +Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction `hsl()` prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment : -<h3 id="hsl_and_hsla_values">Valeurs HSL et HSLA</h3> +- **Teinte (<i lang="en">hue</i>)** : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs. +- **Saturation** : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète. +- **Luminosité** : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche). -<p>Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction <code>hsl()</code> prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment :</p> +On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL : -<ul> - <li><strong>Teinte (<i lang="en">hue</i>)</strong> : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs.</li> - <li><strong>Saturation</strong> : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète.</li> - <li><strong>Luminosité</strong> : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche).</li> -</ul> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} -<p>On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL :</p> +À l'instar de RGBA pour RGB, il existe un équivalent HSLA à HSL qui permet aussi d'indiquer une valeur pour le canal alpha. Voici un exemple où on a converti l'exemple RGBA afin d'utiliser des couleurs HSLA. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} -<p>À l'instar de RGBA pour RGB, il existe un équivalent HSLA à HSL qui permet aussi d'indiquer une valeur pour le canal alpha. Voici un exemple où on a converti l'exemple RGBA afin d'utiliser des couleurs HSLA.</p> +Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet ! -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> +## Images -<p>Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet !</p> +Le type de valeur [`<image>`](/fr/docs/Web/CSS/image) est utilisé à chaque endroit où une image est une valeur valide. Il peut s'agir d'une image à proprement parler dans un fichier (avec une fonction `url()` qui utilisera l'adresse du fichier avec l'image) ou d'un dégradé. -<h2 id="images">Images</h2> +Voici un exemple où on utilise une image et un dégradé pour la propriété CSS `background-image`. -<p>Le type de valeur <code><a href="/fr/docs/Web/CSS/image"><image></a></code> est utilisé à chaque endroit où une image est une valeur valide. Il peut s'agir d'une image à proprement parler dans un fichier (avec une fonction <code>url()</code> qui utilisera l'adresse du fichier avec l'image) ou d'un dégradé.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} -<p>Voici un exemple où on utilise une image et un dégradé pour la propriété CSS <code>background-image</code>.</p> +> **Note :** il existe d'autres valeurs possibles pour le type `<image>`, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données [`<image>`](/fr/docs/Web/CSS/image) si vous voulez en savoir plus. -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> +## Position -<div class="notecard note"> -<p><strong>Note :</strong> il existe d'autres valeurs possibles pour le type <code><image></code>, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données <code><a href="/fr/docs/Web/CSS/image"><image></a></code> si vous voulez en savoir plus.</p> -</div> +Le type de valeur [`<position>`](/fr/docs/Web/CSS/position_value) représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via [`background-position`](/fr/docs/Web/CSS/background-position)). Ces valeurs peuvent être indiquées avec des mots-clés comme `top`, `left`, `bottom`, `right`, et `center` afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte. -<h2 id="position">Position</h2> +Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera `center` par défaut. -<p>Le type de valeur <code><a href="/fr/docs/Web/CSS/position_value"><position></a></code> représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via <code><a href="/fr/docs/Web/CSS/background-position">background-position</a></code>). Ces valeurs peuvent être indiquées avec des mots-clés comme <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, et <code>center</code> afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte.</p> +Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé. -<p>Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera <code>center</code> par défaut.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} -<p>Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé.</p> +**Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le conteneur.** -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> +## Chaînes de caractères et identifiants -<p><strong>Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le conteneur.</strong></p> +Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple `<color>` qui peut utiliser des mots-clés comme `red`, `black`, `rebeccapurple`, et `goldenrod`). Si on veut être plus précis, on dira que ces mots-clés sont des _identifiants_, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères. -<h2 id="strings_and_identifiers">Chaînes de caractères et identifiants</h2> +À d'autres endroits en CSS, on utilise des chaînes de caractères, comme [lorsqu'on définit du contenu généré](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after). Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré. -<p>Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple <code><color></code> qui peut utiliser des mots-clés comme <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, et <code>goldenrod</code>). Si on veut être plus précis, on dira que ces mots-clés sont des <em>identifiants</em>, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} -<p>À d'autres endroits en CSS, on utilise des chaînes de caractères, comme <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after">lorsqu'on définit du contenu généré</a>. Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré.</p> +## Functions -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> +Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : `rgb()`, `hsl()`, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, `url()` est également une fonction. -<h2 id="functions">Functions</h2> +Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS `calc()`. Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution. -<p>Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : <code>rgb()</code>, <code>hsl()</code>, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, <code>url()</code> est également une fonction.</p> +Dans le prochain exemple, on utilise `calc()` afin que la boîte soit large de `20% + 100px`. Les 20% sont calculés à partir de la largeur du conteneur parent : `.wrapper` et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise `calc()` pour indiquer au navigateur de réaliser ce calcul. -<p>Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS <code>calc()</code>. Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution.</p> +{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}} -<p>Dans le prochain exemple, on utilise <code>calc()</code> afin que la boîte soit large de <code>20% + 100px</code>. Les 20% sont calculés à partir de la largeur du conteneur parent : <code>.wrapper</code> et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise <code>calc()</code> pour indiquer au navigateur de réaliser ce calcul.</p> +## Testez vos compétences ! -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> +Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur [Testez vos compétences : valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_tasks). -<h2 id="test_your_skills!">Testez vos compétences !</h2> +## Résumé -<p>Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur <a href="/fr/docs/Learn/CSS/Building_blocks/Values_tasks">Testez vos compétences : valeurs et unités CSS</a>.</p> +Voici un rapide tour des types de valeur et unités que vous pourrez rencontrer en CSS. Vous pouvez consulter la liste exhaustive des différents types sur [la page de référence MDN sur les valeurs et unités CSS](/fr/docs/Web/CSS/CSS_Values_and_Units). Vous verrez de nombreuses types et valeurs à mesure que vous progresserez dans ces leçons. -<h2 id="summary">Résumé</h2> +La notion cruciale à garder en mémoire est que chaque propriété possède une liste de types de valeur autorisés et que chaque type de valeur possède une définition indiquant les valeurs possibles. Vous pourrez trouver toutes les informations et détails sur MDN. -<p>Voici un rapide tour des types de valeur et unités que vous pourrez rencontrer en CSS. Vous pouvez consulter la liste exhaustive des différents types sur <a href="/fr/docs/Web/CSS/CSS_Values_and_Units">la page de référence MDN sur les valeurs et unités CSS</a>. Vous verrez de nombreuses types et valeurs à mesure que vous progresserez dans ces leçons.</p> +Par exemple, comprendre le type [`<image>`](/fr/docs/Web/CSS/image) vous permettra de comprendre comment créer un dégradé de couleur. C'est utile mais ce n'est pas forcément évident de prime abord. -<p>La notion cruciale à garder en mémoire est que chaque propriété possède une liste de types de valeur autorisés et que chaque type de valeur possède une définition indiquant les valeurs possibles. Vous pourrez trouver toutes les informations et détails sur MDN.</p> +{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}} -<p>Par exemple, comprendre le type <code><a href="/fr/docs/Web/CSS/image"><image></a></code> vous permettra de comprendre comment créer un dégradé de couleur. C'est utile mais ce n'est pas forcément évident de prime abord.</p> +## Dans ce module -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> +1. [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +2. [Sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors) -<h2 id="in_this_module">Dans ce module</h2> + - [Sélecteurs de type, de classe et d'ID](/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors) + - [Sélecteurs d'attributs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) + - [Pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) + - [Combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) -<ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> -</ol> +3. [Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model) +4. [Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +5. [Gestion de différentes directions de texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) +6. [Débordements de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content) +7. [Valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +8. [Définir la taille des éléments en CSS](/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) +9. [Images, médias et éléments de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) +10. [Mise en page de tableaux](/fr/docs/Learn/CSS/Building_blocks/Styling_tables) +11. [Débogage de CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS) +12. [Organiser votre CSS](/fr/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/css_layout/flexbox/index.md b/files/fr/learn/css/css_layout/flexbox/index.md index 17a2d6e00f..bf49bc6db6 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.md +++ b/files/fr/learn/css/css_layout/flexbox/index.md @@ -16,269 +16,288 @@ tags: translation_of: Learn/CSS/CSS_layout/Flexbox original_slug: Apprendre/CSS/CSS_layout/Flexbox --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> - -<p>Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p> +Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre à utiliser le système Flexbox pour créer des mises en page web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et avoir une idée de la manière dont la CSS fonctionne (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre à utiliser le système Flexbox pour créer des mises en page + web. + </td> + </tr> + </tbody> </table> -<h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2> +## Pourquoi Flexbox ? -<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> +Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les [flotteurs (boîtes flottantes)](/fr/docs/Learn/CSS/CSS_layout/Floats) et le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants. -<p>Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :</p> +Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils : -<ul> - <li>centrer verticalement un bloc de contenu dans son parent ;</li> - <li>faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;</li> - <li>faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.</li> -</ul> +- centrer verticalement un bloc de contenu dans son parent ; +- faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ; +- faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère. -<p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p> +Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu ! -<h2 id="Voici_un_exemple_simple">Voici un exemple simple</h2> +## Voici un exemple simple -<p>Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">voir en direct ici</a> aussi.</p> +Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le [voir en direct ici](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html) aussi. -<p>Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.</p> +Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes. -<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> + -<h2 id="Détermination_des_éléments_à_disposer_en_boîtes_flexibles">Détermination des éléments à disposer en boîtes flexibles</h2> +## Détermination des éléments à disposer en boîtes flexibles -<p>Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur <code>flex</code> à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :</p> +Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur `flex` à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) : -<pre class="brush: css">section { +```css +section { display: flex; -}</pre> +} +``` -<p>Voici le résultat :</p> +Voici le résultat : -<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> + -<p>Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.</p> +Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> -</div> +> **Note :** Vous pouvez aussi définir une valeur `inline-flex` pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables. -<h2 id="Aparté_sur_le_modèle_flex">Aparté sur le modèle flex</h2> +## Aparté sur le modèle flex -<p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p> +Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes : -<p><img alt="Terminologie pour les boîtes modulables" src="termes_flex.png"></p> + -<ul> - <li>L'<strong>axe principal</strong> <strong>(main axis) </strong>est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'<strong>origine principale</strong> <strong>(main start) </strong>et la <strong>fin principale (main end)</strong>.</li> - <li>L'<strong>axe croisé </strong><strong> </strong>est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début<strong> (cross start)</strong> et la fin (<strong>cross end</strong>) de l'axe croisé.</li> - <li>L'élément parent dont la propriété est <code>display: flex</code> ({{htmlelement("section")}} dans notre exemple) est appelé le <strong>conteneur flex</strong> (<strong>flex container</strong>).</li> - <li>Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés <strong>éléments flex (flex items) </strong>(les éléments {{htmlelement("article")}}} dans notre exemple).</li> -</ul> +- L'**axe principal** **(main axis)** est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'**origine principale** **(main start)** et la **fin principale (main end)**. +- L'**axe croisé** \*\* **est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début **(cross start)** et la fin (**cross end\*\*) de l'axe croisé. +- L'élément parent dont la propriété est `display: flex` ({{htmlelement("section")}} dans notre exemple) est appelé le **conteneur flex** (**flex container**). +- Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés **éléments flex (flex items)** (les éléments {{htmlelement("article")}}} dans notre exemple). -<p>Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.</p> +Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés. -<h2 id="Colonnes_ou_lignes">Colonnes ou lignes ?</h2> +## Colonnes ou lignes ? -<p>Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à <code>row</code> : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).</p> +Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à `row` : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français). -<p>Ajoutons la déclaration suivante dans la règle :</p> +Ajoutons la déclaration suivante dans la règle : -<pre class="brush: css">flex-direction: column;</pre> +```css +flex-direction: column; +``` -<p>Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.</p> +Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> -</div> +> **Note :** Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs `row-reverse` et `column-reverse`. Expérimentez ces valeurs aussi ! -<h2 id="Enveloppement">Enveloppement</h2> +## Enveloppement -<p>Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, essayez <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">directement</a> (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :</p> +Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html), essayez [directement](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) : -<p><img alt="Débordement des éléments modulables" src="Exemple_flexbox_2.png"></p> + -<p>Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour <code>section</code> :</p> +Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour `section` : -<pre class="brush: css">flex-wrap: wrap;</pre> +```css +flex-wrap: wrap; +``` -<p>Essayons ; la disposition est bien meilleure avec cet ajout :</p> +Essayons ; la disposition est bien meilleure avec cet ajout : -<p><img alt="Conditionnement des éléments modulables" src="Exemple_flexbox_3.png">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> +Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration `flex: 200px` pour les éléments `article` signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie. -<p>Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en <code>row-reverse</code> — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.</p> +Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en `row-reverse` — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers. -<h2 id="Forme_abrégée_«_flex-flow_»">Forme abrégée « flex-flow »</h2> +## Forme abrégée « flex-flow » -<p>Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer</p> +Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer -<pre class="brush: css">flex-direction: row; -flex-wrap: wrap;</pre> +```css +flex-direction: row; +flex-wrap: wrap; +``` -<p>par</p> +par -<pre class="brush: css">flex-flow: row wrap;</pre> +```css +flex-flow: row wrap; +``` -<h2 id="Taille_modulable_des_éléments_flex">Taille modulable des éléments flex</h2> +## Taille modulable des éléments flex -<p>Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> ou prenez une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> comme nouveau point de départ (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">voir en direct</a>).</p> +Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) ou prenez une copie de [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) comme nouveau point de départ ([voir en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)). -<p>Ajoutez d'abord la règle ci-dessous en fin de la CSS :</p> +Ajoutez d'abord la règle ci-dessous en fin de la CSS : -<pre class="brush: css">article { +```css +article { flex: 1; -}</pre> +} +``` -<p>Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.</p> +Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet. -<p>Maintenant ajoutons cette règle en-dessous de la précédente :</p> +Maintenant ajoutons cette règle en-dessous de la précédente : -<pre class="brush: css">article:nth-of-type(3) { +```css +article:nth-of-type(3) { flex: 2; -}</pre> +} +``` -<p>Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.</p> +Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible. -<p>Vous pouvez également définir une valeur minimale de taille dans la valeur <code>flex</code>. Modifiez comme suit vos règles <code>article</code> existantes :</p> +Vous pouvez également définir une valeur minimale de taille dans la valeur `flex`. Modifiez comme suit vos règles `article` existantes : -<pre class="brush: css">article { +```css +article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; -}</pre> +} +``` -<p>En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : <em>quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.</em></p> +En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : _quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte._ -<p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p> +Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti. -<p><img alt="Modulation de la largeur" src="Exemple_flexbox_4.png"></p> + -<p>Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.</p> +Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement. -<h2 id="Flex_forme_abrégée_vs_forme_longue">Flex : forme abrégée vs forme longue</h2> +## Flex : forme abrégée vs forme longue -<p>{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :</p> +{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes : -<ul> - <li>une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ;</li> - <li>une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ;</li> - <li>une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}.</li> -</ul> +- une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ; +- une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ; +- une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}. -<p>Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.</p> +Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes. -<h2 id="Alignement_horizontal_et_vertical">Alignement horizontal et vertical</h2> +## Alignement horizontal et vertical -<p>Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">voir aussi en direct</a>). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.</p> +Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([voir aussi en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche. -<p><img alt="Alignement" src="Exemple_flexbox_5.png"></p> + -<p>D'abord, faites une copie locale de cet exemple.</p> +D'abord, faites une copie locale de cet exemple. -<p>Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :</p> +Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple : -<pre class="brush: css">div { +```css +div { display: flex; align-items: center; justify-content: space-around; -}</pre> +} +``` -<p>Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.</p> +Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés. -<p>{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).</p> +{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis). -<ul> - <li>Par défaut, la valeur est <code>stretch</code>, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut.</li> - <li>Avec la valeur <code>center</code>, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.</li> - <li>Il y a également des valeurs comme <code>flex-start</code> et <code>flex-end</code> qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails.</li> -</ul> +- Par défaut, la valeur est `stretch`, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut. +- Avec la valeur `center`, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement. +- Il y a également des valeurs comme `flex-start` et `flex-end` qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails. -<p>Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:</p> +Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS: -<pre class="brush: css">button:first-child { +```css +button:first-child { align-self: flex-end; -}</pre> +} +``` -<p>Voyez l'effet obtenu, puis supprimez ensuite la règle.</p> +Voyez l'effet obtenu, puis supprimez ensuite la règle. -<p>{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.</p> +{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal. -<ul> - <li>La valeur par défaut est <code>flex-start</code>. Tous les éléments sont disposés vers l'origine de l'axe principal.</li> - <li>Vous utiliserez <code>flex-end</code> pour les disposer vers la fin.</li> - <li><code>center</code> est aussi une valeur possible pour <code>justify-content</code>. Avec elle, les éléments flex sont placés vers le centre de l'axe principal.</li> - <li>La valeur <code>space-around</code>, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun.</li> - <li>Une autre valeur, <code>space-between</code>, est semblable à <code>space-around</code> mais elle ne laisse pas d'espace aux extrémités.</li> -</ul> +- La valeur par défaut est `flex-start`. Tous les éléments sont disposés vers l'origine de l'axe principal. +- Vous utiliserez `flex-end` pour les disposer vers la fin. +- `center` est aussi une valeur possible pour `justify-content`. Avec elle, les éléments flex sont placés vers le centre de l'axe principal. +- La valeur `space-around`, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun. +- Une autre valeur, `space-between`, est semblable à `space-around` mais elle ne laisse pas d'espace aux extrémités. -<p>N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.</p> +N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre. -<h2 id="Ordonner_les_éléments_flex">Ordonner les éléments flex</h2> +## Ordonner les éléments flex -<p>Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.</p> +Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page. -<p>Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :</p> +Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons : -<pre class="brush: css">button:first-child { +```css +button:first-child { order: 1; -}</pre> +} +``` -<p>Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :</p> +Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne : -<ul> - <li>par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;</li> - <li>les éléments flex avec des valeurs <code>order</code> plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;</li> - <li>les éléments flex avec les mêmes valeurs pour <code>order</code> sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs <code>order</code> de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier.</li> - <li>Le troisième élément suit le deuxième, car il a la même valeur pour <code>order</code> et qu'il est placé après dans le code source.</li> -</ul> +- par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ; +- les éléments flex avec des valeurs `order` plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ; +- les éléments flex avec les mêmes valeurs pour `order` sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs `order` de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier. +- Le troisième élément suit le deuxième, car il a la même valeur pour `order` et qu'il est placé après dans le code source. -<p>Vous pouvez donner des valeurs négatives à <code>order</code> pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :</p> +Vous pouvez donner des valeurs négatives à `order` pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante : -<pre class="brush: css">button:last-child { +```css +button:last-child { order: -1; -}</pre> +} +``` -<h2 id="Boîtes_flex_imbriquées">Boîtes flex imbriquées</h2> +## Boîtes flex imbriquées -<p>Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">à voir en direct également</a>).</p> +Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([à voir en direct également](http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)). -<p><img alt="Imbrications avec flexbox" src="Exemple_flexbox_6.png"></p> + -<p>Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}} :</p> +Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}} : -<pre>section - article - article - article - div - button - div button - div button - button - button</pre> + section - article + article + article - div - button + div button + div button + button + button -<p>Regardez le code utilisé pour cette disposition.</p> +Regardez le code utilisé pour cette disposition. -<p>Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.</p> +Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles. -<pre class="brush: css">section { +```css +section { display: flex; -}</pre> +} +``` -<p>Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.</p> +Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne. -<pre class="brush: css">article { +```css +article { flex: 1 200px; } @@ -287,56 +306,56 @@ article:nth-of-type(3) { display: flex; flex-flow: column; } -</pre> +``` -<p>Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur <code>flex:1 100px;</code> pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.</p> +Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur `flex:1 100px;` pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut. -<pre class="brush: css">article:nth-of-type(3) div:first-child { +```css +article:nth-of-type(3) div:first-child { flex:1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; -}</pre> +} +``` -<p>Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.</p> +Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes. -<pre class="brush: css">button { +```css +button { flex: 1; margin: 5px; font-size: 18px; line-height: 1.5; -}</pre> +} +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>La prise en charge de Flexbox est disponible avec la plupart des navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).</p> +La prise en charge de Flexbox est disponible avec la plupart des navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification). -<p>Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.</p> +Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible. -<p>Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.</p> +Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable. -<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> +Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module [Tests croisés sur navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.</p> +Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS. -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}} -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> -</div> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.md b/files/fr/learn/css/css_layout/flexbox_skills/index.md index 4e473510b9..0ba2cb65a6 100644 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.md +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.md @@ -4,97 +4,80 @@ slug: Learn/CSS/CSS_layout/Flexbox_skills translation_of: Learn/CSS/CSS_layout/Flexbox_skills original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}</div> +Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire. -<p>Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.</p> +> **Note :** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> +> If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page. -<div class="note"> -<p><strong>Note :</strong> You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> - <br> - If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> -</div> +## Flex Layout One -<h2 id="Flex_Layout_One">Flex Layout One</h2> +Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous. -<p>Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.</p> + -<p><img alt="Flex items laid out as a row with space between them." src="flex-task1.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}</p> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html) to work in your own editor or in an online editor. -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +## Flex Layout Two -<h2 id="Flex_Layout_Two">Flex Layout Two</h2> +Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément. -<p>Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.</p> + -<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="flex-task2.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}</p> +Questions supplémentaires: -<p>Questions supplémentaires:</p> +- Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ? -<ul> - <li>Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?</li> -</ul> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html) to work in your own editor or in an online editor. -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +## Flex Layout Three -<h2 id="Flex_Layout_Three">Flex Layout Three</h2> +Il y a deux éléments dans le HTML ci-dessous, une div avec une classe `.parent` qui contient une autre div avec une classe `.child`. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent. -<p>Il y a deux éléments dans le HTML ci-dessous, une div avec une classe <code>.parent</code> qui contient une autre div avec une classe <code>.child</code>. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.</p> + -<p><img alt="A box centered inside another box." src="flex-task3.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}</p> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html) to work in your own editor or in an online editor. -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +## Flex Layout Four -<h2 id="Flex_Layout_Four">Flex Layout Four</h2> +Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image. -<p>Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.<br> - </p> -<p><img alt="A set of items displayed as rows." src="flex-task4.png"></p> -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> + -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}</p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}} -<h2 id="Assessment_or_further_help">Assessment or further help</h2> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html) to work in your own editor or in an online editor. -<p>You can practice these examples in the Interactive Editors mentioned above.</p> +## Assessment or further help -<p>If you would like your work assessed, or are stuck and want to ask for help:</p> +You can practice these examples in the Interactive Editors mentioned above. -<ol> - <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> - <li>Write a post asking for assessment and/or help at the<a href="https://discourse.mozilla.org/c/mdn"> MDN Discourse forum</a>. Add the "learning" tag to your post so we are able to more easily find it. Your post should include: - <ul> - <li>A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".</li> - <li>Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.</li> - <li>A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> - <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> - </ul> - </li> -</ol> +If you would like your work assessed, or are stuck and want to ask for help: -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</p> +1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections. +2. Write a post asking for assessment and/or help at the[ MDN Discourse forum](https://discourse.mozilla.org/c/mdn). Add the "learning" tag to your post so we are able to more easily find it. Your post should include: + + - A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test". + - Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,. + - A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. + - A link to the actual task or assessment page, so we can find the question you want help with. + +{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} diff --git a/files/fr/learn/css/css_layout/floats/index.md b/files/fr/learn/css/css_layout/floats/index.md index 386185ea62..1557416859 100644 --- a/files/fr/learn/css/css_layout/floats/index.md +++ b/files/fr/learn/css/css_layout/floats/index.md @@ -16,52 +16,62 @@ tags: translation_of: Learn/CSS/CSS_layout/Floats original_slug: Apprendre/CSS/CSS_layout/Floats --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> - -<p>À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> +À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété [`float`](/fr/docs/Web/CSS/float "The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).") est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les bases du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée de la manière dont fonctionne CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction au CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété <code>clear</code> et autres méthodes de dégagement des boîtes flottantes.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les bases du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée de la manière dont fonctionne CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction au CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre comment créer des éntités flottantes dans les pages web, ainsi + qu'utiliser la propriété <code>clear</code> et autres méthodes de + dégagement des boîtes flottantes. + </td> + </tr> + </tbody> </table> -<h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2> +## Contexte de boîtes flottantes -<p>La propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> +La propriété [`float`](/fr/docs/Web/CSS/float "The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).") a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal. -<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> +Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de `float` s'est élargie. Notre [exemple de paragraphe élégant](/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph) vu plus haut dans le cours montre comment vous pouvez utiliser `float` pour créer une lettrine. -<p>Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.</p> +Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé. -<p>Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.</p> +Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes. -<h2 id="Exemple_simple_de_boîte_flottante">Exemple simple de boîte flottante</h2> +## Exemple simple de boîte flottante -<p>Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier <code>index.html</code> sur votre ordinateur initialisé avec un <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html" rel="noopener">simple modèle HTML</a> et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.</p> +Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier `index.html` sur votre ordinateur initialisé avec un [simple modèle HTML](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler. -<p>Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément <code>body</code> en supprimant tout ce qu'il y avait avant :</p> +Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément `body` en supprimant tout ce qu'il y avait avant : -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +```html +<h1>Exemple simple de boîte flottante</h1> -<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> +<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<p>Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier <code>.css</code> séparé — comme vous voulez):</p> +Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier `.css` séparé — comme vous voulez): -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -74,11 +84,13 @@ original_slug: Apprendre/CSS/CSS_layout/Floats border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; -}</pre> +} +``` -<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour <code>.box</code> :</p> +Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour `.box` : -<pre class="brush: css">.box { +```css +.box { float: left; margin-right: 15px; width: 150px; @@ -86,26 +98,29 @@ original_slug: Apprendre/CSS/CSS_layout/Floats border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; -}</pre> +} +``` -<p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p> +Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit: -<h3>Faire flotter la boîte</h3> +### Faire flotter la boîte -<p>Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant <code>.box</code> :</p> +Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant `.box` : -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> +```html hidden +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -121,38 +136,42 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}</p> +{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }} -<p>Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété <code>float</code> (l'élément <code>box</code> dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (<code>left</code>) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.</p> +Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété `float` (l'élément `box` dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (`left`) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête. -<p>Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur <code>right</code> à la propriété <code>float</code> et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.</p> +Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur `right` à la propriété `float` et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat. -<p>Ajoutez une classe <code>special</code> au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.</p> +Ajoutez une classe `special` au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond. -<pre class="brush: css">.special { +```css +.special { background-color: rgb(79,185,227); padding: 10px; color: #fff; } -</pre> +``` -<h3>Visualiser le flottement</h3> +### Visualiser le flottement -<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> +Pour mieux visualiser l'effet, modifiez `margin-right` de la boîte flottante en `margin` de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous : -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> +```html hidden +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -174,35 +193,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 10px; color: #fff; } -</pre> +``` -<p>{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}</p> +{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }} -<p>Les lignes du paragraphe suivant la boîte flottante ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.</p> +Les lignes du paragraphe suivant la boîte flottante ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur. -<h2 id="Dégagement_des_boîtes_flottantes">Dégagement des boîtes flottantes</h2> +## Dégagement des boîtes flottantes -<p>Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.</p> +Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}. -<p>Dans le HTML de l'exemple précédent, donnez la classe <code>cleared</code> au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :</p> +Dans le HTML de l'exemple précédent, donnez la classe `cleared` au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS : -<pre class="brush: css">.cleared { +```css +.cleared { clear: left; } -</pre> +``` -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +```html +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -<pre class="brush: css">body { +``` + +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -222,53 +245,57 @@ original_slug: Apprendre/CSS/CSS_layout/Floats .cleared { clear: left; } -</pre> +``` -<p>{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}</p> +{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }} -<p>Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété <code>clear</code> accepte les valeurs suivantes :</p> +Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété `clear` accepte les valeurs suivantes : -<ul> - <li><code>left</code> : dégage les élément à gauche de la boîte flottante.</li> - <li><code>right</code> : dégage les éléments à droite.</li> - <li><code>both </code>: dégage de tous élément flottant, à gauche et à droite.</li> -</ul> +- `left` : dégage les élément à gauche de la boîte flottante. +- `right` : dégage les éléments à droite. +- `both `: dégage de tous élément flottant, à gauche et à droite. -<h2 id="Dégagement_de_boîtes_autour_dune_boîte_flottante">Dégagement de boîtes autour d'une boîte flottante</h2> +## Dégagement de boîtes autour d'une boîte flottante -<p>Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe <code>wrapper</code>.</p> +Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe `wrapper`. -<pre class="brush: html"><div class="wrapper"> - <div class="box">Boîte flottante</div> +```html +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> -</div> -</pre> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +``` -<p>Dans la CSS, ajoutez la règle suivante pour la classe <code>.wrapper</code> et actualisez la page :</p> +Dans la CSS, ajoutez la règle suivante pour la classe `.wrapper` et actualisez la page : -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; -}</pre> +} +``` -<h3>Le problème</h3> +### Le problème -<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> +Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante. -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -290,37 +317,42 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Le_problème', '100%', 600) }}</p> +{{ EmbedLiveSample('Le_problème', '100%', 600) }} -<p>Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.</p> +Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement. -<h3 id="Le_«_clearfix_hack_»">Le « clearfix hack »</h3> +### Le « clearfix hack » -<p>La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur <code>both</code> à la propriété <code>clear</code>.</p> +La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur `both` à la propriété `clear`. -<p>Ajoutez ceci à la CSS de notre exemple :</p> +Ajoutez ceci à la CSS de notre exemple : -<pre class="brush: css">.wrapper::after { +```css +.wrapper::after { content: ""; clear: both; display: block; -}</pre> +} +``` -<p>Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <code><div></code> en dessous avec la règle <code>clear: both</code>.</p> +Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que `<div>` en dessous avec la règle `clear: both`. -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -348,34 +380,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats clear: both; display: block; } -</pre> +``` -<p>{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}</p> +{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }} -<h3 id="Utilisation_du_débordement">Utilisation du débordement</h3> +### Utilisation du débordement -<p>Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de <code>wrapper</code> à autre chose que <code>visible</code>.</p> +Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de `wrapper` à autre chose que `visible`. -<p>Supprimez les éléments <code>clearfix</code> de la CSS su paragraphe précédent et, à la place, ajoutez <code>overflow: auto</code> aux règles pour <code>wrapper</code>. À nouveau, la boîte doit être dégagée.</p> +Supprimez les éléments `clearfix` de la CSS su paragraphe précédent et, à la place, ajoutez `overflow: auto` aux règles pour `wrapper`. À nouveau, la boîte doit être dégagée. -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; overflow: auto; -}</pre> +} +``` -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -398,34 +435,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}</p> +{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }} -<p>Cet exemple fonctionne en créant ce que l'on appelle un <strong>block formatting context</strong> (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.</p> +Cet exemple fonctionne en créant ce que l'on appelle un **block formatting context** (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement. -<h3 id="«_display_flow-root_»">« display: flow-root »</h3> +### « display: flow-root » -<p>La solution moderne de ce problème consiste à utiliser la valeur <code>flow-root</code> pour le propriété <code>display</code>. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez <code>overflow: auto</code> de la règle <code>.wrapper</code> et ajoutez <code>display: flow-root</code>. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.</p> +La solution moderne de ce problème consiste à utiliser la valeur `flow-root` pour le propriété `display`. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez `overflow: auto` de la règle `.wrapper` et ajoutez `display: flow-root`. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée. -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; display: flow-root; -}</pre> +} +``` -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -448,27 +490,25 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}</p> +{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> +Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les [Méthodes anciennes de mise en page](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md index 3694a00968..aada82d606 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md @@ -4,79 +4,79 @@ slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</p> +Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques. <table class="standard-table"> - <tbody> - <tr> - <th scope="row"><strong>Conditions préalables</strong>:</th> - <td>Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row"><strong>Objectif</strong>:</th> - <td>Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><strong>Conditions préalables</strong>:</th> + <td> + Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue + tous les articles de ce module. + </td> + </tr> + <tr> + <th scope="row"><strong>Objectif</strong>:</th> + <td> + Pour tester la compréhension des compétences de base en aménagement + couvertes dans ce module. + </td> + </tr> + </tbody> </table> -<h2 id="dossier_de_projet">dossier de projet</h2> +## dossier de projet -<p>Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.</p> +Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous. -<p><img alt="" src="layout-task-complete.png"></p> + -<h3 id="configuration_de_base">configuration de base</h3> +### configuration de base -<p>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ici</a> .</p> +Vous pouvez télécharger le code HTML, CSS et un ensemble de six images [ici](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension) . -<p>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé <code>images</code>. Ouvrir le <code>index.html</code>fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.</p> +Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé `images`. Ouvrir le `index.html`fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous. -<p>Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.</p> +Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal. -<p><img alt="" src="layout-task-start.png"></p> + -<h3 id="Votre_section_detâches">Votre section de tâches</h3> +### Votre section de tâches -<p>Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:</p> +Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont: -<ol> - <li>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</li> - <li>La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.</li> - <li>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</li> - <li>Les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>et <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</li> - <li>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</li> -</ol> +1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments. +2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint. +3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte. +4. Les éléments [`<article>`](/fr/docs/Web/HTML/Element/article)et [`<aside>`](/fr/docs/Web/HTML/Element/aside)doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites. +5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images. -<p>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</p> +Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes: -<ul> - <li>Positionnement</li> - <li>Flotte</li> - <li>Flexbox</li> - <li>CSS Grid Layout</li> -</ul> +- Positionnement +- Flotte +- Flexbox +- CSS Grid Layout -<p>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> .</p> +Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) . -<h2 id="Evaluation">Evaluation</h2> +## Evaluation -<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener">fil de discussion relatif à cet exercice</a> ou sur le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</p> +Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le [fil de discussion relatif à cet exercice](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) ou sur le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC) . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher! -<h2 id="Dans_ce_module_Section">Dans ce module Section</h2> +## Dans ce module Section -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Débit normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">la grille</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flotteurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mise en page à plusieurs colonnes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception sensible</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant aux questions des médias</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page héritées</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Soutenir les anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation fondamentale de la compréhension de la mise en page.</a></li> -</ul> +- [Introduction à la mise en page CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Débit normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [la grille](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Flotteurs](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Mise en page à plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Conception sensible](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant aux questions des médias](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Méthodes de mise en page héritées](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Soutenir les anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Évaluation fondamentale de la compréhension de la mise en page.](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md index 6a0d5da4ad..23532b7599 100644 --- a/files/fr/learn/css/css_layout/grids/index.md +++ b/files/fr/learn/css/css_layout/grids/index.md @@ -18,110 +18,133 @@ tags: translation_of: Learn/CSS/CSS_layout/Grids original_slug: Apprendre/CSS/CSS_layout/Grids --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> - -<p>« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> +« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et une idée de la manière dont la CSS fonctionne (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> + et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre les concepts fondamentaux sous-jacents de la disposition en + trame et comment la mettre en œuvre en utilisant « CSS Grid ». + </td> + </tr> + </tbody> </table> -<h2 id="Quest_quune_disposition_en_trame">Qu'est qu'une disposition en trame ?</h2> +## Qu'est qu'une disposition en trame ? -<p>Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.</p> +Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web. -<p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p> +La trame est constituée généralement de **rangées** (**colonnes** ou **lignes)**. L'espace entre chaque ligne ou colonne est communément appelé **gouttière**. -<p><img alt="Schéma du quadrillage" src="grille.png"></p> + -<h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2> +## Création d'une trame CSS -<p>Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.</p> +Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet. -<h3 id="Définition_dune_trame">Définition d'une trame</h3> +### Définition d'une trame -<p>Pour débuter, téléchargez et ouvrez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">le fichier de départ</a> dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.</p> +Pour débuter, téléchargez et ouvrez [le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html) dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage. -<p>Pour définir un tramage, on affecte la valeur <code>grid</code> à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :</p> +Pour définir un tramage, on affecte la valeur `grid` à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier : -<pre class="brush: css">.container { +```css +.container { display: grid; -}</pre> +} +``` -<p>Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer <code>display: grid</code> fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.</p> +Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer `display: grid` fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal. -<p>Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.</p> +Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 200px 200px 200px; -}</pre> +} +``` -<p>Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.</p> +Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); -} </pre> - -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> - -<pre class="brush: css">.container { +} +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> +``` + +```css +.container { display: grid; grid-template-columns: 200px 200px 200px; -} </pre> +} +``` -<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p> +{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }} -<h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3> +### Trames adaptables avec l'unité « fr » -<p>En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.</p> +En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame. -<p>En changeant la liste des chaînes par la suivante, on crée trois chaînes de <code>1fr</code>.</p> +En changeant la liste des chaînes par la suivante, on crée trois chaînes de `1fr`. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 1fr 1fr 1fr; -}</pre> +} +``` -<p>Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité <code>fr</code> ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :</p> +Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité `fr` ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; -}</pre> +} +``` -<p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.</p> +La première chaîne obtient `2fr` de l'espace disponible et les deux autres `1fr` ; la première chaîne sera plus large. Il est possible de mélanger des unités `fr` et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -133,43 +156,47 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-template-columns: 2fr 1fr 1fr; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> +``` -<p>{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}</p> - -<div class="note"> -<p><strong>Note :</strong> L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> </div> +``` + +{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }} -<h3 id="Espaces_entre_pistes">Espaces entre pistes</h3> +> **Note :** L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager. -<p>Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.</p> +### Espaces entre pistes -<pre class="brush: css">.container { +Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup. + +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; -}</pre> +} +``` -<p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p> +Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité `fr`. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -182,176 +209,189 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-gap: 20px; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> - -<pre class="brush: html"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> -</pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> +``` -<div class="note"> -<p><strong>Note :</strong> Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> +```html +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> </div> +``` -<pre class="brush: css">.container { +{{ EmbedLiveSample('Grid_3', '100%', 400) }} + +> **Note :** Les propriétés _\*gap_ étaient traditionnellement préfixées par `grid-`, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code. + +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; gap: 20px; -}</pre> +} +``` -<h3 id="Répétition_des_listes_de_pistes">Répétition des listes de pistes</h3> +### Répétition des listes de pistes -<p>Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :</p> +Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; -}</pre> +} +``` -<p>Nous obtenons 3 chaînes de <code>1fr</code> de large, comme précédemment. La première valeur passée à la fonction <code>repeat</code> est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.</p> +Nous obtenons 3 chaînes de `1fr` de large, comme précédemment. La première valeur passée à la fonction `repeat` est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter. -<h3 id="Trame_implicite_et_explicite">Trame implicite et explicite</h3> +### Trame implicite et explicite -<p>Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec <code>grid-template-columns</code> <strong>ou</strong> <code>grid-template-rows</code>. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox.</p> +Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec `grid-template-columns` **ou** `grid-template-rows`. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox. -<p>Par défaut, les rangées de la trame implicite sont <code>auto</code> dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p> +Par défaut, les rangées de la trame implicite sont `auto` dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété `grid-auto-rows` avec une valeur de `100px` dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); -} </pre> - -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> - </pre> - -<pre class="brush: css">.container { +} +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> + +``` + +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-gap: 20px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p> +{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }} -<h3 id="La_fonction_minmax">La fonction minmax()</h3> +### La fonction minmax() -<p>Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'<em>au moins</em> 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.</p> +Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'_au moins_ 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension. -<p>La fonction <code>minmax</code> nous permet de fixer une taille maximale et minimale pour une trame, par exemple <code>minmax(100px, auto)</code>. La taille minimale est de 100 px, mais la maximale est <code>auto</code> — elle s'agrandira selon le contenu. Changeons <code>grid-auto-rows</code> en utilisant une valeur <code>minmax</code> :</p> +La fonction `minmax` nous permet de fixer une taille maximale et minimale pour une trame, par exemple `minmax(100px, auto)`. La taille minimale est de 100 px, mais la maximale est `auto` — elle s'agrandira selon le contenu. Changeons `grid-auto-rows` en utilisant une valeur `minmax` : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-gap: 20px; -}</pre> +} +``` -<p>Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.</p> +Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée. -<h3 id="Autant_de_chaînes_que_possibles">Autant de chaînes que possibles</h3> +### Autant de chaînes que possibles -<p>Il est possible de combiner nos savoirs à propos des listes de pistes, la notation <code>repeat</code> et <code>minmax()</code> pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de <code>grid-template-columns</code> égale à <code>repeat()</code> avec le mot-clé <code>auto-fill</code> comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez <code>minmax()</code> avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.</p> +Il est possible de combiner nos savoirs à propos des listes de pistes, la notation `repeat` et `minmax()` pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de `grid-template-columns` égale à `repeat()` avec le mot-clé `auto-fill` comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez `minmax()` avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum. -<p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p> +Essayez ceci dans le fichier avec la CSS ci-dessous : -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> +``` -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-gap: 20px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p> +{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }} -<p>Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.</p> +Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées. -<h2 id="Placement_sur_les_lignes">Placement sur les lignes</h2> +## Placement sur les lignes -<p>Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.</p> +Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche. -<p>Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :</p> +Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes : -<ul> - <li>{{cssxref("grid-column-start")}}</li> - <li>{{cssxref("grid-column-end")}}</li> - <li>{{cssxref("grid-row-start")}}</li> - <li>{{cssxref("grid-row-end")}}</li> -</ul> +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} -<p>Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :</p> +Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés : -<ul> - <li>{{cssxref("grid-column")}}</li> - <li>{{cssxref("grid-row")}}</li> -</ul> +- {{cssxref("grid-column")}} +- {{cssxref("grid-row")}} -<p>Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un <code>/</code> — une barre inclinée.</p> +Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un `/` — une barre inclinée. -<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">Pour débuter, téléchargez ce fichier</a>. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.</p> +[Pour débuter, téléchargez ce fichier](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html). Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé. -<p>À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :</p> +À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS : -<pre class="brush: css">header { +```css +header { grid-column: 1 / 3; grid-row: 1; } @@ -369,9 +409,11 @@ aside { footer { grid-column: 1 / 3; grid-row: 3; -}</pre> +} +``` -<pre class="brush: css hidden"> body { +```css hidden + body { width: 90%; max-width: 900px; margin: 2em auto; @@ -414,36 +456,37 @@ footer { aside { border-right: 1px solid #999; } -</pre> - -<pre class="brush: html hidden"><div class="container"> - <header>Voici mon joli blog</header> - <article> - <h1>Mon article</h1> - <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +``` + +```html hidden +<div class="container"> + <header>Voici mon joli blog</header> + <article> + <h1>Mon article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` -<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p> +{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }} -<div class="note"> -<p><strong>Note :</strong> vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> -</div> +> **Note :** vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de trame implicite. -<h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2> +## Placer avec « grid-template-areas » -<p>Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.</p> +Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design. -<p>Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.</p> +Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-areas: "header header" @@ -467,12 +510,13 @@ aside { footer { grid-area: footer; -}</pre> - -<p>Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !</p> +} +``` +Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne ! -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -516,44 +560,46 @@ aside { footer { grid-area: footer; } - </pre> -<pre class="brush: html hidden"><div class="container"> - <header>Voici mon joli blog</header> - <article> - <h1>Mon article</h1> - <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +```html hidden +<div class="container"> + <header>Voici mon joli blog</header> + <article> + <h1>Mon article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` + +{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }} -<p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p> +Les règles pour `grid-template-areas` sont les suivantes : -<ul> - <li>toute cellule du quadrillage doit être remplie.</li> - <li>pour couvrir deux cellules, répétez le nom.</li> - <li>pour laisser une cellule vide, utilisez un point <code>.</code> .</li> - <li>les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple.</li> - <li>les zones ne peuvent pas être répétées dans des emplacements différents.</li> -</ul> +- toute cellule du quadrillage doit être remplie. +- pour couvrir deux cellules, répétez le nom. +- pour laisser une cellule vide, utilisez un point `.` . +- les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple. +- les zones ne peuvent pas être répétées dans des emplacements différents. -<p>Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.</p> +Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS. -<h2 id="«_CSS_Grid_»_une_structure_de_quadrillage">« CSS Grid » : une structure de quadrillage</h2> +## « CSS Grid » : une structure de quadrillage -<p>Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.</p> +Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications. -<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">Chargez le fichier de départ</a>. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.</p> +[Chargez le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html). Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes. -<pre class="brush: css">header { +```css +header { grid-column: 1 / 13; grid-row: 1; } @@ -571,9 +617,11 @@ aside { footer { grid-column: 1 / 13; grid-row: 3; -}</pre> +} +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -617,55 +665,52 @@ footer { aside { border-right: 1px solid #999; } - </pre> - -<pre class="brush: html hidden"><div class="container"> - <header>Voici mon joli blog</header> - <article> - <h1>Mon article</h1> - <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +``` -<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p> +```html hidden +<div class="container"> + <header>Voici mon joli blog</header> + <article> + <h1>Mon article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` -<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p> +{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }} -<h2 id="Résumé">Résumé</h2> +Si vous utilisez [Firefox Grid Inspector](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne. -<p>Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.</p> + -<h2 id="Voir_également">Voir également</h2> +## Résumé -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> - <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> -</ul> +Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> +## Voir également +- [CSS Grid guides](/fr/docs/Web/CSS/CSS_Grid_Layout#Guides) +- [CSS Grid Inspector: Examine grid layouts](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) +{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/index.md b/files/fr/learn/css/css_layout/index.md index b6b10499ce..5a8db10ccf 100644 --- a/files/fr/learn/css/css_layout/index.md +++ b/files/fr/learn/css/css_layout/index.md @@ -20,67 +20,58 @@ tags: translation_of: Learn/CSS/CSS_layout original_slug: Apprendre/CSS/CSS_layout --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> +À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître. -<div class="callout"> - <p>Vous cherchez à devenir développeuse ou développeur web front-end ?</p> - <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> - </p> -</div> +> **Remarque :** +> +> Vous cherchez à devenir développeuse ou développeur web front-end ? +> +> Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. +> +> [Commencer](/fr/docs/Learn/Front-end_web_developer) -<h2 id="prerequisites">Prérequis</h2> +## Prérequis -<p>Avant de commencer ce module, vous devriez déjà :</p> +Avant de commencer ce module, vous devriez déjà : -<ol> - <li>Connaître les bases du HTML, telles qu'exposées dans le module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML.</a></li> - <li>Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans <a href="/fr/docs/Learn/CSS/First_steps">Introduction à CSS</a>.</li> - <li>Savoir <a href="/fr/docs/Learn/CSS/Building_blocks">mettre en forme les boîtes.</a></li> -</ol> +1. Connaître les bases du HTML, telles qu'exposées dans le module [Introduction au HTML.](/fr/docs/Learn/HTML/Introduction_to_HTML) +2. Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans [Introduction à CSS](/fr/docs/Learn/CSS/First_steps). +3. Savoir [mettre en forme les boîtes.](/fr/docs/Learn/CSS/Building_blocks) -<div class="notecard note"> - <p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> -</div> +> **Note :** Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que [JSBin](http://jsbin.com/) ou [Glitch](https://glitch.com/) -<h2 id="guides">Guides</h2> +## Guides -<p>Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.</p> +Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web. -<dl> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></dt> - <dd>Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de <a href="/fr/docs/Web/CSS/display"><code>display</code></a> — et présente certains des concepts que nous couvrirons dans de ce module.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal des éléments</a></dt> - <dd>Les éléments se placent d'eux‑même sur les pages web selon un <em>flux normal</em> sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd><a href="/fr/docs/Glossary/Flexbox">Flexbox</a> est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles</a></dt> - <dd>Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Le flottement</a></dt> - <dd>À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété <a href="/fr/docs/Web/CSS/float"><code>float</code></a> fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></dt> - <dd>Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS <a href="/fr/docs/Web/CSS/position"><code>position</code></a> et comment les utiliser.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition en colonnes</a></dt> - <dd>Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design"><i>Responsive design</i></a></dt> - <dd>Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « <i>responsive design</i> » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide pour débuter avec les <i>media queries</i></a></dt> - <dd>Les <i>media queries</i> (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les <i>media queries</i> puis appliquerons cela à un exemple pour le rendre réactif.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page historiques</a></dt> - <dd>Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></dt> - <dd> - <p>Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens.</p> - </dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension des fondamentaux de la mise en page</a></dt> - <dd>Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web.</dd> -</dl> +- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) + - : Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de [`display`](/fr/docs/Web/CSS/display) — et présente certains des concepts que nous couvrirons dans de ce module. +- [Flux normal des éléments](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) + - : Les éléments se placent d'eux‑même sur les pages web selon un _flux normal_ sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier. +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) + - : [Flexbox](/fr/docs/Glossary/Flexbox) est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS. +- [Grilles](/fr/docs/Learn/CSS/CSS_layout/Grids) + - : Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS. +- [Le flottement](/fr/docs/Learn/CSS/CSS_layout/Floats) + - : À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété [`float`](/fr/docs/Web/CSS/float) fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article. +- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) + - : Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS [`position`](/fr/docs/Web/CSS/position) et comment les utiliser. +- [Disposition en colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) + - : Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité. +- [_Responsive design_](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) + - : Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « _responsive design_ » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode. +- [Guide pour débuter avec les _media queries_](/fr/docs/Learn/CSS/CSS_layout/Media_queries) + - : Les _media queries_ (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les _media queries_ puis appliquerons cela à un exemple pour le rendre réactif. +- [Méthodes de mise en page historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) + - : Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique. +- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) + - : Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens. +- [Compréhension des fondamentaux de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) + - : Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<dl> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a></dt> - <dd>Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.</dd> -</dl> +- [Exemples pratiques de positionnement](/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples) + - : Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement. diff --git a/files/fr/learn/css/css_layout/introduction/index.md b/files/fr/learn/css/css_layout/introduction/index.md index c295efa170..9edb2531f8 100644 --- a/files/fr/learn/css/css_layout/introduction/index.md +++ b/files/fr/learn/css/css_layout/introduction/index.md @@ -17,207 +17,224 @@ tags: translation_of: Learn/CSS/CSS_layout/Introduction original_slug: Apprendre/CSS/CSS_layout/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}} -<div>{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}</div> - -<p>Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> +Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et avoir une idée de la manière dont la CSS fonctionne (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Vous donner un aperçu des techniques de mise en page des CSS. Chaque + technique peut être apprise plus précisément dans des tutoriels dédiés. + </td> + </tr> + </tbody> </table> -<p>Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:</p> +Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont: -<ul> - <li>le cours normal</li> - <li>la propriété {{cssxref("display")}}</li> - <li>Flexbox</li> - <li>les trames</li> - <li>les flotteurs</li> - <li>le positionnement</li> - <li>la mise en page des tableaux</li> - <li>la disposition sur plusieurs colonnes</li> -</ul> +- le cours normal +- la propriété {{cssxref("display")}} +- Flexbox +- les trames +- les flotteurs +- le positionnement +- la mise en page des tableaux +- la disposition sur plusieurs colonnes -<p>Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.</p> +Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation. -<h2 id="Cours_normal">Cours normal</h2> +## Cours normal -<p>Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:</p> +Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML: -<pre class="brush: html"><p>J'aime mon chat.</p> +```html +<p>J'aime mon chat.</p> -<ul> - <li>Acheter des croquettes</li> - <li>Exercice</li> - <li>Haut les cœurs, ami</li> -</ul> +<ul> + <li>Acheter des croquettes</li> + <li>Exercice</li> + <li>Haut les cœurs, ami</li> +</ul> -<p>La fin !</p></pre> +<p>La fin !</p> +``` -<p>Par défaut, le navigateur affichera ce code ainsi :</p> +Par défaut, le navigateur affichera ce code ainsi : -<p>{{ EmbedLiveSample('Cours_normal', '100%', 200) }}</p> +{{ EmbedLiveSample('Cours_normal', '100%', 200) }} -<p>Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.</p> +Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe. -<p>Les éléments disposés en empilement sont désignés comme étant des éléments <em>blocs</em>, par opposition aux éléments <em>en ligne</em> qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.</p> +Les éléments disposés en empilement sont désignés comme étant des éléments _blocs_, par opposition aux éléments _en ligne_ qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe. -<div class="note"> -<p><strong>Note :</strong> « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> -</div> +> **Note :** « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés. -<p>Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.</p> +Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition. -<p>Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :</p> +Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes : -<ul> - <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> - <li><strong>Flotteurs</strong> — appliquer à {{cssxref("float")}} une valeur comme <code>left</code> peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.</li> - <li><strong>La propriété {{cssxref("position")}}</strong> — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. <code>static</code> est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.</li> - <li><strong>Mise en page de tableaux</strong> — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant <code>display: table</code> et les propriétés associées.</li> - <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="/fr/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> -</ul> +- **La propriété {{cssxref("display")}}** — les valeurs standards comme `block`, `inline` ou `inline-block` peuvent changer la manière dont l'élément se comporte dans le cours normal (voir [Types de boîtes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de `display`, par exemple les [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) ou [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). +- **Flotteurs** — appliquer à {{cssxref("float")}} une valeur comme `left` peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines. +- **La propriété {{cssxref("position")}}** — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. `static` est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur. +- **Mise en page de tableaux** — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant `display: table` et les propriétés associées. +- **Mise en page sur plusieurs colonnes** — Les propriétés [Multi-column](/fr/docs/Web/CSS/CSS_Columns) peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal. -<h2 id="La_propriété_«_display_»">La propriété « display »</h2> +## La propriété « display » -<p>Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété <code>display</code>. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété <code>display</code>. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est <code>display: block</code>. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est <code>display: inline</code> par défaut.</p> +Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété `display`. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété `display`. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est `display: block`. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est `display: inline` par défaut. -<p>Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est <code>display: block</code> par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de <code>display</code> pour <code>inline</code>, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.</p> +Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est `display: block` par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de `display` pour `inline`, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier. -<p>En plus de pouvoir changer la présentation par défaut en faisant passer un élément de <code>block</code> à <code>inline</code> et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de <code>display</code>. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont <code>display: flex</code> et <code>display: grid</code>.</p> +En plus de pouvoir changer la présentation par défaut en faisant passer un élément de `block` à `inline` et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de `display`. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont `display: flex` et `display: grid`. -<h2 id="Flexbox">Flexbox</h2> +## Flexbox -<p>Flexbox est l'abréviation pour <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> +Flexbox est l'abréviation pour [Flexible Box Layout](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser `flexbox`, appliquez `display: flex` à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments `flex`. Voyons cela avec un simple exemple. -<p>Le balisage HTML ci-dessous crée un élément conteneur de la classe <code>wrapper</code>, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.</p> +Le balisage HTML ci-dessous crée un élément conteneur de la classe `wrapper`, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française. -<h3>Utiliser display: flex</h3> +### Utiliser display: flex -<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> +Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des _éléments flex_ et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est `row`. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est `stretch`. Ce qui signifie que les éléments se casent dans la hauteur du conteneur `flex` défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace. -<pre class="brush: css hidden">* {box-sizing: border-box;} +```css hidden +* {box-sizing: border-box;} -.wrapper > div { +.wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: flex; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +``` -<p>{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}</p> +{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }} -<h3>Définir la propriété flex</h3> +### Définir la propriété flex -<p>En plus des propriétés ci-dessus applicables au conteneur <code>flex</code>, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.</p> +En plus des propriétés ci-dessus applicables au conteneur `flex`, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible. -<p>À titre d'exemple, nous pouvons donner la valeur <code>1</code> à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.</p> +À titre d'exemple, nous pouvons donner la valeur `1` à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit. -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: flex; } -.wrapper > div { +.wrapper > div { flex: 1; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +``` -<p>{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}</p> +{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }} -<div class="note"> -<p><strong>Note :</strong> Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> -</div> +> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). -<h2 id="Disposition_en_trame">Disposition en trame</h2> +## Disposition en trame -<p>Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.</p> +Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes. -<p>À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à <code>display</code> — <code>display: grid</code>. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre <code>display: grid</code>, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de <code>1fr</code> chacune et deux lignes de <code>100px</code>. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.</p> +À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à `display` — `display: grid`. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre `display: grid`, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de `1fr` chacune et deux lignes de `100px`. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées. -<h3>Utiliser display: grid</h3> +### Utiliser display: grid -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> - <div class="box4">Quatre</div> - <div class="box5">Cinq</div> - <div class="box6">Six</div> -</div> -</pre> +``` + +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> + <div class="box5">Cinq</div> + <div class="box6">Six</div> +</div> +``` -<p>{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}</p> +{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }} -<h3>Placer des objets sur la grille</h3> +### Placer des objets sur la grille -<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> +Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames. -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -238,40 +255,37 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction grid-row: 2; grid-column: 3; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> </div> +``` -<p>{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}</p> +{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }} -<div class="note"> -<p><strong>Note :</strong> Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> -</div> +> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids). -<p>La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.</p> +La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident. -<h2 id="Flotteurs_boîtes_flottantes">Flotteurs (boîtes flottantes)</h2> +## Flotteurs (boîtes flottantes) -<p>Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.</p> +Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu. -<p>La propriété {{cssxref("float")}} a quatre valeurs possibles :</p> +La propriété {{cssxref("float")}} a quatre valeurs possibles : -<ul> - <li><code>left</code> — fait flotter l'élément sur la gauche.</li> - <li><code>right</code> — fait flotter l'élément sur la droite.</li> - <li><code>none</code> — indique que rien ne flotte. C'est la valeur par défaut.</li> - <li><code>inherit</code> — indique que la valeur de la propriété <code>float</code> sera héritée de celle de l'élément parent.</li> -</ul> +- `left` — fait flotter l'élément sur la gauche. +- `right` — fait flotter l'élément sur la droite. +- `none` — indique que rien ne flotte. C'est la valeur par défaut. +- `inherit` — indique que la valeur de la propriété `float` sera héritée de celle de l'élément parent. -<p>Dans l'exemple ci‑dessous nous faisons flotter un élément <code><div></code> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.</p> +Dans l'exemple ci‑dessous nous faisons flotter un élément `<div>` à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -288,60 +302,59 @@ p { padding: 10px; border-radius: 5px; } -</pre> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +``` -<div class="box">Boîte flottante</div> +```html +<h1>Exemple simple de boîte flottante</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<div class="box">Boîte flottante</div> -</pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css"> +```css .box { float: left; width: 150px; height: 150px; margin-right: 30px; } -</pre> +``` -<p>{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}</p> +{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }} -<div class="note"> -<p><strong>Note :</strong> Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> -</div> +> **Note :** Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés [float et clear](/fr/docs/Learn/CSS/CSS_layout/Floats). Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les [Méthodes de mise en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). -<h2 id="Techniques_de_positionnement">Techniques de positionnement</h2> +## Techniques de positionnement -<p>Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.</p> +Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page. -<p>Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.</p> +Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal. -<p>Il y a cinq types de positionnement à connaître :</p> +Il y a cinq types de positionnement à connaître : -<ul> - <li><strong>positionnement statique</strong> : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ».</li> - <li><strong>positionnement relatif : </strong>modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page.</li> - <li><strong>positionnement absolu</strong> : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément <code><html></code> (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle.</li> - <li><strong>positionnement fixe : </strong>tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page.</li> - <li><strong>positionnement collant : </strong>nouvelle méthode de positionnement qui fait qu'un élément se comporte comme <code>position: static</code> jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était <code>position: fixed</code>.</li> -</ul> +- **positionnement statique** : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ». +- **positionnement relatif :** modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page. +- **positionnement absolu** : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément `<html>` (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle. +- **positionnement fixe :** tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page. +- **positionnement collant :** nouvelle méthode de positionnement qui fait qu'un élément se comporte comme `position: static` jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était `position: fixed`. -<h3 id="Exemple_simple_de_positionnement">Exemple simple de positionnement</h3> +### Exemple simple de positionnement -<p>Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:</p> +Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci: -<pre class="brush: html"><h1>Positionnement</h1> +```html +<h1>Positionnement</h1> -<p>Je suis un élément de niveau bloc de base.</p> -<p class="positioned">Je suis un élément de niveau bloc de base.</p> -<p>Je suis un élément de niveau bloc de base.</p></pre> +<p>Je suis un élément de niveau bloc de base.</p> +<p class="positioned">Je suis un élément de niveau bloc de base.</p> +<p>Je suis un élément de niveau bloc de base.</p> +``` -<p>Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :</p> +Ce code HTML sera stylisé par défaut en utilisant la CSS suivante : -<pre class="brush: css">body { +```css +body { width: 500px; margin: 0 auto; } @@ -353,33 +366,38 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<p>Le rendu est le suivant:</p> +Le rendu est le suivant: -<p>{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}</p> +{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }} -<h3 id="Positionnement_relatif">Positionnement relatif</h3> +### Positionnement relatif -<p>Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :</p> +Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif : -<pre class="brush: css">.positioned { +```css +.positioned { position: relative; top: 30px; left: 30px; -}</pre> +} +``` -<p>Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur <code>relative</code> — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.</p> +Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur `relative` — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas. -<p>Ajouter ce code donne le résultat suivant :</p> +Ajouter ce code donne le résultat suivant : -<pre class="brush: html hidden"><h1>Positionnement relatif</h1> +```html hidden +<h1>Positionnement relatif</h1> -<p>Je suis un élément de niveau bloc de base.</p> -<p class="positioned">Voici un élément avec un positionnement relatif.</p> -<p>Je suis un élément de niveau bloc de base.</p></pre> +<p>Je suis un élément de niveau bloc de base.</p> +<p class="positioned">Voici un élément avec un positionnement relatif.</p> +<p>Je suis un élément de niveau bloc de base.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -391,39 +409,46 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}</p> +{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }} -<h3 id="Positionnement_absolu">Positionnement absolu</h3> +### Positionnement absolu -<p>Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.</p> +Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur. -<p>En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :</p> +En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu : -<pre class="brush: css">.positioned { +```css +.positioned { position: absolute; top: 30px; left: 30px; -}</pre> +} +``` -<p>Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur <code>absolute</code> et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :</p> +Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur `absolute` et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant : -<pre class="brush: html hidden"><h1>Positionnement absolu</h1> +```html hidden +<h1>Positionnement absolu</h1> -<p>Je suis un élément de niveau bloc de base.</p> -<p class="positioned">Voici un élément avec un positionnement absolu.</p> -<p>Je suis un élément de niveau bloc de base.</p></pre> +<p>Je suis un élément de niveau bloc de base.</p> +<p class="positioned">Voici un élément avec un positionnement absolu.</p> +<p>Je suis un élément de niveau bloc de base.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -435,48 +460,52 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: absolute; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); top: 30px; left: 30px; -}</pre> - -<p>{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}</p> +} +``` -<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> +{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }} -<h3 id="Positionnement_fixé">Positionnement fixé</h3> +C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). -<p>Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.</p> +### Positionnement fixé -<p>Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété <code>position: fixed</code>.</p> +Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui. -<pre class="brush: html"><h1>Positionnement fixé</h1> +Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété `position: fixed`. -<div class="positioned">Fixé</div> +```html +<h1>Positionnement fixé</h1> -<p>Paragraphe 1.</p> -<p>Paragraphe 2.</p> -<p>Paragraphe 3.</p> -</pre> +<div class="positioned">Fixé</div> -<pre class="brush: html hidden"><h1>Positionnement fixé</h1> +<p>Paragraphe 1.</p> +<p>Paragraphe 2.</p> +<p>Paragraphe 3.</p> +``` -<div class="positioned">Fixé</div> +```html hidden +<h1>Positionnement fixé</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<div class="positioned">Fixé</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -487,31 +516,37 @@ p { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: fixed; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}</p> +{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }} -<h3 id="Positionnement_collant">Positionnement collant</h3> +### Positionnement collant -<p>Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété <code>position: sticky</code>, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si <code>position: fixed</code> lui était appliqué.</p> +Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété `position: sticky`, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si `position: fixed` lui était appliqué. -<pre class="brush: html hidden"><h1>Positionnement collant</h1> +```html hidden +<h1>Positionnement collant</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<div class="positioned">Collé</div> +<div class="positioned">Collé</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -522,49 +557,53 @@ p { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: sticky; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}</p> +{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }} -<div class="note"> -<p><strong>Note :</strong> pour plus de précisions à propos du positionnement, voir l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> -</div> +> **Note :** pour plus de précisions à propos du positionnement, voir l'article [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). -<h2 id="Les_tableaux_CSS">Les tableaux CSS</h2> +## Les tableaux CSS -<p>Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).</p> +Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau). -<p>La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».</p> +La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ». -<p>Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.</p> +Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page. -<pre class="brush: html"><form> - <p>Tout d'abord, dites‑nous votre nom et votre âge.</p> - <div> - <label for="fname">Prénom :</label> - <input type="text" id="fname"> - </div> - <div> - <label for="lname">Nom :</label> - <input type="text" id="lname"> - </div> - <div> - <label for="age">Âge :</label> - <input type="text" id="age"> - </div> -</form></pre> +```html +<form> + <p>Tout d'abord, dites‑nous votre nom et votre âge.</p> + <div> + <label for="fname">Prénom :</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Nom :</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Âge :</label> + <input type="text" id="age"> + </div> +</form> +``` -<p>Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.</p> +Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout. -<p>Notez que les propriétés <code>display: table-caption;</code> et <code>caption-side: bottom;</code> ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments <code>input</code> dans le code source. Voilà une bonne dose de souplesse.</p> +Notez que les propriétés `display: table-caption;` et `caption-side: bottom;` ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments `input` dans le code source. Voilà une bonne dose de souplesse. -<pre class="brush: css">html { +```css +html { font-family: sans-serif; } @@ -598,69 +637,75 @@ form p { width: 400px; color: #999; font-style: italic; -}</pre> +} +``` -<p>Ce qui nous donne le résultat suivant:</p> +Ce qui nous donne le résultat suivant: -<p>{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}</p> +{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }} -<p>Vous pouvez également examiner cet exemple directement à <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">code source également</a>).</p> +Vous pouvez également examiner cet exemple directement à [css-tables-example.html](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) (voyez le [code source également](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). -<h2 id="Disposition_sur_plusieurs_colonnes">Disposition sur plusieurs colonnes</h2> +## Disposition sur plusieurs colonnes -<p>Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.</p> +Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile. -<p>Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.</p> +Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée. -<p>Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <code><div></code> de la classe <code>container</code>.</p> +Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur `<div>` de la classe `container`. -<pre class="brush: html"><div class="container"> - <h1>Disposition en colonnes</h1> +```html +<div class="container"> + <h1>Disposition en colonnes</h1> - <p>Paragraphe 1.</p> - <p>Paragraphe 2.</p> + <p>Paragraphe 1.</p> + <p>Paragraphe 2.</p> -</div> -</pre> +</div> +``` + +Noux utilisons une propriété `column-width` de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées. -<p>Noux utilisons une propriété <code>column-width</code> de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.</p> +```html hidden + <div class="container"> + <h2>Disposition en colonnes</h2> -<pre class="brush: html hidden"> <div class="container"> - <h2>Disposition en colonnes</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </div> - </div> - </pre> +``` -<pre class="brush: css hidden">body { max-width: 800px; margin: 0 auto; } </pre> +```css hidden +body { max-width: 800px; margin: 0 auto; } +``` -<pre class="brush: css"> .container { +```css + .container { column-width: 200px; - }</pre> + } +``` -<p>{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}</p> +{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !</p> +Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique ! -<p>{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}</p> +{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">La mise en page avec les CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [La mise en page avec les CSS](/fr/docs/Apprendre/CSS/CSS_layout) +- [Cours normal](/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md index e78ffa385a..7fd67d23b5 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md @@ -13,75 +13,92 @@ tags: translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -<p>Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> +Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (voyez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>) et une idée du fonctionnement de CSS (voyez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a> et <a href="/fr/docs/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (voyez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >) et une idée du fonctionnement de CSS (voyez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a> et + <a href="/fr/docs/Apprendre/CSS/styliser_boites">Styles de boîtes</a>). + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Comprendre les concepts fondamentaux derrière les systèmes de + disposition en trame utilisés avant que CSS Grid Layout soit disponible + dans les navigateurs. + </td> + </tr> + </tbody> </table> -<h2 id="Mise_en_page_et_systèmes_de_trames_avant_CSS_Grid_Layout">Mise en page et systèmes de trames avant CSS Grid Layout</h2> +## Mise en page et systèmes de trames avant CSS Grid Layout -<p>Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».</p> +Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ». -<p>Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.</p> +Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout. -<p>Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.</p> +Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes. -<p>Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.</p> +Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame. -<h2 id="Disposition_sur_deux_colonnes">Disposition sur deux colonnes</h2> +## Disposition sur deux colonnes -<p>Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier <code>index.html</code> sur l'ordinateur, en le remplissant avec le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modèle HTML simple</a> et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.</p> +Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier `index.html` sur l'ordinateur, en le remplissant avec le [modèle HTML simple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final. -<p>Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de <code>body</code> par ceci :</p> +Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de `body` par ceci : -<pre class="brush: html"><h1>Exemple de disposition sur 2 colonnes</h1> -<div> - <h2>Première colonne</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -</div> +```html +<h1>Exemple de disposition sur 2 colonnes</h1> +<div> + <h2>Première colonne</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> -<div> - <h2>Seconde colonne</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</div></pre> +<div> + <h2>Seconde colonne</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.</p> +Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre. -<p>Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :</p> +Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; -}</pre> +} +``` -<p>Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :</p> +Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS : -<pre class="brush: css">div:nth-of-type(1) { +```css +div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; -}</pre> +} +``` -<p>Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :</p> +Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi : -<pre class="brush: css">div:nth-of-type(1) { +```css +div:nth-of-type(1) { width: 48%; float: left; } @@ -89,26 +106,29 @@ div:nth-of-type(2) { div:nth-of-type(2) { width: 48%; float: right; -}</pre> +} +``` -<p>En mettant tout ensemble, voici le résultat :</p> +En mettant tout ensemble, voici le résultat : -<h3>Exemple complet</h3> +### Exemple complet -<pre class="brush: html hidden"><h1>Exemple de disposition sur 2 colonnes</h1> +```html hidden +<h1>Exemple de disposition sur 2 colonnes</h1> -<div> - <h2>Première colonne</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -</div> +<div> + <h2>Première colonne</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> -<div> - <h2>Seconde colonne</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</div> -</pre> +<div> + <h2>Seconde colonne</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -123,60 +143,61 @@ div:nth-of-type(2) { width: 48%; float: right; } -</pre> +``` -<p>{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}</p> +{{ EmbedLiveSample('Exemple_complet', '100%', 520) }} -<p>Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une <strong>disposition fluide</strong>, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.</p> +Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une **disposition fluide**, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> -</div> +> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)). -<h2 id="Ancienne_création_d'un_cadre_de_trames">Ancienne création d'un cadre de trames</h2> +## Ancienne création d'un cadre de trames -<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> +La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le [dégagement des boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats). -<p>Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.</p> +Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes. -<p>Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.</p> +Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2. -<h3 id="Une_simple_trame_de_largeurs_fixes">Une simple trame de largeurs fixes</h3> +### Une simple trame de largeurs fixes -<p>Créons d'abord une trame à colonnes à largeur fixe.</p> +Créons d'abord une trame à colonnes à largeur fixe. -<p>Commençons par faire une copie locale du fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> qui comporte le balisage suivant dans <code>body</code>.</p> +Commençons par faire une copie locale du fichier exemple [simple-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html) qui comporte le balisage suivant dans `body`. -<pre class="brush: html"><div class="wrapper"> - <div class="row"> - <div class="col">1</div> - <div class="col">2</div> - <div class="col">3</div> - <div class="col">4</div> - <div class="col">5</div> - <div class="col">6</div> - <div class="col">7</div> - <div class="col">8</div> - <div class="col">9</div> - <div class="col">10</div> - <div class="col">11</div> - <div class="col">12</div> - </div> - <div class="row"> - <div class="col span1">13</div> - <div class="col span6">14</div> - <div class="col span3">15</div> - <div class="col span2">16</div> - </div> -</div></pre> +```html +<div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div> +``` -<p>Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.</p> +Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame. -<p><img alt="" src="simple-grid-finished.png"></p> + -<p>À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à <code>border-box</code> sur tous les éléments du site (voir <a href="/fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte">Modification totale du modèle de boîte</a> pour plus d'explications).</p> +À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à `border-box` sur tous les éléments du site (voir [Modification totale du modèle de boîte](</fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte>) pour plus d'explications). -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -187,40 +208,44 @@ body { .wrapper { padding-right: 20px; -}</pre> +} +``` -<p>Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :</p> +Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente : -<pre class="brush: css">.row { +```css +.row { clear: both; -}</pre> +} +``` -<p>Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.</p> +Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles. -<p>Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.</p> +Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240. -<p>Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.</p> +Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels. -<p>L'étape suivante consiste à créer un règle pour la classe <code>.col</code> la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :</p> +L'étape suivante consiste à créer un règle pour la classe `.col` la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS : -<pre class="brush: css">.col { +```css +.col { float: left; margin-left: 20px; width: 60px; background: rgb(255, 150, 150); -}</pre> +} +``` -<p>La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.</p> +La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame. -<div class="note"> -<p><strong>Note :</strong> Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> -</div> +> **Note :** Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune. -<p>Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.</p> +Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes. -<p>Ajoutez ce qui suit en bas de la CSS :</p> +Ajoutez ce qui suit en bas de la CSS : -<pre class="brush: css">/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */ +```css +/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */ .col.span2 { width: 140px; } /* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */ .col.span3 { width: 220px; } @@ -233,50 +258,52 @@ body { .col.span9 { width: 700px; } .col.span10 { width: 780px; } .col.span11 { width: 860px; } -.col.span12 { width: 940px; }</pre> +.col.span12 { width: 940px; } +``` -<p>Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.</p> +Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet. -<div class="note"> -<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> -</div> +> **Note :** Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre [version terminée](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) sur GitHub (la voir aussi [en fonctionnement direct](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)). -<p>Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :</p> +Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci : -<pre class="brush: css"><div class="row"> - <div class="col span8">13</div> - <div class="col span4">14</div> -</div></pre> +```css +<div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div> +``` -<p>Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !</p> +Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super ! -<h3 id="Creation_d'une_trame_fluide">Creation d'une trame fluide</h3> +### Creation d'une trame fluide -<p>Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.</p> +Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages. -<p>L'équation qui transforme une largeur fixe en pourcentage est la suivante :</p> +L'équation qui transforme une largeur fixe en pourcentage est la suivante : -<pre>cible / contexte = résultat</pre> + cible / contexte = résultat -<p>Pour la largeur de la première colonne, la <strong>largeur cible</strong> est de 60 pixels et le <strong>contexte</strong> est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.</p> +Pour la largeur de la première colonne, la **largeur cible** est de 60 pixels et le **contexte** est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage. -<pre>60 / 960 = 0.0625</pre> + 60 / 960 = 0.0625 -<p>Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.</p> +Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%. -<p>En faisant de même pour la largeur de la gouttière :</p> +En faisant de même pour la largeur de la gouttière : -<pre>20 / 960 = 0.02083333333</pre> + 20 / 960 = 0.02083333333 -<p>Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle <code>.col</code> et de {{cssxref("padding-right")}} dans la règle <code>.wrapper</code>.</p> +Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle `.col` et de {{cssxref("padding-right")}} dans la règle `.wrapper`. -<h4 id="Mise_à_jour_de_la_trame">Mise à jour de la trame</h4> +#### Mise à jour de la trame -<p>Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a> comme point de départ.</p> +Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) comme point de départ. -<p>Mettez à jour la deuxième règle CSS (avec le sélecteur <code>.wrapper</code>) comme suit :</p> +Mettez à jour la deuxième règle CSS (avec le sélecteur `.wrapper`) comme suit : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 980px; margin: 0 auto; @@ -284,24 +311,28 @@ body { .wrapper { padding-right: 2.08333333%; -}</pre> +} +``` -<p>Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.</p> +Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large. -<p>Ensuite, mettez à jour les quatre règles CSS (du sélecteur <code>.col</code>) ainsi :</p> +Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi : -<pre class="brush: css">.col { +```css +.col { float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255, 150, 150); -}</pre> +} +``` -<p>Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles <code>.col.span</code> en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.</p> +Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles `.col.span` en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous. -<p>Mettez à jour le bloc bas des règles CSS avec ce qui suit :</p> +Mettez à jour le bloc bas des règles CSS avec ce qui suit : -<pre class="brush: css">/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */ +```css +/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */ .col.span3 { width: 22.91666666%; } @@ -314,27 +345,29 @@ body { .col.span9 { width: 72.91666664%; } .col.span10 { width: 81.24999997%; } .col.span11 { width: 89.5833333%; } -.col.span12 { width: 97.91666663%; }</pre> +.col.span12 { width: 97.91666663%; } +``` -<p>Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.</p> +Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient. -<div class="note"> -<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> -</div> +> **Note :** Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre [version terminée sur GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (voir aussi celle [s'exécutant en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)). -<h3 id="Faciliter_les_calculs_avec_la_fonction_calc()">Faciliter les calculs avec la fonction calc()</h3> +### Faciliter les calculs avec la fonction calc() -<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> +Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir [cet exemple dans le didacticiel MediaRecorder API](</fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>). -<p>Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction <code>calc()</code> nous permet de faire ce calcul dans la valeur <code>width</code> même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :</p> +Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction `calc()` nous permet de faire ce calcul dans la valeur `width` même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple : -<pre class="brush: css">.col.span4 { +```css +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); -}</pre> +} +``` -<p>Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :</p> +Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique : -<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +```css +.col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } @@ -344,85 +377,87 @@ body { .col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } .col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } .col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } -.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); } +``` -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> -</div> +> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)). -<div class="note"> -<p><strong>Note :</strong> Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> -</div> +> **Note :** Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction `calc()`, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9. -<h3 id="Systèmes_de_trames_«_sémantiques_»_vs._«_non_sémantiques_»">Systèmes de trames « sémantiques » vs. « non sémantiques »</h3> +### Systèmes de trames « sémantiques » vs. « non sémantiques » -<p>Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes <code>span2</code>, <code>span3</code>, etc.</p> +Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes `span2`, `span3`, etc. -<p>Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe <code>content</code> que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe <code>span8</code>, ce qui vous donne une règle :</p> +Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe `content` que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe `span8`, ce qui vous donne une règle : -<pre class="brush: css">.content { +```css +.content { width: calc((6.25%*8) + (2.08333333%*7)); -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> -</div> +> **Note :** Si vous deviez utiliser un préprocesseur tel que [Sass](http://sass-lang.com/), vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous. -<h3 id="Décalage_du_conteneur_d'une_trame">Décalage du conteneur d'une trame</h3> +### Décalage du conteneur d'une trame -<p>La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe <code>offset</code> pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !</p> +La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe `offset` pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs ! -<p>Essayons.</p> +Essayons. -<p>Démarrons avec le code précédent ou utilisons le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> comme point de départ.</p> +Démarrons avec le code précédent ou utilisons le fichier [fluid-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) comme point de départ. -<p>Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :</p> +Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS : -<pre class="brush: css">.offset-by-one { +```css +.offset-by-one { margin-left: calc(6.25% + (2.08333333%*2)); -}</pre> +} +``` -<p>Ou, si vous préférez calculer le pourcentage vous-même, utilisez :</p> +Ou, si vous préférez calculer le pourcentage vous-même, utilisez : -<pre class="brush: css">.offset-by-one { +```css +.offset-by-one { margin-left: 10.41666666%; -}</pre> +} +``` -<p>Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :</p> +Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML : -<pre class="brush: html"><div class="col span6">14</div></pre> +```html +<div class="col span6">14</div> +``` -<p>remplacez‑le par :</p> +remplacez‑le par : -<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> +```html +<div class="col span5 offset-by-one">14</div> +``` -<div class="note"> -<p><strong>Note :</strong> Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> -</div> +> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage ! -<p>Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">l'exécution directement</a>). L'exemple terminé doit ressembler à ceci :</p> +Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci : -<p><img alt="" src="offset-grid-finished.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> -</div> +> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two` ? -<h3 id="Limitations_des_trames_de_boîtes_flottantes">Limitations des trames de boîtes flottantes</h3> +### Limitations des trames de boîtes flottantes -<p>En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.</p> +En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame. -<p>N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.</p> +N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché. -<p>La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..</p> +La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée.. -<h2 id="Trames_Flexbox">Trames Flexbox ?</h2> +## Trames Flexbox ? -<p>Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.</p> +Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus. -<p>Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes <code>wrapper</code>, <code>row</code> et <code>col</code> :</p> +Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes `wrapper`, `row` et `col` : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 980px; margin: 0 auto; @@ -443,140 +478,147 @@ body { width: 6.25%; flex: 1 1 auto; background: rgb(255,150,150); -}</pre> +} +``` -<p>Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> (voir aussi en <a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">exécution directe</a>).</p> +Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code [flexbox-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html) (voir aussi en [exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)). -<p>Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à <code>display : flex</code>.</p> +Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à `display : flex`. -<p>Pour <code>.col</code> nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à <code>auto</code>. Comme la valeur {{cssxref("width")}} de l'élément est fixée, <code>auto</code> utilisera cette valeur en tant que valeur de <code>flex-basis</code>.</p> +Pour `.col` nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à `auto`. Comme la valeur {{cssxref("width")}} de l'élément est fixée, `auto` utilisera cette valeur en tant que valeur de `flex-basis`. -<p>Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.</p> +Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne. -<p><img alt="" src="flexbox-grid-incomplete.png"></p> + -<p>Pour corriger cela, nous avons encore besoin d'inclure les classes <code>span</code> pour donner une largeur qui remplave la valeur donnée par <code>flex-basis</code> pour cet élément.</p> +Pour corriger cela, nous avons encore besoin d'inclure les classes `span` pour donner une largeur qui remplave la valeur donnée par `flex-basis` pour cet élément. -<p>Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.</p> +Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos. -<p>Flexbox est un design <strong>mono-dimensionnel</strong> par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes <strong>et</strong> pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.</p> +Flexbox est un design **mono-dimensionnel** par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes **et** pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes. -<p>Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.</p> +Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité. -<h2 id="Systèmes_de_trame_tierces_parties">Systèmes de trame tierces parties</h2> +## Systèmes de trame tierces parties -<p>Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que <a href="http://getbootstrap.com/">Bootstrap</a> et <a href="http://foundation.zurb.com/">Foundation</a> incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.</p> +Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que [Bootstrap](http://getbootstrap.com/) et [Foundation](http://foundation.zurb.com/) incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs. -<p>Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.</p> +Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS. -<p>Commençons par visiter le <a href="http://getskeleton.com/">site web de Skeleton</a> et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers <em>skeleton.css</em> et <em>normalize.css</em> dans un nouveau répertoire.</p> +Commençons par visiter le [site web de Skeleton](http://getskeleton.com/) et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers _skeleton.css_ et _normalize.css_ dans un nouveau répertoire. -<p>Faites une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> et enregistrez le dans le même répertoire que <em>skeleton.css</em> et <em>normalize.css</em>.</p> +Faites une copie de [html-skeleton.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html) et enregistrez le dans le même répertoire que _skeleton.css_ et _normalize.css_. -<p>Incorporez les .css <em>skeleton</em> et <em>normalize</em> dans la page HTML, en ajoutant ce qui suit dans <code>head</code> :</p> +Incorporez les .css _skeleton_ et _normalize_ dans la page HTML, en ajoutant ce qui suit dans `head` : -<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> -<link href="skeleton.css" rel="stylesheet"></pre> +```html +<link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"> +``` -<p>Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.</p> +Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment. -<div class="note"> -<p><strong>Note :</strong> <a href="/fr/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> +> **Note :** [Normalize](/fr/docs/) est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs. + +Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML : + +```html +<div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> </div> +``` + +Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe `container` — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels. -<p>Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :</p> - -<pre class="brush: html"><div class="container"> - <div class="row"> - <div class="col">1</div> - <div class="col">2</div> - <div class="col">3</div> - <div class="col">4</div> - <div class="col">5</div> - <div class="col">6</div> - <div class="col">7</div> - <div class="col">8</div> - <div class="col">9</div> - <div class="col">10</div> - <div class="col">11</div> - <div class="col">12</div> - </div> - <div class="row"> - <div class="col">13</div> - <div class="col">14</div> - <div class="col">15</div> - <div class="col">16</div> - </div> -</div></pre> - -<p>Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe <code>container</code> — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.</p> - -<p>Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément <code><div></code> est centré en utilisant la valeur <code>auto</code> pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur <code>border-box</code> comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.</p> - -<pre class="brush: css">.container { +Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément `<div>` est centré en utilisant la valeur `auto` pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur `border-box` comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale. + +```css +.container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -}</pre> +} +``` -<p>Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <code><div></code> supplémentaire ou d'un autre élément de la classe <code>row</code> imbriqué entre le <code><div></code> de <code>content </code>et les véritables conteneurs <code><div> </code>de contenu. Nous avons aussi déjà fait cela.</p> +Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `<div>` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `<div>` de `content `et les véritables conteneurs `<div> `de contenu. Nous avons aussi déjà fait cela. -<p>Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes <code>one column</code> pour qu'elles se répartissent à raison de une par colonne.</p> +Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne. -<p>Ajoutez maintenant cet extrait de lignes de code :</p> +Ajoutez maintenant cet extrait de lignes de code : -<pre class="brush: html"><div class="container"> - <div class="row"> - <div class="one column">1</div> - <div class="one column">2</div> - <div class="one column">3</div> +```html +<div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> /* and so on */ - </div> -</div></pre> + </div> +</div> +``` -<p>Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :</p> +Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi : -<pre class="brush: html"><div class="row"> - <div class="one column">13</div> - <div class="six columns">14</div> - <div class="three columns">15</div> - <div class="two columns">16</div> -</div></pre> +```html +<div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div> +``` -<p>Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.</p> +Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne. -<div class="note"> -<p><strong>Note :</strong> Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> -</div> +> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)). -<p>Si vous regardez dans le fichier <em>skeleton.css</em> vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.</p> +Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait. -<pre class="brush: css">.three.columns { width: 22%; }</pre> +```css +.three.columns { width: 22%; } +``` -<p>Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.</p> +Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même. -<p>Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.</p> +Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.</p> +Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/media_queries/index.md b/files/fr/learn/css/css_layout/media_queries/index.md index f629d17eb3..6a9f08ddef 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.md +++ b/files/fr/learn/css/css_layout/media_queries/index.md @@ -4,197 +4,216 @@ slug: Learn/CSS/CSS_layout/Media_queries translation_of: Learn/CSS/CSS_layout/Media_queries original_slug: Apprendre/CSS/CSS_layout/Media_queries --- -<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<p>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</p> +The **CSS Media Query** gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To understand how to use media queries, and the most common approach for using them to create responsive designs.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td> + HTML basics (study + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction to HTML</a + >), and an idea of how CSS works (study + <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and + <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.) + </td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td> + To understand how to use media queries, and the most common approach for + using them to create responsive designs. + </td> + </tr> + </tbody> </table> -<h2 id="Media_Query_Basics">Media Query Basics</h2> +## Media Query Basics -<p>The simplest media query syntax looks like this:</p> +The simplest media query syntax looks like this: -<pre class="brush: css">@media <em>media-type</em> and (<em>media-feature-rule</em>) { +```css +@media media-type and (media-feature-rule) { /* CSS rules go here */ -}</pre> +} +``` -<p>It consists of:</p> +It consists of: -<ul> - <li>A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).</li> - <li>A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.</li> - <li>A set of CSS rules that will be applied if the test passes and the media type is correct.</li> -</ul> +- A media type, which tells the browser what kind of media this code is for (e.g. print, or screen). +- A media expression, which is a rule, or test that must be passed for the contained CSS to be applied. +- A set of CSS rules that will be applied if the test passes and the media type is correct. -<h3 id="Media_types">Media types</h3> +### Media types -<p>The possible types of media you can specify are:</p> +The possible types of media you can specify are: -<ul> - <li><code>all</code></li> - <li><code>print</code></li> - <li><code>screen</code></li> - <li><code>speech</code></li> -</ul> +- `all` +- `print` +- `screen` +- `speech` -<p>The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.</p> +The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser. -<pre class="brush: css">@media print { +```css +@media print { body { font-size: 12pt; } -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> the media type here is different from the so-called {{glossary("MIME type")}}.</p> -</div> +> **Note :** the media type here is different from the so-called {{glossary("MIME type")}}. -<div class="note"> -<p><strong>Note :</strong> there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> -</div> +> **Note :** there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided. -<div class="note"> -<p><strong>Note :</strong> Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> -</div> +> **Note :** Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types. -<h3 id="Media_feature_rules">Media feature rules</h3> +### Media feature rules -<p>After specifying the type, you can then target a media feature with a rule.</p> +After specifying the type, you can then target a media feature with a rule. -<h4 id="Width_and_height">Width and height</h4> +#### Width and height -<p>The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the <code>min-width</code>, <code>max-width</code>, and <code>width</code> media features.</p> +The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the `min-width`, `max-width`, and `width` media features. -<p>These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.</p> +These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. -<pre class="brush: css">@media screen and (width: 600px) { +```css +@media screen and (width: 600px) { body { color: red; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/width.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html). -<p>The <code>width</code> (and <code>height</code>) media features can be used as ranges, and therefore be prefixed with <code>min-</code> or <code>max-</code> to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use <code>max-width</code>:</p> +The `width` (and `height`) media features can be used as ranges, and therefore be prefixed with `min-` or `max-` to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use `max-width`: -<pre class="brush: css">@media screen and (max-width: 400px) { +```css +@media screen and (max-width: 400px) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/max-width.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html). -<p>In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see <code>width</code> or <code>height</code> used alone.</p> +In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see `width` or `height` used alone. -<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> +There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at [Using Media Queries: Media Features](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features). -<h4 id="Orientation">Orientation</h4> +#### Orientation -<p>One well-supported media feature is <code>orientation</code>, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.</p> +One well-supported media feature is `orientation`, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query. -<pre class="brush: css">@media (orientation: landscape) { +```css +@media (orientation: landscape) { body { color: rebeccapurple; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/orientation.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html). -<p>A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.</p> +A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode. -<h4 id="Use_of_pointing_devices">Use of pointing devices</h4> +#### Use of pointing devices -<p>As part of the Level 4 specification, the <code>hover</code> media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.</p> +As part of the Level 4 specification, the `hover` media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover. -<pre class="brush: css">@media (hover: hover) { +```css +@media (hover: hover) { body { color: rebeccapurple; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/hover.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html). -<p>If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.</p> +If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over. -<p>Also in Level 4 is the <code>pointer</code> media feature. This takes three possible values, <code>none</code>, <code>fine</code> and <code>coarse</code>. A <code>fine</code> pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A <code>coarse</code> pointer is your finger on a touchscreen. The value <code>none</code> means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.</p> +Also in Level 4 is the `pointer` media feature. This takes three possible values, `none`, `fine` and `coarse`. A `fine` pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A `coarse` pointer is your finger on a touchscreen. The value `none` means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands. -<p>Using <code>pointer</code> can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.</p> +Using `pointer` can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen. -<h2 id="More_complex_media_queries">More complex media queries</h2> +## More complex media queries -<p>With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.</p> +With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched. -<h3 id="and_logic_in_media_queries">"and" logic in media queries</h3> +### "and" logic in media queries -<p>To combine media features you can use <code>and</code> in much the same way as we have used <code>and</code> above to combine a media type and feature. For example, we might want to test for a <code>min-width</code> and <code>orientation</code>. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.</p> +To combine media features you can use `and` in much the same way as we have used `and` above to combine a media type and feature. For example, we might want to test for a `min-width` and `orientation`. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode. -<pre class="brush: css">@media screen and (min-width: 400px) and (orientation: landscape) { +```css +@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/and.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html). -<h3 id="or_logic_in_media_queries">"or" logic in media queries</h3> +### "or" logic in media queries -<p>If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.</p> +If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches. -<pre class="brush: css">@media screen and (min-width: 400px), screen and (orientation: landscape) { +```css +@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/or.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html). -<h3 id="not_logic_in_media_queries">"not" logic in media queries</h3> +### "not" logic in media queries -<p>You can negate an entire media query by using the <code>not</code> operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.</p> +You can negate an entire media query by using the `not` operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait. -<pre class="brush: css">@media not all and (orientation: landscape) { +```css +@media not all and (orientation: landscape) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/not.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html). -<h2 id="How_to_choose_breakpoints">How to choose breakpoints</h2> +## How to choose breakpoints -<p>In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.</p> +In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports. -<p>There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as <strong>breakpoints</strong>.</p> +There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as **breakpoints**. -<p>The <a href="/fr/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> +The [Responsive Design Mode](/fr/docs/Tools/Responsive_Design_Mode) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design. -<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="rwd-mode.png"></p> + -<h2 id="Active_learning_mobile_first_responsive_design">Active learning: mobile first responsive design</h2> +## Active learning: mobile first responsive design -<p>Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as <strong>mobile first</strong> responsive design and is quite often the best approach to follow.</p> +Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as **mobile first** responsive design and is quite often the best approach to follow. -<p>The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.</p> +The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default. -<p>The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.</p> +The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same. -<h3 id="Walkthrough_a_simple_mobile-first_layout">Walkthrough: a simple mobile-first layout</h3> +### Walkthrough: a simple mobile-first layout -<p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p> +Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout. -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -244,63 +263,65 @@ nav a:hover { article { margin-bottom: 1em; } -</pre> - -<p>We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.</p> - -<pre class="brush: html"><body> - <div class="wrapper"> - <header> - <nav> - <ul> - <li><a href="">About</a></li> - <li><a href="">Contact</a></li> - <li><a href="">Meet the team</a></li> - <li><a href="">Blog</a></li> - </ul> - </nav> - </header> - <main> - <article> - <div class="content"> - <h1>Veggies!</h1> - <p> +``` + +We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable. + +```html +<body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">About</a></li> + <li><a href="">Contact</a></li> + <li><a href="">Meet the team</a></li> + <li><a href="">Blog</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>Veggies!</h1> + <p> ... - </p> - </div> - <aside class="related"> - <p> + </p> + </div> + <aside class="related"> + <p> ... - </p> - </aside> - </article> - - <aside class="sidebar"> - <h2>External vegetable-based links</h2> - <ul> - <li> + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>External vegetable-based links</h2> + <ul> + <li> ... - </li> - </ul> - </aside> - </main> + </li> + </ul> + </aside> + </main> - <footer><p>&copy;2019</p></footer> - </div> - </body> -</pre> + <footer><p>©2019</p></footer> + </div> + </body> +``` -<p>This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.</p> +This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site. -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">Open step 1</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">view the source</a>.</p> +[Open step 1](https://mdn.github.io/css-examples/learn/media-queries/step1.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html). -<p><strong>If you want to follow on and implement this example as we go, make a local copy of <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a> on your computer.</strong></p> +**If you want to follow on and implement this example as we go, make a local copy of [step1.html](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html) on your computer.** -<p>From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.</p> +From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size. -<p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p> +**Add the below code into the bottom of your step1.html CSS.** -<pre class="brush: css">@media screen and (min-width: 40em) { +```css +@media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; @@ -315,17 +336,18 @@ article { flex: 1; } } -</pre> +``` -<p>This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.</p> +This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row. -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">Open step 2</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">view the source</a>.</p> +[Open step 2](https://mdn.github.io/css-examples/learn/media-queries/step2.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html). -<p>Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.</p> +Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint. -<p><strong>Again, add the below code into the bottom of your step1.html CSS.</strong></p> +**Again, add the below code into the bottom of your step1.html CSS.** -<pre class="brush: css"><code>@media screen and (min-width: 70em) { +```css +@media screen and (min-width: 70em) { main { display: grid; grid-template-columns: 3fr 1fr; @@ -340,43 +362,46 @@ article { border-top: 1px solid #ccc; margin-top: 2em; } -}</code> -</pre> - -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">Open step 3</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">view the source</a>.</p> - -<p>If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.</p> - -<h2 id="Do_you_really_need_a_media_query">Do you really need a media query?</h2> - -<p>Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.</p> - -<p>This could be achieved using the following:</p> - -<pre class="brush: html"><ul class="grid"> - <li> - <h2>Card 1</h2> - <p>...</p> - </li> - <li> - <h2>Card 2</h2> - <p>...</p> - </li> - <li> - <h2>Card 3</h2> - <p>...</p> - </li> - <li> - <h2>Card 4</h2> - <p>...</p> - </li> - <li> - <h2>Card 5</h2> - <p>...</p> - </li> -</ul></pre> - -<pre class="brush: css">.grid { +} +``` + +[Open step 3](https://mdn.github.io/css-examples/learn/media-queries/step3.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html). + +If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design. + +## Do you really need a media query? + +Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all. + +This could be achieved using the following: + +```html +<ul class="grid"> + <li> + <h2>Card 1</h2> + <p>...</p> + </li> + <li> + <h2>Card 2</h2> + <p>...</p> + </li> + <li> + <h2>Card 3</h2> + <p>...</p> + </li> + <li> + <h2>Card 4</h2> + <p>...</p> + </li> + <li> + <h2>Card 5</h2> + <p>...</p> + </li> +</ul> +``` + +```css +.grid { list-style: none; margin: 0; padding: 0; @@ -388,39 +413,38 @@ article { .grid li { border: 1px solid #666; padding: 10px; -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">Open the grid layout example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">view the source</a>.</p> +[Open the grid layout example](https://mdn.github.io/css-examples/learn/media-queries/grid.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html). -<p>With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.</p> +With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results. -<h2 id="Test_your_skills!">Test your skills!</h2> +## Test your skills! -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/fr/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see [Test your skills: Responsive Web Design](/fr/docs/Learn/CSS/CSS_layout/rwd_skills). -<h2 id="Summary">Summary</h2> +## Summary -<p>In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.</p> +In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design. -<p>You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the <code>pointer</code> media feature.</p> +You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the `pointer` media feature. -<p>You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.</p> +You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Beginner's guide to media queries](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Legacy layout methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental layout comprehension assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.md b/files/fr/learn/css/css_layout/multiple-column_layout/index.md index 248c788e2b..b6e2cfb1ce 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.md @@ -13,128 +13,146 @@ tags: translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</div> - -<p>Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> +Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Apprendre comment créer une disposition de contenu sur plusieurs + colonnes dans une page web, comme dans un journal. + </td> + </tr> + </tbody> </table> -<h2 id="Un_exemple_élémentaire">Un exemple élémentaire</h2> +## Un exemple élémentaire -<p>Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « <em>multicol</em> ». Vous pourrez effectuer le suivi de cet article en <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">téléchargeant le fichier de depart multicol</a> et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.</p> +Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « *multicol* ». Vous pourrez effectuer le suivi de cet article en [téléchargeant le fichier de depart multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler. -<p>Notre point de départ contient un HTML très simple ; une enveloppe de la classe <code>container</code> dans laquelle nous avons placé un en‑tête et quelques paragraphes.</p> +Notre point de départ contient un HTML très simple ; une enveloppe de la classe `container` dans laquelle nous avons placé un en‑tête et quelques paragraphes. -<p>L'élément {{htmlelement("div")}} de la classe <code>container</code> sera notre conteneur multi‑colonnes. Nous basculons dans une disposition <em>multicol</em> en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété <code>column-count</code> crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :</p> +L'élément {{htmlelement("div")}} de la classe `container` sera notre conteneur multi‑colonnes. Nous basculons dans une disposition _multicol_ en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété `column-count` crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes : -<pre class="brush: css">.container { +```css +.container { column-count: 3; } -</pre> +``` -<p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p> +Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } - </pre> -<pre class="brush: html"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +``` + +```html +<div class="container"> + <h1>Simple exemple <i>multicol</i></h1> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit - quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus.</p> -</div> -</pre> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}</p> +{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }} -<h3>Définir column-width</h3> +### Définir column-width -<p>Modifiez la CSS pour utiliser <code>column-width</code> ainsi :</p> +Modifiez la CSS pour utiliser `column-width` ainsi : -<pre class="brush: css">.container { +```css +.container { column-width: 200px; } -</pre> +``` -<p>Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.</p> +Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -}</pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +```html hidden +<div class="container"> + <h1>Simple exemple <i>multicol</i></h1> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit - quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus.</p> -</div></pre> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}</p> +{{ EmbedLiveSample('Définir_column-width', '100%', 400) }} -<h2 id="Style_des_colonnes">Style des colonnes</h2> +## Style des colonnes -<p>Les colonnes créées avec <em>multicol</em> ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :</p> +Les colonnes créées avec _multicol_ ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes : -<ul> - <li>modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}.</li> - <li>ajouter une règle entre colonnes avec {{cssxref("column-rule")}}.</li> -</ul> +- modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}. +- ajouter une règle entre colonnes avec {{cssxref("column-rule")}}. -<p>En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété <code>column-gap</code> :</p> +En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété `column-gap` : -<pre class="brush: css">.container { +```css +.container { column-width: 200px; column-gap: 20px; -}</pre> +} +``` -<p>Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec <code>column-rule</code>. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, <code>column-rule</code>, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.</p> +Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec `column-rule`. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, `column-rule`, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs. -<pre class="brush: css">.container { +```css +.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); -}</pre> +} +``` -<p>Ajoutons des règles pour les divers styles et couleurs.</p> +Ajoutons des règles pour les divers styles et couleurs. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -144,101 +162,107 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); -}</pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +```html hidden +<div class="container"> + <h1>Simple exemple <i>multicol</i></h1> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit - quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus.</p> -</div></pre> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}</p> +{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }} -<p>Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec <code>column-gap</code>. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.</p> +Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec `column-gap`. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes. -<h2 id="Colonnes_et_coupures">Colonnes et coupures</h2> +## Colonnes et coupures -<p>Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur <em>multicol</em>, il est découpé en colonnes de texte pour permettre cette disposition.</p> +Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur _multicol_, il est découpé en colonnes de texte pour permettre cette disposition. -<p>Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé <em>multicol</em> pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.</p> +Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé _multicol_ pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -} </pre> -</div> +} +``` -<pre class="brush: html hidden"><div class="container"> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat +```html hidden +<div class="container"> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> -</div> -</pre> +</div> +``` -<pre class="brush: css">.container { +```css +.container { column-width: 250px; column-gap: 20px; } @@ -248,17 +272,19 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}</p> +{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }} -<h3>Utiliser break-inside</h3> +### Utiliser break-inside -<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> +Pour contrôler ce comportement, utilisons les propriétés stipulées dans [CSS Fragmentation](/fr/docs/Web/CSS/CSS_Fragmentation) (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le _multicol_ et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur `avoid` aux règles pour `.card`, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée. -<p>Il est également préférable d'ajouter l'ancienne propriété <code>page-break-inside: avoid</code> pour une meilleure prise en charge par les divers navigateurs.</p> +Il est également préférable d'ajouter l'ancienne propriété `page-break-inside: avoid` pour une meilleure prise en charge par les divers navigateurs. -<pre class="brush: css">.card { +```css +.card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); @@ -266,77 +292,81 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; } -</pre> +``` -<p>Actualisez la page et les boîtes devraient rester entières.</p> +Actualisez la page et les boîtes devraient rester entières. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -} </pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat +```html hidden +<div class="container"> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> -</div> -</pre> +</div> +``` -<pre class="brush: css">.container { +```css +.container { column-width: 250px; column-gap: 20px; } @@ -348,34 +378,31 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}</p> +{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.</p> +Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> -</ul> +- [Coupures avec la CSS](/fr/docs/Web/CSS/CSS_Fragmentation) +- [Utilisation des mises en page sur plusieurs colonnes](/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/normal_flow/index.md b/files/fr/learn/css/css_layout/normal_flow/index.md index b0edfa8415..95ee411f27 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.md +++ b/files/fr/learn/css/css_layout/normal_flow/index.md @@ -4,71 +4,84 @@ slug: Learn/CSS/CSS_layout/Normal_Flow translation_of: Learn/CSS/CSS_layout/Normal_Flow original_slug: Apprendre/CSS/CSS_layout/Normal_Flow --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}} -<p>Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> +Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont les CSS fonctionnent (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et avoir une idée de la manière dont les CSS fonctionnent (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Expliquer comment les navigateurs composent les pages web par défaut, + avant que nous commencions à faire des modifications. + </td> + </tr> + </tbody> </table> -<p>Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.</p> +Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page. -<p>Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.</p> +Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document. -<h2 id="Disposition_des_éléments_par_défaut">Disposition des éléments par défaut</h2> +## Disposition des éléments par défaut -<p>Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.</p> +Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt. -<p>Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec <code>display: bloc ;</code> (ou même <code>display: inline-block ;</code> qui mélange les caractéristiques des deux).</p> +Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec `display: bloc ;` (ou même `display: inline-block ;` qui mélange les caractéristiques des deux). -<p>Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.</p> +Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement. -<p>Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.</p> +Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne. -<p>Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.</p> +Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut. -<p>Voici un exemple simple expliquant cela :</p> +Voici un exemple simple expliquant cela : -<h3 id="Exemple">Exemple</h3> +### Exemple -<pre class="brush: html"><h2>Cours d'un document de base</h2> +```html +<h2>Cours d'un document de base</h2> -<p>Je suis un élément de niveau bloc de base. +<p>Je suis un élément de niveau bloc de base. Mes éléments de niveau bloc adjacents sont sur de - nouvelles lignes en dessous de moi.</p> + nouvelles lignes en dessous de moi.</p> -<p>Par défaut, nous occupons 100% de la largeur +<p>Par défaut, nous occupons 100% de la largeur de notre élément parent et nous sommes aussi hauts que notre contenu enfant. Nos largeur et hauteur totales sont égales à la largeur/hauteur de notre - contenu + remplissage + encadrement.</p> + contenu + remplissage + encadrement.</p> -<p>Nous sommes séparés de nos marges. +<p>Nous sommes séparés de nos marges. Comme il y a fusion des marges, nous sommes séparés - par la largeur de l'une de nos marges et non les deux.</p> + par la largeur de l'une de nos marges et non les deux.</p> -<p>Des éléments <code>inline</code> <span>comme celui-ci</span> ou - <span>celui‑là</span> sont placés sur la même ligne et +<p>Des éléments inline <span>comme celui-ci</span> ou + <span>celui‑là</span> sont placés sur la même ligne et les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les débordements des éléments inline - <span>sont placés sur une nouvelle ligne si possible - (comme celle‑ci contenant du texte)</span>, sinon ils + <span>sont placés sur une nouvelle ligne si possible + (comme celle‑ci contenant du texte)</span>, sinon ils sont placés sur une nouvelle ligne, comme cette image : - <img src="long.jpg"></p></pre> + <img src="long.jpg"></p> +``` -<pre class="brush: css">body { +```css +body { width: 500px; margin: 0 auto; } @@ -83,27 +96,26 @@ p { span { background: white; border: 1px solid black; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Exemple', '100%', 500) }}</p> +{{ EmbedLiveSample('Exemple', '100%', 500) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.</p> +Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md index 8485a78f70..5e70ea8b8b 100644 --- a/files/fr/learn/css/css_layout/positioning/index.md +++ b/files/fr/learn/css/css_layout/positioning/index.md @@ -18,82 +18,89 @@ tags: translation_of: Learn/CSS/CSS_layout/Positioning original_slug: Apprendre/CSS/CSS_layout/Le_positionnement --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> - -<p>Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> +Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Savoir comment fonctionne le positionnement avec les CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Savoir comment fonctionne le positionnement avec les CSS.</td> + </tr> + </tbody> </table> -<p>Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> sur le dépôt Github (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">code source ici</a>) et utilisez-le comme point de départ.</p> +Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de [`0_basic-flow.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) sur le dépôt Github ([code source ici](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) et utilisez-le comme point de départ. -<h2 id="Introduction_au_positionnement">Introduction au positionnement</h2> +## Introduction au positionnement -<p>Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.</p> +Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles. -<p>Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.</p> +Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}. -<h3 id="Positionnement_«_static_»">Positionnement « static »</h3> +### Positionnement « static » -<p>Le positionnement <code>static</code> est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».</p> +Le positionnement `static` est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ». -<p>Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe <code>positioned</code> pour le deuxième {{htmlelement("p")}} dans le HTML:</p> +Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe `positioned` pour le deuxième {{htmlelement("p")}} dans le HTML: -<pre class="brush: html"><p class="positioned"> ... </p></pre> +```html +<p class="positioned"> ... </p> +``` -<p>Puis ajoutez la règle suivante au bas de votre CSS:</p> +Puis ajoutez la règle suivante au bas de votre CSS: -<pre class="brush: css">.positioned { +```css +.positioned { position: static; - background: yellow; }</pre> + background: yellow; } +``` -<p>Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !</p> +Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut ! -<div class="note"> -<p><strong>Note :</strong> ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> -</div> +> **Note :** ce lien [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)) pointe sur un exemple de positionnement « static ». -<h3 id="Positionnement_«_relative_»">Positionnement « relative »</h3> +### Positionnement « relative » -<p>Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de <code>position</code> dans le code :</p> +Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de `position` dans le code : -<pre class="brush: css">position: relative;</pre> +```css +position: relative; +``` -<p>Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.</p> +Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe. -<h3 id="Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»">Présentation de « top », « bottom », « left » et « right »</h3> +### Présentation de « top », « bottom », « left » et « right » -<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle <code>.positioned</code> dans la CSS :</p> +{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle `.positioned` dans la CSS : -<pre>top: 30px; -left: 30px;</pre> + top: 30px; + left: 30px; -<div class="note"> -<p><strong>Note :</strong> les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> -</div> +> **Note :** les valeurs de ces propriétés peuvent prendre n'importe quelle [unité](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units) logiquement attendue — pixels, mm, rem, %, etc. -<p>Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :</p> +Si vous enregistrez et actualisez maintenant, vous verrez ce résultat : -<pre class="brush: html hidden"><h1>Positionnement relatif</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +```html hidden +<h1>Positionnement relatif</h1> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } p { @@ -108,32 +115,33 @@ span { position: relative; background: yellow; top: 30px; - left: 30px; }</pre> + left: 30px; } +``` -<p>{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}</p> +{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }} -<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> +Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini `top` (haut) et `left` (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions `top: 30px;`, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px. -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> -</div> +> **Note :** à ce stade de l'article, vous pouvez retrouver un exemple ici [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). -<h3 id="Positionnement_«_absolute_»">Positionnement « absolute »</h3> +### Positionnement « absolute » -<p>Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de <code>position</code> dans le code :</p> +Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de `position` dans le code : -<pre>position: absolute;</pre> + position: absolute; -<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :</p> +Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre : -<pre class="brush: html hidden"><h1>Positionnement absolu</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +```html hidden +<h1>Positionnement absolu</h1> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } p { @@ -148,45 +156,42 @@ span { position: absolute; background: yellow; top: 30px; - left: 30px; }</pre> + left: 30px; } +``` -<p>{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}</p> +{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }} -<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> +Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore. -<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> +Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information) -<div class="note"> -<p><strong>Note :</strong> vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> -</div> +> **Note :** vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez `top: 0; bottom: 0; left: 0; right: 0;` et `margin: 0;` sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite... -<div class="note"> -<p><strong>Note :</strong> Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> -</div> +> **Note :** Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas. -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> -</div> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple ici [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). -<h3 id="Contextes_de_positionnement">Contextes de positionnement</h3> +### Contextes de positionnement -<p>Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément <strong>le contexte de positionnement</strong> de l'élément.</p> +Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément **le contexte de positionnement** de l'élément. -<p>Nous pouvons changer ce <strong>contexte de positionnement</strong> — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:</p> +Nous pouvons changer ce **contexte de positionnement** — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body: -<pre>position: relative;</pre> + position: relative; -<p>Cela devrait donner le résultat suivant:</p> +Cela devrait donner le résultat suivant: -<pre class="brush: html hidden"><h1>Contextes de positionnement</h1> +```html hidden +<h1>Contextes de positionnement</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&gt;</code> !</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code><body></code>, et non par rapport à l'élément <code><html></code> !</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; position: relative; @@ -209,51 +214,52 @@ span { background: yellow; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}</p> +{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }} -<p>À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> +À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}. -<div class="note"> -<p><strong>Note :</strong> à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> -</div> +> **Note :** à ce stade, vous pouvez voir cet exemple ici [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). -<h3 id="Présentation_du_z-index">Présentation du z-index</h3> +### Présentation du z-index -<p>Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?</p> +Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ? -<p>Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :</p> +Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu : -<pre>p:nth-of-type(1) { - position: absolute; - background: lime; - top: 10px; - right: 30px; -}</pre> + p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + } -<p>A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe <code>.positioned</code> original, là où les deux se chevauchent. C'est parce que le paragraphe <code>.positioned</code> est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.</p> +A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe `.positioned` original, là où les deux se chevauchent. C'est parce que le paragraphe `.positioned` est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source. -<p>Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe <strong>z</strong>. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).</p> +Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe **z**. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas). -<p>Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un <code>z-index</code> <code>auto</code>, qui est effectivement 0.</p> +Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un `z-index` `auto`, qui est effectivement 0. -<p>Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle <code>p:nth-of-type(1)</code> :</p> +Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle `p:nth-of-type(1)` : -<pre>z-index: 1;</pre> + z-index: 1; -<p>Voici maintenant l'exemple terminé :</p> +Voici maintenant l'exemple terminé : -<pre class="brush: html hidden"><h1>z-index</h1> +```html hidden +<h1>z-index</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&lt;html&gt;</code> !</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code><body></code>, et non par rapport à l'élément <code><html<html></code> !</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; position: relative; } @@ -276,59 +282,60 @@ p:nth-of-type(1) { top: 10px; right: 30px; z-index: 1; } -</pre> +``` -<p>{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}</p> +{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }} -<p>Notez que <code>z-index</code> n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.</p> +Notez que `z-index` n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000. -<div class="note"> -<p><strong>Note :</strong> sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> -</div> +> **Note :** sur ce sujet, vous pouvez voir l'exemple [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). -<h3 id="Positionnement_«_fixed_»">Positionnement « fixed »</h3> +### Positionnement « fixed » -<p>Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.</p> +Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants. -<p>Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de <code>p:nth-of-type(1)</code> et <code>.positioned</code> de la CSS.</p> +Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de `p:nth-of-type(1)` et `.positioned` de la CSS. -<p>Maintenant, mettez à jour la règle <code>body</code> : supprimez la déclaration <code>position : relative ;</code> et ajoutez une hauteur fixe, ainsi :</p> +Maintenant, mettez à jour la règle `body` : supprimez la déclaration `position : relative ;` et ajoutez une hauteur fixe, ainsi : -<pre>body { - width: 500px; - height: 1400px; - margin: 0 auto; -}</pre> + body { + width: 500px; + height: 1400px; + margin: 0 auto; + } -<p>Maintenant, donnez la position <code>fixed</code> à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :</p> +Maintenant, donnez la position `fixed` à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS : -<pre>h1 { - position: fixed; - top: 0; - width: 500px; - margin: 0 auto; - background: white; - padding: 10px; -}</pre> + h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; + } -<p><code>top: 0;</code> est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique <code>margin: 0 auto;</code> pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.</p> +`top: 0;` est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique `margin: 0 auto;` pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui. -<p>Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :</p> +Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant : -<pre>p:nth-of-type(1) { - margin-top: 60px; -}</pre> + p:nth-of-type(1) { + margin-top: 60px; + } -<p>Voici l'exemple terminé :</p> +Voici l'exemple terminé : -<pre class="brush: html hidden"><h1>Positionnement fixe</h1> +```html hidden +<h1>Positionnement fixe</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Je ne suis plus positionné...</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p></pre> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Je ne suis plus positionné...</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; height: 1400px; margin: 0 auto; @@ -357,32 +364,33 @@ h1 { p:nth-of-type(1) { margin-top: 60px; -}</pre> - -<p>{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}</p> +} +``` -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> -</div> +{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }} -<h3 id="«_position_sticky_»">« position: sticky »</h3> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). -<p>Il y a une autre valeur de positionnement disponible appelée <code>position : sticky</code>. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.</p> +### « position: sticky » +Il y a une autre valeur de positionnement disponible appelée `position : sticky`. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page. -<h4>Exemple simple</h4> +#### Exemple simple -<pre class="brush: html hidden"><h1>Positionnement collant</h1> +```html hidden +<h1>Positionnement collant</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<div class="positioned">Collant : relatif en deça, fixe au delà</div> +<div class="positioned">Collant : relatif en deça, fixe au delà</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -393,55 +401,59 @@ p:nth-of-type(1) { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: sticky; top: 30px; left: 30px; -}</pre> - - -<p>{{ EmbedLiveSample('Exemple_simple', '100%', 200) }}</p> - -<h4>Index déroulant</h4> - -<p>Une utilisation courante pleine d'intérêt de <code>position: sticky</code> permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :</p> - -<pre class="brush: html"><h1>Positionnement collant</h1> - -<dl> - <dt>A</dt> - <dd>Abeille</dd> - <dd>Abricot</dd> - <dd>Altimètre</dd> - <dd>Avion</dd> - <dt>B</dt> - <dd>Banane</dd> - <dd>Betterave</dd> - <dd>Bœuf</dd> - <dd>Bouvreuil</dd> - <dd>Buzzard</dd> - <dt>C</dt> - <dd>Calculateur</dd> - <dd>Camera</dd> - <dd>Cane</dd> - <dd>Chameau</dd> - <dt>D</dt> - <dd>Dime</dd> - <dd>Dindon</dd> - <dd>Drapeau</dd> - <dd>Drone</dd> - <dt>E</dt> - <dd>Eau</dd> - <dd>Éléphant</dd> - <dd>Escadrille</dd> -</dl> -</pre> - -<p>Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute <code>position : sticky</code> à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.</p> - -<pre class="brush: css">dt { +} +``` + +{{ EmbedLiveSample('Exemple_simple', '100%', 200) }} + +#### Index déroulant + +Une utilisation courante pleine d'intérêt de `position: sticky` permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci : + +```html +<h1>Positionnement collant</h1> + +<dl> + <dt>A</dt> + <dd>Abeille</dd> + <dd>Abricot</dd> + <dd>Altimètre</dd> + <dd>Avion</dd> + <dt>B</dt> + <dd>Banane</dd> + <dd>Betterave</dd> + <dd>Bœuf</dd> + <dd>Bouvreuil</dd> + <dd>Buzzard</dd> + <dt>C</dt> + <dd>Calculateur</dd> + <dd>Camera</dd> + <dd>Cane</dd> + <dd>Chameau</dd> + <dt>D</dt> + <dd>Dime</dd> + <dd>Dindon</dd> + <dd>Drapeau</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Eau</dd> + <dd>Éléphant</dd> + <dd>Escadrille</dd> +</dl> +``` + +Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute `position : sticky` à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile. + +```css +dt { background-color: black; color: white; padding: 10px; @@ -450,9 +462,10 @@ p:nth-of-type(1) { left: 0; margin: 1em 0; } -</pre> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; height: 1400px; margin: 0 auto; @@ -467,38 +480,32 @@ dt { left: 0; margin: 1em 0; } -</pre> +``` -<p>{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}</p> +{{ EmbedLiveSample('Index_déroulant', '100%', 200) }} -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> -</div> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) (voir le [code](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html) [source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.</p> +Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Référence de la propriété {{cssxref("position")}}.</li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> -</ul> +- Référence de la propriété {{cssxref("position")}}. +- [Exemples pratiques de positionnement](/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), pour quelques idées utiles supplémentaires. -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md index b496e93796..bcdd6003da 100644 --- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md @@ -4,83 +4,85 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement.</p> +Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux en HTML (étudier <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Une introduction au HTML</a>), et une idée du fonctionnement du CSS (étudier <a href="/fr/docs/Learn/CSS/First_steps">Une introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Avoir une idée des aspects pratiques du positionnement</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux en HTML (étudier + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Une introduction au HTML</a + >), et une idée du fonctionnement du CSS (étudier + <a href="/fr/docs/Learn/CSS/First_steps">Une introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Avoir une idée des aspects pratiques du positionnement</td> + </tr> + </tbody> </table> -<h2 id="Une_boîte_dinformation_à_onglets">Une boîte d'information à onglets</h2> +## Une boîte d'information à onglets -<p>Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé :</p> +Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé : -<p><img alt="" src="tabbed-info-box.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.</p> +On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances. -<div class="note"> -<p><strong>Note :</strong> Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.</p> -</div> +> **Note :** Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest). Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple. -<p>Pour commencer, effectuez une copie locale du fichier HTML de départ — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page :</p> +Pour commencer, effectuez une copie locale du fichier HTML de départ — [info-box-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html). Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page : -<pre class="brush: html"> -<section class="info-box"> - <ul> - <li><a href="#" class="active">Onglet 1</a></li> - <li><a href="#">Onglet 2</a></li> - <li><a href="#">Onglet 3</a></li> - </ul> - <div class="panels"> - <article class="active-panel"> - <h2>Premier onglet</h2> +```html +<section class="info-box"> + <ul> + <li><a href="#" class="active">Onglet 1</a></li> + <li><a href="#">Onglet 2</a></li> + <li><a href="#">Onglet 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>Premier onglet</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> - </article> - <article> - <h2>Deuxième onglet</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>Deuxième onglet</h2> - <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p> - </article> - <article> - <h2>Troisième onglet</h2> + <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p> + </article> + <article> + <h2>Troisième onglet</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> - <ol> - <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> - <li>Aliquam ut porttitor urna.</li> - <li>Nulla facilisi</li> - </ol> - </article> - </div> -</section> -</pre> + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section> +``` -<p>Nous avons un élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a> avec une <code>class</code> <code>info-box</code>, qui contient un élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément <code>div</code> contient trois éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.</p> +Nous avons un élément [`<section>`](/fr/docs/Web/HTML/Element/section) avec une `class` `info-box`, qui contient un élément [`<ul>`](/fr/docs/Web/HTML/Element/ul) et un élément [`<div>`](/fr/docs/Web/HTML/Element/div). La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément `div` contient trois éléments [`<article>`](/fr/docs/Web/HTML/Element/article), qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu. -<p>L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre <a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">quelques bases de JavaScript</a> dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.</p> +L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre [quelques bases de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics) dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées. -<h3 id="Configuration_générale">Configuration générale</h3> +### Configuration générale -<p>Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> :</p> +Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes [`<style>`](/fr/docs/Web/HTML/Element/style) : -<pre class="brush: css"> +```css html { font-family: sans-serif; } @@ -92,41 +94,40 @@ html { body { margin: 0; } -</pre> +``` -<p>Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle <code>border-box</code> <a href="/fr/docs/Web/CSS/box-sizing"><code>box-sizing</code></a>, pour surcharger la marge par défaut de <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>.</p> +Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle `border-box` [`box-sizing`](/fr/docs/Web/CSS/box-sizing), pour surcharger la marge par défaut de [`<body>`](/fr/docs/Web/HTML/Element/body). -<p>Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent :</p> +Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent : -<pre class="brush: css"> +```css .info-box { width: 450px; height: 400px; margin: 0 auto; } -</pre> +``` -<p>Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce <code>margin: 0 auto</code>. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs.</p> +Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce `margin: 0 auto`. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs. -<h3 id="Mettre_en_forme_les_onglets">Mettre en forme les onglets</h3> +### Mettre en forme les onglets -<p>On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a> et <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a> pour la liste non-ordonnée :</p> +On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de [`padding-left`](/fr/docs/Web/CSS/padding-left) et [`margin-top`](/fr/docs/Web/CSS/margin-top) pour la liste non-ordonnée : -<pre class="brush: css"> +```css .info-box ul { padding-left: 0; margin-top: 0; -}</pre> +} +``` -<div class="note"> - <p><strong>Note :</strong> On utilise ici un sélecteur de descendants avec <code>.info-box</code> au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.</p> -</div> +> **Note :** On utilise ici un sélecteur de descendants avec `.info-box` au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant. -<p>Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> est placée à <code>none</code> afin de ne plus avoir les puces et <a href="/fr/docs/Web/CSS/width"><code>width</code></a> vaut <code>150px</code> afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ont <a href="/fr/docs/Web/CSS/display"><code>display</code></a> avec la valeur <code>inline-block</code> afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.</p> +Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) est placée à `none` afin de ne plus avoir les puces et [`width`](/fr/docs/Web/CSS/width) vaut `150px` afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) ont [`display`](/fr/docs/Web/CSS/display) avec la valeur `inline-block` afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés. -<p>Ajoutez le fragment de CSS qui suit :</p> +Ajoutez le fragment de CSS qui suit : -<pre class="brush: css"> +```css .info-box li { float: left; list-style-type: none; @@ -142,11 +143,11 @@ body { color: black; text-align: center; } -</pre> +``` -<p>Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états <code>:focus</code> et <code>:hover</code> afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut <code>class</code> avec la valeur <code>active</code> est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites :</p> +Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états `:focus` et `:hover` afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut `class` avec la valeur `active` est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites : -<pre class="brush: css"> +```css .info-box li a:focus, .info-box li a:hover { background-color: #a60000; color: white; @@ -156,27 +157,27 @@ body { background-color: #a60000; color: white; } -</pre> +``` -<h3 id="Mettre_en_forme_les_panneaux">Mettre en forme les panneaux</h3> +### Mettre en forme les panneaux -<p>La suite consiste à mettre en forme les panneaux de contenu. Allons-y !</p> +La suite consiste à mettre en forme les panneaux de contenu. Allons-y ! -<p>Pour commencer, ajoutez la règle suivante qui met en forme le conteneur <code>.panels</code> <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>. Ici, on définit une hauteur fixe avec <a href="/fr/docs/Web/CSS/height"><code>height</code></a> afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>relative</code> sur l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément <a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a>) pour la mise en forme. Enfin, on utilise <a href="/fr/docs/Web/CSS/clear"><code>clear</code></a> pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.</p> +Pour commencer, ajoutez la règle suivante qui met en forme le conteneur `.panels` [`<div>`](/fr/docs/Web/HTML/Element/div). Ici, on définit une hauteur fixe avec [`height`](/fr/docs/Web/CSS/height) afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit [`position`](/fr/docs/Web/CSS/position) `relative` sur l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément [`<html>`](/fr/docs/Web/HTML/Element/html)) pour la mise en forme. Enfin, on utilise [`clear`](/fr/docs/Web/CSS/clear) pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition. -<pre class="brush: css"> +```css .info-box .panels { height: 352px; position: relative; clear: both; } -</pre> +``` -<p>Dans cette section, nous allons mettre en forme les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> qui forment les panneaux. La première règle va fixer <a href="/fr/docs/Web/CSS/position"><code>position</code></a> absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/left"><code>left</code></a>. C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte (<a href="/fr/docs/Web/CSS/color"><code>color</code></a>), ainsi qu'une couleur d'arrière-plan (<a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>).</p> +Dans cette section, nous allons mettre en forme les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) qui forment les panneaux. La première règle va fixer [`position`](/fr/docs/Web/CSS/position) absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur [`<div>`](/fr/docs/Web/HTML/Element/div) avec [`top`](/fr/docs/Web/CSS/top) et [`left`](/fr/docs/Web/CSS/left). C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte ([`color`](/fr/docs/Web/CSS/color)), ainsi qu'une couleur d'arrière-plan ([`background-color`](/fr/docs/Web/CSS/background-color)). -<p>La deuxième règle ajoutée indique qu'un panneau avec une classe (<code>class</code>) valant <code>active-panel</code> aura une valeur de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un <code>z-index</code> qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.</p> +La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) valant `active-panel` aura une valeur de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un `z-index` qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript. -<pre class="brush: css"> +```css .info-box article { position: absolute; top: 0; @@ -190,109 +191,101 @@ body { .info-box .active-panel { z-index: 1; } -</pre> +``` -<h3 id="Ajouter_notre_JavaScript">Ajouter notre JavaScript</h3> +### Ajouter notre JavaScript -<p>La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> (elles se situent après le contenu HTML) :</p> +La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes [`<script>`](/fr/docs/Web/HTML/Element/script) (elles se situent après le contenu HTML) : -<pre class="brush: js"> +```js let tabs = document.querySelectorAll('.info-box li a'); let panels = document.querySelectorAll('.info-box article'); -for(let i = 0; i < tabs.length; i++) { +for(let i = 0; i < tabs.length; i++) { let tab = tabs[i]; setTabHandler(tab, i); } function setTabHandler(tab, tabPos) { tab.onclick = function() { - for(let i = 0; i < tabs.length; i++) { + for(let i = 0; i < tabs.length; i++) { tabs[i].className = ''; } tab.className = 'active'; - for(let i = 0; i < panels.length; i++) { + for(let i = 0; i < panels.length; i++) { panels[i].className = ''; } panels[tabPos].className = 'active-panel'; } } -</pre> +``` -<p>Ce code effectue les actions suivantes :</p> +Ce code effectue les actions suivantes : -<ul> - <li>Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées <code>tabs</code> et <code>panels</code> afin qu'on puisse facilement les manipuler par la suite.</li> - <li>Ensuite, on utilise une boucle <code>for</code> pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée <code>setTabHandler()</code> qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice <code>i</code> qui identifie la position de l'onglet dans le tableau <code>tabs</code>.</li> - <li>Dans la fonction <code>setTabHandler()</code>, l'onglet se voit affecter un gestionnaire d'évènement <code>onclick</code>. Ainsi dès qu'on clique sur un onglet, on a : - <ul> - <li>Une boucle <code>for</code> qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux.</li> - <li>Une classe (<code>class</code>) <code>active</code> qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit <a href="/fr/docs/Web/CSS/color"><code>color</code></a> et <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur l'onglet afin que celles-ci correspondent aux couleurs du panneau.</li> - <li>Une boucle <code>for</code> qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux.</li> - <li>Une classe <code>active-panel</code> qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1, afin de faire apparaître ce panneau par-dessus les autres.</li> - </ul> - </li> -</ul> +- Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées `tabs` et `panels` afin qu'on puisse facilement les manipuler par la suite. +- Ensuite, on utilise une boucle `for` pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée `setTabHandler()` qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice `i` qui identifie la position de l'onglet dans le tableau `tabs`. +- Dans la fonction `setTabHandler()`, l'onglet se voit affecter un gestionnaire d'évènement `onclick`. Ainsi dès qu'on clique sur un onglet, on a : + + - Une boucle `for` qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux. + - Une classe (`class`) `active` qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit [`color`](/fr/docs/Web/CSS/color) et [`background-color`](/fr/docs/Web/CSS/background-color) sur l'onglet afin que celles-ci correspondent aux couleurs du panneau. + - Une boucle `for` qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux. + - Une classe `active-panel` qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit [`z-index`](/fr/docs/Web/CSS/z-index) à 1, afin de faire apparaître ce panneau par-dessus les autres. -<p>Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple.</p> +Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple. -<h2 id="Une_boîte_d'information_à_onglets_avec_une_position_fixe">Une boîte d'information à onglets avec une position fixe</h2> +## Une boîte d'information à onglets avec une position fixe -<p>Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à :</p> +Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à : -<p><img alt="" src="fixed-info-box.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> depuis le dépôt GitHub.</p> +Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) depuis le dépôt GitHub. -<h3 id="Ajouts_au_HTML">Ajouts au HTML</h3> +### Ajouts au HTML -<p>Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section (<a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>) suivante juste après la balise ouvrante <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a> et avant la section existante :</p> +Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section ([`<section>`](/fr/docs/Web/HTML/Element/section)) suivante juste après la balise ouvrante [`<body>`](/fr/docs/Web/HTML/Element/body) et avant la section existante : -<pre class="brush: html"> -<section class="fake-content"> - <h1>Faux contenu</h1> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> -</section> -</pre> +```html +<section class="fake-content"> + <h1>Faux contenu</h1> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> +</section> +``` -<div class="note"> -<p><strong>Note :</strong> N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.</p> -</div> +> **Note :** N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez. -<h3 id="Modifications_au_CSS_existant">Modifications au CSS existant</h3> +### Modifications au CSS existant -<p>Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant <code>.info-box</code> afin de se débarrasser de <code>margin: 0 auto;</code> (on ne veut plus que la boîte soit centrée) et d'ajouter <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> avant de l'attacher au haut de la zone d'affichage du navigateur avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a>.</p> +Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant `.info-box` afin de se débarrasser de `margin: 0 auto;` (on ne veut plus que la boîte soit centrée) et d'ajouter [`position`](/fr/docs/Web/CSS/position)`: fixed;` avant de l'attacher au haut de la zone d'affichage du navigateur avec [`top`](/fr/docs/Web/CSS/top). -<p>Voici ce à quoi ça devrait ressembler :</p> +Voici ce à quoi ça devrait ressembler : -<pre class="brush: css"> +```css .info-box { width: 450px; height: 400px; position: fixed; top: 0; } -</pre> +``` -<h3 id="Mettre_en_forme_le_contenu_principal">Mettre en forme le contenu principal</h3> +### Mettre en forme le contenu principal -<p>Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant :</p> +Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant : -<pre class="brush: css"> +```css .fake-content { background-color: #a60000; color: white; @@ -300,51 +293,47 @@ function setTabHandler(tab, tabPos) { height: 2000px; margin-left: 470px; } -</pre> +``` -<p>Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>, <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, et le même remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a>) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste.</p> +Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec [`background-color`](/fr/docs/Web/CSS/background-color), [`color`](/fr/docs/Web/CSS/color), et le même remplissage ([`padding`](/fr/docs/Web/CSS/padding)) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante ([`margin-left`](/fr/docs/Web/CSS/margin-left)) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste. -<p>Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile.</p> +Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile. -<h2 id="Un_panneau_glissant_masqué">Un panneau glissant masqué</h2> +## Un panneau glissant masqué -<p>Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.</p> +Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile. -<p>Voilà ce à quoi ressemblera notre exemple terminé :</p> +Voilà ce à quoi ressemblera notre exemple terminé : -<p><img alt="" src="hidden-sliding-panel.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>Pour commencer, enregistrez le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier :</p> +Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier : -<pre class="brush: html"> -<label for="toggle">❔</label> -<input type="checkbox" id="toggle"> -<aside> +```html +<label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> ... -</aside> -</pre> +</aside> +``` -<p>Pour commencer, nous avons un élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a> et un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>. Les éléments <code><label></code> sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher <code><input></code> grâce aux attributs <code>for</code> et <code>id</code>.</p> +Pour commencer, nous avons un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) et un élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Les éléments `<label>` sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher `<input>` grâce aux attributs `for` et `id`. -<div class="note"> -<p><strong>Note :</strong> Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau.</p> -</div> +> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau. -<p>Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments <code><label></code> est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse <a href="https://css-tricks.com/the-checkbox-hack/">bidouille de la case à cocher</a> qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a> qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).</p> +Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments `<label>` est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse [bidouille de la case à cocher](https://css-tricks.com/the-checkbox-hack/) qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément [`<aside>`](/fr/docs/Web/HTML/Element/aside) qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision). -<p>Dans les sections qui suivent, nous expliquerons comment cela fonctionne.</p> +Dans les sections qui suivent, nous expliquerons comment cela fonctionne. -<h3 id="Mettre_en_forme_les_éléments_de_formulaire">Mettre en forme les éléments de formulaire</h3> +### Mettre en forme les éléments de formulaire -<p>Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> :</p> +Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises [`<style>`](/fr/docs/Web/HTML/Element/style) : -<pre class="brush: css"> +```css label[for="toggle"] { font-size: 3rem; position: absolute; @@ -358,24 +347,22 @@ input[type="checkbox"] { position: absolute; top: -100px; } -</pre> +``` -<p>La première règle met en forme <code><label></code>, on y trouve :</p> +La première règle met en forme `<label>`, on y trouve : -<ul> - <li>Une taille de police (<a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a>) élevée afin que l'icône soit bien visible.</li> - <li>Une <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> avec des définitions pour <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/right"><code>right</code></a> qui permettent de positionner l'icône dans le coin supérieur droit.</li> - <li>Une définition de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1 afin que, lorsque le panneau d'information est montré, il ne recouvre pas l'icône mais que celle-ci soit toujours affichée afin de pouvoir l'utiliser pour masquer le panneau d'information.</li> - <li>Une propriété <a href="/fr/docs/Web/CSS/cursor"><code>cursor</code></a> pour changer le curseur de la souris au survol de l'icône afin que le curseur prenne la forme d'une main (la même que celle utilisée par défaut au survol des liens). Cela fournit une indication visuelle supplémentaire comme quoi l'icône fait quelque chose d'intéressant.</li> -</ul> +- Une taille de police ([`font-size`](/fr/docs/Web/CSS/font-size)) élevée afin que l'icône soit bien visible. +- Une [`position`](/fr/docs/Web/CSS/position) `absolute` avec des définitions pour [`top`](/fr/docs/Web/CSS/top) et [`right`](/fr/docs/Web/CSS/right) qui permettent de positionner l'icône dans le coin supérieur droit. +- Une définition de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 afin que, lorsque le panneau d'information est montré, il ne recouvre pas l'icône mais que celle-ci soit toujours affichée afin de pouvoir l'utiliser pour masquer le panneau d'information. +- Une propriété [`cursor`](/fr/docs/Web/CSS/cursor) pour changer le curseur de la souris au survol de l'icône afin que le curseur prenne la forme d'une main (la même que celle utilisée par défaut au survol des liens). Cela fournit une indication visuelle supplémentaire comme quoi l'icône fait quelque chose d'intéressant. -<p>La deuxième règle applique <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> sur la case à cocher <code><input></code> et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur.</p> +La deuxième règle applique [`position`](/fr/docs/Web/CSS/position) `absolute` sur la case à cocher `<input>` et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur. -<h3 id="Mettre_en_forme_le_panneau">Mettre en forme le panneau</h3> +### Mettre en forme le panneau -<p>Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS :</p> +Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS : -<pre class="brush: css"> +```css aside { background-color: #a60000; color: white; @@ -390,49 +377,55 @@ aside { transition: 0.6s all; } -</pre> +``` -<p>Il y a plusieurs déclarations ici, voyons-les au fur et à mesure :</p> +Il y a plusieurs déclarations ici, voyons-les au fur et à mesure : -<ul> - <li>Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> et <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</li> - <li>Ensuite, on définit une largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) fixe sur le panneau et on définit la hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) afin que celle-ci occupe la hauteur de toute la zone d'affichage.</li> - <li>On ajoute également du remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) horizontal pour espacer légèrement.</li> - <li>Ensuite, on utilise <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut (<a href="/fr/docs/Web/CSS/top"><code>top</code></a>) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite (<a href="/fr/docs/Web/CSS/right"><code>right</code></a>) et en dehors de l'écran.</li> - <li>Enfin, on applique une <a href="/fr/docs/Web/CSS/transition"><code>transition</code></a> sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran.</li> -</ul> +- Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec [`background-color`](/fr/docs/Web/CSS/background-color) et [`color`](/fr/docs/Web/CSS/color). +- Ensuite, on définit une largeur ([`width`](/fr/docs/Web/CSS/width)) fixe sur le panneau et on définit la hauteur ([`height`](/fr/docs/Web/CSS/height)) afin que celle-ci occupe la hauteur de toute la zone d'affichage. +- On ajoute également du remplissage ([`padding`](/fr/docs/Web/CSS/padding)) horizontal pour espacer légèrement. +- Ensuite, on utilise [`position`](/fr/docs/Web/CSS/position)`: fixed;` sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut ([`top`](/fr/docs/Web/CSS/top)) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite ([`right`](/fr/docs/Web/CSS/right)) et en dehors de l'écran. +- Enfin, on applique une [`transition`](/fr/docs/Web/CSS/transition) sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran. -<h3 id="Définir_l'état_coché">Définir l'état coché</h3> +### Définir l'état coché -<p>Voici le dernier fragment de CSS à ajouter, là encore à la fin :</p> +Voici le dernier fragment de CSS à ajouter, là encore à la fin : -<pre class="brush: css"> +```css input[type=checkbox]:checked + aside { right: 0px; } -</pre> +``` + +Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément `<aside>` adjacent à l'élément `<input>`, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked)). Lorsque c'est le cas, on définit la propriété [`right`](/fr/docs/Web/CSS/right) de l'élément `<aside>` à `0px`, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau. + +Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter. + +## Résumé + +Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées <i lang="en">flexbox</i>. + +## Dans ce module + +- [Introduction aux dispositions CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Flux normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Boîtes flexibles (flexbox)](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Flottements](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Disposition à plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Conception adaptative (<i lang="en">responsive design</i>)](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) -<p>Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément <code><aside></code> adjacent à l'élément <code><input></code>, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe <a href="/fr/docs/Web/CSS/:checked"><code>:checked</code></a>). Lorsque c'est le cas, on définit la propriété <a href="/fr/docs/Web/CSS/right"><code>right</code></a> de l'élément <code><aside></code> à <code>0px</code>, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.</p> + <i lang="en">responsive design</i> -<p>Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.</p> + [Conception adaptative (<i lang="en">responsive design</i>)](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) -<h2 id="Résumé">Résumé</h2> +- [Guide sur les requêtes de média (<i lang="en">media queries</i>)](/fr/docs/Learn/CSS/CSS_layout/Media_queries) -<p>Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées <i lang="en">flexbox</i>.</p> + <i lang="en">media queries</i> -<h2 id="Dans_ce_module">Dans ce module</h2> + [Guide sur les requêtes de média (<i lang="en">media queries</i>)](/fr/docs/Learn/CSS/CSS_layout/Media_queries) -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction aux dispositions CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Boîtes flexibles (flexbox)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flottements</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition à plusieurs colonnes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception adaptative (<i lang="en">responsive design</i>)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide sur les requêtes de média (<i lang="en">media queries</i>)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de disposition historiques</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prendre en charge les anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation pour la compréhension des fondamentaux des dispositions CSS</a></li> -</ul> +- [Méthodes de disposition historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prendre en charge les anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Évaluation pour la compréhension des fondamentaux des dispositions CSS](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md index 312eea3059..87fefdde89 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.md +++ b/files/fr/learn/css/css_layout/responsive_design/index.md @@ -13,205 +13,207 @@ tags: translation_of: Learn/CSS/CSS_layout/Responsive_Design original_slug: Apprendre/CSS/CSS_layout/Responsive_Design --- -<div>{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</div> +{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}} -<p>Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de <em>responsive web design</em> (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.</p> +Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de _responsive web design_ (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les bases du HTML (étudier <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (édutier <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas en CSS</a> et <a href="/fr/docs/Apprendre/CSS/Building_blocks">Blocs de base en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les concepts fondamentaux et l'histoire du responsive design.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les bases du HTML (étudier + <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction au HTML</a + >), et une idée du fonctionnement du CSS (édutier + <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas en CSS</a> et + <a href="/fr/docs/Apprendre/CSS/Building_blocks">Blocs de base en CSS</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Comprendre les concepts fondamentaux et l'histoire du responsive design. + </td> + </tr> + </tbody> </table> -<h2 id="Historique_de_la_mise_en_page_des_sites_Web">Historique de la mise en page des sites Web</h2> +## Historique de la mise en page des sites Web -<p>A une époque, vous aviez deux options pour concevoir un site Web :</p> +A une époque, vous aviez deux options pour concevoir un site Web : -<ul> - <li>Vous pourriez créer un <em>site liquide</em>, qui s'étirerait pour remplir la fenêtre du navigateur</li> - <li>ou un site <em>à largeur fixe</em>, qui aurait une taille fixe en pixels.</li> -</ul> +- Vous pourriez créer un _site liquide_, qui s'étirerait pour remplir la fenêtre du navigateur +- ou un site _à largeur fixe_, qui aurait une taille fixe en pixels. -<p>Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.</p> +Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands. -<img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="mdn-rwd-liquid.png"> + -<div class="note"> -<p><strong>Note :</strong> Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> -</div> +> **Note :** Voir cette simple mise en page "liquide" : [exemple](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html). Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles. -<p>Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.</p> +Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands. -<img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="mdn-rwd-fixed.png"> + -<div class="note"> -<p><strong>Note :</strong> Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> -</div> +> **Note :** Voir cette simple mise en page à largeur fixe : [exemple](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html). Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur. -<div class="note"> -<p><strong>Note :</strong> Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> -</div> +> **Note :** Les captures d'écran ci-dessus sont réalisées à l'aide de la [Vue adaptative](/fr/docs/Outils/Vue_adaptative) de la boîte à outils de Firefox. -<p>Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.</p> +Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour. -<p>De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.</p> +De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site. -<h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2> +## Mise en page flexible avant le responsive design -<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> +Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé [Mise en page en fonction de la résolution](http://www.themaninblue.com/writing/perspective/2004/09/21/), décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS. -<p>Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.</p> +Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille. -<h2 id="Responsive_design">Responsive design</h2> +## Responsive design -<p>Le terme de responsive design a été <a href="https://alistapart.com/article/responsive-web-design/">inventé par Ethan Marcotte en 2010</a>, et décrit la combinaison de trois techniques.</p> +Le terme de responsive design a été [inventé par Ethan Marcotte en 2010](https://alistapart.com/article/responsive-web-design/), et décrit la combinaison de trois techniques. -<ol> - <li>La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publié en 2009 sur A List Apart).</li> - <li>La deuxième technique était l'idée <a href="http://unstoppablerobotninja.com/entry/fluid-images">d'images fluides</a>. En utilisant une technique très simple de réglage de la propriété <code>max-width</code> à <code>100%</code>, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.</li> - <li>Le troisième élément clé était la <a href="/fr/docs/Web/CSS/Media_Queries">media query</a>. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.</li> -</ol> +1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, [Fluid Grids](https://alistapart.com/article/fluidgrids/) (publié en 2009 sur A List Apart). +2. La deuxième technique était l'idée [d'images fluides](http://unstoppablerobotninja.com/entry/fluid-images). En utilisant une technique très simple de réglage de la propriété `max-width` à `100%`, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image. +3. Le troisième élément clé était la [media query](/fr/docs/Web/CSS/Media_Queries). Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée. -<p>Il est important de comprendre que <strong>le responsive web design n'est pas une technologie à part</strong> - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.<br> - <br> - Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.</p> +Il est important de comprendre que **le responsive web design n'est pas une technologie à part** - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives. -<h2 id="Media_Queries">Media Queries</h2> +Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif. -<p>Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.</p> +## Media Queries -<p>Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur <code>.container</code> ne sera appliqué que si ces deux éléments sont vrais.</p> +Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur. -<pre class="brush: css"><code>@media screen and (min-width: 800px) { +Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur `.container` ne sera appliqué que si ces deux éléments sont vrais. + +```css +@media screen and (min-width: 800px) { .container { margin: 1em 2em; } -} </code> -</pre> +} +``` -<p>Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.</p> +Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt. -<p>Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.</p> +Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité. -<p>Pour en savoir plus, consultez la documentation MDN pour les <a href="/fr/docs/Web/CSS/Media_Queries">Media Queries</a>.</p> +Pour en savoir plus, consultez la documentation MDN pour les [Media Queries](/fr/docs/Web/CSS/Media_Queries). -<h2 id="Grilles_flexibles">Grilles flexibles</h2> +## Grilles flexibles -<p>Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.</p> +Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée. -<p>En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.</p> +En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit. -<p>Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser <a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">floats</a>. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.</p> +Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser [floats](/fr/docs/Apprendre/CSS/CSS_layout/Floats). Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels. -<pre><code>target / context = result </code> -</pre> + target / context = result -<p>Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.</p> +Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite. -<pre class="brush: css"><code>.col { +```css +.col { width: 6.25%; /* 60 / 960 = 0.0625 */ -} </code> -</pre> +} +``` + +Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur [Méthodes de mises en page traditionnelles](/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods). Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement. -<p>Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur <a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a>. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.</p> +L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres : -<p>L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :<br> - </p> -<img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="mdn-rwd-mobile.png"> -<p>Sur des écrans plus larges, ils se positionnent sur deux colonnes :</p> + -<img alt="A desktop view of a layout with two columns." src="mdn-rwd-desktop.png"> +Sur des écrans plus larges, ils se positionnent sur deux colonnes : -<div class="note"> -<p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> -</div> + -<h2 id="Techniques_modernes_de_mise_en_page">Techniques modernes de mise en page</h2> +> **Note :** Vous pouvez trouver l'[exemple en direct](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html) et le [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html) pour cet exemple sur GitHub. -<p>Les méthodes de mise en page modernes telles que <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> +## Techniques modernes de mise en page -<h3 id="Multicol">Multicol</h3> +Les méthodes de mise en page modernes telles que [Multiple-column layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout), [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox), et [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire. -<p>La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un <code>column-count</code>, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.</p> +### Multicol -<pre class="brush: css"><code>.container { +La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un `column-count`, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran. + +```css +.container { column-count: 3; -} </code> -</pre> +} +``` -<p>Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.</p> +Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible. -<pre class="brush: css"><code>.container { +```css +.container { column-width: 10em; -} </code> -</pre> +} +``` -<h3 id="Flexbox">Flexbox</h3> +### Flexbox -<p>Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de <code>flex-grow</code> et <code>flex-shrink</code> vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.</p> +Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de `flex-grow` et `flex-shrink` vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux. -<p>Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation <code>flex: 1</code> comme décrit dans la rubrique de mise en page <a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex">Flexbox: Taille modulable des éléments flex</a>.</p> +Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation `flex: 1` comme décrit dans la rubrique de mise en page [Flexbox: Taille modulable des éléments flex](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex). -<pre class="brush: css"><code>.container { +```css +.container { display: flex; } .item { flex: 1; -} </code> -</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> -</div> +> **Note :** À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : [exemple](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html). -<h3 id="CSS_grid">CSS grid</h3> +### CSS grid -<p>Dans la mise en page en grille CSS, l'unité <code>fr</code> permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de <code>1fr</code>. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section <a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité "fr"</a>.</p> +Dans la mise en page en grille CSS, l'unité `fr` permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de `1fr`. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section [Trames adaptables avec l'unité "fr"](/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»). -<pre class="brush: css"><code>.container { +```css +.container { display: grid; grid-template-columns: 1fr 1fr 1fr; -} </code> -</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> -</div> +> **Note :** La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : [exemple](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html). -<h2 id="Images_responsives">Images responsives</h2> +## Images responsives -<p>L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :</p> +L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part : -<pre class="brush: css"><code>img { +```css +img { max-width: 100%: -} </code> -</pre> +} +``` -<p>Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.</p> +Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image. -<p>Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} <code>srcset</code> et <code>sizes</code> permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.</p> +Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} `srcset` et `sizes` permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise. -<p>Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.</p> +Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran. -<p>Vous pouvez trouver un <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> +Vous pouvez trouver un [guide détaillé sur les Images Responsives dans la section Apprendre le HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) ici sur MDN. -<h2 id="Typographie_responsive">Typographie responsive</h2> +## Typographie responsive -<p>L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.</p> +L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran. -<p>Dans cet exemple, nous voulons fixer notre titre de niveau 1 à <code>4rem</code>, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins <code>1200px</code>.</p> +Dans cet exemple, nous voulons fixer notre titre de niveau 1 à `4rem`, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins `1200px`. -<pre class="brush: css"><code>html { +```css +html { font-size: 1em; } @@ -223,101 +225,96 @@ h1 { h1 { font-size: 4rem; } -} </code> -</pre> +} +``` -<p>Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.</p> +Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes. -<p>Sur un mobile, le titre est plus petit :</p> +Sur un mobile, le titre est plus petit : -<img alt="A stacked layout with a small heading size." src="mdn-rwd-font-mobile.png"> + -<p>Sur le bureau cependant, nous voyons la plus grande taille de titre :</p> +Sur le bureau cependant, nous voyons la plus grande taille de titre : -<img alt="A two column layout with a large heading." src="mdn-rwd-font-desktop.png"> + -<div class="note"> -<p><strong>Note :</strong> Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> -</div> +> **Note :** Voir cet exemple en action : [exemple](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html). -<p>Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.</p> +Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes. -<h3 id="Utilisation_dunités_de_visualisation_pour_une_typographie_réactive">Utilisation d'unités de visualisation pour une typographie réactive</h3> +### Utilisation d'unités de visualisation pour une typographie réactive -<p>Une approche intéressante consiste à utiliser l'unité viewport <code>vw</code> pour permettre une typographie réactive. <code>1vw</code> est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de <code>vw</code>, elle sera toujours liée à la taille de la fenêtre.</p> +Une approche intéressante consiste à utiliser l'unité viewport `vw` pour permettre une typographie réactive. `1vw` est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de `vw`, elle sera toujours liée à la taille de la fenêtre. -<pre class="brush: css">h1 { +```css +h1 { font-size: 6vw; -}</pre> +} +``` -<p>Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité <code>vw</code>, car ce texte est toujours lié à la taille de la fenêtre de visualisation. <strong>Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.</strong></p> +Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité `vw`, car ce texte est toujours lié à la taille de la fenêtre de visualisation. **Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.** -<p>Il existe une solution, et elle consiste à utiliser <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>. Si vous ajoutez l'unité <code>vw</code> à un ensemble de valeurs utilisant une taille fixe telle que <code>em</code>s ou <code>rem</code>s, le texte sera toujours zoomable. En fait, l'unité <code>vw</code> s'ajoute à cette valeur zoomée :</p> +Il existe une solution, et elle consiste à utiliser [`calc()`](/fr/docs/Web/CSS/calc). Si vous ajoutez l'unité `vw` à un ensemble de valeurs utilisant une taille fixe telle que `em`s ou `rem`s, le texte sera toujours zoomable. En fait, l'unité `vw` s'ajoute à cette valeur zoomée : -<pre class="brush: css">h1 { +```css +h1 { font-size: calc(1.5rem + 3vw); -}</pre> +} +``` -<p>Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.</p> +Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage. -<div class="note"> -<p><strong>Note :</strong> Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> -</div> +> **Note :** Voir un exemple de cela en action : [exemple](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html). -<h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2> +## Le méta-tag du viewport -<p>Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <code><head></code> du document.</p> +Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section `<head>` du document. -<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> -</pre> +```html +<meta name="viewport" content="width=device-width,initial-scale=1"> +``` -<p>Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.</p> +Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez. -<p>Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.</p> +Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre. -<p>Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.</p> +Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive. -<p>Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant <code>width = device-width</code>, vous remplacez la largeur par défaut d'Apple de <code>width = 960px </code>par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.</p> +Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px `par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. -<p><strong>Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.</strong></p> +**Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.** -<p>Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.</p> +Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez. -<ul> - <li><code>initial-scale</code>: Définit le zoom initial de la page, que nous définissons à 1.</li> - <li><code>height</code>: Definit une hauteur spécifique pour la fenêtre.</li> - <li><code>minimum-scale</code>: Définit le niveau minimal de zoom</li> - <li><code>maximum-scale</code>: Définit le niveau maximal de zoom.</li> - <li><code>user-scalable</code>: Empêche le zoom si défini à <code>no</code>.</li> -</ul> +- `initial-scale`: Définit le zoom initial de la page, que nous définissons à 1. +- `height`: Definit une hauteur spécifique pour la fenêtre. +- `minimum-scale`: Définit le niveau minimal de zoom +- `maximum-scale`: Définit le niveau maximal de zoom. +- `user-scalable`: Empêche le zoom si défini à `no`. -<p>Vous devriez éviter d'utiliser <code>minimum-scale</code>, <code>maximum-scale</code>, et en particulier la définition de <code>user-scalable</code> sur <code>no</code>. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.</p> +Vous devriez éviter d'utiliser `minimum-scale`, `maximum-scale`, et en particulier la définition de `user-scalable` sur `no`. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité. -<div class="note"> -<p><strong>Note :</strong> Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> -</div> +> **Note :** Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — [@viewport](/fr/docs/Web/CSS/@viewport) — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge. -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p>Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.</p> +Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif. -<p>Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.</p> +Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site. -<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">Le positionnement</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Media_queries">Guide du débutant pour les Medias Queries</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Prise_en_charge_des_anciens_navigateurs">Prise en charge des anciens navigateurs</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li> -</ul> +- [Introduction à la mise en page en CSS](/fr/docs/Apprendre/CSS/CSS_layout/Introduction) +- [Cours normal](/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Apprendre/CSS/CSS_layout/Grids) +- [Les boîtes flottantes](/fr/docs/Apprendre/CSS/CSS_layout/Floats) +- [Le positionnement](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) +- [Disposition sur plusieurs colonnes](/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant pour les Medias Queries](/fr/docs/Apprendre/CSS/CSS_layout/Media_queries) +- [Méthodes de mises en page traditionnelles](/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prise en charge des anciens navigateurs](/fr/docs/Apprendre/CSS/CSS_layout/Prise_en_charge_des_anciens_navigateurs) +- [Compréhension fondamentale de la mise en page](/fr/docs/Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md index 1aeb151ae9..b218bec511 100644 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md @@ -17,58 +17,72 @@ tags: translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} -<p>Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> +Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Les bases du HTML (étudiez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> et <a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a>.)</td> + <th scope="row">Prérequis :</th> + <td> + Les bases du HTML (étudiez + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> et + <a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a>.) + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Comprendre comment assurer la prise en charge, de vos mises en page, sur les anciens navigateurs qui pourraient ne pas supporter les fonctionnalités que vous souhaitez utiliser.</td> + <td> + Comprendre comment assurer la prise en charge, de vos mises en page, sur + les anciens navigateurs qui pourraient ne pas supporter les + fonctionnalités que vous souhaitez utiliser. + </td> </tr> </tbody> </table> -<h2 id="What_is_the_browser_landscape_for_your_site">Quel est le terrain des navigateurs pour votre site ?</h2> +## Quel est le terrain des navigateurs pour votre site ? -<p>Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que <a href="http://gs.statcounter.com/">Statcounter</a> qui peuvent fournir des statistiques filtrées par région.</p> +Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que [Statcounter](http://gs.statcounter.com/) qui peuvent fournir des statistiques filtrées par région. -<p>Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique.</p> +Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique. -<h2 id="What_is_the_support_for_the_features_you_want_to_use">Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ?</h2> +## Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ? -<p>Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété.</p> +Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété. -<p><img alt="Capture d'un tableau de compatibilité d'une page sur MDN où on voit en vert les versions initiales compatibles et en rouge les navigateurs sans prise en charge" src="browser-table.png"></p> + -<p>Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site <a href="https://caniuse.com/">Can I Use</a>. Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur.</p> +Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site [Can I Use](https://caniuse.com/). Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur. -<p>Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs.</p> +Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs. -<h2 id="Support_doesnt_mean_looks_the_same">Prendre en charge ne veut pas dire « ressembler à la même chose »</h2> +## Prendre en charge ne veut pas dire « ressembler à la même chose » -<p>Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens.</p> +Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens. -<p>Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. <em>Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?</em></p> +Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. _Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?_ -<p>Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement.</p> +Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement. -<h2 id="Creating_fallbacks_in_CSS">Création de substituts en CSS</h2> +## Création de substituts en CSS -<p>Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">techniques historiques</a> que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent.</p> +Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des [techniques historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent. -<p>Dans l'exemple ci-dessous, nous avons fait flotter trois <code><div></code> pour les afficher en ligne. Tout navigateur qui ne prend pas en charge <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">CSS Grid Layout</a> verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de <code>display : grid</code>, et la mise en page flottante est utilisée.</p> +Dans l'exemple ci-dessous, nous avons fait flotter trois `<div>` pour les afficher en ligne. Tout navigateur qui ne prend pas en charge [CSS Grid Layout](/fr/docs/Learn/CSS/CSS_layout/Grids) verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de `display : grid`, et la mise en page flottante est utilisée. -<h3 id="Example_1">Exemple</h3> -<h4 id="CSS_1">CSS</h4> -<pre class="brush:css">* { +### Exemple + +#### CSS + +```css +* { box-sizing: border-box; } @@ -86,46 +100,47 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<h4 id="HTML_1">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +#### HTML + +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` {{EmbedLiveSample('Example_1', '', '150')}} -<div class="notecard note"> - <p><strong>Note :</strong> La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.</p> -</div> +> **Note :** La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS. + +### Méthodes de substitution + +Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer. -<h3 id="Fallback_Methods">Méthodes de substitution</h3> +- `float` et `clear` + - : Comme indiqué ci-dessus, les propriétés `float` et `clear` cessent d'affecter la mise en page si les éléments ciblés par `float` ou `clear` deviennent des éléments d'une grille ou d'une zone flexible. +- `display : inline-block` + - : Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a `display : inline-block` défini mais devient ensuite un élément flexible ou d'une grille, le comportement _inline-block_ est ignoré. +- `display: table` + - : La méthode de création de tableaux CSS décrite dans l'[introduction](/fr/docs/Learn/CSS/CSS_layout/Introduction) de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées. +- Mise en page à colonnes multiples + - : Pour certaines mises en page, vous pourriez utiliser [multi-col](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) comme solution de substitution, si votre conteneur a l'une des propriétés `column-*` définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas. +- Flexbox comme solution de repli pour la grille + - : [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété `flex` appliquée aux enfants sera ignorée. -<p>Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer.</p> +Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur. -<dl> - <dt><code>float</code> et <code>clear</code></dt> - <dd>Comme indiqué ci-dessus, les propriétés <code>float</code> et <code>clear</code> cessent d'affecter la mise en page si les éléments ciblés par <code>float</code> ou <code>clear</code> deviennent des éléments d'une grille ou d'une zone flexible.</dd> - <dt><code>display : inline-block</code></dt> - <dd>Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a <code>display : inline-block</code> défini mais devient ensuite un élément flexible ou d'une grille, le comportement <i>inline-block</i> est ignoré.</dd> - <dt><code>display: table</code></dt> - <dd>La méthode de création de tableaux CSS décrite dans l'<a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">introduction</a> de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées.</dd> - <dt>Mise en page à colonnes multiples</dt> - <dd>Pour certaines mises en page, vous pourriez utiliser <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> comme solution de substitution, si votre conteneur a l'une des propriétés <code>column-*</code> définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas.</dd> - <dt>Flexbox comme solution de repli pour la grille</dt> - <dd><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété <code>flex</code> appliquée aux enfants sera ignorée.</dd> -</dl> +Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite. -<p>Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur.</p> +### Exemple -<p>Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite.</p> +#### CSS -<h3 id="Example_2">Exemple</h3> -<h4 id="CSS_2">CSS</h4> -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -144,29 +159,34 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs padding: 1em; width: 33.333%; } -</pre> +``` -<h4 id="HTML_2">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +#### HTML -<p>{{EmbedLiveSample('Example_2', '', '150')}}</p> +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` + +{{EmbedLiveSample('Example_2', '', '150')}} + +Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici. -<p>Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici.</p> +## Requêtes de fonctionnalités -<h2 id="Feature_queries">Requêtes de fonctionnalités</h2> +Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page. -<p>Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page.</p> +Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur `auto` si nous savons que nous avons un support de grille. -<p>Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur <code>auto</code> si nous savons que nous avons un support de grille.</p> +### Exemple -<h3 id="Example_3">Exemple</h3> -<h4 id="CSS_3">CSS</h4> -<pre class="brush: css">* { +#### CSS + +```css +* { box-sizing: border-box; } @@ -191,70 +211,68 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs width: auto; } } -</pre> +``` + +#### HTML -<h4 id="HTML_3">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` -<p>{{EmbedLiveSample('Example_3', '', '150')}}</p> +{{EmbedLiveSample('Example_3', '', '150')}} -<p>La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité.</p> +La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité. -<p>La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible.</p> +La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible. -<h2 id="Older_versions_of_Flexbox">Anciennes versions de Flexbox</h2> +## Anciennes versions de Flexbox -<p>Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe <code>-ms-</code> pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">ce guide utile</a> vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs.</p> +Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe `-ms-` pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; [ce guide utile](https://css-tricks.com/old-flexbox-and-new-flexbox/) vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs. -<h2 id="The_IE10_and_11_prefixed_version_of_Grid">La version préfixée d'IE10 et 11 de Grid</h2> +## La version préfixée d'IE10 et 11 de Grid -<p>La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille <em>moderne</em>, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées <code>-ms-</code>, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne.</p> +La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille _moderne_, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées `-ms-`, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne. -<p>Le guide <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a> peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge.</p> +Le guide [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge. -<h2 id="Testing_older_browsers">Test des anciens navigateurs</h2> +## Test des anciens navigateurs -<p>La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Test sur plusieurs navigateurs</a>.</p> +La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module [Test sur plusieurs navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing). -<p>Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">une gamme de machines virtuelles à télécharger gratuitement</a>. Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows.</p> +Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition [une gamme de machines virtuelles à télécharger gratuitement](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/). Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows. -<h2 id="Summary">Résumé</h2> +## Résumé -<p>Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir.</p> +Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir. -<h2 id="See_Also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Utilisation des requêtes de fonctionnalités en CSS</a> <small>(en)</small></li> - <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Mises en page avancées avec les boîtes flexibles</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a></li> - <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Utilisation de la grille CSS : Prise en charge des navigateurs sans Grid</a> <small>(en)</small></li> - <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutoriel qui utilise la version IE10 et 11 de Grid</a> <small>(en)</small></li> - <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Dois-je essayer d'utiliser la mise en œuvre de la grille dans IE10 ?</a> <small>(en)</small></li> - <li><a href="https://24ways.org/2017/cascading-web-design/">Conception Web en cascade avec les requêtes de fonctionnalités</a> <small>(en)</small></li> - <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Utilisation des requêtes de fonctionnalités (vidéo)</a> <small>(en)</small></li> -</ul> +- [Utilisation des requêtes de fonctionnalités en CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) (en) +- [Mises en page avancées avec les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) +- [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [Utilisation de la grille CSS : Prise en charge des navigateurs sans Grid](https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/) (en) +- [Un tutoriel qui utilise la version IE10 et 11 de Grid](https://24ways.org/2012/css3-grid-layout/) (en) +- [Dois-je essayer d'utiliser la mise en œuvre de la grille dans IE10 ?](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) (en) +- [Conception Web en cascade avec les requêtes de fonctionnalités](https://24ways.org/2017/cascading-web-design/) (en) +- [Utilisation des requêtes de fonctionnalités (vidéo)](https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/) (en) -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} -<h2 id="In_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant des Media Queries</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li> -</ul> +- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Cours normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Les boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Disposition sur plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant des Media Queries](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Méthodes de mises en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Compréhension fondamentale de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/first_steps/getting_started/index.md b/files/fr/learn/css/first_steps/getting_started/index.md index 9bbccc2107..1bc1b5ff4e 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.md +++ b/files/fr/learn/css/first_steps/getting_started/index.md @@ -11,256 +11,291 @@ tags: - Sélecteurs translation_of: Learn/CSS/First_steps/Getting_started --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}} -<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> - -<p>Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> +Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances élémentaires en informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compréhension élémentaire du <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers"> travail avec des fichiers</a>, des bases en HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre comment associer une feuille de style CSS à un document HTML, savoir appliquer quelques règles simples de mise en forme d'un texte.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances élémentaires en informatique, <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >suite logicielle de base installée</a + >, compréhension élémentaire du <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + > travail avec des fichiers</a + >, des bases en HTML (cf. <a + href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre comment associer une feuille de style CSS à un document HTML, + savoir appliquer quelques règles simples de mise en forme d'un texte. + </td> + </tr> + </tbody> </table> -<h2 id="Dabord_un_peu_de_HTML">D'abord un peu de HTML</h2> +## D'abord un peu de HTML -<p>Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom <code>index.html</code>.</p> +Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom `index.html`. -<pre class="brush: html"><!doctype html> -<html lang="fr"> -<head> - <meta charset="utf-8"> - <title>Démarrer avec CSS</title> -</head> +```html +<!doctype html> +<html lang="fr"> +<head> + <meta charset="utf-8"> + <title>Démarrer avec CSS</title> +</head> -<body> +<body> - <h1>Je suis un titre de niveau un</h1> + <h1>Je suis un titre de niveau un</h1> - <p>Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span> - et aussi un <a href="http://example.com">lien</a>.</p> + <p>Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span> + et aussi un <a href="http://example.com">lien</a>.</p> - <p>Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>.</p> + <p>Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>.</p> - <ul> - <li>Item un</li> - <li>Item deux</li> - <li>Item <em>trois</em></li> - </ul> + <ul> + <li>Item un</li> + <li>Item deux</li> + <li>Item <em>trois</em></li> + </ul> -</body> +</body> -</html> -</pre> +</html> +``` -<div class="note"> -<p><strong>Note :</strong> Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.</p> -</div> +> **Note :** Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page. -<h2 id="Ajouter_CSS_à_notre_document">Ajouter CSS à notre document</h2> +## Ajouter CSS à notre document -<p>Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML.</p> +Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML. -<p>Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom <code>styles.css</code>. L'extension <code>.css</code> indique que c'est un fichier CSS.</p> +Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom `styles.css`. L'extension `.css` indique que c'est un fichier CSS. -<p>Pour lier <code>styles.css</code> à <code>index.html</code> ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :</p> +Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML : -<pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> +```html +<link rel="stylesheet" href="styles.css"> +``` -<p>Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut <code>rel</code> ; la valeur de l'attribut <code>href</code> donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans <code>styles.css</code>. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :</p> +Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans `styles.css`. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS : -<pre class="brush: css">h1 { +```css +h1 { color: red; -}</pre> +} +``` -<p>Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué.</p> +Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué. -<p>Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer <code>styles.css</code> sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes.</p> +Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer `styles.css` sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes. -<h2 id="Mettre_en_forme_des_éléments_HTML">Mettre en forme des éléments HTML</h2> +## Mettre en forme des éléments HTML -<p>En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML.</p> +En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML. -<p>Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur <code>p</code>. Voilà la règle pour passer en vert tous les paragraphes :</p> +Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur `p`. Voilà la règle pour passer en vert tous les paragraphes : -<pre class="brush: css">p { +```css +p { color: green; -}</pre> +} +``` -<p>On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :</p> +On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante : -<pre class="brush: css">p, li { +```css +p, li { color: green; -}</pre> +} +``` -<p>Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local.</p> +Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} -<h2 id="Changer_le_comportement_par_défaut_des_éléments">Changer le comportement par défaut des éléments</h2> +## Changer le comportement par défaut des éléments -<p>Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière.</p> +Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière. -<p>On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme. Un bon exemple est notre <code><ul></code>, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :</p> +On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme. Un bon exemple est notre `<ul>`, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit : -<pre class="brush: css">li { +```css +li { list-style-type: none; -}</pre> +} +``` -<p>Ajoutez cette règle dans votre CSS et testez en l'effet.</p> +Ajoutez cette règle dans votre CSS et testez en l'effet. -<p>Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété <code>list-style-type</code>. Dans la page pour <code><a href="/fr/docs/Web/CSS/list-style-type">list-style-type</a></code> vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page.</p> +Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété `list-style-type`. Dans la page pour [`list-style-type`](/fr/docs/Web/CSS/list-style-type) vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page. -<p>En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur <code>square</code> pour obtenir des puces carrées.</p> +En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur `square` pour obtenir des puces carrées. -<h2 id="Ajouter_une_classe">Ajouter une classe</h2> +## Ajouter une classe -<p>Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe.</p> +Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe. -<p>Dans le document HTML, ajouter un <a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut class</a> au deuxième item de la liste :</p> +Dans le document HTML, ajouter un [attribut class](/fr/docs/Web/HTML/Attributs_universels/class) au deuxième item de la liste : -<pre class="brush: html"><ul> - <li>Item un</li> - <li <strong>class="special"</strong>>Item deux</li> - <li>Item <em>trois</em></li> -</ul></pre> +```html +<ul> + <li>Item un</li> + <li class="special">Item deux</li> + <li>Item <em>trois</em></li> +</ul> +``` -<p>Dans votre CSS vous pouvez maintenant cibler la classe <code>special</code> grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :</p> +Dans votre CSS vous pouvez maintenant cibler la classe `special` grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style : -<pre class="brush: css">.special { +```css +.special { color: orange; font-weight: bold; -}</pre> +} +``` -<p>Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat.</p> +Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat. -<p>Vous pouvez attribuer la classe <code>special</code> à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément <code><span></code> du premier paragraphe.</p> +Vous pouvez attribuer la classe `special` à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément `<span>` du premier paragraphe. -<p>Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe :</p> +Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe : -<pre class="brush: css">li.special { +```css +li.special { color: orange; font-weight: bold; -}</pre> +} +``` -<p>Cette syntaxe signifie "s'applique à tous les éléments <code>li</code> dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>". Cette règle ne s'applique alors plus à l'élément <code><span></code> ou à tout autre élément dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>mais<em> </em>qui n'est pas un <code><li>.</code> Pour que la règle s'applique aussi au <code><span></code> il faudrait l'ajouter dans la liste des sélecteurs :</p> +Cette syntaxe signifie "s'applique à tous les éléments `li` dont l'attribut `class` a la valeur `special`\* *". Cette règle ne s'applique alors plus à l'élément `<span>` ou à tout autre élément dont l'attribut `class` a la valeur `special`* *mais* \*qui n'est pas un `<li>.` Pour que la règle s'applique aussi au `<span>` il faudrait l'ajouter dans la liste des sélecteurs : -<pre class="brush: css">li.special, +```css +li.special, span.special { color: orange; font-weight: bold; -}</pre> +} +``` -<p>Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique.</p> +Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique. -<h2 id="Style_en_fonction_de_la_position">Style en fonction de la position</h2> +## Style en fonction de la position -<p>Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments <code><em></code> — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le <code><em></code> imbriqué dans l'élément <code><li></code> avec un <strong>combinateur descendant </strong>qui prend la forme suivante<strong> : </strong>deux sélecteurs séparés par un espace.</p> +Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments `<em>` — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le `<em>` imbriqué dans l'élément `<li>` avec un **combinateur descendant** qui prend la forme suivante **:** deux sélecteurs séparés par un espace. -<p>Ajoutez la règle suivante à votre feuille de style :</p> +Ajoutez la règle suivante à votre feuille de style : -<pre class="brush: css">li em { +```css +li em { color: rebeccapurple; -}</pre> +} +``` -<p>Ce sélecteur cible tout élément <code><em></code> à l'intérieur (descendant) d'un <code><li></code>. Ainsi, dans notre exemple, le <code><em></code> dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé.</p> +Ce sélecteur cible tout élément `<em>` à l'intérieur (descendant) d'un `<li>`. Ainsi, dans notre exemple, le `<em>` dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé. -<p>On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un <code>+</code> (le <strong>combinateur de frères et sœurs adjacents</strong>) entre les sélecteurs.</p> +On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un `+` (le **combinateur de frères et sœurs adjacents**) entre les sélecteurs. -<p>Ajoutez cette règle à votre feuille de style :</p> +Ajoutez cette règle à votre feuille de style : -<pre class="brush: css">h1 + p { +```css +h1 + p { font-size: 200%; -}</pre> +} +``` -<p>L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe <span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le <span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé.</p> +L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe \<span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le \<span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}} -<div class="note"> -<p><strong>Note :</strong> A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a> du cours suivant.</p> -</div> +> **Note :** A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant. -<h2 id="Mise_en_forme_basée_sur_létat">Mise en forme basée sur l'état</h2> +## Mise en forme basée sur l'état -<p>Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <code><a href="/fr/docs/Web/HTML/Element/a"><a></a></code> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (<code>visited</code>), est survolé par le curseur (<code>hover</code>), a le focus clavier (<code>focus</code>), ou si l'utilisateur est en train de cliquer sur ce lien (<code>active</code>). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.</p> +Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément [`<a>`](/fr/docs/Web/HTML/Element/a) (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (`visited`), est survolé par le curseur (`hover`), a le focus clavier (`focus`), ou si l'utilisateur est en train de cliquer sur ce lien (`active`). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été. -<pre class="brush: css">a:link { +```css +a:link { color: pink; } a:visited { color: green; -}</pre> +} +``` -<p>On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :</p> +On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante : -<pre class="brush: css">a:hover { +```css +a:hover { text-decoration: none; -}</pre> - -<p>Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents états d'un lien. J'ai rajouté les règles précédentes à la feuille de style, notez comment le rose est très clair, peu lisible — pourquoi ne pas trouver une meilleure couleur ? Pourriez-vous passer les liens en gras ?</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> +} +``` -<p>Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.</p> +Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents états d'un lien. J'ai rajouté les règles précédentes à la feuille de style, notez comment le rose est très clair, peu lisible — pourquoi ne pas trouver une meilleure couleur ? Pourriez-vous passer les liens en gras ? -<div class="note"> -<p><strong>Note :</strong> dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> : les règles pour que nos pages soient compréhensibles et utilisables par tous.</p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} -<p>Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.</p> +Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction. -<p>Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible.</p> -</div> +> **Note :** dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y) : les règles pour que nos pages soient compréhensibles et utilisables par tous. +> +> Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier. +> +> Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible. -<h2 id="Associer_sélecteurs_et_combinateurs">Associer sélecteurs et combinateurs</h2> +## Associer sélecteurs et combinateurs -<p>On peut associer sélecteurs et combinateurs. Par exemple :</p> +On peut associer sélecteurs et combinateurs. Par exemple : -<pre class="brush: css">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ +```css +/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ article p span { ... } -/* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1> */ -h1 + ul + p { ... }</pre> +/* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1> */ +h1 + ul + p { ... } +``` -<p>On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :</p> +On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style : -<pre class="brush: css">body h1 + p .special { +```css +body h1 + p .special { color: yellow; background-color: black; padding: 5px; -}</pre> +} +``` -<p>Cette règle cible tout élément dont l'attribut class vaut <code>special</code>, à l'intérieur d'un <code><p></code>, qui vient juste après un <code><h1></code>, à l'intérieur de <code><body></code>. Ouf !</p> +Cette règle cible tout élément dont l'attribut class vaut `special`, à l'intérieur d'un `<p>`, qui vient juste après un `<h1>`, à l'intérieur de `<body>`. Ouf ! -<p>Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est <code><span class="special"></code>.</p> +Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est `<span class="special">`. -<p>Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela.</p> +Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela. -<h2 id="Bilan">Bilan</h2> +## Bilan -<p>Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances.</p> +Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances. -<p>Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN.</p> +Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN. -<p>Dans la leçon suivante, nous étudirons comment CSS est structuré.</p> +Dans la leçon suivante, nous étudirons comment CSS est structuré. -<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> +{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est ce que CSS?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS comment ça marche ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Utiliser vos connaissances</a></li> -</ol> +1. [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Utiliser vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.md b/files/fr/learn/css/first_steps/how_css_is_structured/index.md index 057da54fc4..1914be5f1a 100644 --- a/files/fr/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.md @@ -3,51 +3,69 @@ title: Comment CSS est structuré slug: Learn/CSS/First_steps/How_CSS_is_structured translation_of: Learn/CSS/First_steps/How_CSS_is_structured --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> - -<p>Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p> +Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Approfondir les structures syntaxiques fondamentales de CSS</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Maîtrise élémentaire de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >suite logicielle de base installée</a + >, compétences élémentaires pour + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >travailler avec des fichiers</a + >, connaissance de base du HTML (cf. + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >), et une idée de + <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" + >Comment fonctionne CSS</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Approfondir les structures syntaxiques fondamentales de CSS</td> + </tr> + </tbody> </table> -<h2 id="applying_css_to_html">Appliquer CSS à votre document HTML</h2> +## Appliquer CSS à votre document HTML + +Regardons d'abord les trois méthodes pour appliquer CSS à un document. -<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p> +### Feuille de style externe -<h3 id="external_stylesheet">Feuille de style externe</h3> +Dans la leçon [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages. -<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p> +Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension `.css`. Un élément HTML `<link>` fait référence à ce fichier. -<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élément HTML <code><link></code> fait référence à ce fichier.</p> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Une expérience avec CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Hello World!</h1> + <p>ceci est mon premier exemple CSS</p> + </body> +</html> +``` -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Une expérience avec CSS</title> - <link rel="stylesheet" href="styles.css"> - </head> - <body> - <h1>Hello World!</h1> - <p>ceci est mon premier exemple CSS</p> - </body> -</html></pre>e +e -<p>Le fichier CSS devrait ressembler à cela :</p> +Le fichier CSS devrait ressembler à cela : -<pre class="brush: css">h1 { +```css +h1 { color: blue; background-color: yellow; border: 1px solid black; @@ -55,33 +73,37 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured p { color: red; -}</pre> +} +``` -<p>L'attribut <code>href</code> de l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> doit pointer vers un fichier dans votre système de fichiers.</p> +L'attribut `href` de l'élément [`<link>`](/fr/docs/Web/HTML/Element/link) doit pointer vers un fichier dans votre système de fichiers. -<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p> +Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple : -<pre class="brush: html"><!-- Dans un sous-répertoire nommé styles dans le répertoire courant --> -<link rel="stylesheet" href="styles/style.css"> +```html +<!-- Dans un sous-répertoire nommé styles dans le répertoire courant --> +<link rel="stylesheet" href="styles/style.css"> -<!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant --> -<link rel="stylesheet" href="styles/general/style.css"> +<!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant --> +<link rel="stylesheet" href="styles/general/style.css"> -<!-- Dans un sous-répertoire nommé styles, un niveau plus haut --> -<link rel="stylesheet" href="../styles/style.css"></pre> +<!-- Dans un sous-répertoire nommé styles, un niveau plus haut --> +<link rel="stylesheet" href="../styles/style.css"> +``` -<h3 id="internal_stylesheet">Feuille de style interne</h3> +### Feuille de style interne -<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> dans un élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>. On parle alors de feuille de style interne.</p> +Les règles CSS peuvent être écrites directement dans l'en-tête HTML [`<head>`](/fr/docs/Web/HTML/Element/head) dans un élément [`<style>`](/fr/docs/Web/HTML/Element/style). On parle alors de feuille de style interne. -<p>Le code HTML ci-dessous illustre cette technique :</p> +Le code HTML ci-dessous illustre cette technique : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mes expérimentations CSS</title> - <style> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mes expérimentations CSS</title> + <style> h1 { color: blue; background-color: yellow; @@ -91,175 +113,183 @@ p { p { color: red; } - </style> - </head> - <body> - <h1>Hello World!</h1> - <p>Ceci est mon premier exemple CSS</p> - </body> -</html></pre> + </style> + </head> + <body> + <h1>Hello World!</h1> + <p>Ceci est mon premier exemple CSS</p> + </body> +</html> +``` -<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p> +Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier `style.css`). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier. -<h3 id="inline_styles">Styles en ligne</h3> +### Styles en ligne -<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut <code>style</code>:</p> +Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut `style`: -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mes expérimentations CSS</title> - </head> - <body> - <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> - <p style="color:red;">Ceci est mon premier exemple CSS</p> - </body> -</html></pre> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mes expérimentations CSS</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> + <p style="color:red;">Ceci est mon premier exemple CSS</p> + </body> +</html> +``` -<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p> +**Cette approche est vraiment à proscrire !** Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile. -<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.</p> +Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible. -<h2 id="playing_with_the_css_in_this_article">Jouer avec le CSS de cet article</h2> +## Jouer avec le CSS de cet article -<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p> +Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants : -<p><strong>index.html</strong> :</p> +**index.html** : -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - <title>Mes expériences CSS</title> - <link rel="stylesheet" href="styles.css"> - </head> - <body> +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Mes expériences CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> - <p>Créez votre test ici !</p> + <p>Créez votre test ici !</p> - </body> -</html></pre> + </body> +</html> +``` -<p><strong>styles.css</strong> :</p> +**styles.css** : -<pre class="brush: css">/* Créez votre test CSS ici */ +```css +/* Créez votre test CSS ici */ p { color: red; -}</pre> +} +``` -<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code><body></code>…<code></body></code> dans le fichier <code>index.html</code> ; ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p> +Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises `<body>`…`</body>` dans le fichier `index.html` ; ajoutez les règles CSS dans la feuille `styles.css`. -<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p> +Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} </p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} -<p>Bonne lecture !</p> +Bonne lecture ! -<h2 id="selectors">Sélecteurs</h2> +## Sélecteurs -<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p> +Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez. -<p>Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.</p> +Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs. -<pre class="brush: css">h1 +```css +h1 a:link .manythings #onething * .box p .box p:first-child -h1, h2, .intro</pre> +h1, h2, .intro +``` -<p>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</p> +Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN ! -<div class="notecard note"> -<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p> -</div> +> **Note :** Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur [les sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors), dans un prochain cours. -<h3 id="specificity">Spécificité</h3> +### Spécificité -<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p> +Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur `p` qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe `special`. -<pre class="brush: css">.special { +```css +.special { color: red; } p { color: blue; -}</pre> +} +``` -<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p> +Disons que dans notre document HTML, nous avons un paragraphe avec un attribut `class` valant `special`. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ? -<pre class="brush: html"><p class="special">De quelle couleur suis-je?</p></pre> +```html +<p class="special">De quelle couleur suis-je?</p> +``` -<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p> +Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées **cascade** et **spécificité**. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur `p`, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la _cascade_ en action. -<pre class="brush: css">p { +```css +p { color: red; } p { color: blue; -}</pre> +} +``` -<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p> +Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de _spécificité_ que le sélecteur d'élément, elle gagne donc. -<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {…}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p> +**Tentez vous-même l'expérience ci-dessus** — **ajoutez le code HTML à votre expérience, puis ajoutez les deux règles `p {…}` à votre feuille de style. Ensuite, changez le premier sélecteur `p` en `.special`pour voir comment il affecte le style.** -<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p> +Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents. -<h2 id="properties_and_values">Propriétés et valeurs</h2> +## Propriétés et valeurs -<p>Au niveau le plus fondamental, CSS se compose de deux blocs de construction :</p> +Au niveau le plus fondamental, CSS se compose de deux blocs de construction : -<ul> - <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/fr/docs/Web/CSS/width">width</a></code>, <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li> - <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan).</li> -</ul> +- **Propriétés** : des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques ([`font-size`](/fr/docs/Web/CSS/font-size), [`width`](/fr/docs/Web/CSS/width), [`background-color`](/fr/docs/Web/CSS/background-color), par exemple) que vous souhaitez modifier ; +- **Valeurs** : une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan). -<p>L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est <code>color</code> et la valeur <code>blue</code>.</p> +L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est `color` et la valeur `blue`. -<p><img alt="Une déclaration surlignée au sein du code CSS" src="declaration.png"></p> + -<p>Une propriété associée à une valeur s'appelle une <em>déclaration CSS</em>. Les déclarations CSS sont placées dans des <em>blocs de déclaration CSS</em>. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.</p> +Une propriété associée à une valeur s'appelle une _déclaration CSS_. Les déclarations CSS sont placées dans des _blocs de déclaration CSS_. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance. -<p><img alt="Un bloc de déclaration surligné" src="declaration-block.png"></p> + -<p>Enfin, les blocs de déclaration CSS sont associés à des <em>sélecteurs</em> pour produire des <em>ensembles de règles CSS</em> (ou <em>règles CSS</em>). L'image contient deux règles, une pour le sélecteur <code>h1</code> et une pour le sélecteur <code>p</code>. La règle pour <code>h1</code> est mise en surbrillance.</p> +Enfin, les blocs de déclaration CSS sont associés à des _sélecteurs_ pour produire des _ensembles de règles CSS_ (ou _règles CSS_). L'image contient deux règles, une pour le sélecteur `h1` et une pour le sélecteur `p`. La règle pour `h1` est mise en surbrillance. -<p><img alt="La règle ciblant h1 est surlignée" src="rules.png"></p> + -<p>Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (<code>:</code>).</p> +Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (`:`). -<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p> +**Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML :** -<ul> - <li><strong><a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/width"><code>width</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/border"><code>border</code></a></strong></li> -</ul> +- **[`font-size`](/fr/docs/Web/CSS/font-size)** +- **[`width`](/fr/docs/Web/CSS/width)** +- **[`background-color`](/fr/docs/Web/CSS/background-color)** +- **[`color`](/fr/docs/Web/CSS/color)** +- **[`border`](/fr/docs/Web/CSS/border)** -<div class="warning"> -<p><strong>Attention :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p> -</div> +> **Attention :** Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme _invalide_ et complètement ignorée par le moteur CSS du navigateur. -<div class="warning"> -<p><strong>Attention :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p> -</div> +> **Attention :** En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit _toujours_ être notée `color`. `couleur` ne fonctionnera pas. -<h3 id="functions">Fonctions</h3> +### Fonctions -<p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p> +Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction `calc()`. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple : -<h4 id="Exemple_calc">Exemple calc</h4> +#### Exemple calc -<pre class="brush: html"><div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div></pre> +```html +<div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div> +``` -<pre class="brush: css">.outer { +```css +.outer { border: 5px solid black; } @@ -268,51 +298,59 @@ p { width: calc(90% - 30px); background-color: rebeccapurple; color: white; -}</pre> +} +``` -<p>La page devrait s'afficher comme ceci :</p> +La page devrait s'afficher comme ceci : -<p>{{EmbedLiveSample('Exemple_calc', '100%', 200)}}</p> +{{EmbedLiveSample('Exemple_calc', '100%', 200)}} -<p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p> +Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple `calc()` ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement. -<p>Un autre exemple serait les différentes valeurs de la propriété <a href="/fr/docs/Web/CSS/<transform>"><code><transform></code></a>, telles que <code>rotate()</code>.</p> +Un autre exemple serait les différentes valeurs de la propriété [`<transform>`](/fr/docs/Web/CSS/<transform>), telles que `rotate()`. -<h4 id="Exemple_transform">Exemple transform</h4> +#### Exemple transform -<pre class="brush: html"><div class="box"></div></pre> +```html +<div class="box"></div> +``` -<pre class="brush: css">.box { +```css +.box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) -}</pre> +} +``` + +La page devrait s'afficher comme ceci : -<p>La page devrait s'afficher comme ceci :</p> +{{EmbedLiveSample('Exemple_transform', '100%', 200)}} -<p>{{EmbedLiveSample('Exemple_transform', '100%', 200)}}</p> +**Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML :** -<p><strong>Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML : </strong></p> +- **[`transform`](/fr/docs/Web/CSS/transform)** +- **[`background-image`](/fr/docs/Web/CSS/background-image), en particulier les valeurs de dégradé** +- **[`color`](/fr/docs/Web/CSS/color), en particulier les valeurs rgb/rgba/hsl/hsla** -<ul> - <li><strong><a href="/fr/docs/Web/CSS/transform"><code>transform</code></a></strong></li> - <li><strong><a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>, en particulier les valeurs de dégradé</strong></li> - <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a>, en particulier les valeurs rgb/rgba/hsl/hsla</strong></li> -</ul> +## @rules -<h2 id="rules">@rules</h2> e -<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/fr/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code> simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera <code>@import</code> :</p> -<pre class="brush: css">@import 'styles2.css';</pre> +Nous n'avons pas rencontré jusqu'ici les [`@rules`](/fr/docs/Web/CSS/At-rule) (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines `@rules` simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera `@import` : -<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Media_Queries"><i lang="en">media queries</i></a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p> +```css +@import 'styles2.css'; +``` -<p>Dans le CSS ci-dessous, une règle donne à l'élément <code><body></code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p> +L'une des `@rules` les plus fréquemment rencontrée est `@media`, qui permet d'utiliser les [<i lang="en">media queries</i>](/fr/docs/Web/CSS/Media_Queries) pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur). -<pre class="brush: css">body { +Dans le CSS ci-dessous, une règle donne à l'élément `<body>` un fond rose. La section `@media` ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue. + +```css +body { background-color: pink } @@ -320,58 +358,66 @@ e body { background-color: blue; } -}</pre> +} +``` -<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p> +Tout au long de nos tutoriels CSS, vous rencontrerez d'autres `@rules`. -<p><strong>Ajoutez une <i lang="en">media query</i> à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p> +**Ajoutez une <i lang="en">media query</i> à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.** -<h2 id="shorthands">Raccourcis</h2> +## Raccourcis -<p>Certaines propriétés comme <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/background"><code>background</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ou <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p> +Certaines propriétés comme [`font`](/fr/docs/Web/CSS/font), [`background`](/fr/docs/Web/CSS/background), [`padding`](/fr/docs/Web/CSS/padding), [`border`](/fr/docs/Web/CSS/border), ou [`margin`](/fr/docs/Web/CSS/margin) sont appelées **propriétés raccourci** — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli. -<p>Par exemple, la ligne suivante :</p> +Par exemple, la ligne suivante : -<pre class="brush: css">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données +```css +/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top). Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin pour top/bottom, puis left/right */ -padding: 10px 15px 15px 5px;</pre> +padding: 10px 15px 15px 5px; +``` -<p>produit le même effet que les quatre lignes suivantes réunies :</p> +produit le même effet que les quatre lignes suivantes réunies : -<pre class="brush: css">padding-top: 10px; +```css +padding-top: 10px; padding-right: 15px; padding-bottom: 15px; -padding-left: 5px;</pre> +padding-left: 5px; +``` -<p>Alors que :</p> +Alors que : -<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> +```css +background: red url(bg-graphic.png) 10px 10px repeat-x fixed; +``` -<p>produit la même chose que tout ce qui suit :</p> +produit la même chose que tout ce qui suit : -<pre class="brush: css">background-color: red; +```css +background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; -background-scroll: fixed;</pre> +background-scroll: fixed; +``` -<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p> +Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre [référence CSS](/fr/docs/Web/CSS/Reference) pour en savoir plus. -<p><strong>Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.</strong></p> +**Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.** -<div class="notecard warning"> -<p><strong>Attention :</strong> Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.</p> -</div> +> **Attention :** Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument. -<h2 id="comments">Commentaires</h2> +## Commentaires -<p>En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p> +En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus. -<p>En CSS le début des commentaires est signalé par <code>/*</code> et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p> +En CSS le début des commentaires est signalé par `/*` et la fin par `*/`. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier. -<pre class="brush: css">/* mise en forme des éléments de base */ +```css +/* mise en forme des éléments de base */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; @@ -405,27 +451,31 @@ div p{ div p + p { padding-top: 0; -}</pre> +} +``` -<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur <code>.special</code> a été désactivée par des commentaires :</p> +Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur `.special` a été désactivée par des commentaires : -<pre class="brush: css">/*.special { +```css +/*.special { color: red; }*/ p { color: blue; -}</pre> +} +``` -<p><strong>Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.</strong></p> +**Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.** -<h2 id="white_space">Espace</h2> +## Espace -<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.</p> +On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible. -<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p> +L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code. -<pre class="brush: css">body { +```css +body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; @@ -456,11 +506,12 @@ div p { div p + p { padding-top: 0; } -</pre> +``` -<p>On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p> +On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain ! -<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +```css +body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} @@ -468,38 +519,40 @@ h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; background-style: none} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} -</pre> +``` -<p>La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.</p> +La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe. -<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p> +Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS : -<pre class="brush: css">margin: 0 auto; -padding-left: 10px;</pre> +```css +margin: 0 auto; +padding-left: 10px; +``` -<p>Mais les suivantes sont invalides :</p> +Mais les suivantes sont invalides : -<pre class="brush: css">margin: 0auto; -padding- left: 10px;</pre> +```css +margin: 0auto; +padding- left: 10px; +``` -<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code> (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p> +`0auto` n'est pas reconnu comme une valeur possible pour la propriété `margin` (`0` et `auto` sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace. -<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p> +Le navigateur ne connaît pas la propriété `padding-` . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace. -<p><strong>À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p> +**À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.** -<h2 id="À_suivre…">À suivre…</h2> +## À suivre… -<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p> +Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — [Comment CSS fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works) — nous examinerons donc ce point. -<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> +{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS">Qu'est ce que CSS?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li>Comment CSS est structuré</li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS comment ça marche ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos connaissances</a></li> -</ol> +1. [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. Comment CSS est structuré +4. [CSS comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/how_css_works/index.md b/files/fr/learn/css/first_steps/how_css_works/index.md index 0a578ae2a0..60f48f7f03 100644 --- a/files/fr/learn/css/first_steps/how_css_works/index.md +++ b/files/fr/learn/css/first_steps/how_css_works/index.md @@ -3,147 +3,169 @@ title: CSS, comment ça marche ? slug: Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works --- -<p>{{LearnSidebar}}<br> - {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> +{{LearnSidebar}} +{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -<p>Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.</p> +Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre, à un niveau élémentaire, comment un navigateur traite les codes CSS et HTML et ce qui se passe quand le navigateur rencontre du CSS qu'il ne sait pas interpréter.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions de base en l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base installés</a + >, + <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" + >savoir manipuler des fichiers</a + >, connaissance de base de HTML (cf. <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction à HTML</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre, à un niveau élémentaire, comment un navigateur traite les + codes CSS et HTML et ce qui se passe quand le navigateur rencontre du + CSS qu'il ne sait pas interpréter. + </td> + </tr> + </tbody> </table> -<h2 id="CSS_comment_ça_marche_en_fait">CSS comment ça marche, en fait ?</h2> +## CSS comment ça marche, en fait ? -<p>Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe :</p> +Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe : -<ol> - <li>Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau).</li> - <li>Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (<em>Document Object Model</em>) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section.</li> - <li>Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation.</li> - <li>Le navigateur <em>parse</em> le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'<em>arbre de rendu</em> (render tree).</li> - <li>Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée.</li> - <li>Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle <em>painting</em>).</li> -</ol> +1. Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau). +2. Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (_Document Object Model_) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section. +3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation. +4. Le navigateur *parse* le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'_arbre de rendu_ (render tree). +5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée. +6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle _painting_). -<p>Le diagramme suivant propose une vue synthétique de ce traitement.</p> +Le diagramme suivant propose une vue synthétique de ce traitement. -<p><img alt="" src="rendering.svg"></p> + -<h2 id="À_propos_du_DOM">À propos du DOM</h2> +## À propos du DOM -<p>Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les <em>parents</em> de <em>nœuds enfants</em> (child nodes) et les nœuds enfants peuvent avoir des <em>frères et sœurs </em>(siblings).</p> +Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les _parents_ de _nœuds enfants_ (child nodes) et les nœuds enfants peuvent avoir des *frères et sœurs* (siblings). -<p>Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document.</p> +Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document. -<p>Avec les DevTools de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux.</p> +Avec les DevTools de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux. -<h2 id="Une_représentation_concrète_du_DOM">Une représentation concrète du DOM</h2> +## Une représentation concrète du DOM -<p>Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM.</p> +Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM. -<p>Partons du code ci-dessous :</p> +Partons du code ci-dessous : -<pre class="brush: html"><p> +```html +<p> Let's use: - <span>Cascading</span> - <span>Style</span> - <span>Sheets</span> -</p> -</pre> + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +``` -<p>Dans le DOM, le nœud correspondant à l'élément <code><p></code> est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments <code><span></code>. Les nœuds <code>SPAN</code> sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte :</p> +Dans le DOM, le nœud correspondant à l'élément `<p>` est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments `<span>`. Les nœuds `SPAN` sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte : -<pre>P -├─ "Let's use:" -├─ SPAN -| └─ "Cascading" -├─ SPAN -| └─ "Style" -└─ SPAN - └─ "Sheets" -</pre> + P + ├─ "Let's use:" + ├─ SPAN + | └─ "Cascading" + ├─ SPAN + | └─ "Style" + └─ SPAN + └─ "Sheets" -<p>C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit :</p> +C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit : -<p>{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}</p> +{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}} -<pre class="brush: css hidden">p {margin:0;}</pre> +```css hidden +p {margin:0;} +``` -<h2 id="Appliquer_CSS_au_DOM">Appliquer CSS au DOM</h2> +## Appliquer CSS au DOM -<p>Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé :</p> +Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé : -<pre class="brush: html"><p> +```html +<p> Let's use: - <span>Cascading</span> - <span>Style</span> - <span>Sheets</span> -</p></pre> + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +``` -<p>On lui applique le CSS suivant :</p> +On lui applique le CSS suivant : -<pre class="brush: css">span { +```css +span { border: 1px solid black; background-color: lime; -}</pre> +} +``` -<p>Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur <code>span</code>, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à <em>peindre</em> la représentation visuelle finale à l'écran.</p> +Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur `span`, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à *peindre* la représentation visuelle finale à l'écran. -<p>Voilà le résultat après mise à jour :</p> +Voilà le résultat après mise à jour : -<p>{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}</p> +{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}} -<p>Dans le prochain module, dans l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a>, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.</p> +Dans le prochain module, dans l'article [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS), nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS. -<h2 id="Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas">Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ?</h2> +## Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ? -<p>Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait <a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs">dans une leçon précédente</a>. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.</p> +Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait [dans une leçon précédente](/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs). Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter. -<p>La réponse : ne rien faire et passer à la suite !</p> +La réponse : ne rien faire et passer à la suite ! -<p>Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur.</p> +Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur. -<p>De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante.</p> +De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante. -<p>Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise <code>colour</code> pour le mot <em>couleur.</em> Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée.</p> +Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise `colour` pour le mot *couleur.* Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée. -<pre class="brush: html"><p> Je veux que ce texte soit grand, gras et bleu.</p></pre> +```html +<p> Je veux que ce texte soit grand, gras et bleu.</p> +``` -<pre class="brush: css">p { +```css +p { font-weight: bold; colour: blue; /* incorrect spelling of the color property */ font-size: 200%; -}</pre> +} +``` -<p>{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}</p> +{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}} -<p>Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la <em>cascade</em> : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.</p> +Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la _cascade_ : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent. -<p>Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter <code>calc()</code> pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de <code>width</code> est calculée par <code>calc(</code><code>)</code>. Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec <code>calc()</code> qui, par cascade, écrase la déclaration précédente.</p> +Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter `calc()` pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de `width` est calculée par ` calc(``) `. Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec `calc()` qui, par cascade, écrase la déclaration précédente. -<p>Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.</p> +Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs. -<h2 id="Et_enfin">Et enfin</h2> +## Et enfin -<p>Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez <a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">mettre en œuvre vos nouvelles connaissances</a> : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS.</p> +Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez [mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS. -<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> +{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cour">Dans ce cour</h2> +## Dans ce cour -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS">CSS, c'est quoi ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS ça marche comment ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos nouvelles connaissances</a></li> -</ol> +1. [CSS, c'est quoi ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS ça marche comment ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md index 2b0e0238ec..3861ea29db 100644 --- a/files/fr/learn/css/first_steps/index.md +++ b/files/fr/learn/css/first_steps/index.md @@ -9,48 +9,40 @@ tags: - premiers pas translation_of: Learn/CSS/First_steps --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.</p> +CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML. -<h3 id="Vous_voulez_devenir_un_développeur_web_front-end">Vous voulez devenir un développeur web front-end ?</h3> +### Vous voulez devenir un développeur web front-end ? -<p>Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> +Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Avant de commencer ce module, vous devriez avoir :</p> +Avant de commencer ce module, vous devriez avoir : -<ol> - <li>Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ;</li> - <li>Un environnement de travail minimal installé, comme indiqué dans la section <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installer les logiciels de base</a> et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a> ;</li> - <li>Une familiarité avec HTML, comme discuté dans le module d'<a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">introduction à HTML</a>.</li> -</ol> +1. Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ; +2. Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) ; +3. Une familiarité avec HTML, comme discuté dans le module d'[introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). -<div class="note"> -<p><strong>Note :</strong> Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme <a href="/fr/docs/">JSBin</a> ou <a href="/fr/docs/">Thimble</a>.</p> -</div> +> **Note :** Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences :</p> +Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences : -<dl> - <dt><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que le CSS?</a></dt> - <dd><p><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.</p></dd> - <dt><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></dt> - <dd>Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.</dd> - <dt><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment est structuré le CSS </a></dt> - <dd>Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés.</dd> - <dt><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS Fonctionne</a></dt> - <dd>Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.</dd> - <dt><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Utilisez vos nouvelles compétences</a></dt> - <dd>Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.</dd> -</dl> +- [Qu'est-ce que le CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) + - : **{{Glossary("CSS")}}** (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage. +- [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) + - : Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage. +- [Comment est structuré le CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) + - : Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés. +- [Comment CSS Fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works) + - : Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web. +- [Utilisez vos nouvelles compétences](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) + - : Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<dl> - <dt>Literacy<a href="/fr/docs/"> Web intermédiaire 1 : Introduction au CSS</a></dt> - <dd>Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module <em>Introduction à CSS</em>. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P</dd> -</dl> +- Literacy[ Web intermédiaire 1 : Introduction au CSS](/fr/docs/) + - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md index 87b94d05bf..fcb42335eb 100644 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md @@ -8,99 +8,92 @@ tags: - Playground translation_of: Learn/CSS/First_steps/Using_your_new_knowledge --- -<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -<p>Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. </p> +Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de vous soumettre à cette évaluation, vous avez suivi le module sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester vos connaissances en mettant à l'œuvre CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de vous soumettre à cette évaluation, vous avez suivi le module + sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML + (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Tester vos connaissances en mettant à l'œuvre CSS.</td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<p>Vous pouvez travailler dans l'éditeur ci-dessous ou <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">télécharger le point de départ</a> pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section <code><head></code>. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ou <a href="https://glitch.com/" rel="noopener">Glitch</a> pour travailler sur les tâches proposées.</p> +Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section `<head>`. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. -<div class="note"> -<p><strong>Note :</strong> ne restez pas coincé, appelez à l'aide — voir la section <a href="#evaluation">Evaluation et comment obtenir de l'aide</a> au bas de cette page.</p> -</div> +> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. -<h2 id="Travailler_avec_CSS">Travailler avec CSS</h2> +## Travailler avec CSS -<p>L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages :</p> +L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : -<ul> - <li>{{cssxref("font-family")}}</li> - <li>{{cssxref("color")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("font-weight")}}</li> - <li>{{cssxref("font-size")}}</li> - <li>{{cssxref("text-decoration")}}</li> -</ul> +- {{cssxref("font-family")}} +- {{cssxref("color")}} +- {{cssxref("border-bottom")}} +- {{cssxref("font-weight")}} +- {{cssxref("font-size")}} +- {{cssxref("text-decoration")}} -<p>J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme <code>h1</code> et <code>h2</code> ; j'ai aussi créé une classe <code>job-title</code>.</p> +J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. -<p>Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées :</p> +Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : -<ol> - <li>Affichez le titre de niveau 1 en <code>hotpink</code> ;</li> - <li> Donnez au titre un {{cssxref("border-bottom")}} de <code>10px dotted</code> de couleur <code>purple</code> ;</li> - <li>Affichez le titre de niveau 2 en italique ;</li> - <li>Colorez la <code>ul</code> des détails de contacts en {{cssxref("background-color")}} <code>#eeeeee</code>, avec un {{cssxref("border")}} de <code>5px solid purple</code>. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord.</li> - <li>Faites que les liens apparaissent en <code>green</code> lors d'un survol du curseur.</li> -</ol> +1. Affichez le titre de niveau 1 en `hotpink` ; +2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; +3. Affichez le titre de niveau 2 en italique ; +4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. +5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. -<p>Vous devriez obtenir un rendu qui ressemble à cela :</p> +Vous devriez obtenir un rendu qui ressemble à cela : -<p><img alt="Screenshot of how the example should look after completing the assessment." src="learn-css-basics-assessment.png"></p> + -<p>Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la <a href="/fr/docs/Web/CSS/Reference">référence CSS sur MDN</a> !</p> +Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! -<p>À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie.</p> +À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> +{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} -<h2 id="Evaluation_ou_compléments_dinformation">Evaluation ou compléments d'information</h2> +## Evaluation ou compléments d'information -<p>Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :</p> +Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : -<ol> - <li>Publiez votre code dans un éditeur en ligne tel <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, or <a href="https://glitch.com/" rel="noopener">Glitch</a>.</li> - <li>Si vous êtes à l'aise en anglais : - <ol> - <li>Dans le <a href="https://discourse.mozilla.org/c/mdn" rel="noopener">forum MDN Discourse</a>, écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : - <ul> - <li>Un titre parlant comme "Assessment wanted for CSS First Steps".</li> - <li>Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide.</li> - <li>Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code...</li> - <li>Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide.</li> - </ul> - </li> - </ol> - </li> - <li>Sinon, n'hésitez pas à contacter @MDNfr sur Twitter.</li> -</ol> +1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). +2. Si vous êtes à l'aise en anglais : -<h2 id="La_suite">La suite ?</h2> + 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : -<p>Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, <a href="/fr/docs/Apprendre/CSS/Building_blocks">construire des blocs CSS</a>, nous approfondirons de nombreux points.</p> + - Un titre parlant comme "Assessment wanted for CSS First Steps". + - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. + - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... + - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. -<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}}</p> +3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## La suite ? -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que CSS ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Commencer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS, comment ça marche ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettez en œuvre vos connaissances</a></li> -</ol> +Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. + +{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} + +## Dans ce cours + +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md index bfdeb9fa33..132132d24b 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.md +++ b/files/fr/learn/css/first_steps/what_is_css/index.md @@ -11,123 +11,131 @@ tags: translation_of: Learn/CSS/First_steps/What_is_CSS original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> - -<p><strong>{{Glossary("CSS")}}</strong> (<em>Cascading Style Sheets</em>) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.</p> +**{{Glossary("CSS")}}** (_Cascading Style Sheets_) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre ce qu'est CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions de base en l'informatique, + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >logiciels de base installés</a + >, + <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" + >savoir manipuler des fichiers</a + >, connaissance de base de HTML (cf. <a + href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction à HTML</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre ce qu'est CSS.</td> + </tr> + </tbody> </table> -<p>Dans le cours <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.</p> +Dans le cours [Introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML), nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style. -<p><img alt="La mise en forme par défaut appliquée par un navigateur." src="basic_styling_fr.png"></p> + -<p>Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.</p> +Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix. -<p>Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :</p> +Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante : -<p>{{EmbedYouTube("spK_S0HfzFw")}}</p> +{{EmbedYouTube("spK_S0HfzFw")}} -<h2 id="À_quoi_sert_CSS">À quoi sert CSS ?</h2> +## À quoi sert CSS ? -<p>Comme mentionné plus haut, CSS est un langage de mise en forme des documents. </p> +Comme mentionné plus haut, CSS est un langage de mise en forme des documents. -<p>Les <strong>documents</strong> en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.</p> +Les **documents** en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}. -<p><strong>"Présenter</strong> un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.</p> +**"Présenter** un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante. -<div class="note"> -<p><strong>Note :</strong> Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.</p> -</div> +> **Note :** Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables. -<p>CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer <a href="/fr/docs/Web/CSS/Type_color">la couleur</a> et <a href="/fr/docs/Web/CSS/font-size">la taille</a> des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">un texte affiché sur une colonne</a> en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des <a href="/fr/docs/Web/CSS/Animations_CSS">animations</a>. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.</p> +CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer [la couleur](/fr/docs/Web/CSS/Type_color) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer [un texte affiché sur une colonne](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/Animations_CSS). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples. -<h2 id="Syntaxe_de_CSS">Syntaxe de CSS</h2> +## Syntaxe de CSS -<p>CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.</p> +CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. -<p>Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."</p> +Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères." -<p>Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :</p> +Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme : -<pre class="brush: css">h1 { +```css +h1 { color: red; font-size: 5em; -}</pre> +} +``` -<p>La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).</p> +La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}). -<p>Suivent une paire d'accolades <code>{ }</code> à l'intérieur desquelles on trouve une ou plusieurs <strong>déclarations</strong>, sous la forme d'une paire <strong>propriété</strong> : <strong>valeur</strong>. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété <code>color</code> peut prendre différentes <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Color">valeurs de type <code><color></code></a>. La propriété <code>font-size</code> accepte différentes <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">tailles</a> comme valeurs.</p> +Suivent une paire d'accolades `{ }` à l'intérieur desquelles on trouve une ou plusieurs **déclarations**, sous la forme d'une paire **propriété** : **valeur**. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété `color` peut prendre différentes [valeurs de type `<color>`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Color). La propriété `font-size` accepte différentes [tailles](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages) comme valeurs. -<p>Une feuille de style CSS est constituée d'une succession de telles règles :</p> +Une feuille de style CSS est constituée d'une succession de telles règles : -<pre class="brush: css">h1 { +```css +h1 { color: red; font-size: 5em; } p { color: black; -}</pre> +} +``` -<p>On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.</p> +On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables. -<div class="note"> -<p><strong>Note :</strong> Sur MDN, dans <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a>, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn <em>nom-de-propriété-ou-fonctionnalité-css</em>" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !</p> -</div> +> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn _nom-de-propriété-ou-fonctionnalité-css_" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" ! -<h2 id="Modules_CSS">Modules CSS</h2> +## Modules CSS -<p>L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en <em>modules</em>. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module <em><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders">Backgrounds and Borders</a></em>, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).</p> +L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en _modules_. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module *[Backgrounds and Borders](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)*, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas). -<p>À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).</p> +À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification). -<p>Prenons un exemple précis et revenons au module <em>Backgrounds and Borders</em> — les propriétés <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code> et <code><a href="/fr/docs/Web/CSS/border-color">border-color</a></code> qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.</p> +Prenons un exemple précis et revenons au module *Backgrounds and Borders* — les propriétés [`background-color`](/fr/docs/Web/CSS/background-color) et [`border-color`](/fr/docs/Web/CSS/border-color) qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module. -<h3 id="Spécifications_CSS">Spécifications CSS</h3> +### Spécifications CSS -<p>Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.</p> +Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies. -<p>CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le <a href="https://www.w3.org/Style/CSS/"><em>CSS Working Group</em> (ou "groupe de travail CSS" en français)</a>. Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des <em>experts invités </em>affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.</p> +CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le [_CSS Working Group_ (ou "groupe de travail CSS" en français)](https://www.w3.org/Style/CSS/). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des _experts invités_ affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS. -<p>De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le <em>CSS Working Group</em> a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! </p> +De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le _CSS Working Group_ a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! -<p>Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).</p> +Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous). -<h2 id="Prise_en_charge_par_les_navigateurs">Prise en charge par les navigateurs</h2> +## Prise en charge par les navigateurs -<p>Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.</p> +Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran. -<p>Nous étudierons ce point plus en détail dans l'article sur <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">le fonctionnement de CSS</a>. Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.</p> +Nous étudierons ce point plus en détail dans l'article sur [le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works). Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web. -<p>Voici par exemple le tableau de compatibilité pour la propriété <code><a href="/fr/docs/Web/CSS/font-family">font-family</a></code>.</p> +Voici par exemple le tableau de compatibilité pour la propriété [`font-family`](/fr/docs/Web/CSS/font-family). -<p>{{Compat("css.properties.font-family")}}</p> +{{Compat("css.properties.font-family")}} -<h2 id="Où_continuer">Où continuer</h2> +## Où continuer -<p>Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>.</p> +Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). -<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> +{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -<h2 id="Dans_ce_cours">Dans ce cours</h2> +## Dans ce cours -<ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que CSS ?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">La façon dont CSS est structuré</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Le fonctionnement de CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos nouvelles connaissances</a></li> -</ol> +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [La façon dont CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [Le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md index 31db5f3ac9..4b83c4ebc0 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.md +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md @@ -4,38 +4,41 @@ slug: Learn/CSS/Howto/create_fancy_boxes translation_of: Learn/CSS/Howto/create_fancy_boxes original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes --- -<p>Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> +Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes. -<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition en CSS</a>.</p> +Avant d'attaquer la partie pratique, nous vous recommandons de lire [l'article qui explique le fonctionnement du modèle de boîte CSS](/fr/docs/Learn/CSS/Building_blocks/The_box_model). Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire [les bases de la disposition en CSS](/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction). -<p>D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (<code>border-*</code>) et d'arrière-plan (<code>background-*</code>) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.</p> +D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (`border-*`) et d'arrière-plan (`background-*`) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets. -<p>Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :</p> +Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci : -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?</p> +Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ? -<ul> - <li>Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc.</li> - <li>Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc.</li> - <li>Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}}</li> - <li>Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc.</li> -</ul> +- Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc. +- Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc. +- Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}} +- Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc. -<p>En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.</p> +En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y. -<h2 id="Jouer_avec_le_modèle_de_boîte">Jouer avec le modèle de boîte</h2> +## Jouer avec le modèle de boîte -<p>Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour <code>padding</code> et/ou <code>margin</code> ou quand on utilise un <code>border-radius</code> supérieur à la taille de la boîte.</p> +Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour `padding` et/ou `margin` ou quand on utilise un `border-radius` supérieur à la taille de la boîte. -<h3 id="Créer_des_cercles">Créer des cercles</h3> +### Créer des cercles -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?</p> +Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ? -<pre class="brush: css">.joli { +```css +.joli { /* Mieux vaut centrer le texte dans un cercle. */ text-align : center; @@ -61,28 +64,30 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes /* Enfin, transformons le carré en cercle */ border-radius: 100%; -}</pre> +} +``` -<p>Et voilà comment on obtient un cercle :</p> +Et voilà comment on obtient un cercle : -<p>{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}</p> +{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}} -<h2 id="Les_arrière-plans">Les arrière-plans</h2> +## Les arrière-plans -<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> +Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont [les propriétés `background-*`](/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders). Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre. -<p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p> +Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans : -<ul> - <li>On peut définir <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> - <li>Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.</li> -</ul> +- On peut définir [plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches. +- Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte. -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Passons à la manipulation :</p> +Passons à la manipulation : -<pre class="brush: css">.joli { +```css +.joli { padding : 1em; width: 100%; height: 200px; @@ -110,25 +115,27 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); -}</pre> +} +``` -<p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p> +{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}} -<div class="note"> -<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="https://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">notre article dédié</a>.</p> -</div> +> **Note :** Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter [les excellents motifs CSS de Lea Verou](https://lea.verou.me/css3patterns/). Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire [notre article dédié](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients). -<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> +## Les pseudo-éléments -<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> +Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser [les pseudo-éléments CSS](/fr/docs/Web/CSS/Pseudo-elements). -<h3 id="Un_nuage">Un nuage</h3> +### Un nuage -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p> +Voici un exemple qui illustre comment transformer la boîte en nuage : -<pre class="brush: css">.joli { +```css +.joli { text-align: center; /* On utilise la même astuce que pour @@ -203,20 +210,24 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes faut s'assurer que le coin en bas à droite soit bien un angle droit. */ border-bottom-left-radius: 0; -}</pre> +} +``` -<p>{{EmbedLiveSample('Un_nuage', '100%', '160') }}</p> +{{EmbedLiveSample('Un_nuage', '100%', '160') }} -<h3 id="Une_citation">Une citation</h3> +### Une citation -<p>Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :</p> +Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation : -<pre class="brush: html"><blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote> -<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote></pre> +```html +<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote> +<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote> +``` -<p>Voici la feuille de style que nous allons utiliser :</p> +Voici la feuille de style que nous allons utiliser : -<pre class="brush: css">blockquote { +```css +blockquote { min-height: 5em; padding : 1em 4em; font : 1em/150% sans-serif; @@ -261,19 +272,23 @@ blockquote i { margin-top: 1rem; text-style: italic; text-align: right; -}</pre> +} +``` -<p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p> +{{EmbedLiveSample('Une_citation', '100%', '300')}} -<h2 id="Assemblage">Assemblage</h2> +## Assemblage -<p>En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :</p> +En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique : -<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> +```html hidden +<div class="joli">Coucou ! Je veux être joli.</div> +``` -<p>Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.</p> +Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel. -<pre class="brush: css">.joli { +```css +.joli { position: relative; background-color: #FFC; padding: 2rem; @@ -294,10 +309,11 @@ blockquote i { box-shadow: 0px 13px 10px black; transform: rotate(4deg); -}</pre> +} +``` -<p>{{EmbedLiveSample("Assemblage", '100%', '100')}}</p> +{{EmbedLiveSample("Assemblage", '100%', '100')}} -<h2 id="La_suite">La suite</h2> +## La suite -<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition</a>.</p> +Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc [à approfondir la gestion des couleurs et des images](/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images). Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir [les bases de la disposition](/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction). diff --git a/files/fr/learn/css/howto/css_faq/index.md b/files/fr/learn/css/howto/css_faq/index.md index 75479dfb18..cd4ad34b7a 100644 --- a/files/fr/learn/css/howto/css_faq/index.md +++ b/files/fr/learn/css/howto/css_faq/index.md @@ -9,88 +9,90 @@ tags: translation_of: Learn/CSS/Howto/CSS_FAQ original_slug: Web/CSS/CSS_questions_frequentes --- -<h2 id="Pourquoi_mon_CSS_pourtant_valide_ne_fournit_pas_un_rendu_correct">Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?</h2> +## Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ? -<p>Pour afficher un document, les navigateurs utilisent le <code>DOCTYPE</code> - contraction de l'anglais <em>document type</em>, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un <code>DOCTYPE</code> correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.</p> +Pour afficher un document, les navigateurs utilisent le `DOCTYPE` - contraction de l'anglais _document type_, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un `DOCTYPE` correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur. -<p>Les navigateurs modernes ont deux modes de rendu :</p> +Les navigateurs modernes ont deux modes de rendu : -<ul> - <li><em>Mode Quirk:</em> aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un <code>DOCTYPE</code> incomplet, incorrect ou manquant, ou avec une déclaration <code>DOCTYPE</code> en utilisation avant 2001 seront affichées en mode Quirks.</li> - <li><em>Mode Standard: </em>le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un <code>DOCTYPE</code> moderne seront affichées en mode Standard.</li> -</ul> +- _Mode Quirk:_ aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un `DOCTYPE` incomplet, incorrect ou manquant, ou avec une déclaration `DOCTYPE` en utilisation avant 2001 seront affichées en mode Quirks. +- _Mode Standard:_ le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un `DOCTYPE` moderne seront affichées en mode Standard. -<p>Les navigateurs basés sur Gecko ont un troisième mode <a href="/fr/docs/Mode_presque_standard_de_Gecko">Presque Standard</a> qui comporte quelques <em>quirks</em> mineurs.</p> +Les navigateurs basés sur Gecko ont un troisième mode [Presque Standard](/fr/docs/Mode_presque_standard_de_Gecko) qui comporte quelques _quirks_ mineurs. -<p>Voici une liste des <code>DOCTYPE</code> les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :</p> +Voici une liste des `DOCTYPE` les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs : -<pre class="brush: html"><!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque +```html +<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque navigateur moderne utilise un parseur HTML5, c'est le doctype recommandé. */ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"https://www.w3.org/TR/html4/loose.dtd"> +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"https://www.w3.org/TR/html4/loose.dtd"> -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"https://www.w3.org/TR/html4/strict.dtd"> +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"https://www.w3.org/TR/html4/strict.dtd"> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></pre> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +``` -<h2 id="Pourquoi_mon_CSS_qui_est_valide_n'est_pas_affiché_du_tout">Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?</h2> +## Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ? -<p>Pour être appliqué, une feuille CSS doit être définie avec un type MIME <code>text/css</code>. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.</p> +Pour être appliqué, une feuille CSS doit être définie avec un type MIME `text/css`. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée. -<h2 id="Quelle_est_la_différence_entre_id_et_class">Quelle est la différence entre <code>id</code> et <code>class</code> ?</h2> +## Quelle est la différence entre `id` et `class` ? -<p>Les éléments HTML peuvent posséder un attribut de type <code>id</code> et / ou <code>class</code>. L'attribut <code>id</code> assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut <code>class</code> assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en <code>id</code> et / ou en <code>class</code>.</p> +Les éléments HTML peuvent posséder un attribut de type `id` et / ou `class`. L'attribut `id` assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut `class` assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en `id` et / ou en `class`. -<p>Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut <code>id</code>. Ces caractéristiques de style ne seront appliquées que sur cet <code>id</code> particulier.</p> +Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut `id`. Ces caractéristiques de style ne seront appliquées que sur cet `id` particulier. -<p>Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut <code>class</code>.</p> +Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut `class`. -<p>Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type <code>label</code> et <code>form</code> ou pour décorer des éléments qui doivent être sémantiquement uniques.</p> +Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type `label` et `form` ou pour décorer des éléments qui doivent être sémantiquement uniques. -<p>Voire <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs" title="Les sélecteurs CSS">Les sélecteurs CSS</a>.</p> +Voire [Les sélecteurs CSS](/fr/docs/CSS/Premiers_pas/Les_sélecteurs "Les sélecteurs CSS"). -<h2 id="Comment_revenir_à_la_valeur_par_défaut_d'un_propriété">Comment revenir à la valeur par défaut d'un propriété ?</h2> +## Comment revenir à la valeur par défaut d'un propriété ? -<p>Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.</p> +Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut. -<p>Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur <code><a href="/fr/docs/Web/CSS/initial">initial</a></code>. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.</p> +Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur [`initial`](/fr/docs/Web/CSS/initial). C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété. -<h2 id="Comment_créer_un_style_dérivant_d'un_autre">Comment créer un style dérivant d'un autre ?</h2> +## Comment créer un style dérivant d'un autre ? -<p>CSS ne permet de faire dériver un style d'un autre. Voire <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">l'article d'Eric Meyer à propos de la position du groupe de travail</a>. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.</p> +CSS ne permet de faire dériver un style d'un autre. Voire [l'article d'Eric Meyer à propos de la position du groupe de travail](http://archivist.incutio.com/viewlist/css-discuss/2685). Par contre, assigner plusieurs classes à un seul élément peut produire le même effet. -<h2 id="Comment_assigner_de_multiples_classes_à_un_élément">Comment assigner de multiples classes à un élément?</h2> +## Comment assigner de multiples classes à un élément? -<p>Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut <code>class</code> en séparant chaque classe d'un espace.</p> +Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut `class` en séparant chaque classe d'un espace. -<pre class="brush: html"><style type="text/css"> +```html +<style type="text/css"> .news { background: black; color: white; } .today { font-weight: bold; } -</style> +</style> -<div class="news today"> +<div class="news today"> ... content of today's news ... -</div> -</pre> +</div> +``` -<p>Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut <code>class</code> n'est pas pris en compte.</p> +Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut `class` n'est pas pris en compte. -<h2 id="Pourquoi_mes_règles_ne_fonctionnent-elles_pas_correctement">Pourquoi mes règles ne fonctionnent-elles pas correctement ?</h2> +## Pourquoi mes règles ne fonctionnent-elles pas correctement ? -<p>Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie <em>Règles de style CSS</em> de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.</p> +Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie _Règles de style CSS_ de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous. -<h3 id="Hiérarchie_des_éléments_HTML">Hiérarchie des éléments HTML</h3> +### Hiérarchie des éléments HTML -<p>La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.</p> +La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS. -<pre class="brush: css">.news { +```css +.news { color: black; } @@ -98,24 +100,26 @@ original_slug: Web/CSS/CSS_questions_frequentes font-weight: bold; color: red; } -</pre> +``` -<pre class="brush: html"><!-- Le texte de l'annonce est en noir +```html +<!-- Le texte de l'annonce est en noir mais le nom de l'entreprise est - en rouge gras --> -<div class="news"> (Reuters) - <span class="corpName">General Electric</span> + en rouge gras --> +<div class="news"> (Reuters) + <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> +</div> +``` -<p>Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.</p> +Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente. -<h3 id="L'ordre_et_la_redéfinition_des_règles">L'ordre et la redéfinition des règles</h3> +### L'ordre et la redéfinition des règles -<p>Pour les feuilles de style CSS, <strong>l'ordre est important</strong>. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.</p> +Pour les feuilles de style CSS, **l'ordre est important**. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée. -<pre class="brush: css">#stockTicker { +```css +#stockTicker { font-weight: bold; } .stockSymbol { @@ -127,23 +131,24 @@ original_slug: Web/CSS/CSS_questions_frequentes .stockSymbol { font-weight: normal; } -</pre> +``` -<p> </p> -<pre class="brush: html"><!-- La plupart du texte est en gras sauf "GE", - qui est en rouge et sans graisse --> -<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div> -</pre> +```html +<!-- La plupart du texte est en gras sauf "GE", + qui est en rouge et sans graisse --> +<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div> +``` -<p>Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.</p> +Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur. -<h3 id="Utiliser_les_propriétés_raccourcies">Utiliser les propriétés raccourcies</h3> +### Utiliser les propriétés raccourcies -<p>Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.</p> +Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite. -<pre class="brush: css">#stockTicker { +```css +#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; @@ -153,30 +158,34 @@ original_slug: Web/CSS/CSS_questions_frequentes font: 14px Arial; color: red; } -</pre> +``` -<pre class="brush: html"><div id="stockTicker"> +```html +<div id="stockTicker"> NYS: - <span class="stockSymbol"> + <span class="stockSymbol"> GE - </span> + </span> +1.0 ... -</div></pre> +</div> +``` -<p>Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car <strong>l'ordre des règles est important</strong>.</p> +Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car **l'ordre des règles est important**. -<pre class="brush: css">#stockTicker { +```css +#stockTicker { font-weight: bold; font: 12px Verdana; /* font-weight vaut maintenant normal */ } -</pre> +``` -<h3 id="Utiliser_le_sélecteur_*">Utiliser le sélecteur <code>*</code></h3> +### Utiliser le sélecteur `*` -<p>Le sélecteur <code>*</code> fait référence à n'importe quel élément et doit donc être utilisé avec soin.</p> +Le sélecteur `*` fait référence à n'importe quel élément et doit donc être utilisé avec soin. -<pre class="brush: css">body * { +```css +body * { font-weight: normal; } @@ -191,27 +200,30 @@ original_slug: Web/CSS/CSS_questions_frequentes .stockUp { color: red; } -</pre> +``` -<pre class="brush: html"><div id="section"> +```html +<div id="section"> NYS: - <span class="corpName"> - <span class="stockUp"> + <span class="corpName"> + <span class="stockUp"> GE - </span> - </span> + </span> + </span> +1.0 ... -</div></pre> +</div> +``` -<p>Dans cet exemple, le sélecteur <code>body *</code> cible tous les éléments à l'intérieur de <code>body</code>, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe <code>.stockUp</code>. Ainsi, la règle <code>font-weight: bold;</code> appliquée sur la classe <code>.corpName</code> est surchargée par la règle <code>font-weight: normal;</code> qui est appliquée à tous les éléments contenus dans <code>body</code>.</p> +Dans cet exemple, le sélecteur `body *` cible tous les éléments à l'intérieur de `body`, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe `.stockUp`. Ainsi, la règle `font-weight: bold;` appliquée sur la classe `.corpName` est surchargée par la règle `font-weight: normal;` qui est appliquée à tous les éléments contenus dans `body`. -<p>Le sélecteur <code>*</code> doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.</p> +Le sélecteur `*` doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur. -<h3 id="La_spécificité_en_CSS">La spécificité en CSS</h3> +### La spécificité en CSS -<p>Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a>. Les styles <em>inline</em> (ceux déclarés via l'attribut HTML <code>style</code>) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.</p> +Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la [spécificité](/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage). Les styles _inline_ (ceux déclarés via l'attribut HTML `style`) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom. -<pre class="brush: css">div { +```css +div { color: black; } @@ -222,26 +234,28 @@ original_slug: Web/CSS/CSS_questions_frequentes .green { color: green; } -</pre> +``` -<pre class="brush: html"><div id="orange" class="green" style="color: red;"> +```html +<div id="orange" class="green" style="color: red;"> Voici quelque chose qui sera rouge. -</div></pre> +</div> +``` -<p>Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire <a href="https://www.w3.org/TR/CSS21/cascade.html#specificity">le chapitre de la spécification CSS 2.1</a> ou <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">le chapitre correspondant de la section Apprendre</a>.</p> +Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire [le chapitre de la spécification CSS 2.1](https://www.w3.org/TR/CSS21/cascade.html#specificity) ou [le chapitre correspondant de la section Apprendre](/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage). -<h2 id="Quid_des_propriétés_-moz-*_-ms-*_-webkit-*_-o-*_et_-khtml-*">Quid des propriétés <code>-moz-*</code>, <code>-ms-*</code>, <code>-webkit-*</code>, <code>-o-*</code> et <code>-khtml-*</code> ?</h2> +## Quid des propriétés `-moz-*`, `-ms-*`, `-webkit-*`, `-o-*` et `-khtml-*` ? -<p>Ces propriétés, appelées <em>propriétés préfixées</em>, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.</p> +Ces propriétés, appelées _propriétés préfixées_, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté. -<p>Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.</p> +Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue. -<p>Pour plus d'informations <a href="/fr/docs/Web/CSS/Extensions_Mozilla">sur les extensions CSS de Mozilla, vous pouvez consulter la page associée</a>.</p> +Pour plus d'informations [sur les extensions CSS de Mozilla, vous pouvez consulter la page associée](/fr/docs/Web/CSS/Extensions_Mozilla). -<h2 id="Quel_est_l'impact_de_z-index_sur_le_positionnement_des_éléments">Quel est l'impact de <code>z-index</code> sur le positionnement des éléments ?</h2> +## Quel est l'impact de `z-index` sur le positionnement des éléments ? -<p>La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.</p> +La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément. -<p>Un élément pour lequel <code>z-index</code> est plus grand qu'un autre sera toujours empilé « devant ».</p> +Un élément pour lequel `z-index` est plus grand qu'un autre sera toujours empilé « devant ». -<p>La propriété <code>z-index</code> ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut <code>absolute</code>, <code>relative</code> ou <code>fixed</code>).</p> +La propriété `z-index` ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut `absolute`, `relative` ou `fixed`). diff --git a/files/fr/learn/css/howto/generated_content/index.md b/files/fr/learn/css/howto/generated_content/index.md index aa8656013b..3179e8b02c 100644 --- a/files/fr/learn/css/howto/generated_content/index.md +++ b/files/fr/learn/css/howto/generated_content/index.md @@ -7,61 +7,66 @@ tags: translation_of: Learn/CSS/Howto/Generated_content original_slug: Apprendre/CSS/Comment/Generated_content --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<p>Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.</p> +Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images. -<p>L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.</p> +L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document. -<div class="note"> -<p><strong>Note :</strong> Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.</p> -</div> +> **Note :** Le contenu spécifié dans la feuille de style ne fait pas partie du DOM. -<p>Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.</p> +Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document. -<p>Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.</p> +Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Contenu_textuel">Contenu textuel</h3> +### Contenu textuel -<p>CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.</p> +CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html">Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> -</pre> +```html +Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.ref::before { +```css +.ref::before { font-weight: bold; color: navy; content: "Réference "; -}</pre> +} +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}</p> +{{ EmbedLiveSample('Contenu_textuel', 600, 30) }} -<p>L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q23">4.4 Représentation de la feuille de style CSS</a> dans la spécification CSS.</p> +L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir [4.4 Représentation de la feuille de style CSS](https://www.w3.org/TR/CSS21/syndata.html#q23) dans la spécification CSS. -<p>Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q24">Référencer des caractères non représentés par l'encodage</a> et <a href="https://www.w3.org/TR/CSS21/syndata.html#q6">Caractères et casse</a> dans la spécification CSS.</p> +Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir [Référencer des caractères non représentés par l'encodage](https://www.w3.org/TR/CSS21/syndata.html#q24) et [Caractères et casse](https://www.w3.org/TR/CSS21/syndata.html#q6) dans la spécification CSS. -<h3 id="Contenu_avec_une_image">Contenu_avec_une_image</h3> +### Contenu_avec_une_image -<p>Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.</p> +Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}. -<p>Cette règle ajoute un espace et une icône après chaque lien qui possède la classe <code>glossary</code> :</p> +Cette règle ajoute un espace et une icône après chaque lien qui possède la classe `glossary` : -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a></pre> +```html +<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">a.glossary::after { +```css +a.glossary::after { content: " " url("glossary-icon.gif"); -}</pre> +} +``` -<p>{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}</p> +{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }} diff --git a/files/fr/learn/css/howto/index.md b/files/fr/learn/css/howto/index.md index d14cb33a16..f613014a6c 100644 --- a/files/fr/learn/css/howto/index.md +++ b/files/fr/learn/css/howto/index.md @@ -8,77 +8,64 @@ tags: translation_of: Learn/CSS/Howto original_slug: Apprendre/CSS/Comment --- -<p>Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> +Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS. -<h2 id="Scénarios_fréquents">Scénarios fréquents</h2> +## Scénarios fréquents -<h3 id="Basess">Bases</h3> +### Bases -<ul> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> -</ul> +- [Comment appliquer CSS au HTML](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML) +- [Comment utiliser les espaces en CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs) +- [Comment écrire des commentaires en CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires) +- [Comment sélectionner des éléments par leur nom, leur classe ou leur ID](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples) +- [Comment sélectionner des éléments par le nom et le contenu de l'attribut](/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut) +- [Comment utiliser les pseudo-classes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes) +- [Comment utiliser les pseudo-éléments](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments) +- [Comment appliquer plusieurs sélecteurs à la même règle](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs) +- [Comment spécifier les couleurs en CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs) +- [Comment déboguer CSS dans le navigateur](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS) -<h3 id="CSS_et_texte">CSS et texte</h3> +### CSS et texte -<ul> - <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> -</ul> +- [Comment donner un style au texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Comment personnaliser une liste d'éléments](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Comment donner un style aux liens](/fr/docs/Learn/CSS/Styling_text/Styling_links) +- [Comment ajouter des ombres au texte](/fr/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte) +### Boîtes et mises en page -<h3 id="Boîtes_et_mises_en_page">Boîtes et mises en page</h3> +- [Comment tailler les boîtes CSS](/fr/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties) +- [Comment contrôler le contenu débordant](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements) +- [Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan) +- [Comment définir _"inline_", _"block"_ et _"inline-block"_ ?](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) +- [Comment créer des boîtes fantaisies ](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités). +- [Comment utiliser `background-clip` pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans) +- [Comment changer complètement le modèle de boîte en utilisant `box-sizing`](/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) +- [Comment contrôler l'arrière-plan](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) +- [Comment contrôler les bordures](/fr/docs/Learn/CSS/Styling_boxes/Borders) +- [Comment donner un style à une table HTML](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables) +- [Comment ajouter des ombres aux boîtes](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows) -<ul> - <li><a href="/fr/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> - <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> - <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> -</ul> +## Techniques avancées ou peu communes -<h2 id="Techniques_avancées_ou_peu_communes">Techniques avancées ou peu communes</h2> +Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face : -<p>Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :</p> +### Général -<h3 id="Général">Général</h3> +- [Comment calculer la spécificité d'un sélecteur de CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity) +- [Comment contrôler l'héritage en CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage) -<ul> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> - <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> -</ul> +### Effets avancés -<h3 id="Effets_avancés">Effets avancés</h3> +- [Comment utiliser des filtres en CSS](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters) +- [Comment utiliser les modes fusion](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes) -<ul> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> -</ul> +### Mise en page -<h3 id="Mise_en_page">Mise en page</h3> +- [Utiliser les boîtes flexibles CSS (_flexbox_)](/fr/docs/Web/Guide/CSS/Flexible_boxes) +- [Utiliser une structure CSS avec plusieurs colonnes](/fr/docs/Web/CSS/Colonnes_CSS3 "/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts") +- [Utiliser les contenus générés par CSS](/fr/docs/CSS/Premiers_pas/Contenu) -<ul> - <li><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes">Utiliser les boîtes flexibles CSS (<em>flexbox</em>)</a></li> - <li><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Utiliser une structure CSS avec plusieurs colonnes</a></li> - <li><a href="/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> -</ul> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<p><a href="/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> +[CSS FAQ](/fr/docs/Web/CSS/CSS_questions_frequentes) — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs. diff --git a/files/fr/learn/css/index.md b/files/fr/learn/css/index.md index 0d3547603f..33af4277c2 100644 --- a/files/fr/learn/css/index.md +++ b/files/fr/learn/css/index.md @@ -15,64 +15,54 @@ tags: translation_of: Learn/CSS original_slug: Apprendre/CSS --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<blockquote> -<p>Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.</p> -</blockquote> +> Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives. -<h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2> +## Parcours d'apprentissage -<p>Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML —</a> vous pourrez ensuite en apprendre davantage au sujet :</p> +Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module [Introduction au HTML —](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML) vous pourrez ensuite en apprendre davantage au sujet : -<ul> - <li>des CSS, en commençant avec le module <a href="/fr/docs/Learn/CSS/First_steps">Introduction aux CSS</a></li> - <li>des <a href="/fr/Learn/HTML#Modules">Modules HTML</a> plus avancés</li> - <li>du <a href="/fr/docs/Learn/JavaScript">JavaScript</a> et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web.</li> -</ul> +- des CSS, en commençant avec le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps) +- des [Modules HTML](/fr/Learn/HTML#Modules) plus avancés +- du [JavaScript](/fr/docs/Learn/JavaScript) et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web. -<p>Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.</p> +Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML. -<p>Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a> et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.</p> +Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans [Installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants. -<p>Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.</p> +Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails. -<h2 id="Modules">Modules</h2> +## Modules -<p>Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.</p> +Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier. -<dl> - <dt><a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a></dt> - <dd>Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.</dd> - <dt><a href="/fr/Apprendre/CSS/styliser_boites">Styliser les boîtes</a></dt> - <dd>Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.</dd> -</dl> +- [Introduction aux CSS](/fr/Apprendre/CSS/Introduction_à_CSS) + - : Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS. +- [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites) + - : Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes. -<dl> - <dt><a href="/fr/docs/Learn/CSS/Styling_text">Composer du texte</a></dt> - <dd>Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.</dd> - <dt></dt> - <dt><a href="/fr/Apprendre/CSS/CSS_layout">Mise en page avec les CSS</a></dt> - <dd> - <p>À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.</p> - </dd> -</dl> +<!----> -<h2 id="Résolution_de_problèmes_courants_avec_les_CSS">Résolution de problèmes courants avec les CSS</h2> +- [Composer du texte](/fr/docs/Learn/CSS/Styling_text) + - : Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens. +- [Mise en page avec les CSS](/fr/Apprendre/CSS/CSS_layout) -<p><a href="/fr/docs/Learn/CSS/Howto">Apprendre à utiliser CSS pour résoudre des problèmes</a> fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.</p> + - : À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox. -<p>Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !</p> +## Résolution de problèmes courants avec les CSS -<h2 id="Le_CSS_est_étrange">"Le CSS est étrange"</h2> +[Apprendre à utiliser CSS pour résoudre des problèmes](/fr/docs/Learn/CSS/Howto) fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web. -<p>Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :</p> +Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire ! -<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p> +## "Le CSS est étrange" -<h2 id="Voir_aussi">Voir aussi</h2> +Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait : -<dl> - <dt><a href="/fr/docs/Web/CSS">Les CSS sur MDN</a></dt> - <dd>Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.</dd> -</dl> +{{EmbedYouTube("aHUtMbJw8iA")}} + +## Voir aussi + +- [Les CSS sur MDN](/fr/docs/Web/CSS) + - : Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit. diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md index 1aa02da170..c56023c1f9 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.md +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -12,284 +12,233 @@ tags: translation_of: Learn/CSS/Styling_text/Fundamentals original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} -<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> - -<p>Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.</p> +Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances informatiques de base, les bases HTML (étudiées dans l'<a + href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), les bases CSS (étudiées dans + <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre les techniques et propriétés fondamentales nécessaires pour + composer du texte sur les pages web. + </td> + </tr> + </tbody> </table> -<h2 id="En_quoi_consiste_la_mise_en_forme_du_texte_avec_CSS">En quoi consiste la mise en forme du texte avec CSS ?</h2> +## En quoi consiste la mise en forme du texte avec CSS ? -<p>Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.</p> +Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}. -<div class="note"> -<p><strong>Note :</strong> si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Modèle de boîte</a> avant de poursuivre.</p> -</div> +> **Note :** si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre. -<p>Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :</p> +Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article : -<ul> - <li><strong>Styles de la police de caractères </strong>: ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.</li> - <li><strong>Styles de composition du texte </strong>: ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu.</li> -</ul> +- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc. +- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu. -<div class="note"> -<p><strong>Note :</strong> Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme <a href="/fr/docs/Web/CSS/::first-letter">::first-letter</a> (sélectionne la première lettre du texte d'un élément), <a href="/fr/docs/Web/CSS/::first-line">::first-line</a> (sélectionne la première ligne du texte d'un élément) ou <a href="/fr/docs/Web/CSS/::selection">::selection</a> (sélectionne le texte actuellement mis en surbrillance par le curseur) .</p> -</div> +> **Note :** Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) . -<h2 id="Fontes">Fontes</h2> +## Fontes -<p>Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :</p> +Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci : -<pre class="brush: html"><h1>Tommy le Chat</h1> +```html +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<div class="note"> -<p><strong>Note :</strong> (NdT : Extrait et traduction <em>approximative</em> de la chanson <em>Tommy the Cat</em> du groupe <a href="https://fr.wikipedia.org/wiki/Primus_(groupe)">Primus)</a></p> -</div> +> **Note :** (NdT : Extrait et traduction _approximative_ de la chanson _Tommy the Cat_ du groupe [Primus)](<https://fr.wikipedia.org/wiki/Primus_(groupe)>) -<p>Vous pouvez trouver l'<a href="https://mdn.github.io/learning-area/css/styling-text/fundamentals/">exemple (en) fini</a> sur Github (voir aussi <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">le code source</a>).</p> +Vous pouvez trouver l'[exemple (en) fini](https://mdn.github.io/learning-area/css/styling-text/fundamentals/) sur Github (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html)). -<h3 id="Couleur">Couleur</h3> +### Couleur -<p>La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.</p> +La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}. -<p><code>color</code> accepte toutes les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">unités de couleur des CSS</a>, par exemple :</p> +`color` accepte toutes les [unités de couleur des CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs), par exemple : -<pre class="brush: css">p { +```css +p { color: red; -}</pre> +} +``` -<p>Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :</p> +Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<p>{{ EmbedLiveSample('Couleur', '100%', 220) }}</p> +{{ EmbedLiveSample('Couleur', '100%', 220) }} -<h3 id="Familles_de_fontes">Familles de fontes</h3> +### Familles de fontes -<p>Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :</p> +Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela : -<pre class="brush: css">p { +```css +p { font-family: arial; -}</pre> +} +``` -<p>Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.</p> +Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page. -<h4 id="Polices_web_sûres">Polices web sûres</h4> +#### Polices web sûres -<p>En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.</p> +En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres. -<p>La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).</p> +La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS). -<p>La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices <a href="https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web">Microsoft Core</a> pour le web à la fin des années 90 et début des années 2000) :</p> +La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices [Microsoft Core](https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web) pour le web à la fin des années 90 et début des années 2000) : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nom</th> - <th scope="col">Type générique</th> - <th scope="col">Notes</th> - </tr> - </thead> - <tbody> - <tr> - <td>Arial</td> - <td>sans-serif</td> - <td>Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.</td> - </tr> - <tr> - <td>Courier New</td> - <td>monospace</td> - <td>Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police <em>Courier New</em> appelée <em>Courier</em>. Il est recommandé d'utiliser les deux avec <em>Courier New</em> comme alternative préférée.</td> - </tr> - <tr> - <td>Georgia</td> - <td>serif</td> - <td> </td> - </tr> - <tr> - <td>Times New Roman</td> - <td>serif</td> - <td>Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police <em>Times New Roman</em> appelée <em>Times</em>. Il est recommandé d'utiliser les deux avec <em>Times New Roman</em> comme alternative préférée.</td> - </tr> - <tr> - <td>Trebuchet MS</td> - <td>sans-serif</td> - <td>Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.</td> - </tr> - <tr> - <td>Verdana</td> - <td>sans-serif</td> - <td> </td> - </tr> - </tbody> -</table> +| Nom | Type générique | Notes | +| --------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Arial | sans-serif | Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante. | +| Courier New | monospace | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Courier New_ appelée _Courier_. Il est recommandé d'utiliser les deux avec _Courier New_ comme alternative préférée. | +| Georgia | serif | | +| Times New Roman | serif | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Times New Roman_ appelée _Times_. Il est recommandé d'utiliser les deux avec _Times New Roman_ comme alternative préférée. | +| Trebuchet MS | sans-serif | Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles. | +| Verdana | sans-serif | | -<div class="note"> -<p><strong>Note :</strong> Le site <a href="https://www.cssfontstack.com/">cssfontstack.com</a> met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.</p> -</div> +> **Note :** Le site [cssfontstack.com](https://www.cssfontstack.com/) met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage. -<div class="note"> -<p><strong>Note :</strong> Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : <strong>les polices web</strong>. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.</p> -</div> +> **Note :** Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : **les polices web**. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module. -<h4 id="Polices_par_défaut">Polices par défaut</h4> +#### Polices par défaut -<p>CSS définit cinq noms génériques pour les polices : <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> et <code>fantasy</code>. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.<code>serif</code>, <code>sans-serif</code> et <code>monospace</code> sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, <code>cursive</code> et <code>fantasy</code> sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.</p> +CSS définit cinq noms génériques pour les polices : `serif`, `sans-serif`, `monospace`, `cursive` et `fantasy`. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.`serif`, `sans-serif` et `monospace` sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, `cursive` et `fantasy` sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure. -<p>Les 5 noms sont définis comme suit :</p> +Les 5 noms sont définis comme suit : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Terme</th> - <th scope="col">Définition</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>serif</code></td> - <td>Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)</td> - <td>Mon grand éléphant rouge</td> - </tr> - <tr> - <td><code>sans-serif</code></td> - <td>Les polices qui n'ont pas d'empattements</td> - <td>Mon grand éléphant rouge</td> - </tr> - <tr> - <td><code>monospace</code></td> - <td>Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.</td> - <td>Mon grand éléphant rouge</td> - </tr> - <tr> - <td><code>cursive</code></td> - <td>Les polices destinées à émuler l'écriture, avec des traits fluides et connectés.</td> - <td>Mon grand éléphant rouge</td> - </tr> - <tr> - <td><code>fantasy</code></td> - <td>Les polices destinées à être décoratives.</td> - <td>Mon grand éléphant rouge</td> - </tr> - </tbody> -</table> +| Terme | Définition | Exemple | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | +| `serif` | Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices) | Mon grand éléphant rouge | +| `sans-serif` | Les polices qui n'ont pas d'empattements | Mon grand éléphant rouge | +| `monospace` | Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes. | Mon grand éléphant rouge | +| `cursive` | Les polices destinées à émuler l'écriture, avec des traits fluides et connectés. | Mon grand éléphant rouge | +| `fantasy` | Les polices destinées à être décoratives. | Mon grand éléphant rouge | -<h4 id="Pile_de_polices">Pile de polices</h4> +#### Pile de polices -<p>Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de <code>font-family</code> plusieurs noms de polices séparés par des virgules, par exemple :</p> +Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de `font-family` plusieurs noms de polices séparés par des virgules, par exemple : -<pre class="brush: css">p { +```css +p { font-family: "Trebuchet MS", Verdana, sans-serif; -}</pre> +} +``` -<p>Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.</p> +Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite. -<p>Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !</p> +Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif ! -<div class="note"> -<p><strong>Note :</strong> Les noms de police comportant plus d'un mot — comme <code>Trebuchet MS</code> — doivent être entourés de guillemets, par exemple <code>"Trebuchet MS"</code>.</p> -</div> +> **Note :** Les noms de police comportant plus d'un mot — comme `Trebuchet MS` — doivent être entourés de guillemets, par exemple `"Trebuchet MS"`. -<h4 id="Un_exemple_de_font-family">Un exemple de font-family</h4> +#### Un exemple de font-family -<p>Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :</p> +Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif : -<pre class="brush: css">p { +```css +p { color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>Cela donne le résultat suivant :</p> +Cela donne le résultat suivant : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<p>{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}</p> +{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }} -<h3 id="Taille_de_la_police_de_caractères">Taille de la police de caractères</h3> +### Taille de la police de caractères -<p>Dans l'article <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units">Valeurs et unités CSS</a> de notre prédédent module, nous avons vu les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille">unités de longueur et taille</a>. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages">pourcentages</a>). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :</p> +Dans l'article [Valeurs et unités CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units) de notre prédédent module, nous avons vu les [unités de longueur et taille](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille). La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les [pourcentages](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages)). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont : -<ul> - <li><code>px</code> (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation.</li> - <li><code>em</code> : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser <code>em</code> pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des <code>em</code>, la maintenance en sera facilitée.</li> - <li><code>rem</code> : il fonctionne comme <code>em</code>, excepté que un <code>rem</code> est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les <code>rem</code> ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux <code>em</code> ou aux <code>px</code>, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> -</ul> +- `px` (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation. +- `em` : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser `em` pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des `em`, la maintenance en sera facilitée. +- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill). -<p>La propriété <code>font-size</code> d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété <code>font‑size</code> est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 <code>em</code> définie par défaut, donc aura une taille finale de 32 px.</p> +La propriété `font-size` d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété `font‑size` est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 `em` définie par défaut, donc aura une taille finale de 32 px. -<p>Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 <code>em</code> (24 px), puis, vous voulez que les paragraphes de l'<code><article></code> aient une taille de police calculée de 20 px, quelle valeur de <code>em</code> utiliseriez-vous ?</p> +Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 `em` (24 px), puis, vous voulez que les paragraphes de l'`<article>` aient une taille de police calculée de 20 px, quelle valeur de `em` utiliseriez-vous ? -<pre class="brush: html"><!-- font-size vaut 16px pour la base du document --> -<article> <!-- Si font-size vaut 1.5em --> - <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? --> -</article></pre> +```html +<!-- font-size vaut 16px pour la base du document --> +<article> <!-- Si font-size vaut 1.5em --> + <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? --> +</article> +``` -<p>Vous devrez définir sa valeur <code>em</code> à 20/24 ou 0,83333333 <code>em</code>. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser <code>rem</code> quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.</p> +Vous devrez définir sa valeur `em` à 20/24 ou 0,83333333 `em`. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser `rem` quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible. -<h4 id="Un_simple_exemple_de_dimensionnement">Un simple exemple de dimensionnement</h4> +#### Un simple exemple de dimensionnement -<p>Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la <code>font‑size</code> de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de <code>font‑size</code> dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.</p> +Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la `font‑size` de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de `font‑size` dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver. -<p>Notre nouveau résultat ressemble à :</p> +Notre nouveau résultat ressemble à : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<pre class="brush: css">html { +```css +html { font-size: 10px; } @@ -301,66 +250,64 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> - -<p>{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}</p> - -<h3 id="Style_de_fonte_graisse_transformation_et_décoration_de_texte">Style de fonte, graisse, transformation et décoration de texte</h3> - -<p>CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :</p> - -<ul> - <li>{{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : - <ul> - <li><code>normal</code> : fige le texte en police normale (suppression du style italique existant).</li> - <li><code>italic </code>: met le texte en <em>version italique de la police</em> si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.</li> - <li><code>oblique</code> : force le texte à utiliser une version simulée de fonte italique, créée en <em>inclinant la version normale</em>.</li> - </ul> - </li> - <li>{{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), mais en réalité, vous les utiliserez rarement en dehors de <code>normal</code> et <code>bold</code> (gras): - <ul> - <li><code>normal</code>, <code>bold</code> : graisse de la police, normale ou <strong>bold</strong>.</li> - <li><code>lighter</code>, <code>bolder</code> : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.</li> - <li><code>100–900</code> : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.</li> - </ul> - </li> - <li>{{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : - <ul> - <li><code>none</code> : aucune transformation.</li> - <li><code>uppercase</code> : met tout le texte en majuscules.</li> - <li><code>lowercase</code> : met tout le texte en minuscules.</li> - <li><code>capitalize</code> : transforme tous les mots en mettant leur première lettre en majuscules.</li> - <li><code>full-width</code> : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)</li> - </ul> - </li> - <li>{{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont : - <ul> - <li><code>none</code>: désactive les décorations du texte déjà présentes.</li> - <li><code>underline</code>: souligne le texte.</li> - <li><code>overline</code>: trace une ligne au-dessus du texte.</li> - <li><code>line-through</code>: barre le texte.</li> - </ul> - Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple <code>text-decoration: underline overline</code>. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple <code>text-decoration: line-through red wavy</code>.</li> -</ul> - -<p>Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.</p> - -<p>Notre nouveau résultat ressemble à :</p> - -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> - -<p>Je m'en souviens comme mon dernier repas...</p> - -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +} +``` + +{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }} + +### Style de fonte, graisse, transformation et décoration de texte + +CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte : + +- {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : + + - `normal` : fige le texte en police normale (suppression du style italique existant). + - `italic `: met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. + - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_. + +- {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), mais en réalité, vous les utiliserez rarement en dehors de `normal` et `bold` (gras): + + - `normal`, `bold` : graisse de la police, normale ou **bold**. + - `lighter`, `bolder` : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent. + - `100–900` : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire. + +- {{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : + + - `none` : aucune transformation. + - `uppercase` : met tout le texte en majuscules. + - `lowercase` : met tout le texte en minuscules. + - `capitalize` : transforme tous les mots en mettant leur première lettre en majuscules. + - `full-width` : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.) + +- {{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont : + + - `none`: désactive les décorations du texte déjà présentes. + - `underline`: souligne le texte. + - `overline`: trace une ligne au-dessus du texte. + - `line-through`: barre le texte. + + Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple `text-decoration: underline overline`. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple `text-decoration: line-through red wavy`. + +Regardons l'ajout de quelques-unes de ces propriétés à notre exemple. + +Notre nouveau résultat ressemble à : + +```html hidden +<h1>Tommy le Chat</h1> + +<p>Je m'en souviens comme mon dernier repas...</p> + +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> -</div> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -377,53 +324,57 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}</p> +{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }} -<h3 id="Ombres_du_texte">Ombres du texte</h3> +### Ombres du texte -<p>Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :</p> +Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous : -<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> +```css +text-shadow: 4px 4px 5px red; +``` -<p>Les 4 propriétés sont les suivantes :</p> +Les 4 propriétés sont les suivantes : -<ol> - <li>Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.</li> - <li>Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.</li> - <li>Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS.</li> - <li>La couleur de l'ombre, qui peut prendre toute <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">unité de couleur CSS</a>. Si elle n'est pas définie, c'est la couleur noire par défaut.</li> -</ol> +1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size) des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée. +2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée. +3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size) des CSS. +4. La couleur de l'ombre, qui peut prendre toute [unité de couleur CSS](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). Si elle n'est pas définie, c'est la couleur noire par défaut. -<div class="note"> -<p><strong>Note :</strong> Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple <code>-1px -1px</code>.</p> -</div> +> **Note :** Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple `-1px -1px`. -<h4 id="Ombres_multiples">Ombres multiples</h4> +#### Ombres multiples -<p>Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :</p> +Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple : -<pre class="brush: css">text-shadow: -1px -1px 1px #aaa, +```css +text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0,0,0,0.5), 4px 4px 5px rgba(0,0,0,0.7), - 0px 0px 7px rgba(0,0,0,0.4);</pre> + 0px 0px 7px rgba(0,0,0,0.4); +``` -<p>Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :</p> +Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -445,44 +396,43 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; } -</pre> +``` -<p>{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}</p> +{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }} -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir plus d'exemples intéressants de <code>text-shadow</code> dans l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> (Clair de lune avec text-shadow).</p> -</div> +> **Note :** Vous pouvez voir plus d'exemples intéressants de `text-shadow` dans l'article de Sitepoint [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/) (Clair de lune avec text-shadow). -<h2 id="Mise_en_page_du_texte">Mise en page du texte</h2> +## Mise en page du texte -<p>Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.</p> +Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes. -<h3 id="Alignement_du_texte">Alignement du texte</h3> +### Alignement du texte -<p>La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :</p> +La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte : -<ul> - <li><code>left</code>: le texte est aligné à gauche.</li> - <li><code>right</code>: le texte est aligné à droite.</li> - <li><code>center</code>: le texte est centré.</li> - <li><code>justify</code>: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.</li> -</ul> +- `left`: le texte est aligné à gauche. +- `right`: le texte est aligné à droite. +- `center`: le texte est centré. +- `justify`: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes. -<p>Si nous appliquons <code>text-align: center;</code> à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :</p> +Si nous appliquons `text-align: center;` à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<pre class="brush: css">html { +```css +html { font-size: 10px; } @@ -504,31 +454,37 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}</p> +{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }} -<h3 id="Hauteur_de_ligne">Hauteur de ligne</h3> +### Hauteur de ligne -<p>La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a>, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de <code>line-height</code>. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :</p> +La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des [unités de longueur et de taille](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Length_and_size), mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de `line-height`. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci : -<pre class="brush: css">line-height: 1.5;</pre> +```css +line-height: 1.5; +``` -<p>En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons :</p> +En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -550,36 +506,42 @@ p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}</p> +{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }} -<h3 id="Espacement_entre_les_lettres_et_les_mots">Espacement entre les lettres et les mots</h3> +### Espacement entre les lettres et les mots -<p>Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a>.</p> +Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size). -<p>Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :</p> +Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple : -<pre class="brush: css">p::first-line { +```css +p::first-line { letter-spacing: 2px; word-spacing: 4px; -}</pre> +} +``` -<p>Nous obtiendrons :</p> +Nous obtiendrons : -<pre class="brush: html hidden"><h1>Tommy le Chat</h1> +```html hidden +<h1>Tommy le Chat</h1> -<p>Je m'en souviens comme mon dernier repas...</p> +<p>Je m'en souviens comme mon dernier repas...</p> -<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager +<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager ce corps étranger qui s'était niché au fond de sa redoutable gueule. Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares -occasions, comme maintenant.</p></pre> +occasions, comme maintenant.</p> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-size: 10px; } @@ -607,85 +569,86 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}</p> +{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }} -<h3 id="D'autres_propriétés_intéressantes">D'autres propriétés intéressantes</h3> +### D'autres propriétés intéressantes -<p>Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :</p> +Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit : -<p>Styles de police de caractères :</p> +Styles de police de caractères : -<ul> - <li>{{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement.</li> - <li>{{cssxref("font-kerning")}} : active et désactive les options de crénage des polices.</li> - <li>{{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li> - <li>{{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée.</li> - <li>{{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales.</li> - <li>{{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois.</li> - <li>{{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte.</li> - <li>{{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.</li> - <li>{{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice.</li> - <li>{{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle.</li> - <li>{{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée.</li> - <li>{{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur <code>underline</code> pour la propriété <code>text-decoration-line</code>.</li> - <li>{{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte.</li> -</ul> +- {{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement. +- {{cssxref("font-kerning")}} : active et désactive les options de crénage des polices. +- {{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères [OpenType](https://en.wikipedia.org/wiki/OpenType). +- {{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée. +- {{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales. +- {{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois. +- {{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte. +- {{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux. +- {{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice. +- {{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle. +- {{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée. +- {{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur `underline` pour la propriété `text-decoration-line`. +- {{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte. -<p>styles de mise en page du texte</p> +styles de mise en page du texte -<ul> - <li>{{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu.</li> - <li>{{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché).</li> - <li>{{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés.</li> - <li>{{cssxref("word-break")}} : spécifie s'il y a césure dans les mots.</li> - <li>{{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.)</li> - <li>{{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge.</li> - <li>{{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques.</li> - <li>{{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée.</li> - <li>{{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne.</li> - <li>{{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement.</li> - <li>{{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes.</li> -</ul> +- {{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu. +- {{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché). +- {{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés. +- {{cssxref("word-break")}} : spécifie s'il y a césure dans les mots. +- {{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.) +- {{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge. +- {{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques. +- {{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée. +- {{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne. +- {{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement. +- {{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes. -<h2 id="Abréviations_pour_propriétés_de_fontes">Abréviations pour propriétés de fontes</h2> +## Abréviations pour propriétés de fontes -<p>De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.</p> +De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}. -<p>Parmi toutes ces propriétés, seules <code>font-size</code> et <code>font-family</code> sont requises lorsque la propriété abrégée <code>font</code> est utilisée.</p> +Parmi toutes ces propriétés, seules `font-size` et `font-family` sont requises lorsque la propriété abrégée `font` est utilisée. -<p>Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.</p> +Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}. -<p>Un exemple complet ressemblerait à ceci :</p> +Un exemple complet ressemblerait à ceci : -<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> +```css +font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif; +``` -<h2 id="Apprentissage_actif_jouer_avec_les_styles_du_texte">Apprentissage actif : jouer avec les styles du texte</h2> +## Apprentissage actif : jouer avec les styles du texte -<p>Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.</p> +Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous. -<p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> avec le bouton de même nom.</p> +Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ avec le bouton de même nom. -<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>Zone de saisie du HTML</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> - <p>Un peu de texte pour vous délecter !</p></textarea> +```html hidden +<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>Zone de saisie du HTML</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Un peu de texte pour vous délecter !</p></textarea> - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { - }</textarea> + }</textarea> - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - </div> -</div> -</pre> + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + </div> +</div> +``` -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -710,22 +673,20 @@ reset.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.</p> +Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML. -<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> +{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> -</ul> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/index.md b/files/fr/learn/css/styling_text/index.md index 18838ad893..8fa8a82086 100644 --- a/files/fr/learn/css/styling_text/index.md +++ b/files/fr/learn/css/styling_text/index.md @@ -13,36 +13,30 @@ tags: - Texte translation_of: Learn/CSS/Styling_text --- -<p>Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.</p> +Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>, et être à l'aise avec les fondamentaux de CSS étudiés dans <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>.</p> +Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans [Introduction à HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML), et être à l'aise avec les fondamentaux de CSS étudiés dans [Introduction à CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS). -<div class="note"> -<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> +> **Note :** Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :</p> +Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML : -<dl> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></dt> - <dd>Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.</dd> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de liste</a></dt> - <dd>Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout.</dd> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/Styling_links">Style de lien</a></dt> - <dd>Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article.</dd> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></dt> - <dd>Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.</dd> -</dl> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) + - : Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres. +- [Style de liste](/fr/docs/Learn/CSS/Styling_text/Styling_lists) + - : Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout. +- [Style de lien](/fr/docs/Learn/CSS/Styling_text/Styling_links) + - : Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article. +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) + - : Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés. -<h2 id="Auto-évaluation">Auto-évaluation</h2> +## Auto-évaluation -<p>Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.</p> +Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus. -<dl> - <dt><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></dt> - <dd>Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale.</dd> -</dl> +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) + - : Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale. diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md index 7e88a2f941..ef8b665cb7 100644 --- a/files/fr/learn/css/styling_text/styling_links/index.md +++ b/files/fr/learn/css/styling_text/styling_links/index.md @@ -17,96 +17,120 @@ tags: translation_of: Learn/CSS/Styling_text/Styling_links original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> - -<p>Lors de la mise en forme de <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">liens</a>, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.</p> +Lors de la mise en forme de [liens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>notions de base en informatique, notions de base en HTML (étudier l'<a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML)</a>, notions de base en CSS (étudier l'<a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>), <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">initiation à la mise en forme de texte</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + notions de base en informatique, notions de base en HTML (étudier l'<a + href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML)</a + >, notions de base en CSS (étudier l'<a + href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS" + >Introduction à CSS</a + >), + <a + href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte" + >initiation à la mise en forme de texte</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + apprendre à mettre en forme les états des liens, et comment utiliser + efficacement les liens dans les fonctionnalités courantes de l'IU, comme + les menus de navigation. + </td> + </tr> + </tbody> </table> -<h2 id="Un_coup_dœil_à_quelques_liens">Un coup d'œil à quelques liens</h2> +## Un coup d'œil à quelques liens -<p>Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.</p> +Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks). Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens. -<h3 id="État_des_liens">État des liens</h3> +### État des liens -<p>La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">pseudo-classes</a> :</p> +La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes [pseudo-classes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) : -<ul> - <li><strong>link (non visité)</strong> : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ;</li> - <li><strong>visited :</strong> un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ;</li> - <li><strong>hover :</strong> un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ;</li> - <li><strong>focus :</strong> un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche <kbd>Tab</kbd> ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ;</li> - <li><strong>active :</strong> un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}.</li> -</ul> +- **link (non visité)** : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ; +- **visited :** un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ; +- **hover :** un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ; +- **focus :** un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche + + <kbd>Tab</kbd> + + ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ; + +- **active :** un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}. -<h3 id="Styles_par_défaut">Styles par défaut</h3> +### Styles par défaut -<p>L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).</p> +L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible). -<pre class="brush: html"><p><a href="#">Un simple lien</a></p> -</pre> +```html +<p><a href="#">Un simple lien</a></p> +``` -<pre class="brush: css">p { +```css +p { font-size: 2rem; text-align: center; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}</p> +{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }} -<div class="note"> -<p><strong>Note :</strong> tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.</p> -</div> +> **Note :** tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle. -<p>Vous remarquerez quelques petites choses en explorant les styles par défaut :</p> +Vous remarquerez quelques petites choses en explorant les styles par défaut : -<ul> - <li>les liens sont soulignés ;</li> - <li>les liens non visités sont bleus ;</li> - <li>les liens visités sont en violet ;</li> - <li>le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ;</li> - <li>les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche <kbd>Tab</kbd> (sur Mac, il se peut que vous ayez besoin d'activer l'option <em>Accès clavier complet : Toutes les commandes</em> en appuyant sur <kbd>Ctrl</kbd> + <kbd>F7</kbd> pour que cela fonctionne) ;</li> - <li>les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus).</li> -</ul> +- les liens sont soulignés ; +- les liens non visités sont bleus ; +- les liens visités sont en violet ; +- le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ; +- les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche -<p>De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :</p> + <kbd>Tab</kbd> -<ul> - <li>utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ;</li> - <li>les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés.</li> -</ul> + (sur Mac, il se peut que vous ayez besoin d'activer l'option _Accès clavier complet : Toutes les commandes_ en appuyant sur -<p>Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :</p> + <kbd>Ctrl</kbd> -<ul> - <li>{{cssxref ("color")}} pour la couleur du texte ;</li> - <li>{{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ;</li> - <li>{{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation.</li> -</ul> + \+ -<div class="note"> -<p><strong>Note :</strong> vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !</p> -</div> + <kbd>F7</kbd> + + pour que cela fonctionne) ; + +- les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus). + +De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins : + +- utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ; +- les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés. + +Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes : -<h3 id="Mise_en_forme_de_quelques_liens">Mise en forme de quelques liens</h3> +- {{cssxref ("color")}} pour la couleur du texte ; +- {{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ; +- {{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation. -<p>Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.</p> +> **Note :** vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou ! -<p>Pour commencer, nous écrirons notre jeu de règles vides :</p> +### Mise en forme de quelques liens -<pre class="brush: css">a { +Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens. + +Pour commencer, nous écrirons notre jeu de règles vides : + +```css +a { } @@ -129,13 +153,15 @@ a:hover { a:active { -}</pre> +} +``` -<p>Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).</p> +Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte). -<p>Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :</p> +Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement : -<pre class="brush: css">body { +```css +body { width: 300px; margin: 0 auto; font-size: 1.2rem; @@ -173,47 +199,48 @@ a:hover { a:active { background: #265301; color: #CDFEAA; -}</pre> +} +``` -<p>Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :</p> +Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS : -<pre class="brush: html"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla -Firefox</a>, <a href="#">Google Chrome</a>, et -<a href="#">Microsoft Edge</a>.</p></pre> +```html +<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla +Firefox</a>, <a href="#">Google Chrome</a>, et +<a href="#">Microsoft Edge</a>.</p> +``` -<p>En mettant les deux ensemble, nous obtenons ce résultat :</p> +En mettant les deux ensemble, nous obtenons ce résultat : -<p>{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}</p> +{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}} -<p>Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :</p> +Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe : -<ul> - <li>les deux premières règles ne sont pas très intéressantes pour cette discussion ;</li> - <li>la troisième règle utilise le sélecteur <code>a</code> pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ;</li> - <li>ensuite, nous utilisons les sélecteurs <code>a:link</code> et <code>a:visited</code> pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ;</li> - <li>les deux règles suivantes utilisent <code>a:focus</code> et <code>a:hover</code> pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : - <ul> - <li>le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ;</li> - <li>la valeur {{cssxref("border-bottom")}} a été définie comme <code>1px solid</code>, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ;</li> - </ul> - </li> - <li>enfin, <code>a:active</code> est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer !</li> -</ul> +- les deux premières règles ne sont pas très intéressantes pour cette discussion ; +- la troisième règle utilise le sélecteur `a` pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ; +- ensuite, nous utilisons les sélecteurs `a:link` et `a:visited` pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ; +- les deux règles suivantes utilisent `a:focus` et `a:hover` pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : + + - le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ; + - la valeur {{cssxref("border-bottom")}} a été définie comme `1px solid`, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ; + +- enfin, `a:active` est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer ! -<h3 id="Apprentissage_actif_mettez_en_forme_vos_propres_liens">Apprentissage actif : mettez en forme vos propres liens</h3> +### Apprentissage actif : mettez en forme vos propres liens -<p>Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.</p> +Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus. -<p>Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, appuyez sur le bouton <em>Afficher la solution</em> pour insérer l'exemple que nous avons montré ci-dessus.</p> +Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, appuyez sur le bouton _Afficher la solution_ pour insérer l'exemple que nous avons montré ci-dessus. -<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>Zone de saisie HTML</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla - Firefox</a>, <a href="#">Google Chrome</a>, et -<a href="#">Microsoft Edge</a>.</p></textarea> +```html hidden +<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>Zone de saisie HTML</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla + Firefox</a>, <a href="#">Google Chrome</a>, et +<a href="#">Microsoft Edge</a>.</p></textarea> - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { } @@ -235,18 +262,19 @@ a:hover { a:active { -}</textarea> +}</textarea> - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> - </div> -</div> -</pre> + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +``` -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -278,22 +306,25 @@ solution.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }} -<h2 id="Inclusion_dicônes_dans_des_liens">Inclusion d'icônes dans des liens</h2> +## Inclusion d'icônes dans des liens -<p>Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.</p> +Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com. -<p>Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :</p> +Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme : -<pre class="brush: html"><p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>, -jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p></pre> +```html +<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>, +jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p> +``` -<p>Ensuite, le CSS:</p> +Ensuite, le CSS: -<pre class="brush: css">body { +```css +body { width: 300px; margin: 0 auto; font-family: sans-serif; @@ -329,39 +360,41 @@ a[href*="http"] { background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; -}</pre> +} +``` -<p>{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}</p> +{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }} -<p>Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions <code>no-repeat</code> de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.</p> +Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions `no-repeat` de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut. -<p>Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.</p> +Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle. -<p>Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.</p> +Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte. -<p>Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">sélecteur d'attribut</a> : <code>a[href*="http]</code> sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.</p> +Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un [sélecteur d'attribut](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) : `a[href*="http]` sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur. -<p>Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !</p> +Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique ! -<div class="note"> -<p><strong>Note :</strong> ne vous inquiétez pas si vous n'êtes pas encore familier avec les <a href="/fr/Apprendre/CSS/styliser_boites">arrières-plans</a> et le <a href="/fr/Apps/app_layout/responsive_design_building_blocks">responsive web design</a> ; ceux-ci sont expliqués par ailleurs.</p> -</div> +> **Note :** ne vous inquiétez pas si vous n'êtes pas encore familier avec les [arrières-plans](/fr/Apprendre/CSS/styliser_boites) et le [responsive web design](/fr/Apps/app_layout/responsive_design_building_blocks) ; ceux-ci sont expliqués par ailleurs. -<h2 id="Mise_en_forme_de_liens_comme_des_boutons">Mise en forme de liens comme des boutons</h2> +## Mise en forme de liens comme des boutons -<p>Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.</p> +Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses. -<p>En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.</p> +En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment. -<p>D'abord, un peu d'HTML :</p> +D'abord, un peu d'HTML : -<pre class="brush: html"><ul> - <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li> -</ul></pre> +```html +<ul> + <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li> +</ul> +``` -<p>Et maintenant, notre CSS :</p> +Et maintenant, notre CSS : -<pre class="brush: css">body,html { +```css +body,html { margin: 0; font-family: sans-serif; } @@ -401,45 +434,36 @@ a:hover { a:active { background: red; color: white; -}</pre> - -<p>Cela nous donne le résultat suivant :</p> +} +``` -<p>{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}</p> +Cela nous donne le résultat suivant : -<p>Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :</p> +{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }} -<ul> - <li>notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ;</li> - <li>par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ;</li> - <li>la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : - <ul> - <li>comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ;</li> - <li>ensuite, nous mettons le {{cssxref ("display")}} à <code>inline-block</code> : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de <code>block</code> le ferait, nous voulons néanmoins être en mesure de les dimensionner : <code>inline-block</code> nous permet de le réaliser ;</li> - <li>maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'<code><ul></code> et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier <code><a></code> dans la liste, et en supprime la marge ; terminé !</li> - <li>les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir.</li> - </ul> - </li> -</ul> +Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes : -<div class="note"> -<p><strong>Note :</strong> vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> -</div> +- notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ; +- par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ; +- la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : -<h2 id="Résumé">Résumé</h2> + - comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ; + - ensuite, nous mettons le {{cssxref ("display")}} à `inline-block` : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de `block` le ferait, nous voulons néanmoins être en mesure de les dimensionner : `inline-block` nous permet de le réaliser ; + - maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'`<ul>` et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier `<a>` dans la liste, et en supprime la marge ; terminé ! + - les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir. -<p>Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.</p> +> **Note :** vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur [Fighting the space between inline block elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/). -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> +## Résumé -<h2 id="Dans_ce_module">Dans ce module</h2> +Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web. +{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> -</ul> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md index e7fb1721ba..d21469eda6 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.md +++ b/files/fr/learn/css/styling_text/styling_lists/index.md @@ -12,178 +12,194 @@ tags: - Texte translation_of: Learn/CSS/Styling_text/Styling_lists --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> - -<p>Les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes">listes</a> se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.</p> +Les [listes](/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes) se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances de base informatiques, bases HTML (étudiées dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), bases CSS (étudiées dans <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>), <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">la mise en forme du texte</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances de base informatiques, bases HTML (étudiées dans + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction à HTML</a + >), bases CSS (étudiées dans + <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS" + >Introduction à CSS</a + >), + <a + href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte" + >la mise en forme du texte</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Se familiariser avec les meilleures pratiques et propriétés liées aux + styles de liste. + </td> + </tr> + </tbody> </table> -<h2 id="Un_exemple_de_liste_simple">Un exemple de liste simple</h2> +## Un exemple de liste simple -<p>Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible sur Github</a> (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">code source</a>).</p> +Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est [disponible sur Github](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)). -<p>Le code HTML pour nos exemples de liste ressemble à ceci :</p> +Le code HTML pour nos exemples de liste ressemble à ceci : -<pre class="brush: html"><h2>Liste de courses (non ordonnée)</h2> +```html +<h2>Liste de courses (non ordonnée)</h2> -<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence, -paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> +<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence, +paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> -<ul> - <li>Houmous</li> - <li>Pain blanc</li> - <li>Salade verte</li> - <li>Fromage halloumi</li> -</ul> +<ul> + <li>Houmous</li> + <li>Pain blanc</li> + <li>Salade verte</li> + <li>Fromage halloumi</li> +</ul> -<h2>Liste de recette (ordonnée)</h2> +<h2>Liste de recette (ordonnée)</h2> -<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, -paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> +<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, +paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> -<ol> - <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> - <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li>Laver et hacher la salade.</li> - <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol> +<ol> + <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> + <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li>Laver et hacher la salade.</li> + <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> -<h2>Liste descriptive des ingrédients</h2> +<h2>Liste descriptive des ingrédients</h2> -<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, -paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> +<p>paragraphe de référence, paragraphe de référence, paragraphe de référence, +paragraphe de référence, paragraphe de référence, paragraphe de référence.</p> -<dl> - <dt>Houmous</dt> - <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd> - <dt>Pain pitta</dt> - <dd>Un pain plat moelleux, légèrement levé.</dd> - <dt>Halloumi</dt> - <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd> - <dt>Salade verte</dt> - <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd> -</dl></pre> +<dl> + <dt>Houmous</dt> + <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd> + <dt>Pain pitta</dt> + <dd>Un pain plat moelleux, légèrement levé.</dd> + <dt>Halloumi</dt> + <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd> + <dt>Salade verte</dt> + <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd> +</dl> +``` -<p>Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">les outils de développement du navigateur</a>, vous noterez quelques valeurs de style par défaut :</p> +Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant [les outils de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools), vous noterez quelques valeurs de style par défaut : -<ul> - <li>Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas et une propriété {{cssxref("padding-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li> - <li>Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut.</li> - <li>L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de<code>16 px</code> (<code>1 em</code>) en haut et en bas , mais pas de définition du remplissage.</li> - <li>Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li> - <li>Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas, identiques à ceux des différents types de listes.</li> -</ul> +- Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas et une propriété {{cssxref("padding-left")}} de `40 px` (`2.5 em`.) +- Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut. +- L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de`16 px` (`1 em`) en haut et en bas , mais pas de définition du remplissage. +- Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de `40 px` (`2.5 em`.) +- Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas, identiques à ceux des différents types de listes. -<h2 id="Gestion_d'espacement_des_listes">Gestion d'espacement des listes</h2> +## Gestion d'espacement des listes -<p>Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">exemple de style terminé</a> sur Github et trouver<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html"> le code source</a> aussi.)</p> +Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](http://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur Github et trouver[ le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.) -<p>Le CSS utilisé pour le style et l'espacement du texte est le suivant :</p> +Le CSS utilisé pour le style et l'espacement du texte est le suivant : -<pre>/* Style général */ + /* Style général */ -html { - font-family: Helvetica, Arial, sans-serif; - font-size: 10px; -} + html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; + } -h2 { - font-size: 2rem; -} + h2 { + font-size: 2rem; + } -ul,ol,dl,p { - font-size: 1.5rem; -} + ul,ol,dl,p { + font-size: 1.5rem; + } -li, p { - line-height: 1.5; -} + li, p { + line-height: 1.5; + } -/* Styles des listes descriptives */ + /* Styles des listes descriptives */ -dd, dt { - line-height: 1.5; -} + dd, dt { + line-height: 1.5; + } -dt { - font-weight: bold; -} + dt { + font-weight: bold; + } -dd { - margin-bottom: 1.5rem; -}</pre> + dd { + margin-bottom: 1.5rem; + } -<ul> - <li>La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page.</li> - <li>Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent.</li> - <li>La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent.</li> - <li>Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété <code>line-height</code> pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement.</li> -</ul> +- La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page. +- Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent. +- La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent. +- Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété `line-height` pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement. -<h2 id="Style_propre_à_une_liste">Style propre à une liste</h2> +## Style propre à une liste -<p>Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} :</p> +Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} : -<ul> - <li>{{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée.</li> - <li>{{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste.</li> - <li>{{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond.</li> -</ul> +- {{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée. +- {{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste. +- {{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond. -<h3 id="Styles_de_puces">Styles de puces</h3> +### Styles de puces -<p>Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec :</p> +Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec : -<pre class="brush: css">ol { +```css +ol { list-style-type: upper-roman; -}</pre> +} +``` -<p>Cela donne l'apparence suivante :</p> +Cela donne l'apparence suivante : -<p><img alt="une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste." src="ex_1.png"></p> + -<p>Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.</p> +Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}. -<h3 id="Position_des_puces">Position des puces</h3> +### Position des puces -<p>La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est <code>outside</code> et les puces apparaîssent comme ci-dessus.</p> +La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaîssent comme ci-dessus. -<p>Si vous choisissez la valeur <code>inside</code>, les puces seront disposées dans la ligne :</p> +Si vous choisissez la valeur `inside`, les puces seront disposées dans la ligne : -<pre class="brush: css">ol { +```css +ol { list-style-type: upper-roman; list-style-position: inside; -}</pre> +} +``` -<p><img alt="une liste ordonnée avec les puces intégrées au texte des éléments de la liste." src="ex_2.png"></p> + -<h3 id="Utilisation_d'une_puce_image_personnalisée">Utilisation d'une puce image personnalisée</h3> +### Utilisation d'une puce image personnalisée -<p>La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :</p> +La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple : -<pre class="brush: css">ul { +```css +ul { list-style-image: url(star.svg); -}</pre> +} +``` -<p>Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module <a href="/fr/Apprendre/CSS/styliser_boites"> Styliser les boîtes</a>. Pour l'instant, voici un avant-goût !</p> +Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites). Pour l'instant, voici un avant-goût ! -<p>Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :</p> +Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci : -<pre class="brush: css">ul { +```css +ul { padding-left: 2rem; list-style-type: none; } @@ -194,140 +210,143 @@ ul li { background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; -}</pre> +} +``` -<p>Voici ce que nous avons fait :</p> +Voici ce que nous avons fait : -<ul> - <li>abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de <code>40px</code> par défaut à <code>20px</code>, puis défini la même valeur pour les éléments de la liste. Ainsi, l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon.</li> - <li>défini la propriété {{cssxref("list-style-type")}} à <code>none</code>, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces.</li> - <li>inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : - <ul> - <li>{{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce.</li> - <li>{{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons <code>0 0</code> : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste.</li> - <li>{{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de <code>1.6rem</code> (<code>16px</code>), qui correspond bien au remplissage de <code>20px</code> dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien.</li> - <li>{{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur <code>no-repeat</code>.</li> - </ul> - </li> -</ul> +- abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi, l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon. +- défini la propriété {{cssxref("list-style-type")}} à `none`, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces. +- inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : -<p>Ceci nous donne le résultat suivant :</p> + - {{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce. + - {{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons `0 0` : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste. + - {{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de `1.6rem` (`16px`), qui correspond bien au remplissage de `20px` dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien. + - {{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur `no-repeat`. -<p><img alt="une liste non ordonnée avec les puces définies comme de petites images d'étoiles." src="ex_3.png"></p> +Ceci nous donne le résultat suivant : -<h3 id="Raccourci_de_style_de_liste">Raccourci de style de liste</h3> + -<p>Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :</p> +### Raccourci de style de liste -<pre class="brush: css">ul { +Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant : + +```css +ul { list-style-type: square; list-style-image: url(example.png); list-style-position: inside; -}</pre> +} +``` -<p>peut être remplacé par cela :</p> +peut être remplacé par cela : -<pre>ul { - list-style: square url(example.png) inside; -}</pre> + ul { + list-style: square url(example.png) inside; + } -<p>Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont <code>disc</code>, <code>none</code> et <code>outside</code>. Si un <code>type</code> et une <code>image</code> sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque.</p> +Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont `disc`, `none` et `outside`. Si un `type` et une `image` sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque. -<h2 id="Contrôle_du_numérotage_des_listes">Contrôle du numérotage des listes</h2> +## Contrôle du numérotage des listes -<p>Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.</p> +Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre. -<h3 id="Numéro_de_départ">Numéro de départ</h3> +### Numéro de départ -<p>L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :</p> +L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant : -<pre class="brush: html"><ol start="4"> - <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> - <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li>Laver et hacher la salade.</li> - <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol></pre> +```html +<ol start="4"> + <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> + <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li>Laver et hacher la salade.</li> + <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> +``` -<p>vous donne cette sortie :</p> +vous donne cette sortie : -<p>{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }}</p> +{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }} -<h3 id="Numérotation_inversée">Numérotation inversée</h3> +### Numérotation inversée -<p>L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant :</p> +L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant : -<pre class="brush: html"><ol start="4" reversed> - <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li> - <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li>Laver et hacher la salade.</li> - <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol></pre> +```html +<ol start="4" reversed> + <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li> + <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li>Laver et hacher la salade.</li> + <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> +``` -<p>donne cette sortie :</p> +donne cette sortie : -<p>{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }}</p> +{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }} -<h3 id="Valeurs_individualisées">Valeurs individualisées</h3> +### Valeurs individualisées -<p>L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :</p> +L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant : -<pre class="brush: html"><ol> - <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> - <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> - <li value="6">Laver et hacher la salade.</li> - <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> -</ol></pre> +```html +<ol> + <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> + <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li> + <li value="6">Laver et hacher la salade.</li> + <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li> +</ol> +``` -<p>vous donne cette sortie :</p> +vous donne cette sortie : -<p>{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}</p> +{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }} -<div class="note"> -<p><strong>Note :</strong> Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut <code>value</code>.</p> -</div> +> **Note :** Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`. -<h2 id="Apprentissage_actif_définir_le_style_d'une_liste_imbriquée">Apprentissage actif : définir le style d'une liste imbriquée</h2> +## Apprentissage actif : définir le style d'une liste imbriquée -<p>Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de :</p> +Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de : -<ol> - <li>mettre une puce carrée devant les éléments de la liste non ordonnée,</li> - <li>donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères.</li> - <li>donner à la liste ordonnée une puce alphabétique en minuscules.</li> - <li>ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver.</li> -</ol> +1. mettre une puce carrée devant les éléments de la liste non ordonnée, +2. donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères. +3. donner à la liste ordonnée une puce alphabétique en minuscules. +4. ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver. -<p>Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour voir une réponse possible.</p> +Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour voir une réponse possible. -<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> - <h2>Zone de saisie du HTML</h2> - <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> - <li>D'abord, allumez la chandelle.</li> - <li>Ensuite, ouvrez la boîte.</li> - <li>Puis, mettez les trois objets magiques dans la +```html hidden +<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>Zone de saisie du HTML</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>D'abord, allumez la chandelle.</li> + <li>Ensuite, ouvrez la boîte.</li> + <li>Puis, mettez les trois objets magiques dans la boîte, dans cet ordre exactement, pour terminer le charme : - <ol> - <li>le livre de sorts,</li> - <li>la baguette brillante,</li> - <li>la statue du lutin.</li> - </ol> - </li> -</ul></textarea> - - <h2>Zone de saisie de la CSS</h2> - <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> - - <h2>Zone de rendu</h2> - <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> - <div class="controls"> - <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> - <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> - </div> -</div> -</pre> - -<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); + <ol> + <li>le livre de sorts,</li> + <li>la baguette brillante,</li> + <li>la statue du lutin.</li> + </ol> + </li> +</ul></textarea> + + <h2>Zone de saisie de la CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Zone de rendu</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Voir la solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +``` + +```js hidden +var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -359,35 +378,30 @@ solution.addEventListener("click", function() { htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); -</pre> -</div> +``` -<p>{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}</p> +{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p>Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :</p> +Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir : -<ul> - <li>{{cssxref("@counter-style")}}</li> - <li>{{cssxref("counter-increment")}}</li> - <li>{{cssxref("counter-reset")}}</li> -</ul> +- {{cssxref("@counter-style")}} +- {{cssxref("counter-increment")}} +- {{cssxref("counter-reset")}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens.</p> +Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens. -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> +{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<p> </p> -<ul> - <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> -</ul> + +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md index d237b8f377..fa70e80c22 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md @@ -13,114 +13,100 @@ tags: - Listes translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> - -<p>Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.</p> +Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester la compréhension de la composition de textes à l'écran avec les techniques des CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé + tous les articles de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester la compréhension de la composition de textes à l'écran avec les + techniques des CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ + +Pour débuter cette évaluation, vous devez : + +- récupérer les fichiers [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css) de l'exercice ainsi que [le lien externe sur l'icône](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png). +- en faire une copie sur votre ordinateur. -<p>Pour débuter cette évaluation, vous devez :</p> +> **Note :** Autrement, il reste possible d'utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez [cet URL](http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png) pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément `<style>` de l'élément `head` du document. -<ul> - <li>récupérer les fichiers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> de l'exercice ainsi que <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">le lien externe sur l'icône</a>.</li> - <li>en faire une copie sur votre ordinateur.</li> -</ul> +## Énoncé de l'exercice -<div class="note"> -<p><strong>Note :</strong> Autrement, il reste possible d'utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">cet URL</a> pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <code><style></code> de l'élément <code>head</code> du document.</p> -</div> +Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple. -<h2 id="Énoncé_de_l'exercice">Énoncé de l'exercice</h2> +Fontes : -<p>Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple.</p> +- Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal. +- Ensuite, utilisez le service ad-hoc pour créer le « bulletproof `@font-face` code » pour ces deux fontes. +- Appliquez la police pour le corps à toute la page et celle pour les titres aux en‑têtes. -<p>Fontes :</p> +Style général du texte : -<ul> - <li>Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal.</li> - <li>Ensuite, utilisez le service ad-hoc pour créer le « bulletproof <code>@font-face</code> code » pour ces deux fontes.</li> - <li>Appliquez la police pour le corps à toute la page et celle pour les titres aux en‑têtes.</li> -</ul> +- Donnez à la page une propriété `font-size` de `10px` sur tout le site. +- Donnez aux titres et autres types d'éléments des tailles de polices appropriées définie avec une unité relative adéquate. +- Donnez au corps du texte une propriété `line-height` appropriée. +- Centrez le titre d'en-tête sue la page. +- Augmentez légérement la valeur de la propriété `letter-spacing` des titres pour qu'ils ne paraissent pas trop écrasés en donnant un peu d'air aux lettres. +- Donnez au corps du texte une valeur de propriété `letter-spacing` et `word-spacing` appropriée. +- Donnez au premier paragraphe après chaque titre dans `<section>` une légère indentation, disons 20px. -<p>Style général du texte :</p> +Liens : -<ul> - <li>Donnez à la page une propriété <code>font-size</code> de <code>10px</code> sur tout le site.</li> - <li>Donnez aux titres et autres types d'éléments des tailles de polices appropriées définie avec une unité relative adéquate.</li> - <li>Donnez au corps du texte une propriété <code>line-height</code> appropriée.</li> - <li>Centrez le titre d'en-tête sue la page.</li> - <li>Augmentez légérement la valeur de la propriété <code>letter-spacing</code> des titres pour qu'ils ne paraissent pas trop écrasés en donnant un peu d'air aux lettres.</li> - <li>Donnez au corps du texte une valeur de propriété <code>letter-spacing</code> et <code>word-spacing</code> appropriée.</li> - <li>Donnez au premier paragraphe après chaque titre dans <code><section></code> une légère indentation, disons 20px.</li> -</ul> +- Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page. +- Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu'ils sont ciblés ou survolés. +- Supprimez le soulignement du focus par défaut de TOUS les liens de la page. +- Donnez à l'état actif un style sensiblement différent pour qu'il se démarque bien, mais faites en sorte qu'il s'intègre à la conception globale de la page. +- Faites en sorte que l'icône de lien externe soit insérée à côté des liens externes. -<p>Liens :</p> +Listes : -<ul> - <li>Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page.</li> - <li>Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu'ils sont ciblés ou survolés.</li> - <li>Supprimez le soulignement du focus par défaut de TOUS les liens de la page.</li> - <li>Donnez à l'état actif un style sensiblement différent pour qu'il se démarque bien, mais faites en sorte qu'il s'intègre à la conception globale de la page.</li> - <li>Faites en sorte que l'icône de lien externe soit insérée à côté des liens externes.</li> -</ul> +- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes. +- Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose. -<p>Listes :</p> +Menu de navigation : -<ul> - <li>Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété <code>line-height</code> qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes.</li> - <li>Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose.</li> -</ul> +- Donnez à votre menu de navigation un style tel que son aspect soit en accord avec l'apparence et la convivialité de la page. -<p>Menu de navigation :</p> +## Conseils et astuces -<ul> - <li>Donnez à votre menu de navigation un style tel que son aspect soit en accord avec l'apparence et la convivialité de la page.</li> -</ul> +- Il n'y a pas besoin de modifier le HTML en quoi que ce soit pour cet exercice. +- Le menu de navigation n'est pas forcément à représenter sous forme de boutons, mais il doit être un peu plus grand pour ne pas avoir l'air riquiqui sur le côté de la page ; n'oubliez pas non plus que sa disposition doit être verticale. -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Exemple -<ul> - <li>Il n'y a pas besoin de modifier le HTML en quoi que ce soit pour cet exercice.</li> - <li>Le menu de navigation n'est pas forcément à représenter sous forme de boutons, mais il doit être un peu plus grand pour ne pas avoir l'air riquiqui sur le côté de la page ; n'oubliez pas non plus que sa disposition doit être verticale.</li> -</ul> +La capture d'écran ci-après montre un exemple possible du design terminé : -<h2 id="Exemple">Exemple</h2> + -<p>La capture d'écran ci-après montre un exemple possible du design terminé :</p> +## Évaluation -<p><img alt="" src="example2.png"></p> +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! -<h2 id="Évaluation">Évaluation</h2> +{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abors, il n'y rien à gagner en trichant !</p> -<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> -<p> </p> +## Dans ce module -<h2 id="Dans_ce_module">Dans ce module</h2> -<p> </p> -<ul> - <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> - <li>Composition d'une page d'accueil d'une école de communauté</li> -</ul> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- Composition d'une page d'accueil d'une école de communauté diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md index f1cafd3f21..3374ac8986 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.md +++ b/files/fr/learn/css/styling_text/web_fonts/index.md @@ -3,162 +3,159 @@ title: Fontes Web slug: Learn/CSS/Styling_text/Web_fonts translation_of: Learn/CSS/Styling_text/Web_fonts --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} -<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> - -<p>Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.</p> +Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment appliquer des fontes web à une page web, soit avec un service tierce partie, soit en écrivant vous-même le code.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances informatiques de base, les bases HTML (étudiées dans l'<a + href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), les bases CSS (étudiées dans + <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre comment appliquer des fontes web à une page web, soit avec un + service tierce partie, soit en écrivant vous-même le code. + </td> + </tr> + </tbody> </table> -<h2 id="Rappel_familles_de_fontes">Rappel : familles de fontes</h2> +## Rappel : familles de fontes -<p>Comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a>, les fontes appliquées aux HTML sont contrôlées par la propriété {{cssxref("font-family")}}. Elle accepte un ou plusieurs noms de familles de fontes et le navigateur parcourt la liste jusqu'à trouver la fonte disponible sur le système sur lequel il tourne :</p> +Comme nous l'avons vu dans [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte), les fontes appliquées aux HTML sont contrôlées par la propriété {{cssxref("font-family")}}. Elle accepte un ou plusieurs noms de familles de fontes et le navigateur parcourt la liste jusqu'à trouver la fonte disponible sur le système sur lequel il tourne : -<pre class="brush: css">p { +```css +p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; -}</pre> +} +``` -<p>Ce système fonctionne bien, mais généralement, le choix des développeurs Web en matière de polices sont limités. Il n'y en a qu'une poignée dont la disponibilité soit garantie sur tous les systèmes courants — les polices dites <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Polices_web_sûres">Web-safe</a>. La pile de polices vous permet de préciser la police préférable, puis la police alternative sûre pour le Web, puis la police par défaut du système, mais cela induit du travail supplémentaire de tests pour s'assurer que le désign reste correct avec chaque police, etc.</p> +Ce système fonctionne bien, mais généralement, le choix des développeurs Web en matière de polices sont limités. Il n'y en a qu'une poignée dont la disponibilité soit garantie sur tous les systèmes courants — les polices dites [Web-safe](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Polices_web_sûres). La pile de polices vous permet de préciser la police préférable, puis la police alternative sûre pour le Web, puis la police par défaut du système, mais cela induit du travail supplémentaire de tests pour s'assurer que le désign reste correct avec chaque police, etc. -<h2 id="Fontes_Web">Fontes Web</h2> +## Fontes Web -<p>Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit.</p> +Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit. -<p>Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger :</p> +Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : -<pre class="brush: css">@font-face { +```css +@font-face { font-family: "myFont"; src: url("myFont.ttf"); -}</pre> +} +``` -<p>Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement :</p> +Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : -<pre class="brush: css">html { +```css +html { font-family: "myFont", "Bitstream Vera Serif", serif; -}</pre> +} +``` + +La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas. + +Deux points important sont à garder présents à l'esprit à ce propos : -<p>La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas.</p> +L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu. -<p>Deux points important sont à garder présents à l'esprit à ce propos :</p> +1. Les navigateurs prennent en charge divers formats de polices ; donc, vous aurez besoin de plusieurs formats de polices pour une prise en charge croisée correcte des navigateurs. Par ex., la plupart des navigateurs modernes prennent en charge les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2), le plus efficace, mais les vieilles versions d'IE n'acceptent que les polices EOT (Embedded Open Type) et, même, vous pourriez avoir besoin d'inclure une version SVG de la police pour être pris en charge par les anciennes versions de l'iPhone et des navigateurs Android. Nous vous montrerons ci-dessous comment générer le code voulu. +2. Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit. -<p>L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu.</p> +> **Note :** La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 ! -<ol> - <li>Les navigateurs prennent en charge divers formats de polices ; donc, vous aurez besoin de plusieurs formats de polices pour une prise en charge croisée correcte des navigateurs. Par ex., la plupart des navigateurs modernes prennent en charge les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2), le plus efficace, mais les vieilles versions d'IE n'acceptent que les polices EOT (Embedded Open Type) et, même, vous pourriez avoir besoin d'inclure une version SVG de la police pour être pris en charge par les anciennes versions de l'iPhone et des navigateurs Android. Nous vous montrerons ci-dessous comment générer le code voulu.</li> - <li>Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit.</li> -</ol> +## Apprentissage actif : un exemple de fonte web -<div class="note"> -<p><strong>Note :</strong> La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !</p> -</div> +En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. -<h2 id="Apprentissage_actif_un_exemple_de_fonte_web">Apprentissage actif : un exemple de fonte web</h2> +Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) et [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) comme point de départ pour ajouter votre code (voir l'[exemple en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html) aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier `web-font-start.css`, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple. -<p>En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus.</p> +### Recherche des polices -<p>Utilisez les fichiers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> comme point de départ pour ajouter votre code (voir l'<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">exemple en direct</a> aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier <code>web-font-start.css</code>, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple.</p> -<h3 id="Recherche_des_polices">Recherche des polices</h3> -<p> </p> +Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : -<p>Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes :</p> +- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). +- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). +- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. -<ul> - <li>un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> et <a href="https://everythingfonts.com/">Everything Fonts</a>.</li> - <li>un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme <a href="http://www.fonts.com/">fonts.com</a> ou <a href="http://www.myfonts.com/">myfonts.com</a>. Vous pouvez aussi acheter directement auprès du fondeur, par exemple <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a> ou <a href="http://www.exljbris.com/">Exljbris</a>.</li> - <li>un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails.</li> -</ul> +Cherchons des polices de caractères ! Allez dans [Font Squirrel](https://www.fontsquirrel.com/) et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts). -<p>Cherchons des polices de caractères ! Allez dans <a href="https://www.fontsquirrel.com/">Font Squirrel</a> et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts).</p> +Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas. -<p>Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.</p> +> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. -<div class="note"> -<p><strong>Note :</strong> Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.</p> -</div> +### Créer le code requis -<h3 id="Créer_le_code_requis">Créer le code requis</h3> +Maintenant, créez le code requis (et les formats de police). Pour chaque police, suivez ces étapes : -<p>Maintenant, créez le code requis (et les formats de police). Pour chaque police, suivez ces étapes :</p> +1. Assurez-vous d'avoir satisfait aux exigences de la licence, si vous l'utilisez dans un projet commercial et/ou Web. +2. Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de Fontsquirrel. +3. Téléversez les deux fichiers de fontes avec le bouton _Upload Fonts_. +4. Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (_Oui, les fontes téléversées sont légalement éligibles à une intégration web_). +5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . -<ol> - <li>Assurez-vous d'avoir satisfait aux exigences de la licence, si vous l'utilisez dans un projet commercial et/ou Web.</li> - <li>Allez sur le <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de Fontsquirrel.</li> - <li>Téléversez les deux fichiers de fontes avec le bouton <em>Upload Fonts</em>.</li> - <li>Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (<em>Oui, les fontes téléversées sont légalement éligibles à une intégration web</em>).</li> - <li>Cliquez sur « <em>Download your kit</em> » (<em>Télécharger le kit</em>) .</li> -</ol> +Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS. -<p>Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS.</p> +### Mise en œuvre du code dans la démo -<h3 id="Mise_en_œuvre_du_code_dans_la_démo">Mise en œuvre du code dans la démo</h3> +Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles : -<p>Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles :</p> +- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. +- Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi. +- Un fichier `stylesheet.css`, qui contient le code @font-face dont vous avez besoin. -<ul> - <li>Plusieurs versions de chaque police : (par ex., <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire.</li> - <li>Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi.</li> - <li>Un fichier <code>stylesheet.css</code>, qui contient le code @font-face dont vous avez besoin.</li> -</ul> +Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : -<p>Pour mettre en œuvre ces polices dans la démo, suivez ces étapes :</p> +1. Renommez le répertoire d'extraction avec quelque chose de simple, comme `fonts`. +2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. +3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). +4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : -<ol> - <li>Renommez le répertoire d'extraction avec quelque chose de simple, comme <code>fonts</code>.</li> - <li>Ouvrez le fichier <code>stylesheet.css</code> et copiez y les deux blocs <code>@font-face</code> contenus dans le fichier <code>web-font-start.css</code> — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site.</li> - <li>Chaque fonction <code>url()</code> pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez <code>fonts/</code> au début de chaque chemin (si nécessaire).</li> - <li>Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : - <pre class="brush: css">font-family: 'zantrokeregular', serif;</pre> - </li> -</ol> + ```css + font-family: 'zantrokeregular', serif; + ``` -<p>Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect.</p> +Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect. -<p><img alt="" src="web-font-example.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (lancez l'<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">exemple terminé directement</a>).</p> -</div> +> **Note :** Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) et [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) (lancez l'[exemple terminé directement](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)). -<h2 id="Utiliser_un_service_de_polices_en_ligne">Utiliser un service de polices en ligne</h2> +## Utiliser un service de polices en ligne -<p>Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code <code>@font-face</code>, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent <a href="https://typekit.com/">Typekit</a> and <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de <a href="https://www.google.com/fonts">Google Fonts</a>, un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos.</p> +Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. -<p> </p> -<p>La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pas dans le détail. Regardons rapidement les polices de Google, pour que vous puissiez vous faire une idée. Encore une fois, utilisez des copies de <code>web-font-start.html</code> et <code>web-font-start.css</code> comme point de départ.</p> -<ol> - <li>Allez sur <a href="https://www.google.com/fonts">Google Fonts</a>.</li> - <li>Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent.</li> - <li>Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté.</li> - <li>Après avoir choisi les familles de fontes, pressez la barre avec <em>[Nombre] Families Selected</em> en bas de la page.</li> - <li>Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS.</li> - <li>Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML.</li> -</ol> +La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pas dans le détail. Regardons rapidement les polices de Google, pour que vous puissiez vous faire une idée. Encore une fois, utilisez des copies de `web-font-start.html` et `web-font-start.css` comme point de départ. -<div class="note"> -<p><strong>Note :</strong> Vous pourrez trouver une version complétée sur <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si vous avez besoin de vérifier votre travail par rapport au nôtre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">voir en direct</a>).</p> -</div> +1. Allez sur [Google Fonts](https://www.google.com/fonts). +2. Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent. +3. Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté. +4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. +5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS. +6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML. -<h2 id="font-face_plus_en_détail">@font-face plus en détail</h2> +> **Note :** Vous pourrez trouver une version complétée sur [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) et [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), si vous avez besoin de vérifier votre travail par rapport au nôtre ([voir en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)). -<p>Examinons la syntaxe générée par fontsquirrel pour <code>@font-face</code>. C'est un bloc de ce type :</p> +## @font-face plus en détail -<pre class="brush: css">@font-face { +Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : + +```css +@font-face { font-family: 'ciclefina'; src: url('fonts/cicle_fina-webfont.eot'); src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), @@ -168,36 +165,31 @@ translation_of: Learn/CSS/Styling_text/Web_fonts url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); font-weight: normal; font-style: normal; -}</pre> +} +``` + +Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : + +- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. +- `src` : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie `url`) et le format de chaque fichier de fonte (la partie `format`). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser. +- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. -<p>Elle est désignée sous le vocable « bulletproof @font-face syntax » (<em>syntaxe @font-face à puces garanties</em>), d'après un post de Paul Irish lors des débuts des succès de <code>@font-face</code> (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Voyons les actions :</p> +> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. -<ul> - <li><code>font-family</code> : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS.</li> - <li><code>src</code> : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie <code>url</code>) et le format de chaque fichier de fonte (la partie <code>format</code>). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser.</li> - <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: define font-weight and font-style to keep your CSS simple</a> (<em>en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples</em>) par Roger Johansson montre que faire plus en détail.</li> -</ul> +## Résumé -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> (<em>Création de piles de fontes personnalisées en définissant des plages unicode</em>) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.</p> -</div> +Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. -<h2 id="Résumé">Résumé</h2> +{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} -<p>Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale.</p> -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> -<p> </p> +## Dans ce module -<h2 id="Dans_ce_module">Dans ce module</h2> -<p> </p> -<ul> - <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li>Polices de caractères web</li> - <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école de communauté</a></li> -</ul> +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- Polices de caractères web +- [Composition d'une page d'accueil d'une école de communauté](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) |