From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../building_blocks/a_cool_looking_box/index.html | 98 +++ .../advanced_styling_effects/index.html | 435 ++++++++++++ .../backgrounds_and_borders/index.html | 318 +++++++++ .../cascade_and_inheritance/index.html | 343 ++++++++++ .../creating_fancy_letterheaded_paper/index.html | 112 +++ .../css/building_blocks/debugging_css/index.html | 202 ++++++ .../fundamental_css_comprehension/index.html | 137 ++++ .../handling_different_text_directions/index.html | 155 +++++ files/fr/learn/css/building_blocks/index.html | 78 +++ .../building_blocks/overflowing_content/index.html | 123 ++++ .../selectors/attribute_selectors/index.html | 177 +++++ .../selectors/combinators/index.html | 114 ++++ .../learn/css/building_blocks/selectors/index.html | 223 ++++++ .../pseudo-classes_and_pseudo-elements/index.html | 399 +++++++++++ .../type_class_and_id_selectors/index.html | 117 ++++ .../building_blocks/sizing_items_in_css/index.html | 135 ++++ .../css/building_blocks/styling_tables/index.html | 307 +++++++++ .../css/building_blocks/the_box_model/index.html | 354 ++++++++++ .../building_blocks/values_and_units/index.html | 392 +++++++++++ files/fr/learn/css/css_layout/flexbox/index.html | 341 ++++++++++ .../learn/css/css_layout/flexbox_skills/index.html | 99 +++ files/fr/learn/css/css_layout/floats/index.html | 509 ++++++++++++++ .../fundamental_layout_comprehension/index.html | 81 +++ files/fr/learn/css/css_layout/grids/index.html | 715 +++++++++++++++++++ files/fr/learn/css/css_layout/index.html | 72 ++ .../learn/css/css_layout/introduction/index.html | 716 +++++++++++++++++++ .../css_layout/legacy_layout_methods/index.html | 585 ++++++++++++++++ .../learn/css/css_layout/media_queries/index.html | 425 ++++++++++++ .../css_layout/multiple-column_layout/index.html | 415 +++++++++++ .../fr/learn/css/css_layout/normal_flow/index.html | 108 +++ .../fr/learn/css/css_layout/positioning/index.html | 558 +++++++++++++++ .../practical_positioning_examples/index.html | 407 +++++++++++ .../css/css_layout/responsive_design/index.html | 334 +++++++++ .../supporting_older_browsers/index.html | 237 +++++++ .../css/first_steps/qu_est_ce_que_css/index.html | 132 ---- .../learn/css/first_steps/what_is_css/index.html | 132 ++++ .../learn/css/howto/create_fancy_boxes/index.html | 314 +++++++++ files/fr/learn/css/howto/css_faq/index.html | 246 +++++++ .../learn/css/howto/generated_content/index.html | 159 +++++ files/fr/learn/css/howto/index.html | 90 +++ files/fr/learn/css/index.html | 77 +++ .../learn/css/styling_text/fundamentals/index.html | 756 +++++++++++++++++++++ .../initiation-mise-en-forme-du-texte/index.html | 756 --------------------- .../mise_en_forme_des_liens/index.html | 448 ------------ .../css/styling_text/styling_links/index.html | 448 ++++++++++++ 45 files changed, 12043 insertions(+), 1336 deletions(-) create mode 100644 files/fr/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/fr/learn/css/building_blocks/advanced_styling_effects/index.html create mode 100644 files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html create mode 100644 files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/fr/learn/css/building_blocks/debugging_css/index.html create mode 100644 files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/fr/learn/css/building_blocks/handling_different_text_directions/index.html create mode 100644 files/fr/learn/css/building_blocks/index.html create mode 100644 files/fr/learn/css/building_blocks/overflowing_content/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/sizing_items_in_css/index.html create mode 100644 files/fr/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/fr/learn/css/building_blocks/the_box_model/index.html create mode 100644 files/fr/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/fr/learn/css/css_layout/flexbox/index.html create mode 100644 files/fr/learn/css/css_layout/flexbox_skills/index.html create mode 100644 files/fr/learn/css/css_layout/floats/index.html create mode 100644 files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html create mode 100644 files/fr/learn/css/css_layout/grids/index.html create mode 100644 files/fr/learn/css/css_layout/index.html create mode 100644 files/fr/learn/css/css_layout/introduction/index.html create mode 100644 files/fr/learn/css/css_layout/legacy_layout_methods/index.html create mode 100644 files/fr/learn/css/css_layout/media_queries/index.html create mode 100644 files/fr/learn/css/css_layout/multiple-column_layout/index.html create mode 100644 files/fr/learn/css/css_layout/normal_flow/index.html create mode 100644 files/fr/learn/css/css_layout/positioning/index.html create mode 100644 files/fr/learn/css/css_layout/practical_positioning_examples/index.html create mode 100644 files/fr/learn/css/css_layout/responsive_design/index.html create mode 100644 files/fr/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html create mode 100644 files/fr/learn/css/first_steps/what_is_css/index.html create mode 100644 files/fr/learn/css/howto/create_fancy_boxes/index.html create mode 100644 files/fr/learn/css/howto/css_faq/index.html create mode 100644 files/fr/learn/css/howto/generated_content/index.html create mode 100644 files/fr/learn/css/howto/index.html create mode 100644 files/fr/learn/css/index.html create mode 100644 files/fr/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html delete mode 100644 files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html create mode 100644 files/fr/learn/css/styling_text/styling_links/index.html (limited to 'files/fr/learn/css') diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..05b812da1d --- /dev/null +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,98 @@ +--- +title: Une boîte d'aspect rafraîchissant +slug: Apprendre/CSS/styliser_boites/A_cool_looking_box +tags: + - Apprentissage + - Arrière‑plans + - Boîte + - CSS + - Débutant + - Evaluation + - effets + - encadrement + - modèle de boîte +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :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.
+ +

Départ

+ +

Pour débuter, vous devez :

+ + + +
+

Note: Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble 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

+ +

Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.

+ +

Généralités

+ + + +

Composition de la boîte

+ +

Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :

+ + + +

Exemple

+ +

Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

+ +

+ +

Évaluation

+ +

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 ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..d33fa050a1 --- /dev/null +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,435 @@ +--- +title: Effets de boîte avancés +slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects +tags: + - Article + - Boîtes + - CSS + - Codage + - Débutant + - Filtres + - Modes de mélange de couleurs + - Stylisation + - effets + - ombres de boîtes +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).
Objectif :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.
+ +

Ombres des boîtes

+ +

Revenons au module 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.

+ +

Vous trouverez les exemples de cet article dans le fichier  box-shadow.html (voir le code source également).

+ +

Ombre simple pour une boîte

+ +

Débutons avec un exemple simple. D'abord, un peu de HTML :

+ +
+
<article class="simple">
+  <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p>
+</article>
+ +

Puis la CSS:

+ +
p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  color: white ;
+  text-align: center ;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+}
+
+.simple {
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+}
+
+ +

donnent le résultat suivant :

+ +

{{ EmbedLiveSample('example_1', '100%', 100) }}

+ +

Notez les quatre éléments valeur de la propriété box-shadow :

+ +
    +
  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. +
  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. +
  3. La troisième valeur est le rayon de flou — il représente la « quantité » de flou appliquée à l'ombre.
    4. +
  4. La valeur de la couleur : couleur de base de l'ombre.
    5. +
+ +

Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.

+ +

Ombres multiples pour une boîte

+ +

Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :

+ +
+ + +
p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  color: white;
+  text-align: center;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); }
+
+.multiple { box-shadow: 1px 1px 1px black,
+                        2px 2px 1px black,
+                        3px 3px 1px red,
+                        4px 4px 1px red,
+                        5px 5px 1px black,
+                        6px 6px 1px black; }
+
+
+ +

Nous obtenons le résultat suivant :

+ +

{{ EmbedLiveSample('example_2', '100%', 100) }}

+ +

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.

+ +

Autres fonctionnalités des ombres de boîtes

+ +

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.

+ +

D'abord un HTML différent pour cet exemple :

+ +
+
<button>Appuyez ici !</button>
+ +
button {
+  width: 150px;
+  font-size: 1.1rem;
+  line-height: 2;
+  border-radius: 10px;
+  border: none;
+  background-image: linear-gradient(to bottom right, #777, #ddd);
+  box-shadow: 1px 1px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}
+
+button:focus, button:hover {
+  background-image: linear-gradient(to bottom right, #888, #eee);
+}
+
+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);
+}
+
+ +

Et voici le résultat :

+ +

{{ EmbedLiveSample('example_3', '100%', 70) }}

+ +

 

+ +

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.

+ +

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é.

+ +
+

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.

+
+ +

Filtres

+ +

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.

+ +

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 :

+ +

Tout d'abord, un HTML simple :

+ +
<p class="filter">Filtre</p>
+
+<p class="box-shadow">Ombre de boîte</p>
+
+ +

Et maintenant un peu de CSS pour créer une ombre portée à chacun :

+ +
p {
+  margin: 1rem auto;
+  padding: 20px;
+  text-align: center ;
+  width: 100px;
+  border: 5px dashed red;
+}
+
+.filter {
+  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+}
+
+.box-shadow {
+  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
+}
+ +

Vous obtiendrez le résultat suivant :

+ +

{{ EmbedLiveSample('Filtres', '100%', 200) }}

+ +

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.

+ +

Quelques autres points à noter :

+ + + +
+

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.

+
+ +

Vous pouvez voir d'autres exemples de filtres sur filters.html (voir aussi le code source).

+ +

Modes de mélange de couleurs

+ +

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.

+ +

Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :

+ + + +

Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page blend-modes.html  (voir aussi le code source) et à la page de référence de {{cssxref("<blend-mode>")}}.

+ +
+

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.

+
+ +

background-blend-mode

+ +

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 :

+ +
<div>
+</div>
+<div class="multiply">
+</div>
+ +

Maintenant la CSS — nous ajoutons aux <div> une image d'arrière‑plan sur un fond vert :

+ +
div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+.multiply {
+  background-blend-mode: multiply;
+}
+ +

Le résultat obtenu est le suivant  — à gauche l'original et le mode mélange multiply à droite :

+ +

{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}

+ +

mix-blend-mode

+ +

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 :

+ +
<article>
+  Mode sans mélange
+  <div>
+
+  </div>
+  <div>
+  </div>
+</article>
+
+<article>
+  Mélange "multiply"
+  <div class="multiply-mix">
+
+  </div>
+  <div>
+  </div>
+</article>
+ +

Voici la CSS avec laquelle nous stylisons :

+ +
article {
+  width: 280px;
+  height: 180px;
+  margin: 10px;
+  position: relative;
+  display: inline-block;
+}
+
+div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+}
+
+article div:first-child {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+article div:last-child {
+  background-color: purple;
+  position: absolute;
+  bottom: -10px;
+  right: 0;
+  z-index: -1;
+}
+
+.multiply-mix {
+  mix-blend-mode: multiply;
+}
+ +

Nous obtenons le résultat suivant :

+ +

{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}

+ +

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.

+ +
+

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.

+
+ +

-webkit-background-clip: text

+ +

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 :

+ +
.text-clip {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+ +

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.

+ +

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.

+ +
+

Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).

+
+ +

Apprentissage actif : expérimenter certains effets

+ +

À 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.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 820) }}

+ +

Résumé

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..53299b96fe --- /dev/null +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,318 @@ +--- +title: Arrière-plans et bordures +slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis:Compétences informatique basiques , logicels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS. )
Objectif:Apprendre comment mettre en forme l'arrière-plan et les bordures.
+ +

Mettre en forme l'arrière-plan avec CSS

+ +

