mdn · tristantheb · Jul 28, 2024 · Jul 27, 2024
@@ -34,7 +34,8 @@ req.send();
 
 Une requête envoyée avec `XMLHttpRequest` peut récupérer les données de façon asynchrone ou de façon synchrone. Le comportement obtenu est choisi avec le troisième argument optionnel `async` de la méthode [`XMLHttpRequest.open()`](/fr/docs/Web/API/XMLHttpRequest/open). Lorsque cet argument vaut `true` ou s'il n'est pas fourni, la requête est traitée de façon asynchrone. Sinon, le processus est géré de façon synchrone. Pour en savoir plus sur ces différents types de requêtes, vous pouvez consulter l'article [Requêtes synchrones et asynchrones](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). Les requêtes synchrones ne peuvent pas être utilisées en dehors des <i lang="en">workers</i>, car elles bloqueraient l'interface principale.
 
-> **Note :** Le constructeur `XMLHttpRequest` ne se limite pas aux seuls documents XML. Son nom commence par **"XML"**, car il a été créé lorsque le format d'échange principal était XML.
+> [!NOTE]
+> Le constructeur `XMLHttpRequest` ne se limite pas aux seuls documents XML. Son nom commence par **"XML"**, car il a été créé lorsque le format d'échange principal était XML.
 
 ## Gérer les réponses
 
@@ -138,7 +139,8 @@ function transferCanceled(evt) {
 
 Les lignes 3 à 6 du fragment ci-avant ajoutent les gestionnaires d'évènements pour les différents évènements émis à propos du transfert des données à l'aide de `XMLHttpRequest`.
 
-> **Note :** Ces gestionnaires d'évènements doivent être ajoutés avant d'appeler `open()` sur la requête. Sinon, les évènements `progress` ne seront pas captés.
+> [!NOTE]
+> Ces gestionnaires d'évènements doivent être ajoutés avant d'appeler `open()` sur la requête. Sinon, les évènements `progress` ne seront pas captés.
 
 Le gestionnaire d'évènement pour l'avancement, porté par la fonction `updateProgress()` dans l'exemple, reçoit le nombre total d'octets à transférer (`total`) ainsi que le nombre d'octets transférés jusqu'à présent (`loaded`). Toutefois, si le champ `lengthComputable` vaut `false`, la longueur totale est inconnue et vaudra `0` par défaut.
 
@@ -155,7 +157,8 @@ req.upload.addEventListener("abort", transferCanceled);
 oReq.open();
 ```
 
-> **Note :** Les évènements d'avancement ne sont pas disponibles pour le protocole `file:`.
+> [!NOTE]
+> Les évènements d'avancement ne sont pas disponibles pour le protocole `file:`.
 
 Les évènements d'avancements sont émis à chaque fragment (<i lang="en">chunk</i>) de données reçu, y compris le dernier fragment pour les cas où le paquet est reçu et la connexion fermée avant que l'évènement soit déclenché. Dans ce cas, l'évènement `progress` est automatiquement déclenché lorsque l'évènement `load` se produit pour ce paquet. Cela permet de surveiller l'avancement de façon fiable, à l'aide du seul évènement `progress`.
 

@@ -15,7 +15,8 @@ La propriété **`-moz-force-broken-image-icon`** est une propriété CSS non-st
 
   - : Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. `0` indique que seul l'attribut `alt` doit être affiché.
 
-    > **Note :** Même si la valeur est `1`, l'attribut `alt` sera affiché. Voir ci-après.
+    > [!NOTE]
+    > Même si la valeur est `1`, l'attribut `alt` sera affiché. Voir ci-après.
 
 ### Syntaxe formelle
 
@@ -43,7 +44,8 @@ img {
 
 {{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}
 
-> **Note :** Si `-moz-force-broken-image-icon` a la valeur `1` et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut `alt` sera masqué.
+> [!NOTE]
+> Si `-moz-force-broken-image-icon` a la valeur `1` et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut `alt` sera masqué.
 
 ## Spécifications
 

@@ -22,7 +22,8 @@ Pour certains éléments XUL et les pseudo-éléments qui utilisent une image gr
 
 La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.
 
-> **Note :** Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.
+> [!NOTE]
+> Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.
 
 ## Syntaxe
 

@@ -26,7 +26,8 @@ La propriété **`-webkit-box-reflect`** peut être utilisée afin de créer un
 -webkit-box-reflect: unset;
 ```
 
-> **Attention :** Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.
+> [!WARNING]
+> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.
 
 ## Syntaxe
 

@@ -13,7 +13,8 @@ Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la
 
 Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).
 
