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 +++++++++++++++++++ 19 files changed, 4219 insertions(+) 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 (limited to 'files/fr/learn/css/building_blocks') 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. +
-- cgit v1.2.3-54-g00ecf