La propriété CSS {{cssxref("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.

+ +
.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;
+} 
+
+ +

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.

+ +

Couleur de fond

+ +

La propriété {{cssxref("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>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

+ +

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.

+ +

Expérimentez avec ce code, en faisant varier les valeurs  <color> dans les différentes déclarations.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

+ +

Images de fond

+ +

La propriété {{cssxref("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, l'autre avec comme fond une petite image représentant une étoile.

+ +

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 dimension de la boîte, on n'en voit qu'un coin, alors qu'un 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.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

+ +

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.

+ +

Contrôler le background-repeat

+ +

La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

+ + + +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

+ +

Dimensionner l'image de fond

+ +

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é {{cssxref("background-size")}} — avec comme valeur une  longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

+ +

On peut aussi utiliser les mots-clé :

+ + + +

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.

+ +

Essayez ce qui suit :

+ + + +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

Positionner l'image de fond

+ +

La propriété {{cssxref("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.

+ +
+

Note : La valeur par défaut de  background-position est (0,0).

+
+ +

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.

+ +

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} 
+
+ +

Et Longueurs, ou pourcentages :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} 
+
+ +

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

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édene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : 

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

+ +
+

Note : background-position est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.

+
+ +

Arrière-plan dégradé

+ +

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é {{cssxref("background-image")}}.

+ +

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>. 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à. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

+ +

 Images de fond multiples

+ +

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.

+ +

Quand vous faîtes 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.

+ +
+

Note : on peut joyeusement mélanger gradients et images de fond classiques.

+
+ +

Les autres propriété background-* peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que  background-image:

+ +
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;
+ +

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.

+ +

Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

+ +

Attachement du fond

+ +

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. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:

+ + + +

The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

+ +

Utiliser la propriété raccourci background 

+ +

As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.

+ +

If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with no-repeat and a position, then a color.

+ +

There are a few rules that need to be followed when writing background image shorthand values, for example:

+ + + +

Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

+ +

Arrière-plans et accessibilité

+ +

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-dessu une image, déclarez toujours une background-color qui rendra le texte lisible si l'image n'est pas chargée.

+ +

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.

+ +

Bordures

+ +

When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.

+ +

We can set a border for all four sides of a box with {{cssxref("border")}}:

+ +
.box {
+  border: 1px solid black;
+}
+ +

Or we can target one edge of the box, for example:

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

The individual properties for these shorthands would be:

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

And for the longhands:

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Note : These top, right, bottom, and left border properties also have mapped logical properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers handling different text directions.

+
+ +

There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

+ +

Coins arrondis

+ +

On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}}  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.

+ +

Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :

+ +
.box {
+  border-radius: 10px;
+}
+ +

Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

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. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

+ +

Jouer avec les arrière-plans et les bordures

+ +

Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :

+ +
    +
  1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
    2. +
  2. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
    3. +
  3. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}

+ +
+

Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

+
+ +

Résumé

+ +

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.

+ +

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 ?

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..4f394ae7f2 --- /dev/null +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,343 @@ +--- +title: Cascade et héritage +slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage +tags: + - Apprendre + - CSS + - Cascade + - Débutant + - Héritage + - Règles + - ordre dans le source + - spécificité +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

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.

+ +

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.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.
+ +

Règles contradictoires

+ +

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.

+ +

À 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.

+ +

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.

+ +

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.

+ +

La cascade

+ +

À 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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Spécificité

+ +

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 :

+ + + +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.

+ +

Héritage

+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

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 !

+ +
+

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, par exemple.

+
+ +

Comprendre comment ces concepts se combinent

+ +

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 !

+ +

Comprendre l'héritage

+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

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 !

+ +

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.

+ +

Contrôler l'héritage

+ +

CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.

+ +
+
{{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.
+
+ +
+

Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

+
+ +
+

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.

+
+ +

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.

+ +

Par exemple :

+ +
    +
  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. +
  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. +
  3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément  <a> — par exemple a { color: red; } ?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Réinitialiser la valeur de toutes les propriétés

+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

Essayez de donner à all l'une des autres valeurs possibles et observez les changements.

+ +

Comprendre la cascade

+ +

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.

+ +

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 :

+ +
    +
  1. Importance
    2. +
  2. Spécificité
    3. +
  3. Ordre d'apparition dans le source
    4. +
+ +

Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.

+ +

Ordre d'apparition dans le source 

+ +

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..

+ +

Spécificité

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

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.

+ +

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 :

+ +
    +
  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. +
  2. Centaines : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.
    3. +
  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. +
  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.
    5. +
+ +
+

Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

+
+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurMilliersCentainesDizainesUnitésSpécificité
h100010001
h1 + p::first-letter00030003
li > a[href*="fr"] > .inline-warning00220022
#identifiant01000100
pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément 10001000
+ +

Avant de continuer, regardons un exemple en action.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

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.

+ + + +
+

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.

+
+ +

!important

+ +

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.

+ +

Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

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.

+ +
    +
  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. +
  2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !
    3. +
  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. +
  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.
    5. +
+ +
+

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.

+
+ +

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.

+ +

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.

+ +

Où sont écrites les règles CSS

+ +

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.

+ +

En résumé

+ +

Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :

+ +
    +
  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. +
  2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).
    3. +
  3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).
    4. +
  4. Déclarations !important dans les feuilles de style d'auteur.
    5. +
  5. Déclarations !important dans les feuilles de style utilisateur.
    6. +
+ +

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.

+ +

Activité : jouer dans la cascade

+ +

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.

+ +

Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton Reset. Si vous êtes vraiment coincé, jetez un coup d'œil à la solution ici.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}

+ +

À suivre

+ +

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.

+ +

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.

+ +

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é.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..8e61584e9d --- /dev/null +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,112 @@ +--- +title: Création d'un en-tête de papier à lettre élégant +slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper +tags: + - Arrière‑plan + - Boîte + - Boîtes + - CSS + - Codage + - Débutant + - Evaluation + - encadrement + - en‑tête de lettre + - lettre + - lettre avec en‑tête + - papier +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :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.
+ +

Départ

+ +

Pour débuter cet exercice, vous devez :

+ + + +
+

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble 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

+ +

Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il  faut :

+ +

La lettre

+ + + + + + + +

Astuces

+ + + +

Exemple

+ +

Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

+ +

+ +

 

+ +

Évaluation

+ +

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 ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.html b/files/fr/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..01f17c25a5 --- /dev/null +++ b/files/fr/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,202 @@ +--- +title: Debugging CSS +slug: Apprendre/CSS/Building_blocks/Debugging_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.
+ +

Comment accéder aux outils de développement du navigateur

+ +

L'article Que sont les outils de développement de navigateurs 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.

+ +

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, Flexbox, and 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.

+ +

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. 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.

+ +

The DOM versus view source

+ +

Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

+ +

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.

+ +

View Source in comparison, is simply the HTML source code as stored on the server. The 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.

+ +

Inspecting the applied CSS

+ +

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.

+ +

The example page for this tutorial with DevTools open.

+ +

If you look at the 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.

+ +

Also useful is the ability to expand out shorthand properties. In our example the margin shorthand is used.

+ +

Click on the little arrow to expand the view, showing the different longhand properties and their values.

+ +

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.

+ +

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.

+ +

The following video provides some useful tips on debugging CSS using the Firefox DevTools:

+ +

{{EmbedYouTube("O3DAm82vIvU")}}

+ +

Editing values

+ +

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.

+ +

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.

+ +

DevTools Styles Panel with a color picker open.

+ +

Adding a new property

+ +

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.

+ +

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.

+ +

The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

+ +
+

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.

+
+ +

Understanding the box model

+ +

In previous lessons we have discussed 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.

+ +

The 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.

+ +

In this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

+ +

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.

+ +

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.

+ +

The Layout section of the DevTools

+ +
+

Note: Find out more in Examining and Inspecting the Box Model.

+
+ +

Solving specificity issues

+ +

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.

+ +

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:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Above that in the stylesheet however is a rule with a .special selector:

+ +
.special {
+  color: orange;
+}
+ +

As you will recall from the lesson on 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.

+ +

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.

+ +

Selecting an em and looking at DevTools to see what is over-riding the color.

+ +

Find out more about the Firefox DevTools

+ +

There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.

+ +

Debugging problems in CSS

+ +

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.

+ +

Take a step back from the problem

+ +

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.

+ +

Do you have valid HTML and CSS?

+ +

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.

+ + + +

Is the property and value supported by the browser you are testing in?

+ +

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")}}.

+ +

Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

+ +

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.

+ +

{{compat("css.shape-outside")}}

+ +

Is something else overriding your CSS?

+ +

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.

+ +

Make a reduced test case of the problem

+ +

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.

+ +

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.

+ +

To create a reduced test case:

+ +
    +
  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 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. +
  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. +
  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. +
  4. Remove any CSS that doesn't impact the issue.
    5. +
+ +

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.

+ +

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.

+ +

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).

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..12a6be6d0c --- /dev/null +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,137 @@ +--- +title: Compréhension des fondements des CSS +slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension +tags: + - CSS + - Codage + - Commentaires + - Débutant + - Evaluation + - Règles + - Style + - Syntaxe + - Sélecteurs + - modèle de boîte +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.
Objectif :Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.
+ +

Point de départ

+ +

Pour demarrer cet exercice, vous devez :

+ + + +
+

Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL 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

+ +

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.

+ +

Construction de base :

+ + + +

Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :

+ + + +

Nouveaux jeux de règles à écrire :

+ + + +
+

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).

+
+ +

Autres choses à prendre en considération :

+ + + +

Conseils et astuces

+ + + +

Exemple

+ +

La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Évaluation

+ +

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 ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..7469a614ce --- /dev/null +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,155 @@ +--- +title: Handling different text directions +slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

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 bordues 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 à 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).

+ +

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 directionnalités sont appelées writing modes (modes d'écriture en français). 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.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To understand the importance of writing modes to modern CSS.
+ +

Que sont les modes d'écritures?

+ +

Un mode d'écriture en CSS fait référence au sens d'écriture du texte, soit horizontalement, soit verticalement. La propriété {{cssxref("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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

Les trois valeurs possibles pour la propriété writing-mode sont:

+ + + +

So the writing-mode property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.

+ +

Writing modes and block and inline layout

+ +

We have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.

+ +

If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses writing-mode: horizontal-tb, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses writing-mode: vertical-rl; this is a writing mode that is written vertically and from right to left.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

When we switch the writing mode, we are changing which direction is block and which is inline. In a horizontal-tb writing mode the block direction runs from top to bottom; in a vertical-rl writing mode the block direction runs right-to-left horizontally. So the block dimension is always the direction blocks are displayed on the page in the writing mode in use. The inline dimension is always the direction a sentence flows.

+ +

This figure shows the two dimensions when in a horizontal writing mode.Showing the block and inline axis for a horizontal writing mode.

+ +

This figure shows the two dimensions in a vertical writing mode.

+ +

Showing the block and inline axis for a vertical writing mode.

+ +

Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.

+ +

Direction

+ +

In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!

+ +

Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about start and end along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.

+ +

Logical properties and values

+ +

The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.

+ +

Let's take a look at our two boxes again — one with a horizontal-tb writing mode and one with vertical-rl. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.

+ +

To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like width and height — with logical, or flow relative versions.

+ +

The property mapped to width when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for height is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced width with inline-size.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

Logical margin, border, and padding properties

+ +

In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.

+ +

The margin-top property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.

+ +

The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.

+ +

You can see a comparison between physical and logical properties below.

+ +

If you change the writing mode of the boxes by switching the writing-mode property on .box to vertical-rl, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.

+ +

You can also see that the {{htmlelement("h2")}} has a black border-bottom. Can you work out how to make that bottom border always go below the text in both writing modes?

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values.

+ +

Logical values

+ +

We have so far looked at logical property names. There are also some properties that take physical values of top, right, bottom, and left. These values also have mappings, to logical values — block-start, inline-end, block-end, and inline-start.

+ +

For example, you can float an image left to cause text to wrap round the image. You could replace left with inline-start as shown in the example below.

+ +

Change the writing mode on this example to vertical-rl to see what happens to the image. Change inline-start to inline-end to change the float.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.

+ +
+

Currently, only Firefox supports flow relative values  for float. If you are using Google Chrome or Microsoft Edge, you may find that the image did not float.

+
+ +

Should you use physical or logical properties?

+ +

The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.

+ +

Test your skills!

+ +

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: writing modes.

+ +

Summary

+ +

The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.

+ +

In the next module we will take a good look at overflow in CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/index.html b/files/fr/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..37ab79216a --- /dev/null +++ b/files/fr/learn/css/building_blocks/index.html @@ -0,0 +1,78 @@ +--- +title: Blocs de base en CSS +slug: Apprendre/CSS/Building_blocks +tags: + - CSS + - Débutant + - Tutoriel +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Ce cours fait suite aux premiers pas avec CSS : 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.
+
+ 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 et la mise en page CSS.

+ +

Prérequis

+ +

Avant de commencer ce cours, nous vous recommandons :

+ +
    +
  1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.
    2. +
  2. De disposer d'un environnement de travail comme il est décrit dans l'article installation des outils de base et de savoir créer et gérer des fichiers (cf. leçon gérer les fichiers).
    3. +
  3. D'être suffisamment à votre aise avec HTML (voir le cours introduction au HTML).
    4. +
  4. D'avoir compris les bases du CSS telles qu'exposées dans le cours premiers pas avec CSS.
    5. +
+ +
+

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 ou Thimble.

+
+ +

Guides

+ +

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.

+ +
+

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.

+
+ +
+
Cascade and inheritance (Cascade et héritage)
+
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)
+
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 : + +
+
The box model (le modèle des boîtes)
+
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)
+
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)
+
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)
+
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)
+
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)
+
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)
+
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
+
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)
+
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)
+
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
+
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.html b/files/fr/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..3b13da9e6b --- /dev/null +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,123 @@ +--- +title: Overflow - Débordements de contenu +slug: Apprendre/CSS/Building_blocks/Overflowing_content +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
+ +

