Merge branch 'mdn:main' into mdn#7412-cleans-metadata-mdn

files/fr/learn/css/building_blocks/box_model_tasks/index.md

@@ -1,73 +1,77 @@
 ---
 title: 'Testez vos connaissances : le modèle de boîte'
 slug: Learn/CSS/Building_blocks/Box_Model_Tasks
-tags:
-  - Beginner
-  - CSS
-translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks
+l10n:
+  sourceCommit: 40cfeaf2623824ff3acf9d95af67a0498e23e3e8
 ---
 
 {{LearnSidebar}}
 
-L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.
+L'objectif de cette évaluation est de vous aider à vérifier votre compréhension du [modèle de boîte CSS](/fr/docs/Learn/CSS/Building_blocks/The_box_model).
 
 > **Note :** Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices.
 >
-> Si vous bloquez, demandez-nous de l'aide : voir la section [Évaluation et aide](#assessment_or_further_help) en bas de cette page.
+> Si vous bloquez, demandez-nous de l'aide : voir la section [Évaluation et aide](#évaluation_et_aide) en bas de cette page.
 
-## Modèle de boîte : numéro 1
+## Exercice n°1
 
-Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous :
+Regardez les deux boîtes ci-dessous : l'une utilise le modèle de boîte standard, tandis que l'autre utilise le modèle de boîte alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe `.alternate`, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte.
+
+Le résultat final doit ressembler à l'image ci-dessous :
 
 ![Deux boîtes de la même taille](mdn-box-model1.png)
 
-Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :
+Essayez de mettre à jour le code éditable ci-dessous pour reproduire l'exemple terminé :
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}
 
-> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.
+> **Remarque :** [Téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/box-models-download.html) afin de travailler avec votre propre éditeur ou avec un éditeur en ligne.
+
+## Exercice n°2
 
-## Modèle de boîte : numéro 2
+Dans cet exercice, ajoutez ce qui suit à la boîte :
 
-Dans cet exercice, ajoutez à la boîte :
+- Une bordure pointillée, noire, de 5px d'épaisseur ;
+- Une marge supérieure de 20px ;
+- Une marge à droite de 1em ;
+- Une marge inférieure de 40px ;
+- Une marge gauche de 2em ;
+- Un espace intérieur sur tous les côtés de 1em.
 
-- une bordure pointillée, noire, de 5px d'épaisseur ;
-- une marge supérieure de 20px ;
-- une marge à droite de 1em ;
-- une marge inférieure de 40px ;
-- une marge gauche de 2em ;
-- un espace intérieur sur tous les côtés de 1em.
+Le résultat final devrait ressembler à cette image :
 
 ![Une boîte avec une bordure pointillée](mdn-box-model2.png)
 
-Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :
+Essayez de mettre à jour le code éditable ci-dessous pour reproduire l'exemple terminé :
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}
 
-> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.
+> **Remarque :** [Téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/mbp-download.html) afin de travailler avec votre propre éditeur ou avec un éditeur en ligne.
+
+## Exercice n°3
 
-## Modèle de boîte : numéro 3
+Dans cet exercice, l'élément en ligne possède une marge, un espacement intérieur et une bordure. Toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?
 
-Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?
+Le résultat final devrait ressembler à cette image :
 
 ![Une boîte en ligne avec un espace entre elle et le texte qui l'entoure](mdn-box-model3.png)
 
-Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :
+Essayez de mettre à jour le code éditable ci-dessous pour reproduire l'exemple terminé :
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}
 
-> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.
+> **Remarque :** [Téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/inline-block-download.html) afin de travailler avec votre propre éditeur ou avec un éditeur en ligne.
 
 ## Évaluation et aide
 
 Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.
 
-Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :
+Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :
 
 1. Enregistrez votre travail dans un éditeur en ligne partageable, du type [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/). Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.