-> **Note :** Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer `-webkit-line-clamp`.
+> [!NOTE]
+> Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer `-webkit-line-clamp`.
 
 ## Syntaxe
 

@@ -27,7 +27,8 @@ La propriété **`-webkit-mask-composite`** définit la façon dont plusieurs im
 -webkit-mask-composite: unset;
 ```
 
-> **Note :** La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.
+> [!NOTE]
+> La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.
 
 ## Syntaxe
 

@@ -113,7 +113,8 @@ Chaque `@counter-style` est identifié par un nom et possède un ensemble de des
 
 {{EmbedLiveSample('')}}
 
-> **Note :** Une page d'exemple avec plus de variables est disponible ici&nbsp;: <https://mdn.github.io/css-examples/counter-style-demo/>.
+> [!NOTE]
+> Une page d'exemple avec plus de variables est disponible ici&nbsp;: <https://mdn.github.io/css-examples/counter-style-demo/>.
 
 ## Spécifications
 

@@ -30,7 +30,8 @@ Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` e
 
 Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`).
 
-> **Note :** Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. [bug Firefox 1035091](https://bugzil.la/1035091)).
+> [!NOTE]
+> Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. [bug Firefox 1035091](https://bugzil.la/1035091)).
 
 ### Syntaxe formelle
 

@@ -38,7 +38,8 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`**
   - : Une valeur [`font-style`](/fr/docs/Web/CSS/font-style). Il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une police, par exemple&nbsp;: `font-style: oblique 20deg 50deg;`.
 - [`font-weight`](/fr/docs/Web/CSS/@font-face/font-weight)
   - : Une valeur [`font-weight`](/fr/docs/Web/CSS/font-weight). Il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une police, par exemple&nbsp;: `font-weight: 100 400;`.
-    > **Note :** Le descripteur `font-variant` a été retiré de la spécification en 2018. La propriété [`font-variant`](/fr/docs/Web/CSS/font-variant) est bien prise en charge, mais il n'existe pas de descripteur équivalent.
+    > [!NOTE]
+    > Le descripteur `font-variant` a été retiré de la spécification en 2018. La propriété [`font-variant`](/fr/docs/Web/CSS/font-variant) est bien prise en charge, mais il n'existe pas de descripteur équivalent.
 - [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings)
   - : Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux polices OpenType.
 - [`font-variation-settings`](/fr/docs/Web/CSS/@font-face/font-variation-settings)