Dans ce cours nous allons étudier un autre concept important en CSS — overflow (débordement). Un overflow (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.

+ + + + + + + + + + + + +
Prérequis:Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif:Comprendre le principe de l'overflow et comment le gérer.
+ +

Qu'est ce qu'un overflow?

+ +

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  {{cssxref("width")}} et {{cssxref("height")}} (ou {{cssxref("inline-size")}} et {{cssxref("block-size")}}). Un overflow 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 d'overflow fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.

+ +

CSS essaie d'éviter les pertes de données

+ +

Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

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 ?

+ +

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.

+ +

Si vous avez défini une boîte avec des valeurs width ou height, CSS part du principe que vous savez ce que vous faîtes 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.

+ +

Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter l'overflow. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant!

+ +

La propriété overflow

+ +

La propriété  {{cssxref("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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

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é {{cssxref("overflow-y")}}, qui définit overflow-y: scroll afin de faire défiler uniquement sur l'axe y.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

Vous pourriez également faire défiler sur l'axe x en utilisant {{cssxref("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 {{cssxref("word-break")}} ou {{cssxref("overflow-wrap")}}. En complément, certaines méthodes présentées dans le cours Définir la taille des éléments en CSS peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

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.

+ +
+

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.

+
+ +

Si vous souhaitez que les barres de défilement n'apparaissent que si 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 Desktop ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +

Overflow crée un "Block Formatting Context"

+ +

Il existe un concept dans le CSS de "Block Formatting Context" (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 d'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.

+ +

Débordements indésirables en web design

+ +

Les méthodes de mise en page modernes (comme étudiées dans le module La mise en page avec le CSS) gèrent très bien l'overflow. 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 overflow ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.

+ +

Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes d'overflow. 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.

+ +

Testez-vous!

+ +

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.

+ +

Résumé

+ +

Cette courte leçon a introduit le concept d'overflow ; 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 overflow éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un overflow problématique.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..415d455e9b --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,177 @@ +--- +title: Sélecteurs d'attribut +slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut +tags: + - Apprendre + - Attribut + - CSS + - Débutant + - Sélecteurs +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{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")}}

+ +

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.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs d'attribut et comment les utiliser.
+ +

Sélecteur de présence et de valeur

+ +

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é

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleDescription
[attr]a[title]Cible les éléments avec un attribut du nom de attr — la valeur entre les crochets droits.
[attr=value]a[href="https://example.com"]Cible les éléments dont l'attribut attr a la valeur value — la chaîne entre guillemets.
[attr~=value]p[class~="special"] +

Cible les éléments avec un attribut attr dont la valeur est exactement value, ou les éléments dont l'attribut attr contient une ou plusieurs valeurs, dont au moins une correspond à value.

+ +

Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.

+
[attr|=value]div[lang|="zh"]Cible les éléments avec un attribut attr dont la valeur peut être exactement value ou peut commencer par value immédiatement suivie d'un trait d'union.
+ +

Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Sélecteurs ciblant une sous-chaîne 

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleDescription
[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 :

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Sensibilité à la casse

+ +

Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur i avant la parenthèse fermante. 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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

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.

+
+ +

À faire vous-mêmes

+ +

Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}

+ +
+

Note : Vous pouvez jeter un œil à la solution ici —  mais essayez d'abord de la trouver par vous-même !

+
+ +

Pas suivants

+ +

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.

+ +

{{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")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.html b/files/fr/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..080ef78d83 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,114 @@ +--- +title: Combinateurs +slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs +tags: + - CSS + - Sélecteurs + - combinateurs +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

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.

+ + + + + + + + + + + + +
Prérequis:Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)
Objectif:En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.
+ +

Combinateur descendant

+ +

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.

+ +
body article 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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Combinateur enfant

+ +

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>:

+ +
article > 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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Combinateur frère adjacents

+ +

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>:

+ +
p + img
+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Combinateur général de frères

+ +

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:

+ +
p ~ img
+ +

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é.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

Utilisation de combinateurs

+ +

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.

+ +
ul > li[class="a"]  {  }
+ +

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.

+ +

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.

+ +

Testez vos compétences!

+ +

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.

+ +

Passer à la suite

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de Boîte
    4. +
  4. Arrières-plans et bordures
    5. +
  5. Gestion de différentes directions de texte
    6. +
  6. Débordement de contenu
    7. +
  7. Valeurs et unités
    8. +
  8. Taille des élements
    9. +
  9. Images, média, et élements de formulaire
    10. +
  10. Mise en page de tableaux
    11. +
  11. Débogage CSS
    12. +
  12. Organiser votre CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..359c762301 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: Sélecteurs CSS +slug: Apprendre/CSS/Building_blocks/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
+ +

Qu'est ce qu'un sélecteur ?

+ +

Vous les avez déjà rencontré : 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.

+ +

Some code with the h1 highlighted.

+ +

Vous avez rencontrés 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.

+ +

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 Level 3 Selectors specification, une spécification mature, la prise en charge par les navigateurs est donc complète.

+ +

Listes de sélecteurs

+ +

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 :

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :

+ +
h1, .special {
+  color: blue;
+}
+ +

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 :

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.

+ +

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.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

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.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Types de sélecteurs

+ +

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.

+ +

Sélecteurs de type, de classe , et d'ID

+ +

Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <h1> :

+ +
h1 { }
+ +

On trouve aussi les sélecteurs ciblant une classe :

+ +
.box { }
+ +

ou une  ID :

+ +
#unique { }
+ +

Sélecteurs d'attribut

+ +

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é :

+ +
a[title] { }
+ +

Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classes et pseudo-éléments

+ +

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 :

+ +
a:hover { }
+ +

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.

+ +
p::first-line { }
+ +

Combinateurs

+ +

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 (>) :

+ +
article > p { }
+ +

À faire ensuite

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Table de référence des sélecteurs

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleTutoriel CSS
Sélecteur de typeh1 {  }Sélecteurs de type
Sélecteur universel* {  }The universal selector
Sélecteur de classe.box {  }Class selectors
Sélecteur d'ID#unique { }ID selectors
Sélecteur d'attributa[title] {  }Attribute selectors
Pseudo-class selectorsp:first-child { }Pseudo-classes
Pseudo-element selectorsp::first-line { }Pseudo-elements
Sélecteur descendantarticle pDescendant combinator
Sélecteur enfantarticle > pChild combinator
Sélecteur de frére adjacenth1 + pAdjacent sibling
Sélecteur de frère généralh1 ~ pGeneral sibling
+ +

Dans ce module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..6bfb96e324 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,399 @@ +--- +title: Pseudo-classes et pseudo-éléments +slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments +tags: + - Apprendre + - CSS + - Débutant + - Pseudo + - Pseudo-class + - Pseudo-element + - Sélecteurs +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

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.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.
+ +

Qu'est ce qu'une pseudo-classe ?

+ +

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.

+ +

Les pseudo-classes sont signalées par un mot clé commençant par deux points :

+ +
:pseudo-class-name
+ +

Exemple d'une pseudo-classe élémentaire 

+ +

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 :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

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.)

+ +

{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

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 :

+ + + +

Pseudo-classes d'action utilisateur

+ +

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 :

+ +

:hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
+ :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Qu'est ce qu'un pseudo-élément ?

+ +

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 ::.

+ +
::pseudo-element-name
+ +
+

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é.

+
+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

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.

+ +

Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.

+ +

Combiner pseudo-classes et pseudo-éléments

+ +

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>

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

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 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, 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électeurDescription
{{ 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 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 attribute or 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, 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.
{{ 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 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, 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, 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).
{{ Cssxref(":visited") }}Matches visited links.
+ +

Pseudo-éléments

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurDescription
{{ 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
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..f6d0580279 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: 'Sélecteurs de type, de classe et d''ID' +slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

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.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
+ +

Sélecteur de type

+ +

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.

+ +

Essayez d'ajouter une règle CSS pour sélectionner l'élément <h1> et changer sa couleur en bleu.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

Le sélecteur universel

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

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.

+ +

Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles

+ +

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 :  

+ +
article :first-child {
+
+}
+ +

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.

+ +

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> :

+ +
article *:first-child {
+
+}
+ +

Sélecteurs de classe

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Cibler des classes d'un élément donné

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

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.

+ +

Cibler un élément appartenant à plus d'une classe

+ +

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.

+ +

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")}}.

+ +

On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Sélecteurs d'ID

+ +

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 :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

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.

+
+ +

Prochain article

+ +

Notre exploration des sélecteurs se poursuit par l'étude des sélecteurs d'attributs.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..8349fb5a59 --- /dev/null +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,135 @@ +--- +title: Définir la taille des éléments en CSS +slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +
{{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 utlisant 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 aiderons dans le futur.
+ +
+ + + + + + + + + + + + +
Prérequis: +

Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.

+
Objectif:Découvrir comment spécifier la taille des éléments en CSS.
+ +

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 placer 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 intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("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'interieur de celui ci.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur 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 intrasèque de l'élément — sa taille est définie par son contenu.

+ +

Spécifier une taille

+ +

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  {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans notre précédente leçon sur le concept d'overflow, 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.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

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.

+ +

Avec les pourcentages

+ +

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, 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 auquelle 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.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

En effet, les pourcentages sont determiné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.

+ +

Marges et remplissage en pourcentages

+ +

Si vous définissez les margins (marges exterieurs) 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é {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!

+ +

When you use margin and padding set in percentages, the value is calculated from the inline size — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.

+ +

tailles min- et max- 

+ +

In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be at least a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.

+ +

In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

This is very useful for dealing with variable amounts of content while avoiding overflow.

+ +

A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.

+ +

As an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.

+ +

If you instead use max-width: 100%, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.

+ +

In the example below we have used the same image twice. The first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. The second image has max-width: 100% set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with max-width: 100% set; in this case you can see how it has scaled down to fit into the box.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

This technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.

+ +
+

Note : Find out more about responsive image techniques.

+
+ +

Unités de la fenêtre d'affichage

+ +

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.

+ +

1vh correspond à 1% dela 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 {{cssxref("font-size")}} 10vh.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

If you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). Open the example, resize the browser window, and observe what happens to the size of the box and text.

+ +

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.

+ +

Résumé

+ +

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. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9d6087e1a4 --- /dev/null +++ b/files/fr/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,307 @@ +--- +title: Mise en page de tableaux +slug: Apprendre/CSS/Building_blocks/Styling_tables +tags: + - Article + - CSS + - Codage + - Débutant + - Guide + - HTML + - Style + - Tableaux +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif :Apprendre à donner effectivement un style aux tableaux HTML.
+ +

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 :

+ +
<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>
+ +

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) :

+ +

Liste des groupes punk du Royaume Uni

+ +

Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

+ +

Mettre en forme notre tableau

+ +

Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.

+ +
    +
  1. Pour débuter, faites une copie locale de l'exemple de balisage, téléchargez les images (noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
    2. +
  2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez‑le dans le même répertoire que les autres fichiers.
    3. +
  3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Espacement et disposition

+ +

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 :

+ +
/* espacement */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Voici les choses les plus importantes à noter :

+ +

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.

+ + + +

À ce stade, le tableau a déjà meilleure mine :

+ +

Première mise en forme du tableau

+ +

Simple typographie

+ +

Maintenant, différencions un peu nos polices de caractère.

+ +

Tout d'abord, nous avons trouvé une police sur Google 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.

+ +

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 :

+ +
<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 :

+ +
/* typographie */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.

+ + + +

Cela fait un peu plus propre :

+ +

Deuxième mise en forme : modifications des polices de caractères.

+ +

Graphisme et couleurs

+ +

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.

+ +

Commençons par ajouter le CSS suivant à la fin du fichier style.css :

+ +
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;
+}
+
+ +

Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.

+ +

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.

+ +

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.

+ +

Zébrures

+ +

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 :

+ +
tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ + + +

Et voici l'explosion de couleurs résultante :

+ +

Troisième mise en forme : coloriage agressif

+ +

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.

+ +

Styliser l'intitulé

+ +

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  :

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

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) :

+ +

Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

+ +

Apprentissage actif : mettez en page votre propre tableau

+ +

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.

+ +

Quelques conseils rapides

+ +

Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :

+ + + +

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")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..927bbdc232 --- /dev/null +++ b/files/fr/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,354 @@ +--- +title: Le modèle de Boîte +slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite +tags: + - Boîte + - CSS + - Disposition + - Débutant + - Mise en page + - Model + - Modèle + - Position + - Positionnement + - border + - box + - display + - margin + - padding +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

En CSS, tout élement 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 élements 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.

+ + + + + + + + + + + + +
Prérequis:Compétences informatique basiques, Logiciels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS).
Objectif: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.
+ +

Les Boîtes "en ligne" et "en bloc"

+ +

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"). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis à vis des autres boîtes :

+ +

Si une boîte est définie en bloc, elle suivra alors les règles suivantes :

+ + + +

À 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.

+ +

Si une boîte est positionnée en ligne, alors :

+ + + +

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.

+ +

Le type de boîte appliqué à un élement est défini par la valeur de la propriété {{cssxref("display")}} tel que block ou inline, et se réfère à la valeur extérieur de positionnement (ou "display" en anglais).

+ +

Aparté : Les positionnements intérieurs et extérieurs

+ +

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".

+ +

Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des élements contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la disposition normale, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).

+ +

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 depositionnement 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, dont on reparlera plus tard.

+ +
+

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.

+
+ +

Lorque 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.

+ +

Les dipositions "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.

+ +

Exemples de quelques types de positionnement

+ +

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 (un cadre) 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.

+ +

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 contenue 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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

+ +

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.

+ +

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".

+ +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

+ +

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 environement dans la mise en page.

+ +

Pour le reste de la leçon, nous ne parlerons plus que du type de positionnement extérieur.

+ +

Qu'est-ce que le Modèle de Boîte en CSS ?

+ +

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 le margin (remplissage extérieur), le border (cadre), 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.

+ +

Les composants d'une boîte

+ +

Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :

+ + + +

Le schéma ci-dessous montre la structure de ces différentes couches:

+ +

Diagram of the box model

+ +

Le Modèle Standard de Boîte CSS

+ +

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 des padding et du border (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. Le margin étant extérieur, il 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 :

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

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.

+ +

Showing the size of the box when the standard box model is being used.

+ +
+

Note : Le margin (marge extérieure) n'est pas comptabilisé 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 au border (le cadre) et ne s'étend pas au margin.

+
+ +

Le Modèle Alternatif de Boîte CSS

+ +

À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constament les dimensions du border et du padding 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 padding et le border. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension la taille du padding et du border. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes: width = 350px, height = 150px.

+ +

Showing the size of the box when the alternate box model is being used.

+ +

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 du cadre (la "border box") comme la zone d'effet de width et height, et non la boîte du contenu comme dans le modèle standard !

+ +
.box {
+  box-sizing: border-box;
+}
+ +

Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répendu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide de ces 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é du parent (inherit). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du coté de l'article des Astuces CSS sur box-sizing.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

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îtes

+ +

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.

+ +

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 ?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

+ +
+

Note: vous pouvez trouver une solution ici.

+
+ +

Utiliser les DevTools pour voir le modèle de boîte

+ +

Les outils de développement 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, padding, border et margin) 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 !

+ +

Inspecting the box model of an element using Firefox DevTools

+ +

Margins, paddings, et borders

+ +

Nous avons déjà rencontré ensemble les propriétés {{cssxref("margin")}}, {{cssxref("padding")}} et {{cssxref("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 quatres 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éparement chaque côté pour plus de personalisation.

+ +

Regardons de plus près ces nouvelles propriétés.

+ +

Les Margins (Marges extérieures)

+ +

Le margin est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). Le margin repousse les éléments alentours de le 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, le margin est toujours décompté en surplus de la taille totale de la boîte et est ajouté après que celle-ci a été calculée.

+ +

On peut fixer les quatres margins d'une boîte d'un seul coup à l'aide de la propriété {{cssxref("margin")}}, ou bien régler chaque côté individuelement avec les propriétés équivalentes suivantes :

+ + + +

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 suprimés (si le margin est négatif) par vos soins.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

+ +

La fusion des marges

+ +

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 margins qui se touchent, alors ces margins fusionnent pour ne faire plus qu'un seul margin qui aura pour taille la plus grande des deux tailles des margins initiaux.

+ +

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 margins se touchent, ils fusionnent ensemble, et ainsi le margin final entre les deux paragraphes est de 50 pixels et non 80, la somme des deux margins.

+ +

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. Le margin visible entre les deux paragraphes demeure inchangé — il conserve sa taille de 50 pixels qui provient du margin-bottom du premier paragraphe.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

+ +

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. 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.

+ +

Les Borders (Cadres)

+ +

le border (le cadre en français) se situe entre le margin (marge externe) et le padding (marge interne) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille du border 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 du border rends la taille disponible pour le contenu plus petite puisqu'il utilise une partie du width et height disponible.

+ +

Pour agir sur le style d'un border, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatres côtés du cadre.

+ +

Vous pouvez naturellement fixer la forme taille et couleur des quatres côtés en une seule fois, par le biais de la propriété border.

+ +

Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :

+ + + +

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 :

+ + + +

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 :

+ + + +

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 un cadre (border). 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 du MDN pour les propriétés des borders (données ci-dessus) vous documentent sur les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

+ +

Les Paddings (Marges intérieures)

+ +

Les paddings (ou marges intérieures) se situent entre le border (le cadre) et la zone du contenu. Contrairement aux margins, on ne peut attribuer une valeur numérique négative à un padding, 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 padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu du border (le cadre).

+ +

On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété {{cssxref("padding")}}, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :

+ + + +

Si vous modifiez les valeurs du padding sur la classe .box de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.

+ +

Tentez aussi de modifier la valeur du padding dans la classe .container, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu du cadre.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

+ +

Le modèle de boîte et la disposition en ligne

+ +

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 ?

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

+ +

le positionnement display: inline-block

+ +

Il existe une valeur spéciale pour la propriété display, qui constitue un compromis entre la diposition 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).

+ +

C'est la solution apportée par la disposition display: inline-block; qui emprunte des règles des deux dispositions pour satisfaire ces motivations :

+ + + +

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.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

+ +

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 padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.

+ +

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 padding aux lien <a> pour pouvoir modifier la couleur de fond (background-color) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <ul>. Ceci est dû au fait que <a> est un élément en ligne.

+ +

Ajoutez la propriété display: inline-block;  en utilisant le sélecteur .links-list a pour voir le respect du padding régler ce problème.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

+ +

Conclusion

+ +

À 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 !

+ +

Dans la leçon suivante, ce sont les arrières-plans et cadres qui capterons notre attention, afin de rendre votre mise en page plus attrayante.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.html b/files/fr/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..59fe695fe4 --- /dev/null +++ b/files/fr/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,392 @@ +--- +title: Valeurs et unités CSS +slug: Apprendre/CSS/Building_blocks/Values_and_units +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Chaque propriété utilisée en CSS a un type de valeur définissant un ensemble de 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 valeurs les plus fréquemment utilisés, et leurs valeurs et unités les plus communes.

+ + + + + + + + + + + + +
Prérequis:Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif:Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.
+ +

Qu'est-ce qu'une valeur CSS?

+ +

Dans les spécifications CSS et sur les pages de propriétés ici sur MDN, vous pourrez identifier les types de valeurs car ils sont entourés par des chevrons, tel que <color> ou <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>.

+ +
+

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.

+
+ +
+

Note: Oui, les types de valeur CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex: la propriété {{cssxref("color")}}, comparée au type de données <color>). Vous pourriez aussi être désorienté entre les ttypes 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.

+
+ +

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():

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

Un type de valeurs 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 pageMDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <color>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.

+ +

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

+ +

Il éxiste de nombreux types de valeurs numériques que vous pourrez trouver vous même en utilisant CSS. Les suivants sont tous classés comme numériques:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de donnéeDescription
<integer><integer> est un nombre entier comme 1024 ou -55.
<number><number> représente un nombre décimal — il peut avoir, ou non, un point décimal avec un composant fractionnaire. Par exemple, 0.255, 128, ou -1.2.
<dimension><dimension> est un <number> avec une unité attachée à lui. Par exemple, 45deg, 5s, ou 10px. <dimension> est divisé en d'autres catégories incluant les types <length>, <angle>, <time>, et <resolution>.
<percentage><percentage> représente une fraction d'une autre valeur.  Par exemple, 50%. Les valeurs de pourcentage sont toujours relatives à une qutre quantité. Par exemple, la longeur d'un élément est relative à la longueur de son élément parent.
+ +

Longueurs

+ +

The numeric type you will come across most frequently is <length>. For example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

+ +

Absolute length units

+ +

The following are all absolute length units — they are not relative to anything else, and are generally considered to always be the same size.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

+ +

Relative length units

+ +

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other element scales relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitRelative to
emFont size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
+ +

Exploring an example

+ +

In the example below, you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit, this width will remain the same no matter what else changes.

+ +

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change. However this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

+ +

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

+ +

After following the instructions above, try playing with the values in other ways, to see what you get.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems and rems

+ +

em and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

+ +

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

+ +

To start with, we set 16px as the font size on the <html> element.

+ +

To recap, the em unit means "my parent element's font-size" in the case of typography. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

+ +

To recap, the rem unit means "The root element's font-size". (rem stands for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

+ +

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Percentages

+ +

In a lot of cases, a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

+ +

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

+ +

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

+ +

Try changing the width of the wrapper or the percentage value to see how this works.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Note that, while many value types accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

+ +

Numbers

+ +

Some value types accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

+ +

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

+
+ +

Color

+ +

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

+ +

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

+ +
+

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

+
+ +

Color keywords

+ +

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value type.

+ +

Try playing with different color values in the live examples below, to get more of an idea how they work.

+ +

Hexadecimal RGB values

+ +

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

+ +

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Again, try changing the values to see how the colors vary.

+ +

RGB and RGBA values

+ +

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

+ +

Let's rewrite our last example to use RGB colors:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values. However, there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

+ +
+

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

+
+ +

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

In this example, try changing the alpha channel values to see how it affects the color output.

+ +
+

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

+
+ +

HSL and HSLA values

+ +

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

+ + + +

We can update the RGB example to use HSL colors like this:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

+ +

Images

+ +

The <image> value type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

+ +

In the example below, we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

+
+ +

Position

+ +

The <position> value type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

+ +

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

+ +

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Play around with these values to see how you can push the image around.

+ +

Strings and identifiers

+ +

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

+ +

There are places where you use strings in CSS. For example when specifying generated content. In this case, the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Functions

+ +

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

+ +

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

+ +

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Test your skills!

+ +

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Values and units.

+ +

Summary

+ +

This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

+ +

The key thing to remember is that each property has a defined list of allowed value types, and each value type has a definition explaining what the values are. You can then look up the specifics here on MDN.

+ +

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..bcf02e9910 --- /dev/null +++ b/files/fr/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,341 @@ +--- +title: Flexbox +slug: Apprendre/CSS/CSS_layout/Flexbox +tags: + - Apprentissage + - Article + - Boîtes modulables + - CSS + - Codage + - Disposition + - Débutant + - Guide + - Mise en page avec les CSS + - Mises en page + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Apprendre à utiliser le système Flexbox pour créer des mises en page web.
+ +

Pourquoi Flexbox ?

+ +

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) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

+ +

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 :

+ + + +

Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

+ +

Voici un exemple simple

+ +

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 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 aussi.

+ +

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.

+ +

Échantillon d'utilisation de flexbox

+ +

Détermination des éléments à disposer en boîtes flexibles

+ +

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) :

+ +
section {
+  display: flex;
+}
+ +

Voici le résultat :

+ +

Échantillon d'utilisation de flexbox

+ +

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.

+ +
+

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.

+
+ +

Aparté sur le modèle flex

+ +

Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

+ +

Terminologie pour les boîtes modulables

+ + + +

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.

+ +

Colonnes ou lignes ?

+ +

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).

+ +

Ajoutons la déclaration suivante dans la règle :

+ +
flex-direction: column;
+ +

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.

+ +
+

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 !

+
+ +

Enveloppement

+ +

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, essayez directement (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :

+ +

Débordement des éléments modulables

+ +

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 :

+ +
flex-wrap: wrap;
+ +

Essayons ; la disposition est bien meilleure avec cet ajout :

+ +

Conditionnement des éléments modulablesNous 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.

+ +

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.

+ +

Forme abrégée « flex-flow »

+ +

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

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

par

+ +
flex-flow: row wrap;
+ +

Taille modulable des éléments flex

+ +

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 ou prenez une copie de flexbox1.html comme nouveau point de départ (voir en direct).

+ +

Ajoutez d'abord la règle ci-dessous en fin de la CSS :

+ +
article {
+  flex: 1;
+}
+ +

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.

+ +

Maintenant ajoutons cette règle en-dessous de la précédente :

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

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.

+ +

Vous pouvez également définir une valeur minimale de taille dans la valeur flex. Modifiez comme suit vos règles article existantes :

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

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.

+ +

Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.

+ +

Modulation de la largeur

+ +

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.

+ +

Flex : forme abrégée vs forme longue

+ +

{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :

+ + + +

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.

+ +

Alignement horizontal et vertical

+ +

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 (voir aussi en direct). 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.

+ +

Alignement

+ +

D'abord, faites une copie locale de cet exemple.

+ +

Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

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.

+ +

{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).

+ + + +

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:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

Voyez l'effet obtenu, puis supprimez ensuite la règle.

+ +

{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.

+ + + +

N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.

+ +

Ordonner les éléments flex

+ +

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.

+ +

Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :

+ +
button:first-child {
+  order: 1;
+}
+ +

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 :

+ + + +

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 :

+ +
button:last-child {
+  order: -1;
+}
+ +

Boîtes flex imbriquées

+ +

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 (à voir en direct également).

+ +

Imbrications avec flexbox

+ +

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")}}  :

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Regardez le code utilisé pour cette disposition.

+ +

Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.

+ +
section {
+  display: flex;
+}
+ +

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.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

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.

+ +
article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

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.

+ +
button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilité des navigateurs

+ +

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).

+ +

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.

+ +

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.

+ +

Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module Tests croisés sur navigateurs.

+ +

Résumé

+ +

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.

+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.html b/files/fr/learn/css/css_layout/flexbox_skills/index.html new file mode 100644 index 0000000000..8cb4d16891 --- /dev/null +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.html @@ -0,0 +1,99 @@ +--- +title: 'Testez vos compétences : Flexbox' +slug: Apprendre/CSS/CSS_layout/Flexbox_skills +translation_of: Learn/CSS/CSS_layout/Flexbox_skills +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}
+ +

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.

+ +
+

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, jsFiddle, or Glitch 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.

+
+ +

Flex Layout One

+ +

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.

+ +

Flex items laid out as a row with space between them.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Two

+ +

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.

+ +

Flex items laid out as three equal size columns with different amounts of content.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}

+ +

Questions supplémentaires:

+ + + +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Three

+ +

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.

+ +

A box centered inside another box.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Four

+ +

Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
+  

+ +

A set of items displayed as rows.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors mentioned above.

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum. 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.
      • +
    +
    3. +
+ +

{{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.html b/files/fr/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..a4814ac036 --- /dev/null +++ b/files/fr/learn/css/css_layout/floats/index.html @@ -0,0 +1,509 @@ +--- +title: Les boîtes flottantes +slug: Apprendre/CSS/CSS_layout/Floats +tags: + - Article + - Boîtes flottantes + - CSS + - Codage + - Débutant + - Dégagement + - Flotteurs + - Guide + - Mise en page + - colonnes + - multi‑colonne +translation_of: Learn/CSS/CSS_layout/Floats +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
+ +

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float 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.

+ + + + + + + + + + + + +
Prérequis :Les bases du HTML (étudiez Introduction au HTML), et une idée de la manière dont fonctionne CSS (étudiez Introduction au CSS.)
Objectif :Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété clear et autres méthodes de dégagement des boîtes flottantes.
+ +

Contexte de boîtes flottantes

+ +

La propriété float 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.

+ +

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 vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

+ +

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é.

+ +

Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.

+ +

Exemple simple de boîte flottante

+ +

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 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.

+ +

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 :

+ + + +
<h1>Exemple simple de boîte flottante</h1>
+
+<img src="https://mdn.mozillademos.org/files/13340/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>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>
+ +

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):

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

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 :

+ +
.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:

+ +
+ +
+ +

{{ EmbedLiveSample('Float_1', '100%', 500) }}

+ +

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.

+ +

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.

+ +

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.

+ +
.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

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 :

+ +
+ +
+ +

{{ EmbedLiveSample('Float_2', '100%', 500) }}

+ +

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.

+ +

Dégagement des boîtes flottantes

+ +

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")}}.

+ +

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 :

+ +
.cleared {
+  clear: left;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Float_3', '100%', 600) }}

+ +

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 :

+ + + +

Dégagement de boîtes autour d'une boîte flottante

+ +

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.

+ +
<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>
+
+ +

Dans la CSS, ajoutez la règle suivante pour la classe .wrapper et actualisez la page :

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+ +

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.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_4', '100%', 600) }}

+ +

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.

+ +

Le « clearfix hack »

+ +

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.

+ +

Ajoutez ceci à la CSS de notre exemple :

+ +
.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+ +

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.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_5', '100%', 600) }}

+ +

Utilisation du débordement

+ +

Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de wrapper à autre chose que visible.

+ +

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.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_6', '100%', 600) }}

+ +

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.

+ +

« display: flow-root »

+ +

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.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_7', '100%', 600) }}

+ +

Résumé

+ +

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 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.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html new file mode 100644 index 0000000000..c97cc64ba9 --- /dev/null +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -0,0 +1,81 @@ +--- +title: Compréhension fondamentale de la mise en page +slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension +translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +--- +
{{LearnSidebar}}
+ +

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.

+ + + + + + + + + + + + +
Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
+ +

dossier de projet

+ +

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.

+ +

+ +

configuration de base

+ +

Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

+ +

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.htmlfichier 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.

+ +

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.

+ +

+ +

Votre section detâches

+ +

Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

+ +
    +
  1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
    2. +
  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. +
  3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
    4. +
  4. Les éléments <article>et <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. +
  5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
    6. +
+ +

Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

+ + + +

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 #mdn .

+ +

Evaluation

+ +

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 ou sur le canal IRC #mdn sur Mozilla IRC . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!

+ +

Dans ce module Section

+ + diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..4fd7782640 --- /dev/null +++ b/files/fr/learn/css/css_layout/grids/index.html @@ -0,0 +1,715 @@ +--- +title: Grilles +slug: Apprendre/CSS/CSS_layout/Grids +tags: + - Apprendre + - Article + - CSS + - Codage + - Didacticiel + - Débutant + - Guide + - Mise en page + - Trames + - Trames CSS + - quadrillage du design + - structure du quadrillage + - système de trames +translation_of: Learn/CSS/CSS_layout/Grids +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
+ +

« 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.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS et Styles de boîtes).
Objectif :Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».
+ +

Qu'est qu'une disposition en trame ?

+ +

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.

+ +

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.

+ +

Schéma du quadrillage

+ +

Création d'une trame CSS

+ +

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.

+ +

Définition d'une trame

+ +

Pour débuter, téléchargez et ouvrez le fichier de départ 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.

+ +

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 :

+ +
.container {
+    display: grid;
+}
+ +

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.

+ +

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.

+ +
.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}
+ +

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éé.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

+ +

Trames adaptables avec l'unité « fr »

+ +

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.

+ +

En changeant la liste des chaînes par la suivante, on crée trois chaînes de 1fr.

+ +
.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+ +

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 :

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+ +

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.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

+ +
+

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.

+
+ +

Espaces entre pistes

+ +

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.

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+ +

Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité fr.

+ +
+ +
+ +

{{ 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.

+
+ +
.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}
+ +

Répétition des listes de pistes

+ +

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 :

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+ +

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.

+ +

Trame implicite et explicite

+ +

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.

+ +

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.

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

+ +

La fonction minmax()

+ +

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.

+ +

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 :

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}
+ +

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.

+ +

Autant de chaînes que possibles

+ +

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.

+ +

Essayez ceci dans le fichier avec la CSS ci-dessous :

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

+ +

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.

+ +

Placement sur les lignes

+ +

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.

+ +

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 :

+ + + +

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 :

+ + + +

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.

+ +

Pour débuter, téléchargez ce fichier. 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éé.

+ +

À 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 :

+ +
header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

+ +
+

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.

+
+ +

Placer avec « grid-template-areas »

+ +

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.

+ +

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.

+ +
.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+ +

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 !

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

+ +

Les règles pour grid-template-areas sont les suivantes :

+ + + +

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.

+ +

« CSS Grid » : une structure de quadrillage

+ +

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.

+ +

Chargez le fichier de départ. 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.

+ +
header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

+ +

Si vous utilisez Firefox Grid Inspector (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.

+ +

A 12 column grid overlaid on our design.

+ +

Résumé

+ +

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.

+ +

Voir également

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/index.html b/files/fr/learn/css/css_layout/index.html new file mode 100644 index 0000000000..c8ae618a03 --- /dev/null +++ b/files/fr/learn/css/css_layout/index.html @@ -0,0 +1,72 @@ +--- +title: La mise en page avec le CSS +slug: Apprendre/CSS/CSS_layout +tags: + - CSS + - Débutant + - Floating + - Guide + - Landing + - Layout + - Learn + - Module + - Positionnement + - colonne multiple + - flexbox + - float + - grid +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

À ce stade, les principes fondamentaux du CSS ont été vus, comment composer le texte et comment styliser et manipuler les boîtes dans lesquelles se trouve votre contenu. Maintenant, il est 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 examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec le CSS, en regardant les différents paramètres d'affichage, les outils modernes tels « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez déjà :

+ +
    +
  1. connaître les bases du HTML, telles qu'exposées dans le module Introduction au HTML.
    2. +
  2.  être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans Introduction à CSS.
    3. +
  3.  savoir styliser les boîtes.
    4. +
+ +
+

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 un programme de codage en ligne tel que JSBin ou Thimble

+
+ +

Guides

+ +

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.

+ +
+
Introduction à la mise en page CSS
+
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 {{cssxref ("display")}} — et présente certains des concepts que nous couvrirons dans de ce module.
+
Cours normal
+
Les éléments se placent d'eux‑même sur les pages web selon un cours normal — sauf à ce nous fassions quelque chose pour changer cela. Cet article explique les fondamentaux du cours normal pour permettre de comprendre comment le modifier.
+
Flexbox
+
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 tous les fondamentaux.
+
Grilles
+
CSS Grid Layout est un système de mise en page bidimensionnelle pour le web. Il vous permet de disposer le contenu en lignes et en colonnes, et possède de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous donnera tout ce que vous devez savoir pour commencer avec la mise en page.
+
Flotteurs
+
À l'origine, pour les images flottantes à l'intérieur de blocs de texte, la propriété {{cssxref ("float")}} est devenue l'un des outils les plus couramment utilisés pour créer des mises en page sur plusieurs colonnes sur des pages Web. Avec l'avènement de Flexbox et de Grid, il est maintenant revenu à son objectif initial, comme l'explique cet article.
+
Positionnement
+
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 restant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour {{cssxref ("position")}} et comment les utiliser.
+
Disposition sur plusieurs colonnes
+
L'indication d'une disposition sur plusieurs colonnes vous permet de placer le contenu en colonnes, comme vous pouvez le voir sur un journal. Cet article explique comme utiliser cette fonctionnalité.
+
Méthodes de mise en page traditionnelles
+
Les systèmes de grilles sont une fonctionnalité très courante pour les mises en page avec les CSS. Avant la mise en œuvre de « CSS Grid Layout », celle‑ci s'opérait avec des flotteurs ou autres dispositions. Imaginez la mise en page comme un ensemble de colonnes (par ex. 4, 6 ou 12), puis disposez les colonnes de contenu dans ces colonnes imaginaires. 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 ancien.
+
Prise en charge des navigateurs plus anciens
+
+

Dans ce module, nous vous recommandons d'utiliser Flexbox et Grid comme principales méthodes de mise en page pour votre design. 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 priorités données varieront. Cet article explique comment utiliser les techniques modernes du web sans exclure les utilisateurs des anciennes.

+
+
Compréhension des fondamentaux de la mise en page
+
Une évaluation pour tester vos connaissances des différentes méthodes de mise en page Web.
+
+ +

Voir aussi

+ +
+
Exemples pratiques de positionnement
+
 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.html b/files/fr/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..c8ffefec6c --- /dev/null +++ b/files/fr/learn/css/css_layout/introduction/index.html @@ -0,0 +1,716 @@ +--- +title: Introduction à la mise en page en CSS +slug: Apprendre/CSS/CSS_layout/Introduction +tags: + - Apprendre + - Article + - Boîtes flexibles + - CSS + - Débutant + - Flottants + - Flux + - Grille + - Intro + - Mise en page + - Positionnement + - Tableaux +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :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.
+ +

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:

+ + + +

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.

+ +

Cours normal

+ +

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>J'aime mon chat.</p>
+
+<ul>
+  <li>Acheter des croquettes</li>
+  <li>Exercice</li>
+  <li>Haut les cœurs, ami</li>
+</ul>
+
+<p>La fin !</p>
+ +

Par défaut, le navigateur affichera ce code ainsi :

+ +

{{ EmbedLiveSample('Cours_normal', '100%', 200) }}

+ +

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.

+ +

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.

+ +
+

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.

+
+ +

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.

+ +

Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :

+ + + +

La propriété « display »

+ +

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.

+ +

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.

+ +

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.

+ +

Flexbox

+ +

Flexbox est l'abréviation pour 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.

+ +

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.

+ +

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.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

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.

+ +

À 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.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

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.

+
+ +

Disposition en trame

+ +

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.

+ +

À 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.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<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>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

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.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

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.

+
+ +

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.

+ +

Flotteurs (boîtes flottantes)

+ +

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.

+ +

La propriété {{cssxref("float")}} a quatre valeurs possibles :

+ + + +

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.

+ +
+ + +
<h1>Exemple simple de boîte flottante</h1>
+
+<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. 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>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Note : Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés float et clear. 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.

+
+ +

Techniques de positionnement

+ +

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.

+ +

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.

+ +

Il y a cinq types de positionnement à connaître :

+ + + +

Exemple simple de positionnement

+ +

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:

+ +
<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>
+ +

Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+ +

Le rendu est le suivant:

+ +

{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}

+ +

Positionnement relatif

+ +

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 :

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

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.

+ +

Ajouter ce code donne le résultat suivant :

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

+ +

Positionnement absolu

+ +

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.

+ +

En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

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 :

+ +
+ + +
.positioned {
+  position: absolute;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

+ +

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.

+ +

Positionnement fixé

+ +

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.

+ +

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.

+ +
<h1>Positionnement fixé</h1>
+
+<div class="positioned">Fixé</div>
+
+<p>Paragraphe 1.</p>
+<p>Paragraphe 2.</p>
+<p>Paragraphe 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Positionnement collant

+ +

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é.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Note : pour plus de précisions à propos du positionnement, voir l'article Positionnement.

+
+ +

Les tableaux CSS

+ +

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).

+ +

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 ».

+ +

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.

+ +
<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>
+ +

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.

+ +

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.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 400px;
+  color: #999;
+  font-style: italic;
+}
+ +

Ce qui nous donne le résultat suivant:

+ +

{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}

+ +

Vous pouvez également examiner cet exemple directement à css-tables-example.html (voyez le code source également).

+ +

Disposition sur plusieurs colonnes

+ +

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.

+ +

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.

+ +

Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <div> de la classe container.

+ +
<div class="container">
+    <h1>Disposition en colonnes</h1>
+
+    <p>Paragraphe 1.</p>
+    <p>Paragraphe 2.</p>
+
+</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.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Résumé

+ +

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 !

+ +

{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html new file mode 100644 index 0000000000..d778686c58 --- /dev/null +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html @@ -0,0 +1,585 @@ +--- +title: Méthodes de mises en page traditionnelles +slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods +tags: + - Apprendre + - Boîtes flottantes + - CSS + - Disposition + - Débutant + - Guide + - Héritage + - systèmes de trames +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

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.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (voyez Introduction au HTML) et une idée du fonctionnement de CSS (voyez Introduction à CSS et Styles de boîtes).
Objectif: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.
+ +

Mise en page et systèmes de trames avant CSS Grid Layout

+ +

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 ».

+ +

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.

+ +

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.

+ +

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.

+ +

Disposition sur deux colonnes

+ +

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 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.

+ +

Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de body par ceci :

+ +
<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>
+ +

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.

+ +

Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+ +

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 :

+ +
div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}
+ +

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 :

+ +
div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+ +

En mettant tout ensemble, voici le résultat :

+ +
+ +
+ +

{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

+ +

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.

+ +
+

Note : Vous pouvez voir cet exemple en cours à la page 0_two-column-layout.html (voyez aussi son  code source).

+
+ +

Ancienne création d'un cadre de trames

+ +

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.

+ +

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.

+ +

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.

+ +

Une simple trame de largeurs fixes

+ +

Créons d'abord une trame à colonnes à largeur fixe.

+ +

Commençons par faire une copie locale du fichier exemple simple-grid.html qui comporte le balisage suivant dans body.

+ +
<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>
+ +

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.

+ +

+ +

À 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 pour plus d'explications).

+ +
* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}
+ +

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 :

+ +
.row {
+  clear: both;
+}
+ +

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.

+ +

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.

+ +

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.

+ +

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 :

+ +
.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}
+ +

La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.

+ +
+

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.

+
+ +

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.

+ +

Ajoutez ce qui suit en bas de la 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; }
+/* et ainsi de suite... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }
+ +

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.

+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre version terminée sur GitHub (la voir aussi en fonctionnement direct).

+
+ +

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 :

+ +
<div class="row">
+  <div class="col span8">13</div>
+  <div class="col span4">14</div>
+</div>
+ +

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 !

+ +

Creation d'une trame fluide

+ +

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.

+ +

L'équation qui transforme une largeur fixe en pourcentage est la suivante :

+ +
cible / contexte = résultat
+ +

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.

+ +
60 / 960 = 0.0625
+ +

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%.

+ +

En faisant de même pour la largeur de la gouttière :

+ +
20 / 960 = 0.02083333333
+ +

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.

+ +

Mise à jour de la trame

+ +

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 comme point de départ.

+ +

Mettez à jour la deuxième règle CSS (avec le sélecteur .wrapper) comme suit :

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+ +

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.

+ +

Ensuite, mettez à jour les quatre règles CSS (du sélecteur .col) ainsi :

+ +
.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}
+ +

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.

+ +

Mettez à jour le bloc bas des règles CSS avec ce qui suit :

+ +
/* 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%; }
+/* Et ainsi de suite... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }
+ +

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.

+ +
+

Note : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre version terminée sur GitHub (voir aussi celle s'exécutant en direct).

+
+ +

Faciliter les calculs avec la fonction calc()

+ +

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.

+ +

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 :

+ +
.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}
+ +

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 :

+ +
.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)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.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)); }
+ +
+

Note : Vous pouvez voir la version terminée dans fluid-grid-calc.html (la voir aussi  en direct).

+
+ +
+

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.

+
+ +

Systèmes de trames « sémantiques » vs. « non sémantiques »

+ +

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.

+ +

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 :

+ +
.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}
+ +
+

Note : Si vous deviez utiliser un préprocesseur tel que Sass, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.

+
+ +

Décalage du conteneur d'une trame

+ +

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 !

+ +

Essayons.

+ +

Démarrons avec le code précédent ou utilisons le fichier fluid-grid.html comme point de départ.

+ +

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 :

+ +
.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}
+ +

Ou, si vous préférez calculer le pourcentage vous-même, utilisez :

+ +
.offset-by-one {
+  margin-left: 10.41666666%;
+}
+ +

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 :

+ +
<div class="col span6">14</div>
+ +

remplacez‑le par :

+ +
<div class="col span5 offset-by-one">14</div>
+ +
+

Note : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !

+
+ +

Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple fluid-grid-offset.html (voir aussi l'exécution directement). L'exemple terminé doit ressembler à ceci :

+ +

+ +
+

Note : Comme exercice supplémentaire, pouvez‑vous implémenter une classe offset-by-two ?

+
+ +

Limitations des trames de boîtes flottantes

+ +

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.

+ +

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é.

+ +

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..

+ +

Trames Flexbox ?

+ +

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.

+ +

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 :

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}
+ +

Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code flexbox-grid.html (voir aussi en  exécution directe).

+ +

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.

+ +

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.

+ +

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.

+ +

+ +

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.

+ +

Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.

+ +

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.

+ +

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é.

+ +

Systèmes de trame tierces parties

+ +

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 et Foundation 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.

+ +

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.

+ +

Commençons par visiter le site web de Skeleton 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.

+ +

Faites une copie de html-skeleton.html et enregistrez le dans le même répertoire que skeleton.css et normalize.css.

+ +

Incorporez les .css skeleton et normalize dans la page HTML, en ajoutant ce qui suit dans head :

+ +
<link href="normalize.css" rel="stylesheet">
+<link href="skeleton.css" rel="stylesheet">
+ +

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.

+ +
+

Note : Normalize 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 :

+ +
<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.

+ +

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.

+ +
.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+ +

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.

+ +

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.

+ +

Ajoutez maintenant cet extrait de lignes de code :

+ +
<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>
+ +

Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :

+ +
<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>
+ +

Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.

+ +
+

Note : Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier html-skeleton-finished.html (à voir aussi  en exécution directe).

+
+ +

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.

+ +
.three.columns { width: 22%; }
+ +

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.

+ +

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.

+ +

Résumé

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..c82e846273 --- /dev/null +++ b/files/fr/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,425 @@ +--- +title: Guide du débutant des Media Queries +slug: Apprendre/CSS/CSS_layout/Media_queries +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

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.

+ + + + + + + + + + + + +
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps and CSS building blocks.)
Objective:To understand how to use media queries, and the most common approach for using them to create responsive designs.
+ +

Media Query Basics

+ +

The simplest media query syntax looks like this:

+ +
@media media-type and (media-feature-rule) {
+  /* CSS rules go here */
+}
+ +

It consists of:

+ + + +

Media types

+ +

The possible types of media you can specify are:

+ + + +

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.

+ +
@media print {
+    body {
+        font-size: 12pt;
+    }
+}
+ +
+

Note: the media type here is different from the so-called {{glossary("MIME type")}}.

+
+ +
+

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.

+
+ +
+

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.

+
+ +

Media feature rules

+ +

After specifying the type, you can then target a media feature with a rule.

+ +

Width and height

+ +

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.

+ +

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.

+ +
@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

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:

+ +
@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone.

+ +

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.

+ +

Orientation

+ +

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.

+ +
@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

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.

+ +

Use of pointing devices

+ +

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.

+ +
@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

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.

+ +

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.

+ +

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.

+ +

More complex media queries

+ +

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.

+ +

"and" logic in media queries

+ +

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.

+ +
@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

"or" logic in media queries

+ +

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.

+ +
@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

"not" logic in media queries

+ +

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.

+ +
@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

How to choose breakpoints

+ +

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.

+ +

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.

+ +

The 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.

+ +

A screenshot of a layout in a mobile view in Firefox DevTools.

+ +

Active learning: mobile first responsive design

+ +

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.

+ +

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.

+ +

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.

+ +

Walkthrough: a simple mobile-first layout

+ +

Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.

+ +
* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+
+ +

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.

+ +
<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>
+          </aside>
+        </article>
+
+        <aside class="sidebar">
+          <h2>External vegetable-based links</h2>
+          <ul>
+            <li>
+              ...
+            </li>
+          </ul>
+        </aside>
+      </main>
+
+      <footer><p>&copy;2019</p></footer>
+    </div>
+  </body>
+
+ +

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.

+ +

Open step 1 in the browser, or view the source.

+ +

If you want to follow on and implement this example as we go, make a local copy of step1.html on your computer.

+ +

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.

+ +

Add the below code into the bottom of your step1.html CSS.

+ +
@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+
+ +

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.

+ +

Open step 2 in the browser, or view the source.

+ +

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.

+ +

Again, add the below code into the bottom of your step1.html CSS.

+ +
@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}
+
+ +

Open step 3 in the browser, or view the source.

+ +

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:

+ +
<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>
+ +
.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}
+ +

Open the grid layout example in the browser, or view the source.

+ +

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.

+ +

Test your skills!

+ +

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.

+ +

Summary

+ +

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.

+ +

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.

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..b4fb4b03d7 --- /dev/null +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,415 @@ +--- +title: Disposition sur plusieurs colonnes +slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout +tags: + - Apprendre + - Apprentissage + - CSS + - Colonnes multiples + - Disposition + - Débutant + - Guide + - Multi-col +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.
+ +

Un exemple élémentaire

+ +

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 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.

+ +

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.

+ +

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 :

+ +
.container {
+  column-count: 3;
+}
+
+ +

Les colonnes créées sont de largeur variable — le navigateur colcule automatiquement l'espace à donner à chacune d'entre elles.

+ +
+ + +
<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.
+  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>
+</div>
+
+ +
.container {
+  column-count: 3;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

+ +

Modifiez la CSS pour utiliser column-width ainsi :

+ +
.container {
+  column-width: 200px;
+}
+
+ +

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.

+ +
+ + +
.container {
+  column-width: 200px;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

+ +

Style des colonnes

+ +

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 :

+ + + +

En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété column-gap :

+ +
.container {
+  column-width: 200px;
+  column-gap: 20px;
+}
+ +

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.

+ +
.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}
+ +

Ajoutons des règles pour les divers styles et couleurs.

+ +
+ +
+ +

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

+ +

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.

+ +

Colonnes et coupures

+ +

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.

+ +

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.

+ +
+ + +
<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>
+
+    <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
+                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
+                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
+                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
+                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
+                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>
+
+ +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

+ +

Pour contrôler ce comportement, utilisons les propriétés stipulées dans 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.

+ +

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.

+ +
.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

Actualisez la page et les boîtes devraient rester entières.

+ +
+ + +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

+ +

Résumé

+ +

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.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/normal_flow/index.html b/files/fr/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..c3d51d3313 --- /dev/null +++ b/files/fr/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,108 @@ +--- +title: Cours normal +slug: Apprendre/CSS/CSS_layout/Normal_Flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}

+ +

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.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont les CSS fonctionnent (étudiez Introduction aux CSS).
Objectif :Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.
+ +

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.

+ +

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.

+ +

Disposition des éléments par défaut

+ +

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.

+ +

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).

+ +

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.

+ +

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.

+ +

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.

+ +

Voici un exemple simple expliquant cela :

+ +
+
<h2>Cours d'un document de base</h2>
+
+<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>
+
+<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>
+
+<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>
+
+<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
+ sont placés sur une nouvelle ligne, comme cette image :
+ <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Résumé

+ +

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.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/positioning/index.html b/files/fr/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..54349c6fef --- /dev/null +++ b/files/fr/learn/css/css_layout/positioning/index.html @@ -0,0 +1,558 @@ +--- +title: Le positionnement +slug: Apprendre/CSS/CSS_layout/Le_positionnement +tags: + - Agencement + - Article + - CSS + - Codage de script + - Disposition + - Débutant + - Guide + - Mise en page + - Positionnement + - absolu + - fixe + - relatif + - statique +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Savoir comment fonctionne le positionnement avec les CSS.
+ +

Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de 0_basic-flow.html sur le dépôt Github (code source ici) et utilisez-le comme point de départ.

+ +

Introduction au positionnement

+ +

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.

+ +

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")}}.

+ +

Positionnement « static »

+ +

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 ».

+ +

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:

+ +
<p class="positioned"> ... </p>
+ +

Puis ajoutez la règle suivante au bas de votre CSS:

+ +
.positioned {
+  position: static;
+  background: yellow; }
+ +

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 !

+ +
+

Remarque : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».

+
+ +

Positionnement « relative »

+ +

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 :

+ +
position: relative;
+ +

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.

+ +

Présentation de « top », « bottom », « left » et « right »

+ +

{{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 :

+ +
top: 30px;
+left: 30px;
+ +
+

Remarque : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.

+
+ +

Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :

+ +
+ +
+ +

{{ EmbedLiveSample('example_1', '100%', 500) }}

+ +

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.

+ +
+

Remarque: à ce stade de l'article, vous pouvez retrouver un exemple ici 2_relative-positioning.html (voir le code source).

+
+ +

Positionnement « absolute »

+ +

Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de position dans le code :

+ +
position: absolute;
+ +

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :

+ +
+ +
+ +

{{ EmbedLiveSample('example_2', '100%', 420) }}

+ +

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.

+ +

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)

+ +
+

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...

+
+ +
+

Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.

+
+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).

+
+ +

Contextes de positionnement

+ +

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.

+ +

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:

+ +
position: relative;
+ +

Cela devrait donner le résultat suivant:

+ +
+ +
+ +

{{ EmbedLiveSample('example_3','100%', 420) }}

+ +

À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.

+ +
+

Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).

+
+ +

Présentation du z-index

+ +

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 ?

+ +

Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

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.

+ +

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).

+ +

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.

+ +

Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle p:nth-of-type(1) :

+ +
z-index: 1;
+ +

Voici maintenant l'exemple terminé :

+ +
+ +
+ +

{{ EmbedLiveSample('example_4', '100%', 400) }}

+ +

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.

+ +
+

Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).