-2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie ["Apprentissage" (Learning) du forum Discourse de MDN](https://discourse.mozilla.org/c/mdn/learn). Votre message doit inclure :
+2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie [<i lang="en">Learning</i> du forum Discourse de MDN](https://discourse.mozilla.org/c/mdn/learn/250). Votre message doit inclure&nbsp;:
 
-    - Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".
-    - Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.
-    - Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code!
-    - Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.
+   - Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".
+   - Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous&nbsp;: par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.
+   - Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre&nbsp;: il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code&nbsp;!
+   - Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.

files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md

@@ -177,8 +177,6 @@ Opcode _0x1_ signifie que ceci est un texte. [Liste exhaustive des Opcodes](http
 
 \- 134:
 
-If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.
-
 Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.
 
 > **Note :** Je peux prendre 128 car le premier bit est toujours 1.

files/fr/web/css/overflow-block/index.md

@@ -1,43 +1,44 @@
 ---
 title: overflow-block
 slug: Web/CSS/overflow-block
-tags:
-  - CSS
-  - Propriété
-  - Propriété logique
-  - Reference
-translation_of: Web/CSS/overflow-block
+l10n:
+  sourceCommit: 40cfeaf2623824ff3acf9d95af67a0498e23e3e8
 ---
 
 {{CSSRef}}
 
-La propriété CSS **`overflow-block`** est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'un élément de bloc sur les bords de bloc (ceux orthogonaux au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.
+La propriété [CSS](/fr/docs/Web/CSS) **`overflow-block`** est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'un élément de bloc sur les bords de bloc (ceux orthogonaux au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.
 
-> **Note :** La propriété `overflow-block` correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.
+> **Note :** La propriété `overflow-block` correspond à [`overflow-y`](/fr/docs/Web/CSS/overflow-y) ou [`overflow-x`](/fr/docs/Web/CSS/overflow-x) selon le mode d'écriture du document.
 
 ## Syntaxe
 
 ```css
 /* Valeurs avec un mot-clé */
 overflow-block: visible;
 overflow-block: hidden;
+overflow-block: clip;
 overflow-block: scroll;
 overflow-block: auto;
 
 /* Valeurs globales */
 overflow-block: inherit;
 overflow-block: initial;
+overflow-block: revert;
+overflow-block: revert-layer;
 overflow-block: unset;
 ```
 
-La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la liste suivante.
+La propriété `overflow-block` est définie avec une valeur de type [`<overflow>`](/fr/docs/Web/CSS/overflow_value) (voir les valeurs ci-après).
 
 ### Valeurs
 
 - `visible`
   - : Le contenu n'est pas rogné et peut être affiché en dehors des limites de bloc de la boîte.
 - `hidden`
   - : Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe de bloc. Aucune barre de défilement n'est affichée.
+- `clip`
+  - : Le contenu qui dépasse est rogné sur le bord de dépassement de l'élément, défini avec la propriété [`overflow-clip-margin`](/fr/docs/Web/CSS/overflow-clip-margin).
 - `scroll`
   - : Le contenu est rogné si nécessaire selon l'axe de bloc pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.
 - `auto`
@@ -69,6 +70,13 @@ La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la li
     </div>
   </li>
 
+  <li>
+    <code>overflow-block: clip</code> (masque le texte en dehors de la boîte au-delà du bord de dépassement)
+    <div id="clip">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
   <li><code>overflow-block:visible</code> — affiche le texte en dehors si besoin
   <div id="div3">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
@@ -86,24 +94,33 @@ La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la li
 ### CSS
 
 ```css
-#div1,
-#div2,
-#div3,
-#div4 {
+div {
   border: 1px solid black;
-  width:  250px;
+  width: 250px;
   height: 100px;
+  margin-bottom: 120px;
 }
 
-#div1 { overflow-block: hidden; margin-bottom: 12px;}
-#div2 { overflow-block: scroll; margin-bottom: 12px;}
-#div3 { overflow-block: visible; margin-bottom: 120px;}
-#div4 { overflow-block: auto; margin-bottom: 120px;}
+#hidden {
+  overflow-block: hidden;
+}
+#scroll {
+  overflow-block: scroll;
+}
+#scroll {
+  overflow-block: clip;
+}
+#visible {
+  overflow-block: visible;
+}
+#auto {
+  overflow-block: auto;
+}
 ```
 
 ### Résultat
 
-{{EmbedLiveSample("Exemples", "100%", "780")}}
+{{EmbedLiveSample("", "100%", "780")}}
 
 ## Spécifications
 
@@ -115,6 +132,17 @@ La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la li
 
 ## Voir aussi
 
-- Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}
-- [Les propriétés logiques en CSS](/fr/docs/Web/CSS/CSS_Logical_Properties)
-- [Les modes d'écriture](/fr/docs/Web/CSS/CSS_Writing_Modes)
+- Les propriétés CSS associées&nbsp;:
+  - [`clip`](/fr/docs/Web/CSS/clip)
+  - [`display`](/fr/docs/Web/CSS/display)
+  - [`overflow`](/fr/docs/Web/CSS/overflow)
+  - [`overflow-inline`](/fr/docs/Web/CSS/overflow-inline)
+  - [`overflow-clip-margin`](/fr/docs/Web/CSS/overflow-clip-margin)
+  - [`overflow-x`](/fr/docs/Web/CSS/overflow-x)
+  - [`overflow-y`](/fr/docs/Web/CSS/overflow-y)
+  - [`text-overflow`](/fr/docs/Web/CSS/text-overflow)
+  - [`white-space`](/fr/docs/Web/CSS/white-space)
+- [Le module de spécification CSS sur le dépassement (<i lang="en">overflow</i>)](/fr/docs/Web/CSS/CSS_overflow)
+- [Les propriétés logiques](/fr/docs/Web/CSS/CSS_logical_properties_and_values)
+- [Les modes d'écritures](/fr/docs/Web/CSS/CSS_writing_modes)
+- [Apprendre le débordement de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content)