@@ -51,7 +52,8 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`**
 
   - : Indique les ressources à utiliser pour la police. La valeur est une liste de valeurs indiquant les ressources à tenter les unes après les autres. Chaque ressource est indiquée avec `url()` ou `local()`. C'est la première ressource de la liste qui est chargée correctement qui est utilisée. Les éléments situés après sont ignorés. Si plusieurs descripteurs `src` sont définis, seule la dernière règle déclarée capable de charger une ressource est appliquée.
 
-    > **Note :** Les éléments que le navigateur considère comme invalides sont ignorés. Certains navigateurs pourront ignorer l'ensemble du descripteur si même un seul des éléments est invalide. Cela pourra avoir un impact sur la gestion des alternatives.
+    > [!NOTE]
+    > Les éléments que le navigateur considère comme invalides sont ignorés. Certains navigateurs pourront ignorer l'ensemble du descripteur si même un seul des éléments est invalide. Cela pourra avoir un impact sur la gestion des alternatives.
 
     Une notation `url()` peut être suivie des notations fonctionnelles `format()` et `tech()`, comme ceci&nbsp;:
 
@@ -88,7 +90,8 @@ La [règle @](/fr/docs/Web/CSS/At-rule) [CSS](/fr/docs/Web/CSS) **`@font-face`**
     | `embedded-opentype` | Embedded OpenType     | .eot                |
     | `svg`               | SVG Font (deprecated) | .svg, .svgz         |
 
-    > **Note :** Les valeurs `opentype` et `truetype` sont tout à fait équivalentes, que le fichier de police utilise des courbes de Bézier cubiques (pour le tableau CFF/CFF2) ou quadratiques (pour le tableau des glyphes).
+    > [!NOTE]
+    > Les valeurs `opentype` et `truetype` sont tout à fait équivalentes, que le fichier de police utilise des courbes de Bézier cubiques (pour le tableau CFF/CFF2) ou quadratiques (pour le tableau des glyphes).
 
     `tech()` est une notation **optionnelle** {{Experimental_inline}}. Sa valeur est l'un des mots-clés suivants&nbsp;: `variations`, `palettes`, `incremental`, `features-opentype`, `features-aat`, `features-graphite`, `color-COLRv0`, `color-COLRv1`, `color-SVG`, `color-sbix`, `color-CBDT`.
 

@@ -59,7 +59,8 @@ Comme l'ordre initial dans lequel sont déclarés les couches indique la précé
 
 Une règle présente dans `utilities` s'appliquerait _même si sa spécificité est inférieure_ à celle de la règle dans `theme`. En effet, dès lors que l'ordre des couches a été établi, la spécificité et l'ordre d'apparence sont ignorés. Cela permet la création de sélecteurs CSS plus simples, car il n'est pas nécessaire de s'assurer qu'un sélecteur a une spécificité suffisamment élevée pour l'emporter sur les autres règles, il suffit de s'assurer qu'il apparaît dans une couche qui arrive après.
 
-> **Note :** Lorsque les noms des couches sont déclarées, leur ordre est défini. On peut ensuite ajouter des règles CSS aux couches en redéclarant leur nom. Les styles sont ainsi ajoutés à la couche et l'ordre des couches reste inchangé.
+> [!NOTE]
+> Lorsque les noms des couches sont déclarées, leur ordre est défini. On peut ensuite ajouter des règles CSS aux couches en redéclarant leur nom. Les styles sont ainsi ajoutés à la couche et l'ordre des couches reste inchangé.
 
 La troisième façon consiste à créer une couche de cascade sans nom, par exemple&nbsp;:
 
@@ -75,7 +76,8 @@ Cela crée une _couche de cascade anonyme_. Cette couche fonctionne de façon an
 
 Une autre façon pour créer une couche de cascade consiste à utiliser [`@import`](/fr/docs/Web/CSS/@import). Dans ce cas, les règles associées proviendraient de la feuille de style importée.
 
-> **Attention :** La règle @ `@import` doit précéder tous les autres types de règles, à l'exception des règles `@charset`.
+> [!WARNING]
+> La règle @ `@import` doit précéder tous les autres types de règles, à l'exception des règles `@charset`.
 
 ```css
 @import "theme.css" layer(utilities);

@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-moz-device-pixel-ratio
 
 La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caractéristiques_média) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.
 
-> **Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme.
+> [!WARNING]
+> Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme.
 >
 > `-moz-device-pixel-ratio` peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et `-webkit-device-pixel-ratio` peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge `dppx`. Par exemple :
 >
@@ -20,7 +21,8 @@ La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#
 >
 > Voir [cet article du CSSWG](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`.
 
-> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`.
+> [!NOTE]
+> Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`.
 
 ## Syntaxe
 

@@ -9,7 +9,8 @@ slug: Web/CSS/@media/-webkit-device-pixel-ratio
 
 Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter [un pixel CSS (`px`)](/fr/docs/Web/CSS/length#unités_de_longueur_absolues). Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est [`dppx`](/fr/docs/Web/CSS/resolution#unités).
 
-> **Attention :** Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.
+> [!WARNING]
+> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.
 
 ## Syntaxe
 

@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-webkit-transform-2d
 
 **`-webkit-transform-2d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.
 
-> **Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.
+> [!NOTE]
+> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.
 
 ## Spécifications
 

@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-webkit-transform-3d
 
 **`-webkit-transform-3d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.
 
-> **Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.
+> [!NOTE]
+> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.
 
 ## Exmple
 

@@ -7,7 +7,8 @@ slug: Web/CSS/@media/-webkit-transition
 
 **`-webkit-transition`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.
 
-> **Note :** Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.
+> [!NOTE]
+> Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.
 
 ## Privilégier `@supports`