+
+ +

Positionnement « fixed »

+ +

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.

+ +

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.

+ +

Maintenant, mettez à jour la règle body : supprimez la déclaration position : relative ; et ajoutez une hauteur fixe, ainsi :

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

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 :

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

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.

+ +

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:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

Voici l'exemple terminé :

+ +
+ +
+ +

{{ EmbedLiveSample('example_5', '100%', 400) }}

+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).

+
+ +

« 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.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +

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 :

+ +
<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.

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Sticky_2', '100%', 200) }}

+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).

+
+ +

Résumé

+ +

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é.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

+ +

Voir aussi

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.html b/files/fr/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..da821fefd1 --- /dev/null +++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,407 @@ +--- +title: Exemples pratiques de positionnement +slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +
{{LearnSidebar}}
+ +


+ Cet article montre comment construire quelques exemples réels de choses que vous pouvez faire avec le positionnement.

+ + + + + + + + + + + + +
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (étudier Introduction au CSS.)
Objectif:Avoir une idée des aspects pratiques du positionnement
+ +

Une boîte d'information à onglets

+ +

Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une fonction très courante utilisée lorsque vous voulez 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ù vous pourriez vouloir rendre beaucoup d'informations disponibles sans qu'elles remplissent toute l'interface utilisateur. Notre exemple simple ressemblera à ceci une fois que nous aurons terminé :

+ +

+ +
+

Note: You can see the finished example running live at info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
+ +

Vous pourriez vous dire "pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que les onglets permettent de cliquer sur les pages séparées pour créer l'effet ?" Ce code serait plus simple, oui, mais alors 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 " 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.

+ +
+

Note: Some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a JavaScript feature such as XMLHttpRequest. At this point in your learning however we want to keep things as simple as possible. There is some JavaScript later on, but only a tiny bit.

+
+ +

Pour commencer, nous aimerions que vous fassiez une copie locale du fichier HTML de départ — 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 body:

+ +
<section class="info-box">
+  <ul>
+    <li><a href="#" class="active">Tab 1</a></li>
+    <li><a href="#">Tab 2</a></li>
+    <li><a href="#">Tab 3</a></li>
+  </ul>
+  <div class="panels">
+    <article class="active-panel">
+      <h2>The first tab</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>The second tab</h2>
+
+      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
+    </article>
+    <article>
+      <h2>The third tab</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</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>
+ +

Nous avons un élément {{htmlelement("section")}}  avec une class  info-box, qui contient une {{htmlelement("ul")}} et une {{htmlelement("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. la div contient trois éléments {{htmlelement("article")}} , qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.

+ +

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'un onglet est pressé, 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 dès que possible - plus les fonctionnalités de votre interface utilisateur deviennent complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.

+ +

General setup

+ +

To begin with, add the following between your opening and closing {{HTMLElement("style")}} tags:

+ +
html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+ +

This is just some general setup to set a sans-serif font on our page, use the border-box {{cssxref("box-sizing")}} model, and get rid of the default {{htmlelement("body")}} margin.

+ +

Next, add the following just below your previous CSS:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}
+ +

This sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick. Previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. It also looks a bit jarring to have different tabs at different heights.

+ +

Styling our tabs

+ +

Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to remove the default {{cssxref("padding-left")}} and {{cssxref("margin-top")}} from the unordered list:

+ +
.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+ +
+

Note: We are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.

+
+ +

Next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their {{cssxref("list-style-type")}} is set to none to get rid of the bullets, and their {{cssxref("width")}} is set to 150px so they will comfortably fit across the info-box. The {{htmlelement("a")}} elements are set to {{cssxref("display")}} inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties.

+ +

Add the following CSS:

+ +
.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}
+ +

Finally for this section we'll set some styles on the link states. First, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a class of active is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:

+ +
.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}
+ +

Styling the panels

+ +

The next job is to style our panels. Let's get going!

+ +

First, of all, add the following rule to style the .panels {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} relative to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.

+ +
.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}
+ +

Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.

+ +

The second rule we'll add here makes it so that a panel with a class of active-panel set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a z-index of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.

+ +
.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}
+ +

Adding our JavaScript

+ +

The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):

+ +
var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i < tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i < tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i < panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}
+ +

This code does the following:

+ + + +

That's it for the first example. Keep your code open, as we'll be adding to it in the second one.

+ +

A fixed position tabbed info-box

+ +

In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:

+ +

+ +
+

Note: You can see the finished example running live at fixed-info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
+ +

As a starting point, you can use your completed example from the first section of the article, or make a local copy of info-box.html from our Github repo.

+ +

HTML additions

+ +

First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:

+ +
<section class="fake-content">
+  <h1>Fake content</h1>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+</section>
+ +
+

Note: You can feel free to change the fake content for some real content if you like.

+
+ +

Changes to the existing CSS

+ +

Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box centered), add {{cssxref("position")}}: fixed;, and stick it to the {{cssxref("top")}} of the browser viewport.

+ +

It should now look like this:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}
+ +

Styling the main content

+ +

The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:

+ +
.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}
+ +

To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.

+ +

This marks the end of the second example; we hope you'll find the third just as interesting.

+ +

A sliding hidden panel

+ +

The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.

+ +

Our finished example will look like this:

+ +

+ +
+

Note: You can see the finished example running live at hidden-info-panel.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
+ +

As a starting point, make a local copy of hidden-info-panel-start.html from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:

+ +
<label for="toggle">❔</label>
+<input type="checkbox" id="toggle">
+<aside>
+
+  ...
+
+</aside>
+ +

To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <input> checkbox using the for and id attributes.

+ +
+

Note: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.

+
+ +

Here we are going to use these elements for a slightly different purpose — another useful side effect of <label> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known checkbox hack, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).

+ +

In the below sections we'll explain how this all works.

+ +

Styling the form elements

+ +

First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:

+ +
label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}
+ +

The first rule styles the <label>; here we've:

+ + + +

The second rule sets {{cssxref("position")}} absolute on the actual checkbox <input> element, and hides it off the top of the screen. We don't actually want to see this on our UI.

+ +

Styling the panel

+ +

Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:

+ +
aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 100%;
+  padding: 0 20px;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}
+ +

There's a lot going on here — let's discuss it bit by bit:

+ + + +

Setting the checked state

+ +

There is one final bit of CSS to add — put the following at the bottom of your CSS:

+ +
input[type=checkbox]:checked + aside {
+  right: 0px;
+}
+ +

The selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the <aside> to 0px, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.

+ +

So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.

+ +

Summary

+ +

So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..323df1a7f6 --- /dev/null +++ b/files/fr/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,334 @@ +--- +title: Responsive design +slug: Apprendre/CSS/CSS_layout/Responsive_Design +tags: + - Images + - Media Queries + - RWD + - Responsive web design + - Typographie + - flexbox + - grid + - grille fluide +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (édutier Premiers pas en CSS et Blocs de base en CSS.)
Objectif:Comprendre les concepts fondamentaux et l'histoire du responsive design.
+ +

Historique de la mise en page des sites Web

+ +

A une époque, vous aviez deux options pour concevoir un site Web :

+ + + +

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.

+ +
Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile. +
+
+ +
+

Note: Voir cette simple mise en page "liquide" : exemple, code source. 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.

+
+ +

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.

+ +
Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile. +
+
+ +
+

Note: Voir cette simple mise en page à largeur fixe : exemple, code source. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.

+
+ +
+

Note: Les captures d'écran ci-dessus sont réalisées à l'aide de la Vue adaptative de la boîte à outils de Firefox.

+
+ +

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.

+ +

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.

+ +

Mise en page flexible avant le responsive design

+ +

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 (EN), 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.

+ +

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.

+ +

Responsive design

+ +

Le terme de responsive design a été inventé par Ethan Marcotte en 2010, et décrit la combinaison de trois techniques.

+ +
    +
  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 (publié en 2009 sur A List Apart).
    2. +
  2. La deuxième technique était l'idée d'images fluides. 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. +
  3. Le troisième élément clé était la media query. 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.
    4. +
+ +

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.
+
+ 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.

+ +

Media Queries

+ +

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.

+ +

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.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

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.

+ +

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é.

+ +

Pour en savoir plus, consultez la documentation MDN pour les Media Queries.

+ +

Grilles flexibles

+ +

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.

+ +

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.

+ +

Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser 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.

+ +
target / context = result 
+
+ +

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.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

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. 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.

+ +

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 :
+  

+ +
A mobile view of the layout with boxes stacked on top of each other vertically. +
+
+ +

Sur des écrans plus larges, ils se positionnent sur deux colonnes :

+ +
A desktop view of a layout with two columns. +
+
+ +
+

Note: Vous pouvez trouver l'exemple en direct et le code source pour cet exemple sur GitHub.

+
+ +

Techniques modernes de mise en page

+ +

Les méthodes de mise en page modernes telles que Multiple-column layout, Flexbox, et Grid 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.

+ +

Multicol

+ +

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.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

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.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

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.

+ +

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.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

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, code source.

+
+ +

CSS grid

+ +

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".

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Note: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : exemple, code source.

+
+ +

Images responsives

+ +

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 :

+ +
img {
+  max-width: 100%:
+} 
+
+ +

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.

+ +

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.

+ +

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.

+ +

Vous pouvez trouver un guide détaillé sur les Images Responsives dans la section Apprendre le HTML ici sur MDN.

+ +

Typographie responsive

+ +

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.

+ +

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.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

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.

+ +

Sur un mobile, le titre est plus petit :

+ +
A stacked layout with a small heading size. +
+
+ +

Sur le bureau cependant, nous voyons la plus grande taille de titre :

+ +
A two column layout with a large heading. +
+
+ +
+

Note: Voir cet exemple en action : exemple, code source.

+
+ +

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.

+ +

Utilisation d'unités de visualisation pour une typographie réactive

+ +

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.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

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.

+ +

Il existe une solution, et elle consiste à utiliser calc(). Si vous ajoutez l'unité vw à un ensemble de valeurs utilisant une taille fixe telle que ems ou rems, le texte sera toujours zoomable. En fait, l'unité vw s'ajoute à cette valeur zoomée :

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

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.

+ +
+

Voir un exemple de cela en action : exemple, code source.

+
+ +

Le méta-tag du viewport

+ +

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.

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

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.

+ +

Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.

+ +

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.

+ +

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.

+ +

Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.

+ +

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.

+ + + +

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é.

+ +
+

Note: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — @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.

+
+ +

Sommaire

+ +

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.

+ +

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.

+ +

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..c56a030d08 --- /dev/null +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: Prise en charge des anciens navigateurs +slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.

+ + + + + + + + + + + + +
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study Introduction to CSS and Styling boxes.)
Objective:To understand how to provide support for your layouts on older browsers that might not support the features you want to use.
+ +

What is the browser landscape for your site?

+ +

Every website is different in terms of target audience. Before deciding on the approach to take, find out the number of visitors coming to your site using older browsers. This is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. If you have no analytics or this is a brand new site, then there are sites such as Statcounter that can provide statistics filtered by location.

+ +

You should also consider the type of devices and the way people use your site, for example, you may expect a higher than an average number of mobile devices. Accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical. In my experience, developers are often very worried about the experience of 1% of users in an old version of Internet Explorer, while not considering at all the far greater number who have accessibility needs.

+ +

What is the support for the features you want to use?

+ +

Once you know the browsers that come to your site, you can assess any technology that you want to use against how well it is supported and how easily you can provide an alternative for visitors who do not have that technology available. We are trying to make this easy for you at MDN, by providing browser compatibility information on each page detailing a CSS property. For example, take a look at the page for {{cssxref("grid-template-columns")}}. At the bottom of this page is a table, which lists major browsers along with the version they began supporting this property.

+ +

+ +

Another popular way to find out about how well a feature is supported is the Can I Use website. This site lists the majority of Web Platform features with information about their browser support status. You can view usage statistics by location — useful if you work on a site that has users mostly for a specific area of the world. You can even link your Google Analytics account to get analysis based on your user data.

+ +

Understanding the technology your users have, and the support for things you might want to use puts you in a good place to make all of your decisions and to know how best to support all of your users.

+ +

Support doesn't mean "looks the same"

+ +

A website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.

+ +

A basic level of support comes from structuring your content well so that the normal flow of your page makes sense. A user with a very limited feature phone might not get much of your CSS, but the content will flow in a way that makes reading easy. Therefore, a well-structured HTML document should always be your starting point. If you remove your stylesheet, does your content make sense?

+ +

One option is to leave this plain view of the site as the fallback for people using very old or limited browsers. If you have a tiny number of people coming to the site in these browsers it may not make commercial sense to pour time into trying to give them a similar experience to people on modern browsers. It would be better to spend the time on things which make the site more accessible, thus serving far more users. There is a middle ground between a plain HTML page and all the bells and whistles, and CSS has actually made creating these fallbacks pretty straightforward.

+ +

Creating fallbacks in CSS

+ +

CSS specifications contain information that explains what the browser does when two layout methods are applied to the same item. This means that there is a definition for what happens if a floated item, for example, is also a Grid Item using CSS Grid Layout. Couple this information with the knowledge that browsers ignore CSS that they don’t understand, and you have a way to create simple layouts using the legacy techniques we have already covered, which are then overwritten by your Grid layout in modern browsers that understand it.

+ +

In the below example, we have floated three <div>s so they display in a row. Any browser that does not support CSS Grid Layout will see the row of boxes as a floated layout. A floated item that becomes a grid item loses the float behaviour, which means that by turning the wrapper into a Grid Container, the floated items become Grid Items. If the browser supports Grid Layout it will display the grid view, if not it ignores the anddisplay: grid related properties and the floated layout is used.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example1', '100%', '200') }}

+
+ +
+

Note: The {{cssxref("clear")}} property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a Grid Layout.

+
+ +

Fallback Methods

+ +

There are a number of layout methods which can be used in a similar way to this float example. You can choose the one that makes the most sense for the layout pattern you need to create.

+ +
+
Float and clear
+
As shown above, the float and clear properties cease to affect the layout if floated or cleared items become flex or grid items.
+
display: inline-block
+
This method can be used to create column layouts, if an item has display: inline-block set but then becomes a flex or grid item, the inline-block behaviour is ignored.
+
display: table
+
The method of creating CSS Tables described in the introduction to these lessons can be used as a fallback. Items that have CSS table layouts set on them will lose this behaviour if they become flex or grid items. Importantly, the anonymous boxes created to fix up the table structure are not created.
+
Multiple-column Layout
+
For certain layouts you could use multi-col as a fallback, if your container has any of the column-* properties defined on it and then becomes a grid container, the multicol behaviour will not happen.
+
Flexbox as a Fallback for Grid
+
Flexbox has greater browser support than Grid due to being supported by IE10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for Flexbox in older browsers. If you make a flex container into a grid container, any flex property applied to the children will be ignored.
+
+ +

For many layout tweaks in older browsers, you may find you can give a decent experience by using CSS in this way. We add a simpler layout based on older and well-supported techniques, then use the newer CSS to create the layout that over 90% of your audience will see. There are cases, however, when the fallback code will need to include something that the new browsers will also interpret. A good example of this is if we were to add percentage widths to our floated items to make the columns more like the grid display, stretching to fill the container.

+ +

In the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. In Grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the Grid Layout is introduced.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example2', '100%', '200') }}

+
+ +

To deal with this issue we need to have a way to detect if Grid is supported and therefore if it will override the width. CSS has a solution for us here.

+ +

Feature queries

+ +

Feature queries allow you to test whether a browser supports any particular CSS feature. This means that you can write some CSS for browsers that don’t support a certain feature, then check to see if the browser has support and if so throw in your fancy layout.

+ +

If we add a feature query to the above example, we can use it to set the widths of our items back to auto  if we know that we have grid support.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example3', '100%', '200') }}

+
+ +

Support for feature queries is very good across modern browsers, however, you should note that it is the browsers that do not support CSS Grid, which also doesn’t support feature queries. This means that an approach as detailed above will work for those browsers. What we are doing is writing our old CSS first, outside of any feature query. Browsers that do not support Grid, and do not support the feature query will use that layout information they can understand and completely ignore everything else. The browsers that support the feature query also support CSS Grid and so will run the grid code and the code inside the feature query.

+ +

The specification for feature queries also contains the ability to test if a browser does not support a feature — this is only helpful if the browser does support feature queries. In the future, an approach of checking for lack of support will work, as the browsers that don’t have feature query support go away. For now, however, use the approach of doing the older CSS, then overwriting it, for the best support.

+ +

Older versions of Flexbox

+ +

In older versions of browsers, you can find previous iterations of the Flexbox specification. At the time of writing, this is mostly an issue with Internet Explorer 10, which uses the -ms-  prefix for Flexbox. This also means that there are some outdated articles and tutorials in existence; this useful guide helps you check what you are looking at and can also help if you need flex support in very old browsers.

+ +

The IE10 and 11 prefixed version of Grid

+ +

The CSS Grid specification was initially prototyped In Internet Explorer 10; this means that while IE10 and IE11 do not have modern grid support, they do have a version of Grid layout that is very usable, although different to the modern specification documented on this site. The IE10 and 11 implementations is  -ms- prefixed, which means you can use it for these browsers and it will be ignored by non-Microsoft browsers. Edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid CSS.

+ +

The guide to Progressive Enhancement in Grid Layout can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers.

+ +

Testing older browsers

+ +

With the majority of browsers supporting Flexbox and Grid, it can be reasonably hard to test older browsers. One way is to use an online testing tool such as Sauce Labs, as detailed in the Cross browser testing module.

+ +

You can also download and install Virtual Machines, and run older versions of browsers in a contained environment on your own computer. Having access to older versions of Internet Explorer is particularly useful, and for that purpose, Microsoft has made a range of Virtual Machines available for free download. These are available for Mac, Windows and Linux operating systems and so are a great way to test in old and modern Windows browsers even if you are not using a Windows computer.

+ +

Summary

+ +

You now have the knowledge to confidently use techniques such as Grid and Flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future.

+ +

See Also

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html b/files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html deleted file mode 100644 index 0b4bfefc33..0000000000 --- a/files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Qu'est ce que CSS ? -slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS -tags: - - Apprendre - - CSS - - Débutant - - Modules - - Specifications - - Syntaxe -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

{{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.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Apprendre ce qu'est CSS.
- -

Dans le cours 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.

- -

La mise en forme par défaut appliquée par un navigateur.

- -

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.

- -

Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :

- -

{{EmbedYouTube("spK_S0HfzFw")}}

- -

À quoi sert CSS ?

- -

Comme mentionné plus haut, CSS est un langage de mise en forme des documents. 

- -

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")}}.

- -

"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.

- -
-

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.

-
- -

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne 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. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

- -

Syntaxe de CSS

- -

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.

- -

Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."

- -

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

- -
h1 {
-  color: red;
-  font-size: 5em;
-}
- -

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")}}).

- -

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>. La propriété font-size accepte différentes tailles comme valeurs.

- -

Une feuille de style CSS est constituée d'une succession de telles règles :

- -
h1 {
-  color: red;
-  font-size: 5em;
-}
-
-p {
-  color: black;
-}
- -

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.

- -
-

Note : Sur MDN, dans la référence CSS, 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" !

-
- -

Modules CSS

- -

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, 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).

- -

À 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).

- -

Prenons un exemple précis et revenons au module Backgrounds and Borders — les propriétés background-color et border-color qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.

- -

Spécifications CSS

- -

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.

- -

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). 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.

- -

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 ! 

- -

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).

- -

Prise en charge par les navigateurs

- -

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.

- -

Nous étudierons ce point plus en détail dans l'article sur le fonctionnement de CSS. 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.

- -

Voici par exemple le tableau de compatibilité pour la propriété font-family.

- -

{{Compat("css.properties.font-family")}}

- -

Où continuer

- -

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.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

Dans ce cours

- -
    -
  1. Qu'est-ce que CSS ?
    2. -
  2. Démarrer avec CSS
    3. -
  3. La façon dont CSS est structuré
    4. -
  4. Le fonctionnement de CSS
    5. -
  5. Mettre en œuvre vos nouvelles connaissances
    6. -
diff --git a/files/fr/learn/css/first_steps/what_is_css/index.html b/files/fr/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..0b4bfefc33 --- /dev/null +++ b/files/fr/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,132 @@ +--- +title: Qu'est ce que CSS ? +slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS +tags: + - Apprendre + - CSS + - Débutant + - Modules + - Specifications + - Syntaxe +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

{{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.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Apprendre ce qu'est CSS.
+ +

Dans le cours 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.

+ +

La mise en forme par défaut appliquée par un navigateur.

+ +

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.

+ +

Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :

+ +

{{EmbedYouTube("spK_S0HfzFw")}}

+ +

À quoi sert CSS ?

+ +

Comme mentionné plus haut, CSS est un langage de mise en forme des documents. 

+ +

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")}}.

+ +

"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.

+ +
+

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.

+
+ +

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne 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. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

+ +

Syntaxe de CSS

+ +

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.

+ +

Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."

+ +

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

+ +
h1 {
+  color: red;
+  font-size: 5em;
+}
+ +

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")}}).

+ +

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>. La propriété font-size accepte différentes tailles comme valeurs.

+ +

Une feuille de style CSS est constituée d'une succession de telles règles :

+ +
h1 {
+  color: red;
+  font-size: 5em;
+}
+
+p {
+  color: black;
+}
+ +

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.

+ +
+

Note : Sur MDN, dans la référence CSS, 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" !

+
+ +

Modules CSS

+ +

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, 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).

+ +

À 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).

+ +

Prenons un exemple précis et revenons au module Backgrounds and Borders — les propriétés background-color et border-color qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.

+ +

Spécifications CSS

+ +

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.

+ +

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). 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.

+ +

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 ! 

+ +

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).

+ +

Prise en charge par les navigateurs

+ +

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.

+ +

Nous étudierons ce point plus en détail dans l'article sur le fonctionnement de CSS. 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.

+ +

Voici par exemple le tableau de compatibilité pour la propriété font-family.

+ +

{{Compat("css.properties.font-family")}}

+ +

Où continuer

+ +

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.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

Dans ce cours

+ +
    +
  1. Qu'est-ce que CSS ?
    2. +
  2. Démarrer avec CSS
    3. +
  3. La façon dont CSS est structuré
    4. +
  4. Le fonctionnement de CSS
    5. +
  5. Mettre en œuvre vos nouvelles connaissances
    6. +
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html new file mode 100644 index 0000000000..8e6fdc1761 --- /dev/null +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.html @@ -0,0 +1,314 @@ +--- +title: Créer de belles boîtes +slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto/create_fancy_boxes +--- +

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.

+ +

Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.

+ +

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.

+ +

Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :

+ +
<div class="joli">Coucou ! Je veux être joli.</div>
+ +

Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?

+ + + +

En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.

+ +

Jouer avec le modèle de boîte

+ +

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.

+ +

Créer des cercles

+ + + +

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 ?

+ +
.joli {
+  /* Mieux vaut centrer le texte dans un
+     cercle. */
+  text-align : center;
+
+  /* On fait attention à ce que le texte
+     ne touche pas la bordure. On placera
+     donc le texte avec un remplissage, ce
+     qui donnera une meilleure impression
+     pour le cercle. */
+  padding : 1em;
+
+  /* La bordure marquera le cercle. On
+     pourrait également utiliser un arrière-
+     plan car celui-ci aurait été contenu
+     par border-radius */
+  border : 0.5em solid black;
+
+  /* Assurons-nous que la boîte soit carrée
+     pour obtenir un cercle bien rond plutôt
+     qu'une ellipse ;) */
+  width  : 4em;
+  height : 4em;
+
+  /* Enfin, transformons le carré en cercle */
+  border-radius: 100%;
+}
+ +

Et voilà comment on obtient un cercle :

+ +

{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}

+ +

Les arrière-plans

+ +

Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.

+ +

Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :

+ + + + + +

Passons à la manipulation :

+ +
.joli {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* La couche la plus basse sera
+     peinte avec un gris clair uni */
+  background-color: #E4E4D9;
+
+  /* Ensuite on applique des gradients
+     linéaires les uns sur les autres
+     pour créer un effet de bandes colorées.
+     Comme vous pouvez le voir, les gradients
+     sont considérés et manipulés comme des
+     images */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    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%);
+}
+ +

{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}

+ +
+

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. 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é.

+
+ +

Les pseudo-éléments

+ +

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.

+ +

Un nuage

+ + + +

Voici un exemple qui illustre comment transformer la boîte en nuage :

+ +
.joli {
+  text-align: center;
+
+  /* On utilise la même astuce que pour
+     cercles vus avant */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* On fait de la place pour les « oreilles »
+     du nuage */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* Enfin, le cercle n'est pas tout à fait complet
+     car on veut que la base soit plate.
+     Vous pouvez adapter ici comme bon vous semble
+     si vous souhaitez que la base ne soit pas
+     linéaire */
+  border-radius: 100% 100% 0 0;
+}
+
+/* Voici les styles qu'on appliquera aux deux
+   pseudo-éléments ::before et ::after. */
+.joli::before,
+.joli::after {
+  /* Cette déclaration est nécessaire pour afficher
+     les pseudo-éléments même si leur valeur est la
+     chaîne vide */
+  content: '';
+
+  /* On positionne les pseudo-éléments à droite et à
+     gauche de la boîte mais toujours en bas */
+  position: absolute;
+  bottom  : 0;
+
+  /* On s'assure que les pseudo-éléments passent sous
+     le contenu qu'il y aurait. */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.joli::before {
+  /* Voici la taille pour l'oreille gauche
+     du nuage */
+  width  : 125px;
+  height : 125px;
+
+  /* On la décale un peu à gauche */
+  left    : -80px;
+
+  /* Pour que le bas du nuage reste droit, il
+     faut s'assurer que le coin en bas à gauche
+     soit bien un angle droit. */
+  border-bottom-right-radius: 0;
+}
+
+.joli::after {
+  /* Voici la taille pour l'oreille droite */
+  width  : 100px;
+  height : 100px;
+
+  /* On la décale un peu à droite */
+  right   : -60px;
+
+ /* Pour que le bas du nuage reste droit, il
+    faut s'assurer que le coin en bas à droite
+    soit bien un angle droit. */
+  border-bottom-left-radius: 0;
+}
+ +

{{EmbedLiveSample('Un_nuage', '100%', '160') }}

+ +

Une citation

+ +

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 :

+ +
<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>
+ +

Voici la feuille de style que nous allons utiliser :

+ +
blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}
+ +

{{EmbedLiveSample('Une_citation', '100%', '300')}}

+ +

L'assemblage

+ +

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 :

+ + + +

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.

+ +
.joli {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.joli::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}
+ +

{{EmbedLiveSample("L'assemblage", '100%', '100')}}

+ +

La suite

+ +

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. 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.

diff --git a/files/fr/learn/css/howto/css_faq/index.html b/files/fr/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..0d62552798 --- /dev/null +++ b/files/fr/learn/css/howto/css_faq/index.html @@ -0,0 +1,246 @@ +--- +title: Questions fréquentes en CSS +slug: Web/CSS/CSS_questions_frequentes +tags: + - CSS + - Débutant + - Exemple + - Guide +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

+ +

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.

+ +

Les navigateurs modernes ont deux modes de rendu :

+ + + +

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

+ +

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

+ +
<!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.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 Strict//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ +

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

+ +

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.

+ +

Quelle est la différence entre id et class ?

+ +

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.

+ +

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.

+ +

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

+ +

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.

+ +

Voire Les sélecteurs CSS.

+ +

Comment revenir à la valeur par défaut d'un propriété ?

+ +

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.

+ +

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

+ +

Comment créer un style dérivant d'un autre ?

+ +

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. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

+ +

Comment  assigner de multiples classes à un élément?

+ +

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.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

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.

+ +

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

+ +

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.

+ +

Hiérarchie des éléments HTML

+ +

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.

+ +
.news {
+  color: black;
+}
+
+.corpName {
+  font-weight: bold;
+  color: red;
+}
+
+ +
<!-- 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>
+  (GE.NYS) announced on Thursday...
+</div>
+
+ +

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.

+ +

L'ordre et la redéfinition des règles

+ +

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.

+ +
#stockTicker {
+  font-weight: bold;
+}
+.stockSymbol {
+  color: red;
+}
+/*  D'autres règles             */
+/*  D'autres règles             */
+/*  D'autres règles             */
+.stockSymbol {
+  font-weight: normal;
+}
+
+ +

 

+ +
<!-- 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>
+
+
+ +

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.

+ +

Utiliser les propriétés raccourcies

+ +

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.

+ +
#stockTicker {
+  font-size: 12px;
+  font-family: Verdana;
+  font-weight: bold;
+}
+
+.stockSymbol {
+  font: 14px Arial;
+  color: red;
+}
+
+ +
<div id="stockTicker">
+  NYS:
+  <span class="stockSymbol">
+    GE
+  </span>
+  +1.0 ...
+</div>
+ +

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.

+ +
#stockTicker {
+  font-weight: bold;
+  font: 12px Verdana;
+  /* font-weight vaut maintenant normal */
+}
+
+ +

Utiliser le sélecteur *

+ +

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

+ +
body * {
+  font-weight: normal;
+}
+
+#stockTicker {
+  font: 12px Verdana;
+}
+
+.corpName {
+  font-weight: bold;
+}
+
+.stockUp {
+  color: red;
+}
+
+ +
<div id="section">
+  NYS:
+  <span class="corpName">
+    <span class="stockUp">
+      GE
+    </span>
+  </span>
+  +1.0 ...
+</div>
+ +

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.

+ +

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.

+ +

La spécificité en CSS

+ +

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. 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.

+ +
div {
+  color: black;
+}
+
+#orange {
+  color: orange;
+}
+
+.green {
+  color: green;
+}
+
+ +
<div id="orange" class="green" style="color: red;">
+  Voici quelque chose qui sera rouge.
+</div>
+ +

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 ou le chapitre correspondant de la section Apprendre.

+ +

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

+ +

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é.

+ +

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.

+ +

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

+ +

Quel est l'impact de z-index sur le positionnement des éléments ?

+ +

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

+ +

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

+ +

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.html b/files/fr/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..a8b6860177 --- /dev/null +++ b/files/fr/learn/css/howto/generated_content/index.html @@ -0,0 +1,159 @@ +--- +title: Contenu +slug: Apprendre/CSS/Comment/Generated_content +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Howto/Generated_content +--- +

 

+

Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.

+

Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.

+

Information : contenu

+

Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document

+

Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.

+ + + + + + + +
+ Plus de détails
Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. +

Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.

+

Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.

+
+

Contenu textuel

+

CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez :before ou :after au sélecteur. Dans la déclaration, spécifiez la propriété content en lui donnant comme valeur le contenu textuel.

+ + + + + + + +
+ Exemple
Cette règle ajoute le texte Référence : devant chaque élément de la classe ref : +
+ 
+.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Référence : ";
+  }
+
+
+
+ + + + + + + +
+ Plus de détails
Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez 4.4 CSS style sheet representation dans la spécification CSS. +

Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez Referring to characters not represented in a character encoding, ainsi que Characters and case dans la spécification CSS.

+
+

Contenu sous forme d'images

+

Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété content.

+ + + + + + + +
+ Exemple
Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe glossaire: +
+ 
+a.glossaire:after {content: " " url("../images/glossary-icon.gif");}
+
+
+
+


+ Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété background. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.

+ + + + + + + +
+ Exemple
Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. +

Le sélecteur spécifie l'id de l'élément. La valeur no-repeat fait que l'image apparaîtra une seule fois :

+
+ 
+#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+
+ + + + + + + +
+ Plus de détails
Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez The background dans la spécification CSS.
+

Action : ajout d'une image de fond

+

Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :

+ + + + + + +
Image:ligne-bleue.png
+

(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)

+

Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.

+
+ 
background: url("ligne-bleue.png");
+
+
+

La valeur repeat est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :

+
+

Image:fond-lignes-bleues.png

+
+
+

Cascading Style Sheets

+
+
+

Cascading Style Sheets

+
+
+
+ + + + + + + +
+ Challenge
Téléchargez cette image : + + + + + + +
Image:punaise-jaune.png
+

Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :

+
+

Image:fond-lignes-bleues.png

+
+
+ image:punaise-jaune.png Cascading Style Sheets
+
+ image:punaise-jaune.png Cascading Style Sheets
+
+
+
+

Pour continuer

+

Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.

+

La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : Listes.

diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html new file mode 100644 index 0000000000..28cc40c4fe --- /dev/null +++ b/files/fr/learn/css/howto/index.html @@ -0,0 +1,90 @@ +--- +title: Apprendre à utiliser CSS pour résoudre des problèmes +slug: Apprendre/CSS/Comment +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto +--- +

 

+ +

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

+ +

Scénarios fréquents

+ +
+
+

Basess

+ + + +

CSS et texte

+ + +
+ +
+

Boîtes et mises en page

+ + +
+
+ +

Techniques avancées ou peu communes

+ +

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 :

+ +

Général

+ + + +

Effets avancés

+ + + +

Mise en page

+ + + +

Voir aussi

+ +

CSS FAQ — 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.html b/files/fr/learn/css/index.html new file mode 100644 index 0000000000..d47ea70f90 --- /dev/null +++ b/files/fr/learn/css/index.html @@ -0,0 +1,77 @@ +--- +title: Composer le HTML avec les CSS +slug: Apprendre/CSS +tags: + - Article + - CSS + - Codage + - Débutant + - Longueur + - Nécessite du contenu + - Renvois + - Style + - débogage + - particularités +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +
+

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.

+
+ +

Parcours d'apprentissage

+ +

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 — vous pourrez ensuite en apprendre davantage au sujet :

+ + + +

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.

+ +

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 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.

+ +

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.

+ +

Modules

+ +

Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.

+ +
+
Introduction aux 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
+
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.
+
+ +
+
Composer du texte
+
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
+
+

À 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.

+
+
+ +

Résolution de problèmes courants avec les CSS

+ +

Use CSS to solve common problems 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.

+ +

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 !

+ +

"Le CSS est étrange"

+ +

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 :

+ +

{{EmbedYouTube("aHUtMbJw8iA")}}

+ +

Voir aussi

+ +
+
Les CSS sur MDN
+
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.html b/files/fr/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..283d1fff00 --- /dev/null +++ b/files/fr/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,756 @@ +--- +title: Initiation à la mise en forme du texte +slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte +tags: + - Alignement + - CSS + - Débutant + - Guide + - Polices de caractères + - Style + - Texte +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
+ +

En quoi consiste la mise en forme du texte avec CSS ?

+ +

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")}}.

+ +
+

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 avant de poursuivre.

+
+ +

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 :

+ + + +
+

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 (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

+
+ +

Fontes

+ +

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 :

+ +
<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>
+ +
+

(NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

+
+ +

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

+ +

Couleur

+ +

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")}}.

+ +

color accepte toutes les unités de couleur des CSS, par exemple :

+ +
p {
+  color: red;
+}
+ +

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

+ + + +

{{ EmbedLiveSample('Couleur', '100%', 220) }}

+ +

Familles de fontes

+ +

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 {
+  font-family: arial;
+}
+ +

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

+ +

Polices web sûres

+ +

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.

+ +

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).

+ +

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 pour le web à la fin des années 90 et début des années 2000) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomType génériqueNotes
Arialsans-serifIl 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 NewmonospaceCertains 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.
Georgiaserif 
Times New RomanserifCertains 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 MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
+ +
+

Note : Le site 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.

+
+ +
+

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.

+
+ +

Polices par défaut

+ +

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.

+ +

Les 5 noms sont définis comme suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TermeDéfinitionExemple
serifLes 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-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes 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
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
+ +

Pile de polices

+ +

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 :

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

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.

+ +

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 !

+ +
+

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

+
+ +

Un exemple de font-family

+ +

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Cela donne le résultat suivant :

+ + + +

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

+ +

Taille de la police de caractères

+ +

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de 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). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

+ + + +

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.

+ +

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 ?

+ +
<!-- 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>
+ +

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.

+ +

Un simple exemple de dimensionnement

+ +

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.

+ +

Notre nouveau résultat ressemble à :

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ 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 :

+ + + +

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

+ +

Notre nouveau résultat ressemble à :

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

+ +

Ombres du texte

+ +

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 :

+ +
text-shadow: 4px 4px 5px red;
+ +

Les 4 propriétés sont les suivantes :

+ +
    +
  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 des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. +
  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. +
  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 des CSS.
    4. +
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. +
+ +
+

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.

+
+ +

Ombres multiples

+ +

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :

+ +
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);
+ +

Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

+ + + +

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

+ +
+

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

+
+ +

Mise en page du texte

+ +

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

+ +

Alignement du texte

+ +

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 :

+ + + +

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

+ + + +

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

+ +

Hauteur de ligne

+ +

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, 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 :

+ +
line-height: 1.5;
+ +

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

+ + + +

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

+ +

Espacement entre les lettres et les mots

+ +

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.

+ +

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

Nous obtiendrons :

+ + + +

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

+ +

D'autres propriétés intéressantes

+ +

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 :

+ +

Styles de police de caractères :

+ + + +

styles de mise en page du texte

+ + + +

Abréviations pour propriétés de fontes

+ +

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")}}.

+ +

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.

+ +

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

+ +

Un exemple complet ressemblerait à ceci :

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Apprentissage actif : jouer avec les styles du texte

+ +

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.

+ +

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Résumé

+ +

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.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ +

 

+ + + +

 

+ +

 

diff --git a/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html b/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html deleted file mode 100644 index 283d1fff00..0000000000 --- a/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html +++ /dev/null @@ -1,756 +0,0 @@ ---- -title: Initiation à la mise en forme du texte -slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte -tags: - - Alignement - - CSS - - Débutant - - Guide - - Polices de caractères - - Style - - Texte -translation_of: Learn/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

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.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
- -

En quoi consiste la mise en forme du texte avec CSS ?

- -

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")}}.

- -
-

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 avant de poursuivre.

-
- -

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 :

- - - -
-

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 (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

-
- -

Fontes

- -

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 :

- -
<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>
- -
-

(NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

-
- -

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

- -

Couleur

- -

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")}}.

- -

color accepte toutes les unités de couleur des CSS, par exemple :

- -
p {
-  color: red;
-}
- -

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

- - - -

{{ EmbedLiveSample('Couleur', '100%', 220) }}

- -

Familles de fontes

- -

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 {
-  font-family: arial;
-}
- -

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

- -

Polices web sûres

- -

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.

- -

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).

- -

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 pour le web à la fin des années 90 et début des années 2000) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomType génériqueNotes
Arialsans-serifIl 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 NewmonospaceCertains 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.
Georgiaserif 
Times New RomanserifCertains 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 MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
- -
-

Note : Le site 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.

-
- -
-

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.

-
- -

Polices par défaut

- -

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.

- -

Les 5 noms sont définis comme suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TermeDéfinitionExemple
serifLes 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-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes 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
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
- -

Pile de polices

- -

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 :

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

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.

- -

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 !

- -
-

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

-
- -

Un exemple de font-family

- -

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

Cela donne le résultat suivant :

- - - -

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

- -

Taille de la police de caractères

- -

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de 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). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

- - - -

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.

- -

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 ?

- -
<!-- 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>
- -

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.

- -

Un simple exemple de dimensionnement

- -

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.

- -

Notre nouveau résultat ressemble à :

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ 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 :

- - - -

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

- -

Notre nouveau résultat ressemble à :

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-  text-transform: capitalize;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

- -

Ombres du texte

- -

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 :

- -
text-shadow: 4px 4px 5px red;
- -

Les 4 propriétés sont les suivantes :

- -
    -
  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 des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. -
  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. -
  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 des CSS.
    4. -
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. -
- -
-

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.

-
- -

Ombres multiples

- -

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :

- -
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);
- -

Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

- - - -

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

- -
-

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

-
- -

Mise en page du texte

- -

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

- -

Alignement du texte

- -

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 :

- - - -

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

- - - -

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

- -

Hauteur de ligne

- -

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, 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 :

- -
line-height: 1.5;
- -

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

- - - -

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

- -

Espacement entre les lettres et les mots

- -

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.

- -

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

- -
p::first-line {
-  letter-spacing: 2px;
-  word-spacing: 4px;
-}
- -

Nous obtiendrons :

- - - -

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

- -

D'autres propriétés intéressantes

- -

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 :

- -

Styles de police de caractères :

- - - -

styles de mise en page du texte

- - - -

Abréviations pour propriétés de fontes

- -

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")}}.

- -

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.

- -

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

- -

Un exemple complet ressemblerait à ceci :

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

Apprentissage actif : jouer avec les styles du texte

- -

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.

- -

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Résumé

- -

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.

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- -

 

- - - -

 

- -

 

diff --git a/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html b/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html deleted file mode 100644 index f216d54186..0000000000 --- a/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -title: Mise en forme des liens -slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens -tags: - - Article - - Beginner - - CSS - - Focus - - Guide - - Learn - - Links - - Pseudo-class - - hover - - hyperlinks - - menus - - tabs -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Lors de la mise en forme de liens, 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.

- - - - - - - - - - - - -
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :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.
- -

Un coup d'œil à quelques liens

- -

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

- -

État des liens

- -

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 :

- - - -

Styles par défaut

- -

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><a href="#">Un simple lien</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

- -
-

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.

-
- -

Vous remarquerez quelques petites choses en explorant les styles par défaut :

- - - -

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 :

- - - -

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

- - - -
-

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 !

-
- -

Mise en forme de quelques liens

- -

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 :

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

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).

- -

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

- -
<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>
- -

En mettant les deux ensemble, nous obtenons ce résultat :

- -

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

- -

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 :

- - - -

Apprentissage actif : mettez en forme vos propres liens

- -

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.

- -

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.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Inclusion d'icônes dans des liens

- -

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.

- -

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>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>
- -

Ensuite, le CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-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;
-}
- -

{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

- -

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.

- -

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.

- -

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.

- -

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 : 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.

- -

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

- -
-

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

-
- -

Mise en forme de liens comme des boutons

- -

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.

- -

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.

- -

D'abord, un peu d'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>
- -

Et maintenant, notre CSS :

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

Cela nous donne le résultat suivant :

- -

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

- -

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

- - - -
-

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.

-
- -

Résumé

- -

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

- - - - diff --git a/files/fr/learn/css/styling_text/styling_links/index.html b/files/fr/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..f216d54186 --- /dev/null +++ b/files/fr/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,448 @@ +--- +title: Mise en forme des liens +slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Lors de la mise en forme de liens, 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.

+ + + + + + + + + + + + +
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :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.
+ +

Un coup d'œil à quelques liens

+ +

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

+ +

État des liens

+ +

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 :

+ + + +

Styles par défaut

+ +

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><a href="#">Un simple lien</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

+ +
+

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.

+
+ +

Vous remarquerez quelques petites choses en explorant les styles par défaut :

+ + + +

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 :

+ + + +

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

+ + + +
+

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 !

+
+ +

Mise en forme de quelques liens

+ +

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 :

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

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).

+ +

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

+ +
<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>
+ +

En mettant les deux ensemble, nous obtenons ce résultat :

+ +

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

+ +

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 :

+ + + +

Apprentissage actif : mettez en forme vos propres liens

+ +

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.

+ +

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.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Inclusion d'icônes dans des liens

+ +

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.

+ +

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>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>
+ +

Ensuite, le CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+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;
+}
+ +

{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

+ +

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.

+ +

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.

+ +

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.

+ +

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 : 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.

+ +

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

+ +
+

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

+
+ +

Mise en forme de liens comme des boutons

+ +

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.

+ +

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.

+ +

D'abord, un peu d'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>
+ +

Et maintenant, notre CSS :

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Cela nous donne le résultat suivant :

+ +

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

+ +

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

+ + + +
+

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.

+
+ +

Résumé

+ +

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

+ + + + -- cgit v1.2.3-54-g00ecf