Compression
- Sans perte; sur la base de la
+ Avec perte; sur la base de la
transformée en cosinus discrète lazy loading en anglais) est une stratégie d'identification des ressources non bloquantes (non critiques) afin de ne les charger qu'au moment où elles sont utiles. C'est une façon de raccourcir le [chemin critique de rendu](/fr/docs/Web/Performance/Critical_rendering_path), ce qui se traduit par une réduction du temps de chargement de la page.
Le chargement différé peut se dérouler à plusieurs moments du chargement d'une application, mais il se déroule typiquement lorsque l'internaute interagit avec la page, notamment lors du défilement de la page ou de la navigation.
diff --git a/files/fr/web/performance/performance_budgets/index.md b/files/fr/web/performance/performance_budgets/index.md
index a807fd937bfc58..d30f08499a1070 100644
--- a/files/fr/web/performance/performance_budgets/index.md
+++ b/files/fr/web/performance/performance_budgets/index.md
@@ -3,6 +3,8 @@ title: Budgets de performance
slug: Web/Performance/Performance_budgets
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Un budget de performance est une limite pour éviter les régressions. Il peut s'appliquer à un fichier, un type de fichier, tous les fichiers chargés sur une page, une métrique spécifique (par exemple, [Time to Interactive](/fr/docs/Glossaire/Time_to_interactive)), une métrique personnalisée (par exemple, Time to Hero Element), ou un seuil sur une période de temps.
## Pourquoi ai-je besoin d'un budget de performance?
diff --git a/files/fr/web/progressive_web_apps/guides/making_pwas_installable/index.md b/files/fr/web/progressive_web_apps/guides/making_pwas_installable/index.md
index 2bc40c05cb388d..da9574412fc090 100644
--- a/files/fr/web/progressive_web_apps/guides/making_pwas_installable/index.md
+++ b/files/fr/web/progressive_web_apps/guides/making_pwas_installable/index.md
@@ -3,6 +3,8 @@ title: Ajouter à l'écran d'accueil
slug: Web/Progressive_web_apps/Guides/Making_PWAs_installable
---
+{{PWASidebar}}
+
Ajouter à l'écran d'accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d'ajouter facilement et rapidement un raccourci à leur écran d'accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d'en tirer parti.
## Pourquoi A2HS?
diff --git a/files/fr/web/security/certificate_transparency/index.md b/files/fr/web/security/certificate_transparency/index.md
index 9b62c534f10eec..4c8c52c82dad14 100644
--- a/files/fr/web/security/certificate_transparency/index.md
+++ b/files/fr/web/security/certificate_transparency/index.md
@@ -3,6 +3,8 @@ title: Public Key Pinning
slug: Web/Security/Certificate_Transparency
---
+{{QuickLinksWithSubpages("/fr/docs/Web/Security")}}
+
L'extention **Public Key Pinning pour HTTP** (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques [MITM](https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu) avec des certificats contrefaits.
> **Note :** La Public Key Pinning décrite ici est différente du limité [preload list based key pinning](http://monica-at-mozilla.blogspot.de/2014/08/firefox-32-supports-public-key-pinning.html) introduit dans Firefox 32.
diff --git a/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md
index 44c71799e45498..8c615964776df4 100644
--- a/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md
+++ b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md
@@ -3,6 +3,8 @@ title: "Referer header: privacy and security concerns"
slug: Web/Security/Referer_header:_privacy_and_security_concerns
---
+{{QuickLinksWithSubpages("/fr/docs/Web/Security")}}
+
L'[entête HTTP Referer](/fr/docs/Web/HTTP/Headers/Referer) présente des risques de confidentialité et de sécurité[.](/fr/docs/Web/HTTP/Headers/Referer) Cet article les décrit et donne des conseils pour les minimiser.
## Le problème
diff --git a/files/fr/web/security/same-origin_policy/index.md b/files/fr/web/security/same-origin_policy/index.md
index 1284f1f46e8a5f..9683e6a991db54 100644
--- a/files/fr/web/security/same-origin_policy/index.md
+++ b/files/fr/web/security/same-origin_policy/index.md
@@ -3,6 +3,8 @@ title: Same-origin policy
slug: Web/Security/Same-origin_policy
---
+{{QuickLinksWithSubpages("/fr/docs/Web/Security")}}
+
La same-origin policy restreint la manière dont un document ou un script chargé depuis une origine peut interagir avec une autre ressource chargée depuis une autre origine.
## Définition de l'origine
diff --git a/files/fr/web/security/secure_contexts/index.md b/files/fr/web/security/secure_contexts/index.md
index c09d569bd9760b..db281bfdf8f8ac 100644
--- a/files/fr/web/security/secure_contexts/index.md
+++ b/files/fr/web/security/secure_contexts/index.md
@@ -3,6 +3,8 @@ title: Secure Contexts
slug: Web/Security/Secure_Contexts
---
+{{QuickLinksWithSubpages("/fr/docs/Web/Security")}}
+
Un navigateur entre dans un **contexte sécurisé** quand il a satisfait les exigences minimale de sécurité. Un contexte sécurisé permet au navigateur de mettre à disposition des APIs qui nécessitent des transferts sécurisés avec l'utilisateur.
## Pourquoi certaines fonctionnalitées devraient être limitées ?
diff --git a/files/fr/web/security/subresource_integrity/index.md b/files/fr/web/security/subresource_integrity/index.md
index 45e19554a31fa5..335feebf403d4f 100644
--- a/files/fr/web/security/subresource_integrity/index.md
+++ b/files/fr/web/security/subresource_integrity/index.md
@@ -3,6 +3,8 @@ title: Subresource Integrity
slug: Web/Security/Subresource_Integrity
---
+{{QuickLinksWithSubpages("/fr/docs/Web/Security")}}
+
**_Subresource Integrity_** (SRI, ou « Intégrité des sous-ressources ») est une fonction de sécurité qui permet aux navigateurs de vérifier que les fichiers qu'ils vont chercher (par exemple, à partir d'un [CDN](/fr/docs/Glossaire/CDN)) sont livrés sans manipulation inattendue. Cela fonctionne en permettant de fournir un hachage cryptographique (« _hash_ ») auquel le fichier récupéré doit correspondre.
## Comment fonctionne le contrôle d'intégrité des sous-ressources ?
diff --git a/files/fr/web/svg/attribute/d/index.md b/files/fr/web/svg/attribute/d/index.md
index faf5f6bd900f85..953939b915647e 100644
--- a/files/fr/web/svg/attribute/d/index.md
+++ b/files/fr/web/svg/attribute/d/index.md
@@ -1,15 +1,19 @@
---
title: d
slug: Web/SVG/Attribute/d
+l10n:
+ sourceCommit: 1a26583f60bdceece64347bf967d0653fe8df288
---
{{SVGRef}}
L'attribut **`d`** définit un tracé à dessiner.
-La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.
+La définition d'un tracé est une liste de [commandes de tracé](#commandes_de_tracé) où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées [ci-dessous](#commandes_de_tracé).
-Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}
+Cet attribut peut être utilisé sur les éléments SVG suivants : [``](#path), [``](#glyph), [``](#missing-glyph).
+
+`d` est un attribut de présentation et peut donc [être utilisé comme propriété CSS](#utilisation_comme_propriété_css).
## Exemple
@@ -34,25 +38,23 @@ svg {
```
-{{EmbedLiveSample('Exemple', '100%', 200)}}
+{{EmbedLiveSample('', '100%', 200)}}
-## Tracé
+## ``
-Pour un {{SVGElement('path')}}, `d` est une chaîne de caractère qui contient une série de commandes de tracé qui définissent le tracé à dessiner.
+Pour un [``](/fr/docs/Web/SVG/Element/path), `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent le tracé à dessiner.
-
+
Valeur
- <string> <string>
Valeur par défaut
- aucune Aucune
Animable
@@ -61,25 +63,23 @@ Pour un {{SVGElement('path')}}, `d` est une chaîne de caractère qui contient u
-## glyph
+## ``
-> **Attention :** Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.
+> **Attention :** Depuis SVG2, [``](/fr/docs/Web/SVG/Element/glyph) est déprécié et ne doit plus être utilisé.
-Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.
+Pour un élément [``](/fr/docs/Web/SVG/Element/glyph), `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour du glyphe.
-
+
Valeur
- <string> <string>
Valeur par défaut
- aucune Aucune
Animable
@@ -88,27 +88,25 @@ Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient
-> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.
+> **Note :** Le point d'origine (situé aux coordonnées `0, 0`) correspond généralement au _coin en haut à gauche_ du contexte. Néanmoins, pour l'élément [``](/fr/docs/Web/SVG/Element/glyph), l'origine se situe dans le coin en bas à gauche de son enveloppe.
-## missing-glyph
+## ``
-> **Attention :** Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.
+> **Attention :** Depuis SVG2, [``](/fr/docs/Web/SVG/Element/missing-glyph) est déprécié et ne doit plus être utilisé.
-Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.
+Pour un élément [``](/fr/docs/Web/SVG/Element/missing-glyph), `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour du glyphe.
-
+
Valeur
- <string> <string>
Valeur par défaut
- aucune Aucune
Animable
@@ -117,80 +115,755 @@ Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui
+## Utilisation comme propriété CSS
+
+`d` est un attribut de présentation et peut donc être modifié à l'aide de CSS. La propriété peut prendre [`path()`](/fr/docs/Web/CSS/path) ou `none` comme valeur.
+
+Dans l'exemple qui suit, on illustre comment appliquer un nouveau tracé au survol d'un élément. Le nouveau tracé est le même que le précédent, mais ajoute une ligne sur le cœur.
+
+```css
+html,
+body,
+svg {
+ height: 100%;
+}
+
+/* Ce tracé est affiché au survol */
+#svg_css_ex1:hover path {
+ d: path(
+ "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
+ );
+}
+```
+
+```html
+
+
+```
+
+{{EmbedLiveSample('', '100%', 200)}}
+
## Commandes de tracé
Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.
-SVG définit 6 types de commandes, pour un total de 20 commandes :
+SVG définit 6 types de commandes, pour un total de 20 commandes :
-- Aller à (Moveto)
-- Tracer une ligne jusqu'à (Lineto)
-- Tracer une courbe jusqu'à (Curveto)
-- Tracer un arc de cercle jusqu'à (Arcto)
-- Fermer le chemin (ClosePath)
+- `MoveTo` (commande de déplacement) : `M`, `m`
+- `LineTo` (commande pour tracer une ligne) : `L`, `l`, `H`, `h`, `V`, `v`
+- Courbe de Bézier cubique : `C`, `c`, `S`, `s`
+- Courbe de Bézier quadratique : `Q`, `q`, `T`, `t`
+- Courbe d'arc elliptique : `A`, `a`
+- `ClosePath` (commande pour fermer le tracé): `Z`, `z`
-> **Note :** Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.
+> **Note :** Les commandes sont sensibles à la casse ; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.
-Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut.
+Il est toujours possible de spécifier une valeur négative en argument d'une commande :
-## Moveto (aller à)
+- Des angles négatifs iront dans le sens inverse des aiguilles d'une montre
+- Des positions _absolues_ négatives `x` et `y` seront interprétées comme des coordonnées négatives
+- Pour les valeurs _relatives_, une valeur de `x` négative ira vers la gauche, et une valeur de `y` négative ira vers le haut.
-Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés.
+### `MoveTo` (déplacement)
-Syntaxe:
+Cette instruction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Autrement dit, on déplace _le point courant_ (_Po _; {_xo _, _yo _}) et on ne trace pas de ligne entre _Po _ et le nouveau _point courant_ (_Pn _; {_xn _, _yn _}).
-- **`M x, y`** où x et y sont des coordonnées absolues, respectivement horizontale et verticale.
-- **`m dx, dy`** où dx et dy sont des distances relatives à la position courante, respectivement vers la droite et vers le bas.
+Une bonne pratique consiste à commencer tous ses chemins par une instruction `MoveTo` car, sans un positionnement initial, les instructions du chemin commenceront à un point quelconque, ce qui peut donner des résultats non désirés.
-Exemples :
+
+
+
+ Commande
+ Paramètres
+ Notes
+
+
+ M
+
+ (x y
+
+
+ Déplace le point courant aux coordonnées x y LineTo (L) implicite (voir ci-après).
+
+
+ Formule : Pn = {x y
+
+
+
+ m
+
+ (dx dy
+
+
+ Déplace le point courant en décalant la dernière position connue du tracé de dx dy LineTo (l) implicite (voir ci-après).
+
+
+ Formule : Pn = {xo + dx yo + dy
+
+
+
+
-- Positionnement absolu en x = 50, y = 100 : `
+
+```
-Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner.
+{{EmbedLiveSample('', '100%', 200)}}
-Exemples :
+### `LineTo` (tracé d'une ligne)
-- Dessiner un carré (avec coordonnées relatives) : `o _; {_xo _, _yo _}) et jusqu'au _point final_ (_Pn _; {_xn _, _yn _}), selon les paramètres indiqués. _Le point final_ (_Pn _) devient alors _le point courant_ pour la prochaine commande (_Po ′_).
-## Curveto
+
+
+
+ Commande
+ Paramètres
+ Notes
+
+
+ L
+ (x, y)+
+
+ Dessine une ligne à partir du point courant jusqu'au point final indiqué par x y LineTo absolue (L) implicite.
+
+
+ Formule : Po ′ = Pn = {x y
+
+
+
+ l
+
+ (dx dy
+
+
+ Dessine une ligne à partir du point courant jusqu'au point final , déterminé par le décalage horizontal dx dy point courant . Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour une commande LineTo relative (l) implicite.
+
+
+ Formule : Po ′ = Pn = {xo + dx yo + dy
+
+
+
+ H
+
+ x
+
+
+ Dessine une ligne horizontale à partir du point courant et jusqu'au point final , déterminé par la coordonnée x y du point courant . Les éventuelles valeurs suivantes sont interprétées comme des paramètres pour des appels LineTo (H) implicites.
+
+
+ Formule : Po ′ = Pn = {x yo }
+
+
+
+
+ h
+
+ dx
+
+
+ Dessine une ligne horizontale à partir du point courant , jusqu'au point final dont l'abscisse est celle du point courant décalée de dx LineTo (h) implicites.
+
+
+ Formule : Po ′ = Pn = {xo + dx yo }
+
+
+
+
+ V
+
+ y
+
+
+ Dessine une ligne verticale à partir du point courant , jusqu'au point final , dont l'ordonnée est indiquée par le paramètre y LineTo (V) implicites.
+
+
+ Formule : Po ′ = Pn = {xo , y
+
+
+
+ v
+
+ dy
+
+
+ Dessine une ligne verticale à partir du point courant , jusqu'au point final dont l'ordonnée est celle du point courant décalée de dy LineTo (v) implicites.
+
+
+ Formule : Po ′ = Pn = {xo , yo + dy
+
+
+
+
-L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.
+#### Exemples
-Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est `C c1x, c1y c2x, c2y x, y` ou `c dc1x, dc1y dc2x, dc2y dx, dy`.
+```css hidden
+html,
+body,
+svg {
+ height: 100%;
+}
+```
-Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est `T x, y` ou `t dx, dy` pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe `S cx, cy x, y` ou `s dcx,dcy dx,dy`, où (d)cx indique le second point de contrôle.
+```html
+
+
+
+```
-`o _ = {_xo _, _yo _})
+- Le point final
+ - : (_Pn _ = {_xn _, _yn _})
+- Le point de contrôle initial
+ - : (_Pcs _ = {_xcs _, _ycs _})
+ (il contrôle la courbure au début de la courbe)
+- Le point de contrôle final
+ - : (_Pce _ = {_xce _, _yce _})
+ (il contrôle la courbure vers la fin de la courbe)
-La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7.
+Après le tracé, _le point final_ (_Pn _) devient _le point courant_ pour la prochaine commande (_Po ′_).
-## ClosePath (fermer un chemin)
+
+
+
+ Commande
+ Paramètres
+ Notes
+
+
+ C
+
+ (x1 y1 x2 y2 x y
+
+
+ Dessine une courbe de Bézier cubique à partir du point courant jusqu'au point final indiqué par x y point de contrôle initial est indiqué par les paramètres x1 y1 point de contrôle final est indiqué par x2 y2 C) absolue.
+
+
+ Formules :
+
+ Po ′ = Pn = {x y Pcs = {x1 y1 Pce = {x2 y2
+
+
+
+
+ c
+
+ (dx1 dy1 dx2 dy2 dx dy
+
+
+ Dessine une courbe de Bézier cubique à partir du point courant , jusqu'au point final , déterminé par le décalage horizontal dx dy point de contrôle initial correspond au point courant (le point de départ de la courbe) décalé de dx1 dy1 point de contrôle final correspond au point courant (le point de départ de la courbe) décalé de dx2 dy2 c) relative.
+
+
+ Formules :
+
+ Po ′ = Pn = {xo + dx yo + dy Pcs = {xo + dx1 yo + dy1 Pce = {xo + dx2 yo + dy2
+
+
+
+
+ S
+
+ (x2 y2 x y
+
+ Dessine une courbe de Bézier lisse allant du point courant au point final indiqué par les coordonnées x y point de contrôle final est indiqué par x2 y2 point de contrôle initial est le symétrique du point de contrôle final de la précédente commande de courbe par rapport au point courant . Si la commande précédente n'était pas une courbe de Bézier cubique, le point de contrôle initial correspondra au point de départ de la courbe (c'est-à-dire le point courant). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier cubique lisse absolue (S) implicites.
+
+
+
+ s
+
+ (dx2 dy2 dx dy
+
+ Dessine une courbe de Bézier cubique lisse allant du point courant au point final , qui est déterminé par le décalage du point courant de dx dy point de contrôle final correspond au point courant (le point de départ de la courbe) décalé de dx2 dy2 point de contrôle initial est le symétrique du point de contrôle final de la commande de courbe précédente par rapport au point courant . Si la commande précédente n'était pas une courbe de Bézier cubique, le point de contrôle initial correspondra au point de départ de la courbe (point courant ). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier cubique lisse relative (s) implicites.
+
+
+
+
-L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").
+#### Exemples
-## Éléments
+```css hidden
+html,
+body,
+svg {
+ height: 100%;
+}
+```
+
+```html
+
+
+
+
+
+
+```
+
+{{EmbedLiveSample('', '100%', 200)}}
+
+### Courbe de Bézier quadratique
+
+_[Les courbes de Bézier quadratiques](/fr/docs/Glossary/Bezier_curve)_ définissent des courbes douces à l'aide de trois points :
+
+- Le point de départ (point courant)
+ - : _Po _ = {_xo _, _yo _}
+- Le point final
+ - : _Pn _ = {_xn _, _yn _}
+- Le point de contrôle
+ - : _Pc _ = {_xc _, _yc _}
+ (qui contrôle la courbure)
+
+Après le tracé, _le point final_ (_Pn _) devient _le point courant_ de la prochaine commande (_Po ′_).
+
+
+
+
+ Commande
+ Paramètres
+ Notes
+
+
+ Q
+
+ (x1 y1 x y
+
+
+ Dessine une courbe de Bézier quadratique à partir du point courant jusqu'au point final situé aux coordonnées x y point de contrôle est aux coordonnées x1 y1 Q) implicites.
+
+
+ Formules :
+ Po ′ = Pn = {x y Pc = {x1 y1
+
+
+
+
+ q
+
+ (dx1 dy1 dx dy
+
+
+ Dessine une courbe de Bézier quadratique à partir du point courant jusqu'au point final , calculé en décalant le point courant de dx dy point de contrôle correspond au point courant (le point de départ de la courbe) décalé de dx1 dy1 q) implicites.
+
+
+ Formules :
+
+ Po ′ = Pn = {xo + dx yo + dy Pc = {xo + dx1 yo + dy1
+
+
+
+
+ T
+
+ (x y
+
+
+ Dessine une courbe de Bézier quadratique lisse à partir du point courant , jusqu'au point final situé aux coordonnées x y point de contrôle est le symétrique du point de contrôle de la précédente commande de courbe par rapport au point courant . Si la commande précédente n'était pas une courbe de Bézier quadratique, le point de contrôle sera identique au point de départ de la courbe (c'est-à-dire le point courant ). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier quadratique lisse absolue (T) implicites.
+
+
+ Formula:
+
+ Po ′ = Pn = {x y
+
+
+
+
+ t
+
+ (dx dy
+
+
+ Dessine une courbe de Bézier quadratique lisse à partir du point courant , jusqu'au point final qui correspond au décalage du point courant de dx dy point de contrôle est le symétrique du point de contrôle de la précédente commande de courbe par rapport au point courant . Si la précédente commande n'était pas une courbe de Bézier quadratique, le point de contrôle correspondra alors au point de départ de la courbe (c'est-à-dire le point courant ). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier quadratique lisse relative (t) implicites.
+
+
+ Formules :
+
+ Po ′ = Pn = {xo + dx yo + dy
+
+
+
+
+
+
+#### Exemples
+
+```css hidden
+html,
+body,
+svg {
+ height: 100%;
+}
+```
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+{{EmbedLiveSample('', '100%', 200)}}
+
+### Courbe d'arc elliptique
+
+_Les courbes d'arc elliptique_ sont des courbes définies comme une portion d'ellipse. Certaines courbes régulières sont parfois plus facilement obtenues avec des portions d'ellipses qu'avec des courbes de Bézier.
+
+
+
+
+ Commande
+ Paramètres
+ Notes
+
+
+ A
+
+ (rx ry angle large-arc-flag sweep-flag x y
+
+
+ Dessine un arc à partir du point courant jusqu'aux coordonnées x y
+
+
+ rx ry
+
+ angle
+
+ large-arc-flag sweep-flag
+
+ large-arc-flag 1) ou le petit (0) arc,
+
+
+ sweep-flag 1) ou celui dans le sens anti-horaire (0)
+
+
+
+
+ Les coordonnées x y A) implicites.
+
+
+
+ a
+
+ (rx ry angle large-arc-flag sweep-flag dx dy
+
+
+ Dessine un arc à partir du point courant jusqu'au point dont les coordonnées sont celles du point courant décalées de dx dy
+
+
+ rx ry
+
+ angle
+
+ large-arc-flag sweep-flag
+
+ large-arc-flag 1) ou le petit (0) arc,
+
+
+ sweep-flag 1) ou celui dans le sens anti-horaire (0)
+
+
+
+
+ En prenant le point courant et en le décalant de dx dy a) implicites.
+
+
+
+
+
+#### Exemples
+
+```css hidden
+html,
+body,
+svg {
+ height: 100%;
+}
+```
+
+```html
+
+
+
+```
+
+{{EmbedLiveSample('', '100%', 200)}}
+
+### `ClosePath` (fermeture du tracé)
+
+Les instructions `ClosePath` permettent de dessiner une ligne droite entre _la position courante_ et le premier point du tracé.
+
+
+
+
+ Commande
+ Paramètres
+ Notes
+
+
+ Z, z
+
+ Ferme le chemin courant en connectant le dernier point du chemin au point initial. Si les deux points sont situés à différentes coordonnées, une ligne droite est tracée entre les deux points.
+
+
+
+
+
+> **Note :** L'apparence d'une forme fermée à l'aide de `ClosePath` peut être différente de celle d'une forme fermée en traçant une ligne jusqu'à l'origine selon la commande, car les fins de lignes sont jointes (selon l'attribut [`stroke-linejoin`](/fr/docs/Web/SVG/Attribute/stroke-linejoin)), plutôt que d'être placées aux mêmes coordonnées.
+
+#### Exemples
+
+```css hidden
+html,
+body,
+svg {
+ height: 100%;
+}
+```
+
+```html
+
+
+
+```
-Les éléments suivants peuvent utiliser l'attribut **d** :
+{{EmbedLiveSample('', '100%', 200)}}
-- {{SVGElement("path")}}
-- {{SVGElement("glyph")}}
+## Spécifications
-De plus, les mêmes règles s'appliquent aux animations de chemin {{SVGElement("animate")}}.
+{{Specifications}}
-## Notes
+## Compatibilité des navigateurs
-Le point d'origine (de coordonnées 0,0) est habituellement le **coin supérieur gauche** du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le **coin inférieur gauche** de la boîte contenant son caractère.
+{{Compat}}
diff --git a/files/fr/web/svg/attribute/in/index.md b/files/fr/web/svg/attribute/in/index.md
index cd747b1caea6da..ddbed996ded8a2 100644
--- a/files/fr/web/svg/attribute/in/index.md
+++ b/files/fr/web/svg/attribute/in/index.md
@@ -3,6 +3,8 @@ title: in
slug: Web/SVG/Attribute/in
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/fr/SVG/Attribute)
L'attribut `in` identifie l'entrée pour la primitive de filtre donnée.
diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md
index 87c9cdd6947e98..9d53848397dfe4 100644
--- a/files/fr/web/svg/attribute/seed/index.md
+++ b/files/fr/web/svg/attribute/seed/index.md
@@ -3,6 +3,8 @@ title: seed
slug: Web/SVG/Attribute/seed
---
+{{SVGRef}}
+
« [Page de référence des attributs SVG](/fr/docs/Web/SVG/Attribute)
L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}.
diff --git a/files/fr/web/svg/attribute/viewbox/index.md b/files/fr/web/svg/attribute/viewbox/index.md
index 2259f1b76a4cae..55406409833122 100644
--- a/files/fr/web/svg/attribute/viewbox/index.md
+++ b/files/fr/web/svg/attribute/viewbox/index.md
@@ -3,6 +3,8 @@ title: viewBox
slug: Web/SVG/Attribute/viewBox
---
+{{SVGRef}}
+
« [Sommaire de la référence des attributs SVG](/fr/SVG/Attribute)
L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.
diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md
index e1c41c79305d58..67fcc0204a5920 100644
--- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md
+++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md
@@ -3,6 +3,8 @@ title: Introduction à SVG dans HTML
slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
---
+{{SVGRef}}
+
### Aperçu
Cet article et son exemple associé montrent comment utiliser du [SVG](/fr/SVG) en ligne pour fournir une image de fond à un formulaire. Il montre comment [JavaScript](/fr/JavaScript) et [CSS](/fr/CSS) peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.
diff --git a/files/fr/web/xml/xml_introduction/index.md b/files/fr/web/xml/xml_introduction/index.md
index a17e57b42844a3..fd4a8c9777110e 100644
--- a/files/fr/web/xml/xml_introduction/index.md
+++ b/files/fr/web/xml/xml_introduction/index.md
@@ -3,6 +3,8 @@ title: Introduction à XML
slug: Web/XML/XML_introduction
---
+{{QuickLinksWithSubpages("/fr/docs/Web/XML")}}
+
### Définition
XML, pour _e**X**tensible **M**arkup **L**anguage_ (langage de balisage extensible), est un langage de balisage généraliste [recommandé par le W3C](http://www.w3.org/) comme l'est HTML. XML est un sous-ensemble du langage SGML. Cela signifie que contrairement aux autres langages de balisages, XML n'est pas prédéfini, vous devez définir vos propres balises. Le but principal de ce langage est le partage de données entre différents systèmes, tel qu'Internet.
diff --git a/files/fr/web/xpath/axes/index.md b/files/fr/web/xpath/axes/index.md
index 754d4932c81296..eae078fd16ce20 100644
--- a/files/fr/web/xpath/axes/index.md
+++ b/files/fr/web/xpath/axes/index.md
@@ -3,7 +3,7 @@ title: Axes
slug: Web/XPath/Axes
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
Il existe treize axes différents dans la spécification [XPath](XPath). Un axe représente une relation au nœud de contexte, et il est utilisé pour situer dans l'arbre les autres nœuds par rapport à celui-ci. La liste suivante présente très brièvement les treize axes disponibles et le niveau de leur support dans [Gecko](Gecko).
diff --git a/files/fr/web/xpath/functions/boolean/index.md b/files/fr/web/xpath/functions/boolean/index.md
index 30e4d8579223db..3aa56a7591e675 100644
--- a/files/fr/web/xpath/functions/boolean/index.md
+++ b/files/fr/web/xpath/functions/boolean/index.md
@@ -3,7 +3,7 @@ title: boolean
slug: Web/XPath/Functions/boolean
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
la fonction `boolean` évalue une expression et retourne `true` ou `false`.
diff --git a/files/fr/web/xpath/functions/ceiling/index.md b/files/fr/web/xpath/functions/ceiling/index.md
index 53d2425a960551..2e64f10dfa676c 100644
--- a/files/fr/web/xpath/functions/ceiling/index.md
+++ b/files/fr/web/xpath/functions/ceiling/index.md
@@ -3,7 +3,7 @@ title: ceiling
slug: Web/XPath/Functions/ceiling
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `ceiling` évalue un nombre décimal et retourne le plus petit nombre entier supérieur ou égal au nombre évalué.
diff --git a/files/fr/web/xpath/functions/concat/index.md b/files/fr/web/xpath/functions/concat/index.md
index 928eeeb733564b..52f65b49d62974 100644
--- a/files/fr/web/xpath/functions/concat/index.md
+++ b/files/fr/web/xpath/functions/concat/index.md
@@ -3,7 +3,7 @@ title: concat
slug: Web/XPath/Functions/concat
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `concat` concatène deux ou plusieurs chaînes et retourne la chaîne résultante.
diff --git a/files/fr/web/xpath/functions/contains/index.md b/files/fr/web/xpath/functions/contains/index.md
index 6416f89c894071..f549e7441b327c 100644
--- a/files/fr/web/xpath/functions/contains/index.md
+++ b/files/fr/web/xpath/functions/contains/index.md
@@ -3,7 +3,7 @@ title: contains
slug: Web/XPath/Functions/contains
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `contains` détermine si la chaîne passée en premier argument contient la chaîne passée en second argument et retourne le booléen `true` ou `false`.
diff --git a/files/fr/web/xpath/functions/count/index.md b/files/fr/web/xpath/functions/count/index.md
index 13b5b23058bc67..862ffbb8c359f8 100644
--- a/files/fr/web/xpath/functions/count/index.md
+++ b/files/fr/web/xpath/functions/count/index.md
@@ -3,7 +3,7 @@ title: count
slug: Web/XPath/Functions/count
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `count` compte le nombre de nœuds dans un ensemble de nœuds et retourne un entier.
diff --git a/files/fr/web/xpath/functions/current/index.md b/files/fr/web/xpath/functions/current/index.md
index 66c3ebf7cbc237..9178baa78e1c08 100644
--- a/files/fr/web/xpath/functions/current/index.md
+++ b/files/fr/web/xpath/functions/current/index.md
@@ -3,7 +3,7 @@ title: current
slug: Web/XPath/Functions/current
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `current` peut être utilisée pour obtenir le nœud courant dans une instruction XSLT.
diff --git a/files/fr/web/xpath/functions/document/index.md b/files/fr/web/xpath/functions/document/index.md
index f59e0d5c43a12b..3f34a6c45dc6fa 100644
--- a/files/fr/web/xpath/functions/document/index.md
+++ b/files/fr/web/xpath/functions/document/index.md
@@ -3,7 +3,7 @@ title: document
slug: Web/XPath/Functions/document
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `document` recherche un ensemble de nœuds dans un ou des documents externes et retourne l'ensemble de nœuds résultant.
diff --git a/files/fr/web/xpath/functions/element-available/index.md b/files/fr/web/xpath/functions/element-available/index.md
index 9d053e5e5a4c1e..d6601f1a82823c 100644
--- a/files/fr/web/xpath/functions/element-available/index.md
+++ b/files/fr/web/xpath/functions/element-available/index.md
@@ -3,7 +3,7 @@ title: element-available
slug: Web/XPath/Functions/element-available
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `element-available` détermine si un élément est disponible et retourne la valeur booléenne `true` ou `false`.
diff --git a/files/fr/web/xpath/functions/false/index.md b/files/fr/web/xpath/functions/false/index.md
index 09d9c33cd305c7..ec46a679ad7f72 100644
--- a/files/fr/web/xpath/functions/false/index.md
+++ b/files/fr/web/xpath/functions/false/index.md
@@ -3,7 +3,7 @@ title: "false"
slug: Web/XPath/Functions/false
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `false` retourne le booléen `false`.
diff --git a/files/fr/web/xpath/functions/floor/index.md b/files/fr/web/xpath/functions/floor/index.md
index e7d6f66f6aac19..76595636fd9bf6 100644
--- a/files/fr/web/xpath/functions/floor/index.md
+++ b/files/fr/web/xpath/functions/floor/index.md
@@ -3,7 +3,7 @@ title: floor
slug: Web/XPath/Functions/floor
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `floor` évalue un nombre décimal et retourne le plus grand nombre entier inférieur ou égal au nombre évalué.
diff --git a/files/fr/web/xpath/functions/format-number/index.md b/files/fr/web/xpath/functions/format-number/index.md
index a8fca3342b2db0..2e1e92d7b6b9c8 100644
--- a/files/fr/web/xpath/functions/format-number/index.md
+++ b/files/fr/web/xpath/functions/format-number/index.md
@@ -3,7 +3,7 @@ title: format-number
slug: Web/XPath/Functions/format-number
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `format-number` évalue un nombre et retourne une chaîne représentant le nombre dans un format donné.
diff --git a/files/fr/web/xpath/functions/function-available/index.md b/files/fr/web/xpath/functions/function-available/index.md
index 5e31d77bf13183..475192fbf93c98 100644
--- a/files/fr/web/xpath/functions/function-available/index.md
+++ b/files/fr/web/xpath/functions/function-available/index.md
@@ -3,7 +3,7 @@ title: function-available
slug: Web/XPath/Functions/function-available
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `function-available` détermine si une fonction donnée est disponible et retourne le booléen `true` ou `false`.
diff --git a/files/fr/web/xpath/functions/generate-id/index.md b/files/fr/web/xpath/functions/generate-id/index.md
index 00ef80fb6a5eac..deac71d5fa6ae5 100644
--- a/files/fr/web/xpath/functions/generate-id/index.md
+++ b/files/fr/web/xpath/functions/generate-id/index.md
@@ -3,7 +3,7 @@ title: generate-id
slug: Web/XPath/Functions/generate-id
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `generate-id` génère un identifiant `id` unique pour le premier nœud d'un ensemble de nœuds donné et retourne une chaîne contenant cet `id`.
diff --git a/files/fr/web/xpath/functions/id/index.md b/files/fr/web/xpath/functions/id/index.md
index e5cadec0ce2fca..ea5445a7b5fcd6 100644
--- a/files/fr/web/xpath/functions/id/index.md
+++ b/files/fr/web/xpath/functions/id/index.md
@@ -3,7 +3,7 @@ title: id
slug: Web/XPath/Functions/id
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `id` recherche les nœuds correspondant aux identifiants `id` donnés et retourne un ensemble de nœuds contenant les nœuds identifiés.
diff --git a/files/fr/web/xpath/functions/index.md b/files/fr/web/xpath/functions/index.md
index c227e92f59e19b..e61734f1e7f3a3 100644
--- a/files/fr/web/xpath/functions/index.md
+++ b/files/fr/web/xpath/functions/index.md
@@ -3,6 +3,8 @@ title: Fonctions
slug: Web/XPath/Functions
---
+{{XsltSidebar}}
+
{{ XsltRef() }} La liste ci-dessous regroupe les principales fonctions de [XPath](/fr/docs/Web/XPath) et les ajouts à XPath qui sont spécifiques à [XSLT](/fr/docs/Web/XSLT). Chaque lien fournit pour la fonction correspondante description, syntaxe, liste d'arguments, types de résultats, description originelle dans les recommandations du W3C, et niveau de support actuel dans [Gecko](/fr/docs/Web//Gecko). Pour plus d'informations sur l'utilisation des fonctions XPath/XSLT, reportez-vous à la page [Autres ressources](/fr/docs/Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources).
- [boolean()](Fonctions/boolean)
diff --git a/files/fr/web/xpath/functions/key/index.md b/files/fr/web/xpath/functions/key/index.md
index 5fe5ae017e248d..abc393d9997851 100644
--- a/files/fr/web/xpath/functions/key/index.md
+++ b/files/fr/web/xpath/functions/key/index.md
@@ -3,7 +3,7 @@ title: key
slug: Web/XPath/Functions/key
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `key` retourne un ensemble de nœuds ayant la valeur donnée pour la clef donnée.
diff --git a/files/fr/web/xpath/functions/lang/index.md b/files/fr/web/xpath/functions/lang/index.md
index d00d822cb3245f..63439fdc6feace 100644
--- a/files/fr/web/xpath/functions/lang/index.md
+++ b/files/fr/web/xpath/functions/lang/index.md
@@ -3,7 +3,7 @@ title: lang
slug: Web/XPath/Functions/lang
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `lang` détermine si le nœud de contexte correspond à la langue indiquée et retourne le booléen `true` ou `false`.
diff --git a/files/fr/web/xpath/functions/last/index.md b/files/fr/web/xpath/functions/last/index.md
index d08176e0331421..f66d9e4771c051 100644
--- a/files/fr/web/xpath/functions/last/index.md
+++ b/files/fr/web/xpath/functions/last/index.md
@@ -3,7 +3,7 @@ title: last
slug: Web/XPath/Functions/last
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `last` retourne un nombre égal à la taille du contexte dans le contexte d'évaluation d'expression.
diff --git a/files/fr/web/xpath/functions/local-name/index.md b/files/fr/web/xpath/functions/local-name/index.md
index 8f4f899d1ee928..d5bfa919765386 100644
--- a/files/fr/web/xpath/functions/local-name/index.md
+++ b/files/fr/web/xpath/functions/local-name/index.md
@@ -3,7 +3,7 @@ title: local-name
slug: Web/XPath/Functions/local-name
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `local-name` retourne une chaîne représentant le nom local du premier nœud d'un ensemble de nœuds donné.
diff --git a/files/fr/web/xpath/functions/name/index.md b/files/fr/web/xpath/functions/name/index.md
index 30f6c649403949..6d8ef1d2faa47b 100644
--- a/files/fr/web/xpath/functions/name/index.md
+++ b/files/fr/web/xpath/functions/name/index.md
@@ -3,7 +3,7 @@ title: name
slug: Web/XPath/Functions/name
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `name` retourne une chaîne représentant le QName du premier nœud d'un ensemble de nœuds donné.
diff --git a/files/fr/web/xpath/functions/namespace-uri/index.md b/files/fr/web/xpath/functions/namespace-uri/index.md
index 703c6f4f060d93..85eed84e1f62d3 100644
--- a/files/fr/web/xpath/functions/namespace-uri/index.md
+++ b/files/fr/web/xpath/functions/namespace-uri/index.md
@@ -3,7 +3,7 @@ title: namespace-uri
slug: Web/XPath/Functions/namespace-uri
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `namespace-uri` retourne une chaîne représentant l'URI de l'espace de nommage du premier nœud d'un ensemble de nœuds donné.
diff --git a/files/fr/web/xpath/functions/normalize-space/index.md b/files/fr/web/xpath/functions/normalize-space/index.md
index e68f985a73ca69..8723506b3e9550 100644
--- a/files/fr/web/xpath/functions/normalize-space/index.md
+++ b/files/fr/web/xpath/functions/normalize-space/index.md
@@ -3,7 +3,7 @@ title: normalize-space
slug: Web/XPath/Functions/normalize-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `normalize-space` supprime les espaces de début et de fin d'une chaîne et remplace les successions d'espaces par une seule puis retourne la chaîne résultante.
diff --git a/files/fr/web/xpath/functions/not/index.md b/files/fr/web/xpath/functions/not/index.md
index d7f05c7d1e2d18..970cd901c74ee1 100644
--- a/files/fr/web/xpath/functions/not/index.md
+++ b/files/fr/web/xpath/functions/not/index.md
@@ -3,7 +3,7 @@ title: not
slug: Web/XPath/Functions/not
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `not` évalue une expression booléenne et retourne la valeur opposée.
diff --git a/files/fr/web/xpath/functions/number/index.md b/files/fr/web/xpath/functions/number/index.md
index 6c6ea481a5934e..0ef0e68de73e9b 100644
--- a/files/fr/web/xpath/functions/number/index.md
+++ b/files/fr/web/xpath/functions/number/index.md
@@ -3,7 +3,7 @@ title: number
slug: Web/XPath/Functions/number
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `number` convertit un objet en un nombre et retourne ce nombre.
diff --git a/files/fr/web/xpath/functions/position/index.md b/files/fr/web/xpath/functions/position/index.md
index c01d48f19005da..09d058a44abe67 100644
--- a/files/fr/web/xpath/functions/position/index.md
+++ b/files/fr/web/xpath/functions/position/index.md
@@ -3,7 +3,7 @@ title: position
slug: Web/XPath/Functions/position
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `position` retourne un nombre égal à la position du contexte dans le contexte d'évaluation d'expression.
diff --git a/files/fr/web/xpath/functions/round/index.md b/files/fr/web/xpath/functions/round/index.md
index ef0687ae41ada4..076200dbbd61dc 100644
--- a/files/fr/web/xpath/functions/round/index.md
+++ b/files/fr/web/xpath/functions/round/index.md
@@ -3,7 +3,7 @@ title: round
slug: Web/XPath/Functions/round
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `round` retourne le nombre entier le plus proche d'un nombre donné.
diff --git a/files/fr/web/xpath/functions/starts-with/index.md b/files/fr/web/xpath/functions/starts-with/index.md
index dd220d933651b6..e8c68d95f42bf1 100644
--- a/files/fr/web/xpath/functions/starts-with/index.md
+++ b/files/fr/web/xpath/functions/starts-with/index.md
@@ -3,7 +3,7 @@ title: starts-with
slug: Web/XPath/Functions/starts-with
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `starts-with` vérifie si la première chaîne débute par la seconde, et retourne `true` ou `false`.
diff --git a/files/fr/web/xpath/functions/string-length/index.md b/files/fr/web/xpath/functions/string-length/index.md
index c639d6811b4d1a..f39421a2ff0111 100644
--- a/files/fr/web/xpath/functions/string-length/index.md
+++ b/files/fr/web/xpath/functions/string-length/index.md
@@ -3,7 +3,7 @@ title: string-length
slug: Web/XPath/Functions/string-length
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `string-length` retourne le nombre de caractères dans une chaîne donnée.
diff --git a/files/fr/web/xpath/functions/string/index.md b/files/fr/web/xpath/functions/string/index.md
index 37230b1513b20c..25e096d999650b 100644
--- a/files/fr/web/xpath/functions/string/index.md
+++ b/files/fr/web/xpath/functions/string/index.md
@@ -3,7 +3,7 @@ title: string
slug: Web/XPath/Functions/string
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `string` convertit l'argument passé en une chaîne.
diff --git a/files/fr/web/xpath/functions/substring-after/index.md b/files/fr/web/xpath/functions/substring-after/index.md
index 49171e9f50c3c7..7b77a3f4f165f9 100644
--- a/files/fr/web/xpath/functions/substring-after/index.md
+++ b/files/fr/web/xpath/functions/substring-after/index.md
@@ -3,7 +3,7 @@ title: substring-after
slug: Web/XPath/Functions/substring-after
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `substring-after()` retourne la partie d'une chaîne donnée suivant une sous-chaîne donnée.
diff --git a/files/fr/web/xpath/functions/substring-before/index.md b/files/fr/web/xpath/functions/substring-before/index.md
index 22a1b85904b8b1..ede540ccb8cd1a 100644
--- a/files/fr/web/xpath/functions/substring-before/index.md
+++ b/files/fr/web/xpath/functions/substring-before/index.md
@@ -3,7 +3,7 @@ title: substring-before
slug: Web/XPath/Functions/substring-before
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `substring-before()` retourne retourne la partie d'une chaîne donnée précédant une sous-chaîne donnée.
diff --git a/files/fr/web/xpath/functions/substring/index.md b/files/fr/web/xpath/functions/substring/index.md
index 14269b6a075f65..537769d645c83e 100644
--- a/files/fr/web/xpath/functions/substring/index.md
+++ b/files/fr/web/xpath/functions/substring/index.md
@@ -3,7 +3,7 @@ title: substring
slug: Web/XPath/Functions/substring
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `substring` retourne une partie d'une chaîne donnée.
diff --git a/files/fr/web/xpath/functions/sum/index.md b/files/fr/web/xpath/functions/sum/index.md
index f172076c9e0ae2..d00bc89caa3112 100644
--- a/files/fr/web/xpath/functions/sum/index.md
+++ b/files/fr/web/xpath/functions/sum/index.md
@@ -3,7 +3,7 @@ title: sum
slug: Web/XPath/Functions/sum
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `sum` retourne un nombre qui est la somme des valeurs numériques de chaque nœud d'un ensemble de nœuds donné.
diff --git a/files/fr/web/xpath/functions/system-property/index.md b/files/fr/web/xpath/functions/system-property/index.md
index 907730a724dbe1..842feb957108e7 100644
--- a/files/fr/web/xpath/functions/system-property/index.md
+++ b/files/fr/web/xpath/functions/system-property/index.md
@@ -3,7 +3,7 @@ title: system-property
slug: Web/XPath/Functions/system-property
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `system-property()` retourne un objet représentant la propriété système donnée.
diff --git a/files/fr/web/xpath/functions/translate/index.md b/files/fr/web/xpath/functions/translate/index.md
index 44fab4a2ad5418..85369fd0183a60 100644
--- a/files/fr/web/xpath/functions/translate/index.md
+++ b/files/fr/web/xpath/functions/translate/index.md
@@ -3,7 +3,7 @@ title: translate
slug: Web/XPath/Functions/translate
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `translate` évalue une chaîne et un ensemble de caractères à traduire, et retourne la chaîne traduite.
diff --git a/files/fr/web/xpath/functions/true/index.md b/files/fr/web/xpath/functions/true/index.md
index a33a08b7f4f493..66a914d63da60b 100644
--- a/files/fr/web/xpath/functions/true/index.md
+++ b/files/fr/web/xpath/functions/true/index.md
@@ -3,7 +3,7 @@ title: "true"
slug: Web/XPath/Functions/true
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `true` retourne la valeur booléenne `true`.
diff --git a/files/fr/web/xpath/functions/unparsed-entity-url/index.md b/files/fr/web/xpath/functions/unparsed-entity-url/index.md
index a40faeb34010cf..00973051f628c8 100644
--- a/files/fr/web/xpath/functions/unparsed-entity-url/index.md
+++ b/files/fr/web/xpath/functions/unparsed-entity-url/index.md
@@ -3,7 +3,7 @@ title: unparsed-entity-url
slug: Web/XPath/Functions/unparsed-entity-url
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
La fonction `unparsed-entity-url()` retourne l'URI d'une entité non analysée avec le nom donné. C'est une donnée non-XML référencée dans le DTD du document source.
diff --git a/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.md b/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.md
index 8834dbbf15c4bf..b4335b61ec447e 100644
--- a/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.md
+++ b/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.md
@@ -3,6 +3,8 @@ title: Introduction à l'utilisation de XPath avec JavaScript
slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript
---
+{{XsltSidebar}}
+
Ce document décrit l'interface pour utiliser [XPath](/fr/docs/Web/XPath) dans JavaScript, que ce soit en interne, dans les extensions et depuis les sites Web. Mozilla implémente une partie importante de [DOM 3 XPath (en)](https://www.w3.org/TR/2004/NOTE-DOM-Level-3-XPath-20040226/). Cela signifie que les expressions XPath peuvent être utilisées sur des documents HTML et XML.
La principale interface pour l'utilisation de XPath est la fonction [`evaluate()`](/fr/docs/Web/API/Document/evaluate) de l'objet [`document`](/fr/docs/Web/API/Document).
diff --git a/files/fr/web/xslt/element/apply-imports/index.md b/files/fr/web/xslt/element/apply-imports/index.md
index 502c2ccf53a2bc..f790951fcecea7 100644
--- a/files/fr/web/xslt/element/apply-imports/index.md
+++ b/files/fr/web/xslt/element/apply-imports/index.md
@@ -3,7 +3,7 @@ title: apply-imports
slug: Web/XSLT/Element/apply-imports
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément ``, utilisé la plupart du temps dans les feuilles de styles complexes, est assez mystérieux. Les règles de priorité de l'importation imposent que les règles de modèles des feuilles de styles principales aient une priorité supérieure aux règles de modèles des feuilles de styles importées. Cependant, il est parfois utile de forcer le processeur à utiliser une règle de modèle de la feuille de styles importée (de priorité plus basse) plutôt que la règle équivalente de la feuille de styles principale.
diff --git a/files/fr/web/xslt/element/apply-templates/index.md b/files/fr/web/xslt/element/apply-templates/index.md
index abc8648ccbb120..0ae21eddf67c94 100644
--- a/files/fr/web/xslt/element/apply-templates/index.md
+++ b/files/fr/web/xslt/element/apply-templates/index.md
@@ -3,7 +3,7 @@ title: apply-templates
slug: Web/XSLT/Element/apply-templates
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` sélectionne un ensemble de nœuds dans l'arbre d'entrée et demande au processeur de leur appliquer les modèles appropriés.
diff --git a/files/fr/web/xslt/element/attribute-set/index.md b/files/fr/web/xslt/element/attribute-set/index.md
index 4cea35f8345411..06e5f206c80b64 100644
--- a/files/fr/web/xslt/element/attribute-set/index.md
+++ b/files/fr/web/xslt/element/attribute-set/index.md
@@ -3,7 +3,7 @@ title: attribute-set
slug: Web/XSLT/Element/attribute-set
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` crée un ensemble nommé d'attributs, qui peut être appliqué dans son intégralité au document de sortie, de façon similaire aux styles CSS nommés.
diff --git a/files/fr/web/xslt/element/attribute/index.md b/files/fr/web/xslt/element/attribute/index.md
index 89c6121a92606c..88305becd55720 100644
--- a/files/fr/web/xslt/element/attribute/index.md
+++ b/files/fr/web/xslt/element/attribute/index.md
@@ -3,7 +3,7 @@ title: attribute
slug: Web/XSLT/Element/attribute
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` crée un attribut dans le document de sortie, en utilisant n'importe quelle donnée accessible depuis la feuille de styles. L'élément **doit** être la première chose définie dans l'élément du document de sortie pour lequel il détermine les valeurs d'attributs.
diff --git a/files/fr/web/xslt/element/call-template/index.md b/files/fr/web/xslt/element/call-template/index.md
index d676295a9443b3..ec849c9a7ed3da 100644
--- a/files/fr/web/xslt/element/call-template/index.md
+++ b/files/fr/web/xslt/element/call-template/index.md
@@ -3,7 +3,7 @@ title: call-template
slug: Web/XSLT/Element/call-template
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` invoque un modèle nommé.
diff --git a/files/fr/web/xslt/element/choose/index.md b/files/fr/web/xslt/element/choose/index.md
index cd0305c661018c..c16d90368e1112 100644
--- a/files/fr/web/xslt/element/choose/index.md
+++ b/files/fr/web/xslt/element/choose/index.md
@@ -3,7 +3,7 @@ title: choose
slug: Web/XSLT/Element/choose
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit un choix parmi un certain nombre d'alternatives. Il se comporte comme l'instruction switch d'un langage procédural.
diff --git a/files/fr/web/xslt/element/comment/index.md b/files/fr/web/xslt/element/comment/index.md
index 62fc9ffd2676c2..12ac3380e4726a 100644
--- a/files/fr/web/xslt/element/comment/index.md
+++ b/files/fr/web/xslt/element/comment/index.md
@@ -3,7 +3,7 @@ title: comment
slug: Web/XSLT/Element/comment
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` écrit un commentaire dans le document de sortie. Il ne doit contenir que du texte.
diff --git a/files/fr/web/xslt/element/copy-of/index.md b/files/fr/web/xslt/element/copy-of/index.md
index d3a618c6e3fcee..3b7a80bc66bf77 100644
--- a/files/fr/web/xslt/element/copy-of/index.md
+++ b/files/fr/web/xslt/element/copy-of/index.md
@@ -3,7 +3,7 @@ title: copy-of
slug: Web/XSLT/Element/copy-of
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` fait une copie complète dans le document de sortie (incluant les nœuds enfants) de tout ce que l'élément sélectionné spécifie.
diff --git a/files/fr/web/xslt/element/copy/index.md b/files/fr/web/xslt/element/copy/index.md
index 7e7d440c6a6502..4bc0f372a8142c 100644
--- a/files/fr/web/xslt/element/copy/index.md
+++ b/files/fr/web/xslt/element/copy/index.md
@@ -3,7 +3,7 @@ title: copy
slug: Web/XSLT/Element/copy
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` transfert une copie limitée (le nœud et tous les nœuds d'espace de nommage associés) du nœud courant vers le document de sortie. Il ne copie aucun enfant ni attribut du nœud courant.
diff --git a/files/fr/web/xslt/element/decimal-format/index.md b/files/fr/web/xslt/element/decimal-format/index.md
index 3216f18717671f..796b18f0815c54 100644
--- a/files/fr/web/xslt/element/decimal-format/index.md
+++ b/files/fr/web/xslt/element/decimal-format/index.md
@@ -3,7 +3,7 @@ title: decimal-format
slug: Web/XSLT/Element/decimal-format
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit les caractères et symboles à utiliser lors de la conversion de nombres en chaînes à l'aide de la fonction `format-number( )`.
diff --git a/files/fr/web/xslt/element/element/index.md b/files/fr/web/xslt/element/element/index.md
index 658583fbd1f5fd..71821fd725dadf 100644
--- a/files/fr/web/xslt/element/element/index.md
+++ b/files/fr/web/xslt/element/element/index.md
@@ -3,7 +3,7 @@ title: element
slug: Web/XSLT/Element/element
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` crée un élément dans le document de sortie.
diff --git a/files/fr/web/xslt/element/fallback/index.md b/files/fr/web/xslt/element/fallback/index.md
index 0ff4ab52d96051..7a9d0fbe850b39 100644
--- a/files/fr/web/xslt/element/fallback/index.md
+++ b/files/fr/web/xslt/element/fallback/index.md
@@ -3,7 +3,7 @@ title: fallback
slug: Web/XSLT/Element/fallback
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit le modèle à utiliser si un élément d'extension donné (ou, éventuellement, une nouvelle version) n'est pas supporté.
diff --git a/files/fr/web/xslt/element/for-each/index.md b/files/fr/web/xslt/element/for-each/index.md
index 27d7a9ddf31f58..307bdf2fe6118c 100644
--- a/files/fr/web/xslt/element/for-each/index.md
+++ b/files/fr/web/xslt/element/for-each/index.md
@@ -3,7 +3,7 @@ title: for-each
slug: Web/XSLT/Element/for-each
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` sélectionne un ensemble de nœuds et traite chacun d'eux de la même façon. Il est souvent utilisé pour des itérations sur un ensemble de nœuds ou pour changer le nœud courant. Si un ou plusieurs éléments `` apparaissent comme enfants de cet élément, le tri est effectué avant le traitement. Autrement, les nœuds sont traités dans l'ordre d'apparition dans le document.
diff --git a/files/fr/web/xslt/element/if/index.md b/files/fr/web/xslt/element/if/index.md
index 26b66beb4ff7de..4cd17376b59947 100644
--- a/files/fr/web/xslt/element/if/index.md
+++ b/files/fr/web/xslt/element/if/index.md
@@ -3,7 +3,7 @@ title: if
slug: Web/XSLT/Element/if
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` regroupe un attribut test et un modèle. Si le test renvoie `true`, le modèle est appliqué. En cela, il est très semblable à l'instruction `if` d'autres langages. Cependant, pour simuler un `if-then-else`, vous devrez utilisez l'élément `` avec un descendant `` et un ``.
diff --git a/files/fr/web/xslt/element/import/index.md b/files/fr/web/xslt/element/import/index.md
index b12ee0f820d0be..5055863e1b31c6 100644
--- a/files/fr/web/xslt/element/import/index.md
+++ b/files/fr/web/xslt/element/import/index.md
@@ -3,7 +3,7 @@ title: import
slug: Web/XSLT/Element/import
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` est un élément de haut niveau qui sert à importer le contenu d'une feuille de styles dans une autre. Généralement, le contenu importé a une priorité inférieure à celui de la feuille qui effectue l'importation. Ceci contraste avec [\](/fr/docs/Web/XSLT/include) où les contenus des deux feuilles ont exactement la même priorité.
diff --git a/files/fr/web/xslt/element/include/index.md b/files/fr/web/xslt/element/include/index.md
index b9bda364e35ec5..3f1104c272ff5c 100644
--- a/files/fr/web/xslt/element/include/index.md
+++ b/files/fr/web/xslt/element/include/index.md
@@ -3,7 +3,7 @@ title: include
slug: Web/XSLT/Element/include
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` fusionne les contenus de deux feuilles de styles. Contrairement à l'élément [\](/fr/XSLT/import), les contenus des deux feuilles de styles fusionnées ont la même priorité.
diff --git a/files/fr/web/xslt/element/index.md b/files/fr/web/xslt/element/index.md
index f0b881c96fc210..1889791e94ca98 100644
--- a/files/fr/web/xslt/element/index.md
+++ b/files/fr/web/xslt/element/index.md
@@ -3,6 +3,8 @@ title: Éléments
slug: Web/XSLT/Element
---
+{{XsltSidebar}}
+
{{ XsltRef() }} Ce document traite de deux types d'éléments : les éléments de haut niveau, et les instructions. Un élément de haut niveau doit toujours apparaître en tant qu'enfant de `` ou de ``. Une instruction, de son côté, est associée à un modèle. Une feuille de style peut comporter plusieurs modèles. Un troisième type d'élément, que nous n'aborderons pas ici, est le « Literal Result Element (LRE) ». Un LRE appartient également à un modèle. Le terme regroupe tout ce qui n'est pas une instruction et qui doit être recopié tel-quel dans le document de sortie, par exemple, un élément `` déclare une clef nommée qui peut être utilisée dans toute la feuille de styles à l'aide de la fonction `key( )`.
diff --git a/files/fr/web/xslt/element/message/index.md b/files/fr/web/xslt/element/message/index.md
index 2fafccafe02aff..82d298b269f59a 100644
--- a/files/fr/web/xslt/element/message/index.md
+++ b/files/fr/web/xslt/element/message/index.md
@@ -3,7 +3,7 @@ title: message
slug: Web/XSLT/Element/message
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` écrit un message de sortie (dans la console JavaScript) et, éventuellement, met fin à l'exécution de la feuille de styles. Il peut être utile pour le débogage.
diff --git a/files/fr/web/xslt/element/namespace-alias/index.md b/files/fr/web/xslt/element/namespace-alias/index.md
index 756776bc0e09a6..fba082e04d871e 100644
--- a/files/fr/web/xslt/element/namespace-alias/index.md
+++ b/files/fr/web/xslt/element/namespace-alias/index.md
@@ -3,7 +3,7 @@ title: namespace-alias
slug: Web/XSLT/Element/namespace-alias
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` est un dispositif rarement utilisé qui établit une équivalence entre un espace de nommage d'une feuille de styles et un espace de nommage différent dans l'arbre de sortie. L'utilisation la plus courante de cet élément est la génération d'une feuille de styles depuis une autre feuille de styles. Pour éviter qu'un élément résultat correctement préfixé par `xsl:` (qui doit être copié tel quel dans l'arbre résultant) soit interprêté à tort par le processeur, il lui est assigné un espace de nommage temporaire qui est convenablement reconverti en l'espace de nommage XSLT dans l'arbre de sortie.
diff --git a/files/fr/web/xslt/element/number/index.md b/files/fr/web/xslt/element/number/index.md
index 3590261164f2c2..0d111a1cc11247 100644
--- a/files/fr/web/xslt/element/number/index.md
+++ b/files/fr/web/xslt/element/number/index.md
@@ -3,7 +3,7 @@ title: number
slug: Web/XSLT/Element/number
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` compte des éléments de façon séquentielle. Il peut également être utilisé
pour formater rapidement un nombre.
diff --git a/files/fr/web/xslt/element/otherwise/index.md b/files/fr/web/xslt/element/otherwise/index.md
index 86c91722926473..29e6c75272e1ce 100644
--- a/files/fr/web/xslt/element/otherwise/index.md
+++ b/files/fr/web/xslt/element/otherwise/index.md
@@ -3,7 +3,7 @@ title: otherwise
slug: Web/XSLT/Element/otherwise
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` est utilisé pour définir une action qui doit être exécutée lorsqu'aucune condition `` ne s'applique. Elle est comparable aux instructions `else` ou `default` d'autres langages de programmation.
diff --git a/files/fr/web/xslt/element/output/index.md b/files/fr/web/xslt/element/output/index.md
index 1767a1df96129e..4ebcf3eb7c0d92 100644
--- a/files/fr/web/xslt/element/output/index.md
+++ b/files/fr/web/xslt/element/output/index.md
@@ -3,7 +3,7 @@ title: output
slug: Web/XSLT/Element/output
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` contrôle les caractéristiques du document de sortie. Pour fonctionner correctement dans Netscape, cet élément doit être utilisé, avec l'attribut `method`. À partir de Netscape 7.0, `method="text"` fonctionne comme prévu.
diff --git a/files/fr/web/xslt/element/param/index.md b/files/fr/web/xslt/element/param/index.md
index 2710608f34ea67..0d9f5b948119dc 100644
--- a/files/fr/web/xslt/element/param/index.md
+++ b/files/fr/web/xslt/element/param/index.md
@@ -3,7 +3,7 @@ title: param
slug: Web/XSLT/Element/param
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit un paramètre par son nom et, éventuellement, lui attribue une valeur par défaut. Lorsqu'il est utilisé comme élément de premier niveau, le paramètre est global. Utilisé dans un élément ``, le paramètre est local à ce modèle. Dans ce dernier cas, il doit être le premier élément enfant du modèle.
diff --git a/files/fr/web/xslt/element/preserve-space/index.md b/files/fr/web/xslt/element/preserve-space/index.md
index a8f0a4aabbcb59..8aafb9e581631e 100644
--- a/files/fr/web/xslt/element/preserve-space/index.md
+++ b/files/fr/web/xslt/element/preserve-space/index.md
@@ -3,7 +3,7 @@ title: preserve-space
slug: Web/XSLT/Element/preserve-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit les éléments du document source pour lesquels les espaces doivent être préservées. Si il y a plus d'un élément, leurs noms doivent être séparés par des espaces. La politique par défaut est de conserver les espaces, cet élément n'est donc utile que pour contrer l'effet de ``.
diff --git a/files/fr/web/xslt/element/processing-instruction/index.md b/files/fr/web/xslt/element/processing-instruction/index.md
index 567f7074b6fd79..11fc3b73ea7b60 100644
--- a/files/fr/web/xslt/element/processing-instruction/index.md
+++ b/files/fr/web/xslt/element/processing-instruction/index.md
@@ -3,7 +3,7 @@ title: processing-instruction
slug: Web/XSLT/Element/processing-instruction
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` écrit une instruction de traitement dans le document de sortie.
diff --git a/files/fr/web/xslt/element/sort/index.md b/files/fr/web/xslt/element/sort/index.md
index c05277a9265fbe..d3872b1c2bcda9 100644
--- a/files/fr/web/xslt/element/sort/index.md
+++ b/files/fr/web/xslt/element/sort/index.md
@@ -3,7 +3,7 @@ title: sort
slug: Web/XSLT/Element/sort
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit les paramètres de tri pour des nœuds sélectionnés par `` ou par ``.
diff --git a/files/fr/web/xslt/element/strip-space/index.md b/files/fr/web/xslt/element/strip-space/index.md
index 248156625ead89..93ace04e5230ce 100644
--- a/files/fr/web/xslt/element/strip-space/index.md
+++ b/files/fr/web/xslt/element/strip-space/index.md
@@ -3,7 +3,7 @@ title: strip-space
slug: Web/XSLT/Element/strip-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit les éléments du document source dont les noeuds descendants ne contenant que des espaces doivent être supprimés.
diff --git a/files/fr/web/xslt/element/stylesheet/index.md b/files/fr/web/xslt/element/stylesheet/index.md
index 1c20ef24c033a6..bfa1d6b98097ca 100644
--- a/files/fr/web/xslt/element/stylesheet/index.md
+++ b/files/fr/web/xslt/element/stylesheet/index.md
@@ -3,7 +3,7 @@ title: stylesheet
slug: Web/XSLT/Element/stylesheet
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` (ou son équivalent ``) est l'élément le plus externe d'une feuille de style, celui qui contient tout les autres éléments.
diff --git a/files/fr/web/xslt/element/template/index.md b/files/fr/web/xslt/element/template/index.md
index 4a6297633c0e6a..a752a88644f1a5 100644
--- a/files/fr/web/xslt/element/template/index.md
+++ b/files/fr/web/xslt/element/template/index.md
@@ -3,7 +3,7 @@ title: template
slug: Web/XSLT/Element/template
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit un modèle produisant une sortie. Au moins l'un des atttributs match et set doit posséder une valeur.
diff --git a/files/fr/web/xslt/element/text/index.md b/files/fr/web/xslt/element/text/index.md
index 30d93edd445997..115bb4d9ceffbd 100644
--- a/files/fr/web/xslt/element/text/index.md
+++ b/files/fr/web/xslt/element/text/index.md
@@ -3,7 +3,7 @@ title: text
slug: Web/XSLT/Element/text
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` écrit un texte littéral dans l'arbre de sortie. Il peut contenir des `#PCDATA`, du texte littéral, et des références aux entités.
diff --git a/files/fr/web/xslt/element/transform/index.md b/files/fr/web/xslt/element/transform/index.md
index 0e1238b68b868c..b90bc23e8fe354 100644
--- a/files/fr/web/xslt/element/transform/index.md
+++ b/files/fr/web/xslt/element/transform/index.md
@@ -3,7 +3,7 @@ title: transform
slug: Web/XSLT/Element/transform
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` est l'équivalent exact de l'élément [``](/fr/XSLT/stylesheet).
diff --git a/files/fr/web/xslt/element/value-of/index.md b/files/fr/web/xslt/element/value-of/index.md
index 90cb5e1e6e2f91..93716d50c5d81e 100644
--- a/files/fr/web/xslt/element/value-of/index.md
+++ b/files/fr/web/xslt/element/value-of/index.md
@@ -3,7 +3,7 @@ title: value-of
slug: Web/XSLT/Element/value-of
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` évalue une expression XPath, la convertit en chaîne et écrit cette chaîne dans l'arbre de sortie.
diff --git a/files/fr/web/xslt/element/variable/index.md b/files/fr/web/xslt/element/variable/index.md
index 5bf053a2c475cc..93dcf3eef8a8f8 100644
--- a/files/fr/web/xslt/element/variable/index.md
+++ b/files/fr/web/xslt/element/variable/index.md
@@ -3,7 +3,7 @@ title: variable
slug: Web/XSLT/Element/variable
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` déclare une variable globale ou locale dans une feuille de style et lui attribue une valeur. Comme XSLT ne permet pas d'effet de bord, une fois que la valeur de la variable est établie, elle reste la même jusqu'à ce que la variable soit hors de portée.
diff --git a/files/fr/web/xslt/element/when/index.md b/files/fr/web/xslt/element/when/index.md
index 701c8de3d356f1..66da59a2251da0 100644
--- a/files/fr/web/xslt/element/when/index.md
+++ b/files/fr/web/xslt/element/when/index.md
@@ -3,7 +3,7 @@ title: when
slug: Web/XSLT/Element/when
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` apparaît toujours dans un élément ``, et se comporte comme une structure conditionelle 'case'.
diff --git a/files/fr/web/xslt/element/with-param/index.md b/files/fr/web/xslt/element/with-param/index.md
index 68348a2c02ca8b..575de83db55209 100644
--- a/files/fr/web/xslt/element/with-param/index.md
+++ b/files/fr/web/xslt/element/with-param/index.md
@@ -3,7 +3,7 @@ title: with-param
slug: Web/XSLT/Element/with-param
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
L'élément `` définit la valeur d'un paramètre à passer à un modèle.
diff --git a/files/fr/web/xslt/pi_parameters/index.md b/files/fr/web/xslt/pi_parameters/index.md
index 90b7bce28075de..f41c42be7acd2b 100644
--- a/files/fr/web/xslt/pi_parameters/index.md
+++ b/files/fr/web/xslt/pi_parameters/index.md
@@ -3,6 +3,8 @@ title: Paramètres des instructions de traitement
slug: Web/XSLT/PI_Parameters
---
+{{XsltSidebar}}
+
### Présentation
XSLT permet de passer des paramètres à une feuille de style lors de son exécution. C'était déjà possible depuis quelques temps dans l'[XSLTProcessor](/fr/XSLTProcessor) sous JavaScript, mais pas lors de l'utilisation de l'instruction de traitement (_PI_, pour Processing Instruction) ``.
diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md
index bb2989566501f4..b59f5b067c6af0 100644
--- a/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md
+++ b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md
@@ -3,6 +3,8 @@ title: Présentation
slug: Web/XSLT/Transforming_XML_with_XSLT/An_Overview
---
+{{XsltSidebar}}
+
[« Transformations XML avec XSLT](/fr/docs/Transformations_XML_avec_XSLT)
L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une étude approfondie de celui-ci n'est pas l'objectif de ce document, mais une présentation succincte des concepts fondamentaux vous aidera à mieux appréhender la description des capacités de Netscape qui suit.
diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md
index e09a4d02f0cd14..43d03d3400d9e3 100644
--- a/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md
+++ b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: e14e4830bcd43de164623aaf787fbd695be31d91
---
+{{XsltSidebar}}
+
[Transformations XML avec XSLT](/fr/docs/Web/XSLT/Transforming_XML_with_XSLT)
## Publications
diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/index.md
index ce7f3e704e3435..a17c479b4bb459 100644
--- a/files/fr/web/xslt/transforming_xml_with_xslt/index.md
+++ b/files/fr/web/xslt/transforming_xml_with_xslt/index.md
@@ -3,6 +3,8 @@ title: Transformations XML avec XSLT
slug: Web/XSLT/Transforming_XML_with_XSLT
---
+{{XsltSidebar}}
+
### [Présentation](/fr/Transformations_XML_avec_XSLT/Présentation)
La séparation du contenu et de la présentation est l'une des caractéristiques principale du [XML](/fr/XML). La structure d'un document XML est conçue pour refléter et clarifier les relations entre les différents aspects du contenu lui-même, sans l'obsurcir par la nécessité d'y intégrer des indications sur la présentation qui lui sera appliquée ensuite. Cette structure intelligente est particulièrement importante, car de plus en plus de transferts de données sont automatisés et se font entre des machines très hétérogènes reliées par un réseau.
diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
index 3440827030daa3..a9733197cc5f06 100644
--- a/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
+++ b/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
@@ -3,6 +3,8 @@ title: Transformations_XML_avec_XSLT/La_référence_XSLT//XPath_de_Netscape
slug: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
---
+{{XsltSidebar}}
+
La liste ci-dessous, ordonnée alphabétiquement, présente les élémentes, les axes et les fonctions de la recommandation XSLT 1.0 du W3C, ainsi que les sections appropriées de la recommandation XPath. Le développement de XSLT est toujours en cours, et ce document sera mis à jours au fur et à mesure de l'extension des fonctionnalités.
### Éléments
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index f5ad272429b272..6c1d7474ef3cad 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -903,14 +903,14 @@
/ja/docs/DOM/window.alert /ja/docs/Web/API/Window/alert
/ja/docs/DOM/window.alert-redirect-1 /ja/docs/Web/API/Window/alert
/ja/docs/DOM/window.arguments /ja/docs/Web/API/Window
-/ja/docs/DOM/window.atob /ja/docs/Web/API/atob
-/ja/docs/DOM/window.atob-redirect-1 /ja/docs/Web/API/atob
+/ja/docs/DOM/window.atob /ja/docs/Web/API/Window/atob
+/ja/docs/DOM/window.atob-redirect-1 /ja/docs/Web/API/Window/atob
/ja/docs/DOM/window.back /ja/docs/Web/API/Window/back
/ja/docs/DOM/window.back-redirect-1 /ja/docs/Web/API/Window/back
/ja/docs/DOM/window.blur /ja/docs/Web/API/Window/blur
/ja/docs/DOM/window.blur-redirect-1 /ja/docs/Web/API/Window/blur
-/ja/docs/DOM/window.btoa /ja/docs/Web/API/btoa
-/ja/docs/DOM/window.btoa-redirect-1 /ja/docs/Web/API/btoa
+/ja/docs/DOM/window.btoa /ja/docs/Web/API/Window/btoa
+/ja/docs/DOM/window.btoa-redirect-1 /ja/docs/Web/API/Window/btoa
/ja/docs/DOM/window.cancelAnimationFrame /ja/docs/Web/API/Window/cancelAnimationFrame
/ja/docs/DOM/window.captureEvents /ja/docs/Web/API/Window/captureEvents
/ja/docs/DOM/window.clearInterval /ja/docs/Web/API/clearInterval
@@ -1129,10 +1129,10 @@
/ja/docs/DOM:selection /ja/docs/Web/API/Selection
/ja/docs/DOM:window /ja/docs/Web/API/Window
/ja/docs/DOM:window.alert /ja/docs/Web/API/Window/alert
-/ja/docs/DOM:window.atob /ja/docs/Web/API/atob
+/ja/docs/DOM:window.atob /ja/docs/Web/API/Window/atob
/ja/docs/DOM:window.back /ja/docs/Web/API/Window/back
/ja/docs/DOM:window.blur /ja/docs/Web/API/Window/blur
-/ja/docs/DOM:window.btoa /ja/docs/Web/API/btoa
+/ja/docs/DOM:window.btoa /ja/docs/Web/API/Window/btoa
/ja/docs/DOM:window.captureEvents /ja/docs/Web/API/Window/captureEvents
/ja/docs/DOM:window.clearInterval /ja/docs/Web/API/clearInterval
/ja/docs/DOM:window.clearTimeout /ja/docs/Web/API/clearTimeout
@@ -1338,12 +1338,14 @@
/ja/docs/Glossary/First_interactive /ja/docs/Glossary/First_CPU_idle
/ja/docs/Glossary/Global_attribute /ja/docs/Web/HTML/Global_attributes
/ja/docs/Glossary/Grid_Rows /ja/docs/Glossary/Grid_Row
+/ja/docs/Glossary/Guard /ja/docs/Web/API/Fetch_API/Using_Fetch
/ja/docs/Glossary/Header /ja/docs/Glossary/HTTP_header
/ja/docs/Glossary/I18N /ja/docs/Glossary/Internationalization
/ja/docs/Glossary/Index /ja/docs/Glossary
/ja/docs/Glossary/Internationalization_and_localization /ja/docs/Glossary/Internationalization
/ja/docs/Glossary/POP3 /ja/docs/Glossary/POP
/ja/docs/Glossary/Reference /ja/docs/Glossary/Object_reference
+/ja/docs/Glossary/Rendering_engine /ja/docs/Glossary/Engine/Rendering
/ja/docs/Glossary/Round_Trip_Time_(RTT) /ja/docs/Glossary/Round_Trip_Time
/ja/docs/Glossary/SSL_Glossary /ja/docs/Glossary/SSL
/ja/docs/Glossary/Scrollport /ja/docs/Glossary/Scroll_container
@@ -1557,7 +1559,7 @@
/ja/docs/HTTP/X-Frame-Options /ja/docs/Web/HTTP/Headers/X-Frame-Options
/ja/docs/HTTP_Pipelining_FAQ /ja/docs/Web/HTTP/Connection_management_in_HTTP_1.x
/ja/docs/HTTP_access_control /ja/docs/Web/HTTP/CORS
-/ja/docs/How_to_create_a_DOM_tree /ja/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree
+/ja/docs/How_to_create_a_DOM_tree /ja/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
/ja/docs/IndexedDB /ja/docs/Web/API/IndexedDB_API
/ja/docs/Installing_Extensions_and_Themes_From_Web_Pages /ja/docs/orphaned/Installing_Extensions_and_Themes_From_Web_Pages
/ja/docs/Introducing_Content_Security_Policy /ja/docs/Web/HTTP/CSP
@@ -2374,7 +2376,6 @@
/ja/docs/Security/CSP_(Content_Security_Policy) /ja/docs/Web/HTTP/CSP
/ja/docs/Security/HTTP_Strict_Transport_Security /ja/docs/Web/HTTP/Headers/Strict-Transport-Security
/ja/docs/Security/混在コンテンツ /ja/docs/Web/Security/Mixed_content
-/ja/docs/Security/混在コンテンツ/How_to_fix_website_with_mixed_content /ja/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
/ja/docs/Server-sent_events /ja/docs/Web/API/Server-sent_events
/ja/docs/Server-sent_events/Using_server-sent_events /ja/docs/Web/API/Server-sent_events/Using_server-sent_events
/ja/docs/Setting_up_extension_development_environment /ja/docs/orphaned/Setting_up_extension_development_environment
@@ -2665,7 +2666,7 @@
/ja/docs/Web/API/DOMRect/fromRect /ja/docs/Web/API/DOMRect/fromRect_static
/ja/docs/Web/API/DOMRectReadOnly/fromRect /ja/docs/Web/API/DOMRectReadOnly/fromRect_static
/ja/docs/Web/API/DOMString /ja/docs/Glossary/String
-/ja/docs/Web/API/DOMString/Binary /ja/docs/Web/API/btoa
+/ja/docs/Web/API/DOMString/Binary /ja/docs/Web/API/Window/btoa
/ja/docs/Web/API/DOMTimeStamp /ja/docs/Glossary/Unix_time
/ja/docs/Web/API/DeviceAcceleration /ja/docs/Web/API/DeviceMotionEventAcceleration
/ja/docs/Web/API/Document.domConfig /ja/docs/Web/API/Document
@@ -2727,6 +2728,7 @@
/ja/docs/Web/API/DocumentOrShadowRoot/pointerLockElement /ja/docs/Web/API/Document/pointerLockElement
/ja/docs/Web/API/DocumentOrShadowRoot/styleSheets /ja/docs/Web/API/Document/styleSheets
/ja/docs/Web/API/Document_Object_Model/Events /ja/docs/orphaned/Web/API/Document_Object_Model/Events
+/ja/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree /ja/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
/ja/docs/Web/API/Document_Object_Model/Preface /ja/docs/Web/API/Document_Object_Model
/ja/docs/Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core /ja/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
/ja/docs/Web/API/Element.contentEditable /ja/docs/Web/API/HTMLElement/contentEditable
@@ -2757,6 +2759,7 @@
/ja/docs/Web/API/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener
/ja/docs/Web/API/EventTarget/attachEvent /ja/docs/Web/API/EventTarget/addEventListener
/ja/docs/Web/API/FetchEvent_clone /ja/docs/Web/API/FetchEvent
+/ja/docs/Web/API/Fetch_API/Basic_concepts /ja/docs/Web/API/Fetch_API/Using_Fetch
/ja/docs/Web/API/File.name /ja/docs/Web/API/File/name
/ja/docs/Web/API/File.size /ja/docs/Web/API/Blob/size
/ja/docs/Web/API/File.type /ja/docs/Web/API/Blob/type
@@ -3191,8 +3194,8 @@
/ja/docs/Web/API/Window/vrdisplaypointerunrestricted_event /ja/docs/Web/API/Window
/ja/docs/Web/API/WindowBase64 /ja/docs/Glossary/Base64
/ja/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /ja/docs/Glossary/Base64
-/ja/docs/Web/API/WindowBase64/atob /ja/docs/Web/API/atob
-/ja/docs/Web/API/WindowBase64/btoa /ja/docs/Web/API/btoa
+/ja/docs/Web/API/WindowBase64/atob /ja/docs/Web/API/Window/atob
+/ja/docs/Web/API/WindowBase64/btoa /ja/docs/Web/API/Window/btoa
/ja/docs/Web/API/WindowEventHandlers/onafterprint /ja/docs/Web/API/Window/afterprint_event
/ja/docs/Web/API/WindowEventHandlers/onbeforeprint /ja/docs/Web/API/Window/beforeprint_event
/ja/docs/Web/API/WindowEventHandlers/onbeforeunload /ja/docs/Web/API/Window/beforeunload_event
@@ -3205,8 +3208,8 @@
/ja/docs/Web/API/WindowEventHandlers/onstorage /ja/docs/Web/API/Window/storage_event
/ja/docs/Web/API/WindowEventHandlers/onunhandledrejection /ja/docs/Web/API/Window/unhandledrejection_event
/ja/docs/Web/API/WindowEventHandlers/onunload /ja/docs/Web/API/Window/unload_event
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob /ja/docs/Web/API/atob
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa /ja/docs/Web/API/btoa
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob /ja/docs/Web/API/Window/atob
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa /ja/docs/Web/API/Window/btoa
/ja/docs/Web/API/WindowOrWorkerGlobalScope/caches /ja/docs/Web/API/Window/caches
/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /ja/docs/Web/API/clearInterval
/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /ja/docs/Web/API/clearTimeout
@@ -3224,7 +3227,6 @@
/ja/docs/Web/API/WindowTimers/setTimeout /ja/docs/Web/API/setTimeout
/ja/docs/Web/API/Worker/onerror /ja/docs/Web/API/Worker/error_event
/ja/docs/Web/API/Worker/onmessageerror /ja/docs/Web/API/Worker/messageerror_event
-/ja/docs/Web/API/WorkerGlobalScope/caches /ja/docs/Web/API/Window/caches
/ja/docs/Web/API/WorkerGlobalScope/console /ja/docs/conflicting/Web/API/console
/ja/docs/Web/API/XMLDocument/async /ja/docs/Web/API/XMLDocument
/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest /ja/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest
@@ -3245,6 +3247,8 @@
/ja/docs/Web/API/XRTargetRayMode /ja/docs/Web/API/XRInputSource/targetRayMode
/ja/docs/Web/API/XSLTProcessor/Browser_Differences /ja/docs/orphaned/Web/API/XSLTProcessor/Browser_Differences
/ja/docs/Web/API/XSLTProcessor/Resources /ja/docs/Web/API/XSLTProcessor
+/ja/docs/Web/API/atob /ja/docs/Web/API/Window/atob
+/ja/docs/Web/API/btoa /ja/docs/Web/API/Window/btoa
/ja/docs/Web/API/caches /ja/docs/Web/API/Window/caches
/ja/docs/Web/API/console.dir /ja/docs/Web/API/console/dir_static
/ja/docs/Web/API/console.log /ja/docs/Web/API/console/log_static
@@ -3373,10 +3377,10 @@
/ja/docs/Web/API/window.URL.revokeObjectURL /ja/docs/Web/API/URL/revokeObjectURL_static
/ja/docs/Web/API/window.alert /ja/docs/Web/API/Window/alert
/ja/docs/Web/API/window.arguments /ja/docs/Web/API/Window
-/ja/docs/Web/API/window.atob /ja/docs/Web/API/atob
+/ja/docs/Web/API/window.atob /ja/docs/Web/API/Window/atob
/ja/docs/Web/API/window.back /ja/docs/Web/API/Window/back
/ja/docs/Web/API/window.blur /ja/docs/Web/API/Window/blur
-/ja/docs/Web/API/window.btoa /ja/docs/Web/API/btoa
+/ja/docs/Web/API/window.btoa /ja/docs/Web/API/Window/btoa
/ja/docs/Web/API/window.cancelAnimationFrame /ja/docs/Web/API/Window/cancelAnimationFrame
/ja/docs/Web/API/window.captureEvents /ja/docs/Web/API/Window/captureEvents
/ja/docs/Web/API/window.clearInterval /ja/docs/Web/API/clearInterval
@@ -3713,6 +3717,7 @@
/ja/docs/Web/CSS/Using_media_queries_from_code /ja/docs/Web/CSS/CSS_media_queries/Testing_media_queries
/ja/docs/Web/CSS/Using_multi-column_layouts /ja/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
/ja/docs/Web/CSS/Using_multiple_backgrounds /ja/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
+/ja/docs/Web/CSS/align-tracks /ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout
/ja/docs/Web/CSS/attr() /ja/docs/Web/CSS/attr
/ja/docs/Web/CSS/aural /ja/docs/Web/CSS/@media/aural
/ja/docs/Web/CSS/auto /ja/docs/Web/CSS/width
@@ -3724,6 +3729,7 @@
/ja/docs/Web/CSS/border-top-left-radius_|_-moz-border-radius-topleft /ja/docs/Web/CSS/border-top-left-radius
/ja/docs/Web/CSS/box_model /ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model
/ja/docs/Web/CSS/calc() /ja/docs/Web/CSS/calc
+/ja/docs/Web/CSS/calc-constant /ja/docs/Web/CSS/calc-keyword
/ja/docs/Web/CSS/clamp() /ja/docs/Web/CSS/clamp
/ja/docs/Web/CSS/color-adjust /ja/docs/conflicting/Web/CSS/print-color-adjust
/ja/docs/Web/CSS/color_value/hexadecimal_rgb /ja/docs/orphaned/Web/CSS/color_value/hexadecimal_rgb
@@ -3763,6 +3769,7 @@
/ja/docs/Web/CSS/image/image() /ja/docs/Web/CSS/image/image
/ja/docs/Web/CSS/image/image-set() /ja/docs/Web/CSS/image/image-set
/ja/docs/Web/CSS/image/paint() /ja/docs/Web/CSS/image/paint
+/ja/docs/Web/CSS/justify-tracks /ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout
/ja/docs/Web/CSS/linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient
/ja/docs/Web/CSS/linear-gradient() /ja/docs/Web/CSS/gradient/linear-gradient
/ja/docs/Web/CSS/margin-new /ja/docs/Web/CSS/margin
@@ -4575,6 +4582,8 @@
/ja/docs/Web/Security/HTTP_Strict_Transport_Security /ja/docs/Web/HTTP/Headers/Strict-Transport-Security
/ja/docs/Web/Security/Information_Security_Basics /ja/docs/orphaned/Web/Security/Information_Security_Basics
/ja/docs/Web/Security/Public_Key_Pinning /ja/docs/conflicting/Web/Security/Certificate_Transparency
+/ja/docs/Web/Security/Securing_your_site /ja/docs/Web/Security/Practical_implementation_guides
+/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /ja/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
/ja/docs/Web/WebGL /ja/docs/Web/API/WebGL_API
/ja/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
/ja/docs/Web/WebGL/Animating_objects_with_WebGL /ja/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 8f5d181ce5e93c..897ebc8fd53d1a 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -702,6 +702,10 @@
"modified": "2019-03-23T22:38:34.635Z",
"contributors": ["mfuji09", "kubota-aoi"]
},
+ "Glossary/Engine/Rendering": {
+ "modified": "2020-09-28T13:40:38.634Z",
+ "contributors": ["mfuji09", "Uemmra3"]
+ },
"Glossary/Entity": {
"modified": "2020-08-26T12:57:35.570Z",
"contributors": ["mfuji09", "Uemmra3", "dskmori", "asuktakahashi"]
@@ -898,10 +902,6 @@
"modified": "2020-03-26T14:31:20.417Z",
"contributors": ["mfuji09", "dynamis"]
},
- "Glossary/Guard": {
- "modified": "2020-01-10T08:49:48.628Z",
- "contributors": ["Wind1808"]
- },
"Glossary/Gutters": {
"modified": "2019-03-18T20:48:45.475Z",
"contributors": ["shuuji3", "applejam9029", "mfuji09", "dynamis"]
@@ -1593,10 +1593,6 @@
"modified": "2020-05-04T13:19:46.805Z",
"contributors": ["Uemmra3", "segayuu"]
},
- "Glossary/Rendering_engine": {
- "modified": "2020-09-28T13:40:38.634Z",
- "contributors": ["mfuji09", "Uemmra3"]
- },
"Glossary/Repo": {
"modified": "2019-03-18T21:21:56.601Z",
"contributors": ["Uemmra3", "takaneichinose"]
@@ -7472,17 +7468,6 @@
"Mgjbot"
]
},
- "Web/API/Document_Object_Model/How_to_create_a_DOM_tree": {
- "modified": "2019-03-24T00:07:13.065Z",
- "contributors": [
- "mfuji09",
- "silverskyvicto",
- "kmaglione",
- "ethertank",
- "Mgjbot",
- "electrolysis"
- ]
- },
"Web/API/Document_Object_Model/Introduction": {
"modified": "2020-08-09T14:35:31.436Z",
"contributors": [
@@ -8449,17 +8434,6 @@
"chikoski"
]
},
- "Web/API/Fetch_API/Basic_concepts": {
- "modified": "2020-10-01T22:06:38.159Z",
- "contributors": [
- "mpcjazz",
- "Uemmra3",
- "dskmori",
- "hamasaki",
- "chikoski",
- "YuichiNukiyama"
- ]
- },
"Web/API/Fetch_API/Cross-global_fetch_usage": {
"modified": "2020-01-07T17:57:37.167Z",
"contributors": ["Wind1808"]
@@ -13872,6 +13846,10 @@
"modified": "2020-10-15T21:49:27.051Z",
"contributors": ["mfuji09", "wbamberg", "fscholz", "YuichiNukiyama"]
},
+ "Web/API/Window/atob": {
+ "modified": "2020-10-15T21:16:19.721Z",
+ "contributors": ["mfuji09", "fscholz", "khalid32", "ethertank", "Potappo"]
+ },
"Web/API/Window/back": {
"modified": "2019-03-23T23:50:55.327Z",
"contributors": ["yyss", "fscholz", "khalid32", "ethertank", "Potappo"]
@@ -13899,6 +13877,17 @@
"modified": "2020-10-15T21:36:49.995Z",
"contributors": ["Marsf", "mfuji09", "Uemmra3", "Kenju"]
},
+ "Web/API/Window/btoa": {
+ "modified": "2020-10-15T21:16:19.842Z",
+ "contributors": [
+ "mfuji09",
+ "SphinxKnight",
+ "fscholz",
+ "khalid32",
+ "ethertank",
+ "Potappo"
+ ]
+ },
"Web/API/Window/caches": {
"modified": "2020-10-15T21:49:48.643Z",
"contributors": ["Wind1808", "unarist", "YuichiNukiyama"]
@@ -15063,21 +15052,6 @@
"modified": "2020-04-13T14:03:23.203Z",
"contributors": ["mfuji09", "Marsf"]
},
- "Web/API/atob": {
- "modified": "2020-10-15T21:16:19.721Z",
- "contributors": ["mfuji09", "fscholz", "khalid32", "ethertank", "Potappo"]
- },
- "Web/API/btoa": {
- "modified": "2020-10-15T21:16:19.842Z",
- "contributors": [
- "mfuji09",
- "SphinxKnight",
- "fscholz",
- "khalid32",
- "ethertank",
- "Potappo"
- ]
- },
"Web/API/clearInterval": {
"modified": "2019-03-23T23:49:51.484Z",
"contributors": [
@@ -21651,10 +21625,6 @@
"modified": "2020-10-15T22:28:37.603Z",
"contributors": ["mfuji09", "tamura4278"]
},
- "Web/HTTP/Headers/Accept-CH-Lifetime": {
- "modified": "2020-10-15T22:28:41.631Z",
- "contributors": ["mfuji09", "Wind1808"]
- },
"Web/HTTP/Headers/Accept-Charset": {
"modified": "2020-10-15T22:09:31.974Z",
"contributors": ["mfuji09", "silverskyvicto"]
@@ -29516,9 +29486,13 @@
"modified": "2020-08-31T12:56:43.359Z",
"contributors": ["mfuji09", "YuichiNukiyama", "hashedhyphen", "clariroid"]
},
- "Web/Security/Mixed_content/How_to_fix_website_with_mixed_content": {
- "modified": "2020-09-26T07:03:01.189Z",
- "contributors": ["mfuji09", "hashedhyphen", "tomg25"]
+ "Web/Security/Practical_implementation_guides": {
+ "modified": "2020-07-25T12:16:18.770Z",
+ "contributors": ["pcw", "mfuji09", "satakeh", "hashedhyphen"]
+ },
+ "Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion": {
+ "modified": "2020-07-25T12:03:22.245Z",
+ "contributors": ["pcw", "mfuji09", "hashedhyphen"]
},
"Web/Security/Referer_header:_privacy_and_security_concerns": {
"modified": "2020-10-24T06:28:29.243Z",
@@ -29553,14 +29527,6 @@
"modified": "2020-10-23T09:50:39.875Z",
"contributors": ["silverskyvicto", "mfuji09", "YuichiNukiyama"]
},
- "Web/Security/Securing_your_site": {
- "modified": "2020-07-25T12:16:18.770Z",
- "contributors": ["pcw", "mfuji09", "satakeh", "hashedhyphen"]
- },
- "Web/Security/Securing_your_site/Turning_off_form_autocompletion": {
- "modified": "2020-07-25T12:03:22.245Z",
- "contributors": ["pcw", "mfuji09", "hashedhyphen"]
- },
"Web/Security/Subdomain_takeovers": {
"modified": "2020-10-23T16:21:24.230Z",
"contributors": ["silverskyvicto"]
diff --git a/files/ja/games/techniques/control_mechanisms/index.md b/files/ja/games/techniques/control_mechanisms/index.md
index da5b88a8472d2b..876bc6f1fa5715 100644
--- a/files/ja/games/techniques/control_mechanisms/index.md
+++ b/files/ja/games/techniques/control_mechanisms/index.md
@@ -37,7 +37,7 @@ create() {
}
```
-ゲーム開始時に一度だけ作成され、クリックされるとそれに割り当てられた `this.clickEnclave()` アクションを実行しますが、 `update()` 関数でマウスのポインタの値を使用してアクションを作成することもできます。
+ゲーム開始時に一度だけ作成され、クリックされるとそれに割り当てられた `this.clickEnclave()` アクションを実行しますが、 `update()` 関数でマウスのポインターの値を使用してアクションを作成することもできます。
```js
update() {
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
index 3fbd4217d250f3..29a1700bc47620 100644
--- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md
@@ -32,7 +32,7 @@ function mouseMoveHandler(e) {
}
```
-この値は、ビューポート内のマウスの水平位置 (`e.clientX`) からキャンバスの左端とビューポートの左端間の距離 (`canvas.offsetLeft`) を引いたもので、実質的にこれはキャンバス左端からマウスポインターまでの距離と等しくなっています。ポインタの相対 X 位置が 0 より大きく、キャンバスの幅よりも小さい場合、ポインタはキャンバスの境界内にあり、`paddleX` 位置（パドルの左端に固定）は `relativeX` 値からパドルの幅の半分を引いた値に設定され、実際の移動はパドルの中央に対して相対的に行われることになります。
+この値は、ビューポート内のマウスの水平位置 (`e.clientX`) からキャンバスの左端とビューポートの左端間の距離 (`canvas.offsetLeft`) を引いたもので、実質的にこれはキャンバス左端からマウスポインターまでの距離と等しくなっています。ポインターの相対 X 位置が 0 より大きく、キャンバスの幅よりも小さい場合、ポインターはキャンバスの境界内にあり、`paddleX` 位置（パドルの左端に固定）は `relativeX` 値からパドルの幅の半分を引いた値に設定され、実際の移動はパドルの中央に対して相対的に行われることになります。
パドルはマウスカーソルの位置を追うようになりますが、動きをキャンバスの大きさに制限しているため、両端で消え失せてしまうようなことはありません。
diff --git a/files/ja/glossary/base64/index.md b/files/ja/glossary/base64/index.md
index feab77654f76bd..078f0e04638d20 100644
--- a/files/ja/glossary/base64/index.md
+++ b/files/ja/glossary/base64/index.md
@@ -2,331 +2,100 @@
title: Base64
slug: Glossary/Base64
l10n:
- sourceCommit: 04e75ce1f83a591a576f52b143f195133bfcbe96
+ sourceCommit: 3b8be0ad781b128b70ef0d208de84932755eb4d0
---
{{GlossarySidebar}}
-**Base64** とは、[バイナリーからテキストへの符号化](https://en.wikipedia.org/wiki/Binary-to-text_encoding)を行う手法のグループであり、バイナリーデータを 64 を基数とする表現に変換することで、 ASCII 文字列で表すことができます。_Base64_ という呼び方は、 [MIME の Content-Transfer-Encoding](https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding) における特定の符号化方式の名前に由来します。
+**Base64** とは、[バイナリーからテキストへの符号化](https://en.wikipedia.org/wiki/Binary-to-text_encoding)を行う手法のグループであり、バイナリーデータを 64 を基数とする表現に変換することで、{{glossary("ASCII")}} 文字列で表すことができます。_Base64_ という用語は、 [MIME の Content-Transfer-Encoding](https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding) における特定の符号化方式の名前に由来します。
-Base64 符号化方式がよく使われるのは、テキストデータを扱うよう設計されたメディア上で、バイナリーデータを格納または転送する必要がある場合です。Base64 符号化により、転送中に変換されることなく、バイナリーデータがそのままであることを保証できます。Base64 は、[MIME](https://ja.wikipedia.org/wiki/MIME) による電子メールや [XML](/ja/docs/Web/XML) における複合型データの格納など、多くのアプリケーションで幅広く使われています。
+"Base64" という用語が自分自身で具体的な{{glossary("algorithm", "アルゴリズム")}}を参照するために使用される場合、それは一般的に [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) の第 4 章で概説された Base64 のバージョンを参照します。これは、64 進数を表すための以下のアルファベットと、同時にパディング文字として `=` を使用します。
-ウェブにおける Base64 符号化のよくある用途の一つが、バイナリーデータを符号化することで [data: URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) に入れられるようにすることです。
-
-JavaScript には、Base64 文字列のエンコードとデコードのそれぞれに対応した、次の 2 つの関数があります。
+```plain
+ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/
+```
-- [`btoa()`](/ja/docs/Web/API/btoa): バイナリーデータの「文字列」から Base64 で符号化された ASCII 文字列を生成します ("btoa" は "binary to ASCII" と読んでください)。
-- [`atob()`](/ja/docs/Web/API/atob): Base64 で符号化された文字列をデコードします ("atob" は "ASCII to binary" と読んでください)。
+よくある変化形は "Base64 URL safe" で、{{glossary("URL")}} のパス部分やクエリー引数で問題が発生する可能性のある文字を避けるために、パディングを除外して `+/` を `-_` に置き換えます。パス部分またはクエリー引数にデータを格納しない場合は、このエンコード方式は必要ありません。例えば、[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) にはどちらもないので、標準の Base64 エンコードを使用することができます。
-`atob()` と `btoa()` のアルゴリズムは、 [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) section 4 で定義されています。
+Base64 エンコード方式は、ASCII テキスト（または任意のバイナリーデータを受け入れるにはまだ不十分な ASCII のスーパーセット）しか扱えないメディア上で保存や送信を行う際に、バイナリーデータをエンコードするために一般的に使用されます。これにより、転送中にデータが変更されることなく、そのままの状態を確実に保持します。Base64 の一般的な用途としては、以下のものがあります。
-なお、 `btoa()` はバイナリーデータを受け取ることを期待しているため、与えられた文字列に UTF-16 表現の 2 バイト以上を占める文字が含まれていると例外が発生します。詳しくは、 [`btoa()`](/ja/docs/Web/API/btoa) のドキュメントを参照してください。
+- [MIME](https://ja.wikipedia.org/wiki/MIME) による電子メールの場合
+- [XML](/ja/docs/Web/XML) に複雑なデータを格納する場合
+- バイナリーデータをエンコードして [`data:` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) に含めることができるようにする場合
-#### 符号化によるサイズの増加
+## 符号化によるサイズの増加
Base64 の 1 文字はデータのちょうど 6 ビット分を表します。そのため、入力される文字列やバイナリーファイルに含まれる 3 バイト（3×8 ビット = 24 ビット）は、4 桁の Base64 で表されます（4×6 = 24 ビット）。
-このことにより、Base64 で表された文字列またはファイルは、元のサイズの 133% の大きさになると言えます（33% の増加）。エンコードされるデータが小さい場合は、さらに増加幅が大きくなります。例えば、`length === 1` である文字列 `"a"` は、エンコードされて `length === 4` の文字列 `"YQ=="` になり、これは 300% の増加です。
-
-## 「Unicode 問題」
-
-JavaScript の文字列は 16 ビットでエンコードされているので、ほとんどのブラウザーでは、 Unicode 文字列に対して `window.btoa` を呼び出すと、文字が 8 ビット ASCII エンコード文字の範囲を超えた場合に `Character Out Of Range` という例外が発生します。この問題を解決するために、 2 つの使用可能な方法があります。
-
-- 最初の方法は、文字列全体をエスケープしてからエンコードする方法です。
-- もう 1 つは、 UTF-16 文字列を UTF-8 文字の配列に変換してからエンコードする方法です。
+つまり、文字列やファイルを Base64 にすると、通常、その文字列のソースよりもおよそ 3 分の 1 大きくなります（正確なサイズの増加は、文字列の絶対長、その長さのモジュロ 3、パディング文字を使用しているかどうかなど、さまざまな要因に依存します）。
-以下に、使用可能な2つの方法を示します。
+## JavaScript の対応
-### 解決策その 1 - 文字列をエンコードする前にエスケープする
+ブラウザーは、Base64 文字列をデコードしたりエンコードしたりするための 2 つの JavaScript の関数をネイティブで提供しています。
-```js
-function utf8_to_b64(str) {
- return window.btoa(unescape(encodeURIComponent(str)));
-}
+- {{domxref("Window.btoa()")}}（{{domxref("WorkerGlobalScope.btoa()", "ワーカーでも利用可能", "", "nocode")}}）: バイナリーデータの文字列から Base64 エンコード方式の ASCII 文字列を作成します（"btoa" は "binary to ASCII" と読んでください）。
+- {{domxref("Window.atob()")}}（{{domxref("WorkerGlobalScope.atob()", "ワーカーでも利用可能", "", "nocode")}}）: Base64 エンコード方式の文字列をデコードします（"atob" は "ASCII to binary" と読んでください）。
-function b64_to_utf8(str) {
- return decodeURIComponent(escape(window.atob(str)));
-}
+> **メモ:** Base64 はテキストエンコードではなくバイナリーエンコード方式ですが、`btoa` と `atob` はウェブプラットフォームがバイナリーデータ型に対応する前に追加されました。その結果、2 つの関数は文字列を使用してバイナリーデータを表しており、各文字の{{glossary("code point", "コードポイント")}}が各バイトの値を表します。このため、`btoa` は任意のテキストデータをエンコードするために使用することができます。例えば、テキストや HTML 文書の Base64 `data:` URL を作成する場合などです。
+>
+> しかし、バイトとコードポイントの対応が確実に成り立つのは `0x7f` までのコードポイントだけです。さらに、`0xff` を超えるコードポイントは、1 バイトの最大値を超えるために `btoa` でエラーが発生します。次の節では、任意の Unicode テキストをエンコードするときに、この制限を回避するためにどのように作業するかについて詳しく説明します。
-// Usage:
-utf8_to_b64("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU="
-b64_to_utf8("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode"
-```
+## 「Unicode 問題」
-この解決策は [Johan Sundström](https://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) によって提案されたものです。
+`btoa` は入力文字列のコードポイントをバイト値として解釈するため、文字列に対して `btoa` を呼び出すと、文字のコードポイントが `0xff` を超えた場合に "Character Out Of Range" 例外が発生します。任意の Unicode テキストをエンコードする必要がある使用する用途では、まず文字列を {{glossary("UTF-8")}} で構成されるバイト列に変換し、それからバイト列をエンコードする必要があります。
-もう一つの使用可能な解決策は、今では非推奨となっている 'unescape' と 'escape' 関数を使用しないものです。
-しかし、この方法では、入力文字列の base64 エンコーディングは行われません。
-`utf8_to_b64` と `b64EncodeUnicode` の出力の違いに注意してください。
-この代替手段を採用すると、他のアプリケーションとの相互運用性の問題が発生する可能性があります。
+最も単純な解決策は、 `TextEncoder` と `TextDecoder` を使用して文字列の UTF-8 と単一のバイト表現を変換することです。
```js
-function b64EncodeUnicode(str) {
- return btoa(encodeURIComponent(str));
+function base64ToBytes(base64) {
+ const binString = atob(base64);
+ return Uint8Array.from(binString, (m) => m.codePointAt(0));
}
-function UnicodeDecodeB64(str) {
- return decodeURIComponent(atob(str));
+function bytesToBase64(bytes) {
+ const binString = Array.from(bytes, (byte) =>
+ String.fromCodePoint(byte),
+ ).join("");
+ return btoa(binString);
}
-b64EncodeUnicode("✓ à la mode"); // "JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"
-UnicodeDecodeB64("JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"); // "✓ à la mode"
+// 使用方法
+bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE"
+new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄"
```
-### 解決策その 2 - `atob()` と `btoa()` を `TypedArray` と UTF-8 を使用して書き直す
-
-> **メモ:** 以下のコードは、 [ArrayBuffer](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を Base64 文字列から取得する場合、またはその逆の場合にも有用です（[下記参照](#付録_base64_文字列を_uint8array_または_arraybuffer_へデコード)）。
+## 任意のバイナリーデータの変換
-```js
-"use strict";
-// Array of bytes to Base64 string decoding
-function b64ToUint6(nChr) {
- return nChr > 64 && nChr < 91
- ? nChr - 65
- : nChr > 96 && nChr < 123
- ? nChr - 71
- : nChr > 47 && nChr < 58
- ? nChr + 4
- : nChr === 43
- ? 62
- : nChr === 47
- ? 63
- : 0;
-}
-
-function base64DecToArr(sBase64, nBlocksSize) {
- const sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, "");
- const nInLen = sB64Enc.length;
- const nOutLen = nBlocksSize
- ? Math.ceil(((nInLen * 3 + 1) >> 2) / nBlocksSize) * nBlocksSize
- : (nInLen * 3 + 1) >> 2;
- const taBytes = new Uint8Array(nOutLen);
-
- let nMod3;
- let nMod4;
- let nUint24 = 0;
- let nOutIdx = 0;
- for (let nInIdx = 0; nInIdx < nInLen; nInIdx++) {
- nMod4 = nInIdx & 3;
- nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (6 * (3 - nMod4));
- if (nMod4 === 3 || nInLen - nInIdx === 1) {
- nMod3 = 0;
- while (nMod3 < 3 && nOutIdx < nOutLen) {
- taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255;
- nMod3++;
- nOutIdx++;
- }
- nUint24 = 0;
- }
- }
-
- return taBytes;
-}
-
-/* Base64 string to array encoding */
-function uint6ToB64(nUint6) {
- return nUint6 < 26
- ? nUint6 + 65
- : nUint6 < 52
- ? nUint6 + 71
- : nUint6 < 62
- ? nUint6 - 4
- : nUint6 === 62
- ? 43
- : nUint6 === 63
- ? 47
- : 65;
-}
-
-function base64EncArr(aBytes) {
- let nMod3 = 2;
- let sB64Enc = "";
-
- const nLen = aBytes.length;
- let nUint24 = 0;
- for (let nIdx = 0; nIdx < nLen; nIdx++) {
- nMod3 = nIdx % 3;
- if (nIdx > 0 && ((nIdx * 4) / 3) % 76 === 0) {
- sB64Enc += "\r\n";
- }
-
- nUint24 |= aBytes[nIdx] << ((16 >>> nMod3) & 24);
- if (nMod3 === 2 || aBytes.length - nIdx === 1) {
- sB64Enc += String.fromCodePoint(
- uint6ToB64((nUint24 >>> 18) & 63),
- uint6ToB64((nUint24 >>> 12) & 63),
- uint6ToB64((nUint24 >>> 6) & 63),
- uint6ToB64(nUint24 & 63),
- );
- nUint24 = 0;
- }
- }
- return (
- sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) +
- (nMod3 === 2 ? "" : nMod3 === 1 ? "=" : "==")
- );
-}
+前の節の `bytesToBase64` と `base64ToBytes` 関数を直接使用して、Base64 文字列と [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) を変換することができます。
-/* UTF-8 array to JS string and vice versa */
+パフォーマンスを向上させるために、[`FileReader`](/ja/docs/Web/API/FileReader) と [`fetch`](/ja/docs/Web/API/Fetch_API) API を介して、base64 データ URL 同士の非同期変換がウェブプラットフォーム内でネイティブにできます。
-function UTF8ArrToStr(aBytes) {
- let sView = "";
- let nPart;
- const nLen = aBytes.length;
- for (let nIdx = 0; nIdx < nLen; nIdx++) {
- nPart = aBytes[nIdx];
- sView += String.fromCodePoint(
- nPart > 251 && nPart < 254 && nIdx + 5 < nLen /* six bytes */
- ? /* (nPart - 252 << 30) may be not so safe in ECMAScript! So…: */
- (nPart - 252) * 1073741824 +
- ((aBytes[++nIdx] - 128) << 24) +
- ((aBytes[++nIdx] - 128) << 18) +
- ((aBytes[++nIdx] - 128) << 12) +
- ((aBytes[++nIdx] - 128) << 6) +
- aBytes[++nIdx] -
- 128
- : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* five bytes */
- ? ((nPart - 248) << 24) +
- ((aBytes[++nIdx] - 128) << 18) +
- ((aBytes[++nIdx] - 128) << 12) +
- ((aBytes[++nIdx] - 128) << 6) +
- aBytes[++nIdx] -
- 128
- : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */
- ? ((nPart - 240) << 18) +
- ((aBytes[++nIdx] - 128) << 12) +
- ((aBytes[++nIdx] - 128) << 6) +
- aBytes[++nIdx] -
- 128
- : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */
- ? ((nPart - 224) << 12) +
- ((aBytes[++nIdx] - 128) << 6) +
- aBytes[++nIdx] -
- 128
- : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */
- ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128
- : /* nPart < 127 ? */ /* one byte */
- nPart,
- );
- }
- return sView;
+```js
+async function bytesToBase64DataUrl(bytes, type = "application/octet-stream") {
+ return await new Promise((resolve, reject) => {
+ const reader = Object.assign(new FileReader(), {
+ onload: () => resolve(reader.result),
+ onerror: () => reject(reader.error),
+ });
+ reader.readAsDataURL(new File([bytes], "", { type }));
+ });
}
-function strToUTF8Arr(sDOMStr) {
- let aBytes;
- let nChr;
- const nStrLen = sDOMStr.length;
- let nArrLen = 0;
-
- /* mapping… */
- for (let nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
- nChr = sDOMStr.codePointAt(nMapIdx);
-
- if (nChr > 65536) {
- nMapIdx++;
- }
-
- nArrLen +=
- nChr < 0x80
- ? 1
- : nChr < 0x800
- ? 2
- : nChr < 0x10000
- ? 3
- : nChr < 0x200000
- ? 4
- : nChr < 0x4000000
- ? 5
- : 6;
- }
-
- aBytes = new Uint8Array(nArrLen);
-
- /* transcription… */
- let nIdx = 0;
- let nChrIdx = 0;
- while (nIdx < nArrLen) {
- nChr = sDOMStr.codePointAt(nChrIdx);
- if (nChr < 128) {
- /* one byte */
- aBytes[nIdx++] = nChr;
- } else if (nChr < 0x800) {
- /* two bytes */
- aBytes[nIdx++] = 192 + (nChr >>> 6);
- aBytes[nIdx++] = 128 + (nChr & 63);
- } else if (nChr < 0x10000) {
- /* three bytes */
- aBytes[nIdx++] = 224 + (nChr >>> 12);
- aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
- aBytes[nIdx++] = 128 + (nChr & 63);
- } else if (nChr < 0x200000) {
- /* four bytes */
- aBytes[nIdx++] = 240 + (nChr >>> 18);
- aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
- aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
- aBytes[nIdx++] = 128 + (nChr & 63);
- nChrIdx++;
- } else if (nChr < 0x4000000) {
- /* five bytes */
- aBytes[nIdx++] = 248 + (nChr >>> 24);
- aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
- aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
- aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
- aBytes[nIdx++] = 128 + (nChr & 63);
- nChrIdx++;
- } /* if (nChr <= 0x7fffffff) */ else {
- /* six bytes */
- aBytes[nIdx++] = 252 + (nChr >>> 30);
- aBytes[nIdx++] = 128 + ((nChr >>> 24) & 63);
- aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
- aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
- aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
- aBytes[nIdx++] = 128 + (nChr & 63);
- nChrIdx++;
- }
- nChrIdx++;
- }
-
- return aBytes;
+async function dataUrlToBytes(dataUrl) {
+ const res = await fetch(dataUrl);
+ return new Uint8Array(await res.arrayBuffer());
}
-```
-
-### テスト
-
-```js
-/* Tests */
-
-const sMyInput = "Base 64 \u2014 Mozilla Developer Network";
-const aMyUTF8Input = strToUTF8Arr(sMyInput);
-
-const sMyBase64 = base64EncArr(aMyUTF8Input);
-
-alert(sMyBase64);
-
-const aMyUTF8Output = base64DecToArr(sMyBase64);
-
-const sMyOutput = UTF8ArrToStr(aMyUTF8Output);
-
-alert(sMyOutput);
+// 使用方法
+await bytesToBase64DataUrl(new Uint8Array([0, 1, 2])); // "data:application/octet-stream;base64,AAEC"
+await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array [0, 1, 2]
```
-### 付録: Base64 文字列を Uint8Array または ArrayBuffer へデコード
-
-これらの関数により、 Base64 エンコードされた文字列から [Uint8Array](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) や [ArrayBuffer](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) を作成することも可能です。
-
-```js
-// "Base 64 \u2014 Mozilla Developer Network"
-const myArray = base64DecToArr(
- "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==",
-);
-
-// "Base 64 \u2014 Mozilla Developer Network"
-const myBuffer = base64DecToArr(
- "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==",
-).buffer;
-
-alert(myBuffer.byteLength);
-```
+## 関連情報
-> **メモ:** `base64DecToArr(sBase64[, nBlocksSize])` 関数は、バイト列の [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) を返します。 16 ビット/ 32 ビット/ 64 ビットの生データのバッファーを構築することを目的とする場合、 `nBlocksSize` 引数を使用します。これは、 `uint8Array.buffer.bytesLength` プロパティの結果が倍数となるべきバイト数（ASCII、バイナリー列（すなわち、列内のそれぞれの文字を 1 バイトのバイナリーデータと見なす列）、 UTF-16 列では `2`、 UTF-32 列では `4`）を表します。
+- JavaScript API:
+ - {{domxref("Window.atob()")}}（{{domxref("WorkerGlobalScope.atob()", "ワーカーでも利用可能", "", "nocode")}}）
+ - {{domxref("Window.btoa()")}}（{{domxref("WorkerGlobalScope.btoa()", "ワーカーでも利用可能", "", "nocode")}}）
+- [データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- [Base64](https://ja.wikipedia.org/wiki/Base64)（ウィキペディア）
+- Base64 のアルゴリズム（[RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) の説明）
diff --git a/files/ja/glossary/bfcache/index.md b/files/ja/glossary/bfcache/index.md
new file mode 100644
index 00000000000000..58aef22c51582b
--- /dev/null
+++ b/files/ja/glossary/bfcache/index.md
@@ -0,0 +1,18 @@
+---
+title: bfcache
+slug: Glossary/bfcache
+---
+
+{{GlossarySidebar}}
+
+**バック/フォワード**キャッシュ、または **bfcache** とは、モダンブラウザーで利用可能なパフォーマンス向上機能で、以前訪れたページ間の瞬時的な前後ナビゲーションを可能にします。ユーザーがページから移動するときに、そのページの完全なスナップショットを保存しておき、ユーザーがそのページに戻ることを選択した場合、ページを読み込むための通信を繰り返す必要なく、すぐにそのスナップショットを復元できます。
+
+このスナップショットには、メモリー内のページ全体の状態が入っており、その中には JavaScript ヒープも含まれます。実行中のコードはユーザーが移動するとき一時停止され、ページに戻ったときに再開されます。一方、通常の HTTP キャッシュエントリーには、過去のリクエストへのレスポンスのみが含まれています。したがって、bfcache は HTTP キャッシュよりも高速な結果をもたらします。
+
+その一方で、bfcache エントリーはより多くのリソースを必要とし、実行中のコードをどのように再現するのかについて、複雑さが生じます。いくつかのコード機能（例えば [`unload`](/ja/docs/Web/API/Window/unload_event) ハンドラー）は互換性がないため、それらがページに存在する場合は bfcache の使用がブロックされます。
+
+bfcache はパフォーマンスに優れているため、ページが bfcache の使用をブロックされていないことを確認することが重要です。[`notRestoredReasons` API](/ja/docs/Web/API/Performance_API/Monitoring_bfcache_blocking_reasons) を使うと、ページが bfcache の使用をブロックされているかどうかと、その理由を監視できます。
+
+## 関連情報
+
+- [Back and forward cache](https://web.dev/articles/bfcache) on web.dev (2023)
diff --git a/files/ja/glossary/rendering_engine/index.md b/files/ja/glossary/engine/rendering/index.md
similarity index 92%
rename from files/ja/glossary/rendering_engine/index.md
rename to files/ja/glossary/engine/rendering/index.md
index f55bae782e3e24..ce05035e966592 100644
--- a/files/ja/glossary/rendering_engine/index.md
+++ b/files/ja/glossary/engine/rendering/index.md
@@ -1,6 +1,7 @@
---
title: Rendering engine (レンダリングエンジン)
-slug: Glossary/Rendering_engine
+slug: Glossary/Engine/Rendering
+original_slug: Glossary/Rendering_engine
---
{{GlossarySidebar}}
diff --git a/files/ja/glossary/flex/index.md b/files/ja/glossary/flex/index.md
index b533de1635e8b1..0a13178efec338 100644
--- a/files/ja/glossary/flex/index.md
+++ b/files/ja/glossary/flex/index.md
@@ -1,19 +1,19 @@
---
title: Flex
slug: Glossary/Flex
+l10n:
+ sourceCommit: 333c924622d7ff78253a662f3d9d4e60263a93d9
---
{{GlossarySidebar}}
-`flex` は CSS {{cssxref("display")}}のプロパティに新しく追加された値です。`inline-flex` と同じく、使用すると Element(要素)に {{glossary("flex container", "Flex コンテナ")}} が適用されます。また、その Element(要素)の子 Element(要素)それぞれには {{glossary("flex item", "Flex アイテム")}} が適用されます。flex アイテムが適用された Element(要素)は flex layout を構成し、CSS Flexible Box Layout Module で定義されているプロパティの全てが適用されるはずです。
+`flex` は CSS の {{cssxref("display")}} プロパティの値です。`inline-flex` と同じく、要素に適用すると{{glossary("flex container", "フレックスコンテナー")}}になり、その要素の子要素はそれぞれ{{glossary("flex item", "フレックスアイテム")}}になります。アイテムはフレックスレイアウトに参加し、[CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)で定義されているすべてのプロパティが適用されます。
-`flex` プロパティは flexbox プロパティを縮めて表したプロパティです。`flex-grow` や `flex-shrink`、`flex-basis` 等があります。
+{{cssxref("flex")}} プロパティもあり、これはフレックスボックスの {{cssxref("flex-grow")}}、{{cssxref("flex-shrink")}}、{{cssxref("flex-basis")}} の各プロパティの一括指定です。このプロパティはフレックスコンテナーにのみ適用されます。
-`` については、CSS Grid Layout 内の [flexible length](/ja/docs/Web/CSS/flex_value) にて確認できます。
+加えて、[``](/ja/docs/Web/CSS/flex_value) は CSS グリッドレイアウトにおいて[可変長](/ja/docs/Web/CSS/flex_value)を表すこともあります。
-## 関連項目
-
-### プロパティリファレンス
+### 関連する CSS プロパティ
- {{cssxref("align-content")}}
- {{cssxref("align-items")}}
@@ -25,16 +25,18 @@ slug: Glossary/Flex
- {{cssxref("flex-grow")}}
- {{cssxref("flex-shrink")}}
- {{cssxref("flex-wrap")}}
+- {{cssxref("gap")}}
- {{cssxref("justify-content")}}
- {{cssxref("order")}}
+- {{cssxref("place-items")}}
+- {{cssxref("place-self")}}
### 参考文献
-- _[CSS Flexible Box Layout Module Level 1 Specification](https://www.w3.org/TR/css-flexbox-1/)_
-- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
-- CSS フレックスボックスガイド: _[フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)_
-- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
-- CSS フレックスボックスガイド: _[フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_
-- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_
-- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_
-- CSS フレックスボックスガイド: _[フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)_
+- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)
+- [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
+- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+- [フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)
+- [フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)
diff --git a/files/ja/glossary/flex_container/index.md b/files/ja/glossary/flex_container/index.md
index 809a1713b1f973..7d256d6f3487b1 100644
--- a/files/ja/glossary/flex_container/index.md
+++ b/files/ja/glossary/flex_container/index.md
@@ -1,15 +1,17 @@
---
-title: Flex コンテナ
+title: Flex Container (フレックスコンテナー)
slug: Glossary/Flex_Container
+l10n:
+ sourceCommit: 3c5185e55298c2ca14e4e63913a50bb81e3c5609
---
{{GlossarySidebar}}
-{{glossary("Flexbox")}} レイアウトは親要素の `display` プロパティの値に `flex` または `inline-flex` を指定することで定義されます。この親要素が**「flex コンテナ」**となり、その子要素が 「flex アイテム」({{glossary("flex item")}}) となります。
+{{glossary("Flexbox", "フレックスボックス")}}レイアウトは、`flex` または `inline-flex` を親要素の `display` プロパティの値に使用することで定義されます。この要素は**フレックスコンテナー**となり、その子要素それぞれは{{glossary("flex item", "フレックスアイテム")}}となります。
-値に `flex` を指定すると、この要素はブロックレベルの flex コンテナとなり、`inline-flex` を指定すると、インラインレベルの flex コンテナとなります。これらの指定は、その要素に対する**「flex 整形文脈 (flex formatting context)」**を作成します。Flex 整形文脈は、フロートがコンテナに侵入せず、コンテナのマージンがアイテムのマージンによって相殺されないという点で、ブロック整形文脈と同様のものです。
+値に `flex` を指定すると、この要素はブロックレベルのフレックスコンテナーとなり、`inline-flex` を指定すると、インラインレベルのフレックスコンテナーとなります。これらの指定は、その要素に対する**フレックス整形コンテキスト**を作成します。これはブロック整形コンテキストと、不動要素がコンテナーの中に侵入せず、コンテナーのマージンがアイテムのマージンとの間で相殺されないという点で似ています。
-## 関連項目
+## 関連情報
### プロパティリファレンス
@@ -23,6 +25,7 @@ slug: Glossary/Flex_Container
### 参考文献
-- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
-- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
-- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_
+- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- [フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)
+- [CSS flexbox inspector: Examine flexbox layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)
diff --git a/files/ja/glossary/flex_item/index.md b/files/ja/glossary/flex_item/index.md
index aa84a0581d6715..879f94b256a388 100644
--- a/files/ja/glossary/flex_item/index.md
+++ b/files/ja/glossary/flex_item/index.md
@@ -1,15 +1,17 @@
---
-title: Flex アイテム
+title: Flex Item (フレックスアイテム)
slug: Glossary/Flex_Item
+l10n:
+ sourceCommit: 3c5185e55298c2ca14e4e63913a50bb81e3c5609
---
{{GlossarySidebar}}
-{{glossary("Flex Container")}} (`display: flex` または `display: inline-flex` が設定された要素) の直下の子要素が**「flex アイテム」**となります。
+{{glossary("Flex Container", "フレックスコンテナー")}}（`display: flex` または `display: inline-flex` が設定された要素）の直下の子要素は**フレックスアイテム**となります。
-Flex コンテナ内で直下に続くテキストも flex アイテムになります。
+フレックスコンテナー内で直下に続くテキストもフレックスアイテムになります。
-## 関連項目
+## 関連情報
### プロパティリファレンス
@@ -21,6 +23,6 @@ Flex コンテナ内で直下に続くテキストも flex アイテムになり
### 参考文献
-- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
-- CSS フレックスボックスガイド: _[フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_
-- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_
+- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
+- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
diff --git a/files/ja/glossary/flexbox/index.md b/files/ja/glossary/flexbox/index.md
index 704a0d68c39a2b..1d72979db7bce8 100644
--- a/files/ja/glossary/flexbox/index.md
+++ b/files/ja/glossary/flexbox/index.md
@@ -1,17 +1,19 @@
---
title: Flexbox (フレックスボックス)
slug: Glossary/Flexbox
+l10n:
+ sourceCommit: 52dc11c43d656c48532096f1765b56d05c537711
---
{{GlossarySidebar}}
-Flexbox は、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである [CSS Flexible Box Layout Module](https://www.w3.org/TR/css-flexbox-1/) に対する一般的な通称です。
+フレックスボックスは、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである [CSS flexible box layout module](/ja/docs/Web/CSS/CSS_flexible_box_layout) に対する一般的な通称です。
-この仕様書では、Flexbox はユーザーインターフェイスの設計のためのレイアウトモデルとして説明されています。Flexbox の重要な特徴として、フレックスレイアウト内のアイテムが伸縮することができるという点が挙げられます。余白はアイテム自体に割り当てることも、アイテム間やアイテム周りに配分することも出来ます。
+この仕様書では、フレックスボックスはユーザーインターフェイスの設計のためのレイアウトモデルとして説明されています。フレックスボックスの重要な特徴が、フレックスレイアウト内のアイテムが伸縮することができることです。余白はアイテム自体に割り当てることも、アイテムの間や周囲に配分することもできます。
-また、Flexbox はでは主軸や交差軸にそった位置合わせをすることもでき、アイテムグループのサイズと配置に対する高レベルな制御を提供します。
+また、フレックスボックスはでは主軸や交差軸上の配置を指定することもでき、アイテムグループのサイズと配置に対する高レベルな制御を提供します。
-## 理解を深める
+## 関連情報
### プロパティリファレンス
@@ -28,36 +30,14 @@ Flexbox は、アイテムを列方向や行方向など一次元に並べて表
- {{cssxref("justify-content")}}
- {{cssxref("order")}}
-### 関連情報
+### 参考文献
+- CSS フレックスボックスガイド:
+ - [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+ - [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)
+ - [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+ - [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)
+ - [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
+ - [フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)
+ - [フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)
- _[CSS Flexible Box Layout Module Level 1 Specification](https://www.w3.org/TR/css-flexbox-1/)_
-- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
-- CSS フレックスボックスガイド: _[フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)_
-- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
-- CSS フレックスボックスガイド: _[フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_
-- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_
-- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_
-- CSS フレックスボックスガイド: _[フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)_
-
-1. [MDN Web Docs 用語集](/ja/docs/Glossary)
-
- 1. {{Glossary("Cross Axis", "交差軸")}}
- 2. {{Glossary("Flex")}}
- 3. {{Glossary("Flex Container", "フレックスコンテナー")}}
- 4. {{Glossary("Flex Item", "フレックスアイテム")}}
- 5. {{Glossary("Grid", "グリッド")}}
-
-2. 関連する CSS プロパティ
-
- 1. {{cssxref("align-content")}}
- 2. {{cssxref("align-items")}}
- 3. {{cssxref("align-self")}}
- 4. {{cssxref("flex")}}
- 5. {{cssxref("flex-basis")}}
- 6. {{cssxref("flex-direction")}}
- 7. {{cssxref("flex-flow")}}
- 8. {{cssxref("flex-grow")}}
- 9. {{cssxref("flex-shrink")}}
- 10. {{cssxref("flex-wrap")}}
- 11. {{cssxref("justify-content")}}
- 12. {{cssxref("order")}}
diff --git a/files/ja/glossary/guard/index.md b/files/ja/glossary/guard/index.md
deleted file mode 100644
index e2f100c4c092d4..00000000000000
--- a/files/ja/glossary/guard/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Guard (ガード)
-slug: Glossary/Guard
----
-
-{{GlossarySidebar}}
-
-ガードは、{{domxref("Fetch_API","Fetch 仕様")}}で定義されている {{domxref("Headers")}} オブジェクトの機能で、{{domxref("Headers.set","set()")}} や {{domxref("Headers.append","append()")}} などのメソッドがヘッダーのコンテンツを変更できるかどうかに影響します。 例えば、`immutable`（不変）ガードは、ヘッダーを変更できないことを意味します。 詳しくは、[Fetch の基本概念: ガード](/ja/docs/Web/API/Fetch_API/Basic_concepts#Guard)を参照してください。
diff --git a/files/ja/glossary/payload_header/index.md b/files/ja/glossary/payload_header/index.md
new file mode 100644
index 00000000000000..fa5d7e292be94f
--- /dev/null
+++ b/files/ja/glossary/payload_header/index.md
@@ -0,0 +1,26 @@
+---
+title: Payload header (ペイロードヘッダー)
+slug: Glossary/Payload_header
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**ペイロードヘッダー**は、{{Glossary("HTTP_header", "HTTP ヘッダー")}}の一種で、1 つ以上のメッセージから、元リソースの{{Glossary("Representation header", "表現")}}の安全な伝送と再構築に関連するペイロード（本体）情報を記述するものです。これには、メッセージペイロードの長さ、リソースのどの部分がこのペイロードで運ばれるのか（マルチパートメッセージの場合）、トランスポートに適用されるエンコード方式、メッセージの整合性チェックなどの情報が含まれます。
+
+ペイロードヘッダーは HTTP リクエストメッセージとレスポンスメッセージ（すなわちペイロードデータを運ぶメッセージ）のどちらにも入れることができます。
+
+ペイロードヘッダーには、 {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Range")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Transfer-Encoding")}} などがあります。
+
+## 関連情報
+
+- [すべての HTTP ヘッダーの一覧](/ja/docs/Web/HTTP/Headers)
+
+ - {{HTTPHeader("Content-Length")}}
+ - {{HTTPHeader("Content-Range")}}
+ - {{HTTPHeader("Trailer")}}
+ - {{HTTPHeader("Transfer-Encoding")}}
+ - {{Glossary("Representation header", "表現ヘッダー")}}
+
+- [RFC 7231, section 3.3: Payload semantics](https://datatracker.ietf.org/doc/html/rfc7231#section-3.3)
diff --git a/files/ja/glossary/physical_properties/index.md b/files/ja/glossary/physical_properties/index.md
new file mode 100644
index 00000000000000..8bd9275896d97b
--- /dev/null
+++ b/files/ja/glossary/physical_properties/index.md
@@ -0,0 +1,19 @@
+---
+title: Physical properties (物理プロパティ)
+slug: Glossary/Physical_properties
+---
+
+{{GlossarySidebar}}
+
+CSS の**物理プロパティ**は、物理的な方向もしくは要素の辺に基づいた位置を定義します。例えば：
+
+- {{cssxref("top")}}、{{cssxref("right")}}、{{cssxref("bottom")}}、{{cssxref("left")}} の [inset プロパティ](/ja/docs/Glossary/Inset_properties) は、ビューポートの物理的な寸法を参照します。
+- {{cssxref("margin-top")}}、{{cssxref("border-right")}}、{{cssxref("padding-bottom")}}、{{cssxref("border-bottom-left-radius")}} などの機能は、要素の特定の辺を参照し、その物理的な方向にスタイルを適用します。
+
+これは{{glossary("logical properties", "論理プロパティ")}}とは対照的です。論理プロパティはコンテンツフローに相対的で、ブロック軸とインライン軸を基準とした方向キーワードを使用します。
+
+## 関連情報
+
+- [CSS 位置指定レイアウト](/ja/docs/Web/CSS/CSS_positioned_layout)モジュール
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール
+- [CSS ボックスサイズ](/ja/docs/Web/CSS/CSS_box_sizing)モジュール
diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
index ecc42f89d4da74..15cdfb832e73ef 100644
--- a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -43,7 +43,8 @@ CSS の {{cssxref("background")}} プロパティは、このレッスンで説
105deg,
rgb(255 255 255 / 20%) 39%,
rgb(51 56 57 / 100%) 96%
- ) center center / 400px 200px no-repeat,
+ )
+ center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}
diff --git a/files/ja/learn/forms/advanced_form_styling/index.md b/files/ja/learn/forms/advanced_form_styling/index.md
index 8fd96a5eb8b244..8dc607475e74a3 100644
--- a/files/ja/learn/forms/advanced_form_styling/index.md
+++ b/files/ja/learn/forms/advanced_form_styling/index.md
@@ -2,19 +2,18 @@
title: フォームへの高度なスタイル設定
slug: Learn/Forms/Advanced_form_styling
l10n:
- sourceCommit: 05324ee8658ea78ab284a736511581effbaf784b
+ sourceCommit: d54192c90e24a1ca5d3a4a65b7d5bf8b1c0ef1e5
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}}
-この記事では、スタイル設定がより難しい、「不良」「劣悪」に分類される種類のフォームコントロールにスタイル設定するために、 CSS で何ができるかを見ていきます。[前の記事](/ja/docs/Learn/Forms/Styling_web_forms)で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、ウェブフォームへのスタイル設定の闇の部分を見ていきます。
+この記事では、スタイル設定がより難しい、「不良」「劣悪」に分類される種類のフォームコントロールにスタイル設定するために、CSS で何ができるかを見ていきます。[前の記事](/ja/docs/Learn/Forms/Styling_web_forms)で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、より問題のある部分のスタイル設定を掘り下げます。
前提条件:
- 基本的なコンピューターリテラシーと、
HTML および
CSS に対する基本的な理解。
@@ -46,7 +45,7 @@ l10n:
最初に [`appearance`](/ja/docs/Web/CSS/appearance) プロパティについて説明します。これは上記のすべてをよりスタイル付けできるようにするためにかなり有用なプロパティです。
-## 見た目: OS レベルのスタイル制御
+## appearance: OS レベルのスタイル制御
前の記事では歴史的に、ウェブフォームのスタイル設定は OS で行われており、それがこのコントロールの見た目のカスタマイズの問題の一部となっていました。
@@ -95,7 +94,7 @@ input {
たいていの場合、効果は枠線を除去し、 CSS でのスタイル設定を少し簡単にしますが、それは本質できありません。いくつかの場合 — 検索やラジオボタン/チェックボックスでは、もっと便利です。これを見ていきましょう。
-### 検索ボックスを変更する
+### 検索ボックスの変更
[`` ボックスをクリックして開いたときに現れる、選択肢の入ったボックスを操作することができないことです。選択肢は親に設定されたフォントを引き継がないことに気がつくでしょう。また、余白の設定や色なども一貫して設定することができません。例えば、 Firefox では [`color`](/ja/docs/Web/CSS/color) と [`background-color`](/ja/docs/Web/CSS/background-color) が [``](/ja/docs/Web/HTML/Element/option) 要素に適用できますが、 Chrome ではそうなりません。どちらも余白（例えば [`padding`](/ja/docs/Web/CSS/padding)）を適用できません。同じことはデータリスト用に出てくる自動補完リストにも当てはまります。
+2 つ目の、もう少し重要な問題は、 `` ボックスをクリックして開いたときに現れる、選択肢の入ったボックスを操作することができないことです。親要素に設定されているフォントを継承することはできますが、間隔や色などを設定することはできません。{{HTMLElement("datalist")}} で現れる自動補完リストも同様です。
本当に選択肢をスタイル設定する必要がある場合、カスタムコントロールを生成するライブラリーを使用するか、独自のカスタムコントロールを作成するかのどちらかが必要で、あるいは `multiple` 属性を使う select の場合、これはページ上に出てくるすべての選択肢を作成し、この特殊な問題を避けることができます。
@@ -506,9 +504,7 @@ label[for="file"]:active {
スタイル設定を制御したい場合は、この機能のカスタムソリューションを作ったり、[progressbar.js](https://kimmobrunfeldt.github.io/progressbar.js/#例) のようなサードパーティのソリューションを使ったりした方が簡単です。
-## スキルテスト
-
-この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[Test your skills: Advanced styling](/ja/docs/Learn/Forms/Test_your_skills:_Advanced_styling) を見てください。心に留めておくこととして、この評価シリーズでの質問は、[次の記事](/ja/docs/Learn/Forms/UI_pseudo-classes)の知識も前提していてるので、試す前にその記事に取り組むとよいかもしれません。
+[カスタムフォームコントロールの作成方法](/ja/docs/Learn/Forms/How_to_build_custom_form_controls)の記事には、HTML、CSS、JavaScript を用いた独自デザインの選択フィールドを構築する方法の例があります。
## まとめ
@@ -517,3 +513,9 @@ HTML フォームで CSS を使用するのはまだ困難ですが、しばし
このガイドの次の記事では、現代のブラウザーでさまざまな状態のフォームをスタイル設定できるさまざまな [UI 擬似クラス](/ja/docs/Learn/Forms/UI_pseudo-classes)を見ていきます。
{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}}
+
+### 高度なトピック
+
+- [カスタムフォームコントロールの作成方法](/ja/docs/Learn/Forms/How_to_build_custom_form_controls)
+- [JavaScript によるフォームの送信](/ja/docs/Learn/Forms/Sending_forms_through_JavaScript)
+- [フォームウィジェット向けのプロパティの互換性一覧表](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
diff --git a/files/ja/learn/forms/basic_native_form_controls/index.md b/files/ja/learn/forms/basic_native_form_controls/index.md
index 8029af07fced19..e2c2dba5aa6f0e 100644
--- a/files/ja/learn/forms/basic_native_form_controls/index.md
+++ b/files/ja/learn/forms/basic_native_form_controls/index.md
@@ -2,7 +2,7 @@
title: 基本的なネイティブフォームコントロール
slug: Learn/Forms/Basic_native_form_controls
l10n:
- sourceCommit: 25233e77fc3d3de84511203fd41eaddf361880ef
+ sourceCommit: 238e8acc4909bb7f2ba783e9198379502399effc
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
@@ -14,7 +14,7 @@ l10n:
前提条件:
- 基本的なコンピューターリテラシーと、基本的な
+ 基本的な
HTML の理解 。
@@ -65,10 +65,12 @@ l10n:
単一行のテキストフィールドは、ひとつだけ厳密な制約があります。改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。
-_下記のスクリーンショットは macOS での Firefox 71 と Safari、および Windows 10 の Chrome 79 と Edge 18 において、テキストフィールドが既定の場合、フォーカスされた場合、無効にされた場合を示しています。_
+下記のスクリーンショットは、テキスト入力の既定状態、フォーカス状態、無効状態を示しています。ほとんどのブラウザーは、コントロールの周りにフォーカスリングを使用してフォーカス状態を示し、灰色のテキストまたはフェード/半透明のコントロールを使用して無効状態を示します。
+この文書内で使用しているスクリーンショットは、macOS 上の Chrome ブラウザーで撮影したものです。ブラウザーによって、これらのフィールドやボタンに若干の違いがあるかもしれませんが、基本的なハイライト手法は同じです。
+
> **メモ:** 特定の検証制約を強制する [`type`](/ja/docs/Web/HTML/Element/input#type) 属性の値、例えば color、email、url 入力型については、次の記事の [HTML5 の入力型](/ja/docs/Learn/Forms/HTML5_input_types)で説明します。
#### パスワードフィールド
@@ -79,6 +81,10 @@ _下記のスクリーンショットは macOS での Firefox 71 と Safari、
` 要素の方がはるかにスタイル付けしやすいことです。
+```html
+このフォームを送信
+このフォームをリセット
+JavaScript なしでは何もしない
+```
+
+```html hidden
+
+```
+
+```css hidden
+button,
+input {
+ display: none;
+}
+.buttondemo button,
+.buttondemo input {
+ all: revert;
+}
+```
+
+{{ EmbedLiveSample('Actual_buttons', '500', '250') }}
+
> **メモ:** `image` 入力型もボタンとしてレンダリングされます。それについては後で触れます。
> **メモ:** この節の例は [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html) として GitHub にあります（[ライブで確認できます](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)）。
@@ -227,17 +273,17 @@ _下記のスクリーンショットは macOS での Firefox 71 と Safari、
` の開始・終了タグの間に挿入されます。一方で{{HTMLElement("input")}} 要素は空要素です。つまり `value` 属性に中身が挿入され、したがってプレーンテキストのコンテンツのみ使用できます。
+ボタンは {{HTMLElement("button")}} 要素と {{HTMLElement("input")}} 要素のどちらを使用しても常に同じ動作になります。しかし、上記の例で分かるように、 {{HTMLElement("button")}} 要素は中身として HTML を、`` の開始・終了タグの間に挿入して使用することができます。一方で {{HTMLElement("input")}} 要素は{{glossary("void element", "空要素")}}です。つまり `value` 属性に中身が挿入され、したがってプレーンテキストのコンテンツのみ使用できます。
-下記の例は macOS での Firefox 71 と Safari 13、および Windows 10 の Chrome 79 と Edge 18 にて、ボタンの既定、フォーカス、無効状態を示しています。
+次のスクリーンショットは、既定、フォーカス、無効の各状態のボタンを示しています。フォーカス状態では、ボタンの周りにフォーカスリングがあり、無効状態では、ボタンはグレーアウトしています。
-
+
### 画像ボタン
**画像ボタン**コントロールは {{HTMLElement("img")}} 要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン（前述）のように動作します。
-画像ボタンは、 {{HTMLElement("input")}} 要素の[`type`](/ja/docs/Web/HTML/Element/input#type) 属性を `image` に設定することで作成します。この要素は {{HTMLElement("img")}} 要素とまったく同じ属性に対応しており、さらに他のフォームボタンが対応している属性にもすべて対応しています。
+画像ボタンは、 {{HTMLElement("input")}} 要素の [`type`](/ja/docs/Web/HTML/Element/input#type) 属性を `image` に設定することで作成します。この要素は {{HTMLElement("img")}} 要素とまったく同じ属性に対応しており、さらに他のフォームボタンが対応している属性にもすべて対応しています。
```html
` 要素の中にエラーメッセージを表示させようとしています。 ``にセットされた [`aria-live`](/ja/docs/Accessibility/ARIA/ARIA_Live_Regions) 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。
+`` 要素の中にエラーメッセージを表示させようとしています。 ``にセットされた [`aria-live`](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。
> **メモ:** ここでの要点は、フォームに `novalidate` 属性をつけると、フォームがエラーメッセージのバブルを表示するのを停止して、その代わり DOM 内にカスタムエラーメッセージを選択した方法で表示させられることです。
@@ -782,7 +802,7 @@ form.addEventListener("submit", (event) => {
## スキルテスト
-この記事の最後に到着しましたが、最も大事な情報を覚えていますか？ 次に進む前に、この情報を保持しているか検証するテストがあります — [スキルテスト: フォーム検証](/ja/docs/Learn/Forms/Test_your_skills:_Form_validation) を見てください。
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: フォーム検証](/ja/docs/Learn/Forms/Test_your_skills:_Form_validation) を見てください。
## まとめ
diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/index.md b/files/ja/learn/forms/how_to_structure_a_web_form/index.md
index 91600ee13cdbcf..3c3052e81bb840 100644
--- a/files/ja/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.md
@@ -2,7 +2,7 @@
title: フォームの構築方法
slug: Learn/Forms/How_to_structure_a_web_form
l10n:
- sourceCommit: 456818a08b697e125ddb765d8f18020bc80c9747
+ sourceCommit: ccec5393a2b1bbddfdfc1c1d71b076c6ddd3942f
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
@@ -14,7 +14,6 @@ l10n:
前提条件:
- 基本的なコンピューターリテラシーと、
HTML の基本的な理解 .
@@ -134,15 +133,15 @@ l10n:
@@ -150,7 +149,7 @@ l10n:
Name: *
-
```
@@ -174,7 +173,7 @@ l10n:
サンプルでわかるように、ラベルとそのウィジェットを {{HTMLElement("ul")}} や {{HTMLElement("ol")}} リストの中の {{HTMLElement("li")}} 要素で包み込むのが一般的な慣習です。HTML リストにあるように、{{HTMLElement("p")}} 要素と {{HTMLElement("div")}} 要素も良く使われます。リストは複数のチェックボックスやラジオボタンを構造化するのに最もよく使われます。
-{{HTMLElement("fieldset")}} 要素に加えて、複雑なフォームの構築に HTML の見出し (例{{htmlelement("h1")}}, {{htmlelement("h2")}}) やセクション (例 {{htmlelement("section")}}) を使うことも一般的です。
+{{HTMLElement("fieldset")}} 要素に加えて、複雑なフォームの構築に HTML の見出し (例{{htmlelement("Heading_Elements", "h1")}}, {{htmlelement("Heading_Elements", "h2")}}) やセクション (例 {{htmlelement("section")}}) を使うことも一般的です。
とりわけ、コーディングスタイルがどうあるのが心地よく、どれがアクセシブルで使いやすいフォームとなるのかを見つけるのはあなた次第です。別の機能セクションは別の {{htmlelement("section")}} 要素と、ラジオボタンを含む {{htmlelement("fieldset")}} にそれぞれ分けておくべきです。
@@ -182,31 +181,25 @@ l10n:
これらのアイデアを実践し、もう少し複雑なフォーム構造、つまり支払いフォームを作成しましょう。このフォームはあなたがまだ理解していないかもしれないウィジェットタイプをいくつも含みますが、今はそのことを心配しないでください。次の記事 ([基本的なネイティブフォームコントロール](/ja/docs/Learn/Forms/Basic_native_form_controls)) でそれらがどのように機能するのかがわかります。今のところ、以下の説明に沿って説明を注意深く読み、フォームを構成するためにどのラッパー要素を使用しているか、そしてその理由を理解することから始めてください。
-1. あらかじめ、[空のテンプレートファイル](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)と[お支払いフォームの CSS](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) のローカルコピーをコンピューターの新しいディレクトリーに作成します。
-2. まず最初に、HTML {{htmlelement("head")}} 内に次の行を追加して CSS を HTML に適用します。
+1. あらかじめ、[空のテンプレートファイル](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html)のローカルコピーをコンピューターの新しいディレクトリーに作成します。
- ```html
-
前提条件:
- コンピューターリテラシーの基本と、
+ 基本的な
HTML の理解 。
@@ -29,13 +29,13 @@ l10n:
-> **メモ:** この記事のたいていの機能はブラウザー間で広くを対応されています。例外は注記しておきます。ブラウザーサポートについての詳細は、[HTML フォーム要素のリファレンス](/ja/docs/Web/HTML/Element#フォーム)、特に [\
前提条件:
- 基本的なコンピューターリテラシーと、基本的な
+ 基本的な
HTML の理解 。
@@ -41,9 +41,9 @@ l10n:
{{EmbedLiveSample("Multi-line_text_fields", 120, 160)}}
-`` の構文に注意してください。
これは HTML の奇妙な点の 1 つです。
-`イベントログ:
+
```
```css hidden
body {
display: grid;
- grid-template-areas: "control log";
+ grid-template-areas: "control log";
}
.controls {
@@ -121,7 +123,7 @@ button {
}
```
-#### JS
+#### JavaScript
```js
const log = document.querySelector(".event-log-contents");
@@ -129,27 +131,27 @@ const reload = document.querySelector("#reload");
reload.addEventListener("click", () => {
log.textContent = "";
- window.setTimeout(() => {
+ setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener("load", (event) => {
- log.textContent = log.textContent + "load\n";
+ log.textContent += "load\n";
});
document.addEventListener("readystatechange", (event) => {
- log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+ log.textContent += `readystate: ${document.readyState}\n`;
});
document.addEventListener("DOMContentLoaded", (event) => {
- log.textContent = log.textContent + `DOMContentLoaded\n`;
+ log.textContent += "DOMContentLoaded\n";
});
```
#### 結果
-{{ EmbedLiveSample('Live_example', '100%', '160px') }}
+{{ EmbedLiveSample('ライブサンプル', '100%', '160px') }}
## 仕様書
@@ -162,4 +164,3 @@ document.addEventListener("DOMContentLoaded", (event) => {
## 関連情報
- 関連イベント: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}
-- {{domxref("Window")}} を対象とした同じイベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}
diff --git a/files/ja/web/api/document/elementfrompoint/index.md b/files/ja/web/api/document/elementfrompoint/index.md
index df84ca32b1fd24..fa98c27c55a77a 100644
--- a/files/ja/web/api/document/elementfrompoint/index.md
+++ b/files/ja/web/api/document/elementfrompoint/index.md
@@ -1,6 +1,9 @@
---
-title: Document.elementFromPoint()
+title: "Document: elementFromPoint() メソッド"
+short-title: elementFromPoint()
slug: Web/API/Document/elementFromPoint
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{APIRef("DOM")}}
@@ -19,8 +22,8 @@ slug: Web/API/Document/elementFromPoint
## 構文
-```js
-elementFromPoint(x, y);
+```js-nolint
+elementFromPoint(x, y)
```
### 引数
@@ -57,7 +60,7 @@ function changeColor(newColor) {
赤
```
-HTMLには、色を変更する段落と、色を青に変更するボタン、色を赤に変更するボタンの 2 つが用意されています。
+HTML には、色を変更する段落と、色を青に変更するボタン、色を赤に変更するボタンの 2 つが用意されています。
### 結果
diff --git a/files/ja/web/api/document/elementsfrompoint/index.md b/files/ja/web/api/document/elementsfrompoint/index.md
index e9af0f00b5aff0..5543feaece971c 100644
--- a/files/ja/web/api/document/elementsfrompoint/index.md
+++ b/files/ja/web/api/document/elementsfrompoint/index.md
@@ -1,8 +1,9 @@
---
title: "Document: elementsFromPoint() メソッド"
+short-title: elementsFromPoint()
slug: Web/API/Document/elementsFromPoint
l10n:
- sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+ sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d
---
{{APIRef("DOM")}}
diff --git a/files/ja/web/api/document/embeds/index.md b/files/ja/web/api/document/embeds/index.md
index f2625d85cae39b..52acf2b560e0f7 100644
--- a/files/ja/web/api/document/embeds/index.md
+++ b/files/ja/web/api/document/embeds/index.md
@@ -1,19 +1,16 @@
---
-title: Document.embeds
+title: "Document: embeds プロパティ"
+short-title: embeds
slug: Web/API/Document/embeds
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{ApiRef}}
-{{domxref("Document")}} インターフェイスの **`embeds`** プロパティは読み取り専用で、現在の文書の埋め込み {{htmlelement("object")}} 要素のリストを返します。
+**`embeds`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、現在の文書に埋め込まれた {{htmlelement("embed")}} 要素のリストを返します。
-## 構文
-
-```
-nodeList = document.embeds
-```
-
-### 値
+## 値
{{domxref("HTMLCollection")}} です。
diff --git a/files/ja/web/api/document/enablestylesheetsforset/index.md b/files/ja/web/api/document/enablestylesheetsforset/index.md
index 61cecbc8dec5f1..d7554091d17132 100644
--- a/files/ja/web/api/document/enablestylesheetsforset/index.md
+++ b/files/ja/web/api/document/enablestylesheetsforset/index.md
@@ -1,16 +1,19 @@
---
-title: Document.enableStyleSheetsForSet()
+title: "Document: enableStyleSheetsForSet() メソッド"
+short-title: enableStyleSheetsForSet()
slug: Web/API/Document/enableStyleSheetsForSet
+l10n:
+ sourceCommit: 3966c40a3917825e6e467f1592bc7f8d59458e74
---
-{{APIRef("DOM")}}{{deprecated_header}}
+{{APIRef("DOM")}}{{deprecated_header}}{{Non-standard_header}}
現在のスタイルシートセットの中で指定された名前に一致するスタイルシートを有効化し、それ以外のスタイルシートを (常に有効になるタイトルなしのものを除いて) 無効化します。
## 構文
-```js
-enableStyleSheetsForSet(name);
+```js-nolint
+enableStyleSheetsForSet(name)
```
### 引数
@@ -35,6 +38,10 @@ enableStyleSheetsForSet(name);
document.enableStyleSheetsForSet("Some style sheet set name");
```
+## 仕様書
+
+どの仕様書にも含まれていません。
+
## ブラウザーの互換性
{{Compat}}
@@ -47,4 +54,3 @@ document.enableStyleSheetsForSet("Some style sheet set name");
- {{domxref("document.preferredStyleSheetSet")}}
- {{domxref("document.selectedStyleSheetSet")}}
- {{domxref("document.enableStyleSheetsForSet()")}}
-- [外部スタイルシートでタイトルを正しく使用する](/ja/docs/Archive/Web_Standards/Correctly_Using_Titles_With_External_Stylesheets)
diff --git a/files/ja/web/api/document/evaluate/index.md b/files/ja/web/api/document/evaluate/index.md
index 4c6ddbfd5b653c..44252c5e7f632e 100644
--- a/files/ja/web/api/document/evaluate/index.md
+++ b/files/ja/web/api/document/evaluate/index.md
@@ -1,101 +1,142 @@
---
-title: Document.evaluate()
+title: "Document: evaluate() メソッド"
+short-title: evaluate()
slug: Web/API/Document/evaluate
+l10n:
+ sourceCommit: 8d89e9669f59f208a80c0bdbee48ba75d37a726e
---
{{ ApiRef("DOM") }}
-[XPath](/ja/docs/XPath) 式やその他与えられたパラメータに基づいて [`XPathResult`](/ja/docs/XPathResult) を返します。
+**`evaluate()`** は {{domxref("Document")}} インターフェイスのメソッドで、引数で与えられた [XPath](/ja/docs/Web/XPath) 式に基づいて要素を選択します。
+
+XPath 式は HTML および XML 文書の両方を評価することができます。
## 構文
-```
-var xpathResult = document.evaluate(
- xpathExpression,
- contextNode,
- namespaceResolver,
- resultType,
- result
-);
+```js-nolint
+evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result)
```
-- `xpathExpression` は評価される Xpath を示す文字列です。
-- `contextNode` はクエリの*コンテキストノード*を指定します([XPath の仕様](http://www.w3.org/TR/xpath)を参照してください) コンテキストノードとして `document` を渡すのが一般的です。
-- `namespaceResolver` は、任意の名前空間接頭辞を受け取り、その接頭辞に関連付けられた名前空間 URI を文字列として返す関数です。接頭辞が文書の中でマッチされるように、XPath 自身の中で接頭辞を解決するために使われます。HTML 文書向け、または名前空間接頭辞を使わないときは `null` を指定するのが一般的です。
-- `resultType` は返り値である `XPathResult` のタイプに対応する整数です。XPathResult コンストラクタの[名前付き定数プロパティ](#Result_types) (例えば `XPathResult.ANY_TYPE`) を使用してください。これらは 0 から 9 までの整数に対応しています。
-- `result` は結果として使われる既存の `XPathResult` です。`null` を指定するのが最も一般的です。`null` は新しい `XPathResult を生成します。`
+### 引数
+
+- `xpathExpression`
+ - : 文字列で、評価される xpath を表します。
+- `contextNode`
+ - : このクエリーのコンテキストノードです（[XPath 仕様書](https://www.w3.org/TR/1999/REC-xpath-19991116/)を参照してください）。
+ コンテキストノードとして `document` を渡すのが一般的です。
+- `namespaceResolver`
+ - : 名前空間接頭辞を渡すと、その接頭辞に関連付けられた名前空間 URI を表す文字列を返す関数です。
+ これは、_xpath_ 自身の中で接頭辞を解決し、文書と照合できるようにするために使用することができます。
+ 値が `null` の場合は、HTML 文書や 名前空間接頭辞を使用していない場合によく用いられます。
+- `resultType`
+
+ - : 整数で、返す結果の `XPathResult` の型に対応する整数。
+ 取りうる値は以下の通りです。
+ - `ANY_TYPE` (`0`)
+ - : 指定された式から自然に得られるあらゆる型。
+ - `NUMBER_TYPE` (`1`)
+ - : 単一の数値を含む結果セット。例えば `count()` 関数を使用する _xpath_ 式で有益なものです。
+ - `STRING_TYPE` (`2`)
+ - : 単一の文字列を含む結果セット。
+ - `BOOLEAN_TYPE` (`3`)
+ - : 単一の論理値を含む結果セット。例えば、 `not()` 関数を使用した _xpath_ 式に有用です。
+ - `UNORDERED_NODE_ITERATOR_TYPE` (`4`)
+ - : 式に一致するすべてのノードを含む結果セット。結果セット内のノードは、必ずしも文書内に現れる順番とは限りません。
+ > **メモ:** この型の結果は、文書内のノードへの参照を格納します。
+ > ノードを変更すると、イテレーターは無効になります。
+ > ノードを変更した後、結果を反復処理しようとするとエラーになります。
+ - `ORDERED_NODE_ITERATOR_TYPE` (`5`)
+ - : 式に一致するすべてのノードを含む結果セット。結果セット内のノードは、文書内に現れる順序と同じです。
+ > **メモ:** この型の結果は、文書内のノードへの参照を格納します。
+ > ノードを変更すると、イテレーターは無効になります。
+ > ノードを変更した後、結果を反復処理しようとするとエラーになります。
+ - `UNORDERED_NODE_SNAPSHOT_TYPE` (`6`)
+ - : 式に一致するすべてのノードのスナップショットを格納した結果セット。結果セット内のノードは、必ずしも文書内のノードと同じ順序ではありません。
+ > **メモ:** この型の結果はスナップショットで、基本的に一致するノードのリストです。
+ > スナップショットノードを変更することで、文書に変更を加えることができます。
+ > 文書を変更してもスナップショットは無効にはなりません。
+ > しかし、文書が変更された場合、スナップショットは文書の現在の状態と一致しないことがあります。
+ > ノードが移動されたり、変更されたり、追加されたり、除去されたりすることがあるからです。
+ - `ORDERED_NODE_SNAPSHOT_TYPE` (`7`)
+ - : 式に一致するすべてのノードのスナップショットを含む結果セット。結果セット内のノードは、文書内に現れる順序と同じです。
+ > **メモ:** この型の結果はスナップショットで、基本的に一致するノードのリストです。
+ > スナップショットノードを変更することで、文書に変更を加えることができます。
+ > 文書を変更してもスナップショットは無効にはなりません。
+ > しかし、文書が変更された場合、スナップショットは文書の現在の状態と一致しないことがあります。
+ > ノードが移動されたり、変更されたり、追加されたり、除去されたりすることがあるからです。
+ - `ANY_UNORDERED_NODE_TYPE` (`8`)
+ - : 式に一致する単一のノードを含む結果セット。このノードは、必ずしも文書内の式に一致する最初のノードであるとは限りません。
+ - `FIRST_ORDERED_NODE_TYPE` (`9`)
+ - : 式に一致する文書内の最初のノードを含む結果設定します。
+
+- `result`
+ - : 結果に使用する既存の `XPathResult`。`null` を設定すると、メソッドは新しい `XPathResult` を作成して返します。
+
+### 返値
+
+選択されたノードにリンクする {{domxref("XPathResult")}} です。もし `result` が `null` であった場合は新しいオブジェクトとなり、そうでなかった場合は `result` 引数に渡したオブジェクトと同じオブジェクトとなります。
## 例
+### XPath によりすべての H2 見出しを検索
+
```js
-var headings = document.evaluate(
+const headings = document.evaluate(
"/html/body//h2",
document,
null,
XPathResult.ANY_TYPE,
null,
);
-/* Search the document for all h2 elements.
- * The result will likely be an unordered node iterator. */
-var thisHeading = headings.iterateNext();
-var alertText = "Level 2 headings in this document are:\n";
+/* この文書ですべての h2 要素を検索する。
+ * 結果は、おそらく順序なしのノードイテレーターになる。 */
+let thisHeading = headings.iterateNext();
+let alertText = "この文書のレベル 2 見出し:\n";
while (thisHeading) {
- alertText += thisHeading.textContent + "\n";
+ alertText += `${thisHeading.textContent}\n`;
thisHeading = headings.iterateNext();
}
-alert(alertText); // Alerts the text of all h2 elements
+alert(alertText); // すべての h2 要素のテキストをアラート表示
```
-Note, in the above example, a more verbose XPath is preferred over common shortcuts such as `//h2`. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits _every_ node from the root and all subnodes looking for possible matches.
+上の例では、`//h2` のような一般的なショートカットよりも、より冗長な _xpath_ が推奨されていることに注意してください。一般的に、上記の例のように、より詳細な _xpath_ セレクターを使用すると、特に非常に大きな文書において、パフォーマンスが大幅に向上します。これは、クエリーの評価で不必要なノードを訪問して時間を浪費しないためです。 // を使用すると、ルートとすべてのサブノードからすべてのノードを訪問して一致する可能性があるものを探すため、一般的に遅くなります。
-Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:
+コンテキスト引数を注意深く使用することで、さらなる最適化を図ることができます。例えば、探しているコンテンツが body タグの内側のどこかにあることがわかっている場合は、このように使用することができます。
```js
document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
```
-Notice in the above `document.body` has been used as the context instead of `document` so the XPath starts from the body element. (In this example, the `"."` is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving `//h2`) the query would start from the root node (`html`) which would be more wasteful.)
-
-See [Introduction to using XPath in JavaScript](/ja/docs/Introduction_to_using_XPath_in_JavaScript) for more information.
-
-## 注釈
-
-- XPath expressions can be evaluated on HTML and XML documents.
-- While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.
+上記の例では、コンテキストとして `document` の代わりに `document.body` が使用されているので、_xpath_ は body 要素から始まることに注意してください。（この例内の `"."` は、コンテキストノードである document.body からクエリーを始めることを示すために重要です。"." が省略された場合（`//h2`のまま）、クエリーはルートノード (`html`) から開始することになり、より無駄が多くなります）。
+詳しくは[JavaScript での XPath の利用の手引き](/ja/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript)を参照してください。
-## 戻り値の分類
+### xml:id で要素を取得
-(Merge with [Template:XPathResultConstants](/Template:XPathResultConstants)?
+この関数は {{domxref("Document.getElementById()")}} の置き換えで、`xml:id` で検索したい場合に使います。
-These are supported values for the `resultType` parameter of the `evaluate` method:
-
-| Result Type | Value | Description |
-| ------------------------------ | ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ANY_TYPE` | 0 | Whatever type naturally results from the given expression. |
-| `NUMBER_TYPE` | 1 | A result set containing a single number. Useful, for example, in an XPath expression using the `count()` function. |
-| `STRING_TYPE` | 2 | A result set containing a single string. |
-| `BOOLEAN_TYPE` | 3 | A result set containing a single boolean value. Useful, for example, an an XPath expression using the `not()` function. |
-| `UNORDERED_NODE_ITERATOR_TYPE` | 4 | A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document. |
-| `ORDERED_NODE_ITERATOR_TYPE` | 5 | A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document. |
-| `UNORDERED_NODE_SNAPSHOT_TYPE` | 6 | A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document. |
-| `ORDERED_NODE_SNAPSHOT_TYPE` | 7 | A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document. |
-| `ANY_UNORDERED_NODE_TYPE` | 8 | A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression. |
-| `FIRST_ORDERED_NODE_TYPE` | 9 | A result set containing the first node in the document that matches the expression. |
-
-Results of `NODE_ITERATOR` types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.
-
-Results of `NODE_SNAPSHOT` types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.
+```js
+function getElementByIdWrapper(xmldoc, id) {
+ return xmldoc.evaluate(
+ `//*[@xml:id="${id}"]`,
+ xmldoc,
+ () => "http://www.w3.org/XML/1998/namespace",
+ XPathResult.FIRST_ORDERED_NODE_TYPE,
+ null,
+ ).singleNodeValue;
+}
+```
-## 仕様
+## 仕様書
{{Specifications}}
-## ブラウザ互換性
+## ブラウザーの互換性
{{Compat}}
-## 関連項目
+## 関連情報
-- [DOM:document.createExpression](/ja/docs/DOM/document.createExpression)
-- [XPath Code Snippets](/ja/docs/Code_snippets/XPath)
-- [Check for browser support](https://codepen.io/johan/full/ckFgn)
+- {{domxref("Document.createExpression()")}}
+- {{domxref("XPathResult")}}
+- [ブラウザーの対応のチェック](https://codepen.io/johan/full/DJoqaX)（英語）
diff --git a/files/ja/web/api/document/execcommand/index.md b/files/ja/web/api/document/execcommand/index.md
index cdf5c2156e8f56..ac8946fead68e4 100644
--- a/files/ja/web/api/document/execcommand/index.md
+++ b/files/ja/web/api/document/execcommand/index.md
@@ -1,17 +1,20 @@
---
title: "Document: execCommand() メソッド"
+short-title: execCommand()
slug: Web/API/Document/execCommand
l10n:
- sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+ sourceCommit: 72ca3d725e3e56b613de3ac9727bd0d6d619c38a
---
{{ApiRef("DOM")}}{{deprecated_header}}
-HTML 文書がデザインモード ([`designMode`](/ja/docs/Web/API/Document/designMode)) に切り替わっていると、その `document` オブジェクトは **`execCommand`** メソッドを公開して、[フォーム入力欄](/ja/docs/Web/HTML/Element/input)や [`contentEditable`](/ja/docs/Web/HTML/Global_attributes/contenteditable) を持った要素など、現在編集可能な領域を操作するためのコマンドが実行できるようにします。
+**`execCommand`** メソッドは、複数の異なるコマンドを実装しています。クリップボードへのアクセスを提供するものもあれば、[フォーム入力フィールド](/ja/docs/Web/HTML/Element/input)や [`contenteditable`](/ja/docs/Web/HTML/Global_attributes/contenteditable) の要素、文書全体（[デザインモード](/ja/docs/Web/API/Document/designMode)に切り替えた場合）を編集するためのものもあります。
-多くのコマンドは、文書の[選択範囲](/ja/docs/Web/API/Selection)に対して影響を及ぼしますが（太字、イタリック、など）、他にも新しい要素の挿入（リンクの追加）や行全体に影響するもの（字下げ）もあります。 `contentEditable` を使用した場合、 `execCommand()` は現在アクティブな編集可能要素に影響を及ぼします。
+クリップボードにアクセスするには、`execCommand()` よりも新しい[クリップボード API](/ja/docs/Web/API/Clipboard_API) が推奨されます。しかし、編集コマンドを置き換えるものはありません。DOM を直接操作するのとは異なり、`execCommand()` によって実行された変更はアンドゥバッファ (編集履歴) を保持します。
-[クリップボード API](/ja/docs/Web/API/Clipboard_API) は多くの場合、`execCommand` の代わりに使用することができますが、`execCommand` が便利なこともあります。特に、クリップボード API は `insertText` コマンドの代わりを提供していません。これは `textarea` や `input` 要素でアンドゥバッファー（編集履歴）に保存してからカーソル位置のテキストをプログラムから置き換えるのに使うことができます。
+多くのコマンドは、文書の[選択範囲](/ja/docs/Web/API/Selection)に対して影響を及ぼします。例えば、一部のコマンド（太字、斜体など）は現在選択されているテキストを整形する一方で、他のコマンドは選択範囲を削除したり、新しい要素を挿入したり（選択範囲を置き換えたり）、行全体に影響を与えたり（インデント）します。変更することができるのは現在アクティブになっている編集可能な要素だけですが、一部のコマンド（`copy`など）は編集可能な要素がなくても動作します。
+
+> **メモ:** `execCommand()` によって行われた変更は、ブラウザーや構成によって {{domxref("Element/beforeinput_event", "beforeinput")}} と {{domxref("Element/input_event", "input")}} イベントを発生させる場合と発生させない場合があります。起動されると、イベントのハンドラーは `execCommand()` を返す前に実行されます。制作者はこのような再帰的な呼び出し、特にこれらのイベントに応答して `execCommand()` を呼び出す場合には注意が必要です。Firefox 82 以降、入れ子になった `execCommand()` 呼び出しは常に失敗します。[バグ 1634262](https://bugzil.la/1634262) を参照してください。
## 構文
@@ -134,7 +137,7 @@ execCommand(aCommandName, aShowDefaultUI, aValueArgument)
論理値で、コマンドが対応していないか無効であれば `false` になります。
-> **メモ:** `document.execCommand()` はユーザーの操作の中で行われた場合にのみ `true` を返します。コマンドを呼び出す前に、ブラウザーが対応しているかどうかを調べるために返値を使用しないでください。 Firefox 82 以降は、`document.execCommand()` を重ねて呼び出すと常に `false` を返します。
+> **メモ:** `document.execCommand()` はユーザーの操作の中で行われた場合にのみ `true` を返します。コマンドを呼び出す前に、ブラウザーが対応しているかどうかを調べるために返値を使用しないでください。
## 例
@@ -213,7 +216,7 @@ function insertText(newText, selector) {
## 仕様書
-この機能は現行の仕様書に含まれていません。標準化の予定もありません。
+この機能は現在のどの仕様にも属しませんが、これを規定しようとする[非公式な草案](https://w3c.github.io/editing/docs/execCommand/)があります。
## ブラウザーの互換性
diff --git a/files/ja/web/api/document/exitpictureinpicture/index.md b/files/ja/web/api/document/exitpictureinpicture/index.md
index 3896e4bfaa1923..77f2a3687f2a9c 100644
--- a/files/ja/web/api/document/exitpictureinpicture/index.md
+++ b/files/ja/web/api/document/exitpictureinpicture/index.md
@@ -3,12 +3,12 @@ title: "Document: exitPictureInPicture() メソッド"
short-title: exitPictureInPicture()
slug: Web/API/Document/exitPictureInPicture
l10n:
- sourceCommit: 04ebe57066db2cff350018649bdb15b2a10c67ba
+ sourceCommit: 4cbb657f882495b1cd18cbbaa8d1c5237bce4eb8
---
-{{ApiRef("Picture-in-Picture API")}}
+{{APIRef("Picture-in-Picture API")}}
-{{domxref("Document")}} の **`exitPictureInPicture()`** メソッドは、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。これは通常、 {{domxref("HTMLVideoElement.requestPictureInPicture()")}} を前回呼び出したときの効果を逆転させます。
+**`exitPictureInPicture()`** は {{domxref("Document")}} インターフェイスのメソッドで、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。これは通常、 {{domxref("HTMLVideoElement.requestPictureInPicture()")}} を前回呼び出したときの効果を逆転させます。
## 構文
@@ -24,6 +24,11 @@ exitPictureInPicture()
プロミス ({{jsxref("Promise")}}) で、{{Glossary("user agent", "ユーザーエージェント")}}がピクチャインピクチャモードを終了した時点で解決されます。全画面モードを終了しようとしてエラーが発生した場合、プロミスの `catch()` ハンドラーが呼び出されます。
+### 例外
+
+- `InvalidStateError` {{domxref("DOMException")}}
+ - : `document.pictureInPictureElement` が `null` の場合に発生します。
+
## 例
この例では、現在の文書内でマウスボタンがクリックされるたびに、ピクチャインピクチャモードを終了させます。
diff --git a/files/ja/web/api/document/exitpointerlock/index.md b/files/ja/web/api/document/exitpointerlock/index.md
index a2c3fc606130a3..888289501293b0 100644
--- a/files/ja/web/api/document/exitpointerlock/index.md
+++ b/files/ja/web/api/document/exitpointerlock/index.md
@@ -1,13 +1,16 @@
---
-title: Document.exitPointerLock()
+title: "Document: exitPointerLock() メソッド"
+short-title: exitPointerLock()
slug: Web/API/Document/exitPointerLock
l10n:
- sourceCommit: d4619276d67ca1ee02bd964d884ec52c2aa2ad4b
+ sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a
---
-{{APIRef("DOM")}}
+{{APIRef("Pointer Lock API")}}
-**`exitPointerLock()`** メソッドは、以前 {{domxref("Element.requestPointerLock()")}} でリクエストされたポインターロックを非同期に解放します。
+**`exitPointerLock()`** は {{domxref("Document")}} インターフェイスのメソッドで、以前 {{domxref("Element.requestPointerLock")}} でリクエストされたポインターロックを非同期に解放します。
+
+> **メモ:** **`exitPointerLock()`** メソッドは文書に対して呼び出されるのに対し、**`requestPointerLock()`** メソッドは要素に対して呼び出されます。
リクエストが成功したか失敗したかを追跡するには、 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} および {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} イベントを待ち受けする必要があります。
diff --git a/files/ja/web/api/document/featurepolicy/index.md b/files/ja/web/api/document/featurepolicy/index.md
index 7e0d7725fa4baa..278501cb276678 100644
--- a/files/ja/web/api/document/featurepolicy/index.md
+++ b/files/ja/web/api/document/featurepolicy/index.md
@@ -1,19 +1,16 @@
---
-title: Document.featurePolicy
+title: "Document: featurePolicy プロパティ"
+short-title: featurePolicy
slug: Web/API/Document/featurePolicy
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{APIRef("Feature Policy")}}
-**`featurePolicy`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、特定の文書に適用される機能ポリシーを見ることができる簡単な API を提供する {{domxref("Policy")}} インターフェイスを返します。
+**`featurePolicy`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、特定の文書に適用される[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)を見ることができる簡単な API を提供する {{domxref("FeaturePolicy")}} インターフェイスを返します。
-## 構文
-
-```
-var policy = iframeElement.featurePolicy
-```
-
-### 値
+## 値
{{domxref("FeaturePolicy")}} オブジェクトで、文書に適用された機能ポリシーの設定を調べるために使用するうことができます。
diff --git a/files/ja/web/api/document/fgcolor/index.md b/files/ja/web/api/document/fgcolor/index.md
index 29d8df85f51b4a..830244c3e3d3f8 100644
--- a/files/ja/web/api/document/fgcolor/index.md
+++ b/files/ja/web/api/document/fgcolor/index.md
@@ -1,22 +1,18 @@
---
-title: Document.fgColor
+title: "Document: fgColor プロパティ"
+short-title: fgColor
slug: Web/API/Document/fgColor
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{ApiRef}}{{Deprecated_header}}
**`fgColor`** は、現在の文書の前景色またはテキストの色を取得または設定します。
-## 構文
-
-```
-var color = document.fgColor;
-document.fgColor = color;
-```
-
### 引数
-- `color` は文字列で、色を表すキーワード ("red" など) または 16 進数の値 (`"#000000"` など) です。
+文字列で、色を表すキーワード ("red" など) または 16 進数の値 (`"#ff0000"` など) です。
## 例
diff --git a/files/ja/web/api/document/firstelementchild/index.md b/files/ja/web/api/document/firstelementchild/index.md
new file mode 100644
index 00000000000000..51ac8426b95ca7
--- /dev/null
+++ b/files/ja/web/api/document/firstelementchild/index.md
@@ -0,0 +1,38 @@
+---
+title: "Document: firstElementChild プロパティ"
+short-title: firstElementChild
+slug: Web/API/Document/firstElementChild
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+---
+
+{{ APIRef("DOM") }}
+
+**`Document.firstElementChild`** は読み取り専用プロパティで、この文書の最初の子要素 ({{domxref("Element")}}) を返します。子要素がなければ `null` を返します。
+
+HTML 文書においては、これは普通は唯一の子である、ルートの `` 要素です。
+
+文書内の特定の要素における最初の子要素については、 {{domxref("Element.firstElementChild")}} を参照してください。
+
+## 値
+
+{{domxref("Element")}} オブジェクト、または `null` です。
+
+## 例
+
+```js
+document.firstElementChild;
+// この文書の唯一の子でである、ルート 要素を返す
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.firstElementChild")}}
diff --git a/files/ja/web/api/document/forms/index.md b/files/ja/web/api/document/forms/index.md
index 60f1b8ee2a792f..40ba94b4ea88e0 100644
--- a/files/ja/web/api/document/forms/index.md
+++ b/files/ja/web/api/document/forms/index.md
@@ -1,23 +1,22 @@
---
-title: Document.forms
+title: "Document: forms プロパティ"
+short-title: forms
slug: Web/API/Document/forms
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
-{{domxref("Document")}} インターフェイスの **`forms`** プロパティは読み取り専用で、文書内に含まれるすべての {{HTMLElement("form")}} を列挙した {{domxref("HTMLCollection")}} を返します。
-
-> **メモ:** 同様に、{{domxref("HTMLFormElement.elements")}} プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。
+{{APIRef("DOM")}}
-## 構文
+**`forms`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、文書内に含まれるすべての {{HTMLElement("form")}} を列挙した {{domxref("HTMLCollection")}} を返します。
-```
-collection = document.forms;
-```
+> **メモ:** 同様に、{{domxref("HTMLFormElement.elements")}} プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。
-### 値
+## 値
-文書のすべてのフォームを列挙する {{domxref("HTMLCollection")}} オブジェクトです。コレクションのそれぞれの項目は、単一の `
@@ -97,7 +96,5 @@ var selectFormElement = document.forms[index].elements[index];
## 関連情報
-- [HTML forms](/ja/docs/Learn/HTML/Forms)
+- [HTML フォーム](/ja/docs/Learn/Forms)
- {{HTMLElement("form")}} および {{domxref("HTMLFormElement")}} インターフェイス
-
-{{APIRef("DOM")}}
diff --git a/files/ja/web/api/document/fragmentdirective/index.md b/files/ja/web/api/document/fragmentdirective/index.md
index 4a4e3e2d2b7119..b779765e79366a 100644
--- a/files/ja/web/api/document/fragmentdirective/index.md
+++ b/files/ja/web/api/document/fragmentdirective/index.md
@@ -3,7 +3,7 @@ title: "Document: fragmentDirective プロパティ"
short-title: fragmentDirective
slug: Web/API/Document/fragmentDirective
l10n:
- sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+ sourceCommit: 9aaaa8597f2b1b952a9ed116cbe48e4810254cea
---
{{APIRef}}{{SeeCompatTable}}
@@ -20,27 +20,8 @@ l10n:
```js
document.fragmentDirective;
-```
-
-以下のような構造を持つ {{domxref("FragmentDirective")}} オブジェクトインスタンスが返されるはずです。
-
-```js
-items: [
- {
- prefix: "",
- textStart: "Module Workers",
- textEnd: "",
- suffix: "support",
- type: "text",
- },
- {
- prefix: "feedback on",
- textStart: "usability",
- textEnd: "",
- suffix: "",
- type: "text",
- },
-];
+// 対応していれば FragmentDirective オブジェクトが返される
+// そうでなければ undefined となる
```
この機能は、現在は主に機能検出を目的としていますが、将来的には、翻訳ヒントなど他の情報を記載するために展開することができます。
diff --git a/files/ja/web/api/document/fullscreenenabled/index.md b/files/ja/web/api/document/fullscreenenabled/index.md
index c87d023e2da7c4..e20bc4a04066f4 100644
--- a/files/ja/web/api/document/fullscreenenabled/index.md
+++ b/files/ja/web/api/document/fullscreenenabled/index.md
@@ -1,34 +1,33 @@
---
-title: Document.fullscreenEnabled
+title: "Document: fullscreenEnabled プロパティ"
+short-title: fullscreenEnabled
slug: Web/API/Document/fullscreenEnabled
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{APIRef("Fullscreen API")}}
-{{domxref("Document")}} インターフェイスの **`fullscreenEnabled`** プロパティは読み取り専用で、全画面モードが使用できるかを示します。全画面モードは文書内にウィンドウ化されたプラグインを含まないページ、および文書内のすべての {{HTMLElement("iframe")}} 要素が [`allowfullscreen`](/ja/docs/Web/HTML/Element/iframe#allowfullscreen) 属性を持つページに限り使用することができます。
+**`fullscreenEnabled`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、全画面モードが使用できるかどうかを示します。
-このプロパティは読み取り専用ですが、変更されても (strict モードでも) 例外を投げません。セッターは何もしないので、無視されます。
+全画面モードは、文書内にウィンドウ化されたプラグインを含まないページ、および文書内のすべての {{HTMLElement("iframe")}} 要素が [`allowfullscreen`](/ja/docs/Web/HTML/Element/iframe#allowfullscreen) 属性を持つページに限り使用することができます。
-## 構文
+このプロパティは読み取り専用ですが、変更されても（厳格モードでも）例外を発生させません。セッターは何もしないので、無視されます。
-```
-var isFullscreenAvailable = document.fullscreenEnabled;
-```
-
-### 値
+## 値
-{{domxref("Boolean")}} 値であり、文書や要素が {{domxref("Element.requestFullscreen()")}} を呼び出すことで全画面モードに移行できるのであれば `true` です。全画面モードが利用できないのであれば、値は `false` になります。
+論理値であり、文書や要素が {{domxref("Element.requestFullscreen()")}} を呼び出すことで全画面モードに移行できるのであれば `true` です。全画面モードが利用できないのであれば、値は `false` になります。
## 例
この例では、 {{htmlElement("video")}} 要素に全画面モードへの移行を試みる前に `fullscreenEnabled` の値をチェックし、利用できない場合には移行を試みないようにします。
```js
-function requestFullScreen() {
+function requestFullscreen() {
if (document.fullscreenEnabled) {
- videoElement.requestFullScreen();
+ videoElement.requestFullscreen();
} else {
- console.log("現在ブラウザーは全画面モードを使用することができません");
+ console.log("このブラウザーは全画面モードを使用することができません");
}
}
```
@@ -43,8 +42,8 @@ function requestFullScreen() {
## 関連情報
-- [Fullscreen API](/ja/docs/Web/API/Fullscreen_API)
-- [Fullscreen API ガイド](/ja/docs/Web/API/Fullscreen_API/Guide)
+- [全画面 API](/ja/docs/Web/API/Fullscreen_API)
+- [全画面 API ガイド](/ja/docs/Web/API/Fullscreen_API/Guide)
- {{domxref("Element.requestFullscreen()")}}
- {{domxref("Document.exitFullscreen()")}}
- {{domxref("Document.fullscreenElement")}}
diff --git a/files/ja/web/api/document/getanimations/index.md b/files/ja/web/api/document/getanimations/index.md
index ee6e01dd4f51d7..8a734d2fab6eb9 100644
--- a/files/ja/web/api/document/getanimations/index.md
+++ b/files/ja/web/api/document/getanimations/index.md
@@ -1,16 +1,19 @@
---
-title: Document.getAnimations()
+title: "Document: getAnimations() メソッド"
+short-title: getAnimations()
slug: Web/API/Document/getAnimations
+l10n:
+ sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
---
-{{ SeeCompatTable() }}{{APIRef("Web Animations")}}
+{{APIRef("Web Animations")}}
-`getAnimations()` メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations), [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions), [ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API) が含まれます。
+`getAnimations()` メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations), [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions), [ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API) が含まれます。
## 構文
-```
-var allAnimations = Document.getAnimations();
+```js-nolint
+getAnimations()
```
### 引数
@@ -19,14 +22,14 @@ var allAnimations = Document.getAnimations();
### 返値
-{{domxref("Animation")}} オブジェクトの {{jsxref("Array")}} で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション 1 つを表します。
+{{domxref("Animation")}} オブジェクトの配列 ({{jsxref("Array")}}) で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション 1 つを表します。
## 例
次のコードスニペットは、ページ上のすべてのアニメーションの {{domxref("Animation.playbackRate")}} を半分にすることで速度をゆっくりにします。
```js
-document.getAnimations().forEach(function (animation) {
+document.getAnimations().forEach((animation) => {
animation.playbackRate *= 0.5;
});
```
@@ -42,7 +45,7 @@ document.getAnimations().forEach(function (animation) {
## 関連情報
- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)
-- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)
-- [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)
+- [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)
+- [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)
- {{domxref("Element.getAnimations()")}} - 単一の要素 ({{domxref("Element")}}) とその子孫にあるアニメーションのみを読み取る
- {{domxref("Animation")}}
diff --git a/files/ja/web/api/document/getelementbyid/index.md b/files/ja/web/api/document/getelementbyid/index.md
index 4bfc11a1387cb0..19eaa974b7dcf8 100644
--- a/files/ja/web/api/document/getelementbyid/index.md
+++ b/files/ja/web/api/document/getelementbyid/index.md
@@ -1,20 +1,27 @@
---
-title: Document.getElementById()
+title: "Document: getElementById() メソッド"
+short-title: getElementById()
slug: Web/API/Document/getElementById
+l10n:
+ sourceCommit: 8d89e9669f59f208a80c0bdbee48ba75d37a726e
---
{{ ApiRef("DOM") }}
-{{domxref("Document")}} の **`getElementById()`** メソッドは、 {{domxref("Element.id", "id")}} プロパティが指定された文字列に一致する要素を表す {{domxref("Element")}} オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。
+**`getElementById()`** は {{domxref("Document")}} インターフェイスのメソッドで、 {{domxref("Element.id", "id")}} プロパティが指定された文字列に一致する要素を表す {{domxref("Element")}} オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。
ID を持たない要素にアクセスする必要がある場合は、 {{domxref("Document.querySelector", "querySelector()")}} で何らかの{{Glossary("CSS selector", "セレクター")}}を使用して要素を検索することができます。
+> **メモ:** ID は文書内で固有である必要があります。単一の文書内で 2 つ以上の要素が同じ ID であった場合、このメソッドは最初に見つかった要素を返します。
+
## 構文
-```
-var element = document.getElementById(id);
+```js-nolint
+getElementById(id)
```
+> **メモ:** メソッド名における `"Id"` の部分は、関数のコードに対して正しくなければなりません。 `getElementByID()` は自然に見えるかもしれませんが、正しくなく動作しません。
+
### 引数
- `id`
@@ -29,14 +36,14 @@ var element = document.getElementById(id);
### HTML
```html
-
+
- getElementById example
+ getElementById の例
- Some text here
- blue
- red
+ いくらかのテキスト
+ 青
+ 赤
```
@@ -45,26 +52,24 @@ var element = document.getElementById(id);
```js
function changeColor(newColor) {
- var elem = document.getElementById("para");
+ const elem = document.getElementById("para");
elem.style.color = newColor;
}
```
### 結果
-{{ EmbedLiveSample('Example', 250, 100) }}
+{{ EmbedLiveSample('Examples', 250, 120) }}
## 使用上のメモ
-コードが機能するためには、メソッドの名前の中の `"Id"` は、大文字と小文字を正しく表記し*なければなりません*。 `getElementByID()` は自然に見えますが、妥当では*なく*動作しません。
-
-{{domxref("Document.querySelector()")}} や {{domxref("Document.querySelectorAll()")}} などの他の要素検索メソッドとは異なり、 `getElementById()` はグローバルの `document` オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用*できません*。 ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。
+{{domxref("Document.querySelector()")}} や {{domxref("Document.querySelectorAll()")}} などの他の要素検索メソッドとは異なり、`getElementById()` はグローバルの `document` オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用*できません*。ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。
### 例
```html
-
+
Document
@@ -77,26 +82,26 @@ function changeColor(newColor) {
hello word4
```
-もし指定された `id` を持つ要素がなければ、この関数は `null` を返します。なお、 `id` 引数は大文字小文字の区別があるため、 `document.getElementById("Main")` は `` 要素の代わりに `null` を返し、これは "M" と "m" がこのメソッドの目的では区別されるためです。
+もし指定された `id` を持つ要素がなければ、この関数は `null` を返します。なお、 `id` 引数は大文字小文字の区別があるため、 `document.getElementById("Main")` は `
` 要素ではなく `null` を返します。これは "M" と "m" がこのメソッドの目的では区別されるためです。
-**文書内にない要素** は `getElementById()` で検索されません。要素を作成し ID を割り当てたとき、 `getElementById()` でアクセスする前に {{domxref("Node.insertBefore()")}} またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。
+文書内にない要素は `getElementById()` で検索されません。要素を作成し ID を割り当てたとき、 `getElementById()` でアクセスする前に {{domxref("Node.insertBefore()")}} またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。
```js
-var element = document.createElement("div");
+const element = document.createElement("div");
element.id = "testqq";
-var el = document.getElementById("testqq"); // el は null になります
+const el = document.getElementById("testqq"); // el は null になります
```
-**HTML 以外の文書**の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 `id` 属性は [XHTML](/ja/docs/XHTML), [XUL](/ja/docs/XUL) などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 `null` を返すでしょう。
+HTML 以外の文書の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 `id` 属性は [XHTML](/ja/docs/Glossary/XHTML), XUL などの一般的な場合には ID 型として定義されています。属性が ID 類であるかどうかが分からない実装では、 `null` を返すでしょう。
## 仕様書
@@ -109,5 +114,5 @@ var el = document.getElementById("testqq"); // el は null になります
## 関連情報
- {{domxref("Document")}}: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。
-- {{domxref("Document.querySelector()")}}: `'div.myclass'` のようなセレクターを通したクエリのためのもの。
-- [xml:id](/ja/docs/xml/xml:id) - `getElementById()` による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ
+- {{domxref("Document.querySelector()")}}: `'div.myclass'` のようなセレクターを通したクエリーのためのもの。
+- {{domxref("Document.evaluate()")}} `xml:id` によって {{glossary("XML")}} 文書内を選択するユーティリティーメソッド
diff --git a/files/ja/web/api/document/getelementsbyclassname/index.md b/files/ja/web/api/document/getelementsbyclassname/index.md
index bae1af8f639596..6e4060eabf7d8d 100644
--- a/files/ja/web/api/document/getelementsbyclassname/index.md
+++ b/files/ja/web/api/document/getelementsbyclassname/index.md
@@ -1,22 +1,33 @@
---
-title: Document.getElementsByClassName()
+title: "Document: getElementsByClassName() メソッド"
+short-title: getElementsByClassName()
slug: Web/API/Document/getElementsByClassName
+l10n:
+ sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d
---
{{APIRef("DOM")}}
-{{domxref("Document")}} インターフェイスの **`getElementsByClassName`** メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。 {{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。
+**`getElementsByClassName`** は {{domxref("Document")}} インターフェイスのメソッドで、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。
+
+{{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。
+
+> **警告:** これは生きた {{domxref("HTMLCollection")}} です。DOM の変更は、その都度配列に反映されます。この配列で選択された要素がセレクターに該当しなくなった場合は、 自動的に除去されます。反復処理する際には、このことに注意しましょう。
## 構文
+```js-nolint
+getElementsByClassName(names)
```
-var elements = document.getElementsByClassName(names); // または
-var elements = rootElement.getElementsByClassName(names);
-```
-- _elements_ は、見つかった要素の生きた {{domxref("HTMLCollection")}} です。
-- _names_ は文字列で、一致させるクラス名を表します。複数のクラス名はホワイトスペースで区切ります。
-- {{domxref("Element.getElementsByClassName", "getElementsByClassName")}} は、 {{domxref("document")}} だけでなく、任意の要素に対して呼び出すことができます。呼び出した要素が検索のルートとして使われます。
+### 引数
+
+- `names`
+ - : 照合するクラス名を表す文字列です。複数のクラス名はホワイトスペースで区切ります。
+
+### 返値
+
+見つかった要素の生きた {{domxref("HTMLCollection")}} です。
## 例
@@ -44,15 +55,13 @@ document.getElementById("main").getElementsByClassName("test");
document.getElementsByClassName("test")[0];
```
-メソッドの _this_ 値として {{domxref("HTMLCollection")}} を渡すことで、 Array プロトタイプのメソッドを `HTMLCollection` で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。
+メソッドの _this_ 値として {{domxref("HTMLCollection")}} を渡すことで、Array.prototype のメソッドを `HTMLCollection` で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。
```js
-var testElements = document.getElementsByClassName("test");
-var testDivs = Array.prototype.filter.call(
+const testElements = document.getElementsByClassName("test");
+const testDivs = Array.prototype.filter.call(
testElements,
- function (testElement) {
- return testElement.nodeName === "DIV";
- },
+ (testElement) => testElement.nodeName === "DIV",
);
```
@@ -60,26 +69,26 @@ var testDivs = Array.prototype.filter.call(
これは最もよく使われる操作のメソッドです。
-```
-
-
+```html
+
+
-
hello world 1
-
hello world 2
-
hello world 3
-
hello world 4
+
hello world 1
+
hello world 2
+
hello world 3
+
hello world 4
-
+
```
@@ -101,25 +110,17 @@ var testDivs = Array.prototype.filter.call(
```js
// getElementsByClassName は指定された両方のクラスを持つ要素のみを選択する
-var allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
-var result = "document.getElementsByClassName('orange juice')";
-for (
- var i = 0, len = allOrangeJuiceByClass.length | 0;
- i < len;
- i = (i + 1) | 0
-) {
- result += "\n " + allOrangeJuiceByClass[i].textContent;
+const allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
+let result = "document.getElementsByClassName('orange juice')";
+for (let i = 0; i < allOrangeJuiceByClass.length; i++) {
+ result += `\n ${allOrangeJuiceByClass[i].textContent}`;
}
-// querySelector は完全一致で選択する
-var allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
+// querySelector は完全一致するもののみ選択する
+const allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
result += "\n\ndocument.querySelectorAll('.orange.juice')";
-for (
- var i = 0, len = allOrangeJuiceQuery.length | 0;
- i < len;
- i = (i + 1) | 0
-) {
- result += "\n " + allOrangeJuiceQuery[i].textContent;
+for (let i = 0; i < allOrangeJuiceQuery.length; i++) {
+ result += `\n ${allOrangeJuiceQuery[i].textContent}`;
}
document.getElementById("resultArea").value = result;
diff --git a/files/ja/web/api/document/getelementsbyname/index.md b/files/ja/web/api/document/getelementsbyname/index.md
index 3a293778993531..b63b5ba9dc4f4c 100644
--- a/files/ja/web/api/document/getelementsbyname/index.md
+++ b/files/ja/web/api/document/getelementsbyname/index.md
@@ -1,50 +1,56 @@
---
-title: Document.getElementsByName()
+title: "Document: getElementsByName() メソッド"
+short-title: getElementsByName()
slug: Web/API/Document/getElementsByName
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("DOM")}}
-{{domxref("Document")}} オブジェクトの **`getElementsByName()`** メソッドは、文書内で指定した {{domxref("element.name","name")}} を持つ要素の {{domxref("NodeList")}} コレクションを返します。
+**`getElementsByName()`** は {{domxref("Document")}} オブジェクトのメソッドで、文書内で指定した `name` を持つ要素の {{domxref("NodeList")}} コレクションを返します。
## 構文
+```js-nolint
+getElementsByName(name)
```
-var elements = document.getElementsByName(name);
-```
-- _elements_ は、生きた {{domxref("NodeList")}} コレクション、つまり文書内で同じ `name` を持った新しい要素が追加されたり削除されたりすると自動的に更新されるものです。
-- `name` は、要素の `name` 属性の値です。
+### 引数
+
+- `name`
+ - : 探している要素の `name` 属性の値です。
+
+### 返値
+
+生きた {{domxref("NodeList")}} コレクション、つまり文書内で同じ `name` を持った新しい要素が追加されたり削除されたりすると自動的に更新されるものです。
## 例
```html
-
-
document.getElementsByName の使用例
-
-
-
-
-
+
+
+
document.getElementsByName の使用例
+
+
+
+
+
```
+```js
+const up_names = document.getElementsByName("up");
+console.log(up_names[0].tagName); // "INPUT" と表示
+```
+
## メモ
-{{domxref("element.name","name")}} 属性は、(X)HTML 文書にのみ適用可能です。
+`name` 属性は、(X)HTML 文書にのみ適用可能です。
返却された {{domxref("NodeList")}} コレクションには、 {{htmlelement("meta")}} や {{htmlelement("object")}} など、それに `name` 属性にまったく対応していない要素も含め、指定された `name` を持つ*すべての*要素が含まれます。
-> **警告:** **getElementsByName** メソッドは、 IE10 以前では動作が異なります。この場合、 `getElementsByName()` は指定された [`id` 属性](/ja/docs/Web/HTML/Global_attributes/id)を持つ要素も返します。 `name` および `id` で同じ文字列を使用しないように注意してください。
-
-> **警告:** **getElementsByName** メソッドは IE では動作が異なります。この場合、 `getElementsByName()` は `name` 属性を許容しない要素 (`
` など) を返しません。
-
-> **警告:** IE および Edge では、 {{domxref("NodeList")}} ではなく {{domxref("HTMLCollection")}} を返します。
-
## 仕様書
{{Specifications}}
@@ -57,4 +63,4 @@ var elements = document.getElementsByName(name);
- {{domxref("document.getElementById()")}} : 固有の `id` を持つ要素への参照を返す
- {{domxref("document.getElementsByTagName()")}} : 同じ[タグ名](/ja/docs/Web/API/Element/tagName)の要素への参照を返す
-- {{domxref("document.querySelector()")}} : `'div.myclass'` のような CSS セレクターによって要素への参照をかえす
+- {{domxref("document.querySelector()")}}: `'div.myclass'` のような CSS セレクターによって要素への参照を返す
diff --git a/files/ja/web/api/document/getelementsbytagname/index.md b/files/ja/web/api/document/getelementsbytagname/index.md
index c96b592a5b8eac..b6986c67a1c68b 100644
--- a/files/ja/web/api/document/getelementsbytagname/index.md
+++ b/files/ja/web/api/document/getelementsbytagname/index.md
@@ -1,81 +1,95 @@
---
-title: Document.getElementsByTagName()
+title: "Document: getElementsByTagName() メソッド"
+short-title: getElementsByTagName()
slug: Web/API/Document/getElementsByTagName
+l10n:
+ sourceCommit: 88241bf466f1025d3c2f4ce2752586dd85d1ae13
---
{{APIRef("DOM")}}
-**`getElementsByTagName`** は {{domxref("Document")}} インターフェイスのメソッドで、指定されたタグ名を持つ要素の {{domxref("HTMLCollection")}} を返します。ルートノードを含めた文書全体が検索されます。返された `HTMLCollection` は生きたものであり、つまり `document.getElementsByTagName()` を再度呼び出さなくても DOM ツリーと同期を取り続けるよう、自動的に自分自身を更新します。.
+**`getElementsByTagName`** は {{domxref("Document")}} インターフェイスのメソッドで、指定されたタグ名を持つ要素の {{domxref("HTMLCollection")}} を返します。
+
+ルートノードを含めた文書全体が検索されます。返された `HTMLCollection` は生きたものであり、つまり `document.getElementsByTagName()` を再度呼び出さなくても DOM ツリーと同期を取り続けるよう、自動的に自分自身を更新します。
## 構文
+```js-nolint
+getElementsByTagName(name)
```
-var elements = document.getElementsByTagName(name);
-```
-- _elements_ は生きた {{domxref("HTMLCollection")}} であり、見つかった要素がツリーに出現する順に並んでいます (ただし、下記のメモを見てください)。
-- _name_ は文字列で、要素の名前を表します。特殊な文字列 "\*" は全ての要素を表します。
+### 引数
+
+- `name`
+ - : 要素の名前を表す文字列。特別な文字列 `*` はすべての要素を表します。
+
+### 返値
-> **メモ:** [最新の W3C 仕様書](https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html) では `elements` は `HTMLCollection` です。しかし、 WebKit ブラウザーではこのメソッドは {{domxref("NodeList")}} を返します。詳しくは [Firefox バグ 14869](https://bugzil.la/14869) を見てください。
+生きた {{domxref("HTMLCollection")}} であり、見つかった要素がツリーに出現する順に並んでいます。
+
+> **メモ:** [最新の W3C 仕様書](https://dom.spec.whatwg.org/#interface-document) では返値は `HTMLCollection` です。しかし、 WebKit ブラウザーではこのメソッドは {{domxref("NodeList")}} を返します。詳しくは [Firefox バグ 14869](https://bugzil.la/14869) を見てください。
## 例
-以下の例では、 `getElementsByTagName()` は特定の親要素から開始し、その親要素から DOM を上から下へ再帰的に検索し、タグが `name` パラメータと一致する子要素を探します。これは `document.getElementsByTagName()` と、機能的に同等な {{domxref("Element.getElementsByTagName()")}} は、 DOM ツリー内の特定の要素から検索を始めることを示します。
+以下の例では、 `getElementsByTagName()` は特定の親要素から開始し、その親要素から DOM を上から下へ再帰的に検索し、タグが `name` 引数と一致する子要素を探します。これは `document.getElementsByTagName()`、および機能的に同等な {{domxref("Element.getElementsByTagName()")}} は、 DOM ツリー内の特定の要素から検索を始めることを示します。
ボタンをクリックすると `getElementsByTagName()` を使用して、特定の親 (文書自体または 2 つの {{HTMLElement("div")}} 要素の何れかに囲まれたもの) の子孫の段落要素を数えます。
-```html
-
-
+```html-nolint
+
+
getElementsByTagName example
+ getElementsByTagName の例
- Some outer text
- Some outer text
+ 外部のテキスト
+ 外部のテキスト
-
Some div1 text
-
Some div1 text
-
Some div1 text
+
div1 のテキスト
+
div1 のテキスト
+
div1 のテキスト
-
Some div2 text
-
Some div2 text
+
div2 のテキスト
+
div2 のテキスト
Some outer text
- Some outer text
+ 外部のテキスト
+ 外部のテキスト
- 文書内のすべての p 要素を表示
+ 文書内のすべての p 要素を表示
+
+
- div1 要素内のすべての p 要素を表示
div2 要素内のすべての p 要素を表示
@@ -84,9 +98,10 @@ var elements = document.getElementsByTagName(name);
```
-## 注
+## メモ
-HTML 文書上で呼び出された場合、 `getElementsByTagName()` は処理前に引数を小文字に変換します。これは HTML 文書内のサブツリーにあるキャメルケースの SVG 要素に一致させようとする場合には望ましくありません。この場合は {{Domxref("document.getElementsByTagNameNS()")}} が便利です。 [Firefox バグ 499656](https://bugzil.la/499656) を参照してください。
+HTML 文書上で呼び出された場合、 `getElementsByTagName()` は処理前に引数を小文字に変換します。これは HTML 文書内のサブツリーにある{{Glossary("camel_case", "キャメルケース")}}の SVG 要素に一致させようとする場合には望ましくありません。
+この場合は {{Domxref("document.getElementsByTagNameNS()")}} が便利です。 [Firefox バグ 499656](https://bugzil.la/499656) を参照してください。
`document.getElementsByTagName()` は、検索が文書全体を含むという点以外は {{domxref("Element.getElementsByTagName()")}} と類似しています。
diff --git a/files/ja/web/api/document/getelementsbytagnamens/index.md b/files/ja/web/api/document/getelementsbytagnamens/index.md
index fe01c56ae69866..9bf488e83d02a3 100644
--- a/files/ja/web/api/document/getelementsbytagnamens/index.md
+++ b/files/ja/web/api/document/getelementsbytagnamens/index.md
@@ -1,6 +1,9 @@
---
-title: Document.getElementsByTagNameNS()
+title: "Document: getElementsByTagNameNS() メソッド"
+short-title: getElementsByTagNameNS()
slug: Web/API/Document/getElementsByTagNameNS
+l10n:
+ sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d
---
{{APIRef("DOM")}}
@@ -9,17 +12,27 @@ slug: Web/API/Document/getElementsByTagNameNS
## 構文
+```js-nolint
+getElementsByTagNameNS(namespace, name)
```
-elements = document.getElementsByTagNameNS(namespace, name)
-```
-- _elements_ は見つかった要素の生きた {{DOMxRef("NodeList")}} (但し下記のメモを参照) で、ツリーに現れる順です。
-- _namespace_ は検索する要素の名前空間 URI です ({{domxref("Node.namespaceURI", "element.namespaceURI")}} を参照)。
-- _name_ は検索する要素の局所名、またはすべての要素に一致する特殊な値 `*` です ({{domxref("Node.localName", "element.localName")}} を参照)。
+### 引数
+
+- `namespace`
+ - : 検索する要素の名前空間 URI です（{{domxref("Element.namespaceURI", "element.namespaceURI")}} を参照）。
+- `name`
+ - : 検索する要素のローカル名、またはすべての要素に一致する特殊な値 `*` です（{{domxref("Element.localName", "element.localName")}} を参照）。
+
+### 返値
+
+見つかった要素の生きた {{DOMxRef("NodeList")}}（但し下記のメモを参照）で、ツリーに現れる順です。
-> **メモ:** W3C の仕様書では `elements` は `NodeList` であるとされていますが、 Gecko および Internet Explorer ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。 Opera は `NodeList` を返しますが、 `namedItem` メソッドを実装しているので、 `HTMLCollection` と同様になります。2012 年 1 月時点で、 WebKit ブラウザーのみが純粋な `NodeList` の値を返します。詳しくは [bug 14869](https://bugzilla.mozilla.org/show_bug.cgi?id=14869) を参照してください。
+> **メモ:** W3C の仕様書では返値は `NodeList` であるとされていますが、Firefox ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。
+> Opera は `NodeList` を返しますが、 `namedItem` メソッドを実装しているので、 `HTMLCollection` と同様になります。2012 年 1 月時点で、 WebKit ブラウザーのみが純粋な `NodeList` の値を返します。
+> 詳しくは [bug 14869](https://bugzil.la/14869) を参照してください。
-> **メモ:** 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。詳しくは [Firefox 3.6 の開発者リリースノート](/ja/docs/Mozilla/Firefox/Releases/3.6#DOM)および {{domxref("Element.getElementsByTagNameNS")}} のブラウザーの互換性のメモをご覧ください。
+> **メモ:** 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。
+> 詳しくは [Firefox 3.6 の開発者リリースノート](/ja/docs/Mozilla/Firefox/Releases/3.6#dom)および {{domxref("Element.getElementsByTagNameNS")}} のブラウザーの互換性のメモをご覧ください。
## 例
@@ -29,110 +42,78 @@ elements = document.getElementsByTagNameNS(namespace, name)
以下の例を使用するには、新しいファイルにそのままコピー＆ペーストして、 .xhtml の拡張子で保存してください。
-```html
-
+```html-nolint
+
- getElementsByTagNameNS example
+ getElementsByTagNameNS の例
-
- Some outer text
- Some outer text
+ 外側のテキスト
+ 外側のテキスト
-
Some div1 text
-
Some div1 text
-
Some div1 text
+
div1 のテキスト
+
div1 のテキスト
+
div1 のテキスト
-
Some div2 text
-
Some div2 text
+
div2 のテキスト
+
div2 のテキスト
Some outer text
- Some outer text
+ 外側のテキスト
+ 外側のテキスト
- show all p elements in document
+ 文書内のすべての p 要素
+
+
- show all p elements in div1 element
+
- show all p elements in div2 element
+ div2 要素内のすべての p 要素
```
-## 対応していないブラウザーでの代替方法
-
-要求されたブラウザーが XPath に対応していない場合、他のアプローチ (DOM のすべての子要素をたどって、すべての @xmlns インスタンスで識別する、など) で要求された局所名および名前空間を持つすべてのタグを検索する必要がありますが、 XPath の方がはるかに高速です。 (Explorer に対応するためには、[このラッパークラス](http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js)のように、以下の関数で XPath の代わりに XPath のラッパーを呼び出すことができます (Explorer は異なる API を持つ XPath に対応しています)。
-
-```js
-function getElementsByTagNameNSWrapper(ns, elName, doc, context) {
- if (!doc) {
- doc = document;
- }
- if (!context) {
- context = doc;
- }
-
- var result = doc.evaluate(
- '//*[local-name()="' + elName + '" and namespace-uri() = "' + ns + '"]',
- context,
- null,
- XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
- null,
- );
-
- var a = [];
- for (var i = 0; i < result.snapshotLength; i++) {
- a[i] = result.snapshotItem(i);
- }
- return a;
-}
-```
-
## 仕様書
{{Specifications}}
diff --git a/files/ja/web/api/document/getselection/index.md b/files/ja/web/api/document/getselection/index.md
index 38100091860724..6671bf9caeec42 100644
--- a/files/ja/web/api/document/getselection/index.md
+++ b/files/ja/web/api/document/getselection/index.md
@@ -1,16 +1,19 @@
---
-title: Document.getSelection()
+title: "Document: getSelection() メソッド"
+short-title: getSelection()
slug: Web/API/Document/getSelection
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{APIRef("DOM")}}
-**`getSelection()`** は {{DOMxRef("Document")}} インターフェイスのプロパティで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す {{DOMxRef("Selection")}} オブジェクトを返します。
+**`getSelection()`** は {{DOMxRef("Document")}} インターフェイスのメソッドで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す {{DOMxRef("Selection")}} オブジェクトを返します。
## 構文
-```js
-getSelection();
+```js-nolint
+getSelection()
```
### 引数
diff --git a/files/ja/web/api/document/hasfocus/index.md b/files/ja/web/api/document/hasfocus/index.md
index af39e91da9018c..dd9c9ccbf05ef9 100644
--- a/files/ja/web/api/document/hasfocus/index.md
+++ b/files/ja/web/api/document/hasfocus/index.md
@@ -1,8 +1,9 @@
---
title: "Document: hasFocus() メソッド"
+short-title: hasFocus()
slug: Web/API/Document/hasFocus
l10n:
- sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef}}
diff --git a/files/ja/web/api/document/hasstorageaccess/index.md b/files/ja/web/api/document/hasstorageaccess/index.md
index 27d648bce895a3..5a16798d1bed65 100644
--- a/files/ja/web/api/document/hasstorageaccess/index.md
+++ b/files/ja/web/api/document/hasstorageaccess/index.md
@@ -1,18 +1,23 @@
---
-title: Document.hasStorageAccess()
+title: "Document: hasStorageAccess() メソッド"
+short-title: hasStorageAccess()
slug: Web/API/Document/hasStorageAccess
+l10n:
+ sourceCommit: b97c61b40d8b71532d54fe5af1eab4ca014605ec
---
-{{APIRef}}{{seecompattable}}
+{{APIRef("Storage Access API")}}
-{{domxref("Document")}} インターフェイスの **`hasStorageAccess()`** メソッドは、文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} を返します。
+**`hasStorageAccess()`** は {{domxref("Document")}} インターフェイスのメソッドで、この文書が[サードパーティ](/ja/docs/Web/Privacy/Third-party_cookies)の[分離された](/ja/docs/Web/API/Storage_Access_API#unpartitioned_versus_partitioned_cookies)クッキーへのアクセス権を持っているかどうかを示す論理値で解決する {{jsxref("Promise")}} を返します。
-詳しくは [Storage Access API](/ja/docs/Web/API/Storage_Access_API) を参照してください。
+詳しくは [ストレージアクセス API](/ja/docs/Web/API/Storage_Access_API) を参照してください。
+
+> **メモ:** このメソッドは {{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} の別名です。{{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} のためにこのメソッドを削除する予定はありません。
## 構文
-```
-var promise = document.hasStorageAccess();
+```js-nolint
+hasStorageAccess()
```
### 引数
@@ -21,9 +26,19 @@ var promise = document.hasStorageAccess();
### 返値
-文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} です。
+文書がサードパーティ Cookie にアクセスできるかどうかを示す論理値で解決する {{jsxref("Promise")}} です。サードパーティ Cookie にアクセスできる場合は `true`、できない場合は `false` です。
+
+このメソッドが返す結果は、状況によっては不正確なことがあります。
+
+1. ユーザーがサードパーティクッキーをブロックするブラウザー設定をアクティブにしている場合があります。この場合、サードパーティのクッキーにはまだアクセスできないにもかかわらず、`true` が返されるかもしれません。このような状況を処理するには、クッキーの値が回復不可能になるようなエラーを適切に処理しなければなりません。例えば、個人設定へのアクセスがブロックされていることをユーザーに知らせ、それを使用するには再度サインインするよう促してください。
+2. ブラウザーは既定で、サードパーティクッキーへのアクセスをブロックしない場合があります。この場合、サードパーティクッキーがアクセス可能であっても `false` が返されるかもしれませんし、ストレージへのアクセスは（つまり {{domxref("Document.requestStorageAccess()")}} を通して）リクエストされる必要はないでしょう。この課題を回避するには、{{domxref("Document.cookie")}} に問い合わせてクッキーがアクセス可能かどうかを探し、アクセス可能でない場合は {{domxref("Document.requestStorageAccess()")}} を呼び出します。
-Promise が解決され、関数が最初に呼び出されたときにユーザージェスチャーイベントを処理していた場合、解決ハンドラーはユーザージェスチャーが処理されているかのように実行されるため、ユーザーによるアクティベーションを必要とする API を呼び出すことができます。
+> **メモ:** プロミスが解決され、関数が元々呼び出されたときにユーザージェスチャーイベントが処理されていた場合、解決ハンドラーはユーザーによるジェスチャーが処理されているかのように実行サレルるので、ユーザーによるアクティブ化が要求される API を呼び出すことができます。
+
+### 例外
+
+- `InvalidStateError` {{domxref("DOMException")}}
+ - : 現在の {{domxref("Document")}} がまだアクティブでない場合に発生します。
## 例
@@ -31,16 +46,20 @@ Promise が解決され、関数が最初に呼び出されたときにユーザ
document.hasStorageAccess().then((hasAccess) => {
if (hasAccess) {
// ストレージへのアクセスはすでに許可されています。
+ console.log("クッキーへのアクセスが許可されました");
} else {
// ストレージへのアクセスはまだ許可されていません。
// requestStorageAccess() を呼び出す必要があります。
+ console.log("クッキーへのアクセスが拒否されました");
}
});
```
+> **メモ:** より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
+
## 仕様書
-この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ投稿の [Introducing Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/)、および [WHATWG HTML issue 3338 — Proposal: Storage Access API](https://github.com/whatwg/html/issues/3338) で見ることができます。
+{{Specifications}}
## ブラウザーの互換性
@@ -48,4 +67,6 @@ document.hasStorageAccess().then((hasAccess) => {
## 関連情報
-[Storage Access API](/ja/docs/Web/API/Storage_Access_API)
+- {{domxref("Document.hasUnpartitionedCookieAccess()")}}, {{domxref("Document.requestStorageAccess()")}}, {{domxref("Document.requestStorageAccessFor()")}}
+- [ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)
+- [Introducing Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/) (WebKit blog)
diff --git a/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md b/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md
new file mode 100644
index 00000000000000..88348fcffd7b78
--- /dev/null
+++ b/files/ja/web/api/document/hasunpartitionedcookieaccess/index.md
@@ -0,0 +1,67 @@
+---
+title: "Document: hasUnpartitionedCookieAccess() メソッド"
+short-title: hasUnpartitionedCookieAccess()
+slug: Web/API/Document/hasUnpartitionedCookieAccess
+l10n:
+ sourceCommit: b97c61b40d8b71532d54fe5af1eab4ca014605ec
+---
+
+{{APIRef("Storage Access API")}}
+
+**`hasUnpartitionedCookieAccess()`** は {{domxref("Document")}} インターフェイスのメソッドで、論理値を返すプロミス ({{jsxref("Promise")}}) を返します。これはこの文書が[サードパーティ](/ja/docs/Web/HTTP/Cookies#third-party_cookies)の[分離されていない](/ja/docs/Web/API/Storage_Access_API#unpartitioned_versus_partitioned_cookies)クッキーへのアクセス権があるかどうかを示します。
+
+このメソッドは[ストレージアクセス API](/ja/docs/Web/API/Storage_Access_API) の一部です。
+
+このメソッドは {{DOMxRef("Document.hasStorageAccess()")}} の新しい名前です。
+
+## 構文
+
+```js-nolint
+hasUnpartitionedCookieAccess()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+文書がサードパーティクッキーにアクセスできるかどうかを示す論理値で解決する {{jsxref("Promise")}} です。サードパーティクッキーにアクセスできる場合は `true`、できない場合は `false` です。
+
+詳しくは {{DOMxRef("Document.hasStorageAccess()")}} を参照してください。
+
+### 例外
+
+- `InvalidStateError` {{domxref("DOMException")}}
+ - : 現在の {{domxref("Document")}} がまだアクティブでない場合に発生します。
+
+## 例
+
+```js
+document.hasUnpartitionedCookieAccess().then((hasAccess) => {
+ if (hasAccess) {
+ // ストレージへのアクセスはすでに許可されています。
+ console.log("クッキーへのアクセスが許可されました");
+ } else {
+ // ストレージへのアクセスはまだ許可されていません。
+ // requestStorageAccess() を呼び出す必要があります。
+ console.log("クッキーへのアクセスが拒否されました");
+ }
+});
+```
+
+> **メモ:** より完全な例は、[ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Document.hasStorageAccess()")}}, {{domxref("Document.requestStorageAccess()")}}, {{domxref("Document.requestStorageAccessFor()")}}
+- [ストレージアクセス API の使用](/ja/docs/Web/API/Storage_Access_API/Using)
+- [Introducing Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/) (WebKit blog)
diff --git a/files/ja/web/api/document/head/index.md b/files/ja/web/api/document/head/index.md
index fa90e0bb60c83d..3048ad94955c37 100644
--- a/files/ja/web/api/document/head/index.md
+++ b/files/ja/web/api/document/head/index.md
@@ -1,19 +1,16 @@
---
-title: Document.head
+title: "Document: head プロパティ"
+short-title: head
slug: Web/API/Document/head
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("DOM")}}
-{{domxref("Document")}} インターフェイスの **`head`** は読み取り専用のプロパティで、現在の文書の {{HTMLElement("head")}} 要素を返します。
+**`head`** は {{domxref("Document")}} インターフェイスの読み取り専用のプロパティで、この文書の {{HTMLElement("head")}} 要素を返します。
-## 構文
-
-```
-var objRef = document.head;
-```
-
-### 値
+## 値
{{domxref("HTMLHeadElement")}} です。
@@ -22,11 +19,11 @@ var objRef = document.head;
```html
- Example: using document.head
+ 例: document.head の使用
-
-
+```html
+
+
+
+ Hello World!
+
+
+
+
```
diff --git a/files/ja/web/api/document/url/index.md b/files/ja/web/api/document/url/index.md
index f6f071c8dbaada..a73fc810bb9be0 100644
--- a/files/ja/web/api/document/url/index.md
+++ b/files/ja/web/api/document/url/index.md
@@ -1,17 +1,18 @@
---
-title: Document.URL
+title: "Document: URL プロパティ"
+short-title: URL
slug: Web/API/Document/URL
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{APIRef("DOM")}}
-{{domxref("Document")}} インターフェイスの **`URL`** プロパティは読取専用で、文書の位置を文字列で返します。
+**`URL`** は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、文書の位置を文字列で返します。
-## 構文
+## 値
-```js
-const url = document.URL;
-```
+この文書の URL が入った文字列です。
## 例
@@ -26,13 +27,13 @@ document.getElementById("url").textContent = document.URL;
```html
URL:URL goes here
+ URL がここに表示されます
```
### 結果
-{{EmbedLiveSample("Example", "100%", 100)}}
+{{EmbedLiveSample("Examples", "100%", 100)}}
## 仕様書
diff --git a/files/ja/web/api/document/visibilitychange_event/index.md b/files/ja/web/api/document/visibilitychange_event/index.md
index 2df9a205e0af52..e29cef45b2598f 100644
--- a/files/ja/web/api/document/visibilitychange_event/index.md
+++ b/files/ja/web/api/document/visibilitychange_event/index.md
@@ -1,8 +1,9 @@
---
title: "Document: visibilitychange イベント"
+short-title: visibilitychange
slug: Web/API/Document/visibilitychange_event
l10n:
- sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce
+ sourceCommit: 14a752ccdcaa736e8e368156c48bca61a3c1e5ed
---
{{APIRef}}
@@ -37,14 +38,19 @@ onvisibilitychange = (event) => {};
### 非表示に遷移した際に音楽を一時停止
-この例では、文書が表示状態になった時に音楽を再生し、文書が非表示になった時に音楽を停止します。
+この例は、ページが非表示になると音声再生を一時停止し、ページが再び表示されると再生を再開します。
+完全な例については、[Page Visibility API: Pausing audio on page hide](/ja/docs/Web/API/Page_Visibility_API#pausing_audio_on_page_hide) ドキュメントを参照してください。
```js
document.addEventListener("visibilitychange", () => {
- if (document.visibilityState === "visible") {
- backgroundMusic.play();
+ if (document.hidden) {
+ playingOnHide = !audio.paused;
+ audio.pause();
} else {
- backgroundMusic.pause();
+ // 音声が "playing on hide" であった場合は復旧する
+ if (playingOnHide) {
+ audio.play();
+ }
}
});
```
@@ -73,5 +79,6 @@ document.onvisibilitychange = () => {
- [ページ可視性 API](/ja/docs/Web/API/Page_Visibility_API)
- {{domxref("Document.visibilityState")}}
+- {{domxref("Document.hidden")}}
- [Don't lose user and app state, use Page Visibility](https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/) は、なぜ `beforeunload`/`unload` ではなく、`visibilitychange` を使用しなければならないのか、その理由を詳しく説明しています。
- [Page Lifecycle API](https://developer.chrome.com/blog/page-lifecycle-api/) は、ウェブアプリケーションでページのライフサイクルの動作を処理する際の最善の手法を解説しています。
diff --git a/files/ja/web/api/document/visibilitystate/index.md b/files/ja/web/api/document/visibilitystate/index.md
index fd947d8db39239..935747334f8bcf 100644
--- a/files/ja/web/api/document/visibilitystate/index.md
+++ b/files/ja/web/api/document/visibilitystate/index.md
@@ -1,13 +1,20 @@
---
-title: Document.visibilityState
+title: "Document: visibilityState プロパティ"
+short-title: visibilityState
slug: Web/API/Document/visibilityState
l10n:
- sourceCommit: 4e233c16c6f0d347972c5c762f5b836318a46124
+ sourceCommit: 14a752ccdcaa736e8e368156c48bca61a3c1e5ed
---
{{ApiRef("DOM")}}
-**`Document.visibilityState`** は読み取り専用プロパティで、文書 ({{domxref('document')}}) の可視性、つまりこの要素がこれで見えるようになったのはどのコンテキストであるかを返します。文書がバックグラウンドにあるのか、非表示のタブにあるのか、プリレンダリングのためにのみ読み込まれるのかを知るのに有用です。
+**`Document.visibilityState`** は読み取り専用プロパティで、この文書の可視性を返します。文書がバックグラウンドにあるか、最小化されたウィンドウにあるか、あるいはユーザーから見えないかどうかを調べるために使用することができます。
+
+このプロパティを変更すると、{{domxref("Document/visibilitychange_event", "visibilitychange")}} イベントが {{domxref("Document")}} へ送られます。
+
+{{domxref("Document.hidden")}} プロパティは、ページが非表示かどうかを判断する別の方法を提供します。
+
+## 値
利用可能な値は次のとおりです。
@@ -16,16 +23,6 @@ l10n:
- `hidden`
- : ページのコンテンツはユーザーには表示されません。実際には、これは文書がバックグラウンドタブまたは最小化されたウィンドウの一部であるか、 OS の画面ロックがアクティブであることを意味します。
-このプロパティの値が変更されると、 {{domxref("Document/visibilitychange_event", "visibilitychange")}} イベントが {{domxref("Document")}} に送信されます。
-
-これの一般的な用途は、文書がプリレンダリングされている場合に一部のアセットのダウンロードを防止したり、文書がバックグラウンドにあるか最小化されている場合に一部のアクティビティを停止したりすることです。
-
-## 構文
-
-```js-nolint
-document.visibilityState
-```
-
## 例
```js
@@ -42,3 +39,8 @@ document.addEventListener("visibilitychange", () => {
## ブラウザーの互換性
{{Compat}}
+
+## 関連情報
+
+- {{domxref("Document.hidden")}}
+- [ページ可視性 API](/ja/docs/Web/API/Page_Visibility_API)
diff --git a/files/ja/web/api/document/vlinkcolor/index.md b/files/ja/web/api/document/vlinkcolor/index.md
index 61b02e1797bdb8..9069b5451ef49f 100644
--- a/files/ja/web/api/document/vlinkcolor/index.md
+++ b/files/ja/web/api/document/vlinkcolor/index.md
@@ -1,30 +1,29 @@
---
-title: Document.vlinkColor
+title: "Document: vlinkColor プロパティ"
+short-title: vlinkColor
slug: Web/API/Document/vlinkColor
+l10n:
+ sourceCommit: 157a449e2e8bf009fd316480c0d535d4a21527b0
---
-{{APIRef("DOM")}} {{ Deprecated_header() }}
+{{APIRef("DOM")}} {{Deprecated_Header}}
**`Document.vlinkColor`** プロパティは、文書内のユーザーが訪問済みのリンクの色を取得または設定します。
-## 構文
+## 値
-```
-color = document.vlinkColor
-document.vlinkColor = color
-```
-
-### 引数
-
-- `color` は、色を表す単語 (`red` など) または 16 進値 (`#ff0000` など) の文字列です。
+文字列で、色を表す単語 (`red` など) または 16 進値 (`#ff0000` など) です。
## メモ
- Mozilla Firefox ではこのプロパティの初期値は紫 (16 進で `#551a8b`) です。
+- `Document.vlinkColor` は [DOM Level 2 HTML では非推奨です](https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268)。
+- 推奨される代替方法は、 HTML の {{HtmlElement("a")}} 要素において CSS で {{Cssxref(":visited")}} 擬似クラスの色を設定または取得する方法です (例えば `a:visited {color:red;}`)。
+- 他の代替方法に `document.body.vLink` がありますが、これは [HTML 4.01 で非推奨](https://www.w3.org/TR/html401/struct/global.html#adef-vlink)となり、 CSS で代替されました。
+
+## 仕様書
-- `Document.vlinkColor` は [DOM Level 2 HTML では非推奨です](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268)。
-- 推奨される代替方法は、 HTML の {{HtmlElement("a")}} 要素において CSS で {{ Cssxref(":visited") }} 擬似クラスの色を設定または取得する方法です (例えば `a:visited {color:red;}`)。
-- 他の代替方法に `document.body.vLink` がありますが、これは [HTML 4.01 で非推奨](http://www.w3.org/TR/html401/struct/global.html#adef-vlink)となり、 CSS で代替されました。
+{{Specifications}}
## ブラウザーの互換性
diff --git a/files/ja/web/api/document/write/index.md b/files/ja/web/api/document/write/index.md
index ce6a909e4d0d7d..d2bce409a33d15 100644
--- a/files/ja/web/api/document/write/index.md
+++ b/files/ja/web/api/document/write/index.md
@@ -1,29 +1,43 @@
---
-title: Document.write()
+title: "Document: write() メソッド"
+short-title: write()
slug: Web/API/Document/write
+l10n:
+ sourceCommit: 1238ffad886924b20549d0cf3adca735cb0d074f
---
{{ApiRef("DOM")}}
+> **警告:** `document.write()` メソッドの使用は固く避けるべきです。
+>
+> [HTML 仕様書自体で次のように警告しています]()。
+>
+> > このメソッドの挙動はとても特異です。場合によっては、このメソッドは構文解析の実行中に [HTML パーサー](https://html.spec.whatwg.org/multipage/parsing.html#html-parser)の状態に影響を与え、結果として文書のソースに対応しない DOM を生成することがあります（例えば、書き込まれた文字列が "`< が呼び出されたかのように、最初に現在のページをクリアしてしまう場合もあります。さらに多くの場合、メソッドは単に無視されるか、例外が発生します。ユーザーエージェントは [このメソッドで挿入された `script` 要素の実行を回避することが明確に許可されています](https://html.spec.whatwg.org/multipage/parsing.html#document-written-scripts-intervention)。さらに悪いことに、このメソッドの正確な動作はネットワークの遅延に依存する場合があり、デバッグがとても難しい失敗につながる可能性があります。これらすべての理由から、このメソッドを使用することは固く推奨されません。
+> > したがって、`document.write()` を使用するのはやめましょう。そして可能であれば、使用している既存のコードを更新しましょう。
+
**`Document.write()`** メソッドは、テキストの文字列を {{domxref("document.open()")}} で開かれた文書ストリームに書き込みます。
-> **メモ:** `document.write()` は文書の**ストリーム**に書き込みを行うため、閉じられた (読み込み済みの) 文書で `document.write()` を呼び出すと、自動的に `document.open()` が呼び出され、[文書はクリアされます](/ja/docs/Web/API/document.open#Notes)。
+> **メモ:** `document.write()` は文書の**ストリーム**に書き込みを行うため、閉じられた (読み込み済みの) 文書で `document.write()` を呼び出すと、自動的に `document.open()` が呼び出され、[文書がクリアされます](/ja/docs/Web/API/Document/open#メモ)。
## 構文
-```js
-document.write(markup);
+```js-nolint
+write(markup)
```
### 引数
-- _markup_
+- `markup`
- : 文書に書き込まれるテキストを含む文字列です。
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
### 例
```html
-<html>
+<html lang="ja">
<head>
<title>書き込み例</title>
@@ -42,9 +56,9 @@ document.write(markup);
</html>
```
-{{EmbedLiveSample("Syntax")}}
+{{EmbedLiveSample("Examples")}}
-## 注
+## メモ
出力したテキストは文書構造モデルにおいて構文解析されます。上記の例では、 `h1` 要素は文書中の一つのノードになります。
@@ -54,17 +68,17 @@ document.write(markup);
```html
<script>
- document.write("<h1>Main title</h1>");
+ document.write("<h1>メインタイトル</h1>");
</script>
```
-> **メモ:** `document.write()` および {{domxref("document.writeln")}} は、 [XHTML 文書では動作しません](/ja/docs/Archive/Web/Writing_JavaScript_for_HTML) (エラーコンソールに "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が `application/xhtml+xml` の {{Glossary("MIME type", "MIME タイプ")}}で提供されたときに発生します。詳細は [W3C XHTML FAQ](http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite) で確認することができます。
+> **メモ:** `document.write()` および {{domxref("document.writeln")}} は、 XHTML 文書では動作しません（エラーコンソールに "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] エラーが表示されます）。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が `application/xhtml+xml` の {{Glossary("MIME type", "MIME タイプ")}}で提供されたときに発生します。詳細は [W3C XHTML FAQ](https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite) で確認することができます。
> **メモ:** `document.write` は [deferred](/ja/docs/Web/HTML/Element/script#attr-defer) または [asynchronous](/ja/docs/Web/HTML/Element/script#attr-async) のスクリプト内では無視され、エラーコンソールに "A call to `document.write()` from an asynchronously-loaded external script was ignored" などのメッセージが表示されます。
> **メモ:** Edge のみ、`document.write()` を {{HTMLElement("iframe")}} 内で複数回呼び出すと、 SCRIPT70: Permission denied エラーが発生します。
-> **メモ:** Chrome 55 からは、キャッシュされていない HTTP の場合、`document.write()` を通じて挿入された `<script>` 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、[document.write() に対する介入](https://developers.google.com/web/updates/2016/08/removing-document-write)をご覧ください。
+> **メモ:** Chrome 55 からは、キャッシュされていない HTTP の場合、`document.write()` を通じて挿入された `<script>` 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、[document.write() に対する介入](https://developer.chrome.com/blog/removing-document-write/)をご覧ください。
## 仕様書
diff --git a/files/ja/web/api/document/writeln/index.md b/files/ja/web/api/document/writeln/index.md
index f2434c584e9615..c777a36daa35b7 100644
--- a/files/ja/web/api/document/writeln/index.md
+++ b/files/ja/web/api/document/writeln/index.md
@@ -1,22 +1,36 @@
---
-title: Document.writeln()
+title: "Document: writeln() メソッド"
+short-title: writeln()
slug: Web/API/Document/writeln
+l10n:
+ sourceCommit: 1238ffad886924b20549d0cf3adca735cb0d074f
---
{{ ApiRef("DOM") }}
+> **警告:** `document.writeln()` メソッドの使用は固く避けるべきです。
+>
+> [HTML 仕様書自体で次のように警告しています](<https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#document.write()>)。
+>
+> > このメソッドの挙動はとても特異です。場合によっては、このメソッドは構文解析の実行中に [HTML パーサー](https://html.spec.whatwg.org/multipage/parsing.html#html-parser)の状態に影響を与え、結果として文書のソースに対応しない DOM を生成することがあります（例えば、書き込まれた文字列が "`<plaintext>`" や "`<!--`" であった場合など）。他にも、[`document.open()`](https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-document-open) が呼び出されたかのように、最初に現在のページをクリアしてしまう場合もあります。さらに多くの場合、メソッドは単に無視されるか、例外が発生します。ユーザーエージェントは [このメソッドで挿入された `script` 要素の実行を回避することが明確に許可されています](https://html.spec.whatwg.org/multipage/parsing.html#document-written-scripts-intervention)。さらに悪いことに、このメソッドの正確な動作はネットワークの遅延に依存する場合があり、デバッグがとても難しい失敗につながる可能性があります。これらすべての理由から、このメソッドを使用することは固く推奨されません。
+> > したがって、`document.writeln()` を使用するのはやめましょう。そして可能であれば、使用している既存のコードを更新しましょう。
+
テキストの文字列とその直後に続く改行文字を文書に書き込みます。
## 構文
-```
-document.writeln(line);
+```js-nolint
+writeln(line)
```
### 引数
- `line` はテキストの行を含む文字列です。
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
## 例
```
@@ -27,7 +41,7 @@ document.writeln("<p>パスワードを入力してください:</p>");
**document.writeln** は {{domxref("document.write")}} と同じですが、改行文字を追加します。
-> **メモ:** **document.writeln** は (**document.write** と同様に) XHTML 文書では動作しません (エラーコンソールに "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が `application/xhtml+xml` の MIME タイプで提供されたときに発生します。詳細は [W3C XHTML FAQ](http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite) で確認することができます。
+> **メモ:** **document.writeln** は (**document.write** と同様に) XHTML 文書では動作しません (エラーコンソールに "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が `application/xhtml+xml` の MIME タイプで提供されたときに発生します。詳細は [W3C XHTML FAQ](https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite) で確認することができます。
## 仕様書
diff --git a/files/ja/web/api/document/xmlencoding/index.md b/files/ja/web/api/document/xmlencoding/index.md
new file mode 100644
index 00000000000000..36db34c4e8bc72
--- /dev/null
+++ b/files/ja/web/api/document/xmlencoding/index.md
@@ -0,0 +1,29 @@
+---
+title: "Document: xmlEncoding プロパティ"
+short-title: xmlEncoding
+slug: Web/API/Document/xmlEncoding
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+---
+
+{{APIRef("DOM")}}{{deprecated_header}}
+
+XML 宣言によって決定されたエンコード方式を返します。未指定または不明の場合は `null` となります。
+
+> **警告:** この属性を使用しないでください。この属性は DOM Level 4 仕様から除去され、Firefox 10.0 では対応していません。
+
+以下の XML 宣言を想像してください。
+
+```xml
+<?xml version="1.0" encoding="UTF-16"?>
+```
+
+こうすると、結果は "UTF-16" になります。
+
+## 仕様書
+
+この機能はもうどの仕様にも属していません。標準化の予定もありません。
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/document/xmlversion/index.md b/files/ja/web/api/document/xmlversion/index.md
index 4afee94252f52d..29ad0031626e20 100644
--- a/files/ja/web/api/document/xmlversion/index.md
+++ b/files/ja/web/api/document/xmlversion/index.md
@@ -1,6 +1,9 @@
---
-title: Document.xmlVersion
+title: "Document: xmlVersion プロパティ"
+short-title: xmlVersion
slug: Web/API/Document/xmlVersion
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
{{APIRef("DOM")}}{{deprecated_header}}
@@ -10,7 +13,7 @@ XML 宣言（例えば `<?xml version="1.0"?>`）で指定されたバージョ
この属性は常に 1.0 を返していたので、本当は有用ではなく、 DOM Level 4 で削除されました。同様に、 Firefox 10 はもう実装していません。以前の主な使用法は、文書が HTML ではなく XML として表示するかどうかを検出するためでした。これは、（文書が XML ではない HTML モードの場合）小文字で要素を作成し、すべて大文字に変換されるかどうかを確認することによって検出することができます。
```js
-if (document.createElement("foo").tagName == "FOO") {
+if (document.createElement("foo").tagName === "FOO") {
/* 文書は XML ではない */
}
```
diff --git a/files/ja/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/ja/web/api/document_object_model/how_to_create_a_dom_tree/index.md
deleted file mode 100644
index 332ca8266424c2..00000000000000
--- a/files/ja/web/api/document_object_model/how_to_create_a_dom_tree/index.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: DOM ツリーの作成方法
-slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree
----
-
-{{DefaultAPISidebar("DOM")}}
-
-このページでは JavaScript において DOM API を用いて DOM オブジェクトを作成したり変更したりする方法を解説します。
-
-次の XML 文書を見てください。
-
-```xml
-<?xml version="1.0"?>
-<people>
- <person first-name="eric" middle-initial="H" last-name="jung">
- <address street="321 south st" city="denver" state="co" country="usa"/>
- <address street="123 main st" city="arlington" state="ma" country="usa"/>
- </person>
-
- <person first-name="jed" last-name="brown">
- <address street="321 north st" city="atlanta" state="ga" country="usa"/>
- <address street="123 west st" city="seattle" state="wa" country="usa"/>
- <address street="321 south avenue" city="denver" state="co" country="usa"/>
- </person>
-</people>
-```
-
-DOM API を使うことで、この文書のメモリー内の表現を作成することができます。
-
-```js
-const doc = document.implementation.createDocument("", "", null);
-const peopleElem = doc.createElement("people");
-
-const personElem1 = doc.createElement("person");
-personElem1.setAttribute("first-name", "eric");
-personElem1.setAttribute("middle-initial", "h");
-personElem1.setAttribute("last-name", "jung");
-
-const addressElem1 = doc.createElement("address");
-addressElem1.setAttribute("street", "321 south st");
-addressElem1.setAttribute("city", "denver");
-addressElem1.setAttribute("state", "co");
-addressElem1.setAttribute("country", "usa");
-personElem1.appendChild(addressElem1);
-
-const addressElem2 = doc.createElement("address");
-addressElem2.setAttribute("street", "123 main st");
-addressElem2.setAttribute("city", "arlington");
-addressElem2.setAttribute("state", "ma");
-addressElem2.setAttribute("country", "usa");
-personElem1.appendChild(addressElem2);
-
-const personElem2 = doc.createElement("person");
-personElem2.setAttribute("first-name", "jed");
-personElem2.setAttribute("last-name", "brown");
-
-const addressElem3 = doc.createElement("address");
-addressElem3.setAttribute("street", "321 north st");
-addressElem3.setAttribute("city", "atlanta");
-addressElem3.setAttribute("state", "ga");
-addressElem3.setAttribute("country", "usa");
-personElem2.appendChild(addressElem3);
-
-const addressElem4 = doc.createElement("address");
-addressElem4.setAttribute("street", "123 west st");
-addressElem4.setAttribute("city", "seattle");
-addressElem4.setAttribute("state", "wa");
-addressElem4.setAttribute("country", "usa");
-personElem2.appendChild(addressElem4);
-
-const addressElem5 = doc.createElement("address");
-addressElem5.setAttribute("street", "321 south avenue");
-addressElem5.setAttribute("city", "denver");
-addressElem5.setAttribute("state", "co");
-addressElem5.setAttribute("country", "usa");
-personElem2.appendChild(addressElem5);
-
-peopleElem.appendChild(personElem1);
-peopleElem.appendChild(personElem2);
-doc.appendChild(peopleElem);
-```
-
-DOM ツリーは以下のことをすることができます。
-
-- [XPath 式を用いて問い合わせ](/ja/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript)
-- [XMLSerializer](/ja/docs/Web/Guide/Parsing_and_serializing_XML) を用いて文字列に変換
-- [ウェブサーバーに POST](/ja/docs/Web/API/XMLHttpRequest) (`XMLHttpRequest` で)
-- [XSLT](/ja/docs/Web/XSLT) または [XLink](/ja/docs/Glossary/XLink) を使用して形式変換
-
-## 関連情報
-
-- [XML](/ja/docs/Web/XML)
-- [XPath](/ja/docs/Web/XPath)
-- [XML の解釈とシリアライズ](/ja/docs/Web/Guide/Parsing_and_serializing_XML)
-- [XMLHttpRequest](/ja/docs/Web/API/XMLHttpRequest)
diff --git a/files/ja/web/api/event/stopimmediatepropagation/index.md b/files/ja/web/api/event/stopimmediatepropagation/index.md
index 3666be7bfdc8c9..ef4ef52120e2ee 100644
--- a/files/ja/web/api/event/stopimmediatepropagation/index.md
+++ b/files/ja/web/api/event/stopimmediatepropagation/index.md
@@ -3,10 +3,10 @@ title: "Event: stopImmediatePropagation() メソッド"
short-title: stopImmediatePropagation()
slug: Web/API/Event/stopImmediatePropagation
l10n:
- sourceCommit: 32b07aa5b6ac4799a88e7b87a4d8333643ab6427
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`stopImmediatePropagation()`** は {{domxref("Event")}} インターフェイスのメソッドで、呼び出されている同じイベントの他のリスナーを抑止します。
@@ -112,7 +112,7 @@ document
#### 結果
-それぞれのクリックイベントハンドラーは、呼び出されるとステータスメッセージを表示します。中央のボタンを押すと、`stopPropagation()` によって、そのボタンがクリックされたときに登録されたイベントハンドラはすべて実行されますが、その後に続くはずの div のクリックイベントハンドラーは実行されないことがわかります。しかし、一番下のボタンを押すと、`stopImmediatePropagation()` はそのイベント以降の伝播をすべて停止します。
+それぞれのクリックイベントハンドラーは、呼び出されるとステータスメッセージを表示します。中央のボタンを押すと、`stopPropagation()` によって、そのボタンがクリックされたときに登録されたイベントハンドラーはすべて実行されますが、その後に続くはずの div のクリックイベントハンドラーは実行されないことがわかります。しかし、一番下のボタンを押すと、`stopImmediatePropagation()` はそのイベント以降の伝播をすべて停止します。
{{ EmbedLiveSample("Comparing event-stopping functions", 500, 550) }}
diff --git a/files/ja/web/api/fetch_api/basic_concepts/index.md b/files/ja/web/api/fetch_api/basic_concepts/index.md
deleted file mode 100644
index 32dad9df61dea1..00000000000000
--- a/files/ja/web/api/fetch_api/basic_concepts/index.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: フェッチの基本概念
-slug: Web/API/Fetch_API/Basic_concepts
-l10n:
- sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce
----
-
-{{DefaultAPISidebar("Fetch API")}}
-
-[フェッチ API](/ja/docs/Web/API/Fetch_API) は、（ネットワーク越しの場合も含めて）リソースを取得するインターフェイスを提供します。 {{domxref("XMLHttpRequest")}} を使っていた人にはなじみ深いでしょうが、より強力で柔軟な機能を提供します。この記事では、フェッチ API の基本概念のいくつかを説明します。
-
-> **メモ:** この記事は随時加筆されます。もっと説明が必要と感じるフェッチの概念を見つけた場合、[MDN ディスカッションフォーラム](https://discourse.mozilla.org/c/mdn/236)または [Matrix](https://wiki.mozilla.org/Matrix) の [MDN Web Docs](https://chat.mozilla.org/#/room/#mdn:mozilla.org) ルームで誰かに知らせてください。
-
-## 概要
-
-フェッチの核心はインターフェイスの抽象化であり、HTTP のリクエスト ({{domxref("Request")}})、レスポンス ({{domxref("Response")}})、ヘッダー ({{domxref("Headers")}}) を抽象化するインターフェイスであり、非同期のリソースのリクエストを行うための {{domxref("fetch()")}} メソッドで行います。 HTTP の主要部分が JavaScript オブジェクトとして抽象化されているため、他の API からそれらの機能を利用しやすくなっています。
-
-[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)は、フェッチを多用する API の一例です。
-
-フェッチはそれらのリクエストの非同期な性質をもう一歩先へ進めるものです。 API は完全に {{jsxref("Promise")}} ベースです。
-
-## ガード
-
-ガードは {{domxref("Headers")}} オブジェクトの機能で、ヘッダーが使用されている場所に応じて `immutable`, `request`, `request-no-cors`, `response`, `none` のいずれかの値を取ります。
-
-新しい {{domxref("Headers")}} オブジェクトが {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor", "コンストラクター")}}を使用してが生成されるとき、ガードは `none` （既定値）に設定されます。 {{domxref("Request")}} または {{domxref("Response")}} オブジェクトが生成された場合、関連づけられた {{domxref("Headers")}} オブジェクトのガードは下記のとおり設定されます。
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="row">新しいオブジェクト型</th>
- <th scope="col">コンストラクター</th>
- <th scope="col">
- 関連する {{domxref("Headers")}} オブジェクトのガード設定
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td rowspan="2">{{domxref("Request")}}</td>
- <td>{{domxref("Request.Request","Request()")}}</td>
- <td><code>request</code></td>
- </tr>
- <tr>
- <td>
- {{domxref("Request.Request","Request()")}} で {{domxref("Request.mode","mode")}} に <code>no-cors</code> を設定したもの
- </td>
- <td><code>request-no-cors</code></td>
- </tr>
- <tr>
- <td rowspan="2">{{domxref("Response")}}</td>
- <td>{{domxref("Response.Response","Response()")}}</td>
- <td><code>response</code></td>
- </tr>
- <tr>
- <td>
- {{domxref("Response.error","error()")}} または {{domxref("Response.redirect","redirect()")}} メソッド
- </td>
- <td><code>immutable</code></td>
- </tr>
- </tbody>
-</table>
-
-ヘッダーのガードは、ヘッダーの内容を変更する {{domxref("Headers.set","set()")}}、 {{domxref("Headers.delete","delete()")}}、{{domxref("Headers.append","append()")}} の各メソッドに影響します。 {{domxref("Headers")}} のガードが `immutable` の場合、変更しようとすると {{jsxref("TypeError")}} が発生します。しかし、次の場合は動作します。
-
-- ガードが `request` で、ヘッダーの _name_ が{{Glossary("forbidden header name", "禁止ヘッダー名")}} ではない場合。
-- ガードが `request-no-cors` で、ヘッダーの _name_/_value_ が{{Glossary("simple header", "単純ヘッダー")}}である場合。
-- ガードが `response` で、ヘッダーの _name_ が{{Glossary("forbidden response header name", "禁止レスポンスヘッダー名")}}ではない場合。
diff --git a/files/ja/web/api/htmlinputelement/disabled/index.md b/files/ja/web/api/htmlinputelement/disabled/index.md
index a2b568892722de..6bb6154c519709 100644
--- a/files/ja/web/api/htmlinputelement/disabled/index.md
+++ b/files/ja/web/api/htmlinputelement/disabled/index.md
@@ -3,7 +3,7 @@ title: "HTMLInputElement: disabled プロパティ"
short-title: disabled
slug: Web/API/HTMLInputElement/disabled
l10n:
- sourceCommit: a36633398f827c87eb593f9647ed00bf33fd5b34
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{ APIRef("HTML DOM") }}
diff --git a/files/ja/web/api/htmlmediaelement/loop/index.md b/files/ja/web/api/htmlmediaelement/loop/index.md
index 650a4621b06a69..495c913af71141 100644
--- a/files/ja/web/api/htmlmediaelement/loop/index.md
+++ b/files/ja/web/api/htmlmediaelement/loop/index.md
@@ -1,8 +1,9 @@
---
-title: HTMLMediaElement.loop
+title: "HTMLMediaElement: loop プロパティ"
+short-title: loop
slug: Web/API/HTMLMediaElement/loop
l10n:
- sourceCommit: a36633398f827c87eb593f9647ed00bf33fd5b34
+ sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---
{{APIRef("HTML DOM")}}
@@ -30,4 +31,4 @@ obj.loop = true; // true
## 関連情報
-- 定義している {{domxref("HTMLMediaElement")}} インターフェイス
+- {{domxref("HTMLMediaElement")}}: `HTMLMediaElement.loop` プロパティを定義していたインターフェイス
diff --git a/files/ja/web/api/htmlmediaelement/mediagroup/index.md b/files/ja/web/api/htmlmediaelement/mediagroup/index.md
index 91f38cfd56df6f..c0e041f76ab8b9 100644
--- a/files/ja/web/api/htmlmediaelement/mediagroup/index.md
+++ b/files/ja/web/api/htmlmediaelement/mediagroup/index.md
@@ -1,13 +1,14 @@
---
-title: HTMLMediaElement.mediaGroup
+title: "HTMLMediaElement: mediaGroup プロパティ"
+short-title: mediaGroup
slug: Web/API/HTMLMediaElement/mediaGroup
l10n:
- sourceCommit: a36633398f827c87eb593f9647ed00bf33fd5b34
+ sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---
{{APIRef("HTML DOM")}}{{Deprecated_Header}}{{Non-standard_Header}}
-**`HTMLMediaElement.mediaGroup`** プロパティは HTML の [`mediaGroup`](/ja/docs/Web/HTML/Element/video#mediaGroup) 属性を反映し、所属する要素のグループの名前を示します。メディア要素のグループは、共通の `controller` を共有します。
+**`HTMLMediaElement.mediaGroup`** プロパティは HTML の [`mediaGroup`](/ja/docs/Web/HTML/Element/video#mediagroup) 属性を反映し、所属する要素のグループの名前を示します。メディア要素のグループは、共通の `controller` を共有します。
## 値
@@ -15,7 +16,7 @@ l10n:
## 仕様書
-2016年、 Media Controller の全機能が [HTML 仕様書から削除](https://github.com/w3c/html/issues/246)されました。標準化する予定がなくなりました。
+2016 年、 Media Controller の全機能が [HTML 仕様書から削除](https://github.com/w3c/html/issues/246)されました。標準化する予定がなくなりました。
## ブラウザーの互換性
@@ -23,4 +24,4 @@ l10n:
## 関連情報
-- 定義している {{domxref("HTMLMediaElement")}} インターフェイス
+- {{domxref("HTMLMediaElement")}}: `HTMLMediaElement.mediaGroup` プロパティを定義していたインターフェイス
diff --git a/files/ja/web/api/htmlscriptelement/async/index.md b/files/ja/web/api/htmlscriptelement/async/index.md
new file mode 100644
index 00000000000000..fcd0ba85692a0c
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/async/index.md
@@ -0,0 +1,40 @@
+---
+title: "HTMLScriptElement: async プロパティ"
+short-title: async
+slug: Web/API/HTMLScriptElement/async
+l10n:
+ sourceCommit: 3d57022613fbc562cc948938972aeffcaece819b
+---
+
+{{APIRef("HTML DOM")}}
+
+**`async`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、`async` プロパティを `true` に設定すると、構文解析と並列に外部スクリプトが取得され、利用できるようになるとすぐに評価されます。[モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)の場合、`async` プロパティを `true` に設定すると、スクリプトとその依存関係がすべて並列に取得され、利用できるようになるとすぐに評価されます。
+
+これは {{HTMLElement("script")}} 要素の `async` 属性を反映しています。
+
+## 値
+
+論理値です。
+
+## 例
+
+```html
+<script id="el" src="/example.js" async></script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.async); // 出力: true
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLScriptElement.defer")}}
diff --git a/files/ja/web/api/htmlscriptelement/attributionsrc/index.md b/files/ja/web/api/htmlscriptelement/attributionsrc/index.md
new file mode 100644
index 00000000000000..475c77e3e5e53e
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/attributionsrc/index.md
@@ -0,0 +1,74 @@
+---
+title: "HTMLScriptElement: attributionSrc プロパティ"
+short-title: attributionSrc
+slug: Web/API/HTMLScriptElement/attributionSrc
+l10n:
+ sourceCommit: dd6f6e705b7df9d505c93023593a6bae96bef9db
+---
+
+{{APIRef("Attribution Reporting API")}}{{securecontext_header}}{{SeeCompatTable}}
+
+**`attributionSrc`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、{{htmlelement("script")}} 要素の [`attributionsrc`](/ja/docs/Web/HTML/Element/script#attributionsrc) 属性をプログラムで取得・設定し、その属性値を反映します。`attributionsrc` はブラウザーにスクリプトリソースリクエストと一緒に {{httpheader("Attribution-Reporting-Eligible")}} ヘッダーを送信することを指定します。
+
+サーバー側では、これはレスポンスで {{httpheader("Attribution-Reporting-Register-Source")}} または {{httpheader("Attribution-Reporting-Register-Trigger")}} ヘッダーを送信するトリガーとして用いられ、それぞれ JavaScript ベースの[属性ソース](/ja/docs/Web/API/Attribution_Reporting_API/Registering_sources#javascript-based_event_sources)または[属性トリガー](/ja/docs/Web/API/Attribution_Reporting_API/Registering_triggers#javascript-based_attribution_triggers)を登録します。どのレスポンスヘッダーを送り返すべきかは、登録を行った `Attribution-Reporting-Eligible` ヘッダーの値に依存します。
+
+> **メモ:** 他にも、JavaScript の属性ソースまたはトリガーは、{{domxref("fetch()")}} リクエストに `attributionReporting` オプションをつけて送信するか（`fetch()` 呼び出しで直接設定するか、`fetch()` 呼び出しに渡された {{domxref("Request")}} オブジェクトで）、{{domxref("XMLHttpRequest")}} で {{domxref("XMLHttpRequest.setAttributionReporting", "setAttributionReporting()")}} をリクエストオブジェクトについて呼び出したりすることもできます。
+
+詳細は[属性レポート API](/ja/docs/Web/API/Attribution_Reporting_API) です。
+
+## 値
+
+文字列です。このプロパティには 2 つのバージョンがあり、取得したり設定したりすることができます。
+
+- 空文字列、すなわち `scriptElem.attributionSrc=""`。これは、{{httpheader("Attribution-Reporting-Eligible")}} ヘッダーを、`src` 属性がこの点を指すのと同じサーバーに送信することを指定します。これは、属性ソースやトリガーの登録を同じサーバーで処理している場合には問題ありません。属性トリガーを登録する場合、このプロパティはオプションであり、除外すると空文字列の値を使用します。
+- 1 つ以上の URL を含む値です。例えば次のようなものです。
+
+ ```js
+ scriptElem.attributionSrc =
+ "https://a.example/register-source https://b.example/register-source";
+ ```
+
+ これは、リクエストされたリソースがあなたが制御しているサーバーにない場合や、属性ソースを別のサーバーに登録する処理だけを行いたい場合に有益です。この場合、`attributionSrc` の値として 1 つ以上の URL を指定します。リソースリクエストが発生すると、{{httpheader("Attribution-Reporting-Eligible")}} ヘッダーがリソースオリジンに加えて、`attributionSrc` を指定した URL にも送信されます。これらの URL は {{httpheader("Attribution-Reporting-Register-Source")}} または {{httpheader("Attribution-Reporting-Register-Trigger")}} ヘッダーで応答することができます。
+
+ > **メモ:** 複数の URL を指定するということは、複数の属性ソースを同じ機能に登録できるということです。例えば、成功を測定しようとしている様々なキャンペーンがあり、異なるデータで異なるレポートを生成する必要があるかもしれません。
+
+## 例
+
+### 空の attributionSrc を設定
+
+```html
+<script src="advertising-script.js"></script>
+```
+
+```js
+const scriptElem = document.querySelector("script");
+scriptElem.attributionSrc = "";
+```
+
+### attributionSrc に URL を設定
+
+```html
+<script src="advertising-script.js"></script>
+```
+
+```js
+// URL に '=' のような特殊文字が格納されていると不適切に解釈されてしまうため、
+// エンコードしてください。
+const encodedUrlA = encodeURIComponent("https://a.example/register-source");
+const encodedUrlB = encodeURIComponent("https://b.example/register-source");
+
+const scriptElem = document.querySelector("script");
+scriptElem.attributionSrc = `${encodedUrlA} ${encodedUrlB}`;
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [属性レポート API](/ja/docs/Web/API/Attribution_Reporting_API).
diff --git a/files/ja/web/api/htmlscriptelement/blocking/index.md b/files/ja/web/api/htmlscriptelement/blocking/index.md
new file mode 100644
index 00000000000000..470c0bc79eaa9d
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/blocking/index.md
@@ -0,0 +1,44 @@
+---
+title: "HTMLScriptElement: blocking プロパティ"
+short-title: blocking
+slug: Web/API/HTMLScriptElement/blocking
+l10n:
+ sourceCommit: e651c702e7a16093ca5a615f74fde1d9ef234508
+---
+
+{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+
+**`blocking`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトを取得する際に特定の操作を実行しないことを示す文字列です。
+
+これは {{HTMLElement("script")}} 要素の `blocking` 属性を反映しています。
+
+## 値
+
+文字列です。ブロックする操作を示す下記のブロックトークンのスペース区切りのリストでなければなりません。
+
+- `render`
+ - : 画面へのコンテンツの描画がブロックされます。
+
+## 例
+
+```html
+<script id="el" type="text/javascript" async blocking="render"></script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.blocking); // 出力: "render"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLLinkElement.blocking")}}
+- {{domxref("HTMLStyleElement.blocking")}}
diff --git a/files/ja/web/api/htmlscriptelement/crossorigin/index.md b/files/ja/web/api/htmlscriptelement/crossorigin/index.md
new file mode 100644
index 00000000000000..9f1593e69ce610
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/crossorigin/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLScriptElement: crossOrigin プロパティ"
+short-title: crossOrigin
+slug: Web/API/HTMLScriptElement/crossOrigin
+l10n:
+ sourceCommit: cc756217fbcb8214730fe736973ec15f3592a246
+---
+
+{{APIRef("HTML DOM")}}
+
+**`crossOrigin`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、この script 要素の{{Glossary("CORS", "オリジン間リソース共有")}}設定を反映します。他の[オリジン](/ja/docs/Glossary/Origin)からのクラシックスクリプトの場合、完全なエラー情報が公開されるかどうかを制御します。モジュールスクリプトでは、スクリプト自身とインポートするスクリプトを制御します。詳細は [CORS 設定属性](/ja/docs/Web/HTML/Attributes/crossorigin)を参照してください。
+
+## 値
+
+リソースを取得する際に使用する CORS モードを指定するキーワードの文字列。使用可能な値は以下のとおりです。
+
+- `anonymous` または空文字列 (`""`)
+ - : {{domxref("HTMLScriptElement")}} で送信されるリクエストは、`cors` {{domxref("Request.mode", "モード", "", "nocode")}}および `same-origin` の{{domxref("Request.credentials", "資格情報", "", "nocode")}}モードを使用します。これは、CORS が有効で、文書が読み込まれたのと同じオリジンからリソースが取得された場合に、資格情報が送信されるということです。
+- `use-credentials`
+ - : {{domxref("HTMLScriptElement")}} で送信されるリクエストは、`cors` {{domxref("Request.mode", "モード", "", "nocode")}}および `include` の{{domxref("Request.credentials", "資格情報", "", "nocode")}}モードを使用します。この要素によるすべてのリソースリクエストは、取得するドメインに関係なく、CORS を使用します。
+
+`crossOrigin` プロパティに他の値を指定した場合は、`anonymous` を指定したのと同じことになります。
+
+`crossOrigin` プロパティが指定されていない場合、リソースは CORS なし（`no-cors` {{domxref("Request.mode", "モード", "", "nocode")}}および `same-origin` の {{domxref("Request.credentials", "資格情報", "", "nocode")}}モード）で取得されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLImageElement.crossOrigin")}}
+- {{domxref("HTMLLinkElement.crossOrigin")}}
+- {{domxref("HTMLMediaElement.crossOrigin")}}
diff --git a/files/ja/web/api/htmlscriptelement/defer/index.md b/files/ja/web/api/htmlscriptelement/defer/index.md
new file mode 100644
index 00000000000000..14faac1a60a6a5
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/defer/index.md
@@ -0,0 +1,40 @@
+---
+title: "HTMLScriptElement: defer プロパティ"
+short-title: defer
+slug: Web/API/HTMLScriptElement/defer
+l10n:
+ sourceCommit: 3d57022613fbc562cc948938972aeffcaece819b
+---
+
+{{APIRef("HTML DOM")}}
+
+**`defer`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、`defer` プロパティを `true` に設定すると、外部スクリプトは文書が構文解析された後、`DOMContentLoaded` イベントを発行する前に実行されます。[モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)の場合、`defer` プロパティは何の効果もありません。
+
+これは {{HTMLElement("script")}} 要素の `defer` 属性を反映します。
+
+## 値
+
+論理値です。
+
+## 例
+
+```html
+<script id="el" src="/example.js" defer></script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.defer); // 出力: true
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLScriptElement.async")}}
diff --git a/files/ja/web/api/htmlscriptelement/fetchpriority/index.md b/files/ja/web/api/htmlscriptelement/fetchpriority/index.md
new file mode 100644
index 00000000000000..ba91f98f949a1f
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/fetchpriority/index.md
@@ -0,0 +1,57 @@
+---
+title: "HTMLScriptElement: fetchPriority プロパティ"
+short-title: fetchPriority
+slug: Web/API/HTMLScriptElement/fetchPriority
+l10n:
+ sourceCommit: f8b524a5fbdedf04ed5d3bac2200c33c5eda8148
+---
+
+{{APIRef("HTML DOM")}}
+
+**`fetchPriority`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、ブラウザーが外部スクリプトを取得する際に、他の外部スクリプトと相対的にどのように優先させるべきかのヒントを表します。
+
+これは {{HTMLElement("script")}} 要素の `fetchpriority` 属性を反映します。
+
+## 値
+
+優先順位のヒントを表す文字列。使用可能な値は以下のとおりです。
+
+- `high`
+ - : 他の外部スクリプトと相対的に高い優先度で外部スクリプトを取得します。
+- `low`
+ - : 他の外部スクリプトと相対的に低い優先度で外部スクリプトを取得します。
+- `auto`
+ - : 既定のモードで、取得の優先度を示しません。
+ ブラウザーがユーザーにとって最適なものを決定します。
+
+もし `fetchpriority` 属性が指定されていなかったり、他の値が指定されていたりした場合は、 `auto` を指定したのと同じことになります。
+
+`fetchPriority` プロパティを使用すると、外部スクリプトを取得する優先度を高くしたり低くしたり指示することができます。これを {{HTMLElement("script")}} 要素に適用すると、読み込みプロセスの早い段階でユーザーにとって「重要」な外部スクリプトを指示するのに有益です。
+
+リソースの読み込みに対するヒントの効果はブラウザー特有のものなので、必ず複数のブラウザーエンジンでテストしてください。
+
+ブラウザーが外部スクリプトを自動的に読み込む最適な方法を推測できないような例外的な場合を除いて、控えめに使用してください。使用しすぎるとパフォーマンスが低下することができます。
+
+## 例
+
+```html
+<script id="el" type="module" src="main.js" fetchpriority="high"></script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.fetchPriority); // 出力: "high"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLImageElement.fetchPriority")}}
+- {{domxref("HTMLLinkElement.fetchPriority")}}
diff --git a/files/ja/web/api/htmlscriptelement/index.md b/files/ja/web/api/htmlscriptelement/index.md
index 1eb044d7942c99..f546ed0540043b 100644
--- a/files/ja/web/api/htmlscriptelement/index.md
+++ b/files/ja/web/api/htmlscriptelement/index.md
@@ -2,14 +2,14 @@
title: HTMLScriptElement
slug: Web/API/HTMLScriptElement
l10n:
- sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
+ sourceCommit: ba5f28ab10ef1af48a55f363c8facc04a1f94479
---
{{APIRef("HTML DOM")}}
-HTML の {{HTMLElement("script")}} 要素は **`HTMLScriptElement`** インターフェイスを公開しています。これは（通常の {{domxref("HTMLElement")}} から継承によって利用できるものに加えて） `<script>` 要素の動作や実行を操作するための特別なプロパティやメソッドを提供します。
+HTML の {{HTMLElement("script")}} 要素は **`HTMLScriptElement`** インターフェイスを公開しています。これは `<script>` 要素の動作や実行を操作するための特別なプロパティやメソッドを（通常の {{domxref("HTMLElement")}} から継承によって利用できるものに加えて）提供します。
-JavaScript ファイルは `application/javascript` の [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)で提供されますが、 しかし、ブラウザーは寛大で、スクリプトが画像型 (`image/*`)、動画型 (`video/*`)、音声型 (`audio/*`)、または `text/csv` で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は {{domxref("HTMLElement/error_event", "error")}} イベントを受け取ります。それ以外の場合は、{{domxref("Window/load_event", "load")}} イベントを受け取ります。
+JavaScript ファイルは `text/javascript` の [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)で提供されます。しかし、ブラウザーは寛大であり、スクリプトが画像型 (`image/*`)、動画型 (`video/*`)、音声型 (`audio/*`)、または `text/csv` で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は {{domxref("HTMLElement/error_event", "error")}} イベントを受け取ります。それ以外の場合は、{{domxref("Window/load_event", "load")}} イベントを受け取ります。
{{InheritanceDiagram}}
@@ -17,42 +17,38 @@ JavaScript ファイルは `application/javascript` の [MIME タイプ](/ja/doc
_親である {{domxref("HTMLElement")}} から継承したプロパティもあります。_
-- {{domxref("HTMLScriptElement.type")}}
- - : 文字列で、スクリプトの MIME タイプを表します。これは [`type`](/ja/docs/Web/HTML/Element/script#type) 属性を反映します。
-- {{domxref("HTMLScriptElement.src")}}
- - : 文字列で、外部スクリプトの URL を表します。これは [`src`](/ja/docs/Web/HTML/Element/script#src) 属性を反映します。
-- {{domxref("HTMLScriptElement.event")}} {{deprecated_inline}}
- - : 文字列です。 HTML 文書で要素にイベントハンドラーを設定するための廃止された方法です。
-- {{domxref("HTMLScriptElement.charset")}} {{deprecated_inline}}
+- {{domxref("HTMLScriptElement.attributionSrc")}} {{securecontext_inline}} {{experimental_inline}}
+ - : {{htmlelement("script")}} 要素の [`attributionsrc`](/ja/docs/Web/HTML/Element/script#attributionsrc) 属性をプログラムで取得・設定し、その属性値を反映します。`attributionsrc` はブラウザーにスクリプトリソースリクエストと一緒に {{httpheader("Attribution-Reporting-Eligible")}} ヘッダーを送信することを指定します。サーバー側では、これはレスポンスで {{httpheader("Attribution-Reporting-Register-Source")}} または {{httpheader("Attribution-Reporting-Register-Trigger")}} ヘッダーを送信するトリガーとして用いられ、それぞれ JavaScript ベースの[属性ソース](/ja/docs/Web/API/Attribution_Reporting_API/Registering_sources#javascript-based_event_sources)または[属性トリガー](/ja/docs/Web/API/Attribution_Reporting_API/Registering_triggers#javascript-based_attribution_triggers)を登録します。
+- {{domxref("HTMLScriptElement.async")}}
+ - : スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、`async` プロパティを `true` に設定すると、構文解析と並列に外部スクリプトが取得され、利用できるようになるとすぐに評価されます。[モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)の場合、`async` プロパティを `true` に設定すると、スクリプトとその依存関係がすべて並列に取得され、利用できるようになるとすぐに評価されます。
+- {{domxref("HTMLScriptElement.blocking")}} {{Experimental_Inline}}
+ - : スクリプトを取得する際に特定の操作を実行しないことを示す文字列です。これは {{HTMLElement("script")}} 要素の `blocking` 属性を反映しています。
+- `HTMLScriptElement.charset` {{deprecated_inline}}
- : 文字列で、外部スクリプトの文字エンコーディングを表します。これは [`charset`](/ja/docs/Web/HTML/Element/script#charset) 属性を反映します。
-- {{domxref("HTMLScriptElement.async")}}, {{domxref("HTMLScriptElement.defer")}}
-
- - : `async` および `defer` 属性は論理属性で、スクリプトの実行方法を制御します。 **`defer` および `async` 属性は、`src` 属性がないときには指定しないでください。**
-
- 取りうる実行モードは 3 種類あります。
-
- 1. `async` 属性が存在した場合、スクリプトはダウンロードされ次第、非同期に実行されます。
- 2. `async` 属性がなく `defer` 属性が存在した場合、スクリプトは[ページの解釈の終了](/ja/docs/Web/API/Window/DOMContentLoaded_event)時に実行されます。
- 3. どちらの属性もなかった場合、スクリプトは直ちに読み取られて実行され、ページの解釈はブロックされます。
-
- `defer` 属性は `async` 属性と共に指定することができます。 `defer` のみに対応している（そして `async` には対応していない）ブラウザーでは、既定のブロックが発生する動作の代わりに `defer` で代替することができます。
-
- > **メモ:** これらの属性における正確な処理の詳細は、 HTML の多くの異なる側面を含むため複雑であり、そのため仕様全体に散らばっています。[これらのアルゴリズム](https://html.spec.whatwg.org/multipage/scripting.html)は、核となる考えを記述していますが、 {{HTMLElement("script")}} の[開始](https://html.spec.whatwg.org/multipage/syntax.html#start-tags)および[終了](https://html.spec.whatwg.org/multipage/syntax.html#end-tags)タグの HTML、[外部コンテンツ](https://html.spec.whatwg.org/multipage/syntax.html#foreign-elements)、[XML](https://html.spec.whatwg.org/multipage/xhtml.html)における解釈ルール、 [`document.write()`](/ja/docs/Web/API/Document/write) メソッドのルール、[スクリプティング](https://html.spec.whatwg.org/multipage/webappapis.html)の扱い、などによります。
-
- {{domxref("HTMLScriptElement.crossOrigin")}}
- : 文字列で、 script 要素の [CORS 設定](/ja/docs/Web/HTML/Attributes/crossorigin) を反映します。他の[オリジン](/ja/docs/Glossary/Origin)のスクリプトについては、エラー情報が公開されるかどうかを制御します。
-- {{domxref("HTMLScriptElement.text")}}
-
- - : この {{HTMLElement("script")}} 要素の中にあるすべての [`Text` ノード](/ja/docs/Web/API/Text)（コメントなどの他のノードを除く）の内容をツリー順で連結した文字列です。設定すると、 [`textContent`](/ja/docs/Web/API/Node/textContent) IDL 属性と同様に動作します。
-
- > **メモ:** [`document.write()`](/ja/docs/Web/API/Document/write) メソッドで挿入された場合、 {{HTMLElement("script")}} 要素は（ふつう同期的に）実行されますが、 [`innerHTML`](/ja/docs/Web/API/Element/innerHTML) または [`outerHTML`](/ja/docs/Web/API/Element/outerHTML) を使用して挿入された場合は実行されません。
-
-- {{domxref("HTMLScriptElement.fetchPriority")}} {{Experimental_Inline}}
- - : オプションの文字列で、ブラウザーが外部スクリプトの取得を他の外部スクリプトと比較してどのように優先させるべきかのヒントを表します。この値を指定する場合は、許可された値のいずれかでなければなりません。高い優先度で取得する場合は `high` 、低い優先度で取得する場合は `low` 、優先度がない場合は `auto` （既定値）となります。
+- {{domxref("HTMLScriptElement.defer")}}
+ - : スクリプトの実行方法を論理値で制御します。クラシックスクリプトの場合、`defer` プロパティを `true` に設定すると、外部スクリプトは文書が構文解析された後、`DOMContentLoaded` イベントを発行する前に実行されます。[モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)の場合、`defer` プロパティは何の効果もありません。
+- `HTMLScriptElement.event` {{deprecated_inline}}
+ - : 文字列です。 HTML 文書で要素にイベントハンドラーを設定するための廃止された方法です。
+- {{domxref("HTMLScriptElement.fetchPriority")}}
+ - : オプションの文字列で、ブラウザーが外部スクリプトの取得を他の外部スクリプトと比較してどのように優先させるべきかのヒントを表します。この値を指定する場合は、許可された値のいずれかでなければなりません。高い優先度で取得する場合は `high` 、低い優先度で取得する場合は `low` 、優先度がない場合は `auto` （既定値）となります。これは {{HTMLElement("script")}} 要素の `fetchpriority` 属性を反映したものです。
+- {{domxref("HTMLScriptElement.integrity")}}
+ - : 取得されたリソースが予期せぬ改変なしに配信されたことを確認するためにブラウザーが使用することができる、インラインメタデータを格納する文字列です。これは {{HTMLElement("script")}} 要素の `integrity` 属性を反映したものです。
- {{domxref("HTMLScriptElement.noModule")}}
- : 論理値で、 true ならば [ES モジュール](/ja/docs/Web/JavaScript/Guide/Modules)に対応したブラウザーにおいてスクリプトの実行を停止します。 — JavaScript モジュールに対応して*いない*古いブラウザーで代替スクリプトを実行するために使用します。
- {{domxref("HTMLScriptElement.referrerPolicy")}}
- : 文字列で、 HTML 属性 [`referrerPolicy`](/ja/docs/Web/HTML/Element/script#referrerpolicy) を反映し、スクリプトを取得する際、そのスクリプトの取得が完了した時にどのリファラーを使用するかを示します。
+- {{domxref("HTMLScriptElement.src")}}
+ - : 文字列で、外部スクリプトの URL を表します。これは [`src`](/ja/docs/Web/HTML/Element/script#src) 属性を反映します。これは {{HTMLElement("script")}} 要素の `src` 属性を反映したものです。
+- {{domxref("HTMLScriptElement.text")}}
+
+ - : この {{HTMLElement("script")}} 要素の中にあるすべての {{domxref("Text")}} ノード（コメントなどの他のノードを除く）の内容をツリー順で連結した文字列です。設定した場合は、{{domxref("Node.textContent")}} プロパティと同様に動作します。
+
+ > **メモ:** {{domxref("Document.write()")}} メソッドで挿入された場合、 {{HTMLElement("script")}} 要素は（ふつう同期的に）実行されますが、 {{domxref("Element.innerHTML")}} または {{domxref("Element.outerHTML")}} を使用して挿入された場合は実行されません。
+
+- {{domxref("HTMLScriptElement.type")}}
+ - : 文字列で、スクリプトの MIME タイプを表します。これは {{HTMLElement("script")}} 要素の `type` 属性を反映したものです。
## 静的メソッド
@@ -74,9 +70,9 @@ _独自のイベントはありません。親である {{domxref("HTMLElement")
文書内の新しいスクリプトをインポートする関数を作成しましょう。次のコードをホストする {{HTMLElement("script")}} の直前に {{HTMLElement("script")}} ノードを作成します（{{domxref("document.currentScript")}} を使用）。これらのスクリプトは**非同期**で実行されます。詳細については、 [`defer`](#defer_property) および [`async`](#async_property) プロパティを参照してください。
-```js
+```js-nolint
function loadError(oError) {
- throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
+ throw new URIError(`スクリプト ${oError.target.src} は正しく読み込まれませんでした。`);
}
function prefixScript(url, onloadFunction) {
@@ -95,9 +91,9 @@ function prefixScript(url, onloadFunction) {
次の関数は、新しいスクリプトを {{domxref("document.currentScript")}} 要素の直前に追加するのではなく、 {{HTMLElement("head")}} タグの子として追加するものです。
-```js
+```js-nolint
function loadError(oError) {
- throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
+ throw new URIError(`スクリプト ${oError.target.src} は正しく読み込まれませんでした。`);
}
function affixScriptToHead(url, onloadFunction) {
@@ -111,12 +107,12 @@ function affixScriptToHead(url, onloadFunction) {
}
```
-サンプルの使用法:
+サンプルの使用法は次の通りです。
```js
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
- alert('The script "myScript2.js" has been correctly loaded.');
+ alert('スクリプト "myScript2.js" は正しく読み込まれました。');
});
```
diff --git a/files/ja/web/api/htmlscriptelement/integrity/index.md b/files/ja/web/api/htmlscriptelement/integrity/index.md
new file mode 100644
index 00000000000000..a274fb653935e1
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/integrity/index.md
@@ -0,0 +1,46 @@
+---
+title: "HTMLScriptElement: integrity プロパティ"
+short-title: integrity
+slug: Web/API/HTMLScriptElement/integrity
+l10n:
+ sourceCommit: 49d15be653576c5f73ec527ee976c5881171b53c
+---
+
+{{APIRef("HTML DOM")}}
+
+**`integrity`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、取得されたリソースが予期せぬ改変なしに配信されたことを確認するためにブラウザーが使用することができる、インラインメタデータを格納する文字列です。
+
+これは {{HTMLElement("script")}} 要素の `integrity` 属性を反映したものです。
+
+## 値
+
+文字列です。
+
+## 例
+
+```html
+<script
+ id="el"
+ src="https://example.com/example-framework.js"
+ type="text/javascript"
+ integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
+ crossorigin="anonymous"></script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.integrity); // 出力: "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLLinkElement.integrity")}}
+- [サブリソース完全性](/ja/docs/Web/Security/Subresource_Integrity)
diff --git a/files/ja/web/api/htmlscriptelement/nomodule/index.md b/files/ja/web/api/htmlscriptelement/nomodule/index.md
new file mode 100644
index 00000000000000..b503f66237c43c
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/nomodule/index.md
@@ -0,0 +1,39 @@
+---
+title: "HTMLScriptElement: noModule プロパティ"
+short-title: noModule
+slug: Web/API/HTMLScriptElement/noModule
+l10n:
+ sourceCommit: a16dd5636df94af17c519d5e1eaaaf967acd8203
+---
+
+{{APIRef("HTML DOM")}}
+
+**`noModule`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、[ES モジュール](/ja/docs/Web/JavaScript/Guide/Modules)に対応したブラウザーでスクリプトを実行するかどうかを論理値で示します。実際、これは JavaScript モジュールに対応していない古いブラウザーで代替スクリプトを提供するために使用することができます。
+
+これは {{HTMLElement("script")}} 要素の `nomodule` 属性を反映したものです。
+
+## 値
+
+論理値で、`true` は ES モジュールに対応しているブラウザーではスクリプトを実行しないことを意味し、`false` はそうでないことを意味します。
+
+## 例
+
+```html
+<script id="el" nomodule>
+ // ブラウザーが JavaScript モジュールに対応している場合、以下のスクリプトは実行されません。
+ console.log("このブラウザーは JavaScript モジュールに対応していません");
+</script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.noModule); // 出力: true
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md b/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md
index 0d4c78fe702ce5..9c04d15b8d40ed 100644
--- a/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md
+++ b/files/ja/web/api/htmlscriptelement/referrerpolicy/index.md
@@ -3,12 +3,12 @@ title: "HTMLScriptElement: referrerPolicy プロパティ"
short-title: referrerPolicy
slug: Web/API/HTMLScriptElement/referrerPolicy
l10n:
- sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
+ sourceCommit: 8bc0a4031588e94e6b7d89ebfe45716a99f5b0c0
---
-{{APIRef}}
+{{APIRef("HTML DOM")}}
-**`referrerPolicy`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、 {{HTMLElement("script")}} 要素の [`referrerpolicy`](/ja/docs/Web/HTML/Element/script#referrerpolicy) とそのスクリプトによって行われるフェッチを反映し、リソースをフェッチする際にどのリファラーを送信するか定義しています。
+**`referrerPolicy`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、この {{HTMLElement("script")}} 要素の [`referrerpolicy`](/ja/docs/Web/HTML/Element/script#referrerpolicy) を反映します。これは、スクリプトとそれがインポートするスクリプトを取得するときにリファラーをどのように設定するかを定義します。
## 値
diff --git a/files/ja/web/api/htmlscriptelement/src/index.md b/files/ja/web/api/htmlscriptelement/src/index.md
new file mode 100644
index 00000000000000..c752754b476919
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/src/index.md
@@ -0,0 +1,41 @@
+---
+title: "HTMLScriptElement: src プロパティ"
+short-title: src
+slug: Web/API/HTMLScriptElement/src
+l10n:
+ sourceCommit: 2231cbd5847dff1ca21f8f7fb59d72cae615f088
+---
+
+{{APIRef("HTML DOM")}}
+
+**`src`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、外部スクリプトの URL を表す文字列です。文書内に直接スクリプトを埋め込む代わりに使用することができます。
+
+これは {{HTMLElement("script")}} 要素の `src` 属性を反映したものです。
+
+## 値
+
+文字列です。
+
+## 例
+
+このコードは URL が `https://example.com` であるウェブサイト上で動作していると想定します。
+
+```html
+<script id="script-with-src" type="module" src="/main.js"></script>
+<script id="script-without-src" type="module"></script>
+```
+
+```js
+const script_with_src = document.getElementById("script-with-src");
+console.log(script_with_src.src); // 出力: "https://example.com/main.js"
+const script_without_src = document.getElementById("script-without-src");
+console.log(script_without_src.src); // 出力: ""
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmlscriptelement/supports_static/index.md b/files/ja/web/api/htmlscriptelement/supports_static/index.md
index a3436a93ca2bd6..e013cc896481a7 100644
--- a/files/ja/web/api/htmlscriptelement/supports_static/index.md
+++ b/files/ja/web/api/htmlscriptelement/supports_static/index.md
@@ -3,10 +3,10 @@ title: "HTMLScriptElement: supports() 静的メソッド"
short-title: supports()
slug: Web/API/HTMLScriptElement/supports_static
l10n:
- sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839
+ sourceCommit: 3bd335bf04ca78b7f4917ebc99e0f4f47f11d3de
---
-{{APIRef}}
+{{APIRef("HTML DOM")}}
**`supports()`** は {{domxref("HTMLScriptElement")}} インターフェイスの静的メソッドで、ユーザーエージェントが対応しているスクリプトの種類を機能的に検出するための、単純で一貫したメソッドを提供します。
@@ -26,14 +26,14 @@ HTMLScriptElement.supports(type)
対応している値は以下の通りで、大文字と小文字が区別されます。
- `"classic"`
- - : クラシックスクリプトが対応しているかどうかをテストします。
+ - : クラシックスクリプトに対応しているかどうかを検査します。
「クラシック」スクリプトとは、モジュールスクリプトより前の通常の、伝統的な JavaScript ファイルのことです。
- `"module"`
- - : [モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)に対応しているかどうかをテストします。
+ - : [モジュールスクリプト](/ja/docs/Web/JavaScript/Guide/Modules)に対応しているかどうかを検査します。
- `"importmap"`
- - : インポートマップに対応しているかどうかをテストします。
+ - : インポートマップに対応しているかどうかを検査します。
- `"speculationrules"`
- - : 投機ルールが対応し、有効になっているかどうかをテストします。
+ - : 投機ルールに対応し、有効になっているかどうかを検査します。
他の値であれば、このメソッドは `false` を返します。
@@ -43,7 +43,7 @@ HTMLScriptElement.supports(type)
## 例
-下記のコードは `HTMLScriptElement.supports()` が定義されているかどうかを調べ、定義されている場合はそれを使用して特定の種類のスクリプトに対応しているかどうかをテストする方法を示しています。
+下記のコードは `HTMLScriptElement.supports()` が定義されているかどうかを調べ、定義されている場合はそれを使用して特定の種類のスクリプトに対応しているかどうかを検査する方法を示しています。
```js
const log = document.getElementById("log");
diff --git a/files/ja/web/api/htmlscriptelement/text/index.md b/files/ja/web/api/htmlscriptelement/text/index.md
new file mode 100644
index 00000000000000..79dd1a27e7cde3
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/text/index.md
@@ -0,0 +1,44 @@
+---
+title: "HTMLScriptElement: text プロパティ"
+short-title: text
+slug: Web/API/HTMLScriptElement/text
+l10n:
+ sourceCommit: 59873ba98645df59048c642f72237f31327a6c3b
+---
+
+{{APIRef("HTML DOM")}}
+
+**`text`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、{{HTMLElement("script")}} 要素内のテキストコンテンツを反映する文字列です。これは {{domxref("Node.textContent")}} プロパティと同じ方法で動作します。
+
+これは {{HTMLElement("script")}} 要素の `text` 属性を反映したものです。
+
+## 値
+
+文字列です。
+
+## 例
+
+```html
+<script id="el" type="text/javascript">
+ const num = 10;
+ console.log(num);
+</script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.text); // 出力: "\n const num = 10;\n console.log(num);\n"
+console.log(el.textContent); // 出力: "\n const num = 10;\n console.log(num);\n"
+
+el.text = "console.log(10);";
+console.log(el.text); // 出力: "console.log(10);"
+console.log(el.textContent); // 出力: "console.log(10);"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmlscriptelement/type/index.md b/files/ja/web/api/htmlscriptelement/type/index.md
new file mode 100644
index 00000000000000..332dc3d0169483
--- /dev/null
+++ b/files/ja/web/api/htmlscriptelement/type/index.md
@@ -0,0 +1,49 @@
+---
+title: "HTMLScriptElement: type プロパティ"
+short-title: type
+slug: Web/API/HTMLScriptElement/type
+l10n:
+ sourceCommit: dadc5c5b6386e011bc296caedadec4287d55277f
+---
+
+{{APIRef("HTML DOM")}}
+
+**`type`** は {{domxref("HTMLScriptElement")}} インターフェイスのプロパティで、スクリプトの種類を反映する文字列です。
+
+これは {{HTMLElement("script")}} 要素の `type` 属性を反映したものです。
+
+## 値
+
+文字列です。このプロパティの値は以下のいずれかです。
+
+- **属性が設定されていない (既定値)、空文字列、JavaScript の MIME タイプのいずれか**
+ - : スクリプトが JavaScript コードを格納した「クラシックスクリプト」であることを示します。
+- `module`
+ - : この値によってコードは JavaScript モジュールとして扱われます。
+- `importmap`
+ - : この値は、要素本体にインポートマップが含まれていることを示します。
+- `speculationrules` {{experimental_inline}}
+ - : この値は、要素の本体に投機ルールが含まれていることを示します。
+- **その他の値**
+ - : 埋め込まれたコンテンツはデータブロックとして扱われ、ブラウザーによって処理されることはありません。
+
+詳しくは {{HTMLElement("script")}} 要素の [`type`](/ja/docs/Web/HTML/Element/script/type) 属性を参照してください。
+
+## 例
+
+```html
+<script id="el" type="text/javascript"></script>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.type); // 出力: "text/javascript"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/htmltimeelement/datetime/index.md b/files/ja/web/api/htmltimeelement/datetime/index.md
index 1a98645259e186..3e40dc818ac6b8 100644
--- a/files/ja/web/api/htmltimeelement/datetime/index.md
+++ b/files/ja/web/api/htmltimeelement/datetime/index.md
@@ -3,7 +3,7 @@ title: "HTMLTimeElement: dateTime プロパティ"
short-title: dateTime
slug: Web/API/HTMLTimeElement/dateTime
l10n:
- sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
+ sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---
{{ APIRef("HTML DOM") }}
diff --git a/files/ja/web/api/inputdevicecapabilities/inputdevicecapabilities/index.md b/files/ja/web/api/inputdevicecapabilities/inputdevicecapabilities/index.md
index 2fe856e23d13b0..d57ac919cb545e 100644
--- a/files/ja/web/api/inputdevicecapabilities/inputdevicecapabilities/index.md
+++ b/files/ja/web/api/inputdevicecapabilities/inputdevicecapabilities/index.md
@@ -1,12 +1,11 @@
---
title: "InputDeviceCapabilities: InputDeviceCapabilities() コンストラクター"
-short-title: InputDeviceCapabilities()
slug: Web/API/InputDeviceCapabilities/InputDeviceCapabilities
l10n:
sourceCommit: eab4066e72d5478de920e4020e5db71214dcffa6
---
-{{SeeCompatTable}}
+{{APIRef("Input Device Capabilities API")}}{{SeeCompatTable}}
`InputDeviceCapabilities()` コンストラクターは新しい {{domxref("InputDeviceCapabilities")}} オブジェクトを作成し、タッチイベントを生成する物理機器に関する情報を提供します。
diff --git a/files/ja/web/api/location/replace/index.md b/files/ja/web/api/location/replace/index.md
index a146ab7a2658e7..2636af87468c04 100644
--- a/files/ja/web/api/location/replace/index.md
+++ b/files/ja/web/api/location/replace/index.md
@@ -1,18 +1,15 @@
---
title: "location: replace() メソッド"
+short-title: replace()
slug: Web/API/Location/replace
l10n:
- sourceCommit: bb3a02f27256e93ada09f81efb5313eeb8f91542
+ sourceCommit: 45aab806cf88fba5e380bdce43927a1559a3f733
---
{{ APIRef("HTML DOM") }}
**`replace()`** は {{DOMXref("Location")}} インターフェイスのメソッドで、現在のリソースを指定された URL のもので置き換えます。 {{domxref("Location.assign","assign()")}} メソッドとの違いは、 `replace()` を使用すると現在のページがセッションの {{domxref("History")}} に保存されないことです。すなわち、ユーザーが［戻る］ボタンを使用して戻ることができなくなります。
-セキュリティ違反のために代入ができない場合、 {{domxref("DOMException")}} が `SECURITY_ERROR` 型で発生します。これは、メソッドを呼び出すスクリプトのオリジンが、 {{domxref("Location")}} オブジェクトによって元々記述されていたページのオリジンと異なる場合に起こります。主に、スクリプトが異なるドメインでホストされている場合に起こります。
-
-指定された URL が有効でない場合、 {{domxref("DOMException")}} が `SYNTAX_ERROR` 型で発生します。
-
## 構文
```js-nolint
@@ -24,6 +21,11 @@ replace(url)
- `url`
- : 文字列で、移動先のページの URL です。
+### 例外
+
+- `SyntaxError` {{domxref("DOMException")}}
+ - : 指定された `url` 引数が有効な URL ではなかった場合。
+
### 返値
なし ({{jsxref("undefined")}})。
diff --git a/files/ja/web/api/media_capture_and_streams_api/index.md b/files/ja/web/api/media_capture_and_streams_api/index.md
index 9b76d596d477ab..4746348b0510ce 100644
--- a/files/ja/web/api/media_capture_and_streams_api/index.md
+++ b/files/ja/web/api/media_capture_and_streams_api/index.md
@@ -58,7 +58,7 @@ l10n:
[getUserMedia() による写真の撮影](/ja/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos) の記事では、[`getUserMedia()`](/ja/docs/Web/API/MediaDevices/getUserMedia) を使用して、 `getUserMedia()` に対応しているコンピューターや携帯電話のカメラにアクセスし、それで写真を撮る方法を示しています。
-## ブラウザー互換性
+## ブラウザーの互換性
{{Compat}}
diff --git a/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md b/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md
index 5bfe9f659fc1cd..72bc95d06ea430 100644
--- a/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md
+++ b/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md
@@ -3,6 +3,8 @@ title: Media Source Extensions のためのアセットのトランスコード
slug: Web/API/Media_Source_Extensions_API/Transcoding_assets_for_MSE
---
+{{DefaultAPISidebar("Media Source Extensions")}}
+
Media Source Extensions を使用する場合、アセットをストリーミングする前に調整する必要がある可能性があります。 この記事では、要件を説明し、アセットを適切にエンコードするために使用できるツールチェーンを示します。
## 入門
diff --git a/files/ja/web/api/mediametadata/album/index.md b/files/ja/web/api/mediametadata/album/index.md
index 1d1cbb02944d20..876ac45e85a3c5 100644
--- a/files/ja/web/api/mediametadata/album/index.md
+++ b/files/ja/web/api/mediametadata/album/index.md
@@ -1,8 +1,9 @@
---
-title: MediaMetadata.album
+title: "MediaMetadata: album プロパティ"
+short-title: album
slug: Web/API/MediaMetadata/album
l10n:
- sourceCommit: bbecba9e7d688493adbdc37fc70e02d87adfe371
+ sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
---
{{APIRef("Media Session API")}}
diff --git a/files/ja/web/api/mediametadata/artist/index.md b/files/ja/web/api/mediametadata/artist/index.md
index c01f6db026ca6f..6c9f95b15ab089 100644
--- a/files/ja/web/api/mediametadata/artist/index.md
+++ b/files/ja/web/api/mediametadata/artist/index.md
@@ -1,8 +1,9 @@
---
-title: MediaMetadata.artist
+title: "MediaMetadata: artist プロパティ"
+short-title: artist
slug: Web/API/MediaMetadata/artist
l10n:
- sourceCommit: bbecba9e7d688493adbdc37fc70e02d87adfe371
+ sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
---
{{APIRef("Media Session API")}}
diff --git a/files/ja/web/api/mediametadata/artwork/index.md b/files/ja/web/api/mediametadata/artwork/index.md
index 6db3f4467e0c72..3bab61effc0b16 100644
--- a/files/ja/web/api/mediametadata/artwork/index.md
+++ b/files/ja/web/api/mediametadata/artwork/index.md
@@ -1,18 +1,26 @@
---
-title: MediaMetadata.artwork
+title: "MediaMetadata: artwork プロパティ"
+short-title: artwork
slug: Web/API/MediaMetadata/artwork
l10n:
- sourceCommit: bbecba9e7d688493adbdc37fc70e02d87adfe371
+ sourceCommit: bade1b235617771b9f6b6e9bd90bd8baaf11a462
---
{{APIRef("Media Session API")}}
-**`artwork`** は {{domxref("MediaMetaData")}} インターフェイスのプロパティで、再生するメディアに関連付けられた画像を表す {{domxref("MediaImage")}} オブジェクトの配列を返します。
+**`artwork`** は {{domxref("MediaMetaData")}} インターフェイスのプロパティで、再生するメディアに関連付けられた画像を表すオブジェクトの配列を返します。
media.
## 値
-{{domxref("MediaImage")}} オブジェクトの配列 ({{jsxref("Array")}}) です。
+オブジェクトの配列 ({{jsxref("Array")}}) で、それぞれに以下のフィールドがあります。
+
+- `src`
+ - : ユーザーエージェントが画像データを取得する URL です。
+- `sizes` {{optional_inline}}
+ - : リソースを複数のサイズで指定し、ユーザーエージェントが単一の画像を変倍しなくても済むようにします。既定では空文字列 (`""`) です。
+- `type` {{optional_inline}}
+ - : ユーザーエージェントが対応していない型の画像を無視するための{{Glossary("MIME type", "MIMEタイプ")}}のヒントです。ただし、ユーザーエージェントは画像をダウンロードした後、MIME タイプスニッフィングを使用してその型を決定することができます。既定では空文字列 (`""`) です。
## 例
@@ -67,7 +75,3 @@ if ("mediaSession" in navigator) {
## ブラウザーの互換性
{{Compat}}
-
-## 関連情報
-
-- {{domxref("MediaImage")}}
diff --git a/files/ja/web/api/mediametadata/mediametadata/index.md b/files/ja/web/api/mediametadata/mediametadata/index.md
index 4ea10773bf66dc..b3a10cf23464ca 100644
--- a/files/ja/web/api/mediametadata/mediametadata/index.md
+++ b/files/ja/web/api/mediametadata/mediametadata/index.md
@@ -1,8 +1,9 @@
---
-title: MediaMetadata()
+title: "MediaMetadata: MediaMetadata() コンストラクター"
+short-title: MediaMetadata()
slug: Web/API/MediaMetadata/MediaMetadata
l10n:
- sourceCommit: bbecba9e7d688493adbdc37fc70e02d87adfe371
+ sourceCommit: 24780b063bdfc244eb9d082b92cedeb14422bf6b
---
{{APIRef("Media Session API")}}
@@ -20,12 +21,22 @@ new MediaMetadata(metadata)
- `metadata` {{optional_inline}}
- - : metadata 引数は次の通りです。
+ - : メタデータ引数は次の通りです。
- - `title`: 再生されるメディアのタイトル。
- - `artist`: 再生されるメディアのアーティスト、グループ、作者の名前。
- - `album`: 再生されるメディアを含むアルバムまたはコレクションの名前。
- - `artwork`: 再生するメディアに関連付けられた画像の配列。
+ - `title` {{optional_inline}}
+ - : 再生されるメディアのタイトル。既定では空文字列 (`""`) です。
+ - `artist` {{optional_inline}}
+ - : 再生されるメディアのアーティスト、グループ、作者の名前。既定では空文字列 (`""`) です。
+ - `album` {{optional_inline}}
+ - : 再生されるメディアを含むアルバムまたはコレクションの名前。既定では空文字列 (`""`) です。
+ - `artwork` {{optional_inline}}
+ - : 再生メディアに関連付けられた画像を表すオブジェクトの配列 ({{jsxref("Array")}}) で、既定値は空配列です。オブジェクトの構造は次の通りです。
+ - `src`
+ - : ユーザーエージェントが画像データを取得する URL。
+ - `sizes` {{optional_inline}}
+ - : ユーザーエージェントが単一の画像を変倍する必要がないように、リソースを複数のサイズで指定します。既定では空文字列 (`""`) です。
+ - `type` {{optional_inline}}
+ - : ユーザーエージェントが対応していない型の画像を無視するための {{Glossary("MIME type", "MIME タイプ")}}のヒント。ただし、ユーザーエージェントは画像をダウンロードした後、MIME タイプスニッフィングを使用してその型を決定することができます。既定では空文字列 (`""`) です。
## 例
diff --git a/files/ja/web/api/mediaquerylist/addlistener/index.md b/files/ja/web/api/mediaquerylist/addlistener/index.md
index 711c3a6aa69684..755ad40f91478a 100644
--- a/files/ja/web/api/mediaquerylist/addlistener/index.md
+++ b/files/ja/web/api/mediaquerylist/addlistener/index.md
@@ -3,7 +3,7 @@ title: "MediaQueryList: addListener() メソッド"
short-title: addListener()
slug: Web/API/MediaQueryList/addListener
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: c51e0599ea09c0e6d035c635db9f48ad1f241490
---
{{APIRef("CSSOM")}}{{Deprecated_Header}}
diff --git a/files/ja/web/api/mediaquerylist/removelistener/index.md b/files/ja/web/api/mediaquerylist/removelistener/index.md
index 8aabea41be45c6..bad0935e14b5fb 100644
--- a/files/ja/web/api/mediaquerylist/removelistener/index.md
+++ b/files/ja/web/api/mediaquerylist/removelistener/index.md
@@ -3,7 +3,7 @@ title: "MediaQueryList: removeListener() メソッド"
short-title: removeListener()
slug: Web/API/MediaQueryList/removeListener
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: c51e0599ea09c0e6d035c635db9f48ad1f241490
---
{{APIRef("CSSOM")}}{{Deprecated_Header}}
diff --git a/files/ja/web/api/mediarecorder/error_event/index.md b/files/ja/web/api/mediarecorder/error_event/index.md
index 9502e843dbbcc4..aa6498b3729425 100644
--- a/files/ja/web/api/mediarecorder/error_event/index.md
+++ b/files/ja/web/api/mediarecorder/error_event/index.md
@@ -1,13 +1,14 @@
---
title: "MediaRecorder: error イベント"
+short-title: error
slug: Web/API/MediaRecorder/error_event
l10n:
- sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219
+ sourceCommit: ce85e3fb7865330e4ac2a6dad25db5cf5d27ea74
---
-{{APIRef}}
+{{APIRef("MediaStream Recording")}}
-{{domxref("MediaRecorder")}} インターフェイスの **`error`** イベントは、エラーが発生したときに発生します。 例えば、記録が許可されていない、またはサポートされていないコーデックを使用して試みられたなどです。
+**`error`** は {{domxref("MediaRecorder")}} インターフェイスのイベントで、エラーが発生したときに発行されます。 例えば、記録が許可されていない、またはサポートされていないコーデックを使用して試みられたなどです。
このイベントはキャンセル不可で、バブリングしません。
@@ -34,27 +35,23 @@ _親インターフェイスである {{domxref("Event")}} からプロパティ
- {{domxref("MediaRecorderErrorEvent.error", "error")}} {{ReadOnlyInline}}
- : {{domxref("DOMException")}} で、発生したエラーに関する情報を保持しています。
-### 値
+## 解説
+
+### トリガー
レコーダーのライフタイム中にエラーが発生したときに呼び出される関数です。発生する可能性のある他の一般的なエラーに加えて、 MediaStream 収録 API を使用する際に特に以下のエラーが発生する可能性があります。どれが発生したか判断するには、 {{domxref("DOMException.name", "MediaRecorderErrorEvent.error.name")}} の値を調べてみてください。
-- `InvalidStateError`
- - : 非アクティブなレコーダーの停止または一時停止、アクティブなレコーダーの開始または再開、あるいは間違った状態での `MediaRecorder` の操作が試みられました。この例外は、削除されたソースに対してリクエストが行われた場合にも発生します。
- `SecurityError`
- : {{domxref("MediaStream")}} が、収録を許可しないように設定されています。例えば、{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して取得したソースで、ユーザーが入力機器を使用する許可を拒否している場合などに該当する可能性があります。
-- `NotSupportedError`
- - : ユーザーの端末で対応していない MIME タイプを使用して `MediaRecorder` をインスタンス化しようとしました。リクエストされたコンテナー、コーデック、プロファイル、そして他にも情報が無効な場合があります。
- `InvalidModificationError`
- : 収録中のストリームのトラック数が変更されました。メディアの記録中にトラックを追加したり削除したりすることはできません。
- `UnknownError`
- : セキュリティに関連しない、他に分類できないエラーが発生しました。
収録が停止し、`MediaRecorder` の {{domxref("MediaRecorder.state", "state")}} は `inactive` となり、最後に残りの受信データで {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} イベントが `MediaRecorder` に送られ、最後に {{domxref("MediaRecorder/stop_event", "stop")}} イベントが送出されました。
-これらのエラーは `MediaRecorder` メソッドを呼び出すことによって直接的に発生することもあれば、録画中に発生する問題によって間接的に発生することもあります。
-
## 例
-[`addEventListener`](/ja/docs/Web/API/EventTarget/addEventListener) を使って `error` イベントを監視します。
+{{domxref("EventTarget.addEventListener", "addEventListener()")}} を使って `error` イベントを待ち受けしてください。
```js
async function record() {
@@ -69,7 +66,7 @@ async function record() {
record();
```
-上と同じですが、 onerror イベントハンドラープロパティを使用します。
+上と同じですが、 `onerror` イベントハンドラープロパティを使用します。
```js
async function record() {
diff --git a/files/ja/web/api/mediarecorder/videobitspersecond/index.md b/files/ja/web/api/mediarecorder/videobitspersecond/index.md
index d2766fee2b965d..48a5f8b0446b33 100644
--- a/files/ja/web/api/mediarecorder/videobitspersecond/index.md
+++ b/files/ja/web/api/mediarecorder/videobitspersecond/index.md
@@ -1,8 +1,9 @@
---
-title: MediaRecorder.videoBitsPerSecond
+title: "MediaRecorder: videoBitsPerSecond プロパティ"
+short-title: videoBitsPerSecond
slug: Web/API/MediaRecorder/videoBitsPerSecond
l10n:
- sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219
+ sourceCommit: 2fcb562ec9bf1bf36d195d9bebb8a27515fa49f4
---
{{APIRef("MediaStream Recording")}}
@@ -15,12 +16,6 @@ l10n:
数値 (unsigned long) です。
-## 例
-
-```js
-// TBD
-```
-
## 仕様書
{{Specifications}}
diff --git a/files/ja/web/api/mediastream/gettracks/index.md b/files/ja/web/api/mediastream/gettracks/index.md
index 45e414f9e01565..448ae317710895 100644
--- a/files/ja/web/api/mediastream/gettracks/index.md
+++ b/files/ja/web/api/mediastream/gettracks/index.md
@@ -3,7 +3,7 @@ title: "MediaStream: getTracks() メソッド"
short-title: getTracks()
slug: Web/API/MediaStream/getTracks
l10n:
- sourceCommit: ac67e6f05d337e52e39f02a978b8c00bc43d583b
+ sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
---
{{APIRef("Media Capture and Streams")}}
diff --git a/files/ja/web/api/navigator/sendbeacon/index.md b/files/ja/web/api/navigator/sendbeacon/index.md
index 635d36f179f212..4b838df380e79c 100644
--- a/files/ja/web/api/navigator/sendbeacon/index.md
+++ b/files/ja/web/api/navigator/sendbeacon/index.md
@@ -3,7 +3,7 @@ title: "Navigator: sendBeacon() メソッド"
short-title: sendBeacon()
slug: Web/API/Navigator/sendBeacon
l10n:
- sourceCommit: 904cdf09c7e328b7a15a6a4db6bc6bd31f969cce
+ sourceCommit: 497bd67ca89834d869f008319cd2b9d941451622
---
{{APIRef("HTML DOM")}}
@@ -12,7 +12,7 @@ l10n:
これはウェブサーバーに分析データを送信するために使用することを意図しており、 {{domxref("XMLHttpRequest", "XMLHttpRequest")}} を使用するような、分析を送信するための古い技術の問題のいくつかを避けています。
-> **メモ:** `POST` 以外のメソッドでリクエストを送信したり、リクエストプロパティを変更したり、サーバのレスポンスにアクセスしたりする必要がある用途では、[`fetch()`](/ja/docs/Web/API/fetch) メソッドに [`keepalive`](/ja/docs/Web/API/fetch#keepalive) を設定したものを使用してください。
+> **メモ:** `POST` 以外のメソッドでリクエストを送信したり、リクエストプロパティを変更したり、サーバーのレスポンスにアクセスしたりする必要がある用途では、[`fetch()`](/ja/docs/Web/API/fetch) メソッドに [`keepalive`](/ja/docs/Web/API/fetch#keepalive) を設定したものを使用してください。
## 構文
diff --git a/files/ja/web/api/response/type/index.md b/files/ja/web/api/response/type/index.md
index ef7b6f17713565..dd8705f55a059f 100644
--- a/files/ja/web/api/response/type/index.md
+++ b/files/ja/web/api/response/type/index.md
@@ -1,11 +1,12 @@
---
-title: Response.type
+title: "Response: type プロパティ"
+short-title: type
slug: Web/API/Response/type
l10n:
- sourceCommit: 16e398809d62247dbadc89ff4024a0ffa4781f0e
+ sourceCommit: 18234f36b082bdbdeb1177880974a3aa29a115ab
---
-{{APIRef("Fetch")}}
+{{APIRef("Fetch API")}}
**`type`** は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、このレスポンスの種類を保持します。
以下のうちの何れかになります。
@@ -14,12 +15,12 @@ l10n:
- `cors`: レスポンスは有効なオリジン間リクエストで受信しました。[特定のヘッダーと本体](https://fetch.spec.whatwg.org/#concept-filtered-response-cors)にアクセスできます。
- `error`: ネットワークエラーです。
エラーを記述した有益な情報は使用できません。
- レスポンスのステータスは 0 で、ヘッダーは空で不変です。
+ このレスポンスの status は 0 で、headers は空で不変です。
これは `Response.error()` から得られる種類のレスポンスです。
-- `opaque`: オリジン間リソースへの "no-cors "リクエストに対するレスポンス。
+- `opaque`: 別オリジンのリソースへの "no-cors" リクエストに対するレスポンス。
[厳しく制限されています](https://fetch.spec.whatwg.org/#concept-filtered-response-opaque)。
-- `opaqueredirect`: フェッチリクエストは `redirect: "manual"` で行われました。
- レスポンスのステータスは 0、ヘッダーは空、本体は空、トレーラーは空です。
+- `opaqueredirect`: フェッチリクエストが `redirect: "manual"` で行われました。
+ このレスポンスの status は 0、headers は空、body は null、トレーラーは空です。
> **メモ:** "error" レスポンスは実際にスクリプトに公開されることはありません。 {{domxref("fetch()")}} に対するそのようなレスポンスは、プロミスを拒否します。
@@ -29,7 +30,7 @@ l10n:
## 例
-[Fetch Response の例](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-response) （[Fetch Response のライブ版](https://mdn.github.io/dom-examples/fetch/fetch-response/) を参照）では、新しい {{domxref("Request")}} オブジェクトを、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して作成し、 JPG のパスを渡します。次に {{domxref("fetch()")}} を使用してこのリクエストをフェッチし、 {{domxref("Response.blob")}} を使用してリクエストから blob を抽出し、 {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL を作成し、これを {{htmlelement("img")}} に表示します。
+[Fetch Response の例](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-response) （[Fetch Response のライブ版](https://mdn.github.io/dom-examples/fetch/fetch-response/) を参照）では、新しい {{domxref("Request")}} オブジェクトを、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して作成し、 JPG のパスを渡します。次に {{domxref("fetch()")}} を使用してこのリクエストをフェッチし、 {{domxref("Response.blob")}} を使用してリクエストから blob を抽出し、 {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を使用してオブジェクト URL を作成し、これを {{htmlelement("img")}} に表示します。
なお、 `fetch()` ブロックの先頭で、レスポンスの `type` 値をコンソールにログ出力していることに注意してください。
@@ -38,13 +39,15 @@ const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");
-fetch(myRequest).then((response) => {
- console.log(response.type); // returns basic by default
- response.blob().then((myBlob) => {
+fetch(myRequest)
+ .then((response) => {
+ console.log("response.type =", response.type); // response.type = 'basic'
+ return response.blob();
+ })
+ .then((myBlob) => {
const objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
-});
```
## 仕様書
diff --git a/files/ja/web/api/svgtextelement/index.md b/files/ja/web/api/svgtextelement/index.md
index 8cfe8832e2e2c0..408cf18ae7030f 100644
--- a/files/ja/web/api/svgtextelement/index.md
+++ b/files/ja/web/api/svgtextelement/index.md
@@ -3,6 +3,8 @@ title: SVGTextElement
slug: Web/API/SVGTextElement
---
+{{APIRef("SVG")}}
+
## SVGTextElement インタフェース
`SVGTextElement` インタフェースは {{SVGElement("text")}} 要素に対応するインタフェースです。
diff --git a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
index 9b385224e249a4..b02ffc9f0b2fa1 100644
--- a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
+++ b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: Basic concepts behind Web Audio API
slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
この記事では、アプリを経由した音声伝達方法の設計をする際に、十分な情報に基づいた決断をする助けとなるよう、 Web Audio API の特徴がいかに働いているか、その背後にある音声理論について説明します。この記事はあなたを熟練のサウンドエンジニアにさせることはできないものの、Web Audio API が動く理由を理解するための十分な背景を提供します。
## オーディオグラフ
diff --git a/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index 3471d6621f3f14..d38393528cb74a 100644
--- a/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: Visualizations with Web Audio API
slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
Web Audio API の最も興味深い機能の 1 つは、オーディオソースから周波数、波形、その他のデータを抽出し、それを使用してビジュアライゼーションを作成する機能です。この記事では、方法について説明し、いくつかの基本的な使用例を示します。
> **メモ:** すべてのコードスニペットの実際の例は、[Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) のデモでご覧いただけます。
diff --git a/files/ja/web/api/web_authentication_api/index.md b/files/ja/web/api/web_authentication_api/index.md
index 2b9f7df916bc68..ac5d2134d3a97d 100644
--- a/files/ja/web/api/web_authentication_api/index.md
+++ b/files/ja/web/api/web_authentication_api/index.md
@@ -148,9 +148,9 @@ var createCredentialDefaultArgs = {
challenge: new Uint8Array([
// サーバーから暗号学的にランダムな値が送られていなければならない
- 0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a,
- 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
- 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
+ 0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17,
+ 0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15,
+ 0x7e, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
]).buffer,
},
};
@@ -162,9 +162,9 @@ var getCredentialDefaultArgs = {
// allowCredentials: [newCredential] // 下記参照
challenge: new Uint8Array([
// サーバーから暗号学的にランダムな値が送られていなければならない
- 0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x67,
- 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26,
- 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
+ 0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15,
+ 0x67, 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f,
+ 0x81, 0x26, 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
]).buffer,
},
};
diff --git a/files/ja/web/api/web_workers_api/transferable_objects/index.md b/files/ja/web/api/web_workers_api/transferable_objects/index.md
index f7978b9d46e2bb..baebd77b99980b 100644
--- a/files/ja/web/api/web_workers_api/transferable_objects/index.md
+++ b/files/ja/web/api/web_workers_api/transferable_objects/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: b4abbb2165f43c02130dbe68833052613fd16e05
---
+{{DefaultAPISidebar("Web Workers API")}}
+
**移譲可能オブジェクト** (Transferable objects) は、あるコンテキストから別のコンテキストへ _移譲_ することができるリソースを自分自身で所有するオブジェクトで、そのリソースが一度に 1 つのコンテキストでのみ利用できることを保証するものです。
移譲が終わると、元のオブジェクトは使えなくなります。移譲されたリソースをもう指しておらず、オブジェクトの読み書きをしようとすると例外が発生します。
diff --git a/files/ja/web/api/window/atob/index.md b/files/ja/web/api/window/atob/index.md
new file mode 100644
index 00000000000000..b2c386885dc6e5
--- /dev/null
+++ b/files/ja/web/api/window/atob/index.md
@@ -0,0 +1,55 @@
+---
+title: "Window: atob() メソッド"
+short-title: atob()
+slug: Web/API/Window/atob
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+---
+
+{{APIRef("HTML DOM")}}
+
+**`atob()`** は {{domxref("Window")}} インターフェイスのメソッドで、 {{glossary("Base64")}} エンコーディングでエンコードされたデータの文字列をデコードします。 {{domxref("Window.btoa()")}} メソッドを使用して、通信に問題が発生する可能性のあるデータをエンコードして送信し、送信した後に `atob()` メソッドを使用して再度デコードすることができます。例えば、{{Glossary("ASCII")}} の 0 から 31 までのコードような制御文字をエンコードして送信し、デコードすることができます。
+
+任意の Unicode 文字列で使用する場合は、用語集の {{Glossary("Base64")}} の項目の 「Unicode 問題」を参照してください。
+
+## 構文
+
+```js-nolint
+atob(encodedData)
+```
+
+### 引数
+
+- `encodedData`
+ - : base64 でエンコードされたデータが入っているバイナリー文字列（すなわち、文字列のそれぞれの文字がバイナリーデータの各バイトとして扱われる文字列）です。
+
+### 返値
+
+`encodedData` をデコードしたデータを含む ASCII 文字列です。
+
+### 例外
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+ - : `encodedData` が妥当な base64 ではない場合に発行されます。
+
+## 例
+
+```js
+const encodedData = window.btoa("Hello, world"); // 文字列をエンコード
+const decodedData = window.atob(encodedData); // 文字列をデコード
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`atob` のポリフィル](https://github.com/zloirock/core-js#base64-utility-methods) は [`core-js`](https://github.com/zloirock/core-js) にあります
+- [`data` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- {{domxref("WorkerGlobalScope.atob()")}}: 同じメソッドですが、ワーカーのスコープのものです。
+- {{domxref("Window.btoa()")}}
diff --git a/files/ja/web/api/window/btoa/index.md b/files/ja/web/api/window/btoa/index.md
new file mode 100644
index 00000000000000..b18a7d97af7d2c
--- /dev/null
+++ b/files/ja/web/api/window/btoa/index.md
@@ -0,0 +1,74 @@
+---
+title: "Window: btoa() メソッド"
+short-title: btoa()
+slug: Web/API/Window/btoa
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+---
+
+{{APIRef("HTML DOM")}}
+
+**`btoa()`** は {{domxref("Window")}} インターフェイスのメソッドで、 {{glossary("Base64")}} でエンコードされた {{Glossary("ASCII")}} 文字列をバイナリー文字列（すなわち、文字列のそれぞれの文字がバイナリーデータの各バイトとして扱われる文字列）から生成します。
+
+このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後で {{domxref("Window.atob()")}} メソッドを使用して再度デコードすることができます。
+例えば ASCII で 0 から 31 の値のような制御文字をエンコードすることもできます。
+
+## 構文
+
+```js-nolint
+btoa(stringToEncode)
+```
+
+### 引数
+
+- `stringToEncode`
+ - : エンコードするバイナリー文字列です。
+
+### 返値
+
+`stringToEncode` の Base64 表現である ASCII 文字列です。
+
+### 例外
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+ - : 文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode 文字列」を参照してください。
+
+## 例
+
+```js
+const encodedData = window.btoa("Hello, world"); // 文字列をエンコード
+const decodedData = window.atob(encodedData); // 文字列をデコード
+```
+
+## Unicode 文字列
+
+Base64 は、設計上、バイナリーデータを入力として期待します。JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を `btoa()` に渡した場合、これはバイナリーデータとはみなされないため、エラーが発生します。
+
+```js
+const ok = "a";
+console.log(ok.codePointAt(0).toString(16)); // 61: 長さ < 1 バイト
+
+const notOK = "✓";
+console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ > 1 バイト
+
+console.log(window.btoa(ok)); // YQ==
+console.log(window.btoa(notOK)); // エラー
+```
+
+任意の Unicode テキストを扱うときにこの制限を回避する作業方法については、{{Glossary("Base64")}} の用語集の項目の「Unicode 問題」を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`btoa` のポリフィル](https://github.com/zloirock/core-js#base64-utility-methods) は [`core-js`](https://github.com/zloirock/core-js) で利用できます。
+- [`data` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- {{domxref("WorkerGlobalScope.btoa()")}}: 同様のメソッドですが、ワーカースコープのものです。
+- {{domxref("Window.atob()")}}
+- {{Glossary("Base64")}}
diff --git a/files/ja/web/api/window/caches/index.md b/files/ja/web/api/window/caches/index.md
index e274f4711ed61e..83b8f43f6028de 100644
--- a/files/ja/web/api/window/caches/index.md
+++ b/files/ja/web/api/window/caches/index.md
@@ -1,44 +1,27 @@
---
-title: caches
+title: "Window: caches プロパティ"
+short-title: caches
slug: Web/API/Window/caches
-original_slug: Web/API/caches
+l10n:
+ sourceCommit: 2e327846966abb10de0b1c9bedc584caab71ec97
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{securecontext_header}}
-グローバルの **`caches`** 読み取り専用プロパティは、現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。
+**`caches`** は {{domxref("Window")}} インターフェイスの読み取り専用プロパティで、現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。
このオブジェクトにより、オフライン利用のために資産 (assets) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。
-{{securecontext_header}}
-
## 値
{{domxref("CacheStorage")}} オブジェクト。
## 例
-次の例では、資産をオフラインで利用できるようにするために、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)のコンテキストでキャッシュを使う方法を示しています。
+次の例は、ウィンドウがキャッシュされたデータを取得する方法を示しています。
```js
-this.addEventListener("install", (event) => {
- event.waitUntil(
- caches
- .open("v1")
- .then((cache) =>
- cache.addAll([
- "/",
- "/index.html",
- "/style.css",
- "/app.js",
- "/image-list.js",
- "/star-wars-logo.jpg",
- "/gallery/",
- "/gallery/bountyHunters.jpg",
- "/gallery/myLittleVader.jpg",
- "/gallery/snowTroopers.jpg",
- ]),
- ),
- );
+window.caches.open("v1").then((cache) => {
+ return cache.match("/list");
});
```
@@ -53,6 +36,5 @@ this.addEventListener("install", (event) => {
## 関連情報
- [サービスワーカー](/ja/docs/Web/API/Service_Worker_API)
-- [ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)
- {{domxref("CacheStorage")}}
- {{domxref("Cache")}}
diff --git a/files/ja/web/api/window/closed/index.md b/files/ja/web/api/window/closed/index.md
index a728f188715deb..178abdbade80c7 100644
--- a/files/ja/web/api/window/closed/index.md
+++ b/files/ja/web/api/window/closed/index.md
@@ -1,32 +1,27 @@
---
-title: window.closed
+title: "Window: closed プロパティ"
+short-title: closed
slug: Web/API/Window/closed
+l10n:
+ sourceCommit: 94ef07a7b073c2663cbace0667bdb717a40bfa28
---
-{{ApiRef}}
+{{APIRef}}
-## 概要
+**`Window.closed`** は読み取り専用プロパティで、対象ウィンドウが閉じられているかどうかを示します。
-この読取専用プロパティは、対象ウィンドウが閉じられているかどうかを示します。
+## 値
-## 構文
+論理値です。取りうる値は次の通りです。
-```
-var isClosed = windowRef.closed;
-```
-
-- `isClosed`
-
- - : 真偽値。次の何れかの値を取り得ます :
-
- - `true`: ウィンドウが閉じられている事を示す
- - `false`: ウィンドウが開いている事を示す
+- `true`: ウィンドウが閉じられています。
+- `false`: ウィンドウが開いています。
## 例
### ポップアップからウィンドウの URL を変化させる
-次の例は、どのようにポップアップウィンドウでそれを開いたウィンドウの URL を変化させるかというデモです。URL を変化させる前に、 {{domxref("window.opener")}} プロパティを用いて、現在のウィンドウがそのポップアップを開いたウィンドウであるどうか、そして、その開いた側のウィンドウが閉じられていないかをチェックします。:
+次の例は、どのようにポップアップウィンドウでそれを開いたウィンドウの URL を変化させるかというデモです。URL を変化させる前に、 {{domxref("window.opener")}} プロパティを用いて、現在のウィンドウがそのポップアップを開いたウィンドウであるどうか、そして、その開いた側のウィンドウが閉じられていないかをチェックします。
```js
// 開いた側のウィンドウが存在するか、かつ、閉じられていないかを調べます。
@@ -39,10 +34,10 @@ if (window.opener && !window.opener.closed) {
### 以前に開いたポップアップを更新する
-この例では、関数 `refreshPopupWindow()` が ポップアップのデータを更新するために ポップアップの location オブジェクト中の `reload` メソッドを呼び出します。ポップアップがまだ開かれていない場合、または、ユーザがそれを閉じてしまっている場合は、新しいウィンドウが開かれます。
+この例では、関数 `refreshPopupWindow()` が ポップアップのデータを更新するために ポップアップの location オブジェクト中の `reload` メソッドを呼び出します。ポップアップがまだ開かれていない場合、または、ユーザーがそれを閉じてしまっている場合は、新しいウィンドウが開かれます。
```js
-var popupWindow = null;
+let popupWindow = null;
function refreshPopupWindow() {
if (popupWindow && !popupWindow.closed) {
@@ -55,10 +50,10 @@ function refreshPopupWindow() {
}
```
-## 仕様
+## 仕様書
-DOM Level 0。 `window.closed` は、W3C の仕様や技術勧告に含まれるものではありません。
+{{Specifications}}
-## 関連情報
+## ブラウザーの互換性
-- [MSDN window.closed](http://msdn.microsoft.com/ja-jp/library/ms533574.aspx)
+{{Compat}}
diff --git a/files/ja/web/api/window/console/index.md b/files/ja/web/api/window/console/index.md
index 6734b845bd4fbd..185b15c5da59e5 100644
--- a/files/ja/web/api/window/console/index.md
+++ b/files/ja/web/api/window/console/index.md
@@ -1,17 +1,14 @@
---
-title: Window.console
+title: "Window: console プロパティ"
+short-title: console
slug: Web/API/Window/console
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
---
-{{ APIRef }}
+{{APIRef}}
-読み取り専用プロパティの **`Window.console`** は、ブラウザーのコンソールへ情報を出力するメソッドを提供する{{domxref("Console")}}オブジェクトへの参照を返します。これらのメソッドで出力される情報はデバッグ目的のものであり、ユーザーへ情報を提示するために使われるべきではありません。
-
-## 構文
-
-```js
-var consoleObj = window.console;
-```
+**`Window.console`** プロパティは、ブラウザーのコンソールへ情報を出力するメソッドを提供する {{domxref("console")}} オブジェクトへの参照を返します。これらのメソッドで出力される情報はデバッグ目的のものであり、ユーザーへ情報を提示するために使われるべきではありません。
## 例
diff --git a/files/ja/web/api/window/cookiestore/index.md b/files/ja/web/api/window/cookiestore/index.md
new file mode 100644
index 00000000000000..c02ea551ad7a0d
--- /dev/null
+++ b/files/ja/web/api/window/cookiestore/index.md
@@ -0,0 +1,23 @@
+---
+title: "Window: cookieStore プロパティ"
+short-title: cookieStore
+slug: Web/API/Window/cookieStore
+l10n:
+ sourceCommit: fb6d05866d57baf66770dfa30bc88b7b967cba9e
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+
+**`cookieStore`** は {{domxref("Window")}} インターフェイスの読み取り専用プロパティで、現在の文書コンテキストの {{domxref("CookieStore")}} オブジェクトへの参照を返します。これは、[Cookie ストアー API](/ja/docs/Web/API/Cookie_Store_API) のエントリーポイントです。
+
+## 値
+
+{{domxref("CookieStore")}} オブジェクトインスタンスです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/window/credentialless/index.md b/files/ja/web/api/window/credentialless/index.md
new file mode 100644
index 00000000000000..117e13a959a31a
--- /dev/null
+++ b/files/ja/web/api/window/credentialless/index.md
@@ -0,0 +1,46 @@
+---
+title: "Window: credentialless プロパティ"
+short-title: credentialless
+slug: Web/API/Window/credentialless
+l10n:
+ sourceCommit: fc763b932ad89104bcf06e3886d014a8485ad7d8
+---
+
+{{APIRef}}{{SeeCompatTable}}
+
+**`window.credentialless`** は読み取り専用プロパティで、現在の文書が信頼性のない {{htmlelement("iframe")}} 内に読み込まれたかどうか、つまり新しい、一時的なコンテキストで読み込まれたかを示す論理値を返します。
+
+このコンテキストは、そのオリジンに関連するネットワーク、クッキー、ストレージデータにアクセスすることはありません。それは最上位の文書の寿命に依存する新しいコンテキストを使用します。返ると、{{httpheader("Cross-Origin-Embedder-Policy")}} (COEP) 埋め込みルールが解除され、COEP を設定した文書はそうでないサードパーティ文書を埋め込むことができます。
+
+より詳しい説明は、[無信頼の iframe](/ja/docs/Web/Security/IFrame_credentialless) を参照してください。
+
+## 値
+
+論理値です。`true` の値は文書が無信頼の `<iframe>` 内に読み込まれたことを示し、`false` は読み込まれなかったことを示します。
+
+## 例
+
+次のようにして、無信頼の `<iframe>` を指定することができます。
+
+```html
+<iframe
+ src="https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)"
+ title="Spectre vulnerability Wikipedia page"
+ width="960"
+ height="600"
+ credentialless></iframe>
+```
+
+対応しているブラウザー内の `<iframe>` に読み込まれた文書が以下の行を実行した場合、`true` を返します。
+
+```js
+console.log(window.credentialless);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/window/crossoriginisolated/index.md b/files/ja/web/api/window/crossoriginisolated/index.md
new file mode 100644
index 00000000000000..a34b267b33b895
--- /dev/null
+++ b/files/ja/web/api/window/crossoriginisolated/index.md
@@ -0,0 +1,43 @@
+---
+title: "Window: crossOriginIsolated プロパティ"
+short-title: crossOriginIsolated
+slug: Web/API/Window/crossOriginIsolated
+l10n:
+ sourceCommit: 45fdc5d8cce894088d4c270b8f160841ecb11a2a
+---
+
+{{APIRef("DOM")}}
+
+**`crossOriginIsolated`** は {{domxref("Window")}} インターフェイスの読み取り専用プロパティで、ウェブサイトがオリジン間分離状態にあるかどうかを示す論理値を返します。この状態はサイドチャネル攻撃のリスクを軽減し、いくつかの機能をアンロックします。
+
+- {{JSxRef("SharedArrayBuffer")}} を作成し、{{DOMxRef("Window.postMessage()")}} または {{DOMxRef("MessagePort.postMessage()")}} を呼び出して送信することができます。
+- {{DOMxRef("Performance.now()")}} の方が精度が高いです。
+- {{DOMxRef("Performance.measureUserAgentSpecificMemory()")}} にアクセスすることができます。
+
+{{HTTPHeader("Cross-Origin-Opener-Policy")}} レスポンスヘッダーの値が `same-origin` で、{{HTTPHeader("Cross-Origin-Embedder-Policy")}} ヘッダーの値が `require-corp` または `credentialless` である場合、ウェブサイトはオリジン間分離状態になります。
+
+## 値
+
+論理値です。
+
+## 例
+
+```js
+const myWorker = new Worker("worker.js");
+
+if (window.crossOriginIsolated) {
+ const buffer = new SharedArrayBuffer(16);
+ myWorker.postMessage(buffer);
+} else {
+ const buffer = new ArrayBuffer(16);
+ myWorker.postMessage(buffer);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/window/crypto/index.md b/files/ja/web/api/window/crypto/index.md
index 30851aab51a7b0..535b04ecd59d9f 100644
--- a/files/ja/web/api/window/crypto/index.md
+++ b/files/ja/web/api/window/crypto/index.md
@@ -1,12 +1,14 @@
---
-title: self.crypto
+title: "Window: crypto プロパティ"
+short-title: crypto
slug: Web/API/Window/crypto
-original_slug: Web/API/crypto_property
+l10n:
+ sourceCommit: e897fbfbefff7a7178af36a57944821dbc49318f
---
-{{APIRef}}
+{{APIRef("Web Crypto API")}}
-グローバルの **`crypto`** プロパティは読み取り専用で、グローバルオブジェクトに関連付けられた {{domxref("Crypto")}} オブジェクトを返します。このオブジェクトは、ウェブページが暗号に関連したサービスにアクセスできるようにします。
+**`crypto`** は {{domxref("Window")}} インターフェイスの読み取り専用プロパティで、グローバルオブジェクトに関連付けられた {{domxref("Crypto")}} オブジェクトを返します。このオブジェクトは、ウェブページが暗号に関連したサービスにアクセスできるようにします。
このプロパティ自体は読み取り専用ですが、そのメソッドすべて（加えて子オブジェクトのメソッドと {{domxref("SubtleCrypto")}}）は読み取り専用ではありません。そのため{{glossary("polyfill", "ポリフィル")}}による攻撃には脆弱です。
@@ -23,15 +25,12 @@ original_slug: Web/API/crypto_property
### JavaScript
```js
-genRandomNumbers = function getRandomNumbers() {
+globalThis.genRandomNumbers = () => {
const array = new Uint32Array(10);
- crypto.getRandomValues(array);
+ globalThis.crypto.getRandomValues(array);
const randText = document.getElementById("myRandText");
- randText.textContent = "乱数: ";
- for (let i = 0; i < array.length; i++) {
- randText.textContent += array[i] + " ";
- }
+ randText.textContent = `乱数: ${array.join(" ")}`;
};
```
@@ -44,7 +43,7 @@ genRandomNumbers = function getRandomNumbers() {
### 結果
-{{EmbedLiveSample('Example')}}
+{{EmbedLiveSample('Examples')}}
## 仕様書
@@ -56,5 +55,5 @@ genRandomNumbers = function getRandomNumbers() {
## 関連情報
-- {{domxref("Window")}} グローバルオブジェクト
- {{domxref("Crypto")}} インターフェイス
+- {{domxref("WorkerGlobalScope.crypto")}}
diff --git a/files/ja/web/api/window/customelements/index.md b/files/ja/web/api/window/customelements/index.md
index cc775740a2f246..e0499bcffa39d9 100644
--- a/files/ja/web/api/window/customelements/index.md
+++ b/files/ja/web/api/window/customelements/index.md
@@ -1,9 +1,12 @@
---
-title: Window.customElements
+title: "Window: customElements プロパティ"
+short-title: customElements
slug: Web/API/Window/customElements
+l10n:
+ sourceCommit: ce10da0e9d23d241b175d8d68bf93507734b7c48
---
-{{APIRef}}
+{{APIRef("Web Components")}}
**`customElements`** は {{domxref("Window")}} インターフェイスの読み取り専用プロパティで、 {{domxref("CustomElementRegistry")}} オブジェクトへのリファレンスを返します。これにより、新しい[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)を登録したり、以前に登録したカスタム要素に関する情報を取得したりすることができます。
diff --git a/files/ja/web/api/window/devicepixelratio/index.md b/files/ja/web/api/window/devicepixelratio/index.md
index cd7b6d2ff22c28..b4584f44d1ddfc 100644
--- a/files/ja/web/api/window/devicepixelratio/index.md
+++ b/files/ja/web/api/window/devicepixelratio/index.md
@@ -1,11 +1,14 @@
---
-title: Window.devicePixelRatio
+title: "Window: devicePixelRatio プロパティ"
+short-title: devicePixelRatio
slug: Web/API/Window/devicePixelRatio
+l10n:
+ sourceCommit: ca9bb43c4a253d0bba3d355a7d243e1f2b6fe8ef
---
{{APIRef}}
-**`devicePixelRatio`** は {{domxref("Window")}} インターフェイスのプロパティで、現在のディスプレイ機器における CSS 解像度と物理解像度の比を返します。
+**`devicePixelRatio`** は {{domxref("Window")}} インターフェイスのプロパティで、現在のディスプレイ機器における CSS ピクセルの解像度と物理ピクセルの解像度の比を返します。
これは 1 物理ピクセルの大きさに対する 1 CSS ピクセルの大きさの比率と考えることもできます。もっと簡単に言うと、 1 つの CSS ピクセルが実際にはいくつの物理ピクセルで表示されるかという値です。
@@ -15,7 +18,9 @@ slug: Web/API/Window/devicePixelRatio
### 値
-倍精度浮動小数点の値であり、 CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し、2 であることは、HiDPI や Retina のディスプレイであると考えられます。それ以外の値が返されることもあり、それは一般的でない低解像度のディスプレイの場合や、より考えられるのはスクリーンが標準的な 96 または 76 DPI の解像度の単純な 2 倍よりも高いピクセル密度を持つ場合です。
+倍精度浮動小数点の値であり、 CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し、2 であることは、HiDPI や Retina のディスプレイであると考えられます。
+
+他の値が返される場合もあります。解像度が異常に低い画面の場合もあるし、標準である 96DPI の 2 倍よりも高いピクセル密度を持つ画面の場合に返される値が多いかもしれません。現行のモバイル端末の画面は、物理的なサイズが小さくても解像度が高いため、多くの場合 `devicePixelRatio` の値は 2 より大きくなります。
## 例
@@ -40,7 +45,7 @@ const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;
-// メモリ上における実際のサイズを設定（ピクセル密度の分だけ倍増させます）。
+// メモリー上における実際のサイズを設定（ピクセル密度の分だけ倍増させます）。
const scale = window.devicePixelRatio; // Retina でこの値を 1 にするとぼやけた canvas になります
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
@@ -62,55 +67,24 @@ const textString = "I love MDN";
ctx.fillText(textString, x, y);
```
-[](devicepixelration_diff.jpg)
+[](devicepixelratio_diff.png)
### 画面解像度や拡大率の変化の監視
-この例では、`devicePixelRatio` の値をチェックして必要な変化に対処できるよう、メディアクエリーを設定して機器の解像度がいつ変化するかを監視します。
-
-#### JavaScript
-
-この JavaScript のコードは、機器の解像度を監視するメディアクエリーを作り、`devicePixelRatio` の値が変化したときはいつでもそれをチェックします。
-
-```js
-let pixelRatioBox = document.querySelector(".pixel-ratio");
-
-const updatePixelRatio = () => {
- let pr = window.devicePixelRatio;
- let prString = (pr * 100).toFixed(0);
- pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
- matchMedia(`(resolution: ${pr}dppx)`).addEventListener(
- "change",
- updatePixelRatio,
- { once: true },
- );
-};
-
-updatePixelRatio();
-```
-
-文字列 `mqString` は、メディアクエリーそのものになるように作ります。このメディアクエリーは、`(resolution: 1dppx)` (標準的なディスプレイの場合)、または `(resolution: 2dppx)` (HiDPI / Retina ディスプレイの場合) のような内容で始まり、現在のディスプレイ解像度のピクセルあたりのドット数が特定の数であるかをチェックします。
-
-関数 `updatePixelRatio()` は、現在の `devicePixelRatio` の値を取得し、`pixelRatioBox` 要素の {{domxref("HTMLElement.innerText", "innerText")}} に、その比率をパーセント値と小数第 2 位までの未加工の 10 進数の値の両方で表示する文字列を設定します。
-
-そして、 `updatePixelRatio()` 関数が一度呼び出されて開始値を表示した後、 {{domxref("Window.matchMedia", "matchMedia()")}} を用いてメディアクエリーを作成し、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} が呼び出されて `updatePixelRatio()` が `change` イベントに対するハンドラーとして設定されます。
+この例では、メディアクエリーを設定し、端末の解像度が変わったときに新しい解像度をログ出力するように監視します。
#### HTML
-この HTML は、説明文を含むボックスと、現在のピクセル比率情報を表示する `pixel-ratio` ボックスを作成します。
-
```html
-<div class="container">
- <div class="inner-container">
- <p>
- この使用例により、ページをズームまたはズームアウトすること
- (または異なる表示倍率の画面にページを移動させること) の
- <code>Window.devicePixelRatio</code> プロパティに与える影響がわかります。
- どのようなことが起こるか、試してみましょう！
- </p>
- </div>
- <div class="pixel-ratio"></div>
+<div id="container">
+ <p>
+ この例により、ページをズームインまたはズームアウトすること
+ (または異なる表示倍率の画面にページを移動させること) の
+ <code>devicePixelRatio</code> プロパティに与える影響がわかります。
+ どのようなことが起こるか、試してみましょう！
+ </p>
</div>
+<div id="output"></div>
```
#### CSS
@@ -122,36 +96,48 @@ body {
sans-serif;
}
-.container {
- top: 2em;
- width: 22em;
- height: 14em;
+#container {
border: 2px solid #22d;
- margin: 0 auto;
- padding: 0;
+ margin: 1rem auto;
+ padding: 1rem;
background-color: #a9f;
}
+```
-.inner-container {
- padding: 1em 2em;
- text-align: justify;
- text-justify: auto;
-}
+#### JavaScript
-.pixel-ratio {
- position: relative;
- margin: auto;
- height: 1.2em;
- text-align: right;
- bottom: 0;
- right: 1em;
- font-weight: bold;
-}
+文字列 `mqString` には、現在のディスプレイ解像度が `px` あたりの機器のドット数に一致するかどうかを調べるメディアクエリーが設定されます。
+
+`media` 変数は {{domxref("MediaQueryList")}} オブジェクトで、メディアクエリー文字列で初期化されます。文書に対して `mqString` を実行した結果が変更されると、`media` オブジェクトの `change` イベントが発生し、新しい解像度がログ出力されます。
+
+解決方法が変更されるたびに、例えば新しい解決方法に基づいて新しいメディアクエリーを作成し、新しい `MediaQueryList` インスタンスを作成しなければならないことに注意してください。
+
+```js
+let remove = null;
+const output = document.querySelector("#output");
+
+const updatePixelRatio = () => {
+ if (remove != null) {
+ remove();
+ }
+ const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+ const media = matchMedia(mqString);
+ media.addEventListener("change", updatePixelRatio);
+ remove = () => {
+ media.removeEventListener("change", updatePixelRatio);
+ };
+
+ output.textContent = `devicePixelRatio: ${window.devicePixelRatio}`;
+};
+
+updatePixelRatio();
```
#### 結果
-{{EmbedLiveSample("Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}
+この例をテストするために、ページを拡大したり縮小したりしてみて、`devicePixelRatio`のログ出力する値の違いに注意してください。
+
+{{EmbedLiveSample("Monitoring_screen_resolution_or_zoom_level_changes", "100%", 300)}}
## 仕様書
@@ -163,7 +149,7 @@ body {
## 関連情報
-- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries)
-- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)
+- [メディアクエリー](/ja/docs/Web/CSS/CSS_media_queries)
+- [メディアクエリーの使用](/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [CSS の `resolution` メディア特性](/ja/docs/Web/CSS/@media/resolution)
- {{cssxref("image-resolution")}} プロパティ
diff --git a/files/ja/web/api/window/document/index.md b/files/ja/web/api/window/document/index.md
index 356f42473f8f9f..5b7f8df05a5c26 100644
--- a/files/ja/web/api/window/document/index.md
+++ b/files/ja/web/api/window/document/index.md
@@ -1,11 +1,18 @@
---
-title: Window.document
+title: "Window: document プロパティ"
+short-title: document
slug: Web/API/Window/document
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
---
{{APIRef}}
-**`window.document`** は、ウィンドウに含まれている[文書](/ja/docs/Web/API/document)への参照を返します。
+**`window.document`** は、ウィンドウに含まれている[文書](/ja/docs/Web/API/Document)への参照を返します。
+
+## 値
+
+[document](/ja/docs/Web/API/Document) オブジェクトです。
## 例
diff --git a/files/ja/web/api/window/documentpictureinpicture/index.md b/files/ja/web/api/window/documentpictureinpicture/index.md
new file mode 100644
index 00000000000000..47be28d375f694
--- /dev/null
+++ b/files/ja/web/api/window/documentpictureinpicture/index.md
@@ -0,0 +1,44 @@
+---
+title: "Window: documentPictureInPicture プロパティ"
+short-title: documentPictureInPicture
+slug: Web/API/Window/documentPictureInPicture
+l10n:
+ sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e
+---
+
+{{APIRef}}{{seecompattable}}{{SecureContext_Header}}
+
+**`documentPictureInPicture`** は {{domxref("Window")}} インターフェイスの読み取り専用プロパティで、現在の文書コンテキストの {{domxref("DocumentPictureInPicture")}} オブジェクトへの参照を返します。
+
+## 値
+
+{{domxref("DocumentPictureInPicture")}} オブジェクトインスタンスです。
+
+## 例
+
+```js
+const videoPlayer = document.getElementById("player");
+
+// ...
+
+// Open a Picture-in-Picture window.
+await window.documentPictureInPicture.requestWindow({
+ width: videoPlayer.clientWidth,
+ height: videoPlayer.clientHeight,
+});
+
+// ...
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Document Picture-in-Picture API", "文書ピクチャインピクチャ API", "", "nocode")}}
+- [文書ピクチャインピクチャ API の使用](/ja/docs/Web/API/Document_Picture-in-Picture_API/Using)
diff --git a/files/ja/web/api/window/index.md b/files/ja/web/api/window/index.md
index a07f428bad86d2..68ae89104f4f6a 100644
--- a/files/ja/web/api/window/index.md
+++ b/files/ja/web/api/window/index.md
@@ -1,6 +1,8 @@
---
title: Window
slug: Web/API/Window
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
---
{{APIRef("DOM")}}
@@ -17,191 +19,194 @@ slug: Web/API/Window
{{InheritanceDiagram}}
-## コンストラクター
-
-[DOM インターフェイス](/ja/docs/Web/API/Document_Object_Model)もご覧ください。
-
-- {{domxref("DOMParser")}}
- - : `DOMParser` は文字列で保存された XML や HTML ソースを DOM [Document](/ja/docs/Web/API/Document) に解釈することができます。 `DOMParser` は [DOM Parsing and Serialization](https://w3c.github.io/DOM-Parsing/) で定められています。
-- {{domxref("Image")}}
- - : {{domxref("HTMLImageElement")}} を生成します。
-- {{domxref("Option")}}
- - : {{domxref("HTMLOptionElement")}} を生成します。
-- {{domxref("StaticRange")}} {{experimental_inline}} {{readonlyinline}}
- - : {{domxref('StaticRange')}} オブジェクトを作成する {{domxref('StaticRange.StaticRange','StaticRange()')}} コンストラクターを返します。
-- {{domxref("Worker")}}
- - : [ウェブワーカー](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)を生成します。
-- {{domxref("XMLSerializer")}}
- - : DOM ツリーを XML または HTML ソースに変換します。
-
-## プロパティ
+## インスタンスプロパティ
_このインターフェイスは {{domxref("EventTarget")}} インターフェイスからプロパティを継承しています。_
オブジェクトであるプロパティ（例えば、組み込み要素のプロトタイプを上書きするためのもの）は、後述の個別セクションに記載しています。
-- {{domxref("Window.navigator", "Window.clientInformation")}} {{readOnlyInline}}
+- {{domxref("Window.caches")}} {{ReadOnlyInline}}
+ - : 現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトはオフラインで使用する資産を格納したり、リクエストに対して独自のレスポンスを生成したりするような機能が利用できます。
+- {{domxref("Window.navigator", "Window.clientInformation")}} {{ReadOnlyInline}}
- : {{domxref("Window.navigator")}} の別名です。
-- {{domxref("Window.closed")}} {{readOnlyInline}}
+- {{domxref("Window.closed")}} {{ReadOnlyInline}}
- : このプロパティは、現在のウィンドウが閉じているかどうかを示します。
- {{domxref("Window.console")}} {{ReadOnlyInline}}
- : ブラウザーのデバッグコンソールへアクセスするための console オブジェクトへの参照を返します。
+- {{domxref("Window.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}} {{SecureContext_Inline}}
+ - : 現在の文書コンテキストの {{domxref("CookieStore")}} オブジェクトへの参照を返します。
+- {{domxref("Window.credentialless")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : 現在の文書が 無信頼の {{htmlelement("iframe")}} 内で読み込まれたかどうかを示す論理値を返します。詳しくは[無信頼の iframe](/ja/docs/Web/Security/IFrame_credentialless) を参照してください。
+- {{domxref("Window.crossOriginIsolated")}} {{ReadOnlyInline}}
+ - : ウェブサイトがオリジン間分離状態にあるかどうかを示す論理値を返します。
+- {{domxref("Window.crypto")}} {{ReadOnlyInline}}
+ - : グローバルオブジェクトに関連付けられた {{domxref("Crypto")}} オブジェクトを返します。
- {{domxref("Window.customElements")}} {{ReadOnlyInline}}
- : {{domxref("CustomElementRegistry")}} オブジェクトへの参照を返します。これは新しい[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)の登録や、以前に登録したカスタム要素の情報を取得するために使用できます。
-- {{domxref("crypto_property", "Window.crypto")}} {{readOnlyInline}}
- - : ブラウザーの crypto オブジェクトを返します。
- {{domxref("Window.devicePixelRatio")}} {{ReadOnlyInline}}
- : 現在のディスプレイの、物理ピクセルと端末非依存ピクセルの比率を返します。
- {{domxref("Window.document")}} {{ReadOnlyInline}}
- : 指定ウィンドウにある文書への参照を返します。
-- {{domxref("Window.event")}} {{deprecated_inline}} {{readOnlyInline}}
- - : **現在のイベント**を返します。これは現在 JavaScript のコードのコンテキストが処理しているイベントです。また、現在処理しているイベントがない場合は `undefined` を返します。可能な限り、イベントハンドラーに直接渡した {{domxref("Event")}} オブジェクトを代わりに使用してください。
-- {{domxref("Window.external")}} {{deprecated_inline}} {{readOnlyInline}}
- - : 外部の検索プロバイダーをブラウザーに追加するための関数を持つオブジェクトを返します。
-- {{domxref("Window.frameElement")}} {{readOnlyInline}}
+- {{domxref("Window.documentPictureInPicture")}} {{ReadOnlyInline}} {{experimental_inline}} {{SecureContext_Inline}}
+ - : 現在の文書コンテキストの[ピクチャインピクチャ](/ja/docs/Web/API/Document_Picture-in-Picture_API)ウィンドウへの参照を返します。
+- {{domxref("Window.fence")}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : 現在の文書コンテキストの {{domxref("Fence")}} オブジェクトインスタンスを返します。{{htmlelement("fencedframe")}} 内に埋め込まれた文書でのみ利用できます。
+- {{domxref("Window.frameElement")}} {{ReadOnlyInline}}
- : ウィンドウが埋め込まれた要素を返します。ウィンドウが埋め込まれていない場合は、 null を返します。
-- {{domxref("Window.frames")}} {{readOnlyInline}}
+- {{domxref("Window.frames")}} {{ReadOnlyInline}}
- : 現在のウィンドウでのサブフレームの配列を返します。
-- {{domxref("Window.fullScreen")}}
+- {{domxref("Window.fullScreen")}} {{Non-standard_Inline}}
- : このプロパティはウィンドウが全画面で表示されているかどうかを示します。
-- {{domxref("Window.history")}} {{readOnlyInline}}
+- {{domxref("Window.history")}} {{ReadOnlyInline}}
- : history オブジェクトへの参照を返します。
-- {{domxref("Window.innerHeight")}} {{readOnlyInline}}
+- {{domxref("Window.indexedDB")}} {{ReadOnlyInline}}
+ - : 索引付きデータベースにアプリケーションが非同期にアクセスできる仕組みを提供します。このプロパティは {{domxref("IDBFactory")}} オブジェクトを返します。
+- {{domxref("Window.innerHeight")}} {{ReadOnlyInline}}
- : ブラウザーウィンドウのコンテンツ領域の高さを取得し、もしあれば、水平スクロールバーを含みます。
-- {{domxref("Window.innerWidth")}} {{readOnlyInline}}
+- {{domxref("Window.innerWidth")}} {{ReadOnlyInline}}
- : ブラウザーウィンドウのコンテンツ領域の幅を取得し、もしあれば、垂直スクロールバーを含みます。
-- {{domxref("isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}
+- {{domxref("Window.isSecureContext")}} {{ReadOnlyInline}}
- : コンテキストが、安全なコンテキストを必要とする機能を使用することができるかどうかを表します。
-- {{domxref("Window.length")}} {{readOnlyInline}}
+- {{domxref("Window.launchQueue")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : [プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps) (PWA) が、[`launch_handler`](/ja/docs/Web/Manifest/launch_handler) の `client_mode` が `focus-existing`、`navigate-new`、`navigate-existing` のいずれかで起動された場合、`launchQueue` は {{domxref("LaunchQueue")}} クラスへのアクセスを提供し、PWA にカスタム起動ナビゲーション処理を実装することができます。
+- {{domxref("Window.length")}} {{ReadOnlyInline}}
- : ウィンドウ内のフレームの数を返します。 {{domxref("window.frames")}} も参照してください。
+- {{domxref("Window.localStorage")}} {{ReadOnlyInline}}
+ - : 生成元のオリジンからのみアクセスが可能なデータを保存するために使用する、ローカルストレージオブジェクトへの参照を返します。
- {{domxref("Window.location")}}
- : window オブジェクトのロケーション、または現在の URL を取得 / 設定します。
- {{domxref("Window.locationbar")}} {{ReadOnlyInline}}
- - : ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な locationbar オブジェクトを返します。
-- {{domxref("Window.localStorage")}} {{readOnlyInline}}
- - : 生成元のオリジンからのみアクセスが可能なデータを保存するために使用する、ローカルストレージオブジェクトへの参照を返します。
+ - : locationbar オブジェクトを返します。
- {{domxref("Window.menubar")}} {{ReadOnlyInline}}
- - : ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な menubar オブジェクトを返します。
-- {{domxref("Window.messageManager")}} {{non-standard_inline}}
- - : このウィンドウの [message manager](/ja/docs/The_message_manager) オブジェクトを返します。
-- {{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}
+ - : menubar オブジェクトを返します。
+- {{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{Non-standard_Inline}}
- : スクリーン座標系でウィンドウのビューポートの左上隅の水平 (X) 座標を返します。この値は CSS ピクセルで表します。必要に応じて画面のピクセルに換算するための係数については、`nsIDOMWindowUtils` の `mozScreenPixelsPerCSSPixel` をご覧ください。
-- {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}
+- {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{Non-standard_Inline}}
- : スクリーン座標系で、ウィンドウビューポートの左上隅の垂直 (Y) 座標を返します。この値は CSS ピクセルで表します。必要に応じて画面のピクセルに換算するための係数については `mozScreenPixelsPerCSSPixel` をご覧ください。
- {{domxref("Window.name")}}
- : ウィンドウ名を取得 / 設定します。
-- {{domxref("Window.navigator")}} {{readOnlyInline}}
+- {{domxref("Window.navigation")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : 現在の `window` に関連付けられた {{domxref("Navigation")}} オブジェクトを返します。{{domxref("Navigation API")}} のエントリーポイントです。
+- {{domxref("Window.navigator")}} {{ReadOnlyInline}}
- : navigator オブジェクトへの参照を返します。
- {{domxref("Window.opener")}}
- : 現在のウィンドウを開いたウィンドウへの参照を返します。
-- {{domxref("Window.outerHeight")}} {{readOnlyInline}}
+- {{domxref("Window.origin")}} {{ReadOnlyInline}}
+ - : グローバルオブジェクトのオリジンを、文字列としてシリアライズして返します。
+- {{domxref("Window.originAgentCluster")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : このウィンドウがオリジンキーエージェントクラスターに属している場合は `true` を返します。
+- {{domxref("Window.outerHeight")}} {{ReadOnlyInline}}
- : ブラウザーウィンドウの外側の高さを取得します。
-- {{domxref("Window.outerWidth")}} {{readOnlyInline}}
+- {{domxref("Window.outerWidth")}} {{ReadOnlyInline}}
- : ブラウザーウィンドウの外側の幅を取得します。
-- {{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+- {{domxref("Window.scrollX","Window.pageXOffset")}} {{ReadOnlyInline}}
- : {{domxref("window.scrollX")}} のエイリアスです。
-- {{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}
+- {{domxref("Window.scrollY","Window.pageYOffset")}} {{ReadOnlyInline}}
- : {{domxref("window.scrollY")}} のエイリアスです。
-- {{domxref("Window.parent")}} {{readOnlyInline}}
+- {{domxref("Window.parent")}} {{ReadOnlyInline}}
- : 現在のウィンドウまたはサブフレームの親ウィンドウへの参照を返します。
-- {{domxref("Window.performance")}} {{readOnlyInline}}
- - : {{domxref("Performance")}} オブジェクトを返します。これは {{domxref("Performance.timing", "timing")}} や {{domxref("Performance.navigation", "navigation")}} 属性が含まれており、それぞれが [パフォーマンス関連](/ja/docs/Navigation_timing) のデータを提供するオブジェクトです。詳細情報や使用例は[ナビゲーションタイミングの使用](/ja/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing)をご覧ください。
-- {{domxref("Window.personalbar")}} {{readOnlyInline}}
- - : ウィンドウ内で表示/非表示の切り替え (トグル) が可能な、 personalbar オブジェクトを返す
-- {{domxref("Window.screen")}} {{readOnlyInline}}
- - : ウィンドウに関連付けられた screen オブジェクトへの参照を返す
-- {{domxref("Window.screenX")}} および {{domxref("Window.screenLeft")}} {{readOnlyInline}}
+- {{domxref("Window.performance")}} {{ReadOnlyInline}}
+ - : {{domxref("Performance")}} オブジェクトを返します。これは {{domxref("Performance.timing", "timing")}} や {{domxref("Performance.navigation", "navigation")}} 属性が含まれており、それぞれが [パフォーマンス関連](/ja/docs/Web/API/Performance_API/Navigation_timing) のデータを提供するオブジェクトです。詳細情報や使用例は[ナビゲーションタイミングの使用](/ja/docs/Web/API/Performance_API/Navigation_timing)をご覧ください。
+- {{domxref("Window.personalbar")}} {{ReadOnlyInline}}
+ - : personalbar オブジェクトを返します。
+- {{domxref("Window.scheduler")}} {{ReadOnlyInline}}
+ - : 現在のコンテキストに関連付けられた {{domxref("Scheduler")}} オブジェクトを返します。この項目は[優先タスクスケジューリング API](/ja/docs/Web/API/Prioritized_Task_Scheduling_API) を使用するためのエントリーポイントです。
+- {{domxref("Window.screen")}} {{ReadOnlyInline}}
+ - : ウィンドウに関連付けられた screen オブジェクトへの参照を返します。
+- {{domxref("Window.screenX")}} および {{domxref("Window.screenLeft")}} {{ReadOnlyInline}}
- : どちらのプロパティも、ユーザーのブラウザーのビューポートの左端から画面の左端までの水平方向の距離を返します。
-- {{domxref("Window.screenY")}} および {{domxref("Window.screenTop")}} {{readOnlyInline}}
+- {{domxref("Window.screenY")}} および {{domxref("Window.screenTop")}} {{ReadOnlyInline}}
- : どちらのプロパティも、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直方向の距離を返します。
-- {{domxref("Window.scrollbars")}} {{readOnlyInline}}
+- {{domxref("Window.scrollbars")}} {{ReadOnlyInline}}
- : ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な、 scrollbars オブジェクトを返す
-- {{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}
+- {{domxref("Window.scrollMaxX")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
- : ウィンドウが水平スクロールされ得る最大オフセット、すなわち、文書の幅からビューポートの幅を引いたものです。
-- {{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}
+- {{domxref("Window.scrollMaxY")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
- : ウィンドウが垂直スクロールされ得る最大オフセット (すなわち、文書の高さからビューポートの高さを引いたもの) です。
-- {{domxref("Window.scrollX")}} {{readOnlyInline}}
+- {{domxref("Window.scrollX")}} {{ReadOnlyInline}}
- : 文書が現在水平にスクロールされているピクセル数を返します。
-- {{domxref("Window.scrollY")}} {{readOnlyInline}}
+- {{domxref("Window.scrollY")}} {{ReadOnlyInline}}
- : 文書が現在垂直にスクロールされているピクセル数を返します。
- {{domxref("Window.self")}} {{ReadOnlyInline}}
- : window オブジェクト自身へのオブジェクト参照を返す
- {{domxref("Window.sessionStorage")}}
- : 生成元のオリジンからのみアクセスが可能なデータを保存するために使用する、セッションストレージへの参照を返します。
-- {{domxref("Window.sidebar")}} {{deprecated_inline}} {{non-standard_inline}} {{ReadOnlyInline}}
- - : サイドバーの window オブジェクトへの参照を返します。
+- {{domxref("Window.sharedStorage")}} {{ReadOnlyInline}} {{experimental_inline}} {{SecureContext_Inline}}
+ - : 現在のオリジンの {{domxref("WindowSharedStorage")}} オブジェクトを返します。これは[共有ストレージ API](/ja/docs/Web/API/Shared_Storage_API) を使用して共有ストレージにデータを書き込むためのメインエントリーポイントです。
- {{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
- : {{domxref("SpeechSynthesis")}} オブジェクトを返します。これは、[ウェブ発声 API](/ja/docs/Web/API/Web_Speech_API) の音声合成機能を使用するためのエントリーポイントです。
-- {{domxref("Window.status")}} {{deprecated_inline}}
- - : ブラウザー下部のステータスバーのテキストを取得 / 設定します。
-- {{domxref("Window.statusbar")}} {{readOnlyInline}}
- - : ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な statusbar オブジェクトを返します。
-- {{domxref("Window.toolbar")}} {{readOnlyInline}}
- - : ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な toolbar オブジェクトを返します。
-- {{domxref("Window.top")}} {{readOnlyInline}}
+- {{domxref("Window.statusbar")}} {{ReadOnlyInline}}
+ - : statusbar オブジェクトを返します。
+- {{domxref("Window.toolbar")}} {{ReadOnlyInline}}
+ - : toolbar オブジェクトを返します。
+- {{domxref("Window.top")}} {{ReadOnlyInline}}
- : ウィンドウ階層における最上位のウィンドウへの参照を返します。このプロパティは読み取り専用です。
-- {{domxref("Window.visualViewport")}} {{readOnlyInline}}
+- {{domxref("Window.trustedTypes")}} {{ReadOnlyInline}}
+ - : グローバルオブジェクトに関連付けられた {{domxref("TrustedTypePolicyFactory")}} オブジェクトを返します。これは{{domxref("Trusted Types API", "信頼型 API", "", "nocode")}} を使用するためのエントリーポイントです。
+- {{domxref("Window.visualViewport")}} {{ReadOnlyInline}}
- : 指定したウィンドウの視覚的なビューポートを表す {{domxref("VisualViewport")}} オブジェクトを返します。
- {{domxref("Window.window")}} {{ReadOnlyInline}}
- : 現在のウィンドウへの参照を返します。
- `window[0]`、`window[1]` など
- : フレーム内の `window` オブジェクトへの参照を返します。詳しくは {{domxref("Window.frames")}} をご覧ください。
-### 他のところで実装されているプロパティ
-
-- {{domxref("caches")}} {{readOnlyinline}}
- - : 現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトはオフラインで使用する資産を格納したり、リクエストに対して独自のレスポンスを生成したりするような機能が利用できます。
-- {{domxref("indexedDB")}} {{readonlyInline}}
- - : Indexed データベースにアプリケーションが非同期にアクセスできる仕組みを提供します。このプロパティは {{domxref("IDBFactory")}} オブジェクトを返します。
-- {{domxref("origin")}} {{readOnlyinline}}
- - : グローバルオブジェクトのオリジンを、文字列としてシリアライズして返します。
-- {{domxref("Window.scheduler")}} {{readOnlyInline}}
- - : 現在のコンテキストに関連付けられた {{domxref("Scheduler")}} オブジェクトを返します。
- この点は、[優先タスクスケジューリング API](/ja/docs/Web/API/Prioritized_Task_Scheduling_API) を使用するためのエントリーポイントです。
+### 非推奨のプロパティ
-### 廃止されたプロパティ
-
-- {{domxref("Window.content")}} および `Window._content` {{Non-standard_inline}} {{deprecated_inline}} {{ReadOnlyInline}}
- - : 現在のウィンドウでのコンテンツ要素への参照を返します。 Firefox 57 より (当初は Nightly のみ) どちらも chrome (特権付き) コードに限り使用でき、ウェブでは使用できません。
-- {{domxref("Window.defaultStatus")}} {{deprecated_inline}}
- - : 指定ウィンドウのステータスバーのテキストを取得 / 設定
-- {{domxref("Window.orientation")}} {{readOnlyInline}} {{deprecated_inline}}
- - : {{domxref("window.personalbar")}} と同義
-- {{domxref("Window.returnValue")}} {{deprecated_inline}}
- - : ウィンドウをモーダルダイアログとして表示する {{domxref("window.showModalDialog()")}} メソッドを呼び出した関数へ返却される返値です。
+- {{domxref("Window.event")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
+ - : **現在のイベント**を返します。これは現在 JavaScript のコードのコンテキストが処理しているイベントです。また、現在処理しているイベントがない場合は `undefined` を返します。可能な限り、イベントハンドラーに直接渡した {{domxref("Event")}} オブジェクトを代わりに使用してください。
+- {{domxref("Window.external")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
+ - : 外部の検索プロバイダーをブラウザーに追加するための関数を持つオブジェクトを返します。
+- {{domxref("Window.orientation")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
+ - : 端末の自然な方向に対するビューポートの方向を度単位（90 度単位で増加）で返します。
+- {{domxref("Window.sidebar")}} {{Deprecated_Inline}} {{Non-standard_Inline}} {{ReadOnlyInline}}
+ - : サイドバーの window オブジェクトへの参照を返します。
+- {{domxref("Window.status")}} {{Deprecated_Inline}}
+ - : ブラウザー下部のステータスバーのテキストを取得 / 設定します。
-## メソッド
+## インスタンスメソッド
_このインターフェイスは {{domxref("EventTarget")}} インターフェイスからメソッドを継承しています。_
+- {{domxref("Window.atob()")}}
+ - : Base64 エンコーディングを使用してエンコードされたデータの文字列をデコードします。
- {{domxref("Window.alert()")}}
- : 警告ダイアログを表示します。
-- {{domxref("Window.blur()")}}
+- {{domxref("Window.blur()")}} {{Deprecated_Inline}}
- : ウィンドウからフォーカスを外します。
-- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
+- {{domxref("Window.btoa()")}}
+ - : バイナリーデータを Base64 でエンコードした ASCII 文字列を生成します。
+- {{domxref("Window.cancelAnimationFrame()")}}
- : {{domxref("Window.requestAnimationFrame")}} によって過去にスケジューリングされたコールバックをキャンセルできます。
-- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+- {{domxref("Window.cancelIdleCallback()")}}
- : {{domxref("Window.requestIdleCallback")}} によって過去にスケジューリングされたコールバックをキャンセルできます。
-- {{domxref("Window.clearImmediate()")}}
- - : `setImmediate` で設定した繰り返し処理をキャンセルします。
+- {{domxref("clearInterval", "Window.clearInterval()")}}
+ - : {{domxref("setInterval()")}} で繰り返し実行されるよう設定された命令をキャンセルします。
+- {{domxref("clearTimeout()", "Window.clearTimeout()")}}
+ - : {{domxref("setTimeout()")}} で遅延実行するよう設定した命令をキャンセルします。
- {{domxref("Window.close()")}}
- : 現在のウィンドウを閉じます。
- {{domxref("Window.confirm()")}}
- : ユーザーの応答が必要なメッセージを持つダイアログを表示します。
-- {{domxref("Window.dump()")}} {{Non-standard_inline}}
+- {{domxref("createImageBitmap", "Window.createImageBitmap()")}}
+ - : さまざまな画像ソースを受け入れ、{{domxref("ImageBitmap")}} に解決される {{jsxref("Promise")}} を返します。任意で、始点 _(sx, sy)_ から幅 sw、高さ sh の長方形でソースを切り抜くことができます。
+- {{domxref("Window.dump()")}} {{Non-standard_Inline}}
- : コンソールにメッセージを出力します。
-- {{domxref("Window.find()")}}
+- {{domxref("fetch", "Window.fetch()")}}
+ - : ネットワークからリソースを取り込む処理を開始します。
+- {{domxref("Window.find()")}} {{Non-standard_Inline}}
- : ウィンドウ内で指定された文字列を検索します。
- {{domxref("Window.focus()")}}
- : 現在のウィンドウにフォーカスを当てます。
- {{domxref("Window.getComputedStyle()")}}
- : 特定の要素の計算済みスタイルを取得します。計算済みスタイルは、要素のすべての CSS プロパティの計算値を示します。
-- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_Inline}}
- : 特定の要素について、作者のスタイルシートを無視したデフォルトの計算済みスタイルを取得します。
+- {{domxref("Window.getScreenDetails()")}} {{experimental_inline}} {{securecontext_inline}}
+ - : ユーザーの端末で利用できるすべての画面の詳細を表す {{domxref("ScreenDetails")}} オブジェクトインスタンスで履行される {{jsxref("Promise")}} を返します。
- {{domxref("Window.getSelection()")}}
- : 選択されたアイテムを表す、セレクションオブジェクトを返します。
- {{domxref("Window.matchMedia()")}}
- - : 指定したメディアクエリ文字列を表す {{domxref("MediaQueryList")}} オブジェクトを返します。
+ - : 指定したメディアクエリー文字列を表す {{domxref("MediaQueryList")}} オブジェクトを返します。
- {{domxref("Window.moveBy()")}}
- : 現在のウィンドウを指定した距離移動します。
- {{domxref("Window.moveTo()")}}
@@ -214,9 +219,15 @@ _このインターフェイスは {{domxref("EventTarget")}} インターフェ
- : 現在の文書を印刷するためのダイアログを開きます。
- {{domxref("Window.prompt()")}}
- : ユーザーが入力ダイアログに入力したテキストを返します。
+- {{DOMxRef("Window.queryLocalFonts()")}} {{Experimental_Inline}} {{SecureContext_Inline}}
+ - : ローカルで利用できるフォントフェイスを表す {{domxref("FontData")}} オブジェクトの配列で履行された {{jsxref("Promise")}} を返します。
+- {{domxref("queueMicrotask", "Window.queueMicrotask()")}}
+ - : ブラウザーのイベントループに制御を返す前に、安全な時点で実行されるマイクロタスクをキューに入れます。
+- {{domxref("reportError", "Window.reportError()")}}
+ - : 処理されない例外をエミュレートして、スクリプトのエラーを報告します。
- {{domxref("Window.requestAnimationFrame()")}}
- : アニメーションが進行中であることをブラウザーに伝えて、次のアニメーションフレームのためにウィンドウの再描画を予定するよう要求します。
-- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}
+- {{domxref("Window.requestIdleCallback()")}}
- : ブラウザーがアイドル状態であるときに実行するタスクをスケジューリングします。
- {{domxref("Window.resizeBy()")}}
- : 現在のウィンドウを、指定した大きさの分だけ変更します。
@@ -226,154 +237,80 @@ _このインターフェイスは {{domxref("EventTarget")}} インターフェ
- : ウィンドウを文書内の特定の位置にスクロールします。
- {{domxref("Window.scrollBy()")}}
- : ウィンドウ内の文書を、指定した距離の分だけスクロールします。
-- {{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+- {{domxref("Window.scrollByLines()")}} {{Non-standard_Inline}}
- : 文書を指定した行数分、スクロールします。
-- {{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+- {{domxref("Window.scrollByPages()")}} {{Non-standard_Inline}}
- : 文書を指定したページ数分、スクロールします。
- {{domxref("Window.scrollTo()")}}
- : 文書内の特定の位置に、ウィンドウをスクロールします。
-- {{domxref("Window.setImmediate()")}} {{Non-standard_inline}}
- - : ブラウザーで他の高負荷なタスクが完了した後に、関数を実行します。
-- {{domxref("Window.setResizable()")}} {{Non-standard_inline}}
- - : ユーザーがウィンドウをリサイズできるかを切り替えます。
-- {{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
- - : コンテンツに応じてウィンドウのサイズを調整します。
-- {{domxref("Window.showOpenFilePicker()")}}
+- {{domxref("setInterval", "Window.setInterval()")}}
+ - : ミリ秒単位で指定した時間が経過するたびに関数を実行するようスケジューリングします。
+- {{domxref("setTimeout()", "Window.setTimeout()")}}
+ - : 指定した時間が経過したら関数を実行するようスケジューリングします。
+- {{domxref("Window.showDirectoryPicker()")}} {{Experimental_Inline}} {{SecureContext_Inline}}
+ - : ユーザーがディレクトリーを選択できるディレクトリーピッカーを表示します。
+- {{domxref("Window.showOpenFilePicker()")}} {{Experimental_Inline}} {{SecureContext_Inline}}
- : ユーザーがファイルまたは複数のファイルを選択できるファイルピッカーを表示します。
-- {{domxref("Window.showSaveFilePicker()")}}
- - : ユーザーがファイルを保存するためのファイルピッカーを表示します。
-- {{domxref("Window.showDirectoryPicker()")}}
- - : ディレクトリーを選択するピッカーが表示されます。
+- {{domxref("Window.showSaveFilePicker()")}} {{Experimental_Inline}} {{SecureContext_Inline}}
+ - : ユーザーがファイルを保存できるファイルピッカーを表示します。
+- {{domxref("Window.sizeToContent()")}} {{Non-standard_Inline}}
+ - : コンテンツに応じてウィンドウのサイズを調整します。
- {{domxref("Window.stop()")}}
- : ウィンドウの読み込み処理を停止します。
-- {{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+- {{domxref("structuredClone", "Window.structuredClone()")}}
+ - : 指定された値の[ディープクローン](/ja/docs/Glossary/Deep_copy)を、[構造化クローンアルゴリズム](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)を用いて作成します。
+- {{domxref("Window.updateCommands()")}} {{Non-standard_Inline}}
- : 現在の chrome ウィンドウ (UI) のコマンドの状態を更新します。
-### 他のところで実装されているメソッド
+### 非推奨のメソッド
-- {{domxref("EventTarget.addEventListener()")}}
- - : ウィンドウの特定の種類のイベントにイベントハンドラーを登録します。
-- {{domxref("EventTarget.dispatchEvent()")}}
- - : イベントを動作させるために使用します。
-- {{domxref("atob", "atob()")}}
- - : Base64 エンコーディングを使用してエンコードされたデータの文字列をデコードします。
-- {{domxref("btoa", "btoa()")}}
- - : バイナリデータを Base64 でエンコードした ASCII 文字列を生成します。
-- {{domxref("clearInterval()")}}
- - : {{domxref("setInterval()")}} で繰り返し実行されるよう設定された命令をキャンセルします。
-- {{domxref("clearTimeout()")}}
- - : {{domxref("setTimeout()")}} で遅延実行するよう設定した命令をキャンセルします。
-- {{domxref("createImageBitmap()")}}
- - : さまざまな画像ソースを受け入れて、{{domxref("ImageBitmap")}} に解決される {{jsxref("Promise")}} を返します。任意で、始点 _(sx, sy)_ から幅 sw、高さ sh の長方形でソースを切り抜くことができます。
-- {{domxref("fetch()")}}
- - : ネットワークからリソースを取り込む処理を開始します。
-- {{domxref("EventTarget.removeEventListener()")}}
- - : window からイベントリスナーを削除します。
-- {{domxref("setInterval()")}}
- - : ミリ秒単位で指定した時間が経過するたびに関数を実行するようスケジューリングします。
-- {{domxref("setTimeout()")}}
- - : 指定した時間が経過したら関数を実行するようスケジューリングします。
-- {{domxref("reportError()")}}
- - : 処理されない例外をエミュレートして、スクリプトのエラーを報告します。
-
-### 廃止されたメソッド
-
-- {{domxref("Window.back()")}} {{Non-standard_inline}} {{deprecated_inline}}
+- {{domxref("Window.back()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
- : ウィンドウの履歴をひとつ戻ります。このメソッドは廃止されました。代わりに {{domxref("History.back", "window.history.back()")}} を使用してください。
-- {{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}
+- {{domxref("Window.captureEvents()")}} {{Deprecated_Inline}}
- : 特定のタイプのイベントをすべてキャプチャするよう、ウィンドウに登録します。
-- {{domxref("Window.forward()")}} {{Non-standard_inline}} {{deprecated_inline}}
- - : 履歴でひとつ先の文書に移動します。このメソッドは廃止されました。代わりに {{domxref("History.forward", "window.history.forward()")}} を使用してください。
-- {{domxref("Window.home()")}} {{Non-standard_inline}} {{deprecated_inline}}
- - : ブラウザーのホームページに戻ります。
-- {{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}
- - : 新しいダイアログウィンドウを開きます。
-- {{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}
+- {{domxref("Window.clearImmediate()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+ - : `setImmediate` で設定した繰り返し処理をキャンセルします。
+- {{domxref("Window.forward()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+ - : 履歴でひとつ先の文書に移動します。このメソッドは廃止されました。代わりに {{domxref("History.forward", "history.forward()")}} を使用してください。
+- {{domxref("Window.releaseEvents()")}} {{Deprecated_Inline}}
- : 特定のタイプのイベントのキャプチャを解放します。
-- {{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}
+- {{domxref("Window.requestFileSystem()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+ - : ウェブサイトやアプリが自分自身で使用するためにサンドボックス化されたファイルシステムにアクセスすることができます。
+- {{domxref("Window.setImmediate()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+ - : ブラウザーで他の高負荷なタスクが完了した後に、関数を実行します。
+- {{domxref("Window.setResizable()")}} {{Non-standard_Inline}} {{deprecated_inline}}
+ - : ユーザーがウィンドウをリサイズできるかを切り替えます。
+- {{domxref("Window.showModalDialog()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
- : モーダルダイアログを表示します。
-
-## イベントハンドラー
-
-これらは window オブジェクトのプロパティで、ウィンドウで発生する可能性がある、関心事となる可能性がある様々な出来事に対するイベントハンドラーを設定して有効にすることができます。
-
-_このインターフェイスは、 {{domxref("EventTarget")}} インターフェイスからイベントハンドラーを継承しています。_
-
-- {{domxref("Window.onuserproximity")}} {{deprecated_inline}}
- - : ユーザーの近接イベントのためのイベントハンドラープロパティです（{{domxref("UserProximityEvent")}} を参照してください）。
-
-### 他で実装されているイベントハンドラー
-
-- {{domxref("GlobalEventHandlers.onabort")}}
- - : ユーザーが読み込み処理中にキャンセルしたなど、リソースの読み込みが異常終了した際に呼び出されます。
-- {{domxref("GlobalEventHandlers.oncontextmenu")}}
- - : 右マウスボタンを押したときに呼び出されます。
-- {{domxref("GlobalEventHandlers.onerror")}}
- - : リソースの読み込みが失敗したとき、あるいは実行時にエラーが発生したときに呼び出されます。 {{domxref("Window/error_event", "error")}} イベントをご覧ください。
-- {{domxref("GlobalEventHandlers.onload")}}
- - : すべてのリソースおよび DOM が完全に読み込まれた後に呼び出されます。戻るボタンなどで、キャッシュからページが読み込まれたときは呼び出されません。
+- {{domxref("Window.webkitConvertPointFromNodeToPage()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+ - : ノードの座標系からページの座標系へ {{domxref("WebKitPoint")}} を変換します。
+- {{domxref("Window.webkitConvertPointFromPageToNode()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+ - : ページの座標系からノードの座標系へ {{domxref("WebKitPoint")}} を変換します。
## イベント
-これらのイベントを待ち受けするには、 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかしてください。
+これらのイベントを待ち受けするには、 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかしてください。下記の一覧のイベントに加えて、多くのイベントがウィンドウオブジェクトに格納されている {{domxref("Document")}} からバブリングしてくる可能性があります。
- {{domxref("Window/error_event", "error")}}
- : リソースの読み込みに失敗したか、利用できないときに発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかったり、無効であったりした場合です。
- {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティからも利用できます。
- {{domxref("Window/languagechange_event", "languagechange")}}
- : ユーザーの推奨される言語が変更されたときに、グローバルスコープオブジェクトに発生します。
-- {{domxref("Window/orientationchange_event", "orientationchange")}} {{deprecated_inline}}
- - : 端末の向きが変化したときに発生します。
-- {{domxref("Window.devicemotion_event", "devicemotion")}}
- - : 定期的に発生し、利用できる場合は、端末にかかっている物理的な加速度の量と傾きを示します。
-- {{domxref("Window.deviceorientation_event", "deviceorientation")}}
- - : 現在の端末の向きを地球の座標軸と比較する時期包囲センサーから新しいデータが利用できるようになったときに発生します。
- {{domxref("Window/resize_event", "resize")}}
- : ウィンドウのサイズが変更されたときに発行されます。
- {{domxref("GlobalEventHandlers/onresize", "onresize")}} プロパティからも利用できます。
- {{domxref("Window/storage_event", "storage")}}
- : ストレージ領域 (`localStorage` または `sessionStorage`) が他の文書のコンテキストから変更されたときに発生します。
-- {{domxref("Window.vrdisplayconnect_event", "vrdisplayconnect")}} {{deprecated_inline}}
- - : 対応する VR 機器が接続されている場合に発行されます。
-- {{domxref("Window.vrdisplaydisconnect_event", "vrdisplaydisconnect")}} {{deprecated_inline}}
- - : 対応する VR 機器がコンピューターから切り離されたときに発行されます。
-- {{domxref("Window.vrdisplayactivate_event", "vrdisplayactivate")}} {{deprecated_inline}}
- - : ディスプレイが表示できるようになったときに発行されます。
-- {{domxref("Window.vrdisplaydeactivate_event", "vrdisplaydeactivate")}} {{deprecated_inline}}
- - : ディスプレイが表示されなくなったときに発行されます。
-- {{domxref("Window.vrdisplayblur_event", "vrdisplayblur")}} {{deprecated_inline}}
- - : ブラウザー、OS、VR ハードウェアの何らかの理由でディスプレイへの表示が一時停止されたときに発行されます。
-- {{domxref("Window.vrdisplayfocus_event", "vrdisplayfocus")}} {{deprecated_inline}}
- - : 不鮮明であったディスプレイへの表示が再開されたときに発行されます。
-- {{domxref("Window.vrdisplaypresentchange_event", "vrdisplaypresentchange")}} {{deprecated_inline}}
- - : VR 機器の表示状態が変化したとき（表示から非表示、または非表示から非表示になったとき）に発行されます。
-
-### アニメーションイベント
-
-- {{domxref("Window/animationcancel_event", "animationcancel")}}
- - : アニメーションが予期せず中断されたときに発生します。
- {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティからも利用できます。
-- {{domxref("Window/animationend_event", "animationend")}}
- - : アニメーションが正常に終了したときに発生します。
- {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} プロパティからも利用できます。
-- {{domxref("Window/animationiteration_event", "animationiteration")}}
- - : アニメーションが一巡したときに発生します。
- {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} プロパティからも利用できます。
-- {{domxref("Window/animationstart_event", "animationstart")}}
- - : アニメーションが開始されたときに発生します。
- {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。
### クリップボードイベント
- {{domxref("Window/copy_event", "copy")}}
- : ブラウザーのユーザーインターフェイスからユーザーがコピー操作を行ったときに発生します。
- {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティからも利用できます。
+ {{domxref("HTMLElement/copy_event", "oncopy")}} プロパティからも利用できます。
- {{domxref("Window/cut_event", "cut")}}
- : ブラウザーのユーザーインターフェイスからユーザーが切り取り操作を行ったときに発生します。
- {{domxref("HTMLElement/oncut", "oncut")}} プロパティからも利用できます。
+ {{domxref("HTMLElement/cut_event", "oncut")}} プロパティからも利用できます。
- {{domxref("Window/paste_event", "paste")}}
- : ブラウザーのユーザーインターフェイスからユーザーが貼り付け操作を行ったときに発生します。
- {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティからも利用できます。
+ {{domxref("HTMLElement/paste_event", "onpaste")}} プロパティからも利用できます。
### 接続イベント
@@ -382,14 +319,23 @@ _このインターフェイスは、 {{domxref("EventTarget")}} インターフ
- {{domxref("Window/online_event", "online")}}
- : ブラウザーがネットワークへのアクセスに接続され、 `navigator.onLine` の値が `true` に変わったときに発生します。
+### 端末方向イベント
+
+- {{domxref("Window.devicemotion_event", "devicemotion")}} {{SecureContext_Inline}}
+ - : 定期的に発生し、利用できる場合は、端末にかかっている物理的な加速度の量と傾きを示します。
+- {{domxref("Window.deviceorientation_event", "deviceorientation")}} {{SecureContext_Inline}}
+ - : 現在の端末の向きを地球の座標軸と比較する時期包囲センサーから新しいデータが利用できるようになったときに発生します。
+- {{domxref("Window.deviceorientationabsolute_event", "deviceorientationabsolute")}} {{SecureContext_Inline}}
+ - : 磁力計の方位センサーから、地球座標フレームと比較した端末の現在の絶対方位に関する新しいデータが利用できる場合に発行されます。
+
### フォーカスイベント
- {{domxref("Window/blur_event", "blur")}}
- : 要素がフォーカスを失ったときに発生します。
- {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティからも利用できます。
+ {{domxref("Window/blur_event", "onblur")}} プロパティからも利用できます。
- {{domxref("Window/focus_event", "focus")}}
- : 要素がフォーカスを得たときに発生します。
- {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティからも利用できます。
+ {{domxref("Window/focus_event", "onfocus")}} プロパティからも利用できます。
### ゲームパッドイベント
@@ -413,11 +359,8 @@ _このインターフェイスは、 {{domxref("EventTarget")}} インターフ
- {{domxref("Window/beforeunload_event", "beforeunload")}}
- : ウィンドウ、文書、そのリソースがアンロードされるときに発生します。
-- {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}
- - : 文書が完全に読み込まれて解析されたときに、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。
- {{domxref("Window/load_event", "load")}}
- : スタイルシートや画像などの依存するすべてのリソースを含め、ページ全体の読み込みが完了したときに発生します。
- {{domxref("GlobalEventHandlers/onload", "onload")}} プロパティからも利用できます。
- {{domxref("Window/unload_event", "unload")}}
- : 文書や子リソースがアンロードされるときに発生します。
@@ -449,50 +392,20 @@ _このインターフェイスは、 {{domxref("EventTarget")}} インターフ
- {{domxref("Window/unhandledrejection_event", "unhandledrejection")}}
- : JavaScript の {{jsxref("Promise")}} が拒否されたものの、拒否を処理するハンドラーがないときに送られます。
-### トランジションイベント
-
-- {{domxref("Window/transitioncancel_event", "transitioncancel")}}
- - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が中止されたときに発生します。
- {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} プロパティからも利用できます。
-- {{domxref("Window/transitionend_event", "transitionend")}}
- - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が完了したときに発生します。
- {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} プロパティからも利用できます。
-- {{domxref("Window/transitionrun_event", "transitionrun")}}
- - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が初めて作成されたときに発生します。
- {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} プロパティからも利用できます。
-- {{domxref("Window/transitionstart_event", "transitionstart")}}
- - : [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)が実際に開始されたときに発生します。
- {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。
-
-### WebVR イベント
-
-- {{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}
- - : VR ディスプレイが表示する準備ができたとき、例えば HMD がスタンバイ状態に移行したり、装着して準備ができたときに発生します。
- {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}
- - : ブラウザー、 OS、 VR ハードウェアの何れかが原因で、 VR ディスプレイの表示が停止したときに発生します。
- {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}
- - : 互換性のある VR ディスプレイがコンピューターに接続されたときに発生します。
- {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}
- - : VR ディスプレイが表示をやめる可能性があるとき、例えば HMD が一定時間使用されなかったためにスタンバイまたはスリープモードに入ったときなどに発生します。
- {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}
- - : 互換性のある VR ディスプレイがコンピュータから切り離されたときに発生します。
- {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}
- - : VR ディスプレイへの表示を休んだ後で復帰したときに発生します。
- {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}
- - : VR ディスプレイの表示状態が変化したときに発生します。 — すなわち、表示を始めたり、表示を消したり、などです。
- {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}
- - : VR ディスプレイのポインター入力の消費が [pointerlocked 要素](/ja/docs/Web/API/Pointer_Lock_API)によって抑止されたときに発生します。
- {{domxref("Window/onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}} プロパティからも利用できます。
-- {{domxref("Window/vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}
- - : VR ディスプレイのポインター入力の消費が [pointerlocked 要素](/ja/docs/Web/API/Pointer_Lock_API)によって抑止が解除されたときに発生します。
- {{domxref("Window/onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}} プロパティからも利用できます。
+### 非推奨のイベント
+
+- {{domxref("Window/orientationchange_event", "orientationchange")}} {{Deprecated_Inline}}
+ - : 端末の向きが変化したときに発生します。
+- {{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+ - : ディスプレイが表示できるようになったときに発行されます。
+- {{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+ - : 対応する VR 機器が接続されている場合に発行されます。
+- {{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+ - : 対応する VR 機器がコンピューターから切り離されたときに発行されます。
+- {{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+ - : ディスプレイが表示されなくなったときに発行されます。
+- {{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+ - : VR 機器の表示状態が変化したとき（表示から非表示、または非表示から非表示になったとき）に発行されます。
## インターフェイス
diff --git a/files/ja/web/api/window/load_event/index.md b/files/ja/web/api/window/load_event/index.md
index 71260b580e43f9..2ecd5a51574d12 100644
--- a/files/ja/web/api/window/load_event/index.md
+++ b/files/ja/web/api/window/load_event/index.md
@@ -128,7 +128,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
#### 結果
-{{ EmbedLiveSample('Live_example', '100%', '160px') }}
+{{ EmbedLiveSample('ライブデモ', '100%', '160px') }}
## 仕様書
diff --git a/files/ja/web/api/workerglobalscope/atob/index.md b/files/ja/web/api/workerglobalscope/atob/index.md
new file mode 100644
index 00000000000000..d0c37656e0175b
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/atob/index.md
@@ -0,0 +1,55 @@
+---
+title: "WorkerGlobalScope: atob() メソッド"
+short-title: atob()
+slug: Web/API/WorkerGlobalScope/atob
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+---
+
+{{APIRef("HTML DOM")}}
+
+**`atob()`** は {{domxref("WorkerGlobalScope")}} インターフェイスのメソッドで、 {{glossary("Base64")}} エンコーディングでエンコードされたデータの文字列をデコードします。 {{domxref("WorkerGlobalScope.btoa()")}} メソッドを使用して、通信に問題が発生する可能性のあるデータをエンコードして送信し、送信した後に `atob()` メソッドを使用して再度デコードすることができます。例えば、{{Glossary("ASCII")}} の 0 から 31 までのコードような制御文字をエンコードして送信し、デコードすることができます。
+
+任意の Unicode 文字列で使用する場合は、用語集の {{Glossary("Base64")}} の項目の 「Unicode 問題」を参照してください。
+
+## 構文
+
+```js-nolint
+atob(encodedData)
+```
+
+### 引数
+
+- `encodedData`
+ - : base64 でエンコードされたデータが入っているバイナリー文字列（すなわち、文字列のそれぞれの文字がバイナリーデータの各バイトとして扱われる文字列）です。
+
+### 返値
+
+`encodedData` をデコードしたデータを含む ASCII 文字列です。
+
+### 例外
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+ - : `encodedData` が妥当な base64 ではない場合に発行されます。
+
+## 例
+
+```js
+const encodedData = self.btoa("Hello, world"); // 文字列をエンコード
+const decodedData = self.atob(encodedData); // 文字列をデコード
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`atob` のポリフィル](https://github.com/zloirock/core-js#base64-utility-methods) は [`core-js`](https://github.com/zloirock/core-js) にあります
+- [`data` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- {{domxref("Window.atob()")}}: 同じメソッドですが、ウィンドウのスコープのものです。
+- {{domxref("WorkerGlobalScope.btoa()")}}
diff --git a/files/ja/web/api/workerglobalscope/btoa/index.md b/files/ja/web/api/workerglobalscope/btoa/index.md
new file mode 100644
index 00000000000000..7285a0a78e2c1b
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/btoa/index.md
@@ -0,0 +1,74 @@
+---
+title: "WorkerGlobalScope: btoa() メソッド"
+short-title: btoa()
+slug: Web/API/WorkerGlobalScope/btoa
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+---
+
+{{APIRef("HTML DOM")}}
+
+**`btoa()`** は {{domxref("WorkerGlobalScope")}} インターフェイスのメソッドで、 {{glossary("Base64")}} でエンコードされた {{Glossary("ASCII")}} 文字列をバイナリー文字列（すなわち、文字列のそれぞれの文字がバイナリーデータの各バイトとして扱われる文字列）から生成します。
+
+このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後で {{domxref("WorkerGlobalScope.atob()")}} メソッドを使用して再度デコードすることができます。
+例えば ASCII で 0 から 31 の値のような制御文字をエンコードすることもできます。
+
+## 構文
+
+```js-nolint
+btoa(stringToEncode)
+```
+
+### Parameters
+
+- `stringToEncode`
+ - : エンコードするバイナリー文字列です。
+
+### 返値
+
+`stringToEncode` の Base64 表現である ASCII 文字列です。
+
+### 例外
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+ - : 文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode 文字列」を参照してください。
+
+## 例
+
+```js
+const encodedData = self.btoa("Hello, world"); // 文字列をエンコード
+const decodedData = self.atob(encodedData); // 文字列をデコード
+```
+
+## Unicode 文字列
+
+Base64 は、設計上、バイナリーデータを入力として期待します。JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を `btoa()` に渡した場合、これはバイナリーデータとはみなされないため、エラーが発生します。
+
+```js
+const ok = "a";
+console.log(ok.codePointAt(0).toString(16)); // 61: 長さ < 1 バイト
+
+const notOK = "✓";
+console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ > 1 バイト
+
+console.log(window.btoa(ok)); // YQ==
+console.log(window.btoa(notOK)); // エラー
+```
+
+任意の Unicode テキストを扱うときにこの制限を回避する作業方法については、{{Glossary("Base64")}} の用語集の項目の「Unicode 問題」を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`btoa` のポリフィル](https://github.com/zloirock/core-js#base64-utility-methods) は [`core-js`](https://github.com/zloirock/core-js) で利用できます。
+- [`data` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- {{domxref("WorkerGlobalScope.atob()")}}
+- {{domxref("Window.btoa()")}}: 同様のメソッドですが、ウィンドウスコープのものです。
+- {{Glossary("Base64")}}
diff --git a/files/ja/web/api/workerglobalscope/caches/index.md b/files/ja/web/api/workerglobalscope/caches/index.md
new file mode 100644
index 00000000000000..99346978e8b0bd
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/caches/index.md
@@ -0,0 +1,57 @@
+---
+title: "WorkerGlobalScope: caches プロパティ"
+short-title: caches
+slug: Web/API/WorkerGlobalScope/caches
+l10n:
+ sourceCommit: 2e327846966abb10de0b1c9bedc584caab71ec97
+---
+
+{{APIRef("Service Workers API")}}{{securecontext_header}}
+
+**`caches`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。
+このオブジェクトにより、オフラインで利用できるように資産 (assets) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。
+
+## 値
+
+{{domxref("CacheStorage")}} オブジェクトです。
+
+## 例
+
+次の例は、オフラインで資産を格納するために[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)コンテキストでキャッシュを使用する方法を示しています。
+
+```js
+self.addEventListener("install", (event) => {
+ event.waitUntil(
+ self.caches
+ .open("v1")
+ .then((cache) =>
+ cache.addAll([
+ "/",
+ "/index.html",
+ "/style.css",
+ "/app.js",
+ "/image-list.js",
+ "/star-wars-logo.jpg",
+ "/gallery/",
+ "/gallery/bountyHunters.jpg",
+ "/gallery/myLittleVader.jpg",
+ "/gallery/snowTroopers.jpg",
+ ]),
+ ),
+ );
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [サービスワーカー](/ja/docs/Web/API/Service_Worker_API)
+- {{domxref("CacheStorage")}}
+- {{domxref("Cache")}}
diff --git a/files/ja/web/api/workerglobalscope/crossoriginisolated/index.md b/files/ja/web/api/workerglobalscope/crossoriginisolated/index.md
new file mode 100644
index 00000000000000..b78801dd398216
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/crossoriginisolated/index.md
@@ -0,0 +1,43 @@
+---
+title: "WorkerGlobalScope: crossOriginIsolated プロパティ"
+short-title: crossOriginIsolated
+slug: Web/API/WorkerGlobalScope/crossOriginIsolated
+l10n:
+ sourceCommit: 45fdc5d8cce894088d4c270b8f160841ecb11a2a
+---
+
+{{APIRef("Web Workers API")}}
+
+**`crossOriginIsolated`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、ウェブサイトがオリジン間隔離状態にあるかどうかを示す論理値を返します。この状態はサイドチャネル攻撃のリスクを軽減し、いくつかの機能をアンロックします。
+
+- {{JSxRef("SharedArrayBuffer")}} を作成し、{{DOMxRef("DedicatedWorkerGlobalScope.postMessage()")}} または {{DOMxRef("MessagePort.postMessage()")}} を呼び出して送信することができます。
+- {{DOMxRef("Performance.now()")}} の方が精度が高いです。
+- {{DOMxRef("Performance.measureUserAgentSpecificMemory()")}} にアクセスすることができます。
+
+{{HTTPHeader("Cross-Origin-Opener-Policy")}} レスポンスヘッダーの値が `same-origin` で、{{HTTPHeader("Cross-Origin-Embedder-Policy")}} ヘッダーの値が `require-corp` または `credentialless` である場合、ウェブサイトはオリジン間隔離状態になります。
+
+## 値
+
+論理値です。
+
+## 例
+
+```js
+const myWorker = new Worker("worker.js");
+
+if (self.crossOriginIsolated) {
+ const buffer = new SharedArrayBuffer(16);
+ myWorker.postMessage(buffer);
+} else {
+ const buffer = new ArrayBuffer(16);
+ myWorker.postMessage(buffer);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/workerglobalscope/crypto/index.md b/files/ja/web/api/workerglobalscope/crypto/index.md
new file mode 100644
index 00000000000000..54b5d9c2f97ab9
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/crypto/index.md
@@ -0,0 +1,36 @@
+---
+title: "WorkerGlobalScope: crypto プロパティ"
+short-title: crypto
+slug: Web/API/WorkerGlobalScope/crypto
+l10n:
+ sourceCommit: e897fbfbefff7a7178af36a57944821dbc49318f
+---
+
+{{APIRef("Web Crypto API")}}
+
+**`crypto`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、このワーカーの {{domxref("Crypto")}} オブジェクトを返します。このオブジェクトは、ウェブページが暗号に関連したサービスにアクセスできるようにします。
+
+このプロパティ自体は読み取り専用ですが、そのメソッドすべて（加えて子オブジェクトのメソッドと {{domxref("SubtleCrypto")}}）は読み取り専用ではありません。そのため{{glossary("polyfill", "ポリフィル")}}による攻撃には脆弱です。
+
+`crypto` はすべてのウィンドウで使用できますが、返される `Crypto` オブジェクトは安全でないコンテキストで使用できる機能は 1 つしかありません。 {{domxref("Crypto.getRandomValues", "getRandomValues()")}} メソッドです。一般的に、この API は安全なコンテキストでのみ使用する必要があります。
+
+## 値
+
+{{domxref("Crypto")}} インターフェイスのインスタンスで、一般用途の暗号技術と強力な乱数生成器を提供します。
+
+## 例
+
+{{domxref("Window.crypto")}} のページの例を参照してください。ここでは `crypto` プロパティを使用して {{domxref("Crypto.getRandomValues", "getRandomValues()")}} メソッドにアクセスしています。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Crypto")}} インターフェイス
+- {{domxref("Window.crypto")}}
diff --git a/files/ja/web/api/workerglobalscope/dump/index.md b/files/ja/web/api/workerglobalscope/dump/index.md
index ca913a6f1087de..bdcc7588f507ce 100644
--- a/files/ja/web/api/workerglobalscope/dump/index.md
+++ b/files/ja/web/api/workerglobalscope/dump/index.md
@@ -1,20 +1,21 @@
---
-title: WorkerGlobalScope.dump()
+title: "WorkerGlobalScope: dump() メソッド"
+short-title: dump()
slug: Web/API/WorkerGlobalScope/dump
l10n:
- sourceCommit: e713a02caebc813b7b3c422d15baa9693c4bfd02
+ sourceCommit: e822af5fc37c5cd436a58b05656cc82e18cf7d63
---
{{APIRef("Web Workers API")}}{{Non-standard_Header}}{{Deprecated_Header}}
**`WorkerGlobalScope.dump()`** メソッドは、メッセージをブラウザーの標準出力 (`stdout`) にログ出力します。ブラウザーがターミナルから起動されている場合、 `dump()` に送られた出力はターミナルに表示されます。これは {{domxref("Window.dump()")}} と同じですが、ワーカーのためのものです。
-`dump()` からの出力は、ブラウザーの開発者ツールのコンソールに送信されません。開発者ツールのコンソールへログ出力するには、 [`console.log()`](/ja/docs/Web/API/console/log) を使用してください。
+`dump()` からの出力は、ブラウザーの開発者ツールのコンソールに送信されません。開発者ツールのコンソールへログ出力するには、 [`console.log()`](/ja/docs/Web/API/console/log_static) を使用してください。
## 構文
-```js
-dump(message);
+```js-nolint
+dump(message)
```
### 引数
diff --git a/files/ja/web/api/workerglobalscope/fonts/index.md b/files/ja/web/api/workerglobalscope/fonts/index.md
index dc57d47f0c4b5a..c33e19d5071933 100644
--- a/files/ja/web/api/workerglobalscope/fonts/index.md
+++ b/files/ja/web/api/workerglobalscope/fonts/index.md
@@ -15,7 +15,7 @@ l10n:
## 値
返される値はこのワーカーの {{domxref("FontFaceSet")}} インターフェイスです。
-`FontFaceSet` インターフェースは、新しいフォントを読み込んだり、以前に読み込んだフォントの状態を調べたりするのに有益なものです。
+`FontFaceSet` インターフェイスは、新しいフォントを読み込んだり、以前に読み込んだフォントの状態を調べたりするのに有益なものです。
## 例
diff --git a/files/ja/web/api/workerglobalscope/importscripts/index.md b/files/ja/web/api/workerglobalscope/importscripts/index.md
index 2de36fe11312ed..ba29f812e85285 100644
--- a/files/ja/web/api/workerglobalscope/importscripts/index.md
+++ b/files/ja/web/api/workerglobalscope/importscripts/index.md
@@ -1,5 +1,6 @@
---
-title: WorkerGlobalScope.importScripts()
+title: "WorkerGlobalScope: importScripts() メソッド"
+short-title: importScripts()
slug: Web/API/WorkerGlobalScope/importScripts
l10n:
sourceCommit: 2c732b2ab1969d6ae887b865b11ba27de225f291
@@ -14,12 +15,13 @@ l10n:
```js-nolint
importScripts(path0)
importScripts(path0, path1)
-importScripts(path0, path1, /* … ,*/ pathN)
+importScripts(path0, path1, /* …, */ pathN)
```
### 引数
-文字列のカンマ区切りのリストで、インポートされるスクリプトを表します。これらは _HTML 文書のベース URL_ からの相対パスです。
+- `pathN`
+ - : 文字列値で、インポートするスクリプトの URL を表します。URLは絶対または相対です。相対 URL の場合は、HTML 文書のベース URL からの相対 URL となります。
### 返値
diff --git a/files/ja/web/api/workerglobalscope/index.md b/files/ja/web/api/workerglobalscope/index.md
index 400544a79982fc..697133ffb0f74f 100644
--- a/files/ja/web/api/workerglobalscope/index.md
+++ b/files/ja/web/api/workerglobalscope/index.md
@@ -2,7 +2,7 @@
title: WorkerGlobalScope
slug: Web/API/WorkerGlobalScope
l10n:
- sourceCommit: 579788ba8fe61b6c7dddaec09dee7b33d6548a4d
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
---
{{APIRef("Web Workers API")}}
@@ -17,88 +17,83 @@ l10n:
_このインターフェイスには、 {{domxref("EventTarget")}} インターフェイスから継承したプロパティがあります。_
-### 標準プロパティ
-
-- {{domxref("WorkerGlobalScope.navigator")}} {{ReadOnlyInline}}
- - : ワーカーに関連した {{domxref("WorkerNavigator")}} を返します。これは特化された navigator オブジェクトであり、ほぼ閲覧スコープの {{domxref("Navigator")}} のサブセットですが、ワーカーに適合したものです。
-- {{domxref("WorkerGlobalScope.self")}} {{ReadOnlyInline}}
- - : `WorkerGlobalScope` 自身の参照を返します。ほとんどの場合、 {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, {{domxref("ServiceWorkerGlobalScope")}} のような特化されたスコープです。
-- {{domxref("WorkerGlobalScope.location")}} {{ReadOnlyInline}}
- - : ワーカーに関連した {{domxref("WorkerLocation")}} を返します。これは特化された location オブジェクトであり、ほぼ閲覧スコープのの {{domxref("Location")}} のサブセットですが、ワーカーに適合したものです。
+- {{domxref("WorkerGlobalScope.caches")}} {{ReadOnlyInline}}
+ - : 現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトは、オフラインで使用するための資産の保存や、リクエストに対するカスタムレスポンスの生成といった機能を実現します。
+- {{domxref("console")}} {{ReadOnlyInline}} {{Non-standard_inline}}
+ - : ワーカーに関連付けられた {{domxref("console")}} オブジェクトを返します。
+- {{domxref("WorkerGlobalScope.crossOriginIsolated")}} {{ReadOnlyInline}}
+ - : 論理値で、ウェブサイトがオリジン間隔離状態にあるかどうかを返します。
+- {{domxref("WorkerGlobalScope.crypto")}} {{ReadOnlyInline}}
+ - : グローバルオブジェクトに関連付けられた {{domxref("Crypto")}} オブジェクトを返します。
- {{domxref("WorkerGlobalScope.fonts")}} {{ReadOnlyInline}}
- : このワーカーに関連付けられた {{domxref("FontFaceSet")}} を返します。
-
-### 非標準プロパティ
-
-- {{domxref("WorkerGlobalScope.performance")}} {{ReadOnlyInline}} {{Non-standard_inline}}
- - : ワーカーに関連した {{domxref("Performance")}} を返す。これは、通常の performance オブジェクトですが、ワーカーで利用可能なプロパティやメソッドのみを持つサブセットであることが異なります。
-- {{domxref("WorkerGlobalScope.console")}} {{ReadOnlyInline}} {{Non-standard_inline}}
- - : ワーカーに関連付けられた {{domxref("console")}} オブジェクトを返します。
-
-### 他の場所で実装されているインスタンスプロパティ
-
-- {{domxref("caches")}} {{ReadOnlyInline}}
- - : 現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトは、オフラインで使用するための資産の保存や、リクエストに対するカスタムレスポンスの生成といった機能を実現します。
-- {{domxref("indexedDB")}} {{ReadOnlyInline}}
- - : アプリケーションが索引付きデータベースの機能に非同期でアクセスするための機構を提供し、 {{domxref("IDBFactory")}} オブジェクトを返します。
-- {{domxref("isSecureContext")}} {{ReadOnlyInline}}
+- {{domxref("WorkerGlobalScope.indexedDB")}} {{ReadOnlyInline}}
+ - : アプリケーションが索引付きデータベースの機能に非同期でアクセスするための機構を提供し、{{domxref("IDBFactory")}} オブジェクトを返します。
+- {{domxref("WorkerGlobalScope.isSecureContext")}} {{ReadOnlyInline}}
- : 現在のコンテキストが安全か (`true`) そうでないか (`false`) を示す論理値を返します。
-- {{domxref("origin")}} {{ReadOnlyInline}}
+- {{domxref("WorkerGlobalScope.location")}} {{ReadOnlyInline}}
+ - : ワーカーに関連した {{domxref("WorkerLocation")}} を返します。これは特化された location オブジェクトであり、ほぼ閲覧スコープのの {{domxref("Location")}} のサブセットですが、ワーカーに適合したものです。
+- {{domxref("WorkerGlobalScope.navigator")}} {{ReadOnlyInline}}
+ - : ワーカーに関連した {{domxref("WorkerNavigator")}} を返します。これは特化された navigator オブジェクトであり、ほぼ閲覧スコープの {{domxref("Navigator")}} のサブセットですが、ワーカーに適合したものです。
+- {{domxref("WorkerGlobalScope.origin")}} {{ReadOnlyInline}}
- : グローバルオブジェクトのオリジンを文字列としてシリアライズしたものを返します。
-- [`scheduler`](/ja/docs/Web/API/Window/scheduler) {{ReadOnlyInline}}
- - : 現在のコンテキストに関連付けられた {{domxref("Scheduler")}} オブジェクトを返します。
- これは[優先度付きタスクスケジューリング API](/ja/docs/Web/API/Prioritized_Task_Scheduling_API) を使用する入口です。
-
-### イベント
-
-- `error`
- - : エラーが発生したときに発行されます。
-- `offline`
- - : ブラウザーがネットワークへのアクセスを失ったときに発行され、 `navigator.onLine` の値が `false` に切り替わります。
-- `online`
- - : ブラウザーがネットワークへアクセスできるようになったときに発行され、 `navigator.onLine` の値が `true` に切り替わります。
-- [`languagechange`](/ja/docs/Web/API/WorkerGlobalScope/languagechange_event)
- - : ユーザーの優先言語が変更された際に、グローバル/ワーカースコープで発行されます。
-- `rejectionhandled` {{non-standard_inline}}
- - : [`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) の拒否イベントが処理された際に発行されます。
-- `unhandledrejection` {{non-standard_inline}}
- - : [`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) の拒否イベントが処理されなかったときに発行されます。
+- {{domxref("WorkerGlobalScope.performance")}} {{ReadOnlyInline}}
+ - : ワーカーに関連した {{domxref("Performance")}} を返します。ワーカーが利用できるのは `Performance` インターフェイスのプロパティとメソッドのサブセットだけです。
+- {{domxref("WorkerGlobalScope.scheduler")}} {{ReadOnlyInline}}
+ - : 現在のコンテキストに関連付けられた {{domxref("Scheduler")}} オブジェクトを返します。これは[優先度付きタスクスケジューリング API](/ja/docs/Web/API/Prioritized_Task_Scheduling_API) を使用するエントリーポイントです。
+- {{domxref("WorkerGlobalScope.trustedTypes")}} {{ReadOnlyInline}}
+ - : グローバルオブジェクトに関連付けられた {{domxref("TrustedTypePolicyFactory")}} オブジェクトを返し、{{domxref("Trusted Types API", "信頼型 API", "", "nocode")}} を使用するためのエントリーポイントを提供します。
+- {{domxref("WorkerGlobalScope.self")}} {{ReadOnlyInline}}
+ - : `WorkerGlobalScope` 自身の参照を返します。ほとんどの場合、 {{domxref("DedicatedWorkerGlobalScope")}}、{{domxref("SharedWorkerGlobalScope")}}、{{domxref("ServiceWorkerGlobalScope")}} のような特化されたスコープです。
-## インスタンスメソッド
+### インスタンスメソッド
_このインターフェイスは、{{domxref("EventTarget")}} インターフェイスから継承したメソッドがあります。_
-### 標準メソッド
-
-- {{domxref("WorkerGlobalScope.importScripts()")}}
- - : ワーカーののスコープに 1 つ以上のスクリプトをインポートします。カンマ区切りで任意の数を指定できます。例：`importScripts('foo.js', 'bar.js');`
-
-### 非標準メソッド
-
+- {{domxref("WorkerGlobalScope.atob()")}}
+ - : base-64 エンコーディングを使用してエンコードされた文字データをデコードします。
+- {{domxref("WorkerGlobalScope.btoa()")}}
+ - : バイナリーデータ文字列から base-64 エンコードされた {{Glossary("ASCII")}} 文字列を生成します。
+- {{domxref("clearInterval()", "WorkerGlobalScope.clearInterval()")}}
+ - : {{domxref("setInterval()")}} を使用して設定された繰り返し処理をキャンセルします。
+- {{domxref("clearTimeout()", "WorkerGlobalScope.clearTimeout()")}}
+ - : {{domxref("setTimeout()")}} を使用して設定された繰り返し処理をキャンセルします。
+- {{domxref("createImageBitmap()", "WorkerGlobalScope.createImageBitmap()")}}
+ - : さまざまな画像ソースを受け入れ、プロミス ({{jsxref("Promise")}}) を返します。これは {{domxref("ImageBitmap")}} に解決されます。オプションとして、ソースを _(sx, sy)_ を原点とする幅 sw, 高さ sh のピクセル矩形に切り詰めます。
- {{domxref("WorkerGlobalScope.dump()")}} {{deprecated_inline}} {{non-standard_inline}}
- : 標準出力、たとえば端末にメッセージを書き込むことができます。これは Firefox の {{domxref("window.dump")}} ですが、ワーカーのためのものです。
-
-### 他で実装されているインスタンスメソッド
-
-- {{domxref("atob", "atob()")}}
- - : base-64 エンコーディングを使用してエンコードされた文字データをデコードする。
-- {{domxref("btoa", "btoa()")}}
- - : バイナリーデータ文字列から base-64 エンコードされた ASCII 文字列を生成する。
-- {{domxref("clearInterval()")}}
- - : {{domxref("setInterval()")}} を使用して設定された繰り返し処理をキャンセルする。
-- {{domxref("clearTimeout()")}}
- - : {{domxref("setTimeout()")}} を使用して設定された繰り返し処理をキャンセルする。
-- {{domxref("createImageBitmap()")}}
- - : さまざまな画像ソースを受け入れ、プロミス ({{jsxref("Promise")}}) を返します。これは {{domxref("ImageBitmap")}} に解決されます。オプションとして、ソースを _(sx, sy)_ を原点とする幅 sw, 高さ sh のピクセル矩形に切り詰めます。
-- {{domxref("fetch()")}}
+- {{domxref("fetch()", "WorkerGlobalScope.fetch()")}}
- : リソースのネットワークからの取得プロセスを開始します。
-- {{domxref("setInterval()")}}
+- {{domxref("WorkerGlobalScope.importScripts()")}}
+ - : ワーカーののスコープに 1 つ以上のスクリプトをインポートします。カンマ区切りで任意の数を指定できます。例：`importScripts('foo.js', 'bar.js');`
+- {{domxref("queueMicrotask()", "WorkerGlobalScope.queueMicrotask()")}}
+ - : ブラウザーのイベントループに制御を返す前に、安全な時点で実行されるマイクロタスクをキューに入れます。
+- {{domxref("setInterval()", "WorkerGlobalScope.setInterval()")}}
- : 指定したミリ秒周期で実行されるように関数をスケジュールします。
-- {{domxref("setTimeout()")}}
+- {{domxref("setTimeout()", "WorkerGlobalScope.setTimeout()")}}
- : 指定された時間内に実行されるように関数をスケジューリングします。
-- {{domxref("reportError()")}}
+- {{domxref("structuredClone()", "WorkerGlobalScope.structuredClone()")}}
+ - : 指定された値の[ディープクローン](/ja/docs/Glossary/Deep_copy)を、[構造化クローンアルゴリズム](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)を用いて作成します。
+- {{domxref("reportError()", "WorkerGlobalScope.reportError()")}}
- : 処理されない例外をエミュレートして、スクリプトのエラーを報告します。
+### イベント
+
+- {{domxref("WorkerGlobalScope/error_event", "error")}}
+ - : エラーが発生したときに発行されます。
+- {{domxref("WorkerGlobalScope/languagechange_event", "languagechange")}}
+ - : ユーザーの優先言語が変更された際に、グローバル/ワーカースコープで発行されます。
+- {{domxref("WorkerGlobalScope/offline_event", "offline")}}
+ - : ブラウザーがネットワークへのアクセスを失ったときに発行され、`navigator.onLine` の値が `false` に切り替わります。
+- {{domxref("WorkerGlobalScope/online_event", "online")}}
+ - : ブラウザーがネットワークへアクセスできるようになったときに発行され、`navigator.onLine` の値が `true` に切り替わります。
+- {{domxref("WorkerGlobalScope/rejectionhandled_event", "rejectionhandled")}}
+ - : {{jsxref("Promise")}} の拒否イベントが処理された際に発行されます。
+- {{domxref("WorkerGlobalScope/securitypolicyviolation_event", "securitypolicyviolation")}}
+ - : [コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)に違反したときに発生します。
+- {{domxref("WorkerGlobalScope/unhandledrejection_event", "unhandledrejection")}}
+ - : {{jsxref("Promise")}} の拒否イベントが処理されなかったときに発行されます。
+
## 例
コード内で `WorkerGlobalScope` に直接アクセスすることはありません。しかし、プロパティやメソッドが {{domxref("DedicatedWorkerGlobalScope")}} や {{domxref("SharedWorkerGlobalScope")}} のような特化されたグローバルスコープに継承されています。たとえば、ワーカーがほかのスクリプトをインポートした場合、ワーカースコープの `navigator` オブジェクトの内容を以下の 2 行で表示することができます。
@@ -121,5 +116,5 @@ console.log(navigator);
## 関連項目
- その他のグローバルオブジェクトインターフェイス: {{domxref("Window")}}、 {{domxref("DedicatedWorkerGlobalScope")}}、 {{domxref("SharedWorkerGlobalScope")}}、 {{domxref("ServiceWorkerGlobalScope")}}
-- その他のワーカー関連インターフェイス: {{domxref("Worker")}}、{{domxref("WorkerLocation")}}、 {{domxref("WorkerGlobalScope")}}、 {{domxref("ServiceWorkerGlobalScope")}}
+- その他のワーカー関連インターフェイス: {{domxref("Worker")}}、{{domxref("WorkerLocation")}}、 {{domxref("WorkerNavigator")}}、 {{domxref("ServiceWorkerGlobalScope")}}
- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ja/web/api/workerglobalscope/indexeddb/index.md b/files/ja/web/api/workerglobalscope/indexeddb/index.md
new file mode 100644
index 00000000000000..23d78320858695
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/indexeddb/index.md
@@ -0,0 +1,47 @@
+---
+title: "WorkerGlobalScope: indexedDB プロパティ"
+short-title: indexedDB
+slug: Web/API/WorkerGlobalScope/indexedDB
+l10n:
+ sourceCommit: 9912dd7cc583fc938cc73152dccdb94c3bb79ce4
+---
+
+{{APIRef("IndexedDB")}}
+
+**`indexedDB`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、アプリケーションが索引付きデータベースの機能に非同期でアクセスするための機構を提供します。
+
+## 値
+
+{{domxref("IDBFactory")}} オブジェクトです。
+
+## 例
+
+以下のコードでは、データベースを開くためのリクエストを非同期に作成し、データベースが開かれた後で、リクエストの `onsuccess` ハンドラーが呼び出されます。
+
+```js
+let db;
+function openDB() {
+ const DBOpenRequest = self.indexedDB.open("toDoList");
+ DBOpenRequest.onsuccess = (e) => {
+ db = DBOpenRequest.result;
+ };
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [IndexedDB の使用](/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- トランザクションの開始: {{domxref("IDBDatabase")}}
+- トランザクションの使用: {{domxref("IDBTransaction")}}
+- キーの範囲設定: {{domxref("IDBKeyRange")}}
+- データの取得と変更: {{domxref("IDBObjectStore")}}
+- カーソルの使用: {{domxref("IDBCursor")}}
+- 参照例: [To-do Notifications](https://github.com/mdn/dom-examples/tree/main/to-do-notifications)（[例をライブで参照](https://mdn.github.io/dom-examples/to-do-notifications/)）
diff --git a/files/ja/web/api/workerglobalscope/issecurecontext/index.md b/files/ja/web/api/workerglobalscope/issecurecontext/index.md
new file mode 100644
index 00000000000000..ca475f0c986db9
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/issecurecontext/index.md
@@ -0,0 +1,27 @@
+---
+title: "WorkerGlobalScope: isSecureContext プロパティ"
+short-title: isSecureContext
+slug: Web/API/WorkerGlobalScope/isSecureContext
+l10n:
+ sourceCommit: 964e2254ff85284e27121394dc5b6c5ac34a5ee3
+---
+
+{{APIRef("DOM")}}
+
+**`isSecureContext`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、現在の[コンテキストが安全か](/ja/docs/Web/Security/Secure_Contexts) (`true`) 否か (`false`) を示す論理値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [安全なコンテキスト](/ja/docs/Web/Security/Secure_Contexts)
diff --git a/files/ja/web/api/workerglobalscope/languagechange_event/index.md b/files/ja/web/api/workerglobalscope/languagechange_event/index.md
index 408e852e71ffeb..f10e3783910316 100644
--- a/files/ja/web/api/workerglobalscope/languagechange_event/index.md
+++ b/files/ja/web/api/workerglobalscope/languagechange_event/index.md
@@ -1,8 +1,9 @@
---
title: "WorkerGlobalScope: languagechange イベント"
+short-title: languagechange
slug: Web/API/WorkerGlobalScope/languagechange_event
l10n:
- sourceCommit: 2c732b2ab1969d6ae887b865b11ba27de225f291
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
---
{{APIRef}}
diff --git a/files/ja/web/api/workerglobalscope/location/index.md b/files/ja/web/api/workerglobalscope/location/index.md
index 77a90a80828d62..3de606cdb6aedc 100644
--- a/files/ja/web/api/workerglobalscope/location/index.md
+++ b/files/ja/web/api/workerglobalscope/location/index.md
@@ -1,8 +1,9 @@
---
-title: WorkerGlobalScope.location
+title: "WorkerGlobalScope: location プロパティ"
+short-title: location
slug: Web/API/WorkerGlobalScope/location
l10n:
- sourceCommit: c6dbc4ff96451887b908b46c8e70bcfec1c2c48c
+ sourceCommit: 88241bf466f1025d3c2f4ce2752586dd85d1ae13
---
{{APIRef("Web Workers API")}}
@@ -23,7 +24,7 @@ console.log(location);
を呼び出すと（これらは基本的に `self.console.log(self.location);` と同等であり、ワーカーのスコープで呼び出されたとき、 {{domxref("WorkerGlobalScope.self")}} で参照されるもの）、 {{domxref("WorkerLocation")}} オブジェクトが次のようにコンソールに出力されるのが分かるでしょう。
-```
+```plain
WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
hash: ""
host: "localhost:8000"
diff --git a/files/ja/web/api/workerglobalscope/navigator/index.md b/files/ja/web/api/workerglobalscope/navigator/index.md
index 8dc479755e0667..a989607d955217 100644
--- a/files/ja/web/api/workerglobalscope/navigator/index.md
+++ b/files/ja/web/api/workerglobalscope/navigator/index.md
@@ -1,8 +1,9 @@
---
-title: WorkerGlobalScope.navigator
+title: "WorkerGlobalScope: navigator プロパティ"
+short-title: navigator
slug: Web/API/WorkerGlobalScope/navigator
l10n:
- sourceCommit: 5b82af59e9723c502cf660fe9c32f9fd8dee49ac
+ sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
---
{{APIRef("Web Workers API")}}
@@ -23,7 +24,7 @@ console.log(navigator);
を呼び出すと（これらは基本的に `self.console.log(self.navigator);` と同等であり、ワーカーのスコープで呼び出されたとき、 {{domxref("WorkerGlobalScope.self")}} で参照されるもの）、 {{domxref("WorkerNavigator")}} オブジェクトが次のようにコンソールに出力されるのが分かるでしょう。
-```
+```plain
Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
appCodeName: "Mozilla"
appName: "Netscape"
diff --git a/files/ja/web/api/workerglobalscope/offline_event/index.md b/files/ja/web/api/workerglobalscope/offline_event/index.md
index 760f897c394a08..afab79dbc90656 100644
--- a/files/ja/web/api/workerglobalscope/offline_event/index.md
+++ b/files/ja/web/api/workerglobalscope/offline_event/index.md
@@ -1,8 +1,9 @@
---
title: "WorkerGlobalScope: offline イベント"
+short-title: offline
slug: Web/API/WorkerGlobalScope/offline_event
l10n:
- sourceCommit: 6d697b8a86ea3ce1bf82615c5dc006aeaa22d90b
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
---
{{APIRef("Web Workers API")}}
diff --git a/files/ja/web/api/workerglobalscope/online_event/index.md b/files/ja/web/api/workerglobalscope/online_event/index.md
index 4fb0747b6ee4ae..aa17681bcf4391 100644
--- a/files/ja/web/api/workerglobalscope/online_event/index.md
+++ b/files/ja/web/api/workerglobalscope/online_event/index.md
@@ -1,8 +1,9 @@
---
title: "WorkerGlobalScope: online イベント"
+short-title: online
slug: Web/API/WorkerGlobalScope/online_event
l10n:
- sourceCommit: 6d697b8a86ea3ce1bf82615c5dc006aeaa22d90b
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
---
{{APIRef("Web Workers API")}}
diff --git a/files/ja/web/api/workerglobalscope/origin/index.md b/files/ja/web/api/workerglobalscope/origin/index.md
new file mode 100644
index 00000000000000..fd870eaa54cc72
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/origin/index.md
@@ -0,0 +1,35 @@
+---
+title: "WorkerGlobalScope: origin プロパティ"
+short-title: origin
+slug: Web/API/WorkerGlobalScope/origin
+l10n:
+ sourceCommit: 3fd9ed857a7d87a5ecc539a9835dbd107178bb6c
+---
+
+{{APIRef("Web Workers API")}}
+
+**`origin`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、グローバルスコープのオリジンを文字列でシリアライズして返します。
+
+## 値
+
+文字列です。
+
+## 例
+
+ワーカースコープの内部から以下のスニペットを実行すると、メッセージを受信するたびにワーカーのグローバルスコープの元をコンソールにログ出力します。
+
+```js
+self.onmessage = () => {
+ console.log(self.origin);
+};
+```
+
+オリジンがスキーム/ホスト/ポートのタプルでない場合（ローカルで実行しようとしている場合、つまり `file://` URL 経由で実行しようとしている場合）、 `origin` は文字列 `"null"` を返します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/workerglobalscope/performance/index.md b/files/ja/web/api/workerglobalscope/performance/index.md
new file mode 100644
index 00000000000000..cee9888c3770eb
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/performance/index.md
@@ -0,0 +1,40 @@
+---
+title: "WorkerGlobalScope: performance プロパティ"
+short-title: performance
+slug: Web/API/WorkerGlobalScope/performance
+l10n:
+ sourceCommit: 54962bbd1d367115cfd01b4e1ba6b552e8b68eb7
+---
+
+{{APIRef("Performance API")}}
+
+**`performance`** は {{domxref("WorkerGlobalScope")}} インターフェイスのプロパティで、ワーカーのスコープで実行するコードのパフォーマンス情報を収集するために使用することができる {{domxref("Performance")}} オブジェクトを返します。
+
+パフォーマンス項目はコンテキスト単位です。ワーカースレッドでマークを作成した場合、メインスレッドや他のワーカーには表示されません。
+
+ワーカーコンテキストで利用できるのは以下のパフォーマンスインターフェイスだけであることに注意してください。
+
+- {{domxref("Performance")}}
+- {{domxref("PerformanceEntry")}}
+- {{domxref("PerformanceMark")}}
+- {{domxref("PerformanceMeasure")}}
+- {{domxref("PerformanceObserver")}}
+- {{domxref("PerformanceObserverEntryList")}}
+- {{domxref("PerformanceResourceTiming")}}
+- {{domxref("PerformanceServerTiming")}}
+
+## 値
+
+呼び出されるコンテキストのパフォーマンスおよびタイミング関連の情報にアクセスするための {{domxref("Performance")}} オブジェクトです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Window.performance")}}
diff --git a/files/ja/web/api/workerglobalscope/rejectionhandled_event/index.md b/files/ja/web/api/workerglobalscope/rejectionhandled_event/index.md
new file mode 100644
index 00000000000000..b5a7ac126a1348
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/rejectionhandled_event/index.md
@@ -0,0 +1,60 @@
+---
+title: "WorkerGlobalScope: rejectionhandled イベント"
+short-title: rejectionhandled
+slug: Web/API/WorkerGlobalScope/rejectionhandled_event
+l10n:
+ sourceCommit: 7723224a33ae51ac03a6cadd7354b6d7f4d8aa7b
+---
+
+{{APIRef}}
+
+**`rejectionhandled`** イベントは、スクリプトのグローバルスコープ（通常は {{domxref("WorkerGlobalScope")}}）に送られるものであり、拒否された {{jsxref("Promise")}} が遅れて処理されるたび、すなわち、拒否されたプロミスが {{domxref("WorkerGlobalScope.unhandledrejection_event", "unhandledrejection")}} イベントが発生した後にハンドラーが割り当てられた場合に送られます。
+
+これは、プロミスが拒否され、その時刻に拒否ハンドラーがない場合に送られる `unhandledrejection` イベントと一緒に、デバッグや一般的なアプリケーションの回復のために使用することができます。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+self.addEventListener("rejectionhandled", (event) => {});
+self.onrejectionhandled = (event) => {};
+```
+
+## イベント型
+
+{{domxref("PromiseRejectionEvent")}} です。 {{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("PromiseRejectionEvent")}}
+
+## イベントプロパティ
+
+- {{domxref("PromiseRejectionEvent.promise")}} {{ReadOnlyInline}}
+ - : 拒否されたプロミス ({{jsxref("Promise")}}) です。
+- {{domxref("PromiseRejectionEvent.reason")}} {{ReadOnlyInline}}
+ - : プロミスが拒否された理由を示す値または {{jsxref("Object")}} で、{{jsxref("Promise.reject()")}} に渡されたものです。
+
+## 例
+
+`rejectionhandled` イベントを使用することで、拒否されたプロミスを、拒否された理由とともにコンソールにログ出力することができます。
+
+```js
+self.addEventListener("rejectionhandled", (event) => {
+ console.log(`Promise rejected; reason: ${event.reason}`);
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [プロミスの拒否イベント](/ja/docs/Web/JavaScript/Guide/Using_promises#プロミスの拒否イベント)
+- {{domxref("PromiseRejectionEvent")}}
+- {{jsxref("Promise")}}
+- {{domxref("WorkerGlobalScope/unhandledrejection_event", "unhandledrejection")}}
diff --git a/files/ja/web/api/workerglobalscope/scheduler/index.md b/files/ja/web/api/workerglobalscope/scheduler/index.md
new file mode 100644
index 00000000000000..98ad897d2b3766
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/scheduler/index.md
@@ -0,0 +1,58 @@
+---
+title: "WorkerGlobalScope: scheduler プロパティ"
+short-title: scheduler
+slug: Web/API/WorkerGlobalScope/scheduler
+l10n:
+ sourceCommit: b2323759014333d2f36a27b05539d4856eb7f1fe
+---
+
+{{APIRef("Prioritized Task Scheduling API")}}
+
+**`scheduler`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、[優先タスクスケジューリング API](/ja/docs/Web/API/Prioritized_Task_Scheduling_API) を使用するためのエントリーポイントです。
+
+このオブジェクトには単一のインスタンスメソッド {{domxref('Scheduler.postTask()')}} があり、優先順位をつけたタスクをスケジューリングに使用します。
+
+## 値
+
+{{domxref("Scheduler")}} です。
+
+## 例
+
+下記のコードは、プロパティとそれに関連するインターフェイスのとても基本的な使用方法を示しています。
+プロパティが存在するかどうかを調べ、プロミスを返すタスクを投稿する方法を示しています。
+
+```js
+// Check if the prioritized task API is supported
+if ("scheduler" in self) {
+ // Callback function - "the task"
+ const myTask = () => "Task 1: user-visible";
+
+ // Post task with default priority: 'user-visible' (no other options)
+ // When the task resolves, Promise.then() logs the result.
+ self.scheduler
+ .postTask(myTask)
+ // Handle resolved value
+ .then((taskResult) => console.log(`${taskResult}`))
+ // Handle error or abort
+ .catch((error) => console.log(`Error: ${error}`));
+} else {
+ console.log("Feature: NOT Supported");
+}
+```
+
+この API の使い方を示す全体的なサンプルコードは、[優先タスクスケジューリング API > 例](/ja/docs/Web/API/Prioritized_Task_Scheduling_API#例)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [優先タスクスケジューリング API](/ja/docs/Web/API/Prioritized_Task_Scheduling_API)
+- {{domxref('Scheduler.postTask()')}}
+- {{domxref('TaskController')}}
+- {{domxref("Window.scheduler")}}
diff --git a/files/ja/web/api/workerglobalscope/securitypolicyviolation_event/index.md b/files/ja/web/api/workerglobalscope/securitypolicyviolation_event/index.md
new file mode 100644
index 00000000000000..fe7867a74a913b
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/securitypolicyviolation_event/index.md
@@ -0,0 +1,57 @@
+---
+title: "WorkerGlobalScope: securitypolicyviolation イベント"
+short-title: securitypolicyviolation
+slug: Web/API/WorkerGlobalScope/securitypolicyviolation_event
+l10n:
+ sourceCommit: 7c77ca51ce4433ad19af82016604987f42693784
+---
+
+{{APIRef}}
+
+**`securitypolicyviolation`** イベントは、ウェブワーカーの中で[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)の違反が発生したときに発行されます。
+
+ハンドラーは `onsecuritypolicyviolation` イベントハンドラープロパティを使用するか、{{domxref("EventTarget.addEventListener()")}} を使用して割り当てることができます。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("securitypolicyviolation", (event) => {});
+
+onsecuritypolicyviolation = (event) => {};
+```
+
+## イベント型
+
+{{domxref("SecurityPolicyViolationEvent")}} です。 {{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("SecurityPolicyViolationEvent")}}
+
+## 例
+
+下記のコードでは、`onsecuritypolicyviolation` イベントハンドラープロパティを使用してイベントハンドラー関数を追加するか、`addEventListener()` メソッドを呼び出す方法を示しています。
+
+```js
+self.onsecuritypolicyviolation = (e) => {
+ // ここで SecurityPolicyViolationEvent e を処理
+};
+
+self.addEventListener("securitypolicyviolation", (e) => {
+ // ここで SecurityPolicyViolationEvent e を処理
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Document/securitypolicyviolation_event", "securitypolicyviolation")}} イベント（{{domxref("Document")}} インターフェイス）
+- {{domxref("Element/securitypolicyviolation_event", "securitypolicyviolation")}} イベント（{{domxref("Element")}} インターフェイス）
+- [HTTP > コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)
diff --git a/files/ja/web/api/workerglobalscope/self/index.md b/files/ja/web/api/workerglobalscope/self/index.md
index 18806b095cba6d..7b111a35051e91 100644
--- a/files/ja/web/api/workerglobalscope/self/index.md
+++ b/files/ja/web/api/workerglobalscope/self/index.md
@@ -1,8 +1,9 @@
---
-title: WorkerGlobalScope.self
+title: "WorkerGlobalScope: self プロパティ"
+short-title: self
slug: Web/API/WorkerGlobalScope/self
l10n:
- sourceCommit: 74f46a45c075037d7591a6cdbda96734b5b6f7fd
+ sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
---
{{APIRef("Web Workers API")}}
@@ -23,7 +24,7 @@ console.log(self);
コンソールに書き込まれたワーカーオブジェクトと同じ型のワーカーグローバルスコープが取得されます。ある時は次のようになります。
-```
+```plain
DedicatedWorkerGlobalScope {
undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
Infinity: Infinity
diff --git a/files/ja/web/api/workerglobalscope/trustedtypes/index.md b/files/ja/web/api/workerglobalscope/trustedtypes/index.md
new file mode 100644
index 00000000000000..2495629ae3fe7b
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/trustedtypes/index.md
@@ -0,0 +1,23 @@
+---
+title: "WorkerGlobalScope: trustedTypes プロパティ"
+short-title: trustedTypes
+slug: Web/API/WorkerGlobalScope/trustedTypes
+l10n:
+ sourceCommit: fc4f2ea893df340f8b41ef8ec956f2d36242bee4
+---
+
+{{APIRef("Trusted Types API")}}
+
+**`trustedTypes`** は {{domxref("WorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、このグローバルオブジェクトに関連付けられた {{domxref("TrustedTypePolicyFactory")}} オブジェクトを返し、{{domxref("Trusted Types API", "信頼型 API", "", "nocode")}} を使用するためのエントリーポイントを提供します。
+
+## 値
+
+{{domxref("TrustedTypePolicyFactory")}} オブジェクトです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/workerglobalscope/unhandledrejection_event/index.md b/files/ja/web/api/workerglobalscope/unhandledrejection_event/index.md
new file mode 100644
index 00000000000000..d7a926431e63b4
--- /dev/null
+++ b/files/ja/web/api/workerglobalscope/unhandledrejection_event/index.md
@@ -0,0 +1,86 @@
+---
+title: "WorkerGlobalScope: unhandledrejection イベント"
+short-title: unhandledrejection
+slug: Web/API/WorkerGlobalScope/unhandledrejection_event
+l10n:
+ sourceCommit: 7723224a33ae51ac03a6cadd7354b6d7f4d8aa7b
+---
+
+{{APIRef}}
+
+**`unhandledrejection`** イベントは、スクリプトのグローバルスコープ（通常は {{domxref("WorkerGlobalScope")}}）に送られるものであり、拒否ハンドラーのない {{jsxref("Promise")}} が拒否されたときに発行されます。
+
+これはデバッグや、予期せぬ状況でのフォールバックエラー処理を提供するのに有益です。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+self.addEventListener("unhandledrejection", (event) => {});
+self.onunhandledrejection = (event) => {};
+```
+
+## イベント型
+
+{{domxref("PromiseRejectionEvent")}} です。 {{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("PromiseRejectionEvent")}}
+
+## イベントプロパティ
+
+- {{domxref("PromiseRejectionEvent.promise")}} {{ReadOnlyInline}}
+ - : 拒否されたプロミス ({{jsxref("Promise")}}) です。
+- {{domxref("PromiseRejectionEvent.reason")}} {{ReadOnlyInline}}
+ - : プロミスが拒否された理由を示す値または {{jsxref("Object")}} で、{{jsxref("Promise.reject()")}} に渡されたものです。
+
+## 例
+
+### 基本的なエラーログ出力
+
+この例は、未処理のプロミスの拒否に関する情報をコンソールにログ出力します。
+
+```js
+self.addEventListener("unhandledrejection", (event) => {
+ console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
+});
+```
+
+また、`onunhandledrejection` イベントハンドラープロパティを使用して、イベントリスナーを設定することができます。
+
+```js
+self.onunhandledrejection = (event) => {
+ console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
+};
+```
+
+### 既定の処理を防止
+
+多くの環境（{{Glossary("Node.js")}} など）では、既定では処理されなかったプロミスの拒否をコンソールに報告します。`unhandledrejection` イベントのハンドラーを追加することで、そこでイベントをキャンセルする {{domxref("Event.preventDefault()", "preventDefault()")}} を呼び出すことで、ランタイムのログ出力コードで処理されるのを防ぐことができます。これは `unhandledrejection` がキャンセル可能であるため、うまく動作します。
+
+```js
+self.addEventListener("unhandledrejection", (event) => {
+ // code for handling the unhandled rejection
+ // …
+
+ // Prevent the default handling (such as outputting the
+ // error to the console)
+
+ event.preventDefault();
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [プロミスの拒否イベント](/ja/docs/Web/JavaScript/Guide/Using_promises#プロミスの拒否イベント)
+- {{domxref("PromiseRejectionEvent")}}
+- {{jsxref("Promise")}}
+- {{domxref("WorkerGlobalScope/rejectionhandled_event", "rejectionhandled")}} イベント
diff --git a/files/ja/web/api/xsltprocessor/generating_html/index.md b/files/ja/web/api/xsltprocessor/generating_html/index.md
index 77e45ea33c3a35..c24833d84116c0 100644
--- a/files/ja/web/api/xsltprocessor/generating_html/index.md
+++ b/files/ja/web/api/xsltprocessor/generating_html/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: 457f4ed29a1eed6ac732e0982bb4c1631fa0226c
---
+{{APIRef("XSLT")}}
+
ブラウザーにおける XSLT のよくある活用法の一つが、クライアント上で XML を HTML へと変換することです。この例は、記事についての情報を含む文書 (example2.xml) を入力し、HTML 文書へ変換します。
記事の `<body>` 要素は HTML 要素（`<b>` および `<u>` タグ）を含んでいます。この XML 文書は HTML 要素と XML 要素の両方を含んでいますが、必要な名前空間は XML 要素のための名前空間 1 つだけです。HTML には名前空間が無く、XHTML 名前空間を使用すると HTML 文書のように動作しない XML 文書を XSL に生成させてしまうため、XSL スタイルシート内の `xsl:output` によって結果の文書が HTML として扱われるようにします。XML 要素については、独自の名前空間 `http://devedge.netscape.com/2002/de` と、それによって与えられる myNS 接頭辞 `(xmlns:myNS="http://devedge.netscape.com/2002/de")` が必要です。
diff --git a/files/ja/web/api/xsltprocessor/introduction/index.md b/files/ja/web/api/xsltprocessor/introduction/index.md
index 85ce9b913ff8cd..06862a2f4298f8 100644
--- a/files/ja/web/api/xsltprocessor/introduction/index.md
+++ b/files/ja/web/api/xsltprocessor/introduction/index.md
@@ -3,6 +3,8 @@ title: 序文
slug: Web/API/XSLTProcessor/Introduction
---
+{{APIRef("XSLT")}}
+
## 序文
W3C 標準で気付かされる流行の一つは、スタイルからコンテンツを分ける努力がなされていることです。これにより、同じスタイルを複数のコンテンツで再利用することができ、簡単なメンテナンスでコンテンツの外観を (一つのファイルの修正のみで) すばやく変更することができます。
diff --git a/files/ja/web/css/@import/index.md b/files/ja/web/css/@import/index.md
index 12f302036b0a4b..84f1536ced4f7b 100644
--- a/files/ja/web/css/@import/index.md
+++ b/files/ja/web/css/@import/index.md
@@ -101,8 +101,8 @@ l10n:
```css
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
-@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
- and (max-width: 400px);
+@import url("flexy.css") supports(not (display: grid) and (display: flex))
+ screen and (max-width: 400px);
```
上記の `@import` ルールは、`display: grid` が対応している場合はグリッドを使用するレイアウトをインポートし、そうでない場合は `display: flex` を使用する CSS をインポートする方法を示しています。
@@ -115,8 +115,8 @@ l10n:
例えば、下記のコードでは、[子結合子](/ja/docs/Web/CSS/Child_combinator) (`selector()`) と `font-tech()` 関数の両方を条件とする `@import` を表示しています。
```css
-@import url("whatever.css") supports((selector(h2 > p)) and
- (font-tech(color-COLRv1)));
+@import url("whatever.css")
+supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
```
### カスケードレイヤーへのCSSルールのインポート
diff --git a/files/ja/web/css/@media/prefers-reduced-data/index.md b/files/ja/web/css/@media/prefers-reduced-data/index.md
index 89861fa3f23eee..45e675a1f8a9ea 100644
--- a/files/ja/web/css/@media/prefers-reduced-data/index.md
+++ b/files/ja/web/css/@media/prefers-reduced-data/index.md
@@ -54,9 +54,9 @@ slug: Web/CSS/@media/prefers-reduced-data
local("Montserrat Regular"),
local("Montserrat-Regular"),
url("fonts/montserrat-regular.woff2") format("woff2");
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
- U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
- U+2212, U+2215, U+FEFF, U+FFFD;
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+ U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+ U+2215, U+FEFF, U+FFFD;
}
}
diff --git a/files/ja/web/css/_colon_hover/index.md b/files/ja/web/css/_colon_hover/index.md
index 3a703787b85025..4e0099ce7e31f3 100644
--- a/files/ja/web/css/_colon_hover/index.md
+++ b/files/ja/web/css/_colon_hover/index.md
@@ -48,7 +48,7 @@ a:hover {
#### 結果
-{{EmbedLiveSample("Basic_example")}}
+{{EmbedLiveSample("基本的な例")}}
## 仕様書
diff --git a/files/ja/web/css/_colon_scope/index.md b/files/ja/web/css/_colon_scope/index.md
index 927d04ffebf7f6..1b8bda501dd9c5 100644
--- a/files/ja/web/css/_colon_scope/index.md
+++ b/files/ja/web/css/_colon_scope/index.md
@@ -16,7 +16,7 @@ l10n:
}
```
-どの要素が `:scope` に一致するかは、そ使用されるコンテキストによって変わります。
+どの要素が `:scope` に一致するかは、それが使用されるコンテキストによって変わります。
- スタイルシートのルートレベルで使用する場合、 `:scope` は {{cssxref(":root")}} と等価であり、通常の HTML 文書内の {{htmlelement("html")}} 要素に一致します。
- {{cssxref("@scope")}} ブロックの中で使用した場合、 `:scope` はブロックの定義するスコープのルートに一致します。これは `@scope` ブロック自身からスコープのルートにスタイル設定を適用する方法を提供します。
diff --git a/files/ja/web/css/_doublecolon_backdrop/index.md b/files/ja/web/css/_doublecolon_backdrop/index.md
index 929d771c0f6667..b38248298b2bbf 100644
--- a/files/ja/web/css/_doublecolon_backdrop/index.md
+++ b/files/ja/web/css/_doublecolon_backdrop/index.md
@@ -28,9 +28,9 @@ Backdrop は以下の状況で現れます。
全画面モードで複数の要素が配置されたときは、それぞれに自身の `::backdrop` 疑似要素があります。
```css
-/* backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
+/* backdrop はダイアログが dialog.showModal() で開いている時のみ表示されます */
dialog::backdrop {
- background: rgba(255, 0, 0, 0.25);
+ background: rgb(255 0 0 / 25%);
}
```
@@ -40,21 +40,73 @@ dialog::backdrop {
## 例
-### 全画面動画の背景のスタイル付け
+### モーダルダイアログの backdrop のスタイル付け
-この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。
+この例では、`::backdrop` 擬似要素を使用して、モーダルで {{htmlelement("dialog")}} が開いているときの backdrop をスタイル付けします。
+
+#### HTML
+
+{{htmlelement("button")}} を設置し、それをクリックすると `<dialog>` が開くようにします。`<dialog>` が開いたら、ダイアログを閉じるためのボタンにフォーカスが当たります。
+
+```html
+<dialog>
+ <button autofocus>閉じる</button>
+ <p>このモーダルダイアログには美しい backdrop があります！</p>
+</dialog>
+<button>ダイアログを表示する</button>
+```
+
+#### CSS
+
+[CSS グラデーション](/ja/docs/Web/CSS/gradient)を使用してカラフルなドーナツを作成し、backdrop に背景を追加します。
```css
-video::backdrop {
- background-color: #448;
+::backdrop {
+ background-image: radial-gradient(
+ circle,
+ #fff 0 5vw,
+ transparent 5vw 20vw,
+ #fff 20vw 22.5vw,
+ #eee 22.5vw
+ ),
+ conic-gradient(
+ #272b66 0 50grad,
+ #2d559f 50grad 100grad,
+ #9ac147 100grad 150grad,
+ #639b47 150grad 200grad,
+ #e1e23b 200grad 250grad,
+ #f7941e 250grad 300grad,
+ #662a6c 300grad 350grad,
+ #9a1d34 350grad 400grad,
+ #43a1cd 100grad 150grad,
+ #ba3e2e
+ );
}
```
-結果の画面は以下のようになります。
+#### JavaScript
+
+ダイアログを [`.showModal()`](/ja/docs/Web/API/HTMLDialogElement/showModal) メソッドを使用してモーダルで開き、[`.close()`](/ja/docs/Web/API/HTMLDialogElement/close) メソッドを使用して閉じます。
+
+```js
+const dialog = document.querySelector("dialog");
+const showButton = document.querySelector("dialog + button");
+const closeButton = document.querySelector("dialog button");
+
+// 「ダイアログを表示する」ボタンでダイアログをモーダルで開く
+showButton.addEventListener("click", () => {
+ dialog.showModal();
+});
+
+// 「閉じる」ボタンでダイアログを閉じる
+closeButton.addEventListener("click", () => {
+ dialog.close();
+});
+```
-
+#### 結果
-[動作例を見てみてください](https://mdn.github.io/css-examples/backdrop/index.html)。背景の色を変更した後、動画を全画面表示にすると、背景色の変更を確認することができます。
+{{EmbedLiveSample("Styling a modal dialog's backdrop", 450, 300)}}
## 仕様書
@@ -68,4 +120,6 @@ video::backdrop {
- {{cssxref(":fullscreen")}} 疑似クラス
- {{HTMLElement("dialog")}} HTML 要素
-- [Fullscreen API](/ja/docs/Web/API/Fullscreen_API)
+- [全画面 API](/ja/docs/Web/API/Fullscreen_API)
+- [`popover`](/ja/docs/Web/HTML/Global_attributes/popover) HTML グローバル属性
+- [ポップオーバー API](/ja/docs/Web/API/Popover_API)
diff --git a/files/ja/web/css/align-tracks/index.md b/files/ja/web/css/align-tracks/index.md
deleted file mode 100644
index 6887f2691b19df..00000000000000
--- a/files/ja/web/css/align-tracks/index.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: align-tracks
-slug: Web/CSS/align-tracks
----
-
-{{CSSRef}}
-
-{{SeeCompatTable}}
-
-**`align-tracks`** は CSS のプロパティで、ブロック軸が[組積](/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout)であるグリッドコンテナーの組積軸の配置を設定します。
-
-## 構文
-
-```css
-/* キーワード値 */
-align-tracks: start;
-align-tracks: space-between;
-align-tracks: center;
-align-tracks: start, center, end;
-
-/* グローバル値 */
-align-tracks: inherit;
-align-tracks: initial;
-align-tracks: revert;
-align-tracks: unset;
-```
-
-このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。
-
-値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。
-
-### 値
-
-- `start`
- - : アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。
-- `end`
- - : アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。
-- `center`
- - : アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。
-- `normal`
- - : `start` として動作します。
-- `baseline first baseline`
- `last baseline`
- - : ボックスの先頭または末尾のベースラインセットの配置ベースラインを、ベースライン共有グループのすべてのボックスの共有された先頭または末尾のベースラインセットの対応するベースラインに合わせます。
- `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。
-- `space-between`
- - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。
-- `space-around`
- - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。
-- `space-evenly`
- - : アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。
-- `stretch`
- - : アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。
-
-## 公式定義
-
-{{cssinfo}}
-
-## 形式文法
-
-{{csssyntax}}
-
-## 例
-
-### align-tracks に複数の値がある組積レイアウト
-
-{{EmbedGHLiveSample("css-examples/grid/masonry/align-tracks.html", '100%', 900)}}
-
-## 仕様書
-
-{{Specifications}}
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- 関連する CSS プロパティ: {{cssxref("justify-tracks")}}, {{cssxref("masonry-auto-flow")}}
diff --git a/files/ja/web/css/background-image/index.md b/files/ja/web/css/background-image/index.md
index acc6c9b25c6542..a6d1a86a3a7cb5 100644
--- a/files/ja/web/css/background-image/index.md
+++ b/files/ja/web/css/background-image/index.md
@@ -26,7 +26,8 @@ background-image: linear-gradient(
to bottom,
rgb(255 255 0 / 50%),
rgb(0 0 255 / 50%)
- ), url("catfront.png");
+ ),
+ url("catfront.png");
/* グローバル値 */
background-image: inherit;
diff --git a/files/ja/web/css/background-origin/index.md b/files/ja/web/css/background-origin/index.md
index c971edd0e2a072..d3f2252b4f0d62 100644
--- a/files/ja/web/css/background-origin/index.md
+++ b/files/ja/web/css/background-origin/index.md
@@ -95,7 +95,8 @@ div {
rgb(131 58 180 / 100%) 0%,
rgb(253 29 29 / 60%) 60%,
rgb(252 176 69 / 100%) 100%
- ), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
+ ),
+ radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
border: 20px dashed black;
padding: 20px;
width: 400px;
diff --git a/files/ja/web/css/calc-constant/index.md b/files/ja/web/css/calc-keyword/index.md
similarity index 99%
rename from files/ja/web/css/calc-constant/index.md
rename to files/ja/web/css/calc-keyword/index.md
index 2af389a0ff0aeb..28d7115faba135 100644
--- a/files/ja/web/css/calc-constant/index.md
+++ b/files/ja/web/css/calc-keyword/index.md
@@ -1,6 +1,7 @@
---
title: <calc-constant>
-slug: Web/CSS/calc-constant
+slug: Web/CSS/calc-keyword
+original_slug: Web/CSS/calc-constant
l10n:
sourceCommit: fb1c7f8985e4c4142f482f809366e3cba6b96b94
---
diff --git a/files/ja/web/css/caption-side/index.md b/files/ja/web/css/caption-side/index.md
index 32a88b49ca2556..78d10a21fb8ca0 100644
--- a/files/ja/web/css/caption-side/index.md
+++ b/files/ja/web/css/caption-side/index.md
@@ -16,9 +16,7 @@ slug: Web/CSS/caption-side
caption-side: top;
caption-side: bottom;
-/* 警告: 非標準の値 */
-caption-side: block-start;
-caption-side: block-end;
+/* 倫理値 */
caption-side: inline-start;
caption-side: inline-end;
@@ -34,12 +32,8 @@ caption-side: unset;
### 値
- `top`
- - : キャプションボックスを表の上方に配置します。
-- `bottom`
- - : キャプションボックスを表の下方に配置します。
-- `block-start`
- : キャプションボックスを表のブロック方向の先頭に配置します。
-- `block-end`
+- `bottom`
- : キャプションボックスを表のブロック方向の末尾に配置します。
- `inline-start`
- : キャプションボックスを表のインライン方向の先頭に配置します。
diff --git a/files/ja/web/css/counter/index.md b/files/ja/web/css/counter/index.md
index 8da1a61c49f870..c3cd36ba6a4c84 100644
--- a/files/ja/web/css/counter/index.md
+++ b/files/ja/web/css/counter/index.md
@@ -91,11 +91,8 @@ li {
counter-increment: count;
}
li::after {
- content: "[" counter(count, decimal-leading-zero) "] == [" counter(
- count,
- lower-alpha
- )
- "]";
+ content: "[" counter(count, decimal-leading-zero) "] == ["
+ counter(count, lower-alpha) "]";
}
```
diff --git a/files/ja/web/css/counters/index.md b/files/ja/web/css/counters/index.md
index 09432e89b12fca..9ea6bcedf0114b 100644
--- a/files/ja/web/css/counters/index.md
+++ b/files/ja/web/css/counters/index.md
@@ -83,11 +83,8 @@ li::marker {
content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
- content: counters(listCounter, ".") " == " counters(
- listCounter,
- ".",
- lower-roman
- );
+ content: counters(listCounter, ".") " == "
+ counters(listCounter, ".", lower-roman);
}
```
@@ -138,11 +135,8 @@ li::marker {
content: counters(count, ".", upper-alpha) ") ";
}
li::before {
- content: counters(count, ".", decimal-leading-zero) " == " counters(
- count,
- ".",
- lower-alpha
- );
+ content: counters(count, ".", decimal-leading-zero) " == "
+ counters(count, ".", lower-alpha);
}
```
diff --git a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 1396cf32b04dca..a23f4612cc50ce 100644
--- a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -38,8 +38,8 @@ l10n:
.multi-bg-example {
width: 100%;
height: 400px;
- background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(30
- 75 115 / 100%), rgb(255 255 255 / 0%));
+ background-image: url(firefox.png), url(bubbles.png),
+ linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
diff --git a/files/ja/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-vertical-lr.png b/files/ja/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-vertical-lr.png
deleted file mode 100644
index 2bf52fee06f7e6..00000000000000
Binary files a/files/ja/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-vertical-lr.png and /dev/null differ
diff --git a/files/ja/web/css/css_images/using_css_gradients/index.md b/files/ja/web/css/css_images/using_css_gradients/index.md
index 99c2638c4f3e89..46adb54a94bb98 100644
--- a/files/ja/web/css/css_images/using_css_gradients/index.md
+++ b/files/ja/web/css/css_images/using_css_gradients/index.md
@@ -354,7 +354,8 @@ div {
217deg,
rgba(255, 0, 0, 0.8),
rgba(255, 0, 0, 0) 70.71%
- ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+ ),
+ linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}
```
@@ -609,7 +610,8 @@ div {
circle at 93.3% 75%,
rgba(0, 255, 0, 0.5),
rgba(0, 255, 0, 0) 70.71%
- ) beige;
+ )
+ beige;
border-radius: 50%;
}
```
@@ -757,7 +759,8 @@ div {
rgba(75, 0, 130, 0.5) 240px,
rgba(238, 130, 238, 0.5) 280px,
rgba(255, 0, 0, 0.5) 300px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-190deg,
rgba(255, 0, 0, 0.5) 30px,
rgba(255, 153, 0, 0.5) 60px,
@@ -767,8 +770,18 @@ div {
rgba(75, 0, 130, 0.5) 180px,
rgba(238, 130, 238, 0.5) 210px,
rgba(255, 0, 0, 0.5) 230px
- ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
- 200px, blue 250px, indigo 300px, violet 350px, red 370px);
+ ),
+ repeating-linear-gradient(
+ 23deg,
+ red 50px,
+ orange 100px,
+ yellow 150px,
+ green 200px,
+ blue 250px,
+ indigo 300px,
+ violet 350px,
+ red 370px
+ );
}
```
@@ -805,7 +818,8 @@ div {
transparent 116px,
rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
0deg,
transparent,
transparent 50px,
@@ -819,18 +833,21 @@ div {
transparent 116px,
rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
rgba(143, 77, 63, 0.25) 5px,
rgba(143, 77, 63, 0.25) 10px
- ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
- 143,
- 77,
- 63,
- 0.25
- ) 5px, rgba(143, 77, 63, 0.25) 10px);
+ ),
+ repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 5px,
+ rgba(143, 77, 63, 0.25) 5px,
+ rgba(143, 77, 63, 0.25) 10px
+ );
background: repeating-linear-gradient(
90deg,
@@ -840,7 +857,8 @@ div {
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
0deg,
transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
@@ -848,16 +866,17 @@ div {
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-45deg,
transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px
- ), repeating-linear-gradient(45deg, transparent 0 5px, rgba(
- 143,
- 77,
- 63,
- 0.25
- ) 5px 10px);
+ ),
+ repeating-linear-gradient(
+ 45deg,
+ transparent 0 5px,
+ rgba(143, 77, 63, 0.25) 5px 10px
+ );
}
```
@@ -913,14 +932,16 @@ div {
rgba(0, 0, 0, 0.5) 15px,
rgba(255, 255, 255, 0.5) 15px,
rgba(255, 255, 255, 0.5) 30px
- ) top left no-repeat,
+ )
+ top left no-repeat,
repeating-radial-gradient(
ellipse at 20% 50%,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5) 10px,
rgba(255, 255, 255, 0.5) 10px,
rgba(255, 255, 255, 0.5) 20px
- ) top left no-repeat yellow;
+ )
+ top left no-repeat yellow;
background-size:
200px 200px,
150px 150px;
diff --git a/files/ja/web/css/css_media_queries/printing/index.md b/files/ja/web/css/css_media_queries/printing/index.md
index 121e04b6bab14c..03c3b87e9bc8b2 100644
--- a/files/ja/web/css/css_media_queries/printing/index.md
+++ b/files/ja/web/css/css_media_queries/printing/index.md
@@ -3,6 +3,8 @@ title: 印刷
slug: Web/CSS/CSS_media_queries/Printing
---
+{{CSSRef}}
+
コンテンツを印刷するときに、ウェブサイトまたはアプリケーションで使い勝手を向上させたい場合があります。考えられるシナリオはいくつかあります。
- 紙の大きさと形状を生かしてレイアウトを調整したい
diff --git a/files/ja/web/css/env/index.md b/files/ja/web/css/env/index.md
index 32897832b1f84b..3bb0d659ea67ed 100644
--- a/files/ja/web/css/env/index.md
+++ b/files/ja/web/css/env/index.md
@@ -56,10 +56,8 @@ You can then use `env()` in your CSS:
```css
body {
- padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
- safe-area-inset-bottom,
- 20px
- ) env(safe-area-inset-left, 20px);
+ padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+ env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}
```
@@ -136,10 +134,8 @@ button {
p {
width: 300px;
border: 2px solid red;
- padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
- safe-area-inset-bottom,
- 50px
- ) env(SAFE-AREA-INSET-LEFT, 50px);
+ padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
+ env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
}
```
diff --git a/files/ja/web/css/filter/index.md b/files/ja/web/css/filter/index.md
index 87ba45fcbf4751..70fe5ce39fc34f 100644
--- a/files/ja/web/css/filter/index.md
+++ b/files/ja/web/css/filter/index.md
@@ -196,8 +196,8 @@ img:nth-of-type(2) {
```css
#MDN-logo {
border: 1px solid blue;
- filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
- red);
+ filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
+ drop-shadow(5px 5px 0 red);
}
```
diff --git a/files/ja/web/css/fit-content/index.md b/files/ja/web/css/fit-content/index.md
index 3dee85c2385c7a..62c1291547bbec 100644
--- a/files/ja/web/css/fit-content/index.md
+++ b/files/ja/web/css/fit-content/index.md
@@ -56,7 +56,7 @@ block-size: fit-content;
#### 結果
-{{EmbedLiveSample("Using_fit-content_for_box_sizing", "100%", 200)}}
+{{EmbedLiveSample("fit-content を使用してボックスの大きさを指定", "100%", 200)}}
## 仕様書
diff --git a/files/ja/web/css/gradient/conic-gradient/index.md b/files/ja/web/css/gradient/conic-gradient/index.md
index 9f6283ef19c8eb..12e02fdab1a761 100644
--- a/files/ja/web/css/gradient/conic-gradient/index.md
+++ b/files/ja/web/css/gradient/conic-gradient/index.md
@@ -202,7 +202,8 @@ div {
#000 0.25turn 0.5turn,
#fff 0.5turn 0.75turn,
#000 0.75turn
- ) top left / 25% 25% repeat;
+ )
+ top left / 25% 25% repeat;
border: 1px solid;
}
```
diff --git a/files/ja/web/css/grid-auto-columns/index.md b/files/ja/web/css/grid-auto-columns/index.md
index 5a9e747b8170b7..ce1f67396cf455 100644
--- a/files/ja/web/css/grid-auto-columns/index.md
+++ b/files/ja/web/css/grid-auto-columns/index.md
@@ -49,7 +49,8 @@ grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
-grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
+ minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
/* グローバル値 */
diff --git a/files/ja/web/css/image-orientation/index.md b/files/ja/web/css/image-orientation/index.md
index bc7869f4759243..ca9fc434aad72f 100644
--- a/files/ja/web/css/image-orientation/index.md
+++ b/files/ja/web/css/image-orientation/index.md
@@ -25,9 +25,9 @@ image-orientation: unset;
### 値
- `none`
- - : 既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
+ - : 追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
- `from-image`
- - : 画像に含まれている [EXIF](https://ja.wikipedia.org/wiki/EXIF) 情報を使用して、画像の向きを適切にします。
+ - : 既定の初期値です。画像に含まれている [EXIF](https://ja.wikipedia.org/wiki/EXIF) 情報を使用して、画像の向きを適切にします。
## 解説
diff --git a/files/ja/web/css/justify-content/index.md b/files/ja/web/css/justify-content/index.md
index 61dd5666a8649b..2d09dc31a91269 100644
--- a/files/ja/web/css/justify-content/index.md
+++ b/files/ja/web/css/justify-content/index.md
@@ -1,6 +1,8 @@
---
title: justify-content
slug: Web/CSS/justify-content
+l10n:
+ sourceCommit: e74f78ed12aca24b14c2b47f3a170d538b56d2fc
---
{{CSSRef}}
@@ -11,7 +13,7 @@ slug: Web/CSS/justify-content
{{EmbedInteractiveExample("pages/css/justify-content.html")}}
-長さや自動マージンが適用された後に配置が行われることから、[フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)で {{cssxref("flex-grow")}} が `0` ではないフレックス要素が少なくとも 1 つある場合は利用可能な空間がなくなりますので、このプロパティの効果はないでしょう。
+配置は長さや auto マージンが適用された後に行われますので、[フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)で {{cssxref("flex-grow")}} が `0` ではないフレックス要素が 1 つ移譲ある場合は利用可能な空間がなくなりますので、このプロパティの効果はなくなります。
## 構文
@@ -36,10 +38,11 @@ justify-content: space-between; /* 各アイテムを均等に配置し
最初のアイテムは先頭に寄せ、
最後のアイテムは末尾に寄せる */
justify-content: space-around; /* 各アイテムを均等に配置し
- 各アイテムの両側に半分の大きさの
- 間隔を置く */
+ 先頭と末尾の間隔は、各アイテムの間隔の
+ 半分の大きさになる */
justify-content: space-evenly; /* 各アイテムを均等に配置し
- 各アイテムの周りに同じ大きさの間隔を置く */
+ 先頭と末尾と各アイテムの周りには、
+ 同じ大きさの間隔を置く */
justify-content: stretch; /* 各アイテムを均等に配置し
サイズが 'auto' であるアイテムは、
コンテナーに合わせて引き伸ばす */
@@ -52,6 +55,7 @@ justify-content: unsafe center;
justify-content: inherit;
justify-content: initial;
justify-content: revert;
+justify-content: revert-layer;
justify-content: unset;
```
@@ -62,22 +66,19 @@ justify-content: unset;
- `end`
- : 各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
- `flex-start`
- - : 各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
+ - : 各アイテムは、フレックスコンテナーの主軸の先頭側を基準に、配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。
- `flex-end`
- - : 各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
+ - : 各アイテムは、フレックスコンテナーの主軸の末尾側を基準に、配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。
- `center`
- : 各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。
- `left`
- - : 各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。
+ - : アイテムは配置コンテナーの左端に向かって同じ高さに詰められます。プロパティの水平軸がインライン軸と平行でない場合、例えば [`flex-direction: column;`](/ja/docs/Web/CSS/flex-direction) が設定されている場合、この値は `start` のように動作します。
- `right`
- - : 各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。
+ - : アイテムは、適切な軸で配置コンテナーの右端に向かって、互いに同じ高さに詰められます。このプロパティの軸が（グリッドコンテナーの）インライン軸や（フレックスボックスコンテナーの）主軸と平行でない場合、この値は `start` のように動作します。
- `normal`
- - : 各アイテムは `justify-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの `stretch` として動作します。
-- `baseline`, `first baseline`, `last baseline`
- - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
- `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。
+ - : `stretch` として動作します。ただし、[`column-width`](/ja/docs/Web/CSS/column-width) が `auto` でない段組みコンテナーの場合、段はコンテナーいっぱいに引き延ばされるのではなく、指定した `column-width` の幅を取ります。フレックスコンテナーでは `stretch` は `start` として動作するので、`normal` も `start` として動作します。
- `space-between`
- : 各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。
- `space-around`
@@ -88,12 +89,12 @@ justify-content: unset;
- : 各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。
- > **メモ:** `stretch` はフレキシブルボックス (フレックスボックス) は対応していません。
+ > **メモ:** [フレックスボックス](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)では、`stretch` の値は `flex-start` または `start` として動作します。そのため、伸縮は {{CSSXref("flex-grow")}} プロパティを使用して制御します。
- `safe`
- - : 配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが `start` であったかのように配置されます。
+ - : アイテムが配置コンテナーをあふれる場合、そのアイテムは配置モードが `start` であるかのように配置されます。指定した配置は行われません。
- `unsafe`
- - : 配置キーワードと共に使用します。アイテムと配置コンテナーの相対的な寸法にかかわらず、またあふれることによってデータの損失が発生するかどうかにかかわらず、指定した値を尊重します。
+ - : アイテムが配置コンテナーをあふれる場合でも、指定した配置が実行されます。あふれ防止を優先して、希望する配置を行う `safe` とは異なります。
## 公式定義
@@ -136,9 +137,6 @@ justify-content: unset;
<option value="center">center</option>
<option value="left">left</option>
<option value="right">right</option>
- <option value="baseline">baseline</option>
- <option value="first baseline">first baseline</option>
- <option value="last baseline">last baseline</option>
<option value="space-between" selected>space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
@@ -147,15 +145,15 @@ justify-content: unset;
```
```js hidden
-var justifyContent = document.getElementById("justifyContent");
-justifyContent.addEventListener("change", function (evt) {
+const justifyContent = document.getElementById("justifyContent");
+justifyContent.addEventListener("change", (evt) => {
document.getElementById("container").style.justifyContent = evt.target.value;
});
```
#### 結果
-{{EmbedLiveSample("フレックスアイテムの配分の設定", "100%", 180)}}
+{{EmbedLiveSample("Setting_flex_item_distribution", "100%", 180)}}
## 仕様書
@@ -170,4 +168,4 @@ justifyContent.addEventListener("change", function (evt) {
- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
- CSS フレックスボックスガイド: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
- CSS グリッドガイド: _[グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_
-- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)
+- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)
diff --git a/files/ja/web/css/justify-tracks/index.md b/files/ja/web/css/justify-tracks/index.md
deleted file mode 100644
index 79edf6be95898e..00000000000000
--- a/files/ja/web/css/justify-tracks/index.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: justify-tracks
-slug: Web/CSS/justify-tracks
----
-
-{{CSSRef}}
-
-{{SeeCompatTable}}
-
-**`align-tracks`** は CSS のプロパティで、インライン軸が[組積](/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout)であるグリッドコンテナーの組積軸の配置を設定します。
-
-## 構文
-
-```css
-/* キーワード値 */
-justify-tracks: start;
-justify-tracks: space-between;
-justify-tracks: center;
-justify-tracks: start, center, end;
-
-/* グローバル値 */
-justify-tracks: inherit;
-justify-tracks: initial;
-justify-tracks: revert;
-justify-tracks: unset;
-```
-
-このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。
-
-値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。
-
-### 値
-
-- `start`
- - : アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。
-- `end`
- - : アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。
-- `center`
- - : アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。
-- `normal`
- - : `start` として動作します。
-- `space-between`
- - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。
-- `space-around`
- - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。
-- `space-evenly`
- - : アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。
-- `stretch`
- - : アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。
-- `left`
- - : 配置コンテナーの左端に向かって、アイテム同士が互いに詰められます。
-- `right`
- - : 配置コンテナーの右端に向かって、アイテム同士が互いに詰められます。
-
-## 公式定義
-
-{{cssinfo}}
-
-## 形式文法
-
-{{csssyntax}}
-
-## 例
-
-### justify-tracks に複数の値がある組積レイアウト
-
-{{EmbedGHLiveSample("css-examples/grid/masonry/justify-tracks.html", '100%', 1000)}}
-
-## 仕様書
-
-{{Specifications}}
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- 関連する CSS プロパティ: {{cssxref("align-tracks")}}, {{cssxref("masonry-auto-flow")}}
diff --git a/files/ja/web/css/mask-image/index.md b/files/ja/web/css/mask-image/index.md
index 6d24114e69e87d..cdc4cb2a753dd4 100644
--- a/files/ja/web/css/mask-image/index.md
+++ b/files/ja/web/css/mask-image/index.md
@@ -20,7 +20,8 @@ mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);
/* 複数の値 */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);
+mask-image: image(url(mask.png), skyblue),
+ linear-gradient(rgba(0, 0, 0, 1), transparent);
/* グローバル値 */
mask-image: inherit;
diff --git a/files/ja/web/css/scroll-behavior/index.md b/files/ja/web/css/scroll-behavior/index.md
index de3c501676b904..aca3f1233e05d0 100644
--- a/files/ja/web/css/scroll-behavior/index.md
+++ b/files/ja/web/css/scroll-behavior/index.md
@@ -99,7 +99,7 @@ nav {
#### 結果
-{{ EmbedLiveSample("Setting_smooth_scroll_behavior", "100%", 250) }}
+{{ EmbedLiveSample("スクロールの動きをスムーズに設定", "100%", 250) }}
## 仕様書
diff --git a/files/ja/web/css/transform-function/matrix3d/index.md b/files/ja/web/css/transform-function/matrix3d/index.md
index 6c17e0f30802da..be96daf0adf2ab 100644
--- a/files/ja/web/css/transform-function/matrix3d/index.md
+++ b/files/ja/web/css/transform-function/matrix3d/index.md
@@ -103,24 +103,8 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
#example-element:hover,
#example-element:focus {
- transform: rotate3d(1, 1, 1, 30deg) matrix3d(
- 1,
- 0,
- 0,
- 0,
- 0,
- 1,
- 6,
- 0,
- 0,
- 0,
- 1,
- 0,
- 50,
- 100,
- 0,
- 1.1
- );
+ transform: rotate3d(1, 1, 1, 30deg)
+ matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}
.face {
diff --git a/files/ja/web/demos/index.md b/files/ja/web/demos/index.md
deleted file mode 100644
index c2b8a834345128..00000000000000
--- a/files/ja/web/demos/index.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: オープンウェブ技術のデモ
-slug: Web/Demos
-l10n:
- sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
----
-
-Mozilla は多種多様なオープンウェブ技術に対応しており、使用を推奨しています。このページでは、これらの技術の興味深いデモンストレーションへのリンクを提供しています。
-
-もしオープンウェブ技術の優れたデモンストレーションやアプリケーションをご存知でしたら、ここの適切な節にリンクを追加してください。
-
-## 2D グラフィック
-
-### キャンバス
-
-- [Blob Sallad: an interactive blob using JavaScript and canvas](https://www.blobsallad.se/) ([code demos)](https://web.archive.org/web/20190807191003/https://blobsallad.se/article/)
-- [miniPaint: Image editor](https://viliusle.github.io/miniPaint/) ([source code](https://github.com/viliusle/miniPaint))
-- [Zen Photon Garden](https://zenphoton.com) ([source code](https://github.com/scanlime/zenphoton))
-- [Multi touch in canvas demo](https://maximumroulette.com/) ([source code](https://github.com/zlatnaspirala/multi-touch-canvas-handler))
-
-### SVG
-
-- [Bubblemenu](https://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml) (visual effects and interaction)
-- [Blobular](https://www.themaninblue.com/experiment/Blobular/) (interactive)
-- [Summer HTML image map creator](https://summerstyle.github.io/summer/) ([source code](https://github.com/summerstyle/summer))
-
-### Video
-
-- [Video 3D Animation "mozilla constantly evolving"](https://vimeo.com/172328210)
-- [Video 3D Animation "Floating Dance"](https://vimeo.com/173851395)
-- [Video 3D Animation "The Gravel Institute: Monopoly](https://vimeo.com/560300715)
-
-## 3D グラフィック
-
-### WebGL
-
-- [Web Audio Fireworks](https://ondras.github.io/fireworks-webgl/)
-- [Aquarium](https://webglsamples.org/aquarium/aquarium.html)
-- [Dynamic cubemap](https://webglsamples.org/dynamic-cubemap/dynamic-cubemap.html)
-- [Kai 'Opua](https://collinhover.github.io/kaiopua/) ([source code](https://github.com/collinhover/kaiopua))
-
-### バーチャルリアリティ
-
-- The Polar Sea ([source code](https://github.com/MozillaReality/polarsea))
-- [Sechelt fly-through](https://mozvr.github.io/sechelt/) ([source code](https://github.com/MozillaReality/sechelt))
-
-## CSS
-
-- [CSS floating logo "mozilla"](https://codepen.io/SoftwareRVGdesignS/pen/OXZOWj)
-- [CSS Blockout](https://ondras.github.io/blockout/)
-- [Rubik's cube](https://ondras.github.io/rubik/)
-- [Loader with blend modes](https://codepen.io/equinusocio/full/qjyXPP/)
-- [CSS-based single page application](https://dmytsv.github.io/sass-spa/index.html#home) ([source code](https://github.com/dmytsv/sass-spa))
-
-### 座標変換
-
-- [Impress.js](https://impress.js.org/) ([source code](https://github.com/impress/impress.js))
-- [Flickr Polaroid Stack](https://ohiodave.com/tests/css2d/flickr.html)
-
-## ゲーム
-
-- IoQuake3 ([source code](https://github.com/klaussilveira/ioquake3.js))
-- [Kai 'Opua](https://collinhover.github.io/kaiopua/) ([source code](https://github.com/collinhover/kaiopua))
-
-## ウェブ API
-
-### 通知 API
-
-- [HTML Notifications](https://elfoxero.github.io/html5notifications/) ([source code](https://github.com/elfoxero/html5notifications))
-
-### ウェブオーディオ API
-
-- [Audio Context states demo](https://mdn.github.io/webaudio-examples/audiocontext-states/)
-- [Audio analyser - graphical visualization of an audio signal](https://mdn.github.io/webaudio-examples/audio-analyser/)
-- [IIR filter node](https://mdn.github.io/webaudio-examples/iirfilter-node/)
-- [Multi track](https://mdn.github.io/webaudio-examples/multi-track/)
-- [Stereo-panner-node](https://mdn.github.io/webaudio-examples/stereo-panner-node/)
-
-### ファイル API
-
-- [Slide My Text - presentation from plain text files](https://palerdot.in/slide-my-text/)
-
-### ウェブワーカー
-
-- [Web Worker Fractals](https://ondras.github.io/fractal/)
-- [Photo editor](https://ondras.github.io/photo/)
-- [Coral generator](https://ondras.github.io/coral/)
-- [Raytracer](https://nerget.com/rayjs-mt/rayjs.html)
-- [Fibonacci](https://mdn.github.io/dom-examples/web-workers/fibonacci-worker/)
diff --git a/files/ja/web/events/index.md b/files/ja/web/events/index.md
index 88c8b5a4c1fdb9..834e95d1af3d93 100644
--- a/files/ja/web/events/index.md
+++ b/files/ja/web/events/index.md
@@ -1,6 +1,8 @@
---
title: イベントリファレンス
slug: Web/Events
+l10n:
+ sourceCommit: 829db137a01feb14af7beaec178a3ea0118b4777
---
[イベント](/ja/docs/Learn/JavaScript/Building_blocks/Events)は、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化 (バッテリー残量の低下や OS のメディアイベントなど)、その他の原因によって発行されます。
@@ -24,33 +26,61 @@ slug: Web/Events
<td>アニメーション</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Web_Animations_API">Web Animation API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション API</a> に関するイベント。
</p>
<p>
アニメーション状態の変化 (例えば、アニメーションの開始または終了) に応答するために使用される。
</p>
</td>
<td>
- アニメーションイベントは <a href="/ja/docs/Web/API/Document#animation_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/Window#animation_events"><code>Window</code></a>, <a href="/ja/docs/Web/API/HTMLElement#animation_events"><code>HTMLElement</code></a> で発行される。
+ アニメーションイベントは
+ <a href="/ja/docs/Web/API/Document#アニメーションイベント"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/Window#アニメーションイベント"
+ ><code>Window</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLElement#アニメーションイベント"
+ ><code>HTMLElement</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>非同期データ読み取り</td>
<td><p>データの読み取りに関するイベント。</p></td>
<td>
- イベントは <a href="/ja/docs/Web/API/AbortSignal#events"><code>AbortSignal</code></a>, <a href="/ja/docs/Web/API/XMLHttpRequest#events"><code>XMLHttpRequest</code></a>, <a href="/ja/docs/Web/API/FileReader#events"><code>FileReader</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/AbortSignal#イベント"
+ ><code>AbortSignal</code></a
+ >,
+ <a href="/ja/docs/Web/API/XMLHttpRequest#イベント"
+ ><code>XMLHttpRequest</code></a
+ >,
+ <a href="/ja/docs/Web/API/FileReader#イベント"
+ ><code>FileReader</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>クリップボード</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Clipboard_API">Clipboard API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Clipboard_API">クリップボード API</a>
+ に関するイベント。
</p>
<p>コンテンツが切り取り、コピー、貼り付けされたときを知るために使用。</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Document#clipboard_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/Element#clipboard_events"><code>Element</code></a>, <a href="/ja/docs/Web/API/Window#clipboard_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Document#クリップボード"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/Element#クリップボード"
+ ><code>Element</code></a
+ >,
+ <a href="/ja/docs/Web/API/Window#クリップボード"
+ ><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -65,21 +95,32 @@ slug: Web/Events
<p>訳注: 日本語のかな漢字変換も含む。</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Element#composition_events"><code>Element</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Element#構成イベント"
+ ><code>Element</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>CSS トランジション</td>
<td>
<p>
- <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>に関するイベント。
+ <a href="/ja/docs/Web/CSS/CSS_transitions">CSS トランジション</a>に関するイベント。
</p>
<p>
CSS トランジションの開始、終了、キャンセルなどの時の通知イベントを提供する。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Document#transition_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/HTMLElement#transition_events"><code>HTMLElement</code></a>, <a href="/ja/docs/Web/API/Window#transition_events"><code>Window</code></a> で発行される。
+ イベントは <a href="/ja/docs/Web/API/Document#トランジションイベント"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLElement#トランジションイベント"
+ ><code>HTMLElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/Window#トランジションイベント"
+ ><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -90,7 +131,19 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/IDBDatabase#events"><code>IDBDatabase</code></a>, <a href="/ja/docs/Web/API/IDBOpenDBRequest#events"><code>IDBOpenDBRequest</code></a>, <a href="/ja/docs/Web/API/IDBRequest#events"><code>IDBRequest</code></a>, <a href="/ja/docs/Web/API/IDBTransaction#events"><code>IDBTransaction</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/IDBDatabase#イベント"
+ ><code>IDBDatabase</code></a
+ >,
+ <a href="/ja/docs/Web/API/IDBOpenDBRequest#イベント"
+ ><code>IDBOpenDBRequest</code></a
+ >,
+ <a href="/ja/docs/Web/API/IDBRequest#イベント"
+ ><code>IDBRequest</code></a
+ >,
+ <a href="/ja/docs/Web/API/IDBTransaction#イベント"
+ ><code>IDBTransaction</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -105,7 +158,10 @@ slug: Web/Events
<p>
<strong>警告:</strong>
<a href="/ja/docs/Web/API/MutationEvent">Mutation イベント</a>は非推奨です。
- 代わりに <a href="/ja/docs/Web/API/MutationObserver">Mutation Observer</a> を使用してください。
+ 代わりに <a href="/ja/docs/Web/API/MutationObserver"
+ >Mutation Observer</a
+ >
+ を使用してください。
</p>
</div>
</td>
@@ -114,7 +170,10 @@ slug: Web/Events
<td>ドラッグ＆ドロップ、ホイール</td>
<td>
<p>
- <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> に関するイベントや<a href="/ja/docs/Web/API/WheelEvent">ホイールイベント</a>。
+ <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API"
+ >HTML ドラッグ＆ドロップ API</a
+ >
+ に関するイベントや<a href="/ja/docs/Web/API/WheelEvent">ホイールイベント</a>。
</p>
<p>
ドラッグイベントやホイールイベントは、マウスイベントから派生したものです。これらのイベントは、マウスホイールやドラッグ/ドロップを使用したときに発行されますが、他の適切なハードウェアでも使用されることがあります。
@@ -122,10 +181,16 @@ slug: Web/Events
</td>
<td>
<p>
- ドラッグイベントは <a href="/ja/docs/Web/API/Document#drag_drop_events"><code>Document</code></a> で発行される。
+ ドラッグイベントは
+ <a href="/ja/docs/Web/API/Document#drag_drop_events"
+ ><code>Document</code></a
+ > で発行される。
</p>
<p>
- ホイールイベントは <a href="/ja/docs/Web/API/Document/wheel_event"><code>Document</code></a> および <a href="/ja/docs/Web/API/Element/wheel_event"><code>Element</code></a> で発行される。
+ ホイールイベントは
+ <a href="/ja/docs/Web/API/Element/wheel_event"
+ ><code>Element</code></a
+ > で発行される。
</p>
</td>
</tr>
@@ -133,7 +198,11 @@ slug: Web/Events
<td>フォーカス</td>
<td><p>要素がフォーカスを得たり失ったりすることに関するイベント。</p></td>
<td>
- イベントは <a href="/ja/docs/Web/API/Element#focus_events"><code>Element</code></a>, <a href="/ja/docs/Web/API/Window#focus_events"><code>Window</code></a> で発行される。
+ イベントは <a href="/ja/docs/Web/API/Element#フォーカスイベント"
+ ><code>Element</code></a
+ >,
+ <a href="/ja/docs/Web/API/Window#フォーカスイベント"><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -142,32 +211,45 @@ slug: Web/Events
<p>フォームが構築されたり、リセットされたり、送信されたりすることに関するイベント。</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/HTMLFormElement#events"><code>HTMLFormElement</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/HTMLFormElement#イベント"
+ ><code>HTMLFormElement</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>全画面</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a> に関するイベント。
</p>
<p>
全画面モードとウィンドウモードの間で遷移したとき、この遷移の間でエラーが発生したときの通知に使用。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Document#fullscreen_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/Element#fullscreen_events"><code>Element</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Document#全画面イベント"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/Element#全画面イベント"
+ ><code>Element</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>ゲームパッド</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Gamepad_API">ゲームパッド API</a>
+ に関するイベント。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Window#gamepad_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Window#ゲームパッドイベント"
+ ><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -179,21 +261,30 @@ slug: Web/Events
</td>
<td>
<p>
- イベントは <a href="/ja/docs/Web/API/Document#touch_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/Element#touch_events"><code>Element</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Document#タッチイベント"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/Element#タッチイベント"
+ ><code>Element</code></a
+ > で発行される。
</p>
<p>加えて、いくつもの標準外のジェスチャーイベントが存在する。</p>
<ul>
<li>
- 標準外の WebKit 固有のイベントは <a href="/ja/docs/Web/API/Element#touch_events"><code>Element</code></a>: <a href="/ja/docs/Web/API/Element/gesturestart_event"><code>gesturestart</code> イベント</a>, <a href="/ja/docs/Web/API/Element/gesturechange_event"><code>gesturechange</code> イベント</a>, <a href="/ja/docs/Web/API/Element/gestureend_event"><code>gestureend</code> イベント</a>。
- </li>
- <li>
- 標準外の IE 固有のイベントは <a href="/ja/docs/Web/API/Element#touch_events"><code>Element</code></a>: <a href="/ja/docs/Web/API/Element/MSGestureStart_event"><code>MSGestureStart</code></a>, <a href="/ja/docs/Web/API/Element/MSGestureChange_event"><code>MSGestureChange</code></a>, <a href="/ja/docs/Web/API/Element/MSGestureEnd_event"><code>MSGestureEnd</code></a>, <a href="/ja/docs/Web/API/Element/MSGestureHold_event"><code>MSGestureHold</code></a>, <a href="/ja/docs/Web/API/Element/MSGestureTap_event"><code>MSGestureTap</code></a>。
- </li>
- <li>
- 非推奨/標準外の Mozilla のタッチイベントは <a href="/ja/docs/Web/API/Touch_events/Mozilla_experimental_events">Touch events (Mozilla experimental)</a>
- </li>
- <li>
- <a href="/ja/docs/Web/Events/Mouse_gesture_events">Firefox アドオンのマウスジェスチャーイベント</a>
+ 標準外の WebKit 固有のイベントは
+ <a href="/ja/docs/Web/API/Element#タッチイベント"
+ ><code>Element</code></a
+ >:
+ <a href="/ja/docs/Web/API/Element/gesturestart_event"
+ ><code>gesturestart</code> イベント</a
+ >,
+ <a href="/ja/docs/Web/API/Element/gesturechange_event"
+ ><code>gesturechange</code> イベント</a
+ >,
+ <a href="/ja/docs/Web/API/Element/gestureend_event"
+ ><code>gestureend</code> イベント</a
+ >。
</li>
</ul>
</td>
@@ -202,11 +293,14 @@ slug: Web/Events
<td>履歴</td>
<td>
<p>
- <a href="/ja/docs/Web/API/History_API">History API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/History_API">履歴 API</a> に関するイベント。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Window#history_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Window#履歴イベント"
+ ><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -217,7 +311,16 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/HTMLDetailsElement#events"><code>HTMLDetailsElement</code></a>, <a href="/ja/docs/Web/API/HTMLDialogElement#events"><code>HTMLDialogElement</code></a>, <a href="/ja/docs/Web/API/HTMLSlotElement#events"><code>HTMLSlotElement</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/HTMLDetailsElement#イベント"
+ ><code>HTMLDetailsElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLDialogElement#イベント"
+ ><code>HTMLDialogElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLSlotElement#イベント"
+ ><code>HTMLSlotElement</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -228,7 +331,13 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/HTMLElement#input_events"><code>HTMLElement</code></a>, <a href="/ja/docs/Web/API/HTMLInputElement#events"><code>HTMLInputElement</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/HTMLElement#入力イベント"
+ ><code>HTMLElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLInputElement#イベント"
+ ><code>HTMLInputElement</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -240,7 +349,12 @@ slug: Web/Events
<p>キーが上がった、下がった、押された時の通知に使用する。</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Document#keyboard_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/Element#keyboard_events"><code>Element</code></a> で発行される。
+ イベントは <a href="/ja/docs/Web/API/Document#keyboard_events"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/Element#keyboard_events"
+ ><code>Element</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -248,7 +362,13 @@ slug: Web/Events
<td><p>文書の読み込みやアンロードに関するイベント。</p></td>
<td>
<p>
- イベントは <a href="/ja/docs/Web/API/Document#load_unload_events"><code>Document</code></a> や <a href="/ja/docs/Web/API/Window#load_unload_events"><code>Window</code></a> で発行される。
+ イベントは <a href="/ja/docs/Web/API/Document#ロード＆アンロードイベント"
+ ><code>Document</code></a
+ >
+ や
+ <a href="/ja/docs/Web/API/Window#ロード＆アンロードイベント"
+ ><code>Window</code></a
+ > で発行される。
</p>
</td>
</tr>
@@ -260,18 +380,63 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Window#manifest_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Window#マニフェストイベント"
+ ><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr id="media">
<td>メディア</td>
<td>
<p>
- メディアの使用 (<a href="/ja/docs/Web/API/Media_Streams_API#events">Media Capture and Streams API</a>, <a href="/ja/docs/Web/API/Web_Audio_API#events">Web Audio API</a>, <a href="/ja/docs/Web/API/Picture-in-Picture_API#events">Picture-in-Picture API</a>, など) に関するイベント。
- </p>
- </td>
- <td>
- イベントは <a href="/ja/docs/Web/API/ScriptProcessorNode#events"><code>ScriptProcessorNode</code></a>, <a href="/ja/docs/Web/API/HTMLMediaElement#events"><code>HTMLMediaElement</code></a>, <a href="/ja/docs/Web/API/AudioTrackList#events"><code>AudioTrackList</code></a>, <a href="/ja/docs/Web/API/AudioScheduledSourceNode#events"><code>AudioScheduledSourceNode</code></a>, <a href="/ja/docs/Web/API/MediaRecorder#events"><code>MediaRecorder</code></a>, <a href="/ja/docs/Web/API/MediaStream#events"><code>MediaStream</code></a>, <a href="/ja/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a>, <a href="/ja/docs/Web/API/VideoTrackList#events"><code>VideoTrackList</code></a>, <a href="/ja/docs/Web/API/HTMLTrackElement#events"><code>HTMLTrackElement</code></a>, <a href="/ja/docs/Web/API/OfflineAudioContext#events"><code>OfflineAudioContext</code></a>, <a href="/ja/docs/Web/API/TextTrack#events"><code>TextTrack</code></a>, <a href="/ja/docs/Web/API/TextTrackList#events"><code>TextTrackList</code></a>, <a href="/ja/docs/Web/HTML/Element/audio#events">Element/audio</a>, <a href="/ja/docs/Web/HTML/Element/video#events">Element/video</a> で発行される。
+ メディアの使用 (<a href="/ja/docs/Web/API/Media_Capture_and_Streams_API#イベント"
+ >メディアキャプチャとストリーム API</a
+ >、
+ <a href="/ja/docs/Web/API/Web_Audio_API#イベント">ウェブオーディオ API</a>、
+ <a href="/ja/docs/Web/API/Picture-in-Picture_API#イベント">ピクチャインピクチャ API</a>、など) に関するイベント。
+ </p>
+ </td>
+ <td>
+ イベントは
+ <a href="/ja/docs/Web/API/ScriptProcessorNode#イベント"
+ ><code>ScriptProcessorNode</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLMediaElement#イベント"
+ ><code>HTMLMediaElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/AudioTrackList#イベント"
+ ><code>AudioTrackList</code></a
+ >,
+ <a href="/ja/docs/Web/API/AudioScheduledSourceNode#イベント"
+ ><code>AudioScheduledSourceNode</code></a
+ >,
+ <a href="/ja/docs/Web/API/MediaRecorder#イベント"
+ ><code>MediaRecorder</code></a
+ >,
+ <a href="/ja/docs/Web/API/MediaStream#イベント"
+ ><code>MediaStream</code></a
+ >,
+ <a href="/ja/docs/Web/API/MediaStreamTrack"
+ ><code>MediaStreamTrack</code></a
+ >,
+ <a href="/ja/docs/Web/API/VideoTrackList#イベント"
+ ><code>VideoTrackList</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLTrackElement#イベント"
+ ><code>HTMLTrackElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/OfflineAudioContext#イベント"
+ ><code>OfflineAudioContext</code></a
+ >,
+ <a href="/ja/docs/Web/API/TextTrack#イベント"><code>TextTrack</code></a
+ >,
+ <a href="/ja/docs/Web/API/TextTrackList#イベント"
+ ><code>TextTrackList</code></a
+ >,
+ <a href="/ja/docs/Web/HTML/Element/audio#イベント">Element/audio</a>,
+ <a href="/ja/docs/Web/HTML/Element/video#イベント">Element/video</a>
+ で発行される。
</td>
</tr>
<tr>
@@ -282,7 +447,10 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Window#messaging_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Window#メッセージングイベント"
+ ><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -299,7 +467,10 @@ slug: Web/Events
</p>
</td>
<td>
- マウスイベントは <a href="/ja/docs/Web/API/Element#mouse_events"><code>Element</code></a> で発行されます。
+ マウスイベントは
+ <a href="/ja/docs/Web/API/Element#mouse_events"
+ ><code>Element</code></a
+ > で発行されます。
</td>
</tr>
<tr>
@@ -307,23 +478,40 @@ slug: Web/Events
<td><p>ネットワーク接続が得られた、または失われたことに関するイベント。</p></td>
<td>
<p>
- イベントは <a href="/ja/docs/Web/API/Window#connection_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Window#connection_events"
+ ><code>Window</code></a
+ > で発行される。
</p>
<p>
- イベントは <a href="/ja/docs/Web/API/NetworkInformation#event_handler"><code>NetworkInformation</code></a> (<a href="/ja/docs/Web/API/Network_Information_API">Network Information API</a>) で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/NetworkInformation#event_handler"
+ ><code>NetworkInformation</code></a
+ >
+ (<a href="/ja/docs/Web/API/Network_Information_API"
+ >ネットワーク情報 API</a
+ >) で発行される。
</p>
</td>
</tr>
<tr>
- <td>支払い</td>
+ <td>決済</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Payment_Request_API">Payment Request API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Payment_Request_API"
+ >決済リクエスト API</a
+ > に関するイベント。
</p>
</td>
<td>
<p>
- イベントは <a href="/ja/docs/Web/API/PaymentRequest#events"><code>PaymentRequest</code></a>, <a href="/ja/docs/Web/API/PaymentResponse#events"><code>PaymentResponse</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/PaymentRequest#イベント"
+ ><code>PaymentRequest</code></a
+ >,
+ <a href="/ja/docs/Web/API/PaymentResponse#イベント"
+ ><code>PaymentResponse</code></a
+ > で発行される。
</p>
</td>
</tr>
@@ -331,12 +519,17 @@ slug: Web/Events
<td>パフォーマンス</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Performance_API">High Resolution Time API</a>, <a href="/ja/docs/Web/API/Performance_Timeline">Performance Timeline API</a>, <a href="/ja/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, <a href="/ja/docs/Web/API/User_Timing_API">User Timing API</a>, and <a href="/ja/docs/Web/API/Resource_Timing_API">Resource Timing API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Performance_API"
+ >パフォーマンス API</a
+ > に分類されたパフォーマンス関連仕様書に関するイベント。
</p>
</td>
<td>
<p>
- イベントは <a href="/ja/docs/Web/API/Performance#events"><code>Performance</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Performance#イベント"
+ ><code>Performance</code></a
+ > で発行される。
</p>
</td>
</tr>
@@ -344,21 +537,28 @@ slug: Web/Events
<td>ポインター</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Pointer_events">Pointer Events API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Pointer_events">ポインターイベント API</a> に関するイベント。
</p>
<p>
マウス、タッチ、ペン/スタイラスなどのポインティングデバイスから、ハードウェアに依存しない通知を提供する。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Document#pointer_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/HTMLElement#pointer_events"><code>HTMLElement</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Document#ポインターイベント"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/HTMLElement#ポインターイベント"
+ ><code>HTMLElement</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>印刷</td>
<td><p>印刷に関するイベント。</p></td>
<td>
- イベントは <a href="/ja/docs/Web/API/Window#print_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Window#印刷イベント"><code>Window</code></a> で発行される。
</td>
</tr>
<tr>
@@ -369,7 +569,10 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Window#promise_rejection_events"><code>Window</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Window#プロミス拒否イベント"
+ ><code>Window</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -380,7 +583,7 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/WebSocket#events"><code>Websocket</code></a> で発行される。
+ イベントは <a href="/ja/docs/Web/API/WebSocket#イベント"><code>Websocket</code></a> で発行される。
</td>
</tr>
<tr>
@@ -388,7 +591,16 @@ slug: Web/Events
<td><p>SVG 画像に関するイベント。</p></td>
<td>
<p>
- イベントは <a href="/ja/docs/Web/API/SVGElement#events"><code>SVGElement</code></a>, <a href="/ja/docs/Web/API/SVGAnimationElement#events"><code>SVGAnimationElement</code></a>, <a href="/ja/docs/Web/API/SVGGraphicsElement#events"><code>SVGGraphicsElement</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/SVGElement#イベント"
+ ><code>SVGElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/SVGAnimationElement#イベント"
+ ><code>SVGAnimationElement</code></a
+ >,
+ <a href="/ja/docs/Web/API/SVGGraphicsElement#イベント"
+ ><code>SVGGraphicsElement</code></a
+ > で発行される。
</p>
</td>
</tr>
@@ -401,7 +613,8 @@ slug: Web/Events
</td>
<td>
<p>
- イベントは <a href="/ja/docs/Web/API/Document#selection_events"><code>Document</code></a> で発行
+ イベント (<code>selectionchange</code>) は、
+ {{domxref("HTMLTextAreaElement/selectionchange_event", "HTMLTextAreaElement")}}、{{domxref("HTMLInputElement/selectionchange_event", "HTMLInputElement")}} で発行される。
</p>
</td>
</tr>
@@ -412,26 +625,47 @@ slug: Web/Events
<a href="/ja/docs/Web/API/Touch_events">Touch Events API</a> に関するイベント。
</p>
<p>
- タッチ反応画面 (すなわち指またはスタイラスを使用したもの) の操作による通知イベントを提供する。 <a href="/ja/docs/Web/API/Force_Touch_events#events">Force Touch API</a> に関するものではない。
+ タッチ反応画面 (すなわち指またはスタイラスを使用したもの) の操作による通知イベントを提供する。
+ <a href="/ja/docs/Web/API/Force_Touch_events#イベント"
+ >Force Touch API</a
+ > に関するものではない。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/Document#touch_events"><code>Document</code></a>, <a href="/ja/docs/Web/API/Element#touch_events"><code>Element</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/Document#タッチイベント"
+ ><code>Document</code></a
+ >,
+ <a href="/ja/docs/Web/API/Element#タッチイベント"
+ ><code>Element</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>バーチャルリアリティ</td>
<td>
<p>
- <a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/WebXR_Device_API">WebXR 機器 API</a> に関するイベント。
</p>
<div class="notecard warning">
<p>
- <strong>警告:</strong> <a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> (および関連する <a href="/ja/docs/Web/API/Window#webvr_events"><code>Window</code> イベント</a>) は非推奨です。
+ <strong>警告:</strong> <a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> (および関連する
+ <a href="/ja/docs/Web/API/Window#webvr_イベント"
+ ><code>Window</code> イベント</a
+ >) は非推奨です。
</p>
</div>
</td>
- <td>イベントは <a href="/ja/docs/Web/API/XRSystem#events"><code>XRSystem</code></a>, <a href="/ja/docs/Web/API/XRSession#events"><code>XRSession</code></a>, <a href="/ja/docs/Web/API/XRReferenceSpace#events"><code>XRReferenceSpace</code></a> で発行される。</td>
+ <td>
+ イベントは
+ <a href="/ja/docs/Web/API/XRSystem#イベント"><code>XRSystem</code></a
+ >,
+ <a href="/ja/docs/Web/API/XRSession#イベント"><code>XRSession</code></a
+ >,
+ <a href="/ja/docs/Web/API/XRReferenceSpace#イベント"
+ ><code>XRReferenceSpace</code></a
+ > で発行される。
+ </td>
</tr>
<tr>
<td>RTC (リアルタイムコミュニケーション)</td>
@@ -441,18 +675,35 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/RTCDataChannel#events"><code>RTCDataChannel</code></a>, <a href="/ja/docs/Web/API/RTCDTMFSender#events"><code>RTCDTMFSender</code></a>, <a href="/ja/docs/Web/API/RTCIceTransport#events"><code>RTCIceTransport</code></a>, <a href="/ja/docs/Web/API/RTCPeerConnection#events"><code>RTCPeerConnection</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/RTCDataChannel#イベント"
+ ><code>RTCDataChannel</code></a
+ >,
+ <a href="/ja/docs/Web/API/RTCDTMFSender#イベント"
+ ><code>RTCDTMFSender</code></a
+ >,
+ <a href="/ja/docs/Web/API/RTCIceTransport#イベント"
+ ><code>RTCIceTransport</code></a
+ >,
+ <a href="/ja/docs/Web/API/RTCPeerConnection#イベント"
+ ><code>RTCPeerConnection</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>サーバー送信イベント</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Server-sent_events">server sent events API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Server-sent_events"
+ >サーバー送信イベント API</a
+ > に関するイベント。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/EventSource#events"><code>EventSource</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/EventSource#イベント"
+ ><code>EventSource</code></a
+ > で発行される。
</td>
</tr>
<tr>
@@ -463,560 +714,64 @@ slug: Web/Events
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/SpeechSynthesisUtterance#events"><code>SpeechSynthesisUtterance</code></a> で発行される。
+ イベントは
+ <a href="/ja/docs/Web/API/SpeechSynthesisUtterance#イベント"
+ ><code>SpeechSynthesisUtterance</code></a
+ > で発行される。
</td>
</tr>
<tr>
<td>ワーカー</td>
<td>
<p>
- <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers API</a>, <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a>, <a href="/ja/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API</a>, <a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> に関するイベント。
+ <a href="/ja/docs/Web/API/Web_Workers_API">ウェブワーカー API</a>,
+ <a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー API</a
+ >,
+ <a href="/ja/docs/Web/API/Broadcast_Channel_API"
+ >ブロードキャストチャンネル API</a
+ >,
+ <a href="/ja/docs/Web/API/Channel_Messaging_API"
+ >チャンネルメッセージング API</a
+ > に関するイベント。
</p>
<p>
新しいメッセージやメッセージ送信エラーに応答するために使用されます。サービスワーカーは、プッシュ通知、表示された通知をユーザーがクリックしたこと、プッシュ購読が無効になったこと、コンテンツインデックスからアイテムが削除されたことなど、その他のイベントを通知することもできます。
</p>
</td>
<td>
- イベントは <a href="/ja/docs/Web/API/ServiceWorkerGlobalScope#events"><code>ServiceWorkerGlobalScope</code></a>, <a href="/ja/docs/Web/API/DedicatedWorkerGlobalScope#events"><code>DedicatedWorkerGlobalScope</code></a>, <a href="/ja/docs/Web/API/SharedWorkerGlobalScope#events"><code>SharedWorkerGlobalScope</code></a>, <a href="/ja/docs/Web/API/WorkerGlobalScope#events"><code>WorkerGlobalScope</code></a>, <a href="/ja/docs/Web/API/Worker#events"><code>Worker</code></a>, <a href="/ja/docs/Web/API/WorkerGlobalScope#events"><code>WorkerGlobalScope</code></a>, <a href="/ja/docs/Web/API/BroadcastChannel#events"><code>BroadcastChannel</code></a>, <a href="/ja/docs/Web/API/MessagePort#events"><code>MessagePort</code></a> で発行されます。
+ イベントは
+ <a href="/ja/docs/Web/API/ServiceWorkerGlobalScope#イベント"
+ ><code>ServiceWorkerGlobalScope</code></a
+ >,
+ <a href="/ja/docs/Web/API/DedicatedWorkerGlobalScope#イベント"
+ ><code>DedicatedWorkerGlobalScope</code></a
+ >,
+ <a href="/ja/docs/Web/API/SharedWorkerGlobalScope#イベント"
+ ><code>SharedWorkerGlobalScope</code></a
+ >,
+ <a href="/ja/docs/Web/API/WorkerGlobalScope#イベント"
+ ><code>WorkerGlobalScope</code></a
+ >,
+ <a href="/ja/docs/Web/API/Worker#イベント"
+ ><code>Worker</code></a
+ >,
+ <a href="/ja/docs/Web/API/BroadcastChannel#イベント"
+ ><code>BroadcastChannel</code></a
+ >,
+ <a href="/ja/docs/Web/API/MessagePort#イベント"
+ ><code>MessagePort</code></a
+ > で発行されます。
</td>
</tr>
</tbody>
</table>
-## イベントの一覧
-
-この節では、 MDN に*独自の*リファレンスページを持つイベントをリストアップしています。ここに掲載されていないイベントに興味がある場合は、 MDN の他の部分でその名前、トピック領域、または関連する仕様書を検索してみてください。
-
-- {{DOMxRef("AbortSignal")}}
-
- - [abort イベント](/ja/docs/Web/API/AbortSignal/abort_event)
-
-- {{DOMxRef("AudioScheduledSourceNode")}}
-
- - [ended イベント](/ja/docs/Web/API/AudioScheduledSourceNode/ended_event)
-
-- {{DOMxRef("AudioTrackList")}}
-
- - [addtrack イベント](/ja/docs/Web/API/AudioTrackList/addtrack_event)
- - [change イベント](/ja/docs/Web/API/AudioTrackList/change_event)
- - [removetrack イベント](/ja/docs/Web/API/AudioTrackList/removetrack_event)
-
-- {{DOMxRef("BroadcastChannel")}}
-
- - [messageerror イベント](/ja/docs/Web/API/BroadcastChannel/messageerror_event)
- - [message イベント](/ja/docs/Web/API/BroadcastChannel/message_event)
-
-- {{DOMxRef("DedicatedWorkerGlobalScope")}}
-
- - [messageerror イベント](/ja/docs/Web/API/DedicatedWorkerGlobalScope/messageerror_event)
- - [message イベント](/ja/docs/Web/API/DedicatedWorkerGlobalScope/message_event)
-
-- {{DOMxRef("Document")}}
-
- - [animationcancel イベント](/ja/docs/Web/API/Document/animationcancel_event)
- - [animationend イベント](/ja/docs/Web/API/Document/animationend_event)
- - [animationiteration イベント](/ja/docs/Web/API/Document/animationiteration_event)
- - [animationstart イベント](/ja/docs/Web/API/Document/animationstart_event)
- - [copy イベント](/ja/docs/Web/API/Document/copy_event)
- - [cut イベント](/ja/docs/Web/API/Document/cut_event)
- - [DOMContentLoaded イベント](/ja/docs/Web/API/Document/DOMContentLoaded_event)
- - [dragend イベント](/ja/docs/Web/API/Document/dragend_event)
- - [dragenter イベント](/ja/docs/Web/API/Document/dragenter_event)
- - [dragleave イベント](/ja/docs/Web/API/Document/dragleave_event)
- - [dragover イベント](/ja/docs/Web/API/Document/dragover_event)
- - [dragstart イベント](/ja/docs/Web/API/Document/dragstart_event)
- - [drag イベント](/ja/docs/Web/API/Document/drag_event)
- - [drop イベント](/ja/docs/Web/API/Document/drop_event)
- - [fullscreenchange イベント](/ja/docs/Web/API/Document/fullscreenchange_event)
- - [fullscreenerror イベント](/ja/docs/Web/API/Document/fullscreenerror_event)
- - [gotpointercapture イベント](/ja/docs/Web/API/Document/gotpointercapture_event)
- - [keydown イベント](/ja/docs/Web/API/Document/keydown_event)
- - [keypress イベント](/ja/docs/Web/API/Document/keypress_event)
- - [keyup イベント](/ja/docs/Web/API/Document/keyup_event)
- - [lostpointercapture イベント](/ja/docs/Web/API/Document/lostpointercapture_event)
- - [paste イベント](/ja/docs/Web/API/Document/paste_event)
- - [pointercancel イベント](/ja/docs/Web/API/Document/pointercancel_event)
- - [pointerdown イベント](/ja/docs/Web/API/Document/pointerdown_event)
- - [pointerenter イベント](/ja/docs/Web/API/Document/pointerenter_event)
- - [pointerleave イベント](/ja/docs/Web/API/Document/pointerleave_event)
- - [pointerlockchange イベント](/ja/docs/Web/API/Document/pointerlockchange_event)
- - [pointerlockerror イベント](/ja/docs/Web/API/Document/pointerlockerror_event)
- - [pointermove イベント](/ja/docs/Web/API/Document/pointermove_event)
- - [pointerout イベント](/ja/docs/Web/API/Document/pointerout_event)
- - [pointerover イベント](/ja/docs/Web/API/Document/pointerover_event)
- - [pointerup イベント](/ja/docs/Web/API/Document/pointerup_event)
- - [readystatechange イベント](/ja/docs/Web/API/Document/readystatechange_event)
- - [scroll イベント](/ja/docs/Web/API/Document/scroll_event)
- - [selectionchange イベント](/ja/docs/Web/API/Document/selectionchange_event)
- - [selectstart イベント](/ja/docs/Web/API/Document/selectstart_event)
- - [touchcancel イベント](/ja/docs/Web/API/Document/touchcancel_event)
- - [touchend イベント](/ja/docs/Web/API/Document/touchend_event)
- - [touchmove イベント](/ja/docs/Web/API/Document/touchmove_event)
- - [touchstart イベント](/ja/docs/Web/API/Document/touchstart_event)
- - [transitioncancel イベント](/ja/docs/Web/API/Document/transitioncancel_event)
- - [transitionend イベント](/ja/docs/Web/API/Document/transitionend_event)
- - [transitionrun イベント](/ja/docs/Web/API/Document/transitionrun_event)
- - [transitionstart イベント](/ja/docs/Web/API/Document/transitionstart_event)
- - [visibilitychange イベント](/ja/docs/Web/API/Document/visibilitychange_event)
- - [wheel イベント](/ja/docs/Web/API/Document/wheel_event)
-
-- {{DOMxRef("Element")}}
-
- - [afterscriptexecute イベント](/ja/docs/Web/API/Element/afterscriptexecute_event)
- - [auxclick イベント](/ja/docs/Web/API/Element/auxclick_event)
- - [beforescriptexecute イベント](/ja/docs/Web/API/Element/beforescriptexecute_event)
- - [blur イベント](/ja/docs/Web/API/Element/blur_event)
- - [click イベント](/ja/docs/Web/API/Element/click_event)
- - [compositionend イベント](/ja/docs/Web/API/Element/compositionend_event)
- - [compositionstart イベント](/ja/docs/Web/API/Element/compositionstart_event)
- - [compositionupdate イベント](/ja/docs/Web/API/Element/compositionupdate_event)
- - [contextmenu イベント](/ja/docs/Web/API/Element/contextmenu_event)
- - [copy イベント](/ja/docs/Web/API/Element/copy_event)
- - [cut イベント](/ja/docs/Web/API/Element/cut_event)
- - [dblclick イベント](/ja/docs/Web/API/Element/dblclick_event)
- - [DOMActivate イベント](/ja/docs/Web/API/Element/DOMActivate_event)
- - [DOMMouseScroll イベント](/ja/docs/Web/API/Element/DOMMouseScroll_event)
- - [error イベント](/ja/docs/Web/API/Element/error_event)
- - [focusin イベント](/ja/docs/Web/API/Element/focusin_event)
- - [focusout イベント](/ja/docs/Web/API/Element/focusout_event)
- - [focus イベント](/ja/docs/Web/API/Element/focus_event)
- - [fullscreenchange イベント](/ja/docs/Web/API/Element/fullscreenchange_event)
- - [fullscreenerror イベント](/ja/docs/Web/API/Element/fullscreenerror_event)
- - [gesturechange イベント](/ja/docs/Web/API/Element/gesturechange_event)
- - [gestureend イベント](/ja/docs/Web/API/Element/gestureend_event)
- - [gesturestart イベント](/ja/docs/Web/API/Element/gesturestart_event)
- - [keydown イベント](/ja/docs/Web/API/Element/keydown_event)
- - [keypress イベント](/ja/docs/Web/API/Element/keypress_event)
- - [keyup イベント](/ja/docs/Web/API/Element/keyup_event)
- - [mousedown イベント](/ja/docs/Web/API/Element/mousedown_event)
- - [mouseenter イベント](/ja/docs/Web/API/Element/mouseenter_event)
- - [mouseleave イベント](/ja/docs/Web/API/Element/mouseleave_event)
- - [mousemove イベント](/ja/docs/Web/API/Element/mousemove_event)
- - [mouseout イベント](/ja/docs/Web/API/Element/mouseout_event)
- - [mouseover イベント](/ja/docs/Web/API/Element/mouseover_event)
- - [mouseup イベント](/ja/docs/Web/API/Element/mouseup_event)
- - [mousewheel イベント](/ja/docs/Web/API/Element/mousewheel_event)
- - [msContentZoom イベント](/ja/docs/Web/API/Element/msContentZoom_event)
- - [MSGestureChange イベント](/ja/docs/Web/API/Element/MSGestureChange_event)
- - [MSGestureEnd イベント](/ja/docs/Web/API/Element/MSGestureEnd_event)
- - [MSGestureHold イベント](/ja/docs/Web/API/Element/MSGestureHold_event)
- - [MSGestureStart イベント](/ja/docs/Web/API/Element/MSGestureStart_event)
- - [MSGestureTap イベント](/ja/docs/Web/API/Element/MSGestureTap_event)
- - [MSInertiaStart イベント](/ja/docs/Web/API/Element/MSInertiaStart_event)
- - [MSManipulationStateChanged イベント](/ja/docs/Web/API/Element/MSManipulationStateChanged_event)
- - [paste イベント](/ja/docs/Web/API/Element/paste_event)
- - [scroll イベント](/ja/docs/Web/API/Element/scroll_event)
- - [select イベント](/ja/docs/Web/API/Element/select_event)
- - [show イベント](/ja/docs/Web/API/Element/show_event)
- - [touchcancel イベント](/ja/docs/Web/API/Element/touchcancel_event)
- - [touchend イベント](/ja/docs/Web/API/Element/touchend_event)
- - [touchmove イベント](/ja/docs/Web/API/Element/touchmove_event)
- - [touchstart イベント](/ja/docs/Web/API/Element/touchstart_event)
- - [webkitmouseforcechanged イベント](/ja/docs/Web/API/Element/webkitmouseforcechanged_event)
- - [webkitmouseforcedown イベント](/ja/docs/Web/API/Element/webkitmouseforcedown_event)
- - [webkitmouseforceup イベント](/ja/docs/Web/API/Element/webkitmouseforceup_event)
- - [webkitmouseforcewillbegin イベント](/ja/docs/Web/API/Element/webkitmouseforcewillbegin_event)
- - [wheel イベント](/ja/docs/Web/API/Element/wheel_event)
-
-- {{DOMxRef("EventSource")}}
-
- - [error イベント](/ja/docs/Web/API/EventSource/error_event)
- - [message イベント](/ja/docs/Web/API/EventSource/message_event)
- - [open イベント](/ja/docs/Web/API/EventSource/open_event)
-
-- {{DOMxRef("FileReader")}}
-
- - [abort イベント](/ja/docs/Web/API/FileReader/abort_event)
- - [error イベント](/ja/docs/Web/API/FileReader/error_event)
- - [loadend イベント](/ja/docs/Web/API/FileReader/loadend_event)
- - [loadstart イベント](/ja/docs/Web/API/FileReader/loadstart_event)
- - [load イベント](/ja/docs/Web/API/FileReader/load_event)
- - [progress イベント](/ja/docs/Web/API/FileReader/progress_event)
-
-- {{DOMxRef("HTMLCanvasElement")}}
-
- - [webglcontextcreationerror イベント](/ja/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event)
- - [webglcontextlost イベント](/ja/docs/Web/API/HTMLCanvasElement/webglcontextlost_event)
- - [webglcontextrestored イベント](/ja/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event)
-
-- {{DOMxRef("HTMLDetailsElement")}}
-
- - [toggle イベント](/ja/docs/Web/API/HTMLDetailsElement/toggle_event)
-
-- {{DOMxRef("HTMLDialogElement")}}
-
- - [cancel イベント](/ja/docs/Web/API/HTMLDialogElement/cancel_event)
- - [close イベント](/ja/docs/Web/API/HTMLDialogElement/close_event)
-
-- {{DOMxRef("HTMLElement")}}
-
- - [animationcancel イベント](/ja/docs/Web/API/HTMLElement/animationcancel_event)
- - [animationend イベント](/ja/docs/Web/API/HTMLElement/animationend_event)
- - [animationiteration イベント](/ja/docs/Web/API/HTMLElement/animationiteration_event)
- - [animationstart イベント](/ja/docs/Web/API/HTMLElement/animationstart_event)
- - [beforeinput イベント](/ja/docs/Web/API/HTMLElement/beforeinput_event)
- - [change イベント](/ja/docs/Web/API/HTMLElement/change_event)
- - [gotpointercapture イベント](/ja/docs/Web/API/HTMLElement/gotpointercapture_event)
- - [input イベント](/ja/docs/Web/API/HTMLElement/input_event)
- - [lostpointercapture イベント](/ja/docs/Web/API/HTMLElement/lostpointercapture_event)
- - [pointercancel イベント](/ja/docs/Web/API/HTMLElement/pointercancel_event)
- - [pointerdown イベント](/ja/docs/Web/API/HTMLElement/pointerdown_event)
- - [pointerenter イベント](/ja/docs/Web/API/HTMLElement/pointerenter_event)
- - [pointerleave イベント](/ja/docs/Web/API/HTMLElement/pointerleave_event)
- - [pointermove イベント](/ja/docs/Web/API/HTMLElement/pointermove_event)
- - [pointerout イベント](/ja/docs/Web/API/HTMLElement/pointerout_event)
- - [pointerover イベント](/ja/docs/Web/API/HTMLElement/pointerover_event)
- - [pointerup イベント](/ja/docs/Web/API/HTMLElement/pointerup_event)
- - [transitioncancel イベント](/ja/docs/Web/API/HTMLElement/transitioncancel_event)
- - [transitionend イベント](/ja/docs/Web/API/HTMLElement/transitionend_event)
- - [transitionrun イベント](/ja/docs/Web/API/HTMLElement/transitionrun_event)
- - [transitionstart イベント](/ja/docs/Web/API/HTMLElement/transitionstart_event)
-
-- {{DOMxRef("HTMLFormElement")}}
-
- - [formdata イベント](/ja/docs/Web/API/HTMLFormElement/formdata_event)
- - [reset イベント](/ja/docs/Web/API/HTMLFormElement/reset_event)
- - [submit イベント](/ja/docs/Web/API/HTMLFormElement/submit_event)
-
-- {{DOMxRef("HTMLInputElement")}}
-
- - [invalid イベント](/ja/docs/Web/API/HTMLInputElement/invalid_event)
- - [search イベント](/ja/docs/Web/API/HTMLInputElement/search_event)
-
-- {{DOMxRef("HTMLMediaElement")}}
-
- - [abort イベント](/ja/docs/Web/API/HTMLMediaElement/abort_event)
- - [canplaythrough イベント](/ja/docs/Web/API/HTMLMediaElement/canplaythrough_event)
- - [canplay イベント](/ja/docs/Web/API/HTMLMediaElement/canplay_event)
- - [durationchange イベント](/ja/docs/Web/API/HTMLMediaElement/durationchange_event)
- - [emptied イベント](/ja/docs/Web/API/HTMLMediaElement/emptied_event)
- - [ended イベント](/ja/docs/Web/API/HTMLMediaElement/ended_event)
- - [error イベント](/ja/docs/Web/API/HTMLMediaElement/error_event)
- - [loadeddata イベント](/ja/docs/Web/API/HTMLMediaElement/loadeddata_event)
- - [loadedmetadata イベント](/ja/docs/Web/API/HTMLMediaElement/loadedmetadata_event)
- - [loadstart イベント](/ja/docs/Web/API/HTMLMediaElement/loadstart_event)
- - [pause イベント](/ja/docs/Web/API/HTMLMediaElement/pause_event)
- - [playing イベント](/ja/docs/Web/API/HTMLMediaElement/playing_event)
- - [play イベント](/ja/docs/Web/API/HTMLMediaElement/play_event)
- - [progress イベント](/ja/docs/Web/API/HTMLMediaElement/progress_event)
- - [ratechange イベント](/ja/docs/Web/API/HTMLMediaElement/ratechange_event)
- - [seeked イベント](/ja/docs/Web/API/HTMLMediaElement/seeked_event)
- - [seeking イベント](/ja/docs/Web/API/HTMLMediaElement/seeking_event)
- - [stalled イベント](/ja/docs/Web/API/HTMLMediaElement/stalled_event)
- - [suspend イベント](/ja/docs/Web/API/HTMLMediaElement/suspend_event)
- - [timeupdate イベント](/ja/docs/Web/API/HTMLMediaElement/timeupdate_event)
- - [volumechange イベント](/ja/docs/Web/API/HTMLMediaElement/volumechange_event)
- - [waiting イベント](/ja/docs/Web/API/HTMLMediaElement/waiting_event)
-
-- {{DOMxRef("HTMLSlotElement")}}
-
- - [slotchange イベント](/ja/docs/Web/API/HTMLSlotElement/slotchange_event)
-
-- {{DOMxRef("HTMLTrackElement")}}
-
- - [cuechange イベント](/ja/docs/Web/API/HTMLTrackElement/cuechange_event)
-
-- {{DOMxRef("HTMLVideoElement")}}
-
- - [enterpictureinpicture イベント](/ja/docs/Web/API/HTMLVideoElement/enterpictureinpicture_event)
- - [leavepictureinpicture イベント](/ja/docs/Web/API/HTMLVideoElement/leavepictureinpicture_event)
-
-- {{DOMxRef("IDBDatabase")}}
-
- - [abort イベント](/ja/docs/Web/API/IDBDatabase/abort_event)
- - [close イベント](/ja/docs/Web/API/IDBDatabase/close_event)
- - [error イベント](/ja/docs/Web/API/IDBDatabase/error_event)
- - [versionchange イベント](/ja/docs/Web/API/IDBDatabase/versionchange_event)
-
-- {{DOMxRef("IDBOpenDBRequest")}}
-
- - [blocked イベント](/ja/docs/Web/API/IDBOpenDBRequest/blocked_event)
- - [upgradeneeded イベント](/ja/docs/Web/API/IDBOpenDBRequest/upgradeneeded_event)
-
-- {{DOMxRef("IDBRequest")}}
-
- - [error イベント](/ja/docs/Web/API/IDBRequest/error_event)
- - [success イベント](/ja/docs/Web/API/IDBRequest/success_event)
-
-- {{DOMxRef("IDBTransaction")}}
-
- - [abort イベント](/ja/docs/Web/API/IDBTransaction/abort_event)
- - [complete イベント](/ja/docs/Web/API/IDBTransaction/complete_event)
- - [error イベント](/ja/docs/Web/API/IDBTransaction/error_event)
-
-- {{DOMxRef("MediaDevices")}}
-
- - [devicechange イベント](/ja/docs/Web/API/MediaDevices/devicechange_event)
-
-- {{DOMxRef("MediaRecorder")}}
-
- - [error イベント](/ja/docs/Web/API/MediaRecorder/error_event)
-
-- {{DOMxRef("MediaStream")}}
-
- - [addtrack イベント](/ja/docs/Web/API/MediaStream/addtrack_event)
- - [removetrack イベント](/ja/docs/Web/API/MediaStream/removetrack_event)
-
-- {{DOMxRef("MediaStreamTrack")}}
-
- - [ended イベント](/ja/docs/Web/API/MediaStreamTrack/ended_event)
- - [mute イベント](/ja/docs/Web/API/MediaStreamTrack/mute_event)
- - [unmute イベント](/ja/docs/Web/API/MediaStreamTrack/unmute_event)
-
-- {{DOMxRef("MessagePort")}}
-
- - [messageerror イベント](/ja/docs/Web/API/MessagePort/messageerror_event)
- - [message イベント](/ja/docs/Web/API/MessagePort/message_event)
-
-- {{DOMxRef("OfflineAudioContext")}}
-
- - [complete イベント](/ja/docs/Web/API/OfflineAudioContext/complete_event)
-
-- {{DOMxRef("PaymentRequest")}}
-
- - [merchantvalidation イベント](/ja/docs/Web/API/PaymentRequest/merchantvalidation_event)
- - [paymentmethodchange イベント](/ja/docs/Web/API/PaymentRequest/paymentmethodchange_event)
- - [shippingaddresschange イベント](/ja/docs/Web/API/PaymentRequest/shippingaddresschange_event)
- - [shippingoptionchange イベント](/ja/docs/Web/API/PaymentRequest/shippingoptionchange_event)
-
-- {{DOMxRef("PaymentResponse")}}
-
- - [payerdetailchange イベント](/ja/docs/Web/API/PaymentResponse/payerdetailchange_event)
-
-- {{DOMxRef("Performance")}}
-
- - [resourcetimingbufferfull イベント](/ja/docs/Web/API/Performance/resourcetimingbufferfull_event)
-
-- {{DOMxRef("PictureInPictureWindow")}}
-
- - [resize イベント](/ja/docs/Web/API/PictureInPictureWindow/resize_event)
-
-- {{DOMxRef("RTCDataChannel")}}
-
- - [bufferedamountlow イベント](/ja/docs/Web/API/RTCDataChannel/bufferedamountlow_event)
- - [close イベント](/ja/docs/Web/API/RTCDataChannel/close_event)
- - [closing イベント](/ja/docs/Web/API/RTCDataChannel/closing_event)
- - [error イベント](/ja/docs/Web/API/RTCDataChannel/error_event)
- - [message イベント](/ja/docs/Web/API/RTCDataChannel/message_event)
- - [open イベント](/ja/docs/Web/API/RTCDataChannel/open_event)
-
-- {{DOMxRef("RTCDtlsTransport")}}
-
- - [error イベント](/ja/docs/Web/API/RTCDtlsTransport/error_event)
-
-- {{DOMxRef("RTCDTMFSender")}}
-
- - [tonechange イベント](/ja/docs/Web/API/RTCDTMFSender/tonechange_event)
-
-- {{DOMxRef("RTCIceTransport")}}
-
- - [gatheringstatechange イベント](/ja/docs/Web/API/RTCIceTransport/gatheringstatechange_event)
- - [selectedcandidatepairchange イベント](/ja/docs/Web/API/RTCIceTransport/selectedcandidatepairchange_event)
- - [statechange イベント](/ja/docs/Web/API/RTCIceTransport/statechange_event)
-
-- {{DOMxRef("RTCPeerConnection")}}
-
- - [addstream イベント](/ja/docs/Web/API/RTCPeerConnection/addstream_event)
- - [connectionstatechange イベント](/ja/docs/Web/API/RTCPeerConnection/connectionstatechange_event)
- - [datachannel イベント](/ja/docs/Web/API/RTCPeerConnection/datachannel_event)
- - [icecandidateerror イベント](/ja/docs/Web/API/RTCPeerConnection/icecandidateerror_event)
- - [icecandidate イベント](/ja/docs/Web/API/RTCPeerConnection/icecandidate_event)
- - [iceconnectionstatechange イベント](/ja/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event)
- - [icegatheringstatechange イベント](/ja/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event)
- - [negotiationneeded イベント](/ja/docs/Web/API/RTCPeerConnection/negotiationneeded_event)
- - [removestream イベント](/ja/docs/Web/API/RTCPeerConnection/removestream_event)
- - [signalingstatechange イベント](/ja/docs/Web/API/RTCPeerConnection/signalingstatechange_event)
- - [track イベント](/ja/docs/Web/API/RTCPeerConnection/track_event)
-
-- {{DOMxRef("ScriptProcessorNode")}}
-
- - [audioprocess イベント](/ja/docs/Web/API/ScriptProcessorNode/audioprocess_event)
-
-- {{DOMxRef("ServiceWorkerContainer")}}
-
- - [message イベント](/ja/docs/Web/API/ServiceWorkerContainer/message_event)
-
-- {{DOMxRef("ServiceWorkerGlobalScope")}}
-
- - [activate イベント](/ja/docs/Web/API/ServiceWorkerGlobalScope/activate_event)
- - [contentdelete イベント](/ja/docs/Web/API/ServiceWorkerGlobalScope/contentdelete_event)
- - [install イベント](/ja/docs/Web/API/ServiceWorkerGlobalScope/install_event)
- - [message イベント](/ja/docs/Web/API/ServiceWorkerGlobalScope/message_event)
- - [notificationclick イベント](/ja/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event)
- - [pushsubscriptionchange イベント](/ja/docs/Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event)
- - [push イベント](/ja/docs/Web/API/ServiceWorkerGlobalScope/push_event)
-
-- {{DOMxRef("SharedWorkerGlobalScope")}}
-
- - [connect イベント](/ja/docs/Web/API/SharedWorkerGlobalScope/connect_event)
-
-- {{DOMxRef("SpeechRecognition")}}
-
- - [audioend イベント](/ja/docs/Web/API/SpeechRecognition/audioend_event)
- - [audiostart イベント](/ja/docs/Web/API/SpeechRecognition/audiostart_event)
- - [end イベント](/ja/docs/Web/API/SpeechRecognition/end_event)
- - [error イベント](/ja/docs/Web/API/SpeechRecognition/error_event)
- - [nomatch イベント](/ja/docs/Web/API/SpeechRecognition/nomatch_event)
- - [result イベント](/ja/docs/Web/API/SpeechRecognition/result_event)
- - [soundend イベント](/ja/docs/Web/API/SpeechRecognition/soundend_event)
- - [soundstart イベント](/ja/docs/Web/API/SpeechRecognition/soundstart_event)
- - [speechend イベント](/ja/docs/Web/API/SpeechRecognition/speechend_event)
- - [speechstart イベント](/ja/docs/Web/API/SpeechRecognition/speechstart_event)
- - [start イベント](/ja/docs/Web/API/SpeechRecognition/start_event)
-
-- {{DOMxRef("SpeechSynthesis")}}
-
- - [voiceschanged イベント](/ja/docs/Web/API/SpeechSynthesis/voiceschanged_event)
-
-- {{DOMxRef("SpeechSynthesisUtterance")}}
-
- - [boundary イベント](/ja/docs/Web/API/SpeechSynthesisUtterance/boundary_event)
- - [end イベント](/ja/docs/Web/API/SpeechSynthesisUtterance/end_event)
- - [error イベント](/ja/docs/Web/API/SpeechSynthesisUtterance/error_event)
- - [mark イベント](/ja/docs/Web/API/SpeechSynthesisUtterance/mark_event)
- - [pause イベント](/ja/docs/Web/API/SpeechSynthesisUtterance/pause_event)
- - [resume イベント](/ja/docs/Web/API/SpeechSynthesisUtterance/resume_event)
- - [start イベント](/ja/docs/Web/API/SpeechSynthesisUtterance/start_event)
-
-- {{DOMxRef("SVGAnimationElement")}}
-
- - [beginEvent イベント](/ja/docs/Web/API/SVGAnimationElement/beginEvent_event)
- - [endEvent イベント](/ja/docs/Web/API/SVGAnimationElement/endEvent_event)
- - [repeatEvent イベント](/ja/docs/Web/API/SVGAnimationElement/repeatEvent_event)
-
-- {{DOMxRef("SVGElement")}}
-
- - [abort イベント](/ja/docs/Web/API/SVGElement/abort_event)
- - [error イベント](/ja/docs/Web/API/SVGElement/error_event)
- - [load イベント](/ja/docs/Web/API/SVGElement/load_event)
- - [resize イベント](/ja/docs/Web/API/SVGElement/resize_event)
- - [scroll イベント](/ja/docs/Web/API/SVGElement/scroll_event)
- - [unload イベント](/ja/docs/Web/API/SVGElement/unload_event)
-
-- {{DOMxRef("SVGGraphicsElement")}}
-
- - [copy イベント](/ja/docs/Web/API/SVGGraphicsElement/copy_event)
- - [cut イベント](/ja/docs/Web/API/SVGGraphicsElement/cut_event)
- - [paste イベント](/ja/docs/Web/API/SVGGraphicsElement/paste_event)
-
-- {{DOMxRef("TextTrack")}}
-
- - [cuechange イベント](/ja/docs/Web/API/TextTrack/cuechange_event)
-
-- {{DOMxRef("TextTrackList")}}
-
- - [addtrack イベント](/ja/docs/Web/API/TextTrackList/addtrack_event)
- - [change イベント](/ja/docs/Web/API/TextTrackList/change_event)
- - [removeTrack イベント](/ja/docs/Web/API/TextTrackList/removeTrack_event)
-
-- {{DOMxRef("VideoTrackList")}}
-
- - [addtrack イベント](/ja/docs/Web/API/VideoTrackList/addtrack_event)
- - [change イベント](/ja/docs/Web/API/VideoTrackList/change_event)
- - [removetrack イベント](/ja/docs/Web/API/VideoTrackList/removetrack_event)
-
-- {{DOMxRef("VisualViewport")}}
-
- - [resize イベント](/ja/docs/Web/API/VisualViewport/resize_event)
- - [scroll イベント](/ja/docs/Web/API/VisualViewport/scroll_event)
-
-- {{DOMxRef("WebSocket")}}
-
- - [close イベント](/ja/docs/Web/API/WebSocket/close_event)
- - [error イベント](/ja/docs/Web/API/WebSocket/error_event)
- - [message イベント](/ja/docs/Web/API/WebSocket/message_event)
- - [open イベント](/ja/docs/Web/API/WebSocket/open_event)
-
-- {{DOMxRef("Window")}}
-
- - [afterprint イベント](/ja/docs/Web/API/Window/afterprint_event)
- - [animationcancel イベント](/ja/docs/Web/API/Window/animationcancel_event)
- - [animationend イベント](/ja/docs/Web/API/Window/animationend_event)
- - [animationiteration イベント](/ja/docs/Web/API/Window/animationiteration_event)
- - [animationstart イベント](/ja/docs/Web/API/Window/animationstart_event)
- - [appinstalled イベント](/ja/docs/Web/API/Window/appinstalled_event)
- - [beforeprint イベント](/ja/docs/Web/API/Window/beforeprint_event)
- - [beforeunload イベント](/ja/docs/Web/API/Window/beforeunload_event)
- - [blur イベント](/ja/docs/Web/API/Window/blur_event)
- - [copy イベント](/ja/docs/Web/API/Window/copy_event)
- - [cut イベント](/ja/docs/Web/API/Window/cut_event)
- - [devicemotion イベント](/ja/docs/Web/API/Window/devicemotion_event)
- - [deviceorientation イベント](/ja/docs/Web/API/Window/deviceorientation_event)
- - [DOMContentLoaded イベント](/ja/docs/Web/API/Window/DOMContentLoaded_event)
- - [error イベント](/ja/docs/Web/API/Window/error_event)
- - [focus イベント](/ja/docs/Web/API/Window/focus_event)
- - [gamepadconnected イベント](/ja/docs/Web/API/Window/gamepadconnected_event)
- - [gamepaddisconnected イベント](/ja/docs/Web/API/Window/gamepaddisconnected_event)
- - [hashchange イベント](/ja/docs/Web/API/Window/hashchange_event)
- - [languagechange イベント](/ja/docs/Web/API/Window/languagechange_event)
- - [load イベント](/ja/docs/Web/API/Window/load_event)
- - [messageerror イベント](/ja/docs/Web/API/Window/messageerror_event)
- - [message イベント](/ja/docs/Web/API/Window/message_event)
- - [offline イベント](/ja/docs/Web/API/Window/offline_event)
- - [online イベント](/ja/docs/Web/API/Window/online_event)
- - [orientationchange イベント](/ja/docs/Web/API/Window/orientationchange_event)
- - [pagehide イベント](/ja/docs/Web/API/Window/pagehide_event)
- - [pageshow イベント](/ja/docs/Web/API/Window/pageshow_event)
- - [paste イベント](/ja/docs/Web/API/Window/paste_event)
- - [popstate イベント](/ja/docs/Web/API/Window/popstate_event)
- - [rejectionhandled イベント](/ja/docs/Web/API/Window/rejectionhandled_event)
- - [resize イベント](/ja/docs/Web/API/Window/resize_event)
- - [storage イベント](/ja/docs/Web/API/Window/storage_event)
- - [transitioncancel イベント](/ja/docs/Web/API/Window/transitioncancel_event)
- - [transitionend イベント](/ja/docs/Web/API/Window/transitionend_event)
- - [transitionrun イベント](/ja/docs/Web/API/Window/transitionrun_event)
- - [transitionstart イベント](/ja/docs/Web/API/Window/transitionstart_event)
- - [unhandledrejection イベント](/ja/docs/Web/API/Window/unhandledrejection_event)
- - [unload イベント](/ja/docs/Web/API/Window/unload_event)
- - [vrdisplayactivate イベント](/ja/docs/Web/API/Window/vrdisplayactivate_event)
- - [vrdisplayblur イベント](/ja/docs/Web/API/Window/vrdisplayblur_event)
- - [vrdisplayconnect イベント](/ja/docs/Web/API/Window/vrdisplayconnect_event)
- - [vrdisplaydeactivate イベント](/ja/docs/Web/API/Window/vrdisplaydeactivate_event)
- - [vrdisplaydisconnect イベント](/ja/docs/Web/API/Window/vrdisplaydisconnect_event)
- - [vrdisplayfocus イベント](/ja/docs/Web/API/Window/vrdisplayfocus_event)
- - [vrdisplaypointerrestricted イベント](/ja/docs/Web/API/Window/vrdisplaypointerrestricted_event)
- - [vrdisplaypointerunrestricted イベント](/ja/docs/Web/API/Window/vrdisplaypointerunrestricted_event)
- - [vrdisplaypresentchange イベント](/ja/docs/Web/API/Window/vrdisplaypresentchange_event)
-
-- {{DOMxRef("Worker")}}
-
- - [messageerror イベント](/ja/docs/Web/API/Worker/messageerror_event)
- - [message イベント](/ja/docs/Web/API/Worker/message_event)
-
-- {{DOMxRef("WorkerGlobalScope")}}
-
- - [languagechange イベント](/ja/docs/Web/API/WorkerGlobalScope/languagechange_event)
-
-- {{DOMxRef("XMLHttpRequest")}}
-
- - [abort イベント](/ja/docs/Web/API/XMLHttpRequest/abort_event)
- - [error イベント](/ja/docs/Web/API/XMLHttpRequest/error_event)
- - [loadend イベント](/ja/docs/Web/API/XMLHttpRequest/loadend_event)
- - [loadstart イベント](/ja/docs/Web/API/XMLHttpRequest/loadstart_event)
- - [load イベント](/ja/docs/Web/API/XMLHttpRequest/load_event)
- - [progress イベント](/ja/docs/Web/API/XMLHttpRequest/progress_event)
- - [timeout イベント](/ja/docs/Web/API/XMLHttpRequest/timeout_event)
-
-- {{DOMxRef("XRReferenceSpace")}}
-
- - [reset イベント](/ja/docs/Web/API/XRReferenceSpace/reset_event)
-
-- {{DOMxRef("XRSession")}}
-
- - [end イベント](/ja/docs/Web/API/XRSession/end_event)
- - [inputsourceschange イベント](/ja/docs/Web/API/XRSession/inputsourceschange_event)
- - [selectend イベント](/ja/docs/Web/API/XRSession/selectend_event)
- - [selectstart イベント](/ja/docs/Web/API/XRSession/selectstart_event)
- - [select イベント](/ja/docs/Web/API/XRSession/select_event)
- - [squeezeend イベント](/ja/docs/Web/API/XRSession/squeezeend_event)
- - [squeezestart イベント](/ja/docs/Web/API/XRSession/squeezestart_event)
- - [squeeze イベント](/ja/docs/Web/API/XRSession/squeeze_event)
- - [visibilitychange イベント](/ja/docs/Web/API/XRSession/visibilitychange_event)
-
-- {{DOMxRef("XRSystem")}}
-
- - [devicechange イベント](/ja/docs/Web/API/XRSystem/devicechange_event)
-
## 仕様書
{{Specifications}}
+
+<section id="Quick_links">
+ <ol>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ </ol>{{ListSubpages}}
+</section>
diff --git a/files/ja/web/html/attributes/index.md b/files/ja/web/html/attributes/index.md
index ac3545f5d4e4f7..a72cedf8bdb7dc 100644
--- a/files/ja/web/html/attributes/index.md
+++ b/files/ja/web/html/attributes/index.md
@@ -1,8 +1,9 @@
---
title: HTML 属性リファレンス
+short-title: 属性
slug: Web/HTML/Attributes
l10n:
- sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35
+ sourceCommit: bf671984cfef2f7c6419571d834a146c5424ac10
---
{{HTMLSidebar("Attributes")}}
@@ -751,21 +752,6 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満
<td>{{ HTMLElement("meter") }}</td>
<td>最小値の上限を示します。</td>
</tr>
- <tr>
- <td>
- <code><a href="/ja/docs/Web/HTML/Element/html#manifest">manifest</a></code>
- {{deprecated_inline}}
- </td>
- <td>{{ HTMLElement("html") }}</td>
- <td>
- この文書のキャッシュマニフェストの URL を指定します。
- <div class="note">
- <p>
- <strong>メモ:</strong> この属性は廃止されており、代わりに <a href="/ja/docs/Web/Manifest"><code><link rel="manifest"></code></a> を使用してください。
- </p>
- </div>
- </td>
- </tr>
<tr>
<td>
<code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code>
diff --git a/files/ja/web/html/element/aside/index.md b/files/ja/web/html/element/aside/index.md
index a858b4ccc33a44..c2ccc289591559 100644
--- a/files/ja/web/html/element/aside/index.md
+++ b/files/ja/web/html/element/aside/index.md
@@ -23,7 +23,7 @@ l10n:
### \<aside> の使用
-このれは `<aside>` を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。
+この例は `<aside>` を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。
```html
<article>
diff --git a/files/ja/web/html/element/html/manifest/index.md b/files/ja/web/html/element/html/manifest/index.md
deleted file mode 100644
index 17b128b2ac0cdf..00000000000000
--- a/files/ja/web/html/element/html/manifest/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: manifest
-slug: Web/HTML/Element/html/manifest
-l10n:
- sourceCommit: 4a2b6cafbf9bc5b006eedbdf0e9fdf2c8626d5b6
----
-
-{{securecontext_header}}{{Deprecated_Header}}{{Non-standard_Header}}
-
-**`manifest`** は `<html>` 要素の属性で、ページ読み込みの初期段階でダウンロードされる、アプリケーションキャッシュマニフェストの URL を指定します。
-
-> **メモ:** マニフェストベースのキャッシュ機構は非推奨です。代わりにサービスワーカークリプトを使用してください。
-
-マニフェスト属性はページ読み込みの初期段階でのみ効果を発揮するため、通常の DOM インターフェイスで変更しても効果はなく、代わりに {{domxref("Window.applicationCache")}} インターフェイスを使用してください。
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- {{domxref("Window.applicationCache")}}
-- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API)
diff --git a/files/ja/web/html/microformats/index.md b/files/ja/web/html/microformats/index.md
index ee1159c5e1eddf..1e9daf4aa118db 100644
--- a/files/ja/web/html/microformats/index.md
+++ b/files/ja/web/html/microformats/index.md
@@ -3,6 +3,8 @@ title: マイクロフォーマット
slug: Web/HTML/microformats
---
+{{HTMLSidebar}}
+
## 概要
[_マイクロフォーマット_](http://microformats.org/) (Microformat) (**μF** と略記されることもあります) は、意味情報と構造化データを HTML に埋め込むために使用される規格で、検索エンジンやアグリゲーター、その他のツールが使用するための API を提供します。HTML のこれらの最小限のパターンは、人、組織、イベント、場所などの基本的な情報からドメイン固有の情報まで、さまざまなものをマークアップするために使用されます。マイクロフォーマットは、オブジェクトを記述するためにサポートする語彙を使用し、そのプロパティに値を割り当てるために名前と値のペアを使用します。プロパティはクラス属性で運ばれ、任意の HTML 要素に追加することができ、データ値は HTML 要素のコンテンツとセマンティック属性を再利用します。マイクロフォーマット 2 はマイクロフォーマットの更新版で、HTML の構造化された構文や語彙に注釈を付けるために新しい属性を学習する必要がある RDFa やマイクロデータを使用する以前のアプローチよりもシンプルな方法を提供します。
diff --git a/files/ja/web/http/headers/accept-ch-lifetime/index.md b/files/ja/web/http/headers/accept-ch-lifetime/index.md
deleted file mode 100644
index cb8c0337b3be34..00000000000000
--- a/files/ja/web/http/headers/accept-ch-lifetime/index.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Accept-CH-Lifetime
-slug: Web/HTTP/Headers/Accept-CH-Lifetime
----
-
-{{HTTPSidebar}}{{securecontext_header}}{{SeeCompatTable}}
-
-**`Accept-CH-Lifetime`** ヘッダーは、クライアントが後続のリクエストにどの[クライアントヒント](/ja/docs/Glossary/Client_hints)のヘッダーを含める必要があるかを指定する {{HTTPHeader("Accept-CH")}} ヘッダーの値の永続性を指定するためにサーバーによって設定されます。
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row">ヘッダー種別</th>
- <td>
- {{Glossary("Response header","レスポンスヘッダー")}}
- </td>
- </tr>
- <tr>
- <th scope="row">
- {{Glossary("Forbidden header name","禁止ヘッダー名")}}
- </th>
- <td>?</td>
- </tr>
- </tbody>
-</table>
-
-> **メモ:** クライアントヒントには、安全なオリジン（TLS 経由）でのみアクセスできます。 Accept-CH ヘッダーと Accept-CH-Lifetime ヘッダーは、クライアントヒントが確実に送信されるように、すべての安全なリクエストに対して永続化する必要があります。
-
-## 構文
-
-```
-Accept-CH-Lifetime: <age>
-```
-
-## 例
-
-```
-Accept-CH: Viewport-Width, DPR
-Accept-CH-Lifetime: 86400
-```
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- {{HTTPHeader("Accept-CH")}}
-- {{HTTPHeader("Vary")}}
diff --git a/files/ja/web/http/headers/index.md b/files/ja/web/http/headers/index.md
index c11ba1f2f8b149..fedcf443f4f437 100644
--- a/files/ja/web/http/headers/index.md
+++ b/files/ja/web/http/headers/index.md
@@ -2,35 +2,29 @@
title: HTTP ヘッダー
slug: Web/HTTP/Headers
l10n:
- sourceCommit: be530d13c405c92e4f92e5d01d45cd2d435439b7
+ sourceCommit: ba5f28ab10ef1af48a55f363c8facc04a1f94479
---
{{HTTPSidebar}}
**HTTP ヘッダー**により、 HTTP リクエストやレスポンスでクライアントやサーバーが追加情報を渡すことができます。 HTTP ヘッダーは、大文字小文字を区別しないヘッダー名とそれに続くコロン (`:`)、 値で構成されます。値の前にある{{Glossary("Whitespace", "ホワイトスペース")}}は無視されます。
-私的な独自のヘッダーは、以前は `X-` 接頭辞を使用していましたが、この慣習は 2012 年 6 月の [RFC 6648](https://datatracker.ietf.org/doc/html/rfc6648) で非推奨になりました。これは、標準外のフィールドが標準になったときに発生する不便さのためです。それ以外のヘッダーは [IANA レジストリー](https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers)に収録されており、その基になったものは [RFC 4229](https://datatracker.ietf.org/doc/html/rfc4229) です。また IANA は[新たに提案された HTTP ヘッダーのレジストリー](https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers)も管理しています。
+私的な独自のヘッダーは、以前は `X-` 接頭辞を使用していましたが、この慣習は、標準外のフィールドが標準になったときに不便が発生するため、2012 年 6 月の [RFC 6648](https://datatracker.ietf.org/doc/html/rfc6648) で非推奨になりました。それ以外のヘッダーは [IANA HTTP フィールド名レジストリー](https://www.iana.org/assignments/http-fields/http-fields.xhtml)に収録されており、その基になったものは [RFC 4229](https://datatracker.ietf.org/doc/html/rfc4229) で定義されていました。
+IANA レジストリーはヘッダーを、"permanent"（標準で定義）、"provisional"（新しい）、 "deprecated"（使用は非推奨）、"obsolete"（使用できなくなった）などの状態に関する情報を含めて掲載しています。
ヘッダーは、そのコンテキストに応じて分類できます。
-- {{Glossary("Request header", "リクエストヘッダー")}}は、読み込むリソースについての情報や、そのリソースをリクエストしているクライアントに関する詳細な情報を持ちます。
-- {{Glossary("Response header", "レスポンスヘッダー")}}は、レスポンスに関する追加情報、例えば場所や提供しているサーバーに関する情報を保持します。
-- {{Glossary("Representation header", "表現ヘッダー")}}は、リソースの本体に関する情報、例えば [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)や適用されるエンコード／圧縮方式などについての情報を持ちます。
-- {{Glossary("Payload header","ペイロードヘッダー")}}は、転送されるデータの表現から独立した情報、例えばコンテンツの長さや転送に使われるエンコード方式などを持ちます。
+- {{Glossary("Request header", "リクエストヘッダー")}}
+ - : 読み込むリソースについての情報や、そのリソースをリクエストしているクライアントに関する詳細な情報を持ちます。
+- {{Glossary("Response header", "レスポンスヘッダー")}}
+ - : レスポンスに関する追加情報、例えば場所や提供しているサーバーに関する情報を保持します。
+- {{Glossary("Representation header", "表現ヘッダー")}}
+ - : リソースの本体に関する情報、例えば [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)や適用されるエンコード／圧縮方式などについての情報を持ちます。
+- {{Glossary("Payload header","ペイロードヘッダー")}}
+ - : 転送されるデータの表現から独立した情報、例えばコンテンツの長さや転送に使われるエンコード方式などを持ちます。
またヘッダーは、{{Glossary("Proxy_server", "プロキシーサーバー")}}がどのように扱うかに応じてグループ化されます。
-- {{ httpheader("Connection") }}
-- {{ httpheader("Keep-Alive") }}
-- {{ httpheader("Proxy-Authenticate") }}
-- {{ httpheader("Proxy-Authorization") }}
-- {{ httpheader("TE") }}
-- {{ httpheader("Trailer") }}
-- {{ httpheader("Transfer-Encoding") }}
-- {{ httpheader("Upgrade") }} ([プロトコルのアップグレードの仕組み](/ja/docs/Web/HTTP/Protocol_upgrade_mechanism)も参照)
-
-<!---->
-
- エンドツーエンドヘッダー
- : これらのヘッダーは、メッセージの最終的な宛先、すなわちリクエストならばサーバー、レスポンスならばクライアントに伝送し*なければなりません*。中間のプロキシーはヘッダーを変更せずに再伝送しなければならず、またキャッシュには保存しなければなりません。
- ホップバイホップヘッダー
@@ -57,76 +51,8 @@ l10n:
- : リクエストしているウェブサイトに関連付けられた閲覧用のデータ (クッキー、ストレージ、キャッシュなど) を消去します。
- {{HTTPHeader("Expires")}}
- : レスポンスが古くなると考えられる日時を表します。
-- {{HTTPHeader("Pragma")}}
- - : リクエストからレスポンスへの流れの中でさまざまな影響がある、実装依存のヘッダーです。 `Cache-Control` ヘッダーが未実装である HTTP/1.0 キャッシュとの後方互換性のために使用します。
-- {{HTTPHeader("Warning")}} {{deprecated_inline}}
- - : 起こりうる問題に関する一般警告情報です。
-
-## クライアントヒント
-
-HTTP の[クライアントヒント](/ja/docs/Web/HTTP/Client_hints)とは、端末の種類やネットワークの状態など、クライアントに関する有用な情報を提供する一連のリクエストヘッダーのことで、サーバーはこれらの条件に合わせて提供するコンテンツを最適化することができます。
-
-サーバーは、 {{HTTPHeader("Accept-CH")}} を使用して、クライアントが関心を持っているクライアントヒントヘッダーを積極的に要求します。クライアントは、要求されたヘッダーを後続のリクエストに含めることがあります。
-
-- {{HTTPHeader("Accept-CH")}} {{experimental_inline}}
- - : サーバーはクライアントヒントに対応していることを、 `Accept-CH` ヘッダーフィールドまたは HTML の `<meta>` 要素の [`http-equiv`](/ja/docs/Web/HTML/Element/meta#attr-http-equiv) 属性で同等の指定をすることで広報することができます。
-- {{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}} {{deprecated_inline}}
- - : サーバーは、指定された期間サーバーが対応する一連のクライアントヒントを記憶するようクライアントに依頼し、そのサーバーのオリジンに対するその後のリクエストでクライアントヒントを配信できるようにすることができます。
-- {{HTTPHeader("Critical-CH")}} {{experimental_inline}}
- - : サーバーは {{HttpHeader("Accept-CH")}} と共に `Critical-CH` を使用し、受け入れられるクライアントヒントも[重要なクライアントヒント](/ja/docs/Web/HTTP/Client_hints#重要なクライアントヒント) であることを指定しています。
-
-クライアントヒントの様々なカテゴリーを以下に示します。
-
-### ユーザーエージェントクライアントヒント
-
-[ユーザーエージェントクライアントヒント](/ja/docs/Web/HTTP/Client_hints#user-agent_client_hints)は、ユーザーエージェント、それが動作しているプラットフォーム/アーキテクチャ、ユーザーエージェントやプラットフォーム上に設定されたユーザー環境設定に関する情報を提供するリクエストヘッダーです。
-
-- {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}} {{experimental_inline}}
- - : ユーザーエージェントで動きの縮小を優先する設定。
-- {{HTTPHeader("Sec-CH-UA")}} {{experimental_inline}}
- - : ユーザーエージェントのブランド名とバージョン。
-- {{HTTPHeader("Sec-CH-UA-Arch")}} {{experimental_inline}}
- - : ユーザーエージェントの基盤となるプラットフォームアーキテクチャ。
-- {{HTTPHeader("Sec-CH-UA-Bitness")}} {{experimental_inline}}
- - : ユーザーエージェントの基本的な CPU アーキテクチャのビット数（例: "64" ビット）。
-- {{HTTPHeader("Sec-CH-UA-Full-Version")}} {{deprecated_inline}}
- - : ユーザーエージェントの意味づけされた完全なバージョン文字列。
-- {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} {{experimental_inline}}<!-- chrome intent to ship Nov 2021 -->
- - : ユーザーエージェントのブランドリストにある各ブランドのフルバージョン。
-- {{HTTPHeader("Sec-CH-UA-Mobile")}} {{experimental_inline}}
- - : ユーザーエージェントがモバイル端末で動作している、あるいは、より一般的には、「モバイル」の使い勝手を好んでいる。
-- {{HTTPHeader("Sec-CH-UA-Model")}} {{experimental_inline}}
- - : ユーザーエージェントの端末モデル。
-- {{HTTPHeader("Sec-CH-UA-Platform")}} {{experimental_inline}}
- - : ユーザーエージェントの基盤となっているオペレーティングシステム/プラットフォーム。
-- {{HTTPHeader("Sec-CH-UA-Platform-Version")}} {{experimental_inline}}
- - : ユーザーエージェントの基盤となっているオペレーションシステムのバージョン。
-
-### 端末クライアントヒント
-
-- {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} {{experimental_inline}}
- - : 画像リソースを選択するために {{HTTPHeader("DPR")}} クライアントヒントが使用されたリクエストで、 画像デバイスとピクセルの比率を確認するために使用される _レスポンスヘッダー_ です。
-- {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} {{experimental_inline}}
- - : 技術的には[端末メモリー API](/ja/docs/Web/API/Device_Memory_API) の一部で、このヘッダーはクライアントが持つおよその RAM の量を表します。
-- {{HTTPHeader("DPR")}} {{deprecated_inline}} {{experimental_inline}}
- - : クライアントの端末ピクセル比 (DPR)、すなわち CSS ピクセルあたりの物理ピクセル数を示します。
-- {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} {{experimental_inline}}
- - : 数値で、レイアウトビューポートの幅を CSS ピクセル数で示します。指定されたピクセル数は、それ以上の最小の整数に丸められます（つまり切り上げ）。
-- {{HTTPHeader("Width")}} {{deprecated_inline}} {{experimental_inline}}
- - : 数値で、要求するリソースの幅（つまり画像の内在的な寸法）を物理ピクセル数で示します。
-
-### ネットワーククライアントヒント
-
-ネットワーククライアントヒントにより、サーバーはネットワークの帯域やレイテンシーに基づいて、どの情報を送るかを選択することができます。
-
-- {{HTTPHeader("Downlink")}}
- - : サーバーに対するクライアントのコネクションのおよその帯域を、 Mbps で表します。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。
-- {{HTTPHeader("ECT")}}
- - : {{Glossary("effective connection type", "有効接続種別")}} (「ネットワークプロファイル」) は、そのコネクションのレイテンシーや帯域に最も近いものです。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。
-- {{HTTPHeader("RTT")}}
- - : アプリケーション層のラウンドトリップ時間 (RTT) をミリ秒で表し、これにはサーバーの処理時間も含みます。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。
-- {{HTTPHeader("Save-Data")}} {{experimental_inline}}
- - : 論理型で、ユーザーエージェントのデータ利用の削減についての設定を示します。
+- {{HTTPHeader("No-Vary-Search")}} {{experimental_inline}}
+ - : URL のクエリー引数がキャッシュ照合にどのように影響するかを定義する一連のルールを指定します。これらのルールは、URL 引数が異なる同じ URL を別個のブラウザーキャッシュ項目として保存するかどうかを決定します。
## 条件付き
@@ -154,12 +80,12 @@ HTTP の[クライアントヒント](/ja/docs/Web/HTTP/Client_hints)とは、
## コンテンツネゴシエーション
-[コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)ヘッダーです。
+詳しくは、[コンテンツネゴシエーションの記事](/ja/docs/Web/HTTP/Content_negotiation)を参照してください。
- {{HTTPHeader("Accept")}}
- : 送り返すことができるデータの{{Glossary("MIME_type", "種類")}}をサーバーに通知します。
- {{HTTPHeader("Accept-Encoding")}}
- - : 送り返すリソースで使用できるエンコードアルゴリズム (一般的には<a href="/ja/docs/Web/HTTP/Compression">圧縮アルゴリズム</a>) をサーバーに通知します。
+ - : 送り返すリソースで使用できるエンコードアルゴリズム (一般的には[圧縮アルゴリズム](/ja/docs/Web/HTTP/Compression)) をサーバーに通知します。
- {{HTTPHeader("Accept-Language")}}
- : 送り返すリソースで期待する自然言語をサーバーに通知します。これはヒントであり、必ずしもユーザーの完全な制御下にあるものではありません。サーバーはユーザーの選択 (ドロップダウンリストで選ぶ言語など) を明示的に上書きしないように、常に注意を払うべきです。
@@ -179,16 +105,16 @@ HTTP の[クライアントヒント](/ja/docs/Web/HTTP/Client_hints)とは、
## CORS
-_CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照してください。_
+詳細は、[CORS のドキュメント](/ja/docs/Web/HTTP/CORS)を参照してください。
-- {{HTTPHeader("Access-Control-Allow-Origin")}}
- - : レスポンスが共有可能かを示します。
- {{HTTPHeader("Access-Control-Allow-Credentials")}}
- : credentials フラグが真であるときに、リクエストへのレスポンスを開示してよいかを示します。
- {{HTTPHeader("Access-Control-Allow-Headers")}}
- : {{Glossary("Preflight_request", "プリフライトリクエスト")}}へのレスポンスで使用し、実際のリクエストを行うときに使用できる HTTP ヘッダーを指定します。
- {{HTTPHeader("Access-Control-Allow-Methods")}}
- : プリフライトリクエストへのレスポンスで、リソースへアクセスするときに使用できるメソッドを指定します。
+- {{HTTPHeader("Access-Control-Allow-Origin")}}
+ - : レスポンスが共有可能かを示します。
- {{HTTPHeader("Access-Control-Expose-Headers")}}
- : ヘッダー名を羅列して、レスポンスの一部として開示できるヘッダーを示します。
- {{HTTPHeader("Access-Control-Max-Age")}}
@@ -200,7 +126,7 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
- {{HTTPHeader("Origin")}}
- : どこから読み込みが発生したかを示します。
- {{HTTPHeader("Timing-Allow-Origin")}}
- - : [Resource Timing API](/ja/docs/Web/API/Resource_Timing_API) の機能を通じて受け取った属性の値を見ることができるオリジンを指定します。そうでなければオリジン間の制約によってゼロとして報告されます。
+ - : [リソースタイミング API](/ja/docs/Web/API/Performance_API/Resource_timing) の機能を通じて受け取った属性の値を見ることができるオリジンを指定します。そうでなければオリジン間の制約によってゼロとして報告されます。
## ダウンロード
@@ -224,12 +150,6 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
- {{HTTPHeader("Forwarded")}}
- : リクエストのパスにプロキシーが関与したときに変更または遺失した、プロキシーサーバーのクライアント側の情報を持ちます。
-- {{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}
- - : HTTP プロキシーやロードバランサーを経由してウェブサーバーに接続するクライアントの、接続元 IP アドレスを識別します。
-- {{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}
- - : プロキシーやロードバランサーに接続するクライアントがリクエストした、オリジナルのホストを示します。
-- {{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}
- - : クライアントがプロキシーやロードバランサーに接続するために使用したプロトコル (HTTP または HTTPS) を識別します。
- {{HTTPHeader("Via")}}
- : フォワードプロキシーとリバースプロキシーの両方が追加するヘッダーであり、リクエストヘッダーとレスポンスヘッダーのどちらでも見られます。
@@ -238,20 +158,20 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
- {{HTTPHeader("Location")}}
- : ページのリダイレクト先の URL を示します。
- {{HTTPHeader("Refresh")}}
- - : ブラウザーにページを再読み込みするか、別のページにリダイレクトするように指示します。 [`http-equiv="refresh"`](/ja/docs/Web/HTML/Element/meta#attr-http-equiv) を持つ `meta` 要素と同じ値をとります。
+ - : ブラウザーにページを再読み込みするか、別のページにリダイレクトするように指示します。 [`http-equiv="refresh"`](/ja/docs/Web/HTML/Element/meta#http-equiv) を持つ `meta` 要素と同じ値をとります。
## リクエストコンテキスト
- {{HTTPHeader("From")}}
- : リクエストを行うユーザーエージェントを操作している人間の、インターネット電子メールアドレスを持ちます。
- {{HTTPHeader("Host")}}
- - : サーバーのドメイン名 (バーチャルホスト向け) およびサーバーが待ち受けている TCP ポート番号 (省略可能) を指定します。
+ - : サーバーのドメイン名（バーチャルホスト向け）およびサーバーが待ち受けている TCP ポート番号（省略可能）を指定します。
- {{HTTPHeader("Referer")}}
- : 現在リクエストしているページへリンクしていた、前のウェブページのアドレスです。
- {{HTTPHeader("Referrer-Policy")}}
- : {{HTTPHeader("Referer")}} ヘッダーで送信するどのリファラー情報をリクエストに含めるかを制御します。
- {{HTTPHeader("User-Agent")}}
- - : リクエストを行うユーザーエージェントソフトウェアのアプリケーションタイプ、オペレーティングシステム、ベンダー、バージョンを、ネットワークプロトコルのピアが識別できるようにする文字列を持ちます。 [Firefox ユーザーエージェント文字列リファレンス](/ja/docs/Web/HTTP/Headers/User-Agent/Firefox)もご覧ください。
+ - : リクエストを行うユーザーエージェントソフトウェアのアプリケーションタイプ、オペレーティングシステム、ベンダー、バージョンを、ネットワークプロトコルのピアが識別できるようにする文字列を持ちます。
## レスポンスコンテキスト
@@ -267,7 +187,7 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
- {{HTTPHeader("Range")}}
- : サーバーが返すべきである文書の範囲を示します。
- {{HTTPHeader("If-Range")}}
- - : 指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き range request を生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。
+ - : 指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き範囲付きリクエストを生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。
- {{HTTPHeader("Content-Range")}}
- : 部分的なメッセージが、メッセージ本文全体のどこに位置するかを示します。
@@ -278,15 +198,11 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
- {{HTTPHeader("Cross-Origin-Opener-Policy")}} (COOP)
- : 他のドメインがウィンドウを開いたり制御したりすることを防ぎます。
- {{HTTPHeader("Cross-Origin-Resource-Policy")}} (CORP)
- - : このヘッダーが適用されたリソースのレスポンスが他のドメインから読み取られるのを防ぎます。
+ - : このヘッダーが適用されたリソースのレスポンスが他のドメインから読み取られるのを防ぎます。[CORP の説明記事](/ja/docs/Web/HTTP/Cross-Origin_Resource_Policy)を参照してください。
- {{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})
- : ユーザーエージェントがページで読み込むことを許可するリソースを制御します。
- {{HTTPHeader("Content-Security-Policy-Report-Only")}}
- : ウェブの開発者がポリシーの効果を適用せずに監視することで、実験を行うことができます。これらの違反レポートは、 HTTP `POST` リクエストによって指定した URI へ送信される {{Glossary("JSON")}} 文書で構成されます。
-- {{HTTPHeader("Expect-CT")}}
- - : サイトが証明書の透明性要件の報告や実施を選択できるようにします。これにより、そのサイトで不正な証明書の使用に気づかないことを防ぎます。サイトが Expect-CT ヘッダーを有効にした場合、そのサイトの証明書が公開CTログに表示されることを Chrome が確認するようにリクエストしています。
-- {{HTTPHeader("Origin-Isolation")}} {{experimental_inline}}
- - : ウェブアプリケーションをオリジンから独立させるための仕組みを提供します。
- {{HTTPHeader("Permissions-Policy")}}
- : 自身のフレームまたはその中に埋め込まれた {{htmlelement("iframe")}} で、ブラウザーの機能を使用することを許可または拒否する仕組みを提供します。
- {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})
@@ -295,8 +211,6 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
- : 暗号化や認証されたレスポンスについて、クライアントの設定を表す信号をサーバーに送信して、{{CSP("upgrade-insecure-requests")}} ディレクティブを正しく扱うことができます。
- {{HTTPHeader("X-Content-Type-Options")}}
- : ブラウザーで MIME スニッフィングを無効化して、{{HTTPHeader("Content-Type")}} で指定したタイプを強制的に使用させます。
-- {{HTTPHeader("X-Download-Options")}}
- - : HTTP の [`X-Download-Options`](<https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj542450(v=vs.85)?#the-noopen-directive>) ヘッダーは、ブラウザー (Internet Explorer) がアプリケーションからのダウンロードでファイルを「開く」の選択肢を表示しないようにし、アプリケーションのコンテキストで実行するアクセス権を得ることがないようにして、ファイルとすることでフィッシング詐欺を防止します。
- {{HTTPHeader("X-Frame-Options")}} (XFO)
- : ブラウザーがページを {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}} の内部に表示することを許可するかを示します。
- {{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}
@@ -308,30 +222,26 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
## メタデータ読み取りリクエストヘッダー
-{{Glossary("Fetch metadata request header", "メタデータ読み取りリクエストヘッダー")}}は、リクエストが発生したときのコンテキストに関する情報を提供します。これによりサーバーは、リクエストがどこから来たのか、リソースがどのように使用されるのかに基づいて、リクエストを許可すべきかどうかを判断することができます。
+{{Glossary("Fetch metadata request header", "メタデータ読み取りリクエストヘッダー")}}は、リクエストが発生したときのコンテキストに関する情報を提供します。サーバーはこれを利用して、リクエストがどこから来たのか、リソースがどのように使用されるのかに基づいて、リクエストを許可すべきかどうかを判断することができます。
- {{HTTPHeader("Sec-Fetch-Site")}}
- - : リクエスト開始元のオリジンと宛先のオリジンとの関係を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cross-site`, `same-origin`, `same-site`, `none` です。
+ - : リクエスト開始元のオリジンと宛先のオリジンとの関係を示します。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cross-site`, `same-origin`, `same-site`, `none` です。
- {{HTTPHeader("Sec-Fetch-Mode")}}
- - : サーバーへのリクエストモードを示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cors`, `navigate`, `nested-navigate`, `no-cors`, `same-origin`, `websocket` です。
+ - : サーバーへのリクエストモードを示します。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cors`, `navigate`, `nested-navigate`, `no-cors`, `same-origin`, `websocket` です。
- {{HTTPHeader("Sec-Fetch-User")}}
- - : ナビゲーションリクエストがユーザー操作によって起動されたかどうかを示すリクエストヘッダーです。これは構造化ヘッダーであり、論理値で、取りうる値は `?0` ならば偽、 `?1` ならば真です。
+ - : ナビゲーションリクエストがユーザー操作によって起動されたかどうかを示します。これは構造化ヘッダーであり、論理値で、取りうる値は `?0` ならば偽、 `?1` ならば真です。
- {{HTTPHeader("Sec-Fetch-Dest")}}
- - : リクエストの宛先を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `audio`, `audioworklet`, `document`, `embed`, `empty`, `font`, `image`, `manifest`, `object`, `paintworklet`, `report`, `script`, `serviceworker`, `sharedworker`, `style`, `track`, `video`, `worker`, `xslt` です。
+ - : リクエストの宛先を示します。これは構造化ヘッダーで、値はトークンであり、取りうる値は `audio`, `audioworklet`, `document`, `embed`, `empty`, `font`, `image`, `manifest`, `object`, `paintworklet`, `report`, `script`, `serviceworker`, `sharedworker`, `style`, `track`, `video`, `worker`, `xslt` です。
+
+以下のリクエストヘッダーは、厳密には「メタデータ読み取りリクエストヘッダー」ではありませんが、同様にリソースがどのように使用されるかのコンテキストに関する情報を提供します。サーバーはキャッシュの動作や返す情報を変更するためにこれらを使用するかもしれません。
+
+- {{HTTPHeader("Sec-Purpose")}}
+ - : リクエストがユーザーエージェントによって直ちに使用される以外の目的である場合に、その目的を示します。このヘッダーは現在一つの可能な値 `prefetch` を持っており、これはリソースが将来のナビゲーションのために優先的に読み取られていることを示します。
- {{HTTPHeader("Service-Worker-Navigation-Preload")}}
- - : サービスワーカーの起動中に、リソースに対して {{domxref("fetch()")}} で先制的なリクエストをする際に送られるリクエストヘッダーです。
- この値は {{domxref("NavigationPreloadManager.setHeaderValue()")}} で設定され、通常の `fetch()` 処理とは異なる形でリソースを返すべきことをサーバーに通知するために使用することができます。
+ - : サービスワーカーの起動中に、リソースに対して {{domxref("fetch()")}} で先制的なリクエストをする際に送られるリクエストヘッダーです。この値は {{domxref("NavigationPreloadManager.setHeaderValue()")}} で設定され、通常の `fetch()` 処理とは異なる形でリソースを返すべきことをサーバーに通知するために使用することができます。
## サーバー送信イベント
-- {{HTTPHeader("Last-Event-ID")}}
- - : TBD
-- {{HTTPHeader("NEL")}} {{experimental_inline}}
- - : 開発者がネットワークエラー報告ポリシーを宣言できるようにする仕組みを定義します。
-- {{HTTPHeader("Ping-From")}}
- - : TBD
-- {{HTTPHeader("Ping-To")}}
- - : TBD
- {{HTTPHeader("Report-To")}}
- : 警告やエラーを送信るためのブラウザーに対するサーバーのエンドポイントを指定するために使用します。
@@ -344,70 +254,160 @@ _CORS についての詳細は、[こちら](/ja/docs/Glossary/CORS)を参照し
- {{HTTPHeader("Trailer")}}
- : 送信者が chunk メッセージの終端に追加フィールドを含めることができます。
-## WebSocket
+## その他
+
+- {{HTTPHeader("Alt-Svc")}}
+ - : このサービスに到達するための代替方法を列挙するために使用されます。
+- {{HTTPHeader("Alt-Used")}}
+ - : 使用中の代替サービスを識別するために用いられます。
+- {{HTTPHeader("Date")}}
+ - : メッセージが発信された日時を保持します。
+- {{HTTPHeader("Link")}}
+ - : これは、HTTP ヘッダーで 1 つ以上のリンクをシリアライズする意味を提供するエンティティヘッダーフィールドです。意味付けは HTML の {{HTMLElement("link")}} 要素と同じです。
+- {{HTTPHeader("Retry-After")}}
+ - : ユーザーエージェントがフォローアップリクエストをする前に待つべき時間を示します。
+- {{HTTPHeader("Server-Timing")}}
+ - : 指定されたリクエストレスポンスサイクルについて、1 つ以上の指標および説明を伝えます。
+- `Service-Worker-Allowed`
+ - : [パス制限](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers#why_is_my_service_worker_failing_to_register)を除去するために、[サービスワーカースクリプトのレスポンス](https://w3c.github.io/ServiceWorker/#service-worker-script-response)にこのヘッダーを記載します。
+- {{HTTPHeader("SourceMap")}}
+ - : 生成されたコードを[ソースマップ](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html)にリンクします。
+- {{HTTPHeader("Upgrade")}}
+ - : これは HTTP/1.1（のみ）のヘッダーで、すでに確立されているクライアント/サーバー接続を（同じトランスポートプロトコル上で）異なるプロトコルにアップグレードするために使用することができます。例えば、クライアントが HTTP 1.1 から HTTP 2.0 に接続をアップグレードしたり、HTTP や HTTPS 接続を WebSocket にアップグレードするために使用することができます。
-- {{HTTPHeader("Sec-WebSocket-Key")}}
- - : TBD
-- {{HTTPHeader("Sec-WebSocket-Extensions")}}
- - : TBD
-- {{HTTPHeader("Sec-WebSocket-Accept")}}
- - : TBD
-- {{HTTPHeader("Sec-WebSocket-Protocol")}}
- - : TBD
-- {{HTTPHeader("Sec-WebSocket-Version")}}
- - : TBD
+## 実験的なヘッダー
-## その他
+### 帰属レポートヘッダー
+
+[帰属レポート API](/ja/docs/Web/API/Attribution_Reporting_API)を使用すると、開発者がコンバージョンを測定することができます。例えば、ユーザーがあるサイトに埋め込まれた広告をクリックし、ベンダーのサイトで商品を購入した場合、そのコンバージョンに関するレポートにアクセスすることができます。サードパーティーのトラッキングクッキーに頼らずに、様々なヘッダーを頼りに、コンバージョンを示すために一致させる**ソース**と**トリガー**を登録します。
+
+- {{httpheader("Attribution-Reporting-Eligible")}}
+ - : 現在のリクエストに対応するレスポンスが、帰属ソースまたはトリガーのいずれかを登録する ことによって、帰属レポートに参加する資格があることを示すために使用され ます。
+- {{httpheader("Attribution-Reporting-Register-Source")}}
+ - : `Attribution-Reporting-Eligible` ヘッダーを含むリクエストに対するレスポンスの一部として記載され、これは帰属ソースを登録するために使用されます。
+- {{httpheader("Attribution-Reporting-Register-Trigger")}}
+ - : `Attribution-Reporting-Eligible` ヘッダーを含むリクエストに対するレスポンスの一部として記載され、これは帰属トリガーを登録するために使用します。
+
+### クライアントヒント
+
+HTTP [クライアントヒント](/ja/docs/Web/HTTP/Client_hints)は一連のリクエストヘッダーで、端末の種類や ネットワークの状態といったクライアントに関する有益な情報を提供し、 サーバーがそれらの状態に応じて提供されるものを最適化できるようにします。
+
+サーバーは {{HTTPHeader("Accept-CH")}} を使用して、クライアントに関心があるクライアントヒントヘッダーを積極的にリクエストします。クライアントはリクエストされたヘッダーをその後のリクエストに記載することを選べます。
+
+- {{HTTPHeader("Accept-CH")}} {{experimental_inline}}
+ - : サーバーは Accept-CH ヘッダーフィールドや HTML `<meta>` 要素の [`http-equiv`](/ja/docs/Web/HTML/Element/meta#http-equiv) 属性を使ってクライアントヒントに対応していることを告知できます。
+- {{HTTPHeader("Critical-CH")}} {{experimental_inline}}
+ - : サーバーは `Critical-CH` を {{HttpHeader("Accept-CH")}} とともに使用して、受け入れられるクライアントヒントも[重要なクライアントヒント](/ja/docs/Web/HTTP/Client_hints#critical_client_hints)であることを指定します。
+
+クライアントヒントのカテゴリーを以下に一覧します。
+
+#### ユーザーエージェントクライアントヒント
+
+[UA クライアントヒント](/ja/docs/Web/HTTP/Client_hints#user-agent_client_hints)は、ユーザーエージェント、それが動作しているプラット フォーム/アーキテクチャ、ユーザーエージェントまたはプラットフォームで設定され ているユーザーの環境設定についての情報を提供するリクエストヘッダーです。
+
+- {{HTTPHeader("Sec-CH-UA")}} {{experimental_inline}}
+ - : ユーザーエージェントのブランドとバージョンです。
+- {{HTTPHeader("Sec-CH-UA-Arch")}} {{experimental_inline}}
+ - : ユーザーエージェントの基盤となっているプラットフォームアーキテクチャです。
+- {{HTTPHeader("Sec-CH-UA-Bitness")}} {{experimental_inline}}
+ - : ユーザーエージェントの基盤となっている CPU のビットのアーキテクチャ（例えば "64" ビット）です。
+- {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} {{experimental_inline}}
+ - : ユーザーエージェントのブランドリストにある各ブランドの完全版。
+- {{HTTPHeader("Sec-CH-UA-Mobile")}} {{experimental_inline}}
+ - : ユーザーエージェントがモバイル端末で動作している、またはより一般的には「モバイル」ユーザー環境設定を推奨している場合。
+- {{HTTPHeader("Sec-CH-UA-Model")}} {{experimental_inline}}
+ - : ユーザーエージェントの端末モデル。
+- {{HTTPHeader("Sec-CH-UA-Platform")}} {{experimental_inline}}
+ - : ユーザーエージェントの基盤となっているオペレーティングシステム/プラットフォーム。
+- {{HTTPHeader("Sec-CH-UA-Platform-Version")}} {{experimental_inline}}
+ - : ユーザーエージェントの基盤となっているオペレーティングシステムのバージョン。
+- {{HTTPHeader("Sec-CH-UA-Prefers-Color-Scheme")}} {{experimental_inline}}
+ - : ユーザーのダークまたはライトモードの環境設定。
+- {{HTTPHeader("Sec-CH-UA-Prefers-Reduced-Motion")}} {{experimental_inline}}
+ - : ユーザーの環境設定として、アニメーションやコンテンツレイアウトの変化が少ないことが推奨されていること。
+
+> **メモ:** ユーザーエージェントクライアントヒントは、データの漏洩に使用することができる[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)の委譲が必要であるため、[フェンスフレーム](/ja/docs/Web/API/Fenced_frame_API)内では利用できません。
+
+#### 端末クライアントヒント
+
+- {{HTTPHeader("Device-Memory")}} {{experimental_inline}}
+ - : 利用できるクライアント RAM メモリーのおおよその量。これは[端末メモリー API](/ja/docs/Web/API/Device_Memory_API) の一部です。
+
+#### ネットワーククライアントヒント
+
+ネットワーククライアントヒントにより、サーバーはユーザーの選択に基いて送信する情報や ネットワークの帯域幅や遅延時間を選べます。
+
+- {{HTTPHeader("Downlink")}} {{experimental_inline}}
+ - : クライアントからサーバーへの接続のおおよその帯域幅（Mbps 単位）。これは[ネットワーク情報 API](/ja/docs/Web/API/Network_Information_API) の一部です。
+- {{HTTPHeader("ECT")}} {{experimental_inline}}
+ - : 接続の遅延と帯域幅に最も一致する {{Glossary("effective connection type", "有効接続種別")}}（「ネットワークプロファイル」）。これは[ネットワーク情報 API](/ja/docs/Web/API/Network_Information_API) の一部です。
+- {{HTTPHeader("RTT")}} {{experimental_inline}}
+ - : アプリケーション層のラウンドトリップ時間 (RTT)。ミリ秒単位で、サーバーの処理時間を記載します。これは[ネットワーク情報 API](/ja/docs/Web/API/Network_Information_API) の一部です。
+- {{HTTPHeader("Save-Data")}} {{experimental_inline}}
+ - : 文字列 `on` で、ユーザーエージェントがデータ使用量を縮小することを推奨することを示します。
+
+### プライバシー
+
+- {{HTTPHeader("Sec-GPC")}} {{non-standard_inline}}{{experimental_inline}}
+ - : ウェブサイトやサービスワーカースクリプトが、ユーザーの個人情報を第三者に販売または共有することにユーザーが同意するかどうかを示します。
+
+### セキュリティ
+
+- {{HTTPHeader("Origin-Isolation")}} {{experimental_inline}}
+ - : ウェブアプリケーションがそのオリジンを分離できるようにする仕組みを提供します。
+
+### サーバー送信イベント
+
+- {{HTTPHeader("NEL")}} {{experimental_inline}}
+ - : 開発者がネットワークエラー報告ポリシーを宣言できるようにする仕組みを定義します。
+
+### その他
- {{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}
- : クライアントはリクエストに対して求めるプッシュポリシーを、リクエスト内で [`Accept-Push-Policy`](https://datatracker.ietf.org/doc/html/draft-ruellan-http-accept-push-policy-00#section-3.1) ヘッダーフィールドを送信することで表現することができます。
- {{HTTPHeader("Accept-Signature")}} {{experimental_inline}}
- - : クライアントは [`Accept-Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7) ヘッダーフィールドを送信して、利用可能な署名を利用する意図を示したり、対応している署名の種類を示したりすることができます。
-- {{HTTPHeader("Alt-Svc")}}
- - : このサービスにたどり着く他の方法のリストに使用します。
-- {{HTTPHeader("Date")}}
- - : メッセージが生成された日時です。
+ - : クライアントは [`Accept-Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#name-the-accept-signature-header) ヘッダーフィールドを送信して、利用可能な署名を利用する意図を示したり、対応している署名の種類を示したりすることができます。
- {{HTTPHeader("Early-Data")}} {{experimental_inline}}
- : このリクエストが TLS early data で送信されたことを示します。
-- {{HTTPHeader("Large-Allocation")}} {{deprecated_inline}}
- - : 読み込み中のページは大量の割り当てが必要であることをブラウザーに伝えます。
-- {{HTTPHeader("Link")}}
- - : [`Link`](https://datatracker.ietf.org/doc/html/rfc5988#section-5) エンティティヘッダーフィールドは、 HTTP ヘッダー内の 1 つ以上のリンクを記述する方法を提供します。意味的には HTML の {{HTMLElement("link")}} 要素と等価です。
- {{HTTPHeader("Push-Policy")}} {{experimental_inline}}
- - : [`Push-Policy`](https://datatracker.ietf.org/doc/html/draft-ruellan-http-accept-push-policy-00#section-3.2)はリクエストを処理するときのプッシュ通知に関するサーバーの動作を定義します。
-- {{HTTPHeader("Retry-After")}}
- - : 後続のリクエストを行う前に、ユーザーエージェントがどれだけの期間待つべきかを示します。
+ - : [`Push-Policy`](https://datatracker.ietf.org/doc/html/draft-ruellan-http-accept-push-policy-00#section-3.2) は、リクエストを処理するときのプッシュ通知に関するサーバーの動作を定義します。
- {{HTTPHeader("Signature")}} {{experimental_inline}}
- - : [`Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1) ヘッダーフィールドは、交換のための署名のリストを伝え、それぞれはその署名の権威を決定して、そして更新する方法についての情報を伴います。
+ - : [`Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#name-the-signature-header) ヘッダーフィールドは、交換のための署名のリストを伝え、それぞれはその署名の権威を決定して、そして更新する方法についての情報を伴います。
- {{HTTPHeader("Signed-Headers")}} {{experimental_inline}}
- - : [`Signed-Headers`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2) ヘッダーフィールドは、シグネチャに含めるためのレスポンスヘッダーフィールドの順序付きリストを識別します。
-- {{HTTPHeader("Server-Timing")}}
- - : 指定されたリクエストとレスポンスのサイクルについて、１つ以上のメトリクスまたは説明を通信します。
-- {{HTTPHeader("Service-Worker-Allowed")}}
- - : [パス制約](https://w3c.github.io/ServiceWorker/#path-restriction)を解除するために、[サービスワーカースクリプトのレスポンス](https://w3c.github.io/ServiceWorker/#service-worker-script-response)で使用します。
-- {{HTTPHeader("SourceMap")}}
- - : 生成されたコードと[ソースマップ](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html)を関連付けます。
-- {{HTTPHeader("Upgrade")}}
- - : Upgrade ヘッダーフィールドに関連する RFC 文書は [RFC 9110, section 7.8](https://httpwg.org/specs/rfc9110.html#field.upgrade) です。標準仕様では、現在のクライアント、サーバー、トランスポート層プロトコル接続で別のプロトコルへ更新または変更するための規則を定めています。例えば、このヘッダー標準ではサーバーが Upgrade ヘッダーフィールドを認めて実装すると決める前提で、クライアントが HTTP 1.1 から [WebSocket](/ja/docs/Glossary/WebSockets) へ変更することを可能にします。どちらの相手も、 Upgrade ヘッダーフィールドで指定された要件を受け入れる必要はありません。これはクライアントのヘッダーでもサーバーのヘッダーでも使用できます。Upgrade ヘッダーフィールドを指定した場合は、更新オプションを指ヘッダーonnection ヘッダーフィールドも送信者が送信しなければなりません。Connection ヘッダーフィールドについて、詳しくは[前述の RFC のセクション 7.6.1](https://httpwg.org/specs/rfc9110.html#field.connection) をご覧ください。
-- {{HTTPHeader("X-DNS-Prefetch-Control")}}
+ - : [`Signed-Headers`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#name-the-signed-headers-header) ヘッダーフィールドは、シグネチャに含めるためのレスポンスヘッダーフィールドの順序付きリストを識別します。
+- {{HTTPHeader("Speculation-Rules")}} {{experimental_inline}}
+ - : [投機ルール](/ja/docs/Web/API/Speculation_Rules_API) の JSON 定義を格納したテキストリソースを指す URL のリストを提供します。レスポンスが HTML 文書の場合、これらのルールは文書の投機ルール設定に追加されます。
+- {{HTTPHeader("Supports-Loading-Mode")}} {{experimental_inline}}
+ - : ナビゲーション対象が、よりリスクの高い様々な読み込みモードを使用することをオプトインするために設定します。例えば、オリジン間、同一サイトの[事前レンダリング](/ja/docs/Web/API/Speculation_Rules_API#事前レンダリングの使用)には `Supports-Loading-Mode` の値として `credentialed-prerender` が要求されます。
+
+## 標準外のヘッダー
+
+- {{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}
+ - : HTTP プロキシーやロードバランサーを経由してウェブサーバーに接続するクライアントの、接続元 IP アドレスを識別します。
+- {{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}
+ - : プロキシーやロードバランサーに接続するクライアントがリクエストした、オリジナルのホストを示します。
+- {{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}
+ - : クライアントがプロキシーやロードバランサーに接続するために使用したプロトコル (HTTP または HTTPS) を識別します。
+- {{HTTPHeader("X-DNS-Prefetch-Control")}} {{non-standard_inline}}
- : ユーザーがたどるであろうリンクや、ドキュメントが参照する画像、 CSS、 JavaScript などのリソースのドメイン名解決をブラウザーが事前に行う機能である、 DNS プリフェッチを制御します。
-- {{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}
- - : TBD
-- {{HTTPHeader("X-Pingback")}} {{non-standard_inline}}
- - : TBD
-- {{HTTPHeader("X-Requested-With")}}
- - : TBD
-- {{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}
+- {{HTTPHeader("X-Robots-Tag")}} {{non-standard_inline}}
- : [`X-Robots-Tag`](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag) ヘッダーは、一般の検索エンジンの結果でウェブページをどのように索引付けをするかを示します。このヘッダーは `<meta name="robots" content="…">` と等価です。
-- {{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}
- - : 使用する文書モードを示すために Internet Explorer で使用されています。
+
+## 非推奨のヘッダー
+
+- {{HTTPHeader("Pragma")}} {{deprecated_inline}}
+ - : 実装固有のヘッダーで、リクエストとレスポンスの連鎖のどこにいてもさまざまな効果を持つことができます。`Cache-Control` ヘッダーがまだ存在しない HTTP/1.0 キャッシュとの後方互換性のために使用します。
+- {{HTTPHeader("Warning")}} {{deprecated_inline}}
+ - : 可能な問題についての一般的な警告情報。
## 協力
[新しい記事を書いたり](/ja/docs/MDN/Writing_guidelines/Howto/Document_an_HTTP_header)、既存のものを改善したりすることにご協力ください。
+<!-- Check https://github.com/mdn/content/issues/1458 for known missing pages -->
+
## 関連情報
-- [Wikipedia の HTTP ヘッダーの一覧のページ](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)
-- [IANA レジストリー](https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers)
-- [HTTP Working Group](https://httpwg.org/specs/)
+- [Wikipedia の HTTP ヘッダーの一覧のページ](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)（英語）
+- [IANA レジストリー](https://www.iana.org/assignments/http-fields/http-fields.xhtml)（英語）
+- [HTTP Working Group](https://httpwg.org/specs/)（英語）
diff --git a/files/ja/web/http/headers/te/index.md b/files/ja/web/http/headers/te/index.md
new file mode 100644
index 00000000000000..4fe15821b45fea
--- /dev/null
+++ b/files/ja/web/http/headers/te/index.md
@@ -0,0 +1,68 @@
+---
+title: TE
+slug: Web/HTTP/Headers/TE
+l10n:
+ sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+**`TE`** リクエストヘッダーは、ユーザーエージェントが受け入れる転送エンコーディング方式を指定します。（非公式に `Accept-Transfer-Encoding` と呼ばれることもあり、その方がより直感的でしょう。）
+
+> **メモ:** [HTTP/2](https://httpwg.org/specs/rfc9113.html#ConnectionSpecific) と
+> [HTTP/3](https://httpwg.org/specs/rfc9114.html#header-formatting) では、
+> `TE` ヘッダーフィールドは、`trailer` 値が設定されている場合にのみ受け入れられます。
+
+転送エンコード方式の詳細については、{{HTTPHeader("Transfer-Encoding")}} レスポンスヘッダーも参照してください。HTTP/1.1 の受信者では常にチャンクが受け入れられるので、`TE` ヘッダーを使用して `"chunked"` を指定する必要はないことに注意してください。しかし、"trailers" 値を使用して、クライアントがチャンク転送コードでトレーラーフィールドを受け入れるかどうかを設定するには有益です。
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">ヘッダー型</th>
+ <td>{{Glossary("Request header", "リクエストヘッダー")}}</td>
+ </tr>
+ <tr>
+ <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
+ <td>はい</td>
+ </tr>
+ </tbody>
+</table>
+
+## 構文
+
+```http
+TE: compress
+TE: deflate
+TE: gzip
+TE: trailers
+
+// 複数のディレクティブを指定し、{{glossary("quality values", "Q 値")}}で重みづけする構文:
+TE: trailers, deflate;q=0.5
+```
+
+## ディレクティブ
+
+- `compress`
+ - : [Lempel-Ziv-Welch](https://en.wikipedia.org/wiki/LZW) (LZW) アルゴリズムを使用する形式が、転送コーディング名として受け入れられます。
+- `deflate`
+ - : [zlib](https://ja.wikipedia.org/wiki/Zlib) 構造が、転送コーディング名として受け入れられます。
+- `gzip`
+ - : [Lempel-Ziv coding](https://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77) (LZ77) を使用し、32 ビットの CRC を持つ形式が、転送コーディング名として受け入れられます。
+- `trailers`
+ - : クライアントがチャンクされた転送コーディングでトレーラーフィールドを受け入れる意思があることを示します。
+- `q`
+ - : 複数の転送コーディングが受け入れられる場合、[品質値](/ja/docs/Glossary/Quality_values)構文の `q` 引数を使うことでランク付けをすることができます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{HTTPHeader("Transfer-Encoding")}}
+- {{HTTPHeader("Trailer")}}
+- [チャンク転送エンコーディング](https://en.wikipedia.org/wiki/Chunked_transfer_encoding)（英語）
diff --git a/files/ja/web/http/headers/trailer/index.md b/files/ja/web/http/headers/trailer/index.md
new file mode 100644
index 00000000000000..9e1b8e65d0c5dc
--- /dev/null
+++ b/files/ja/web/http/headers/trailer/index.md
@@ -0,0 +1,86 @@
+---
+title: Trailer
+slug: Web/HTTP/Headers/Trailer
+l10n:
+ sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+**Trailer** レスポンスヘッダーにより、メッセージ本体の送信中に動的に生成される可能性のあるメタデータ（メッセージの完全性チェック、デジタル署名、後処理のステータスなど）を提供するために、送信者がチャンクされたメッセージの終わりに追加のフィールドを含めることが可能になります。
+
+> **メモ:** トレーラーフィールドを許可するには、{{HTTPHeader("TE")}} リクエストヘッダーを "trailer" に設定する必要があります。
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">ヘッダーの種類</th>
+ <td>
+ {{Glossary("Request header", "リクエストヘッダー")}}、
+ {{Glossary("Response header", "レスポンスヘッダー")}}、
+ {{Glossary("Payload header", "ペイロードヘッダー")}}
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
+ <td>はい</td>
+ </tr>
+ </tbody>
+</table>
+
+## 構文
+
+```http
+Trailer: header-names
+```
+
+## ディレクティブ
+
+- `header-names`
+
+ - : チャンクされたメッセージのトレーラー部分に存在する HTTP ヘッダーフィールド。
+ 以下のヘッダーフィールドは**許可されていません**。
+
+ - メッセージフレーミングヘッダー（{{HTTPHeader("Transfer-Encoding")}} や
+ {{HTTPHeader("Content-Length")}} など）
+ - ルーティングヘッダー（{{HTTPHeader("Host")}}）
+ - リクエスト修飾子（制御や条件、例えば {{HTTPHeader("Cache-Control")}}、{{HTTPHeader("Max-Forwards")}}、{{HTTPHeader("TE")}} など）
+ - 認証ヘッダー（{{HTTPHeader("Authorization")}} や {{HTTPHeader("Set-Cookie")}} など）
+ - または {{HTTPHeader("Content-Encoding")}}、{{HTTPHeader("Content-Type")}}、{{HTTPHeader("Content-Range")}}、そして `Trailer` 自体。
+
+## 例
+
+### トレーラーヘッダーを使用するチャンク転送エンコード方式
+
+この例では、{{HTTPHeader("Expires")}} ヘッダーがチャンクされたメッセージの終わりに使用され、末尾のヘッダーとして有益な役割を果たします。
+
+```http
+HTTP/1.1 200 OK
+Content-Type: text/plain
+Transfer-Encoding: chunked
+Trailer: Expires
+
+7\r\n
+Mozilla\r\n
+9\r\n
+Developer\r\n
+7\r\n
+Network\r\n
+0\r\n
+Expires: Wed, 21 Oct 2015 07:28:00 GMT\r\n
+\r\n
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{HTTPHeader("Transfer-Encoding")}}
+- {{HTTPHeader("TE")}}
+- [チャンク転送エンコーディング](https://en.wikipedia.org/wiki/Chunked_transfer_encoding)（英語）
diff --git a/files/ja/web/http/messages/http_request_headers2.png b/files/ja/web/http/messages/http_request_headers2.png
deleted file mode 100644
index 42b64af3752b6c..00000000000000
Binary files a/files/ja/web/http/messages/http_request_headers2.png and /dev/null differ
diff --git a/files/ja/web/javascript/reference/global_objects/date/index.md b/files/ja/web/javascript/reference/global_objects/date/index.md
index 5566fb8012b43d..6c26916fce71f5 100644
--- a/files/ja/web/javascript/reference/global_objects/date/index.md
+++ b/files/ja/web/javascript/reference/global_objects/date/index.md
@@ -2,94 +2,240 @@
title: Date
slug: Web/JavaScript/Reference/Global_Objects/Date
l10n:
- sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3
+ sourceCommit: 54962bbd1d367115cfd01b4e1ba6b552e8b68eb7
---
{{JSRef}}
-JavaScript の **`Date`** オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。 `Date` オブジェクトは協定世界時 (UTC) の 1970 年 1 月 1 日からの経過ミリ秒数を表す `Number` の値を含んでいます。
+JavaScript の **`Date`** オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。`Date` オブジェクトは、1970 年 1 月 1 日午前 0 時 (UTC)（元期）からのミリ秒を表す整数値をカプセル化しています。
> **メモ:** TC39 は [Temporal](https://tc39.es/proposal-temporal/docs/index.html) という、新しい日付/時刻の API を開発しています。これについて詳しくは [Igalia のブログ](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/)を参照してください。まだ正式利用の準備はできていません。
## 解説
-### ECMAScript 元期 とタイムスタンプ
+### 元期、タイムスタンプ、無効な日時
-JavaScript の日時は基本的に、 [ECMAScript 元期](https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-time-values-and-time-range) 、すなわち協定世界時 (UTC) の 1970 年 1 月 1 日深夜 0 時（[UNIX 元期](https://ja.wikipedia.org/wiki/UNIX時間)と同等）からの経過ミリ秒数で示されます。
+JavaScript の日付は基本的に、[元期](https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-time-values-and-time-range)として定義される UTC の 1970 年 1 月 1 日午前 0 時（[UNIX 元期](/ja/docs/Glossary/Unix_time)と同じ）から経過したミリ秒単位の時刻を指定します。このタイムスタンプはタイムゾーンに依存せず、歴史の一瞬を固有のものとして定義します。
-> **メモ:** Date オブジェクトの中心となる時間値は UTC ですが、日付と時刻、またはその一部を取得する基本的なメソッドは、すべて地方時（ホストシステムなど）のタイムゾーンとオフセットで動作することを覚えておくことが重要です。
+> **メモ:** Date オブジェクトの中核となる時刻の値は UTC ですが、日時やその部品を取得する基本的なメソッドは、すべてローカル（つまりホストシステム）のタイムゾーンとオフセットで動作します。
-`Date` の最大値は、確実な整数の最大値 (`Number.MAX_SAFE_INTEGER`、9,007,199,254,740,991) と同じ値ではないことに注意が必要です。代わりに ECMA-262 では、 UTC の 1970 年 1 月 1 日から前後 ±100,000,000 (1 億) 日（つまり、紀元前 271821 年 4 月 20 日 - 紀元 275760 年 9 月 13 日）を標準の `Date` オブジェクトで表すことができると定義しています。
+`Date` オブジェクトで表現できるタイムスタンプの最大値は、安全な整数の最大値（{{jsxref("Number.MAX_SAFE_INTEGER")}}、9,007,199,254,740,991）よりもわずかに小さくなります。`Date` オブジェクトは、元期に対して最大 ±8,640,000,000,000 ミリ秒、つまり±100,000,000（1 億）日を表します。これは紀元前 271821 年 4 月 20 日から西暦 275760 年 9 月 13 日までの範囲です。この範囲外の時刻を表そうとすると、`Date` オブジェクトは [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) のタイムスタンプ値を持ち、"Invalid Date" （無効な日時）となります。
-### 日時形式とタイムゾーンの変換
+```js
+console.log(new Date(8.64e15).toString()); // "Sat Sep 13 275760 00:00:00 GMT+0000 (Coordinated Universal Time)"
+console.log(new Date(8.64e15 + 1).toString()); // "Invalid Date"
+```
+
+`Date` に格納されるタイムスタンプを操作するさまざまなメソッドがあります。
+
+- タイムスタンプ値を直接操作するには、{{jsxref("Date/getTime", "getTime()")}} および {{jsxref("Date/setTime", "setTime()")}} メソッドを使用します。
+- {{jsxref("Date/valueOf", "valueOf()")}} および [`[@@toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive) メソッド（「数値」を渡したとき）は、[数値変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#数値変換)において自動的に呼び出されますが、タイムスタンプを返すので、`Date` オブジェクトは数値のコンテキストで使用すると、タイムスタンプのように振る舞います。
+- 静的メソッド（{{jsxref("Date.now()")}}、{{jsxref("Date.parse()")}}、{{jsxref("Date.UTC()")}}）はすべて、`Date` オブジェクトではなくタイムスタンプを返します。
+- {{jsxref("Date/Date", "Date()")}} コンストラクターは、タイムスタンプのみを引数として呼び出すことができます。
+
+### 日時の成分とタイムゾーン
+
+日付は内部的には単一の数値であるタイムスタンプで表されます。タイムスタンプを操作する際には、タイムスタンプを構造化された日時表現として解釈する必要があります。タイムスタンプを解釈する方法は常に 2 つあります。ローカル時刻として解釈する方法と、世界標準時を定義する協定世界時 (UTC) として解釈する方法です。ローカルタイムゾーンは `Date` オブジェクトには格納されず、ホスト環境（ユーザー端末）によって決定されます。
+
+> **メモ:** UTC を[グリニッジ標準時](https://ja.wikipedia.org/wiki/グリニッジ標準時) (GMT) と混同してはいけません。両者は常に同じではありません。これはリンク先のウィキペディアのページで詳しく説明されています。
+
+例えば、タイムスタンプ 0 は歴史上の一意の瞬間を表しますが、2 つの方法で解釈することができます。
+
+- UTC 時刻としては、1970 年 1 月 1 日午前 0 時 (UTC)。
+- 日本標準時 (UTC+9) としては、1970 年 1 月 1 日 9 時 00 分 00 秒です。
+
+{{jsxref("Date/getTimezoneOffset", "getTimezoneOffset()")}} メソッドは、UTC とローカル時刻の差を分単位で返します。タイムゾーンのオフセットは、現在のタイムゾーンに依存するだけでなく、サマータイムや過去には変更があったため、`Date` オブジェクトが表す時刻にも依存することに注意しましょう。要するに、タイムゾーンオフセットは `Date` オブジェクトが表す時刻とホスト環境の場所における UTC 時刻からのオフセットです。
+
+`Date` のメソッドには 2 種類あり、1 つはタイムスタンプをローカル時刻として解釈して様々な日付部品を取得したり設定したりするもの、もう 1 つは UTC を使用するものです。
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th rowspan="2">成分</th>
+ <th colspan="2">ローカル</th>
+ <th colspan="2">UTC</th>
+ </tr>
+ <tr>
+ <th>取得</th>
+ <th>設定</th>
+ <th>取得</th>
+ <th>設定</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>年</td>
+ <td>{{jsxref("Date/getFullYear", "getFullYear()")}}</td>
+ <td>{{jsxref("Date/setFullYear", "setFullYear()")}}</td>
+ <td>{{jsxref("Date/getUTCFullYear", "getUTCFullYear()")}}</td>
+ <td>{{jsxref("Date/setUTCFullYear", "setUTCFullYear()")}}</td>
+ </tr>
+ <tr>
+ <td>月</td>
+ <td>{{jsxref("Date/getMonth", "getMonth()")}}</td>
+ <td>{{jsxref("Date/setMonth", "setMonth()")}}</td>
+ <td>{{jsxref("Date/getUTCMonth", "getUTCMonth()")}}</td>
+ <td>{{jsxref("Date/setUTCMonth", "setUTCMonth()")}}</td>
+ </tr>
+ <tr>
+ <td>日</td>
+ <td>{{jsxref("Date/getDate", "getDate()")}}</td>
+ <td>{{jsxref("Date/setDate", "setDate()")}}</td>
+ <td>{{jsxref("Date/getUTCDate", "getUTCDate()")}}</td>
+ <td>{{jsxref("Date/setUTCDate", "setUTCDate()")}}</td>
+ </tr>
+ <tr>
+ <td>時</td>
+ <td>{{jsxref("Date/getHours", "getHours()")}}</td>
+ <td>{{jsxref("Date/setHours", "setHours()")}}</td>
+ <td>{{jsxref("Date/getUTCHours", "getUTCHours()")}}</td>
+ <td>{{jsxref("Date/setUTCHours", "setUTCHours()")}}</td>
+ </tr>
+ <tr>
+ <td>分</td>
+ <td>{{jsxref("Date/getMinutes", "getMinutes()")}}</td>
+ <td>{{jsxref("Date/setMinutes", "setMinutes()")}}</td>
+ <td>{{jsxref("Date/getUTCMinutes", "getUTCMinutes()")}}</td>
+ <td>{{jsxref("Date/setUTCMinutes", "setUTCMinutes()")}}</td>
+ </tr>
+ <tr>
+ <td>秒</td>
+ <td>{{jsxref("Date/getSeconds", "getSeconds()")}}</td>
+ <td>{{jsxref("Date/setSeconds", "setSeconds()")}}</td>
+ <td>{{jsxref("Date/getUTCSeconds", "getUTCSeconds()")}}</td>
+ <td>{{jsxref("Date/setUTCSeconds", "setUTCSeconds()")}}</td>
+ </tr>
+ <tr>
+ <td>ミリ秒</td>
+ <td>{{jsxref("Date/getMilliseconds", "getMilliseconds()")}}</td>
+ <td>{{jsxref("Date/setMilliseconds", "setMilliseconds()")}}</td>
+ <td>{{jsxref("Date/getUTCMilliseconds", "getUTCMilliseconds()")}}</td>
+ <td>{{jsxref("Date/setUTCMilliseconds", "setUTCMilliseconds()")}}</td>
+ </tr>
+ <tr>
+ <td>曜日</td>
+ <td>{{jsxref("Date/getDay", "getDay()")}}</td>
+ <td>なし</td>
+ <td>{{jsxref("Date/getUTCDay", "getUTCDay()")}}</td>
+ <td>なし</td>
+ </tr>
+ </tbody>
+</table>
+
+{{jsxref("Date/Date", "Date()")}} コンストラクターは 2 つ以上の引数を指定して呼び出すことができ、その場合はそれぞれローカル時刻年、月、日、時、分、秒、ミリ秒として解釈されます。{{jsxref("Date.UTC()")}} も同様に動作しますが、こちらは成分を UTC 時刻として解釈し、年を表す単一の引数も受け入れます。
+
+> **メモ:** `Date()` コンストラクターや `Date.UTC()`、そして非推奨の {{jsxref("Date/getYear", "getYear()")}}/{{jsxref("Date/setYear", "setYear()")}} メソッドなど、一部のメソッドは 2 桁の年を 1900 年代の年として解釈します。例えば、`new Date(99, 5, 24)` は 1999 年 6 月 24 日と解釈され、99 年 6 月 24 日とは解釈されません。 詳細は [2 桁の年の解釈](#2_桁の年の解釈) を参照ください。
+
+ある部分が指定範囲を超えたり、下回ったりした場合、通常、その部分は上位の部分に「繰り上げ」されるか、「繰り下げ」されます。例えば、月を 12 に設定すると（月はゼロ基点なので、12 月は 11）、翌年の 1 月になります。日を 0 に設定すると、前月の最終日になります。これは[日時文字列形式](#日時文字列形式)で指定した日付にも適用されます。
+
+### 日時文字列形式
+
+文字列として日付を書式化する方法はたくさんあります。JavaScript 仕様書では、普遍的に対応している書式を 1 つだけ指定しています。ISO 8601 カレンダー日付拡張書式を簡略化した[日付時刻文字列書式](https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-date-time-string-format)です。書式は以下の通りです。
+
+```plain
+YYYY-MM-DDTHH:mm:ss.sssZ
+```
+
+- `YYYY` は年で、4 つの数字（`0000` から `9999`）、または `+` または `-` に続く 6 桁の数字です。拡張された年には符号が必要です。`-000000` は明示的に有効な年として不許可となっています。
+- `MM` は月で、2 桁（`01` から `12`）です。既定では `01` です。
+- `DD` は月の日です。2 桁の数字で指定します（`01` から `31` まで）。既定では `01` です。
+- `T` はリテラル文字で、文字列の時刻部分の始まりを示します。`T` は時刻部分を指定する場合は必須です。
+- `HH` は 2 桁の数字で時を表します（`00` から `23`）。特殊なケースとして、`24:00:00` を指定することができ、これは翌日の始まりの午前 0 時と解釈されます。既定では `00` です。
+- `mm` は分で、2 桁で指定します（`00` から `59` まで）。既定では `00` です。
+- `ss` は秒で、2 桁（`00` から `59`）です。既定では `00` です。
+- `sss`はミリ秒で 3 桁（`000` から `999`）。既定では `000` 。
+- `Z` はタイムゾーンオフセットで、リテラル文字の `Z` (UTC を示す) か、`+` または `-` に続いて `HH:mm` (UTC からの時分のオフセット) を指定します。
+
+さまざまな成分を省略できますので、以下のものはすべて有効です。
+
+- 日付のみの形式: `YYYY`, `YYYY-MM`, `YYYY-MM-DD`
+- 日時形式: 上記の日付のみの形式に続いて `T`、それに `HH:mm`, `HH:mm:ss`, `HH:mm:ss.sss` などが続きます。どの組み合わせでも、タイムゾーンオフセットを続けることができます。
+
+例えば、`"2011-10-10"`（日付のみの形式）、`"2011-10-10T14:48:00"`（日時形式）、`"2011-10-10T14:48:00.000+09:00"`（日時形式にミリ秒とタイムゾーンが付いたもの）はすべて有効な日時文字列です。
+
+タイムゾーンオフセットがない場合、**日付のみの形式は UTC 時刻として解釈され、日時形式はローカル時刻として解釈されます。** これは過去には ISO 8601 に適合しない仕様があったためですが、ウェブの互換性のために変更できませんでした。[Broken Parser - A Web Reality Issue](https://maggiepint.com/2017/04/11/fixing-javascript-date-web-compatibility-and-reality/) を参照してください。
+
+{{jsxref("Date.parse()")}} および {{jsxref("Date/Date", "Date()")}} コンストラクターは、どちらも日時文字列形式の文字列を入力として受け入れます。さらに、入力がこの形式に一致しない場合、実装が他の日付形式にも対応することが許されています。
+
+{{jsxref("Date/toISOString", "toISOString()")}} メソッドは、タイムゾーンのオフセットを常に `Z` (UTC) に設定した状態で、日付の文字列表現を日時文字列形式で返します。
+
+> **メモ:** 他の書式への対応は保証されていませんので、互換性を最大にするために、入力は上記の日時文字列の書式に準拠するようにしてください。しかし、{{rfc(2822)}} 形式のように、主要な実装ですべて対応している書式もあります。常に[ブラウザー横断テスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)を行い、対象とするブラウザーすべてで確実にコードが動作するようにしてください。様々な書式化に対応するには、ライブラリーが役立ちます。
-様々な形式で日時を取得したり、タイムゾーンの変換を行ったりすることができる方法はたくさんあります。特に便利なのは、世界時標準 (World Time Standard) で定義されている世界標準時である協定世界時 (UTC) で日付と時刻を出力する関数です。（この時間は歴史的に*グリニッジ標準時*として知られており、 UTC はイギリスのロンドンとその近くのグリニッジを含む子午線に沿って位置しています。）ユーザーの端末は現地時間を提供します。
+標準外の文字列は、タイムゾーンを含め、実装が望む方法で構文解析できます。ほとんどの実装では既定でローカルのタイムゾーンを使用します。実装は、境界外の日付部品に対して不正な日付を返すことを要求されませんが、通常はそうします。文字列は(上で定義されていません)境界内の日付要素を持つことができますが、実際には日付を表していません(例えば、"2月30日")。この場合、実装上の不整合が発生します。[`Date.parse()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#例) のページでは、このような非標準の例について詳しく説明しています。
-地方時の日付と時刻の個々の部分を読み書きするメソッド（{{jsxref("Date/getDay", "getDay()")}} や {{jsxref("Date/setHours", "setHours()")}} など）に加えて、 UTC を使用して日付と時刻を読み書きする同等のメソッド（{{jsxref("Date/getUTCDay()", "getUTCDay()")}} や {{jsxref("Date/setUTCHours", "setUTCHours()")}} など）もあります。
+### 日付を書式化するその他の方法
+
+- {{jsxref("Date/toISOString", "toISOString()")}} は、`1970-01-01T00:00:00.000Z`（上で紹介した日付時刻の文字列形式で、[ISO 8601](https://ja.wikipedia.org/wiki/ISO_8601) を簡略化したもの）の形式の文字列を返します。{{jsxref("Date/toJSON", "toJSON()")}} は `toISOString()` を呼び出し、その結果を返します。
+- {{jsxref("Date/toString", "toString()")}} は `Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time)` の形式の文字列を返すのに対し、{{jsxref("Date/toDateString", "toDateString()")}} および {{jsxref("Date/toTimeString", "toTimeString()")}} はそれぞれ日付と時刻の部分の文字列を返します。[`[@@toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive) は（`"string"` または `"default"` を渡したとき） `toString()` を呼び出し、その結果を返します。
+- {{jsxref("Date/toUTCString", "toUTCString()")}} は `Thu, 01 Jan 1970 00:00:00 GMT` の形（{{rfc(7231)}} で標準化）の文字列を返します。
+- {{jsxref("Date/toLocaleDateString", "toLocaleDateString()")}}、{{jsxref("Date/toLocaleTimeString", "toLocaleTimeString()")}}、{{jsxref("Date/toLocaleString", "toLocaleString()")}} はロケール固有の日付と時刻の書式を使用します。これはふつう [`Intl`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl) API で提供されるものです。
+
+例については[`toString` メソッドの返値の形式](#tostring_メソッドの返値の形式)の節を参照してください。
## コンストラクター
- {{jsxref("Date/Date", "Date()")}}
- - : 関数として呼び出された場合、現在の日付と時刻の文字列表現を返します。すべての引数は無視されます。この結果は `new Date().toString()` を実行するのと同じです。
-- {{jsxref("Date/Date", "new Date()")}}
- - : コンストラクターとして呼び出された場合、新しい `Date` オブジェクトを返します。
+ - : コンストラクターとして呼び出された場合、新しい `Date` オブジェクトを返します。関数として呼び出された場合、現在の日付と時刻の文字列表現を返します。
## 静的メソッド
- {{jsxref("Date.now()")}}
- : 現在の時刻に対応する数値、すなわち UTC の 1970 年 1 月 1 日 00:00:00 から経過したミリ秒数を表す数値を返します。うるう秒は無視します。
- {{jsxref("Date.parse()")}}
+ - : 日付を表す文字列を解釈して、UTC の 1970 年 1 月 1 日 00:00:00 から経過したミリ秒数を表す数値を返します。うるう秒は無視します。
+- {{jsxref("Date.UTC()")}}
+ - : 最も長い形式のコンストラクターと同じ引数（すなわち 2 〜 7）を受け取り、 1970 年 1 月 1 日 00:00:00 （UTC）から経過したミリ秒数を返します。うるう秒は無視します。
- - : 日付を表す文字列を解釈して、地方時で 1970 年 1 月 1 日 00:00:00 から経過したミリ秒数を表す数値を返します。うるう秒は無視します。
+## インスタンスプロパティ
- > **メモ:** ブラウザーごとに動作が異なり一貫性がないため、 `Date.parse` で文字列を解釈しないことを強く推奨します。
+これらのプロパティは `Date.prototype` で定義されており、すべての `Date` インスタンスで共有されます。
-- {{jsxref("Date.UTC()")}}
- - : 最も長い形式のコンストラクターと同じ引数（すなわち 2 〜 7）を受け取り、 1970 年 1 月 1 日 00:00:00 （UTC）から経過したミリ秒数を返します。うるう秒は無視します。
+- {{jsxref("Object/constructor", "Date.prototype.constructor")}}
+ - : このインスタンスオブジェクトを作成したコンストラクター関数。`Date` インスタンスの場合、初期値は {{jsxref("Date/Date", "Date")}} コンストラクターです。
## インスタンスメソッド
- {{jsxref("Date.prototype.getDate()")}}
- - : 地方時に基づき、指定された日時の「日」 (`1`–`31`) を返します。
+ - : 地方時に基づき、指定された日時の「日」 (`1` ～ `31`) を返します。
- {{jsxref("Date.prototype.getDay()")}}
- - : 地方時に基づき、指定された日時の「曜日」 (`0`–`6`) を返します。
-- {{jsxref("Date.prototype.getFullYear()")}}
+ - : 地方時に基づき、指定された日時の「曜日」 (`0` ～ `6`) を返します。
+- {{jsxref("Date/getFullYear")}}
- : 地方時に基づき、指定された日時の「年」 (4 桁の年であれば 4 桁) を返します。
- {{jsxref("Date.prototype.getHours()")}}
- - : 地方時に基づき、指定された日時の「時」 (`0`–`23`) を返します。
+ - : 地方時に基づき、指定された日時の「時」 (`0` ～ `23`) を返します。
- {{jsxref("Date.prototype.getMilliseconds()")}}
- - : 地方時に基づき、指定された日時の「ミリ秒」 (`0`–`999`) を返します。
+ - : 地方時に基づき、指定された日時の「ミリ秒」 (`0` ～ `999`) を返します。
- {{jsxref("Date.prototype.getMinutes()")}}
- - : 地方時に基づき、指定された日時の「分」 (`0`–`59`) を返します。
+ - : 地方時に基づき、指定された日時の「分」 (`0` ～ `59`) を返します。
- {{jsxref("Date.prototype.getMonth()")}}
- - : 地方時に基づき、指定された日時の「月」 (`0`–`11`) を返します。
+ - : 地方時に基づき、指定された日時の「月」 (`0` ～ `11`) を返します。
- {{jsxref("Date.prototype.getSeconds()")}}
- - : 地方時に基づき、指定された日時の「秒」 (`0`–`59`) を返します。
+ - : 地方時に基づき、指定された日時の「秒」 (`0` ～ `59`) を返します。
- {{jsxref("Date.prototype.getTime()")}}
- : 指定された日時を協定世界時 (UTC) の 1970 年 1 月 1 日 00:00:00 からの経過ミリ秒単位の数値で返します。 (それ以前の時刻では負の数を返します。)
- {{jsxref("Date.prototype.getTimezoneOffset()")}}
- : 現地の時間帯のオフセットを分で返します。
- {{jsxref("Date.prototype.getUTCDate()")}}
- - : 協定世界時に基づき、指定された日時の「日」 (`1`–`31`) を返します。
+ - : 協定世界時に基づき、指定された日時の「日」 (`1` ～ `31`) を返します。
- {{jsxref("Date.prototype.getUTCDay()")}}
- - : 協定世界時に基づき、指定された日時の「曜日」 (`0`–`6`) を返します。
+ - : 協定世界時に基づき、指定された日時の「曜日」 (`0` ～ `6`) を返します。
- {{jsxref("Date.prototype.getUTCFullYear()")}}
- : 協定世界時に基づき、指定された日時の「年」 (4 桁の年であれば 4 桁) を返します。
- {{jsxref("Date.prototype.getUTCHours()")}}
- - : 協定世界時に基づき、指定された日時の「時」 (`0`–`23`) を返します。
+ - : 協定世界時に基づき、指定された日時の「時」 (`0` ～ `23`) を返します。
- {{jsxref("Date.prototype.getUTCMilliseconds()")}}
- - : 協定世界時に基づき、指定された日時の「ミリ秒」 (`0`–`999`) を返します。
+ - : 協定世界時に基づき、指定された日時の「ミリ秒」 (`0` ～ `999`) を返します。
- {{jsxref("Date.prototype.getUTCMinutes()")}}
- - : 協定世界時に基づき、指定された日時の「分」 (`0`–`59`) を返します。
+ - : 協定世界時に基づき、指定された日時の「分」 (`0` ～ `59`) を返します。
- {{jsxref("Date.prototype.getUTCMonth()")}}
- - : 協定世界時に基づき、指定された日時の「月」 (`0`–`11`) を返します。
+ - : 協定世界時に基づき、指定された日時の「月」 (`0` ～ `11`) を返します。
- {{jsxref("Date.prototype.getUTCSeconds()")}}
- - : 協定世界時に基づき、指定された日時の「秒」 (`0`–`59`) を返します。
+ - : 協定世界時に基づき、指定された日時の「秒」 (`0` ～ `59`) を返します。
- {{jsxref("Date.prototype.getYear()")}} {{Deprecated_Inline}}
- - : 地方時に基づき、指定された日時の「年」 (ふつうは 2–3 桁) を返します。代わりに {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} を使用してください。
+ - : 地方時に基づき、指定された日時の「年」 (ふつうは 2 ～ 3 桁) を返します。代わりに {{jsxref("Date/getFullYear", "getFullYear()")}} を使用してください。
- {{jsxref("Date.prototype.setDate()")}}
- : 地方時に基づき、指定された日時の「日」を設定します。
-- {{jsxref("Date.prototype.setFullYear()")}}
+- {{jsxref("Date/setFullYear")}}
- : 地方時に基づき、指定された日時の「年」を完全な形 (例えば、 4 桁の年であれば 4 桁) で設定します。
- {{jsxref("Date.prototype.setHours()")}}
- : 地方時に基づき、指定された日時の「時」を設定します。
@@ -102,7 +248,7 @@ JavaScript の日時は基本的に、 [ECMAScript 元期](https://tc39.es/ecma2
- {{jsxref("Date.prototype.setSeconds()")}}
- : 地方時に基づき、指定された日時の「秒」を設定します。
- {{jsxref("Date.prototype.setTime()")}}
- - : {{jsxref("Date")}} オブジェクトを協定世界時(UTC) の 1970 年 1 月 1 日 00:00:00 からのミリ秒単位の数で表された時刻に設定します。
+ - : {{jsxref("Date")}} オブジェクトを協定世界時 (UTC) の 1970 年 1 月 1 日 00:00:00 からのミリ秒単位の数で表された時刻に設定します。
- {{jsxref("Date.prototype.setUTCDate()")}}
- : 協定世界時に基づき、指定された日時の「日」を設定します。
- {{jsxref("Date.prototype.setUTCFullYear()")}}
@@ -118,15 +264,13 @@ JavaScript の日時は基本的に、 [ECMAScript 元期](https://tc39.es/ecma2
- {{jsxref("Date.prototype.setUTCSeconds()")}}
- : 協定世界時に基づき、指定された日時の「秒」を設定します。
- {{jsxref("Date.prototype.setYear()")}} {{Deprecated_Inline}}
- - : 協定地方時に基づき、指定された日時の「年」 (ふつうは 2–3 桁) を設定します。代わりに {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} を使用してください。
+ - : 協定地方時に基づき、指定された日時の「年」 (ふつうは 2 ～ 3 桁) を設定します。代わりに {{jsxref("Date/setFullYear", "setFullYear()")}} を使用してください。
- {{jsxref("Date.prototype.toDateString()")}}
- : {{jsxref("Date")}} の「日付」部を、 'Thu Apr 12 2018' のように人間が読みやすい形式の文字列にして返します。
- {{jsxref("Date.prototype.toISOString()")}}
- : 日付を ISO 8601 Extended Format に準じた文字列に変換します。
- {{jsxref("Date.prototype.toJSON()")}}
- - : {{jsxref("Date.prototype.toISOString()", "toISOString()")}} を使用して {{jsxref("Date")}} を表す文字列を返します。{{jsxref("JSON.stringify()")}} の代わりに使用してください。
-- {{jsxref("Date.prototype.toGMTString()")}} {{Deprecated_Inline}}
- - : GMT (UTC) タイムゾーンを基準にした {{jsxref("Date")}} を表す文字列を返します。代わりに {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} を使用してください。
+ - : {{jsxref("Date")}} を表す文字列を {{jsxref("Date/toISOString", "toISOString()")}} を使用して返します。{{jsxref("JSON.stringify()")}} の代わりに使用するためのものです。
- {{jsxref("Date.prototype.toLocaleDateString()")}}
- : この日時の日付部分を、システム設定に基づいて地域性を考慮した表現による文字列にして返します。
- {{jsxref("Date.prototype.toLocaleString()")}}
@@ -141,6 +285,8 @@ JavaScript の日時は基本的に、 [ECMAScript 元期](https://tc39.es/ecma2
- : 日時を UTC タイムゾーンを使用する文字列に変換します。
- {{jsxref("Date.prototype.valueOf()")}}
- : {{jsxref("Date")}} オブジェクトのプリミティブ値を返します。{{jsxref("Object.prototype.valueOf()")}} メソッドを上書きします。
+- [`Date.prototype[@@toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive)
+ - : `Date` オブジェクトをプリミティブ値に変換します。
## 例
@@ -148,12 +294,12 @@ JavaScript の日時は基本的に、 [ECMAScript 元期](https://tc39.es/ecma2
以下の例で、 JavaScript の日時を生成するいくつかの方法を示します。
-> **メモ:** `Date` コンストラクター（および `Date.parse` と同等）で日付文字列を解釈する際には、常に入力が [ISO 8601 形式](https://tc39.es/ecma262/#sec-date-time-string-format) (`YYYY-MM-DDTHH:mm:ss.sssZ`) であることを確認してください。他の形式で解釈した場合には、その挙動は実装によって定義されていて、すべてのブラウザーで動くとは限りません。多数の異なる形式に対応するためには、ライブラリーが役に立ちます。
+> **メモ:** 文字列から日付を作成するには、動作に一貫性がありません。異なる書式を使用する際の注意点については[日時文字列形式](#日時文字列形式)を参照してください。
```js
const today = new Date();
const birthday = new Date("December 17, 1995 03:24:00"); // 避けてください。すべてのランタイムで動作するとは限りません。
-const birthday2 = new Date("1995-12-17T03:24:00"); // これは ISO8601 互換であり、動作が信頼できます
+const birthday2 = new Date("1995-12-17T03:24:00"); // これは標準化されており、動作が信頼できます
const birthday3 = new Date(1995, 11, 17); // 月は 0 起点です
const birthday4 = new Date(1995, 11, 17, 3, 24, 0);
const birthday5 = new Date(628021800000); // 元期からのタイムスタンプ
@@ -163,35 +309,40 @@ const birthday5 = new Date(628021800000); // 元期からのタイムスタン
```js
const date = new Date("2020-05-12T23:50:21.817Z");
-date.toString(); // Tue May 12 2020 18:50:21 GMT-0500 (Central Daylight Time)
-date.toDateString(); // Tue May 12 2020
-date.toTimeString(); // 18:50:21 GMT-0500 (Central Daylight Time)
+date.toString(); // Wed May 13 2020 08:50:21 GMT+0900 (日本標準時)
+date.toDateString(); // Wed May 13 2020
+date.toTimeString(); // 08:50:21 GMT+0900 (日本標準時)
+date[Symbol.toPrimitive]("string"); // Wed May 13 2020 08:50:21 GMT+0900 (日本標準時)
+
date.toISOString(); // 2020-05-12T23:50:21.817Z
-date.toUTCString(); // Tue, 12 May 2020 23:50:21 GMT
-date.toGMTString(); // Tue, 12 May 2020 23:50:21 GMT
date.toJSON(); // 2020-05-12T23:50:21.817Z
-date.toLocaleString(); // 5/12/2020, 6:50:21 PM
-date.toLocaleDateString(); // 5/12/2020
-date.toLocaleTimeString(); // 6:50:21 PM
+
+date.toUTCString(); // Tue, 12 May 2020 23:50:21 GMT
+
+date.toLocaleString(); // 2020/5/13 8:50:21
+date.toLocaleDateString(); // 2020/5/13
+date.toLocaleTimeString(); // 8:50:21
```
### 年月日や時刻の取得
```js
-const date = new Date();
+const date = new Date("2000-01-17T16:45:30");
const [month, day, year] = [
date.getMonth(),
date.getDate(),
date.getFullYear(),
];
+// [0, 17, 2000] （月は 0 基点であるため）
const [hour, minutes, seconds] = [
date.getHours(),
date.getMinutes(),
date.getSeconds(),
];
+// [16, 45, 30]
```
-### 2 桁の年の補完
+### 2 桁の年の解釈
`new Date()` は 2 桁の年の値に対して、古くで望ましくない一貫性のない挙動を示します。具体的には、 `new Date()` の呼び出しに 2 桁の年の値が与えられた場合、その年の値はリテラルの年として扱われず、そのまま使用され、代わりに相対的なオフセットとして解釈されます。ある場合には 1900 年からのオフセットとなりますが、またある場合には 2000 年からのオフセットになります。
@@ -207,7 +358,7 @@ date.setYear(22);
date.toString(); // Wed Feb 01 1922 00:00:00 GMT+0000 (GMT)
```
-西暦 0 年から 99 年までの間の年を生成および取得するには、{{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} メソッドと {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} メソッドを使用してください。
+西暦 0 年から 99 年までの間の年を生成および取得するには、{{jsxref("Date/setFullYear", "setFullYear()")}} メソッドと {{jsxref("Date/getFullYear", "getFullYear()")}} メソッドを使用してください。
```js
// 推奨されるメソッドです。どんな値でも相対オフセットではなく、そのまま
@@ -258,7 +409,7 @@ function printElapsedTime(testFn) {
const yourFunctionReturn = printElapsedTime(yourFunction);
```
-> **メモ:** {{domxref("performance_property", "Web Performance API", "", 1)}} の高精度時刻機能に対応しているブラウザーでは、 {{domxref("Performance.now()")}} で、 {{jsxref("Date.now()")}} よりも高信頼かつ高精度な経過時間の測定が可能です。
+> **メモ:** {{domxref("Window/performance", "ウェブパフォーマンス API", "", "nocode")}} の高精度時刻機能に対応しているブラウザーでは、 {{domxref("Performance.now()")}} で、 {{jsxref("Date.now()")}} よりも高信頼かつ高精度な経過時間の測定が可能です。
### ECMAScript 元期からの経過秒数を取得する
@@ -278,4 +429,4 @@ const seconds = Math.floor(Date.now() / 1000);
## 関連情報
-- {{jsxref("Date/Date", "Date()")}} コンストラクター
+- {{jsxref("Date/Date", "Date()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md b/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md
new file mode 100644
index 00000000000000..e706e6b99c8635
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/float16array/float16array/index.md
@@ -0,0 +1,82 @@
+---
+title: Float16Array() コンストラクター
+slug: Web/JavaScript/Reference/Global_Objects/Float16Array/Float16Array
+l10n:
+ sourceCommit: dd339290fa3a42d9a7f079e17a62e1df1206f29d
+---
+
+{{JSRef}}
+
+**`Float16Array()`** コンストラクターは {{jsxref("Float16Array")}} オブジェクトを生成します。初期化データが明示的に与えられない限り、中身は `0` に初期化されます。
+
+## 構文
+
+```js-nolint
+new Float16Array()
+new Float16Array(length)
+new Float16Array(typedArray)
+new Float16Array(object)
+
+new Float16Array(buffer)
+new Float16Array(buffer, byteOffset)
+new Float16Array(buffer, byteOffset, length)
+```
+
+> **メモ:** `Float16Array()` は [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) でのみ構築できます。`new` なしで呼び出そうとすると {{jsxref("TypeError")}} がスローされます。
+
+### 引数
+
+[`TypedArray#引数`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#引数) を参照してください。
+
+### 例外
+
+[`TypedArray#例外`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#例外) を参照してください。
+
+## 例
+
+### Float16Array を作成する様々な方法
+
+```js
+// From a length
+const float16 = new Float16Array(2);
+float16[0] = 42;
+console.log(float16[0]); // 42
+console.log(float16.length); // 2
+console.log(float16.BYTES_PER_ELEMENT); // 2
+
+// From an array
+const x = new Float16Array([21, 31]);
+console.log(x[1]); // 31
+
+// From another TypedArray
+const y = new Float16Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+const buffer = new ArrayBuffer(32);
+const z = new Float16Array(buffer, 4, 4);
+console.log(z.byteOffset); // 4
+
+// From an iterable
+const iterable = (function* () {
+ yield* [1, 2, 3];
+})();
+const float16FromIterable = new Float16Array(iterable);
+console.log(float16FromIterable);
+// Float16Array [1, 2, 3]
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)
+- {{jsxref("TypedArray")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/ja/web/javascript/reference/global_objects/float16array/index.md b/files/ja/web/javascript/reference/global_objects/float16array/index.md
new file mode 100644
index 00000000000000..64a7fa63ffd27c
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/float16array/index.md
@@ -0,0 +1,94 @@
+---
+title: Float16Array
+slug: Web/JavaScript/Reference/Global_Objects/Float16Array
+l10n:
+ sourceCommit: dd339290fa3a42d9a7f079e17a62e1df1206f29d
+---
+
+{{JSRef}}
+
+**`Float16Array`** 型配列は、プラットフォームのバイトオーダーで 16 ビット浮動小数点数の配列を表します。バイトオーダーの制御が必要な場合は、代わりに {{jsxref("DataView")}} を使用してください。初期化データが明示的に与えられない限り、内容は `0` に初期化されます。一旦初期化されると、オブジェクトのメソッドを使用するか、標準的な配列インデックスの構文（つまりブラケット記法）を使用して配列の要素を参照できます。
+
+`Float16Array` は隠された {{jsxref("TypedArray")}} クラスのサブクラスです。
+
+> **メモ:** Float16 のサポートは、JavaScript API と CPU アーキテクチャの両方において万能ではありません。これを使用すると、プラットフォームによってはパフォーマンスが低下する可能性があります。これは、[float-backed canvases](https://github.com/w3c/ColorWeb-CG/blob/main/canvas_float.md)、WebGPU、WebGL、[stable diffusion](https://github.com/huggingface/blog/blob/main/stable_diffusion.md) を含む深層学習モデルなど、高度に最適化されパフォーマンスに敏感なシステムとのやり取りを想定しています。
+
+## コンストラクター
+
+- {{jsxref("Float16Array/Float16Array", "Float16Array()")}}
+ - : 新しい `Float16Array` オブジェクトを作成します。
+
+## 静的プロパティ
+
+以下に加えて、親である {{jsxref("TypedArray")}} から静的プロパティを継承します。
+
+- {{jsxref("TypedArray/BYTES_PER_ELEMENT", "Float16Array.BYTES_PER_ELEMENT")}}
+ - : 要素サイズを数値で返します。`Float16Array` の場合は `2` を返します。
+
+## 静的メソッド
+
+親である {{jsxref("TypedArray")}} から静的メソッドを継承します。
+
+## インスタンスプロパティ
+
+以下に加えて、親である {{jsxref("TypedArray")}} からインスタンスプロパティを継承します。
+
+これらのプロパティは `Float16Array.prototype` で定義され、すべての `Float16Array` インスタンスで共有されます。
+
+- {{jsxref("TypedArray/BYTES_PER_ELEMENT", "Float16Array.prototype.BYTES_PER_ELEMENT")}}
+ - : 要素サイズを数値で返します。`Float16Array` の場合は `2` を返します。
+- {{jsxref("Object/constructor", "Float16Array.prototype.constructor")}}
+ - : インスタンスオブジェクトを生成したコンストラクター関数です。`Float16Array` インスタンスの場合、初期値は {{jsxref("Float16Array/Float16Array", "Float16Array")}} コンストラクターです。
+
+## インスタンスメソッド
+
+親である {{jsxref("TypedArray")}} からインスタンスメソッドを継承します。
+
+## 例
+
+### Float16Array を作成する様々な方法
+
+```js
+// From a length
+const float16 = new Float16Array(2);
+float16[0] = 42;
+console.log(float16[0]); // 42
+console.log(float16.length); // 2
+console.log(float16.BYTES_PER_ELEMENT); // 2
+
+// From an array
+const x = new Float16Array([21, 31]);
+console.log(x[1]); // 31
+
+// From another TypedArray
+const y = new Float16Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+const buffer = new ArrayBuffer(32);
+const z = new Float16Array(buffer, 4, 4);
+console.log(z.byteOffset); // 4
+
+// From an iterable
+const iterable = (function* () {
+ yield* [1, 2, 3];
+})();
+const float16FromIterable = new Float16Array(iterable);
+console.log(float16FromIterable);
+// Float16Array [1, 2, 3]
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [JavaScript の型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)
+- {{jsxref("TypedArray")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/segmenter/segmenter/index.md b/files/ja/web/javascript/reference/global_objects/intl/segmenter/segmenter/index.md
index bdfa00f39f0f94..01ec34148ed58e 100644
--- a/files/ja/web/javascript/reference/global_objects/intl/segmenter/segmenter/index.md
+++ b/files/ja/web/javascript/reference/global_objects/intl/segmenter/segmenter/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: a3dd560fabb1fe4051f6273f41b337a5b1245a6e
---
+{{JSRef}}
+
**`Intl.Segmenter()`** コンストラクターは、ロケールに依存したテキスト分割を可能にする [`Intl.Segmenter`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter) オブジェクトを生成します。
{{EmbedInteractiveExample("pages/js/intl-segmenter.html")}}
diff --git a/files/ja/web/javascript/reference/global_objects/math/random/index.md b/files/ja/web/javascript/reference/global_objects/math/random/index.md
index 3c394582562c31..ca2a996cdece83 100644
--- a/files/ja/web/javascript/reference/global_objects/math/random/index.md
+++ b/files/ja/web/javascript/reference/global_objects/math/random/index.md
@@ -7,23 +7,27 @@ slug: Web/JavaScript/Reference/Global_Objects/Math/random
**`Math.random()`** 関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。その範囲ではほぼ均一な分布で、ユーザーは範囲の拡大をすることができます。実装側で乱数生成アルゴリズムの初期シードを選択します。ユーザーが初期シードを選択、またはリセットすることは出来ません。
-{{EmbedInteractiveExample("pages/js/math-random.html")}}
-
> **メモ:** `Math.random()` の提供する乱数は、暗号に使用可能な安全性を備えて*いません*。セキュリティに関連する目的では使用しないでください。代わりに Web Crypto API (より具体的には {{domxref("Crypto.getRandomValues", "window.crypto.getRandomValues()")}} メソッド) を使用してください。
+{{EmbedInteractiveExample("pages/js/math-random.html")}}
+
## 構文
-```
+```js-nolint
Math.random()
```
+### 引数
+
+なし
+
### 返値
-`0` (含む) から 1 (含まない) までの擬似乱数である浮動小数点数です。
+0 (含む) から 1 (含まない) までの擬似乱数である浮動小数点数です。
## 例
-JavaScript における数値は、IEEE 754 浮動小数点での round-to-nearest-even を行うため、以下の関数の値域が ( `Math.random()` 自体の値域が正しくても) 厳密ではないことに注意してください。非常に大きい境界値 (253 以上) のうち*極めて*稀な数値で、通常なら返されないはずの上限値が出力されてしまうことがあり得ます。
+JavaScript における数値は、IEEE 754 浮動小数点での round-to-nearest-even を行うため、以下の関数の値域が ( `Math.random()` 自体の値域が正しくても) 厳密ではないことに注意してください。非常に大きい境界値 (2<sup>53</sup> 以上) のうち*極めて*稀な数値で、通常なら返されないはずの上限値が出力されてしまうことがあり得ます。
### 0 以上 1 未満の乱数を得る
@@ -51,7 +55,7 @@ function getRandomArbitrary(min, max) {
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
- return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
+ return Math.floor(Math.random() * (max - min) + min); // 上限は除き、下限は含む
}
```
@@ -65,7 +69,7 @@ function getRandomInt(min, max) {
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
- return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
+ return Math.floor(Math.random() * (max - min + 1) + min); // 上限を含み、下限も含む
}
```
diff --git a/files/ja/web/javascript/reference/global_objects/object/isfrozen/index.md b/files/ja/web/javascript/reference/global_objects/object/isfrozen/index.md
index ef53d040f6e1fb..f364edf3376510 100644
--- a/files/ja/web/javascript/reference/global_objects/object/isfrozen/index.md
+++ b/files/ja/web/javascript/reference/global_objects/object/isfrozen/index.md
@@ -28,7 +28,7 @@ Object.isFrozen(obj)
## 解説
-お武衛ジェクトが凍結状態 (frozen) とは、オブジェクトが[拡張可能](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible)ではなく、すべてのプロパティは構成不可であり、そしてすべてのデータプロパティ（これはゲッターやセッターコンポーネントを持つアクセサープロパティ以外のものを指します）が書き込み不可である場合です。
+オブジェクトが凍結状態 (frozen) とは、オブジェクトが[拡張可能](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible)ではなく、すべてのプロパティは構成不可であり、そしてすべてのデータプロパティ（これはゲッターやセッターコンポーネントを持つアクセサープロパティ以外のものを指します）が書き込み不可である場合です。
## 例
diff --git a/files/ja/web/javascript/reference/global_objects/promise/index.md b/files/ja/web/javascript/reference/global_objects/promise/index.md
index cce038ca61b212..a87a67b3e9af30 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/index.md
@@ -2,7 +2,7 @@
title: Promise
slug: Web/JavaScript/Reference/Global_Objects/Promise
l10n:
- sourceCommit: effd5de5e42bfe045c3bf44b2d7b14f4d6146785
+ sourceCommit: 10b342385644e822d123694ad3bc8c2ca9abb2dc
---
{{JSRef}}
@@ -28,7 +28,7 @@ l10n:
-また、プロミスでは _resolved_ という用語が使用されることもあります。これは、プロミスが他のプロミスの最終的な状態と一致するように決定または「ロックイン」され、さらに解決または拒否しても何の影響もないことを意味します。元のプロミスの提案の [States and fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) の記事には、プロミスの用語についてのより詳細な説明があります。口語的には、「解決された」プロミスは「履行された」プロミスとよく同等に扱われますが、 "States and fates" で示しているように、解決されたプロミスは待機になったり拒否されたりすることもあります。次の例を参照してください。
+また、プロミスでは解決 (_resolved_) という用語が使用されることもあります。これは、プロミスが他のプロミスの最終的な状態と一致するように決定または「ロックイン」され、さらに解決または拒否しても何の影響もないことを意味します。元のプロミスの提案の [States and fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) の記事には、プロミスの用語についてのより詳細な説明があります。口語的には、「解決された」プロミスは「履行された」プロミスとよく同等に扱われますが、 "States and fates" で示しているように、解決されたプロミスは待機状態になったり拒否されたりすることもあります。次の例を参照してください。
```js
new Promise((resolveOuter) => {
@@ -63,7 +63,7 @@ myPromise
.then(handleFulfilledC, handleRejectedC);
```
-`.then()` に Promise オブジェクトを返すコールバック関数がない場合でも、連鎖の次のリンクへと処理が進みます。したがって、連鎖では最後の `.catch()` まで、すべての*拒否*のコールバック関数を省略しても安全です。
+`.then()` にコールバック関数がない場合でも、連鎖の次のリンクへと処理が進みます。したがって、連鎖では最後の `.catch()` まで、すべての*拒否*のコールバック関数を省略しても安全です。
それぞれの `.then()` で拒否されたプロミスを扱うと、プロミスの連鎖のさらに先に影響を及ぼします。エラーを直ちに処理しなければならないため、選択の余地がない場合もあります。このような場合には、連鎖的にエラー状態を維持するために、何らかの種類のエラーを発生させる必要があります。一方で、緊急の必要性がない場合は、最後の `.catch()` ステートメントまでエラー処理を行わない方がシンプルです。 `.catch()` は、実際には、単なる `.then()` からプロミスが履行されたときのためのコールバック関数のスロットを抜いたものです。
@@ -153,7 +153,7 @@ Promise.resolve(aThenable); // プロミスは 42 で履行
### プロミスの並行処理
-`Promise` クラスは，非同期タスクの[並行処理](https://en.wikipedia.org/wiki/Concurrent_computing)を容易にするために、4 つの静的メソッドを提供しています。
+`Promise` クラスは，非同期タスクの[並行処理](https://ja.wikipedia.org/wiki/並行計算)を容易にするために、4 つの静的メソッドを提供しています。
- {{jsxref("Promise.all()")}}
- : **すべて**のが履行されたときに履行され、**いずれか**のプロミスが拒否されると拒否される。
@@ -166,7 +166,7 @@ Promise.resolve(aThenable); // プロミスは 42 で履行
これらのメソッドはすべて、プロミスの[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)オブジェクト（正確には [Thenable](#thenable)）を受け取り、新しいプロミスを返します。これらはすべてサブクラス化に対応しています。つまり、 `Promise` のサブクラスに対して呼び出すことができ、その結果はサブクラスの種類を持つプロミスになります。そのためには、サブクラスのコンストラクターに [`Promise()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) と同じ定義を実装する必要があります。すなわち、単一の `executor` 関数を取り、これが `resolve` と `reject` コールバック関数を引数として取るようにします。また、サブクラスには静的メソッドの `resolve` も必要です。これは {{jsxref("Promise.resolve()")}} のように呼び出すことができ、値をプロミスに解決するためのメソッドです。
-JavaScript はもともと[シングルスレッド](/ja/docs/Glossary/Thread)なので、指定された瞬間には 1 つのタスクしか実行されませんが、異なるプロミス間で制御が移り、プロミスの実行が同時に行われるように見えることがあることに注意してください。JavaScript で[並列実行](https://ja.wikipedia.org/wiki/並列計算)を行うには、[ワーカースレッド](/ja/docs/Web/API/Web_Workers_API)を使うしかありません。
+JavaScript はもともと[シングルスレッド](/ja/docs/Glossary/Thread)なので、異なるプロミス間で制御が移り、プロミスの実行が同時に行われるように見えても、指定された瞬間には 1 つのタスクしか実行されないことに注意してください。JavaScript で[並列実行](https://ja.wikipedia.org/wiki/並列計算)を行うには、[ワーカースレッド](/ja/docs/Web/API/Web_Workers_API)を使うしかありません。
## コンストラクター
@@ -181,7 +181,7 @@ JavaScript はもともと[シングルスレッド](/ja/docs/Glossary/Thread)
## 静的メソッド
- {{jsxref("Promise.all()")}}
- - : 入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力さ れたプロミスがすべて履行されたとき（空の反復可能オブジェクトが渡されたときを含める）に、履行された値の配列で履行されます。入力のプロミスのいずれかが拒否されると、この最初の拒否理由によって拒否されます。
+ - : 入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力されたプロミスがすべて履行されたとき（空の反復可能オブジェクトが渡されたときを含める）に、履行された値の配列で履行されます。入力のプロミスのいずれかが拒否されると、この最初の拒否理由によって拒否されます。
- {{jsxref("Promise.allSettled()")}}
- : 入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力のプロミスがすべて決定されたときに履行されます（空の反復可能オブジェクトが渡された場合を含む）。
- {{jsxref("Promise.any()")}}
@@ -192,6 +192,8 @@ JavaScript はもともと[シングルスレッド](/ja/docs/Glossary/Thread)
- : 与えられた理由で拒否された新しい `Promise` オブジェクトを返します。
- {{jsxref("Promise.resolve()")}}
- : 与えられた値で解決された `Promise` オブジェクトを返します。もし値が Thenable （つまり `then` メソッドを持っているオブジェクト）ならば、返されるプロミスはその Thenable をたどり、その結果を採用します。そうでなければ、返されるプロミスは与えられた値で履行されます。
+- {{jsxref("Promise.withResolvers()")}}
+ - : {{jsxref("Promise/Promise", "Promise()")}} コンストラクターの実行側に渡された 2 つの引数に対応する、新しい `Promise` オブジェクトとそれを解決または拒否する 2 つの関数を格納したオブジェクトを返します。
## インスタンスプロパティ
@@ -218,17 +220,17 @@ JavaScript はもともと[シングルスレッド](/ja/docs/Glossary/Thread)
```js
const myFirstPromise = new Promise((resolve, reject) => {
- // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
- // In this example, we use setTimeout(...) to simulate async code.
- // In reality, you will probably be using something like XHR or an HTML API.
+ // resolve(...) は、非同期で行っていたことが成功したときに呼び出し、失敗したときには reject(...) を呼び出します。
+ // この例では、setTimeout(...) を使用して非同期コードをエミュレーションしています。
+ // 実際には、XHR や HTML API のようなものを使用することになります。
setTimeout(() => {
- resolve("Success!"); // Yay! Everything went well!
+ resolve("成功!"); // やった！うまくいった！
}, 250);
});
myFirstPromise.then((successMessage) => {
- // successMessage is whatever we passed in the resolve(...) function above.
- // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
+ // successMessage は上記の resolve(...) 関数に渡されたものになる。
+ // 文字列とは限らないが、成功メッセージだけであれば、おそらくそうなる。
console.log(`Yay! ${successMessage}`);
});
```
@@ -244,8 +246,8 @@ myFirstPromise.then((successMessage) => {
このコードは NodeJS で実行できます。実際にエラーが発生しているのを見ることで理解度が高まります。より多くのエラーを強制的に発生させるには、 `threshold` の値を変更してください。
```js
-// To experiment with error handling, "threshold" values cause errors randomly
-const THRESHOLD_A = 8; // can use zero 0 to guarantee error
+// エラー処理が経験できるように、"threshold" はランダムにエラーを発生させる。
+const THRESHOLD_A = 8; // 0 をエラーとして使用するため
function tetheredGetNumber(resolve, reject) {
setTimeout(() => {
@@ -265,7 +267,7 @@ function determineParity(value) {
}
function troubleWithGetNumber(reason) {
- const err = new Error("Trouble getting number", { cause: reason });
+ const err = new Error("数値の取得に失敗しました", { cause: reason });
console.error(err);
throw err;
}
@@ -291,17 +293,17 @@ new Promise(tetheredGetNumber)
})
.catch((reason) => {
if (reason.cause) {
- console.error("Had previously handled error");
+ console.error("以前扱ったエラーがあります");
} else {
- console.error(`Trouble with promiseGetWord(): ${reason}`);
+ console.error(`promiseGetWord() に失敗: ${reason}`);
}
})
- .finally((info) => console.log("All done"));
+ .finally((info) => console.log("完了しました"));
```
### 高度な例
-以下の例は `Promise` の仕組みを示したものです。 `testPromise()` メソッドは {{HTMLElement("button")}} をクリックする度に呼び出されます。`testPromise()` メソッドは、 {{domxref("setTimeout()")}} を用いて、 1 秒から 3 秒のランダムな時間の後、メソッドがこれまでに呼ばれた回数で履行されるプロミスを作成します。 `Promise()` コンストラクターを使用してプロミスを生成します。
+以下の例は `Promise` の仕組みを示したものです。 `testPromise()` メソッドは {{HTMLElement("button")}} をクリックする度に呼び出されます。これは、{{domxref("setTimeout()")}} を用いて、 1 秒から 3 秒のランダムな時間の後、メソッドがこれまでに呼ばれた回数で履行されるプロミスを作成します。 `Promise()` コンストラクターを使用してプロミスを生成します。
プロミスが履行されたことは、 {{jsxref("Promise/then", "p1.then()")}} で設定されたコールバックによって記録されます。この記録から、メソッドの同期処理部分が、プロミスによる非同期処理からどのように分離されているかがわかります。
@@ -366,7 +368,7 @@ btn.addEventListener("click", testPromise);
### XHR による画像の読み込み
-`Promise` と {{domxref("XMLHttpRequest")}} で画像を読み込む別の例は、 MDN の GitHub の [js-examples](https://github.com/mdn/js-examples/tree/master/promises-test) リポジトリーにあり、[動作を確認する](https://mdn.github.io/js-examples/promises-test/)ことができます。それぞれの行のコメントで Promise と XHR の構造がよくわかるはずです。
+`Promise` と {{domxref("XMLHttpRequest")}} で画像を読み込む別の例は、 MDN の GitHub の [js-examples](https://github.com/mdn/js-examples/tree/main/promises-test) リポジトリーにあり、[動作を確認する](https://mdn.github.io/js-examples/promises-test/)ことができます。それぞれの行のコメントで Promise と XHR の構造がよくわかるはずです。
### 現行の設定オブジェクトの追跡
@@ -451,5 +453,5 @@ btn.addEventListener("click", testPromise);
- [`Promise` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-promise)
- [プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises)ガイド
- [Promises/A+ specification](https://promisesaplus.com/)
-- [JavaScript Promises: an introduction](https://web.dev/promises/) (web.dev, 2013)
+- [JavaScript Promises: an introduction](https://web.dev/articles/promises) (web.dev, 2013)
- [Callbacks, Promises, and Coroutines: Asynchronous Programming Patterns in JavaScript](https://www.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript) Domenic Denicola によるスライドショー (2011)
diff --git a/files/ja/web/javascript/reference/global_objects/promise/withresolvers/index.md b/files/ja/web/javascript/reference/global_objects/promise/withresolvers/index.md
new file mode 100644
index 00000000000000..c7206491ec63a7
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/promise/withresolvers/index.md
@@ -0,0 +1,109 @@
+---
+title: Promise.withResolvers()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/withResolvers
+l10n:
+ sourceCommit: 6af0c0d0b640e756765976ad854f4cc64c2f911c
+---
+
+{{JSRef}}
+
+**`Promise.withResolvers()`** 静的メソッドは、新しい {{jsxref("Promise")}} オブジェクトと、{{jsxref("Promise/Promise", "Promise()")}} コンストラクターの実行子に渡す 2 つの引数に対応する、解決または拒否の 2 つの関数を含むオブジェクトを返します。
+
+## 構文
+
+```js-nolint
+Promise.withResolvers()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+以下のプロパティを格納するプレーンオブジェクトです。
+
+- `promise`
+ - : {{jsxref("Promise")}} オブジェクトです。
+- `resolve`
+ - : プロミスが解決されたときの関数です。意味付けについては {{jsxref("Promise/Promise", "Promise()")}} コンストラクターのリファレンスを参照してください。
+- `reject`
+ - : プロミスが拒否されたときの関数です。意味付けについては {{jsxref("Promise/Promise", "Promise()")}} コンストラクターのリファレンスを参照してください。
+
+## 解説
+
+`Promise.withResolvers()` は以下のコードと全く同じです。
+
+```js
+let resolve, reject;
+const promise = new Promise((res, rej) => {
+ resolve = res;
+ reject = rej;
+});
+```
+
+ただし、より簡潔であり、{{jsxref("Statements/let", "let")}} を使用する必要はありません。
+
+`Promise.withResolvers()` を使用する場合の主な違いは、解決関数や拒否関数を実行環境で一度ずつ作成して使用するのではなく、プロミス自身と同じスコープで使用することです。これにより、特にストリームやキューで繰り返し発生するイベントに使用する場合など、より高度な用途が可能になります。また、これは一般的に、実行環境内で多くのロジックをラップするよりも入れ子が少なくなります。
+
+`Promise.withResolvers()` は汎用的であり、サブクラスに対応しています。つまり、`Promise` のサブクラスで呼び出すことができ、その結果にはサブクラスの型のプロミスが格納されます。そのためには、サブクラスのコンストラクターは [`Promise()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) コンストラクターと同じシグネチャを実装する必要があります。`resolve` と `reject` コールバックを引数として呼び出される単一の実行関数を受け入れます。
+
+## 例
+
+### ストリームを非同期反復可能オブジェクトに変換
+
+`Promise.withResolvers()` の使用する用途は、プロミスの実行環境内にラップできないイベントリスナーによって解決または拒否されたプロミスがある場合です。次の例は、Node.js の[読み取り可能なストリーム](https://nodejs.org/api/stream.html#class-streamreadable)を[非同期反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Statements/async_function*)に変換します。ここでの各プロミスは利用できるデータの単一のバッチを表し、現在のバッチが読み込まれるたびに、次のバッチのために新しいプロミスが作成されます。イベントリスナーは一度しかアタッチされませんが、実際には毎回、`resolve` 関数と `reject` 関数の異なるバージョンを呼び出していることに注意してください。
+
+```js
+async function* readableToAsyncIterable(stream) {
+ let { promise, resolve, reject } = Promise.withResolvers();
+ stream.on("error", (error) => reject(error));
+ stream.on("end", () => resolve());
+ stream.on("readable", () => resolve());
+
+ while (stream.readable) {
+ await promise;
+ let chunk;
+ while ((chunk = stream.read())) {
+ yield chunk;
+ }
+ ({ promise, resolve, reject } = Promise.withResolvers());
+ }
+}
+```
+
+### Promise 以外のコンストラクターに対する withResolvers() の呼び出し
+
+`Promise.withResolvers()` は汎用メソッドです。これは `Promise()` コンストラクターと同じシグネチャを実装した任意のコンストラクターで呼び出すことができます。例えば、 `console.log` を `resolve` と `reject` 関数として `executor` に渡すコンストラクターに対して呼び出すことができます。
+
+```js
+class NotPromise {
+ constructor(executor) {
+ // "resolve" 関数と "reject" 関数はネイティブのプロミスと同じような
+ // 振る舞いはしませんが、Promise.withResolvers() はそれらをそのまま返します。
+ executor(
+ (value) => console.log("Resolved", value),
+ (reason) => console.log("Rejected", reason),
+ );
+ }
+}
+
+const { promise, resolve, reject } = Promise.withResolvers.call(NotPromise);
+resolve("hello");
+// Logs: Resolved hello
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`Promise.withResolvers` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#promisewithresolvers)
+- [プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises)ガイド
+- {{jsxref("Promise")}}
+- [`Promise()` コンストラクター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)
diff --git a/files/ja/web/javascript/reference/global_objects/symbol/index.md b/files/ja/web/javascript/reference/global_objects/symbol/index.md
index 2640de00bbf1d5..b222c8d3d5a843 100644
--- a/files/ja/web/javascript/reference/global_objects/symbol/index.md
+++ b/files/ja/web/javascript/reference/global_objects/symbol/index.md
@@ -3,6 +3,8 @@ title: Symbol (シンボル)
slug: Web/JavaScript/Reference/Global_Objects/Symbol
---
+{{JSRef}}
+
{{Glossary("JavaScript")}} では、シンボルは{{Glossary("Primitive", "プリミティブ値")}}です。
**Symbol** データ型を持つ値は「シンボル値」として見ることができます。 JavaScript の実行時環境では、シンボル値は {{jsxref("Symbol")}} 関数を呼び出すことで生成され、動的に無名の一意の値を生み出します。シンボルはオブジェクトプロパティとして使用されることがあります。
diff --git a/files/ja/web/javascript/reference/lexical_grammar/index.md b/files/ja/web/javascript/reference/lexical_grammar/index.md
index 2990094f25408a..2a6dd9171a2e7a 100644
--- a/files/ja/web/javascript/reference/lexical_grammar/index.md
+++ b/files/ja/web/javascript/reference/lexical_grammar/index.md
@@ -2,12 +2,12 @@
title: 字句文法
slug: Web/JavaScript/Reference/Lexical_grammar
l10n:
- sourceCommit: f979062e46775350f739d13459a178d7402d6d8a
+ sourceCommit: 41cddfdaeed4a73fb8234c332150df8e54df31e9
---
-{{JsSidebar("More")}}
+{{jsSidebar("More")}}
-このページでは、 JavaScript での字句文法を説明します。JavaScript のソーステキストは、単なる文字の列です。これをインタープリターに理解させるためには、文字列をより構造化された表現に解釈させる必要があります。構文解析の最初の手順は[字句解析](https://ja.wikipedia.org/wiki/字句解析)と呼ばれ、テキストを左から右へスキャンして、個々の原子的な入力要素の列に変換します。一部の入力要素はインタープリターにとって重要ではないので、この手順の後で取り除かれます。制御文字、行の終端文字、[ホワイトスペース](/ja/docs/Glossary/Whitespace)、コメントがそれに該当します。識別子や句読点などの他にも、更なる構文解析のために使用されます。 ECMAScript はまた、特定のキーワードとリテラルを定義し、特定の無効なトークン列を有効にするためにセミコロンを自動的に挿入する規則を持っています。
+このページでは、 JavaScript での字句文法を説明します。JavaScript のソーステキストは、単なる文字の列です。これをインタープリターに理解させるためには、文字列をより構造化された表現に解釈させる必要があります。構文解析の最初の手順は[字句解析](https://ja.wikipedia.org/wiki/字句解析)と呼ばれ、テキストを左から右へスキャンして、個々の原子的な入力要素の列に変換します。一部の入力要素、例えば[ホワイトスペース](#ホワイトスペース)や[コメント](#コメント)はインタープリターにとって重要ではないので、この手順の後で取り除かれます。それ以外の、例えば[識別子](#識別子)、[キーワード](#キーワード)、[リテラル](#リテラル)、区切り記号（主に[演算子](/ja/docs/Web/JavaScript/Reference/Operators)）は、その後の構文解析に使用します。[改行文字](#改行文字)や複数行のコメントも構文的には重要ではありませんが、不正なトークン列を有効にするために[自動セミコロン挿入](#自動セミコロン挿入)の処理のガイドとなります。
## 書式化制御文字
@@ -19,7 +19,7 @@ l10n:
| U+200D | Zero width joiner | \<ZWJ> | 特定の言語において、通常は接合されない文字を、接合した形を使用して文字を表示するために文字間に配置されます。 ([Wikipedia](https://ja.wikipedia.org/wiki/ゼロ幅接合子)) |
| U+FEFF | Byte order mark | \<BOM> | 記述の先頭において、 Unicode を使用することと、そのテキストのバイト順をマークします。 ([Wikipedia](https://ja.wikipedia.org/wiki/バイト順マーク)). |
-JavaScriptのソーステキストでは、 \<ZWNJ> と \<ZWJ> は識別子部分として扱われ、 \<BOM> （テキストの先頭にない場合はゼロ幅のノーブレークスペース \<ZWNBSP> とも呼ばれます）は空白部分として扱われます。
+JavaScriptのソーステキストでは、 \<ZWNJ> と \<ZWJ> は[識別子](#識別子)部分として扱われ、 \<BOM> （テキストの先頭にない場合はゼロ幅のノーブレークスペース \<ZWNBSP> とも呼ばれます）は[ホワイトスペース](#ホワイトスペース)として扱われます。
## ホワイトスペース
@@ -33,17 +33,19 @@ JavaScriptのソーステキストでは、 \<ZWNJ> と \<ZWJ> は識別子部
| U+0020 | 空白 | \<SP> | 通常の空白 | |
| U+00A0 | ノーブレークスペース | \<NBSP> | 通常の空白だが、改行を行ってよい位置ではない | |
| U+FEFF | ゼロ幅ノーブレークスペース | \<ZWNBSP> | When not at the start of a script, the BOM marker is a normal whitespace character. | |
-| Others | 他の Unicode の空白文字 | \<USP> | ["Space_Separator" 一般カテゴリーの文字][space separator set] | |
+| その他 | 他の Unicode の空白文字 | \<USP> | ["Space_Separator" 一般カテゴリーの文字][space separator set] | |
[space separator set]: https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BGeneral_Category%3DSpace_Separator%7D
> **メモ:** ["White_Space" プロパティがあるが "Space_Separator" 一般カテゴリーにない文字](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BWhite_Space%7D%26%5CP%7BGeneral_Category%3DSpace_Separator%7D)のうち、 U+0009, U+000B, U+000C は JavaScript でもホワイトスペースとして扱われ、 U+0085 NEXT LINE は特別な役割を持たず、他にも[改行文字](#改行文字)の集合となるものがあります。
-> **メモ:** JavaScript エンジンで使用される Unicode 規格が変更されると、プログラムの動作に影響を与える可能性があります。例えば、 ES2016 では参照する Unicode 規格が 5.1 から 8.0.0 にアップグレードされ、その影響で U+180E MONGOLIAN VOWEL SEPARATOR が "Space_Separator" カテゴリから「書式化（Cf）」カテゴリに移動し、空白でなくなっています。その結果、" \u180E".trim().length の結果が 0 から 1 に変更されました。
+> **メモ:** JavaScript エンジンで使用される Unicode 規格が変更されると、プログラムの動作に影響を与える可能性があります。例えば、 ES2016 では参照する Unicode 規格が 5.1 から 8.0.0 にアップグレードされ、その影響で U+180E MONGOLIAN VOWEL SEPARATOR が "Space_Separator" カテゴリーから「書式化（Cf）」カテゴリーに移動し、空白でなくなっています。その結果、" \u180E".trim().length の結果が 0 から 1 に変更されました。
## 改行文字
-[ホワイトスペース](/ja/docs/Glossary/Whitespace)文字に加えて、改行文字もソースのテキストの読みやすさを改善するために使用されます。しかし、改行文字は JavaScript の実行に影響を与える場合があり、禁止されている場所もいくらかあります。改行文字は[自動セミコロン挿入](#自動セミコロン挿入)の処理にも影響を与えます。改行文字は[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)の `\s` クラスに一致します。
+[ホワイトスペース](#ホワイトスペース)文字に加えて、改行文字もソースのテキストの読みやすさを改善するために使用されます。しかし、改行文字は JavaScript の実行に影響を与える場合があり、禁止されている場所もいくらかあります。改行文字は[自動セミコロン挿入](#自動セミコロン挿入)の処理にも影響を与えます。
+
+字句文法のコンテキスト以外では、ホワイトスペースと改行文字はしばしば同一視されます。例えば、{{jsxref("String.prototype.trim()")}} は文字列の最初と最後からすべてのホワイトスペースと改行文字を除去します。正規表現における `\s` [文字クラスエスケープ](/ja/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes)は、すべてのホワイトスペースと改行文字に一致します。
以下の Unicode コードポイントのみが ECMAScript では改行文字として扱われ、他の改行文字はホワイトスペースとして扱われます (例えば、次の行、 NEL、 U+0085 はホワイトスペースと見なされます)。
@@ -110,13 +112,15 @@ comment("world");
```js
function comment() {
- /* console.log('Hello world!'); */
+ /* console.log("Hello world!"); */
}
comment();
```
この場合、 `console.log()` の呼び出しはコメント内部にあるので、実行されることはありません。何行分のコードであっても、このようにして無効にすることができます。
+少なくとも 1 つの[改行文字](#改行文字)を含むブロックコメントは、[自動セミコロン挿入](#自動セミコロン挿入)において改行文字のように動作します。
+
### ハッシュバンコメント
特別な 3 つ目のコメント構文として**ハッシュバンコメント**があります。ハッシュバンコメントは、 `#!` で始まることと、**スクリプトやモジュールの絶対的な開始位置でのみ有効であること**を除いて、単一の行のみ (`//`) のコメントと全く同じように動作します。なお、 `#!` の前にはいかなる種類の空白も許されないことにも注意してください。コメントは `#!` 以降の最初の行の終わりまでのすべての文字で構成され、このようなコメントは 1 つだけ許可されます。
@@ -131,7 +135,7 @@ console.log("Hello world");
JavaScript インタープリターはこれを通常のコメントとして扱います。スクリプトが直接シェルで実行された場合のみ、シェルに対して意味を持ちます。
-> **警告:** スクリプトをシェル環境で直接実行できるようにしたい場合は、 [BOM](https://ja.wikipedia.org/wiki/バイト順マーク) のない UTF-8 でエンコードしてください。ハッシュバンコメントの前に BOM があってもブラウザーでは動作しますが、ハッシュバンのあるスクリプトで BOM を使用することは推奨されていません。 BOM は Unix/Linux のシェル環境でスクリプトを実行しようとすると動作しません。したがって、シェル環境から直接スクリプトを実行したい場合は BOM のない UTF-8 を使用してください。
+> **警告:** スクリプトをシェル環境で直接実行できるようにしたい場合は、 [BOM](https://ja.wikipedia.org/wiki/バイト順マーク) のない UTF-8 でエンコードしてください。ブラウザーで実行するコードでは BOM は何の問題も起こしませんが - UTF-8 デコードの際、ソーステキストが解析される前に取り除かれるからです - Unix/Linux のシェルでは、BOM 文字が前にあるとハッシュバンを認識しません。
`#!` の形のコメントは JavaScript インタープリターを指定するためにだけ使用してください。他の用途ではすべて `//` のコメント（または複数行コメント）を使用してください。
@@ -143,14 +147,14 @@ _識別子_ は、値と名前をリンクさせるために使用されます
const decl = 1; // 変数宣言（`let` または `var` も可）
function fn() {} // 関数宣言
const obj = { key: "value" }; // オブジェクトキー
+// クラス宣言
class C {
- // クラス宣言
#priv = "value"; // プライベートプロパティ
}
lbl: console.log(1); // ラベル
```
-JavaScript では、識別子は一般的に英数字、アンダースコア (`_`)、ドル記号 (`$`) で構成されます。識別子は数字で始めることはできません。しかし、JavaScript で使用できる識別子は ASCII だけではなく、ほとんどの Unicode コードポイントも使用可能です。
+JavaScript では、識別子は一般的に英数字、アンダースコア (`_`)、ドル記号 (`$`) で構成されます。識別子は数字で始めることはできません。しかし、JavaScript で使用できる識別子は {{Glossary("ASCII")}} だけではなく、ほとんどの Unicode コードポイントも使用可能です。つまり、識別子は [ID_Start](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Start%7D) カテゴリーにある文字で始めることができ、[ID_Continue](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Continue%7D) カテゴリーにある文字は先頭文字の後に置くことができます。
> **メモ:** もし何らかの理由で JavaScript のソースを自分で解析する必要がある場合、すべての識別子が `/[A-Za-z_$][\w$]*/` のパターンに従っている（つまり ASCII のみ）と仮定しないでください。 識別子の範囲は正規表現 `/[$_p{ID_Start}][$u200cu200dp{ID_Continue}]*/u` (Unicodeエスケープシーケンスを除く) で記述することができます。
@@ -163,7 +167,7 @@ console.log(\u4f60\u597d); // Hello
すべての場所で、すべての範囲の識別子が受け入れられるわけではありません。関数宣言、関数式、変数宣言などの特定の構文では、[予約語](#予約語)でない識別子名を使用する必要があります。
-```js example-bad
+```js-nolint example-bad
function import() {} // 違反: import は予約語です。
```
@@ -184,7 +188,7 @@ _キーワード_ は識別子のように見えますが、 JavaScript で特
識別子は常に _文字列値_ で比較されるため、エスケープシーケンスは解釈されます。例えば、このような場合も構文エラーとなります。
-```js example-bad
+```js-nolint example-bad
const els\u{65} = 1;
// `els\u{65}` encodes the same identifier as `else`
```
@@ -206,7 +210,7 @@ const els\u{65} = 1;
- {{jsxref("Statements/if...else", "else")}}
- {{jsxref("Statements/export", "export")}}
- [`extends`](/ja/docs/Web/JavaScript/Reference/Classes/extends)
-- `false`
+- [`false`](#論理値リテラル)
- {{jsxref("Statements/try...catch", "finally")}}
- {{jsxref("Statements/for", "for")}}
- {{jsxref("Statements/function", "function")}}
@@ -221,7 +225,7 @@ const els\u{65} = 1;
- {{jsxref("Statements/switch", "switch")}}
- {{jsxref("Operators/this", "this")}}
- {{jsxref("Statements/throw", "throw")}}
-- `true`
+- [`true`](#論理値リテラル)
- {{jsxref("Statements/try...catch", "try")}}
- {{jsxref("Operators/typeof", "typeof")}}
- {{jsxref("Statements/var", "var")}}
@@ -256,7 +260,7 @@ const els\u{65} = 1;
- `protected`
- `public`
-#### 旧仕様にあった今後の予約キーワード
+#### 旧仕様書にあった今後の予約キーワード
以前の ECMAScript の仕様書 (ECMAScript 1 から 3 まで) では、以下のものが将来のキーワードとして予約されています。
@@ -292,21 +296,23 @@ const els\u{65} = 1;
## リテラル
+> **メモ:** この節では、不可分なトークンであるリテラルについて説明します。[オブジェクトリテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)や[配列リテラル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Array#配列リテラル記法)は、一連のトークンで構成される[式](/ja/docs/Web/JavaScript/Reference/Operators)です。
+
### Null リテラル
-詳細については [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) をご覧ください。
+詳細については [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) を参照してください。
-```js
-null;
+```js-nolint
+null
```
### 論理値リテラル
-詳細については[論理型](/ja/docs/Web/JavaScript/Data_structures#論理型)をご覧ください。
+詳細については[論理型](/ja/docs/Web/JavaScript/Data_structures#論理型)を参照してください。
-```js
-true;
-false;
+```js-nolint
+true
+false
```
### 数値リテラル
@@ -315,76 +321,76 @@ false;
#### 10 進数
-```js
-1234567890;
-42;
-
-// 先頭にゼロがあるものを使用する場合は注意してください
-0888; // 888 は 10 進数として解釈されます
-0777; // 8 進数として解釈され、 10 進数では 511 です。
+```js-nolint
+1234567890
+42
```
-なお、 10 進数リテラルはゼロ (`0`) から始め、他の 10 進数の数字を続けることができますが、 `0` に続く数字がすべて 8 より小さい場合は、その数値が 8 進数として解釈されることに注意してください。さらに、接頭辞 `0` を持つ数値リテラルは、 8 進数として解釈しても 10 進数として解釈しても、厳格モードでは構文エラーが発生します。ですから、代わりに `0o` 接頭辞を使用してください。
+10 進数リテラルをゼロ (`0`) から始め、他の 10 進数の数字を続けることができますが、 `0` に続く数字がすべて 8 より小さい場合は、その数値が 8 進数として解釈されることに注意してください。さらに、接頭辞 `0` を持つ数値リテラルは、 8 進数と 10 進数のどちらで解釈しても、[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode#古い_8_進数リテラル)では構文エラーが発生します。ですから、代わりに `0o` 接頭辞を使用してください。
+
+```js-nolint example-bad
+0888 // 888 は 10 進数として解釈されます
+0777 // 8 進数として解釈され、 10 進数では 511 です。
+```
##### 指数
10 進数の指数リテラルは、 `beN` の書式で指定します。ここで `b` は基数（整数または浮動小数点）、その後に `e` 文字（セパレーターまたは指数記号として機能）、そして `N` は*指数*または*べき乗数* - 符号付き整数です（2019 ECMA-262 仕様に従います）。
-```js
-0e-5; // 0
-0e5; // 0
-5e1; // 50
-175e-2; // 1.75
-1e3; // 1000
-1e-3; // 0.001
-1e3; // 1000
+```js-nolint
+0e-5 // 0
+0e+5 // 0
+5e1 // 50
+175e-2 // 1.75
+1e3 // 1000
+1e-3 // 0.001
+1E3 // 1000
```
#### 2 進数
-2進数の構文は、先頭のゼロに続いて小文字または大文字のラテン文字 "B" を使用します (`0b` または `0B`)。 `0b` の後の数字が 0 または 1 でない場合は、 {{jsxref("SyntaxError")}} が "Missing binary digits after 0b" の内容で発生します。
+2 進数の構文は、先頭のゼロに続いて小文字または大文字のラテン文字 "B" を使用します (`0b` または `0B`)。`0o` の後に 0 または 1 以外の文字があると、一連のリテラルは終了します。
-```js
-const FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648
-const FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
-const FLT_MANTISSA = 0b00000000011111111111111111111111; // 8388607
+```js-nolint
+0b10000000000000000000000000000000 // 2147483648
+0b01111111100000000000000000000000 // 2139095040
+0B00000000011111111111111111111111 // 8388607
```
#### 8 進数
-8進数の構文は、先頭のゼロに続いて小文字または大文字のラテン文字 "O" を使用します (`0o` または `0O`)。 `0o` の後の数字が範囲 (01234567) 外の場合、 {{jsxref("SyntaxError")}} が "Missing octal digits after 0o" の内容で発生します。
+8 進数の構文は、先頭のゼロに続いて小文字または大文字のラテン文字 "O" を使用します (`0o` または `0O`)。`0o` の後に範囲 (01234567) から外れた文字があると、一連のリテラルは終了します。
-```js
-const n = 0o755; // 493
-const m = 0o644; // 420
+```js-nolint
+0O755 // 493
+0o644 // 420
```
#### 16 進数
-16 進数の構文は、先頭のゼロに続いて小文字または大文字のラテン文字 "X" を使用します (`0x` または `0X`)。 0x の後の数字が範囲 (0123456789ABCDEF) 外の場合、 {{jsxref("SyntaxError")}} が "Identifier starts immediately after numeric literal" の内容で発生します。
+16 進数の構文は、先頭のゼロに続いて小文字または大文字のラテン文字 "X" を使用します (`0x` または `0X`)。`0x` の後に範囲 (0123456789ABCDEF) から外れた文字があると、一連のリテラルは終了します。
-```js
-0xfffffffffffffffff; // 295147905179352830000
-0x123456789abcdef; // 81985529216486900
-0xa; // 10
+```js-nolint
+0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF // 81985529216486900
+0XA // 10
```
#### 長整数リテラル
[長整数型](/ja/docs/Web/JavaScript/Data_structures#長整数型) (BigInt) は JavaScript の数値プリミティブであり、自由な精度の整数を表すことができます。長整数リテラルは、整数の末尾に `n` を追加することで作成されます。
-```js
-123456789123456789n; // 123456789123456789
-0o777777777777n; // 68719476735
-0x123456789abcdefn; // 81985529216486895
-0b11101001010101010101n; // 955733
+```js-nolint
+123456789123456789n // 123456789123456789
+0o777777777777n // 68719476735
+0x123456789ABCDEFn // 81985529216486895
+0b11101001010101010101n // 955733
```
-なお、先頭がゼロだけの 8 進数は `BigInt` では動作しません。
+長整数リテラルは、古い 8 進数と混同しないよう、`0` 出始めることはできません。
-```js example-bad
-0755n
-// SyntaxError: invalid BigInt syntax
+```js-nolint example-bad
+0755n; // SyntaxError: invalid BigInt syntax
```
8 進数の `BigInt` 数値では、常にゼロの後に "o" (大文字でも小文字でも) を付けて使用してください。
@@ -393,33 +399,24 @@ const m = 0o644; // 420
0o755n;
```
-`BigInt` についての詳細な情報は、 [JavaScript のデータ構造](/ja/docs/Web/JavaScript/Data_structures#長整数型)をご覧ください。
+`BigInt` についての詳細な情報は、 [JavaScript のデータ構造](/ja/docs/Web/JavaScript/Data_structures#長整数型)を参照してください。
#### 数値の区切り文字
数値リテラルの可読性を高めるために、アンダースコア (`_`, `U+005F`) を区切り文字として使用することができます。
-```js
-// 10 進数の区切り文字
-1_000_000_000_000;
-1_050.95;
-
-// 2 進数の区切り文字
-0b1010_0001_1000_0101;
-
-// 8 進数の区切り文字
-0o2_2_5_6;
-
-// 16 進数の区切り文字
-0xa0_b0_c0;
-
-// BigInt の区切り文字
-1_000_000_000_000_000_000_000n;
+```js-nolint
+1_000_000_000_000
+1_050.95
+0b1010_0001_1000_0101
+0o2_2_5_6
+0xA0_B0_C0
+1_000_000_000_000_000_000_000n
```
なお、以下の制限があります。
-```js example-bad
+```js-nolint example-bad
// 連続して 2 つ以上のアンダースコアは許可されていません
100__000; // SyntaxError
@@ -430,46 +427,64 @@ const m = 0o644; // 420
0_1; // SyntaxError
```
-### オブジェクトリテラル
+### 文字列リテラル
-詳細については、 {{jsxref("Object")}} と[オブジェクト初期化子](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)をご覧ください。
+[文字列](/ja/docs/Web/JavaScript/Data_structures#文字列型)リテラルは、単一引用符または二重引用符に囲まれた 0 個以上の Unicode コードポイントです。 Unicode コードポイントはエスケープシーケンスで表すこともできます。以下の引用符を閉じるコードポイントを除いて、すべてのコードポイントが文字列リテラルに現れることができます。
-```js
-const o = { a: "foo", b: "bar", c: 42 };
+- U+005C \ (バックスラッシュ)
+- U+000D \<CR>
+- U+000A \<LF>
+- 文字列リテラルを始めたものと同じ引用符
-// 短縮記法
-const a = "foo",
- b = "bar",
- c = 42;
-const o = { a, b, c };
+すべてのコードポイントが、エスケープシーケンスの形で現れることができます。文字列リテラルは ECMAScript の文字列値として評価されます。これらの文字列の値を生成する際に、 Unicode コードポイントは UTF-16 エンコードされます。
-// 以前の表記
-const o = { a: a, b: b, c: c };
+```js-nolint
+'foo'
+"bar"
```
-### 配列リテラル
+次の項では、文字列リテラルで利用できるさまざまなエスケープシーケンス（`\` の後に 1 つ以上の文字が続くもの）を記述します。以下の一覧に掲載されていないエスケープシーケンスは「等価エスケープ」となり、コードポイントそのものになります。例えば、`\z` は `z` と同じです。非推奨の 8 指数エスケープシーケンス構文があり、[非推奨の機能、廃止された機能](/ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#エスケープシーケンス)ページに記述されています。これらのエスケープシーケンスの多くは正規表現でも有効です。[文字エスケープ](/ja/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape)を参照してください。
-詳細については {{jsxref("Array")}} をご覧ください。
+#### エスケープシーケンス
-```js
-[1954, 1974, 1990, 2014];
-```
+特殊文字はエスケープシーケンスを使用してエンコードすることができます。
-### 文字列リテラル
+| エスケープシーケンス | Unicode コードポイント |
+| --------------------------------- | ----------------------------------------------- |
+| `\0` | ヌル文字 (U+0000 NULL) |
+| `\'` | 単一引用符 (U+0027 APOSTROPHE) |
+| `\"` | 二重引用符 (U+0022 QUOTATION MARK) |
+| `\\` | バックスラッシュ (U+005C REVERSE SOLIDUS) |
+| `\n` | 改行 (U+000A LINE FEED; LF) |
+| `\r` | キャリッジリターン (U+000D CARRIAGE RETURN; CR) |
+| `\v` | 垂直タブ (U+000B LINE TABULATION) |
+| `\t` | タブ (U+0009 CHARACTER TABULATION) |
+| `\b` | バックスペース (U+0008 BACKSPACE) |
+| `\f` | ページ送り (U+000C FORM FEED) |
+| `\` の直後に[改行文字](#改行文字) | 空文字列 |
-[文字列](/ja/docs/Web/JavaScript/Data_structures#文字列型)リテラルは、単一引用符または二重引用符に囲まれた零個以上の Unicode コードポイントです。 Unicode コードポイントはエスケープシーケンスで表すこともできます。以下の引用符を閉じるコードポイントを除いて、すべてのコードポイントが文字列リテラルに現れることができます。
+最後のエスケープシーケンス、`\` に改行が続くものは、文字列リテラルをその意味を変えずに複数行に分割するのに有益なものです。
-- U+005C \ (バックスラッシュ)
-- U+000D \<CR>,
-- and U+000A \<LF>.
+```js
+const longString =
+ "This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.";
+```
-すべてのコードポイントが、エスケープシーケンスの形で現れることができます。文字列リテラルは ECMAScript の文字列値として評価されます。これらの文字列の値を生成する際に、 Unicode コードポイントは UTF-16 エンコードされます。
+バックスラッシュの後に空白文字や他の文字（改行を除く）がないことを確認してください、そうでなければ動作しません。次の行がインデントされている場合、余分な空間が文字列の値にも存在します。
-```js-nolint
-'foo';
-"bar";
+また、[`+`](/ja/docs/Web/JavaScript/Reference/Operators/Addition) 演算子を使用して、次のように複数の文字列を連結することもできます。
+
+```js
+const longString =
+ "This is a very long string which needs " +
+ "to wrap across multiple lines because " +
+ "otherwise my code is unreadable.";
```
+上記の方法はどちらも同じ文字列になります。
+
#### 16 進エスケープシーケンス
16 進エスケープシーケンスは `\x` に続いてちょうど 2 桁の 16 進数から成り、 0x0000 から 0x00FF までのコード単位またはコードポイントを表します。
@@ -482,7 +497,7 @@ const o = { a: a, b: b, c: c };
Unicode エスケープシーケンスは `\u` に続いてちょうど 4 桁の 16 進数から成ります。これで UTF-16 エンコーディングのコード単位を表します。コードポイント U+0000 から U+FFFF までは、コード単位とコードポイントは等しくなります。コードポイント U+10000 から U+10FFFF までは、 2 つのエスケープシーケンスで 2 つのコード単位 (サロゲートペア) を表す必要があります。サロゲートペアはコードポイントで区別されます。
-See also {{jsxref("String.fromCharCode()")}} and {{jsxref("String.prototype.charCodeAt()")}}.
+{{jsxref("String.fromCharCode()")}} および {{jsxref("String.prototype.charCodeAt()")}} も参照してください。
```js
"\u00A9"; // "©" (U+A9)
@@ -492,7 +507,7 @@ See also {{jsxref("String.fromCharCode()")}} and {{jsxref("String.prototype.char
Unicode コードポイントエスケープは `\u{` に続いて 16 進数のコードポイントが続き、 `}` が続きます。 16 進数の値は 0 から 0x10FFFF までの範囲に含まれている必要があります。 U+10000 から U+10FFFF までの範囲のコードポイントを、サロゲートペアとして表す必要はありません。
-{{jsxref("String.fromCodePoint()")}} または {{jsxref("String.prototype.codePointAt()")}} もご覧ください。
+{{jsxref("String.fromCodePoint()")}} または {{jsxref("String.prototype.codePointAt()")}} も参照してください。
```js
"\u{2F804}"; // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
@@ -503,46 +518,51 @@ Unicode コードポイントエスケープは `\u{` に続いて 16 進数の
### 正規表現リテラル
-詳細については {{jsxref("RegExp")}} を参照してください。
+正規表現リテラルは2つのスラッシュ (`/`) で囲まれます。字句解析器は、スラッシュが文字クラス (`[]`) 内に現れない限り、エスケープされていない次のスラッシュまたは行の終わりまでのすべての文字を処理します。一部の文字（すなわち、[識別子の一部](#識別子)）は、閉じスラッシュの後に現れることがあり、これはフラグを表します。
-```js
-/ab+c/g;
+字句文法はとても甘く、1 つのトークンとして取得される正規表現リテラルがすべて有効な正規表現とは限りません。
-// 「空の」正規表現リテラル
-// 単一行コメントと区別するために、空のキャプチャしない
-// グループが必要です。
-/(?:)/;
+詳細については {{jsxref("RegExp")}} を参照してください。
+
+```js-nolint
+/ab+c/g
+/[/]/
```
+正規表現リテラルは 2 つのスラッシュ (`//`) で始めることはできません。空の正規表現を指定するには `/(?:)/` を使用してください。
+
### テンプレートリテラル
-詳細について、[テンプレート文字列](/ja/docs/Web/JavaScript/Reference/Template_literals)をご覧ください。
+一つのテンプレートリテラルは、複数のトークンから成ります。`` `xxx${``（テンプレートの先頭）、`}xxx${`（テンプレートの中間）、``}xxx` ``（テンプレートの末尾）は個別のトークンであり、これらの間にはどのような式が入ってもかまいません。
-```js
-`string text`;
+詳細について、[テンプレートリテラル](/ja/docs/Web/JavaScript/Reference/Template_literals)を参照してください。
+
+```js-nolint
+`string text`
`string text line 1
- string text line 2`;
+ string text line 2`
-`string text ${expression} string text`;
+`string text ${expression} string text`
-tag`string text ${expression} string text`;
+tag`string text ${expression} string text`
```
## 自動セミコロン挿入
-一部の [JavaScript 文](/ja/docs/Web/JavaScript/Reference/Statements)はセミコロンで終わる必要があります。したがって、自動セミコロン挿入 (ASI) の影響を受けます。
+一部の [JavaScript 文](/ja/docs/Web/JavaScript/Reference/Statements)は、末尾にセミコロン (`;`) が必要です。これには次のようなものがあります。
-- `let`, `const`, 変数定義
-- `import`, `export`, モジュール宣言
-- 式の文
-- `debugger`
-- `continue`, `break`, `throw`
-- `return`
+- [`var`](/ja/docs/Web/JavaScript/Reference/Statements/var), [`let`](/ja/docs/Web/JavaScript/Reference/Statements/let), [`const`](/ja/docs/Web/JavaScript/Reference/Statements/const)
+- [式文](/ja/docs/Web/JavaScript/Reference/Statements/Expression_statement)
+- [`do...while`](/ja/docs/Web/JavaScript/Reference/Statements/do...while)
+- [`continue`](/ja/docs/Web/JavaScript/Reference/Statements/continue), [`break`](/ja/docs/Web/JavaScript/Reference/Statements/break), [`return`](/ja/docs/Web/JavaScript/Reference/Statements/return), [`throw`](/ja/docs/Web/JavaScript/Reference/Statements/throw)
+- [`debugger`](/ja/docs/Web/JavaScript/Reference/Statements/debugger)
+- クラスフィールド宣言（[パブリック](/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields)または[プライベート](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)）
+- [`import`](/ja/docs/Web/JavaScript/Reference/Statements/import), [`export`](/ja/docs/Web/JavaScript/Reference/Statements/export)
-セミコロンが自動的に挿入されるケースは 3 つあります。
+しかし、JavaScriptはこの言語をより手軽で便利なものにするために、トークンストリームを処理する際にセミコロンを自動的に挿入することがあり、不正なトークン列を有効な構文に「修正」することができます。この手順は、プログラムテキストが字句文法に従ってトークンに解釈された後に行われます。セミコロンが自動的に挿入されるケースは 3 つあります。
-1\. 文法上許されないトークンに出会ったとき、それが前のトークンから少なくとも 1 つの[改行文字](#改行文字)で区切られているか、そのトークンが "}" であれば、その前にセミコロンが挿入されます。
+1\. 文法上許されないトークンに出会ったとき、それが前のトークンから少なくとも 1 つの[改行文字](#改行文字)（1 つ以上の改行を含むブロックコメントを含む）で区切られているか、そのトークンが "}" であれば、その前にセミコロンが挿入されます。
```js-nolint
{ 1
@@ -559,17 +579,34 @@ tag`string text ${expression} string text`;
[`do...while`](/ja/docs/Web/JavaScript/Reference/Statements/do...while) の末尾の ")" は、このルールでも特別なケースとして扱われます。
-```js
+```js-nolint
do {
// ...
-} while (condition); /* ; */ // ここで ASI
-const a = 1;
+} while (condition) /* ; */ // ASI が行われる
+const a = 1
+```
+
+しかし、セミコロンが [`for`](/ja/docs/Web/JavaScript/Reference/Statements/for) 文の頭の区切り文字になる場合は、セミコロンは挿入されません。
+
+```js-nolint example-bad
+for (
+ let a = 1 // ASI は行われない
+ a < 10 // ASI は行われない
+ a++
+) {}
+```
+
+また、セミコロンが[空文](/ja/docs/Web/JavaScript/Reference/Statements/Empty)として挿入されることもありません。例えば、下記のコードで ")" の後にセミコロンが挿入された場合、空の文がif文の本体となり、`const` 宣言が別個の文となるため、このコードは有効になります。しかし、自動的に挿入されたセミコロンは空文にはならないため、[宣言](/ja/docs/Web/JavaScript/Reference/Statements#文と宣言の違いについて)が `if` 文の本体となってしまい、無効になります。
+
+```js-nolint example-bad
+if (Math.random() > 0.5)
+const x = 1 // SyntaxError: Unexpected token 'const'
```
2\. トークンの入力ストリームの末尾が検出され、パーサーが単一の入力ストリームを完全なプログラムとして解釈できない場合、末尾にセミコロンが挿入されます。
-```js
-const a = 1; /* ; */ // ASI here
+```js-nolint
+const a = 1 /* ; */ // ASI が行われる
```
このルールは前回のルールを補完するもので、特に「問題のあるトークン」がなく、入力ストリームが終わっている場合を想定しています。
@@ -623,16 +660,16 @@ const b = 1
`()` は関数呼び出しと見なせるので、通常は ASI が発生しないでしょう。同様に、 `[]` はメンバーアクセスである可能性があります。上のコードは次のものと同等です。
```js-nolint example-bad
-const a = 1(1).toString()
+const a = 1(1).toString();
-const b = 1[1, 2, 3].forEach(console.log)
+const b = 1[1, 2, 3].forEach(console.log);
```
-そのため、コードを実行すると "1 is not a function" や "Cannot read properties of undefined (reading 'forEach')" などのエラーが発生することになります。
+これは有効な構文になります。`1[1,2,3]` は[カンマ](/ja/docs/Web/JavaScript/Reference/Operators/Comma_operator)で結合された式の[プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors)です。そのため、コードを実行すると "1 is not a function" や "Cannot read properties of undefined (reading 'forEach')" などのエラーが発生することになります。
クラス内では、クラスフィールドやジェネレーターメソッドも落とし穴になることがあります。
-```js example-bad
+```js-nolint example-bad
class A {
a = 1
*gen() {}
@@ -641,7 +678,7 @@ class A {
これは次のようになります。
-```js example-bad
+```js-nolint example-bad
class A {
a = 1 * gen() {}
}
@@ -649,15 +686,141 @@ class A {
したがって、 `{` のあたりで構文エラーになります。
-セミコロンなしのスタイルを強制したい場合、 ASI を扱う上で以下のような経験則があります。
-
-- 後置 `++` および `--` は、オペランドと同じ行に書く。
-- `return`、`throw`、`yield` の後の式はキーワードと同じ行に置く。
-- 同様に、 `break` または `continue` の後のラベルはキーワードと同じ行に置く。
-- アロー関数の `=>` は引数の末尾と同じ行に置く。
-- 非同期関数やメソッドの `async` の直後で改行しない。
-- 行が `(`, `[`, `` ` ``, `+`, `-`, `/` (正規表現リテラル) で始まる場合は、直前にセミコロンを置くか、前の行の行末にセミコロンをつける。
-- クラスのフィールドは、できれば常にセミコロンで終わるようにします。一つ前のルール（フィールド宣言の後に[計算されたプロパティ](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names)が続くと、その後は `[` で始まる）に加えて、セミコロンはフィールド宣言とジェネレーターメソッドの間にも必要です。
+セミコロンなしのスタイルを強制したい場合、ASI を扱うには以下の経験則があります。
+
+- 後置型 `++` および `--` はオペランドと同じ行に置きましょう。
+
+ ```js-nolint example-bad
+ const a = b
+ ++
+ console.log(a) // ReferenceError: Invalid left-hand side expression in prefix operation
+ ```
+
+ ```js-nolint example-good
+ const a = b++
+ console.log(a)
+ ```
+
+- `return`, `throw`, `yield` の後の式は、キーワードと同じ行に置きましょう。
+
+ ```js-nolint example-bad
+ function foo() {
+ return
+ 1 + 1 // Returns undefined; 1 + 1 is ignored
+ }
+ ```
+
+ ```js-nolint example-good
+ function foo() {
+ return 1 + 1
+ }
+
+ function foo() {
+ return (
+ 1 + 1
+ )
+ }
+ ```
+
+- 同様に、`break` や `continue` の後のラベル識別子は、キーワードと同じ行に置きましょう。
+
+ ```js-nolint example-bad
+ outerBlock: {
+ innerBlock: {
+ break
+ outerBlock // SyntaxError: Illegal break statement
+ }
+ }
+ ```
+
+ ```js-nolint example-good
+ outerBlock: {
+ innerBlock: {
+ break outerBlock
+ }
+ }
+ ```
+
+- アロー関数の `=>` は引数と同じ行に置きましょう。
+
+ ```js-nolint example-bad
+ const foo = (a, b)
+ => a + b
+ ```
+
+ ```js-nolint example-good
+ const foo = (a, b) =>
+ a + b
+ ```
+
+- 非同期関数やメソッドなどの `async` の直後に改行を置くことはできません。
+
+ ```js-nolint example-bad
+ async
+ function foo() {}
+ ```
+
+ ```js-nolint example-good
+ async function
+ foo() {}
+ ```
+
+- `(`, `[`, `` ` ``, `+`, `-`, `/`（正規表現リテラルとして）のいずれかで始まる行は、その前にセミコロンを置くか、前の行をセミコロンで終わらせるかしましょう。
+
+ ```js-nolint example-bad
+ // この () は前の行と結合して関数呼び出しとなる可能性がある
+ (() => {
+ // ...
+ })()
+
+ // この [ は前の行と結合してプロパティアクセスとなる可能性がある
+ [1, 2, 3].forEach(console.log)
+
+ // この ` は前の行と結合してタグ付きテンプレートリテラルとなる可能性がある
+ `string text ${data}`.match(pattern).forEach(console.log)
+
+ // この + は前の行と結合して二項 + 式となる可能性がある
+ +a.toString()
+
+ // この - は前の行と結合して二項 - 式となる可能性がある
+ -a.toString()
+
+ // この / は前の行と結合して除算式となる可能性がある
+ /pattern/.exec(str).forEach(console.log)
+ ```
+
+ ```js-nolint example-good
+ ;(() => {
+ // ...
+ })()
+ ;[1, 2, 3].forEach(console.log)
+ ;`string text ${data}`.match(pattern).forEach(console.log)
+ ;+a.toString()
+ ;-a.toString()
+ ;/pattern/.exec(str).forEach(console.log)
+ ```
+
+- クラスのフィールドは、できれば常にセミコロンで終わるようにしましょう。一つ前のルール（フィールド宣言の後に[計算されたプロパティ](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names)が続くと、その後は `[` で始まる）に加えて、セミコロンはフィールド宣言とジェネレーターメソッドの間にも必要です。
+
+ ```js-nolint example-bad
+ class A {
+ a = 1
+ [b] = 2
+ *gen() {} // Seen as a = 1[b] = 2 * gen() {}
+ }
+ ```
+
+ ```js-nolint example-good
+ class A {
+ a = 1;
+ [b] = 2;
+ *gen() {}
+ }
+ ```
+
+## 仕様書
+
+{{Specifications}}
## ブラウザーの互換性
@@ -665,10 +828,6 @@ class A {
## 関連情報
-- [Lexical grammar in the ECMAScript specification](https://tc39.es/ecma262/#sec-ecmascript-language-lexical-grammar)
-- [Jeff Walden: Binary and octal numbers](https://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/)
-- [Mathias Bynens: JavaScript character escape sequences](https://mathiasbynens.be/notes/javascript-escapes)
-- [論理型](/ja/docs/Web/JavaScript/Data_structures#論理型)
-- [数値型](/ja/docs/Web/JavaScript/Data_structures#数値型)
-- [文字列型](/ja/docs/Web/JavaScript/Data_structures#文字列型)
-- {{jsxref("RegExp")}}
+- [文法とデータ型](/ja/docs/Web/JavaScript/Guide/Grammar_and_types)ガイド
+- [Micro-feature from ES6, now in Firefox Aurora and Nightly: binary and octal numbers](https://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/) by Jeff Walden (2013)
+- [JavaScript character escape sequences](https://mathiasbynens.be/notes/javascript-escapes) by Mathias Bynens (2011)
diff --git a/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md b/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md
index 93e20894416458..78c95891faeae0 100644
--- a/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md
+++ b/files/ja/web/javascript/reference/regular_expressions/quantifier/index.md
@@ -38,7 +38,7 @@ atom{min,max}?
- `min`
- : 非負の整数です。アトムが繰り返すことができる最小回数です。
- `max` {{optional_inline}}
- - : 非負の整数です。アトムが繰り返すことができる最大回数です。小りゃうした場合、アトムは必要なだけ繰り返されます。
+ - : 非負の整数です。アトムが繰り返すことができる最大回数です。省略した場合、アトムは必要なだけ繰り返されます。
## 解説
diff --git a/files/ja/web/javascript/reference/statements/while/index.md b/files/ja/web/javascript/reference/statements/while/index.md
index 02d26f85e3e7ae..15011ff53ca948 100644
--- a/files/ja/web/javascript/reference/statements/while/index.md
+++ b/files/ja/web/javascript/reference/statements/while/index.md
@@ -78,7 +78,7 @@ while (currentNode = iterator.nextNode()) {
…そして、文書中にコメントノードがなくなったとき、次のようになります。
-1. `iterator.nextNode()` は [`null``](/ja/docs/Web/JavaScript/Reference/Operators/null) を返す。
+1. `iterator.nextNode()` は [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) を返す。
2. 従って `currentNode = iterator.nextNode()` も `null` になり、これは[偽値](/ja/docs/Glossary/Falsy)である。
3. そのため、ループを終了する。
diff --git a/files/ja/web/mathml/examples/deriving_the_quadratic_formula/index.md b/files/ja/web/mathml/examples/deriving_the_quadratic_formula/index.md
index 6b4f0c7a314705..29ec543ee9784c 100644
--- a/files/ja/web/mathml/examples/deriving_the_quadratic_formula/index.md
+++ b/files/ja/web/mathml/examples/deriving_the_quadratic_formula/index.md
@@ -3,6 +3,8 @@ title: "MathML: 二次方程式の解の公式を導く"
slug: Web/MathML/Examples/Deriving_the_Quadratic_Formula
---
+{{MathMLRef}}
+
このページでは、二次方程式の解の公式の導出について概説します。
二次方程式の一般形をとり、 x について解きます。
diff --git a/files/ja/web/mathml/examples/index.md b/files/ja/web/mathml/examples/index.md
index 4ba62141005265..8478f5d1c76fc6 100644
--- a/files/ja/web/mathml/examples/index.md
+++ b/files/ja/web/mathml/examples/index.md
@@ -3,6 +3,8 @@ title: 例
slug: Web/MathML/Examples
---
+{{MathMLRef}}
+
以下のリンクでは、複雑な数学の概念をウェブコンテンツで表示するための MathML の使い方を理解するのに役立つ例がいくつかあります。
- [ピタゴラスの定理](/ja/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem)
diff --git a/files/ja/web/mathml/examples/mathml_pythagorean_theorem/index.md b/files/ja/web/mathml/examples/mathml_pythagorean_theorem/index.md
index 043a73c2fc0465..a2635491d8c375 100644
--- a/files/ja/web/mathml/examples/mathml_pythagorean_theorem/index.md
+++ b/files/ja/web/mathml/examples/mathml_pythagorean_theorem/index.md
@@ -3,6 +3,8 @@ title: ピタゴラスの定理の証明
slug: Web/MathML/Examples/MathML_Pythagorean_Theorem
---
+{{MathMLRef}}
+
ピタゴラスの定理を証明します。
**命題**: 直角三角形では、斜辺の 2 乗は他の 2 辺の 2 乗の和に等しい。
diff --git a/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
index 11e5e19954d2c5..007dea285249fd 100644
--- a/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
@@ -3,6 +3,8 @@ title: HTML5 の動画へのキャプションと字幕の追加
slug: Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
---
+{{QuickLinksWithSubPages("/ja/docs/Web/Media")}}
+
他の記事で、 [ブラウザーに依存しない動画プレイヤーの構築](/ja/Apps/Build/Manipulating_media/cross_browser_video_player)を、 {{ domxref("HTMLMediaElement") }} 及び {{ domxref("Window.fullScreen") }} API を使用して行う方法と、[プレイヤーのスタイル付け](/ja/Apps/Build/Manipulating_media/Video_player_styling_basics)の方法について見てきました。この記事では、同じプレイヤーと使って、 {{ domxref("Web_Video_Text_Tracks_Format","WebVTT 形式") }}及び {{ htmlelement("track") }} 要素を用いてキャプションや字幕を追加する方法を紹介します。
## キャプション付きの動画の例
diff --git a/files/ja/web/media/audio_and_video_delivery/index.md b/files/ja/web/media/audio_and_video_delivery/index.md
index 3f2581d85eda97..7599ec1c6a079b 100644
--- a/files/ja/web/media/audio_and_video_delivery/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/index.md
@@ -3,6 +3,8 @@ title: 音声と動画の配信
slug: Web/Media/Audio_and_video_delivery
---
+{{QuickLinksWithSubPages("/ja/docs/Web/Media")}}
+
静的な」メディアファイルからアダプティブなライブストリームまで、さまざまな方法で音声と動画をウェブ上に配信することができます。この記事は、ウェブベースのメディアの様々な配信メカニズムや、一般的なブラウザーへの互換性を探るための出発点として意図されています。
## audio および video 要素
diff --git a/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
index 054260acf3c18e..24be8ac6804752 100644
--- a/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
@@ -3,6 +3,8 @@ title: ウェブの音声や動画のライブストリーミング
slug: Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video
---
+{{QuickLinksWithSubPages("/ja/docs/Web/Media")}}
+
ライブストリーミング技術は、よくスポーツやコンサートなどのイベントの中継や、もっと一般的にはテレビやラジオの番組の配信などによく採用されています。よくストリーミングと略されるライブストリーミングは、コンピューターや機器へメディアを「ライブ」で転送するプロセスです。これは実に複雑で数多くの変量がある初期段階の主題ですので、この記事では主題を紹介し、どのように始めることができるかを説明します。
メディアをブラウザーにストリーミングする際に考慮しなければならないことは、有限のファイルを再生するのではなく、その場で作成されているファイルを中継しており、あらかじめ開始または終了が決められていないという点です。
diff --git a/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md b/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md
index 42b04b86054714..0405f22d98c44e 100644
--- a/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md
+++ b/files/ja/web/media/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.md
@@ -3,6 +3,8 @@ title: Setting up adaptive streaming media sources
slug: Web/Media/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources
---
+{{QuickLinksWithSubPages("/ja/docs/Web/Media")}}
+
たとえば、 HTML5 メディア要素内で利用するために、サーバー上の適応型ストリーミングメディアソースを設定するとします。あなたはどうしますか？この記事では、最も一般的な形式である MPEG-DASH と HLS (HTTP Live Streaming) の二つについて見ていきます。
## フォーマットの選択
diff --git a/files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.md b/files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.md
index 721f0de4e86db0..d60f0ee4dff564 100644
--- a/files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.md
+++ b/files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.md
@@ -3,6 +3,8 @@ title: HTML 5 ビデオ用の DASH アダプティブストリーミング
slug: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video
---
+{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}
+
Dynamic Adaptive Streaming over HTTP (DASH) は、アダプティブストリーミングプロトコルです。これは動画の再生を維持するためにネットワークパフォーマンスに応じてビデオストリームのビットレートを切り替えることを可能にします。
## ブラウザーの対応
diff --git a/files/ja/web/media/images/index.md b/files/ja/web/media/images/index.md
index 6f1d491912a03a..40d93384c347c8 100644
--- a/files/ja/web/media/images/index.md
+++ b/files/ja/web/media/images/index.md
@@ -3,6 +3,8 @@ title: HTML での画像の使用
slug: Web/Media/images
---
+{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}
+
{{Glossary("HTML")}} の {{HTMLElement("img")}} 要素で HTML 文書に画像を埋め込むことができ、 {{HTMLElement("picture")}} 要素を使用すると[レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)を使用することができます。このガイドでは、ウェブサイトへの画像の追加を扱うリソースへのリンクを紹介します。
## リファレンス
diff --git a/files/ja/web/performance/animation_performance_and_frame_rate/layout-faint.png b/files/ja/web/performance/animation_performance_and_frame_rate/layout-faint.png
deleted file mode 100644
index 8e26a85cdec7ac..00000000000000
Binary files a/files/ja/web/performance/animation_performance_and_frame_rate/layout-faint.png and /dev/null differ
diff --git a/files/ja/web/performance/animation_performance_and_frame_rate/layout.png b/files/ja/web/performance/animation_performance_and_frame_rate/layout.png
deleted file mode 100644
index 130e631556a2ac..00000000000000
Binary files a/files/ja/web/performance/animation_performance_and_frame_rate/layout.png and /dev/null differ
diff --git a/files/ja/web/performance/animation_performance_and_frame_rate/paint-faint.png b/files/ja/web/performance/animation_performance_and_frame_rate/paint-faint.png
deleted file mode 100644
index 7056487190f500..00000000000000
Binary files a/files/ja/web/performance/animation_performance_and_frame_rate/paint-faint.png and /dev/null differ
diff --git a/files/ja/web/performance/animation_performance_and_frame_rate/paint.png b/files/ja/web/performance/animation_performance_and_frame_rate/paint.png
deleted file mode 100644
index 0aed13c69f3384..00000000000000
Binary files a/files/ja/web/performance/animation_performance_and_frame_rate/paint.png and /dev/null differ
diff --git a/files/ja/web/performance/animation_performance_and_frame_rate/recalculate-style.png b/files/ja/web/performance/animation_performance_and_frame_rate/recalculate-style.png
deleted file mode 100644
index 2a7ab1e3d728cd..00000000000000
Binary files a/files/ja/web/performance/animation_performance_and_frame_rate/recalculate-style.png and /dev/null differ
diff --git a/files/ja/web/security/certificate_transparency/index.md b/files/ja/web/security/certificate_transparency/index.md
index e620d2721c6152..0cafe4912d61cc 100644
--- a/files/ja/web/security/certificate_transparency/index.md
+++ b/files/ja/web/security/certificate_transparency/index.md
@@ -3,6 +3,8 @@ title: 証明書の透明性
slug: Web/Security/Certificate_Transparency
---
+{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}
+
**Certificate Transparency** は、証明書の誤発行を防止し、監視するために設計されたオープンなフレームワークです。新しく発行された証明書は、公開されている、多くの場合独立した CT ログに「記録」され、発行された TLS 証明書の追加のみの暗号的に保証された記録を維持します。
このようにして、認証局 (CA) は、はるかに大きな監視と監督を受けることができます。CA/B フォーラムの*ベースライン要件*に違反するような、潜在的に悪意のある証明書は、より迅速に検出され、失効される可能性があります。また、ブラウザベンダーやルートストアのメンテナは、不信に繋がるかもしれない問題がある CA について、より多くの情報に基づいた決定を下すことができるようになります。
diff --git a/files/ja/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md b/files/ja/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
deleted file mode 100644
index 0425aa7e2795e1..00000000000000
--- a/files/ja/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: 混在コンテンツでブロックされるウェブサイトを修正するには
-slug: Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
----
-
-[Firefox 23](/ja/docs/Mozilla/Firefox/Releases/23) より、 Firefox は[能動的な混在コンテンツ](/ja/docs/Security/MixedContent#Mixed_active_content)を既定でブロックします。この機能は Internet Explorer ([バージョン 9 以降](http://blogs.msdn.com/b/ie/archive/2011/06/23/internet-explorer-9-security-part-4-protecting-consumers-from-malicious-mixed-content.aspx)) や [Chrome](https://security.googleblog.com/2011/06/trying-to-end-mixed-scripting.html?m=1) でも採用されています。
-
-このページでは、ウェブ開発者として知っておくべきことを説明します。
-
-## ウェブサイトが壊れることも
-
-ウェブサイトを HTTPS で配信している場合、ページ上にある [能動的な混在コンテンツ](/ja/docs/Security/MixedContent#Mixed_active_content)はすべて既定でブロックされます。結果として、ユーザーからはそのウェブサイトが壊れているように見えるかもしれません (iframe やプラグインが読み込まれないなど)。一方、[受動的な混在コンテンツ](/ja/docs/Security/MixedContent#Mixed_passive.2Fdisplay_content)は既定で表示されますが、このようなコンテンツをブロックするようにユーザーが設定することも可能です。
-
-混在コンテンツは Chrome と Internet Explorer でもブロックされるため、ウェブサイトがこの２つのブラウザーで正常に動作していれば、混在コンテンツをブロックする Firefox でも正常に動作する可能性が高いと言えます。
-
-いずれにしても、ウェブサイトが Firefox で動作しない原因を特定するには、[最新の Firefox](https://www.mozilla.org/ja/firefox) を利用すると良いでしょう。ウェブサイトを開いた上で、開発ツールの[ウェブコンソール](/ja/docs/Tools/Web_Console)を開き、「セキュリティ」のメッセージを有効にします。そうすると、混在コンテンツを引き起こしている原因が表示されます。また、 [SSL-check](http://www.jitbit.com/sslcheck/) や [Missing Padlock](https://www.missingpadlock.com) などの無料のオンライン型クローラーや、 [HTTPSChecker](https://httpschecker.net/how-it-works) といったデスクトップ型のクローラー、または [mcdetect](https://github.com/agis/mcdetect) などの CLI ツールを使用して、安全ではないコンテンツを指すリンクがないかどうか、ウェブサイトを再帰的に検索することが出来ます。もし混在コンテンツに関する警告が出なければ、ウェブサイトの品質は保たれていると言えます。今後も維持し続けてください。
-
-## ウェブサイトを修正する方法
-
-混合コンテンツが原因でブロックされないためには、すべてのコンテンツを (HTTP ではなく) HTTPS で提供することが重要です。
-
-**自分が保有するドメインの場合**、すべてのコンテンツが HTTPS で配信されるようにリンクを修正します。多くの場合、既にコンテンツは HTTPS として配信できるようになっているため、単に "s" を追加してリンクの http\:// を https\:// に変更するだけで対応できます。
-
-しかし、場合によっては、問題のメディアに対してパスが正しくない可能性があります。 これを解決するためには、 [linkchecker](https://linkchecker.github.io/linkchecker/) のようなオンラインツールとオフラインツール (オペレーティングシステムに依存します) があります。
-
-**他者が保有するドメインの場合**、可能であれば HTTPS でウェブサイトに接続します。 HTTPS でアクセスできない場合は、 HTTPS を介してコンテンツを配信してもらえるよう、ドメインの管理者に連絡してみてください。
-
-{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}
diff --git a/files/ja/web/security/securing_your_site/index.md b/files/ja/web/security/practical_implementation_guides/index.md
similarity index 98%
rename from files/ja/web/security/securing_your_site/index.md
rename to files/ja/web/security/practical_implementation_guides/index.md
index dcae226d3ad6e7..93b552b1e05817 100644
--- a/files/ja/web/security/securing_your_site/index.md
+++ b/files/ja/web/security/practical_implementation_guides/index.md
@@ -1,6 +1,7 @@
---
title: サイトの安全化
-slug: Web/Security/Securing_your_site
+slug: Web/Security/Practical_implementation_guides
+original_slug: Web/Security/Securing_your_site
---
サイトをより安全にする方法はいくつもあります。この記事では、その方法を紹介するとともに、他のより有益な記事へのリンクを掲載しています。
diff --git a/files/ja/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/ja/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
similarity index 97%
rename from files/ja/web/security/securing_your_site/turning_off_form_autocompletion/index.md
rename to files/ja/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
index b6caf37e4c392e..33ce693c461aae 100644
--- a/files/ja/web/security/securing_your_site/turning_off_form_autocompletion/index.md
+++ b/files/ja/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
@@ -1,6 +1,7 @@
---
title: フォームの自動補完を無効にするには
-slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
+original_slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
---
この記事では、フォーム入力欄の自動補完をウェブサイト側から無効にする方法を説明します。
diff --git a/files/ja/web/security/referer_header_colon__privacy_and_security_concerns/index.md b/files/ja/web/security/referer_header_colon__privacy_and_security_concerns/index.md
index 1bc7f5c9a45eb6..5ea338114da1ed 100644
--- a/files/ja/web/security/referer_header_colon__privacy_and_security_concerns/index.md
+++ b/files/ja/web/security/referer_header_colon__privacy_and_security_concerns/index.md
@@ -3,6 +3,8 @@ title: Referer ヘッダーのプライバシーとセキュリティの考慮
slug: Web/Security/Referer_header:_privacy_and_security_concerns
---
+{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}
+
[HTTP の Referer ヘッダー](/ja/docs/Web/HTTP/Headers/Referer)にまつわるプライバシーとセキュリティのリスクがあります。この記事ではこれらを説明し、これらのリスクを回避するためのアドバイスを提案します。
## リファラー問題
diff --git a/files/ja/web/security/subdomain_takeovers/index.md b/files/ja/web/security/subdomain_takeovers/index.md
index 4097cc97c6ddce..fff26ee4e48695 100644
--- a/files/ja/web/security/subdomain_takeovers/index.md
+++ b/files/ja/web/security/subdomain_takeovers/index.md
@@ -3,6 +3,8 @@ title: Subdomain takeovers
slug: Web/Security/Subdomain_takeovers
---
+{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}
+
subdomain takeover は、攻撃者がターゲットドメインのサブドメインの制御権を獲得したときに発生します。一般的には、サブドメインがドメインネームシステム ([DNS](/ja/docs/Glossary/DNS)) に正規名 ([CNAME](https://en.wikipedia.org/wiki/CNAME_record)) を持っているが、そのサブドメインにコンテンツを提供しているホストがいない場合に発生します。これは、バーチャルホストがまだ公開されていないか、バーチャルホストが削除されているために起こる可能性があります。攻撃者は、自分のバーチャルホストを提供して、そのサブドメインのコンテンツをホストすることで、そのサブドメインを乗っ取ることができます。
攻撃者がこれを行うことができれば、メインドメインから設定された[クッキー](/ja/docs/Web/HTTP/Cookies)を読み取ったり、[クロスサイトスクリプティング](/ja/docs/Web/Security/Types_of_attacks#Cross-site_scripting_XSS)を行ったり、[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)を回避したりすることが可能となり、保護された情報 (ログインを含む) を取得したり、不審なユーザーに悪意のあるコンテンツを送信したりすることが可能となります。
diff --git a/files/ja/web/security/types_of_attacks/index.md b/files/ja/web/security/types_of_attacks/index.md
index 83d22fbccf68f6..0667159af09937 100644
--- a/files/ja/web/security/types_of_attacks/index.md
+++ b/files/ja/web/security/types_of_attacks/index.md
@@ -3,6 +3,8 @@ title: 攻撃の種類
slug: Web/Security/Types_of_attacks
---
+{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}
+
この記事では、様々な種類のセキュリティ攻撃とそれを軽減するためのテクニックについて解説しています。
## クリックジャッキング
diff --git a/files/ja/web/svg/applying_svg_effects_to_html_content/index.md b/files/ja/web/svg/applying_svg_effects_to_html_content/index.md
index ed5b390684abf4..4fe08a06ebd968 100644
--- a/files/ja/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/ja/web/svg/applying_svg_effects_to_html_content/index.md
@@ -3,6 +3,8 @@ title: SVG 効果の HTML コンテンツへの適用
slug: Web/SVG/Applying_SVG_effects_to_HTML_content
---
+{{SVGRef}}
+
最近のブラウザーは、 [SVG](/ja/docs/Web/SVG) を [CSS](/ja/docs/Web/CSS) スタイルの中で使用して、 HTML コンテンツに対してグラフィカルな効果を適用することに対応しています。
SVG をスタイルで指定するには、同一文書内または外部のスタイルシートで指定することができます。使用できるプロパティは [`mask`](/ja/docs/Web/CSS/mask), [`clip-path`](/ja/docs/Web/CSS/clip-path), [`filter`](/ja/docs/Web/CSS/filter) の 3 つです。
diff --git a/files/ja/web/svg/attribute/lengthadjust/index.md b/files/ja/web/svg/attribute/lengthadjust/index.md
index bb1544f0da1fb3..8f0a8614220632 100644
--- a/files/ja/web/svg/attribute/lengthadjust/index.md
+++ b/files/ja/web/svg/attribute/lengthadjust/index.md
@@ -3,6 +3,8 @@ title: lengthAdjust
slug: Web/SVG/Attribute/lengthAdjust
---
+{{SVGRef}}
+
SVG の `<text>` 要素または `<tspan>` 要素が特定の長さを有している場合、それは `textLength` 属性を使って設定したものである訳ですが、`lengthAdjust` 属性は、テキストをその長さに引き延ばすかあるいはその長さに圧縮する方法を制御します。
この属性で可能な二つの値は、 **`spacing`** と **`spacingAndGlyphs`** です。`spacing` (デフォルト値) を使うと、文字の形が保たれる一方で、文字同士の間のスペースが伸び縮みします。`spacingAndGlyphs` を使うと、テキスト要素全体が、そのテキストの方向に沿って引き延ばされます。
diff --git a/files/ja/web/svg/attribute/stroke-linecap/index.md b/files/ja/web/svg/attribute/stroke-linecap/index.md
index fa36170784f7b9..46201c170dbd22 100644
--- a/files/ja/web/svg/attribute/stroke-linecap/index.md
+++ b/files/ja/web/svg/attribute/stroke-linecap/index.md
@@ -3,6 +3,8 @@ title: stroke-linecap
slug: Web/SVG/Attribute/stroke-linecap
---
+{{SVGRef}}
+
« [SVG 属性リファレンスホーム](/ja/docs/Web/SVG/Attribute)
`stroke-linecap` 要素は線を引いた時の開いている部分パスの終端の形状を指定します。
diff --git a/files/ja/web/svg/attribute/stroke-linejoin/index.md b/files/ja/web/svg/attribute/stroke-linejoin/index.md
index b7aa56954c7715..6bf1a4c9426304 100644
--- a/files/ja/web/svg/attribute/stroke-linejoin/index.md
+++ b/files/ja/web/svg/attribute/stroke-linejoin/index.md
@@ -3,6 +3,8 @@ title: stroke-linejoin
slug: Web/SVG/Attribute/stroke-linejoin
---
+{{SVGRef}}
+
« [SVG 属性リファレンスホーム](/ja/docs/Web/SVG/Attribute)
`stroke-linejoin` 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。
diff --git a/files/ja/web/svg/namespaces_crash_course/example/index.md b/files/ja/web/svg/namespaces_crash_course/example/index.md
index eab50d62c3e54d..b554e8d12a8ebd 100644
--- a/files/ja/web/svg/namespaces_crash_course/example/index.md
+++ b/files/ja/web/svg/namespaces_crash_course/example/index.md
@@ -3,6 +3,8 @@ title: 例
slug: Web/SVG/Namespaces_Crash_Course/Example
---
+{{SVGRef}}
+
この例で、私達は [XHTML](/ja/docs/XHTML) 、 [SVG](/ja/docs/Web/SVG) 、 [JavaScript](/ja/docs/Web/JavaScript) と [DOM](/ja/docs/DOM) 2 を「ほこり」の群れを動かすのにつかっています。これらのほこりは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがマウスカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組み合わせることで、このとても自然に見える動きができます。
これは完全に Flash やその他のベンダ特有の拡張を用いずに、 W3C 標準- XHTML と SVG と JavaScript で実現されています。これは Firefox 1.5 以上で動作します。
diff --git a/files/ja/web/svg/namespaces_crash_course/index.md b/files/ja/web/svg/namespaces_crash_course/index.md
index 3120bea3d46923..caf732a2ce4514 100644
--- a/files/ja/web/svg/namespaces_crash_course/index.md
+++ b/files/ja/web/svg/namespaces_crash_course/index.md
@@ -3,6 +3,8 @@ title: 名前空間の速修講座
slug: Web/SVG/Namespaces_Crash_Course
---
+{{SVGRef}}
+
### 導入
[XML](/ja/docs/Glossary/XML) の派生言語として、 [SVG](/ja/docs/Web/SVG) は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない [Gecko](/ja/docs/Glossary/Gecko) ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。
diff --git a/files/ja/web/svg/scripting/index.md b/files/ja/web/svg/scripting/index.md
index 8581c0b4bcbdb3..a3f10e9810b11b 100644
--- a/files/ja/web/svg/scripting/index.md
+++ b/files/ja/web/svg/scripting/index.md
@@ -3,6 +3,8 @@ title: スクリプティング
slug: Web/SVG/Scripting
---
+{{SVGRef}}
+
ブラウザーの既定の動作を `evt.preventDefault( )` メソッドで上書きしたり、イベントリスナーを `element.addEventListener(event, function, useCapture)` という構文でオブジェクトに追加したり、要素のプロパティを `svgElement.style.setProperty("fill-opacity", "0.0", "")` などで設定することが可能です。 3 つの引数がすべてプロパティを設定していることに注意してください。
### イベントコードの既定の挙動を防ぐ
diff --git a/files/ja/web/svg/svg_animation_with_smil/index.md b/files/ja/web/svg/svg_animation_with_smil/index.md
index 0baf8f5cb119ff..6cadb3ee7ce231 100644
--- a/files/ja/web/svg/svg_animation_with_smil/index.md
+++ b/files/ja/web/svg/svg_animation_with_smil/index.md
@@ -3,6 +3,8 @@ title: SVG animation with SMIL
slug: Web/SVG/SVG_animation_with_SMIL
---
+{{SVGRef}}
+
Firefox 4 より、[Synchronized Multimedia Integration Language](http://www.w3.org/TR/REC-smil) (SMIL) を用いた [SVG](/ja/SVG) のアニメーションをサポートしています。SMIL では以下のようなことができます:
- 要素の数値属性 (x, y など) のアニメーション
diff --git a/files/ja/web/svg/svg_as_an_image/index.md b/files/ja/web/svg/svg_as_an_image/index.md
index b5d28faababc61..078413850e906c 100644
--- a/files/ja/web/svg/svg_as_an_image/index.md
+++ b/files/ja/web/svg/svg_as_an_image/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: f4f8e2f18ccf19a0bee59e1fe78753e276b98232
---
+{{SVGRef}}
+
SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。
- HTML の {{HTMLElement("img")}} または {{SVGElement("svg")}} 要素
diff --git a/files/ja/web/xml/xml_introduction/index.md b/files/ja/web/xml/xml_introduction/index.md
index bd0f2091e3a7ae..13246c803ad039 100644
--- a/files/ja/web/xml/xml_introduction/index.md
+++ b/files/ja/web/xml/xml_introduction/index.md
@@ -3,6 +3,8 @@ title: XML のイントロダクション
slug: Web/XML/XML_introduction
---
+{{QuickLinksWithSubpages("/ja/docs/Web/XML")}}
+
概要: この記事は、'eXtensible Markup Language' (XML、拡張可能マークアップ言語) を紹介し、その使い道について XML は HTML に似たマークアップ言語です。 これは Extensible Markup Language の略で、汎用マークアップ言語として [W3C が推奨する](https://www.w3.org/TR/xml/)仕様です。つまり、他のマークアップ言語とは異なり、XML は事前定義されていないため、独自のタグを定義する必要があります。この言語の主な目的は、インターネットなどのさまざまなシステム間でデータを共有することです。
XML に基づいた言語はたくさんあります。[XHTML](/ja/docs/XHTML)、[MathML](/ja/docs/Web/MathML)、[SVG](/ja/docs/Web/SVG)、[XUL](/ja/docs/Mozilla/Tech/XUL)、[XBL](/ja/docs/XBL)、[RSS](/ja/docs/Archive/RSS)、[RDF](/ja/docs/RDF) などがあります。 あなた自身のものを作ることもできます。
diff --git a/files/ja/web/xpath/functions/boolean/index.md b/files/ja/web/xpath/functions/boolean/index.md
index cc3be14508d18c..cc0c10df93d03f 100644
--- a/files/ja/web/xpath/functions/boolean/index.md
+++ b/files/ja/web/xpath/functions/boolean/index.md
@@ -3,7 +3,7 @@ title: boolean
slug: Web/XPath/Functions/boolean
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`boolean` 関数は式を評価し、 true または false を返します。
diff --git a/files/ja/web/xpath/functions/ceiling/index.md b/files/ja/web/xpath/functions/ceiling/index.md
index 811f065494fd28..ab82f171547e46 100644
--- a/files/ja/web/xpath/functions/ceiling/index.md
+++ b/files/ja/web/xpath/functions/ceiling/index.md
@@ -3,7 +3,7 @@ title: ceiling
slug: Web/XPath/Functions/ceiling
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`ceiling` 関数は小数を評価し、その小数以上の最も小さい整数を返します。
diff --git a/files/ja/web/xpath/functions/choose/index.md b/files/ja/web/xpath/functions/choose/index.md
index 72ea5ee7d869f0..a876c9b1c5554d 100644
--- a/files/ja/web/xpath/functions/choose/index.md
+++ b/files/ja/web/xpath/functions/choose/index.md
@@ -3,7 +3,7 @@ title: choose
slug: Web/XPath/Functions/choose
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`choose` 関数は正負値に基づいて、指定されたオブジェクトのうち 1 つを返します。
diff --git a/files/ja/web/xpath/functions/concat/index.md b/files/ja/web/xpath/functions/concat/index.md
index e5662b39a7a6a9..8da8bf0f314cf8 100644
--- a/files/ja/web/xpath/functions/concat/index.md
+++ b/files/ja/web/xpath/functions/concat/index.md
@@ -3,7 +3,7 @@ title: concat
slug: Web/XPath/Functions/concat
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`concat` 関数は 2 つ以上の文字列を連結し、その結果として得られる文字列を返します。
diff --git a/files/ja/web/xpath/functions/contains/index.md b/files/ja/web/xpath/functions/contains/index.md
index 62be09ca976840..40e3e9e71efbd4 100644
--- a/files/ja/web/xpath/functions/contains/index.md
+++ b/files/ja/web/xpath/functions/contains/index.md
@@ -3,7 +3,7 @@ title: contains
slug: Web/XPath/Functions/contains
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`contains` 関数は、第 1 引数の文字列に第 2 引数の文字列が含まれているかどうかを判定し、論理値 true または false を返します。
diff --git a/files/ja/web/xpath/functions/count/index.md b/files/ja/web/xpath/functions/count/index.md
index bd8507309ff880..f22f99936a5f2c 100644
--- a/files/ja/web/xpath/functions/count/index.md
+++ b/files/ja/web/xpath/functions/count/index.md
@@ -3,7 +3,7 @@ title: count
slug: Web/XPath/Functions/count
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`count` 関数はノード集合に含まれるノードの数を数え、その整数を返します。
diff --git a/files/ja/web/xpath/functions/current/index.md b/files/ja/web/xpath/functions/current/index.md
index 7762edb412c7ab..8915447ddfa902 100644
--- a/files/ja/web/xpath/functions/current/index.md
+++ b/files/ja/web/xpath/functions/current/index.md
@@ -3,7 +3,7 @@ title: current
slug: Web/XPath/Functions/current
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`current`関数を使用して、XSLT 命令でコンテキストノードを取得できます。
diff --git a/files/ja/web/xpath/functions/document/index.md b/files/ja/web/xpath/functions/document/index.md
index e870db281aabb5..51c3b1166c8de4 100644
--- a/files/ja/web/xpath/functions/document/index.md
+++ b/files/ja/web/xpath/functions/document/index.md
@@ -3,7 +3,7 @@ title: document
slug: Web/XPath/Functions/document
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`document` は、外部の文書、または複数の外部の文書からノード集合を見つけ、結果のノード集合を返します。
diff --git a/files/ja/web/xpath/functions/element-available/index.md b/files/ja/web/xpath/functions/element-available/index.md
index 6be21dc2eaea44..2d2b01fd9136b6 100644
--- a/files/ja/web/xpath/functions/element-available/index.md
+++ b/files/ja/web/xpath/functions/element-available/index.md
@@ -3,7 +3,7 @@ title: element-available
slug: Web/XPath/Functions/element-available
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`element-available` 関数は、要素が利用可能かどうかを判断し、true または false を返します。
diff --git a/files/ja/web/xpath/functions/false/index.md b/files/ja/web/xpath/functions/false/index.md
index 56bb017e591583..f250e16763f39f 100644
--- a/files/ja/web/xpath/functions/false/index.md
+++ b/files/ja/web/xpath/functions/false/index.md
@@ -3,7 +3,7 @@ title: "false"
slug: Web/XPath/Functions/false
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`false` 関数は論理値 false を返します。
diff --git a/files/ja/web/xpath/functions/floor/index.md b/files/ja/web/xpath/functions/floor/index.md
index 6846caabaae875..b5ce55fe331fdc 100644
--- a/files/ja/web/xpath/functions/floor/index.md
+++ b/files/ja/web/xpath/functions/floor/index.md
@@ -3,7 +3,7 @@ title: floor
slug: Web/XPath/Functions/floor
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`floor` 関数は小数を評価し、その小数以下の最も大きい整数を返します。
diff --git a/files/ja/web/xpath/functions/function-available/index.md b/files/ja/web/xpath/functions/function-available/index.md
index f1645a1db47f78..fea3194ef5651d 100644
--- a/files/ja/web/xpath/functions/function-available/index.md
+++ b/files/ja/web/xpath/functions/function-available/index.md
@@ -3,7 +3,7 @@ title: function-available
slug: Web/XPath/Functions/function-available
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`function-available`関数は、指定された関数が使用可能かどうかを判断し、論理値 true または false を返します。
diff --git a/files/ja/web/xpath/functions/generate-id/index.md b/files/ja/web/xpath/functions/generate-id/index.md
index 91c64fe5e78776..f41fe10373f8b8 100644
--- a/files/ja/web/xpath/functions/generate-id/index.md
+++ b/files/ja/web/xpath/functions/generate-id/index.md
@@ -3,7 +3,7 @@ title: generate-id
slug: Web/XPath/Functions/generate-id
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`generate-id`関数は、指定されたノード集合の最初のノードの一意の ID を生成し、その ID を含む文字列を返します。
diff --git a/files/ja/web/xpath/functions/id/index.md b/files/ja/web/xpath/functions/id/index.md
index b91daaa5354f3b..86947f684eac53 100644
--- a/files/ja/web/xpath/functions/id/index.md
+++ b/files/ja/web/xpath/functions/id/index.md
@@ -3,7 +3,7 @@ title: id
slug: Web/XPath/Functions/id
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`id` 関数は渡された ID に一致するノードを探し、識別されたノードを格納するノード集合を返します。
diff --git a/files/ja/web/xpath/functions/lang/index.md b/files/ja/web/xpath/functions/lang/index.md
index 2ff3fea1c0665f..a8b3867499dca0 100644
--- a/files/ja/web/xpath/functions/lang/index.md
+++ b/files/ja/web/xpath/functions/lang/index.md
@@ -3,7 +3,7 @@ title: lang
slug: Web/XPath/Functions/lang
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`lang` 関数は、コンテキストノードの言語が渡された言語に一致するかどうかを判定し、論理値 true または false を返します。
diff --git a/files/ja/web/xpath/functions/last/index.md b/files/ja/web/xpath/functions/last/index.md
index 3dd2945a973b48..b0590c22603fea 100644
--- a/files/ja/web/xpath/functions/last/index.md
+++ b/files/ja/web/xpath/functions/last/index.md
@@ -3,7 +3,7 @@ title: last
slug: Web/XPath/Functions/last
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`last` 関数は、式評価コンテキストのコンテキストサイズに等しい数値を返します。
diff --git a/files/ja/web/xpath/functions/local-name/index.md b/files/ja/web/xpath/functions/local-name/index.md
index 535a75b711fab3..1cc888ad556152 100644
--- a/files/ja/web/xpath/functions/local-name/index.md
+++ b/files/ja/web/xpath/functions/local-name/index.md
@@ -3,7 +3,7 @@ title: local-name
slug: Web/XPath/Functions/local-name
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`local-name` 関数は、与えられたノード集合内の最初のノードのローカル名 (local name) を表す文字列を返します。
diff --git a/files/ja/web/xpath/functions/name/index.md b/files/ja/web/xpath/functions/name/index.md
index 84a6e12e499385..ed8dec2c4d329c 100644
--- a/files/ja/web/xpath/functions/name/index.md
+++ b/files/ja/web/xpath/functions/name/index.md
@@ -3,7 +3,7 @@ title: name
slug: Web/XPath/Functions/name
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`name` 関数は、与えられたノード集合内の最初のノードの QName を表す文字列を返します。
diff --git a/files/ja/web/xpath/functions/namespace-uri/index.md b/files/ja/web/xpath/functions/namespace-uri/index.md
index 7884b303621664..491fc2a273c303 100644
--- a/files/ja/web/xpath/functions/namespace-uri/index.md
+++ b/files/ja/web/xpath/functions/namespace-uri/index.md
@@ -3,7 +3,7 @@ title: namespace-uri
slug: Web/XPath/Functions/namespace-uri
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`namespace-uri` 関数は、指定されたノード集合内の最初のノードの名前空間 URI を表す文字列を返します。
diff --git a/files/ja/web/xpath/functions/normalize-space/index.md b/files/ja/web/xpath/functions/normalize-space/index.md
index 28f355231f5245..279d4f11eef567 100644
--- a/files/ja/web/xpath/functions/normalize-space/index.md
+++ b/files/ja/web/xpath/functions/normalize-space/index.md
@@ -3,7 +3,7 @@ title: normalize-space
slug: Web/XPath/Functions/normalize-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`normalize-space` 関数は、文字列から前後のホワイトスペースを取り除き、連続するホワイトスペースを 1 つのスペースに置き換え、その結果として得られる文字列を返します。
diff --git a/files/ja/web/xpath/functions/not/index.md b/files/ja/web/xpath/functions/not/index.md
index 6c50817901d92a..7369cbc62a688a 100644
--- a/files/ja/web/xpath/functions/not/index.md
+++ b/files/ja/web/xpath/functions/not/index.md
@@ -3,7 +3,7 @@ title: not
slug: Web/XPath/Functions/not
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`not` 関数は式を論理値として評価し、その逆の値を返します。
diff --git a/files/ja/web/xpath/functions/position/index.md b/files/ja/web/xpath/functions/position/index.md
index 91020b6d307481..a3e45ae62d3057 100644
--- a/files/ja/web/xpath/functions/position/index.md
+++ b/files/ja/web/xpath/functions/position/index.md
@@ -3,7 +3,7 @@ title: position
slug: Web/XPath/Functions/position
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`position` 関数は、式評価コンテキストのコンテキスト位置に等しい数値を返します。
diff --git a/files/ja/web/xpath/functions/round/index.md b/files/ja/web/xpath/functions/round/index.md
index 6e593f409e37ad..aea4f84ab2e8ca 100644
--- a/files/ja/web/xpath/functions/round/index.md
+++ b/files/ja/web/xpath/functions/round/index.md
@@ -3,7 +3,7 @@ title: round
slug: Web/XPath/Functions/round
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`round` 関数は、与えられた数値に最も近い整数を返します。
diff --git a/files/ja/web/xpath/functions/starts-with/index.md b/files/ja/web/xpath/functions/starts-with/index.md
index fb62ac747c9d74..848737479d0e29 100644
--- a/files/ja/web/xpath/functions/starts-with/index.md
+++ b/files/ja/web/xpath/functions/starts-with/index.md
@@ -3,7 +3,7 @@ title: starts-with
slug: Web/XPath/Functions/starts-with
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`starts-with` 関数は第 1 引数の文字列が第 2 引数の文字列で始まるかどうかを調べ、true または false を返します。
diff --git a/files/ja/web/xpath/functions/string-length/index.md b/files/ja/web/xpath/functions/string-length/index.md
index b0f89c3cda4ef8..2dcb8eaaf69faf 100644
--- a/files/ja/web/xpath/functions/string-length/index.md
+++ b/files/ja/web/xpath/functions/string-length/index.md
@@ -3,7 +3,7 @@ title: string-length
slug: Web/XPath/Functions/string-length
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`string-length` 関数は、与えられた文字列の文字数に等しい数値を返します。
diff --git a/files/ja/web/xpath/functions/string/index.md b/files/ja/web/xpath/functions/string/index.md
index f726c9421ccf1f..1e24b3e06769e0 100644
--- a/files/ja/web/xpath/functions/string/index.md
+++ b/files/ja/web/xpath/functions/string/index.md
@@ -3,7 +3,7 @@ title: string
slug: Web/XPath/Functions/string
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`string` 関数は与えられた引数を文字列に変換します。
diff --git a/files/ja/web/xpath/functions/substring-after/index.md b/files/ja/web/xpath/functions/substring-after/index.md
index c27e0949fceff4..52c7df2bc15ec6 100644
--- a/files/ja/web/xpath/functions/substring-after/index.md
+++ b/files/ja/web/xpath/functions/substring-after/index.md
@@ -3,7 +3,7 @@ title: substring-after
slug: Web/XPath/Functions/substring-after
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`substring-after` 関数は、与えられた文字列内で、与えられた部分文字列よりも後にある残りの部分を返します。
diff --git a/files/ja/web/xpath/functions/substring-before/index.md b/files/ja/web/xpath/functions/substring-before/index.md
index 0b943a5f8ed025..900318802f96f2 100644
--- a/files/ja/web/xpath/functions/substring-before/index.md
+++ b/files/ja/web/xpath/functions/substring-before/index.md
@@ -3,7 +3,7 @@ title: substring-before
slug: Web/XPath/Functions/substring-before
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`substring-before` 関数は、与えられた文字列内で、与えられた部分文字列よりも前にある部分の文字列を返します。
diff --git a/files/ja/web/xpath/functions/substring/index.md b/files/ja/web/xpath/functions/substring/index.md
index 85f601d64eeecd..bf90c9b32a283c 100644
--- a/files/ja/web/xpath/functions/substring/index.md
+++ b/files/ja/web/xpath/functions/substring/index.md
@@ -3,7 +3,7 @@ title: substring
slug: Web/XPath/Functions/substring
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`substring` 関数は与えられた文字列の一部を返します。
diff --git a/files/ja/web/xpath/functions/system-property/index.md b/files/ja/web/xpath/functions/system-property/index.md
index 284683a529edfa..065672442a258f 100644
--- a/files/ja/web/xpath/functions/system-property/index.md
+++ b/files/ja/web/xpath/functions/system-property/index.md
@@ -3,7 +3,7 @@ title: system-property
slug: Web/XPath/Functions/system-property
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`system-property`関数は、指定されたシステムプロパティを表すオブジェクトを返します。
diff --git a/files/ja/web/xpath/functions/translate/index.md b/files/ja/web/xpath/functions/translate/index.md
index bbc11e12f7a7e5..4e0e28b2e87653 100644
--- a/files/ja/web/xpath/functions/translate/index.md
+++ b/files/ja/web/xpath/functions/translate/index.md
@@ -3,7 +3,7 @@ title: translate
slug: Web/XPath/Functions/translate
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`translate` 関数は、文字列と、その文字列を変換するための文字の集合を評価し、変換された文字列を返します。
diff --git a/files/ja/web/xpath/functions/true/index.md b/files/ja/web/xpath/functions/true/index.md
index 3a50b763bad78a..3e577615cf963f 100644
--- a/files/ja/web/xpath/functions/true/index.md
+++ b/files/ja/web/xpath/functions/true/index.md
@@ -3,7 +3,7 @@ title: "true"
slug: Web/XPath/Functions/true
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`true` 関数は true の論理値を返します。
diff --git a/files/ja/web/xpath/functions/unparsed-entity-url/index.md b/files/ja/web/xpath/functions/unparsed-entity-url/index.md
index 4141b3a14b2e51..dce84da9717cdf 100644
--- a/files/ja/web/xpath/functions/unparsed-entity-url/index.md
+++ b/files/ja/web/xpath/functions/unparsed-entity-url/index.md
@@ -3,7 +3,7 @@ title: unparsed-entity-url
slug: Web/XPath/Functions/unparsed-entity-url
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`unparsed-entity-url()`関数は、指定された名前を持つ解析されていないエンティティの URI を返します。これは、ソース文書の DTD で参照される非 XML データです。
diff --git a/files/ja/web/xslt/common_errors/index.md b/files/ja/web/xslt/common_errors/index.md
index b21402a24e3a87..13fe1610416ca3 100644
--- a/files/ja/web/xslt/common_errors/index.md
+++ b/files/ja/web/xslt/common_errors/index.md
@@ -3,6 +3,8 @@ title: 一般的な XSLT エラー
slug: Web/XSLT/Common_errors
---
+{{XsltSidebar}}
+
### MIME タイプ
サーバーは、XML mime タイプの`text/xml`または`application/xml`のソースとスタイルシートの両方を送信する必要があります。 現在のタイプを調べるには、Mozilla でファイルを読み込み、ページ情報を見てください。 または、ダウンロードツールを使用してください。これらのツールは通常、MIME タイプを示します。
diff --git a/files/ja/web/xslt/element/apply-imports/index.md b/files/ja/web/xslt/element/apply-imports/index.md
index ee58bcad27dcaa..5cf783292435ed 100644
--- a/files/ja/web/xslt/element/apply-imports/index.md
+++ b/files/ja/web/xslt/element/apply-imports/index.md
@@ -3,7 +3,7 @@ title: <xsl:apply-imports>
slug: Web/XSLT/Element/apply-imports
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:apply-imports>` 要素は非常に秘密で、複雑なスタイルシートで主に使用されます。インポートの優先順位では、メインスタイルシートのテンプレートルールは、インポートされたスタイルシートのテンプレートルールより優先される必要があります。ただし、メインスタイルシートの同等のルールではなく、(低い優先順位の) インポートされたスタイルシートからテンプレートルールを使用するようにプロセッサを強制することが可能な場合があります。
diff --git a/files/ja/web/xslt/element/apply-templates/index.md b/files/ja/web/xslt/element/apply-templates/index.md
index 8834f28f424c39..3cd71f7ae3c3af 100644
--- a/files/ja/web/xslt/element/apply-templates/index.md
+++ b/files/ja/web/xslt/element/apply-templates/index.md
@@ -3,7 +3,7 @@ title: <xsl:apply-templates>
slug: Web/XSLT/Element/apply-templates
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:apply-templates>` 要素は、入力ツリー内のノードのセットを選択し、適切なテンプレートを適用するようにプロセッサに指示します。
diff --git a/files/ja/web/xslt/element/attribute-set/index.md b/files/ja/web/xslt/element/attribute-set/index.md
index c1efba9bd53857..5eae8fc813ff22 100644
--- a/files/ja/web/xslt/element/attribute-set/index.md
+++ b/files/ja/web/xslt/element/attribute-set/index.md
@@ -3,7 +3,7 @@ title: <xsl:attribute-set>
slug: Web/XSLT/Element/attribute-set
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:attribute-set>` 要素は名前付き属性のセットを作成します。属性のセットは、CSS の名前付きスタイルに類似した方法で出力ドキュメント全体に適用されます。
diff --git a/files/ja/web/xslt/element/attribute/index.md b/files/ja/web/xslt/element/attribute/index.md
index b3ae30c0155a50..265a73d96e4685 100644
--- a/files/ja/web/xslt/element/attribute/index.md
+++ b/files/ja/web/xslt/element/attribute/index.md
@@ -3,7 +3,7 @@ title: <xsl:attribute>
slug: Web/XSLT/Element/attribute
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:attribute>` 要素は、スタイルシートからアクセス可能な任意の値を使用して出力文書に属性を作成します。要素は属性値を設定する出力文書要素内の他の出力文書要素の前に定義する必要があります。しかし、( `<xsl:choose>` や `<xsl:apply-templates>` などのように) 出力の一部ではない要素の後または内部にある可能性があります。
diff --git a/files/ja/web/xslt/element/call-template/index.md b/files/ja/web/xslt/element/call-template/index.md
index 553247cbf844b7..56c85f6c62fc0f 100644
--- a/files/ja/web/xslt/element/call-template/index.md
+++ b/files/ja/web/xslt/element/call-template/index.md
@@ -3,7 +3,7 @@ title: <xsl:call-template>
slug: Web/XSLT/Element/call-template
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:call-template>` 要素は名前付きテンプレートを呼び出します。
diff --git a/files/ja/web/xslt/element/choose/index.md b/files/ja/web/xslt/element/choose/index.md
index df9649b2df002f..b741ec5e079dc2 100644
--- a/files/ja/web/xslt/element/choose/index.md
+++ b/files/ja/web/xslt/element/choose/index.md
@@ -3,7 +3,7 @@ title: <xsl:choose>
slug: Web/XSLT/Element/choose
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:choose>` 要素はいくつかの選択肢の中から選択肢を定義します。 手続き型言語の switch 文のように振る舞います。
diff --git a/files/ja/web/xslt/element/comment/index.md b/files/ja/web/xslt/element/comment/index.md
index f4c5d979ac6b60..8d92d48af7e99d 100644
--- a/files/ja/web/xslt/element/comment/index.md
+++ b/files/ja/web/xslt/element/comment/index.md
@@ -3,7 +3,7 @@ title: <xsl:comment>
slug: Web/XSLT/Element/comment
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:comment>` 要素は出力文書にコメントを書き込みます。テキストのみを含める必要があります。
diff --git a/files/ja/web/xslt/element/copy-of/index.md b/files/ja/web/xslt/element/copy-of/index.md
index 35406ca107f09b..ab28d2385df217 100644
--- a/files/ja/web/xslt/element/copy-of/index.md
+++ b/files/ja/web/xslt/element/copy-of/index.md
@@ -3,7 +3,7 @@ title: <xsl:copy-of>
slug: Web/XSLT/Element/copy-of
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:copy-of>` 要素は、select 属性が出力文書に指定するものすべての深いコピー (子孫ノードを含む) を作成します。
diff --git a/files/ja/web/xslt/element/copy/index.md b/files/ja/web/xslt/element/copy/index.md
index f69fe9a0c3b0a2..a9de78045e5d2a 100644
--- a/files/ja/web/xslt/element/copy/index.md
+++ b/files/ja/web/xslt/element/copy/index.md
@@ -3,7 +3,7 @@ title: <xsl:copy>
slug: Web/XSLT/Element/copy
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:copy>` 要素は、現在のノードの浅いコピー (ノードおよび関連する名前空間ノード) を出力ドキュメントに転送します。現在のノードの子または属性はコピーされません。
diff --git a/files/ja/web/xslt/element/decimal-format/index.md b/files/ja/web/xslt/element/decimal-format/index.md
index df1ff03abce878..83c904c38bdfa9 100644
--- a/files/ja/web/xslt/element/decimal-format/index.md
+++ b/files/ja/web/xslt/element/decimal-format/index.md
@@ -3,7 +3,7 @@ title: <xsl:decimal-format>
slug: Web/XSLT/Element/decimal-format
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:decimal-format>` 要素は、`format-number( )` 関数を使用して数字を文字列に変換する際に使用される文字と記号を定義します。
diff --git a/files/ja/web/xslt/element/element/index.md b/files/ja/web/xslt/element/element/index.md
index f0f025a0b575fb..7c686cecd387e2 100644
--- a/files/ja/web/xslt/element/element/index.md
+++ b/files/ja/web/xslt/element/element/index.md
@@ -3,7 +3,7 @@ title: <xsl:element>
slug: Web/XSLT/Element/element
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:element>` 要素は、出力文書に要素を作成します。
diff --git a/files/ja/web/xslt/element/fallback/index.md b/files/ja/web/xslt/element/fallback/index.md
index c2c95c60416249..409b549b53cc8b 100644
--- a/files/ja/web/xslt/element/fallback/index.md
+++ b/files/ja/web/xslt/element/fallback/index.md
@@ -3,7 +3,7 @@ title: <xsl:fallback>
slug: Web/XSLT/Element/fallback
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:fallback>` 要素は指定された拡張子 (または、最終的には新しいバージョン) 要素がサポートされていない場合に使用するテンプレートを指定します。
diff --git a/files/ja/web/xslt/element/for-each/index.md b/files/ja/web/xslt/element/for-each/index.md
index d3de79652db31f..ab7fd8183bb56d 100644
--- a/files/ja/web/xslt/element/for-each/index.md
+++ b/files/ja/web/xslt/element/for-each/index.md
@@ -3,7 +3,7 @@ title: <xsl:for-each>
slug: Web/XSLT/Element/for-each
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:for-each>` 要素は一連のノードを選択し、それぞれのノードを同じ方法で処理します。これはノードのセットを反復処理したり、現在のノードを変更したりするためによく使用されます。1 つ以上の `<xsl:sort>` 要素がこの要素の子として表示される場合、処理の前にソートが行われます。それ以外の場合、ノードはドキュメント順に処理されます。
diff --git a/files/ja/web/xslt/element/if/index.md b/files/ja/web/xslt/element/if/index.md
index c18c087f4a4fb7..054354fe565b5e 100644
--- a/files/ja/web/xslt/element/if/index.md
+++ b/files/ja/web/xslt/element/if/index.md
@@ -3,7 +3,7 @@ title: <xsl:if>
slug: Web/XSLT/Element/if
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:if>` 要素にはテスト属性とテンプレートが含まれています。テストが真と評価された場合、テンプレートは処理されます。これは、他の言語の if 文に似ています。ただし、if-then-else ステートメントの機能を実現するには、`<xsl:when>` と `<xsl:otherwise>` の子要素を 1 つずつ持つ `<xsl:choose>` 要素を使用します。
diff --git a/files/ja/web/xslt/element/import/index.md b/files/ja/web/xslt/element/import/index.md
index a570706d43afc5..13f9f2699482ff 100644
--- a/files/ja/web/xslt/element/import/index.md
+++ b/files/ja/web/xslt/element/import/index.md
@@ -3,7 +3,7 @@ title: <xsl:import>
slug: Web/XSLT/Element/import
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:import>` 要素はあるスタイルシートの内容を別のスタイルシートにインポートするための最上位要素です。一般に、インポートしたスタイルシートの内容は、インポートするスタイルシートの内容よりもインポートの優先度が低くなります。これは `<xsl:include>` とは対照的です。ここでインクルードされたスタイルシートの内容は、インクルードするスタイルシートの内容とまったく同じです。
diff --git a/files/ja/web/xslt/element/include/index.md b/files/ja/web/xslt/element/include/index.md
index 79a550b6df0bdb..5de1397392331d 100644
--- a/files/ja/web/xslt/element/include/index.md
+++ b/files/ja/web/xslt/element/include/index.md
@@ -3,7 +3,7 @@ title: <xsl:include>
slug: Web/XSLT/Element/include
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:include>` 要素はあるスタイルシートの内容を別のスタイルシートにマージします。`<xsl:import>` の場合とは異なり、インクルードされたスタイルシートの内容はインクルードするスタイルシートの内容とまったく同じです。
diff --git a/files/ja/web/xslt/element/key/index.md b/files/ja/web/xslt/element/key/index.md
index 85f3afdec0bf32..db833eeed7e9f2 100644
--- a/files/ja/web/xslt/element/key/index.md
+++ b/files/ja/web/xslt/element/key/index.md
@@ -3,7 +3,7 @@ title: <xsl:key>
slug: Web/XSLT/Element/key
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:key>`要素は、`key( )`関数を使用してスタイルシートの他の場所で使用できる名前付きキーを宣言します。
diff --git a/files/ja/web/xslt/element/message/index.md b/files/ja/web/xslt/element/message/index.md
index f606fd7955978b..0f3e25c3992f64 100644
--- a/files/ja/web/xslt/element/message/index.md
+++ b/files/ja/web/xslt/element/message/index.md
@@ -3,7 +3,7 @@ title: <xsl:message>
slug: Web/XSLT/Element/message
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:message>` 要素は (NS の JavaScript コンソールに) メッセージを出力し、オプションでスタイルシートの実行を終了します。これはデバッグに便利です。
diff --git a/files/ja/web/xslt/element/namespace-alias/index.md b/files/ja/web/xslt/element/namespace-alias/index.md
index 24601fc554d928..0dbc864ce529ac 100644
--- a/files/ja/web/xslt/element/namespace-alias/index.md
+++ b/files/ja/web/xslt/element/namespace-alias/index.md
@@ -3,7 +3,7 @@ title: <xsl:namespace-alias>
slug: Web/XSLT/Element/namespace-alias
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:namespace-alias>` 要素はスタイルシート内の名前空間を出力ツリー内の別の名前空間にマップする、めったに使用されないデバイスです。 この要素の最も一般的な使い方は、別のスタイルシートからスタイルシートを生成することです。通常は `xsl:`-prefixed リテラルの result 要素 (結果ツリーにそのままコピーする必要があります) がプロセッサによって誤解されるのを防ぐため、出力ツリーの XSLT 名前空間に適切に再変換される一時的な名前空間が割り当てられます。
diff --git a/files/ja/web/xslt/element/number/index.md b/files/ja/web/xslt/element/number/index.md
index 7c8365396d850f..b4a4fc86569c7b 100644
--- a/files/ja/web/xslt/element/number/index.md
+++ b/files/ja/web/xslt/element/number/index.md
@@ -3,7 +3,7 @@ title: <xsl:number>
slug: Web/XSLT/Element/number
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:number>` 要素は物事を順番に数えます。 また、番号をすばやくフォーマットするためにも使用できます。
diff --git a/files/ja/web/xslt/element/otherwise/index.md b/files/ja/web/xslt/element/otherwise/index.md
index 256fe52465f894..f14736f21c2ade 100644
--- a/files/ja/web/xslt/element/otherwise/index.md
+++ b/files/ja/web/xslt/element/otherwise/index.md
@@ -3,7 +3,7 @@ title: <xsl:otherwise>
slug: Web/XSLT/Element/otherwise
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:otherwise>` 要素は `<xsl:when>` 条件のいずれも適用されない場合に実行されるアクションを定義するために使用されます。他のプログラミング言語の `else` または `default` の場合と似ています。
diff --git a/files/ja/web/xslt/element/output/index.md b/files/ja/web/xslt/element/output/index.md
index 6d9851de9e723d..9aafff34b00bf4 100644
--- a/files/ja/web/xslt/element/output/index.md
+++ b/files/ja/web/xslt/element/output/index.md
@@ -3,7 +3,7 @@ title: <xsl:output>
slug: Web/XSLT/Element/output
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:output>` 要素は出力文書の特性を制御します。Netscape で正しく機能するには、method 属性を持つこの要素を使用する必要があります。 7.0 より `method="text"` は期待通りに機能します。
diff --git a/files/ja/web/xslt/element/param/index.md b/files/ja/web/xslt/element/param/index.md
index ceabc8a4dad500..0c43e68b7c0424 100644
--- a/files/ja/web/xslt/element/param/index.md
+++ b/files/ja/web/xslt/element/param/index.md
@@ -3,7 +3,7 @@ title: <xsl:param>
slug: Web/XSLT/Element/param
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:param>` 要素はパラメータを名前で設定し、オプションでそのパラメータのデフォルト値を設定します。最上位要素として使用される場合、パラメータはグローバルです。`<xsl:template>` 要素内で使用される場合、パラメータはそのテンプレートに対してローカルです。この場合、テンプレートの最初の子要素でなければなりません。
diff --git a/files/ja/web/xslt/element/preserve-space/index.md b/files/ja/web/xslt/element/preserve-space/index.md
index 71843dddd71a4f..8dbea65c02dbb4 100644
--- a/files/ja/web/xslt/element/preserve-space/index.md
+++ b/files/ja/web/xslt/element/preserve-space/index.md
@@ -3,7 +3,7 @@ title: <xsl:preserve-space>
slug: Web/XSLT/Element/preserve-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:preserve-space>` 要素は空白を保存する要素をソース文書内で定義します。複数の要素がある場合は、名前を空白文字で区切ります。空白を保持するのがデフォルト設定なので、この要素は `<xsl:strip-space>` 要素を打ち消すために使用する必要があります。
diff --git a/files/ja/web/xslt/element/processing-instruction/index.md b/files/ja/web/xslt/element/processing-instruction/index.md
index c6388fe6ed1dd9..cb14173b5a8c53 100644
--- a/files/ja/web/xslt/element/processing-instruction/index.md
+++ b/files/ja/web/xslt/element/processing-instruction/index.md
@@ -3,7 +3,7 @@ title: <xsl:processing-instruction>
slug: Web/XSLT/Element/processing-instruction
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:processing-instruction>` 要素は処理命令を出力文書に書き込みます。
diff --git a/files/ja/web/xslt/element/sort/index.md b/files/ja/web/xslt/element/sort/index.md
index 1537a409430c31..531622bae74440 100644
--- a/files/ja/web/xslt/element/sort/index.md
+++ b/files/ja/web/xslt/element/sort/index.md
@@ -3,7 +3,7 @@ title: <xsl:sort>
slug: Web/XSLT/Element/sort
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:sort>` 要素は、`<xsl:apply-templates>` または `<xsl:for-each>` で選択されたノードのソートキーを定義し、それらが処理される順序を決定します。
diff --git a/files/ja/web/xslt/element/strip-space/index.md b/files/ja/web/xslt/element/strip-space/index.md
index fd9f5841e7f63f..3be5ea5c201923 100644
--- a/files/ja/web/xslt/element/strip-space/index.md
+++ b/files/ja/web/xslt/element/strip-space/index.md
@@ -3,7 +3,7 @@ title: <xsl:strip-space>
slug: Web/XSLT/Element/strip-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:strip-space>` 要素は空白を削除する必要があるソースドキュメント内の要素を定義します。
diff --git a/files/ja/web/xslt/element/template/index.md b/files/ja/web/xslt/element/template/index.md
index e462bb8b91079d..f985aad8aa9851 100644
--- a/files/ja/web/xslt/element/template/index.md
+++ b/files/ja/web/xslt/element/template/index.md
@@ -3,7 +3,7 @@ title: <xsl:template>
slug: Web/XSLT/Element/template
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:template>` 要素は出力生成テンプレートを定義します。この要素は、match 属性または name 属性のいずれかを持つ必要があります。
diff --git a/files/ja/web/xslt/element/text/index.md b/files/ja/web/xslt/element/text/index.md
index ee71c623a05f38..f53bbb175c8927 100644
--- a/files/ja/web/xslt/element/text/index.md
+++ b/files/ja/web/xslt/element/text/index.md
@@ -3,7 +3,7 @@ title: <xsl:text>
slug: Web/XSLT/Element/text
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:text>` 要素はリテラルテキストを出力ツリーに書き込みます。 `#PCDATA`、リテラルテキスト、およびエンティティ参照を含むことがあります。
diff --git a/files/ja/web/xslt/element/transform/index.md b/files/ja/web/xslt/element/transform/index.md
index ac0d7c19a0b7ff..bed9c8d556e35f 100644
--- a/files/ja/web/xslt/element/transform/index.md
+++ b/files/ja/web/xslt/element/transform/index.md
@@ -3,7 +3,7 @@ title: <xsl:transform>
slug: Web/XSLT/Element/transform
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
The `<xsl:transform>` 要素は [`<xsl:stylesheet>`](/ja/docs/XSLT/Elements/stylesheet) 要素とまったく同じです。
diff --git a/files/ja/web/xslt/element/value-of/index.md b/files/ja/web/xslt/element/value-of/index.md
index 3642f00e5ebabb..943b43ba9e3cf6 100644
--- a/files/ja/web/xslt/element/value-of/index.md
+++ b/files/ja/web/xslt/element/value-of/index.md
@@ -3,7 +3,7 @@ title: <xsl:value-of>
slug: Web/XSLT/Element/value-of
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:value-of>` 要素は XPath 式を評価し、それを文字列に変換し、その文字列を result tree に書きます。
diff --git a/files/ja/web/xslt/element/variable/index.md b/files/ja/web/xslt/element/variable/index.md
index 5879b736e62fde..e6e66ca20e492f 100644
--- a/files/ja/web/xslt/element/variable/index.md
+++ b/files/ja/web/xslt/element/variable/index.md
@@ -3,7 +3,7 @@ title: <xsl:variable>
slug: Web/XSLT/Element/variable
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:variable>` 要素はスタイルシートにグローバル変数またはローカル変数を宣言し、値を与えます。XSLT は副作用を許さないため、変数の値が設定されると、変数がスコープから外れるまでは変わりません
diff --git a/files/ja/web/xslt/element/when/index.md b/files/ja/web/xslt/element/when/index.md
index c3cba155b7aa45..0a539d5700d7a9 100644
--- a/files/ja/web/xslt/element/when/index.md
+++ b/files/ja/web/xslt/element/when/index.md
@@ -3,7 +3,7 @@ title: <xsl:when>
slug: Web/XSLT/Element/when
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:when>` 要素は `<xsl:choose>` 要素内に常に表示され、case 文のように動作します。
diff --git a/files/ja/web/xslt/element/with-param/index.md b/files/ja/web/xslt/element/with-param/index.md
index cc429b670e2fae..311045172ed6cf 100644
--- a/files/ja/web/xslt/element/with-param/index.md
+++ b/files/ja/web/xslt/element/with-param/index.md
@@ -3,7 +3,7 @@ title: <xsl:with-param>
slug: Web/XSLT/Element/with-param
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:with-param>` 要素はテンプレートに渡すパラメータの値を設定します。
diff --git a/files/ja/web/xslt/pi_parameters/index.md b/files/ja/web/xslt/pi_parameters/index.md
index 0612dbac353af9..d128b7488b2d64 100644
--- a/files/ja/web/xslt/pi_parameters/index.md
+++ b/files/ja/web/xslt/pi_parameters/index.md
@@ -3,6 +3,8 @@ title: PIパラメータ
slug: Web/XSLT/PI_Parameters
---
+{{XsltSidebar}}
+
### 概要
XSLT は実行時にパラメータをスタイルシートに渡すという概念をサポートしています。これによりしばらくの間は JavaScript で [XSLTProcessor](/ja/docs/Web/API/XSLTProcessor) を使用することが可能です。しかし、 `<?xml-stylesheet?>` 処理命令（PI）を使用するときは、パラメータを提供する方法がありませんでした。
diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md
index 986f7f1c946520..3842a5990c8c45 100644
--- a/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md
+++ b/files/ja/web/xslt/transforming_xml_with_xslt/an_overview/index.md
@@ -3,6 +3,8 @@ title: XSLT の概要
slug: Web/XSLT/Transforming_XML_with_XSLT/An_Overview
---
+{{XsltSidebar}}
+
[« Transforming XML with XSLT](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT)
eXtensible Stylesheet Language/Transform は非常に強力な言語であり、この記事の全体的な議論はこの記事の範囲をはるかに超えていますが、基本的な概念の簡単な説明は Netscape の機能の説明の理解に役立ちます。
diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md
index d01e8962901f0c..8d438ec907dcbd 100644
--- a/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md
+++ b/files/ja/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: e14e4830bcd43de164623aaf787fbd695be31d91
---
+{{XsltSidebar}}
+
[« Transforming XML with XSLT](/ja/docs/Web/XSLT/Transforming_XML_with_XSLT)
## 印刷物
diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
index 76cbd33ede2b1f..9fe781673dfa49 100644
--- a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
+++ b/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
@@ -3,6 +3,8 @@ title: Netscape XSLT/XPath リファレンス
slug: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
---
+{{XsltSidebar}}
+
次のリストは W3C の XSLT 1.0 勧告と、XPath 勧告に適したセクションの要素、axes、関数にアルファベット順に注釈をつけたものです。XSLT プロセッサの開発は進行中です。また、機能の拡張と共にこのドキュメントも更新されます。
### 要素
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index 95f7229966658c..c874592be86e09 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -513,6 +513,8 @@
/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /ko/docs/Web/API/setTimeout
/ko/docs/Web/API/WindowTimers/setTimeout /ko/docs/Web/API/setTimeout
/ko/docs/Web/API/XMLHttpRequest/timeout /ko/docs/Web/API/XMLHttpRequest/timeout_event
+/ko/docs/Web/API/atob /ko/docs/Web/API/Window/atob
+/ko/docs/Web/API/btoa /ko/docs/Web/API/Window/btoa
/ko/docs/Web/API/console/assert /ko/docs/Web/API/console/assert_static
/ko/docs/Web/API/console/clear /ko/docs/Web/API/console/clear_static
/ko/docs/Web/API/console/count /ko/docs/Web/API/console/count_static
@@ -805,6 +807,9 @@
/ko/docs/Web/SVG/Tutorial/기본_도형 /ko/docs/Web/SVG/Tutorial/Basic_Shapes
/ko/docs/Web/SVG/Tutorial/시작하기 /ko/docs/Web/SVG/Tutorial/Getting_Started
/ko/docs/Web/SVG/Tutorial/위치 /ko/docs/Web/SVG/Tutorial/Positions
+/ko/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content /ko/docs/orphaned/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
+/ko/docs/Web/Security/Securing_your_site /ko/docs/Web/Security/Practical_implementation_guides
+/ko/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /ko/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
/ko/docs/Web/WebGL /ko/docs/Web/API/WebGL_API
/ko/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
/ko/docs/Web/WebGL/Animating_objects_with_WebGL /ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
diff --git a/files/ko/glossary/semantics/index.md b/files/ko/glossary/semantics/index.md
index 88c50a57157323..b1761f705dd198 100644
--- a/files/ko/glossary/semantics/index.md
+++ b/files/ko/glossary/semantics/index.md
@@ -35,7 +35,7 @@ CSS의 경우, 다양한 종류의 과일을 나타내기 위해서는 리스트
이렇게 하면 최상위 제목처럼 보이도록 렌더링되지만, 의미적 가치가 없으므로 위에서 설명한 것처럼 추가적인 이점은 얻을 수 없습니다. 따라서 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다.
-HTML은 채워질 '데이터'를 나타내도록 코딩해야 합니다. 기본 프리젠테이션 스타일기반이 아닙니다. 프레젠테이션(어떻게 보여져야만 하는가)은 [CSS](/ko/docs/Web/CSS)만의 단독 역할입니다.
+HTML은 채워질 '데이터'를 나타내도록 코딩해야 합니다. 기본 프레젠테이션 스타일기반이 아닙니다. 프레젠테이션(어떻게 보여져야만 하는가)은 [CSS](/ko/docs/Web/CSS)만의 단독 역할입니다.
의미론적인 마크업을 사용하면 아래와 같은 이점이 있습니다.
diff --git a/files/ko/glossary/simd/index.md b/files/ko/glossary/simd/index.md
index 46752e0713a5b0..b51108c6178600 100644
--- a/files/ko/glossary/simd/index.md
+++ b/files/ko/glossary/simd/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
+{{GlossarySidebar}}
+
SIMD ("sim-dee"로 발음합니다)는 [컴퓨터 구조 분류](https://en.wikipedia.org/wiki/Flynn%27s_taxonomy) 중 하나인 단일 명령어/복수 데이터(**Single Instruction/Multiple Data**)의 단축입니다. SIMD는 같은 연산 하나가 결과상 데이터 레벨 병렬화 및 성능 향상이 되는 여러 데이터 요소에 수행될 수 있게 합니다. 예를 들어, 3D 그래픽스 및 비디오 처리, 물리 시뮬레이션 또는 암호화 및 다른 도메인을 들 수 있습니다.
명령어 또는 데이터 집합 내 병렬화 없는 순차 구조의 경우 {{Glossary("SISD")}}를 참조하세요.
diff --git a/files/ko/glossary/sql/index.md b/files/ko/glossary/sql/index.md
index 443985d3e17a57..3ea267d77feb19 100644
--- a/files/ko/glossary/sql/index.md
+++ b/files/ko/glossary/sql/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
+{{GlossarySidebar}}
+
**SQL** (구조화 질의어, Structured Query Language)은 테이블 기반 데이터베이스에서 데이터를 갱신, 수집, 계산하기 위해 디자인된 설명적 컴퓨터 언어입니다.
## 같이 보기
diff --git a/files/ko/glossary/ssl/index.md b/files/ko/glossary/ssl/index.md
index b520f1c852b864..4c4d9bb80b2ae3 100644
--- a/files/ko/glossary/ssl/index.md
+++ b/files/ko/glossary/ssl/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
+{{GlossarySidebar}}
+
보안 소켓 계층(SSL, Secure Sockets Layer)는 클라이언트와 서버 간의 안전한 링크를 통해 송수신되는 모든 데이터를 안전하게 보장하는 과거의 보안 표준 기술이었습니다. SSL 버전 3.0은 Netscape가 1996년에 발표했으며, 현재는 {{Glossary("TLS", "전송 계층 보안 (TLS, Transport Layer Security)")}}로 대체되었습니다.
## 같이 보기
diff --git a/files/ko/learn/accessibility/index.md b/files/ko/learn/accessibility/index.md
index 30ee1c91e0ee19..b3a85a6bbfae5c 100644
--- a/files/ko/learn/accessibility/index.md
+++ b/files/ko/learn/accessibility/index.md
@@ -13,7 +13,7 @@ slug: Learn/Accessibility
> **참고:**
>
-> 당신은 당신이 당신의 자신의 파일을 생성 할 수 있는 기능이 없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은 [JSBin](http://jsbin.com/) 또는 [Thimble](https://thimble.mozilla.org/) 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할 수 있습니다.
+> 당신은 당신이 당신의 자신의 파일을 생성 할 수 있는 기능이 없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할 수 있습니다.
## 가이드
diff --git a/files/ko/learn/common_questions/design_and_accessibility/html_features_for_accessibility/index.md b/files/ko/learn/common_questions/design_and_accessibility/html_features_for_accessibility/index.md
index 37b080d65699d8..4db91b2b02b023 100644
--- a/files/ko/learn/common_questions/design_and_accessibility/html_features_for_accessibility/index.md
+++ b/files/ko/learn/common_questions/design_and_accessibility/html_features_for_accessibility/index.md
@@ -3,6 +3,8 @@ title: 어떤 HTML 기능이 접근성을 촉진할까?
slug: Learn/Common_questions/Design_and_accessibility/HTML_features_for_accessibility
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
이번 내용은 웹 페이지를 좀 더 서로 다른 장애를 가진 사람들에게 좀 더 접근하기 쉽게 만들 수 있는 HTML의 특정한 기능을 서술합니다.
## 탭(Tabbing)
diff --git a/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
index a2e7c970b0a29f..d88253892f14fb 100644
--- a/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
+++ b/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
@@ -3,6 +3,8 @@ title: 나의 웹사이트를 설계하기 위해서는?
slug: Learn/Common_questions/Design_and_accessibility/Thinking_before_coding
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
이 글은 모든 프로젝트에서 중요한 첫 단계 - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.
<table class="learn-box standard-table">
diff --git a/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
index e7b01929a4dca8..53e3e4119a3dcf 100644
--- a/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
+++ b/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
@@ -3,6 +3,8 @@ title: 로컬 테스트 서버 설치하기
slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
이 글에서는 간단한 로컬 테스트 서버를 여러분의 장비에 설치하는 법과 기본적인 사용법을 설명합니다.
<table class="learn-box standard-table">
diff --git a/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
index 913dcb35fef5f1..a4740514c8923e 100644
--- a/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -3,6 +3,8 @@ title: How do you upload files to a web server?
slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
본 글은 어떻게 {{Glossary("FTP")}} 도구를 사용하여 사이트를 발행(publish) 할 수 있는지를 다루고 있습니다.
<table class="learn-box standard-table">
diff --git a/files/ko/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/ko/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
index ad396b1820e60e..4c9222bd89082e 100644
--- a/files/ko/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
+++ b/files/ko/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
@@ -3,6 +3,8 @@ title: What software do I need to build a website?
slug: Learn/Common_questions/Tools_and_setup/What_software_do_I_need
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
이 글에서, 우리는 당신이 편집하고, 업로드하고, 웹사이트를 볼 때 어떤 소프트웨어 구성품이 필요한 지 제시한다.
<table class="learn-box nostripe standard-table">
diff --git a/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
index b00a4f9742379b..c6e143fda89fd4 100644
--- a/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
+++ b/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
@@ -3,6 +3,8 @@ title: 인터넷은 어떻게 동작하는가?
slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
이 글에서는 인터넷의 개념과 작동 원리에 대해 설명합니다.
<table class="learn-box standard-table">
diff --git a/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index e2e6a33cdb0e07..8a676bd7298119 100644
--- a/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -3,6 +3,8 @@ title: 웹페이지, 웹사이트, 웹서버 그리고 검색엔진의 차이는
slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
이번 글에서는 다양한 웹 관련 개념들을 이야기합니다: 웹, 페이지, 웹사이트, 웹서버, 검색엔진. 이런 용어들은 흔히 웹을 처음 배우는 사람이나 잘못 배운 사람들에게 혼란스럽습니다. 이것들이 무엇을 의미하는 지 배워봅시다!
<table class="learn-box standard-table">
diff --git a/files/ko/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md b/files/ko/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
index c96cae3499f597..e5c02a69ad2f2a 100644
--- a/files/ko/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
+++ b/files/ko/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
@@ -3,6 +3,8 @@ title: What are hyperlinks?
slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
이 글에서, 우리는 하이퍼링크가 무엇이고 왜 중요한지를 살필 것이다.
<table class="learn-box standard-table">
diff --git a/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
index 7b9fd617e20e5d..45621b07f8bafc 100644
--- a/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
+++ b/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
@@ -3,6 +3,8 @@ title: 웹 서버란 무엇일까?
slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
여기서 우리는 웹 서버가 무엇인지, 어떻게 동작하는지, 왜 중요한지를 알아볼 것입니다.
<table class="learn-box standard-table">
diff --git a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md
index 593789b3abd512..059956cbfd7c76 100644
--- a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -50,7 +50,8 @@ CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 ba
105deg,
rgba(255, 255, 255, 0.2) 39%,
rgba(51, 56, 57, 1) 96%
- ) center center / 400px 200px no-repeat,
+ )
+ center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}
diff --git a/files/ko/learn/css/building_blocks/index.md b/files/ko/learn/css/building_blocks/index.md
index 1508cab7af6fea..d487ff206ac2b7 100644
--- a/files/ko/learn/css/building_blocks/index.md
+++ b/files/ko/learn/css/building_blocks/index.md
@@ -18,7 +18,7 @@ slug: Learn/CSS/Building_blocks
3. [HTML 소개](/ko/docs/Learn/HTML/Introduction_to_HTML) 과목에서 설명한 HTML 에 대한 기본적인 친숙성.
4. [CSS 첫 번째 단계](/ko/docs/Learn/CSS/First_steps) 과목에서 논의된 CSS 의 기본 사항에 대한 이해.
-> **참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, [JSBin](http://jsbin.com/) 또는 [Thimble](https://thimble.mozilla.org/) 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.
+> **참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) 또는 [Glitch](https://glitch.com/) 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.
## 안내
diff --git a/files/ko/learn/css/css_layout/index.md b/files/ko/learn/css/css_layout/index.md
index 8beed86dc67afa..d2084bc8a617e5 100644
--- a/files/ko/learn/css/css_layout/index.md
+++ b/files/ko/learn/css/css_layout/index.md
@@ -17,7 +17,7 @@ l10n:
2. [CSS 소개](/ko/docs/Learn/CSS/Introduction_to_CSS) 과정에서 논의한 대로 CSS 기본 사항에 대해 익숙해야 합니다.
3. [박스 스타일 지정](/ko/docs/Learn/CSS/Styling_boxes) 방법에 대한 이해가 있어야 합니다.
-> **참고:** 직접 파일을 생성할 수 없는 컴퓨터/태블릿/기타 장치에서 작업하고 있는 경우, [JSBin](http://jsbin.com/)나 [Glitch](https://glitch.com/)과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
+> **참고:** 직접 파일을 생성할 수 없는 컴퓨터/태블릿/기타 장치에서 작업하고 있는 경우, [JSBin](https://jsbin.com/)나 [Glitch](https://glitch.com/)과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
## 안내서
diff --git a/files/ko/learn/css/first_steps/index.md b/files/ko/learn/css/first_steps/index.md
index 17bf90a3502412..c39d7f3bca59ce 100644
--- a/files/ko/learn/css/first_steps/index.md
+++ b/files/ko/learn/css/first_steps/index.md
@@ -15,7 +15,7 @@ CSS (Cascading Style Sheets) 는 콘텐츠의 글꼴, 색상, 크기 및 간격
2. [기본 소프트웨어 설치](/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software) 에서 자세히 설명한 대로 설정된 기본 작업 환경과 [파일 다루기](/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files) 에서 자세히 설명한 대로 파일을 생성하고 관리하는 방법을 이해합니다.
3. [HTML 소개](/ko/docs/Learn/HTML/Introduction_to_HTML) 에서 설명한 바와 같이 HTML에 대한 기본적인 친숙성입니다.
-> **참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, [JSBin](http://jsbin.com/) 또는 [Glitch](https://glitch.com/) 와 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
+> **참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 와 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
## 안내
diff --git a/files/ko/learn/css/howto/generated_content/index.md b/files/ko/learn/css/howto/generated_content/index.md
index 371c54b6eec9e6..285213e9ae12b4 100644
--- a/files/ko/learn/css/howto/generated_content/index.md
+++ b/files/ko/learn/css/howto/generated_content/index.md
@@ -3,6 +3,8 @@ title: 내용물
slug: Learn/CSS/Howto/Generated_content
---
+{{LearnSidebar}}
+
> **경고:** 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
[CSS 시작하기](/en/CSS/Getting_Started) 안내서 9번째 장; 이번에는 CSS에서Document에 표시될 내용물을 추가 하는 방법을 알아보자. stylesheet를 수정해서 텍스트 내용과 이미지를 수정해 보자.
diff --git a/files/ko/learn/css/styling_text/index.md b/files/ko/learn/css/styling_text/index.md
index bf474ae3bb9625..9c4fb912720753 100644
--- a/files/ko/learn/css/styling_text/index.md
+++ b/files/ko/learn/css/styling_text/index.md
@@ -11,7 +11,7 @@ CSS 기초가 어느 정도 완성되었다면, 여러분이 집중해야 할
이 강의를 시작하기 전에, [HTML 소개](/ko/docs/Learn/HTML/Introduction_to_HTML) 에서 설명한대로 이미 HTML 에 대해 잘 알고 있어야하며, [CSS 소개](/ko/docs/Learn/CSS/Introduction_to_CSS) 에서 설명한대로 CSS 기본 사항에 익숙해야합니다.
-> **참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, [JSBin](http://jsbin.com/), [CodePen](https://codepen.io/) 또는 [Thimble](https://thimble.mozilla.org/) 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.
+> **참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.
## 안내
diff --git a/files/ko/learn/forms/html5_input_types/index.md b/files/ko/learn/forms/html5_input_types/index.md
index d321316e8ddefe..58c9d5e52b62da 100644
--- a/files/ko/learn/forms/html5_input_types/index.md
+++ b/files/ko/learn/forms/html5_input_types/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303
---
+{{LearnSidebar}}
+
[이전 글](/ko/docs/Learn/Forms/Basic_native_form_controls)에서는 초기 HTML 시대부터 사용 가능한 `type` 속성의 원래 값을 사용하여 {{htmlelement("input")}} 요소를 살펴보았습니다. 이제 HTML5에서 추가된 특정 유형의 데이터 수집을 허용하기 위해 추가된 몇 가지 새로운 입력 유형을 포함하여 더 많은 폼 컨트롤의 기능에 대해 자세히 살펴보겠습니다.
<table>
diff --git a/files/ko/learn/forms/index.md b/files/ko/learn/forms/index.md
index dbdcbda241d98a..e59e8f552742c7 100644
--- a/files/ko/learn/forms/index.md
+++ b/files/ko/learn/forms/index.md
@@ -3,6 +3,8 @@ title: HTML 폼 가이드
slug: Learn/Forms
---
+{{LearnSidebar}}
+
이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!
## 항목
diff --git a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.md
index 2dec48830746a8..475c387c7a6ab7 100644
--- a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -50,7 +50,7 @@ HTML, CSS 그리고 JavaScript 를 입력할 수 있게 하고 웹사이트로
- [JSFiddle](https://jsfiddle.net/)
- [Thimble](https://thimble.webmaker.org/)
-- [JSBin](http://jsbin.com/)
+- [JSBin](https://jsbin.com/)
diff --git a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md
index 7281c381101fc7..b878cc1aa06e2f 100644
--- a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md
+++ b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -3,6 +3,8 @@ title: Tips for Authoring Fast-loading HTML Pages
slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
---
+{{QuickLinksWithSubpages("/ko/docs/Learn/HTML/Howto")}}
+
Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.
최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.
diff --git a/files/ko/learn/html/howto/use_data_attributes/index.md b/files/ko/learn/html/howto/use_data_attributes/index.md
index 9d1ac4252eac3a..62cb9f30e6714c 100644
--- a/files/ko/learn/html/howto/use_data_attributes/index.md
+++ b/files/ko/learn/html/howto/use_data_attributes/index.md
@@ -62,9 +62,9 @@ article[data-columns="4"] {
}
```
-[JSBin 예제](http://jsbin.com/ujiday/2/edit)에서 함께 작동하는 것을 볼 수 있습니다.
+[JSBin 예제](https://jsbin.com/ujiday/2/edit)에서 함께 작동하는 것을 볼 수 있습니다.
-데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS 선택자와 JavaScript 접근을 이용해서, display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 [이 screencast](http://www.youtube.com/watch?v=On_WyUB1gOk)를 확인하세요([JSBin 예제](http://jsbin.com/atawaz/3/edit)).
+데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS 선택자와 JavaScript 접근을 이용해서, display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 [이 screencast](http://www.youtube.com/watch?v=On_WyUB1gOk)를 확인하세요([JSBin 예제](https://jsbin.com/atawaz/3/edit)).
데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.
diff --git a/files/ko/learn/html/introduction_to_html/index.md b/files/ko/learn/html/introduction_to_html/index.md
index 985646d0b20eda..3043a0c5c066e2 100644
--- a/files/ko/learn/html/introduction_to_html/index.md
+++ b/files/ko/learn/html/introduction_to_html/index.md
@@ -13,7 +13,7 @@ l10n:
이번 과정을 시작하기 전에, HTML에 대한 사전 지식은 필요하지 않습니다만, 기본적으로 컴퓨터 사용에 친숙해야 하고, 웹사이트의 콘텐츠를 탐색하는 정도의 웹을 사용할 줄 알아야 합니다. [기본 소프트웨어 설치](/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software)에 있는 기본적인 작업 환경이 구축되어 있어야 하고, [파일 다루기](/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files)에 있는 파일을 생성하고 관리하는 방법을 이해하고 있어야 합니다. 이 두가지 내용은 [웹 시작하기](/ko/docs/Learn/Getting_started_with_the_web)를 위한 초급 과정입니다.
-> **참고:** 혹시, 파일을 생성하기 힘든 컴퓨터/테블릿 혹은 다른 기기에서 작업한다면, [JSBin](http://jsbin.com/) 이나 [Thimble](https://thimble.mozilla.org/) 같은 온라인 코딩 프로그램을 이용하여 대부분의 코드 예제를 작성해 볼 수 있습니다.
+> **참고:** 혹시, 파일을 생성하기 힘든 컴퓨터/테블릿 혹은 다른 기기에서 작업한다면, [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) 이나 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램을 이용하여 대부분의 코드 예제를 작성해 볼 수 있습니다.
> **알림:**
>
diff --git a/files/ko/learn/html/tables/index.md b/files/ko/learn/html/tables/index.md
index b005599ba992e2..90a7b9f325b8d5 100644
--- a/files/ko/learn/html/tables/index.md
+++ b/files/ko/learn/html/tables/index.md
@@ -11,7 +11,7 @@ HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화
이 모듈을 시작하기 전에, 당신은 이미 HTML의 기본 지식을 가지고 있어야 합니다. — [Introduction to HTML](/ko/docs/Learn/HTML/Introduction_to_HTML).
-> **참고:** 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 [JSBin](http://jsbin.com/) 또는 [Thimble](https://thimble.mozilla.org/) 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.
+> **참고:** 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.
## 가이드
diff --git a/files/ko/learn/javascript/building_blocks/index.md b/files/ko/learn/javascript/building_blocks/index.md
index db77cf13e08791..a29ff6db7e6464 100644
--- a/files/ko/learn/javascript/building_blocks/index.md
+++ b/files/ko/learn/javascript/building_blocks/index.md
@@ -13,7 +13,7 @@ slug: Learn/JavaScript/Building_blocks
시작하기 전에, 기본적인 [HTML](/ko/docs/Learn/HTML/Introduction_to_HTML)과 [CSS](/ko/docs/Learn/CSS/First_steps) 지식을 알고 계셔야 하고, 또한 지난 모듈인 [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)을 학습하셔야 합니다.
-> **참고:** 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타 장치), [JSBin](http://jsbin.com/)이나 [Glitch](https://glitch.com)에서 대부분의 예제를 시험해 볼 수 있습니다.
+> **참고:** 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타 장치), [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)에서 대부분의 예제를 시험해 볼 수 있습니다.
## 가이드
diff --git a/files/ko/learn/javascript/client-side_web_apis/index.md b/files/ko/learn/javascript/client-side_web_apis/index.md
index 1346f41cb05ab8..2e0676e76d13a3 100644
--- a/files/ko/learn/javascript/client-side_web_apis/index.md
+++ b/files/ko/learn/javascript/client-side_web_apis/index.md
@@ -13,7 +13,7 @@ slug: Learn/JavaScript/Client-side_web_APIs
[HTM](/ko/docs/Learn/HTML)과[CSS](/ko/docs/Learn/CSS)에 관한 기본지식이 있으면 좋습니다!
-> **참고:** 코드를 작성 할 수 없는 디바이스에서 작업하는 경우 [JSBin](http://jsbin.com/) 또는 [Thimble](https://thimble.mozilla.org/).과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
+> **참고:** 코드를 작성 할 수 없는 디바이스에서 작업하는 경우 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/).과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
## Guides
diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
index 93937feb72a6a5..ed7554e27b92b9 100644
--- a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
@@ -34,7 +34,7 @@ l10n:
- [HTML 예제 파일이 있는 사이트](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html)로 이동하여 파일을 복사하여 자기 컴퓨터에 새 디렉토리를 만들고 파일이름 `index.html` 로 저장합니다. 이 안에는 예제를 위한 CSS가 포함되어 있습니다.
- 또 다른 [가공 전의 텍스트가 있는 사이트](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt) 로 가서 별도의 브라우저 탭으로 열어 놓으세요. 이것은 나중에 필요합니다.
-위 방법 대신에, 여러분은 테스트에 [JSBin](http://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 `<script>` 엘리멘트를 넣을 수 있습니다.
+위 방법 대신에, 여러분은 테스트에 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 `<script>` 엘리멘트를 넣을 수 있습니다.
> **참고:** 문제가 해결되지 않으면 이 페이지 하단의 [평가 또는 추가 도움말](#assessment_or_further_help) 섹션을 참조해 도움을 요청하세요.
diff --git a/files/ko/learn/javascript/objects/index.md b/files/ko/learn/javascript/objects/index.md
index 65be4cd6fa1916..2997b6f22cb5a4 100644
--- a/files/ko/learn/javascript/objects/index.md
+++ b/files/ko/learn/javascript/objects/index.md
@@ -15,7 +15,7 @@ JavaScript에서는 배열과같은 기능부터 JavaScript 위에 구축된 브
JavaScript 객체에 대해 자세히 알아보려면, 기본 문법에 대해 어느 정도 능숙해야 합니다. 이 장을 읽기 전에 [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)과 [JavaScript 구성 요소](/ko/docs/Learn/JavaScript/Building_blocks)를 먼저 읽어보시기를 바랍니다.
-> **참고:** 컴퓨터/태블릿/혹은 다른 디바이스 상에서 스스로 파일을 만들수 없는 환경이라면, [JSBin](http://jsbin.com/) 또는 [Thimble](https://thimble.mozilla.org/) 과 같은 온라인 코딩 프로그램을 이용하여 (거의 모든) 예제 코드를 테스트해 보실 수 있습니다.
+> **참고:** 컴퓨터/태블릿/혹은 다른 디바이스 상에서 스스로 파일을 만들수 없는 환경이라면, [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 과 같은 온라인 코딩 프로그램을 이용하여 (거의 모든) 예제 코드를 테스트해 보실 수 있습니다.
## 가이드
diff --git a/files/ko/learn/server-side/first_steps/index.md b/files/ko/learn/server-side/first_steps/index.md
index a3014669bff989..5d01b25b6fbf9a 100644
--- a/files/ko/learn/server-side/first_steps/index.md
+++ b/files/ko/learn/server-side/first_steps/index.md
@@ -1,5 +1,5 @@
---
-title: Server-side website programming first steps
+title: 서버 사이드 웹사이트 프로그래밍 첫 걸음
slug: Learn/Server-side/First_steps
---
diff --git a/files/ko/learn/server-side/node_server_without_framework/index.md b/files/ko/learn/server-side/node_server_without_framework/index.md
index e17f0f22facc35..7ee19d8fdcf9c9 100644
--- a/files/ko/learn/server-side/node_server_without_framework/index.md
+++ b/files/ko/learn/server-side/node_server_without_framework/index.md
@@ -3,6 +3,8 @@ title: Node server without framework
slug: Learn/Server-side/Node_server_without_framework
---
+{{LearnSidebar}}
+
## 소개
물론 [Node](https://nodejs.org/en/) 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:
diff --git a/files/ko/mdn/at_ten/index.md b/files/ko/mdn/at_ten/index.md
index 84cd8b9aad5369..3e8aab2e4ba780 100644
--- a/files/ko/mdn/at_ten/index.md
+++ b/files/ko/mdn/at_ten/index.md
@@ -3,6 +3,8 @@ title: MDN at 10
slug: MDN/At_ten
---
+{{MDNSidebar}}
+
당신의 웹을 문서화 하는 것의 10주년을 기념하세요.
## MDN의 역사
diff --git a/files/ko/mdn/community/contributing/translated_content/index.md b/files/ko/mdn/community/contributing/translated_content/index.md
index 8f170bf4c91708..9b0c82a0ed8e24 100644
--- a/files/ko/mdn/community/contributing/translated_content/index.md
+++ b/files/ko/mdn/community/contributing/translated_content/index.md
@@ -9,8 +9,8 @@ slug: MDN/Community/Contributing/Translated_content
> **참고:** 한국어 이외의 로케일 목록은 [영어 문서](/ko/docs/MDN/Community/Contributing/Translated_content)를 참고하세요.
-- 토론: [Discord (#korean 채널)](/discord), [카카오톡 (MDN Korea 오픈채팅)](https://open.kakao.com/o/gdfG288c)
-- 현재 기여자: [hochan222](https://github.com/hochan222), [yechoi42](https://github.com/yechoi42), [cos18](https://github.com/cos18), [pje1740](https://github.com/pje1740), [wisedog](https://github.com/wisedog), [swimjiy](https://github.com/swimjiy), [jho2301](https://github.com/jho2301), [sunhpark42](https://github.com/sunhpark42), [1ilsang](https://github.com/1ilsang)
+- 토론: [Discord (#korean 채널)](/discord), [Google Groups (`yari-content-ko`)](https://groups.google.com/g/yari-content-ko)
+- 현재 기여자: [hochan222](https://github.com/hochan222), [yechoi42](https://github.com/yechoi42), [wisedog](https://github.com/wisedog), [sunhpark42](https://github.com/sunhpark42), [1ilsang](https://github.com/1ilsang)
## 같이 보기
diff --git a/files/ko/mozilla/index.md b/files/ko/mozilla/index.md
index 62e12c21722add..a6b25dbf186953 100644
--- a/files/ko/mozilla/index.md
+++ b/files/ko/mozilla/index.md
@@ -3,6 +3,8 @@ title: Mozilla
slug: Mozilla
---
+{{FirefoxSidebar}}
+
아래 목록에는 Mozilla 코드를 다운로드, 빌드하는 방법 뿐 아니라, 어떻게 코드가 동작하는지, Mozilla 애플리케이션의 애드-온을 어떻게 빌드하는지 등이 포함되어있습니다.
{{LandingPageListSubpages}}
diff --git a/files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md b/files/ko/orphaned/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
similarity index 95%
rename from files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
rename to files/ko/orphaned/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
index a846fe57248ddb..64756e916e34ee 100644
--- a/files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
+++ b/files/ko/orphaned/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
@@ -1,6 +1,7 @@
---
title: 차단된 혼합 콘텐츠가 있는 웹사이트를 고치는 방법
-slug: Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
+slug: orphaned/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
+original_slug: Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
l10n:
sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787
---
diff --git a/files/ko/web/accessibility/aria/index.md b/files/ko/web/accessibility/aria/index.md
index f8618587dcd6ee..0758909a00ac0e 100644
--- a/files/ko/web/accessibility/aria/index.md
+++ b/files/ko/web/accessibility/aria/index.md
@@ -3,6 +3,8 @@ title: ARIA
slug: Web/Accessibility/ARIA
---
+{{AccessibilitySidebar}}
+
**접근가능한 리치 인터넷 어플리케이션**(Accessible Rich Internet Applications, **ARIA**)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.
ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공합니다. 예를 들어 ARIA는 HTML4에서의 탐색 랜드마크, JavaScript 위젯, 폼 힌트 및 오류 메시지, 실시간 콘텐츠 업데이트 등을 접근 가능한 형태로 제공합니다.
diff --git a/files/ko/web/accessibility/index.md b/files/ko/web/accessibility/index.md
index 77555e94644ed0..c07272a68be45a 100644
--- a/files/ko/web/accessibility/index.md
+++ b/files/ko/web/accessibility/index.md
@@ -3,6 +3,8 @@ title: 접근성
slug: Web/Accessibility
---
+{{AccessibilitySidebar}}
+
웹 개발에서의 **접근성** 은 사람들의 능력이 어느 정도 제한되어 있더라도, 가능한 많은 사람이 웹사이트를 사용 할 수 있도록 하는 것 입니다.
많은 사람에게, 기술은 일을 더 쉽게 만들어줍니다. 장애를 가진 사람들에게, 기술은 일을 가능하게 만들어줍니다. 접근성은 개인의 신체적, 인지적 능력 및 웹에 접근하는 방법과 관계없이 가능한 한 접근할 수 있도록 콘텐츠를 개발하는 것을 의미합니다.
diff --git a/files/ko/web/accessibility/mobile_accessibility_checklist/index.md b/files/ko/web/accessibility/mobile_accessibility_checklist/index.md
index 77c6271c7d75a9..1ce8af2ae5661a 100644
--- a/files/ko/web/accessibility/mobile_accessibility_checklist/index.md
+++ b/files/ko/web/accessibility/mobile_accessibility_checklist/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: f6d04a43eadf5ab26a3488942dfb318b58234eb5
---
+{{AccessibilitySidebar}}
+
이 문서는 모바일 앱 개발자를 위해 접근성 요구 사항에 대한 간결한 체크리스트를 제공합니다. 이 문서는 다양한 패턴의 발생에 맞춰 지속적으로 진화하려는 의도로 작성되었습니다.
## 색
diff --git a/files/ko/web/accessibility/understanding_wcag/index.md b/files/ko/web/accessibility/understanding_wcag/index.md
index 1d540264840bf8..501d5c8622bded 100644
--- a/files/ko/web/accessibility/understanding_wcag/index.md
+++ b/files/ko/web/accessibility/understanding_wcag/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: b0870830e4c02596ca6c501f8f8b468a917eafc2
---
+{{AccessibilitySidebar}}
+
이 문서에서는 W3C 웹 컨텐츠 접근성 지침 2.0 또는 2.1(이 글에서는 WCAG)에 설명된 권장 사항들을 준수하기 위한 단계들을 이해하는 데에 도움이 되는 간략한 설명을 제공합니다.
WCAG 2.0과 2.1은 다양한 장애를 가진 사람들이 웹 컨텐츠에 더 쉽게 접근할 수 있게 하는 자세한 지침을 제공합니다. 포괄적이지만 매우 구체적이며, 빠르게 이해하기엔 다소 어려울 수 있습니다. 이런 복잡하고 어려운 권장 사항들을 충족하기 위한 단계들을 요약해 놓았으며, 상세 정보가 필요한 경우 링크를 제공합니다.
diff --git a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md
index 5dd8db552234b3..6accc2f994de91 100644
--- a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -3,6 +3,8 @@ title: 기본 애니메이션
slug: Web/API/Canvas_API/Tutorial/Basic_animations
---
+{{DefaultAPISidebar("Canvas API")}}
+
{{HTMLElement("canvas")}} 요소는 JavaScript로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.
도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.
diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/index.md b/files/ko/web/api/canvas_api/tutorial/compositing/index.md
index 921d2349473a59..5f79e75994d8c3 100644
--- a/files/ko/web/api/canvas_api/tutorial/compositing/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/compositing/index.md
@@ -3,6 +3,8 @@ title: 도형 합성
slug: Web/API/Canvas_API/Tutorial/Compositing
---
+{{DefaultAPISidebar("Canvas API")}}
+
이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데, `globalCompositeOperation` 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.
## `globalCompositeOperation`
diff --git a/files/ko/web/api/clients/claim/index.md b/files/ko/web/api/clients/claim/index.md
index 559d940331d139..6c98fe84ddc6a1 100644
--- a/files/ko/web/api/clients/claim/index.md
+++ b/files/ko/web/api/clients/claim/index.md
@@ -1,31 +1,38 @@
---
-title: Clients.claim()
+title: "Clients: claim() 메서드"
+short-title: claim()
slug: Web/API/Clients/claim
+l10n:
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
---
-{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}
+{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}}
-{{domxref("Clients")}} 의 **`claim()`** 메소드는 active 서비스워커가 그것의 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 를 가지는 모든 클라이언트들의 {{domxref("ServiceWorkerContainer.controller", "controller")}} 로서 자신을 등록하는 것을 허용한다. 이것은 이 서비스워커가 제어하게 될 클라이언트들에 "`controllerchange`" 이벤트를 발생시킨다.
+{{domxref("Clients")}} 인터페이스의 **`claim()`** 메서드는 활성화된 서비스 워커가 자신의 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 내 모든 클라이언트의 {{domxref("ServiceWorkerContainer.controller", "controller")}}로 설정될 수 있습니다.
+이렇게 하면 이 서비스 워커가 제어하는 클라이언트에서 {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}}에 "`controllerchange`" 이벤트가 트리거됩니다.
-서비스워커가 최초에 등록되면, 페이지들은 다음 로드시까지 그것을 사용하지 않을 것이다. `claim()` 메소드는 그 페이지들을 즉시 제어될 수 있도록 한다. 이로 인해, 당신의 서비스워커는 네트워크 또는 다른 서비스워커를 통해 정기적으로 로드되는 페이지들을 제어하게 된다.
+서비스 워커가 처음 등록될 때, 페이지는 다음에 로드될 때까지 해당 서비스 워커를 사용하지 않습니다.
+`claim()` 메서드는 이런 페이지가 즉시 제어되도록 합니다.
+이로 인해 서비스 워커가 네트워크를 통해 정기적으로 로드된 페이지나
+다른 서비스 워커를 통해 로드된 페이지를 제어하게 됩니다.
-## Syntax
+## 구문
-```js
-await clients.claim();
+```js-nolint
+claim()
```
-### Parameters
+### 매개변수
-None.
+없음.
-### Returns
+### 반환 값
-A {{jsxref("Promise")}} for `void`.
+`undefined`로 이행되는 {{jsxref("Promise")}}.
-## Example
+## 예제
-다음 예시는 서비스워커의 "`activate`" 이벤트 리스너에서 `claim()` 를 사용하므로, fetch 들이 이 서비스워커를 통과하기 전에 동일한 스코프에서 로드된 클라이언트들은 다시 로드될 필요가 없다. .
+다음 예제는 서비스 워커의 "`activate`" 이벤트 수신기 내에서 `claim()`을 사용하여 동일한 범위 내에서 로드된 클라이언트가 이 서비스 워커를 통해 페치를 수행하기 전에 다시 로드될 필요가 없도록 합니다.
```js
self.addEventListener("activate", (event) => {
@@ -41,10 +48,8 @@ self.addEventListener("activate", (event) => {
{{Compat}}
-## See also
+## 같이 보기
-- [Using Service Workers](/ko/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
-- [The service worker lifecycle](https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle)
-- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
-- {{jsxref("Promise", "Promises")}}
-- {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - skip the service worker's waiting phase
+- [서비스 워커 사용하기](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [서비스 워커 수명 주기](https://web.dev/articles/service-worker-lifecycle)
+- {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - 서비스 워커의 대기 단계 건너뛰기
diff --git a/files/ko/web/api/clients/get/index.md b/files/ko/web/api/clients/get/index.md
new file mode 100644
index 00000000000000..7ae20e6a0a3617
--- /dev/null
+++ b/files/ko/web/api/clients/get/index.md
@@ -0,0 +1,42 @@
+---
+title: "Clients: get() 메서드"
+short-title: get()
+slug: Web/API/Clients/get
+l10n:
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
+---
+
+{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}}
+
+{{domxref("Clients")}} 인터페이스의 **`get()`** 메서드는 주어진 `id`와 일치하는 서비스 워커 클라이언트를 가져와 {{jsxref("Promise")}}로 반환합니다.
+
+## 구문
+
+```js-nolint
+get(id)
+```
+
+### 매개변수
+
+- `id`
+ - : 가져오려고 하는 클라이언트의 아이디를 나타내는 문자열.
+
+### 반환 값
+
+{{domxref("Client")}} 객체나 `undefined`로 이행된 {{jsxref("Promise")}}.
+
+## 예제
+
+```js
+self.clients.get(id).then((client) => {
+ self.clients.openWindow(client.url);
+});
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/clients/index.md b/files/ko/web/api/clients/index.md
new file mode 100644
index 00000000000000..da0caf51d80413
--- /dev/null
+++ b/files/ko/web/api/clients/index.md
@@ -0,0 +1,72 @@
+---
+title: Clients
+slug: Web/API/Clients
+l10n:
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
+---
+
+{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}}
+
+`Clients` 인터페이스는 {{domxref("Client")}} 객체에 대한 접근을 제공합니다. [서비스 워커](/ko/docs/Web/API/Service_Worker_API) 내의 `{{domxref("ServiceWorkerGlobalScope", "self")}}.clients`를 통해 접근할 수 있습니다.
+
+## 인스턴스 메서드
+
+- {{domxref("Clients.get()")}}
+ - : 주어진 {{domxref("Client.id", "id")}}와 일치하는 {{domxref("Client")}}의 {{jsxref("Promise")}}를 반환합니다.
+- {{domxref("Clients.matchAll()")}}
+ - : {{domxref("Client")}} 객체 배열의 {{jsxref("Promise")}}를 반환합니다. 옵션 인수를 사용하면 반환되는 클라이언트의 유형을 제어할 수 있습니다.
+- {{domxref("Clients.openWindow()")}}
+ - : 주어진 URL의 새 브라우저 창을 열고 새로운 {{domxref("WindowClient")}}의 {{jsxref("Promise")}}를 반환합니다.
+- {{domxref("Clients.claim()")}}
+ - : 활성화된 서비스 워커가 자신의 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 내 모든 클라이언트의 {{domxref("ServiceWorkerContainer.controller", "controller")}}로 설정될 수 있습니다.
+
+## 예제
+
+다음 예제는 사용자가 알림을 클릭했을 때 기존 채팅 창을 보여주거나 새로운 채팅 창을 생성하는 것을 보여줍니다.
+
+```js
+addEventListener("notificationclick", (event) => {
+ event.waitUntil(
+ (async () => {
+ const allClients = await clients.matchAll({
+ includeUncontrolled: true,
+ });
+
+ let chatClient;
+
+ // 채팅 창이 이미 열려 있는지 확인해 봅시다.
+ for (const client of allClients) {
+ const url = new URL(client.url);
+
+ if (url.pathname === "/chat/") {
+ // 좋습니다, 이 창을 사용합시다!
+ client.focus();
+ chatClient = client;
+ break;
+ }
+ }
+
+ // 기존 채팅 창을 찾지 못했다면,
+ // 새 창을 엽니다.
+ if (!chatClient) {
+ chatClient = await clients.openWindow("/chat/");
+ }
+
+ // 클라이언트에게 메시지를 보냅니다.
+ chatClient.postMessage("New chat messages!");
+ })(),
+ );
+});
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [서비스 워커 사용하기](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers)
diff --git a/files/ko/web/api/clients/matchall/index.md b/files/ko/web/api/clients/matchall/index.md
new file mode 100644
index 00000000000000..97d93a8c0a7054
--- /dev/null
+++ b/files/ko/web/api/clients/matchall/index.md
@@ -0,0 +1,63 @@
+---
+title: "Clients: matchAll() 메서드"
+short-title: matchAll()
+slug: Web/API/Clients/matchAll
+l10n:
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
+---
+
+{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}}
+
+{{domxref("Clients")}} 인터페이스의 **`matchAll()`** 메서드는
+서비스 워커 {{domxref("Client")}} 객체의 목록을 {{jsxref("Promise")}}로 반환합니다.
+`options` 매개변수를 포함하면 서비스 워커와 출처가 동일한 모든 서비스 워커 클라이언트를 반환할 수 있습니다.
+옵션을 포함하지 않으면, 메서드는 서비스 워커가 제어하는 서비스 워커 클라이언트만 반환합니다.
+
+## 구문
+
+```js-nolint
+matchAll()
+matchAll(options)
+```
+
+### 매개변수
+
+- `options` {{optional_inline}}
+
+ - : 매칭 작업에 대한 옵션을 설정할 수 있는 옵션 객체. 사용 가능한 옵션은 다음과 같습니다.
+
+ - `includeUncontrolled`
+ - : 불리언 값.
+ `true`로 설정하면, 현재 서비스 워커와 동일한 출처를 공유하는 모든 서비스 워커 클라이언트를 반환합니다.
+ 그렇지 않으면, 현재 서비스 워커가 제어하는 서비스 워커 클라이언트만 반환합니다.
+ 기본 값은 `false`입니다.
+ - `type`
+ - : 매칭하고자 하는 클라이언트 유형을 설정합니다. 사용 가능한 값은
+ `"window"`, `"worker"`, `"sharedworker"`, `"all"`입니다.
+ 기본 값은 `"window"`입니다.
+
+### 반환 값
+
+{{domxref("Client")}} 객체 배열로 이행된 {{jsxref("Promise")}}.
+Chrome 46/Firefox 54와 이후 버전에서, 이 메서드는 사양에 따라 가장 최근에 포커스된 순서대로 클라이언트를 반환합니다.
+
+## 예제
+
+```js
+clients.matchAll(options).then((clientList) => {
+ for (const client of clientList) {
+ if (client.url === "index.html") {
+ clients.openWindow(client);
+ // 또는 일치하는 클라이언트와 관련된 다른 작업을 수행합니다.
+ }
+ }
+});
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/clients/openwindow/index.md b/files/ko/web/api/clients/openwindow/index.md
new file mode 100644
index 00000000000000..d0395450103c85
--- /dev/null
+++ b/files/ko/web/api/clients/openwindow/index.md
@@ -0,0 +1,91 @@
+---
+title: "Clients: openWindow() 메서드"
+short-title: openWindow()
+slug: Web/API/Clients/openWindow
+l10n:
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
+---
+
+{{APIRef("Service Workers API")}}{{AvailableInWorkers("service")}}
+
+{{domxref("Clients")}} 인터페이스의 **`openWindow()`** 메서드는
+새로운 최상위 브라우징 맥락을 생성하고 주어진 URL을 로드합니다.
+호출하는 스크립트에 팝업 표시 권한이 없는 경우, `openWindow()`는 `InvalidAccessError`를 발생시킵니다.
+
+Firefox에서는 알림 클릭 이벤트의 결과로 호출된 경우에만 메서드가 팝업을 표시할 수 있습니다.
+
+Android용 Chrome에서, 이 메서드는 사용자의 홈 화면에 이전에 추가된 [독립형 웹 앱](/ko/docs/Web/Progressive_web_apps)에서 제공하는 기존 브라우징 맥락에서 URL을 대신 열 수 있습니다.
+최근부터 Windows용 Chrome에서도 이렇게 작동합니다.
+
+## 구문
+
+```js-nolint
+openWindow(url)
+```
+
+### 매개변수
+
+- `url`
+ - : 창에서 열려는 클라이언트의 URL을 나타내는 문자열.
+ 일반적으로 이 값은 호출하는 스크립트와 동일한 출처의 URL이어야 합니다.
+
+### 반환 값
+
+서비스 워커와 동일한 출처의 URL이면 {{domxref("WindowClient")}} 객체로,
+그렇지 않은 경우 {{Glossary("null", "null 값")}}으로 이행된 {{jsxref("Promise")}}.
+
+### 예외
+
+- `InvalidAccessError` {{domxref("DOMException")}}
+ - : 앱의 출처에 [임시 활성화](/ko/docs/Web/Security/User_activation)된 창이 없는 경우 이 예외로 프로미스가 거부됩니다.
+
+## 보안 요구 사항
+
+- 앱의 출처에 적어도 하나의 창은 [임시 활성화](/ko/docs/Web/Security/User_activation)되어 있어야 합니다.
+
+## 예제
+
+```js
+// 해당되는 경우 OS에 알림 보내기
+if (self.Notification.permission === "granted") {
+ const notificationObject = {
+ body: "Click here to view your messages.",
+ data: { url: `${self.location.origin}/some/path` },
+ // data: { url: 'http://example.com' },
+ };
+ self.registration.showNotification(
+ "You've got messages!",
+ notificationObject,
+ );
+}
+
+// 알림 클릭 이벤트 수신기
+self.addEventListener("notificationclick", (e) => {
+ // 알림 팝업 닫기
+ e.notification.close();
+ // 모든 Window 클라이언트 가져오기
+ e.waitUntil(
+ clients.matchAll({ type: "window" }).then((clientsArr) => {
+ // 타겟 URL과 일치하는 창이 이미 존재하는 경우, 해당 탭에 포커스
+ const hadWindowToFocus = clientsArr.some((windowClient) =>
+ windowClient.url === e.notification.data.url
+ ? (windowClient.focus(), true)
+ : false,
+ );
+ // 그렇지 않은 경우, 해당 URL로 새로운 탭을 열고 포커스.
+ if (!hadWindowToFocus)
+ clients
+ .openWindow(e.notification.data.url)
+ .then((windowClient) => (windowClient ? windowClient.focus() : null));
+ }),
+ );
+});
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/css_object_model/managing_screen_orientation/index.md b/files/ko/web/api/css_object_model/managing_screen_orientation/index.md
index 56ac676af89f4b..8c639a7079ee6b 100644
--- a/files/ko/web/api/css_object_model/managing_screen_orientation/index.md
+++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.md
@@ -3,7 +3,7 @@ title: Managing screen orientation
slug: Web/API/CSS_Object_Model/Managing_screen_orientation
---
-{{SeeCompatTable}}
+{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}
## Summary
diff --git a/files/ko/web/api/csscounterstylerule/fallback/index.md b/files/ko/web/api/csscounterstylerule/fallback/index.md
new file mode 100644
index 00000000000000..280ebafb2d7962
--- /dev/null
+++ b/files/ko/web/api/csscounterstylerule/fallback/index.md
@@ -0,0 +1,40 @@
+---
+title: "CSSCounterStyleRule: fallback 속성"
+slug: Web/API/CSSCounterStyleRule/fallback
+l10n:
+ sourceCommit: 59b1cd1f520971b89ccf521d53a1d9d3bf4c0756
+---
+
+{{APIRef("CSS Counter Styles")}}
+
+{{domxref("CSSCounterStyleRule")}} 인터페이스의 **`fallback`** 속성은 {{cssxref("@counter-style/fallback","fallback")}} 설명자의 값을 가져오거나 설정합니다. 만일 설명자에 지정된 값이 없다면, 이 속성은 빈 문자열을 반환합니다.
+
+## 값
+
+문자열입니다.
+
+## 예제
+
+다음 예제는 {{cssxref("@counter-style")}} 의 규칙을 보여줍니다. JavaScript에서, `myRules[0]` 은 이 `@counter-style` 규칙이며, `fallback` 을 반환하면 "disc" 값을 얻을 수 있습니다.
+
+```css
+@counter-style box-corner {
+ system: fixed;
+ symbols: ◰ ◳ ◲ ◱;
+ suffix: ": ";
+ fallback: disc;
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+console.log(myRules[0].fallback); // "disc"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/csscounterstylerule/negative/index.md b/files/ko/web/api/csscounterstylerule/negative/index.md
new file mode 100644
index 00000000000000..168b8f52d60a11
--- /dev/null
+++ b/files/ko/web/api/csscounterstylerule/negative/index.md
@@ -0,0 +1,39 @@
+---
+title: "CSSCounterStyleRule: negative 속성"
+slug: Web/API/CSSCounterStyleRule/negative
+l10n:
+ sourceCommit: 59b1cd1f520971b89ccf521d53a1d9d3bf4c0756
+---
+
+{{APIRef("CSS Counter Styles")}}
+
+{{domxref("CSSCounterStyleRule")}} 인터페이스의 **`negative`** 속성은 {{cssxref("@counter-style/negative","negative")}} 설명자의 값을 호출하거나 지정합니다. 만일 설명자에 지정된 값이 없다면, 이 속성은 빈 문자열을 반환합니다.
+
+## 값
+
+문자열입니다.
+
+## 예제
+
+다음 예제는 {{cssxref("@counter-style")}} 의 규칙을 보여줍니다. JavaScript에서, `myRules[0]` 은 이 `@counter-style` 규칙이며, `negative` 를 반환하면 "-" 값을 얻을 수 있습니다.
+
+```css
+@counter-style neg {
+ system: numeric;
+ symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+ negative: "-";
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+console.log(myRules[0].negative); // "-"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/csscounterstylerule/range/index.md b/files/ko/web/api/csscounterstylerule/range/index.md
new file mode 100644
index 00000000000000..8e5a352820dff4
--- /dev/null
+++ b/files/ko/web/api/csscounterstylerule/range/index.md
@@ -0,0 +1,41 @@
+---
+title: "CSSCounterStyleRule: range 속성"
+slug: Web/API/CSSCounterStyleRule/range
+l10n:
+ sourceCommit: 59b1cd1f520971b89ccf521d53a1d9d3bf4c0756
+---
+
+{{APIRef("CSS Counter Styles")}}
+
+{{domxref("CSSCounterStyleRule")}} 인터페이스의 **`range`** 속성은 {{cssxref("@counter-style/range","range")}} 설명자의 값을 호출하거나 지정합니다. 만일 설명자에 설정된 값이 없다면, 이 속성은 빈 문자열을 반환합니다.
+
+## 값
+
+문자열입니다.
+
+## 예제
+
+다음 예제는 {{cssxref("@counter-style")}} 의 규칙을 보여줍니다. JavaScript에서, `myRules[0]` 은 이 `@counter-style` 규칙이며, `range` 를 반환하면 "2 4, 7 9" 값을 얻을 수 있습니다.
+
+```css
+@counter-style range-multi-example {
+ system: cyclic;
+ symbols: "\25A0" "\25A1";
+ range:
+ 2 4,
+ 7 9;
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+console.log(myRules[0].range); // "2 4, 7 9"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/csscounterstylerule/symbols/index.md b/files/ko/web/api/csscounterstylerule/symbols/index.md
new file mode 100644
index 00000000000000..18ba275aa929cf
--- /dev/null
+++ b/files/ko/web/api/csscounterstylerule/symbols/index.md
@@ -0,0 +1,40 @@
+---
+title: "CSSCounterStyleRule: symbols 속성"
+slug: Web/API/CSSCounterStyleRule/symbols
+l10n:
+ sourceCommit: 59b1cd1f520971b89ccf521d53a1d9d3bf4c0756
+---
+
+{{APIRef("CSS Counter Styles")}}
+
+{{domxref("CSSCounterStyleRule")}} 인터페이스의 **`symbols`** 속성은 {{cssxref("@counter-style/symbols","symbols")}} 설명자의 값을 가져오거나 설정합니다. 만일 설명자에 지정된 값이 없다면, 이 속성은 빈 문자열을 반환합니다.
+
+## 값
+
+문자열입니다.
+
+## 예제
+
+다음 예제는 {{cssxref("@counter-style")}} 의 규칙을 보여줍니다. JavaScript에서, `myRules[0]` 은 이 `@counter-style` 규칙이며, `symbols` 를 반환하면 "◰ ◳ ◲ ◱" 값을 얻을 수 있습니다.
+
+```css
+@counter-style box-corner {
+ system: fixed;
+ symbols: ◰ ◳ ◲ ◱;
+ suffix: ": ";
+ negative: "-";
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+console.log(myRules[0].symbols); // "◰ ◳ ◲ ◱"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/document/execcommand/index.md b/files/ko/web/api/document/execcommand/index.md
index e8f05e1409b687..5d16be1b9cb9f3 100644
--- a/files/ko/web/api/document/execcommand/index.md
+++ b/files/ko/web/api/document/execcommand/index.md
@@ -121,7 +121,7 @@ bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
## 예제
-CodePen의 [how to use](http://codepen.io/netsi1964/full/QbLLGW/)를 참고하세요.
+CodePen의 [how to use](https://codepen.io/netsi1964/full/QbLLGW/)를 참고하세요.
## 명세
diff --git a/files/ko/web/api/document/scroll_event/index.md b/files/ko/web/api/document/scroll_event/index.md
index 985fafa3e240f0..6cb2144bc5cc26 100644
--- a/files/ko/web/api/document/scroll_event/index.md
+++ b/files/ko/web/api/document/scroll_event/index.md
@@ -3,6 +3,8 @@ title: scroll
slug: Web/API/Document/scroll_event
---
+{{APIRef}}
+
document view 나 element가 스크롤 될 때, **`scroll`** 이벤트가 발생합니다.
## 개요
diff --git a/files/ko/web/api/element/blur_event/index.md b/files/ko/web/api/element/blur_event/index.md
index 561a8f2920e53b..eba77ad39bc02c 100644
--- a/files/ko/web/api/element/blur_event/index.md
+++ b/files/ko/web/api/element/blur_event/index.md
@@ -3,6 +3,8 @@ title: blur
slug: Web/API/Element/blur_event
---
+{{APIRef}}
+
`blur` 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 [`focusout`](/ko/docs/Mozilla_event_reference/focusout) 이벤트의 가장 다른점은 [`focusout`](/ko/docs/Mozilla_event_reference/focusout) 은 이벤트 버블링이 발생합니다.
## General info
diff --git a/files/ko/web/api/html_drag_and_drop_api/index.md b/files/ko/web/api/html_drag_and_drop_api/index.md
index 818b5878c135e0..06bfbc3fe51520 100644
--- a/files/ko/web/api/html_drag_and_drop_api/index.md
+++ b/files/ko/web/api/html_drag_and_drop_api/index.md
@@ -228,7 +228,7 @@ function dragstart_handler(ev) {
- [Copying and moving elements with the `DataTransfer` interface](https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html)
- [Copying and moving elements with the `DataTransferListItem` interface](https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html)
-- 파일 드래그 앤 드롭; Firefox 전용: <http://jsfiddle.net/9C2EF/>
+- 파일 드래그 앤 드롭; Firefox 전용: <https://jsfiddle.net/9C2EF/>
- 파일 드래그 앤 드롭; 모든 브라우저: [https://jsbin.com/hiqasek/](https://jsbin.com/hiqasek/edit?html,js,output)
## 명세서
diff --git a/files/ko/web/api/htmlelement/translate/index.md b/files/ko/web/api/htmlelement/translate/index.md
new file mode 100644
index 00000000000000..096124d6d78917
--- /dev/null
+++ b/files/ko/web/api/htmlelement/translate/index.md
@@ -0,0 +1,64 @@
+---
+title: "HTMLElement: translate 속성"
+short-title: translate
+slug: Web/API/HTMLElement/translate
+l10n:
+ sourceCommit: 1442377111a1649dfce278eac688e06efce34b83
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLElement")}} 인터페이스의 **`translate`** 속성은 페이지가 현지화될 때 요소의 특성 값과 자식 {{domxref("Text")}} 노드의 값을 번역할지 아니면 변경하지 않고 둘지 여부를 나타냅니다.
+
+이 속성은 [`translate`](/ko/docs/Web/HTML/Global_attributes/translate) HTML 전역 특성의 값을 반영합니다.
+
+## 값
+
+페이지가 현지화될 때 요소의 특성 값과 자식 {{domxref("Text")}} 노드의 값이 번역되어야 하면 `true`,
+그렇지 않으면 `false`인 불리언 값.
+
+## 예제
+
+다음 예제는 스크립트를 통해 번역을 활성화하거나 비활성화하는 방법을 보여줍니다.
+
+```html
+<div>
+ <span>The content may always be translated: </span>
+ <span translate="yes">El contenido será traducido</div>
+</div>
+<div>
+ <span id="translate-label">The content may be translated:</span>
+ <span id="translate-element" translate="no">El contenido puede ser traducido.</div>
+</div>
+<input id="translate-controller" type="checkbox" /> Enable translation
+```
+
+```js
+const label = document.getElementById("translate-label");
+const element = document.getElementById("translate-element");
+const controller = document.getElementById("translate-controller");
+
+controller.addEventListener("change", (e) => {
+ if (controller.checked) {
+ element.translate = true;
+ label.innerText = "The content may be translated:";
+ } else {
+ element.translate = false;
+ label.innerText = "The content may not be translated:";
+ }
+});
+```
+
+{{EmbedLiveSample('Examples', 600, 200)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`translate`](/ko/docs/Web/HTML/Global_attributes#translate) HTML 전역 특성
diff --git a/files/ko/web/api/htmllabelelement/htmlfor/index.md b/files/ko/web/api/htmllabelelement/htmlfor/index.md
new file mode 100644
index 00000000000000..c59e74c34ad702
--- /dev/null
+++ b/files/ko/web/api/htmllabelelement/htmlfor/index.md
@@ -0,0 +1,37 @@
+---
+title: "HTMLLabelElement: htmlFor 속성"
+short-title: htmlFor
+slug: Web/API/HTMLLabelElement/htmlFor
+l10n:
+ sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLLabelElement.htmlFor`** 속성은
+[`for`](/ko/docs/Web/HTML/Element/label#for) 컨텐츠 속성의 값을 반영하는 속성입니다.
+이는 스크립트에 접근할 수 있는 해당 속성이 컨텐츠 속성 `for` 의 값을 설정하거나 읽을 수 있다는 것을 의미하며,
+라벨과 연결된 컨트롤 요소의 ID 에 해당합니다.
+
+## 값
+
+컨트롤과 연결된 요소의 ID 문자열을 포함하는 문자열입니다.
+
+> **참고:** 이 속성에 값이 있다면, {{domxref("HTMLLabelElement.control")}} 속성 또한
+> 동일한 컨트롤을 참조해야 합니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("HTMLLabelElement")}}
+- {{domxref("HTMLLabelElement.control")}}
+- {{domxref("HTMLElement")}}
+- {{HTMLElement("label")}}
+- [HTML 폼 안내서](/ko/docs/Learn/Forms)
diff --git a/files/ko/web/api/htmllabelelement/index.md b/files/ko/web/api/htmllabelelement/index.md
new file mode 100644
index 00000000000000..e937e08ff4c032
--- /dev/null
+++ b/files/ko/web/api/htmllabelelement/index.md
@@ -0,0 +1,43 @@
+---
+title: HTMLLabelElement
+slug: Web/API/HTMLLabelElement
+l10n:
+ sourceCommit: 7e6e5f5d4c1c984af3d4ebf9399042d19eccea1e
+---
+
+{{ APIRef("HTML DOM") }}
+
+**`HTMLLabelElement`** 인터페이스는 {{HTMLElement("label")}} 요소의 특정한 속성에 접근할 수 있도록 합니다. 이 인터페이스는 기본 {{domxref("HTMLElement")}} 인터페이스의 메서드와 속성을 상속합니다.
+
+{{InheritanceDiagram}}
+
+## 인스턴스 속성
+
+부모 {{domxref("HTMLElement")}} 로부터 상속받은 속성들
+
+- {{domxref("HTMLLabelElement.control")}} {{ReadOnlyInline}}
+ - : {{domxref("HTMLElement")}} 는 라벨과 연관되어 있는 컨트롤을 나타냅니다.
+- {{domxref("HTMLLabelElement.form")}} {{ReadOnlyInline}}
+ - : {{domxref("HTMLFormElement")}} 객체는 라벨이 지정된 컨트롤러와 연관이 있는 폼을 나타냅니다. 연관되어 있는 컨트롤이 없거나, 해당 컨트롤이 폼 내부에 존재하지 않는 경우에 `null` 을 반환합니다. 다시 말해서, 이는 단순히 `HTMLLabelElement.control.form` 단축 속성입니다.
+- {{domxref("HTMLLabelElement.htmlFor")}}
+ - : 라벨이 지정된 컨트롤의 ID 문자열을 포함합니다. 이는 [`for`](/ko/docs/Web/HTML/Element/label#for) 특성을 반영합니다.
+
+> **참고:** `for` 특성을 프로그래밍 방식으로 지정하기 위해서는, [`htmlFor`](/ko/docs/Web/API/HTMLLabelElement/htmlFor) 을 사용하세요.
+
+## 인스턴스 메서드
+
+특정 메서드가 존재하지 않습니다. {{domxref("HTMLElement")}} 로부터 메서드를 상속받습니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- 이 인터페이스를 구성하는 HTML 요소: {{HTMLElement("label")}}
+- {{HTMLElement("form")}}
+- {{domxref("HTMLFormElement")}}
diff --git a/files/ko/web/api/htmlmediaelement/abort_event/index.md b/files/ko/web/api/htmlmediaelement/abort_event/index.md
index e48791806f1e51..d28643915baff7 100644
--- a/files/ko/web/api/htmlmediaelement/abort_event/index.md
+++ b/files/ko/web/api/htmlmediaelement/abort_event/index.md
@@ -3,6 +3,8 @@ title: abort
slug: Web/API/HTMLMediaElement/abort_event
---
+{{APIRef}}
+
**`abort`** 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.
## 개요
diff --git a/files/ko/web/api/htmlmediaelement/canplay_event/index.md b/files/ko/web/api/htmlmediaelement/canplay_event/index.md
index 42c15059a09e5b..e7edae5e79010d 100644
--- a/files/ko/web/api/htmlmediaelement/canplay_event/index.md
+++ b/files/ko/web/api/htmlmediaelement/canplay_event/index.md
@@ -3,6 +3,8 @@ title: "HTMLMediaElement: canplay"
slug: Web/API/HTMLMediaElement/canplay_event
---
+{{APIRef("HTMLMediaElement")}}
+
`canplay` 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생된다. 그러나, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에는, 로드된 데이터가 충분하지 않을 것으로 추산한다.
## General info
diff --git a/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md b/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md
index ae5a5602e4f9b5..c29b504bd2bfe4 100644
--- a/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md
+++ b/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md
@@ -3,6 +3,8 @@ title: "HTMLMediaElement: canplaythrough"
slug: Web/API/HTMLMediaElement/canplaythrough_event
---
+{{APIRef("HTMLMediaElement")}}
+
`canplaythrough` 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생되며, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에 로드된 데이터가 충분할 것으로 추산한다.
## General info
diff --git a/files/ko/web/api/keyboardevent/location/index.md b/files/ko/web/api/keyboardevent/location/index.md
new file mode 100644
index 00000000000000..4c03b9c66f893a
--- /dev/null
+++ b/files/ko/web/api/keyboardevent/location/index.md
@@ -0,0 +1,138 @@
+---
+title: "KeyboardEvent: location 속성"
+slug: Web/API/KeyboardEvent/location
+l10n:
+ sourceCommit: eab4066e72d5478de920e4020e5db71214dcffa6
+---
+
+{{APIRef("UI Events")}}
+
+**`KeyboardEvent.location`** 은 키보드 혹은
+다른 입력 장치에서의 키의 위치를 나타내는 `unsigned long` 을
+반환하는 읽기 전용 속성입니다.
+
+가능한 값은 다음과 같습니다:
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th>상수</th>
+ <th>값</th>
+ <th>설명</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>DOM_KEY_LOCATION_STANDARD</code></td>
+ <td>0</td>
+ <td>
+ 키는 단 하나의 버전만 보유하고 있거나,
+ 왼쪽과 오른쪽 버전의 키를 구분할 수 없으며,
+ 숫자 키패드나 키패드의 일부분으로 간주되는 키에서 눌려진 것이 아닙니다.
+ </td>
+ </tr>
+ <tr>
+ <td><code>DOM_KEY_LOCATION_LEFT</code></td>
+ <td>1</td>
+ <td>
+ 이 키는 해당 키의 왼쪽 버전이었습니다.
+ 예를 들어, 표준 101 키의 미국 키보드에서는
+ 왼쪽 <kbd>Control</kbd> 키가 눌렸습니다.
+ 이 값은 키보드에서의 하나 이상의 가능한 위치를 가진 키에서만 사용됩니다.
+ </td>
+ </tr>
+ <tr>
+ <td><code>DOM_KEY_LOCATION_RIGHT</code></td>
+ <td>2</td>
+ <td>
+ 이 키는 해당 키의 오른쪽 버전이었습니다.
+ 예를 들어, 표준 101 키의 미국 키보드에서는
+ 오른쪽 <kbd>Control</kbd> 키가 눌렸습니다.
+ 이 값은 키보드에서의 하나 이상의 가능한 위치를 가진 키에서만 사용됩니다.
+ </td>
+ </tr>
+ <tr>
+ <td><code>DOM_KEY_LOCATION_NUMPAD</code></td>
+ <td>3</td>
+ <td>
+ <p>
+ 숫자 키패드 위에 있었거나,
+ 숫자 키패드에 상응하는 가상의 키 코드를 가지고 있었습니다.
+ </p>
+ <div class="note">
+ <p>
+ <strong>참고:</strong> <kbd>NumLock</kbd> 키가 잠겨 있을 때,
+ Firefox는 숫자 키패드의 키에게
+ 항상 <code>DOM_KEY_LOCATION_NUMPAD</code> 를 반환합니다.
+ 반면에, <kbd>NumLock</kbd> 키가 잠겨 있지 않을 때,
+ 그리고 숫자 키패드가 실제로 있는 경우에도 <code>DOM_KEY_LOCATION_NUMPAD</code> 를 반환합니다.
+ 다른 경우에는, 노트북 컴퓨터처럼 키보드에 키패드가 없는 경우
+ 일부 키는 NumLock 키가 잠겨 있을 때 숫자 키패드가 됩니다.
+ 이러한 키들이 이벤트를 발생시킬 때, 위치 속성 값은 해당 키에 의존합니다.
+ 즉, <code>DOM_KEY_LOCATION_NUMPAD</code> 가 아니어야 합니다.
+ </p>
+ </div>
+ <div class="note">
+ <p>
+ <strong>참고:</strong> <kbd>NumLock</kbd> key's key events indicate
+ <code>DOM_KEY_LOCATION_STANDARD</code> both on Firefox and Internet
+ Explorer.
+ <strong>참고:</strong> <kbd>NumLock</kbd> 키의
+ 키 이벤트는 Internet Explorer와 Firefox 모두에서
+ <code>DOM_KEY_LOCATION_STANDARD</code> 를 나타냅니다.
+ </p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>DOM_KEY_LOCATION_MOBILE</code>
+ {{Non-standard_inline()}} {{deprecated_inline}}
+ </td>
+ <td>4</td>
+ <td>
+ <p>
+ 키가 모바일 기기에 있을 때입니다.
+ 이는 물리적인 키패드나 가상 키보드 모두에 해당될 수 있습니다.
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>DOM_KEY_LOCATION_JOYSTICK</code> {{Non-standard_inline()}}
+ {{deprecated_inline}}
+ </td>
+ <td>5</td>
+ <td>
+ <p>
+ 이 키는 게임 컨트롤러 혹은
+ 모바일 기기의 조이스틱 버튼의 키 버튼이었습니다.
+ </p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+## 값
+
+숫자입니다.
+
+## 예제
+
+```js
+function keyEvent(event) {
+ console.log(`눌려진 키의 위치: ${event.location}`);
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("KeyboardEvent")}}
diff --git a/files/ko/web/api/keyboardevent/shiftkey/index.md b/files/ko/web/api/keyboardevent/shiftkey/index.md
new file mode 100644
index 00000000000000..004c1573415a29
--- /dev/null
+++ b/files/ko/web/api/keyboardevent/shiftkey/index.md
@@ -0,0 +1,64 @@
+---
+title: "KeyboardEvent: shiftKey property"
+slug: Web/API/KeyboardEvent/shiftKey
+l10n:
+ sourceCommit: eab4066e72d5478de920e4020e5db71214dcffa6
+---
+
+{{APIRef("UI Events")}}
+
+**`KeyboardEvent.shiftKey`** 는 읽기 전용 속성으로 어떤 이벤트가 발생했을 때 키보드의 <kbd>shift</kbd> 키 가 눌려 있었는지 아닌지 (`true`) 혹은 (`false`) 를 나타내는 읽기 전용 속성입니다.
+
+## 값
+
+불리언 값입니다.
+
+## 예제
+
+```html
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width" />
+ <title>shiftKey example</title>
+
+ <script>
+ function showChar(e) {
+ alert(
+ "Key Pressed: " +
+ String.fromCharCode(e.charCode) +
+ "\n" +
+ "charCode: " +
+ e.charCode +
+ "\n" +
+ "SHIFT key pressed: " +
+ e.shiftKey +
+ "\n" +
+ "ALT key pressed: " +
+ e.altKey +
+ "\n",
+ );
+ }
+ </script>
+ </head>
+
+ <body onkeypress="showChar(event);">
+ <p>
+ SHIFT 키를 누른 상태에서든 아니든 아무 문자 키를 눌러보세요.<br />
+ ALT 키 또한 SHIFT 키와 함께 사용할 수 있습니다.
+ </p>
+ </body>
+</html>
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{ domxref("KeyboardEvent") }}
diff --git a/files/ko/web/api/navigator/online/index.md b/files/ko/web/api/navigator/online/index.md
index 09fc7516a31bc2..9959b11e96e142 100644
--- a/files/ko/web/api/navigator/online/index.md
+++ b/files/ko/web/api/navigator/online/index.md
@@ -3,6 +3,8 @@ title: Online and offline events
slug: Web/API/Navigator/onLine
---
+{{ApiRef("HTML DOM")}}
+
In progress [Firefox 3](/ko/Firefox_3_for_developers)는 [WHATWG 웹 애플리케이션 1.0 명세](http://www.whatwg.org/specs/web-apps/current-work/)에 기술된 [온라인/오프라인 이벤트](http://www.whatwg.org/specs/web-apps/current-work/#offline)를 구현합니다.
### 개요
diff --git a/files/ko/web/api/performance_api/navigation_timing/index.md b/files/ko/web/api/performance_api/navigation_timing/index.md
index 8e4b4f451c5e0d..1021f91c25b2f0 100644
--- a/files/ko/web/api/performance_api/navigation_timing/index.md
+++ b/files/ko/web/api/performance_api/navigation_timing/index.md
@@ -3,6 +3,8 @@ title: 내비게이션 타이밍(Navigation Timing)
slug: Web/API/Performance_API/Navigation_timing
---
+{{DefaultAPISidebar("Performance API")}}
+
**Navigation Timing API**는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.
다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.
diff --git a/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
index 003a1fe3092a0b..fe095bda28b47c 100644
--- a/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
+++ b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: Web Audio API의 기본 개념
slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
오디오가 어떻게 여러분의 앱을 통해서 전송(route)되는지를 설계하는 동안 여러분이 적절한 결정을 내리는 것을 돕기 위해, 이 문서는 Web Audio API의 기능이 어떻게 동작하는가를 뒷받침하는 얼마간의 오디오 이론을 설명합니다. 이 문서를 읽는다고 해서 여러분이 숙련된 사운드 엔지니어가 될 수는 없지만, 왜 Web Audio API가 이렇게 동작하는지를 이해하기에 충분한 배경지식을 줄 것입니다.
## 오디오 그래프
diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index 618ac1fd04e667..d948f6a38dd023 100644
--- a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: Web Audio API로 시각화하기
slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
Web Audio API의 가장 흥미로운 기능 중 하나는 주파수, 파형, 그리고 다른 데이터들을 오디오 소스로부터 추출할 수 있는 능력인데, 이는 그리고 나서 시각화하는 데 사용될 수 있습니다. 이 글은 어떻게 시각화를 하는지 설명하고, 기초적인 사용 방법을 두 개 제공합니다.
> **참고:** 모든 코드의 작동 예제를 [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) 데모에서 찾을 수 있습니다.
diff --git a/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md
index ac2671d4422fb3..87a1d5eabfa250 100644
--- a/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md
+++ b/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md
@@ -3,6 +3,8 @@ title: The structured clone algorithm
slug: Web/API/Web_Workers_API/Structured_clone_algorithm
---
+{{DefaultAPISidebar("Web Workers API") }}
+
The structured clone 알고리즘은 복잡한 JavaScript 객체의 직렬화을 위해서 [HTML5 specification](http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data)에 의해서 정의된 새로운 알고리즘 입니다. 이것은 순환그래프를 포함하는 객체의 직렬화를 지원하기 때문에 [JSON](/en/JSON)보다 더 유용합니다. — 객체는 같은 그래프에서 다른객체를 참조하는 객체를 참조할 수 있습니다. 이러한 케이스들에서는 structured clone알고리즘이 아마도 JSON보다 더 효율적일 것입니다.
알고리즘은 본질적으로 원본 객체의 모든 필드를 거치고 각 필드의 값들을 새로운 객체로 복제합니다. 만약 필드가 객체를 가졌다면 모든 필드와 그 서브필드가 새로운 객체로 복제될 때 까지 재귀적으로 동작합니다.
diff --git a/files/ko/web/api/websockets_api/index.md b/files/ko/web/api/websockets_api/index.md
index a2de20e593db3c..c0c5a2a3e088b6 100644
--- a/files/ko/web/api/websockets_api/index.md
+++ b/files/ko/web/api/websockets_api/index.md
@@ -3,6 +3,8 @@ title: 웹 소켓
slug: Web/API/WebSockets_API
---
+{{DefaultAPISidebar("WebSockets API")}}
+
웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.
## 인터페이스
diff --git a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md
index 2a5e65b5e39591..20ce9e7a9359d8 100644
--- a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -3,6 +3,8 @@ title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기
slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
---
+{{DefaultAPISidebar("WebSockets API")}}
+
WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.
> **참고:** 우리에게는 작동하는 chat/server 시스템 예제 코드 조각이 있습니다. 이는 우리의 인프라가 WebSocket 예제들을 제대로 호스팅할 수 있는 환경이 되면 공유할 것입니다.
diff --git a/files/ko/web/api/atob/index.md b/files/ko/web/api/window/atob/index.md
similarity index 96%
rename from files/ko/web/api/atob/index.md
rename to files/ko/web/api/window/atob/index.md
index d76442429ca8f2..a32b37acdcab68 100644
--- a/files/ko/web/api/atob/index.md
+++ b/files/ko/web/api/window/atob/index.md
@@ -1,6 +1,7 @@
---
title: atob()
-slug: Web/API/atob
+slug: Web/API/Window/atob
+original_slug: Web/API/atob
---
{{APIRef("HTML DOM")}}
diff --git a/files/ko/web/api/btoa/index.md b/files/ko/web/api/window/btoa/index.md
similarity index 97%
rename from files/ko/web/api/btoa/index.md
rename to files/ko/web/api/window/btoa/index.md
index 2d4b09891d6c74..f436f976889ebf 100644
--- a/files/ko/web/api/btoa/index.md
+++ b/files/ko/web/api/window/btoa/index.md
@@ -1,6 +1,7 @@
---
title: btoa() 전역 함수
-slug: Web/API/btoa
+slug: Web/API/Window/btoa
+original_slug: Web/API/btoa
l10n:
sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e
---
diff --git a/files/ko/web/api/window/load_event/index.md b/files/ko/web/api/window/load_event/index.md
index fcf2c1ca9dd17f..d042c68a79dcaf 100644
--- a/files/ko/web/api/window/load_event/index.md
+++ b/files/ko/web/api/window/load_event/index.md
@@ -3,6 +3,8 @@ title: load
slug: Web/API/Window/load_event
---
+{{APIRef}}
+
`load` 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.
## 예제
diff --git a/files/ko/web/api/window/orientationchange_event/index.md b/files/ko/web/api/window/orientationchange_event/index.md
index 13002d9fa67d42..66e11016f5d15e 100644
--- a/files/ko/web/api/window/orientationchange_event/index.md
+++ b/files/ko/web/api/window/orientationchange_event/index.md
@@ -3,6 +3,8 @@ title: orientationchange
slug: Web/API/Window/orientationchange_event
---
+{{APIRef}}
+
`orientationchange` 이벤트는 장치의 방향이 바뀔 때 호출 된다.
## General info
diff --git a/files/ko/web/api/window/resize_event/index.md b/files/ko/web/api/window/resize_event/index.md
index 1dc6ff3777927f..af57bb9a910f3f 100644
--- a/files/ko/web/api/window/resize_event/index.md
+++ b/files/ko/web/api/window/resize_event/index.md
@@ -3,6 +3,8 @@ title: resize
slug: Web/API/Window/resize_event
---
+{{APIRef}}
+
**`resize`** 이벤트는 document view의 크기가 변경될 때 발생합니다.
`window.onresize` 속성(어트리뷰트)을 사용하거나,`window.addEventListener('resize', ...)`를 사용하여, 이벤트 핸들러에 `resize` 이벤트를 등록할 수 있습니다.
diff --git a/files/ko/web/api/xmlhttprequest/timeout_event/index.md b/files/ko/web/api/xmlhttprequest/timeout_event/index.md
index 3d47cdfb692757..3cc088c304803c 100644
--- a/files/ko/web/api/xmlhttprequest/timeout_event/index.md
+++ b/files/ko/web/api/xmlhttprequest/timeout_event/index.md
@@ -3,6 +3,8 @@ title: timeout
slug: Web/API/XMLHttpRequest/timeout_event
---
+{{APIRef("XMLHttpRequest API")}}
+
**`timeout`** 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.
| Bubbles | No |
diff --git a/files/ko/web/css/alternative_style_sheets/index.md b/files/ko/web/css/alternative_style_sheets/index.md
index badf392d7f0fb8..7f1f1ba346fe11 100644
--- a/files/ko/web/css/alternative_style_sheets/index.md
+++ b/files/ko/web/css/alternative_style_sheets/index.md
@@ -3,6 +3,8 @@ title: Alternative style sheets
slug: Web/CSS/Alternative_style_sheets
---
+{{CSSRef}}
+
Firefox는
_대체 스타일시트_
를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 **보기>페이지 스타일** 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.
diff --git a/files/ko/web/css/background-image/index.md b/files/ko/web/css/background-image/index.md
index 90aa527ed8d06b..27c4ca0d4a4cb9 100644
--- a/files/ko/web/css/background-image/index.md
+++ b/files/ko/web/css/background-image/index.md
@@ -28,7 +28,8 @@ background-image: linear-gradient(
to bottom,
rgba(255, 255, 0, 0.5),
rgba(0, 0, 255, 0.5)
- ), url("catfront.png");
+ ),
+ url("catfront.png");
```
### 값
diff --git a/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.md
index 10cdee64d1ef6c..9d9221ab2900a3 100644
--- a/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.md
+++ b/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.md
@@ -3,6 +3,8 @@ title: Border-image 생성기
slug: Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
---
+{{CSSRef}}
+
이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.
{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}}
diff --git a/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
index 5742b8765722cf..2c103a203caa14 100644
--- a/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
+++ b/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
@@ -3,6 +3,8 @@ title: Border-radius 생성기
slug: Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator
---
+{{CSSRef}}
+
이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.
{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}}
diff --git a/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 2e214f0122a9a3..92f895665348dd 100644
--- a/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -37,7 +37,8 @@ slug: Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
.multi-bg-example {
width: 100%;
height: 400px;
- background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+ background-image: url(firefox.png), url(bubbles.png),
+ linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
diff --git a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index 125337b537c6cc..9811e3c4f73e9b 100644
--- a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -3,6 +3,8 @@ title: Basic concepts of grid layout
slug: Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
---
+{{CSSRef}}
+
[CSS 그리드 레이아웃(Grid Layout)](/ko/docs/Web/CSS/CSS_Grid_Layout)은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문서에서는 CSS 그리드 레이아웃 및 CSS 그리드 레이아웃 레벨 1 명세서에 포함된 새로운 기술 용어를 소개합니다. 이번 개요에 소개된 기능은 나머지 안내 문서에서 자세히 설명합니다.
## 그리드가 무엇인가요?
diff --git a/files/ko/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/ko/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
index 2867fc3a705a7c..dd909fb7785d67 100644
--- a/files/ko/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
+++ b/files/ko/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
@@ -3,6 +3,8 @@ title: Line-based placement with CSS Grid
slug: Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement
---
+{{CSSRef}}
+
[그리드 레이아웃의 기본 개념을 다룬 문서](/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념)에서 라인 번호를 사용하여 그리드에 아이템을 배치하는 방법을 잠깐 살펴본 적이 있습니다. 이번 문서에서는 이 기본적 기능이 어떻게 작동하는지를 자세히 살펴보겠습니다.
그리드를 연구할 때는 번호가 매겨진 라인부터 시작하는 것이 가장 논리적일 겁니다. 왜냐하면, 그리드 레이아웃을 쓸 때마다 거기엔 항상 번호가 매겨진 라인이 있기 때문입니다. 행과 열의 각 라인에는 번호가 매겨져 있으며, 라인에 번호를 매길 때는 1번부터 시작합니다. 그리드 라인은 문서의 작성 모드를 기준으로 번호가 매겨진다는 것을 명심하십시오. 영어와 같이 왼쪽에서 오른쪽으로 읽히는 언어로 쓰인 문서에서는 1번 라인이 그리드의 맨 왼쪽에 위치합니다. 반대로 오른쪽에서 왼쪽으로 읽히는 언어의 문서에서는 1번 라인이 그리드의 맨 오른쪽에 위치하게 됩니다. 문서 작성 모드와 그리드 사이의 상호 작용에 대해서는 나중에 자세히 알아보겠습니다.
diff --git a/files/ko/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md b/files/ko/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
index 7e0f8d499b0806..73e39c2a6c9a32 100644
--- a/files/ko/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
+++ b/files/ko/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
@@ -3,6 +3,8 @@ title: Layout using named grid lines
slug: Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines
---
+{{CSSRef}}
+
이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아보았습니다. 이번 가이드에선 이름이 주어진 라인을 쓰는 상황에서 이 두 가지 방법이 서로 어떻게 작용하는지 알아보겠습니다. 라인에 이름을 지어 주는 것이 매우 유용할 때도 있지만, 이름과 트랙 크기가 혼합돼서 사용되는 그리드 용법을 보고 있으면 매우 헷갈릴 수도 있습니다. 하지만 몇 가지 예제를 가지고 작업해 보시면 점점 명확해지면서 나중엔 작업하기도 훨씬 수월해지실 겁니다.
## 그리드를 정의할 때 라인의 이름 짓는 법
diff --git a/files/ko/web/css/css_grid_layout/grid_template_areas/index.md b/files/ko/web/css/css_grid_layout/grid_template_areas/index.md
index b3c4429187540c..0ee632011e3a69 100644
--- a/files/ko/web/css/css_grid_layout/grid_template_areas/index.md
+++ b/files/ko/web/css/css_grid_layout/grid_template_areas/index.md
@@ -3,6 +3,8 @@ title: Grid template areas
slug: Web/CSS/CSS_grid_layout/Grid_template_areas
---
+{{CSSRef}}
+
[이전 가이드](/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치)에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을 것이고, 이것은 아이템들을 그리드에 배치할 때 사용할 수 있는 아주 직관적인 방법이 될 수 있습니다. 그렇지만, 아이템을 그리드에 배치할 때 사용할 수 있는 또 다른 방법이 있는데, 이것은 독자적으로 혹은 라인 기준 배치 방법과 함께 혼용해서 사용할 수 있습니다. 이 방법은 이름이 지명된 템플릿 영역을 사용하여 아이템을 배치하는 작업과 연관돼 있으며, 이 방법이 정확히 어떻게 작동하는지 알아보겠습니다. 이것이 때때로 왜 그리드 레이아웃의 ascii-art 방식이라고 일컬어지는지 쉽게 눈치채실 수 있을 겁니다!
## 그리드 영역의 이름 짓기
diff --git a/files/ko/web/css/css_grid_layout/index.md b/files/ko/web/css/css_grid_layout/index.md
index e6344e9c60312c..a104e18d35c411 100644
--- a/files/ko/web/css/css_grid_layout/index.md
+++ b/files/ko/web/css/css_grid_layout/index.md
@@ -3,6 +3,8 @@ title: CSS 그리드 레이아웃
slug: Web/CSS/CSS_grid_layout
---
+{{CSSRef}}
+
<strong>CSS 그리드 레이아웃(Grid Layout)</strong>은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.
테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.
diff --git a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
index f56f015e62c9a8..59985bfd7350ad 100644
--- a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
+++ b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
@@ -3,6 +3,8 @@ title: Relationship of grid layout to other layout methods
slug: Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods
---
+{{CSSRef}}
+
CSS 그리드 레이아웃은 레이아웃 작업을 위한 전체 시스템 중의 일부로서, 다른 CSS 기술과 함께 어우러져 작동하도록 설계되었습니다. 이번 가이드에서는 이미 사용하고 계신 다른 기술과 그리드가 어떻게 잘 어울리는지 설명해 드리겠습니다.
## 그리드와 플랙스박스
diff --git a/files/ko/web/css/css_logical_properties_and_values/floating_and_positioning/index.md b/files/ko/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
new file mode 100644
index 00000000000000..0e7e8a978658d5
--- /dev/null
+++ b/files/ko/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
@@ -0,0 +1,71 @@
+---
+title: Logical properties for floating and positioning
+slug: Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning
+l10n:
+ sourceCommit: 3b4bf3e92c726515fe99042c7f7f119ef1009b68
+---
+
+{{CSSRef}}
+
+[CSS 논리적 속성과 값](/ko/docs/Web/CSS/CSS_logical_properties_and_values) 모듈은 {{cssxref("float")}} 와 {{cssxref("clear")}} 같은 물리적 값들의 논리적 매핑과, [위치 레이아웃](/ko/docs/Web/CSS/CSS_positioned_layout)에서 사용되는 위치 지정 속성에 대한 논리적 매핑을 포함합니다. 이 안내서는 이를 어떻게 사용하는지 소개합니다.
+
+## 매핑된 속성과 값
+
+아래 표는 이 안내서에서 논의된 {{glossary("logical properties")}} 와 그 값 그리고 {{glossary("physical properties")}} 과 값의 매핑에 관한 것입니다. 이 표는 수평 {{cssxref("writing-mode")}}, 즉 왼쪽에서 오른쪽 방향을 가정합니다.
+
+| 논리적 속성 혹은 값 | 물리적 속성 혹은 값 |
+| ---------------------------------- | -------------------------------- |
+| {{cssxref("float")}}: inline-start | {{cssxref("float")}}: left |
+| {{cssxref("float")}}: inline-end | {{cssxref("float")}}: right |
+| {{cssxref("clear")}}: inline-start | {{cssxref("clear")}}: left |
+| {{cssxref("clear")}}: inline-end | {{cssxref("clear")}}: right |
+| {{cssxref("inset-inline-start")}} | {{cssxref("left")}} |
+| {{cssxref("inset-inline-end")}} | {{cssxref("right")}} |
+| {{cssxref("inset-block-start")}} | {{cssxref("top")}} |
+| {{cssxref("inset-block-end")}} | {{cssxref("bottom")}} |
+| {{cssxref("text-align")}}: start | {{cssxref("text-align")}}: left |
+| {{cssxref("text-align")}}: end | {{cssxref("text-align")}}: right |
+
+이 매핑된 속성들에 더하여, 인라인 차원과 블록 차원을 지정할 수 있는 더 많은 단축 속성들이 존재합니다. 이들은 {{cssxref("inset")}} 속성을 제외하고는 물리적 속성과 매핑되지 않습니다.
+
+| 논리적 속성 | 목적 |
+| --------------------------- | ---------------------------------------------------------------------------- |
+| {{cssxref("inset-inline")}} | 인라인 차원에 대해 위 두 개의 내부 여백 값을 동시에 설정합니다. |
+| {{cssxref("inset-block")}} | 블록 차원에 대해 위 두 개의 내부 여백 값을 동시에 설정합니다. |
+| {{cssxref("inset")}} | 물리적으로 매핑된 다중 값으로 네 개의 모든 내부 여백 값을 동시에 설정합니다. |
+
+## Float 와 clear 예제
+
+{{cssxref("float")}} 와 {{cssxref("clear")}} 속성에 사용되는 물리적 값은 `left`, `right` 그리고 `both` 입니다. 이 CSS 논리적 속성과 값 모듈은 `inline-start` 와 `inline-end` 의 값을 `left` 및 `right` 로 매핑으로 정의합니다.
+
+이 예제는 두 개의 박스 요소가 있습니다. 첫번째 박스 요소는 `float: left` 로 플로팅되어 있고, 두번째 박스는 `float: inline-start` 이 사용되었습니다. 만일 `writing-mode` 를 `vertical-rl` 로 변경하거나, `direction` 을 `rtl` 로 변경하게 된다면 왼쪽에 플로팅된 박스는 항상 왼쪽에 붙어 있는 반면, `inline-start` 로 플로팅된 요소는 `direction` 와 `writing-mode` 를 따르게 됩니다.
+
+{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}
+
+## 예제: 위치가 지정된 레이아웃을 위한 내부 여백 속성
+
+CSS 위치 지정은 일반적으로 어떠한 요소를 그것을 포함하는 블록에 상대적으로 배치할 수 있게 합니다. 기본적인 흐름에 기반하여 배치될 위치에 요소를 삽입하게 됩니다. 요소를 뷰포트의 상대적으로 위치시키기 위해서는, 물리적 속성인 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} 그리고 {{cssxref("left")}} 를 사용합니다. 쓰기 모드에서 텍스트의 흐름에 따라 위치를 지정하려면, {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} 그리고 {{cssxref("inset-inline-end")}} 속성들을 사용합니다.
+
+이러한 속성들은 값으로 길이 혹은 백분율을 취하며, 사용자의 화면 크기와도 관련이 있습니다.
+
+아래 예제에서는, `inset-block-start` 과 `inset-inline-end` 속성들은 `position: relative` 가 설정된 회색 점선 경계가 있는 영역 안쪽의 파란색 박스를 절대 위치로 배치합니다. `writing-mode` 속성을 `vertical-rl` 로 변경하거나, `direction: rtl` 을 추가하여 텍스트의 방향에 따라 어떻게 박스가 상대벅으로 유지되는지 확인해 보세요.
+
+{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}
+
+## 두 개 혹은 네 개의 값을 위한 단축 속성
+
+모듈에 있는 다른 속성들과 마찬가지로, 두 개 혹은 네 개의 값을 한번에 사용할 수 있는 단축 속성이 존재합니다.
+
+- {{cssxref("inset")}} — 물리적 매핑으로 네 방향의 값을 한번에 정의합니다.
+- {{cssxref("inset-inline")}} — 논리적 인라인의 내부 여백들을 설정합니다.
+- {{cssxref("inset-block")}} — 논리적 블록의 내부 여백들을 설정합니다.
+
+## 예제: text-align 을 위한 논리적 속성
+
+{{cssxref("text-align")}} 속성은 텍스트의 방향과 관련된 논리적 값이 있습니다. `left` 와 `right` 를 대신하여 `start` 와 `end` 를 사용할 수 있게 됩니다. 아래 예제에서는, `text-align: right` 속성이 첫번째 블록에 설정되어 있고, `text-align: end` 가 두번째 블록에 설정되어 있습니다.
+
+`direction` 값을 `rtl` 로 변경하면, 첫번째 블록의 정렬은 그대로 오른쪽에 있는 것으로 유지되지만, 두번째 블록은 논리적 끝인 왼쪽으로 이동하게 됩니다.
+
+{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}
+
+이는 박스를 정렬할 때 물리적 방향 시작과 끝을 사용하는 경우에 더 일관되게 동작합니다.
diff --git a/files/ko/web/css/css_media_queries/printing/index.md b/files/ko/web/css/css_media_queries/printing/index.md
new file mode 100644
index 00000000000000..ce015ae621fc87
--- /dev/null
+++ b/files/ko/web/css/css_media_queries/printing/index.md
@@ -0,0 +1,102 @@
+---
+title: Printing
+slug: Web/CSS/CSS_media_queries/Printing
+l10n:
+ sourceCommit: f7daf15512ea736498837b68bcc36d82d6a323f4
+---
+
+{{CSSRef}}
+
+웹 사이트나 애플리케이션에서 사용자가 콘텐츠를 인쇄할 때 사용자 경험을 향상시키고자 하는 경우가 존재합니다.
+다음은 몇 가지 가능한 시나리오입니다.
+
+- 용지의 크기와 모양에 맞추어 레이아웃을 맞추고 싶은 경우
+- 용지에 인쇄되는 외관을 향상시키기 위해 다른 스타일을 사용하고 싶은 경우
+- 더 나은 결과물을 위해 높은 해상도를 사용하고 싶은 경우
+- 인쇄가 시작되기 전에 지정된 형식의 버전의 콘텐츠를 표시하는 것처럼 인쇄하는 사용자의 경험을 조정하고 싶은 경우
+
+위에 제공된 아주 일반적인 시나리오 외에도 인쇄 절차를 관리하려는 더 많은 방법이 있을 수 있습니다.
+이 안내서에서는 웹 콘텐츠를 어떻게 더 나은 방법으로 인쇄하는지에 대한 팁과 기술을 제공합니다.
+
+## 인쇄 스타일시트 사용하기
+
+다음 {{HTMLElement("head")}} 태그를 추가해 보세요.
+
+```html
+<link href="/path/to/print.css" media="print" rel="stylesheet" />
+```
+
+## 미디어 쿼리와 @page 를 사용하여 인쇄 콘텐츠 제어하기
+
+CSS 의 {{cssxref("@media")}} @-규칙을 사용하면 웹 페이지가 화면에 보이는 경우와 PDF 형식인 경우, 그리고 용지에 인쇄되는 경우마다 각각 다른 스타일을 지정할 수 있게 됩니다. `print` [미디어 유형](/ko/docs/Web/CSS/@media#media_type) 은 인쇄 미디어를 위한 스타일을 적용하는데, 이 스타일은 인쇄된 콘텐츠에만 적용됩니다.
+
+아래 코드를 스타일 시트 가장 뒤에 삽입해 보세요. [명시도](/ko/docs/Web/CSS/Specificity) 와 우선순위는 여전히 적용된다는 것을 참고해야 합니다.
+
+```css
+@media print {
+ /* 인쇄 스타일은 이곳에 작성하면 됩니다. */
+ #header,
+ #footer,
+ #nav {
+ display: none !important;
+ }
+}
+```
+
+{{cssxref("@page")}} @-규칙을 사용하여 페이지의 크기, 방향 및 바깥 여백을 포함한 페이지의 다양한 요소들을 수정할 수 있습니다. `@page` @-규칙은 인쇄될 모든 페이지 혹은 특정 페이지들의 집합을 대상으로도 사용될 수 있습니다.
+
+## 인쇄 요청 감지하기
+
+브라우저는 {{domxref("Window/beforeprint_event", "beforeprint")}} 와 {{domxref("Window/afterprint_event", "afterprint")}} 이벤트를 통해 인쇄가 언제 발생할지 감지할 수 있습니다. 이를 활용하여 인쇄 도중 표시되는 사용자 인터페이스를 조정할 수 있습니다(예를 들어, 인쇄 과정에서는 사용자의 인터페이스를 표시하거나 숨기는 등).
+
+## 예제
+
+여기서 일반적인 예제를 확인해 보세요.
+
+### 인쇄가 끝나면 자동적으로 창을 닫기
+
+다음은 콘텐츠가 모두 인쇄가 되면 자동으로 창을 닫는 예제입니다.
+
+```js
+window.addEventListener("afterprint", () => self.close);
+```
+
+### 외부 페이지를 열지 않고 인쇄하기
+
+외부 페이지를 열지 않고 인쇄만 하는 경우에는 숨겨진 {{HTMLElement("iframe")}} 유틸리티를 활용할 수 있습니다 ((참고: [HTMLIFrameElement](/ko/docs/Web/API/HTMLIFrameElement))), 사용자가 해당 콘텐츠를 인쇄한 이후 자동으로 이를 제거합니다. 다음은 `externalPage.html` 라는 파일을 인쇄하는 예제입니다.
+
+#### HTML
+
+```html
+<button id="print_external">외부 페이지 인쇄하기!</button>
+```
+
+#### JavaScript
+
+```js
+function setPrint() {
+ const closePrint = () => {
+ document.body.removeChild(this);
+ };
+ this.contentWindow.onbeforeunload = closePrint;
+ this.contentWindow.onafterprint = closePrint;
+ this.contentWindow.print();
+}
+
+document.getElementById("print_external").addEventListener("click", () => {
+ const hideFrame = document.createElement("iframe");
+ hideFrame.onload = setPrint;
+ hideFrame.style.display = "none"; // iframe 숨김 처리
+ hideFrame.src = "external-page.html";
+ document.body.appendChild(hideFrame);
+});
+```
+
+## 같이 보기
+
+- [`window.print`](/ko/docs/Web/API/Window/print)
+- {{ domxref("window.beforeprint_event", "beforeprint") }} 이벤트
+- {{ domxref("window.afterprint_event", "afterprint") }} 이벤트
+- [미디어 쿼리](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- {{cssxref("@media")}}
+- [CSS paged media](/ko/docs/Web/CSS/CSS_paged_media) 모듈
diff --git a/files/ko/web/css/css_media_queries/testing_media_queries/index.md b/files/ko/web/css/css_media_queries/testing_media_queries/index.md
new file mode 100644
index 00000000000000..7433d49be67e23
--- /dev/null
+++ b/files/ko/web/css/css_media_queries/testing_media_queries/index.md
@@ -0,0 +1,89 @@
+---
+title: Testing media queries programmatically
+slug: Web/CSS/CSS_media_queries/Testing_media_queries
+l10n:
+ sourceCommit: f7daf15512ea736498837b68bcc36d82d6a323f4
+---
+
+{{CSSRef}}
+
+{{Glossary("DOM")}} 은 {{domxref("MediaQueryList")}} 인터페이스와 그 메서드 및 속성을 통해 {{Glossary("media query")}} 의 테스트 결과를 프로그래밍 방식의 기능을 제공합니다. `MediaQueryList` 객체를 생성하게 되면 [쿼리](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries) 의 결과물을 확인하거나 결과가 바뀌면 그에 대한 알림을 받을 수 있게 됩니다.
+
+## 미디어 쿼리 목록 생성하기
+
+미디어 쿼리의 결과를 평가하기 전에, 쿼리를 나타내는 {{domxref("MediaQueryList")}} 객체 생성이 선행되어야 합니다. 이를 실행하기 위해서는, {{domxref("window.matchMedia")}} 메서드를 사용할 수 있습니다.
+
+예를 들어, 장치가 가로 모드인지 세로 모드인지 [방향](/ko/docs/Web/CSS/@media/orientation)을 확인하는 쿼리 목록을 설정하려면 다음과 같이 할 수 있습니다.
+
+```js
+const mediaQueryList = window.matchMedia("(orientation: portrait)");
+```
+
+## 쿼리의 결과 확인하기
+
+미디어 쿼리 목록을 생성하고 나면, [`matches`](/ko/docs/Web/API/MediaQueryList/matches) 속성의 값을 통하여 쿼리의 결과를 확인할 수 있게 됩니다.
+
+```js
+if (mediaQueryList.matches) {
+ /* 뷰포트는 현재 세로 방향입니다. */
+} else {
+ /* 뷰포트는 현재 세로 방향이 아닌 가로 방향입니다. */
+}
+```
+
+## 쿼리 알림 받기
+
+쿼리의 평가 결과의 변경점을 지속적으로 확인해야 할 경우에는, 이를 반복적으로 확인하는 것보다 [이벤트 수신기](/ko/docs/Web/API/EventTarget/addEventListener) 를 활용하는 것이 더 효율적입니다. 이를 위해 미디어 쿼리의 상태가 변경될 때 (예를 들어, 미디어 쿼리 테스트가 `true` 에서 `false` 변경될 때 등) 호출될 콜백함수를 사용하여 {{domxref("MediaQueryList")}} 객체에 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 메서드를 활용할 수 있습니다.
+
+```js
+// 쿼리 목록 생성하기
+const mediaQueryList = window.matchMedia("(orientation: portrait)");
+
+//이벤트 수신기의 콜백 함수 정의하기
+function handleOrientationChange(mql) {
+ // …
+}
+
+// 방향 변경 처리기를 한 번 실행합니다.
+handleOrientationChange(mediaQueryList);
+
+//쿼리 목록에 콜백 함수를 수신기로써 추가합니다.
+mediaQueryList.addEventListener("change", handleOrientationChange);
+```
+
+이 코드는 방향을 테스트하는 미디어 쿼리 목록을 생성하고, 여기에 이벤트 수신기를 추가합니다. 수신기를 정의하고 나면, 해당 수신기를 직접적으로 호출할 수 있습니다. 이로 인하여 수신기는 현재 장치의 방향을 기반으로 하여 조정이 이루어지고, 그렇지 않다면 코드는 장치가 실제로 가로 방향 모드에 있지만 세로 방향 모드에 있다고 가정할 수 있게 됩니다.
+
+`handleOrientationChange()` 함수는 쿼리의 결과를 확인하고 방향이 변경될 때에 실행해야 할 작업들을 처리합니다.
+
+```js
+function handleOrientationChange(evt) {
+ if (evt.matches) {
+ /* 뷰포트가 현재 세로 방향입니다. */
+ } else {
+ /* 뷰포트가 현재 가로 방향입니다. */
+ }
+}
+```
+
+위에서 `evt` 파라미터를 정의했는데 이는 {{domxref("MediaQueryListEvent.media","media")}} 와 {{domxref("MediaQueryListEvent.matches","matches")}} 속성을 포함하는 {{domxref("MediaQueryListEvent")}} 타입의 객체입니다. `MediaQueryList` 의 이러한 기능들에 직접 접근하거나 이벤트 객체를 통하여 쿼리할 수 있습니다.
+
+## 쿼리 알림 중단하기
+
+미디어 쿼리의 값이 변화하면 받는 알림을 중단하기 위해서는, 이전에 정의했던 콜백 함수의 이름을 전달하여 `MediaQueryList` 의 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 를 호출하여 중단할 수 있습니다.
+
+```js
+mediaQueryList.removeEventListener("change", handleOrientationChange);
+```
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [미디어 쿼리](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [CSS 미디어 쿼리](/ko/docs/Web/CSS/CSS_media_queries) 모듈
+- [CSS 객체 모델](/ko/docs/Web/API/CSS_Object_Model) 모듈
+- {{domxref("window.matchMedia()")}}
+- {{domxref("MediaQueryList")}}
+- {{domxref("MediaQueryListEvent")}}
diff --git a/files/ko/web/css/css_media_queries/using_media_queries/index.md b/files/ko/web/css/css_media_queries/using_media_queries/index.md
index c1555fae1e750d..dc22f7800c027d 100644
--- a/files/ko/web/css/css_media_queries/using_media_queries/index.md
+++ b/files/ko/web/css/css_media_queries/using_media_queries/index.md
@@ -1,17 +1,19 @@
---
title: 미디어 쿼리 사용하기
slug: Web/CSS/CSS_media_queries/Using_media_queries
+l10n:
+ sourceCommit: c72b86b3d6818ec6c8df1d52a77513d769f4164e
---
{{cssref}}
-**미디어 쿼리**는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.
+**미디어 쿼리**를 사용하면 장치의 단말기의 유형(출력물 vs. 화면) 또는 화면 해상도나 방향, {{glossary("aspect ratio", "종횡비")}}, 브라우저 {{glossary("viewport", "뷰포트")}} 너비나 높이, 모션 감소, 데이터 사용량 혹은 투명도와 같은 사용자 선호도 기능이나 특성에 따라 CSS 스타일을 적용할 때 유용합니다.
미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.
- [CSS](/ko/docs/Web/CSS) {{cssxref("@media")}}와 {{cssxref("@import")}} [@규칙](/ko/docs/Web/CSS/At-rule)을 사용해 특정 조건에 따라 스타일을 적용할 때.
- {{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 [HTML](/ko/docs/Web/HTML) 요소에 `media` 특성을 사용해 특정 매체만 가리키게 할 때.
-- {{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} [JavaScript](/ko/docs/Web/JavaScript) 메서드를 사용해 [미디어 상태를 판별하고 관측](/ko/docs/Web/CSS/Media_Queries/Testing_media_queries)할 때.
+- {{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} [JavaScript](/ko/docs/Web/JavaScript) 메서드를 사용해 [미디어 상태를 판별하고 관측](/ko/docs/Web/CSS/CSS_media_queries/Testing_media_queries)할 때.
> **참고:** 이 페이지의 CSS는 시연용으로 `@media`를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.
@@ -19,126 +21,141 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.
-미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.
+- [미디어 유형](/ko/docs/Web/CSS/@media#media_types) 은 `all`, `print`, `screen` 으로 미디어 쿼리가 적용되는 장치의 범주를 정의합니다.
+
+ 미디어 유형은 `not`이나 `only` 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 `all`을 사용합니다.
+
+- [미디어 특성](/ko/docs/Web/CSS/@media#media_features) 은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다.
+
+ - {{cssxref("@media/any-hover", "any-hover")}}
+ - {{cssxref("@media/any-pointer", "any-pointer")}}
+ - {{cssxref("@media/aspect-ratio", "aspect-ratio")}}
+ - {{cssxref("@media/color", "color")}}
+ - {{cssxref("@media/color-gamut", "color-gamut")}}
+ - {{cssxref("@media/color-index", "color-index")}}
+ - {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}}
+ - {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}}
+ - {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}}
+ - {{cssxref("@media/display-mode", "display-mode")}}
+ - {{cssxref("@media/dynamic-range", "dynamic-range")}}
+ - {{cssxref("@media/forced-colors", "forced-colors")}}
+ - {{cssxref("@media/grid", "grid")}}
+ - {{cssxref("@media/height", "height")}}
+ - {{cssxref("@media/hover", "hover")}}
+ - {{cssxref("@media/inverted-colors", "inverted-colors")}}
+ - {{cssxref("@media/monochrome", "monochrome")}}
+ - {{cssxref("@media/orientation", "orientation")}}
+ - {{cssxref("@media/overflow-block", "overflow-block")}}
+ - {{cssxref("@media/overflow-inline", "overflow-inline")}}
+ - {{cssxref("@media/pointer", "pointer")}}
+ - {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}
+ - {{cssxref("@media/prefers-contrast", "prefers-contrast")}}
+ - {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}
+ - {{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}} {{experimental_inline}}
+ - {{cssxref("@media/resolution", "resolution")}}
+ - {{cssxref("@media/scripting", "scripting")}}
+ - {{cssxref("@media/update", "update")}}
+ - {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}}
+ - {{cssxref("@media/width", "width")}}.
+
+ 예를 들어, {{cssxref("@media/hover", "hover")}} 기능은 요소 위에서 호버를 했을 때 장치가 이를 지원하는지 확인하는 쿼리를 허용합니다.
+ 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.
+
+- `not`, `and`, `only` 와 같은 [논리 연산자](/ko/docs/Web/CSS/@media#logical_operators) 를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.
+
+미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산 값이 참일 때 `true`로 계산됩니다.
+특정할 수 없는 미디어 유형을 가진 쿼리는 언제나 거짓으로 계산됩니다.
+
+> **참고:** [{{HTMLElement("link")}}의 미디어 쿼리가 `false`를 반환하더라도 스타일 시트는 다운로드](https://scottjehl.github.io/CSS-Download-Tests/)됩니다. 다운로드는 진행되지만, 다운로드의 우선순위는 훨씬 낮아집니다.
+> 그렇지만 그 안의 내용은 쿼리가 `true` 가 되어야 적용됩니다.
+> 왜 이런 일이 발생할 수 있는지는 Tomayac 의 블로그 [왜 브라우저는 일치하지 않는 미디어 쿼리가 있는 스타일 시트를 다운로드할까](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-queries-eb61b91b85a2) 를 참고해 보세요.
-> **참고:** {{HTMLElement("link")}}의 미디어 쿼리가 [거짓을 반환하더라도 스타일시트는 다운로드](http://scottjehl.github.com/CSS-Download-Tests/)됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.
-
-### 미디어 유형
-
-미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 `not`이나 `only` 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 `all`을 사용합니다.
-
-- **`all`**
- - : 모든 장치에 적합합니다.
-- `print`
- - : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
- ([인쇄 미디어](/ko/docs/Web/CSS/Paged_Media) 문서를 방문해 `print` 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)
-- `screen`
- - : 주로 화면이 대상입니다.
-- `speech`
- - : 음성 합성장치 대상입니다.
-
-> **참고:** **사용하지 않는 미디어 유형:** CSS2.1과 [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) 모듈은 여러가지 추가 유형(`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`)을 정의했으나 [Media Queries 4](http://dev.w3.org/csswg/mediaqueries/#media-types)에서 제거됐으므로 사용해선 안됩니다. `aural`은 유사한 유형인 `speech`로 대체됐습니다.
-
-### 미디어 특성
-
-미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.
-
-| 이름 | 요약 | 참고 |
-| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| {{cssxref("@media/any-hover", "any-hover")}} | 사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가? | Media Queries Level 4에서 추가 |
-| {{cssxref("@media/any-pointer", "any-pointer")}} | 사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가? | Media Queries Level 4에서 추가 |
-| {{cssxref("@media/aspect-ratio", "aspect-ratio")}} | 뷰포트의 가로세로비 | |
-| {{cssxref("@media/color", "color")}} | 출력 장치의 색상 채널별 비트 수, 흑백일 땐 0 | |
-| {{cssxref("@media/color-gamut", "color-gamut")}} | 사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위 | Media Queries Level 4에서 추가 |
-| {{cssxref("@media/color-index", "color-index")}} | 출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0 | |
-| {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}} | 출력 장치의 가로세로비 | Media Queries Level 4에서 제거 |
-| {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}} | 출력 장치 렌더링 표면의 높이 | Media Queries Level 4에서 제거 |
-| {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}} | 출력 장치 렌더링 표면의 너비 | Media Queries Level 4에서 제거 |
-| {{cssxref("@media/display-mode", "display-mode")}} | 웹 앱 매니페스트의 [`display`](/ko/docs/Web/Manifest#display) 항목이 정의한 애플리케이션의 표시 모드 | [Web App Manifest 명세](http://w3c.github.io/manifest/#the-display-mode-media-feature)에서 정의 |
-| {{cssxref("@media/forced-colors", "forced-colors")}} | 사용자 에이전트가 색상 팔레트를 제한하는지 여부 | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/grid", "grid")}} | 장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나? | |
-| {{cssxref("@media/height", "height")}} | 뷰포트의 높이 | |
-| {{cssxref("@media/hover", "hover")}} | 주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가? | Media Queries Level 4에서 제거 |
-| {{cssxref("@media/inverted-colors", "inverted-colors")}} | 사용자 에이전트나 운영 체제가 색상을 반전 중인가? | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/light-level", "light-level")}} | 주변 환경의 광도 | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/monochrome", "monochrome")}} | 출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0 | |
-| {{cssxref("@media/orientation", "orientation")}} | 뷰포트의 방향 | |
-| {{cssxref("@media/overflow-block", "overflow-block")}} | 콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가? | Media Queries Level 4에서 추가 |
-| {{cssxref("@media/overflow-inline", "overflow-inline")}} | 콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가? | Media Queries Level 4에서 추가 |
-| {{cssxref("@media/pointer", "pointer")}} | 주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가? | Media Queries Level 4에서 추가 |
-| {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} | 라이트/다크 색채 조합 중 사용자가 선호하는 것 | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/prefers-contrast", "prefers-contrast")}} | 사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지 | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} | 사용자가 줄어든 움직임을 선호함 | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}} | 사용자가 줄어든 투명도를 선호함. | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/resolution", "resolution")}} | 출력 장치의 픽셀 밀도 | |
-| {{cssxref("@media/scan", "scan")}} | 출력 장치의 스캔 절차 | |
-| {{cssxref("@media/scripting", "scripting")}} | JavaScript 등 스크립트 사용 가능 여부 탐지 | Media Queries Level 5에서 추가 |
-| {{cssxref("@media/update-frequency", "update")}} | 출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기 | Media Queries Level 4에서 추가 |
-| {{cssxref("@media/width", "width")}} | 스크롤바를 포함한 뷰포트 너비 | |
-
-### 논리 연산자
-
-`not`, `and`, `only` 와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.
-
-#### `and`
+## 미디어 유형 특정하기
-`and` 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.
+미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다.
+비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다.
+예를 들어 다음의 CSS는 프린터를 특정합니다.
-#### `not`
+```css
+@media print {
+ /* … */
+}
+```
-`not` 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. `not` 연산자를 사용할 경우 **반드시** 미디어 유형도 지정해야 합니다.
+다수의 장치를 특정할 수도 있습니다.
+예컨대 아래 `@media` 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.
-> **참고:** Level 3 모듈에서는 `not` 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.
+```css
+@media screen, print {
+ /* … */
+}
+```
-#### `only`
+[미디어 유형](#미디어_유형) 을 참고하여 가능한 미디어 유형의 목록을 확인해보세요.
+미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재하는데, 원래 정의된 대다수의 미디어 유형은 사용 중단되었으며, `screen`, `print`, `all` 만 남아 있습니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.
-`only` 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. `only`를 사용하지 않은 `screen and (max-width: 500px)` 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 `screen`으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. `only` 연산자를 사용할 경우 **반드시** 미디어 유형도 지정해야 합니다.
+## 미디어 기능 특정하기
-#### `,` (쉼표)
+미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다.
+예를 들어, 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다.
+다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.
-쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 `or` 연산자처럼 동작합니다.
+```css
+@media (hover: hover) {
+ /* … */
+}
+```
-## 미디어 유형 특정하기
+미디어 기능은 범위 또는 이산형이기도 합니다.
-미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.
+이산형 기능은 가능한 키워드 값의 {{glossary("enumerated", "열거형")}} 집합에서 그 값을 가져옵니다. 예를 들어, 이산형 `orientation` 기능은 `landscape` 또는 `portrait` 값을 허용합니다.
```css
-@media print { ... }
+@media print and (orientation: portrait) {
+ /* … */
+}
```
-다수의 장치를 특정할 수도 있습니다. 예컨대 아래 `@media` 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.
+많은 미디어 기능은 **범위 기능**으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다.
+다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 1250px 이하인 경우에만 스타일을 적용합니다.
```css
-@media screen, print { ... }
+@media (max-width: 1250px) {
+ /* … */
+}
```
-[미디어 유형](#미디어_유형) 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.
-
-## 미디어 기능 특정하기
-
-미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.
+이는 다음과 같은 방식으로 작성될 수도 있습니다.
```css
-@media (hover: hover) { ... }
+@media (width <= 1250px) {
+ /* … */
+}
```
-많은 미디어 기능은 **범위 기능**으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.
+미디어 쿼리 범위 기능을 사용하면 포괄적인 `min-` 과 `max-` 접두사나 더 간결한 범위 구문 연산자인 `<=` 와 `=>` 를 사용할 수 있습니다.
+
+다음 예제들은 서로 동일한 기능을 합니다.
```css
-@media (max-width: 12450px) { ... }
+@media (min-width: 30em) and (max-width: 50em) {
+ /* … */
+}
+
+@media (30em <= width <= 50em) {
+ /* … */
+}
```
미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 `0`이 아닐 때 (Level 4부터는 `0`과 `none`이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.
```css
-@media (color) { ... }
+@media (color) {
+ /* … */
+}
```
-어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.
-
-```css
-@media speech and (aspect-ratio: 11/5) { ... }
-```
+어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다.
[미디어 특성](#미디어_특성) 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.
@@ -146,122 +163,139 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries
때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : `not`, `and`, 그리고 `only`를 사용하면 됩니다. 더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.
-앞서 예와 같이, `and` 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 `and` 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 `not` 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. `only` 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.
+앞서 예와 같이, `and` 연산자를 사용하여 미디어 유형과 미디어기능을 그룹지을 수 있습니다. 또한 `and` 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 `not` 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. `only` 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.
-> **참고:** 대부분의 경우, `all` 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 `not` 이나 `only` 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.
+> **참고:** 대부분의 경우, `all` 미디어 유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다.
+> 하지만, 사용자가 `not` 이나 `only` 연산자를 사용하면, 사용자는 반드시 미디어 유형을 특정해야 합니다.
### 다수의 유형과 기능 조합하기
-The `and` 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:
+`and` 연산자는 미디어 기능과 미디어 유형 혹은 다른 미디어 기능들과 연결해줍니다.
+이 예에서는 두 개의 미디어 기능을 기기의 landscape(가로 방향화면) 방향으로 제한시키고 최소폭을 30 ems로 지정합니다.
```css
-@media (min-width: 30em) and (orientation: landscape) { ... }
+@media (min-width: 30em) and (orientation: landscape) {
+ /* … */
+}
```
-화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 `screen` 미디어유형에 미디어기능을 연결합니다:
+화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 `screen` 미디어 유형에 미디어 기능을 연결합니다.
```css
-@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+@media screen and (min-width: 30em) and (orientation: landscape) {
+ /* … */
+}
```
### 다수의 쿼리 판별
-쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:
+쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어 유형, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다.
-```css
-@media (min-height: 680px), screen and (orientation: portrait) { ... }
-```
-
-위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.
-
-### 쿼리의 뜻 반전하기
-
-`not` 키워드는 미디어쿼리 전체의 의미를 반전시킵니다. 이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) `not` 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다. `not` 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:
+다음 예제 규칙에서는 두 개의 미디어 쿼리가 포함되어 있습니다. 블록의 스타일은 사용자의 기기의 높이가 680px 이상이거나, 브라우저의 뷰포트가 세로 모드 (뷰포트의 높이가 너비보다 큰 경우)일 때 적용될 것입니다.
```css
-@media not all and (monochrome) { ... }
+@media (min-height: 680px), screen and (orientation: portrait) {
+ /* … */
+}
```
-... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:
-
-```css
-@media not (all and (monochrome)) { ... }
-```
+위의 예에서 보면, 만일 사용자가 페이지 높이가 800px인 PDF를 출력하기 위해 프린터를 사용한다면, 뷰포트의 높이가 `680px` 이상이므로 첫 번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다.
+마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두 번째 쿼리가 적용될 것이고, 두 번째 미디어 쿼리도 참값을 반환하게 됩니다.
-... 다음과 같이 되는 것이 아닙니다:
+쉼표로 연결된 미디어 쿼리 목록에서는, 각각의 개별적인 미디어 쿼리가 쉼표에서 끝나고, 목록의 마지막 미디어 쿼리는 여는 중괄호 (`{`)에서 끝나게 됩니다.
-```css example-bad
-@media (not all) and (monochrome) { ... }
-```
+### 쿼리의 뜻 반전하기
-다른 예를 보자면, 다음의 미디어 쿼리는:
+`not` 키워드는 미디어 쿼리 전체의 의미를 반전시킵니다. 예를 들어, 아래에 있는 CSS 스타일은 프린트가 가능한 미디어를 제외한 전부에 적용될 것입니다.
```css
-@media not screen and (color), print and (color) { ... }
+@media not print {
+ /* … */
+}
```
-... 이렇게 평가됩니다:
+`not` 키워드는 적용된 미디어쿼리를 반전시킵니다. 괄호가 사용되지 않으면 `not` 은 미디어 쿼리와 그것이 포함되어 있는 모든 기능들을 반전시키게 됩니다. 즉, 쉼표로 연결된 미디어 쿼리 목록에서 각 `not` 은 그것이 포함된 단일 쿼리에 저굥이 되며, 해당 단일 쿼리 내의 **모든** 기능에도 적용이 될 것입니다. 아래 예제에서는, `not` 은 첫 번째 쉼표에서 끝나는 첫 번째 미디어 쿼리에만 적용됩니다.
```css
-@media (not (screen and (color))), print and (color) { ... }
+@media not screen and (color), print and (color) {
+ /* … */
+}
```
-### 구형 브라우저와의 호환성 향상하기
-
-`only` 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. _신형브라우저에는 아무런 영향을 주지 않습니다._
+위 쿼리는 아래처럼 평가됩니다.
```css
-@media only screen and (color) { ... }
+@media (not (screen and (color))), print and (color) {
+ /* … */
+}
```
-## Level 4의 구문 향상
+두 예제는 모두 유효합니다. 미디어 조건은 괄호 안에 (`()`) 모두 감싸는 것으로 그룹화할 수 있습니다. 이러한 그룹들은 단일 미디어 쿼리가 그러하듯이, 다른 조건에 중첩될 수도 있습니다.
-미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a _range context_ for writing such queries. 폭을 표현하기 위해 `max-` 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:
+`not` 은 미디어 쿼리에서 가장 나중으로 평가되는데, 이는 쿼리 내부의 단일 기능이 아니라 전체 미디어 쿼리에 적용된다는 것을 의미합니다. 마치 `not` 바로 뒤에 여는 괄호를 추가하고, 미디어 쿼리 끝에 닫는 괄호를 추가한 것처럼 적용됩니다.
-> **참고:** 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만, 몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 [`@media` browser compatibility table](/ko/docs/Web/CSS/@media#Browser_compatibility) 를 참조해 주십시요.
+아래 쿼리를 확인해 보세요.
```css
-@media (max-width: 30em) { ... }
+@media not all and (monochrome) {
+ /* … */
+}
```
-미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:
+위 쿼리는 다음처럼 평가됩니다.
```css
-@media (width <= 30em) { ... }
+@media not (all and (monochrome)) {
+ /* … */
+}
```
-`min-` 과 `max-` 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:
+이는 아래와 같이 평가된다는 의미는 아닙니다.
-```css
-@media (min-width: 30em) and (max-width: 50em) { ... }
+```css example-bad
+@media (not all) and (monochrome) {
+ /* … */
+}
```
-Level 4 구문에서는 이렇게 표현할 수 있습니다:
+미디어 쿼리 내의 단일 쿼리를 반전하려면 괄호를 사용하세요. `not` 과 미디어 기능을 괄호로 감싸게 된다면 반전할 쿼리의 구성을 제한할 수 있습니다.
+
+아래 예제에서는, `all` 미디어 유형이 아닌 `hover` 미디어 기능을 반전시킬 것입니다.
```css
-@media (30em <= width <= 50em ) { ... }
+@media all and (not(hover)) {
+ /* … */
+}
```
-Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 **and**, **not**, **or**.연산자를 결합할 수 있습니다.
+`not(hover)` 는 장치에서 hover 기능이 없을 때 일치합니다. 이러한 케이스에서는, 괄호가 사용되었기 때문에 `not` 이 `all` 에 적용된 것이 아니라 `hover` 에 적용된 것입니다.
-### `not`으로 기능 부정
+### 구형 브라우저와의 호환성 향상하기
-미디어기능에 `not()` 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 `not(hover)` 를 사용할 수 있습니다.
+`only` 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. 최신 브라우저에는 아무런 영향을 주지 않습니다.
```css
-@media (not(hover)) { ... }
+@media only screen and (color) {
+ /* … */
+}
```
### `or`로 다수의 기능 판별
-`or` 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 `true` 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.
+`or` 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 `true` 값을 반환하게 할 수 있습니다.
+예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.
```css
-@media (not (color)) or (hover) { ... }
+@media (not (color)) or (hover) {
+ /* … */
+}
```
## 같이 보기
-- [프로그래밍으로 미디어 쿼리 판별하기](/ko/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [@media](/ko/docs/Web/CSS/@media)
+- [컨테이너 쿼리](/ko/docs/Web/CSS/CSS_containment/Container_queries)
+- [프로그래밍으로 미디어 쿼리 판별하기](/ko/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
+- [CSS 미디어 쿼리와 애니메이션](https://davidwalsh.name/animate-media-queries)
- [Mozilla 미디어 기능 확장](/ko/docs/Web/CSS/Mozilla_Extensions#Media_features)
- [WebKit 미디어 기능 확장](/ko/docs/Web/CSS/Webkit_Extensions#Media_features)
diff --git a/files/ko/web/css/css_media_queries/using_media_queries_for_accessibility/index.md b/files/ko/web/css/css_media_queries/using_media_queries_for_accessibility/index.md
index 12686114b25003..fc6ff338894264 100644
--- a/files/ko/web/css/css_media_queries/using_media_queries_for_accessibility/index.md
+++ b/files/ko/web/css/css_media_queries/using_media_queries_for_accessibility/index.md
@@ -1,6 +1,8 @@
---
title: 접근성을 위한 미디어 쿼리 사용하기
slug: Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility
+l10n:
+ sourceCommit: f7daf15512ea736498837b68bcc36d82d6a323f4
---
**미디어쿼리**(**Media Queries**)는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.
@@ -20,7 +22,7 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility
### 예제
-이 예제는 접근성 설정에서 동작 줄이기를 설정하지 않으면 난잡한 애니메이션이 실행됩니다.
+이 예제는 [접근성 환경 설정](/ko/docs/Web/Accessibility/Accessibility:_What_users_can_to_to_browse_safely)에서 축소 모션을 활성화시키지 않았다면 난잡한 애니메이션이 실행됩니다.
#### HTML
@@ -32,7 +34,6 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility
```css
.animation {
- -webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
@@ -43,43 +44,12 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility
}
```
-## 고대비 모드 (High Contrast Mode)
+`prefers-reduced-motion` 의 값은 "none" 이 아닌 `reduce` 입니다. 이 설정은 모든 애니메이션이 삭제되어야 한다는 것이 아니라, `* {animation: none !important;}` 을 사용하여야 달성할 수 있다는 것을 의미합니다. 오히려, 사용자는 애니메이션이 기능이나 전달될 정보가 필수적이지 않는 한 사용자의 상호 작용으로 트리거되는 애니메이션을 포함한 모션 애니메이션이 비활성화되는 것을 기대합니다 (참고: [WCAG: 상호작용으로부터의 애니메이션](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)).
-{{CSSRef}}{{Non-standard_header}}
+## 같이 보기
-**-ms-high-contrast** [CSS media 속성](/ko/docs/Web/CSS)은 애플리케이션이 고대비 모드인지, 어떤 색상으로 강조되어 있는지를 정의하는 [Microsoft 확장기능](/ko/docs/Web/CSS/Microsoft_extensions)입니다.
-
-저시력 사용자나 대비감도에 문제가 있는 사람뿐만 아니라 직사광선 아래에서 컴퓨터나 휴대폰을 사용하는 사람에게도 도움이 됩니다.
-
-### 문법
-
-**`-ms-high-contrast`** 미디어 속성(Media Feature)은 다음 값 중 하나를 지정하여 사용할 수 있습니다.
-
-### 속성값
-
-- `active`
- - : 시스템이 색상과 관계없이 고대비 모드로 설정되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.
-- `black-on-white`
- - : 시스템이 흰 바탕에 검은 글씨 고대비 모드로 설정되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.
-- `white-on-black`
- - : 시스템이 검은 바탕에 흰 글씨 고대비 모드로 설정되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.
-
-### 예제
-
-다음 선언된 스타일들은 어플리케이션이 모든 종류의 색상, black-on-white 색상, white-on-black 색상의 고대비 모드로 표시되도록 합니다.
-
-```css
-@media screen and (-ms-high-contrast: active) {
- /* 모든 고대비 모드에 대한 스타일 규칙입니다 */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
- div {
- background-image: url("image-bw.png");
- }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
- div {
- background-image: url("image-wb.png");
- }
-}
-```
+- [`prefers-contrast`](/ko/docs/Web/CSS/@media/prefers-contrast): 유저의 대비 선호도를 기반으로한 페이지 스타일 조정
+- [`prefers-reduced-transparency`](/ko/docs/Web/CSS/@media/prefers-reduced-transparency)
+- [`prefers-color-scheme`](/ko/docs/Web/CSS/@media/prefers-color-scheme)
+- [`inverted-colors`](/ko/docs/Web/CSS/@media/inverted-colors)
+- [모션 민감도를 고려한 축소된 모션 디자인](https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/)
diff --git a/files/ko/web/css/css_nesting/index.md b/files/ko/web/css/css_nesting/index.md
new file mode 100644
index 00000000000000..6592c932c6b2c2
--- /dev/null
+++ b/files/ko/web/css/css_nesting/index.md
@@ -0,0 +1,45 @@
+---
+title: CSS nesting
+slug: Web/CSS/CSS_nesting
+l10n:
+ sourceCommit: 13746bf1d5d8e5c7c7bce5e1281e6eeee77b3d44
+---
+
+{{CSSRef}}
+
+**CSS 중첩** 모듈은 중첩 선택자들의 문법을 정의합니다. 그리고 부모 규칙 선택자의 상대적인 자식 규칙의 선택자를 지정하여 하나의 스타일 규칙을 다른 스타일 규칙 안에 중첩할 수 있는 기능을 제공합니다.
+
+CSS 중첩은 [Sass](https://sass-lang.com/) 와 같은 CSS 전처리기와는 다릅니다. CSS 전처리기는 사전에 컴파일되지만, CSS 중첩은 브라우저에 의해 파싱됩니다.
+
+CSS 중첩은 스타일시트를 더 읽기 쉽게, 모듈화하며, 그리고 더 쉬운 유지 보수성을 갖출 수 있게 합니다. 뿐만 아니라 CSS 파일의 크기를 줄이는 데에 도움이 되기 때문에 사용자가 다운로드하는 데이터의 양을 감소시킬 수 있습니다.
+
+## 참고서
+
+### 선택자
+
+- [`&` 중첩 선택자](/ko/docs/Web/CSS/Nesting_selector)
+
+## 안내서
+
+- [CSS 중첩 사용하기](/ko/docs/Web/CSS/CSS_nesting/Using_CSS_nesting)
+ - : CSS 중첩 사용 방법에 대해 설명합니다.
+- [CSS 중첩 @-규칙](/ko/docs/Web/CSS/CSS_nesting/Nesting_at-rules)
+ - : @-규칙을 어떻게 중첩하는지 설명합니다.
+- [CSS 중첩과 명시도](/ko/docs/Web/CSS/CSS_nesting/Nesting_and_specificity)
+ - : 중첩 CSS 를 사용할 때의 명시도가 어떻게 다른지 설명합니다.
+
+## 연관 개념
+
+- [선택자와 혼합자](/ko/docs/Web/CSS/CSS_selectors/Selectors_and_combinators)
+- [가상 선택자](/ko/docs/Web/CSS/Pseudo-classes)
+- [CSS 전처리기](/ko/docs/Glossary/CSS_preprocessor)
+
+## 명세서
+
+{{Specifications}}
+
+## 같이 보기
+
+- [명시도](/ko/docs/Web/CSS/Specificity)
+- [CSS 캐스케이드와 모듈 상속](/ko/docs/Web/CSS/CSS_cascade)
+- [CSS 선택자 모듈](/ko/docs/Web/CSS/CSS_selectors)
diff --git a/files/ko/web/css/css_nesting/nesting_and_specificity/index.md b/files/ko/web/css/css_nesting/nesting_and_specificity/index.md
new file mode 100644
index 00000000000000..01452e7e4f4801
--- /dev/null
+++ b/files/ko/web/css/css_nesting/nesting_and_specificity/index.md
@@ -0,0 +1,55 @@
+---
+title: CSS nesting and specificity
+slug: Web/CSS/CSS_nesting/Nesting_and_specificity
+l10n:
+ sourceCommit: 7e1956dbec8369ae5533be89e21cbce2d5a2ae1c
+---
+
+{{CSSRef}}
+
+`&` 중첩 선택자의 {{cssxref('specificity')}} 는 연관되어 있는 선택자 목록 중 가장 큰 명시도를 가진 것을 사용하여 계산됩니다. 이는 {{cssxref(':is',':is()')}} 함수를 사용할 때 명시도가 계산되는 방식과 동일합니다.
+
+```html
+<b class="foo">
+ <c>Blue text</c>
+</b>
+```
+
+## `&` 중첩 문법
+
+```css-nolint
+#a, b {
+ & c {
+ color: blue;
+ }
+}
+
+.foo c {
+ color: red;
+}
+```
+
+## `:is()` 문법
+
+```css
+:is(#a, b) {
+ & c {
+ color: blue;
+ }
+}
+
+.foo c {
+ color: red;
+}
+```
+
+이 예제에서 id 선택자 (`#a`) 는 [`1-0-0`](/ko/docs/Web/CSS/Specificity#selector_weight_categories) 의 명시도를 보유하고 있고, 타입 선택자 (`b`) 는 `0-0-1` 의 명시도를 보유하고 있습니다. `#a` id 선택자가 전혀 사용되지 않았더라도 [`&` 중첩 선택자](/ko/docs/Web/CSS/Nesting_selector) 와 `:is()` 가상 클래스는 모두 `1-0-0` 의 명시도를 보유합니다.
+
+`.foo` 클래스 선택자는 `0-1-0` 의 명시도를 보유하고 있습니다. 이는 `& c` 의 총 명시도를 `1-0-1` 로 만들고 `.foo c` 의 명시도를 `0-1-1` 로 만들며, 따라서 `color: blue;` 가 채택됩니다.
+
+## 같이 보기
+
+- [CSS 중첩](/ko/docs/Web/CSS/CSS_nesting) 모듈
+- [`&` 중첩 선택자](/ko/docs/Web/CSS/Nesting_selector)
+- [CSS 중첩 사용하기](/ko/docs/Web/CSS/CSS_nesting/Using_CSS_nesting)
+- [중첩 @-규칙](/ko/docs/Web/CSS/CSS_nesting/Nesting_at-rules)
diff --git a/files/ko/web/css/css_nesting/using_css_nesting/index.md b/files/ko/web/css/css_nesting/using_css_nesting/index.md
new file mode 100644
index 00000000000000..02f708abb4b10d
--- /dev/null
+++ b/files/ko/web/css/css_nesting/using_css_nesting/index.md
@@ -0,0 +1,443 @@
+---
+title: Using CSS nesting
+slug: Web/CSS/CSS_nesting/Using_CSS_nesting
+l10n:
+ sourceCommit: c8f8d139207c796a49390614fbe4e65a8ab9bfac
+---
+
+{{CSSRef}}
+
+[CSS 중첩](/ko/docs/Web/CSS/CSS_nesting) 모듈은 스타일시트의 가독성을 높이고 모듈화하며 그리고 유지 보수하기 용이하게 만듭니다. 선택자를 반복하여 작성하지 않아도 되고, 이로 인해 파일 크기도 줄어들 수 있습니다.
+
+CSS 중첩은 [Sass](https://sass-lang.com/) 와 같은 CSS 전처리기와는 다릅니다. CSS 전처리기는 사전에 컴파일되지만, CSS 중첩은 브라우저에 의해 파싱됩니다. 또한 CSS 중첩에서는, [`&` 중첩 선택자의 명시도](/ko/docs/Web/CSS/CSS_nesting/Nesting_and_specificity)는 {{cssxref(':is',':is()')}} 함수와 유사하며, 관련 선택자 목록과 연관에서 가장 높은 명시도를 이용하여 계산합니다.
+
+이 안내서는 CSS 에서 중첩을 사용하는 각기 다른 방법에 대해 설명합니다.
+
+## 자식 선택자
+
+CSS 중첩을 사용하면 부모의 자식 선택자를 생성할 수 있는데, 이것을 이용하여 특정 부모의 자식 요소를 타겟팅할 수 있습니다. 이는 [`&` 중첩 선택자](/ko/docs/Web/CSS/Nesting_selector) 를 사용하는 경우와 사용하지 않는 경우에도 가능합니다.
+
+`&` 중첩 선택자 사용이 필수적이거나 도움이 되는 특수한 인스턴스들이 있습니다.
+
+- [결합 선택자들](#compound_selectors) 혹은 [가상의 클래스](/ko/docs/Web/CSS/Pseudo-classes) 와 같이 선택자들을 함께 사용할 때.
+- 역호환성을 고려할 때.
+- 가독성을 위한 시각적 표시로써, `&` 중첩 선택자를 보는 것처럼 CSS 중첩이 사용되고 있음을 표현할 때.
+
+```css
+/* 중첩 선택자를 사용하는 경우 */
+parent {
+ /* 부모 스타일 */
+ child {
+ /* 부모의 자식 스타일 */
+ }
+}
+
+/* 중첩 선택자를 사용하지 않는 경우 */
+parent {
+ /* 부모 스타일 */
+ & child {
+ /* 부모의 자식 스타일 */
+ }
+}
+
+/* 브라우저는 위 두 방법을 각각 아래 예시처럼 파싱합니다. */
+parent {
+ /* 부모 스타일 */
+}
+parent child {
+ /* 부모의 자식 스타일 */
+}
+```
+
+### 예제
+
+아래 예제들에서는, `&` 중첩 선택자를 사용하는 경우 하나, 그리고 다른 하나는 사용하지 않는 경우로써, `<label>` 과 `<input>` 이 형제 요소일 때와 `<label>` 내부에 `<input>` 이 있는 경우가 어떻게 다르게 스타일되는지 확인할 수 있습니다. 이는 `&` 중첩 선택자를 생략했을 때의 영향을 보여줍니다.
+
+> **참고:** 이 예제는 본래의 명세서를 구현하 브라우저와 현재의 중첩 명세를 구현한 브라우저에서의 다른 결과를 보여줍니다. 2023년 8월 이전에 크롬 혹은 사파리에서 구현된 명세에서는 `&` 중첩 선택자를 필요로 했습니다. 현재의 명세를 지원하는 브라우저라면 두 가지 예제 모두에서 두번째 예제와 동일한 결과를 보여줍니다.
+
+#### 중첩 선택자를 사용하지 않는 경우
+
+##### HTML
+
+```html-nolint
+<form>
+ <label for="name">Name:
+ <input type="text" id="name" />
+ </label>
+ <label for="email">email:</label>
+ <input type="text" id="email" />
+</form>
+```
+
+##### CSS
+
+```css hidden
+form,
+label {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+```
+
+```css
+input {
+ /* label 외부에 있는 input 을 위한 스타일 */
+ border: tomato 2px solid;
+}
+label {
+ /* label 을 위한 스타일 */
+ font-family: system-ui;
+ font-size: 1.25rem;
+ input {
+ /* label 내부에 있는 input 을 위한 스타일 */
+ border: blue 2px dashed;
+ }
+}
+```
+
+##### 결과
+
+{{EmbedLiveSample('Without_nesting_selector','100%','120')}}
+
+#### 중첩 선택자를 사용하는 경우
+
+##### HTML
+
+```html-nolint
+<form>
+ <label for="name">Name:
+ <input type="text" id="name" />
+ </label>
+ <label for="email">email:</label>
+ <input type="text" id="email" />
+</form>
+```
+
+##### CSS
+
+```css hidden
+form,
+label {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+```
+
+```css
+input {
+ /* label 외부에 있는 input 을 위한 스타일 */
+ border: tomato 2px solid;
+}
+label {
+ /* label 을 위한 스타일 */
+ font-family: system-ui;
+ font-size: 1.25rem;
+ & input {
+ /* label 내부에 있는 input 을 위한 스타일 */
+ border: blue 2px dashed;
+ }
+}
+```
+
+##### 결과
+
+{{EmbedLiveSample('With_nesting_selector','100%','120')}}
+
+## 결합자
+
+[CSS 결합자](/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators) 역시 `&` 중첩 선택자가 사용되거나 사용되지 않을 수 있습니다.
+
+### 예제
+
+#### 형제 결합자의 중첩
+
+이 예제에서는, 각 `<h2>` 뒤 첫번째 단락이 CSS 중첩의 [인접 형제 결합자 (`+`)](/ko/docs/Web/CSS/Next-sibling_combinator) 로 타겟팅됩니다.
+
+##### HTML
+
+```html
+<h2>Heading</h2>
+<p>첫번째 단락입니다.</p>
+<p>두번째 단락입니다.</p>
+```
+
+##### CSS
+
+```css
+h2 {
+ color: tomato;
+ + p {
+ color: white;
+ background-color: black;
+ }
+}
+/* 이 코드는 & 중첩 선택자를 이용하여 작성할 수도 있습니다. */
+/*
+h2 {
+ color: tomato;
+ & + p {
+ color: white;
+ background-color: black;
+ }
+}
+*/
+```
+
+##### 결과
+
+{{EmbedLiveSample('Nesting_the_sibling_combinator','100%','135')}}
+
+## 결합 선택자
+
+중첩 CSS 의 [결합 선택자](/ko/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector) 를 사용할 때에는 `&` 중첩 선택자를 **반드시** 사용해야 합니다. 이는 브라우저가 `&` 중첩 선택자를 사용하지 않는 경우에 자동으로 선택자들 사이에 공백을 삽입하기 때문입니다.
+
+`class="a b"` 를 가진 요소를 타겟하기 위해서는 `&` 중첩 선택자가 필요한데, 이를 사용하지 않으면 공백이 결합 선택자를 끊어버립니다.
+
+```css
+.a {
+ /* class="a" 를 가진 요소를 위한 스타일 */
+ .b {
+ /* class="a"의 자손인 class="b" 요소에 대한 스타일 */
+ }
+ &.b {
+ /* class="a b" 를 가진 요소를 위한 스타일 */
+ }
+}
+
+/* 브라우저는 다음과 같이 파싱합니다. */
+.a {
+ /* class="a" 를 가진 요소를 위한 스타일 */
+}
+.a .b {
+ /* class="a"의 자손인 class="b" 요소에 대한 스타일 */
+}
+.a.b {
+ /* class="a b" 를 가진 요소를 위한 스타일 */
+}
+```
+
+### 예제
+
+#### 중첩과 결합 선택자들
+
+이 예제에서 `&` 중첩 선택자는 다중 클래스를 가진 요소를 스타일하는 결합 선택자를 생성하기 위해 사용되었습니다.
+
+##### HTML
+
+```html
+<div class="notices">
+ <div class="notice">
+ <h2 class="notice-heading">Notice</h2>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+ </div>
+ <div class="notice warning">
+ <h2 class="warning-heading">Warning</h2>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+ </div>
+ <div class="notice success">
+ <h2 class="success-heading">Success</h2>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+ </div>
+</div>
+```
+
+##### CSS
+
+{{cssxref('CSS_flexible_box_layout', 'flexbox layout')}} 를 활용하여 행을 생성하기 위해 `.notices` 에 스타일을 적용합니다.
+
+```css
+.notices {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ width: 90%;
+ margin: auto;
+}
+```
+
+아래 CSS 코드에서는, 중첩은 `&` 를 사용하거나 사용하지 않는 경우 모두에 결합 선택자를 생성하기 위해 사용되었습니다. 최상위 레벨의 선택자는 `class="notice"` 를 가진 요소에 기본적인 스타일을 정의합니다. `&` 중첩 선택자는 `class="notice warning"` 를 가진 요소 혹은 `class="notice success"` 를 가진 요소들에 결합 선택자를 생성하기 위해 사용되었습니다. 추가적으로, `&` 를 명시적으로 사용하지 않고 중첩을 이용한 결합 선택자를 생성하는 `.notice .notice-heading::before` 선택자도 확인할 수 있습니다.
+
+```css
+.notice {
+ width: 90%;
+ justify-content: center;
+ border-radius: 1rem;
+ border: black solid 2px;
+ background-color: #ffc107;
+ color: black;
+ padding: 1rem;
+ .notice-heading::before {
+ /* `.notice .notice-heading::before` 와 동일합니다. */
+ content: "ℹ︎ ";
+ }
+ &.warning {
+ /* equivalent to `.notice.warning` */
+ background-color: #d81b60;
+ border-color: #d81b60;
+ color: white;
+ .warning-heading::before {
+ /* `.notice.warning .warning-heading::before` 와 동일합니다. */
+ content: "! ";
+ }
+ }
+ &.success {
+ /* `.notice.success` 와 동일합니다. */
+ background-color: #004d40;
+ border-color: #004d40;
+ color: white;
+ .success-heading::before {
+ /* `.notice.success .success-heading::before` 와 동일합니다. */
+ content: "✓ ";
+ }
+ }
+}
+```
+
+##### 결과
+
+{{EmbedLiveSample('Nesting_and_compound_selectors','100%', '455')}}
+
+## 추가된 중첩 선택자
+
+`&` 중첩 선택자는 중첩된 선택자에 추가될 수 있으며, 이는 맥락을 반대로 하는 효과를 부여합니다.
+
+이는 부모 요소에 다른 클래스가 부여될 때 자식 요소의 스타일이 변경되는 경우에 유용하게 사용할 수 있습니다.
+
+```html
+<div>
+ <span class="foo">text</span>
+</div>
+```
+
+위와 대조하여,
+
+```html
+<div class="bar">
+ <span class="foo">text</span>
+</div>
+```
+
+```css
+.foo {
+ /* .foo 스타일 */
+ .bar & {
+ /* .bar .foo 스타일 */
+ }
+}
+```
+
+### 결과
+
+#### 중첩 선택자 추가하기
+
+이 예제에서는 3개의 카드가 있고, 그 중 하나는 특색이 있는 카드입니다. 이 카드들은 모두 완벽히 동일하지만, 특색 카드의 제목은 다른 색상을 가지고 있습니다. `&` 중첩 선택자를 추가함으로써 `h2` 의 스타일 내부에서 `.featured .h2` 를 사용하여 스타일을 중첩할 수 있습니다.
+
+##### HTML
+
+```html
+<div class="wrapper">
+ <article class="card">
+ <h2>Card 1</h2>
+ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
+ </article>
+ <article class="card featured">
+ <h2>Card 2</h2>
+ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
+ </article>
+ <article class="card">
+ <h2>Card 3</h2>
+ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
+ </article>
+</div>
+```
+
+##### CSS
+
+```css
+.wrapper {
+ display: flex;
+ flex-direction: row;
+ gap: 0.25rem;
+ font-family: system-ui;
+}
+```
+
+아래 CSS 에서는, `.card` 와 `.card h2` 에 대한 스타일을 생성하였습니다. 그리고 `h2` 스타일 블록 내에서는 `&` 중첩 선택자가 추가된 `.featured` 클래스를 중첩하여 `.card :is(.featured h2)` 에 대한 스타일을 생성하는데, 이는 `:is(.card h2):is(.featured h2)` 와 동일합니다.
+
+```css
+.card {
+ padding: 0.5rem;
+ border: 1px solid black;
+ border-radius: 0.5rem;
+ & h2 {
+ /* `.card h2` 와 동일합니다. */
+ color: slateblue;
+ .featured & {
+ /* `:is(.card h2):is(.featured h2)` 와 동일합니다. */
+ color: tomato;
+ }
+ }
+}
+```
+
+##### 결과
+
+{{EmbedLiveSample('Appending_nesting_selector','100%','250')}}
+
+## 연쇄 (불가능)
+
+[Sass](https://sass-lang.com/) 와 같은 CSS 전처리기에서는 중첩을 활용해 문자열끼리 연결하여 새로운 클래스들을 만드는 것이 가능합니다. 이는 [BEM](https://getbem.com/naming/) 와 같은 CSS 방법론에서 흔한 일입니다.
+
+```css example-bad
+.component {
+ &__child-element {
+ }
+}
+/* In Sass this becomes */
+.component__child-element {
+}
+```
+
+> **경고** 이것은 CSS 중첩에서는 불가능한 일입니다. [결합자](/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators)가 사용되지 않는다면 중첩 선택자는 [타입 선택자](/ko/docs/Web/CSS/Type_selectors) 처럼 취급됩니다. 문자열 연쇄를 허용하면 이는 끊기게 됩니다.
+
+[걸합 선택자](/ko/docs/Web/CSS/CSS_selectors/Selector_structure#compound_selector) 에서는, 타입 선택자가 가장 처음으로 위치해야 합니다. ([타입 선택자](/ko/docs/Web/CSS/Type_selectors)인) `&Element` 를 사용하는 것은 CSS 선택자 뿐만 아니라, 전체 선택자 블록을 무효로 만듭니다. 타입 선택자가 가장 먼저 위치함에 따라 결합 선택자는 `Element&` 로 작성되어야만 합니다.
+
+```css example-good
+.my-class {
+ element& {
+ }
+}
+
+/* 브라우저는 이것을 결합 선택자가 되도록 파싱합니다. */
+.my-class {
+}
+element.my-class {
+}
+```
+
+## 무효한 중첩 스타일 규칙
+
+중첩된 CSS 규칙이 무효한 경우, 해당 규칙에 포함되어 있는 모든 스타일들이 무시됩니다. 이는 부모나 이전 규칙들에는 영향을 미치지 않습니다.
+
+다음 예제에서는, 유효하지 않은 선택자 (`%` 는 선택자로 사용되기에 유효하지 않은 문자) 가 있습니다. 이 선택자를 포함하는 규칙은 무시되지만, 이후 유효한 규칙들은 무시되지 않습니다.
+
+```css example-bad
+.parent {
+ /* .parent 스타일은 유효합니다. */
+ & %invalid {
+ /* 무효한 %invalid 스타일들은 무시됩니다. */
+ }
+ & .valid {
+ /* .parent .valid 스타일은 유효합니다. */
+ }
+}
+```
+
+## 같이 보기
+
+- [CSS 중첩](/ko/docs/Web/CSS/CSS_nesting) 모듈
+- [`&` 중첩 선택자](/ko/docs/Web/CSS/Nesting_selector)
+- [`@` 규칙 중첩](/ko/docs/Web/CSS/CSS_nesting/Nesting_at-rules)
+- [중첩과 명시도](/ko/docs/Web/CSS/CSS_nesting/Nesting_and_specificity)
diff --git a/files/ko/web/css/css_paged_media/index.md b/files/ko/web/css/css_paged_media/index.md
index 566a5eac7c0192..e66d8ea1c9b4b9 100644
--- a/files/ko/web/css/css_paged_media/index.md
+++ b/files/ko/web/css/css_paged_media/index.md
@@ -1,19 +1,23 @@
---
-title: CSS Paged Media
+title: CSS paged media
slug: Web/CSS/CSS_paged_media
+l10n:
+ sourceCommit: d303345cabd0cd9ab33fdfe51957479c8fb35424
---
{{CSSRef}}
-**CSS Paged Media**는 페이지 전환을 처리하는 방법을 정의하는 CSS 모듈입니다.
+**CSS paged media** 모듈은 인쇄 또는 콘텐츠를 개별 페이지로 분할하는 다른 미디어에 대한 콘텐츠 표현을 제어하는 속성을 정의합니다. 이를 통해 페이지 나누기, 인쇄 가능 영역 제어, 좌우 페이지에 대한 다른 스타일 적용, 요소 내 중단 제어 등이 가능합니다.
## 참고서
-### CSS 속성
+### 속성
-- {{cssxref("page-break-after")}}
-- {{cssxref("page-break-before")}}
-- {{cssxref("page-break-inside")}}
+- {{cssxref("break-after")}}
+- {{cssxref("break-before")}}
+- {{cssxref("break-inside")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
### @규칙
@@ -26,6 +30,11 @@ slug: Web/CSS/CSS_paged_media
- {{cssxref(':left')}}
- {{cssxref(':right')}}
-## 명세
+## 명세서
{{Specifications}}
+
+## 같이 보기
+
+- [Printing](/ko/docs/Web/CSS/CSS_media_queries/Printing) 가이드
+- [미디어 쿼리](/ko/docs/Web/CSS/CSS_media_queries) 모듈
diff --git a/files/ko/web/css/css_positioned_layout/understanding_z-index/index.md b/files/ko/web/css/css_positioned_layout/understanding_z-index/index.md
index a89f0b90783390..db0d9b19c91771 100644
--- a/files/ko/web/css/css_positioned_layout/understanding_z-index/index.md
+++ b/files/ko/web/css/css_positioned_layout/understanding_z-index/index.md
@@ -3,6 +3,8 @@ title: CSS z-index 이해하기
slug: Web/CSS/CSS_positioned_layout/Understanding_z-index
---
+{{CSSRef}}
+
우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다.
> _In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually._
diff --git a/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
index 271bd56fe99291..7c72e54440fe5a 100644
--- a/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
+++ b/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md
@@ -3,6 +3,8 @@ title: 쌓임 맥락 예제 1
slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1
---
+{{CSSRef}}
+
« [CSS](/ko/CSS) « [CSS z-index 이해하기](/ko/CSS/Understanding_z-index)
### 쌓임 맥락 예제1
diff --git a/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md b/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
index a2f16287671862..2158deb3e3e29c 100644
--- a/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
+++ b/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md
@@ -3,6 +3,8 @@ title: 쌓임 맥락 예제2
slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2
---
+{{CSSRef}}
+
« [CSS](/ko/CSS) « [CSS z-index 이해하기](/ko/CSS/Understanding_z-index)
### 쌓임 맥락 예제2
diff --git a/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md b/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
index d9f3e24f547637..ad6497367616cf 100644
--- a/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
+++ b/files/ko/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md
@@ -3,6 +3,8 @@ title: 쌓임 맥락 예제3
slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3
---
+{{CSSRef}}
+
« [CSS](/ko/CSS) « [CSS z-index 이해하기](/ko/CSS/Understanding_z-index)
## 쌓임 맥락 예제3
diff --git a/files/ko/web/css/css_text/index.md b/files/ko/web/css/css_text/index.md
index a1649b385b4f56..b00474bd0b39a9 100644
--- a/files/ko/web/css/css_text/index.md
+++ b/files/ko/web/css/css_text/index.md
@@ -1,6 +1,8 @@
---
-title: CSS Text
+title: CSS text
slug: Web/CSS/CSS_text
+l10n:
+ sourceCommit: 8d4fb1e2934111a13989d2796152dc601468e7b5
---
{{CSSRef}}
@@ -12,6 +14,7 @@ slug: Web/CSS/CSS_text
### 속성
- {{cssxref("hanging-punctuation")}}
+- {{cssxref("hyphenate-limit-chars")}}
- {{cssxref("hyphens")}}
- {{cssxref("letter-spacing")}}
- {{cssxref("line-break")}}
@@ -23,7 +26,9 @@ slug: Web/CSS/CSS_text
- {{cssxref("text-justify")}}
- {{cssxref("text-size-adjust")}}
- {{cssxref("text-transform")}}
+- {{cssxref("text-wrap")}}
- {{cssxref("white-space")}}
+- {{cssxref("white-space-collapse")}}
- {{cssxref("word-break")}}
- {{cssxref("word-spacing")}}
diff --git a/files/ko/web/css/css_transitions/using_css_transitions/index.md b/files/ko/web/css/css_transitions/using_css_transitions/index.md
index f09fb1a8ee92c0..bb739075792246 100644
--- a/files/ko/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/ko/web/css/css_transitions/using_css_transitions/index.md
@@ -65,8 +65,6 @@ CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤
}
```
-{{ EmbedLiveSample('%EB%8B%A4%EC%88%98%EC%9D%98_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%9D%B4_%EC%A0%81%EC%9A%A9%EB%90%9C_%EC%86%8D%EC%84%B1_%EC%98%88%EC%A0%9C', '600', '300', '', 'Web/Guide/CSS/Using_CSS_transitions') }}
-
## 트랜지션 정의에 사용한 CSS 속성
CSS 트랜지션은 단축(shorthand) 속성 {{cssxref("transition")}}을 사용하여 제어합니다. 이것은 트랜지션을 설정하는 가장 좋은 방법입니다. 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문입니다. 싱크가 맞지 않으면 CSS를 디버그하는데 많은 시간을 들여야 해서 크게 좌절할 수 있습니다.
@@ -1122,7 +1120,7 @@ p {
}
```
-여기에서 확인할 수 있습니다. <http://jsfiddle.net/RwtHn/5/>
+여기에서 확인할 수 있습니다. <https://jsfiddle.net/RwtHn/5/>
## 명세
diff --git a/files/ko/web/css/env/index.md b/files/ko/web/css/env/index.md
index 417e92b1290c25..38c892074e5d1b 100644
--- a/files/ko/web/css/env/index.md
+++ b/files/ko/web/css/env/index.md
@@ -60,10 +60,8 @@ env(safe-area-inset-left, 1.4rem);
```css
body {
- padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
- safe-area-inset-bottom,
- 20px
- ) env(safe-area-inset-left, 20px);
+ padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+ env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}
```
@@ -139,10 +137,8 @@ button {
p {
width: 300px;
border: 2px solid red;
- padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
- safe-area-inset-bottom,
- 50px
- ) env(SAFE-AREA-INSET-LEFT, 50px);
+ padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
+ env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
}
```
diff --git a/files/ko/web/css/place-items/index.md b/files/ko/web/css/place-items/index.md
new file mode 100644
index 00000000000000..f0675f91810ef0
--- /dev/null
+++ b/files/ko/web/css/place-items/index.md
@@ -0,0 +1,316 @@
+---
+title: place-items
+slug: Web/CSS/place-items
+l10n:
+ sourceCommit: fab1f9cef824066b3ce6a5b25f6c6db539f5d042
+---
+
+{{CSSRef}}
+
+[CSS](/ko/docs/Web/CSS) 의 **`place-items`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties) 은 [그리드](/ko/docs/Web/CSS/CSS_grid_layout) 혹은 [플렉스박스](/ko/docs/Web/CSS/CSS_flexible_box_layout) 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 (예를 들어, {{CSSxRef("align-items")}} 와 {{CSSxRef("justify-items")}} 속성) 한번에 요소들을 정렬합니다. 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다.
+
+{{EmbedInteractiveExample("pages/css/place-items.html")}}
+
+## 구성 속성
+
+이 속성은 다음 CSS의 단축형입니다.
+
+- [`align-items`](/ko/docs/Web/CSS/align-items)
+- [`justify-items`](/ko/docs/Web/CSS/justify-items)
+
+## 구문
+
+```css
+/* 키워드 값 */
+place-items: center;
+place-items: normal start;
+
+/* 위치 정렬 */
+place-items: center normal;
+place-items: start legacy;
+place-items: end normal;
+place-items: self-start legacy;
+place-items: self-end normal;
+place-items: flex-start legacy;
+place-items: flex-end normal;
+
+/* 기준선 정렬 */
+place-items: baseline normal;
+place-items: first baseline legacy;
+place-items: last baseline normal;
+place-items: stretch legacy;
+
+/* 전역 값 */
+place-items: inherit;
+place-items: initial;
+place-items: revert;
+place-items: revert-layer;
+place-items: unset;
+```
+
+### 값
+
+아래 형태 중 하나의 값을 취합니다.
+
+- 블록 방향과 인라인 방향 모두를 설정하기 위한 정렬 단일 {{cssxref("align-items")}} 값.
+- 블록 방향의 정렬을 설정하기 위한 {{cssxref("align-items")}} 값, 인라인 방향의 정렬을 설정하기 위한 {{cssxref("justify-items")}} 값.
+
+## 형식 정의
+
+{{cssinfo}}
+
+## 형식 구문
+
+{{csssyntax}}
+
+## 예제
+
+### 플렉스 컨테이너에 요소 배치하기
+
+플렉스박스에서는 주축 요소가 하나의 그룹으로 취급되기 때문에 {{cssxref("justify-self")}} 혹은 {{cssxref("justify-items")}} 가 적용되지 않습니다. 따라서 두번째 값은 무시됩니다.
+
+```css hidden
+div > div {
+ box-sizing: border-box;
+ border: 2px solid #8c8c8c;
+ width: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#item1 {
+ background-color: #8cffa0;
+ min-height: 30px;
+ font-size: 2em;
+}
+
+#item2 {
+ background-color: #a0c8ff;
+ min-height: 50px;
+}
+
+#item3 {
+ background-color: #ffa08c;
+ min-height: 40px;
+}
+
+#item4 {
+ background-color: #ffff8c;
+ min-height: 60px;
+}
+
+#item5 {
+ background-color: #ff8cff;
+ min-height: 70px;
+}
+
+#item6 {
+ background-color: #8cffff;
+ min-height: 50px;
+}
+
+select {
+ font-size: 16px;
+}
+
+.row {
+ margin-top: 10px;
+}
+```
+
+```html hidden
+<div id="container">
+ <div id="item1">1</div>
+ <div id="item2">2</div>
+ <div id="item3">3</div>
+</div>
+
+<div class="row">
+ <label for="values">place-items: </label>
+ <select id="values">
+ <option value="stretch">stretch</option>
+ <option value="start">start</option>
+ <option value="center">center</option>
+ <option value="end">end</option>
+ <option value="left">left</option>
+ <option value="right">right</option>
+ <option value="auto center">auto center</option>
+ <option value="normal start">normal start</option>
+ <option value="center normal">center normal</option>
+ <option value="start auto">start auto</option>
+ <option value="end normal">end normal</option>
+ <option value="self-start auto">self-start auto</option>
+ <option value="self-end normal">self-end normal</option>
+ <option value="flex-start auto">flex-start auto</option>
+ <option value="flex-end normal">flex-end normal</option>
+ <option value="left auto">left auto</option>
+ <option value="right normal">right normal</option>
+ <option value="baseline normal">baseline normal</option>
+ <option value="first baseline auto">first baseline auto</option>
+ <option value="last baseline normal">last baseline normal</option>
+ <option value="stretch auto">stretch auto</option>
+ </select>
+</div>
+```
+
+```js hidden
+const values = document.getElementById("values");
+const container = document.getElementById("container");
+
+values.addEventListener("change", (evt) => {
+ container.style.placeItems = evt.target.value;
+});
+```
+
+#### CSS
+
+```css
+#container {
+ height: 200px;
+ width: 240px;
+ place-items: stretch; /* 리스트에 있는 다른 옵션을 선택하여 값을 변경할 수 있습니다. */
+ background-color: #8c8c8c;
+ display: flex;
+}
+```
+
+#### 결과ㄴ
+
+{{EmbedLiveSample("Placing_items_in_a_flex_container", 260, 290)}}
+
+### 그리드 컨테이너에 요소 배치하기
+
+다음 그리드 컨테이너는 요소들이 배치된 그리드 영역보다 작기 때문에 `place-items` 는 요소들을 블록과 인라인 차원에서 요소들을 이동시킵니다.
+
+```css hidden
+div > div {
+ box-sizing: border-box;
+ border: 2px solid #8c8c8c;
+}
+
+#item1 {
+ background-color: #8cffa0;
+ min-height: 30px;
+ font-size: 2em;
+}
+
+#item2 {
+ background-color: #a0c8ff;
+ min-height: 50px;
+}
+
+#item3 {
+ background-color: #ffa08c;
+ min-height: 40px;
+}
+
+#item4 {
+ background-color: #ffff8c;
+ min-height: 60px;
+}
+
+#item5 {
+ background-color: #ff8cff;
+ min-height: 70px;
+}
+
+#item6 {
+ background-color: #8cffff;
+ min-height: 50px;
+}
+
+select {
+ font-size: 16px;
+}
+
+.row {
+ margin-top: 10px;
+}
+```
+
+```html hidden
+<div id="gridcontainer">
+ <div id="item1">1</div>
+ <div id="item2">2</div>
+ <div id="item3">3</div>
+ <div id="item4">4</div>
+ <div id="item5">5</div>
+</div>
+
+<div class="row">
+ <label for="gridvalues">place-items: </label>
+ <select id="gridvalues">
+ <option value="stretch">stretch</option>
+ <option value="start">start</option>
+ <option value="center">center</option>
+ <option value="end">end</option>
+ <option value="left">left</option>
+ <option value="right">right</option>
+ <option value="auto center">auto center</option>
+ <option value="normal start">normal start</option>
+ <option value="center normal">center normal</option>
+ <option value="start auto">start auto</option>
+ <option value="end normal">end normal</option>
+ <option value="self-start auto">self-start auto</option>
+ <option value="self-end normal">self-end normal</option>
+ <option value="flex-start auto">flex-start auto</option>
+ <option value="flex-end normal">flex-end normal</option>
+ <option value="left auto">left auto</option>
+ <option value="right normal">right normal</option>
+ <option value="baseline normal">baseline normal</option>
+ <option value="first baseline auto">first baseline auto</option>
+ <option value="last baseline normal">last baseline normal</option>
+ <option value="stretch auto">stretch auto</option>
+ </select>
+</div>
+```
+
+```js hidden
+const values = document.getElementById("gridvalues");
+const container = document.getElementById("gridcontainer");
+
+values.addEventListener("change", (evt) => {
+ container.style.placeItems = evt.target.value;
+});
+```
+
+#### CSS
+
+```css
+#gridcontainer {
+ height: 200px;
+ width: 240px;
+ place-items: stretch; /* 리스트에 있는 다른 옵션을 선택하여 값을 변경할 수 있습니다. */
+ background-color: #8c8c8c;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+#gridcontainer > div {
+ width: 50px;
+}
+```
+
+#### 결과
+
+{{EmbedLiveSample("Placing_items_in_a_grid_container", 260, 290)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- CSS 플렉스박스 가이드: [Basic Concepts of Flexbox](/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- CSS 플렉스박스 가이드: [Aligning items in a flex container](/ko/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- CSS 그리드 가이드: [Box alignment in CSS Grid layouts](/ko/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [CSS Box Alignment](/ko/docs/Web/CSS/CSS_box_alignment)
+- {{CSSxRef("align-items")}} 속성
+- {{CSSxRef("align-self")}} 속성
+- {{CSSxRef("justify-items")}} 속성
+- {{CSSxRef("justify-self")}} 속성
diff --git a/files/ko/web/css/place-self/index.md b/files/ko/web/css/place-self/index.md
new file mode 100644
index 00000000000000..0b4256def47827
--- /dev/null
+++ b/files/ko/web/css/place-self/index.md
@@ -0,0 +1,172 @@
+---
+title: place-self
+slug: Web/CSS/place-self
+l10n:
+ sourceCommit: c72b86b3d6818ec6c8df1d52a77513d769f4164e
+---
+
+{{CSSRef}}
+
+**`place-self`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties) 은 [그리드](/ko/docs/Web/CSS/CSS_grid_layout) 혹은 [플렉스박스](/ko/docs/Web/CSS/CSS_flexible_box_layout) 와 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 한번에 개별 요소를 정렬합니다 (예시. {{CSSxRef("align-items")}} 와 {{CSSxRef("justify-items")}} 속성). 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다.
+
+{{EmbedInteractiveExample("pages/css/place-self.html")}}
+
+## 구성 속성
+
+이 속성은 다음 CSS의 단축형입니다.
+
+- [`align-self`](/ko/docs/Web/CSS/align-self)
+- [`justify-self`](/ko/docs/Web/CSS/justify-self)
+
+## 구문
+
+```css
+/* 키워드 값 */
+place-self: auto center;
+place-self: normal start;
+
+/* 위치 정렬 */
+place-self: center normal;
+place-self: start auto;
+place-self: end normal;
+place-self: self-start auto;
+place-self: self-end normal;
+place-self: flex-start auto;
+place-self: flex-end normal;
+
+/* 기준선 정렬 */
+place-self: baseline normal;
+place-self: first baseline auto;
+place-self: last baseline normal;
+place-self: stretch auto;
+
+/* 전역 값 */
+place-self: inherit;
+place-self: initial;
+place-self: revert;
+place-self: revert-layer;
+place-self: unset;
+```
+
+### 값
+
+- `auto`
+ - : 부모 속성의 {{cssxref("align-items")}} 값으로 계산됩니다.
+- `normal`
+
+ - : 이 키워드의 효과는 우리가 만든 레이아웃 모드에 따라 달라집니다.
+
+ - 절대 위치로 지정된 레이아웃의 경우, 이 키워드는 대체된 절대 위치 박스에서 `start` 처럼 동작하고, 다른 모든 절대 위치 박스에서는 `stretch` 처럼 동작합니다.
+ - 플렉스 요소들에서, 이 키워드는 `stretch` 처럼 동작합니다.
+ - 그리드 요소들에서, 이 키워드는 `stretch` 와 비슷한 동작을 하지만, {{glossary("aspect ratio")}} 박스 형태 혹은 고유한 크기를 가진 박스에서는 `start` 처럼 동작합니다.
+ - 이 속성은 블록 레벨의 박스나 표 셀에 적용되지 않습니다.
+
+- `self-start`
+ - : 요소를 교차 축의 시작 지점에 해당하는 정렬 컨테이너의 가장자리에 맞게 정렬합니다.
+- `self-end`
+ - : 요소를 교차 축의 끝 지점에 해당하는 정렬 컨테이너의 가장자리에 맞게 정렬합니다.
+- `flex-start`
+ - : 플렉스 요소의 교차 시작 마진 가장자리가 선의 교차 시작 가장자리에 맞닿습니다.
+- `flex-end`
+ - : 플렉스 요소의 교차 끝 마진 가장자리가 선의 교차 끝 가장자리에 맞닿습니다.
+- `center`
+ - : 플렉스 요소의 마진 박스가 교차 축의 선 중앙에 위치합니다. 만일 요소의 교차 크기가 플렉스 컨테이너보다 큰 경우, 요소는 양쪽 방향으로 균등하게 넘칩니다.
+- `baseline`, `first baseline`. `last baseline`
+
+ - : 첫번째 혹은 마지막 기준선 정렬에 참여를 지정합니다. 박스의 첫번째 혹은 마지막 기준선 세트의 정렬 기준선을 해당 기준선을 공유하는 그룹의 모든 박스의 공유 첫번째 혹은 마지막 기준선 세트에 있는 기준선과 맞추어 정렬합니다.
+ `first baseline` 의 대체 정렬은 `start` 이며, `last baseline` 의 대체 정렬은 `end` 입니다.
+
+- `stretch`
+ - : 교차 축을 따라 결합된 요소들의 크기가 정렬 컨테이너보다 작고 크기가 `auto`로 지정된 경우, 해당 요소의 크기는 동일하게 (비례하지 않게) 증가하는 반면, {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (혹은 동등한 기능)에 의해 발생하는 제약들을 준수하여 모든 `auto` 크기의 요소들의 결합된 크기가 교차 축을 따라 정렬 컨테이너를 정확히 채웁니다.
+
+## 형식 정의
+
+{{cssinfo}}
+
+## 형식 구문
+
+{{csssyntax}}
+
+## 예제
+
+### 간단히 시연해보기
+
+다음은 2 x 2 그리드 레이아웃 예제입니다. 초기에 그리드 컨테이너의 [`justify-items`](/ko/docs/Web/CSS/justify-items) 와 [`align-items`](/ko/docs/Web/CSS/align-items)는 기본 값인 `stretch` 로 설정되어 있어 그리드 요소가 해당 셀의 전체 너비만큼 늘어납니다.
+
+두번째, 세번째, 그리고 네번째 그리드 요소는 기본 각기 다른 `place-self` 값을 부여하여, 이러한 값들이 기본 배치를 어떻게 재정의하는지를 나타냅니다. 이 값들은 그리드 요소가 콘텐츠의 너비/높이에 맞추어 너비/높이를 조정하고, 블록 방향과 인라인 방향에서 셀 내 다른 위치에 정렬될 수 있도록 합니다.
+
+#### HTML
+
+```html
+<article class="container">
+ <span>첫번째</span>
+ <span>두번째</span>
+ <span>세번쨰</span>
+ <span>네번째</span>
+</article>
+```
+
+#### CSS
+
+```css
+html {
+ font-family: helvetica, arial, sans-serif;
+ letter-spacing: 1px;
+}
+
+article {
+ background-color: red;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-auto-rows: 80px;
+ grid-gap: 10px;
+ margin: 20px;
+ width: 300px;
+}
+
+span:nth-child(2) {
+ place-self: start center;
+}
+
+span:nth-child(3) {
+ place-self: center start;
+}
+
+span:nth-child(4) {
+ place-self: end;
+}
+
+article span {
+ background-color: black;
+ color: white;
+ margin: 1px;
+ text-align: center;
+}
+
+article,
+span {
+ padding: 10px;
+ border-radius: 7px;
+}
+```
+
+#### 결과
+
+{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- CSS 플렉스박스 가이드: [플렉스박스의 기본 개념](/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- CSS 플렉스박스 가이드: [플렉스 컨테이너에서의 요소 정렬](/ko/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- CSS 그리드 가이드: [CSS 그리드 레이아웃 에서의 박스 정렬](/ko/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [CSS 박스 정렬](/ko/docs/Web/CSS/CSS_box_alignment)
+- {{cssxref("align-self")}} 속성
+- {{cssxref("justify-self")}} 속성
diff --git a/files/ko/web/http/client_hints/index.md b/files/ko/web/http/client_hints/index.md
index f812c90cff55f7..c528a69f346b3e 100644
--- a/files/ko/web/http/client_hints/index.md
+++ b/files/ko/web/http/client_hints/index.md
@@ -3,6 +3,8 @@ title: Client hints(클라이언트 힌트)
slug: Web/HTTP/Client_hints
---
+{{HTTPSidebar}}
+
**Client Hints**는 클라이언트 장치 및 에이전트별 기본 설정 목록을 확인할 수 있도록 사전 컨텐츠 체크를 위한 [HTTP request header](/ko/docs/Web/HTTP/Headers) 입니다. [Client Hints](/ko/docs/Web/HTTP/Headers#Client_hints)를 사용하면 이미지 DPR 해상도의 자동 조절과 최적화 된 assets을 자동으로 적용할 수 있습니다.
Client Hints는 자동으로 적용되는 것이 아닙니다 : ClientHints를 지원한다고 선언하기 위해서 서버에서 [`Accept-CH`](https://tools.ietf.org/html/draft-grigorik-http-client-hints-03#section-2.2.1) (accept client hints) header 또는 클라이언트에서 HTML Meta 태그의 [`http-equiv`](/ko/docs/Web/HTML/Element/meta#Attributes) 속성을 사용하여 선언해주어야 합니다.
diff --git a/files/ko/web/http/cors/index.md b/files/ko/web/http/cors/index.md
index cb9ac2c30d62d2..9a41b7b1772e78 100644
--- a/files/ko/web/http/cors/index.md
+++ b/files/ko/web/http/cors/index.md
@@ -3,6 +3,8 @@ title: 교차 출처 리소스 공유 (CORS)
slug: Web/HTTP/CORS
---
+{{HTTPSidebar}}
+
**교차 출처 리소스 공유**(Cross-Origin Resource Sharing, {{Glossary("CORS")}})는 추가 {{Glossary("HTTP")}} 헤더를 사용하여, 한 {{glossary("origin", "출처")}}에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
교차 출처 요청의 예시: `https://domain-a.com`의 프론트 엔드 JavaScript 코드가 {{domxref("XMLHttpRequest")}}를 사용하여 `https://domain-b.com/data.json`을 요청하는 경우.
diff --git a/files/ko/web/http/headers/content-security-policy/report-to/index.md b/files/ko/web/http/headers/content-security-policy/report-to/index.md
index e5b1845d9e1db7..352b96290ebcfd 100644
--- a/files/ko/web/http/headers/content-security-policy/report-to/index.md
+++ b/files/ko/web/http/headers/content-security-policy/report-to/index.md
@@ -3,6 +3,8 @@ title: report-to
slug: Web/HTTP/Headers/Content-Security-Policy/report-to
---
+{{HTTPSidebar}}
+
`Report-To` HTTP 응답 해더 필드는 사용자 에이전트(브라우저)가 레포트를 저장하기 위한 origin의 엔드포인트를 지정합니다.
```
diff --git a/files/ko/web/http/headers/upgrade/index.md b/files/ko/web/http/headers/upgrade/index.md
new file mode 100644
index 00000000000000..ab7b5a3180ec6e
--- /dev/null
+++ b/files/ko/web/http/headers/upgrade/index.md
@@ -0,0 +1,110 @@
+---
+title: Upgrade
+slug: Web/HTTP/Headers/Upgrade
+l10n:
+ sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+---
+
+{{HTTPSidebar}}
+
+HTTP 1.1 전용 `Upgrade` 헤더는 이미 설정된 클라이언트/서버 연결을 다른 프로토콜로 업그레이드하는데 사용할 수 있습니다. 예를 들어서 클라이언트가 HTTP 1.1에서 HTTP 2.0으로 업그레이드하는데 사용하거나, HTTP 또는 HTTPS 연결을 웹소켓으로 업그레이드하는데 사용할 수 있습니다.
+
+> **경고:** HTTP/2는 이 메커니즘의 사용을 명시적으로 허용하지 않고, HTTP/1.1에서만 명시적으로 허용합니다.
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">헤더 타입</th>
+ <td>
+ {{Glossary("Request header", "요청 헤더")}},
+ {{Glossary("Response header", "응답 헤더")}}
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">{{Glossary("Forbidden header name", "금지된 헤더 이름")}}</th>
+ <td>예</td>
+ </tr>
+ </tbody>
+</table>
+
+## 개요
+
+`Upgrade` 헤더 필드는 클라이언트가 서버에게 우선순위가 내림차순으로 나열된 프로토콜 중 하나로 전환할 것을 요청하는데 사용됩니다.
+
+예를 들어 클라이언트는 전환할 선호 프로토콜(아래는 "example/1"과 "foo/2"인 경우)을 나열하여 다음과 같이 `GET` 요청을 보낼 수 있습니다.
+
+```http
+GET /index.html HTTP/1.1
+Host: www.example.com
+Connection: upgrade
+Upgrade: example/1, foo/2
+```
+
+> **참조:** `Upgrade`를 전송할 때마다 `Connection: upgrade`를 설정해야 합니다.
+
+서버는 어떤 이유로든 요청을 무시하도록 선택할 수 있으며, 이 경우 {{HTTPStatus(200, "200 OK")}}와 같이 업그레이드 헤더가 전송되지 않은 것처럼 응답해야 합니다.
+
+만약 서버가 연결을 업그레이드하기로 결정했으면 반드시 업그레이드해야 합니다.
+
+1. 전환할 프로토콜을 명시하는 `Upgrade` 헤더와 함께 {{HTTPStatus(101, "101 Switching Protocols")}}를 반환합니다.
+
+ ```http
+ HTTP/1.1 101 Switching Protocols
+ Upgrade: foo/2
+ Connection: Upgrade
+ ```
+
+2. 새로운 프로토콜을 사용하여 원래 요청에 대한 응답을 보냅니다. 서버는 원래 요청을 완료할 수 있는 프로토콜로만 전환할 수 있습니다.
+
+서버는 {{HTTPStatus("426")}} `Upgrade Required` 응답의 일부로 이 헤더를 보낼 수도 있으며, 이것은 서버가 현재 프로토콜을 사용하여 요청을 수행하지 않지만, 프로토콜이 변경되면 수행할 수 있음을 나타냅니다. 클라이언트는 위 프로세스를 사용하여 프로토콜 변경을 요청할 수 있습니다.
+
+자세힌 내용과 예제는 [프로토콜 업그레이드 메커니즘](/ko/docs/Web/HTTP/Protocol_upgrade_mechanism) 항목에서 제공합니다.
+
+## 구문
+
+```http
+Connection: upgrade
+Upgrade: protocol_name[/protocol_version]
+```
+
+참조
+
+- {{HTTPHeader("Connection")}} 헤더의 `upgrade` 유형은 항상 `Upgrade` 헤더와 함께 전송되어야 합니다.
+- 프로토콜은 쉼표로 구분하여 선호도 기준 내림차순으로 나열됩니다. 프로토콜 버전은 선택사항입니다.
+
+```http
+Connection: upgrade
+Upgrade: a_protocol/1, example, another_protocol/2.2
+```
+
+## 지시어
+
+- 쉼표로 구분한 프로토콜 이름 목록 (선택적으로 버전 포함)
+ - : 하나 이상의 프로토콜 이름과 버전(이름과 버전은 "/"로 구분). 프로토콜은 선호도 기준 내림차순으로 나열합니다.
+
+## 예제
+
+```http
+Connection: upgrade
+Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11
+```
+
+```http
+Connection: Upgrade
+Upgrade: websocket
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [프로토콜 업그레이드 메커니즘](/ko/docs/Web/HTTP/Protocol_upgrade_mechanism)
+- {{HTTPStatus("101")}} `Switching Protocol`
+- {{HTTPStatus("426")}} `Upgrade Required`
+- {{HTTPHeader("Connection")}}
diff --git a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md
new file mode 100644
index 00000000000000..87fb574486b0f8
--- /dev/null
+++ b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.md
@@ -0,0 +1,147 @@
+---
+title: 열거성과 속성의 소유권
+slug: Web/JavaScript/Enumerability_and_ownership_of_properties
+l10n:
+ sourceCommit: a4b17b78fdca327f05e4a13e2b779d69e70212cd
+---
+
+{{jsSidebar("More")}}
+
+JavaScript 객체의 모든 속성은 세 가지 요소로 분류할 수 있습니다.
+
+- 열거 가능(enumerable) 또는 열거 불가능(non-enumerable).
+- 문자열 또는 [심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol).
+- 자체 속성(own property) 또는 프로토타입 체인에서 상속된 속성.
+
+열거 가능한 속성(Enumerable properties)은 내부 열거 가능 플래그가 true로 설정된 속성을 말하며, 이는 단순한 할당이나 속성 초기화자를 통해 생성된 속성의 기본값입니다. [`Object.defineProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) 등을 통해 정의된 속성은 기본적으로 열거 가능하지 않습니다. 대부분의 반복 수단 (예: [`for...in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 루프와 [`Object.keys`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys))은 열거 가능한 키만 방문합니다.
+
+속성의 소유 여부는 속성이 객체 자체에 속하는지 또는 프로토타입 체인에서 상속된 것인지를 기준으로 결정됩니다.
+
+열거 가능 여부와 관계없이 문자열이든 심볼이든, 자체 속성이든 상속된 속성이든, 모든 속성은 [점 표기법(dot notation) 또는 대괄호 표기법(bracket notation)](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors)을 사용하여 접근할 수 있습니다. 이 섹션에서는 JavaScript가 제공하는 객체 속성을 하나씩 방문하는 방법에 중점을 둡니다.
+
+## 객체 속성 쿼리하기
+
+객체의 속성을 쿼리하는 네 가지 기본 방법이 있습니다. 이들 모두 문자열 키와 심볼 키를 지원합니다. 다음 표는 각 메서드가 언제 `true`를 반환하는지 요약한 것입니다.
+
+| | 열거 가능, 자체 속성 | 열거 가능, 상속 속성 | 열거 불가능, 자체 속성 | 열거 불가능, 상속 속성 |
+| -------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- | ---------------------- | ---------------------- |
+| [`propertyIsEnumerable()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable) | `true ✅` | `false ❌` | `false ❌` | `false ❌` |
+| [`hasOwnProperty()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) | `true ✅` | `false ❌` | `true ✅` | `false ❌` |
+| [`Object.hasOwn()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn) | `true ✅` | `false ❌` | `true ✅` | `false ❌` |
+| [`in`](/ko/docs/Web/JavaScript/Reference/Operators/in) | `true ✅` | `true ✅` | `true ✅` | `true ✅` |
+
+## 객체 속성 순회하기
+
+JavaScript에는 객체의 속성 그룹을 순회하는 여러 메서드가 있습니다. 때로는 이러한 속성들이 배열로 반환되고, 때로는 루프에서 하나씩 반복되며, 때로는 다른 객체를 생성하거나 수정하는 데 사용됩니다. 다음 표는 특정 유형의 속성이 언제 방문될 수 있는지 요약한 것입니다.
+
+문자열 속성만 방문하거나 심볼 속성만 방문하는 메서드는 추가 설명이 있습니다. ✅는 해당 유형의 속성이 방문됨을 의미하고, ❌는 그렇지 않음을 의미합니다.
+
+| | 열거 가능, 자체 속성 | 열거 가능, 상속 속성 | 열거 불가능, 자체 속성 | 열거 불가능, 상속 속성 |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- | ---------------------- | ---------------------- |
+| [`Object.keys`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)<br />[`Object.values`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values)<br />[`Object.entries`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) | ✅<br />(strings) | ❌ | ❌ | ❌ |
+| [`Object.getOwnPropertyNames`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames) | ✅<br />(strings) | ❌ | ✅<br />(strings) | ❌ |
+| [`Object.getOwnPropertySymbols`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols) | ✅<br />(symbols) | ❌ | ✅<br />(symbols) | ❌ |
+| [`Object.getOwnPropertyDescriptors`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors) | ✅ | ❌ | ✅ | ❌ |
+| [`Reflect.ownKeys`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys) | ✅ | ❌ | ✅ | ❌ |
+| [`for...in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) | ✅<br />(strings) | ✅<br />(strings) | ❌ | ❌ |
+| [`Object.assign`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)<br />(첫 번째 매개변수 이후) | ✅ | ❌ | ❌ | ❌ |
+| [Object spread](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax) | ✅ | ❌ | ❌ | ❌ |
+
+## 열거 가능성/소유 여부에 따른 속성 얻기
+
+이것이 모든 경우에 가장 효율적인 알고리즘은 아니지만, 간단한 예제로 유용합니다.
+
+- 검출은 `SimplePropertyRetriever.theGetMethodYouWant(obj).includes(prop)`로 할 수 있습니다.
+- 반복은 `SimplePropertyRetriever.theGetMethodYouWant(obj).forEach((value, prop) => {});` (또는 `filter()`, `map()` 등을 사용)로 할 수 있습니다.
+
+```js
+const SimplePropertyRetriever = {
+ getOwnEnumerables(obj) {
+ return this._getPropertyNames(obj, true, false, this._enumerable);
+ // 또는 for...in을 Object.hasOwn으로 필터링하여 사용할 수 있습니다.
+ },
+ getOwnNonenumerables(obj) {
+ return this._getPropertyNames(obj, true, false, this._notEnumerable);
+ },
+ getOwnEnumerablesAndNonenumerables(obj) {
+ return this._getPropertyNames(
+ obj,
+ true,
+ false,
+ this._enumerableAndNotEnumerable,
+ );
+ // 또는 단순히 Object.getOwnPropertyNames(obj)를 사용할 수 있습니다.
+ },
+ getPrototypeEnumerables(obj) {
+ return this._getPropertyNames(obj, false, true, this._enumerable);
+ },
+ getPrototypeNonenumerables(obj) {
+ return this._getPropertyNames(obj, false, true, this._notEnumerable);
+ },
+ getPrototypeEnumerablesAndNonenumerables(obj) {
+ return this._getPropertyNames(
+ obj,
+ false,
+ true,
+ this._enumerableAndNotEnumerable,
+ );
+ },
+ getOwnAndPrototypeEnumerables(obj) {
+ return this._getPropertyNames(obj, true, true, this._enumerable);
+ // 또는 필터링되지 않은 for...in을 사용할 수 있습니다.
+ },
+ getOwnAndPrototypeNonenumerables(obj) {
+ return this._getPropertyNames(obj, true, true, this._notEnumerable);
+ },
+ getOwnAndPrototypeEnumerablesAndNonenumerables(obj) {
+ return this._getPropertyNames(
+ obj,
+ true,
+ true,
+ this._enumerableAndNotEnumerable,
+ );
+ },
+ // 내부 정적 속성 검사 콜백
+ _enumerable(obj, prop) {
+ return Object.prototype.propertyIsEnumerable.call(obj, prop);
+ },
+ _notEnumerable(obj, prop) {
+ return !Object.prototype.propertyIsEnumerable.call(obj, prop);
+ },
+ _enumerableAndNotEnumerable(obj, prop) {
+ return true;
+ },
+ // http://stackoverflow.com/a/8024294/271577 에서 영감을 받음
+ _getPropertyNames(obj, iterateSelf, iteratePrototype, shouldInclude) {
+ const props = [];
+ do {
+ if (iterateSelf) {
+ Object.getOwnPropertyNames(obj).forEach((prop) => {
+ if (props.indexOf(prop) === -1 && shouldInclude(obj, prop)) {
+ props.push(prop);
+ }
+ });
+ }
+ if (!iteratePrototype) {
+ break;
+ }
+ iterateSelf = true;
+ obj = Object.getPrototypeOf(obj);
+ } while (obj);
+ return props;
+ },
+};
+```
+
+## 같이 보기
+
+- [`in`](/ko/docs/Web/JavaScript/Reference/Operators/in)
+- [`for...in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in)
+- [`Object.prototype.hasOwnProperty()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)
+- [`Object.prototype.propertyIsEnumerable()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable)
+- [`Object.getOwnPropertyNames()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)
+- [`Object.getOwnPropertySymbols()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols)
+- [`Object.keys()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
+- [`Object.getOwnPropertyDescriptors()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors)
+- [`Object.hasOwn()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn)
+- [`Reflect.ownKeys()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys)
diff --git a/files/ko/web/javascript/event_loop/index.md b/files/ko/web/javascript/event_loop/index.md
index 9e79752a04e593..bafa6d27358e63 100644
--- a/files/ko/web/javascript/event_loop/index.md
+++ b/files/ko/web/javascript/event_loop/index.md
@@ -37,12 +37,12 @@ const baz = bar(7); // 42를 baz에 할당
위 코드의 실행 순서는 다음과 같습니다.
-1. `bar`를 호출할 때, `bar`의 인수와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다.
+1. `bar`를 호출할 때, `bar`의 인수와 지역 변수에 대한 참조를 포함하는 첫 번째 프레임이 생성됩니다.
2. `bar`가 `foo`를 호출할 때, `foo`의 인수와 지역 변수를 포함하는 두 번째 프레임이 생성되어 첫 번째 프레임의 위로 추가됩니다.
3. `foo`가 반환되면, 맨 위의 프레임 요소를 스택 밖으로 꺼냅니다(`bar` 호출 프레임만 남게 됩니다).
4. `bar`가 반환되면, 스택이 비어있게 됩니다.
-인수와 지역 변수는 스택 바깥에 저장되므로, 바깥 함수가 반환된 후에도 계속 존재할 수 있습니다. [중첩 함수](/ko/docs/Web/JavaScript/Guide/Functions#중첩된_함수와_클로저)에서 지역 변수에 접근할 수 있는 이유가 이것입니다.
+인수와 지역 변수는 스택 바깥에 저장되므로, 바깥 함수가 반환된 후에도 계속 존재할 수 있음을 유의하세요. [중첩 함수](/ko/docs/Web/JavaScript/Guide/Functions#중첩된_함수와_클로저)에서 지역 변수에 접근할 수 있는 이유가 이것입니다.
### 힙
diff --git a/files/ko/web/javascript/reference/global_objects/array/with/index.md b/files/ko/web/javascript/reference/global_objects/array/with/index.md
index 54c845eaeb0c31..7d9d549c79600a 100644
--- a/files/ko/web/javascript/reference/global_objects/array/with/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/with/index.md
@@ -2,7 +2,7 @@
title: Array.prototype.with()
slug: Web/JavaScript/Reference/Global_Objects/Array/with
l10n:
- sourceCommit: 6bd17cb9cbc2d11163617b9f71706e93fdd743c8
+ sourceCommit: 85d7482697cc2bf407c58e809a2a754180d6714c
---
{{JSRef}}
@@ -19,7 +19,7 @@ array.with(index, value)
- `index`
- : 배열을 변경할 0 기반 인덱스이며 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)되는 값입니다.
- - 음수 인덱스는 배열의 끝부터 역산합니다 — `index < 0`인 경우 `index + array.length`가 사용됩니다.
+ - 음수 인덱스는 배열의 끝부터 역산합니다 — `-array.length <= index < 0`인 경우 `index + array.length`가 사용됩니다.
- 정규화 후 인덱스가 범위를 벗어나면, {{jsxref("RangeError")}}가 발생합니다.
- `value`
- : 주어진 인덱스에 할당할 값입니다.
@@ -37,6 +37,8 @@ array.with(index, value)
`with()` 메서드는 배열에서 주어진 인덱스의 값을 변경하여, 주어진 인덱스에 있는 요소가 주어진 값으로 대체된 새 배열을 반환합니다. 원래 배열은 수정되지 않습니다. 이를 통해 조작을 수행하는 동안 배열 메서드를 연속으로 이어서 호출 할 수 있습니다.
+`with()`를 {{jsxref("Array/at", "at()")}}와 결합하면, 음수 인덱스를 사용하여 배열을 각각 읽고 쓸 수 있습니다.
+
`with()` 메서드는 [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소배열)을 생성하지 않습니다. 만약 원래 배열이 희소 배열인 경우 빈 슬롯은 새로운 배열에서 `undefined`으로 대체됩니다.
`with()` 메서드는 [제네릭](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods) 메서드입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성 만을 필요로 합니다.
@@ -71,8 +73,7 @@ console.log(arr.with(0, 2)); // [2, undefined, 3, 4, undefined, 6]
### 배열이 아닌 객체에서 with() 호출하기
-`with()` 메서드는 `this`의 `length` 속성을 읽습니다. 그리고 `this`의 정수 키 속성을 읽어서 새 배열에 쓰고,
-`value`는 주어진 `index`에 씁니다.
+`with()` 메서드는 새로운 배열을 생성하고 반환합니다. 이 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은, 음수가 아닌 정수인 각 속성에 접근합니다. `this`의 각 속성에 접근하면 속성의 키와 동일한 인덱스를 갖는 배열 요소가 속성의 값으로 설정됩니다. 마지막으로 `index`의 배열 값은 `value`로 설정됩니다.
```js
const arrayLike = {
@@ -80,6 +81,7 @@ const arrayLike = {
unrelated: "foo",
0: 5,
2: 4,
+ 3: 3, // length가 3이기 때문에 with()메서드는 이를 무시합니다.
};
console.log(Array.prototype.with.call(arrayLike, 0, 1));
// [ 1, undefined, 4 ]
@@ -96,7 +98,9 @@ console.log(Array.prototype.with.call(arrayLike, 0, 1));
## 같이 보기
- [Polyfill of `Array.prototype.with` in `core-js`](https://github.com/zloirock/core-js#change-array-by-copy)
+- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 가이드
- {{jsxref("Array.prototype.toReversed()")}}
- {{jsxref("Array.prototype.toSorted()")}}
- {{jsxref("Array.prototype.toSpliced()")}}
+- {{jsxref("Array.prototype.at()")}}
- {{jsxref("TypedArray.prototype.with()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/transfer/index.md b/files/ko/web/javascript/reference/global_objects/arraybuffer/transfer/index.md
new file mode 100644
index 00000000000000..cbb53c3987bb67
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/transfer/index.md
@@ -0,0 +1,122 @@
+---
+title: ArrayBuffer.prototype.transfer()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/transfer
+l10n:
+ sourceCommit: a0b5c6af9c854702d15ec800b529064fb7d297db
+---
+
+{{JSRef}}
+
+{{jsxref("ArrayBuffer")}} 인스턴스의 **`transfer()`** 메서드는 이 버퍼와 동일한 바이트 내용을 가진 새 `ArrayBuffer`를 생성한 다음 이 버퍼를 분리합니다.
+
+## 구문
+
+```js-nolint
+transfer()
+transfer(newByteLength)
+```
+
+### 매개변수
+
+- `newByteLength` {{optional_inline}}
+ - : 새 `ArrayBuffer`의 {{jsxref("ArrayBuffer/byteLength", "byteLength")}}입니다. 기본값은 이 `ArrayBuffer`의 `byteLength`입니다.
+ - `newByteLength`가 이 `ArrayBuffer`의 `byteLength`보다 작으면 해당 버퍼에 담지 못해 "넘치는" 바이트는 삭제됩니다.
+ - `newByteLength`가 이 `ArrayBuffer`의 `byteLength`보다 크다면 남는 바이트는 0으로 채워집니다.
+ - 이 `ArrayBuffer`의 크기를 조정할 수 있는 경우 `newByteLength`는 해당 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}}보다 크지 않아야 합니다.
+
+### 반환 값
+
+새로운 {{jsxref("ArrayBuffer")}} 객체입니다. 해당 객체의 내용은 이 `ArrayBuffer`의 내용으로 초기화되며, 여분의 바이트가 있으면 0으로 채워집니다. 새로운 `ArrayBuffer`는 이 `ArrayBuffer`가 크기 조정이 가능한 경우에만 크기를 조정할 수 있으며, 이 경우 새로운 객체의 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}}는 이 `ArrayBuffer`의 것과 동일합니다. 원래의 `ArrayBuffer`는 분리됩니다.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : 이 `ArrayBuffer`가 크기 조절이 가능하고 `newByteLength`가 이 `ArrayBuffer`의 {{jsxref("ArrayBuffer/maxByteLength", "maxByteLength")}}보다 크다면 발생합니다.
+- {{jsxref("TypeError")}}
+ - : `ArrayBuffer`가 이미 분리된 경우 발생합니다.
+
+## 설명
+
+`transfer()` 메서드는 [구조화된 복제 알고리즘](/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)과 동일한 연산을 수행합니다. 이 `ArrayBuffer`의 바이트를 새 `ArrayBuffer` 객체에 복사한 다음 이 `ArrayBuffer` 객체를 분리합니다. 자세한 내용은 [전송하는 배열 버퍼](/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer#transferring_arraybuffers)를 참조하십시오.
+
+`transfer()`는 이 `ArrayBuffer`의 크기 조정 가능 여부 값을 유지합니다. 새 `ArrayBuffer`의 크기를 조정할 수 없게 하려면 {{jsxref("ArrayBuffer/transferToFixedLength", "transferToFixedLength()")}}를 대신 사용하시기 바랍니다. 고정 길이 버퍼를 크기 조정이 가능하도록 만드는 버퍼를 전송하는 방법은 없습니다.
+
+`transfer()`는 구현에서 이 메서드를 제로 카피 이동 또는 `realloc`으로 구현할 수 있으므로 데이터의 실제 복사본이 없어도 되므로 매우 효율적입니다.
+
+## 예제
+
+### ArrayBuffer 전송하기
+
+```js
+// ArrayBuffer를 생성하고 몇 바이트를 기록합니다
+const buffer = new ArrayBuffer(8);
+const view = new Uint8Array(buffer);
+view[1] = 2;
+view[7] = 4;
+
+// 버퍼를 같은 크기로 복사합니다
+const buffer2 = buffer.transfer();
+console.log(buffer.detached); // true
+console.log(buffer2.byteLength); // 8
+const view2 = new Uint8Array(buffer2);
+console.log(view2[1]); // 2
+console.log(view2[7]); // 4
+
+// 버퍼를 더 작은 크기로 복사합니다
+const buffer3 = buffer2.transfer(4);
+console.log(buffer3.byteLength); // 4
+const view3 = new Uint8Array(buffer3);
+console.log(view3[1]); // 2
+console.log(view3[7]); // undefined
+
+// 버퍼를 더 큰 크기로 복사합니다
+const buffer4 = buffer3.transfer(8);
+console.log(buffer4.byteLength); // 8
+const view4 = new Uint8Array(buffer4);
+console.log(view4[1]); // 2
+console.log(view4[7]); // 0
+
+// 이미 분리됨, TypeError 발생
+buffer.transfer(); // TypeError: Cannot perform ArrayBuffer.prototype.transfer on a detached ArrayBuffer
+```
+
+### 크기 조절이 가능한 ArrayBuffer 전송하기
+
+```js
+const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
+const view = new Uint8Array(buffer);
+view[1] = 2;
+view[7] = 4;
+
+// 버퍼를 더 작은 크기로 복사
+const buffer2 = buffer.transfer(4);
+console.log(buffer2.byteLength); // 4
+console.log(buffer2.maxByteLength); // 16
+const view2 = new Uint8Array(buffer2);
+console.log(view2[1]); // 2
+console.log(view2[7]); // undefined
+buffer2.resize(8);
+console.log(view2[7]); // 0
+
+// maxByteLength 범위 내에서 더 큰 크기로 버퍼 복사
+const buffer3 = buffer2.transfer(12);
+console.log(buffer3.byteLength); // 12
+
+// maxByteLength 범위 보다 더 큰 크기로 버퍼 복사
+buffer3.transfer(20); // RangeError: Invalid array buffer length
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `ArrayBuffer.prototype.transfer()` in `core-js`](https://github.com/zloirock/core-js#arraybufferprototypetransfer-and-friends)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("ArrayBuffer.prototype.detached")}}
+- {{jsxref("ArrayBuffer.prototype.transferToFixedLength()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/dataview/setbiguint64/index.md b/files/ko/web/javascript/reference/global_objects/dataview/setbiguint64/index.md
new file mode 100644
index 00000000000000..d084f7fd082b2d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/dataview/setbiguint64/index.md
@@ -0,0 +1,65 @@
+---
+title: DataView.prototype.setBigUint64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64
+l10n:
+ sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
+---
+
+{{JSRef}}
+
+{{jsxref("DataView")}} 인스턴스의 **`setBigUint64()`** 메서드는 BigInt를 받아
+이 `DataView`의 지정된 바이트 오프셋의 8 바이트의 공간에 64비트 부호 없는 정수로 저장합니다.
+정렬 제약 조건은 없으며, 범위 내의 모든 오프셋에서 멀티바이트 값을 저장할 수 있습니다.
+
+{{EmbedInteractiveExample("pages/js/dataview-setbiguint64.html")}}
+
+## 구문
+
+```js-nolint
+setBigUint64(byteOffset, value)
+setBigUint64(byteOffset, value, littleEndian)
+```
+
+### 매개변수
+
+- `byteOffset`
+ - : 데이터를 저장할 데이터 뷰의 시작점으로부터의 바이트 단위의 오프셋.
+- `value`
+ - : {{jsxref("BigInt")}}로 설정할 값. 어떻게 값이 바이트로 인코딩되는지는 [값 인코딩 및 정규화](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#value_encoding_and_normalization)를 보시기 바랍니다.
+- `littleEndian` {{optional_inline}}
+ - : {{Glossary("Endianness", "리틀 엔디언 혹은 빅 엔디언")}} 형식으로 데이터를 저장할지 여부를 나타냅니다. `false` 혹은 `undefined`이라면 빅 엔디언 값을 읽습니다.
+
+### 반환 값
+
+{{jsxref("undefined")}}.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : 뷰의 끝을 넘어서 저장하려고 하는 `byteOffset`이 설정되면 발생합니다.
+
+## 예제
+
+### setBigUint64() 사용하기
+
+```js
+const buffer = new ArrayBuffer(10);
+const dataview = new DataView(buffer);
+dataview.setBigUint64(0, 3n);
+dataview.getBigUint64(1); // 768n
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) 가이드
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("BigUint64Array")}}
diff --git a/files/ko/web/javascript/reference/global_objects/date/getyear/index.md b/files/ko/web/javascript/reference/global_objects/date/getyear/index.md
new file mode 100644
index 00000000000000..23aef336cdf4d2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getyear/index.md
@@ -0,0 +1,84 @@
+---
+title: Date.prototype.getYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getYear
+l10n:
+ sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+{{jsxref("Date")}} 인스턴스의 `getYear()` 메서드는 현지 시간에 따라 이 날짜의 연도를 반환합니다. `getYear()`는 전체 연도("2000년도 문제")를 반환하지 않기 때문에 더 이상 사용되지 않으며 {{jsxref("Date/getFullYear", "getFullYear()")}} 메서드로 대체되었습니다.
+
+## 구문
+
+```js-nolint
+getYear()
+```
+
+### 매개변수
+
+없음.
+
+### 반환 값
+
+현지 시간 기준 지정된 날짜의 연도를 나타내는 정수에서 1900을 뺀 값입니다. 날짜가 [유효하지 않은](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date) 경우 `NaN`을 반환합니다.
+
+- 연도가 2000보다 크거나 같은 경우 값은 100보다 큽니다. 예를 들어 연도가 2026인 경우 `getYear()`는 126을 반환합니다.
+- 1900년부터 1999년까지 연도의 경우 `getYear()`가 반환하는 값은 0에서 99 사이입니다. 예를 들어 연도가 1976인 경우 `getYear()`는 76을 반환합니다.
+- 1900보다 작은 연도의 경우 `getYear()`가 반환하는 값은 0보다 작습니다. 예를 들어 연도가 1800인 경우 `getYear()`는 -100을 반환합니다.
+
+이 메서드는 기본적으로 {{jsxref("Date/getFullYear", "getFullYear()")}}의 값에서 1900을 뺀 값을 반환합니다. 대신 전체 연도가 명시된 `getFullYear()`를 사용해야 합니다.
+
+## 예제
+
+### 1900과 1999 사이의 연도
+
+두 번째 문은 변수 `year`에 95를 할당합니다.
+
+```js
+const xmas = new Date("1995-12-25");
+const year = xmas.getYear(); // returns 95
+```
+
+### 1999 이후의 연도
+
+두 번째 문은 변수 `year`에 100을 할당합니다.
+
+```js
+const xmas = new Date("2000-12-25");
+const year = xmas.getYear(); // returns 100
+```
+
+### 1900년 미만의 연도
+
+두 번째 문은 변수 `year`에 -100을 할당합니다.
+
+```js
+const xmas = new Date("1800-12-25");
+const year = xmas.getYear(); // returns -100
+```
+
+### 1900과 1999 사이의 연도 설정하기 및 가져오기
+
+세 번째 문은 1995년을 나타내기 위해 변수 `year`에 95를 할당합니다.
+
+```js
+const xmas = new Date("2015-12-25");
+xmas.setYear(95);
+const year = xmas.getYear(); // returns 95
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `Date.prototype.getYear` in `core-js`](https://github.com/zloirock/core-js#ecmascript-date)
+- {{jsxref("Date.prototype.getFullYear()")}}
+- {{jsxref("Date.prototype.getUTCFullYear()")}}
+- {{jsxref("Date.prototype.setYear()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/date/tolocaletimestring/index.md b/files/ko/web/javascript/reference/global_objects/date/tolocaletimestring/index.md
new file mode 100644
index 00000000000000..697dcbfe55e8d1
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/tolocaletimestring/index.md
@@ -0,0 +1,147 @@
+---
+title: Date.prototype.toLocaleTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+l10n:
+ sourceCommit: 580a62d0d68d5b35dd624c8f23be79698cfb78c2
+---
+
+{{JSRef}}
+
+{{jsxref("Date")}} 인스턴스의 **`toLocaleTimeString()`** 메서드는 현지 표준 시간대 날짜의 시간 부분을 언어에 맞춰 표현한 문자열을 반환합니다. [`Intl.DateTimeFormat` API](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)를 지원하는 구현에서 이 메서드는 단순히 `Intl.DateTimeFormat`을 호출합니다.
+
+`toLocaleTimeString`을 호출할 때마다 방대한 현지화 문자열 데이터베이스에서 검색을 수행해야 하므로 비효율적일 수 있습니다. 메서드가 동일한 인수를 사용하여 여러 번 호출되는 경우 `DateTimeFormat` 객체가 전달된 인수를 기억하고 데이터베이스의 일부를 캐시하기로 결정할 수 있으므로 {{jsxref("Intl.DateTimeFormat")}} 객체를 생성하고 그 {{jsxref("Intl/DateTimeFormat/format", "format()")}} 메서드를 사용하는 것이 더 좋습니다. 이렇게 함으로써 향후 `format` 호출에서 보다 제한된 컨텍스트 내에서 현지화 문자열을 검색할 수 있습니다.
+
+{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}
+
+## 구문
+
+```js-nolint
+toLocaleTimeString()
+toLocaleTimeString(locales)
+toLocaleTimeString(locales, options)
+```
+
+### 매개변수
+
+`locales` 및 `options` 매개변수는 함수의 동작을 사용자 정의하고 애플리케이션에서 형식 지정 규칙을 사용할 언어를 지정할 수 있도록 합니다.
+
+[`Intl.DateTimeFormat` API](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)를 지원하는 구현체에서 이러한 매개변수는 [`Intl.DateTimeFormat()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) 생성자 매개변수와 정확히 대응합니다. `Intl.DateTimeFormat`을 지원하지 않는 구현체는 두 매개변수를 모두 무시하도록 요청하므로 사용되는 로케일과 반환되는 문자열의 형식은 전적으로 구현체에 따라 달라집니다.
+
+- `locales` {{optional_inline}}
+
+ - : BCP 47 언어 태그가 포함된 문자열 또는 이러한 문자열의 배열입니다. `Intl.DateTimeFormat()` 생성자의 매개변수인 [`locales`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales)과 대응됩니다.
+
+ `Intl.DateTimeFormat`을 지원하지 않는 구현체에서는 이 매개변수를 무시하고 일반적으로 호스트의 로케일이 사용됩니다.
+
+- `options` {{optional_inline}}
+
+ - : 출력 형식을 조정하는 객체입니다. `Intl.DateTimeFormat()` 생성자의 매개변수 [`options`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)과 대응됩니다. `dayPeriod`, `hour`, `minute`, `second`, `fractionalSecondDigits`가 모두 정의되지 않았다면 `hour`, `minute`, `second`는 `"numeric"`으로 설정됩니다.
+
+ `Intl.DateTimeFormat`을 지원하지 않는 구현체에서는 이 매개변수를 무시합니다.
+
+이 매개변수 사용 방법에 대한 자세한 내용은 [`Intl.DateTimeFormat()` 생성자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat)를 참조하시기 바랍니다.
+
+### 반환 값
+
+언어별 규칙에 따라 지정된 날짜의 시간 부분을 나타내는 문자열입니다.
+
+`Intl.DateTimeFormat`를 구현한 구현체에서는 `new Intl.DateTimeFormat(locales, options).format(date)`과 동일하며, 여기서 `options`은 위에서 설명한 대로 정규화됩니다.
+
+> **참고:** 대부분의 경우 `toLocaleTimeString()`에서 반환되는 형식은 일관적입니다. 그러나 결과는 시간, 언어 및 구현체에 따라 달라질 수 있습니다. 또한 설계에 따라 다양한 결과가 있으며 명세에서 허용됩니다. `toLocaleTimeString()`의 결과를 정적 값과 비교해서는 안 됩니다.
+
+## 예제
+
+### toLocaleTimeString() 사용하기
+
+기본적으로 `locale`을 지정하지 않고 이 메서드를 사용하면 기본 로케일과 기본 옵션으로 형식이 지정된 문자열이 반환됩니다.
+
+```js
+const date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// 인수 없는 toLocaleTimeString()는 구현체, 기본 로케일, 기본 시간대에 의존합니다.
+console.log(date.toLocaleTimeString());
+// America/Los_Angeles 시간대, en-US 로케일에서 실행시켰을 경우 "7:00:00 PM" 입니다.
+```
+
+### locales 및 options 매개변수 지원 여부 확인
+
+`locales` 및 `options` 매개변수는 국제화 API 지원이 선택 사항이고 일부 시스템에는 필요한 데이터가 없을 수 있기 때문에 모든 구현체에서 지원되지 않을 수 있습니다. 국제화를 지원하지 않는 구현체의 경우 `toLocaleTimeString()`은 항상 시스템의 로케일을 사용하므로 사용자가 원하는 로케일이 아닐 수 있습니다. `locales` 및 `options` 매개 변수를 지원하는 모든 구현은 {{jsxref("Intl")}}를 지원해야 하므로, 아래 코드로 지원 여부를 확인할 수 있습니다.
+
+```js
+function toLocaleTimeStringSupportsLocales() {
+ return (
+ typeof Intl === "object" &&
+ !!Intl &&
+ typeof Intl.DateTimeFormat === "function"
+ );
+}
+```
+
+### locales 사용하기
+
+이 예는 현지화된 시간 형식의 몇 가지 변형을 보여줍니다. 애플리케이션의 사용자 인터페이스에서 사용되는 언어의 형식을 가져오려면 `locales` 인수를 사용하여 해당 언어(및 일부 대체 언어)를 지정해야 합니다.
+
+```js
+const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 아래 형식은 현지 시간대가 US의 America/Los_Angeles 라고 가정합니다
+
+// US English는 AM/PM과 함께 12시간 단위를 사용합니다.
+console.log(date.toLocaleTimeString("en-US"));
+// "7:00:00 PM"
+
+// British English는 AM/PM 없이 24시간 단위를 사용합니다.
+console.log(date.toLocaleTimeString("en-GB"));
+// "03:00:00"
+
+// 한국어는 AM/PM과 함께 12시간 단위를 사용합니다.
+console.log(date.toLocaleTimeString("ko-KR"));
+// "오후 12:00:00"
+
+// 다수가 아랍어를 말하는 국가에서 아랍어는 실제 아랍 숫자를 사용합니다
+console.log(date.toLocaleTimeString("ar-EG"));
+// "٧:٠٠:٠٠ م"
+
+// 발리어와 같이 요청하는 언어를 지원하지 않지만 인도네이사어로 대체 언어를 지정할 경우
+console.log(date.toLocaleTimeString(["ban", "id"]));
+// "11.00.00"
+```
+
+### options 사용하기
+
+`toLocaleTimeString()`의 결과는 아래와 같이 `options` 매개변수를 사용하여 사용자 맞춤 설정할 수 있습니다.
+
+```js
+const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 어플리케이션은 UTC를 사용하고 이를 명시화하기를 원할 수도 있습니다.
+const options = { timeZone: "UTC", timeZoneName: "short" };
+console.log(date.toLocaleTimeString("en-US", options));
+// "3:00:00 AM GMT"
+
+// 가끔씩은 US도 24시간 단위가 필요할 수 있습니다.
+console.log(date.toLocaleTimeString("en-US", { hour12: false }));
+// "19:00:00"
+
+// 기본 로케일을 사용하는 옵션을 사용했을때 오직 시와 분을 보여줍니다. 빈 배열을 사용합니다.
+console.log(
+ date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+);
+// "20:01"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.DateTimeFormat")}}
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toTimeString()")}}
+- {{jsxref("Date.prototype.toString()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/date/totimestring/index.md b/files/ko/web/javascript/reference/global_objects/date/totimestring/index.md
new file mode 100644
index 00000000000000..c3de1117e56cac
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/totimestring/index.md
@@ -0,0 +1,70 @@
+---
+title: Date.prototype.toTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+l10n:
+ sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
+---
+
+{{JSRef}}
+
+{{jsxref("Date")}} 인스턴스의 **`toTimeString()`** 메서드는 현지 시간대로 해석된 날짜의 시간 부분을 표현하는 문자열을 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/date-totimestring.html", "shorter")}}
+
+## 구문
+
+```js-nolint
+toTimeString()
+```
+
+### 매개 변수
+
+없음.
+
+### 반환 값
+
+주어진 날짜의 시간 부분을 표현하는 문자열입니다 (형식에 대해서는 설명을 참고하시기 바랍니다). 날짜가 [유효하지 않으면](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date) `"Invalid Date"`을 반환합니다.
+
+## 설명
+
+{{jsxref("Date")}} 인스턴스는 특정 시점을 참조합니다. `toTimeString()`은 날짜를 현지 시간대로 해석하고 시간 부분의 형식을 영어로 지정합니다. 항상 `hh:mm:ss GMT±xxxx (TZ)` 형식을 사용합니다.
+
+| 형식 문자열 | 설명 |
+| ----------- | --------------------------------------------------------------------------------------------------- |
+| `hh` | 시간, 필요 시 0으로 시작하는 2자리 숫자 |
+| `mm` | 분, 필요 시 0으로 시작하는 2자리 숫자 |
+| `ss` | 초, 필요 시 0으로 시작하는 2자리 숫자 |
+| `±xxxx` | 현지 시간대의 오프셋. 시간을 나타내는 2자리 숫자와 분을 나타내는 2자리 숫자 (e.g. `-0500`, `+0800`) |
+| `TZ` | 시간대의 이름(e.g. `PDT`, `PST`) |
+
+예: "04:42:04 GMT+0000 (협정 세계시)".
+
+- 날짜 부분만 가져오려면 {{jsxref("Date/toDateString", "toDateString()")}}를 사용합니다.
+- 날짜와 시간을 모두 가져오려면 {{jsxref("Date/toString", "toString()")}}를 사용합니다.
+- 날짜를 현지 표준 시간대 대신 UTC로 해석하려면 {{jsxref("Date/toUTCString", "toUTCString()")}}를 사용합니다.
+- 보다 사용자 친화적인 형식(예: 현지화)으로 날짜 형식을 지정하려면 {{jsxref("Date/toLocaleTimeString", "toLocaleTimeString()")}}를 사용합니다.
+
+## 예제
+
+### toTimeString() 사용하기
+
+```js
+const d = new Date(0);
+
+console.log(d.toString()); // "Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time)"
+console.log(d.toTimeString()); // "00:00:00 GMT+0000 (Coordinated Universal Time)"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
+- {{jsxref("Date.prototype.toDateString()")}}
+- {{jsxref("Date.prototype.toString()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/intl/index.md b/files/ko/web/javascript/reference/global_objects/intl/index.md
new file mode 100644
index 00000000000000..c7e43e44854725
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/index.md
@@ -0,0 +1,162 @@
+---
+title: Intl
+slug: Web/JavaScript/Reference/Global_Objects/Intl
+l10n:
+ sourceCommit: 165d921f6f96711117be2b6513944ce36c70703f
+---
+
+{{JSRef}}
+
+**`Intl`** 네임스페이스 객체에는 여러 생성자와 국제화 생성자 및 기타 언어에 민감한 함수에 공통된 기능이 포함되어 있습니다. 이를 종합하여 언어에 민감한 문자열 비교, 숫자 서식, 날짜 및 시간 서식 등을 제공하는 ECMAScript 국제화 API를 구성합니다.
+
+## 설명
+
+대부분의 전역 객체와 달리 `Intl`은 생성자가 아닙니다. [`new` 연산자](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 사용하거나 `Intl` 객체를 함수로 호출할 수 없습니다. {{jsxref("Math")}} 객체와 마찬가지로 `Intl`의 모든 프로퍼티와 메서드는 정적입니다.
+
+국제화 생성자뿐만 아니라 다른 생성자의 여러 언어에 민감한 메서드([같이 보기](#같이_보기)에 나열되어 있습니다)는 로케일을 식별하고 실제로 사용할 로케일을 결정하는 데 공통 패턴을 사용합니다. 모두 `locales` 및 `options` 인수를 받아들이고 `options.localeMatcher` 속성에 지정된 알고리즘을 사용하여 지원되는 로케일에 대해 요청된 로케일을 협상하는 방식입니다.
+
+### locales 인수
+
+`locales` 인수는 주어진 연산에 사용되는 로케일을 정하는 데 사용됩니다. JavaScript 구현체는 `locales`을 검사하고 표현된 기본 설정을 충족하기 위해 가장 근접한 로케일을 계산합니다. 아래 항목이 `locales`이 될 수 있습니다.
+
+- `undefined` (흑은 생략): 구현체의 기본 로케일을 사용합니다.
+- 하나의 로케일: 하나의 로케일 식별자 혹은 로케일 식별자를 감싸는 [`Intl.Locale`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) 객체
+- 로케일 리스트: 다른 값은 객체로 변환된 다음 로케일 배열로 처리됩니다.
+
+후자의 두 경우에서 사용되는 실제 로케일은 [로케일 협상](#로케일_식별_및_협상)을 통해 결정된, 가장 잘 지원되는 로케일입니다. 로케일 식별자가 문자열이나 객체가 아닌 경우 {{jsxref("TypeError")}}가 발생합니다. 로케일 식별자가 구문상 유효하지 않은 문자열인 경우 {{jsxref("RangeError")}}가 발생합니다. 로케일 식별자가 제대로 형성되었지만 구현체가 이를 인식하지 못하면 무시되고 목록의 다음 로케일이 고려되어 결국 시스템의 로케일로 되돌아갑니다. 그러나 구현체가 향후 모든 로케일에 대한 데이터를 추가할 수 있으므로 특정 로케일 이름이 무시되는 것에 의존해서는 안 됩니다. 예를 들어 `new Intl.DateTimeFormat("default")`는 `"default"`가 구문상으로는 유효하지만 어떤 로케일로도 인식되지 않기 때문에 구현체의 기본 로케일만 사용하게 됩니다.
+
+로케일 식별자는 다음으로 구성된 문자열입니다.
+
+1. 2~3자 또는 5~8자로 구성된 언어 하위 태그
+2. 4글자로 구성된 스크립트 하위 태그 {{optional_inline}}
+3. 2글자 또는 3자리로 구성된 지역 하위 태그 {{optional_inline}}
+4. 각각 5~8개의 영숫자 또는 숫자 한 자리 뒤에 영숫자 3개가 포함된 하나 이상의 변형 하위 태그(반드시 모두 고유해야 함) {{optional_inline}}
+5. 하나 이상의 BCP 47 확장 시퀀스 {{optional_inline}}
+6. 개인용 확장 시퀀스 {{optional_inline}}
+
+각 하위 태그와 시퀀스는 하이픈으로 구분됩니다. 로케일 식별자는 대소문자를 구분하지 않는 {{Glossary("ASCII")}}입니다. 그러나 스크립트 하위 태그에는 제목 대문자(첫 글자는 대문자, 이어지는 글자는 소문자)를, 지역 하위 태그에는 대문자를, 그 외에는 모두 소문자를 사용하는 것이 일반적입니다. 예를 들어
+
+- `"hi"`: 힌두어(언어)
+- `"de-AT"`: 오스트리아(지역)에서 사용하는 독일어(언어)
+- `"zh-Hans-CN"`: 중국(지역)에서 사용하는 간체(스크립트)로 쓰인 중국어(언어)
+- `"en-emodeng"`: "초기 현대 영어" 방언(변형)의 영어(언어)
+
+언어, 스크립트, 지역(국가 포함) 및 변형(드물게 사용)을 식별하는 하위 태그는 [IANA 언어 하위 태그 레지스트리](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)에 등록되어 있습니다. 이 레지스트리는 시간이 지남에 따라 주기적으로 업데이트되며 구현이 항상 최신 상태가 아닐 수도 있으므로 하위 태그가 널리 지원될 것이라는데 너무 의존하지 마시기 바랍니다.
+
+BCP 47 확장 시퀀스는 한 자리 숫자 또는 문자(`"x"` 제외)와 하이픈으로 구분된 하나 이상의 2~8자리 숫자 또는 숫자 하위 태그로 구성됩니다. 각 숫자 또는 문자당 하나의 시퀀스만 허용됩니다 `"de-a-foo-a-foo"`는 유효하지 않습니다. BCP 47 확장자 하위태그는 [유니코드 CLDR 프로젝트](https://github.com/unicode-org/cldr/tree/main/common/bcp47)에 정의되어 있습니다. 현재 두 개의 확장자만 의미가 정의되어 있습니다.
+
+- `"u"`(유니코드) 확장자는 `Intl` API 객체의 추가 사용자 지정을 요청하는 데 사용할 수 있습니다. 아래는 예시입니다.
+
+ - `"de-DE-u-co-phonebk"`: 독일어 정렬 순서의 전화번호부 변형을 사용하여 다음과 같이 움라우트 모음을 해당 문자 쌍으로 해석합니다. ä → ae, ö → oe, ü → ue.
+ - `"th-TH-u-nu-thai"`: 숫자 형식에 태국 숫자(๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙)를 사용합니다.
+ - `"ja-JP-u-ca-japanese"`: 날짜 및 시간 서식에서 일본 달력을 사용하여 2013년을 헤이세이 시대 25년, 즉 平成 25로 표시합니다.
+ - `"en-GB-u-ca-islamic"`: 영국식 영어와 이슬람(회교) 달력을 사용하며, 2017년 10월 14일 그레고리력은 1439년 무하람 24일 회교력입니다.
+
+- `"t"`(변환됨) 확장자는 변환된 콘텐츠(예: 다른 로케일에서 번역된 텍스트)를 나타냅니다. 현재 `Intl` 기능은 `"t"` 확장자를 고려하지 않습니다. 그러나 이 확장자는 때때로 확장자가 없는 중첩 로케일을 포함합니다. 예를 들어 `"de-t-en"`의 변환된 확장자는 영어에 대한 로케일 식별자를 포함합니다. 중첩 로케일이 있는 경우 유효한 로케일 식별자이어야 합니다. 예를 들어 `"en-emodeng-emodeng"`은 중복된 `emodeng` 변형 하위 태그가 포함되어 있으므로 유효하지 않으므로 `"de-t-en-emodeng-emodeng"`도 유효하지 않습니다.
+
+마지막으로 문자 `"x"`를 사용하는 비공개 확장자 시퀀스 뒤에 하이픈으로 구분된 하나 이상의 1~8자 또는 숫자 하위 태그가 나타날 수 있습니다. 이를 통해 애플리케이션은 자체적으로 비공개로 사용할 정보를 인코딩할 수 있으며, 모든 `Intl` 연산에서 무시됩니다.
+
+### options 인수
+
+`options` 인수는 생성자와 함수마다 다른 속성을 가진 객체여야 합니다. `options` 인수가 제공되지 않거나 정의되지 않은 경우 모든 속성에 기본값이 사용됩니다.
+
+`localeMatcher` 속성은 모든 언어에 민감한 생성자 및 함수에서 지원됩니다. 이 속성의 값은 문자열 `"lookup"` 또는 `"best fit"`이어야 하며 아래에 설명된 로케일 일치 알고리즘 중 하나를 선택해야 합니다.
+
+### 로케일 식별 및 협상
+
+`locales` 인수로 지정된 로케일 목록은 유니코드 확장이 제거된 후 애플리케이션에서 우선순위가 지정된 요청으로 해석됩니다. 런타임은 이를 사용 가능한 로케일과 비교하여 사용 가능한 최상의 로케일을 선택합니다. 여기엔 두 가지 매칭 알고리즘이 존재합니다. `"lookup"` 매칭은 [BCP 47](https://datatracker.ietf.org/doc/html/rfc4647#section-3.4)에 명시된 Lookup 알고리즘을 따르고, `"best fit"` 매칭은 런타임이 Lookup 알고리즘의 결과보다 최소한 요청에 더 적합한 로케일을 제공할 수 있도록 합니다. 만약 애플리케이션에서 `locales` 인수를 제공하지 않거나 런타임에 요청과 일치하는 로케일이 없는 경우 런타임의 기본 로케일이 사용됩니다. 일치 여부 검사기는 `options` 인수의 속성을 사용하여 선택할 수 있습니다(아래를 참조하시기 바랍니다).
+
+선택한 로케일 식별자에 유니코드 확장 순서가 있는 경우 이제 해당 확장을 사용하여 생성된 객체 또는 함수의 동작을 사용자 맞춤 사용할 수 있습니다. 각 생성자 또는 함수는 유니코드 확장에 대해 정의된 키의 하위 집합만 지원하며, 지원되는 값은 로케일 식별자에 따라 달라지는 경우가 많습니다. 예를 들어 `"co"` 키(콜레이션)는 {{jsxref("Intl.Collator")}}에서만 지원되며, `"phonebk"` 값은 독일어에서만 지원됩니다.
+
+## 정적 속성
+
+- {{jsxref("Intl.Collator")}}
+ - : 언어별 문자열 비교를 가능하게 하는 객체인 콜레이터의 생성자입니다.
+- {{jsxref("Intl.DateTimeFormat")}}
+ - : 언어별 날짜와 시간 형식을 정할 수 있는 객체의 생성자입니다.
+- {{jsxref("Intl.DisplayNames")}}
+ - : 언어, 지역 및 스크립트 표시 이름을 일관되게 번역할 수 있는 객체의 생성자입니다.
+- {{jsxref("Intl.DurationFormat")}} {{experimental_inline}}
+ - : 로케일별로 기간 형식을 지정할 수 있는 객체의 생성자입니다.
+- {{jsxref("Intl.ListFormat")}}
+ - : 언어별 리스트 형식을 정할 수 있는 객체의 생성자입니다.
+- {{jsxref("Intl.Locale")}}
+ - : 유니코드 식별자를 표현할 수 있는 객체의 생성자입니다.
+- {{jsxref("Intl.NumberFormat")}}
+ - : 언어별 숫자 형식을 정할 수 있는 객체의 생성자입니다.
+- {{jsxref("Intl.PluralRules")}}
+ - : 복수형을 구분하는 형식과 언어별 규칙을 활성화하는 객체의 생성자입니다.
+- {{jsxref("Intl.RelativeTimeFormat")}}
+ - : 상대 시간 형식을 정할 수 있는 객체의 생성자입니다.
+- {{jsxref("Intl.Segmenter")}}
+ - : 로케일에 따른 텍스트 세그먼트를 정할 수 있는 객체의 생성자입니다.
+- `Intl[@@toStringTag]`
+ - : [`@@toStringTag`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag)속성의 초기값은 문자열 `"Intl"`입니다. 이 속성은 {{jsxref("Object.prototype.toString()")}}에서 사용합니다.
+
+## 정적 메서드
+
+- {{jsxref("Intl.getCanonicalLocales()")}}
+ - : 표준 로케일 이름을 반환합니다.
+- {{jsxref("Intl.supportedValuesOf()")}}
+ - : 구현체에서 지원하는 지원되는 고유한 달력, 콜레이션, 통화, 숫자 체계 또는 단위 값이 포함된, 정렬된 배열을 반환합니다.
+
+## 예제
+
+### 날짜와 숫자 서식 지정
+
+`Intl`를 사용하여 특정 언어 및 지역의 일반적인 형식으로 날짜 및 숫자 형식을 지정할 수 있습니다.
+
+```js
+const count = 26254.39;
+const date = new Date("2012-05-24");
+
+function log(locale) {
+ console.log(
+ `${new Intl.DateTimeFormat(locale).format(date)} ${new Intl.NumberFormat(
+ locale,
+ ).format(count)}`,
+ );
+}
+
+log("en-US"); // 5/24/2012 26,254.39
+
+log("de-DE"); // 24.5.2012 26.254,39
+```
+
+### 브라우저의 선호 언어 사용하기
+
+`Intl` 메서드에 하드코딩된 로케일 이름을 전달하는 대신 {{domxref("navigator.language")}}에서 제공하는 사용자가 선호하는 언어를 사용할 수 있습니다.
+
+```js
+const date = new Date("2012-05-24");
+
+const formattedDate = new Intl.DateTimeFormat(navigator.language).format(date);
+```
+
+또는 {{domxref("navigator.languages")}} 속성은 사용자가 선호하는 언어의 정렬된 목록을 제공합니다. 이 목록을 `Intl` 생성자에 직접 전달하여 기본 설정 기반 로케일 대체 선택을 구현할 수 있습니다. [로케일 협상](#로케일_식별_및_협상) 프로세스는 사용 가능한 가장 적합한 로케일을 선택하는 데 사용됩니다.
+
+```js
+const count = 26254.39;
+
+const formattedCount = new Intl.NumberFormat(navigator.languages).format(count);
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("String.prototype.localeCompare()")}}
+- {{jsxref("Number.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
+- {{domxref("Keyboard.getLayoutMap()")}}
+- {{domxref("navigator.language")}}
+- {{domxref("navigator.languages")}}
+- [The ECMAScript Internationalization API](https://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html) by Norbert Lindenberg (2012)
diff --git a/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/relativetimeformat/index.md b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/relativetimeformat/index.md
new file mode 100644
index 00000000000000..ac4d970b4d2c24
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/relativetimeformat/index.md
@@ -0,0 +1,109 @@
+---
+title: Intl.RelativeTimeFormat() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat
+l10n:
+ sourceCommit: 21d44fab158378a975fd89ec37e46ec68a411bf2
+---
+
+{{JSRef}}
+
+**`Intl.RelativeTimeFormat()`** 생성자는 {{jsxref("Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}} 객체를 생성합니다.
+
+## 구문
+
+```js-nolint
+new Intl.RelativeTimeFormat()
+new Intl.RelativeTimeFormat(locales)
+new Intl.RelativeTimeFormat(locales, options)
+```
+
+> **참고:** `Intl.RelativeTimeFormat()` 생성자는 오직
+> [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)와 함께 사용할 수 있습니다.
+> `new` 없이 호출하면 {{jsxref("TypeError")}}가 발생합니다.
+
+### 매개변수
+
+- `locales` {{optional_inline}}
+
+ - : BCP 47 언어 태그가 포함된 문자열 또는 {{jsxref("Intl.Locale")}} 인스턴스 또는 이러한 로케일 식별자의 배열입니다. `undefined`이 전달되거나 명시된 로케일 식별자가 지원되지 않는 경우 런타임의 기본 로케일이 사용됩니다. `locales` 인수의 일반적인 형식과 해석에 대해서는 [`Intl` 메인 페이지의 매개변수 설명](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)을 참조하세요.
+
+ 허용되는 유니코드 확장 키는 아래와 같습니다.
+
+ - `nu`
+ - : [`numberingSystem`](#numberingsystem) 를 참고하세요.
+
+ 이 키는 아래 나열된 대로 `options`으로 설정할 수도 있습니다. 둘 다 설정된 경우 `options` 속성이 우선합니다.
+
+- `options` {{optional_inline}}
+
+ - : 검색되는 순서대로 다음 속성을 포함하는 객체입니다(모두 선택 사항입니다).
+
+ - `localeMatcher`
+ - : 사용할 로케일 일치 알고리즘입니다. 가능한 값은 `"lookup"` 및 `"best fit"`이며, 기본값은 `"best fit"`입니다. 이 옵션에 대해 더 알고 싶으시다면 [로케일 식별 및 협상](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation)을 참고하시기 바랍니다.
+ - `numberingSystem`
+ - : 숫자 형식화에 사용할 `"arab"`, `"hans"`, `"mathsans"` 등의 숫자 체계입니다. 지원되는 숫자 체계 유형 목록은 [`Intl.Locale.prototype.getNumberingSystems()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getNumberingSystems#supported_numbering_system_types)를 참고하시기 바랍니다. 이 옵션은 `nu` 유니코드 확장 키를 통해서도 설정할 수 있으며, 둘 다 제공된 경우 이 `옵션` 속성이 우선합니다.
+ - `style`
+ - : 형식화된 상대 시간의 스타일입니다. 가능한 값은 다음과 같습니다.
+ - `"long"` (default)
+ - : 예를 들어, "in 1 month"
+ - `"short"`
+ - : 예를 들어, "in 1 mo."
+ - `"narrow"`
+ - : 예를 들어, "in 1 mo.". 좁은 스타일은 일부 로케일의 경우 짧은 스타일과 유사할 수 있습니다.
+ - `numeric`
+ - : 출력에 숫자 값을 사용할지 여부입니다. 가능한 값은 `"always"` 및 `"auto"`이며, 기본값은 `"always"`입니다. `"auto"`으로 설정하면 출력에 `"1 day ago"`이 아닌 `"yesterday"`와 같은 관용적인 문구가 더 많이 사용될 수 있습니다.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : `locales` 또는 `options` 에 유효하지 않은 값이 포함되어 있을 경우 발생합니다.
+
+## 예제
+
+### 기본적인 format 사용
+
+아래 예제는 한국어를 사용하여 상대 시간 형식기를 생성하는 방법을 보여줍니다.
+
+```js
+// 기본 값을 넣어서 여러분의 로케일로 상대 시간 형식기를 만듭니다.
+const rtf = new Intl.RelativeTimeFormat("ko", {
+ localeMatcher: "best fit", // 다른 값: "lookup"
+ numeric: "always", // 대른 값: "auto"
+ style: "long", // 다른 값: "short" or "narrow"
+});
+
+// 음수(-1)을 사용한 상대 시간 형식화
+rtf.format(-1, "day"); // "1일 전"
+
+// 양수(1)을 사용한 상대 시간 형식화
+rtf.format(1, "day"); // "1일 후"
+```
+
+### auto 옵션 사용하기
+
+`numeric:auto` 옵션을 전달하면 `1일 전` 또는 `1일 후` 대신 `어제` 또는 `내일` 문자열을 생성합니다. 이는 출력에 항상 숫자 값을 사용할 필요를 없게 만듭니다.
+
+```js
+// numeric: "auto" 옵션을 넣어서 여러분의 로케일로 상대 시간 형식기를 만듭니다.
+const rtf = new Intl.RelativeTimeFormat("ko", { numeric: "auto" });
+
+// 음수(-1)을 사용하여 상대 시간을 형식화합니다.
+rtf.format(-1, "day"); // "어제"
+
+// 양수(1)을 사용하여 상대 시간을 형식화합니다.
+rtf.format(1, "day"); // "내일"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.RelativeTimeFormat")}}
+- {{jsxref("Intl")}}
+- [`Intl.RelativeTimeFormat`](https://v8.dev/features/intl-relativetimeformat) on v8.dev (2018)
diff --git a/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md
new file mode 100644
index 00000000000000..0390202e84ff3e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md
@@ -0,0 +1,76 @@
+---
+title: Intl.RelativeTimeFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions
+l10n:
+ sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}}
+
+{{jsxref("Intl.RelativeTimeFormat")}} 인스턴스의 **`resolvedOptions()`** 메서드는 이 `Intl.RelativeTimeFormat` 객체의 초기화 중 계산된 상대 시간 형식 옵션과 로케일을 반영하는 속성을 가진 새 객체를 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-resolvedoptions.html")}}
+
+## 구문
+
+```js-nolint
+resolvedOptions()
+```
+
+### 매개변수
+
+없음.
+
+### 반환 값
+
+주어진 {{jsxref("Intl.RelativeTimeFormat")}} 객체를 초기화하는 동안 계산된 로케일 및 숫자 형식 옵션을 반영하는 속성을 가진 새 객체.
+
+## 설명
+
+결과 객체는 다음의 속성을 가집니다.
+
+- `locale`
+ - : 실제로 사용된 로케일에 대한 BCP 47 언어 태그입니다. 이 로케일로 이어지는 입력 BCP 47 언어 태그에 유니코드 확장 값이 요청된 경우, 이 로케일에 대해 요청되고 지원되는 키-값 쌍이 `locale`에 포함됩니다.
+- `style`
+
+ - : 국제화된 메시지의 길이입니다. 가능한 값은 다음과 같습니다.
+
+ - `"long"` (기본 값, 예를 들어 `in 1 month`)
+ - `"short"` (예를 들어 `in 1 mo.`),
+ - 혹은 `"narrow"` (예를 들어 `in 1 mo.`). 좁은 스타일은 일부 로케일의 경우 짧은 스타일과 유사할 수 있습니다.
+
+- `numeric`
+
+ - : 출력 메시지의 형식입니다. 아래 값이 올 수 있습니다.
+
+ - `"always"` (기본 값, 예를 들어 `1 day ago`),
+ - 혹은 `"auto"` (예를 들어 `yesterday`). `"auto"` 값을 사용하면 출력에 항상 숫자 값을 사용할 필요가 없습니다.
+
+- `numberingSystem`
+ - : 유니코드 확장 키 `"nu"`를 사용하는 요청된 값 혹은 기본 값으로 채워진 값입니다.
+
+## 예제
+
+### resolvedOptions() 메서드 사용하기
+
+```js
+const de = new Intl.RelativeTimeFormat("de-DE");
+const usedOptions = de.resolvedOptions();
+
+usedOptions.locale; // "de-DE"
+usedOptions.style; // "long"
+usedOptions.numeric; // "always"
+usedOptions.numberingSystem; // "latn"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.RelativeTimeFormat")}}
diff --git a/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md
new file mode 100644
index 00000000000000..199bb751998c30
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md
@@ -0,0 +1,57 @@
+---
+title: Intl.RelativeTimeFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf
+l10n:
+ sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
+---
+
+{{JSRef}}
+
+**`Intl.RelativeTimeFormat.supportedLocalesOf()`** 정적 메서드는 런타임의 기본 로케일로 돌아갈 필요 없이 상대 시간 형식으로 지원되는 제공된 로케일이 포함된 배열을 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-supportedlocalesof.html", "shorter")}}
+
+## 구문
+
+```js-nolint
+Intl.RelativeTimeFormat.supportedLocalesOf(locales)
+Intl.RelativeTimeFormat.supportedLocalesOf(locales, options)
+```
+
+### 매개변수
+
+- `locales`
+ - : BCP 47 언어 태그가 포함된 문자열 또는 이러한 로케일 식별자의 배열입니다. `locales` 인수의 일반적인 형식과 해석에 대해서는 [`Intl` 메인 페이지의 매개변수 설명](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)을 참조하세요.
+- `options` {{optional_inline}}
+ - : 다음의 속성을 가질 수 있는 객체
+ - `localeMatcher`
+ - : 사용할 로케일 일치 알고리즘입니다. 가능한 값은 `"lookup"` 및 `"best fit"`이며, 기본값은 `"best fit"`입니다. 이 옵션에 대해 더 알고 싶으시다면 {{jsxref("Intl", "Intl", "#locale_identification_and_negotiation", 1)}} 페이지를 참고하시기 바랍니다.
+
+### 반환 값
+
+런타임의 기본 로케일로 되돌아가지 않고 상대 시간 형식으로 지원되는 지정된 로케일 태그의 하위 집합을 나타내는 문자열 배열입니다.
+
+## 예제
+
+### supportedLocalesOf() 사용하기
+
+인도네시아어와 독일어는 지원하지만 인도네시아어는 상대 시간 형식을 지원하지 않는 런타임을 가정해보면, `supportedLocalesOf`는 인도네시아어와 독일어 언어 태그를 변경 없이 반환하지만 `pinyin` 콜레이션은 상대 시간 형식과 관련이 없거나 인도네시아어와 함께 사용되지 않으며 인도네시아에 특화된 독일어는 지원되지 않을 가능성이 높습니다. 여기서 `"lookup"` 알고리즘의 명세에 유의하세요. 대부분의 인도네시아어 사용자도 인도네시아어를 이해하므로 `"best fit"` 매처는 인도네시아어가 인도네시아어와 적절히 일치한다고 판단하여 인도네시아어 태그도 반환할 수 있습니다.
+
+```js
+const locales = ["ban", "id-u-co-pinyin", "de-ID"];
+const options = { localeMatcher: "lookup" };
+console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options));
+// ["id-u-co-pinyin", "de-ID"]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.RelativeTimeFormat")}}
diff --git a/files/ko/web/javascript/reference/global_objects/math/atan2/index.md b/files/ko/web/javascript/reference/global_objects/math/atan2/index.md
new file mode 100644
index 00000000000000..4923314a6d0d47
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/atan2/index.md
@@ -0,0 +1,155 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
+l10n:
+ sourceCommit: 6d606174faaedaa5dee7b7ebd87602cd51e5dd7e
+---
+
+{{JSRef}}
+
+**`Math.atan2()`** 정적 메서드는 `Math.atan2(y, x)`에 대해 양의 x축과 (0, 0)에서 (x, y)점까지의 광선 사이의 평면 각도(라디안 단위)를 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/math-atan2.html")}}
+
+## 구문
+
+```js-nolint
+Math.atan2(y, x)
+```
+
+### 매개변수
+
+- `y`
+ - : 점의 y좌표.
+- `x`
+ - : 점의 x좌표.
+
+### 반환 값
+
+양의 x축과 (0, 0)에서 (x, y) 지점까지의 광선 사이의 각도(-π와 π 사이, 포함)를 라디안 단위로 표시합니다.
+
+## 설명
+
+`Math.atan2()` 메서드는 양수 x축과 점 `(x, y)` 사이의 시계 반대 방향 각도 θ를 라디안 단위로 측정합니다. 이 함수의 인수는 y 좌표를 먼저 전달하고 x 좌표를 두 번째로 전달합니다.
+
+
+
+`Math.atan2()`는 별도의 `x` 및 `y` 인수를 전달하는 반면, [`Math.atan()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/atan)은 이 두 인수의 비율을 전달합니다. 다음과 같은 경우 `Math.atan2(y, x)`는 `Math.atan(y / x)`와 다릅니다.
+
+| `x` | `y` | `Math.atan2(y, x)` | `Math.atan(y / x)` |
+| -------------------- | ----------- | ------------------ | ------------------ |
+| `Infinity` | `Infinity` | π / 4 | `NaN` |
+| `Infinity` | `-Infinity` | -π / 4 | `NaN` |
+| `-Infinity` | `Infinity` | 3π / 4 | `NaN` |
+| `-Infinity` | `-Infinity` | -3π / 4 | `NaN` |
+| 0 | 0 | 0 | `NaN` |
+| 0 | -0 | -0 | `NaN` |
+| < 0 (including `-0`) | 0 | π | 0 |
+| < 0 (including `-0`) | -0 | -π | 0 |
+| `-Infinity` | > 0 | π | -0 |
+| -0 | > 0 | π / 2 | -π / 2 |
+| `-Infinity` | < 0 | -π | 0 |
+| -0 | < 0 | -π / 2 | π / 2 |
+
+또한 두 번째 및 세 번째 사분면(`x < 0`)에 있는 점의 경우 `Math.atan2()`는 <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math>보다 작거나 <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math>보다 큰 각도를 출력합니다.
+
+`atan2()`는 `Math`의 정적 메서드이므로, 생성한 `Math` 객체의 메서드가 아니라 항상 `Math.atan2()`로 사용합니다(`Math`는 생성자가 아닙니다).
+
+## 예제
+
+### Math.atan2() 사용하기
+
+```js
+Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+```
+
+### Math.atan2(y, x) 과 Math.atan(y / x) 의 차이
+
+아래 스크립트는 `Math.atan2(y, x)`과 `Math.atan(y / x)`의 차이를 출력합니다.
+
+```js
+const formattedNumbers = new Map([
+ [-Math.PI, "-π"],
+ [(-3 * Math.PI) / 4, "-3π/4"],
+ [-Math.PI / 2, "-π/2"],
+ [-Math.PI / 4, "-π/4"],
+ [Math.PI / 4, "π/4"],
+ [Math.PI / 2, "π/2"],
+ [(3 * Math.PI) / 4, "3π/4"],
+ [Math.PI, "π"],
+ [-Infinity, "-∞"],
+ [Infinity, "∞"],
+]);
+
+function format(template, ...args) {
+ return String.raw(
+ { raw: template },
+ ...args.map((num) =>
+ (Object.is(num, -0)
+ ? "-0"
+ : formattedNumbers.get(num) ?? String(num)
+ ).padEnd(5),
+ ),
+ );
+}
+
+console.log(`| x | y | atan2 | atan |
+|-------|-------|-------|-------|`);
+
+for (const x of [-Infinity, -1, -0, 0, 1, Infinity]) {
+ for (const y of [-Infinity, -1, -0, 0, 1, Infinity]) {
+ const atan2 = Math.atan2(y, x);
+ const atan = Math.atan(y / x);
+ if (!Object.is(atan2, atan)) {
+ console.log(format`| ${x} | ${y} | ${atan2} | ${atan} |`);
+ }
+ }
+}
+```
+
+출력 결과는 아래와 같습니다.
+
+```plain
+| x | y | atan2 | atan |
+|-------|-------|-------|-------|
+| -∞ | -∞ | -3π/4 | NaN |
+| -∞ | -1 | -π | 0 |
+| -∞ | -0 | -π | 0 |
+| -∞ | 0 | π | -0 |
+| -∞ | 1 | π | -0 |
+| -∞ | ∞ | 3π/4 | NaN |
+| -1 | -∞ | -π/2 | π/2 |
+| -1 | -1 | -3π/4 | π/4 |
+| -1 | -0 | -π | 0 |
+| -1 | 0 | π | -0 |
+| -1 | 1 | 3π/4 | -π/4 |
+| -1 | ∞ | π/2 | -π/2 |
+| -0 | -∞ | -π/2 | π/2 |
+| -0 | -1 | -π/2 | π/2 |
+| -0 | -0 | -π | NaN |
+| -0 | 0 | π | NaN |
+| -0 | 1 | π/2 | -π/2 |
+| -0 | ∞ | π/2 | -π/2 |
+| 0 | -0 | -0 | NaN |
+| 0 | 0 | 0 | NaN |
+| ∞ | -∞ | -π/4 | NaN |
+| ∞ | ∞ | π/4 | NaN |
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Math.acos()")}}
+- {{jsxref("Math.asin()")}}
+- {{jsxref("Math.atan()")}}
+- {{jsxref("Math.cos()")}}
+- {{jsxref("Math.sin()")}}
+- {{jsxref("Math.tan()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/object/hasown/index.md b/files/ko/web/javascript/reference/global_objects/object/hasown/index.md
new file mode 100644
index 00000000000000..b3d045a3c6845e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/hasown/index.md
@@ -0,0 +1,153 @@
+---
+title: Object.hasOwn()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwn
+l10n:
+ sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+---
+
+{{JSRef}}
+
+명시된 객체에 자체 속성으로 지정된 속성이 있는 경우 **`Object.hasOwn()`** 정적 메서드는 `true`를 반환합니다. 속성이 상속되었거나 존재하지 않으면 이 메서드는 `false`를 반환합니다.
+
+> **참고:** `Object.hasOwn()`은 {{jsxref("Object.prototype.hasOwnProperty()")}}를 대체하기 위한 것입니다.
+
+{{EmbedInteractiveExample("pages/js/object-hasown.html")}}
+
+## 구문
+
+```js-nolint
+Object.hasOwn(obj, prop)
+```
+
+### 매개변수
+
+- `obj`
+ - : 평가할 JavaScript 객체 인스턴스
+- `prop`
+ - : {{jsxref("String")}} 이름 혹은 테스트할 속성의 [Symbol](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol).
+
+### 반환 값
+
+지정된 객체가 직접 명시된 속성을 정의했다면 `true`. 그렇지 않으면 `false`
+
+## 설명
+
+명시된 속성이 값이 `null` 혹은 `undefined`일 경우일지라도 객체의 직접적인 속성인 경우 **`Object.hasOwn()`** 메서드는 `true`를 반환합니다. 속성이 상속되었거나 전혀 선언되지 않은 경우 이 메서드는 `false`를 반환합니다. {{jsxref("Operators/in", "in")}} 연산자와는 달리, 이 메서드는 객체의 프로토타입 체인에서 지정된 속성을 확인하지 않습니다.
+
+이 메서드는 [`null` 프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) 및 상속된 `hasOwnProperty()` 메서드를 재정의한 객체에 대해 작동하므로 {{jsxref("Object.prototype.hasOwnProperty()")}}보다 권장됩니다. 외부 객체에서 `Object.prototype.hasOwnProperty()`를 호출하여 이러한 문제를 해결할 수 있지만, `Object.hasOwn()`을 사용하는 것이 더 직관적입니다.
+
+## 예제
+
+### 속성의 존재를 시험하기 위한 hasOwn 사용하기
+
+다음 코드는 `example` 객체에 `prop`이라는 속성의 포함 여부를 확인하는 방법을 보여줍니다.
+
+```js
+const example = {};
+Object.hasOwn(example, "prop"); // false - 'prop'이 정의되지 않았습니다
+
+example.prop = "exists";
+Object.hasOwn(example, "prop"); // true - 'prop' 이 정의되었습니다
+
+example.prop = null;
+Object.hasOwn(example, "prop"); // true - 자체 속성이 null 값으로 존재합니다
+
+example.prop = undefined;
+Object.hasOwn(example, "prop"); // true - 자체 속성이 undefined 값으로 존재합니다
+```
+
+### 직접 vs 상속된 속성
+
+다음 예제에서는 직접적인 속성과 프로토타입 체인을 통해 상속된 프로퍼티를 구분합니다.
+
+```js
+const example = {};
+example.prop = "exists";
+
+// `hasOwn` 은 오직 직접적인 속성만 true를 반환합니다.
+Object.hasOwn(example, "prop"); // true
+Object.hasOwn(example, "toString"); // false
+Object.hasOwn(example, "hasOwnProperty"); // false
+
+// `in` 연산자는 직접적인 속성 혹은 상속된 속성이 있을 경우 true를 반환합니다.
+"prop" in example; // true
+"toString" in example; // true
+"hasOwnProperty" in example; // true
+```
+
+### 객체의 속성을 순회하기
+
+객체의 열거 가능한 속성을 순회하기 위해서는 반드시 아래와 같이 사용해야 합니다.
+
+```js
+const example = { foo: true, bar: true };
+for (const name of Object.keys(example)) {
+ // …
+}
+```
+
+그러나 `for...in`을 사용해야 하는 경우 `Object.hasOwn()`을 사용하여 상속된 속성을 건너뛸 수 있습니다.
+
+```js
+const example = { foo: true, bar: true };
+for (const name in example) {
+ if (Object.hasOwn(example, name)) {
+ // …
+ }
+}
+```
+
+### 배열 인덱스의 존재여부 확인하기
+
+{{jsxref("Array")}}의 요소는 직접적인 속성으로 정의되기 때문에 `hasOwn()` 메서드를 사용하여 특정 인덱스의 존재 여부를 확인할 수 있습니다:
+
+```js
+const fruits = ["Apple", "Banana", "Watermelon", "Orange"];
+Object.hasOwn(fruits, 3); // true ('Orange')
+Object.hasOwn(fruits, 4); // false - not defined
+```
+
+### hasOwnProperty의 문제 사례
+
+이 섹션에서는 `hasOwn()`이 `hasOwnProperty`에 영향을 미치는 문제에 영향을 받지 않는다는 것을 보여줍니다. 첫 번째로, `hasOwnProperty()`를 재구현한 객체와 함께 사용할 수 있습니다.
+
+```js
+const foo = {
+ hasOwnProperty() {
+ return false;
+ },
+ bar: "The dragons be out of office",
+};
+
+if (Object.hasOwn(foo, "bar")) {
+ console.log(foo.bar); // true - hasOwnProperty()를 재구현해도 Object에는 영향을 끼치지 않습니다
+}
+```
+
+또한 [`null`-프로토타입 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)와 함께 사용할 수도 있습니다. 이는 `Object.prototype`에서 상속되지 않으므로 `hasOwnProperty()`에 접근할 수 없습니다.
+
+```js
+const foo = Object.create(null);
+foo.prop = "exists";
+if (Object.hasOwn(foo, "prop")) {
+ console.log(foo.prop); // true - 객체가 어떻게 생성되었든 작동합니다.
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `Object.hasOwn` in `core-js`](https://github.com/zloirock/core-js#ecmascript-object)
+- {{jsxref("Object.prototype.hasOwnProperty()")}}
+- [Enumerability and ownership of properties](/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Statements/for...in", "for...in")}}
+- {{jsxref("Operators/in", "in")}}
+- [상속과 프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/compile/index.md b/files/ko/web/javascript/reference/global_objects/regexp/compile/index.md
new file mode 100644
index 00000000000000..dcb3e1a69234f8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/compile/index.md
@@ -0,0 +1,52 @@
+---
+title: RegExp.prototype.compile()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/compile
+l10n:
+ sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+> **참고:** `compile()` 메서드는 호환성을 위해서만 명시되어 있습니다. `compile()`을 사용하면 변경 불가능한 정규식 소스와 플래그가 변경 가능하므로 사용자의 예상을 빗나갈 수 있습니다. 대신 [`RegExp()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp) 생성자를 사용하여 새 정규식 객체를 생성할 수 있습니다.
+
+{{jsxref("RegExp")}} 인스턴스의 **`compile()`** 메서드는 `RegExp` 객체가 이미 생성된 후 새로운 소스와 플래그를 사용하여 정규식을 다시 컴파일하는 데 사용됩니다.
+
+## 구문
+
+```js-nolint
+compile(pattern, flags)
+```
+
+### 매개변수
+
+- `pattern`
+ - : 정규 표현식 텍스트
+- `flags`
+ - : [플래그 값](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp#flags)의 조합.
+
+### 반환 값
+
+없음 ({{jsxref("undefined")}}).
+
+## 예제
+
+### compile() 사용하기
+
+다음 예제는 새로운 패턴과 새로운 플래그를 사용하여 정규식을 다시 컴파일하는 방법을 보여 줍니다.
+
+```js
+const regexObj = new RegExp("foo", "gi");
+regexObj.compile("new foo", "g");
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp")}}
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/hasindices/index.md b/files/ko/web/javascript/reference/global_objects/regexp/hasindices/index.md
new file mode 100644
index 00000000000000..3dc9f6e597902a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/hasindices/index.md
@@ -0,0 +1,65 @@
+---
+title: RegExp.prototype.hasIndices
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices
+l10n:
+ sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
+---
+
+{{JSRef}}
+
+{{jsxref("RegExp")}} 인스턴스의 **`hasIndices`** 접근자 속성은 이 정규 표현식과 함께 `d` 플래그가 사용되는지 여부를 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-hasindices.html")}}
+
+## 설명
+
+`d` 플래그가 사용된 경우 `RegExp.prototype.hasIndices`는 `true` 값을 가지며, 그렇지 않은 경우 `false` 값을 갖습니다. `d` 플래그는 정규 표현식 일치 결과에 각 캡처 그룹의 하위 문자열의 시작 및 끝 인덱스가 포함됨을 나타냅니다. 이 플래그는 정규 표현식의 해석이나 일치 동작을 어떤 식으로든 변경하지 않으며 일치 결과에 추가 정보만 제공합니다.
+
+이 플래그는 주로 [`exec()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec)의 반환 값에 영향을 줍니다. `d` 플래그가 있는 경우, `exec()`가 반환하는 배열에는 `exec()` 메서드의 [반환 값](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec#return_value)에 설명된 대로 추가 `indices` 속성이 있습니다. 다른 모든 정규식 관련 메서드(예: {{jsxref("String.prototype.match()")}})는 내부적으로 `exec()`을 호출하므로 정규식에 `d` 플래그가 있는 경우 인덱스도 반환합니다.
+
+`hasIndices` 설정 접근자는 `undefined`입니다. 이 속성을 직접 변경할 수 없습니다.
+
+## 예제
+
+좀 더 상세한 사용 예제는 [그룹과 역참조 > 그룹과 인덱스 일치 사용하기](/ko/docs/Web/JavaScript/Guide/Regular_expressions/Groups_and_backreferences#using_groups_and_match_indices)에 있습니다.
+
+### hasIndices 사용하기
+
+```js
+const str1 = "foo bar foo";
+
+const regex1 = /foo/dg;
+
+console.log(regex1.hasIndices); // true
+
+console.log(regex1.exec(str1).indices[0]); // [0, 3]
+console.log(regex1.exec(str1).indices[0]); // [8, 11]
+
+const str2 = "foo bar foo";
+
+const regex2 = /foo/;
+
+console.log(regex2.hasIndices); // false
+
+console.log(regex2.exec(str2).indices); // undefined
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.dotAll")}}
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
+- {{jsxref("RegExp.prototype.unicode")}}
diff --git a/files/ko/web/javascript/reference/global_objects/string/anchor/index.md b/files/ko/web/javascript/reference/global_objects/string/anchor/index.md
new file mode 100644
index 00000000000000..d345cc497f0a0f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/anchor/index.md
@@ -0,0 +1,72 @@
+---
+title: String.prototype.anchor()
+slug: Web/JavaScript/Reference/Global_Objects/String/anchor
+l10n:
+ sourceCommit: 5a2cea779777daaff451f21ca3b7f4c28a68de9e
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+{{jsxref("String")}} 값의 **`anchor()`** 메서드는 name(`<a name="...">str</a>`)이 있는 {{HTMLElement("a")}} 요소 안에 해당 문자열을 집어넣은 문자열을 생성합니다.
+
+> **참고:** 모든 [HTML 래퍼 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)는 더 이상 사용되지 않으며 호환성 목적으로만 표준화되었습니다. 대신 [`document.createElement()`](/ko/docs/Web/API/Document_Object_Model)와 같은 [DOM API](/ko/docs/Web/API/Document/createElement)를 사용하시기 바랍니다.
+>
+> HTML 명세서는 더 이상 {{HTMLElement("a")}} 요소가 `name` 특성을 가지는걸 허용하지 않기 때문에 이 메서드는 유효한 마크업을 생성할 수 없습니다.
+
+## 구문
+
+```js-nolint
+anchor(name)
+```
+
+### 매개변수
+
+- `name`
+ - : 생성된 `<a name="...">` 시작 태그에 넣을 `name`의 값을 표현하는 문자열.
+
+### 반환 값
+
+`<a name="name">` 시작 태그(`name`의 쌍따옴표는 `"`로 대체), 그 다음 `str` 내용, `</a>` 종료 태그로 이어지는 문자열.
+
+## 예제
+
+### anchor() 사용하기
+
+아래 코드는 HTML 문자열을 생성한 다음 document의 body를 해당 문자열로 대체합니다.
+
+```js
+const contentString = "Hello, world";
+
+document.body.innerHTML = contentString.anchor("hello");
+```
+
+이는 다음과 같은 HTML을 생성합니다.
+
+```html
+<a name="hello">Hello, world</a>
+```
+
+> **경고:** `name`이 {{HTMLElement("a")}} 요소의 유효한 특성이 아니기 때문에 이 마크업은 유효하지 않습니다.
+
+`anchor()`를 사용하여 HTML 텍스트를 직접 작성하는 대신 [`document.createElement()`](/ko/docs/Web/API/Document/createElement)와 같은 DOM API를 사용해야 합니다. 아래의 예를 참고하세요.
+
+```js
+const contentString = "Hello, world";
+const elem = document.createElement("a");
+elem.innerText = contentString;
+document.body.appendChild(elem);
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`의 `String.prototype.anchor` 폴리필](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [HTML 래퍼 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("a")}}
diff --git a/files/ko/web/javascript/reference/global_objects/string/codepointat/index.md b/files/ko/web/javascript/reference/global_objects/string/codepointat/index.md
new file mode 100644
index 00000000000000..d125678329d41c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/codepointat/index.md
@@ -0,0 +1,97 @@
+---
+title: String.prototype.codePointAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+l10n:
+ sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
+---
+
+{{JSRef}}
+
+{{jsxref("String")}} 값의 **`codePointAt()`** 메서드는 주어진 인덱스에서 시작하는 문자의 유니코드 코드 포인트 값인 음수가 아닌 정수를 반환합니다. 인덱스는 여전히 유니코드 코드 포인트가 아닌 UTF-16 코드 단위를 기반으로 한다는 점에 유의하시기 바랍니다.
+
+{{EmbedInteractiveExample("pages/js/string-codepointat.html", "shorter")}}
+
+## 구문
+
+```js-nolint
+codePointAt(index)
+```
+
+### 매개변수
+
+- `index`
+ - : 반환할 문자의 0 기반 인덱스. [정수로 변환되는 규칙](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)에 따라 `undefined`는 0으로 변환됩니다.
+
+### 반환 값
+
+주어진 `index`에 있는 문자열의 코드 포인트 값을 표현하는 음이 아닌 정수.
+
+- `index`가 `0`부터 `str.length - 1`의 범위에서 벗어난다면, `codePointAt()`은 {{jsxref("undefined")}}을 반환합니다.
+- `index`에 있는 요소가 서로게이트로 선행 UTF-16이라면 서로게이트 쌍의 코드 포인트를 반환합니다.
+- `index`에 있는 요소가 서로게이트로 후행 UTF-16이라면 서로게이트 후행 만을 반환합니다.
+
+## 설명
+
+문자열의 문자는 왼쪽에서 오른쪽으로 인덱싱됩니다. 첫 번째 문자의 인덱스는 `0`이고, 문자열 `str`의 마지막 문자의 인덱스는 `str.length - 1`입니다.
+
+유니코드 코드 포인트의 범위는 `0`에서 `1114111`(`0x10FFFF`)까지입니다. UTF-16에서 각 문자열 인덱스는 `0` - `65535` 값을 갖는 코드 단위입니다. 더 큰 코드 포인트 값은 16비트 서로게이트 의사 문자의 한 쌍으로 표현됩니다. 따라서 `codePointAt()`은 두 문자열 인덱스에 걸쳐 있을 수 있는 코드 포인트를 반환합니다. 유니코드에 대한 자세한 내용은 [UTF-16 문자, 유니코드 코드 포인트 및 문자소 클러스터](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters)를 참조하세요.
+
+## 예제
+
+### codePointAt() 사용하기
+
+```js
+"ABC".codePointAt(0); // 65
+"ABC".codePointAt(0).toString(16); // 41
+
+"😍".codePointAt(0); // 128525
+"\ud83d\ude0d".codePointAt(0); // 128525
+"\ud83d\ude0d".codePointAt(0).toString(16); // 1f60d
+
+"😍".codePointAt(1); // 56845
+"\ud83d\ude0d".codePointAt(1); // 56845
+"\ud83d\ude0d".codePointAt(1).toString(16); // de0d
+
+"ABC".codePointAt(42); // undefined
+```
+
+### 반복문에서 codePointAt() 사용
+
+반복에 문자열 인덱스를 사용하면 동일한 코드 포인트를 두 번(선행 서로게이트에 한 번, 후행 서로게이트에 한 번) 방문하게 되고 두 번째 `codePointAt()`은 후행 서로게이트만 반환하므로 인덱스로 반복은 피하는 것이 좋습니다.
+
+```js example-bad
+const str = "\ud83d\udc0e\ud83d\udc71\u2764";
+
+for (let i = 0; i < str.length; i++) {
+ console.log(str.codePointAt(i).toString(16));
+}
+// '1f40e', 'dc0e', '1f471', 'dc71', '2764'
+```
+
+대신 코드 포인트별로 반복하는 문자열의 [`@@iterator`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)를 호출하는 [`for...of`](/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) 문이나 [문자열 전개](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax)를 사용합니다. 그런 다음 `codePointAt(0)`을 사용하여 각 요소의 코드 포인트를 가져옵니다.
+
+```js
+for (const codePoint of str) {
+ console.log(codePoint.codePointAt(0).toString(16));
+}
+// '1f40e', '1f471', '2764'
+
+[...str].map((cp) => cp.codePointAt(0).toString(16));
+// ['1f40e', '1f471', '2764']
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `String.prototype.codePointAt` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- {{jsxref("String.fromCodePoint()")}}
+- {{jsxref("String.fromCharCode()")}}
+- {{jsxref("String.prototype.charCodeAt()")}}
+- {{jsxref("String.prototype.charAt()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/string/fromcodepoint/index.md b/files/ko/web/javascript/reference/global_objects/string/fromcodepoint/index.md
new file mode 100644
index 00000000000000..de4033e112b3ad
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/fromcodepoint/index.md
@@ -0,0 +1,98 @@
+---
+title: String.fromCodePoint()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+l10n:
+ sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
+---
+
+{{JSRef}}
+
+**`String.fromCodePoint()`** 정적 메서드는 명시된 코드 포인트의 시퀀스로부터 생성된 문자열을 반환합니다.
+
+{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html", "shorter")}}
+
+## 구문
+
+```js-nolint
+String.fromCodePoint()
+String.fromCodePoint(num1)
+String.fromCodePoint(num1, num2)
+String.fromCodePoint(num1, num2, /* …, */ numN)
+```
+
+### 매개변수
+
+- `num1`, …, `numN`
+ - : 유니코드의 코드 포인트를 표현하는 `0`부터 `0x10FFFF` 이하의 정수.
+
+### 반환 값
+
+명시된 코드 포인트의 시퀀스를 사용하여 생성된 문자열
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : `numN`이 정수가 아니거나 `0`보다 작거나 혹은 숫자로 변환된 후 `0x10FFFF`보다 크면 발생합니다.
+
+## 설명
+
+`fromCodePoint()`는 `String`의 정적 메서드이기 때문에, 항상 사용자가 만든 `String` 값의 메서드가 아닌 `String.fromCodePoint()`로 사용합니다.
+
+유니코드 코드 포인트의 범위는 `0`에서 `1114111`(`0x10FFFF`)까지입니다. UTF-16에서 각 문자열 인덱스는 `0` - `65535` 값을 갖는 코드 단위입니다. 더 높은 코드 포인트는 16비트 서로게이트 의사 문자의 쌍으로 표현됩니다. 따라서 `fromCodePoint()`는 전달된 인수 수보다 [`length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/length)(UTF-16 코드 단위)가 더 큰 문자열을 반환할 수 있습니다. 유니코드에 대한 자세한 내용은 [UTF-16 문자, 유니코드 코드 포인트 및 문자소 클러스터](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters)를 참조하세요.
+
+## 예제
+
+### fromCodePoint() 사용하기
+
+아래는 유효한 입력입니다.
+
+```js
+String.fromCodePoint(42); // "*"
+String.fromCodePoint(65, 90); // "AZ"
+String.fromCodePoint(0x404); // "\u0404" === "Є"
+String.fromCodePoint(0x2f804); // "\uD87E\uDC04"
+String.fromCodePoint(194564); // "\uD87E\uDC04"
+String.fromCodePoint(0x1d306, 0x61, 0x1d307); // "\uD834\uDF06a\uD834\uDF07"
+```
+
+아래는 유효하지 않은 입력입니다.
+
+```js
+String.fromCodePoint("_"); // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1); // RangeError
+String.fromCodePoint(3.14); // RangeError
+String.fromCodePoint(3e-2); // RangeError
+String.fromCodePoint(NaN); // RangeError
+```
+
+### fromCharCode()와의 비교
+
+{{jsxref("String.fromCharCode()")}}는 코드 포인트를 지정하여 보조 문자(예: 코드 포인트 `0x010000` - `0x10FFFF`)를 반환할 수 없습니다. 대신 보조 문자를 반환하려면 UTF-16 서로게이트 쌍이 필요합니다.
+
+```js
+String.fromCharCode(0xd83c, 0xdf03); // Code Point U+1F303 "Night with
+String.fromCharCode(55356, 57091); // Stars" === "\uD83C\uDF03"
+```
+
+반면 `String.fromCodePoint()`는 코드 포인트(UTF-32 코드 단위와 동일)를 지정하여 4바이트 보조 문자뿐만 아니라 보다 일반적인 2바이트 BMP 문자도 반환할 수 있습니다.
+
+```js
+String.fromCodePoint(0x1f303); // or 127747 in decimal
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `String.fromCodePoint` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- {{jsxref("String.fromCharCode()")}}
+- {{jsxref("String.prototype.charAt()")}}
+- {{jsxref("String.prototype.codePointAt()")}}
+- {{jsxref("String.prototype.charCodeAt()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/string/italics/index.md b/files/ko/web/javascript/reference/global_objects/string/italics/index.md
new file mode 100644
index 00000000000000..069f53e7c15d0d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/italics/index.md
@@ -0,0 +1,67 @@
+---
+title: String.prototype.italics()
+slug: Web/JavaScript/Reference/Global_Objects/String/italics
+l10n:
+ sourceCommit: 5a2cea779777daaff451f21ca3b7f4c28a68de9e
+---
+
+{{JSRef}} {{Deprecated_Header}}
+
+{{jsxref("String")}} 값의 **`italics()`** 메서드는 문자열을 이탤릭체로 보이게 하는 {{HTMLElement("i")}} 요소(`<i>str</i>`)에 해당 문자열을 집어넣은 문자열을 생성합니다.
+
+> **참고:** 모든 [HTML 래퍼 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)는 더 이상 사용되지 않으며 호환성 목적으로만 표준화되었습니다. 대신 [`document.createElement()`](/ko/docs/Web/API/Document_Object_Model)와 같은 [DOM API](/ko/docs/Web/API/Document/createElement)를 사용하시기 바랍니다.
+
+## 구문
+
+```js-nolint
+italics()
+```
+
+### 매개변수
+
+없음.
+
+### 반환 값
+
+`<i>` 시작 태그, 그 다음 `str` 내용, `</i>` 종료 태그로 이어지는 문자열.
+
+## 예제
+
+### italics() 사용하기
+
+아래 코드는 HTML 문자열을 생성한 다음 document의 body를 해당 문자열로 대체합니다.
+
+```js
+const contentString = "Hello, world";
+
+document.body.innerHTML = contentString.italics();
+```
+
+이는 다음과 같은 HTML을 생성합니다.
+
+```html
+<i>Hello, world</i>
+```
+
+`italics()`를 사용하여 HTML 텍스트를 직접 작성하는 대신 [`document.createElement()`](/ko/docs/Web/API/Document/createElement)와 같은 DOM API를 사용해야 합니다. 아래의 예를 참고하세요.
+
+```js
+const contentString = "Hello, world";
+const elem = document.createElement("i");
+elem.innerText = contentString;
+document.body.appendChild(elem);
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `String.prototype.italics` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
+- [HTML wrapper methods](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)
+- {{HTMLElement("i")}}
diff --git a/files/ko/web/javascript/reference/global_objects/string/startswith/index.md b/files/ko/web/javascript/reference/global_objects/string/startswith/index.md
index 0a9f2aa1663c7d..b0e76193de38c0 100644
--- a/files/ko/web/javascript/reference/global_objects/string/startswith/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/startswith/index.md
@@ -1,11 +1,13 @@
---
title: String.prototype.startsWith()
slug: Web/JavaScript/Reference/Global_Objects/String/startsWith
+l10n:
+ sourceCommit: b7ca46c94631967ecd9ce0fe36579be334a01275
---
{{JSRef}}
-**`startsWith()`** 메서드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 `true` 혹은 `false`로 반환합니다.
+**`startsWith()`**는 {{jsxref("String")}} 값의 메서드로, 어떤 문자열의 문자로 시작하는지 확인하여 결과를 적절하게 `true` 혹은 `false`로 반환합니다.
{{EmbedInteractiveExample("pages/js/string-startswith.html")}}
@@ -19,9 +21,9 @@ startsWith(searchString, position)
### 매개변수
- `searchString`
- - : 문자열의 시작 지점에서 탐색할 문자열. 정규표현식이 올 수 없습니다.
+ - : 이 문자열의 시작 부분에서 검색할 문자. [정규식](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp#special_handling_for_regexes)이 될 수 없습니다. 정규식이 아닌 모든 값은 [문자열로 강제로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)되므로 이를 생략하거나 `undefined`를 전달하면 `startsWith()`가 `"undefined"` 문자열을 검색하게 되는데, 이는 원하는 경우가 거의 없습니다.
- `position` {{optional_inline}}
- - : `searchString`을 탐색할 위치. 기본값은 `0`.
+ - : `searchString`이 발견될 것으로 예상되는 시작 위치(`searchString`의 첫 번째 문자의 인덱스)입니다. 기본값은 `0`입니다.
### 반환 값
@@ -48,7 +50,7 @@ console.log(str.startsWith("not to be")); // false
console.log(str.startsWith("not to be", 10)); // true
```
-## 명세
+## 명세서
{{Specifications}}
diff --git a/files/ko/web/javascript/reference/global_objects/string/towellformed/index.md b/files/ko/web/javascript/reference/global_objects/string/towellformed/index.md
new file mode 100644
index 00000000000000..fab6ecdda482cd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/towellformed/index.md
@@ -0,0 +1,91 @@
+---
+title: String.prototype.toWellFormed()
+slug: Web/JavaScript/Reference/Global_Objects/String/toWellFormed
+l10n:
+ sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
+---
+
+{{JSRef}}
+
+{{jsxref("String")}}값의 **`toWellFormed()`** 메서드는 이 문자열의 모든 [론 서로게이트](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters)가 유니코드 대체 문자 U+FFFD로 대체된 문자열을 반환합니다.
+
+## 구문
+
+```js-nolint
+toWellFormed()
+```
+
+### 매개변수
+
+없음.
+
+### 반환 값
+
+이 문자열의 복사본인 새 문자열로, 모든 론 서로게이트가 유니코드 대체 문자 U+FFFD로 대체됩니다. `str`이 [잘 형성된 문자열](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/isWellFormed)인 경우에도 새 문자열이 반환됩니다(기본적으로 `str`의 복사본).
+
+## 설명
+
+JavaScript의 문자열은 UTF-16으로 인코딩됩니다. UTF-16 인코딩에는 서로게이트 쌍이라는 개념이 있으며, 이는 [UTF-16 문자, 유니코드 코드 포인트 및 문자소 클러스터](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_code_points_and_grapheme_clusters) 섹션에 자세히 소개되어 있습니다.
+
+`toWellFormed()`는 이 문자열의 코드 단위를 반복하고 모든 론 서로게이트를 [유니코드 대체 문자](<https://en.wikipedia.org/wiki/Specials_(Unicode_block)#Replacement_character>) U+FFFD `�`로 대체합니다. 이렇게 하면 반환된 문자열이 올바른 형식의 문자열이 되어 {{jsxref("encodeURI")}}와 같이 올바른 형식의 문자열을 기대하는 함수에서 사용할 수 있습니다. 사용자 정의 구현과 비교할 때 `toWellFormed()`는 엔진이 문자열의 내부 표현에 직접 접근할 수 있으므로 더 효율적입니다.
+
+잘못된 형식의 문자열이 {{domxref("TextEncoder")}}와 같은 특정 문맥에서 사용되는 경우 동일한 대체 문자를 사용하여 자동으로 올바른 형식의 문자열로 변환됩니다. 론 서로게이트가 렌더링될 때는 대체 문자(내부에 물음표가 있는 다이아몬드)로도 렌더링됩니다.
+
+## 예제
+
+### toWellFormed() 사용하기
+
+```js
+const strings = [
+ // 론 상위 서로게이트
+ "ab\uD800",
+ "ab\uD800c",
+ // 론 하위 서로게이트
+ "\uDFFFab",
+ "c\uDFFFab",
+ // 잘 형성된 문자열
+ "abc",
+ "ab\uD83D\uDE04c",
+];
+
+for (const str of strings) {
+ console.log(str.toWellFormed());
+}
+// Logs:
+// "ab�"
+// "ab�c"
+// "�ab"
+// "c�ab"
+// "abc"
+// "ab😄c"
+```
+
+### encodeURI()에서 오류 피하기
+
+{{jsxref("encodeURI")}}는 전달받은 문자열이 잘 형성된 문자열이 아니라면 오류를 발생시킵니다. 이는 `toWellFormed()`를 사용해서 잘 형성된 문자열로 변환함으로서 피할 수 있습니다.
+
+```js
+const illFormed = "https://example.com/search?q=\uD800";
+
+try {
+ encodeURI(illFormed);
+} catch (e) {
+ console.log(e); // URIError: URI malformed
+}
+
+console.log(encodeURI(illFormed.toWellFormed())); // "https://example.com/search?q=%EF%BF%BD"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `String.prototype.toWellFormed` in `core-js`](https://github.com/zloirock/core-js#well-formed-unicode-strings)
+- {{jsxref("String.prototype.isWellFormed()")}}
+- {{jsxref("String.prototype.normalize()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/replace/index.md b/files/ko/web/javascript/reference/global_objects/symbol/replace/index.md
new file mode 100644
index 00000000000000..0c369fc65f27cd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/symbol/replace/index.md
@@ -0,0 +1,56 @@
+---
+title: Symbol.replace
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+l10n:
+ sourceCommit: da480cf36e0b3f6fa7f3bb8aaa926bbbd045f6c5
+---
+
+{{JSRef}}
+
+**`Symbol.replace`** 정적 데이터 속성은 [잘 알려진 심볼](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol#well-known_symbols)인 `@@replace`를 나타냅니다. {{jsxref("String.prototype.replace()")}} 및 {{jsxref("String.prototype.replaceAll()")}} 메서드는 현재 객체와 일치하는 문자열 일부를 대체하는 첫 번째 인수에서 이 심볼을 찾습니다.
+
+자세한 내용은 [`RegExp.prototype[@@replace]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace), {{jsxref("String.prototype.replace()")}} 및 {{jsxref("String.prototype.replaceAll()")}}를 참고하시기 바랍니다.
+
+{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}
+
+## 값
+
+잘 알려진 심볼 `@@replace`.
+
+{{js_property_attributes(0, 0, 0)}}
+
+## 예제
+
+### Symbol.replace 사용하기
+
+```js
+class CustomReplacer {
+ constructor(value) {
+ this.value = value;
+ }
+ [Symbol.replace](string) {
+ return string.replace(this.value, "#!@?");
+ }
+}
+
+console.log("football".replace(new CustomReplacer("foo"))); // "#!@?tball"
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `Symbol.replace` in `core-js`](https://github.com/zloirock/core-js#ecmascript-symbol)
+- {{jsxref("Symbol.match")}}
+- {{jsxref("Symbol.matchAll")}}
+- {{jsxref("Symbol.search")}}
+- {{jsxref("Symbol.split")}}
+- {{jsxref("String.prototype.replace()")}}
+- {{jsxref("String.prototype.replaceAll()")}}
+- [`RegExp.prototype[@@replace]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace)
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md
new file mode 100644
index 00000000000000..291374b949c929
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/with/index.md
@@ -0,0 +1,63 @@
+---
+title: TypedArray.prototype.with()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/with
+l10n:
+ sourceCommit: a815a95e4ab4adf391d8a7bc66a3abbce1a686d8
+---
+
+{{JSRef}}
+
+{{jsxref("TypedArray")}} 인스턴스의 **`with()`** 메서드는 [대괄호 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation)을 사용하여 주어진 인덱스의 값을 변경하는 [복사](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#복사_메서드와_변경_메서드mutating_method) 버전입니다. 이 메서드는 주어진 인덱스의 요소가 주어진 값으로 대체된 새로운 형식화 배열을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.with()")}} 메서드와 같은 알고리즘을 가지고 있습니다.
+
+## 구문
+
+```js-nolint
+arrayInstance.with(index, value)
+```
+
+### 매개변수
+
+- `index`
+ - : 형식화 배열을 변경할 0 기반 인덱스이며 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)되는 값입니다.
+- `value`
+ - : 주어진 인덱스에 할당할 모든 값.
+
+### 반환 값
+
+`index`의 요소 값이 `value`로 대체된 새로운 형식화 배열.
+
+### 예외
+
+- {{jsxref("RangeError")}}
+ - : `index >= array.length` 혹은 `index < -array.length`일때 발생합니다.
+
+## 설명
+
+보다 상세한 설명은 {{jsxref("Array.prototype.with()")}}를 참고하시기 바랍니다. 이 메서드는 제네릭이 아니며 형식화 배열 인스턴스에서만 호출할 수 있습니다.
+
+## 예제
+
+### with() 사용하기
+
+```js
+const arr = new Uint8Array([1, 2, 3, 4, 5]);
+console.log(arr.with(2, 6)); // Uint8Array [1, 2, 6, 4, 5]
+console.log(arr); // Uint8Array [1, 2, 3, 4, 5]
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Polyfill of `TypedArray.prototype.with` in `core-js`](https://github.com/zloirock/core-js#change-array-by-copy)
+- [JavaScript 형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays) guide
+- {{jsxref("TypedArray.prototype.toReversed()")}}
+- {{jsxref("TypedArray.prototype.toSorted()")}}
+- {{jsxref("TypedArray.prototype.at()")}}
+- {{jsxref("Array.prototype.with()")}}
diff --git a/files/ko/web/mathml/index.md b/files/ko/web/mathml/index.md
index ccf9862a32eec2..838fb4d1273517 100644
--- a/files/ko/web/mathml/index.md
+++ b/files/ko/web/mathml/index.md
@@ -3,6 +3,8 @@ title: MathML
slug: Web/MathML
---
+{{MathMLRef}}
+
**MathML**(**Mathematical Markup Language**)은 수학 표기를 기술하고 그 구조와 내용을 모두 담고 있는 [XML](/ko/docs/XML) 마크 업 언어이다. 여기에는 이 강력한 기술을 사용하게 해주는 문서와 예제, 도구에 대한 링크를 제공하고 있다.
## MathML 레퍼런스
diff --git a/files/ko/web/media/autoplay_guide/index.md b/files/ko/web/media/autoplay_guide/index.md
index a4013dfa7c1192..00e93559e0a67c 100644
--- a/files/ko/web/media/autoplay_guide/index.md
+++ b/files/ko/web/media/autoplay_guide/index.md
@@ -3,6 +3,8 @@ title: 미디어 및 Web Audio API 자동 재생 가이드
slug: Web/Media/Autoplay_guide
---
+{{QuickLinksWithSubpages("/ko/docs/Web/Media")}}
+
페이지가 로드 되자마자 소리(또는 소리가 나는 영상)를 자동으로 재생하는 것은 사용자에게 별로 유쾌한 경험은 아닐겁니다. 미디어 자동 재생이 유용하려면 꼭 필요한 경우에 한하여 조심스럽게 쓰여야 합니다. 사용자가 이를 컨트롤 할 수 있게 여러 브라우저들은 미디어 자동 재생을 막는 기능을 제공하고 있습니다. I본 가이드 문서에서는 다양한 미디어와 Web audio API를 통한 자동 재생 기능에 대해 소개하고 자동 재생을 하는 법과 브라우저의 자동 재생 방지 기능에 깔끔하게 대처하는 법에 대해 알아봅니다.
{{HTMLElement("video")}} 엘리먼트에 오디어 트랙이 없거나 음소거인 경우에는 자동 재생 방지 기능에 영향받지 않습니다. 활성화된 오디오 트랙을 가진 미디어는 **audible**로 취급하고 자동 재생 방지 기능이 동작합니다. **Inaudible** 미디어는 그렇지 않습니다.
diff --git a/files/ko/web/media/formats/containers/index.md b/files/ko/web/media/formats/containers/index.md
index 720b9ce444516c..ead0ee1f36f198 100644
--- a/files/ko/web/media/formats/containers/index.md
+++ b/files/ko/web/media/formats/containers/index.md
@@ -3,6 +3,8 @@ title: 미디어 컨테이너 포맷 (파일 타입)
slug: Web/Media/Formats/Containers
---
+{{QuickLinksWithSubpages("/ko/docs/Web/Media")}}
+
오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. 이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.
[WebRTC](/ko/docs/Web/API/WebRTC_API) 는 컨테이너를 사용하지 않습니다. 대신에 각 트랙을 나타내는{{domxref("MediaStreamTrack")}} 객체를 통해 인코딩 된 오디오/비디오 트랙을 한 곳에서 다른 곳으로 직접 스트리밍합니다. WebRTC에서 일반적으로 사용하는 코덱이나 브라우저 호환성을 알아보려면 [Codecs used by WebRTC](/ko/docs/Web/Media/Formats/WebRTC_codecs) 문서를 참고하세요.
diff --git a/files/ko/web/media/formats/video_codecs/index.md b/files/ko/web/media/formats/video_codecs/index.md
index 0fcaf1533c4d4c..930909f7ebcff9 100644
--- a/files/ko/web/media/formats/video_codecs/index.md
+++ b/files/ko/web/media/formats/video_codecs/index.md
@@ -3,6 +3,8 @@ title: 웹 비디오 코덱 가이드
slug: Web/Media/Formats/Video_codecs
---
+{{QuickLinksWithSubpages("/ko/docs/Web/Media")}}
+
압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:
- HD(1920x1080) 풀 컬러(픽셀 당 4바이트) 비디오의 한 프레임은 8,294,400 입니다.
diff --git a/files/ko/web/performance/critical_rendering_path/index.md b/files/ko/web/performance/critical_rendering_path/index.md
index 6f7da6a8fb6ad1..bb88c4568382ea 100644
--- a/files/ko/web/performance/critical_rendering_path/index.md
+++ b/files/ko/web/performance/critical_rendering_path/index.md
@@ -3,6 +3,8 @@ title: 중요 렌더링 경로
slug: Web/Performance/Critical_rendering_path
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
중요 렌더링 경로 (_Critical Rendering Path_)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 [Document Object Model](/ko/docs/Web/API/Document_Object_Model) (DOM), [CSS Object Model](/ko/docs/Web/API/CSS_Object_Model) (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.
도큐먼트 오브젝트 모델은 HTML을 분석함으로써 만들어집니다. HTML은 Javascript를 요청할 수 있으며, 이 경우 DOM 이 변경될 수 있습니다. HTML은 차례대로 CSS 오브젝트 모델을 만들기 위한 스타일에 대한 요청을 만들거나 포함합니다. 브라우저 엔진은 이 두가지를 결합하여 렌더 트리를 생성하며 레이아웃은 페이지의 모든 것에 대한 크기와 위치를 결정합니다. 일단 레이아웃이 결정되면 화면에 픽셀을 그립니다.
diff --git a/files/ko/web/performance/how_browsers_work/index.md b/files/ko/web/performance/how_browsers_work/index.md
index 064c51f855ce79..8c649ef64053d4 100644
--- a/files/ko/web/performance/how_browsers_work/index.md
+++ b/files/ko/web/performance/how_browsers_work/index.md
@@ -3,6 +3,8 @@ title: "웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하
slug: Web/Performance/How_browsers_work
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해서 부단히 노력해야합니다.
실제 성능 및 체감되는 성능을 향상시키는 방법을 이해하기 위해서 브라우저가 어떻게 동작하는지 이해하는 것이 도움이 됩니다.
@@ -79,19 +81,19 @@ HTTPS를 이용한 보안성있는 연결을 위해서는 또 다른 "핸드셰
위 예제에서, 요청은 확실히 14kb보다 작습니다. 하지만 아래에서 설명하는 것처럼 구문 분석되는 중에 브라우저가 링크를 만날 때까지 링크가 걸린 자원들은 요청되지 않습니다.
-### TCP 슬로우 스타트 (TCP Slow Start) / 14kb rule
+### 혼잡 제어(Congestion control) / TCP 슬로우 스타트 (TCP Slow Start)
-첫 응답 패킷은 14kb입니다. 이는 네트워크 통신의 속도를 조절하는 알고리즘인 {{glossary('TCP Slow Start', 'TCP 슬로우 스타트')}}에 의해 정해진 것입니다. 슬로우 스타트는 네트워크의 최대 대역폭을 파악할 수 있을 때까지 점진적으로 데이터의 전송량을 증가시킵니다.
+TCP 패킷은 전송 중에 세그먼트로 분할됩니다. TCP는 패킷의 순서를 보장하기 때문에 서버는 일정 개수의 세그먼트를 전송한 후 클라이언트로부터 ACK 패킷 형태로 승인을 받아야 합니다.
-{{glossary('TCP Slow Start', 'TCP 슬로우 스타트')}} 방식에 따라, 첫 패킷을 받고난 이후에 서버는 다음 패킷의 사이즈를 두 배인 28kb로 늘립니다. 뒤 이은 패킷의 크기도 미리 정의한 임계치에 다다르거나, 혼잡의 징후가 나타나기 전까지 2배씩 커집니다.
+서버가 각 세그먼트마다 ACK을 기다린다면 클라이언트로부터 빈번한 ACK이 발생하고, 이는 저부하 네트워크 상황에서도 전송 시간을 증가시킬 수 있습니다.
-
+반면, 한 번에 너무 많은 세그먼트를 보내면 사용량이 많은 네트워크는 클라이언트가 세그먼트를 받을 수 없어 계속 ACK만 응답하게 되고, 서버는 세그먼트를 계속 재전송해야 하는 문제가 발생할 수 있습니다.
-첫 페이지의 로딩에 관련해서 14kb 법칙을 들어본적이 있나요? 초기 응답의 크기가 14kb인 이유는 TCP 슬로우 스타트 때문입니다. 그리고 웹 최적화를 할 때 초기 14kb 응답을 염두해야하는 것도 이 때문입니다. TCP 슬로우 스타트는 혼잡을 피하기 위해서 네트워크의 용량에 적당한 전송 속도를 찾고자 점진적으로 속도를 높여나갑니다.
+전송되는 세그먼트 수의 균형을 맞추기 위해 {{glossary('TCP Slow Start', 'TCP 슬로우 스타트')}} 알고리즘을 사용하여 최대 네트워크 대역폭이 결정될 때까지 전송되는 데이터의 양을 점차적으로 늘리고 네트워크 부하가 높은 경우 전송되는 데이터의 양을 줄입니다.
-### 혼잡 제어(Congestion control)
+전송할 세그먼트 수는 혼잡 윈도우(CWND)의 값에 의해 제어되며, 이는 1, 2, 4, 또는 10 MSS(MSS는 이더넷 프로토콜 상에서 1500 바이트)로 초기화될 수 있습니다. 이 값은 클라이언트가 ACK으로 보내야 하는 바이트 수입니다.
-서버가 TCP 패킷으로 데이터를 보내면서, 사용자의 클라이언트는 확인 응답(acknowledgements, ACKs)을 보내면서 데이터의 수신을 확인해줍니다. 연결은 하드웨어나 네트워크 상태에 따라서 제한된 용량만을 가지고 있습니다. 만약 서버가 패킷을 너무 빠르게 보내게 되면, 그 패킷들은 무시될 것입니다. 즉 확인 응답이 없을 것입니다. 서버는 이를 누락된 확인 응답으로 파악합니다. 혼잡 제어 알고리즘은 보내진 패킷의 흐름과 확인 응답을 바탕으로 전송 속도를 결정합니다.
+ACK이 수신되면 혼잡 윈도우(CWND)의 값이 두 배로 증가하여 서버는 다음에 더 많은 세그먼트를 보낼 수 있게 됩니다. 반대로 ACK이 수신되지 않으면 혼잡 윈도우(CWND)의 값이 반으로 줄어듭니다. 이러한 메커니즘은 너무 많은 세그먼트를 보내거나 너무 적게 보내는 것 사이의 균형을 맞추게 합니다.
## 구문 분석(Parsing)
diff --git a/files/ko/web/performance/index.md b/files/ko/web/performance/index.md
index d378e34497f55f..27648b68d7ba5a 100644
--- a/files/ko/web/performance/index.md
+++ b/files/ko/web/performance/index.md
@@ -3,6 +3,8 @@ title: 웹 성능
slug: Web/Performance
---
+{{QuickLinksWithSubPages}}
+
웹 성능은 객관적인 측정치이면서 로드 시간과 런타임을 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 사이트가 로드되는 데 걸리는 시간, 로드 후 상호작용에 반응할 수 있게 되기까지의 시간, 사용자와 콘텐츠의 상호작용이 얼마나 매끄러운지(스크롤이 부드러운지, 버튼은 클릭 가능한지, 빠르게 팝업이 로드되고 표시되는지, 애니메이션이 부드럽게 표시되는지)가 바로 웹 성능입니다. 웹 성능에는 객관적 측정치(로딩 시간, 초당 프레임 수, 상호작용에 반응할 수 있게 되기까지의 시간 등)와 주관적 경험(콘텐츠의 로딩 시간이 얼마나 길다고 느끼는지)이 모두 포함됩니다.
사이트 응답 시간이 길어질수록 이탈하는 사용자는 늘어납니다. 로딩 시간과 응답 시간을 최소화하고, 추가 기능을 활용해 대기 시간이 느껴지지 않게 하는 등 최대한 빠르게 웹사이트를 이용하고 상호작용할 수 있어야 합니다. 이와 동시에 최초 로드 시점 이후의 서비스를 비동기적으로 불러와놓는 것이 중요합니다.
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md
index c387c2a5079afc..6f7fbe526e0615 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md
@@ -3,7 +3,7 @@ title: 프로그레시브 웹 앱 구조
slug: Web/Progressive_web_apps/Tutorials/js13kGames/App_structure
---
-{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}
+{{PWASidebar}}{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}
이제 우리는 PWA의 원리에 대해 알고 있습니다. 실제 앱의 권장 구조에 대해 살펴봅시다. 우리는 [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) 어플리케이션을 왜 그렇게 구축하였는지, 그리고 무슨 이점이 있는지 분석하는 것으로 시작할 것입니다.
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/index.md
index 12b985d059360e..cae623cf48acd6 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/index.md
@@ -3,7 +3,7 @@ title: 프로그레시브 웹 앱 소개
slug: Web/Progressive_web_apps/Tutorials/js13kGames
---
-{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
+{{PWASidebar}}{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
index c514f35abb059d..8fe5cfe65f526b 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
@@ -3,7 +3,7 @@ title: PWA를 설치가능하게 만드는 방법
slug: Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
---
-{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}
+{{PWASidebar}}{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}
이전 문서에서는 [service worker](/ko/docs/Web/API/Service_Worker_API)의 도움으로 [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) 을 오프라인에서 동작하는 방법에 대해 알아보았습니다. 그런데 우리는 더 나아가 모바일 브라우저를 지원하는 웹 앱을 네이티브 앱처럼 설치할 수 있게 할수도 있습니다. 이 문서에서는 웹 manifest를 사용해 홈 화면에 추가라고 불리는 기능을 구현하는 방법에 대해 설명합니다.
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md
index 6f6af8c374d767..c12d49a3250d7f 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md
@@ -3,7 +3,7 @@ title: Service worker를 사용해 PWA를 오프라인에서 동작하게 만들
slug: Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers
---
-{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}
+{{PWASidebar}}{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}
우리는 js13kPWA의 구조와 기본적인 shell을 만들고 실행하는 것에 대해 살펴보았습니다. 이제 Service Worker를 사용해 오프라인 기능을 구현하는 방법에 대해 살펴봅시다. 이 문서에서는 [js13kPWA 예제](https://mdn.github.io/pwa-examples/js13kpwa/)([소스 코드도 있습니다](https://github.com/mdn/pwa-examples/tree/master/js13kpwa))에서 어떻게 사용되었는지와 오프라인 기능을 추가하는 방법을 살펴봅니다.
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
index c7da4e8f501a25..5845ab7beaa308 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
@@ -3,7 +3,7 @@ title: 알림과 푸시를 사용해 PWA를 재참여(re-engageable)가능하게
slug: Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push
---
-{{PreviousMenu("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}
+{{PWASidebar}}{{PreviousMenu("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}
앱을 오프라인에서 동작하도록 컨텐츠를 캐싱하는 능력은 훌륭한 기능입니다. 사용자가 홈 화면에 웹 앱을 설치하도록 허용하는 것은 더 좋습니다. 하지만, 사용자의 동작에 의존하는 대신 푸시 메시지와 알림을 사용해 새로운 컨텐츠가 있을때 이를 전달하여 사용자를 자동으로 다시 참여하도록 할 수 있습니다.
diff --git a/files/ko/web/security/securing_your_site/index.md b/files/ko/web/security/practical_implementation_guides/index.md
similarity index 98%
rename from files/ko/web/security/securing_your_site/index.md
rename to files/ko/web/security/practical_implementation_guides/index.md
index 0f2494da1fa605..d6f2c2c97d6c01 100644
--- a/files/ko/web/security/securing_your_site/index.md
+++ b/files/ko/web/security/practical_implementation_guides/index.md
@@ -1,6 +1,7 @@
---
title: 사이트 보안
-slug: Web/Security/Securing_your_site
+slug: Web/Security/Practical_implementation_guides
+original_slug: Web/Security/Securing_your_site
l10n:
sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787
---
diff --git a/files/ko/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/ko/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
similarity index 97%
rename from files/ko/web/security/securing_your_site/turning_off_form_autocompletion/index.md
rename to files/ko/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
index d4d57810407f1d..404fc026ea1006 100644
--- a/files/ko/web/security/securing_your_site/turning_off_form_autocompletion/index.md
+++ b/files/ko/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
@@ -1,6 +1,7 @@
---
title: 양식 자동 완성을 끄는 방법
-slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
+original_slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
l10n:
sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787
---
diff --git a/files/ko/web/security/same-origin_policy/index.md b/files/ko/web/security/same-origin_policy/index.md
index 6038eaf5d7df46..4364d7a442d328 100644
--- a/files/ko/web/security/same-origin_policy/index.md
+++ b/files/ko/web/security/same-origin_policy/index.md
@@ -18,12 +18,12 @@ l10n:
아래 표는 URL `http://store.company.com/dir/page.html`의 출처를 비교한 예시입니다.
| URL | 결과 | 이유 |
-| ------------------------------------------------- | --------- | ------------------------------------------- | --- |
+| ------------------------------------------------- | --------- | ------------------------------------------- |
| `http://store.company.com/dir2/other.html` | 동일 출처 | 경로만 다름 |
| `http://store.company.com/dir/inner/another.html` | 동일 출처 | 경로만 다름 |
| `https://store.company.com/page.html` | 실패 | 다른 프로토콜 |
| `http://store.company.com:81/dir/page.html` | 실패 | 다른 포트 (`http://` 는 기본적으로 80 포트) |
-| `http://news.company.com/dir/page.html` | 실패 | 다른 호스트 | |
+| `http://news.company.com/dir/page.html` | 실패 | 다른 호스트 |
### 출처 상속
diff --git a/files/ko/web/svg/attribute/accumulate/index.md b/files/ko/web/svg/attribute/accumulate/index.md
new file mode 100644
index 00000000000000..8409a4e54565fb
--- /dev/null
+++ b/files/ko/web/svg/attribute/accumulate/index.md
@@ -0,0 +1,54 @@
+---
+title: accumulate
+slug: Web/SVG/Attribute/accumulate
+l10n:
+ sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0
+---
+
+{{SVGRef}}
+
+**`accumulate`** 특성은 애니메이션이 누적되는지의 여부를 제어합니다.
+
+이전 결과에 따라 반복되는 애니메이션이 각 반복마다 값을 축적하는 것은 자주 유용하게 사용됩니다. 이 특성은 각 반복마다 이전 애니메이션의 값을 추가할지 말지 여부를 애니메이션에 지정합니다.
+
+이 특성은 다음 SVG 요소들과 함께 사용할 수 있습니다.
+
+- {{SVGElement("animate")}}
+- {{SVGElement("animateMotion")}}
+- {{SVGElement("animateTransform")}}
+
+## 사용 일람
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">Value</th>
+ <td><code>none</code> | <code>sum</code></td>
+ </tr>
+ <tr>
+ <th scope="row">Default value</th>
+ <td><code>none</code></td>
+ </tr>
+ <tr>
+ <th scope="row">Animatable</th>
+ <td>No</td>
+ </tr>
+ </tbody>
+</table>
+
+- `sum`
+ - : 각 반복이 첫번쨰 이후에는 이전에 반복된 값에 누적됨을 지정합니다.
+- `none`
+ - : 반복이 누적되지 않음을 지정합니다.
+
+이 특성은 만일 타겟 특성이 덧셈을 허용하지 않거나, 애니메이션 요소가 반복되지 않는 경우에는 무시됩니다.
+
+이 특성은 만일 애니메이션 함수가 {{SVGAttr("to")}} 특성에 지정되는 경우에는 무시됩니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 같이 보기
+
+- [SMIL 애니메이션 정의서](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute)
diff --git a/files/ko/web/svg/attribute/calcmode/index.md b/files/ko/web/svg/attribute/calcmode/index.md
index 524f8006c44a82..27f23c56674e56 100644
--- a/files/ko/web/svg/attribute/calcmode/index.md
+++ b/files/ko/web/svg/attribute/calcmode/index.md
@@ -3,6 +3,8 @@ title: calcMode
slug: Web/SVG/Attribute/calcMode
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
이 속성은 애니메이션의 interpolation 모드를 지정합니다. 기본 모드는 linear 이지만 속성이 linear interpolation을 지원하지 않으면(예: 문자열의 경우) calcMode 속성이 무시되고 discrete interpolation이 사용됩니다.
diff --git a/files/ko/web/svg/attribute/data-_star_/index.md b/files/ko/web/svg/attribute/data-_star_/index.md
new file mode 100644
index 00000000000000..57a9f0d14e7970
--- /dev/null
+++ b/files/ko/web/svg/attribute/data-_star_/index.md
@@ -0,0 +1,34 @@
+---
+title: data-*
+slug: Web/SVG/Attribute/data-*
+l10n:
+ sourceCommit: 335dda2e9a42f5e9257ee398437cd984f6cabb45
+---
+
+{{SVGRef}}
+
+**`data-*`** SVG 특성은 사용자 정의 데이터 특성이라고 불립니다. 이 특성은 스크립팅 목적으로 사용되며, 표준 특성으로는 공유할 수 없는 정보를 SVG 마크업과 그 결과로 출력된 DOM 공유할 수 있게 합니다. 사용자 정의 데이터는 특성이 속한 요소의 {{domxref("SVGElement")}} 인터페이스를 통해 가능하며 {{domxref("SVGElement.dataset")}} 속성을 통해 사용할 수 있습니다.
+
+`*` 는 [명명을 위한 XML 규칙들](https://www.w3.org/TR/REC-xml/#NT-Name) 에서 허용하는 어떠한 문자열로도 대체가 가능하지만, 아래와 같은 제한 사항들이 있습니다.
+
+- `xml` 로 시작할 수 없습니다.
+- 세미콜론 (`;`, `U+003A`) 이 허용되지 않습니다.
+- 대문자 `A` 부터 `Z` 는 사용하지 않습니다.
+
+> **참고:** {{domxref("SVGElement.dataset")}} 속성은 `SVGElement.dataset.testValue` 를 통해 `data-test-value` 특성을 제공하는 {{domxref("DOMStringMap")}} 속성입니다. 하이픈 문자 (`-`, `U+002D`) 는 제거되고 다음 문자는 대문자로 변환되며, {{Glossary("camel_case", "카멜 케이스")}} 형식이 됩니다.
+
+이 특성은 어느 SVG 요소에도 적용 가능합니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("SVGElement")}}
+- {{domxref("SVGElement.dataset")}} 속성은 스크립트에서 이러한 특성들로 접근할 때 사용됩니다.
+- [데이터 특성 사용하기](/ko/docs/Learn/HTML/Howto/Use_data_attributes)
diff --git a/files/ko/web/svg/attribute/shape-rendering/index.md b/files/ko/web/svg/attribute/shape-rendering/index.md
new file mode 100644
index 00000000000000..1fca1b31453e0b
--- /dev/null
+++ b/files/ko/web/svg/attribute/shape-rendering/index.md
@@ -0,0 +1,80 @@
+---
+title: shape-rendering
+slug: Web/SVG/Attribute/shape-rendering
+l10n:
+ sourceCommit: cd840e78b6027a391fe1f11b745564cf3ebfb8e7
+---
+
+{{SVGRef}}
+
+**`shape-rendering`** 특성은 경로, 원, 혹은 직사각형 모양을 렌더링할 때, 렌더러에게 어떤 절충안을 감수할지 힌트를 제공합니다.
+
+> **참고:** 프레젠테이션 특성에서는, `shape-rendering` 는 CSS 속성으로도 사용할 수 있습니다.
+
+다음 SVG 요소들을 사용하여 특성을 활용할 수 있습니다.
+
+- {{SVGElement("circle")}}
+- {{SVGElement("ellipse")}}
+- {{SVGElement("line")}}
+- {{SVGElement("path")}}
+- {{SVGElement("polygon")}}
+- {{SVGElement("polyline")}}
+- {{SVGElement("rect")}}
+
+## 예제
+
+```css hidden
+html,
+body,
+svg {
+ height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="100" cy="100" r="100" shape-rendering="geometricPrecision" />
+ <circle cx="320" cy="100" r="100" shape-rendering="crispEdges" />
+</svg>
+```
+
+{{EmbedLiveSample("Example", "420", "220")}}
+
+## 사용 일람
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">값</th>
+ <td>
+ <code>auto</code> | <code>optimizeSpeed</code> |
+ <code>crispEdges</code> | <code>geometricPrecision</code>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">기본 값</th>
+ <td><code>auto</code></td>
+ </tr>
+ <tr>
+ <th scope="row">애니메이션 기능</th>
+ <td>discrete</td>
+ </tr>
+ </tbody>
+</table>
+
+- `auto`
+ - : 이 값은 사용자 에이전트가 속도, 선명한 가장자리와 기하학적 정밀성의 균형을 맞출 수 있도록 합니다. 그러나 기하학적 정밀성은 속도나 선명한 가장자리보다 더 중요하게 취급되어야 합니다.
+- `optimizeSpeed`
+ - : 이 값은 사용자 에이전트가 기하학적 정밀성과 선명한 가장자리보다 속도 렌더링을 더 강조해야 함을 나타냅니다. 이 옵션은 사용자 에이전트로 하여금 종종 모양의 안티엘리어싱 (위신호 제거) 기능이 꺼지는 것을 야기시킬 수 있습니다.
+- `crispEdges`
+ - : 이 값은 사용자 에이전트가 렌더링 속도와 기하학적 정밀성보다 아트워크와 선명한 가장자리 사이의 대비를 강조하는 데에 사용됩니다. 선명한 가장자리를 얻기 위해서는, 사용자 에이전트는 모든 선과 곡선 혹은 수직이나 수평에 가까운 직선들에 대해 안티엘리어싱 (위신호 제거) 기능을 꺼야 합니다. 또한, 사용자 에이전트는 가장자리를 장치의 픽셀에 맞추기 위해 선의 위치와 선의 너비를 조정할 수 있습니다.
+- `geometricPrecision`
+ - : 이 값은 속도와 선명한 가장자리보다 기하학적 정밀성을 더 강조해야 함을 나타냅니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/svg/attribute/version/index.md b/files/ko/web/svg/attribute/version/index.md
index e72e92b4dfaf7c..f7ef436b08c0d1 100644
--- a/files/ko/web/svg/attribute/version/index.md
+++ b/files/ko/web/svg/attribute/version/index.md
@@ -3,6 +3,8 @@ title: version
slug: Web/SVG/Attribute/version
---
+{{SVGRef}}
+
**`version`** 속성은 해당 SVG 문서가 어떤 명세를 따르고 있는지 표시하기 위해 사용됩니다. 이는 오직 [\<svg>](/ko/docs/Web/SVG/Element/svg) 요소 내에서만 사용되며 순전히 사용되는 버전의 알림을 위한 용도로 프로세싱이나 렌더링에는 영향을 미치지 않습니다.
버전을 명시하기 위해 어떤 숫자든지 입력할 수 있지만, 현재로써 유효하게 사용되는 버전은 1.0과 1.1 두 버전만이 유일합니다.
diff --git a/files/ko/web/svg/attribute/viewbox/index.md b/files/ko/web/svg/attribute/viewbox/index.md
index ddbd9ac24c060d..a9fad7a1437733 100644
--- a/files/ko/web/svg/attribute/viewbox/index.md
+++ b/files/ko/web/svg/attribute/viewbox/index.md
@@ -3,6 +3,8 @@ title: viewBox
slug: Web/SVG/Attribute/viewBox
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
`viewBox` 속성은 특수한 container element 에 fit 하기 위한 주어진 graphics stretch 의 set 을 명시한다.
diff --git a/files/ko/web/svg/element/index.md b/files/ko/web/svg/element/index.md
index 82c60d38e30409..4deaa9a2c507b0 100644
--- a/files/ko/web/svg/element/index.md
+++ b/files/ko/web/svg/element/index.md
@@ -3,6 +3,8 @@ title: SVG element reference
slug: Web/SVG/Element
---
+{{SVGRef}}
+
« [SVG](/ko/docs/SVG) / [SVG Attribute reference](/ko/docs/SVG/Attribute) »
## SVG 엘리먼트들
diff --git a/files/ko/web/svg/tutorial/basic_shapes/index.md b/files/ko/web/svg/tutorial/basic_shapes/index.md
index 8a76e3aec4b735..75d84eab8dd97b 100644
--- a/files/ko/web/svg/tutorial/basic_shapes/index.md
+++ b/files/ko/web/svg/tutorial/basic_shapes/index.md
@@ -3,7 +3,7 @@ title: 기본 도형
slug: Web/SVG/Tutorial/Basic_Shapes
---
-{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.
diff --git a/files/ko/web/svg/tutorial/getting_started/index.md b/files/ko/web/svg/tutorial/getting_started/index.md
index 930f63d5a8f402..4ab482e5c7d267 100644
--- a/files/ko/web/svg/tutorial/getting_started/index.md
+++ b/files/ko/web/svg/tutorial/getting_started/index.md
@@ -3,7 +3,7 @@ title: 시작하기
slug: Web/SVG/Tutorial/Getting_Started
---
-{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}
### 간단한 예제
diff --git a/files/ko/web/svg/tutorial/index.md b/files/ko/web/svg/tutorial/index.md
index 97795f1eecde12..f3f54f812d9cff 100644
--- a/files/ko/web/svg/tutorial/index.md
+++ b/files/ko/web/svg/tutorial/index.md
@@ -3,6 +3,8 @@ title: SVG 튜토리얼
slug: Web/SVG/Tutorial
---
+{{SVGRef}}
+
확장 가능한 벡터 그래픽(Scalable Vector Graphics), [SVG](/ko/docs/Web/SVG)는 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)입니다. SVG는 Firefox, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.
본 튜토리얼의 목적은 SVG 내부 구조를 설명하는 데 있으며, 기술적인 세부 사항을 다룹니다. 만약 그저 아름다운 이미지를 그리려고 한다면, [Inkscape's documentation page](http://inkscape.org/doc/)에서 더 많은 유용한 소스들을 찾을 수 있습니다. SVG에 관한 또 다른 소개는 W3C의 [SVG Primer](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html)에서 제공됩니다.
diff --git a/files/ko/web/svg/tutorial/introduction/index.md b/files/ko/web/svg/tutorial/introduction/index.md
index 489d57964d01cd..01f09cf53a41e0 100644
--- a/files/ko/web/svg/tutorial/introduction/index.md
+++ b/files/ko/web/svg/tutorial/introduction/index.md
@@ -3,7 +3,7 @@ title: 소개
slug: Web/SVG/Tutorial/Introduction
---
-{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}
diff --git a/files/ko/web/svg/tutorial/paths/index.md b/files/ko/web/svg/tutorial/paths/index.md
index 9b83d0988c3fe4..e02b1f9b549e65 100644
--- a/files/ko/web/svg/tutorial/paths/index.md
+++ b/files/ko/web/svg/tutorial/paths/index.md
@@ -3,7 +3,7 @@ title: 패스
slug: Web/SVG/Tutorial/Paths
---
-{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
[`<path>`](/en-US/Web/SVG/Element/path) 엘리먼트는 SVG [기본 도형](/ko/docs/Web/SVG/Tutorial/Basic_Shapes) 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다.
@@ -236,6 +236,6 @@ A 명령어는 일단 x축, y축 반지름을 매개변수로 받는다. 혹시
원을 한 바퀴 도는 패스의 경우 시작점과 끝점이 같으므로 선택할 수 있는 원이 무한히 있으며, 그러므로 실제 패스가 정의되지 않는다. 이때는 시작점과 끝점을 살짝 비뚤어지게 배치하고 이 둘을 다른 패스 선으로 마저 이음으로써 비슷하게 만들 수 있지만, 이때는 실제 원이나 타원 노드를 쓰는 것이 쉬울 때가 많다.
-[캔버스](/ko/docs/Web/HTML/Canvas)에서 SVG로 넘어오는 사람에게는 호가 가장 배우기 어려울 수도 있지만, 그런 만큼 강력하기도 하다. 다음 반응형 예제를 보면 SVG 호의 개념을 이해하는 데 도움이 될 것이다. <http://codepen.io/lingtalfi/pen/yaLWJG> (크롬과 Firefox로만 테스트했으므로 일부 브라우저에서 동작하지 않을 수 있음)
+[캔버스](/ko/docs/Web/HTML/Canvas)에서 SVG로 넘어오는 사람에게는 호가 가장 배우기 어려울 수도 있지만, 그런 만큼 강력하기도 하다. 다음 반응형 예제를 보면 SVG 호의 개념을 이해하는 데 도움이 될 것이다. <https://codepen.io/lingtalfi/pen/yaLWJG> (크롬과 Firefox로만 테스트했으므로 일부 브라우저에서 동작하지 않을 수 있음)
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
diff --git a/files/ko/web/svg/tutorial/patterns/index.md b/files/ko/web/svg/tutorial/patterns/index.md
index 787254c927c9ff..b3d48bbe8795a5 100644
--- a/files/ko/web/svg/tutorial/patterns/index.md
+++ b/files/ko/web/svg/tutorial/patterns/index.md
@@ -3,7 +3,7 @@ title: 패턴
slug: Web/SVG/Tutorial/Patterns
---
-{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}
## 패턴
diff --git a/files/ko/web/svg/tutorial/positions/index.md b/files/ko/web/svg/tutorial/positions/index.md
index 7ff5225053bf21..f5370d75694f3d 100644
--- a/files/ko/web/svg/tutorial/positions/index.md
+++ b/files/ko/web/svg/tutorial/positions/index.md
@@ -3,7 +3,7 @@ title: 위치
slug: Web/SVG/Tutorial/Positions
---
-{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}
## 그리드
diff --git a/files/ko/web/svg/tutorial/svg_image_tag/index.md b/files/ko/web/svg/tutorial/svg_image_tag/index.md
index 8026910fa8a433..a4ace2d4763aa1 100644
--- a/files/ko/web/svg/tutorial/svg_image_tag/index.md
+++ b/files/ko/web/svg/tutorial/svg_image_tag/index.md
@@ -3,7 +3,7 @@ title: SVG 이미지 요소
slug: Web/SVG/Tutorial/SVG_Image_Tag
---
-{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}
SVG {{ SVGElement("image") }} 요소는 비트맵 이미지를 SVG 객체와 함께 표시할 수 있도록 해 준다.
diff --git a/files/ko/web/svg/tutorial/svg_in_html_introduction/index.md b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.md
index 875f64a8106855..83de433793f6f4 100644
--- a/files/ko/web/svg/tutorial/svg_in_html_introduction/index.md
+++ b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.md
@@ -3,6 +3,8 @@ title: SVG In HTML Introduction
slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
---
+{{SVGRef}}
+
### 개요
이 문서와 관련된 예제는 form의 배경 그림을 제공하기 위해서 inline [SVG](/ko/SVG)를 어떻게 사용하는지를 보여줍니다. 정규 XHTML을 작성하는 것과 같은 방식으로 그 그림들을 조작하기 위해 [JavaScript](/ko/JavaScript)와 [CSS](/ko/CSS)의 사용법도 설명합니다. 예제들은 XHTML(HTML이 아님)과 SVG integration을 지원하는 웹브라우져에서만 동작함을 유의하시기 바랍니다.
diff --git a/files/ko/web/xml/parsing_and_serializing_xml/index.md b/files/ko/web/xml/parsing_and_serializing_xml/index.md
index 3ab1bc77e9b288..a26828c7f43b1d 100644
--- a/files/ko/web/xml/parsing_and_serializing_xml/index.md
+++ b/files/ko/web/xml/parsing_and_serializing_xml/index.md
@@ -3,6 +3,8 @@ title: XML 파싱 및 직렬화
slug: Web/XML/Parsing_and_serializing_XML
---
+{{QuickLinksWithSubpages("/ko/docs/Web/XML")}}
+
웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.
- **DOM 트리를 문자열로 직렬화**하는 [XMLSerializer](/en/XMLSerializer)
diff --git a/files/ko/web/xpath/axes/index.md b/files/ko/web/xpath/axes/index.md
index 9ce46c5fceffa2..f81eb416137faa 100644
--- a/files/ko/web/xpath/axes/index.md
+++ b/files/ko/web/xpath/axes/index.md
@@ -3,6 +3,8 @@ title: Axes
slug: Web/XPath/Axes
---
+{{XsltSidebar}}
+
{{ XsltRef() }} [XPath](/ko/XPath) 명세에는 축이 13가지가 있습니다. 축은 문맥 노드와의 관계를 나타내고 트리 위에 문맥 노드에 대응하여 노드를 위치시킬 때 씁니다. 다음은 이용가능한 축 13가지와 [Gecko](/ko/Gecko)에서 가능한 지원 정도에 대한 매우 짧은 설명입니다.
XPath 식 사용에 관한 추가 정보는, [Transforming XML with XSLT](/ko/Transforming_XML_with_XSLT) 문서 끝 [For Further Reading](/ko/Transforming_XML_with_XSLT/For_Further_Reading) 절을 보세요.
diff --git a/files/ko/web/xpath/functions/boolean/index.md b/files/ko/web/xpath/functions/boolean/index.md
index 202fd965dac19a..7d6a993be2c138 100644
--- a/files/ko/web/xpath/functions/boolean/index.md
+++ b/files/ko/web/xpath/functions/boolean/index.md
@@ -3,7 +3,7 @@ title: boolean
slug: Web/XPath/Functions/boolean
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`boolean` 함수는 식을 평가하고 참이나 거짓을 반환합니다.
diff --git a/files/ko/web/xpath/functions/ceiling/index.md b/files/ko/web/xpath/functions/ceiling/index.md
index 4d7c817ac38071..51c52f579e6291 100644
--- a/files/ko/web/xpath/functions/ceiling/index.md
+++ b/files/ko/web/xpath/functions/ceiling/index.md
@@ -3,7 +3,7 @@ title: ceiling
slug: Web/XPath/Functions/ceiling
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`ceiling` 함수는 10진수를 평가하고 10진수보다 작지 않은 가장 작은 정수를 반환합니다.
diff --git a/files/ko/web/xpath/functions/concat/index.md b/files/ko/web/xpath/functions/concat/index.md
index 118de732d79497..b0d4845e924a8b 100644
--- a/files/ko/web/xpath/functions/concat/index.md
+++ b/files/ko/web/xpath/functions/concat/index.md
@@ -3,7 +3,7 @@ title: concat
slug: Web/XPath/Functions/concat
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`concat` 함수는 둘 또는 둘 이상의 문자열을 연결하고 연결한 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/contains/index.md b/files/ko/web/xpath/functions/contains/index.md
index 137b4d5ec6f6f0..280916a7a62324 100644
--- a/files/ko/web/xpath/functions/contains/index.md
+++ b/files/ko/web/xpath/functions/contains/index.md
@@ -3,7 +3,7 @@ title: contains
slug: Web/XPath/Functions/contains
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`contains` 함수는 첫 번째 인수 문자열이 두 번째 인수 문자열을 포함하는지 결정하고 부울값 true 또는 false를 반환합니다.
diff --git a/files/ko/web/xpath/functions/count/index.md b/files/ko/web/xpath/functions/count/index.md
index e5bc8b12edc88e..af3f7259b51812 100644
--- a/files/ko/web/xpath/functions/count/index.md
+++ b/files/ko/web/xpath/functions/count/index.md
@@ -3,7 +3,7 @@ title: count
slug: Web/XPath/Functions/count
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`count` 함수는 노드 집합의 노드 수를 세고 나서 정수로 반환합니다.
diff --git a/files/ko/web/xpath/functions/document/index.md b/files/ko/web/xpath/functions/document/index.md
index 1cb2a12c60a8f5..1e9e033a02694f 100644
--- a/files/ko/web/xpath/functions/document/index.md
+++ b/files/ko/web/xpath/functions/document/index.md
@@ -3,7 +3,7 @@ title: document
slug: Web/XPath/Functions/document
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`document` 함수는 하나 또는 여러 외부 문서에서 노드 집합을 찾고 결과 노드 집합을 반환합니다.
diff --git a/files/ko/web/xpath/functions/element-available/index.md b/files/ko/web/xpath/functions/element-available/index.md
index 7cd37bed3b59e1..792f53602cf2a3 100644
--- a/files/ko/web/xpath/functions/element-available/index.md
+++ b/files/ko/web/xpath/functions/element-available/index.md
@@ -3,7 +3,7 @@ title: element-available
slug: Web/XPath/Functions/element-available
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`element-available` 함수는 요소가 이용 가능한 지를 결정하고 true나 false를 반환합니다.
diff --git a/files/ko/web/xpath/functions/false/index.md b/files/ko/web/xpath/functions/false/index.md
index 88a32c9317652e..9e0e8a8cdb475b 100644
--- a/files/ko/web/xpath/functions/false/index.md
+++ b/files/ko/web/xpath/functions/false/index.md
@@ -3,7 +3,7 @@ title: "false"
slug: Web/XPath/Functions/false
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`false` 함수는 boolean false를 반환합니다.
diff --git a/files/ko/web/xpath/functions/floor/index.md b/files/ko/web/xpath/functions/floor/index.md
index 62f8f491dd0301..cb5e134226f815 100644
--- a/files/ko/web/xpath/functions/floor/index.md
+++ b/files/ko/web/xpath/functions/floor/index.md
@@ -3,7 +3,7 @@ title: floor
slug: Web/XPath/Functions/floor
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`floor` 함수는 10진수를 평가하고 10진수보다 크지 않는(작거나 같은) 가장 큰 정수를 반환합니다.
diff --git a/files/ko/web/xpath/functions/format-number/index.md b/files/ko/web/xpath/functions/format-number/index.md
index 61f14069b9ec26..4c06e1b21e53b0 100644
--- a/files/ko/web/xpath/functions/format-number/index.md
+++ b/files/ko/web/xpath/functions/format-number/index.md
@@ -3,7 +3,7 @@ title: format-number
slug: Web/XPath/Functions/format-number
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`format-number` 함수는 수를 평가하고 제공한 형식으로 그 수를 나타내는 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/function-available/index.md b/files/ko/web/xpath/functions/function-available/index.md
index 4dfd33a4646632..3d0f3e831cf17f 100644
--- a/files/ko/web/xpath/functions/function-available/index.md
+++ b/files/ko/web/xpath/functions/function-available/index.md
@@ -3,7 +3,7 @@ title: function-available
slug: Web/XPath/Functions/function-available
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`function-available` 함수는 인수로 준 함수가 이용 가능한 지를 결정하고 boolean true나 false를 반환합니다.
diff --git a/files/ko/web/xpath/functions/generate-id/index.md b/files/ko/web/xpath/functions/generate-id/index.md
index fb5f4c4d17427e..4fcb1a09042e86 100644
--- a/files/ko/web/xpath/functions/generate-id/index.md
+++ b/files/ko/web/xpath/functions/generate-id/index.md
@@ -3,7 +3,7 @@ title: generate-id
slug: Web/XPath/Functions/generate-id
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`generate-id` 함수는 제공한 노드 집합의 첫 노드를 위한 유일한 id를 만들고 그 id를 포함하는 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/id/index.md b/files/ko/web/xpath/functions/id/index.md
index 241edec5e7e411..0fd6c338703019 100644
--- a/files/ko/web/xpath/functions/id/index.md
+++ b/files/ko/web/xpath/functions/id/index.md
@@ -3,7 +3,7 @@ title: id
slug: Web/XPath/Functions/id
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`id` 함수는 인수로 준 id와 일치하는 노드를 찾아 그 식별된 노드를 포함하는 노드 집합을 반환합니다.
diff --git a/files/ko/web/xpath/functions/index.md b/files/ko/web/xpath/functions/index.md
index 487bf4fce0d1cd..4cfff452150171 100644
--- a/files/ko/web/xpath/functions/index.md
+++ b/files/ko/web/xpath/functions/index.md
@@ -3,6 +3,8 @@ title: Functions
slug: Web/XPath/Functions
---
+{{XsltSidebar}}
+
{{ XsltRef() }} 다음은 설명, 문법, 인수 목록, 결과형, 해당 W3C 권고안 소스, 현 [Gecko](/ko/Gecko) 지원 정도를 포함하는 기본 [XPath](/ko/XPath) 함수와 XPath에 더해진 [XSLT](/ko/XSLT) 고유의 추가분에 주석을 단 목록입니다. XPath/XSLT 함수 사용에 관한 추가 정보는, [For Further Reading](/ko/Transforming_XML_with_XSLT/For_Further_Reading) 페이지를 봐 주세요.
- [boolean()](Functions/boolean)
diff --git a/files/ko/web/xpath/functions/key/index.md b/files/ko/web/xpath/functions/key/index.md
index 5abfd13d1bbb9e..3352d27390eaa1 100644
--- a/files/ko/web/xpath/functions/key/index.md
+++ b/files/ko/web/xpath/functions/key/index.md
@@ -3,7 +3,7 @@ title: key
slug: Web/XPath/Functions/key
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`key` 함수는 인수로 준 키와 값을 갖는 노드 집합을 반환합니다.
diff --git a/files/ko/web/xpath/functions/lang/index.md b/files/ko/web/xpath/functions/lang/index.md
index 6c0b479b4ef05f..3496fd212c0afd 100644
--- a/files/ko/web/xpath/functions/lang/index.md
+++ b/files/ko/web/xpath/functions/lang/index.md
@@ -3,7 +3,7 @@ title: lang
slug: Web/XPath/Functions/lang
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`lang` 함수는 문맥 노드가 인수로 준 언어와 일치하는 지를 결정하고 true나 false를 반환합니다.
diff --git a/files/ko/web/xpath/functions/last/index.md b/files/ko/web/xpath/functions/last/index.md
index 3b6b81e6ed0146..c398fdf9ccb6b2 100644
--- a/files/ko/web/xpath/functions/last/index.md
+++ b/files/ko/web/xpath/functions/last/index.md
@@ -3,7 +3,7 @@ title: last
slug: Web/XPath/Functions/last
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`last` 함수는 식 평가 문맥(expression evaluation context)과 크기가 같은 숫자를 반환합니다.
diff --git a/files/ko/web/xpath/functions/local-name/index.md b/files/ko/web/xpath/functions/local-name/index.md
index 725c21729e34f5..bafdbf0ef5a322 100644
--- a/files/ko/web/xpath/functions/local-name/index.md
+++ b/files/ko/web/xpath/functions/local-name/index.md
@@ -3,7 +3,7 @@ title: local-name
slug: Web/XPath/Functions/local-name
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`local-name` 함수는 인수로 준 노드 집합 안 첫 노드의 지역 이름을 나타내는 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/name/index.md b/files/ko/web/xpath/functions/name/index.md
index caccf9bd883afa..41e4cf8480f06a 100644
--- a/files/ko/web/xpath/functions/name/index.md
+++ b/files/ko/web/xpath/functions/name/index.md
@@ -3,7 +3,7 @@ title: name
slug: Web/XPath/Functions/name
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`name` 함수는 인수로 준 노드 집합 안 첫 노드의 QName을 나타내는 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/namespace-uri/index.md b/files/ko/web/xpath/functions/namespace-uri/index.md
index 1421f610c4ea2d..fc26001cd668df 100644
--- a/files/ko/web/xpath/functions/namespace-uri/index.md
+++ b/files/ko/web/xpath/functions/namespace-uri/index.md
@@ -3,7 +3,7 @@ title: namespace-uri
slug: Web/XPath/Functions/namespace-uri
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`namespace-uri` 함수는 인수로 준 노드 집합 안 첫 노드의 이름공간 URI를 나타내는 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/normalize-space/index.md b/files/ko/web/xpath/functions/normalize-space/index.md
index eef3a7476e209f..3ac6b5b34e394f 100644
--- a/files/ko/web/xpath/functions/normalize-space/index.md
+++ b/files/ko/web/xpath/functions/normalize-space/index.md
@@ -3,7 +3,7 @@ title: normalize-space
slug: Web/XPath/Functions/normalize-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`normalize-space` 함수는 문자열에서 앞뒤 공백을 빼고(strip) 결과 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/not/index.md b/files/ko/web/xpath/functions/not/index.md
index 988424dba471b6..88a63ea9912292 100644
--- a/files/ko/web/xpath/functions/not/index.md
+++ b/files/ko/web/xpath/functions/not/index.md
@@ -3,7 +3,7 @@ title: not
slug: Web/XPath/Functions/not
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`not` 함수는 불린식을 평가하고 반대값을 반환합니다.
diff --git a/files/ko/web/xpath/functions/number/index.md b/files/ko/web/xpath/functions/number/index.md
index b48d04b3b09f0c..f0e93c6726c112 100644
--- a/files/ko/web/xpath/functions/number/index.md
+++ b/files/ko/web/xpath/functions/number/index.md
@@ -3,7 +3,7 @@ title: number
slug: Web/XPath/Functions/number
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`number` 함수는 개체를 숫자로 변환하고 그 숫자를 반환합니다.
diff --git a/files/ko/web/xpath/functions/position/index.md b/files/ko/web/xpath/functions/position/index.md
index a28f615258ac51..576dcda5bb0ef0 100644
--- a/files/ko/web/xpath/functions/position/index.md
+++ b/files/ko/web/xpath/functions/position/index.md
@@ -3,7 +3,7 @@ title: position
slug: Web/XPath/Functions/position
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`position` 함수는 식 평가 문맥(expression evaluation context)와 위치가 같은 숫자를 반환합니다.
diff --git a/files/ko/web/xpath/functions/round/index.md b/files/ko/web/xpath/functions/round/index.md
index effad78a328c52..ea9018c7b124b1 100644
--- a/files/ko/web/xpath/functions/round/index.md
+++ b/files/ko/web/xpath/functions/round/index.md
@@ -3,7 +3,7 @@ title: round
slug: Web/XPath/Functions/round
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`round` 함수는 인수로 준 수에 가장 가까운 정수를 반환합니다.
diff --git a/files/ko/web/xpath/functions/starts-with/index.md b/files/ko/web/xpath/functions/starts-with/index.md
index dbba28ff4dfd12..fa1569c361b35f 100644
--- a/files/ko/web/xpath/functions/starts-with/index.md
+++ b/files/ko/web/xpath/functions/starts-with/index.md
@@ -3,7 +3,7 @@ title: starts-with
slug: Web/XPath/Functions/starts-with
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`starts-with` 함수는 첫 번째 문자열이 두 번째 문자열로 시작하는 지를 확인한 뒤 true나 false를 반환합니다.
diff --git a/files/ko/web/xpath/functions/string-length/index.md b/files/ko/web/xpath/functions/string-length/index.md
index 369d657f474e32..b7f960f54216a8 100644
--- a/files/ko/web/xpath/functions/string-length/index.md
+++ b/files/ko/web/xpath/functions/string-length/index.md
@@ -3,7 +3,7 @@ title: string-length
slug: Web/XPath/Functions/string-length
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`string-length` 함수는 인수로 준 문자열의 문자수를 반환합니다.
diff --git a/files/ko/web/xpath/functions/string/index.md b/files/ko/web/xpath/functions/string/index.md
index 03fb8ad16efd9f..4ae28929bd2b95 100644
--- a/files/ko/web/xpath/functions/string/index.md
+++ b/files/ko/web/xpath/functions/string/index.md
@@ -3,7 +3,7 @@ title: string
slug: Web/XPath/Functions/string
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`string` 함수는 인수를 문자열로 변환합니다.
diff --git a/files/ko/web/xpath/functions/substring-after/index.md b/files/ko/web/xpath/functions/substring-after/index.md
index 200e4e35b306ec..0773ec4974ca87 100644
--- a/files/ko/web/xpath/functions/substring-after/index.md
+++ b/files/ko/web/xpath/functions/substring-after/index.md
@@ -3,7 +3,7 @@ title: substring-after
slug: Web/XPath/Functions/substring-after
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`substring-after` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 다음의 나머지를 반환합니다.
diff --git a/files/ko/web/xpath/functions/substring-before/index.md b/files/ko/web/xpath/functions/substring-before/index.md
index 89995ca76f1132..94f25f50388f69 100644
--- a/files/ko/web/xpath/functions/substring-before/index.md
+++ b/files/ko/web/xpath/functions/substring-before/index.md
@@ -3,7 +3,7 @@ title: substring-before
slug: Web/XPath/Functions/substring-before
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`substring-before` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 앞의 나머지를 반환합니다.
diff --git a/files/ko/web/xpath/functions/substring/index.md b/files/ko/web/xpath/functions/substring/index.md
index a59de86404f314..66a08352755b7e 100644
--- a/files/ko/web/xpath/functions/substring/index.md
+++ b/files/ko/web/xpath/functions/substring/index.md
@@ -3,7 +3,7 @@ title: substring
slug: Web/XPath/Functions/substring
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`substring` 함수는 인수로 준 문자열의 부분을 반환합니다.
diff --git a/files/ko/web/xpath/functions/sum/index.md b/files/ko/web/xpath/functions/sum/index.md
index 1934d41d9a2a6f..cf1208bb336353 100644
--- a/files/ko/web/xpath/functions/sum/index.md
+++ b/files/ko/web/xpath/functions/sum/index.md
@@ -3,7 +3,7 @@ title: sum
slug: Web/XPath/Functions/sum
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`sum` 함수는 인수로 준 노드 집합의 각 노드의 숫자값의 합을 반환합니다.
diff --git a/files/ko/web/xpath/functions/system-property/index.md b/files/ko/web/xpath/functions/system-property/index.md
index aa3e3608080302..5ee5af203c2ce1 100644
--- a/files/ko/web/xpath/functions/system-property/index.md
+++ b/files/ko/web/xpath/functions/system-property/index.md
@@ -3,7 +3,7 @@ title: system-property
slug: Web/XPath/Functions/system-property
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`system-property` 함수는 인수로 준 시스템 속성을 나타내는 개체를 반환합니다.
diff --git a/files/ko/web/xpath/functions/translate/index.md b/files/ko/web/xpath/functions/translate/index.md
index 7b4c1e40326e5c..04dd261890548f 100644
--- a/files/ko/web/xpath/functions/translate/index.md
+++ b/files/ko/web/xpath/functions/translate/index.md
@@ -3,7 +3,7 @@ title: translate
slug: Web/XPath/Functions/translate
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`translate` 함수는 문자열과 번역할 문자 집합을 평가하고 번역된 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/true/index.md b/files/ko/web/xpath/functions/true/index.md
index 33d1db5d33c608..1fd7ea84d16b57 100644
--- a/files/ko/web/xpath/functions/true/index.md
+++ b/files/ko/web/xpath/functions/true/index.md
@@ -3,7 +3,7 @@ title: "true"
slug: Web/XPath/Functions/true
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`true` 함수는 불린값 true를 반환합니다.
diff --git a/files/ko/web/xpath/functions/unparsed-entity-url/index.md b/files/ko/web/xpath/functions/unparsed-entity-url/index.md
index f789fb161fbad6..e09dc40ff0f87d 100644
--- a/files/ko/web/xpath/functions/unparsed-entity-url/index.md
+++ b/files/ko/web/xpath/functions/unparsed-entity-url/index.md
@@ -3,7 +3,7 @@ title: unparsed-entity-url
slug: Web/XPath/Functions/unparsed-entity-url
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`unparsed-entity-url()` 함수는 구문해석되지 않은 엔티티의 URI를 반환합니다. 이는 소스 문서의 DTD에서 참조하는 비 XML 데이터입니다.
diff --git a/files/ko/web/xslt/element/apply-imports/index.md b/files/ko/web/xslt/element/apply-imports/index.md
index eb425f0562226b..71be3b05a069ae 100644
--- a/files/ko/web/xslt/element/apply-imports/index.md
+++ b/files/ko/web/xslt/element/apply-imports/index.md
@@ -3,7 +3,7 @@ title: apply-imports
slug: Web/XSLT/Element/apply-imports
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:apply-imports>` 요소는 꽤 불가사의하고 보통은 복잡한 스타일시트에 쓰입니다. 가져오기(import) 우선순위는 가져온 스타일시트 안 템플릿 규칙보다 주 스타일시트의 안 템플릿 규칙이 더 높기를 요구합니다. 그러나, 때로는 처리기(processor)가 주 스타일시트 안 규칙보다 (우선순위가 낮은) 가져온 스타일시트의 템플릿 규칙을 쓰도록 강제할 수 있는 게 유용합니다.
diff --git a/files/ko/web/xslt/element/apply-templates/index.md b/files/ko/web/xslt/element/apply-templates/index.md
index 5a9a9a0409af67..0d6b5d503b2b18 100644
--- a/files/ko/web/xslt/element/apply-templates/index.md
+++ b/files/ko/web/xslt/element/apply-templates/index.md
@@ -3,7 +3,7 @@ title: apply-templates
slug: Web/XSLT/Element/apply-templates
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:apply-templates>` 요소는 입력 트리 안 노드 집합을 선택하고 그 집합에 알맞은 템플릿을 적용하도록 처리기에게 지시합니다.
diff --git a/files/ko/web/xslt/element/attribute-set/index.md b/files/ko/web/xslt/element/attribute-set/index.md
index a781915dab32c1..f0b940aebac356 100644
--- a/files/ko/web/xslt/element/attribute-set/index.md
+++ b/files/ko/web/xslt/element/attribute-set/index.md
@@ -3,7 +3,7 @@ title: attribute-set
slug: Web/XSLT/Element/attribute-set
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:attribute-set>` 요소는 CSS 안에 이름 붙인 스타일과 비슷한 방식으로 이름 붙인 속성 집합을 만듭니다. 그러면, 출력 문서에 전체로서 적용할 수 있습니다.
diff --git a/files/ko/web/xslt/element/attribute/index.md b/files/ko/web/xslt/element/attribute/index.md
index bf0768717abcd4..35018af95b3322 100644
--- a/files/ko/web/xslt/element/attribute/index.md
+++ b/files/ko/web/xslt/element/attribute/index.md
@@ -3,7 +3,7 @@ title: attribute
slug: Web/XSLT/Element/attribute
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:attribute>` 요소는 스타일시트에서 접근할 수 있는 어떤 값을 써서 출력 문서에 속성을 만듭니다. 요소는 속성값을 자리 잡게 하는 출력 문서 요소 안에 정의한 것 가운데 처음이어야 합니다.
diff --git a/files/ko/web/xslt/element/call-template/index.md b/files/ko/web/xslt/element/call-template/index.md
index ab1477f5fae637..7cebf9965756b0 100644
--- a/files/ko/web/xslt/element/call-template/index.md
+++ b/files/ko/web/xslt/element/call-template/index.md
@@ -3,7 +3,7 @@ title: call-template
slug: Web/XSLT/Element/call-template
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:call-template>` 요소는 이름 붙인 템플릿을 호출합니다.
diff --git a/files/ko/web/xslt/element/choose/index.md b/files/ko/web/xslt/element/choose/index.md
index 77def27978680a..15f5a1045f5c48 100644
--- a/files/ko/web/xslt/element/choose/index.md
+++ b/files/ko/web/xslt/element/choose/index.md
@@ -3,7 +3,7 @@ title: choose
slug: Web/XSLT/Element/choose
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:choose>` 요소는 많은 선택 가운데 하나를 정의합니다. 그리고 절차형 언어(procedural language)의 스위치 문처럼 동작합니다.
diff --git a/files/ko/web/xslt/element/comment/index.md b/files/ko/web/xslt/element/comment/index.md
index c33b700d7f695f..aed73dc9539d98 100644
--- a/files/ko/web/xslt/element/comment/index.md
+++ b/files/ko/web/xslt/element/comment/index.md
@@ -3,7 +3,7 @@ title: comment
slug: Web/XSLT/Element/comment
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:comment>` 요소는 출력 문서에 주석을 작성합니다. 오직 텍스트만 포함해야 합니다.
diff --git a/files/ko/web/xslt/element/copy-of/index.md b/files/ko/web/xslt/element/copy-of/index.md
index 048b50800e8cd3..1663ba0418f66c 100644
--- a/files/ko/web/xslt/element/copy-of/index.md
+++ b/files/ko/web/xslt/element/copy-of/index.md
@@ -3,7 +3,7 @@ title: copy-of
slug: Web/XSLT/Element/copy-of
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:copy-of>` 요소는 select 속성이 출력 문서에 무엇을 지정하든지 (자손 노드를 포함하여) 깊게 복사(deep copy)합니다.
diff --git a/files/ko/web/xslt/element/copy/index.md b/files/ko/web/xslt/element/copy/index.md
index 29a7a6ccca7b2f..cb6e18b3b8011d 100644
--- a/files/ko/web/xslt/element/copy/index.md
+++ b/files/ko/web/xslt/element/copy/index.md
@@ -3,7 +3,7 @@ title: copy
slug: Web/XSLT/Element/copy
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:copy>` 요소는 출력 문서에 현재 노드의 노드와 어떤 관련 이름공간 노드만을 얕게 복사(shallow copy) 전달합니다. 속성이나 자식은 복사하지 않습니다.
diff --git a/files/ko/web/xslt/element/decimal-format/index.md b/files/ko/web/xslt/element/decimal-format/index.md
index dee9e848713247..53b95f01197eac 100644
--- a/files/ko/web/xslt/element/decimal-format/index.md
+++ b/files/ko/web/xslt/element/decimal-format/index.md
@@ -3,7 +3,7 @@ title: decimal-format
slug: Web/XSLT/Element/decimal-format
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:decimal-format>` 요소는
`format-number( )`
diff --git a/files/ko/web/xslt/element/element/index.md b/files/ko/web/xslt/element/element/index.md
index 99c13a594b1df6..67bd1de30c6f6e 100644
--- a/files/ko/web/xslt/element/element/index.md
+++ b/files/ko/web/xslt/element/element/index.md
@@ -3,7 +3,7 @@ title: element
slug: Web/XSLT/Element/element
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:element>` 요소는 출력 문서에 요소를 만듭니다.
diff --git a/files/ko/web/xslt/element/fallback/index.md b/files/ko/web/xslt/element/fallback/index.md
index 46e260ead82e7a..5a28280cba050a 100644
--- a/files/ko/web/xslt/element/fallback/index.md
+++ b/files/ko/web/xslt/element/fallback/index.md
@@ -3,7 +3,7 @@ title: fallback
slug: Web/XSLT/Element/fallback
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:fallback>` 요소는 주어진 확장(이나 결국에는 새 버전) 요소에서 지원하지 않으면 쓸 템플릿을 지정합니다.
diff --git a/files/ko/web/xslt/element/for-each/index.md b/files/ko/web/xslt/element/for-each/index.md
index defaaa86ff1a4c..f37f6d36fbfd6e 100644
--- a/files/ko/web/xslt/element/for-each/index.md
+++ b/files/ko/web/xslt/element/for-each/index.md
@@ -3,7 +3,7 @@ title: for-each
slug: Web/XSLT/Element/for-each
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:for-each>` 요소는 노드 집합을 선택하고 같은 방식으로 각 노드를 처리합니다. 노드 집합을 되풀이하(iterate)거나 현재 노드를 바꾸는데 자주 씁니다. 하나 이상의 `<xsl:sort>` 요소가 이 요소의 자식으로 나타나면, 처리에 앞서 정렬을 합니다. 그렇지 않으면, 노드는 문서 순으로 처리합니다.
diff --git a/files/ko/web/xslt/element/if/index.md b/files/ko/web/xslt/element/if/index.md
index 1c815e1eb5ae6e..663f730fcffc0d 100644
--- a/files/ko/web/xslt/element/if/index.md
+++ b/files/ko/web/xslt/element/if/index.md
@@ -3,7 +3,7 @@ title: if
slug: Web/XSLT/Element/if
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:if>` 요소는 test 속성과 템플릿을 포함합니다. test 속성을 참으로 평가하면, 템플릿을 처리합니다. 이것은 다른 언어의 if 문과 비슷합니다. 그러나, `<tt>if-then-else</tt>` 문의 기능을 다하기 위해 `<xsl:when>`과 `<xsl:otherwise>` 자식이 하나씩 있는 `<xsl:choose>` 요소를 씁니다.
diff --git a/files/ko/web/xslt/element/import/index.md b/files/ko/web/xslt/element/import/index.md
index 889c81a190872a..d97139b261345c 100644
--- a/files/ko/web/xslt/element/import/index.md
+++ b/files/ko/web/xslt/element/import/index.md
@@ -3,7 +3,7 @@ title: import
slug: Web/XSLT/Element/import
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:import>` 요소는 한 스타일시트의 컨텐트를 다른 스타일시트로 가져오는 역할을 하는 최상위 요소입니다. 대체로, 가져올 스타일시트의 컨텐트는 가져오는 스타일시트의 컨텐트보다 가져오기 우선순위가 낮습니다. 이는 포함되는 스타일시트의 컨텐트가 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같은 `<xsl:include>`와는 뚜렷이 다릅니다.
diff --git a/files/ko/web/xslt/element/include/index.md b/files/ko/web/xslt/element/include/index.md
index 2eb139cecd7958..9134725236ccc7 100644
--- a/files/ko/web/xslt/element/include/index.md
+++ b/files/ko/web/xslt/element/include/index.md
@@ -3,7 +3,7 @@ title: include
slug: Web/XSLT/Element/include
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:include>` 요소는 한 스타일시트의 컨텐트를 다른 스타일시트에 합칩니다. `<xsl:import>`와는 달리, 포함되는 스타일시트의 컨텐트는 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같습니다.
diff --git a/files/ko/web/xslt/element/index.md b/files/ko/web/xslt/element/index.md
index ea4ba42d6569ec..c7a7f94ec43ede 100644
--- a/files/ko/web/xslt/element/index.md
+++ b/files/ko/web/xslt/element/index.md
@@ -3,6 +3,8 @@ title: Elements
slug: Web/XSLT/Element
---
+{{XsltSidebar}}
+
{{ XsltRef() }} 여기에서 다루는 요소의 두 타입은 최상위 요소와 명령(instruction)입니다. 최상위 요소는 `<xsl:stylesheet>`나 `<xsl:transform>`의 자식으로 나타나야 합니다. 이에 반해, 명령은 템플릿과 관련이 있습니다. 스타일시트는 여러 템플릿을 포함할지도 모릅니다. 여기서 다루지 않는 세 번째 타입의 요소는 LRE(literal result element)입니다. LRE 또한 템플릿에 나타납니다. LRE는 예를 들어, HTML 변환 스타일시트 안의 `<hr>` 요소처럼 결과 문서에 복사되는게 좋은 어떤 비명령 요소로 이루어져 있습니다.
관련 기록에 따르면, LRE의 어떤 속성과 한정된 수의 XSLT 요소의 속성도 속성값 템플릿으로 알려진 것을 또한 포함할 수 있습니다. 속성값 템플릿은 단순히 속성값 지정에 쓰이는 임베드된 XPath 식을 포함하는 문자열입니다. 실행할 때 식을 평가하고 평가 결과는 XPath 식으로 바꾸어 놓습니다. 예를 들어, "`image-dir`" 변수를 다음처럼 정의했다고 하면,
diff --git a/files/ko/web/xslt/element/key/index.md b/files/ko/web/xslt/element/key/index.md
index 71f8e899708f4a..afb159dae2ba83 100644
--- a/files/ko/web/xslt/element/key/index.md
+++ b/files/ko/web/xslt/element/key/index.md
@@ -3,7 +3,7 @@ title: key
slug: Web/XSLT/Element/key
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:key>` 요소는 `key( )` 함수가 있는 스타일시트 어디서나 쓸 수 있는 이름 붙은 키를 선언합니다.
diff --git a/files/ko/web/xslt/element/message/index.md b/files/ko/web/xslt/element/message/index.md
index 4b2cf5e604e03a..8ea09d99e33577 100644
--- a/files/ko/web/xslt/element/message/index.md
+++ b/files/ko/web/xslt/element/message/index.md
@@ -3,7 +3,7 @@ title: message
slug: Web/XSLT/Element/message
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:message>` 요소는 (NS에서 JavaScript 콘솔에) 메시지를 출력하고 선택에 따라 스타일시트 실행을 끝냅니다. 디버깅에 유용할 수 있습니다.
diff --git a/files/ko/web/xslt/element/namespace-alias/index.md b/files/ko/web/xslt/element/namespace-alias/index.md
index 88a933df03c652..275cad5a669b48 100644
--- a/files/ko/web/xslt/element/namespace-alias/index.md
+++ b/files/ko/web/xslt/element/namespace-alias/index.md
@@ -3,7 +3,7 @@ title: namespace-alias
slug: Web/XSLT/Element/namespace-alias
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:namespace-alias>` 요소는 스타일시트 이름공간을 출력 트리의 다른 이름공간으로 매기는(map) 데 드물게 쓰는 방안(device)입니다. 이 요소의 가장 평범한 쓰임은 다른 스타일시트로부터 스타일시트를 만드는 것입니다. 보통 `xsl:`가 접두사로 붙은 (결과 트리에 단순히 복사해도 좋을) LRE(literal result element)를 처리기가 오해하는 것을 막기 위해, 결과 트리의 XSLT 이름공간에 적당하게 도로 다시 바꿀 임시 이름공간을 할당합니다.
diff --git a/files/ko/web/xslt/element/number/index.md b/files/ko/web/xslt/element/number/index.md
index b4bd4cc1f471e6..2d2cb2195641a1 100644
--- a/files/ko/web/xslt/element/number/index.md
+++ b/files/ko/web/xslt/element/number/index.md
@@ -3,7 +3,7 @@ title: number
slug: Web/XSLT/Element/number
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:number>` 요소는 숫자를 연속으로 셉니다. 또한 숫자를 빠르게 구성하는(format) 데도 쓸 수 있습니다.
diff --git a/files/ko/web/xslt/element/otherwise/index.md b/files/ko/web/xslt/element/otherwise/index.md
index 16023c59fe2c97..254e159076eb53 100644
--- a/files/ko/web/xslt/element/otherwise/index.md
+++ b/files/ko/web/xslt/element/otherwise/index.md
@@ -3,7 +3,7 @@ title: otherwise
slug: Web/XSLT/Element/otherwise
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:otherwise>` 요소는 아무런 `<xsl:when>` 조건도 적용하지 않았을 때 취하면 좋을 동작을 정의하는 데 씁니다. 다른 프로그래밍 언어의 `else`나 `default` 경우와 비슷합니다.
diff --git a/files/ko/web/xslt/element/output/index.md b/files/ko/web/xslt/element/output/index.md
index 35c557832ce4ab..8953dda8c4a0f1 100644
--- a/files/ko/web/xslt/element/output/index.md
+++ b/files/ko/web/xslt/element/output/index.md
@@ -3,7 +3,7 @@ title: output
slug: Web/XSLT/Element/output
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:output>` 요소는 출력 문서의 특성을 조절합니다. method 속성이 있는 이 요소가 Netscape에서 정확하게 기능하도록 쓸 수 있어야 합니다. 7.0 현재, `method="text"`는 기대한 대로 동작합니다.
diff --git a/files/ko/web/xslt/element/param/index.md b/files/ko/web/xslt/element/param/index.md
index 144aa3b26c508d..006dcb5872fd72 100644
--- a/files/ko/web/xslt/element/param/index.md
+++ b/files/ko/web/xslt/element/param/index.md
@@ -3,7 +3,7 @@ title: param
slug: Web/XSLT/Element/param
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:param>` 요소는 이름과 선택에 따라 기본값으로 매개변수를 설정합니다. 최상위 요소로 쓸 때, 매개변수는 전역입니다. `<xsl:template>` 요소 안에서 쓰면, 매개변수는 그 템플릿에 대해 지역입니다. 이 경우에 요소는 템플릿의 첫 자식 요소여야 합니다.
diff --git a/files/ko/web/xslt/element/preserve-space/index.md b/files/ko/web/xslt/element/preserve-space/index.md
index b3744f9302ae76..353e4f76487238 100644
--- a/files/ko/web/xslt/element/preserve-space/index.md
+++ b/files/ko/web/xslt/element/preserve-space/index.md
@@ -3,7 +3,7 @@ title: preserve-space
slug: Web/XSLT/Element/preserve-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:preserve-space>` 요소는 공백을 보존하면 좋을 소스 문서의 요소를 정의합니다. 하나 이상의 요소가 있으면, 공백 문자로 이름을 구분하세요. 공백 보존하기가 기본 설정이므로 이 요소는 오직 `<xsl:strip-space>` 요소와 거꾸로 동작하기 위해 쓸 필요가 있습니다.
diff --git a/files/ko/web/xslt/element/processing-instruction/index.md b/files/ko/web/xslt/element/processing-instruction/index.md
index 523aa9f4f4a36b..ef56ddec06927b 100644
--- a/files/ko/web/xslt/element/processing-instruction/index.md
+++ b/files/ko/web/xslt/element/processing-instruction/index.md
@@ -3,7 +3,7 @@ title: processing-instruction
slug: Web/XSLT/Element/processing-instruction
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:processing-instruction>` 요소는 출력 문서에 처리 명령을 씁니다.
diff --git a/files/ko/web/xslt/element/sort/index.md b/files/ko/web/xslt/element/sort/index.md
index 58e25e8de6a108..53bfab4aa2a01e 100644
--- a/files/ko/web/xslt/element/sort/index.md
+++ b/files/ko/web/xslt/element/sort/index.md
@@ -3,7 +3,7 @@ title: sort
slug: Web/XSLT/Element/sort
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:sort>` 요소는 `<xsl:apply-templates>`나 `<xsl:for-each>`가 선택한 노드에 정렬키를 정의하고 노드를 처리할 순서를 결정합니다.
diff --git a/files/ko/web/xslt/element/strip-space/index.md b/files/ko/web/xslt/element/strip-space/index.md
index 0750453769dcd2..f0f38f6f773ac6 100644
--- a/files/ko/web/xslt/element/strip-space/index.md
+++ b/files/ko/web/xslt/element/strip-space/index.md
@@ -3,7 +3,7 @@ title: strip-space
slug: Web/XSLT/Element/strip-space
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:strip-space>` 요소는 공백을 지웠으면 하는 소스 문서의 요소를 정의합니다.
diff --git a/files/ko/web/xslt/element/stylesheet/index.md b/files/ko/web/xslt/element/stylesheet/index.md
index 6c143e7b1fa34a..e9c56dd6e6d4c0 100644
--- a/files/ko/web/xslt/element/stylesheet/index.md
+++ b/files/ko/web/xslt/element/stylesheet/index.md
@@ -3,7 +3,7 @@ title: stylesheet
slug: Web/XSLT/Element/stylesheet
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:stylesheet>`(나 동등한 `<xsl:transform>`) 요소는 스타일시트의 최외곽 요소입니다.
diff --git a/files/ko/web/xslt/element/template/index.md b/files/ko/web/xslt/element/template/index.md
index 9fc98d7854047c..6755e3e77e37fd 100644
--- a/files/ko/web/xslt/element/template/index.md
+++ b/files/ko/web/xslt/element/template/index.md
@@ -3,7 +3,7 @@ title: template
slug: Web/XSLT/Element/template
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:template>` 요소는 출력 생성 템플릿을 정의합니다. 이 요소는 match 속성이나 name 속성 집합이 있어야 합니다.
diff --git a/files/ko/web/xslt/element/text/index.md b/files/ko/web/xslt/element/text/index.md
index ae0b420c6d7cb7..7c58bd615769f3 100644
--- a/files/ko/web/xslt/element/text/index.md
+++ b/files/ko/web/xslt/element/text/index.md
@@ -3,7 +3,7 @@ title: text
slug: Web/XSLT/Element/text
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:text>` 요소는 출력 트리에 리터럴(literal) 텍스트를 씁니다. `#PCDATA`, 리터럴 텍스트, 엔티티 참조를 포함할 지도 모릅니다.
diff --git a/files/ko/web/xslt/element/transform/index.md b/files/ko/web/xslt/element/transform/index.md
index 26b0bbb1e23b93..bd22cfe3aabeea 100644
--- a/files/ko/web/xslt/element/transform/index.md
+++ b/files/ko/web/xslt/element/transform/index.md
@@ -3,7 +3,7 @@ title: transform
slug: Web/XSLT/Element/transform
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:transform>` 요소는 [`<xsl:stylesheet>`](/ko/XSLT/stylesheet) 요소와 정확히 같습니다.
diff --git a/files/ko/web/xslt/element/value-of/index.md b/files/ko/web/xslt/element/value-of/index.md
index 88f288fb4433b5..21b7fbc21fe92d 100644
--- a/files/ko/web/xslt/element/value-of/index.md
+++ b/files/ko/web/xslt/element/value-of/index.md
@@ -3,7 +3,7 @@ title: value-of
slug: Web/XSLT/Element/value-of
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:value-of>` 요소는 XPath 식을 평가하여 그것을 문자열로 바꾸고 문자열을 결과 트리에 씁니다.
diff --git a/files/ko/web/xslt/element/variable/index.md b/files/ko/web/xslt/element/variable/index.md
index d4f9d7d619ae1c..39c1e785981901 100644
--- a/files/ko/web/xslt/element/variable/index.md
+++ b/files/ko/web/xslt/element/variable/index.md
@@ -3,7 +3,7 @@ title: variable
slug: Web/XSLT/Element/variable
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:variable>` 요소는 스타일시트에 전역 변수나 지역 변수를 선언하고 그 변수에 값을 줍니다. XSLT가 부작용(side-effect)을 허용하지 않기 때문에, 변수값을 한 번 주면 그 변수는 범위(scope)를 벗어날 때까지 같은 값입니다.
diff --git a/files/ko/web/xslt/element/when/index.md b/files/ko/web/xslt/element/when/index.md
index 73009af3b83758..85d83f3ab125d9 100644
--- a/files/ko/web/xslt/element/when/index.md
+++ b/files/ko/web/xslt/element/when/index.md
@@ -3,7 +3,7 @@ title: when
slug: Web/XSLT/Element/when
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:when>` 요소는 항상 case 문처럼 동작하는 `<xsl:choose>` 요소 안에 나타납니다.
diff --git a/files/ko/web/xslt/element/with-param/index.md b/files/ko/web/xslt/element/with-param/index.md
index 265d702da91424..53abe90491ff77 100644
--- a/files/ko/web/xslt/element/with-param/index.md
+++ b/files/ko/web/xslt/element/with-param/index.md
@@ -3,7 +3,7 @@ title: with-param
slug: Web/XSLT/Element/with-param
---
-{{ XsltRef() }}
+{{XsltSidebar}}{{ XsltRef() }}
`<xsl:with-param>` 요소는 템플릿에 건네는 매개변수 값을 지정합니다.
diff --git a/files/ko/web/xslt/transforming_xml_with_xslt/index.md b/files/ko/web/xslt/transforming_xml_with_xslt/index.md
index 56d41cd3e5502d..c135cb35e5b913 100644
--- a/files/ko/web/xslt/transforming_xml_with_xslt/index.md
+++ b/files/ko/web/xslt/transforming_xml_with_xslt/index.md
@@ -3,6 +3,8 @@ title: Transforming XML with XSLT
slug: Web/XSLT/Transforming_XML_with_XSLT
---
+{{XsltSidebar}}
+
### [개요](/ko/Transforming_XML_with_XSLT/An_Overview)
내용과 겉모양의 분리가 [XML](/ko/XML)의 중요한 설계 특징입니다. XML 문서 구조는 결국 이 데이터를 어떻게 표시하는 게 좋을지에 관한 어떤 암시를 줄 필요로 방해받지 않은 내용 자체의 서로 다른 면(aspect) 사이의 중요한 관계를 반영하고 명확히 하기 위해 설계했습니다. 이 지적인 구조화는 데이터 전송이 더욱 자동화되는 것만큼 특히 중요하고 네트워크로 연결된 매우 이질적인 컴퓨터 사이에 일어난다.
diff --git a/files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md b/files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
index cf01b79fe4e767..f8aa99d92624e6 100644
--- a/files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
+++ b/files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
@@ -3,6 +3,8 @@ title: The Netscape XSLT/XPath Reference
slug: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
---
+{{XsltSidebar}}
+
다음은 W3C의 XSLT 1.0 권고안뿐만 아니라 XPath 권고안의 알맞은 절로부터 알파벳순으로 주석을 단 요소, 축, 함수 목록입니다. XSLT 처리기 개발이 진행중이고 이 문서는 기능을 확장하는 대로 갱신할 것입니다.
### Elements
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index 511d18b0dd41a8..515cc4eb7887c0 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -99,7 +99,7 @@
/pt-BR/docs/DOM/Document.querySelectorAll /pt-BR/docs/Web/API/Document/querySelectorAll
/pt-BR/docs/DOM/Referencia_do_DOM /pt-BR/docs/Web/API/Document_Object_Model
/pt-BR/docs/DOM/Referencia_do_DOM/Examples /pt-BR/docs/Web/API/Document_Object_Model/Examples
-/pt-BR/docs/DOM/Referencia_do_DOM/How_to_create_a_DOM_tree /pt-BR/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree
+/pt-BR/docs/DOM/Referencia_do_DOM/How_to_create_a_DOM_tree /pt-BR/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
/pt-BR/docs/DOM/Referencia_do_DOM/Introdução /pt-BR/docs/Web/API/Document_Object_Model/Introduction
/pt-BR/docs/DOM/Referencia_do_DOM/Whitespace_in_the_DOM /pt-BR/docs/Web/API/Document_Object_Model/Whitespace
/pt-BR/docs/DOM/XMLHttpRequest /pt-BR/docs/Web/API/XMLHttpRequest
@@ -559,6 +559,7 @@
/pt-BR/docs/Web/API/DocumentOrShadowRoot/activeElement /pt-BR/docs/Web/API/Document/activeElement
/pt-BR/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /pt-BR/docs/Web/API/Document/elementFromPoint
/pt-BR/docs/Web/API/DocumentOrShadowRoot/getSelection /pt-BR/docs/Web/API/Document/getSelection
+/pt-BR/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree /pt-BR/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
/pt-BR/docs/Web/API/DocumentoXML /pt-BR/docs/Web/API/XMLDocument
/pt-BR/docs/Web/API/Element.addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener
/pt-BR/docs/Web/API/Element.getAttribute /pt-BR/docs/Web/API/Element/getAttribute
@@ -627,11 +628,11 @@
/pt-BR/docs/Web/API/Window/DOMContentLoaded_event /pt-BR/docs/Web/API/Document/DOMContentLoaded_event
/pt-BR/docs/Web/API/Window/Window.localStorage /pt-BR/docs/Web/API/Window/localStorage
/pt-BR/docs/Web/API/Window/openDialog /pt-BR/docs/conflicting/Web/API/Window
-/pt-BR/docs/Web/API/WindowBase64/atob /pt-BR/docs/Web/API/atob
+/pt-BR/docs/Web/API/WindowBase64/atob /pt-BR/docs/Web/API/Window/atob
/pt-BR/docs/Web/API/WindowEventHandlers/onhashchange /pt-BR/docs/Web/API/Window/hashchange_event
/pt-BR/docs/Web/API/WindowEventHandlers/onpopstate /pt-BR/docs/conflicting/Web/API/Window/popstate_event
/pt-BR/docs/Web/API/WindowEventHandlers/onstorage /pt-BR/docs/Web/API/Window/storage_event
-/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/atob /pt-BR/docs/Web/API/atob
+/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/atob /pt-BR/docs/Web/API/Window/atob
/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /pt-BR/docs/Web/API/clearTimeout
/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/fetch /pt-BR/docs/Web/API/fetch
/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /pt-BR/docs/Web/API/setInterval
@@ -643,6 +644,7 @@
/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest /pt-BR/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
/pt-BR/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /pt-BR/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
/pt-BR/docs/Web/API/XMLHttpRequest/onreadystatechange /pt-BR/docs/Web/API/XMLHttpRequest/readystatechange_event
+/pt-BR/docs/Web/API/atob /pt-BR/docs/Web/API/Window/atob
/pt-BR/docs/Web/API/console/assert /pt-BR/docs/Web/API/console/assert_static
/pt-BR/docs/Web/API/console/clear /pt-BR/docs/Web/API/console/clear_static
/pt-BR/docs/Web/API/console/count /pt-BR/docs/Web/API/console/count_static
@@ -734,7 +736,8 @@
/pt-BR/docs/Web/CSS/valor_inicial /pt-BR/docs/Web/CSS/initial_value
/pt-BR/docs/Web/CSS/var() /pt-BR/docs/Web/CSS/var
/pt-BR/docs/Web/CSS/word-wrap /pt-BR/docs/Web/CSS/overflow-wrap
-/pt-BR/docs/Web/Demos_of_open_web_technologies /pt-BR/docs/Web/Demos
+/pt-BR/docs/Web/Demos /pt-BR/docs/orphaned/Web/Demos
+/pt-BR/docs/Web/Demos_of_open_web_technologies /pt-BR/docs/orphaned/Web/Demos
/pt-BR/docs/Web/Events/DOMContentLoaded /pt-BR/docs/Web/API/Document/DOMContentLoaded_event
/pt-BR/docs/Web/Events/abort /pt-BR/docs/Web/API/HTMLMediaElement/abort_event
/pt-BR/docs/Web/Events/beforeunload /pt-BR/docs/Web/API/Window/beforeunload_event
@@ -814,6 +817,7 @@
/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS /pt-BR/docs/Web/HTTP/CORS
/pt-BR/docs/Web/HTTP/Gerenciamento_de_Conexão_em_HTTP_1.x /pt-BR/docs/Web/HTTP/Connection_management_in_HTTP_1.x
/pt-BR/docs/Web/HTTP/HTTP /pt-BR/docs/Web/HTTP/Caching
+/pt-BR/docs/Web/HTTP/Headers/Accept-CH-Lifetime /pt-BR/docs/orphaned/Web/HTTP/Headers/Accept-CH-Lifetime
/pt-BR/docs/Web/HTTP/Headers/Conexão /pt-BR/docs/Web/HTTP/Headers/Connection
/pt-BR/docs/Web/HTTP/Headers/Cookie2 /pt-BR/docs/conflicting/Web/HTTP/Headers/Cookie
/pt-BR/docs/Web/HTTP/Headers/Expira /pt-BR/docs/Web/HTTP/Headers/Expires
@@ -894,6 +898,8 @@
/pt-BR/docs/Web/SVG/Element/animateColor /pt-BR/docs/conflicting/Web/SVG/Element/animate
/pt-BR/docs/Web/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text
/pt-BR/docs/Web/SVG/Intensivo_de_Namespaces /pt-BR/docs/Web/SVG/Namespaces_Crash_Course
+/pt-BR/docs/Web/Security/Securing_your_site /pt-BR/docs/Web/Security/Practical_implementation_guides
+/pt-BR/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /pt-BR/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
/pt-BR/docs/Web/Tutoriais /pt-BR/docs/Web/Tutorials
/pt-BR/docs/Web/WebGL /pt-BR/docs/Web/API/WebGL_API
/pt-BR/docs/Web/Web_Components /pt-BR/docs/Web/API/Web_components
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index bb596a0ed52dea..3292765ce649ad 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -2786,10 +2786,6 @@
"modified": "2019-03-23T22:11:58.983Z",
"contributors": ["virginiarcruz"]
},
- "Web/API/Document_Object_Model/How_to_create_a_DOM_tree": {
- "modified": "2019-03-23T22:11:56.223Z",
- "contributors": ["virginiarcruz"]
- },
"Web/API/Document_Object_Model/Introduction": {
"modified": "2020-12-03T17:12:30.790Z",
"contributors": [
@@ -2803,6 +2799,10 @@
"onsistec"
]
},
+ "Web/API/Document_Object_Model/Using_the_Document_Object_Model": {
+ "modified": "2019-03-23T22:11:56.223Z",
+ "contributors": ["virginiarcruz"]
+ },
"Web/API/Document_Object_Model/Whitespace": {
"modified": "2019-03-18T21:38:03.775Z",
"contributors": ["jpreuss", "coloringa"]
@@ -3931,6 +3931,10 @@
"modified": "2020-03-30T12:44:24.443Z",
"contributors": ["raulnunesodre", "teoli", "alexandrem"]
},
+ "Web/API/Window/atob": {
+ "modified": "2020-10-15T21:46:04.009Z",
+ "contributors": ["mateusvelleda", "joaoricardo_rm"]
+ },
"Web/API/Window/beforeunload_event": {
"modified": "2019-04-30T13:57:03.306Z",
"contributors": ["wbamberg", "LeoNicolas"]
@@ -4171,10 +4175,6 @@
"modified": "2019-03-23T23:03:40.500Z",
"contributors": ["EduardoRedressa"]
},
- "Web/API/atob": {
- "modified": "2020-10-15T21:46:04.009Z",
- "contributors": ["mateusvelleda", "joaoricardo_rm"]
- },
"Web/API/clearTimeout": {
"modified": "2020-10-15T21:31:54.685Z",
"contributors": ["GarkGarcia", "teoli", "Willkuns"]
@@ -5409,10 +5409,6 @@
"modified": "2019-03-23T22:01:39.192Z",
"contributors": ["jessuircleydson"]
},
- "Web/Demos": {
- "modified": "2020-09-04T06:28:02.627Z",
- "contributors": ["gustavoSoriano", "angelorubin", "arthur2323"]
- },
"Web/Guide": {
"modified": "2020-10-30T13:31:43.101Z",
"contributors": [
@@ -6321,10 +6317,6 @@
"modified": "2020-10-15T22:26:08.419Z",
"contributors": ["FernandoKGA"]
},
- "Web/HTTP/Headers/Accept-CH-Lifetime": {
- "modified": "2020-10-15T22:26:09.466Z",
- "contributors": ["FernandoKGA"]
- },
"Web/HTTP/Headers/Accept-Charset": {
"modified": "2020-10-15T22:26:09.572Z",
"contributors": ["FernandoKGA"]
@@ -10265,11 +10257,11 @@
"Fulanodigital"
]
},
- "Web/Security/Securing_your_site": {
+ "Web/Security/Practical_implementation_guides": {
"modified": "2019-03-23T22:41:54.591Z",
"contributors": ["julio-elipse", "ygormaximo", "marumari"]
},
- "Web/Security/Securing_your_site/Turning_off_form_autocompletion": {
+ "Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion": {
"modified": "2019-03-23T22:41:55.986Z",
"contributors": [
"VitorTakara",
@@ -11258,6 +11250,10 @@
"Erick_Ribeiro"
]
},
+ "orphaned/Web/Demos": {
+ "modified": "2020-09-04T06:28:02.627Z",
+ "contributors": ["gustavoSoriano", "angelorubin", "arthur2323"]
+ },
"orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS)": {
"modified": "2019-03-23T23:08:21.480Z",
"contributors": ["dinaldojr"]
@@ -11346,6 +11342,10 @@
"modified": "2020-07-20T20:48:22.250Z",
"contributors": ["FernandoKGA"]
},
+ "orphaned/Web/HTTP/Headers/Accept-CH-Lifetime": {
+ "modified": "2020-10-15T22:26:09.466Z",
+ "contributors": ["FernandoKGA"]
+ },
"orphaned/Web/HTTP/Headers/Set-Cookie/SameSite": {
"modified": "2020-10-15T22:31:49.288Z",
"contributors": ["ooVictorFranco"]
diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md b/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md
new file mode 100644
index 00000000000000..e6d07a1cefacfb
--- /dev/null
+++ b/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md
@@ -0,0 +1,108 @@
+---
+title: browsingData.removeHistory()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeHistory
+---
+
+{{AddonSidebar}}
+
+Limpa o histórico de páginas web que o usuário vistou (histórico de navegação)
+
+Você pode usar o parâmetro `removalOptions`, em que é um objeto {{WebExtAPIRef("browsingData.RemovalOptions")}}, para:
+
+- limpar apenas os registros de páginas visitadas em determinado período.
+- controlar se limpa os registros apenas de uma página web normal ou se limpa os registros de um app e extensões hospedados.
+
+Esta é uma função assíncrona que retorna uma [`Promise`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+
+## Sintaxe
+
+```js-nolint
+let removing = browser.browsingData.removeHistory(
+ removalOptions // objeto RemovalOptions
+)
+```
+
+### Parâmetros
+
+- `removalOptions`
+ - : `object`. Um objeto {{WebExtAPIRef("browsingData.RemovalOptions")}}, que pode ser usado para limpar apenas os registros de páginas web visitadas após determinado tempo, e limpa os registros apenas de uma página web normal ou limpa os registros de apps e extensões hospedados.
+
+### Valor retornado
+
+Uma [`Promise`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise) que será realizada sem argumentos quando a remoção for finalizada. Se ocorrer qualquer erro, a promise será rejeitada com uma mensagem de erro.
+
+## Exemplos
+
+Remove registros de páginas visitadas na última semana:
+
+```js
+function onRemoved() {
+ console.log("removido");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+function weekInMilliseconds() {
+ return 1000 * 60 * 60 * 24 * 7;
+}
+
+let oneWeekAgo = new Date().getTime() - weekInMilliseconds();
+
+browser.browsingData
+ .removeHistory({ since: oneWeekAgo })
+ .then(onRemoved, onError);
+```
+
+Remove todos os registos de páginas visitadas:
+
+```js
+function onRemoved() {
+ console.log("removido");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removeHistory({}).then(onRemoved, onError);
+```
+
+## Compatibilidade entre navegadores
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **Nota:** Esta API é baseada na API do Chromium [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/).
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/pt-br/web/demos/index.md b/files/pt-br/orphaned/web/demos/index.md
similarity index 99%
rename from files/pt-br/web/demos/index.md
rename to files/pt-br/orphaned/web/demos/index.md
index be92b467b32532..40aef481a04f03 100644
--- a/files/pt-br/web/demos/index.md
+++ b/files/pt-br/orphaned/web/demos/index.md
@@ -1,6 +1,7 @@
---
title: Demonstrações de tecnologia web aberta
-slug: Web/Demos
+slug: orphaned/Web/Demos
+original_slug: Web/Demos
---
A mozilla suporta uma grande variedade de tecnologias abertas da web aberta e nós encorajamos seu uso.Esta página oferece links para demonstrações interessantes dessas tecnologia.
diff --git a/files/pt-br/orphaned/web/html/element/blink/htmlblinkelement.gif b/files/pt-br/orphaned/web/html/element/blink/htmlblinkelement.gif
deleted file mode 100644
index b1e0611050b254..00000000000000
Binary files a/files/pt-br/orphaned/web/html/element/blink/htmlblinkelement.gif and /dev/null differ
diff --git a/files/pt-br/web/http/headers/accept-ch-lifetime/index.md b/files/pt-br/orphaned/web/http/headers/accept-ch-lifetime/index.md
similarity index 91%
rename from files/pt-br/web/http/headers/accept-ch-lifetime/index.md
rename to files/pt-br/orphaned/web/http/headers/accept-ch-lifetime/index.md
index 2d610ae5ab5cec..384b92926a85ec 100644
--- a/files/pt-br/web/http/headers/accept-ch-lifetime/index.md
+++ b/files/pt-br/orphaned/web/http/headers/accept-ch-lifetime/index.md
@@ -1,6 +1,7 @@
---
title: Accept-CH-Lifetime
-slug: Web/HTTP/Headers/Accept-CH-Lifetime
+slug: orphaned/Web/HTTP/Headers/Accept-CH-Lifetime
+original_slug: Web/HTTP/Headers/Accept-CH-Lifetime
---
{{HTTPSidebar}}{{securecontext_header}}{{SeeCompatTable}}
diff --git a/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/pt-br/web/api/document_object_model/using_the_document_object_model/index.md
similarity index 97%
rename from files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.md
rename to files/pt-br/web/api/document_object_model/using_the_document_object_model/index.md
index d0847b7680d980..7c2b2adc3123d1 100644
--- a/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.md
+++ b/files/pt-br/web/api/document_object_model/using_the_document_object_model/index.md
@@ -1,6 +1,7 @@
---
title: Como criar uma árvore DOM
-slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree
+slug: Web/API/Document_Object_Model/Using_the_Document_Object_Model
+original_slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree
---
{{DefaultAPISidebar("DOM")}}
diff --git a/files/pt-br/web/api/formdata/getall/index.md b/files/pt-br/web/api/formdata/getall/index.md
index a1e981eb00a1ac..3ae44b0c56da9b 100644
--- a/files/pt-br/web/api/formdata/getall/index.md
+++ b/files/pt-br/web/api/formdata/getall/index.md
@@ -34,7 +34,7 @@ A seguinte linha cria um objeto `FormData` vazio:
var formData = new FormData();
```
-Se nos adicionarmos dois valores oara `username` {{domxref("FormData.append")}}:
+Se nós adicionarmos dois valores para `username` {{domxref("FormData.append")}}:
```js
formData.append("username", "Chris");
diff --git a/files/pt-br/web/api/atob/index.md b/files/pt-br/web/api/window/atob/index.md
similarity index 96%
rename from files/pt-br/web/api/atob/index.md
rename to files/pt-br/web/api/window/atob/index.md
index 8dfbefb741b7b2..3b6a319d9970e1 100644
--- a/files/pt-br/web/api/atob/index.md
+++ b/files/pt-br/web/api/window/atob/index.md
@@ -1,6 +1,7 @@
---
title: WindowBase64.atob()
-slug: Web/API/atob
+slug: Web/API/Window/atob
+original_slug: Web/API/atob
---
{{APIRef("HTML DOM")}}
diff --git a/files/pt-br/web/css/env/index.md b/files/pt-br/web/css/env/index.md
index f4967ec2cb2037..a46b29e3671a3a 100644
--- a/files/pt-br/web/css/env/index.md
+++ b/files/pt-br/web/css/env/index.md
@@ -9,10 +9,8 @@ A função [CSS](/pt-BR/docs/Web/CSS) **`env()`** pode ser usada para inserir o
```css
body {
- padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
- safe-area-inset-bottom,
- 20px
- ) env(safe-area-inset-left, 20px);
+ padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+ env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}
```
@@ -66,10 +64,8 @@ O exemplo abaixo faz uso do segundo parâmetro opcional de `env()`, que permite
p {
width: 300px;
border: 2px solid red;
- padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
- safe-area-inset-bottom,
- 50px
- ) env(SAFE-AREA-INSET-LEFT, 50px);
+ padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
+ env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
}
```
diff --git a/files/pt-br/web/css/visual_formatting_model/anonymous_block_box_break.png b/files/pt-br/web/css/visual_formatting_model/anonymous_block_box_break.png
deleted file mode 100644
index 1fd80fee4a4483..00000000000000
Binary files a/files/pt-br/web/css/visual_formatting_model/anonymous_block_box_break.png and /dev/null differ
diff --git a/files/pt-br/web/javascript/reference/global_objects/json/index.md b/files/pt-br/web/javascript/reference/global_objects/json/index.md
index 6e8ed1929e7cdf..78361f72acafc2 100644
--- a/files/pt-br/web/javascript/reference/global_objects/json/index.md
+++ b/files/pt-br/web/javascript/reference/global_objects/json/index.md
@@ -15,11 +15,11 @@ O Objeto **`JSON`** contém métodos para parsing [JavaScript Object Notation](h
JSON é uma sintaxe para serialização de objetos, matrizes, números, strings, booleanos, e {{jsxref ("null")}}. Baseia-se em sintaxe Javascript, mas é distinta desta: alguns Javascript não são JSON, e alguns JSON não são Javascript.
-| JavaScript tipo | JSON diferenças |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Objetos e Arrays | Os nomes das propriedades devem ser strings com aspas duplas; as vírgulas à direita são proibidas. |
-| Números | Zeros à esquerda são proibidos; um ponto decimal deve ser seguido por pelo menos um dígito. |
-| Strings | Apenas um conjunto limitado de caracteres pode ser escapado; certos caracteres de controle são proibidos; o separador de linha Unicode ([U+2028](http://unicode-table.com/en/2028/)) e o separador de parágrafo ([U+2029](http://unicode-table.com/en/2029/)) caracteres são permitidos; strings devem ter aspas duplas.Veja o exemplo a seguir, onde {{jsxref("JSON.parse()")}} funciona bem e um {{jsxref("SyntaxError")}} é lançado ao avaliar o código como JavaScript: var code = '"\u2028\u2029"'; JSON.parse(code); // works fine eval(code); // fails |
+| JavaScript tipo | JSON diferenças |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Objetos e Arrays | Os nomes das propriedades devem ser strings com aspas duplas; as vírgulas à direita são proibidas. |
+| Números | Zeros à esquerda são proibidos; um ponto decimal deve ser seguido por pelo menos um dígito. |
+| Strings | Apenas um conjunto limitado de caracteres pode ser escapado; certos caracteres de controle são proibidos; o separador de linha Unicode ([U+2028](https://symbl.cc/en/2028/)) e o separador de parágrafo ([U+2029](https://symbl.cc/en/2029/)) caracteres são permitidos; strings devem ter aspas duplas.Veja o exemplo a seguir, onde {{jsxref("JSON.parse()")}} funciona bem e um {{jsxref("SyntaxError")}} é lançado ao avaliar o código como JavaScript: var code = '"\u2028\u2029"'; JSON.parse(code); // works fine eval(code); // fails |
A sintaxe completa do JSON é a seguinte:
diff --git a/files/pt-br/web/progressive_web_apps/index.md b/files/pt-br/web/progressive_web_apps/index.md
new file mode 100644
index 00000000000000..64e9244915fa22
--- /dev/null
+++ b/files/pt-br/web/progressive_web_apps/index.md
@@ -0,0 +1,121 @@
+---
+title: Progressive Web Apps
+short-title: Progressive Web Apps
+slug: Web/Progressive_web_apps
+l10n:
+ sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3
+---
+
+{{PWASidebar}}
+
+Uma _**Progressive Web App**_ (PWA, "Aplicação _Web_ Progressiva") é uma aplicação criada com tecnologias _web_, mas que oferece uma experiência de usuário como a de uma específica de plataforma.
+
+Assim como um _site_, uma PWA pode ser executada em várias plataformas e dispositivos a partir de uma única base de código. Da mesma forma que uma aplicação específica de plataforma, pode ser instalada no dispositivo, integrando-se a ele e a outras aplicações instaladas, além de operar _offline_ e em segundo plano.
+
+## Guias
+
+Estes guias fornecem explicações conceituais de diferentes aspectos das PWAs. Eles têm o objetivo de te ajudar a entender que tipos de coisas são possíveis com as elas e te fornecer orientações o suficiente para te mostrar como alcançá-las.
+
+- [O que é uma _progressive web app_?](/pt-BR/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app)
+ - : Uma introdução às PWAs, comparando-as com _sites_ tradicionais e aplicações específicas de plataforma e descrevendo seus principais recursos.
+- [Tornando PWAs instaláveis](/pt-BR/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)
+ - : Um dos aspectos que definem uma PWA é que ela pode ser instalada no dispositivo e em seguida aparecer para os usuários como uma aplicação específica da plataforma, um recurso permanente do dispositivo que pode ser iniciado diretamente do sistema operacional, como qualquer outro aplicativo. Neste guia, exploraremos o significado de "instalável", o que uma PWA precisa fornecer para ser instalável e como você pode personalizar a experiência de instalação.
+- [Instalação e desinstalação de aplicações web](/pt-BR/docs/Web/Progressive_web_apps/Guides/Installing)
+ - : Este guia aborda como os usuários podem instalar e desinstalar PWAs em seus dispositivos.
+- [Operando offline e em segundo plano](/pt-BR/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation)
+ - : Neste guia, apresentaremos um conjunto de tecnologias que permite que uma PWA forneça uma boa experiência ao usuário mesmo quando o dispositivo tem uma conexão com a internet intermitente e realize operações em segundo plano, mesmo quando a aplicação principal não estiver em execução.
+- [Armazenando em _cache_](/pt-BR/docs/Web/Progressive_web_apps/Guides/Caching)
+ - : Uma visão geral das APIs que permitem que uma PWA armazene recursos em _cache_ localmente e algumas estratégias comuns usadas por PWAs para implementar funcionalidades _offline_.
+- [Melhores práticas para PWAs](/pt-BR/docs/Web/Progressive_web_apps/Guides/Best_practices)
+ - : As PWAs devem se adaptar a diferentes navegadores e dispositivos, ser acessíveis, ter bom desempenho e se integrar bem ao sistema operacional. Este guia fornece uma lista de melhores práticas para te ajudar a garantir que sua PWA seja tão boa quanto for possível.
+
+## Como fazer
+
+Estes guias fornecem instruções práticas e detalhadas sobre como implementar recursos específicos de PWA.
+
+- [Crie uma aplicação independente](/pt-BR/docs/Web/Progressive_web_apps/How_to/Create_a_standalone_app)
+ - : Descreve como especificar que uma PWA deve ser aberta em sua própria janela dedicada quando for iniciada, em vez de em uma aba do navegador.
+- [Defina os ícones da sua aplicação](/pt-BR/docs/Web/Progressive_web_apps/How_to/Define_app_icons)
+ - : Descreve como definir que seu próprio conjunto de ícones deve ser usado quando a PWA estiver instalada em um dispositivo.
+- [Personalize as cores da sua aplicação](/pt-BR/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors)
+ - : Descreve como definir cores de fundo e de tema para uma PWA.
+- [Exiba _badges_ (ícone de notificação)](/pt-BR/docs/Web/Progressive_web_apps/How_to/Display_badge_on_app_icon)
+ - : Descreve como exibir um _badge_ (ícone de notificação) no ícone da PWA, por exemplo, para informar o usuário que há novas mensagens.
+- [Exiba ações comuns da aplicação em atalhos](/pt-BR/docs/Web/Progressive_web_apps/How_to/Expose_common_actions_as_shortcuts)
+ - : Descreve como exibir ações comuns para uma PWA que pode ser iniciada a partir do menu de atalhos de aplicativos do sistema operacional.
+- [Compartilhe dados entre aplicações](/pt-BR/docs/Web/Progressive_web_apps/How_to/Share_data_between_apps)
+ - : Descreve como as PWAs podem compartilhar dados entre si usando o mecanismo de compartilhamento das aplicações do sistema operacional.
+- [Acionar a instalação a partir da sua PWA](/pt-BR/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt)
+ - : Descreve como desenvolvedores podem fornecer sua própria interface para convidar os usuários a instalar sua PWA.
+- [Associe arquivos à sua PWA](/pt-BR/docs/Web/Progressive_web_apps/How_to/Associate_files_with_your_PWA)
+ - : Descreve como você pode criar uma associação entre tipos de arquivo e sua PWA, de modo que, quando o usuário clicar no arquivo, sua PWA seja iniciada para abri-lo.
+
+## Tutoriais
+
+Nestes tutoriais, você criará uma PWA do zero. Os tutoriais percorrem as etapas de criação de uma aplicação, do início ao fim, explicando como os diferentes recursos dela são implementados.
+
+- [Criando sua primeira PWA](/pt-BR/docs/Web/Progressive_web_apps/Tutorials/CycleTracker)
+ - : Este tutorial para iniciantes apresenta a criação de uma PWA para o monitoramento de ciclos menstruais. As lições incluem um passo-a-passo dos HTML, CSS e JavaScript necessários para se criar um _site_ totalmente funcional, com a configuração de um ambiente de testes e explicações completas que vão te orientar na transformação dele em uma PWA, incluindo o desenvolvimento e a revisão de um manifesto, a adição de um _service worker_ e o uso desse para se excluir _caches_ antigos.
+- [Mergulhe fundo nas PWAs](/pt-BR/docs/Web/Progressive_web_apps/Tutorials/js13kGames)
+ - : Este tutorial de nível intermediário aborda a criação de uma PWA que lista informações sobre jogos submetidos para a categoria A-_Frame_ na competição [js13kGames 2017](https://2017.js13kgames.com/). Este tutorial inclui todos os conceitos básicos para a criação de uma PWA com recursos adicionais, abrangendo notificações - inclusive as do tipo _push_ - e técnicas de melhoria de desempenho desempenho de aplicação.
+
+## Referências
+
+Documentação de referência para as tecnologias _web_ que você vai usar para criar uma PWA.
+
+### Web app manifest
+
+- [Web app manifest](/pt-BR/docs/Web/Manifest)
+ - : Desenvolvedores podem usar os "membros" do _web app manifest_ ["manifesto da aplicação web", tradução própria] para descrever uma PWA, personalizar sua aparência e integrá-la mais profundamente ao sistema operacional.
+
+### APIs de _Service Worker_
+
+#### Comunicação com a aplicação
+
+As APIs a seguir podem ser usadas por um _service worker_ para se comunicar com sua PWA cliente associada:
+
+- [`Client.postMessage()`](/pt-BR/docs/Web/API/Client/postMessage)
+ - : Permite que um _service worker_ envie uma mensagem para sua PWA cliente.
+- [Broadcast Channel API](/pt-BR/docs/Web/API/Broadcast_Channel_API)
+ - : Permite que um _service worker_ e sua PWA cliente estabeleçam um canal de comunicação bidirecional básico.
+
+#### Operação offline
+
+As seguintes APIs podem ser usadas por um _service worker_ para fazer sua aplicação funcionar _offline_:
+
+- [`Cache`](/pt-BR/docs/Web/API/Cache)
+ - : Um mecanismo de armazenamento em _cache_ para respostas HTTP usado para manter _assets_ que podem ser reutilizados quando a aplicação está _offline_.
+- [`Clients`](/pt-BR/docs/Web/API/Clients)
+ - : Uma interface usada para fornecer acesso aos documentos que são controlados pelo _service worker_.
+- [`FetchEvent`](/pt-BR/docs/Web/API/FetchEvent)
+ - : Um evento enviado no _service worker_ com cada requisição HTTP feita pela PWA cliente. O evento pode ser usado para se enviar a requisição ao servidor normalmente e salvar-se a resposta para uso futuro, ou para se interceptá-la e respondê-la imediatamente com uma resposta armazenada em _cache_ anteriormente.
+
+#### Operação em segundo plano
+
+As APIs a seguir podem ser usadas por um _service worker_ para se executar tarefas em segundo plano, mesmo quando a aplicação não estiver em execução:
+
+- [API Background Synchronization](/pt-BR/docs/Web/API/Background_Synchronization_API)
+ - : Uma forma de se adiar a execução de tarefas em um _service worker_ para que ocorram somente quando houver uma conexão com a internet estável.
+- [API Web Periodic Background Synchronization](/pt-BR/docs/Web/API/Web_Periodic_Background_Synchronization_API)
+ - : Uma maneira de registrar-se tarefas a serem executadas em um _service worker_ em intervalos periódicos com conexão de rede.
+- [API Background Fetch](/pt-BR/docs/Web/API/Background_Fetch_API)
+ - : Um método para um _service worker_ gerenciar downloads que podem levar um tempo significativo, como arquivos de vídeo ou áudio.
+
+### Outras APIs _web_
+
+- [IndexedDB](/pt-BR/docs/Web/API/IndexedDB_API)
+ - : Uma API de armazenamento no lado do cliente para quantidades significativas de dados estruturados, incluindo arquivos.
+- [API Badging](/pt-BR/docs/Web/API/Badging_API)
+ - : Um método para se colocar um _badge_ (ícone de notificação) no ícone da aplicação, fornecendo-se uma notificação de pouca distração.
+- [API Notifications](/pt-BR/docs/Web/API/Notifications_API)
+ - : Uma maneira de se enviar notificações que são exibidas a nível de sistema operacional.
+- [API Web Share](/pt-BR/docs/Web/API/Web_Share_API)
+ - : Um mecanismo para compartilhamento de texto, _links_, arquivos e outros conteúdos com outras aplicações selecionadas pelo usuário em seu dispositivo.
+- [API Window Controls Overlay](/pt-BR/docs/Web/API/Window_Controls_Overlay_API)
+ - : Uma API para PWAs instaladas em sistemas operacionais de _desktop_ que permite ocultar-se a barra de título da janela padrão, possibilitando que a aplicação fique em tela cheia, porém exibindo-se os botões de sistema (minimizar, maximizar, fechar) e os específicos do navegador.
+
+## Veja também
+
+- [Progressive Web Apps](https://web.dev/explore/progressive-web-apps?hl=pt-br) em web.dev
+- [Aprenda sobre PWA<sup>(inglês)</sup>](https://web.dev/learn/pwa/) em web.dev
+- [Progressive Web Apps](https://learn.microsoft.com/pt-br/microsoft-edge/progressive-web-apps-chromium/) em learn.microsoft.com (2023)
diff --git a/files/pt-br/web/security/securing_your_site/index.md b/files/pt-br/web/security/practical_implementation_guides/index.md
similarity index 97%
rename from files/pt-br/web/security/securing_your_site/index.md
rename to files/pt-br/web/security/practical_implementation_guides/index.md
index 2d9c69611966e1..66cb3d0b23465e 100644
--- a/files/pt-br/web/security/securing_your_site/index.md
+++ b/files/pt-br/web/security/practical_implementation_guides/index.md
@@ -1,6 +1,7 @@
---
title: Deixando seu site seguro
-slug: Web/Security/Securing_your_site
+slug: Web/Security/Practical_implementation_guides
+original_slug: Web/Security/Securing_your_site
---
Há várias coisas que você pode fazer para ajudar na segurança do seu site. Esse artigo oferece uma série de sugestões, bem como links para outros artigos fornecendo informações mais úteis.
diff --git a/files/pt-br/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/pt-br/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
similarity index 96%
rename from files/pt-br/web/security/securing_your_site/turning_off_form_autocompletion/index.md
rename to files/pt-br/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
index fe24f29d5a49f8..665b19e7725901 100644
--- a/files/pt-br/web/security/securing_your_site/turning_off_form_autocompletion/index.md
+++ b/files/pt-br/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
@@ -1,6 +1,7 @@
---
title: How to Turn Off Form Autocompletion
-slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
+original_slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
---
Este artigo explica como um Site da Web pode desabilitar a função autocompletar de campos de formulário.
diff --git a/files/pt-br/webassembly/using_the_javascript_api/wasm-debugger-output.png b/files/pt-br/webassembly/using_the_javascript_api/wasm-debugger-output.png
deleted file mode 100644
index 62c79302947736..00000000000000
Binary files a/files/pt-br/webassembly/using_the_javascript_api/wasm-debugger-output.png and /dev/null differ
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index 23472a4d4acd53..677625dcf74206 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -476,7 +476,7 @@
/ru/docs/Web/API/WebRTC_API/связь /ru/docs/Web/API/WebRTC_API/Connectivity
/ru/docs/Web/API/Window/mozAnimationStartTime /ru/docs/Web/API/Animation/startTime
/ru/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /ru/docs/Glossary/Base64
-/ru/docs/Web/API/WindowBase64/btoa /ru/docs/Web/API/btoa
+/ru/docs/Web/API/WindowBase64/btoa /ru/docs/Web/API/Window/btoa
/ru/docs/Web/API/WindowEventHandlers/onafterprint /ru/docs/Web/API/Window/afterprint_event
/ru/docs/Web/API/WindowEventHandlers/onunload /ru/docs/Web/API/Window/unload_event
/ru/docs/Web/API/WindowTimers.setTimeout /ru/docs/Web/API/setTimeout
@@ -487,6 +487,8 @@
/ru/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests /ru/docs/Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests
/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /ru/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
/ru/docs/Web/API/XMLHttpRequest/onreadystatechange /ru/docs/Web/API/XMLHttpRequest/readystatechange_event
+/ru/docs/Web/API/atob /ru/docs/Web/API/Window/atob
+/ru/docs/Web/API/btoa /ru/docs/Web/API/Window/btoa
/ru/docs/Web/API/caches /ru/docs/Web/API/Window/caches
/ru/docs/Web/API/console.timeEnd /ru/docs/Web/API/console/timeend_static
/ru/docs/Web/API/console/assert /ru/docs/Web/API/console/assert_static
@@ -857,6 +859,7 @@
/ru/docs/Web/SVG/Элемент/rect /ru/docs/Web/SVG/Element/rect
/ru/docs/Web/SVG/Элемент/svg /ru/docs/Web/SVG/Element/svg
/ru/docs/Web/SVG/Элемент/use /ru/docs/Web/SVG/Element/use
+/ru/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /ru/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
/ru/docs/Web/WebGL /ru/docs/Web/API/WebGL_API
/ru/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /ru/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
/ru/docs/Web/WebGL/Animating_objects_with_WebGL /ru/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index 499d76e9d25ecf..7c562d19b4a39f 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -7187,6 +7187,10 @@
"modified": "2020-10-15T21:48:09.472Z",
"contributors": ["YozhEzhi", "utking", "MrOnlineCoder"]
},
+ "Web/API/Window/atob": {
+ "modified": "2019-03-23T22:02:40.728Z",
+ "contributors": ["HawkeyePierce89", "hunty"]
+ },
"Web/API/Window/beforeunload_event": {
"modified": "2020-10-15T22:33:54.942Z",
"contributors": ["b0rique"]
@@ -7199,6 +7203,10 @@
"modified": "2020-10-15T22:13:59.597Z",
"contributors": ["AliaksandrZahorski"]
},
+ "Web/API/Window/btoa": {
+ "modified": "2019-09-17T16:11:11.862Z",
+ "contributors": ["SerzN1", "uleming"]
+ },
"Web/API/Window/caches": {
"modified": "2020-10-29T09:02:45.566Z",
"contributors": ["ScratchFilin", "evilwithin93rus"]
@@ -7667,14 +7675,6 @@
"modified": "2019-03-23T22:17:05.888Z",
"contributors": ["t1gor"]
},
- "Web/API/atob": {
- "modified": "2019-03-23T22:02:40.728Z",
- "contributors": ["HawkeyePierce89", "hunty"]
- },
- "Web/API/btoa": {
- "modified": "2019-09-17T16:11:11.862Z",
- "contributors": ["SerzN1", "uleming"]
- },
"Web/API/clearTimeout": {
"modified": "2020-10-15T22:33:31.469Z",
"contributors": ["andzion105"]
@@ -15853,6 +15853,10 @@
"Sheppy"
]
},
+ "Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion": {
+ "modified": "2019-12-18T06:44:21.121Z",
+ "contributors": ["KolesnikovR"]
+ },
"Web/Security/Same-origin_policy": {
"modified": "2020-10-20T11:28:42.439Z",
"contributors": [
@@ -15864,10 +15868,6 @@
"ZVanoZ"
]
},
- "Web/Security/Securing_your_site/Turning_off_form_autocompletion": {
- "modified": "2019-12-18T06:44:21.121Z",
- "contributors": ["KolesnikovR"]
- },
"Web/Tutorials": {
"modified": "2019-10-02T16:11:49.043Z",
"contributors": [
diff --git a/files/ru/games/techniques/async_scripts/index.md b/files/ru/games/techniques/async_scripts/index.md
index b683af30634922..44ed99254075d1 100644
--- a/files/ru/games/techniques/async_scripts/index.md
+++ b/files/ru/games/techniques/async_scripts/index.md
@@ -3,6 +3,8 @@ title: Асинхронные скрипты для asm.js
slug: Games/Techniques/Async_scripts
---
+{{GamesSidebar}}
+
Каждая средняя или большая игра должна компилировать код [asm.js](/ru/docs/Games/Tools/asm.js) как часть асинхронного скрипта, чтобы дать браузеру максимальную гибкость для оптимизации процесса компиляции. В Gecko асинхронная компиляция позволяет движку JavaScript компилировать asm.js из основного потока когда игра загружается, и кешировать сгенерированный машинный код, так что игру не нужно компилировать при последующих загрузках (начиная с Firefox 28). Чтобы увидеть разницу, переключите `javascript.options.parallel_parsing` в `about:config`.
## Написание асинхронного скрипта
diff --git a/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
index 607dce18e5bbe8..d667d0756da594 100644
--- a/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
+++ b/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
@@ -3,6 +3,8 @@ title: Как начать разрабатывать свой сайт?
slug: Learn/Common_questions/Design_and_accessibility/Thinking_before_coding
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
Эта статья покрывает первый и крайне важный шаг в создании любого проекта: определить, что вы хотите получить.
| Необходимые знания: | Никаких |
diff --git a/files/ru/learn/common_questions/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md b/files/ru/learn/common_questions/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md
index e1a96d9ba38186..3bf4e33b3fb446 100644
--- a/files/ru/learn/common_questions/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md
+++ b/files/ru/learn/common_questions/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md
@@ -3,6 +3,8 @@ title: Как разместить свой сайт в Google App Engine
slug: Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
[Google App Engine](https://cloud.google.com/appengine/) - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google - нужно ли создавать многоуровневое веб-приложение с нуля или размещать статический веб-сайт. Вот пошаговое руководство по размещению вашего сайта в Google App Engine.
## Создание проекта Google Cloud Platform
diff --git a/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
index 0add87d325440e..8b623f5e8e08a5 100644
--- a/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
+++ b/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
@@ -3,6 +3,8 @@ title: Насколько дорого обойдётся сделать что-
slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.
| Прежде чем приступить: | Вам следует уже иметь представление о том, [какое программное обеспечение вам нужно](/en-US/Learn/What_software_do_I_need), различия между веб-страницей, веб-сайтом, и тд, а также о том, [что из себя представляет доменное имя](/en-US/Learn/Understanding_domain_names). |
diff --git a/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
index e9361db69017a2..94400a5b3a5473 100644
--- a/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
+++ b/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
@@ -3,6 +3,8 @@ title: Как настроить локальный сервер для тест
slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования.
| Требования: | Сначала вам необходимо изучить [как работает интернет](/ru/docs/Learn/How_the_Internet_works), а также [что такое веб-сервер](/ru/docs/Learn/What_is_a_Web_server). |
diff --git a/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
index fa4560cc4c37aa..fa859fe86e0df6 100644
--- a/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -3,6 +3,8 @@ title: Как загрузить файлы на веб-сервер
slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).
| Необходимые знания: | Вы должны знать [что такое веб-сервер](/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80) и [как работают доменные имена](/ru/docs/Learn/Understanding_domain_names). Также вы должны знать, [как установить базовую среду](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) и [как написать простую веб-страницу](/ru/docs/Learn/Getting_started_with_the_web). |
diff --git a/files/ru/learn/common_questions/tools_and_setup/using_github_pages/index.md b/files/ru/learn/common_questions/tools_and_setup/using_github_pages/index.md
index 7d0733d5564d72..d383bbda54dddf 100644
--- a/files/ru/learn/common_questions/tools_and_setup/using_github_pages/index.md
+++ b/files/ru/learn/common_questions/tools_and_setup/using_github_pages/index.md
@@ -3,6 +3,8 @@ title: Как использовать GitHub Pages?
slug: Learn/Common_questions/Tools_and_setup/Using_GitHub_pages
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
[GitHub](https://github.com/) — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения **в системе управления версиями** [Git](http://git-scm.com/). После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.
## Публикация контента
diff --git a/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index fcbc72e5b4f3c1..9517eeea71a454 100644
--- a/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -3,6 +3,8 @@ title: Веб-страницы, веб-сайты, веб серверы и по
slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!
| Необходимые знания: | Вы должны знать, [как работает Интернет](/en-US/Learn/How_the_Internet_works). |
diff --git a/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md b/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
index 77284e1d9eac0b..583399d21d0c0f 100644
--- a/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
+++ b/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
@@ -3,6 +3,8 @@ title: Разбираемся с веб ссылками
slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
В данной статье мы узнаем, что такое ссылки и почему они важны.
| Предварительно: | Вы должны знать [как работает интернет](/en-US/Learn/How_the_Internet_works) и иметь представление о [разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.](/ru/docs/Learn/page_vs_site_vs_server_vs_search_engine) |
diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
index 98c9547e4e40d2..4cf49818dd3ca7 100644
--- a/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
+++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
@@ -3,6 +3,8 @@ title: Что такое доменные имена
slug: Learn/Common_questions/Web_mechanics/What_is_a_domain_name
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя.
| Необходимые знания: | Вы должны знать [как работает Интернет](/ru/docs/Learn/How_the_Internet_works) и понимать устройство [устройство URL](/en-US/Learn/Understanding_URLs). |
diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md
index 2cd672093377d6..37fea6a7513dcf 100644
--- a/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md
+++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md
@@ -3,6 +3,8 @@ title: Что такое URL-адрес?
slug: Learn/Common_questions/Web_mechanics/What_is_a_URL
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру.
| Предварительно: | Вам нужно узнать [как работает интернет](/ru/docs/Learn/How_the_Internet_works), [что такое Веб сервер](/ru/docs/Learn/What_is_a_Web_server) and [что лежит в основе веб ссылок](/ru/docs/Learn/Understanding_links_on_the_web). |
diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
index 2e4c8612930343..e426a774374a73 100644
--- a/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
+++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
@@ -3,6 +3,8 @@ title: Что такое веб-сервер
slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны.
| Необходимые знания: | Вы должны уже знать, [как работает Интернет](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) и [понимать разницу между страницей, сайтом, сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) |
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
index c6f68e3e11bd16..12d2ab79f412c1 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -22,7 +22,8 @@ CSS-свойство {{cssxref ("background")}} является сокраще
105deg,
rgba(255, 255, 255, 0.2) 39%,
rgba(51, 56, 57, 1) 96%
- ) center center / 400px 200px no-repeat,
+ )
+ center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}
diff --git a/files/ru/learn/css/howto/css_faq/index.md b/files/ru/learn/css/howto/css_faq/index.md
index fbd92b3f62374e..4c56f151dbd79b 100644
--- a/files/ru/learn/css/howto/css_faq/index.md
+++ b/files/ru/learn/css/howto/css_faq/index.md
@@ -3,6 +3,8 @@ title: Common CSS questions
slug: Learn/CSS/Howto/CSS_FAQ
---
+{{LearnSidebar}}
+
## Why doesn't my CSS, which is valid, render correctly?
Браузер использует декларацию `DOCTYPE` чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме, которую будут поддерживать старые браузеры. Правильное использование декларации `DOCTYPE` в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.
diff --git a/files/ru/learn/css/howto/index.md b/files/ru/learn/css/howto/index.md
index f2e0ffb709e81c..97c989cd2220c9 100644
--- a/files/ru/learn/css/howto/index.md
+++ b/files/ru/learn/css/howto/index.md
@@ -3,6 +3,8 @@ title: Использование CSS для решения общих проб
slug: Learn/CSS/Howto
---
+{{LearnSidebar}}
+
Следующие ссылки указывают на решения общих повседневных проблем, вам придётся решать их с помощью CSS.
## Примеры и использование
diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
index 46dab9f1920e48..1016f27e2baf8c 100644
--- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
+++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -3,6 +3,8 @@ title: Tips for authoring fast-loading HTML pages
slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
---
+{{QuickLinksWithSubpages("/ru/docs/Learn/HTML/Howto")}}
+
Эти советы основаны на общих знаниях и экспериментах.
Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объёмом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости
diff --git a/files/ru/learn/html/howto/index.md b/files/ru/learn/html/howto/index.md
index ec8429419e8b74..312d23e86ff2eb 100644
--- a/files/ru/learn/html/howto/index.md
+++ b/files/ru/learn/html/howto/index.md
@@ -3,6 +3,8 @@ title: Использование HTML для решения общих зада
slug: Learn/HTML/Howto
---
+{{LearnSidebar}}
+
Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.
### Основы структурирования
diff --git a/files/ru/learn/html/howto/use_data_attributes/index.md b/files/ru/learn/html/howto/use_data_attributes/index.md
index 5b8d20ba1a6393..cdaf0e9786919a 100644
--- a/files/ru/learn/html/howto/use_data_attributes/index.md
+++ b/files/ru/learn/html/howto/use_data_attributes/index.md
@@ -3,6 +3,8 @@ title: Использование data-* атрибутов
slug: Learn/HTML/Howto/Use_data_attributes
---
+{{QuickLinksWithSubpages("/ru/docs/Learn/HTML/Howto")}}
+
[HTML5](/ru/docs/Web/Guide/HTML/HTML5) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. [`data-*` атрибуты](/ru/docs/Web/HTML/Global_attributes#data-*) позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.
## Синтаксис HTML
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/bbc-homepage.png b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/bbc-homepage.png
deleted file mode 100644
index 1611410da1f886..00000000000000
Binary files a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/bbc-homepage.png and /dev/null differ
diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/location-permission.png b/files/ru/learn/javascript/client-side_web_apis/introduction/location-permission.png
deleted file mode 100644
index 79f554c1c4fba2..00000000000000
Binary files a/files/ru/learn/javascript/client-side_web_apis/introduction/location-permission.png and /dev/null differ
diff --git a/files/ru/learn/server-side/apache_configuration_htaccess/index.md b/files/ru/learn/server-side/apache_configuration_htaccess/index.md
index ceed8e92a8d781..cacf8612c98b8b 100644
--- a/files/ru/learn/server-side/apache_configuration_htaccess/index.md
+++ b/files/ru/learn/server-side/apache_configuration_htaccess/index.md
@@ -3,6 +3,8 @@ title: .htaccess ( hypertext access )
slug: Learn/Server-side/Apache_Configuration_htaccess
---
+{{LearnSidebar}}
+
Название .htaccess происходит от "hypertext access". Это файл с расширением HTACCESS, который содержит различные настройки сервера apache. Он позволяет настраивать для текущей директории защиту паролем, редиректы и многое другое.
**Доступ к файлу**: файл htaccess может быть открыт для редактирования любым текстовым редактором, таким как стандартный блокнот Windows, Vim, Sublime Text или любым другим. Подсветка синтаксиса для файлов .htaccess встречается редко.
diff --git a/files/ru/learn/server-side/django/skeleton_website/index.md b/files/ru/learn/server-side/django/skeleton_website/index.md
index 6c1c9b5ddd012a..5389d82f2efa17 100644
--- a/files/ru/learn/server-side/django/skeleton_website/index.md
+++ b/files/ru/learn/server-side/django/skeleton_website/index.md
@@ -3,7 +3,7 @@ title: "Руководство по Django часть 2: создание ске
slug: Learn/Server-side/Django/skeleton_website
---
-{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
Это вторая статья из нашего [руководства по Django](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), которая показывает, как можно создать "скелет" сайта, как фундамент, на котором можно строить всё остальное: настройки, ссылки, модели, контроллеры и представления.
diff --git a/files/ru/learn/server-side/django/tutorial_local_library_website/index.md b/files/ru/learn/server-side/django/tutorial_local_library_website/index.md
index eaefce0df06207..9a8145145532d1 100644
--- a/files/ru/learn/server-side/django/tutorial_local_library_website/index.md
+++ b/files/ru/learn/server-side/django/tutorial_local_library_website/index.md
@@ -3,7 +3,7 @@ title: "Руководство по Django: сайт местной библио
slug: Learn/Server-side/Django/Tutorial_local_library_website
---
-{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
Первая статья в нашем цикле объясняет, что вы узнаете, и разбирает пример сайта "местная библиотека", который мы будем разрабатывать и улучшать в последующих статьях.
diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.md b/files/ru/learn/server-side/express_nodejs/introduction/index.md
index c35e1288f70f58..44925c6a53007e 100644
--- a/files/ru/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/ru/learn/server-side/express_nodejs/introduction/index.md
@@ -3,7 +3,7 @@ title: Express/Node introduction
slug: Learn/Server-side/Express_Nodejs/Introduction
---
-{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+{{LearnSidebar}}{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).
diff --git a/files/ru/mdn/at_ten/index.md b/files/ru/mdn/at_ten/index.md
index 7c4fc2e700bc9d..4a724b0e6cf32b 100644
--- a/files/ru/mdn/at_ten/index.md
+++ b/files/ru/mdn/at_ten/index.md
@@ -3,6 +3,8 @@ title: 10-летие MDN
slug: MDN/At_ten
---
+{{MDNSidebar}}
+
Празднуем 10-летие документирования Web.
## История MDN
diff --git a/files/ru/mdn/community/contributing/translated_content/index.md b/files/ru/mdn/community/contributing/translated_content/index.md
index f57debeb9859ea..e0f31283b26938 100644
--- a/files/ru/mdn/community/contributing/translated_content/index.md
+++ b/files/ru/mdn/community/contributing/translated_content/index.md
@@ -34,8 +34,8 @@ slug: MDN/Community/Contributing/Translated_content
### Корейский (`ko`)
-- Обсуждения: [Discord (`#korean`)](/discord), [Kakao Talk (`#MDN Korea`)](https://open.kakao.com/o/gdfG288c)
-- Активные участники: [hochan222](https://github.com/hochan222), [yechoi42](https://github.com/yechoi42), [cos18](https://github.com/cos18), [pje1740](https://github.com/pje1740), [wisedog](https://github.com/wisedog), [swimjiy](https://github.com/swimjiy), [jho2301](https://github.com/jho2301), [sunhpark42](https://github.com/sunhpark42), [1ilsang](https://github.com/1ilsang)
+- Обсуждения: [Discord (`#korean`)](/discord), [Google Groups (`yari-content-ko`)](https://groups.google.com/g/yari-content-ko)
+- Активные участники: [hochan222](https://github.com/hochan222), [yechoi42](https://github.com/yechoi42), [wisedog](https://github.com/wisedog), [sunhpark42](https://github.com/sunhpark42), [1ilsang](https://github.com/1ilsang)
### Русский (`ru`)
diff --git a/files/ru/mozilla/add-ons/index.md b/files/ru/mozilla/add-ons/index.md
index 0c270fe855c932..bb87152bc3eeb6 100644
--- a/files/ru/mozilla/add-ons/index.md
+++ b/files/ru/mozilla/add-ons/index.md
@@ -3,6 +3,8 @@ title: Дополнения
slug: Mozilla/Add-ons
---
+{{AddonSidebarMain}}
+
Дополнения добавляют новые функциональные возможности в [Gecko](/ru/docs/Mozilla/Gecko)-приложения, такие, как Firefox, SeaMonkey и Thunderbird. Есть два основных типа дополнений: [расширения](#Extensions), которые добавляют новые функции в приложение, и [темы](#Themes), изменяющие пользовательский интерфейс приложения.
> Для расширений и тем в Mozilla работает хранилище на [addons.mozilla.org](https://addons.mozilla.org/), также известное как AMO. Когда вы [помещаете дополнения на AMO](/en-US/Add-ons/Submitting_an_add-on_to_AMO), они рассматриваются, и после этого становятся доступны для пользователей. Вы не обязаны загружать свои дополнения в AMO, но если вы это сделаете, пользователи могут быть уверены в том, что они были предварительно проверены и будут знать, что ваше дополнение действительно полезно.
diff --git a/files/ru/mozilla/add-ons/webextensions/user_interface/popups/popup-shadow.png b/files/ru/mozilla/add-ons/webextensions/user_interface/popups/popup-shadow.png
deleted file mode 100644
index 687714628d9a3c..00000000000000
Binary files a/files/ru/mozilla/add-ons/webextensions/user_interface/popups/popup-shadow.png and /dev/null differ
diff --git a/files/ru/mozilla/index.md b/files/ru/mozilla/index.md
index 46d280dc9a0759..6852e91a99ac2a 100644
--- a/files/ru/mozilla/index.md
+++ b/files/ru/mozilla/index.md
@@ -3,6 +3,8 @@ title: Mozilla
slug: Mozilla
---
+{{FirefoxSidebar}}
+
Узнайте как скачать и выполнить сборку кода проектов Mozilla. А также полезные статьи о том как работает этот код, и как собирать дополнения для приложений Mozlla, и т.д.
{{LandingPageListSubpages}}
diff --git a/files/ru/web/accessibility/aria/aria_techniques/index.md b/files/ru/web/accessibility/aria/aria_techniques/index.md
index 5232f77cfefdd7..718ad9ae53a404 100644
--- a/files/ru/web/accessibility/aria/aria_techniques/index.md
+++ b/files/ru/web/accessibility/aria/aria_techniques/index.md
@@ -3,6 +3,8 @@ title: Использование ARIA
slug: Web/Accessibility/ARIA/ARIA_Techniques
---
+{{AccessibilitySidebar}}
+
## Роли
### [Роли виджета](/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role)
diff --git a/files/ru/web/accessibility/aria/index.md b/files/ru/web/accessibility/aria/index.md
index 990ddefaa77024..7a36221d0ddb20 100644
--- a/files/ru/web/accessibility/aria/index.md
+++ b/files/ru/web/accessibility/aria/index.md
@@ -3,6 +3,8 @@ title: ARIA
slug: Web/Accessibility/ARIA
---
+{{AccessibilitySidebar}}
+
Accessible Rich Internet Applications **(ARIA)** определяет способ сделать веб контент и веб приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями. Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.
ARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку, но особенно подходят для HTML. Атрибут `role` определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.
diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.md b/files/ru/web/accessibility/aria/roles/checkbox_role/index.md
index 7b7da7d806e8e0..9e04d4bcecc3fc 100644
--- a/files/ru/web/accessibility/aria/roles/checkbox_role/index.md
+++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.md
@@ -3,6 +3,8 @@ title: "ARIA: checkbox role"
slug: Web/Accessibility/ARIA/Roles/checkbox_role
---
+{{AccessibilitySidebar}}
+
[checkbox role](https://www.w3.org/TR/wai-aria-1.1/#checkbox) используется для переключаемых интерактивных элементов управления. Элементы, содержащие `role="checkbox"` также должны включать `aria-checked` атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.
```html
diff --git a/files/ru/web/accessibility/index.md b/files/ru/web/accessibility/index.md
index aa5fadb1fd174c..55a1ae7ef416f1 100644
--- a/files/ru/web/accessibility/index.md
+++ b/files/ru/web/accessibility/index.md
@@ -3,6 +3,8 @@ title: Доступность
slug: Web/Accessibility
---
+{{AccessibilitySidebar}}
+
Доступность (Accessibility, A11y в англоязычной среде) в веб-разработке — это обеспечение возможности использования сайтов как можно большим числом людей, включая тех, чьи способности как-либо ограничены.
Технологии облегчают жизнь многим людям. А людям с ограниченными возможностями технологии дают такие возможности, которые ранее им были недоступны. Доступность в контексте разработки подразумевает создание такого контента, пользоваться которым мог бы каждый, несмотря на индивидуальные физические или когнитивные способности и вне зависимости от того, как они получают доступ в сеть.
diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.md
index 31cdb7cce2978c..bad438d73ea5b7 100644
--- a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.md
+++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.md
@@ -3,6 +3,8 @@ title: Навигация с клавиатуры в JavaScript
slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
---
+{{AccessibilitySidebar}}
+
Как сделать для JavaScript-виджетов на основе span или div возможность навигации с клавиатуры.
### Обзор
diff --git a/files/ru/web/accessibility/mobile_accessibility_checklist/index.md b/files/ru/web/accessibility/mobile_accessibility_checklist/index.md
index 7dc1c8fc796550..b723ecde45e855 100644
--- a/files/ru/web/accessibility/mobile_accessibility_checklist/index.md
+++ b/files/ru/web/accessibility/mobile_accessibility_checklist/index.md
@@ -3,6 +3,8 @@ title: Контрольный список по мобильной доступ
slug: Web/Accessibility/Mobile_accessibility_checklist
---
+{{AccessibilitySidebar}}
+
Этот документ содержит краткий список требований доступности для разработчиков мобильных приложений. Он будет обновляться по мере появления новых техник и подходов.
## Цвет
diff --git a/files/ru/web/accessibility/understanding_wcag/keyboard/index.md b/files/ru/web/accessibility/understanding_wcag/keyboard/index.md
index c1d571410d8af8..98f1e3a75819d4 100644
--- a/files/ru/web/accessibility/understanding_wcag/keyboard/index.md
+++ b/files/ru/web/accessibility/understanding_wcag/keyboard/index.md
@@ -3,6 +3,8 @@ title: Русский
slug: Web/Accessibility/Understanding_WCAG/Keyboard
---
+{{AccessibilitySidebar}}
+
Чтобы веб-страница была полностью доступной, она должна быть управляема кем-то, кто использует только клавиатуру для доступа к ней и управления ею. Сюда входят пользователи программ чтения с экрана, но также могут быть пользователи, у которых есть проблемы с использованием указывающего устройства, такого как мышь или трекбол, или у которых мышь не работает в данный момент, или которые просто предпочитают использовать клавиатуру для ввода, когда это возможно.
Фокусируемые элементы должны иметь интерактивную семантику
diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md
index 0609721e82c708..ff16ea9e69ece7 100644
--- a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md
+++ b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md
@@ -3,6 +3,8 @@ title: Цветовой контраст
slug: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
---
+{{AccessibilitySidebar}}
+
## Описание проблемы
Цветовой контраст между фоном и содержимым переднего плана (обычно текстом) должен быть минимальным, чтобы обеспечить удобство чтения. Хорошо иметь крутой дизайн на своём сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.
diff --git a/files/ru/web/api/abortsignal/abort_event/index.md b/files/ru/web/api/abortsignal/abort_event/index.md
index 324ad17fb790c0..e36c15cd391fc4 100644
--- a/files/ru/web/api/abortsignal/abort_event/index.md
+++ b/files/ru/web/api/abortsignal/abort_event/index.md
@@ -3,7 +3,7 @@ title: abort
slug: Web/API/AbortSignal/abort_event
---
-{{SeeCompatTable}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
Событие **`abort`** из [Fetch API](/ru/docs/Web/API/Fetch_API) вызывается когда fetch запрос прерывается, т.е. с помощью {{domxref("AbortController.abort()")}}.
diff --git a/files/ru/web/api/beforeinstallpromptevent/index.md b/files/ru/web/api/beforeinstallpromptevent/index.md
index 8a378bed58b830..bed1226dc5412f 100644
--- a/files/ru/web/api/beforeinstallpromptevent/index.md
+++ b/files/ru/web/api/beforeinstallpromptevent/index.md
@@ -3,6 +3,8 @@ title: BeforeInstallPromptEvent
slug: Web/API/BeforeInstallPromptEvent
---
+{{APIRef}}{{SeeCompatTable}}{{Non-standard_header}}
+
Событие **`BeforeInstallPromptEvent`** запускается в обработчике {{domxref("Window.onbeforeinstallprompt")}} перед тем, как пользователю будет предложено "установить" веб-сайт на главный экран мобильного устройства.Этот интерфейс наследуется от интерфейса {{domxref("Event")}}.
{{InheritanceDiagram(700, 60, 20)}}
diff --git a/files/ru/web/api/beforeinstallpromptevent/prompt/index.md b/files/ru/web/api/beforeinstallpromptevent/prompt/index.md
index 38958ffbd6030c..3635ab36453716 100644
--- a/files/ru/web/api/beforeinstallpromptevent/prompt/index.md
+++ b/files/ru/web/api/beforeinstallpromptevent/prompt/index.md
@@ -3,6 +3,8 @@ title: BeforeInstallPromptEvent.prompt()
slug: Web/API/BeforeInstallPromptEvent/prompt
---
+{{APIRef}}{{SeeCompatTable}}{{Non-standard_header}}
+
Метод **`prompt()`** интерфейса {{domxref("BeforeInstallPromptEvent")}} позволяет разработчику показывать подсказку об установке в любое время по своему выбору.
## Синтаксис
diff --git a/files/ru/web/api/comment/index.md b/files/ru/web/api/comment/index.md
index 9863810fd69b52..88b184fbbfb7e6 100644
--- a/files/ru/web/api/comment/index.md
+++ b/files/ru/web/api/comment/index.md
@@ -3,6 +3,8 @@ title: Comment
slug: Web/API/Comment
---
+{{ ApiRef("DOM") }}
+
Интерфейс **`Comment`** представляет собой текстовые записи в разметке; хотя, в основном, они не отображаются, такие комментарии доступны для чтения в исходном коде. Комментарии представляются в HTML и XML как контент, заключённый между '`<!--`' и '`-->`'. В XML, последовательность символов '`--`' может не использоваться в комментариях.
{{InheritanceDiagram}}
diff --git a/files/ru/web/api/document/dir/index.md b/files/ru/web/api/document/dir/index.md
index 269afdbcead90a..962c69300cab76 100644
--- a/files/ru/web/api/document/dir/index.md
+++ b/files/ru/web/api/document/dir/index.md
@@ -1,23 +1,17 @@
---
-title: Document.dir
+title: "Document: свойство dir"
slug: Web/API/Document/dir
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
-{{ApiRef("")}}
+{{APIRef("HTML DOM")}}
-Свойство **`Document.dir`** является строкой {{domxref("DOMString")}} показывает направление текста на странице (слева направо или справа налево).
+Свойство **`Document.dir`** — это строка, представляющая направление текста документа: слева направо (по умолчанию) или справа налево. Возможные значения: `'rtl'` (справа налево) и `'ltr'` (слева направо).
-**Возможные значения:**
+## Значение
-- `'ltr'` - слева направо
-- `'rtl'` - справа налево
-
-## Синтаксис
-
-```js
-dirStr = document.dir;
-document.dir = dirStr;
-```
+Строка.
## Спецификации
@@ -27,6 +21,6 @@ document.dir = dirStr;
{{Compat}}
-## Связанные события
+## Смотрите также
-- <http://msdn.microsoft.com/en-us/library/ms533731.aspx>
+- Глобальный атрибут [`dir`](/ru/docs/Web/HTML/Global_attributes/dir)
diff --git a/files/ru/web/api/document/hidden/index.md b/files/ru/web/api/document/hidden/index.md
index c250e83bd813a4..16c6603214cdec 100644
--- a/files/ru/web/api/document/hidden/index.md
+++ b/files/ru/web/api/document/hidden/index.md
@@ -1,24 +1,25 @@
---
-title: Document.hidden
+title: "Document: свойство hidden"
slug: Web/API/Document/hidden
+l10n:
+ sourceCommit: 9b89bf6c59aa5f4dfe7e68b7e4fee42507d67cc4
---
-{{ ApiRef("DOM") }}
+{{APIRef("DOM")}}
-Доступное только для чтения свойство **`Document.hidden`** возвращает булево значение, показывающее является ли страница скрытой или нет.
+Доступное только для чтения свойство **`Document.hidden`** возвращает логическое значение, указывающее, считается ли страница скрытой или нет.
-## Синтаксис
+Свойство {{domxref("Document.visibilityState")}} предоставляет альтернативный способ определить, скрыта ли страница.
-```
-var boolean = document.hidden
-```
+## Значение
+
+Логическое значение, `true` если страница скрыта и `false` в противном случае.
-## Примеры
+## Пример
```js
-document.addEventListener("visibilitychange", function () {
+document.addEventListener("visibilitychange", () => {
console.log(document.hidden);
- // Modify behavior...
});
```
@@ -29,3 +30,7 @@ document.addEventListener("visibilitychange", function () {
## Совместимость с браузерами
{{Compat}}
+
+## Смотрите также
+
+- {{domxref("Document.visibilityState")}}
diff --git a/files/ru/web/api/document_object_model/examples/index.md b/files/ru/web/api/document_object_model/examples/index.md
index fc66607160fe7d..63cf4e7a25e4a6 100644
--- a/files/ru/web/api/document_object_model/examples/index.md
+++ b/files/ru/web/api/document_object_model/examples/index.md
@@ -3,6 +3,8 @@ title: Примеры использования DOM в web-разработке
slug: Web/API/Document_Object_Model/Examples
---
+{{DefaultAPISidebar("DOM")}}
+
В этой главе представлены более длинные примеры разработки веб-сайтов и XML с использованием DOM. По возможности, примеры используют общие API, трюки и шаблоны в JavaScript для управления объектом документа.
## Пример 1: высота и ширина
diff --git a/files/ru/web/api/document_object_model/index.md b/files/ru/web/api/document_object_model/index.md
index dc40cc967293e3..1677b88d2280db 100644
--- a/files/ru/web/api/document_object_model/index.md
+++ b/files/ru/web/api/document_object_model/index.md
@@ -3,6 +3,8 @@ title: Руководство по DOM
slug: Web/API/Document_Object_Model
---
+{{DefaultAPISidebar("DOM")}}
+
**Объектная Модель Документа (_DOM_)** является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.
DOM чаще всего используется в JavaScript, но не является его частью, поэтому иногда с DOM работают в других языках.
diff --git a/files/ru/web/api/document_object_model/introduction/index.md b/files/ru/web/api/document_object_model/introduction/index.md
index 47f050d5b827e1..a797b6ff1acf33 100644
--- a/files/ru/web/api/document_object_model/introduction/index.md
+++ b/files/ru/web/api/document_object_model/introduction/index.md
@@ -3,6 +3,8 @@ title: Введение
slug: Web/API/Document_Object_Model/Introduction
---
+{{DefaultAPISidebar("DOM")}}
+
Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) - что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.
## Что такое Объектная Модель Документа (DOM)?
diff --git a/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.md b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
index d474b8c76e7967..afe1e8312ef636 100644
--- a/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
+++ b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
@@ -3,6 +3,8 @@ title: Locating DOM elements using selectors
slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors
---
+{{DefaultAPISidebar("DOM")}}
+
Selectors API предоставляет методы, с помощью которых можно быстро и просто получить доступ к узлам [`Element`](/ru/docs/DOM/element) из DOM путём сопоставления с набором селекторов. Это намного быстрее, чем прошлые техники, где надо было, например, использовать цикл в JS-коде, чтобы найти конкретные элементы.
## Интерфейс NodeSelector (The NodeSelector interface)
diff --git a/files/ru/web/api/element/blur_event/index.md b/files/ru/web/api/element/blur_event/index.md
index 1798ea7388fdca..3ab369e6fccbf2 100644
--- a/files/ru/web/api/element/blur_event/index.md
+++ b/files/ru/web/api/element/blur_event/index.md
@@ -3,6 +3,8 @@ title: blur (event)
slug: Web/API/Element/blur_event
---
+{{APIRef}}
+
Событие `blur` вызывается когда элемент теряет фокус. Главное отличие между этим событием и [`focusout`](/ru/docs/Mozilla_event_reference/focusout) только в том что у последнего есть фаза всплытия.
## Основная информация
diff --git a/files/ru/web/api/element/focusin_event/index.md b/files/ru/web/api/element/focusin_event/index.md
index cccd9b47e924d1..20c9f593b0d876 100644
--- a/files/ru/web/api/element/focusin_event/index.md
+++ b/files/ru/web/api/element/focusin_event/index.md
@@ -3,6 +3,8 @@ title: focusin
slug: Web/API/Element/focusin_event
---
+{{APIRef}}
+
Событие focusin срабатывает, когда элемент получает фокус. Главное отличие от `focus` в том, что последний не всплывает.
## Общая информация
diff --git a/files/ru/web/api/element/focusout_event/index.md b/files/ru/web/api/element/focusout_event/index.md
index c7bb862c3c2b08..debebca3068158 100644
--- a/files/ru/web/api/element/focusout_event/index.md
+++ b/files/ru/web/api/element/focusout_event/index.md
@@ -3,6 +3,8 @@ title: focusout
slug: Web/API/Element/focusout_event
---
+{{APIRef}}
+
Событие `focusout` вызывается перед потерей элементом фокуса. Главное отличие между этим событием и [`blur`](</ru/docs/Mozilla_event_reference/blur_(event)>) в том, что у последнего нет фазы всплытия.
Основная информация
diff --git a/files/ru/web/api/element/hasattributes/index.md b/files/ru/web/api/element/hasattributes/index.md
index ad257a925e8f32..6f4535760894f8 100644
--- a/files/ru/web/api/element/hasattributes/index.md
+++ b/files/ru/web/api/element/hasattributes/index.md
@@ -1,42 +1,37 @@
---
-title: Element.hasAttributes()
+title: "Element: метод hasAttributes()"
slug: Web/API/Element/hasAttributes
+l10n:
+ sourceCommit: 990ab6637bb4d44f059597262cbf3c51abae79eb
---
-{{ApiRef("DOM")}}
+{{APIRef("DOM")}}
-Метод **`Element.hasAttributes()`** возвращает **Boolean** значение, указывая содержит данный элемент какие-либо атрибуты или нет.
+Метод **`hasAttributes()`** интерфейса {{domxref("Element")}} возвращает логическое значение, указывающее, есть ли у текущего элемента атрибуты или нет.
## Синтаксис
+```js-nolint
+hasAttributes()
```
-var result = element.hasAttributes();
-```
-- `result`
- - : содержит возвращаемое значение `true` или `false`.
+### Параметры
+
+Нет.
+
+### Возвращаемое значение
+
+Логическое значение.
## Пример
```js
-var foo = document.getElementById("foo");
+let foo = document.getElementById("foo");
if (foo.hasAttributes()) {
- // do something with 'foo.attributes'
+ // можно производить действия с 'foo.attributes'
}
```
-## Polyfill
-
-```js
-(function (prototype) {
- prototype.hasAttributes =
- prototype.hasAttributes ||
- function () {
- return this.attributes.length > 0;
- };
-})(Element.prototype);
-```
-
## Спецификации
{{Specifications}}
@@ -49,3 +44,7 @@ if (foo.hasAttributes()) {
- {{domxref("Element.attributes")}}
- {{domxref("Element.hasAttribute()")}}
+- {{domxref("Element.getAttribute()")}}
+- {{domxref("Element.setAttribute()")}}
+- {{domxref("Element.removeAttribute()")}}
+- {{domxref("Element.toggleAttribute()")}}
diff --git a/files/ru/web/api/element/id/index.md b/files/ru/web/api/element/id/index.md
index a8bcd3a19a69e3..1049ca96b3b04d 100644
--- a/files/ru/web/api/element/id/index.md
+++ b/files/ru/web/api/element/id/index.md
@@ -1,27 +1,24 @@
---
-title: Element.id
+title: "Element: свойство id"
slug: Web/API/Element/id
+l10n:
+ sourceCommit: ce85e3fb7865330e4ac2a6dad25db5cf5d27ea74
---
-{{ ApiRef("DOM") }}Свойство **`id`** представляет идентификатор элемента, отражая глобальный атрибут **[id](/ru/docs/Web/HTML/Global_attributes/id)**.
+{{APIRef("DOM")}}
-Если значение **`id`** не пустое, то оно должно быть уникально в документе.
+Свойство **`id`** интерфейса {{domxref("Element")}} представляет идентификатор элемента, отражающий глобальный атрибут
+[**`id`**](/ru/docs/Web/HTML/Global_attributes/id).
-**`id`** часто используется с {{domxref("document.getElementById", "getElementById")}}, чтобы получить нужный элемент. Часто применяют [ID как селектор](/ru/docs/Web/CSS/ID_selectors), для стилизации документа, с помощью [CSS](<r u/docs/Web/CSS>).
+Если значение `id` не является пустой строкой, то оно должно быть уникальным в документе.
-> **Примечание:** идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите [Чувствительность к регистру в классах и идентификаторов](/ru/docs/Case_Sensitivity_in_class_and_id_Names)).
+`id` часто используется вместе с методом {{domxref("Document.getElementById()", "getElementById()")}} для получения определённого элемента. Другой распространённый случай — использование идентификатора элемента [в качестве селектора](/ru/docs/Web/CSS/ID_selectors) при стилизации документа с помощью [CSS](/ru/docs/Web/CSS).
-## Синтаксис
+> **Примечание:** Идентификаторы чувствительны к регистру, но следует избегать создания идентификаторов, которые отличаются только регистром.
-```
-var idStr = element.id; // Получаем id.
-```
+## Значение
-```
-element.id = idStr; // Применяем id.
-```
-
-_`idStr`_ - идентификатор элемента
+Строка.
## Спецификации
diff --git a/files/ru/web/api/element/keypress_event/index.md b/files/ru/web/api/element/keypress_event/index.md
index a07744ba9fc4d0..459adecee8304f 100644
--- a/files/ru/web/api/element/keypress_event/index.md
+++ b/files/ru/web/api/element/keypress_event/index.md
@@ -3,6 +3,8 @@ title: keypress
slug: Web/API/Element/keypress_event
---
+{{APIRef}}
+
Событие `keypress` происходит когда нажимается символьная клавиша, то есть клавиша которая создаёт символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, or <kbd>Meta</kbd>.
## Общая информация
diff --git a/files/ru/web/api/element/mousedown_event/index.md b/files/ru/web/api/element/mousedown_event/index.md
index 716040c53989e8..a2cca277455f96 100644
--- a/files/ru/web/api/element/mousedown_event/index.md
+++ b/files/ru/web/api/element/mousedown_event/index.md
@@ -3,6 +3,8 @@ title: mousedown
slug: Web/API/Element/mousedown_event
---
+{{APIRef}}
+
Событие `mousedown` срабатывает, когда кнопка указывающего устройства (к примеру, мыши) нажата над элементом.
## Общая информация
diff --git a/files/ru/web/api/element/queryselectorall/index.md b/files/ru/web/api/element/queryselectorall/index.md
index 96e86d9964e951..d0bb36f9da66c5 100644
--- a/files/ru/web/api/element/queryselectorall/index.md
+++ b/files/ru/web/api/element/queryselectorall/index.md
@@ -3,6 +3,8 @@ title: Element.querySelectorAll()
slug: Web/API/Element/querySelectorAll
---
+{{APIRef("DOM")}}
+
## Общая информация
Возвращает статичный (не «живой») список типа [NodeList](/ru/docs/Web/API/NodeList), состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.
diff --git a/files/ru/web/api/element/shadowroot/index.md b/files/ru/web/api/element/shadowroot/index.md
index e813cf6b797402..06c747ce50b15d 100644
--- a/files/ru/web/api/element/shadowroot/index.md
+++ b/files/ru/web/api/element/shadowroot/index.md
@@ -3,7 +3,7 @@ title: Element.createShadowRoot()
slug: Web/API/Element/shadowRoot
---
-{{deprecated_header()}}
+{{APIRef("Shadow DOM")}}
Используйте `Element.createShadowRoot` чтобы создать экземпляр [shadow DOM](/ru/docs/Web/Web_Components/Using_shadow_DOM). После создания shadow DOM, он всегда будет привязан к существующему элементу. После создания shadowDOM, элемент к которому он привязан будет называться Теневой корень ({{glossary("shadow root","shadowRoot")}}) .
diff --git a/files/ru/web/api/element/transitionend_event/index.md b/files/ru/web/api/element/transitionend_event/index.md
index 1354640d0e05e2..88a5b83f638579 100644
--- a/files/ru/web/api/element/transitionend_event/index.md
+++ b/files/ru/web/api/element/transitionend_event/index.md
@@ -3,6 +3,8 @@ title: transitionend
slug: Web/API/Element/transitionend_event
---
+{{APIRef}}
+
Событие `transitionend` срабатывает, когда [CSS transition](/ru/docs/CSS/Using_CSS_transitions) закончил своё выполнение. В случае, когда анимация удаляется до её завершения(например, если [transition-property \[en-US\]](/ru/docs/Web/CSS/transition-property) удаляется), то событие не срабатывает.
## Общая информация
diff --git a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.md b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.md
index 9f35fb3f9bc0ae..b1bf93d1108480 100644
--- a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.md
+++ b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.md
@@ -3,6 +3,8 @@ title: Cross-global fetch usage
slug: Web/API/Fetch_API/Cross-global_fetch_usage
---
+{{DefaultAPISidebar("Fetch API")}}
+
Эта статья объясняет крайний случай, который случается с fetch (и потенциально с другими API, предоставляющими такой же способ получения данных). Когда cross-origin fetch, включающий относительный URL, инициируется из {{htmlelement("iframe")}}, относительный URL может использовать текущий глобальный location вместо того что задаётся в iframe.
## Крайний случай
diff --git a/files/ru/web/api/fetch_api/using_fetch/index.md b/files/ru/web/api/fetch_api/using_fetch/index.md
index 6e5249227d7d0d..5946d4ed744098 100644
--- a/files/ru/web/api/fetch_api/using_fetch/index.md
+++ b/files/ru/web/api/fetch_api/using_fetch/index.md
@@ -3,6 +3,8 @@ title: Использование Fetch
slug: Web/API/Fetch_API/Using_Fetch
---
+{{DefaultAPISidebar("Fetch API")}}
+
[Fetch API](/ru/docs/Web/API/Fetch_API) предоставляет интерфейс JavaScript для работы с запросами и ответами HTTP. Он также предоставляет глобальный метод {{domxref("GlobalFetch.fetch","fetch()")}}, который позволяет легко и логично получать ресурсы по сети асинхронно.
Подобная функциональность ранее достигалась с помощью {{domxref("XMLHttpRequest")}}. Fetch представляет собой лучшую альтернативу, которая может быть легко использована другими технологиями, такими как {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch также обеспечивает единое логическое место для определения других связанных с HTTP понятий, такие как CORS и расширения для HTTP.
diff --git a/files/ru/web/api/file_api/using_files_from_web_applications/index.md b/files/ru/web/api/file_api/using_files_from_web_applications/index.md
index d54cca67b964bd..0e4499c108b967 100644
--- a/files/ru/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/ru/web/api/file_api/using_files_from_web_applications/index.md
@@ -3,6 +3,8 @@ title: Использование файлов в веб приложениях
slug: Web/API/File_API/Using_files_from_web_applications
---
+{{DefaultAPISidebar("File API")}}
+
Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента {{ HTMLElement("input") }} или drag and drop.
Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) для подробностей.
diff --git a/files/ru/web/api/filereader/abort_event/index.md b/files/ru/web/api/filereader/abort_event/index.md
index c5eb0d2310072e..e84b672d754fc9 100644
--- a/files/ru/web/api/filereader/abort_event/index.md
+++ b/files/ru/web/api/filereader/abort_event/index.md
@@ -3,6 +3,8 @@ title: FileReader.onabort
slug: Web/API/FileReader/abort_event
---
+{{APIRef("File API")}}
+
Значением свойства **`FileReader.onabort`** является функция которая вызывается в случае если срабатывает событие [abort](/ru/docs/Web/Events/abort), например когда процесс чтения файла прерывается по каким-либо причинам.
## Синтаксис
diff --git a/files/ru/web/api/filereader/filereader/index.md b/files/ru/web/api/filereader/filereader/index.md
index d0df10d681b1ca..cdc9a640097b80 100644
--- a/files/ru/web/api/filereader/filereader/index.md
+++ b/files/ru/web/api/filereader/filereader/index.md
@@ -3,6 +3,8 @@ title: FileReader()
slug: Web/API/FileReader/FileReader
---
+{{APIRef("File API")}}
+
Конструктор **`FileReader()`** создаёт новый FileReader.
Дополнительные сведения об использовании `FileReader`, смотрите в разделе [Использование файлов из веб-приложений](/ru/docs/Web/API/File/Using_files_from_web_applications).
diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.md b/files/ru/web/api/history_api/working_with_the_history_api/index.md
index 9e435e062c8bdd..2b7bb4077f40e9 100644
--- a/files/ru/web/api/history_api/working_with_the_history_api/index.md
+++ b/files/ru/web/api/history_api/working_with_the_history_api/index.md
@@ -3,6 +3,8 @@ title: Работа с History API
slug: Web/API/History_API/Working_with_the_History_API
---
+{{DefaultAPISidebar("History API")}}
+
В HTML5 стали доступны методы {{DOMxRef("History.pushState","pushState()")}} и {{DOMxRef("History.replaceState","replaceState()")}} для добавления и изменения записей в истории. Эти методы работают в сочетании с событием {{domxref("Window.onpopstate","onpopstate")}}
## Добавление и изменение записей в истории
diff --git a/files/ru/web/api/htmlanchorelement/href/index.md b/files/ru/web/api/htmlanchorelement/href/index.md
index 390e637525290b..984bdffb58f864 100644
--- a/files/ru/web/api/htmlanchorelement/href/index.md
+++ b/files/ru/web/api/htmlanchorelement/href/index.md
@@ -1,25 +1,24 @@
---
-title: HTMLHyperlinkElementUtils.href
+title: "HTMLAnchorElement: свойство href"
slug: Web/API/HTMLAnchorElement/href
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
---
-{{ApiRef("URL API")}}
+{{APIRef("HTML DOM")}}
-Свойство **`HTMLHyperlinkElementUtils.href`** – это {{domxref("USVString")}}, содержащий URL целиком.
+Свойство **`HTMLAnchorElement.href`** — это {{Glossary("stringifier", "строковый преобразователь")}}, который возвращает строку, содержащую полный URL, и позволяет его изменять.
-## Синтаксис
+## Значение
-```
-string = object.href;
-object.href = string;
-```
+Строка.
## Примеры
```js
-// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href">
-var anchor = document.getElementById("myAnchor");
-var result = anchor.href; // Вернёт: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href'
+// Документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLAnchorElement">
+const anchor = document.getElementById("myAnchor");
+anchor.href; // вернёт 'https://developer.mozilla.org/en-US/HTMLAnchorElement'
```
## Спецификации
@@ -32,4 +31,4 @@ var result = anchor.href; // Вернёт: 'https://developer.mozilla.org/en-US/
## Смотрите также
-- Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.
+- Интерфейс {{domxref("HTMLAnchorElement")}}.
diff --git a/files/ru/web/api/htmlanchorelement/index.md b/files/ru/web/api/htmlanchorelement/index.md
index 42f6d47f04ba38..9600e96c4fe1bd 100644
--- a/files/ru/web/api/htmlanchorelement/index.md
+++ b/files/ru/web/api/htmlanchorelement/index.md
@@ -1,86 +1,82 @@
---
title: HTMLAnchorElement
slug: Web/API/HTMLAnchorElement
+l10n:
+ sourceCommit: ba5f28ab10ef1af48a55f363c8facc04a1f94479
---
{{APIRef("HTML DOM")}}
-Интерфейс **`HTMLAnchorElement`** представляет элементы гиперссылки и предоставляет специальные свойства и методы (помимо обычного объектного интерфейса {{domxref("HTMLElement")}}, который они наследуют) для управления макетом и представлением таких элементов.
-Этот интерфейс соответствует элементу \<a>; не путать с < link>, который представлен HTMLLinkElement.
-
-{{InheritanceDiagram(600, 120)}}
-
-## Свойства
-
-_Наследует свойства от его родителя, {{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}._
-
-- {{domxref("HTMLAnchorElement.accessKey")}}
- - : Это {{domxref("DOMString")}} отображает собой единичный символ, который переключает фокус ввода на гиперссылку.
-- {{domxref("HTMLAnchorElement.charset")}}
- - : Это {{domxref("DOMString")}} отображает кодировку символов связанного ресурса.
-- {{domxref("HTMLAnchorElement.coords")}}
- - : Это {{domxref("DOMString")}} отображает список координат разделённый запятыми.
-- {{domxref("HTMLAnchorElement.download")}} {{experimental_inline}}
- - : Это {{domxref("DOMString")}} показывать что связанный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет предполагаемое имя файла. Если имя не является допустимым именем файла нижележащей ОС, браузер будет адаптировать его. Значение это URL по схеме `http:`, `file:`, `data:` или даже `blob:` (созданный с помощью {{domxref("URL.createObjectURL")}}).
-- {{domxref("URLUtils.hash")}}
- - : Это {{domxref("DOMString")}} отображает фрагмент идентификатора, включая ведущий hash mark ('`#`'), если, указан в URL.
-- {{domxref("URLUtils.host")}}
- - : Это {{domxref("DOMString")}} отображает имя хоста порт (если это не порт по умолчанию) в указанном URL.
-- {{domxref("URLUtils.hostname")}}
- - : Это {{domxref("DOMString")}} отображает имя хоста в указанном URL.
-- {{domxref("URLUtils.href")}}
- - : Это {{domxref("DOMString")}} что отображает [`href`](/ru/docs/Web/HTML/Element/a#href) HTML атрибут, содержащий действительный URL связанного ресурса.
+Интерфейс **`HTMLAnchorElement`** представляет элементы гиперссылок и добавляет дополнительные свойства и методы (помимо общих свойств и методов интерфейса {{domxref("HTMLElement")}}, от которого он наследуется) для управления макетом и представлением таких элементов. Данный интерфейс соответствует элементу [`<a>`](/ru/docs/Web/HTML/Element/a) (не путать с [`<link>`](/ru/docs/Web/HTML/Element/link), который представлен [`HTMLLinkElement`](/ru/docs/Web/API/HTMLLinkElement)).
+
+{{InheritanceDiagram}}
+
+## Свойства экземпляра
+
+_Наследует свойства своего родителя {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLAnchorElement.attributionSrc")}} {{securecontext_inline}} {{experimental_inline}}
+ - : Позволяет читать и устанавливать HTML-атрибут [`attributionsrc`](/ru/docs/Web/HTML/Element/a#attributionsrc) элемента {{htmlelement("a")}}. Данный атрибут указывает браузеру добавить заголовок {{httpheader("Attribution-Reporting-Eligible")}} при переходе по гиперссылке. На сервере наличие данного заголовка интерпретируется как разрешение на установку заголовка {{httpheader("Attribution-Reporting-Register-Source")}} в ответе и регистрации источника атрибуции.
+- {{domxref("HTMLAnchorElement.download")}}
+ - : Строка, указывающая, что связанный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет предлагаемое имя файла. Если оно не является допустимым именем файла в используемой ОС, браузер преобразует его.
+- {{domxref("HTMLAnchorElement.hash")}}
+ - : Строка, представляющая якорь (включая ведущий знак решётки ('`#`')), если он присутствует в URL.
+- {{domxref("HTMLAnchorElement.host")}}
+ - : Строка, представляющая имя хоста и порт (если это не порт по умолчанию) в указанном URL.
+- {{domxref("HTMLAnchorElement.hostname")}}
+ - : Строка, представляющая имя хоста в указанном URL.
+- {{domxref("HTMLAnchorElement.href")}}
+ - : Строка, полученная из HTML-атрибута [`href`](/ru/docs/Web/HTML/Element/a#href), содержит корректный URL связанного ресурса.
- {{domxref("HTMLAnchorElement.hreflang")}}
- - : Это {{domxref("DOMString")}} что отображает HTML атрибут [`hreflang`](/ru/docs/Web/HTML/Element/a#hreflang), показывающий язык связанного ресурса.
-- {{domxref("HTMLAnchorElement.media")}}
- - : Это {{domxref("DOMString")}} что отображает [`media`](/ru/docs/Web/HTML/Element/a#media) HTML атрибут, с указанием предполагаемого media для связанного ресурса.
-- {{domxref("HTMLAnchorElement.name")}}
- - : Это {{domxref("DOMString")}} отображает имя якоря.
-- {{domxref("URLUtils.password")}}
- - : Это {{domxref("DOMString")}} содержащий пароль, указанный перед именем домена.
-- {{domxref("URLUtils.origin")}} {{readonlyInline}}
- - : Возвращает {{domxref("DOMString")}} содержащий источник, то есть его схему, его домен и его порт.
-- {{domxref("URLUtils.pathname")}}
- - : Это {{domxref("DOMString")}} отображающий составную часть пути имени, любого, ссылающегося URL.
-- {{domxref("URLUtils.port")}}
- - : Это {{domxref("DOMString")}} отображающий составную часть порта, любого, ссылающегося URL.
-- {{domxref("URLUtils.protocol")}}
- - : Is a {{domxref("DOMString")}} отображающий составную часть протокола, включая двоеточия ('`:`'), ссылающегося URL.
-- {{domxref("HTMLAnchorElement.referrer")}} {{experimental_inline}}
- - : Это {{domxref("DOMString")}} что отображает [`referrer`](/ru/docs/Web/HTML/Element/a#referrer) HTML атрибут, показывающий какой referrer используется, когда выбрано изображение.
+ - : Строка, отражающая HTML-атрибут [`hreflang`](/ru/docs/Web/HTML/Element/a#hreflang), содержит язык связанного ресурса.
+- {{domxref("HTMLAnchorElement.origin")}} {{ReadOnlyInline}}
+ - : Возвращает строку, содержащую источник URL, то есть его схему, домен и порт.
+- {{domxref("HTMLAnchorElement.password")}}
+ - : Строка, содержащая пароль, указанный перед именем домена.
+- {{domxref("HTMLAnchorElement.pathname")}}
+ - : Строка, содержащая путь к ресурсу, начиная с символа`'/'`, не включает параметры запроса и якорь.
+- {{domxref("HTMLAnchorElement.ping")}}
+ - : Разделённый пробелами список URL. При переходе по ссылке браузер будет отправлять запросы {{HTTPMethod("POST")}} с телом PING на эти URL-адреса.
+- {{domxref("HTMLAnchorElement.port")}}
+ - : Строка, представляющая порт, если он присутствует в URL.
+- {{domxref("HTMLAnchorElement.protocol")}}
+ - : Строка, представляющая протокол (включая двоеточия ('`:`')), в указанном URL.
+- {{domxref("HTMLAnchorElement.referrerPolicy")}}
+ - : Строка, отражающая HTML-атрибут [`referrerPolicy`](/ru/docs/Web/HTML/Element/a#referrerpolicy), указывает, какую информацию передавать ресурсу по ссылке.
- {{domxref("HTMLAnchorElement.rel")}}
- - : Это {{domxref("DOMString")}} что отображает [`rel`](/ru/docs/Web/HTML/Element/a#rel) HTML атрибут, уточняя взаимоотношения целевого объекта к связанному объекту.
-- {{domxref("HTMLAnchorElement.relList")}} {{readonlyInline}}
- - : Возвращает {{domxref("DOMTokenList")}} который отображает [`rel`](/ru/docs/Web/HTML/Element/a#rel) HTML атрибут, как список токенов.
-- {{domxref("HTMLAnchorElement.rev")}}
- - : Это {{domxref("DOMString")}} отображающий как [`rev`](/ru/docs/Web/HTML/Element/a#rev) HTML атрибут, уточняя взаимоотношения связанного объекта к целевому объекту
-- {{domxref("URLUtils.search")}}
- - : Это {{domxref("DOMString")}} отображающий искомый элемент, включая ведущий знак вопроса ('`?`'), если таковой имеется, в ссылающемся URL.
-- {{domxref("HTMLAnchorElement.shape")}}
- - : Это {{domxref("DOMString")}} отображающий вид активной области.
-- {{domxref("HTMLAnchorElement.tabindex")}}
- - : Это `long` содержащий положение элемента в порядке навигационного переключения для текущего документа.
+ - : Строка, отражающая HTML-атрибут [`rel`](/ru/docs/Web/HTML/Element/a#rel), указывает взаимоотношения целевого объекта к связанному.
+- {{domxref("HTMLAnchorElement.relList")}} {{ReadOnlyInline}}
+ - : Возвращает {{domxref("DOMTokenList")}}, который отражает HTML-атрибут [`rel`](/ru/docs/Web/HTML/Element/a#rel) в виде списка токенов.
+- {{domxref("HTMLAnchorElement.search")}}
+ - : Строка, представляющая строку запроса (включая ведущий знак вопроса ('`?`')), если она присутствует в URL.
- {{domxref("HTMLAnchorElement.target")}}
- - : Это {{domxref("DOMString")}} который отображает [`target`](/ru/docs/Web/HTML/Element/a#target) HTML атрибут, указывая где отображается связанный ресурс.
+ - : Строка, отражающая HTML-атрибут [`target`](/ru/docs/Web/HTML/Element/a#target), указывает где следует отобразить связанный ресурс.
- {{domxref("HTMLAnchorElement.text")}}
- - : Это {{domxref("DOMString")}} является синонимом {{domxref("Node.textContent")}} свойства.
+ - : Строка, является синонимом свойства {{domxref("Node.textContent")}}.
- {{domxref("HTMLAnchorElement.type")}}
- - : Это {{domxref("DOMString")}} которое отображает [`type`](/ru/docs/Web/HTML/Element/a#type) HTML атрибут, показывающий MIME тип связанного ресурса.
-- {{domxref("URLUtils.username")}}
- - : Это {{domxref("DOMString")}} содержащий имя пользователя определённое перед именем домена.
+ - : Строка, отражающая HTML-атрибут [`type`](/ru/docs/Web/HTML/Element/a#type), показывает MIME-тип связанного ресурса.
+- {{domxref("HTMLAnchorElement.username")}}
+ - : Строка, содержащая имя пользователя, указанное перед именем домена.
+
+### Устаревшие свойства
-## Методы
+- `HTMLAnchorElement.charset` {{deprecated_inline}}
+ - : Строка, представляющая кодировку символов связанного ресурса.
+- `HTMLAnchorElement.coords` {{deprecated_inline}}
+ - : Строка, представляющая список координат разделённый запятыми.
+- `HTMLAnchorElement.name` {{deprecated_inline}}
+ - : Строка, представляющая имя якоря.
+- `HTMLAnchorElement.rev` {{deprecated_inline}}
+ - : Строка, представляющая HTML-атрибут [`rev`](/ru/docs/Web/HTML/Element/a#rev), который определяет взаимоотношения связанного объекта к целевому.
+- `HTMLAnchorElement.shape` {{deprecated_inline}}
+ - : Строка, представляющая форму активной области.
-_Наследует методы от его родителя, {{domxref("HTMLElement")}},_ _и реализует те из {{domxref("URLUtils")}}._
+## Методы экземпляра
-- {{domxref("HTMLElement.blur()")}}
- - : Удаляет фокус клавиатуры из текущего элемента.
-- {{domxref("HTMLElement.focus()")}}
- - : Даёт фокус клавиатуры на текущий элемент.
-- {{domxref("URLUtils.toString()")}}
- - : Возвращает {{domxref("DOMString")}} содержащий весь URl. Это синоним {{domxref("URLUtils.href")}}, хотя он не может быть использован для изменения значения.
+_Наследует методы своего родителя {{domxref("HTMLElement")}}_.
-`blur()` и `focus()` методы наследуемые от {{domxref("HTMLElement")}} для HTML5, но они были определены в `HTMLAnchorElement` в DOM Level 2 HTML и более ранней спецификации.
+- {{domxref("HTMLAnchorElement.toString()")}}
+ - : Возвращает строку, содержащую весь URL. Это синоним {{domxref("HTMLAnchorElement.href")}}, но он не может быть использован для изменения значения.
## Спецификации
diff --git a/files/ru/web/api/htmlanchorelement/password/index.md b/files/ru/web/api/htmlanchorelement/password/index.md
index b71df7f6a1f033..fd10a306235188 100644
--- a/files/ru/web/api/htmlanchorelement/password/index.md
+++ b/files/ru/web/api/htmlanchorelement/password/index.md
@@ -1,27 +1,26 @@
---
-title: HTMLHyperlinkElementUtils.password
+title: "HTMLAnchorElement: свойство password"
slug: Web/API/HTMLAnchorElement/password
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
---
-{{ApiRef("URL API")}}
+{{APIRef("HTML DOM")}}
-Свойство **`HTMLHyperlinkElementUtils.password`** – это {{domxref("USVString")}}, содержащий пароль, указанный перед именем домена.
+Свойство **`HTMLAnchorElement.password`** — это строка, содержащая пароль, указанный перед именем домена.
-`password` игнорируется без предупреждения, если свойство [`username`](/ru/docs/Web/API/HTMLHyperlinkElementUtils/username) не установлено.
+Игнорируется, если свойство [`username`](/ru/docs/Web/API/HTMLAnchorElement/username) не установлено.
-## Синтаксис
+## Значение
-```
-string = object.password;
-object.password = string;
-```
+Строка.
## Примеры
```js
-// Допустим, что документ содержит элемент <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/ru/docs/HTMLHyperlinkElementUtils.username">
-var anchor = document.getElementByID("myAnchor");
-var result = anchor.password; // Вернёт: 'flabada'
+// Документ содержит элемент <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAnchorElement">
+const anchor = document.getElementByID("myAnchor");
+anchor.password; // вернёт 'flabada'
```
## Спецификации
@@ -34,4 +33,4 @@ var result = anchor.password; // Вернёт: 'flabada'
## Смотрите также
-- Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.
+- Интерфейс {{domxref("HTMLAnchorElement")}}.
diff --git a/files/ru/web/api/htmlanchorelement/pathname/index.md b/files/ru/web/api/htmlanchorelement/pathname/index.md
index 83c3b3daac5e68..f70f0b1551a0cb 100644
--- a/files/ru/web/api/htmlanchorelement/pathname/index.md
+++ b/files/ru/web/api/htmlanchorelement/pathname/index.md
@@ -1,25 +1,24 @@
---
-title: HTMLHyperlinkElementUtils.pathname
+title: "HTMLAnchorElement: свойство pathname"
slug: Web/API/HTMLAnchorElement/pathname
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
---
-{{ApiRef("URL API")}}
+{{APIRef("HTML DOM")}}
-Свойство **`HTMLHyperlinkElementUtils.pathname`** – это {{domxref("USVString")}}, содержащий первый `'/'` после хоста с последующим текстом URL.
+Свойство **`HTMLAnchorElement.pathname`** — это строка, начинающаяся с символа`'/'`, за которым следует путь к ресурсу, не включающий параметры запроса и якорь. Если пути нет, то будет возвращена пустая строка.
-## Синтаксис
+## Значение
-```
-string = object.pathname;
-object.pathname = string;
-```
+Строка.
## Примеры
```js
-// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/ru/docs/HTMLHyperlinkElementUtils.pathname">
-var anchor = document.getElementById("myAnchor");
-var result = anchor.pathname; // Вернёт: '/ru/docs/HTMLHyperlinkElementUtils.pathname'
+// Документ содержит элемент <a id="myAnchor" href="/en-US/docs/HTMLAnchorElement">
+const anchor = document.getElementById("myAnchor");
+anchor.pathname; // вернёт '/en-US/docs/HTMLAnchorElement'
```
## Спецификации
@@ -32,4 +31,4 @@ var result = anchor.pathname; // Вернёт: '/ru/docs/HTMLHyperlinkElementUti
## Смотрите также
-- Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.
+- Интерфейс {{domxref("HTMLAnchorElement")}}.
diff --git a/files/ru/web/api/htmlanchorelement/port/index.md b/files/ru/web/api/htmlanchorelement/port/index.md
index c76b209fc7a3d4..4e707b627d1efa 100644
--- a/files/ru/web/api/htmlanchorelement/port/index.md
+++ b/files/ru/web/api/htmlanchorelement/port/index.md
@@ -1,27 +1,26 @@
---
-title: HTMLHyperlinkElementUtils.port
+title: "HTMLAnchorElement: свойство port"
slug: Web/API/HTMLAnchorElement/port
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
---
-{{ApiRef("URL API")}}
+{{APIRef("HTML DOM")}}
-Свойство **`HTMLHyperlinkElementUtils.port`** – это {{domxref("USVString")}}, содержащий номер порта.
+Свойство **`HTMLAnchorElement.port`** — это строка, содержащая номер порта сервера, указанный в URL. Если в URL явно не указан номер порта, то значение этого свойства будет установлено в `''`.
-При значении `'' будет использоваться` порт по умолчанию для указанного протокола (не `0`).
+## Значение
-## Синтаксис
-
-```
-string = object.port;
-object.port = string;
-```
+Строка.
## Примеры
+### Получение номера порта из ссылки
+
```js
-// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/ru/docs/HTMLHyperlinkElementUtils.port">
-var anchor = document.getElementByID("myAnchor");
-var result = anchor.port; // Вернёт: '80'
+// Документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org:443/en-US/docs/HTMLAnchorElement">
+const anchor = document.getElementByID("myAnchor");
+anchor.port; // '443'
```
## Спецификации
@@ -34,4 +33,4 @@ var result = anchor.port; // Вернёт: '80'
## Смотрите также
-- Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.
+- Интерфейс {{domxref("HTMLAnchorElement")}}.
diff --git a/files/ru/web/api/htmlanchorelement/protocol/index.md b/files/ru/web/api/htmlanchorelement/protocol/index.md
index 9e6f144f8b8140..e1af0fe6f4527d 100644
--- a/files/ru/web/api/htmlanchorelement/protocol/index.md
+++ b/files/ru/web/api/htmlanchorelement/protocol/index.md
@@ -1,25 +1,26 @@
---
-title: HTMLHyperlinkElementUtils.protocol
+title: "HTMLAnchorElement: свойство protocol"
slug: Web/API/HTMLAnchorElement/protocol
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
---
-{{ApiRef("URL API")}}
+{{APIRef("HTML DOM")}}
-Свойство **`HTMLHyperlinkElementUtils.protocol`** – это {{domxref("USVString")}}, содержащий протокол URL включая `':'` в конце.
+Свойство **`HTMLAnchorElement.protocol`** — это строка, представляющая схему протокола URL, включая завершающий символ `':'`.
-## Синтаксис
+## Значение
-```
-string = object.protocol;
-object.protocol = string;
-```
+Строка.
## Примеры
+### Получение протокола из ссылки
+
```js
-// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol">
-var anchor = document.getElementByID("myAnchor");
-var result = anchor.protocol; // Вернёт: 'https:'
+// Документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLAnchorElement">
+const anchor = document.getElementByID("myAnchor");
+anchor.protocol; // 'https:'
```
## Спецификации
@@ -32,4 +33,4 @@ var result = anchor.protocol; // Вернёт: 'https:'
## Смотрите также
-- Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.
+- Интерфейс {{domxref("HTMLAnchorElement")}}.
diff --git a/files/ru/web/api/htmlelement/error_event/index.md b/files/ru/web/api/htmlelement/error_event/index.md
index 31a5939c3a1b45..c5f9b0c7a447f6 100644
--- a/files/ru/web/api/htmlelement/error_event/index.md
+++ b/files/ru/web/api/htmlelement/error_event/index.md
@@ -3,6 +3,8 @@ title: error
slug: Web/API/HTMLElement/error_event
---
+{{APIRef}}
+
Событие `error` возникает, когда произошла какая-либо ошибка. Точные обстоятельства могут быть различными, потому что события с этим именем используются множеством различных API.
## Общая информация
diff --git a/files/ru/web/api/htmlelement/hidden/index.md b/files/ru/web/api/htmlelement/hidden/index.md
index d4125873a38823..b3a2fbf8453f4a 100644
--- a/files/ru/web/api/htmlelement/hidden/index.md
+++ b/files/ru/web/api/htmlelement/hidden/index.md
@@ -3,6 +3,8 @@ title: HTMLElement.hidden
slug: Web/API/HTMLElement/hidden
---
+{{ APIRef("HTML DOM") }}
+
HTMLElement Свойство **`hidden`** является {{jsxref("Boolean")}} типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство совершенно отличается от использования CSS-свойства {{cssxref("display")}} , чтобы контролировать отображение элемента.Свойство `hidden` применимо ко всем режимам представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:
- Содержимое, которое не является особенно важным, но может быть необходимо позже
diff --git a/files/ru/web/api/htmlinputelement/invalid_event/index.md b/files/ru/web/api/htmlinputelement/invalid_event/index.md
index 5ddbbd67936e36..4e8bc3fd2a4a32 100644
--- a/files/ru/web/api/htmlinputelement/invalid_event/index.md
+++ b/files/ru/web/api/htmlinputelement/invalid_event/index.md
@@ -3,6 +3,8 @@ title: invalid
slug: Web/API/HTMLInputElement/invalid_event
---
+{{APIRef}}
+
Событие `invalid` запускается, когда отправляемый элемент был проверен, но его содержимое не удовлетворило установленные ограничения. Валидность отправляемого элемента проверяется до отправления формы или после вызова метода [`checkValidity()`](/ru/docs/HTML/Forms_in_HTML#Constraint_Validation_API)на элементе.
## Общая информация
diff --git a/files/ru/web/api/htmlmediaelement/seeking_event/index.md b/files/ru/web/api/htmlmediaelement/seeking_event/index.md
index c181c1e363e23c..6e3be509deed55 100644
--- a/files/ru/web/api/htmlmediaelement/seeking_event/index.md
+++ b/files/ru/web/api/htmlmediaelement/seeking_event/index.md
@@ -3,6 +3,8 @@ title: стримится
slug: Web/API/HTMLMediaElement/seeking_event
---
+{{APIRef("HTMLMediaElement")}}
+
Событие 'seeking' в случае, когда идёт подгрузка видео
## General info
diff --git a/files/ru/web/api/navigator/cookieenabled/index.md b/files/ru/web/api/navigator/cookieenabled/index.md
index fb771781ef0207..830b38e33d6e93 100644
--- a/files/ru/web/api/navigator/cookieenabled/index.md
+++ b/files/ru/web/api/navigator/cookieenabled/index.md
@@ -1,25 +1,28 @@
---
-title: Navigator.cookieEnabled
+title: "Navigator: свойство cookieEnabled"
slug: Web/API/Navigator/cookieEnabled
+l10n:
+ sourceCommit: 6acc0b4325c55fd77dc578c5bd7fde008cf26310
---
-{{ ApiRef("HTML DOM") }}
+{{APIRef("HTML DOM")}}
-Возвращает логическое значение (Boolean), показывающее включены ли куки или нет.(свойство только для чтения.
+Доступное только для чтения свойство `navigator.cookieEnabled` возвращает логическое значение, указывающее, доступна ли возможность использовать файлы cookie или нет.
-## Синтаксис
+## Значение
-```
-var cookieEnabled = navigator.cookieEnabled;
-```
+Логическое значение.
+
+> **Примечание:** Когда в браузере включена блокировка [сторонних файлов cookie](/ru/docs/Web/Privacy/Third-party_cookies) и `navigator.cookieEnabled` вызывается внутри стороннего `<iframe>`, оно вернёт `true` в Safari и IE (хотя попытка установить файл cookie не удастся). В Firefox и браузерах, основанных на Chromium, вернёт `false`.
-- `cookieEnabled` is a Boolean `true` or `false`.
+> **Примечание:** Веб-браузеры могут блокировать установку определенных файлов cookie в некоторых случаях. Например, браузеры на базе Chrome, а также некоторые экспериментальные версии Firefox не позволяют создавать файлы cookie с атрибутом [`SameSite=None`](/ru/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value), если они не создаются по протоколу HTTPS и с атрибутом `Secure`.
## Пример
```js
if (!navigator.cookieEnabled) {
- // пусть пользователь знает, что включённые куки делают страницу более полезной.
+ // браузер не поддерживает или блокирует установку файлов cookie
+}
```
## Спецификации
diff --git a/files/ru/web/api/navigator/donottrack/index.md b/files/ru/web/api/navigator/donottrack/index.md
index 1eaf7b5dd4f8a9..92a85fd6ed3041 100644
--- a/files/ru/web/api/navigator/donottrack/index.md
+++ b/files/ru/web/api/navigator/donottrack/index.md
@@ -1,35 +1,35 @@
---
-title: Navigator.doNotTrack
+title: "Navigator: свойство doNotTrack"
slug: Web/API/Navigator/doNotTrack
+l10n:
+ sourceCommit: 44cf523714745d626317192bfbe849b47144f3ab
---
-{{ ApiRef("HTML DOM") }}{{SeeCompatTable}}
+{{APIRef("HTML DOM")}} {{Deprecated_Header}} {{Non-standard_Header}}
-Возвращает настройки пользователя do-not-track. Будет "yes" если пользователь попросил не отслеживать его на веб-сайтах, контенте, рекламе.
+Свойство **`Navigator.doNotTrack`** возвращает настройку пользователя «Не отслеживать», которая указывает, просит ли пользователь веб-сайты и рекламодателей не использовать отслеживание.
-## Синтаксис
+Значение свойства отражает значение HTTP-заголовка {{HTTPHeader("DNT")}}, то есть `"1"`, `"0"` или `null`.
-```
-dnt = navigator.doNotTrack;
-```
+## Значение
-Значение отражает , что в заголовке do-not-track header, т.е. значения {"1", "0", "unspecified" }.Примечание: до Gecko 32, Gecko были использованы значения { "yes", "no", "unspecified"} ([bug 887703](https://bugzilla.mozilla.org/show_bug.cgi?id=887703)).
+Строка или `null`.
## Пример
-```
-dump(window.navigator.doNotTrack);
-// prints "1" if DNT is enabled; "0" if the user opted-in for tracking; otherwise this is "unspecified"
+```js
+console.log(navigator.doNotTrack);
+// выведет "1", если DNT включен; "0", если пользователь дал согласие на отслеживание; в противном случае null
```
## Спецификации
-[Tracking Preference Expression](http://www.w3.org/TR/tracking-dnt/) (Working проект) основан на более ранней версии этой спецификации, где `navigator.doNotTrack` **это** значение посланное заголовком `do-not-track`.
-
-## Смотрите также
-
-- [The Do Not Track field guide](/en/The_Do_Not_Track_Field_Guide)
+{{Specifications}}
## Совместимость с браузерами
{{Compat}}
+
+## Смотрите также
+
+- HTTP-заголовок {{HTTPHeader("DNT")}}
diff --git a/files/ru/web/api/node/appendchild/index.md b/files/ru/web/api/node/appendchild/index.md
index a4f76ce28e04a4..162d66e6c37055 100644
--- a/files/ru/web/api/node/appendchild/index.md
+++ b/files/ru/web/api/node/appendchild/index.md
@@ -3,6 +3,8 @@ title: Node.appendChild
slug: Web/API/Node/appendChild
---
+{{APIRef("DOM")}}
+
## Аннотация
**`Node.appendChild()`** добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция `appendChild()` перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).
diff --git a/files/ru/web/api/pointer_lock_api/index.md b/files/ru/web/api/pointer_lock_api/index.md
index a855ffb2f1eaa3..adadbe7f9de21a 100644
--- a/files/ru/web/api/pointer_lock_api/index.md
+++ b/files/ru/web/api/pointer_lock_api/index.md
@@ -3,6 +3,8 @@ title: Pointer Lock API
slug: Web/API/Pointer_Lock_API
---
+{{DefaultAPISidebar("Pointer Lock API")}}
+
**Pointer lock** **API**(прежнее название Mouse Lock API) обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора в окне. Это даёт вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу в окне браузера, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.
Более того, API полезно для любых приложений, которые используют данные мыши для управления движениями, вращения объектов и изменения записей. Например пользователь может управлять наклоном просто двигая мышь, не нажимая ни на какие кнопки. Сами кнопки освобождаются под другие задачи. Примерами могут послужить программы для просмотра карт или спутниковой съёмки.
diff --git a/files/ru/web/api/ui_events/keyboard_event_key_values/index.md b/files/ru/web/api/ui_events/keyboard_event_key_values/index.md
index 84975098d09339..dba8f7dc9316c2 100644
--- a/files/ru/web/api/ui_events/keyboard_event_key_values/index.md
+++ b/files/ru/web/api/ui_events/keyboard_event_key_values/index.md
@@ -3,6 +3,8 @@ title: Значения клавиш
slug: Web/API/UI_Events/Keyboard_event_key_values
---
+{{DefaultAPISidebar("UI Events")}}
+
В таблицах ниже перечислены стандартные значения различных категорий клавиш с объяснением того, для чего этот клавиша обычно используется. Соответствующие виртуальные коды клавиш для распространённых платформ включены там, где они доступны.
Узнайте, как использовать эти пары "ключ-значение" в JavaScript с помощью [KeyboardEvent.key](/docs/Web/API/KeyboardEvent/key)
diff --git a/files/ru/web/api/validitystate/patternmismatch/index.md b/files/ru/web/api/validitystate/patternmismatch/index.md
index 38ea050cb41b27..547d39bb34d29a 100644
--- a/files/ru/web/api/validitystate/patternmismatch/index.md
+++ b/files/ru/web/api/validitystate/patternmismatch/index.md
@@ -3,6 +3,8 @@ title: ValidityState.patternMismatch
slug: Web/API/ValidityState/patternMismatch
---
+{{APIRef("HTML DOM")}}
+
Доступное только для чтения свойство **`patternMismatch`** объекта **[`ValidityState`](/ru/docs/Web/API/ValidityState)** указывает, соответствует ли значение {{HTMLElement("input")}} шаблону, указанному в атрибуте [`pattern`](/ru/docs/Web/HTML/Attributes/pattern).
Если поле поддерживает атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern), это значит, что {{HTMLElement("input")}} содержит `type` {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}} или {{HTMLElement("input/search", "search")}} и в значении атрибута задано валидное регулярное выражение. Если значение не соответствует ограничениям, заданным в [`pattern`](/ru/docs/Web/HTML/Attributes/pattern), свойство `patternMismatch` будет `true`.
diff --git a/files/ru/web/api/validitystate/rangeoverflow/index.md b/files/ru/web/api/validitystate/rangeoverflow/index.md
index 4ffd57750cc109..224e820ee1afa6 100644
--- a/files/ru/web/api/validitystate/rangeoverflow/index.md
+++ b/files/ru/web/api/validitystate/rangeoverflow/index.md
@@ -3,6 +3,8 @@ title: ValidityState.rangeOverflow
slug: Web/API/ValidityState/rangeOverflow
---
+{{APIRef("HTML DOM")}}
+
Доступное только для чтения свойство **`rangeOverflow`** объекта **[`ValidityState`](/ru/docs/Web/API/ValidityState)** указывает, что после редактирования пользователем поля {{HTMLElement("input")}}, значение не соответствует ограничениям, установленным атрибутом [`max`](/ru/docs/Web/HTML/Attributes/max).
Если поле является числовым, включая типы {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} и заданно значение атрибута max, если содержимое поля не соответствует ограничению атрибута [`max`](/ru/docs/Web/HTML/Attributes/step), свойство `rangeOverflow` будет true.
diff --git a/files/ru/web/api/validitystate/rangeunderflow/index.md b/files/ru/web/api/validitystate/rangeunderflow/index.md
index 7a06a399a970de..58d5fca341530a 100644
--- a/files/ru/web/api/validitystate/rangeunderflow/index.md
+++ b/files/ru/web/api/validitystate/rangeunderflow/index.md
@@ -3,6 +3,8 @@ title: ValidityState.rangeUnderflow
slug: Web/API/ValidityState/rangeUnderflow
---
+{{APIRef("HTML DOM")}}
+
Доступное только для чтения свойство **`rangeUnderflow`** объекта **[`ValidityState`](/ru/docs/Web/API/ValidityState)** указывает, соответствует ли значение {{HTMLElement("input")}} после изменения пользователем ограничениям, установленным атрибутом [`min`](/ru/docs/Web/HTML/Attributes/min).
Если поле является числовым, включая типы {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} и заданно значение атрибута `min`, если содержимое поля не соответствует ограничению атрибута [`min`](/ru/docs/Web/HTML/Attributes/step), свойство `rangeUnderflow` будет true.
diff --git a/files/ru/web/api/validitystate/stepmismatch/index.md b/files/ru/web/api/validitystate/stepmismatch/index.md
index 533d56b8c5bb45..ac744ceae2bf82 100644
--- a/files/ru/web/api/validitystate/stepmismatch/index.md
+++ b/files/ru/web/api/validitystate/stepmismatch/index.md
@@ -3,6 +3,8 @@ title: ValidityState.stepMismatch
slug: Web/API/ValidityState/stepMismatch
---
+{{APIRef("HTML DOM")}}
+
Доступное только для чтения свойство **`stepMismatch`** объекта **[`ValidityState`](/ru/docs/Web/API/ValidityState)** указывает, соответствует ли значение {{HTMLElement("input")}} после изменения пользователем ограничениям, установленным атрибутом `step`.
Если поле является числовым, включая типы {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} и значение атрибута `step` не равно `any`, в случае не соответствия поля ограниченям атрибутов [`step`](/ru/docs/Web/HTML/Attributes/step) и [`min`](/ru/docs/Web/HTML/Attributes/min), то `stepMismatch` будет true. Если остаток от деления значения элемента формы за вычетом [`min`](/ru/docs/Web/HTML/Attributes/min) на [`step`](/ru/docs/Web/HTML/Attributes/step), (которое по умолчаиню равно 1) не равен нулю, то это является несоответствием.
diff --git a/files/ru/web/api/validitystate/toolong/index.md b/files/ru/web/api/validitystate/toolong/index.md
index 4086a82b2c16eb..9df5efa02c0f16 100644
--- a/files/ru/web/api/validitystate/toolong/index.md
+++ b/files/ru/web/api/validitystate/toolong/index.md
@@ -3,6 +3,8 @@ title: validityState.tooLong
slug: Web/API/ValidityState/tooLong
---
+{{APIRef("HTML DOM")}}
+
Доступное только для чтения свойство **`tooLong`** объекта **[`ValidityState`](/ru/docs/Web/API/ValidityState)** указывает, превышает ли длина значения {{HTMLElement("input")}} или {{HTMLElement("textarea")}}, после редактирования пользователем, заданный в атрибуте [`maxlength`](/ru/docs/Web/HTML/Attributes/maxlength) максимум.
## Спецификации
diff --git a/files/ru/web/api/validitystate/tooshort/index.md b/files/ru/web/api/validitystate/tooshort/index.md
index dd95360dc035f1..b30b4b83bd74c6 100644
--- a/files/ru/web/api/validitystate/tooshort/index.md
+++ b/files/ru/web/api/validitystate/tooshort/index.md
@@ -3,6 +3,8 @@ title: validityState.tooShort
slug: Web/API/ValidityState/tooShort
---
+{{APIRef("HTML DOM")}}
+
Доступное только для чтения свойство **`tooShort`** объекта **[`ValidityState`](/ru/docs/Web/API/ValidityState)** указывает, является ли длина изменённого пользователем значения {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("output")}}, {{HTMLElement("fieldset")}} или {{HTMLElement("textarea")}} меньше минимально допустимого значения, заданного в атрибуте `minlength`.
## Спецификации
diff --git a/files/ru/web/api/validitystate/typemismatch/index.md b/files/ru/web/api/validitystate/typemismatch/index.md
index 8fd4f692a91c7e..c416365857ed12 100644
--- a/files/ru/web/api/validitystate/typemismatch/index.md
+++ b/files/ru/web/api/validitystate/typemismatch/index.md
@@ -3,6 +3,8 @@ title: ValidityState.typeMismatch
slug: Web/API/ValidityState/typeMismatch
---
+{{APIRef("HTML DOM")}}
+
Доступное только для чтения свойство **`typeMismatch`** объекта **[`ValidityState`](/ru/docs/Web/API/ValidityState)** указывает, соответствует ли изменённое пользователем значение {{HTMLElement("input")}} ограничениям атрибута [`type`](/ru/docs/Web/HTML/Element/input#input_types).
Если атрибут `type` получает типы вроде {{HTMLElement("input/email", "email")}} или {{HTMLElement("input/url", "url")}}, а значение не соответствует ограничениям данного типа, свойство `typeMismatch` будет true.
diff --git a/files/ru/web/api/web_audio_api/index.md b/files/ru/web/api/web_audio_api/index.md
index 8a70ca9414e681..60d9123ae66d2a 100644
--- a/files/ru/web/api/web_audio_api/index.md
+++ b/files/ru/web/api/web_audio_api/index.md
@@ -3,6 +3,8 @@ title: Web Audio API
slug: Web/API/Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что даёт возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.
## Общие концепции и использование Web Audio
diff --git a/files/ru/web/api/web_audio_api/using_web_audio_api/voice-change-o-matic-graph.png b/files/ru/web/api/web_audio_api/using_web_audio_api/voice-change-o-matic-graph.png
deleted file mode 100644
index 8c1596bdef1ddd..00000000000000
Binary files a/files/ru/web/api/web_audio_api/using_web_audio_api/voice-change-o-matic-graph.png and /dev/null differ
diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index 8e592226c30847..9a58034a06c991 100644
--- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: Визуализация с Web Audio API
slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций. Эта статья объясняет, как это можно сделать, и приводит несколько базовых примеров использования.
> **Примечание:** вы можете найти рабочие примеры всех фрагментов кода в нашей демонстрации [автоизменения голоса](https://mdn.github.io/voice-change-o-matic/).
diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.md
index b55e573241bb05..5c14aee13dcfa6 100644
--- a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.md
+++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -3,6 +3,8 @@ title: Применение Web Speech API
slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API
---
+{{DefaultAPISidebar("Web Speech API")}}
+
Web Speech API предоставляет 2 основных типа функциональности — [распознавание речи пользователя](/ru/docs/Web/API/SpeechRecognition) и [речевое воспроизведение текста](/ru/docs/Web/API/SpeechSynthesis). Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья даёт краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.
## Распознавание речи
diff --git a/files/ru/web/api/web_storage_api/index.md b/files/ru/web/api/web_storage_api/index.md
index cc0b708f867fe1..c6a051c114468b 100644
--- a/files/ru/web/api/web_storage_api/index.md
+++ b/files/ru/web/api/web_storage_api/index.md
@@ -3,6 +3,8 @@ title: Веб хранилище (API)
slug: Web/API/Web_Storage_API
---
+{{DefaultAPISidebar("Web Storage API")}}
+
Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).
## Основы Веб хранилища и его использование
diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.md
index 547e144708bb51..f0cd520061050e 100644
--- a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -3,6 +3,8 @@ title: Использование Web Storage API
slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
---
+{{DefaultAPISidebar("Web Storage API")}}
+
Web Storage API предоставляет механизм, при помощи которого браузер может безопасно хранить пары ключей/значений в намного более интуитивной форме, чем используя cookies. Эта статья предоставляет пошаговое руководство о том, как использовать эту простую технологию.
## Основные концепции
diff --git a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.md
index 0509aba56a90a1..08ecbb677faff3 100644
--- a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.md
+++ b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.md
@@ -3,6 +3,8 @@ title: Алгоритм структурированного клонирова
slug: Web/API/Web_Workers_API/Structured_clone_algorithm
---
+{{DefaultAPISidebar("Web Workers API") }}
+
Алгоритм структурированного клонирования — это новый алгоритм, [определённый спецификацией HTML5](http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data) для сериализации комплексных JavaScript объектов. Он более функционален, чем [JSON](/en/JSON) в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.
Алгоритм, по существу, перебирает все поля оригинального объекта, дублируя значения каждого поля в новый объект. Если поле представляет из себя объект с собственными полями, то эти дочерние поля также перебираются рекурсивно, пока каждое поле и все дочерние поля не будут продублированы в новый объект.
diff --git a/files/ru/web/api/websockets_api/index.md b/files/ru/web/api/websockets_api/index.md
index 7a775966bd89df..b38c5dacae1012 100644
--- a/files/ru/web/api/websockets_api/index.md
+++ b/files/ru/web/api/websockets_api/index.md
@@ -3,6 +3,8 @@ title: WebSockets
slug: Web/API/WebSockets_API
---
+{{DefaultAPISidebar("WebSockets API")}}
+
**Веб-сокеты** это продвинутая технология, позволяющая открыть постоянное двунаправленное сетевое соединение между браузером пользователя и сервером. С помощью его API вы можете отправить сообщение на сервер и получить ответ без выполнения http запроса, причём этот процесс будет событийно-управляемым.
## Документация
diff --git a/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.md
index db6136e430b8f8..c1e07ce7a8cafb 100644
--- a/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -3,6 +3,8 @@ title: Написание клиентских приложений с помо
slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
---
+{{DefaultAPISidebar("WebSockets API")}}
+
Веб-сокеты - технология, которая позволяет открыть интерактивную сессию общения между браузером пользователя и сервером. Соединяясь через веб-сокеты, веб-приложения могут осуществлять взаимодействие в реальном времени вместо того, чтобы делать запросы к клиенту о входящих/исходящих изменениях.
> **Примечание:** У нас есть работающий пример чата, части кода из которого используются в статье. Пример будет доступен, когда инфраструктура сайта сможет должным образом поддерживать хостинг примеров с использованием веб-сокетов.
diff --git a/files/ru/web/api/atob/index.md b/files/ru/web/api/window/atob/index.md
similarity index 98%
rename from files/ru/web/api/atob/index.md
rename to files/ru/web/api/window/atob/index.md
index dca2d4d5dea120..11548ca3ef8468 100644
--- a/files/ru/web/api/atob/index.md
+++ b/files/ru/web/api/window/atob/index.md
@@ -1,6 +1,6 @@
---
title: Глобальная функция atob()
-slug: Web/API/atob
+slug: Web/API/Window/atob
---
{{APIRef("HTML DOM")}}
diff --git a/files/ru/web/api/btoa/index.md b/files/ru/web/api/window/btoa/index.md
similarity index 99%
rename from files/ru/web/api/btoa/index.md
rename to files/ru/web/api/window/btoa/index.md
index e6328a0edd45e1..94cb11cb07c8fb 100644
--- a/files/ru/web/api/btoa/index.md
+++ b/files/ru/web/api/window/btoa/index.md
@@ -1,6 +1,6 @@
---
title: WindowBase64.btoa()
-slug: Web/API/btoa
+slug: Web/API/Window/btoa
---
{{APIRef("HTML DOM")}}
diff --git a/files/ru/web/api/window/deviceorientation_event/index.md b/files/ru/web/api/window/deviceorientation_event/index.md
index 928547f2808ba2..7cc719e5b4d460 100644
--- a/files/ru/web/api/window/deviceorientation_event/index.md
+++ b/files/ru/web/api/window/deviceorientation_event/index.md
@@ -3,6 +3,8 @@ title: deviceorientation
slug: Web/API/Window/deviceorientation_event
---
+{{APIRef("Device Orientation Events")}}
+
Событие `deviceorientation` срабатывает, когда с сенсоров ориентации поступают новые данные о текущем положении устройства внутри Земной системы координат. Эти данные собираются с помощью магнитометра устройства. Более детальное объяснение дано в [Ориентация и объяснение данных движения](/ru/docs/DOM/Orientation_and_motion_data_explained).
## Общая информация
diff --git a/files/ru/web/api/window/gamepadconnected_event/index.md b/files/ru/web/api/window/gamepadconnected_event/index.md
index deaf17368f08ce..8b4e189dc3978d 100644
--- a/files/ru/web/api/window/gamepadconnected_event/index.md
+++ b/files/ru/web/api/window/gamepadconnected_event/index.md
@@ -3,6 +3,8 @@ title: gamepadconnected
slug: Web/API/Window/gamepadconnected_event
---
+{{APIRef}}
+
Событие `gamepadconnected` вызывается, когда браузер обнаруживает подключение геймпада или первое использование кнопки/стика.
## Основная информация
diff --git a/files/ru/web/api/window/gamepaddisconnected_event/index.md b/files/ru/web/api/window/gamepaddisconnected_event/index.md
index d2326383a3f66a..18a22c472dd790 100644
--- a/files/ru/web/api/window/gamepaddisconnected_event/index.md
+++ b/files/ru/web/api/window/gamepaddisconnected_event/index.md
@@ -3,6 +3,8 @@ title: gamepaddisconnected
slug: Web/API/Window/gamepaddisconnected_event
---
+{{APIRef}}
+
Событие `gampaddisconnected` вызывается, когда браузер обнаруживает, что геймпад был отключён.
## Основная информация
diff --git a/files/ru/web/api/window/getcomputedstyle/index.md b/files/ru/web/api/window/getcomputedstyle/index.md
index 2eb1c750daddc5..bbfaef49f1bbef 100644
--- a/files/ru/web/api/window/getcomputedstyle/index.md
+++ b/files/ru/web/api/window/getcomputedstyle/index.md
@@ -3,6 +3,8 @@ title: window.getComputedStyle()
slug: Web/API/Window/getComputedStyle
---
+{{APIRef("CSSOM")}}
+
Метод **`Window.getComputedStyle()`** возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.
## Синтаксис
diff --git a/files/ru/web/api/window/innerheight/index.md b/files/ru/web/api/window/innerheight/index.md
index 5a3efc5492c980..c762e1e8b6c73b 100644
--- a/files/ru/web/api/window/innerheight/index.md
+++ b/files/ru/web/api/window/innerheight/index.md
@@ -3,6 +3,8 @@ title: Window.innerHeight
slug: Web/API/Window/innerHeight
---
+{{APIRef}}
+
Высота (в пикселях) области просмотра окна браузера, включая, если отображается, горизонтальную полосу прокрутки.
## Синтаксис
diff --git a/files/ru/web/api/window/length/index.md b/files/ru/web/api/window/length/index.md
index 369cb8e8efc6da..011d345287a83c 100644
--- a/files/ru/web/api/window/length/index.md
+++ b/files/ru/web/api/window/length/index.md
@@ -1,30 +1,30 @@
---
-title: Window.length
+title: "Window: свойство length"
slug: Web/API/Window/length
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
---
-{{ ApiRef() }}
+{{APIRef}}
-## Сводка
+Возвращает число фреймов (как {{HTMLElement("frame")}} так и {{HTMLElement("iframe")}} ) в окне.
-Возвращает кол-во фреймов (например {{HTMLElement("frame")}} или {{HTMLElement("iframe")}}) в текущем окне.
+## Значение
-## Синтаксис
-
-```
-framesCount = window.length;
-```
-
-- `framesCount` - кол-во фреймов на странице.
+Число.
## Пример
```js
if (window.length) {
- // Этот документ содержит фреймы
+ // этот документ содержит фреймы
}
```
## Спецификации
{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
diff --git a/files/ru/web/api/window/load_event/index.md b/files/ru/web/api/window/load_event/index.md
index cd07cccd58c496..29fb0fb2b66ee7 100644
--- a/files/ru/web/api/window/load_event/index.md
+++ b/files/ru/web/api/window/load_event/index.md
@@ -3,6 +3,8 @@ title: load
slug: Web/API/Window/load_event
---
+{{APIRef}}
+
Событие `load` происходит когда ресурс и его зависимые ресурсы закончили загружаться.
## General info
diff --git a/files/ru/web/api/window/popstate_event/index.md b/files/ru/web/api/window/popstate_event/index.md
index 905682071b751d..de9c0986a1e580 100644
--- a/files/ru/web/api/window/popstate_event/index.md
+++ b/files/ru/web/api/window/popstate_event/index.md
@@ -3,6 +3,8 @@ title: popstate
slug: Web/API/Window/popstate_event
---
+{{APIRef("History API")}}
+
Событие `popstate` вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом [`history.pushState()`](<https://developer.mozilla.org/ru/docs/Web/API/History_API#The_pushState()_method>) или [`history.replaceState()`](<https://developer.mozilla.org/ru/docs/Web/API/History_API#The_replaceState()_method>), то состояние события `popstate` будет содержать `state` копии входящего в историю объекта
Обратите внимание, `history.pushState()` или `history.replaceState()` не вызывают событие `popstate`. Событие `popstate` будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперёд" или "Назад" (или при вызове `history.back()` или `history.forward()` из JavaScript).
diff --git a/files/ru/web/api/window/print/index.md b/files/ru/web/api/window/print/index.md
index 7851be9cf2cba3..d2e51ea77a844d 100644
--- a/files/ru/web/api/window/print/index.md
+++ b/files/ru/web/api/window/print/index.md
@@ -1,19 +1,31 @@
---
-title: Window.print()
+title: "Window: метод print()"
slug: Web/API/Window/print
+l10n:
+ sourceCommit: d303345cabd0cd9ab33fdfe51957479c8fb35424
---
-{{ ApiRef() }}
-
-## Описание
+{{APIRef}}
Открывает диалоговое окно для печати текущего документа.
+Если в момент вызова этой функции документ ещё загружается, то диалоговое окно печати откроется после загрузки документа.
+
+Этот метод будет заблокирован пока открыто диалоговое окно печати.
+
## Синтаксис
+```js-nolint
+print()
```
-window.print()
-```
+
+### Параметры
+
+Нет.
+
+### Возвращаемое значение
+
+Нет ({{jsxref("undefined")}}).
## Спецификации
@@ -25,6 +37,6 @@ window.print()
## Смотрите также
-- [Printing](/en/Printing)
-- {{ domxref("window.onbeforeprint") }}
-- {{ domxref("window.onafterprint") }}
+- [Печать документов](/ru/docs/Web/CSS/CSS_media_queries/Printing)
+- Событие {{ domxref("window.beforeprint_event", "beforeprint") }}
+- Событие {{ domxref("window.afterprint_event", "afterprint") }}
diff --git a/files/ru/web/api/window/storage_event/index.md b/files/ru/web/api/window/storage_event/index.md
index 493e8f74a15d12..a021c16e33fd92 100644
--- a/files/ru/web/api/window/storage_event/index.md
+++ b/files/ru/web/api/window/storage_event/index.md
@@ -3,6 +3,8 @@ title: storage
slug: Web/API/Window/storage_event
---
+{{APIRef}}
+
Событие `storage` сигнализирует, что данные в объектах `localStorage` или `sessionStorage` были изменены. Подробнее см. [Web Storage API](/ru/docs/Web/API/Web_Storage_API).
## Общая информация
diff --git a/files/ru/web/api/window/unhandledrejection_event/index.md b/files/ru/web/api/window/unhandledrejection_event/index.md
index 744ff5964434f1..cd268544281e49 100644
--- a/files/ru/web/api/window/unhandledrejection_event/index.md
+++ b/files/ru/web/api/window/unhandledrejection_event/index.md
@@ -3,6 +3,8 @@ title: unhandledrejection
slug: Web/API/Window/unhandledrejection_event
---
+{{APIRef("HTML DOM")}}
+
Событие **`unhandledrejection`** происходит, когда {{jsxref("Promise")}} завершён с ошибкой, но на данную ошибку не установлен обработчик.
<table class="properties">
diff --git a/files/ru/web/api/xmlhttprequest/loadstart_event/index.md b/files/ru/web/api/xmlhttprequest/loadstart_event/index.md
index ec9d3bb4621f13..d7411ce0c08778 100644
--- a/files/ru/web/api/xmlhttprequest/loadstart_event/index.md
+++ b/files/ru/web/api/xmlhttprequest/loadstart_event/index.md
@@ -3,6 +3,8 @@ title: loadstart
slug: Web/API/XMLHttpRequest/loadstart_event
---
+{{APIRef("XMLHttpRequest API")}}
+
Событие `loadstart` происходит, когда начинается загрузка.
## Общая информация
diff --git a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.md
index 03beef844c54ea..5d84a9b5cd1cc7 100644
--- a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.md
+++ b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.md
@@ -3,6 +3,8 @@ title: XMLHttpRequest()
slug: Web/API/XMLHttpRequest/XMLHttpRequest
---
+{{APIRef("XMLHttpRequest API")}}
+
#### XMLHttpRequest
Конструктор **`XMLHttpRequest()`** создаёт новый объект {{domxref("XMLHttpRequest")}}.
diff --git a/files/ru/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md b/files/ru/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
index 62dadb2f89735c..51d06f16f3e33e 100644
--- a/files/ru/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
+++ b/files/ru/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
@@ -3,6 +3,8 @@ title: Отправка и получение бинарных данных
slug: Web/API/XMLHttpRequest_API/Sending_and_Receiving_Binary_Data
---
+{{DefaultAPISidebar("XMLHttpRequest API")}}
+
## Получение бинарных данных используя JavaScript arrays
Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершён или не был успешным.
diff --git a/files/ru/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md b/files/ru/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
index fadd8807b16c3c..669aa657f6ad5a 100644
--- a/files/ru/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
+++ b/files/ru/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
@@ -3,6 +3,8 @@ title: Синхронные и асинхронные запросы
slug: Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests
---
+{{DefaultAPISidebar("XMLHttpRequest API")}}
+
`XMLHttpRequest` поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.
Синхронный запрос приводит к выполнению кода, который "блокирует" взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полностью выполнен, что существенно ухудшает отклик страницы.
diff --git a/files/ru/web/api/xmlhttprequest_api/using_formdata_objects/index.md b/files/ru/web/api/xmlhttprequest_api/using_formdata_objects/index.md
index 9dd7b57f931b45..c002e4e0b2ddfd 100644
--- a/files/ru/web/api/xmlhttprequest_api/using_formdata_objects/index.md
+++ b/files/ru/web/api/xmlhttprequest_api/using_formdata_objects/index.md
@@ -3,6 +3,8 @@ title: Использование Объектов FormData
slug: Web/API/XMLHttpRequest_API/Using_FormData_Objects
---
+{{DefaultAPISidebar("XMLHttpRequest API")}}
+
Объект [`FormData`](/ru/docs/Web/API/FormData) позволяет создать набор пар ключ/значение и передать их, используя `XMLHttpRequest.` Объект [`FormData`](/ru/docs/Web/API/FormData) предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом `{{domxref("HTMLFormElement.submit","submit()")}}` формы, с установленной кодировкой `enctype="multipart/form-data"`.
## Создание объекта FormData
diff --git a/files/ru/web/api/xmlserializer/index.md b/files/ru/web/api/xmlserializer/index.md
index ab9e87dc973fe3..c9cf803b3e6a97 100644
--- a/files/ru/web/api/xmlserializer/index.md
+++ b/files/ru/web/api/xmlserializer/index.md
@@ -3,6 +3,8 @@ title: XMLSerializer
slug: Web/API/XMLSerializer
---
+{{APIRef("XMLSerializer")}}
+
`XMLSerializer` может быть использован для конвертации веток DOM-дерева или дерева целиком в текст. `XMLSerializer` доступен непривилегированным скриптам.
Для получения более подробной информации об `XMLSerializer` в расширениях для браузера Firefox, пожалуйста обратитесь к документации [`nsIDOMSerializer`](/ru/docs/nsIDOMSerializer).
diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.md b/files/ru/web/css/@counter-style/additive-symbols/index.md
index c614a6a64505b1..c1763068cc15e9 100644
--- a/files/ru/web/css/@counter-style/additive-symbols/index.md
+++ b/files/ru/web/css/@counter-style/additive-symbols/index.md
@@ -3,6 +3,8 @@ title: additive-symbols
slug: Web/CSS/@counter-style/additive-symbols
---
+{{CSSRef}}
+
## Описание
Дескриптор аддитивных символов аналогичен дескриптору {{cssxref('symbols')}} и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора {{cssxref('system')}} _аддитивное_. Дескриптор `additive-symbols` определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.
diff --git a/files/ru/web/css/_colon_first/index.md b/files/ru/web/css/_colon_first/index.md
index 895a5db50646cc..d27c160d8657bd 100644
--- a/files/ru/web/css/_colon_first/index.md
+++ b/files/ru/web/css/_colon_first/index.md
@@ -3,6 +3,8 @@ title: ":first"
slug: Web/CSS/:first
---
+{{CSSRef}}
+
[CSS](/ru/docs/Web/CSS) [псевдокласс](/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B) **`:first`** используется с @-правилом {{cssxref("@page")}}, представляя первую страницу документа при печати.
```css
diff --git a/files/ru/web/css/_colon_focus-visible/index.md b/files/ru/web/css/_colon_focus-visible/index.md
index 1e52bec7e66e0e..5ca3ccf7423663 100644
--- a/files/ru/web/css/_colon_focus-visible/index.md
+++ b/files/ru/web/css/_colon_focus-visible/index.md
@@ -3,6 +3,8 @@ title: ":focus-visible"
slug: Web/CSS/:focus-visible
---
+{{CSSRef}}
+
Псевдокласс **`:focus-visible`** применяется, в то время как элемент соответствует псевдоклассу :focus, и UA ({{glossary("User Agent")}}) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.
Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).
diff --git a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index a2814b0cff604c..32600262e78c7e 100644
--- a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -36,7 +36,8 @@ slug: Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
.multi-bg-example {
width: 100%;
height: 400px;
- background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+ background-image: url(firefox.png), url(bubbles.png),
+ linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
diff --git a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.md
index 8dc69a03c9c505..8a72005ce30efe 100644
--- a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.md
+++ b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.md
@@ -3,6 +3,8 @@ title: Блоковая модель (боксовая модель, box model)
slug: Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model
---
+{{CSSRef}}
+
## Описание
В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Движок рендеринга в браузере определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.
diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index e224eae4a548a6..58cea765c32844 100644
--- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -3,6 +3,8 @@ title: Основные понятия Grid Layout
slug: Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
---
+{{CSSRef}}
+
[Грид-раскладка (CSS Grid Layout)](/ru/docs/Web/CSS/CSS_Grid_Layout) представляет собой двумерную систему сеток в CSS. Гриды подойдут и для верстки основных областей страницы, и небольших элементов пользовательского интерфейса. Эта статья даёт общее представление о грид-раскладке и новой терминологии, которая является частью спецификации CSS Grid Layout Level 1. Более подробно показанные возможности будут описаны описаны далее в руководстве.
## Что такое грид?
diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md b/files/ru/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
index dcc1c5800b33df..0d744b953ed080 100644
--- a/files/ru/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
+++ b/files/ru/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md
@@ -3,6 +3,8 @@ title: Выравнивание блоков в CSS разметке Grid
slug: Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout
---
+{{CSSRef}}
+
Если вы знакомы с [flexbox](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout), вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием [Box Alignment Level 3](https://drafts.csswg.org/css-align/). Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.
Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.
diff --git a/files/ru/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/ru/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
index 2c12fd550db004..51d7045a55ca94 100644
--- a/files/ru/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
+++ b/files/ru/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md
@@ -3,6 +3,8 @@ title: Расположение элементов по грид-линиям с
slug: Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement
---
+{{CSSRef}}
+
В статье, касавшейся [основных понятий позиционирования элементов с помощью гридов](/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout), мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.
Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда вы работаете с гридами, пронумерованные линии у вас есть **всегда**. Линии нумеруются и для колонок, и для строк, отсчёт начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.
diff --git a/files/ru/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md b/files/ru/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
index 946a6812d74fe9..d0623e7d5772e5 100644
--- a/files/ru/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
+++ b/files/ru/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
@@ -3,6 +3,8 @@ title: Layout using named grid lines
slug: Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines
---
+{{CSSRef}}
+
В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путём определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.
## Именование линий при определении сетки
diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.md b/files/ru/web/css/css_grid_layout/grid_template_areas/index.md
index 64eb1f53cbd05b..572025350fce56 100644
--- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.md
+++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.md
@@ -3,6 +3,8 @@ title: Шаблоны грид-областей
slug: Web/CSS/CSS_grid_layout/Grid_template_areas
---
+{{CSSRef}}
+
В [предыдущем обзоре](/ru/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда вы работаете с CSS Grid Layout, у вас всегда есть грид-линии, поэтому они - быстрый, прямой и надёжный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определённых грид-областей. Давайте рассмотрим, как он работает, и вы скоро поймёте, почему его называют методом ascii-искусства в концепции макетов на гридах!
## Имя для грид-области
diff --git a/files/ru/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md b/files/ru/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
index 9dec2c7f4aafc1..2eed34e80f20b8 100644
--- a/files/ru/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
+++ b/files/ru/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
@@ -3,6 +3,8 @@ title: CSS grids, logical values and writing modes
slug: Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes
---
+{{CSSRef}}
+
В этих руководствах я уже затронул важную особенность grid layout: поддержка различных режимов записи, встроенных в спецификацию. В этом руководстве мы рассмотрим эту особенность grid и других современных методов компоновки, немного узнав о режимах записи и логических и физических свойствах, когда мы это делаем.
## Логические и физические свойства и ценности
diff --git a/files/ru/web/css/css_grid_layout/index.md b/files/ru/web/css/css_grid_layout/index.md
index 9e5f3714d6131b..6f4cf94b7867c4 100644
--- a/files/ru/web/css/css_grid_layout/index.md
+++ b/files/ru/web/css/css_grid_layout/index.md
@@ -3,6 +3,8 @@ title: CSS Grid Layout
slug: Web/CSS/CSS_grid_layout
---
+{{CSSRef}}
+
**CSS Grid Layout** отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.
Как и таблицы (\<table>), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как и другие элементы при помощи CSS.
diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
index a5d10d67ca4569..107f54d3b60154 100644
--- a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
+++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
@@ -3,6 +3,8 @@ title: Realizing common layouts using CSS Grid Layout
slug: Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids
---
+{{CSSRef}}
+
Чтобы завершить набор руководств по CSS Grid Layout, я собираюсь пройтись по основным видам макетов, которые демонстрируют несколько различных методов, которые можно использовать при проектировании с помощью grid layout. Мы рассмотрим пример использования областей сетки-шаблона, типичную гибкую сеточную систему с 12 столбцами, а также список продуктов с использованием автоматического размещения. Как вы можете видеть из этого списка примеров, существует несколько способов достижения желаемого результата с помощью компоновки сетки. Выберите метод, который вы считаете наиболее полезным для решения проблем, которые вы решаете, и проектов, которые вам нужно реализовать.
## Адаптивный 1-3 колоночный макет с использованием `grid-template-areas`
diff --git a/files/ru/web/css/css_images/using_css_gradients/index.md b/files/ru/web/css/css_images/using_css_gradients/index.md
index b37ccf8d29832e..b070d2c14a62d5 100644
--- a/files/ru/web/css/css_images/using_css_gradients/index.md
+++ b/files/ru/web/css/css_images/using_css_gradients/index.md
@@ -354,7 +354,8 @@ div {
217deg,
rgba(255, 0, 0, 0.8),
rgba(255, 0, 0, 0) 70.71%
- ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+ ),
+ linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}
```
@@ -557,7 +558,8 @@ div {
circle at 93.3% 75%,
rgba(0, 255, 0, 0.5),
rgba(0, 255, 0, 0) 70.71%
- ) beige;
+ )
+ beige;
border-radius: 50%;
}
```
@@ -713,7 +715,8 @@ div {
rgba(75, 0, 130, 0.5) 240px,
rgba(238, 130, 238, 0.5) 280px,
rgba(255, 0, 0, 0.5) 300px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-190deg,
rgba(255, 0, 0, 0.5) 30px,
rgba(255, 153, 0, 0.5) 60px,
@@ -723,8 +726,18 @@ div {
rgba(75, 0, 130, 0.5) 180px,
rgba(238, 130, 238, 0.5) 210px,
rgba(255, 0, 0, 0.5) 230px
- ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
- 200px, blue 250px, indigo 300px, violet 350px, red 370px);
+ ),
+ repeating-linear-gradient(
+ 23deg,
+ red 50px,
+ orange 100px,
+ yellow 150px,
+ green 200px,
+ blue 250px,
+ indigo 300px,
+ violet 350px,
+ red 370px
+ );
}
```
@@ -761,7 +774,8 @@ div {
transparent 116px,
rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
0deg,
transparent,
transparent 50px,
@@ -775,18 +789,21 @@ div {
transparent 116px,
rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
rgba(143, 77, 63, 0.25) 5px,
rgba(143, 77, 63, 0.25) 10px
- ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
- 143,
- 77,
- 63,
- 0.25
- ) 5px, rgba(143, 77, 63, 0.25) 10px);
+ ),
+ repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 5px,
+ rgba(143, 77, 63, 0.25) 5px,
+ rgba(143, 77, 63, 0.25) 10px
+ );
background: repeating-linear-gradient(
90deg,
@@ -796,7 +813,8 @@ div {
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
0deg,
transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
@@ -804,16 +822,17 @@ div {
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-45deg,
transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px
- ), repeating-linear-gradient(45deg, transparent 0 5px, rgba(
- 143,
- 77,
- 63,
- 0.25
- ) 5px 10px);
+ ),
+ repeating-linear-gradient(
+ 45deg,
+ transparent 0 5px,
+ rgba(143, 77, 63, 0.25) 5px 10px
+ );
}
```
@@ -869,14 +888,16 @@ div {
rgba(0, 0, 0, 0.5) 15px,
rgba(255, 255, 255, 0.5) 15px,
rgba(255, 255, 255, 0.5) 30px
- ) top left no-repeat,
+ )
+ top left no-repeat,
repeating-radial-gradient(
ellipse at 20% 50%,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5) 10px,
rgba(255, 255, 255, 0.5) 10px,
rgba(255, 255, 255, 0.5) 20px
- ) top left no-repeat yellow;
+ )
+ top left no-repeat yellow;
background-size:
200px 200px,
150px 150px;
diff --git a/files/ru/web/css/css_positioned_layout/understanding_z-index/index.md b/files/ru/web/css/css_positioned_layout/understanding_z-index/index.md
index cc9f7020c89c6b..a9e5f7f20ede80 100644
--- a/files/ru/web/css/css_positioned_layout/understanding_z-index/index.md
+++ b/files/ru/web/css/css_positioned_layout/understanding_z-index/index.md
@@ -3,6 +3,8 @@ title: Понимание CSS z-index
slug: Web/CSS/CSS_positioned_layout/Understanding_z-index
---
+{{CSSRef}}
+
Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.{{cssxref("z-index")}} атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).
> _В CSS 2.1, позиция каждого блока была в трёх измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга._
diff --git a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
index 9e1a9f8622d4de..eb6375a44d8df9 100644
--- a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
+++ b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md
@@ -3,6 +3,8 @@ title: Контекст наложения (stacking context)
slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
---
+{{CSSRef}}
+
Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.
« [CSS](/ru/docs/CSS) « [Understanding CSS z-index](/ru/docs/CSS/Understanding_z-index)
diff --git a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
index af6b0299f4d727..7749f6efac7f65 100644
--- a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
+++ b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md
@@ -3,6 +3,8 @@ title: Stacking without z-index
slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index
---
+{{CSSRef}}
+
### Наложения без Z-индекса
Когда элементы не имеют z-индекса, они накладываются в таком порядке(снизу вверх):
diff --git a/files/ru/web/css/grid-area/index.md b/files/ru/web/css/grid-area/index.md
index cae7905f3390da..9710ee18995020 100644
--- a/files/ru/web/css/grid-area/index.md
+++ b/files/ru/web/css/grid-area/index.md
@@ -3,6 +3,8 @@ title: grid-area
slug: Web/CSS/grid-area
---
+{{CSSRef}}
+
CSS-свойство `grid-area` - это [сокращённая форма записи](/ru/docs/Web/CSS/Shorthand_properties) для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.
```css
diff --git a/files/ru/web/css/grid-auto-flow/index.md b/files/ru/web/css/grid-auto-flow/index.md
index b16f282fdbdf1c..e37c0ea56b09e8 100644
--- a/files/ru/web/css/grid-auto-flow/index.md
+++ b/files/ru/web/css/grid-auto-flow/index.md
@@ -3,6 +3,8 @@ title: grid-auto-flow
slug: Web/CSS/grid-auto-flow
---
+{{CSSRef}}
+
CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.
{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
diff --git a/files/ru/web/css/grid-row-start/index.md b/files/ru/web/css/grid-row-start/index.md
index 84f1764094437a..57938159b29025 100644
--- a/files/ru/web/css/grid-row-start/index.md
+++ b/files/ru/web/css/grid-row-start/index.md
@@ -3,6 +3,8 @@ title: grid-row-start
slug: Web/CSS/grid-row-start
---
+{{CSSRef}}
+
Свойство CSS **`grid-row-start`** определяет начальную позицию элемента грид в строке, добавляя линию, span или ничего (автоматически) к его расположению в сетке, тем самым определяя начальный край inline-элемента его {{glossary("grid areas", "grid area")}}.
{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}
diff --git a/files/ru/web/css/grid/index.md b/files/ru/web/css/grid/index.md
index 0d3780ef84dccf..f9ddc3ef52888f 100644
--- a/files/ru/web/css/grid/index.md
+++ b/files/ru/web/css/grid/index.md
@@ -3,6 +3,8 @@ title: grid
slug: Web/CSS/grid
---
+{{CSSRef}}
+
## Общие сведения
Свойство CSS **`grid`** является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.
diff --git a/files/ru/web/css/inheritance/index.md b/files/ru/web/css/inheritance/index.md
index bd9426c809370e..2a3a3b8c67ff4d 100644
--- a/files/ru/web/css/inheritance/index.md
+++ b/files/ru/web/css/inheritance/index.md
@@ -3,6 +3,8 @@ title: Наследование
slug: Web/CSS/Inheritance
---
+{{CSSRef}}
+
## Описание
Описание каждого [CSS-свойства](/ru/docs/Web/CSS/Reference) говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.
diff --git a/files/ru/web/css/initial_value/index.md b/files/ru/web/css/initial_value/index.md
index 1c4e6f580e288f..ac494b9a1db4cf 100644
--- a/files/ru/web/css/initial_value/index.md
+++ b/files/ru/web/css/initial_value/index.md
@@ -3,6 +3,8 @@ title: Начальное значение
slug: Web/CSS/initial_value
---
+{{CSSRef}}
+
## Описание
**Начальное значение**, данное в кратком описании [каждого CSS-свойства](/ru/docs/Web/CSS/Reference) имеет различное значение для [наследуемых и не наследуемых свойств](/ru/docs/Web/CSS/inheritance).
diff --git a/files/ru/web/css/layout_mode/index.md b/files/ru/web/css/layout_mode/index.md
index b83fd7756c0536..b88dac477c443f 100644
--- a/files/ru/web/css/layout_mode/index.md
+++ b/files/ru/web/css/layout_mode/index.md
@@ -3,6 +3,8 @@ title: Способ разметки
slug: Web/CSS/Layout_mode
---
+{{CSSRef}}
+
[CSS](/ru/docs/CSS) **способ разметки** (или _раскладки,_ или англ. _layout_) — это алгоритм определения позиции и размеров блоков, основанный на способе, которым они взаимодействуют с родственными блоками. Существует несколько типов разметки:
- _Обычная (Normal Flow)_ — все элементы являются частью обычного потока до тех пор, пока вы не переопределите это каким-либо образом. Обычный _layout_ включает в себя _блочную раскладку_, созданную для расположения отдельных блоков, таких как параграфы, и _линейную_, — для строчных элементов;
diff --git a/files/ru/web/css/minmax/index.md b/files/ru/web/css/minmax/index.md
index e2caa71bcc4e5c..9adb9f1ab85ba4 100644
--- a/files/ru/web/css/minmax/index.md
+++ b/files/ru/web/css/minmax/index.md
@@ -3,6 +3,8 @@ title: minmax()
slug: Web/CSS/minmax
---
+{{CSSRef}}
+
**`minmax()`** это [CSS](/ru/docs/Web/CSS) функция, определяющая диапазон размеров, который больше или равен _min_ и меньше или равен _max_. Используется в [CSS Grids](/ru/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes).
```css
diff --git a/files/ru/web/css/reference/index.md b/files/ru/web/css/reference/index.md
index 55689e261b1770..76c5611da61f19 100644
--- a/files/ru/web/css/reference/index.md
+++ b/files/ru/web/css/reference/index.md
@@ -3,6 +3,8 @@ title: Руководство по CSS
slug: Web/CSS/Reference
---
+{{CSSRef}}
+
Данный _справочник по CSS_ перечисляет все стандартные свойства, [псевдоклассы](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементы](/ru/docs/Web/CSS/Pseudo-elements), [@-правила](/ru/docs/Web/CSS/At-rule), единицы измерения и селекторы [CSS](/ru/docs/CSS) в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства [CSS3](/ru/docs/Web/CSS/CSS3). Также включает в себя краткое руководство [DOM-CSS / CSSOM](/ru/docs/Web/CSS/Reference#DOM_CSS).
Заметьте, что определения CSS-правил полностью (ASCII) [текста-ориентированы](https://www.w3.org/TR/css-syntax-3/#intro), в то время как определения правил DOM-CSS / CSSOM [объектно-ориентированы](https://www.w3.org/TR/cssom/#introduction).
diff --git a/files/ru/web/css/selector_list/index.md b/files/ru/web/css/selector_list/index.md
index a764ae903aa827..fef326bc807920 100644
--- a/files/ru/web/css/selector_list/index.md
+++ b/files/ru/web/css/selector_list/index.md
@@ -1,21 +1,41 @@
---
title: Список селекторов
slug: Web/CSS/Selector_list
+l10n:
+ sourceCommit: be7a098e6af7b820c06a2d5169a9221ee2065e82
---
{{CSSRef}}
-CSS **список селекторов** (`,`) выбирает все соответствующие ноды.
+**Список селекторов** CSS (`,`) выбирает все соответствующие ноды. Он состоит из набора селекторов разделённых запятыми.
+
+## Описание
+
+Когда селекторы используют одинаковые CSS-правила, они могут быть сгруппированы в разделённый запятыми список. Списки селекторов также могут передаваться в качестве параметра в некоторые функциональные CSS-псевдоклассы. Можно использовать пробельный символ перед и/или после запятой.
+
+Следующие три записи эквивалентны:
+
+```css
+span {
+ border: red 2px solid;
+}
+div {
+ border: red 2px solid;
+}
+```
```css
-/* Выбирает все соответствующие элементы */
span,
div {
border: red 2px solid;
}
```
-Для уменьшения размеры таблицы стилей, можно использовать разделяемый запятой список селекторов.
+```css
+:is(span, div) {
+ border: red 2px solid;
+}
+```
## Синтаксис
@@ -25,42 +45,45 @@ element, element, element { свойства стиля }
## Примеры
-### Группирование на одной линии
+Группировка селекторов в списки при применении одинаковых стилей к разным элементам позволяет одновременно как улучшить консистентность, так и уменьшить размер таблицы стилей.
-Группирование селекторов списком, разделённым запятой, на одной строк.
+### Группирование на одной строке
-```css
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+Группирование селекторов списком, разделённым запятыми, на одной строке.
+
+```css-nolint
+h1, h2, h3, h4, h5, h6 {
font-family: helvetica;
}
```
-### Мультистрочное группирование
+### Многострочное группирование
-Группирование селекторов списком, разделённым запятой, на нескольких строках.
+Группирование селекторов списком, разделённым запятыми, на нескольких строках.
```css
#main,
.content,
-article {
+h1 + p {
font-size: 1.1em;
}
```
-### Невалидные списки селекторов
+### Валидные и невалидные списки селекторов
+
+Невалидный селектор ничему не соответствует. Когда список селекторов содержит хотя бы один невалидный селектор, весь блок стилей будет проигнорирован. Исключениями из этого правила являются псевдоклассы {{CSSxRef(":is", ":is()")}} и {{CSSxRef(":where", ":where()")}} принимающие [прощающий список селекторов](#прощающий_список_селекторов).
+
+### Невалидный список селекторов
-Недостатком использования списков селекторов является то, что они не являются эквивалентными:
+Недостатком использования списка селекторов является то, что один неподдерживаемый селектор в списке селекторов делает недействительным всё правило.
+
+Рассмотрим два следующих набора CSS-правил:
```css
h1 {
font-family: sans-serif;
}
-h2:maybe-unsupported {
+h2:invalid-pseudo {
font-family: sans-serif;
}
h3 {
@@ -70,15 +93,19 @@ h3 {
```css
h1,
-h2:maybe-unsupported,
+h2:invalid-pseudo,
h3 {
font-family: sans-serif;
}
```
-Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.
+Они не эквивалентны. В первом наборе правил стили будут применены к элементам `h1` и `h3`, но правило`h2:invalid-pseudo` будет проигнорировано. Во втором наборе все правила будут проигнорированы, потому что один селектор в списке невалиден. Из-за этого ни один стиль не будет применён к элементам `h1` и `h3`, так как если любой селектор в списке селекторов невалиден, весь блок стилей будет проигнорирован.
+
+### Прощающий список селекторов
+
+Способом исправить проблему [невалидного списка селекторов](#невалидный_список_селекторов) является использование псевдоклассов {{CSSxRef(":is", ":is()")}} и {{CSSxRef(":where", ":where()")}}, которые принимают прощающий список селекторов. Каждый селектор в прощающем списке анализируется индивидуально. Поэтому любые невалидные селекторы в списке игнорируются и используются оставшиеся валидные.
-Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счёт этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.
+Продолжая предыдущий пример, следующие два набора CSS-правил теперь эквивалентны:
```css
h1 {
@@ -98,6 +125,20 @@ h3 {
}
```
+Разница между `:is()` и `:where()` в том, что специфичность `:is()` равна его наиболее специфичному аргументу, тогда как селектор `:where()` и прощающий список селекторов в качестве его параметра не добавляют какой-либо специфичности.
+
+### Список относительных селекторов
+
+Таким списком является список [относительных селекторов](/ru/docs/Web/CSS/CSS_selectors/Selector_structure#относительный_селектор) разделённых запятыми и начинающихся с явного или предполагаемого комбинатора.
+
+```css
+h2:has(+ p, + ul.red) {
+ font-style: italic;
+}
+```
+
+В примере выше курсив будет применён к любому заголовку `h2` за которым сразу же следует `<p>` или `<ul class="red">`. Обратите внимание на то, что псевдоэлементы и селектор `:has()` не валидны внутри списка относительных селекторов [`:has()`](/ru/docs/Web/CSS/:has).
+
## Спецификации
{{Specifications}}
@@ -108,4 +149,7 @@ h3 {
## Смотрите также
-- The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} pseudo-classes, which don't have the legacy mistake that is selector list invalidation.
+- Псевдоклассы [`:is()`](/ru/docs/Web/CSS/:is) и [`:where()`](/ru/docs/Web/CSS/:where) принимающие прощающий список селекторов.
+- Псевдокласс [`:not()`](/ru/docs/Web/CSS/:not) принимающий список обычных селекторов.
+- Псевдокласс [`:has()`](/ru/docs/Web/CSS/:has) принимающий список относительных селекторов.
+- [CSS-селекторы](/ru/docs/Web/CSS/CSS_selectors)
diff --git a/files/ru/web/css/transition-duration/index.md b/files/ru/web/css/transition-duration/index.md
index 3b110bf2a44b43..88c755ca7f5656 100644
--- a/files/ru/web/css/transition-duration/index.md
+++ b/files/ru/web/css/transition-duration/index.md
@@ -129,8 +129,8 @@ var intervalID = window.setInterval(updateTransition, 7000);
left: 0px;
top: 0px;
position: absolute;
- -webkit-transition-property: width height background-color font-size left
- top -webkit-transform color;
+ -webkit-transition-property: width height background-color font-size left top -webkit-transform
+ color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
transition-property: width height background-color font-size left top
@@ -149,8 +149,8 @@ var intervalID = window.setInterval(updateTransition, 7000);
left: 150px;
top: 25px;
position: absolute;
- -webkit-transition-property: width height background-color font-size left
- top -webkit-transform transform color;
+ -webkit-transition-property: width height background-color font-size left top -webkit-transform
+ transform color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
transition-property: width height background-color font-size left top
diff --git a/files/ru/web/css/using_css_custom_properties/index.md b/files/ru/web/css/using_css_custom_properties/index.md
index 93b517d6072ba0..49b16555084731 100644
--- a/files/ru/web/css/using_css_custom_properties/index.md
+++ b/files/ru/web/css/using_css_custom_properties/index.md
@@ -3,7 +3,7 @@ title: Использование переменных в CSS
slug: Web/CSS/Using_CSS_custom_properties
---
-{{SeeCompatTable}}
+{{CSSRef}}
**CSS переменные** (**пользовательские CSS-свойства**) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. **`--main-color: black;`**) и доступны через функцию [var()](/ru/docs/Web/CSS/var) (например. `color: var(--main-color);`) .
diff --git a/files/ru/web/html/attributes/crossorigin/index.md b/files/ru/web/html/attributes/crossorigin/index.md
index f9224767decf18..d9cbdbe3d03632 100644
--- a/files/ru/web/html/attributes/crossorigin/index.md
+++ b/files/ru/web/html/attributes/crossorigin/index.md
@@ -3,6 +3,8 @@ title: CORS settings attributes
slug: Web/HTML/Attributes/crossorigin
---
+{{HTMLSidebar}}
+
В HTML5 некоторые теги поддерживают [CORS](/ru/docs/HTTP/Access_control_CORS), например {{ HTMLElement("img") }} или {{ HTMLElement("video") }}, имеют атрибут `crossorigin` (`crossOrigin` свойство), которое позволяет настроить CORS запросы для данных получаемых элементом. Эти атрибуты могут иметь следующие значения:
| Ключевое слово | Описание |
diff --git a/files/ru/web/html/attributes/index.md b/files/ru/web/html/attributes/index.md
index 294f948b38b557..f4bead40abfdcb 100644
--- a/files/ru/web/html/attributes/index.md
+++ b/files/ru/web/html/attributes/index.md
@@ -3,6 +3,8 @@ title: Справочная информация по HTML атрибутам
slug: Web/HTML/Attributes
---
+{{HTMLSidebar("Attributes")}}
+
У элементов HTML есть **атрибуты**; это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей.
## Список атрибутов
diff --git a/files/ru/web/html/constraint_validation/index.md b/files/ru/web/html/constraint_validation/index.md
index 4a92a5e78b6a57..f89b55fd92a811 100644
--- a/files/ru/web/html/constraint_validation/index.md
+++ b/files/ru/web/html/constraint_validation/index.md
@@ -3,6 +3,8 @@ title: Валидация ограничений
slug: Web/HTML/Constraint_validation
---
+{{HTMLSidebar}}
+
Создание веб-форм всегда было сложной задачей. Хотя сверстать саму форму достаточно просто, проверить, имеет ли каждое поле валидное значение — сложнее, а информирование пользователя о проблеме может стать настоящей головной болью. [HTML5](/ru/docs/Web/Guide/HTML/HTML5) представил для форм новый механизм: он добавляет элементу {{ HTMLElement("input") }} новые семантические типы и _constraint validation_, чтобы облегчить проверку содержимого на стороне клиента. С помощью новых атрибутов основные ограничения могут быть проверены без использования JavaScript; более сложные ограничения могут быть проверены с помощью [Constraint validation API](/ru/docs/Web/API/Constraint_validation).
Базовое введение в эти концепции с примерами можно найти в разделе [Валидация форм на стороне клиента](/ru/docs/Learn/Forms/Form_validation).
diff --git a/files/ru/web/html/content_categories/index.md b/files/ru/web/html/content_categories/index.md
index 7120e7000a7f36..5f04b55dd0d754 100644
--- a/files/ru/web/html/content_categories/index.md
+++ b/files/ru/web/html/content_categories/index.md
@@ -3,6 +3,8 @@ title: Категории контента
slug: Web/HTML/Content_categories
---
+{{HTMLSidebar}}
+
Каждый элемент [HTML](/ru/docs/Web/HTML) принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задаёт на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит _ни в одну_ из этих категорий.
Существует три типа категорий контента:
diff --git a/files/ru/web/html/element/area/index.md b/files/ru/web/html/element/area/index.md
index 7b9c33f5fdaf6e..bc612a6bc103a8 100644
--- a/files/ru/web/html/element/area/index.md
+++ b/files/ru/web/html/element/area/index.md
@@ -3,6 +3,8 @@ title: <area>
slug: Web/HTML/Element/area
---
+{{HTMLSidebar}}
+
**HTML `<area>` элемент** определяет активную область на изображении и, при желании, связывает её с {{Glossary("Hyperlink", "гипертекстовой ссылкой")}}. Этот элемент используется только внутри элемента {{HTMLElement("map")}}.{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
| [Категории содержимого](/ru/docs/HTML/Content_categories) | [Элементы потока](/ru/docs/Web/HTML/Content_categories#Flow_content), [фразового контента](/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content). |
diff --git a/files/ru/web/html/element/button/index.md b/files/ru/web/html/element/button/index.md
index 812fecab28a2aa..d006d580df9dfa 100644
--- a/files/ru/web/html/element/button/index.md
+++ b/files/ru/web/html/element/button/index.md
@@ -3,6 +3,8 @@ title: <button> - элемент кнопки
slug: Web/HTML/Element/button
---
+{{HTMLSidebar}}
+
## Описание
**HTML-элемент _`<button>`_** создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает {{Glossary ("user agent")}}, но вы можете изменить внешний вид кнопки, используя CSS.
diff --git a/files/ru/web/html/element/input/image/index.md b/files/ru/web/html/element/input/image/index.md
index 8353e5854cd165..72f47882846cb1 100644
--- a/files/ru/web/html/element/input/image/index.md
+++ b/files/ru/web/html/element/input/image/index.md
@@ -3,6 +3,8 @@ title: <input type="image">
slug: Web/HTML/Element/input/image
---
+{{HTMLSidebar}}
+
`<input type="image"> - это кнопка отправки в виде изображения. Вы можете использовать атрибут src, чтобы выбрать источник изображения и атрибут alt, чтобы добавить альтернативный текст. Атрибутами width и height можно указать размер изображения в пикселях.`
| Разрешённое содержимое | Нету, это пустой элемент. |
diff --git a/files/ru/web/html/element/mark/index.md b/files/ru/web/html/element/mark/index.md
index 1d01f79a5f9e44..8b0a4c36cec62c 100644
--- a/files/ru/web/html/element/mark/index.md
+++ b/files/ru/web/html/element/mark/index.md
@@ -3,6 +3,8 @@ title: <mark>
slug: Web/HTML/Element/mark
---
+{{HTMLSidebar}}
+
**HTML элемент `<mark>`** представляет текст, выделенный в справочных целях из-за своей _актуальности_ в определённом контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова.
| [Категории содержимого](/ru/docs/HTML/Content_categories) | [Содержимое потока](/ru/docs/HTML/Content_categories#Flow_content), [фразовый контент](/ru/docs/HTML/Content_categories#Phrasing_content), ощутимое содержимое. |
diff --git a/files/ru/web/html/element/nav/index.md b/files/ru/web/html/element/nav/index.md
index 19ddd348047b74..e16f17b956fc1e 100644
--- a/files/ru/web/html/element/nav/index.md
+++ b/files/ru/web/html/element/nav/index.md
@@ -3,6 +3,8 @@ title: <nav> - элемент навигации
slug: Web/HTML/Element/nav
---
+{{HTMLSidebar}}
+
**HTML-элемент `<nav>`** определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки.
| [Категории контента](/ru/docs/Web/Guide/HTML/Content_categories) | Потоковый контент, секционный контент, явный контент. |
diff --git a/files/ru/web/http/cors/errors/corsdidnotsucceed/index.md b/files/ru/web/http/cors/errors/corsdidnotsucceed/index.md
index 9e491570a601f1..25a5e4b71f3e0a 100644
--- a/files/ru/web/http/cors/errors/corsdidnotsucceed/index.md
+++ b/files/ru/web/http/cors/errors/corsdidnotsucceed/index.md
@@ -3,6 +3,8 @@ title: "Причина: Не удалось выполнить запрос CORS
slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
---
+{{HTTPSidebar}}
+
## Причина
```
diff --git a/files/ru/web/http/cors/errors/corsdisabled/index.md b/files/ru/web/http/cors/errors/corsdisabled/index.md
index 72df966de32939..79ad06b969daaa 100644
--- a/files/ru/web/http/cors/errors/corsdisabled/index.md
+++ b/files/ru/web/http/cors/errors/corsdisabled/index.md
@@ -3,6 +3,8 @@ title: "Ошибка: CORS disabled"
slug: Web/HTTP/CORS/Errors/CORSDisabled
---
+{{HTTPSidebar}}
+
## Ошибка
```
diff --git a/files/ru/web/http/status/501/index.md b/files/ru/web/http/status/501/index.md
index 0d14c3f761cbd0..8d04d473891324 100644
--- a/files/ru/web/http/status/501/index.md
+++ b/files/ru/web/http/status/501/index.md
@@ -3,6 +3,8 @@ title: 501 Not Implemented
slug: Web/HTTP/Status/501
---
+{{HTTPSidebar}}
+
The HTTP **`501 Not Implemented`** серверный код ответа на ошибку указывает, что метод запроса не поддерживается сервером и не может быть обработан. Единственными методами, которые необходимы серверам для поддержки (и, следовательно, не должны возвращать этот код), являются {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}}.
Обратите внимание, что 501 error не является чем-то, что вы можете исправить, но требует исправления веб-сервером, к которому вы пытаетесь получить доступ.
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/index.md b/files/ru/web/javascript/reference/global_objects/proxy/index.md
index a1bf38b9c48a82..030089fdc205be 100644
--- a/files/ru/web/javascript/reference/global_objects/proxy/index.md
+++ b/files/ru/web/javascript/reference/global_objects/proxy/index.md
@@ -3,6 +3,8 @@ title: Прокси
slug: Web/JavaScript/Reference/Global_Objects/Proxy
---
+{{JSRef}}
+
Объект `Proxy` позволяет создать прокси для другого объекта, может перехватывать и переопределить основные операции для данного объекта.
## Введение
diff --git a/files/ru/web/javascript/reference/global_objects/string/indexof/index.md b/files/ru/web/javascript/reference/global_objects/string/indexof/index.md
index b6a8bd6cd3fd99..3454c9679e4b7f 100644
--- a/files/ru/web/javascript/reference/global_objects/string/indexof/index.md
+++ b/files/ru/web/javascript/reference/global_objects/string/indexof/index.md
@@ -9,10 +9,13 @@ slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
Метод **`indexOf()`** возвращает индекс первого вхождения указанного значения в строковый объект {{jsxref("Global_Objects/String", "String")}}, на котором он был вызван, начиная с индекса `fromIndex`. Возвращает -1, если значение не найдено.
+{{EmbedInteractiveExample("pages/js/string-indexof.html", "taller")}}
+
## Синтаксис
-```
-str.indexOf(searchValue, [fromIndex])
+```js-nolint
+indexOf(searchString)
+indexOf(searchString, position)
```
### Параметры
diff --git a/files/ru/web/javascript/reference/operators/destructuring_assignment/index.md b/files/ru/web/javascript/reference/operators/destructuring_assignment/index.md
index d2b706c1c402c0..a1bf379a86cb59 100644
--- a/files/ru/web/javascript/reference/operators/destructuring_assignment/index.md
+++ b/files/ru/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -3,6 +3,8 @@ title: Деструктурирующее присваивание
slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
---
+{{jsSidebar("Operators")}}
+
Синтаксис **деструктурирующего присваивания** в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.
## Синтаксис
diff --git a/files/ru/web/javascript/reference/operators/in/index.md b/files/ru/web/javascript/reference/operators/in/index.md
index fe029342b09646..141a6e37048491 100644
--- a/files/ru/web/javascript/reference/operators/in/index.md
+++ b/files/ru/web/javascript/reference/operators/in/index.md
@@ -1,97 +1,276 @@
---
-title: in operator
+title: in
slug: Web/JavaScript/Reference/Operators/in
+l10n:
+ sourceCommit: 13b2fe46243beed6dc29f5d3defa716abe79c1f9
---
{{jsSidebar("Operators")}}
-**Оператор `in`** возвращает `true`, если свойство содержится в указанном объекте или в его цепочке прототипов.
+Оператор `in` возвращает `true`, если свойство содержится в указанном объекте или в его цепочке прототипов.
+
+Оператор `in` не может быть использован для поиска значений в других видах коллекций. Чтобы проверить, существует ли определённое значение в массиве, можно использовать {{jsxref("Array.prototype.includes()")}}. А у наборов есть метод {{jsxref("Set.prototype.has()")}}.
+
+{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}
## Синтаксис
-```
+```js-nolint
prop in object
+#prop in object
```
### Параметры
- `prop`
- - : Строка или symbol, представляющий название свойства или индекс массива (non-symbols будут конвертированы в строки).
-<!---->
+ - : Строковое или символьное значение, представляющее название свойства (несимвольные значения будут [преобразованы в строки](/ru/docs/Web/JavaScript/Reference/Global_Objects/String#приведение_к_строке)). Также может быть [именем приватного свойства](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties).
- `object`
- - : Объект, в котором нужно проверить содержание свойства с заданным именем.
+ - : Объект, для которого будет производится проверка, содержит ли он (или его цепочка прототипов) свойство с указанным именем (`prop`).
+
+### Исключения
+
+- {{jsxref("TypeError")}}:
+ - : Возникает, если `object` не является объектом (например, является примитивом).
## Описание
+Оператор `in` проверяет, существует ли указанное свойство в объекте или его цепочке прототипов. Для проверки наличия только собственных свойств следует использовать {{jsxref("Object.hasOwn()")}}.
+
+Свойство может существовать в объекте, но иметь значение `undefined`. Поэтому `x in obj` не то же самое, что `obj.x !== undefined`. Для того, чтобы оператор `in` возвращал значение `false`, используйте оператор [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete) вместо присваивания свойству значения `undefined`.
+
+Также можно использовать оператор `in`, чтобы проверить, существует ли в объекте [приватное поле класса или метод](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties). Оператор `in` возвращает `true`, если свойство определено и `false` в противном случае. Такая проверка называется _бренд-чек_, потому что `in` возвращает `true` только в том случае, когда объект был создан с помощью конструктора класса и имеет доступ к приватным свойствам.
+
+В этом случае используется особый синтаксис: левая сторона оператора `in` является идентификатором свойства, а не выражением, но без кавычек (иначе это будет свойством с типом строка, а не приватным свойством).
+
+Поскольку обращение к приватным свойствам объекта не связанного с текущим классом приводит к появлению {{jsxref("TypeError")}} вместо возвращения `undefined`, то оператор `in` позволяет сократить запись такой проверки:
+
+```js
+class C {
+ #x;
+ static isC(obj) {
+ try {
+ obj.#x;
+ return true;
+ } catch {
+ return false;
+ }
+ }
+}
+```
+
+До более короткой:
+
+```js
+class C {
+ #x;
+ static isC(obj) {
+ return #x in obj;
+ }
+}
+```
+
+Оператор `in` также позволяет избежать необходимости обрабатывать ошибки доступа к несуществующим приватным свойствам.
+
+Однако, оператор `in` по-прежнему требует предварительно объявлять приватные свойства заранее в окружающем классе, иначе будет выброшена ошибка {{jsxref("SyntaxError")}} ("Private field '#x' must be declared in an enclosing class") такая же, как и когда вы пытаетесь получить доступ к необъявленному приватному свойству.
+
+```js-nolint example-bad
+class C {
+ foo() {
+ #x in this;
+ }
+}
+
+new C().foo(); // SyntaxError: Private field '#x' must be declared in an enclosing class
+```
+
+## Примеры
+
+### Обычное использование
+
В примере ниже показаны некоторые способы использования оператора `in`.
```js
// Массивы
-var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+const trees = ["redwood", "bay", "cedar", "oak", "maple"];
0 in trees; // true
3 in trees; // true
6 in trees; // false
-"bay" in trees; // false (вы должны указать индекс элемента в массиве, а не значение в этом индексе)
+"bay" in trees; // false (необходимо указать индекс элемента в массиве, а не значение)
"length" in trees; // true (length является свойством Array)
+Symbol.iterator in trees; // true
// Уже существующие объекты
"PI" in Math; // true
// Пользовательские объекты
-var mycar = { make: "Honda", model: "Accord", year: 1998 };
+const mycar = { make: "Honda", model: "Accord", year: 1998 };
"make" in mycar; // true
"model" in mycar; // true
```
-Вы должны указать объект справа от оператора `in`. Например, вы можете указать строку, созданную через конструктор объекта `String`, но вы не можете указать строковый литерал.
+Необходимо указать объект справа от оператора `in`. Например, можно указать строку, созданную с помощью конструктора `String`, но нельзя использовать строковый литерал.
```js
-var color1 = new String("green");
-"length" in color1; // returns true
+const color1 = new String("green");
+"length" in color1; // true
-var color2 = "coral";
-// сгенерирует ошибку (color2 is not a String object)
+const color2 = "coral";
+// сгенерирует ошибку (color2 не является объектом String)
"length" in color2;
```
### Использование оператора `in` с неопределёнными или с уже удалёнными свойствами
-Если вы удалили свойство при помощи оператора [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete), то оператор `in` возвратит `false` для этого свойства.
+Если удалить свойство при помощи оператора [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete), то оператор `in` возвратит `false` для этого свойства.
```js
-var mycar = { make: "Honda", model: "Accord", year: 1998 };
+const mycar = { make: "Honda", model: "Accord", year: 1998 };
delete mycar.make;
"make" in mycar; // false
-var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+const trees = ["redwood", "bay", "cedar", "oak", "maple"];
delete trees[3];
3 in trees; // false
```
-Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор `in` вернёт значение `true`.
+Если задать свойству значение {{jsxref("undefined")}}, а не удалять его, то для этого свойства оператор `in` вернёт значение `true`.
```js
-var mycar = { make: "Honda", model: "Accord", year: 1998 };
+const mycar = { make: "Honda", model: "Accord", year: 1998 };
mycar.make = undefined;
"make" in mycar; // true
```
```js
-var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+const trees = ["redwood", "bay", "cedar", "oak", "maple"];
trees[3] = undefined;
-3 in trees; // returns true
+3 in trees; // true
+```
+
+Оператор `in` вернёт `false` для [пустых слотов в массиве](/ru/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays), несмотря на то, что прямой доступ к свойству вернёт `undefined`.
+
+```js
+const empties = new Array(3);
+empties[2]; // undefined
+2 in empties; // false
+```
+
+Чтобы избежать подобного, следует заполнять новый массив непустыми значениями и не записывать значения по индексам, превышающим длину массива.
+
+```js
+const empties = new Array(3).fill(undefined);
+2 in empties; // true
```
### Наследуемые свойства
-Оператор `in` возвратит `true` для свойств, которые унаследованы по цепочке прототипов. (Если вы хотите проверить только не наследованные свойства, используйте {{jsxref("Object.prototype.hasOwnProperty()")}}.)
+Оператор `in` возвратит `true` для свойств, которые унаследованы по цепочке прототипов. Это может быть нежелательно при использовании объектов для хранения произвольных пар ключ-значение.
+
+```js example-bad
+const ages = { alice: 18, bob: 27 };
+
+function hasPerson(name) {
+ return name in ages;
+}
+
+hasPerson("hasOwnProperty"); // true
+```
+
+Можно использовать {{jsxref("Object.hasOwn()")}}, чтобы проверить, существует ли в объекте данный ключ.
+
+```js
+const ages = { alice: 18, bob: 27 };
+
+function hasPerson(name) {
+ return Object.hasOwn(ages, name);
+}
+
+hasPerson("hasOwnProperty"); // false
+```
+
+Также можно использовать [объект с прототипом null](/ru/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) или {{jsxref("Map")}}, чтобы избежать других ошибок.
+
+```js example-good
+const ages = new Map([
+ ["alice", 18],
+ ["bob", 27],
+]);
+
+function hasPerson(name) {
+ return ages.has(name);
+}
+
+hasPerson("hasOwnProperty"); // false
+```
+
+### Использование оператора `in` для реализации _бренд-чека_
+
+Фрагмент кода ниже демонстрирует статическую функцию, которая проверяет, был ли объект создан конструктором класса `Person`, и следовательно безопасно ли использовать методы этого класса.
```js
-"toString" in {}; // true
+class Person {
+ #age;
+ constructor(age) {
+ this.#age = age;
+ }
+ static isPerson(o) {
+ return #age in o;
+ }
+ ageDifference(other) {
+ return this.#age - other.#age;
+ }
+}
+
+const p1 = new Person(20);
+const p2 = new Person(30);
+console.log(p1.ageDifference(p2)); // -10
+console.log(Person.isPerson(p1)); // true
+
+if (Person.isPerson(p1) && Person.isPerson(p2)) {
+ console.log(p1.ageDifference(p2)); // -10
+}
```
+Это помогает предотвратить следующую ошибку:
+
+```js
+const p2 = {};
+
+p1.ageDifference(p2); // TypeError: Cannot read private member #age from an object whose class did not declare it
+```
+
+Без оператора `in` пришлось бы использовать блок `try...catch`, чтобы проверить, есть ли в объекте приватное свойство.
+
+Также это можно реализовать с помощью метода класса [`@@hasInstance`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance), и в дальнейшем использовать оператор [`instanceof`](/ru/docs/Web/JavaScript/Reference/Operators/instanceof) для выполнения такой же проверки (которая по умолчанию проверяет только наличие `Person.prototype` в цепочке прототипов объекта).
+
+```js
+class Person {
+ #age;
+ constructor(age) {
+ this.#age = age;
+ }
+ static [Symbol.hasInstance](o) {
+ // Проверяем `this` для предотвращения ложно-положительных
+ // результатов при вызове `instanceof SubclassOfPerson`
+ return this === Person && #age in o;
+ }
+ ageDifference(other) {
+ return this.#age - other.#age;
+ }
+}
+
+const p1 = new Person(20);
+const p2 = new Person(30);
+
+if (p1 instanceof Person && p2 instanceof Person) {
+ console.log(p1.ageDifference(p2)); // -10
+}
+```
+
+Дополнительные примеры есть в разделе «[Приватные свойства](/ru/docs/Web/JavaScript/Reference/Classes/Private_properties)» и в [руководстве по классам](/ru/docs/Web/JavaScript/Guide/Using_classes#private_fields).
+
## Спецификации
{{Specifications}}
@@ -102,7 +281,8 @@ trees[3] = undefined;
## Смотрите также
+- [`for...in`](/ru/docs/Web/JavaScript/Reference/Statements/for...in)
- [`delete`](/ru/docs/Web/JavaScript/Reference/Operators/delete)
-- {{jsxref("Object.prototype.hasOwnProperty()")}}
+- {{jsxref("Object.hasOwn()")}}
- {{jsxref("Reflect.has()")}}
-- [Enumerability and ownership of properties](/ru/docs/Enumerability_and_ownership_of_properties)
+- [Перечисляемость и владение свойствами](/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
diff --git a/files/ru/web/javascript/reference/operators/nullish_coalescing_assignment/index.md b/files/ru/web/javascript/reference/operators/nullish_coalescing_assignment/index.md
index 3e2d3ff0c798c0..9d1b0c1f64d17a 100644
--- a/files/ru/web/javascript/reference/operators/nullish_coalescing_assignment/index.md
+++ b/files/ru/web/javascript/reference/operators/nullish_coalescing_assignment/index.md
@@ -7,12 +7,12 @@ slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment
Оператор логического нулевого присваивания (`x ??= y`) присваивает значение переменной `x`, если она содержит {{Glossary("nullish", "похожее на null значение")}} (`null` или `undefined`).
-{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}}
+{{EmbedInteractiveExample("pages/js/expressions-nullish-coalescing-assignment.html")}}
## Синтаксис
-```js
-expr1 ??= expr2;
+```js-nolint
+x ??= y
```
## Описание
@@ -62,7 +62,7 @@ config({}); // { duration: 100, speed: 25 }
## Смотрите также
-- [Оператор нулевого слияния (`??`)](/ru/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
+- [Оператор нулевого слияния (`??`)](/ru/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing)
- {{Glossary("Nullish", "Похожее на null значение")}}
- {{Glossary("Truthy", "Истиноподобное значение")}}
- {{Glossary("Falsy", "Ложноподобное значение")}}
diff --git a/files/ru/web/mathml/authoring/index.md b/files/ru/web/mathml/authoring/index.md
index cdc2bd98172da0..fcf26801a8da63 100644
--- a/files/ru/web/mathml/authoring/index.md
+++ b/files/ru/web/mathml/authoring/index.md
@@ -3,6 +3,8 @@ title: Средство разработки MathML
slug: Web/MathML/Authoring
---
+{{MathMLRef}}
+
Эта страница объясняет, как записать математические выражения при помощи языка MathML. Подобно HTML, основными элементами языка MathML являются теги и атрибуты. Документ HTML становится сложным, когда он содержит структуры, подобные спискам или таблицам, но, к счастью, существует много генераторов на основе простых систем обозначений, WYSIWYG редакторы и другие системы управления контентом, помогающие создавать Web страницы.
Математические обозначения ещё более сложны со структурами такими, как дроби, квадратные корни или матрицы, которые, вероятно, потребуют собственных тегов. Поэтому инструменты разработки, связанные с MathML, очень важны. Некоторые из этих инструментов мы описываем ниже. В частности, команда Mozilla MathML разрабатывала [TeXZilla](https://github.com/fred-wang/TeXZilla/) (Javascript Unicode LaTeX-to-MathML конвертер), который предназначен для использования во многих сценариях, описанных здесь. Конечно, этот список ни в коем случае не является исчерпывающим и вам предлагается проверить [W3C MathML software list](https://www.w3.org/Math/Software/), где вы можете найти некоторые другие инструменты.
diff --git a/files/ru/web/mathml/element/index.md b/files/ru/web/mathml/element/index.md
index 9c7a7b7d527b24..e944184a850166 100644
--- a/files/ru/web/mathml/element/index.md
+++ b/files/ru/web/mathml/element/index.md
@@ -3,6 +3,8 @@ title: Справка по элементам MathML
slug: Web/MathML/Element
---
+{{MathMLRef}}
+
Здесь представлен алфавитный список **презентационных (presentation)** элементов MathML.
Термин **презентационная разметка (presentation markup)** используется для описания разметки отображения математической системы обозначений, тогда как **разметка содержимого (content markup)** обеспечивает базовый математический смысл и не должна воспроизводиться парсером MathML (смотрите [Firefox bug 276028](https://bugzil.la/276028)). Если вы хотите узнать больше о разметке контента, вы можете изучить [Chapter 4](http://www.w3.org/TR/MathML3/chapter4.html) из [спецификации MathML 3](http://www.w3.org/TR/MathML3/).
diff --git a/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.md b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.md
index 83c9ee5ed2912a..2bdec408988de3 100644
--- a/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.md
+++ b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.md
@@ -3,6 +3,8 @@ title: "MathML: Вывод Квадратичной Формулы"
slug: Web/MathML/Examples/Deriving_the_Quadratic_Formula
---
+{{MathMLRef}}
+
На этой странице описывается вывод Квадратичной Формулы.
<math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow>Мы берём квадратное уравнение в его общем виде и решаем для х:<mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow></mrow></mrow></mrow></mtd></mtr></mtable></math>
diff --git a/files/ru/web/mathml/examples/index.md b/files/ru/web/mathml/examples/index.md
index f4cf42b8119993..84560b0927bb73 100644
--- a/files/ru/web/mathml/examples/index.md
+++ b/files/ru/web/mathml/examples/index.md
@@ -3,6 +3,8 @@ title: Примеры
slug: Web/MathML/Examples
---
+{{MathMLRef}}
+
Ниже вы найдёте некоторые примеры, которые помогут вам понять, как использовать MathML для отображения более сложных математических понятий в веб содержимом.
- [Теорема Пифагора](/ru/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem)
diff --git a/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.md b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.md
index cad033a0a7ea8b..06f7b0d430e3d8 100644
--- a/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.md
+++ b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.md
@@ -3,6 +3,8 @@ title: Доказательство теоремы Пифагора
slug: Web/MathML/Examples/MathML_Pythagorean_Theorem
---
+{{MathMLRef}}
+
Сейчас мы докажем Теорему Пифагора:
**Утверждение**: В прямоугольном треугольнике квадрат гипотенузы равен сумме квадратов двух других сторон (катетов).
diff --git a/files/ru/web/mathml/index.md b/files/ru/web/mathml/index.md
index 6209bdba278dd5..e52786b87916d1 100644
--- a/files/ru/web/mathml/index.md
+++ b/files/ru/web/mathml/index.md
@@ -3,6 +3,8 @@ title: MathML
slug: Web/MathML
---
+{{MathMLRef}}
+
**Mathematical Markup Language (MathML)** разновидность языка разметки [XML](/ru/docs/XML), предназначенная для построения математических выражений с сохранением их структуры и содержания. Здесь вы найдёте ссылки к документации, примеры и инструменты, которые помогут вам работать с этой мощной технологией. Для быстрого обзора - смотрите [слайды для выставки инноваций на саммите Mozilla 2013](http://fred-wang.github.io/MozSummitMathML/index.html).
## Справочные данные по MathML
diff --git a/files/ru/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/ru/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
index 6d11904b0ce3cf..521ef3f8959a2a 100644
--- a/files/ru/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
+++ b/files/ru/web/media/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
@@ -3,6 +3,8 @@ title: Adding captions and subtitles to HTML5 video
slug: Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
---
+{{QuickLinksWithSubpages("/ru/docs/Web/Media")}}
+
> В других статьях мы рассмотрели как [создать cross browser видео плеер](/en-US/Apps/Build/Manipulating_media/cross_browser_video_player) используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как [стилизовать плеер](/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics). В этой статье мы возьмём тот же плеер и покажем как добавить подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.
## Пример видео с подписями
diff --git a/files/ru/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md b/files/ru/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
index b74fb8c13ebdd6..310f35796266bc 100644
--- a/files/ru/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
+++ b/files/ru/web/media/audio_and_video_delivery/buffering_seeking_time_ranges/index.md
@@ -3,6 +3,8 @@ title: Медиа-буферизация, поиск и временные ди
slug: Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges
---
+{{QuickLinksWithSubpages("/ru/docs/Web/Media")}}
+
Sometimes it's useful to know how much {{htmlelement("audio") }} or {{htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using [TimeRanges](/ru/docs/Web/API/TimeRanges), and other features of the media API.
## Buffered
diff --git a/files/ru/web/performance/animation_performance_and_frame_rate/index.md b/files/ru/web/performance/animation_performance_and_frame_rate/index.md
index c58358c0351948..9078f5f5c0a28d 100644
--- a/files/ru/web/performance/animation_performance_and_frame_rate/index.md
+++ b/files/ru/web/performance/animation_performance_and_frame_rate/index.md
@@ -3,6 +3,8 @@ title: Производительность анимации и частота
slug: Web/Performance/Animation_performance_and_frame_rate
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Анимация в Вебе может быть сделана с помощью {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}, включая {{htmlelement('canvas')}} и {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, анимированных GIF и даже с помощью анимированных PNG и других типов изображений. Производительность CSS-анимации может отличаться от одного CSS-свойства к другому, а попытка анимировать некоторые "дорогие" CSS-свойства может привести к зависаниям ({{glossary('jank')}}), даже несмотря на то, что браузер борется за то, чтобы смягчить частоту смены кадров {{glossary('frame rate')}}.
Для анимированных медиа, таких как видео и GIF, основная проблема производительности - это размер файлов. Скачивание больших по объёму файлов не может не повлиять на производительность системы или на то, как эту систему воспринимает пользователь.
diff --git a/files/ru/web/performance/critical_rendering_path/index.md b/files/ru/web/performance/critical_rendering_path/index.md
index 7326c2d5e1320a..f5cfbfdb5d02b0 100644
--- a/files/ru/web/performance/critical_rendering_path/index.md
+++ b/files/ru/web/performance/critical_rendering_path/index.md
@@ -3,6 +3,8 @@ title: Критические этапы рендеринга
slug: Web/Performance/Critical_rendering_path
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Критические этапы рендеринга (Critical Rendering Path) - это последовательность шагов, которые выполняет браузер, когда преобразуется HTML, CSS и JavaScript в пиксели, которые вы видите на экране. Оптимизация этих шагов улучшает производительность рендера. Эти этапы включают в себя работу с [Document Object Model](/ru/docs/Web/API/Document_Object_Model)(DOM), [CSS Object Model](/ru/docs/Web/API/CSS_Object_Model)(CSSOM), деревом рендера (render tree) и компоновкой объектов (layout)
Объектная модель документа DOM создаётся в тот момент, когда браузер парсит HTML. Этот HTML может запрашивать JavaScript, который может модифицировать DOM. HTML может запросить стили, которые участвуют в создании CSS Object Model. Движок браузера комбинирует эти две объектные модели, чтобы создать дерево рендера (render tree). Компоновка (layout) определяет размеры и позицию каждого элемента на странице. Как только компоновка определена - пиксели отрисовываются на экране.
diff --git a/files/ru/web/performance/css_javascript_animation_performance/index.md b/files/ru/web/performance/css_javascript_animation_performance/index.md
index 3ebfc88d0a3571..e3a017b73126f1 100644
--- a/files/ru/web/performance/css_javascript_animation_performance/index.md
+++ b/files/ru/web/performance/css_javascript_animation_performance/index.md
@@ -3,6 +3,8 @@ title: Производительность CSS и JavaScript анимации
slug: Web/Performance/CSS_JavaScript_animation_performance
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Анимация является критичным инструментом для улучшения пользовательского опыта во многих приложениях. Существует много путей создания анимации в web, например, основанные на CSS-свойствах {{cssxref("transition","transitions")}}/{{cssxref("animation","animations")}} или на JavaScript (using {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}}). В этой статье мы проанализируем производительность CSS и JavaScript анимаций и сравним их.
## CSS transition и animation
diff --git a/files/ru/web/performance/dns-prefetch/index.md b/files/ru/web/performance/dns-prefetch/index.md
index df5d12802e3afc..f0de84a6c03c30 100644
--- a/files/ru/web/performance/dns-prefetch/index.md
+++ b/files/ru/web/performance/dns-prefetch/index.md
@@ -3,6 +3,8 @@ title: Использование dns-prefetch
slug: Web/Performance/dns-prefetch
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
**`DNS-prefetch`** (предзагрузка DNS) - это попытка определить IP адрес по имени домена до того, как ресурс с этого домена будет фактически запрошен. Это может быть загрузчик файлов, который используется позже или ссылка, по которой, вероятно, перейдёт пользователь.
## Зачем использовать dns-prefetch?
diff --git a/files/ru/web/performance/fundamentals/index.md b/files/ru/web/performance/fundamentals/index.md
index 357163c90f31d3..ceb6836bef7b41 100644
--- a/files/ru/web/performance/fundamentals/index.md
+++ b/files/ru/web/performance/fundamentals/index.md
@@ -3,6 +3,8 @@ title: Основы производительности
slug: Web/Performance/Fundamentals
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Английское слово Performance, которое используется в статьях о производительности приложений, также можно перевести, как "эффективность". Этот документ объясняет основы производительности, того как браузеры помогают улучшить её и какие инструменты и процессы вы можете использовать, чтобы её улучшить.
## Что такое производительность?
diff --git a/files/ru/web/performance/how_browsers_work/index.md b/files/ru/web/performance/how_browsers_work/index.md
index 25312c0b6dd10d..e901530e74cba6 100644
--- a/files/ru/web/performance/how_browsers_work/index.md
+++ b/files/ru/web/performance/how_browsers_work/index.md
@@ -3,6 +3,8 @@ title: Как работают браузеры
slug: Web/Performance/How_browsers_work
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Пользователи хотят использовать приложения, в которых загрузка контента происходит быстро, а взаимодействие - плавно. Разработчик должен стараться оптимизировать своё приложение как минимум по этим двум показателям.
Чтобы понять, как улучшить производительность и ощущаемую пользователем производительность (User Perceived Performance, UPP), вам необходимо понимать, как работают браузеры.
diff --git a/files/ru/web/performance/how_long_is_too_long/index.md b/files/ru/web/performance/how_long_is_too_long/index.md
index 8b0ae69ad56f3f..11664a8848a771 100644
--- a/files/ru/web/performance/how_long_is_too_long/index.md
+++ b/files/ru/web/performance/how_long_is_too_long/index.md
@@ -3,6 +3,8 @@ title: "Тайминги производительности: как долго
slug: Web/Performance/How_long_is_too_long
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Не существует чётко установленного набора правил, который определяет медленную скорость загрузки страниц, но существуют особые руководства, которые рекомендуют определённые тайминги: загрузка контента - 1 секунда, ожидание - 50мс, анимация - 16,7мс, ответ на действия пользователя - от 50 до 200мс.
### Загрузка контента
diff --git a/files/ru/web/performance/index.md b/files/ru/web/performance/index.md
index 1f9f71df3b2c5c..5c2bfb7720096a 100644
--- a/files/ru/web/performance/index.md
+++ b/files/ru/web/performance/index.md
@@ -3,6 +3,8 @@ title: Web Performance
slug: Web/Performance
---
+{{QuickLinksWithSubPages}}
+
Производительность в web - это объективные измерения и пользовательские ощущения, связанные с загрузкой и работой приложения. Производительность - это о том, как долго сайт грузится, становится интерактивным и отзывчивым, о том, как плавно происходит взаимодействие с контентом. Плавный ли скролл страницы? Все ли кнопки кликабельны? Всплывающие окна загружаются и показываются быстро? А анимируются? Хорошая производительность требует учёта всех аспектов: как объективных, например, фактическое время загрузки страницы или частота смены кадров; так и субъективных - в буквальном смысле "как пользователь воспринимает систему".
Чем дольше загружается ваше приложение, тем больше пользователей решаются избавиться от него. Очень важно уменьшать время загрузки приложения, а так же промежутка времени, за которое оно становится интерактивным. Но в то же время, важно добавлять в приложение новые возможности, которые уменьшают время отклика и делают приложение интерактивным за счёт неочевидных хитростей, например, за счёт асинхронной загрузки данных, которые не понадобятся пользователю "здесь и сейчас".
diff --git a/files/ru/web/performance/lazy_loading/index.md b/files/ru/web/performance/lazy_loading/index.md
index 53c45470ca7171..2fab6d2685846b 100644
--- a/files/ru/web/performance/lazy_loading/index.md
+++ b/files/ru/web/performance/lazy_loading/index.md
@@ -3,6 +3,8 @@ title: Lazy loading
slug: Web/Performance/Lazy_loading
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
**Lazy loading (ленивая загрузка)** - это стратегия, направленная на определение ресурсов как неблокирующих (не критических) для того, чтобы отложить загрузку этих ресурсов на тот момент, когда они действительно необходимы. Так можно сократить длину [критических этапов рендеринга](/ru/docs/Web/Performance/Critical_rendering_path), что приводит к уменьшению времени загрузки приложения.
Ленивая загрузка может происходить в разные моменты работы приложения, но, как правило, она запускается во время взаимодействия пользователя и системы, например, при скроллинге или навигации.
diff --git a/files/ru/web/performance/navigation_and_resource_timings/index.md b/files/ru/web/performance/navigation_and_resource_timings/index.md
index dbde6f05fd4880..46c8337b8d9d6b 100644
--- a/files/ru/web/performance/navigation_and_resource_timings/index.md
+++ b/files/ru/web/performance/navigation_and_resource_timings/index.md
@@ -3,6 +3,8 @@ title: Время загрузки страницы и ресурсов
slug: Web/Performance/Navigation_and_resource_timings
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
**Тайминги навигации (Navigation timings)** - это показатели, указывающие временные метки, в которые произошли события навигации. **Тайминги ресурсов (Resource timings)** - это детальные показатели по времени загрузки ресурсов.
В этой статье мы рассмотрим как [Performance Timing API](/ru/docs/Web/API/PerformanceTiming), так и Performance Entry API. И хотя первый API считается устаревшим, он все ещё поддерживается всеми браузерами, он прост и о нем полезно знать. В свою очередь, Performance Entry API является более продвинутым инструментом, который позволяет не только получить более сложные данные, но и позволяет разработчику измерять другие показатели, в дополнение к данным о навигации и загрузке ресурсов.
diff --git a/files/ru/web/performance/optimizing_startup_performance/index.md b/files/ru/web/performance/optimizing_startup_performance/index.md
index 2665e96c2448f3..4b6bc369bf66cf 100644
--- a/files/ru/web/performance/optimizing_startup_performance/index.md
+++ b/files/ru/web/performance/optimizing_startup_performance/index.md
@@ -3,6 +3,8 @@ title: Оптимизация запуска
slug: Web/Performance/Optimizing_startup_performance
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Часто упускаемый из вида аспект разработки приложений - это скорость запуска приложения. Даже если вы прикладываете много усилий к оптимизации работы приложений, именно этот этап может быть пропущен. Как долго запускается ваше приложение? Создаётся ли впечатление, что устройство зависает, пока приложение запускается? Все эти симптомы заставляют пользователя считать, что приложение сломано или что-то идёт не так. Всегда будет не лишним убедиться, что ваше приложение запускается плавно. В этой статье мы поделимся некоторыми подсказками, которые помогут вам оптимизировать запуск приложения, вне зависимости от того, пишете ли вы его с нуля или работаете над уже существующим.
## Приятный запуск
diff --git a/files/ru/web/performance/performance_budgets/index.md b/files/ru/web/performance/performance_budgets/index.md
index 4c6fdfcc9f3c5a..fa3f33cb789bed 100644
--- a/files/ru/web/performance/performance_budgets/index.md
+++ b/files/ru/web/performance/performance_budgets/index.md
@@ -3,6 +3,8 @@ title: Бюджет производительности
slug: Web/Performance/Performance_budgets
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
Бюджет производительности - это лимит для предотвращения регрессий. Этот бюджет может быть применён к файлам, типам файлов, всем ресурсам приложения, определённым общим показателям (например, [Время до интерактивности](/ru/docs/Glossary/Time_to_interactive)) пользовательским показателям (например, Время до главного элемента) или к пороговым значениям к определённым точкам во времени.
## Зачем нужен бюджет?
diff --git a/files/ru/web/performance/rum-vs-synthetic/index.md b/files/ru/web/performance/rum-vs-synthetic/index.md
index e04375afdb35b9..fb55b822fa4e38 100644
--- a/files/ru/web/performance/rum-vs-synthetic/index.md
+++ b/files/ru/web/performance/rum-vs-synthetic/index.md
@@ -3,6 +3,8 @@ title: "Мониторинг производительности: реальн
slug: Web/Performance/Rum-vs-Synthetic
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
**Синтетический мониторинг** и **мониторинг реальных пользователей (Real User Monitoring, RUM)** - два способа мониторинга и получения данных о веб-производительности. Эти два подхода дают два разных обзора производительности и каждый имеет свои преимущества, области применения и минусы. RUM, в основном, лучше подходит для понимания долгосрочных трендов, в то время как синтетический мониторинг хорошо подходит для тестирования регрессий, их быстрого обнаружения и быстрой реакции на них в процессе разработки. В этой статье мы определим и сравним оба подхода.
## Синтетический мониторинг
diff --git a/files/ru/web/performance/understanding_latency/index.md b/files/ru/web/performance/understanding_latency/index.md
index 08230391b75bba..215fe725fe1eff 100644
--- a/files/ru/web/performance/understanding_latency/index.md
+++ b/files/ru/web/performance/understanding_latency/index.md
@@ -3,6 +3,8 @@ title: Время ожидания (latency)
slug: Web/Performance/Understanding_latency
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
**Latency** (дальше - **время ожидания**) - это время, которое требуется на доставку пакета данных от источника к пункту назначения. В деле оптимизации производительности важно сокращать проблемы, которые приводят к длительному времени ожидания. Также необходимо научиться тестировать работу приложения в условиях плохого соединения. В этой статье мы рассмотрим само понятие времени ожидание, его причины, способы детекции и исправления.
## Что такое "время ожидания"?
diff --git a/files/ru/web/progressive_web_apps/index.md b/files/ru/web/progressive_web_apps/index.md
index 9f581fe37e80d2..3d64e91403f55b 100644
--- a/files/ru/web/progressive_web_apps/index.md
+++ b/files/ru/web/progressive_web_apps/index.md
@@ -3,6 +3,8 @@ title: Прогрессивные веб-приложения
slug: Web/Progressive_web_apps
---
+{{PWASidebar}}
+
Прогрессивные веб-приложения используют современные веб-API вкупе со стратегией прогрессивного улучшения для создания кросс-платформенных приложений. Такие приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.
diff --git a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/ru/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
similarity index 98%
rename from files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.md
rename to files/ru/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
index 428748b4890f81..a4be30039ecffc 100644
--- a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.md
+++ b/files/ru/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
@@ -1,6 +1,6 @@
---
title: How to turn off form autocompletion
-slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
---
В этой статье объясняется как можно отключить автозаполнение полей на сайте.
diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.md b/files/ru/web/svg/applying_svg_effects_to_html_content/index.md
index 6c37c0481af8ec..34d732b277c07b 100644
--- a/files/ru/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.md
@@ -3,6 +3,8 @@ title: Применение эффектов SVG к содержимому HTML
slug: Web/SVG/Applying_SVG_effects_to_HTML_content
---
+{{SVGRef}}
+
Современные браузеры поддерживают [SVG](/ru/docs/SVG) в стилях [CSS](/ru/docs/Web/CSS) для применения графических эффектов к HTML-контенту.
Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать: [`mask`](/ru/docs/Web/CSS/mask), [`clip-path`](/ru/docs/Web/CSS/clip-path), и [`filter`](/ru/docs/Web/CSS/filter).
diff --git a/files/ru/web/svg/attribute/additive/index.md b/files/ru/web/svg/attribute/additive/index.md
index 1ef72732d0e8fb..1d04a3e5f405ac 100644
--- a/files/ru/web/svg/attribute/additive/index.md
+++ b/files/ru/web/svg/attribute/additive/index.md
@@ -3,6 +3,8 @@ title: additive
slug: Web/SVG/Attribute/additive
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Этот атрибут определяет, является ли анимация аддитивной.
diff --git a/files/ru/web/svg/attribute/attributetype/index.md b/files/ru/web/svg/attribute/attributetype/index.md
index 824d9acba9d9e3..1200f9430e2473 100644
--- a/files/ru/web/svg/attribute/attributetype/index.md
+++ b/files/ru/web/svg/attribute/attributetype/index.md
@@ -3,6 +3,8 @@ title: attributeType
slug: Web/SVG/Attribute/attributeType
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Этот атрибут задаёт пространство имён, в котором определяются конечный атрибут и связанные с ним значения.
diff --git a/files/ru/web/svg/attribute/class/index.md b/files/ru/web/svg/attribute/class/index.md
index cc32db7b67da14..1a358559fd1222 100644
--- a/files/ru/web/svg/attribute/class/index.md
+++ b/files/ru/web/svg/attribute/class/index.md
@@ -3,6 +3,8 @@ title: class
slug: Web/SVG/Attribute/class
---
+{{SVGRef}}
+
« [Домашняя страница справочника по SVG атрибутам](/en/SVG/Attribute)
Присвоение класса или набора классов элементу. Вы можете присвоить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".
diff --git a/files/ru/web/svg/attribute/end/index.md b/files/ru/web/svg/attribute/end/index.md
index aa23372b467e58..450e8b17a86add 100644
--- a/files/ru/web/svg/attribute/end/index.md
+++ b/files/ru/web/svg/attribute/end/index.md
@@ -3,6 +3,8 @@ title: end
slug: Web/SVG/Attribute/end
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.
diff --git a/files/ru/web/svg/attribute/fill-opacity/index.md b/files/ru/web/svg/attribute/fill-opacity/index.md
index c073d1d9449f84..aceb75bbd9ea7c 100644
--- a/files/ru/web/svg/attribute/fill-opacity/index.md
+++ b/files/ru/web/svg/attribute/fill-opacity/index.md
@@ -3,6 +3,8 @@ title: fill-opacity
slug: Web/SVG/Attribute/fill-opacity
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Этот атрибут определяет прозрачность цвета заполнения содержимого элемента.
diff --git a/files/ru/web/svg/attribute/fill/index.md b/files/ru/web/svg/attribute/fill/index.md
index 77d30fa0f7d5cc..8899b025251f71 100644
--- a/files/ru/web/svg/attribute/fill/index.md
+++ b/files/ru/web/svg/attribute/fill/index.md
@@ -3,6 +3,8 @@ title: fill
slug: Web/SVG/Attribute/fill
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Атрибут `fill` имеет два значения в зависимости от используемого контекста.
diff --git a/files/ru/web/svg/attribute/font-weight/index.md b/files/ru/web/svg/attribute/font-weight/index.md
index a0fb820ba9ad85..84b669ae415299 100644
--- a/files/ru/web/svg/attribute/font-weight/index.md
+++ b/files/ru/web/svg/attribute/font-weight/index.md
@@ -3,6 +3,8 @@ title: font-weight
slug: Web/SVG/Attribute/font-weight
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
`Атрибут font-weight` позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") .
diff --git a/files/ru/web/svg/attribute/index.md b/files/ru/web/svg/attribute/index.md
index 5e824995aad1e9..e3d6a25dbaf32a 100644
--- a/files/ru/web/svg/attribute/index.md
+++ b/files/ru/web/svg/attribute/index.md
@@ -3,6 +3,8 @@ title: Справочник SVG атрибутов
slug: Web/SVG/Attribute
---
+{{SVGRef}}
+
« [SVG](/ru/docs/Web/SVG) / [Справочник SVG элементов](/ru/docs/Web/SVG/Элемент) »
Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведён список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.
diff --git a/files/ru/web/svg/attribute/keytimes/index.md b/files/ru/web/svg/attribute/keytimes/index.md
index cb4c6525ed0127..23642c4fa50751 100644
--- a/files/ru/web/svg/attribute/keytimes/index.md
+++ b/files/ru/web/svg/attribute/keytimes/index.md
@@ -3,6 +3,8 @@ title: keyTimes
slug: Web/SVG/Attribute/keyTimes
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/ru/docs/Web/SVG/Attribute)
Атрибут `keyTimes` представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке `keyTimes` задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.
diff --git a/files/ru/web/svg/attribute/lengthadjust/index.md b/files/ru/web/svg/attribute/lengthadjust/index.md
index 9095431747ccb2..82aee6f83588b3 100644
--- a/files/ru/web/svg/attribute/lengthadjust/index.md
+++ b/files/ru/web/svg/attribute/lengthadjust/index.md
@@ -3,6 +3,8 @@ title: lengthAdjust
slug: Web/SVG/Attribute/lengthAdjust
---
+{{SVGRef}}
+
Когда SVG элемент `<text>` **или** `<tspan>` имеет конкретную длину, установленную с помощью атрибута `textLengt`, атрибут `lengthAdjust` контролирует как текст помещается в эту длину (растягивается или сжимается).
Существует 2 допустимых значения для атрибута `lengthAdjust`: `spacing` и `spacingAndGlyphs`. Используя `spacing` (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя `spacingAndGlyphs` весь тестовый элемент растягивается.
diff --git a/files/ru/web/svg/attribute/letter-spacing/index.md b/files/ru/web/svg/attribute/letter-spacing/index.md
index 80c8d0119d04fc..5ae7a2b217f58a 100644
--- a/files/ru/web/svg/attribute/letter-spacing/index.md
+++ b/files/ru/web/svg/attribute/letter-spacing/index.md
@@ -3,6 +3,8 @@ title: letter-spacing
slug: Web/SVG/Attribute/letter-spacing
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Атрибут `letter-spacing` контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута {{ SVGAttr("kerning") }} .
diff --git a/files/ru/web/svg/attribute/lighting-color/index.md b/files/ru/web/svg/attribute/lighting-color/index.md
index 315a2b570e586b..d3a90436fcaa43 100644
--- a/files/ru/web/svg/attribute/lighting-color/index.md
+++ b/files/ru/web/svg/attribute/lighting-color/index.md
@@ -3,6 +3,8 @@ title: lighting-color
slug: Web/SVG/Attribute/lighting-color
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Атрибут `lighting-color` определяет цвет источника света для примитивов фильтров {{ SVGElement("feDiffuseLighting") }} и {{ SVGElement("feSpecularLighting") }}.
diff --git a/files/ru/web/svg/attribute/overflow/index.md b/files/ru/web/svg/attribute/overflow/index.md
index 521f225ea9190c..2a1e6cb444fff5 100644
--- a/files/ru/web/svg/attribute/overflow/index.md
+++ b/files/ru/web/svg/attribute/overflow/index.md
@@ -3,6 +3,8 @@ title: overflow
slug: Web/SVG/Attribute/overflow
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Атрибут `overflow` имеет те же значения, что определены для {{ cssxref("overflow","CSS-свойства overflow") }}. Но имеют место также следующие дополнительные моменты:
diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.md b/files/ru/web/svg/attribute/patterncontentunits/index.md
index cd20008e2d77ef..aa60aac886e70e 100644
--- a/files/ru/web/svg/attribute/patterncontentunits/index.md
+++ b/files/ru/web/svg/attribute/patterncontentunits/index.md
@@ -3,6 +3,8 @@ title: patternContentUnits
slug: Web/SVG/Attribute/patternContentUnits
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
Атрибут `patternContentUnits` определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определён на {{ SVGElement("pattern") }} элементе.
diff --git a/files/ru/web/svg/attribute/shape-rendering/index.md b/files/ru/web/svg/attribute/shape-rendering/index.md
index c29ce034aaab3b..73640f09a93edf 100644
--- a/files/ru/web/svg/attribute/shape-rendering/index.md
+++ b/files/ru/web/svg/attribute/shape-rendering/index.md
@@ -3,6 +3,8 @@ title: shape-rendering
slug: Web/SVG/Attribute/shape-rendering
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
При создании SVG есть возможность указать браузеру, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. `shape-rendering` предоставляет возможность указывать данные рекомендации.
diff --git a/files/ru/web/svg/attribute/stop-color/index.md b/files/ru/web/svg/attribute/stop-color/index.md
index 512812e86c9b6c..8069876f47d3a9 100644
--- a/files/ru/web/svg/attribute/stop-color/index.md
+++ b/files/ru/web/svg/attribute/stop-color/index.md
@@ -3,6 +3,8 @@ title: stop-color
slug: Web/SVG/Attribute/stop-color
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Атрибут `stop-color` указывает какой цвет использовать при остановке градиента. Значения `currentColor` и ICC цвета могут быть заданы так же, как в [\<paint>](/en/SVG/Content_type#Paint) спецификации для атрибутов {{ SVGAttr("fill") }} и {{ SVGAttr("stroke") }}.
diff --git a/files/ru/web/svg/attribute/stroke-width/index.md b/files/ru/web/svg/attribute/stroke-width/index.md
index 87febe80b65fdb..a43a558869aef4 100644
--- a/files/ru/web/svg/attribute/stroke-width/index.md
+++ b/files/ru/web/svg/attribute/stroke-width/index.md
@@ -3,6 +3,8 @@ title: stroke-width
slug: Web/SVG/Attribute/stroke-width
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
Атрибут `stroke-width` указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется \<percentage>, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован.
diff --git a/files/ru/web/svg/attribute/stroke/index.md b/files/ru/web/svg/attribute/stroke/index.md
index dc881760b14281..4e89923effa9e9 100644
--- a/files/ru/web/svg/attribute/stroke/index.md
+++ b/files/ru/web/svg/attribute/stroke/index.md
@@ -3,6 +3,8 @@ title: stroke
slug: Web/SVG/Attribute/stroke
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — **None**.
diff --git a/files/ru/web/svg/attribute/text-anchor/index.md b/files/ru/web/svg/attribute/text-anchor/index.md
index a2ed15a2770b10..84c776efccd7eb 100644
--- a/files/ru/web/svg/attribute/text-anchor/index.md
+++ b/files/ru/web/svg/attribute/text-anchor/index.md
@@ -3,6 +3,8 @@ title: text-anchor
slug: Web/SVG/Attribute/text-anchor
---
+{{SVGRef}}
+
« [Справочник SVG Атрибутов](/en/SVG/Attribute)
Атрибут `text-anchor` используется для выравнивания
diff --git a/files/ru/web/svg/attribute/text-rendering/index.md b/files/ru/web/svg/attribute/text-rendering/index.md
index 5ed997c369531f..05e9a71eeb79ac 100644
--- a/files/ru/web/svg/attribute/text-rendering/index.md
+++ b/files/ru/web/svg/attribute/text-rendering/index.md
@@ -3,6 +3,8 @@ title: text-rendering
slug: Web/SVG/Attribute/text-rendering
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. `text-rendering` предоставляет возможность указывать данные рекомендации.
diff --git a/files/ru/web/svg/attribute/transform/index.md b/files/ru/web/svg/attribute/transform/index.md
index 71444ead2926c6..d4a0e38b48e2ac 100644
--- a/files/ru/web/svg/attribute/transform/index.md
+++ b/files/ru/web/svg/attribute/transform/index.md
@@ -3,6 +3,8 @@ title: transform
slug: Web/SVG/Attribute/transform
---
+{{SVGRef}}
+
« [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute)
В атрибуте `transform` перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.
diff --git a/files/ru/web/svg/attribute/values/index.md b/files/ru/web/svg/attribute/values/index.md
index 6968c68d4c3c4c..657a93e0b8aef3 100644
--- a/files/ru/web/svg/attribute/values/index.md
+++ b/files/ru/web/svg/attribute/values/index.md
@@ -3,6 +3,8 @@ title: values
slug: Web/SVG/Attribute/values
---
+{{SVGRef}}
+
« [SVG Attribute reference home](/en/SVG/Attribute)
Атрибут `values` имеет два значения в зависимости от используемого контекста.
diff --git a/files/ru/web/svg/attribute/xml_colon_space/index.md b/files/ru/web/svg/attribute/xml_colon_space/index.md
index 40466e94cd9e79..26176470c4ad54 100644
--- a/files/ru/web/svg/attribute/xml_colon_space/index.md
+++ b/files/ru/web/svg/attribute/xml_colon_space/index.md
@@ -3,7 +3,7 @@ title: xml:space
slug: Web/SVG/Attribute/xml:space
---
-{{deprecated_header("SVG2")}}
+{{SVGRef}}{{Deprecated_Header}}
« [SVG Attribute reference home](/en/SVG/Attribute)
diff --git a/files/ru/web/svg/element/index.md b/files/ru/web/svg/element/index.md
index ee2fa4420a0ec7..27b8deb05c0b11 100644
--- a/files/ru/web/svg/element/index.md
+++ b/files/ru/web/svg/element/index.md
@@ -3,6 +3,8 @@ title: Справочник SVG элементов
slug: Web/SVG/Element
---
+{{SVGRef}}
+
« [SVG](/ru/docs/Web/SVG) / [Справочник SVG атрибутов](/ru/docs/Web/SVG/Attribute) »
## SVG элементы
diff --git a/files/ru/web/svg/index.md b/files/ru/web/svg/index.md
index 35ca0f0a6ec659..4f2d7a0fcdf5db 100644
--- a/files/ru/web/svg/index.md
+++ b/files/ru/web/svg/index.md
@@ -3,6 +3,8 @@ title: SVG
slug: Web/SVG
---
+{{SVGRef}}
+
**[С чего начать](/ru/docs/Web/SVG/Tutorial)**
Этот урок поможет вам начать использовать SVG.
diff --git a/files/ru/web/svg/svg_as_an_image/index.md b/files/ru/web/svg/svg_as_an_image/index.md
index 461746db057c52..06474f8b74227c 100644
--- a/files/ru/web/svg/svg_as_an_image/index.md
+++ b/files/ru/web/svg/svg_as_an_image/index.md
@@ -3,6 +3,8 @@ title: SVG как изображение
slug: Web/SVG/SVG_as_an_Image
---
+{{SVGRef}}
+
Изображения SVG могут использоваться как формат изображения в ряде контекстов. Многие браузеры поддерживают изображения SVG:
- Элементы HTML {{HTMLElement("img")}} или {{SVGElement("svg")}}
diff --git a/files/ru/web/svg/tutorial/basic_shapes/index.md b/files/ru/web/svg/tutorial/basic_shapes/index.md
index 05ff6fafa1e20c..64297d43165b21 100644
--- a/files/ru/web/svg/tutorial/basic_shapes/index.md
+++ b/files/ru/web/svg/tutorial/basic_shapes/index.md
@@ -3,7 +3,7 @@ title: Основные Фигуры
slug: Web/SVG/Tutorial/Basic_Shapes
---
-{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
Существует несколько основных фигур, используемых в большинстве рисунков SVG. Назначение этих фигур вполне очевидно из их имён. Мы привели здесь некоторые атрибуты, определяющие положение и размер, но спецификация элемента, вероятно, содержит более точное и полное описание, вместе с другими свойствами, не описанными здесь. Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.
diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.md b/files/ru/web/svg/tutorial/basic_transformations/index.md
index b6cbb4e1172797..502b2001a39f8a 100644
--- a/files/ru/web/svg/tutorial/basic_transformations/index.md
+++ b/files/ru/web/svg/tutorial/basic_transformations/index.md
@@ -3,7 +3,7 @@ title: Базовые трансформации
slug: Web/SVG/Tutorial/Basic_Transformations
---
-{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
+{{SVGRef}}{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель.
diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.md b/files/ru/web/svg/tutorial/clipping_and_masking/index.md
index 8886e08eed6e0c..50c07303a9adbe 100644
--- a/files/ru/web/svg/tutorial/clipping_and_masking/index.md
+++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.md
@@ -3,7 +3,7 @@ title: Обрезка и маска
slug: Web/SVG/Tutorial/Clipping_and_masking
---
-{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}
На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнётесь со следующими свойствами.
diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.md b/files/ru/web/svg/tutorial/fills_and_strokes/index.md
index 8227c9e4e4fc82..554d302f9acd09 100644
--- a/files/ru/web/svg/tutorial/fills_and_strokes/index.md
+++ b/files/ru/web/svg/tutorial/fills_and_strokes/index.md
@@ -3,7 +3,7 @@ title: Заливка и обводка
slug: Web/SVG/Tutorial/Fills_and_Strokes
---
-{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}
Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.
diff --git a/files/ru/web/svg/tutorial/filter_effects/index.md b/files/ru/web/svg/tutorial/filter_effects/index.md
index a4bd62c3b5a0a8..5c14d7c9c24287 100644
--- a/files/ru/web/svg/tutorial/filter_effects/index.md
+++ b/files/ru/web/svg/tutorial/filter_effects/index.md
@@ -3,7 +3,7 @@ title: Фильтры
slug: Web/SVG/Tutorial/Filter_effects
---
-{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}
Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определённого эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов.
diff --git a/files/ru/web/svg/tutorial/getting_started/index.md b/files/ru/web/svg/tutorial/getting_started/index.md
index 24ceb154494a92..785be8452fd008 100644
--- a/files/ru/web/svg/tutorial/getting_started/index.md
+++ b/files/ru/web/svg/tutorial/getting_started/index.md
@@ -3,7 +3,7 @@ title: Начало работы
slug: Web/SVG/Tutorial/Getting_Started
---
-{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}
### Простой пример
diff --git a/files/ru/web/svg/tutorial/gradients/index.md b/files/ru/web/svg/tutorial/gradients/index.md
index 1181132a140f54..0cdf27c067cded 100644
--- a/files/ru/web/svg/tutorial/gradients/index.md
+++ b/files/ru/web/svg/tutorial/gradients/index.md
@@ -3,7 +3,7 @@ title: Градиенты
slug: Web/SVG/Tutorial/Gradients
---
-{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}
Возможность создания и использования градиентов, также как заливки и обводки, более интересна, чем просто заливка или обводка.
diff --git a/files/ru/web/svg/tutorial/index.md b/files/ru/web/svg/tutorial/index.md
index 961e009d04a764..c83a243853a5e3 100644
--- a/files/ru/web/svg/tutorial/index.md
+++ b/files/ru/web/svg/tutorial/index.md
@@ -3,6 +3,8 @@ title: SVG — учебное руководство
slug: Web/SVG/Tutorial
---
+{{SVGRef}}
+
Масштабируемая векторная графика ([SVG](/en-US/Web/SVG)), — это подмножество расширяемого языка разметки XML созданный Консорциумом Всемирной паутины (W3C). Эта технология реализована в Firefox, Opera, Internet Explorer, WebKit и в прочих браузерах.
Это учебное пособие призвано объяснить вам суть технологии SVG и ознакомить с её техническими деталями. Если вы хотите только рисовать красивые изображения, то вы можете найти более полезные учебные ресурсы. Есть хорошее учебное пособие для знакомства с SVG — это учебное пособие от W3C [SVG Primer](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html).
diff --git a/files/ru/web/svg/tutorial/introduction/index.md b/files/ru/web/svg/tutorial/introduction/index.md
index 748c7dcc9d29bc..904bbc5741554f 100644
--- a/files/ru/web/svg/tutorial/introduction/index.md
+++ b/files/ru/web/svg/tutorial/introduction/index.md
@@ -3,7 +3,7 @@ title: Введение
slug: Web/SVG/Tutorial/Introduction
---
-{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}
[SVG](/en-US/SVG) это язык [XML](/en-US/XML) разметки, схожий с [XHTML](/en-US/XHTML), который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путём указания всех необходимых линий и форм, путём модификации уже существующих растровых изображений, или путём комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.
diff --git a/files/ru/web/svg/tutorial/other_content_in_svg/index.md b/files/ru/web/svg/tutorial/other_content_in_svg/index.md
index e46e87c9a204ff..4d6ba9f84e1323 100644
--- a/files/ru/web/svg/tutorial/other_content_in_svg/index.md
+++ b/files/ru/web/svg/tutorial/other_content_in_svg/index.md
@@ -3,7 +3,7 @@ title: Другое содержание в SVG
slug: Web/SVG/Tutorial/Other_content_in_SVG
---
-{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}
Помимо графических примитивов, таких как прямоугольники и круги, SVG предлагает набор элементов для встраивания других типов контента в изображения.
diff --git a/files/ru/web/svg/tutorial/paths/index.md b/files/ru/web/svg/tutorial/paths/index.md
index aa45d240ade3e4..398fc03992b58e 100644
--- a/files/ru/web/svg/tutorial/paths/index.md
+++ b/files/ru/web/svg/tutorial/paths/index.md
@@ -3,7 +3,7 @@ title: Пути (paths)
slug: Web/SVG/Tutorial/Paths
---
-{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}
Элемент [`<path>`](/ru/docs/Web/SVG/Element/path) ("путь")– наиболее мощный элемент в библиотеке [основных форм](/ru/docs/Web/SVG/Tutorial/Basic_Shapes) SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.
diff --git a/files/ru/web/svg/tutorial/patterns/index.md b/files/ru/web/svg/tutorial/patterns/index.md
index ff7268959b8140..7fe017869d5430 100644
--- a/files/ru/web/svg/tutorial/patterns/index.md
+++ b/files/ru/web/svg/tutorial/patterns/index.md
@@ -3,7 +3,7 @@ title: Шаблоны
slug: Web/SVG/Tutorial/Patterns
---
-{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}
## Шаблоны (Patterns)
diff --git a/files/ru/web/svg/tutorial/positions/index.md b/files/ru/web/svg/tutorial/positions/index.md
index a6a9cbca6ba5e1..6fdc6cdca80f97 100644
--- a/files/ru/web/svg/tutorial/positions/index.md
+++ b/files/ru/web/svg/tutorial/positions/index.md
@@ -3,7 +3,7 @@ title: Расположение (позиции)
slug: Web/SVG/Tutorial/Positions
---
-{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}
## Сетка
diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.md b/files/ru/web/svg/tutorial/svg_and_css/index.md
index a36e388ee480db..03d8011b069cb1 100644
--- a/files/ru/web/svg/tutorial/svg_and_css/index.md
+++ b/files/ru/web/svg/tutorial/svg_and_css/index.md
@@ -3,6 +3,8 @@ title: SVG и CSS
slug: Web/SVG/Tutorial/SVG_and_CSS
---
+{{SVGRef}}
+
На этой странице показано, как использовать CSS со специальным языком для создания графики: [SVG](/ru/docs/SVG).
Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.
diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.md b/files/ru/web/svg/tutorial/svg_fonts/index.md
index 92a72ebd680dba..a7f6fb08d4f01e 100644
--- a/files/ru/web/svg/tutorial/svg_fonts/index.md
+++ b/files/ru/web/svg/tutorial/svg_fonts/index.md
@@ -3,7 +3,7 @@ title: SVG шрифты
slug: Web/SVG/Tutorial/SVG_fonts
---
-{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}
Когда был написан стандарт SVG, поддержка веб-шрифтов ещё не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.
diff --git a/files/ru/web/svg/tutorial/svg_image_tag/index.md b/files/ru/web/svg/tutorial/svg_image_tag/index.md
index 73232cb9f829e5..e1af8d21478ed5 100644
--- a/files/ru/web/svg/tutorial/svg_image_tag/index.md
+++ b/files/ru/web/svg/tutorial/svg_image_tag/index.md
@@ -3,7 +3,7 @@ title: SVG image element
slug: Web/SVG/Tutorial/SVG_Image_Tag
---
-{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}
+{{SVGRef}}{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}
SVG тег {{ SVGElement("image") }} позволяет выводить растровые изображения внутри SVG-объектов.
diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.md b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.md
index 80c58cdcb60c2c..a974526f5b1b69 100644
--- a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.md
+++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.md
@@ -3,6 +3,8 @@ title: SVG в HTML. Введение
slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
---
+{{SVGRef}}
+
## Описание
Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.
diff --git a/files/ru/web/svg/tutorial/texts/index.md b/files/ru/web/svg/tutorial/texts/index.md
index 931c9b666aad68..3f8514ee839cb5 100644
--- a/files/ru/web/svg/tutorial/texts/index.md
+++ b/files/ru/web/svg/tutorial/texts/index.md
@@ -3,7 +3,7 @@ title: Текст
slug: Web/SVG/Tutorial/Texts
---
-{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
+{{SVGRef}}{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.
diff --git a/files/ru/web/xml/parsing_and_serializing_xml/index.md b/files/ru/web/xml/parsing_and_serializing_xml/index.md
index a72b4f0b3775db..0c3bc3db089d16 100644
--- a/files/ru/web/xml/parsing_and_serializing_xml/index.md
+++ b/files/ru/web/xml/parsing_and_serializing_xml/index.md
@@ -3,6 +3,8 @@ title: Прямая и обратная обработка XML
slug: Web/XML/Parsing_and_serializing_XML
---
+{{QuickLinksWithSubpages("/ru/docs/Web/XML")}}
+
Иногда возникает необходимость в обработке {{Glossary("XML")}} и в последующей конвертации в древо {{Glossary("DOM")}}. Или наоборот, необходимо перевести древо DOM в XML. В этой статье рассмотрим объекты платформы web для обработки XML.
- {{domxref("XMLSerializer")}}
diff --git a/files/ru/web/xml/xml_introduction/index.md b/files/ru/web/xml/xml_introduction/index.md
index ee9cd2b375b570..40cf7d85574fa1 100644
--- a/files/ru/web/xml/xml_introduction/index.md
+++ b/files/ru/web/xml/xml_introduction/index.md
@@ -3,6 +3,8 @@ title: XML Введение
slug: Web/XML/XML_introduction
---
+{{QuickLinksWithSubpages("/ru/docs/Web/XML")}}
+
XML - это язык разметки подобный HTML. Расшифровывается как (англ. Extensible Markup Language - Расширяемый Язык Разметки) и является рекомендацией сообщества [W3C](https://www.w3.org) в качестве языка разметки общего назначения ([W3C recommended](https://www.w3.org/TR/xml/)). В отличии от остальных языков разметки, XML сам по себе не определён (это означает, что вы должны сами определять используемые теги). Основной целью XML является передача данных между разными системами (даже концептуально разными), такими как интернет.
Много языков базируются на XML; Некоторые примеры: [XHTML](/ru/docs/Glossary/XHTML), [MathML](/ru/docs/Web/MathML), [SVG](/ru/docs/Web/SVG), [XUL](/ru/docs/Mozilla/Tech/XUL), [XBL](/ru/docs/Mozilla/Tech/XBL), [RSS](/ru/docs/Web/RSS), и [RDF](/ru/docs/RDF). Вы можете создать свой.
diff --git a/files/ru/web/xpath/functions/floor/index.md b/files/ru/web/xpath/functions/floor/index.md
index 28ebc0f4f09e2c..f29814d4a219b2 100644
--- a/files/ru/web/xpath/functions/floor/index.md
+++ b/files/ru/web/xpath/functions/floor/index.md
@@ -3,7 +3,7 @@ title: Floor
slug: Web/XPath/Functions/floor
---
-{{ XsltRef() }}
+{{XsltSidebar}}
Функция `floor` принимает десятичное число и возвращает наибольшее целое, меньшее или равное исходному.
diff --git a/files/ru/web/xslt/index.md b/files/ru/web/xslt/index.md
index 528373ef068391..b7312fe3f5fc22 100644
--- a/files/ru/web/xslt/index.md
+++ b/files/ru/web/xslt/index.md
@@ -3,6 +3,8 @@ title: XSLT
slug: Web/XSLT
---
+{{XsltSidebar}}
+
**XSLT** (_Extensible Stylesheet Language Transformations_) — является языком на основе XML, используемым вместе со специализированным программным обеспечением для преобразования [XML](http://ru.wikipedia.org/wiki/XML)-документов. Спецификация XSLT является рекомендацией [W3C](http://ru.wikipedia.org/wiki/W3C).
Хотя этот процесс называется «преобразованием», исходный документ не изменяется; скорее новый документ XML создаётся на основе содержимого существующего документа. Затем новый документ может быть сериализован (выведен) процессором в стандартном синтаксисе XML или в другом формате, таком как [HTML](/ru/docs/Web/HTML) или простой текст.
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 8715e12ae4e51f..cf3da9a7daed40 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -421,8 +421,8 @@
/zh-CN/docs/DOM/window.URL.createObjectURL /zh-CN/docs/Web/API/URL/createObjectURL_static
/zh-CN/docs/DOM/window.URL.revokeObjectURL /zh-CN/docs/Web/API/URL/revokeObjectURL_static
/zh-CN/docs/DOM/window.alert /zh-CN/docs/Web/API/Window/alert
-/zh-CN/docs/DOM/window.atob /zh-CN/docs/Web/API/atob
-/zh-CN/docs/DOM/window.btoa /zh-CN/docs/Web/API/btoa
+/zh-CN/docs/DOM/window.atob /zh-CN/docs/Web/API/Window/atob
+/zh-CN/docs/DOM/window.btoa /zh-CN/docs/Web/API/Window/btoa
/zh-CN/docs/DOM/window.cancelAnimationFrame /zh-CN/docs/Web/API/Window/cancelAnimationFrame
/zh-CN/docs/DOM/window.clearImmediate /zh-CN/docs/Web/API/Window/clearImmediate
/zh-CN/docs/DOM/window.clearInterval /zh-CN/docs/Web/API/clearInterval
@@ -521,9 +521,11 @@
/zh-CN/docs/Glossary/Descriptor_(CSS) /zh-CN/docs/Glossary/CSS_Descriptor
/zh-CN/docs/Glossary/Empty_element /zh-CN/docs/Glossary/Void_element
/zh-CN/docs/Glossary/Grid_Rows /zh-CN/docs/Glossary/Grid_Row
+/zh-CN/docs/Glossary/Guard /zh-CN/docs/Web/API/Fetch_API/Using_Fetch
/zh-CN/docs/Glossary/Header /zh-CN/docs/Glossary/HTTP_header
/zh-CN/docs/Glossary/I18N /zh-CN/docs/Glossary/Internationalization
/zh-CN/docs/Glossary/IP地址 /zh-CN/docs/Glossary/IP_Address
+/zh-CN/docs/Glossary/Rendering_engine /zh-CN/docs/Glossary/Engine/Rendering
/zh-CN/docs/Glossary/Serialize /zh-CN/docs/Glossary/Serialization
/zh-CN/docs/Glossary/Simple_header /zh-CN/docs/Glossary/CORS-safelisted_request_header
/zh-CN/docs/Glossary/Simple_response_header /zh-CN/docs/Glossary/CORS-safelisted_response_header
@@ -1376,7 +1378,7 @@
/zh-CN/docs/Web/API/Coordinates/latitude /zh-CN/docs/Web/API/GeolocationCoordinates/latitude
/zh-CN/docs/Web/API/DOMImplementation.createHTMLDocument /zh-CN/docs/Web/API/DOMImplementation/createHTMLDocument
/zh-CN/docs/Web/API/DOMString /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
-/zh-CN/docs/Web/API/DOMString/Binary /zh-CN/docs/Web/API/btoa
+/zh-CN/docs/Web/API/DOMString/Binary /zh-CN/docs/Web/API/Window/btoa
/zh-CN/docs/Web/API/DOMTimeStamp /zh-CN/docs/Glossary/Unix_time
/zh-CN/docs/Web/API/DeviceAcceleration /zh-CN/docs/Web/API/DeviceMotionEventAcceleration
/zh-CN/docs/Web/API/Document.querySelectorAll /zh-CN/docs/Web/API/Document/querySelectorAll
@@ -1421,6 +1423,7 @@
/zh-CN/docs/Web/API/DocumentOrShadowRoot/fullscreenElement /zh-CN/docs/Web/API/Document/fullscreenElement
/zh-CN/docs/Web/API/DocumentOrShadowRoot/pointerLockElement /zh-CN/docs/Web/API/Document/pointerLockElement
/zh-CN/docs/Web/API/DocumentOrShadowRoot/styleSheets /zh-CN/docs/Web/API/Document/styleSheets
+/zh-CN/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree /zh-CN/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
/zh-CN/docs/Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core /zh-CN/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model
/zh-CN/docs/Web/API/Element.classList /zh-CN/docs/Web/API/Element/classList
/zh-CN/docs/Web/API/Element.className /zh-CN/docs/Web/API/Element/className
@@ -1479,7 +1482,8 @@
/zh-CN/docs/Web/API/FetchController /zh-CN/docs/Web/API/AbortController
/zh-CN/docs/Web/API/FetchController/AbortController /zh-CN/docs/Web/API/AbortController/AbortController
/zh-CN/docs/Web/API/FetchController/abort /zh-CN/docs/Web/API/AbortController/abort
-/zh-CN/docs/Web/API/Fetch_API/基本概念 /zh-CN/docs/Web/API/Fetch_API/Basic_concepts
+/zh-CN/docs/Web/API/Fetch_API/Basic_concepts /zh-CN/docs/Web/API/Fetch_API/Using_Fetch
+/zh-CN/docs/Web/API/Fetch_API/基本概念 /zh-CN/docs/Web/API/Fetch_API/Using_Fetch
/zh-CN/docs/Web/API/File.fileName /zh-CN/docs/Web/API/File/name
/zh-CN/docs/Web/API/File.fileSize /zh-CN/docs/Web/API/Blob/size
/zh-CN/docs/Web/API/File.lastModifiedDate /zh-CN/docs/Web/API/File/lastModifiedDate
@@ -1809,8 +1813,8 @@
/zh-CN/docs/Web/API/Web_Audio_API/基于Web_Audio_API实现的音频可视化效果 /zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
/zh-CN/docs/Web/API/Web_Audio_API/最佳实践 /zh-CN/docs/Web/API/Web_Audio_API/Best_practices
/zh-CN/docs/Web/API/Window.alert /zh-CN/docs/Web/API/Window/alert
-/zh-CN/docs/Web/API/Window.atob /zh-CN/docs/Web/API/atob
-/zh-CN/docs/Web/API/Window.btoa /zh-CN/docs/Web/API/btoa
+/zh-CN/docs/Web/API/Window.atob /zh-CN/docs/Web/API/Window/atob
+/zh-CN/docs/Web/API/Window.btoa /zh-CN/docs/Web/API/Window/btoa
/zh-CN/docs/Web/API/Window.cancelAnimationFrame /zh-CN/docs/Web/API/Window/cancelAnimationFrame
/zh-CN/docs/Web/API/Window.clearImmediate /zh-CN/docs/Web/API/Window/clearImmediate
/zh-CN/docs/Web/API/Window.clearInterval /zh-CN/docs/Web/API/clearInterval
@@ -1858,8 +1862,6 @@
/zh-CN/docs/Web/API/Window.top /zh-CN/docs/Web/API/Window/top
/zh-CN/docs/Web/API/Window/DOMContentLoaded_event /zh-CN/docs/Web/API/Document/DOMContentLoaded_event
/zh-CN/docs/Web/API/Window/Window.blur() /zh-CN/docs/Web/API/Window/blur
-/zh-CN/docs/Web/API/Window/atob /zh-CN/docs/Web/API/atob
-/zh-CN/docs/Web/API/Window/btoa /zh-CN/docs/Web/API/btoa
/zh-CN/docs/Web/API/Window/clearInterval /zh-CN/docs/Web/API/clearInterval
/zh-CN/docs/Web/API/Window/content /zh-CN/docs/Web/API/Window
/zh-CN/docs/Web/API/Window/minimize /zh-CN/docs/Web/API/Window
@@ -1880,8 +1882,8 @@
/zh-CN/docs/Web/API/Window/setInterval /zh-CN/docs/Web/API/setInterval
/zh-CN/docs/Web/API/Window/setTimeout /zh-CN/docs/Web/API/setTimeout
/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /zh-CN/docs/Glossary/Base64
-/zh-CN/docs/Web/API/WindowBase64/atob /zh-CN/docs/Web/API/atob
-/zh-CN/docs/Web/API/WindowBase64/btoa /zh-CN/docs/Web/API/btoa
+/zh-CN/docs/Web/API/WindowBase64/atob /zh-CN/docs/Web/API/Window/atob
+/zh-CN/docs/Web/API/WindowBase64/btoa /zh-CN/docs/Web/API/Window/btoa
/zh-CN/docs/Web/API/WindowEventHandlers/onafterprint /zh-CN/docs/Web/API/Window/afterprint_event
/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeprint /zh-CN/docs/Web/API/Window/beforeprint_event
/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload /zh-CN/docs/Web/API/Window/beforeunload_event
@@ -1891,8 +1893,8 @@
/zh-CN/docs/Web/API/WindowEventHandlers/onpopstate /zh-CN/docs/Web/API/Window/popstate_event
/zh-CN/docs/Web/API/WindowEventHandlers/onstorage /zh-CN/docs/Web/API/Window/storage_event
/zh-CN/docs/Web/API/WindowEventHandlers/onunload /zh-CN/docs/Web/API/Window/unload_event
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob /zh-CN/docs/Web/API/atob
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa /zh-CN/docs/Web/API/btoa
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob /zh-CN/docs/Web/API/Window/atob
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa /zh-CN/docs/Web/API/Window/btoa
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/caches /zh-CN/docs/Web/API/Window/caches
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /zh-CN/docs/Web/API/clearInterval
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /zh-CN/docs/Web/API/clearTimeout
@@ -1923,6 +1925,8 @@
/zh-CN/docs/Web/API/XMLHttpRequestEventTarget/onload /zh-CN/docs/Web/API/XMLHttpRequest/load_event
/zh-CN/docs/Web/API/XMLHttpRequestEventTarget/onloadstart /zh-CN/docs/Web/API/XMLHttpRequest/loadstart_event
/zh-CN/docs/Web/API/XMLHttpRequestEventTarget/onprogress /zh-CN/docs/Web/API/XMLHttpRequest/progress_event
+/zh-CN/docs/Web/API/atob /zh-CN/docs/Web/API/Window/atob
+/zh-CN/docs/Web/API/btoa /zh-CN/docs/Web/API/Window/btoa
/zh-CN/docs/Web/API/caches /zh-CN/docs/Web/API/Window/caches
/zh-CN/docs/Web/API/console.dir /zh-CN/docs/Web/API/console/dir_static
/zh-CN/docs/Web/API/console.group /zh-CN/docs/Web/API/console/group_static
@@ -2207,7 +2211,6 @@
/zh-CN/docs/Web/CSS/文本装饰线厚度(粗细) /zh-CN/docs/Web/CSS/text-decoration-thickness
/zh-CN/docs/Web/CSS/混合模式 /zh-CN/docs/Web/CSS/blend-mode
/zh-CN/docs/Web/CSS/网格-模板-列 /zh-CN/docs/Web/CSS/grid-template-rows
-/zh-CN/docs/Web/Demos_of_open_web_technologies /zh-CN/docs/Web/Demos
/zh-CN/docs/Web/Events/Activate /zh-CN/docs/Web/API/Element/DOMActivate_event
/zh-CN/docs/Web/Events/DOMContentLoaded /zh-CN/docs/Web/API/Document/DOMContentLoaded_event
/zh-CN/docs/Web/Events/DOMContentLoaded_(event) /zh-CN/docs/Web/API/Document/DOMContentLoaded_event
@@ -2710,7 +2713,9 @@
/zh-CN/docs/Web/SVG/Element/线性渐变 /zh-CN/docs/Web/SVG/Element/linearGradient
/zh-CN/docs/Web/SVG/Tutorial/渐变 /zh-CN/docs/Web/SVG/Tutorial/Gradients
/zh-CN/docs/Web/Security/CSP/Using_Content_Security_Policy /zh-CN/docs/Web/HTTP/CSP
+/zh-CN/docs/Web/Security/Securing_your_site /zh-CN/docs/Web/Security/Practical_implementation_guides
/zh-CN/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types /zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types
+/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /zh-CN/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
/zh-CN/docs/Web/Security/传输层安全协议 /zh-CN/docs/Web/Security/Transport_Layer_Security
/zh-CN/docs/Web/Security/子资源完整性 /zh-CN/docs/Web/Security/Subresource_Integrity
/zh-CN/docs/Web/WEB_API_---js /zh-CN/docs/Web/API
@@ -2728,7 +2733,6 @@
/zh-CN/docs/Web/媒体 /zh-CN/docs/Web/Media
/zh-CN/docs/Web/媒体/Autoplay_guide /zh-CN/docs/Web/Media/Autoplay_guide
/zh-CN/docs/Web/性能 /zh-CN/docs/Web/Performance
-/zh-CN/docs/Web/演示说明 /zh-CN/docs/Web/Demos
/zh-CN/docs/WebAPI/Using_geolocation /zh-CN/docs/Web/API/Geolocation_API
/zh-CN/docs/WebAssembly/JavaScript_interface/compile /zh-CN/docs/WebAssembly/JavaScript_interface/compile_static
/zh-CN/docs/WebAssembly/JavaScript_interface/compileStreaming /zh-CN/docs/WebAssembly/JavaScript_interface/compileStreaming_static
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index a05ca574fa6837..9d8dcc3e38b795 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -903,10 +903,6 @@
"modified": "2019-03-18T21:34:38.990Z",
"contributors": ["yshenhua"]
},
- "Glossary/Guard": {
- "modified": "2019-03-18T20:37:40.179Z",
- "contributors": ["aximario"]
- },
"Glossary/Gutters": {
"modified": "2020-06-14T12:16:58.334Z",
"contributors": ["lmx-Hexagram", "yshenhua"]
@@ -8252,10 +8248,6 @@
"modified": "2019-03-24T00:15:45.643Z",
"contributors": ["LianJilu", "Ke.shidong", "Ende93", "khalid32", "ziyunfei"]
},
- "Web/API/Document_Object_Model/How_to_create_a_DOM_tree": {
- "modified": "2019-03-23T22:09:45.087Z",
- "contributors": ["ArcherGrey"]
- },
"Web/API/Document_Object_Model/Introduction": {
"modified": "2019-07-17T11:05:34.542Z",
"contributors": [
@@ -9504,17 +9496,6 @@
"xcatliu"
]
},
- "Web/API/Fetch_API/Basic_concepts": {
- "modified": "2019-03-23T22:45:38.912Z",
- "contributors": [
- "zhuangyin",
- "jswisher",
- "xgqfrms-GitHub",
- "Jeff-Kook",
- "xcatliu",
- "ziyunfei"
- ]
- },
"Web/API/Fetch_API/Cross-global_fetch_usage": {
"modified": "2019-03-18T21:35:40.335Z",
"contributors": ["DuckSoft", "wynejan"]
@@ -15097,6 +15078,20 @@
"modified": "2019-03-18T21:40:44.436Z",
"contributors": ["Aaron_Zhung", "echoArray"]
},
+ "Web/API/Window/atob": {
+ "modified": "2020-10-15T21:07:00.713Z",
+ "contributors": [
+ "RainSlide",
+ "zhangchen",
+ "nkliyc",
+ "dingyanhe",
+ "xgqfrms-GitHub",
+ "ziyunfei",
+ "happyWang",
+ "teoli",
+ "khalid32"
+ ]
+ },
"Web/API/Window/back": {
"modified": "2019-03-23T22:12:59.387Z",
"contributors": ["xilixinluo"]
@@ -15135,6 +15130,21 @@
"modified": "2020-10-15T22:18:42.062Z",
"contributors": ["zhangchen", "mozzix"]
},
+ "Web/API/Window/btoa": {
+ "modified": "2020-10-15T21:06:58.236Z",
+ "contributors": [
+ "RainSlide",
+ "zhangchen",
+ "RoXoM",
+ "Carrotzpc",
+ "dingyanhe",
+ "xgqfrms-GitHub",
+ "ziyunfei",
+ "teoli",
+ "khalid32",
+ "cuixiping"
+ ]
+ },
"Web/API/Window/caches": {
"modified": "2019-09-21T03:33:16.440Z",
"contributors": ["JarvanMo"]
@@ -16089,35 +16099,6 @@
"modified": "2020-10-15T22:15:17.137Z",
"contributors": ["CarmeloXue", "Sebastianz"]
},
- "Web/API/atob": {
- "modified": "2020-10-15T21:07:00.713Z",
- "contributors": [
- "RainSlide",
- "zhangchen",
- "nkliyc",
- "dingyanhe",
- "xgqfrms-GitHub",
- "ziyunfei",
- "happyWang",
- "teoli",
- "khalid32"
- ]
- },
- "Web/API/btoa": {
- "modified": "2020-10-15T21:06:58.236Z",
- "contributors": [
- "RainSlide",
- "zhangchen",
- "RoXoM",
- "Carrotzpc",
- "dingyanhe",
- "xgqfrms-GitHub",
- "ziyunfei",
- "teoli",
- "khalid32",
- "cuixiping"
- ]
- },
"Web/API/clearInterval": {
"modified": "2020-10-15T21:21:33.193Z",
"contributors": [
@@ -20856,17 +20837,6 @@
"TimZhao"
]
},
- "Web/Demos": {
- "modified": "2019-09-04T03:32:34.828Z",
- "contributors": [
- "RainSlide",
- "yzweb2018",
- "nanflower",
- "Vevlins",
- "wth",
- "awesomeric"
- ]
- },
"Web/EXSLT/regexp": {
"modified": "2019-01-16T21:33:33.048Z",
"contributors": ["Sheppy"]
@@ -22764,10 +22734,6 @@
"modified": "2020-10-15T22:24:12.153Z",
"contributors": ["xuhui98"]
},
- "Web/HTTP/Headers/Accept-CH-Lifetime": {
- "modified": "2020-10-15T22:25:10.809Z",
- "contributors": ["chen3feng"]
- },
"Web/HTTP/Headers/Accept-Charset": {
"modified": "2020-10-15T21:50:53.082Z",
"contributors": ["shinken008", "Dorllen", "WayneCui", "xgqfrms-GitHub"]
@@ -31524,10 +31490,6 @@
"modified": "2019-03-23T22:46:21.766Z",
"contributors": ["fanxiaojie"]
},
- "Web/SVG/Attribute/enable-background": {
- "modified": "2020-10-15T22:34:25.447Z",
- "contributors": ["SphinxKnight", "SoMuchTo"]
- },
"Web/SVG/Attribute/end": {
"modified": "2019-03-23T22:46:42.288Z",
"contributors": ["fanxiaojie"]
@@ -32342,6 +32304,27 @@
"modified": "2020-10-15T22:15:40.587Z",
"contributors": ["Yayure"]
},
+ "Web/Security/Practical_implementation_guides": {
+ "modified": "2019-05-30T06:18:16.799Z",
+ "contributors": [
+ "Qos",
+ "Roscoe93",
+ "keep2zero",
+ "xgqfrms-GitHub",
+ "hashedhyphen"
+ ]
+ },
+ "Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion": {
+ "modified": "2020-06-26T14:51:08.712Z",
+ "contributors": [
+ "Clarkkkk",
+ "zhangchen",
+ "nick-ChenZe",
+ "tsejx",
+ "1010Tech",
+ "xgqfrms-GitHub"
+ ]
+ },
"Web/Security/Same-origin_policy": {
"modified": "2020-04-07T00:07:57.795Z",
"contributors": [
@@ -32381,27 +32364,6 @@
"modified": "2020-09-16T05:44:30.532Z",
"contributors": ["gjc9620"]
},
- "Web/Security/Securing_your_site": {
- "modified": "2019-05-30T06:18:16.799Z",
- "contributors": [
- "Qos",
- "Roscoe93",
- "keep2zero",
- "xgqfrms-GitHub",
- "hashedhyphen"
- ]
- },
- "Web/Security/Securing_your_site/Turning_off_form_autocompletion": {
- "modified": "2020-06-26T14:51:08.712Z",
- "contributors": [
- "Clarkkkk",
- "zhangchen",
- "nick-ChenZe",
- "tsejx",
- "1010Tech",
- "xgqfrms-GitHub"
- ]
- },
"Web/Security/Subresource_Integrity": {
"modified": "2020-06-01T06:08:59.407Z",
"contributors": [
diff --git a/files/zh-cn/glossary/accessibility_tree/index.md b/files/zh-cn/glossary/accessibility_tree/index.md
index 046803eacc7c52..e655299fb09681 100644
--- a/files/zh-cn/glossary/accessibility_tree/index.md
+++ b/files/zh-cn/glossary/accessibility_tree/index.md
@@ -2,14 +2,14 @@
title: 无障碍树
slug: Glossary/Accessibility_tree
l10n:
- sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+ sourceCommit: 1f44fd905e4acbe867ca945b26a8b06ddb646328
---
{{GlossarySidebar}}
**无障碍树**（Accessibility tree）包含大多数 HTML 元素的与{{Glossary("accessibility", "无障碍")}}相关的信息。
-浏览器将标记转换成一种内部表示形式，称为 [_DOM 树_](/zh-CN/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree)。DOM 树包含代表所有标记元素、属性和文本节点的对象。浏览器会根据 DOM 树创建无障碍树，而特定平台的无障碍 API 会使用该树提供辅助技术（如屏幕阅读器）可以理解的表示形式。
+浏览器将标记转换成一种内部表示形式，称为 [_DOM 树_](/zh-CN/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model)。DOM 树包含代表所有标记元素、属性和文本节点的对象。浏览器会根据 DOM 树创建无障碍树，而特定平台的无障碍 API 会使用该树提供辅助技术（如屏幕阅读器）可以理解的表示形式。
无障碍树对象有四个属性：
diff --git a/files/zh-cn/glossary/base64/index.md b/files/zh-cn/glossary/base64/index.md
index 94cf1bf92aefe5..41e9f0ad8f70f3 100644
--- a/files/zh-cn/glossary/base64/index.md
+++ b/files/zh-cn/glossary/base64/index.md
@@ -2,7 +2,7 @@
title: Base64
slug: Glossary/Base64
l10n:
- sourceCommit: 76d86face9211c33ba965763996ef09c7ee1fc68
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
---
{{GlossarySidebar}}
@@ -33,8 +33,8 @@ Base64 编码方案通常用于对二进制数据进行编码，以便在只能
浏览器原生提供了两个 JavaScript 函数，用于解码和编码 Base64 字符串：
-- [`btoa()`](/zh-CN/docs/Web/API/btoa)：从二进制数据字符串创建一个 Base64 编码的 ASCII 字符串（“btoa”应看作“从二进制到 ASCII”）
-- [`atob()`](/zh-CN/docs/Web/API/atob)：解码通过 Base64 编码的字符串数据（“atob”应看作“从 ASCII 到二进制”）
+- {{domxref("Window.btoa()")}}（也在 {{domxref("WorkerGlobalScope.btoa()", "worker 中可用", "", 1)}}）：从二进制数据字符串创建一个 Base64 编码的 ASCII 字符串（“btoa”应看作“从二进制到 ASCII”）
+- {{domxref("Window.atob()")}}（也在 {{domxref("WorkerGlobalScope.atob()", "worker 中可用", "", 1)}}）：解码通过 Base64 编码的字符串数据（“atob”应看作“从 ASCII 到二进制”）
> **备注：** Base64 是一种二进制编码，而不是文本编码，但是在 Web 平台支持二进制数据类型之前，`btoa` 和 `atob` 被添加到了其中。因此，这两个函数使用字符串来表示二进制数据，其中每个字符的{{glossary("code point", "码位")}}表示每个字节的值。这导致了一个普遍的误解，即 `btoa` 可以用来编码任意文本数据，例如创建文本或 HTML 文档的 Base64 `data:` URL。
>
@@ -94,8 +94,8 @@ await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array
## 参见
- JavaScript API:
- - [btoa() 全局函数](/zh-CN/docs/Web/API/btoa)
- - [atob() 全局函数](/zh-CN/docs/Web/API/atob)
+ - {{domxref("Window.btoa()")}}（也在 {{domxref("WorkerGlobalScope.btoa()", "worker 中可用", "", 1)}}）
+ - {{domxref("Window.atob()")}}（也在 {{domxref("WorkerGlobalScope.atob()", "worker 中可用", "", 1)}}）
- [Data URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
- 维基百科上的 [Base64](https://zh.wikipedia.org/wiki/Base64)
- [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648) 中对 Base64 算法的描述
diff --git a/files/zh-cn/glossary/bezier_curve/index.md b/files/zh-cn/glossary/bezier_curve/index.md
index 0fc3654605bb20..9501f0ecb0c977 100644
--- a/files/zh-cn/glossary/bezier_curve/index.md
+++ b/files/zh-cn/glossary/bezier_curve/index.md
@@ -2,7 +2,7 @@
title: 贝塞尔曲线
slug: Glossary/Bezier_curve
l10n:
- sourceCommit: a1596fe065b9c726f9412999d2218b7b6e256e30
+ sourceCommit: d2bf1d12a18c615b80d4bcd95bfe5c7d234c49c0
---
{{GlossarySidebar}}
@@ -13,7 +13,7 @@ l10n:
在绘制二次贝塞尔曲线的过程中，需要先作两条辅助线：P<sub>0</sub> 到 P<sub>1</sub> 和 P<sub>1</sub> 到 P<sub>2</sub>；第三条辅助线从其起点稳步移动到第一辅助线上，终点在第二辅助线上。在这条辅助线上，有一个点从其起点稳步移动到其终点。这个点描述的曲线就是贝塞尔曲线。以下是一个动画示例，展示了曲线的创建过程：
-
+
## 参见
diff --git a/files/zh-cn/glossary/dom/index.md b/files/zh-cn/glossary/dom/index.md
index 13a6df9997b8bf..75d819eb30b772 100644
--- a/files/zh-cn/glossary/dom/index.md
+++ b/files/zh-cn/glossary/dom/index.md
@@ -1,18 +1,18 @@
---
-title: DOM
+title: 文档对象模型
slug: Glossary/DOM
+l10n:
+ sourceCommit: cebbd9095ac12557c55157355181672027fffc14
---
{{GlossarySidebar}}
-DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。
+**文档对象模型**（Document Object Model，DOM）是一种用于表示任何基于 {{glossary("HTML")}} 或 {{glossary("XML")}} 的标记语言文档并能与之交互的 {{glossary("API")}}。它是加载在{{glossary("browser", "浏览器")}}中的文档模型，可以将文档表示为{{Glossary("Node/DOM","节点")}}树，或称 **DOM 树**，其中每个节点代表文档的一部分（例如，{{Glossary("element", "元素")}}、文本字符串或注释）。
-DOM 是万维网上使用最为广泛的 API 之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。
-
-DOM 并不是天生就被规范好了的，它是浏览器开始实现{{Glossary("JavaScript")}}时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在，WHATWG 维护 DOM 现存标准。
+DOM 是 {{glossary("World Wide Web","Web")}} 上最常用的 {{Glossary("API")}} 之一，因为它允许在浏览器中运行的代码访问文档中的每个节点并与之交互。可以创建、移动和更改节点，还可以将事件监听器添加到节点，并在特定事件发生时触发。
## 参见
-- [The Document Object Model](https://zh.wikipedia.org/wiki/Document_Object_Model) 在维基百科上的解释
- [MDN DOM 文档](/zh-CN/docs/Web/API/Document_Object_Model)
- [W3C 上的多种 DOM 规范](https://www.w3.org/DOM/DOMTR)
+- 维基百科上的[文档对象模型](https://zh.wikipedia.org/wiki/文档对象模型)
diff --git a/files/zh-cn/glossary/dsl/digital_subscriber_line/index.md b/files/zh-cn/glossary/dsl/digital_subscriber_line/index.md
new file mode 100644
index 00000000000000..38a351925b4e7b
--- /dev/null
+++ b/files/zh-cn/glossary/dsl/digital_subscriber_line/index.md
@@ -0,0 +1,16 @@
+---
+title: DSL（数字用户线路）
+slug: Glossary/DSL/Digital_subscriber_line
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**数字用户线路**（Digital Subscriber Line）是一种通过电话线发送有线数据传输的宽带互联网连接类型。
+
+与有线、光纤或拨号连接相比，数字用户线路的下载和上传速率不必相同。在这种情况下，该线路是*非对称*的，并使用 ADSL 的缩写。
+
+## 参见
+
+- 维基百科上的[数字用户线路](https://zh.wikipedia.org/wiki/数字用户线路)
diff --git a/files/zh-cn/glossary/dsl/domain_specific_language/index.md b/files/zh-cn/glossary/dsl/domain_specific_language/index.md
new file mode 100644
index 00000000000000..fe2a4090fde904
--- /dev/null
+++ b/files/zh-cn/glossary/dsl/domain_specific_language/index.md
@@ -0,0 +1,17 @@
+---
+title: DSL（领域特定语言）
+slug: Glossary/DSL/Domain_specific_language
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**领域特定语言**（DSL）是一种具有有限的范围的计算机语言，旨在解决应用领域内的特定问题。
+
+与之相比，_通用语言_（GPL）是为解决跨领域的各种问题而设计的。
+
+## 参见
+
+- 维基百科上的[领域特定语言](https://zh.wikipedia.org/wiki/领域特定语言)
+- martinfowler.com 上的 [DSL 指南](https://martinfowler.com/dsl.html)
diff --git a/files/zh-cn/glossary/dsl/index.md b/files/zh-cn/glossary/dsl/index.md
new file mode 100644
index 00000000000000..fb2c05f3833643
--- /dev/null
+++ b/files/zh-cn/glossary/dsl/index.md
@@ -0,0 +1,16 @@
+---
+title: DSL
+slug: Glossary/DSL
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+术语 **DSL** 在不同语境中可以有不同的意思，可以指代：
+
+{{GlossaryDisambiguation}}
+
+## 参见
+
+- 维基百科上的 [DSL](https://zh.wikipedia.org/wiki/DSL)
diff --git a/files/zh-cn/glossary/engine/rendering/index.md b/files/zh-cn/glossary/engine/rendering/index.md
new file mode 100644
index 00000000000000..58c69f65082642
--- /dev/null
+++ b/files/zh-cn/glossary/engine/rendering/index.md
@@ -0,0 +1,24 @@
+---
+title: 渲染引擎
+slug: Glossary/Engine/Rendering
+l10n:
+ sourceCommit: b49ed0d28c2cfb0f39be603a62d37bcc1ec407dc
+---
+
+{{GlossarySidebar}}
+
+**渲染引擎**（也被称作排版引擎或浏览器引擎）是 {{glossary("Browser", "Web 浏览器")}}用于将网页的 {{glossary("HTML")}}、{{glossary("CSS")}} 和其他资源转换为屏幕上的视觉表示的组件。
+
+常见的渲染引擎包括：
+
+- {{glossary("Blink")}}
+- {{glossary("Gecko")}}
+- {{glossary("WebKit")}}
+- {{glossary("Trident")}}
+
+## 参见
+
+- 维基百科上的 [Web 浏览器引擎](https://zh.wikipedia.org/wiki/浏览器引擎)
+- 术语
+ - {{Glossary("Engine", "引擎")}}
+ - {{Glossary("Browser", "Web 浏览器")}}
diff --git a/files/zh-cn/glossary/exif/index.md b/files/zh-cn/glossary/exif/index.md
new file mode 100644
index 00000000000000..ec1719ee2b70d9
--- /dev/null
+++ b/files/zh-cn/glossary/exif/index.md
@@ -0,0 +1,15 @@
+---
+title: 可交换图像文件格式
+slug: Glossary/EXIF
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**可交换图像文件格式**（EXIF）是一种规定将多媒体文件的元数据嵌入文件中的方法标准。例如，一张图片可能包含描述以下内容的 EXIF 数据：像素宽度、高度和密度、快门速度、光圈、ISO 设置、拍摄日期等。
+
+## 参见
+
+- 维基百科上的 [EXIF](https://zh.wikipedia.org/wiki/Exif)
+- [CIPA 标准，包括“CIPA DC-008-Translation-2019 数码相机的可交换图像文件格式：Exif 版本 2.32”](https://www.cipa.jp/e/std/std-sec.html)
diff --git a/files/zh-cn/glossary/first_paint/index.md b/files/zh-cn/glossary/first_paint/index.md
index a41b21a8657e11..a7a6359f5d83cd 100644
--- a/files/zh-cn/glossary/first_paint/index.md
+++ b/files/zh-cn/glossary/first_paint/index.md
@@ -1,14 +1,17 @@
---
-title: First paint
+title: 首次绘制
slug: Glossary/First_paint
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**First Paint**，是[Paint Timing API](/zh-CN/docs/)的一部分，是页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的中间时，渲染是任何与输入网页导航前的屏幕上的内容不同的内容。它回答了“发生了什么？”这个问题。
+**首次绘制**是从导航开始到浏览器首次将像素渲染到屏幕上的时间，渲染任何与 [body](/zh-CN/docs/Web/API/Document/body) 的默认[背景颜色](/zh-CN/docs/Web/CSS/background-color)不同的内容。这是页面加载中的第一个关键时刻，回答了“浏览器是否开始渲染页面？”的问题。
-## 另请参看
+## 参见
-- [First meaningful paint](/zh-CN/docs/Glossary/first_meaningful_paint)
-- [First contentful paint](/zh-CN/docs/Glossary/First_contentful_paint)
-- [Paint Timing API](/zh-CN/docs/)
+- [首次内容绘制](/zh-CN/docs/Glossary/First_contentful_paint)
+- [`PerformancePaintTiming`](/zh-CN/docs/Web/API/PerformancePaintTiming)
+- [最大内容绘制](/zh-CN/docs/Glossary/Largest_contentful_paint)
+- [首次有效绘制](/zh-CN/docs/Glossary/First_meaningful_paint)
diff --git a/files/zh-cn/glossary/flex_container/index.md b/files/zh-cn/glossary/flex_container/index.md
index 61fbacf8f414bd..19e657e302531e 100644
--- a/files/zh-cn/glossary/flex_container/index.md
+++ b/files/zh-cn/glossary/flex_container/index.md
@@ -1,13 +1,15 @@
---
title: 弹性容器
slug: Glossary/Flex_Container
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
---
{{GlossarySidebar}}
-在父元素的 `display` 属性上使用 `flex` 或 `inline-flex` 值可定义{{glossary("flexbox", "弹性盒")}}布局。此元素由此变为**弹性容器**（flex container），其任意子元素变为{{glossary("flex item", "弹性元素")}}（flex item）。
+在父元素的 `display` 属性上使用 `flex` 或 `inline-flex` 值可定义{{glossary("flexbox", "弹性盒")}}布局。此元素由此变为**弹性容器**（flex container），其任意子元素变为{{glossary("flex item", "弹性项目")}}。
-`flex` 值导致元素变为块级弹性容器，而 `inline-flex` 为行级弹性容器。这些值为元素创建了与区块格式化上下文相似的**弹性格式化上下文**（flex formatting context），浮动体将不会侵入容器，且容器的外边距将不会与元素的外边距发生折叠。
+`flex` 值会使元素变为块级弹性容器，而 `inline-flex` 值则会使元素变为行内级弹性容器。这些值为元素创建了一个**弹性格式化上下文**，类似于块格式化上下文，其中浮动元素不会侵入容器，容器的边距也不会与项目的边距重叠。
## 参见
@@ -23,6 +25,7 @@ slug: Glossary/Flex_Container
### 拓展阅读
-- CSS 弹性盒指南：_[弹性盒的基本概念](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
-- CSS 弹性盒指南：_[在弹性容器中对齐元素](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
-- CSS 弹性盒指南：_[掌握弹性元素的折行](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_
+- CSS 弹性盒指南：_[flex 布局的基本概念](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_
+- CSS 弹性盒指南：_[对齐弹性容器中的弹性项目](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_
+- CSS 弹性盒指南：_[掌握弹性项目的包装](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_
+- Firefox 开发者工具 > 如何：_[CSS 弹性盒检查器：检查弹性盒布局](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)_
diff --git a/files/zh-cn/glossary/fragmentainer/index.md b/files/zh-cn/glossary/fragmentainer/index.md
new file mode 100644
index 00000000000000..4aeadc2f9e1b0b
--- /dev/null
+++ b/files/zh-cn/glossary/fragmentainer/index.md
@@ -0,0 +1,14 @@
+---
+title: 片段
+slug: Glossary/Fragmentainer
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+片段（fragmentainer）在 [CSS 片段规范](https://www.w3.org/TR/css-break-3/)中定义如下：
+
+> 一个包含部分（或全部）内容片段的盒子，如页面盒子、列盒子或区域盒子。片段可以是预定义的，也可以根据需要生成。当可截断内容在块方向上溢出片段时，它会在其片段上下文中分割到下一个容器中。
+
+片段上下文存在于 CSS 分页媒体中，其中片段是定义页面的盒子。在多列布局中，片段是定义在多列容器上的列盒子。在 CSS 区域中，每个区域都是一个片段。
diff --git a/files/zh-cn/glossary/ftu/index.md b/files/zh-cn/glossary/ftu/index.md
new file mode 100644
index 00000000000000..d76c32232aa233
--- /dev/null
+++ b/files/zh-cn/glossary/ftu/index.md
@@ -0,0 +1,12 @@
+---
+title: FTU
+slug: Glossary/FTU
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+首次使用（FTU）是在 {{glossary("Firefox OS")}} 设备上运行新安装的 {{glossary("Gecko")}} 版本时加载的应用程序。
+
+你可以使用首次使用设置许多重要选项（例如时区、Wi-Fi 详细信息、默认语言、导入联系人），或者使用“手机导览”以了解更多关于你的设备的信息。
diff --git a/files/zh-cn/glossary/fuzzing/index.md b/files/zh-cn/glossary/fuzzing/index.md
new file mode 100644
index 00000000000000..1156fb14c70012
--- /dev/null
+++ b/files/zh-cn/glossary/fuzzing/index.md
@@ -0,0 +1,12 @@
+---
+title: 模糊测试
+slug: Glossary/Fuzzing
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**模糊测试**（Fuzzing）是一种使用自动化工具向程序或程序中的函数提供无效或意外输入，然后检查结果以确定程序是否崩溃或有其他不正常行为的技术。这是一种确保软件稳定、可靠和安全的重要方法。
+
+- 维基百科上的[模糊测试](https://zh.wikipedia.org/wiki/模糊测试)
diff --git a/files/zh-cn/glossary/graceful_degradation/index.md b/files/zh-cn/glossary/graceful_degradation/index.md
index 2b1821b97dedf0..b42d99d4bb3f70 100644
--- a/files/zh-cn/glossary/graceful_degradation/index.md
+++ b/files/zh-cn/glossary/graceful_degradation/index.md
@@ -1,23 +1,24 @@
---
-title: Graceful degradation（优雅降级）
+title: 优雅降级
slug: Glossary/Graceful_degradation
+l10n:
+ sourceCommit: f84053ea0611a96aa0e230eba1450b34d5c7ac81
---
{{GlossarySidebar}}
**优雅降级**（Graceful degradation）是一种设计理念，其核心是尝试构建可在最新浏览器中运行的现代网站/应用程序，而作为降级体验，在低版本浏览器中仍然提供必要的内容和功能。
-{{Glossary("Polyfill","Polyfill")}}可用于使用 JavaScript 构建缺少的功能，但应尽可能提供样式和布局等功能的可接受替代方案，例如使用 CSS 级联或 HTML 回退行为。在[处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)中可以找到一些很好的例子。
+{{Glossary("Polyfill")}} 可用于使用 JavaScript 构建缺少的功能，但应尽可能提供样式和布局等功能的可接受替代方案，例如使用 CSS 层叠或 HTML 回退行为。在[处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)中可以找到一些很好的例子。
-这个技术很有用，因为它让 Web 开发者，在专注开发最强大的网站同时，和某些未知的用户代理，在访问网站时发生的问题间达到权衡。{{Glossary("Progressive enhancement", "渐进增强")}}相关而不同—通常被看做优雅降级的相反行为。实际上，这两种方法都是有效的，并且通常可以相互补充。
+这个技术很有用，因为它让 Web 开发者，在专注开发最强大的网站同时，和某些未知的用户代理，在访问网站时发生的问题间达到权衡。{{Glossary("Progressive enhancement", "渐进增强")}}与之相关而不同——通常被看做优雅降级的相反行为。实际上，这两种方法都是有效的，并且通常可以相互补充。
## 参见
- 维基百科的[优雅降级](https://zh.wikipedia.org/wiki/优雅降级)
- [处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
- [实现特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
-- [MDN Web 文档词汇表](/zh-CN/docs/Glossary)
+- [术语](/zh-CN/docs/Glossary)
- - {{Glossary("Graceful degradation")}}
- {{Glossary("Polyfill")}}
- {{Glossary("Progressive enhancement", "渐进增强")}}
diff --git a/files/zh-cn/glossary/grid_areas/index.md b/files/zh-cn/glossary/grid_areas/index.md
index 1c1f312a428e1f..f8d55496225cc5 100644
--- a/files/zh-cn/glossary/grid_areas/index.md
+++ b/files/zh-cn/glossary/grid_areas/index.md
@@ -1,20 +1,22 @@
---
-title: Grid Areas
+title: 网格区域
slug: Glossary/Grid_Areas
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
---
{{GlossarySidebar}}
-**网格区域**是网格中由一个或者多个{{glossary("grid cell", "网格单元格")}}组成的一个矩形区域。当你使用[基于网格线位置](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)放置一个项目或者使用[命名的网格区域](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)定义区域时，网格区域被创建。
+**网格区域**是网格中由一个或者多个{{glossary("grid cell", "网格单元")}}组成的一个矩形区域。当你[基于网格线定位](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)来放置项目或者使用[具名网格区域](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)定义区域时，会创建网格区域。
-
+
-本质上，网格区域一定是矩形的。例如，不可能创建 T 形或 L 形的网格区域。
-
-在下面的例子中，有一个网格容器包含两个网格项目，我用 {{cssxref("grid-area")}} 属性命名它们，然后用 {{cssxref("grid-template-areas")}} 把它们放在网格上。这将创建两个网格区域，一个覆盖四个网格单元格，另外一个覆盖两个。
+本质上，网格区域*必须*是矩形的。例如，不可能创建 T 形或 L 形的网格区域。
## 示例
+在下面的例子中，有一个网格容器包含两个网格项目。我们用 {{cssxref("grid-area")}} 属性命名了它们，然后用 {{cssxref("grid-template-areas")}} 把它们放在网格上。这将创建两个网格区域，一个覆盖四个网格单元格，另外一个覆盖两个。
+
```css hidden
* {
box-sizing: border-box;
@@ -74,6 +76,7 @@ slug: Glossary/Grid_Areas
### 扩展阅读
-- CSS Grid Layout Guide: _[Basic concepts of grid layout](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
-- CSS Grid Layout Guide: _[Grid template areas](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)_
-- [Definition of Grid Areas in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-area-concept)
+- CSS 网格布局指南：
+ - [网格布局的基本概念](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+ - [网格模板区域](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
+- CSS 网格布局规范中[网格区域的定义](https://drafts.csswg.org/css-grid/#grid-area-concept)
diff --git a/files/zh-cn/glossary/grid_column/index.md b/files/zh-cn/glossary/grid_column/index.md
index 24e4daebf16d32..4af7ad3883cf00 100644
--- a/files/zh-cn/glossary/grid_column/index.md
+++ b/files/zh-cn/glossary/grid_column/index.md
@@ -1,15 +1,17 @@
---
-title: Grid Column
+title: 网格列
slug: Glossary/Grid_Column
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
---
{{GlossarySidebar}}
-**网格列**是[Grid 布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)中的垂直轨道，即两个垂直网格线之间的空间。它通过属性 {{cssxref("grid-template-columns")}} 或者简写属性 {{cssxref("grid")}}，{{cssxref("grid-template")}} 定义。
+**网格列**是[网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)中的垂直轨道，即两个垂直网格线之间的空间。它通过属性 {{cssxref("grid-template-columns")}} 或者简写属性 {{cssxref("grid")}}、{{cssxref("grid-template")}} 定义。
-另外，当项目被放置到显示网格中创建的列外面时，可以在隐式网格中创建网格列。默认情况这些列自动调整大小，也可以使用 {{cssxref("grid-auto-columns")}} 属性指定其大小。
+此外，当项目被放置在*显式网格*创建的列之外时，可能会在*隐式网格*中创建列。这些列默认情况下会自动调整大小，或者可以使用 {{cssxref("grid-auto-columns")}} 属性指定大小。
-在[Grid 布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)中使用对齐方式时，网格列沿着纵轴运行。
+在[网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)中使用对齐方式时，网格列沿着*块（列）轴*运行。
## 参见
@@ -22,4 +24,4 @@ slug: Glossary/Grid_Column
### 扩展阅读
-- CSS Grid Layout Guide: _[Basic concepts of grid layout](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
+- CSS 网格布局指南：_[网格布局的基本概念](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
diff --git a/files/zh-cn/glossary/grid_container/index.md b/files/zh-cn/glossary/grid_container/index.md
index c3f00e59d9c160..6fb025ef04882b 100644
--- a/files/zh-cn/glossary/grid_container/index.md
+++ b/files/zh-cn/glossary/grid_container/index.md
@@ -1,13 +1,15 @@
---
-title: Grid container
+title: 网格容器
slug: Glossary/Grid_Container
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
---
{{GlossarySidebar}}
-通过设置 CSS 属性 `display:grid;` 或 `display:inline-grid;` 可以将一个元素定义为**网格容器**(**grid container**)，并且它的所有直接子元素都会成为网格项。
+通过使用 `grid` 或 `inline-grid` 的值，可以使用 [CSS 网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)将一个元素变为为**网格容器**，并且使它的所有直接子元素都会成为网格项目。
-网格容器会创建一个**网格化环境**(**grid firmatting context**) 。它的直接子元素通过定义 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}} 属性可以将自己变为*显式网格*，当某个元素不在显示网格内时，它就会变为*隐式网格*。
+网格容器会创建一个**网格格式化上下文**。它的直接子元素通过定义 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}} 属性可以将自己变为*显式网格*，当某个元素不在显示网格内时，它就会变为*隐式网格*。
## 参见
@@ -22,4 +24,4 @@ slug: Glossary/Grid_Container
### 扩展阅读
-- CSS 网格布局：_[网格布局基本概念](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
+- CSS 网格布局指南：_[网格布局的基本概念](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
diff --git a/files/zh-cn/glossary/grid_lines/index.md b/files/zh-cn/glossary/grid_lines/index.md
index 0703f3fb6a0ef4..907b9002abea4d 100644
--- a/files/zh-cn/glossary/grid_lines/index.md
+++ b/files/zh-cn/glossary/grid_lines/index.md
@@ -1,14 +1,18 @@
---
-title: Grid Lines
+title: 网格线
slug: Glossary/Grid_Lines
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
---
{{GlossarySidebar}}
-使用[Grid 布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)在显式网格中定义{{glossary("Grid tracks", "轨道")}}的同时会创建**网格线**。在下面的例子中，有一个三列两行的网格。它给了我们 4 条列线和 3 条行线。
+**网格线**会在使用[网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)时被创建。
## 示例
+在下面的例子中，有一个三列两行的网格。它给了我们 4 条列线和 3 条行线。
+
```css hidden
* {
box-sizing: border-box;
@@ -52,11 +56,11 @@ slug: Glossary/Grid_Lines
{{ EmbedLiveSample('示例', '500', '250') }}
-网格线可以用它们的编号来寻址。在从左到右的语言比如英语中，列线 1 将位于网格的左侧，行线 1 将位于其顶部。线编号遵循文档的[写入模式](/zh-CN/docs/Web/CSS/CSS_writing_modes)，因此在从右到左的语言中，列线 1 行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。
+网格线可以用它们的编号来寻址。在从左到右的语言比如英语中，列线 1 将位于网格的左侧，行线 1 将位于其顶部。线编号遵循文档的[书写模式](/zh-CN/docs/Web/CSS/CSS_writing_modes)，因此在从右到左的语言中，列线 1 行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。
-
+
-当创建隐式轨道去支持显式网格外的内容时，网格线也会在隐式网格中被创建，但是这些网格线不能通过编号来寻址。
+当创建隐式轨道去支持*显式网格*外的内容时，网格线也会在*隐式网格*中被创建，但是这些网格线不能通过编号来寻址。
## 按网格线编号将项目放置到网格上
@@ -109,7 +113,7 @@ slug: Glossary/Grid_Lines
## 命名网格线
-在显式网格中创建的网格线可以被命名，在轨道大小信息之前或之后的方括号中命名。当放置一个项目时，你可以使用这些名称代替编号，如下所示。
+在*显式网格*中创建的网格线可以被命名，在轨道大小信息之前或之后的方括号中命名。当放置一个项目时，你可以使用这些名称代替编号，如下所示。
```css hidden
* {
@@ -171,8 +175,9 @@ slug: Glossary/Grid_Lines
### 扩展阅读
-- CSS Grid Layout Guide: _[Basic concepts of grid layout](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
-- CSS Grid Layout Guide: _[Line-based placement with CSS Grid](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_
-- CSS Grid Layout Guide: _[Layout using named grid lines](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)_
-- CSS Grid Layout Guide: _[CSS Grids, Logical Values and Writing Modes](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)_
-- [Definition of Grid Lines in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-line-concept)
+- CSS 网格布局指南：
+ - [网格布局的基本概念](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+ - [基于网格线的 CSS 网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+ - [使用命名网格线的布局](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines)
+ - [CSS 网格、逻辑值与书写方式](/zh-CN/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)
+- CSS 网格布局规范中[网格线的定义](https://drafts.csswg.org/css-grid/#grid-line-concept)
diff --git a/files/zh-cn/glossary/guard/index.md b/files/zh-cn/glossary/guard/index.md
deleted file mode 100644
index 69f09a7a1695e2..00000000000000
--- a/files/zh-cn/glossary/guard/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Guard
-slug: Glossary/Guard
-l10n:
- sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
----
-
-{{GlossarySidebar}}
-
-Guard 是 {{domxref("Headers")}} 对象的新特性 (在 {{domxref("Fetch_API", "Fetch 规范", "", 1)}}中定义），限制像 {{domxref("Headers.set","set()")}} 和 {{domxref("Headers.append","append()")}} 这样的可以修改标头内容的方法。例如，`immutable` guard 意味着标头不能被改变。阅读 [Fetch 基本概念：guard](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts#guard)，以了解更多信息。
diff --git a/files/zh-cn/glossary/gutters/index.md b/files/zh-cn/glossary/gutters/index.md
index d77a0091542148..eb3b74f08668c3 100644
--- a/files/zh-cn/glossary/gutters/index.md
+++ b/files/zh-cn/glossary/gutters/index.md
@@ -1,16 +1,18 @@
---
-title: Gutters
+title: 网格间距
slug: Glossary/Gutters
+l10n:
+ sourceCommit: c77767934e1a9937a5158026a28fa2157a848b49
---
{{GlossarySidebar}}
-**网格间距**是网格轨道之间的间距，可以通过 {{cssxref("grid-column-gap")}}，{{cssxref("grid-row-gap")}} 或者 {{cssxref("grid-gap")}} 在[Grid 布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)中创建。
-
-在下面的例子中，由一个三列两行的网格。它的列轨道之间有 20px 的间距，行轨道之间有 20px 的间距。
+**网格间距**是网格内容{{glossary("grid_tracks", "轨道")}}之间的间距，可以通过 {{cssxref("column-gap")}}、{{cssxref("row-gap")}} 或 {{cssxref("gap")}} 属性在[网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout)中创建。
## 示例
+在下面的例子中，有一个三列两行的网格。它的行、列轨道之间都有 `20px` 的间距。
+
```css hidden
* {
box-sizing: border-box;
@@ -43,29 +45,27 @@ slug: Glossary/Gutters
```html
<div class="wrapper">
- <div>One</div>
- <div>Two</div>
- <div>Three</div>
- <div>Four</div>
- <div>Five</div>
+ <div>一</div>
+ <div>二</div>
+ <div>三</div>
+ <div>四</div>
+ <div>五</div>
</div>
```
{{ EmbedLiveSample('示例', '300', '280') }}
-在网格大小上，网格间距参与计算就好像规则的网格轨道一样，但是没有任何东西可以被放置到网格间距上。网格间距也像网格线一样在那个位置会增加额外的大小，因此网格项目会被放置在网格间距末的那条网格线后。
+在网格大小方面，间隙表现得像常规的网格轨道一样，但你无法将任何项目放置在间隙中。间隙的作用类似于该位置的网格线获得了额外的大小，因此任何放置在该线后的网格项目都会从间隙的末端开始。
-能够导致轨道被间隔开来的，除了网格间距属性，还有 margins，padding 或者使用[盒模型对齐](/zh-CN/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)中的空间分布属性。这些方法都会导致可见间距的产生，因此网格间距属性不等价于”间距大小“，除非你没有使用这些能够产生间距的方法。
+`row-gap` 和 `column-gap` 属性并不是唯一能导致轨道间距扩大的因素。外边距、内边距或使用[盒子对齐](/zh-CN/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)中的空间分配属性都可以增加可见的间隙。因此，除非确定设计没有通过这些方法引入任何额外的空间，否则不应将 `row-gap` 和 `column-gap` 属性视为等同于网格间距大小。
## 参见
-### 属性参考
-
-- {{cssxref("grid-column-gap")}}
-- {{cssxref("grid-row-gap")}}
-- {{cssxref("grid-gap")}}
+- [CSS 网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+- 属性参考
-### 扩展阅读
+ - {{cssxref("column-gap")}}
+ - {{cssxref("row-gap")}}
+ - {{cssxref("gap")}}
-- CSS Grid Layout Guide: _[Basic concepts of grid layout](/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
-- [Definition of gutters in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#gutters)
+- CSS 网格布局规范中[网格间距的定义](https://drafts.csswg.org/css-grid/#gutters)
diff --git a/files/zh-cn/glossary/houdini/index.md b/files/zh-cn/glossary/houdini/index.md
new file mode 100644
index 00000000000000..5b7b9ae4efd625
--- /dev/null
+++ b/files/zh-cn/glossary/houdini/index.md
@@ -0,0 +1,21 @@
+---
+title: Houdini
+slug: Glossary/Houdini
+l10n:
+ sourceCommit: 3b39e41fb9393a13b16aaf58ba25174a62205041
+---
+
+{{GlossarySidebar}}
+
+Houdini 是一组赋予了开发者扩展 CSS 的能力的低阶 API，其能够拦截浏览器渲染引擎的添加样式和布局过程。Houdini 让开发者可以访问 [CSS 对象模型](/zh-CN/docs/Web/API/CSS_Object_Model)（ [CSSOM](/zh-CN/docs/Web/API/CSS_Object_Model)），使他们能够编写可被浏览器解析为 CSS 的代码。
+
+Houdini 的好处在于，开发者无需等待 Web 标准规范定义新特性，也无需等待所有浏览器完全实现这些特性，就可以创建 CSS 特性。
+
+尽管 Houdini 启用的许多特性可以用 JavaScript 创建，但在启用 JavaScript 之前直接与 CSSOM 交互可以提高解析速度。浏览器在应用脚本中的样式更新之前，会创建 CSSOM——包括布局、绘制和合成过程：对于更新的 JavaScript 样式，这些过程会重复执行。Houdini 代码不需要等待首次渲染周期完成，而是包含在首次周期内，从而创建可渲染、可理解的样式。
+
+## 参见
+
+- [Houdini API](/zh-CN/docs/Web/API/Houdini_APIs)
+- [CSSOM](/zh-CN/docs/Web/API/CSS_Object_Model)
+- [CSS 绘制 API](/zh-CN/docs/Web/API/CSS_Painting_API)
+- [CSS 类型对象模型](/zh-CN/docs/Web/API/CSS_Typed_OM_API)
diff --git a/files/zh-cn/glossary/hpkp/index.md b/files/zh-cn/glossary/hpkp/index.md
new file mode 100644
index 00000000000000..3e0a52bab82995
--- /dev/null
+++ b/files/zh-cn/glossary/hpkp/index.md
@@ -0,0 +1,15 @@
+---
+title: HTTP 公钥固定
+slug: Glossary/HPKP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**HTTP 公钥固定**（**HPKP**）是一项已过时的安全特性，用于告知 Web 客户端将特定的加密公钥与某个 Web 服务器关联，以减少使用伪造证书进行{{Glossary("MITM", "中间人")}}攻击的风险。
+
+## 参见
+
+- [RFC 7469](https://datatracker.ietf.org/doc/html/rfc7469)
+- 维基百科上的 [HTTP 公钥固定](https://zh.wikipedia.org/wiki/HTTP公钥固定)
diff --git a/files/zh-cn/glossary/http/index.md b/files/zh-cn/glossary/http/index.md
index fe8480402d84c3..3ef3cd108ef12f 100644
--- a/files/zh-cn/glossary/http/index.md
+++ b/files/zh-cn/glossary/http/index.md
@@ -1,17 +1,19 @@
---
title: HTTP
slug: Glossary/HTTP
+l10n:
+ sourceCommit: 409978ee3d2edd2b045adfbe39769b2dae6f31ea
---
{{GlossarySidebar}}
-HTTP (The HyperText Transfer Protocol，超文本传输协议) 是用于在 {{glossary("World Wide Web","Web")}} 上传输超媒体文件的底层 {{glossary("protocol", "协议")}} ，最典型场景的是在浏览器和服务器之间传递数据，以供人们浏览。现行的 HTTP 标准的版本是 {{glossary("HTTP_2", "HTTP/2")}}。
+超文本传输协议（**HTTP**，HyperText Transfer Protocol）是用于在 {{glossary("World Wide Web", "Web")}} 上传输超媒体文件的底层网络{{glossary("protocol", "协议")}}，通常的是在浏览器和服务器之间传递数据，以供人们浏览。现行的 HTTP 标准的版本是 {{glossary("HTTP_2", "HTTP/2")}}。
-`http://` 称为 `schema`，是 {{glossary("URI")}} 的组成部分，一般位于网络地址的开头。以 `https://developer.mozilla.org` 为例，该地址说明请求文档时使用 HTTP 协议；这里的 https 代指 HTTP 协议的安全版本，即 {{glossary("SSL")}} （或称 TLS）
+作为 {{glossary("URI")}} 的一部分，`http://example.com/` 中的“http”被称为“方案（scheme）”。使用“http”方案的资源通常使用 HTTP 协议通过未加密连接传输。“https”方案（如 `https://developer.mozilla.org`）表示资源是使用 HTTP 协议，但通过安全的 {{glossary("TLS")}} 通道传输。
-HTTP 是基于文本的 (所有的通信都以纯文本的形式进行) 以及无状态的 (当前通信状态不会发现以前的通信状态)，该特性极大方便了在 www 上浏览网页的人。除此之外，HTTP 也可以用于构建服务器之间交互的 {{glossary("REST")}} web 服务，以及使得网站内容更加动态化的 {{glossary("AJAX")}} 请求。
+HTTP 是基于文本的 (所有的通信都以纯文本的形式进行) 以及无状态的 (某一次通信与前述的通信都无关)，该特性极大方便了在 Web 上浏览网页的人。除此之外，HTTP 也可以作为服务器之间的 {{glossary("REST")}} Web 服务、网站间的 {{domxref("fetch()")}} 请求的基础，以让网站变得更加丰富。
-## 补充知识
+## 参见
- 在 MDN 上的 [HTTP](/zh-CN/docs/Web/HTTP)
- 在维基百科上的 [HTTP](https://zh.wikipedia.org/wiki/超文本传输协议)
diff --git a/files/zh-cn/glossary/idl/index.md b/files/zh-cn/glossary/idl/index.md
new file mode 100644
index 00000000000000..f52f4184a47759
--- /dev/null
+++ b/files/zh-cn/glossary/idl/index.md
@@ -0,0 +1,30 @@
+---
+title: 接口描述语言（IDL）
+slug: Glossary/IDL
+l10n:
+ sourceCommit: d7828f5d7479c27cc7eaeed6cce0c02a9142555c
+---
+
+{{GlossarySidebar}}
+
+**接口描述语言**（**IDL**）是一种用于指定独立于任何特定编程语言的对象接口的通用语言。
+
+## 内容属性与接口描述语言属性
+
+在 HTML 中，大多数属性有两个方面：**内容属性**和**接口描述语言属性**。
+
+内容属性是从内容（HTML 代码）中设置的属性，你可以通过 {{domxref("element.setAttribute()")}} 或 {{domxref("element.getAttribute()")}} 来设置或获取它。内容属性总是一个字符串，即使期望的值应该是整数。例如，要使用内容属性将 {{HTMLElement("input")}} 元素的 `maxlength` 设置为 42，你需要在该元素上调用 `setAttribute("maxlength", "42")`。
+
+接口描述语言属性也称为 JavaScript 属性。这些是你可以使用 JavaScript 属性（如 `element.foo`）读取或设置的属性。接口描述语言属性总是使用（但可能转换）底层的内容属性在你获取时返回一个值，并在你设置时保存一些内容属性。换句话说，接口描述语言属性本质上反映了内容属性。
+
+大多数情况下，接口描述语言属性将按实际使用的方式返回其值。例如，{{HTMLElement("input")}} 元素的默认 `type` 是“text”，所以如果你设置 `input.type="foobar"`，`<input>` 元素的类型将是文本（在外观和行为上），但“type”内容属性的值将是“foobar”。然而，`type` 接口描述语言属性将返回字符串“text”。
+
+接口描述语言属性并不总是字符串；例如，`input.maxlength` 是一个数字（有符号长整型）。使用接口描述语言属性时，你读取或设置所需类型的值，所以 `input.maxlength` 总是返回一个数字，并且当你设置 `input.maxlength` 时，它需要一个数字。如果你传递其他类型，它会根据标准 JavaScript 规则自动转换为数字。
+
+接口描述语言属性可以[反射其他类型](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)，例如无符号长整型、URL、布尔值等。不幸的是，没有明确的规则，接口描述语言属性与其对应的内容属性的行为取决于具体属性。大多数时候，它将遵循[规范中规定的规则](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)，但有时不会。HTML 规范尝试让这对开发人员尽可能友好，但由于各种原因（主要是历史原因），某些属性的行为可能很奇怪（例如 `select.size`），你应该阅读规范以了解它们的具体行为。
+
+## 参见
+
+- 维基百科上的[接口描述语言](https://zh.wikipedia.org/wiki/接口描述语言)
+- [HTML 属性参考](/zh-CN/docs/Web/HTML/Attributes)
+- [接口定义语言](https://people.eecs.berkeley.edu/~messer/netappc/Supplements/10-idl.pdf)
diff --git a/files/zh-cn/glossary/interpolation/index.md b/files/zh-cn/glossary/interpolation/index.md
new file mode 100644
index 00000000000000..56c240f53ce280
--- /dev/null
+++ b/files/zh-cn/glossary/interpolation/index.md
@@ -0,0 +1,27 @@
+---
+title: 插值
+slug: Glossary/Interpolation
+l10n:
+ sourceCommit: 8dfcc6f762e9a478a16dfc4ff4b8f5c8cdefab97
+---
+
+{{GlossarySidebar}}
+
+插值是一种基于已知数据点估计新数据点的方法。
+
+在动画中，插值计算用于更改 HTML 属性（如高度、宽度等）的中间值。颜色的插值定义了在颜色混合、渐变、合成、滤镜、过渡、动画和颜色函数中的中间颜色值。
+
+插值不一定是线性的。大多数插入的值是真实的浮点数；但是，当两个值之间没有中间值时，例如只能接受整数的值，[插值就是离散的](/zh-CN/docs/Web/CSS/integer#插值)。插值的过程还取决于动画中的[缓动函数](/zh-CN/docs/Web/CSS/easing-function)和色标，以及渐变中 {{CSSXref("color-interpolation-method", "color")}} 和 {{CSSXref("hue-interpolation-method", "hue")}} 的插值方法。
+
+在 JavaScript 中，“[插值](/zh-CN/docs/Web/JavaScript/Reference/Template_literals#string_interpolation)”一词用于描述模板字符串中的字符串替换。
+
+## 参见
+
+- {{SVGAttr("color-interpolation")}} SVG 属性
+- {{CSSXref("color-interpolation")}} CSS 属性
+- {{CSSXref("color-interpolation-method")}} CSS 数据类型
+- {{CSSXref("hue-interpolation-method")}} CSS 数据类型
+- {{CSSXref("color_value/color-mix", "color-mix()")}} CSS 函数
+- [CSS 中的颜色插值](/zh-CN/docs/Web/CSS/color_value#插值)
+- 维基百科上的[插值](https://zh.wikipedia.org/wiki/插值)
+- 维基百科上的[字符串插值](https://en.wikipedia.org/wiki/String_interpolation)
diff --git a/files/zh-cn/glossary/intrinsic_size/index.md b/files/zh-cn/glossary/intrinsic_size/index.md
new file mode 100644
index 00000000000000..3718f6d0a362db
--- /dev/null
+++ b/files/zh-cn/glossary/intrinsic_size/index.md
@@ -0,0 +1,69 @@
+---
+title: 固有尺寸
+slug: Glossary/Intrinsic_Size
+l10n:
+ sourceCommit: 726f971467b4cdd339e29ee10403fce5b3e87f42
+---
+
+{{GlossarySidebar}}
+
+在 CSS 中，元素的*固有尺寸*是指基于其内容的尺寸，不考虑它所在的上下文影响。例如，CSS [盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)属性应用的尺寸。元素的固有尺寸由其 {{cssxref("min-content")}} 和 {{cssxref("max-content")}} 尺寸表示。
+
+行级元素的尺寸是固有的：[尺寸](/zh-CN/docs/Web/CSS/CSS_box_sizing)和[盒](/zh-CN/docs/Web/CSS/CSS_box_model)属性，包括 {{cssxref("height")}}、{{cssxref("width")}}、{{cssxref("block-size")}}、{{cssxref("inline-size")}}、{{cssxref("padding-block")}} 和 {{cssxref("margin-block")}} 都对其没有影响（尽管 {{cssxref("margin-inline")}} 和 {{cssxref("padding-inline")}} 有影响）。
+
+例如，行级元素 {{htmlelement("span")}} 的最小固有尺寸是在不应用其他 CSS 盒属性的情况下，它在一个行向尺寸为 `0px` 的容器内浮动时的最小尺寸。最大的固有尺寸则相反，是指其容器的行向尺寸为无限时的大小。
+
+对于图像，固有尺寸与文本的含义相同——在不应用任何 CSS 来改变渲染的情况下，图像显示的尺寸。
+
+像素密度和分辨率影响固有尺寸。默认情况下，假定图像具有“1x”像素密度（1 设备像素=1 CSS 像素），此时固有尺寸只是像素高度和宽度。图像的固有尺寸和分辨率可以在其 {{Glossary("EXIF")}} 数据中明确指定。图像的像素密度也可以使用 [`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset) 属性设置。请注意，如果同时使用两种机制，则 `srcset` 值覆盖 EXIF 值。
+
+固有尺寸及其计算方式在 [CSS 尺寸模块](/zh-CN/docs/Web/CSS/CSS_box_sizing)中定义。
+
+#### 最小固有尺寸
+
+要根据元素的最小固有尺寸进行设置，可以将 {{cssxref("inline-size")}}（或在横向书写模式中使用的 {{cssxref("width")}}）设置为 {{cssxref("min-content")}}。这将元素设置为文本在行内方向尽可能小地换行而不溢出的尺寸，并尽可能多地进行软换行。对于包含一串文本的盒子，最小固有尺寸由最长的单词决定。
+
+```html hidden
+<p>文本会换行，让这个元素与最宽的单词一样宽。</p>
+```
+
+```css
+p {
+ inline-size: min-content;
+ background-color: palegoldenrod;
+}
+```
+
+{{ EmbedLiveSample('最小固有尺寸', '100%', '220') }}
+
+## 最大固有尺寸
+
+最大固有尺寸则相反。如果容器的行内尺寸是无限的，元素的尺寸是多大？文本内容将尽可能显示宽，不进行软换行，即使溢出容器。关键字值 {{cssxref("max-content")}} 设置了这种行为。
+
+```html hidden
+<p>因为文本不换行，元素会伸长。</p>
+<p>
+ 这个段落可能会比整个页面的宽度还要大一些，也不会换行，因为设置了
+ <code>width: max-content</code>。也因此，可能会溢出容器。
+</p>
+```
+
+```css
+p {
+ width: max-content;
+ background-color: palegoldenrod;
+}
+```
+
+{{ EmbedLiveSample('最大固有尺寸', '100%', '200') }}
+
+## 非固有尺寸
+
+**非固有尺寸**（extrinsic size）与*固有尺寸*相反，是基于元素的上下文，而不考虑其内容的尺寸。非固有尺寸由盒模型属性值决定。在非固有尺寸中，百分比指定了盒子相对于其包含块的大小。
+
+## 参见
+
+- CSS {{cssxref("min-content")}}、{{cssxref("max-content")}} 和 {{cssxref("fit-content")}}属性值。
+- CSS {{cssxref("aspect-ratio")}} 属性
+- [CSS 盒模型](/zh-CN/docs/Web/CSS/CSS_box_sizing)模块
+- [CSS 尺寸规范：固有尺寸](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes)
diff --git a/files/zh-cn/glossary/java/index.md b/files/zh-cn/glossary/java/index.md
index c2078bd8f92ee2..bfc1f01877f6fd 100644
--- a/files/zh-cn/glossary/java/index.md
+++ b/files/zh-cn/glossary/java/index.md
@@ -1,11 +1,17 @@
---
title: Java
slug: Glossary/Java
+l10n:
+ sourceCommit: 5b2d7042b0f02dd7f6ecc2b2dfbb169bae8a4724
---
{{GlossarySidebar}}
-Java 是一个旨在实现最小的依赖关系的基于{{Glossary("class","类")}}的 {{glossary("OOP", "面向对象的")}} 便携式 {{Glossary("computer programming", "计算机程序")}} 语言。
+Java 是一个{{glossary("Compile", "编译的")}}、{{glossary("OOP", "面向对象的")}}、高度可移植的{{glossary("computer programming", "计算机程序设计")}}语言。
+
+Java 是静态类型的，提供与 C 类似的语法。它拥有大量现成可用的函数库——Java 软件开发工具包（SDK）。
+
+软件只需要提前{{glossary("compile", "编译")}}一次变成专有字节码和打包格式，就可以在 Java 虚拟机（JVM）中运行。JVM 在很多平台中都可用，让 Java 程序几乎在任何地方都可以运行，而无需再度编译或打包。这让很多拥有非常多应用场景的大型企业选择 Java 为首选语言，不过也可能被认为过于“笨重”。
## 参见
diff --git a/files/zh-cn/glossary/javascript/index.md b/files/zh-cn/glossary/javascript/index.md
index 7c74d14c0d6fc2..375c8a059574aa 100644
--- a/files/zh-cn/glossary/javascript/index.md
+++ b/files/zh-cn/glossary/javascript/index.md
@@ -1,28 +1,32 @@
---
title: JavaScript
slug: Glossary/JavaScript
+l10n:
+ sourceCommit: 409978ee3d2edd2b045adfbe39769b2dae6f31ea
---
{{GlossarySidebar}}
-JavaScript (JS) 是一种编程语言，为通常用于客户端（client-side）的网页动态脚本，不过，也常通过像[Node.js](https://nodejs.org/)这样的包，用于服务器端（{{Glossary("Server","server")}}-side）。
+JavaScript（JS）是一种程序设计语言，通常用于客户端（client-side）的网页动态脚本，不过，也常通过像 [Node.js](https://nodejs.org/) 这样的运行时，用于{{Glossary("Server","服务器")}}端。
-不应该把 JavaScript 和 [Java](/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java) 混淆。“Java”和“JavaScript”都是 Oracle 公司在美国和其他国家注册的商标，但是这两种编程语言在语法、语义和使用方面都明显不同。
+**不应该**把 JavaScript 和 [Java](https://zh.wikipedia.org/wiki/Java) 混淆。“_Java_”和“_JavaScript_”都是 Oracle 公司在美国和其他国家注册的商标，但是这两种程序设计语言在语法、语义和使用方面都明显不同。
-Brendan Eich（彼时受雇于 Netscape）为服务器端构想的语言 JavaScript，不久便在 1995 年 9 月被加入 Netscape Navigator 2.0。JavaScript 很快获得了成功，而 {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} 也在 1996 年 8 月，引入了对 JavaScript 的支持，冠以 JScript 之名。
+JavaScript 主要用于浏览器中，让开发者可以通过{{Glossary("DOM", "文档对象模型")}}来操纵网页内容、通过 {{domxref("fetch()")}} API 从服务器获取内容、通过 {{Glossary("IndexedDB")}} 存储复杂数据、使用 {{Glossary("canvas")}} 绘制图形、通过各种 {{Glossary("API")}} 与设备交互等等。JavaScript 是世界上最广泛使用的语言之一，归功于浏览器中 {{Glossary("API")}} 的发展和性能提升。
-1996 年 11 月，Netscape 开始与 ECMA 国际化组织合作以使 JavaScript 成为行业标准。从此以后，标准化的 JavaScript 就被称为 ECMAScript 并由 ECMA-262 规范，其最新版（第十四版，ECMA2023）于 2023 年 6 月生效。
+## 起源与历史
+
+Brendan Eich（彼时受雇于 Netscape）为服务器端构想的语言——JavaScript——很快在 1995 年 9 月被加入到 Netscape Navigator 2.0 中。JavaScript 很快获得了成功，而 {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} 也在 1996 年 8 月，引入了对 JavaScript 的支持，冠以 JScript 之名。
-JavaScript 通常用于浏览器，使开发者能通过{{Glossary("DOM")}}来操纵网页内容、或透过{{Glossary("AJAX")}}与{{Glossary("IndexedDB")}}来操作数据；还可以用它在{{Glossary("canvas")}}上面绘图、通过各种{{Glossary("API","APIs")}}与运行浏览器的各种设备交互……等等。由于近年来的发展、以及各浏览器的{{Glossary("API","APIs")}}性能改善，JavaScript 成了世界上最常用的编程语言之一。
+1996 年 11 月，Netscape 开始与 ECMA 国际化组织合作以使 JavaScript 成为行业标准。从此以后，标准化的 JavaScript 就被称为 ECMAScript 并由 ECMA-262 规范，其最新版（第十四版，ECMA2023）于 2023 年 6 月生效。
-最近，JavaScript 的流行程度，随着除浏览器外最流行的跨平台 JavaScript 运行环境——[Node.js](https://nodejs.org/) 平台的成功而大大提升。Node.js 使开发者可以在 PC 上使用 JavaScript 作为脚本语言以自动化处理和构建功能完备的 {{Glossary("HTTP")}} 和 {{Glossary("Web Sockets")}} 服务器。
+最近，JavaScript 的流行程度，随着除浏览器外最流行的跨平台 JavaScript 运行环境——[Node.js](https://nodejs.org/) 平台的成功而大大提升。Node.js——使用 [Chrome 的 V8 JavaScript 引擎](<https://zh.wikipedia.org/wiki/V8_(JavaScript引擎)>)——使开发者可以在 PC 上使用 JavaScript 作为脚本语言以自动化处理和构建功能完备的 {{Glossary("HTTP")}} 和 {{Glossary("Web Sockets", " WebSocket")}} 服务器。
## 参见
-- 维基百科上的[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)
+- 维基百科上的 [JavaScript](https://zh.wikipedia.org/wiki/JavaScript)
- MDN 的 [JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide)
-- [NodeSchool 的 javascripting 工坊](https://nodeschool.io/#workshoppers)
-- [codecademy.com 的 JavaScript 课程](https://www.codecademy.com/tracks/javascript)
+- [NodeSchool 的“javascripting”工坊](https://nodeschool.io/#workshoppers)
+- [codecademy.com 的 JavaScript 课程](https://www.codecademy.com/catalog/language/javascript)
- [最新的 ECMAScript 标准](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/)
- MDN 的 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/reference)
- [_Eloquent JavaScript_](https://eloquentjavascript.net/) 一书
diff --git a/files/zh-cn/glossary/json_type_representation/index.md b/files/zh-cn/glossary/json_type_representation/index.md
new file mode 100644
index 00000000000000..eb9f8967f6e40d
--- /dev/null
+++ b/files/zh-cn/glossary/json_type_representation/index.md
@@ -0,0 +1,16 @@
+---
+title: JSON 类型表示
+slug: Glossary/JSON_type_representation
+l10n:
+ sourceCommit: eb99a4597802f746275e0d61b31cd2f42b398eab
+---
+
+{{GlossarySidebar}}
+
+{{glossary("JSON")}} 是一种方便且广泛使用的格式，用于序列化对象、数组、数字、字符串、布尔值和 null。[JSON 不支持 JavaScript 允许的所有数据类型](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON#javascript_and_json_differences)，意味着使用这些不兼容类型的 JavaScript 对象不能直接被序列化为 JSON。
+
+JSON 的不兼容对象的 *JSON 类型表示*是一个等效的 JavaScript 对象，其属性经过编码，使得这些信息*可以*序列化为 JSON。对于兼容的数据类型，这通常具有与原始对象相同的属性，而不兼容的属性则被转换/序列化为兼容的类型。例如，原始对象中的缓冲区属性可能会在 JSON 类型表示中被 [base64url](/zh-CN/docs/Glossary/Base64) 编码为字符串。
+
+一个无法使用 [`JSON.stringify()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 方法自动序列化为 JSON 的对象，可以定义一个名为 `toJSON()` 的返回原始对象的 *JSON 类型表示*的实例方法。[`JSON.stringify()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 则会使用 `toJSON()` 来获取要序列化的对象，而不是原本的对象，就比如 [`PublicKeyCredential.toJSON()`](/zh-CN/docs/Web/API/PublicKeyCredential/toJSON) 和 [`Performance.toJSON()`](/zh-CN/docs/Web/API/Performance/toJSON)。
+
+以这种方式序列化的 JSON 字符串是可以使用 [`JSON.parse()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) 反序列化回 *JSON 类型表示*对象的。通常来说，需要提供一个方法来转换 *JSON 类型表示*回原来的对象，如 {{domxref("PublicKeyCredential.parseCreationOptionsFromJSON_static", "PublicKeyCredential.parseCreationOptionsFromJSON()")}}。
diff --git a/files/zh-cn/glossary/kebab_case/index.md b/files/zh-cn/glossary/kebab_case/index.md
new file mode 100644
index 00000000000000..0c49975f2c7f8d
--- /dev/null
+++ b/files/zh-cn/glossary/kebab_case/index.md
@@ -0,0 +1,20 @@
+---
+title: 烤串命名法
+slug: Glossary/Kebab_case
+l10n:
+ sourceCommit: 6aa664dc5ccb5edf0897f99ad5feb59325dff831
+---
+
+{{GlossarySidebar}}
+
+**烤串命名法**（kebab case）是一种使用连字符 `-` 替换空格，并且单词通常都用小写字母的书写短语的方式。这种格式的单词排列，如同烤串上的烤肉一般，因而得名。为了提醒读者其外观，通常将其名字写作“kebab-case”。
+
+烤串命名法通常用作变量命名约定。然而，在许多编程语言中，连字符表示减法，因此无法使用烤串命名法。CSS 属性如 {{cssxref("background-color")}} 和 {{cssxref("font-family")}} 采用的是烤串命名法，HTML 属性，如 [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label) 和 [`data-*`](/zh-CN/docs/Web/HTML/Global_attributes/data-*) 也是如此。
+
+烤串命名法的单词通常被简单地称为*连字符连接的词*（hyphenated）。
+
+## 参见
+
+- [驼峰式命名法](/zh-CN/docs/Glossary/Camel_case)
+- [蛇形命名法](/zh-CN/docs/Glossary/Snake_case)
+- [typescript-eslint 规则：`naming-convention`](https://typescript-eslint.io/rules/naming-convention/)
diff --git a/files/zh-cn/glossary/key/index.md b/files/zh-cn/glossary/key/index.md
index 7f7bb059991375..7e5eaab71161f0 100644
--- a/files/zh-cn/glossary/key/index.md
+++ b/files/zh-cn/glossary/key/index.md
@@ -1,22 +1,24 @@
---
title: 密钥
slug: Glossary/Key
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-密钥是一段用于 {{Glossary("cipher", "密码算法")}}{{Glossary("encryption","加密")}}和/或{{Glossary("decryption","解密")}}的信息。
+密钥是一段用于{{Glossary("cipher", "密码算法")}}{{Glossary("encryption","加密")}}和/或{{Glossary("decryption","解密")}}的信息。
-经加密的消息需要保证即使{{Glossary("cryptosystem","密码体制")}}中除了密钥外的其他部分在公开可见的情况下，依然保持安全性。
+经加密的消息需要确保即使{{Glossary("cryptosystem","密码系统")}}中除密钥外，其他部分在公开可见的情况下，仍然具有安全性。
-在{{Glossary("symmetric-key cryptography", "对称密钥加密算法")}}中，加密与解密过程使用同样的密钥。在{{Glossary("public-key cryptography", "公钥加密算法")}}中，存在一对相互关联的*公钥*和*私钥*，公钥可以公开获取，私钥需要保密。公钥加密的消息，只有对应的私钥才能解密，反之亦然。
+在{{Glossary("symmetric-key cryptography", "对称密钥算法")}}中，加密与解密过程使用同样的密钥。在{{Glossary("public-key cryptography", "非对称密钥算法")}}中，存在一对相互关联的*公钥*和*私钥*，公钥可以公开获取，私钥需要保密。公钥加密的消息，只有对应的私钥才能解密，反之亦然。
## 参见
-- 维基百科上的[柯克霍夫原则](https://zh.wikipedia.org/wiki/柯克霍夫原则)词条
+- 维基百科上的[柯克霍夫原则](https://zh.wikipedia.org/wiki/柯克霍夫原则)
- [MDN 术语表](/zh-CN/docs/Glossary)
- - {{Glossary("Block cipher mode of operation")}}
+ - {{Glossary("Block cipher mode of operation", "分组密码工作模式")}}
- {{Glossary("Cipher","密码")}}
- {{Glossary("Ciphertext","密文")}}
- {{Glossary("Cipher suite", "密码套件")}}
diff --git a/files/zh-cn/glossary/latency/index.md b/files/zh-cn/glossary/latency/index.md
index be52eabb51d1de..f21b65ecbe8691 100644
--- a/files/zh-cn/glossary/latency/index.md
+++ b/files/zh-cn/glossary/latency/index.md
@@ -1,14 +1,16 @@
---
-title: Latency
+title: 延迟
slug: Glossary/Latency
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**延迟**是请求的资源到达其目的地所花费的网络时间。低延迟是好的，这意味着几乎没有延迟。高延迟是不好的，这意味着所请求的资源要花很长时间才能到达目的地。
+**延迟**是请求的资源到达其目的地所花费的网络时间。低延迟是好事，意味着几乎没有延迟。高延迟是不好的，意味着所请求的资源要花很长时间才能到达目的地。
延迟可能是任何类型的数据流中的一个因素，但是最常见的讨论方式是网络延迟（数据包从源传输到目标所花费的时间）和媒体编解码器延迟（传输数据包所需的时间）。源数据进行编码或解码，并到达结果数据的使用者）。
-## 更多
+## 参见
-- 理解延迟
+- [理解延迟](/zh-CN/docs/Web/Performance/Understanding_latency)
diff --git a/files/zh-cn/glossary/layout_viewport/index.md b/files/zh-cn/glossary/layout_viewport/index.md
new file mode 100644
index 00000000000000..1b7d10a8300bf8
--- /dev/null
+++ b/files/zh-cn/glossary/layout_viewport/index.md
@@ -0,0 +1,20 @@
+---
+title: 布局视口
+slug: Glossary/Layout_viewport
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**布局视口**是浏览器绘制网页的视口，本质上代表了可见的区域，而{{Glossary("visual viewport", "视觉视口")}}则代表用户显示设备上当前可见的部分。
+
+这一点很重要，例如在移动设备上，用户通常可以通过捏合手势来缩放网站内容。渲染的文档不会发生任何变化，因此布局视口在用户调整缩放级别时保持不变。但是，视觉视口会更新，以指示用户可以看到的页面区域。
+
+## 参见
+
+- [虚拟视口 API](/zh-CN/docs/Web/API/Visual_Viewport_API)
+- 维基百科上的[视口](https://zh.wikipedia.org/wiki/视口)
+- [两个视区的来历](https://www.quirksmode.org/mobile/viewports.html)（怪异模式）
+- MDN 术语{{Glossary("Viewport", "视口")}}
+- MDN 术语{{Glossary("Visual viewport", "视觉视口")}}
diff --git a/files/zh-cn/glossary/lazy_load/index.md b/files/zh-cn/glossary/lazy_load/index.md
new file mode 100644
index 00000000000000..346af0595f2918
--- /dev/null
+++ b/files/zh-cn/glossary/lazy_load/index.md
@@ -0,0 +1,16 @@
+---
+title: 懒加载
+slug: Glossary/Lazy_load
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**懒加载**是一种根据用户的活动和导航模式来将某些资源（例如图片）的加载推迟到用户需要时的策略；通常来说，这些资源只有在滚动到可视区域时才会被加载。
+
+如果正确实现，这种资源加载的延迟对于用户体验是无缝的，并且可能有助于改善初始加载性能，包括[可交互时间](/zh-CN/docs/Glossary/Time_to_interactive)，因为页面开始工作所需的资源更少。
+
+## 参见
+
+- [懒加载](/zh-CN/docs/Web/Performance/Lazy_loading)
diff --git a/files/zh-cn/glossary/lgpl/index.md b/files/zh-cn/glossary/lgpl/index.md
new file mode 100644
index 00000000000000..6576ea780a85a2
--- /dev/null
+++ b/files/zh-cn/glossary/lgpl/index.md
@@ -0,0 +1,15 @@
+---
+title: LGPL
+slug: Glossary/LGPL
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+LGPL（GNU 宽通用公共许可证）是自由软件基金会发布的自由软件许可证。LGPL 为严格的{{Glossary("copyleft", "著佐权")}} {{Glossary("GPL")}} 提供了一个更为宽松的替代方案。虽然任何使用 GPL 许可程序的衍生作品都必须以相同的条款（自由使用、共享、研究和修改）发布，但 LGPL 仅要求衍生程序中获得 LGPL 许可的部分继续使用 LGPL，而不是整个程序。LGPL 通常用于许可共享组件，如库（`.dll`、`.so`、`.jar` 等）。
+
+## 参见
+
+- 维基百科上的 [GNU 宽通用公共许可证](https://zh.wikipedia.org/wiki/GNU宽通用公共许可证)
+- gnu.org 上的 [LGPL 协议](https://www.gnu.org/licenses/lgpl-3.0.html)文本
diff --git a/files/zh-cn/glossary/literal/index.md b/files/zh-cn/glossary/literal/index.md
new file mode 100644
index 00000000000000..32e444e4cccedc
--- /dev/null
+++ b/files/zh-cn/glossary/literal/index.md
@@ -0,0 +1,62 @@
+---
+title: 字面量
+slug: Glossary/Literal
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**字面量**在 JavaScript 中表示固定的值，而不是变量，这些值是*直接*在脚本中提供的。
+
+- [数组字面量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#array_literals)
+- [布尔字面量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#boolean_literals)
+- [浮点字面量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#floating-point_literals)
+- [数字字面量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#numeric_literals)
+- [对象字面量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals)
+- [正则表达式字面量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#regexp_literals)
+- [字符串字面量](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#string_literals)
+
+## 示例
+
+### 字符串字面量
+
+字符串字面量是由双引号（`"`）或单引号（`'`）包围的零个或多个字符的序列。字符串必须由相同类型的引号（即，单引号或双引号）括起来。
+
+以下是字符串字面量的示例：
+
+```js
+"foo";
+"bar";
+"1234";
+"一行 \n 又一行";
+"Joyo 的猫";
+```
+
+### 对象字面量
+
+对象字面量是由零个或多个属性名称和相关值的对组成的列表，用大括号（`{}`）括起来。
+
+以下是对象字面量的示例。`car` 对象的第一个元素定义了一个属性 `myCar`，并赋予它一个新字符串“`丰田`”；第二个元素，`getCar` 属性，立即赋值为调用函数 `carTypes('本田')` 的结果；第三个元素，`special` 属性，使用了一个现有的变量 `sales`。
+
+```js
+const sales = "宝马";
+
+function carTypes(name) {
+ return name === "本田" ? name : `不好意思，我们不卖${name}.`;
+}
+
+const car = {
+ myCar: "丰田",
+ getCar: carTypes("本田"),
+ special: sales,
+};
+
+console.log(car.myCar); // 丰田
+console.log(car.getCar); // 本田
+console.log(car.special); // 宝马
+```
+
+## 参见
+
+- 维基百科上的[字面量](<https://en.wikipedia.org/wiki/Literal_(computer_programming)>)
diff --git a/files/zh-cn/glossary/local_variable/index.md b/files/zh-cn/glossary/local_variable/index.md
new file mode 100644
index 00000000000000..efc34d2997b1dc
--- /dev/null
+++ b/files/zh-cn/glossary/local_variable/index.md
@@ -0,0 +1,24 @@
+---
+title: 局部变量
+slug: Glossary/Local_variable
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+变量名只在{{Glossary("local scope", "局部作用域")}}中与其{{glossary("value", "值")}}相绑定的{{glossary("variable", "变量")}}是局部变量。
+
+## 示例
+
+```js
+let global = 5; // 全局变量
+
+function fun() {
+ let local = 10; // 局部变量
+}
+```
+
+## 参见
+
+- 维基百科上的[局部变量](https://zh.wikipedia.org/wiki/局部变量)
diff --git a/files/zh-cn/glossary/locale/index.md b/files/zh-cn/glossary/locale/index.md
new file mode 100644
index 00000000000000..4c6ba5d82ffd5f
--- /dev/null
+++ b/files/zh-cn/glossary/locale/index.md
@@ -0,0 +1,16 @@
+---
+title: 区域设置
+slug: Glossary/Locale
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**区域设置**（locale）是一组基于语言或国家的用户界面偏好设置。
+
+程序从主机系统的语言中获取其区域设置。区域设置表示给定区域的纸张格式、货币、日期格式和数字等。
+
+## 参见
+
+- 维基百科上的[区域设置](https://zh.wikipedia.org/wiki/区域设置)
diff --git a/files/zh-cn/glossary/localization/index.md b/files/zh-cn/glossary/localization/index.md
index 83ae5b46be1d72..b25413312dccfc 100644
--- a/files/zh-cn/glossary/localization/index.md
+++ b/files/zh-cn/glossary/localization/index.md
@@ -1,6 +1,8 @@
---
title: 本地化
slug: Glossary/Localization
+l10n:
+ sourceCommit: 5f5daffff583dffcf4650a8812bc228807a1b34d
---
{{GlossarySidebar}}
@@ -13,7 +15,7 @@ slug: Glossary/Localization
- 计量单位（如：欧洲使用千米，而美国使用英里）
- 文字方向（如：欧洲语言是从左向右书写的，而阿拉伯语是从右向左书写的）
- 拉丁字母的大写行为（如：英语用大写字母表示工作日，西班牙语使用小写字母）
-- 习语的适配（如：“raining cats and dogs”的字面翻译没有任何意义）（译者注：上述习语翻译为中文是“下起瓢泼大雨”的意思，与猫和狗没有任何联系）
+- 习语的适配（如：“raining cats and dogs”（下起瓢泼大雨）的字面翻译没有任何意义）
- 情感表达（如：日语的敬语体系与休闲语有很大的不同）
- 数字格式（如：德国使用 10 000,00，而美国使用 10,000.00）
- 日期格式
@@ -29,5 +31,5 @@ slug: Glossary/Localization
## 参见
-- 维基百科上的[本地化](https://zh.wikipedia.org/wiki/语言本地化)词条
+- 维基百科上的[本地化](https://zh.wikipedia.org/wiki/语言本地化)
- {{glossary("Internationalization", "国际化")}}
diff --git a/files/zh-cn/glossary/long_task/index.md b/files/zh-cn/glossary/long_task/index.md
new file mode 100644
index 00000000000000..9acadefeafb6ec
--- /dev/null
+++ b/files/zh-cn/glossary/long_task/index.md
@@ -0,0 +1,17 @@
+---
+title: 长任务
+slug: Glossary/Long_task
+l10n:
+ sourceCommit: 1391eec245db45782d4c73572ce7b375cbe43989
+---
+
+{{GlossarySidebar}}
+
+**长任务**是指需要超过 50 毫秒完成的任务。
+
+这是指[主 UI 线程](/zh-CN/docs/Glossary/Main_thread)持续忙碌 50 毫秒或更长时间的不间断时段。常见的例子包括长时间运行的事件处理程序、耗费资源的[重排](/zh-CN/docs/Glossary/Reflow)和其他重新渲染，以及浏览器在事件循环的不同轮次之间执行的超过 50 毫秒的工作。
+
+## 参见
+
+- [长任务 API](/zh-CN/docs/Web/API/PerformanceLongTaskTiming)
+- [长动画帧 API](/zh-CN/docs/Web/API/Performance_API/Long_animation_frame_timing)
diff --git a/files/zh-cn/glossary/loop/index.md b/files/zh-cn/glossary/loop/index.md
new file mode 100644
index 00000000000000..3531bbf3b5e1eb
--- /dev/null
+++ b/files/zh-cn/glossary/loop/index.md
@@ -0,0 +1,17 @@
+---
+title: 循环
+slug: Glossary/Loop
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**循环**是一系列重复执行的指令，直到满足某个特定条件为止。一个例子是获取数据项并更改它的过程，然后确保某个{{Glossary("conditional", "条件")}}得到检查，比如检查计数器是否达到了预定数目。
+
+循环是执行语句多次的一种方式。在一些语言中，所有数据都是{{glossary("Immutable", "不可变的")}}，使得无法更新计数器变量，此时可以使用{{glossary("Recursion", "递归")}}来实现相同的效果。
+
+## 参见
+
+- 维基百科上的[控制流](https://zh.wikipedia.org/wiki/控制流程#迴圈)
+- [循环与迭代指南](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration)
diff --git a/files/zh-cn/glossary/lossless_compression/index.md b/files/zh-cn/glossary/lossless_compression/index.md
new file mode 100644
index 00000000000000..b919b173a28abf
--- /dev/null
+++ b/files/zh-cn/glossary/lossless_compression/index.md
@@ -0,0 +1,16 @@
+---
+title: 无损压缩
+slug: Glossary/Lossless_compression
+l10n:
+ sourceCommit: 6f55a0897b5511a2a78bbd70dc611c76eae911ff
+---
+
+{{GlossarySidebar}}
+
+**无损压缩**是一类允许从压缩数据完美地重构原始数据的数据压缩算法。无损压缩方法是可逆的。无损压缩的例子包括 {{glossary("gzip_compression", "gzip")}}、{{glossary("Brotli_compression", "brotli")}}、{{glossary("Zstandard compression", "Zstandard")}}、{{glossary("WebP")}} 和 {{glossary("PNG")}}。
+
+另一方面，{{glossary("Lossy compression", "有损压缩")}}使用不精确的近似值（从原始文件中丢弃一些数据），使其成为一种不可逆转的压缩方法。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
+
+## 参见
+
+- {{glossary("Lossy compression", "有损压缩")}}
diff --git a/files/zh-cn/glossary/lossy_compression/index.md b/files/zh-cn/glossary/lossy_compression/index.md
new file mode 100644
index 00000000000000..ccad67ddfc2dbb
--- /dev/null
+++ b/files/zh-cn/glossary/lossy_compression/index.md
@@ -0,0 +1,20 @@
+---
+title: 有损压缩
+slug: Glossary/Lossy_compression
+l10n:
+ sourceCommit: 6f55a0897b5511a2a78bbd70dc611c76eae911ff
+---
+
+{{GlossarySidebar}}
+
+**有损压缩**，又称为不可逆压缩，是一种数据压缩方法，它使用不精确的近似值和部分数据丢弃来表示内容。简单来说：有损压缩导致原始文件中的数据丢失，可能导致质量下降。这种压缩过程是不可逆的；一旦对内容进行了有损压缩，就无法将内容恢复到原始状态。因此，经过有损压缩的内容通常不应再进一步编辑。
+
+有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式（如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)）中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
+
+
+
+虽然上述两幅图像的质量没有明显的差异，但第二幅图像的大小因经过了有损压缩而显著减小。
+
+## 参见
+
+- [无损压缩](/zh-CN/docs/Glossary/Lossless_compression)
diff --git a/files/zh-cn/glossary/ltr/index.md b/files/zh-cn/glossary/ltr/index.md
index 1e8fd5b0b160b2..b95003b4726f8f 100644
--- a/files/zh-cn/glossary/ltr/index.md
+++ b/files/zh-cn/glossary/ltr/index.md
@@ -1,6 +1,8 @@
---
title: LTR（从左到右）
slug: Glossary/LTR
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
@@ -9,21 +11,21 @@ slug: Glossary/LTR
大多数西方语言，如同世界上的其他语言一样，都是从左向右书写的。
-与 LTR 相对的是 {{Glossary("RTL")}}（从右到左，Right To Left），在另一些语言中常用，例如阿拉伯语（`ar`）和希伯来语（`he`）。
+与 LTR 相对的是 {{Glossary("RTL")}}（从右到左），常用在另一些语言中，例如阿拉伯语（`ar`）和希伯来语（`he`）。
## 参见
- [MDN Web 文档术语](/zh-CN/docs/Glossary)
- - {{Glossary("locale")}}
+ - {{Glossary("locale", "区域设置")}}
- {{Glossary("Localization", "本地化")}}
- {{Glossary("LTR", "LTR（从左到右）")}}
- {{Glossary("RTL", "RTL（从右到左）")}}
- [HTML 全局属性](/zh-CN/docs/Web/HTML/Global_attributes)
- - [`dir`](/zh-CN/docs/Web/HTML/Global_attributes#dir)
- - [`lang`](/zh-CN/docs/Web/HTML/Global_attributes#lang)
+ - [dir](/zh-CN/docs/Web/HTML/Global_attributes#dir)
+ - [lang](/zh-CN/docs/Web/HTML/Global_attributes#lang)
- [CSS](/zh-CN/docs/Web/CSS)
diff --git a/files/zh-cn/glossary/main_thread/index.md b/files/zh-cn/glossary/main_thread/index.md
index 402ee96d97cb49..0a44df8b507fb0 100644
--- a/files/zh-cn/glossary/main_thread/index.md
+++ b/files/zh-cn/glossary/main_thread/index.md
@@ -1,22 +1,21 @@
---
title: 主线程
slug: Glossary/Main_thread
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**主线程**用于浏览器处理用户事件和页面绘制等。默认情况下，浏览器在一个线程中运行一个页面中的所有 JavaScript 脚本，以及呈现布局，回流，和垃圾回收。这意味着一个长时间运行的 JavaScript 会阻塞线程，导致页面无法响应，造成不佳的用户体验。
+**主线程**是浏览器处理用户事件和页面绘制的地方。默认情况下，浏览器在一个线程中运行一个页面中的所有 JavaScript 脚本，并执行布局、重排和垃圾回收。这意味着一个长时间运行的 JavaScript 会阻塞线程，导致页面无法响应，造成不佳的用户体验。
-除非故意使用 [web worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)，比如 [service worker](/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers)，不然 JavaScript 只在线程中运行，所以脚本的运行时，很容易导致事件处理流程或绘制的延迟。主线程中运行的工作越少，就有越多的余地来处理用户事件，页面绘制和对用户保持响应。
+除非故意使用 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)，比如 [Service Worker](/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers)，否则 JavaScript 只在主线程中运行，因此，脚本很容易导致事件处理或绘制延迟。主线程中运行的工作越少，就有越多的余地来处理用户事件、页面绘制，并对用户保持响应。
## 参见
-- 另可参考
+- [异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous)
+- [Web Worker API](/zh-CN/docs/Web/API/Web_Workers_API)
+- [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API)
+- [术语](/zh-CN/docs/Glossary)
- - [异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous)
- - [Web worker API](/zh-CN/docs/Web/API/Web_Workers_API)
- - [Service worker API](/zh-CN/docs/Web/API/Service_Worker_API)
-
-- [词汇表](/zh-CN/docs/Glossary)
-
- - {{Glossary("Thread")}}
+ - {{Glossary("Thread", "线程")}}
diff --git a/files/zh-cn/glossary/markup/index.md b/files/zh-cn/glossary/markup/index.md
new file mode 100644
index 00000000000000..4cb9937ab8d2ba
--- /dev/null
+++ b/files/zh-cn/glossary/markup/index.md
@@ -0,0 +1,30 @@
+---
+title: 标记语言
+slug: Glossary/Markup
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+标记语言是一种专门用于定义和呈现文本的语言。{{glossary("HTML")}}（超文本标记语言）就是标记语言的一个例子。
+
+在如 HTML 文件之类的文本文件中，元素使用{{glossary("Tag", "标签")}}进行*标记*。这些标记解释了内容的那部分的目的。
+
+## 标记语言的类型
+
+- **呈现性标记**
+ - : 由传统的所见即所得（WYSIWYG）文字处理系统使用；这些标记对人类作者、用户和编辑器不可见。
+- **过程性标记**
+ - : 与文本结合使用，为程序提供有关文本处理的指令。这些文本由作者可见地操作。
+- **描述性标记**
+ - : 将文档的各个部分标记为程序应该如何处理它们。例如，HTML 的 {{HTMLElement("td")}} 定义了 HTML 表中的单元格。
+
+## 参见
+
+- [MDN Web 文档术语](/zh-CN/docs/Glossary)
+
+ - {{Glossary("HTML")}}
+ - {{Glossary("XHTML")}}
+ - {{Glossary("XML")}}
+ - {{Glossary("SVG")}}
diff --git a/files/zh-cn/glossary/media/audio-visual_presentation/index.md b/files/zh-cn/glossary/media/audio-visual_presentation/index.md
new file mode 100644
index 00000000000000..2c02568f0dc4d9
--- /dev/null
+++ b/files/zh-cn/glossary/media/audio-visual_presentation/index.md
@@ -0,0 +1,21 @@
+---
+title: 媒体（音频—视觉展示）
+slug: Glossary/Media/Audio-visual_presentation
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**媒体**（更准确地说，**多媒体**）指的是音频、视频或结合了音频和视觉材料的内容，如音乐、录音讲话、电影、电视节目或任何其他在一段时间内呈现的内容。
+
+更广泛地说，媒体可能包括静止图像，如照片或其他静态图像。
+
+媒体内容可以以各种方式录制、播放、呈现，并且有时可以以各种方式进行交互。
+
+## 参见
+
+- 维基百科上的[多媒体](https://zh.wikipedia.org/wiki/多媒体)
+- [网络媒体技术](/zh-CN/docs/Web/Media)：介绍了媒体在网络内容中的所有使用方式
+- MDN 学习区中的[多媒体和嵌入](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding)
+- {{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素，用于在 {{Glossary("HTML")}} 文档中呈现媒体
diff --git a/files/zh-cn/glossary/media/css/index.md b/files/zh-cn/glossary/media/css/index.md
new file mode 100644
index 00000000000000..c1ae565b6d33a2
--- /dev/null
+++ b/files/zh-cn/glossary/media/css/index.md
@@ -0,0 +1,21 @@
+---
+title: 媒体（CSS）
+slug: Glossary/Media/CSS
+l10n:
+ sourceCommit: c51e0599ea09c0e6d035c635db9f48ad1f241490
+---
+
+{{GlossarySidebar}}
+
+在 {{Glossary("CSS")}}（层叠样式表）中，**_媒体_**指的是文档要由{{Glossary("rendering engine", "渲染引擎")}}绘制到的目标。
+
+通常情况下，媒体是屏幕，但也可能是打印机、盲文显示器或其他类型的设备。
+
+CSS 提供了几个特性，允许你根据查看设备的媒体**类型**（例如屏幕或打印，仅举两例）或媒体**能力**（例如宽度、分辨率或其他值）来调整文档的样式或甚至提供不同的样式。
+
+## 参见
+
+- [使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)
+- {{cssxref("@media")}} [at-规则](/zh-CN/docs/Web/CSS/At-rule)：根据媒体查询的结果，有条件地应用[样式表](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works#应用_css_到_dom)的一部分。
+- {{domxref("Window.matchMedia()")}}：测试查看设备是否符合媒体查询条件。
diff --git a/files/zh-cn/glossary/media/index.md b/files/zh-cn/glossary/media/index.md
new file mode 100644
index 00000000000000..f6885c961032c1
--- /dev/null
+++ b/files/zh-cn/glossary/media/index.md
@@ -0,0 +1,16 @@
+---
+title: 媒体
+slug: Glossary/Media
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**媒体**一词拥有多个含义，具体含义取决于上下文。
+
+{{GlossaryDisambiguation}}
+
+## 参见
+
+- 维基百科上的[媒体](https://zh.wikipedia.org/wiki/媒介)
diff --git a/files/zh-cn/glossary/media_query/index.md b/files/zh-cn/glossary/media_query/index.md
new file mode 100644
index 00000000000000..d593b5153cb320
--- /dev/null
+++ b/files/zh-cn/glossary/media_query/index.md
@@ -0,0 +1,25 @@
+---
+title: 媒体查询
+slug: Glossary/Media_query
+l10n:
+ sourceCommit: 9ff83eb7950a8d4e2d55d61fcf9b06cf82eae6bf
+---
+
+{{GlossarySidebar}}
+
+**媒体查询**是一个独立于文档内容的逻辑表达式，用于 CSS、JavaScript、HTML 和其他 Web 语言检查文档所显示的用户代理或设备的各个方面，以确定是否应用相关的代码块或特性。
+
+媒体查询可以条件性地应用 CSS 样式，通过使用 CSS 的 {{cssxref("@media")}} 和 {{cssxref("@import")}} at-规则；可以在 JavaScript 中测试和监视媒体状态，比如使用 {{DOMxRef("Window.matchMedia", "matchMedia()")}} 方法、{{DOMxRef("MediaQueryList.matches", "matches")}} 属性和 {{DOMxRef("MediaQueryList.change_event", "change")}} 事件；媒体查询可以用作 [`<link>`](/zh-CN/docs/Web/HTML/Element/link#media)、[`<source>`](/zh-CN/docs/Web/HTML/Element/source#media) 以及 [`<style>`](/zh-CN/docs/Web/HTML/Element/style#media) [HTML](/zh-CN/docs/Web/HTML) 元素的 `media` 属性的值——如果媒体查询为真，则条件性地应用链接、源或样式。当 `media` 属性被省略时，默认为真；媒体查询也可以用作 {{HTMLElement("img")}} 元素的 [`sizes`](/zh-CN/docs/Web/API/HTMLImageElement/sizes) 属性的值。
+
+媒体查询由可选的媒体查询修饰符和媒体类型以及零个或多个媒体条件以及逻辑运算符组成。
+
+响应用户环境的更改时，例如当用户扩展浏览器窗口或将移动设备翻转到横向方向时，媒体查询将重新评估。
+
+多个逗号分隔的媒体查询创建了一个媒体查询列表。如果媒体查询列表的任何组件媒体查询为真，则该列表为真。当且仅当所有组件媒体查询均为假时，列表为假。
+
+媒体查询可以选择以单个媒体查询修饰符、`not` 或 `only` 作为前缀。在 `not` 的情况下，会改变后续媒体查询的含义。
+
+## 参见
+
+- [使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+- [CSS 媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)模块
diff --git a/files/zh-cn/glossary/method/index.md b/files/zh-cn/glossary/method/index.md
index eca61786238ac2..5fc631ebc2f96c 100644
--- a/files/zh-cn/glossary/method/index.md
+++ b/files/zh-cn/glossary/method/index.md
@@ -1,18 +1,22 @@
---
-title: Method
+title: 方法
slug: Glossary/Method
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-一个方法就是一个函数，是对象的属性之一。有两种类型的方法：*实例方法*是由对象实例执行的内置任务，另一种是*静态方法*，在对象构造函数内直接调用的任务*。*
+**方法**是一种作为{{glossary("object","对象")}}的{{glossary("property","属性")}}的{{glossary("function","函数")}}。方法有两种类型：*实例方法*是由对象实例执行的内置任务，而[_静态方法_](/zh-CN/docs/Glossary/Static_method)是直接在对象构造函数上调用的任务。
-> **备注：** 在 JavaScript 中，函数本身也是对象，因此，在这种情况下，一个方法实际上就是指向一个函数的对象引用。
+> **备注：** 在 JavaScript 中，函数本身也是对象，因此，在这个上下文中，方法实际上是对函数的{{glossary("object reference","对象引用")}}。
+
+当说 `F` 是 `O` 的一个*方法*时，通常意味着 `F` 将 `O` 作为其 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 绑定。没有根据它们的 `this` 值具有不同行为的函数属性（或者根本没有动态 `this` 绑定的函数——比如[绑定函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)和[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)）可能不被普遍认为是方法。
## 参见
-- 维基百科上的[方法（计算机科学）](<https://zh.wikipedia.org/wiki/方法_(電腦科學)>)
-- [在 JavaScript 定义方法](/zh-CN/docs/Web/JavaScript/Reference/Functions/Method_definitions)（传统语法与新的简写语法的比较）
+- 维基百科上的[方法](<https://zh.wikipedia.org/wiki/方法_(電腦科學)>)
+- [在 JavaScript 中定义方法](/zh-CN/docs/Web/JavaScript/Reference/Functions/Method_definitions)（传统语法与新的简写语法的比较）
- [JavaScript 内置方法列表](/zh-CN/docs/Web/JavaScript/Reference)
- [MDN Web 文档术语表](/zh-CN/docs/Glossary)
diff --git a/files/zh-cn/glossary/microsoft_internet_explorer/index.md b/files/zh-cn/glossary/microsoft_internet_explorer/index.md
index a5ed73c139e1f8..f803543edbe32f 100644
--- a/files/zh-cn/glossary/microsoft_internet_explorer/index.md
+++ b/files/zh-cn/glossary/microsoft_internet_explorer/index.md
@@ -1,18 +1,23 @@
---
-title: Microsoft Internet Explorer 浏览器
+title: Microsoft Internet Explorer
slug: Glossary/Microsoft_Internet_Explorer
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-Internet Explorer（或 IE）是一个免费的图形{{glossary("browser","浏览器")}}，曾经由微软为企业用户维护。目前，{{glossary("Microsoft Edge")}} 是 Windows 默认的浏览器。
+Internet Explorer（IE）是一个免费的图形{{glossary("browser","浏览器")}}，曾经由微软为企业用户维护。目前，{{glossary("Microsoft Edge")}} 是 Windows 默认的浏览器。
微软在 1995 年首次将 IE 和 Windows 捆绑，作为“Microsoft Plus!”包的一部分出售。在大约 2002 年时，Internet Explorer 已经成了世界上使用最多的浏览器，但目前已经落后于 Chrome、Firefox、Edge 和 Safari。
-IE 经历了许多版本，并为桌面、手机和 Xbox 控制台提供了版本。它也可以在 Mac 和 UNIX 上使用，微软分别在 2003 年和 2001 年停止了这些版本。最后的 Windows 版本是 2020 年 11 月 10 日的 Windows 11.0.220。微软于 2022 年 6 月 15 日结束对 IE 的支持。
+IE 经历了许多版本，并为桌面、手机和 Xbox 控制台提供了版本。它也可以在 Mac 和 UNIX 上使用，微软分别在 2003 年和 2001 年停止了这些版本。最后的 Windows 发布版本是 2020 年 11 月 10 日的 Windows 11.0.220。
+
+微软于 2022 年 6 月 15 日结束对 IE 的支持。
## 参见
- 维基百科上的 [Internet Explorer](https://zh.wikipedia.org/wiki/Internet_Explorer)
- 维基百科上的 [Internet Explorer 的历史](https://zh.wikipedia.org/wiki/Internet_Explorer歷史)
- 维基百科上的 [Internet Explorer 的版本](https://en.wikipedia.org/wiki/Internet_Explorer_version_history)
+- [IE 生命周期终止倒计时](https://death-to-ie11.com/)
diff --git a/files/zh-cn/glossary/middleware/index.md b/files/zh-cn/glossary/middleware/index.md
new file mode 100644
index 00000000000000..81e27d6ac6e949
--- /dev/null
+++ b/files/zh-cn/glossary/middleware/index.md
@@ -0,0 +1,17 @@
+---
+title: 中间件
+slug: Glossary/Middleware
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+广义地来说，中间件是任何能够使系统各部分进行通信和管理数据的软件或服务。它是处理组件之间以及输入/输出之间通信的软件，因此开发人员可以专注于他们应用程序的特定用途。
+
+在服务器端 Web 应用框架中，中间件通常更具体地指可以添加到框架的请求/响应处理管道中的预构建软件组件，以处理诸如数据库访问等任务。
+
+## 参见
+
+- 维基百科上的[中间件（分布式应用）](<https://en.wikipedia.org/wiki/Middleware_(distributed_applications)>)
+- 维基百科上的[中间件](https://zh.wikipedia.org/wiki/中间件)
diff --git a/files/zh-cn/glossary/mime_type/index.md b/files/zh-cn/glossary/mime_type/index.md
index c253de15d351b1..c3687f10e255dd 100644
--- a/files/zh-cn/glossary/mime_type/index.md
+++ b/files/zh-cn/glossary/mime_type/index.md
@@ -1,15 +1,21 @@
---
-title: MIME type
+title: MIME 类型
slug: Glossary/MIME_type
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**MIME type** （现在称为“媒体类型 (media type)”，但有时也是“内容类型 (content type)”）是指示文件类型的字符串，与文件一起发送（例如，一个声音文件可能被标记为 `audio/ogg` ，一个图像文件可能是 `image/png` ）。它与传统 Windows 上的文件扩展名有相同目的。
+**MIME 类型**（现在正式地称作“媒体类型”，但有时也被称作“内容类型”）是指示文件类型的会与文件同时发送出去的字符串，描述了内容的格式（例如，一个声音文件可能被标记为 `audio/ogg` ，一个图像文件可能是 `image/png`）。
+
+它与传统 Windows 上的文件扩展名有相同目的。这个术语的名字源于最初用于电子邮件的 {{glossary("mime","MIME")}} 标准。
## 参见
- 维基百科上的[互联网媒体类型](https://zh.wikipedia.org/wiki/互联网媒体类型)
-- [MIME types 列表](https://www.iana.org/assignments/media-types/media-types.xhtml)
-- [正确配置服务器 MIME Types](/zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types)
-- 有关在 Web 环境中使用 [MIME Types](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 的详细信息。
+- [MIME 类型列表](https://www.iana.org/assignments/media-types/media-types.xhtml)
+- [正确配置服务器 MIME 类型](/zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types)
+- 有关在 Web 环境中使用 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的详细信息。
+- [MIME 类型的不完整列表](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
+- [MediaRecorder.mimeType](/zh-CN/docs/Web/API/MediaRecorder/mimeType)
diff --git a/files/zh-cn/glossary/minification/index.md b/files/zh-cn/glossary/minification/index.md
new file mode 100644
index 00000000000000..0f85dbaf36259b
--- /dev/null
+++ b/files/zh-cn/glossary/minification/index.md
@@ -0,0 +1,14 @@
+---
+title: 极简化
+slug: Glossary/Minification
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**极简化**是删除不必要或冗余数据的过程，而不影响浏览器处理资源的行为。
+
+极简化可以包括删除代码注释、空白和未使用的代码，以及缩短变量和函数的名称，用于通过减小文件大小来提高网页性能。这通常是一个在构建时自动发生的步骤。
+
+由于极简化使代码对人类而言不太易读，开发者工具也有“美观输出”特性，可以在代码中添加空白，使其更易读。
diff --git a/files/zh-cn/glossary/mitm/index.md b/files/zh-cn/glossary/mitm/index.md
index 011db94987b3f1..be09b21ed4f1e8 100644
--- a/files/zh-cn/glossary/mitm/index.md
+++ b/files/zh-cn/glossary/mitm/index.md
@@ -1,6 +1,8 @@
---
title: 中间人攻击（MitM）
slug: Glossary/MitM
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
@@ -12,11 +14,11 @@ slug: Glossary/MitM
对于实际生活中的信件沟通和线上的信息交流来说，中间人攻击都是很难防范的，这里有一些小建议：
- 不要忽视浏览器弹出的证书警告！你可能访问的是钓鱼网站或者假冒的服务器；
-- 公共网络环境下（例如公共 WiFi），没有 HTTPS 加密的敏感网站不要随便登录，一般不可信；
-- 在任何网站上登录自己的账号前确保网址为 HTTPS 加密协议；
+- 公共网络环境下，没有 HTTPS 加密的敏感网站不可信；
+- 在登录账号前检查地址栏中是否为 HTTPS，确保使用了加密；
## 参见
-- OWASP 文章：[Man-in-the-middle attack](https://www.owasp.org/index.php/Man-in-the-middle_attack)
+- OWASP 文章：[中间人攻击](https://www.owasp.org/index.php/Man-in-the-middle_attack)
- PortSwigger：[最新的中间人攻击新闻](https://portswigger.net/daily-swig/mitm)
- 维基百科：[中间人攻击](https://zh.wikipedia.org/zh-cn/中间人攻击)
diff --git a/files/zh-cn/glossary/modem/index.md b/files/zh-cn/glossary/modem/index.md
new file mode 100644
index 00000000000000..4d4c8b8cf7011a
--- /dev/null
+++ b/files/zh-cn/glossary/modem/index.md
@@ -0,0 +1,18 @@
+---
+title: 调制解调器
+slug: Glossary/Modem
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+调制解调器（“**调制器—解调器**”）是一种将数字信息转换为模拟信号并反之亦然的设备，用于通过网络发送数据。
+
+不同种类的调制解调器用于不同的网络：DSL 调制解调器用于电话线；Wi-Fi 调制解调器用于短距离无线电信号；3G 调制解调器用于蜂窝数据塔，等等。
+
+调制解调器不同于{{Glossary("router", "路由器")}}，但许多公司出售将调制解调器与路由器结合的设备。
+
+## 参见
+
+- 维基百科上的[调制解调器](https://zh.wikipedia.org/wiki/调制解调器)
diff --git a/files/zh-cn/glossary/modularity/index.md b/files/zh-cn/glossary/modularity/index.md
new file mode 100644
index 00000000000000..11312e88dca41d
--- /dev/null
+++ b/files/zh-cn/glossary/modularity/index.md
@@ -0,0 +1,14 @@
+---
+title: 模块化
+slug: Glossary/Modularity
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+模块化指的是系统组件可以分离和重新组合的程度，也指软件包的逻辑单元划分。模块化系统的优势在于可以独立地推理各个部分。
+
+## 参见
+
+- 维基百科上的[模块化](https://en.wikipedia.org/wiki/Modularity)
diff --git a/files/zh-cn/glossary/mozilla_firefox/index.md b/files/zh-cn/glossary/mozilla_firefox/index.md
index 20777a0ea4ec57..0e03a0df996147 100644
--- a/files/zh-cn/glossary/mozilla_firefox/index.md
+++ b/files/zh-cn/glossary/mozilla_firefox/index.md
@@ -1,13 +1,15 @@
---
-title: Mozilla Firefox 浏览器
+title: Mozilla Firefox
slug: Glossary/Mozilla_Firefox
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
**Mozilla Firefox** 是一个免费的开源{{Glossary("browser", "浏览器")}}，其开发工作由 Mozilla 公司负责监督。Firefox 可在 Windows、OS X、Linux 和 Android 平台下运行。
-Firefox 于 2004 年 11 月首次发布，可通过主题、插件和[附加组件](/zh-CN/docs/Mozilla/Add-ons)完全定制。火狐浏览器使用 {{glossary("Gecko")}} 来渲染网页，并实现了当前和未来的 {{glossary("world wide web", "Web")}} 标准。
+Firefox 于 2004 年 11 月首次发布，可通过主题、插件和[附加组件](/zh-CN/docs/Mozilla/Add-ons)完全定制。Firefox 浏览器使用 {{glossary("Gecko")}} 来渲染网页，并实现了当前和未来的 {{glossary("world wide web", "Web")}} 标准。
## 参见
diff --git a/files/zh-cn/glossary/mutable/index.md b/files/zh-cn/glossary/mutable/index.md
index 44d9a41ea0b7d8..51dc7d7fd2c7b1 100644
--- a/files/zh-cn/glossary/mutable/index.md
+++ b/files/zh-cn/glossary/mutable/index.md
@@ -1,11 +1,13 @@
---
-title: 可变（Mutable）
+title: 可变
slug: Glossary/Mutable
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-*可变*指即使没有创建一个全新的值，也可以更改它。在 {{glossary("JavaScript")}} 中，{{Glossary("Object","对象")}}和{{Glossary("Array","数组")}}默认都是可变的，但是{{Glossary("primitive", "原始值")}}是不可变的——一旦创建原始值，它就不能被更改，尽管持有它的变量可能会再次重新分配到其它值。
+不重新创建也可以修改的值是*可变*的。在 {{glossary("JavaScript")}} 中，{{Glossary("Object","对象")}}和{{Glossary("Array","数组")}}默认都是可变的，但是{{Glossary("primitive", "原始值")}}是不可变的——一旦创建原始值，它就不能被更改，尽管持有它的变量可能会再次重新分配到其它值。
## 参见
diff --git a/files/zh-cn/glossary/mvc/index.md b/files/zh-cn/glossary/mvc/index.md
index a16b28b74d8b84..caf1081fc5b111 100644
--- a/files/zh-cn/glossary/mvc/index.md
+++ b/files/zh-cn/glossary/mvc/index.md
@@ -1,18 +1,54 @@
---
title: MVC
slug: Glossary/MVC
+l10n:
+ sourceCommit: e72890bafe775a38620def9a74beda8cf9c47411
---
{{GlossarySidebar}}
-**MVC** (Model-View-Controller) 是一种软件设计模式。它强调分离软件的业务逻辑和显示。这种“分离”提供了更好的分工和改进的维护。一些其他的模式也是基于 MVC 来设计的，像 MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), 和 MVW (Model-View-Whatever).
+**MVC**（Model-View-Controller）是一种强调分离软件的业务逻辑和显示的软件设计模式。这种“分离”提供了更好的分工和改进的维护。一些其他的模式也是基于 MVC 来设计的，如 MVVM（Model-View-Viewmodel）、MVP（Model-View-Presenter）和 MVW（Model-View-Whatever）。
对 MVC 软件设计模式的三个部分可以被描述如下：
-1. Model: 模型持有所有的数据、状态和程序逻辑。
-2. View: 负责界面的布局和显示。
-3. Controller: 负责模型和界面之间的交互。
+1. Model：模型持有所有的数据、状态和程序逻辑。
+2. View：负责界面的布局和显示。
+3. Controller：负责模型和界面之间的交互。
+
+## MVC 示例
+
+想象一个简单的购物清单应用程序。我们需要的是一份本周需要购买的每件物品的名称、数量和价格的清单。下面我们将描述如何使用 MVC 实现一些功能。
+
+
+
+### 模型
+
+模型定义了应用程序应包含的数据。如果这些数据的状态发生变化，模型通常会通知视图（以便根据需要更改显示），有时也会通知控制器（如果需要不同的逻辑来控制更新的视图）。
+
+回到我们的购物清单应用程序，模型将指定清单项应包含的数据——例如物品、价格等——以及已经存在的清单项。
+
+### 视图
+
+视图定义了应用程序的数据应如何显示。
+
+在我们的购物清单应用程序中，视图将定义清单如何呈现给用户，并从模型中接收要显示的数据。
+
+### 控制器
+
+控制器包含逻辑，根据应用程序用户的输入更新模型和/或视图。
+
+例如，我们的购物清单应用程序可能有输入表单和按钮，允许我们添加或删除物品。这些操作需要更新模型，因此输入发送到控制器，控制器然后适当地操作模型，接着模型发送更新的数据给视图。
+
+不过，你可能也想仅仅更新视图以不同的格式显示数据，例如按字母顺序排列项目，或按价格从低到高排列。在这种情况下，控制器可以直接处理这一需求而无需更新模型。
+
+## MVC 在 Web 上的应用
+
+作为一个 Web 开发者，你可能非常熟悉这个模式，即使你以前从未有意识地使用过它。你的数据模型可能包含在某种数据库中（无论是传统的服务器端数据库如 MySQL，还是客户端解决方案如 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API)）。你的应用程序控制代码可能用 HTML/JavaScript 编写，而用户界面可能用 HTML/CSS 或其他你喜欢的东西编写。这听起来非常像 MVC，但 MVC 让这些组件遵循更严格的模式。
+
+在 Web 的早期，MVC 架构主要在服务器端实现，客户端通过表单或链接请求更新，并接收更新的视图以在浏览器中显示。然而，如今随着客户端数据存储和 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 的出现，可以根据需要进行部分页面更新，更多逻辑被推送到客户端。
+
+Web 框架如 [AngularJS](https://zh.wikipedia.org/wiki/AngularJS) 和 [Ember.js](https://zh.wikipedia.org/wiki/Ember.js) 都实现了 MVC 架构，尽管方式略有不同。
## 参见
-- 维基百科上的 [MVC 模式](https://zh.wikipedia.org/wiki/MVC)词条
+- 维基百科上的 [MVC 模式](https://zh.wikipedia.org/wiki/MVC)
diff --git a/files/zh-cn/glossary/namespace/index.md b/files/zh-cn/glossary/namespace/index.md
new file mode 100644
index 00000000000000..d0ed7cf7a092d6
--- /dev/null
+++ b/files/zh-cn/glossary/namespace/index.md
@@ -0,0 +1,22 @@
+---
+title: 命名空间
+slug: Glossary/Namespace
+l10n:
+ sourceCommit: 7f7ff219a89982f689b5a6b3c8c0b029ce1b8178
+---
+
+{{GlossarySidebar}}
+
+命名空间是标识符的上下文，是程序中名称的逻辑分组。在相同的上下文和作用域内，标识符必须唯一标识一个实体。
+
+在操作系统中，目录是一个命名空间。每个目录中的文件或子目录都有一个唯一的名称；同样的名称可以在不同的子目录中多次使用。
+
+在 HTML、CSS 和基于 XML 的语言中，命名空间是元素（或属性）所属的显式声明或隐式方言。
+
+## 参见
+
+- [命名空间速成课](/zh-CN/docs/Web/SVG/Namespaces_Crash_Course)
+- [CSS 命名空间](/zh-CN/docs/Web/CSS/CSS_namespaces) 模块
+- CSS {{CSSXref("@namespace")}}
+- [`Document.createElementNS()`](/zh-CN/docs/Web/API/Document/createElementNS) 方法
+- 维基百科上的[命名空间](https://zh.wikipedia.org/wiki/命名空间)
diff --git a/files/zh-cn/glossary/native/index.md b/files/zh-cn/glossary/native/index.md
index 7354d1981c5c2c..de89586ab38beb 100644
--- a/files/zh-cn/glossary/native/index.md
+++ b/files/zh-cn/glossary/native/index.md
@@ -1,11 +1,13 @@
---
-title: Native
+title: 原生
slug: Glossary/Native
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-一个*原生*的应用程序在被编译后，可以在由指定结构组成的硬件/软件环境中运行
+*原生*的应用程序在被编译后，可以在由目标架构组成的硬件/软件环境中运行
原生安卓应用的一个例子：在安卓工具链的支持下使用 Java 编写的手机应用
@@ -13,4 +15,4 @@ slug: Glossary/Native
## 参见
-- 维基百科上的[原生（电脑）](<https://en.wikipedia.org/wiki/Native_(computing)>)
+- 维基百科上的[原生](<https://en.wikipedia.org/wiki/Native_(computing)>)
diff --git a/files/zh-cn/glossary/navigation_directive/index.md b/files/zh-cn/glossary/navigation_directive/index.md
index 97d7d170600ee3..389eee114945ef 100644
--- a/files/zh-cn/glossary/navigation_directive/index.md
+++ b/files/zh-cn/glossary/navigation_directive/index.md
@@ -1,25 +1,28 @@
---
-title: Navigation directive
+title: 导航指令
slug: Glossary/Navigation_directive
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**{{Glossary("CSP")}} 浏览指令（navigation directives**）出现于 {{HTTPHeader("Content-Security-Policy")}} 首部，支配着用户所能浏览的或者提交表单的资源位置。
+**{{Glossary("CSP")}} 导航指令**出现于 {{HTTPHeader("Content-Security-Policy")}} 标头，指示着用户所能浏览的或者提交表单的资源位置。
-浏览指令不将 {{CSP("default-src")}} 指令作为回退机制。
+导航指令不将 {{CSP("default-src")}} 指令作为回退机制。
-以下 CSP 指令属于浏览指令：
+详见[导航指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy#导航指令)以获得完整列表。
-- {{CSP("form-action")}}
-- {{CSP("frame-ancestors")}}
-- {{CSP("navigation-to")}}
+## 参见
-## 更多内容
-
-- {{HTTPHeader("Content-Security-Policy")}}
+- <https://www.w3.org/TR/CSP/#directives-navigation>
- 其他类型的指令：
- - {{Glossary("Fetch directive")}}
- - {{Glossary("Navigation directive")}}
- - {{Glossary("Reporting directive")}}
+ - {{Glossary("Fetch directive", "Fetch 指令")}}
+ - {{Glossary("Document directive", "文档指令")}}
+ - {{Glossary("Reporting directive", "报告指令")}}
+ - [`block-all-mixed-content`](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content)
+ - [`upgrade-insecure-requests`](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests)
+ - [`trusted-types`](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)
+
+- {{HTTPHeader("Content-Security-Policy")}}
diff --git a/files/zh-cn/glossary/netscape_navigator/index.md b/files/zh-cn/glossary/netscape_navigator/index.md
new file mode 100644
index 00000000000000..ce77414ca17354
--- /dev/null
+++ b/files/zh-cn/glossary/netscape_navigator/index.md
@@ -0,0 +1,16 @@
+---
+title: Netscape Navigator
+slug: Glossary/Netscape_Navigator
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+Netscape Navigator 或 Netscape 是 1990 年代领先的{{glossary("browser", "浏览器")}}。Netscape 基于 Mosaic，其团队由 Marc Andreessen 领导，他也是 Mosaic 的代码编写者之一。
+
+Netscape 帮助使 {{glossary("World Wide Web","Web")}} 变得图形化，而不仅仅是文本体验。许多浏览特性在 Netscape 引入后成为标准。Netscape 能够在加载时显示网页，使用 JavaScript 处理表单和互动内容，并在 cookie 中存储会话信息。尽管 Netscape 在技术上具有优势并在初期占据主导地位，但到 1990 年代末，{{glossary("Microsoft Internet Explorer", "Internet Explorer")}} 迅速在市场份额上超过了 Netscape。
+
+## 参见
+
+- 维基百科上的 [Netscape Navigator](https://zh.wikipedia.org/wiki/网景导航者)
diff --git a/files/zh-cn/glossary/network_throttling/index.md b/files/zh-cn/glossary/network_throttling/index.md
new file mode 100644
index 00000000000000..cac8d13afc0a66
--- /dev/null
+++ b/files/zh-cn/glossary/network_throttling/index.md
@@ -0,0 +1,18 @@
+---
+title: 网络限速
+slug: Glossary/Network_throttling
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**网络限速**是有意降低网速的行为。在 Web 性能中，网络限速或网络条件模拟用于模拟网站目标用户群体中很大一部分人可能遇到的低带宽条件。
+
+不要忽视用户在移动设备上体验的网络状况。开发人员在公司办公室的大功率电脑上创建 Web 应用程序时，网速通常非常快。作为开发人员、技术写作者或设计师，这可能是你的体验。而移动用户在访问该 Web 应用程序时，尤其是在旅行或处于网络覆盖差的偏远地区时，网速可能非常慢，甚至可能无法上网。网络限速使开发人员能够模拟用户的体验。大多数浏览器开发者工具，如浏览器检查器，都提供模拟不同网络条件的功能。通过网络限速模拟用户的体验，你可以更容易地识别和修复加载时间问题。
+
+浏览器开发者工具通常有网络限速选项，允许你在慢速网络条件下测试应用程序。例如，Firefox 的开发者工具在[网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)和[响应式设计模式](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html)中都有一个包含网络速度选项（如 Wi-Fi、良好的 3G、2G）的下拉菜单。
+
+## 参见
+
+- [模拟监控](/zh-CN/docs/Glossary/Synthetic_monitoring)
diff --git a/files/zh-cn/glossary/nntp/index.md b/files/zh-cn/glossary/nntp/index.md
new file mode 100644
index 00000000000000..bb3e1350bfd7d7
--- /dev/null
+++ b/files/zh-cn/glossary/nntp/index.md
@@ -0,0 +1,15 @@
+---
+title: NNTP
+slug: Glossary/NNTP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**NNTP**（网络新闻传输协议）是一个用于在客户端和服务器之间或在服务器之间传输 {{Glossary("Usenet")}} 消息的{{Glossary("protocol", "协议")}}。
+
+## 参见
+
+- 维基百科上的 [NNTP](https://zh.wikipedia.org/wiki/網路新聞傳輸協定)
+- IETF 上的 [RFC 3977 关于 NNTP](https://datatracker.ietf.org/doc/html/rfc3977)（2006）
diff --git a/files/zh-cn/glossary/node.js/index.md b/files/zh-cn/glossary/node.js/index.md
index 038ae35ff46901..fbc300801a99aa 100644
--- a/files/zh-cn/glossary/node.js/index.md
+++ b/files/zh-cn/glossary/node.js/index.md
@@ -1,15 +1,23 @@
---
title: Node.js
slug: Glossary/Node.js
+l10n:
+ sourceCommit: 70736395f85541545fc0b384f2d091e35cfeadae
---
{{GlossarySidebar}}
Node.js 是一个跨平台 {{Glossary("JavaScript")}} 运行环境，使开发者可以搭建服务器端的 JavaScript 应用程序。
+## Node 包管理器（npm）
+
+[npm](https://www.npmjs.com) 是一个与 Node.js 一并下载和捆绑的包管理器。其命令行（CLI）客户端 `npm` 可用于下载、配置和创建用于 Node.js 项目的包。下载的包可以通过 [ES import](/zh-CN/docs/Web/JavaScript/Reference/Statements/import) 和 [CommonJS `require()`](https://zh.wikipedia.org/wiki/CommonJS) 导入，而无需包含它们下载到的依赖目录 `node_modules/`，因为 Node.js 在导入中未指定相对或绝对路径时会[解析](https://nodejs.org/api/modules.html#loading-from-node_modules-folders)包。
+
+托管在 npm 上的包从注册表 [https://registry.npmjs.org/](https://registry.npmjs.org/) 下载，但 CLI 可以配置为使用任何兼容的实例。
+
## 参见
-- [Node.js 的维基](https://en.wikipedia.org/wiki/Node.js)
+- 维基百科上的 [Node.js](https://zh.wikipedia.org/wiki/Node.js)
- [Node.js 官网](https://nodejs.org/)
- [API 参考文档](https://nodejs.org/api/)
- [教程](https://nodejs.org/documentation/tutorials/)
diff --git a/files/zh-cn/glossary/node/dom/index.md b/files/zh-cn/glossary/node/dom/index.md
index a1787b2f148598..8f44bc8e5cbf79 100644
--- a/files/zh-cn/glossary/node/dom/index.md
+++ b/files/zh-cn/glossary/node/dom/index.md
@@ -1,13 +1,15 @@
---
title: 节点（DOM）
slug: Glossary/Node/DOM
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-在 {{Glossary("DOM")}} 的上下文中，节点（Node）是节点树中的单个点。包括文档本身、元素、文本以及注释都属于是节点。
+在 {{Glossary("DOM")}} 的上下文中，**节点**是节点树中的单个点。文档本身、元素、文本以及注释都是节点。
## 参见
-- WHATWG 规范 [node tree](https://dom.spec.whatwg.org/#concept-node)
+- WHATWG 规范中的[节点树](https://dom.spec.whatwg.org/#concept-node)
- [Node](/zh-CN/docs/Web/API/Node) 对象
diff --git a/files/zh-cn/glossary/normative/index.md b/files/zh-cn/glossary/normative/index.md
new file mode 100644
index 00000000000000..444e9e14a2c11e
--- /dev/null
+++ b/files/zh-cn/glossary/normative/index.md
@@ -0,0 +1,14 @@
+---
+title: 规范性
+slug: Glossary/Normative
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+规范性是软件{{Glossary("specification", "规范")}}中常用的词，用于表示标准化并必须遵守的部分。规范中也可能包含标记为[_非规范性_](/zh-CN/docs/Glossary/Non-normative)或*信息性*的部分，旨在帮助读者更好地理解规范，或展示示例或最佳实践，而并不需要作为规则遵循。
+
+## 参见
+
+- WHATWG wiki 中关于[规范性和信息性内容](https://wiki.whatwg.org/wiki/Specs/howto#Content)的描述
diff --git a/files/zh-cn/glossary/null/index.md b/files/zh-cn/glossary/null/index.md
index 9205a30b424a14..abf5e9129843cb 100644
--- a/files/zh-cn/glossary/null/index.md
+++ b/files/zh-cn/glossary/null/index.md
@@ -1,19 +1,27 @@
---
title: "Null"
slug: Glossary/Null
+l10n:
+ sourceCommit: 8a3cafa914478bb274d649a95325c4b2dacd07cc
---
{{GlossarySidebar}}
-在计算机学科，**`null`** 值一直是一个被讨论点，通常来说，表示一个不存在或者无效{{glossary("object")}}或者地址引用。语言实现中空引用的含义各不相同。
+在计算机科学中，**`null`** 值表示一个不存在或无效的{{glossary("object", "对象")}}或者地址引用（通常是有意为之）。空引用的含义因语言实现而异。
-在 {{Glossary("JavaScript")}}，null 是{{Glossary("Primitive", "原始值")}}之一
+在 {{Glossary("JavaScript")}}，`null` 是{{Glossary("Primitive", "原始值")}}之一，因其行为类似于一个原始值。但是，当你使用 [`typeof`](/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) 运算符时，会返回 `"object"`。
+
+```js
+console.log(typeof null); // "object"
+```
+
+这被认为是[一个 bug](/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof#typeof_null)，但是无法修复，因为这会破坏太多脚本。
## 参见
-- [JavaScript 数据类型和数据结构](/zh-CN/docs/Web/JavaScript/Data_structures)
-- JavaScript 全局对象：{{jsxref("null")}}
-- 维基百科[空指针](https://zh.wikipedia.org/wiki/空指针)
+- [JavaScript 数据类型](/zh-CN/docs/Web/JavaScript/Data_structures)
+- JavaScript 全局对象：[`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)
+- 维基百科上的[空指针](https://zh.wikipedia.org/wiki/空指针)
- **[MDN 术语表](/zh-CN/docs/Glossary)**
- {{Glossary("JavaScript")}}
@@ -23,4 +31,4 @@ slug: Glossary/Null
- {{Glossary("boolean")}}
- {{Glossary("null")}}
- {{Glossary("undefined")}}
- - {{jsxref("Symbol")}}
+ - {{Glossary("symbol")}}
diff --git a/files/zh-cn/glossary/number/index.md b/files/zh-cn/glossary/number/index.md
index bf13e3238ea5eb..d0cd24d1b37b73 100644
--- a/files/zh-cn/glossary/number/index.md
+++ b/files/zh-cn/glossary/number/index.md
@@ -1,18 +1,20 @@
---
title: Number
slug: Glossary/Number
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-在 {{Glossary("JavaScript")}} 中，**Number** 是一种 定义为 [64 位双精度浮点型（double-precision 64-bit floating point format） (IEEE 754)](https://en.wikipedia.org/wiki/Double_precision_floating-point_format)的数字数据类型。在其他编程语言中，有不同的数字类型存在，比如：整型（Integers），单精度浮点型（Floats），双精度浮点型（Doubles），大数（Bignums）。
+在 {{Glossary("JavaScript")}} 中，**Number** 是一种定义为 [64 位双精度浮点型（IEEE 754）](https://zh.wikipedia.org/wiki/雙精度浮點數)的数字数据类型。在其他编程语言中，也有不同的数字类型存在，比如：整型（Integer）、单精度浮点型（Float）、双精度浮点型（Double）、大数（Bignum）。
## 参见
- 维基百科上的[数字类型](https://zh.wikipedia.org/wiki/資料類型#數值範圍)
- JavaScript 类型：[`Number`](/zh-CN/docs/Web/JavaScript/Data_structures#number_类型)
- JavaScript 全局对象 {{jsxref("Number")}}
-- [MDN 术语表](/zh-CN/docs/Glossary)
+- [术语](/zh-CN/docs/Glossary)
- {{Glossary("JavaScript")}}
- {{Glossary("Primitive")}}
diff --git a/files/zh-cn/glossary/object/index.md b/files/zh-cn/glossary/object/index.md
index a0cbafa2c4a64e..8c154bad3d4db8 100644
--- a/files/zh-cn/glossary/object/index.md
+++ b/files/zh-cn/glossary/object/index.md
@@ -1,13 +1,19 @@
---
-title: Object
+title: 对象
slug: Glossary/Object
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-[对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object) 指包含数据和用于处理数据的指令的数据结构。对象有时也指现实世界中的一些事，例如在赛车游戏当中一辆车或者一幅地图都可以是一个对象。{{glossary("JavaScript")}}, Java, C++, Python, 还有 Ruby 这些例子都是{{glossary("OOP","面向对象的程序设计")}} 语言。
+在 JavaScript 中，对象可以看作是属性的集合。使用[对象字面量语法](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#对象字面量)，可以初始化一组有限的属性，然后可以添加和删除属性。属性值可以是任何类型的值，包括其他对象，这使得构建复杂的数据结构成为可能。属性通过*键*值来标识。*键*值可以是{{Glossary("String", "字符串值")}}或 [Symbol 值](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol)。
+
+对象属性有两种类型：[*数据*属性](/zh-CN/docs/Web/JavaScript/Data_structures#数据属性)和[*访问器*属性](/zh-CN/docs/Web/JavaScript/Data_structures#访问器属性)。
+
+> **备注：** 重要的是要认识到这是访问器*属性*，而不是访问器*方法*。我们可以通过将函数作为值来赋予 JavaScript 对象类*一样*的访问器，但这并不能让对象成为类。
## 参见
-- {{jsxref("Object")}} in the [JavaScript reference](/zh-CN/docs/Web/JavaScript/Reference)
-- [Object data structures in JavaScript](/zh-CN/docs/Web/JavaScript/Data_structures#object)
+- [JavaScript 数据类型和数据结构](/zh-CN/docs/Web/JavaScript/Data_structures)一文中对 [JavaScript 对象的详细解释](/zh-CN/docs/Web/JavaScript/Data_structures#object)
+- [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference)中的 {{jsxref("Object")}}
diff --git a/files/zh-cn/glossary/object_reference/index.md b/files/zh-cn/glossary/object_reference/index.md
new file mode 100644
index 00000000000000..6c69e95ec83101
--- /dev/null
+++ b/files/zh-cn/glossary/object_reference/index.md
@@ -0,0 +1,16 @@
+---
+title: 对象引用
+slug: Glossary/Object_reference
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+对象引用是指向[_对象_](/zh-CN/docs/Glossary/Object)的链接。对象引用可以像链接的对象一样使用。
+
+当将同一个对象赋值给多个[_属性_](/zh-CN/docs/Glossary/Property/JavaScript)时，对象引用的概念就会变得清晰。每个赋值的属性持有指向同一个对象的对象引用，而不是对象的副本，因此当对象发生变化时，所有引用该对象的属性都会反映该变化。
+
+## 参见
+
+- 维基百科上的[引用](https://zh.wikipedia.org/wiki/參照)
diff --git a/files/zh-cn/glossary/opengl/index.md b/files/zh-cn/glossary/opengl/index.md
index a7d58bf3afbb42..9a3ed26dd2982a 100644
--- a/files/zh-cn/glossary/opengl/index.md
+++ b/files/zh-cn/glossary/opengl/index.md
@@ -1,12 +1,15 @@
---
title: OpenGL
slug: Glossary/OpenGL
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**OpenGL (Open Graphics Library)**是一套用来渲染 2D 和 3D 矢量图形的跨语言的、跨平台的应用程序接口 (API) . 这种接口通常用来与图形处理单元 (GPU) 交互，来达到硬件加速渲染的目的**。**
+**OpenGL**（开放图形库）是一套用来渲染 2D 和 3D 矢量图形的跨语言的、跨平台的应用程序接口（API），通常用来与图形处理单元（GPU）交互，来达到硬件加速渲染的目的。
## 参见
-- [OpenGL](https://zh.wikipedia.org/wiki/OpenGL) on Wikipedia
+- 维基百科上的 [OpenGL](https://zh.wikipedia.org/wiki/OpenGL)
+- [OpenGL](https://www.opengl.org/)
diff --git a/files/zh-cn/glossary/openssl/index.md b/files/zh-cn/glossary/openssl/index.md
new file mode 100644
index 00000000000000..35a2505d0459c8
--- /dev/null
+++ b/files/zh-cn/glossary/openssl/index.md
@@ -0,0 +1,15 @@
+---
+title: OpenSSL
+slug: Glossary/OpenSSL
+l10n:
+ sourceCommit: 83f30ecaaeb6227dc0d4551f71eb8be1cacb8e94
+---
+
+{{GlossarySidebar}}
+
+OpenSSL 是开源的 {{glossary("TLS")}}、{{glossary("SSL")}} 实现。
+
+## 参见
+
+- 维基百科上的 [OpenSSL](https://zh.wikipedia.org/wiki/OpenSSL)
+- [官网](https://www.openssl.org/)
diff --git a/files/zh-cn/glossary/opera_browser/index.md b/files/zh-cn/glossary/opera_browser/index.md
new file mode 100644
index 00000000000000..6da83531d7c5f0
--- /dev/null
+++ b/files/zh-cn/glossary/opera_browser/index.md
@@ -0,0 +1,15 @@
+---
+title: Opera 浏览器
+slug: Glossary/Opera_Browser
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**Opera** 是第五大常用的 web {{glossary("browser", "浏览器")}}，于 1996 年公开发布，最初仅在 Windows 上运行。自 2013 年以来，Opera 使用 {{glossary("Blink")}} 作为其布局引擎（在此之前是 {{glossary("Presto")}}）。Opera 还有移动和平板电脑版本。
+
+## 参见
+
+- 维基百科上的 [Opera 浏览器](<https://zh.wikipedia.org/wiki/Opera_(瀏覽器)>)
+- [Opera 浏览器官网](https://www.opera.com/)
diff --git a/files/zh-cn/glossary/operand/index.md b/files/zh-cn/glossary/operand/index.md
new file mode 100644
index 00000000000000..47e7304941699a
--- /dev/null
+++ b/files/zh-cn/glossary/operand/index.md
@@ -0,0 +1,14 @@
+---
+title: 操作数
+slug: Glossary/Operand
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**操作数**是指令的一部分，表示由{{glossary("operator", "运算符")}}操作的数据。例如，当你将两个数字相加时，这两个数字就是操作数，而“+”是运算符。
+
+## 参见
+
+- 维基百科上的[操作数](https://zh.wikipedia.org/wiki/運算數)
diff --git a/files/zh-cn/glossary/operator/index.md b/files/zh-cn/glossary/operator/index.md
index 5b9a3df07b4610..ad531ff4693382 100644
--- a/files/zh-cn/glossary/operator/index.md
+++ b/files/zh-cn/glossary/operator/index.md
@@ -1,13 +1,15 @@
---
title: 运算符
slug: Glossary/Operator
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-由标点符号或字母数字字符组成的保留**语法**，执行内置功能。例如，JavaScript 的加法运算符（“+”）可以将数字相加或者将字符串连接起来，而“非”运算符（“!”）可以对表达式取反，例如将 `true` 语句返回 `false`。
+运算符是由标点符号或字母数字字符组成的保留**语法**，用于执行内置功能。例如，JavaScript 的加法运算符（“+”）可以将数字相加或者将字符串连接起来，而“非”运算符（“!”）可以对表达式取反，例如将 `true` 语句返回 `false`。
## 参见
-- 维基百科上的[运算符](<https://zh.wikipedia.org/zh-cn/算子_(編程)>)词条
+- 维基百科上的[运算符](<https://zh.wikipedia.org/zh-cn/算子_(編程)>)
- [JavaScript 运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators)
diff --git a/files/zh-cn/glossary/origin/index.md b/files/zh-cn/glossary/origin/index.md
index c30a5ddf1199ac..538f1697ca7618 100644
--- a/files/zh-cn/glossary/origin/index.md
+++ b/files/zh-cn/glossary/origin/index.md
@@ -1,6 +1,8 @@
---
title: 源（Origin）
slug: Glossary/Origin
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
@@ -11,7 +13,7 @@ Web 内容的**源**由用于访问它的 {{Glossary("URL")}} 的*方案*（协
## 示例
-由于它们具有相同的协议（`http`）和主机名（`example.com`），以下两个地址是同源的。注意不同文件路径与是否同源无关：
+由于它们具有相同的协议（`http`）和主机名（`example.com`），以下两个地址是同源的。注意不同的文件路径与是否同源无关：
- `http://example.com/app1/index.html`
- `http://example.com/app2/index.html`
@@ -40,5 +42,5 @@ Web 内容的**源**由用于访问它的 {{Glossary("URL")}} 的*方案*（协
## 参见
- [同源策略](/zh-CN/docs/Web/Security/Same-origin_policy)。
-- {{Glossary("Site")}}
+- {{Glossary("Site", "站点")}}
- [HTML 规范：源](https://html.spec.whatwg.org/multipage/origin.html#origin)
diff --git a/files/zh-cn/glossary/ota/index.md b/files/zh-cn/glossary/ota/index.md
new file mode 100644
index 00000000000000..f721eb9b2931c8
--- /dev/null
+++ b/files/zh-cn/glossary/ota/index.md
@@ -0,0 +1,14 @@
+---
+title: OTA
+slug: Glossary/OTA
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+_空中下载_（也被称为空中编程，**OTA**）指的是从中央服务器自动更新连接设备上的软件。接收给定更新集的所有设备所有者都在同一个“通道”上，每个设备通常可以访问多个通道（例如生产或工程构建）。
+
+## 参见
+
+- 维基百科上的[空中编程](https://zh.wikipedia.org/wiki/空中编程)
diff --git a/files/zh-cn/glossary/owasp/index.md b/files/zh-cn/glossary/owasp/index.md
new file mode 100644
index 00000000000000..0ba7df1db6f0d4
--- /dev/null
+++ b/files/zh-cn/glossary/owasp/index.md
@@ -0,0 +1,14 @@
+---
+title: OWASP
+slug: Glossary/OWASP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**OWASP**（开放 Web 应用安全项目）是一个非营利组织和全球网络，致力于自由软件（尤其是 Web 上的软件）安全事业。
+
+## 参见
+
+- [官方网站](https://owasp.org/)
diff --git a/files/zh-cn/glossary/p2p/index.md b/files/zh-cn/glossary/p2p/index.md
new file mode 100644
index 00000000000000..217538fed03387
--- /dev/null
+++ b/files/zh-cn/glossary/p2p/index.md
@@ -0,0 +1,14 @@
+---
+title: P2P
+slug: Glossary/P2P
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+P2P（点对点网络）是一种所有参与的节点（对等点）都具有平等的权限并共享工作负载的计算机网络架构。P2P 不同于客户端—服务器网络架构，在后者中，多个*客户端*节点连接到集中的*服务器*以获取服务。P2P 在区块链应用中非常常见。
+
+## 参见
+
+- 维基百科上的[点对点网络](https://zh.wikipedia.org/wiki/對等網路)
diff --git a/files/zh-cn/glossary/pac/index.md b/files/zh-cn/glossary/pac/index.md
new file mode 100644
index 00000000000000..e7ab190c40cef5
--- /dev/null
+++ b/files/zh-cn/glossary/pac/index.md
@@ -0,0 +1,25 @@
+---
+title: PAC
+slug: Glossary/PAC
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+代理自动配置文件（**PAC 文件**）是一个包含 `FindProxyForURL()` 函数的文件，浏览器使用该函数来确定请求（包括 HTTP、HTTPS 和 FTP）是直接到达目的地还是需要通过 web 代理服务器转发。
+
+```js
+function FindProxyForURL(url, host) {
+ // …
+}
+
+ret = FindProxyForURL(url, host);
+```
+
+请参阅[代理自动配置（PAC）文件](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file)，了解这些文件的使用方法以及如何创建新的 PAC 文件。
+
+## 参见
+
+- 维基百科上的[代理自动配置](https://zh.wikipedia.org/wiki/代理自动配置)
+- MDN 上的[代理自动配置文件](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file)
diff --git a/files/zh-cn/glossary/packet/index.md b/files/zh-cn/glossary/packet/index.md
new file mode 100644
index 00000000000000..e81c7729b1fa22
--- /dev/null
+++ b/files/zh-cn/glossary/packet/index.md
@@ -0,0 +1,42 @@
+---
+title: 数据包
+slug: Glossary/Packet
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+数据包（网络数据包），是通过网络发送的格式化数据块。网络数据包的主要组成部分是用户数据和控制信息。用户数据称为*有效载荷*。控制信息是传送有效载荷所需的信息。它包括源地址和目的地址、序列信息和错误检测码，通常位于数据包的头部和尾部。
+
+## 数据包包含的内容
+
+### 跳数限制
+
+当数据包从一个网络传递到下一个网络时称为一次跳跃。每经过一次，跳数字段就会减少一个；当跳数限制达到 0 时，发送操作失败，数据包被丢弃。
+
+随着时间的推移，数据包在封闭电路内穿梭的次数会增多，导致网络中的数据包积累，最终导致网络失败。
+
+### 错误检测和纠正
+
+错误检测和纠正是用于检测并纠正数据传输到接收方时发生的错误的代码。错误纠正有两种类型：后向纠错和前向纠错。后向纠错是指接收方请求发送方重新传输整个数据单元。前向纠错是指接收方使用错误纠正码自动纠正错误。
+
+在发送端，计算在数据包发送前进行。在接收到目的地时，重新计算校验和，并与数据包中的校验和进行比较。
+
+### 优先级
+
+该字段表示哪个数据包应具有比其他数据包更高的优先级。当网络拥塞时，高优先级队列比低优先级队列更快清空。
+
+### 地址
+
+路由网络数据包时需要两个网络地址：发送主机的源地址和接收主机的目的地址。
+
+### 用户数据 - 有效载荷
+
+有效载荷是代表应用程序携带的数据。它通常是可变长度的，最大长度由网络协议和路由设备决定。
+
+## 参见
+
+- [网络数据包](https://zh.wikipedia.org/wiki/網路封包)
+- [跳跃（网络）](<https://en.wikipedia.org/wiki/Hop_(networking)>)
+- [错误检测和纠正工作原理](https://www.techradar.com/news/computing/how-error-detection-and-correction-works-1080736)
diff --git a/files/zh-cn/glossary/page_load_time/index.md b/files/zh-cn/glossary/page_load_time/index.md
new file mode 100644
index 00000000000000..3e7160c75765c5
--- /dev/null
+++ b/files/zh-cn/glossary/page_load_time/index.md
@@ -0,0 +1,24 @@
+---
+title: 页面加载时间
+slug: Glossary/Page_load_time
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**页面加载时间**是指从[导航开始](/zh-CN/docs/Web/API/PerformanceTiming/navigationStart)到[加载事件开始](/zh-CN/docs/Web/API/PerformanceTiming/loadEventStart)的时间。
+
+```js
+let time = performance.timing;
+
+let pageloadtime = time.loadEventStart - time.navigationStart;
+```
+
+虽然页面加载时间看起来像是一个完美的网页性能指标，但事实并非如此。加载时间会因用户的设备能力、网络状况以及与服务器的距离不同而有很大差异。开发环境中测量的加载时间往往是理想的，并不能反映用户的实际情况。此外，网页性能不仅仅是加载事件发生的时间，还包括[感知性能](/zh-CN/docs/Glossary/Perceived_performance)、响应速度、[卡顿](/zh-CN/docs/Glossary/Jank)和抖动。
+
+## 参见
+
+- [导航与资源计时](/zh-CN/docs/Web/Performance/Navigation_and_resource_timings)
+- {{domxref("PerformanceNavigationTiming")}}
+- {{domxref("PerformanceResourceTiming")}}
diff --git a/files/zh-cn/glossary/page_prediction/index.md b/files/zh-cn/glossary/page_prediction/index.md
new file mode 100644
index 00000000000000..76d6622afc3374
--- /dev/null
+++ b/files/zh-cn/glossary/page_prediction/index.md
@@ -0,0 +1,19 @@
+---
+title: 页面预测
+slug: Glossary/Page_prediction
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**页面预测**是一种浏览器功能或是一段脚本，在启用时会告诉浏览器在用户请求内容之前下载用户可能访问的资源，让预测内容几乎瞬间加载，从而提高性能。然而，页面预测也可能会下载用户并不需要的内容。
+
+一些 Web 应用程序就包括了预测功能，根据浏览历史和相关搜索自动完成搜索文本和地址栏 URL。例如，当用户在地址栏输入内容时，浏览器可能会在用户提交请求之前将地址栏中的当前文本发送给搜索引擎。
+
+尽管浏览器页面预测和预测服务可以加快页面加载速度，但它们会消耗额外的带宽。此外，预加载的网站和嵌入的内容即使没有被访问也可以设置和读取它们的 cookie。
+
+## 参见
+
+- [预渲染](/zh-CN/docs/Glossary/Prerender)
+- [预取](/zh-CN/docs/Glossary/Prefetch)
diff --git a/files/zh-cn/glossary/parse/index.md b/files/zh-cn/glossary/parse/index.md
index 3453afa1c2bcc0..db5cbf9bcdb250 100644
--- a/files/zh-cn/glossary/parse/index.md
+++ b/files/zh-cn/glossary/parse/index.md
@@ -1,20 +1,22 @@
---
-title: Parse
+title: 解析
slug: Glossary/Parse
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the {{glossary("JavaScript")}} engine inside browsers.
+解析就是将程序解析以及转换成能够在运行环境中运行的计算机内部格式，比如浏览器中的 {{glossary("JavaScript")}} 引擎。
-Parsing 就是将程序解析以及转换成能够在运行环境中运行的计算机内部格式，浏览器中的{{glossary("JavaScript")}} 驱动就是一个很好的解析例子。
+[浏览器会将 HTML 解析](/zh-CN/docs/Learn/HTML)为 {{glossary('DOM')}} 树。HTML 解析包括标记化和树结构构建。HTML 标记包括开始和结束标签，以及属性名和属性值。如果文档格式良好，解析过程就会简单且快速。解析器将标记化的输入语法解析为文档，构建文档树。
-In JavaScript, this is done during {{glossary("compile time")}} or whenever the {{glossary("parser")}} is invoked, such as during a call to a method.
+当 HTML 解析器发现非阻塞资源（如图片）时，浏览器会请求这些资源并继续解析。当遇到 CSS 文件时，解析可以继续进行，但 `<script>` 标签——尤其是那些没有 [`async`](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function) 或 `defer` 属性的标签——会阻塞渲染并暂停 HTML 解析。
-JavaScript 中的解析过程一般在{{glossary("compile time")}}中完成，或者是在任意{{glossary("parser")}} 参与的时候完成。比如说在调用一个 JS 方法的过程中完成 parsing。
+当浏览器遇到 CSS 样式时，它将文本解析为 CSS 对象模型（{{glossary('CSSOM')}}），一个用于样式布局和绘制的数据结构。浏览器随后会根据这两个结构创建一个渲染树，以便将内容绘制到屏幕上。JavaScript 也会被下载、解析并执行。
-## Learn more
+JavaScript 的解析过程一般在{{glossary("compile time", "编译时")}}中完成，或者是在任意{{glossary("parser", "解析器")}}参与的时候完成。比如说在调用一个方法的过程中完成解析。
-### General knowledge
+## 参见
-- [Parse](https://en.wikipedia.org/wiki/Parsing) on Wikipedia
+- 维基百科上的[解析](https://zh.wikipedia.org/wiki/解析)
diff --git a/files/zh-cn/glossary/parser/index.md b/files/zh-cn/glossary/parser/index.md
new file mode 100644
index 00000000000000..7c8f2ecfe2927d
--- /dev/null
+++ b/files/zh-cn/glossary/parser/index.md
@@ -0,0 +1,16 @@
+---
+title: 解析器
+slug: Glossary/Parser
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**解析器**（语法分析器）是编译器或解释器中{{glossary("parse", "解析")}}源代码文件的模块。
+
+更一般地说，它是一种解析文本并将其内容转换为另一种表示形式的软件。
+
+## 参见
+
+- 维基百科上的[语法分析器](https://zh.wikipedia.org/wiki/语法分析)
diff --git a/files/zh-cn/glossary/payload_body/index.md b/files/zh-cn/glossary/payload_body/index.md
new file mode 100644
index 00000000000000..485e4cbe845a73
--- /dev/null
+++ b/files/zh-cn/glossary/payload_body/index.md
@@ -0,0 +1,38 @@
+---
+title: 有效负载体
+slug: Glossary/Payload_body
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+HTTP 消息的**有效负载体**是在应用{{HTTPHeader("Transfer-Encoding", "传输编码", "", 1)}}之前，包含在 HTTP 消息体中的*信息*（“有效负载”）部分（如果有存在的话）。如果未使用传输编码，则*有效负载体*和*消息体*就是等价的。
+
+例如，以下响应中的消息体仅包含有效负载体：“Mozilla Developer Network”：
+
+```http
+HTTP/1.1 200 OK
+Content-Type: text/plain
+
+Mozilla Developer Network
+```
+
+相比之下，下面的响应使用*传输编码*将有效负载体编码为块。发送的有效负载体（信息）仍然是“Mozilla Developer Network”，但消息体包含了用于分隔这些块的额外数据：
+
+```http
+HTTP/1.1 200 OK
+Content-Type: text/plain
+Transfer-Encoding: chunked
+
+7\r\n
+Mozilla\r\n
+9\r\n
+Developer\r\n
+7\r\n
+Network\r\n
+0\r\n
+\r\n
+```
+
+更多信息，参见 [RFC 7230，3.3 节：消息体](https://datatracker.ietf.org/doc/html/rfc7230#section-3.3)、[RFC 7230，3.3.1 节：传输编码](https://datatracker.ietf.org/doc/html/rfc7230#section-3.3.1)。
diff --git a/files/zh-cn/glossary/payload_header/index.md b/files/zh-cn/glossary/payload_header/index.md
index a4cffc785a55c4..ddf05d45446aaf 100644
--- a/files/zh-cn/glossary/payload_header/index.md
+++ b/files/zh-cn/glossary/payload_header/index.md
@@ -1,19 +1,21 @@
---
-title: 有效负荷标头（Payload header）
+title: 有效负载标头
slug: Glossary/Payload_header
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**有效负荷标头**（payload header）是一种 {{Glossary("HTTP_header", "HTTP 标头")}}，其从一个或多个消息中描述与安全传输和原始资源{{Glossary("Representation header", "表示形式（representation）")}}重建的相关的有效负荷信息。这包括了像消息有效负荷的长度、此有效负荷中承载了资源的哪部分（对于多部分的消息）、应用于传输的任意的编码、消息完整性检查等等。
+**有效负载标头**是一种 {{Glossary("HTTP_header", "HTTP 标头")}}，从一个或多个消息中描述与安全传输和原始资源{{Glossary("Representation header", "表示")}}重建的相关的有效负载信息。这包括了如消息有效负载的长度、（对于多部分的消息而言）此有效负载中承载了资源的哪部分、应用于传输的任意的编码、消息完整性检查等。
-有效负荷标头可能存在于 HTTP 请求和响应消息中（即在任何携带有效载荷数据的消息中）。
+有效负载标头可能存在于 HTTP 请求和响应消息中（即在任何携带有效载荷数据的消息中）。
-有效负荷标头包括：{{HTTPHeader("Content-Length")}}、{{HTTPHeader("Content-Range")}}、{{HTTPHeader("Trailer")}} 和 {{HTTPHeader("Transfer-Encoding")}}。
+有效负载标头包括：{{HTTPHeader("Content-Length")}}、{{HTTPHeader("Content-Range")}}、{{HTTPHeader("Trailer")}} 和 {{HTTPHeader("Transfer-Encoding")}}。
## 参见
-- [所有 HTTP 标头列表](/zh-CN/docs/Web/HTTP/Headers)
+- [所有 HTTP 标头的列表](/zh-CN/docs/Web/HTTP/Headers)
- {{HTTPHeader("Content-Length")}}
- {{HTTPHeader("Content-Range")}}
@@ -21,4 +23,4 @@ slug: Glossary/Payload_header
- {{HTTPHeader("Transfer-Encoding")}}
- {{Glossary("Representation header", "表示标头")}}
-- [RFC 7231, section 3.3: Payload semantics](https://datatracker.ietf.org/doc/html/rfc7231#section-3.3)
+- [RFC 7231，3.3 节：负载语义](https://datatracker.ietf.org/doc/html/rfc7231#section-3.3)
diff --git a/files/zh-cn/glossary/pdf/index.md b/files/zh-cn/glossary/pdf/index.md
index 21edf5fc06a828..e425e442bb8a0d 100644
--- a/files/zh-cn/glossary/pdf/index.md
+++ b/files/zh-cn/glossary/pdf/index.md
@@ -1,12 +1,14 @@
---
title: PDF
slug: Glossary/PDF
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**PDF**（可移植文档格式）是一种能够用来在任何特定软、硬件平台或操作系统上分享文档的文件格式。PDF 提供打印文档的数字图像，并能在打印时保持相同的外观。
+**PDF**（可移植文档格式）是一种不依赖于任何特定的软件实现、硬件平台或操作系统，用于共享文档的文件格式。PDF 提供了打印文档的数字图像，并在打印时保持相同的外观。
## 参见
-- 维基百科：[PDF](https://zh.wikipedia.org/wiki/Portable_Document_Format)
+- 维基百科上的 [PDF](https://zh.wikipedia.org/wiki/可移植文档格式)
diff --git a/files/zh-cn/glossary/perceived_performance/index.md b/files/zh-cn/glossary/perceived_performance/index.md
new file mode 100644
index 00000000000000..07c2def330195d
--- /dev/null
+++ b/files/zh-cn/glossary/perceived_performance/index.md
@@ -0,0 +1,14 @@
+---
+title: 感知性能
+slug: Glossary/Perceived_performance
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**感知性能**是衡量用户对网站在速度、响应性和可靠性上的*感觉*的一种指标。网站的运行状况对用户体验的影响可能比实际的加载和响应时间更大。
+
+## 参见
+
+- [感知性能](/zh-CN/docs/Learn/Performance/Perceived_performance)
diff --git a/files/zh-cn/glossary/percent-encoding/index.md b/files/zh-cn/glossary/percent-encoding/index.md
index ea7ba08f9e6fed..1c035b1b47ba54 100644
--- a/files/zh-cn/glossary/percent-encoding/index.md
+++ b/files/zh-cn/glossary/percent-encoding/index.md
@@ -1,22 +1,43 @@
---
-title: Percent-encoding
+title: 百分号编码
slug: Glossary/Percent-encoding
+l10n:
+ sourceCommit: 6c7cb932f7a0735ec2ac64732c9a947510fd1303
---
{{GlossarySidebar}}
-**百分比编码** 是一种拥有 8 位字符编码的编码机制，这些编码在{{Glossary("URL")}}的上下文中具有特定的含义。它有时被称为 URL 编码。编码由英文字母替换组成：“%”后跟替换字符的 ASCII 的十六进制表示。
+**百分号编码**（有时也被称为 URL 编码）是一种拥有 8 位字符编码的编码机制，其中的编码在 {{Glossary("URL")}} 的上下文中具有特定的含义。编码由英文字母替换组成：“%”后跟替换字符的 ASCII 的十六进制表示。
-需要编码的特殊字符有： `':'`，`'/'`，`'?'`，`'#'`，`'['`，`']'`，`'@'`，`'!'`，`'$'`，`'&'`，`"'"`，`'('`，`')'`，`'*'`，`'+'`，`','`，`';'`，`'='`，以及，`'%'` 本身。其他的字符虽然可以进行编码但是不需要。
+需要编码的特殊字符有：`':'`、`'/'`、`'?'`、`'#'`、`'['`，`']'`、`'@'`、`'!'`、`'$'`、`'&'`、`"'"`、`'('`、`')'`、`'*'`、`'+'`、`','`、`';'`、`'='`，以及 `'%'` 本身。其他的字符虽然可以进行编码但是并不需要。
-| 字符 | 编码 | | | | | | | | | | | | | | | | | | |
-| ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ------------ |
-| `':'` | `'/'` | `'?'` | `'#'` | `'['` | `']'` | `'@'` | `'!'` | `'$'` | `'&'` | `"'"` | `'('` | `')'` | `'*'` | `'+'` | `','` | `';'` | `'='` | `'%'` | `' '` |
-| `%3A` | `%2F` | `%3F` | `%23` | `%5B` | `%5D` | `%40` | `%21` | `%24` | `%26` | `%27` | `%28` | `%29` | `%2A` | `%2B` | `%2C` | `%3B` | `%3D` | `%25` | `%20` 或 `+` |
+| 字符 | 编码 |
+| ----- | ------------ |
+| `':'` | `%3A` |
+| `'/'` | `%2F` |
+| `'?'` | `%3F` |
+| `'#'` | `%23` |
+| `'['` | `%5B` |
+| `']'` | `%5D` |
+| `'@'` | `%40` |
+| `'!'` | `%21` |
+| `'$'` | `%24` |
+| `'&'` | `%26` |
+| `"'"` | `%27` |
+| `'('` | `%28` |
+| `')'` | `%29` |
+| `'*'` | `%2A` |
+| `'+'` | `%2B` |
+| `','` | `%2C` |
+| `';'` | `%3B` |
+| `'='` | `%3D` |
+| `'%'` | `%25` |
+| `' '` | `%20` 或 `+` |
-根据上下文，空白符 `' '` 将会转换为 `'+'` （必须在 HTTP 的 POST 方法中使定义 `application/x-www-form-urlencoded` 传输方式），或者将会转换为 `'%20'` 的 URL。
+根据上下文，空白符 `' '` 将会转换为 `'+'` （如使用百分号编码的 `application/x-www-form-urlencoded` 消息），或者将会转换为 `'%20'`（如 URL 中）。
## 参见
-- 维基百科中 [percent-encoding](https://en.wikipedia.org/wiki/Percent-encoding) 的相关定义。
-- {{RFC(3986)}}, 第 2.1 节，其中定义了这种编码方式。
+- 维基百科中[百分号编码](https://zh.wikipedia.org/wiki/百分号编码)的相关定义。
+- {{RFC(3986)}} 第 2.1 节，其中定义了这种编码方式。
+- [`encodeURI()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)、[`encodeURIComponent()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)——用于百分号编码 URL 的函数
diff --git a/files/zh-cn/glossary/php/index.md b/files/zh-cn/glossary/php/index.md
index 8ca8129c9c82f6..37c5ffd6b7a794 100644
--- a/files/zh-cn/glossary/php/index.md
+++ b/files/zh-cn/glossary/php/index.md
@@ -1,11 +1,13 @@
---
title: PHP
slug: Glossary/PHP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-PHP（PHP: Hypertext Preprocessor 的递归缩写）是一个开源服务器端脚本语言，可嵌入在 HTML 中，以构建网络应用程序和动态网站。
+PHP（PHP：Hypertext Preprocessor 的递归缩写）是一个开源服务器端脚本语言，可被嵌入在 HTML 中，用以构建网络应用程序和动态网站。
## 示例
diff --git a/files/zh-cn/glossary/pixel/index.md b/files/zh-cn/glossary/pixel/index.md
new file mode 100644
index 00000000000000..e69f428b1686cf
--- /dev/null
+++ b/files/zh-cn/glossary/pixel/index.md
@@ -0,0 +1,16 @@
+---
+title: 像素
+slug: Glossary/Pixel
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+像素是图形显示（如计算机屏幕）的最小构建块。
+
+显示分辨率用像素单位表示。例如，“800 x 600”像素分辨率意味着横向可以显示 800 个像素，纵向可以显示 600 个像素。
+
+## 参见
+
+- 维基百科上的[像素](https://zh.wikipedia.org/wiki/像素)
diff --git a/files/zh-cn/glossary/placeholder_names/index.md b/files/zh-cn/glossary/placeholder_names/index.md
new file mode 100644
index 00000000000000..ef22f11d2cbc39
--- /dev/null
+++ b/files/zh-cn/glossary/placeholder_names/index.md
@@ -0,0 +1,16 @@
+---
+title: 占位符名称
+slug: Glossary/Placeholder_names
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+占位符名称在密码学中常用来指代对话的参与者，而不使用诸如“甲方”、“窃听者”和“恶意攻击者”等术语。
+
+最常用的名称有：
+
+- _Alice_ 和 _Bob_，两个想要互相发送消息的参与者，偶尔会有第三人 _Carol_ 加入。
+- _Eve_，一个被动攻击者，窃听 Alice 和 Bob 的对话。
+- _Mallory_，一个主动攻击者（“中间人”），能够修改他们的对话并重放旧消息。
diff --git a/files/zh-cn/glossary/plaintext/index.md b/files/zh-cn/glossary/plaintext/index.md
index 552c2cd244e6dc..ecf88fd9d58a9f 100644
--- a/files/zh-cn/glossary/plaintext/index.md
+++ b/files/zh-cn/glossary/plaintext/index.md
@@ -1,10 +1,12 @@
---
title: 明文
slug: Glossary/Plaintext
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-明文指的是作为{{Glossary("encryption", "加密")}}{{Glossary("algorithm","算法")}}输入的信息，或者是解密后的{{Glossary("ciphertext", "密文")}}。
+明文（plaintext）指的是作为{{Glossary("encryption", "加密")}}{{Glossary("algorithm","算法")}}输入的信息，或者是解密后的{{Glossary("ciphertext", "密文")}}。
-通常与指代任何信息（例如文本文档、图像等）的 _cleartext_ 一词交互使用，此时信息还没有被加密，可不附加任何处理地供人类和计算机阅读。
+通常与指代任何信息（如文本文档、图像等，且信息还没有被加密，可不附加任何处理地供人类和计算机阅读）的*明文*（cleartext）一词交替使用。
diff --git a/files/zh-cn/glossary/plugin/index.md b/files/zh-cn/glossary/plugin/index.md
new file mode 100644
index 00000000000000..ab70a05f48e7dc
--- /dev/null
+++ b/files/zh-cn/glossary/plugin/index.md
@@ -0,0 +1,22 @@
+---
+title: 插件
+slug: Glossary/Plugin
+l10n:
+ sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
+---
+
+{{GlossarySidebar}}
+
+浏览器插件是一种软件组件，用户可以安装它来处理浏览器无法原生支持的内容。浏览器插件通常使用 [NPAPI](https://en.wikipedia.org/wiki/NPAPI)（Netscape 插件应用程序编程接口）架构编写。
+
+最著名且使用最广泛的插件是现已过时的 Adobe Flash 播放器，它使浏览器能够运行 {{Glossary("Adobe Flash")}} 内容。
+
+随着浏览器变得越来越强大，插件变得越来越不实用。插件还因引起安全和性能问题而历史悠久。
+
+在 2016 年至 2021 年间，浏览器厂商制定了一个插件（特别是 Adobe Flash）的弃用路线图，现在任何主流浏览器都不再支持插件。
+
+插件不应与浏览器扩展混淆，后者与插件不同，是以源代码而非二进制文件形式分发，并且仍受浏览器支持（尤其是使用 {{Glossary("WebExtensions")}} 系统的浏览器）。
+
+## 参见
+
+- [Adobe Flash 生命周期结束公告](https://helpx.adobe.com/cn/enterprise/kb/eol-adobe-flash-shockwave-player.html)
diff --git a/files/zh-cn/glossary/polyfill/index.md b/files/zh-cn/glossary/polyfill/index.md
index 06a5959139dab1..67702232ffdf38 100644
--- a/files/zh-cn/glossary/polyfill/index.md
+++ b/files/zh-cn/glossary/polyfill/index.md
@@ -1,14 +1,20 @@
---
title: Polyfill
slug: Glossary/Polyfill
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
-比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能，或模拟 CSS 实现 rem 单位的支持，或 {{cssxref("text-shadow")}}，或其他任何你想要的功能。
+例如，Polyfill 可以用于在 IE7 中使用专门的 IE 滤镜模拟 `text-shadow` 的功能，或者使用 JavaScript 动态调整样式以模拟 rem 单位或媒体查询，或者其他任何你需要的功能。
+
+Polyfill 不是唯一的选择的原因是为了更好的功能性和性能。API 的原生实现可以做更多事情，而且比 Polyfill 更快。例如，[Object.create Polyfill](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create#参见) 只包含了在非原生 Object.create 实现中可能的功能。
+
+有时，Polyfill 用于解决浏览器以不同方式实现相同功能的问题。Polyfill 使用某个浏览器中的非标准特性，以便 JavaScript 以符合标准的方式访问该特性。尽管这种 Polyfill 的原因在今天已经很少见，但在 IE6 和 Netscape 时代，这种情况特别普遍，因为每个浏览器都以非常不同的方式实现 JavaScript。[jQuery 的第一个版本](https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js)就是 Polyfill 的一个早期示例。它本质上是一个编译了针对特定浏览器的解决方案的集合，为 JavaScript 开发人员提供了一个在所有浏览器中都能工作的单一公共 API。当时，JavaScript 开发人员在尝试让他们的网站在所有设备上运行时遇到了很大的问题，因为各个浏览器之间存在很大的差异，网站可能必须根据用户的浏览器进行根本性的不同编程，并且具有完全不同的用户界面。因此，JavaScript 开发人员只能访问一小部分在所有浏览器中基本一致工作的 JavaScript API。使用 Polyfill 处理特定于浏览器的实现在今天变得不太常见，因为现代浏览器大多根据标准语义实现了广泛的 API 集。
## 参见
-- [什么是 polyfill？](https://remysharp.com/2010/10/08/what-is-a-polyfill) （Remy Sharp 著，概念发明者）
+- [什么是 polyfill？](https://remysharp.com/2010/10/08/what-is-a-polyfill)（概念的提出者，Remy Sharp 著）
diff --git a/files/zh-cn/glossary/polymorphism/index.md b/files/zh-cn/glossary/polymorphism/index.md
new file mode 100644
index 00000000000000..45bc1ff8f25494
--- /dev/null
+++ b/files/zh-cn/glossary/polymorphism/index.md
@@ -0,0 +1,18 @@
+---
+title: 多态
+slug: Glossary/Polymorphism
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+多态是为多种数据类型提供统一接口的表现。
+
+例如，整数、浮点数和双精度浮点数都是隐式多态的：无论它们的类型如何不同，它们都可以进行加法、减法、乘法等运算。
+
+在{{glossary("OOP", "面向对象编程")}}中，通过让{{glossary("class", "类")}}负责其代码和数据可以实现多态，因为每个类都有自己的{{glossary("function", "函数")}}，在调用时会针对任何{{glossary("object", "对象")}}表现出正确的行为。
+
+## 参见
+
+- 维基百科上的[多态](<https://zh.wikipedia.org/wiki/多态_(计算机科学)>)
diff --git a/files/zh-cn/glossary/pop/index.md b/files/zh-cn/glossary/pop/index.md
new file mode 100644
index 00000000000000..48acb673dd1615
--- /dev/null
+++ b/files/zh-cn/glossary/pop/index.md
@@ -0,0 +1,22 @@
+---
+title: POP3
+slug: Glossary/POP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**POP3**（邮局协议）是一种极为常见的通过 {{glossary("TCP")}} 连接从邮件服务器获取邮件的{{glossary("protocol", "协议")}}。与 {{Glossary("IMAP")}} 不同，POP3 不支持文件夹，因其结构过于复杂而难以实现。
+
+客户端通常会检索所有消息并将其从服务器上删除，但 POP3 允许在服务器上保留副本。几乎所有的邮件服务器和客户端目前都支持 POP3。
+
+## 参见
+
+- 维基百科上的[邮局协议](https://zh.wikipedia.org/wiki/郵局協定)
+- [RFC 1734](https://datatracker.ietf.org/doc/html/rfc1734)（POP3 认证机制的规范）
+- [RFC 1939](https://datatracker.ietf.org/doc/html/rfc1939)（POP3 的规范）
+- [RFC 2449](https://datatracker.ietf.org/doc/html/rfc2449)（POP3 拓展机制的规范）
+- [MDN Web 文档术语](/zh-CN/docs/Glossary)
+
+ - {{Glossary("IMAP")}}
diff --git a/files/zh-cn/glossary/prefetch/index.md b/files/zh-cn/glossary/prefetch/index.md
index 3f9313dc6433c7..fa983c5aa0c314 100644
--- a/files/zh-cn/glossary/prefetch/index.md
+++ b/files/zh-cn/glossary/prefetch/index.md
@@ -1,123 +1,61 @@
---
-title: Link prefetching FAQ
+title: 预取
slug: Glossary/Prefetch
+l10n:
+ sourceCommit: 922c2b0f37e2f13887c50efe47e62bc23d94c3aa
---
{{GlossarySidebar}}
-### 什么是链接预取？
+预取是指在后台推测性地获取用户未来*可能*访问的文档或子资源。如果用户选择导航到预取的页面，这可以显著减少加载时间。例如，预取可以用于取“下一页”按钮链接的页面或其子资源，或用户悬停的链接弹出窗口，或者是搜索结果。
-链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。
+### 资源预取
-### 预取是否使用 HTTPS？
+资源应该根据它们在未来导航中被需要的可能性进行预取。浏览器可以自动推断某些资源，例如地址栏中的当前 URL。
-从 Gecko 1.9.1 (Firefox 3.5) 开始，支持获取 https 内容。
-
-### 什么是预取提示？
-
-浏览器会查找关系类型 (rel) 为 next 或 prefetch 的 HTML{{ HTMLElement("link") }} 或 [HTTP `Link:` header](/zh-CN/docs/Web/HTTP/Headers)。下面是一个使用 link 标签的例子：
+这可以使用 [`<link rel="prefetch">`](/zh-CN/docs/Web/HTML/Attributes/rel/prefetch)（[推测规则 API](/zh-CN/docs/Web/API/Speculation_Rules_API) 仅处理导航的文档预取）来完成：
```html
-<link rel="prefetch" href="/images/big.jpeg" />
-```
-
-同样效果的使用 HTTP `Link:` header 的例子：
-
-```plain
-Link: </images/big.jpeg>; rel=prefetch
+<link rel="prefetch" href="next.html" />
```
-`Link:` header 也可以通过使用 HTML meta 标签定义在 HTML 文档中：
+### 文档预取
-```plain
-<meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">
-```
-
-`Link:` header 的格式在 [RFC 5988](http://tools.ietf.org/html/rfc5988) section 5 中有所描述。
-
-浏览器检查所有这些预取提示，并将每一个独立的请求排到队列之中，然后浏览器空闲时将对这些请求进行预取。每个页面都可以有多个预取提示，因为预取多个文档是合理的。例如，未来要访问的页面可能包含多张大图。
+开发人员可以通过几种不同的方式向浏览器提供应预取导航的提示：
-下面是更多例子：
+[`<link rel="prefetch">`](/zh-CN/docs/Web/HTML/Attributes/rel/prefetch)：
-```plain
-<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
-<link rel="next" href="2.html">
+```html
+<link rel="prefetch" href="next.html" />
```
-### a 标签 (\<a>) 会被预取吗？
-
-不会，只有带有关系类型为 next 或 prefetch 的 \<link> 标签会被预拉取。但是，如果该特性收到足够的关注，我们在未来可能会支持带有关系类型为 next 或 prefetch 的 \<a> 标签的预取。这样做可能会帮助内容提供者避免预取内容过期的问题。
-
-### 链接预取是符合规范的吗？
-
-是的，本文档中描述的链接预取和现有 web 规范不冲突。实际上，在 HTML 4.01 规范允许定义新的 link type（参见 [章节 6.12：Like types](http://www.w3.org/TR/html4/types.html#type-links)）。但是 Mozilla 采用的具体处理机制还没有确定规范。一份互联网草案正在准备中。
-
-本特性的规范属于 HTML 5 的一部分，参见最新的工作草案，[章节 §5.11.3.13. Link type "prefetch"](http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch)。
-
-### 浏览器的空闲时间是如何确定的？
-
-在目前 (Moilla 1.2)，空闲时间的确定是通过 `nsIWebProgressListener` API 实现的。我们在顶层 `nsIWebProgress 对象` ("@[mozilla.org/docloaderservice;1](http://mozilla.org/docloaderservice;1)") 上附加了一个监听器。通过监听器，我们能够收到文档开始和停止的通知，从而将最后一个文档停止到下一个文档开始之间的间隔作为空闲时间的近似值。最后一个文档停止的通知大致会在顶层文档的 onLoad 方法即将被触发时发出。此时即是开始预取的时间点。如果一个子文档包含了预取提示，这些预取操作将会等到最顶层文档和其子文档完成加载后才会开始进行。
-
-### 资源正在被预载时点击了某个链接会发生什么？
-
-当用户点击一个连接，或开始任何形式的页面加载时，预取操作将被停止且任何预取提示将被丢弃。如果一个预取文档只下载了一部分，那么这部分文档将被保存在缓存中，供服务端发送一个 "Accept-Ranges: bytes" 的返回头。这个返回头通常是由网络服务器在返回静态内容时生成的。当用户真正访问这个已经（部分）预载过的文档时，该文档的剩余部分将被通过一个 HTTP byte-range 的请求获取。
-
-### 如果后台正在进行下载任务会发生什么？预取会争夺带宽吗？
-
-视情况而定。如果你正在使用 Mozilla 下载某些东西，预取将被推迟到下载结束。例如，如果你尝试加载书签组（将会开启多个浏览器标签），任何由书签组某页面发出的预取请求将被延迟到所有标签加载完毕时进行。如果你正在使用其他依赖网络的应用程序，那么 Mozilla 中的预取可能会与它们竞争带宽。这个问题我们希望将来能够借助操作系统服务去检测网络空闲时间来解决。
-
-### 对预取内容是否有限制？
+[推测规则 API](/zh-CN/docs/Web/API/Speculation_Rules_API) 预取：
-是的，只有 http\:// (从 Gecko 1.9.1 开始支持 https\:// ) 的 URL 可以被预取。其他协议（如 FTP）没有对客户端缓存提供足够的支持。
-
-### Mozilla 能够预取不同宿主的文档吗？
-
-可以。预取不受同源限制。限制预取来自同一个服务器并不会对增强浏览器的安全性有所帮助。
-
-### 预提取的请求是否包含 Referer: header？
-
-是的，预取的请求包含一个 HTTP `Referer:` header，指示从中提取预取提示的文档。
-
-这可能会影响许多站点上常用的引荐来源跟踪。因此，链接预取可能不适用于所有内容。但是，可以通过指定 `Cache-control: must-revalidate` HTTP response header，指示 Mozilla 在用户遵循 href 到预提取文档时验证预提取文档。此标头可启用缓存，但在从浏览器的缓存中提供文档之前，需要 `If-Modified-Since` 或 `If-None-Match` 验证请求。
-
-### 作为服务器管理员，我可以区分预取请求和普通请求吗？
-
-是的，我们将以下标头与每个预取请求一起发送：
-
-```plain
-X-moz: prefetch
+```html
+<script type="speculationrules">
+ {
+ "prefetch": [
+ {
+ "source": "list",
+ "urls": ["next.html"]
+ }
+ ]
+ }
+</script>
```
-Of course, this request header is not at all standardized, and it may change in future Mozilla releases. Chrome uses "X-Purpose: prefetch" or "Purpose: prefetch" [header](https://bugs.webkit.org/show_bug.cgi?id=46529).当然，此请求标头根本不是标准化的，并且在将来的 Mozilla 版本中可能会更改。Chrome 使用“X-Purpose: prefetch”或“Purpose: prefetch 的[header](https://bugs.webkit.org/show_bug.cgi?id=46529)。
+推测规则 API 较 `<link rel="prefetch">` 可以更好地处理导航的文档预取；前者专门为此目的而设计，而后者有许多限制；有关详细信息，请参阅 [`<link rel="prefetch">`](/zh-CN/docs/Web/HTML/Attributes/rel/prefetch)。
-### 是否有禁用链接预取的首选项？
+### DNS 预取
-是的，你可以设置一个隐藏的首选项来禁用链接预取。将此行添加到位于配置文件目录中的 prefs.js 文件中（或通过[about:config](/about:config)进行适当的更改）：
+[DNS 预取](/zh-CN/docs/Web/HTML/Attributes/rel/dns-prefetch)提前解析域名，通过减少请求时与域名查找相关的时间，加快载入速度。
-```plain
-user_pref("network.prefetch-next", false);
+```html
+<link rel="dns-prefetch" href="https://example.com/" />
```
-但是，从理论上讲，如果需要禁用链接预取，实现就一定会存在问题。如果它不能正确运行，我们宁愿改进实现，也不希望用户找到并调整一些隐藏的偏好。
-
-### 那些按网络流量付费的人呢？
-
-Basically, there are two ways of looking at this issue: websites can already cause things to be silently downloaded using JS/DOM hacks. prefetching is a browser feature; users should be able to disable it easily.
-
-It is important that websites adopt `<link>` tag based prefetching instead of trying to roll-in silent downloading using various JS/DOM hacks. The `<link>` tag gives the browser the ability to know what sites are up to, and we can use this information to better prioritize document prefetching. The user preference to disable `<link>` tag prefetching may simply encourage websites to stick with JS/DOM hacks, and that would not be good for users. This is one reason why prefetching is enabled by default.
-
-基本上，有两种方法可以解决此问题：网站可以使用 JS / DOM 之类的 hacks 方式静默下载内容。预取是浏览器功能；用户应该能够轻松禁用它。
-
-网站采用基于`<link>`标记的预取非常重要，而不是尝试使用各种 JS / DOM 之类的 hacks 方式进行静默下载。 `<link>`标记使浏览器能够知道正在访问哪些站点，我们可以使用此信息更好地确定文档预取的优先级。用户偏好禁用`<link>`标记预取可能只是鼓励网站坚持使用 JS / DOM 之类的 hacks 方式，这对用户不利。这是默认情况下启用预取的原因之一。
-
-### 哪些浏览器支持链接预取？
-
-基于 Mozilla 1.2（或更高版本）的浏览器以及基于 Mozilla 1.0.2（或更高版本）的浏览器均支持预取。这包括 Firefox 和 Netscape 7.01+。截至 2003 年 3 月，Camino 构建基于 Mozilla 1.0.1，因此不支持预取。测试你的浏览器是否支持链接预取。
-
-### 隐私问题
-
-除了上面已经提到的引用和 URL 跟随含义外，预取通常会导致访问预取站点的 cookie。（例如，如果你使用 google amazon，则 google 结果页面将预取 www\.amazon.com，从而导致 amazon cookie 来回发送。你可以在 Firefox 中阻止第三方 cookie，请参参阅 [Disabling third party cookies](http://support.mozilla.com/en-US/kb/Disabling%20third%20party%20cookies)。）
-
## 参见
-[Prefetching Hints](http://www.edochan.com/programming/pf.htm)
+- [推测加载](/zh-CN/docs/Web/Performance/Speculative_loading)
+- {{Glossary("prerender", "预渲染")}}
+- [推测规则 API](/zh-CN/docs/Web/API/Speculation_Rules_API)
diff --git a/files/zh-cn/glossary/preflight_request/index.md b/files/zh-cn/glossary/preflight_request/index.md
index 0c26ebb6d560cf..66944ad1004ae2 100644
--- a/files/zh-cn/glossary/preflight_request/index.md
+++ b/files/zh-cn/glossary/preflight_request/index.md
@@ -1,28 +1,30 @@
---
-title: Preflight request
+title: 预检请求
slug: Glossary/Preflight_request
+l10n:
+ sourceCommit: 38fb31b12de1019a538e868a90dd4dd4858e4871
---
{{GlossarySidebar}}
-一个 CORS 预检请求是用于检查服务器是否支持 {{Glossary("CORS")}} 即跨域资源共享。
+{{glossary("CORS")}} 预检请求用于检查服务器是否支持 CORS 协议，并且是否允许使用特定的方法和标头。
-它一般是用了以下几个 HTTP 请求首部的 {{HTTPMethod("OPTIONS")}} 请求：{{HTTPHeader("Access-Control-Request-Method")}} 和 {{HTTPHeader("Access-Control-Request-Headers")}}，以及一个 {{HTTPHeader("Origin")}} 首部。
+它一般是用了以下几个 HTTP 请求标头的 {{HTTPMethod("OPTIONS")}} 请求：{{HTTPHeader("Access-Control-Request-Method")}} 和 {{HTTPHeader("Access-Control-Request-Headers")}}，以及可选的 {{HTTPHeader("Origin")}} 标头。
-当有必要的时候，浏览器会自动发出一个预检请求；所以在正常情况下，前端开发者不需要自己去发这样的请求。
+当有必要的时候，浏览器会自动发出预检请求；所以在正常情况下，前端开发者不需要自己去发这样的请求。预检请求会在请求被标记为[“需要预检”](/zh-CN/docs/Web/HTTP/CORS#预检请求)时进行，而对于[简单请求](/zh-CN/docs/Web/HTTP/CORS#简单请求)则不会进行。
-举个例子，一个客户端可能会在实际发送一个 `DELETE` 请求之前，先向服务器发起一个预检请求，用于询问是否可以向服务器发起一个 {{HTTPMethod("DELETE")}} 请求：
+例如，客户端可能会在实际发送 {{HTTPMethod("DELETE")}} 请求之前，先向服务器发起预检请求，用于询问是否可以向服务器发起 `DELETE` 请求：
-```
+```http
OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org
```
-如果服务器允许，那么服务器就会响应这个预检请求。并且其响应首部 {{HTTPHeader("Access-Control-Allow-Methods")}} 会将 `DELETE` 包含在其中：
+如果服务器允许，那么服务器就会响应这个预检请求。并且其响应标头 {{HTTPHeader("Access-Control-Allow-Methods")}} 会将 `DELETE` 包含在其中：
-```
+```http
HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
@@ -31,7 +33,9 @@ Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
```
+预检响应可以通过类似上面的例子中的 {{HTTPHeader("Access-Control-Max-Age")}} 标头来缓存，以便在同一个 {{Glossary("URL")}} 下创建的请求中使用。为了缓存预检响应，浏览器使用一个特定的缓存，这个缓存是与浏览器管理的一般 HTTP 缓存分开的。预检响应永远不会被缓存在浏览器的一般 HTTP 缓存中。
+
## 参见
-- [CORS](/zh-CN/docs/Glossary/CORS)
+- {{Glossary("CORS")}}
- {{HTTPMethod("OPTIONS")}}
diff --git a/files/zh-cn/glossary/prerender/index.md b/files/zh-cn/glossary/prerender/index.md
new file mode 100644
index 00000000000000..4d09ab081e8369
--- /dev/null
+++ b/files/zh-cn/glossary/prerender/index.md
@@ -0,0 +1,36 @@
+---
+title: 预渲染
+slug: Glossary/Prerender
+l10n:
+ sourceCommit: 922c2b0f37e2f13887c50efe47e62bc23d94c3aa
+---
+
+{{GlossarySidebar}}
+
+预渲染是指推测性地[预取](/zh-CN/docs/Glossary/Prefetch)并*渲染*用户可能在不久的将来导航到的页面（浏览器在后台渲染页面，相当于在一个不可见的独立标签页中）。预渲染包括下载文档的子资源并运行相关的 JavaScript。
+
+如果用户随后选择导航到该页面，内容显示几乎可以瞬间完成。
+
+预渲染可以用于，例如，获取“下一页”按钮链接的页面资源，或用户悬停的链接弹出窗口，或在地址栏输入的 URL 可能的页面目标。以下[推测规则](/zh-CN/docs/Web/API/Speculation_Rules_API)可以包含在文档的头部，用于提示浏览器应预渲染 `next.html` 和 `next2.html`，因为这两个页面都可能是下一个导航的合理目标：
+
+```html
+<script type="speculationrules">
+ {
+ "prerender": [
+ {
+ "source": "list",
+ "urls": ["next.html", "next2.html"]
+ }
+ ]
+ }
+</script>
+```
+
+预渲染比预取能带来更快的显示时间，因此用户体验更好，但代价是消耗更多资源。
+
+## 参见
+
+- [推测加载](/zh-CN/docs/Web/Performance/Speculative_loading)
+- [预取](/zh-CN/docs/Glossary/Prefetch)
+- developer.chrome.google.cn 上的[在 Chrome 中预渲染页面，以实现快速的页面导航](https://developer.chrome.google.cn/docs/web-platform/prerender-pages#prerendering-from-the-address-bar)（2023）
+- [推测规则 API](/zh-CN/docs/Web/API/Speculation_Rules_API)
diff --git a/files/zh-cn/glossary/privileged/index.md b/files/zh-cn/glossary/privileged/index.md
new file mode 100644
index 00000000000000..ec8cfc7a7fca96
--- /dev/null
+++ b/files/zh-cn/glossary/privileged/index.md
@@ -0,0 +1,14 @@
+---
+title: 特权
+slug: Glossary/Privileged
+l10n:
+ sourceCommit: ea7db3b57472988d1b9390bf3d6d13eb4bddb58d
+---
+
+{{GlossarySidebar}}
+
+当用户被授予系统的额外权限或在与普通用户相比更高优先级的情况下获得对内容的终极访问权时，这些用户被称为**特权**用户。
+
+## 参见
+
+- 维基百科上的[特权](<https://zh.wikipedia.org/wiki/特权_(Windows)>)
diff --git a/files/zh-cn/glossary/privileged_code/index.md b/files/zh-cn/glossary/privileged_code/index.md
new file mode 100644
index 00000000000000..2d13445b251c2e
--- /dev/null
+++ b/files/zh-cn/glossary/privileged_code/index.md
@@ -0,0 +1,12 @@
+---
+title: 特权代码
+slug: Glossary/Privileged_code
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**特权代码**：你的扩展的 JavaScript 代码。例如，内容脚本中的代码。
+
+**非特权代码**：网页上的 JavaScript 代码。
diff --git a/files/zh-cn/glossary/progressive_enhancement/index.md b/files/zh-cn/glossary/progressive_enhancement/index.md
index e2f9a2a8b824ed..ba77de2f54b754 100644
--- a/files/zh-cn/glossary/progressive_enhancement/index.md
+++ b/files/zh-cn/glossary/progressive_enhancement/index.md
@@ -1,18 +1,25 @@
---
title: 渐进增强
slug: Glossary/Progressive_Enhancement
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**渐进增强**（Progressive enhancement）是一种设计理念，其核心是为尽可能多的用户提供基本内容和功能，同时进一步为现代化浏览器用户提供最佳体验，运行所有需要的代码。
+**渐进增强**是一种设计理念，旨在为尽可能多的用户提供基本的内容和功能，同时为能够运行所有必要代码的最现代化的浏览器用户提供最佳体验。
-[特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)通常用于确定浏览器是否可以处理高级内容，而[polyfill](/zh-CN/docs/Glossary/Polyfill)通常用于使用 JavaScript 构建缺少的功能。
+*渐进增强*中的“渐进”一词意味着创建一个设计，为使用旧浏览器和功能有限的设备的用户提供一个简单但仍可用的体验，同时这种设计**提升用户体验**，为使用新浏览器和功能丰富设备的用户提供更吸引人、功能更全面的体验。
-另外请关注无障碍支持 — 尽可能提供备选方案。
+[特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)通常用于确定浏览器是否可以处理高级内容，而 [polyfill](/zh-CN/docs/Glossary/Polyfill) 通常用于使用 JavaScript 构建缺少的功能。
-这个技术很有用，因为它让 Web 开发者，在专注开发最强大的网站同时，和某些未知的用户代理在访问网站时发生问题，两者之间达到权衡。 {{Glossary("优雅降级")}} 相关而不同 — 通常被视为与渐进增强相反的方向。实际上，这两种方法都是有效的，并且通常可以相互补充。
+特别需要注意无障碍性，应在可能的情况下提供可接受的替代方案。
+
+渐进增强是一种有用的技术，让 Web 开发者在专注开发最强大的网站的同时，使这些网站能够在多个未知的用户代理上运行。{{Glossary("graceful degradation", "优雅降级")}}与此相关但不相同，通常被认为与渐进增强相反。实际上，这两种方法都是有效的，且常常可以相辅相成。
## 参见
-- 维基百科的[渐进增强](https://zh.wikipedia.org/wiki/渐进增强)
+- 维基百科上的[渐进增强](https://zh.wikipedia.org/wiki/渐进增强)
+- freeCodeCamp 的[什么是渐进增强，为什么重要](https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/)（2018）
+- QuirksMode 的[渐进增强](https://www.quirksmode.org/blog/archives/2021/02/progressive_enh_1.html)（2021）
+- Piccalilli 的[渐进增强的力量](https://archive.hankchizljaw.com/wrote/the-power-of-progressive-enhancement/)（2018）
diff --git a/files/zh-cn/glossary/progressive_web_apps/index.md b/files/zh-cn/glossary/progressive_web_apps/index.md
new file mode 100644
index 00000000000000..a268959f4a1d5d
--- /dev/null
+++ b/files/zh-cn/glossary/progressive_web_apps/index.md
@@ -0,0 +1,19 @@
+---
+title: 渐进式 Web 应用程序
+slug: Glossary/Progressive_web_apps
+l10n:
+ sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3
+---
+
+{{GlossarySidebar}}
+
+渐进式 Web 应用程序（PWA）是使用 Web 平台技术构建的应用程序，但提供的用户体验类似于平台特定的应用程序。
+
+这种应用程序享有 Web 的所有优点——例如通过搜索引擎发现、通过 {{Glossary("URL")}} 链接以及跨多个设备工作，但通过现代 API（例如 [Service Worker](/zh-CN/docs/Web/API/Service_Worker_API) 和[推送](/zh-CN/docs/Web/API/Push_API)）逐步增强。
+
+这些功能包括可安装、离线工作以及便于与服务器同步和重新吸引用户。
+
+## 参见
+
+- MDN 上的[渐进式 Web 应用程序](/zh-CN/docs/Web/Progressive_web_apps)
+- web.dev 上的[渐进式 Web 应用程序](https://web.dev/explore/progressive-web-apps)
diff --git a/files/zh-cn/glossary/promise/index.md b/files/zh-cn/glossary/promise/index.md
new file mode 100644
index 00000000000000..b4843ccd9d1bab
--- /dev/null
+++ b/files/zh-cn/glossary/promise/index.md
@@ -0,0 +1,18 @@
+---
+title: Promise
+slug: Glossary/Promise
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**{{jsxref("Promise")}}** 是一个由尚未完成工作的{{Glossary("function", "函数")}}返回的{{Glossary("object","对象")}}。字面上，Promise 代表了由该函数做出的承诺，即它最终将通过 Promise 对象返回结果。
+
+当被调用的函数{{Glossary("asynchronous", "异步地")}}完成其工作时，Promise 对象上的一个叫做解决（或兑现、完成）处理程序的函数将被调用，以通知原始调用者任务已完成。
+
+## 参见
+
+- [Future 与 Promise](https://zh.wikipedia.org/wiki/Future与promise)
+- [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference)中的 {{jsxref("Promise")}}
+- [使用 Promise](/zh-CN/docs/Web/JavaScript/Guide/Using_promises)
diff --git a/files/zh-cn/glossary/protocol/index.md b/files/zh-cn/glossary/protocol/index.md
index 5811f1b538e8c0..f04595d0be34f5 100644
--- a/files/zh-cn/glossary/protocol/index.md
+++ b/files/zh-cn/glossary/protocol/index.md
@@ -1,6 +1,8 @@
---
-title: Protocol（协议）
+title: 协议
slug: Glossary/Protocol
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
@@ -9,10 +11,10 @@ slug: Glossary/Protocol
## 参见
-- 在维基百科中的 [通信协议](https://zh.wikipedia.org/wiki/通信协议)
+- 在维基百科中的[通信协议](https://zh.wikipedia.org/wiki/通信协议)
- [RFC 官方互联网协议标准](https://www.rfc-editor.org/standards)
- [HTTP 概述](/zh-CN/docs/Web/HTTP/Overview)
-- 术语库：
+- 术语：
- {{glossary("TCP")}}
- - {{glossary("Packet")}}
+ - {{glossary("Packet", "数据包")}}
diff --git a/files/zh-cn/glossary/prototype-based_programming/index.md b/files/zh-cn/glossary/prototype-based_programming/index.md
index 702d88eb2706ef..7c9e0ca2bfc91b 100644
--- a/files/zh-cn/glossary/prototype-based_programming/index.md
+++ b/files/zh-cn/glossary/prototype-based_programming/index.md
@@ -1,14 +1,16 @@
---
title: 基于原型编程
slug: Glossary/Prototype-based_programming
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**基于原型编程**是一种{{Glossary("OOP", "面向对象编程")}}的风格。在这种风格中，我们不会显式地定义{{Glossary('Class', '类')}}，而会通过向其他类的实例（对象）中添加属性和方法（甚至偶尔向空对象添加）来创建类。
+**基于原型编程**是一种{{Glossary("OOP", "面向对象编程")}}风格。在其中，我们不会显式地定义{{Glossary('Class', '类')}}，而会通过向其他类的实例（对象）中添加属性和方法（甚至偶尔向空对象添加）来创建类。
简单来说，这种风格是在不定义{{Glossary('Class', '类')}}的情况下创建一个{{Glossary('Object', '对象')}}。
## 参见
-- [基于原型编程](https://zh.wikipedia.org/wiki/基于原型编程)的维基页面
+- 维基百科上的[基于原型编程](https://zh.wikipedia.org/wiki/基于原型编程)
diff --git a/files/zh-cn/glossary/prototype/index.md b/files/zh-cn/glossary/prototype/index.md
index 76cf8a5ea3616e..5aef3b6d81ccfa 100644
--- a/files/zh-cn/glossary/prototype/index.md
+++ b/files/zh-cn/glossary/prototype/index.md
@@ -1,13 +1,15 @@
---
-title: Prototype
+title: 原型
slug: Glossary/Prototype
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
原型是一种在开发生命周期的早期显示应用程序或产品的外观和行为的模型。
-请参见 [继承和原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+参见[继承和原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)。
## 参见
diff --git a/files/zh-cn/glossary/proxy_server/index.md b/files/zh-cn/glossary/proxy_server/index.md
index 190ba8be76edd7..f3c5e56ea6d540 100644
--- a/files/zh-cn/glossary/proxy_server/index.md
+++ b/files/zh-cn/glossary/proxy_server/index.md
@@ -1,18 +1,20 @@
---
title: 代理服务器
slug: Glossary/Proxy_server
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**代理服务器** 是用来在不同 Internet 网络之间进行导航的中继软件或者计算机。它们有助于访问万维网上的内容。代理服务器会拦截请求并提供响应；它不一定会转发所有请求（比如说在有缓存的情况），而且也许会修改请求或者响应（比如说在两个网络环境边界的时候修改请求头部信息）。
+**代理服务器**是用来在不同 Internet 网络之间进行导航的中继软件或者计算机。它们有助于访问万维网上的内容。代理服务器会拦截请求并提供响应；它不一定会转发所有请求（比如说在有缓存的情况），而且也许会修改请求或者响应（比如说在两个网络环境边界的时候修改请求头部信息）。
代理可以存在用户自己的电脑上，或者任何其他在用户计算机与互联网上的远程服务器之间的任何地方。一般来说有两种代理类型：
-- **正向代理** 指处理到互联网的请求的代理
-- **反向代理** 指处理互联网上的请求并转发到服务器的代理
+- **正向代理**指处理到互联网的请求的代理
+- **反向代理**指处理互联网上的请求并转发到服务器的代理
## 参见
-- [Proxy servers and tunneling](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling)
-- [Proxy server](https://en.wikipedia.org/wiki/Proxy_server) on Wikipedia
+- [代理服务器和隧道](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling)
+- 维基百科上的[代理服务器](https://zh.wikipedia.org/wiki/代理服务器)
diff --git a/files/zh-cn/glossary/pseudo-class/index.md b/files/zh-cn/glossary/pseudo-class/index.md
index 579b4852af2454..c618f3ff3436bc 100644
--- a/files/zh-cn/glossary/pseudo-class/index.md
+++ b/files/zh-cn/glossary/pseudo-class/index.md
@@ -1,11 +1,13 @@
---
title: 伪类
slug: Glossary/Pseudo-class
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-在 CSS 中，一个伪类选择器只依据元素的状态，而不是元素在文档树中的信息，来选择目标对象。举例来说，选择器 `a`{{ cssxref(":visited") }} 仅仅应用于那些用户已经浏览过的连接。
+在 CSS 中，**伪类**选择器只依据元素的状态，而不是元素在文档树中的信息，来选择目标元素。举例来说，选择器 `a`{{ cssxref(":visited") }} 仅仅应用于那些用户已经浏览过的链接。
## 参见
diff --git a/files/zh-cn/glossary/pseudo-element/index.md b/files/zh-cn/glossary/pseudo-element/index.md
new file mode 100644
index 00000000000000..346fe906e4face
--- /dev/null
+++ b/files/zh-cn/glossary/pseudo-element/index.md
@@ -0,0 +1,14 @@
+---
+title: 伪元素
+slug: Glossary/Pseudo-element
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+在 CSS 中，**伪元素**选择器用于在没有特定 HTML 元素可供选择的情况下，为文档内容的部分应用样式。例如，你可以使用 `p`{{ Cssxref("::first-letter") }} 来为每个段落的首字母应用样式，而不是将它们放在自己的元素中。
+
+## 参见
+
+- [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)
diff --git a/files/zh-cn/glossary/public-key_cryptography/index.md b/files/zh-cn/glossary/public-key_cryptography/index.md
new file mode 100644
index 00000000000000..4272b887a677a9
--- /dev/null
+++ b/files/zh-cn/glossary/public-key_cryptography/index.md
@@ -0,0 +1,28 @@
+---
+title: 非对称密钥密码
+slug: Glossary/Public-key_cryptography
+l10n:
+ sourceCommit: aabd56c814d580e577199239fb27e54cc168cf55
+---
+
+{{GlossarySidebar}}
+
+非对称密钥密码，或*公钥密码*，是一种密钥成对出现的密码系统。由其中一个密钥执行的变换只能通过另一个密钥来解密。一个密钥（_私钥_）是保密的，而另一个密钥是公开的。
+
+在数字签名中，使用私钥进行签名，公钥进行验证。这意味着任何人都可以验证签名，但只有拥有相应私钥的人才能生成签名。
+
+在加密中，使用公钥加密，使用私钥解密。这使得公钥加密系统相较于对称加密系统具有优势，因为加密密钥可以公开。任何人都可以向私钥的拥有者加密消息，但只有私钥的拥有者才能解密。然而，公钥加密系统通常比对称算法慢得多，而且它们能够加密的消息大小与密钥大小成正比，因此对于长消息来说扩展性不佳。
+
+因此，常见的做法是使用对称算法加密消息，然后使用公钥系统加密对称密钥。这种安排可以结合两种系统的优点。
+
+常用的公钥密码系统有 RSA（用于签名和加密）、DSA（用于签名）和 Diffie-Hellman（用于密钥协商）。流行的椭圆曲线算法包括[椭圆曲线 Diffie-Hellman 密钥交换](https://zh.wikipedia.org/wiki/橢圓曲線迪菲-赫爾曼金鑰交換)（**ECDH**）和[椭圆曲线数字签名算法](https://zh.wikipedia.org/wiki/椭圆曲线数字签名算法)（**ECDSA**）。
+
+## 参见
+
+- [Web Crypto API](/zh-CN/docs/Web/API/Web_Crypto_API)
+- [SubtleCrypto 支持的算法](/zh-CN/docs/Web/API/SubtleCrypto#支持的算法)
+- 术语
+
+ - {{Glossary("Symmetric-key cryptography", "对称密钥密码")}}
+
+- 维基百科上的[公开密钥密码学](https://zh.wikipedia.org/wiki/公开密钥加密)
diff --git a/files/zh-cn/glossary/python/index.md b/files/zh-cn/glossary/python/index.md
index 28396a9ad9df1f..cbf91316c6abf4 100644
--- a/files/zh-cn/glossary/python/index.md
+++ b/files/zh-cn/glossary/python/index.md
@@ -1,17 +1,29 @@
---
title: Python
slug: Glossary/Python
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
**Python** 是一个高级通用编程语言。它使用多范式方法。这意味着它支持程序化、面向对象和一些功能性编程结构。
-它是由 _Guido van Rossum_ 创建的，作为 1985 年至 1990 年间的另一种语言（称为 ABC）的继任者。目前 Python 被用于大量的领域，如 Web 开发，作为其他应用程序的脚本语言和构建实际应用程序。
+它是由 Guido van Rossum 创建的，作为 1985 年至 1990 年间的另一种语言（称为 ABC）的继任者，目前广泛应用于 web 开发、桌面应用程序、数据科学、DevOps 和自动化/生产力等领域。
-Python 是根据 OSI 批准的开源许可证开发的，使其免费使用和分发，即使是商业用途也是如此。Python 的许可证是由 [Python 软件基金会](https://www.python.org/psf) 管理的。
+Python 是根据 OSI 批准的开源许可证开发的，使其免费使用和分发，即使是商业用途也是如此。Python 的许可证是由 [Python 软件基金会](https://www.python.org/psf)管理的。
## 参见
- 在维基百科上的 [Python](https://zh.wikipedia.org/wiki/Python)
-- [python 的入门教程](https://www.tutorialspoint.com/python/index.htm)
+- [官方 Python 文档教程](https://docs.python.org/3/tutorial/index.html)
+- [Tutorials Point Python 教程](https://www.tutorialspoint.com/python/index.htm)
+- [AlphaCodingSkills Python 教程](https://www.alphacodingskills.com/python/python-tutorial.php)
+- MDN 上的 [Django Web 框架 (Python)](/zh-CN/docs/Learn/Server-side/Django)
+- [术语表](/zh-CN/docs/Glossary)
+
+ - {{Glossary("Java")}}
+ - {{Glossary("JavaScript")}}
+ - {{Glossary("PHP")}}
+ - {{Glossary("Python")}}
+ - {{Glossary("Ruby")}}
diff --git a/files/zh-cn/glossary/quality_values/index.md b/files/zh-cn/glossary/quality_values/index.md
index 56bc28f4cca971..e6ffaa26052a03 100644
--- a/files/zh-cn/glossary/quality_values/index.md
+++ b/files/zh-cn/glossary/quality_values/index.md
@@ -1,48 +1,47 @@
---
-title: Quality values
+title: 质量价值
slug: Glossary/Quality_values
+l10n:
+ sourceCommit: 5090082ff453369e1b9c44bf2bc975a00614114a
---
{{GlossarySidebar}}
-**质量价值**（Quality values）亦称作 q 值，其与 q 因子以逗号分隔的方式来描述值的优先级顺序，是 HTTP 消息头以及 HTML 中的特殊语法。值的重要性以一种后缀表示：`';q='`。该后缀紧接`0`到`1`间的值 (值可达小数点后三位)，最高值表明最高优先级。无此后缀时，默认值为`1`。
+**质量价值**（Quality value），也称作 _q 值_、_q 因子_，用于描述逗号分隔列表中值的优先级顺序。它是一种特殊的语法，允许在一些 [HTTP 标头](/zh-CN/docs/Web/HTTP/Headers) 和 HTML 中使用。
+
+值的重要性由后缀 `';q='` 标记，后面紧跟一个介于 `0` 和 `1` 之间的值，包括最多三位小数，最高的值表示最高优先级。当未指定时，默认值为 `1`。
## 示例
以下语法
-```
+```http
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
```
表明优先级先后顺序：
-| Value 值 | Priority 优先级 |
-| --------------------------------------- | --------------- |
-| `text/html` and `application/xhtml+xml` | `1.0` |
-| `application/xml` | `0.9` |
-| `*/*` | `0.8` |
+| 值 | 优先级 |
+| ------------------------------------ | ------ |
+| `text/html`、`application/xhtml+xml` | `1.0` |
+| `application/xml` | `0.9` |
+| `*/*` | `0.8` |
-如果前面这两个值未定义优先级，值的顺序并不重要。然而，q 值相同时，值越具体，其优先级越高。
+如果前面这两个值未定义优先级，值的顺序并不重要。然而，取值相同时，值越具体，其优先级越高。
-```
+```http
text/html;q=0.8,text/*;q=0.8,*/*;q=0.8
```
-| Value 值 | Priority 优先级 |
-| ----------- | ----------------------------- |
-| `text/html` | `0.8` (but totally specified) |
-| `text/*` | `0.8` (partially specified) |
-| `*/*` | `0.8` (not specified) |
-
-像 Accept 消息头的语法可以有额外的标记，比如`text/html;level=1`。这使值更具体，不过该用法不常见。
-
-## 浏览器信息
-
-### 火狐
+| 值 | 优先级 |
+| ----------- | ----------------------- |
+| `text/html` | `0.8`（但是完全指定了） |
+| `text/*` | `0.8`（部分指定） |
+| `*/*` | `0.8`（完全没指定） |
-从 Firefox 18 开始，质量因子的值可达小数点后二位（之前的版本只能达小数点后一位）。（[Firefox bug 672448](https://bugzil.la/672448)）
+一些语法，例如 {{HTTPHeader("Accept")}}，允许使用额外的指定符号，例如 `text/html;level=1`。这些符号增加了值的特异性。它们的使用非常罕见。
-## 更多
+## 参见
-- 使用 q 值的 HTTP 消息头：{{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Charset")}}、{{HTTPHeader("Accept-Language")}}、{{HTTPHeader("Accept-Encoding")}}和{{HTTPHeader("TE")}}。
+- 使用 q 值语法的 [HTTP 标头](/zh-CN/docs/Web/HTTP/Headers)：{{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Encoding")}}、{{HTTPHeader("Accept-Language")}}、{{HTTPHeader("TE")}}、{{HTTPHeader("Want-Digest")}}。
+- [标头字段定义](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html)
diff --git a/files/zh-cn/glossary/quaternion/index.md b/files/zh-cn/glossary/quaternion/index.md
new file mode 100644
index 00000000000000..ad430b3cf8137d
--- /dev/null
+++ b/files/zh-cn/glossary/quaternion/index.md
@@ -0,0 +1,18 @@
+---
+title: 四元数
+slug: Glossary/Quaternion
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**四元数**（quaternion）是两个 3D 向量的商，用于表示 3D 图形和基于加速计的传感器中的方向或旋转数据。
+
+虽然数学四元数比这更复杂，但用于表示旋转的**单位四元数**（或**旋转四元数**）在语法上与 3D 点相同。因此，类型 {{domxref("DOMPoint")}}（或 {{domxref("DOMPointReadOnly")}}）用于存储四元数。
+
+## 参见
+
+- 维基百科上的[四元数与空间旋转](https://zh.wikipedia.org/wiki/四元数与空间旋转)
+- 维基百科上的[四元数](https://zh.wikipedia.org/wiki/四元數)
+- WebXR 设备 API 中的 {{domxref("XRRigidTransform.orientation")}}
diff --git a/files/zh-cn/glossary/quic/index.md b/files/zh-cn/glossary/quic/index.md
new file mode 100644
index 00000000000000..5a6c40a60f7f63
--- /dev/null
+++ b/files/zh-cn/glossary/quic/index.md
@@ -0,0 +1,21 @@
+---
+title: QUIC
+slug: Glossary/QUIC
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**QUIC** 是一个基于 UDP 实现的多路传输协议。它在 HTTP/3 中作为传输层，取代了 {{Glossary("TCP")}}。
+
+QUIC 旨在为 HTTP 连接提供更快的建立和更低的延迟。具体来说：
+
+- 在 TCP 中，初始 TCP 握手后可以选择进行 TLS 握手，数据传输前必须完成 TLS 握手。由于现在几乎所有连接都使用 TLS，QUIC 将 TLS 握手整合到初始 QUIC 握手中，减少了建立连接时必须交换的消息数量。
+
+- HTTP/2 是一个多路复用协议，允许多个 HTTP 事务同时进行。然而，这些事务是在单个 TCP 连接上进行多路复用的，这意味着 TCP 层的数据包丢失和随后的重传可能会阻塞所有事务。QUIC 通过在 UDP 上运行并为每个流实现数据包丢失检测和重传，避免了这种情况，这意味着数据包丢失只会阻塞丢失数据包的特定流。
+
+## 参见
+
+- {{rfc("9000", "QUIC 规范")}}
+- {{rfc("9114", "HTTP/3 规范")}}
diff --git a/files/zh-cn/glossary/rail/index.md b/files/zh-cn/glossary/rail/index.md
index f38b3ca4b165bc..641dd0b69bb5e6 100644
--- a/files/zh-cn/glossary/rail/index.md
+++ b/files/zh-cn/glossary/rail/index.md
@@ -1,21 +1,23 @@
---
title: RAIL
slug: Glossary/RAIL
+l10n:
+ sourceCommit: b789d2ed3e6398b03fe22c95a3442be7b4669b47
---
{{GlossarySidebar}}
-**RAIL**, 是 **Response, Animation, Idle, 和 Load 的首字母缩写**, 是一种由 Google Chrome 团队与 2015 年提出的性能模型，用于提升浏览器内的用户体验和性能。RAIL 模型的理念是 "以用户为中心；最终目标不是让你的网站在任何特定设备上都能运行很快，而是使用户满意。" RAIL 把交互分为四个阶段：页面加载，空闲，响应用户输入，滚动和动画。按首字母缩写顺序，其主要原则是：
+**RAIL**（**Response、Animation、Idle 和 Load 的首字母缩写**）是由 Google Chrome 团队于 2015 年提出一种用于提升浏览器内的用户体验和性能的性能模型。RAIL 模型的理念是“以用户为中心；最终目标不是让你的网站在任何特定设备上都能运行很快，而是使用户满意。”RAIL 把交互分为四个阶段：页面加载、空闲、响应用户输入、滚动和动画。按首字母缩写顺序，其主要原则是：
- **响应**
- - : 应该尽可能快速的响应用户，应该在 100ms 或者 100ms 以内响应用户输入。
+ - : 应该尽可能快速的响应用户，应该在 100ms 或者 **100ms** 以内响应用户输入。
- **动画**
- - : 在展示动画的时候，每一帧应该以 16ms 进行渲染，这样可以保持动画效果的一致性，并且避免卡顿。
+ - : 在展示动画的时候，每一帧应该以 **16ms** 进行渲染，这样可以保持动画效果的一致性，并且避免卡顿。
- **空闲**
- - : 当使用 Javascript 主线程的时候，应该把任务划分到执行时间小于 50ms 的片段中去，这样可以释放线程以进行用户交互
+ - : 当使用 Javascript 主线程的时候，应该把任务划分到执行时间小于 **50ms** 的片段中去，这样可以释放线程以进行用户交互
- **加载**
- - : 应该在小于 1s 的时间内加载完成你的网站，并可以进行用户交互。
+ - : 应该在小于 **5s** 的时间内加载完成你的网站，并可以进行用户交互。
-## See also
+## 参见
-- [Recommended Web Performance Timings: How long is too long](/zh-CN/docs/Web/Performance/How_long_is_too_long)
+- [推荐的 Web 性能时间：应该有多长](/zh-CN/docs/Web/Performance/How_long_is_too_long)
diff --git a/files/zh-cn/glossary/recursion/index.md b/files/zh-cn/glossary/recursion/index.md
index c6a007b25b9299..f2880cd70de27e 100644
--- a/files/zh-cn/glossary/recursion/index.md
+++ b/files/zh-cn/glossary/recursion/index.md
@@ -1,13 +1,86 @@
---
-title: Recursion（递归）
+title: 递归
slug: Glossary/Recursion
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
一种函数调用自身的操作。递归被用于处理包含有更小的子问题的一类问题。一个递归函数可以接受两个输入参数：一个最终状态（终止递归）或一个递归状态（继续递归）。
+## 示例
+
+### 不断调用自身直至满足条件的递归函数
+
+下述 Python 代码定义了一个函数，输入数字并打印，同时用这个数字 -1 为参数继续调用自身，直至参数等于 0。
+
+```py
+def recurse(x):
+ if x > 0:
+ print(x)
+ recurse(x - 1)
+
+recurse(10)
+```
+
+输出如下：
+
+10
+9
+8
+7
+6
+5
+4
+3
+2
+1
+
+### 递归受限于堆栈大小
+
+下述代码定义了一个函数，其返回运行这段代码的 JavaScript 运行时的最大可用堆栈大小。
+
+```js
+const getMaxCallStackSize = (i) => {
+ try {
+ return getMaxCallStackSize(++i);
+ } catch {
+ return i;
+ }
+};
+
+console.log(getMaxCallStackSize(0));
+```
+
+### 常用例
+
+```js
+const factorial = (n) => {
+ if (n === 0) {
+ return 1;
+ } else {
+ return n * factorial(n - 1);
+ }
+};
+console.log(factorial(10));
+// 3628800
+```
+
+```js
+const fibonacci = (n) => (n <= 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));
+console.log(fibonacci(10));
+// 55
+```
+
+```js
+const reduce = (fn, acc, [cur, ...rest]) =>
+ cur === undefined ? acc : reduce(fn, fn(acc, cur), rest);
+console.log(reduce((a, b) => a + b, 0, [1, 2, 3, 4, 5, 6, 7, 8, 9]));
+// 45
+```
+
## 参见
- 维基百科上的[递归（计算机科学）](<https://zh.wikipedia.org/wiki/递归_(计算机科学)>)
-- [更多关于 JavaScript 中递归的细节](/zh-CN/docs/Web/JavaScript/Guide/Functions#Recursion)
+- [更多关于 JavaScript 中递归的细节](/zh-CN/docs/Web/JavaScript/Guide/Functions#递归)
diff --git a/files/zh-cn/glossary/reflow/index.md b/files/zh-cn/glossary/reflow/index.md
index 14d9ee5e4cc5ee..a1125cd5d266a5 100644
--- a/files/zh-cn/glossary/reflow/index.md
+++ b/files/zh-cn/glossary/reflow/index.md
@@ -12,5 +12,5 @@ l10n:
## 参见
- [重绘](/zh-CN/docs/Glossary/Repaint)
-- [尽可能减少浏览器重排](https://developer.google.com/speed/docs/insights/browser-reflow)（developer.google.com）
+- [尽可能减少浏览器重排](https://developer.google.cn/speed/docs/insights/browser-reflow)（developer.google.cn）
- [了解浏览器中的重排和重绘](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg)（dev.to，2020）
diff --git a/files/zh-cn/glossary/regular_expression/index.md b/files/zh-cn/glossary/regular_expression/index.md
index 15ff2195f14683..2a08b1ba837c36 100644
--- a/files/zh-cn/glossary/regular_expression/index.md
+++ b/files/zh-cn/glossary/regular_expression/index.md
@@ -1,17 +1,19 @@
---
-title: Regular expression
+title: 正则表达式
slug: Glossary/Regular_expression
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**正则表达式**（*Regular expressions*或 _regex_）是决定了在搜索中使用何种字符串序列的规则。
+**正则表达式**（_regex_）是决定了在搜索中使用何种字符串序列的规则。
-正则表达式在多种语言中都得到了实现，但是最知名的实现，当属 Perl 的实现。该实现引出了名为 PCRE（_Perl Compatible Regular Expression_）的生态系统。在 Web 中，{{glossary("JavaScript")}} 通过 {{jsxref("RegExp")}} 对象，给出了正则表达式的另一种实现。
+正则表达式在多种语言中都得到了实现，但是最知名的实现，当属 Perl 的实现。该实现引出了名为 PCRE（_Perl Compatible Regular Expression_，Perl 兼容的正则表达式）的生态系统。在 Web 中，{{glossary("JavaScript")}} 通过 {{jsxref("RegExp")}} 对象，给出了正则表达式的另一种实现。
## 参见
-- 在维基百科上的 [正则表达式](https://zh.wikipedia.org/wiki/正则表达式)
+- 在维基百科上的[正则表达式](https://zh.wikipedia.org/wiki/正则表达式)
- [互动教程](https://regexone.com/)
-- [虚拟化的正则表达式](https://regexper.com/)
-- [在 JavaScript 中写正则表达式](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions)
+- [可视化的正则表达式](https://regexper.com/)
+- [在 JavaScript 中书写正则表达式](/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions)
diff --git a/files/zh-cn/glossary/relying_party/index.md b/files/zh-cn/glossary/relying_party/index.md
new file mode 100644
index 00000000000000..a23fe404874290
--- /dev/null
+++ b/files/zh-cn/glossary/relying_party/index.md
@@ -0,0 +1,18 @@
+---
+title: 依赖方
+slug: Glossary/Relying_party
+l10n:
+ sourceCommit: e63979cfb7866a20a546623e6cf736ccf9055f03
+---
+
+{{GlossarySidebar}}
+
+**依赖方**（relying party）是需要控制对资源的访问的实体，要做到这一点，需要对试图访问该资源的其他实体进行{{glossary("authentication", "认证")}}。在 Web 上，依赖方通常是网站，允许用户登录并在决定是否授予用户访问权限之前需要对用户进行认证（例如通过检查密码）。
+
+网站在授予对其资源的访问权限时，*依赖于*浏览器提供的凭据的有效性。
+
+## 参见
+
+- {{glossary("Federated identity", "联合身份")}}
+- {{glossary("Identity provider", "身份提供者")}}
+- [联合凭证管理（FedCM）API](/zh-CN/docs/Web/API/FedCM_API)
diff --git a/files/zh-cn/glossary/render_blocking/index.md b/files/zh-cn/glossary/render_blocking/index.md
new file mode 100644
index 00000000000000..cffffa3da0aa3f
--- /dev/null
+++ b/files/zh-cn/glossary/render_blocking/index.md
@@ -0,0 +1,17 @@
+---
+title: 阻塞渲染
+slug: Glossary/Render_blocking
+l10n:
+ sourceCommit: 6b56cb7daf7092f325f98dc9f53b3d80c700adb6
+---
+
+{{GlossarySidebar}}
+
+**阻塞渲染**指的是加载网站时阻止用户界面渲染的任何部分。阻塞渲染对网站性能不利，因为它增加了用户与网站交互的时间，例如查看内容或与控件交互的时间。
+
+最常见的阻塞渲染原因是初始加载的 CSS 或 JavaScript 文件。
+
+## 参见
+
+- [CSS 性能优化](/zh-CN/docs/Learn/Performance/CSS)
+- [JavaScript 性能优化](/zh-CN/docs/Learn/Performance/JavaScript)
diff --git a/files/zh-cn/glossary/repaint/index.md b/files/zh-cn/glossary/repaint/index.md
new file mode 100644
index 00000000000000..5ca5454359adec
--- /dev/null
+++ b/files/zh-cn/glossary/repaint/index.md
@@ -0,0 +1,15 @@
+---
+title: 重绘
+slug: Glossary/Repaint
+l10n:
+ sourceCommit: 245307fe1bbb5a62c7e895fae62e0152f200b37b
+---
+
+{{GlossarySidebar}}
+
+**重绘**在{{glossary("browser", "浏览器")}}重新绘制网页以显示由 UI 更改引起的视觉更新时发生，例如在交互式站点上进行更新后。这通常是在重排之后发生的，重排是浏览器重新计算网页的某些部分的位置和几何形状。
+
+## 参见
+
+- [重排](/zh-CN/docs/Glossary/Reflow)
+- dev.to 上的[理解浏览器的重排与重绘](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg)（2020）
diff --git a/files/zh-cn/glossary/replay_attack/index.md b/files/zh-cn/glossary/replay_attack/index.md
new file mode 100644
index 00000000000000..da6569eec9da72
--- /dev/null
+++ b/files/zh-cn/glossary/replay_attack/index.md
@@ -0,0 +1,16 @@
+---
+title: 重放攻击
+slug: Glossary/Replay_attack
+l10n:
+ sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
+---
+
+{{GlossarySidebar}}
+
+在 Web 安全中，*重放攻击*是指攻击者拦截先前发送的消息并稍后重新发送以获取与原始消息相同的凭据，可能使用不同的有效载荷或指令。
+
+可以通过在每条消息中包含一个唯一的、一次性的标识符来防止重放攻击，接收方可以使用该标识符验证传输的真实性。此标识符可以采用会话令牌或“仅使用一次的数字”（nonce）。
+
+## 参见
+
+- 维基百科上的[重放攻击](https://zh.wikipedia.org/wiki/重放攻击)
diff --git a/files/zh-cn/glossary/repo/index.md b/files/zh-cn/glossary/repo/index.md
new file mode 100644
index 00000000000000..42c54f22275161
--- /dev/null
+++ b/files/zh-cn/glossary/repo/index.md
@@ -0,0 +1,14 @@
+---
+title: 仓库
+slug: Glossary/Repo
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+在版本控制系统（如 {{Glossary("Git")}}、{{Glossary("SVN")}}）中，仓库（即“repository”）是一个托管应用程序源代码以及各种元数据的地方。
+
+## 参见
+
+- 维基百科上的[仓库](https://zh.wikipedia.org/wiki/儲存庫)
diff --git a/files/zh-cn/glossary/reporting_directive/index.md b/files/zh-cn/glossary/reporting_directive/index.md
new file mode 100644
index 00000000000000..965f915c625652
--- /dev/null
+++ b/files/zh-cn/glossary/reporting_directive/index.md
@@ -0,0 +1,28 @@
+---
+title: 报告指令
+slug: Glossary/Reporting_directive
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**{{Glossary("CSP")}} 报告指令**用于 {{HTTPHeader("Content-Security-Policy")}} 标头，控制 CSP 违规报告的过程。
+
+详见[报告指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy#报告指令)以获取完整列表。
+
+## 参见
+
+- [术语](/zh-CN/docs/Glossary)
+
+ - {{Glossary("CSP", "内容安全策略")}}
+ - {{Glossary("Fetch directive", "Fetch 指令")}}
+ - {{Glossary("Document directive", "文档指令")}}
+ - {{Glossary("Navigation directive", "导航指令")}}
+
+- 参考
+
+ - <https://www.w3.org/TR/CSP/#directives-reporting>
+ - {{HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")}}
+ - {{HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")}}
+ - {{HTTPHeader("Content-Security-Policy")}}
diff --git a/files/zh-cn/glossary/representation_header/index.md b/files/zh-cn/glossary/representation_header/index.md
index 6a74b8784a98d0..249fe41ad9f303 100644
--- a/files/zh-cn/glossary/representation_header/index.md
+++ b/files/zh-cn/glossary/representation_header/index.md
@@ -1,13 +1,19 @@
---
-title: 表示标头（Representation header）
+title: 表示标头
slug: Glossary/Representation_header
+l10n:
+ sourceCommit: 803278d269a4fcb807f581a2ac9c4293dc02d0ef
---
{{GlossarySidebar}}
**表示标头**（representation header）是一种 {{glossary("HTTP_header", "HTTP 标头")}}，用于描述 HTTP 消息主体中发送资源的特定的*表示*形式。
-所谓表示（representation）就是特定的资源不同的表示形式。例如，相同的数据，其可能被格式化为例如 XML 或 JSON 等特定媒体类别的格式，被本地化为特定的书面语言或者地理区域，或者通过压缩或者其他方式编码以进行传输。底层资源在每种情况下都是一样的，但是它的表示形式是不同的。
+表示就是特定的资源不同的表示形式。
+
+例如，相同的数据，其可能被格式化为例如 XML 或 JSON 等特定媒体类别的格式，被本地化为特定的书面语言或者地理区域，或者通过压缩或者其他方式编码以进行传输。底层资源在每种情况下都是一样的，但是它的表示形式是不同的。
+
+虽然表示是资源的不同形式，但表示本身也可以以各种形式传输：HTTP 消息帧（例如，HTTP/1.1 的 {{HTTPHeader("Transfer-Encoding")}}）、从*选定的表示*派生的特定的八位字节流（例如，{{HTTPHeader("Content-Range")}}）。
客户端指定它们希望在[内容协商](/zh-CN/docs/Web/HTTP/Content_negotiation)期间发送的格式（使用 `Accept-*` 标头），并且表示标头将实际收到的*选定的表示形式*传达给客户端。
@@ -17,8 +23,10 @@ slug: Glossary/Representation_header
## 参见
-- [RFC 9110, section 3.2: Representations](https://httpwg.org/specs/rfc9110.html#representations)
+- [RFC 9110，3.2 节：表示](https://httpwg.org/specs/rfc9110.html#representations)
- [所有 HTTP 标头列表](/zh-CN/docs/Web/HTTP/Headers)
-- {{Glossary("Payload header", "有效负荷标头（Payload header）")}}
-- {{glossary("Entity header", "实体标头（Entity header）")}}
-- {{HTTPHeader("Digest")}}/ {{HTTPHeader("Want-Digest")}}
+- {{Glossary("Payload header", "有效负载标头")}}
+- {{glossary("Entity header", "实体标头")}}
+- {{HTTPHeader("Repr-Digest")}}、{{HTTPHeader("Want-Repr-Digest")}}
+- {{HTTPHeader("Content-Digest")}}、{{HTTPHeader("Want-Content-Digest")}}
+- {{HTTPHeader("Digest")}} {{Deprecated_Inline}}、{{HTTPHeader("Want-Digest")}} {{Deprecated_Inline}}
diff --git a/files/zh-cn/glossary/request_header/index.md b/files/zh-cn/glossary/request_header/index.md
index 5aa8c77b93497c..db9ed8e50ca9db 100644
--- a/files/zh-cn/glossary/request_header/index.md
+++ b/files/zh-cn/glossary/request_header/index.md
@@ -1,15 +1,17 @@
---
-title: 请求标头（Request header）
+title: 请求标头
slug: Glossary/Request_header
+l10n:
+ sourceCommit: beb5d4126bd1e5c838d0fa0eea3e996eb0a9e0b9
---
{{GlossarySidebar}}
-**请求标头**是一种 {{glossary("header", "HTTP 标头")}}，它可在 HTTP 请求中使用，其提供有关请求上下文的信息，以便服务器可以定制响应。例如，{{HTTPHeader("Accept", "Accept-*")}} 标头表示响应允许的条件和首选的格式。其他标头可以提供身份验证凭据（例如 {{HTTPHeader("Authorization")}}），控制缓存，或者获取有关用户代理（user agent）或 referrer 的信息等。
+**请求标头**是一种 {{glossary("HTTP header", "HTTP 标头")}}，可在 HTTP 请求中用于提供有关请求上下文的信息，以便服务器可以定制响应。例如，{{HTTPHeader("Accept", "Accept-*")}} 标头表示响应允许的条件和首选的格式。其他标头可以提供身份验证凭据（例如 {{HTTPHeader("Authorization")}}），控制缓存，或者获取有关用户代理（user agent）或 referrer 的信息等。
-根据规范，并非所有可以出现在请求中的标头都称为请求标头。例如，{{HTTPHeader("Content-Type")}} 标头被成为{{glossary("representation header", "表示标头")}}。
+根据规范，并非所有可以出现在请求中的标头都称为*请求标头*。例如，{{HTTPHeader("Content-Type")}} 标头被成为{{glossary("representation header", "表示标头")}}。
-此外，[跨源资源共享（CORS）](/zh-CN/docs/Glossary/CORS)定义了一个叫做 {{glossary('simple header', 'simple header')}} 的集合，它是请求头集合的一个子集。如果某次请求是只包含 {{glossary('simple header', '简单标头')}} 的话，则被认为是简单请求，不会触发{{glossary("preflight request", "预检")}}请求。
+此外，[CORS](/zh-CN/docs/Glossary/CORS) 定义了一个叫做{{glossary('CORS-safelisted request header', '简单标头')}}的请求头集合的一个子集。这些请求头总是被认为是授权的，不会在{{glossary("preflight request", "预检请求")}}的响应中显式列出。
以下展示了 HTTP 消息在 {{HTTPMethod("GET")}} 请求之后的请求标头：
@@ -31,4 +33,4 @@ Cache-Control: max-age=0
## 参见
- [所有 HTTP 标头列表](/zh-CN/docs/Web/HTTP/Headers)
-- [RFC 9110, section 6.3: Header Fields](https://httpwg.org/specs/rfc9110.html#header.fields)
+- [RFC 9110，6.3 节：标头字段](https://httpwg.org/specs/rfc9110.html#header.fields)
diff --git a/files/zh-cn/glossary/resource_timing/index.md b/files/zh-cn/glossary/resource_timing/index.md
new file mode 100644
index 00000000000000..23fefcdb421785
--- /dev/null
+++ b/files/zh-cn/glossary/resource_timing/index.md
@@ -0,0 +1,15 @@
+---
+title: 资源计时
+slug: Glossary/Resource_Timing
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+---
+
+{{GlossarySidebar}}
+
+诊断性能问题需要资源级别的性能数据。[资源计时 API](/zh-CN/docs/Web/API/Performance_API/Resource_timing) 是一个能够在加载页面时获取的每个资源的时间信息的 JavaScript API。
+
+## 参见
+
+- [使用资源计时 API](/zh-CN/docs/Web/API/Performance_API/Resource_timing)
+- [服务器计时](https://www.w3.org/TR/server-timing/)
diff --git a/files/zh-cn/glossary/responsive_web_design/index.md b/files/zh-cn/glossary/responsive_web_design/index.md
new file mode 100644
index 00000000000000..56faaba64f78bd
--- /dev/null
+++ b/files/zh-cn/glossary/responsive_web_design/index.md
@@ -0,0 +1,15 @@
+---
+title: 响应式 Web 设计
+slug: Glossary/Responsive_web_design
+l10n:
+ sourceCommit: 6888996a81e3293cfa10590d74d8a47c221ad90f
+---
+
+{{GlossarySidebar}}
+
+**响应式 Web 设计**（**RWD**）是一个 Web 开发概念，其专注于使网站在所有个人计算设备（从台式机到移动设备）上都能以最佳方式显示和运行。
+
+## 参见
+
+- [渐进式 Web 应用程序](/zh-CN/docs/Web/Progressive_web_apps)
+- [响应式 Web 设计](https://docs.microsoft.com/archive/msdn-magazine/2011/november/html5-responsive-web-design)
diff --git a/files/zh-cn/glossary/rest/index.md b/files/zh-cn/glossary/rest/index.md
index 0e996fb61d67fb..0bfdd9ca06ace6 100644
--- a/files/zh-cn/glossary/rest/index.md
+++ b/files/zh-cn/glossary/rest/index.md
@@ -1,19 +1,21 @@
---
title: REST
slug: Glossary/REST
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**REST**（Representational State Transfer，表现层状态转换）是一组软件架构设计规范，可实现高效、可靠和可拓展的分布式系统。
+**REST**（表现层状态转换）是一组软件架构设计规范，可实现高效、可靠和可拓展的分布式系统。
-REST 的基本概念是资源（resource），例如文件能通过明确和标准的操作与格式，转换其状态与超文本的关系。通常在 {{Glossary("API","API's")}} 或服务能直接修改文件的类型，而非触发其他行为时，它们就称自己为 RESTful。
+REST 的基本思想是通过公认的、与语言无关的、可靠标准化的客户端/服务器交互传输资源（例如文档）。当服务遵循这些规范时，称其为 RESTful 服务。
-由于万维网 {{glossary("World Wide Web","Web")}} 背后的 {{Glossary("HTTP")}} 协议也能传输文件和超文本链接，同时又充当了标准，简易的 HTTP API 虽然有时不一定遵守所有的 RESTful 规范，但它们还是会被称为 RESTful API、RESTful 服务，或者直接叫 REST 服务。初学者可以先假设 REST API 代表一个能通过标准 web 库和工具调用的 HTTP 服务。
+通常将 HTTP API 称为 RESTful API、RESTful 服务或 REST 服务，尽管它们不一定遵循所有 REST 规范。初学者可以认为 REST API 意味着可以使用标准 Web 库和工具调用的 HTTP 服务。
## 参见
- [restapitutorial.com](https://www.restapitutorial.com/)
- [restcookbook.com](https://restcookbook.com/)
- 维基百科上的[表现层状态转换](https://zh.wikipedia.org/wiki/表现层状态转换)
-- [REST Architecture](https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html)
+- [REST 架构](https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html)
diff --git a/files/zh-cn/glossary/rgb/index.md b/files/zh-cn/glossary/rgb/index.md
new file mode 100644
index 00000000000000..078a6aacfb5b7f
--- /dev/null
+++ b/files/zh-cn/glossary/rgb/index.md
@@ -0,0 +1,30 @@
+---
+title: RGB
+slug: Glossary/RGB
+l10n:
+ sourceCommit: ceb303e16d56ac69c25ed2e72c258212714ab15a
+---
+
+{{GlossarySidebar}}
+
+_红绿蓝_（**RGB**）是一个用于表示颜色的模型，它将颜色表示为三个基本分量（或通道）的混合，即：_红色_、*绿色*和*蓝色*。该模型使用三个数字（通常在 0.0 到 1.0 之间，或在 0 到 255 之间）来描述颜色，各数字代表了决定最终颜色的三种基本颜色的不同强度（或贡献）。
+
+RGB 值本身没有意义。是颜色模型定义了三个分量如何在{{glossary("color space", "色彩空间")}}中相互作用以定义颜色。在图形上，三维网格或立方体中的一个点代表一种颜色。每个维度（或轴）对应于不同的通道。RGB 颜色模型是底层颜色空间的*立方体*或*笛卡尔*坐标系。
+
+
+
+在 Web 上，RGB 值的底层色彩空间是 _sRGB_（标准 RGB），每个 RGB 分量的值在 0 到 1 之间。
+
+需要注意，`sRGB` 是[几种 RGB 色彩空间](/zh-CN/docs/Glossary/Color_space#rgb_色彩空间)之一。其他 RGB 色彩空间，如 _Adobe RGB_ 色彩空间，可以表示比 _sRGB_ 色彩空间更广泛的颜色{{glossary("gamut", "色域")}}。_sRGB_ 和 _Adobe RGB_ 中的坐标是不同的。
+
+有许多方法可以描述颜色的 RGB 分量。在 {{Glossary("CSS")}} 中，它们可以用多种方式表示：使用[十六进制](/zh-CN/docs/Web/CSS/hex-color)表示法作为一个 24 位整数（例如，`#add8e6` 是浅蓝色）或使用 [`rgb()`](/zh-CN/docs/Web/CSS/color_value/rgb) 函数，其中包含三个百分比值或从 `0` 到 `255` 的数字（例如，`rgb(46 139 87)` 是绿色）。CSS 还支持 `srgb`、`srgb-linear`、`a98-rgb` 和 `prophoto-rgb` 色彩空间，用于 [`color()`](/zh-CN/docs/Web/CSS/color_value/color) 函数。
+
+RGB 不是唯一能表示 `sRGB` {{glossary("color space", "色彩空间")}}的颜色模型。像 [`HSL`](/zh-CN/docs/Web/CSS/color_value/hsl)（_色调—饱和度—亮度_）或 [`HWB`](/zh-CN/docs/Web/CSS/color_value/hwb)（_色调—白度—黑度_）颜色模型这样的柱坐标系也用于在 Web 上表示 `sRGB` 颜色。
+
+## 参见
+
+- [CSS 数据类型：`<color>`](/zh-CN/docs/Web/CSS/color_value)
+- [ColorAide：sRGB 色彩空间](https://facelessuser.github.io/coloraide/colors/srgb/)
+- 维基百科上的 [RGB 色彩模型](https://zh.wikipedia.org/wiki/三原色光模式)
+- 维基百科上的 [sRGB 色彩模型](https://zh.wikipedia.org/wiki/SRGB色彩空间)
+- 维基百科上的 [Adobe RGB 色彩模型](https://zh.wikipedia.org/wiki/Adobe_RGB色彩空间)
diff --git a/files/zh-cn/glossary/ril/index.md b/files/zh-cn/glossary/ril/index.md
new file mode 100644
index 00000000000000..41069a2546babb
--- /dev/null
+++ b/files/zh-cn/glossary/ril/index.md
@@ -0,0 +1,14 @@
+---
+title: RIL
+slug: Glossary/RIL
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+RIL（无线界面层）是一个用于在设备的软件和设备的电话、无线电或调制解调器硬件之间进行通信的移动操作系统组件。
+
+## 参见
+
+- 维基百科上的[无线界面层](https://zh.wikipedia.org/wiki/無線介面層)
diff --git a/files/zh-cn/glossary/rng/index.md b/files/zh-cn/glossary/rng/index.md
new file mode 100644
index 00000000000000..e527bdfd4f53ca
--- /dev/null
+++ b/files/zh-cn/glossary/rng/index.md
@@ -0,0 +1,25 @@
+---
+title: 随机数生成器
+slug: Glossary/RNG
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**PRNG**（伪随机数生成器）是一个以复杂、看似不可预测的模式输出数字的算法。真正的随机数（比如来自放射源）是完全不可预测的，而所有的算法都是可预测的，PRNG 在传入相同的起始参数或*种子*时返回相同的数字。
+
+PRNG 可以用于各种应用，比如游戏。
+
+密码学安全的 PRNG 是具有某些额外属性的 PRNG，使其适用于密码学。这些属性包括：
+
+- 对于攻击者（不知道种子的情况下）来说，预测其输出在计算上是不可行的
+- 如果攻击者能够计算出其当前状态，这不应使攻击者能够计算出先前发出的数字
+
+大多数 PRNG 都不是密码学安全的。
+
+## 参见
+
+- 维基百科上的[伪随机数生成器](https://zh.wikipedia.org/wiki/伪随机数生成器)
+- {{jsxref("Math.random()")}}，一个内置 JavaScript PRNG 函数。需要注意，这并不是一个密码学安全的 PRNG。
+- {{domxref("Crypto.getRandomValues()")}}：用于提供密码学安全的数字。
diff --git a/files/zh-cn/glossary/robots.txt/index.md b/files/zh-cn/glossary/robots.txt/index.md
new file mode 100644
index 00000000000000..184a22226c5035
--- /dev/null
+++ b/files/zh-cn/glossary/robots.txt/index.md
@@ -0,0 +1,19 @@
+---
+title: Robots.txt
+slug: Glossary/Robots.txt
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+Robots.txt 是一个通常放置在任何网站根目录下的文件。它决定了{{Glossary("crawler", "爬虫")}}是否被允许访问网站。
+
+例如，网站管理员可以禁止爬虫访问某个文件夹（以及其中包含的所有文件）或爬取特定文件，通常是为了防止这些文件被其他搜索引擎索引。
+
+## 参见
+
+- 维基百科上的 [Robots.txt](https://zh.wikipedia.org/wiki/Robots.txt)
+- <https://developers.google.com/search/reference/robots_txt>
+- 标准规范：[RFC 9309](https://www.rfc-editor.org/rfc/rfc9309.html)
+- <https://www.robotstxt.org/>
diff --git a/files/zh-cn/glossary/routers/index.md b/files/zh-cn/glossary/routers/index.md
new file mode 100644
index 00000000000000..5b605417cd7bea
--- /dev/null
+++ b/files/zh-cn/glossary/routers/index.md
@@ -0,0 +1,26 @@
+---
+title: 路由器
+slug: Glossary/Routers
+l10n:
+ sourceCommit: 4ece9c7cb7312506455e34bac94898ed0b6362d8
+---
+
+{{GlossarySidebar}}
+
+Web **路由器**有三种定义：
+
+1. 对于网络层，路由器是一种网络设备，用于决定将{{Glossary('Packet', '数据包')}}发送到何处。
+2. 对于应用层中的{{Glossary('SPA', '单页应用')}}，路由器是一个库，用于根据给定的 {{Glossary('URL')}} 决定呈现哪个网页。此中间件模块用于所有 URL 函数，因为这些函数会接收一个文件路径，然后渲染以打开下一个页面。
+3. 在服务层中实现 {{Glossary('API')}} 时，路由器是一个软件组件，用于解析请求并将请求定向或路由到程序中的各种处理器。路由器代码通常会接收处理器的响应，并将其返回给请求者。
+
+## 参见
+
+对于网络层上下文：
+
+- [路由器](https://zh.wikipedia.org/wiki/路由器)
+
+对于应用层中的单页应用，大多数流行的单页应用框架都有其路由库：
+
+- [Angular router](https://angular.io/guide/router)
+- [React router](https://reactrouter.com/)
+- [Vue router](https://router.vuejs.org)
diff --git a/files/zh-cn/glossary/rss/index.md b/files/zh-cn/glossary/rss/index.md
index 001b3bc3d90d07..5d3332105fa3ed 100644
--- a/files/zh-cn/glossary/rss/index.md
+++ b/files/zh-cn/glossary/rss/index.md
@@ -1,11 +1,13 @@
---
title: RSS
slug: Glossary/RSS
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**RSS**（简易信息聚合）指的是用于发布站点更新的数种 XML 文档格式。当你订阅一个网站的 RSS 摘要时，网站会将 RSS 信息和更新信息发送到一个称为资讯（feed）的 RSS 文档中，因此你无需手动查看所有喜爱的网站就可以获取这些网站的更新动态。
+**RSS**（简易信息聚合）指的是用于发布站点更新的数种 XML 文档格式。当你订阅一个网站的 RSS 摘要时，网站会将 RSS 信息和更新信息发送到一个称为*资讯*的 RSS 文档中，因此你无需手动查看所有喜爱的网站就可以获取这些网站的更新动态。
## 参见
diff --git a/files/zh-cn/glossary/rsync/index.md b/files/zh-cn/glossary/rsync/index.md
new file mode 100644
index 00000000000000..5b356504d88373
--- /dev/null
+++ b/files/zh-cn/glossary/rsync/index.md
@@ -0,0 +1,30 @@
+---
+title: Rsync
+slug: Glossary/Rsync
+l10n:
+ sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
+---
+
+{{GlossarySidebar}}
+
+[Rsync](https://rsync.samba.org/) 是一个开源文件同步工具，提供增量文件传输。它可以通过不安全和安全的传输方式（如 SSH）使用。它在大多数基于 Unix 的系统（如 macOS 和 Linux）和 Windows 上都可用。还有一些基于 GUI 的工具使用 rsync，例如 [Acrosync](https://acrosync.com/mac.html)。
+
+一段基础的命令如下：
+
+```bash
+rsync [-options] SOURCE user@x.x.x.x:DESTINATION
+```
+
+- `-options` 是一个破折号后跟一个或多个字母，例如 `-v` 用于显示详细的错误消息，`-b` 用于创建备份。请查看 [rsync 手册页](https://linux.die.net/man/1/rsync)（搜索“Options summary”）以获取完整的选项列表。
+- `SOURCE` 是要复制或同步的本地文件或目录的路径。
+- `user@` 是要将文件复制到的远程服务器上的用户的凭据。
+- `x.x.x.x` 是远程服务器的 IP 地址。
+- `DESTINATION` 是要将目录或文件复制到的位置的路径。
+
+你也可以使用 `-e` 选项通过 SSH 进行连接，如下所示：
+
+```bash
+rsync [-options] -e "ssh [SSH 相关信息]" SOURCE user@x.x.x.x:DESTINATION
+```
+
+互联网上还有很多示例，包括[官方网站](https://rsync.samba.org/examples.html) 和 rsync 的[维基百科条目](https://en.wikipedia.org/wiki/Rsync#Examples)。
diff --git a/files/zh-cn/glossary/rtp/index.md b/files/zh-cn/glossary/rtp/index.md
new file mode 100644
index 00000000000000..02401b7e3904d0
--- /dev/null
+++ b/files/zh-cn/glossary/rtp/index.md
@@ -0,0 +1,20 @@
+---
+title: RTP（实时传输协议）和 SRTP（安全 RTP）
+slug: Glossary/RTP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**实时传输协议**（**RTP**）是一种用于描述如何在实时情况下从一个端点传输各种媒体（音频、视频）到另一个端点的网络协议。RTP 适用于视频流应用、基于 {{Glossary("IP")}} 的电话应用（如 Skype）和会议技术。
+
+安全版本的 RTP，**安全 RTP**（**SRTP**），被用于 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API)，使用加密和认证来最小化拒绝服务攻击和安全漏洞的风险。
+
+RTP 很少单独使用；相反，它通常与其他协议（如 {{Glossary("RTSP")}} 和 {{Glossary("SDP")}}）一起使用。
+
+## 参见
+
+- [介绍实施传输协议](/zh-CN/docs/Web/API/WebRTC_API/Intro_to_RTP)
+- 维基百科上的 [RTP](https://zh.wikipedia.org/wiki/实时传输协议)
+- {{RFC(3550)}}（其中一份具体介绍 RTP 协议如何运作的文档）
diff --git a/files/zh-cn/glossary/rtsp/index.md b/files/zh-cn/glossary/rtsp/index.md
new file mode 100644
index 00000000000000..deb14ab5129d71
--- /dev/null
+++ b/files/zh-cn/glossary/rtsp/index.md
@@ -0,0 +1,15 @@
+---
+title: RTSP：实时流协议
+slug: Glossary/RTSP
+l10n:
+ sourceCommit: c64e08ff3cecdecae78748de1b94c845a2d7ae85
+---
+
+{{GlossarySidebar}}
+
+实时流协议（RTSP）是一种用于控制媒体流在{{glossary("server", "服务器")}}和{{glossary("client", "客户端")}}之间的传输方式的网络协议。简单来说，RTSP 是描述当你在播放视频时点击“暂停”/“播放”按钮时会发生什么的协议。如果你的计算机是遥控器，而流媒体服务器是电视，那么 RTSP 就是描述遥控器的指令如何影响电视的协议。
+
+## 参见
+
+- 维基百科上的 [RTSP](https://zh.wikipedia.org/wiki/即時串流協定)
+- [RFC 7826](https://datatracker.ietf.org/doc/html/rfc7826)（其中一份具体介绍 RTP 协议如何运作的文档）
diff --git a/files/zh-cn/glossary/ruby/index.md b/files/zh-cn/glossary/ruby/index.md
new file mode 100644
index 00000000000000..2e2fb24afbf8c5
--- /dev/null
+++ b/files/zh-cn/glossary/ruby/index.md
@@ -0,0 +1,18 @@
+---
+title: Ruby
+slug: Glossary/Ruby
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**Ruby** 是一种开源编程语言。在 {{glossary("world wide web","Web")}} 环境中，Ruby 通常与 _Ruby On Rails_（ROR）框架一起用于服务器端，以生成网站/应用。
+
+Ruby 还是一种用于在 HTML 文档中提供发音信息的东亚文本注释方法；请参阅 {{HTMLElement("ruby")}} 元素。
+
+## 参见
+
+- 维基百科上的 [Ruby](https://zh.wikipedia.org/wiki/Ruby)
+- [Ruby 官网](https://www.ruby-lang.org)
+- [Ruby On Rails 官网](https://rubyonrails.org/)
diff --git a/files/zh-cn/glossary/salt/index.md b/files/zh-cn/glossary/salt/index.md
new file mode 100644
index 00000000000000..85c8c039c45e9c
--- /dev/null
+++ b/files/zh-cn/glossary/salt/index.md
@@ -0,0 +1,26 @@
+---
+title: 盐
+slug: Glossary/Salt
+l10n:
+ sourceCommit: e63979cfb7866a20a546623e6cf736ccf9055f03
+---
+
+{{GlossarySidebar}}
+
+密码学中，**盐**是在密码被{{glossary("hash", "哈希")}}之前添加的随机数据。这使得攻击者无法从哈希值推导出密码，因为攻击者无法使用预先计算的密码和相应哈希的表来推导密码。
+
+密码不应以明文形式存储，因为攻击者可能会破解存储密码的数据库。通常，密码会被哈希，然后存储哈希的结果。如果哈希函数是密码学安全的，那么即使攻击者可以访问存储的哈希，也无法逆转这个函数。
+
+为了从哈希值推导出密码，攻击者可以在预先计算的表中查找与哈希对应的密码（也称为[彩虹表](https://zh.wikipedia.org/wiki/彩虹表)）：
+
+| 密码 | 哈希 |
+| -------- | ----------- |
+| pa55w0rd | 56965E2A... |
+| abcdef | BEF57EC7... |
+| letmein | 1C8BFE8F... |
+
+虽然这些表可能非常大，但这种攻击可能会成功，因为表查找是一种快速操作。
+
+在对密码进行哈希之前添加随机盐可以阻止这种攻击成功，因为哈希不是仅基于密码计算的，而是基于密码与盐的组合计算的。
+
+与密码不同，盐不需要保密：它可以与加盐和哈希的密码一起存储在服务器的数据库中。
diff --git a/files/zh-cn/glossary/same-origin_policy/index.md b/files/zh-cn/glossary/same-origin_policy/index.md
index 1b3659810d75bf..92e2cffb594298 100644
--- a/files/zh-cn/glossary/same-origin_policy/index.md
+++ b/files/zh-cn/glossary/same-origin_policy/index.md
@@ -1,8 +1,20 @@
---
-title: Same-origin policy
+title: 同源策略
slug: Glossary/Same-origin_policy
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-同源策略是一种重要的安全机制，用来限制来自某个域的文档或脚本与另一个域的资源的交互行为，能够隔离潜在的恶意文件，减少受攻击的可能性。
+[**同源策略**](/zh-CN/docs/Web/Security/Same-origin_policy)是一种关键的安全机制，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
+
+它有助于隔离潜在的恶意文档，减少可能的攻击向量。
+
+## 参见
+
+- [同源策略](/zh-CN/docs/Web/Security/Same-origin_policy)
+- [MDN Web 文档术语表](/zh-CN/docs/Glossary):
+
+ - {{Glossary("CORS")}}
+ - {{Glossary("origin", "源")}}
diff --git a/files/zh-cn/glossary/scm/index.md b/files/zh-cn/glossary/scm/index.md
new file mode 100644
index 00000000000000..7be573540c7d37
--- /dev/null
+++ b/files/zh-cn/glossary/scm/index.md
@@ -0,0 +1,16 @@
+---
+title: SCM
+slug: Glossary/SCM
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+SCM（源代码管理）是一种管理源代码的系统。通常它指的是使用软件来处理源文件的版本控制。程序员可以修改源代码文件而不用担心编辑掉有用的东西，因为 SCM 会跟踪源代码的更改情况以及谁做了更改。
+
+SCM 系统包括 CVS、SVN、GIT。
+
+## 参见
+
+- 维基百科上的[版本控制](https://zh.wikipedia.org/wiki/版本控制)
diff --git a/files/zh-cn/glossary/scope/index.md b/files/zh-cn/glossary/scope/index.md
index 698095421ad95f..db061a23ab03d7 100644
--- a/files/zh-cn/glossary/scope/index.md
+++ b/files/zh-cn/glossary/scope/index.md
@@ -1,17 +1,19 @@
---
-title: Scope（作用域）
+title: 作用域
slug: Glossary/Scope
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**作用域**是当前的执行上下文，{{glossary("value","值")}}和表达式在其中“可见”或可被访问。如果一个{{glossary("variable","变量")}}或表达式不在当前的作用域中，那么它是不可用的。作用域也可以堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。
+**作用域**是当前的执行上下文，在其中的{{glossary("value", "值")}}和表达式“可见”（可被访问）。如果一个{{glossary("variable", "变量")}}或表达式不在当前的作用域中，那么它是不可用的。作用域也可以堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。
JavaScript 的作用域分以下三种：
- 全局作用域：脚本模式运行所有代码的默认作用域
- 模块作用域：模块模式中运行代码的作用域
-- 函数作用域：由{{glossary("function","函数")}}创建的作用域
+- 函数作用域：由{{glossary("function", "函数")}}创建的作用域
此外，用 [`let`](/zh-CN/docs/Web/JavaScript/Reference/Statements/let) 或 [`const`](/zh-CN/docs/Web/JavaScript/Reference/Statements/const) 声明的变量属于额外的作用域：
@@ -21,8 +23,8 @@ JavaScript 的作用域分以下三种：
```js example-bad
function exampleFunction() {
- const x = "declared inside function"; // x 只能在 exampleFunction 函数中使用
- console.log("Inside function");
+ const x = "函数内定义"; // x 只能在 exampleFunction 函数中使用
+ console.log("在函数内");
console.log(x);
}
@@ -32,20 +34,20 @@ console.log(x); // 报错
但是，下面的代码是有效的，因为变量在函数外被声明，为全局变量：
```js example-good
-const x = "declared outside function";
+const x = "函数外定义";
exampleFunction();
function exampleFunction() {
- console.log("Inside function");
+ console.log("函数内");
console.log(x);
}
-console.log("Outside function");
+console.log("函数外");
console.log(x);
```
-块级作用域只对 `let` 和 `const` 声明有效，对 `var` 声明无效。
+块级作用域只对 `let` 和 `const` 声明有效，但是对 `var` 声明无效。
```js example-good
{
@@ -63,4 +65,4 @@ console.log(x); // ReferenceError: x is not defined
## 参见
-- 维基百科词条：[作用域](https://zh.wikipedia.org/wiki/作用域)
+- 维基百科上的[作用域](https://zh.wikipedia.org/wiki/作用域)
diff --git a/files/zh-cn/glossary/script-supporting_element/index.md b/files/zh-cn/glossary/script-supporting_element/index.md
new file mode 100644
index 00000000000000..27332f5e289a27
--- /dev/null
+++ b/files/zh-cn/glossary/script-supporting_element/index.md
@@ -0,0 +1,18 @@
+---
+title: 脚本支持元素
+slug: Glossary/Script-supporting_element
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+---
+
+{{GlossarySidebar}}
+
+在 {{Glossary("HTML")}} 文档中，**脚本支持元素**是那些不直接影响页面的外观或布局的元素；相反，它们要么是脚本，要么包含只有脚本才会使用的信息。
+
+这些元素可能很重要，但除非页面的脚本明确让它们这样做，否则它们不会影响显示的页面。
+
+只有两个脚本支持元素：{{HTMLElement("script")}} 和 {{HTMLElement("template")}}。
+
+## 参见
+
+[脚本支持元素](/zh-CN/docs/Web/HTML/Content_categories#script-supporting_elements)
diff --git a/files/zh-cn/glossary/scroll_boundary/index.md b/files/zh-cn/glossary/scroll_boundary/index.md
new file mode 100644
index 00000000000000..478d163522a84d
--- /dev/null
+++ b/files/zh-cn/glossary/scroll_boundary/index.md
@@ -0,0 +1,28 @@
+---
+title: 滚动边界
+slug: Glossary/Scroll_boundary
+l10n:
+ sourceCommit: fd4a5c3107826fe3689a0432ba56b3eba00a5f90
+---
+
+{{GlossarySidebar}}
+
+**滚动边界**是指滚动元素在特定方向上无法再滚动的点，无论是在顶部还是底部（或左侧/右侧，用于水平滚动）。通常这是[滚动口](/zh-CN/docs/Glossary/Scroll_container#滚动口)的边缘。
+
+当{{Glossary("Scroll_container", "滚动容器")}}的内容在滚动方向上不超过容器大小时，容器被认为始终处于其滚动边界。这是因为没有额外的内容可以滚动。如果内容被禁止滚动，例如当设置了 {{cssxref("overflow", "overflow: hidden")}} 时，该元素不是滚动容器，因此没有滚动边界。
+
+当用户滚动内容到达滚动视口的滚动边界时，可能会出现视觉效果，例如在移动设备上拉动页面时会出现弹跳效果或触发类似移动设备上的下拉刷新的功能性操作。这种默认浏览器行为称为**边界默认操作**。
+
+例如，在移动设备上，当页面已经在顶部时向下拖动页面会导致弹跳效果，有时会触发页面刷新。这种弹跳或刷新是边界默认操作。
+
+边界默认操作可以是本地的或非本地的。
+
+- **本地边界默认操作**是发生在特定滚动区域边界的操作，限制在该元素内。这种操作被认为是*本地*的，因为它不会影响任何祖先容器或页面的其余部分。
+- **非本地边界默认操作**是指到达滚动容器的滚动边界会对特定元素之外的内容产生影响。一个例子是{{Glossary("Scroll_chaining", "滚动链")}}，当到达一个元素的滚动边界时，会触发父元素（或祖先元素）的滚动，甚至可能触发页面范围的操作，例如导航。
+
+## 参见
+
+- {{CSSxRef("overscroll-behavior")}} CSS 属性
+- [CSS 溢出](/zh-CN/docs/Web/CSS/CSS_overflow)模块
+- [CSS 过度滚动行为](/zh-CN/docs/Web/CSS/CSS_overscroll_behavior)模块
+- [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap)模块
diff --git a/files/zh-cn/glossary/scroll_chaining/index.md b/files/zh-cn/glossary/scroll_chaining/index.md
new file mode 100644
index 00000000000000..ff91876af03fc1
--- /dev/null
+++ b/files/zh-cn/glossary/scroll_chaining/index.md
@@ -0,0 +1,21 @@
+---
+title: 滚动链
+slug: Glossary/Scroll_chaining
+l10n:
+ sourceCommit: fd4a5c3107826fe3689a0432ba56b3eba00a5f90
+---
+
+{{GlossarySidebar}}
+
+**滚动链**是指用户滚动超过滚动元素的{{Glossary("Scroll_boundary", "滚动边界")}}时，导致祖先元素上的滚动行为。
+
+当用户在可滚动元素（如 `<div>` 或 `<textarea>`）内滚动，并且滚动元素的[滚动口](/zh-CN/docs/Glossary/Scroll_container#滚动口)边界（顶部、底部、左侧或右侧）被触发时，可能会出现“链式效果”，即滚动操作会无缝传播到父元素。这种行为会在垂直和水平方向上创建连续的滚动体验。
+
+**滚动链**是滚动元素的顺序，其中滚动操作从一个元素传递到另一个元素。当内部元素滚动到其极限时，滚动会继续到其父元素，从而创建一系列滚动操作。滚动通常会递归到包含块。
+
+## 参见
+
+- {{CSSxRef("overscroll-behavior")}} CSS 属性
+- [CSS 溢出](/zh-CN/docs/Web/CSS/CSS_overflow)模块
+- [CSS 溢出表现](/zh-CN/docs/Web/CSS/CSS_overscroll_behavior)模块
+- [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap)模块
diff --git a/files/zh-cn/glossary/sctp/index.md b/files/zh-cn/glossary/sctp/index.md
new file mode 100644
index 00000000000000..2d7f0d246ed0a6
--- /dev/null
+++ b/files/zh-cn/glossary/sctp/index.md
@@ -0,0 +1,15 @@
+---
+title: SCTP
+slug: Glossary/SCTP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**SCTP**（流控制传输{{glossary("Protocol", "协议")}}）是一项用于传输协议的 {{glossary("IETF")}} 标准，它能够可靠地按顺序传输消息，同时提供拥塞控制、多宿及其他特性，以提高连接的可靠性和稳定性。它用于通过互联网发送传统电话呼叫，但也用于 {{glossary("WebRTC")}} 数据。
+
+## 参见
+
+- {{RFC(4960, "流控制传输协议")}}
+- 维基百科上的[流控制传输协议](https://zh.wikipedia.org/wiki/流控制传输协议)
diff --git a/files/zh-cn/glossary/sdk/index.md b/files/zh-cn/glossary/sdk/index.md
new file mode 100644
index 00000000000000..d5b51b4ea65762
--- /dev/null
+++ b/files/zh-cn/glossary/sdk/index.md
@@ -0,0 +1,20 @@
+---
+title: SDK（软件开发工具包）
+slug: Glossary/SDK
+l10n:
+ sourceCommit: d1e0c2b95f6f77e775dcf532b5b6ddc30dbd5129
+---
+
+{{GlossarySidebar}}
+
+**SDK**（**软件开发工具包**）是一组集成的工具，开发人员可以使用这些工具为特定框架、操作系统或其他平台创建软件。SDK 可能包括：
+
+- 编辑器
+- 编译器
+- 调试器
+- 模拟器或仿真器，如果目标平台与用于创建程序的平台不同。
+- 用于帮助测试和打包程序以进行分发的工具。
+
+SDK 通常由软件平台的所有者提供，以支持针对该平台的开发人员。例如，Google 为编写 Android 应用程序的开发人员提供了 [Android SDK](https://developer.android.com/studio)。
+
+在许多方面，现代 Web 浏览器内置的{{Glossary("developer tools", "开发者工具")}}为 Web 开发人员提供了类似的功能。
diff --git a/files/zh-cn/glossary/sdp/index.md b/files/zh-cn/glossary/sdp/index.md
index e5a874b4637cc4..9ed17a15170ae1 100644
--- a/files/zh-cn/glossary/sdp/index.md
+++ b/files/zh-cn/glossary/sdp/index.md
@@ -1,15 +1,17 @@
---
title: SDP
slug: Glossary/SDP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**SDP** (Session Description {{glossary("Protocol")}}) 是一个描述{{Glossary("P2P","peer-to-peer")}} 连接的标准。SDP 包含音视频的：编解码 ({{Glossary("codec")}}),源地址，和时间信息。
+**SDP**（会话描述{{glossary("Protocol", "协议")}}）是一个描述 {{Glossary("P2P")}} 连接的标准，包含音视频的{{Glossary("codec", "编解码器")}}、源地址和时间信息。
下面是一个典型的 SDP 信息示例：
-```
+```plain
v=0
o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
s=
@@ -23,9 +25,9 @@ m=video 53000 RTP/AVP 32
a=rtpmap:32 MPV/90000
```
-SDP 协议从不会被单独使用，而是依靠 {{Glossary("RTP")}} 和{{Glossary("RTSP")}}等协议.SDP 也作为{{Glossary("WebRTC")}}的组件之一，用于描述一个 session 会话。
+SDP 协议从不会被单独使用，而依赖于 {{Glossary("RTP")}} 和 {{Glossary("RTSP")}} 等协议。SDP 也作为 {{Glossary("WebRTC")}} 的组件之一，用于描述一个会话。
## 参见
-- [WebRTC protocols](/zh-CN/docs/Web/API/WebRTC_API/Protocols)
+- [WebRTC 协议](/zh-CN/docs/Web/API/WebRTC_API/Protocols)
- 维基百科上的[会话描述协议](https://zh.wikipedia.org/wiki/会话描述协议)
diff --git a/files/zh-cn/glossary/search_engine/index.md b/files/zh-cn/glossary/search_engine/index.md
new file mode 100644
index 00000000000000..6029e3e52a5b98
--- /dev/null
+++ b/files/zh-cn/glossary/search_engine/index.md
@@ -0,0 +1,24 @@
+---
+title: 搜索引擎
+slug: Glossary/Search_engine
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+搜索引擎是一种从 {{Glossary("World Wide Web", "Web")}} 收集信息，并将这些信息呈现给正在寻找特定信息的用户的软件系统。
+
+搜索引擎执行以下过程：
+
+- **Web 爬虫**：通过在网页上导航{{Glossary("Hyperlink", "超链接")}}来搜索网站，既可以在网站内部搜索，也可以从一个网站搜索到另一个网站。网站所有者可以通过在名为 `robots.txt` 的文件中定义“机器人排除”信息，排除搜索引擎的 _Web 爬虫_（或*蜘蛛*）访问网站的某些区域。
+- **索引**：将关键字和其他信息与已经爬取的特定网页相关联，让用户可以尽快找到相关页面。
+- **搜索**：根据由关键字和其他命令组成的查询，查找相关网页。搜索引擎找到与查询匹配的页面的 URL，并根据其相关性对其进行排名。然后按照排名顺序向用户呈现结果。
+
+最流行的搜索引擎是 Google。其他顶级搜索引擎包括 Yahoo!、Bing、百度和 AOL。
+
+## 参见
+
+- 维基百科上的 [Web 搜索引擎](https://zh.wikipedia.org/wiki/网络搜索引擎)
+- Webopedia 上的[搜索引擎](https://www.webopedia.com/definitions/search-engine/)
+- How Stuff Works 上的[因特网搜索引擎是怎么运作的](https://computer.howstuffworks.com/internet/basics/search-engine.htm)
diff --git a/files/zh-cn/glossary/second-level_domain/index.md b/files/zh-cn/glossary/second-level_domain/index.md
new file mode 100644
index 00000000000000..2a0fed848a3823
--- /dev/null
+++ b/files/zh-cn/glossary/second-level_domain/index.md
@@ -0,0 +1,26 @@
+---
+title: 二级域
+slug: Glossary/Second-level_Domain
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+二级域（{{Glossary("SLD")}}）是位于顶级域（{{Glossary("TLD")}}）之前的域名的一部分。
+
+例如，在 `mozilla.org` 中，`mozilla` 是二级域，`org` 是顶级域。
+
+域名不仅限于顶级域和二级域。可以创建额外的子域，以提供关于服务器的各种功能的额外信息，或者为同一域名下的区域进行划分。例如，`www` 是一个常用的子域，用于指示该域名指向一个 Web 服务器。
+
+另一个例子，在 `developer.mozilla.org` 中，`developer` 子域用于指定该子域包含 Mozilla 网站的开发人员部分。
+
+## 参见
+
+- 维基百科上的 [SLD](https://en.wikipedia.org/wiki/二级域)
+- [术语](/zh-CN/docs/Glossary)
+
+ - {{Glossary("DNS")}}
+ - {{Glossary("Domain", "域")}}
+ - {{Glossary("Domain name", "域名")}}
+ - {{Glossary("TLD", "顶级域")}}
diff --git a/files/zh-cn/glossary/secure_context/index.md b/files/zh-cn/glossary/secure_context/index.md
new file mode 100644
index 00000000000000..201cf6ed7a7893
--- /dev/null
+++ b/files/zh-cn/glossary/secure_context/index.md
@@ -0,0 +1,12 @@
+---
+title: 安全上下文
+slug: Glossary/Secure_Context
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**安全上下文**是指满足一定的身份验证和保密标准的 `Window` 或 `Worker`。许多 Web API 和特性只能在安全上下文中访问，从而减少恶意代码的滥用机会。
+
+有关更多信息，参阅 [Web > 安全 > 安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts)。
diff --git a/files/zh-cn/glossary/self-executing_anonymous_function/index.md b/files/zh-cn/glossary/self-executing_anonymous_function/index.md
index 38570b09c4be39..d40779dc2a39fc 100644
--- a/files/zh-cn/glossary/self-executing_anonymous_function/index.md
+++ b/files/zh-cn/glossary/self-executing_anonymous_function/index.md
@@ -1,10 +1,12 @@
---
title: 自执行匿名函数
slug: Glossary/Self-Executing_Anonymous_Function
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-一个 {{glossary("JavaScript")}} {{glossary("function", "函数")}}在定义后立即执行。也被熟知为 {{glossary("IIFE")}}（立即调用函数表达式）。
+自执行匿名函数是在定义后立即执行的 {{glossary("JavaScript")}} {{glossary("function", "函数")}}，也被称作{{glossary("IIFE", "立即调用函数表达式")}}（IIFE）。
请浏览上面 IIFE 解释页链接获取更多信息。
diff --git a/files/zh-cn/glossary/semantics/index.md b/files/zh-cn/glossary/semantics/index.md
index 5e49f227585dd0..73ae15603a1887 100644
--- a/files/zh-cn/glossary/semantics/index.md
+++ b/files/zh-cn/glossary/semantics/index.md
@@ -1,15 +1,17 @@
---
-title: Semantics（语义）
+title: 语义
slug: Glossary/Semantics
+l10n:
+ sourceCommit: 8578969fc0a4321e2bb10c7efeb2db77deec93c3
---
{{GlossarySidebar}}
-在编程中，**语义**指的是一段代码的含义 — 例如 "运行这行 JavaScript 代码会产生怎样的影响？", 或者 "这个 HTML 的元素有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么？"。）
+程序设计中，**语义**指的是一段代码的含义。例如，“运行这行 JavaScript 代码会产生怎样的影响？”、“这个 HTML 的元素有什么作用，扮演了什么样的角色”（而不只是“它看上去像是什么？”）
## JavaScript 中的语义
-JavaScript 中，考虑一个函数，该函数接受一个字符串参数，然后返回一个以该字符串为文本内容的{{htmlelement("li")}}元素。如果该函数调用是`build('Peach')`，你会需要去看代码才能理解该函数做了什么吗，如果是`createLiWithContent('Peach')`呢？
+JavaScript 中，考虑一个函数，该函数接受一个字符串参数，然后返回一个以该字符串为文本内容的 {{htmlelement("li")}} 元素。如果该函数调用是 `build('Peach')`，你会需要去看代码才能理解该函数做了什么吗？`createLiWithContent('Peach')` 呢？
## CSS 中的语义
@@ -17,25 +19,23 @@ CSS 中，考虑给一个列表设置样式，`li` 元素代表不同类型的
## HTML 中的语义
-HTML 中，例如，{{htmlelement("h1")}} 元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题功能“的角色 (或含义) 。
+HTML 中，例如，{{htmlelement("h1")}} 元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题”的角色（或含义） 。
```html
-<h1>This is a top level heading</h1>
+<h1>这是顶级标题</h1>
```
-默认情况下，绝大多数浏览器的 [user agent stylesheet](/zh-CN/docs/Web/CSS/Cascade#User-agent_stylesheets) 将会赋予一个 {{htmlelement("h1")}} 元素很大的字号尺寸从而使它看上去更像是一个标题（虽然你可以把它格式化为任何你想要的样式），但是更重要的是它的语义会被在很多地方以不同的方式被使用到，例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序（参见{{ glossary ("SEO")}}），而且屏幕阅读器会使用它来帮助视障用户更好的使用这个页面。
+默认情况下，绝大多数浏览器的[用户代理样式表](/zh-CN/docs/Web/CSS/Cascade#用户代理样式表)会赋予 {{htmlelement("h1")}} 元素很大的字号尺寸从而让它看上去更像是一个标题（虽然你可以把它格式化为任何你想要的样式）。
-另一方面，你可以通过样式（CSS）来让任何的元素*看上去*像是一个最高级别的标题，就像下面所展示的方法一样：
+另一方面，你可以让任何的元素*看上去*像是最高级别的标题，就像下面所展示的一样：
```html
-<span style="font-size: 32px; margin: 21px 0;"
- >Is this a top level heading?</span
->
+<span style="font-size: 32px; margin: 21px 0;">这不是一个顶级标题！</span>
```
-这将会把这个元素渲染得像是一个最高级别的标题，但是它的值没有对应到最“最高级别标题”这一语义，所以在此之上，它不会获得更多额外的描述（只是一个普通“span”元素而不是“最高级别标题”这一语义）。所以在恰当的需求下使用恰当的 HTML 元素是一个不错的主意。
+这会让它看上去像是一个顶级标题，但是它没有语义价值，所以它不会得到上面描述的额外的好处。因此，使用正确的 HTML 元素来做正确的工作是一个好主意。
-HTML 应该编写为表示将要填充的数据，而不是基于其默认的演示样式。演示（应该是什么样子），是 [CSS](/zh-CN/docs/Web/CSS) 的唯一责任。
+HTML 应该编写为表示将要填充的*数据*，而不是基于其默认的演示样式。演示（应该是什么样子），是 [CSS](/zh-CN/docs/Web/CSS) 的唯一责任。
写语义标记的一些好处如下：
@@ -49,7 +49,7 @@ HTML 应该编写为表示将要填充的数据，而不是基于其默认的演
## 语义化元素
-这是一些语义化的元素（[source](https://www.w3schools.com/html/html5_semantic_elements.asp)）。
+这里是大约 100 个语义化[元素](/zh-CN/docs/Web/HTML/Element)中的一些：
- {{htmlelement("article")}}
- {{htmlelement("aside")}}
@@ -67,9 +67,9 @@ HTML 应该编写为表示将要填充的数据，而不是基于其默认的演
## 参见
-- [HTML element reference](/zh-CN/docs/Web/HTML/Element#inline_text_semantics) on MDN
-- [Using HTML sections and outlines](/zh-CN/docs/Web/HTML/Element/Heading_Elements#usage_notes) on MDN
-- [The meaning of semantics in computer science](https://en.wikipedia.org/wiki/Semantics#Computer_science) on Wikipedia
-- [Glossary](/zh-CN/docs/Glossary)
+- MDN 上的 [HTML 元素参考](/zh-CN/docs/Web/HTML/Element#inline_text_semantics)
+- MDN 上的[使用 HTML 章节和大纲](/zh-CN/docs/Web/HTML/Element/Heading_Elements#使用要点)
+- 维基百科上的[计算机科学中语义的意义](https://en.wikipedia.org/wiki/Semantics#Computer_science)
+- [术语](/zh-CN/docs/Glossary)
- {{Glossary("SEO")}}
diff --git a/files/zh-cn/glossary/seo/index.md b/files/zh-cn/glossary/seo/index.md
index bcf0aa48b758a1..596ed8ea76ce1f 100644
--- a/files/zh-cn/glossary/seo/index.md
+++ b/files/zh-cn/glossary/seo/index.md
@@ -1,26 +1,28 @@
---
title: SEO
slug: Glossary/SEO
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**SEO**（搜索引擎优化）是一种让网站在搜索引擎结果中更加清晰，也帮助我们将搜索结果更靠前
+**SEO**（搜索引擎优化）是一种让网站在搜索引擎结果中更加清晰，也帮助我们将搜索结果更靠前的过程。
-搜索引擎{{Glossary("Crawler", "抓取")}}网页，跟随页面之间的链接，并索引找到的内容。搜索时，搜索引擎会显示索引内容。爬行者遵守规则。如果你在为网站进行搜索引擎优化时密切关注这些规则，则会为网站提供最好的机会，以便在首批结果中显示，增加流量和可能的收入（用于电子商务和广告）。
+搜索引擎{{Glossary("Crawler", "爬取")}}网页，跟随页面之间的链接，并索引找到的内容。搜索时，搜索引擎会显示索引内容。爬行者遵守规则。如果你在为网站进行搜索引擎优化时密切关注这些规则，则会为网站提供最好的机会，以便在首批结果中显示，增加流量和可能的收入（用于电子商务和广告）。
搜索引擎为 SEO 提供了一些指导，但大型搜索引擎将结果排名保持为商业秘密。SEO 结合了官方搜索引擎指南，经验知识和科学论文或专利的理论知识。
SEO 方法分为三大类：
- 技术
- - : 使用语义标记内容{{Glossary("HTML")}}. 浏览网站时，抓取工具应该只找到你要编入索引的内容。
+ - : 使用语义化的 {{Glossary("HTML")}} 标记内容。浏览网站时，爬取工具应该只找到你要编入索引的内容。
- 撰稿
- - : 使用访问者的词汇编写内容。使用文本和图像，以便抓取工具可以理解主题。
+ - : 使用访问者的词汇编写内容。使用文本和图像，以便爬取工具可以理解主题。
- 声望
- : 当其他已建立的站点链接到你的站点时，你获得最多流量。
## 参见
-- [SEO](https://zh.wikipedia.org/wiki/SEO) on 维基百科
-- [Google Webmaster Central](https://www.google.com/webmasters/)
+- 维基百科上的 [SEO](https://zh.wikipedia.org/wiki/搜尋引擎最佳化)
+- [Google 搜索中心](https://developers.google.com/search/docs)
diff --git a/files/zh-cn/glossary/serialization/index.md b/files/zh-cn/glossary/serialization/index.md
index 416f50978a4637..2b06c34668cfc0 100644
--- a/files/zh-cn/glossary/serialization/index.md
+++ b/files/zh-cn/glossary/serialization/index.md
@@ -1,16 +1,18 @@
---
-title: Serialization（序列化）
+title: 序列化
slug: Glossary/Serialization
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
序列化是将一个对象或数据结构转换为适合网络传输或存储的格式（如数组缓冲区或文件格式）的过程。
-例如在 {{Glossary("JavaScript")}} 中，你可以通过调用 {{jsxref("JSON.stringify()")}} {{Glossary("function", "函数")}}将某个值序列化为 {{Glossary("JSON")}} 格式的{{Glossary("string", "字符串")}}。
+在 {{Glossary("JavaScript")}} 中，你可以通过调用 {{jsxref("JSON.stringify()")}} {{Glossary("function", "函数")}}将某个值序列化为 {{Glossary("JSON")}} 格式的{{Glossary("string", "字符串")}}。
{{Glossary("CSS")}} 值可以通过调用 {{domxref("CSSStyleDeclaration.getPropertyValue()")}} 函数来序列化。
## 参见
-- 维基百科的[序列化](https://zh.wikipedia.org/zh-cn/序列化)词条
+- 维基百科的[序列化](https://zh.wikipedia.org/zh-cn/序列化)
diff --git a/files/zh-cn/glossary/server/index.md b/files/zh-cn/glossary/server/index.md
index 085b184fb87cbb..f4bbc84e11bd0d 100644
--- a/files/zh-cn/glossary/server/index.md
+++ b/files/zh-cn/glossary/server/index.md
@@ -1,15 +1,17 @@
---
title: 服务器
slug: Glossary/Server
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-服务器是为用户（通常称为客户端）提供服务的软件或硬件。硬件而言的服务器是互联网上的共享计算机，通常性能强劲且位于数据中心。软件而言的服务器（一般是运行在硬件服务器上）是一种向客户端程序或向{{glossary("UI","用户界面")}}提供服务的程序。
+服务器是为用户（通常称为客户端）提供服务的软件或硬件。硬件服务器是一台架设在网络中的共享计算机（通常性能强劲，并架设在数据中心中）。软件服务器（通常在硬件服务器上运行）是为客户端提供服务或为客户提供{{glossary("UI", "用户界面")}}的程序。
-我们一般在局域网或广域网（如互联网）提供服务。传统上，客户端程序和服务器程序通过 {{glossary("API")}} 传递信息进行连接，这种信息使用{{glossary("Protocol","协议")}}编码。
+服务通常而言是通过局域网或广域网（如互联网）提供的。传统上，客户端程序和服务器程序通过 {{glossary("API")}} 传递信息进行连接，这种信息使用{{glossary("Protocol", "协议")}}编码。
-举个例子：
+例如：
- 连接到互联网的 Web 服务器向你的浏览器发送一个 {{glossary("HTML")}} 文件，这样你就可以浏览页面。
- 用于文件、域名、邮件、打印机和传真机的局域网服务器。
@@ -18,4 +20,4 @@ slug: Glossary/Server
## 参见
- [服务器介绍](/zh-CN/docs/Learn/Common_questions/What_is_a_web_server)
-- 维基百科上的 [服务器](https://zh.wikipedia.org/wiki/服务器)
+- 维基百科上的[服务器](https://zh.wikipedia.org/wiki/服务器)
diff --git a/files/zh-cn/glossary/server_timing/index.md b/files/zh-cn/glossary/server_timing/index.md
new file mode 100644
index 00000000000000..9056053e9405cd
--- /dev/null
+++ b/files/zh-cn/glossary/server_timing/index.md
@@ -0,0 +1,15 @@
+---
+title: 服务器计时
+slug: Glossary/Server_Timing
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+[服务器计时规范](https://www.w3.org/TR/server-timing/)允许服务器将请求—响应周期中的性能指标传递给用户代理，并利用 JavaScript 接口允许应用程序收集、处理和响应这些指标，以优化应用程序交付。
+
+## 参见
+
+- <https://www.w3.org/TR/server-timing/>
+- [资源计时](https://www.w3.org/TR/resource-timing/)
diff --git a/files/zh-cn/glossary/session_hijacking/index.md b/files/zh-cn/glossary/session_hijacking/index.md
new file mode 100644
index 00000000000000..05f2171786b309
--- /dev/null
+++ b/files/zh-cn/glossary/session_hijacking/index.md
@@ -0,0 +1,44 @@
+---
+title: 会话劫持
+slug: Glossary/Session_Hijacking
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**会话劫持**（Session hijacking）是指攻击者接管两台计算机之间的有效会话。攻击者窃取有效的会话 ID 以便侵入系统并窃取数据。
+
+大多数身份验证仅在 {{glossary("TCP")}} 会话开始时进行。在 TCP 会话劫持中，攻击者通过在会话中间接管两台机器之间的 TCP 会话来获得访问权限。
+
+
+
+### 会话劫持发生的原因
+
+- 无效会话 ID 不会锁定帐户
+- 弱会话 ID 生成算法
+- 不安全的处理
+- 无限会话过期时间
+- 短会话 ID
+- 明文传输
+
+### 会话劫持过程
+
+1. **嗅探**，即执行中间人（MITM）攻击，将自己置于受害者和服务器之间。
+2. **监视**在服务器和用户之间流动的数据包。
+3. **中断**受害者机器的连接。
+4. **接管**会话。
+5. 使用受害者的会话 ID **注入**新数据包到服务器。
+
+### 防止会话劫持
+
+- 使用 SSH（安全外壳）创建安全通信通道
+- 通过 HTTPS 连接传递身份验证 cookie
+- 实现注销功能，以便用户结束会话
+- 在成功登录后生成会话 ID
+- 在用户和 Web 服务器之间传递加密数据
+- 使用字符串或长随机数作为会话密钥
+
+## 参见
+
+- 维基百科上的[会话劫持](https://zh.wikipedia.org/wiki/会话劫持)
diff --git a/files/zh-cn/glossary/sgml/index.md b/files/zh-cn/glossary/sgml/index.md
new file mode 100644
index 00000000000000..22d9e1c42d6392
--- /dev/null
+++ b/files/zh-cn/glossary/sgml/index.md
@@ -0,0 +1,17 @@
+---
+title: SGML
+slug: Glossary/SGML
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+_标准通用标记语言_（**SGML**）是一种用于定义声明性标记语言的 {{Glossary("ISO")}} 规范。
+
+在 Web 中，{{Glossary("HTML")}} 4、{{Glossary("XHTML")}} 和 {{Glossary("XML")}} 是流行的基于 SGML 的语言。值得注意的是，自第五版起，HTML 不再基于 SGML，而有自己的解析规则。
+
+## 参见
+
+- 维基百科上的 [SGML](https://zh.wikipedia.org/wiki/SGML)
+- [介绍 SGML](https://isgmlug.org/)
diff --git a/files/zh-cn/glossary/shadow_tree/index.md b/files/zh-cn/glossary/shadow_tree/index.md
new file mode 100644
index 00000000000000..fe27a9489059bf
--- /dev/null
+++ b/files/zh-cn/glossary/shadow_tree/index.md
@@ -0,0 +1,25 @@
+---
+title: 影子树
+slug: Glossary/Shadow_tree
+l10n:
+ sourceCommit: cebbd9095ac12557c55157355181672027fffc14
+---
+
+{{GlossarySidebar}}
+
+**影子树**是一组隐藏的 {{Glossary("DOM")}} 节点，其最顶层的[节点](/zh-CN/docs/Glossary/Node/DOM)是一个**影子根**。影子根是**影子 DOM** 的最顶层节点，不是常规文档的 DOM 树的一部分。
+
+影子根通过一个特定的 DOM 节点连接到另一个节点树，这个节点被称为其**宿主**。这个宿主可能是另一个影子树的一部分，也可能是常规 DOM 树的一部分。影子根的宿主的节点树有时被称为**常规树**（light tree）。
+
+影子树的隐藏 DOM 节点通常不受影子树外部应用的影响，反之亦然。**影子边界**是影子 DOM 结束且常规 DOM 开始的地方，可以穿越（但只能有意为之）：
+
+- 从外部脚本访问影子树节点需要使用特殊的[影子 DOM API](/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM)。
+- 从外部样式化影子树可以通过 [CSS 域](/zh-CN/docs/Web/CSS/CSS_scoping)和 [CSS 影子部件](/zh-CN/docs/Web/CSS/CSS_shadow_parts)来实现。
+
+## 参见
+
+- [使用影子 DOM](/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM)
+- {{domxref("Element.shadowRoot")}}、{{domxref("Element.attachShadow()")}}
+- {{domxref("ShadowRoot")}}
+- {{HTMLElement("slot")}}
+- {{Glossary("accessibility_tree", "无障碍树")}}
diff --git a/files/zh-cn/glossary/shallow_copy/index.md b/files/zh-cn/glossary/shallow_copy/index.md
index 7b431bf5dc13ae..bab58966c01e4f 100644
--- a/files/zh-cn/glossary/shallow_copy/index.md
+++ b/files/zh-cn/glossary/shallow_copy/index.md
@@ -1,54 +1,59 @@
---
title: 浅拷贝
slug: Glossary/Shallow_copy
+l10n:
+ sourceCommit: 3114504a9746114aa5501656b76198e85d7af901
---
{{GlossarySidebar}}
-{{MDNSidebar}}
+对象的**浅拷贝**是属性与拷贝的源对象属性共享相同的[引用](/zh-CN/docs/Glossary/Object_reference)（指向相同的底层值）的副本。因此，当你更改源对象或副本时，也可能导致另一个对象发生更改。与之相比，在[深拷贝](/zh-CN/docs/Glossary/Deep_copy)中，源对象和副本是完全独立的。
-对象的**浅拷贝**是其属性与拷贝源对象的属性共享相同引用（指向相同的底层值）的副本。因此，当你更改源或副本时，也可能导致其他对象也发生更改——也就是说，你可能会无意中对源或副本造成意料之外的更改。这种行为与[深拷贝](/zh-CN/docs/Glossary/Deep_copy)的行为形成对比，在深拷贝中，源和副本是完全独立的。
+形式化地，如果两个对象 `o1` 和 `o2` 是浅拷贝，那么：
-对于浅拷贝，有选择地更改对象中现有元素的共享属性的值与给现有元素赋一个全新的值是不同的，理解这一点很重要。
+1. 它们不是同一个对象（`o1 !== o2`）。
+2. `o1` 和 `o2` 的属性具有相同的名称且顺序相同。
+3. 它们的属性值相等。
+4. 它们的原型链相等。
-例如，如果在一个数组对象名为 `copy` 的浅拷贝中，`copy[0]` 元素的值是 `{"list":["butter"，"flour"]}`，然后执行 `copy[0].List = ["oil"，"flour"]`，那么源对象中的相应元素也将发生变化——因为你有选择地更改了源对象和浅拷贝共享的对象的属性。
+参见[结构等价的定义](/zh-CN/docs/Glossary/Deep_copy)。
-然而，如果你做的是 `copy[0] = {"list":["oil"，"flour"]}`，那么源对象中的对应元素将**不会改变**——因为在这种情况下，你不仅仅是有选择地改变了浅拷贝与源对象共享的现有数组元素的属性；相反，你实际上是在浅拷贝中分配了一个全新的值给 `copy[0]` 数组元素。
+所有属性都是原始值的对象的副本同时符合深拷贝和浅拷贝的定义。然而，讨论这种副本的深度并无意义，因为它没有嵌套属性，而我们通常在修改嵌套属性的上下文中讨论深拷贝。
-在 JavaScript 中，所有标准的内置对象复制操作（[展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)、[`Array.prototype.concat()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)、[`Array.prototype.slice()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)、[`Array.from()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)、[`Object.assign()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) 和 [`Object.create()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create)）创建的是浅拷贝而不是深拷贝。
+对于浅拷贝，只有顶层属性被复制，而不是嵌套对象的值。因此：
-## 示例
+- 对副本的顶层属性的重新赋值不会影响源对象。
+- 对副本的嵌套对象属性的重新赋值会影响源对象。
-考虑以下示例，其中创建了一个 `ingredients_list` 数组对象，然后通过复制 `ingredients_list` 对象创建了一个 `ingredients_list_copy` 对象。
+在 JavaScript 中，所有标准内置对象复制操作（[扩展语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)、[`Array.prototype.concat()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)、[`Array.prototype.slice()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)、[`Array.from()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 和 [`Object.assign()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)）都创建浅拷贝，而不是深拷贝。
+
+考虑以下示例，其中创建了一个 `ingredientsList` 数组对象，然后通过复制该 `ingredientsList` 对象创建了一个 `ingredientsListCopy` 对象。
```js
-let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];
+const ingredientsList = ["面条", { list: ["鸡蛋", "面粉", "水"] }];
-let ingredients_list_copy = Array.from(ingredients_list);
-console.log(JSON.stringify(ingredients_list_copy));
-// ["noodles",{"list":["eggs","flour","water"]}]
+const ingredientsListCopy = Array.from(ingredientsList);
+console.log(ingredientsListCopy);
+// ["面条",{"list":["鸡蛋","面粉","水"]}]
```
-改变 `ingredients_list_copy` 中 `list` 属性的值也将导致 `ingredients_list` 源对象中的 `list` 属性发生变化。
+对嵌套属性的重新赋值将在两个对象中可见。
```js
-ingredients_list_copy[1].list = ["rice flour", "water"];
-console.log(ingredients_list[1].list);
-// Array [ "rice flour", "water" ]
-console.log(JSON.stringify(ingredients_list));
-// ["noodles",{"list":["rice flour","water"]}]
+ingredientsListCopy[1].list = ["粘米粉", "水"];
+console.log(ingredientsList[1].list);
+// Array [ "粘米粉", "水" ]
```
-为 `ingredients_list_copy` 中的第一个元素赋值，不会导致 `ingredients_list` 源对象中的第一个元素发生任何变化。
+对顶层属性的重新赋值（在这种情况下是 `0` 索引）只会在更改的对象中可见。
```js
-ingredients_list_copy[0] = "rice noodles";
-console.log(ingredients_list[0]);
-// noodles
-console.log(JSON.stringify(ingredients_list_copy));
-// ["rice noodles",{"list":["rice flour","water"]}]
-console.log(JSON.stringify(ingredients_list));
-// ["noodles",{"list":["rice flour","water"]}]
+ingredientsListCopy[0] = "米线";
+console.log(ingredientsList[0]); // 面条
+console.log(JSON.stringify(ingredientsListCopy));
+// ["米线",{"list":["粘米粉","水"]}]
+console.log(JSON.stringify(ingredientsList));
+// ["面条",{"list":["粘米粉","水"]}]
```
## 参见
diff --git a/files/zh-cn/glossary/signature/function/index.md b/files/zh-cn/glossary/signature/function/index.md
index 789e989736e83c..de107b820b37c7 100644
--- a/files/zh-cn/glossary/signature/function/index.md
+++ b/files/zh-cn/glossary/signature/function/index.md
@@ -1,47 +1,47 @@
---
-title: Signature (functions)（函数签名）
+title: 签名（函数）
slug: Glossary/Signature/Function
---
{{GlossarySidebar}}
-一个**函数签名 (**或*类型*签名，或*方法*签名**)** 定义了 {{Glossary("Function", "函数")}} 或 {{Glossary("Method", "方法")}} 的输入与输出。
+**函数签名**（*类型*签名，或*方法*签名）定义了{{Glossary("Function", "函数")}}或{{Glossary("Method", "方法")}}的输入与输出。
一个签名可以包括：
-- {{Glossary("Parameter", "参数")}} 及参数的 {{Glossary("Type", "类型")}}
-- 一个返回值及其类型
-- 可能会抛出或传回的 {{Glossary("Exception", "异常")}}
-- 有关 {{Glossary("OOP", "面向对象")}} 程序中方法可用性的信息 (例如关键字 `public`、`static` 或 `prototype)`。
+- {{Glossary("Parameter", "参数")}}及参数的{{Glossary("Type", "类型")}}
+- 返回值及其类型
+- 可能会抛出或传回的{{Glossary("Exception", "异常")}}
+- 有关{{Glossary("OOP", "面向对象")}}程序中方法可用性的信息（例如关键字 `public`、`static` 或 `prototype`）。
## 深入
### JavaScript 中的签名
-{{Glossary("JavaScript")}} 是一种*松散类型* 或 *动态*语言。这意味着你不必提前声明变量的类型。处理程序时，将自动确定类型。JavaScript 中的签名仍然可以为你提供有关该方法的一些信息：
+{{Glossary("JavaScript")}} 是一种*松散类型*（_动态_）语言。这意味着你不必提前声明变量的类型。处理程序时，将自动确定类型。JavaScript 中的签名仍然可以为你提供有关该方法的一些信息：
```js
MyObject.prototype.myFunction(value);
```
-- 该方法是安装在一个名为 `MyObject` 的 {{Glossary("object", "对象")}}上。
-- 该方法安装在 `MyObject` 的原型上 (因此它是一个{{Glossary("instance method", "实例方法")}})，而不是一个 {{Glossary("static method", "静态方法/类方法")}} 。
+- 该方法安装在一个名为 `MyObject` 的{{Glossary("object", "对象")}}上。
+- 该方法安装在 `MyObject` 的原型（`prototype`）上（因此它是一个{{Glossary("Method", "实例方法")}}，而不是一个{{Glossary("static method", "静态方法")}}）。
- 该方法的名称是 `myFunction`。
- 该方法接受一个叫 `value` 的参数，且没有进一步定义。
### Java 中的签名
-在 {{Glossary("Java")}} 中，签名用于识别虚拟机代码级别的方法和类。你必须在代码中声明变量的类型才能运行 Java 代码。Java 是*严格类型* 的，将在编译时检查所有参数是否正确。
+在 {{Glossary("Java")}} 中，签名用于识别虚拟机代码级别的方法和类。你必须在代码中声明变量的类型才能运行 Java 代码。Java 是*严格类型*的，将在编译时检查所有参数是否正确。
```java
public static void main(String[] args)
```
-- `public` 关键字是一个访问修饰符，指示任何对象都可以调用此方法。
-- `static` 关键字指示此方法是一个类方法，而不是一个实例方法。
-- `void` 关键字表指示此方法没有返回值。
+- `public` 关键字是一个访问修饰符，表明任何对象都可以调用此方法。
+- `static` 关键字表明此方法是一个类方法，而不是一个实例方法。
+- `void` 关键字表明此方法没有返回值。
- 该方法的名称为 `main`。
-- 该方法接受一个类型为 String Array 的参数。它的名是 `args`。
+- 该方法接受一个类型为字符串数组的参数。它的名称为 `args`。
## 参见
diff --git a/files/zh-cn/glossary/signature/security/index.md b/files/zh-cn/glossary/signature/security/index.md
index e05eeeba3aa07e..c0bb9fa9c228ad 100644
--- a/files/zh-cn/glossary/signature/security/index.md
+++ b/files/zh-cn/glossary/signature/security/index.md
@@ -1,22 +1,24 @@
---
title: 签名（安全）
slug: Glossary/Signature/Security
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**签名**或*数字签名*是 {{glossary("protocol","协议")}}，表明消息是真实的。
+**签名**（_数字签名_）是一种证明消息真实性的{{glossary("protocol","协议")}}。
-从给定消息的{{glossary("hash")}}，**签名过程**首先使用实体的私有{{glossary("key")}}生成链接到签名实体的数字签名。
+从给定消息的{{glossary("hash", "哈希")}}，**签名过程**首先使用实体的私有{{glossary("key", "密钥")}}生成链接到签名实体的数字签名。
-收到消息后的**验证过程**
+收到消息后的**验证过程**：
-- _验证发件人_ _-_ 使用发件人的公钥来{{glossary("decryption","解码")}}签名并恢复只能用发件人的私钥创建的哈希
-- _检查消息完整性 -_ 将哈希与接收到的文档中新计算的哈希进行比较（如果文档被篡改，两个哈希将不同）
+- _验证发件人_——使用发件人的公钥来{{glossary("decryption", "解密")}}签名并恢复只能用发件人的私钥创建的哈希
+- _检查消息完整性_——将哈希与接收到的文档中新计算的哈希进行比较（如果文档被篡改，两个哈希将会是不同的）
如果私钥被泄密或收件人被欺骗地给出错误的公钥，系统就会失败。
## 参见
- 维基百科上的[数字签名](https://zh.wikipedia.org/wiki/數位簽章)
-- See {{glossary("digest")}}, {{glossary("encryption")}}
+- 参见 {{glossary("digest")}}、{{glossary("encryption")}}
diff --git a/files/zh-cn/glossary/simd/index.md b/files/zh-cn/glossary/simd/index.md
new file mode 100644
index 00000000000000..b0b1f5d9561c1d
--- /dev/null
+++ b/files/zh-cn/glossary/simd/index.md
@@ -0,0 +1,19 @@
+---
+title: SIMD
+slug: Glossary/SIMD
+l10n:
+ sourceCommit: c64e08ff3cecdecae78748de1b94c845a2d7ae85
+---
+
+{{GlossarySidebar}}
+
+**单指令流多数据流**（SIMD，读作“sim-dee”）是一种[计算机架构的分类](https://zh.wikipedia.org/wiki/費林分類法)，允许对多个数据点执行相同的操作，实现数据级并行性，从而获得性能提升——例如，用于 3D 图形和视频处理、物理模拟或密码学等领域。
+
+参见 {{Glossary("SISD")}}——指令和数据集均无并行性的顺序架构。
+
+## 参见
+
+- 维基百科上的[单指令流多数据流](https://zh.wikipedia.org/wiki/单指令流多数据流)
+- [术语表](/zh-CN/docs/Glossary)
+
+ - {{Glossary("SISD")}}
diff --git a/files/zh-cn/glossary/sisd/index.md b/files/zh-cn/glossary/sisd/index.md
new file mode 100644
index 00000000000000..537433b9246a9a
--- /dev/null
+++ b/files/zh-cn/glossary/sisd/index.md
@@ -0,0 +1,16 @@
+---
+title: SISD
+slug: Glossary/SISD
+l10n:
+ sourceCommit: 60798c7f7cdb86f1c1808a4416386bbfcc794649
+---
+
+{{GlossarySidebar}}
+
+**单指令流单数据流**（SISD）是一种[计算机架构的分类](https://zh.wikipedia.org/wiki/費林分類法)。在 SISD 架构中，单个处理器执行单个指令，并在内存中操作单个数据点。
+
+参见 {{Glossary("SIMD")}}——允许对多个数据点执行相同操作的并行架构。
+
+## 参见
+
+- 维基百科上的 [SISD](https://zh.wikipedia.org/wiki/單指令流單數據流)
diff --git a/files/zh-cn/glossary/site_map/index.md b/files/zh-cn/glossary/site_map/index.md
new file mode 100644
index 00000000000000..39727dcfaff24e
--- /dev/null
+++ b/files/zh-cn/glossary/site_map/index.md
@@ -0,0 +1,12 @@
+---
+title: 站点地图
+slug: Glossary/Site_map
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**站点地图**或**网站地图**是网站页面的列表。
+
+结构化的站点页面列表有助于[搜索引擎优化](/zh-CN/docs/Glossary/SEO)，为网页爬虫（如搜索引擎）提供了一个可以跟踪的链接。站点地图还通过提供站点内容的概览，帮助用户进行站点导航。
diff --git a/files/zh-cn/glossary/sld/index.md b/files/zh-cn/glossary/sld/index.md
new file mode 100644
index 00000000000000..80801ab932a75d
--- /dev/null
+++ b/files/zh-cn/glossary/sld/index.md
@@ -0,0 +1,12 @@
+---
+title: SLD
+slug: Glossary/SLD
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+SLD（[二级域](/zh-CN/docs/Glossary/Second-level_Domain)）是位于*顶级域*（{{Glossary("TLD")}}）之前的域名的一部分。例如，在 `mozilla.org` 中，SLD 是 `mozilla`，TLD 是 `org`。
+
+有关更多信息，参见[二级域](/zh-CN/docs/Glossary/Second-level_Domain)。
diff --git a/files/zh-cn/glossary/sloppy_mode/index.md b/files/zh-cn/glossary/sloppy_mode/index.md
index 98df968f1b7962..465840b8fd0689 100644
--- a/files/zh-cn/glossary/sloppy_mode/index.md
+++ b/files/zh-cn/glossary/sloppy_mode/index.md
@@ -1,16 +1,16 @@
---
title: 正常模式
slug: Glossary/Sloppy_mode
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-因为翻译原因，正常模式也被翻译为——马虎模式/稀松模式/懒散模式
+{{Glossary("ECMAScript")}} 5 及更高版本允许脚本选择进入新的[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，其会以多种方式改变 JavaScript 的语义，以提高其弹性，并使在出现问题时更容易理解发生了什么。
-{{Glossary("ECMAScript")}} 5 以及其后续的版本可以选择性的使用一种新模式——严格模式 ([strict mode](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode))，这种严格模式在多个方面改变了 JavaScript 的语义，从而使得当出现问题时我们更好的理解到底发生了什么。
-
-常见的，非严格模式——平时我们会称之为正常模式 (**sloppy mode)，**这并不是一个官方说法，但是你会经常见到如上的一些说法，其意义就是指代非严格模式，即正常模式。
+JavaScript 的正常、非严格模式有时被称为**正常模式**（sloppy mode）。这不是一个官方的称呼，但如果你花时间编写严格的 JavaScript 代码，你可能会遇到这个术语。
## 参见
-- "[Strict Mode](http://speakingjs.com/es5/ch07.html#strict_mode)"，第七章 ("JavaScript Syntax")，《Speaking _JavaScript》_
+- [“严格模式”](http://speakingjs.com/es5/ch07.html#strict_mode)，《Speaking _JavaScript_》的第七章（“JavaScript 语法”）
diff --git a/files/zh-cn/glossary/slug/index.md b/files/zh-cn/glossary/slug/index.md
new file mode 100644
index 00000000000000..a479ab84677eb2
--- /dev/null
+++ b/files/zh-cn/glossary/slug/index.md
@@ -0,0 +1,16 @@
+---
+title: 别名
+slug: Glossary/Slug
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+别名（slug）是网址的唯一标识部分，通常位于 URL 的末尾。在 MDN 的上下文中，它是在“_\<locale>/docs/_”之后的 URL 部分。
+
+当在父文档下创建新文档时，别名也可能是最终的部分；例如，本页面的别名是 `Glossary/Slug`。
+
+## 参见
+
+- [挑选标题和别名](/zh-CN/docs/MDN/Writing_guidelines/Writing_style_guide#slugs)
diff --git a/files/zh-cn/glossary/smtp/index.md b/files/zh-cn/glossary/smtp/index.md
index 5bb4d8e903f94f..4454b537047682 100644
--- a/files/zh-cn/glossary/smtp/index.md
+++ b/files/zh-cn/glossary/smtp/index.md
@@ -1,23 +1,22 @@
---
title: SMTP
slug: Glossary/SMTP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**SMTP**（Simple Mail Transfer Protocol，简单邮件传输协议）是用于发送的邮件的[协议](/zh-CN/docs/Glossary/Protocol)。类似于[POP3](/zh-CN/docs/Glossary/POP)和[NNTP](/zh-CN/docs/Glossary/NNTP)，它是一个[状态机](/zh-CN/docs/Glossary/State_machine)驱动的协议
+**SMTP**（简单邮件传输协议）是用于发送的邮件的{{glossary("protocol", "协议")}}。与{{glossary("POP", "邮局协议")}}和{{glossary("NNTP", "网络新闻传输协议")}}一样，它是一个{{Glossary("state machine", "状态机")}}驱动的协议。
-该协议相对简单。最复杂的部分在于添加支持不同的验证机制（[GSSAPI](https://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface)， [CRAM-MD5](https://en.wikipedia.org/wiki/CRAM-MD5)，[NTLM](https://en.wikipedia.org/wiki/NTLM)，MSN，AUTH LOGIN，AUTH PLAIN 等），处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。
+该协议相对简单。最复杂的部分在于添加对不同的验证机制（[GSSAPI](https://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface)、[CRAM-MD5](https://en.wikipedia.org/wiki/CRAM-MD5)、[NTLM](https://en.wikipedia.org/wiki/NTLM)、MSN、AUTH LOGIN、AUTH PLAIN 等）的支持、处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。
## 参见
+- 维基百科上的 [SMTP](https://zh.wikipedia.org/wiki/SMTP)
- [术语表](/zh-CN/docs/Glossary)
- - [NNTP](/zh-CN/docs/Glossary/NNTP)
- - [POP3](/zh-CN/docs/Glossary/POP)
- - [协议](/zh-CN/docs/Glossary/Protocol)
- - [状态机](/zh-CN/docs/Glossary/State_machine)
-
-- 维基百科
-
- - [SMTP](https://zh.wikipedia.org/wiki/SMTP)
+ - {{glossary("NNTP", "网络新闻传输协议")}}
+ - {{glossary("POP", "邮局协议")}}
+ - {{glossary("protocol", "协议")}}
+ - {{Glossary("state machine", "状态机")}}
diff --git a/files/zh-cn/glossary/snake_case/index.md b/files/zh-cn/glossary/snake_case/index.md
new file mode 100644
index 00000000000000..b232bdbc984c20
--- /dev/null
+++ b/files/zh-cn/glossary/snake_case/index.md
@@ -0,0 +1,22 @@
+---
+title: 蛇形命名法
+slug: Glossary/Snake_case
+l10n:
+ sourceCommit: 6aa664dc5ccb5edf0897f99ad5feb59325dff831
+---
+
+{{GlossarySidebar}}
+
+**蛇形命名法**是一种不使用空格的短语书写方式，其中空格被下划线 `_` 替换，单词通常全部小写。通常将其写为“snake_case”，以提醒读者其外观。
+
+蛇形命名法通常用作变量命名约定。以下名称使用蛇形命名法：`left_shift`、`bitwise_invert`、`matrix_transpose`。
+
+请注意，蛇形命名法不包含大写字母。有时，常量以全大写形式编写，例如 JavaScript 的 {{jsxref("Number.MAX_SAFE_INTEGER")}}。这通常不被视为蛇形命名法。相反，这有时被称为*大写蛇形命名法*。
+
+蛇形命名法是 Python、Rust 和其他各种语言中最流行的约定。
+
+## 参见
+
+- [驼峰命名法](/zh-CN/docs/Glossary/Camel_case)
+- [烤串命名法](/zh-CN/docs/Glossary/Kebab_case)
+- [typescript-eslint 规则：`naming-convention`](https://typescript-eslint.io/rules/naming-convention/)
diff --git a/files/zh-cn/glossary/snap_positions/index.md b/files/zh-cn/glossary/snap_positions/index.md
new file mode 100644
index 00000000000000..c911b08be5bb1b
--- /dev/null
+++ b/files/zh-cn/glossary/snap_positions/index.md
@@ -0,0 +1,12 @@
+---
+title: 吸附位置
+slug: Glossary/Snap_positions
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+---
+
+{{GlossarySidebar}}
+
+吸附位置是滚动操作完成后[滚动口](/zh-CN/docs/Glossary/Scroll_container)停止移动的点。设置吸附位置可以创建一个浏览内容的滚动体验，而不需要将内容拖动到视图中。
+
+吸附位置设置在[滚动容器](/zh-CN/docs/Glossary/Scroll_container)上。参见 [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap)属性。
diff --git a/files/zh-cn/glossary/soap/index.md b/files/zh-cn/glossary/soap/index.md
new file mode 100644
index 00000000000000..35167c34ef552b
--- /dev/null
+++ b/files/zh-cn/glossary/soap/index.md
@@ -0,0 +1,15 @@
+---
+title: SOAP
+slug: Glossary/SOAP
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**SOAP**（简单对象访问协议）是一种以 XML 格式传输数据的{{glossary('protocol', '协议')}}。
+
+## 参见
+
+- 维基百科上的 [SOAP](https://zh.wikipedia.org/wiki/简单对象访问协议)
+- [规范](https://www.w3.org/TR/soap12-part1/)
diff --git a/files/zh-cn/glossary/spa/index.md b/files/zh-cn/glossary/spa/index.md
index 2cd646503b58b8..68af1571a92c96 100644
--- a/files/zh-cn/glossary/spa/index.md
+++ b/files/zh-cn/glossary/spa/index.md
@@ -1,17 +1,19 @@
---
title: SPA（单页应用）
slug: Glossary/SPA
+l10n:
+ sourceCommit: e72890bafe775a38620def9a74beda8cf9c47411
---
{{GlossarySidebar}}
-SPA（Single-page application，单页应用）是只加载一个单独网页的 web 应用实现，当需要显示不同的内容时，它通过 JavaScript API（例如 {{domxref("XMLHttpRequest")}} 和 [Fetch](/zh-CN/docs/Web/API/Fetch_API)）更新主体内容。
+SPA（单页应用，Single-page application）是只加载一个单独网页的 Web 应用的实现。当需要显示不同的内容时，它通过 JavaScript API（例如 {{domxref("XMLHttpRequest")}} 和 [Fetch](/zh-CN/docs/Web/API/Fetch_API)）更新主体内容。
-这使得用户在访问网站时无需加载新的页面，可以获得性能提升和动态的体验，但会相应地丧失诸如 SEO（搜索引擎优化）的优势，同时需要更多精力维护状态、实现导航以及做一些有意义的性能监控。
+SPA 让用户在访问网站时无需加载新的页面，从而获得性能提升和动态的体验，但也会相应地丧失诸如 SEO（搜索引擎优化）的优势，同时需要更多精力维护状态、实现导航以及做一些有意义的性能监控。
## 参见
-- [单页应用](https://zh.wikipedia.org/wiki/单页应用)（维基百科词条）
+- 维基百科上的[单页应用](https://zh.wikipedia.org/wiki/单页应用)
- [理解客户端 JavaScript 框架](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)
- [术语表](/zh-CN/docs/Glossary)
diff --git a/files/zh-cn/glossary/specification/index.md b/files/zh-cn/glossary/specification/index.md
new file mode 100644
index 00000000000000..0fb7eb2cf26955
--- /dev/null
+++ b/files/zh-cn/glossary/specification/index.md
@@ -0,0 +1,14 @@
+---
+title: 规范
+slug: Glossary/Specification
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**规范**是一份详细说明产品在交付之前必须包含的功能或属性的文档。在描述 Web 的上下文中，术语“规范”（通常缩写为“spec”）通常指的是描述构成完整开放 Web 技术集的语言、技术或 {{Glossary("API")}} 的文档。
+
+## 参见
+
+- 维基百科上的[规范](<https://zh.wikipedia.org/wiki/规范_(文档)>)
diff --git a/files/zh-cn/glossary/speculative_parsing/index.md b/files/zh-cn/glossary/speculative_parsing/index.md
index 1f533b04aa4a59..51b8388ac9c195 100644
--- a/files/zh-cn/glossary/speculative_parsing/index.md
+++ b/files/zh-cn/glossary/speculative_parsing/index.md
@@ -1,27 +1,24 @@
---
-title: 对页面预解析进行优化
+title: 推测解析
slug: Glossary/Speculative_parsing
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-在传统的浏览器中，HTML 解析器运行于主线程之中，并且在遇到 `</script>` 标签后会被阻塞，直到脚本从网络中被获取和执行。Firefox 4 和后续的版本支持从主线程中分离的预解析技术。当脚本在获取和执行的过程中，预解析技术能提前解析 HTML 文档。在 Firefox 3.5 和 3.6 中，HTML 解析器能够在文档流中预先加载脚本、层叠样式表和图片。然而，在 Firefox 4 和后续的版本中 HTML 解析器也预先运行 HTML 树构建算法。这一举措的优点是当预解析成功后，就没有必要再重新解析已经扫描过并且成功下载的脚本，层叠样式表和图片；缺点就是当预解析失败之后，有很多工作需要去做。
+传统上，浏览器的 HTML 解析器运行于主线程之中，并且在遇到 `</script>` 标签后会被阻塞，直到脚本从网络中被获取和执行。Firefox 4 和后续的版本支持从主线程中分离的推测解析技术。在下载和执行脚本时，它会提前进行解析。HTML 解析器会对在数据流中提前找到的脚本、样式表和图片启动推测加载，并推测运行 HTML 树构建算法。这样做的好处是，当推测成功时，就无需重新解析已扫描过脚本、样式表和图像的传入文件部分。缺点是，当推测失败时，会损失更多的工作。
-这篇文档旨在帮助你避免预解析失败和页面加载变慢。
+这篇文档旨在帮助你避免推测失败和页面加载变慢。
-## 使预加载成功
-
-让脚本、层叠样式表和图片预加载成功的规则只有一条：
-
-- 如果你使用 `<base>` 元素重载页面的基 URI，将这个元素放置到文档的非脚本部分。不要通过 `document.write()` 或者 `document.createElement()` 添加。
+要想成功加载链接脚本、样式表和图片，请避免 {{domxref('document.write')}}。如果你使用 `<base>` 元素重载页面的基 URI，将这个元素放置到文档的非脚本部分。不要通过 `document.write()` 或者 {{domxref('document.createElement')}} 添加。
## 避免树构建器的输出丢失
-当 `document.write()` 改变了文档树的状态时，树构建器的预构建过程会失败。例如，当所有被 `document.write()` 插入的内容被解析之后 `</script>` 标签后的预处理状态不再持有。然而，只有不寻常地使用 `document.write()` 才会产生问题。这些事情需要避免：
+当 `document.write()` 改变了文档树的状态，以至于当 `document.write()` 插入的所有内容都被解析后，`</script>` 标记后的推测状态不再保持时，推测树生成失败。然而，只有不寻常地使用 `document.write()` 才会产生问题。这些事情需要避免：
- 不要写不对称的文档树。`<script>document.write("<div>");</script>` 很糟糕。`<script>document.write("<div></div>");</script>` 则是可行的。
-- 不要写未完成的标识。 `<script>document.write("<div></div");</script>` 很糟糕。
-- 不要以回车结束内容。 `<script>document.write("Hello World!\r");</script>` 很糟糕。 `<script>document.write("Hello World!\n");</script>` 则是可行的。
-- 注意即使对称的标签也可能导致文档的不对称。比如：`head` 元素中的`<script>document.write("<div></div>");</script>` i 会被解析成 `<script>document.write("</head><body><div></div>");</script>` 因次文档是不对称的。
-- 不要仅格式化部分表格。 `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>` 很糟糕。然而， `<script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script>` 则是可行的。
-- TODO: 在其他格式化元素中使用 document.write。
+- 不要写未完成的标识。`<script>document.write("<div></div");</script>` 很糟糕。
+- 不要以回车结束内容。`<script>document.write("Hello World!\r");</script>` 很糟糕。`<script>document.write("Hello World!\n");</script>` 则是可行的。
+- 需要注意的是，对称的标签也可能导致文档的不对称。比如：`head` 元素中的 `<script>document.write("<div></div>");</script>` 会被解析成 `<script>document.write("</head><body><div></div>");</script>`，因此文档是不对称的。
+- 不要仅格式化部分表格。`<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>` 很糟糕。
diff --git a/files/zh-cn/glossary/speed_index/index.md b/files/zh-cn/glossary/speed_index/index.md
new file mode 100644
index 00000000000000..4e5d35ad94cc26
--- /dev/null
+++ b/files/zh-cn/glossary/speed_index/index.md
@@ -0,0 +1,22 @@
+---
+title: 速度指数
+slug: Glossary/Speed_index
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**速度指数**（SI）页面加载性能指标用于衡量页面可见内容的加载速度。速度指数取决于视口的大小，以毫秒为单位表示：时间越短，得分越高。
+
+速度指数是为了解决其他里程碑和指标的问题，提供真实用户体验的度量。速度指数已经在几个常见的审核中实现，包括 [WebPageTest](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/metrics/SpeedIndex.md) 和 [Lighthouse](https://github.com/paulirish/speedline)。
+
+速度指数的计算方式是：在页面可视内容完全加载之前，每隔 100 毫秒计算一次页面可视内容加载完成的百分比。指数的总分则是同样间隔内未完全显示的屏幕百分比之和。
+
+_显示了页面加载事件之前的首屏内容如何加载和由速度指数测量所得的图表_：
+
+
+
+## 参见
+
+- [了解 Web 性能](/zh-CN/docs/Learn/Performance)
diff --git a/files/zh-cn/glossary/sql/index.md b/files/zh-cn/glossary/sql/index.md
index 2fe7547512f254..bac416963504e5 100644
--- a/files/zh-cn/glossary/sql/index.md
+++ b/files/zh-cn/glossary/sql/index.md
@@ -1,11 +1,13 @@
---
title: SQL
slug: Glossary/SQL
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-**SQL（结构化查询语言）**是一个被设计用于基于表格的数据库进行更新、检索、计算数据等操作的描述性的计算机语言。
+**SQL**（结构化查询语言）是一个被设计用于基于表格的数据库进行更新、检索、计算数据等操作的描述性的计算机语言。
## 参见
diff --git a/files/zh-cn/glossary/sql_injection/index.md b/files/zh-cn/glossary/sql_injection/index.md
index 56b580fa261e7e..2a25c70180cadc 100644
--- a/files/zh-cn/glossary/sql_injection/index.md
+++ b/files/zh-cn/glossary/sql_injection/index.md
@@ -1,15 +1,17 @@
---
title: SQL 注入
slug: Glossary/SQL_Injection
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
---
{{GlossarySidebar}}
-SQL 注入（SQL Injection）利用了未能验证用户输入的 Web 应用程序。黑客可以通过 Web 应用程序传递恶意 SQL 命令，以便由后端数据库执行。
+SQL 注入利用了未能验证用户输入的 Web 应用程序。黑客可以通过 Web 应用程序传递恶意 SQL 命令，以便由后端数据库执行。
SQL 注入可以获得对数据库的未经授权的访问，或直接从数据库检索信息。许多数据泄露事件都是由于 SQL 注入造成的。
-[](https://cdn.acunetix.com/wp_content/uploads/2010/09/sql_inj_xss.gif)
+[](https://cdn.acunetix.com/wp_content/uploads/2010/09/sql_inj_xss.gif)
## 如何实现
@@ -21,7 +23,7 @@ SQL 注入可以获得对数据库的未经授权的访问，或直接从数据
"SELECT Count(*) FROM Users WHERE Username=' " + txt.User.Text+" ' AND Password=' "+ txt.Password.Text+" ' ";
```
-假定用户输入用户名为 admin，密码为 passwd123，在点击登录按钮后，会运行这样的 SQL 查询：
+假定用户输入用户名“admin”，密码“passwd123”，在点击登录按钮后，会运行这样的 SQL 查询：
```sql
"SELECT Count(*) FROM Users WHERE Username=' admin ' AND Password=' passwd123 ' ";
@@ -47,7 +49,7 @@ SQL 注入可以获得对数据库的未经授权的访问，或直接从数据
Password=' anything 'or'1'='1 '
```
-密码不是“anything”，因此 password=anything 的结果是 FALSE，但 '1'='1' 是一个恒真语句，因此返回 TRUE 值。最后，由于 OR 运算符的作用，条件部分的值（FALSE OR TRUE）为 TRUE，所以成功绕过了认证。仅仅由于一个简单的字符串（“魔法字符串”），整个数据库就被破坏了。
+密码不是“anything”，因此 password=anything 的结果是 FALSE，但 '1'='1' 是一个恒为真的语句，因此返回 TRUE 值。最后，由于 OR 运算符的作用，条件部分的值（FALSE OR TRUE）为 TRUE，所以成功绕过了认证。仅仅由于一个简单的字符串（“魔法字符串”），整个数据库就被破坏了。
## 如何防御
@@ -65,5 +67,5 @@ $id = $_GET['id']
## 参见
-- 维基百科上的 [SQL 注入](https://zh.wikipedia.org/zh-cn/SQL注入)词条
+- 维基百科上的 [SQL 注入](https://zh.wikipedia.org/zh-cn/SQL注入)
- OWASP（开放 Web 应用安全项目）上的 [SQL 注入解释](https://owasp.org/www-community/attacks/SQL_Injection)
diff --git a/files/zh-cn/glossary/sri/index.md b/files/zh-cn/glossary/sri/index.md
new file mode 100644
index 00000000000000..3f259ea275581c
--- /dev/null
+++ b/files/zh-cn/glossary/sri/index.md
@@ -0,0 +1,14 @@
+---
+title: SRI
+slug: Glossary/SRI
+l10n:
+ sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**子资源完整性**（Subresource Integrity，SRI）安全特性使浏览器能够验证它们获取的文件（比如来自 {{Glossary("CDN")}} 的文件）是否未经意外篡改。这是通过允许你提供一个获取的文件必须匹配的密码学哈希来运作的。
+
+## 参见
+
+- [子资源完整性](/zh-CN/docs/Web/Security/Subresource_Integrity)
diff --git a/files/zh-cn/glossary/stacking_context/index.md b/files/zh-cn/glossary/stacking_context/index.md
new file mode 100644
index 00000000000000..47a067fceb1200
--- /dev/null
+++ b/files/zh-cn/glossary/stacking_context/index.md
@@ -0,0 +1,14 @@
+---
+title: 层叠上下文
+slug: Glossary/Stacking_context
+l10n:
+ sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+---
+
+{{GlossarySidebar}}
+
+**层叠上下文**指的是网页上的元素如何显示在其他元素的上方，就像你可以在桌子上排列索引卡一样，使其并排或重叠。
+
+## 参见
+
+- [层叠上下文的解释与示例](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)
diff --git a/files/zh-cn/learn/accessibility/html/index.md b/files/zh-cn/learn/accessibility/html/index.md
index 5ad4dcd7413db8..7d4c3540468b1e 100644
--- a/files/zh-cn/learn/accessibility/html/index.md
+++ b/files/zh-cn/learn/accessibility/html/index.md
@@ -405,9 +405,9 @@ Fill in your name: <input type="text" id="name" name="name" />
> **备注：** 你可以在 [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html) 和 [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html) 中看到一些好的和不好的表单示例。
-## 可访问的表格
+## 无障碍数据表格
-基本的表格（译者注：“data table”被翻译成“表格”）可以用非常简单的标记来编写，例如：
+基本的数据表格可以用非常简单的标记来编写，例如：
```html
<table>
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md
index b1dd3dc78fdd27..ae18d1a611211f 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/using_github_pages/index.md
@@ -1,35 +1,37 @@
---
title: 应该如何使用 Github Pages?
slug: Learn/Common_questions/Tools_and_setup/Using_GitHub_pages
+l10n:
+ sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303
---
{{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
-[GitHub](https://github.com/)是一个“公共编码”网站。它允许你上传代码存储库并存储在 [Git](http://git-scm.com/) 版本控制系统上。然后，你可以在代码项目上进行协作，默认情况下系统是开源的，这意味着世界上任何人都可以找到你的 GitHub 代码，使用它，从中学习，并改进它。同样的，对于其他人的代码你也可以这么做！本文提供了一个基本的指南，即使用 Github 的 gh-pages 功能发布内容。
+[GitHub](https://github.com/) 是一个“公共编码”网站。它允许你上传代码仓库并存储在 [Git](http://git-scm.com/) 版本控制系统上。然后，你可以在代码项目上进行协作，默认情况下系统是开源的，这意味着世界上任何人都可以找到你的 GitHub 代码，使用它，从中学习，并改进它。同样的，对于其他人的代码你也可以这么做！本文提供了一个使用 Github 的 gh-pages 特性发布内容的基本指南。
## 发布内容
-GitHub 是一个非常重要和有用的社区，值得参与其中，Git / GitHub 也是一个非常受欢迎的[版本控制系统](http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control) - 现在大多数科技公司在其工作流程中使用它。GitHub 有一个非常有用的功能，称为[GitHub Pages](https://pages.github.com/)，它允许你在 Web 上实时发布网站代码。
+GitHub 是一个非常重要和有用的社区，值得参与其中，Git/GitHub 也是非常受欢迎的[版本控制系统](http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control)——现在大多数科技公司在其工作流程中使用它。GitHub 有一个非常有用的特性，称为 [GitHub Pages](https://pages.github.com/)，它允许你在 Web 上实时发布网站代码。
### 基本 Github 设置
1. 首先，在你的机器上[安装 Git](http://git-scm.com/downloads)。这是 GitHub 工作的底层版本控制系统软件。
2. 接下来，[注册一个 GitHub 帐户](https://github.com/join)。这很简单易操作。
-3. 注册后，用你的用户名和密码登录[github.com](https://github.com/)。
+3. 注册后，用你的用户名和密码登录 [github.com](https://github.com/)。
### 准备上传代码
-你可以将任何你喜欢的代码存储在 Github 资源库中，但要使用 GitHub Pages 功能实现全面效果，你的代码应该被构造为典型的网站，例如主入口点是一个名为 index.html 的 HTML 文件。
+你可以将任何你喜欢的代码存储在 Github 仓库中，但要使用 GitHub Pages 特性实现全面效果，你的代码应该被构造为典型的网站，例如主入口点是一个名为 `index.html` 的 HTML 文件。
-第一步，你需要做的另一件事是将你的代码目录初始化为 Git 存储库。按照下述步骤：
+在开始之前，你需要做的另一件事是将你的代码目录初始化为 Git 仓库。按照下述步骤：
-1. 将命令行指向你的 test-site 目录（或者任何一个你能调用的包含有你的网站的目录）。为此，请使用 cd 命令（即“更改目录”）。如果你已经将你的网站放到了位于桌面上的 test-site 目录中，则可以输入以下内容：
+1. 将命令行指向你的 `test-site` 目录（或者任何一个你能调用的包含有你的网站的目录）。为此，请使用 `cd` 命令（即“更改目录”）。如果你已经将你的网站放到了位于桌面上的 `test-site` 目录中，则可以输入以下内容：
```bash
cd Desktop/test-site
```
-2. 当命令行指向你的网站所在目录时，键入以下命令，该命令告诉 git 工具将目录转换为 git 仓库：
+2. 当命令行指向你的网站所在目录时，键入以下命令，该命令告诉 `git` 工具将目录转换为 git 仓库：
```bash
git init
@@ -37,57 +39,57 @@ GitHub 是一个非常重要和有用的社区，值得参与其中，Git / GitH
#### 命令行界面
-将代码上传到 Github 的最佳方法是通过命令行 - 这是一个窗口，你可以在其中输入命令来执行诸如创建文件和运行程序等操作，而不是在用户界面内单击。它看起来像这样：
+将代码上传到 Github 的最佳方法是通过命令行——这是一个窗口，你可以在其中输入命令来执行诸如创建文件和运行程序等操作，而不是在用户界面内单击。它看起来像这样：
-
+
-> **备注：** 你也可以考虑使用[Git 图形用户界面](http://git-scm.com/downloads/guis)来执行相同的工作，如果你不熟悉命令行。
+> **备注：** 你也可以考虑使用 [Git 图形用户界面](https://git-scm.com/downloads/guis)来执行相同的工作，如果你不熟悉命令行。
每个操作系统都附带有一个命令行工具：
-- **Windows**: 可以通过按 Windows 键，键入**命令提示符**，并从出现的列表中选择命令提示符。请注意，Windows 具有与 Linux 和 OS X 不同的命令约定，因此以下命令可能因你的机器而异。
-- **OS X**: **终端**可以在应用程序>实用程序中找到。
-- **Linux**: 通常你可以用 Ctrl + Alt + T 启动一个终端。如果不行，请在应用程序栏或菜单中查找**Terminal**。
+- **Windows**：可以通过按 Windows 键，键入*命令提示符*，并从出现的列表中选择**命令提示符**。请注意，Windows 具有与 Linux 和 OS X 不同的命令约定，因此以下命令可能因你的机器而异。
+- **OS X**：**终端**可以在*应用程序 > 实用工具*中找到。
+- **Linux**：通常你可以用 _Ctrl + Alt + T_ 启动一个终端。如果不行，请在应用程序栏或菜单中查找 **Terminal**。
-起初这可能看起来有点吓人，但不要担心 - 你很快就会得到基本的窍门。你可以通过键入命令并按 Enter 键来告诉计算机在终端中执行某些操作，如上所示。
+起初这可能看起来有点吓人，但不要担心——你很快就会得到基本的窍门。你可以通过键入命令并按回车键来告诉计算机在终端中执行某些操作，如上所示。
### 为你的代码创建一个仓库
1. 接下来，你需要为你的文件创建一个新的仓库。单击 GitHub 主页右上角的加号（+），然后选择“_New Repository_”。
2. 在此页面的“_Repository name_”框中，为你的代码库起一个名字，例如：_my-repository_。
-3. 还要填写一个描述来说明你的存储库将包含哪些内容。你的屏幕应该是这样的
- 
-4. 单击*Create repository*;你将会看到如下页面：
- 
+3. 还要填写一个描述来说明你的仓库将包含哪些内容。你的屏幕应该是这样的
+ 
+4. 单击 _Create repository_；你将会看到如下页面：
+ 
### 将你的文件上传到 GitHub
-1. 在当前页面上，你可能对本节的这部分感兴趣“**_…or push an existing repository from the command line_**（或者从命令行推送一个现有存储库）”。你应该看到本节中列出的两行代码。复制整个第一行，将其粘贴到命令行中，然后按 Enter 键。命令应该看起来像是这样的：
+1. 在当前页面上，你可能对“_…or push an existing repository from the command line_”（或从命令行推送现有仓库）这部分感兴趣。你应该看到本节中列出的两行代码。复制整个第一行，将其粘贴到命令行中，然后按回车键。命令应该看起来像是这样的：
```bash
git remote add origin https://github.com/chrisdavidmills/my-repository.git
```
-2. 接下来，键入以下两个命令，每个命令之后按 Enter。这些指令将会把代码上传到 GitHub，并要求 Git 管理这些文件。
+2. 接下来，键入以下两个命令，每个命令之后按回车。这些命令是将代码上传到 GitHub，并要求 Git 管理这些文件的准备工作。
```bash
git add --all
git commit -m 'adding my files to my repository'
```
-3. 最后，将代码推送到 GitHub，通过你正在访问的 GitHub 网页，然后输入我们看到的两个命令中的第二个命令“ **…or push an existing repository from the command line**（或从命令行部分推入现有存储库）部分”：
+3. 最后，将代码推送到 GitHub，通过你正在访问的 GitHub 网页，然后输入我们在“_…or push an existing repository from the command line_”（或从命令行推送现有仓库）部分看到的两个命令中的第二个命令：
```bash
- git push -u origin master
+ git push -u origin main
```
-4. 现在你需要为你的仓库开启 GitHub pages 分支。为此，其在仓库的主页中选择 _Settings_，然后从左侧的侧边栏中选择 _Pages_。在 _Source_ 下选择“main”分支。页面应该会自动刷新。
+4. 现在你需要为你的仓库开启 GitHub pages。为此，其在仓库的主页中选择 _Settings_，然后从左侧的侧边栏中选择 _Pages_。在 _Source_ 下选择“main”分支。页面应该会自动刷新。
5. 重新回到 _GitHub Pages_ 部分，你应该会看到形式为“Your site is ready to be published at `https://xxxxxx`.”的一行内容。
6. 如果你点击这个 URL，你应该会跳转到你的示例的实时演示版本，提供的主页名为 `index.html`——这是默认的入口点。如果你的网站的入口点不是这个，例如 `myPage.html`，你需要访问 `https://xxxxxx/myPage.html`。
### 更多的 GitHub 知识
-如果你想对 test-site 进行更多更改并将其上传到 GitHub，那么你只需像以前一样对文件进行更改。然后，你需要输入以下命令（在每个之后按 Enter 键）将这些更改推送到 GitHub：
+如果你想对测试站点进行更多更改并将其上传到 GitHub，那么你只需像以前一样对文件进行更改。然后，你需要输入以下命令（在每个之后按回车键）将这些更改推送到 GitHub：
```bash
git add --all
@@ -95,6 +97,6 @@ git commit -m 'another commit'
git push
```
-你可以使用更合适的消息替换上一次的提交信息，以描述你刚刚做出的更改。
+你可以使用更合适的消息替换 _another commit_，以描述你刚刚做出的更改。
-我们仅仅提供了 Git 的浅显基本的信息。要了解更多信息，请先从 [GitHub 帮助站点](https://help.github.com/index.html)开始。
+我们仅仅提供了 Git 的浅显基本的信息。要了解更多信息，查看我们的 [Git 和 GitHub](/zh-CN/docs/Learn/Tools_and_testing/GitHub) 页面。
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
index ce330ae645c481..40efbfceecbc39 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
@@ -1,67 +1,71 @@
---
title: 什么是浏览器开发者工具？
slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools
+l10n:
+ sourceCommit: 9a5b5597483ca34a58d400060f2e0534dceda240
---
{{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
-> **备注：** 在你运行下面的例子之前，打开我们在[Web 开发入门](/zh-CN/docs/Learn/Getting_started_with_the_web)系列文章中建立的[初学者示例网站](http://mdn.github.io/beginner-html-site-scripted/)。你应该按照下面的步骤打开。
+> **备注：** 在你运行下面的例子之前，打开我们在 [Web 开发入门](/zh-CN/docs/Learn/Getting_started_with_the_web)系列文章中建立的[初学者示例网站](http://mdn.github.io/beginner-html-site-scripted/)。你应该按照下面的步骤打开。
## 如何在浏览器中打开开发者工具
-开发者工具内置在你的浏览器的子窗口之中，大概像这样：
+开发者工具内置在浏览器的子窗口之中，大概像这样，具体取决于所使用的浏览器：
-
+
-**如何打开它？有三种方式：**
+如何打开它？有三种方式：
-- **_键盘快捷键_** _Ctrl + Shift + I_，除了以下的特例
+- **_键盘快捷键_**
- - **Internet Explorer.** _F12_
- - **Mac OS X.** _⌘ + ⌥ + I_
+ - **Windows：** _<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>_ 或 <kbd>F12</kbd>
+ - **macOS：** _<kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>I</kbd>_
- **_菜单栏_**
- - **Firefox**：菜单  ➤ _Web 开发者_ ➤ _切换工具箱（译者注：此处修改为最新的 Firefox Quantum），或者工具栏中的_ ➤ _Web 开发者_ ➤ _切换工具箱_
- - **Chrome**：菜单 _➤ 更多工具 ➤ 开发者工具_
- - **Safari**：_Develop ➤ Show Web Inspector_。如果你看不到 _Develop_ 菜单，去到*Safari ➤ Preferences ➤ Advanced*，然后点击*Show Develop menu in menu bar* 复选框。
- - **Opera**. _Developer ➤ Web Inspector_
+ - **Firefox：** 菜单  _➤ 更多工具 ➤ Web 开发者工具_
+ - **Chrome：** _➤ 更多工具 ➤ 开发者工具_
+ - **Safari：** _开发 ➤ 显示网页检查器_。如果你看不到*开发*菜单，去到 _Safari ➤ 设置 ➤ 高级_，然后点击*显示网页开发者功能*复选框。
+ - **Opera：** _开发者 ➤ 开发者工具_
-- **右键菜单**：右键单击网页中的一个项目上（在 Mac 上按 Ctrl 点击），并从弹出的菜单中选择`检查元素`（译者注：选择`检查`（Chrome）或`查看元素`（Firefox））。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。
+- **_右键菜单：_** 右键单击网页中的一个项目上（在 Mac 上按 Ctrl 同时点击），并从弹出的菜单中选择*检查元素*。（_这种方法的好处_：该方法直接将你右击的元素的代码突出显示）。
-
+
-检查器（Inspector）：DOM 浏览器和 CSS 编辑器
+## 检查器（Inspector）：DOM 浏览器和 CSS 编辑器
开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的 HTML 运行时的样子，以及哪些 CSS 规则被应用到了页面上元素。它还允许你立即修改 HTML 和 CSS 并在浏览器中实时观察修改的结果。
-
+
-如果你看不到调试器，
+如果你*看不到*调试器，
-- 点击“检查”选项卡。
-- 在 Internet Explorer 中，点击 DOM Explorer，或按 Ctrl + 1。
-- 在 Safari 中，控制就不是很清楚了，但是你如果你没有选择的东西出现在窗口看到 HTML。按下按钮查看 CSS 样式。
+- 点击“检查”标签页。
+- 在 Chrome、Microsoft Edge 或 Opera 中，点击元素。
+- 在 Safari 中，控件的呈现并不是那么清晰，但如果你没有选择其他内容显示在窗口中，你应该能看到 HTML。点击“样式”按钮查看 CSS。
### 探索 DOM 检查器
首先在 DOM 检查器中右键单击（按 Ctrl 点击）一个 HTML 元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：
-
+
-- **删除节点**（或删除元素）：删除当前元素**。**
-- **编辑 HTML**（或添加属性/编辑文本）：让你更改 HTML 和看到在变化的结果。对于调试和测试非常有用。
+- **删除节点**（或*删除元素*）：删除当前元素。
+- **编辑 HTML**（或*添加属性*/_编辑文本_）：让你更改 HTML 并即时查看结果。对于调试和测试非常有用。
- **:hover/:active/:focus**（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。
- **复制/复制为 HTML**：复制当前选定的 HTML。
-- 一些浏览器也有复制 CSS 路径和复制 XPath，允许你选择复制当前的 HTML 元素 CSS 选择器或 XPath 表达式。
+- 一些浏览器也有*复制 CSS 路径*和*复制 XPath*，允许你选择复制当前的 HTML 元素 CSS 选择器或 XPath 表达式。
现在试着编辑一些你的 DOM。双击元素，或在页面内容里右键单击它并选择编辑 HTML。你可以做出任何你想要的改变，但你不能保存。
### 探索 CSS 编辑器
-默认情况下，CSS 编辑器显示当前所选元素应用的 CSS 规则：
+默认情况下，CSS 编辑器显示当前所选元素应用的 CSS 规则：
+
+
这些功能特别有用：
@@ -74,77 +78,86 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools
你会注意到 CSS 查看器顶部的一些可点击的选项卡：
-- _计算：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。_
-- _盒子模型：这可以直观地表示当前元素的框模型，所以你可以一目了然地看到应用了什么填充，边框和边距，以及它的内容有多大。_
-- 字体：在 Firefox 中，“字体”选项卡显示应用于当前元素的字体。
+- _计算值_：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。
+- _布局_：在 Firefox 中，这包含两个部分：
+ - _盒模型_：这可以直观地表示当前元素的盒模型，所以你可以一目了然地看到应用了什么内边距、边框和外边距，以及它的内容有多大。
+ - _网格_：如果你正在检查的页面使用了 CSS 网格布局，这个部分允许你查看网格的详细信息。
+- _字体_：在 Firefox 中，*字体*标签页显示应用于当前元素的字体。
### 了解更多
了解更多 Inspector 在不同的浏览器中的细节：
-- [Firefox Page inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)
-- [IE DOM Explorer](http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx)
-- [Chrome DOM inspector](https://developer.chrome.com/devtools/docs/dom-and-styles) (Opera 的 inspector 和它一样)
-- [Safari DOM inspector and style explorer](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1)
+- [Firefox 页面检查器](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)
+- [Chrome DOM 检查器](https://developer.chrome.com/docs/devtools/dom/)（Opera 的 inspector 和它一样）
+- [Safari DOM 检查器和样式浏览器](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1)
## JavaScript 调试器
你可在 JavaScript 调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。
-
+
如何打开调试器：
-火狐，谷歌，IE，Edge：<kbd>F12</kbd>
+**Firefox**：选择  ➤ _Web 开发者_ ➤ _调试器_ 或按 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> 打开 JavaScript 调试器。如果工具已经显示，点击**调试器**标签。
+
+**Chrome**：打开开发者工具，然后选择**源代码/来源**标签。（Opera 的操作方式相同。）
-Safari：开打开发者工具，然后选择 "Debugger" 标签。
+**Safari**：打开开发者工具，然后选择“调试器”标签。
-### 尝一尝调试器的味
+### 探索调试器
-火狐的调试器有三个面板
+Firefox 的 JavaScript 调试器有三个面板。
#### 文件列表
-第一个面板位于左边，它包涵着你正在调试的网页的文件列表。从列表中选中你要操作的文件。通过点击选中一个文件，可以在调试中间的面板看到它的内容。
+第一个面板位于左边，它包含你正在调试的网页的文件列表。从列表中选中你要操作的文件。单击以选择该文件，并在调试器的中间面板中查看其内容。
-
+
#### 源码
-在你想要停止执行的位置设置间断点。在下面图片中，高亮的第 18 行就是被设置的断点。
+在你想要停止执行的位置设置断点。在下面图片中，高亮的第 18 行就是被设置的断点。
-
+
-#### “监视表达式”和“断点”
+#### 监视表达式和断点
右边的面板会显示你添加的监视表达式与断点。
在下图中，第一个区域，**监视表达式**，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。
-接下来的部分，**断点 标签**，列出了页面上设置的断点。在 example.js（上上个图中）中，一个断点被定位在语句 `listItems.push(inputNewItem.value);` 上。
+接下来的部分，**断点**，列出了页面上设置的断点。在 example.js 中，一个断点被设置在语句 `listItems.push(inputNewItem.value);` 上。
最后两个部分，只在代码运行时才出现。
-**调用栈** 区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。
+**调用堆栈**区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。
-最后一部分，**Scopes**，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对象在 addItemClick 函数中是如何变化的。
+最后一部分，**作用域**，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对象在 addItemClick 函数中是如何变化的。
-
+
-### 再了解一些
+### 了解更多
了解不同浏览器中的 JavaScript 调试器：
-- [Firefox JavaScript Debugger](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)
-- [Microsoft Edge Debugger](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger)
-- [Chrome Debugger](https://developers.google.com/web/tools/chrome-devtools/javascript/)
-- [Safari Debugger](https://developer.apple.com/safari/tools/)
+- [Firefox JavaScript 调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)
+- [Microsoft Edge 调试器](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/devtools-guide/debugger)
+- [Chrome 调试器](https://developers.google.com/web/tools/chrome-devtools/javascript/)
+- [Safari 调试器](https://developer.apple.com/safari/tools/)
## JavaScript 控制台
-JavaScript 控制台是一个非常有用的工具，用于调试没有按预期运行的 JavaScript。它允许你针对浏览器当前加载的页面运行 JavaScript 行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在 Internet Explorer 中，按 Ctrl + 2.）这将给你一个如下所示的窗口：
+JavaScript 控制台是一个非常有用的工具，用于调试没有按预期运行的 JavaScript。它允许你针对浏览器当前加载的页面运行 JavaScript 行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台：
+
+如果开发者工具已经打开，点击或按下控制台标签。
+
+如果没有，Firefox 允许你直接使用 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> 打开控制台，或使用菜单命令：菜单  _➤ Web 开发者 ➤ Web 控制台_，或 _工具 ➤ Web 开发者 ➤ Web 控制台_。在其他浏览器中，打开开发者工具，然后点击控制台标签。
+
+这将为你提供一个如下所示的窗口：
-
+
要查看会发生什么，请尝试逐个输入以下代码片段（然后按 Enter 键）:
@@ -157,36 +170,31 @@ document.querySelector("html").style.backgroundColor = "purple";
```
```js
-var my_image = document.createElement("img");
-
-//下面的 url 已经不再可用，这里注释掉，后面补上了一个可以 url
-//且 myImage 在文章开始给的“初学者示例网址”存在声明冲突，所以改为 my_image
-//myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
-my_image.setAttribute(
+const loginImage = document.createElement("img");
+loginImage.setAttribute(
"src",
- "https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif",
+ "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
-
-document.querySelector("h1").appendChild(my_image);
+document.querySelector("h1").appendChild(loginImage);
```
现在尝试输入以下错误的代码版本，看看你得到什么。
-```js
+```js-nolint example-bad
alert('hello!);
```
-```js
+```js example-bad
document.cheeseSelector("html").style.backgroundColor = "purple";
```
-```js
-var my_Image = document.createElement("img");
-myBanana.setAttribute(
+```js example-bad
+const loginImage = document.createElement("img");
+banana.setAttribute(
"src",
- "https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif",
+ "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
-document.querySelector("h1").appendChild(my_Image);
+document.querySelector("h1").appendChild(loginImage);
```
你将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！
@@ -195,12 +203,11 @@ document.querySelector("h1").appendChild(my_Image);
了解更多 JavaScript 控制台在不同浏览器中的细节：
-- [Firefox Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)
-- [IE JavaScript console](http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx)
-- [Chrome JavaScript Console](https://developer.chrome.com/devtools/docs/console) (Opera 与它相同)
-- [Safari Console](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1)
+- [Firefox Web 控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)
+- [Chrome JavaScript 控制台](https://developer.chrome.com/docs/devtools/console/)（Opera 与它相同）
+- [Safari 控制台](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1)
## 参见
-- [Debugging HTML](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
-- [Debugging CSS](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+- [HTML 调试](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
+- [CSS 调试](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS)
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
index 7dc03a76a83d29..5be59ffd6c96f0 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
@@ -1,6 +1,8 @@
---
title: 我需要什么软件来构建一个网站
slug: Learn/Common_questions/Tools_and_setup/What_software_do_I_need
+l10n:
+ sourceCommit: 721a334af54dd04cbd005bb91edc2c8ce2ad4744
---
{{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
@@ -10,11 +12,11 @@ slug: Learn/Common_questions/Tools_and_setup/What_software_do_I_need
<table>
<tbody>
<tr>
- <th scope="row">先决条件：</th>
+ <th scope="row">前提：</th>
<td>
- 你应当已经知道网页、网站、网络服务器，以及<a
- href="/zh-CN/docs/Learn/page_vs_site_vs_server_vs_search_engine"
- >搜索引擎间的区别</a
+ 你应当已经知道<a
+ href="/zh-CN/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines"
+ >网页、网站、Web 服务器，以及搜索引擎间的区别</a
>。
</td>
</tr>
@@ -27,13 +29,19 @@ slug: Learn/Common_questions/Tools_and_setup/What_software_do_I_need
## 概要
-你可以免费下载大部分网络开发所需要的程序。我们会在此文章中提供一些链接。你会需要工具去 1) 创建和编辑网页，2) 上传文件到你的网络服务器，和 3) 浏览你的网站。
+你可以免费下载大部分 Web 开发所需要的程序。我们会在此文章中提供一些链接。
-几乎所有的操作系统内置了一个文本编辑器和网站阅读器（被称作 浏览器）。所以通常你只需要获得用来传输文件到你的网络服务器的软件。
+你会需要工具去：
-## 自主学习
+- 创建和编辑网页
+- 上传文件到你的 Web 服务器
+- 浏览你的网站
-_现在还没有自主学习活动。请[考虑投稿](/zh-CN/docs/MDN/Community/Contributing/Getting_started)_。
+几乎所有的操作系统内置了一个文本编辑器和浏览器（用来浏览网站）。所以通常你只需要获得用来传输文件到你的网络服务器的软件。
+
+## 动手练习
+
+_现在还没有动手练习的内容。[请考虑投稿](/zh-CN/docs/MDN/Community/Contributing/Getting_started)。_
## 深度探索
@@ -41,7 +49,7 @@ _现在还没有自主学习活动。请[考虑投稿](/zh-CN/docs/MDN/Community
要创建和编辑一个网站，你需要一个文本编辑器。文本编辑器创建并修改无格式的文本文件。（其他格式，像是 **{{Glossary("RTF")}}**，允许你去添加格式，像是加粗或者下划线。这些格式并不适用于编写网页。）你应当明智地选择一个文本编辑器，因为当你建立网站时，你会广泛地使用到它。
-所有的桌面操作系统内置了一个基本的文本编辑器。这些编辑器是很直白的，但是缺乏了网页编码所需的特殊功能。如果你想要一些更花俏的东西，这里有很多可用的第三方工具。第三方编辑器通常包含了额外的功能，包括句法填色 \[syntax coloring]，代码补全 \[auto-completion]，可折叠区间 \[collapsible sections]，以及代码搜索 \[code search]。这里有一个短的编辑器列表：
+所有的桌面操作系统内置了一个基本的文本编辑器。这些编辑器是很直白的，但是缺乏了网页编码所需的特殊功能。如果你想要一些更花俏的东西，这里有很多可用的第三方工具。第三方编辑器通常包含了额外的功能，包括语法高亮、自动补全、区域折叠，以及代码搜索。这里有一个短的编辑器列表：
<table class="standard-table">
<thead>
@@ -143,13 +151,21 @@ _现在还没有自主学习活动。请[考虑投稿](/zh-CN/docs/MDN/Community
这里是一个高级文本编辑器的截图：
-
+
-### 上传文件到网络
+这里是一个在线文本编辑器的截图：
-当你的网站已经为公众浏览做好准备，你会需要上传你的网页到你的网络服务器。你可以从不同的供应者（查看 在网络上做某些东西要花费多少 \[[How much does it cost to do something on the web?](/zh-CN/docs/Learn/How_much_does_it_cost)]）处购买服务器的空间。一旦你选择好供应者，供应者会通过电子邮件给你发送 FTP（文件传输协议 \[file transfer protocol]）访问信息。上传文件到一个网络服务器是创建一个网站的重要一环，所以我们会在一篇独立的文章 \[[a separate article](/zh-CN/docs/Learn/Upload_files_to_a_web_server)] 中介绍它。就目前而言，这里有一小列免费的基本 FTP 客户端：
+
-<table>
+### 将文件上传到 Web
+
+当你的网站已经为公众浏览做好准备，你需要将网页上传到你的 Web 服务器。你可以从各种提供商处购买服务器空间（请参阅[在网络上做一些事情要花多少钱？](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)）。一旦确定使用哪家提供商，提供商会通过电子邮件向你发送访问信息，通常以 SFTP URL、用户名、密码和其他连接到其服务器所需的信息的形式提供。请注意，（S）FTP 现在有点过时了，其他上传系统开始流行起来，例如 [RSync](https://zh.wikipedia.org/wiki/Rsync) 和 [Git/GitHub](https://docs.github.com/zh/pages/configuring-a-custom-domain-for-your-github-pages-site)。
+
+> **备注：** FTP 本质上是不安全的。你应确保你的托管服务提供商允许使用安全连接，例如 SFTP 或基于 SSH 的 RSync。
+
+将文件上传到 Web 服务器是创建网站时非常重要的一步，因此我们在[一篇单独的文章](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)中详细介绍了这一过程。现在，这里有一些免费的基础（S）FTP 客户端的简短列表：
+
+<table class="standard-table">
<thead>
<tr>
<th scope="col">操作系统</th>
@@ -160,47 +176,68 @@ _现在还没有自主学习活动。请[考虑投稿](/zh-CN/docs/MDN/Community
<tr>
<td>Windows</td>
<td>
- <p><a href="http://winscp.net">WinSCP</a></p>
- <p><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></p>
+ <ul>
+ <li><a href="https://winscp.net">WinSCP</a></li>
+ <li><a href="https://mobaxterm.mobatek.net/">Moba Xterm</a></li>
+ </ul>
</td>
- <td colspan="1" rowspan="3">
- <a href="https://filezilla-project.org/">FileZilla</a> (All OS)
+ <td rowspan="3">
+ <ul>
+ <li>
+ <a href="https://filezilla-project.org/">FileZilla</a>（所有操作系统）
+ </li>
+ </ul>
</td>
</tr>
<tr>
<td>Linux</td>
<td>
- <a href="https://live.gnome.org/Nautilus">Nautilus</a> (Gnome)<br /><a
- href="http://www.konqueror.org/"
- >Konqueror</a
- >
- (KDE)
+ <ul>
+ <li>
+ <a href="https://wiki.gnome.org/action/show/Apps/Files?action=show&redirect=Apps%2FNautilus" rel="external">Nautilus/Files</a>（Gnome）
+ </li>
+ <li>
+ <a href="https://dolphin.com/" rel="external">Dolphin</a>（KDE）
+ </li>
+ </ul>
</td>
</tr>
<tr>
<td>Mac OS</td>
- <td><a href="http://cyberduck.de/">Cyberduck</a></td>
+ <td>
+ <ul>
+ <li><a href="https://cyberduck.de/">Cyberduck</a></li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td>ChromeOS</td>
+ <td>
+ <ul>
+ <li><a href="https://shiftedit.net/">ShiftEdit</a>（所有操作系统）</li>
+ </ul>
+ </td>
+ <td></td>
</tr>
</tbody>
</table>
-### 浏览页面
+### 浏览网站
-正如你所知，你需要一个网页浏览器去查看网页。这里有一系列的 \[[dozens](http://en.wikipedia.org/wiki/List_of_web_browsers)] 可选浏览器供你个人实用，不过当你在开发一个网页时，你应当至少用以下的主流浏览器测试它，以保证你的网站可供大部分人浏览：
+正如你所知，你需要一个网页浏览器去查看网页。这里有一系列的[许多](http://en.wikipedia.org/wiki/List_of_web_browsers)可选浏览器供你个人使用，不过当你在开发一个网页时，你应当至少用以下的主流浏览器测试它，以保证你的网站可供大部分人浏览：
-- [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/)
+- [Mozilla Firefox](https://www.mozilla.org/zh-CN/firefox/new/)
- [Google Chrome](https://www.google.cn/chrome/)
-- [Microsoft Internet Explorer](https://windows.microsoft.com/en-US/internet-explorer/download-ie)
- [Apple Safari](https://www.apple.com/safari/)
-如果你正以特定的群体（比如说技术平台或者国家）为目标，你或许需要用额外的浏览器，像是 [Opera](https://www.opera.com/)、[Dolphin](https://dolphin.com/) 来测试它。
+如果你正以特定的群体（比如说技术平台或者国家）为目标，你或许需要用额外的浏览器，像是 [Opera](https://www.opera.com/)、[Konqueror](https://apps.kde.org/konqueror/) 来测试它。
-但是因为某些浏览器只会在特定的操作系统上运行，测试会变得复杂。Apple Safari 在 iOS 和 Mac OS 上运行，而 Internet Explorer 则只在 Windows 上运行。这时候最好利用像是 [Browsershots](http://browsershots.org/) 或者 [Browserstack](http://www.browserstack.com/) 之类的服务。Browsershots 提供你的网站的截图，就如同它会在不同浏览器中所看到那样。Browserstack 实际上给予你完全远程访问虚拟机的权限，所以你可以在最普遍的环境中测试你的网站。或者，你可以设置你自己的虚拟机，不过这需要一些专业知识。（如果你选择了这样做，微软在上为开发者提供了[随时可用的虚拟机](https://developer.microsoft.com/zh-cn/microsoft-edge/tools/vms/)。）
+但是因为某些浏览器只会在特定的操作系统上运行，测试会变得复杂。特别是，Apple Safari 在 iOS、iPadOS 和 macOS 上运行。最好利用像 [Browsershots](https://browsershots.org/) 或 [Browserstack](https://www.browserstack.com/) 这样的服务。Browsershots 提供你的网站在各种浏览器中显示的截图。Browserstack 则提供对虚拟机的完全远程访问，因此你可以在最常见的环境和不同操作系统上测试你的网站。或者，你也可以自行设置虚拟机，但这需要一定的专业知识。有关更多信息，请参阅[执行测试的策略：建立测试实验室](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#建立测试实验室)。
-务必在一个真实设备上运行一些测试，尤其是在真实的移动设备上。移动设备模拟是一个崭新的，进化中的技术，而且它并不及桌面模拟可靠。当然，移动设备耗费金钱，所以我们推荐你查看一下 [Open Device Lab initiative](http://opendevicelab.com/)。你同时也可以分享设备，如果你想要不花费太多地在多平台上测试的话。
+无论如何，一定要在真实设备上进行一些测试，尤其是在真实的移动设备上。移动设备模拟是一项新的、不断发展的技术，比桌面模拟不太可靠。移动设备当然需要花费金钱，所以我们建议你看看[开放设备实验室倡议](https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/#odls-have-opened-doors-for-idls)。如果你想在多个平台上进行测试而不花费太多，你也可以共享设备。
## 下一步
- 这里的一些软件是免费的，但不是所有都是。探寻[在网络上做一些事情需要花费多少](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)。
- 如果你想要了解更多关于文本编辑器的知识，阅读我们关于[如何选择并安装一个文件浏览器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors)的文章。
-- 如果你寻思如何在网络上发布你的网站，查阅“[如何上传文件到一个网络服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)”。
+- 如果你想知道如何在网络上发布你的网站，查阅“[如何上传文件到一个网络服务器](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server)”。
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
index edcef64de55fc1..132b162a13c125 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
@@ -1,6 +1,8 @@
---
title: 互联网是如何工作的
slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work
+l10n:
+ sourceCommit: 8dfa0ecf5bda526ccd6244ca5c7720767e3f013f
---
{{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
@@ -12,10 +14,7 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work
<tr>
<th scope="row">前提：</th>
<td>
- 无，但是鼓励先去阅读
- <a href="/zh-CN/docs/learn/常见问题/Thinking_before_coding"
- >关于设定项目目标的文章</a
- >
+ 无，但是鼓励先去阅读<a href="/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding">关于设定项目目标的文章</a>
</td>
</tr>
<tr>
@@ -27,61 +26,64 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work
## 概述
-互联网是网络的支柱，以这种技术为基础使网络成为可能。作为基础，互联网是把电脑互相连接起来的一个巨大网络。
+**互联网**是 Web 的支柱，以这种技术为基础使 Web 成为可能。作为基础，互联网是把电脑互相连接起来的一个巨大网络。
-[互联网的历史有些模糊不清](http://en.wikipedia.org/wiki/Internet#History)。它始于 1960 年美国军方资助的研究项目。1980 年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。
+[互联网的历史有些模糊不清](https://zh.wikipedia.org/wiki/互联网#历史)。它始于 1960 年美国军方资助的研究项目。1980 年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。
## 自主学习
-- [五分钟告诉你互联网是如何工作的](https://www.youtube.com/watch?v=7_LPdttKXPc): Aaron Titus 在五分钟的一个视频中告诉你非常基础的互联网知识。
+- [五分钟告诉你互联网是如何工作的](https://www.youtube.com/watch?v=7_LPdttKXPc)：Aaron Titus 在五分钟的一个视频中告诉你非常基础的互联网知识。
+- [互联网如何运作？](https://www.youtube.com/watch?v=x3c1ih2NJEg)：这是一个详细且可视化的 9 分钟视频。
## 深入探索
### 一个简单的网络
-当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式 (通常是[网线](http://en.wikipedia.org/wiki/Ethernet_crossover_cable)) 还是无线方式（比如 [WiFi](http://en.wikipedia.org/wiki/WiFi) 或 [蓝牙](http://en.wikipedia.org/wiki/Bluetooth) )。所有现代电脑都支持这些连接。
+当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式（通常是[网线](http://en.wikipedia.org/wiki/Ethernet_crossover_cable)）或是无线方式（比如 [WiFi](https://zh.wikipedia.org/wiki/Wi-Fi) 或[蓝牙](https://zh.wikipedia.org/wiki/藍牙)）。所有现代电脑都支持这些连接。
> **备注：** 接下来的内容，我们将只谈论有线连接，而无线连接的原理与此相同。
-
+
通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑，但是情况立刻变得复杂了。如果你尝试连接，比如说十台电脑，每台电脑有九个插头，总共需要 45 条网线。
-
+
为了解决这个问题，网络上的每台电脑需要链接到一个叫做路由器（_router_）的特殊小电脑。路由器只干一件事：就像火车站的信号员，它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑 B，电脑 A 必须把信息发送给路由器，路由器将收到的信息转发给电脑 B，并且确保信息不会发送给电脑 C。
一旦我们把路由器加入到这个系统，我们的网络中便只需要十条网线：每台电脑一个插口，路由器上十个插口。
-
+
### 网络中的网
-到目前为止一切都很好 . 但是我们要连接成百上千，上亿台电脑呢？当然一台路由器覆盖不了这么远，但是，如果你阅读得比较认真，我们曾提到路由器像其他电脑一样，所以我们为什么不把两个路由器彼此连接呢？
+到目前为止一切都很好。但是我们要连接成百上千，上亿台电脑呢？当然一台*路由器*覆盖不了这么远，但是，如果你阅读得比较认真，我们曾提到*路由器*像其他电脑一样，所以我们为什么不把两个*路由器*彼此连接呢？
-
+![两个路由器连接在一起]](internet-schema-4.png)
我们把电脑连接路由器，接着路由器连接路由器，我们就会有无穷的规模。
-
+
这样网络越来越接近我们所说的互联网，但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络：你的朋友，你的邻居，每个人都可以拥有自己的计算机网络。在你的房子和世界其他地方之间架设电缆将这些不同的网络连接起来是不可能的，那么你该如何处理这件事呢？其实已经有电缆连接到你的房子了，比如，电线和电话。电话基础设施已经可以把你家连接到世界的任何角落，所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器（_modem_），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。
-
+
-这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP 是一家可以管理一些特殊的路由器的公司，这些路由器连接其他 ISP 的路由器。你的网络消息可以被 ISP 捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。
+这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP 是一家可以管理一些特殊的路由器的公司，这些路由器连接其他 ISP 的*路由器*。你的网络消息可以被 ISP 捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。
-
+
### 寻找电脑
-如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP 代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：`192.168.2.10`。
+如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做“IP 地址”（IP 代表*网络协议*）。这个地址由四部分被点分隔的数字序列组成，比如：`192.0.2.172`。
-对于电脑这样已经很好了，但是人类却很难记忆这一串地址。为了简单处理，我们给 IP 地址取一个容易阅读的别名：域名。比如，`google.com` 被用于 IP 地址 `172.217.7.14。`这样我们通过这些域名可以很容易的通过网络连接到电脑。
+这对于计算机来说完全没问题，但我们人类很难记住这种地址。为了使事情更简单，我们可以使用一个叫做*域名*的可读名称来替代 IP 地址。例如（在写作时，IP 地址可能会变化），`google.com` 是用于 IP 地址 `142.250.190.78` 的域名。所以使用域名是我们通过互联网访问计算机的最简单方式。
-### 互联网（Internet）和网络（web）
+
-你可能注意到了，当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网（Internet）和网络（Web）是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有 一些电脑（我们称之为网络服务器（_Web servers_））可以发送一些浏览器可以理解的信息。互联网是基础设施，网络是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和{{Glossary("IRC")}}.
+### 互联网和 Web
+
+你可能注意到了，当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网和 Web 是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有一些电脑（我们称之为 _Web 服务器_）可以发送一些浏览器可以理解的信息。*互联网*是基础设施，_Web_ 是建立在这种基础设施之上的服务。值得注意的是，一些其他服务也同样运行在互联网之上，比如邮箱和 {{Glossary("IRC")}}。
### 内联网和外联网
@@ -95,6 +97,6 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work
## 下一步
-- [网络怎样工作](/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
-- [理解网页，网站，网络服务器和搜索引擎之间的不同](/zh-CN/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines)
+- [Web 是如何工作的](/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
+- [理解网页、网站、网络服务器和搜索引擎之间的不同](/zh-CN/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines)
- [理解域名](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index 22fd5847983e1b..9296d8ae12f967 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -1,11 +1,13 @@
---
-title: 网页，网站，网络服务器和搜索引擎的区别是什么？
+title: 网页、网站、网络服务器和搜索引擎的区别是什么？
slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines
+l10n:
+ sourceCommit: c62b98afeca1df0ffdd92bb96b8a006662073a8e
---
{{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
-在本文中我们描述了各种与网络相关的概念：网页，网站，网络服务器，以及搜索引擎。这些概念常被网络新手混淆，或被误用。让我们看看它们到底代指的是什么吧！
+在本文中我们描述了各种与网络相关的概念：网页、网站、网络服务器以及搜索引擎。这些概念常被网络新手混淆，或被误用。让我们看看它们到底代指的是什么吧！
<table class="learn-box standard-table">
<tbody>
@@ -20,7 +22,7 @@ slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engine
</tr>
<tr>
<th scope="row">目标：</th>
- <td>了解网页，网站，网络服务器和搜索引擎间的区别</td>
+ <td>了解网页、网站、网络服务器和搜索引擎间的区别</td>
</tr>
</tbody>
</table>
@@ -32,13 +34,26 @@ slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engine
随着进一步地探讨，我们将会涵盖这些概念和技术的方方面面，但以下的这些简单定义可以帮助你快速开始：
- 网页（webpage）
- - : 一份能够显示在网络浏览器（如 Firefox,，Google Chrome，Microsoft Internet Explorer 或 Edge，Apple 的 Safari）上的文档。网页也常被称作"web pages"（网页）或者就叫"pages"（页面）。
+ - : 一份能够显示在网络浏览器（如 Firefox、Google Chrome、Opera、Microsoft Edge 或 Apple 的 Safari）上的文档。网页也常被称作“web page”（网页）或者就叫“page”（页面）。
- 网站（website）
- - : 一个由许多网页组合在一起，并常常以各种方式相互连接的网页组成的集合。网站常被称作"web site"（网站）或简称"site"（站点）。
-- 网络服务器（web server）
+ - : 一个由许多网页组合在一起，并常常以各种方式相互连接的网页组成的集合。网站常被称作“web site”（网站）或简称“site”（站点）。
+- Web 服务器（web server）
- : 一个在互联网上托管网站的计算机。
- 搜索引擎（search engine）
- - : 帮助你寻找其他网页的网站，比如 Google，Bing，或 Yahoo。
+ - : 搜索引擎是帮助你查找其他网页的网络服务，例如 Google、Bing、Yahoo 或 DuckDuckGo。通常通过网络浏览器（例如，你可以直接在 Firefox、Chrome 等浏览器的地址栏中进行搜索引擎搜索）或通过网页（例如 [bing.com](https://www.bing.com/) 或 [duckduckgo.com](https://duckduckgo.com/)）访问搜索引擎。
+
+一个简单的类比——公共图书馆。通常当你访问图书馆时会做以下事情：
+
+1. 找到搜索索引，查找你想要的书名。
+2. 记下书的目录号。
+3. 前往包含该书的特定部分，找到正确的目录号，并获取书籍。
+
+现在我们将图书馆与 Web 服务器进行比较：
+
+- 图书馆就像一个 Web 服务器。它有几个部分，类似于一个 Web 服务器托管多个网站。
+- 图书馆中的不同部分（科学、数学、历史等）就像网站。每个部分就像一个独特的网站（两个部分不包含相同的书）。
+- 每个部分中的书籍就像网页。一个网站可能有几个网页，例如，科学部分（网站）将有关于热、声音、热力学、静力学等的书籍（网页）。每个网页都可以在唯一的位置（URL）找到。
+- 搜索索引就像搜索引擎。每本书在图书馆中有自己唯一的位置（两本书不能放在同一个地方），这由目录号指定。
## 自主学习
@@ -50,47 +65,47 @@ _还没有可用的资料，[请考虑贡献一个](/zh-CN/docs/MDN/Community/Co
### 网页
-一份网页文档是交给{{Glossary("browser", "浏览器")}}显示的简单文档。这种文档是由{{Glossary("HTML", "超文本标记语言")}}来编写的 (在[other articles](/zh-CN/docs/Web/HTML)可查看更多详细内容)。网页文档可以插入各种各样不同类型的资源，例如：
+一份网页文档是交给{{Glossary("browser", "浏览器")}}显示的简单文档。这种文档是由{{Glossary("HTML", "超文本标记语言")}}来编写的（在[其他文章](/zh-CN/docs/Web/HTML)可查看更多详细内容）。网页文档可以插入各种各样不同类型的资源，例如：
-- _样式信息_ — 控制页面的观感
-- _脚本_— 为页面添加交互性
-- _多媒体_— 图像，音频，和视频
+- _样式信息_——控制页面的观感
+- _脚本_——为页面添加交互性
+- _多媒体_——图像，音频，和视频
> **备注：** 浏览器也能显示其他文档，例如 {{Glossary("PDF")}} 文件或图像，但网页（webpage）这一概念专指 HTML 文档。其他情况我们则只会使用文档（document）这一概念
网络上所有可用的网页都可以通过一个独一无二的地址访问到。要访问一个页面，只需在你的浏览器地址栏中键入页面的地址。
-
+
### 网站
-网站是共享唯一域名的相互链接的网页的集合。给定网站的每个网页都提供了明确的链接—一般都是可点击文本的形式—允许用户从一个网页跳转到另一个网页。
+*网站*是共享唯一域名的相互链接的网页的集合。给定网站的每个网页都提供了明确的链接——一般都是可点击文本的形式——允许用户从一个网页跳转到另一个网页。
-要访问网站，请在浏览器地址栏中输入域名，浏览器将显示网站的主要网页或主页。
+要访问网站，请在浏览器地址栏中输入域名，浏览器将显示网站的主要网页或*主页*。
-
+
-_当网站只包含一个网页时，网站和网页二者尤其容易弄混。这样的网站有时称之为单页网站（single-page website）。_
+注意，也有可能有一个*单页面网站*：一个由单个网页组成的网站，在需要时通过动态更新添加新内容。
### 网络服务器
-一个网络服务器是一台托管一个或多个网站的计算机。 "托管"意思是所有的网页和它们的支持文件在那台计算机上都可用。网络服务器会根据每位用户的请求，将任意网页从托管的网站中发送到任意用户的浏览器中。
+一个*网络服务器*是一台托管一个或多个网站的计算机。“托管”意思是所有的网页和它们的支持文件在那台计算机上都可用。网络服务器会根据每位用户的请求，将任意网页从托管的网站中发送到任意用户的浏览器中。
-别把网站和网络服务器弄混了。例如，当你听到某人说："我的网站没有响应"，这实际上指的是网络服务器没响应，并因此导致网站不可用。更重要的是，自从一个网络服务器能够托管多个网站，"网络服务器"这个术语从来都没被用来指定一个网站，因为这可能导致很大的混乱。在上面的例子中，如果我们说，“我的网络服务器没有响应”，这就指的是在那台网络服务器上的所有网页都不可用。
+别把*网站*和*网络服务器*弄混了。例如，当你听到某人说：“我的网站没有响应”，这实际上指的是*网络服务器*没响应，并因此导致*网站*不可用。更重要的是，自从一个网络服务器能够托管多个网站，“网络服务器”这个术语从来都没被用来指定一个网站，因为这可能导致很大的混乱。在上面的例子中，如果我们说，“我的网络服务器没有响应”，这就指的是在那台网络服务器上的所有网页都不可用。
### 搜索引擎
-搜索引擎是网络上常见的混乱之源。搜索引擎是一个特定类型的网站，用以帮助用户在其他网站中寻找网页。
+搜索引擎是网络上常见的混乱之源。搜索引擎是一个特定类型的网站，用以帮助用户在*其他*网站中寻找网页。
-搜索引擎数不胜数，有[Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yandex](https://www.yandex.com/), [DuckDuckGo](https://duckduckgo.com/)等等。其中有的功能宽泛，有的专注于特定的主题。你可按需使用。
+搜索引擎数不胜数，有 [Google](https://www.google.com/)、[Bing](https://www.bing.com/)、[Yandex](https://www.yandex.com/)、[DuckDuckGo](https://duckduckgo.com/) 等等。其中有的功能宽泛，有的专注于特定的主题。你可按需使用。
许多网上的初学者将搜索引擎和浏览器混淆了。让我们明确一下：浏览器是一个接收并显示网页的软件，搜索引擎则是一个帮助用户从其他网站中寻找网页的网站。这种混淆之所以出现是因为当一个人打开一个浏览器的时候，浏览器展现的是一个搜索引擎的主页。这有什么意义呢？很明显，因为你打开浏览器要做的第一件事就是去寻找一个网站。不要把基础设施（浏览器）和服务（搜索引擎）混淆。这种区分会对你很有帮助，但是甚至有些专业人员也还把它们说得很宽泛，所以不用对这种区分太过谨慎。
下图是一个火狐浏览器把谷歌搜索框当作它默认开始页面的实际例子：
-
+
## 下一步
-- 继续探索： [网络服务器](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server)
+- 继续探索：[什么是 Web 服务器](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server)
- 看网页是如何被链接到网站中的：[理解超链接](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks)
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md b/files/zh-cn/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
index 93a06d7ef7e1a5..1d86109f4d006e 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md
@@ -1,31 +1,30 @@
---
title: 什么是超链接？
slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks
+l10n:
+ sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303
---
{{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
通过这篇文章，我们将了解什么是超链接以及超链接的重要性。
-<table class="learn-box standard-table">
+<table>
<tbody>
<tr>
<th scope="row">前提：</th>
<td>
- 你该知道
- <a href="/zh-CN/docs/learn/How_the_Internet_works"
- >互联网是怎样工作的 </a
- >，并且熟悉
- <a
- href="/zh-CN/docs/learn/常见问题/网页，网站，网页服务器和搜索引擎的区别是什么？"
- >网页，网站，网络服务器和搜索引擎间的区别</a
- >
+ 你该知道<a href="/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work"
+ >互联网是怎样工作的</a
+ >，并且熟悉<a
+ href="/zh-CN/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines"
+ >网页、网站、网络服务器和搜索引擎间的区别</a
+ >。
</td>
</tr>
<tr>
<th scope="row">目标：</th>
<td>了解 Web 上的超链接概念以及超链接的重要性。</td>
- <td></td>
</tr>
</tbody>
</table>
@@ -34,19 +33,19 @@ slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks
超链接（Hyperlink），通常简称为链接（link），是网络背后的核心概念。为了解释什么是链接，我们需要回到网络架构的底层。
-早在 1989 年，网络发明人蒂姆·伯纳斯 - 李（Tim Berners-Lee）就提出了网站的三大支柱：
+早在 1989 年，网络发明人蒂姆·伯纳斯·李（Tim Berners-Lee）就提出了 Web 的三大支柱：
-1. {{Glossary("URL")}}, 跟踪 Web 文档的地址系统
-2. {{Glossary("HTTP")}}, 一个传输协议，以便在给定 URL 时查找文档
-3. {{Glossary("HTML")}}, 允许嵌入超链接的文档格式
+1. {{Glossary("URL")}}：跟踪 Web 文档的地址系统
+2. {{Glossary("HTTP")}}：通过给定 URL 来查找文档的传输协议
+3. {{Glossary("HTML")}}：允许嵌入*超链接*的文档格式
正如你在三大支柱中所看到的，网络上的一切都围绕着文档以及如何访问它们。Web 的最初目的是提供一种简单的方式来访问，阅读和浏览文本文档。从那时起，网络已经发展到提供图像，视频和二进制数据的访问，但是这些改进几乎没有改变三大支柱。
在 Web 之前，很难访问文档并从一个文档跳转到另一个文档。人类可以理解的 URL 已经使得文档容易被访问，但是你很难通过输入一个长 URL 来访问一个文档。超链接改变了这一切。链接可以将任何文本与 URL 相关联，因此用户只要激活链接就可以到达目标文档。
-默认情况下，链接是一段具有下划线的蓝色文本，在视觉上与周围的文字明显不同。用手指触击或用鼠标点击一个链接会激活链接；你如果使用键盘，那么按 Tab 键直到链接处于焦点，然后按 Enter 键或空格键来激活链接。
+链接是一段具有下划线的蓝色文本，在视觉上与周围的文字明显不同。用手指触击或用鼠标点击一个链接会激活链接；你如果使用键盘，那么按 Tab 键直到链接处于焦点，然后按 Enter 键或空格键来激活链接。
-
+
链接是一个突破，它使得网络变得非常有用和成功。在本文的其余部分，我们讨论各种类型的链接及链接在现代网页设计中的重要性。
@@ -69,9 +68,9 @@ slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks
### 锚
-**大多数链接将两个网页相连。而锚将一个网页中的两个段落相连。** 当你点击指向锚点的链接时，浏览器跳转到当前文档的另一部分，而不是加载新文档。但是，你可以像使用其他链接一样制作和使用锚点。
+大多数链接将两个网页相连。而**锚**将一个网页中的两个段落相连。当你点击指向锚点的链接时，浏览器跳转到当前文档的另一部分，而不是加载新文档。但是，你可以像使用其他链接一样制作和使用锚点。
-
+
### 链接和搜索引擎
@@ -79,15 +78,15 @@ slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks
所以链接会影响搜索引擎链接到你的网站的方式。麻烦的是，很难衡量搜索引擎的活动。公司自然希望他们的网站在搜索结果中排名很高，所有研究结果至少可以说明一些事情：
-- 链接的可见文本会影响哪些搜索查询会找到给定的网址。
-- 一个网页所拥有的链接越多，它在搜索结果中排名越高。
-- 外部链接影响源和目标网页的搜索排名，但有多少不明确。
+- 链接的*可见文本*会影响哪些搜索查询会找到给定的网址。
+- 一个网页所拥有的*传入链接*越多，它在搜索结果中排名越高。
+- *外链*影响源和目标网页的搜索排名，但有多少不明确。
-[SEO](http://en.wikipedia.org/wiki/Search_engine_optimization) (search engine optimization) 是如何使网站在搜索结果中排名高的研究。改善网站的链接使用是一种有用的搜索引擎优化技术。
+[SEO](https://zh.wikipedia.org/wiki/搜尋引擎最佳化)（search engine optimization）是如何使网站在搜索结果中排名高的研究。改善网站的链接使用是一种有用的搜索引擎优化技术。
## 下一步
所以现在当然你想要建立一些链接的网页！
- 为了获得更多的理论背景，了解 [URL 以及其结构](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)，因为每个链接都指向一个 URL。
-- 想要一些更实际的东西？我们的 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) 模块中的[创建超链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) 解释了如何实现详细的超链接
+- 想要一些更实际的东西？我们的 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) 模块中的[创建超链接](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)详细解释了如何实现超链接。
diff --git a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
index f32eb97469c804..07558dbbda833d 100644
--- a/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
+++ b/files/zh-cn/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
@@ -1,6 +1,8 @@
---
title: 什么是 web 服务器？
slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server
+l10n:
+ sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303
---
{{QuicklinksWithSubPages("/zh-CN/docs/Learn/Common_questions")}}
@@ -94,7 +96,9 @@ HTTP 为客户和服务器间的如何沟通提供清晰的规则。我们会在
“动态”意味着服务器会处理内容甚至实时地从一个数据库中产生它。这个方法提供了更多的灵活性，但技术栈更加复杂，使得建立一个网站的挑战大大增加。
-有这么多的应用服务器技术，以至于很难推荐一种特定的技术。一些应用服务器迎合了特定的网站类别，如博客、维基或电子商务；另一些则更为通用。如果你要建立一个动态网站，请花时间选择适合你需要的技术。除非你想学习 web 服务器编程（这本身就是一个令人兴奋的领域！），否则你不需要创建自己的应用服务器。那只是[重新发明轮子](https://zh.wikipedia.org/wiki/重造轮子)。
+不可能建议一个通用的应用服务器适用于所有可能的用例。一些应用服务器设计用于托管和管理博客、知识库或电子商务解决方案，而其他一些则更通用。如果你正在构建一个动态网站，请花时间研究你的需求，并找到最适合你需求的技术。
+
+大多数网站开发者不需要从头开始创建应用服务器，因为有很多现成的解决方案，其中许多都可以高度配置。但是，如果你确实需要创建自己的服务器，那么你可能需要使用服务器框架，利用其现有的代码和库，并仅扩展你需要的部分以满足你的用例。只有相对较少的开发者需要完全从头开始开发服务器：例如，为了满足嵌入式系统上紧张的资源限制。如果你想尝试构建一个服务器，请浏览[服务器端网站编程](/zh-CN/docs/Learn/Server-side)学习路径中的资源。
## 下一步
diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md
index b0597a94ee9195..5c7be375bc342f 100644
--- a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -40,7 +40,8 @@ CSS {{cssxref("background")}} 属性是本课程中我们将遇到的一些普
105deg,
rgba(255, 255, 255, 0.2) 39%,
rgba(51, 56, 57, 1) 96%
- ) center center / 400px 200px no-repeat,
+ )
+ center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}
diff --git a/files/zh-cn/learn/css/index.md b/files/zh-cn/learn/css/index.md
index deb147adf62b76..445c058f77add0 100644
--- a/files/zh-cn/learn/css/index.md
+++ b/files/zh-cn/learn/css/index.md
@@ -1,46 +1,50 @@
---
-title: CSS
+title: 学习使用 CSS 为 HTML 添加样式
slug: Learn/CSS
+l10n:
+ sourceCommit: 26e2f9883e0e73def04c0e86fec6da3ec42e66b3
---
{{LearnSidebar}}
-层叠样式表 — 也就是{{glossary("CSS")}} — 是你在{{glossary("HTML")}}之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，你可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
+层叠样式表——或 {{glossary("CSS")}}——是你在 {{glossary("HTML")}} 之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，你可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
## 学习路径
-在尝试学习 CSS 之前，你应该了解 HTML 的基础知识。建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)模块 — 这一模块主要介绍了以下内容：
+在尝试学习 CSS 之前，你应该了解 HTML 的基础知识。建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)模块。
-- CSS，从 CSS 模块简介开始
-- 更高级的[HTML 模块](/zh-CN/Learn/HTML#Modules)
-- [JavaScript](/zh-CN/docs/Learn/JavaScript)，如何使用 Javascript 给网页加上动态功能
+一旦你掌握了 HTML 的基础知识，我们建议你同时学习更深入的 HTML 和 CSS，在这两个主题之间来回切换学习。这是因为当你应用 CSS 时，HTML 会变得更加有趣，学习起来也更有乐趣，而不了解 HTML 就无法学习 CSS。
-我们建议你同时学习 HTML 和 CSS，在这两个主题之间来回切换。因为有着 CSS 的 HTML 更加有趣，并且不了解 HTML 就不能真正掌握 CSS。
+在开始这个主题之前，你还应该熟悉使用计算机和被动地使用网络（即，仅仅浏览和消费内容）。你应该按照[安装基础软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中详细说明的内容设置好一个基本的工作环境，并且理解如何创建和管理文件，这在[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中有详细介绍——这些都是我们从零[开始学网页](/zh-CN/docs/Learn/Getting_started_with_the_web)初学者完整模块的一部分。
-在学习本章节之前，你应该会使用计算机，熟练的使用网页操作（哪怕只是盯着屏幕看）。你应该配置好一个基本的操作环境（见[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)），知道如何创建和管理文件（见[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)）—这两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) 的初学者模块的一部分。
-
-我们建议你在学习本章内容前，先完成 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)，尽管这不是必须的；CSS 基础文章中涵盖的大部分内容在 CSS 模块简介中也有，而且 CSS 模块涵盖了更多的细节。
+如果你对网页开发完全陌生，建议你在继续学习这个主题之前，先完成从零[开始学网页](/zh-CN/docs/Learn/Getting_started_with_the_web)的学习。不过，[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)文章中涵盖的大部分内容也在我们的 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中有更详细的讲解。
## 模块
本主题包含以下模块，建议按顺序阅读这些模块。你应该从第一个模块开始。
-- [CSS 初步](/zh-CN/docs/Learn/CSS/First_steps)
- - : 这个模块介绍了使用 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将 CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CSS 的调试。
+- [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)
+ - : CSS（层叠样式表）用于样式化和布局网页。例如，可以更改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其他装饰功能。本模块将为你提供通往精通 CSS 之路的平缓起点，让你了解 CSS 的基本工作原理、语法，以及如何开始使用 CSS 为 HTML 添加样式。
- [构建 CSS 块](/zh-CN/docs/Learn/CSS/Building_Blocks)
- - : 本模块承接[CSS 初步](/zh-CN/docs/Learn/CSS/First_steps)，进行进一步的学习——既然你已经熟悉了 CSS 的语言和语法，有了一些使用 CSS 的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。这样做的目的是，在继续深入到更加具体的规则，例如[样式化文本](/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F)和[CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)前，为你提供一个用于编写堪用的 CSS 的工具箱，帮你理解所有必要的理论。
+ - : 本模块承接 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)，进行进一步的学习——既然你已经熟悉了 CSS 的语言和语法，有了一些使用 CSS 的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。这样做的目的是，在继续深入到更加具体的规则，例如[样式化文本](/zh-CN/docs/Learn/CSS/Styling_text)和 [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)前，为你提供一个编写合格 CSS 的工具包，帮你理解所有必要的理论。
- [样式化文本](/zh-CN/docs/Learn/CSS/Styling_text)
- - : 这个模块介绍基础的文本样式，包括字体属性的设置，粗体和斜体，行和字母间距，阴影和其他文本功能。我们通过在网页上设置特定的字体，指定列表和链接的样式来完成这一模块。
+ - : 在覆盖了 CSS 语言的基础知识之后，下一个需要集中学习的 CSS 主题是文本样式化——这是你使用 CSS 最常做的事情之一。这里我们研究文本样式化的基本原理，包括设置字体、粗细、斜体、行距和字母间距、阴影等文本特征。我们最后还会讨论如何将自定义字体应用到页面上，以及如何样式化列表和链接。
- [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)
- - : 到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内和其他框旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性、使用新的布局工具如弹性盒（flexbox），CSS 网格和定位、以及你仍想知道的一些传统技术，来深入学习 CSS 布局。
+ - : 到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的盒子。现在应该考虑如何把你的盒子以合适的位置放置在视口内和其他盒子旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性，使用新的布局工具如弹性盒（flexbox）、CSS 网格和定位，以及你仍想知道的一些传统技术，来深入学习 CSS 布局。
## 解决常见的 CSS 问题
[使用 CSS 解决常见问题](/zh-CN/docs/Learn/CSS/Howto)解释了怎样使用 CSS 解决创建一个网页时常遇到的问题。
-从这里开始，你大致就能在 HTML 元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。不过一旦你牢固掌握了即便是 CSS 最基础的部分，也没有很多做不到的事情。学习 CSS 最棒的一件事情就是，一旦你知道了基本的原理，即使你实际上不知道怎么做，你通常还是会很清楚什么能做到而什么不能做到！
+从这里开始，你大致就能在 HTML 元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。但是，只要你对 CSS 的基础知识有了扎实的了解，就没有做不到的事情了。学习 CSS 的最大好处之一就是，一旦你了解了 CSS 的基础知识，即使你还不知道如何操作，通常也能很好地了解哪些可以做到，哪些不可以做到！
+
+## “CSS 是怪异的”
+
+CSS 确实有些独特，它的工作方式与大多数编程语言和设计工具有些不同。为什么 CSS 会以这种方式工作呢？在下面的视频中，Miriam Suzanne 提供了一个有用的解释，说明了 CSS 为什么会这样工作，以及为什么它会这样演变：
+
+{{EmbedYouTube("aHUtMbJw8iA")}}
## 参阅
-- [CSS on MDN](/zh-CN/docs/Web/CSS)
- - : MDN 上 css 文档的主要入口，包括详细的参考到高级的教程一系列内容。
+- [MDN 上的 CSS 文档](/zh-CN/docs/Web/CSS)
+ - : MDN 上 CSS 文档的主要入口，可以在这里找到 CSS 语言所有特性的详细参考文档。想要了解某个属性可以取的所有值吗？这是一个很好的去处。
diff --git a/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
index 1de10629d16882..1063517502cb55 100644
--- a/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
+++ b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
@@ -3,6 +3,8 @@ title: Add a hit map on top of an image
slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
---
+{{QuickLinksWithSubpages("/zh-CN/docs/Learn/HTML/Howto")}}
+
现在我们将学习如何设置图像映射，先讨论他的缺点。
<table class="learn-box standard-table">
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index 66906863b6dfe6..414e0aac188f02 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -140,7 +140,8 @@ player:focus .controls {
font-family: "HeydingsControlsRegular";
src: url("fonts/heydings_controls-webfont.eot");
src:
- url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
+ url("fonts/heydings_controls-webfont.eot?#iefix")
+ format("embedded-opentype"),
url("fonts/heydings_controls-webfont.woff") format("woff"),
url("fonts/heydings_controls-webfont.ttf") format("truetype");
font-weight: normal;
diff --git a/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md b/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
index fc176a36abeb17..fe0b1925735b67 100644
--- a/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
+++ b/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
@@ -161,7 +161,7 @@ pratt = new Person("普拉特");
pratt.introduceSelf(); // '我是普拉特。'
```
-当一个方法拥有相同的函数名，但是在不同的类中可以具有不同的实现时，我们称这一特性为**多态**（polymorphism）。当一个方法在子类中替换了父类中的实现时，我们称之为子类**重写/重载**（override）了父类中的实现。
+当一个方法拥有相同的函数名，但是在不同的类中可以具有不同的实现时，我们称这一特性为**多态**（polymorphism）。当一个方法在子类中替换了父类中的实现时，我们称之为子类**重写**（override）了父类中的实现。
## 封装
diff --git a/files/zh-cn/learn/performance/multimedia/index.md b/files/zh-cn/learn/performance/multimedia/index.md
index b294cccfab85c2..073bb5b42f7f10 100644
--- a/files/zh-cn/learn/performance/multimedia/index.md
+++ b/files/zh-cn/learn/performance/multimedia/index.md
@@ -29,13 +29,13 @@ slug: Learn/Performance/Multimedia
</tbody>
</table>
-> **备注：** 这是对 Web 上多媒体传输进行优化的概要介绍，只涵盖了一般原理和技术。如需更深入的指南，请参阅 <https://images.guide>。
+> **备注：** 这是对 Web 上多媒体传输进行优化的概要介绍，只涵盖了一般原理和技术。如需更深入的指南，请参阅 <https://web.dev/learn/images>。
## 为何优化多媒体？
对于一般网站而言，[其带宽的 51% 来自图像，其次是视频占 25%](https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367)，因此可以说处理和优化多媒体内容非常重要。
-你需要考虑数据使用情况。许多人使用的是有限流量套餐，甚至是按使用量付费，每兆字节都要付费。这不仅仅是新兴市场的问题。截至 2018 年，[英国仍有 24% 的用户使用按使用量付费](https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf)。
+你需要考虑数据使用情况。许多人使用的是有限流量套餐，甚至是按使用量付费，每兆字节都要付费。这不仅仅是新兴市场的问题。截至 2018 年，[英国仍有 24% 的用户使用按量付费的套餐](https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf)。
你还需要考虑内存问题，因为许多移动设备的 RAM 有限。请记住，当图像下载后，它们需要存储在内存中。
@@ -77,7 +77,7 @@ PNG 可以以三种不同的输出组合进行保存：
> **备注：** 尽管 Apple [宣布在 Safari 14 中支持 WebP](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)，但在 Safari 版本 16.0 之前，`.webp` 图像无法在早于 Big Sur 版本的 macOS 桌面版本上正常显示，而 iOS 14 上的 Safari *却能*正常显示 `.webp` 图像。
-- [AVIF](/zh-CN/docs/Web/Media/Formats/Image_types#avif_图像)——由于其是高性能和免版税的图像格式（甚至比 WebP 更高效），它是用于图像和动图的不错选择（尽管不太广泛）。它现在受 Chrome、Opera 和 Firefox 的支持。另请参阅[将以前的图像格式转换为 AVIF 的在线工具](https://avif.io/)。
+- [AVIF](/zh-CN/docs/Web/Media/Formats/Image_types#avif_图像)——由于其是高性能和免版税的图像格式（甚至比 WebP 更高效），它是用于图像和动图的不错选择（尽管不太广泛）。它现在受 Chrome、Opera 和 Firefox 的支持。[Squoosh](https://squoosh.app/) 是一款出色的，可以将其他图像格式转换为 AVIF 的在线工具。
- **JPEG2000**——曾经是 JPEG 的继任者，但仅受 Safari 支持。也不支持渐进式显示。
鉴于 JPEG-XR 和 JPEG2000 的支持范围很窄，并且还要考虑解码成本，JPEG 的唯一真正竞争对手是 WebP。这就是为什么你也可以以该格式提供图像。这可以通过使用配备了 [type 属性](/zh-CN/docs/Web/HTML/Element/picture#type_属性)的 `<picture>` 元素和 `<source>` 元素来完成。
diff --git a/files/zh-cn/learn/performance/web_performance_basics/index.md b/files/zh-cn/learn/performance/web_performance_basics/index.md
index b9b74440890df6..fb69bb183fec09 100644
--- a/files/zh-cn/learn/performance/web_performance_basics/index.md
+++ b/files/zh-cn/learn/performance/web_performance_basics/index.md
@@ -3,6 +3,8 @@ title: Web performance basics
slug: Learn/Performance/Web_Performance_Basics
---
+{{LearnSidebar}}
+
有很多的[理由](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)告诉你为什么你的网站需要尽可能好的性能。下面是关于最佳实践，工具，API 以及链接的简明介绍，它为每个主题提供了更多的信息。意识到对用户来说什么是真正重要的也至关重要，他可能不是绝对意义上的时间而是[用户感知的时间](/zh-CN/docs/Learn/Performance/perceived_performance)。
#### 最佳实践
diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
index c423927ee794c8..96d0c8da872b05 100644
--- a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
+++ b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.md
@@ -3,6 +3,8 @@ title: Properly Configuring Server MIME Types
slug: Learn/Server-side/Configuring_server_MIME_types
---
+{{LearnSidebar}}
+
## Background
默认情况下，许多 web 服务器会为那些未知内容类型的文件配置一个默认 MIME 类型`text/plain` 或者`application/octet-stream` 。当一种新的内容类型被创造或者被添加到 web 服务器上，web 管理者在添加它到 web 服务器配置中可能会失败。主要原因是用户使用 Gecko-based 的浏览器，而这种浏览器只相信由 web 服务器和 web 应用所发布的 MIME 类型
diff --git a/files/zh-cn/learn/server-side/django/introduction/index.md b/files/zh-cn/learn/server-side/django/introduction/index.md
index caf02378d7592d..e3bcbbc0ab32a5 100644
--- a/files/zh-cn/learn/server-side/django/introduction/index.md
+++ b/files/zh-cn/learn/server-side/django/introduction/index.md
@@ -50,7 +50,7 @@ Django 可以使你的应用具有以下优点：
- : Django 帮助开发人员通过提供一个被设计为“做正确的事情”来自动保护网站的框架来避免许多常见的安全错误。例如，Django 提供了一种安全的方式来管理用户账户和密码，避免了常见的错误，比如将 session 放在 cookie 中这种易受攻击的做法（取而代之的是 cookies 只包含一个密钥，实际数据存储在数据库中）或直接存储密码而不是密码哈希。
- 密码哈希是通过[密码散列函数](https://en.wikipedia.org/wiki/Cryptographic_hash_function)发送密码而创建的固定长度值。Django 能通过运行哈希函数来检查输入的密码 - 就是 - 将输出的哈希值与存储的哈希值进行比较是否正确。然而由于功能的“单向”性质，即时存储的哈希值受到威胁，攻击者也难以解决原始密码。（但其实有彩虹表 - 译者观点）
+ _密码哈希是通过[密码散列函数](https://zh.wikipedia.org/wiki/密碼雜湊函數)发送密码而创建的固定长度值。Django 能通过运行哈希函数并将输出的哈希值与存储的哈希值进行比较来检查输入的密码是否正确。然而由于功能的“单向”性质，即使存储的哈希值被泄漏，攻击者也难以破解原始密码。_
默认情况下，Django 可以防范许多漏洞，包括 SQL 注入，跨站点脚本，跨站点请求伪造和点击劫持 (请参阅 [网站安全](/zh-CN/docs/Learn/Server-side/First_steps/Website_security) 相关信息，如有兴趣).
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
index 49c3c09d546c33..612b034748c114 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -1,6 +1,8 @@
---
title: 解决常见的无障碍问题
slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility
+l10n:
+ sourceCommit: af1e384356e21dbcc573d1c1cc015ec79c644de1
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
@@ -12,11 +14,11 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility
<tr>
<th scope="row">前提：</th>
<td>
- 熟悉<a href="/zh-CN/docs/Learn/HTML">HTML</a>,
- <a href="/zh-CN/docs/Learn/CSS">CSS</a>,和<a
+ 熟悉核心的 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a
+ href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a
href="/zh-CN/docs/Learn/JavaScript"
>JavaScript</a
- >语言; 理解<a
+ > 语言；理解<a
href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"
>跨浏览器测试原理</a
>
@@ -33,105 +35,98 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility
当我们在 web 技术的背景下说无障碍时，大多数人立即想到确保残疾人可以使用网站/应用程序，例如：
-- 视障人士使用屏幕阅读器或放大/缩放浏览文本
-- 有运动功能障碍的人使用键盘（或其他非鼠标功能）使用网站。
+- 视障人士使用屏幕阅读器或放大/缩放浏览文本。
+- 有运动功能障碍的人使用键盘（或其他非鼠标特性）使用网站。
- 有听力障碍的人依赖于替代音频/视频内容的文本。
-但是，说无障碍仅与残疾人有关是错误的。实际上，无障碍的目的是使你的网站/应用程序在尽可能多的环境中被尽可能多的人使用，而不仅仅是那些使用高性能台式计算机的用户。极端的例子可能包括：
+然而，认为无障碍设计仅与残障人士相关是不准确的。无障碍设计的真正目的是确保你的网站/应用程序能够被尽可能多的人在尽可能多的环境下使用，而不限于那些使用高性能台式电脑的用户。一些具体的例子可能包括：
- 移动端用户
-- 使用其他浏览设备（例如电视，手表等）
-- 使用较旧设备的用户（他们可能没有最新的浏览器）
-- 设备性能不高的用户（他们可能具有较慢的处理器）
+- 使用其他浏览设备（例如电视、手表等）的用户
+- 使用较旧设备（可能没有最新的浏览器）的用户
+- 设备性能不高（可能具有较慢的处理器）的用户
-在某种程度上，本模块都是关于无障碍的 — 跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇[无障碍是什么？](/zh-CN/docs/Learn/Accessibility/What_is_accessibility) 更全面透彻地定义了什么是无障碍。
+在某种程度上，本模块都是关于无障碍的——跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇[无障碍是什么？](/zh-CN/docs/Learn/Accessibility/What_is_accessibility)更全面透彻地定义了什么是无障碍。
-也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在其他地方已经讨论过其他领域，例如[响应式设计问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1%E9%97%AE%E9%A2%98)和[性能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Performance_issues)。
+也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在本模块的其他地方已经讨论过别的领域，例如[响应式设计问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#响应式设计问题)和[性能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#性能问题)。
-> **备注：** 就像 Web 开发中的许多事情一样，无障碍不是 100% 的成功或失败可以定义的；对于所有内容而言，几乎不可能实现 100％的无障碍，尤其是当站点变得越来越复杂时。我们更多的是通过防御性编码并遵循最佳实践，努力使尽可能多的人可以访问尽可能多的内容。
+> **备注：** 如同 Web 开发的许多方面一样，无障碍并非可以用 100% 的成功或失败来定义；实际上，对于所有内容来说，要达到完全的无障碍几乎是不可能的，特别是当网站变得越来越复杂。我们所做的，更多是采取防御性编程，并遵守最佳实践，以确保尽可能多的人能够访问到尽可能多的内容。
## 常见无障碍问题
在本节中，我们将围绕 Web 无障碍，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。
-> **备注：** 无障碍在道德上是正确的事情，对企业也有好处 (残疾用户，移动用户等构成了重要的细分市场), 并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#%E6%97%A0%E9%9A%9C%E7%A2%8D%E6%8C%87%E5%8D%97%E5%92%8C%E6%B3%95%E5%BE%8B)获取更多相关信息。
+> **备注：** 无障碍在道德上是正确的事情，对企业也有好处（残疾用户，移动用户等构成了重要的细分市场），并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。
### HTML
-HTML 语义化 (语义化正确地使用 HTML 标签) 对于无障碍来说是开箱即用的 — 这类内容可供无视障人士阅读（前提是你不会做任何愚蠢的事情，例如使文本变小或使用 CSS 隐藏它），也可被屏幕阅读器（从字面上读出网页的应用）之类的辅助技术使用，并赋予其他优势。
+HTML 语义化（即正确使用 HTML 标签）对无障碍访问至关重要——这样的内容不仅能为视障人士提供阅读可能（前提是避免诸如缩小文本或使用 CSS 隐藏内容等不当做法），还能被屏幕阅读器（能够朗读网页内容的应用程序）等辅助技术所利用，同时带来其他好处。
#### 语义化结构
-HTML 语义化最重要的捷径是为你的内容使用标题和段落的结构；这是因为屏幕阅读器用户倾向于将文档标题用作导航，以更快地找到他们需要的内容。如果你的内容没有标题，那么他们将获得的是一大坨文字，没有任何可定位的标记。坏的例子和好的例子如下：
+HTML 语义化的关键在于使用标题和段落结构来组织你的内容；这是因为屏幕阅读器的用户通常会利用文档标题进行导航，以便更快地定位他们所需的信息。如果你的内容缺少标题，那么他们面对的将是一堆无法轻易导航的文本，缺乏明确的定位标识。以下是不佳与佳的示例：
-```html example-bad
-<font size="7">My heading</font> <br /><br />
-This is the first section of my document.
+```html 错误示例
+<font size="7">我的标题</font> <br /><br />
+这是我文档的第一部分。
<br /><br />
-I'll add another paragraph here too.
+我还会在这里添加另一个段落。
<br /><br />
-<font size="5">My subheading</font>
+<font size="5">我的子标题</font>
<br /><br />
-This is the first subsection of my document. I'd love people to be able to find
-this content!
+这是我文档的第一个子部分。我希望人们能够找到这些内容！
<br /><br />
-<font size="5">My 2nd subheading</font>
+<font size="5">我的第二个子标题</font>
<br /><br />
-This is the second subsection of my content. I think is more interesting than
-the last one.
+这是我内容的第二个子部分。我认为这比上一个更有趣。
```
-```html example-good
-<h1>My heading</h1>
+```html 正确示例
+<h1>我的标题</h1>
-<p>This is the first section of my document.</p>
+<p>这是我文档的第一部分。</p>
-<p>I'll add another paragraph here too.</p>
+<p>我还会在这里添加另一个段落。</p>
-<h2>My subheading</h2>
+<h2>我的子标题</h2>
-<p>
- This is the first subsection of my document. I'd love people to be able to
- find this content!
-</p>
+<p>这是我文档的第一个子部分。我希望人们能够找到这些内容！</p>
-<h2>My 2nd subheading</h2>
+<h2>我的第二个子标题</h2>
-<p>
- This is the second subsection of my content. I think is more interesting than
- the last one.
-</p>
+<p>这是我内容的第二个子部分。我认为这比上一个更有趣。</p>
```
-此外，你的内容应该在逻辑顺序上讲得通的 — 你总能在以后再为它们写 CSS，但你应该在一开始就确定内容正确的顺序。
+此外，你的内容的源代码应符合逻辑顺序——你总能在以后再为它们写 CSS，但你应该在一开始就确定源代码正确的顺序。
-作为测试，你可以关闭网站的 CSS，然后看看没有了 CSS 网站是否能被理解。你可以通过从代码中删除 CSS 来手动完成此操作，但是最简单的方法是使用浏览器功能，例如：
+作为测试，你可以关闭网站的 CSS，然后看看没有了 CSS 网站是否能被理解。你可以通过从代码中删除 CSS 来手动完成此操作，但是最简单的方法是使用浏览器特性，例如：
-- Firefox: 选择*查看 > 页面样式 > 无样式*
-- Safari: 选择*开发 > 停用样式* (需要开启“开发”菜单，点击*Safari > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单*)
-- Chrome: 安装 Web Developer Toolbar 扩展程序，然后重启浏览器。点击图标，选择*CSS > 停用所有样式*
-- Edge: 选择*查看 > 样式 > 无样式*
+- Firefox：选择*查看 > 页面样式 > 无样式*
+- Safari：选择*开发 > 停用样式*（需要开启“开发”菜单，点击 _Safari > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单_）
+- Chrome：安装 Web Developer Toolbar 扩展程序，然后重启浏览器。点击图标，选择 _CSS > 停用所有样式_
+- Edge：选择*查看 > 样式 > 无样式*
-#### 使用键盘
+#### 使用键盘原生无障碍性
-某些 HTML 功能可以使用键盘来选择 — 这是默认的，从早期 web 开始就是这样的。具有此功能的元素是允许用户与网页交互的常见元素，比如 links, {{htmlelement("button")}}s, 以及表单元素，比如{{htmlelement("input")}}.
+某些 HTML 特性可以只使用键盘来选择——这是默认的，从早期 web 开始就是这样的。具有此功能的元素是允许用户与网页交互的常见元素，比如链接、{{htmlelement("button", "按钮")}}，以及表单元素，比如 {{htmlelement("input")}}。
-浏览[native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (查看[源码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) 尝试一下— 在新标签页中打开它，然后尝试按 Tab 键；按下几下后，你应该看到标签焦点开始在不同的可聚焦元素之间移动；在每个浏览器中，被聚焦的元素都被赋予突出的默认样式 (不同的浏览器表现略有不同) 以便你能分辨聚焦在哪个元素上。
+浏览 [native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)（查看[源码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)）尝试一下——在新标签页中打开它，然后尝试按 Tab 键；按下几下后，你应该看到标签焦点开始在不同的可聚焦元素之间移动；在每个浏览器中，被聚焦的元素都被赋予突出的默认样式 (不同的浏览器表现略有不同) 以便你能分辨聚焦在哪个元素上。
-
+
-然后，你可以按 Enter / Return 键来关注焦点链接，或者按一个按钮（我们已经包含一些 JavaScript 来使按钮提醒消息），或者在输入框开始输入文本，（其他表单元素具有不同的控件，例如{{htmlelement("select")}}元素可以使用向上和向下箭头键显示和循环显示其选项）。
+> **备注：** 在 Firefox 中，你还可以启用一个叠加层来显示页面的标签顺序。有关更多信息，请参见：[Accessibility Inspector > Show web page tabbing order](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order)。
-请注意，不同的浏览器可能具有不同的键盘控制选项。大多数现代浏览器都遵循上述的标签模式（你也可以执行 Shift + Tab 来向后移动可聚焦元素），但是某些浏览器具有自己的特性：
+然后你可以按 Enter/Return 键来跟随聚焦的链接或按下按钮（我们已经包含了一些 JavaScript 来使按钮显示一条消息），或开始输入以在文本输入框中输入文本（其他表单元素有不同的控制方式，例如 {{htmlelement("select")}} 元素可以使用向上和向下箭头键显示和循环其选项）。
-- Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to go to _Preferences > Advanced > General_, then uncheck "Always use the cursor keys to navigate within pages". Next, you have to open your Mac's System Preferences app, then go to _Keyboard > Shortcuts_, then select the _All Controls_ radio button.
-- Safari 默认情况下不允许你按 tab 遍历链接；要启用此功能，你需要打开 Safari 的“_偏好设置_”，转到“_高级_”，然后选中“_按下 Tab 键以高亮显示网页上的每一项_”。
+请注意，不同的浏览器可能有不同的键盘控制选项可用。大多数现代浏览器都遵循上述 tab 模式（你也可以使用 Shift + Tab 向后移动浏览可聚焦元素），但一些浏览器有自己的特点：
-> **警告：** 你应该在所写的任何新页面上执行这种测试 — 确保可以通过键盘使用功能。
+- 默认情况下，Safari 浏览器在 Mac 上不能通过 Tab 键在各个链接间切换。要激活这项功能，请打开*系统偏好设置*，滚动至*键盘*选项，并开启*使用 Tab 键移动焦点*。如果你使用的是较旧版本的 macOS，请查阅 Apple 的 macOS 用户指南中的[使用键盘来代替鼠标操作 Mac](https://support.apple.com/zh-cn/guide/mac-help/mchlp1399/mac)一节。
-这个例子强调了正确使用语义元素的重要性。可以用 CSS 将任何元素的样式设置为看起来像链接或按钮，并使用 JavaScript 让其表现为像链接或按钮一样，但实际上它们不是链接或按钮，你将失去很多语义化元素带给你的无障碍。因此，尽量避免这样做。
+> **警告：** 你应该对你编写的任何新页面执行此类测试/审查——确保功能可通过键盘访问，并且 Tab 浏览顺序遵守贯穿文档的合理导航路径。
-另一个技巧 — 如我们的示例所示，你可以使用[:focus](/zh-CN/docs/Web/CSS/:focus)伪类控制可聚焦元素在聚焦时的外观。最好将焦点和悬停样式加重显示，这样无论是使用鼠标还是键盘的用户，都能直观地察觉控件在被激活时将执行的操作
+这个例子强调了使用正确的语义元素来执行适当任务的重要性。你可以用 CSS 设计任何元素，使其看起来像链接或按钮，并用 JavaScript 让它们的行为类似于链接或按钮，但实际上它们并不是真正的链接或按钮。这样做，你会失去这些元素本身就提供的许多无障碍特性，而且这些特性是免费的。因此，如果可能的话，你应该避免这样做。
+
+另一个建议——正如我们的示例所展示的，你可以使用 [:focus](/zh-CN/docs/Web/CSS/:focus) 伪类来控制可聚焦元素在聚焦时的样式。最佳实践是将焦点和悬停样式结合使用，这样无论用户是使用鼠标还是键盘，都能通过视觉提示了解控件在激活时的行为。
```css
a:hover,
@@ -146,297 +141,443 @@ select:focus {
}
```
-> **备注：** 如果你决定使用 CSS 删除默认的焦点样式，请确保将其替换为更适合你的设计的其他样式 — 这是一种非常有价值的无障碍工具，不应删除。
+> **备注：** 如果你决定使用 CSS 移除默认焦点样式，请确保用其他更适合你的设计的东西替换它——这是一个非常有价值的无障碍工具，不应该被删除。
-#### 模拟键盘
+#### 构建键盘无障碍性
-有时可能无法使用键盘完成无障碍。你可能有一个语义不是很好的网站（也许你最终得到了一个糟糕的 CMS 网页，该 CMS 生成了由\<div> 组成的按钮），或者你正在使用一个没有内置键盘无障碍的复杂控件，例如 HTML5 {{htmlelement("video")}} 元素（令人惊奇的是，Opera 是唯一允许你在\<video>元素的默认浏览器控件之间进行制表的浏览器）。你有几种选择：
+有时候，无法避免键盘无障碍性的丧失。你可能继承了一个语义结构不佳的网站（比如，你不得不使用一个生成 `<div>` 按钮的糟糕内容管理系统），或者你正在使用一个缺乏内置键盘无障碍性支持的复杂控件，例如 HTML {{htmlelement("video")}} 元素（令人意外的是，Opera 是唯一支持 Tab 键导航 `<video>` 元素的默认浏览器控件的浏览器）。以下是一些可行的解决方案：
-1. 使用\<button>元素（默认情况下都是可以在 button 间使用 Tab 键）和 JavaScript 创建自定义控件，以连接其功能。有关此示例，请参见[Creating a cross-browser video player](/zh-CN/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player)。
-2. 通过 JavaScript 创建键盘快捷键，因此当你按键盘上的某些键时，功能被激活。请参阅[Desktop mouse and keyboard controls](/zh-CN/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)，以获取一些可用于任何目的（比如游戏）的例子。
-3. 使用一些有趣的策略来伪造按钮行为。以我们的[fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)示例为例（[查看源码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)）。这里我们通过为每个假按钮赋予属性`tabindex="0"`（请参阅 WebAIM 的[tabindex 文章](http://webaim.org/techniques/keyboard/tabindex)以获取更多详细信息），使假的\<div>按钮能够被聚焦（包括通过制表符）。这使我们可以跳到按钮上，但不能通过回车键激活它们。为此，我们必须添加以下 JavaScript 代码：
+1. 使用 `<button>` 元素（默认情况下我们可以通过 Tab 键导航至该元素！）和 JavaScript 来创建自定义控件，并实现其功能。请参见[创建跨浏览器的视频播放器](/zh-CN/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player)了解一些很好的示例。
+2. 通过 JavaScript 创建键盘快捷键，以便在按下某些键时激活功能。请参见[桌面鼠标和键盘控制](/zh-CN/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)了解一些可以适用于任何目的的游戏相关示例。
+3. 使用一些有趣的技巧来模拟按钮行为。例如，我们的 [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) 示例（参见[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)）。在这里，我们给我们的假 `<div>` 按钮添加了 `tabindex="0"` 属性，使它们可以获得焦点（包括通过 tab 键）。参见 WebAIM 的 [tabindex 文章](https://webaim.org/techniques/keyboard/tabindex)获取更多有用的细节。虽然这使我们能够通过 Tab 键导航到按钮，但无法通过 Enter/Return 键激活它们。要做到这一点，我们必须添加以下 JavaScript 技巧：
```js
- document.onkeydown = function (e) {
- if (e.keyCode === 13) {
- // The Enter/Return key
+ document.onkeydown = (e) => {
+ if (e.code === "Enter") {
+ // Enter/Return 键
document.activeElement.onclick(e);
}
};
```
- 在这里，我们向`document`对象添加了一个监听器，以检测何时按下了键盘上的按钮。我们通过事件对象的 keyCode 属性检查按下了什么按钮；如果它是与回车键匹配的键码，则使用`document.activeElement.onclick()`运行存储在按钮的 onclick 处理程序中的函数。`document.activeElement`为我们提供了当前页面上被聚焦的元素。
+ 这里我们给 `document` 对象添加了一个监听器，用于检测何时在键盘上按下按钮。我们通过事件对象的 [`code`](/zh-CN/docs/Web/API/KeyboardEvent/code) 属性检查按下了哪个按钮；如果它是与 Return/Enter 匹配的键码，我们将使用 `document.activeElement.onclick()` 运行存储在按钮的 `onclick` 处理程序中的函数。[`activeElement`](/zh-CN/docs/Web/API/Document/activeElement) 为我们提供了当前页面上获得焦点的元素。
-> **备注：** 仅当你通过事件处理程序属性（例如`onclick`）设置原始事件处理程序时，此技术才有效。`addEventListener`将无法正常工作。重新构建功能会有很多额外的麻烦。并且肯定还有其他问题。最好能从根源解决问题，使用正确的语义化元素。
+> **备注：** 此技术只有在你通过事件处理器属性（例如 `onclick`）设置原始事件处理器的情况下才有效。`addEventListener` 不会起作用。这会给构建功能带来许多额外的困难，并且很可能会引入其他问题。最好的办法是为每个任务使用正确的元素。
#### 替代文本
-替代文本对于无障碍非常重要 — 如果一个人有视觉或听觉障碍使他们无法看到或听到某些内容，那么这就是一个问题。可用的最简单的文本替代方法是`alt`属性，我们应该在所有包含相关内容的图像上包括该属性。其中应包含对图像的描述，该描述可在页面上成功传达其含义和内容，并由屏幕阅读器读取并读出给用户。
+替代文本对无障碍性至关重要——对于视觉或听觉障碍者来说，如果无法看到或听到某些内容，这将是一个障碍。最简单且常用的文本替代方法是使用 `alt` 属性，我们应在所有包含关键内容的图像上使用该属性。它应包含能够在页面上成功传达图像意义和内容的描述，并能被屏幕阅读器读取，从而朗读给用户听。
> **备注：** 更多信息请阅读[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)。
可以通过多种方法来测试缺少的替代文本，例如，使用无障碍[审计工具](#审计工具)。
-对于视频和音频内容，Alt 文本稍微复杂一些。有一种方法可以定义文本轨道（例如，字幕）并在播放视频时以 {{htmlelement("track")}} 元素和 [WebVTT](/zh-CN/docs/Web/API/WebVTT_API) 格式的形式显示它们（请参见[向 HTML 视频中添加字幕](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#浏览器兼容性)相当好，但是如果你想提供音频的替代文本或支持较旧的浏览器，则在页面某处或单独页面上显示一个简单的文本记录可能是个好主意。
+视频和音频内容的替代文本稍微更加复杂一些。有一种方式可以定义文本轨道（如字幕），并在播放视频时显示它们，那就是使用 {{htmlelement("track")}} 元素和 [WebVTT](/zh-CN/docs/Web/API/WebVTT_API) 格式（参见[为 HTML 视频添加字幕和字幕](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)的详细教程）。这些特性在[浏览器兼容性](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#浏览器兼容性)方面相当好，但如果你想为音频提供文本替代方案或支持较旧的浏览器，在同一页面上或单独的页面上提供一个简单的文本记录可能是个不错的主意。
#### 元素关系和上下文
-HTML 中有某些功能和最佳实践，旨在提供元素之间的上下文和关系。三个最常见的示例是链接，表单标签和数据表。
+在 HTML 中，一些特性和最佳实践被设计来为元素间提供上下文和关系，即便这些元素本身并不具有这些关系。链接、表单标签和数据表格是三个常见的例子。
-使用屏幕阅读器的人们通常会使用一项共同的功能，即他们会拉出页面上所有链接的列表。在这种情况下，链接文本需要脱离上下文。例如，标记为“单击此处”，“单击此处”等的链接列表确实对无障碍不利。链接文本最好在上下文和上下文之外都有意义。
+无障碍链接文本的关键是，使用屏幕阅读器的人通常会调用一个特性——显示页面上所有链接的列表。在这种情况下，链接文本需要在上下文中和上下文之外都具有意义。例如，标记为“点击这里”或“点击我”的链接序列是不合适的。最佳做法是让链接文本在任何上下文中都有意义。
-表单{{htmlelement("label")}}元素是允许我们使表单可访问的主要功能之一。表单的麻烦在于，你需要标签来说明应在每个表单输入中输入哪些数据。每个标签都必须包含在{{htmlelement("label")}}内，以将其明确链接到其对应的表单输入框（属性值的每个`<label>`的`for`属性值必须与表单元素`id`值匹配），即使源顺序不是完全合乎逻辑的，也能提供很好的无障碍。
+接下来是表单中的 {{htmlelement("label")}} 元素，这是确保表单无障碍的关键特性之一。表单的挑战在于，你需要标签来指明每个表单输入应该输入的数据。每个标签都应该包含在 {{htmlelement("label")}} 中，并且与其对应的表单输入明确关联（每个 `<label>` 的 `for` 属性值需要与表单元素的 `id` 值相匹配），即使源代码的顺序并不完全合理（尽管它应该是合理的）。
-> **备注：** 更多关于链接文本和表单标签，请阅读[有意义的文字标签](/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80#%E6%9C%89%E6%84%8F%E4%B9%89%E7%9A%84%E6%96%87%E5%AD%97%E6%A0%87%E7%AD%BE)
+> **备注：** 有关链接文本和表单标签的更多信息，请参阅[有意义的文本标签](/zh-CN/docs/Learn/Accessibility/HTML#有意义的文本标签)。
-最后，简要介绍一下数据表。基本数据表可以用非常简单的标记编写（请参阅[bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html)和[源码](https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html))），但这存在问题 — 屏幕阅读器用户无法将行或列作为数据分组关联在一起，但你需要知道标题行是什么，以及标题行行的标题还是列的标题等。这些只能从可视化的表格才能知道。
+最后，让我们简要讨论一下数据表格。使用非常简单的标记，你可以编写基本的数据表格（参见 `bad-table.html` 的[在线演示](https://mdn.github.io/learning-area/accessibility/html/bad-table.html)和[源代码](https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html)），但这样做会有问题——屏幕阅读器用户无法将行或列作为数据分组——为此，你需要标明哪些是标题行，以及它们是用于标题行还是标题列等。这样的表格只能通过视觉方式来识别。
-相反，如果你看一下我们的`punk-bands-complete.html`示例（[示例](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)，[源码](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html)），则可以在此处看到一些无障碍辅助，例如表头（{{htmlelement("th")}}和`作用域`属性），{{htmlelement("caption")}}元素等。
+相反，如果你查看我们的 `punk-bands-complete.html` 示例（[在线演示](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)，[源代码](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html)），你会发现这里使用了一些辅助功能，如表头（{{htmlelement("th")}} 和 `scope` 属性）、{{htmlelement("caption")}} 元素等。
-> **备注：** 更多信息，请阅读[可访问的表格](/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80#%E5%8F%AF%E8%AE%BF%E9%97%AE%E7%9A%84%E8%A1%A8%E6%A0%BC)
+> **备注：** 有关无障碍数据表格的更多信息，请参阅[无障碍数据表格](/zh-CN/docs/Learn/Accessibility/HTML#无障碍数据表格)。
### CSS
-CSS 往往提供的基本无障碍功能要比 HTML 少得多，但是如果使用不当，它仍然会对无障碍造成同样的损害。下面是一些涉及 CSS 的无障碍的点：
+CSS 虽然提供的基本无障碍特性不如 HTML 多，但如果使用不当，同样会对无障碍造成影响。以下是一些关于 CSS 无障碍性的要点：
-- 使用正确的语义元素修饰 HTML 中的不同内容；如果要创建不同的视觉效果，请使用 CSS-不要滥用 HTML 元素来获得所需的外观。例如，如果你想要更大的文本，请使用{{cssxref("font-size")}}，而不是{{htmlelement("h1")}}标签。
-- 确保内容顺序在没有 CSS 的情况下有意义；你可以随时使用 CSS 设置页面样式。
-- 你应该确保按钮和链接之类的交互元素具有适当的聚焦/悬停/活动状态设置，以便用户能姨一目了然。如果出于风格原因删除默认设置，请确保包括一些替代的样式。
+- 使用正确的语义元素来修饰 HTML 中的不同内容；如果你想要实现不同的视觉效果，请使用 CSS——不要滥用 HTML 元素来达到所需的外观。例如，如果你需要更大的文本，请使用 {{cssxref("font-size")}} 属性，而不是 {{htmlelement("Heading_Elements", "h1")}} 标签。
+- 确保在没有 CSS 的情况下，内容的顺序仍然是有意义的；你可以使用 CSS 来随时改变页面的样式。
+- 应确保按钮和链接等交互元素具有适当的聚焦/悬停/活动状态样式，以便用户能够清晰地识别。如果因风格需求而移除了默认样式，请确保提供一些替代的样式。
还有其他几个需要注意的地方。
#### 颜色和颜色对比度
-为你的网站选择配色方案时，应确保文本（前景）颜色与背景颜色形成鲜明对比。你的设计可能看起来很酷，但是如果视力障碍者（例如色盲）无法阅读你的内容，那就不好了。使用 WebAIM 的[Color Contrast Checker](http://webaim.org/resources/contrastchecker/)之类的工具来检查你的方案是否有足够对比度。
+在为你的网站选择配色方案时，应确保文本（前景）颜色与背景颜色之间有足够的对比度。设计可能看起来很酷，但如果视力障碍者（如色盲）无法阅读内容，那就不理想了。可以使用 WebAIM 的[颜色对比度检查器](https://webaim.org/resources/contrastchecker/)等工具来检查你的配色方案是否具有足够的对比度。
-另一个提示是不要仅依靠颜色来表示界标/信息，因为这对于看不见颜色的人来说是不好的。例如，不要将所需的表单字段标记为红色，而应使用星号和红色标记它们。
+另一个建议是不要仅依赖颜色来传达标记或信息，因为这对于色盲人士来说不太友好。例如，不应仅将必填的表单字段标记为红色，而应同时使用星号和红色来标记它们。
-> **备注：** 高对比度也可以让使用带有光滑屏幕的设备（例如智能手机或平板电脑）的人在明亮的环境（例如阳光）下可以更好地阅读页面。
+> **备注：** 高对比度也有助于在明亮环境下（如直射日光）使用反光屏幕设备（如智能手机或平板电脑）的用户更好地阅读页面。
-#### 隐藏的内容
+#### 隐藏内容
-在许多情况下，视觉设计要求并非一次显示所有内容。例如，在我们的[Tabbed info box example](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)“示例（查看[源码](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)）中，我们有三个信息面板，但是我们将它们放在彼此的顶部，用户可以通过单击以显示每个选项卡（也可以通过键盘访问 — 可以使用 Tab 键和回车键选择它们）。
+在许多情况下，视觉设计并不要求一次性展示所有内容。例如，在我们的[标签信息框示例](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)中（参见[源代码](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)），虽然有三个信息面板，但我们选择将它们[定位](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)重叠在一起，并提供了标签，你可以通过点击他们来分别显示每个面板的内容（这些标签也支持键盘操作——你可以使用 Tab 和 Enter/Return 键来选择它们）。
-
+
-屏幕阅读器用户根本不关心这些，只要源内容顺序有意义，他们就很满意，并且他们可以全部获取。绝对定位（在本示例中使用的定位）通常被视为隐藏内容以产生视觉效果的最佳机制之一，因为它不会阻止屏幕阅读器获取相关内容。
+对于屏幕阅读器用户来说，这些都不是问题——只要内容的源代码顺序合理，他们就能访问到所有信息。绝对定位（如本示例所用）通常被认为是为了视觉效果而隐藏内容的最佳方法之一，因为它不会阻碍屏幕阅读器访问内容。
-另一方面，你不应该使用{{cssxref("visibility")}}`:hidden`或者{{cssxref("display")}}`:none`, 因为它们会让屏幕阅读器取不到那些内容，除非你真的想让屏幕阅读器不读取那些内容。
+另一方面，你不应使用 {{cssxref("visibility")}}`:hidden` 或 {{cssxref("display")}}`:none`，因为它们确实会使内容对屏幕阅读器隐藏。当然，除非你有充分的理由希望这些内容对屏幕阅读器保持不可见。
-> **备注：** [Invisible Content Just for Screen Reader Users](http://webaim.org/techniques/css/invisiblecontent/)有更多关于这个话题的详细信息
+> **备注：** 关于[仅对屏幕阅读器用户隐藏的内容](https://webaim.org/techniques/css/invisiblecontent/)，有更多有用的细节可以参考。
### JavaScript
-就无障碍而言，JavaScript 具有与 CSS 相同的问题 — 如果使用不当或使用过度，无障碍可能会很糟糕。我们已经提到了与 JavaScript 相关的一些无障碍问题，主要是在 HTML 语义化那块 — 你应该始终使用适当的语义化 HTML 来在合适的地方实现功能，例如，适当地使用链接和按钮。尽量不要使用 JavaScript 代码中结合`<div>`元素来伪造功能 — 容易出错，并且比直接使用 HTML 标签还要做更多的工作。
+就无障碍而言，JavaScript 具有与 CSS 相同的问题——如果使用不当或使用过度，无障碍可能会很糟糕。我们已经提到了与 JavaScript 相关的一些无障碍问题，主要是在 HTML 语义化那块——你应该始终尽可能使用适当的语义化 HTML 来实现功能，例如，适当地使用链接和按钮。尽量不要使用 JavaScript 代码中结合 `<div>` 元素来伪造功能——容易出错，并且比直接使用 HTML 标签还要做更多的工作。
-#### 简单的功能
+#### 简单功能
-通常，简单的功能只应使用 HTML 标签完成 — JavaScript 仅用于增强功能，而不能用于实现简单功能。好的 JavaScript 用法包括：
+通常，只需 HTML 即可实现简单功能——JavaScript 应仅用于增强功能，而不是完全构建功能。JavaScript 的良好用途包括：
-- 提供客户端表单验证，可在不等待服务器检查数据的情况下，迅速向用户发出有关表单条目问题的警报。如果不能在客户端验证，则该表格仍然可以使用，但验证速度可能会较慢。
-- 提供全键盘用户可访问的 HTML5 `<video>`的自定义控件（如我们之前所述，默认浏览器视频控件在大多数浏览器中均无法通过键盘访问）。
+- 提供客户端表单验证，它可以快速地提醒用户表单输入的问题，无需等待服务器检查数据。如果没有可用的 JavaScript，表单仍然可以工作，但验证可能会更慢。
+- 为 HTML `<video>` 提供自定义控件，使其对仅使用键盘的用户无障碍（如我们之前所说，大多数浏览器中的默认浏览器控件不可通过键盘访问）。
-> **备注：** WebAIM 的[Accessible JavaScript](http://webaim.org/techniques/javascript/)提供了一些关于 JavaScript 无障碍注意事项的信息。
+> **备注：** WebAIM 的[无障碍 JavaScript](https://webaim.org/techniques/javascript/) 提供了一些关于无障碍 JavaScript 方面值得考虑的有用细节。
-更复杂的 JavaScript 实现可能会带来无障碍问题 — 你需要尽力而为。例如，期望让使用 WebGL 编写的复杂 3D 游戏对盲人来说 100％无障碍是不合理的，但是你可以实现键盘控件，以便非鼠标用户可以使用它，并使配色方案具有足够的对比度供有颜色分辨障碍的人使用。
+更复杂的 JavaScript 实现可能会引起无障碍性问题——你需要尽力而为。例如，对于使用 [WebGL](/zh-CN/docs/Glossary/WebGL) 编写的复杂 3D 游戏，期望其对盲人用户实现 100% 的无障碍是不现实的。但是，你可以实施[键盘控制](/zh-CN/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)，以便非鼠标用户也能使用，并且调整配色方案，确保色觉缺陷者也能够辨识。
-#### 复杂的功能
+#### 复杂功能
-无障碍存在问题的主要领域之一是复杂的应用程序，其中涉及复杂的表单控件（例如日期选择器）和动态内容，内容会经常增量更新。
+复杂应用程序是无障碍性面临的主要挑战之一，尤其是那些涉及到复杂表单控件（如日期选择器）和动态内容频繁增量更新的场景。
-非自带的复杂的表单控件可能会存在问题，因为它们往往涉及大量嵌套的`<div>`，浏览器默认情况下不知道如何处理它们。如果你自己开发控件，则需要确保它们可以通过键盘访问。如果你使用的是某种第三方框架，请在开始使用之前仔细检查可用的选项以了解它们是否具有完备的无障碍。例如，Bootstrap 就对无障碍有相当好的支持（尽管 Rhiana Heath 的[Making Bootstrap a Little More Accessible](https://www.sitepoint.com/making-bootstrap-accessible/)探讨了它的一些问题（主要与色彩对比度有关），并着眼于一些解决方案）。
+非原生的复杂表单控件可能存在无障碍性问题，因为它们通常包含大量嵌套的 `<div>` 元素，而浏览器默认不会适当处理这些元素。如果你是控件的开发者，你需要确保它们可以通过键盘进行操作。如果你采用的是第三方框架，请在使用前仔细检查其无障碍性支持情况。例如，[Bootstrap](https://getbootstrap.com/) 对无障碍性支持相对较好（尽管 Rhiana Heath 在[让 Bootstrap 更无障碍](https://www.sitepoint.com/making-bootstrap-accessible/)一文中指出了一些问题，主要是关于颜色对比度的问题，并提出了一些解决方案）。
-定期更新的动态内容可能会成为问题，因为屏幕阅读器用户可能会错过这些内容，尤其是在意外更新的情况下。如果你有一个包含主要内容面板的单页应用程序，该应用程序使用[XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest)或[Fetch](/zh-CN/docs/Web/API/Fetch_API)定期更新，那么屏幕阅读器用户可能会错过这些更新。
+动态内容的定期更新也可能导致问题，因为屏幕阅读器用户可能会错过这些更新，特别是在内容意外更新时。如果你有一个单页应用程序，其中包含一个主要内容面板，并且该应用程序使用 [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest) 或 [Fetch](/zh-CN/docs/Web/API/Fetch_API) 进行定期更新，那么屏幕阅读器用户可能会错过这些更新。
-#### WAI-ARIA
+#### WAI-ARIA 的应用
-你是否需要使用这种复杂的功能，或者使用普通的旧语义化 HTML 代替？如果确实需要复杂性，则应考虑使用[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/)（Accessible Rich Internet Applications - 可访问的互联网应用），该规范为诸如复杂的表单控件和更新面板之类的项目提供了语义（以新的 HTML 属性形式），这样大部分浏览器和屏幕阅读器就能理解内容。
+在开发中，你是否真的需要使用复杂的功能，还是可以用传统的语义化 HTML 来替代？如果复杂功能确实必要，那么你应该考虑使用 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/)（无障碍富互联网应用），这个规范通过新增的 HTML 属性为复杂的表单控件和更新面板等元素提供了必要的语义信息，使得大多数浏览器和屏幕阅读器能够理解它们的内容。
-要处理复杂的表单窗口小部件，你需要使用 ARIA 属性（例如`roles`）来声明窗口小部件中不同元素的角色（例如，它们是选项卡还是选项卡面板？），用`aria-disabled`来表示控件是否禁用等。
+对于复杂的表单小部件，你需要利用 ARIA 的属性（如 `roles`）来定义小部件中各个元素的角色（它们是选项卡还是选项卡面板？），以及使用 `aria-disabled` 来标示控件是否被禁用等。
-要处理内容定期更新的区域，可以使用`aria-live`属性，该属性标识更新区域。它的值指示屏幕阅读器如何处理更新内容：
+对于需要定期更新内容的区域，你可以使用 `aria-live` 属性来标识这些更新区域。该属性的值会指导屏幕阅读器如何处理更新的内容：
-- `off`: 默认值。更新内容不被读出。
-- `polite`: 当用户空闲时读出更新内容。
-- `assertive`: 尽快读出更新内容。
-- `rude`: 直接读出更新内容，即使会打断用户正常阅读。
+- `off`：默认值，不朗读更新的内容。
+- `polite`：在用户不忙时朗读更新的内容。
+- `assertive`：优先朗读更新的内容。
+- `rude`：立即朗读更新的内容，即便这会中断用户当前的阅读。
-例子如下：
+以下是一个示例：
```html
<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
```
-浏览 Freedom Scientific 的[ARIA (Accessible Rich Internet Applications) 动态更新区域](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm)示例 — 高亮显示的段落每 10 秒更新一次内容，屏幕阅读器应将此内容读出给用户。[ARIA Live Regions - Atomic](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm)是另一个很有用的例子。
+你可以参考 Freedom Scientific 的 [ARIA 动态更新区域](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm)示例——其中高亮的段落每 10 秒更新一次内容，并且屏幕阅读器会将这些内容读给用户听。[ARIA 动态区域——原子化](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm)也是一个很有价值的例子。
-我们这里没有足够的空间来详细介绍 WAI-ARIA，你可以在[WAI-ARIA basics](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)了解更多。
+虽然这里没有足够的空间来详细介绍 WAI-ARIA，但你可以通过 [WAI-ARIA 基础](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)来了解更多相关信息。
-## 无障碍测试工具
+## 无障碍工具
现在，我们已经介绍了不同 Web 技术的无障碍注意事项，包括一些测试方法（例如键盘导航和颜色对比度检查器），让我们看一下在进行无障碍测试时可以使用的其他工具。
### 审计工具
-你可以使用许多审计工具检查你的网页，这些审计工具将检查它们并返回页面上存在的无障碍问题列表。一些审计工具：
-
-- [Tenon](https://tenon.io): 一个相当不错的在线应用程序，它通过提供的 URL 遍历代码，并返回有关无障碍错误的结果，包括度量标准，特定错误以及它们影响的 WCAG 标准以及建议的修复方式。
-- [tota11y](http://khan.github.io/tota11y/): Khan Academy 的无障碍工具，采用 JavaScript 库的形式，你可以将其附加到页面上，以提供许多无障碍工具。
-- [Wave](http://wave.webaim.org/): 另一个在线无障碍测试工具，它接受网址并返回该页面带注释的视图，其中高亮显示了无障碍问题。
+市面上有许多审计工具，你可以向其输入网页信息。这些工具会检查网页并返回一个列表，列出页面上存在的无障碍性问题。以下是一些例子：
-看下面的例子，我们用的是 Tenon。
+- [Wave](https://wave.webaim.org/)：这是一个相当优秀的在线无障碍性测试工具。它允许用户输入网址，并提供带有注释的页面视图，突出显示了无障碍性问题。
+- [Tenon](https://tenon.io)：这也是一个不错的在线工具，它会检查输入的 URL 中的代码，并返回关于无障碍性错误的详细结果，包括问题指标、具体错误、受影响的 WCAG 标准以及建议的修复措施。要查看结果，需要注册，该工具提供了免费试用。
-1. 访问[Tenon 主页](https://tenon.io)。
-2. 使用[bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)示例测试，输入链接地址并按下*Analyse Your Webpage（译者注：开始分析你的网页）。*
-3. 下滑，直到你看到错误/描述部分，如下图。
+我们来看一个使用 Wave 的例子：
-
+1. 访问 [Wave 的主页](https://wave.webaim.org/)。
+2. 在页面顶部的文本输入框中输入我们的 [`bad-semantics.html`](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) 示例的 URL。然后按下回车键或点击输入框右侧的箭头。
+3. 该网站会响应并指出无障碍性问题。点击显示的图标可以查看 Wave 评估识别出的每个问题的详细信息。
-你还可以探索一些选项（请参阅页面顶部附近的*Show Options（译者注：显示选项）*链接），或者使用 Tenon 的 API。
-
-> **备注：** 这些工具不足以单独解决你的所有无障碍问题。你需要将这些，知识和经验，用户测试等结合起来才能获得完整的解决方案。
+> **备注：** 仅靠这些工具并不能解决所有无障碍性问题。你还需要结合这些工具、相关知识和经验、用户测试等，才能获得全面的了解。
### 自动化工具
-[Deque's aXe tool](https://www.deque.com/products/axe/)比我们上面提到的审计工具更优秀。和其他工具一样，它检查页面并返回无障碍错误。它很有用，可以提供浏览器扩展程序：
+[Deque 的 aXe 工具](https://www.deque.com/axe/)比我们之前提到的审计工具更为先进。与其他工具相同，它检查页面并报告无障碍性错误。它最直接有用的形式可能是作为浏览器扩展：
-- [aXe for Chrome](http://bitly.com/aXe-Chrome)
-- [aXe for Firefox](http://bit.ly/aXe-Firefox)
+- [Chrome 的 aXe 扩展](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)
+- [Firefox 的 aXe 扩展](https://addons.mozilla.org/zh-CN/firefox/addon/axe-devtools/)
-扩展程序将无障碍选项卡添加到浏览器开发人员工具。例如，我们安装了 Firefox 版本，然后使用它来审核[bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html)示例。我们得到以下结果：
+这些扩展在浏览器开发者工具中添加了一个无障碍性标签页。例如，我们安装了 Firefox 版本的扩展，然后用它来审计我们的 [bad-table.html](https://mdn.github.io/learning-area/accessibility/html/bad-table.html) 示例。我们得到了以下结果：
-
+
-aXe 也可以使用`npm`安装，并且可以与任务运行器（如[Grunt](http://gruntjs.com/) 和[Gulp](http://gulpjs.com/)），自动化框架（如[Selenium](http://www.seleniumhq.org/)和[Cucumber](https://cucumber.io/)），单元测试框架（如[Jasmin](http://jasmine.github.io/)）集成，以及更多其他功能（详见[main aXe page](https://www.deque.com/products/axe/) ）。
+aXe 也可以通过 `npm` 安装，并且能够与任务运行器如 [Grunt](https://gruntjs.com/) 和 [Gulp](https://gulpjs.com/)、自动化框架如 [Selenium](https://www.selenium.dev/) 和 [Cucumber](https://cucumber.io/)、单元测试框架如 [Jasmine](https://jasmine.github.io/) 等集成（详情请参见 [aXe 官网](https://www.deque.com/axe/)）。
### 屏幕阅读器
-为了了解有严重视力障碍的人是如何浏览网页的，我们需要测试屏幕阅读器。有几款屏幕阅读器：
+对于视力严重受损的人士来说，测试屏幕阅读器以适应他们使用 web 的方式是极其有价值的。市场上提供了多种屏幕阅读器供选择：
-- 有些是付费产品，比如[JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Windows) 和[Window Eyes](http://www.gwmicro.com/window-eyes/) (Windows).
-- 有些是免费产品，比如[NVDA](http://www.nvaccess.org/) (Windows), [ChromeVox](http://www.chromevox.com/) (Chrome, Windows, and Mac OS X), 和[Orca](https://wiki.gnome.org/Projects/Orca) (Linux).
-- 有些内置在操作系统中，比如[VoiceOver](http://www.apple.com/accessibility/osx/voiceover/) (Mac OS X and iOS), [ChromeVox](http://www.chromevox.com/) (on Chromebooks), 和[TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android).
+- 有些屏幕阅读器是需要付费的商业产品，例如 [JAWS](https://www.freedomscientific.com/Products/software/JAWS/)（适用于 Windows 系统）和 [Window Eyes](http://www.gwmicro.com/)（适用于 Windows 系统）。
+- 也有一些是免费的产品，比如 [NVDA](https://www.nvaccess.org/)（适用于 Windows 系统）、[ChromeVox](https://support.google.com/chromebook/answer/7031755)（适用于 Chrome 浏览器、Windows 系统和 macOS 系统）以及 [Orca](https://wiki.gnome.org/Projects/Orca)（适用于 Linux 系统）。
+- 还有一些是内置在操作系统中的，例如 [VoiceOver](https://www.apple.com/accessibility/vision/)（适用于 macOS 和 iOS 系统）、[ChromeVox](https://support.google.com/chromebook/answer/7031755)（内置于 Chromebook 设备中）和 [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback)（适用于 Android 系统）。
-通常，屏幕阅读器是独立运行的应用程序，并且不仅仅支持阅读网页，也支持阅读其他应用程序。也有例外（比如 ChromeVox 是一个浏览器扩展程序）。不同的屏幕阅读器可能在控制键和表现上稍有不同，所以你必须查阅你选择的屏幕阅读器的文档来获取相关细节。总体来说他们是大同小异的。
+通常情况下，屏幕阅读器是作为独立应用程序在宿主操作系统上运行的，它们不仅能够阅读 web 页面内容，还能阅读其他应用程序中的文本。虽然并非总是如此（例如 ChromeVox 就是一个浏览器扩展），但大多数屏幕阅读器的工作方式和控制方法都有所不同，因此你需要查阅你所选择的屏幕阅读器的文档，以了解所有的细节。尽管如此，它们的基本工作原理是相似的。
-一起看一下我们对几款不同的屏幕阅读器的测试。这将帮助你大致了解它们如何工作以及如何测试它们。
+接下来我们通过测试一些屏幕阅读器，以便你能够大致了解它们是如何工作的，以及如何进行测试。
-> **备注：** WebAIM 的 [Designing for Screen Reader Compatibility](http://webaim.org/techniques/screenreader/)提供了一些关于屏幕阅读器的使用和如何开发应用以最好的适用屏幕阅读器的信息。你也可以看下[Screen Reader User Survey #6 Results](http://webaim.org/projects/screenreadersurvey6/#used)这篇有关屏幕阅读器一些有趣的统计信息的文章。
+> **备注：** WebAIM 的[兼容屏幕阅读器的设计](https://webaim.org/techniques/screenreader/)提供了一些关于屏幕阅读器的使用和适配的信息。另外，[屏幕阅读器用户调查 #9 的结果](https://webaim.org/projects/screenreadersurvey9/#used)也展示了一些关于屏幕阅读器使用的有趣统计数据。
#### VoiceOver
-VoiceOver (VO) 是 Mac/iPhone/iPad 上的免费应用，所以如果你使用苹果公司的产品，可以用 VO 来进行测试。我们在 Mac OS X 系统上测试了它。
+VoiceOver（VO）免费内置于你的 Mac/iPhone/iPad 中，所以如果你使用苹果产品，它对于桌面/移动设备的测试非常有用。我们将在 MacBook Pro 上的 macOS X 上进行测试。
-按下 Cmd + Fn + F5 打开它。如果你之前没用过 VO，将会出现一个可以选择是否开启 VO 的欢迎界面，并且还会有教程指导你如何使用。再次按下 Cmd + Fn + F5 可以关闭。
+要启动它，请按 Cmd + F5。如果你之前未曾使用过 VO，你会看到一个欢迎界面，在那里你可以选择是否激活 VO，并运行一个相当实用的教程来学习如何使用它。要关闭它，请再次按 Cmd + F5。
-> **备注：** 你应该至少看一遍教程，它对于你了解 VO 是非常有用的。
+> **备注：** 强烈建议至少学习一次教程——这是学习 VO 的极佳方式。
-当 VO 开启时，你会看到一个会显示当前选中信息的黑色框在屏幕的左下角，除此之外屏幕显示大体还是相同的。当前选中的部分也会出现一个黑色的边框以进行高亮显示，这个黑色框就是 VO 的光标。
+当 VO 激活时，显示屏幕外观大体相同，但你会在屏幕左下角看到一个黑色方框，里面显示了 VO 当前选中的信息。当前选中的内容也会被一个黑色边框围住且高亮显示——这个高亮被称为 **VO 光标**。
-
+
-在使用中，你会用到"VO 修饰键"，"VO 修饰键"是一个单独键或组合键，当你使用 VO 的快捷键时，你需要额外按下这个"VO 修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。VO 的修饰键是 CapsLock, 或 Ctrl + Option。
+为了使用 VO，你需要频繁使用“VO 修饰键”——这是一个键或键的组合，在使用实际的 VO 键盘快捷键时，你需要同时按下它们。使用修饰键与屏幕阅读器配合是很常见的，这样做可以避免它们的命令与其他命令冲突。在 VO 中，修饰键可以是 CapsLock 或 Ctrl + Option。
-VO 有很多快捷键，我们没有全部列出来。只把测试网页无障碍常用的一些在下面列出了。表格里，"VO"代表"VO 修饰键"。
+VO 有许多键盘命令，我们在这里不会全部列出。你在 web 页面测试中需要的基本命令在下表中。在键盘快捷键中，“VO”代表“VoiceOver 修饰键”。
-| 快捷键 | 描述 |
-| ---------------- | -------------------------------------------------------------------------------- |
-| VO + 方向键 | 移动 VO 光标 |
-| VO + 空格键 | 选择/激活高亮的部分，包括 Rotor 里的内容（关于 Rotor 见下面） |
-| VO + Shift + 下 | 移动到组合项目里（比如 HTML 表格，或表单等）。进入组合里，你能使用下面的快捷键。 |
-| VO + Shift + 上 | 离开组合项目 |
-| VO + C | (当在表格里面时) 阅读当前列的头部 |
-| VO + R | (当在表格里面时) 阅读当前行的头部 |
-| VO + C + C | (当在表格里面时) 阅读当前列，包括列头 |
-| VO + R + R | (当在表格里面时) 阅读当前行，包括对应于每个小行的头 |
-| VO + 左，VO + 右 | (当在水平的选项卡里面时，比如日期选择或时间选择) 切换选项 |
-| VO + 上，VO + 下 | (当在垂直的选项卡里面时，比如日期选择或时间选择) 切换选项 |
-| VO + U | 使用 Rotor。Rotor 使用列表展示标题，链接，表单选项等，以便为我们提供便利的导航。 |
-| VO + 左，VO + 右 | (当在 Rotor 里) 切换到其他列表 |
-| VO + 上，VO + 下 | (当在 Rotor 里) 在当前列表里，切换到其他项 |
-| Esc | (当在 Rotor 里) 推出 Rotor |
-| Ctrl | (当 VO 阅读时) 暂停/继续 |
-| VO + Z | 重复上一句话 |
-| VO + D | 进入 Mac 的程序坞，你能选择运行哪个应用 |
+<table class="standard-table no-markdown">
+ <caption>
+ 最常用的 VoiceOver 键盘快捷键
+ </caption>
+ <thead>
+ <tr>
+ <th scope="col">键盘快捷键</th>
+ <th scope="col">描述</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>VO + 光标键</td>
+ <td>将 VO 光标上、右、下、左移动。</td>
+ </tr>
+ <tr>
+ <td>VO + 空格键</td>
+ <td>
+ 选择/激活 VO 光标突出显示的项目。这包括在转盘中选定的项目（见下文）。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + Shift + 向下光标</td>
+ <td>
+ 移动到一组项目中（例如 HTML 表格，或表单等）。一旦在组内，你可以使用上述命令在该组内正常移动和选择项目。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + Shift + 向上光标</td>
+ <td>移出组。</td>
+ </tr>
+ <tr>
+ <td>VO + C</td>
+ <td>（在表格内时）读取当前列的标题。</td>
+ </tr>
+ <tr>
+ <td>VO + R</td>
+ <td>（在表格内时）读取当前行的标题。</td>
+ </tr>
+ <tr>
+ <td>VO + C + C（连续两个 C）</td>
+ <td>
+ （在表格内时）读取整个当前列，包括标题。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + R + R（连续两个 R）</td>
+ <td>
+ （在表格内时）读取整个当前行，包括与每个单元格对应的标题。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + 左光标，VO + 右光标</td>
+ <td>
+ （在某些水平选项内时，例如日期或时间选择器）在选项之间移动。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + 上光标，VO + 下光标</td>
+ <td>
+ （在某些水平选项内时，例如日期或时间选择器）更改当前选项。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + U</td>
+ <td>
+ 使用转盘，它显示标题、链接、表单控件等列表，以便于导航。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + 左光标，VO + 右光标</td>
+ <td>
+ （在转盘内时）在转盘中可用的不同列表之间移动。
+ </td>
+ </tr>
+ <tr>
+ <td>VO + 上光标，VO + 下光标</td>
+ <td>
+ （在转盘内时）在当前转盘列表中的不同项目之间移动。
+ </td>
+ </tr>
+ <tr>
+ <td>Esc</td>
+ <td>（在转盘内时）退出转盘。</td>
+ </tr>
+ <tr>
+ <td>Ctrl</td>
+ <td>（VO 讲话时）暂停/恢复语音。</td>
+ </tr>
+ <tr>
+ <td>VO + Z</td>
+ <td>重新开始最后一段语音。</td>
+ </tr>
+ <tr>
+ <td>VO + D</td>
+ <td>进入 Mac 的 Dock，以便你可以选择在其中运行的应用程序。</td>
+ </tr>
+ </tbody>
+</table>
-看起来很多，但当你用起来时还好，因为 VO 通常会给你提醒，在哪里应该用哪个快捷键。现在试试运行 VO，在[屏幕阅读器测试](#屏幕阅读器测试)屏幕阅读器测试章节做个测试吧。
+看起来很多，但当你用起来时还好，因为 VO 通常会给你提醒，在哪里应该用哪个快捷键。现在试试运行 VO，在[屏幕阅读器测试](#屏幕阅读器测试)屏幕阅读器测试小节做个测试吧。
#### NVDA
-NVDA 只能运行在 Window 系统，你需要安装它。
-
-1. 在[nvaccess.org](http://www.nvaccess.org/)下载。你能选择免费下载，或赞助后再下载；你需要在下载前提供你的邮箱地址。
-2. 下载完成后，开始安装 - 双击安装程序，接受条款，一步步按提示来。
-3. 双击 NVDA 程序或快捷方式，或者按下 Ctrl + Alt + N 打开它。你会看见欢迎界面。你能选择一些选项，然后按下 OK 继续。
-
-NVDA 现在在你的电脑上开启了。
-
-在使用中，你会用到"NVDA 修饰键"，"NVDA 修饰键"是一个单独键，当你使用 NVDA 的快捷键时，你需要额外按下这个"NVDA 修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。NVDA 的修饰键是 Insert 键（默认）, 或 CapsLock 键（在欢迎界面可以选择使用该键）。
-
-> **备注：** 关于高亮方面，NVDA 比 VoiceOver 做的更好。当滚动过标题、列表等元素时，你选中的项目会被一个细微的边框包住以高亮，但不是对于所有元素都是这样的。如果你感觉迷失方向了，可以按 Ctrl + F5 刷新页面，并从顶部重新开始。
-
-NVDA 有很多快捷键，我们没有全部列出来。只把测试网页无障碍常用的一些在下面列出了。表格里，"NVDA"代表"NVDA 修饰键"。
-
-| 快捷键 | 描述 |
-| ------------------------------- | ------------------------------------------------------------- |
-| NVDA + Q | 关闭 NVDA |
-| NVDA + 上 | 阅读当前行 |
-| NVDA + 下 | 在当前位置开始阅读 |
-| 上和下，或者 Shift + Tab 和 Tab | 移动到上/下一项，开始阅读 |
-| 左和右 | 移动到当前项的上/下一个字符，开始阅读 |
-| Shift + H 和 H | 移动到上/下一标题，开始阅读 |
-| Shift + K 和 K | 移动到上/下一链接项，开始阅读 |
-| Shift + D 和 D | 移动到上/下一文档界标（比如\<nav>），开始阅读 |
-| Shift + 1–6 和 1–6 | 移动到上/下一标题（标题 1 - 6），开始阅读 |
-| Shift + F 和 F | 移动到上/下一表单选项，聚焦 |
-| Shift + T 和 T | 移动到上/下一数据表，聚焦 |
-| Shift + B 和 B | 移动到上/下一按钮，阅读它的 label |
-| Shift + L 和 L | 移动到上/下一列表，阅读它的第一项 |
-| Shift + I 和 I | 移动到上/下一列表，开始阅读 |
-| Enter/Return | (当链接或按钮或其他可激活的项选中时) 激活项 |
-| NVDA + 空格 | (当选中表单时) 进入表单，或如果已经在表单里的情况下，离开表单 |
-| Shift Tab 和 Tab | (当在表单里面时) 切换到下一个 input |
-| 上 和 下 | (当在表单里面时) 改变 input 的值 (例如选择框). |
-| 空格 | (当在表单里面时) 选择已选中的值 |
-| Ctrl + Alt + 方向键 | (当选中表格时) 切换表格单元格 |
+NVDA 仅支持 Windows 系统，你需要进行安装。
+
+1. 请从 [nvaccess.org](https://www.nvaccess.org/) 下载。你可以选择捐赠支持或直接免费下载；在下载前，你需要提供一个电子邮件地址。
+2. 下载完成后，请安装该软件——双击安装文件，同意许可协议，并按照指示完成操作。
+3. 启动 NVDA，双击桌面程序图标/快捷方式，或使用键盘快捷键 Ctrl + Alt + N。启动时，NVDA 欢迎界面将会出现。在此，你可以选择一些选项，然后点击 _OK_ 按钮以开始使用。
+
+NVDA 将在你的计算机上运行。
+
+使用 NVDA 时，你会频繁使用“NVDA 修饰键”——这是一个特殊的键，除了 NVDA 的键盘快捷键之外，你还需要同时按下它以激活功能。使用修饰键是屏幕阅读器的常见做法，以避免其命令与其他软件命令冲突。对于 NVDA 来说，修饰键可以是 Insert 键（默认设置），或者是 CapsLock 键（你可以在 NVDA 欢迎界面中勾选第一个复选框来选择，操作需在点击 _OK_ 之前完成）。
+
+> **备注：** NVDA 在标识位置和其执行的操作方面比 VoiceOver 更加细腻。当你通过标题、列表等内容滚动时，所选项目通常会以微妙的边框进行高亮显示，但并不是所有元素都会这样。如果你感到方向迷失，可以按 Ctrl + F5 刷新当前页面，然后从页面顶部重新开始导航。
+
+NVDA 拥有众多键盘命令，这里不会全部列举。以下表格中列出了你在 web 页面测试中可能需要使用的一些基础命令。在键盘快捷键说明中，“NVDA”代表“NVDA 修饰键”。
+
+<table class="standard-table no-markdown">
+ <caption>
+ 最常用的 NVDA 键盘快捷键
+ </caption>
+ <thead>
+ <tr>
+ <th scope="col">键盘快捷键</th>
+ <th scope="col">描述</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>NVDA + Q</td>
+ <td>在启动 NVDA 后再次关闭它。</td>
+ </tr>
+ <tr>
+ <td>NVDA + 向上光标</td>
+ <td>读当前行。</td>
+ </tr>
+ <tr>
+ <td>NVDA + 向下光标</td>
+ <td>从当前位置开始阅读。</td>
+ </tr>
+ <tr>
+ <td>向上光标和向下光标，或 Shift + Tab 和 Tab</td>
+ <td>移动到页面上的前一个/下一个项目并阅读。</td>
+ </tr>
+ <tr>
+ <td>向左光标和向右光标</td>
+ <td>移动到当前项目中的前一个/下一个字符并阅读。</td>
+ </tr>
+ <tr>
+ <td>Shift + H 和 H</td>
+ <td>移动到前一个/下一个标题并阅读。</td>
+ </tr>
+ <tr>
+ <td>Shift + K 和 K</td>
+ <td>移动到前一个/下一个链接并阅读。</td>
+ </tr>
+ <tr>
+ <td>Shift + D 和 D</td>
+ <td>移动到前一个/下一个文档地标（例如 <code><nav></code>）并阅读。</td>
+ </tr>
+ <tr>
+ <td>Shift + 1–6 和 1–6</td>
+ <td>移动到前一个/下一个标题（级别 1-6）并阅读。</td>
+ </tr>
+ <tr>
+ <td>Shift + F 和 F</td>
+ <td>移动到前一个/下一个表单输入并聚焦。</td>
+ </tr>
+ <tr>
+ <td>Shift + T 和 T</td>
+ <td>移动到前一个/下一个数据表并聚焦。</td>
+ </tr>
+ <tr>
+ <td>Shift + B 和 B</td>
+ <td>移动到前一个/下一个按钮并阅读其标签。</td>
+ </tr>
+ <tr>
+ <td>Shift + L 和 L</td>
+ <td>移动到前一个/下一个列表并阅读其第一个列表项。</td>
+ </tr>
+ <tr>
+ <td>Shift + I 和 I</td>
+ <td>移动到前一个/下一个列表项并阅读。</td>
+ </tr>
+ <tr>
+ <td>Enter/Return</td>
+ <td>（当选择了链接/按钮或其他可激活项目时）激活项目。</td>
+ </tr>
+ <tr>
+ <td>NVDA + 空格</td>
+ <td>（当选择了表单时）进入表单以便可以选择单个项目，或者如果你已经在表单中则离开表单。</td>
+ </tr>
+ <tr>
+ <td>Shift Tab 和 Tab</td>
+ <td>（在表单内部时）在表单输入之间移动。</td>
+ </tr>
+ <tr>
+ <td>向上光标和向下光标</td>
+ <td>（在表单内部时）更改表单输入值（例如选择框等）。</td>
+ </tr>
+ <tr>
+ <td>空格键</td>
+ <td>（在表单内部时）选择所选值。</td>
+ </tr>
+ <tr>
+ <td>Ctrl + Alt + 光标键</td>
+ <td>（当选择了表格时）在表格单元格之间移动。</td>
+ </tr>
+ </tbody>
+</table>
#### 屏幕阅读器测试
-现在你学会了如何使用屏幕阅读器，来使用它做一些无障碍测试吧。这样你才能了解屏幕阅读器在好的网页和坏的网页之间不同的表现：
+现在你已经熟悉屏幕阅读器的使用，我们希望你能利用它来进行一些快速的无障碍性测试。这样可以帮助你了解屏幕阅读器如何处理良好和不良的网页特性：
-- 浏览[good-semantics.html](http://mdn.github.io/learning-area/accessibility/html/good-semantics.html), 留意屏幕阅读器如何找到标题并将其用于导航。再看一下[bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html), 留意屏幕阅读器不会得到这些信息。想象一下，当尝试浏览非常长的文本页面时，这会是多么使人烦躁。
-- 浏览[good-links.html](http://mdn.github.io/learning-area/accessibility/html/good-links.html), 并留意当不在上下文时他们对于你理解内容的帮助。而[bad-links.html](http://mdn.github.io/learning-area/accessibility/html/bad-links.html) 就无法帮助你理解— 他们仅仅会提示"click here（点击这里）".
-- 浏览[good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html), 并注意如何使用其标签描述表单输入，因为我们已经正确使用了\<label>。在[bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html), 只能获取到无用的空白标签。
-- 浏览[punk-bands-complete.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html), 并查看屏幕阅读器如何将内容的列和行关联起来，并一起读取它们，因为我们已经正确定义了标头。在[bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html), 无法得知单元格的关联关系。请注意，当页面上只有一个表时，NVDA 似乎表现得有些杂乱无章。你可以改用[WebAIM's table test page](http://webaim.org/articles/nvda/tables.htm)进行测试。
-- 看一下之前看过的[WAI-ARIA live regions example](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm), 并注意屏幕阅读器将实时读取不断更新的部分。
+- 访问 [good-semantics.html](https://mdn.github.io/learning-area/accessibility/html/good-semantics.html)，请注意屏幕阅读器是如何识别标题并用于导航的。接着访问 [bad-semantics.html](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)，你会发现屏幕阅读器没有获取到任何这些信息。想象一下，如果你在尝试浏览一篇长文本时，这会有多么令人沮丧。
+- 访问 [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html)，注意链接即使脱离了上下文也仍然是有意义的。而在 [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) 中，情况并非如此——所有的链接都只是“点击这里”。
+- 访问 [good-form.html](https://mdn.github.io/learning-area/accessibility/html/good-form.html)，注意表单输入是如何被标签所描述的，这是因为我们正确地使用了 `<label>` 元素。而在 [bad-form.html](https://mdn.github.io/learning-area/accessibility/html/bad-form.html)，表单输入只获得了一个类似于“空白”的无用标签。
+- 查看我们的 [punk-bands-complete.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html) 示例，观察屏幕阅读器如何能够关联内容的列和行，并且因为我们正确地定义了标题，它们能够被一起读出来。在 [bad-table.html](https://mdn.github.io/learning-area/accessibility/html/bad-table.html)，没有任何单元格是关联的。请注意，当页面上只有一个表格时，NVDA 似乎会表现出一些奇怪的行为；你可以尝试 [WebAIM 的表格测试页面](https://webaim.org/articles/nvda/tables.htm)。
+- 回顾我们之前看到的 [WAI-ARIA 动态更新区域示例](https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm)，注意屏幕阅读器将如何持续不断地读出正在更新的部分。
### 用户测试
-如上所述，你不能仅依靠自动化工具来确定网站上的无障碍问题。建议在制定测试计划时，包含一些用户测试无障碍的计划 (有关更多内容，请参阅前面的[用户测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#User_testing)部分)。尝试让一些屏幕阅读器用户，一些全键盘用户，一些有听觉障碍的用户或其他用户参与测试，以满足你的需求。
+如上所述，你不能仅依靠自动化工具来确定网站上的无障碍问题。建议在制定测试计划时，包含一些用户测试无障碍的计划 (有关更多内容，请参阅前面的[用户测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#用户测试)部分)。尝试让一些屏幕阅读器用户，一些全键盘用户，一些有听觉障碍的用户或其他用户参与测试，以满足你的需求。
-## 测试无障碍检查清单
+## 无障碍测试清单
-以下列表提供了一个清单，供参考，以确保已对项目执行建议的无障碍测试：
+以下列表提供了一个供你参考的无障碍测试清单，以确保你的项目已经执行了推荐的无障碍测试：
-1. 确保 HTML 尽可能是语义化的。[验证](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#%E9%AA%8C%E8%AF%81)是一个好方法，就像使用[审计工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E5%AE%A1%E8%AE%A1%E5%B7%A5%E5%85%B7)。
-2. 检查当关闭 CSS 时，你的内容能够被理解。
-3. 确认功能是[全键盘可访问](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E4%BD%BF%E7%94%A8%E9%94%AE%E7%9B%98)的。使用 Tab 键、回车键等做测试。
-4. 确保非文本内容有[替代文本](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E6%9B%BF%E4%BB%A3%E6%96%87%E6%9C%AC)。 [审计工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E5%AE%A1%E8%AE%A1%E5%B7%A5%E5%85%B7)能够很好地发现问题。
-5. 确保[颜色和颜色对比度](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E9%A2%9C%E8%89%B2%E5%92%8C%E9%A2%9C%E8%89%B2%E5%AF%B9%E6%AF%94%E5%BA%A6)是可接受的，使用合适的工具测试。
-6. 确保[隐藏的内容](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E9%9A%90%E8%97%8F%E7%9A%84%E5%86%85%E5%AE%B9)可以被屏幕阅读器读取。
-7. 尽可能的使功能在没有 JavaScript 的情况下也可以正常使用。
-8. 在合适的地方使用 ARIA 来提供无障碍。
-9. 使用[审计工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E5%AE%A1%E8%AE%A1%E5%B7%A5%E5%85%B7)测试一下你的网站。
-10. 使用屏幕阅读器实际测试一下。
-11. 在你的网站上可以添加无障碍策略/声明，以说明你的为无障碍做了什么。
+1. 确保你的 HTML 尽可能语义化正确。[验证它](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#验证)是一个不错的开始，使用[审计工具](#审计工具)也是如此。
+2. 检查在 CSS 关闭的情况下，你的内容是否仍然有意义。
+3. 确保你的功能[可通过键盘访问](#使用键盘原生无障碍性)。使用 Tab、Return/Enter 等键进行测试。
+4. 确保你的非文本内容都有[文本替代](#替代文本)。[审计工具](#审计工具)可帮助你发现此类问题。
+5. 确保你网站的[颜色对比度](#颜色和颜色对比度)可接受，使用合适的检查工具。
+6. 确保[隐藏内容](#隐藏内容)可被屏幕阅读器识别。
+7. 尽可能确保功能在不使用 JavaScript 的情况下也可用。
+8. 适当使用 ARIA 来改善无障碍性。
+9. 使用[审计工具](#审计工具)对你的网站进行测试。
+10. 使用屏幕阅读器对其进行测试。
+11. 在你网站的某个容易被找到的位置包含一份无障碍性政策/声明，说明你所做的工作。
## 寻找帮助
-无障碍还会遇到许多其他问题。你要学会如何在线查找答案。请查阅 HTML 和 CSS 文章的“[寻找帮助](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#%E5%AF%BB%E6%89%BE%E5%B8%AE%E5%8A%A9)”部分，以获取一些指导。
+无障碍还会遇到许多其他问题。你要学会如何在线查找答案。请查阅 HTML 和 CSS 文章的“[寻找帮助](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#寻找帮助)”部分，以获取一些指导。
## 总结
-希望本文能让你了解无障碍，以及帮助你解决遇到的一些无障碍问题。
+希望本文能为你提供一个良好的基础，让你了解可能遇到的主要无障碍问题，以及如何测试和克服这些问题。
-下一篇文章，我们将详细介绍特征检测。
+下一篇文章，我们将详细介绍特性检测。
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index 5022f6fc2d9271..ac8de97fd9e2d3 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -2,7 +2,7 @@
title: 处理常见的 HTML 和 CSS 问题
slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
l10n:
- sourceCommit: ec80e95431ed46f05946e9b12219fdd2962808e6
+ sourceCommit: 56fc816a9fb8e96a6b69cd19be03f62b582c06ae
---
{{LearnSidebar}}
@@ -99,7 +99,7 @@ HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常
一旦你确定了将要使用但不被普遍支持的技术列表，最好研究一下它们在哪些浏览器中受支持，以及相关的有用技巧。请参阅下面的[寻求帮助](#寻找帮助)。
-#### HTML 回退行为
+### HTML 回退行为
某些问题可以通过利用 HTML/CSS 的自然工作方式来解决。
@@ -151,7 +151,7 @@ HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常
如果你查看示例，当你尝试输入数据时，UI 特性会发挥作用。在具有动态键盘的设备上，将显示特定于类型的输入面板（keypad）。在不支持新特性的浏览器上，输入框将默认为普通文本输入框，使得用户仍然可以输入正确的信息。
-#### CSS 回退行为
+### CSS 回退行为
CSS 的情况可以说比 HTML 更好一些。如果浏览器遇到一个它不明白的声明或规则，它只会完全跳过它，而不会强行应用它或者抛出错误。如果这样的错误意外地出现在生产环境代码中，这可能会让你和用户感到沮丧，但至少这样的话，整个网站不会因为一个错误而崩溃。如果巧妙地利用它，你甚至可以从中获益。
@@ -193,7 +193,7 @@ button:active {
> **备注：** 对于其他 CSS 特性，如[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)、[`@font-face`](/zh-CN/docs/Web/CSS/@font-face) 和 [`@supports`](/zh-CN/docs/Web/CSS/@supports) 块来说，也是如此——如果不被支持，浏览器就会忽略它们。
-#### 选择器支持
+### 选择器支持
当然，如果你没有使用合适的[选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)来选择你想要设置样式的元素，任何 CSS 特性都不会被应用！
@@ -213,7 +213,7 @@ form > #date
（因为 `date` 表单输入不是 `<form>` 的直接子元素，你最好使用一个一般的后代选择器而不是子选择器）。
-#### 处理 CSS 前缀
+### 处理 CSS 前缀
另一组问题来自 CSS 前缀——这种机制最初用于允许浏览器供应商在实验状态下实施自己版本的 CSS（或 JavaScript）特性，这样他们就可以试用并确保其正常工作，而不会与其他浏览器的实现或最终无前缀的实现发生冲突。
@@ -253,7 +253,7 @@ form > #date
如果需要使用现代特性，可以使用 [`@supports`](/zh-CN/docs/Web/CSS/@supports) 进行特性支持检测，并在 `@supports` 块中嵌套使用带有前缀的特性或新特性。
-#### 响应式设计问题
+### 响应式设计问题
响应式设计是创建可根据不同设备尺寸（例如不同的屏幕宽度、方向（纵向或横向）或分辨率）而变化的网页布局的做法。例如，桌面布局在移动设备上会看起来很糟糕，所以你需要使用[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)提供合适的移动布局，并确保正确应用[视口](/zh-CN/docs/Web/HTML/Viewport_meta_tag)。你可以在[我们关于响应式设计的指南](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)中找到这些实践的详细描述。
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
index f9391c49ac27f2..87bef897f7c593 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
@@ -2,7 +2,7 @@
title: 跨浏览器测试介绍
slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction
l10n:
- sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303
+ sourceCommit: f7856d2fbfadb97180aa651ba6a03820643ea6ec
---
{{LearnSidebar}}{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}
@@ -154,7 +154,6 @@ l10n:
重申一遍，如果你发现浏览器的程序错误，你应该报告它们：
- [Firefox Bugzilla](https://bugzilla.mozilla.org/)
-- [EdgeHTML issue tracker](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/)
- [Safari](https://bugs.webkit.org/)
- [Chrome](https://bugs.chromium.org/p/chromium/issues/list)
- [Opera](https://bugs.opera.com/wizard/desktop)
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index f37a0802b00bc8..e1ac66eed1b1ab 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -1,12 +1,13 @@
---
title: 处理常见的 JavaScript 问题
slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
+l10n:
+ sourceCommit: e8d495591fefeb3c0c484b989cc155b84b50bb57
---
-{{LearnSidebar}}
-{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}
-现在我们了解一些常见的浏览器 JavaScript 问题，并且看看如何修复它们。这个包括如何使用浏览器开发工具跟踪和修复问题、使用 Polyfill 或第三方库解决问题以及如何让一些现代 JavaScript 的特性也能在旧的浏览器下面工作等。
+现在，我们将探讨常见的跨浏览器 JavaScript 问题以及如何解决它们。这包括使用浏览器开发者工具来跟踪和修复问题，使用 polyfill 和库来解决问题，在较旧的浏览器中使用现代 JavaScript 特性等信息。
<table>
<tbody>
@@ -27,15 +28,15 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
</tbody>
</table>
-## JavaScript 存在的问题
+## JavaScript 的问题
-从历史上看，JavaScript 早就已经受到跨浏览器兼容性问题的困扰。早在 20 世纪 90 年代，当时的主要浏览器选择（Internet Explorer 和 Netscape）的脚本以不同的语言风格实现（Netscape 使用 JavaScript，IE 使用 JScript，还提供 VBScript 作为选项），虽然至少 JavaScript 和 JScript 在某种程度上是兼容的（都基于 {{glossary("ECMAScript")}} 规范），但往往以相互冲突、不兼容的方式实现，给开发者带来很多恶梦。
+历史上，JavaScript 一直困扰于跨浏览器兼容性问题——在 1990 年代，当时主要的浏览器选择（Internet Explorer 和 Netscape）以不同的语言风格实现了脚本编程（Netscape 有 JavaScript，IE 有 JScript，还提供了 VBScript），虽然 JavaScript 和 JScript 在某种程度上是兼容的（都基于 {{glossary("ECMAScript")}} 规范），但它们通常是以互相冲突、不兼容的方式实现的，给开发人员带来了许多噩梦。
-这种不兼容问题一直持续到 21 世纪初，因为旧的浏览器仍然在使用，仍然需要支持。例如，创建 {{domxref("XMLHttpRequest")}} 对象的代码必须对 IE 6 进行特殊处理：
+这种不兼容性问题一直持续到 2000 年代初期，因为旧浏览器仍在使用，仍需要支持。例如，创建 {{domxref("XMLHttpRequest")}} 对象的代码必须特别处理 Internet Explorer 6：
```js
if (window.XMLHttpRequest) {
- // Mozilla、Safari、IE7+……
+ // Mozilla、Safari、IE7+ ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE 6 和更老的浏览器
@@ -43,147 +44,140 @@ if (window.XMLHttpRequest) {
}
```
-这也是 [jQuery](https://jquery.com/) 这样的库出现的主要原因之一——抽象出浏览器实现的差异，所以开发人员只需要使用像 [`jQuery.ajax()`](https://api.jquery.com/jquery.ajax/)（会在后台处理这些差异）这样的代码。
+这也是像 [jQuery](https://jquery.com/) 这样的库出现的主要原因之一——它们可以抽象掉浏览器实现的差异，这样开发人员就可以只使用例如 [`jQuery.ajax()`](https://api.jquery.com/jquery.ajax/) 这样的，背后会处理这些差异的函数。
-从那时起，情况有了明显的改善；现代浏览器在支持“经典的 JavaScript 特性”方面做得很好，而且随着支持老式浏览器的要求降低，使用这种代码的要求也在减少（尽管这样，请记住，它们并没有完全消失）。
+自那时以来，情况已经大大改善；现代浏览器可以很好地支持“经典 JavaScript 特性”，随着对旧浏览器的支持需求减少，使用这种代码的需求也减少了（但请注意它们并没有完全消失）。
-这些天来，大多数的跨浏览器 JavaScript 问题是这样的：
+如今，大多数跨浏览器 JavaScript 问题出现在：
-- 劣质的浏览器嗅探代码、特性检测代码和供应商前缀的使用阻碍了浏览器运行它们本来可以很好使用的代码。
-- 开发者在他们的代码中使用了新的 JavaScript 功能、现代 web API 等，并发现这些功能在旧的浏览器中无法使用。
+- 当低劣的浏览器嗅探代码、特性检测代码和供应商前缀的使用阻止浏览器运行它们本来可以使用的代码时。
+- 当开发人员在代码中使用新的/新出现的 JavaScript 特性、现代 Web API 等，然而这些特性在旧浏览器中不起作用时。
-我们将在下文进一步探究这个问题。
+我们将在下面探讨所有这些问题及更多问题。
## 修复一般的 JavaScript 问题
-正如我们在关于 HTML/CSS 的[前一篇文章](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#首先：解决一般问题)中所说，你应该先确保你的代码能够正常工作，然后再去集中解决跨浏览器问题。如果你还不熟悉[如何查找 JavaScript 代码的错误](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong)的基本内容，你应该在继续学习之前学习这篇文章。有一些常见的 JavaScript 问题是你要注意的，比如说：
+正如我们在关于 HTML/CSS 的[前一篇文章](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#首先：解决一般问题)中所说，你应该先确保你的代码能够正常工作，然后再去集中解决跨浏览器问题。如果你还不熟悉[如何查找 JavaScript 代码的错误](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong)的基本内容，你应该在继续学习之前学习这篇文章。你要注意一些常见的 JavaScript 问题，比如说：
- 基本的语法和逻辑问题（再次重申，请参阅[如何查找 JavaScript 代码的错误](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong)）。
-- 确保变量等被定义在正确的范围内，并且你不会遇到在不同地方声明的项目之间的冲突（见[函数作用域和冲突](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#函数作用域和冲突)）。
-- 对 [this](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的困惑，表现在它适用于什么范围，因此它的值是否是你所期望的。你可以阅读[“this”的含义](/zh-CN/docs/Learn/JavaScript/Objects/Basics#this的含义)，它做了一点浅显的介绍；你还应该研究像[这样](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143)的例子，它显示了一个典型的模式，即把 `this` 作用域保存到一个单独的变量中，然后在嵌套函数中使用这个变量，这样你就可以确定你把功能应用到正确的 `this` 作用域。
-- 在使用全局变量进行迭代的循环中不正确地使用函数（更普遍的是“弄错作用域”）。例如，在 [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) 中（见[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)），我们使用一个用 `var` 定义的变量循环了 10 次，每次都创建一个段落并给它添加一个 [onclick](/zh-CN/docs/Web/API/Element/click_event) 事件处理器。当点击时，我们希望每个段落都能显示一个包含其编号（创建时的 `i` 值）的警告信息。但是，它们都报告 `i` 为 11，因为 `for` 循环在调用嵌套函数之前就完成了所有的迭代。
+- 确保变量等定义在正确的作用域中，并且你不会遇到在不同地方声明的内容之间的冲突（见[函数作用域和冲突](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#函数作用域和冲突)）。
+- 对 [this](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 的困惑，表现在它适用于什么作用域，它的值是否是你所期望的。你可以阅读[“this”的含义](/zh-CN/docs/Learn/JavaScript/Objects/Basics#“this”的含义)，它做了一点浅显的介绍；你还应该研究像[这样](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143)的例子，它显示了一个典型的模式，即把 `this` 作用域保存到一个单独的变量中，然后在嵌套函数中使用这个变量，这样你就可以确定能够把功能应用到正确的 `this` 作用域。
+- 在使用全局变量进行迭代的循环中不正确地使用函数（更普遍的是“弄错作用域”）。
- > **备注：** 最简单的解决方案是用 `let` 而不是 `var` 来声明迭代变量，这样与函数相关的 `i` 的值对每个迭代都是唯一的。不幸的是，这在 IE11 中不能正常工作，这就是为什么我们没有在“好”的 for 循环中使用这种方法。
+> **标注：**
+> 例如，在 [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) 中（见[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)），我们使用一个用 `var` 定义的变量循环了 10 次，每次都创建一个段落并给它添加 [onclick](/zh-CN/docs/Web/API/Element/click_event) 事件处理器。当点击时，我们希望每个段落都能显示一个包含其编号（创建时的 `i` 值）的警告信息。但是，它们都报告 `i` 为 11，因为 `for` 循环在调用嵌套函数之前就完成了所有的迭代。
+>
+> 最简单的解决方案是用 `let` 而不是 `var` 来声明迭代变量，这样与函数相关的 `i` 的值对每个迭代都是唯一的。请参阅 [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html)（也可以参阅[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/good-for-loop.html)）以查看能正常工作的版本。
-- 在试图使用它们返回的值之前，确保异步操作已经返回。例如，[这个 Ajax 例子](/zh-CN/docs/Web/Guide/AJAX#第三步——简单的示例)在尝试使用响应之前，会检查以确保请求已经完成，响应已经返回。由于 JavaScript 语言中引入了 [Promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，这种操作变得更加容易处理。
+- 确保在你试图使用[异步操作](/zh-CN/docs/Learn/JavaScript/Asynchronous)返回的值之前，其已经完成。这通常需要了解如何使用 _promise_：适当地使用 [`await`](/zh-CN/docs/Web/JavaScript/Reference/Operators/await) 或在 promise 的 {{jsxref("Promise.then()", "then()")}} 处理器中运行代码来处理异步调用的结果。有关此主题的介绍，请参见[如何使用 promise](/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises)。
-> **备注：** [Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make](https://www.toptal.com/javascript/10-most-common-javascript-mistakes) 对这些常见的错误和其他问题有一些不错的讨论。
+> **备注：** [JavaScript 代码中的 Bug：JavaScript 开发人员的 10 个最常见错误](https://www.toptal.com/javascript/10-most-common-javascript-mistakes)对这些常见错误及更多内容有很好的讨论。
### Linter
-就像 [HTML 和 CSS](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#linter) 所说的一样，使用 linter 可以确保撰写出质量更高，错误更少的 JavaScript 代码，它可以指出错误，也可以标记出关于不良做法的警告等，并且可以自定义为更严格或更宽松的错误/警告报告。我们推荐的 JavaScript/ECMAScript linter 是 [JSHint](https://jshint.com/) 和 [ESLint](https://eslint.org/)；它们能以多种方式使用，其中一些我们将在下面详细介绍。
+就像 [HTML 和 CSS](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#linter) 所说的一样，使用 linter 可以确保编写出质量更高，错误更少的 JavaScript 代码，它可以指出错误，也可以标记出关于不良做法的警告等，并且可以自定义为更严格或更宽松的错误/警告报告。我们推荐的 JavaScript/ECMAScript linter 包括 [JSHint](https://jshint.com/) 和 [ESLint](https://eslint.org/)；它们能以多种方式使用，其中一些我们将在下面详细介绍。
#### 在线检查器
[JSHint 主页](https://jshint.com/)提供了一个在线 linter，它可以让你在左侧输入 JavaScript 代码，并在右侧提供包含指标、警告和错误的输出。
-
+
#### 代码编辑器插件
-每次把代码复制并粘贴到一个网页上以检查其有效性并不方便，你真正想要的是一个能融入你的标准工作流程的 linter，而且麻烦最少。许多代码编辑器都有 linter 插件，例如 GitHub 的 [Atom](https://atom.io/) 代码编辑器就有一个 JSHint 插件。
-
-要安装它：
-
-1. 安装 Atom（如果你没有已经安装的最新版本）——从上述 Atom 网页链接中下载它。
-2. 前往 Atom 的 _Preferences..._ 对话框（也就是说，在 Mac 中选择 _Atom > Preferences..._，或在 Windows/Linux 中选择 _File > Preferences..._）并选择左侧菜单中的 _Install_ 选项。
-3. 在 _Search packages_ 文本字段，输入“jslint”并按下回车/换行键来查找 linting 相关软件包。
-4. 你可以在列表最顶部看到 **lint**。首先使用 _Install_ 按钮安装这个软件包，因为其他 linter 都依赖它工作。然后安装 **linter-jshint** 插件。
-5. 在软件包安装完成后，试着加载一个 JavaScript 文件：你会看到任何问题都在行号旁边用绿色（警告）和红色（错误）的圆圈突出显示，底部的一个单独面板提供了行号、错误信息，有时还提供了建议值或其他修复方法。
-
-其他流行的编辑器也有类似的 linting 包可用。例如，见 [JSHint 安装页面](https://jshint.com/install/)的“文本编辑器和 IDE 的插件”部分。
+每次把代码复制并粘贴到网页上以检查其有效性并不方便，你真正需要的是能融入你的标准工作流程的 linter，而且麻烦最少。许多代码编辑器都有 linter 插件，例如，请参见 [JSHint 安装页面](https://jshint.com/install/)的“文本编辑器和 IDE 的插件”部分。
#### 其他方式
还有其他的方法来使用这种 linter；你可以在 [JSHint](https://jshint.com/install/) 和 [ESLint](https://eslint.org/docs/user-guide/getting-started) 的安装页面上读到这些方法。
-值得一提的是命令行的使用——你可以使用 npm（Node Package Manager——你必须先安装 [NodeJS](https://nodejs.org/zh-cn/)）将这些工具作为命令行工具来安装（可通过 CLI——命令行界面）。例如，下面的命令安装了 JSHint：
+值得一提的是命令行的使用——你可以使用 npm（Node 包管理器——你必须先安装 [NodeJS](https://nodejs.org/zh-cn/)）将这些工具作为命令行工具来安装（可通过 CLI——命令行界面）。例如，下面的命令安装了 JSHint：
```bash
npm install -g jshint
```
-然后，你可以将这些工具指向你想进行 lint 的 JavaScript 文件，比如说：
+然后，你可以用这些工具处理你想 lint 的 JavaScript 文件，比如说：
-
+
-你也可以将这些工具与任务运行器/构建工具一起使用，如 [Gulp](https://gulpjs.com/) 或 [Webpack](https://webpack.github.io/)，以便在开发过程中自动对你的 JavaScript 进行 lint。（见后面文章中的[使用任务运行器来自动测试工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#使用任务运行器作为自动化测试工具)。）关于 ESLint 选项，请参见 [ESLint 集成](https://eslint.org/docs/user-guide/integrations)；Grunt 开箱即支持 JSHint，并且还有其他可用的集成，例如[JSHint loader for Webpack](https://github.com/webpack-contrib/jshint-loader)。
+你也可以将这些工具与任务运行器/构建工具（如 [Gulp](https://gulpjs.com/) 或 [Webpack](https://webpack.github.io/)）一起使用，以便在开发过程中自动对你的 JavaScript 进行 lint。（见后面文章中的[使用任务运行器来自动测试工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#使用任务运行器作为自动化测试工具)。）关于 ESLint 选项，请参见 [ESLint 集成](https://eslint.org/docs/user-guide/integrations)；Grunt 开箱即支持 JSHint，并且还有其他可用的集成，例如 [Webpack 的 JSHint 加载器](https://github.com/webpack-contrib/jshint-loader)。
-> **备注：** ESLint 需要比 JSHint 更多的安装和配置过程，但是它也很强大。
+> **备注：** 尽管 ESLint 的安装和配置过程比起 JSHint 更繁琐，但是它也更强大。
### 浏览器开发者工具
-浏览器开发者工具有很多功能可以帮助定位 JavaScript 的问题，尤其是在开发的工程中，JavaScript 控制台会提醒一些错误信息。
+浏览器开发工具有许多有用的特性，可以帮助调试 JavaScript。首先，JavaScript 控制台会报告代码中的错误。
-下载示例文件 [broken-ajax.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/broken-ajax.html) 到本地（也可以在线阅读[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/broken-ajax.html)）。
+下载示例 [fetch-broken](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-broken) 到本地（也可以查看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-broken)）。
-如果你打开控制台面板，你将会看到错误提示“Uncaught TypeError: can't access property "length", heroes is undefined”，标示出问题出现在代码的第 49 行。如果你看了源代码，相关的代码如下面所示：
+如果查看控制台，你会看到一条错误消息。确切的语句会因浏览器而异，但大致会是：“Uncaught TypeError: heroes is not iterable”（未捕获的类型错误：heroes 不可迭代），并且引用的行号是 25。如果我们查看源代码，相关的代码部分如下：
```js
function showHeroes(jsonObj) {
- let heroes = jsonObj["members"];
+ const heroes = jsonObj["members"];
for (const hero of heroes) {
- // …
+ // ...
}
-
- // …
}
```
-所以当我们试图访问 `jsonObj` 的一个属性（正如你所期望的，它应该是一个 [JSON 对象](/zh-CN/docs/Learn/JavaScript/Objects/JSON)）时，代码就崩溃了。这应该是使用下面的 XMLHttpRequest 调用从外部的 `.json` 文件获取的：
+所以当我们尝试使用 `jsonObj`（正如你所料，它应该是一个 [JSON 对象](/zh-CN/docs/Learn/JavaScript/Objects/JSON)）时，代码就会崩溃。这个 JSON 对象应该通过以下 {{domxref("fetch()")}} 调用从外部的 `.json` 文件中获取：
```js
-let requestURL =
+const requestURL =
"https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
-let request = new XMLHttpRequest();
-request.open("GET", requestURL);
-request.send();
-let superHeroes = request.response;
-populateHeader(superHeroes);
-showHeroes(superHeroes);
+const response = fetch(requestURL);
+populateHeader(response);
+showHeroes(response);
```
但是它失败了。
-#### Console 相关 API
+#### Console API
-你可能已经知道这段代码有什么问题，但让我们再探讨一下，看看你可以如何调查这个问题。首先，[Console](/zh-CN/docs/Web/API/console) API 允许 JavaScript 代码与浏览器的 JavaScript 控制台交互。它有许多可用的功能，但你经常使用的主要功能是 [`console.log()`](/zh-CN/docs/Web/API/console/log)，它可以向控制台打印一条自定义信息。
+你可能已经知道这段代码有什么问题，但让我们更深入地探讨一下，以了解你该如何调查这个问题。首先，有一个 [Console](/zh-CN/docs/Web/API/console) API，借助它 JavaScript 代码可以与浏览器的 JavaScript 控制台进行交互。它有许多可用的特性，但最常用的是 [`console.log()`](/zh-CN/docs/Web/API/console/log_static)，它可以将自定义消息打印到控制台。
-尝试将这样代码插入到第 31 行下方：
+尝试添加一个 `console.log()` 调用来记录 `fetch()` 的返回值，像这样：
```js
-console.log("Response value: " + superHeroes);
-```
-
-在浏览器中刷新页面，你将在控制台中得到“Response value:”的输出，以及我们之前看到的相同的错误信息。
-
-`console.log()` 输出显示，`superHeroes` 对象似乎没有包含任何东西。像这样的异步请求的一个非常常见的问题是，当你试图在 `response` 对象真正从网络上返回之前对它做一些事情。让我们通过在 `load` 事件被触发后运行代码来解决这个问题。删除 `console.log()` 行，并更新这个代码块：
+const requestURL =
+ "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
-```js
-const superHeroes = request.response;
+const response = fetch(requestURL);
+console.log(`返回值：${response}`);
+const superHeroes = response;
populateHeader(superHeroes);
showHeroes(superHeroes);
```
-改成这样：
+在浏览器中刷新页面。这次，在错误消息之前，你会看到一条新的消息记录在控制台上：
+
+```plain
+Response value: [object Promise]
+```
+
+`console.log()` 的输出显示，`fetch()` 的返回值不是 JSON 数据，而是一个 {{jsxref("Promise")}}。`fetch()` 函数是异步的：它返回一个 `Promise`，只有在实际从网络接收到响应时，这个 `Promise` 才会兑现。在我们使用响应之前，我们必须等待 `Promise` 被兑现。
+
+我们可以通过将使用响应的代码放在返回的 `Promise` 的 {{jsxref("Promise.prototype.then()", "then()")}} 方法中来实现这一点，像这样：
```js
-request.onload = function () {
- let superHeroes = request.response;
- populateHeader(superHeroes);
- showHeroes(superHeroes);
-};
+const response = fetch(requestURL);
+fetch(requestURL).then((response) => {
+ populateHeader(response);
+ showHeroes(response);
+});
```
-总而言之，任何时候，只要有东西不工作了，在你的代码中的某个点上，一个值似乎不是它所要的，你就可以使用 `console.log()` 来打印出来，看看发生了什么。
+总之，每当有东西不工作，并且某个值在代码的某个点上不是它应该是的样子时，你都可以使用 `console.log()` 来打印出它，了解发生了什么。
#### 使用 JavaScript 调试器
-不幸的是，我们仍然有同样的错误，问题并没有消失。现在让我们使用浏览器开发工具的一个更复杂的功能来调查一下这个问题，它在 Firefox 中被称为 [JavaScript 调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)。
+不幸的是，我们仍然有同样的错误，问题并没有消失。现在让我们使用浏览器开发工具的一个更复杂的特性来调查一下这个问题，它在 Firefox 中被称为 [JavaScript 调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)。
-> **备注：** 其他浏览器中也有类似的工具；Chrome 中的 [Sources tab](https://developer.chrome.com/docs/devtools/#sources)，Safari 中的调试器（见 [Safari Web 开发工具](https://developer.apple.com/safari/tools/)）等。
+> **备注：** 其他浏览器中也有类似的工具；Chrome 中的[来源面板](https://developer.chrome.com/docs/devtools/#sources)、Safari 中的调试器（见 [Safari Web 开发工具](https://developer.apple.com/safari/tools/)）等。
在 Firefox 中，调试器标签页大致如图所示：
@@ -193,124 +187,108 @@ request.onload = function () {
- 中间的面板显示了所选脚本中的代码。
- 右边的面板显示了与当前环境有关的有用细节——_断点_、*调用栈*和当前活动的*作用域*。
-这类工具的主要特点是能够为代码添加断点，这些是代码执行停止的点，在这一点上，你可以检查环境的当前状态，看看正在发生什么。
+这类工具的主要特点是能够为代码添加断点，这些是代码执行停止的点，在这一点上，你可以检查环境的当前状态，了解正在发生什么。
-让我们开始工作吧。现在错误是在第 51 行抛出的。在中间的面板上点击第 51 行，给它添加一个断点（你会看到一个蓝色的箭头出现在它的上方）。现在刷新页面（Cmd/Ctrl + R），浏览器将在第 51 行暂停执行代码。在这一点上，右侧将更新显示一些非常有用的信息。
+让我们开始工作吧。现在错误是在第 26 行抛出的。在中间的面板上点击第 26 行，给它添加一个断点（你会看到一个蓝色的箭头出现在它的上方）。现在刷新页面（Cmd/Ctrl + R），浏览器将在第 26 行暂停执行代码。在这一点上，右侧将更新显示一些非常有用的信息。
-- 在 _Breakpoints_ 下，你会看到你所设置的断点的细节。
-- 在 _Call Stack_ 下，你会看到一些条目，这基本上是一系列函数的列表，这些函数被调用导致当前函数被调用。在最上面，我们有 `showHeroes()` 这个函数，我们目前在其中，其次我们有 `onload`，它存储了包含调用 `showHeroes()` 的事件处理函数。
-- 在 _Scopes_ 下，你会看到我们正在看的函数的当前活动范围。我们只有三个：`showHeroes`、`block` 和 `Window`（全局作用域）。每个作用域都可以被扩展，以显示代码停止执行时作用域内的变量值。
+- 在*断点*下，你会看到你设置的断点的详细信息。
+- 在*调用栈*下，你会看到几个条目——这基本上是导致当前函数被调用的一系列函数的列表。在顶部，是 `showHeroes()` 函数（我们当前正在查看的函数），第二个是 `onload`，它存储了包含对 `showHeroes()` 的调用的事件处理函数。
+- 在*作用域*下，你会看到我们正在查看的函数的当前活动作用域。我们只有三个——`showHeroes`、`block` 和 `Window`（全局作用域）。可以展开每个作用域以查看在执行代码被停止时作用域内部变量的值。
+
+这里面有一些非常有用的信息。
-我们可以在这里找到很多有用的信息：
+1. 展开 `showHeroes` 作用域，你可以从中看到 `heroes` 变量是 `undefined`，表示对 `jsonObj` 的 `members` 属性的访问（函数的第一行）没有成功。
+2. 你也可以看到 `jsonObj` 变量存储的是一个 {{domxref("Response")}} 对象，而不是一个 JSON 对象。
-1. 展开 `showHeroes` 域，你可以看到 heroes 变量是 `undefined`，表明访问 `jsonObj` 的 `members` 属性（函数的第一行）没有成功。
-2. 你也可以看到，`jsonObj` 变量存储的是一个文本字符串，而不是一个 JSON 对象。
-3. 再往下探索调用栈，在 _Call Stack_ 部分点击 `onload`。视图将更新，在中心面板上显示 `request.onload` 函数，并在 _Scopes_ 部分显示其作用域。
-4. 如果你扩展 `onload` 范围，你会看到 `superHeroes` 变量也是一个文本字符串，而不是一个对象。问题得到解决——我们的 [`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest) 调用是将 JSON 作为文本返回，而不是 JSON 对象。
+`showHeroes()` 的参数是 `fetch()` promise 兑现得到的值。所以这个 promise 不是 JSON 格式的：它是一个 `Response` 对象。还需要额外的步骤来将响应内容转换为 JSON 对象。
-我们希望你能自己尝试解决这个问题。有两点提示，你可以[明确告诉 XMLHttpRequest 对象返回 JSON 格式](/zh-CN/docs/Web/API/XMLHttpRequest/responseType)，或者在响应到达后[将返回的文本转换成 JSON](/zh-CN/docs/Learn/JavaScript/Objects/JSON#对象和文本间的转换)。如果你被卡住了，请参考我们的 [fixed-ajax.html](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fixed-ajax.html) 示例。
+我们希望你自己尝试修复这个问题。作为起点，请查看 {{domxref("Response")}} 对象的文档。如果遇到困难，可以在 <https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-fixed> 找到修复后的源代码。
-> **备注：** 调试器标签页还有很多我们没有讨论过的其他有用的功能，例如条件断点和观察表达式。关于更多信息，请参见[调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)页面。
+> **备注：** 调试器标签页还有许多其他有用的特性，我们没有在这里讨论，比如条件断点和观察表达式。更多信息，请参见[调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)页面。
### 性能问题
-随着你的应用程序变得越来越复杂，你开始使用更多的 JavaScript，并可能会遇到性能问题，特别是在较慢的设备上查看应用程序时。性能是一个宽泛的话题，我们没有时间在这里详细介绍它。以下是一些快速提示：
+随着应用程序变得越来越复杂，你可能会开始使用更多的 JavaScript。这时，你可能会遇到性能问题（尤其是在较慢的设备上）。性能优化是一个广泛的话题，我们无法在此详尽讨论，但以下是一些快速优化建议：
-- 为了避免加载超过你需要的 JavaScript，请使用 [Browserify](https://browserify.org/) 这样的解决方案将你的脚本捆绑成一个文件。一般来说，减少 HTTP 请求的数量对性能非常有利。
-- 在你将文件加载到你的生产服务器之前，通过最小化使你的文件变得更小。最小化将所有的代码压缩到一个巨大的单行中，使其占用的文件大小大大减少。这很难看，但当它完成后，你不需要阅读它！这最好使用像 [Uglify](https://github.com/mishoo/UglifyJS) 这样的最小化工具来完成（也有一个在线版本，见[JSCompress.com](https://jscompress.com/)）。
-- 当使用 API 时，确保在不使用 API 特性时将其关闭；一些 API 调用可能非常耗费处理能力。例如，当显示一个视频流时，确保在你看不到它时将其关闭。当使用重复的地理定位调用跟踪设备的位置时，确保在用户停止使用时将其关闭。
-- 对于性能来说，动画的成本确实很高。很多 JavaScript 库提供了由 JavaScript 编程的动画功能，但通过像 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations)这样的本地浏览器功能（或新生的 [Web 动画 API](/zh-CN/docs/Web/API/Web_Animations_API)）做动画要比 JavaScript 更具成本效益。阅读 Brian Birtles 的 [Animating like you just don't care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/)，了解一些关于动画为何开销大的真正有用的理论，关于如何提高动画性能的提示，以及关于 Web 动画 API 的信息。
+- 为了避免加载不必要的 JavaScript，建议使用 [Browserify](https://browserify.org/) 等工具将脚本打包成单个文件。总体而言，减少 HTTP 请求的数量可以很好地提升性能。
+- 在将文件部署到生产服务器之前，应通过极简化（minification）减小文件体积。极简化会将所有代码合并成一行，从而显著减少文件大小。虽然简化后的代码可读性较差，但你不需要直接阅读它！推荐使用 [Uglify](https://github.com/mishoo/UglifyJS) 等极简化工具（还有在线版本，请访问 [JSCompress.com](https://jscompress.com/)）。
+- 使用 API 时，请确保在不需要时关闭 API 特性；因为某些 API 调用在处理能力方面可能非常耗费资源。例如，在显示视频流时，如果视频不在视线范围内，请确保关闭它。在使用重复调用的地理位置 API 跟踪设备位置时，如果用户不再需要，也应及时关闭。
+- 动画可能会对性能造成重大影响。尽管许多 JavaScript 库提供了由 JavaScript 控制的动画功能，但使用浏览器原生特性（如 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)或新兴的 [Web 动画 API](/zh-CN/docs/Web/API/Web_Animations_API)）执行动画通常更高效。建议阅读 Brian Birtles 的文章[使用 Element.animate 制作不重要的动画](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/)，了解动画成本高昂的原因、提升动画性能的技巧，以及 Web 动画 API 的相关信息。
-> **备注：** Addy Osmani 的 [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/) 包含了大量的细节和一些提升 JavaScript 性能的优秀技巧。
+> **备注：** 阿迪—奥斯曼尼的[编写快速、内存效率高的 JavaScript 代码](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/)包含了大量细节和一些有助于提高 JavaScript 性能的出色建议。
## 跨浏览器 JavaScript 问题
-在本节中，我们将研究一些比较常见的跨浏览器的 JavaScript 问题。我们将把它分解为：
+在本节中，我们将研究一些比较常见的跨浏览器的 JavaScript 问题。我们将把它分为：
-- 使用现代核心 JavaScript 特性
-- 使用现代 Web API 特性
-- 使用不良的浏览器嗅探代码
+- 使用了现代核心 JavaScript 特性
+- 使用了现代 Web API 特性
+- 使用了糟糕的浏览器嗅探代码
- 性能问题
-### 使用现代 JavaScript/API 特性
+### 使用了现代 JavaScript/API 特性
-在[上一篇文章](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#older_browsers_not_supporting_modern_features)中，我们描述了一些处理 HTML 和 CSS 错误和不被识别的特性的方法，这是由于语言的特性决定的。然而，JavaScript 并不像 HTML 和 CSS 那样宽松。如果 JavaScript 引擎遇到错误或不被识别的语法，更多的情况下它会出现错误。
+在[之前的文章](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#浏览器不支持新特性)中，我们描述了由于 HTML 和 CSS 的语言性质，处理 HTML 和 CSS 错误和不被识别特性的一些方法。然而，JavaScript 不像 HTML 和 CSS 那么宽容，如果 JavaScript 引擎遇到错误或不被识别的语法（例如在使用新的不受支持的 特性时），它通常会抛出错误。
-在最近版本的规范中定义了许多现代 JavaScript 语言特性，这些特性在旧的浏览器中无法使用。其中有些是语法糖（基本上是用一种更简单、更漂亮的方式来写你已经可以用现有的功能来做的事情），有些则提供了有趣的新可能性。
+有几种处理新特性支持的策略可以探索，让我们来探讨一下最常见的几种。
-比如说：
-
-- [Promises](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)是一个伟大的新功能，用于执行异步操作，并确保这些操作在依赖其结果的代码被用于其他用途之前完成。举个例子，[Fetch API](/zh-CN/docs/Web/API/fetch)（相当于现代的 [XMLHTTPRequest](/zh-CN/docs/Web/API/XMLHttpRequest)）使用 promise 来获取网络上的资源，并确保在使用这些资源之前已经返回响应（例如在 {{htmlelement("img")}} 元素内显示图片）。除了 IE 以外，所有现代浏览器中都支持这种特性。
-- [箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)为编写[匿名函数](/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions#匿名函数)提供了一个更短、更方便的语法。关于一个快速的例子，请看 [arrow-function.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html)（也请看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/arrow-function.html)）。除了 IE 以外，所有现代浏览器都支持这种特性。
-- 在你的 JavaScript 代码的顶部声明[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)，会使它在解析时有更严格的规则，这意味着会有更多的警告和错误被抛出，一些本来可以接受的东西也会被禁止。可以说，使用严格模式是一个好主意，因为它能使代码更好、更有效率。所有现代浏览器都支持严格模式。
-- [类型化数组](/zh-CN/docs/Web/JavaScript/Typed_arrays)允许 JavaScript 代码访问和处理原始二进制数据，这在浏览器 API 开始处理原始视频和音频数据流时是必要的。它可以在 IE10 及以上版本以及所有现代浏览器中使用。
-
-还有许多新的 API 出现在最近的浏览器版本中，而这些 API 在旧版本的浏览器中无法使用，例如：
-
-- [IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API)、[Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API) 和其他在客户端存储网页数据的 API。
-- 使用单独线程运行 JavaScript 代码的 [Web Workers API](/zh-CN/docs/Web/API/Web_Workers_API)，以提升性能。
-- 使用真实 3D 图形的 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)。
-- 提供附加音频控制功能的 [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API)。
-- 用于多人、实时视频/音频连接（如视频会议）的 [WebRTC API](/zh-CN/docs/Web/API/WebRTC_API)。
-- 用于在浏览器中设计虚拟现实体验的 [WebVR API](/zh-CN/docs/Web/API/WebVR_API)（例如，用 VR 硬件输入的数据控制 3D 视图）。
-
-有几种策略可以处理浏览器之间与特性支持有关的不兼容问题；让我们来探讨一下最常见的策略。
-
-> **备注：** 这些策略并不是独立存在的，当然，你可以根据需要将它们结合起来。例如，你可以使用特性检测来确定一种特性是否被支持；如果不被支持，你可以运行代码来加载一个 polyfill 或一个库来处理缺乏支持的问题。
+> **备注：** 这些策略并不是相互独立的——当然，你可以根据需要将它们结合使用。例如，你可以使用特性检测来确定是否支持某项特性；如果不支持，你可以运行代码来加载 polyfill 或库来处理缺乏支持的情况。
#### 特性检测
-功能检测背后的想法是，你可以运行一个测试来确定当前浏览器是否支持某个 JavaScript 特性，然后有条件地运行代码，在支持和不支持该功能的浏览器中提供可接受的体验。举个简单的例子，[地理位置 API](/zh-CN/docs/Web/API/Geolocation_API)（它暴露了网络浏览器所运行的设备的可用位置数据）有一个主要的使用入口——全局 [Navigator](/zh-CN/docs/Web/API/Navigator) 对象上的 `geolocation` 属性。因此，你可以通过使用类似以下的方法来检测浏览器是否支持地理位置：
+特性检测的核心理念在于，通过执行测试来确认当前浏览器是否支持某个 JavaScript 特性，进而有条件地执行代码。这样做可以确保无论浏览器是否支持该特性，都能提供一个可接受的用户体验。以[地理位置 API](/zh-CN/docs/Web/API/Geolocation_API) 为例——该 API 能够访问网络浏览器所在设备的位置数据，它主要通过全局 [Navigator](/zh-CN/docs/Web/API/Navigator) 对象的 `geolocation` 属性来使用。因此，你可以采用如下方法来检测浏览器是否支持地理位置特性：
```js
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
- // 在地图上显示位置，可能用到 Google Maps API
+ // 在地图上显示位置，可能会用到 Google Maps API
});
} else {
// 也许可以让用户选择静态地图
}
```
-你也可以为 CSS 特性编写这样的测试，例如测试 _[element.style.property](/zh-CN/docs/Web/API/HTMLElement/style)_ 是否存在（例如：`paragraph.style.transform !== undefined`）。但对于 CSS 和 JavaScript 来说，使用一个成熟的特性检测库可能比一直写自己的更好。Modernizr 是特性检测测试的工业标准。
+你也可以为 CSS 特性编写这样的测试，例如通过测试 _[element.style.property](/zh-CN/docs/Web/API/HTMLElement/style)_ 的存在（比如 `paragraph.style.transform !== undefined`）。如果你希望在支持某个 CSS 特性的情况下应用样式，可以直接使用 [@supports](/zh-CN/docs/Web/CSS/@supports) 规则（也称为特性查询）。例如，要检查浏览器是否支持 CSS 容器查询，可以这样做：
-最后一点，不要把特性检测和**浏览器嗅探**（检测什么特定的浏览器在访问网站）混淆起来，这是一种可怕的做法，应该不惜一切代价加以阻止。更多细节请参见[使用不良的浏览器嗅探代码](#使用不良的浏览器嗅探代码)，稍后我们就会讲到。
+```css
+@supports (container-type: inline-size) {
+ /* 如果支持则使用容器查询 */
+}
+```
-> **备注：** 有些特性是已知不可检测的——见 Modernizr 的[不可检测特性列表](https://github.com/Modernizr/Modernizr/wiki/Undetectables)。
+最后一点，不要将特性检测与**浏览器嗅探**（检测访问站点的特定浏览器）混淆——这是一种应该被全面反对的做法。有关更多详细信息，请参见后文的[不要嗅探浏览器](#不要嗅探浏览器)。
-> **备注：** 特性检测将在本模块后面的专门文章中更详细地介绍。
+> **备注：** 特性检测将在本模块的专门文章中详细介绍。
#### 库
-JavaScript 库本质上是第三方的代码单元，你可以将其附加到你的页面上以提供大量可以直接使用的现成功能，在这个过程中为你节省大量的时间。很多 JavaScript 库的出现，可能是因为它们的开发者正在编写一套通用的实用功能，以节省他们在编写未来项目时的时间，并决定将它们公开发布，因为其他人也可能发现它们很有用。
+JavaScript 库本质上是一组第三方代码，你可以将其集成到你的网页中，它们提供了大量现成的功能，从而为你节省宝贵的时间。许多 JavaScript 库的诞生，可能源于其开发者编写了一系列常用的实用函数以便节省未来项目的开发时间，并决定将它们开源，因为这些功能对其他人来说也可能非常有用。
JavaScript 库往往有几个主要的种类（有些库包含其中的一个以上的目的）：
-- 实用程序库：提供一堆功能，使平凡的任务更容易管理，不那么枯燥。例如，[jQuery](https://jquery.com/) 提供了自己的全功能选择器和 DOM 操作库，允许在 JavaScript 中进行 CSS 选择器类型的元素选择，并更容易建立 DOM。现在我们有了现代的特性，如 {{domxref("Document.querySelector()")}}、{{domxref("Document.querySelectorAll()")}}、{{domxref("Node")}} 方法，在各浏览器中可用，这就不那么重要了，但在旧的浏览器需要支持时，它仍然有用。
-- 方便性库：让困难的事情更容易做。例如，直接使用 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 很复杂且很有挑战性，而 [Three.js](https://threejs.org/) 库（和其他类似的库）是建立在 WebGL 之上的，为创建普通 3D 对象、照明、纹理等提供了更容易的 API。[Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 的使用也非常复杂，所以代码库已经开始出现，以使常见的 Service Worker 用例更容易实现（参见 [Service Worker 指导书](https://github.com/mdn/serviceworker-cookbook)，以获得一些有用的代码示例）。
-- 效果库：这些库的设计是为了让你能够轻松地在你的网站上添加特殊效果。在“DHTML”是一个流行的流行语的时候，这是很有用的，实现一个效果需要很多复杂的 JavaScript，但现在的浏览器有很多内置的 CSS 功能和 API，可以更容易地实现效果。
-- UI 库：提供实现复杂的 UI 功能的方法，否则这些功能的实现和跨浏览器的工作会很困难，例如 [Foundation](https://get.foundation/)、[Bootstrap](https://getbootstrap.com/) 和[Material-UI](https://mui.com/)（后者是一套用于 React 框架的组件）。这些往往被用作整个网站布局的基础；仅仅为了一个 UI 功能而把它们放入其中往往是很困难的。
+- 实用程序库：提供一组函数，使日常的任务更容易管理，不那么枯燥。例如，[jQuery](https://jquery.com/) 提供了自己的全功能选择器和 DOM 操作库，允许在 JavaScript 中进行 CSS 选择器类型的元素选择，并更容易建立 DOM。现在我们有了现代的特性，如 {{domxref("Document.querySelector()")}}、{{domxref("Document.querySelectorAll()")}}、{{domxref("Node")}} 方法，在各浏览器中可用，这就不那么重要了，但在旧的浏览器需要支持时，它仍然有用。
+- 方便性库：让困难的事情更容易做。例如，直接使用 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 很复杂且有挑战性，而 [Three.js](https://threejs.org/) 库（和其他类似的库）是建立在 WebGL 之上的，为创建普通 3D 对象、照明、纹理等提供了更容易的 API。[Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 的使用也非常复杂，所以代码库已经开始出现，以使常见的 Service Worker 用例更容易实现（参见 [Service Worker 指导书](https://github.com/mdn/serviceworker-cookbook)，以获得一些有用的代码示例）。
+- 效果库：这些库的设计是为了让你能够轻松地在你的网站上添加特殊效果。在“DHTML”是一个流行的流行语的时候，这是很有用的（当时实现一个效果需要很多复杂的 JavaScript），但现在的浏览器有很多内置的 CSS 特性和 API，可以更容易地实现效果。
+- UI 库：提供实现复杂的 UI 特性的方法，没有 UI 库的话，这些特性的实现和跨浏览器的工作会很困难，例如 [Foundation](https://get.foundation/)、[Bootstrap](https://getbootstrap.com/) 和 [Material-UI](https://mui.com/)（后者是一套用于 React 框架的组件）。这些往往被用作整个网站布局的基础；仅仅为了一个 UI 特性而把它们放入其中往往是很困难的。
- 标准化库：给你一个简单的语法，让你轻松完成一个任务，而不必担心跨浏览器的差异。该库将在后台操作适当的 API，所以无论什么浏览器，该功能都可以使用（理论上）。例如， [LocalForage](https://github.com/localForage/localForage) 是一个用于客户端数据存储的库，它为存储和检索数据提供了一个简单的语法。在后台，它使用浏览器可用的最好的 API 来存储数据，无论是 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API)、[Web Storage](/zh-CN/docs/Web/API/Web_Storage_API)，甚至是 Web SQL（现在已经废弃了，但在基于 Chromium 的浏览器安全上下文中仍然支持）。
在选择使用一个库时，要确保它能在你想支持的一系列浏览器中工作，并对你的实现进行彻底的测试。还要确保这个库是受欢迎的，得到良好的支持，并且不可能在下周就被淘汰。与其他开发者交谈，了解他们的建议，看看该库在 GitHub（或其他存放它的地方）上有多少活动和贡献者，等等。
-库的基本用法往往包括下载库的文件（JavaScript，可能还有一些 CSS 或其他依赖项）并将其附加到你的页面上（例如通过 {{htmlelement("script")}} 元素），尽管这些库通常还有许多其他用法选择，例如将其作为 [Bower](https://bower.io/) 组件安装，或通过 [Webpack](https://webpack.github.io/) 模块捆绑器将其作为依赖项。你将阅读这些库的单独安装页面以获得更多信息。
+库的基本用法往往包括下载库的文件（JavaScript，可能还有一些 CSS 或其他依赖项）并将其附加到你的页面上（例如通过 {{htmlelement("script")}} 元素），尽管这些库通常还有许多其他用法选择，例如将其作为 [Bower](https://bower.io/) 组件安装，或通过 [Webpack](https://webpack.github.io/) 模块捆绑器将其作为依赖项。你需要阅读这些库的单独安装页面以获得更多信息。
-> **备注：** 你也会在网络上遇到一些 JavaScript 框架，比如 [Ember](https://emberjs.com/) 和 [Angular](https://angularjs.org/)。库通常可用于解决个别问题并放入现有网站中，而框架则更倾向于开发复杂 web 应用的完整解决方案。
+> **备注：** 你也会在 web 上遇到一些 JavaScript 框架，比如 [Ember](https://emberjs.com/) 和 [Angular](https://angularjs.org/)。库通常可用于解决个别问题并放入现有网站中，而框架则更倾向于开发复杂 web 应用的完整解决方案。
#### Polyfill
-Polyfill 也由第三方的 JavaScript 文件组成，你可以把它们放到你的项目中，但它们与库不同。库倾向于加强现有的功能，使一些需求可以更容易实现，而 Polyfill 提供的是根本不存在的功能。Polyfill 完全使用 JavaScript 或其他技术来建立对浏览器不支持的功能的支持。例如，你可以使用 [es6-promise](https://github.com/stefanpenner/es6-promise) 这样的 polyfill 来使 promise 在没有原生支持的浏览器中也能工作。
-
-Modernizr 的 [HTML5 Cross Browser Polyfill](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) 列表是一个有用的地方，可以找到用于不同目的的 polyfill。同样，你应该在使用它们之前对它们进行研究，确保它们能够正常工作并得到维护。
+Polyfill 也由第三方的 JavaScript 文件组成，你可以把它们放到你的项目中，但它们与库不同。库倾向于加强现有的功能，使一些需求可以更容易实现，而 Polyfill 提供的是根本不存在的功能。Polyfill 完全使用 JavaScript 或其他技术来建立对浏览器不支持的特性的支持。例如，你可以使用 [es6-promise](https://github.com/stefanpenner/es6-promise) 这样的 polyfill 来使 promise 在没有原生支持的浏览器中也能工作。
-让我们来做一个练习，在这个示例中，我们将使用 Fetch polyfill 来为旧版浏览器中的 Fetch API 提供支持；但是我们也需要使用 es6-promise polyfill，因为 Fetch 大量使用了 promise，而不支持 promise 的浏览器仍然会有麻烦。
+让我们一起来完成一个练习——在这个示例中，我们将使用 Fetch polyfill 和 es6-promise polyfill。虽然现代浏览器已经完全支持 Fetch 和 Promise，但如果我们的目标浏览器不支持 Fetch，那么这种浏览器很可能也不支持 Promise，因为 Fetch 依赖于 Promise。
1. 为了开始工作，在一个新的目录中复制我们的 [fetch-polyfill.html](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html) 示例文件和[漂亮的鲜花图片](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/flowers.jpg)。我们将编写代码来获取花的图片并在页面中显示。
2. 接下来，在与 HTML 相同的目录中保存一份 [Fetch polyfill](https://raw.githubusercontent.com/github/fetch/master/fetch.js) 的副本。
-3. 使用以下代码将 polyfill 脚本应用到页面上，将这些脚本放在现有的 {{htmlelement("script")}} 元素上方，这样当我们开始尝试使用 Fetch 时，它们就已经在页面上可用了（我们还从 CDN 加载一个 Promise polyfill，因为 IE11 确实支持 promise，这是 fetch 需要的）：
+3. 使用以下代码将 polyfill 脚本应用到页面上，将这些脚本放在现有的 {{htmlelement("script")}} 元素上方，这样当我们开始尝试使用 Fetch 时，它们就已经在页面上可用了（我们还从 CDN 加载一个 Promise polyfill，因为 IE11 支持 promise，这是 fetch 所需要的）：
```html
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
@@ -331,16 +309,16 @@ Modernizr 的 [HTML5 Cross Browser Polyfill](https://github.com/Modernizr/Modern
});
```
-5. 即使你在不支持 [Fetch](/zh-CN/docs/Web/API/fetch) 的浏览器中加载它，你仍然应该看到花的图像出现——这不是很酷吗？
+5. 即使你在不支持 [Fetch](/zh-CN/docs/Web/API/fetch) 的浏览器中加载它，你仍然能够看到花的图像——这不是很酷吗？
> **备注：** 你可以在 [fetch-polyfill-finished.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) 找到我们的完成版（也请看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)）。
-> **备注：** 在此重申，有许多不同的方法来利用你将遇到的不同的 polyfill——具体请查阅每个 polyfill 的单独文档。
+> **备注：** 在此重申，polyfill 有许多种方法可以利用——具体请查阅每个 polyfill 单独的文档。
-你可能会想，“为什么我们总是要加载 polyfill 代码，即使我们不需要它？”这是一个很好的观点——随着你的网站变得越来越复杂，你开始使用更多的库、polyfill 等，你可能开始加载很多额外的代码，这可能开始影响性能，特别是在性能较差的设备上。只在需要时加载文件是有意义的。
+你可能会问：“为什么我们要加载 polyfill 代码，即便在不需要的时候？”这是一个合理的疑问。随着网站变得更加复杂，开始引入更多的库和 polyfill，你可能会加载大量不必要的代码。这会影响网站性能，尤其是在性能较低的设备上。因此，只有在需要时才加载相应的文件是明智的。
-做到这一点需要在你的 JavaScript 中进行一些额外的设置。你需要某种特性检测测试，检测浏览器是否支持我们要使用的特性：
+要做到这一点，你需要在 JavaScript 代码中进行一些额外的配置。你需要进行特性检测，以确定浏览器是否支持你想要使用的特性：
```js
if (browserSupportsAllFeatures()) {
@@ -350,11 +328,11 @@ if (browserSupportsAllFeatures()) {
}
function main(err) {
- // 主要的应用功能
+ // 主要的应用代码
}
```
-所以首先我们运行一个条件，检查函数 `browserSupportsAllFeatures()` 是否返回 true。如果是，我们就运行 `main()` 函数，它将包含我们应用程序的所有代码。`browserSupportsAllFeatures()` 看起来像这样：
+因此，我们首先执行一个条件判断，检查 `browserSupportsAllFeatures()` 函数是否返回 `true`。如果返回 `true`，我们就执行 `main()` 函数（该函数包含我们应用程序的全部代码）。`browserSupportsAllFeatures()` 函数的实现可能如下所示：
```js
function browserSupportsAllFeatures() {
@@ -362,7 +340,7 @@ function browserSupportsAllFeatures() {
}
```
-这里我们测试浏览器中是否存在 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 对象和 [`fetch()`](/zh-CN/docs/Web/API/fetch) 函数。如果两者都存在，该函数返回 true。如果函数返回 `false`，那么我们就运行条件第二部分的代码，运行一个叫做 loadScript() 的函数，将 polyfill 加载到页面中，然后在加载完成后运行 `main()`。`loadScript()` 看起来像这样：
+在这段代码中，我们检测浏览器是否支持 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 对象和 [`fetch()`](/zh-CN/docs/Web/API/fetch) 函数。如果浏览器支持这两者，函数就会返回 `true`。如果函数返回 `false`，我们将执行条件语句的第二部分，调用名为 `loadScript()` 的函数来将 polyfill 加载到页面，然后执行 `main()` 函数。`loadScript()` 函数的实现可能是这样的：
```js
function loadScript(src, done) {
@@ -378,90 +356,50 @@ function loadScript(src, done) {
}
```
-这个函数创建了一个新的 `<script>` 元素，然后将其 `src` 属性设置为我们作为第一个参数指定的路径（当我们在上面的代码中调用它时，为 `'polyfills.js`）。当它加载完毕后，我们运行我们作为第二个参数指定的函数（`main()`）。如果在加载脚本的过程中出现错误，我们仍然会调用该函数，但会有一个自定义的错误，如果出现问题，我们可以检索到这个错误来帮助调试。
+此函数创建一个新的 `<script>` 元素，并设置其 `src` 属性为我们在上述代码中调用时指定的路径（`'polyfills.js'`）。脚本加载完成后，会执行我们第二个参数指定的函数（`main()`）。如果在加载脚本时发生错误，该函数仍会被调用，但会传入一个自定义错误，这样如果出现问题，我们可以通过这个错误来进行调试。
-请注意，polyfills.js 基本上是把我们正在使用的两个 polyfill 放在一个文件里。我们是手动完成的，但也有更聪明的解决方案可以为你自动生成捆绑文件——见 [Browserify](https://browserify.org/)（见[开始学习 Browserify](https://www.sitepoint.com/getting-started-browserify/) 基本教程）。把多个 JavaScript 文件捆绑成这样是个好主意，它通过减少你需要进行的 HTTP 请求的数量来提高你网站的性能。
+请注意，`polyfills.js` 实际上是将我们正在使用的两个 polyfill 合并到一个文件中。虽然我们是手动完成这一过程的，但也有更智能的工具可以自动为你生成捆绑文件——例如 [Browserify](https://browserify.org/)（你可以参考 [Browserify 基础教程](https://www.sitepoint.com/getting-started-browserify/)来了解如何开始使用）。将多个 JavaScript 文件捆绑在一起是一个好方法，它通过减少所需进行的 HTTP 请求数量来提升网站性能。
-你可以在 [fetch-polyfill-only-when-needed.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html) 中看到这段代码的运行情况（也请看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html)）。我们想说明的是，我们不能为这段代码邀功，它最初是由 Philip Walton 写的。请看他的文章[只在需要时加载 Polyfill](https://philipwalton.com/articles/loading-polyfills-only-when-needed/)，了解原始代码，以及围绕这个更广泛主题的许多有用的解释）。
+你可以在 [fetch-polyfill-only-when-needed.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html) 查看这段代码的实际运行情况（也可查看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html)）。我们需要指出的是，这段代码的原创者是 Philip Walton。你可以阅读他的文章[只在需要时加载 Polyfill](https://philipwalton.com/articles/loading-polyfills-only-when-needed/)，了解更多关于原始代码的信息，以及围绕这个主题的许多有用讨论。
#### 转译 JavaScript
-对于现在想使用现代 JavaScript 功能的人来说，另一个选择是将利用 ECMAScript 6/ECMAScript 2015 功能的代码转换为能在旧版浏览器中使用的版本。
-
-> **备注：** 这被称为“转译”——这不是在将代码编译成一个较低的层次，以便在计算机上运行（就像 C 代码那样）；相反，这是在将它改变成一种存在于类似抽象层次的语法，因此它可以以同样的方式使用，但情况略有不同（在这种情况下，将 JavaScript 的一种风格转变为另一种）。
-
-例如，我们在文章前面谈到了箭头函数（在线示例见 [arrow-function.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html)，也可以看看[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/arrow-function.html)），它只在最新的浏览器上工作：
-
-```js
-addEventListener("click", () => {});
-```
-
-我们可以把它转译成一个传统的老式匿名函数，这样它就可以在老式浏览器中工作：
-
-```js
-addEventListener("click", function () {
- /* … */
-});
-```
-
-目前推荐的 JavaScript 转译工具是 [Babel](https://babeljs.io/)。它为适合转译的语言特性提供了转译功能。对于那些不能轻易转译成旧的等价物的功能，Babel 还提供了 polyfill 来提供支持。
-
-尝试 Babel 的最简单方法是使用其[在线版本](https://babeljs.io/repl/)，它允许你在左边输入你的源代码，并在右边输出一个转译的版本。
-
-> **备注：** 有很多方法可以使用 Babel（如任务运行器、自动化工具等），你会在[设置页面](https://babeljs.io/docs/setup/)看到。
-
-### 使用不良的浏览器嗅探代码
-
-所有的浏览器都有一个**用户代理**字符串，它可以识别浏览器是什么（版本、名称、操作系统等）。历史上，开发人员使用*浏览器嗅探代码*来检测用户所使用的浏览器，并提供适当的代码以在该浏览器上工作。
-
-以前的代码是这样的（尽管这是一个简化的例子）：
-
-```js
-let ua = navigator.userAgent;
-
-if (ua.includes("Firefox")) {
- // 运行 Firefox 特定代码
-} else if (ua.includes("Chrome")) {
- // 运行 Chrome 特定代码
-}
-```
-
-这个想法似乎是有道理的——检测什么浏览器在浏览网站，并提供适合该浏览器的代码。
+对于那些想要使用现代 JavaScript 特性的开发者来说，另一个选择是将采用 ECMAScript 6/ECMAScript 2015 特性的代码转换成能够在旧版浏览器上运行的版本。
-> **备注：** 试着打开你的 JavaScript 控制台，运行 `navigator.userAgent`，看看你会得到什么返回值。
+> **备注：** 这个过程被称为“转译”。这并不是将代码编译到更低级别以便在计算机上运行（像 C 语言代码那样）；而是将代码转换为另一种同等抽象级别的语法，使其可以以类似的方式运行，尽管细节上有所不同（在这个例子中，是将一种 JavaScript 风格转换为另一种风格）。
-然而，随着时间的推移，开发人员开始看到这种方法的主要问题。首先，这些代码很容易出错。如果你知道某项特性在 Firefox 10 及以下版本中不工作，并实现了代码来检测这一点，但是 Firefox 11 的发布支持了这个特性，那会怎样？Firefox 11 可能不会被支持，因为它不是 Firefox 10。你必须定期改变你所有的嗅探代码。
+[Babel.js](https://babeljs.io/) 是一种常见的转译器，但还有其他转译器。
-许多开发者实现了糟糕的浏览器嗅探代码，并且没有对其进行维护，浏览器开始被锁定，无法使用包含他们后来实施的功能的网站。这种情况变得如此普遍，以至于浏览器开始在其用户代理字符串中谎称自己是什么浏览器（或声称自己是所有浏览器），以绕过嗅探代码。浏览器还实施了一些设施，允许用户在用 JavaScript 查询时改变浏览器报告的用户代理字符串。这一切使得浏览器嗅探更加容易出错，最终毫无意义。
+### 不要嗅探浏览器
-> **备注：** 你应该阅读 Aaron Andersen 的[浏览器用户代理字符串的历史](https://webaim.org/blog/user-agent-string-history/)，以了解对这种情况的有用和有趣的看法。
+在历史上，开发人员曾使用*浏览器嗅探代码*来检测用户使用的浏览器，并为该浏览器提供适当的代码。
-这里需要吸取的教训是，永远不要使用浏览器嗅探技术。浏览器嗅探代码在现代的唯一真正用处是，如果你在某个特定版本的浏览器中实现一个错误的修复。但即使如此，大多数错误在浏览器供应商的快速发布周期中很快就会被修复。这不会经常出现。[特性检测](#特性检测)几乎总是一个更好的选择——如果你检测一个特性是否被支持，当新的浏览器版本出现时，你不需要改变你的代码，而且测试也更可靠。
+所有浏览器都有一个**用户代理**字符串，它标识了浏览器的身份（版本、名称、操作系统等）。许多开发人员实现的浏览器嗅探代码非常糟糕，而且没有进行维护。这导致支持的浏览器无法访问网站，即使它们可以轻松渲染网页。这种情况变得极其普遍，以至于浏览器开始在其用户代理字符串中隐藏真实身份（或声称它们都是浏览器），以规避嗅探代码。浏览器还实现了允许用户更改 JavaScript 查询得到的用户代理字符串的功能。这些都使浏览器嗅探变得更加容易出错，最终变得毫无意义。
-如果你在加入一个现有的项目时遇到了浏览器嗅探，看看是否可以用更合理的东西来代替它。浏览器嗅探会导致各种有趣的错误，比如 [Firefox bug 1308462](https://bugzil.la/1308462)。
+Aaron Andersen 撰写的[浏览器用户代理字符串的历史](https://webaim.org/blog/user-agent-string-history/)中讲述了这段有用且有趣的浏览器探测历史。使用[特性检测](#特性检测)（以及 CSS @supports 进行 CSS 特性检测）来检测是否支持某个特性要可靠地多。这样，当新的浏览器版本出现时，你就不需要更改代码。
### 处理 JavaScript 前缀
-在上一篇文章中，我们包含了相当多的关于[处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#css_回退行为)的讨论。新的 JavaScript 实现有时也会使用前缀，尽管 JavaScript 使用驼峰命名而不是像 CSS 那样使用连字符。例如，如果一个前缀被用在一个新的 jshint API 对象上，叫做 `Object`：
+在上一篇文章中，我们详细讨论了[处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#处理_css_前缀)的内容。新的 JavaScript 实现有时也会使用前缀，但与 CSS 使用{{Glossary("kebab_case", "连字符")}}不同，JavaScript 采用{{Glossary("camel_case", "驼峰命名")}}。例如，如果一个新的 jshint API 对象名为 `Object`，不同的浏览器厂商会使用以下前缀：
- Mozilla 会使用 `mozObject`
-- Chrome/Opera/Safari 会使用 `webkitObject`
+- Chrome、Opera、Safari 会使用 `webkitObject`
- Microsoft 会使用 `msObject`
-这里有一个例子，取自我们的 [violent-theremin demo](https://mdn.github.io/webaudio-examples/violent-theremin/)（见[源代码](https://github.com/mdn/webaudio-examples/tree/main/violent-theremin)），它使用 [Canvas API](/zh-CN/docs/Web/API/Canvas_API) 和 [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) 的组合来创建一个有趣（和嘈杂）的绘画工具：
+以下是一个例子，来自我们的 [violent-theremin 演示](https://mdn.github.io/webaudio-examples/violent-theremin/)（参见[源代码](https://github.com/mdn/webaudio-examples/tree/main/violent-theremin)），它结合使用了 [Canvas API](/zh-CN/docs/Web/API/Canvas_API) 和 [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API)，创造了一个既有趣（又喧闹）的绘画工具：
```js
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
```
-就 Web Audio API 而言，在 Chrome/Opera 中使用该 API 的关键入口是通过 `webkit` 前缀版本支持的（它们现在支持未前缀版本）。绕过这种情况的简单方法是为某些浏览器中带有前缀的对象创建一个新的版本，并使其等同于非前缀版本，或前缀版本（或需要考虑的任何其他前缀版本）——当前查看网站的浏览器支持哪一个，就使用哪一个。
+关于 Web Audio API，在 Chrome/Opera 中使用该 API 的主要方式是通过带有 `webkit` 前缀的版本（尽管现在它们也支持无前缀版本）。一种简单的方法是为带前缀的对象创建一个新版本，并将其设置为等同于无前缀版本，或者是带有前缀的版本（具体取决于用户当前使用的浏览器支持哪一个）。
-然后我们用这个对象来操作 API，而不是用原来的对象。在这种情况下，我们正在创建一个修改过的 [AudioContext](/zh-CN/docs/Web/API/AudioContext) 构造函数，然后创建一个新的音频上下文实例，用于我们的 Web Audio 编码。
+接下来，我们使用这个新对象来操作 API，而不是原始对象。在这个例子中，我们创建了一个修改版的 [AudioContext](/zh-CN/docs/Web/API/AudioContext) 构造函数，然后用它来创建新的音频上下文实例，用于我们的 Web Audio 编程。
-这种模式可以应用于几乎所有有前缀的 JavaScript 功能。JavaScript 库/polyfill 也使用这种代码，以尽可能地从开发人员那里抽象出浏览器的差异。
+这种模式几乎可以应用于所有带前缀的 JavaScript 特性。JavaScript 库/ployfill 也采用这种代码，以最大程度地屏蔽为开发者屏蔽浏览器之间的细节差异。
-同样，前缀功能本来就不应该在生产型网站中使用——它们会在没有警告的情况下被改变或删除，并导致跨浏览器问题。如果你坚持使用前缀功能，请确保你使用正确的功能。你可以在 MDN 的参考页面和 [caniuse.com](https://caniuse.com/) 等网站上查询哪些浏览器对不同的 JavaScript/API 特性需要前缀。如果你不确定，你也可以通过直接在浏览器中做一些测试来了解。
+同样，前缀特性本不应在生产环境网站中使用——它们可能会在没有任何警告的情况下被更改或删除，从而导致跨浏览器兼容性问题。如果你仍然需要使用带前缀的特性，请确保你使用的是正确的特性。你可以在 MDN 的参考页面和 [caniuse.com](https://caniuse.com/) 等网站上查询哪些浏览器需要对不同的 JavaScript/API 特性使用前缀。如果你不确定，也可以通过在浏览器中进行测试来获取相关信息。
例如，尝试进入你的浏览器的开发者控制台，开始输入
@@ -469,14 +407,14 @@ const audioCtx = new AudioContext();
window.AudioContext;
```
-如果你的浏览器支持这一功能，它将带有自动完成提示。
+如果你的浏览器支持这一特性，它将带有自动完成提示。
## 寻求帮助
-在使用 JavaScript 的过程中，你还会遇到很多其他问题；真正需要了解的是如何在网上找到答案。请参考 HTML 和 CSS 文章的[寻找帮助部分](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#寻找帮助)，了解我们的最佳建议。
+在使用 JavaScript 的过程中，你还会遇到很多其他问题；最重要的是知道如何在网上找到答案。请参考 HTML 和 CSS 文章的[寻找帮助部分](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#寻找帮助)，了解我们的最佳建议。
## 总结
-所以这就是 JavaScript。简单吧？也许没那么简单，但这篇文章至少应该给你一个起点，以及如何解决你将遇到的与 JavaScript 有关的问题的一些想法。
+所以，这就是 JavaScript 的基本情况。听起来简单吗？可能并不完全如此，但希望这篇文章至少为你提供了一个开始的地方，以及一些关于如何解决你可能遇到的 JavaScript 相关问题的思路。
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}
diff --git a/files/zh-cn/mdn/at_ten/index.md b/files/zh-cn/mdn/at_ten/index.md
index 5bc67f93a0a157..1a8020b73c0f3c 100644
--- a/files/zh-cn/mdn/at_ten/index.md
+++ b/files/zh-cn/mdn/at_ten/index.md
@@ -3,6 +3,8 @@ title: Mozilla 开发者网络 10 周年
slug: MDN/At_ten
---
+{{MDNSidebar}}
+
为我们 Web 技术的文档化走过 10 年而庆祝！
## MDN 历史
diff --git a/files/zh-cn/mdn/community/contributing/translated_content/index.md b/files/zh-cn/mdn/community/contributing/translated_content/index.md
index 7fecb83c26a91a..09290ebf60547f 100644
--- a/files/zh-cn/mdn/community/contributing/translated_content/index.md
+++ b/files/zh-cn/mdn/community/contributing/translated_content/index.md
@@ -41,8 +41,8 @@ l10n:
### 韩语（ko）
-- 讨论组：[Discord (#korean channel)](/discord)、[Kakao Talk (#MDN Korea)](https://open.kakao.com/o/gdfG288c)
-- 目前的志愿者：[hochan222](https://github.com/hochan222)、[yechoi42](https://github.com/yechoi42)、[cos18](https://github.com/cos18)、[pje1740](https://github.com/pje1740)、[wisedog](https://github.com/wisedog)、[swimjiy](https://github.com/swimjiy)、[jho2301](https://github.com/jho2301)、[sunhpark42](https://github.com/sunhpark42)、[1ilsang](https://github.com/1ilsang)
+- 讨论组：[Discord (#korean channel)](/discord)、[Google Groups (`yari-content-ko`)](https://groups.google.com/g/yari-content-ko)
+- 目前的志愿者：[hochan222](https://github.com/hochan222)、[yechoi42](https://github.com/yechoi42)、[wisedog](https://github.com/wisedog)、[sunhpark42](https://github.com/sunhpark42)、[1ilsang](https://github.com/1ilsang)
### 俄语（ru）
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/alarm/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/alarm/index.md
new file mode 100644
index 00000000000000..8d3489da57b8a4
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/alarm/index.md
@@ -0,0 +1,29 @@
+---
+title: alarms.Alarm
+slug: Mozilla/Add-ons/WebExtensions/API/alarms/Alarm
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+有关单个闹钟的信息。此对象可以由 {{WebExtAPIRef('alarms.get()')}} 和 {{WebExtAPIRef('alarms.getAll()')}} 返回，也会被传递到 {{WebExtAPIRef('alarms.onAlarm')}} 监听器中。
+
+## 类型
+
+此类型的值是对象，包含以下属性：
+
+- `name`
+ - : `string`。此闹钟的名称。这是传递给创建此闹钟的 {{WebExtAPIRef('alarms.create()')}} 调用的名称。
+- `scheduledTime`
+ - : `double`。闹钟下次计划触发的时间，以[自纪元以来的毫秒数表示](https://zh.wikipedia.org/wiki/UNIX时间)。
+- `periodInMinutes` {{optional_inline}}
+ - : `double`。如果此值不为 `null`，则该闹钟是周期性的，这代表其周期（以分钟为单位）。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) API。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/clearall/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
index 2f936816a51c0a..6ba2567af035bc 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/clearall/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
---
+{{AddonSidebar}}
+
取消所有活跃的闹钟。
这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
new file mode 100644
index 00000000000000..450af3bf31c757
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md
@@ -0,0 +1,58 @@
+---
+title: alarms.onAlarm
+slug: Mozilla/Add-ons/WebExtensions/API/alarms/onAlarm
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当扩展设置的任何闹钟触发时触发。
+
+## 语法
+
+```js-nolint
+browser.alarms.onAlarm.addListener(listener)
+browser.alarms.onAlarm.removeListener(listener)
+browser.alarms.onAlarm.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查是否已为此事件注册了 `listener`。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 在此事件发生时调用的函数。此函数接收以下参数：
+
+ - `alarm`
+ - : {{WebExtAPIRef('alarms.Alarm')}}。触发的闹钟。使用 `Alarm.name` 来确定触发了哪个闹钟。
+
+## 示例
+
+处理闹钟触发事件：
+
+```js
+function handleAlarm(alarmInfo) {
+ console.log(`on alarm: ${alarmInfo.name}`);
+}
+
+browser.alarms.onAlarm.addListener(handleAlarm);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms/) API。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
index 5aef2f64531549..ddebd6d5d440f9 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md
@@ -1,34 +1,39 @@
---
title: bookmarks.BookmarkTreeNode
slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
---
{{AddonSidebar}}
-代表书签树中的一个节点（书签或文件夹），子节点在它们的父文件夹中按顺序排列。
+`bookmarks.BookmarkTreeNode` 类型的对象表示书签树中的一个节点，其中每个节点可以是一个书签、一个书签文件夹或一个分隔符。子节点根据它们在父文件夹中的 `index` 排序。
## 类型
-这种类型的值都是对象。它们包含以下属性：
+一个具有以下属性的 {{jsxref("object")}}：
+- `children` {{optional_inline}}
+ - : 一个{{jsxref("array", "数组", "", 1)}}，包含代表节点子节点的 {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} 对象。列表按照子节点在用户界面中出现的顺序排序。如果节点不是文件夹，则省略此字段。
+- `dateAdded` {{optional_inline}}
+ - : 一个数字，表示节点创建日期，单位为[自 Unix 纪元以来的毫秒数](https://zh.wikipedia.org/wiki/UNIX时间)。
+- `dateGroupModified` {{optional_inline}}
+ - : 一个数字，表示该文件夹的内容上次更改的日期和时间，单位为[自 Unix 纪元以来的毫秒数](https://zh.wikipedia.org/wiki/UNIX时间)。
- `id`
- - : `string`. 节点的唯一标识符。唯一标识符在当前用户配置文件中保证唯一，并且在浏览器重新启动后仍然有效。
-- `parentId`{{optional_inline}}
- - : `string`. 父节点的标识符（id）。根节点没有此属性。
-- `index`{{optional_inline}}
- - : `integer`. 该节点在父文件夹中的位置（从 0 开始）。
-- `url`{{optional_inline}}
- - : `string`. 当用户单击书签时打开的 URL。文件夹没有此属性。
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，唯一标识节点。每个 ID 在用户的配置文件中是唯一的，在浏览器重新启动时保持不变。
+- `index` {{optional_inline}}
+ - : 一个数字，表示该节点在其父文件夹中的从零开始的位置，其中零代表第一个条目。
+ > **备注：** 如果你创建或移动多个书签，由于 {{WebExtAPIRef("bookmarks.create()")}} 和 {{WebExtAPIRef("bookmarks.move()")}} 方法是异步的，请求可能以任何顺序处理。因此，直到所有请求完成之前，每个书签的索引值可能会改变或是未知的。如果与书签相关的索引对你的扩展很重要，那么在创建或移动多个书签时，扩展应等待每个 `bookmarks.create` 或 `bookmarks.move` 调用完成。等待确保与每个书签关联的索引不会受到在原始调用进行时并发执行的创建或移动调用的影响。
+- `parentId` {{optional_inline}}
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，指定父文件夹的 ID。此属性不存在于根节点。
- `title`
- - : `string`. 该节点显示的文字。
-- `dateAdded`{{optional_inline}}
- - : `number`. 该节点创建的时间，表示为自 1970 年 1 月 1 日午夜至今所经过的毫秒数（new Date(dateAdded)）。
-- `dateGroupModified`{{optional_inline}}
- - : `number`. 该文件夹内容的上一次修改时间，表示为自 1970 年 1 月 1 日午夜至今所经过的毫秒数。
-- `unmodifiable`{{optional_inline}}
- - : {{WebExtAPIRef('bookmarks.BookmarkTreeNodeUnmodifiable')}}. 表示该节点不可修改的原因，"_managed_"表示该节点由系统管理员配置。如果该节点可以由用户和扩展程序修改（默认）则省略。
-- `children`{{optional_inline}}
- - : `array` of `{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}}`. 该节点的所有子节点（已排序）。
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，包含在菜单和书签列表中显示的节点文本。
+- `type` {{optional_inline}}
+ - : 一个 {{WebExtAPIRef("bookmarks.BookmarkTreeNodeType")}} 对象，指示这是一个书签、文件夹还是分隔符。默认为 `"bookmark"`，除非省略 `url`，否则，默认为 `"folder"`。
+- `unmodifiable` {{optional_inline}}
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，由 {{WebExtAPIRef('bookmarks.BookmarkTreeNodeUnmodifiable')}} 类型描述。表示节点无法更改的原因。如果节点可以更改，则省略此项。
+- `url` {{optional_inline}}
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，表示书签的 URL。如果节点表示文件夹，则省略此属性。
## 浏览器兼容性
@@ -36,9 +41,7 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode
{{WebExtExamples}}
-> **备注：** This API is based on Chromium's [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#type-BookmarkTreeNode) API. This documentation is derived from [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) in the Chromium code.
->
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#type-BookmarkTreeNode) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
new file mode 100644
index 00000000000000..faa71443c6acb5
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md
@@ -0,0 +1,52 @@
+---
+title: bookmarks.BookmarkTreeNodeUnmodifiable
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeUnmodifiable
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`bookmarks.BookmarkTreeNodeUnmodifiable`** 类型用于指示书签树中的节点（其中每个节点都是书签或书签文件夹）无法被更改的原因。其被用于书签节点上 {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "bookmarks.BookmarkTreeNode.unmodifiable", "unmodifiable")}} 字段的值。
+
+## 类型
+
+`bookmarks.BookmarkTreeNodeUnmodifiable` 是一个{{jsxref("string", "字符串", "", 1)}}，目前只能具有一个值：`"managed"`。这表示书签节点是由管理员或受监督用户的监护人（例如在家长控制的例子里的家长）配置的。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#type-BookmarkTreeNodeUnmodifiable) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
new file mode 100644
index 00000000000000..f8a0a7e7f7ffee
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md
@@ -0,0 +1,63 @@
+---
+title: bookmarks.CreateDetails
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/CreateDetails
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+`CreateDetails` 类型用于在调用 {{WebExtAPIRef("bookmarks.create()")}} 方法时描述新书签、书签文件夹或分隔符的属性。
+
+## 类型
+
+一个{{jsxref("object", "对象", "", 1)}}，包含以下一些或全部字段：
+
+- `index` {{optional_inline}}
+ - : 一个整数 {{jsxref("Number")}}，指定新书签在其父级下的位置。值为 0 将把它放在列表顶部。
+- `parentId` {{optional_inline}}
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，表示要将新书签或书签文件夹放入的父文件夹的 ID。在 Chrome 和 Firefox 上，默认值为书签菜单上的“其他书签”文件夹。
+- `title` {{optional_inline}}
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，指定书签的标题或要创建的文件夹的名称。如果未指定，则标题为 `""`。
+- `type` {{optional_inline}}
+ - : 一个 {{WebExtAPIRef("bookmarks.BookmarkTreeNodeType")}} 对象，指示这是一个书签、文件夹还是分隔符。默认为 `"bookmark"`，除非省略 `url`，否则，默认为 `"folder"`。
+- `url` {{optional_inline}}
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，指定要创建书签的页面的 URL。如果省略或为 `null`，则创建一个文件夹而不是书签。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#type-CreateDetails) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
new file mode 100644
index 00000000000000..44b595b6b8b823
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md
@@ -0,0 +1,88 @@
+---
+title: bookmarks.getChildren()
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getChildren
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`bookmarks.getChildren()`** 方法检索由 {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ID 标识的书签文件夹的所有直接子节点。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let gettingChildren = browser.bookmarks.getChildren(
+ id // string
+)
+```
+
+### 参数
+
+- `id`
+ - : 一个{{jsxref("string", "字符串", "", 1)}}，指定要检索其子节点的文件夹的 ID。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个 [`BookmarkTreeNode`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) 对象数组。每个条目代表一个子节点。列表的顺序与书签在用户界面中出现的顺序相同。结果中包括分隔符。列表包括子文件夹，但不包括子文件夹中的任何子节点。
+
+如果指定的节点没有子节点，则数组为空。
+
+如果找不到由 `id` 标识的节点，则 Promise 会以一条错误消息拒绝。
+
+## 示例
+
+```js
+function onFulfilled(children) {
+ for (child of children) {
+ console.log(child.id);
+ }
+}
+
+function onRejected(error) {
+ console.log(`发生错误：${error}`);
+}
+
+let gettingChildren = browser.bookmarks.getChildren("unfiled_____");
+gettingChildren.then(onFulfilled, onRejected);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-getChildren) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
new file mode 100644
index 00000000000000..8f08d1bf7e4f41
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md
@@ -0,0 +1,85 @@
+---
+title: bookmarks.getRecent()
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getRecent
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+`bookmarks.getRecent()` 方法检索指定数量的最近添加的书签并返回一个 {{WebExtAPIRef('bookmarks.BookmarkTreeNode', 'BookmarkTreeNode')}} 对象数组。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js
+let gettingRecent = browser.bookmarks.getRecent(
+ numberOfItems, // 整型数
+);
+```
+
+### 参数
+
+- `numberOfItems`
+ - : 一个表示要返回的项目的上限的数字。返回的列表将最多包含此数量的最近添加的项目。此处允许的最小值是 1。如果传递 0 或更小的值，函数将抛出错误。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个 [`BookmarkTreeNode`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) 对象数组。
+
+## 示例
+
+此示例记录最近添加的书签的 URL：
+
+```js
+function onFulfilled(bookmarks) {
+ for (const bookmark of bookmarks) {
+ console.log(bookmark.url);
+ }
+}
+
+function onRejected(error) {
+ console.log(`错误：${error}`);
+}
+
+browser.bookmarks.getRecent(1).then(onFulfilled, onRejected);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-getRecent) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
new file mode 100644
index 00000000000000..e64ef191a205c4
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md
@@ -0,0 +1,107 @@
+---
+title: bookmarks.getSubTree()
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getSubTree
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`bookmarks.getSubTree()`** 方法根据给定的 ID 异步检索一个 {{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}。
+
+如果该项目是一个文件夹，你可以使用其 `children` 属性以及其后代（如果它们本身是文件夹）的 `children` 属性递归访问所有后代。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let gettingSubTree = browser.bookmarks.getSubTree(
+ id // 字符串
+)
+```
+
+### 参数
+
+- `id`
+ - : 一个指定要检索的子树根的 ID 的{{jsxref("string", "字符串", "", 1)}}。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个数组，包含一个对象，该对象是表示具有给定 ID 的项目的 {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} 对象。
+
+如果找不到与 `ID` 对应的节点，Promise 将以错误消息被拒绝。
+
+## 示例
+
+此示例递归打印给定节点下的子树：
+
+```js
+function makeIndent(indentLength) {
+ return ".".repeat(indentLength);
+}
+
+function logItems(bookmarkItem, indent) {
+ if (bookmarkItem.url) {
+ console.log(makeIndent(indent) + bookmarkItem.url);
+ } else {
+ console.log(`${makeIndent(indent)}Folder: ${bookmarkItem.id}`);
+ indent++;
+ }
+ if (bookmarkItem.children) {
+ for (const child of bookmarkItem.children) {
+ logItems(child, indent);
+ }
+ }
+}
+
+function logSubTree(bookmarkItems) {
+ logItems(bookmarkItems[0], 0);
+}
+
+function onRejected(error) {
+ console.log(`An error: ${error}`);
+}
+
+let subTreeID = "root_____";
+
+browser.bookmarks.getSubTree(subTreeID).then(logSubTree, onRejected);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-getSubTree) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
index 68ba6d4ec6dfa3..09cda77e4a9c4b 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md
@@ -1,20 +1,22 @@
---
title: bookmarks.getTree()
slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getTree
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
---
{{AddonSidebar}}
-**`bookmarks.getTree()`** 返回一个数组，该数组每一项为{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}对象，作为书签树的根节点。
+**`bookmarks.getTree()`** 返回一个数组，其中包含书签树的根节点，该节点是一个 {{WebExtAPIRef("bookmarks.BookmarkTreeNode")}} 对象。
如果它们是文件夹的话，你可以通过其 `children` 属性及其后代的 `children` 属性递归地访问整个树。
-这是一个异步的函数，返回 `Promise`。
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
-## 使用格式
+## 语法
-```js
-var gettingTree = browser.bookmarks.getTree();
+```js-nolint
+let gettingTree = browser.bookmarks.getTree()
```
### 参数
@@ -23,11 +25,7 @@ var gettingTree = browser.bookmarks.getTree();
### 返回值
-`Promise` 对象，该对象未来会得到一个填充代表根节点的 `bookmarks.BookmarkTreeNode` 对象的数组。
-
-## 浏览器兼容性
-
-{{Compat}}
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含代表根节点的 [`bookmarks.BookmarkTreeNode`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) 对象的数组。
## 示例
@@ -42,11 +40,11 @@ function logItems(bookmarkItem, indent) {
if (bookmarkItem.url) {
console.log(makeIndent(indent) + bookmarkItem.url);
} else {
- console.log(makeIndent(indent) + "Folder");
+ console.log(`${makeIndent(indent)}Folder`);
indent++;
}
if (bookmarkItem.children) {
- for (child of bookmarkItem.children) {
+ for (const child of bookmarkItem.children) {
logItems(child, indent);
}
}
@@ -61,15 +59,17 @@ function onRejected(error) {
console.log(`An error: ${error}`);
}
-var gettingTree = browser.bookmarks.getTree();
+let gettingTree = browser.bookmarks.getTree();
gettingTree.then(logTree, onRejected);
```
{{WebExtExamples}}
-> **备注：** This API is based on Chromium's [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-getTree) API. This documentation is derived from [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) in the Chromium code.
->
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-getTree) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/move/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
new file mode 100644
index 00000000000000..5fdf61b5af787a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/move/index.md
@@ -0,0 +1,101 @@
+---
+title: bookmarks.move()
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/move
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`bookmarks.move()`** 方法将指定的 {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} 移动到书签树中的指定目的地。这允许你将书签移动到新文件夹或文件夹内的位置。
+
+> **警告：** 如果你的扩展尝试将书签移动到书签树根节点，则调用将引发错误，并显示消息：“_The bookmark root cannot be modified_”，移动操作将不会完成。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let movingBookmark = browser.bookmarks.move(
+ id, // 字符串
+ destination // 对象
+)
+```
+
+### 参数
+
+- `id`
+ - : 包含要移动的书签或文件夹的 ID 的{{jsxref("string", "字符串", "", 1)}}。
+- `destination`
+
+ - : 一个指定书签目标位置的{{jsxref("object", "对象", "", 1)}}。此对象必须包含以下一个或两个字段：
+
+ - `parentId` {{optional_inline}}
+ - : 指定目标文件夹的 ID 的{{jsxref("string", "字符串", "", 1)}}。如果省略此值，则书签将移动到其当前文件夹内的新位置。
+ - `index` {{optional_inline}}
+ - : 指定要将书签移动到的文件夹内的位置的从 0 开始的索引。值为 0 则将书签移动到文件夹的顶部。如果省略此值，则书签将放置在新的父文件夹的末尾。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个描述移动后的节点的 [`bookmarks.BookmarkTreeNode`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) 对象。
+
+如果与 `id` 参数对应的节点无法找到，则该 Promise 将以错误消息拒绝。
+
+> **备注：** 如果移动多个书签，由于此 API 是异步的，移动调用可能以任何顺序处理。因此，每个书签的索引值在 {{WebExtAPIRef('bookmarks.BookmarkTreeNode', 'BookmarkTreeNode')}} 中返回之前可能会改变或是未知的。如果书签的索引与你的扩展相关，则在移动下一个书签之前，扩展应该等待每个 `bookmarks.move` 调用完成。等待确保每个书签关联的索引不会受到在原始调用进行时并发执行移动调用的影响。
+
+## 示例
+
+此示例将一个书签移动到其当前文件夹中的第一个位置。
+
+```js
+function onMoved(bookmarkItem) {
+ console.log(bookmarkItem.index);
+}
+
+function onRejected(error) {
+ console.log(`出现错误：${error}`);
+}
+
+let bookmarkId = "abcdefghijkl";
+
+let movingBookmark = browser.bookmarks.move(bookmarkId, { index: 0 });
+movingBookmark.then(onMoved, onRejected);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-move) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
new file mode 100644
index 00000000000000..87d35ae7f98070
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md
@@ -0,0 +1,99 @@
+---
+title: bookmarks.onChanged
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onChanged
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+触发条件：
+
+- 书签的标题或 URL 发生更改时
+- 文件夹的名称发生更改时
+
+## 语法
+
+```js-nolint
+browser.bookmarks.onChanged.addListener(listener)
+browser.bookmarks.onChanged.removeListener(listener)
+browser.bookmarks.onChanged.hasListener(listener)
+```
+
+事件包含以下三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到该事件。
+- `removeListener(listener)`
+ - : 停止监听该事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到该事件。如果正在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 事件发生时调用的函数。该函数接收以下参数：
+
+ - `id`
+ - : `string`。发生更改的项目的 ID。
+ - `hangeInfo`
+ - : [`object`](#changeinfo)。包含两个属性的对象：包含项目标题的字符串 `title` 和包含项目 URL 的字符串 `url`。如果项目是文件夹，则省略 `url`。
+
+> **备注：** 当书签更改时，可能会发生多个事件，且 changeInfo 对象可能只包含已更改的数据，而不是书签的所有数据。换句话说，如果书签的 `url` 发生变化，则 changeInfo 可能只包含新的 `url` 信息。
+
+## 示例
+
+```js
+function handleChanged(id, changeInfo) {
+ console.log(`项目：${id} 已更改`);
+ console.log(`标题：${changeInfo.title}`);
+ console.log(`URL: ${changeInfo.url}`);
+}
+
+function handleClick() {
+ browser.bookmarks.onChanged.addListener(handleChanged);
+}
+
+browser.browserAction.onClicked.addListener(handleClick);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#event-onChanged) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
new file mode 100644
index 00000000000000..70830733266f9d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md
@@ -0,0 +1,100 @@
+---
+title: bookmarks.onChildrenReordered
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onChildrenReordered
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当文件夹中的子项由于在 UI 中排序而更改其顺序时触发。这不会由于调用 {{WebExtAPIRef("bookmarks.move()")}} 或在 UI 中进行拖动操作而触发。
+
+## 语法
+
+```js-nolint
+browser.bookmarks.onChildrenReordered.addListener(listener)
+browser.bookmarks.onChildrenReordered.removeListener(listener)
+browser.bookmarks.onChildrenReordered.hasListener(listener)
+```
+
+事件包含以下三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到该事件。
+- `removeListener(listener)`
+ - : 停止监听该事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到该事件。如果正在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 事件触发时调用的函数。该函数接收以下参数：
+
+ - `id`
+ - : `string`。子项重新排序的文件夹的 ID。
+ - `reorderInfo`
+ - : `object`。包含附加对象的对象。详见 [reorderInfo](#reorderinfo_2) 部分。
+
+## 附加对象
+
+### reorderInfo
+
+- `childIds`
+ - : `string` 数组。包含此文件夹中所有书签项的 ID 数组，按照它们现在在 UI 中显示的顺序排列。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+function handleChildrenReordered(id, reorderInfo) {
+ console.log(`项目：${id} 子项已重新排序`);
+ console.log(`子项：${reorderInfo.childIds}`);
+}
+
+function handleClick() {
+ browser.bookmarks.onChildrenReordered.addListener(handleChildrenReordered);
+}
+
+browser.browserAction.onClicked.addListener(handleClick);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#event-onChildrenReordered) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
new file mode 100644
index 00000000000000..c85204990acf68
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md
@@ -0,0 +1,93 @@
+---
+title: bookmarks.onImportEnded
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onImportEnded
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当浏览器完成导入一组书签时触发。
+
+参见 {{WebExtAPIRef("bookmarks.onImportBegan")}}。
+
+## 语法
+
+```js
+browser.bookmarks.onImportEnded.addListener(listener);
+browser.bookmarks.onImportEnded.removeListener(listener);
+browser.bookmarks.onImportEnded.hasListener(listener);
+```
+
+事件包含以下三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到该事件。
+- `removeListener(listener)`
+ - : 停止监听该事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到该事件。如果正在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+ - : 事件触发时调用的函数。它不接收任何参数。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+function handleImportBegan() {
+ console.log("导入中…");
+}
+
+function handleImportEnded() {
+ console.log("导入完成。");
+}
+
+function handleClick() {
+ browser.bookmarks.onImportBegan.addListener(handleImportBegan);
+ browser.bookmarks.onImportEnded.addListener(handleImportEnded);
+}
+
+browser.browserAction.onClicked.addListener(handleClick);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#event-onImportEnded) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
new file mode 100644
index 00000000000000..083eca893bef33
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md
@@ -0,0 +1,111 @@
+---
+title: bookmarks.onMoved
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onMoved
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当书签或文件夹被移动到不同的父文件夹或在文件夹内的位置时触发。
+
+> **备注：** 如果你正在移动多个书签，由于此 API 是异步的，移动调用可能会以任何顺序处理。因此，每个书签的索引值可能会改变或在所有移动调用完成之前是未知的。如果书签的索引对你的扩展程序很重要，那么在移动多个书签时，扩展程序应等待每个 `bookmarks.move` 调用完成后再移动下一个书签。等待可以确保每个书签关联的索引不受正在执行的移动调用影响。
+
+## 语法
+
+```js
+browser.bookmarks.onMoved.addListener(listener);
+browser.bookmarks.onMoved.removeListener(listener);
+browser.bookmarks.onMoved.hasListener(listener);
+```
+
+事件包含以下三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到该事件。
+- `removeListener(listener)`
+ - : 停止监听该事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到该事件。如果正在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 事件触发时调用的函数。该函数接收以下参数：
+
+ - `id`
+ - : `string`。被移动项目的 ID。
+ - `moveInfo`
+ - : `object`。包含有关移动更多详细信息的对象。详见 [moveInfo](#moveinfo_2) 部分。
+
+## 附加对象
+
+### moveInfo
+
+- `parentId`
+ - : `string`。新的父文件夹。
+- `index`
+ - : `integer`。此项目在其父项中的新索引。
+- `oldParentId`
+ - : `string`。旧的父文件夹。
+- `oldIndex`
+ - : `integer`。此项目在其父项中的旧索引。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+function handleMoved(id, moveInfo) {
+ console.log(`项目：${id} 已移动`);
+ console.log(`旧索引：${moveInfo.oldIndex}`);
+ console.log(`新索引：${moveInfo.index}`);
+ console.log(`旧文件夹：${moveInfo.oldParentId}`);
+ console.log(`新文件夹：${moveInfo.parentId}`);
+}
+
+function handleClick() {
+ browser.bookmarks.onMoved.addListener(handleMoved);
+}
+
+browser.browserAction.onClicked.addListener(handleClick);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#event-onMoved) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
index bb3de848e8b72d..e457e9f08cbf11 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md
@@ -1,6 +1,8 @@
---
title: bookmarks.remove()
slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/remove
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
---
{{AddonSidebar}}
@@ -9,11 +11,11 @@ slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/remove
> **警告：** 如果你的扩展尝试从书签树的根节点中移除一个书签，该调用将会引发一个“书签根不能被修改的”的错误信息并且这个书签不会被移除。
-这是一个异步方法，返回 `Promise` 对象。
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
## 语法
-```js
+```js-nolint
var removingBookmark = browser.bookmarks.remove(
id, // 字符串
);
@@ -22,40 +24,38 @@ var removingBookmark = browser.bookmarks.remove(
### 参数
- `id`
- - : {{jsxref("string")}} 要删除的书签或空书签文件夹的 id 标识
+ - : 一个指定要移除的书签或空文件夹的 ID 的{{jsxref("string", "字符串", "", 1)}}。
### 返回值
-若方法执行完成，返回一个无参的 `Promise` 对象。
-
-若未找到该书签或该空书签文件夹，将返回一个带有错误信息的 `Promise` 对象。
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其不会兑现任何参数。
-## 浏览器兼容性
-
-{{Compat}}
+如果与 `id` 参数对应的节点找不到或者是一个非空文件夹，则该 Promise 会以错误消息拒绝。
## 示例
```js
function onRemoved() {
- console.log("Removed!");
+ console.log("已移除！");
}
function onRejected(error) {
- console.log(`An error: ${error}`);
+ console.log(`出现错误：${error}`);
}
-var bookmarkId = "abcdefghijkl";
+let bookmarkId = "abcdefghijkl";
-var removingBookmark = browser.bookmarks.remove(bookmarkId);
+let removingBookmark = browser.bookmarks.remove(bookmarkId);
removingBookmark.then(onRemoved, onRejected);
```
{{WebExtExamples}}
-> **备注：** This API is based on Chromium's [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks#method-remove) API. This documentation is derived from [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) in the Chromium code.
->
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-remove) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
new file mode 100644
index 00000000000000..5a55f9fcd38d8b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md
@@ -0,0 +1,95 @@
+---
+title: bookmarks.removeTree()
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/removeTree
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`bookmarks.removeTree()`** 方法递归删除一个书签文件夹及其所有内容。
+
+> **警告：** 如果你的扩展尝试从书签树根节点中删除书签树，则调用将引发错误，并显示消息：“The bookmark root cannot be modified”，并且书签将不会被删除。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removingTree = browser.bookmarks.removeTree(
+ id // 字符串
+)
+```
+
+### 参数
+
+- `id`
+ - : {{jsxref("string", "字符串", "", 1)}}，指定要删除的文件夹（以及其后代节点）的 ID。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当树被删除时其会兑现，且不带任何参数。
+
+如果无法找到与 `id` 参数对应的节点，则该 Promise 将以错误消息拒绝。
+
+## 示例
+
+此示例查找名为“MDN”的书签文件夹，并删除它以及其中的所有内容。
+
+```js
+function onRemoved() {
+ console.log("书签项已删除！");
+}
+
+function onRejected(error) {
+ console.log(`出现错误：${error}`);
+}
+
+function removeMDN(searchResults) {
+ if (searchResults.length) {
+ let removing = browser.bookmarks.removeTree(searchResults[0].id);
+ removing.then(onRemoved, onRejected);
+ }
+}
+
+let searchingBookmarks = browser.bookmarks.search({ title: "MDN" });
+searchingBookmarks.then(removeMDN, onRejected);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-removeTree) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/search/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
new file mode 100644
index 00000000000000..93170d1dfdaec3
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/search/index.md
@@ -0,0 +1,130 @@
+---
+title: bookmarks.search()
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/search
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`bookmarks.search()`** 函数用于搜索与给定查询匹配的书签树节点。
+
+如果任何输入参数无效或不是适当的类型，则此函数会引发异常；请查看[控制台](https://extensionworkshop.com/documentation/develop/debugging/)获取错误消息。异常没有错误 ID，并且消息本身可能会更改，因此不要编写试图解释它们的代码。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let searching = browser.bookmarks.search(
+ query // string 或 object
+)
+```
+
+### 参数
+
+- `query`
+
+ - : 描述要执行的查询的 {{jsxref("string")}} 或 {{jsxref("object")}}。
+
+ 如果 `query` 是一个**字符串**，它由零个或多个以空格分隔的搜索项组成。如果搜索项是书签的 URL 或标题的子字符串，则匹配。匹配不区分大小写。要使书签与查询匹配，必须匹配查询的所有搜索条件。
+
+ 如果 `query` 是一个**对象**，它由三个属性中的零个或多个组成：`query`、`title` 和 `url`，描述如下。要使书签与查询匹配，必须匹配所有属性的项。
+
+ - query {{optional_inline}}
+
+ - : 一个 {{jsxref("string")}}，指定要与之匹配的一个或多个项；其格式与 `query` 参数的字符串形式相同。如果这不是一个字符串，则会引发异常。
+
+ - `url` {{optional_inline}}
+
+ - : 一个 {{jsxref("string")}}，必须与书签的 URL 完全匹配。匹配不区分大小写，尾部斜杠会被忽略。
+
+ 如果传递了无效的 URL，则函数会引发异常。
+
+ - `title` {{optional_inline}}
+
+ - : 一个 {{jsxref("string")}}，必须与书签树节点的标题完全匹配。匹配区分大小写。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现 {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} 对象数组，每个对象代表一个匹配的书签树节点。结果按节点创建的顺序返回。如果未找到结果，则数组为空。
+
+即使是 `"folder"` 类型的节点，由 `bookmarks.search()` 返回的 [`BookmarkTreeNodes`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) 缺少 `children` 属性。要获取完整的 `BookmarkTreeNode`，请使用 [`bookmarks.getSubTree()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/getSubTree)。
+
+## 示例
+
+这个示例记录所有书签的 ID：
+
+```js
+function onFulfilled(bookmarkItems) {
+ for (const item of bookmarkItems) {
+ console.log(item.id);
+ }
+}
+
+function onRejected(error) {
+ console.log(`出现错误：${error}`);
+}
+
+browser.bookmarks.search({}).then(onFulfilled, onRejected);
+```
+
+这个示例查看当前活动选项卡是否已收藏：
+
+```js
+function onFulfilled(bookmarkItems) {
+ if (bookmarkItems.length) {
+ console.log("活动选项卡已收藏");
+ } else {
+ console.log("活动选项卡未收藏");
+ }
+}
+
+function onRejected(error) {
+ console.log(`出现错误：${error}`);
+}
+
+function checkActiveTab(tab) {
+ browser.bookmarks.search({ url: tab.url }).then(onFulfilled, onRejected);
+}
+
+browser.browserAction.onClicked.addListener(checkActiveTab);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-search) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/update/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
new file mode 100644
index 00000000000000..e64a8deddd9508
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/bookmarks/update/index.md
@@ -0,0 +1,109 @@
+---
+title: bookmarks.update()
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/update
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`bookmarks.update()`** 方法更新书签的标题和 URL，或者更新书签文件夹的名称。
+
+> **警告：** 如果你的扩展尝试更新书签树根节点中的书签，则调用将引发错误，并显示消息：“The bookmark root cannot be modified”，并且书签将不会被更新。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let updating = browser.bookmarks.update(
+ id, // 字符串
+ changes // 对象
+)
+```
+
+### 参数
+
+- `id`
+
+ - : {{jsxref("string", "字符串", "", 1)}}，指定要更新的书签或书签文件夹的 ID。
+
+- `changes`
+
+ - : {{jsxref("object", "对象", "", 1)}}，指定要应用的更改，其中包含以下某些字段的组合。未指定的任何项目在引用的书签或文件夹中不会被更改：
+
+ - `title` {{optional_inline}}
+ - : {{jsxref("string", "字符串", "", 1)}}，包含书签的新标题；或者，如果 `id` 引用文件夹，则包含文件夹的新名称。
+ - `url` {{optional_inline}}
+ - : {{jsxref("string", "字符串", "", 1)}}，提供书签的新 URL。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现已更新的书签的单个 [`bookmarks.BookmarkTreeNode`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) 对象。如果无法找到与 `id` 参数对应的书签项，则该 Promise 将被拒绝。
+
+## 示例
+
+此示例将所有名为“MDN”的文件夹重命名为“Mozilla 开发者网络（MDN）”。
+
+```js
+function onFulfilled(bookmarkItem) {
+ console.log(bookmarkItem.title);
+}
+
+function onRejected(error) {
+ console.error(`出现错误：${error}`);
+}
+
+function updateFolders(items) {
+ for (const item of items) {
+ // 仅限文件夹，所以跳过具有 `url` 的项目
+ if (!item.url) {
+ browser.bookmarks
+ .update(item.id, {
+ title: "Mozilla 开发者网络（MDN）",
+ })
+ .then(onFulfilled, onRejected);
+ }
+ }
+}
+
+browser.bookmarks.search({ title: "MDN" }).then(updateFolders, onRejected);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/bookmarks/#method-update) API。该文档衍生自 Chromium 代码中的 [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
new file mode 100644
index 00000000000000..e88d799d25a568
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md
@@ -0,0 +1,57 @@
+---
+title: browserAction.ColorArray
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/ColorArray
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+## 类型
+
+一个包含四个整数（范围为 0-255）的 `array`，定义了一个 RGBA 颜色。这四个值分别指定以下通道：
+
+1. 红色
+2. 绿色
+3. 蓝色
+4. Alpha（不透明度）
+
+例如，不透明的红色表示为 `[255, 0, 0, 255]`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setTitle) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/disable/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
new file mode 100644
index 00000000000000..fd070f8aa2ba34
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/disable/index.md
@@ -0,0 +1,83 @@
+---
+title: browserAction.disable()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/disable
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+禁用选项卡中的浏览器操作，这意味着当该选项卡处于活动状态时，它无法被点击。
+
+## 语法
+
+```js-nolint
+browser.browserAction.disable(
+ tabId // 可选整数
+)
+```
+
+### 参数
+
+- tabId {{optional_inline}}
+ - : `integer`。你想要禁用浏览器操作的选项卡的 ID。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+点击时禁用浏览器操作，并在每次打开新选项卡时重新启用它：
+
+```js
+browser.tabs.onCreated.addListener(() => {
+ browser.browserAction.enable();
+});
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.browserAction.disable();
+});
+```
+
+仅为活动选项卡禁用浏览器操作：
+
+```js
+browser.browserAction.onClicked.addListener((tab) => {
+ browser.browserAction.disable(tab.id);
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-disable) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/enable/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/enable/index.md
new file mode 100644
index 00000000000000..ec001399b87ca4
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/enable/index.md
@@ -0,0 +1,75 @@
+---
+title: browserAction.enable()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/enable
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+为选项卡启用浏览器操作。默认情况下，浏览器操作在所有选项卡中都是启用的。
+
+## 语法
+
+```js-nolint
+browser.browserAction.enable(
+ tabId // 可选整数
+)
+```
+
+### 参数
+
+- `tabId` {{optional_inline}}
+ - : `integer`。你想要启用浏览器操作的选项卡的 ID。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+点击时禁用浏览器操作，并在每次打开新选项卡时重新启用它：
+
+```js
+browser.tabs.onCreated.addListener(() => {
+ browser.browserAction.enable();
+});
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.browserAction.disable();
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-enable) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/getbadgetextcolor/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/getbadgetextcolor/index.md
new file mode 100644
index 00000000000000..f12b450bcce5d0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/getbadgetextcolor/index.md
@@ -0,0 +1,98 @@
+---
+title: browserAction.getBadgeTextColor()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/getBadgeTextColor
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+获取浏览器操作徽章的文本颜色。
+
+从 Firefox 63 版本开始，除非使用 {{WebExtAPIRef("browserAction.setBadgeTextColor()")}} 显式设置了徽章文本颜色，否则徽章文本颜色将自动设置为黑色或白色，以使其与指定的徽章背景颜色形成最大对比度。例如，如果你将徽章背景颜色设置为白色，则默认的徽章文本颜色将设置为黑色，反之亦然。
+
+其他浏览器始终使用白色文本颜色。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+browser.browserAction.getBadgeTextColor(
+ details // 对象
+)
+```
+
+### 参数
+
+- details
+
+ - : `object`。
+
+ - `tabId` {{optional_inline}}
+ - : `integer`。指定从中获取徽章文本颜色的标签页。
+ - `windowId` {{optional_inline}}
+ - : `integer`。指定从中获取徽章文本颜色的窗口。
+
+<!---->
+
+- 如果同时提供了 `windowId` 和 `tabId`，则函数失败。
+- 如果 `windowId` 和 `tabId` 都省略，则返回全局徽章文本颜色。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现包含检索到的颜色的 {{WebExtAPIRef('browserAction.ColorArray')}}。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+记录徽章的文本颜色：
+
+```js
+function onGot(color) {
+ console.log(color);
+}
+
+function onFailure(error) {
+ console.log(error);
+}
+
+browser.browserAction.getBadgeTextColor({}).then(onGot, onFailure);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-getBadgeBackgroundColor) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/getusersettings/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/getusersettings/index.md
new file mode 100644
index 00000000000000..398792cf1c706c
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/getusersettings/index.md
@@ -0,0 +1,56 @@
+---
+title: browserAction.getUserSettings()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/getUserSettings
+l10n:
+ sourceCommit: 05808d3600f3a5b856eaaf89359f1fdc3d255c26
+---
+
+{{AddonSidebar}}
+
+获取用户为浏览器操作指定的设置。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let userSettings = await browser.browserAction.getUserSettings();
+```
+
+### 参数
+
+此函数不接受任何参数。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含了用户为浏览器操作指定的设置的对象，具有以下属性：
+
+- `userSettings`
+
+ - : 包含用户为浏览器操作指定的设置的对象，具有以下属性：
+
+ - `isOnToolbar` {{optional_inline}}
+ - : `boolean` 值。用户是否将操作的图标固定到浏览器 UI。这一设置不表示图标是否可见。图标的可见性取决于浏览器窗口的大小和浏览器 UI 的布局。
+
+## 示例
+
+此代码记录一条消息，指示浏览器操作是否被固定：
+
+```js
+function gotSettings(userSettings) {
+ if (userSettings.isOnToolbar) {
+ console.log("浏览器操作已固定到工具栏。");
+ } else {
+ console.log("浏览器操作未固定到工具栏。");
+ }
+}
+
+let gettingUserSettings = browser.browserAction.getUserSettings();
+gettingUserSettings.then(gotSettings);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md
new file mode 100644
index 00000000000000..7b542eac814a55
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md
@@ -0,0 +1,52 @@
+---
+title: browserAction.ImageDataType
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/ImageDataType
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+图像的像素数据。必须是一个 [`ImageData`](/zh-CN/docs/Web/API/ImageData) 对象（例如，来自 {{htmlelement("canvas")}} 元素）。
+
+## 类型
+
+一个 [`ImageData`](/zh-CN/docs/Web/API/ImageData) 对象。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#type-ImageDataType) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/index.md
index 3670310584a0df..2fd431c7b908eb 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/index.md
@@ -1,24 +1,28 @@
---
title: browserAction
slug: Mozilla/Add-ons/WebExtensions/API/browserAction
+l10n:
+ sourceCommit: 05808d3600f3a5b856eaaf89359f1fdc3d255c26
---
{{AddonSidebar}}
添加按钮到浏览器的工具栏。
-你可以为该按钮指派一个弹出窗。弹出窗可采用 HTML、CSS 和 JavaScript 编写，就像是一个普通的网页。运行在该弹出窗中的 JavaScript 可以同你的后台脚本一样访问所有的 WebExtension API，但它的全局上下文是该弹出窗，而不是浏览器中的当前页面。要影响网页，你需要通过[消息](/zh-CN/Add-ons/WebExtensions/Modify_a_web_page#Messaging)通信。
+[浏览器操作](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button)是浏览器工具栏中的一个按钮。
+
+你可以为该按钮指派一个弹出窗。弹出窗可采用 HTML、CSS 和 JavaScript 编写，就像是一个普通的网页。运行在该弹出窗中的 JavaScript 可以同你的后台脚本一样访问所有的 WebExtension API，但它的全局上下文是该弹出窗，而不是浏览器中的当前页面。要影响网页，你需要通过[消息](/zh-CN/Add-ons/WebExtensions/Modify_a_web_page#消息)通信。
如果你指定了弹出窗，它将显示——内容将在用户点击该图标时被加载。如果你没有指定一个弹出窗，用户单击该图标的事件将派发到你的扩展。
-你可以用 manifest.json 中的 [`browser_action`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) 键值声明定义大多数浏览器动作属性。
+该按钮还具有上下文菜单，你可以使用 {{WebExtAPIRef("menus")}} API 通过 `browser_action` {{WebExtAPIRef("menus.ContextType")}} 向此菜单添加项目。
+
+你可以使用 manifest.json 中的 [`browser_action`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) 键以声明方式定义大多数浏览器操作的属性。
使用 `browserAction` API，你可以：
- 使用 {{WebExtAPIRef("browserAction.onClicked")}} 监听该图标的点击事件。
-- 获取和设置该图标的属性——图标、标题、弹出窗等。You can get and set these globally across all tabs, or for a specific tab by passing the tab ID as an additional argument.
-
-另见[用户界面组件](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/User_interface_components)中的浏览器动作章节。
+- 获取和设置该图标的属性——图标、标题、弹出窗等。你可以在所有标签页上全局获取和设置这些属性，或者通过将标签页 ID 作为额外参数传递来针对特定标签页进行操作。
## 类型
@@ -39,6 +43,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/browserAction
- : 设置 HTML 文档作为浏览器动作图标被用户点击时显示的弹出窗。
- {{WebExtAPIRef("browserAction.getPopup()")}}
- : 获取作为浏览器动作的弹出窗的 HTML 文档。
+- {{WebExtAPIRef("browserAction.openPopup()")}}
+ - : 打开浏览器操作的弹出窗口。
- {{WebExtAPIRef("browserAction.setBadgeText()")}}
- : 设置浏览器动作的徽章文本。该徽章显示在图标上方。
- {{WebExtAPIRef("browserAction.getBadgeText()")}}
@@ -47,10 +53,18 @@ slug: Mozilla/Add-ons/WebExtensions/API/browserAction
- : 设置徽章的后台颜色。
- {{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}
- : 获取徽章的后台颜色。
+- {{WebExtAPIRef("browserAction.setBadgeTextColor()")}}
+ - : 设置徽章的文本颜色。
+- {{WebExtAPIRef("browserAction.getBadgeTextColor()")}}
+ - : 获取徽章的文本颜色。
+- {{WebExtAPIRef("browserAction.getUserSettings()")}}
+ - : 获取浏览器操作的用户指定设置。
- {{WebExtAPIRef("browserAction.enable()")}}
- : 为一个标签页启用浏览器动作。默认情况下，浏览器动作为所有标签页启用。
- {{WebExtAPIRef("browserAction.disable()")}}
- : 为一个标签页禁用浏览器动作，使该标签页为活动时无法单击它。
+- {{WebExtAPIRef("browserAction.isEnabled()")}}
+ - : 检查浏览器操作是否已启用。
## 事件
@@ -61,15 +75,9 @@ slug: Mozilla/Add-ons/WebExtensions/API/browserAction
{{Compat}}
-> **备注：** "Chrome 兼容性"是从 [https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities](/zh-CN/Add-ons/WebExtensions/Chrome_incompatibilities) 包含，使用[WebExtChromeCompat](/zh-CN/docs/Template:WebExtChromeCompat)宏。
->
-> 如果你需要更新此章节，编辑 [https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities](/zh-CN/Add-ons/WebExtensions/Chrome_incompatibilities)，然后刷新查看更改。
-
{{WebExtExamples("h2")}}
-> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/extensions/browserAction) API。此文档派生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
->
-> Microsoft Edge 兼容性数据由微软公司提供，并以 知识共享 署名 3.0 美国版 许可。
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/isenabled/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/isenabled/index.md
new file mode 100644
index 00000000000000..16406a0057d78f
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/isenabled/index.md
@@ -0,0 +1,71 @@
+---
+title: browserAction.isEnabled()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/isEnabled
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+如果浏览器操作是启用的，则返回 `true`。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let gettingIsEnabled = browser.browserAction.isEnabled(
+ details // object
+)
+```
+
+### 参数
+
+- `details`
+
+ - : `object`。一个可选包含 `tabId` 或 `windowId` 以供检查的对象。
+
+ - `tabId` {{optional_inline}}
+ - : `integer`。要检查的标签页的 ID。
+ - `windowId` {{optional_inline}}
+ - : `integer`。要检查的窗口的 ID。
+
+<!---->
+
+- 如果同时提供 `windowId` 和 `tabId`，则函数失败。
+- 如果 `windowId` 和 `tabId` 都被省略，则返回全局启用/禁用状态。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，取决于扩展的浏览器操作是否启用，其会兑现 `true` 或 `false`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+检查全局状态：
+
+```js
+browser.browserAction.isEnabled({}).then((result) => {
+ console.log(result);
+});
+```
+
+检查当前活动标签页的状态：
+
+```js
+async function enabledInActiveTab() {
+ let tabs = await browser.tabs.query({
+ currentWindow: true,
+ active: true,
+ });
+ let enabled = await browser.browserAction.isEnabled({
+ tabId: tabs[0].id,
+ });
+ console.log(enabled);
+}
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
new file mode 100644
index 00000000000000..cd8fe7a33f2f48
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md
@@ -0,0 +1,101 @@
+---
+title: browserAction.onClicked
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/onClicked
+l10n:
+ sourceCommit: 5e1ef83ea9bd743f814258096abb05bdeb9c5ccf
+---
+
+{{AddonSidebar}}
+
+在浏览器操作图标被点击时触发的事件。如果浏览器操作有弹出窗口，该事件将不会触发。
+
+要定义右键单击操作，请使用 [`contextMenus`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/menus) API 和“browser_action”[上下文类型](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/menus/ContextType)。
+
+## 语法
+
+```js-nolint
+browser.browserAction.onClicked.addListener(listener)
+browser.browserAction.onClicked.removeListener(listener)
+browser.browserAction.onClicked.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 为此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。listener 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查此事件是否注册了该 `listener`。如果在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 事件发生时调用的函数。该函数传递以下参数：
+
+ - `tab`
+
+ - : {{WebExtAPIRef('tabs.Tab')}}。图标被点击时活动的标签页。
+
+ - `OnClickData`
+
+ - : 一个包含点击信息的对象。
+
+ - `modifiers`
+ - : 一个 `array`。点击时活动的键盘修饰符，可以是 `Shift`、`Alt`、`Command`、`Ctrl` 或 `MacCtrl` 中的一个或多个。
+ - `button`
+ - : 一个 `integer`。表示用于点击页面操作图标的按钮：`0` 表示左键点击或与鼠标无关的点击（例如来自键盘的点击），`1` 表示中键或滚轮点击。注意，不支持右键点击，因为 Firefox 会在触发此事件前显示上下文菜单。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+当用户点击浏览器操作图标时，为当前的活动标签页禁用浏览器操作，并记录标签页的 URL：
+
+```js
+browser.browserAction.onClicked.addListener((tab) => {
+ // 禁用此标签页的浏览器操作
+ browser.browserAction.disable(tab.id);
+ // 需要“tabs”或“activeTab”权限，或 URL 的主机权限
+ console.log(tab.url);
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#event-onClicked) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/openpopup/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/openpopup/index.md
new file mode 100644
index 00000000000000..88bac0946b7b49
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/openpopup/index.md
@@ -0,0 +1,55 @@
+---
+title: browserAction.openPopup()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/openPopup
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+打开浏览操作的弹出窗口。
+
+在稳定版本的 Firefox 中，你只能在[用户操作](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/User_actions)的处理器内调用此函数。有关详细信息，请参见[浏览器兼容性](#浏览器兼容性)。
+
+## 语法
+
+```js-nolint
+browser.browserAction.openPopup(
+ options // 可选对象
+)
+```
+
+### 参数
+
+- `details` {{optional_inline}}
+
+ - : 一个包含以下属性的对象：
+
+ - `windowId` {{optional_inline}}
+ - : `integer`。要为其打开弹出窗口的窗口。默认为当前窗口。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，兑现时不带任何参数。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+当用户选择上下文菜单项时，打开弹出窗口：
+
+```js
+browser.menus.create({
+ id: "open-popup",
+ title: "open popup",
+ contexts: ["all"],
+});
+
+browser.menus.onClicked.addListener(() => {
+ browser.browserAction.openPopup();
+});
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md
new file mode 100644
index 00000000000000..cab87c7a6a1f21
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md
@@ -0,0 +1,116 @@
+---
+title: browserAction.setBadgeBackgroundColor()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setBadgeBackgroundColor
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+设置徽章的背景颜色。没有指定徽章背景颜色的标签页将继承全局徽章背景颜色，该颜色在 Firefox 中默认为 `[217, 0, 0, 255]`。
+
+从 Firefox 63 开始，除非使用 {{WebExtAPIRef("browserAction.setBadgeTextColor()")}} 显式设置徽章文本颜色，否则徽章文本颜色将自动设置为黑色或白色，以最大限度地提高与指定徽章背景颜色的对比度。例如，如果将徽章背景颜色设置为白色，默认的徽章文本颜色将设置为黑色，反之亦然。
+
+其他浏览器始终使用白色文本颜色，因此设置深色背景可能更好，以确保文本可读。
+
+## 语法
+
+```js-nolint
+browser.browserAction.setBadgeBackgroundColor(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : 一个包含以下属性的对象：
+
+ - `color`
+
+ - : 颜色，可以是以下几种之一：
+
+ - 字符串：任何 CSS [\<color>](/zh-CN/docs/Web/CSS/color_value) 值，例如 `"red"`、`"#FF0000"` 或 `"rgb(255 0 0)"`。如果字符串不是有效颜色，返回的 Promise 将被拒绝，背景颜色不会改变。
+ - 一个 {{WebExtAPIRef('browserAction.ColorArray')}} 对象。
+ - `null`。如果指定了 `tabId`，则移除特定标签页的徽章背景颜色，使标签页继承全局徽章背景颜色。否则，将全局徽章背景颜色恢复为默认值。
+
+ - `tabId` {{optional_inline}}
+
+ - : `integer`。仅为指定的标签页设置徽章背景颜色。当用户将该标签页导航到新页面时，颜色会重置。
+
+ - `windowId` {{optional_inline}}
+
+ - : `integer`。仅为指定的窗口设置徽章背景颜色。
+
+<!---->
+
+- 如果同时提供 `windowId` 和 `tabId`，函数将失败且颜色不会被设置。
+- 如果 `windowId` 和 `tabId` 都省略，则会设置全局徽章背景颜色。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+Firefox 中的默认颜色为：`[217, 0, 0, 255]`。
+
+## 示例
+
+当浏览器操作被点击时，徽章背景颜色从红色变为绿色：
+
+```js
+browser.browserAction.setBadgeText({ text: "1234" });
+browser.browserAction.setBadgeBackgroundColor({ color: "red" });
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.browserAction.setBadgeBackgroundColor({ color: "green" });
+});
+```
+
+仅为活动标签页设置徽章背景颜色：
+
+```js
+browser.browserAction.setBadgeText({ text: "1234" });
+browser.browserAction.setBadgeBackgroundColor({ color: "red" });
+
+browser.browserAction.onClicked.addListener((tab) => {
+ browser.browserAction.setBadgeBackgroundColor({
+ color: "green",
+ tabId: tab.id,
+ });
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setBadgeBackgroundColors) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgetext/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgetext/index.md
new file mode 100644
index 00000000000000..267be43ed8d781
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgetext/index.md
@@ -0,0 +1,103 @@
+---
+title: browserAction.setBadgeText()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setBadgeText
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+设置浏览器操作的徽章文本。徽章显示在图标顶部。
+
+没有特定徽章文本的标签页将继承全局徽章文本，默认情况下为 `""`。
+
+## 语法
+
+```js-nolint
+browser.browserAction.setBadgeText(
+ details // 对象
+)
+```
+
+此 API 也可通过 `chrome.browserAction.setBadgeText()` 来使用。
+
+### 参数
+
+- `details`
+
+ - : 一个包含以下属性的对象：
+
+ - `text`
+
+ - : `string` 或 `null`。可以传递任意数量的字符，但空间只能容纳大约四个字符。
+
+ 如果不需要徽章，请使用空字符串 `""`。
+
+ 如果指定了 `tabId`，`null` 将移除特定标签页的徽章文本，使该标签页继承全局徽章文本。否则将全局徽章文本恢复为 `""`。
+
+ 如果指定了 `windowId`，`null` 将移除特定窗口的徽章文本，使标签页继承全局徽章文本。否则将全局徽章文本恢复为 `""`。
+
+ - `tabId` {{optional_inline}}
+
+ - : `integer`。仅为指定的标签页设置徽章文本。当用户将该标签页导航到新页面时，文本会重置。
+
+ - `windowId` {{optional_inline}}
+
+ - : `integer`。为指定的窗口设置徽章文本。
+
+<!---->
+
+- 如果同时提供 `windowId` 和 `tabId`，函数将失败。
+- 如果 `windowId` 和 `tabId` 都省略，则会设置全局徽章文本。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+添加一个徽章，显示用户点击按钮的次数：
+
+```js
+let clicks = 0;
+
+function increment() {
+ browser.browserAction.setBadgeText({ text: (++clicks).toString() });
+}
+
+browser.browserAction.onClicked.addListener(increment);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setBadgeText) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md
new file mode 100644
index 00000000000000..611b4ddef19f12
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setbadgetextcolor/index.md
@@ -0,0 +1,110 @@
+---
+title: browserAction.setBadgeTextColor()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setBadgeTextColor
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+设置浏览器操作徽章的文本颜色。没有特定徽章文本颜色的标签页将继承全局徽章文本颜色。
+
+## 语法
+
+```js-nolint
+browser.browserAction.setBadgeTextColor(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : 一个包含以下属性的对象：
+
+ - `color`
+
+ - : 颜色，可以指定为以下之一：
+
+ - 字符串：任何 CSS [\<color>](/zh-CN/docs/Web/CSS/color_value) 值，例如 `"red"`、`"#FF0000"` 或 `"rgb(255 0 0)"`。如果字符串不是有效颜色，返回的 Promise 将被拒绝，并且文本颜色不会更改。
+ - `{{WebExtAPIRef('browserAction.ColorArray')}}` 对象。
+ - `null`。如果指定了 `tabId`，则移除特定标签页的徽章文本颜色，使该标签页继承全局徽章文本颜色。否则将全局徽章文本颜色恢复为默认值。
+
+ - `tabId` {{optional_inline}}
+
+ - : `integer`。仅为指定的标签页设置徽章文本颜色。当用户将该标签页导航到新页面时，颜色会重置。
+
+ - `windowId` {{optional_inline}}
+
+ - : `integer`。仅为指定的窗口设置徽章文本颜色。
+
+<!---->
+
+- 如果同时提供 `windowId` 和 `tabId`，函数将失败且颜色不会被设置。
+- 如果 `windowId` 和 `tabId` 都省略，则设置全局徽章文本颜色。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+徽章文本颜色起初为红色，当浏览器操作被点击时变为绿色：
+
+```js
+browser.browserAction.setBadgeText({ text: "1234" });
+browser.browserAction.setBadgeTextColor({ color: "red" });
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.browserAction.setBadgeTextColor({ color: "green" });
+});
+```
+
+仅为活动标签页设置徽章文本颜色：
+
+```js
+browser.browserAction.setBadgeText({ text: "1234" });
+browser.browserAction.setBadgeTextColor({ color: "red" });
+
+browser.browserAction.onClicked.addListener((tab) => {
+ browser.browserAction.setBadgeTextColor({
+ color: "green",
+ tabId: tab.id,
+ });
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setBadgeBackgroundColor) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md
new file mode 100644
index 00000000000000..349742eaf5d422
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md
@@ -0,0 +1,190 @@
+---
+title: browserAction.setIcon()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setIcon
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+这是一个设置浏览器操作图标的函数。
+
+你可以指定单个图标，可以是图像文件的路径，也可以是一个 {{WebExtAPIRef('browserAction.ImageDataType')}} 对象。
+
+如果要指定多个不同尺寸的图标，可以提供一个包含多个路径或 `ImageData` 对象的字典。这意味着图标不需要为具有不同像素密度的设备进行缩放。
+
+如果没有指定特定图标的标签，将会继承全局图标，其默认为清单中指定的 [`default_icon`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action)。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let settingIcon = browser.browserAction.setIcon(
+ details // object
+)
+```
+
+### 参数
+
+- `details`
+
+ - : `object`。一个包含 `imageData` 或 `path` 属性的对象，可选地包含一个 `tabId` 属性。
+
+ - `imageData` {{optional_inline}}
+
+ - : `{{WebExtAPIRef('browserAction.ImageDataType')}}` 或 `object`。这可以是单个 `ImageData` 对象或一个字典对象。
+
+ 使用字典对象来指定不同尺寸的多个 `ImageData` 对象，这样图标就不需要根据设备的不同像素密度进行缩放。如果 `ImageData` 是一个字典，则每个属性的值是一个 `ImageData` 对象，属性名是其尺寸，如下所示：
+
+ ```js
+ let settingIcon = browser.action.setIcon({
+ imageData: {
+ 16: image16,
+ 32: image32,
+ },
+ });
+ ```
+
+ 浏览器将根据屏幕的像素密度选择要使用的图像。有关更多信息，请参阅[选择图标大小](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#选择图标大小)。
+
+ - `path` {{optional_inline}}
+
+ - : `string` 或 `object`。这可以是到图标文件的相对路径，也可以是一个字典对象。
+
+ 使用字典对象来指定不同尺寸的多个图标文件，这样图标就不需要根据设备的不同像素密度进行缩放。如果 `path` 是一个字典，则每个属性的值是一个相对路径，属性名是其尺寸，如下所示：
+
+ ```js
+ let settingIcon = browser.action.setIcon({
+ path: {
+ 16: "path/to/image16.jpg",
+ 32: "path/to/image32.jpg",
+ },
+ });
+ ```
+
+ 浏览器将根据屏幕的像素密度选择要使用的图像。有关更多信息，请参阅[选择图标大小](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action#选择图标大小)。
+
+ - `tabId` {{optional_inline}}
+
+ - : `integer`。仅为给定的标签设置图标。用户将该标签导航到新页面时，图标将被重置。
+
+ - `windowId` {{optional_inline}}
+
+ - : `integer`。为给定的窗口设置图标。
+
+<!---->
+
+- 如果同时提供了 `windowId` 和 `tabId`，函数将失败，并且图标不会设置。
+- 如果同时省略了 `windowId` 和 `tabId`，则设置全局图标。
+
+如果 `imageData` 和 `path` 中的每一个都是 `undefined`、`null` 或空对象中的一种：
+
+- 如果指定了 `tabId`，并且标签设置了其特定标签图标，则该标签将从其所属的窗口继承图标。
+- 如果指定了 `windowId`，并且窗口设置了其特定的窗口图标，则该窗口将继承全局图标。
+- 否则，全局图标将重置为清单中的图标。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，一旦图标设置完成，其会兑现且不带任何参数。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+以下示例代码使用浏览器操作来切换对 {{WebExtAPIRef("webRequest.onHeadersReceived")}} 的监听器，并使用 `setIcon()` 来指示监听器是开启还是关闭：
+
+```js
+function logResponseHeaders(requestDetails) {
+ console.log(requestDetails);
+}
+
+function startListening() {
+ browser.webRequest.onHeadersReceived.addListener(
+ logResponseHeaders,
+ { urls: ["<all_urls>"] },
+ ["responseHeaders"],
+ );
+ browser.browserAction.setIcon({ path: "icons/listening-on.svg" });
+}
+
+function stopListening() {
+ browser.webRequest.onHeadersReceived.removeListener(logResponseHeaders);
+ browser.browserAction.setIcon({ path: "icons/listening-off.svg" });
+}
+
+function toggleListener() {
+ if (browser.webRequest.onHeadersReceived.hasListener(logResponseHeaders)) {
+ stopListening();
+ } else {
+ startListening();
+ }
+}
+
+browser.browserAction.onClicked.addListener(toggleListener);
+```
+
+以下代码使用 [`ImageData`](/zh-CN/docs/Web/API/ImageData) 对象设置图标：
+
+```js
+function getImageData() {
+ let canvas = document.createElement("canvas");
+ let ctx = canvas.getContext("2d");
+
+ ctx.fillStyle = "green";
+ ctx.fillRect(10, 10, 100, 100);
+
+ return ctx.getImageData(50, 50, 100, 100);
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.browserAction.setIcon({ imageData: getImageData() });
+});
+```
+
+以下代码段在用户点击图标时更新图标，但仅适用于活动选项卡：
+
+```js
+browser.browserAction.onClicked.addListener((tab) => {
+ browser.browserAction.setIcon({
+ tabId: tab.id,
+ path: "icons/updated-48.png",
+ });
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setIcon) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md
new file mode 100644
index 00000000000000..b9de993317b891
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md
@@ -0,0 +1,133 @@
+---
+title: browserAction.setPopup()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+设置在用户点击浏览器操作图标时，将会以弹出窗口的形式打开的 HTML 文档。没有指定特定弹出窗口的标签页将继承全局弹出窗口，该弹出窗口默认为清单（manifest）文件中指定的 [`default_popup`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action)。
+
+## 语法
+
+```js-nolint
+browser.browserAction.setPopup(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : 一个包含以下属性的对象：
+
+ - `tabId` {{optional_inline}}
+
+ - : `integer`。仅为特定标签页设置弹出窗口。当用户将此标签页导航到新页面时，弹出窗口会重置。
+
+ - `windowId` {{optional_inline}}
+
+ - : `integer`。仅为指定窗口设置弹出窗口。
+
+ - `popup`
+
+ - : `string` 或 `null`。指定为 URL 的 HTML 文件。
+
+ 这可以指向扩展程序内打包的文件（例如，使用 {{WebExtAPIRef("extension.getURL")}} 创建的文件），或者是一个远程文档（例如 `https://example.org/`）。
+
+ 如果这里传递了一个空字符串（`""`），弹出窗口将被禁用，扩展程序将接收到 {{WebExtAPIRef("browserAction.onClicked")}} 事件。
+
+ 如果 `popup` 为 `null`：
+
+ - 如果指定了 `tabId`，则移除特定标签页的弹出窗口，使该标签页继承全局弹出窗口。
+ - 如果指定了 `windowId`，则移除特定窗口的弹出窗口，使该窗口继承全局弹出窗口。
+ - 如果 `tabId` 和 `windowId` 都省略，则将全局弹出窗口恢复为默认值。
+
+<!---->
+
+- 如果同时提供了 `windowId` 和 `tabId`，函数将失败且弹出窗口不会设置。
+- 如果同时省略 `windowId` 和 `tabId`，则设置全局弹出窗口。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+以下代码添加了一对上下文菜单项，用于在两个弹出窗口之间切换。请注意，你需要在扩展的清单中设置“contextMenus”[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)才能创建上下文菜单项。
+
+```js
+function onCreated() {
+ if (browser.runtime.lastError) {
+ console.log("创建项目时出错：", browser.runtime.lastError);
+ } else {
+ console.log("项目创建成功");
+ }
+}
+
+browser.contextMenus.create(
+ {
+ id: "popup-1",
+ type: "radio",
+ title: "弹出窗口 1",
+ contexts: ["all"],
+ checked: true,
+ },
+ onCreated,
+);
+
+browser.contextMenus.create(
+ {
+ id: "popup-2",
+ type: "radio",
+ title: "弹出窗口 2",
+ contexts: ["all"],
+ checked: false,
+ },
+ onCreated,
+);
+
+browser.contextMenus.onClicked.addListener((info, tab) => {
+ if (info.menuItemId === "popup-1") {
+ browser.browserAction.setPopup({ popup: "/popup/popup1.html" });
+ } else if (info.menuItemId === "popup-2") {
+ browser.browserAction.setPopup({ popup: "/popup/popup2.html" });
+ }
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setPopup) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md
new file mode 100644
index 00000000000000..d62f0746b3865a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md
@@ -0,0 +1,106 @@
+---
+title: browserAction.setTitle()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setTitle
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
+---
+
+{{AddonSidebar}}
+
+设置浏览器操作的标题。标题会显示在浏览器操作图标的工具提示中。你可以传入一个 `tabId` 或 `windowId` 作为可选参数——如果这样做，则标题仅为指定的标签页或窗口更改。没有特定标题的标签页或窗口将继承全局标题文本，该文本默认为清单（manifest）中指定的 [`default_title`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) 或 [`name`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name)。
+
+## 语法
+
+```js-nolint
+browser.browserAction.setTitle(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : `object`。新标题和可选的目标标签页或窗口 ID。
+
+ - `title`
+
+ - : `string` 或 `null`。鼠标悬停时浏览器操作应显示的字符串。
+
+ 如果 `title` 是空字符串，则使用扩展名作为标题，但 {{WebExtAPIRef("browserAction.getTitle")}} 仍会提供空字符串。
+
+ 如果 `title` 为 `null`：
+
+ - 如果指定了 `tabId`，并且该标签页设置了特定的标签页标题，则该标签页将继承其所属窗口的标题。
+ - 如果指定了 `windowId`，并且该窗口设置了特定的窗口标题，则该窗口将继承全局标题。
+ - 否则，全局标题将重置为清单中的标题。
+
+ - `tabId` {{optional_inline}}
+
+ - : `integer`。仅为指定的标签页设置标题。
+
+ - `windowId` {{optional_inline}}
+
+ - : `integer`。仅为指定的窗口设置标题。
+
+<!---->
+
+- 如果同时提供了 `windowId` 和 `tabId`，函数将失败且标题不会设置。
+- 如果同时省略 `windowId` 和 `tabId`，则设置全局标题。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此代码在每次用户点击浏览器操作时，在“this”和“that”之间切换标题：
+
+```js
+function toggleTitle(title) {
+ if (title === "this") {
+ browser.browserAction.setTitle({ title: "that" });
+ } else {
+ browser.browserAction.setTitle({ title: "this" });
+ }
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ let gettingTitle = browser.browserAction.getTitle({});
+ gettingTitle.then(toggleTitle);
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browserAction`](https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setTitle) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/allowpopupsforuserevents/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/allowpopupsforuserevents/index.md
new file mode 100644
index 00000000000000..bd0bc1489870ef
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/allowpopupsforuserevents/index.md
@@ -0,0 +1,51 @@
+---
+title: browserSettings.allowPopupsForUserEvents
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/allowPopupsForUserEvents
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，可用于启用或禁用网页在响应用户操作时打开弹出窗口的功能。
+
+其底层值是一个布尔值。
+
+默认情况下，浏览器允许网页在响应特定事件时打开弹出窗口：例如 [click](/zh-CN/docs/Web/API/Element/click_event)、[mouseup](/zh-CN/docs/Web/API/Element/mouseup_event)、[submit](/zh-CN/docs/Web/API/HTMLFormElement/submit_event)。如果 `allowPopupsForUserEvents` 设置为 `false`，则任何用户事件都无法打开弹出窗口。如果设置为 `true`，则默认事件集将被允许打开弹出窗口。
+
+例如，假设网页有如下代码：
+
+```js
+window.addEventListener("click", (e) => {
+ window.open("https://example.com", "myPopup", "height=400,width=400");
+});
+```
+
+默认情况下，这将打开一个弹出窗口。如果扩展将 `allowPopupsForUserEvents` 设置为 `false`，则不会打开弹出窗口，用户将被通知弹出窗口已被阻止。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+切换设置：
+
+```js
+function toggleAllowPopup() {
+ function toggle(current) {
+ console.log(`当前值为：${current.value}`);
+ browser.browserSettings.allowPopupsForUserEvents.set({
+ value: !current.value,
+ });
+ }
+
+ browser.browserSettings.allowPopupsForUserEvents.get({}).then(toggle);
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ toggleAllowPopup();
+});
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/closetabsbydoubleclick/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/closetabsbydoubleclick/index.md
new file mode 100644
index 00000000000000..a6e726f7de24ce
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/closetabsbydoubleclick/index.md
@@ -0,0 +1,18 @@
+---
+title: browserSettings.closeTabsByDoubleClick
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/closeTabsByDoubleClick
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，可用于启用或禁用用户使用双击关闭标签页的功能。
+
+其底层值是一个布尔值。
+
+默认情况下，closeTabsByDoubleClick 为 false。用户可以在 about:config 中更改此设置。
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/colormanagement/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/colormanagement/index.md
new file mode 100644
index 00000000000000..2d5510e7bf8d92
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/colormanagement/index.md
@@ -0,0 +1,51 @@
+---
+title: browserSettings.colorManagement
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/colorManagement
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，用于查询和设置浏览器的颜色管理特性。
+
+默认情况下，Firefox 会对已标记的媒体应用颜色管理，并对未标记的媒体默认使用 sRGB。这种行为意味着某些未标记的媒体（例如动画和电影制作中使用的媒体）可能会被进行不必要的颜色校正。使用这些设置可以防止这种情况发生。
+
+该对象具有以下属性：
+
+- `mode`
+ - : 表示颜色管理模式的字符串。有效值为 `off`、`full` 和 `tagged_only`。
+- `useNativeSRGB`
+ - : 表示是否使用内置的 sRGB 颜色管理的布尔值。
+- `useWebRenderCompositor`
+ - : 表示是否使用 WebRender 合成器的布尔值。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将颜色模式设置为“full”：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.colorManagement.mode
+ .set({ value: "full" })
+ .then(logResult);
+```
+
+获取原生 sRGB 颜色管理的颜色模式：
+
+```js
+function logResult(result) {
+ console.log(`当前 useNativeSRGB 值： ${result.value}`);
+}
+
+browser.browserSettings.colorManagement.useNativeSRGB.get({}).then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/contextmenushowevent/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/contextmenushowevent/index.md
new file mode 100644
index 00000000000000..08cddd94f8ce47
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/contextmenushowevent/index.md
@@ -0,0 +1,34 @@
+---
+title: browserSettings.contextMenuShowEvent
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/contextMenuShowEvent
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，用于确定浏览器的上下文菜单是在 mouseup 事件还是 mousedown 事件显示。
+
+其底层值是一个字符串，可以是“mouseup”或“mousedown”。
+
+在 Windows 上，默认值为“mouseup”，在 macOS 和 Linux 上为“mousedown”。在 Windows 上对其进行赋值没有效果——此设置仅设计为允许上下文菜单在 mouseup 事件时打开，而不是在 mousedown 事件时。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将设置值设置为“mouseup”：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.contextMenuShowEvent
+ .set({ value: "mouseup" })
+ .then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/homepageoverride/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/homepageoverride/index.md
new file mode 100644
index 00000000000000..bc76fc91fa29f6
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/homepageoverride/index.md
@@ -0,0 +1,28 @@
+---
+title: browserSettings.homepageOverride
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/homepageOverride
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，可用于获取表示当前设置为浏览器主页的 URL 的字符串。
+
+请注意，这是一个只读设置。要更改主页，请参阅 [chrome_settings_overrides](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides)。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+获取主页 URL 的当前值：
+
+```js
+browser.browserSettings.homepageOverride.get({}).then((result) => {
+ console.log(result.value);
+});
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/newtabpageoverride/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/newtabpageoverride/index.md
new file mode 100644
index 00000000000000..452782248c2b46
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/newtabpageoverride/index.md
@@ -0,0 +1,28 @@
+---
+title: browserSettings.newTabPageOverride
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/newTabPageOverride
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，可用于获取表示“新标签页”页面的 URL 字符串，即用户打开新的空白标签页时加载的页面。
+
+请注意，这是一个只读设置。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+获取新标签页 URL 的当前值：
+
+```js
+browser.browserSettings.newTabPageOverride.get({}).then((result) => {
+ console.log(result.value);
+});
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/openbookmarksinnewtabs/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/openbookmarksinnewtabs/index.md
new file mode 100644
index 00000000000000..091782f22ba212
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/openbookmarksinnewtabs/index.md
@@ -0,0 +1,32 @@
+---
+title: browserSettings.openBookmarksInNewTabs
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/openBookmarksInNewTabs
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其底层值是一个布尔值。
+
+如果设置为 `true`，当用户选择一个书签时，它会在新标签页中打开。如果设置为 `false`（默认值），书签会在当前标签页中打开。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将设置调整为 `true`：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.openBookmarksInNewTabs
+ .set({ value: true })
+ .then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/opensearchresultsinnewtabs/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/opensearchresultsinnewtabs/index.md
new file mode 100644
index 00000000000000..afced7e570b84e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/opensearchresultsinnewtabs/index.md
@@ -0,0 +1,34 @@
+---
+title: browserSettings.openSearchResultsInNewTabs
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/openSearchResultsInNewTabs
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其底层值是布尔值。
+
+如果设置为 `true`，当用户在浏览器的搜索框中选择一个项目时，搜索结果会显示在一个新标签页中。如果设置为 `false`（默认值），搜索结果会显示在当前标签页中。
+
+注意，这不会影响从地址栏或智能地址栏中选择项目时的行为，只影响专用搜索框。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将设置指定为 `true`：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.openSearchResultsInNewTabs
+ .set({ value: true })
+ .then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/openurlbarresultsinnewtabs/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/openurlbarresultsinnewtabs/index.md
new file mode 100644
index 00000000000000..da9cf75c5c0bfc
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/openurlbarresultsinnewtabs/index.md
@@ -0,0 +1,34 @@
+---
+title: browserSettings.openUrlbarResultsInNewTabs
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/openUrlbarResultsInNewTabs
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其底层是一个布尔值。
+
+当用户聚焦地址栏并开始输入时，浏览器会提供自动完成建议：一个基于用户不完整输入和浏览历史的网页下拉列表。
+
+如果设置为 `true`，当用户选择这些项目之一时，项目会在新标签页中打开。如果设置为 `false`（默认值），项目会在当前标签页中打开。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将该项配置设置为 `true`：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.openUrlbarResultsInNewTabs
+ .set({ value: true })
+ .then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/overridecontentcolorscheme/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/overridecontentcolorscheme/index.md
new file mode 100644
index 00000000000000..7d8ac5b84198a5
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/overridecontentcolorscheme/index.md
@@ -0,0 +1,39 @@
+---
+title: browserSettings.overrideContentColorScheme
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/overrideContentColorScheme
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其底层值是字符串。
+
+Firefox 允许用户为浏览器界面选择一个主题。这些主题可以为网页应用浅色或深色主题。通过使用 `layout.css.prefers-color-scheme.content-override` 首选项，用户可以覆盖主题并选择以浅色或深色主题渲染网页，或者跟随设备的主题。此浏览器设置公开了该首选项。
+
+此对象可以取以下值：
+
+- “light”：为网页应用浅色主题。
+- “dark”：为网页应用深色主题。
+- “system”：根据设备的主题为网页应用浅色或深色主题。
+- “browser”：根据浏览器的主题为网页应用浅色或深色主题。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例覆盖设置以使用网页的深色主题：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.overrideContentColorScheme
+ .set({ value: "dark" })
+ .then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/overridedocumentcolors/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/overridedocumentcolors/index.md
new file mode 100644
index 00000000000000..a3ecbbbc8559d0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/overridedocumentcolors/index.md
@@ -0,0 +1,38 @@
+---
+title: browserSettings.overrideDocumentColors
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/overrideDocumentColors
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其底层值是字符串。
+
+Firefox 允许用户为文档背景和文本设置自定义颜色。默认情况下，这些颜色值仅在选择高对比度主题时应用（高对比度主题是某些操作系统用户界面的一项特性，旨在通过提高对比度来改善无障碍）。然而，用户也可以选择始终应用这些颜色或从不应用。此浏览器设置公开了该首选项。
+
+其底层值是一个字符串，可以取以下任一值：
+
+- “high-contrast-only”：仅在选择高对比度主题时应用用户的选择。这是默认值。
+- “never”：从不应用用户的选择。
+- “always”：始终应用用户的选择。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将设置指定为“always”：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.overrideDocumentColors
+ .set({ value: "always" })
+ .then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/tlsversionrestrictionconfig/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/tlsversionrestrictionconfig/index.md
new file mode 100644
index 00000000000000..fb822da55ceee7
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/tlsversionrestrictionconfig/index.md
@@ -0,0 +1,37 @@
+---
+title: browserSettings.tlsVersionRestrictionConfig
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/tlsVersionRestrictionConfig
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，用于读取浏览器支持的 TLS（传输层安全）版本的最高和最低值。
+
+该对象具有以下属性：
+
+- `minimum`
+ - : 浏览器支持的最低 TLS 版本。有效值为 `TLSv1`、`TLSv1.1`、`TLSv1.2`、`TLSv1.3` 和 `unknown`。
+- `maximum`
+ - : 浏览器支持的最高 TLS 版本。有效值为 `TLSv1`、`TLSv1.1`、`TLSv1.2`、`TLSv1.3` 和 `unknown`。
+
+这是一个只读设置。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+获取浏览器支持的最高 TLS 版本：
+
+```js
+browser.browserSettings.tlsVersionRestrictionConfig.maximum
+ .get({})
+ .then((result) => {
+ console.log(`支持的最高 TLS 版本：${result}`);
+ });
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/usedocumentfonts/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/usedocumentfonts/index.md
new file mode 100644
index 00000000000000..dff8ffa6e0a8a8
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/usedocumentfonts/index.md
@@ -0,0 +1,35 @@
+---
+title: browserSettings.useDocumentFonts
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/useDocumentFonts
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其基础值是布尔值。
+
+默认情况下，网页可以使用 CSS 属性（例如 [`font-family`](/zh-CN/docs/Web/CSS/font-family)）来指定所需的字体。此设置允许扩展指示 Firefox 忽略网页指定的字体，仅使用系统字体。
+
+其基础值是一个布尔值：
+
+- `true`：使用网页指定的字体。这是默认值。
+- `false`：使用系统字体。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将设置设为 `false`：
+
+```js
+function logResult(result) {
+ console.log(`设置已更改：${result}`);
+}
+
+browser.browserSettings.useDocumentFonts.set({ value: false }).then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md
new file mode 100644
index 00000000000000..78fcff2dd2b186
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md
@@ -0,0 +1,44 @@
+---
+title: browserSettings.webNotificationsDisabled
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/webNotificationsDisabled
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，可用于阻止网站使用 [`Notifications`](/zh-CN/docs/Web/API/Notifications_API) Web API 显示通知。
+
+`Notifications` API 用于向用户显示桌面通知。通知有三个级别的权限：_允许_、*拒绝*和*提示*。用户可以为每个站点设置此权限。如果用户没有为特定站点设置权限，则浏览器将回退到全局权限，其默认值为*提示*。
+
+把 `browserSettings.webNotificationsDisabled` 设置为 `true` 以将全局权限切换为*拒绝*。
+
+请注意，这不会影响用户已经设置了站点首选项的站点。例如，如果用户将 <https://example.org> 设置为*允许*，然后扩展程序将 `browserSettings.webNotificationsDisabled` 设置为 `true`，那么 [https://example.org](https://example.org) 下的页面仍将被允许显示通知。
+
+把 `browserSettings.webNotificationsDisabled` 设置为 `false` 以将全局默认值恢复为其默认值。
+
+请注意，此设置对使用 [`notifications`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/notifications) API 创建的扩展程序通知没有影响。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+切换设置：
+
+```js
+async function toggleWebNotifications() {
+ let current = await browser.browserSettings.webNotificationsDisabled.get({});
+ console.log(`当前值：${current.value}`);
+ browser.browserSettings.webNotificationsDisabled.set({
+ value: !current.value,
+ });
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ toggleWebNotifications();
+});
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/zoomfullpage/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/zoomfullpage/index.md
new file mode 100644
index 00000000000000..b657e780bae91b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/zoomfullpage/index.md
@@ -0,0 +1,35 @@
+---
+title: browserSettings.zoomFullPage
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/zoomFullPage
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其底层值为布尔值。
+
+默认情况下，缩放应用于网页的所有内容。使用[仅缩放文本设置](https://support.mozilla.org/zh-CN/kb/页面缩放)用户可以选择仅对页面上的文本进行缩放。此设置使 Web 扩展能够控制此设置，并确定缩放是应用于整个页面还是仅应用于文本。
+
+设置如下：
+
+- `true`：缩放应用于网页的所有内容（默认）。
+- `false`：仅将缩放应用于网页文本。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将设置指定为 `false`：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.zoomFullPage.set({ value: false }).then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md
new file mode 100644
index 00000000000000..c78720bd7601c1
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md
@@ -0,0 +1,44 @@
+---
+title: browserSettings.zoomSiteSpecific
+slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/zoomSiteSpecific
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个 {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} 对象，其底层值为布尔值。
+
+此属性设置了[配置设置](https://support.mozilla.org/zh-CN/kb/about-config-editor-firefox)中的 `browser.zoom.siteSpecific`，该配置控制缩放设置如何应用于站点和标签页。
+
+如果 `browser.zoom.siteSpecific` 为 `true`，则缩放操作适用于同一站点的所有页面，因此：
+
+- 页面加载时，如果存在该站点的缩放级别，则将其应用于页面，否则将应用全局默认缩放级别。
+- 当页面的缩放级别更改时，其他标签页中来自该站点的页面的缩放级别也会更改。
+
+如果 `browser.zoom.siteSpecific` 设置为 `false`，则缩放操作仅适用于活动标签页，因此：
+
+- 新标签页打开时，将应用全局默认缩放级别。
+- 当标签页中的缩放级别更改时，它会保持跨页面的加载，并且不会影响其他标签页中的缩放级别。
+
+当 Firefox 安装时，`browser.zoom.siteSpecific` 为 true。
+
+如果 [`privacy.websites`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/privacy/websites)`.resistFingerprinting` 为 `true`，则此设置无效，缩放是基于每个标签页的。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+将设置指定为 `false`：
+
+```js
+function logResult(result) {
+ console.log(`设置已修改：${result}`);
+}
+
+browser.browserSettings.zoomSiteSpecific.set({ value: false }).then(logResult);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md
new file mode 100644
index 00000000000000..23a59b18c67bcf
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md
@@ -0,0 +1,82 @@
+---
+title: browsingData.DataTypeSet
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/DataTypeSet
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`browsingData.DataTypeSet`** 类型描述了一组数据类型。
+
+它包含多个布尔属性。每个属性的名称是某种特定浏览数据的名称，例如“downloads”、“history”等。所有属性都是可选的。
+
+此类型用于：
+
+- 在 {{WebExtAPIRef("browsingData.remove()")}} 中描述要删除的数据类型
+- 在 {{WebExtAPIRef("browsingData.settings()")}} 中描述当前在浏览器的“清除历史记录”功能中选择的数据类型
+
+## 类型
+
+此类型的值是对象。它们包含以下属性：
+
+- `cache` {{optional_inline}}
+ - : `boolean`。浏览器的缓存。
+- `cookies` {{optional_inline}}
+ - : `boolean`。浏览过程中获得的 cookie。
+- `downloads` {{optional_inline}}
+ - : `boolean`。用户的下载历史记录。
+- `fileSystems` {{optional_inline}}
+ - : `boolean`。网站的文件系统。
+- `formData` {{optional_inline}}
+ - : `boolean`。保存的表单数据，用于自动填充。
+- `history` {{optional_inline}}
+ - : `boolean`。用户的浏览历史记录。
+- `indexedDB` {{optional_inline}}
+ - : `boolean`。IndexedDB 数据。
+- `localStorage` {{optional_inline}}
+ - : `boolean`。本地存储数据。
+- `passwords` {{optional_inline}}
+ - : `boolean`。保存的密码，用于自动填充。
+- `pluginData` {{optional_inline}}
+ - : `boolean`。与插件关联的存储数据。
+- `serverBoundCertificates` {{optional_inline}}
+ - : `boolean`。存储的服务器绑定证书。
+- `serviceWorkers` {{optional_inline}}
+ - : `boolean`。service worker 缓存的数据。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/index.md
new file mode 100644
index 00000000000000..ca474a52caa11d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/index.md
@@ -0,0 +1,100 @@
+---
+title: browsingData
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
+---
+
+{{AddonSidebar}}
+
+使扩展程序能够清除用户在浏览时积累的数据。
+
+在 `browsingData` API 中，浏览数据被分为以下类型：
+
+- 浏览器缓存
+- cookie
+- 下载
+- 历史记录
+- 本地存储
+- 插件数据
+- 已保存的表单数据
+- 已保存的密码
+
+你可以使用 {{WebExtAPIRef("browsingData.remove()")}} 函数来移除这些类型的任何组合。还有专门的函数用于移除每种特定类型的数据，例如 {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}、{{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} 等等。
+
+所有的 `browsingData.remove[X]()` 函数都接受一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，你可以使用它来进一步控制数据移除的两个方面：
+
+- 删除多久以前的数据
+- 是否仅从普通网页中移除数据，还是同时从托管的 Web 应用程序和插件中移除数据。请注意，Firefox 尚不受支持此选项。
+
+最后，此 API 还提供了一个 {{WebExtAPIRef("browsingData.settings()")}} 函数，用于获取浏览器内置“清除历史记录”特性的当前设置值。
+
+要使用此 API，你必须具有“browsingData” [API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_权限)。
+
+## 类型
+
+- {{WebExtAPIRef("browsingData.DataTypeSet")}}
+ - : 用于指定要移除的数据类型的对象：例如历史记录、下载、密码等。
+- {{WebExtAPIRef("browsingData.RemovalOptions")}}
+ - : 用于指定在时间轴上移除数据的范围，以及是否仅从普通网络浏览、托管的应用程序或插件中移除数据的对象。
+
+## 方法
+
+- {{WebExtAPIRef("browsingData.remove()")}}
+ - : 移除指定数据类型（例如，历史记录、下载、密码，等等）的浏览数据。
+- {{WebExtAPIRef("browsingData.removeCache()")}}
+ - : 清除浏览器的缓存。
+- {{WebExtAPIRef("browsingData.removeCookies()")}}
+ - : 移除 cookie。
+- {{WebExtAPIRef("browsingData.removeDownloads()")}}
+ - : 移除下载文件列表。
+- {{WebExtAPIRef("browsingData.removeFormData()")}}
+ - : 清除已保存的表单数据。
+- {{WebExtAPIRef("browsingData.removeHistory()")}}
+ - : 清除浏览器的历史记录。
+- {{WebExtAPIRef("browsingData.removeLocalStorage()")}}
+ - : 清除网站创建的任何[本地存储](/zh-CN/docs/Web/API/Window/localStorage)。
+- {{WebExtAPIRef("browsingData.removePasswords()")}}
+ - : 清除已保存的密码。
+- {{WebExtAPIRef("browsingData.removePluginData()")}}
+ - : 清除与插件相关的数据。
+- {{WebExtAPIRef("browsingData.settings()")}}
+ - : 获取浏览器“清除历史记录”特性的当前设置值。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md
new file mode 100644
index 00000000000000..4c2c2bf062f239
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md
@@ -0,0 +1,79 @@
+---
+title: browsingData.RemovalOptions
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/RemovalOptions
+l10n:
+ sourceCommit: 61fd66033bcc197a9d511dc95370ca042623ad5e
+---
+
+{{AddonSidebar}}
+
+**`browsingData.RemovalOptions`** 类型包含控制浏览数据删除的某些方面的选项。
+
+## 类型
+
+此类型的值是对象。它们包含以下属性：
+
+- `cookieStoreId` {{optional_inline}}
+
+ - : `string`。此属性只适用于 cookie 和 indexedDB 项。删除仅限于通过 ID 指定的 [cookie 存储](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies/CookieStore)中的项目。有关更多信息，请参见[使用场景身份](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities)。
+
+ > **备注：** Firefox Nightly 还支持通过 `cookieStoreId` 删除 localStorage 项目。
+
+- `hostnames` {{optional_inline}}
+
+ - : `string` 数组。此属性适用于 cookie、indexedDB、本地存储和 service worker 注册项。仅删除与这些主机名关联的 cookie、indexedDB、本地存储和 service worker 注册项。
+
+ 这里必须传递不带协议的主机名（例如，`"google.com"` 而不是 `"https://google.com"`）。你可以使用 [`URL`](/zh-CN/docs/Web/API/URL) 接口来解析原始 URL 并检索主机名。与给定主机名的子域关联的项目不会被删除：你必须显式列出子域。
+
+- `originTypes` {{optional_inline}}
+
+ - : `object`。用于控制是仅从普通网页中删除数据，还是也从托管的 Web 应用程序和扩展中删除数据。如果省略此选项，则仅删除来自普通网页（`"unprotectedWeb"`）的数据。在删除来自 Web 应用程序或扩展的数据之前，请务必保持谨慎，以确保这确实是用户想要的。
+
+ 此对象可以包含以下任何属性：
+
+ - `unprotectedWeb` {{optional_inline}}
+ - : `boolean`。如果存在且为 `true`，则从普通网页中删除数据。
+ - `protectedWeb` {{optional_inline}}
+ - : `boolean`。如果存在且为 `true`，则从已安装为托管应用程序的网站中删除数据。
+ - `extension` {{optional_inline}}
+ - : `boolean`。如果存在且为 `true`，则从扩展中删除数据。
+
+- `since` {{optional_inline}}
+
+ - : `number`。从何时开始删除数据，以[自纪元以来的毫秒数表示](https://zh.wikipedia.org/wiki/UNIX时间)。请注意，在删除浏览器缓存时，将始终删除整个缓存，此选项将被忽略。如果省略 `since` 属性，则默认为 0，表示“所有时间”。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md
new file mode 100644
index 00000000000000..0c4dd8e37a69d6
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md
@@ -0,0 +1,114 @@
+---
+title: browsingData.remove()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/remove
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+移除指定的浏览数据。
+
+要移除的浏览数据在 `dataTypes` 选项（一个 {{WebExtAPIRef("browsingData.DataTypeSet")}} 对象）中指定。
+
+你可以使用 `removalOptions` 选项（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象）来控制移除数据的时间跨度以及是否仅从普通网页中移除数据，还是同时从托管的应用程序和扩展中移除数据。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.remove(
+ removalOptions, // RemovalOptions 对象
+ dataTypes // DataTypeSet 对象
+)
+```
+
+### 参数
+
+- `removalOptions`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，可用于控制要移除的数据的时间跨度，以及是否从托管的 Web 应用程序和扩展中移除数据，还是仅从普通网页中移除数据。
+- `dataTypes`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.DataTypeSet")}} 对象，描述要移除的数据类型（例如历史记录、下载等）。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，`Promise` 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+删除最近一周的下载历史和浏览历史：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+function weekInMilliseconds() {
+ return 1000 * 60 * 60 * 24 * 7;
+}
+
+let oneWeekAgo = new Date().getTime() - weekInMilliseconds();
+
+browser.browsingData
+ .remove({ since: oneWeekAgo }, { downloads: true, history: true })
+ .then(onRemoved, onError);
+```
+
+删除所有下载和浏览历史：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData
+ .remove({}, { downloads: true, history: true })
+ .then(onRemoved, onError);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
new file mode 100644
index 00000000000000..54fc94b278e029
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
@@ -0,0 +1,85 @@
+---
+title: browsingData.removeCache()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCache
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+清除浏览器的缓存。
+
+请注意，虽然此函数可以接受一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，但该对象将被忽略。在使用此函数时，总是会清除整个缓存。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.removeCache(
+ removalOptions // RemovalOptions 对象
+)
+```
+
+### 参数
+
+- `removalOptions` {{optional_inline}}
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象。此参数没有效果。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，`Promise` 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+清除浏览器缓存：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removeCache({}).then(onRemoved, onError);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md
new file mode 100644
index 00000000000000..9b0a6a5cc99541
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md
@@ -0,0 +1,114 @@
+---
+title: browsingData.removeCookies()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCookies
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+清除浏览器的 cookie。
+
+你可以使用 `removalOptions` 参数（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象），来：
+
+- 仅清除指定时间后创建的 cookie
+- 控制是否仅清除来自普通网页设置的 cookie，还是同时清除来自托管应用程序和扩展设置的 cookie。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.removeCookies(
+ removalOptions // RemovalOptions 对象
+)
+```
+
+### 参数
+
+- `removalOptions`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，用于仅清除指定时间后创建的 cookie，以及是否仅清除来自普通网页设置的 cookie，还是同时清除来自托管应用程序和扩展设置的 cookie。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，promise 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+移除最近一周内创建的 cookie：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+function weekInMilliseconds() {
+ return 1000 * 60 * 60 * 24 * 7;
+}
+
+let oneWeekAgo = new Date().getTime() - weekInMilliseconds();
+
+browser.browsingData
+ .removeCookies({ since: oneWeekAgo })
+ .then(onRemoved, onError);
+```
+
+移除所有 cookie：
+
+> **警告：** 使用 API 清除所有 cookie 将同时清除所有本地存储对象（包括其他扩展程序的存储对象）。
+>
+> 如果要清除所有 cookie 而不影响本地存储设施，请使用 [browser.cookies](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies) 来循环并清除所有 cookie 存储的内容。
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removeCookies({}).then(onRemoved, onError);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removedownloads/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removedownloads/index.md
new file mode 100644
index 00000000000000..7edc4c876d4635
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removedownloads/index.md
@@ -0,0 +1,108 @@
+---
+title: browsingData.removeDownloads()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeDownloads
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+清除浏览器的下载历史记录。请注意，这不会删除已下载对象本身，只会清除浏览器历史记录中的下载记录。
+
+你可以使用 `removalOptions` 参数（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象）来：
+
+- 清除在特定时间之后下载的项目的记录
+- 控制是仅清除从普通网页下载的项目的记录，还是同时清除从托管应用程序和扩展程序下载的记录。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.removeDownloads(
+ removalOptions // RemovalOptions 对象
+)
+```
+
+### 参数
+
+- `removalOptions`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，可用于仅清除在特定时间之后创建的记录，以及是仅清除从普通网页下载的项目的记录，还是同时清除从托管应用程序和扩展程序下载的记录。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，`Promise` 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+清除上周下载的对象的记录：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+function weekInMilliseconds() {
+ return 1000 * 60 * 60 * 24 * 7;
+}
+
+let oneWeekAgo = new Date().getTime() - weekInMilliseconds();
+
+browser.browsingData
+ .removeDownloads({ since: oneWeekAgo })
+ .then(onRemoved, onError);
+```
+
+清除所有下载对象的记录：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removeDownloads({}).then(onRemoved, onError);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removeformdata/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removeformdata/index.md
new file mode 100644
index 00000000000000..7570eefdb915c6
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removeformdata/index.md
@@ -0,0 +1,110 @@
+---
+title: browsingData.removeFormData()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeFormData
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+清除浏览器为自动填表单而保存的数据。
+
+你可以使用 `removalOptions` 参数（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象），来：
+
+- 仅清除在特定时间之后输入的表单数据
+- 控制是仅清除在普通网页中输入的表单数据，还是同时清除在托管应用程序和扩展程序中输入的数据。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.removeFormData(
+ removalOptions // RemovalOptions 对象
+)
+```
+
+### 参数
+
+- `removalOptions`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，可用于仅清除在特定时间之后输入的表单数据，以及是仅清除在普通网页中输入的表单数据，还是同时清除在托管应用程序和扩展程序中输入的数据。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，promise 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+清除上周保存的表单数据：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+function weekInMilliseconds() {
+ return 1000 * 60 * 60 * 24 * 7;
+}
+
+let oneWeekAgo = new Date().getTime() - weekInMilliseconds();
+
+browser.browsingData
+ .removeFormData({ since: oneWeekAgo })
+ .then(onRemoved, onError);
+```
+
+清除所有保存的表单数据：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removeFormData({}).then(onRemoved, onError);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md
new file mode 100644
index 00000000000000..befe49aae078ba
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md
@@ -0,0 +1,110 @@
+---
+title: browsingData.removeHistory()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeHistory
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+清除用户访问过的网页记录（浏览历史）。
+
+你可以使用 `removalOptions` 参数（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象），用于：
+
+- 仅清除在特定时间之后访问的网页记录
+- 控制是仅清除普通网页的记录，还是同时清除托管应用程序和扩展程序的记录。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.removeHistory(
+ removalOptions // RemovalOptions 对象
+)
+```
+
+### 参数
+
+- `removalOptions`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，可用于仅清除在特定时间之后访问的网页记录，以及是仅清除普通网页的记录，还是同时清除托管应用程序和扩展程序的记录。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，`Promise` 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+清除上周访问的网页记录：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+function weekInMilliseconds() {
+ return 1000 * 60 * 60 * 24 * 7;
+}
+
+let oneWeekAgo = new Date().getTime() - weekInMilliseconds();
+
+browser.browsingData
+ .removeHistory({ since: oneWeekAgo })
+ .then(onRemoved, onError);
+```
+
+清除所有访问过的网页记录：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removeHistory({}).then(onRemoved, onError);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removelocalstorage/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removelocalstorage/index.md
new file mode 100644
index 00000000000000..7bcc4244ab7b21
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removelocalstorage/index.md
@@ -0,0 +1,88 @@
+---
+title: browsingData.removeLocalStorage()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeLocalStorage
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+清除由网站创建的任何[本地存储](/zh-CN/docs/Web/API/Window/localStorage)。
+
+你可以使用 `removalOptions` 参数（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象），来：
+
+- 仅清除在特定时间之后创建的本地存储对象
+- 控制是仅清除普通网页创建的本地存储对象，还是同时清除托管应用程序和扩展程序创建的对象。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.removeLocalStorage(
+ removalOptions // RemovalOptions 对象
+)
+```
+
+### 参数
+
+- `removalOptions`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，可用于仅清除普通网页创建的本地存储对象，还是同时清除托管应用程序和扩展程序创建的对象。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，promise 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+清除所有本地存储：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removeLocalStorage({}).then(onRemoved, onError);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removepasswords/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removepasswords/index.md
new file mode 100644
index 00000000000000..b724f4b8a134c0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removepasswords/index.md
@@ -0,0 +1,110 @@
+---
+title: browsingData.removePasswords()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removePasswords
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+清除已保存的密码。
+
+你可以使用 `removalOptions` 参数（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象），用于：
+
+- 仅清除在特定时间之后保存的密码
+- 控制是仅清除在普通网页上保存的密码，还是同时清除在托管应用程序和扩展程序上保存的密码。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.browsingData.removePasswords(
+ removalOptions // RemovalOptions 对象
+)
+```
+
+### 参数
+
+- `removalOptions`
+ - : `object`。一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，可用于仅清除在特定时间之后保存的密码，以及是仅清除在普通网页上保存的密码，还是同时清除在托管应用程序和扩展程序上保存的密码。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在移除完成时其会兑现且不带任何参数。如果发生任何错误，`Promise` 将被拒绝，并附带一个错误消息。
+
+## 示例
+
+清除上周保存的密码：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+function weekInMilliseconds() {
+ return 1000 * 60 * 60 * 24 * 7;
+}
+
+let oneWeekAgo = new Date().getTime() - weekInMilliseconds();
+
+browser.browsingData
+ .removePasswords({ since: oneWeekAgo })
+ .then(onRemoved, onError);
+```
+
+清除所有已保存的密码：
+
+```js
+function onRemoved() {
+ console.log("已删除");
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.removePasswords({}).then(onRemoved, onError);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md
index 58b2405e876909..38d8b5c3fe9bdc 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/removeplugindata/index.md
@@ -9,7 +9,7 @@ l10n:
清除浏览器插件存储的数据。
-你可以使用 `removalOptions` 参数，该参数是一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象，用于：
+你可以使用 `removalOptions` 参数（一个 {{WebExtAPIRef("browsingData.RemovalOptions")}} 对象），用于：
- 仅清除在特定时间之后存储的插件数据
- 控制是仅清除在普通网页中运行的插件存储的数据，还是同时清除在托管应用程序和扩展程序中运行的插件存储的数据。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md
new file mode 100644
index 00000000000000..116fc73d2a8d4f
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md
@@ -0,0 +1,95 @@
+---
+title: browsingData.settings()
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData/settings
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+浏览器内置的“清除历史记录”功能可以让用户清除各种类型的浏览数据。此功能提供一个用户界面，用户可以选择要删除的数据类型（例如历史记录、下载记录等）以及删除数据的时间范围。
+
+此函数返回这些设置的当前值。
+
+请注意，并非所有数据类型都可以通过用户界面删除，某些用户界面选项可能映射到多个数据类型。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let getSettings = browser.browsingData.settings()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当成功时其会兑现一个包含设置信息的对象。该对象有三个属性：
+
+- `options`
+ - : `{{WebExtAPIRef("browsingData.RemovalOptions")}}`。一个描述当前选择的删除选项的 `RemovalOptions` 对象。
+- `dataToRemove`
+ - : `{{WebExtAPIRef("browsingData.DataTypeSet")}}`。包含可以在浏览器用户界面中切换的每种数据类型的属性。每个属性的值如果选中删除该类型的数据为 `true`，否则为 `false`。
+- `dataRemovalPermitted`
+ - : `{{WebExtAPIRef("browsingData.DataTypeSet")}}`。包含可以在浏览器用户界面中切换的每种数据类型的属性。如果设备的管理员允许用户删除该类型的数据，则对应属性的值为 `true`，否则为 `false`。
+
+如果发生任何错误，Promise 将会被拒绝并带有错误消息。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+记录当前设置：
+
+```js
+function onGotSettings(settings) {
+ console.log(settings.options);
+ console.log(settings.dataToRemove);
+ console.log(settings.dataRemovalPermitted);
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.browsingData.settings().then(onGotSettings, onError);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/canonicalurl/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/canonicalurl/index.md
new file mode 100644
index 00000000000000..aedcfd960e34c4
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/canonicalurl/index.md
@@ -0,0 +1,48 @@
+---
+title: captivePortal.canonicalURL
+slug: Mozilla/Add-ons/WebExtensions/API/captivePortal/canonicalURL
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+返回强制门户检测页面的规范 URL。只读。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#property-TAB_ID_NONE) API。该文档衍生自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/getlastchecked/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/getlastchecked/index.md
new file mode 100644
index 00000000000000..c122e1b8bfa24b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/getlastchecked/index.md
@@ -0,0 +1,56 @@
+---
+title: getLastChecked
+slug: Mozilla/Add-ons/WebExtensions/API/captivePortal/getLastChecked
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+返回自上次请求完成以来的时间。
+
+## 语法
+
+```js-nolint
+let state = browser.captivePortal.getLastChecked()
+```
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，完成时其会兑现一个表示时间的整数，单位为毫秒。
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/getstate/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/getstate/index.md
new file mode 100644
index 00000000000000..2e943f713530da
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/getstate/index.md
@@ -0,0 +1,56 @@
+---
+title: getState
+slug: Mozilla/Add-ons/WebExtensions/API/captivePortal/getState
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+返回门户状态，状态值可以是 `unknown`、`not_captive`、`unlocked_portal` 或 `locked_portal` 之一。
+
+## 语法
+
+```js-nolint
+let state = browser.captivePortal.getState()
+```
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，完成时其会兑现一个字符串，该字符串包含 `unknown`、`not_captive`、`unlocked_portal` 或 `locked_portal` 之一。
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/index.md
new file mode 100644
index 00000000000000..7b84852ed9b815
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/index.md
@@ -0,0 +1,67 @@
+---
+title: captivePortal
+slug: Mozilla/Add-ons/WebExtensions/API/captivePortal
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
+---
+
+{{AddonSidebar}}
+
+确定用户连接的强制门户状态。强制门户页面是在用户首次连接到 Wi-Fi 网络时显示的网页。用户在强制门户页面上提供信息或执行操作以获得更广泛的网络资源访问权限，例如接受条款和条件或进行付款。
+
+使用此 API 需要具有“captivePortal”[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+## 属性
+
+- {{WebExtAPIRef("captivePortal.canonicalURL")}}
+ - : 返回强制门户检测页面的规范 URL。只读。
+
+## 函数
+
+- {{WebExtAPIRef("captivePortal.getLastChecked()")}}
+ - : 返回自上次请求完成以来的时间，以毫秒为单位。
+- {{WebExtAPIRef("captivePortal.getState()")}}
+ - : 返回门户状态，值可以是 `unknown`、`not_captive`、`unlocked_portal` 或 `locked_portal` 之一。
+
+## 事件
+
+- {{WebExtAPIRef("captivePortal.onConnectivityAvailable")}}
+ - : 当强制门户服务确定用户可以连接到互联网时触发。
+- {{WebExtAPIRef("captivePortal.onStateChanged")}}
+ - : 当强制门户状态改变时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/onconnectivityavailable/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/onconnectivityavailable/index.md
new file mode 100644
index 00000000000000..65c812f92f9064
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/onconnectivityavailable/index.md
@@ -0,0 +1,86 @@
+---
+title: onConnectivityAvailable
+slug: Mozilla/Add-ons/WebExtensions/API/captivePortal/onConnectivityAvailable
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当强制门户服务确定用户可以连接到互联网时触发。
+
+## 语法
+
+```js-nolint
+browser.captivePortal.onConnectivityAvailable.addListener(listener)
+browser.captivePortal.onConnectivityAvailable.removeListener(listener)
+browser.captivePortal.onConnectivityAvailable.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到此事件。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 当此事件发生时调用的函数。函数被传入此参数：
+
+ - `status`
+ - : `string`。服务的状态，可能是 `captive`（如果存在未锁定的强制门户）或 `clear`（如果未检测到强制门户）。
+
+## 示例
+
+处理用户连接互联网能力的变化：
+
+```js
+function handleConnectivity(connectivityInfo) {
+ console.log(`门户状态：${connectivityInfo.status}`);
+}
+
+browser.captivePortal.onConnectivityAvailable.addListener(handleConnectivity);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/onstatechanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/onstatechanged/index.md
new file mode 100644
index 00000000000000..985c8552a5f3fc
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/captiveportal/onstatechanged/index.md
@@ -0,0 +1,86 @@
+---
+title: onStateChanged
+slug: Mozilla/Add-ons/WebExtensions/API/captivePortal/onStateChanged
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当强制门户状态发生变化时触发。
+
+## 语法
+
+```js-nolint
+browser.captivePortal.onStateChanged.addListener(listener)
+browser.captivePortal.onStateChanged.removeListener(listener)
+browser.captivePortal.onStateChanged.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 将监听器添加到此事件。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 当此事件发生时调用的函数。函数被传入此参数：
+
+ - `details`
+ - : `string`。强制门户状态，为 `unknown`、`not_captive`、`unlocked_portal` 或 `locked_portal` 之一。
+
+## 示例
+
+处理强制门户状态变化：
+
+```js
+function handlePortalStatus(portalstatusInfo) {
+ console.log(`强制门户状态现在是：${portalstatusInfo.details}`);
+}
+
+browser.captivePortal.onStateChanged.addListener(handlePortalStatus);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.md
index 8355c849901b83..e4d51029c3756b 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.md
@@ -1,19 +1,21 @@
---
title: clipboard
slug: Mozilla/Add-ons/WebExtensions/API/clipboard
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
---
{{AddonSidebar}}
-WebExtention 的 `clipboard` API 增加了一个将图像复制到剪贴板的函数。目前，这个 API 仅支持复制图像，但我们期望它未来支持复制文本和 HTML（译者注：原文如此，可能是指被支持复制富内容之后的标准剪贴板 API 取代）。
+WebExtension 的 `clipboard` API（与[标准剪贴板 API](/zh-CN/docs/Web/API/Clipboard_API) 不同）使扩展能够将项目复制到系统剪贴板。目前，WebExtension `clipboard` API 仅支持复制图像，但计划在未来支持复制文本和 HTML。
-这个 WebExtension API 之所以存在，主要是因为标准的 Web 剪贴板 API [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API) 不支持将图像写入剪贴板。一旦标准剪贴板 API 对非文本剪贴板内容的支持进入通用状态，则此 API 可能会被弃用。
+WebExtension `clipboard` API 之所以存在，主要是因为标准剪贴板 API [不支持将图像写入剪贴板](https://w3c.github.io/clipboard-apis/#writing-to-clipboard)。一旦标准剪贴板 API 对非文本剪贴板内容的支持进入广泛使用，则 WebExtension `clipboard` API 可能会被弃用。
-Reading from the clipboard is not supported by this API, because the clipboard can already be read using the standard web platform APIs. See [Interacting with the clipboard](/zh-CN/Add-ons/WebExtensions/Interact_with_the_clipboard#Reading_from_the_clipboard).
+此 API 不支持从剪贴板读取，因为剪贴板已经可以使用标准的 web 平台 API 进行读取。请参阅[与剪贴板交互](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#读取系统粘贴板)。
-This API is based on Chrome's [`clipboard`](https://developer.chrome.com/apps/clipboard) API, but that API is only available for Chrome apps, not extensions.
+此 API 基于 Chrome 的 [`clipboard`](https://developer.chrome.com/docs/extensions/reference/clipboard/) API，但该 API 仅适用于 Chrome 应用，不适用于扩展。
-To use this API you need the `"clipboardWrite"` extension [permission](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions).
+要使用此 API，你需要有 `"clipboardWrite"` 扩展[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
## 函数
@@ -22,6 +24,8 @@ To use this API you need the `"clipboardWrite"` extension [permission](/zh-CN/do
## 浏览器兼容性
+{{WebExtExamples("h2")}}
+
{{Compat}}
-> **备注：** 此 API 基于 Chromium 的 [`chrome.clipboard`](https://developer.chrome.com/apps/clipboard) API.
+> **备注：** 此 API 基于 Chromium 的 [`chrome.clipboard`](https://developer.chrome.com/apps/clipboard) API。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/commands/command/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/command/index.md
new file mode 100644
index 00000000000000..2f86257247be46
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/command/index.md
@@ -0,0 +1,31 @@
+---
+title: Command
+slug: Mozilla/Add-ons/WebExtensions/API/commands/Command
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+有关命令的信息。这包含在 [`commands` manifest.json 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)中指定的命令信息。
+
+调用 {{WebExtAPIRef('commands.getAll()')}} 将返回包含这些对象的数组。
+
+## 类型
+
+这些类型的值是对象。它们包含以下属性：
+
+- `name` {{optional_inline}}
+ - : `string`。命令的名称。这将传递给 {{WebExtAPIRef('commands.onCommand')}} 事件监听器。
+- `description` {{optional_inline}}
+ - : `string`。命令的描述。主要用于向用户解释该命令的作用。
+- `shortcut` {{optional_inline}}
+ - : `string`。用于执行此命令的键，指定为类似“Ctrl+Shift+Y”的字符串。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.commands`](https://developer.chrome.com/docs/extensions/reference/commands/) API。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/commands/getall/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/getall/index.md
new file mode 100644
index 00000000000000..6cb73042ddb1c2
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/getall/index.md
@@ -0,0 +1,47 @@
+---
+title: getAll()
+slug: Mozilla/Add-ons/WebExtensions/API/commands/getAll
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+获取你已使用 [`commands` manifest.json 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)注册的所有扩展命令。
+
+该命令会返回一个 {{WebExtAPIRef('commands.Command')}} 对象的数组。或者，如果你使用基于 promise 版本的 API——`browser.commands.getAll()`，该命令将被传递到 [`Promise.then()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 的 `onFulfilled` 参数中。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let getCommands = browser.commands.getAll();
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含 {{WebExtAPIRef('commands.Command')}} 对象的数组，每个对象对应扩展注册的一个命令。如果没有注册命令，数组将为空。
+
+## 示例
+
+```js
+function logCommands(commands) {
+ commands.forEach((command) => {
+ console.log(command);
+ });
+}
+
+let getCommands = browser.commands.getAll();
+getCommands.then(logCommands);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.commands`](https://developer.chrome.com/docs/extensions/reference/commands/) API。
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/commands/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/index.md
new file mode 100644
index 00000000000000..b5e813f062be3b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/index.md
@@ -0,0 +1,69 @@
+---
+title: commands
+slug: Mozilla/Add-ons/WebExtensions/API/commands
+l10n:
+ sourceCommit: b4fd56711aebae6dcd86ad6c5bf1ce25f52347d4
+---
+
+{{AddonSidebar}}
+
+监听用户执行你已使用 [`commands` manifest.json 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)注册的命令。
+
+## 类型
+
+- {{WebExtAPIRef("commands.Command")}}
+ - : 表示命令的对象。此对象包含在 [`commands` manifest.json 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)中为命令指定的信息。
+
+## 函数
+
+- {{WebExtAPIRef("commands.getAll")}}
+ - : 获取此扩展程序的所有已注册命令。
+- {{WebExtAPIRef("commands.reset")}}
+ - : 重置给定命令的描述和快捷键为清单（manifest）键中给定的值。
+- {{WebExtAPIRef("commands.update")}}
+ - : 更改给定命令的描述或快捷键。
+
+## 事件
+
+- {{WebExtAPIRef("commands.onChanged")}}
+ - : 当命令的快捷键发生更改时触发。
+- {{WebExtAPIRef("commands.onCommand")}}
+ - : 当使用关联的快捷键执行命令时触发。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.commands`](https://developer.chrome.com/docs/extensions/reference/commands/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/commands/onchanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/onchanged/index.md
new file mode 100644
index 00000000000000..0ce8507d4aa45e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/onchanged/index.md
@@ -0,0 +1,68 @@
+---
+title: onChanged
+slug: Mozilla/Add-ons/WebExtensions/API/commands/onChanged
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+在命令的键盘快捷键更改时触发。
+
+监听器将接收到一个包含命令名称、新的激活快捷键和旧的快捷键的对象。
+
+## 语法
+
+```js-nolint
+browser.commands.onChanged.addListener(listener)
+browser.commands.onChanged.removeListener(listener)
+browser.commands.onChanged.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到这个事件。
+- `removeListener(listener)`
+ - : 停止监听这个事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到这个事件。若在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 当命令的快捷键更改时调用的函数。该函数接收以下参数：
+
+ - `changeInfo`
+
+ - : `object`。包含命令名称、新的激活快捷键和旧的快捷键的对象。
+
+ - `name`
+ - : `string`。命令的名称。这与在 [manifest.json 条目](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)中命令给出的名称相匹配。
+ - `newShortcut`
+ - : `string`。命令的新激活快捷键，若无激活快捷键则为空。
+ - `oldShortcut`
+ - : `string`。命令的旧激活快捷键，若无激活快捷键则为空。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+你可以像这样记录命令快捷键的更改：
+
+```js
+function handleChanged(changeInfo) {
+ console.log(`${changeInfo.name} 的快捷键已更改`);
+ console.log(`从：${changeInfo.oldShortcut}`);
+ console.log(`到：${changeInfo.newShortcut}`);
+}
+
+browser.commands.onChanged.addListener(handleChanged);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/commands/oncommand/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/oncommand/index.md
new file mode 100644
index 00000000000000..1cdfbbce3b13ed
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/oncommand/index.md
@@ -0,0 +1,75 @@
+---
+title: onCommand
+slug: Mozilla/Add-ons/WebExtensions/API/commands/onCommand
+l10n:
+ sourceCommit: cc844647f646395fa602816586640c77017898cf
+---
+
+{{AddonSidebar}}
+
+当使用相关的键盘快捷键执行命令时触发。
+
+监听器会接收到命令的名称。这与在其 [manifest.json 条目](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)中给出的名称相匹配。
+
+## 语法
+
+```js-nolint
+browser.commands.onCommand.addListener(listener)
+browser.commands.onCommand.removeListener(listener)
+browser.commands.onCommand.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到这个事件。
+- `removeListener(listener)`
+ - : 停止监听这个事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册到这个事件。若在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 用户输入命令的快捷键时调用的函数。该函数接收以下参数：
+
+ - `name`
+ - : `string`。命令的名称。这与在其 [manifest.json 条目](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)中给出的名称相匹配。
+ - `tab`
+ - : {{WebExtAPIRef('tabs.Tab')}}。输入命令快捷键时激活的标签页。
+
+## 示例
+
+给出这样的 manifest.json 条目：
+
+```json
+"commands": {
+ "toggle-feature": {
+ "suggested_key": {
+ "default": "Ctrl+Shift+Y"
+ },
+ "description": "发送一个“toggle-feature”事件"
+ }
+}
+```
+
+你可以像这样监听这个特定命令：
+
+```js
+browser.commands.onCommand.addListener((command) => {
+ if (command === "toggle-feature") {
+ console.log("切换功能！");
+ }
+});
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.commands`](https://developer.chrome.com/docs/extensions/reference/commands/) API。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/commands/reset/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/reset/index.md
new file mode 100644
index 00000000000000..0212ed320ef549
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/reset/index.md
@@ -0,0 +1,51 @@
+---
+title: commands.reset()
+slug: Mozilla/Add-ons/WebExtensions/API/commands/reset
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+将给定命令的描述和快捷键重置为扩展的 [`commands` manifest.json 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)中指定的值。
+
+这有效地撤销了使用 {{WebExtAPIRef("commands.update()")}} 函数对命令所做的任何更改。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+browser.commands.reset(
+ name // 字符串
+);
+```
+
+### 参数
+
+- `name`
+ - : `string`。要重置的命令的名称，给定 {{WebExtAPIRef("commands.Command")}} 对象的 `name` 属性。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当快捷键已重置时其会兑现且无任何参数。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+当用户点击“reset”按钮时重置名为“my-command”的命令：
+
+```js
+const commandName = "my-command";
+
+function resetShortcut() {
+ browser.commands.reset(commandName);
+}
+
+document.querySelector("#reset").addEventListener("click", resetShortcut);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/commands/update/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/update/index.md
new file mode 100644
index 00000000000000..971636a13d6de9
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/commands/update/index.md
@@ -0,0 +1,64 @@
+---
+title: commands.update()
+slug: Mozilla/Add-ons/WebExtensions/API/commands/update
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+更改给定命令的描述或快捷键。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+browser.commands.update(
+ details // 对象
+);
+```
+
+### 参数
+
+- `details`
+
+ - : `object`。包含以下属性的对象：
+
+ - `name`
+ - : `string`。要更新的命令的名称。这必须与现有命令的名称（例如 {{WebExtAPIRef("commands.Command")}} 对象的 `name` 属性所给出的）匹配。
+ - `description` {{optional_inline}}
+ - : `string`。要为命令设置的新描述。
+ - `shortcut` {{optional_inline}}
+
+ - : `string`。要为命令设置的新快捷键。可以是：
+
+ - 一个空字符串，表示清除快捷键。
+ - 一个与 [`commands` manifest.json 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)格式匹配的字符串，以设置新的快捷键。如果字符串不符合此格式，函数将抛出错误。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，当快捷键更新时其会兑现。如果找不到命令，promise 将被拒绝并出现错误。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+当用户点击“update”时，使用给定的快捷键值更新名为“my-command”的命令：
+
+```js
+const commandName = "my-command";
+
+function updateShortcut() {
+ browser.commands.update({
+ name: commandName,
+ shortcut: document.querySelector("#shortcut").value,
+ });
+}
+
+document.querySelector("#update").addEventListener("click", updateShortcut);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/index.md
index 576f4f3dfdd643..5d0faa20f54f09 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/index.md
@@ -1,19 +1,23 @@
---
title: contentScripts
slug: Mozilla/Add-ons/WebExtensions/API/contentScripts
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
---
{{AddonSidebar}}
-使用此 API 以注册内容脚本。“注册内容脚本”意味着浏览器会将给定的内容脚本插入到每个与给定的 URL 模式相匹配的页面中。
+使用此 API 注册内容脚本。注册内容脚本会指示浏览器将给定的内容脚本插入到与给定 URL 模式匹配的页面中。
-此 API 与 [`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 的 [`"content_scripts"`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键非常相似，但 `"content_scripts"` 键所能注册的内容脚本是固定的，自拓展安装后便不可更改。但通过 `contentScripts` API，拓展可以在运行时动态地注册或取消注册脚本。
+> **备注：** 使用 Manifest V3 或更高版本时，请使用 {{WebExtAPIRef("scripting.registerContentScripts()")}} 注册脚本。
-To use the API, call {{WebExtAPIRef("contentScripts.register()")}} passing in an object defining the scripts to register, the URL patterns, and other options. This returns a [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) that is resolved with a {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} object.
+此 API 与 [`"content_scripts"`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) [`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 键非常相似，不同之处在于，使用 `"content_scripts"` 时，内容脚本和相关模式集自拓展安装之后就是固定的。而使用 `contentScripts` API，扩展程序可以在运行时注册和取消注册脚本。
-The `RegisteredContentScript` object represents the scripts that were registered in the `register()` call. It defines an `unregister()` method that you can use to unregister the content scripts. Content scripts are also unregistered automatically when the page that created them is destroyed. For example, if they are registered from the background page they will be unregistered automatically when the background page is destroyed, and if they are registered from a sidebar or a popup, they will be unregistered automatically when the sidebar or popup is closed.
+要使用此 API，请调用 {{WebExtAPIRef("contentScripts.register()")}}，传入一个定义要注册的脚本、URL 模式和其他选项的对象。这会返回一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现为一个 {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} 对象。
-没有与 `contentScripts` API 相关联的权限，但是拓展必须拥有与其试图通过 `register()` 注册的脚本的匹配模式相对应的[主机权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions)，才能实现注入。
+`RegisteredContentScript` 对象表示这是在 `register()` 调用中注册的脚本。它定义了一个 `unregister()` 方法，你可以使用它来取消注册内容脚本。当创建它们的页面被销毁时，内容脚本也会自动取消注册。例如，如果它们是从背景页注册的，当背景页被销毁时，它们会自动取消注册；如果它们是从侧边栏或弹出窗口注册的，当侧边栏或弹出窗口关闭时，它们会自动取消注册。
+
+没有与 `contentScripts` API 相关联的权限，但是拓展必须拥有与其试图通过 `register()` 注册的脚本的匹配模式相对应的[主机权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#主机权限)。
## 类型
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/register/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/register/index.md
new file mode 100644
index 00000000000000..ece5c43a7ee6dd
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/register/index.md
@@ -0,0 +1,96 @@
+---
+title: contentScripts.register()
+slug: Mozilla/Add-ons/WebExtensions/API/contentScripts/register
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+使用此函数注册一个或多个内容脚本。
+
+它接受一个参数，该参数是一个对象，其属性类似于 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 清单（manifest）键中给出的对象（但请注意，`content_scripts` 是对象数组，而传递给 `register()` 的参数是一个单独的对象）。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let registering = browser.contentScripts.register(
+ contentScriptOptions // 对象
+)
+```
+
+### 参数
+
+- `contentScriptOptions`
+
+ - : `object`。表示要注册的内容脚本的 `RegisteredContentScriptOptions` 对象。它的语法与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 清单键数组中的对象类似。不同之处在于：
+
+ - 属性名称使用{{Glossary("camel_case", "驼峰命名法")}}，而不是{{Glossary("snake_case", "蛇形命名法")}}——例如，使用 `excludeMatches` 而不是 `exclude_matches`。
+ - `js` 和 `css` 属性允许你注册字符串和 URL，因此它们的语法必须区分这些类型。
+
+ `RegisteredContentScriptOptions` 对象具有以下属性：
+
+ - `allFrames` {{optional_inline}}
+ - : 与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键中的 `all_frames` 相同。
+ - `cookieStoreId` {{optional_inline}}
+ - : 一个字符串或字符串数组。在属于一个或多个 cookie 存储 ID 的标签页中注册内容脚本。这使得脚本可以为所有默认或非场景身份标签页、隐私浏览标签页（如果[扩展在隐私浏览中启用](https://support.mozilla.org/zh-CN/kb/extensions-private-browsing)）、[场景身份](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities)的标签页或这些的组合。有关详细信息，请参见[使用场景身份](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities)。
+ - `css` {{optional_inline}}
+ - : 对象数组。每个对象有一个名为 `file` 的属性，它是一个从扩展的 manifest.json 开始指向要注册的 CSS 文件的 URL，或一个名为 `code` 的属性，它是要注册的一些 CSS 代码。
+ - `excludeGlobs` {{optional_inline}}
+ - : 与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键中的 `exclude_globs` 相同。
+ - `excludeMatches` {{optional_inline}}
+ - : 与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键中的 `exclude_matches` 相同。
+ - `includeGlobs` {{optional_inline}}
+ - : 与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键中的 `include_globs` 相同。
+ - `js` {{optional_inline}}
+ - : 对象数组。每个对象有一个名为 `file` 的属性，它是一个从扩展的 manifest.json 开始指向要注册的 JavaScript 文件的 URL，或一个名为 `code` 的属性，它是要注册的一些 JavaScript 代码。
+ - `matchAboutBlank` {{optional_inline}}
+ - : 与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键中的 `match_about_blank` 相同。
+ - `matches`
+ - : 与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键中的 `matches` 相同。
+ - `runAt` {{optional_inline}}
+ - : 与 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 键中的 `run_at` 相同。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个 {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} 对象，该对象可以用来取消注册内容脚本。
+
+当前，当相关的扩展页面（从中注册了内容脚本）被卸载时，内容脚本会自动取消注册。因此你应该在一个会在你希望让内容脚本保持注册状态的时间内持续存在扩展页面中注册内容脚本。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例为所有 `.org` URL 注册 `defaultCode` 内容脚本：
+
+```js
+const defaultHosts = "*://*.org/*";
+const defaultCode = "document.body.innerHTML = '<h1>这个页面被吃掉了<h1>'";
+
+async function register(hosts, code) {
+ return await browser.contentScripts.register({
+ matches: [hosts],
+ js: [{ code }],
+ runAt: "document_idle",
+ });
+}
+
+let registered = register(defaultHosts, defaultCode);
+```
+
+此代码注册位于 content_scripts/example.js 的 JS 文件：
+
+```js
+const scriptObj = await browser.contentScripts.register({
+ js: [{ file: "/content_scripts/example.js" }],
+ matches: ["<all_urls>"],
+ allFrames: true,
+ runAt: "document_start",
+});
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md
new file mode 100644
index 00000000000000..46c5f453bf1ee5
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md
@@ -0,0 +1,56 @@
+---
+title: contentScripts.RegisteredContentScript
+slug: Mozilla/Add-ons/WebExtensions/API/contentScripts/RegisteredContentScript
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+`RegisteredContentScript` 是通过调用 {{WebExtAPIRef("contentScripts.register()")}} 返回的，表示在该调用中注册的内容脚本。
+
+它定义了一个函数 {{WebExtAPIRef("contentScripts.RegisteredContentScript.unregister", "unregister()")}}，可以用于取消注册内容脚本。
+
+> **备注：** 如果此对象被销毁（例如因为超出了其作用域），那么内容脚本将自动取消注册，因此你应该保持对此对象的引用，以便内容脚本保持注册的状态。
+
+## 方法
+
+- {{WebExtAPIRef("contentScripts.RegisteredContentScript.unregister","unregister()")}}
+ - : 取消注册此对象表示的内容脚本。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此代码在单击浏览器操作时切换注册的内容脚本：
+
+```js
+let registered = null;
+
+async function register() {
+ registered = await browser.contentScripts.register({
+ matches: ["*://*.org/*"],
+ js: [
+ {
+ code: "document.body.innerHTML = '<h1>这个页面被吃掉了<h1>'",
+ },
+ ],
+ runAt: "document_idle",
+ });
+}
+
+function toggle() {
+ if (registered) {
+ registered.unregister();
+ registered = null;
+ } else {
+ register();
+ }
+}
+
+browser.browserAction.onClicked.addListener(toggle);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md
new file mode 100644
index 00000000000000..8a6d13447ac810
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md
@@ -0,0 +1,67 @@
+---
+title: contextualIdentities.ContextualIdentity
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/ContextualIdentity
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+**`contextualIdentities.ContextualIdentity`** 类型描述了单个场景身份。
+
+## 类型
+
+这种类型的值是对象，包含以下属性：
+
+- `cookieStoreId`
+
+ - : `string`。身份的 cookie 存储 ID。由于场景身份不共享 cookie 存储，因此这作为唯一标识符。
+
+- `color`
+
+ - : `string`。身份的颜色。这将在属于该身份的标签页中显示。以下值是有效的：
+
+ - "blue"
+ - "turquoise"
+ - "green"
+ - "yellow"
+ - "orange"
+ - "red"
+ - "pink"
+ - "purple"
+ - "toolbar"
+
+ 值“toolbar”代表一个依赖主题的颜色。颜色为“toolbar”的身份将显示为与工具栏文本颜色（对应于[主题键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors) `"toolbar_field_text"`）相同的颜色。
+
+- `colorCode`
+
+ - : `string`。表示用于该身份的确切颜色的十六进制代码。例如：`"#37adff"`。在颜色为“toolbar”的特殊情况下，无论显示的颜色如何，`colorCode` 始终为 `"#7c7c7d"`。
+
+- `icon`
+
+ - : `string`。身份的图标名称。这将在属于该身份的标签页的 URL 栏中显示。以下值是有效的：
+ - "fingerprint"
+ - "briefcase"
+ - "dollar"
+ - "cart"
+ - "circle"
+ - "gift"
+ - "vacation"
+ - "food"
+ - "fruit"
+ - "pet"
+ - "tree"
+ - "chill"
+ - "fence"
+
+- `iconUrl`
+
+ - : `string`。指向身份图标的完整 resource:// URL。例如：“resource://usercontext-content/fingerprint.svg”。
+
+- `name`
+
+ - : `string`。身份的名称。这将在属于该身份的标签页的 URL 栏中显示。注意，名称不必唯一。
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/create/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/create/index.md
new file mode 100644
index 00000000000000..c85d00f67dd4cd
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/create/index.md
@@ -0,0 +1,94 @@
+---
+title: contextualIdentities.create()
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/create
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+创建一个新的场景身份。创建后，用户将能够创建属于这个场景身份的新标签，就像他们使用内置身份一样。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let createContext = browser.contextualIdentities.create(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : `object`。包含新场景身份属性的对象。这包含以下属性：
+
+ - `name`
+
+ - : `string`。新标识的名称。这将显示在浏览器的用户界面中，使用户能够打开属于此身份的新标签。它还将在属于此身份的标签的 URL 栏中显示。
+
+ - `color`
+
+ - : `string`。与新身份关联的颜色。这将用于突出显示属于此身份的标签。你可以在此处提供以下任何值：
+
+ - "blue"
+ - "turquoise"
+ - "green"
+ - "yellow"
+ - "orange"
+ - "red"
+ - "pink"
+ - "purple"
+ - "toolbar"
+
+ - `icon`
+
+ - : `string`。显示在属于此身份的标签的 URL 栏中的图标名称。你可以在此处提供以下任何值：
+
+ - "fingerprint"
+ - "briefcase"
+ - "dollar"
+ - "cart"
+ - "circle"
+ - "gift"
+ - "vacation"
+ - "food"
+ - "fruit"
+ - "pet"
+ - "tree"
+ - "chill"
+ - "fence"
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个描述新身份的 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}}。如果场景身份特性未启用，则该 promise 将被拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例创建一个新的场景身份并记录其 cookie 存储 ID：
+
+```js
+function onCreated(context) {
+ console.log(`新身份的 ID 是：${context.cookieStoreId}。`);
+}
+
+function onError(e) {
+ console.error(e);
+}
+
+browser.contextualIdentities
+ .create({
+ name: "my-thing",
+ color: "purple",
+ icon: "briefcase",
+ })
+ .then(onCreated, onError);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/get/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/get/index.md
new file mode 100644
index 00000000000000..f4e092a1b20a9e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/get/index.md
@@ -0,0 +1,55 @@
+---
+title: contextualIdentities.get()
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/get
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+获取给定其 cookie 存储 ID 的场景身份的信息。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let getContext = browser.contextualIdentities.get(
+ cookieStoreId // 字符串
+)
+```
+
+### 参数
+
+- `cookieStoreId`
+ - : `string`。这个场景身份的 cookie 存储 ID。因为场景身份都有自己的 cookie 存储，所以这充当场景身份本身的标识符。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个描述该身份的 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}}。如果找不到身份或场景身份特性未启用，则该 promise 将被拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例尝试检索 ID 为“firefox-container-1”的场景身份：
+
+```js
+function onGot(context) {
+ if (!context) {
+ console.error("未找到场景");
+ } else {
+ console.log(`名字：${context.name}`);
+ }
+}
+
+function onError(e) {
+ console.error(e);
+}
+
+browser.contextualIdentities.get("firefox-container-1").then(onGot, onError);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/index.md
new file mode 100644
index 00000000000000..8f472cb3e80a01
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/index.md
@@ -0,0 +1,63 @@
+---
+title: contextualIdentities
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities
+l10n:
+ sourceCommit: ec8d5627e822d866f350d9d8c06f0df58948015e
+---
+
+{{AddonSidebar}}
+
+与场景身份一起使用：列出、创建、删除和更新场景身份。
+
+“场景身份”，也称为“容器”，是浏览器的一项特性，其允许用户在浏览网页时使用多个身份，并保持身份的隔离。例如，用户可能认为他们的“工作身份”与他们的“个人身份”是分开的，并且不希望在这两个上下文之间共享 cookie。
+
+通过场景身份特性，每个场景身份都有一个名称、颜色和图标。可以为新标签分配一个身份，然后其名称、图标和颜色会显示在地址栏中。在内部，每个身份都有一个不与其他标签共享的 cookie 存储。这个 cookie 存储由此 API 和其他 API 中的 `cookieStoreId` 标识。
+
+
+
+场景身份是 Firefox 中的一项实验性特性，默认情况下仅在 Firefox Nightly 中启用。要在 Firefox 的其他版本中启用它，请将 `privacy.userContext.enabled` 首选项设置为 `true`。请注意，尽管场景身份在 Android 版 Firefox 中可用，但在此浏览器版本中没有配套的用户界面。
+
+在 Firefox 57 之前，仅当启用了场景身份特性时，才可使用 `contextualIdentities` API。如果扩展尝试在未启用特性的情况下使用 `contextualIdentities` API，则调用方法返回的 promise 会兑现为 `false`。
+
+从 Firefox 57 开始，如果安装了使用 `contextualIdentities` API 的扩展程序，则将自动启用场景身份特性。但请注意，用户仍然可以使用“privacy.userContext.enabled”首选项禁用该特性。如果发生这种情况，则调用 `contextualIdentities` 的方法返回的 promise 将以错误消息拒绝。
+
+有关更多信息，请参见[使用场景身份](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities)。
+
+其他浏览器不支持场景身份。
+
+要使用此 API，你需要在你的 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中包含“contextualIdentities”和“cookies”[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+## 类型
+
+- {{WebExtAPIRef("contextualIdentities.ContextualIdentity")}}
+ - : 包含有关场景身份的信息。
+
+## 函数
+
+- {{WebExtAPIRef("contextualIdentities.create()")}}
+ - : 创建一个新的场景身份。
+- {{WebExtAPIRef("contextualIdentities.get()")}}
+ - : 根据给定的 cookie 存储 ID 检索场景身份。
+- {{WebExtAPIRef("contextualIdentities.move()")}}
+ - : 将一个或多个场景身份移动到场景身份列表中。
+- {{WebExtAPIRef("contextualIdentities.query()")}}
+ - : 检索所有场景身份，或具有特定名称的所有场景身份。
+- {{WebExtAPIRef("contextualIdentities.update()")}}
+ - : 更新现有场景身份的属性。
+- {{WebExtAPIRef("contextualIdentities.remove()")}}
+ - : 删除一个场景身份。
+
+## 事件
+
+- {{WebExtAPIRef("contextualIdentities.onCreated")}}
+ - : 当创建场景身份时触发。
+- {{WebExtAPIRef("contextualIdentities.onRemoved")}}
+ - : 当删除场景身份时触发。
+- {{WebExtAPIRef("contextualIdentities.onUpdated")}}
+ - : 当一个或多个场景身份的属性更新时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/move/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/move/index.md
new file mode 100644
index 00000000000000..d2f9193907f19e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/move/index.md
@@ -0,0 +1,92 @@
+---
+title: contextualIdentities.move()
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/move
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+将一个或多个场景身份移动到场景身份列表中的新位置。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let moveContainers = browser.contextualIdentities.move(
+ cookieStoreIds, // 字符串或字符串数组
+ position // 整数
+)
+```
+
+### 参数
+
+- `cookieStoreIds`
+
+ - : 字符串或字符串数组。要移动的场景身份的 cookie 存储 ID 的有序列表。
+
+- `position`
+
+ - : `integer`。将 `cookieStoreIds` 移动到场景身份列表中的位置。使用基于零的索引；`0` 表示第一个位置。`-1` 表示将项目移动到列表末尾。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在场景身份重新排序完成时其会兑现。如果请求无效或未启用场景身份特性，则 promise 将被拒绝。
+
+## 示例
+
+此示例将第一个身份移动到末尾，然后再移回到开始位置。
+
+```js
+let identities = await browser.contextualIdentities.query({});
+let firstId = identities[0].cookieStoreId;
+
+// 将第一个身份移动到末尾。
+await browser.contextualIdentities.move(firstId, -1);
+
+// 再将身份移回到开始位置。
+await browser.contextualIdentities.move(firstId, 0);
+```
+
+另一种将第一个身份移动到末尾的方法是将所有其他身份移动到开始位置。
+
+```js
+let identities = await browser.contextualIdentities.query({});
+let ids = identities.map((identity) => identity.cookieStoreId);
+// 创建一个不包含第一个项目的数组：
+let otherIds = ids.slice(1);
+
+// 将其它身份移动到开始位置，
+// 实际上将第一个身份放在了末尾。
+await browser.contextualIdentities.move(otherIds, 0);
+```
+
+此示例将“个人”身份移动到“工作”身份之前。此示例假设存在具有这些名称的容器。在自定义或本地化（非英文）Firefox 实例中可能会不存在这些容器。
+
+```js
+let identities = await browser.contextualIdentities.query({});
+
+// 找到名称为“个人”的容器的索引和 ID。
+let personalIndex = identities.findIndex((ci) => ci.name === "个人");
+if (personalIndex === -1) {
+ throw new Error("“个人”容器未找到！");
+}
+let personalId = identities[personalIndex].cookieStoreId;
+
+// 找到名称为“工作”的容器的索引。
+let workIndex = identities.findIndex((identity) => identity.name === "工作");
+if (workIndex === -1) {
+ throw new Error("“工作”容器未找到！");
+}
+
+if (personalIndex < workIndex) {
+ // 当“个人”身份移动时，所有后续身份向左移动一个位置。为了将“个人”身份放在“工作”身份之前，我们应当减去一个。
+ workIndex--;
+}
+await browser.contextualIdentities.move(personalId, workIndex);
+```
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md
new file mode 100644
index 00000000000000..1dea24a6d7ba3d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md
@@ -0,0 +1,82 @@
+---
+title: contextualIdentities.onCreated
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onCreated
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当创建新的场景身份时触发事件。场景身份可以由扩展使用 `contextualIdentities` API 创建，也可以由用户直接通过浏览器的用户界面创建。
+
+## 语法
+
+```js-nolint
+browser.contextualIdentities.onCreated.addListener(listener)
+browser.contextualIdentities.onCreated.removeListener(listener)
+browser.contextualIdentities.onCreated.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到这个事件。
+- `removeListener(listener)`
+ - : 停止监听这个事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册为此事件的监听器。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+ - : 当事件发生时调用的函数。该函数接收以下参数：
+ - `changeInfo`
+ - : `object`。包含单个属性 `contextualIdentity` 的对象，它是一个表示创建的身份的 {{WebExtAPIRef("contextualIdentities.ContextualIdentity")}} 对象。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+function handleCreated(changeInfo) {
+ console.log(`已创建：${changeInfo.contextualIdentity.name}`);
+}
+
+browser.contextualIdentities.onCreated.addListener(handleCreated);
+```
+
+{{WebExtExamples}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md
new file mode 100644
index 00000000000000..0c7c60fbb604e9
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md
@@ -0,0 +1,82 @@
+---
+title: contextualIdentities.onRemoved
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onRemoved
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当删除一个场景身份时触发事件。场景身份可以由扩展使用 `contextualIdentities` API 删除，也可以由用户直接通过浏览器的用户界面删除。
+
+## 语法
+
+```js-nolint
+browser.contextualIdentities.onRemoved.addListener(listener)
+browser.contextualIdentities.onRemoved.removeListener(listener)
+browser.contextualIdentities.onRemoved.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到这个事件。
+- `removeListener(listener)`
+ - : 停止监听这个事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册为此事件的监听器。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+ - : 当事件发生时调用的函数。该函数接收以下参数：
+ - `changeInfo`
+ - : `object`。包含单个属性 `contextualIdentity` 的对象，它是一个表示被删除的身份的 {{WebExtAPIRef("contextualIdentities.ContextualIdentity")}} 对象。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+function handleRemoved(changeInfo) {
+ console.log(`已删除：${changeInfo.contextualIdentity.name}`);
+}
+
+browser.contextualIdentities.onRemoved.addListener(handleRemoved);
+```
+
+{{WebExtExamples}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onupdated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onupdated/index.md
new file mode 100644
index 00000000000000..6ee2acb87039f0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/onupdated/index.md
@@ -0,0 +1,84 @@
+---
+title: contextualIdentities.onUpdated
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onUpdated
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当场景身份的属性（例如其名称、图标或颜色）发生变化时触发。场景身份可以由扩展使用 `contextualIdentities` API 更新，也可以由用户直接通过浏览器的用户界面更新。
+
+## 语法
+
+```js-nolint
+browser.contextualIdentities.onUpdated.addListener(listener)
+browser.contextualIdentities.onUpdated.removeListener(listener)
+browser.contextualIdentities.onUpdated.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 当此事件发生时调用的函数。该函数传递一个参数：
+
+ - `changeInfo`
+ - : `object`。包含单个属性 `contextualIdentity` 的对象（一个 {{WebExtAPIRef("contextualIdentities.ContextualIdentity")}} 对象表示属性被更新的身份）。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+function handleUpdated(changeInfo) {
+ console.log(`已更新：${changeInfo.contextualIdentity.name}`);
+}
+
+browser.contextualIdentities.onUpdated.addListener(handleUpdated);
+```
+
+{{WebExtExamples}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md
new file mode 100644
index 00000000000000..b98ed92f20bcdb
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md
@@ -0,0 +1,77 @@
+---
+title: contextualIdentities.query()
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/query
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+获取有关所有场景身份的信息，或获取与给定过滤参数匹配的场景身份的信息。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let getContext = browser.contextualIdentities.query(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : `object`。一个用于过滤返回的场景身份的对象。可以包含以下任意属性：
+
+ - `name` {{optional_inline}}
+ - : `string`。仅返回具有此名称的场景身份。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在场景身份查询完成时其会兑现一个 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}} 对象数组，每个对象描述一个身份。如果未启用场景身份特性，则 promise 将被拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+检索所有场景身份，并记录它们的名称：
+
+```js
+function onGot(contexts) {
+ for (const context of contexts) {
+ console.log(`名称：${context.name}`);
+ }
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.contextualIdentities.query({}).then(onGot, onError);
+```
+
+检索所有名称为“my-thing”的场景身份，并记录它们的名称：
+
+```js
+function onGot(contexts) {
+ for (const context of contexts) {
+ console.log(`名称：${context.name}`);
+ }
+}
+
+function onError(error) {
+ console.error(error);
+}
+
+browser.contextualIdentities
+ .query({
+ name: "my-thing",
+ })
+ .then(onGot, onError);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/remove/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/remove/index.md
new file mode 100644
index 00000000000000..486938577fee8f
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/remove/index.md
@@ -0,0 +1,57 @@
+---
+title: contextualIdentities.remove()
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/remove
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+移除给定 cookie 存储 ID 的场景身份。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removeContext = browser.contextualIdentities.remove(
+ cookieStoreId // 字符串
+)
+```
+
+### 参数
+
+- `cookieStoreId`
+ - : `string`。场景身份的 cookie 存储 的 ID。由于每个场景身份都有自己的 cookie 存储，因此这也作为场景身份的标识符。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在场景身份删除完成时其会兑现一个描述已删除身份的 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}} 对象。如果无法找到该身份或未启用场景身份特性，则 promise 将被拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例尝试移除 ID 为“firefox-container-1”的场景身份：
+
+```js
+function onRemoved(context) {
+ if (!context) {
+ console.error("场景未找到");
+ } else {
+ console.log(`已删除身份：${context.cookieStoreId}.`);
+ }
+}
+
+function onError(e) {
+ console.error(e);
+}
+
+browser.contextualIdentities
+ .remove("firefox-container-1")
+ .then(onRemoved, onError);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/update/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/update/index.md
new file mode 100644
index 00000000000000..0891af6b78cd3a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/contextualidentities/update/index.md
@@ -0,0 +1,97 @@
+---
+title: contextualIdentities.update()
+slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/update
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+更新给定 cookie 存储 ID 的场景身份的属性。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let createContext = browser.contextualIdentities.update(
+ cookieStoreId, // 字符串
+ details // 对象
+)
+```
+
+### 参数
+
+- `cookieStoreId`
+ - : `string`。场景身份的 cookie 存储的 ID。由于每个场景身份都有自己的 cookie 存储，因此这也作为场景身份的标识符。
+- `details`
+
+ - : `object`。包含要更改的属性的新值的对象。可以包含以下任意属性：
+
+ - `name` {{optional_inline}}
+
+ - : `string`。身份的新名称。这将显示在浏览器的用户界面中，用户可以在该身份中打开新标签页。它还会显示在属于该身份的标签页的 URL 栏中。
+
+ - `color` {{optional_inline}}
+
+ - : `string`。身份的新颜色。这将用于突出显示属于该身份的标签页。可以提供以下任意值：
+
+ - "blue"
+ - "turquoise"
+ - "green"
+ - "yellow"
+ - "orange"
+ - "red"
+ - "pink"
+ - "purple"
+ - "toolbar"
+
+ - `icon` {{optional_inline}}
+
+ - : `string`。身份的新图标。可以提供以下任意值：
+
+ - "fingerprint"
+ - "briefcase"
+ - "dollar"
+ - "cart"
+ - "circle"
+ - "gift"
+ - "vacation"
+ - "food"
+ - "fruit"
+ - "pet"
+ - "tree"
+ - "chill"
+ - "fence"
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在更新身份完成时其会兑现一个描述已更新身份的 {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}} 对象。如果无法找到该身份或未启用场景身份特性，则 promise 被拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例将 ID 为“firefox-container-1”的上下文身份更新为具有新名称、新颜色和新图标：
+
+```js
+function onUpdated(context) {
+ console.log(`新身份的名称：${context.name}.`);
+}
+
+function onError(e) {
+ console.error(e);
+}
+
+browser.contextualIdentities
+ .update("firefox-container-1", {
+ name: "my-thing",
+ color: "purple",
+ icon: "briefcase",
+ })
+ .then(onUpdated, onError);
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/cookiestore/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/cookiestore/index.md
new file mode 100644
index 00000000000000..f78d59665a6cb1
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/cookiestore/index.md
@@ -0,0 +1,88 @@
+---
+title: cookies.CookieStore
+slug: Mozilla/Add-ons/WebExtensions/API/cookies/CookieStore
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("cookies")}} API 的 `CookieStore` 类型用于表示浏览器中的一个 cookie 存储。
+
+不同浏览模式的窗口可能会使用不同的 cookie 存储。例如，隐私浏览/无痕模式窗口使用的 cookie 存储与非无痕/隐私窗口使用的 cookie 存储是分开的。此外，在 Firefox 中使用[容器标签页](https://wiki.mozilla.org/Security/Contextual_Identity_Project/Containers)时，一个窗口可能会有多个 cookie 存储。
+
+有关 cookie 存储的更多信息，请参见[使用 Cookies API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API#cookie_存储)。
+
+## 类型
+
+此类型的值是对象，可以包含以下属性：
+
+- `id`
+ - : 一个表示 cookie 存储的唯一标识符的 `string`。
+- `incognito` {{optional_inline}}
+ - : 一个布尔值，指示这是一个无痕 cookie 存储。此属性在 Chrome 或 Safari 中不受支持。不过，由于 Chrome 中无痕 cookie 存储的 `id` 值始终为“1”，你可以借此来识别这一存储。
+- `tabIds`
+ - : 一个整型数（`integer`）的数组，标识共享此 cookie 存储的所有浏览器标签页。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+在以下代码片段中，{{WebExtAPIRef("cookies.getAllCookieStores()")}} 方法用于检索浏览器中当前可用的所有 cookie 存储，并打印出每个 cookie 存储的 ID 以及当前共享对应的 cookie 存储的标签页。
+
+```js
+function logStores(cookieStores) {
+ for (const store of cookieStores) {
+ console.log(`Cookie 存储：${store.id}\n标签页 ID：${store.tabIds}`);
+ }
+}
+
+browser.cookies.getAllCookieStores().then(logStores);
+```
+
+以下代码片段获取所有 cookie 存储，然后记录存储的总数以及其中多少个存储是无痕模式的。
+
+```js
+browser.cookies.getAllCookieStores().then((stores) => {
+ const incognitoStores = stores.map((store) => store.incognito);
+ console.log(
+ `${stores.length} 个 cookie 存储中有 ${incognitoStores.length} 个是无痕模式的。`,
+ );
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/#type-Cookie) API。本文档源自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/get/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/get/index.md
new file mode 100644
index 00000000000000..04b24a94184cd0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/get/index.md
@@ -0,0 +1,119 @@
+---
+title: cookies.get()
+slug: Mozilla/Add-ons/WebExtensions/API/cookies/get
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("cookies")}} API 的 **`get()`** 方法根据 cookie 的名称和 URL 检索有关单个 cookie 的信息。
+
+如果给定 URL 存在多个具有相同名称的 cookie，将返回路径最长的那个 cookie。对于路径长度相同的 cookie，将返回创建时间最早的那个。如果找不到匹配的 cookie，则返回 `null`。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let getting = browser.cookies.get(
+ details // 对象
+)
+```
+
+## 参数
+
+- `details`
+
+ - : 一个 `object`，包含用于匹配要检索的 cookie 的详细信息。它可以包含以下属性：
+
+ - `firstPartyDomain` {{optional_inline}}
+
+ - : 一个 `string`，表示与要检索的 cookie 关联的第一方域。如果浏览器启用了第一方隔离，则必须提供此属性。请参见[第一方隔离](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies#第一方隔离)。
+
+ - `name`
+
+ - : 一个 `string`，表示要检索的 cookie 的名称。
+
+ - `partitionKey` {{optional_inline}}
+
+ - : 一个 `object`，表示包含 cookie 的[存储分区](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies#存储分区)。包括此对象和 `topLevelSite` 以从分区存储中获取 cookie。否则，从未分区存储中返回 cookie。此对象包含：
+
+ - `topLevelSite` {{optional_inline}}
+ - : 一个 `string`，表示包含 cookie 的顶级站点存储分区的第一方 URL。
+
+ - `storeId` {{optional_inline}}
+
+ - : 一个 `string`，表示要查找的 {{WebExtAPIRef("cookies.CookieStore", "cookie 存储", "", 1)}}的 ID（由 {{WebExtAPIRef("cookies.getAllCookieStores()")}} 返回）。默认情况下，将使用当前执行上下文的 cookie 存储。
+
+ - `url`
+
+ - : 一个 `string`，表示与要检索的 cookie 关联的 URL。此参数可以是完整的 URL，在这种情况下，URL 路径之后的任何数据（例如查询字符串）将被忽略。如果此 URL 的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)未在扩展的 [manifest 文件](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json)中指定，则 API 调用将失败。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含有关 cookie 的详细信息的 {{WebExtAPIRef('cookies.Cookie', 'Cookie')}} 对象，或者如果未找到 cookie，则兑现 `null`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例尝试获取与当前活动标签页的 URL 关联的名为“favorite-color”的 cookie：
+
+```js
+function logCookie(cookie) {
+ if (cookie) {
+ console.log(cookie.value);
+ }
+}
+
+function getCookie(tabs) {
+ let getting = browser.cookies.get({
+ url: tabs[0].url,
+ name: "favorite-color",
+ });
+ getting.then(logCookie);
+}
+
+let getActive = browser.tabs.query({
+ active: true,
+ currentWindow: true,
+});
+getActive.then(getCookie);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/#type-Cookie) API。本文档源自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md
new file mode 100644
index 00000000000000..ce33bd688f52b2
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md
@@ -0,0 +1,80 @@
+---
+title: cookies.getAllCookieStores()
+slug: Mozilla/Add-ons/WebExtensions/API/cookies/getAllCookieStores
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("cookies")}} API 的 **`getAllCookieStores()`** 方法返回所有 cookie 存储的列表。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let gettingStores = browser.cookies.getAllCookieStores()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，会兑现一个表示所有现有 cookie 存储的 {{WebExtAPIRef('cookies.CookieStore')}} 对象的数组。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+在下面的代码片段中，`getAllCookieStores()` 方法用于检索浏览器中当前可用的所有 cookie 存储，并打印每个 cookie 存储的 ID，以及当前共享对应的 cookie 存储的标签页。
+
+```js
+function logStores(cookieStores) {
+ for (const store of cookieStores) {
+ console.log(`Cookie 存储：${store.id}\n标签页 ID：${store.tabIds}`);
+ }
+}
+
+browser.cookies.getAllCookieStores().then(logStores);
+```
+
+`cookieStores` 数组的每个成员都是一个 {{WebExtAPIRef("cookies.CookieStore")}} 对象。
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/#type-Cookie) API。本文档源自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/index.md
index d61ddd29447f02..2b8ee2d889c36d 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/index.md
@@ -1,89 +1,120 @@
---
title: cookies
slug: Mozilla/Add-ons/WebExtensions/API/cookies
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
---
{{AddonSidebar}}
-使用 WebExtensions 获取或设置 cookies, 并且在修改时能够获得通知。
+使扩展能够获取和设置 cookie，并在其更改时得到通知。
-你需要在 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中开启“cookies”[API 权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#API_permissions)，并且需要对应站点的 [主机权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) 才能设置指定站点的 cookie。详细信息查看 [cookie 权限](/zh-CN/Add-ons/WebExtensions/API/cookies#Permissions).
+## 权限
-## 类型
+要使用此 API，扩展必须在其 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中指定“cookies” [API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions)，以及针对希望访问 cookie 的任何站点的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_权限)。扩展可以读取或写入任何可以被与主机权限匹配的 URL 读取或写入的 cookie。例如：
-- {{WebExtAPIRef("cookies.Cookie")}}
- - : 代表一个 HTTP cookie 的信息。
-- {{WebExtAPIRef("cookies.CookieStore")}}
- - : 代表一个保存在浏览器中的 cookie。
-- {{WebExtAPIRef("cookies.OnChangedCause")}}
- - : 代表 cookie 改变的原因。
+- `http://*.example.com/`
-## 方法
+ - : 拥有此主机权限的扩展可以：
-- {{WebExtAPIRef("cookies.get()")}}
- - : 返回一个单独的 cookie 的信息。
-- {{WebExtAPIRef("cookies.getAll()")}}
- - : 返回所有符合筛选条件的 cookies。
-- {{WebExtAPIRef("cookies.set()")}}
- - : 根据给定 cookie 数据设置一个 cookie；如果同样的 cookie 存在讲会覆盖。
-- {{WebExtAPIRef("cookies.remove()")}}
- - : 根据名字删除 cookie。
-- {{WebExtAPIRef("cookies.getAllCookieStores()")}}
- - : 列出所有保存的 cookie。
+ - 读取 `www.example.com` 的任何路径下的非安全 cookie。
+ - 在 `www.example.com` 的任何路径下写入安全或非安全 cookie。
-## 事件句柄
+ 它*不能*：
-- {{WebExtAPIRef("cookies.onChanged")}}
- - : 当设置或删除 cookie 时触发。
+ - 读取 `www.example.com` 的安全 cookie。
-## 权限
+- `http://www.example.com/`
-为了使用这个 API，插件必须在它的 manifest 中指定"cookies" [API 权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#API_permissions)，和它想要使用 cookie 的任何网站的 [host 权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) 。插件将能读取或写入 host 权限中所匹配的 URL 可以读取或写入的任何 cookie。例如：
+ - : 拥有此主机权限的扩展可以：
-- `http://*.example.com/`
+ - 读取 `www.example.com` 的任何路径下的非安全 cookie。
+ - 读取 `.example.com` 的任何路径下的非安全 cookie。
+ - 在 `www.example.com` 的任何路径下写入安全或非安全 cookie。
+ - 在 `.example.com` 的任何路径下写入安全或非安全 cookie。
- - : 拥有这个 host 权限的插件将可以：
+ 它*不能*：
- - 读取一个`www.example.com`任意路径下的不安全 cookie。
- - 写入一个`www.example.com`任意路径下的不安全 cookie。
+ - 读取或写入 `foo.example.com` 的 cookie。
+ - 读取或写入 `foo.www.example.com` 的 cookie。
- _它不能：_
+- `*://*.example.com/`
- - 读取`www.example.com`的安全 cookie。
+ - : 拥有此主机权限的扩展可以：
-- `http://www.example.com/`
+ - 读取或写入任何路径下 `www.example.com` 的安全或非安全 cookie。
- - : 拥有这个 host 权限的插件将可以：
+## 跟踪保护
- - 读取 `www.example.com`任意路径下的不安全 cookie。
- - 读取 `.example.com` 任意路径下的不安全 cookie。
- - 写入 `www.example.com` 任意路径下的安全和不安全 cookie。
- - 写入 `.example.com` 任意路径下的安全和不安全 cookie。
+跟踪器使用第三方 Cookie，即由与你当前所在网站不同的网站设置的 Cookie，来识别你访问的网站。例如：
- 它不能：
+1. 你访问 `a-shopping-site.com`，该网站使用 `ad-tracker.com` 在网络上投放广告。`ad-tracker.com` 设置了一个与 `ad-tracker.com` 域相关联的 Cookie。当你在 `a-shopping-site.com` 上时，`ad-tracker.com` 会接收到你浏览的产品信息。
+2. 现在你访问了 `a-news-site.com`，该网站也使用 `ad-tracker.com` 投放广告。`ad-tracker.com` 读取其 Cookie，并利用从 `a-shopping-site.com` 收集的信息来决定向你显示哪些广告。
- - 读取或写入 `foo.example.com` 的 cookie。
- - 读取或写入 `foo.www.example.com` 的 cookie。
+Firefox 包含拦截跟踪的特性。这些特性会分隔 cookie，以使跟踪器无法关联所访问的网站。因此，在上述示例中，当访问 `a-shopping-site.com` 时，`ad-tracker.com` 无法看到在 `a-news-site.com` 上创建的 cookie。这种保护的首次实现是第一方隔离，现在正在被[动态分区](/zh-CN/docs/Web/Privacy/State_Partitioning#动态分区)取代。
-- `*://*.example.com/`
+> **备注：** 第一方隔离和动态分区不会同时生效。如果用户或扩展程序启用了第一方隔离，它将优先于动态分区。然而，当私密浏览使用动态分区时，普通浏览可能不会分隔 cookie。有关详细信息，请参阅 [Firefox 中分区的状态](/zh-CN/docs/Web/Privacy/State_Partitioning#firefox_中分区的状态)。
- - : 拥有这个 host 权限的插件将可以：
+### 存储分区
- - 读取或写入 `www.example.com` 任意路径下安全的和不安全的 cookie。
+在使用[动态分区](/zh-CN/docs/Web/Privacy/State_Partitioning#动态分区)时，Firefox 通过顶级站点分隔 JavaScript API 可访问的存储，同时为了满足常见用例而提供适当的对未分区的存储的访问。此功能正在逐步推出。有关实施详细信息，请参阅 [Firefox 中分区的状态](/zh-CN/docs/Web/Privacy/State_Partitioning#firefox_中分区的状态)。
-## 浏览器兼容性
+存储分区的键由顶级{{glossary("Site","网站")}}的 URL 构成，当动态分区处于激活状态时，键值通过 cookies API 中的 `partitionKey.topLevelSite` 属性获得，例如，`partitionKey: {topLevelSite: "http://site"}`。
-{{Compat}}
+通常，顶级文档位于未分区的存储中，而第三方 iframe 位于分区存储中。如果无法确定分区键，则使用默认值（未分区的存储）。例如，虽然所有 HTTP(S) 站点都可以用作分区键，但 `moz-extension:-` URL 不能。因此，Firefox 扩展文档中的 iframe 不使用分区存储。
+
+默认情况下，{{WebExtAPIRef("cookies.get()")}}、{{WebExtAPIRef("cookies.getAll()")}}、{{WebExtAPIRef("cookies.set()")}} 和 {{WebExtAPIRef("cookies.remove()")}} 用于未分区的存储中的 cookie。要在这些 API 中使用分区存储中的 cookie，必须设置 `partitionKey` 中的 `topLevelSite`。唯一的例外是 `getAll`，其中设置 `partitionKey` 而不设置 `topLevelSite` 返回分区存储和未分区的存储中的 cookie。{{WebExtAPIRef("cookies.onChanged")}} 对扩展程序可以访问的任何 cookie 都会触发，包括分区存储中的 cookie。为确保修改正确的 cookie，扩展应从事件中读取 `cookie.partitionKey` 属性，并将其值传递给 {{WebExtAPIRef("cookies.set()")}} 和 {{WebExtAPIRef("cookies.remove()")}}。
-### Edge 不兼容
+### 第一方隔离
-在 Edge 中不支持 Promises，使用 callbacks 代替。
+当第一方隔离开启时，cookie 由用户访问的原始页面的域来限定（基本上是用户在 URL 栏中看到的域，也称为”第一方域“）。
+
+用户可以通过调整浏览器的配置来启用第一方隔离，扩展可以使用 {{WebExtAPIRef("privacy")}} API 中的{{WebExtAPIRef("privacy.websites","firstPartyIsolate")}} 这个设置来启用第一方隔离。请注意，在 [Tor 浏览器](https://www.torproject.org/)中，默认情况下启用了第一方隔离。
+
+在 `cookies` API 中，第一方域使用 `firstPartyDomain` 属性表示。在第一方隔离开启时设置的所有 cookie 都将该属性设置为原始页面的域。在上述示例中，一个 cookie 的域为 `a-shopping-site.com`，另一个为 `a-news-site.com`。当第一方隔离关闭时，由网站设置的所有 cookie 都将该属性设置为空字符串。
+
+{{WebExtAPIRef("cookies.get()")}}、{{WebExtAPIRef("cookies.getAll()")}}、{{WebExtAPIRef("cookies.set()")}} 和 {{WebExtAPIRef("cookies.remove()")}} API 都接受 `firstPartyDomain` 选项。
+
+当第一方隔离开启时，你必须提供此选项，否则 API 调用将失败并返回一个被拒绝的 promise。对于 `get()`、`set()` 和 `remove()`，你必须传递一个字符串值。对于 `getAll()`，你也可以在此处传递 `null`，这将获取所有 cookie，无论它们是否具有非空值的 `firstPartyDomain`。
+
+当第一方隔离关闭时，`firstPartyDomain` 参数是可选的，并且默认为一个空字符串。可以使用非空字符串来检索或修改第一方隔离 cookie。同样，将 `null` 作为 `firstPartyDomain` 传递给 `getAll()` 将返回所有 cookie。
+
+## 类型
+
+- {{WebExtAPIRef("cookies.Cookie")}}
+ - : 表示有关 HTTP cookie 的信息。
+- {{WebExtAPIRef("cookies.CookieStore")}}
+ - : 表示浏览器中的一个 cookie 存储。
+- {{WebExtAPIRef("cookies.OnChangedCause")}}
+ - : 表示 cookie 更改的原因。
+- {{WebExtAPIRef("cookies.SameSiteStatus")}}
+ - : 表示 cookie 的同站状态。
+
+## 方法
+
+- {{WebExtAPIRef("cookies.get()")}}
+ - : 检索有关单个 cookie 的信息。
+- {{WebExtAPIRef("cookies.getAll()")}}
+ - : 检索与给定一组过滤器匹配的所有 cookie。
+- {{WebExtAPIRef("cookies.set()")}}
+ - : 使用给定的 cookie 数据设置 cookie；如果存在等效的 cookie，则可能会覆盖它们。
+- {{WebExtAPIRef("cookies.remove()")}}
+ - : 按名称删除 cookie。
+- {{WebExtAPIRef("cookies.getAllCookieStores()")}}
+ - : 列出所有现有的 cookie 存储。
+
+## 事件处理器
+
+- {{WebExtAPIRef("cookies.onChanged")}}
+ - : 当设置或移除 cookie 时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
{{WebExtExamples("h2")}}
-> **备注：** 这个 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/extensions/cookies) API. 这篇文档来源于 Chromium 代码的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json) 。
->
-> Microsoft Edge 兼容性数据由 Microsoft Corporation 提供，并包含在 Creative Commons Attribution 3.0 United States License.
+> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/)。此文档衍生自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md
index 83ac46b752ccaa..8a4fb4572bcaf0 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md
@@ -5,6 +5,8 @@ l10n:
sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
---
+{{AddonSidebar}}
+
{{WebExtAPIRef("cookies")}} API 的 `onChanged` 事件在设置或删除扩展程序可以访问的 Cookie 时触发。
> **备注：** 当[存储分区](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies#存储分区)处于活动状态时，`cookies.Cookie.partitionKey` 包含 Cookie 的存储分区的描述。在修改 Cookie 时，将此值传递给 {{WebExtAPIRef("cookies.set()")}} 或 {{WebExtAPIRef("cookies.remove()")}} 很重要，以确保扩展程序使用正确的 Cookie。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md
new file mode 100644
index 00000000000000..6ac1d64ec5c852
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md
@@ -0,0 +1,78 @@
+---
+title: cookies.OnChangedCause
+slug: Mozilla/Add-ons/WebExtensions/API/cookies/OnChangedCause
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("cookies")}} API 的 `OnChangedCause` 类型表示 cookie 更改的原因。
+
+## 类型
+
+此类型的值是字符串。可能的值有：
+
+- `evicted`
+ - : 由于垃圾回收，cookie 被自动移除。
+- `expired`
+ - : 由于过期，cookie 被自动移除。
+- `explicit`
+ - : 插入了一个 cookie，或者通过显式调用 {{WebExtAPIRef("cookies.remove()")}} 将一个 cookie 移除。
+- `expired_overwrite`
+ - : 一个 cookie 被另一个已过期的 cookie 覆盖。
+- `overwrite`
+ - : 调用 {{WebExtAPIRef("cookies.set()")}} 用另一个 Cookie 覆盖了这个 Cookie。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+你可以监听 {{WebExtAPIRef("cookies.onChanged")}} 事件，以便在 cookie 更改时收到通知。监听器接收一个包含 `cause` 属性（其值为 `OnChangedCause` 字符串）的 `changeInfo` 对象：
+
+```js
+browser.cookies.onChanged.addListener((changeInfo) => {
+ console.log(
+ `cookie 发生了变化：\n` +
+ ` * cookie：${JSON.stringify(changeInfo.cookie)}\n` +
+ ` * 变化原因：${changeInfo.cause}\n` +
+ ` * 是否移除：${changeInfo.removed}`,
+ );
+});
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/#type-Cookie) API。本文档源自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/remove/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/remove/index.md
new file mode 100644
index 00000000000000..f93614aaed680a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/remove/index.md
@@ -0,0 +1,118 @@
+---
+title: cookies.remove()
+slug: Mozilla/Add-ons/WebExtensions/API/cookies/remove
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("cookies")}} API 的 **`remove()`** 方法根据 cookie 的名称和 URL 删除一个 cookie。
+
+只有在你的 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中包含“cookies” [API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_权限)和给定 URL 的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)时，此调用才能成功。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let removing = browser.cookies.remove(
+ details // 对象
+)
+```
+
+### 参数
+
+- `details`
+
+ - : 一个 `object`，包含识别要删除的 cookie 的信息。它包含以下属性：
+
+ - `firstPartyDomain` {{optional_inline}}
+
+ - : 一个 `string`，表示与要删除的 cookie 关联的第一方域。如果浏览器启用了第一方隔离，则必须提供此属性。请参见[第一方隔离](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies#第一方隔离)。
+
+ - `name`
+
+ - : 一个 `string`，表示要删除的 cookie 的名称。
+
+ - `partitionKey` {{optional_inline}}
+
+ - : 一个 `object`，表示包含该 cookie 的存储分区。包括此对象以从分区存储中删除 cookie。此对象包含：
+
+ - `topLevelSite` {{optional_inline}}
+ - : 一个 `string`，表示包含该 cookie 的顶级站点存储分区的第一方 URL。
+
+ - `storeId` {{optional_inline}}
+
+ - : 一个 `string`，表示查找 cookie 的 cookie 存储的 ID。如果未指定，默认情况下将在当前执行上下文的 cookie 存储中查找 cookie。
+
+ - `url`
+
+ - : 一个 `string`，表示与该 cookie 关联的 URL。如果扩展程序没有此 URL 的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)，则 API 调用将失败。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含有关已删除 cookie 的详细信息的 {{WebExtAPIRef('cookies.Cookie')}} 对象。如果找不到与 `details` 参数匹配的 cookie，则该 Promise 将兑现 `null`。如果由于任何原因导致调用失败，则 Promise 将被拒绝，并带有错误消息。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例尝试删除名为“favorite-color”的 cookie，其 URL 与当前活动标签页托管的文档的 URL 匹配：
+
+```js
+function onRemoved(cookie) {
+ console.log(`已删除：${cookie}`);
+}
+
+function onError(error) {
+ console.log(`删除 cookie 时出错：${error}`);
+}
+
+function removeCookie(tabs) {
+ let removing = browser.cookies.remove({
+ url: tabs[0].url,
+ name: "favorite-color",
+ });
+ removing.then(onRemoved, onError);
+}
+
+let getActive = browser.tabs.query({ active: true, currentWindow: true });
+getActive.then(removeCookie);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/#type-Cookie) API。本文档源自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/samesitestatus/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/samesitestatus/index.md
new file mode 100644
index 00000000000000..4976994c9d6ee2
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/samesitestatus/index.md
@@ -0,0 +1,29 @@
+---
+title: cookies.SameSiteStatus
+slug: Mozilla/Add-ons/WebExtensions/API/cookies/SameSiteStatus
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("cookies")}} API 的 `SameSiteStatus` 类型表示关于 cookie 的 `SameSite` 状态的信息。
+
+## 类型
+
+此类型的值是字符串。可能的值有：
+
+- `no_restriction`
+ - : 对应于设置了 `SameSite=None` 的 cookie。
+- `lax`
+ - : 对应于设置了 `SameSite=Lax` 的 cookie。
+- `strict`
+ - : 对应于设置了 `SameSite=Strict` 的 cookie。
+- `unspecified`
+ - : 对应于没有设置 `SameSite` 属性的 cookie。此状态不属于任何 SameSite 标准，仅由在内部存储此状态的浏览器支持。其他浏览器将缺少 SameSite 标志的情况映射为默认状态（例如 Lax）。有关更多详细信息，请参见浏览器兼容性表。
+
+有关更多信息，请参见 [SameSite cookie](/zh-CN/docs/Web/HTTP/Cookies)。
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/set/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/set/index.md
new file mode 100644
index 00000000000000..e948f154b7faad
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/cookies/set/index.md
@@ -0,0 +1,114 @@
+---
+title: cookies.set()
+slug: Mozilla/Add-ons/WebExtensions/API/cookies/set
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("cookies")}} API 的 **`set()`** 方法设置包含指定 cookie 数据的 cookie。此方法相当于在请求给定 URL 时发出 HTTP `Set-cookie` 标头。
+
+只有在你的 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中包含“cookies” [API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_权限)以及给定 URL 的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)时，调用才会成功。给定的 URL 也需要必要的权限来创建具有给定参数的 cookie。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let setting = browser.cookies.set(
+ details, // 对象
+);
+```
+
+### 参数
+
+- `details`
+
+ - : 一个包含你想要设置的 cookie 详细信息的 `object`。它可以包含以下属性：
+
+ - `domain` {{optional_inline}}
+ - : 一个表示 cookie 域的 `string`。如果省略，cookie 将成为仅限主机（host-only）的 cookie。
+ - `expirationDate` {{optional_inline}}
+ - : 一个表示 cookie 过期日期的 `number`，以 UNIX 纪元以来的秒数表示。如果省略，cookie 将成为会话 cookie。
+ - `firstPartyDomain` {{optional_inline}}
+ - : 一个表示 cookie 将关联的第一方域的 `string`。如果浏览器启用了第一方隔离，则必须提供此属性。参见[第一方隔离](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies#第一方隔离)。
+ - `httpOnly` {{optional_inline}}
+ - : 一个 `boolean`，指定是否应将 cookie 标记为 HttpOnly（`true`），或不标记（`false`）。如果省略，默认为 false。
+ - `name` {{optional_inline}}
+ - : 一个表示 cookie 名称的 `string`。如果省略，默认为空。
+ - `partitionKey` {{optional_inline}}
+ - : 一个表示存储分区的 `object`，用于在分区存储中设置 cookie。包含此对象以在分区存储中设置 cookie。该对象包含：
+ - `topLevelSite` {{optional_inline}}
+ - : 一个表示包含 cookie 的顶级站点存储分区的第一方 URL 的 `string`。
+ - `path` {{optional_inline}}
+ - : 一个表示 cookie 路径的 `string`。如果省略，默认为 URL 参数的路径部分。
+ - `sameSite` {{optional_inline}}
+ - : 一个 {{WebExtAPIRef("cookies.SameSiteStatus")}} 值，指示 cookie 的 SameSite 状态。如果省略，默认为 0，即“no_restriction”。
+ - `secure` {{optional_inline}}
+ - : 一个 `boolean`，指定是否应将 cookie 标记为安全（`true`），或不标记（`false`）。如果省略，默认为 false。
+ - `storeId` {{optional_inline}}
+ - : 一个表示要在其中设置 cookie 的 cookie 存储区 ID 的 `string`。如果省略，默认情况下 cookie 设置在当前执行上下文的 cookie 存储区中。
+ - `url`
+ - : 一个表示与 cookie 关联的请求 URI 的 `string`。此值可以影响创建的 cookie 的默认域和值路径。如果清单（manifest）文件中未指定此 URL 的主机权限，则方法调用将失败。
+ - `value` {{optional_inline}}
+ - : 一个表示 cookie 值的 `string`。如果省略，默认为空。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，它会兑现一个包含已设置 cookie 详细信息的 {{WebExtAPIRef('cookies.Cookie')}} 对象。如果由于任何原因调用失败，Promise 会以错误消息拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+此示例为当前活动标签页托管的文档设置一个 cookie：
+
+```js
+let getActive = browser.tabs.query({ active: true, currentWindow: true });
+getActive.then(setCookie);
+
+function setCookie(tabs) {
+ browser.cookies.set({
+ url: tabs[0].url,
+ name: "favorite-color",
+ value: "red",
+ });
+}
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.cookies`](https://developer.chrome.com/docs/extensions/reference/cookies/#type-Cookie) API。本文档源自 Chromium 代码中的 [`cookies.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/cookies.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/dynamic_ruleset_id/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/dynamic_ruleset_id/index.md
new file mode 100644
index 00000000000000..5763f008ab7b7c
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/dynamic_ruleset_id/index.md
@@ -0,0 +1,48 @@
+---
+title: declarativeNetRequest.DYNAMIC_RULESET_ID
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/DYNAMIC_RULESET_ID
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+通过使用 {{WebExtAPIRef("declarativeNetRequest.updateDynamicRules","updateDynamicRules")}} 添加到扩展的动态规则中的规则集 ID。
+
+其值为 `"_dynamic"`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getavailablestaticrulecount/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getavailablestaticrulecount/index.md
new file mode 100644
index 00000000000000..c8ddb9033b938c
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getavailablestaticrulecount/index.md
@@ -0,0 +1,62 @@
+---
+title: declarativeNetRequest.getAvailableStaticRuleCount
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/getAvailableStaticRuleCount
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+返回在达到全局静态规则限制之前可以启用的静态规则数量。
+
+## 语法
+
+```js-nolint
+let count = await browser.declarativeNetRequest.getAvailableStaticRuleCount();
+```
+
+### 参数
+
+此函数不接受任何参数。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个表示在达到全局静态规则限制之前可以启用的静态规则数量的数字。如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getdynamicrules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getdynamicrules/index.md
new file mode 100644
index 00000000000000..16bbe1af582c3a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getdynamicrules/index.md
@@ -0,0 +1,66 @@
+---
+title: declarativeNetRequest.getDynamicRules
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/getDynamicRules
+l10n:
+ sourceCommit: c26709292444632dfbc4862f4b0b5f2adc5fff56
+---
+
+{{AddonSidebar}}
+
+返回扩展的动态规则集。
+
+## 语法
+
+```js-nolint
+let gettingDynamicRules = browser.declarativeNetRequest.getDynamicRules();
+```
+
+### 参数
+
+- `filter` {{optional_inline}}
+
+ - : 一个用于过滤返回规则列表的对象。
+ - `ruleIds` {{optional_inline}}
+ - : 一个包含 `integer` 的数组。要返回的规则的 ID。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个 {{WebExtAPIRef("declarativeNetRequest.Rule")}} 对象的数组。每个对象表示一个属于扩展的规则。如果没有活动的规则，则数组为空。如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getenabledrulesets/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getenabledrulesets/index.md
new file mode 100644
index 00000000000000..5ba510316ee2a5
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getenabledrulesets/index.md
@@ -0,0 +1,62 @@
+---
+title: declarativeNetRequest.getEnabledRulesets
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/getEnabledRulesets
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+返回已启用的静态规则集的 ID。
+
+## 语法
+
+```js-nolint
+let rulesetIds = await browser.declarativeNetRequest.getEnabledRulesets();
+```
+
+### 参数
+
+此函数不接受任何参数。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含静态规则集 ID 的字符串数组。如果没有启用的规则，则数组为空。如果请求失败，promise 将以错误消息拒绝。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getmatchedrules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getmatchedrules/index.md
new file mode 100644
index 00000000000000..7cee82cb413a65
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getmatchedrules/index.md
@@ -0,0 +1,79 @@
+---
+title: declarativeNetRequest.getMatchedRules
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/getMatchedRules
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+返回扩展匹配的所有规则。调用者可以通过指定 `filter` 来过滤匹配的规则列表。此方法仅对具有 `"declarativeNetRequestFeedback"` 权限的扩展或为 `filter` 中指定的 `tabId` 授予 `"activeTab"` 权限的扩展可用。与活动文档无关且匹配超过五分钟的规则将不会返回。
+
+## 语法
+
+```js-nolint
+let gettingMatchedRules = browser.declarativeNetRequest.getMatchedRules(
+ filter // 对象
+);
+```
+
+### 参数
+
+- `filter` {{optional_inline}}
+
+ - : 一个用于过滤匹配的规则列表的对象。
+ - `minTimeStamp` {{optional_inline}}
+ - : `number`。如果指定，则仅匹配在指定时间戳之后的规则。
+ - tabId {{optional_inline}}
+ - : `number`。如果指定，则仅匹配指定标签页的规则。如果设置为 `-1`，则匹配与任何活动标签页无关的规则。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个对象，具有以下属性：
+
+- `rule`
+ - : {{WebExtAPIRef("declarativeNetRequest.MatchedRule")}}。匹配规则的详细信息。
+- `tabId`
+ - : `number`。请求来源的标签页的 `tabId`，如果标签页仍然活跃。否则为 `-1`。
+- `timeStamp`
+ - : `number`。匹配规则的时间。时间戳对应于 JavaScript 的时间约定，即自纪元以来的毫秒数。
+
+如果没有匹配的规则，则对象为空。如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getmatchedrules_quota_interval/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getmatchedrules_quota_interval/index.md
new file mode 100644
index 00000000000000..e29333f3a10e3a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getmatchedrules_quota_interval/index.md
@@ -0,0 +1,48 @@
+---
+title: declarativeNetRequest.GETMATCHEDRULES_QUOTA_INTERVAL
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/GETMATCHEDRULES_QUOTA_INTERVAL
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+以分钟为单位指定的，可以进行 {{WebExtAPIRef("declarativeNetRequest.MAX_GETMATCHEDRULES_CALLS_PER_INTERVAL")}} 次 {{WebExtAPIRef("declarativeNetRequest.getMatchedRules")}} 调用的时间间隔。额外的调用会立即失败，并导致 Promise 被拒绝。与用户手势相关的调用不受配额限制。
+
+其值为 `10`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getsessionrules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getsessionrules/index.md
new file mode 100644
index 00000000000000..87703d568145f9
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/getsessionrules/index.md
@@ -0,0 +1,66 @@
+---
+title: declarativeNetRequest.getSessionRules
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/getSessionRules
+l10n:
+ sourceCommit: c26709292444632dfbc4862f4b0b5f2adc5fff56
+---
+
+{{AddonSidebar}}
+
+返回扩展的一组活跃的活动会话范围规则。
+
+## 语法
+
+```js-nolint
+let sessionRules = await browser.declarativeNetRequest.getSessionRules();
+```
+
+### 参数
+
+- `filter` {{optional_inline}}
+
+ - : 一个用于过滤返回的规则列表的对象。
+ - `ruleIds` {{optional_inline}}
+ - : 一个包含 `integer` 的数组。要返回的规则的 ID。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个 {{WebExtAPIRef("declarativeNetRequest.Rule")}} 对象的数组。如果没有活动的规则，则对象为空。如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/guaranteed_minimum_static_rules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/guaranteed_minimum_static_rules/index.md
new file mode 100644
index 00000000000000..ede30ff739e134
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/guaranteed_minimum_static_rules/index.md
@@ -0,0 +1,48 @@
+---
+title: declarativeNetRequest.GUARANTEED_MINIMUM_STATIC_RULES
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/GUARANTEED_MINIMUM_STATIC_RULES
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+为扩展程序启用的静态规则集保证的静态规则数量下限。超过此限制的所有规则都将计入全局静态规则限制。
+
+在 Chrome 上，其值为 `30000`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md
new file mode 100644
index 00000000000000..5f458153c09bb4
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md
@@ -0,0 +1,270 @@
+---
+title: declarativeNetRequest
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest
+l10n:
+ sourceCommit: c4360f2607e82c7988e560f38384c1623ba38c35
+---
+
+{{AddonSidebar}}
+
+此 API 使扩展可以指定描述如何处理网络请求的条件和操作。这些声明性规则使浏览器能够评估和修改网络请求，而无需通知扩展有关单个网络请求。
+
+## 权限
+
+要使用此 API，扩展必须在其 [`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中请求 `"declarativeNetRequest"` 或 `"declarativeNetRequestWithHostAccess"` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+`"declarativeNetRequest"` 权限允许扩展阻止和升级请求，而无需任何[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)。如果扩展希望重定向请求或修改请求的标头，或者使用 `"declarativeNetRequestWithHostAccess"` 权限代替 `"declarativeNetRequest"` 权限，则需要主机权限。对于所有请求，除了导航请求（即资源类型 `main_frame` 和 `sub_frame`），请求的发起者也需要主机权限。请求的发起者通常是触发请求的文档或 worker。
+
+某些请求是受限制的，扩展无法匹配这些请求。这些请求包括特权浏览器请求、有关[受限域](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#受限域)的请求和来自其他扩展的请求。
+
+使用 {{WebExtAPIRef("declarativeNetRequest.getMatchedRules","getMatchedRules")}} 和 {{WebExtAPIRef("declarativeNetRequest.onRuleMatchedDebug","onRuleMatchedDebug")}} 时需要 `"declarativeNetRequestFeedback"` 权限，因为它们返回与匹配的声明性规则有关的信息。参见[测试](#测试)以获取更多信息。
+
+## 规则
+
+声明性规则由四个字段定义：
+
+- `id`——唯一标识规则集内规则的 ID。必填，应 >= 1。
+- `priority`——规则优先级。指定时应 >= 1。默认为 1。有关优先级如何影响应用哪些规则的详细信息，请参见[匹配优先级](#匹配优先级)。
+- `condition`——触发此规则的 {{WebExtAPIRef("declarativeNetRequest.RuleCondition","condition")}}。
+- `action`——规则匹配时采取的 {{WebExtAPIRef("declarativeNetRequest.RuleAction","action")}}。规则可以执行以下操作之一：
+ - 阻止网络请求。
+ - 重定向网络请求。
+ - 修改网络请求的标头。
+ - 阻止应用其他匹配规则。
+
+> **备注：**
+> 当以下情况发生时，重定向操作不会重定向请求，请求将照常继续：
+>
+> - 操作不更改请求。
+> - 重定向 URL 无效（例如，{{WebExtAPIRef("declarativeNetRequest.redirect","redirect.regexSubstitution")}} 的值不是有效的 URL）。
+
+这是一个阻止所有从 `"foo.com"` 发起的到任何包含 `"abc"` 子串的 URL 的脚本请求的示例规则：
+
+```json
+{
+ "id": 1,
+ "priority": 1,
+ "action": { "type": "block" },
+ "condition": {
+ "urlFilter": "abc",
+ "initiatorDomains": ["foo.com"],
+ "resourceTypes": ["script"]
+ }
+}
+```
+
+规则条件的 `urlFilter` 字段用于指定与请求 URL 匹配的模式。请参见 {{WebExtAPIRef("declarativeNetRequest.RuleCondition","RuleCondition")}} 获取详细信息。一些 URL 过滤器示例如下：
+
+<table>
+<tbody>
+<tr>
+<th><code>urlFilter</code></th>
+<th>匹配</th>
+<th>不匹配</th>
+</tr>
+<tr>
+<td><code>"abc"</code></td>
+<td>https://abcd.com<br />https://example.com/abcd</td>
+<td>https://ab.com</td>
+</tr>
+<tr>
+<td><code>"abc*d"</code></td>
+<td>https://abcd.com<br />https://example.com/abcxyzd</td>
+<td>https://abc.com</td>
+</tr>
+<tr>
+<td><code>"||a.example.com"</code></td>
+<td>https://a.example.com/<br />https://b.a.example.com/xyz</td>
+<td>https://example.com/</td>
+</tr>
+<tr>
+<td><code>"|https*"</code></td>
+<td>https://example.com</td>
+<td>http://example.com/<br />http://https.com</td>
+</tr>
+</tbody>
+</table>
+
+## 规则集
+
+规则被组织成规则集：
+
+- **静态规则集**：使用清单（manifest）键 [`"declarative_net_request"`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/declarative_net_request) 定义并存储在扩展中的规则集。扩展可以使用 {{WebExtAPIRef("declarativeNetRequest.updateEnabledRulesets","updateEnabledRulesets")}} 启用和禁用静态规则集。启用的一组静态规则集会在会话之间持久化，但不会在扩展更新之间持久化。在扩展安装和更新时启用的静态规则集由清单（manifest）键 `"declarative_net_request"` 的内容确定。
+- **动态规则集**：使用 {{WebExtAPIRef("declarativeNetRequest.updateDynamicRules","updateDynamicRules")}} 添加或删除的规则。这些规则在会话之间和扩展更新之间持久化。
+- **会话规则集**：使用 {{WebExtAPIRef("declarativeNetRequest.updateSessionRules","updateSessionRules")}} 添加或删除的规则。这些规则不会在浏览器会话之间持久化。
+
+> **备注：**
+> 仅在测试期间显示有关无效静态规则的错误和警告。永久安装的扩展中的无效静态规则将被忽略。因此，通过测试验证静态规则集是否有效非常重要。
+
+## 限制
+
+### 静态规则集限制
+
+一个扩展可以：
+
+- 将静态规则集指定为清单键 `"declarative_net_request"` 的一部分，最多可达到 {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_STATIC_RULESETS","MAX_NUMBER_OF_STATIC_RULESETS")}} 个。
+- 启用静态规则集，最少可达到 {{WebExtAPIRef("declarativeNetRequest.GUARANTEED_MINIMUM_STATIC_RULES","GUARANTEED_MINIMUM_STATIC_RULES")}} 个，并且启用的静态规则集数量不得超过 {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_ENABLED_STATIC_RULESETS","MAX_NUMBER_OF_ENABLED_STATIC_RULESETS")}} 个。此外，所有扩展启用的静态规则集中规则的数量不得超过全局限制。扩展不应该依赖于全局限制具有特定的值，而应该使用 {{WebExtAPIRef("declarativeNetRequest.getAvailableStaticRuleCount","getAvailableStaticRuleCount")}} 查找它们可以启用的额外规则数。
+
+### 动态和会话规则
+
+一个扩展可以添加的动态和会话规则数量受到 {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES","MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES")}} 的限制。
+
+## 匹配优先级
+
+当浏览器评估如何处理请求时，它会检查每个扩展的规则，这些规则具有与请求匹配的条件，并按以下方式选择要考虑应用的规则：
+
+1. 规则优先级，其中 1 是最低优先级（规则优先级未设置时默认为 1）。<br>如果这没有导致一条规则被应用：
+2. 规则动作，按以下优先级顺序：
+ 1. “allow”表示任何其他剩余规则都将被忽略。
+ 2. “allowAllRequests”（仅适用于 main_frame 和 sub_frame resourceTypes）具有与 allow 相同的效果，但也适用于从请求生成的文档中的未来子资源加载（包括后代框架）。
+ 3. “block”取消请求。
+ 4. “upgradeScheme”升级请求的方案。
+ 5. “redirect”重定向请求。
+ 6. “modifyHeaders”重写请求或响应标头或两者。
+
+> **备注：** 当多个匹配规则具有相同的规则优先级和规则动作类型时，当匹配的动作支持附加属性时，结果可能不明确。这些属性可能导致无法组合的结果。例如：
+>
+> - “block”动作不支持附加属性，因此没有歧义：所有匹配的“block”动作都会导致相同的结果。
+> - “redirect”动作将请求重定向到一个目标。当多个“redirect”动作匹配时，除一个之外的所有“redirect”动作都将被忽略。当重定向的请求匹配另一个规则条件时，仍然可能重定向多次。
+> - 当多个“modifyHeaders”动作触及不同的标头时，它们可以被独立应用。当它们触及相同的标头时，结果是不明确的，因为某些组合操作是不允许的（如 {{WebExtAPIRef("declarativeNetRequest.ModifyHeaderInfo")}} 中所述）。因此，“modifyHeaders”动作的执行顺序非常重要。
+>
+> 为了控制应用动作的顺序，请为对优先顺序重要的规则分配不同的 `priority` 值。
+
+> **备注：** 在规则优先级和规则动作之后，Firefox 还考虑规则所属的规则集，按照这个顺序：会话 > 动态 > 会话规则集。在不同浏览器中，不能依赖这一点，参见 [WECG 议题 280](https://github.com/w3c/webextensions/issues/280)。
+
+如果只有一个扩展为请求提供规则，则应用该规则。然而，如果有多个扩展具有匹配的规则，浏览器按以下顺序选择要应用的扩展：
+
+1. “block”
+2. “redirect”和“upgradeScheme”
+3. “allow”和“allowAllRequests”
+
+如果请求未被阻止或重定向，则应用匹配的 `modifyHeaders` 动作，如 {{WebExtAPIRef("declarativeNetRequest.ModifyHeaderInfo")}} 中所述。
+
+## 测试
+
+{{WebExtAPIRef("declarativeNetRequest.testMatchOutcome","testMatchOutcome")}}、{{WebExtAPIRef("declarativeNetRequest.getMatchedRules","getMatchedRules")}} 和 {{WebExtAPIRef("declarativeNetRequest.onRuleMatchedDebug","onRuleMatchedDebug")}} 可用于辅助测试规则和规则集。这些 API 需要 `"declarativeNetRequestFeedback"` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。此外：
+
+- 在 Chrome 中，这些 API 仅对未打包的扩展可用。
+- 在 Firefox 中，这些 API 仅在将 `extensions.dnr.feedback` 首选项设置为 `true` 后可用。可以使用 `about:config` 或 [`web-ext` CLI 工具的 `--pref` 标志](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#pref)设置此首选项。
+
+## 与 webRequest API 的比较
+
+- declarativeNetRequest API 在浏览器内部评估网络请求。这使其比 webRequest API 更高效，后者在扩展进程中以 JavaScript 评估每个网络请求。
+- 由于请求未被扩展进程拦截，declarativeNetRequest 不需要扩展拥有后台页面。
+- 与 webRequest API 不同，使用 declarativeNetRequest API 阻止或升级请求，只需要 `declarativeNetRequest` 权限而不需要主机权限。
+- declarativeNetRequest API 为用户提供了更好的隐私保护，因为扩展不会读取用户发起的网络请求。
+- （仅 Chrome：）与 webRequest API 不同，使用 declarativeNetRequest API 阻止的任何图像或 iframe 将在 DOM 中自动折叠。
+- 在决定是否阻止或重定向请求时，declarativeNetRequest API 优先于 webRequest API，因为它允许同步拦截。同样，通过 declarativeNetRequest API 移除的任何标头都不会对 web 请求扩展可见。
+- webRequest API 比 declarativeNetRequest API 更灵活，因为它允许扩展以编程方式评估请求。
+
+## 类型
+
+- {{WebExtAPIRef("declarativeNetRequest.MatchedRule")}}
+ - : 匹配规则的详细信息。
+- {{WebExtAPIRef("declarativeNetRequest.ModifyHeaderInfo")}}
+ - : 要修改的请求或响应标头。
+- {{WebExtAPIRef("declarativeNetRequest.Redirect")}}
+ - : 重定向应如何执行的详细信息。仅对重定向规则有效。
+- {{WebExtAPIRef("declarativeNetRequest.ResourceType")}}
+ - : 请求的资源类型。
+- {{WebExtAPIRef("declarativeNetRequest.Rule")}}
+ - : 包含规则详细信息的对象。
+- {{WebExtAPIRef("declarativeNetRequest.RuleAction")}}
+ - : 定义匹配规则时要采取的动作的对象。
+- {{WebExtAPIRef("declarativeNetRequest.RuleCondition")}}
+ - : 定义规则触发条件的对象。
+- {{WebExtAPIRef("declarativeNetRequest.URLTransform")}}
+ - : 包含重定向动作的 URL 转换详细信息的对象。
+
+## 属性
+
+- {{WebExtAPIRef("declarativeNetRequest.DYNAMIC_RULESET_ID")}}
+ - : 扩展添加的动态规则的规则集 ID。
+- {{WebExtAPIRef("declarativeNetRequest.GETMATCHEDRULES_QUOTA_INTERVAL")}}
+ - : 在此时间间隔内可以执行 {{WebExtAPIRef("declarativeNetRequest.MAX_GETMATCHEDRULES_CALLS_PER_INTERVAL")}} 次 {{WebExtAPIRef("declarativeNetRequest.getMatchedRules")}} 的调用。
+- {{WebExtAPIRef("declarativeNetRequest.GUARANTEED_MINIMUM_STATIC_RULES")}}
+ - : 跨已启用的静态规则集保证给扩展的最小静态规则数。
+- {{WebExtAPIRef("declarativeNetRequest.MAX_GETMATCHEDRULES_CALLS_PER_INTERVAL")}}
+ - : 在 {{WebExtAPIRef("declarativeNetRequest.GETMATCHEDRULES_QUOTA_INTERVAL")}} 周期内可以调用 {{WebExtAPIRef("declarativeNetRequest.getMatchedRules")}} 的次数。
+- {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES")}}
+ - : 扩展可以添加的动态和会话范围规则的最大数量。
+- {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_ENABLED_STATIC_RULESETS")}}
+ - : 扩展可以启用的静态规则集的最大数量。
+- {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_REGEX_RULES")}}
+ - : 扩展可以添加的正则表达式规则的最大数量。
+- {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_STATIC_RULESETS")}}
+ - : 扩展可以作为清单键 [`declarative_net_request.rule_resources`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/declarative_net_request) 所能指定的静态规则集的最大数量。
+- {{WebExtAPIRef("declarativeNetRequest.SESSION_RULESET_ID")}}
+ - : 扩展添加的会话范围规则的规则集 ID。
+
+## 函数
+
+- {{WebExtAPIRef("declarativeNetRequest.getAvailableStaticRuleCount()")}}
+ - : 返回扩展可以启用的静态规则数，直到达到全局静态规则限制。
+- {{WebExtAPIRef("declarativeNetRequest.getDisabledRuleIds()")}}
+ - : 返回静态规则集中已禁用的规则的 ID。
+- {{WebExtAPIRef("declarativeNetRequest.getDynamicRules()")}}
+ - : 返回扩展的一组动态规则集。
+- {{WebExtAPIRef("declarativeNetRequest.getEnabledRulesets()")}}
+ - : 返回启用的各组静态规则集的 ID。
+- {{WebExtAPIRef("declarativeNetRequest.getMatchedRules()")}}
+ - : 返回扩展匹配的所有规则。
+- {{WebExtAPIRef("declarativeNetRequest.getSessionRules()")}}
+ - : 返回扩展的会话范围规则集。
+- {{WebExtAPIRef("declarativeNetRequest.isRegexSupported()")}}
+ - : 检查正则表达式是否支持作为 {{WebExtAPIRef("declarativeNetRequest.RuleCondition")}}`.regexFilter` 规则条件。
+- {{WebExtAPIRef("declarativeNetRequest.setExtensionActionOptions()")}}
+ - : 配置如何处理标签页的操作计数。
+- {{WebExtAPIRef("declarativeNetRequest.testMatchOutcome()")}}
+ - : 检查扩展的 `declarativeNetRequest` 规则是否会匹配假设请求。
+- {{WebExtAPIRef("declarativeNetRequest.updateDynamicRules()")}}
+ - : 修改扩展的活跃的一组动态规则集。
+- {{WebExtAPIRef("declarativeNetRequest.updateEnabledRulesets()")}}
+ - : 更新扩展的活跃的一组静态规则集。
+- {{WebExtAPIRef("declarativeNetRequest.updateSessionRules()")}}
+ - : 修改扩展的会话范围规则集。
+- {{WebExtAPIRef("declarativeNetRequest.updateStaticRules()")}}
+ - : 修改静态规则集中的规则的启用状态。
+- {{WebExtAPIRef("declarativeNetRequest.updateStaticRules()")}}
+ - : 修改静态规则集中的规则的启用状态。
+
+## 事件
+
+- {{WebExtAPIRef("declarativeNetRequest.onRuleMatchedDebug")}}
+ - : 当调试具有“declarativeNetRequestFeedback”权限的扩展时，请求匹配规则时触发。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/isregexsupported/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/isregexsupported/index.md
new file mode 100644
index 00000000000000..49a654b462a446
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/isregexsupported/index.md
@@ -0,0 +1,79 @@
+---
+title: declarativeNetRequest.isRegexSupported
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/isRegexSupported
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+检查是否支持将某个正则表达式作为 {{WebExtAPIRef("declarativeNetRequest.RuleCondition")}}`.regexFilter` 规则的条件。
+
+## 语法
+
+```js-nolint
+let count = browser.declarativeNetRequest.isRegexSupported(
+ regexOptions // 对象
+);
+```
+
+### 参数
+
+- `regexOptions`
+
+ - : 一个包含要检查的正则表达式的对象。
+ - `isCaseSensitive` {{optional_inline}}
+ - : `boolean`。正则表达式是否区分大小写。默认值为 `true`。
+ - `regex`
+ - : `string`。要检查的正则表达式。
+ - `requireCapturing` {{optional_inline}}
+ - : `boolean`。是否需要捕获。只有在指定了 regexSubstitution 操作的重定向规则中需要捕获。默认值为 `false`。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个对象，具有以下属性：
+
+- `isSupported`
+ - : `boolean`。正则表达式是否支持。
+- `reason` {{optional_inline}}
+ - : `string`。指定正则表达式不支持的原因。可能的值为 `"syntaxError"` 和 `"memoryLimitExceeded"`。仅在 `isSupported` 为 false 时提供。
+
+如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/matchedrule/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/matchedrule/index.md
new file mode 100644
index 00000000000000..9e1bbd8539038b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/matchedrule/index.md
@@ -0,0 +1,60 @@
+---
+title: declarativeNetRequest.MatchedRule
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/MatchedRule
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+描述匹配规则的对象。此类型可能由 {{WebExtAPIRef("declarativeNetRequest.getMatchedRules")}} 或 {{WebExtAPIRef("declarativeNetRequest.testMatchOutcome")}} 方法返回，也可以通过 {{WebExtAPIRef("declarativeNetRequest.onRuleMatchedDebug")}} 事件观察到。
+
+## 类型
+
+此类型的值为对象，包含以下属性：
+
+- `extensionId`
+ - : `string`。如果此规则属于其他扩展，则为该扩展的 ID。仅当与 {{WebExtAPIRef("declarativeNetRequest.testMatchOutcome")}} 一起使用，且将 `includeOtherExtensions` 选项设置为 `true` 时，才可用此属性。
+- `ruleId`
+ - : `number`。匹配规则的 ID。
+- `rulesetId`
+ - : `string`。此规则所属的[规则集](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#rulesets)的 ID。返回的值为：
+ - 对于来自静态规则集的规则，是在[清单（manifest）键 `declarative_net_request.rule_resources`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/declarative_net_request) 中规则集的“id”键所指定的值。
+ - 对于来自动态规则集的规则，是在 {{WebExtAPIRef("declarativeNetRequest.DYNAMIC_RULESET_ID")}} 中定义的值，即 `"_dynamic"`。
+ - 对于来自会话规则集的规则，是在 {{WebExtAPIRef("declarativeNetRequest.SESSION_RULESET_ID")}} 中定义的值，即 `"_session"`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_getmatchedrules_calls_per_interval/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_getmatchedrules_calls_per_interval/index.md
new file mode 100644
index 00000000000000..3c1158028db437
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_getmatchedrules_calls_per_interval/index.md
@@ -0,0 +1,48 @@
+---
+title: declarativeNetRequest.MAX_GETMATCHEDRULES_CALLS_PER_INTERVAL
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/MAX_GETMATCHEDRULES_CALLS_PER_INTERVAL
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+在 {{WebExtAPIRef("declarativeNetRequest.GETMATCHEDRULES_QUOTA_INTERVAL")}} 时间段内可以调用 {{WebExtAPIRef("declarativeNetRequest.getMatchedRules")}} 的次数。
+
+其值为 `20`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_dynamic_and_session_rules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_dynamic_and_session_rules/index.md
new file mode 100644
index 00000000000000..535412e79ed89e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_dynamic_and_session_rules/index.md
@@ -0,0 +1,52 @@
+---
+title: declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+扩展可以添加的动态和会话作用域规则的组合最大数。
+
+在 Chrome 中，此限制适用于动态和会话作用域规则的组合。
+
+在 Firefox 中，每个规则集都有自己的配额。
+
+其值为 `5000`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_enabled_static_rulesets/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_enabled_static_rulesets/index.md
new file mode 100644
index 00000000000000..38382ccae64ce3
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_enabled_static_rulesets/index.md
@@ -0,0 +1,50 @@
+---
+title: declarativeNetRequest.MAX_NUMBER_OF_ENABLED_STATIC_RULESETS
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/MAX_NUMBER_OF_ENABLED_STATIC_RULESETS
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+扩展可以启用的静态规则集的最大数量，即在清单（manifest）键 [`declarative_net_request.rule_resources`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/declarative_net_request) 中具有 `"enabled"` 设置为 `true` 的值的数量。超过限制的静态规则集将被忽略。
+
+扩展可以使用 {{WebExtAPIRef("declarativeNetRequest.updateEnabledRulesets", "updateEnabledRulesets")}} 方法更改已启用的规则集的数量。
+
+其值为 `10`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_regex_rules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_regex_rules/index.md
new file mode 100644
index 00000000000000..994189e13f7a5e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_regex_rules/index.md
@@ -0,0 +1,52 @@
+---
+title: declarativeNetRequest.MAX_NUMBER_OF_REGEX_RULES
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/MAX_NUMBER_OF_REGEX_RULES
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+扩展可以添加的正则表达式规则的最大数量。
+
+在 Chrome 中，其值为 1000，此限制分别针对动态规则集和会话规则集以及在规则资源文件中指定的规则进行评估。
+
+在 Firefox 中，此限制针对每个规则集单独进行评估。
+
+在 Safari 中，没有关于 `regexFilter` 规则数量的单独限制。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_static_rulesets/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_static_rulesets/index.md
new file mode 100644
index 00000000000000..59ff621b743489
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/max_number_of_static_rulesets/index.md
@@ -0,0 +1,48 @@
+---
+title: declarativeNetRequest.MAX_NUMBER_OF_STATIC_RULESETS
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/MAX_NUMBER_OF_STATIC_RULESETS
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+扩展可以在清单（manifest）键 [`declarative_net_request.rule_resources`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/declarative_net_request) 中指定的静态规则集的最大数量。
+
+其值为 `50`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md
new file mode 100644
index 00000000000000..cfc2b59ec9e585
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md
@@ -0,0 +1,94 @@
+---
+title: declarativeNetRequest.ModifyHeaderInfo
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/ModifyHeaderInfo
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+要修改的请求的请求标头或响应标头，在 `rule.action.requestHeaders` 数组或 `rule.action.responseHeaders` 数组中声明，用于 {{WebExtAPIRef("declarativeNetRequest.RuleAction", "rule.action")}}`.type` 为"modifyHeaders"这个规则。
+
+每个对象描述了一个标头修改。要修改多个标头，可以在这些数组中指定多个对象，或者跨多个规则。
+
+匹配的 `modifyHeaders` 规则将按照[匹配优先级](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#匹配优先级)中描述的顺序去应用。在每个扩展中，所有优先级低于或等于匹配的 `allow` 或 `allowAllRequests` 规则的 `modifyHeaders` 规则都会被忽略。
+
+如果多个 `modifyHeaders` 规则指定了相同的标头，则标头的最终修改结果将根据每个规则的优先级和指定的操作确定：
+
+- 如果一个规则为标头附加条目，则较低优先级的规则只能对标头附加条目。不允许进行 `set` 和 `remove` 操作。
+- 如果一个规则设置了一个标头，那么低优先级规则除了来自相同扩展的 `append` 规则外，不能修改该标头。
+- 如果一个规则已经删除了一个标头，那么低优先级规则不能修改该标头。
+
+## 类型
+
+此类型的值为对象，包含以下属性：
+
+- `header`
+ - : `string`。要修改的标头的名称。
+- `operation`
+ - : `string`。要在标头上执行的操作。可能的值为 `"append"`、`"set"` 和 `"remove"`。
+- `value` {{optional_inline}}
+ - : `string`。标头的新值。必须为 append 和 set 操作指定。不允许用于“remove”操作。
+
+## 标头限制
+
+在 Chrome 中，对以下请求标头支持 `"append"`：
+
+- `Accept`
+- `Accept-Encoding`
+- `Accept-Language`
+- `Access-Control-Request-Headers`
+- `Cache-Control`
+- `Connection`
+- `Content-Language`
+- `Cookie`
+- `Forwarded`
+- `If-Match`
+- `If-None-Match`
+- `Keep-Alive`
+- `Range`
+- `Te`
+- `Trailer`
+- `Transfer-Encoding`
+- `Upgrade`
+- `Via`
+- `Want-Digest`
+- `X-Forwarded-For`
+
+在 Firefox 中，扩展需要具有主机权限才能对 `Host` 标头设置新值。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/onrulematcheddebug/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/onrulematcheddebug/index.md
new file mode 100644
index 00000000000000..951ef29144ad45
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/onrulematcheddebug/index.md
@@ -0,0 +1,102 @@
+---
+title: declarativeNetRequest.onRuleMatchedDebug
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/onRuleMatchedDebug
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当规则与请求匹配时触发。此功能仅对具有 `"declarativeNetRequestFeedback"` 权限的扩展可用，因为这仅用于调试目的。有关在每个浏览器中启用测试的详细信息，请参阅[测试](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#测试)。
+
+## 语法
+
+```js-nolint
+browser.declarativeNetRequest.onRuleMatchedDebug.addListener(listener)
+browser.declarativeNetRequest.onRuleMatchedDebug.removeListener(listener)
+browser.declarativeNetRequest.onRuleMatchedDebug.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 添加一个监听器到此事件。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。函数传递以下参数：
+
+ - `request`
+
+ - : 一个包含匹配规则的请求信息的对象。
+ - `documentId` {{optional_inline}}
+ - : `string`。如果此请求是针对框架的，则为框架文档的唯一标识符。
+ - `documentLifecycle` {{optional_inline}}
+ - : `string`。如果此请求是针对框架的，则为框架文档的生命周期。可能的值为：`"prerender"`、`"active"`、`"cached"` 或 `"pending_deletion"`。
+ - `frameId`
+ - : `number`。值为 `0` 时表示请求发生在主框架中。正值表示发生请求的子框架的 ID。如果加载的是（子）框架的文档（类型为 `main_frame` 或 `sub_frame`），`frameId` 表示该框架的 ID，而不是外层框架的 ID。框架 ID 在标签页内是唯一的。
+ - `frameType` {{optional_inline}}
+ - : `string`。如果此请求是针对框架的，则为框架的类型。可能的值为：`"outermost_frame"`、`"fenced_frame"` 或 `"sub_frame"`。
+ - `initiator` {{optional_inline}}
+ - : `string`。请求发起的来源。在重定向过程中不会改变。如果这是一个不透明的来源，则使用字符串 `'null'`。
+ - `method`
+ - : `string`。一个标准的 HTTP 方法。
+ - `parentDocumentId` {{optional_inline}}
+ - : `string`。如果此请求是针对框架的并且有父框架，则为框架父文档的唯一标识符。
+ - `parentFrameId`
+ - : `number`。包装发送请求的框架的父框架的 ID。如果没有父框架，则设置为 `-1`。
+ - `requestId`
+ - : `string`。请求的 ID。请求 ID 在浏览器会话中是唯一的。
+ - `tabId`
+ - : `number`。请求发生的标签页的 ID。如果请求与标签页无关，则设置为 `-1`。
+ - `type`
+ - : {{WebExtAPIRef("declarativeNetRequest.ResourceType", "ResourceType")}}。请求的资源类型。
+ - `url`
+ - : `string`。请求的 URL。
+
+ - `rule`
+ - : {{WebExtAPIRef("declarativeNetRequest.MatchedRule", "MatchedRule")}}。匹配规则的详细信息。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/redirect/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/redirect/index.md
new file mode 100644
index 00000000000000..f6d47b06195d01
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/redirect/index.md
@@ -0,0 +1,64 @@
+---
+title: declarativeNetRequest.Redirect
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/Redirect
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+描述重定向应该如何执行的详细信息，作为 {{WebExtAPIRef("declarativeNetRequest.RuleAction", "RuleAction")}} 的 `redirect` 属性。仅适用于重定向规则。
+
+> **备注：** 重定向操作不会重定向请求，请求会像往常一样继续进行，当：
+>
+> - 操作不更改请求。
+> - 重定向 URL 无效（例如，{{WebExtAPIRef("declarativeNetRequest.redirect","redirect.regexSubstitution")}} 的值不是有效的 URL）。
+
+## 类型
+
+此类型的值为对象，包含以下属性：
+
+- `extensionPath` {{optional_inline}}
+ - : `string`。相对于扩展目录的路径。应以“/”开头。仅当资源在 [`web_accessible_resources`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources) 中列出时，请求的发起者才能跟随重定向。
+- `regexSubstitution` {{optional_inline}}
+ - : `string`。规则指定了 `regexFilter` 的替换模式。`regexFilter` 在 URL 中的第一个匹配项将用此模式替换。在 `regexSubstitution` 中，使用反斜杠转义的数字（`\1` 到 `\9`）来插入相应的捕获组。`\0` 指整个匹配的文本。
+- `transform` {{optional_inline}}
+ - : {{WebExtAPIRef("declarativeNetRequest.URLTransform")}}。要执行的 URL 转换。
+- `url` {{optional_inline}}
+ - : `string`。重定向的 URL。不允许重定向到 JavaScript URL。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/resourcetype/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/resourcetype/index.md
new file mode 100644
index 00000000000000..7a6e21adea3556
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/resourcetype/index.md
@@ -0,0 +1,105 @@
+---
+title: declarativeNetRequest.ResourceType
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/ResourceType
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+请求的资源类型。与 {{WebExtAPIRef('webRequest.ResourceType')}} 类似。
+
+## 类型
+
+此类型的值为字符串。可能的取值有：
+
+- `beacon`
+ - : 通过 [Beacon API](/zh-CN/docs/Web/API/Beacon_API) 发送的请求。
+- `csp_report`
+ - : 当检测到违反策略的尝试时，发送到 {{HTTPHeader("Content-Security-Policy")}} 标头中给定的 {{CSP("report-uri")}} 的请求。
+- `font`
+ - : 为 {{cssxref("@font-face")}} CSS 规则加载的网络字体。
+- `image`
+ - : 被渲染成图像的资源，除了在支持该类型的浏览器上的 `imageset`（请参阅下面的浏览器兼容性）。
+- `imageset`
+ - : 由 {{HTMLElement("picture")}} 元素加载的图像或在 `<img>` 元素的 [`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset) 属性中给定的图像。
+- `main_frame`
+ - : 加载到标签页中的顶级文档。
+- `media`
+ - : 由 {{HTMLElement("video")}} 或 {{HTMLElement("audio")}} 元素加载的资源。
+- `object`
+
+ - : 由 {{HTMLElement("object")}} 或 {{HTMLElement("embed")}} 元素加载的资源。
+
+ 没有专用 `object_subrequest` 类型的浏览器（请参阅下面的浏览器兼容性）还将插件发送的后续请求标记为 `object`。
+
+- `object_subrequest`
+
+ - : 由插件发送的请求。
+
+- `ping`
+
+ - : 当点击链接时，发送到链接的 [`ping`](/zh-CN/docs/Web/HTML/Element/a#ping) 属性中给定的 URL。
+
+ 没有专用 `beacon` 类型的浏览器（请参阅下面的浏览器兼容性）还将通过 Beacon API 发送的请求标记为 `ping`。
+
+- `script`
+ - : 由 {{HTMLElement("script")}} 元素加载或在 [worker](/zh-CN/docs/Web/API/Web_Workers_API) 中运行的代码。
+- `speculative`
+ - : 在预测连接中，浏览器已确定可能会很快发送到 URI 的请求，因此立即开始了 TCP 或 TLS 握手，因此当实际请求资源时，它会更快地准备就绪。请注意，此类连接不提供有效的标签页信息，因此请求详情（如 `tabId`、`frameId`、`parentFrameId` 等）是不准确的。
+- `stylesheet`
+ - : 用于描述文档外观的 [CSS](/zh-CN/docs/Web/CSS) 样式表。
+- `sub_frame`
+ - : 加载到 {{HTMLElement("iframe")}} 或 {{HTMLElement("frame")}} 元素中的文档。
+- `web_manifest`
+ - : 为可以安装到主屏幕的网站加载的 [Web 应用清单](/zh-CN/docs/Web/Manifest)。
+- `webbundle`
+ - : 发起与服务器的连接的请求，通过 Web Bundle 或[打包的网站](https://github.com/WICG/webpackage)。
+- `websocket`
+ - : 通过 [WebSocket API](/zh-CN/docs/Web/API/WebSockets_API) 发起与服务器的连接的请求。
+- `webtransport`
+ - : 通过 [WebTransport API](/zh-CN/docs/Web/API/WebTransport_API) 发起与服务器的连接的请求。
+- `xml_dtd`
+ - : 用于 XML 文档的 [DTD](/zh-CN/docs/Glossary/Doctype)。
+- `xmlhttprequest`
+ - : 由 {{domxref("XMLHttpRequest")}} 对象发送的请求，或通过 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 发送的请求。
+- `xslt`
+ - : 用于转换 XML 文档的 [XSLT](/zh-CN/docs/Web/XSLT) 样式表。
+- `other`
+ - : 没被任何其他可用类型涵盖的资源。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md
new file mode 100644
index 00000000000000..0770ccee0ccb19
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md
@@ -0,0 +1,61 @@
+---
+title: declarativeNetRequest.Rule
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/Rule
+l10n:
+ sourceCommit: 3a4950f53f1de09c0ed01438f0620ae972d4161f
+---
+
+{{AddonSidebar}}
+
+描述匹配请求所采取的操作的对象。这些可以在由 [manifest.json 的键 `declarative_net_request`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/declarative_net_request) 链接的静态规则资源中指定，或通过 {{WebExtAPIRef("declarativeNetRequest.updateDynamicRules")}} 或 {{WebExtAPIRef("declarativeNetRequest.updateSessionRules")}} 方法更动态地指定。
+
+有关规则的更多信息，请参见 API 概述页面中的[规则](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#规则)。
+
+## 类型
+
+此类型的值为对象。它们包含以下属性：
+
+- `action`
+ - : {{WebExtAPIRef("declarativeNetRequest.RuleAction")}}。如果此规则匹配，则要执行的操作。
+- `condition`
+ - : {{WebExtAPIRef("declarativeNetRequest.RuleCondition")}}。触发此规则的条件。
+- `id`
+ - : `number`。在规则集中唯一标识规则的 ID。此项为必填项，应大于等于 1。
+- `priority` {{optional_inline}}
+ - : `number`。规则优先级。默认为 1。当指定时，应大于等于 1。有关优先级如何影响应用哪些规则的详细信息，请参阅[匹配优先级](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#匹配优先级)。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md
new file mode 100644
index 00000000000000..a28e4a794efd90
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md
@@ -0,0 +1,59 @@
+---
+title: declarativeNetRequest.RuleAction
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/RuleAction
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("declarativeNetRequest.Rule")}} 的 `action` 属性表明了在匹配到规则时采取的相应动作的细节。
+
+## 类型
+
+该类型的值是对象。它们包含以下属性：
+
+- `redirect` {{optional_inline}}
+ - : {{WebExtAPIRef("declarativeNetRequest.Redirect")}}。描述如何执行重定向。仅对重定向规则有效。
+- `requestHeaders` {{optional_inline}}
+ - : {{WebExtAPIRef("declarativeNetRequest.ModifyHeaderInfo")}}。要修改的请求标头。仅当 `type` 为 `"modifyHeaders"` 时有效。
+- `responseHeaders` {{optional_inline}}
+ - : {{WebExtAPIRef("declarativeNetRequest.ModifyHeaderInfo")}}。要修改的响应标头。仅当 `type` 为 `"modifyHeaders"` 时有效。
+- `type`
+ - : `string`。要执行的操作类型。可能的值有 `"block"`、`"redirect"`、`"allow"`、`"upgradeScheme"`、`"modifyHeaders"` 和 `"allowAllRequests"`。使用 `"redirect"` 和 `"modifyHeaders"` 操作需要请求和请求发起者的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)。 `"block"` 和 `"upgradeScheme"` 操作也需要主机权限，除非指定了“declarativeNetRequest”权限。没有这些权限，匹配的规则将被忽略。有关规则操作效果的更多详细信息，请参见 [DeclarativeNetRequest 的权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#权限)。有关规则操作效果的更多详细信息，请参见[匹配优先级](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#匹配优先级)。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/rulecondition/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/rulecondition/index.md
new file mode 100644
index 00000000000000..0518402e31ada1
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/rulecondition/index.md
@@ -0,0 +1,109 @@
+---
+title: declarativeNetRequest.RuleCondition
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/RuleCondition
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("declarativeNetRequest.Rule")}} 的 `condition` 属性，用于决定规则是否匹配请求的条件细节。
+
+## 类型
+
+该类型的值是对象，包含以下属性：
+
+- `domainType` {{optional_inline}}
+ - : `string`。指定网络请求是其源域的第一方还是第三方请求。如果省略，则接受所有请求。可能的值为 `"firstParty"` 和 `"thirdParty"`。
+- `domains` {{deprecated_inline}} {{optional_inline}}
+ - : `string` 数组。请使用 [`initiatorDomains`](#initiatordomains) 代替。规则仅匹配源自此域名列表的网络请求。
+- `excludedDomains` {{deprecated_inline}} {{optional_inline}}
+ - : `string` 数组。请使用 [`excludedInitiatorDomains`](#excludedinitiatordomains) 代替。规则不匹配源自此域名列表的网络请求。
+- `initiatorDomains` {{optional_inline}}
+ - : `string` 数组。规则仅匹配源自此域名列表的网络请求。如果省略该列表，则规则适用于所有域名的请求。不允许使用空列表。应使用[规范域名](#规范域名)。这与请求发起者而不是请求 URL 匹配。
+- `excludedInitiatorDomains` {{optional_inline}}
+ - : `string` 数组。规则不匹配源自此域名列表的网络请求。如果列表为空或省略，则不排除任何域名。这优先于 `initiatorDomains`。应使用[规范域名](#规范域名)。这与请求发起者而不是请求 URL 匹配。
+- `isUrlFilterCaseSensitive` {{optional_inline}}
+ - : `boolean`。[`urlFilter`](#urlfilter) 或 [`regexFilter`](#regexfilter)（指定的任何一个）是否区分大小写。尽管在 [WECG issue 269](https://github.com/w3c/webextensions/issues/269) 中，默认值为 `false` 已在各浏览器中达成共识，但在（较旧的）Chrome 和 Safari 版本中，该值曾为 `true`。详细信息请参见[浏览器兼容性](#browser_compatibility)。
+- `regexFilter` {{optional_inline}}
+ - : `string`。用于匹配网络请求 URL 的正则表达式。注意：
+ - 支持的格式不稳定且在各浏览器中有所不同，详情请参见 [WECG issue 344 中的“DNR API（regexFilter）中的正则表达式”](https://github.com/w3c/webextensions/issues/344)。
+ - 只能指定 [`urlFilter`](#urlfilter) 或 `regexFilter` 之一。
+ - `regexFilter` 必须仅由 {{Glossary("ASCII")}} 字符组成。这与主机编码为[国际化域名编码](https://zh.wikipedia.org/wiki/国际化域名编码)格式的 URL 匹配（在国际化域名的情况下），任何其他非 ASCII 字符都使用 utf-8 进行 URL 编码。
+- `requestDomains` {{optional_inline}}
+ - : `string` 数组。规则仅在域名与此列表中的某个匹配时匹配网络请求。如果省略该列表，则规则适用于所有域名的请求。不允许使用空列表。应使用[规范域名](#规范域名)。
+- `excludedRequestDomains` {{optional_inline}}
+ - : `string` 数组。规则不匹配域名与此列表中的某个匹配的网络请求。如果列表为空或省略，则不排除任何域名。这优先于 `requestDomains`。应使用[规范域名](#规范域名)。
+- `requestMethods` {{optional_inline}}
+ - : `string` 数组。规则匹配的 HTTP 请求方法列表。不允许使用空列表。指定 `requestMethods` 规则条件还会排除非 HTTP(s) 请求，而指定 [`excludedRequestMethods`](#excludedrequestmethods) 则不会。
+- `excludedRequestMethods` {{optional_inline}}
+ - : `string` 数组。规则不匹配此列表中的请求方法。只能指定 [`requestMethods`](#requestmethods) 和 `excludedRequestMethods` 之一。如果两者都未指定，则匹配所有请求方法。
+- `resourceTypes` {{optional_inline}}
+ - : {{WebExtAPIRef("declarativeNetRequest.ResourceType")}} 数组。规则匹配的资源类型列表。不允许使用空列表。必须为 `"allowAllRequests"` 规则指定，并且可能仅包含 `"sub_frame"` 和 `"main_frame"` 资源类型。
+- `excludedResourceTypes` {{optional_inline}}
+ - : {{WebExtAPIRef("declarativeNetRequest.ResourceType")}} 数组。规则不匹配的资源类型列表。只能指定 [`resourceTypes`](#resourcetypes) 和 `excludedResourceTypes` 之一。如果两者都未指定，则阻止除 `"main_frame"` 之外的所有资源类型。
+- `tabIds` {{optional_inline}}
+ - : `number` 数组。规则应匹配的 {{WebExtAPIRef("tabs.Tab")}}.`id` 列表。{{WebExtAPIRef("tabs.TAB_ID_NONE")}} 的 ID 匹配不来源于选项卡的请求。不允许使用空列表。仅支持会话范围的规则。
+- `excludedTabIds` {{optional_inline}}
+ - : `number` 数组。规则不匹配的 {{WebExtAPIRef("tabs.Tab")}}.`id` 列表。{{WebExtAPIRef("tabs.TAB_ID_NONE")}} 的 ID 排除不来源于选项卡的请求。仅支持会话范围的规则。
+- `urlFilter` {{optional_inline}}
+
+ - : `string`。与网络请求 URL 匹配的模式。支持的结构：
+
+ - `*` ：通配符：匹配任意数量的字符。
+ - `|` ：左或右锚：如果在模式的任一端使用，则分别指定 URL 的开头或结尾。
+ - `||` ：域名锚：如果在模式的开头使用，则指定 URL 的（子）域的开头。
+ - `^` ：分隔符字符：这匹配字母、数字或 `_`、`-`、`.`、`%` 之外的任何内容。最后的 `^` 还可以匹配 URL 的结尾，而不是分隔符字符。
+
+ `urlFilter` 由以下部分组成：（可选的左/域名锚）+ 模式 +（可选的右锚）。如果省略，则匹配所有 URL。不允许使用空字符串。以 `||*` 开头的模式不允许使用。请使用 `*` 代替。注意：
+
+ - 只能指定 `urlFilter` 或 [`regexFilter`](#regexfilter) 其中之一。
+ - `urlFilter` 必须仅由 ASCII 字符组成。这与主机编码为[国际化域名编码](https://zh.wikipedia.org/wiki/国际化域名编码)格式的 URL 匹配（在国际化域名的情况下），任何其他非 ASCII 字符都使用 utf-8 进行 URL 编码。例如，当请求 URL 为 `http://abc.рф?q=ф` 时，`urlFilter` 与 URL 为 `http://abc.xn--p1ai/?q=%D1%84` 匹配。
+
+### 规范域名
+
+在 `initiatorDomains`、`excludedInitiatorDomains`、`requestDomains` 或 `excludedRequestDomains` 中指定的域应遵循以下规则：
+
+- 允许子域名，如“a.example.com”。
+- 条目必须仅由*小写* ASCII 字符组成。
+- 对于国际化域名，使用[国际化域名编码](https://zh.wikipedia.org/wiki/国际化域名编码)进行编码。
+- IPv4 地址必须表示为由点分隔的 4 个数字。
+- IPv6 地址应表示为规范形式，括在方括号内。
+
+要以编程方式生成 URL 的规范域，请使用 [URL API](/zh-CN/docs/Web/API/URL) 并读取其 `hostname` 属性，即 `new URL(url).hostname`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/session_ruleset_id/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/session_ruleset_id/index.md
new file mode 100644
index 00000000000000..3110f1022d7818
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/session_ruleset_id/index.md
@@ -0,0 +1,48 @@
+---
+title: declarativeNetRequest.SESSION_RULESET_ID
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/SESSION_RULESET_ID
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+扩展添加的会话范围规则的规则集 ID。
+
+其值为 `"_session"`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/setextensionactionoptions/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/setextensionactionoptions/index.md
new file mode 100644
index 00000000000000..7198913b4a4acd
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/setextensionactionoptions/index.md
@@ -0,0 +1,79 @@
+---
+title: declarativeNetRequest.setExtensionActionOptions
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/setExtensionActionOptions
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+配置是否将标签页的操作计数显示为扩展操作的徽章文本，并提供增加操作计数的方法。
+
+## 语法
+
+```js-nolint
+let count = browser.declarativeNetRequest.setExtensionActionOptions(
+ extensionActionOptions, // 对象
+);
+```
+
+### 参数
+
+- `extensionActionOptions`
+
+ - : 包含标签页操作计数配置详细信息的对象。
+ - `displayActionCountAsBadgeText` {{optional_inline}}
+ - : `boolean`。是否自动将页面的操作计数显示为扩展的徽章文本。此首选项在会话之间持久存在。
+ - `tabUpdate` {{optional_inline}}
+ - : `object`。标签页操作计数应如何调整的详细信息。有关更多详细信息，请参见 [tabUpdate](#tabupdate_2) 部分。
+
+## 附加对象
+
+### tabUpdate
+
+- `increment`
+ - : `number`。要增加标签页的操作计数的数量。负值会减少计数。
+- `tabId`
+ - : `number`。要更新操作计数的标签页。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会被兑现且不带参数。如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/testmatchoutcome/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/testmatchoutcome/index.md
new file mode 100644
index 00000000000000..250fbd45202e16
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/testmatchoutcome/index.md
@@ -0,0 +1,88 @@
+---
+title: declarativeNetRequest.testMatchOutcome
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/testMatchOutcome
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+检查扩展的任何 `declarativeNetRequest` 规则是否与假设请求匹配。仅在测试期间可用，因为这是用于扩展开发的。有关如何在每个浏览器中启用测试的详细信息，请参见[测试](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#测试)。
+
+## 语法
+
+```js-nolint
+let result = await browser.declarativeNetRequest.testMatchOutcome(
+ request, // 对象
+ options // 可选的对象
+);
+```
+
+### 参数
+
+- `request`
+
+ - : 要测试的请求的详细信息。
+ - `initiator` {{optional_inline}}
+ - : `string`。假设请求的发起者 URL（如果有）。
+ - `method` {{optional_inline}}
+ - : `string`。假设请求的标准 HTTP 方法（小写）。默认为 HTTP 请求的 `"get"`，对于非 HTTP 请求，则忽略此项。
+ - `tabId` {{optional_inline}}
+ - : `number`。发生假设请求的标签页的 ID。不需要对应实际标签页的 ID。默认为 `-1`，表示请求与标签页无关。
+ - `type`
+ - : {{WebExtAPIRef("declarativeNetRequest.ResourceType")}}。假设请求的资源类型。
+ - `url`
+ - : `string`。假设请求的 URL。
+
+- `options` {{optional_inline}}
+
+ - : 请求选项的详细信息。
+ - `includeOtherExtensions` {{optional_inline}}
+ - : `boolean`。表示是否在 `matchedRules` 中包含其他扩展的匹配规则。当其他扩展的规则匹配时，生成的 `matchedRule` 将具有 `extensionId` 属性。默认为 `false`。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个具有以下属性的对象：
+
+- `matchedRules`
+ - : {{WebExtAPIRef("declarativeNetRequest.MatchedRule")}}。与假设请求匹配的规则的详细信息（如果有）。
+
+如果没有规则匹配，则 `matchedRules` 数组为空。如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updatedynamicrules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updatedynamicrules/index.md
new file mode 100644
index 00000000000000..2890b16a1def63
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updatedynamicrules/index.md
@@ -0,0 +1,75 @@
+---
+title: declarativeNetRequest.updateDynamicRules
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/updateDynamicRules
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+修改扩展的一组动态规则。首先删除在 `options.removeRuleIds` 中列出的规则，然后添加 `options.addRules` 中给出的规则。请注意：
+
+- 此更新作为原子操作进行：要么所有指定的规则都添加和删除，要么返回错误。
+- 这些规则会跨浏览器会话和扩展更新进行持久化。
+- 不能使用此函数删除作为扩展包的一部分指定的静态规则。
+- {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES")}} 是扩展可以添加的动态和会话规则的最大数量。
+
+## 语法
+
+```js-nolint
+let updatedRules = browser.declarativeNetRequest.updateDynamicRules(
+ options // 对象
+);
+```
+
+### 参数
+
+- `options`
+
+ - : 包含要从动态规则中添加或删除的规则详细信息的对象。
+ - `addRules` {{optional_inline}}
+ - : 一个 {{WebExtAPIRef("declarativeNetRequest.Rule")}} 数组。要添加的规则的详细信息。
+ - `removeRuleIds` {{optional_inline}}
+ - : 一个 `number` 数组。要移除的规则的 ID。任何无效的 ID 都将被忽略。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果请求成功，其会被兑现且不带参数。如果请求失败，则 promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updateenabledrulesets/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updateenabledrulesets/index.md
new file mode 100644
index 00000000000000..620fcf65c6263c
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updateenabledrulesets/index.md
@@ -0,0 +1,68 @@
+---
+title: declarativeNetRequest.updateEnabledRulesets
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/updateEnabledRulesets
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+更新扩展的静态规则集。首先禁用 `options.disableRulesetIds` 中列出的规则集，然后激活 `options.enableRulesetIds` 中列出的规则集。请注意，启用的静态规则集的集合会跨会话保留，但不会跨扩展更新保留，即每次扩展更新时，[declarative_net_request.rule_resources 清单键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/declarative_net_request)决定了启用的静态规则集的集合。
+
+## 语法
+
+```js-nolint
+let updatedRulesets = browser.declarativeNetRequest.updateEnabledRulesets(
+ options // 对象
+);
+```
+
+### 参数
+
+- `options`
+
+ - : 一个详细说明扩展的静态规则集中要激活或禁用的规则集的对象。
+ - `disableRulesetIds` {{optional_inline}}
+ - : 一个 `string` 数组。要禁用的静态规则集的 ID。
+ - enableRulesetIds {{optional_inline}}
+ - : 一个 `string` 数组。要激活的静态规则集的 ID。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果请求成功，其会被兑现且不带参数。如果请求失败，则 promise 将被拒绝并带有错误消息。
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updatesessionrules/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updatesessionrules/index.md
new file mode 100644
index 00000000000000..fc9127cbe7f315
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/updatesessionrules/index.md
@@ -0,0 +1,74 @@
+---
+title: declarativeNetRequest.updateSessionRules
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/updateSessionRules
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+修改扩展的一组作用域规则。首先移除 `options.removeRuleIds` 中列出的规则的 ID，然后添加 `options.addRules` 中列出的规则。请注意：
+
+- 此更新作为原子操作进行：要么所有指定的规则都添加和移除，要么返回错误。
+- 这些规则不会跨浏览器会话保留。
+- {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES","MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES")}} 是扩展可以添加的动态和会话规则的最大数量。
+
+## 语法
+
+```js-nolint
+let updatedRuleset = browser.declarativeNetRequest.updateSessionRules(
+ options // 对象
+);
+```
+
+### 参数
+
+- `options`
+
+ - : 包含要从动态规则中添加或删除的规则的详细信息的对象。
+ - `addRules` {{optional_inline}}
+ - : 一个 {{WebExtAPIRef("declarativeNetRequest.Rule")}} 数组。要添加的规则的详细信息。
+ - `removeRuleIds` {{optional_inline}}
+ - : 一个 `number` 数组。要移除的规则的 ID。任何无效的 ID 都将被忽略。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。如果请求成功，其会被兑现且不带参数。如果请求失败，则 promise 将被拒绝并带有错误消息。
+
+## 示例
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/urltransform/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/urltransform/index.md
new file mode 100644
index 00000000000000..2858ed34e7b38e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/declarativenetrequest/urltransform/index.md
@@ -0,0 +1,77 @@
+---
+title: declarativeNetRequest.URLTransform
+slug: Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest/URLTransform
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+描述 URL 转换以执行重定向规则的详细信息。此对象可以在 {{WebExtAPIRef("declarativeNetRequest.RuleAction", "rule.action")}}.redirect.transform 中指定。
+
+## 类型
+
+该类型的值是对象，包含以下属性：
+
+- `fragment` {{optional_inline}}
+ - : `string`。请求的新片段。应为空（此情况下现有片段将被清除），或者应以 `#` 开头。
+- `host` {{optional_inline}}
+ - : `string`。请求的新主机名。
+- `password` {{optional_inline}}
+ - : `string`。请求的新密码。
+- `path` {{optional_inline}}
+ - : `string`。请求的新路径。如果为空，现有路径将被清除。
+- `port` {{optional_inline}}
+ - : `string`。请求的新端口。如果为空，现有端口将被清除。
+- `query` {{optional_inline}}
+ - : `string`。请求的新查询。应为空（此情况下现有查询将被清除），或者应以 `?` 开头。
+- `queryTransform` {{optional_inline}}
+ - : 一个描述如何添加、删除或替换查询键值对的对象。如果指定了 `query`，则不能指定此属性。
+ - `addOrReplaceParams` {{optional_inline}}
+ - : 描述要添加或替换的查询键值对列表的对象数组。
+ - `key`
+ - : `string`。键。
+ - `replaceOnly` {{optional_inline}}
+ - : `boolean`。如果为 true，则仅在查询键已存在时进行替换。否则，如果键缺失也会添加。默认为 false。
+ - `value`
+ - : `string`。值。
+ - `removeParams` {{optional_inline}}
+ - : `string` 数组。要删除的查询键列表。
+- `scheme` {{optional_inline}}
+ - : `string`。请求的新方案（scheme）。允许的值有 `"http"`、`"https"`，以及扩展的方案，例如 Firefox 中的“moz-extension”或 Chrome 中的“chrome-extension”。当使用扩展的方案时，必须指定 `host` 以生成有意义的重定向目标。
+- `username` {{optional_inline}}
+ - : `string`。请求的新用户名。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/index.md
new file mode 100644
index 00000000000000..9fc8b8ada59eca
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/index.md
@@ -0,0 +1,59 @@
+---
+title: devtools
+slug: Mozilla/Add-ons/WebExtensions/API/devtools
+l10n:
+ sourceCommit: 0210ca9c0d036c29acea25295974118ff46338a8
+---
+
+{{AddonSidebar}}
+
+允许扩展与浏览器的{{Glossary("Developer Tools", "开发者工具")}}进行交互。你可以使用这个 API 来创建开发者工具页面，操作被检查的窗口，检查页面的网络使用情况。
+
+要使用这个 API，你必须在清单（manifest）中指定相应的 [`devtools_page`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page) 键。使用这个清单键会触发[安装时的开发者工具权限警告](https://support.mozilla.org/zh-CN/kb/permission-request-messages-firefox-extensions#w_extend-developer-tools-to-access-your-data-in-open-tabs)。为了避免安装时的权限警告，可以在 [`optional_permissions`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions) 清单键中列出 `"devtools"` 权限，将该特性标记为可选。
+
+> **备注：** `"devtools"` 可选权限仅被 Firefox 支持，Chrome 不支持（[Chromium issue 1143015](https://crbug.com/1143015)）。
+
+## 属性
+
+- {{WebExtAPIRef("devtools.inspectedWindow")}}
+ - : 与开发者工具附加到的窗口（检查窗口）进行交互。这包括获取检查页面的标签页 ID，在检查窗口的上下文中评估代码，重新加载页面，或获取页面内的资源列表。
+- {{WebExtAPIRef("devtools.network")}}
+ - : 获取与开发者工具附加到的窗口（检查窗口）相关的网络请求信息。
+- {{WebExtAPIRef("devtools.panels")}}
+ - : 创建将在用户代理开发者工具内显示的用户界面面板。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.devtools`](https://developer.chrome.com/docs/extensions/mv2/devtools/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
new file mode 100644
index 00000000000000..71aae0e62f6234
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
@@ -0,0 +1,64 @@
+---
+title: devtools.inspectedWindow
+slug: Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
+---
+
+{{AddonSidebar}}
+
+> **备注：** 本页面描述的是在 Firefox 54 中存在的 WebExtensions devtools API。尽管这些 API 基于 [Chrome devtools API](https://developer.chrome.com/docs/extensions/mv3/devtools/)，但 Firefox 中仍有许多特性尚未实现，因此在这里未被记录。要查看目前缺失哪些特性，请参见 [devtools API 的局限性](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools#devtools_api_的局限性)。
+
+`devtools.inspectedWindow` API 允许开发者工具扩展与附加到开发者工具的窗口进行交互。
+
+像所有 `devtools` API 一样，只有在 [devtools_page](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page) manifest.json 键定义的文档中运行的代码，或扩展创建的其他开发者工具文档（如扩展创建的面板托管的文档）才能使用这个 API。有关更多信息，请参见[扩展开发者工具](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)。
+
+## 属性
+
+- [`devtools.inspectedWindow.tabId`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/tabId)
+ - : 开发者工具附加到的窗口的 ID。
+
+## 函数
+
+- [`devtools.inspectedWindow.eval()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/eval)
+ - : 在目标窗口中执行一些 JavaScript 代码。
+- [`devtools.inspectedWindow.reload()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/reload)
+ - : 重新加载目标窗口的文档。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的[`chrome.devtools.inspectedWindow`](https://developer.chrome.com/docs/extensions/reference/devtools_inspectedWindow/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/network/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/network/index.md
new file mode 100644
index 00000000000000..62a42819023f3c
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/network/index.md
@@ -0,0 +1,62 @@
+---
+title: devtools.network
+slug: Mozilla/Add-ons/WebExtensions/API/devtools/network
+l10n:
+ sourceCommit: 17d79d74849acaa98db0eccbfacc321fd50a7311
+---
+
+{{AddonSidebar}}
+
+`devtools.network` API 允许开发者工具扩展获取与开发者工具附加的窗口（被检查的窗口）相关的网络请求信息。
+
+像所有 `devtools` API 一样，只有在 [devtools_page](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page) manifest.json 键定义的文档中运行的代码，或扩展创建的其他开发者工具文档（如扩展创建的面板托管的文档）才能使用这个 API。有关更多信息，请参见[扩展开发者工具](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)。
+
+## 函数
+
+- [`devtools.network.getHAR()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/network/getHAR)
+ - : 获取当前标签页加载页面的 [HAR 日志](http://www.softwareishard.com/blog/har-12-spec/#log)。
+
+## 事件
+
+- [`devtools.network.onNavigated`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/network/onNavigated)
+ - : 当用户将检查窗口导航到新页面时触发。
+- [`devtools.network.onRequestFinished`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/network/onRequestFinished)
+ - : 当网络请求完成且其详细信息可供扩展使用时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.devtools.network`](https://developer.chrome.com/docs/extensions/reference/devtools_network/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/panels/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/panels/index.md
new file mode 100644
index 00000000000000..783a6ac55a810d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/panels/index.md
@@ -0,0 +1,82 @@
+---
+title: devtools.panels
+slug: Mozilla/Add-ons/WebExtensions/API/devtools/panels
+l10n:
+ sourceCommit: 2e7f2f7b1a817425d451a6633e131dec6b3943bf
+---
+
+{{AddonSidebar}}
+
+> **备注：** 尽管这些 API 基于 [Chrome devtools API](https://developer.chrome.com/docs/extensions/mv3/devtools/)，但 Firefox 中仍有许多特性尚未实现，因此这里未记录。要查看当前缺少哪些特性，请参阅 [devtools API 的局限性](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools#devtools_api_的局限性)。
+
+`devtools.panels` API 允许 devtools 扩展在 devtools 窗口内定义其用户界面。
+
+devtools 窗口托管了多个独立的工具——JavaScript 调试器、网络监视器等。顶部的一排标签让用户可以在不同的工具之间切换。每个工具用户界面的窗口称为“面板”。
+
+使用 `devtools.panels` API，你可以在开发者工具窗口中创建新的面板。
+
+像所有 `devtools` API 一样，只有在 [devtools_page](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page) manifest.json 键定义的文档中运行的代码，或扩展创建的其他开发者工具文档（如扩展创建的面板托管的文档）才能使用这个 API。有关更多信息，请参见[扩展开发者工具](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)。
+
+## 类型
+
+- [`devtools.panels.ElementsPanel`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ElementsPanel)
+ - : 表示浏览器开发者工具中的 HTML/CSS 检查器。
+- [`devtools.panels.ExtensionPanel`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ExtensionPanel)
+ - : 表示由扩展创建的开发者工具面板。
+- [`devtools.panels.ExtensionSidebarPane`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ExtensionSidebarPane)
+ - : 表示扩展添加到浏览器开发者工具中 HTML/CSS 检查器的窗格。
+
+## 属性
+
+- [`devtools.panels.elements`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/elements)
+ - : 对 [`ElementsPanel`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ElementsPanel) 对象的引用。
+- [`devtools.panels.themeName`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/themeName)
+ - : 当前开发者工具主题的名称。
+
+## 函数
+
+- [`devtools.panels.create()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/create)
+ - : 创建一个新的开发者工具面板。
+
+## 事件
+
+- [`devtools.panels.onThemeChanged`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/onThemeChanged)
+ - : 当开发者工具主题更改时触发。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.devtools.panels`](https://developer.chrome.com/docs/extensions/reference/devtools_panels/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/dns/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/dns/index.md
new file mode 100644
index 00000000000000..46132f246fb629
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/dns/index.md
@@ -0,0 +1,25 @@
+---
+title: dns
+slug: Mozilla/Add-ons/WebExtensions/API/dns
+l10n:
+ sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
+---
+
+{{AddonSidebar}}
+
+允许扩展程序解析域名。
+
+要使用此 API，扩展程序必须在其 [`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中请求“dns”[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+> **备注：** 如果启用通过 SOCKS 代理的 DNS 解析，DNS 解析将失败并显示 NS_ERROR_UNKNOWN_PROXY_HOST。
+
+## 函数
+
+- {{WebExtAPIRef("dns.resolve()")}}
+ - : 将给定的主机名解析为 DNS 记录。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/dns/resolve/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/dns/resolve/index.md
new file mode 100644
index 00000000000000..b4c3f527de3d0c
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/dns/resolve/index.md
@@ -0,0 +1,88 @@
+---
+title: dns.resolve()
+slug: Mozilla/Add-ons/WebExtensions/API/dns/resolve
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+将给定的主机名解析为 DNS 记录。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let resolving = browser.dns.resolve(
+ hostname, // 字符串
+ flags // 字符串数组
+)
+```
+
+### 参数
+
+- `hostname`
+ - : `string`。要解析的主机名。
+- `flags` {{optional_inline}}
+
+ - : `string` 数组。用于修改主机名解析方式的标志。任何省略的标志默认值为 `false`。你可以传递零个或多个以下标志：
+
+ - `"allow_name_collisions"`：允许通常被过滤掉的名称冲突结果。
+ - `"bypass_cache"`：禁用内部 DNS 查询缓存。
+ - `"canonical_name"`：将查询指定主机的规范名称。
+ - `"disable_ipv4"`：仅返回 IPv6 地址。
+ - `"disable_ipv6"`：仅返回 IPv4 地址。
+ - `"disable_trr"`：不使用可信递归解析器（TRR）解析主机名。TRR 使得可以使用专用的 [DNS-over-HTTPS](https://datatracker.ietf.org/doc/html/draft-ietf-doh-dns-over-https-02) 服务器解析主机名。
+ - `"offline"`：仅返回字面值和缓存条目。
+ - `"priority_low"`：请求被赋予较低优先级。如果也给出了“priority_medium”，查询被赋予中等优先级。
+ - `"priority_medium"`：请求被赋予中等优先级。如果也给出了“priority_low”，查询被赋予中等优先级。
+ - `"speculate"`：表示请求是推测性的。如果浏览器配置禁用了预取，推测性请求会返回错误。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个 `DNSRecord` 对象。该对象可以包含以下属性：
+
+- `addresses`
+ - : `string` 数组。与此 DNS 记录关联的 IP 地址。
+- `canonicalName`
+ - : `string`。此记录的规范名称。仅当将 `"canonical_name"` 标志传递给 `resolve()` 时，才会包含在响应中。
+- `isTRR`
+ - : `boolean`。如果记录是使用可信递归解析器（TRR）检索的，则为 `true`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+function resolved(record) {
+ console.log(record.addresses);
+}
+
+let resolving = browser.dns.resolve("example.com");
+resolving.then(resolved);
+
+// > 例如数组：[ "192.0.2.172" ]
+```
+
+绕过缓存，并请求规范名称：
+
+```js
+function resolved(record) {
+ console.log(record.canonicalName);
+ console.log(record.addresses);
+}
+
+let resolving = browser.dns.resolve("developer.mozilla.org", [
+ "bypass_cache",
+ "canonical_name",
+]);
+resolving.then(resolved);
+
+// > 例如：xyz.us-west-2.elb.amazonaws.com
+// > 例如数组：[ "192.0.2.172", "198.51.100.45" ]
+```
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/dom/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/dom/index.md
new file mode 100644
index 00000000000000..03cd5f623f819a
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/dom/index.md
@@ -0,0 +1,21 @@
+---
+title: dom
+slug: Mozilla/Add-ons/WebExtensions/API/dom
+l10n:
+ sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
+---
+
+{{AddonSidebar}}
+
+访问仅特殊扩展程序可用的 DOM 特性。
+
+## 函数
+
+- {{WebExtAPIRef("dom.openOrClosedShadowRoot()")}}
+ - : 获取指定元素的开放或封闭的影子（shadow）DOM。如果影子 DOM 未附加到该元素，则返回 `null`。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/dom/openorclosedshadowroot/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/dom/openorclosedshadowroot/index.md
new file mode 100644
index 00000000000000..a137c3af9f8a88
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/dom/openorclosedshadowroot/index.md
@@ -0,0 +1,40 @@
+---
+title: dom.openOrClosedShadowRoot()
+slug: Mozilla/Add-ons/WebExtensions/API/dom/openOrClosedShadowRoot
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+获取指定元素的开放或封闭的影子根。如果影子根未附加到该元素，则返回 `null`。
+
+> **备注：** 在 Firefox 中，等效属性是 `element.openOrClosedShadowRoot`。该只读属性表示元素所承载的影子 DOM，无论其 {{DOMxRef("ShadowRoot.mode", "mode")}} 是 `open` 还是 `closed`。
+>
+> 使用 {{DOMxRef("Element.attachShadow()")}} 将影子 DOM 添加到元素中。
+
+## 语法
+
+```js-nolint
+let shadowRoot = browser.dom.openOrClosedShadowRoot(
+ element, // HTMLElement
+)
+```
+
+### 参数
+
+- `element`
+ - : `HTMLElement`。宿主元素。
+
+### 返回值
+
+一个 {{DOMxRef("ShadowRoot")}} 对象实例，无论其 {{DOMxRef("ShadowRoot.mode", "mode")}} 设置为 `open` 还是 `closed`，如果没有影子 DOM，则返回 `null`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{DOMxRef("Element.shadowRoot")}}
+- [`chrome.dom.openOrClosedShadowRoot`](https://developer.chrome.com/docs/extensions/reference/dom/#method-openOrClosedShadowRoot)
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/acceptdanger/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/acceptdanger/index.md
new file mode 100644
index 00000000000000..cdaf5edd083f88
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/acceptdanger/index.md
@@ -0,0 +1,69 @@
+---
+title: downloads.acceptDanger()
+slug: Mozilla/Add-ons/WebExtensions/API/downloads/acceptDanger
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("downloads")}} API 的 **`acceptDanger()`** 函数用于提示用户接受或取消一个潜在危险的下载。
+
+此函数不能从后台脚本调用，只能在可见窗口中运行的脚本（例如浏览器或页面操作的弹出窗口）中调用。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let prompting = browser.downloads.acceptDanger(
+ downloadId // 整型
+)
+```
+
+### 参数
+
+- `downloadId`
+ - : 一个表示相关 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} 的 `id` 的 `integer`。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。当对话框关闭时其会兑现，且不带任何参数。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.downloads`](https://developer.chrome.com/docs/extensions/reference/downloads/#method-acceptDanger) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/cancel/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/cancel/index.md
new file mode 100644
index 00000000000000..58d14b8571eada
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/cancel/index.md
@@ -0,0 +1,84 @@
+---
+title: downloads.cancel()
+slug: Mozilla/Add-ons/WebExtensions/API/downloads/cancel
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+{{WebExtAPIRef("downloads")}} API 的 **`cancel()`** 函数用于取消一个下载操作。如果下载未处于活动状态（例如，已完成下载），则调用将失败。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let canceling = browser.downloads.cancel(
+ downloadId // 整型
+)
+```
+
+### 参数
+
+- `downloadId`
+ - : `integer`。要取消的下载的 id。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，如果请求成功其会兑现，且不带任何参数。如果请求失败，promise 将被拒绝并带有错误消息。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+```js
+let downloadId = 13;
+
+function onCanceled() {
+ console.log(`Canceled download`);
+}
+
+function onError(error) {
+ console.log(`Error: ${error}`);
+}
+
+let canceling = browser.downloads.cancel(downloadId);
+canceling.then(onCanceled, onError);
+```
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.downloads`](https://developer.chrome.com/docs/extensions/reference/downloads/#method-cancel) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/index.md
index 3f89dd96401ac7..fee3e37358d778 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/downloads/index.md
@@ -1,84 +1,84 @@
---
title: downloads
slug: Mozilla/Add-ons/WebExtensions/API/downloads
+l10n:
+ sourceCommit: f72ba695e4d6d4dd74ee71a2cc3b774410acd1ea
---
-{{AddonSidebar}}启用与浏览器的下载管理器交互的扩展。你可以使用这个 API 模块来下载文件、取消、暂停、恢复下载和在文件管理器中显示下载的文件。
+{{AddonSidebar}}
-为使用此 API，你需要在你的 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中声明 "downloads" [API 权限](/zh-CN/Add-ons/WebExtensions/manifest.json/permissions#API_permissions)。
+允许扩展程序与浏览器的下载管理器进行交互。你可以使用此 API 模块下载文件，取消、暂停、恢复下载，并在文件管理器中显示已下载的文件。
-## Types
+要使用此 API，你需要在 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中指定“downloads” [API 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_权限)。
+
+## 类型
- {{WebExtAPIRef("downloads.FilenameConflictAction")}}
- - : 定义当一个下载的文件与现存的文件命名冲突时要做什么。
+ - : 定义当下载的文件名与现有文件冲突时的处理选项。
- {{WebExtAPIRef("downloads.InterruptReason")}}
- - : 定义一系列中断下载的可能理由。
+ - : 定义下载中断的可能原因。
- {{WebExtAPIRef("downloads.DangerType")}}
- - : 定义一组与可下载文件相关的潜在危险的常见警告。
+ - : 定义与可下载文件相关的常见危险警告。
- {{WebExtAPIRef("downloads.State")}}
- - : 定义当前下载可能处于的不同状态。
+ - : 定义当前下载的不同状态。
- {{WebExtAPIRef("downloads.DownloadItem")}}
- - : 代表下载的文件。
+ - : 表示已下载的文件。
- {{WebExtAPIRef("downloads.StringDelta")}}
- : 表示两个字符串之间的差异。
- {{WebExtAPIRef("downloads.DoubleDelta")}}
- - : 代表两个双精度浮点数之间的差异。
+ - : 表示两个双精度浮点数之间的差异。
- {{WebExtAPIRef("downloads.BooleanDelta")}}
- - : 代表两个布尔数之间的差异。
+ - : 表示两个布尔值之间的差异。
- {{WebExtAPIRef("downloads.DownloadTime")}}
- - : 代表一个下载将会花费的时间。
+ - : 表示下载完成所需的时间。
- {{WebExtAPIRef("downloads.DownloadQuery")}}
- - : 定义一组参数，可用于在下载管理器中搜索一组特定的下载。
+ - : 定义一组参数，这些参数可用于在下载管理器中搜索特定的下载集合。
-## Functions
+## 函数
- {{WebExtAPIRef("downloads.download()")}}
- - : 下载一个文件，给出它的 URL 和其他可选的参数。
+ - : 根据给定的 URL 和其他可选首选项下载文件。
- {{WebExtAPIRef("downloads.search()")}}
- - : 查询 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} 是否在浏览器的下载管理器中可用，返回匹配指定的搜索标准的条目。
+ - : 查询浏览器下载管理器中可用的 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}}，并返回符合指定搜索条件的项目。
- {{WebExtAPIRef("downloads.pause()")}}
- - : 暂停一个下载。
+ - : 暂停下载。
- {{WebExtAPIRef("downloads.resume()")}}
- - : 恢复一个暂停的下载。
+ - : 恢复暂停的下载。
- {{WebExtAPIRef("downloads.cancel()")}}
- - : 取消一个下载。
+ - : 取消下载。
- {{WebExtAPIRef("downloads.getFileIcon()")}}
- : 检索指定下载的图标。
- {{WebExtAPIRef("downloads.open()")}}
- - : 用下载的文件相关联的程序打开它。
+ - : 使用关联的应用程序打开已下载的文件。
- {{WebExtAPIRef("downloads.show()")}}
- - : 打开当前平台的文件管理应用来在它包含的文件夹中显示下载的文件。
+ - : 打开平台的文件管理器应用程序，以显示包含已下载文件的文件夹。
- {{WebExtAPIRef("downloads.showDefaultFolder()")}}
- - : 用当前平台的文件管理应用显示默认下载文件夹。
+ - : 打开平台的文件管理器应用程序，以显示默认的下载文件夹。
- {{WebExtAPIRef("downloads.erase()")}}
- - : 擦除浏览器的下载历史中匹配 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} 的下载记录，不会在磁盘中删除文件。
+ - : 从浏览器的下载历史记录中删除匹配的 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}}，而不从磁盘上删除下载的文件。
- {{WebExtAPIRef("downloads.removeFile()")}}
- - : 从磁盘中移除下载的文件，但不从浏览器的下载历史中去除。
+ - : 从磁盘上删除已下载的文件，但不从浏览器的下载历史记录中删除。
- {{WebExtAPIRef("downloads.acceptDanger()")}}
- - : 提示用户接受或取消危险的下载。
-- {{WebExtAPIRef("downloads.drag()")}}
- - : 将下载的文件拖动到另一个应用程序。
+ - : 提示用户接受或取消危险下载。
- {{WebExtAPIRef("downloads.setShelfEnabled()")}}
- - : 启用或禁用与当前浏览器配置文件关联的每个窗口底部的灰色架子。只要至少一个扩展名已禁用该架子，它就会被禁用。
+ - : 启用或禁用与当前浏览器配置文件关联的每个窗口底部的灰色下载栏。只要至少有一个扩展程序禁用了下载栏，下载栏将保持禁用状态。
-## Events
+## 事件
- {{WebExtAPIRef("downloads.onCreated")}}
- - : 当一个下载开始时被 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} 对象触发。
+ - : 下载开始时，触发并传递 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} 对象。
- {{WebExtAPIRef("downloads.onErased")}}
- - : 当一个下载从历史中擦除时被 Fires with the `downloadId` 触发。
+ - : 从历史记录中删除下载时，触发并传递 `downloadId`。
- {{WebExtAPIRef("downloads.onChanged")}}
- - : 当任意一个 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} 的属性期望 `bytesReceived` 改变时，此事件被这个 `downloadId` 和包含了变化属性的对象触发。
+ - : 当 {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} 的任何属性（除了 `bytesReceived`）发生变化时，触发并传递 `downloadId` 和包含更改属性的对象。
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
{{WebExtExamples("h2")}}
-> **备注：** This API is based on Chromium's [`chrome.downloads`](https://developer.chrome.com/extensions/downloads) API.
->
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> **备注：** 此 API 基于 Chromium 的 [`chrome.downloads`](https://developer.chrome.com/docs/extensions/reference/downloads/) API。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md
index 38398620b8c12a..518d04aea71dca 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md
@@ -3,6 +3,8 @@ title: runtime.openOptionsPage()
slug: Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage
---
+{{AddonSidebar}}
+
假如你的页面有[options page](/zh-CN/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages)（设置页面）的定义，使用此方法打开它。这是一个异步方法，返回一个 `Promise` 对象。
## 语法
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md
new file mode 100644
index 00000000000000..408e1faa1b7716
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md
@@ -0,0 +1,87 @@
+---
+title: tabs.captureTab()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/captureTab
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+创建一个数据 URL，编码给定标签页区域图像。你必须拥有 `<all_urls>` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)才能使用此方法。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+```js-nolint
+let capturing = browser.tabs.captureTab(
+ tabId, // 可选的整数
+ options // 可选的 extensionTypes.ImageDetails
+)
+```
+
+### 参数
+
+- `tabId` {{optional_inline}}
+ - : `integer`。要捕获的标签页的 ID。默认为当前窗口中的活动标签页。
+- `options` {{optional_inline}}
+ - : {{WebExtAPIRef('extensionTypes.ImageDetails')}}。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个编码了捕获图像的数据 URL。可以赋值给 HTML 图片元素的 `'src'` 属性来显示。如果发生任何错误，promise 将被拒绝并带有错误消息。
+
+## 示例
+
+捕获当前窗口中活动标签页的图像，使用默认设置：
+
+```js
+function onCaptured(imageUri) {
+ console.log(imageUri);
+}
+
+function onError(error) {
+ console.log(`错误：${error}`);
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ let capturing = browser.tabs.captureTab();
+ capturing.then(onCaptured, onError);
+});
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-captureVisibleTab) API。本文档内容源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
new file mode 100644
index 00000000000000..616215a09d83ff
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md
@@ -0,0 +1,91 @@
+---
+title: tabs.captureVisibleTab()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab
+l10n:
+ sourceCommit: 7409f4b5405bb4cb4ffa33a31c7900d08960061f
+---
+
+{{AddonSidebar}}
+
+创建一个编码了给定标签页区域图像的数据 URL。你必须拥有 `<all_urls>` 或 `activeTab` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+> **备注：** 在 Firefox 125 及更早版本中，此方法仅在拥有 `<all_urls>` 权限时可用。
+
+除了扩展通常可以访问的站点之外，这种方法还允许扩展捕获那些通常受限制的敏感站点，包括浏览器用户界面页面和其他扩展的页面。只有通过 `activeTab` 权限才能捕获这些敏感站点。当扩展获得文件访问权限时，Chrome 也允许捕获文件 URL。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+```js-nolint
+let capturing = browser.tabs.captureVisibleTab(
+ windowId, // 可选的整数
+ options // 可选的 extensionTypes.ImageDetails
+)
+```
+
+### 参数
+
+- `windowId` {{optional_inline}}
+ - : `integer`。要捕获的窗口。默认为当前窗口。
+- `options` {{optional_inline}}
+ - : {{WebExtAPIRef('extensionTypes.ImageDetails')}}。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个编码了捕获图像的数据 URL。可以赋值给 HTML 图片元素的 `'src'` 属性来显示。如果发生任何错误，promise 将以错误消息拒绝。
+
+## 示例
+
+捕获当前窗口中活动标签页的图像，使用默认图像设置：
+
+```js
+function onCaptured(imageUri) {
+ console.log(imageUri);
+}
+
+function onError(error) {
+ console.log(`错误：${error}`);
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ let capturing = browser.tabs.captureVisibleTab();
+ capturing.then(onCaptured, onError);
+});
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-captureVisibleTab) API。本文档内容源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
new file mode 100644
index 00000000000000..b1d8e0c0f3b17e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
@@ -0,0 +1,112 @@
+---
+title: tabs.detectLanguage()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/detectLanguage
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+使用[紧凑语言检测器](https://github.com/CLD2Owners/cld2)（CLD）检测标签页内容的主要语言。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let detecting = browser.tabs.detectLanguage(
+ tabId, // 可选整数
+ callback // 可选函数
+)
+```
+
+### 参数
+
+- `tabId` {{optional_inline}}
+ - : `integer`。默认为当前窗口的活动标签。
+- `callback` {{optional_inline}}
+ - : `function`。目前，如果指定了 `tabId`，该方法将使用此回调函数返回结果，而不是返回一个 promise。回调函数接收一个包含检测到的语言代码（例如 `en` 或 `fr`）的字符串作为唯一输入参数。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个结果为代表 ISO 语言代码的字符串，如 `en` 或 `fr`。有关该方法支持的完整语言列表，请参见 [kLanguageInfoTable](https://src.chromium.org/viewvc/chrome/trunk/src/third_party/cld/languages/internal/languages.cc#l23)。对于未知语言，将返回 `"und"`（但请参见 [bug 1288263](https://bugzil.la/1288263)）。如果发生任何错误，则该 promise 将以错误消息拒绝。
+
+## 示例
+
+用户点击浏览器操作时检测并记录活动标签的语言：
+
+```js
+function onLanguageDetected(lang) {
+ console.log(`语言是：${lang}`);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.tabs.detectLanguage().then(onLanguageDetected, onError);
+});
+```
+
+用户点击浏览器操作时检测并记录每个打开标签的语言（注意此示例需要“tabs”[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)）：
+
+```js
+function onLanguageDetected(url, lang) {
+ console.log(`在 ${url} 中的语言是：${lang}`);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+function detectLanguages(tabs) {
+ for (const tab of tabs) {
+ browser.tabs
+ .detectLanguage(tab.id)
+ .then((lang) => onLanguageDetected(tab.url, lang), onError);
+ }
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.tabs.query({}).then(detectLanguages, onError);
+});
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-detectLanguage) API。本文档内容源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/discard/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/discard/index.md
new file mode 100644
index 00000000000000..8835ed5fb7c92d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/discard/index.md
@@ -0,0 +1,107 @@
+---
+title: tabs.discard()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/discard
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+丢弃一个或多个标签页。
+
+某些浏览器会自动“丢弃”未使用的标签页以释放内存。被丢弃的标签页仍然在标签栏中可见。浏览器会记住标签页的状态，并在用户选择该标签页时恢复它。关于何时以及什么情况下标签页会被丢弃的细节因浏览器而异。
+
+你可以通过在 {{WebExtAPIRef("tabs.update")}} 中将标签页的 `autoDiscardable` 属性设置为 `false` 来控制浏览器或此 API 是否丢弃标签页。此设置可防止浏览器丢弃该标签页。然后只能通过此 API 丢弃该标签页。
+
+无法丢弃活动标签页或其文档包含会显示提示的 [`beforeunload`](/zh-CN/docs/Web/API/Window/beforeunload_event) 监听器的标签页。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let discarding = browser.tabs.discard(
+ tabIds // 整数或整数数组
+)
+```
+
+### 参数
+
+- `tabIds`
+ - : `integer` 或 `integer` 数组。要丢弃的标签页的 ID 或 ID 数组。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在所有指定的标签页被丢弃后其会被兑现且不带参数。如果发生任何错误（例如，标签页 ID 无效），则该 promise 将被拒绝并带有错误消息。
+
+如果传入的是活动标签页的 ID，它将不会被丢弃，但 promise 仍会被兑现，并且任何其他传入的标签页将被丢弃。
+
+## 示例
+
+丢弃单个标签页：
+
+```js
+function onDiscarded() {
+ console.log(`已被丢弃`);
+}
+
+function onError(error) {
+ console.log(`发送错误：${error}`);
+}
+
+let discarding = browser.tabs.discard(2);
+discarding.then(onDiscarded, onError);
+```
+
+丢弃多个标签页：
+
+```js
+function onDiscarded() {
+ console.log(`已被丢弃`);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+let discarding = browser.tabs.discard([15, 14, 1]);
+discarding.then(onDiscarded, onError);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-discard) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
new file mode 100644
index 00000000000000..92c61f2ea10c89
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md
@@ -0,0 +1,105 @@
+---
+title: tabs.duplicate()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/duplicate
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+根据标签页的 ID 复制一个标签页。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let duplicating = browser.tabs.duplicate(
+ tabId, // 整数
+ duplicateProperties // 可选对象
+)
+```
+
+### 参数
+
+- `tabId`
+ - : `integer`。要复制的标签页的 ID。
+- `duplicateProperties` {{optional_inline}}
+
+ - : `object`。一个描述如何复制标签页的对象。它包含以下属性：
+
+ - `index` {{optional_inline}}
+ - : `integer`。新标签页在窗口中的位置。该值的范围限制为零到窗口中标签页的数量。
+ - `active` {{optional_inline}}
+ - : `boolean`。标签页是否成为窗口中的活动标签页。不影响窗口是否被聚焦。默认为 `true`。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会在复制标签页后兑现一个 {{WebExtAPIRef('tabs.Tab')}} 对象，描述复制的标签页的详细信息。如果扩展具有 [`"tabs"` 权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)或匹配的[主机权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#主机权限)，`Tab` 对象只包含 `url`、`title` 和 `favIconUrl`。如果发生任何错误，则该 promise 将以错误消息拒绝。
+
+> **备注：** 从 Firefox 68 开始，browser.tabs.duplicate() 返回的 promise 在标签页被复制后立即兑现。以前，promise 只有在标签页完全加载后才会兑现。
+
+## 示例
+
+复制第一个标签页，然后记录新创建的标签页的 ID：
+
+```js
+function onDuplicated(tabInfo) {
+ console.log(tabInfo.id);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+// 复制数组中的第一个标签页
+function duplicateFirstTab(tabs) {
+ console.log(tabs);
+ if (tabs.length > 0) {
+ let duplicating = browser.tabs.duplicate(tabs[0].id);
+ duplicating.then(onDuplicated, onError);
+ }
+}
+
+// 查询所有打开的标签页
+let querying = browser.tabs.query({});
+querying.then(duplicateFirstTab, onError);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-duplicate) API。此文档源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/hide/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/hide/index.md
new file mode 100644
index 00000000000000..cc9e48f7dead53
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/hide/index.md
@@ -0,0 +1,83 @@
+---
+title: tabs.hide()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/hide
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+隐藏一个或多个标签页。
+
+隐藏的标签页将不再显示在浏览器的标签栏中。隐藏的标签页不会被自动[丢弃](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/discard)，它们中运行的代码仍然会继续执行。当你隐藏标签页时，你可以显式地丢弃它们，尽管这并不适用于所有情况，但可以帮助减少浏览器使用的资源。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+并非所有的标签页都能够被隐藏：
+
+- 固定的标签页无法被隐藏。
+- 正在共享屏幕、麦克风或摄像头的标签页无法被隐藏。
+- 当前活动的标签页无法被隐藏。
+- 正在关闭过程中的标签页无法被隐藏。
+
+第一次扩展程序隐藏标签页时，浏览器会告知用户该标签页正在被隐藏，展示用户如何访问隐藏的标签页，并提供禁用扩展程序的选项。
+
+要使用此 API，你必须拥有“tabHide”[权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+## 语法
+
+```js-nolint
+let hiding = browser.tabs.hide(
+ tabIds // 整数或整数数组
+)
+```
+
+### 参数
+
+- `tabIds`
+
+ - : `integer` 或 `integer` 数组。要隐藏的一个或多个标签页的 ID。
+
+ 如果其中任何标签页不符合隐藏条件，则它们将不会被隐藏，但调用仍然会成功，并且符合条件的标签页仍将被隐藏。例如，如果传递 `[1, 3]`，而 `1` 是当前活动标签页，则只有 `3` 会被隐藏。
+
+ 但是，如果任何标签页 ID 无效，则调用将失败，并且没有标签页会被隐藏。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个包含被隐藏标签页 ID 的数组。如果发生任何错误，promise 将会被拒绝并返回错误信息。
+
+## 示例
+
+隐藏单个标签页：
+
+```js
+function onHidden() {
+ console.log(`已隐藏`);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+browser.tabs.hide(2).then(onHidden, onError);
+```
+
+隐藏多个标签页：
+
+```js
+function onHidden() {
+ console.log(`已隐藏`);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+browser.tabs.hide([15, 14, 1]).then(onHidden, onError);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md
index 3e1d9bb91608fe..c78788d8234e0e 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md
@@ -1,60 +1,60 @@
---
title: tabs.onActivated
slug: Mozilla/Add-ons/WebExtensions/API/tabs/onActivated
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
---
{{AddonSidebar}}
-当窗体的活动标签变化时触发。请注意事件触发时标签的 URL 可能尚未设置，但是你可以通过监听 {{WebExtAPIRef("tabs.onUpdated")}} 事件在 URL 被设置后得到通知。
+当窗口中的活动标签页更改时触发。请注意，此事件触发时，标签页的 URL 可能尚未设置，但你可以监听 {{WebExtAPIRef("tabs.onUpdated")}} 事件，以便在设置 URL 时收到通知。
## 语法
-```js
-browser.tabs.onActivated.addListener(listener);
-browser.tabs.onActivated.removeListener(listener);
-browser.tabs.onActivated.hasListener(listener);
+```js-nolint
+browser.tabs.onActivated.addListener(listener)
+browser.tabs.onActivated.removeListener(listener)
+browser.tabs.onActivated.hasListener(listener)
```
-此事件有三个方法：
+事件具有三个函数：
-- `addListener(callback)`
- - : 向此事件添加一个监听。
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
- `removeListener(listener)`
- - : 停止监听此事件。 `listener` 参数是将要移除的监听。
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
- `hasListener(listener)`
- - : 检查 `listener` 是否在此事件中注册。如果正在监听返回 `true` ，否则 `false`。
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
## addListener 语法
### 参数
-- `callback`
+- `listener`
- - : 事件发生时被执行的方法。以下参数会被传递至该方法：
+ - : 此事件发生时调用的函数。该函数接收以下参数：
- `activeInfo`
- - : [`object`](#activeInfo). 被激活标签的 ID , 以及它的窗体的 ID。
+ - : `object`。被激活的标签页的 ID 及其窗口的 ID。详见 [activeInfo](#activeinfo_2) 部分。
-## 额外的对象
+## 附加对象
### activeInfo
+- `previousTabId`
+ - : `integer`。上一个被激活的标签页的 ID（如果该标签页仍然打开）。
- `tabId`
- - : `integer`. 被激活的标签的 ID。
+ - : `integer`。已被激活的标签页的 ID。
- `windowId`
- - : `integer`. 此标签的窗体的 ID。
-
-## 浏览器兼容性
-
-{{Compat}}
+ - : `integer`。标签页所属窗口的 ID。
## 示例
-监听并记录标签激活事件：
+监听并记录标签页激活事件：
```js
function handleActivated(activeInfo) {
- console.log("Tab " + activeInfo.tabId + " was activated");
+ console.log(`标签页 ${activeInfo.tabId} 已激活`);
}
browser.tabs.onActivated.addListener(handleActivated);
@@ -62,9 +62,11 @@ browser.tabs.onActivated.addListener(handleActivated);
{{WebExtExamples}}
-> **备注：** This API is based on Chromium's [`chrome.tabs`](https://developer.chrome.com/extensions/tabs#event-onActivated) API. This documentation is derived from [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json) in the Chromium code.
->
-> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onActivated) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onactivechanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onactivechanged/index.md
new file mode 100644
index 00000000000000..b6c7e74723ccb2
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onactivechanged/index.md
@@ -0,0 +1,85 @@
+---
+title: tabs.onActiveChanged
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onActiveChanged
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+> **警告：** 此事件已被弃用。请使用 {{WebExtAPIRef("tabs.onActivated")}} 代替。
+
+当窗口中选中的标签页更改时触发。请注意，此事件触发时，标签页的 URL 可能尚未设置，但你可以监听 {{WebExtAPIRef('tabs.onUpdated')}} 事件，以便在设置 URL 时收到通知。
+
+## 语法
+
+```js-nolint
+browser.tabs.onActiveChanged.addListener(listener)
+browser.tabs.onActiveChanged.removeListener(listener)
+browser.tabs.onActiveChanged.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tabId`
+ - : `integer`。已被激活的标签页的 ID。
+ - `selectInfo`
+ - : `object`。详见 [selectInfo](#selectinfo_2) 部分。
+
+## 附加对象
+
+### selectInfo
+
+- `windowId`
+ - : `integer`。包含选中标签页的窗口的 ID。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onActiveChanged) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onattached/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onattached/index.md
new file mode 100644
index 00000000000000..d9d34b6daab998
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onattached/index.md
@@ -0,0 +1,101 @@
+---
+title: tabs.onAttached
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onAttached
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当标签页附加到窗口时触发，例如因为它在窗口之间移动。
+
+## 语法
+
+```js-nolint
+browser.tabs.onAttached.addListener(listener)
+browser.tabs.onAttached.removeListener(listener)
+browser.tabs.onAttached.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tabId`
+ - : `integer`。附加到新窗口的标签页的 ID。
+ - `attachInfo`
+ - : `object`。新窗口的 ID 以及标签页在其中的位置。详见 [attachInfo](#attachinfo_2) 部分。
+
+## 附加对象
+
+### attachInfo
+
+- `newWindowId`
+ - : `integer`。新窗口的 ID。
+- `newPosition`
+ - : `integer`。标签页在新窗口中的索引位置。
+
+## 示例
+
+监听 attach 事件并记录信息：
+
+```js
+function handleAttached(tabId, attachInfo) {
+ console.log(`标签页：${tabId} 已附加`);
+ console.log(`新窗口：${attachInfo.newWindowId}`);
+ console.log(`新索引：${attachInfo.newPosition}`);
+}
+
+browser.tabs.onAttached.addListener(handleAttached);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onAttached) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
new file mode 100644
index 00000000000000..2b64968940025f
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md
@@ -0,0 +1,90 @@
+---
+title: tabs.onCreated
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onCreated
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当一个标签页被创建时触发。
+
+请注意，此事件触发时，标签页的 URL 可能尚未设置其最终值。特别是，Firefox 在加载新页面之前会以“about:blank”打开一个新标签页。你可以监听 {{WebExtAPIRef("tabs.onUpdated")}} 事件，以便在设置 URL 时收到通知。
+
+## 语法
+
+```js-nolint
+browser.tabs.onCreated.addListener(listener)
+browser.tabs.onCreated.removeListener(listener)
+browser.tabs.onCreated.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tab`
+ - : {{WebExtAPIRef('tabs.Tab')}}。已创建标签页的详细信息。
+
+## 示例
+
+记录新创建标签页的 ID：
+
+```js
+function handleCreated(tab) {
+ console.log(tab.id);
+}
+
+browser.tabs.onCreated.addListener(handleCreated);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onCreated) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/ondetached/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/ondetached/index.md
new file mode 100644
index 00000000000000..e603e66d535966
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/ondetached/index.md
@@ -0,0 +1,101 @@
+---
+title: tabs.onDetached
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onDetached
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当一个标签页从窗口中分离时触发，例如因为它正在被移动到另一个窗口。
+
+## 语法
+
+```js-nolint
+browser.tabs.onDetached.addListener(listener)
+browser.tabs.onDetached.removeListener(listener)
+browser.tabs.onDetached.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tabId`
+ - : `integer`。分离的标签页的 ID。
+ - `detachInfo`
+ - : `object`。前一个窗口的 ID 以及标签页在其中的位置。详见 [detachInfo](#detachinfo_2) 部分。
+
+## 附加对象
+
+### detachInfo
+
+- `oldWindowId`
+ - : `integer`。前一个窗口的 ID。
+- `oldPosition`
+ - : `integer`。标签页在旧窗口中的索引位置。
+
+## 示例
+
+监听分离事件并记录信息：
+
+```js
+function handleDetached(tabId, detachInfo) {
+ console.log(`标签页：${tabId} 已移动`);
+ console.log(`旧窗口：${detachInfo.oldWindowId}`);
+ console.log(`旧索引：${detachInfo.oldPosition}`);
+}
+
+browser.tabs.onDetached.addListener(handleDetached);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onDetached) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md
new file mode 100644
index 00000000000000..0530bd1fc2475b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlightchanged/index.md
@@ -0,0 +1,85 @@
+---
+title: tabs.onHighlightChanged
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onHighlightChanged
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+> **警告：** 此事件已被弃用。请使用 {{WebExtAPIRef("tabs.onHighlighted")}} 代替。
+
+当窗口中高亮或选中的标签页更改时触发。
+
+## 语法
+
+```js-nolint
+browser.tabs.onHighlightChanged.addListener(listener)
+browser.tabs.onHighlightChanged.removeListener(listener)
+browser.tabs.onHighlightChanged.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `selectInfo`
+ - : `object`。详见 [selectInfo](#selectinfo_2) 部分。
+
+## 附加对象
+
+### selectInfo
+
+- `windowId`
+ - : `integer`。标签页发生变化的窗口。
+- `tabIds`
+ - : `integer` 数组。窗口中所有被高亮的标签页。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onHighlightChanged) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlighted/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlighted/index.md
new file mode 100644
index 00000000000000..c89c1c8966cb49
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onhighlighted/index.md
@@ -0,0 +1,99 @@
+---
+title: tabs.onHighlighted
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onHighlighted
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当窗口中被高亮的标签页集合更改时触发。
+
+请注意，在 63 版本之前，Firefox 没有高亮多个标签页的概念，因此此事件只是 {{WebExtAPIRef("tabs.onActivated")}} 的别名。
+
+## 语法
+
+```js-nolint
+browser.tabs.onHighlighted.addListener(listener)
+browser.tabs.onHighlighted.removeListener(listener)
+browser.tabs.onHighlighted.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `highlightInfo`
+ - : `object`。被高亮标签页的 ID 及其窗口的 ID。详见 [highlightInfo](#highlightinfo_2) 部分。
+
+## 附加对象
+
+### highlightInfo
+
+- `windowId`
+ - : `integer`。发生标签页更改的窗口的 ID。
+- `tabIds`
+ - : `integer` 数组。窗口中被高亮的标签页的 ID。
+
+## 示例
+
+监听高亮事件，并记录被高亮标签页的 ID：
+
+```js
+function handleHighlighted(highlightInfo) {
+ console.log(`高亮标签页：${highlightInfo.tabIds}`);
+}
+
+browser.tabs.onHighlighted.addListener(handleHighlighted);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onHighlighted) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md
new file mode 100644
index 00000000000000..b646e2b188078d
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md
@@ -0,0 +1,105 @@
+---
+title: tabs.onMoved
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onMoved
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当标签页在窗口内移动时触发。
+
+仅会触发一次移动事件，用以代表用户直接移动了的标签页。不会为其他响应移动的标签页触发移动事件。此事件不会在标签页在窗口之间移动时触发。对于这种情况，请参阅 {{WebExtAPIRef('tabs.onDetached')}}。
+
+## 语法
+
+```js-nolint
+browser.tabs.onMoved.addListener(listener)
+browser.tabs.onMoved.removeListener(listener)
+browser.tabs.onMoved.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tabId`
+ - : `integer`。用户移动的标签页的 ID。
+ - `moveInfo`
+ - : `object`。有关移动的信息。详见 [moveInfo](#moveinfo_2) 部分。
+
+## 附加对象
+
+### moveInfo
+
+- `windowId`
+ - : `integer`。此标签页所属窗口的 ID。
+- `fromIndex`
+ - : `integer`。此标签页在窗口中的初始索引。
+- `toIndex`
+ - : `integer`。此标签页在窗口中的最终索引。
+
+## 示例
+
+监听并记录移动事件：
+
+```js
+function handleMoved(tabId, moveInfo) {
+ console.log(
+ `标签页 ${tabId} 从 ${moveInfo.fromIndex} 移动至 ${moveInfo.toIndex}`,
+ );
+}
+
+browser.tabs.onMoved.addListener(handleMoved);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onMoved) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onremoved/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onremoved/index.md
new file mode 100644
index 00000000000000..fdc0b4cf5ea239
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onremoved/index.md
@@ -0,0 +1,101 @@
+---
+title: tabs.onRemoved
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onRemoved
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当一个标签页被关闭时触发。
+
+## 语法
+
+```js-nolint
+browser.tabs.onRemoved.addListener(listener)
+browser.tabs.onRemoved.removeListener(listener)
+browser.tabs.onRemoved.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tabId`
+ - : `integer`。关闭的标签页的 ID。
+ - `removeInfo`
+ - : `object`。包含标签页所在窗口的 ID 和一个指示窗口是否也正在关闭的布尔值。详见 [removeInfo](#removeinfo_2) 部分。
+
+## 附加对象
+
+### removeInfo
+
+- `windowId`
+ - : `integer`。关闭标签页的窗口 ID。
+- `isWindowClosing`
+ - : `boolean`。如果标签页是因为窗口正在关闭而被关闭，则为 `true`。
+
+## 示例
+
+监听关闭事件，并记录信息：
+
+```js
+function handleRemoved(tabId, removeInfo) {
+ console.log(`标签页 ${tabId} 正在关闭`);
+ console.log(`窗口 ID${removeInfo.windowId}`);
+ console.log(`窗口正在关闭：${removeInfo.isWindowClosing}`);
+}
+
+browser.tabs.onRemoved.addListener(handleRemoved);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onRemoved) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md
new file mode 100644
index 00000000000000..05ec36f8c05e1c
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onreplaced/index.md
@@ -0,0 +1,93 @@
+---
+title: tabs.onReplaced
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onReplaced
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当一个标签页由于预渲染或立即被另一个标签页替换时触发。
+
+除了 Chrome 浏览器之外的浏览器可能不支持这个事件。
+
+## 语法
+
+```js-nolint
+browser.tabs.onReplaced.addListener(listener)
+browser.tabs.onReplaced.removeListener(listener)
+browser.tabs.onReplaced.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `addedTabId`
+ - : `integer`。替换标签页的 ID。
+ - `removedTabId`
+ - : `integer`。被替换标签页的 ID。
+
+## 示例
+
+监听替换事件，并记录相关信息：
+
+```js
+function handleReplaced(addedTabId, removedTabId) {
+ console.log(`新标签页：${addedTabId}`);
+ console.log(`旧标签页：${removedTabId}`);
+}
+
+browser.tabs.onReplaced.addListener(handleReplaced);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onReplaced) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md
new file mode 100644
index 00000000000000..4d4f46c25b4410
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md
@@ -0,0 +1,87 @@
+---
+title: tabs.onSelectionChanged
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onSelectionChanged
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+> **警告：** 此事件已被弃用。请使用 {{WebExtAPIRef("tabs.onActivated")}} 代替。
+
+当窗口中选中的标签页更改时触发。
+
+## 语法
+
+```js-nolint
+browser.tabs.onSelectionChanged.addListener(listener)
+browser.tabs.onSelectionChanged.removeListener(listener)
+browser.tabs.onSelectionChanged.hasListener(listener)
+```
+
+事件具有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tabId`
+ - : `integer`。成为活动标签页的标签页 ID。
+ - `selectInfo`
+ - : `object`。详见 [selectInfo](#selectinfo_2) 部分。
+
+## 附加对象
+
+### selectInfo
+
+- `windowId`
+ - : `integer`。选中标签页的窗口 ID。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onSelectionChanged) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md
new file mode 100644
index 00000000000000..7307f586989404
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md
@@ -0,0 +1,256 @@
+---
+title: tabs.onUpdated
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated
+l10n:
+ sourceCommit: 44c93b0fb4940a9b9b9942a0a6ca28305c62078f
+---
+
+{{AddonSidebar}}
+
+标签页更新时触发。
+
+当用户在标签页中导航到新 URL 时，通常会生成多个 `onUpdated` 事件，因为 {{WebExtAPIRef("tabs.Tab")}} 对象的各种属性会被更新。这包括 `url`，但也可能包括 `title` 和 `favIconUrl` 属性。`status` 属性会在 `"loading"` 和 `"complete"` 之间循环。
+
+此事件也会在标签页的属性更改时触发，这些更改不涉及导航，例如固定和取消固定（更新 `pinned` 属性）以及静音或取消静音（更新 `audible` 和 `mutedInfo` 属性）。
+
+你可以过滤此事件，使其仅针对 URL 匹配特定[模式](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)的标签页、更改特定属性、更改特定标签页或窗口，或这些限制的任意组合触发。
+
+## 语法
+
+```js-nolint
+browser.tabs.onUpdated.addListener(
+ listener, // 函数
+ filter // 可选的对象
+)
+browser.tabs.onUpdated.removeListener(listener)
+browser.tabs.onUpdated.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(callback, filter)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `tabId`
+ - : `integer`。更新的标签页的 ID。
+ - `changeInfo`
+ - : `object`。标签页更改的属性。详见 [changeInfo](#changeinfo_2) 部分。
+ - `tab`
+ - : {{WebExtAPIRef('tabs.Tab')}}。标签页的新状态。
+
+- `filter` {{optional_inline}}
+
+ - : `object`。一组过滤器，限制发送给此监听器的事件。此对象可以具有以下属性之一或多个。仅当事件满足提供的所有过滤器时才发送事件。
+
+ - `urls`
+ - : `Array`。一个[匹配模式](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)数组。仅当标签页的当前 `url` 属性匹配任意一个模式时才触发事件。
+ - `properties`
+
+ - : `Array`。一个由支持的 {{WebExtAPIRef("tabs.Tab")}} 对象属性名称组成的字符串数组。仅当更改了数组中的某个属性时才触发事件。可以使用这些属性：
+
+ - `"attention"`
+ - `"autoDiscardable"`
+ - `"audible"`
+ - `"discarded"`
+ - `"favIconUrl"`
+ - `"hidden"`
+ - `"isArticle"`
+ - `"mutedInfo"`
+ - `"pinned"`
+ - `"status"`
+ - `"title"`
+ - `"url"`
+
+ > **备注：** `"url"` 值自 Firefox 88 起支持。在 Firefox 87 及更早版本中，可以通过过滤“status”来观察 `"url"` 的更改。
+
+ - `tabId`
+ - : `Integer`。仅针对此 ID 标识的标签页触发该事件。
+ - `windowId`
+ - : `Integer`。仅针对此 ID 标识的窗口中的标签页触发该事件。
+
+## 附加对象
+
+### changeInfo
+
+列出更新标签页的状态更改。要了解这些属性的详细信息，请参阅 {{WebExtAPIRef("tabs.Tab")}} 文档。注意，并非所有 {{WebExtAPIRef("tabs.Tab")}} 属性都受支持。
+
+- `attention` {{optional_inline}}
+ - : `boolean`。表示标签页是否吸引注意力。例如，当标签页显示模态对话框时，`attention` 为 `true`。
+- `audible` {{optional_inline}}
+ - : `boolean`。标签页的新可听状态。
+- `autoDiscardable` {{optional_inline}}
+ - : `boolean`。标签页是否可以被浏览器丢弃。默认值为 `true`。当设置为 `false` 时，浏览器无法自动丢弃标签页。但标签页可以被 {{WebExtAPIRef("tabs.discard")}} 丢弃。
+- `discarded` {{optional_inline}}
+ - : `boolean`。标签页是否被丢弃。丢弃的标签页是其内容已从内存中卸载但在标签页栏中可见的标签页。下次激活时，其内容会重新加载。
+- `favIconUrl` {{optional_inline}}
+ - : `string`。标签页的新图标 URL。当标签页失去图标（从具有图标的页面导航到没有图标的页面）时不包括此属性。请检查 [tab](#tab) 中的 `favIconUrl`。
+- `hidden` {{optional_inline}}
+ - : `boolean`。如果标签页是{{WebExtAPIRef("tabs.hide()", "隐藏的", "", 1)}}，则为 `true`。
+- `isArticle` {{optional_inline}}
+ - : `boolean`。如果标签页是文章，因此可以显示在{{WebExtAPIRef("tabs.toggleReaderMode()", "阅读模式", "", 1)}}中，则为 `true`。
+- `mutedInfo` {{optional_inline}}
+ - : {{WebExtAPIRef('tabs.MutedInfo')}}。标签页的新静音状态及更改原因。
+- `pinned` {{optional_inline}}
+ - : `boolean`。标签页的新固定状态。
+- `status` {{optional_inline}}
+ - : `string`。标签页的状态。可以是 _loading_ 或 _complete_。
+- `title` {{optional_inline}}
+ - : `string`。标签页的新标题。
+- `url` {{optional_inline}}
+ - : `string`。如果标签页的 URL 已更改。
+
+## 示例
+
+监听并记录所有更改信息和新状态：
+
+```js
+function handleUpdated(tabId, changeInfo, tabInfo) {
+ console.log(`更新的标签：${tabId}`);
+ console.log("改变的属性：", changeInfo);
+ console.log("新标签的信息：", tabInfo);
+}
+
+browser.tabs.onUpdated.addListener(handleUpdated);
+```
+
+记录 URL 的更改：
+
+```js
+function handleUpdated(tabId, changeInfo, tabInfo) {
+ if (changeInfo.url) {
+ console.log(`标签：${tabId} 的 URL 改变为 ${changeInfo.url}`);
+ }
+}
+
+browser.tabs.onUpdated.addListener(handleUpdated);
+```
+
+### 过滤示例
+
+仅当标签页的 `url` 属性[匹配](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) `https://developer.mozilla.org/*` 或 `https://mozilla.social/@mdn` 时记录更改：
+
+```js
+const pattern1 = "https://developer.mozilla.org/*";
+const pattern2 = "https://mozilla.social/@mdn";
+
+const filter = {
+ urls: [pattern1, pattern2],
+};
+
+function handleUpdated(tabId, changeInfo, tabInfo) {
+ console.log(`更新的标签：${tabId}`);
+ console.log("改变的属性：", changeInfo);
+ console.log("新标签的信息：", tabInfo);
+}
+
+browser.tabs.onUpdated.addListener(handleUpdated, filter);
+```
+
+仅记录标签页的 `pinned` 属性的更改（即固定和取消固定操作）：
+
+```js
+const filter = {
+ properties: ["pinned"],
+};
+
+function handleUpdated(tabId, changeInfo, tabInfo) {
+ console.log(`更新的标签：${tabId}`);
+ console.log("改变的属性：", changeInfo);
+ console.log("新标签的信息：", tabInfo);
+}
+
+browser.tabs.onUpdated.addListener(handleUpdated, filter);
+```
+
+组合前两个过滤器，仅当标签页的 `pinned` 属性更改且 `url` 属性匹配 `https://developer.mozilla.org/*` 或 `https://mozilla.social/@mdn` 时记录更改：
+
+```js
+const pattern1 = "https://developer.mozilla.org/*";
+const pattern2 = "https://mozilla.social/@mdn";
+
+const filter = {
+ urls: [pattern1, pattern2],
+ properties: ["pinned"],
+};
+
+function handleUpdated(tabId, changeInfo, tabInfo) {
+ console.log(`更新的标签：${tabId}`);
+ console.log("改变的属性：", changeInfo);
+ console.log("新标签的信息：", tabInfo);
+}
+
+browser.tabs.onUpdated.addListener(handleUpdated, filter);
+```
+
+仅当标签页的 `pinned` 属性更改且 `url` 属性[匹配](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) `https://developer.mozilla.org/*` 或 `https://mozilla.social/@mdn` 且在事件触发时标签页属于当前浏览器窗口时记录更改：
+
+```js
+const pattern1 = "https://developer.mozilla.org/*";
+const pattern2 = "https://mozilla.social/@mdn";
+
+const filter = {
+ urls: [pattern1, pattern2],
+ properties: ["pinned"],
+ windowId: browser.windows.WINDOW_ID_CURRENT,
+};
+
+function handleUpdated(tabId, changeInfo, tabInfo) {
+ console.log(`更新的标签：${tabId}`);
+ console.log("改变的属性：", changeInfo);
+ console.log("新标签的信息：", tabInfo);
+}
+
+browser.tabs.onUpdated.addListener(handleUpdated, filter);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
+
+{{AddonSidebar}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onzoomchange/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onzoomchange/index.md
new file mode 100644
index 00000000000000..809257f78cb5c6
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/onzoomchange/index.md
@@ -0,0 +1,103 @@
+---
+title: tabs.onZoomChange
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/onZoomChange
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当标签页缩放时触发。
+
+## 语法
+
+```js-nolint
+browser.tabs.onZoomChange.addListener(listener)
+browser.tabs.onZoomChange.removeListener(listener)
+browser.tabs.onZoomChange.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 向此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，则返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 此事件发生时调用的函数。该函数接收以下参数：
+
+ - `ZoomChangeInfo`
+ - : `object`。关于缩放事件的信息。详见 [ZoomChangeInfo](#zoomchangeinfo_2) 部分。
+
+## 附加对象
+
+### ZoomChangeInfo
+
+- `tabId`
+ - : `integer`。被缩放的标签页的 ID。
+- `oldZoomFactor`
+ - : `number`。之前的缩放因子。
+- `newZoomFactor`
+ - : `number`。新的缩放因子。
+- `zoomSettings`
+ - : {{WebExtAPIRef('tabs.ZoomSettings')}}。标签页的缩放设置。
+
+## 示例
+
+监听缩放事件并记录信息：
+
+```js
+function handleZoomed(zoomChangeInfo) {
+ console.log(`标签：${zoomChangeInfo.tabId} 被缩放`);
+ console.log(`旧缩放因子：${zoomChangeInfo.oldZoomFactor}`);
+ console.log(`新缩放因子：${zoomChangeInfo.newZoomFactor}`);
+}
+
+browser.tabs.onZoomChange.addListener(handleZoomed);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#event-onZoomChange) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md
new file mode 100644
index 00000000000000..6ce192291500f8
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md
@@ -0,0 +1,77 @@
+---
+title: tabs.PageSettings
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/PageSettings
+l10n:
+ sourceCommit: d6856a051d0ba078ec1d24b80908b1ca174917db
+---
+
+{{AddonSidebar}}
+
+**`tabs.PageSettings`** 类型用于控制通过 {{WebExtAPIRef("tabs.saveAsPDF()")}} 方法将标签渲染为 PDF 时的输出格式。
+
+所有属性均为可选。
+
+用于设置页眉和页脚时，可以在提供的字符串中包含特定的特殊字符，这些字符在渲染输出时会被替换：
+
+- “\&P”：当前页码，例如“2”
+- “\&PT”：当前页码和总页数，例如“2 of 3”
+- “\&D”：当前日期/时间
+- “\&T”：页面标题
+- “\&U”：页面 URL
+
+## 类型
+
+该类型的值为对象，包含以下属性：
+
+- `edgeBottom` {{optional_inline}}
+ - : `number`。页脚底部与纸张底部的间距（英寸）。默认值为 `0`。
+- `edgeLeft` {{optional_inline}}
+ - : `number`。左侧页眉/页脚与纸张左边缘的间距（英寸）。默认值为 `0`。
+- `edgeRight` {{optional_inline}}
+ - : `number`。右侧页眉/页脚与纸张左边缘的间距（英寸）。默认值为 `0`。
+- `edgeTop` {{optional_inline}}
+ - : `number`。页眉顶部与纸张顶部的间距（英寸）。默认值为 `0`。
+- `footerCenter` {{optional_inline}}
+ - : `string`。页面中心页脚的文本内容。默认值为 `''`。
+- `footerLeft` {{optional_inline}}
+ - : `string`。页面左侧页脚的文本内容。默认值为 `'\&PT'`。
+- `footerRight` {{optional_inline}}
+ - : `string`。页面右侧页脚的文本内容。默认值为 `'\&D'`。
+- `headerCenter` {{optional_inline}}
+ - : `string`。页面中心页眉的文本内容。默认值为 `''`。
+- `headerLeft` {{optional_inline}}
+ - : `string`。页面左侧页眉的文本内容。默认值为 `'\&T'`。
+- `headerRight` {{optional_inline}}
+ - : `string`。页面右侧页眉的文本内容。默认值为 `'\&U'`。
+- `marginBottom` {{optional_inline}}
+ - : `number`。页面内容与纸张底部的边距（英寸）。默认值为 `0.5`。
+- `marginLeft` {{optional_inline}}
+ - : `number`。页面内容与纸张左边缘的边距（英寸）。默认值为 `0.5`。
+- `marginRight` {{optional_inline}}
+ - : `number`。页面内容与纸张右边缘的边距（英寸）。默认值为 `0.5`。
+- `marginTop` {{optional_inline}}
+ - : `number`。页面内容与纸张顶部的边距（英寸）。默认值为 `0.5`。
+- `orientation` {{optional_inline}}
+ - : `integer`。页面方向：0 表示纵向，1 表示横向。默认值为 `0`。
+- `paperHeight` {{optional_inline}}
+ - : `number`。纸张高度，以纸张大小单位表示。默认值为 `11.0`。
+- `paperSizeUnit` {{optional_inline}}
+ - : `integer`。纸张大小单位：0 表示英寸，1 表示毫米。默认值为 `0`。
+- `paperWidth` {{optional_inline}}
+ - : `number`。纸张宽度，以纸张大小单位表示。默认值为 `8.5`。
+- `scaling` {{optional_inline}}
+ - : `number`。页面内容的缩放因子。1 表示 100% 或正常大小。默认值为 `1`。
+- `showBackgroundColors` {{optional_inline}}
+ - : `boolean`。是否显示页面背景颜色。默认值为 `false`。
+- `showBackgroundImages` {{optional_inline}}
+ - : `boolean`。是否显示页面背景图像。默认值为 `false`。
+- `shrinkToFit` {{optional_inline}}
+ - : `boolean`。是否将页面内容缩小以适应页面宽度（覆盖缩放设置）。默认值为 `true`。
+- `toFileName` {{optional_inline}}
+ - : `string`。保存为 PDF 文件时的文件名，可以包含 `.pdf` 扩展名或不包含。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
new file mode 100644
index 00000000000000..8c71fac45f25d0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
@@ -0,0 +1,133 @@
+---
+title: tabs.sendMessage()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+从扩展的后台脚本（或其他特权脚本，如弹出窗口脚本或选项页脚本）向任何运行在指定标签页中的[内容脚本](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)或在扩展的页面或 iframe 发送一条消息。
+
+该消息将在扩展上下文中由监听 [`runtime.onMessage`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage) 事件的监听器接收。监听器可以选择性地返回一个响应给发送者。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+> **备注：** 你还可以使用[基于连接的消息传递](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#基于连接的消息传递)。
+
+## 语法
+
+```js
+const sending = browser.tabs.sendMessage(
+ tabId, // 整型
+ message, // 任意
+ options, // 可选的对象
+);
+```
+
+### 参数
+
+- `tabId`
+ - : `integer`。要向其发送消息的标签页的 ID。
+- `message`
+ - : `any`。可序列化的对象（参见[数据克隆算法](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#数据克隆算法)）。
+- `options` {{optional_inline}}
+
+ - : `object`。
+
+ - `frameId` {{optional_inline}}
+ - : `integer`。将消息发送到指定的框架（frame），而不是标签页中的所有框架。内容脚本是否在所有框架中执行取决于 `manifest.json` 的 [`content_scripts`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) 部分中的 `all_frames` 设置。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，如果内容脚本未发送响应其会被兑现且不带有参数。
+
+如果在连接到指定标签页时或发生任何其他错误时出现错误，promise 将以错误信息拒绝。
+
+如果多个框架响应了消息，promise 会兑现为其中一个响应。
+
+## 示例
+
+以下是一个后台脚本示例，当用户点击浏览器操作按钮时，向当前活动标签页中运行的内容脚本发送消息。后台脚本还期望内容脚本发送一个响应：
+
+```js
+// background-script.js
+"use strict";
+
+function onError(error) {
+ console.error(`发生错误：${error}`);
+}
+
+function sendMessageToTabs(tabs) {
+ for (const tab of tabs) {
+ browser.tabs
+ .sendMessage(tab.id, { greeting: "Hi from background script" })
+ .then((response) => {
+ console.log("Message from the content script:");
+ console.log(response.response);
+ })
+ .catch(onError);
+ }
+}
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.tabs
+ .query({
+ currentWindow: true,
+ active: true,
+ })
+ .then(sendMessageToTabs)
+ .catch(onError);
+});
+```
+
+以下是相应的内容脚本示例：
+
+```js
+// content-script.js
+"use strict";
+
+browser.runtime.onMessage.addListener((request) => {
+ console.log("Message from the background script:");
+ console.log(request.greeting);
+ return Promise.resolve({ response: "Hi from content script" });
+});
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 这个 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage) API。本文档内容源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/sendrequest/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/sendrequest/index.md
new file mode 100644
index 00000000000000..c8aebe72b03c57
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/sendrequest/index.md
@@ -0,0 +1,70 @@
+---
+title: tabs.sendRequest()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/sendRequest
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+> **警告：** 此方法已被弃用。请使用 {{WebExtAPIRef("tabs.sendMessage()")}} 替代。
+
+向指定标签页中的内容脚本发送单个请求，并可选择性地指定一个回调函数，用于在接收到响应时执行。当前扩展中运行的每个内容脚本都会触发 {{WebExtAPIRef('extension.onRequest')}} 事件。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let sending = browser.tabs.sendRequest(
+ tabId, // 整型
+ request // 任意
+)
+```
+
+### 参数
+
+- `tabId`
+ - : `integer`。
+- `request`
+ - : `any`。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，内容脚本中消息的处理器发送响应对象时其会兑现，如果内容脚本未发送响应，则不兑现任何内容。如果连接到指定标签页时出现错误或其他任何错误，promise 将以错误信息拒绝。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> **备注：** 这个 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendRequest) API。本文档内容源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/show/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/show/index.md
new file mode 100644
index 00000000000000..bbbf42b4109e7f
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/show/index.md
@@ -0,0 +1,65 @@
+---
+title: tabs.show()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/show
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+显示之前通过 {{WebExtAPIRef("tabs.hide")}} 调用隐藏的一个或多个标签页。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let showing = browser.tabs.show(
+ tabIds // 整数或整数数组
+)
+```
+
+### 参数
+
+- `tabIds`
+ - : `integer` 或 `integer` 数组。要显示的一个或多个标签页的 ID。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，在操作完成后其会被兑现且不带有参数。如果出现任何错误，promise 将会被拒绝并返回错误信息。
+
+## 示例
+
+显示单个标签页：
+
+```js
+function onShown() {
+ console.log(`已显示`);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+browser.tabs.show(2).then(onShown, onError);
+```
+
+显示多个标签页：
+
+```js
+function onShown() {
+ console.log(`已显示`);
+}
+
+function onError(error) {
+ console.log(`发生错误：${error}`);
+}
+
+browser.tabs.show([15, 14, 1]).then(onShown, onError);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/tab_id_none/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/tab_id_none/index.md
new file mode 100644
index 00000000000000..8e6a50f8f7a629
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/tab_id_none/index.md
@@ -0,0 +1,18 @@
+---
+title: tabs.TAB_ID_NONE
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/TAB_ID_NONE
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个特殊的 ID 值，用于标识不是浏览器标签页的标签（例如，开发者工具窗口中的标签页）。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#property-TAB_ID_NONE) API。本文档内容源自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/tabstatus/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/tabstatus/index.md
new file mode 100644
index 00000000000000..5114c45074bae0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/tabstatus/index.md
@@ -0,0 +1,52 @@
+---
+title: tabs.TabStatus
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/TabStatus
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+指示标签页是否已完成加载。
+
+## 类型
+
+该类型的值是字符串。可能的值为：`"loading"` 和 `"complete"`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#type-TabStatus) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/warmup/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/warmup/index.md
new file mode 100644
index 00000000000000..1aceb29c2663cb
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/warmup/index.md
@@ -0,0 +1,70 @@
+---
+title: tabs.warmup()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/warmup
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+为了优化系统资源的使用，浏览器可能会释放用户一段时间未访问的标签页相关的 GPU 资源。如果浏览器对一个标签页执行了这种操作，那么重新激活该标签页（例如用户切换到它时）可能比正常情况下需要更长的时间。
+
+`tabs.warmup()` API 允许扩展启动对非活动标签页渲染资源的预热过程，如果扩展预期用户可能很快会切换到该标签页，这将使得实际的标签页切换速度比通常快得多。
+
+请注意，此 API 不适用于已丢弃的标签页，并且不需要在切换标签页之前立即调用。它仅仅是在预期可以进行标签页切换时的性能改进，例如当悬停在一个按钮上并且点击后会切换到该标签页时。
+
+预计此 API 主要对标签页管理扩展非常有用。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let warming = browser.tabs.warmup(
+ tabId // 整型
+)
+```
+
+### 参数
+
+- `tabId`
+ - : `integer`。要预热的标签页的 ID。如果此处传递的参数不是整数（特别是 `null` 或 `undefined`），则 `warmup()` 将同步抛出异常。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，如果成功预热了由 `tabId` 标识的标签页，其会被兑现且不带有参数。如果 `tabId` 无法标识一个打开的标签页，或者由于其他原因预热失败，promise 将会被拒绝并返回错误信息。
+
+## 示例
+
+这段代码添加了一个监听器到 `browserAction.onClicked` 事件。监听器在当前窗口中检索所有包含 `https://developer.mozilla.org/` 页面的标签页，并预热第一个找到的标签页。
+
+```js
+function onSuccess() {
+ console.log("预热成功！");
+}
+
+function onFailure(error) {
+ // 例如，无效的标签页 ID
+ console.error(error);
+}
+
+async function warmupMDN() {
+ const mdnTabs = await browser.tabs.query({
+ currentWindow: true,
+ url: "https://developer.mozilla.org/*",
+ });
+
+ if (mdnTabs.length > 0) {
+ const warming = browser.tabs.warmup(mdnTabs[0].id);
+ warming.then(onSuccess, onFailure);
+ }
+}
+
+browser.browserAction.onClicked.addListener(warmupMDN);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/windowtype/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/windowtype/index.md
new file mode 100644
index 00000000000000..0373676f5d24ec
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/windowtype/index.md
@@ -0,0 +1,57 @@
+---
+title: tabs.WindowType
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/WindowType
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+承载此标签页的窗口类型。
+
+## 类型
+
+该类型的值是字符串。可能的值为：
+
+- **"normal"**
+- **"popup"**
+- **"panel"**
+- **"devtools"**
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#type-WindowType) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md
new file mode 100644
index 00000000000000..a709bb57ead3d7
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md
@@ -0,0 +1,59 @@
+---
+title: tabs.ZoomSettings
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/ZoomSettings
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+定义标签页的缩放设置：{{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}、{{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}} 和默认的缩放系数。
+
+## 类型
+
+该类型的值是对象，包含以下属性：
+
+- `defaultZoomFactor` {{optional_inline}}
+ - : `number`。当前标签页的默认缩放级别。请注意，这仅在 {{WebExtAPIRef("tabs.getZoomSettings")}} 中使用。
+- `mode` {{optional_inline}}
+ - : {{WebExtAPIRef('tabs.ZoomSettingsMode')}}。定义缩放更改是由浏览器或扩展处理，还是禁用缩放。
+- `scope` {{optional_inline}}
+ - : {{WebExtAPIRef('tabs.ZoomSettingsScope')}}。定义缩放更改是对页面的来源持久化，还是只在此标签页中生效。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#type-ZoomSettings) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md
new file mode 100644
index 00000000000000..7a4326dbc5d8b3
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsmode/index.md
@@ -0,0 +1,59 @@
+---
+title: tabs.ZoomSettingsMode
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/ZoomSettingsMode
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+定义如何处理缩放更改。扩展可以将此值传递给 {{WebExtAPIRef("tabs.setZoomSettings()")}} 以控制浏览器如何处理标签页的缩放设置更改。默认值为“automatic”。
+
+## 类型
+
+该类型的值是字符串。可能的值为：
+
+- “automatic”
+ - : 缩放更改由浏览器正常处理。
+- “disabled”
+ - : 禁用标签页中的所有缩放。标签页将恢复到默认缩放级别，所有尝试的缩放更改将被忽略。
+- “manual”
+ - : 扩展将自行处理缩放更改，通过监听 {{WebExtAPIRef("tabs.onZoomChange")}} 事件并相应地缩放页面。此模式不支持 `per-origin` 缩放：它将忽略 `scope` {{WebExtAPIRef("tabs.zoomSettings", "zoom setting")}} 并始终使用 `per-tab`。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#type-ZoomSettingsMode) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md
new file mode 100644
index 00000000000000..9cd7b318a3de46
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md
@@ -0,0 +1,59 @@
+---
+title: tabs.ZoomSettingsScope
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/ZoomSettingsScope
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+定义缩放更改是会对页面的来源持久化，还是仅在此标签页中生效。当 {{WebExtAPIRef("tabs.zoomSettingsMode")}} 为“automatic”时，默认值为 `per-origin`，否则始终为 `per-tab`。
+
+## 类型
+
+该类型的值是字符串。可能的值为：
+
+- "per-origin"
+ - : 所有与此标签页具有相同来源的其他标签页将应用相同的缩放更改。此作用域仅在 {{WebExtAPIRef("tabs.zoomSettingsMode")}} 为“automatic”时可用。
+- "per-tab"
+ - : 缩放更改仅在此标签页中生效，其他标签页中的缩放更改不会影响此标签页的缩放。此外：
+ - 在 Firefox 中，缩放级别在标签页的页面加载和导航过程中保持不变。
+ - 在基于 Chrome 的浏览器中，缩放更改在导航时会重置；导航标签页时，页面总是以其来源的缩放系数加载。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 该 API 基于 Chromium 的 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#type-ZoomSettingsScope) API。此文档来自 Chromium 代码中的 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/theme/getcurrent/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/getcurrent/index.md
new file mode 100644
index 00000000000000..285822d5de3f1e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/getcurrent/index.md
@@ -0,0 +1,55 @@
+---
+title: theme.getCurrent()
+slug: Mozilla/Add-ons/WebExtensions/API/theme/getCurrent
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+获取表示当前主题的 {{WebExtAPIRef("theme.Theme", "Theme")}} 对象。
+
+这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let getting = browser.theme.getCurrent(
+ windowId // 整型
+)
+```
+
+### 参数
+
+- `windowId` {{optional_inline}}
+ - : `integer`。窗口的 ID。如果提供了这个参数，兑现的主题是应用到该窗口的主题。如果省略这个参数，兑现的主题是应用到最近一个被聚焦的窗口的主题。
+
+### 返回值
+
+一个 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，其会兑现一个表示应用到给定窗口的主题的 {{WebExtAPIRef("theme.Theme")}} 对象。如果扩展提供的主题没有应用到给定窗口，它将返回一个空对象。
+
+## 示例
+
+获取当前主题的 `frame` 和 `toolbar` 颜色属性：
+
+```js
+function getStyle(themeInfo) {
+ if (themeInfo.colors) {
+ console.log(`强调色：${themeInfo.colors.frame}`);
+ console.log(`工具栏：${themeInfo.colors.toolbar}`);
+ }
+}
+
+async function getCurrentThemeInfo() {
+ const themeInfo = await browser.theme.getCurrent();
+ getStyle(themeInfo);
+}
+
+getCurrentThemeInfo();
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/theme/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/index.md
new file mode 100644
index 00000000000000..c2443065fa93b1
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/index.md
@@ -0,0 +1,37 @@
+---
+title: theme
+slug: Mozilla/Add-ons/WebExtensions/API/theme
+l10n:
+ sourceCommit: bb1cd85823386888b85d7286376ed497d427995d
+---
+
+{{AddonSidebar}}
+
+使浏览器扩展能够获取浏览器主题的详细信息并更新主题。
+
+你可以使用此 API 在扩展中包含一个主题，该主题定义为 {{WebExtAPIRef("theme.Theme")}} 并通过 {{WebExtAPIRef("theme.update()")}} 应用。你不能在扩展中包含静态主题，静态主题是用[“theme”](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme)清单键定义的。清单键“theme”仅用于定义静态主题。有关更多信息，请参见 Extension Workshop 上的 [Themes](https://extensionworkshop.com/documentation/themes/)。
+
+## 类型
+
+- {{WebExtAPIRef("theme.Theme")}}
+ - : 代表一个主题的内容。
+
+## 函数
+
+- {{WebExtAPIRef("theme.getCurrent()")}}
+ - : 获取当前浏览器主题。
+- {{WebExtAPIRef("theme.update()")}}
+ - : 更新浏览器的主题。
+- {{WebExtAPIRef("theme.reset()")}}
+ - : 移除通过调用 {{WebExtAPIRef("theme.update()")}} 所做的任何主题更新。
+
+## 事件
+
+- {{WebExtAPIRef("theme.onUpdated")}}
+ - : 当浏览器主题改变时触发。
+
+{{WebExtExamples("h2")}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/theme/onupdated/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/onupdated/index.md
new file mode 100644
index 00000000000000..2c82ac4c407379
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/onupdated/index.md
@@ -0,0 +1,70 @@
+---
+title: theme.onUpdated
+slug: Mozilla/Add-ons/WebExtensions/API/theme/onUpdated
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+当作为浏览器扩展提供的主题被应用或移除时触发。具体情况包括：
+
+- 安装[静态主题](https://extensionworkshop.com/documentation/themes/static-themes/)时
+- [动态主题](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/theme)调用 [`theme.update()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/theme/update) 或 [`theme.reset()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/theme/reset) 时
+- 主题被卸载时
+
+此事件不会因内置主题的更改而触发。
+
+## 语法
+
+```js-nolint
+browser.theme.onUpdated.addListener(listener)
+browser.theme.onUpdated.removeListener(listener)
+browser.theme.onUpdated.hasListener(listener)
+```
+
+事件有三个函数：
+
+- `addListener(listener)`
+ - : 为此事件添加一个监听器。
+- `removeListener(listener)`
+ - : 停止监听此事件。`listener` 参数是要移除的监听器。
+- `hasListener(listener)`
+ - : 检查 `listener` 是否已注册此事件。如果正在监听，返回 `true`，否则返回 `false`。
+
+## addListener 语法
+
+### 参数
+
+- `listener`
+
+ - : 当此事件发生时调用的函数。该函数传递以下参数：
+
+ - `updateInfo`
+
+ - : `object`。包含两个属性的对象：
+
+ - `theme`
+ - : `object`。如果事件因为移除了扩展提供的主题而触发，则这是一个空对象。如果事件因为应用了扩展提供的主题而触发，则这是一个表示已应用主题的 {{WebExtAPIRef("theme.Theme")}} 对象。
+ - `windowId` {{optional_inline}}
+ - : `integer`。更新主题的窗口的 ID。如果此属性不存在，则主题在所有窗口中更新。
+
+## 示例
+
+```js
+function handleUpdated(updateInfo) {
+ if (updateInfo.theme.colors) {
+ console.log(`主题被应用：${updateInfo.theme}`);
+ } else {
+ console.log(`主题被移除`);
+ }
+}
+
+browser.theme.onUpdated.addListener(handleUpdated);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/theme/reset/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/reset/index.md
new file mode 100644
index 00000000000000..c29779c66a3b0e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/reset/index.md
@@ -0,0 +1,75 @@
+---
+title: theme.reset()
+slug: Mozilla/Add-ons/WebExtensions/API/theme/reset
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+重置使用 {{WebExtAPIRef("theme.update()")}} 方法应用的任何主题。
+
+要使用此方法，扩展程序必须在其 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中请求 `"theme"` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+请注意，这总是将主题重置为原始默认主题，即使在应用此扩展程序的主题之前用户选择了其他主题（参见 [bug 1415267](https://bugzil.la/1415267)）。
+
+## 语法
+
+```js-nolint
+browser.theme.reset(
+ windowId // 整型
+)
+```
+
+### 参数
+
+- `windowId` {{optional_inline}}
+ - : `integer`。窗口的 ID。如果提供了此参数，将重置该窗口应用的主题。如果省略此参数，将重置所有窗口的主题。
+
+## 示例
+
+此代码应用一个主题，然后在用户点击浏览器操作时移除该主题：
+
+```js
+browser.theme.update(themes.night);
+
+browser.browserAction.onClicked.addListener(() => {
+ browser.theme.reset();
+});
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/theme/theme/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/theme/index.md
new file mode 100644
index 00000000000000..193f7fc24bf04b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/theme/index.md
@@ -0,0 +1,20 @@
+---
+title: Theme
+slug: Mozilla/Add-ons/WebExtensions/API/theme/Theme
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+一个表示主题的规范的主题对象。
+
+## 类型
+
+一个 JSON [对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object)，它具有与 [`"theme"`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme) 清单键相同的属性。
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/theme/update/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/update/index.md
new file mode 100644
index 00000000000000..ba6711213e9ff9
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/theme/update/index.md
@@ -0,0 +1,79 @@
+---
+title: theme.update()
+slug: Mozilla/Add-ons/WebExtensions/API/theme/update
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+根据 {{WebExtAPIRef("theme.Theme", "Theme")}} 对象的内容更新浏览器主题。
+
+要使用此方法，扩展程序必须在其 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 文件中请求 `"theme"` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)。
+
+## 语法
+
+```js-nolint
+browser.theme.update(
+ windowId, // 整型
+ theme // 对象
+)
+```
+
+### 参数
+
+- `windowId` {{optional_inline}}
+ - : `integer`。窗口的 ID。如果提供了此参数，主题仅应用于该窗口。如果省略此参数，主题将应用于所有窗口。
+- `theme`
+ - : `object`。一个 {{WebExtAPIRef("theme.Theme", "Theme")}} 对象，指定要修改的 UI 元素的值。
+
+## 示例
+
+将浏览器主题设置为使用一个太阳图案，并配有一个互补的背景颜色：
+
+```js
+const suntheme = {
+ images: {
+ theme_frame: "sun.jpg",
+ },
+ colors: {
+ frame: "#CF723F",
+ tab_background_text: "#111",
+ },
+};
+
+browser.theme.update(suntheme);
+```
+
+仅为聚焦的窗口设置主题：
+
+```js
+const day = {
+ images: {
+ theme_frame: "sun.jpg",
+ },
+ colors: {
+ frame: "#CF723F",
+ tab_background_text: "#111",
+ },
+};
+
+browser.menus.create({
+ id: "set-theme",
+ title: "设置主题",
+ contexts: ["all"],
+});
+
+async function updateThemeForCurrentWindow() {
+ let currentWindow = await browser.windows.getLastFocused();
+ browser.theme.update(currentWindow.id, day);
+}
+
+browser.menus.onClicked.addListener(updateThemeForCurrentWindow);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/types/browsersetting/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/types/browsersetting/index.md
new file mode 100644
index 00000000000000..15f33c3c93d304
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/types/browsersetting/index.md
@@ -0,0 +1,66 @@
+---
+title: BrowserSetting
+slug: Mozilla/Add-ons/WebExtensions/API/types/BrowserSetting
+l10n:
+ sourceCommit: 43e3ff826b7b755b05986c99ada75635c01c187c
+---
+
+{{AddonSidebar}}
+
+`BrowserSetting` 是一个表示浏览器设置的对象。
+
+它提供了方法来设置和获取设置的基础值，清除扩展程序对其进行的任何更改，和监听其值的变化。
+
+请注意，虽然此对象基于 [ChromeSetting](https://developer.chrome.com/docs/extensions/reference/types/#type-ChromeSetting) 类型，但它不区分在普通浏览窗口和私密浏览窗口中设置值。这意味着所有与无痕浏览相关的 API 部分（例如 `ChromeSetting.set()` 的 `scope` 选项）未实现。
+
+## 方法
+
+- {{WebExtAPIRef("types.BrowserSetting.get()")}}
+ - : 获取设置的当前值，并返回一个表示当前设置可以如何控制的枚举值。
+- {{WebExtAPIRef("types.BrowserSetting.set()")}}
+ - : 将设置设定为新值。
+- {{WebExtAPIRef("types.BrowserSetting.clear()")}}
+ - : 清除扩展程序对设置所做的任何更改。
+
+## 事件
+
+- {{WebExtAPIRef("types.BrowserSetting.onChange")}}
+ - : 当设置的值发生变化时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.types`](https://developer.chrome.com/docs/extensions/reference/types/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/types/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/types/index.md
new file mode 100644
index 00000000000000..a0c833c219fc97
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/types/index.md
@@ -0,0 +1,51 @@
+---
+title: types
+slug: Mozilla/Add-ons/WebExtensions/API/types
+l10n:
+ sourceCommit: d6856a051d0ba078ec1d24b80908b1ca174917db
+---
+
+{{AddonSidebar}}
+
+定义了 `BrowserSetting` 类型，用于表示浏览器设置。
+
+## 类型
+
+- {{WebExtAPIRef("types.BrowserSetting")}}
+ - : 表示浏览器设置。
+
+## 浏览器兼容性
+
+{{WebExtExamples("h2")}}
+
+> **备注：** 此 API 基于 Chromium 的 [`chrome.types`](https://developer.chrome.com/docs/extensions/reference/types/) API。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+// * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+// * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+// * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/author/index.md b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/author/index.md
index 0112963c7e8ca4..11a3f94ab6474f 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/author/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/author/index.md
@@ -1,6 +1,8 @@
---
-title: 作者 - author
+title: author
slug: Mozilla/Add-ons/WebExtensions/manifest.json/author
+l10n:
+ sourceCommit: d86e14de2e66319fc0a0ec0539a05400dea5a453
---
{{AddonSidebar}}
@@ -8,28 +10,34 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/author
<table class="fullwidth-table standard-table">
<tbody>
<tr>
- <th scope="row">值类型</th>
- <td><code>字符串（String）</code></td>
+ <th scope="row">类型</th>
+ <td>字符串（<code>String</code>）</td>
</tr>
<tr>
- <th scope="row">强制性</th>
- <td>非强制</td>
+ <th scope="row">是否必须</th>
+ <td>否</td>
+ </tr>
+ <tr>
+ <th scope="row">清单版本</th>
+ <td>2 或更高</td>
</tr>
<tr>
<th scope="row">示例</th>
- <td><pre class="brush: json">"author": "小明"</pre></td>
+ <td><pre class="brush: json">"author": "Walt Whitman"</pre></td>
</tr>
</tbody>
</table>
-附加组件的作者，用于在浏览器用户界面上显示，这样别人下载安装使用该附加组件的时候，就能看见你的大名了。
+扩展的作者，用于显示在浏览器的用户界面中。如果提供了 [developer](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/developer) 键，并包含了“name”属性，则它将会覆盖 author 键。无法指定多个作者。
+
+这是一个[可本地化属性](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Internationalization#国际化_manifest.json)。
## 示例
```json
-"author": "小明"
+"author": "Walt Whitman"
```
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/description/index.md b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/description/index.md
index 7faf22b685c432..6e933770385b8e 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/description/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/description/index.md
@@ -1,41 +1,47 @@
---
-title: 描述 - description
+title: description
slug: Mozilla/Add-ons/WebExtensions/manifest.json/description
+l10n:
+ sourceCommit: d86e14de2e66319fc0a0ec0539a05400dea5a453
---
{{AddonSidebar}}
-<table class="fullwidth-table standard-table">
+<table class="fullwidth-table">
<tbody>
<tr>
- <th scope="row">值类型</th>
+ <th scope="row">类型</th>
<td><code>字符串</code></td>
</tr>
<tr>
- <th scope="row">强制性</th>
- <td>不强制</td>
+ <th scope="row">是否必须</th>
+ <td>否</td>
+ </tr>
+ <tr>
+ <th scope="row">清单版本</th>
+ <td>2 或更高</td>
</tr>
<tr>
<th scope="row">示例</th>
<td>
<pre class="brush: json">
-"description": "附加组件的主要功能特性的简短描述。"</pre
+"description": "Replaces pictures with pictures of cats."</pre
>
</td>
</tr>
</tbody>
</table>
-用于在用户下载安装使用界面中显示的一段简短的关于该附加组件的描述。
+扩展的简短描述，用于在浏览器的用户界面中显示。在 Firefox 和 Chrome 中，此值最多可以达到 132 个字符。在其他浏览器中，限制可能不同。
-关于本地化，可查看 [localizable property](/zh-CN/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json).
+这是一个[可本地化属性](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Internationalization#国际化_manifest.json)。
## 示例
```json
-"description": "附加组件的主要功能特性的简短描述。"
+"description": "Replaces pictures with pictures of cats."
```
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md
index a1f4ce4f3df28e..95e064de353e31 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md
@@ -1,6 +1,8 @@
---
title: homepage_url
slug: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url
+l10n:
+ sourceCommit: 6b7f22c8cc81515d9a17d988f4bb8006357dcd59
---
{{AddonSidebar}}
@@ -15,6 +17,10 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url
<th scope="row">强制性</th>
<td>非强制</td>
</tr>
+ <tr>
+ <th scope="row">Manifest 版本</th>
+ <td>2 或更高</td>
+ </tr>
<tr>
<th scope="row">示例</th>
<td>
@@ -28,9 +34,9 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url
该扩展的主页地址。
-如果 [developer](/zh-CN/Add-ons/WebExtensions/manifest.json/developer) 键存在且包含“url”属性，它将会覆盖 `homepage_url` 键。
+如果 [developer](/zh-CN/Add-ons/WebExtensions/manifest.json/developer) 键包含“url”属性并且“homepage_url”被定义，Firefox 会使用“developer.url”然而 Opera 会使用“homepage_url”。Chrome 和 Safari 不支持“developer”键。
-这是一个 [localizable property](/zh-CN/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json).
+这是一个[可本地化属性](/zh-CN/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json)。
## 示例
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/short_name/index.md b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/short_name/index.md
index 8556d1a74c8053..bfc3c4d65d4685 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/short_name/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/short_name/index.md
@@ -1,6 +1,8 @@
---
-title: 短名称 - short_name
+title: short_name
slug: Mozilla/Add-ons/WebExtensions/manifest.json/short_name
+l10n:
+ sourceCommit: d86e14de2e66319fc0a0ec0539a05400dea5a453
---
{{AddonSidebar}}
@@ -8,30 +10,34 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/short_name
<table class="fullwidth-table standard-table">
<tbody>
<tr>
- <th scope="row" style="width: 30%">Type</th>
+ <th scope="row">类型</th>
<td><code>String</code></td>
</tr>
<tr>
<th scope="row">强制性</th>
<td>不强制</td>
</tr>
+ <tr>
+ <th scope="row">Manifest 版本</th>
+ <td>2 或更高</td>
+ </tr>
<tr>
<th scope="row">示例</th>
- <td><pre class="brush: json">"short_name": "附加组件的短名称"</pre></td>
+ <td><pre class="brush: json">"short_name": "My Extension"</pre></td>
</tr>
</tbody>
</table>
-附加组件的短名称。一般用在 [name](/zh-CN/Add-ons/WebExtensions/manifest.json/name) 特性太长的情况下。建议短名称的长度不要超过 12 个字符。如果没有在 manifest.json 主文件中声明 short_name, 并且 name 特性的值又比较长的话，用户界面显示的时候可能只会显示一部分。
+附加组件的短名称。一般用在 [name](/zh-CN/Add-ons/WebExtensions/manifest.json/name) 字段太长的情况下。建议短名称的长度不要超过 12 个字符。如果没有在 manifest.json 主文件中声明 short_name, 则将使用 name 的值，且可能会被截断。
-关于本地化，可查看 [localizable property](/zh-CN/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json).
+这是一个[可本地化属性](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Internationalization#国际化_manifest.json)。
## 示例
```json
-"short_name": "附加组件的短名称"
+"short_name": "My Extension"
```
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md b/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md
index b1e7d099002ec1..c9485de25d38ba 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md
@@ -1,53 +1,55 @@
---
title: 扩展是什么？
slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+l10n:
+ sourceCommit: 01c27dc307a32e92e489349cf0ff67961083c8c7
---
{{AddonSidebar}}
-> **备注：** 如果你对浏览器扩展的基础概念已经熟悉，跳过这个部分去学习[扩展文件是如何组织在一起的](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)。然后，利用[参考文档](/zh-CN/docs/Mozilla/Add-ons/WebExtensions#reference)去构建你的扩展。访问[扩展工作坊](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)学习关于浏览器扩展工作流，测试，发布的更多内容。
+> **备注：** 如果你对浏览器扩展的基础概念已经熟悉，跳过这个部分去学习[扩展文件是如何组织在一起的](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)。然后，利用[参考资料](/zh-CN/docs/Mozilla/Add-ons/WebExtensions#参考资料)去构建你的扩展。访问[扩展工作坊](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)学习关于浏览器扩展工作流，测试，发布的更多内容。
-扩展为浏览器添加了特性与功能。它通过我们所熟悉的 Web 技术-HTML，CSS 还有 JavaScript 来创建。扩展可以利用与 JavaScript 相同的网页 API，但是扩展也可以访问它自己专有的 JavaScript API。这意味着，和在网页里编码相比，在扩展中你可以做到更多的事情。以下是其中你可以做到的一些事情：
+扩展为浏览器添加了特性与功能。它通过我们所熟悉的 Web 技术——HTML、CSS 和 JavaScript 来创建。扩展可以利用与网页中的 JavaScript 相同的 Web API，但是扩展也可以访问它自己专有的 JavaScript API。这意味着，和在网页里编码相比，在扩展中你可以做到更多的事情。以下是其中你可以做到的一些事情：
-**提升或者补充网站功能**: 利用扩展来实现额外的浏览器内特性或者来自你网站的信息。允许用户搜集他们访问过的页面细节来提升你所提供的服务。
+**增强或者完善网站功能**：利用扩展来实现额外的浏览器内特性或者来自你网站的信息。允许用户搜集他们访问过的页面细节来增强你所提供的服务。
-
+示例：[Grammarly for Firefox](https://addons.mozilla.org/firefox/addon/grammarly-1/)、[Enhancer for YouTube](https://addons.mozilla.org/firefox/addon/enhancer-for-youtube/) 和 [Control Panel for Twitter](https://addons.mozilla.org/firefox/addon/control-panel-for-twitter/)。
-示例：[亚马逊助手](https://addons.mozilla.org/zh-CN/firefox/addon/amazon-browser-bar/)，[OneNote Web Clipper](https://addons.mozilla.org/zh-CN/firefox/addon/onenote-clipper/)，[Grammarly for Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/grammarly-1/)
+
-**让用户展现他们的个性**: 浏览器扩展可以操控网页的内容；例如，让用户在每个他们访问的页面上添加最喜欢的 logo 或者图片作为背景。扩展也可以让用户更新 Firefox 的界面，就像独立的[主题扩展](https://extensionworkshop.com/documentation/themes/)一样。
+**让用户展现他们的个性**：浏览器扩展可以操控网页的内容；例如，让用户在每个他们访问的页面上添加最喜欢的 logo 或者图片作为背景。扩展也可以让用户更新 Firefox 的界面，就像独立的[主题扩展](https://extensionworkshop.com/documentation/themes/)一样。
-
+示例：[Tabliss](https://addons.mozilla.org/firefox/addon/tabliss/)、[Stylus](https://addons.mozilla.org/firefox/addon/styl-us/) 和 [Emoji](https://addons.mozilla.org/firefox/addon/emoji-sav/)。
-示例：[MyWeb New Tab](https://addons.mozilla.org/zh-CN/firefox/addon/myweb-new-tab/), [Tabliss](https://addons.mozilla.org/zh-CN/firefox/addon/tabliss/), 和 [VivaldiFox](https://addons.mozilla.org/zh-CN/firefox/addon/vivaldifox/)
+
-**从网页中添加或者删除内容**: 你可能想要帮助用户从网页中阻止一些侵扰的广告，当网页中提到一个国家或者城市的时候提供旅游指南，或者重组页面的内容来提供一个连续的阅读体验。利用可以访问和更新一个页面里的 HTML 和 CSS 的能力，扩展可以帮助用户以他们想要的形式来查看网页。
+**在网页中添加或者删除内容**：你可能想要帮助用户从网页中阻止一些侵扰的广告、在网页中提到一个国家或者城市的时候提供旅游指南，或者重组页面的内容来提供一致的阅读体验。利用可以访问和更新页面中的 HTML 和 CSS 的能力，扩展可以帮助用户以他们想要的形式来浏览网页。
-
+示例：[uBlock Origin](https://addons.mozilla.org/zh-CN/firefox/addon/ublock-origin/)、[Reader](https://addons.mozilla.org/firefox/addon/reader/) 和 [Toolbox for Google Play Store™](https://addons.mozilla.org/firefox/addon/toolbox-google-play-store/)
-示例：[uBlock Origin](https://addons.mozilla.org/zh-CN/firefox/addon/ublock-origin/), [Reader](https://addons.mozilla.org/zh-CN/firefox/addon/reader/), 和 [Toolbox for Google Play Store™](https://addons.mozilla.org/zh-CN/firefox/addon/toolbox-google-play-store/)
+
-**添加工具和新的浏览特性**: 给任务面板添加新特性，或者从 URL 地址，超链接，或者页面文字生成二维码。有了灵活的界面选项和 [WebExtensions APIs](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 的能力，你可以很容易的向浏览器添加新的特性。并且，你可以改善几乎任何网站的特性和功能，而不必是你自己的网站。
+**添加工具和新的浏览特性**：给任务面板添加新特性，或者从 URL 地址、超链接或者页面文字生成二维码。借助灵活的用户界面选项和 [WebExtensions API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 的能力，你可以很容易的向浏览器添加新的特性。并且，你可以增强几乎任何网站的特性和功能，而不必是你自己的网站。
-
+示例：[Worldwide Radio](https://addons.mozilla.org/firefox/addon/worldwide-radio/)、[Flagfox](https://addons.mozilla.org/firefox/addon/flagfox/) 和 [Tomato Clock](https://addons.mozilla.org/firefox/addon/tomato-clock/)。
-示例：[Swimlanes for Trello](https://addons.mozilla.org/zh-CN/firefox/addon/swimlanes-for-trello/) and [Tomato Clock](https://addons.mozilla.org/zh-CN/firefox/addon/tomato-clock/)
+
-**游戏**: 通过离线游玩的特性或者探索新游戏的可能性来提供传统计算机游戏的功能；例如，把游戏性融入到每天的网页浏览中。
+**游戏**：通过离线游玩的特性或者探索新游戏的可能性来提供传统计算机游戏；例如，把游戏融入到每天的网页浏览中。
-
+示例：[RPG Game - Dedalium by Loycom Games](https://addons.mozilla.org/firefox/addon/rpg-game-online-dedalium/)、[Solitaire Card Game](https://addons.mozilla.org/firefox/addon/solitaire-spider-freecell/) 和 [2048 Prime](https://addons.mozilla.org/firefox/addon/2048-prime/)。
-示例：[Asteroids in Popup](https://addons.mozilla.org/zh-CN/firefox/addon/asteroids-in-popup/), [Solitaire Card Game New Tab](https://addons.mozilla.org/zh-CN/firefox/addon/solitaire-card-game-new-tab/), 和 [2048 Prime](https://addons.mozilla.org/zh-CN/firefox/addon/2048-prime/).
+
-**添加开发工具**: 你可以为你的业务提供网站开发工具或者开发一个有用的技术或者你想分享的网站开发方法。无论如何，你可以通过在开发者工具栏上添加一个新的标签来增强内置的 Firefox 开发者工具。
+**添加开发工具**：你可以为你的业务提供网站开发工具或者开发一个有用的技术或者你想分享的网站开发方法。无论如何，你可以通过在开发者工具栏上添加一个新的标签来增强内置的 Firefox 开发者工具。
-
+示例：[aXe Developer Tools](https://addons.mozilla.org/firefox/addon/axe-devtools/)、[Web Developer](https://addons.mozilla.org/firefox/addon/web-developer/) 和 [Web React Developer Tools](https://addons.mozilla.org/firefox/addon/react-devtools/)。
-示例：[Web Developer](https://addons.mozilla.org/zh-CN/firefox/addon/web-developer/), [Web React Developer Tools](https://addons.mozilla.org/zh-CN/firefox/addon/react-devtools/), 和 [aXe Developer Tools](https://addons.mozilla.org/zh-CN/firefox/addon/axe-devtools/)
+
-Firefox 扩展使用 [WebExtensions APIs](/zh-CN/docs/Mozilla/Add-ons/WebExtensions)来构建，这是一种用以开发扩展的跨浏览器系统。在很大程度上，它与 Google Chrome 和 Opera 所支持的[扩展 API](https://developer.chrome.com/extensions) 兼容。在大多数情况下，为这些浏览器所写的扩展只需要少量[修改](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/)就可以在 Firefox 和 Microsoft Edge 上运行。这些 API 也完全兼容[多进程 Firefox](/zh-CN/docs/Mozilla/Firefox/Multiprocess_Firefox)。
+Firefox 扩展使用 [WebExtensions API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 来构建，这是一种用以开发扩展的跨浏览器系统。在很大程度上，它与 Google Chrome 和 Opera 所支持的[扩展 API](https://developer.chrome.com/extensions) 兼容。在大多数情况下，为这些浏览器所写的扩展只需要少量[修改](https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/)就可以在 Firefox 和 Microsoft Edge 上运行。
-如果你有想法或者问题，或者在[迁移旧的附加组件到 WebExtensions API](https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension)时需要帮助，可以在 [dev-addons 讨论版块](https://discourse.mozilla.org/c/add-ons/35)或者 [Matrix](https://chat.mozilla.org/#/room/#addons:mozilla.org) 上的 [Add-ones room](https://wiki.mozilla.org/Matrix) 与我们联系。
+如果你有想法或者问题，可以在 [dev-addons 讨论版块](https://discourse.mozilla.org/c/add-ons/35)或者 [Matrix](https://chat.mozilla.org/#/room/#addons:mozilla.org) 上的 [Add-ones room](https://wiki.mozilla.org/Matrix) 与我们联系。
## 接下来呢？
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md
index 3c926e349c89e1..9c5086f56d524e 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md
@@ -131,7 +131,7 @@ borderify/
## 打包和发布
-为了给其他人使用你的插件，你需要打包，并将其提交给 Mozilla 进行签名。要了解更多有关，请参考[“发布你的扩展”](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension)。
+为了给其他人使用你的插件，你需要打包，并将其提交给 Mozilla 进行签名。要了解更多有关，请参考[“发布你的扩展”](https://extensionworkshop.com/documentation/publish/package-your-extension/)。
## 下一步
diff --git a/files/zh-cn/mozilla/firefox/releases/124/index.md b/files/zh-cn/mozilla/firefox/releases/124/index.md
index 482964cab78ef6..b2f6362d72ee52 100644
--- a/files/zh-cn/mozilla/firefox/releases/124/index.md
+++ b/files/zh-cn/mozilla/firefox/releases/124/index.md
@@ -2,7 +2,7 @@
title: Firefox 124 的开发者说明
slug: Mozilla/Firefox/Releases/124
l10n:
- sourceCommit: e21b3d02404cc22bf4fcf933a908a0cc6a77eb23
+ sourceCommit: 08ef601955d7fc92a9a4c6d6c047854b5aef723d
---
{{FirefoxSidebar}}
@@ -11,11 +11,18 @@ l10n:
## 为 Web 开发者带来的变化
+### HTML
+
+没有值得注意的变化。
+
### CSS
-- [`content-visibility`](/zh-CN/docs/Web/CSS/content-visibility) CSS 属性值 `auto` 现已默认启用。其允许在内容不[与用户相关](/zh-CN/docs/Web/CSS/CSS_containment#与用户相关)的情况下跳过对其的渲染。（[Firefox bug 1874874](https://bugzil.la/1874874)）。
- {{cssxref("text-wrap")}} 属性现已被转换为简写属性，其涵盖了成员属性 {{cssxref("text-wrap-mode")}} 和 {{cssxref("text-wrap-style")}}。（[Firefox bug 1758391](https://bugzil.la/1758391)）。
+### JavaScript
+
+没有值得注意的变化。
+
### SVG
- {{cssxref("::first-letter")}} 和 {{cssxref("::first-line")}} CSS 伪元素现在可应用于 {{SVGElement("text")}} SVG 元素。例如，这允许你使用 CSS 更改 `<text>` 元素的第一个字母/行的填充、描边或字体。（[Firefox bug 1302722](https://bugzil.la/1302722)）。
diff --git a/files/zh-cn/mozilla/firefox/releases/125/index.md b/files/zh-cn/mozilla/firefox/releases/125/index.md
new file mode 100644
index 00000000000000..22ed21d0f85953
--- /dev/null
+++ b/files/zh-cn/mozilla/firefox/releases/125/index.md
@@ -0,0 +1,109 @@
+---
+title: Firefox 125 的开发者说明
+slug: Mozilla/Firefox/Releases/125
+l10n:
+ sourceCommit: 08ef601955d7fc92a9a4c6d6c047854b5aef723d
+---
+
+{{FirefoxSidebar}}
+
+本文提供了有关 Firefox 125 中影响开发者的变更信息。Firefox 125 于 [2024 年 4 月 16 日](https://whattrainisitnow.com/release/?version=125)发布。
+
+## 为 Web 开发者带来的变化
+
+### HTML
+
+没有值得注意的变化。
+
+### CSS
+
+- 已更新 {{cssxref("align-content")}} 属性，使其适用于 `display: block;` 布局。这将 `flex` 和 `grid` 中所有的布局定位带到 `block`，使开发人员能够对齐块级元素，而无需将其容器转换为 `flex` 或 `grid` 容器。（[Firefox bug 1882853](https://bugzil.la/1882853)）。
+- CSS 属性 [`transform-box`](/zh-CN/docs/Web/CSS/transform-box) 现已支持 `content-box` 和 `stroke-box` 值。对于参照的盒子，`content-box` 值使用[内容盒子](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#盒模型的各个部分)，而 `stroke-box` 值使用包含 SVG 形状的描边边界框（stroke bounding box）（[Firefox bug 1868374](https://bugzil.la/1868374)）。
+- [`content-visibility`](/zh-CN/docs/Web/CSS/content-visibility) CSS 属性值 `auto` 现已默认启用。其允许在内容不[与用户相关](/zh-CN/docs/Web/CSS/CSS_containment#与用户相关)的情况下跳过对其的渲染。（[Firefox bug 1874874](https://bugzil.la/1874874)）。
+
+### JavaScript
+
+- 现已支持 {{jsxref("Intl.Segmenter")}}，其允许开发者按区域设置对字符串进行文本分割。例如，这可以将不使用空格分隔单词的语言的字符串拆分为单词：`Intl.Segmenter("ja-JP", { granularity: "word" })`。也可以将字符串拆分为字位（grapheme）或句子。（[Firefox bug 1423593](https://bugzil.la/1423593)、[Firefox bug 1883914](https://bugzil.la/1883914)。）
+
+### API
+
+- 现已完全支持 [Popover API](/zh-CN/docs/Web/API/Popover_API)，其用于创建顶级的，可用于操作菜单、自定义“吐司”通知、表单元素建议、内容选择器等的“弹出框”UI 元素。可以使用 HTML 属性或 JavaScript 来创建弹出框及其触发按钮（或输入），并使用 CSS 设置样式。
+
+ 已实现以下 Web API：
+
+ - [`HTMLButtonElement`](/zh-CN/docs/Web/API/HTMLButtonElement) 的 [`popoverTargetElement`](/zh-CN/docs/Web/API/HTMLButtonElement/popoverTargetElement) 和 [`popoverTargetAction`](/zh-CN/docs/Web/API/HTMLButtonElement/popoverTargetAction) 属性。
+ - [`HTMLInputElement`](/zh-CN/docs/Web/API/HTMLInputElement) 的 [`popoverTargetElement`](/zh-CN/docs/Web/API/HTMLInputElement/popoverTargetElement) 和 [`popoverTargetAction`](/zh-CN/docs/Web/API/HTMLInputElement/popoverTargetAction) 属性。
+ - [`HTMLElement`](/zh-CN/docs/Web/API/HTMLElement) 的 [`popover`](/zh-CN/docs/Web/API/HTMLElement/popover) 属性，[`hidePopover()`](/zh-CN/docs/Web/API/HTMLElement/hidePopover)、[`showPopover()`](/zh-CN/docs/Web/API/HTMLElement/showPopover) 和 [`togglePopover()`](/zh-CN/docs/Web/API/HTMLElement/togglePopover) 方法，[`beforetoggle`](/zh-CN/docs/Web/API/HTMLElement/beforetoggle_event) 和 [`toggle_event`](/zh-CN/docs/Web/API/HTMLElement/toggle_event) 事件（类型为 [`ToggleEvent`](/zh-CN/docs/Web/API/ToggleEvent)）。
+
+ 已支持以下用于弹出框的 CSS 伪类和元素：
+
+ - [`:popover-open`](/zh-CN/docs/Web/CSS/:popover-open)
+ - [`::backdrop`](/zh-CN/docs/Web/CSS/::backdrop) 已被扩展以支持弹出框
+
+ 已支持以下 HTML 全局属性：
+
+ - [`popovertarget`](/zh-CN/docs/Web/HTML/Element/button#popovertarget)
+ - [`popovertargetaction`](/zh-CN/docs/Web/HTML/Element/button#popovertargetaction)
+
+ （[Firefox bug 1823757](https://bugzil.la/1823757)、[Firefox bug 1866993](https://bugzil.la/1866993)）。
+
+- 现已支持 {{domxref("RTCIceTransport")}} 的 {{domxref("RTCIceTransport/state","state")}} 和 {{domxref("RTCIceTransport/gatheringState","gatheringState")}} 属性及与之关联的 {{domxref("RTCIceTransport/statechange_event","statechange")}} 和 {{domxref("RTCIceTransport/gatheringstatechange_event","gatheringstatechange")}} 事件，以及 {{domxref("RTCDtlsTransport.iceTransport")}} 属性（返回 {{domxref("RTCDtlsTransport")}} 的底层 `RTCIceTransport`）。这些特性提供了比 {{domxref("RTCPeerConnection")}} 的 {{domxref("RTCPeerConnection.iceGatheringState","iceGatheringState")}} 和 {{domxref("RTCPeerConnection.connectionState","connectionState")}} 属性更细粒度的监控。（[Firefox bug 1811912](https://bugzil.la/1811912)）。
+- 现已支持 {{domxref("Element.ariaBrailleLabel")}} 和 {{domxref("Element.ariaBrailleRoleDescription")}}，它们分别反映了全局 ARIA HTML 属性 [`aria-braillelabel`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-braillelabel) 和 [`aria-brailleroledescription`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-brailleroledescription)。（[Firefox bug 1861201](https://bugzil.la/1861201)）。
+
+- 添加了允许 Web 应用程序在画布临时丢失其 2D 上下文时进行优雅恢复的支持。这可能发生在画布使用 GPU 进行硬件加速而出现驱动程序崩溃的情况下。（[Firefox bug 1887729](https://bugzil.la/1887729)）。以下是有关丢失和恢复画布上下文的事件的一些额外细节：
+
+ - 应用程序可以监听 [`contextlost`](/zh-CN/docs/Web/API/HTMLCanvasElement/contextlost_event) 和 [`contextrestored`](/zh-CN/docs/Web/API/HTMLCanvasElement/contextrestored_event) 事件，这些事件分别在上下文丢失和恢复时于 [`HTMLCanvasElement`](/zh-CN/docs/Web/API/HTMLCanvasElement) 上触发，还可以使用 [`CanvasRenderingContext2D.isContextLost()`](/zh-CN/docs/Web/API/CanvasRenderingContext2D/isContextLost) 来检查上下文。
+ - 在触发 `contentlost` 后，浏览器将会默认尝试恢复和重启丢失的上下文，但代码可以通过取消这一事件来阻止这一行为。
+ - 可以通过相同方式监视离屏画布，但应该使用 [`OffScreenCanvas`](/zh-CN/docs/Web/API/OffscreenCanvas) 的 [`contextlost`](/zh-CN/docs/Web/API/OffscreenCanvas/contextlost_event) 和 [`contextrestored`](/zh-CN/docs/Web/API/OffscreenCanvas/contextrestored_event) 事件，以及 [`OffscreenCanvasRenderingContext2D.isContextLost()`](/zh-CN/docs/Web/API/OffscreenCanvasRenderingContext2D#上下文)。
+
+- 已添加对 `<template>` 元素的 [`shadowrootclonable`](/zh-CN/docs/Web/HTML/Element/template#shadowrootclonable) 属性以及 `HTMLTemplateElement` 接口中与之对应的 [`shadowRootClonable`](/zh-CN/docs/Web/API/HTMLTemplateElement/shadowRootClonable) 属性的支持。该属性用于设置以声明方式使用 [`<template>`](/zh-CN/docs/Web/HTML/Element/template) 元素创建的 [`ShadowRoot`](/zh-CN/docs/Web/API/ShadowRoot) 的 [`clonable`](/zh-CN/docs/Web/API/ShadowRoot/clonable) 属性。（[Firefox bug 1880188](https://bugzil.la/1880188)）。
+- 现已支持 [`Clipboard`](/zh-CN/docs/Web/API/Clipboard) 接口的 [`readText()`](/zh-CN/docs/Web/API/Clipboard/readText) 方法，其用于从系统剪贴板异步读取文本。在读取不是由同源页面提供的剪贴板数据时，将会出现粘贴上下文菜单，以供用户确认。（[Firefox bug 1877400](https://bugzil.la/1877400)）。
+
+#### Media、WebRTC 和 Web Audio
+
+- 现已为[加密媒体扩展](/zh-CN/docs/Web/API/Encrypted_Media_Extensions_API) 提供 [AV1](/zh-CN/docs/Web/Media/Formats/Video_codecs#av1) 编解码器的支持，其用于播放来自视频流提供商的更高质量的视频。（[Firefox bug 1601817](https://bugzil.la/1601817)）。
+
+#### 移除
+
+- 现已移除 [`SVGAElement.text`](/zh-CN/docs/Web/API/SVGAElement#svgaelement.text) 属性。{{domxref("Node.textContent", "textContent")}} 属性（继承自 `Node`）已获得广泛支持，应使用该属性代替。（[Firefox bug 1880689](https://bugzil.la/1880689)）。
+
+### WebAssembly
+
+- 已添加对 Wasm 模块使用多个独立线性内存的支持。多内存区域使模块之间的互操作更高效，并为即将到来的 Wasm 标准提供更好的 polyfill。例如，它们可以用于为内部和共享数据、临时和持久数据或需要在线程之间共享的数据创建单独的内存。内存可以在 JavaScript 中创建并导入到 Wasm 模块中，或在 Wasm 模块中创建并导出。Wasm 实例中的每个新的线性内存区域都会被赋予一个从零开始的顺序索引。WebAssembly 的[内存指令](/zh-CN/docs/WebAssembly/Reference/Memory)使用索引引用它们正在操作的内存，如果未指定索引，则默认为第一块定义的内存区域。有关更多信息，请参阅*理解 WebAssembly 文本格式*中的 [WebAssembly Memory](/zh-CN/docs/WebAssembly/Understanding_the_text_format#webassembly_内存)。（[Firefox bug 1860816](https://bugzil.la/1860816)）。
+
+### WebDriver 一致性（WebDriver BiDi、Marionette）
+
+#### 常规
+
+- 现已添加[“userAgent”功能](https://w3c.github.io/webdriver/#capabilities)的支持，其用于标识端点的默认用户代理值（[Firefox bug 1885495](https://bugzil.la/1885495)）。
+
+#### WebDriver BiDi
+
+- 现已添加对 [input.setFiles](https://w3c.github.io/webdriver-bidi/#command-input-setFiles) 命令的支持，其用于设置或更新具有 `type="file"` 的 `<input>` 元素的文件（[Firefox bug 1855040](https://bugzil.la/1855040)）。
+- 现已添加对 [storage.deleteCookies](https://w3c.github.io/webdriver-bidi/#command-storage-deleteCookies) 命令的支持，其用于删除 cookie（[Firefox bug 1854581](https://bugzil.la/1854581)）。
+- 现已为 cookie 命令的“partition”参数添加了“userContext”字段的支持（[Firefox bug 1875255](https://bugzil.la/1875255)）。
+- 现已修复 [storage.getCookies](https://w3c.github.io/webdriver-bidi/#command-storage-getCookies) 命令在给定“sourceOrigin”时不会检索所有预期的 cookie 的问题（[Firefox bug 1884647](https://bugzil.la/1884647)）。
+- 现已修复在仅启用 WebDriver BiDi 作为远程协议时（即禁用 CDP）不会应用推荐的首选项的问题（[Firefox bug 1882748](https://bugzil.la/1882748)）。
+- 现已修复在创建和切换到新标签页时不会等待 `visibilityState` 更新的问题（[Firefox bug 1877469](https://bugzil.la/1877469)）。
+
+## 为附加组件开发者带来的变化
+
+- {{WebExtAPIRef("proxy.ProxyInfo")}} 的 `proxyAuthorization` 属性的内容现在会作为 [CONNECT](/zh-CN/docs/Web/HTTP/Methods/CONNECT) 请求的 {{httpheader("Proxy-Authorization")}} 请求标头的值传递给 HTTP 代理（除了现有的对 HTTPS 代理的支持）（[Firefox bug 1794464](https://bugzil.la/1794464)）。
+
+## 实验性 Web 特性
+
+这些特性是 Firefox 125 中新添加的，但仅在开发者版本中或启用首选项的情况下可用。要尝试这些特性，请在 `about:config` 页面上搜索相应的首选项，并确认它们是否启用。你可以在[实验性特性](/zh-CN/docs/Mozilla/Firefox/Experimental_features)页面中了解更多关于这些特性的信息。
+
+- **CSS `transition-behavior`**：`layout.css.transition-behavior.enabled`。
+
+ {{cssxref("transition-behavior")}} 属性在 Nightly 版本中默认启用。作者可以使用此属性来控制是否将 CSS 过渡应用于具有[离散动画类型](/zh-CN/docs/Web/CSS/CSS_animated_properties#离散)的属性（[Firefox bug 1882408](https://bugzil.la/1882408)、[Firefox bug 1805727](https://bugzil.la/1805727)）。
+
+- **嵌套在分段元素中的 `<h1>` 的用户代理样式**：`layout.css.h1-in-section-ua-styles.enabled`。
+
+ 现在，当 `<h1>` 标题嵌套在[分段元素](/zh-CN/docs/Web/HTML/Content_categories#分段内容) `<article>`、`<aside>`、`<nav>` 和 `<section>` 中时，其字体大小不再减小。由于大纲算法已从 HTML 规范中[移除](https://github.com/whatwg/html/pull/7829)，嵌套在分段元素中的 `<h1>` 不再与用户代理样式相关联。（[Firefox bug 1883896](https://bugzil.la/1883896)）。
+
+ > **备注：** 此特性的首选项是反向工作的：在 Nightly 版本中，它被设置为 `false`，从而移除嵌套在分段元素中的标题的用户代理样式。在所有其他更新通道中，它被设置为 `true`，从而保留了嵌套标题的现有用户代理样式。
+
+## 更早期的版本
+
+{{Firefox_for_developers}}
diff --git a/files/zh-cn/mozilla/firefox/releases/126/index.md b/files/zh-cn/mozilla/firefox/releases/126/index.md
new file mode 100644
index 00000000000000..64ad596f87cfc8
--- /dev/null
+++ b/files/zh-cn/mozilla/firefox/releases/126/index.md
@@ -0,0 +1,100 @@
+---
+title: Firefox 126 的开发者说明
+slug: Mozilla/Firefox/Releases/126
+l10n:
+ sourceCommit: e6fcda9d35359bbfec32ddb42086468701f57ee5
+---
+
+{{FirefoxSidebar}}
+
+本文提供了有关 Firefox 126 中影响开发者的变更信息。Firefox 126 于 [2024 年 5 月 14 日](https://whattrainisitnow.com/release/?version=126)发布。
+
+## 为 Web 开发者带来的变化
+
+### 开发者工具
+
+- 添加了用于禁用拆分控制台的选项（[Firefox bug 1731635](https://bugzil.la/1731635)）。
+
+### HTML
+
+没有值得注意的变化。
+
+### MathML
+
+#### 移除
+
+- 垂直居中运算符（+、=、< 等）的自动调整已默认禁用。这种行为并未在 MathML Core 中定义，这只是为非数学字体的问题提供的一种解决方案。仍可以通过将 `mathml.centered_operators.disabled` 配置设为 `false` 来启用此特性。（[Firefox bug 1890531](https://bugzil.la/1890531)）。
+
+### CSS
+
+- 现已支持 {{cssxref("zoom")}} 属性。其可用于增加或减小元素及其内容的大小（[Firefox bug 390936](https://bugzil.la/390936)）。
+
+### JavaScript
+
+没有值得注意的变化。
+
+### HTTP
+
+- 现已支持新的 `Content-Encoding` HTTP 标头的指令 [`zstd`](/zh-CN/docs/Web/HTTP/Headers/Content-Encoding#zstd)，允许解码服务器发送的、使用 {{glossary("Zstandard compression", "Zstandard 压缩")}}算法编码的内容（[Firefox bug 1871963](https://bugzil.la/1871963)）。
+
+### API
+
+- 现已支持 [`IDBFactory.databases()`](/zh-CN/docs/Web/API/IDBFactory/databases)，其用于枚举可用的 [IndexedDB API](/zh-CN/docs/Web/API/IndexedDB_API) 数据库（[Firefox bug 934640](https://bugzil.la/934640)）。
+- 现在支持使用 [`IDBTransaction.durability`](/zh-CN/docs/Web/API/IDBTransaction/durability) 来查询用于创建特定事务的持久性提示（[Firefox bug 1878143](https://bugzil.la/1878143)）。
+- [`URL.parse()`](/zh-CN/docs/Web/API/URL/parse_static) 静态方法现已支持创建 [`URL`](/zh-CN/docs/Web/API/URL) 对象。如果传递的参数未定义有效的 `URL`，则返回 `null`，因此可以作为使用 [`URL` 构造函数](/zh-CN/docs/Web/API/URL/URL)创建 `URL` 对象的不抛出异常的替代方法（[Firefox bug 1823354](https://bugzil.la/1823354)）。
+- 现已支持[屏幕唤醒锁 API](/zh-CN/docs/Web/API/Screen_Wake_Lock_API)，其用于请求在应用程序处于活动状态时不要使屏幕变暗或锁定。这对于导航和阅读应用程序以及其他的因为在使用时屏幕可能不会接收到通常会使其保持唤醒状态的常规触摸输入的应用程序特别有用。在安全上下文中，可以通过 {{domxref("Navigator.wakeLock")}}（会返回一个 {{domxref("WakeLock")}}）访问 API。其允许你请求一个用于监视唤醒锁的状态并手动释放它的 {{domxref("WakeLockSentinel")}}（[Firefox bug 1589554](https://bugzil.la/1589554)、[Firefox bug 1874849](https://bugzil.la/1874849)）。
+- 现已支持所有的 [`RTCIceCandidate`](/zh-CN/docs/Web/API/RTCIceCandidate) 属性和方法（除了未实现的 `relayProtocol` 和 `url` 属性），并与规范相匹配。已对 `RTCIceCandidate` 的属性进行了以下更改：
+
+ - 已将以下属性变为只读：[`candidate`](/zh-CN/docs/Web/API/RTCIceCandidate/candidate)、[`sdpMid`](/zh-CN/docs/Web/API/RTCIceCandidate/sdpMid)、[`sdpMLineIndex`](/zh-CN/docs/Web/API/RTCIceCandidate/sdpMLineIndex) 和 [`usernameFragment`](/zh-CN/docs/Web/API/RTCIceCandidate/usernameFragment)。
+ - 已添加以下属性：[`foundation`](/zh-CN/docs/Web/API/RTCIceCandidate/foundation)、[`component`](/zh-CN/docs/Web/API/RTCIceCandidate/component)、[`priority`](/zh-CN/docs/Web/API/RTCIceCandidate/priority)、[`address`](/zh-CN/docs/Web/API/RTCIceCandidate/address)、[`protocol`](/zh-CN/docs/Web/API/RTCIceCandidate/protocol)、[`port`](/zh-CN/docs/Web/API/RTCIceCandidate/port)、[`type`](/zh-CN/docs/Web/API/RTCIceCandidate/type)、[`tcpType`](/zh-CN/docs/Web/API/RTCIceCandidate/tcpType)、[`relatedAddress`](/zh-CN/docs/Web/API/RTCIceCandidate/relatedAddress)、[`relatedPort`](/zh-CN/docs/Web/API/RTCIceCandidate/relatedPort) 和 [`usernameFragment`](/zh-CN/docs/Web/API/RTCIceCandidate/usernameFragment)。
+
+ （[Firefox bug 1322186](https://bugzil.la/1322186)）。
+
+- 现已支持 {{domxref("Element.currentCSSZoom")}} 只读属性，其用于获取元素的实际 CSS [zoom](/zh-CN/docs/Web/CSS/zoom)（[Firefox bug 1880189](https://bugzil.la/1880189)）。
+
+#### DOM
+
+- 定义自定义元素的状态并使用 CSS 选择器进行匹配的特性现已默认可用。自定义状态被表示为可以添加到或从元素的 {{domxref("ElementInternals.states")}} 属性（{{domxref("CustomStateSet")}}）中移除的自定义标识符。CSS [`:state()`](/zh-CN/docs/Web/CSS/:state) 伪类以自定义标识符为参数，并在自定义元素的状态集中存在该标识符时匹配该元素（[Firefox bug 1887543](https://bugzil.la/1887543)）。
+- 现已支持 {{domxref("Selection.direction")}} 属性，其用于指示范围的方向（[Firefox bug 1867058](https://bugzil.la/1867058)）。
+
+#### 媒体、WebRTC 和 Web 音频
+
+#### 移除
+
+- 现已从 [`HTMLMarqueeElement`](/zh-CN/docs/Web/API/HTMLMarqueeElement) 中删除字幕事件 [`bounce`](/zh-CN/docs/Web/API/HTMLMarqueeElement#bounce)、[`finish`](/zh-CN/docs/Web/API/HTMLMarqueeElement#finish) 和 [`start`](/zh-CN/docs/Web/API/HTMLMarqueeElement#start)，同时删除的还有在 [`<marquee>` HTML 元素](/zh-CN/docs/Web/HTML/Element/marquee)上定义的相应的[事件处理器属性](/zh-CN/docs/Web/HTML/Element/marquee#事件处理器)（[Firefox bug 1689705](https://bugzil.la/1689705)）。
+
+### WebDriver 一致性（WebDriver BiDi、Marionette）
+
+#### WebDriver BiDi
+
+- 已为 `network.addIntercept` 命令添加了 `contexts` 参数，其用于限制对特定顶级浏览上下文的网络请求拦截（[Firefox bug 1884935](https://bugzil.la/1882260)）。
+- `session.subscribe` 和 `session.unsubscribe` 现在都会在参数 `events` 或 `contexts` 的值为空数组时引发 `invalid argument` 错误（[Firefox bug 1884935](https://bugzil.la/1887871)）。
+- 已更新对 `storage.getCookies` 命令的实现，以与 Gecko 默认的 cookie 行为保持一致。这允许删除用户的 `network.cookie.cookieBehavior` 偏好设置（预期仅会用于我们的 CDP 实现）（[Firefox bug 1884935](https://bugzil.la/1879503)）。
+- 已移除 `browsingContext.locateNodes` 命令的 `ownership` 和 `sandbox` 参数，因为它们不再被需要（[Firefox bug 1884935](https://bugzil.la/1838152)）。
+- 已改进 `session.new` 命令在未指定任何能力时的错误消息（[Firefox bug 1885495](https://bugzil.la/1838152)）。
+
+## 为附加组件开发者带来的变化
+
+- {{WebExtAPIRef("commands.onCommand")}} 事件现在将 `tab` 参数传递给事件监听器。这使得扩展可以将触发的快捷键应用于发出该事件的页面，而无需调用 `tabs.query()` 方法（[Firefox bug 1843866](https://bugzil.la/1843866)）。
+- {{WebExtAPIRef("runtime.MessageSender")}} 类型现在包含 `origin` 属性。这使得消息或连接请求可以查看打开连接的页面或框架。这对于在 URL 中未明确显示来源的情况下确定来源是否可信非常有用（[Firefox bug 1787379](https://bugzil.la/1787379)）。
+- 现已支持 `"webRequestAuthProvider"` 权限。这为 Manifest V3 中用于 {{WebExtAPIRef("webRequest.onAuthRequired")}} 的请求权限提供了与 Chrome 的兼容性（[Firefox bug 1820569](https://bugzil.la/1820569)）。
+- 现在提供 [`options_page` 清单键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_page)来作为 [`options_ui`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) 键的别名。这是为了使扩展更好地与 Chrome 兼容（[Firefox bug 1816960](https://bugzil.la/1816960)）。
+- {{WebExtAPIRef("tabs.captureVisibleTab")}} 方法现在也可以通过 `activeTab` [权限](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)启用，这提供了与 Chrome 和 Safari 的兼容性（[Firefox bug 1784920](https://bugzil.la/1784920)）。
+
+### 其他
+
+## 实验性 Web 特性
+
+这些特性是 Firefox 126 中新添加的，但在默认情况下是禁用的。要尝试这些特性，请在 `about:config` 页面上搜索相应的首选项，并将其设置为 `true`。你可以在[实验性特性](/zh-CN/docs/Mozilla/Firefox/Experimental_features)页面上找到更多这样的特性。
+
+- **可跨越影子 DOM 边界的选择**：`dom.shadowdom.selection_across_boundary.enabled`。
+
+ {{domxref("Selection.getComposedRanges()")}} 方法现在可用于获取影子 DOM 中具有锚点或焦点的节点的选择范围——前提是传递了包含这些节点的 {{domxref("ShadowRoot")}} 对象。`Selection` 的 {{domxref("Selection.setBaseAndExtent()","setBaseAndExtent()")}}、{{domxref("Selection.collapse()","collapse()")}} 和 {{domxref("Selection.extend()","extend()")}} 方法也已修改，以接受影子根中的节点（[Firefox bug 1867058](https://bugzil.la/1867058)）。
+
+- **CSS `shape()` 函数**：`layout.css.basic-shape-shape.enabled`。
+
+ 你可以在 {{cssxref("clip-path")}} 和 {{cssxref("offset-path")}} 属性中使用 [`shape()`](/zh-CN/docs/Web/CSS/basic-shape/shape) 函数来定义形状。此函数使你可以更精细地控制可被定义的形状，并提供了比 {{cssxref("path","path()")}} 函数更多的优点（参见 [Firefox bug 1823463](https://bugzil.la/1823463) 以了解 `shape()` 函数在 `clip-path` 中的支持；参见 [Firefox bug 1884424](https://bugzil.la/1884424) 以了解 `shape()` 函数在 `offset-path` 中的支持；参见 [Firefox bug 1884425](https://bugzil.la/1884425) 以了解 `shape()` 的插值支持）。
+
+## 更早期的版本
+
+{{Firefox_for_developers}}
diff --git a/files/zh-cn/mozilla/index.md b/files/zh-cn/mozilla/index.md
index 7fb44cd02695ae..f8ff2fc96f1ad9 100644
--- a/files/zh-cn/mozilla/index.md
+++ b/files/zh-cn/mozilla/index.md
@@ -3,6 +3,8 @@ title: Mozilla
slug: Mozilla
---
+{{FirefoxSidebar}}
+
下面的文章中包含了下载和构建 Mozilla 程序代码的指引。此外，你也可以找到一些有助理解代码如何运作、如何构建 Mozilla 应用程序的附加组件之类的文章。
{{LandingPageListSubpages}}
diff --git a/files/zh-cn/web/accessibility/accessibility_and_spacial_patterns/index.md b/files/zh-cn/web/accessibility/accessibility_and_spacial_patterns/index.md
new file mode 100644
index 00000000000000..b49642e09134a2
--- /dev/null
+++ b/files/zh-cn/web/accessibility/accessibility_and_spacial_patterns/index.md
@@ -0,0 +1,84 @@
+---
+title: 无障碍和空间模式
+slug: Web/Accessibility/Accessibility_and_Spacial_Patterns
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+## 空间定位
+
+美国国家航空航天局进行了有关颜色感知的研究，并发现亮度对颜色感知的影响很大。下面的两幅图片来自 NASA 的研究，具体来自文章“[蓝色设计](https://colorusage.arc.nasa.gov/blue_2.php)”。
+
+ 
+
+“_**空间定位**。与背景具有相同亮度的符号在空间和时间上的感知定位不如具有较高亮度对比度的符号安全，更容易在视觉上‘飘移’或被亮度对比度较高的相邻符号‘捕获’。这种现象似乎对仅在蓝色通道上有所不同的符号/背景组合特别有问题。_”
+
+## 条纹之间的距离
+
+光敏性癫痫可能由静态图像以及动画引起。对于这一机制了解甚少，但据信与大脑中形成的“γ 振荡”有关。大脑中的这些振荡是一种不同于其他种类可能引起光敏性癫痫的神经反应。
+
+条纹和图案是造成问题的典型图像类型，其中条纹被研究得最深入。如果任何方向上的光暗条纹对超过五对，则有可能造成危害。它们可以是平行的、径向的、弯曲的或直的，并且可以由重复元素的行形成。
+
+2005 年，阿诺德·威尔金斯、约翰·埃米特和格雷厄姆·哈丁评估了导致癫痫发作的图案图像的特征化准则。他们修订了准则的核心内容，并提出了一种出人意料的简单但有效的[测试](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1528-1167.2005.01405.x)，他们在论文[**《表征诱发癫痫的图案图像并优化预防准则》**](https://onlinelibrary.wiley.com/doi/full/10.1111/j.1528-1167.2005.01405.x)中发表了这一测试。
+
+> **备注：** 评估材料所需的步骤简化如下：
+> 注视屏幕：
+>
+> - 是否有超过五个条纹？
+> - 如果是，则持续时间是否超过 0.5 秒？
+> - 如果是，则亮度是否超过规定的限制？
+> - 如果是，则分类图案的运动。
+> - 是否违反了准则？
+>
+> 如果是，则降低亮度。
+
+## 文本和填充
+
+WCAG 对于对比度感知的标准不考虑填充效果。例如，蓝色文本在灰色背景上，如果局部被黑色而不是白色所包围，则更容易感知。对颜色进行“局部”适应是存在的。简而言之：填充很重要。
+
+## 数学
+
+空间推理影响数学学习；因此，数学呈现中的空间关系影响认知。Web 开发人员可以通过展示数学的方式来做些事情。动画在这方面起着重要作用。例如，物体旋转时的外观，“切片”的外观以及它们在空间中的相互关系都会影响以空间术语理解数学的能力。
+
+## 盲文
+
+现代技术使非专业人士也能够打印盲文。例如，Adobe Illustrator 允许用户对 ADA 盲文进行排版以打印出来。
+
+准确地向盲人呈现空间模式对于无障碍至关重要。例如，仅了解盲文是不够的。盲文点必须在空间上相互分开，以便以一种“人性化”的方式阅读。人类的触觉确实能够轻松地区分盲文点之间过于接近或过于分散的情况。
+
+盲文字符周围必须有空间。盲文用户不能将手指放在盲文字符的“顶部”，用户必须在字符上移动手指，就像视力正常的人必须在页面上的文本上移动眼睛一样。
+
+空间的性质可以根据正在使用的 MIME 类型及其版本而变化。例如，SVG 上的边框可以从其尺寸向内外延伸，或者对于较新版本的 SVG，完全从外部延伸，从而减少 SVG 周围的空间以便感知。
+
+## 参见
+
+### MDN
+
+- [无障碍：用户可以采取哪些措施以更安全地浏览](/zh-CN/docs/Web/Accessibility/Accessibility:_What_users_can_to_to_browse_safely)
+- [癫痫和身体反应的 Web 无障碍](/zh-CN/docs/Web/Accessibility/Seizure_disorders)
+- [Web 无障碍：理解颜色和亮度](/zh-CN/docs/Web/Accessibility/Understanding_Colors_and_Luminance)
+
+### 盲文
+
+- [第 3 部分：在 Adobe Illustrator 中正确排版 ADA 盲文的逐步指南](https://www.tinkeringmonkey.com/guides/ada-signage/a-step-by-step-guide-to-typesetting-ada-braille-correctly-in-adobe-illustrator/)
+- [盲文点中的空间数学（5 个部分中的第 4 部分）](https://www.youtube.com/watch?v=yz9vefDsj1g)
+
+### 政府文献
+
+- [NASA：蓝色设计](https://colorusage.arc.nasa.gov/blue_2.php)
+
+### 数学
+
+- [空间推理：为什么数学谈论的不仅仅是数字](https://dreme.stanford.edu/news/spatial-reasoning-why-math-talk-about-more-numbers)
+
+### 科学文献
+
+- [上下文中的色彩恒定性：局部适应和参考级别的作用](https://jov.arvojournals.org/article.aspx?articleid=2192799)
+- [γ 振荡与光敏性癫痫](https://www.sciencedirect.com/science/article/pii/S0960982217304062?via%3Dihub)
+- [表征诱发癫痫的图案图像并优化预防准则](https://onlinelibrary.wiley.com/doi/epdf/10.1111/j.1528-1167.2005.01405.x) Arnold Wilkins、John Emmett 与 Graham Harding 著
+
+#### 贡献者
+
+衷心感谢 [Diagram Center](http://diagramcenter.org/) 的吉姆·艾伦就替代教育手段的话题进行的讨论。
diff --git a/files/zh-cn/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md b/files/zh-cn/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md
new file mode 100644
index 00000000000000..0e3bafb5427da2
--- /dev/null
+++ b/files/zh-cn/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md
@@ -0,0 +1,92 @@
+---
+title: 无障碍：用户如何更安全地浏览网页
+slug: Web/Accessibility/Accessibility:_What_users_can_to_to_browse_safely
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+这篇文章讨论了如何通过利用操作系统内置的个性化和无障碍设置，使患有前庭障碍的人以及支持他们的人能够更加方便地访问 web 内容。充分利用个性化设置可以帮助防止接触可能引发癫痫或其他身体反应的内容。
+
+## 个性化和无障碍设置
+
+摘录自文章“**[了解成功标准 2.3.1：三个闪烁或低于阈值](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html)**”：
+
+> 闪烁可能是由显示器、计算机渲染图像或正在渲染的内容引起的。作者对前两者没有控制权。这可以通过显示和计算机的设计和速度来解决。
+
+### 许多计算机的硬件和操作系统提供了开发者所不能享有的控制权
+
+用户可以通过学习他的操作系统、其个性化和无障碍设置来做很多事情来保护自己。那些必须适应特殊敏感性的公共部门的人，应该考虑至少设置一台工作站，并熟悉其个性化和无障碍设置。了解个性化和无障碍设置实际上可以是节省资金的努力。通过调整个性化和无障碍设置，一台工作站可以被设置为同时适应低视力个体（需要高对比度）和适应具有光敏感性易感性的个体。
+
+### 使用现代浏览器。学习个性化和无障碍设置
+
+现代浏览器支持 CSS 媒体特性 [`prefers-reduced-motion`](/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion)。浏览器可以检测用户是否请求了减少动画的体验。用户可以通过无障碍界面访问此功能，如下所示。
+
+
+
+支持 CSS 过渡事件。例如：
+
+- `transitionrun`
+- `transitionstart`
+- `transitionend`
+- `transitioncancel`
+
+### Safari 10.1 及以上（桌面版）
+
+不要启用自动播放（对 GIF 不起作用）
+
+#### iOS Safari 10.3 及以上（移动和平板电脑）
+
+在苹果操作系统的辅助功能设置中选择“减少动画选项”（图片来源：来自 developers.google.com 上由 Thomas Steiner 所著的文章“Move Ya! Or maybe, don't, if the user prefers-reduced-motion!”）。这对动画 GIF 不起作用；动画的来源嵌入在 GIF 中，并不受这些设置的影响。
+
+#### 使用浏览器的阅读模式
+
+- 启用内容拦截器；去除广告，减少或移除干扰
+- 启用文本转语音功能
+- 在某些浏览器中，可以选择启用字体
+- 启用页面缩放功能
+
+#### 关闭浏览器中的动画 GIF
+
+浏览器为用户提供了很多能力；只需知道去哪里。以 Firefox 为例，它解释了通过将 **image.animation_mode** 的值从“normal”更改为“none”，所有动画图像都将被阻止。要恢复原状，你需要将值改回“normal”。
+
+
+
+#### 使用浏览器扩展
+
+- [Gif Blocker](https://chrome.google.com/webstore/detail/gif-blocker/ahkidgegbmbnggcnmejhobepkaphkfhl)：适用于 Chrome，Gif Blocker 是一个应用商店提供的扩展。
+- [Gif Scrubber](https://chrome.google.com/webstore/detail/gif-scrubber/gbdacbnhlfdlllckelpdkgeklfjfgcmp)：Gif Scrubber 是一个 Chrome 扩展，允许你像视频播放器一样控制 GIF。它在 **<https://github.com/0ui/gif-scrubber>** 上有一个 GitHub 存储库。
+- [Beeline Reader](https://www.beelinereader.com/)：Beeline Reader 有一个浏览器扩展，可以设置为灰度和 Dyslexi 字体，等等。
+
+
+
+### 利用操作系统的无障碍特性
+
+大多数操作系统，如 Windows 10，都有令人惊讶的无障碍选项。通常，通过在操作系统的搜索查找器中键入（或说出）单词“辅助功能”，它们很容易找到。
+
+#### 关闭操作系统中的动画
+
+在 Windows 10 操作系统中，用户可以关闭动画。这对动画 GIF 不起作用；动画的来源嵌入在 GIF 中，并不受这些设置的影响。
+
+
+
+#### 灰度
+
+那些遭受创伤性脑损伤（TBI）的人可能对颜色非常敏感；对他们来说，需要对颜色进行如此大量的“认知精力投入”，以至于没有精力去做其他日常任务。启用内容的灰度呈现可降低认知工作负荷。这也可能有助于其他残疾人。在讨论“[辅助功能选项中的‘灰度’设置有什么用处？](https://ask.metafilter.com/312049/What-is-the-grayscale-setting-for-in-accessibility-options)”中，用户对使用灰度的好处进行了有趣的讨论。特别感兴趣的是一个患有光敏感性癫痫的用户，他在感觉到“抽搐”时使用灰度。
+
+大多数操作系统都有一种让用户在工作站上进行调整的方法。在下面的截图中，你可以看到 Windows 10 辅助功能设置的示例，允许选择颜色滤镜。当颜色滤镜按钮切换为“开”时，灰度被启用。
+
+
+
+## 参见
+
+- [无障碍](/zh-CN/docs/Web/Accessibility)
+- [无障碍学习路径](/zh-CN/docs/Learn/Accessibility)
+- [用于癫痫和身体反应的 web 无障碍](/zh-CN/docs/Web/Accessibility/Seizure_disorders)
+- [颜色视觉模拟](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/index.html)
+- 讨论：“[辅助功能选项中的‘灰度’设置有什么用处？](https://ask.metafilter.com/312049/What-is-the-grayscale-setting-for-in-accessibility-options)”
+
+### 贡献者
+
+非常感谢来自 [Knowbility](https://knowbility.org/) 的 Eric Eggert 对这个话题的讨论和巨大帮助。
diff --git a/files/zh-cn/web/accessibility/aria/aria_guides/index.md b/files/zh-cn/web/accessibility/aria/aria_guides/index.md
new file mode 100644
index 00000000000000..2cbb6c76180dd3
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/aria_guides/index.md
@@ -0,0 +1,26 @@
+---
+title: ARIA 指南
+slug: Web/Accessibility/ARIA/ARIA_Guides
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+无障碍富互联网应用（**ARIA**）定义了能够让残障人士更方便地使用 web 的方法。本页面列出了可用于帮助改善网页特性（如表格、表单和键盘导航）的无障碍水平的指南。
+
+- [设计无障碍的表单](https://www.w3.org/WAI/tutorials/forms/)
+- [理解 WAI-ARIA 基础知识](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [创建可通过键盘导航的 JavaScript 微件](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)
+- [使用嵌入字段的标签的 ARIA](/zh-CN/docs/Web/Accessibility/ARIA/Multipart_labels)
+- [在复合微件中管理焦点](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)（`aria-activedescendant` vs. 循环 tabindex）
+- [测试 ARIA](https://www.w3.org/WAI/test-evaluate/)
+- [显示无障碍表格](https://www.w3.org/WAI/tutorials/tables/)
+
+## 参见
+
+- [为微件添加标签](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+- [地标角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/landmark_role)
+- [ARIA 实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
+- [HTML 拖放 API](/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)
+- [ARIA：presentation 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/presentation_role)
diff --git a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md
index 2c1a2ac565ca5f..de957321acc838 100644
--- a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md
+++ b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md
@@ -1,96 +1,81 @@
---
-title: ARIA 活动区域
+title: ARIA 实时区域
slug: Web/Accessibility/ARIA/ARIA_Live_Regions
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
-使用 JavaScript，我们可以动态更改页面的某些部分，而无需重新加载整个页面——例如，可以动态更新搜索结果列表，或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的，但是对于残疾用户来说，它们可能并不明显。ARIA Live 区域填补了这个空白，并提供了一种以编程方式显现动态内容更改的方法，这种方式可以由残疾辅助技术提供提示。
+使用 JavaScript，我们可以动态更改页面的某些部分，而无需重新加载整个页面——例如，可以动态更新搜索结果列表，或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的，但是对于使用辅助技术的用户来说，它们可能并不明显。ARIA 实时区域（live region）填补了这个空白，并提供了一种以编程方式显现动态内容更改的方法，这种方式可以由辅助技术提供宣告。
-> **备注：** 辅助技术将播报实时区域内容的动态变化。必须首先显示活动区域（通常是空的），以便浏览器和辅助技术可以知道它。然后宣布任何后续更改。
->
-> 在页面加载时的初始标记中简单地添加一个 `aria-live` 属性或者一个特殊的活动区域角色 ( `role` ) (例如 `role="alert"`) 将不会起作用。
->
-> 向文档中动态添加一个包含 `aria-live` 属性的元素或者特殊的角色 ( `role` ) 也不会导致辅助技术工具的任何播报（在那个时间点，浏览器/辅助技术工具还没有检测到活动区域）所以你不能监控它的变化)。
->
-> 总是确保实时区域首先出现在文档中，然后再动态添加/更改任何内容。
->
-> 只要在更改发生之前添加属性，就可以在要宣布更改的元素上包含 `aria-live` 属性或专门的活动区域角色（例如`role =“ alert”`）——在原始标记中或动态地使用 JavaScript。
+> **备注：** 辅助技术通常只会宣告实时区域中的*动态*内容变更。在你希望宣告发生变更的元素，你只需要在变更发生之前在相应的元素上包含 `aria-live` 属性或专门的实时区域 `role`（例如 [`role="status"`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/status_role)）——无论是在原始标记中，还是使用 JavaScript 动态添加。首先创建一个空的实时区域，然后——在单独的步骤中——更改区域内的内容。虽然在规范中没有明确记录，但浏览器/辅助技术确实对 [`role="alert"`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/alert_role) 包含了特殊处理：在大多数情况下，即使页面的初始标记中已经存在包含通知/消息的 `role="alert"` 区域，或者动态注入到页面中，该区域内的内容也会被宣告。但是，请注意，`role="alert"` 区域在被宣告时会根据特定的浏览器/辅助技术组合自动添“警报”前缀。
-## 简单的活动区域
+## 实时区域
-在不重新加载页面的情况下更新的动态内容通常是区域或窗口小部件。非交互式的简单内容更改应标记为实时区域。以下是每个相关的 ARIA 活动区域属性的列表，并带有说明。
+无需页面重新加载即可更新的动态内容通常是区域或微件（widget）。不涉及交互的简单内容更改应标记为实时区域。使用 `aria-live` 属性显式标记实时区域。
-1. **`aria-live`**: `aria-live=POLITENESS_SETTING` 被用来设置屏幕阅读器对待活动区域更新的优先级 - 可能的设置：`off`, `polite` or `assertive` 。默认设置是 `off` 。这个设置是到目前为止最重要的。
-2. **`aria-controls`**: `aria-controls=[IDLIST]` 被用来将控制动作与它控制的区域相关联。区域就像`div` 里面的 `id` 被鉴别；多区域可以被一个带空格的控制动作关联，例如： `aria-controls="myRegionID1 myRegionsID2"` 。
+**`aria-live`**：`aria-live=POLITENESS_SETTING` 用于设置屏幕阅读器处理实时区域更新的优先级——可能的设置有：`off`、`polite` 或 `assertive`。该属性是迄今为止最重要的。
- > **警告：** 尚不知道在当前的辅助技术工具中是否实现了实时区域的 ARIA 控制方面。需要研究。
+通常只使用 `aria-live="polite"`。任何接收对用户重要但不会如此频繁而令人讨厌的更新的区域应该接收该属性。当用户处于空闲状态时，屏幕阅读器将朗读更改。
-正常来说，只有 `aria-live="polite"` 被使用。任何对用户来说很重要但又不至于令人讨厌的更新的区域都应该被设置此属性。每当用户空闲时，屏幕阅读器都会说出更改。
+`aria-live="assertive"` 应仅用于时间敏感/关键通知，这些通知绝对需要用户立即关注。通常，对 assertive 动态区域的更改将中断屏幕阅读器当前正在进行的任何宣告。因此，它可能会非常让人讨厌并具有破坏性，应该谨慎使用。
-对于不重要的区域或由于快速更新或其他原因而烦人的区域，请使用 `aria-live="off"` 将其静音。
+与直觉相反，`aria-live="off"` 不表示不应该宣告更改。当元素具有 `aria-live="off"`（或具有此隐含值的 `role`，例如 `role="marquee"` 或 `role="timer"`）时，仅应在焦点位于元素上或内部时才宣告元素内容的更改。
-### 让下拉框更新有用的屏幕信息
+### 基本示例：下拉框更新屏幕上有用的信息
-一个专门提供有关行星信息的网站提供了一个下拉框。从下拉列表中选择一个行星时，页面上的区域会更新有关所选行星的信息。
-
-#### HTML
+一个专门提供有关行星信息的网站提供了一个下拉框。当从下拉框中选择一个行星时，页面上的一个区域将被更新为有关所选行星的信息。
```html
<fieldset>
- <legend>Planet information</legend>
- <label for="planetsSelect">Planet:</label>
+ <legend>行星信息</legend>
+ <label for="planetsSelect">行星：</label>
<select id="planetsSelect" aria-controls="planetInfo">
- <option value="">Select a planet…</option>
- <option value="mercury">Mercury</option>
- <option value="venus">Venus</option>
- <option value="earth">Earth</option>
- <option value="mars">Mars</option>
+ <option value="">选择一个行星…</option>
+ <option value="mercury">水星</option>
+ <option value="venus">金星</option>
+ <option value="earth">地球</option>
+ <option value="mars">火星</option>
</select>
- <button id="renderPlanetInfoButton">Go</button>
+ <button id="renderPlanetInfoButton">确定</button>
</fieldset>
<div role="region" id="planetInfo" aria-live="polite">
- <h2 id="planetTitle">No planet selected</h2>
- <p id="planetDescription">Select a planet to view its description</p>
+ <h2 id="planetTitle">未选择行星</h2>
+ <p id="planetDescription">选择一个行星以查看其描述</p>
</div>
<p>
- <small
- >Information courtesy
- <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System"
- >Wikipedia</a
- ></small
- >
+ <small>
+ 信息来自<a href="https://zh.wikipedia.org/wiki/太阳系">维基百科</a>
+ </small>
</p>
```
-#### JavaScript
-
```js
const PLANETS_INFO = {
mercury: {
- title: "Mercury",
+ title: "水星",
description:
- "Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.",
+ "水星是太阳系中最小、最靠近太阳的行星。它以罗马信使神水星命名。",
},
venus: {
- title: "Venus",
- description:
- "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.",
+ title: "金星",
+ description: "金星是离太阳第二近的行星。它以罗马爱与美之女神金星命名。",
},
earth: {
- title: "Earth",
+ title: "地球",
description:
- "Earth is the third planet from the Sun and the only object in the Universe known to harbor life.",
+ "地球是距离太阳第三近的行星，也是宇宙中唯一已知存在生命的天体。",
},
mars: {
- title: "Mars",
+ title: "火星",
description:
- 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".',
+ "火星是距离太阳第四近的行星，也是太阳系中仅次于水星的第二小行星。火星在英文中得名于罗马战神，通常被称为“红色星球”。",
},
};
@@ -102,8 +87,8 @@ function renderPlanetInfo(planet) {
planetTitle.textContent = PLANETS_INFO[planet].title;
planetDescription.textContent = PLANETS_INFO[planet].description;
} else {
- planetTitle.textContent = "No planet selected";
- planetDescription.textContent = "Select a planet to view its description";
+ planetTitle.textContent = "未选择行星";
+ planetDescription.textContent = "选择一个行星以查看其描述";
}
}
@@ -120,87 +105,121 @@ renderPlanetInfoButton.addEventListener("click", (event) => {
});
```
-{{EmbedLiveSample('让下拉框更新有用的屏幕信息', '', 350)}}
-
-当用户选择一个新的行星时，活动区域的信息会被播报。因为这个活动区域有 `aria-live="polite"` 属性，屏幕阅读器将会等待用户暂停后再播报更新。这样的话，在列表中向下滑动并选择其他星球将不会在实时区域中播报更新。仅会针对最终选择的星球播报实时区域的更新。
-
-这是 Mac 上 VoiceOver 的屏幕截图，播报对实时区域的更新（通过字幕）：
-
-## 更好的专业活动区域角色
-
-在以下众所周知的预定义情况下，最好使用提供的特定“活动区域角色”：
-
-| 角色 | 描述 | 兼容性提示 |
-| ------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 日志 | 对话、错误、游戏或者其他类型的日志 | 为最大化兼容性，当你使用这个角色时，请加入额外的`aria-live="polite"` 参数。 |
-| 状态 | 一个状态栏或者屏幕上提供持续更新某种状态的区域。屏幕阅读器用户有一个特殊的命令用来读取当前的状态。 | 为最大化兼容性，当你使用这个角色时，请加入额外的`aria-live="polite"` 参数。 |
-| 警告 | 在屏幕上闪烁的错误或警告信息。警报对于向用户发出客户端验证通知特别重要。（待定：带有 ARIA 信息的 ARIA 表单教程链接） | 为最大化兼容性，当你使用这个角色时，请加入额外的`aria-live="assertive"` 参数。但是，同时添加 `aria-live` 和 `role="alert"` 会导致在 iOS 平台上出现 VoiceOver 的双重播报问题。 |
-| 进度条 | 小部件和活动区域之间的混合体。将此参数与 `aria-valuemin` ， `aria-valuenow` 和`aria-valuemax` 结合使用。（_待定_：请在此处添加更多信息）。 | |
-| 选框 | 用于滚动文本，例如股票行情自动收录器。 | |
-| 计时器 | 或任何类型的计时器或时钟，例如倒数计时器或秒表读数。 | |
-
-## 高级活动区域
-
-（_待定_：有关操作系统 / 浏览器 / 辅助技术工具组合对单个属性的支持的更详细的信息）
-
-JAWS 10.0 版中已添加对实时区域的常规支持。Windows Eyes 从 8.0 版开始支持“在 Microsoft Internet Explorer 和 Mozilla Firefox 的浏览模式之外使用”的实时区域。NVDA 早在 2008 年就为 Mozilla Firefox 添加了对实时区域的一些基本支持，并在 2010 年和 2014 年进行了改进。2015 年，还为 Internet Explorer（MSHTML）添加了基本支持。
-
-Paciello Group 有一些 [与活动区域支持状态有关的信息](https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/)(2014)，Paul J. Adam 特别研究了[对于 `Aria-Atomic` 与 `Aria-Relevant` 的支持](http://pauljadam.com/demos/aria-atomic-relevant.html)。
-
-1. **`aria-atomic`**: `aria-atomic=BOOLEAN` 被用来设置屏幕阅读器是否应该总是将活动区域整个播报，即使区域中只有一部分内容改变。可能的值为 `false` 或者 `true`。默认值为 `false`。
-2. [**`aria-relevant`**](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute)：`aria-relevant=[LIST_OF_CHANGES]` 被用来设置哪些类型的改变与活动区域有关。可能的值由以下的一个或者更多组成：`additions`、`removals`、`text`、`all`。默认值是 `additions text`。
-3. **`aria-labelledby`** : `aria-labelledby=[IDLIST]` 被用来将一个区域与其标签关联起来，与 aria-control 类似，但将标签与区域关联。标签标识符间用空格隔开。
-4. **`aria-describedby`** : `aria-describedby=[IDLIST]` 被用来将一个区域与其描述关联起来，与 aria-control 类似，但将标签与描述关联。描述标识符间用空格隔开。
-
-### 高级用例：时钟
-
-为了举例说明 `aria-atomic` ，请考虑一个带有简单时钟的站点，其中显示了小时和分钟。时钟每分钟更新一次，而新的剩余时间仅会覆盖当前内容。
+{{EmbedLiveSample('基本示例：下拉框更新屏幕上有用的信息', '', 350)}}
+
+用户选择新的行星时，实时区域中的信息将被宣告。由于实时区域具有 `aria-live="polite"`，屏幕阅读器会等待用户暂停，然后再宣告更新。因此，在列表中向下移动并选择另一个行星不会宣告动态区域中的更新。动态区域中的更新只会针对最终选择的行星进行宣告。
+
+以下是 VoiceOver 在 Mac 上宣告实时区域的更新（通过字幕显示）的屏幕截图：
+
+
+
+## 具有隐式实时区域属性的角色
+
+以下 [`role="…"`](/zh-CN/docs/Web/Accessibility/ARIA/Roles) 值的元素默认表现为实时区域：
+
+<table style="width: 100%;">
+ <thead>
+ <tr>
+ <th scope="col">角色</th>
+ <th scope="col">描述</th>
+ <th scope="col">兼容性说明</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>log</td>
+ <td>聊天、错误、游戏或其他类型的日志</td>
+ <td>为了最大程度的兼容性，在使用此角色时添加冗余的 <code>aria-live="polite"</code>。</td>
+ </tr>
+ <tr>
+ <td>status</td>
+ <td>提供更新状态的状态栏或屏幕区域。屏幕阅读器用户有一个特殊命令来读取当前状态。</td>
+ <td>为了最大程度的兼容性，在使用此角色时添加冗余的 <code>aria-live="polite"</code>。</td>
+ </tr>
+ <tr>
+ <td>alert</td>
+ <td>屏幕闪烁的错误或警告消息。警报对于向客户发出客户端验证通知尤为重要。<a href="https://www.w3.org/WAI/ARIA/apg/example-index/alert/alert.html" class="external" rel=" noopener">警报示例。</a></td>
+ <td>为了最大程度的兼容性，有些人建议在使用此角色时添加冗余的 <code>aria-live="assertive"</code>。然而，在 iOS 上的 VoiceOver 中同时添加 <code>aria-live</code> 和 <code>role="alert"</code> 会导致双重朗读问题。</td>
+ </tr>
+ <tr>
+ <td>progressbar</td>
+ <td>微件和实时区域的混合体。与 <code>aria-valuemin</code>、<code>aria-valuenow</code> 和 <code>aria-valuemax</code> 一起使用。（待定：在此添加更多信息。）</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>marquee</td>
+ <td>滚动的文本，例如股票行情。</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>timer</td>
+ <td>任何类型的计时器或时钟，例如倒计时器或秒表读数。</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+## 附加的实时区域属性
+
+实时区域得到了很好的支持。Paciello Group 在 2014 年发布了[有关实时区域支持状态的信息](https://www.tpgi.com/screen-reader-support-aria-live-regions/)。Paul J. Adam 特别研究了 [`aria-atomic` 和 `aria-relevant` 的支持情况](https://pauljadam.com/demos/aria-atomic-relevant.html)。
+
+1. **`aria-atomic`**：`aria-atomic=BOOLEAN` 用于设置屏幕阅读器是否应始终将实时区域呈现为一个整体，即使只有部分区域发生更改。可能的设置有：`false` 或 `true`。默认设置为 `false`。
+2. [**`aria-relevant`**](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)：`aria-relevant=[LIST_OF_CHANGES]` 用于设置哪些类型的更改对于实时区域是相关的。可能的设置是 `additions`、`removals`、`text`、`all` 中的一个或多个。默认设置为 `additions text`。
+
+### 基本示例：`aria-atomic`
+
+为演示 `aria-atomic`，考虑一个具有简单时钟的网站，显示小时和分钟。每分钟更新时钟，新的剩余时间会覆盖当前内容。
```html
-<div id="clock" role="timer" aria-live="polite"></div>
+<div id="clock" role="timer" aria-live="polite">
+ <span id="clock-hours"></span>
+ <span id="clock-mins"></span>
+</div>
```
```js
-/* basic JavaScript to update the clock */
+/* 更新时钟的基本 JavaScript */
+function updateClock() {
+ const now = new Date();
+ document.getElementById("clock-hours").textContent = now.getHours();
+ document.getElementById("clock-mins").textContent =
+ `0${now.getMinutes()}`.substr(-2);
+}
+
+/* 第一次运行 */
+updateClock();
-setInterval(function () {
- var now = new Date();
- document.getElementById("clock").innerHTML =
- "Time: " + now.getHours() + ":" + ("0" + now.getMinutes()).substr(-2);
-}, 60000);
+/* 每分钟更新 */
+setInterval(updateClock, 60000);
```
-该函数第一次执行时，将播报所添加字符串的全部。在随后的调用中，将仅播报内容与先前内容相比已更改的部分。例如，当时钟从“17:33”更改为“17:34”时，辅助技术工具将仅播报“4”，这对用户不是很有用。
+第一次执行函数时，将会宣告要添加的整个字符串。在后续的调用中，只会宣告与前一内容相比发生了变化的部分内容。例如，当时钟从“17:33”变为“17:34”时，辅助技术将只宣布“34”，这对用户来说不太有用。
-解决此问题的一种方法是，首先清除活动区域的内容，然后注入新内容。但是，有时这可能不可靠，因为这取决于这两个更新的确切时间。
+一个解决方法是首先清除实时区域的所有内容（在本例中，将 `<span id="clock-hours">` 和 `<span id="clock-mins">` 的 `innerHTML` 都设置为空），然后再注入新内容。然而，这种方法有时可能不太可靠，因为它依赖于这两者更新的精确时机。
-`aria-atomic="true"` 确保每次更新实时区域时，全部内容都会被完整播报 (例如 "时间：17:34").
+`aria-atomic="true"` 确保每次更新实时区域时，内容的整体都会被完整宣告（例如“17:34”）。
```html
-<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
+<div id="clock" role="timer" aria-live="polite" aria-atomic="true">…</div>
```
-> **备注：** 正如我们观察到的那样，重新设置/更新 innerHTML 会导致整个文本被重新播报，无论你是否设置 `aria-atomic="true"` ，所以以上的时钟示例并不能像预期那样地工作。
-
-一个简单的年份控件的工作示例，可以帮助你更好地理解：
+`aria-atomic` 的另一个示例——作为用户操作的结果而进行的更新/通知。
```html
<div id="date-input">
- <label
- >Year:
- <input type="text" id="year" value="1990" onblur="change(event)" />
- </label>
+ <label for="year">年份：</label>
+ <input type="text" id="year" value="1990" onblur="change(event)" />
</div>
-<div id="date-output" aria-live="polite">
- The set year is:
- <span id="year-output">1990</span>
+<div id="date-output" aria-atomic="true" aria-live="polite">
+ 设定的年份是：<span id="year-output">1990</span>
</div>
```
```js
function change(event) {
- var yearOut = document.getElementById("year-output");
+ const yearOut = document.getElementById("year-output");
+
switch (event.target.id) {
case "year":
yearOut.innerHTML = event.target.value;
@@ -211,26 +230,26 @@ function change(event) {
}
```
-如果没有 `aria-atomic="true"` ，屏幕阅读器只会播报"年"的数值的改变。
+没有 `aria-atomic="true"`，屏幕阅读器只会宣告年份的更改值。有了 `aria-atomic="true"`，屏幕阅读器会宣告“设定的年份是：_更改值_”。
-如果有 `aria-atomic-="true"` ，屏幕阅读器会播报"设置的年为：_改变的值_"。
+### 基本示例：`aria-relevant`
-### 高级用例：名册
+使用 `aria-relevant`，你可以指定应该宣告哪些类型的实时区域变化/更新。
-一个聊天站点想要显示当前登录用户的列表。列表将动态反映用户的登录和注销状态的用户（无需重新加载页面）。
+举个例子，考虑一个聊天网站，希望显示当前已登录的用户列表。我们不仅想要宣告当前已登录的用户，还希望在用户从列表中被*移除*时触发一条通知。我们可以通过指定 `aria-relevant="additions removals"` 来实现这一点。
```html
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
- <!-- use JavaScript to add remove users here-->
+ <!-- 在此使用 JavaScript 添加和删除用户 -->
</ul>
```
-ARIA 活动属性的细分：
+ARIA 实时区域属性的详细说明：
-- `aria-live="polite"` 指示屏幕阅读器应该等到用户空闲后再播报更新。这是最常用的值，因为用 `“assertive”` 值会打扰用户，打断他们的操作流程。
-- `aria-atomic` 没有设置 (默认为 `false` ) ，这样就只能说出添加或删除的用户，而不是整个名单。
-- `aria-relevant="additions removals"` 确保在在线名册中添加用户与移除用户的时候都会被播报。
+- `aria-live="polite"` 表示屏幕阅读器应该在用户空闲时才呈现更新给用户。这是最常用的值，因为使用“assertive”可能会打断用户的流程。
+- `aria-atomic` 没有设置（默认为 `false`），因此每次只有添加或删除的用户应该被宣告，而不是每次都宣告整个名单。
+- `aria-relevant="additions removals"` 确保新增或从名单中删除的用户都会被宣告。
-## 参考
+## 参见
- [ARIA 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles)
diff --git a/files/zh-cn/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md b/files/zh-cn/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md
new file mode 100644
index 00000000000000..4f1ecdf1c7e7fa
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/aria_screen_reader_implementors_guide/index.md
@@ -0,0 +1,28 @@
+---
+title: ARIA 屏幕阅读器实现指南
+slug: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+## 实时区域
+
+这只是一个指南。实时区域标记是一个相对开放于解释的复杂领域。以下旨在提供实现指导，以尊重屏幕阅读器开发者尝试不同方法的需求。其目的是在提供有关如何使用标记的预期含义的有用指导的同时，支持实时区域作为屏幕阅读器创新和竞争的领域之间达成平衡。
+
+### 解释 WAI-ARIA 实时区域标记
+
+1. 实时更改是提示：一般情况下，实时区域标记是由作者提供的提示，辅助技术可以允许全局、站点甚至区域特定的设置，以及启发式方法来帮助处理没有 WAI-ARIA 提示的页面上的实时更改。
+2. 可选择地，如果用户配置了第二个硬件通道，则创建第二个额外的队列：如果有两个用于呈现的通道（例如文本到语音和点字显示），则可以维护两个队列以实现并行呈现。通道可以根据角色或礼貌度进行用户配置，用于呈现实时区域。
+3. 忙碌区域：在带有 aria-busy="true" 标记的区域中的任何更改都不应在清除该属性之前添加到队列中。
+4. 礼貌度（`aria-live` 或来源于[角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles)）优先级最高：根据 aria-live 属性或从角色继承的礼貌度级别将项目添加到队列中（例如，[role="log"](/zh-CN/docs/Web/Accessibility/ARIA/Roles/log_role) 默认为礼貌）。断言项目优先于礼貌度级别。另外，实现可能选择清除更礼貌的项目，例如，断言项目会清除队列中的任何礼貌项目。
+5. 时间次之：根据事件发生的时间顺序（较早的事件优先），对具有相同礼貌度级别的项目进行排序。按照最先出现的顺序排列相同礼貌等级的项目。
+6. 具有多个更改的原子（`aria-atomic="true"`）区域不应重复呈现相同的内容。当一个原子区域的新事件被添加到队列中时，就会移除同一区域的早期事件。可能希望在呈现原子区域更改之前至少有一个微小的超时，以避免在彼此之后快速发生的两个更改中两次呈现该区域。
+7. 在呈现更改时包括标签：如果更改发生在具有某种语义标签的内容中，请朗读标签。这对于数据单元格中的更改尤其重要，其中列和行标题提供了重要的上下文信息。
+
+### 设置和启发式方法的想法
+
+1. 允许使用不同的语音（在文本到语音中）或其他不同的呈现特征来区分实时更改。
+2. 当没有 WAI-ARIA 标记时，除非用户将所有实时更改配置为关闭，否则自动呈现一些更改。例如，在用户自己的输入的上下文中自动朗读由用户输入引起的更改。
+3. 允许进行全局设置，以关闭显示实时更改、显示所有实时更改、使用标记或使用“智能模式”（使用启发式方法）。
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-activedescendant/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-activedescendant/index.md
new file mode 100644
index 00000000000000..412f2f20481614
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-activedescendant/index.md
@@ -0,0 +1,49 @@
+---
+title: aria-activedescendant
+slug: Web/Accessibility/ARIA/Attributes/aria-activedescendant
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+`aria-activedescendant` 属性用于标识焦点位于 [`composite`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/composite_role) 微件、[`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role)、[`textbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role)、[`group`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role)或 [`application`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/application_role) 上时当前活动的元素。
+
+## 描述
+
+`aria-activedescendant` 属性为辅助技术提供了一种在交互元素包含多个可聚焦后代时（例如菜单、网格和工具栏），进行焦点管理的方法。与屏幕阅读器在拥有的元素之间移动焦点不同，`aria-activedescendant` 可以在容器元素上使用，引用当前活动的元素，用于在聚焦时向辅助技术用户指示当前活动的元素。
+
+使用 `aria-activedescendant`，浏览器会将 DOM 焦点保持在容器元素或控制容器元素的输入元素上。但是，用户代理将桌面聚焦事件和状态发送给辅助技术，就好像 `aria-activedescendant` 引用的元素具有焦点一样。
+
+此属性仅适用于具有 [`composite`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/composite_role) 微件、[`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role)、[`textbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role)、[`group`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role) 或 [`application`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/application_role) 角色的元素，其 `id` 被引用为属性值。
+
+该属性用于为辅助技术提供有关焦点位于哪个元素的信息，但实际上不会创建焦点。使用 JavaScript 来更改焦点并管理属性值。除了管理该属性值之外，确保当前活动的后代在聚焦时可见并在视野内（或滚动到视野内）。
+
+在具有 DOM 焦点的元素上设置 `aria-activedescendant` 的值时，确保该值引用所拥有的元素——即 DOM 焦点元素的后代或由 [`aria-owns`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-owns) 属性指示的逻辑后代。
+
+当具有 DOM 焦点的元素是组合框、文本框或搜索框时，请包括 [`aria-controls`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-controls) 以引用支持 `aria-activedescendant` 的元素。
+
+`aria-activedescendant` 的值引用受控元素所拥有的元素。例如，在组合框中，焦点可能仍然位于组合框上，但组合框元素上的 `aria-activedescendant` 的值引用由组合框控制的弹出列表框的后代。
+
+> **备注：** 该属性仅支持少数角色。例如，`dialog` 不支持 `aria-activedescendant`。当组合框打开对话框时，DOM 焦点从组合框移动到对话框，因为它不能通过此属性进行引用。
+
+> **备注：** 当焦点位于 `listbox`、`grid` 或 `tree` 弹出窗口的后代时，DOM 焦点保持在组合框上，并且组合框的 `aria-activedescendant` 设置为引用弹出窗口内的焦点元素的值。
+
+## 值
+
+- ID 引用
+ - : 其值为当前具有焦点元素的 `id`。
+
+## 关联角色
+
+仅适用于具有以下角色的元素的属性：
+
+- [`application`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/application_role)
+- [`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role)
+- [`composite`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/composite_role)
+- [`group`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role)
+- [`textbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role)
+
+## 规范
+
+{{Specifications}}
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-atomic/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-atomic/index.md
new file mode 100644
index 00000000000000..53986e928e8e17
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-atomic/index.md
@@ -0,0 +1,37 @@
+---
+title: aria-atomic
+slug: Web/Accessibility/ARIA/Attributes/aria-atomic
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+在 ARIA 实时区域中，`aria-atomic` 全局属性指示辅助技术（如屏幕阅读器）是否基于由 [`aria-relevant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性定义的更改通知，呈现所有或仅部分更改区域。
+
+## 描述
+
+实时区域是网页的部分，在用户焦点在其他地方时更新，无论是通过用户交互还是其他方式。由于它们在用户焦点之外更新，因此辅助技术（如屏幕阅读器）可能无法“看到”更新并将其报告给用户。WAI-ARIA 有 4 个属性，允许开发人员识别这些实时区域并告诉辅助技术如何处理它们，包括 [`aria-live`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-live)、[`aria-relevant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)、[`aria-busy`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-busy) 和 `aria-atomic`。
+
+当实时区域的内容发生更改时，DOM 从更改的元素经过其祖先以找到首个设置了 `aria-atomic` 的元素。这确定了应该向用户呈现的内容。
+
+如果没有祖先明确设置了 `aria-atomic`，则仅读取已更新的实时区域内容的节点或节点。省略 `aria-atomic` 和显式设置 ARIA 实时区域的祖先节点的差异在于，显式设置 `aria-atomic="false"` 会阻止屏幕阅读器上溯祖先链。两者都导致仅读取更新的节点。当设置为 `aria-atomic="true"` 时，将呈现整个更改的区域，包括更新的节点的 `label`（如果存在）。
+
+## 值
+
+- `false`（默认）
+ - : 仅呈现更改的节点或节点。
+- `true`
+ - : 呈现整个更改的区域，包括作者定义的标签（如果存在）。
+
+## 关联角色
+
+适用于**所有**[角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles)。
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- [Event.ariaAtomic](/zh-CN/docs/Web/API/Element/ariaAtomic)
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-autocomplete/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-autocomplete/index.md
new file mode 100644
index 00000000000000..9afecc005629d2
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-autocomplete/index.md
@@ -0,0 +1,67 @@
+---
+title: aria-autocomplete
+slug: Web/Accessibility/ARIA/Attributes/aria-autocomplete
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+`aria-autocomplete` 属性指示对于 [`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role)、[`searchbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/searchbox_role) 或 [`textbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role)，输入文本是否可能触发显示用户预期值的一个或多个预测，并指定如果进行预测，预测将如何呈现。
+
+## 描述
+
+自动填充是一种用户界面特性，当用户在输入时，会动态地提供内联建议。建议的文本用于完成字段的数值，在输入光标后动态出现在字段中，如果用户执行导致焦点离开该字段的操作（如按 Tab 键），建议的数值将成为字段的值。
+
+`aria-autocomplete` 属性描述了文本框、搜索框或组合框在动态帮助用户完成文本输入时将使用的自动填充交互模型的类型。它区分了两种模型：**内联**模型（`aria-autocomplete="inline"`），它呈现单个预测值；**列表**模型（`aria-autocomplete="list"`），它在与文本输入相邻的位置或下方显示可能的值的集合，类似于 {{HTMLElement('datalist')}}。第三个值，`aria-autocomplete="both"` 表示接口将同时呈现列表并包含预测值。默认值是 `none`，表示文本框、搜索框或组合框不提供自动填充值。
+
+`aria-autocomplete` 属性仅描述了输入元素的预测行为类型，而不提供功能。实际的自动填充应该使用 HTML 属性或 JavaScript 提供。
+
+如果建议的自动填充值提供的建议值不依赖于用户提供的输入，则考虑为所有人省略自动填充。例如，搜索框输入显示未过滤的最近搜索术语可能对电子商务网站上的营销团队有所帮助，但对于屏幕阅读器用户可能没有帮助。最好不指定 `aria-autocomplete` 的值或将值设置为 `none` 默认时，因为非辅助技术用户可能也不需要该体验。
+
+在实现自动填充功能时，确保建议部分值以选定文本的形式呈现，以便区分用户的输入和建议。确保当建议的值不是所需值时，用户可以轻松地删除建议或继续输入以替换它。
+
+在实现值列表时，当显示建议列表时，DOM 焦点应保留在文本输入上。
+
+- 包括具有建议值 id 的值的 [`aria-controls`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-controls)。
+- 包括与包含建议值集合的元素的角色匹配的 [`aria-haspopup`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)。
+- 管理焦点，如果需要，包括使用 [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant)，如果集合容器支持。
+- 使用具有 [`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role) 角色的元素上的 [`aria-expanded`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 状态来传达列表是否显示。
+
+如果在字段失去焦点时自动接受自动填充列表值，则列表必须包含在支持 `aria-activedescendant` 的角色中，输入字段上的 `aria-activedescendant` 值动态调整为引用包含选定建议的元素。
+
+## 值
+
+- `none`（默认）
+ - : 当用户提供输入时，不显示自动建议。
+- `inline`
+ - : `aria-autocomplete="inline"` 文本提供一种完成提供的输入的方式的建议文本可能会动态插入到插入符后。
+- `list`
+ - : `aria-autocomplete="list"` 当用户提供输入时，可能会显示包含可能完成提供的输入的值集合的元素。
+- both
+ - : `aria-autocomplete="both"` 输入同时提供两种模型。当用户提供输入时，可能会显示包含可能完成提供的输入的值集合的元素。如果显示，则集合中的一个值将自动选定，并且完成自动选定值所需的文本将显示在输入的插入符后。
+
+## 关联角色
+
+在以下角色中使用：
+
+- [`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role) 角色
+- [`textbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role) 角色
+- 继承自 [`searchbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/searchbox_role) 角色
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- [`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role) 角色
+- [`textbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role) 角色
+- [`searchbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/searchbox_role) 角色
+- {{HTMLElement('datalist')}} 元素和 [`<input> list` 属性](/zh-CN/docs/Web/HTML/Element/input#list)
+- [`aria-controls`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-controls) 属性
+- [`aria-haspopup`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性
+- [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) 属性
+- [`aria-expanded`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性
+- [带有内联和列表自动填充的可编辑组合框示例](https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-both.html)
+- [Event.ariaAutoComplete](/zh-CN/docs/Web/API/Element/ariaAutoComplete)
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-braillelabel/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-braillelabel/index.md
new file mode 100644
index 00000000000000..e8a63bbc2b7446
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-braillelabel/index.md
@@ -0,0 +1,55 @@
+---
+title: aria-braillelabel
+slug: Web/Accessibility/ARIA/Attributes/aria-braillelabel
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+全局 `aria-braillelabel` 属性定义了一个用于标记当前元素的字符串值，该字符串值旨在转换为盲文。
+
+## 描述
+
+全局 `aria-braillelabel` 属性类似于全局 [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label)，它定义了一个用于标记当前元素的字符串值。`aria-label` 用于被屏幕阅读器读取，而 `aria-braillelabel` 属性的内容被用于转换为盲文；为用户提供对象的可识别名称的盲文形式。
+
+`aria-braillelabel` 属性的目的是覆盖辅助技术如何在盲文中本地化和表达元素的无障碍名称。只有在没有此属性而无障碍名称在转换为盲文时无法达到用户预期的体验时，才应使用它。
+
+在使用 `aria-braillelabel` 时，请确保：
+
+- 应用 `aria-braillelabel` 的元素具有有效的无障碍名称。
+- `aria-braillelabel` 的值具有实际内容，不是空的或仅包含空格的 Unicode 或 Unicode 盲文。
+- 值与无障碍名称不同。
+- `aria-braillelabel` 值被本地化以与文档语言对齐。
+- 向用户说明此属性可用，特别是如果内容包含 Unicode 盲文模式，以便用户知道设置以应用用户特定的盲文翻译
+
+> **备注：** 支持盲文的辅助技术可以将无障碍名称转换为盲文。因此，仅当无障碍名称不是你想要的用户体验时才使用 `aria-braillelabel`。
+
+仅使用无障碍名称，例如从内容或通过 `aria-label` 获取，几乎总是更好的用户体验，因此不要使用 aria-braillelabel 来复制 aria-label。只有在无障碍名称无法提供足够的盲文表示时才使用 `aria-braillelabel`。
+
+```html
+<button aria-braillelabel="***">
+ <img alt="3 out of 5 stars" src="three_stars.png" />
+</button>
+```
+
+盲文显示器可能会显示“btn \*\*\*”的盲文，而不是更详细的“btn gra 3 out of 5 stars”。
+
+## 值
+
+- `<string>`
+ - : 值是一个字符串，一个无约束的值类型，旨在转换为盲文。
+
+## 关联角色
+
+适用于**所有**角色。
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- {{domxref("Element.ariaBrailleLabel")}}
+- [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+- [`aria-brailleroledescription`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-brailleroledescription)
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-brailleroledescription/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-brailleroledescription/index.md
new file mode 100644
index 00000000000000..6024c0c39f6917
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-brailleroledescription/index.md
@@ -0,0 +1,74 @@
+---
+title: aria-brailleroledescription
+slug: Web/Accessibility/ARIA/Attributes/aria-brailleroledescription
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+全局 `aria-brailleroledescription` 属性定义了一个人类可读的、作者本地化的缩写描述，用于指定一个元素的角色，旨在转换为盲文。
+
+## 描述
+
+盲文不是字母和数字的一对一转译，而是包括各种缩写、缩略词和代表单词的字符（称为词符）。
+
+`aria-brailleroledescription` 属性允许提供 [`aria-roledescription`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 值的缩写版本，这是一个人类可读的、作者本地化的元素角色描述，用于改进盲文界面的用户体验，而不是将长角色描述转换为盲文。
+
+基本上，`aria-brailleroledescription` 的值是 `aria-roledescription` 属性的缩写版本，用于转换为盲文。
+
+```html
+<article
+ aria-roledescription="slide"
+ aria-brailleroledescription="sld"
+ aria-labelledby="slide1heading">
+ <h1 id="slide1heading">Welcome to my talk</h1>
+ <img alt="Me" src="images/me.jpg" />
+</article>
+```
+
+大多数辅助技术，如屏幕阅读器，将以上内容读作“slide, welcome to my talk. Image, Me.”。盲文辅助技术将在盲文中呈现“sld welcome to my talk gra me”。语义 {{HTMLElement('article')}} 通过 `aria-roledescription` 属性被赋予“slide”角色；“slide”是规范中未定义的角色，但是是演示文稿中幻灯片的常见角色。在盲文中，角色呈现为“sld”。“gra”是“graphic”的简称，在盲文中表示“image”角色的缩写。
+
+`aria-brailleroledescription` 属性应仅用于澄清非交互式容器角色（如“group”或“region”）的目的，或者在盲文环境中提供微件的更具体描述。
+
+由于 `aria-brailleroledescription` 属性覆盖了辅助技术如何在盲文中本地化和表达角色的名称，不合适的值将阻止用户在盲文界面上理解和与元素交互。
+
+只有当存在 [`aria-roledescription`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 时才使用 `aria-brailleroledescription`。然而，如果 `aria-roledescription` 值在盲文中有效，则不需要该属性的盲文版本。通常情况下，只有在 `aria-roledescription` 对盲文太冗长时才使用 `aria-brailleroledescription`。
+
+一些需要记住的规则：
+
+- 只将 `aria-brailleroledescription` 应用于具有有效 ARIA 角色或具有隐式角色语义的元素。
+- 如果存在 `aria-brailleroledescription`，则其值必须为非空、非 null 的值，并且与 `aria-roledescription` 值不同，后者又与 ARIA 显式角色或隐式语义角色不同。
+- 避免使用 Unicode 盲文模式。如果必须使用，请确保 `aria-brailleroledescription` 值包含除 Unicode 盲文模式、空白字符和盲文模式点 0 之外的内容。
+- 确保该值始终针对文档的语言进行本地化。
+
+> **警告：** 如果内容仅为 Unicode 盲文模式，则该值将不会根据用户的首选翻译表进行翻译。
+
+> **备注：** 不要使用 `aria-brailleroledescription` 复制 `aria-roledescription`。只有当 `aria-roledescription` 无法提供足够的盲文表示时才包含此属性。
+
+如果 `aria-brailleroledescription` 的值满足以下情况，将不会向盲文用户显示：
+
+- 值为空，或仅包含空白字符或空的盲文模式：点 0（U+2800）。
+- 应用了属性的元素具有禁止使用 `aria-brailleroledescription` 的显式或隐式 WAI-ARIA 角色，包括 `generic` 角色。
+- 应用了属性的元素没有有效的 `aria-roledescription`。
+
+> **备注：** 请使用辅助技术的日常用户进行网站和应用程序测试，包括盲文读者，以确保你的内容在盲文中有意义。
+
+## 值
+
+- `<string>`
+ - : 该值是一个字符串，一个无约束的值类型，旨在转换为盲文
+
+## 关联角色
+
+适用于**所有**角色（除了 [`generic`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/generic_role)）。
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- {{domxref("Element.ariaBrailleRoleDescription")}}
+- [`aria-roledescription`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription).
+- [`Element.ariaRoleDescription`](/zh-CN/docs/Web/API/Element/ariaRoleDescription)
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-busy/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-busy/index.md
new file mode 100644
index 00000000000000..346f5043671e1f
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-busy/index.md
@@ -0,0 +1,75 @@
+---
+title: aria-busy
+slug: Web/Accessibility/ARIA/Attributes/aria-busy
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+在 [ARIA 实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)中，全局的 `aria-busy` 状态指示元素正在被修改，并且辅助技术可能希望等到更改完成后再通知用户更新情况。
+
+当实时区域的多个部分需要加载完成后才向用户通知变更时，设置 `aria-busy="true"` 直到加载完成为止。然后将其设置为 `aria-busy="false"`。这可以防止辅助技术在更新完成之前向用户通知变更。
+
+## 描述
+
+有一部分内容在更新。更新是重要的，并且你希望在其被修改后通知用户，因此你已将其转换为具有 [`aria-live`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-live) 属性的 [ARIA 实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)。你可能希望同时更新该部分的几个组件，但是你无法确定所有内容是否会同时更新。即使它是一个非常重要的实时区域，具有 `aria-live="assertive"`，你也不希望在内容的不同部分加载时多次打断用户。这就是 `aria-busy` 可以提供帮助的地方。
+
+`aria-busy` 属性是实时区域的可选属性，可以具有值 `true` 或 `false`。具有值 `true` 的 `aria-busy` 属性可以添加到当前正在更新或修改的元素中，以通知辅助技术在更改或修改完成之前应等待，然后再向用户公开内容。在下载完成后，使用对象的 [`ariaBusy`](/zh-CN/docs/Web/API/Element/ariaBusy) 属性将值更改为 `false`。
+
+```js
+ariaLiveElement.ariaBusy = "false";
+```
+
+[`aria-live`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-live) 的值决定在将值更改为 `false` 时是否立即宣布更改，或者辅助技术在当前任务完成之前是否等待打断用户。
+
+### 在 `feed` 内部
+
+如果具有 [`feed`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/feed_role) 角色的元素的 `aria-busy` 被设置为 `true`，则消息来源（feed）内部发生的渲染更改不会被宣告，除非是用户发起的更改。
+
+### 在 `widget` 内部
+
+如果对渲染的微件进行更改会导致微件在脚本执行期间缺少必须拥有的元素，请在更新过程中将 `aria-busy` 设置为 `true`。例如，如果渲染的树网格更新了不一定同时渲染的多个分支，那么替换单个更新中的整个树的替代方法是在修改每个分支时标记树为繁忙状态。
+
+## 值
+
+- false（默认值）：
+ - : 元素没有预期的更新。
+- true
+ - : 元素正在更新。
+
+## 关联接口
+
+- {{domxref("Element.ariaBusy")}}
+ - : 每个元素接口的 [`ariaBusy`](/zh-CN/docs/Web/API/Element/ariaBusy) 属性反映了 `aria-busy` 属性的值，该属性指示元素是否正在修改。
+
+```html
+<div
+ id="clock"
+ role="timer"
+ aria-live="polite"
+ aria-atomic="true"
+ aria-busy="false"></div>
+```
+
+```js
+const el = document.getElementById("clock");
+console.log(el.ariaBusy); // false
+el.ariaBusy = "true";
+console.log(el.ariaBusy); // true
+```
+
+## 关联角色
+
+适用于**所有**角色
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- [ARIA 实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
+- [`aria-live`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-live)
+- [`aria-relevant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)
+- [`aria-atomic`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-atomic)
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-checked/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-checked/index.md
new file mode 100644
index 00000000000000..5d72a436a73885
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-checked/index.md
@@ -0,0 +1,85 @@
+---
+title: aria-checked
+slug: Web/Accessibility/ARIA/Attributes/aria-checked
+l10n:
+ sourceCommit: 3810b129d05f1076d271c4498cbecdec30ad1d39
+---
+
+{{AccessibilitySidebar}}
+
+`aria-checked` 属性指示复选框、单选按钮和其他小部件的当前“已选中”状态。
+
+> **备注：** 在可能的情况下，请使用带有 `type="checkbox"` 和 `type="radio"` 的 HTML {{htmlelement("input")}} 元素，因为它们具有内置语义，并且不需要 ARIA 属性。
+
+## 描述
+
+`aria-checked` 属性指示元素是否被选中（`true`）、未选中（`false`）或者选中状态不确定（`mixed`），表示它既未被选中也未取消选中。`mixed` 值受到 [`checkbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role) 和 [`menuitemcheckbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role) 的三态输入角色支持。
+
+`mixed` 值不受 [`radio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/radio_role)、[`menuitemradio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role) 或 [`switch`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/switch_role) 以及继承自这些角色的元素支持。如果不支持 `mixed`，则值将为 false。
+
+```html
+<span
+ role="checkbox"
+ id="checkBoxInput"
+ aria-checked="false"
+ tabindex="0"
+ aria-labelledby="chk15-label"></span>
+<label id="chk15-label">订阅时事通讯</label>
+```
+
+`tabindex` 属性是为了启用焦点。需要 JavaScript 切换 `aria-checked` 状态。如果此复选框是可提交表单的一部分，则需要更多 JavaScript 来设置名称和值。
+
+以上代码也可以写为：
+
+```html
+<input type="checkbox" id="chk15-label" name="Subscribe" />
+<label for="chk15-label">订阅时事通讯</label>
+```
+
+通过使用具有 `type="checkbox"` 的 {{htmlelement("input")}} 元素而不是 ARIA，无需任何 JavaScript。
+
+## 值
+
+- false
+ - : 元素支持被选中，但当前未被选中。
+- true
+ - : 元素被选中。
+- mixed
+ - : 仅适用于 [`checkbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role) 和 [`menuitemcheckbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role)，相当于 `indeterminate`，表示既不选中也不取消选中的混合模式值。
+- undefined（默认）
+ - : 元素不支持被选中。
+
+## 关联角色
+
+适用于以下角色：
+
+- [`checkbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role)
+- [`menuitemcheckbox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role)
+- [`menuitemradio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role)
+- [`option`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role)
+- [`radio`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/radio_role)
+- [`switch`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/switch_role)
+
+## 关联接口
+
+- {{domxref("Element.ariaChecked")}}
+ - : {{domxref("Element")}} 接口的 [`ariaChecked`](/zh-CN/docs/Web/API/Element/ariaChecked) 属性反映了 `aria-checked` 属性的值。
+- {{domxref("ElementInternals.ariaChecked")}}
+ - : {{domxref("ElementInternals")}} 接口的 [`ariaChecked`](/zh-CN/docs/Web/API/Element/ariaChecked) 属性反映了 `aria-checked` 属性的值。
+
+```js
+myHTMLElement.ariaChecked = true;
+```
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- [`<input type="checkbox">`](/zh-CN/docs/Web/HTML/Element/input/checkbox)
+- [`<input type="radio">`](/zh-CN/docs/Web/HTML/Element/input/radio)
+- [`aria-pressed`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
+- [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+- [双态复选框示例](https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html)—w3.org
+- [混合状态复选框示例](https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox-mixed.html)—w3.org
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md
new file mode 100644
index 00000000000000..138e04405931b3
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colcount/index.md
@@ -0,0 +1,90 @@
+---
+title: aria-colcount
+slug: Web/Accessibility/ARIA/Attributes/aria-colcount
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+`aria-colcount` 属性定义了当所有列都不在 [DOM](/zh-CN/docs/Glossary/DOM) 中时，在 [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中的列总数。
+
+## 描述
+
+一些表格非常庞大，不可能向用户展示所有列。或者，虽然可能，但是拥有如此宽的表格将会给用户带来糟糕的用户体验。使用 `aria-colcount` 属性让辅助技术知道如果所有列都存在的话，表格会有多少列。该值是一个整数，表示组成完整表格的列数。如果你不知道表格将具有的总列数，但知道它们不会全部存在于 DOM 中，则使用值 -1，因此 `aria-colcount="-1"`。该值告诉用户代理，当前存在于 DOM 中的列数可能不是表格中的实际列数。
+
+如果表格中的所有列都存在于 DOM 中，则不需要 `aria-colcount` 属性，因为浏览器会自动计算列的总数。但是，如果在给定时刻只有一部分列存在于 DOM 中，那么这个属性就很有用并且是必需的。
+
+当使用 `aria-colcount` 时，如果你知道列的数量，请确保还使用 [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 为每列标记，或者如果列是连续的，即它们是原始顺序中没有中断的一组列，则为每行标记。
+
+以下示例显示了一个网格，具有 6 列，其中列 1、2、5 和 6 显示给用户。将表格本身设置为 `aria-colcount="6"`，表示组成表格的列的总数。由于列不是连续的，因此在本例中每个[单元格](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role)的 [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 和 [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role) 元素都设置了 `aria-colindex` 属性。
+
+```html
+<div role="grid" aria-colcount="6">
+ <div role="rowgroup">
+ <div role="row">
+ <div role="columnheader" aria-colindex="1">名字</div>
+ <div role="columnheader" aria-colindex="2">姓氏</div>
+ <div role="columnheader" aria-colindex="5">城市</div>
+ <div role="columnheader" aria-colindex="6">邮编</div>
+ </div>
+ </div>
+ <div role="rowgroup">
+ <div role="row">
+ <div role="gridcell" aria-colindex="1">Debra</div>
+ <div role="gridcell" aria-colindex="2">Burks</div>
+ <div role="gridcell" aria-colindex="5">New York</div>
+ <div role="gridcell" aria-colindex="6">14127</div>
+ </div>
+ </div>
+ …
+</div>
+```
+
+ARIA 使用的第一条规则是：“如果你可以使用具有你所需语义和行为的本地功能，而不是重新用一个元素并**添加**一个 ARIA 角色、状态或属性来使其无障碍，那么请这样做。”如果我们使用具有语义化的 HTML 元素，如 {{HTMLElement('table')}} 、{{HTMLElement('th')}} 、{{HTMLElement('td')}} 等，那么 `aria-colcount` 属性仍然是必需的，但标记不会那么冗长。当使用语义化的表头元素且并非所有列都在 DOM 中时，仍然需要使用 `aria-colcount`，但只需要在每列的列头 {{HTMLElement('th')}} 中定义一次 `aria-colindex` 属性。
+
+```html
+<table aria-colcount="6">
+ <thead>
+ <tr>
+ <th aria-colindex="1" scope="col">名字</th>
+ <th aria-colindex="2" scope="col">姓氏</th>
+ <th aria-colindex="5" scope="col">城市</th>
+ <th aria-colindex="6" scope="col">邮编</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Debra</td>
+ <td>Burks</td>
+ <td>纽约</td>
+ <td>14127</td>
+ </tr>
+ …
+ </tbody>
+</table>
+```
+
+## 值
+
+- `<integer>`
+ - : 完整表格中的列数
+
+## 关联角色
+
+适用于以下角色：
+
+- [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)
+
+继承到以下角色：
+
+- [`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role)
+- [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role)
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex)
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colindex/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colindex/index.md
new file mode 100644
index 00000000000000..b9c646330f5232
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colindex/index.md
@@ -0,0 +1,116 @@
+---
+title: aria-colindex
+slug: Web/Accessibility/ARIA/Attributes/aria-colindex
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+`aria-colindex` 属性定义了元素相对于 `table`、`grid` 或 `treegrid` 中总列数的列索引或位置。
+
+## 描述
+
+某些表格非常大，因此最初只显示了部分内容。虽然在加载过程中仅显示一部分列可能会改善用户体验，但你需要让所有用户知道显示了哪部分的内容，并且并未所有表格内容都存在。
+
+ARIA 提供了几个属性来提供关于 `table`、`grid` 和 `treegrid` 结构的信息。`aria-colindex` 属性定义了在这些结构中的子结构中，元素相对于总列数的列索引或位置。
+
+与 [`aria-colcount`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性一起使用，后者告知辅助技术如果所有列都存在，则表格将拥有多少列，`aria-colindex` 用于表示元素相对于该总列数的列索引或位置。
+
+如果所有列都在 DOM 中，则不需要包括 `aria-colindex`，因为用户代理可以计算每个单元格或网格单元的列索引。然而，如果在任何时候将任何列留在 DOM 之外，则使用 `aria-colindex` 来指示每个单元格或网格单元相对于完整表格的列。
+
+`aria-colindex` 的值是大于等于 1 的整数。每个值应大于前一列的 `aria-colindex`，并且小于或等于完整表格中的列数。
+
+如果单元格或网格单元跨越多列，则设置 [`aria-colspan`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 为其跨越的列数（如果未使用 {{htmlelement('td')}} 和 {{htmlelement('th')}} HTML 元素），并将 `aria-colindex` 设置为跨越范围的开始值；如果它跨越的列宽仅为一，则它将只跨越其列中的第一个。
+
+如果 DOM 中存在的列集是连续的，并且在该集中没有跨越多行或多列的单元格，则只需在每行的第一列中一次放置 `aria-colindex`。如果列不连续，则在每行的所有子元素或拥有的元素上包含 `aria-colindex` 值。
+
+下面的示例显示了一个网格，其中有 6 列，其中列 1、2、5 和 6 显示给用户。表格本身的总列数设置为 `aria-colcount="6"`。由于列不是连续的，因此每个[单元格](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role)（在本例中为 [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 和 [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role) 元素）都设置了 `aria-colindex` 属性。
+
+```html
+<div role="grid" aria-colcount="6">
+ <div role="rowgroup">
+ <div role="row">
+ <div role="columnheader" aria-colindex="1">名字</div>
+ <div role="columnheader" aria-colindex="2">姓氏</div>
+ <div role="columnheader" aria-colindex="5">城市</div>
+ <div role="columnheader" aria-colindex="6">邮编</div>
+ </div>
+ </div>
+ <div role="rowgroup">
+ <div role="row">
+ <div role="gridcell" aria-colindex="1">德布拉</div>
+ <div role="gridcell" aria-colindex="2">伯克斯</div>
+ <div role="gridcell" aria-colindex="5">纽约</div>
+ <div role="gridcell" aria-colindex="6">14127</div>
+ </div>
+ </div>
+ …
+</div>
+```
+
+ARIA 使用的第一条规则是：“如果你可以使用具有你所需语义和行为的原生特性，而不是重新用一个元素并**添加**一个 ARIA 角色、状态或属性来使其无障碍，那么请这样做。”如果我们使用具有语义化的 HTML 元素，如 {{HTMLElement('table')}}、{{HTMLElement('th')}}、{{HTMLElement('td')}} 等，那么 `aria-colcount` 属性仍然是必需的，但标记不会那么冗长。
+
+当使用语义化的表头元素且并非所有列都在 DOM 中时，仍然需要使用 `aria-colcount`，但只需要在每列的列头 {{HTMLElement('th')}} 中定义一次 `aria-colindex` 属性。
+
+```html
+<table aria-colcount="6">
+ <thead>
+ <tr>
+ <th aria-colindex="1" scope="col">名字</th>
+ <th aria-colindex="2" scope="col">姓氏</th>
+ <th aria-colindex="5" scope="col">城市</th>
+ <th aria-colindex="6" scope="col">邮编</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>德布拉</td>
+ <td>伯克斯</td>
+ <td>纽约</td>
+ <td>14127</td>
+ </tr>
+ …
+ </tbody>
+</table>
+```
+
+如果所有列都在 DOM 中，则 `aria-colcount` 和 `aria-colindex` 都不是必需的。
+
+## 值
+
+- `<integer>`
+ - : 大于等于 1 且小于等于如果所有列都存在时的总列数。
+
+## 关联接口
+
+- {{domxref("Element.ariaColIndex")}}
+ - : [`ariaColIndex`](/zh-CN/docs/Web/API/Element/ariaColIndex) 属性（属于 {{domxref("Element")}} 接口）反映了 `aria-colindex` 属性的值。
+- {{domxref("ElementInternals.ariaColIndex")}}
+ - : [`ariaColIndex`](/zh-CN/docs/Web/API/ElementInternals/ariaColIndex) 属性（属于 {{domxref("ElementInternals")}} 接口）反映了 `aria-colindex` 属性的值。
+
+## 关联角色
+
+用于角色：
+
+- [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role)
+- [`row`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/row_role)
+
+继承到角色：
+
+- [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role)
+- [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role)
+- [`rowheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/rowheader_role)
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- [`aria-colindextext`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) 属性
+- [`aria-colcount`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性
+- [`aria-colspan`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 属性
+- HTML {{HTMLElement('table')}} 元素
+- HTML {{HTMLElement('th')}} 元素
+- HTML {{HTMLElement('td')}} 元素
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colindextext/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colindextext/index.md
new file mode 100644
index 00000000000000..78b6fd2d85a45b
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colindextext/index.md
@@ -0,0 +1,100 @@
+---
+title: aria-colindextext
+slug: Web/Accessibility/ARIA/Attributes/aria-colindextext
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+`aria-colindextext` 属性定义了数字 [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 的可读文本替代。
+
+## 描述
+
+当你有一个非常大的表格，或者当你有意地只想显示表格的一部分时，可能不是所有的列都会出现在 DOM 中。当出现这种情况时，我们使用具有整数值的 [`aria-colcount`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 来定义表格（或网格）在所有列都存在时会有多少列，并在每一列上添加 [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性，以提供有关该较大表格中列索引的信息。
+
+在下面的 HTML 片段中，我们的表格有 8 列，但我们只显示了 4 列。“城市”列是我们较大表格的第五列，由 `aria-colindex="5"` 定义。
+
+```html
+<table aria-colcount="8">
+ <thead>
+ <tr>
+ <th aria-colindex="1" scope="col">名字</th>
+ <th aria-colindex="2" scope="col">姓氏</th>
+ <th aria-colindex="5" scope="col">城市</th>
+ <th aria-colindex="7" scope="col">邮编</th>
+ </tr>
+ </thead>
+ …
+</table>
+```
+
+这个表格并不是很复杂。如果这是一个拥有 100 多列的电子表格，或者是一个没有列标题的网格，比如象棋棋盘，那么 `aria-colindex` 的提供或计算出的值可能不具有意义，或者可能不反映出显示的索引。在这种情况下，可以包含 `aria-colindextext`。该值是一个字符串，是数字 `aria-colindex` 的可读文本替代。
+
+```html
+<table aria-colcount="128">
+ <thead>
+ <tr>
+ <th
+ aria-colindex="1"
+ aria-colindextext="纽约证券交易所股票代码"
+ scope="col">
+ NYSE
+ </th>
+ <th aria-colindex="110" aria-colindextext="2021 年初值" scope="col">
+ 01/21
+ </th>
+ <th aria-colindex="122" aria-colindextext="2022 年初值" scope="col">
+ 01/22
+ </th>
+ <th aria-colindex="124" scope="col">推荐</th>
+ </tr>
+ </thead>
+ …
+</table>
+```
+
+在上面的示例中，表格有 128 列，但只显示了 4 列。`aria-colindextext` 在三列中使用，提供了可读的文本替代。通过包含 `aria-colindextext="2021 年初值"`，辅助技术可以宣告“2021 年初值”，而不是“110 列”。
+
+只有在提供或计算的 `aria-colindex` 的值不具有意义或不反映出显示的索引时，才使用 `aria-colindextext`。每当包含 `aria-colindextext` 时，也要保留 `aria-colindex`，因为一些辅助技术依赖于数字列索引来跟踪用户的位置，并提供替代的表格导航。
+
+> **备注：** 虽然当所有存在的列都是连续的时，`aria-colindex` 可以添加到行中，因为可以推断出顺序值，但 `aria-colindextext` 不是 [`row`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/row_role) 的受支持属性。
+
+请参阅相关的 [`aria-rowindextext`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext)。
+
+## 值
+
+- `<string>`
+ - : 数字 [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 的可读文本替代
+
+## 关联接口
+
+- {{domxref("Element.ariaColIndexText")}}
+ - : {{domxref("Element")}} 接口的 [`ariaColIndexText`](/zh-CN/docs/Web/API/Element/ariaColIndexText) 属性，反映了 HTML 属性 `aria-colindextext` 的值。
+- {{domxref("ElementInternals.ariaColIndexText")}}
+ - : {{domxref("ElementInternals")}} 接口的 [`ariaColIndexText`](/zh-CN/docs/Web/API/ElementInternals/ariaColIndexText) 属性反映了 HTML 属性 `aria-colindextext` 的值。
+
+## 关联角色
+
+用于角色：
+
+- [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role)
+
+继承到角色：
+
+- [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role)
+- [`rowheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role)
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- [`Element.ariaColIndexText`](/zh-CN/docs/Web/API/Element/ariaColIndexText)
+- [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex)
+- [`aria-rowindextext`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext)
+- [`aria-colcount`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colcount)
+- [`cell` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role)
+- [`columnheader` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role)
+- [`rowheader` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role)
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md
index 3d4670c76d0954..731a4e4106c4e7 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md
@@ -1,65 +1,83 @@
---
title: aria-hidden
slug: Web/Accessibility/ARIA/Attributes/aria-hidden
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
-本文用来说明如何使用 aria-hidden 属性。aria-hidden 属性可以用来控制一系列可访问 API 中的非交互内容的显示或隐藏。
+`aria-hidden` 状态指示元素是否暴露给无障碍 API。
## 描述
-把 `aria-hidden="true"` 加到元素上会把该元素和它的所有子元素从无障碍树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：
+`aria-hidden` 属性可用于隐藏非交互内容，使其在无障碍 API 中不可见。
-- 纯装饰性的内容，如图标、图片
+将 `aria-hidden="true"` 添加到一个元素会将该元素及其所有子元素从无障碍树中移除。这可以通过隐藏来改善辅助技术用户的体验：
+
+- 纯装饰性内容，如图标或图片
- 重复的内容，如重复的文本
-- 屏幕外或被折叠的内容，如菜单
+- 屏幕外或折叠的内容，如菜单
-根据[无障碍的第四条规则](https://www.w3.org/TR/using-aria/#fourth)，`aria-hidden="true"` 不应该被用在可聚焦的元素上。而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。
+`aria-hidden` 属性的存在会将内容对辅助技术隐藏，但不会在视觉上隐藏任何内容。
-如果父元素带有 `aria-hidden="true"` ，那么即使使用 `aria-hidden="false"` 也无法将该元素显示出来。
+不应该在可以获得焦点的元素上使用 `aria-hidden="true"`。此外，由于此属性会被元素的子元素继承，因此不应该添加到可获得焦点元素的父元素或祖先元素上。
-> **警告：** WAI-ARIA Authoring Practices 1.1 提示 `aria-hidden="false"` 在现阶段 [各个浏览器中表现不同](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden).
+> **警告：** 不要在可以获得焦点的元素上使用 `aria-hidden="true"`。
-### 比较 `aria-hidden="true"`， `role="presentation"` 和 `role="none"`
+元素的隐藏状态基于其是否被渲染。渲染通常由 CSS 控制。例如，通过 CSS 将元素的 `display` 属性设置为 `none`，该元素就不会被渲染。如果元素或其任何祖先元素没有被渲染或其 `aria-hidden` 属性值设置为 true，则该元素被视为隐藏。请注意，已在元素及其子元素上声明了 `aria-hidden="true"` 的元素仍然可见，除非也被 CSS 隐藏。
-表面上，`aria-hidden="true"`，`role="presentation"`，和`role="none"` 很相似，因为这三者都有以下特性：
+在使用 `aria-hidden` 将可见渲染内容隐藏时，请谨慎使用。除非通过移除冗余或多余内容改善了辅助技术用户的体验，否则不应隐藏可见内容。只有当对辅助技术公开了相同或等同的含义和功能时，才可以将可见内容从无障碍 API 中移除。
-- 根据辅助即使隐藏页面内容
-- 无法在可聚焦元素上使用
-- 无法在可互动元素的父级元素上使用
+> **备注：** 在对辅助技术隐藏可见渲染内容时，请考虑所有残障人士。并非所有辅助技术用户都有视觉障碍。如果可见内容与无障碍 API 中的文本内容不匹配，那么视力正常用户的体验将受到负面影响。
-尽管有上面这些相同点，但是各个属性的意图是不同的。
+表面上，`aria-hidden="true"` 和 `role="presentation"` 及其同义词 `role="none"` 看起来相似，但每个背后的意图是不同的。
-- `aria-hidden="true"` 会把整个元素从无障碍 API 中移除
-- `role="presentation"` 和`role="none"` 会将元素从语义上移除，仍然会将元素暴露给辅助技术。
+- `aria-hidden="true"` 会将整个元素从无障碍 API 中移除。
+- `role="presentation"` 和 `role="none"` 会移除元素的语义含义，但仍然将其及其内容暴露给辅助技术。
-### 可选值
+当以下情况发生时，不应添加 `aria-hidden="true"`：
-- `false`
- - : （默认）元素会暴露给无障碍 API。
-- `true`
- - : 元素不会暴露给无障碍 API。
-- `undefined`
- - : （默认）客户端决定元素是否暴露给无障碍 API。
+- HTML 中存在 [`hidden`](/zh-CN/docs/Web/HTML/Global_attributes/hidden) 属性
+- 使用 [`display: none`](/zh-CN/docs/Web/CSS/display) 隐藏了元素或元素的祖先元素
+- 使用 [`visibility: hidden`](/zh-CN/docs/Web/CSS/visibility) 隐藏了元素或元素的祖先元素
+
+在这三种情况下，添加此属性是不必要的，因为元素已经从无障碍树中移除了。使用 `display` 或 `visibility` 隐藏元素会使其在屏幕和辅助技术中不可见。
+
+如果任何父级指定 `aria-hidden="true"`，则使用 `aria-hidden="false"` 不会重新将元素暴露给辅助技术。
## 示例
+将 `aria-hidden="true"` 添加到图标中会隐藏图标字符，使其不包含在无障碍名称中。
+
```html
-<i class="icon" aria-hidden="true" />
+<button>
+ <span class="fa fa-tweet" aria-hidden="true"></span>
+ <span class="label">发推</span>
+</button>
```
-## 无障碍问题
+我们有一个带有 [Font Awesome 图标](https://fontawesome.com/)的按钮。我们使用 `aria-hidden="true"` 将图标从辅助技术中隐藏起来，因为将图标暴露给辅助技术可能会导致冗余，或者如果图标与可见文本内容不同，则会引起混淆。
+
+## 值
+
+- `false`
+ - : 元素向无障碍 API 暴露，就像它被渲染了一样。
+- `true`
+ - : 元素从无障碍 API 中隐藏。
+- `undefined`（默认值）
+ - : 用户代理根据元素是否被渲染来确定元素的隐藏状态。
-## 最佳实践
+## 关联接口
-`aria-hidden="true"` 在以下场景不应该被使用：
+- {{domxref("Element.ariaHidden")}}
+ - : [`ariaHidden`](/zh-CN/docs/Web/API/Element/ariaHidden) 属性，属于 {{domxref("Element")}} 接口，反映了 `aria-hidden` 属性的值，指示元素是否暴露给无障碍 API。
+- {{domxref("ElementInternals.ariaHidden")}}
+ - : [`ariaHidden`](/zh-CN/docs/Web/API/Element/ariaHidden) 属性，属于 {{domxref("ElementInternals")}} 接口，反映了 `aria-hidden` 属性的值。
-- HTML 的`hidden`属性被设置了
-- 祖先元素被`display: none`属性设置成不显示状态
-- 祖先元素被`visibility: hidden`属性设置成不显示状态
+## 关联角色
-在以上三个场景中，元素已经被隐藏，从可访问树中移除了，无需再添加 `aria-hidden="true"` 属性。
+用于**所有**角色
## 规范
@@ -67,5 +85,9 @@ slug: Web/Accessibility/ARIA/Attributes/aria-hidden
## 参见
-- [使用展示角色](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role)
-- [role="none"](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_none_role)
+- [`aria-disabled`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
+- [`aria-modal`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-modal)
+- [`aria-expanded`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
+- HTML [`hidden`](/zh-CN/docs/Web/HTML/Global_attributes/hidden) 属性
+- CSS {{CSSXref('display')}} 属性
+- CSS {{CSSXref('visibility')}} 属性
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md
index 028ac65a4f12c7..7cab9ce5f7083d 100644
--- a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md
+++ b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md
@@ -1,48 +1,106 @@
---
title: aria-label
slug: Web/Accessibility/ARIA/Attributes/aria-label
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
-aria-label 属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加 label（如果被描述元素存在真实的描述元素，可使用 [aria-labelledby](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) 属性作为来绑定描述元素和被描述元素来代替）。
+`aria-label` 属性定义了一个字符串值，用于为交互元素提供标签。
-aria-label 属性可以用在任何典型的 HTML 元素中，并不需要配合特定的 ARIA role 才能使用。
+## 描述
-### Value
+有时，元素的默认{{Glossary("accessible_name", "无障碍名称")}}缺失，或者无障碍名称并不准确描述元素的内容，且在 DOM 中没有可见内容可以与对象相关联以赋予其含义。一个常见的示例是包含 SVG 或没有任何文本的图标字体的按钮。（查看这个关于[为什么不应该使用图标字体的视频](https://www.youtube.com/watch?v=9xXBYcWgCHA)。）
-string
+在交互元素没有无障碍名称或无障碍名称不准确，且在 DOM 中没有可见内容可以通过 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 属性引用时，可以使用 `aria-label` 属性定义一个字符串，为设置了该属性的交互元素提供标签。这样做为交互元素提供了无障碍名称。
-### 对于用户代理和辅助技术的可能影响
+以下代码示例演示了如何使用 `aria-label` 属性为 `<button>` 元素提供无障碍名称的示例。在这个示例中，按钮包含一个 SVG 图形并且缺乏文本内容，使得对于屏幕阅读器用户理解其功能（在本例中为“关闭”）而言，`aria-label` 是必不可少的。
-> **备注：** 由于辅助技术处理这一技术的差异导致选项信息可能不同。以上所提供的信息只是其中可能的一种，而非一般情况。
+```html
+<button aria-label="关闭" onclick="myDialog.close()">
+ <svg
+ aria-hidden="true"
+ focusable="false"
+ width="17"
+ height="17"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
+ fill="#000" />
+ </svg>
+</button>
+```
-## 示例
+> **备注：** `aria-label` 用于交互元素，或当 DOM 中没有可见文本可以作为标签时，通过其他 ARIA 声明使元素变为交互元素的情况。
-#### 示例 1：多标签（Multiple Labels）
+大多数内容都有一个从其直接包装元素的文本内容生成的无障碍名称。无障碍名称也可以通过某些属性或相关元素创建。
-在下面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X”字符。辅助软件并不能知道 X 是什么意思，所以需要 aria-label 标签来为辅助设备提供相应的标识来告诉它这个 button 是 close 的作用。
+默认情况下，按钮的无障碍名称是在 {{HTMLElement('button')}} 标签之间的内容，图像的无障碍名称是其 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 属性的内容，表单输入的无障碍名称是相关的 {{HTMLElement('label')}} 元素的内容。
-```html
-<button aria-label="Close" onclick="myDialog.close()">X</button>
-```
+如果这些选项都不可用，或者如果默认的无障碍名称不合适，则使用 `aria-label` 属性定义元素的无障碍名称。
+
+> **备注：** 虽然 `aria-label` 可以用于任何可以具有无障碍名称的元素，但在实践中，它仅支持交互元素、[小部件](/zh-CN/docs/Web/Accessibility/ARIA/Roles#2._小部件角色)、[地标](/zh-CN/docs/Web/Accessibility/ARIA/Roles#3._地标角色)、图像和 iframe。
+
+在使用 `aria-label` 时，还需要考虑 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)：
+
+- 在用于标注元素的文本*不*可见的情况下，可以使用 `aria-label`。如果存在可见文本用于标记元素，请改用 `aria-labelledby`。
+- `aria-label` 和 `aria-labelledby` 的目的相同。两者都为元素提供无障碍名称。如果元素没有可见名称可以引用，则使用 `aria-label` 为用户提供可识别的无障碍名称。如果 DOM 中存在标签文本，并且可以引用它以获得良好的用户体验，则最好使用 `aria-labelledby`。不要在同一元素上同时使用 `aria-labelledby` 和 `aria-label`，因为如果两者都应用，则 `aria-labelledby` 会优先于 `aria-label`。
+
+在使用 `aria-label` 时，还需要考虑以下额外的准则：
+
+- `aria-label` 属性可以与常规的语义 HTML 元素一起使用；不限于指定了 [ARIA `role`](/zh-CN/docs/Web/Accessibility/ARIA/Roles) 的元素。
+
+- 不要“滥用” `aria-label`。记住它主要是为辅助技术设计的。为了提供额外的指示或澄清 UI，请使用可见文本和 `aria-describedby` 或 [`aria-description`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description)，而不是 `aria-label`。说明应该对所有用户都无障碍，而不仅仅是屏幕阅读器用户（或者最好使你的 UI 更直观）。
+
+ > **备注：** 由于 `aria-label` 内容在辅助技术之外不显示，请考虑让所有用户看到重要信息。
+
+- 并非所有元素都可以获得无障碍名称。`aria-label` 和 `aria-labelledby` 均不应该与 `code`、`term` 和 `emphasis` 这样的行内结构角色以及未映射到辅助技术 API 的角色（包括 `none`）一起使用。`aria-label` 属性适用于链接、视频、表单控件以及具有[地标角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles#3._地标角色)或[小部件角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles#2._小部件角色)的元素；当 DOM 中不存在可见标签时，`aria-label` 提供了无障碍名称。
+
+- 如果为 {{HTMLElement('iframe')}} 分配了 `title`，为 {{HTMLElement('img')}} 定义了 `alt` 属性，或为 {{HTMLElement('input')}} 添加了 {{HTMLElement('label')}}，则不需要 `aria-label`。但是，如果存在 `aria-label` 属性，则它将优先于 iframe 的 `title`，图像的 `alt` 或 input 的 `<label>` 文本作为该元素的无障碍名称。
+
+## 值
+
+- `<string>`
+ - : 一个文本字符串，将作为对象的无障碍名称。
-### 说明
+## 关联接口
-最常见的对于标签的无障碍 API 就是可访问的 name 属性。
+- {{domxref("Element.ariaLabel")}}
+ - : [`ariaLabel`](/zh-CN/docs/Web/API/Element/ariaLabel) 属性是 {{domxref("Element")}} 接口的一部分，反映了 `aria-label` 属性的值。
+- {{domxref("ElementInternals.ariaLabel")}}
+ - : [`ariaLabel`](/zh-CN/docs/Web/API/Element/ariaLabel) 属性是 {{domxref("ElementInternals")}} 接口的一部分，反映了 `aria-label` 属性的值。
-### ARIA roles 的使用
+## 关联角色
-基本标记中的全部元素。
+几乎所有角色中都使用 `aria-label` 属性，**除了**不能由作者提供无障碍名称的角色。
-### ARIA 相关技术
+aria-label 属性**不**受支持的角色有：
-- [Using the aria-labelledby attribute](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute)
+- [`code`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`caption`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`definition`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`deletion`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`emphasis`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`generic`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/generic_role)
+- [`insertion`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`mark`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/mark_role)
+- [`paragraph`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`presentation`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/presentation_role) / [`none`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/none_role)
+- [`strong`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`subscript`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`superscript`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`suggestion`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/suggestion_role)
+- [`term`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/term_role)
+- [`time`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-### 兼容性
+## 规范
-有待讨论：为通常的 UA 和 AT 产品组合提供支持信息。
+{{Specifications}}
-### 额外资源
+## 参见
-- [WAI-ARIA specification for aria-label](http://www.w3.org/TR/wai-aria/states_and_properties#aria-label)
+- {{HTMLElement('label')}} 元素
+- [`aria-description`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description)
+- [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
+- MDN 博客中的[使用 HTML 地标角色来提高无障碍性](/en-US/blog/aria-accessibility-html-landmark-roles/)（2023）
diff --git a/files/zh-cn/web/accessibility/aria/multipart_labels/index.md b/files/zh-cn/web/accessibility/aria/multipart_labels/index.md
new file mode 100644
index 00000000000000..60f1e771455bd3
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/multipart_labels/index.md
@@ -0,0 +1,54 @@
+---
+title: 多部分标签：使用嵌入字段的标签的 ARIA
+slug: Web/Accessibility/ARIA/Multipart_labels
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+## 问题
+
+你有一个表单，在其中向用户提出一个问题，但答案已经在问题本身中提及了。我们都知道的一个经典例子是浏览器设置中的“在 x 天后删除历史记录”设置。“在 x 天后删除历史记录”位于文本框的左侧，x 是数字，例如 21，接着文本框后面是单词“天”，形成了一个易于理解的句子。
+
+如果你正在使用屏幕阅读器，你是否注意到，在 Firefox 中进入此设置时，它会告诉你“在 21 天后删除历史记录”？然后它会宣布你在一个文本框中，并且它包含数字 21。这不是很酷吗？你不需要四处导航找到单位。“天”很容易被替换为“月”或“年”，在许多普通的对话框中，除了使用屏幕查看命令四处导航之外，没有其他方法可以找到这个信息。
+
+解决方案在一个名为 `aria-labelledby` 的 ARIA 属性中。它的参数是一个字符串，由你想要连接成一个无障碍名称的 HTML 元素的 ID 组成。
+
+`aria-labelledby `和 `aria-describedby` 都需要在添加标签的表单元素（例如 `<input>`）上指定。在这两种情况下，可能还存在着 label for 或标签控件的绑定，这些绑定会被 `aria-labelledby` 覆盖。如果在 HTML 页面上提供了 `aria-labelledby`，你还应该提供一个 label for 结构，以支持那些尚未具有 ARIA 支持的旧浏览器。通过 Firefox 3，你的视觉受损的用户将自动从新属性获得更好的无障碍性，但是老旧浏览器的用户不会因此而被遗忘。
+
+### 示例
+
+{{ EmbedLiveSample("示例") }}
+
+```css hidden
+body {
+ margin: 1rem;
+}
+```
+
+```html
+<input
+ aria-labelledby="labelShutdown shutdownTime shutdownUnit"
+ type="checkbox" />
+
+<span id="labelPrefix">在</span>
+
+<input
+ aria-labelledby="labelPrefix shutdownTime shutdownUnit labelShutdown"
+ id="shutdownTime"
+ type="text"
+ value="10" />
+
+<span id="shutdownUnit">分钟</span><span id="labelShutdown">后关机</span>
+```
+
+## 对 JAWS 8 用户的说明
+
+JAWS 8.0 有自己的逻辑来查找标签，导致它始终覆盖 HTML 文档中文本框的 accessibleName。对于 JAWS 8，我还没有找到一种方法让它接受上面示例中的标签。但是 NVDA 和 Window-Eyes 可以很好地实现，Linux 上的 Orca 也没有问题。
+
+> **备注：** 待定：添加更多兼容性信息
+
+## 可以在没有 ARIA 的情况下完成吗？
+
+社区成员 Ben Millard 在博客文章中指出，可以[像上面使用 HTML 4 中的示例那样将控件嵌入标签中](https://projectcerbera.com/blog/2008/03#day24)，通过将输入框嵌入到标签中。感谢你提供的信息，Ben！这是非常有用的，并且表明即使是一些多年来可用的技术，有时也会逃脱甚至是专家的注意。这种技术在 Firefox 中有效；然而，它目前在许多其他浏览器中，包括 IE 中，都不起作用。对于带有嵌入式表单控件的标签，使用 `aria-labelledby` 仍然是最佳方法。
diff --git a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md
index 3300dcc6a3f8ed..67647de6229789 100644
--- a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md
@@ -1,6 +1,8 @@
---
title: ARIA：button 角色
slug: Web/Accessibility/ARIA/Roles/button_role
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
@@ -64,7 +66,7 @@ button 角色会向辅助技术（如屏幕阅读器）识别一个元素为按
按钮始终应该有无障碍的名称。对于大多数的按钮，名称通常是和按钮内的文本、开启和闭合标签之间的内容一致的。一些情况下，比如以图标形式呈现的按钮，其无障碍名称可能是由 [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label) 或者 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 属性提供的。
-## 切换按钮
+### 切换按钮
切换按钮通常有两种状态：按下、没有按下，第三种混合状态可用于控制了其他的元素的切换按钮，例如其他的不共享同一个值的切换按钮或者复选框。还可以使用 `button` 角色（如果元素不是原生的 button 元素）加 [`aria-pressed`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性来表示元素是否为切换按钮：
@@ -257,7 +259,7 @@ function toggleButton(element) {
}
```
-### 结果
+#### 结果
{{EmbedLiveSample('切换按钮示例')}}
diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.md b/files/zh-cn/web/accessibility/aria/roles/list_role/index.md
index f3837f7d2305f3..09b31984461120 100644
--- a/files/zh-cn/web/accessibility/aria/roles/list_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.md
@@ -1,6 +1,8 @@
---
title: ARIA：list 角色
slug: Web/Accessibility/ARIA/Roles/list_role
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
@@ -21,13 +23,13 @@ ARIA `list` 角色可用于标识项目列表。它通常与 `listitem` 角色
关于应该使用哪些元素来标记 `list` 和 `listitem` 没有硬性规定，但是你应该确保 `listitem` 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。
-> **警告：** 如果可能，你应该使用适当的语义化 HTML 元素来标记 `list` 及其 `listitem`，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 [最佳实践](#best_practices)。
+> **备注：** 最佳实践要求使用适当的语义 HTML 元素来标记列表和列表项，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅[最佳实践](#最佳实践)。
### 关联的 WAI-ARIA 角色、状态和属性
-- [listitem](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role)
+- [`listitem`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/listitem_role) 角色
- : 列表或目录中的单个项目。角色为 listitem 的元素只能在角色为 `list` 或 `group` 的元素中找到。
-- [group](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role)
+- [`group`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role) 角色
- : 相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。
## 最佳实践
@@ -56,9 +58,9 @@ ARIA `list` 角色可用于标识项目列表。它通常与 `listitem` 角色
> **备注：** ARIA `list` / `listitem` 角色不区分有序列表和无序列表。
-顺便说一句，请注意，如果你使用 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}} 的语义 HTML 元素并应用 [`presentation`](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) 角色，则每个子 `li` 元素都会继承 `presentation` 角色，因为 ARIA 需要 `listitem` 元素具有父 `list` 元素。因此，`li` 元素不会暴露给辅助技术，但是包含在这些 `li` 元素中的元素，包括嵌套列表，对辅助技术是可见的。
+顺便说一句，请注意，如果你使用 `<ol>` 或 `<ul>` 的语义 HTML 元素并应用 [`presentation`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/presentation_role) 角色，则每个子 `<li>` 元素都会继承 `presentation` 角色，因为 ARIA 需要 `listitem` 元素具有父 `list` 元素。因此，`<li>` 元素不会暴露给辅助技术，但是包含在这些 `<li>` 元素中的元素，包括嵌套列表，对辅助技术是可见的。
-> **备注：** 如果要标记将用作选项卡式界面的项目列表，则应改为使用 `tab`、`tabpanel` 和 `tablist` 角色。
+> **备注：** 如果要标记将用作标签页式界面的项目列表，则应改为使用 [`tab`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tab_role)、[`tabpanel`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) 和 [`tablist`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tablist_role) 角色。
## 规范
diff --git a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md
index 05cbeedbe624ac..cbd8fd1c00bf51 100644
--- a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md
@@ -1,6 +1,8 @@
---
title: ARIA：listbox 角色
slug: Web/Accessibility/ARIA/Roles/listbox_role
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
@@ -9,46 +11,44 @@ slug: Web/Accessibility/ARIA/Roles/listbox_role
## 描述
-`listbox` 角色用于标识创建列表的元素，用户可以从中选择一个或多个静态选项，类似于 HTML {{HTMLElement("select")}} 元素。与 {{HTMLElement("select")}} 不同，`listbox` 可以包含图像。`listbox` 的每个子项都应该有一个 [`option`](https://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option) role。
+`listbox` 角色用于标识创建列表的元素，用户可以从中选择一个或多个静态选项，类似于 HTML {{HTMLElement("select")}} 元素。与 {{HTMLElement("select")}} 不同，`listbox` 可以包含图像。`listbox` 的每个子项都应该有一个 [`option`](https://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option) 角色。
-强烈建议使用 HTML {{HTMLElement("select")}} 元素，如果只能选择一个选项，则使用一组单选按钮，如果可以选择多个选项，则使用一组复选框，因为有很多键盘交互来管理所有后代的焦点和原生 HTML 元素为你提供相关的功能。
+强烈建议使用 HTML select 元素，如果只能选择一个选项，则使用一组单选按钮，如果可以选择多个选项，则使用一组复选框，因为有很多键盘交互来管理所有后代的焦点和原生 HTML 元素为你提供相关的功能。
-具有 `listbox` 角色的元素含有隐式的 `aria-orientation` 和 `vertical` 值。
+具有 `listbox` 角色的元素含有隐式的 [`aria-orientation`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) 值，值为 `vertical`。
-当一个列表被 tab 聚焦到时，如果没有其他内容，将会选择列表中的第一项。可以用 Up/Down 方向键在列表中导航，按 Shift + Up/Down 方向键将移动并扩展选择。键入一个或多个字母将在列表项中导航（相同的字母指向以那个开头的每个选项，不同的字母指向以整个字符串开头的第一个选项）。如果当前选项有关联的菜单，Shift+F10 将启动该菜单。如果项目可被勾选，Space 可用于切换 [`checkbox`](https://www.w3.org/TR/wai-aria-practices/#checkbox) role。对于可选择的列表项，Space 切换它们的选择，Shift+Space 可用于选择连续的项目，Ctrl+ 方向键 移动而不选择，Ctrl+Space 可用于选择非连续的项目。建议使用 checkbox、link 或其他方法来选择所有项目，为此可以使用 Ctrl+A 作为快捷键。
+当一个列表被 tab 聚焦到时，如果没有其他内容，将会选择列表中的第一项。可以用 Up/Down 方向键在列表中导航，按 Shift + Up/Down 方向键将移动并扩展选择。键入一个或多个字母将在列表项中导航（相同的字母指向以那个开头的每个选项，不同的字母指向以整个字符串开头的第一个选项）。如果当前选项有关联的菜单，Shift+F10 将启动该菜单。如果项目可被勾选，Space 可用于切换[复选框](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role)。对于可选择的列表项，Space 切换它们的选择，Shift+Space 可用于选择连续的项目，Ctrl+ 方向键移动而不选择，Ctrl+Space 可用于选择非连续的项目。建议使用复选框、链接或其他方法来选择所有项目，为此可以使用 Ctrl+A 作为快捷键。
-当 listbox 角色被添加到元素中，或含有它的元素变得可见时，屏幕阅读器会在 listbox 获得焦点时读出它的 label 和 role。如果列表中的 option 或选项获得焦点，则接下来会读出它，如果屏幕阅读器支持，则会在列表中指示选项的位置。当焦点在列表中移动时，屏幕阅读器会读出相关选项。
+当 listbox 角色被添加到元素中，或含有它的元素变得可见时，屏幕阅读器会在 listbox 获得焦点时读出它的标签和角色。如果列表中的选项或项目获得焦点，则接下来会读出它，如果屏幕阅读器支持，则会在列表中指示选项的位置。当焦点在列表中移动时，屏幕阅读器会读出相关选项。
### 相关的 ARIA 角色、状态和属性
-#### 相关角色
+#### 关联角色
-- [option](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role)
- - : 需要一个或多个嵌套的 `option`。所有被选择的选项都含有 `aria-selected` 且值为 `true`。所有未选中的选项都含有 `aria-selected` 且值为 `false`。如果某个选项不可选择，`aria-selected` 会被忽略。
-- [list](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role)
- - : 包含 `listitem` 元素的部分
+- [`option`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role) 角色
+ - : 需要一个或多个嵌套的 `option`。所有被选择的选项都含有 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 且值为 `true`。所有未选中的选项都含有 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 且值为 `false`。如果某个选项不可选择，[`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 会被忽略。
+- [`list`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role) 角色
+ - : 包含 `listitem` 元素的部分。
#### 状态和属性
-- aria-activedescendant
- - : 保存 listbox 中当前活动元素的 `id` 字符串。如果这是一个 option 元素，那么这将是最近与之交互选项的 `id`，无论该选项是否具有值为 `true` 的 `aria-selected`。即使在多选列表框中，也只会有一个 `id`。如果 `id` 不引用 listbox 的 DOM 后代，则 `id` 必须包含在 `aria-owns` 属性中的 ID 中。
-- aria-owns
- - : 这是一个以空格分隔的元素 ID 列表，它们不是 listbox 的 DOM 子元素。此处列出的 ID 也不能列在任何其他元素的 `aria-owns` 属性中。
-- aria-multiselectable
- - : 如果用户可以选择多个选项，则存在并设置为 `true`。如果设置为 `true`，_每个_ 可选的选项都应包含 `aria-selected` 属性并设置为 `true` 或 `false`。 *不可选*的选项*不应该*具有`aria-selected`属性。如果值为 `false` 或被省略，那么仅当前选中的选项（如果有任何选项被选中）才需要`aria-selected`属性，而且必须设置为`true`。
-- aria-required
+- [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant)
+ - : 保存 listbox 中当前活动元素的 `id` 字符串。如果这是一个 option 元素，那么这将是最近与之交互选项的 `id`，无论该选项是否具有值为 `true` 的 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected)。即使在多选列表框中，也只会有一个 `id`。如果 `id` 不引用 listbox 的 DOM 后代，则 `id` 必须包含在 [`aria-owns`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-owns) 属性中的 ID 中。
+- [`aria-owns`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-owns)
+ - : 这是一个以空格分隔的元素 ID 列表，这些元素不是 listbox 的 DOM 子元素。此处列出的 ID 也不能列在任何其他元素的 [`aria-owns`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-owns) 属性中。
+- [`aria-multiselectable`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable)
+ - : 如果用户可以选择多个选项，则存在并设置为 `true`。如果设置为 `true`，*每个*可选的选项都应包含 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性并设置为 `true` 或 `false`。 *不可选*的选项*不应该*具有 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性。如果值为 `false` 或被省略，那么仅当前选中的选项（如果有任何选项被选中）才需要 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性，而且必须设置为 `true`。
+- [`aria-required`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-required)
- : 一个布尔属性，指示必须选择具有非空字符串值的选项。
-- aria-readonly
+- [`aria-readonly`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-readonly)
- : 用户无法更改选择或取消选择，但 listbox 是可操作的。
-- aria-label
- - : 一个可供人类阅读的字符串，用于标识 listbox。如果有可见标签，则应使用 `aria-labelledby` 来引用该标签。
-- aria-labelledby
- - : 标识以空格分隔的元素 ID 列表中的一个或多个可见元素，这些元素标识 listbox。如果没有可见标签，则应该使用 `aria-label` 来包含标签。（注意：带有两个 L 的 "labelled" 是基于辅助功能 API 约定的正确拼写。）
-- aria-roledescription
+- [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+ - : 一个可供人类阅读的字符串，用于标识 listbox。如果有可见标签，则应使用 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 来引用该标签。
+- [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
+ - : 标识以空格分隔的元素 ID 列表中的一个或多个可见元素，这些元素标识 listbox。如果没有可见标签，则应该使用 [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label) 来包含标签。（注意：带有两个 L 的“labelled”是基于无障碍 API 约定的正确拼写。）
+- [`aria-roledescription`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription)
- : 一个可供人类阅读的字符串，可以更清楚地标识 listbox 的作用。屏幕阅读器通常会在阅读标签（如果存在）后向用户阅读此值，而不是说“listbox”。
-（有关更多详细信息以及 ARIA 状态和属性的完整列表，请参阅 [ARIA `listbox` (role)](https://www.w3.org/TR/wai-aria-1.1/#listbox) 文档。 )
-
### 键盘交互
- 当单选 listbox 获得焦点时：
@@ -71,18 +71,18 @@ slug: Web/Accessibility/ARIA/Roles/listbox_role
- <kbd>Home</kbd>
- (可选): 将焦点移至第一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。
+ （可选）: 将焦点移至第一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。
- <kbd>End</kbd>
- (可选): 将焦点移至最后一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。
+ （可选）: 将焦点移至最后一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。
- 建议所有 listbox 都预先输入，尤其是那些有七个以上选项的列表框：
- 键入字符时：焦点移至名称符合键入的字符开头的一项。
- 快速连续键入多个字符时：焦点移至名称符合键入的字符串开头的一项。
-- **多项选择**: 作者可以实现两种交互模型中的任何一种来支持多选：推荐模型，不需要用户在导航列表时按住修饰键，例如
+- **多项选择**：作者可以实现两种交互模型中的任何一种来支持多选：推荐模型，不需要用户在导航列表时按住修饰键，例如
<kbd>Shift</kbd>
@@ -90,67 +90,67 @@ slug: Web/Accessibility/ARIA/Roles/listbox_role
<kbd>Control</kbd>
- 或者需要在导航时按住修饰键以避免丢失选择状态的替代模型。
+ ；或者替代模型，需要在导航时按住修饰键以避免丢失选择状态。
- 推荐的选择模型——不需要按住修饰键：
- <kbd>Space</kbd>
- : 更改焦点选项的选择状态。
+ : 更改已聚焦选项的选择状态。
- <kbd>Shift + Down Arrow</kbd>
- （可选）: 将焦点移动并切换到下一个选项的选定状态。
+ （可选）：将焦点移动并切换到下一个选项的选定状态。
- <kbd>Shift + Up Arrow</kbd>
- （可选）: 将焦点移动并切换到上一个选项的选定状态。
+ （可选）：将焦点移动并切换到上一个选项的选定状态。
- <kbd>Shift + Space</kbd>
- （可选）: 选择从最近选择的项目到焦点项目的连续项目。
+ （可选）：选择从最近选择的项目到焦点项目的连续项目。
- <kbd>Control + Shift + Home</kbd>
- （可选）: 选择焦点选项和直到第一个选项的所有选项。（可选）将焦点移至第一个选项。
+ （可选）：选择焦点选项和直到第一个选项的所有选项。（可选）将焦点移至第一个选项。
- <kbd>Control + Shift + End</kbd>
- （可选）: 选择焦点选项和直到最后一个选项的所有选项。（可选）将焦点移到最后一个选项。
+ （可选）：选择焦点选项和直到最后一个选项的所有选项。（可选）将焦点移到最后一个选项。
- <kbd>Control + A</kbd>
- （可选）: 选择列表中的所有选项。（可选）如果选择了所有选项，它也可以取消选择所有选项。
+ （可选）：选择列表中的所有选项。（可选）如果选择了所有选项，它也可以取消选择所有选项。
-### 所需的 JavaScript 功能
+### 所需的 JavaScript 特性
#### 在单选 listbox 中选择一个选项
当用户选择一个选项时，必须发生以下情况：
-1. 取消选择先前选择的选项，将 aria-selected 设置为 false，或完全删除该属性，将新未选择的选项的外观更改为未选择的。
-2. 选择新选择的选项，在该选项上设置 aria-selected="true" 并将新选择的选项的外观更改为选中。
-3. 将列表框上的 `aria-activedescendant` 值更新为新选择的选项的 id
-4. 可视化处理选项的丢焦、聚焦和选定状态
+1. 取消选择先前选择的选项，将 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 设置为 `false`，或完全删除该属性，将新未选择的选项的外观更改为未选择的。
+2. 选择新选择的选项，在该选项上设置 `aria-selected="true"` 并将新选择的选项的外观更改为选中。
+3. 将 listbox 上的 [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) 值更新为新选择的选项的 ID。
+4. 可视化处理选项的失焦、聚焦和选定状态。
#### 在多选列表框中切换选项的状态
当用户点击一个选项、聚焦在一个选项时按下 <kbd>Space</kbd>或者以其他方式切换一个选项的状态，必须发生以下情况：
-1. 切换当前聚焦选项的 aria-selected 状态，如果它是 false，则将 aria-selected 的状态更改为 true，如果为 true，则将其更改为 false。
-2. 更改选项的外观以反映其选定状态
-3. 将列表框上的 aria-activedescendant 值更新为用户刚刚与之交互的选项的 id，即使他们将选项切换为取消选择。
+1. 切换当前聚焦选项的 [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 状态，如果它是 false，则将 `aria-selected` 的状态更改为 true，如果为 true，则将其更改为 false。
+2. 更改选项的外观以反映其选定状态。
+3. 将 listbox 上的 [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) 值更新为用户刚刚与之交互的选项的 ID，即使他们将选项切换为取消选择。
-> **备注：** ARIA 使用的第一原则是你可以使用具有内置语义和行为的原生功能，而不是重新利用元素并**添加** ARIA 角色、状态或属性使其可访问。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。
+> **备注：** ARIA 使用的第一原则是你可以使用具有内置语义和行为的原生功能，而不是重新利用元素并**添加** ARIA 角色、状态或属性使其具有无障碍性。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。
-## 例子
+## 示例
-#### 例子 1: 使用 aria-activedescendant 的单个选择列表框
+### 示例 1: 使用 aria-activedescendant 的单选 listbox
-下面的代码片段显示了如何将列表框角色直接添加到 html 源代码中。
+下面的代码片段显示了如何使用 [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) 将 listbox 角色直接添加到 HTML 源代码中。
```html
-<p id="listbox1label" role="label">Select a color:</p>
+<p id="listbox1label" role="label">选择一种颜色：</p>
<div
role="listbox"
tabindex="0"
@@ -161,43 +161,43 @@ slug: Web/Accessibility/ARIA/Roles/listbox_role
onkeypress="return listItemKeyEvent(event);"
aria-activedescendant="listbox1-1">
<div role="option" id="listbox1-1" class="selected" aria-selected="true">
- Green
+ 绿色
</div>
- <div role="option" id="listbox1-2">Orange</div>
- <div role="option" id="listbox1-3">Red</div>
- <div role="option" id="listbox1-4">Blue</div>
- <div role="option" id="listbox1-5">Violet</div>
- <div role="option" id="listbox1-6">Periwinkle</div>
+ <div role="option" id="listbox1-2">橙色</div>
+ <div role="option" id="listbox1-3">红色</div>
+ <div role="option" id="listbox1-4">蓝色</div>
+ <div role="option" id="listbox1-5">紫罗兰色</div>
+ <div role="option" id="listbox1-6">壳青虫色</div>
</div>
```
使用原生的 HTML {{HTMLElement("select")}} 和 {{HTMLElement("label")}} 元素可以更简单。
```html
-<label for="listbox1">Select a color:</label>
+<label for="listbox1">选择一种颜色：</label>
<select id="listbox1">
- <option selected>Green</option>
- <option>Orange</option>
- <option>Red</option>
- <option>Blue</option>
- <option>Violet</option>
- <option>Periwinkle</option>
+ <option selected>绿色</option>
+ <option>橙色</option>
+ <option>红色</option>
+ <option>蓝色</option>
+ <option>紫罗兰色</option>
+ <option>壳青虫色</option>
</select>
```
-#### 更多例子
+### 更多示例
-- [可滚动的 listbox 示例](https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html): 滚动显示更多选项的单选 listbox，类似于 HTML `select` 的 `size` 属性大于 1。
-- [可折叠下拉 listbox 示例](https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html): 激活时展开的单选可折叠 listbox，类似于 HTML `select` 并且属性 `size="1"`。
-- [具有可重新排列选项的 listbox 示例](https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html): 带有可以添加、移动和删除选项的附带工具栏的单选和多选 listbox 的示例。
+- [可滚动 listbox 示例](https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html)：单选列表框，可以滚动显示更多选项，类似于带有 `size` 属性大于一的 HTML {{HTMLElement('select')}}。
+- [带有分组选项的 listbox 示例](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/)：带有分组选项的单选 listbox，类似于 HTML {{HTMLElement('select')}} 中 `size` 属性设置为大于 `"1"`，并且选项使用 `optgroup` 元素分组。
+- [可重新排列选项的 listbox 示例](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/)：单选和多选 listbox 的示例，带有相应的工具栏，可以添加、移动和移除选项。
## 最佳实践
-- 为了便于键盘访问，作者应该对这个角色的所有后代进行 [焦点管理](https://www.w3.org/TR/wai-aria-1.1/#managingfocus)
+- 为了更具键盘无障碍性，作者应该对这个角色的所有后代进行[焦点管理](https://www.w3.org/TR/wai-aria-1.1/#managingfocus)
- 建议作者在列表未聚焦时使用不同的样式进行选择，例如非活动选项通常以较浅的背景颜色显示。
-- 如果 listbox 不是另一个组件的一部分，那么它应该具有 `aria-labelledby` 属性。
-- 如果一个或多个条目不是 listbox 的 DOM 子项，则需要设置额外的 `aria-*` 属性（参见 [ARIA Best Practices](https://www.w3.org/TR/wai-aria-practices/#listbox_div))。
-- 如果有理由 [展开](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) 列表框，[`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role) 角色可能更合适。
+- 如果 listbox 不是另一个组件的一部分，那么它应该具有 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 属性。
+- 如果一个或多个条目不是 listbox 的 DOM 子项，则需要设置额外的 `aria-*` 属性（参见 [ARIA 最佳实践](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)）。
+- 如果有理由[扩展](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) listbox，[`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role) 角色可能更合适。
## 规范
@@ -205,12 +205,12 @@ slug: Web/Accessibility/ARIA/Roles/listbox_role
## 参见
-- {{HTMLElement("select")}} 元素
-- {{HTMLElement("label")}} 元素
-- {{HTMLElement("option")}} 元素
-- [ARIA: `combobox` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role)
-- [ARIA: `option` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role)
-- [ARIA: `list` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role)
-- [ARIA: `listitem` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role)
-- [ARIA Best Practices – Listbox](https://www.w3.org/TR/wai-aria-practices/#Listbox)
-- [ARIA Role Model – Listbox](https://www.w3.org/TR/wai-aria-1.1/#listbox)
+- HTML {{HTMLElement("select")}} 元素
+- HTML {{HTMLElement("label")}} 元素
+- HTML {{HTMLElement("option")}} 元素
+- [ARIA：`combobox` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role)
+- [ARIA：`option` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role)
+- [ARIA：`list` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role)
+- [ARIA：`listitem` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role)
+- [ARIA 最佳实践 – Listbox](https://www.w3.org/TR/wai-aria-practices/#Listbox)
+- [ARIA 角色模型 – Listbox](https://www.w3.org/TR/wai-aria-1.1/#listbox)
diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md
index faad5da289d730..27d922812e7835 100644
--- a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md
+++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md
@@ -1,6 +1,8 @@
---
title: ARIA：listitem 角色
slug: Web/Accessibility/ARIA/Roles/listitem_role
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
@@ -25,16 +27,16 @@ ARIA `listitem` 角色可用于标识项目列表中的项目。它通常与 [`l
### 关联的 WAI-ARIA 角色、状态和属性
-- [list](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role)
+- [`list`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role)
- : 项目列表。角色为 `list` 的元素必须有一个或多个角色为 `listitem` 的元素作为子元素，一个或多个角色为 `group` 的元素具有一个或多个具有 `listitem` 角色的元素作为子元素。
-- [group](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role)
+- [`group`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role)
- : 相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。
## 最佳实践
仅在必要时使用 `role="list"` 和 `role="listitem"`。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升无障碍的时候。
-与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA `list` 角色不区分有序列表和无序列表。如果可能，你应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}}）。例如，我们上面的例子应该改写如下：
+如果可能，你应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}}）。例如，我们上面的例子应该改写如下：
```html
<ul>
@@ -58,7 +60,7 @@ ARIA `listitem` 角色可用于标识项目列表中的项目。它通常与 [`l
> **备注：** 给列表添加 CSS 样式 `list-style: none;` 移除列表语义。添加 `role="listitem"` 获得列表语义。
-> **备注：** 如果要标记将用作选项卡式界面的项目列表，则应改为使用 `tab`、`tabpanel` 和 `tablist` 角色。
+> **备注：** 如果要标记将用作选项卡式界面的项目列表，则应改为使用 [`tab`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tab_role)、[`tabpanel`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) 和 [`tablist`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/tablist_role) 角色。
## 规范
@@ -73,4 +75,4 @@ ARIA `listitem` 角色可用于标识项目列表中的项目。它通常与 [`l
- [ARIA：`group` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role)
- [无障碍对象模型](https://wicg.github.io/aom/spec/)
- [HTML 中的 ARIA](https://w3c.github.io/html-aria/)
-- [ARIA 列表示例](https://www.scottohara.me/blog/2018/05/26/aria-lists.html) — by Scott O'Hara
+- [ARIA 列表示例](https://www.scottohara.me/blog/2018/05/26/aria-lists.html)，由 Scott O'Hara 所著
diff --git a/files/zh-cn/web/accessibility/cognitive_accessibility/index.md b/files/zh-cn/web/accessibility/cognitive_accessibility/index.md
new file mode 100644
index 00000000000000..e05b2c4dbc0b4e
--- /dev/null
+++ b/files/zh-cn/web/accessibility/cognitive_accessibility/index.md
@@ -0,0 +1,283 @@
+---
+title: 认知无障碍
+slug: Web/Accessibility/Cognitive_accessibility
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
+---
+
+{{AccessibilitySidebar}}
+
+认知无障碍涵盖了针对认知和学习障碍人群的无障碍考虑。本文介绍了认知无障碍以及改善 Web 对认知和学习差异人群的无障碍性的方法。
+
+认知障碍涵盖了一系列广泛的残疾，从智力残疾的人（可能具有最有限的能力），到具有与年龄相关的问题（思维和记忆）的人。这一范围包括患有抑郁症和精神分裂症等精神疾病的人，以及患有阅读障碍和注意力缺陷多动障碍（ADHD）等学习障碍的人。
+
+尽管在认知障碍的临床定义中存在着很多的多样性，但患有认知障碍的人们经历着一系列共同的功能问题。这些问题包括理解内容的困难、记住如何完成任务以及由不一致或非传统的网页布局引起的困惑。在本文中，我们专注于开发人员应该采取的措施，以提高他们的网站和应用程序的认知无障碍性。
+
+## 概述
+
+认知和智力残疾涵盖了一个广泛的范围，而且可能是短暂、暂时或永久的状况。例如，痴呆症和阿尔茨海默症是逐渐恶化的永久性认知障碍。其他永久性认知障碍包括失语症、言语和语言、自闭症、注意力缺陷/多动症、阅读障碍和计算障碍。
+
+暂时性认知障碍的例子可能包括受到酒精或药物影响的人群。另一种形式是抑郁症，比如为了悼念所爱之人的离世，或者是因为刚在网上看到一条推文或视频而感到短暂的悲伤。第三个例子可能是睡眠剥夺。
+
+解决认知差异的广泛挑战可能看起来是一项艰巨的任务，特别是当针对两个不同的人的解决方案可能是相互冲突的时候。处理这个问题的一种方法是专注于认知技能。认知技能包括：
+
+- 注意力
+- 记忆
+- 处理速度
+- 时间管理
+- 字母和语言
+- 数字符号和数学
+- 理解和做出选择
+
+为患有认知障碍的人提供无障碍解决方案的可靠方法包括：
+
+- 以多种方式呈现内容，例如通过文本转语音或视频；
+- 提供易于理解的内容，例如使用纯文本语言标准编写的文本；
+- 将注意力集中在重要内容上；
+- 最小化干扰，例如不必要的内容或广告；
+- 提供一致的网页布局和导航；
+- 结合熟悉的元素，例如未访问时为蓝色的下划线链接，访问后为紫色；
+- 将过程分解为逻辑的、必要的步骤，并提供进度指示器；
+- 使网站认证尽可能简单，而不会影响安全性；
+- 设计易于填写的表单，包括清晰的错误消息和简单的错误恢复机制。
+
+## WCAG 指南
+
+WCAG，即 Web 内容无障碍指南，包括几项改善认知无障碍的指南。这些指南由万维网联盟（W3C，互联网主要的国际标准组织）的 Web 无障碍倡议（WAI）发布。该组织还负责[无障碍富互联网应用（ARIA）](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Guides)指南。
+
+WCAG 的指导原则有四条：网站必须是可感知、可操作、可理解，并具有健壮性。为此，他们定义了 17 条具体的准则，其中有六条特别与认知无障碍相关。
+
+以下所有准则都不仅有助于认知障碍的人士。例如，能够延长应用程序对通过短信发送到移动设备的身份验证代码的过期时间，有助于以下情形：
+
+- 患有注意力或焦虑障碍的人。
+- 拥有较差的短期记忆或正在进行多任务处理的人。
+- 技术素养较低的人。
+- 网络信号较差的人。
+- 具有运动控制问题的人。
+
+## 适应性
+
+[准则 1.3](https://www.w3.org/WAI/WCAG21/Understanding/adaptable) 表明“内容应该是**可适应的**”。创建可以以不同方式呈现而不丢失信息或结构的内容。例如，提供{{glossary('responsive web design', '响应式')}}布局，采用单列移动设计。
+
+为了实现这一目标，所有信息，包括通过呈现传达的结构和关系，应以所有用户都能感知的形式提供。例如，可以通过叙述工具朗读信息。使你的内容能够被软件理解是确保它能够被替代呈现模式使用的一个好方法。
+
+## 时间
+
+为用户提供完成任务所需的时间非常重要。[准则 2.2](https://www.w3.org/WAI/WCAG21/Understanding/enough-time) 表明“为用户提供足够的**时间**用以阅读和使用内容”。
+
+**时间限制**是指在设定的时间后或定期发生的任何过程，例如在 30 分钟后注销或在 15 分钟内进行购买。认知障碍的人可能需要更多时间来阅读内容，或者执行诸如填写表单之类的功能。解决方案包括为用户提供足够的额外时间来完成任务，或完全消除时间限制。
+
+### 计时器
+
+调整时间要求的选项包括：
+
+- 允许用户关闭或调整时间，至少调整为原始限制的 10 倍才遇到限制。
+- 提醒用户并提供至少 20 秒的缓冲时间，以通过简单操作（例如按下空格键）将超时持续时间延长 10 倍。
+
+在内容上提供一个切换开关，允许用户启用更长的会话时间限制，或者根本没有会话时间限制。计时内容的示例包括表单、定时阅读练习和培训材料。如果时间限制超过 20 小时，则不需要提供特殊安排。
+
+### 移动、闪烁、滚动
+
+不要分散用户的注意力，特别是对于认知障碍的用户。
+
+如果移动、闪烁、滚动或自动更新的信息自动启动，持续时间超过五秒，并且与其他内容同时呈现，则用户必须能够暂停、停止、隐藏或控制它，除非它是必要功能。“必要”意味着如果移除移动、闪烁、滚动或自动更新的信息将从根本上改变内容和功能的含义，**且**信息和功能无法以符合规范的另一种方式实现。如果 gif 动画超过 5 秒，那么也包括这种 gif 图。
+
+考虑的其他时间标准包括：
+
+- 具有认知或语言限制的人可能需要更多时间阅读和理解。为了改善可用性，应删除任何时间限制。应避免定时内容，但对于非交互式同步媒体和实时事件有例外。
+- 注意力缺陷障碍的人应能够专注于内容而不受干扰。用户应能够推迟或抑制中断，除非涉及提醒人员有紧急情况。这通过使用户能够专注于内容的主要目的，为认知障碍的人提供了访问。通过提供请求内容更新而不是自动更新的方法，使用户能够推迟内容更新。此外，启用一种使非必要警报可选的方法。
+- 确保人们在重新验证已过期的会话后能够继续活动而不会丢失数据，例如保存问卷的状态。确保以这样的方式保存数据，以便用户在重新验证后可以修改数据。在重新验证之前，将数据编码为隐藏或加密的形式。
+- 提供关于可能导致数据丢失的不活动的警告。当使用超时时，告知人们会话超时并导致数据丢失的具体时间。唯一的例外是在没有采取任何操作的情况下保存数据超过 20 小时。
+
+## 导航
+
+[准则 2.4](https://www.w3.org/WAI/WCAG21/Understanding/navigable) 表明“提供帮助用户导航、查找内容并确定其位置的方法”，并提供了 10 条指南来确保网站可导航且内容易于查找：
+
+### 包含 `<title>`
+
+确保为文档包含 {{HTMLElement('title')}}，因为标题提供了屏幕主要内容的快速和易于参考的描述。具有认知障碍、有限的短期记忆和阅读障碍的人都能通过这种方式来确定内容的目的。
+
+### 标题和标签
+
+包括清晰和描述性的标题，以便用户能够轻松找到信息并理解不同内容部分之间的关系。描述性标签帮助用户识别内容中的特定组件。阅读速度较慢的人和短期记忆有限的人受益于部分标题可以预测每个部分包含的内容。
+
+### 章节标题
+
+标题有助于定义页面内容的整体组织。它们有助于通过页面内容部分进行导航，并提供了一种帮助理解的机制。标题的示例包括内容的章节、部分和子部分等。
+
+与其他方法（如边框、空白、水平线等）来识别页面内容部分相比，标题是更明显的导航辅助工具。
+
+### 多种查找内容的方式
+
+不同的用户喜欢使用不同的方法查找信息，因此提供多种方式让用户在你的网站上找到内容非常重要。
+
+提供多种导航网站的方式可以帮助人们更快地找到信息。一些用户可能更喜欢使用目录、站点地图或搜索功能，而不是阅读和浏览多个页面来查找所需内容。其他人可能更喜欢按顺序探索网站，逐页移动，以更好地理解网站的布局、内容和概念。
+
+### 能够跳过内容块
+
+提供一种机制，比如[跳转链接](/zh-CN/docs/Web/HTML/Element/a#跳转链接)，以跳过在多个网页上重复出现的内容块。
+
+### 焦点顺序合理
+
+交互元素的焦点顺序应该有条理。为了实现这一点，DOM 的顺序应该与视觉顺序相匹配，而视觉顺序又应该与使用键盘导航时的 tab 顺序相匹配。如果 tab 键的顺序跳来跳去，特别是以一种与使用键盘导航时的视觉顺序不匹配的方式，用户可能会感到迷失方向。
+
+### 焦点元素应当明显可见
+
+当用户使用键盘导航时，界面应当清楚地显示当前具有焦点的元素。除非你希望更加明显地显示焦点，否则不要修改或移除浏览器的默认 [`:focus`](/zh-CN/docs/Web/CSS/:focus) 样式。
+
+### 链接文本传达含义
+
+链接的文本应该清晰而简洁地传达用户如果选择激活它们将导航到的位置。糟糕的链接文本可能会让用户对其目的或目的地感到困惑。
+
+某些辅助技术允许用户通过页面上存在的所有链接列表进行导航。链接将会从其周围的非链接内容的上下文中移除，这使得易于理解的链接文本变得更加重要。一个糟糕的体验示例是一个充满链接的页面，其文本读作“点击这里”。如果没有指明“这里”将带你去哪里，那么链接的目的就不明确。
+
+对于屏幕阅读器来说，关键的是链接文本描述了每个链接的目的。如果你已为屏幕阅读器添加了链接内容，并且该内容对于有视觉障碍的读者来说过于冗长且可能令人困惑，请考虑将添加的文本裁剪以从视觉上隐藏它。
+
+### 当前位置可用
+
+用户应该能够在站点或应用程序中确定自己的位置。对于那些可能在遵循一系列长导航步骤时变得困惑的注意力短暂的人来说，这一点尤为重要和有帮助。
+
+所有用户都受益于关于自己在站点的层次结构中的位置的信息，特别是对于内容或子部分众多的站点或应用程序而言。[面包屑导航](/zh-CN/docs/Glossary/Breadcrumb)、[站点地图](/zh-CN/docs/Glossary/Site_map)以及将当前页面在导航中标识为“当前”都是有助于传达当前位置的技术。
+
+### 可读性
+
+[准则 3.1](https://www.w3.org/WAI/WCAG21/Understanding/readable) 表明“使文本内容可读，可理解”。对于一些用户来说，从上下文推断单词或短语的含义可能有困难，特别是当单词或短语以不寻常的方式使用，或者赋予了专门的含义时。
+
+对于这些用户，阅读和理解的能力可能取决于特定定义的可用性，或者首字母缩写词或缩写词的扩展形式。一些用户可能很难识别书面文本，但当文本被朗读出来时，或者关键流程和思想以视觉形式呈现时，他们就能够理解极其复杂和精细的文档。
+
+### 声明页面的语言以及不属于主要语言的任何内容
+
+每个页面的语言必须通过在 {{HTMLElement('html')}} 元素上使用 [`lang`](/zh-CN/docs/Web/HTML/Global_attributes/lang) 属性来声明。对于与文档的主要语言不同的文本，再次包含 `lang` 属性。
+
+适当使用 `lang` 允许一些屏幕阅读器在将其转换为合成语音时正确地宣读文本。它还有助于使用文本转语音软件的人们。
+
+### 定义不寻常的单词和词语用法
+
+一些残疾使得理解非字面的词语用法，如习语、口语和专业术语变得困难。非母语人士可能也会在这些术语上遇到困难。如果一个单词或短语具有独特的含义，在文档中内联提供定义或链接，或者在术语表中提供。如果一个单词或短语被用来表示多种意思，请定义每个用法。
+
+### 定义缩写词
+
+缩写词对于以下人群可能会造成困惑：
+
+- 难以解码单词的人。
+- 记忆受限的人。
+- 难以利用上下文来帮助理解的人。
+- 依赖屏幕放大器（通常会减少上下文线索）的人。
+
+在首次使用缩写词时提供其扩展形式，然后将缩写词放置在 {{HTMLElement('abbr')}} 元素内。如果缩写词没有扩展形式，或者是一个不属于文档主要语言（比如拉丁语）的单词的缩写形式，请解释其含义。此外，考虑使用 [ruby 文本](/zh-CN/docs/Web/HTML/Element/ruby)来表示首字母缩写词（首字母缩写词的发音）。
+
+### 阅读水平
+
+内容应尽可能清晰明了地书写。一个很好的准则是让内容足够简单，以至于第一次阅读就能理解。实现这一目标的方法包括：
+
+- 使用简短、简单的词语。
+- 编写简短的句子。
+- 使用现在时的主动语态。
+- 使用正确的语法和拼写。
+
+为了帮助认知障碍的用户，可以提供一个阅读水平较低的文本摘要（有时称为 TL;DR，即“太长；不读”）。另一种方法是提供附带的视觉辅助，以帮助解释观念、事件和过程。
+
+有一些工具可以评估你内容的水平。例如，本文的平均等级约为 11 级。这意味着它应该很容易被一个 16 到 17 岁的以英语为母语的人理解。一些工具甚至可以提供简化建议。
+
+### 发音
+
+有多种技巧可以帮助人们学习如何发音单词：
+
+- 在单词之后立即提供发音。
+- 链接到发音列表。
+- 提供带有发音的词汇表。
+- 使用 {{HTMLElement('ruby')}} 元素来说明一个词的发音。
+
+提供关于如何发音单词的指导有助于许多不同类型的人，包括那些喜欢大声阅读的人、非母语人士以及可能不熟悉一个术语在上下文中的含义的人。
+
+另一个解决方案是使用字形或发音符号来说明发音。但是，如果使用这种技术，必须有一种机制来关闭它。此外，最好提供链接到正在使用的标记指南，因为它们的含义可能不明显。
+
+## 可预测性
+
+WCAG [准则 3.2](https://www.w3.org/WAI/WCAG21/Understanding/predictable) 表明“让网页以可预见的方式呈现和操作”。这是良好用户体验设计的原则。对于认知困难的人来说，一致性尤其重要。这包括页面布局的一致性以及可预测的交互组件。
+
+### 使用激活而不是焦点来改变上下文
+
+改变上下文应该是有意的。因此，当一个 UI 特性获得[焦点](/zh-CN/docs/Web/API/HTMLElement/focus)时，它不应该触发更多面向用户的操作。相反，用户应该需要“激活”一个特性来触发变化。
+
+### 根据主动请求改变设置
+
+表单控件操作和数据输入应该导致可预测的行为。上下文的变化可能会使认知障碍的用户感到困惑，因此只有在明确表示这种变化将会响应用户的操作时才应该发生变化。
+
+更改状态应该需要有意的用户操作。例如，选中复选框、输入数据或更改选择选项。还要确保提供一个提交按钮来启动上下文的更改，并在更改之前描述将发生什么。
+
+### 保持网站中的导航一致性
+
+保持页面之间的导航顺序一致。例如，如果你在多个页面上都有一个导航栏，请确保导航在整个网站中是一致的，具有相同的链接并处于相同的位置。这不仅适用于导航：每次出现时，将所有重复的组件按相同的相对顺序呈现。
+
+### 提供一致的标签
+
+每次使用相同功能时，它们的标签应该相似。一致的按钮标签、图标的替代文本以及相似交互的图标，即使在你网站的不同部分，也能帮助到你的所有用户。
+
+### 保持一致性和可预测性，并使用规范
+
+虽然未标记的图标并不是传达信息的最有效方法，但保持图标的使用（以及如果有标签的话，它们的标签文本）一致有助于人们理解图标代表的内容。同样，不要更改默认设置，如浏览器的返回按钮。如果你需要重定向用户，请在此之前让用户知道。
+
+## 输入辅助
+
+[准则 3.3](https://www.w3.org/WAI/WCAG21/Understanding/input-assistance) 有助于确保准确的数据输入，表明“帮助用户避免和纠正错误”。虽然我们都会犯错误，但有些人更容易犯错，更不容易注意到错误，或者在犯错后更难纠正错误。
+
+输入辅助准则旨在降低用户（尤其是那些有残疾的用户）犯错的可能性，以及如果他们犯错，提升他们看到和理解错误消息，并成功纠正任何错误的可能性。
+
+### 传达自动错误检测
+
+用户需要被告知错误的信息以及出了什么问题。如果有客户端错误检测，请遵循以下指南，使错误信息尽可能有效地传达给用户：
+
+- 必须在文本中描述错误。
+- 确保错误消息尽可能具体。
+- 提供文本以识别未完成的必填字段和无效值的文本描述。
+- 如果错误阻止了表单提交，请聚焦在错误上。如果存在多个错误，请提供摘要，每个错误都链接到相关的输入。
+- 除了使用图标、图片、颜色等，还要包含文本。有些人难以理解图标和其他视觉提示的含义。
+- 其他人可能难以理解你的错误消息的文本版本。对于这些人，还要提供图标和颜色等内容。
+- 还要在成功提交表单时提供反馈。
+
+### 提供用户输入说明
+
+在开始表单时，使用文本说明如何操作表单。在用户需要输入信息时，使用 {{HTMLElement('label')}}、{{HTMLElement('fieldset')}} 和 {{HTMLElement('legend')}} 元素来包含标签或说明。
+
+标签应具有描述性，并放置在与其相关的输入附近。当需要特定格式的输入时，请提供以正确方式格式化的示例。此外，考虑执行服务器端验证以帮助格式化输入数据，以便更轻松地输入。
+
+如果表单控件是必填的，请通过视觉和[代码](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-required)指示它。如果表单控件更改了上下文，请描述将会发生的情况，以便用户在引起上下文更改之前能够理解。
+
+### 错误建议
+
+如果自动检测到输入错误并且已知纠正建议（除非这样做会危及内容的安全性或目的），请向用户提供建议的输入。
+
+### 错误预防
+
+对于可能导致法律、金融或其他重大后果的提交，请确保提交可以被审查、确认和/或是可逆转的。
+
+在提交之前，应检查用户输入的数据是否存在错误，并为用户提供纠正错误的机会。用户应能够在最终提交之前审核、确认和更正信息。此外，确保在提交按钮之外还包含确认复选框。
+
+如果提交导致法律或金融交易发生，请为用户提供一个规定的时间，用户可以在此期限内修改或取消请求。
+
+### 提供帮助
+
+应提供上下文敏感的帮助。如果表单需要文本输入，请提供描述目的和必要输入的表单说明。包括拼写检查和长篇文本输入的建议，以及链接到帮助和支持材料。如果期望输入具有特定数据格式，请提供示例。
+
+## 备注
+
+以上是良好的设计实践。它们将使所有人受益。
+
+- 许多认知障碍者也有身体残障。网站必须符合 W3C 的 [Web 内容无障碍指南](https://www.w3.org/WAI/standards-guidelines/wcag/)。
+- W3C [认知和学习障碍无障碍特别任务组](https://www.w3.org/WAI/GL/task-forces/coga/)为认知障碍者制定 web 无障碍指南。
+- WebAIM 提供了[认知信息页面](https://webaim.org/articles/cognitive/)，包括相关信息和资源。
+- 根据美国疾病控制与预防中心的估计，截至 2018 年，每 4 名美国公民中就有 1 名残障人士，其中，[年轻人中最常见的是认知障碍](https://archive.cdc.gov/www_cdc_gov/media/releases/2018/p0816-disability.html)。
+- 在美国，“智力残疾”曾被称为“智力低下”。在英国，“智力残疾”通常被称为“学习障碍”或“学习困难”。
+
+## 参见
+
+- [无障碍指南](https://extensionworkshop.com/documentation/develop/build-an-accessible-extension/)
+- [什么是无障碍](/zh-CN/docs/Learn/Accessibility/What_is_accessibility)
+- [癫痫症的无障碍](/zh-CN/docs/Web/Accessibility/Seizure_disorders)
+- [理解 WCAG 指南](/zh-CN/docs/Web/Accessibility/Understanding_WCAG)
+- [无障碍概述](/zh-CN/docs/Learn/Accessibility)
+- [Web 内容无障碍指南](https://www.w3.org/WAI/standards-guidelines/wcag/)，包括[认知无障碍指南](#wcag_指南)
+- [W3C 认知和学习障碍无障碍特别任务组](https://www.w3.org/WAI/GL/task-forces/coga/)
+- [WebAIM 认知信息](https://webaim.org/articles/cognitive/)
+- [CDC 的残障信息](https://www.cdc.gov/ncbddd/disabilityandhealth/)
diff --git a/files/zh-cn/web/accessibility/information_for_web_authors/index.md b/files/zh-cn/web/accessibility/information_for_web_authors/index.md
new file mode 100644
index 00000000000000..003cd3cb470630
--- /dev/null
+++ b/files/zh-cn/web/accessibility/information_for_web_authors/index.md
@@ -0,0 +1,47 @@
+---
+title: Web 作者的无障碍信息
+slug: Web/Accessibility/Information_for_Web_authors
+l10n:
+ sourceCommit: 6b8bb90a20d7fe2628d17a81cfd42d10747e8dbb
+---
+
+{{AccessibilitySidebar}}
+
+## 指南和规定
+
+- [<abbr>ARIA</abbr> 作者实践指南 (<abbr>APG</abbr>)](https://www.w3.org/WAI/ARIA/apg/)
+ - : 由 Accessible Rich Internet Application (<abbr>ARIA</abbr>) 规范定义的无障碍语义的指南，用于创建无障碍的 Web 体验。描述如何将无障碍语义应用于常见设计模式和小部件，提供设计模式和功能示例。
+- [Web 内容无障碍性指南 (<abbr>WCAG</abbr>)](https://www.w3.org/WAI/standards-guidelines/wcag/)
+ - : 来自 W3C _Web Accessibility Initiative (<abbr>WAI</abbr>)_ 的另一组重要指南。欧盟计划基于这些指南制定即将推出的无障碍性规定。这些指南在 [<abbr>WAI</abbr> 兴趣组讨论列表](https://www.w3.org/WAI/about/groups/waiig/#mailinglist)上进行了讨论。
+- [本站点上的 ARIA](/zh-CN/docs/Web/Accessibility/ARIA)
+ - : <abbr>MDN</abbr> 提供的关于所有 [ARIA 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles)和 [ARIA 属性](/zh-CN/docs/Web/Accessibility/ARIA/Attributes)的指南，包括最佳实践、关联角色和属性以及示例。
+
+## 如何操作
+
+- [前端开发人员的无障碍性](https://accessibility.digital.gov/front-end/getting-started/)
+ - : 美国总务署技术转型服务提供的简要指南，涵盖了几个无障碍性主题，并提供了指南视频和相关 WCAG 参考资料的链接。
+- [无障碍网页编写](https://www.ibm.com/able/requirements/requirements/)
+ - : IBM 公开了他们需要满足的无障碍性要求，并提供了交互式的界面。
+
+## 自动化检查与修复
+
+使用工具快速检查浏览器中的常见错误：
+
+- [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/)
+- [aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=zh-CN)
+- [Lighthouse Accessibility Audit](https://developer.chrome.com/docs/lighthouse/overview/)
+- [Accessibility Insights](https://accessibilityinsights.io/)
+- [<abbr>WAVE</abbr>](https://wave.webaim.org/extension/)
+
+将工具集成到构建过程中，以编程方式添加无障碍性测试，从而在开发 Web 应用程序时捕捉错误：
+
+- [axe-core](https://github.com/dequelabs/axe-core)
+- [jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)
+- [Lighthouse Audits](https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md#using-programmatically)
+- [AccessLint.js](https://github.com/accesslint/accesslint.js/tree/master)
+
+用于在 GitHub 拉取请求中查找无障碍性问题的持续集成工具：
+
+- [AccessLint](https://www.accesslint.com/)
+
+尽管最好使用真实用户测试你的 Web 应用程序，但你可以模拟色盲、低视力、低对比度和缩放。你应该始终在没有鼠标和触摸屏的情况下测试你的网站以测试键盘导航。你还可以尝试使用语音命令访问你的网站。尝试禁用鼠标并使用浏览器扩展，如 [Web Disability Simulator](https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)。
diff --git a/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md
index 17dc19cf804473..28e57ce205749e 100644
--- a/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md
+++ b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md
@@ -1,6 +1,8 @@
---
title: 移动无障碍清单
slug: Web/Accessibility/Mobile_accessibility_checklist
+l10n:
+ sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
---
{{AccessibilitySidebar}}
@@ -9,62 +11,71 @@ slug: Web/Accessibility/Mobile_accessibility_checklist
## 颜色
-- 颜色对比度**必须**遵循 [WCAG 2.0](http://www.w3.org/TR/WCAG/) AA 等级需求：
+- 颜色对比度必须遵循 [WCAG 2.1 AA 等级需求](https://www.w3.org/TR/WCAG/#contrast-minimum)：
- 普通文本的对比率为 4.5:1（小于 18 磅或黑体 14 磅）
- - 大文本对比率为 3:1（大于等于 18 磅或黑体 14 磅）【译者注：字体单位为 point、PT】
+ - 大文本对比率为 3:1（大于等于 18 磅或黑体 14 磅）
-- 颜色传递的信息，**必须**也通过其他方式标明（例如，链接文本中的下划线）
-
-> **备注：** Jon Snook 开发的 [颜色对比度检查器 - Colour Contrast Checker](http://snook.ca/technical/colour_contrast/colour.html) 可以轻松检查前景和背景的对比度。同样，[Tanaguru Contrast-Finder](http://contrast-finder.tanaguru.com/) 这个工具能做类似的检查，并且会推荐你考虑使用类似的更好的对比度
+- 颜色传递的信息，必须也通过其他方式标明（例如，链接文本中的下划线）
## 可视化
-- **不**使用用于隐藏内容的技巧处理视觉效果，例如，不透明度为零，z-index 规则，离屏位置。
-- 当前可见的屏幕之外的内容，**必须**是不可见的。（特别是单一页面应用中包含多个卡片选项）:
+- 内容隐藏技术（如零不透明度、z-index 顺序和离屏位置）不得仅用于处理可见性。
+- 当前可见的屏幕之外的内容，必须*确实*是不可见的（特别是单一页面应用中的多个*卡片*）：
- - **使用** `hidden` 特性或 `visibility` 或 `display` 样式属性。
- - 除非不可避免，**不应该**使用 `aria-hidden` 特性。
+ - 使用 `hidden` 特性或 `visibility`、`display` 样式属性。
+ - 除非不可避免，不应该使用 `aria-hidden` 特性。
## 焦点
-- 所有可激活元素**必须**可被聚焦：
+- 所有可激活元素必须可被聚焦：
- 标准控件，如链接、按钮、表单域默认可被聚焦。
- - 非标准控件**必须**分配给它们一个适当的 [ARIA Role](http://www.w3.org/TR/wai-aria/roles) 如 `button`，`link` 或者 `checkbox`。
+ - 非标准控件必须为它们分配一个适当的 [ARIA 角色](http://www.w3.org/TR/wai-aria/roles)，如 `button`、`link` 或 `checkbox`。
-- 焦点应该是有逻辑顺序，且方式一致。
+- 焦点应该有逻辑顺序，且方式一致。
## 文本等效
-- 应用中，每个展示的非文本元素都**必须**提供等效文本。
+- 应用中，每个展示的非文本元素都必须提供等效文本。
- - 恰当的位置使用 _alt_ 和 _title_（请参考 Steve Faulkner 的帖子 - 关于 [Using the HTML title attribute](http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/) 。）
- - 如果上面的特性不适用，使用恰当的[ARIA Properties](http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header)，比如 `aria-label`, `aria-labelledby`, 或 `aria-describedby`.
+ - 恰当的位置使用 _alt_ 和 _title_（请参考 Steve Faulkner 关于[使用 HTML title 特性](https://www.tpgi.com/using-the-html-title-attribute-updated/) 的帖子。）
+ - 如果上面的特性不适用，使用恰当的 [ARIA 状态与属性](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def)，比如 `aria-label`、`aria-labelledby` 或 `aria-describedby`。
-- **必须**避免文本图像。
-- 所有的表单控件**必须**有标签 ({{ htmlelement("label") }} elements) ，以便于读屏用户的使用。
+- 必须避免使用文本图像。
+- 所有带有可见文本（或文本图片）作为标签的用户界面组件必须在组件的编程[名称](https://www.w3.org/TR/WCAG21/#dfn-name)中提供相同的文本。见 [WCAG 2.1：名称中的标签](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html)。
+- 所有的表单控件必须有标签（{{ htmlelement("label") }} 元素），以便于屏幕阅读器用户的使用。
## 状态处理
-- 标准控件，如单选按钮和复选是通过操作系统处理的，而其他自定义控件的状态改变需要通过 [ARIA States](http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header) ，如 `aria-checked`, `aria-disabled`, `aria-selected`, `aria-expanded`,和 `aria-pressed`.
+- 单选按钮和复选框等标准控件是由操作系统处理的，而其他自定义控件的状态改变需要通过 [ARIA 状态](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def)，如 `aria-checked`、`aria-disabled`、`aria-selected`、`aria-expanded` 和 `aria-pressed`。
+
+## 方向
+
+- 除非必要，否则不应将内容限制在单一方向，如纵向或横向。见 [WCAG 2.1：方向](https://www.w3.org/WAI/WCAG21/Understanding/orientation.html)
-## General Guidelines 常规指南
+ - 例如，钢琴应用程序和银行支票都需要一定的方向。
-- 应用必须提供标题。【译者注：此处的标题为 title】
-- 标题**不能**破坏层次结构。【译者注：此处的标题为 headings】
+## 通用指南
+
+- 应用必须提供标题（title）。
+- 标题（heading）不能破坏层次结构。
```html
- <h1>Top level heading</h1>
- <h2>Secondary heading</h2>
- <h2>Another secondary heading</h2>
- <h3>Low level heading</h3>
+ <h1>一级标题</h1>
+ <h2>二级标题</h2>
+ <h2>另一个二级标题</h2>
+ <h3>三级标题</h3>
```
-- 应使用 [ARIA Landmark Roles](http://www.w3.org/TR/wai-aria/roles#landmark_roles_header) 描述应用或文档的结构，如 `banner`, `complementary`, `contentinfo`, `main`, `navigation`, `search`.
-- 触摸事件处理器，只能通过 `touchend` 事件触发。
-- 触摸目标必须足够大，方便用户交互 (参考 [BBC Mobile Accessibility Guidelines](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size) 关于触摸目标尺寸的指南)
+- 应使用 [ARIA 地标角色](https://www.washington.edu/accessibility/websites/regions/)描述应用或文档的结构，如 `banner`、`complementary`、`contentinfo`、`main`、`navigation` 和 `search`。
+- 对于触摸事件，以下至少有一项必须为真（[WCAG 2.1：指针取消](https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html)）：
+
+ - 不应使用按下事件来触发任何操作
+ - 操作在释放事件上触发，并提供中止操作的选项，在其完成之前或提供撤消操作的选项
+ - 松开事件将撤消在按下事件上触发的任何操作
+ - 在按下事件上触发操作是必要的。例如，玩游戏或钢琴应用程序。
-> **备注：** [Tanaguru's automated accessibility testing service](http://www.tanaguru.com/) 提供一个有效的方法，排查网页上的，或者是可安装的 Web 应用中无障碍问题（如，Firefox OS）。[tanaguru.org](http://tanaguru.org/)，你可以参与该项目或者发现更多技术实现。
+- 触摸目标必须足够大，方便用户交互（参考 [BBC 移动端无障碍指南](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size)关于触摸目标尺寸的指南）
-> **备注：** The 该文档的最初版本 - [original version of this document](http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html) 是由 [Yura Zenevich](http://yzen.github.io/) 完成。
+> **备注：** 该文档的[最初版本](https://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html)由 [Yura Zenevich](https://yzen.github.io/) 完成。
diff --git a/files/zh-cn/web/accessibility/understanding_colors_and_luminance/index.md b/files/zh-cn/web/accessibility/understanding_colors_and_luminance/index.md
new file mode 100644
index 00000000000000..18f975946e935b
--- /dev/null
+++ b/files/zh-cn/web/accessibility/understanding_colors_and_luminance/index.md
@@ -0,0 +1,323 @@
+---
+title: Web 无障碍：理解颜色和亮度
+slug: Web/Accessibility/Understanding_Colors_and_Luminance
+l10n:
+ sourceCommit: 312b03847b403e68cdca43f974f4b87b69e5bf34
+---
+
+{{AccessibilitySidebar}}
+
+对于所有视力正常的用户来说，理解颜色、亮度和饱和度对设计和可读性都很重要；对于视力减退、色盲以及特定神经、认知和其他障碍的人来说，这些因素也是必不可少的。
+
+无障碍性指南定义了适用于视力减退用户的[颜色对比度](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)以及旨在帮助色盲用户的准则。了解颜色还对预防患有前庭障碍或其他神经障碍的人产生[癫痫和其他身体反应](/zh-CN/docs/Web/Accessibility/Seizure_disorders)至关重要。
+
+## 概述
+
+颜色的选择和使用是无障碍性的重要组成部分。表面上，这个主题似乎很简单，但它实际上是一个复杂的主题，因为颜色感知不仅涉及到眼睛的生理结构和人脑的处理，还涉及到从计算机屏幕发出的光。
+
+### 环境和感知
+
+环境很重要。在光线充足的房间里感知颜色会与在黑暗的房间里在同一台电脑屏幕上感知相同颜色时有所不同。在无障碍性方面，某些颜色组合的使用比其他颜色组合更具影响力。字体大小、[字体样式](https://www.nngroup.com/articles/glanceable-fonts/)（有些字体非常细或花哨，本身就会引起无障碍性问题）、背景颜色、文字周围背景空间的大小，甚至像素密度等都会影响屏幕上颜色的传递方式。
+
+观看者与屏幕的距离、周围的环境背景、眼睛的健康状况等都会影响观看者对色彩的接收。观看者在眼睛接收到颜色后如何感知颜色是另一个问题，这可能受整体健康状况的影响。幸运的是，有[媒体查询](/zh-CN/docs/Web/CSS/@media)，使开发人员可以根据用户的偏好（包括[对比度](/zh-CN/docs/Web/CSS/@media/prefers-contrast)和[颜色方案](/zh-CN/docs/Web/CSS/@media/prefers-color-scheme)的偏好）提供样式。
+
+当支持时，[环境光传感器](/zh-CN/docs/Web/API/AmbientLightSensor)接口会返回托管设备周围环境光的当前光级或照度，使网页能够意识到光强度的任何变化，从而相应地调整文本。此外，上述媒体查询使开发人员能够根据用户偏好提供替代用户体验，当用户偏好指示了首选对比度水平时，自动调整水平取决于用户的位置以及他们使用的屏幕类型。
+
+### 亮度和感知
+
+颜色、对比度和亮度是创建具有颜色的无障碍的 Web 内容的最核心和关键概念。然而，亮度尤为重要，因为了解它是什么以及如何使用它使色盲人士以及能够感知颜色的人士能够访问。亮度对比使色盲者能够区分明暗。
+
+在建立对比度之前必须确定亮度。在谈论颜色对比度时，W3C 的公式包含了亮度，而不仅仅是颜色（“色调”）本身。
+
+### 术语
+
+术语可能会令人困惑，因为不同的术语通常描述相同的事物。正确理解“亮度”和“饱和度”尤为重要。例如，在某些领域，“饱和度”被称为“色度”。在其他领域，“色度”和“饱和度”是两个不同的概念。HSL 颜色空间中的“L”有时被称为“亮度（Luminosity）”，而其他时候被称为“亮度（Lightness）”。即使是似乎简单的事物，如命名常见颜色，也可能存在争议。例如，“深红色”可能被一些人描述为 `#990000`，而被其他人描述为 `#DC143C`。在本文中，我们将使用 W3C 在 [CSS 颜色模块第 4 版](https://www.w3.org/TR/css-color-4/)中定义的术语。
+
+在处理颜色时，了解你正在使用的“颜色空间”是很重要的，因为不同的颜色空间映射到不同的计量系统。
+
+在彩色打印中，你的打印机可能有青色、品红色、黄色和黑色（CMYK）墨盒。CMYK 是一种减法模型，其中四种油墨*去除*了特定波长的光，仅反射与其关联的窄范围。RGB 是一种加法颜色模型，它增加了红色、绿色和蓝色光的不同比例。
+
+目前，{{glossary("RGB", "RGB 颜色空间")}}主导了 Web 开发人员所使用的空间。虽然 HEX、RGB 和 HSL 颜色空间的表示方式不同，但浏览器会自动在这些颜色表示法之间进行转换。[CSS 颜色模块](/zh-CN/docs/Web/CSS/CSS_colors)提供了额外的颜色空间。但由于当前 RGB 颜色空间在测量颜色输出方面的主导地位，本文中的大多数计算都被假定为在 RGB 颜色空间中进行，特别是在 sRGB 颜色空间中。
+
+## sRGB 颜色空间
+
+颜色有很多定义方式，如 [`<color>` 数据类型](/zh-CN/docs/Web/CSS/color_value)中所示，包括 RGB、RGB 十进制、RGB 百分比、HSL、HWB、LCH、LAB 和 CMYK 等。
+
+对于数字问题，许多技术历来都存在于 RGB 颜色空间中。RGB 颜色模型扩展到包括“alpha”（RGBA），以允许指定颜色的不透明度。测量颜色的其他方法涉及使用其他颜色空间进行测量，现代显示器和浏览器中也支持这些方法。但在 RGB 颜色空间中进行的颜色测量仍占主导地位，包括在视频制作中。
+
+[OpenGL](https://zh.wikipedia.org/wiki/OpenGL) 和 [Direct3D](https://zh.wikipedia.org/wiki/Direct3D) 等技术都支持 sRGB 伽马曲线，尽管一些 OpenGL 的文章提到使用 RGBA 而不是 sRGB。WebGL 通常采用 RGBA 格式；在[“使用颜色清除”](/zh-CN/docs/Web/API/WebGL_API/By_example/Clearing_with_colors)的示例中可以看到它是如何使用的。
+
+### CSS 颜色值
+
+重要的是要知道，即使在一个{{glossary("color space", "颜色空间")}}内，比如 {{glossary("RGB")}} 颜色空间，也会有变化。例如，RGB 颜色空间的变体包括 **RGB**、**sRGB**、**Adobe RGB**、**Adobe Wide Gamut RGB** 和 **RGBA** 等。
+
+这些都是用于定义颜色的 CSS 表示法的示例。以下是每种表示法的示例颜色，都是完全不透明的洋红色：
+
+```css
+/* 命名颜色 */
+color: magenta;
+
+/* 使用百分比值的 sRGB 值 */
+color: rgb(100% 0% 100%);
+color: rgb(100% 0% 100% / 100%);
+
+/* 通过 sRGB 数值 */
+color: rgb(255 0 255);
+color: rgb(255 0 255 / 1);
+
+/* 传统的 rgb 和 rgba 表示法 */
+color: rgb(100%, 0%, 100%);
+color: rgba(255, 0, 255, 1);
+
+/* 通过十六进制的 sRGB 值 */
+color: #f0f; /* #rgb，#rrggbb 的简写 */
+color: #ff00ff; /* #rrggbb */
+color: #f0ff; /* #rgba */
+color: #ff00ffff; /* #rrggbbaa */
+
+/* 通过 sRGB 值的 HSL 表示 */
+color: hsl(300 100% 50%);
+color: hsl(300deg 100% 50% / 100%);
+
+/* 通过 sRGB 值的 HWB 表示 */
+color: hwb(300deg 0% 0%);
+color: hwb(300 0% 0% / 1);
+
+/* 通过 sRGB 值的 LAB 表示 */
+color: lab(60 93.56 -60.5);
+color: lab(60 93.56 -60.5 / 1);
+
+/* CIELAB 颜色空间中的表示 */
+oklch(0.7 0.32 328.37);
+oklch(0.7 0.32 328.37 / 1);
+
+/* XYZ 颜色空间中的 color() 函数 */
+color(xyz-d65 0.59 0.28 0.96);
+color(xyz-d65 0.59 0.28 0.96 / 1);
+```
+
+第一个示例使用了其中一个已定义的[命名颜色](/zh-CN/docs/Web/CSS/named-color)。
+
+我们可以直接将 sRGB 值设置为百分比，其中 0% 表示不使用该颜色分量（黑色），100% 表示该颜色分量的完整值。这些值的顺序是红色、绿色和蓝色。我们还可以通过从 0 到 255 的数字直接设置 sRGB 值。
+
+接下来展示的是十六进制颜色值。十六进制是一种以 16 为基数的数字系统，其中 0-255 的整数用两位数表示，范围从 0 到 15，其中 0-9 使用数字本身，a-f 表示 10-15。因此，`ff` = `255`，`00` = `0`，`d5` = `200`。“#”符号在颜色前表示值为十六进制。
+
+如果所有值都是成对的相同数字，则可以用浏览器复制的个位数来表示该值。因此，`f00` 与 `ff0000` 相同。如果存在第四组数字，该值是 RGBA 中的 A，表示透明度。较高的值意味着颜色更不透明，因此透明度越低。在上面的示例中，alpha 值是 `f`、`ff`、`1` 和 `100%`（表示完全不透明）。
+
+示例还显示了 [`rgb()` 和 `rgba()`](/zh-CN/docs/Web/CSS/color_value/rgb#示例) 的传统语法。颜色函数的传统语法是逗号分隔的，当包含 alpha 通道时会有一个单独的函数。新的颜色函数只有一种语法，值之间用空格分隔（而不是逗号分隔），如果存在 alpha 通道，则在斜杠之前。现代语法允许混合数字和百分比，并支持 `none` 关键字；逗号分隔的传统语法不支持这样做。
+
+接下来的示例显示了“HSL”，代表*色相*（Hue）、_饱和度_（Saturation）和*亮度*（Lightness）。对许多人来说，HSL 颜色值比 RGB 值更直观。由设置产生的颜色仍然处于 sRGB 颜色空间，但 [`hsl()`](/zh-CN/docs/Web/CSS/color_value/hsl) 对许多人来说是一种直观的语法。色调调整为角度，可以使用旋钮或圆形控件轻松调整色调。请注意，HSL 颜色包含*亮度*（lightness），而不是*亮度*（luminance），这是一个重要的考虑因素。
+
+接下来的示例显示了“HWB”，代表*色相*（Hue）、_白度_（Whiteness）和*黑度*（Blackness）。使用 hsl() 和 [`hwb()`](/zh-CN/docs/Web/CSS/color_value/hwb)，第一个值可以是 [`<number>`](/zh-CN/docs/Web/CSS/number) 或 [`<angle>`](/zh-CN/docs/Web/CSS/angle) 值。当无单位时，该值被解释为 `deg` 度。
+
+还有几种其他颜色函数和颜色空间。最后三个示例演示了使用 [`lab()`](/zh-CN/docs/Web/CSS/color_value/lab)、[`oklch()`](/zh-CN/docs/Web/CSS/color_value/oklch) 和 [`color()`](/zh-CN/docs/Web/CSS/color_value/color) 颜色函数表示品红。
+
+### 转换
+
+正如我们所见，同一颜色空间中的一种颜色可以用许多方式来表示。观察如何使用 RGB 颜色空间来描述“品红”色，你会发现同一种颜色可以用简写、三位数字十六进制数表示，该数字转换为六位数字十六进制数，也转换为相同的 RGB 值，或者作为百分比表示的 RGBA 值。
+
+RGB 是面向硬件的，反映了 CRT 的使用。许多开发人员和设计师更喜欢 [`hsl()`](/zh-CN/docs/Web/CSS/color_value/hsl) 记法的直观性。从 RGB 转换为 HSL 并不是一个简单的方程。幸运的是，浏览器会自动进行转换，并且在浏览器开发者工具中单击颜色可以提供转换功能。
+
+除了开发者工具外，许多工具可以为你将 RGB 转换为 HSL，并提供 RGB 十六进制和 CSS 函数语法。一个很好的为你转换颜色的工具示例是 Tom Jewett 的“[迷你颜色选择器](https://colortutorial.design/microColorsC.html)”，该工具提供了 HSL、RGB 和 Hex 选项，用于在浏览器中检查对比度。请注意，开发人员工具颜色选择器和此工具都提供 WCAG [颜色对比度值](https://webaim.org/resources/contrastchecker/)。
+
+
+
+如前所述，[CSS 颜色模块](/zh-CN/docs/Web/CSS/CSS_colors)包括添加额外的颜色空间，包括 [`lch()`](/zh-CN/docs/Web/CSS/color_value/lch) 和 [`oklch()`](/zh-CN/docs/Web/CSS/color_value/oklch) 函数颜色记法以及 [`lab()`](/zh-CN/docs/Web/CSS/color_value/lab) 和 [`oklab()`](/zh-CN/docs/Web/CSS/color_value/oklab) 颜色坐标系统，可以指定任何可见颜色。尽管如此，由于其普及性，sRGB 仍然是默认和首选的无障碍性颜色空间。
+
+然而，在涉及到无障碍性的地方，标准和指南目前主要是使用 sRGB 颜色空间，尤其是在涉及颜色对比度比率时。
+
+> **备注：** 几乎所有今天用于查看 Web 内容的系统都假定使用 sRGB 编码。除非已知将使用其他颜色空间来处理和显示内容，否则作者应评估使用 sRGB 颜色空间。如果使用其他颜色空间，请应用[最小对比度比率](https://webaim.org/articles/contrast/#sc143)的原则。
+
+### 查询颜色值
+
+{{domxref('Window.getComputedStyle()')}} 方法使用 RGB 十进制参考刻度或通过 `color(srgb...)` 返回值。例如，对设置了 `background-color: #ff0000` 的 `<div>` 调用 `Window.getComputedStyle()` 会将计算后的背景颜色返回为 `rgb(255 0 0)`（RGB 十进制参考）。但是，当[使用相对颜色](/zh-CN/docs/Web/CSS/CSS_colors/Relative_colors)（例如 `background-color: rgb(from blue 255 0 0)`）时，调用 `Window.getComputedStyle()` 将返回计算后的背景颜色为 `color(srgb 1 0 0)`。由于与计算机硬件相关联，`Window.getComputedStyle()` 以 RGB 为单位测量颜色，而不是人眼对颜色的感知。
+
+### 红/绿色盲
+
+Protanopia 是一种色觉缺陷，眼睛中没有红色锥；sRGB 仍然可以通过绿色锥感知，尽管视觉较暗。Protan（红色缺失）和 Deutan（绿色缺失）缺陷都导致难以区分红色*和*绿色。
+
+开发者工具可以帮助在浏览器中模拟颜色视觉差异。例如，Firefox 的“无障碍环境”可以在辅助功能面板中模拟红色盲、绿色盲、蓝色盲、全色盲和对比度丧失。
+
+
+
+## 亮度和对比度
+
+### 对比度
+
+颜色之间的对比度（“色调”）是一个关键组成部分，但仅仅使用颜色（“色调”）是不足以创建无障碍内容的。如前所述，对比度的任何计算都必须包括亮度。
+
+此外，文本本身的“形状”也很重要。细字母将比粗字母更难阅读；所有字体都需要一些空间来使人类感知。
+
+### 对比度和字体大小
+
+[WCAG 对比度指南](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)将“大”文本定义为正常（`normal`）状态下为 `18pt`（大约为 `24px`）或更大，加粗（`bold`）文本为 `14pt`（大约为 `18.7px`）的文本。指出：
+
+_较大并且笔画较宽的文本在低对比度下更容易阅读。因此，较大文本的对比度要求较低。这允许作者对大文本使用更广泛的颜色选择，这有助于页面的设计，特别是标题部分。_
+
+虽然较大文本不需要与其背景具有与较小文本一样大的颜色对比度，但增加字体大小并不能解决所有问题。
+
+“正常”印刷通常为 11.5pt 到 12pt 大小，相当于屏幕上的 16px。虽然较小的字体可能是可辨认的——用户能以约 70% 的准确率辨认字母（但那并不意味着可读）。16px 的字体大小通常对于正常视力的人是可读的。视力为 20/40 的人需要两倍于此，约为 31px 的字体大小。这就是为什么 WCAG 指南要求用户能够将任何文本放大到更大尺寸。
+
+虽然显示的文本太小很难阅读，但太大的文本也是如此。对于视力为 20/20 的用户，文本大小大约大于 96px，阅读速度会降低。此外，如果页面上的最小字体和最大字体大小之间存在很大的差异，那么当用户放大页面上较小的文本时，较大的文本将变得不那么容易阅读，因为大多数浏览器在用户放大文本时会将所有文本都放大。
+
+总的来说，对于无障碍性目的，对比度越大越好。这在动画中会有所改变。“更安全”的动画意味着图像的对比度较低，而不是更高。有关动画中颜色对比度的更多信息，请参见[三次闪烁或低于阈值的理解 SC 2.3.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html)。
+
+此外，请注意图标需要足够的对比度以进行感知。请参阅 [WCAG 2.1 技术 G207](https://www.w3.org/WAI/WCAG21/Techniques/general/G207)。
+
+### 亮度
+
+是颜色亮度的差异使我们能够看到对比度。在 WCAG 中，相对亮度被定义为“颜色空间中任何点的相对亮度，归一化为最深的黑色为 0，最浅的白色为 1”。
+
+当然，这个声明是准确的，但在与 RGB 颜色空间相关的情况下使用时可能会令人困惑，因为 RGB 颜色空间是介于 0 和 255 之间的整数。白色的相对亮度为 100%，黑色的相对亮度为 0%（在大多数但不是所有文献中如此）。按照上述 W3C 标准的解释，这意味着白色，归一化为 1，将具有 RGB 值 `rgb(255 255 255)`；黑色，归一化为 0，则具有 RGB 值 `rgb(0 0 0)`。请注意，黑色和白色也可以写作 `rgb(100% 100% 100%)` 和 `rgb(0% 0% 0%)`，这可能更直观。
+
+那么 0 到 255 的这些数字从哪里来？从历史上看，图形引擎将颜色通道存储为一个字节，这意味着介于 0 和 255 之间的整数范围。
+
+主要颜色的亮度是不同的。例如，黄色的亮度大于蓝色。根据 NASA 文档[《彩色图形的亮度对比》](https://colorusage.arc.nasa.gov/design_lum_1.php)，这样做是为了*实现显示器的白色对齐*。
+
+没有亮度成分的颜色对比度是没有意义的，一旦确定了亮度，就可以确定颜色对比度。
+
+在人类感知中，亮度差异比颜色差异更为重要。这一点很重要，因为亮度对比可以使即使是色盲者也能看到的内容得以开发。有了这样的理解，可以通过调整亮度来改善因亮度较低而难以看清的颜色，将这些颜色与具有对比亮度的另一种颜色放在一起。例如，NASA 对蓝色的一项有趣研究指出，这种低亮度的颜色可以通过*注意确保足够的亮度对比*而变得清晰可见（来源：[与蓝色设计](https://colorusage.arc.nasa.gov/blue_2.php)）。
+
+相对亮度的计算不是随意的。幸运的是，有[在线亮度和对比度检查工具](https://contrast-ratio.com/)可用，甚至有关于计算[相对亮度](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance)的说明。
+
+## 感知颜色
+
+颜色是我们对红色、黄色、绿色到蓝色的窄波段可见光的感知。然而，我们对这些不同色调的敏感程度并不相同。我们[眼睛](https://www.verywellhealth.com/eye-cones-5088699)中的光敏感细胞，称为锥体，被调整以感知某些颜色而不是其他颜色。大约 65% 的锥体对黄/绿色*最*为敏感，但也对红色有反应（我们称这些为“红色”锥体）。30% 对绿色敏感，而仅有 [5% 对蓝色敏感](https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0144891#sec001)。虽然蓝色敏感的锥体数量远少于其他两种类型，但它们非常敏感，这在一定程度上弥补了它们的数量较少的缺陷。
+
+深纯蓝色与其他颜色的感知不同，因为蓝色锥体对亮度没有贡献，并且我们拥有的蓝色锥体比红色或绿色锥体要少得多。
+
+
+
+左侧是标准视觉的中央锥体镶嵌图，右侧是患有红色盲症的人的锥体镶嵌图，红色盲症是一种色觉缺陷，患者缺少红色锥体。（插图由 RIT 的 Mark Fairchild 绘制，来自[维基媒体公共资源](https://commons.wikimedia.org/wiki/File:ConeMosaics.jpg)）
+
+红色和绿色的锥体共同产生亮度，我们可以将其视为与色调无关的明度/暗度。分开来看，红色、绿色和蓝色的锥体允许标准视觉感知数百万种颜色。对于无障碍性，了解我们的大脑将亮度与颜色（色调和色彩饱和度）分开处理是很重要的。
+
+亮度提供了精细的视觉细节，包括区分边缘和文本。色调和色彩饱和度携带亮度的三分之一的细节。图像数据压缩利用了这一事实。例如，[h.264 视频编解码器](/zh-CN/docs/Web/Media/Formats/Video_codecs)以四分之一的亮度分辨率对颜色进行采样。
+
+对于无障碍性而言，这意味着亮度对比对文本非常重要。颜色，如色调和色彩饱和度，对于*区分*项目（例如地图上的不同线条或图表中的条形）也很重要。
+
+另一个需要考虑的重要因素是周围颜色或亮度。颜色在不同的环境中呈现不同的外观。在下图中，黄色圆点和灰色正方形都是相同的 sRGB 颜色。上下文敏感的颜色感知使它们看起来不同；根据大脑对阴影的处理，它们的感知会调整。
+
+
+
+此图像中的黄色圆点在你的显示器上是相同的颜色，但由于上下文的原因，它们看起来不同。（图像由 D.Lyon 制作）
+
+我们的对比度、明亮度和颜色感知受到周围颜色和设计或图像其他特征的影响。这使得预测对比度变得具有挑战性。这不是两种颜色之间的数学比率那样简单。
+
+总之，颜色不仅涉及到从计算机屏幕上测量光线，还与大脑中的人体生理学和感知一样重要。了解环境光对颜色和对比度感知的影响也很重要。光线及其测量是线性的，但人类视觉和感知并不是。
+
+## 适应性
+
+我们的眼睛在从明亮区域到暗区域及其相反方向的适应能力并不相同，这是由我们眼睛的生理结构方式决定的。这会影响用户阅读文本与背景之间的能力。至少存在两种适应类型：局部适应和对环境的适应。
+
+局部适应发生在读者所看页面上。例如，如果你有蓝色文本位于灰色“高亮”区域内，那么如果该文本位于黑色的 {{HTMLElement("div")}} 或白色的 {{HTMLElement("div")}} 中，你的眼睛会以不同的方式感知那个确切的蓝色文本，这被称为*局部*适应。尽管房间的环境光线没有改变，但这种差异影响了感知文本的能力。
+
+这意味着，寻求改善文本在背景上可读性的 Web 开发人员可以利用局部适应原理。
+
+对低亮度的黑暗适应很慢。当你从外面阳光明媚的地方进入黑暗的房间时，你正在经历黑暗适应。这可能需要几分钟才能适应。
+
+光适应则是相反的。从黑暗房间进入明亮的阳光下适应速度更快，但也可能伤害到眼睛。
+
+这意味着，寻求改善在房间环境条件发生变化时文本可读性的 Web 开发人员可以利用 `AmbientLightSensor` 接口和 [`prefers-contrast`](/zh-CN/docs/Web/CSS/@media/prefers-contrast) 媒体查询。
+
+## 饱和度
+
+在讨论颜色（“色调”）和无障碍性时，饱和度值得特别提及。一般来说，当试图确保文本与其背景之间有足够的对比度，或者评估是否会引发对光敏性癫痫敏感的人的癫痫发作时，大多数关注点都在于亮度。与亮度无关的颜色（“色调”）的一个方面特别值得关注，即饱和度概念。这是由于其可能会引发光敏性癫痫的人的癫痫发作，而与颜色的亮度无关。正如在[红色的特殊情况](#the_special_case_of_red)中讨论的那样，[癫痫基金会](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.532.7063&rep=rep1&type=pdf)指出，_无论亮度如何，过渡到或从饱和的红色开始变化都被认为是一种风险_。
+
+饱和度有时被描述为颜色的“纯度”或“强度”。尽管这些对于艺术家调色板上的“颜料”来说是很好的定义，但对于计算机屏幕上的颜色定义来说，它们并不那么准确。
+
+在计算机显示器上，饱和的颜色是特定波长的颜色。虽然每种颜色空间对饱和度的定义可能不同，但饱和度可以很容易地进行测量。关键是要知道你正在使用的是哪种颜色空间，并准备在必要时进行转换。
+
+在讨论光敏性时最经常考虑的颜色空间是 RGB、HSL 和 HSV（也称为 HSB）颜色空间。代表*色相*、*饱和度*和*明度*的 HSV 颜色空间及同义词 HSB 颜色空间，在 CSS 中表示为 [`hwb()`](/zh-CN/docs/Web/CSS/color_value/hwb)，表示*色调*、*白度*和*黑度*。
+
+重要的是要知道你正在使用的颜色空间。例如，在 HSL 中，饱和的颜色的亮度为 `0.5`，而在 HWB 中，它们的值为 `1`。在 RGB 颜色空间中，饱和度通常用颜色的 RGB 值 `255` 或 `100%` 来表示。例如，具有十六进制值 `#ff0000` 的饱和红色具有 RGB 值 `rgb(255 0 0)` 和 HSL 值 `hsl(0 100% 50%)`。具有十六进制值 `#ff3300` 的另一种饱和红色具有 RGB 值 `rgb(255 51 0)` 和 HSL 值 `hsl(12 100% 50%)`。两者都是“饱和”的红色。它们是两种不同的“色调”，但都被认为是饱和的颜色。
+
+饱和度并非亮度。亮度是指颜色中混入的白色或黑色的程度。通过向颜色中添加白色、黑色或灰色来减少饱和度；进一步说，通过向颜色中添加白色来增加亮度，从而减少饱和度。一个典型的例子是向红色中加入白色以获得粉色。粉红色被认为是淡化的红色。
+
+### 饱和度和亮度
+
+在亮度的极端和黑白的极端处会出现饱和度的损失。在 NASA 的[亮度对饱和度的影响](https://colorusage.arc.nasa.gov/design_lum_1.php)中，他们指出在低亮度下会出现饱和度的损失，也提到了“...在高亮度下饱和度的损失 —— 颜色趋于白色”。
+
+## 颜色组合
+
+在考虑无障碍性时，单单对比度是不够的。在动画的情况下，某些颜色组合比其他颜色组合更有可能引起那些易受光敏性癫痫影响的人发作。例如，红色和蓝色之间交替闪烁比绿色和蓝色之间交替闪烁更有问题。这是因为我们眼睛的“红色”敏感锥体往往聚集在中心附近的中央凹附近，与我们眼睛的“蓝色”敏感锥体位置不同，后者位于中央凹之外靠近边缘。眼睛到大脑的电信号在处理信息时必须解决很多问题。
+
+某些颜色更有可能[引发癫痫发作](https://www.epilepsy.com/sites/default/files/2022-10/Epilepsia_2022_fisher_visually_sensitive_seizures.pdf)。大脑动态底层的复杂性可以通过某些颜色组合更多地进行调节。例如，红蓝交替闪烁的刺激引起的皮层兴奋比红绿或蓝绿刺激更大。
+
+在计算机显示器或移动设备上，某些颜色组合可能会带来很大问题，而某些颜色组合可能会干扰某些功能障碍。红/蓝组合就是一个例子。
+
+- 永远不要仅依赖色调来区分细节。需要足够的亮度对比度。
+- 显示器中的绿色占大部分亮度（光），因此它通常是较浅颜色的重要组成部分。
+
+### 使用蓝色
+
+有些人无法区分所有颜色。有些颜色，如纯蓝色，亮度较低。亮度较低的颜色应该是对比颜色中较暗的颜色。蓝色的分辨率也非常低。蓝色锥细胞要少得多，它们分散在我们的外周视觉中，并且不在我们的中央视觉中。人眼对蓝色的分辨率比绿色和红色低。
+
+这导致了一些关于蓝色使用的指导方针：
+
+- 纯蓝色通常应该是两种颜色中较暗的一种。
+- 当将蓝色用作两种颜色中较浅的一种时，添加绿色以增加对比度并提高可读性。
+
+蓝光的特性导致它在视网膜上聚焦的位置与红光不同，因此纯红色和纯蓝色在紧邻且相互接触时可能会“闪烁”。
+
+## 红色的特殊情况
+
+并非所有颜色（“色调”）在我们的大脑中被处理得一样。人类的生理和心理对红色产生的影响通常与其他颜色不同。我们对颜色的生理和心理反应。例如，已经证明[一些颜色比其他颜色更容易引起癫痫发作](https://www.sciencedaily.com/releases/2009/09/090925092858.htm)。一些设备提供了[“灰度”设置作为辅助选项](https://ask.metafilter.com/312049/What-is-the-grayscale-setting-for-in-accessibility-options)，这可以帮助光敏感的人。要模仿灰度设置，请使用 CSS 的 {{cssxref("filter")}} 属性和 [`grayscale()`](/zh-CN/docs/Web/CSS/filter-function/grayscale) 或 [`saturate()`](/zh-CN/docs/Web/CSS/filter-function/saturate) [`<filter-function>`](/zh-CN/docs/Web/CSS/filter-function)。
+
+### 饱和的红色
+
+"饱和红色"是一个特殊且危险的情况，针对它有特殊的测试。
+
+当只看数字和术语时，色彩饱和度是一个难以理解的概念，所以考虑查看下面的图像，以说明颜色饱和度的概念：
+
+![将来自维基共享资源的红色饱和度 SVG 保存为 PNG，署名：Datumizer [CC0]](320px-red_saturations.svg.png)
+
+同一“颜色”从最不饱和的左侧到最饱和的右侧。
+
+_不止一个“红色”可以被认为是“饱和”的红色_。例如，颜色 `#990000` 的 `hsl(0 100% 30%)` 完全饱和，但亮度较低。类似地，颜色 `#8b0000` 也具有 100% 的饱和度。
+
+并非所有饱和红色都可以在 RGB 谱或其他在 Web 开发中常用的频谱中很好地表示。根据维基百科关于“红色的色调”的页面，“洋红”色是一种饱和红色，其颜料形式主要包含波长大于 600 纳米的红光；文章特别指出，“洋红”接近极端光谱。这将其置于标准色域（RGB 和 CMYK）之外，其给定的 RGB 值仅是一个粗略的近似。
+
+### 饱和红色闪烁
+
+除了红色环境影响患有创伤性脑损伤的人的认知功能外，红色光谱波长需要特别注意和测试。
+
+格雷格·范德海登（Gregg Vanderheiden）在测试*光敏癫痫分析工具*时注意到癫痫发作率远高于预期。他们发现我们对饱和红色闪烁的敏感性要高得多。（参见视频[光敏癫痫分析工具](https://www.pbs.org/video/university-place-the-photosensitive-epilepsy-analysis-tool-ep-429/)。）
+
+### 闪烁和癫痫发作
+
+以每秒三次以上的速率连续闪烁明暗交替已被证明会引发一些人的光致癫痫发作。还发现了特定的、非常规律的、高对比度的图案，例如平行的黑白条纹，也会引发癫痫发作。
+
+美国癫痫基金会对[光致和图案诱发癫痫](https://www.researchgate.net/publication/7615895_Photic-_and_Pattern-induced_Seizures_A_Review_for_the_Epilepsy_Foundation_of_America_Working_Group)进行了研究。该研究得出了几项基本指导原则：
+
+1. 每秒内单个、双个或三个闪烁是可以接受的，但不建议在一秒内闪烁超过三次的情况下进行闪烁序列。
+
+2. 当显示光和暗条纹时，如果条纹改变方向、振荡、闪烁或反转对比度，则该图案应显示不超过五对光—暗条纹，如果图案是不变的或连续且平稳地向一个方向漂移，则可显示八对光—暗条纹。
+
+共识建议在这篇简短的论文中：[《光致和图案诱发癫痫：美国癫痫基金会的专家共识》](https://onlinelibrary.wiley.com/doi/epdf/10.1111/j.1528-1167.2005.31405.x)。在这篇涵盖了[预防癫痫发作的指南](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.106.9473&rep=rep1&type=pdf)的英国论文中还提供了一些额外的见解。
+
+## 色彩的心理物理学方面
+
+颜色，如色调和饱和度，可以影响我们的情绪，并增强（或减弱）我们的互动体验。
+
+### 超越视觉的色彩效应示例
+
+- **颜色可能是文化相关的**：[颜色情感含义的跨文化研究](https://journals.sagepub.com/doi/10.1177/002202217300400201)
+- **颜色影响我们的情绪**：[颜色与情绪：色调、饱和度和亮度的影响](https://pubmed.ncbi.nlm.nih.gov/28612080/)
+- **更高的对比度也可能对我们的情绪产生积极影响**：[通过 EEG 基于深度情绪识别控制视觉内容对情绪的影响变化](https://pubmed.ncbi.nlm.nih.gov/32823741/)
+- **某些颜色可能会影响我们对时间的感知**：[颜色与时间感知：关于蓝色刺激时间过度估计的证据](https://pubmed.ncbi.nlm.nih.gov/29374198/)
+- **蓝色还会显著影响亮度和眩光**：[蓝色、眩光和亮度](https://pubmed.ncbi.nlm.nih.gov/31288107/)
+- **红色色调的眼镜可以增加快乐或喜悦感**：[透过”玫瑰色“眼镜看世界：眼镜颜色对视觉情感加工的影响](https://pubmed.ncbi.nlm.nih.gov/31244627/)
+- **红色众所周知会对我们的行为产生显著影响**：[红色如何影响我们的行为](https://www.scientificamerican.com/article/how-the-color-red-influences-our-behavior/)，《科学美国人》，S. Martinez-Conde，Stephen L. Macknik
+- **红色环境**：研究表明，对于那些患有创伤性脑损伤的人，[在红色环境中认知功能降低](https://www.ncbi.nlm.nih.gov/pubmed/20649469)。
+
+## 参见
+
+- [无障碍](/zh-CN/docs/Web/Accessibility)
+- [无障碍学习路径](/zh-CN/docs/Learn/Accessibility)
+- CSS [`color`](/zh-CN/docs/Web/CSS/color) 属性
+- [`<color>`](/zh-CN/docs/Web/CSS/color_value) 数据类型
+- [癫痫和身体反应的 web 无障碍](/zh-CN/docs/Web/Accessibility/Seizure_disorders)
+- [红色如何影响我们的行为](https://www.scientificamerican.com/article/how-the-color-red-influences-our-behavior/) 《科学美国人》作者：Susana Martinez-Conde，Stephen L. Macknik，2014 年 11 月 1 日
+- [红色褪色](https://www.smart-optometry.com/red-desaturation/) 人眼对红色的敏感度非常高，因此眼科医生利用它进行测试，评估视神经的完整性。
+- [美国癫痫基金会工作组的专家共识：光致和图案诱发癫痫](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.532.7063&rep=rep1&type=pdf)
diff --git a/files/zh-cn/web/api/abortcontroller/abort/index.md b/files/zh-cn/web/api/abortcontroller/abort/index.md
index 91d707e2420b00..4ca79c49b011b0 100644
--- a/files/zh-cn/web/api/abortcontroller/abort/index.md
+++ b/files/zh-cn/web/api/abortcontroller/abort/index.md
@@ -1,11 +1,13 @@
---
-title: AbortController.abort()
+title: AbortController：abort() 方法
slug: Web/API/AbortController/abort
+l10n:
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-{{domxref("AbortController")}} 接口的 **`abort()`** 方法会在 DOM 请求完成之前中止它。它能够中止 [fetch 请求](/zh-CN/docs/Web/API/fetch)、各种响应主体或者流的消耗。
+{{domxref("AbortController")}} 接口的 **`abort()`** 方法会在一个异步操作完成之前中止它。它能够中止 [fetch 请求](/zh-CN/docs/Web/API/fetch)、各种响应主体或者流的消耗。
## 语法
diff --git a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md
index 4b743bce13468e..94a35d098c8089 100644
--- a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md
+++ b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.md
@@ -1,9 +1,11 @@
---
-title: AbortController.AbortController()
+title: AbortController：AbortController() 构造函数
slug: Web/API/AbortController/AbortController
+l10n:
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
**`AbortController()`** 构造函数创建了一个新的 `AbortController` 实例。
diff --git a/files/zh-cn/web/api/abortcontroller/signal/index.md b/files/zh-cn/web/api/abortcontroller/signal/index.md
index f9469003602e6f..325e513a18acfa 100644
--- a/files/zh-cn/web/api/abortcontroller/signal/index.md
+++ b/files/zh-cn/web/api/abortcontroller/signal/index.md
@@ -1,11 +1,13 @@
---
-title: AbortController.signal
+title: AbortController：signal 属性
slug: Web/API/AbortController/signal
+l10n:
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-{{domxref("AbortController")}} 接口的只读属性 **`signal`** 返回一个 {{domxref("AbortSignal")}} 实例对象，该对象可以根据需要处理 DOM 请求通信，既可以建立通信，也可以终止通信。
+{{domxref("AbortController")}} 接口的只读属性 **`signal`** 返回一个 {{domxref("AbortSignal")}} 实例对象，该对象可以根据需要与异步操作通信或终止异步操作。
## 值
diff --git a/files/zh-cn/web/api/audio_output_devices_api/index.md b/files/zh-cn/web/api/audio_output_devices_api/index.md
new file mode 100644
index 00000000000000..97244532815493
--- /dev/null
+++ b/files/zh-cn/web/api/audio_output_devices_api/index.md
@@ -0,0 +1,99 @@
+---
+title: 音频输出设备 API
+slug: Web/API/Audio_Output_Devices_API
+l10n:
+ sourceCommit: 5a5f3d3cbbfabf138aa9f0d3e2c8fce4a168f5cc
+---
+
+{{DefaultAPISidebar("Audio Output Devices API")}}{{securecontext_header}}{{SeeCompatTable}}
+
+**音频输出设备 API**（Audio Output Devices API）允许 Web 应用程序提示用户选择用于音频播放的输出设备。
+
+## 概念和用法
+
+操作系统通常允许用户指定音频应从扬声器、蓝牙耳机或其他音频输出设备播放。该 API 允许应用程序从 Web 页面内提供与此相同的功能。
+
+即使在权限策略允许的情况下，访问特定音频输出设备仍然需要明确的用户权限，因为用户可能处于不适合通过某些输出设备播放音频的位置。
+
+该 API 提供了 {{domxref("MediaDevices.selectAudioOutput()")}} 方法，允许用户从文档的 {{httpheader("Permissions-Policy")}} HTTP 标头的 [`speaker-selection`](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection) 指令允许的音频输出设备中选择所需的音频输出。然后选择的设备会获得用户权限，允许使用 {{domxref("MediaDevices.enumerateDevices()")}} 枚举该设备，并使用 {{domxref("HTMLMediaElement.setSinkId()")}} 将其设置为音频输出设备。
+
+音频设备可能会任意连接和断开。希望对此类更改做出反应的应用程序可以侦听 {{domxref("MediaDevices/devicechange_event", "devicechange")}} 事件，并使用 {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} 来确定返回的设备中是否存在 `sinkId`。这可能会触发例如暂停或恢复播放等操作。
+
+## 接口
+
+### 对接口的拓展
+
+音频输出设备 API 扩展了以下 API，添加了列出的特性：
+
+#### MediaDevices
+
+- {{domxref("MediaDevices.selectAudioOutput()")}}
+ - : 此方法提示用户选择特定的音频输出设备，例如扬声器或耳机。选择设备授予用户使用该设备的权限，并返回有关设备的信息，包括其 ID。
+
+#### HTMLMediaElement
+
+- {{domxref("HTMLMediaElement.setSinkId()")}}
+ - : 此方法设置要用于输出的音频设备的 ID，如果允许，则将使用该设备。
+- {{domxref("HTMLMediaElement.sinkId")}}
+ - : 此属性返回正在用于输出的音频设备的唯一 ID，如果正在使用默认的用户代理设备，则返回空字符串。
+
+## 安全要求
+
+对 API 的访问受以下约束：
+
+- 所有方法和属性只能在[安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts)中调用。
+
+- {{domxref("MediaDevices.selectAudioOutput()")}} 授予对所选设备用作音频输出的用户权限：
+
+ - 访问可能受 [`speaker-selection`](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection) HTTP [权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)的限制。
+ - 需要[瞬态用户激活](/zh-CN/docs/Web/Security/User_activation)。用户必须与页面或 UI 元素交互，才能调用此方法。
+
+- {{domxref("HTMLMediaElement.setSinkId()")}} 将允许的 ID 设置为音频输出：
+
+ - 访问可能受 [`speaker-selection`](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection) HTTP [权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)的限制。
+ - 需要用户权限来设置非默认设备 ID。
+ - 这可以通过在由 `MediaDevices.selectAudioOutput()` 启动的提示中选择来获得。
+ - 如果已经使用 {{domxref("MediaDevices.getUserMedia()")}} 获得了使用相同组中媒体输入设备的权限，则用户还会隐式授予对应输出设备的权限。
+
+## 示例
+
+以下是使用 `selectAudioOutput()` 的示例，该方法位于通过按钮点击触发的函数内，并将所选设备设置为音频输出。
+
+代码首先检查是否支持 `selectAudioOutput()`，如果支持，则使用它选择输出并返回[设备 ID](/zh-CN/docs/Web/API/MediaDeviceInfo/deviceId)。然后我们使用默认输出播放一些音频，然后调用 `setSinkId()` 以切换到所选输出设备。
+
+```js
+document.querySelector("#myButton").addEventListener("click", async () => {
+ if (!navigator.mediaDevices.selectAudioOutput) {
+ console.log("不支持 selectAudioOutput()，或不在安全上下文中。");
+ return;
+ }
+
+ // 显示选择设备的提示
+ const audioDevice = await navigator.mediaDevices.selectAudioOutput();
+
+ // 创建音频元素并在默认设备上开始播放音频
+ const audio = document.createElement("audio");
+ audio.src = "https://example.com/audio.mp3";
+ audio.play();
+
+ // 将输出更改为所选的音频输出设备。
+ audio.setSinkId(audioDevice.deviceId);
+});
+```
+
+请注意，如果记录输出详细信息，它们可能如下所示：
+
+```js
+console.log(
+ `${audioDevice.kind}: ${audioDevice.label} id = ${audioDevice.deviceId}`,
+);
+// audiooutput: Realtek Digital Output (Realtek(R) Audio) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/background_fetch_api/index.md b/files/zh-cn/web/api/background_fetch_api/index.md
new file mode 100644
index 00000000000000..b84d07e9c9b067
--- /dev/null
+++ b/files/zh-cn/web/api/background_fetch_api/index.md
@@ -0,0 +1,95 @@
+---
+title: Background Fetch API
+slug: Web/API/Background_Fetch_API
+l10n:
+ sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c
+---
+
+{{DefaultAPISidebar("Background Fetch API")}}{{SeeCompatTable}}{{AvailableInWorkers}}
+
+**Background Fetch API** 提供了一种管理可能需要较长时间的下载（例如电影、音频文件和软件）的方法。
+
+## 概念和用法
+
+当 web 应用程序需要用户下载大文件时，通常会面临一个问题，即用户需要保持与页面的连接才能完成下载。如果他们失去连接、关闭标签页或离开页面，下载就会停止。
+
+{{domxref("Background Synchronization API", "", "", "nocode")}} 提供了一种让 service worker 推迟处理直到用户连接的方法；但它不能用于长时间运行的任务，例如下载大文件。后台同步要求 service worker 保持活动状态直到 fetch 完成，并且为了节省电池寿命并防止在后台发生不必要的任务，浏览器在某个时候会终止任务。
+
+Background Fetch API 解决了这个问题。它为 Web 开发人员创建了一种告诉浏览器在后台执行某些 fetch 的方法，例如当用户点击按钮下载视频文件时。浏览器以用户可见的方式执行 fetch，向用户显示进度并提供取消下载的方法。一旦下载完成，浏览器就会打开 service worker，此时你的应用程序可以根据需要对响应执行某些操作。
+
+如果用户在离线状态下开始下载的过程，Background Fetch API 将启用 fetch 操作。一旦用户重新连接，它就会开始。如果用户离线，进程将暂停，直到用户再次联网。
+
+## 接口
+
+- {{domxref("BackgroundFetchManager")}} {{Experimental_Inline}}
+ - : 一个映射，其中键是后台 fetch 的 ID，值是 {{domxref("BackgroundFetchRegistration")}} 对象。
+- {{domxref("BackgroundFetchRegistration")}} {{Experimental_Inline}}
+ - : 表示一个后台 fetch。
+- {{domxref("BackgroundFetchRecord")}} {{Experimental_Inline}}
+ - : 表示一个单独的 fetch 请求和响应。
+- {{domxref("BackgroundFetchEvent")}} {{Experimental_Inline}}
+ - : {{domxref("ServiceWorkerGlobalScope.backgroundfetchabort_event", "backgroundfetchabort")}} 和 {{domxref("ServiceWorkerGlobalScope.backgroundfetchclick_event", "backgroundfetchclick")}} 事件的事件类型。
+- {{domxref("BackgroundFetchUpdateUIEvent")}} {{Experimental_Inline}}
+ - : {{domxref("ServiceWorkerGlobalScope.backgroundfetchsuccess_event", "backgroundfetchsuccess")}} 和 {{domxref("ServiceWorkerGlobalScope.backgroundfetchfail_event", "backgroundfetchfail")}} 事件的事件类型。
+
+### 对其他接口的拓展
+
+- {{domxref("ServiceWorkerRegistration.backgroundFetch")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : 返回 {{domxref("BackgroundFetchManager")}} 对象的引用，该对象管理后台 fetch 操作。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchabort_event", "backgroundfetchabort")}} 事件 {{Experimental_Inline}}
+ - : 当用户或应用程序取消了后台 fetch 操作时触发。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchclick_event", "backgroundfetchclick")}} 事件 {{Experimental_Inline}}
+ - : 当用户点击后台 fetch 操作的 UI 时触发。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchfail_event", "backgroundfetchfail")}} 事件 {{Experimental_Inline}}
+ - : 当后台 fetch 操作中至少有一个请求失败时触发。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchsuccess_event", "backgroundfetchsuccess")}} 事件 {{Experimental_Inline}}
+ - : 当后台 fetch 操作中的所有请求成功时触发。
+
+## 示例
+
+在使用 Background Fetch 之前，请检查浏览器是否支持。
+
+```js
+if (!("BackgroundFetchManager" in self)) {
+ // 提供回退下载。
+}
+```
+
+使用 Background Fetch 需要注册 service worker。然后调用 `backgroundFetch.fetch()` 执行 fetch。这将返回一个会兑现 {{domxref("BackgroundFetchRegistration")}} 的 Promise。
+
+后台 fetch 可能会获取多个文件。在我们的示例中，fetch 请求了一个 MP3 文件和一个 JPEG 文件。这样可以一次下载用户视为一个项目的文件包（例如播客和艺术品）。
+
+```js
+navigator.serviceWorker.ready.then(async (swReg) => {
+ const bgFetch = await swReg.backgroundFetch.fetch(
+ "my-fetch",
+ ["/ep-5.mp3", "ep-5-artwork.jpg"],
+ {
+ title: "Episode 5: Interesting things.",
+ icons: [
+ {
+ sizes: "300x300",
+ src: "/ep-5-icon.png",
+ type: "image/png",
+ },
+ ],
+ downloadTotal: 60 * 1024 * 1024,
+ },
+ );
+});
+```
+
+你可以在[此处](https://glitch.com/edit/#!/bgfetch-http203?path=public%2Fclient.js%3A191%3A45)找到一个实现了 Background Fetch 的演示应用程序。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [介绍 Background Fetch](https://developer.chrome.com/blog/background-fetch/)
+- [Background Fetch——HTTP 203](https://www.youtube.com/watch?v=cElAoxhQz6w)
diff --git a/files/zh-cn/web/api/barprop/index.md b/files/zh-cn/web/api/barprop/index.md
new file mode 100644
index 00000000000000..a6798fe051f105
--- /dev/null
+++ b/files/zh-cn/web/api/barprop/index.md
@@ -0,0 +1,46 @@
+---
+title: BarProp
+slug: Web/API/BarProp
+l10n:
+ sourceCommit: 5288fecd2bcd65bde5ecef008684d3cb343c7b34
+---
+
+{{APIRef("DOM")}}
+
+{{domxref('Document Object Model', '文档对象模型', '', 1)}}的 **`BarProp`** 接口表示 Web 浏览器用户界面向 web 页面公开的脚本，以下每个接口元素都由一个 `BarProp` 对象表示。
+
+- {{domxref("Window.locationbar")}}
+ - : 浏览器的地址栏。
+- {{domxref("Window.menubar")}}
+ - : 浏览器的菜单栏。
+- {{domxref("Window.personalbar")}}
+ - : 浏览器的个人栏。
+- {{domxref("Window.scrollbars")}}
+ - : 浏览器的滚动条。
+- {{domxref("Window.statusbar")}}
+ - : 浏览器的状态栏。
+- {{domxref("Window.toolbar")}}
+ - : 浏览器的工具栏。
+
+`BarProp` 接口不是直接访问的，而是通过其中一个元素访问的。
+
+## 实例属性
+
+- {{domxref("BarProp.visible")}} {{ReadOnlyInline}}
+ - : {{jsxref("Boolean", "布尔值", "", 1)}}，如果所使用的界面元素表示的条是可见的，则返回 `true`。
+
+## 示例
+
+下面的示例在控制台输出一个表示地址栏的 `BarProp` 对象。
+
+```js
+console.log(window.locationbar);
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/barprop/visible/index.md b/files/zh-cn/web/api/barprop/visible/index.md
new file mode 100644
index 00000000000000..ecbb6a3e86fddf
--- /dev/null
+++ b/files/zh-cn/web/api/barprop/visible/index.md
@@ -0,0 +1,32 @@
+---
+title: BarProp：visible 属性
+slug: Web/API/BarProp/visible
+l10n:
+ sourceCommit: 864f91f32b49fd5038b29f0451ad18ff5682a5f7
+---
+
+{{APIRef("DOM")}}
+
+{{domxref("BarProp")}} 接口的 **`visible`** 只读属性在它所表示的用户界面元素的条可见的情况下返回 `true`。
+
+## 值
+
+一个{{jsxref("Boolean", "布尔值", "", 1)}}，如果顶层窗口是用启用了 [`popup`](/zh-CN/docs/Web/API/Window/open#popup) 特性的 {{domxref("window.open")}} 打开的，则为 `true`。
+
+> **备注：** 历史上，这个接口元素被用来表示是否可见，但由于隐私原因，不再表示每个接口元素实际的可见性。
+
+## 示例
+
+如果窗口不是弹出窗口，则下面的示例将 `true` 打印到控制台。
+
+```js
+console.log(window.locationbar.visible);
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md
index 1b6fd00e1f3163..f1b77ea5b70a48 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md
+++ b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.md
@@ -3,6 +3,8 @@ title: AudioContext.createBuffer()
slug: Web/API/BaseAudioContext/createBuffer
---
+{{ APIRef("Web Audio API") }}
+
音频环境{{ domxref("AudioContext") }} 接口的 `createBuffer() 方法用于新建一个空`白的 {{ domxref("AudioBuffer") }} 对象，以便用于填充数据，通过 {{ domxref("AudioBufferSourceNode") }} 播放。
更多关于音频片段 (Audio Buffer) 的细节，请参考{{ domxref("AudioBuffer") }}页面。
diff --git a/files/zh-cn/web/api/blob/arraybuffer/index.md b/files/zh-cn/web/api/blob/arraybuffer/index.md
index ecb744aa4b0591..2d948eaf563a0c 100644
--- a/files/zh-cn/web/api/blob/arraybuffer/index.md
+++ b/files/zh-cn/web/api/blob/arraybuffer/index.md
@@ -1,9 +1,11 @@
---
title: Blob：arrayBuffer() 方法
slug: Web/API/Blob/arrayBuffer
+l10n:
+ sourceCommit: 84a9afd94f497d4173bde131731ef6bdf0b6135d
---
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
{{domxref("Blob")}} 接口的 **`arrayBuffer()`** 方法返回一个 {{jsxref("Promise")}}，其会兑现一个包含 blob 二进制数据内容的 {{jsxref("ArrayBuffer")}}。
@@ -23,11 +25,11 @@ arrayBuffer()
### 异常
-该方法不会抛出异常，但可能会拒绝返回的 promise。这是可能发生的，例如在用于获取 blob 数据的 reader 抛出异常时。在获取数据时抛出的任何异常都会导致 promise 被拒绝。
+该方法不会抛出异常，但可能会拒绝返回的 promise。例如，如果用于获取 blob 数据的 reader 抛出异常，就会发生这种情况。在获取数据时抛出的任何异常都会导致 promise 被拒绝。
## 使用说明
-{{domxref("FileReader.readAsArrayBuffer()")}} 方法与之类似，但 `arrayBuffer()` 返回一个 promise 对象，而不是像 `FileReader` 接口的方法一样返回一个基于事件的 API。
+{{domxref("FileReader.readAsArrayBuffer()")}} 方法与之类似，但 `arrayBuffer()` 返回一个 promise 对象，而不是像 `FileReader` 接口的方法一样是一个基于事件的 API。
## 规范
diff --git a/files/zh-cn/web/api/blob/stream/index.md b/files/zh-cn/web/api/blob/stream/index.md
index 75e7d2f2dd0d05..2685ee9fff1422 100644
--- a/files/zh-cn/web/api/blob/stream/index.md
+++ b/files/zh-cn/web/api/blob/stream/index.md
@@ -1,9 +1,11 @@
---
-title: Blob.stream()
+title: Blob：stream() 方法
slug: Web/API/Blob/stream
+l10n:
+ sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d
---
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
{{domxref("Blob")}} 接口的 **`stream()`** 方法返回一个 {{domxref("ReadableStream")}} 对象，读取它将返回包含在 `Blob` 中的数据。
@@ -40,5 +42,5 @@ stream()
## 参见
-- {{domxref("Body.body")}}
+- {{domxref("Response.body")}}
- [Streams API](/zh-CN/docs/Web/API/Streams_API)
diff --git a/files/zh-cn/web/api/blob/text/index.md b/files/zh-cn/web/api/blob/text/index.md
index 7241bf13007204..177247db8494d8 100644
--- a/files/zh-cn/web/api/blob/text/index.md
+++ b/files/zh-cn/web/api/blob/text/index.md
@@ -2,10 +2,10 @@
title: Blob：text() 方法
slug: Web/API/Blob/text
l10n:
- sourceCommit: 84a9afd94f497d4173bde131731ef6bdf0b6135d
+ sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d
---
-{{APIRef("File API")}}
+{{APIRef("File API")}}{{AvailableInWorkers}}
{{domxref("Blob")}} 接口的 **`text()`** 方法返回一个 {{jsxref("Promise")}}，其会兑现一个包含 blob 内容的 UTF-8 格式的字符串。
diff --git a/files/zh-cn/web/api/blobevent/blobevent/index.md b/files/zh-cn/web/api/blobevent/blobevent/index.md
new file mode 100644
index 00000000000000..b2feddb1b96fbe
--- /dev/null
+++ b/files/zh-cn/web/api/blobevent/blobevent/index.md
@@ -0,0 +1,43 @@
+---
+title: BlobEvent：BlobEvent() 构造函数
+slug: Web/API/BlobEvent/BlobEvent
+l10n:
+ sourceCommit: 1c9d35561671086a47fa501a34ec7af2cf8182cf
+---
+
+{{APIRef("MediaStream Recording")}}
+
+**`BlobEvent()`** 构造函数返回一个新创建的带有关联 {{domxref("Blob")}} 的 {{domxref("BlobEvent")}} 对象。
+
+## 语法
+
+```js-nolint
+new BlobEvent(type, options)
+```
+
+### 参数
+
+- `type`
+ - : 表示事件名的字符串。它区分大小写，浏览器总是将其设置为 `dataavailable`。
+- `options`
+ - : 一个对象，_除了在 {{domxref("Event/Event", "Event()")}} 中定义的属性之外_，还可以具有以下属性：
+ - `data`
+ - : 和事件关联的 {{domxref("Blob")}} 数据。
+ - `timecode` {{optional_inline}}
+ - : 用于初始化 blob 事件的 {{domxref("DOMHighResTimeStamp")}}。
+
+### 返回值
+
+一个新的 {{domxref("BlobEvent")}} 对象。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 所属的 {{domxref("BlobEvent")}} 接口。
diff --git a/files/zh-cn/web/api/blobevent/data/index.md b/files/zh-cn/web/api/blobevent/data/index.md
new file mode 100644
index 00000000000000..bb1025c46e317c
--- /dev/null
+++ b/files/zh-cn/web/api/blobevent/data/index.md
@@ -0,0 +1,26 @@
+---
+title: BlobEvent：data 属性
+slug: Web/API/BlobEvent/data
+l10n:
+ sourceCommit: 1c9d35561671086a47fa501a34ec7af2cf8182cf
+---
+
+{{APIRef("MediaStream Recording")}}
+
+{{domxref("BlobEvent")}} 接口的 **`data`** 只读属性表示一个与这个事件关联的 {{domxref("Blob")}}。
+
+## 值
+
+一个 {{domxref("Blob")}} 对象。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 所属的 {{domxref("BlobEvent")}} 接口。
diff --git a/files/zh-cn/web/api/blobevent/index.md b/files/zh-cn/web/api/blobevent/index.md
new file mode 100644
index 00000000000000..428c91d6c05875
--- /dev/null
+++ b/files/zh-cn/web/api/blobevent/index.md
@@ -0,0 +1,44 @@
+---
+title: BlobEvent
+slug: Web/API/BlobEvent
+l10n:
+ sourceCommit: 1c9d35561671086a47fa501a34ec7af2cf8182cf
+---
+
+{{APIRef("MediaStream Recording")}}
+
+[流媒体录制 API](/zh-CN/docs/Web/API/MediaStream_Recording_API) 的 **`BlobEvent`** 接口表示与 {{domxref("Blob")}} 关联的事件。这些 blob 通常（但不是一定）与媒体内容相关。
+
+{{InheritanceDiagram}}
+
+## 构造函数
+
+- {{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}
+ - : 使用给定的参数创建一个 `BlobEvent`事件。
+
+## 实例属性
+
+_从其父接口 {{domxref("Event")}} 继承属性。_
+
+- {{domxref("BlobEvent.data")}} {{ReadOnlyInline}}
+ - : 表示与事件关联的数据的 {{domxref("Blob")}}。由于特定的 {{domxref("Blob")}} 上发生了一些事情，导致 {{domxref("EventTarget")}} 上触发了事件。
+- {{domxref("BlobEvent.timecode")}} {{ReadOnlyInline}}
+ - : 一个 {{domxref("DOMHighResTimeStamp")}}，表示数据中的第一个分块的时间戳与由该录制器产生的第一个 Blob 事件中的第一个分块的时间戳之间的差。请注意，第一个生成的 Blob 事件中的 timecode 不需要为零。
+
+## 实例方法
+
+_没有特定的方法，从其父接口 {{domxref("Event")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 父接口 {{domxref("Event")}}。
+- [流媒体录制 API](/zh-CN/docs/Web/API/MediaStream_Recording_API)：每次媒体分块就绪时发送 `BlobEvent` 对象。
+- [使用流媒体录制 API](/zh-CN/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)
diff --git a/files/zh-cn/web/api/blobevent/timecode/index.md b/files/zh-cn/web/api/blobevent/timecode/index.md
new file mode 100644
index 00000000000000..933c40965b9e98
--- /dev/null
+++ b/files/zh-cn/web/api/blobevent/timecode/index.md
@@ -0,0 +1,24 @@
+---
+title: BlobEvent：timecode 属性
+slug: Web/API/BlobEvent/timecode
+l10n:
+ sourceCommit: 1c9d35561671086a47fa501a34ec7af2cf8182cf
+---
+
+{{APIRef("MediaStream Recording")}}
+
+{{domxref("BlobEvent")}} 接口的 **`timecode`** 只读属性表示数据中的第一分块的时间戳与由该录制器产生的第一个 `BlobEvent` 中的第一个分块的时间戳之间的差。
+
+请注意，第一个生成的 `BlobEvent` 中的 `timecode` 不需要为零。
+
+## 值
+
+一个 {{domxref("DOMHighResTimeStamp")}}。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/broadcast_channel_api/index.md b/files/zh-cn/web/api/broadcast_channel_api/index.md
index 3e87240f26c1a4..48bac3cb63e15f 100644
--- a/files/zh-cn/web/api/broadcast_channel_api/index.md
+++ b/files/zh-cn/web/api/broadcast_channel_api/index.md
@@ -1,65 +1,72 @@
---
title: Broadcast Channel API
slug: Web/API/Broadcast_Channel_API
+l10n:
+ sourceCommit: 50a45d52fd9f45f1ca30b546af5920d0ccda82dc
---
-{{DefaultAPISidebar("Broadcast Channel API")}}
+{{DefaultAPISidebar("Broadcast Channel API")}} {{AvailableInWorkers}}
-**Broadcast Channel API** 可以实现同 {{glossary("origin", "源")}} 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 {{glossary("browsing context", "浏览器上下文")}} (通常是同一个网站下不同的页面) 之间的简单通讯。
+**Broadcast Channel API** 允许{{glossary("browsing context", "浏览上下文")}}（即 _window_、_tab_、_frame_ 或 _iframe_）与同{{glossary("origin", "源")}}的 worker 之间进行基本通信。
-{{AvailableInWorkers}}
+通过创建 {{domxref("BroadcastChannel")}} 对象，你可以接收发布到该对象的任何消息。你不必维护对要与之通信的框架或 worker 的引用：他们可以通过构建具有相同名称的 {{domxref("BroadcastChannel")}} 来“订阅”特定频道，并在它们之间进行双向通信。
-广播频道会被命名和绑定到指定的源。
+
-通过创建一个监听某个频道下的 {{domxref("BroadcastChannel")}} 对象，你可以接收发送给该频道的所有消息。一个有意思的点是，你不需要再维护需要通信的 iframe 或 worker 的索引。它们可以通过构造 {{domxref("BroadcastChannel")}} 来简单地“订阅”特定频道，并在它们之间进行全双工（双向）通信。
-
-
-
-## Broadcast Channel 接口
+## 广播频道接口
### 创建或加入某个频道
-`BroadcastChannel` 接口非常简单。通过创建一个 {{domxref("BroadcastChannel")}} 对象，一个客户端就加入了某个指定的频道。只需要向 [构造函数](/zh-CN/docs/Web/API/BroadcastChannel/BroadcastChannel) 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。
+客户端通过创建 {{domxref("BroadcastChannel")}} 对象加入广播频道。其[构造函数](/zh-CN/docs/Web/API/BroadcastChannel/BroadcastChannel)只接受一个参数：频道的*名称*。如果它是第一个连接到该广播频道名称的客户端，则会创建底层频道。
```js
-// 连接到广播频道
-var bc = new BroadcastChannel("test_channel");
+// 连接至广播频道
+const bc = new BroadcastChannel("test_channel");
```
### 发送消息
-现在发送消息就很简单了，只需要调用 BroadcastChannel 对象上的{{domxref("BroadcastChannel.postMessage", "postMessage()")}} 方法即可。该方法的参数可以是任意对象。最简单的例子就是发送 {{domxref("DOMString")}} 文本消息：
+在创建的 `BroadcastChannel` 对象上调用 {{domxref("BroadcastChannel.postMessage", "postMessage()")}} 方法就足够了，该方法接受任何对象作为参数。示例字符串消息：
```js
-// 发送简单消息的示例
-bc.postMessage("This is a test message.");
+// 发送非常简单的消息的示例
+bc.postMessage("这是一条测试消息。");
```
-不只是 {{domxref("DOMString")}}，任意类型的对象都可以被发送。此 API 不会将消息与任何的语义相关联，因此通道的参与者有必要知道预期的消息类型和消息的消费方式。
+发送到通道的数据使用[结构化克隆算法](/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)进行序列化。这意味着你可以安全地发送各种各样的数据对象，而无需自己对其进行序列化。
+
+API 不会将任何语义与消息关联，因此由代码来决定要接收什么类型的消息以及如何处理它们。
### 接收消息
-当消息被发送之后，所有连接到该频道的 {{domxref("BroadcastChannel")}} 对象上都会触发 [`message`](/zh-CN/docs/Web/API/BroadcastChannel/message_event) 事件。该事件没有默认的行为，但是可以使用 {{domxref("BroadcastChannel.onmessage", "onmessage")}} 事件处理程序来定义一个函数来处理消息。
+发布消息时，会向连接到此频道的每个 {{domxref("BroadcastChannel")}} 对象发送一个 [`message`](/zh-CN/docs/Web/API/BroadcastChannel/message_event) 事件。可以使用 {{domxref("BroadcastChannel/message_event", "onmessage")}} 事件处理器为此事件运行一个函数：
```js
-// 简单示例，用于将事件打印到控制台
-bc.onmessage = function (ev) {
- console.log(ev);
+// 仅将事件记录到控制台的处理器：
+bc.onmessage = (event) => {
+ console.log(event);
};
```
-### 与频道断开连接
+### 断开频道
-通过调用 BroadcastChannel 对象的 {{domxref("BroadcastChannel.close", "close()")}} 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。
+要离开频道，请调用对象上的 {{domxref("BroadcastChannel.close", "close()")}} 方法。这会断开对象与底层频道的连接，从而允许垃圾回收。
```js
-// 断开频道连接
+// 断开频道
bc.close();
```
## 总结
-Broadcast Channel API 是一个非常简单的 API，内部包含了跨上下文通讯的接口。它可用于检测同源网站环境中其他浏览器选项卡下的用户操作，例如当用户登录到帐户时。没有定义消息传输协议，故不同上下文中的不同文档需要自己实现它：规范没有对此提出协议或要求。
+Broadcast Channel API 的独立接口允许跨上下文通信。它可用于检测同一来源内其他标签页中的用户操作，例如用户登录或退出时。
+
+消息传递协议未定义，不同的浏览上下文需要自行实现；规范中没有协商或要求。
+
+## 接口
+
+- {{domxref("BroadcastChannel")}}
+ - : 表示任何给定{{glossary("origin", "源")}}的{{glossary("browsing context", "浏览上下文")}}都可以订阅的具名频道。
## 规范
@@ -71,4 +78,4 @@ Broadcast Channel API 是一个非常简单的 API，内部包含了跨上下文
## 参见
-- 接口实现：{{domxref("BroadcastChannel")}}。
+- {{domxref("BroadcastChannel")}}，实现该 API 的接口。
diff --git a/files/zh-cn/web/api/btoa/index.md b/files/zh-cn/web/api/btoa/index.md
deleted file mode 100644
index f04b1ec4e7e350..00000000000000
--- a/files/zh-cn/web/api/btoa/index.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: btoa()
-slug: Web/API/btoa
----
-
-{{APIRef("HTML DOM")}}
-
-**`btoa()`** 方法可以将一个*二进制字符串*（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 {{glossary("Base64")}} 编码的 ASCII 字符串。
-
-你可以使用这个方法来对可能遇到通信问题的数据进行编码，然后使用 {{domxref("atob", "atob()")}} 方法来对数据进行解码。例如，你可以对 ASCII 中的控制字符（值为 0 到 31 的字符）进行编码。
-
-## 语法
-
-```js-nolint
-btoa(stringToEncode)
-```
-
-### 参数
-
-- `stringToEncode`
- - : 一个需要编码的*二进制字符串*。
-
-### 返回值
-
-一个包含 `stringToEncode` 的 Base64 表示的 ASCII 字符串。
-
-### 异常
-
-- `InvalidCharacterError` {{domxref("DOMException")}}
- - : 该字符串包含非单字节的字符。参见下方的“Unicode 字符串”。
-
-## 示例
-
-```js
-const encodedData = btoa("Hello, world"); // 编码字符串
-const decodedData = atob(encodedData); // 解码字符串
-```
-
-## Unicode 字符串
-
-`btoa()` 函数将一个 JavaScript 字符串作为其参数。而 JavaScript 字符串使用 UTF-16 字符编码表示：在这种编码中，字符串使用一串 16 比特（2 字节）的单元来表示。每一个 ASCII 字符会被填充到每个单元的第一个字节中，而很多其他的字符则不然。
-
-根据设计，Base64 仅将二进制数据作为其输入。而在 JavaScript 字符串中，这意味着每个字符只能使用一个字节表示。所以，如果你将一个字符串传递给 `btoa()`，而其中包含了需要使用超过一个字节才能表示的字符，你就会得到一个错误，因为这个字符串不能被看作是二进制数据：
-
-```js
-const ok = "a";
-console.log(ok.codePointAt(0).toString(16)); // 61：占用 < 1 byte
-
-const notOK = "✓";
-console.log(notOK.codePointAt(0).toString(16)); // 2713：占用 > 1 byte
-
-console.log(btoa(ok)); // YQ==
-console.log(btoa(notOK)); // error
-```
-
-如果你需要使用 `btoa()` 将 Unicode 文本编码为 ASCII，一种选择是将字符串中的每一个 16 比特的单元都转换为使用一个字节的单元。例如：
-
-```js
-// convert a Unicode string to a string in which
-// each 16-bit unit occupies only one byte
-function toBinary(string) {
- const codeUnits = new Uint16Array(string.length);
- for (let i = 0; i < codeUnits.length; i++) {
- codeUnits[i] = string.charCodeAt(i);
- }
- const charCodes = new Uint8Array(codeUnits.buffer);
- let result = "";
- for (let i = 0; i < charCodes.byteLength; i++) {
- result += String.fromCharCode(charCodes[i]);
- }
- return result;
-}
-
-// a string that contains characters occupying > 1 byte
-const myString = "☸☹☺☻☼☾☿";
-
-const converted = toBinary(myString);
-const encoded = btoa(converted);
-console.log(encoded); // OCY5JjomOyY8Jj4mPyY=
-```
-
-如果你按上述的方法进行了编码，你当然需要一种方法来进行解码：
-
-```js
-function fromBinary(binary) {
- const bytes = new Uint8Array(binary.length);
- for (let i = 0; i < bytes.length; i++) {
- bytes[i] = binary.charCodeAt(i);
- }
- const charCodes = new Uint16Array(bytes.buffer);
- let result = "";
- for (let i = 0; i < charCodes.length; i++) {
- result += String.fromCharCode(charCodes[i]);
- }
- return result;
-}
-
-const decoded = atob(encoded);
-const original = fromBinary(decoded);
-console.log(original); // ☸☹☺☻☼☾☿
-```
-
-参见 {{Glossary("Base64")}} 术语的 [Solution #1 – escaping the string before encoding it](/zh-CN/docs/Glossary/Base64#solution_1_–_javascripts_utf-16__base64) 示例中的 `utf8_to_b64` 和 `b64_to_utf8` 函数。
-
-## 规范
-
-{{Specifications}}
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 参见
-
-- [`core-js`](https://github.com/zloirock/core-js) 中有对 [`btoa` 的 polyfill](https://github.com/zloirock/core-js#base64-utility-methods)
-- [`data` URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
-- {{domxref("atob", "atob()")}}
-- {{Glossary("Base64")}}
diff --git a/files/zh-cn/web/api/canvas_api/index.md b/files/zh-cn/web/api/canvas_api/index.md
index 4e4cf47d245df1..461e6457dcc3de 100644
--- a/files/zh-cn/web/api/canvas_api/index.md
+++ b/files/zh-cn/web/api/canvas_api/index.md
@@ -1,17 +1,19 @@
---
-title: Canvas
+title: Canvas API
slug: Web/API/Canvas_API
+l10n:
+ sourceCommit: e811fc31b67e145c5882e8e3f128d1938c627a51
---
{{DefaultAPISidebar("Canvas API")}}
-**Canvas API** 提供了一个通过[JavaScript](/zh-CN/docs/Web/JavaScript) 和 [HTML](/zh-CN/docs/Web/HTML)的{{HtmlElement("canvas")}}元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
+**Canvas API** 提供了一个通过 [JavaScript](/zh-CN/docs/Web/JavaScript) 和 [HTML](/zh-CN/docs/Web/HTML) 的 {{HtmlElement("canvas")}} 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
-Canvas API 主要聚焦于 2D 图形。而同样使用`<canvas>`元素的 [WebGL API](/zh-CN/docs/Web/WebGL) 则用于绘制硬件加速的 2D 和 3D 图形。
+Canvas API 主要聚焦于 2D 图形。而同样使用 `<canvas>` 元素的 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 则用于绘制硬件加速的 2D 和 3D 图形。
## 基础示例
-这个简单的例子在画布绘制一个绿色的长方形。
+这个简单示例在画布上绘制一个绿色的长方形。
### HTML
@@ -21,9 +23,9 @@ Canvas API 主要聚焦于 2D 图形。而同样使用`<canvas>`元素的 [WebGL
### JavaScript
-{{domxref("Document.getElementById()")}} 方法获取 HTML `<canvas>` 元素的引用。接着，{{domxref("HTMLCanvasElement.getContext()")}} 方法获取这个元素的 context——图像稍后将在此被渲染。
+{{domxref("Document.getElementById()")}} 方法获取 HTML `<canvas>` 元素的引用。接着，{{domxref("HTMLCanvasElement.getContext()")}} 方法获取这个元素的上下文——稍后将在此处渲染绘制的内容。
-由 {{domxref("CanvasRenderingContext2D")}} 接口完成实际的绘制。{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性让长方形变成绿色。{{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 高 100。
+由 {{domxref("CanvasRenderingContext2D")}} 接口完成实际的绘制。{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性让长方形变成绿色。{{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 个单位高 100 个单位。
```js
const canvas = document.getElementById("canvas");
@@ -42,59 +44,59 @@ ctx.fillRect(10, 10, 150, 100);
- {{domxref("HTMLCanvasElement")}}
- {{domxref("CanvasRenderingContext2D")}}
- {{domxref("CanvasGradient")}}
-- {{domxref("CanvasImageSource")}}
- {{domxref("CanvasPattern")}}
- {{domxref("ImageBitmap")}}
- {{domxref("ImageData")}}
-- {{domxref("RenderingContext")}}
- {{domxref("TextMetrics")}}
-- {{domxref("OffscreenCanvas")}}{{experimental_inline}}
-- {{domxref("Path2D")}}{{experimental_inline}}
-- {{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
+- {{domxref("OffscreenCanvas")}}
+- {{domxref("Path2D")}} {{experimental_inline}}
+- {{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}
-> **备注：** 与 `WebGLRenderingContext` 有关的接口请参考 [WebGL](/zh-CN/docs/Web/WebGL)。
+> **备注：** [WebGL](/zh-CN/docs/Web/API/WebGL_API) 包含了与 `WebGLRenderingContext` 有关的接口的参考。
-{{domxref("CanvasCaptureMediaStream")}} 也与之相关。
+> **备注：** {{domxref("OffscreenCanvas")}} 也在 web worker 中可用。
+
+{{domxref("CanvasCaptureMediaStream")}} 也是一个相关的接口。
## 教程与指导
-- [Canvas 教程](/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial)
- - : 一个综合性教程，包括了\<canvas>的基本用法与高级功能。
-- [代码片段：Canvas](/zh-CN/Add-ons/Code_snippets/Canvas)
- - : 一些面向开发者的 \<canvas> 代码片段。
-- [深入 HTML5 Canvas](http://joshondesign.com/p/books/canvasdeepdive/title.html)
- - : 一个手把手的、长度与书本相若的 Canvas API 和 WebGL 介绍。
-- [使用 canvas 绘制视频](/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)
- - : 结合{{HTMLElement("video")}}和 {{HTMLElement("canvas")}}来实现实时操作视频数据。
+- [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)
+ - : 一个综合性教程，涵盖了 Canvas API 的基本用法与高级特性。
+- [深入 HTML5 Canvas](https://joshondesign.com/p/books/canvasdeepdive/title.html)
+ - : 一个手把手的、长度与书本相当的 Canvas API 和 WebGL 介绍。
+- [Canvas 手册](https://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html)
+ - : Canvas API 的便捷参考。
+- [使用 canvas 操控视频](/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)
+ - : 结合 {{HTMLElement("video")}} 和 {{HTMLElement("canvas")}} 来实现视频数据的实时操控。
## 库
-Canvas API 是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快和更简单。
+Canvas API 是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快、更简单。
-- [EaselJS](http://www.createjs.com/easeljs) 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源 canvas 库
-- [Fabric.js](http://fabricjs.com) 具有 SVG 解析功能的开源 canvas 库
-- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) 基于 canvas 的热点图的开源库
-- [JavaScript InfoVis Toolkit](http://thejit.org/) 创建交互式的 2D Canvas 数据可视化
-- [Konva.js](https://konvajs.github.io/) 用于桌面端和移动端应用的 2D canvas 库
-- [p5.js](https://p5js.org/) 包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能
-- [Paper.js](http://paperjs.org/) 运行于 HTML5 Canvas 上的开源矢量图形脚本框架
-- [Phaser](https://phaser.io/) 用于基于 Canvas 和 WebGL 的浏览器尤其的快速、自由、有趣的开源框架
-- [Processing.js](http://processingjs.org) 用于处理可视化语言
-- [Pts.js](https://ptsjs.org/) 在 canvas 和 SVG 中进行创意性代码写作和可视化的库
-- [Rekapi](https://github.com/jeremyckahn/rekapi) 关键帧动画库
-- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) 用来创建和编辑 2D 图形的开源库
-- [ZIM](http://zimjs.com/) 框架为 canvas 上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程
+- [EaselJS](https://www.createjs.com/easeljs)：使制作游戏、创作类艺术和其他侧重图形化的项目更容易的开源 canvas 库。
+- [Fabric.js](http://fabricjs.com)：具有 SVG 解析功能的开源 canvas 库。
+- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/)：基于 canvas 的数据热力图的开源库。
+- [JavaScript InfoVis Toolkit](https://philogb.github.io/jit/)：创建交互式数据可视化。
+- [Konva.js](https://konvajs.org/)：用于桌面端和移动端应用的 2D canvas 库。
+- [p5.js](https://p5js.org/)：包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能。
+- [Paper.js](http://paperjs.org/)：运行于 HTML Canvas 上的开源矢量图形脚本框架。
+- [Phaser](https://phaser.io/)：用于基于 Canvas 和 WebGL 的浏览器游戏的快速、自由、有趣的开源框架。
+- [Pts.js](https://ptsjs.org)：用于 canvas 和 SVG 的创意编码和可视化的库。
+- [Rekapi](https://github.com/jeremyckahn/rekapi)：用于 Canvas 动画关键帧的 API。
+- [Scrawl-canvas](https://scrawl.rikweb.org.uk/)：用于创建和操控 2D canvas 元素的开源 JavaScript 库。
+- [ZIM](https://zimjs.com)：为在 canvas 上进行创意代码编写提供便利性以及相关组件和控件的框架，包括无障碍和数百个色彩缤纷的教程。
+- [Sprig](https://github.com/hackclub/sprig)：使用 Canvas 实现的基于图块的游戏的开发库，适合初学者并且开源。
-> **备注：** 与 WebGL 有关的 2D 和 3D 的库请参考 [WebGL](/zh-CN/docs/Web/WebGL)。
+> **备注：** 与 WebGL 有关的 2D 和 3D 的库请参见 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)。
-## 标准
+## 规范
{{Specifications}}
## 浏览器兼容性
-Mozilla 程序从 Gecko 1.8 ([Firefox 1.5](/zh-CN/docs/Firefox_1.5_for_developers)) 开始支持 `<canvas>`。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持`<canvas>` ，更旧版本的 IE 中，页面可以通过引入 Google 的 [Explorer Canvas](https://github.com/arv/explorercanvas) 项目中的脚本来获得`<canvas>`支持。Google Chrome 和 Opera 9+ 也支持 `<canvas>`。
+{{Compat}}
-## 其他相关
+## 参见
-- [WebGL](/zh-CN/docs/Web/WebGL)
+- [WebGL](/zh-CN/docs/Web/API/WebGL_API)
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
index eb00b609f05c41..9398b30a14b134 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -5,7 +5,7 @@ slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
{{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
-在[绘制图形](/zh-CN/Canvas_tutorial/Drawing_shapes)的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。
+在[绘制图形](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。
## 色彩
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md
index 6b4d0a2a3747aa..54e445aeac3b34 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.md
@@ -1,61 +1,100 @@
---
title: CanvasRenderingContext2D.createImageData()
slug: Web/API/CanvasRenderingContext2D/createImageData
+l10n:
+ sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
---
{{APIRef}}
-**`CanvasRenderingContext2D.createImageData()`** 是 Canvas 2D API 创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的。
+Canvas 2D API 的 **`CanvasRenderingContext2D.createImageData()`** 方法用于创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。所有的像素在新对象中都是透明的黑色。
## 语法
-```plain
-ImageData ctx.createImageData(width, height);
-ImageData ctx.createImageData(imagedata);
+```js-nolint
+createImageData(width, height)
+createImageData(width, height, settings)
+createImageData(imagedata)
```
### 参数
- `width`
- - : {{domxref("ImageData")}} 新对象的宽度。
+ - : 新 `ImageData` 对象的宽度。如果是负值，将围绕垂直轴翻转矩形。
- `height`
- - : {{domxref("ImageData")}} 新对象的高度。
+ - : 新 `ImageData` 对象的高度。如果是负值，将围绕水平轴翻转矩形。
+- `settings` {{optional_inline}}
+ - : 一个包含以下属性的对象：
+ - `colorSpace`：指定图像数据的色彩空间。可以设置为 `"srgb"` 表示 [sRGB 色彩空间](https://zh.wikipedia.org/wiki/SRGB色彩空间)，或 `"display-p3"` 表示 [display-p3 色彩空间](https://zh.wikipedia.org/wiki/DCI-P3)。
- `imagedata`
- - : 从现有的 {{domxref("ImageData")}} 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。
+ - : 要复制宽度和高度的现有 `ImageData` 对象。**不**会复制图像本身。
### 返回值
-指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。新对象使用透明的像素进行填充。
+指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。新对象使用透明的黑色像素进行填充。
-### 抛出错误
+### 错误
- `IndexSizeError`
- - : 如果宽度或者高度变量值为零，会抛出此异常。
+ - : 如果参数 `width` 或者 `height` 为零，会抛出此异常。
## 示例
-### 使用 `createImageData` 方法
+### 创建空的 ImageData 对象
-这是一段简单地使用 `createImageData` 方法的代码片段。获取更多信息，请看 [canvas 像素控制](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData")}} 对象。
-
-#### HTML
+这段代码使用 `createImageData()` 方法创建一个空的 `ImageData` 对象。
```html
<canvas id="canvas"></canvas>
```
-#### JavaScript
+生成的对象宽度为 100 像素，高度为 50 像素，总共包含 5,000 个像素点。每个像素点在 `ImageData` 对象中由四个数组值表示，因此对象的 {{domxref("ImageData.data", "data")}} 属性的长度为 4 × 5,000，即 20,000。
```js
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+const imageData = ctx.createImageData(100, 50);
+console.log(imageData);
+// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }
+```
+
+### 填充空的 ImageData 对象
+
+这个示例创建了一个新的 `ImageData` 对象，并使用紫色像素填充。
+
+```html
+<canvas id="canvas"></canvas>
+```
-console.log(ctx.createImageData(100, 100));
-// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+由于每个像素点由四个值表示，`for` 循环每次迭代增加四个值。与每个像素相关联的数组值分别是 R（红色）、G（绿色）、B（蓝色）和 A（透明度），顺序如上。
+
+```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const imageData = ctx.createImageData(100, 100);
+
+// 遍历每个像素点
+for (let i = 0; i < imageData.data.length; i += 4) {
+ // 修改像素数据
+ imageData.data[i + 0] = 190; // R 值
+ imageData.data[i + 1] = 0; // G 值
+ imageData.data[i + 2] = 210; // B 值
+ imageData.data[i + 3] = 255; // A 值
+}
+
+// 将图像数据绘制到画布上
+ctx.putImageData(imageData, 20, 20);
```
+#### 结果
+
+{{EmbedLiveSample("创建空的_ImageData_对象", 700, 180)}}
+
+### 更多示例
+
+关于使用 `createImageData()` 和 `ImageData` 对象的更多示例，请参阅[使用 Canvas 进行像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData.data")}}。
+
## 规范
{{Specifications}}
@@ -64,16 +103,8 @@ console.log(ctx.createImageData(100, 100));
{{Compat}}
-### 兼容性注解
-
-- 从 Gecko 5.0 开始：
-
- - 如果矩形小于指定的 1 个像素，`createImageData()` 会返回图像数据至少 1 个像素值。
- - 当调用 `createImageData()` 指定非限制值时，会抛出`NOT_SUPPORTED_ERR` exception 异常。
- - `createImageData()` 根据规定处理负数变量，会围绕对称轴翻转矩形区域。
-
## 参见
-- 接口定义，{{domxref("CanvasRenderingContext2D")}}.
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
- {{domxref("ImageData")}}
-- [canvas 像素控制](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)
+- [使用 Canvas 进行像素操作](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
index 0cdee1b82ec2d8..d91e60ddf4a423 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
@@ -1,38 +1,44 @@
---
-title: CanvasRenderingContext2D.drawFocusIfNeeded()
+title: CanvasRenderingContext2D：drawFocusIfNeeded() 方法
slug: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
+l10n:
+ sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
---
{{APIRef}}
-**`CanvasRenderingContext2D.drawFocusIfNeeded()`** 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点。
+Canvas 2D API 的 **`CanvasRenderingContext2D.drawFocusIfNeeded()`** 方法用于当指定的元素处于焦点状态时在当前或指定路径周围绘制焦点环。
## 语法
-```
-void ctx.drawFocusIfNeeded(element);
-void ctx.drawFocusIfNeeded(path, element);
+```js-nolint
+drawFocusIfNeeded(element)
+drawFocusIfNeeded(path, element)
```
### 参数
-- element
- - : 是否需要设置焦点的元素。
+- `element`
+ - : 要检查是否处于焦点状态的元素。
- `path`
- : {{domxref("Path2D")}} 路径。
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
## 示例
-### 控制按钮焦点
+### 管理按钮焦点
-这是一段使用 `drawFocusIfNeeded` 方法的简单的代码片段。
+这个例子在画布上绘制了两个按钮。使用 `drawFocusIfNeeded()` 方法在适当的时候绘制焦点环。
#### HTML
```html
<canvas id="canvas">
- <button id="button1">Continue</button>
- <button id="button2">Quit</button>
+ <button id="button1">继续</button>
+ <button id="button2">退出</button>
</canvas>
```
@@ -56,17 +62,17 @@ function redraw() {
}
function handleClick(e) {
- // Calculate click coordinates
+ // 计算点击坐标
const x = e.clientX - canvas.offsetLeft;
const y = e.clientY - canvas.offsetTop;
- // Focus button1, if appropriate
+ // 如果合适，聚焦 button1
drawButton(button1, 20, 20);
if (ctx.isPointInPath(x, y)) {
button1.focus();
}
- // Focus button2, if appropriate
+ // 如果合适，聚焦 button2
drawButton(button2, 20, 80);
if (ctx.isPointInPath(x, y)) {
button2.focus();
@@ -78,29 +84,29 @@ function drawButton(el, x, y) {
const width = 150;
const height = 40;
- // Button background
+ // 按钮背景
ctx.fillStyle = active ? "pink" : "lightgray";
ctx.fillRect(x, y, width, height);
- // Button text
+ // 按钮文本
ctx.font = "15px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = active ? "blue" : "black";
ctx.fillText(el.textContent, x + width / 2, y + height / 2);
- // Define clickable area
+ // 定义可点击区域
ctx.beginPath();
ctx.rect(x, y, width, height);
- // Draw focus ring, if appropriate
+ // 如果合适，绘制焦点环
ctx.drawFocusIfNeeded(el);
}
```
#### 结果
-{{EmbedLiveSample('控制按钮焦点', 700, 180)}}
+{{EmbedLiveSample('管理按钮焦点', 700, 180)}}
## 规范
@@ -112,4 +118,4 @@ function drawButton(el, x, y) {
## 参见
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
+- 定义此方法的接口：{{domxref("CanvasRenderingContext2D")}}
diff --git a/files/zh-cn/web/api/dedicatedworkerglobalscope/index.md b/files/zh-cn/web/api/dedicatedworkerglobalscope/index.md
index 6121279956dd11..98650c9c0dff02 100644
--- a/files/zh-cn/web/api/dedicatedworkerglobalscope/index.md
+++ b/files/zh-cn/web/api/dedicatedworkerglobalscope/index.md
@@ -7,66 +7,22 @@ slug: Web/API/DedicatedWorkerGlobalScope
**`DedicatedWorkerGlobalScope`** 对象（也就是 {{domxref("Worker")}} 全局作用域）可以通过 {{domxref("window.self","self")}} 关键字来访问。一些在 worker 全局作用域下不可用的全局函数、命名空间对象以及构造器，也可以通过此对象使用。在 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference)的 [Web Workers 可以使用的函数和类](/zh-CN/docs/Web/Guide/Needs_categorization/Functions_available_to_workers)页面中，有列举这些特性。
-## 属性
+## 实例属性
-_该接口从 {{domxref("WorkerGlobalScope")}} 接口以及它的父接口 {{domxref("EventTarget")}} 继承属性，因此，此接口也实现了来自 {{domxref("WindowTimers")}}、{{domxref("WindowBase64")}} 的属性。_
+_该接口从 {{domxref("WorkerGlobalScope")}} 接口以及它的父接口 {{domxref("EventTarget")}} 继承属性。_
- {{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}
- : 通过 {{domxref("Worker.Worker", "Worker()")}} 构造器创建 {{domxref("Worker")}} 时，可以选择为其设置一个名称，即此属性的值。这主要用于调试。
-### 从 WorkerGlobalScope 继承的属性
+## 实例方法
-- {{domxref("WorkerGlobalScope.self")}}
- - : 返回一个指向 `DedicatedWorkerGlobalScope` 本身的对象引用。
-- {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
- - : 返回与当前 worker 相关联的 {{domxref("Console")}}。
-- {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
- - : 返回与当前 worker 相关联的 {{domxref("WorkerLocation")}}。`WorkerLocation` 是一个 worker 专有的 location 对象，基本上是浏览器作用域下 {{domxref("Location")}} 的子集，但被被适配给了 worker。
-- {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
- - : 返回与当前 worker 相关联的 {{domxref("WorkerNavigator")}}。`WorkerNavigator` 是一个 worker 专有的 navigator 对象，基本上是浏览器作用域下 {{domxref("Navigator")}} 的子集，但被被适配给了 worker。
-- {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
- - : 返回与当前 worker 相关联的 {{domxref("Performance")}}，是一个正常的 performance 对象，但只有一部分属性和方法可用。
-
-### 事件处理器
-
-_该接口从 {{domxref("WorkerGlobalScope")}} 接口以及它的父接口 {{domxref("EventTarget")}} 继承事件处理器，因此，此接口也实现了来自 {{domxref("WindowTimers")}}、{{domxref("WindowBase64")}} 的事件处理器。_
-
-- {{domxref("DedicatedWorkerGlobalScope.onmessage")}}
- - : Is an event handler representing the code to be called when the [`message`](/zh-CN/docs/Web/API/BroadcastChannel/message_event) event is raised. These events are of type {{domxref("MessageEvent")}} and will be called when the worker receives a message from the document that started it (i.e. from the {{domxref("Worker.postMessage")}} method.)
-- {{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}
- - : Is an event handler representing the code to be called when the [`messageerror`](/zh-CN/docs/Web/API/DedicatedWorkerGlobalScope/messageerror_event) event is raised.
-
-## 方法
-
-_该接口从 {{domxref("WorkerGlobalScope")}} 接口以及它的父接口 {{domxref("EventTarget")}} 继承方法，因此，此接口也实现了来自 {{domxref("WindowTimers")}}、{{domxref("WindowBase64")}} 的方法。_
+_该接口从 {{domxref("WorkerGlobalScope")}} 接口以及它的父接口 {{domxref("EventTarget")}} 继承方法。_
- {{domxref("WorkerGlobalScope.close()")}}
- : 抛弃当前 `WorkerGlobalScope` 的 event loop 中所有正在排队的任务，关闭当前作用域。
- {{domxref("DedicatedWorkerGlobalScope.postMessage")}}
- : 向该 worker 的父文档发送消息——消息可以是任何 Javascript 对象。
-### 从 WorkerGlobalScope 继承的方法
-
-- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
- - : 向控制台写入一条消息。
-- {{domxref("WorkerGlobalScope.importScripts()")}}
- - : 向当前 worker 的作用域导入一或更多条脚本。可按需导入任意数量的脚本，使用逗号分割参数。比如： `importScripts('foo.js', 'bar.js');`
-
-### 从其他来源实现的方法
-
-- {{domxref("WindowBase64.atob()")}}
- - : 解码使用 base-64 编码的字符串数据。
-- {{domxref("WindowBase64.btoa()")}}
- - : 从字符串生成使用 base-64 编码的 ASCII 字符串。
-- {{domxref("WindowTimers.clearInterval()")}}
- - : 取消使用 {{domxref("WindowTimers.setInterval()")}} 创建的定时操作。
-- {{domxref("WindowTimers.clearTimeout()")}}
- - : 取消使用 {{domxref("WindowTimers.setTimeout()")}} 创建的定时操作。
-- {{domxref("WindowTimers.setInterval()")}}
- - : 每隔一定时间执行一次给定函数。
-- {{domxref("WindowTimers.setTimeout()")}}
- - : 延迟一定时间执行给定函数。
-
## 事件
- [`message`](/zh-CN/docs/Web/API/DedicatedWorkerGlobalScope/message_event)
diff --git a/files/zh-cn/web/api/device_orientation_events/detecting_device_orientation/index.md b/files/zh-cn/web/api/device_orientation_events/detecting_device_orientation/index.md
index 07c95c2c31e0f5..6abd7d4e552fc7 100644
--- a/files/zh-cn/web/api/device_orientation_events/detecting_device_orientation/index.md
+++ b/files/zh-cn/web/api/device_orientation_events/detecting_device_orientation/index.md
@@ -3,7 +3,7 @@ title: 检测设备方向
slug: Web/API/Device_orientation_events/Detecting_device_orientation
---
-{{SeeCompatTable}}
+{{DefaultAPISidebar("Device Orientation Events")}}{{SeeCompatTable}}
有越来越多的基于 web 的设备能够确定它们的方向; 也就是说，它们可以报告数据以指示基于重力方向的方向改变。特别地，手持设备如手机可以利用这些信息以自动旋转屏幕，保持内容直立，当设备旋转至横屏时（宽度大于高度），提供网页内容的横屏视图。
diff --git a/files/zh-cn/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md b/files/zh-cn/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
index f6a4791208eae7..720f871845dd8b 100644
--- a/files/zh-cn/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
+++ b/files/zh-cn/web/api/device_orientation_events/orientation_and_motion_data_explained/index.md
@@ -3,6 +3,8 @@ title: Orientation 和 motion 数据解释
slug: Web/API/Device_orientation_events/Orientation_and_motion_data_explained
---
+{{DefaultAPISidebar("Device Orientation Events")}}
+
## 总言
当我们要使用 orientation 和 motion 事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。
diff --git a/files/zh-cn/web/api/document/copy_event/index.md b/files/zh-cn/web/api/document/copy_event/index.md
new file mode 100644
index 00000000000000..f81acc9bdaa4d5
--- /dev/null
+++ b/files/zh-cn/web/api/document/copy_event/index.md
@@ -0,0 +1,60 @@
+---
+title: Document：copy 事件
+slug: Web/API/Document/copy_event
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+---
+
+{{APIRef}}
+
+**`copy`** 事件会在用户通过浏览器的用户界面发起复制操作时触发。
+
+该事件的原始目标是复制操作的预期目标 {{domxref("Element")}}。你可以在 {{domxref("Document")}} 接口上监听该事件，以便在捕获或冒泡阶段处理该事件。有关此事件的详细信息，请参阅 [Element：copy 事件](/zh-CN/docs/Web/API/Element/copy_event)页面。
+
+## 语法
+
+在 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称，或者设置事件处理器属性。
+
+```js
+addEventListener("copy", (event) => {});
+
+oncopy = (event) => {};
+```
+
+## 事件类型
+
+{{domxref("ClipboardEvent")}}。继承自 {{domxref("Event")}}。
+
+{{InheritanceDiagram("ClipboardEvent")}}
+
+## 示例
+
+要在用户从网页复制数据到剪贴板时收到通知，你可以使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 将处理器添加到你的 {{domxref("Document")}} 实例，就像这样：
+
+```js
+document.addEventListener("copy", (event) => {
+ /* 会话已关闭 */
+});
+```
+
+或者，也可以使用 `Document.oncopy` 事件处理器属性来为 `copy` 事件建立一个处理器：
+
+```js
+document.oncopy = (event) => {
+ /* 会话已关闭 */
+};
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 相关事件：{{domxref("Document/cut_event", "cut")}}、{{domxref("Document/paste_event", "paste")}}
+- 以 {{domxref("Element")}} 为目标的此事件：{{domxref("Element/copy_event", "copy")}}
+- 以 {{domxref("Window")}} 为目标的此事件：{{domxref("Window/copy_event", "copy")}}
diff --git a/files/zh-cn/web/api/document/createevent/index.md b/files/zh-cn/web/api/document/createevent/index.md
index 8d33ee6768273d..3a1cf3e7e89f4c 100644
--- a/files/zh-cn/web/api/document/createevent/index.md
+++ b/files/zh-cn/web/api/document/createevent/index.md
@@ -1,255 +1,65 @@
---
-title: Document.createEvent()
+title: Document：createEvent() 方法
slug: Web/API/Document/createEvent
+l10n:
+ sourceCommit: c024a4b59fb38fe8df1c9d117d5209c0c8c47b54
---
-> **警告：** `createEvent` 使用的许多方法，如 `initCustomEvent`，都被废弃了。请使用 [event constructors](/zh-CN/docs/Web/API/CustomEvent) 来替代。
+{{APIRef("DOM")}}
-{{ ApiRef("DOM") }}
+> **警告：** 与 `createEvent` 一起使用的许多方法（例如 `initCustomEvent`）已被弃用。请使用 [event 构造函数](/zh-CN/docs/Web/API/CustomEvent)代替。
-创建一个指定类型的[事件](/zh-CN/docs/Web/API/Event)。其返回的对象必须先初始化并可以被传递给 [element.dispatchEvent](/zh-CN/docs/DOM/element.dispatchEvent)。
+创建指定类型的[事件](/zh-CN/docs/Web/API/Event)。应首先初始化返回的对象，然后将其传递给 {{domxref("EventTarget.dispatchEvent")}}。
## 语法
+```js-nolint
+createEvent(type)
```
-var event = document.createEvent(type);
-```
-- `event` 就是被创建的 [Event](/zh-CN/docs/DOM/event) 对象。
-- `type` 是一个字符串，表示要创建的事件类型。事件类型可能包括`"UIEvents"`、`"MouseEvents"`、`"MutationEvents"` 或者 `"HTMLEvents"`。请查看[注意](#注意)小节获取详细信息。
+### 参数
+
+- `type`
+ - : 表示要创建的事件类型的字符串。可能的事件类型包括 `"UIEvents"`、`"MouseEvents"`、`"MutationEvents"` 和 `"HTMLEvents"`。请参阅[备注](#备注)部分了解详细信息。
+
+### 返回值
+
+[Event](/zh-CN/docs/Web/API/Event) 对象。
## 示例
```js
// 创建事件
-var event = document.createEvent("Event");
+const event = document.createEvent("Event");
-// 定义事件名为'build'.
+// 定义事件名称为 'build'。
event.initEvent("build", true, true);
-// 监听事件
+// 监听事件。
elem.addEventListener(
"build",
- function (e) {
- // e.target matches elem
+ (e) => {
+ // e.target 与元素匹配
},
false,
);
-// 触发对象可以是任何元素或其他事件目标
+// 目标可以是任何元素或其他 EventTarget。
elem.dispatchEvent(event);
```
-### 参考
-
-- [Creating and triggering events](/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events)
-
-## 注意
-
-Event type 字符串只能传递事件模块中定义的值给 CreateEvent。其中一些事件模块是在 DOM 事件规范定义的，还有些事在其他规范定义的（如 SVG），还有一些是 Gecko-specific 事件。详情见下表。
-
-_To-do: 添加事件名称到下表中。_
-
-<table class="fullwidth-table">
- <tbody>
- <tr>
- <th>事件模块</th>
- <th>传递给 <code>createEvent</code> 的 Event type</th>
- <th>事件初始化方法</th>
- </tr>
- <tr style="background-color: #eee">
- <td colspan="3">
- <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings"
- >DOM Level 2 Events</a
- >
- </td>
- </tr>
- <tr>
- <td>User Interface event module</td>
- <td><code>"UIEvents"</code></td>
- <td><a href="/zh-CN/docs/DOM/event.initUIEvent">event.initUIEvent</a></td>
- </tr>
- <tr>
- <td>Mouse event module</td>
- <td><code>"MouseEvents"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initMouseEvent">event.initMouseEvent</a>
- </td>
- </tr>
- <tr>
- <td>Mutation event module</td>
- <td><code>"MutationEvents"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initMutationEvent"
- >event.initMutationEvent</a
- >
- </td>
- </tr>
- <tr>
- <td>HTML event module</td>
- <td><code>"HTMLEvents"</code></td>
- <td><a href="/zh-CN/docs/DOM/event.initEvent">event.initEvent</a></td>
- </tr>
- <tr style="background-color: #eee">
- <td colspan="3">
- <a href="http://www.w3.org/TR/DOM-Level-3-Events/"
- >DOM Level 3 Events</a
- >
- </td>
- </tr>
- <tr>
- <td>User Interface event module</td>
- <td><code>"UIEvent"</code>, <code>"UIEvents"</code></td>
- <td><a href="/zh-CN/docs/DOM/event.initUIEvent">event.initUIEvent</a></td>
- </tr>
- <tr>
- <td>Mouse event module</td>
- <td><code>"MouseEvent"</code>, <code>"MouseEvents"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initMouseEvent">event.initMouseEvent</a>
- </td>
- </tr>
- <tr>
- <td>Mutation event module</td>
- <td><code>"MutationEvent"</code>, <code>"MutationEvents"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initMutationEvent"
- >event.initMutationEvent</a
- >
- </td>
- </tr>
- <tr>
- <td>
- Mutation name event module (not implemented in Gecko as of June 2006)
- </td>
- <td><code>"MutationNameEvent"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initMutationNameEvent"
- >event.initMutationNameEvent</a
- >
- </td>
- </tr>
- <tr>
- <td>Text event module</td>
- <td>
- <code>"TextEvent"</code> (Gecko also supports <code>"TextEvents"</code>)
- </td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initTextEvent">event.initTextEvent</a>
- (not implemented)
- </td>
- </tr>
- <tr>
- <td>Keyboard event module</td>
- <td>
- <code>"KeyboardEvent"</code> (Gecko also supports
- <code>"KeyEvents"</code>)
- </td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initKeyEvent">event.initKeyEvent</a>
- (Gecko-specific; the DOM 3 Events working draft uses
- <code>initKeyboardEvent</code> instead)
- </td>
- </tr>
- <tr>
- <td>Custom event module</td>
- <td><code>"CustomEvent"</code></td>
- <td><a href="/zh-CN/docs/DOM/CustomEvent">event.initCustomEvent</a></td>
- </tr>
- <tr>
- <td>Basic events module</td>
- <td><code>"Event"</code> (Gecko also supports <code>"Events"</code>)</td>
- <td><a href="/zh-CN/docs/DOM/event.initEvent">event.initEvent</a></td>
- </tr>
- <tr style="background-color: #eee">
- <td colspan="3">
- <a href="http://www.w3.org/TR/SVG/script.html#DOMInterfaces"
- >SVG 1.1 Scripting</a
- >
- </td>
- </tr>
- <tr>
- <td rowspan="2">SVG</td>
- <td>
- <code>"SVGEvents"</code> (Gecko also supports <code>"SVGEvent"</code>)
- </td>
- <td><a href="/zh-CN/docs/DOM/event.initEvent">event.initEvent</a></td>
- </tr>
- <tr>
- <td>
- <code>"SVGZoomEvents"</code> (Gecko also supports
- <code>"SVGZoomEvent"</code>)
- </td>
- <td><a href="/zh-CN/docs/DOM/event.initUIEvent">event.initUIEvent</a></td>
- </tr>
- <tr style="background-color: #eee">
- <td colspan="3">Other event types supported by Gecko</td>
- </tr>
- <tr>
- <td rowspan="4">-</td>
- <td><code>"MessageEvent"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initMessageEvent"
- >event.initMessageEvent</a
- >
- </td>
- </tr>
- <tr>
- <td><code>"MouseScrollEvents"</code>, <code>"PopupEvents"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initMouseEvent">event.initMouseEvent</a>
- </td>
- </tr>
- <tr>
- <td><code>"PopupBlockedEvents"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initPopupBlockedEvent"
- >event.initPopupBlockedEvent</a
- >
- </td>
- </tr>
- <tr>
- <td><code>"XULCommandEvent"</code>, <code>"XULCommandEvents"</code></td>
- <td>
- <a href="/zh-CN/docs/DOM/event.initCommandEvent"
- >event.initCommandEvent</a
- >
- </td>
- </tr>
- <tr>
- <td>Progress Events</td>
- <td><code>"ProgressEvent"</code></td>
- <td>
- {{domxref("ProgressEvent.initProgressEvent()")}}{{deprecated_inline}}{{non-standard_inline()}}
- </td>
- </tr>
- <tr>
- <td>Animation Events</td>
- <td>
- <code>"AnimationEvent"</code> (or
- <code>"WebKitAnimationEvent"</code> for WebKit/Blink-based browsers)
- </td>
- <td>
- {{domxref("AnimationEvent.initAnimationEvent()")}}{{deprecated_inline}}{{non-standard_inline()}}
- </td>
- </tr>
- <tr>
- <td>Transition Events</td>
- <td>
- <code>"TransitionEvent"</code> (or
- <code>"WebKitTransitionEvent"</code> for WebKit/Blink-based browsers)
- </td>
- <td>
- {{domxref("TransitionEvent.initTransitionEvent()")}}{{deprecated_inline}}{{non-standard_inline()}}
- </td>
- </tr>
- </tbody>
-</table>
-
-有些事件可以使用两种事件类型参数，这是因为 DOM Level 3 Events 将事件类型参数更改为单数形式，但是仍然支持老的复数形式以向后兼容。
+## 备注
+
+适合传递给 `createEvent()` 的事件类型字符串列于 [DOM 标准——参见步骤 2 中的表格](https://dom.spec.whatwg.org/#dom-document-createevent)。请记住，大多数事件对象现在都有构造函数，这是创建事件对象实例的现代推荐方法。
## 规范
-- [DOM Level 2 Events: createEvent](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent)
-- [DOM Level 3 Events: createEvent](http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent)
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [创建和触发事件](/zh-CN/docs/Web/Events/Creating_and_triggering_events)
diff --git a/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.md
deleted file mode 100644
index 5a9a5ef68afdf2..00000000000000
--- a/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: 如何创建一个 DOM 树
-slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree
----
-
-{{DefaultAPISidebar("DOM")}}
-
-本页描述了如何使用 JavaScript 中的 DOM API 创建 XML 文档。
-
-考虑如下 XML 文档：
-
-```xml
-<?xml version="1.0"?>
-<people>
- <person first-name="eric" middle-initial="H" last-name="jung">
- <address street="321 south st" city="denver" state="co" country="usa"/>
- <address street="123 main st" city="arlington" state="ma" country="usa"/>
- </person>
-
- <person first-name="jed" last-name="brown">
- <address street="321 north st" city="atlanta" state="ga" country="usa"/>
- <address street="123 west st" city="seattle" state="wa" country="usa"/>
- <address street="321 south avenue" city="denver" state="co" country="usa"/>
- </person>
-</people>
-```
-
-你可以通过 DOM API 创建该文档的内存表示：
-
-```js
-const doc = document.implementation.createDocument("", "", null);
-const peopleElem = doc.createElement("people");
-
-const personElem1 = doc.createElement("person");
-personElem1.setAttribute("first-name", "eric");
-personElem1.setAttribute("middle-initial", "h");
-personElem1.setAttribute("last-name", "jung");
-
-const addressElem1 = doc.createElement("address");
-addressElem1.setAttribute("street", "321 south st");
-addressElem1.setAttribute("city", "denver");
-addressElem1.setAttribute("state", "co");
-addressElem1.setAttribute("country", "usa");
-personElem1.appendChild(addressElem1);
-
-const addressElem2 = doc.createElement("address");
-addressElem2.setAttribute("street", "123 main st");
-addressElem2.setAttribute("city", "arlington");
-addressElem2.setAttribute("state", "ma");
-addressElem2.setAttribute("country", "usa");
-personElem1.appendChild(addressElem2);
-
-const personElem2 = doc.createElement("person");
-personElem2.setAttribute("first-name", "jed");
-personElem2.setAttribute("last-name", "brown");
-
-const addressElem3 = doc.createElement("address");
-addressElem3.setAttribute("street", "321 north st");
-addressElem3.setAttribute("city", "atlanta");
-addressElem3.setAttribute("state", "ga");
-addressElem3.setAttribute("country", "usa");
-personElem2.appendChild(addressElem3);
-
-const addressElem4 = doc.createElement("address");
-addressElem4.setAttribute("street", "123 west st");
-addressElem4.setAttribute("city", "seattle");
-addressElem4.setAttribute("state", "wa");
-addressElem4.setAttribute("country", "usa");
-personElem2.appendChild(addressElem4);
-
-const addressElem5 = doc.createElement("address");
-addressElem5.setAttribute("street", "321 south avenue");
-addressElem5.setAttribute("city", "denver");
-addressElem5.setAttribute("state", "co");
-addressElem5.setAttribute("country", "usa");
-personElem2.appendChild(addressElem5);
-
-peopleElem.appendChild(personElem1);
-peopleElem.appendChild(personElem2);
-doc.appendChild(peopleElem);
-```
-
-DOM 树可以：
-
-- [使用 XPath 表达式查询](/zh-CN/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript)
-- 使用 [XMLSerializer](/zh-CN/docs/Web/XML/Parsing_and_serializing_XML) 转换为字符串
-- 使用 `XMLHttpRequest` [发布到 web 服务器](/zh-CN/docs/Web/API/XMLHttpRequest)上
-- 使用 [XSLT](/zh-CN/docs/Web/XSLT) 或 [XLink](/zh-CN/docs/Glossary/XLink) 转换
-
-## 参见
-
-- [XML](/zh-CN/docs/Web/XML)
-- [XPath](/zh-CN/docs/Web/XPath)
-- [解析和序列化 XML](/zh-CN/docs/Web/XML/Parsing_and_serializing_XML)
-- [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest)
diff --git a/files/zh-cn/web/api/document_object_model/using_the_document_object_model/index.md b/files/zh-cn/web/api/document_object_model/using_the_document_object_model/index.md
index 33baee73923eb9..ca7ddd5825710d 100644
--- a/files/zh-cn/web/api/document_object_model/using_the_document_object_model/index.md
+++ b/files/zh-cn/web/api/document_object_model/using_the_document_object_model/index.md
@@ -1,13 +1,15 @@
---
title: 使用文档对象模型
slug: Web/API/Document_Object_Model/Using_the_Document_Object_Model
+l10n:
+ sourceCommit: 1f44fd905e4acbe867ca945b26a8b06ddb646328
---
{{DefaultAPISidebar("DOM")}}
_文档对象模型_（DOM）是一个用于操作 HTML 和 XML 文档（包括其他树状文档）的 DOM 树的 API。这个 API 是页面描述的根源，并作为 web 脚本的基础。
-## 什么是内容树？
+## 什么是 DOM 树？
**DOM 树**是一种[树状结构](https://zh.wikipedia.org/wiki/树状结构)，其节点代表 HTML 或 XML 文档内容。每一个 HTML 或 XML 文档都有其 DOM 树表示方法。例如，考虑如下文档：
@@ -35,9 +37,9 @@ _文档对象模型_（DOM）是一个用于操作 HTML 和 XML 文档（包括
文档 API，有时也称为 DOM API，允许你以任何你想要的方式修改 DOM 树。它使你能够从头开始创建任何 HTML 或 XML 文档，或者改变一个给定的 HTML 或 XML 文档的任何内容。网页作者可以使用 JavaScript 来编辑文档的 DOM，访问全局对象的 `document` 属性。这个 `document` 对象实现了 {{domxref("Document")}} 接口。
-## 一个简单的示例
+## 读取并修改 DOM 树
-假设作者改变上面文档的头部内容，并且使用两个段落取代一个段落。实现代码如下：
+假设作者改变上面文档的页眉内容，并且使用两个段落取代一个段落。实现代码如下：
### HTML
@@ -48,7 +50,7 @@ _文档对象模型_（DOM）是一个用于操作 HTML 和 XML 文档（包括
</head>
<body>
<input type="button" value="改变这个文档。" onclick="change()" />
- <h2>头部</h2>
+ <h2>页眉</h2>
<p>段落</p>
</body>
</html>
@@ -61,10 +63,10 @@ function change() {
// document.getElementsByTagName("h2") 返回文档中所有 <h2> 组成的 NodeList，第一项用数字 0 取到：
const header = document.getElementsByTagName("h2").item(0);
- // header 的第一个子节点（firstChild）是一个文本节点
+ // 页眉的第一个子节点（firstChild）是一个文本节点
header.firstChild.data = "一个动态文档";
- // 现在 header 的内容为“一个动态文档”
+ // 现在页眉的内容为“一个动态文档”
// 访问第一个段落
const para = document.getElementsByTagName("p").item(0);
@@ -84,7 +86,32 @@ function change() {
}
```
-{{ EmbedLiveSample('一个简单的示例', 800, 300) }}
+{{ EmbedLiveSample('读取并修改 DOM 树', 800, 300) }}
+
+## 创建 DOM 树
+
+你也可以完全使用 JavaScript 创建上面的树。
+
+```js
+const root = document.createElement("html");
+root.lang = "zh-CN";
+
+const head = document.createElement("head");
+const title = document.createElement("title");
+title.appendChild(document.createTextNode("我的文档"));
+head.appendChild(title);
+
+const body = document.createElement("body");
+const header = document.createElement("h1");
+header.appendChild(document.createTextNode("页眉"));
+const paragraph = document.createElement("p");
+paragraph.appendChild(document.createTextNode("段落"));
+body.appendChild(header);
+body.appendChild(paragraph);
+
+root.appendChild(head);
+root.appendChild(body);
+```
## 想学习更多？
diff --git a/files/zh-cn/web/api/documentfragment/documentfragment/index.md b/files/zh-cn/web/api/documentfragment/documentfragment/index.md
index 9ced3483c560c2..6c7798a8e945e3 100644
--- a/files/zh-cn/web/api/documentfragment/documentfragment/index.md
+++ b/files/zh-cn/web/api/documentfragment/documentfragment/index.md
@@ -1,32 +1,32 @@
---
-title: DocumentFragment()
+title: DocumentFragment：DocumentFragment() 构造函数
slug: Web/API/DocumentFragment/DocumentFragment
+l10n:
+ sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
---
-{{ApiRef("DOM")}}{{seeCompatTable}}
+{{ApiRef("DOM")}}
-**`DocumentFragment()`** 构造函数返回一个新创建的 {{domxref("DocumentFragment")}} 对象。
+**`DocumentFragment()`** 构造函数返回新的空 {{domxref("DocumentFragment")}} 对象。
## 语法
-```plain
-fragment = new DocumentFragment()
+```js-nolint
+new DocumentFragment()
```
-## 示例
+### 参数
-```js
-fragment = new DocumentFragment();
-```
+无。
+
+### 返回值
+
+新的 {{domxref("DocumentFragment")}} 对象。
-## 标准
+## 规范
{{Specifications}}
## 浏览器兼容性
{{Compat}}
-
-## 参见
-
-- [DOM 接口索引](/zh-CN/docs/DOM/DOM_Reference)
diff --git a/files/zh-cn/web/api/domparser/domparser/index.md b/files/zh-cn/web/api/domparser/domparser/index.md
index d15d0dd2f18d5b..0906f3e78f54a3 100644
--- a/files/zh-cn/web/api/domparser/domparser/index.md
+++ b/files/zh-cn/web/api/domparser/domparser/index.md
@@ -3,6 +3,8 @@ title: DOMParser()
slug: Web/API/DOMParser/DOMParser
---
+{{APIRef("DOM")}}
+
**`DOMParser()`** 构造函数新建一个 [`DOMParser`](/zh-CN/docs/Web/API/DOMParser) 对象实例。
## 语法
diff --git a/files/zh-cn/web/api/element/animationstart_event/index.md b/files/zh-cn/web/api/element/animationstart_event/index.md
index 2bd41a41749c94..6fae3c38a80e2b 100644
--- a/files/zh-cn/web/api/element/animationstart_event/index.md
+++ b/files/zh-cn/web/api/element/animationstart_event/index.md
@@ -3,6 +3,8 @@ title: animationstart
slug: Web/API/Element/animationstart_event
---
+{{APIRef}}
+
`animationstart` 事件会在 CSS 动画开始时触发。如果有 `animation-delay` 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 `elapsedTime` 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。
## 基本信息
diff --git a/files/zh-cn/web/api/element/blur_event/index.md b/files/zh-cn/web/api/element/blur_event/index.md
index 4ec3f504c9a3a6..4ec96e8f185380 100644
--- a/files/zh-cn/web/api/element/blur_event/index.md
+++ b/files/zh-cn/web/api/element/blur_event/index.md
@@ -3,6 +3,8 @@ title: blur (event)
slug: Web/API/Element/blur_event
---
+{{APIRef}}
+
当一个元素失去焦点的时候 blur 事件被触发。它和 [`focusout`](/zh-CN/docs/Mozilla_event_reference/focusout) 事件的主要区别是 focusout 支持冒泡。
## 常规信息
diff --git a/files/zh-cn/web/api/element/childelementcount/index.md b/files/zh-cn/web/api/element/childelementcount/index.md
index 72498279843ae5..f29b4404ade7a6 100644
--- a/files/zh-cn/web/api/element/childelementcount/index.md
+++ b/files/zh-cn/web/api/element/childelementcount/index.md
@@ -1,100 +1,32 @@
---
-title: Element.childElementCount
+title: Element：childElementCount 属性
slug: Web/API/Element/childElementCount
+l10n:
+ sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
---
{{ APIRef("DOM") }}
-**`Element.childElementCount`** 只读属性返回一个**_无符号长整型数字_**，表示给定元素的子元素数。
+**`Element.childElementCount`** 只读属性返回该元素的子元素数量。
-> **备注：** This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, `childElementCount` moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.
+## 示例
-## 语法
-
-```
-var count = node.childElementCount;
-```
-
-```
-var elCount = elementNodeReference.childElementCount;
-```
-
-- count
- - : holds the return value an `unsigned long` (simply an integer) type.
-- node
- - : is an object representing a `Document`, `DocumentFragment` or `Element`.
-
-## 例子
-
-```
-var foo = document.getElementById("foo");
-if (foo.childElementCount > 0) {
- // do something
+```js
+let sidebar = document.getElementById("sidebar");
+if (sidebar.childElementCount > 0) {
+ // 做点什么
}
```
-下例演示了一个元素节点的`childElementCount`属性以及`children`属性的用法。
-
-```
-<head>
- <script type="text/javascript">
- function GetChildCount () {
- var container = document.getElementById ("container");
-
- var childCount = 0;
- //如果支持 childElementCount 属性
- if ('childElementCount' in container) {
- childCount = container.childElementCount;
- }
- else {
- //如果支持 children 属性，IE6/7/8
- //译者注：没有判断 nodeType 是否为 1，可能包含注释节点。
- if (container.children) {
- childCount = container.children.length;
- }
- else { //,如果都不支持，Firefox 3.5 之前版本
- var child = container.firstChild;
- while (child) {
- if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
- childCount++;
- }
- child = child.nextSibling;
- }
- }
- }
-
- alert ("The number of child elements is " + childCount);
- }
- </script>
-</head>
-<body>
- <div id="container" style="width:300px; background-color:#a0d0e0;">
- Some text inside the container.
- <input type="text" size="40" value="a child element of the container" />
- <div>
- <div>a descendant element of the container</div>
- <div>another descendant element of the container</div>
- </div>
- </div>
- <br /><br />
- <button onclick="GetChildCount ();">Get the number of container's child elements</button>
-</body>
-```
+## 规范
-执行上面的例子：<http://help.dottoro.com/external/examples/ljsfamht/childElementCount_1.htm>
+{{Specifications}}
## 浏览器兼容性
{{Compat}}
-## 规范
-
-[childElementCount (W3C)](http://www.w3.org/TR/2008/WD-ElementTraversal-20080303/#attribute-childElementCount)
-
## 参见
-- [`children`](/zh-CN/DOM/Element.children)
-- [`firstElementChild`](/zh-CN/DOM/Element.firstElementChild)
-- [`lastElementChild`](/zh-CN/DOM/Element.lastElementChild)
-- [`nextElementSibling`](/zh-CN/DOM/Element.nextElementSibling)
-- [`previousElementSibling`](/zh-CN/DOM/element.previousElementSibling)
+- {{domxref("Document.childElementCount")}}
+- {{domxref("DocumentFragment.childElementCount")}}
diff --git a/files/zh-cn/web/api/element/compositionend_event/index.md b/files/zh-cn/web/api/element/compositionend_event/index.md
index bee6c8ef2f28a8..aa71b20db34508 100644
--- a/files/zh-cn/web/api/element/compositionend_event/index.md
+++ b/files/zh-cn/web/api/element/compositionend_event/index.md
@@ -3,6 +3,8 @@ title: compositionend
slug: Web/API/Element/compositionend_event
---
+{{APIRef}}
+
当文本段落的组成完成或取消时，compositionend 事件将被触发 (具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议)。
<table class="properties">
diff --git a/files/zh-cn/web/api/element/compositionupdate_event/index.md b/files/zh-cn/web/api/element/compositionupdate_event/index.md
index 1471e6aa32f34e..b849130d7e5017 100644
--- a/files/zh-cn/web/api/element/compositionupdate_event/index.md
+++ b/files/zh-cn/web/api/element/compositionupdate_event/index.md
@@ -3,6 +3,8 @@ title: compositionupdate
slug: Web/API/Element/compositionupdate_event
---
+{{APIRef}}
+
**`compositionupdate`** 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）
<table class="properties">
diff --git a/files/zh-cn/web/api/element/dblclick_event/index.md b/files/zh-cn/web/api/element/dblclick_event/index.md
index d718e00411b3d6..b8d77bbebc90a8 100644
--- a/files/zh-cn/web/api/element/dblclick_event/index.md
+++ b/files/zh-cn/web/api/element/dblclick_event/index.md
@@ -3,6 +3,8 @@ title: dblclick
slug: Web/API/Element/dblclick_event
---
+{{APIRef}}
+
在单个元素上单击两次鼠标的指针设备按钮 (通常是小鼠的主按钮) 时，将触发 `dblclick` 事件。
## 常规信息
diff --git a/files/zh-cn/web/api/element/focus_event/index.md b/files/zh-cn/web/api/element/focus_event/index.md
index dfd2a34d9d6623..aa7a2c6e74f14a 100644
--- a/files/zh-cn/web/api/element/focus_event/index.md
+++ b/files/zh-cn/web/api/element/focus_event/index.md
@@ -3,6 +3,8 @@ title: 元素：focus 事件
slug: Web/API/Element/focus_event
---
+{{APIRef}}
+
**`focus`** 事件在元素获取焦点时触发。这个事件和 {{domxref("Element/focusin_event", "focusin")}} 最大的区别仅仅在于后者会事件冒泡。
`focus` 与 {{domxref("Element/blur_event", "blur")}} 正好相反。
diff --git a/files/zh-cn/web/api/element/focusout_event/index.md b/files/zh-cn/web/api/element/focusout_event/index.md
index 65420f7ff87233..7e7ed60bb169ed 100644
--- a/files/zh-cn/web/api/element/focusout_event/index.md
+++ b/files/zh-cn/web/api/element/focusout_event/index.md
@@ -3,6 +3,8 @@ title: focusout
slug: Web/API/Element/focusout_event
---
+{{APIRef}}
+
当元素即将失去焦点时，focusout 事件被触发。focusout 事件和 [blur](/zh-CN/docs/Web/Events/blur) 事件之间的主要区别在于后者不会冒泡。
## 基本信息
diff --git a/files/zh-cn/web/api/element/fullscreenchange_event/index.md b/files/zh-cn/web/api/element/fullscreenchange_event/index.md
index 584c9fa76c26df..a236b7132031e4 100644
--- a/files/zh-cn/web/api/element/fullscreenchange_event/index.md
+++ b/files/zh-cn/web/api/element/fullscreenchange_event/index.md
@@ -3,6 +3,8 @@ title: Element.onfullscreenchange
slug: Web/API/Element/fullscreenchange_event
---
+{{APIRef}}
+
元素接口的 **`onfullscreenchange`** 属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。
## 语法
diff --git a/files/zh-cn/web/api/element/pointerenter_event/index.md b/files/zh-cn/web/api/element/pointerenter_event/index.md
index 8d5744b7fad840..77efd07f411da4 100644
--- a/files/zh-cn/web/api/element/pointerenter_event/index.md
+++ b/files/zh-cn/web/api/element/pointerenter_event/index.md
@@ -3,6 +3,8 @@ title: GlobalEventHandlers.onpointerenter
slug: Web/API/Element/pointerenter_event
---
+{{APIRef}}
+
HTML DOMpointerenter 事件的 GlobalEventHandlers（全局事件处理函数）
```js
diff --git a/files/zh-cn/web/api/element/touchcancel_event/index.md b/files/zh-cn/web/api/element/touchcancel_event/index.md
index 9d2d54f5a5b464..5fb0c03ed51991 100644
--- a/files/zh-cn/web/api/element/touchcancel_event/index.md
+++ b/files/zh-cn/web/api/element/touchcancel_event/index.md
@@ -3,6 +3,8 @@ title: Element：touchcancel 事件
slug: Web/API/Element/touchcancel_event
---
+{{APIRef}}
+
`touchcancel` 事件在触点被中断时触发，中断方式基于特定实现而有所不同（例如，创建了太多的触点）。
## 语法
diff --git a/files/zh-cn/web/api/event/currenttarget/index.md b/files/zh-cn/web/api/event/currenttarget/index.md
index 846d394b3b24f9..fa815622a010cb 100644
--- a/files/zh-cn/web/api/event/currenttarget/index.md
+++ b/files/zh-cn/web/api/event/currenttarget/index.md
@@ -1,44 +1,82 @@
---
-title: Event.currentTarget
+title: Event：currentTarget 属性
slug: Web/API/Event/currentTarget
+l10n:
+ sourceCommit: e2db3e53b257e07b5c469f8af5a68bd0d9db08d7
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-{{domxref("Event")}} 接口的只读属性 **`currentTarget`** 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 {{domxref("Event.target")}} 则是事件触发的元素。
+{{domxref("Event")}} 接口的 **`currentTarget`** 只读属性用于标识事件处理器所附加的元素。
-## 语法
+这并不总是与触发事件的元素相同，因为事件可能在具有处理器的元素的后代上触发，然后通过事件[冒泡](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#事件冒泡)到具有处理器的元素。事件的触发元素由 {{domxref("Event.target")}} 给出。
-```plain
-var currentEventTarget = event.currentTarget;
-```
+请注意，`currentTarget` 的值仅在事件处理器中可用。在事件处理器外部，它将为 `null`。这意味着，例如，如果在事件处理器内部获得 `Event` 对象的引用然后在事件处理器外部访问其 `currentTarget` 属性，则其值将为 `null`。
-### Value
+## 值
-{{domxref("EventTarget")}}
+一个 {{domxref("EventTarget")}}，表示当前事件处理器所附加的对象。
-## 例子
+## 示例
-当将相同的事件处理程序附加到多个元素时 `event.currentTarget` 就很有用。
+### currentTarget 与 target 的区别
-```js
-function hide(e) {
- e.currentTarget.style.visibility = "hidden";
- console.log(e.currentTarget);
- // 该函数用作事件处理器时：this === e.currentTarget
-}
+此示例说明了 `currentTarget` 和 `target` 之间的区别。
+
+#### HTML
+
+页面包含一个包含“子元素” `<div>` 的“父元素” {{htmlelement("div")}}。
-var ps = document.getElementsByTagName("p");
+```html
+<div id="parent">
+ 点击父元素
+ <div id="child">点击子元素</div>
+</div>
+
+<button id="reset">重置</button>
+<pre id="output"></pre>
+```
+
+```css hidden
+button,
+div,
+pre {
+ margin: 0.5rem;
+}
-for (var i = 0; i < ps.length; i++) {
- // console: 打印被点击的 p 元素
- ps[i].addEventListener("click", hide, false);
+div {
+ padding: 1rem;
+ border: 1px solid black;
}
-// console: 打印 body 元素
-document.body.addEventListener("click", hide, false);
```
-> **备注：** `event.currentTarget` 的值*只能*在事件处理过程中被使用。如果你尝试用 {{DOMxRef("console.log()")}} 在控制台打印 `event` 对象，你会发现 `currentTarget` 的值是 `null`。如果你想在控制台打印 `currentTarget` 的值，你应该使用 `console.log(event.currentTarget)`，或者也可以在代码中使用 [`debugger`](/zh-CN/docs/Web/JavaScript/Reference/Statements/debugger) 语句来暂停代码的执行从而看到 `event.currentTarget` 的值。
+#### JavaScript
+
+事件处理器被附加到父元素。它记录 `event.currentTarget` 和 `event.target` 的值。
+
+我们还有一个用于重新加载示例的“重置”按钮。
+
+```js
+const output = document.querySelector("#output");
+const parent = document.querySelector("#parent");
+parent.addEventListener("click", (event) => {
+ const currentTarget = event.currentTarget.getAttribute("id");
+ const target = event.target.getAttribute("id");
+ output.textContent = `当前目标：${currentTarget}\n`;
+ output.textContent += `目标：${target}`;
+});
+
+const reset = document.querySelector("#reset");
+reset.addEventListener("click", () => document.location.reload());
+```
+
+#### 结果
+
+如果你在子 `<div>` 中点击，则 `target` 将标识子元素。如果你在父 `<div>` 中点击，则 `target` 将标识父元素。
+
+在这两种情况下，`currentTarget` 都标识父元素，因为那是处理器附加到的元素。
+
+{{EmbedLiveSample("currentTarget 与 target 的区别", 100, 250)}}
## 规范
@@ -48,6 +86,7 @@ document.body.addEventListener("click", hide, false);
{{Compat}}
-## 参考
+## 参见
-- [Comparison of Event Targets](/zh-CN/docs/Web/API/Event/Comparison_of_Event_Targets)
+- [事件目标的比较](/zh-CN/docs/Web/API/Event/Comparison_of_Event_Targets)
+- [事件冒泡](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#事件冒泡)
diff --git a/files/zh-cn/web/api/event/index.md b/files/zh-cn/web/api/event/index.md
index ce8be70654e592..e52cdf2cb44d6e 100644
--- a/files/zh-cn/web/api/event/index.md
+++ b/files/zh-cn/web/api/event/index.md
@@ -1,11 +1,13 @@
---
title: Event
slug: Web/API/Event
+l10n:
+ sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e
---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{AvailableInWorkers}}
-**`Event`** 接口表示在 DOM 中出现的事件。
+**`Event`** 接口表示在 [`EventTarget`](/zh-CN/docs/Web/API/EventTarget) 上出现的事件。
一些事件是由用户触发的，例如鼠标或键盘事件；或者由 API 生成以表示异步任务的进度。事件也可以通过编程方式触发，例如对元素调用 [`HTMLElement.click()`](/zh-CN/docs/Web/API/HTMLElement/click) 方法，或者定义一些自定义事件，再使用 [`EventTarget.dispatchEvent()`](/zh-CN/docs/Web/API/EventTarget/dispatchEvent) 方法将自定义事件派发往指定的目标（target）。
@@ -94,7 +96,7 @@ slug: Web/API/Event
- {{domxref("Event.timeStamp")}} {{ReadOnlyInline}}
- : 事件创建时的时间戳（精度为毫秒）。按照规范，这个时间戳是 Unix 纪元起经过的毫秒数，但实际上，在不同的浏览器中，对此时间戳的定义也有所不同。另外，规范正在将其修改为 {{domxref("DOMHighResTimeStamp")}}。
- {{domxref("Event.type")}} {{ReadOnlyInline}}
- - : 事件的类型，不区分大小写。
+ - : 事件的类型的名称。
### 遗留属性和非标准属性
@@ -133,7 +135,7 @@ slug: Web/API/Event
{{Compat}}
-## 参考
+## 参见
- 可用的事件类型：[Event 参考](/zh-CN/docs/Web/Events)
- [Event 目标的比较](/zh-CN/docs/Web/API/Event/Comparison_of_Event_Targets)（目标 `target` vs 当前目标 `currentTarget` vs 相关目标 `relatedTarget` vs 初始目标 `originalTarget`）
diff --git a/files/zh-cn/web/api/extendablecookiechangeevent/changed/index.md b/files/zh-cn/web/api/extendablecookiechangeevent/changed/index.md
new file mode 100644
index 00000000000000..4a30e065c471d5
--- /dev/null
+++ b/files/zh-cn/web/api/extendablecookiechangeevent/changed/index.md
@@ -0,0 +1,66 @@
+---
+title: ExtendableCookieChangeEvent：changed 属性
+slug: Web/API/ExtendableCookieChangeEvent/changed
+l10n:
+ sourceCommit: 08f7d7ef89c04b824fa246e6fd35d47aebef7b51
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{AvailableInWorkers("service")}}
+
+{{domxref("ExtendableCookieChangeEvent")}} 接口的 **`changed`** 只读属性返回给定 `ExtendableCookieChangeEvent` 实例已变更的 cookie。
+
+## 值
+
+一个包含已变更的 cookie 的对象数组。每个对象包含以下属性：
+
+- `name`
+ - : 记录 cookie 名称的字符串。
+- `value`
+ - : 记录 cookie 的值的字符串。
+- `domain`
+ - : 记录 cookie 域名的字符串。
+- `path`
+ - : 记录 cookie 路径的字符串。
+- `expires`
+ - : {{glossary("Unix time", "Unix 时间戳")}}（以毫秒为单位表示），记录 cookie 的到期日期。
+- `secure`
+ - : 一个{{jsxref("boolean", "布尔值", "", 1)}}，表示 cookie 是否仅在安全上下文中使用（HTTPS 还是 HTTP）。
+- `sameSite`
+
+ - : 以下 [`SameSite`](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 的值之一：
+
+ - `"strict"`
+ - : Cookie 只会在第一方上下文中发送，不会与第三方网站发起的请求一起发送。
+ - `"lax"`
+ - : Cookie 不会在正常的跨站点子请求（例如将图像或框架加载到第三方站点）中发送，而是在用户在原始站点内导航时（即点击链接时）发送。
+ - `"none"`
+ - : Cookie 将被发送至所有上下文。
+
+- `partitioned`
+ - : 一个布尔值，表示 cookie 是否是分区 cookie（`true`）或（`false`）。更多信息请参阅[具有独立分区状态的 Cookie（CHIPS）](/zh-CN/docs/Web/Privacy/Privacy_sandbox/Partitioned_cookies)。
+
+## 示例
+
+此示例中，在 cookie 被设置时，事件监听器打印 `changed` 属性至控制台。数组的第一个元素代表刚被设置的 cookie 的对象。
+
+```js
+self.addEventListener("cookiechange", (event) => {
+ console.log(event.changed[0]);
+});
+
+const one_day = 24 * 60 * 60 * 1000;
+cookieStore.set({
+ name: "cookie1",
+ value: "cookie1-value",
+ expires: Date.now() + one_day,
+ domain: "example.com",
+});
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/fetch_api/basic_concepts/index.md b/files/zh-cn/web/api/fetch_api/basic_concepts/index.md
deleted file mode 100644
index 56e8b6e2f10603..00000000000000
--- a/files/zh-cn/web/api/fetch_api/basic_concepts/index.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Fetch 基本概念
-slug: Web/API/Fetch_API/Basic_concepts
----
-
-{{DefaultAPISidebar("Fetch API")}}
-
-[Fetch](/zh-CN/docs/Web/API/Fetch_API) 是一个现代的概念，等同于 [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest)。它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。本文介绍了 Fetch API 的一些基本概念。
-
-> **备注：** 这篇文章可能还需要修改。如果你觉得有的概念可以解释的更好，让人们在[MDN 论坛](https://discourse.mozilla-community.org/c/mdn)上知道，或 [Mozilla IRC](https://wiki.mozilla.org/IRC) (#mdn room)。
-
-## 简而言之
-
-Fetch 的核心在于对 HTTP 接口的抽象，包括 {{domxref("Request")}}，{{domxref("Response")}}，{{domxref("Headers")}}，{{domxref("Body")}}，以及用于初始化异步请求的 {{domxref("GlobalFetch.fetch","global fetch")}}。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。
-
-[Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API) 是大量使用 Fetch 的 API 的一个示例。
-
-除此之外，Fetch 还利用到了请求的异步特性——它是基于 {{jsxref("Promise-based","Promise")}} 的。
-
-## Guard
-
-Guard 是 {{domxref("Headers")}} 对象的特性，基于不同的情况，它可以有以下取值：`immutable`、`request`、`request-no-cors`、`response` 或 `none`。
-
-当使用 {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}} 创建一个新的 {{domxref("Headers")}} 对象的时候，它的 guard 被设置成 `none（默认值）。当创建`{{domxref("Request")}} 或 {{domxref("Response")}} 对象的时候，它将拥有一个按照以下规则实现的与之关联的 {{domxref("Headers")}} 对象：
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="row">新对象的类型</th>
- <th scope="col">创建时的构造函数</th>
- <th scope="col">关联的 {{domxref("Headers")}} 对象的 guard</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td rowspan="2">{{domxref("Request")}}</td>
- <td>{{domxref("Request.Request","Request()")}}</td>
- <td><code>request</code></td>
- </tr>
- <tr>
- <td>
- {{domxref("Request.Request","Request()")}}，{{domxref("Request.mode","mode")}}
- 设置成 <code>no-cors</code>
- </td>
- <td><code>request-no-cors</code></td>
- </tr>
- <tr>
- <td rowspan="2">{{domxref("Response")}}</td>
- <td>{{domxref("Response.Response","Response()")}}</td>
- <td><code>response</code></td>
- </tr>
- <tr>
- <td>
- {{domxref("Response.error","error()")}} 或
- {{domxref("Response.redirect","redirect()")}} 方法
- </td>
- <td><code>immutable</code></td>
- </tr>
- </tbody>
-</table>
-
-头信息的 guard 会影响 {{domxref("Headers.set","set()")}}、{{domxref("Headers.delete","delete()")}} 和 {{domxref("Headers.append","append()")}} 方法。如果你试图修改 `guard` 是 `immutable` 的{{domxref("Headers")}} 对象，那么会抛出一个 `TypeError`。以下情况则不会抛出错误：
-
-- guard 是 `request` 并且头信息中的 _name_ 不是 {{Glossary("forbidden header name")}}
-- guard 是 `request-no-cors` 并且头信息中的 _name_/_value_ 是 {{Glossary("simple header")}}
-- guard 是 `response` 并且头信息中的 _name_ 不是 {{Glossary("forbidden response header name")}}
diff --git a/files/zh-cn/web/api/fetch_api/index.md b/files/zh-cn/web/api/fetch_api/index.md
index c03de8433cc821..79df88d939cee7 100644
--- a/files/zh-cn/web/api/fetch_api/index.md
+++ b/files/zh-cn/web/api/fetch_api/index.md
@@ -33,7 +33,7 @@ Fetch 提供了对 {{domxref("Request")}} 和 {{domxref("Response")}}（以及
- [2018 年 4 月](https://github.com/whatwg/fetch/pull/585)，该规范将默认的 credentials 策略更改为 `'same-origin'`。以下浏览器发布了过时的原生 fetch，并在以下版本中更新：Firefox 61.0b13、Safari 12、Chrome 68。
- 如果你的目标是这些旧的浏览器，请务必在所有可能接受 cookie/用户登录状态影响的 API 请求中包含拥有 `credentials: 'same-origin'` 的 [init 对象](/zh-CN/docs/Web/API/fetch#参数)。
-> **备注：** 更多关于 Fetch API 的用法，参考[使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)，以及一些概念 [Fetch 基础概念](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts)。
+> **备注：** 更多关于 Fetch API 的用法，参考[使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)。
### 中止 fetch
@@ -65,4 +65,3 @@ Fetch 提供了对 {{domxref("Request")}} 和 {{domxref("Response")}}（以及
- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS)
- [HTTP](/zh-CN/docs/Web/HTTP)
- [Fetch polyfill](https://github.com/github/fetch)
-- [Fetch 基础概念](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts)
diff --git a/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.md b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.md
index 5565225ea4387d..84ce02f167bfa9 100644
--- a/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.md
+++ b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.md
@@ -3,6 +3,8 @@ title: 文件系统 API 的基本概念
slug: Web/API/File_and_Directory_Entries_API/Introduction
---
+{{DefaultAPISidebar("File and Directory Entries API")}}
+
本文是对[Basic_Concepts_About_the_Filesystem_API](/zh-CN/docs/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API)一文的译文。
文件系统 API（File System API）模拟网络应用程序可以导航到的本地文件系统。你可以开发应用在一个沙盒的虚拟文件系统中读、写、创建以及索引文件。
diff --git a/files/zh-cn/web/api/filesystemdirectoryentry/createreader/index.md b/files/zh-cn/web/api/filesystemdirectoryentry/createreader/index.md
new file mode 100644
index 00000000000000..0fa97b7af870cb
--- /dev/null
+++ b/files/zh-cn/web/api/filesystemdirectoryentry/createreader/index.md
@@ -0,0 +1,70 @@
+---
+title: FileSystemDirectoryEntry：createReader() 方法
+slug: Web/API/FileSystemDirectoryEntry/createReader
+l10n:
+ sourceCommit: 23228f1b9c756862dac77b238ca74c2e5bd3c9dc
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+{{domxref("FileSystemDirectoryEntry")}} 接口的 **`createReader()`** 方法返回 {{domxref("FileSystemDirectoryReader")}} 对象，它可以用于读取服务目录中的条目。
+
+## 语法
+
+```js-nolint
+createReader()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+一个 {{domxref("FileSystemDirectoryReader")}} 对象，它可以用于读取服务目录中的条目。
+
+## 示例
+
+此示例创建一个名为 `readDirectory()` 的异步函数，它获取指定 {{domxref("FileSystemDirectoryEntry")}} 中所有的条目，以数组的形式返回它们。
+
+```js
+async function readDirectory(directory) {
+ const dirReader = directory.createReader();
+ const entries = [];
+
+ while (true) {
+ const results = await new Promise((resolve, reject) => {
+ dirReader.readEntries(resolve, reject);
+ });
+
+ if (!results.length) {
+ break;
+ }
+
+ for (const entry of results) {
+ entries.push(entry);
+ }
+ }
+
+ return entries;
+}
+```
+
+这是通过重复调用 {{domxref("FileSystemDirectoryReader.readEntries", "readEntries()")}} 来获取目录中的所有条目，将每次返回结果连接到数组。当它返回一个空数组时，所有条目已被读取，循环结束。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [文件与目录条目 API](/zh-CN/docs/Web/API/File_and_Directory_Entries_API)
+- [文件与目录条目 API 简介](/zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemDirectoryReader")}}
+- {{domxref("FileSystemDirectoryEntry")}}
+- {{domxref("FileSystemFileEntry")}}
+- {{domxref("FileSystemEntry")}}
diff --git a/files/zh-cn/web/api/filesystemdirectoryreader/index.md b/files/zh-cn/web/api/filesystemdirectoryreader/index.md
new file mode 100644
index 00000000000000..e6518979da1d9c
--- /dev/null
+++ b/files/zh-cn/web/api/filesystemdirectoryreader/index.md
@@ -0,0 +1,30 @@
+---
+title: FileSystemDirectoryReader
+slug: Web/API/FileSystemDirectoryReader
+l10n:
+ sourceCommit: c88a329069328522a5c20c054f9dbced9967dbd4
+---
+
+{{APIRef("File and Directory Entries API")}}
+
+[文件与目录条目 API](/zh-CN/docs/Web/API/File_and_Directory_Entries_API) 的 `FileSystemDirectoryReader` 接口允许你访问代表目录每个条目的 {{domxref("FileSystemFileEntry")}} 对象（通常是 {{domxref("FileSystemFileEntry")}} 或 {{domxref("FileSystemDirectoryEntry")}}）。
+
+## 实例方法
+
+- {{domxref("FileSystemDirectoryReader.readEntries", "readEntries()")}}
+ - : 返回一个包含一些目录条目的数组，数组的每一项是一个基于 {{domxref("FileSystemEntry")}} 的对象（通常是 {{domxref("FileSystemFileEntry")}} 或 {{domxref("FileSystemDirectoryEntry")}}）。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [文件与目录条目 API](/zh-CN/docs/Web/API/File_and_Directory_Entries_API)
+- [文件与目录条目 API 简介](/zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- {{domxref("FileSystemDirectoryEntry")}}
+- {{domxref("FileSystem")}}
diff --git a/files/zh-cn/web/api/filesystemdirectoryreader/readentries/index.md b/files/zh-cn/web/api/filesystemdirectoryreader/readentries/index.md
index b7327a71ab5836..20ee0e79f7141f 100644
--- a/files/zh-cn/web/api/filesystemdirectoryreader/readentries/index.md
+++ b/files/zh-cn/web/api/filesystemdirectoryreader/readentries/index.md
@@ -1,6 +1,8 @@
---
-title: FileSystemDirectoryReader.readEntries()
+title: FileSystemDirectoryReader：readEntries() 方法
slug: Web/API/FileSystemDirectoryReader/readEntries
+l10n:
+ sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
---
{{APIRef("File and Directory Entries API")}}
diff --git a/files/zh-cn/web/api/geolocation/index.md b/files/zh-cn/web/api/geolocation/index.md
index db50a93977908f..0042ff73b56aa5 100644
--- a/files/zh-cn/web/api/geolocation/index.md
+++ b/files/zh-cn/web/api/geolocation/index.md
@@ -1,13 +1,15 @@
---
title: Geolocation
slug: Web/API/Geolocation
+l10n:
+ sourceCommit: 89c7b111d380e607e94b58abbd0d37951cf395c4
---
{{securecontext_header}}{{APIRef("Geolocation API")}}
**`Geolocation`** 接口是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置，这将允许网站或应用基于用户的地理位置提供定制的信息。
-带有此接口的对象可以用由 {{domxref("Navigator")}} 实现的属性 {{domxref("NavigatorGeolocation.geolocation")}} 来获得。
+带有此接口的对象可以用由 {{domxref("Navigator")}} 实现的属性 {{domxref("navigator.geolocation")}} 来获得。
> **备注：** 出于安全考虑，当一个网页尝试获取地理位置信息时，会请求用户批准地理位置访问权限。因为每个浏览器都有各自请求用户批准该权限的策略和方法。
diff --git a/files/zh-cn/web/api/history/forward/index.md b/files/zh-cn/web/api/history/forward/index.md
index 0fb067e3161357..a19c2b8063b77b 100644
--- a/files/zh-cn/web/api/history/forward/index.md
+++ b/files/zh-cn/web/api/history/forward/index.md
@@ -3,6 +3,8 @@ title: forward()
slug: Web/API/History/forward
---
+{{APIRef("History API")}}
+
在会话历史中向前移动一页。它与使用`delta`参数为 1 时调用 `history.go(delta)`的效果相同。
## 语法
diff --git a/files/zh-cn/web/api/history/go/index.md b/files/zh-cn/web/api/history/go/index.md
index c8e9b1f67668b0..0d14156cc41aa4 100644
--- a/files/zh-cn/web/api/history/go/index.md
+++ b/files/zh-cn/web/api/history/go/index.md
@@ -3,6 +3,8 @@ title: go()
slug: Web/API/History/go
---
+{{APIRef("History API")}}
+
`go()`方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于`delta`参数的值。
## 语法
diff --git a/files/zh-cn/web/api/history/pushstate/index.md b/files/zh-cn/web/api/history/pushstate/index.md
index 098e73e943f8ca..2b7c9cf60e64f2 100644
--- a/files/zh-cn/web/api/history/pushstate/index.md
+++ b/files/zh-cn/web/api/history/pushstate/index.md
@@ -7,8 +7,6 @@ slug: Web/API/History/pushState
在 [HTML](/zh-CN/docs/Web/HTML) 文档中，**`history.pushState()`** 方法向浏览器的会话历史栈增加了一个条目。
-该方法是{{glossary("asynchronous","异步")}}的。为 {{domxref("Window/popstate_event", "popstate")}} 事件增加监听器，以确定导航何时完成。`state` 参数将在其中可用。
-
## 语法
```js-nolint
diff --git a/files/zh-cn/web/api/history/state/index.md b/files/zh-cn/web/api/history/state/index.md
index b48accd692990b..ad39a3d6fbd0a9 100644
--- a/files/zh-cn/web/api/history/state/index.md
+++ b/files/zh-cn/web/api/history/state/index.md
@@ -3,6 +3,8 @@ title: state
slug: Web/API/History/state
---
+{{APIRef("History API")}}
+
返回在 history 栈顶的 `任意` 值的拷贝。通过这种方式可以查看 state 值，不必等待 [`popstate`](/zh-CN/docs/Web/Events/popstate)事件发生后再查看。
## 语法
diff --git a/files/zh-cn/web/api/htmlformelement/reset_event/index.md b/files/zh-cn/web/api/htmlformelement/reset_event/index.md
index 991d1c9e27beb1..5fcce2c716a348 100644
--- a/files/zh-cn/web/api/htmlformelement/reset_event/index.md
+++ b/files/zh-cn/web/api/htmlformelement/reset_event/index.md
@@ -3,6 +3,8 @@ title: reset
slug: Web/API/HTMLFormElement/reset_event
---
+{{APIRef}}
+
当表单被重置时触发`reset`事件。
## 综合信息
diff --git a/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md
index e686140402479f..9f147271ac0817 100644
--- a/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md
+++ b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.md
@@ -1,36 +1,39 @@
---
-title: HTMLMediaElement.autoplay
+title: HTMLMediaElement：autoplay 属性
slug: Web/API/HTMLMediaElement/autoplay
+l10n:
+ sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---
{{APIRef("HTML DOM")}}
-**`HTMLMediaElement.autoplay`** 属性等同于 HTML 属性中的 [`autoplay`](/zh-CN/docs/Web/HTML/Element/video#autoplay), 它表示当 player 下载到足够可以播放的媒体文件时，是否自动播放视频。
+**`HTMLMediaElement.autoplay`** 属性反映了 HTML [`autoplay`](/zh-CN/docs/Web/HTML/Element/video#autoplay) 属性，表示是否应在有足够的媒体资源加载完成且无需中断的情况下自动开始播放。
-注意：一些版本的 Chrome 只支持**`autostart`**, 不支持**`autoplay`**
+如果媒体元素的源是 {{domxref("MediaStream")}} 且其 `autoplay` 属性为 `true`，则该元素在激活时（即 {{domxref("MediaStream.active")}} 为 `true`）将开始播放。
-## 语法
+> **备注：** 自动播放音频（或带音轨的视频）的网站会给用户带来不愉快的体验，因此应尽量避免。如果你必须提供自动播放特性，则应使其成为选择性特性（要求用户明确启用）。然而，当创建媒体元素并在稍后由用户控制其源时，自动播放可能会很有用。
-```plain
-...
-```
+有关自动播放、自动播放阻止以及当自动播放被用户的浏览器阻止时如何响应的深入介绍，请参阅我们的文章[媒体和 Web Audio API 的自动播放指南](/zh-CN/docs/Web/Media/Autoplay_guide)。
-### 参数类型
+## 值
-{{domxref("Boolean")}}
+布尔值，如果媒体元素在加载足够的内容以允许无中断播放时将立即开始播放，则为 `true`。
-## 用例
+> **备注：** 一些浏览器为用户提供了覆盖 `autoplay` 的特性，以防止未经许可或在后台播放具有干扰性的音频或视频。不要依赖于 `autoplay` 自动开始播放，而是使用 {{domxref("HTMLMediaElement.play_event", 'play')}} 事件。
-...
+## 示例
```html
-<...></...>
+<video id="video" controls>
+ <source
+ src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165" />
+</video>
```
-...
-
```js
-Xxx.xxx();
+// 禁用自动播放（推荐）
+// 默认值为 false
+document.querySelector("#video").autoplay = false;
```
## 规范
@@ -43,4 +46,5 @@ Xxx.xxx();
## 参见
-- 接口定义：{{domxref("HTMLMediaElement")}}。
+- {{domxref("HTMLMediaElement")}}：用于定义 `HTMLMediaElement.autoplay` 属性的接口
+- {{HTMLElement("audio")}}、{{HTMLElement("video")}}
diff --git a/files/zh-cn/web/api/intersectionobserver/root/index.md b/files/zh-cn/web/api/intersectionobserver/root/index.md
index 3ef09fef5b1ed7..eff141e47890f7 100644
--- a/files/zh-cn/web/api/intersectionobserver/root/index.md
+++ b/files/zh-cn/web/api/intersectionobserver/root/index.md
@@ -3,6 +3,8 @@ title: IntersectionObserver.root
slug: Web/API/IntersectionObserver/root
---
+{{APIRef("Intersection Observer API")}}
+
`root` 属性用来获取当前 `intersectionObserver` 实例的根元素。
## 语法
diff --git a/files/zh-cn/web/api/mediadevices/devicechange_event/index.md b/files/zh-cn/web/api/mediadevices/devicechange_event/index.md
index 4a009e3cb6dc56..66848bc3b7637a 100644
--- a/files/zh-cn/web/api/mediadevices/devicechange_event/index.md
+++ b/files/zh-cn/web/api/mediadevices/devicechange_event/index.md
@@ -3,6 +3,8 @@ title: devicechange
slug: Web/API/MediaDevices/devicechange_event
---
+{{APIRef("Media Capture and Streams")}}
+
每当媒体设备（例如相机，麦克风或扬声器）连接到系统或从系统中移除时，`devicechange` 事件就会被发送到 {{domxref("MediaDevices")}} 实例。这是一个没有附加属性的通用 {{domxref("Event")}} 。
## 一般信息
diff --git a/files/zh-cn/web/api/nodelist/values/index.md b/files/zh-cn/web/api/nodelist/values/index.md
index dff83c49432873..0a9dabab71d414 100644
--- a/files/zh-cn/web/api/nodelist/values/index.md
+++ b/files/zh-cn/web/api/nodelist/values/index.md
@@ -3,6 +3,8 @@ title: NodeList.values()
slug: Web/API/NodeList/values
---
+{{APIRef("DOM")}}
+
该方法返回一个 iterator 迭代器，可以利用迭代器遍历所有 value。
## Syntax
diff --git a/files/zh-cn/web/api/offlineaudiocontext/index.md b/files/zh-cn/web/api/offlineaudiocontext/index.md
index 29b6b52bba2063..f5387198217f0f 100644
--- a/files/zh-cn/web/api/offlineaudiocontext/index.md
+++ b/files/zh-cn/web/api/offlineaudiocontext/index.md
@@ -1,106 +1,112 @@
---
title: OfflineAudioContext
slug: Web/API/OfflineAudioContext
+l10n:
+ sourceCommit: 022399901bdc60df947ee15e11a49be029e290d0
---
{{APIRef("Web Audio API")}}
-`OfflineAudioContext` 接口是一个 {{domxref("AudioContext")}} 的接口，代表由多个 {{domxref("AudioNode")}} 连接在一起构成的音频处理图。与 {{domxref("AudioContext")}} 标准相反的是， `OfflineAudioContext` 不在硬件设备渲染音频；相反，它尽可能快地生成音频，输出一个 {{domxref("AudioBuffer")}} 作为结果。
+`OfflineAudioContext` 接口是一个 {{domxref("AudioContext")}} 的接口，代表由多个 {{domxref("AudioNode")}} 连接在一起构成的音频处理图。与 {{domxref("AudioContext")}} 标准相反的是，`OfflineAudioContext` 不在硬件设备渲染音频；相反，它尽可能快地生成音频，输出一个 {{domxref("AudioBuffer")}} 作为结果。
+
+{{InheritanceDiagram}}
## 构造函数
-- {{domxref("OfflineAudioContext.OfflineAudioContext()")}}
+- {{domxref("OfflineAudioContext.OfflineAudioContext()", "OfflineAudioContext()")}}
- : 创建一个新的 `OfflineAudioContext` 实例。
-## 属性
+## 实例属性
-_从父级 {{domxref("AudioContext")}} 获取属性。_
+_从其父接口 {{domxref("BaseAudioContext")}} 继承属性。_
-- {{domxref('OfflineAudioContext.length')}} {{readonlyinline}}
+- {{domxref('OfflineAudioContext.length')}} {{ReadOnlyInline}}
- : 代表采样帧缓冲区大小的整数。
-### 事件处理程序
+## 实例方法
-- {{domxref("OfflineAudioContext.oncomplete")}}
- - : 当进程完成时，基于事件版本的{{domxref("OfflineAudioContext.startRendering()")}} 被使用之后，事件处理器将会被调用，[`complete`](/zh-CN/docs/Web/API/OfflineAudioContext/complete_event) 事件类型为 {{domxref("OfflineAudioCompletionEvent")}}）被触发。
+_从其父接口 {{domxref("BaseAudioContext")}} 继承方法。_
-## 方法
+- {{domxref("OfflineAudioContext.suspend()")}}
+ - : 在指定的时间安排音频暂停时间进程，并返回 Promise。
+- {{domxref("OfflineAudioContext.startRendering()")}}
+ - : 开始渲染音频，考虑当前连接和当前计划的修改。这个页面涵盖基于事件的和基于 Promise 的版本。
-_从父级 {{domxref("AudioContext")}} 和 {{domxref("EventTarget")}} 获取方法的实现。_
+### 已弃用的方法
- {{domxref("OfflineAudioContext.resume()")}}
- : 恢复一个被暂停的音频的时间进程。
-- {{domxref("OfflineAudioContext.suspend()")}}
- - : 在指定的时间安排音频暂停时间进程，并且通过 Promise 返回。
-- {{domxref("OfflineAudioContext.startRendering()")}}
- - : 开始渲染音频，考虑当前连接和当前计划的修改。这个页面涵盖基于事件的和基于 Promise 的版本。
-## 示例
+> **备注：** `resume()` 方法仍然是可用的——现在它定义在 {{domxref("BaseAudioContext")}} 接口中（参见 {{domxref("AudioContext.resume")}}），通过{{domxref("AudioContext")}} 接口和 {{domxref("OfflineAudioContext")}} 接口都可以被访问。
-这个简单的例子中，我们声明了 {{domxref("AudioContext")}} 和 `OfflineAudioContext` 对象。我们使用 `AudioContext` 去加载一个 XHR（{{domxref("AudioContext.decodeAudioData")}}）获取的音轨，然后使用 `OfflineAudioContext` 去渲染音频并得到一个 into an {{domxref("AudioBufferSourceNode")}}，并播放这个音轨。在离线音频处理图建立后，你需要去使用 {{domxref("OfflineAudioContext.startRendering")}} 来渲染它成为 {{domxref("AudioBuffer")}}。
+### 事件
-当 `startRendering()` 的 `Promise` 解决后，渲染也完成了，在 `Promise` 内可以获得输出的 `AudioBuffer`。
+通过使用 [`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener) 或给这个接口的 `oneventname` 属性指定一个事件监听器来监听这些事件。
-在此刻，我们创建了一个另外的音频上下文，在它里面创建了一个 {{domxref("AudioBufferSourceNode")}}，并且设置它的 buffer 为之前生成的 Promise 中的 `AudioBuffer。这样它就可以作为简单标准音频图来播放了`。
+- [`complete`](/zh-CN/docs/Web/API/OfflineAudioContext/complete_event)
-> **备注：** 为了获取可以运行的例子，请看我们在 Github 的仓库 [offline-audio-context-promise](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/) （也可以看到 [源代码](https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise)。）
+ - : 当离线音频上下文的渲染完成时触发。
-```js
-// 定义一个在线或者离线的音频上下文
+## 示例
-var audioCtx = new AudioContext();
-var offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);
+### 使用离线音频上下文播放音频
-source = offlineCtx.createBufferSource();
+这个例子中，我们声明了 {{domxref("AudioContext")}} 和 `OfflineAudioContext` 对象。我们使用 `AudioContext` 加载一个音轨的 {{domxref("fetch()")}}，然后使用 `OfflineAudioContext` 去渲染音频并得到一个 {{domxref("AudioBufferSourceNode")}}，并播放这个音轨。在离线音频处理图建立后，我们使用 {{domxref("OfflineAudioContext.startRendering")}} 来将它渲染为 {{domxref("AudioBuffer")}}。
-// 使用 XHR 去加载一个音轨，
-// 使用 decodeAudioData 去解码，
-// 使用 OfflineAudioContext 去渲染它
+当 `startRendering()` 的 promise 兑现后，渲染也完成了，promise 会返回输出的 `AudioBuffer`。
-function getData() {
- request = new XMLHttpRequest();
+在此刻，我们创建了一个另外的音频上下文，在它里面创建了一个 {{domxref("AudioBufferSourceNode")}}，并且设置它的 buffer 为之前生成的 Promise 中的 `AudioBuffer`，这样它就可以作为简单标准音频图来播放了。
- request.open("GET", "viper.ogg", true);
+> **备注：** 你可以[在线运行完整示例](https://mdn.github.io/webaudio-examples/offline-audio-context-promise/)，或[查看源代码](https://github.com/mdn/webaudio-examples/blob/main/offline-audio-context-promise/)。
- request.responseType = "arraybuffer";
+```js
+// 定义一个在线或者离线的音频上下文
+let audioCtx; // 必须在用户交互后初始化
+const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);
- request.onload = function () {
- var audioData = request.response;
+// 定义 DOM 节点的常量
+const play = document.querySelector("#play");
- audioCtx.decodeAudioData(audioData, function (buffer) {
- myBuffer = buffer;
- source.buffer = myBuffer;
+function getData() {
+ // 获取音频块，对其进行解码放入缓冲区。
+ // 然后我们把缓冲区放进 source 对象，就可以播放了。
+ fetch("viper.ogg")
+ .then((response) => response.arrayBuffer())
+ .then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
+ .then((decodedBuffer) => {
+ console.log("文件下载成功。");
+ const source = new AudioBufferSourceNode(offlineCtx, {
+ buffer: decodedBuffer,
+ });
source.connect(offlineCtx.destination);
- source.start();
- //source.loop = true;
- offlineCtx
- .startRendering()
- .then(function (renderedBuffer) {
- console.log("渲染完全成功");
- var audioCtx = new (window.AudioContext ||
- window.webkitAudioContext)();
- var song = audioCtx.createBufferSource();
- song.buffer = renderedBuffer;
-
- song.connect(audioCtx.destination);
-
- play.onclick = function () {
- song.start();
- };
- })
- .catch(function (err) {
- console.log("渲染失败：" + err);
- // 注意：当 OfflineAudioContext 上 startRendering 被立刻调用，Promise 应该被 reject
- });
+ return source.start();
+ })
+ .then(() => offlineCtx.startRendering())
+ .then((renderedBuffer) => {
+ console.log("渲染完全成功。");
+ play.disabled = false;
+ const song = new AudioBufferSourceNode(audioCtx, {
+ buffer: renderedBuffer,
+ });
+ song.connect(audioCtx.destination);
+
+ // 启动 song
+ song.start();
+ })
+ .catch((err) => {
+ console.error(`遇到错误：${err}`);
});
- };
-
- request.send();
}
-// 运行 getData 去开始这个进程
+// 激活播放按钮
+play.onclick = () => {
+ play.disabled = true;
+ // 我们可以在用户单击时初始化上下文。
+ audioCtx = new AudioContext();
-getData();
+ // 获取数据并启动 song
+ getData();
+};
```
## 规范
diff --git a/files/zh-cn/web/api/performance/getentriesbyname/index.md b/files/zh-cn/web/api/performance/getentriesbyname/index.md
index 6abb38f2b1a3f3..24ebb1be39b8c3 100644
--- a/files/zh-cn/web/api/performance/getentriesbyname/index.md
+++ b/files/zh-cn/web/api/performance/getentriesbyname/index.md
@@ -3,6 +3,8 @@ title: performance.getEntriesByName()
slug: Web/API/Performance/getEntriesByName
---
+{{APIRef("Performance API")}}
+
**`getEntriesByName()`**方法返回一个给定名称和 name 和 type 属性的{{domxref("PerformanceEntry")}}对象数组。在创建 performance 标记或在明确的时间点测量（比如手动调用{{domxref("Performance.mark","mark()")}}方法）也可以创建这样的对象数组。
在 Workers 中可以使用该方法。
diff --git a/files/zh-cn/web/api/pointer_lock_api/index.md b/files/zh-cn/web/api/pointer_lock_api/index.md
index b1b68a8fee6ed5..304ffba9207047 100644
--- a/files/zh-cn/web/api/pointer_lock_api/index.md
+++ b/files/zh-cn/web/api/pointer_lock_api/index.md
@@ -3,7 +3,7 @@ title: Pointer Lock API
slug: Web/API/Pointer_Lock_API
---
-{{ SeeCompatTable() }}
+{{DefaultAPISidebar("Pointer Lock API")}}{{ SeeCompatTable() }}
**指针锁定**(以前叫做鼠标锁定) 提供了一种输入方法，这种方法是基于鼠标随着时间推移的运动的（也就是，deltas），而不仅是鼠标光标的绝对位置。通过它可以访问原始的鼠标运动，把鼠标事件的目标锁定到一个单独的元素，这就消除了鼠标在一个单独的方向上到底可以移动多远这方面的限制，并从视图中删去光标。
diff --git a/files/zh-cn/web/api/range/setend/index.md b/files/zh-cn/web/api/range/setend/index.md
index 2fe828fbd9aff3..30fc6c17098e02 100644
--- a/files/zh-cn/web/api/range/setend/index.md
+++ b/files/zh-cn/web/api/range/setend/index.md
@@ -3,6 +3,8 @@ title: Range.setEnd()
slug: Web/API/Range/setEnd
---
+{{ApiRef("DOM")}}
+
**`Range.setEnd()`**方法用于设置 [`Range`](/zh-CN/docs/Web/API/Range)的结束位置。
如果结束节点类型是 `Text`、`Comment` 或 `CDATASection`之一，那么 `endOffset` 指的是从结束节点算起字符的偏移量。对于其他 `Node` 类型节点，`endOffset` 是指从结束结点开始算起子节点的偏移量。
diff --git a/files/zh-cn/web/api/range/startcontainer/index.md b/files/zh-cn/web/api/range/startcontainer/index.md
index 1225292673d1d1..5340d651c5f598 100644
--- a/files/zh-cn/web/api/range/startcontainer/index.md
+++ b/files/zh-cn/web/api/range/startcontainer/index.md
@@ -3,6 +3,8 @@ title: Range.startContainer
slug: Web/API/Range/startContainer
---
+{{ApiRef("DOM")}}
+
Range.startContainer 是只读属性，返回 Range 开始的节点。要更改节点的起始位置，请使用 Range.setStart() 方法。
## Syntax
diff --git a/files/zh-cn/web/api/stylesheet/disabled/index.md b/files/zh-cn/web/api/stylesheet/disabled/index.md
index 681b55da4be01c..3bd55f20948bf6 100644
--- a/files/zh-cn/web/api/stylesheet/disabled/index.md
+++ b/files/zh-cn/web/api/stylesheet/disabled/index.md
@@ -1,24 +1,26 @@
---
-title: StyleSheet.disabled
+title: StyleSheet：disabled 属性
slug: Web/API/StyleSheet/disabled
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
---
{{APIRef("CSSOM")}}
-{{domxref("StyleSheet")}}接口的 **`disabled`** 属性用于决定样式表是否被禁用于文档。样式表被禁用可能由于这个属性被手动设置为 true，也可能是因为样式表是未激活的[alternative style sheet](/zh-CN/docs/Web/CSS/Alternative_style_sheets)。注意 `disabled == false` 并不保证样式表一定生效（例如它可能被移除出文档）。
+{{domxref("StyleSheet")}} 接口的 **`disabled`** 属性用于决定是否阻止将样式表应用于文档。
-## 语法
+样式表被禁用可能由于这个属性被手动设置为 `true`，也可能是因为样式表是未激活的[替代样式表](/zh-CN/docs/Web/CSS/Alternative_style_sheets)。注意 `disabled == false` 并不保证样式表一定生效（例如它可能被移除出文档）。
-```plain
-bool = stylesheet.disabled
-```
+## 值
+
+一个布尔值。
-## 例子
+## 示例
-```plain
+```js
// 如果样式表被禁用
if (stylesheet.disabled) {
- // 添加行内样式
+ // 应用内联样式
}
```
@@ -26,6 +28,6 @@ if (stylesheet.disabled) {
{{Specifications}}
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
diff --git a/files/zh-cn/web/api/stylesheet/href/index.md b/files/zh-cn/web/api/stylesheet/href/index.md
index 73f185e61348c5..6e27e98e547847 100644
--- a/files/zh-cn/web/api/stylesheet/href/index.md
+++ b/files/zh-cn/web/api/stylesheet/href/index.md
@@ -1,51 +1,55 @@
---
-title: href
+title: StyleSheet：href 属性
slug: Web/API/StyleSheet/href
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("CSSOM")}}
-### 概述
+{{domxref("StyleSheet")}} 接口的 **`href`** 属性返回样式表的位置。
-返回当前样式表文件的 URI 地址。
+这个属性是只读的。
-### 语法
+### 值
-```plain
-uri = stylesheet.href
-```
-
-### 参数
+一个包含样式表 URL 的字符串。
-- `uri` 为一个字符串，包含了样式表文件的 URI 地址。
+### 示例
-### 例子
+在本地的 Windows 计算机上：
-```plain
- // 在本机环境下
- <html>
+```html
+<!doctype html>
+<html lang="zh-CN">
<head>
- <link rel="StyleSheet" href="example.css" type="text/css" />
- <script>
- function sref() {
- alert(document.styleSheets[0].href);
- }
- </script>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width" />
+ <title>href 示例</title>
+ <link rel="styleSheet" href="example.css" />
+ <script>
+ function sref() {
+ alert(document.styleSheets[0].href);
+ }
+ </script>
</head>
<body>
- <div class="thunder">Thunder</div>
- <button onclick="sref()">ss</button>
+ <div class="thunder">雷</div>
+ <button onclick="sref()">ss</button>
</body>
- </html>
-// 弹出 "file:////C:/Windows/Desktop/example.css
+</html>
```
+返回“file:////C:/Windows/Desktop/example.css”。
+
### 备注
-如果该样式表是一个外链样式表文件，则它的 href 属性值为样式表文件的 URI. 但如果该样式表是一个内联样式表，则它的 href 属性值为`null`.
+如果该样式表是一个链接的样式表，则它的属性值为样式表的位置。对于内联样式表，则这个属性值为 `null`。
+
+## 规范
-该属性在 Firefox, Opera, Google Chrome, Safari 中为只读属性，在 Internet Explorer 中可读可写。
+{{Specifications}}
-### 规范
+## 浏览器兼容性
-[stylesheet.href](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href)
+{{Compat}}
diff --git a/files/zh-cn/web/api/stylesheet/index.md b/files/zh-cn/web/api/stylesheet/index.md
index d16bd015621837..351176ae0e1d10 100644
--- a/files/zh-cn/web/api/stylesheet/index.md
+++ b/files/zh-cn/web/api/stylesheet/index.md
@@ -1,33 +1,39 @@
---
title: StyleSheet
slug: Web/API/StyleSheet
+l10n:
+ sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635
---
{{APIRef("CSSOM")}}
-表示一个实现`StyleSheet`接口的对象样式表。CSS 样式表将进一步实现更专业的 {{domxref("CSSStyleSheet")}} 接口。
+表示一个实现 `StyleSheet`（表示单个样式表）接口的对象。CSS 样式表将进一步实现更具体的 {{domxref("CSSStyleSheet")}} 接口。
-## 属性
+## 实例属性
- {{domxref("StyleSheet.disabled")}}
- - : 返回{{domxref("Boolean")}}表示当前样式表是否可用。
-- {{domxref("StyleSheet.href")}} {{readonlyInline}}
- - : 返回 {{domxref("DOMString")}} 表示样式表的位置。
-- {{domxref("StyleSheet.media")}} {{readonlyInline}}
- - : 返回 {{domxref("MediaList")}} 表示样式的预期目标媒体
-- {{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
- - : 返回 {{domxref("Node")}} 将此样式表与当前文档相关联。
-- {{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
- - : 返回 {{domxref("StyleSheet")}} 如果有的话; 返回 `null` 如果没有。
-- {{domxref("StyleSheet.title")}} {{readonlyInline}}
- - : 返回 {{domxref("DOMString")}} 表示当前样式表的顾问标题。
-- {{domxref("StyleSheet.type")}}{{readonlyInline}}
- - : 返回 {{domxref("DOMString")}} 表示当前样式表的语言
+ - : 返回表示当前样式表是否可用的布尔值。
+- {{domxref("StyleSheet.href")}} {{ReadOnlyInline}}
+ - : 返回表示样式表的位置的字符串。
+- {{domxref("StyleSheet.media")}} {{ReadOnlyInline}}
+ - : 返回表示样式信息的预期目标媒体的 {{domxref("MediaList")}}。
+- {{domxref("StyleSheet.ownerNode")}} {{ReadOnlyInline}}
+ - : 返回将此样式表与当前文档相关联的 {{domxref("Node")}}。
+- {{domxref("StyleSheet.parentStyleSheet")}} {{ReadOnlyInline}}
+ - : 如果有的话，返回 {{domxref("StyleSheet")}}；如果没有，则返回 `null`。
+- {{domxref("StyleSheet.title")}} {{ReadOnlyInline}}
+ - : 返回表示当前样式表的咨询标题的字符串。
+- {{domxref("StyleSheet.type")}}{{ReadOnlyInline}}
+ - : 返回表示当前样式表的样式表语言的字符串。
## 规范
{{Specifications}}
+## 浏览器兼容性
+
+{{Compat}}
+
## 参见
- {{domxref("CSSStyleSheet")}}
diff --git a/files/zh-cn/web/api/stylesheet/media/index.md b/files/zh-cn/web/api/stylesheet/media/index.md
index ace1625a0b516a..19cd249a74c712 100644
--- a/files/zh-cn/web/api/stylesheet/media/index.md
+++ b/files/zh-cn/web/api/stylesheet/media/index.md
@@ -1,35 +1,66 @@
---
-title: StyleSheet.media
+title: StyleSheet：media 属性
slug: Web/API/StyleSheet/media
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef("CSSOM")}}
-## 概述
+{{domxref("StyleSheet")}} 接口的 **`media`** 属性指定样式信息的预期目标媒体。它是一个只读的、类数组 `MediaList` 对象，可以使用 `deleteMedium()` 删除，也可以使用 `appendMedium()` 添加。
-**media** specifies the intended destination medium for style information.
+## 值
-## 语法
-
-```plain
-medium = stylesheet.media
-stylesheet.media =medium
-```
-
-## 参数
-
-- `medium` is a string describing a single medium or a comma-separated list.
+一个只读的类数组 `MediaList` 对象。
## 示例
-```plain
-<link rel="StyleSheet" href="document.css" type="text/css" media="screen" />
+```html
+<!doctype html>
+<html lang="zh-CN">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width" />
+ <title>Test page</title>
+ <link rel="stylesheet" href="document.css" media="screen" />
+ <style rel="stylesheet" media="screen, print">
+ body {
+ background-color: snow;
+ }
+ </style>
+ </head>
+ <body>
+ <script>
+ for (let i = 0; i < document.styleSheets.length; i++) {
+ console.log(
+ `document.styleSheets[${i}].media: ${JSON.stringify(
+ document.styleSheets[i].media,
+ )}`,
+ );
+ if (iSheetIndex === 0)
+ document.styleSheets[i].media.appendMedium("handheld");
+ if (iSheetIndex === 1)
+ document.styleSheets[i].media.deleteMedium("print");
+ console.log(
+ `document.styleSheets[${i}].media: ${JSON.stringify(
+ document.styleSheets[i].media,
+ )}`,
+ );
+ }
+ // 这将输出：
+ // document.styleSheets[0].media: {"0":"screen"}
+ // document.styleSheets[0].media: {"0":"screen","1":"handheld"}
+ // document.styleSheets[1].media: {"0":"screen","1":"print"}
+ // document.styleSheets[1].media: {"0":"screen"}
+ </script>
+ </body>
+</html>
```
-## 注意
+## 规范
-The default value for media is "screen."
+{{Specifications}}
-## Specification
+## 浏览器兼容性
-DOM Level 2 Styles - STYLESHEET
+{{Compat}}
diff --git a/files/zh-cn/web/api/stylesheet/ownernode/index.md b/files/zh-cn/web/api/stylesheet/ownernode/index.md
new file mode 100644
index 00000000000000..424ed327caef65
--- /dev/null
+++ b/files/zh-cn/web/api/stylesheet/ownernode/index.md
@@ -0,0 +1,44 @@
+---
+title: StyleSheet：ownerNode 属性
+slug: Web/API/StyleSheet/ownerNode
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("CSSOM")}}
+
+{{domxref("StyleSheet")}} 接口的 **`ownerNode`** 属性返回和文档有关联的样式表的节点。
+
+这通常是 HTML [`<link>`](/zh-CN/docs/Web/HTML/Element/link) 或者 [`<style>`](/zh-CN/docs/Web/HTML/Element/style) 元素，但是在 `<?xml-stylesheet ?>` 情况下，还可以返回一个[处理指令节点](/zh-CN/docs/Web/API/ProcessingInstruction)。
+
+## 值
+
+一个 {{domxref("Node")}} 对象。
+
+## 示例
+
+```html
+<html lang="zh">
+ <head>
+ <link rel="stylesheet" href="example.css" />
+ </head>
+ <body>
+ <button onclick="alert(document.styleSheets[0].ownerNode)">
+ 显示 example.css 的 ownerNode
+ </button>
+ </body>
+</html>
+// 显示“object HTMLLinkElement”。
+```
+
+## 备注
+
+对于被其他样式表所包含的样式表（例如使用 [`@import`](/zh-CN/docs/Web/CSS/@import) 所包含的），此属性的值是 `null`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/stylesheet/parentstylesheet/index.md b/files/zh-cn/web/api/stylesheet/parentstylesheet/index.md
new file mode 100644
index 00000000000000..c821d0d74c3d93
--- /dev/null
+++ b/files/zh-cn/web/api/stylesheet/parentstylesheet/index.md
@@ -0,0 +1,33 @@
+---
+title: StyleSheet：parentStyleSheet 属性
+slug: Web/API/StyleSheet/parentStyleSheet
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("CSSOM")}}
+
+{{domxref("StyleSheet")}} 接口的 **`parentStyleSheet`** 属性返回样式表（如果有），其中包含给定的样式表。
+
+## 值
+
+一个 {{domxref("StyleSheet")}} 对象。
+
+## 示例
+
+```js
+// 查找顶级样式表
+const sheet = stylesheet.parentStyleSheet ?? stylesheet;
+```
+
+## 备注
+
+如果当前样式表是一个顶级的样式表或者如果不支持包含样式表，则这个属性返回 `null`。
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/stylesheet/title/index.md b/files/zh-cn/web/api/stylesheet/title/index.md
index 4603896cd859ef..b39145b9262374 100644
--- a/files/zh-cn/web/api/stylesheet/title/index.md
+++ b/files/zh-cn/web/api/stylesheet/title/index.md
@@ -1,23 +1,19 @@
---
-title: StyleSheet.title
+title: StyleSheet：title 属性
slug: Web/API/StyleSheet/title
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
---
{{APIRef("CSSOM")}}
-## 概述
+{{domxref("StyleSheet")}} 接口的 **`title`** 属性返回当前样式表的咨询标题。
-The **`title`** property of the {{domxref("StyleSheet")}} interface returns the advisory title of the current style sheet.
+标题通常在 {{domxref("StyleSheet/OwnerNode", "ownerNode")}} 中指定。
-The title is often specified in the {{domxref("StyleSheet/OwnerNode", "ownerNode")}}.
+## 规范
-## 注意
-
-The title is often specified in the {{domxref("StyleSheet/OwnerNode", "ownerNode")}}.
-
-## Specification
-
-- [title](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title)
+{{Specifications}}
## 浏览器兼容性
diff --git a/files/zh-cn/web/api/stylesheet/type/index.md b/files/zh-cn/web/api/stylesheet/type/index.md
new file mode 100644
index 00000000000000..39fcef38274813
--- /dev/null
+++ b/files/zh-cn/web/api/stylesheet/type/index.md
@@ -0,0 +1,28 @@
+---
+title: StyleSheet：type 属性
+slug: Web/API/StyleSheet/type
+l10n:
+ sourceCommit: 101ffc9479db6aaa530f2aac3992734dd97d1b86
+---
+
+{{APIRef("CSSOM")}}
+
+{{domxref("StyleSheet")}} 接口的 **`type`** 属性指定给定样式表的样式表语言。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+```js
+myStyleSheet.type = "text/css";
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/subtlecrypto/importkey/index.md b/files/zh-cn/web/api/subtlecrypto/importkey/index.md
index 3104e4d136acf3..5ff5efda130b9c 100644
--- a/files/zh-cn/web/api/subtlecrypto/importkey/index.md
+++ b/files/zh-cn/web/api/subtlecrypto/importkey/index.md
@@ -98,8 +98,8 @@ ml2FIkoovZh/8yeTKmjUMb804g6OmjUc9vVojCRV0YdaSmYkkJMJbLg=
要将其转换为你可以传递给 `importKey()` 的格式，你需要做两件事：
-- 头部和尾部之间的部分使用 [`window.atob()`](/zh-CN/docs/Web/API/atob) 进行 base64 解码。
-- 将生成的字符串转换为 [`ArrayBuffer`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)。
+- 头部和尾部之间的部分使用 {{domxref("Window.atob()")}} 进行 base64 解码。
+- 将生成的字符串转换为 {{jsxref("ArrayBuffer")}}。
请参阅[示例](#示例)部分，以获得更具体的指导。
@@ -133,8 +133,8 @@ gQIDAQAB
与 [PKCS #8](#pkcs_8) 一样，你可以传递给 `importKey()` 的格式，你需要做两件事：
-- 头部和尾部之间的部分使用 [`window.atob()`](/zh-CN/docs/Web/API/atob) 进行 base64 解码。
-- 将生成的字符串转换为 [`ArrayBuffer`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)。
+- 头部和尾部之间的部分使用 {{domxref("Window.atob()")}} 进行 base64 解码。
+- 将生成的字符串转换为 {{jsxref("ArrayBuffer")}}。
请参阅[示例](#示例)部分，以获得更具体的指导。
diff --git a/files/zh-cn/web/api/svganimatecolorelement/index.md b/files/zh-cn/web/api/svganimatecolorelement/index.md
new file mode 100644
index 00000000000000..cf7321943cc06b
--- /dev/null
+++ b/files/zh-cn/web/api/svganimatecolorelement/index.md
@@ -0,0 +1,28 @@
+---
+title: SVGAnimateColorElement
+slug: Web/API/SVGAnimateColorElement
+l10n:
+ sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0
+---
+
+{{APIRef("SVG")}}{{deprecated_header}}
+
+**`SVGAnimateColorElement`** 接口对应于 `<animateColor>` 元素。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_该接口没有属性，但从其父接口 {{domxref("SVGAnimationElement")}} 继承属性。_
+
+## 实例方法
+
+_该接口没有方法，但从其父接口 {{domxref("SVGAnimationElement")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/svggraphicselement/getbbox/index.md b/files/zh-cn/web/api/svggraphicselement/getbbox/index.md
index 1bb7d4f3c57c37..da70a56b30034e 100644
--- a/files/zh-cn/web/api/svggraphicselement/getbbox/index.md
+++ b/files/zh-cn/web/api/svggraphicselement/getbbox/index.md
@@ -3,6 +3,8 @@ title: getBBox
slug: Web/API/SVGGraphicsElement/getBBox
---
+{{APIRef("SVG")}}
+
**`SVGGraphicsElement.getBBox()`**允许我们确定对象适合的最小矩形的坐标。返回的坐标是相对于当前 svg 空间的，即在将所有几何属性应用于目标元素中包含的所有元素之后。
Note: `getBBox` must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. It also neglects any transformation applied on the element or its parents.
diff --git a/files/zh-cn/web/api/svgviewelement/index.md b/files/zh-cn/web/api/svgviewelement/index.md
new file mode 100644
index 00000000000000..0fd682386cfb99
--- /dev/null
+++ b/files/zh-cn/web/api/svgviewelement/index.md
@@ -0,0 +1,32 @@
+---
+title: SVGViewElement
+slug: Web/API/SVGViewElement
+l10n:
+ sourceCommit: 226ac33eb70ed5411dd2d68bd602c80cafd780b6
+---
+
+{{APIRef("SVG")}}
+
+**`SVGViewElement`** 接口提供了对 {{SVGElement("view")}} 元素属性的访问，以及对其进行操作的方法。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_该接口还继承了其父接口 {{domxref("SVGElement")}} 的属性。_
+
+## 实例方法
+
+_该接口没有实现任何特定方法，但继承了其父接口 {{domxref("SVGElement")}} 的方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{SVGElement("view")}}
diff --git a/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md b/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md
index e4db7c8a3d927d..f8b5629aa6cfe2 100644
--- a/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md
+++ b/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.md
@@ -3,6 +3,8 @@ title: Key Values
slug: Web/API/UI_Events/Keyboard_event_key_values
---
+{{DefaultAPISidebar("UI Events")}}
+
下列表格列出了不同范畴的键的标准键值，以及这些键的一般作用。对应的，通用平台上可用的虚拟键码也包含其中。
Learn how to use these key values in JavaScript using [KeyboardEvent.key](/zh-CN/docs/Web/API/KeyboardEvent/key)
diff --git a/files/zh-cn/web/api/url/host/index.md b/files/zh-cn/web/api/url/host/index.md
index eee55fd94ccef8..65bd99e0dec9d2 100644
--- a/files/zh-cn/web/api/url/host/index.md
+++ b/files/zh-cn/web/api/url/host/index.md
@@ -7,7 +7,7 @@ l10n:
{{ApiRef("URL API")}} {{AvailableInWorkers}}
-{{domxref("URL")}} 接口的 **`host`** 属性是一个包含主机信息（即{{domxref("URL.hostname", "主机名", "", 1)}}）的字符串，然后，如果 URL 的{{glossary("port", "端口")}}非空，则会出现 `':'`，后根 URL 的{{domxref("URL.port", "端口", "", 1)}}。
+{{domxref("URL")}} 接口的 **`host`** 属性是一个包含主机信息（即{{domxref("URL.hostname", "主机名", "", 1)}}）的字符串，然后，如果 URL 的{{glossary("port", "端口")}}非空，则会出现 `':'`，后跟 URL 的{{domxref("URL.port", "端口", "", 1)}}。
## 值
diff --git a/files/zh-cn/web/api/url_api/index.md b/files/zh-cn/web/api/url_api/index.md
index 572c28083fb2db..fc85f3877d7f43 100644
--- a/files/zh-cn/web/api/url_api/index.md
+++ b/files/zh-cn/web/api/url_api/index.md
@@ -1,19 +1,21 @@
---
title: URL API
slug: Web/API/URL_API
+l10n:
+ sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
---
-{{DefaultAPISidebar("URL API")}}
+{{DefaultAPISidebar("URL API")}} {{AvailableInWorkers}}
-URL API 是一个 URL 标准的组件，它定义了有效的{{Glossary("URL", "Uniform Resource Locator")}}和访问、操作 URL 的 API。URL 标准还定义了像域名、主机和 IP 地址等概念，并尝试以标准的方式去描述用于以键/值对的形式提交 web 表单内容的遗留`application/x-www-form-urlencoded` {{Glossary("MIME type")}} 。
+URL API 是 URL 标准的一个组件，定义了有效 {{Glossary("URL")}} 的构成，以及访问和操作 URL 的 API。URL 标准还定义了像域名、主机和 IP 地址等概念，并尝试以标准的方式去描述用于以键/值对的形式提交 Web 表单内容的遗留 `application/x-www-form-urlencoded` {{Glossary("MIME type", "MIME 类型")}} 。
-## URL 的概念和用法
+## 概念和用法
-URL 标准的主要内容是由 URL 的定义以及它的结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义，并指定了解析 IP 地址和 DOM 地址的算法。大多数开发人员更感兴趣的是 API 本身。
+URL 标准的主要内容是由 [URL 的定义](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)及其结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义，并指定了解析 IP 地址和 DOM 地址的算法。大多数开发者更感兴趣于 API 本身。
### 使用 URL 组件
-给指定的 URL 创建一个 {{domxref("URL")}} 对象将解析 URL 并通过其属性对其组成部分的快速访问。
+给指定的 URL 创建一个 {{domxref("URL")}} 对象将解析该 URL，并通过其属性提供对其组成部分的快速访问。
```js
let addr = new URL("https://developer.mozilla.org/zh-CN/docs/Web/API/URL_API");
@@ -21,26 +23,26 @@ let host = addr.host;
let path = addr.pathname;
```
-上面的代码片段为你正在阅读的文章创建一个`URL`对象，然后获取 {{domxref("URL.host", "host")}} 和 {{domxref("URL.pathname", "pathname")}} 属性。在本例中，这些字符串的值分别是`developer.mozilla.org` 和`/zh-CN/docs/Web/API/URL_API`。
+上面的代码片段为你正在阅读的这篇文章创建一个 `URL` 对象，然后获取 {{domxref("URL.host", "host")}} 和 {{domxref("URL.pathname", "pathname")}} 属性。在本例中，这些字符串的值分别是 `developer.mozilla.org` 和 `/zh-CN/docs/Web/API/URL_API`。
### 修改 URL
-`URL`对象的大部分属性都是可设置的；你可以向它们写入新值来更改对象所表示的 URL。例如，要创建一个 URL 对象并设置它的用户名：
+`URL` 对象的大部分属性都是可设置的；你可以向它们写入新值来更改对象所表示的 URL。例如，要创建一个 URL 对象并设置它的用户名：
```js
let myUsername = "someguy";
-let addr = new URL("https://mysite.com/login");
+let addr = new URL("https://example.com/login");
addr.username = myUsername;
```
-设置 {{domxref("URL.username", "username")}} 值不仅是设置该属性的值，而且更新整个 URL。执行上面的代码片段后， {{domxref("URL.href", "addr.href")}} 的返回值是`https://someguy@mysite.com/login`。对于任何可写属性都是如此。
+对 {{domxref("URL.username", "username")}} 的值的修改除了对属性值的变更，还更新整个 URL。执行上面的代码片段后，{{domxref("URL.href", "addr.href")}} 的返回值是`https://someguy@example.com/login`。这一点对于任何可修改属性都是如此。
### 查询
-{{domxref("URL.search", "search")}} 属性在 URL 上包含 URL 的查询字符串部分。例如，如果 URL 是`https://mysite.com/login?user=someguy&page=news`，那么`search` 属性的值是`?user=someguy&page=news`。你还可以使用 {{domxref("URLSearchParams")}} 对象的 {{domxref("URLSearchParams.get", "get()")}} 查找单个参数的值：
+`URL` 的 {{domxref("URL.search", "search")}} 属性包含 URL 的查询字符串部分。例如，如果 URL 是 `https://example.com/login?user=someguy&page=news`，那么 `search` 属性的值是 `?user=someguy&page=news`。你还可以使用 {{domxref("URLSearchParams")}} 对象的 {{domxref("URLSearchParams.get", "get()")}} 查找单个参数的值：
```
-let addr = new URL("https://mysite.com/login?user=someguy&page=news");
+let addr = new URL("https://example.com/login?user=someguy&page=news");
try {
loginUser(addr.searchParams.get("user"));
gotoPage(addr.searchParams.get("page"));
@@ -51,20 +53,20 @@ try {
例如，在上面的代码片段中，从查询中提取用户名和目标页面，并将其传递给适当的函数，站点代码使用这些函数登录并将用户路由到站点的目的页面。
-`URLSearchParams`中的其他函数允许修改改、添加和删除键和值，甚至对参数列表进行排序。
+`URLSearchParams` 中的其他函数允许修改、添加和删除键和值，甚至对参数列表进行排序。
-## URL API 接口
+## 接口
URL API 是一个简单的 API，它的名字只有几个接口：
-- [`URL`](/zh-CN/docs/Web/API/URL)
-- [`URLSearchParams`](/zh-CN/docs/Web/API/URLSearchParams)
+- {{domxref("URL")}}
+ - : 可被用于解析、构建、标准化和编码 {{glossary("URL")}}。
+- {{domxref("URLSearchParams")}}
+ - : 定义各种用于处理 URL 的查询字符串的实用方法。
-该规范的旧版本包括一个名为{{domxref("URLUtilsReadOnly")}}的接口，该接口已经合并到{{domxref("WorkerLocation")}} 接口中。
+## 示例
-## 例子
-
-如果希望处理 URL 中包含的参数，可以手动进行处理，但是创建一个 URL 对象更容易。下面的`fillTableWithParameters()`函数接受一个表示{{HTMLElement("table")}}的 {{domxref("HTMLTableElement")}} 对象作为输入。将行添加到表中，每个行对应参数中找到的键，第一列包含键，第二列包含值。
+如果希望处理 URL 中包含的参数，可以手动进行处理，但是创建一个 `URL` 对象更容易。下面的 `fillTableWithParameters()` 函数接受一个表示 {{HTMLElement("table")}} 的 {{domxref("HTMLTableElement")}} 对象作为输入。将行添加到表中，一行对应参数中找到的一个键，第一列包含键，第二列包含值。
注意，在生成表之前调用 {{domxref("URLSearchParams.sort()")}} 对参数列表进行排序。
@@ -88,7 +90,7 @@ function fillTableWithParameters(tbl) {
}
```
-在 [found on Glitch](https://url-api.glitch.me/)上可以找到这个例子的工作版本。只要在加载页面时向 URL 添加参数，就可以在表中看到它们。例如，试试[`https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable`](https://url-api.glitch.me/?from=mdn&excitement=high&likelihood=inconceivable)。
+[可在 Glitch 上找到](https://url-api.glitch.me/)该示例的可用版本。只要在加载页面时向 URL 添加参数，就可以在表中看到它们。例如，试试 [`https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable`](https://url-api.glitch.me/?from=mdn&excitement=high&likelihood=inconceivable)。
## 规范
@@ -100,5 +102,7 @@ function fillTableWithParameters(tbl) {
## 参见
-- [Fetch API](/zh-CN/docs/Web/API/Fetch_API)
-- CSS {{cssxref("<url>")}} type
+- {{domxref("Fetch API", "", "", "nocode")}}
+- CSS {{cssxref("<url>")}} 类型
+- {{jsxref("encodeURI", "encodeURI()")}}
+- {{jsxref("encodeURIComponent", "encodeURIComponent()")}}
diff --git a/files/zh-cn/web/api/useractivation/hasbeenactive/index.md b/files/zh-cn/web/api/useractivation/hasbeenactive/index.md
new file mode 100644
index 00000000000000..f84ef4ce5f26b3
--- /dev/null
+++ b/files/zh-cn/web/api/useractivation/hasbeenactive/index.md
@@ -0,0 +1,40 @@
+---
+title: UserActivation：hasBeenActive 属性
+slug: Web/API/UserActivation/hasBeenActive
+l10n:
+ sourceCommit: 7907a38073627c84ff795b1c0ea20513a90b4a4e
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("UserActivation")}} 接口的 **`hasBeenActive`** 只读属性表示当前的窗口是否有{{Glossary("sticky activation","粘性用户激活")}}。
+
+## 值
+
+一个布尔值。
+
+## 示例
+
+### 检查是否执行过用户手势
+
+使用 `hasBeenActive` 属性检查用户自加载页面以来是否与页面进行过交互。
+
+```js
+if (navigator.userActivation.hasBeenActive) {
+ // 例如，继续自动播放动画
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("UserActivation")}}
+- {{domxref("UserActivation.isActive")}}
+- [由用户激活控制的特性](/zh-CN/docs/Web/Security/User_activation)
diff --git a/files/zh-cn/web/api/useractivation/index.md b/files/zh-cn/web/api/useractivation/index.md
new file mode 100644
index 00000000000000..f8531fa27594e4
--- /dev/null
+++ b/files/zh-cn/web/api/useractivation/index.md
@@ -0,0 +1,67 @@
+---
+title: UserActivation
+slug: Web/API/UserActivation
+l10n:
+ sourceCommit: 7907a38073627c84ff795b1c0ea20513a90b4a4e
+---
+
+{{APIRef("HTML DOM")}}
+
+**`UserActivation`** 接口提供有关用户当前是否正在与页面交互，或者自页面加载以来是否已完成交互的信息。
+
+此 API 仅在 window 上下文中可用，web worker 中不可用。
+
+## 实例属性
+
+- {{domxref("UserActivation.hasBeenActive")}} {{ReadOnlyInline}}
+ - : 指示当前窗口是否具有粘性（用户）激活。
+- {{domxref("UserActivation.isActive")}} {{ReadOnlyInline}}
+ - : 指示当前窗口是否具有瞬态（用户）激活。
+
+## 描述
+
+此类型的对象可通过 {{domxref("navigator.userActivation")}} 属性访问，并可用于查询有关 window 的用户激活状态的信息。
+
+用户激活意味着用户当前正在与页面交互，或者自页面加载以来已完成交互。用户激活可以通过按钮点击、指针触摸或其它的用户界面的交互来触发。
+
+window 用户激活状态有两种：
+
+- {{Glossary("Transient activation", "瞬态激活")}}（用户当前正在与页面交互）和
+- {{Glossary("Sticky activation", "粘性激活")}}（自页面加载以来，用户至少交互过一次）。
+
+有关更多信息以及需要粘性或瞬态激活的 API 列表，请参见[由用户激活控制的特性](/zh-CN/docs/Web/Security/User_activation) 。
+
+## 示例
+
+### 检查最近是否执行过用户手势
+
+使用 {{domxref("navigator.userActivation")}} 访问 `UserActivation` 对象，然后使用 {{domxref("UserActivation.isActive")}} 检查用户当前是否正在与页面进行交互（{{Glossary("Transient activation", "瞬态激活")}}）。
+
+```js
+if (navigator.userActivation.isActive) {
+ // 例如，继续请求播放媒体
+}
+```
+
+### 检查是否执行过用户手势
+
+使用 {{domxref("UserActivation.hasBeenActive")}} 检查用户是否曾与页面进行过交互（{{Glossary("Sticky activation", "粘性激活")}}）。
+
+```js
+if (navigator.userActivation.hasBeenActive) {
+ // 例如，继续自动播放动画。
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("navigator.userActivation")}}
+- [由用户激活的控制的特性](/zh-CN/docs/Web/Security/User_activation)
diff --git a/files/zh-cn/web/api/useractivation/isactive/index.md b/files/zh-cn/web/api/useractivation/isactive/index.md
new file mode 100644
index 00000000000000..62b5da7ad252da
--- /dev/null
+++ b/files/zh-cn/web/api/useractivation/isactive/index.md
@@ -0,0 +1,40 @@
+---
+title: UserActivation：isActive 属性
+slug: Web/API/UserActivation/isActive
+l10n:
+ sourceCommit: 7907a38073627c84ff795b1c0ea20513a90b4a4e
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("UserActivation")}} 接口的 **`isActive`** 只读属性表示当前的窗口是否有{{Glossary("transient activation", "瞬态用户激活")}}。
+
+## 值
+
+一个布尔值。
+
+## 示例
+
+### 检查最近是否执行过用户手势
+
+使用 `isActive` 属性可以检查用户当前是否正在与页面交互。
+
+```js
+if (navigator.userActivation.isActive) {
+ // 例如，继续请求播放媒体
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("UserActivation")}}
+- {{domxref("UserActivation.hasBeenActive")}}
+- [由用户激活控制的特性](/zh-CN/docs/Web/Security/User_activation)
diff --git a/files/zh-cn/web/api/videoplaybackquality/totalvideoframes/index.md b/files/zh-cn/web/api/videoplaybackquality/totalvideoframes/index.md
index 4dece3894a2cc8..ca4e55b1cd54f2 100644
--- a/files/zh-cn/web/api/videoplaybackquality/totalvideoframes/index.md
+++ b/files/zh-cn/web/api/videoplaybackquality/totalvideoframes/index.md
@@ -3,6 +3,8 @@ title: VideoPlaybackQuality.totalVideoFrames
slug: Web/API/VideoPlaybackQuality/totalVideoFrames
---
+{{APIRef("HTML DOM")}}
+
```
videoPlaybackQuality 的totalVideoFrames 属性为一个只读属性，用于表述已经被加载的媒体资源中已经被渲染播放或者被废弃的视频帧总数
```
diff --git a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes_en.svg b/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes_en.svg
deleted file mode 100644
index c664f1d956aaa5..00000000000000
--- a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes_en.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" width="630" height="360"><g transform="translate(.5 .5)"><circle cx="294" cy="248" fill="#fff" stroke="#000" stroke-dasharray="3 3" pointer-events="none" r="110"/><path d="M199 248h190" fill="none" stroke="#000" stroke-width="5" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 188h94v24h-94zm0 24h94v24h-94zm0 24h94v24h-94z"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 258h94v24h-94zm0 24h94v24h-94z"/><path d="M249 188v120m94-120v120" fill="none" stroke="#000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M284 180h24v16h-24z"/><text x="3" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 183)">L</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 203h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 206)">R</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 227h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(290 230)">SL</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 250h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(289 253)">SR</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 274h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 277)">C</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 298h24v16h-24z"/><text x="10" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(287 301)">LFE</text><path d="M9 27h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 27-9 4.5 2.25-4.5-2.25-4.5Z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m74 47 129 135" fill="none" stroke="#000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M278 26h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m404.65 26-9 4.5 2.25-4.5-2.25-4.5Z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M278 49h55.5q10 0 10 10v47q0 10 10 10h45.4" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m405.65 116-9 4.5 2.25-4.5-2.25-4.5Z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M549 25h59.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m615.65 25-9 4.5 2.25-4.5-2.25-4.5Z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><text y="22" text-anchor="left" font-size="10" font-family="Helvetica" transform="translate(421 216)">
- Chaque entrée / sortie est
- <tspan x="0" dy="1.5em">composée de plusieurs canaux.</tspan>
- <tspan x="0" dy="1.5em">Ici on voit une configuration 5.1</tspan>
- </text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M151 13h118v50H151z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(176 32)">Noeud audio</text><path d="M9 47h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 47-9 4.5 2.25-4.5-2.25-4.5Z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 1h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 20)">Noeud audio</text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 91h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 110)">Noeud audio</text><text x="19" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(41 12)">Sources</text><text x="24" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(308 11)">Destination</text></g></svg>
\ No newline at end of file
diff --git a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
index da1c9da5b79427..4a256bdd2b27a1 100644
--- a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
+++ b/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: 网页音频接口的基本概念
slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
这篇文章解释了 网页音频接口 (Web Audio API) 运作过程中的部分音频处理概念。本文并不会将你变为一名音频处理大师，但它可以给你足够的背景知识来理解 网页音频接口 的运行原理，并能让你在使用它时做出更好的决策。
## 音频节点：模块化连接
@@ -17,39 +19,39 @@ slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
4. 选择音频的终点——例如系统的扬声器
5. 连接声源和特效，以及特效和终点。
-
+
每个输入和输出都可以包括几个声道，声道代表了一个特定的音效通道。各种声道分离结构都可以使用，包括*单声道*，_立体声_，_四声道_，*5.1*等等。
-
+
声源可以来自不同的地方：
- 直接通过 Javascript 生成声音节点产生（例如一个振动发声器）
- 由脉冲编码调制产生的原始数据（音频环境中可以调用一些方法来解码部分支持的格式）
- 从 HTML 元素中（例如 {{HTMLElement("video")}} 或者 {{HTMLElement("audio")}} 标签）
-- 直接通过一个 [WebRTC](/zh-CN/docs/WebRTC) {{domxref("MediaStream")}} 获取流媒体（例如一个摄像头或麦克风）
+- 直接通过一个 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} 获取流媒体（例如一个摄像头或麦克风）
## 音频数据：什么是样本
当一个音频信号被处理时，取样意味着从一个[连续的信号](http://wikipedia.org/wiki/Continuous_signal)转化为[离散的信号](http://wikipedia.org/wiki/Discrete_signal)；更具体地说，一个连续的声波（例如一个正在演奏的乐队发出的声音）会被转化成一系列的样本点（一个时间上离散的信号），计算机只可以处理这些离散的样本块。
-更多的细节可以查看维基百科的[采样](http://wikipedia.org/wiki/Sampling_%28signal_processing%29)页面。
+更多的细节可以查看维基百科的[采样](https://zh.wikipedia.org/wiki/取樣)页面。
## 音频片段：帧、样本和声道
-一个 音频片段 ({{ domxref("AudioBuffer") }}) 会包含几个组成参数：一个或几个声道（1 代表*单声道*，2 代表*立体声*等等），一个长度（代表片段中采样帧的数目）和一个采样率（是每秒钟采样帧的个数）。
+一个音频片段（{{domxref("AudioBuffer")}}）会包含几个组成参数：一个或几个声道（1 代表*单声道*，2 代表*立体声*等等），一个长度（代表片段中采样帧的数目）和一个采样率（是每秒钟采样帧的个数）。
每个样本点都是一个 代表着该音频流在特定时间特定声道上的数值的 单精度浮点数。一个帧，或者一个采样帧是由一组在特定时间上的所有声道的样本点组成的——即所有声道在同一时间的样本点（*立体声*有 2 个，*5.1*有 6 个，等等，每个帧包含的样本点个数和声道数相同）。
-采样率就是一秒钟内获取帧的个数，单位是赫兹 (Hz)。采样率越高，音频效果越好。
+采样率就是一秒钟内获取帧的个数，单位是赫兹（Hz）。采样率越高，音频效果越好。
现在让我们来看一下通道，一个单声道和一个立体声的音频片段，每个都是 1 秒钟，播放频率（采样率）为 44100 赫兹：
- 单声道片段会有 44100 个样本点和 44100 个帧。长度属性为 44100。
- 立体声片段会有 88200 个样本点和 44100 个帧。长度属性依旧为 44100，因为长度总和帧的个数相同。
-
+
当一个音频片段开始播放时，你将会听到最左侧的样本帧，之后是他右侧相邻的一帧，以此类推。在立体声中，你将会同时听到两个声道。样本帧的概念在此时非常有用，因为每个样本帧代表特定的播放时间，而和声道个数无关，这种方式很有利于精确的多声道同步处理。
@@ -64,7 +66,7 @@ var buffer = context.createBuffer(2, 22050, 44100);
如果你使用上面的方法调用，你将会得到一个立体声（两个声道）的音频片段 (Buffer)，当它在一个频率为 44100 赫兹（这是目前大部分声卡处理声音的频率）的音频环境中播放的时候，会持续 0.5 秒：22050 帧 / 44100 赫兹 = 0.5 秒。
-> **备注：** 在 [数字音频](https://zh.wikipedia.org/zh-cn/數位音訊) 中，**44,100 [赫兹](https://wikipedia.org/wiki/Hertz)** （有时也写作 **44.1 kHz**）是一个常见的 [取样频率](https://wikipedia.org/wiki/Sampling_frequency)。为什么选取 44.1kHz 呢？首先，因为 [人耳的接收频率](https://wikipedia.org/wiki/Hearing_range) 大约在 20 Hz 到 20,000 Hz 之间，根据 [采样定理](https://zh.wikipedia.org/wiki/采样定理)，采样频率一定要大于最终生成数据最大频率的二倍，因此就一定要大于 40,000 Hz（即 40kHz）。不仅如此，在采样之前信号还必须通过 [低通滤波器](https://zh.wikipedia.org/zh-cn/低通滤波器) ，否则 会发生[混叠](https://zh.wikipedia.org/zh-cn/混疊)现象，一个理想低通滤波器会完全留下低于 20kHz 的信号（且没有使它衰减）并完美阻拦一切高于 20kHz 的信号，而事实上 [过度频带（英文）](https://wikipedia.org/wiki/Transition_band)总是存在，在这个区域内信号会被部分衰减。这个频带越宽，建立一个 [抗混叠滤波器](https://zh.wikipedia.org/zh-cn/抗混疊濾波器) 才越容易。因此我们选取 44.1kHz 允许我们有 2.05kHz 的空间预留给过度频带。
+> **备注：** 在[数字音频](https://zh.wikipedia.org/wiki/數位音訊)中，**44,100 [赫兹](https://zh.wikipedia.org/wiki/赫兹)**（有时也写作 **44.1 kHz**）是一个常见的[采样频率](https://zh.wikipedia.org/wiki/取樣)。为什么选取 44.1kHz 呢？首先，因为[人耳的接收频率](https://zh.wikipedia.org/wiki/聽力範圍)大约在 20 Hz 到 20,000 Hz 之间，根据[采样定理](https://zh.wikipedia.org/wiki/采样定理)，采样频率一定要大于最终生成数据最大频率的二倍，因此就一定要大于 40,000 Hz（即 40kHz）。不仅如此，在采样之前信号还必须通过[低通滤波器](https://zh.wikipedia.org/wiki/低通滤波器)，否则 会发生[混叠](https://zh.wikipedia.org/wiki/混疊)现象，一个理想低通滤波器会完全留下低于 20kHz 的信号（且没有使它衰减）并完美阻拦一切高于 20kHz 的信号，而事实上[过度频带](https://wikipedia.org/wiki/Transition_band)总是存在，在这个区域内信号会被部分衰减。这个频带越宽，建立一个[抗混叠滤波器](https://zh.wikipedia.org/wiki/抗混疊濾波器)才越容易。因此我们选取 44.1kHz 允许我们有 2.05kHz 的空间预留给过度频带。
```js
var context = new AudioContext();
@@ -320,7 +322,7 @@ LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR（对于一个有 16 帧的音频片段）
一般来说，可视化是通过获取各个时间上的音频数据（通常是振幅或频率），之后运用图像技术将其处理为视觉输出（例如一个图像）来实现的。网页音频接口提供了一个不会改变输入信号的音频节点 {{domxref("AnalyserNode")}}，通过它可以获取声音数据并传递到像 {{htmlelement("canvas")}} 等等一样的可视化工具。
-
+
你可以通过如下方法获取需要的音频数据：
@@ -333,7 +335,7 @@ LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR（对于一个有 16 帧的音频片段）
- {{domxref("AnalyserNode.getByteTimeDomainData()")}}
- : 返回一个{{domxref("Uint8Array")}} 无符号字节数组 (unsigned byte array)，其中包含传递到此音频节点声音的实时波形，时间数据。
-> **备注：** 更多信息可以参考我们的这篇文章：[基于 Web Audio API 实现音频可视化效果](/zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) 。
+> **备注：** 更多信息可以参考我们的这篇文章：[基于 Web Audio API 实现音频可视化效果](/zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)。
## 空间位置化
@@ -341,20 +343,20 @@ LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR（对于一个有 16 帧的音频片段）
声相控制器的位置可以通过笛卡尔坐标系进行描述，控制器的运动可以由速度向量来表示，这会引起多普勒效应，它的传播方向可以用一个方向圆锥来表示，当它是一个全方向声源时，圆锥会变得非常大。
-
+
接听者的位置可以用笛卡尔坐标系来表示；他的运动可以用方向向量表示；头部姿态可以用两个向量表示：一个向上向量表示头顶正对的方向，一个向前向量表示鼻子所指向的方向（面向的方向），这两个向量应该互相垂直。
-
+
-> **备注：** 更多信息可以参考我们的这篇文章：[网络音频位置空间化入门（英文）](/zh-CN/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)。
+> **备注：** 更多信息可以参考我们的这篇文章：[网络音频位置空间化入门](/zh-CN/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)。
## 扇入与扇出
对于音频来说，**扇入**是指 {{domxref("ChannelMergerNode")}} 节点接收一系列单声道输入声源，并将它们整合输出为一个多声道音频信号的过程：
-
+
**扇出**恰恰相反，是指一个{{domxref("ChannelSplitterNode")}} 节点接收一个多声道输入声源并将它分离成多个单声道音频信号的过程：
-
+
diff --git a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg b/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg
deleted file mode 100644
index a223c765e0b0f6..00000000000000
--- a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="719.5" height="248.722" xml:space="preserve"><path fill="none" stroke="#000" stroke-miterlimit="10" d="m191.75 122.152 311.964 33.235M51.833 183.75l118.844-54.493"/><path fill="none" stroke="#797A7D" stroke-miterlimit="10" d="M51.542 156.042v28m-.542 0h32.667m-32.125 0 19.666-19.959"/><path fill="#010101" d="m167.161 124.414 17.678-2.262-12.638 12.413z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m192.78 118.25 116.136-60.047"/><path fill="#010101" d="m305.175 53.531 17.551-3.095-12.037 12.997z"/><path fill="#797A7D" d="m48.238 156.042 3.364-9.833 3.245 9.807zm34.916 24.696 9.833 3.364-9.807 3.245zm-14.807-18.467 9.066-5.081-4.126 9.472z"/><path fill="#010101" d="m499.591 149.274 16.157 7.522-17.312 3.753z"/><text transform="translate(45.5 197.25)" fill="#797A7D" font-family="'ArialMT'" font-size="12">0</text><path fill="none" stroke="#719FD0" d="m102.5 42 33.5 95.75M365.597 99l-148.421 20.2m105.55-60.997 85.774-8.157m-109 91.762L259 184.042"/><circle fill="#010101" stroke="#719FD0" cx="188.583" cy="120.917" r="4.667"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m198.616 115.232 11.946 2.08-9.979 5.856"/><g font-family="'ArialMT'" font-size="12"><text transform="translate(413.597 54.124)">Vecteur de direction haut</text><text transform="translate(373 101)">Les deux vecteurs forment un angle droit (90°)</text><text transform="translate(202.563 199.615)">Vecteur de direction face</text><text transform="translate(16.738 34.75)">Vecteur de positionnement plaçant la source dans l’espace</text></g></svg>
\ No newline at end of file
diff --git a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg b/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg
deleted file mode 100644
index 2787b6ea8dd4d5..00000000000000
--- a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg
+++ /dev/null
@@ -1,176 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="622.281px" height="109.5px" viewBox="0 0 622.281 109.5" enable-background="new 0 0 622.281 109.5" xml:space="preserve">
-<g id="Calque_4">
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M162.011,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 122.6196 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 112.519 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 112.519 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M218.345,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 178.9536 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 168.853 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 168.853 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M274.679,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 235.2876 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 225.187 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 225.187 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M331.013,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 291.6216 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 281.521 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 281.521 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M218.345,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 178.9536 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 168.853 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 168.853 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M274.679,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 235.2876 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 225.187 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 225.187 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M331.013,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 291.6216 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 281.521 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 281.521 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M387.347,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 347.9551 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 337.855 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 337.855 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M387.347,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 347.9551 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 337.855 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 337.855 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M612.683,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 573.291 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 563.1914 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 563.1914 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <g>
- <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M612.683,86.586
- c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529
- h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
- <text transform="matrix(1 0 0 1 573.291 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
- <text transform="matrix(1 0 0 1 563.1914 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
- <text transform="matrix(1 0 0 1 563.1914 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
- </g>
- <text transform="matrix(1 0 0 1 19.2275 48.833)" font-family="'ArialMT'" font-size="10">canal gauche -></text>
- <text transform="matrix(1 0 0 1 33.082 76.4995)" font-family="'ArialMT'" font-size="10">canal droit -></text>
-</g>
-<g id="Calque_3">
- <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="105.352" y1="59" x2="612.7" y2="59"/>
- <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M612.7,72.27c0,9.452-5.272,17.115-11.777,17.115H117.129
- c-6.504,0-11.777-7.663-11.777-17.115V48.5c0-9.452,5.273-17.115,11.777-17.115h483.794c6.505,0,11.777,7.663,11.777,17.115V72.27z
- "/>
-</g>
-</svg>
diff --git a/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.md b/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.md
index ff608b7bebbccd..cc9c371794a69f 100644
--- a/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.md
+++ b/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: Web Audio API 的运用
slug: Web/API/Web_Audio_API/Using_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
让我们来看看 [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) 入门。我们将简要介绍一些概念，然后学习一个简单的允许我们加载音轨，播放暂停，改变音量和立体声声像的音箱例子。
Web Audio API 并不会取代\<audio>音频元素，倒不如说它是\<audio>的补充更好，就好比如\<canvas>与\<img>共存的关系。你使用来实现音频的方式取决于你的使用情况。如果你只是想控制一个简单的音轨的播放，\<audio>或许是一个更好更快的选择。如果你想实现更多复杂的音频处理，以及播放，Web Audio API 提供了更多的优势以及控制。
diff --git a/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index af0c958489fe50..a071fb5f73a34b 100644
--- a/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -3,6 +3,8 @@ title: 基于 Web Audio API 实现音频可视化效果
slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
---
+{{DefaultAPISidebar("Web Audio API")}}
+
网页音频接口最有趣的特性之一它就是可以获取频率、波形和其他来自声源的数据，这些数据可以被用作音频可视化。这篇文章将解释如何做到可视化，并提供了一些基础使用案例。
> **备注：** 你可以在[Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)演示里找到本文出现的所有代码片段。
diff --git a/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.md
index c4f396fd8ee332..9df184d873cf75 100644
--- a/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.md
+++ b/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.md
@@ -3,6 +3,8 @@ title: Web audio 空间化基础
slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics
---
+{{DefaultAPISidebar("Web Audio API")}}
+
正如大量的各种声音处理（或者其他）选择是不够的，WebAduioAPI 也包含了一些工具，可以让你模仿听众在声源周围移动时的声音差异，例如当你在 3D 游戏声源中移动时声音的平移。官方名词称为 **空间化**，这篇文章将会介绍如何实现这样一个系统的基础知识。
## 空间化的基础知识
diff --git a/files/zh-cn/web/api/web_authentication_api/index.md b/files/zh-cn/web/api/web_authentication_api/index.md
index 43a6e9fe7d91ab..97261f2b12d860 100644
--- a/files/zh-cn/web/api/web_authentication_api/index.md
+++ b/files/zh-cn/web/api/web_authentication_api/index.md
@@ -124,9 +124,9 @@ var createCredentialDefaultArgs = {
challenge: new Uint8Array([
// must be a cryptographically random number sent from a server
- 0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a,
- 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
- 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
+ 0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17,
+ 0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15,
+ 0x7e, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
]).buffer,
},
};
@@ -138,9 +138,9 @@ var getCredentialDefaultArgs = {
// allowCredentials: [newCredential] // see below
challenge: new Uint8Array([
// must be a cryptographically random number sent from a server
- 0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x67,
- 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26,
- 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
+ 0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15,
+ 0x67, 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f,
+ 0x81, 0x26, 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
]).buffer,
},
};
diff --git a/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.md
index ba1d728bacffd6..8cdc80abc283be 100644
--- a/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.md
+++ b/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -3,6 +3,8 @@ title: 使用 Web Speech API
slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API
---
+{{DefaultAPISidebar("Web Speech API")}}
+
Web Speech API 提供了两类不同方向的函数——语音识别和语音合成 (也被称为文本转为语音，英语简写是 tts)——开启了有趣的新可用性和控制机制。这篇文章提供了这两个方向的简单介绍，并且都带有例子。
## Speech recognition
diff --git a/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.md
index b1abc01db567a3..511efdaf58d66d 100644
--- a/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -3,6 +3,8 @@ title: 使用 Web Storage API
slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
---
+{{DefaultAPISidebar("Web Storage API")}}
+
Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，比使用 cookie 更加直观。这篇文章一步一步讲解如何使用这项简单的技术。
## 基本概念
diff --git a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
index 4cdf4f0735e560..0533801646ec85 100644
--- a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
+++ b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
@@ -17,17 +17,20 @@ slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
一些函数在所有的 worker 和主线程中均可用（来自 `WindowOrWorkerGlobalScope`）：
-- {{domxref("atob", "atob()")}}
-- {{domxref("btoa", "btoa()")}}
+- {{domxref("WorkerGlobalScope.atob()", "atob()")}}
+- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
- {{domxref("clearInterval()")}}
- {{domxref("clearTimeout()")}}
-- {{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}
+- {{domxref("createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
+- {{domxref("fetch()")}}
- {{domxref("queueMicrotask()")}}
+- {{domxref("reportError()")}}
- {{domxref("setInterval()")}}
- {{domxref("setTimeout()")}}
- {{domxref("structuredClone()")}}
-- {{domxref("window.requestAnimationFrame")}}（仅专用 worker）
-- {{domxref("window.cancelAnimationFrame")}}（仅专用 worker）
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker）
+- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}（仅专用 worker）
以下函数**仅**在 worker 中可用：
diff --git a/files/zh-cn/web/api/web_workers_api/index.md b/files/zh-cn/web/api/web_workers_api/index.md
index 01074dd33227f1..e2e1a310248d8f 100644
--- a/files/zh-cn/web/api/web_workers_api/index.md
+++ b/files/zh-cn/web/api/web_workers_api/index.md
@@ -37,17 +37,20 @@ worker 在一个与当前 {{DOMxRef("window")}} 不同的全局上下文中运
所有 worker 和主线程（来自 `WindowOrWorkerGlobalScope`）共有的一些函数（子集）是：
-- {{domxref("atob", "atob()")}}
-- {{domxref("btoa", "btoa()")}}
-- {{domxref("clearInterval", "clearInterval()")}}
+- {{domxref("WorkerGlobalScope.atob()", "atob()")}}
+- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
+- {{domxref("clearInterval()")}}
- {{domxref("clearTimeout()")}}
-- {{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}
+- {{domxref("createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
+- {{domxref("fetch()")}}
- {{domxref("queueMicrotask()")}}
+- {{domxref("reportError()")}}
- {{domxref("setInterval()")}}
- {{domxref("setTimeout()")}}
- {{domxref("structuredClone()")}}
-- {{domxref("window.requestAnimationFrame")}}（仅专用 worker）
-- {{domxref("window.cancelAnimationFrame")}}（仅专用 worker）
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker）
+- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}（仅专用 worker）
以下函数**仅**对 worker 可用：
diff --git a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md
index 12304fa55c8d87..05dc327e52fca7 100644
--- a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md
@@ -606,7 +606,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
## 嵌入式 worker
-目前没有一种“官方”的方法能够像 {{ HTMLElement("script") }} 元素一样将 worker 的代码嵌入道到网页中。但是如果一个 {{ HTMLElement("script") }} 元素没有 `src` 属性，并且它的 `type` 属性没有指定成一个可运行的 MIME type，那么它就会被认为是一个数据块元素，并且能够被 JavaScript 使用。“数据块”是 HTML5 中一个十分常见的特性，它可以携带几乎任何文本类型的数据。所以，你能够以如下方式嵌入一个 worker：
+目前没有一种“官方”的方法能够像 {{ HTMLElement("script") }} 元素一样将 worker 的代码嵌入到网页中。但是如果一个 {{ HTMLElement("script") }} 元素没有 `src` 属性，并且它的 `type` 属性没有指定成一个可运行的 MIME type，那么它就会被认为是一个数据块元素，并且能够被 JavaScript 使用。“数据块”是 HTML5 中一个十分常见的特性，它可以携带几乎任何文本类型的数据。所以，你能够以如下方式嵌入一个 worker：
```html
<!doctype html>
diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.md b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.md
index c845f81fa52704..8589af679fe782 100644
--- a/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.md
+++ b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.md
@@ -1,24 +1,28 @@
---
-title: WebGLRenderingContext.deleteShader()
+title: WebGLRenderingContext：deleteShader() 方法
slug: Web/API/WebGLRenderingContext/deleteShader
+l10n:
+ sourceCommit: eda49877b9078b24cd18f794470e5e225add9b94
---
-{{APIRef("WebGL")}}**`WebGLRenderingContext.deleteShader()`** 用于删除一个参数提供的 {{domxref("WebGLShader")}}对象。如果该{{domxref("WebGLShader")}}对象已经被删除，该方法不会有任何作用。
+{{APIRef("WebGL")}}
-## Syntax
+[WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的 **`WebGLRenderingContext.deleteShader()`** 方法用于将给定的 {{domxref("WebGLShader")}} 对象标记为删除状态。当着色器不再使用时，它将被删除。如果着色器已经被删除，则此方法不会产生任何效果，当着色器被垃圾回收器销毁时，{{domxref("WebGLShader")}} 会被自动标记为删除状态。
-```plain
-void gl.deleteShader(shader);
+## 语法
+
+```js-nolint
+deleteShader(shader)
```
### 参数
-- shader
- - : 需要被删除的 {{domxref("WebGLShader")}} 对象
+- `shader`
+ - : 需要被删除的 {{domxref("WebGLShader")}} 对象。
### 返回值
-None.
+无（{{jsxref("undefined")}}）。
## 示例
@@ -36,7 +40,7 @@ gl.deleteShader(shader);
{{Compat}}
-## 其他相关
+## 参见
- {{domxref("WebGLRenderingContext.createShader()")}}
- {{domxref("WebGLRenderingContext.isShader()")}}
diff --git a/files/zh-cn/web/api/webglshaderprecisionformat/index.md b/files/zh-cn/web/api/webglshaderprecisionformat/index.md
index 104fa2bac79e9c..7bcbdc38c416e4 100644
--- a/files/zh-cn/web/api/webglshaderprecisionformat/index.md
+++ b/files/zh-cn/web/api/webglshaderprecisionformat/index.md
@@ -3,6 +3,8 @@ title: WebGLShaderPrecisionFormat
slug: Web/API/WebGLShaderPrecisionFormat
---
+{{APIRef("WebGL")}}
+
**WebGLShaderPrecisionFormat** 接口是[WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分，它表示通过调用{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}返回信息的信息。
## 属性
diff --git a/files/zh-cn/web/api/webgltexture/index.md b/files/zh-cn/web/api/webgltexture/index.md
index 8dd48b535718cc..f8492e79cfcc6f 100644
--- a/files/zh-cn/web/api/webgltexture/index.md
+++ b/files/zh-cn/web/api/webgltexture/index.md
@@ -3,6 +3,8 @@ title: WebGLTexture
slug: Web/API/WebGLTexture
---
+{{APIRef("WebGL")}}
+
**WebGLTexture**接口是[WebGL API](/zh-CN/docs/Web/API/WebGL_API)的一部分，为不透明的纹理对象提供储存和状态等纹理操作。
## 描述
diff --git a/files/zh-cn/web/api/webrtc_api/index.md b/files/zh-cn/web/api/webrtc_api/index.md
index 5719298a486d51..1a4d3d1211d07b 100644
--- a/files/zh-cn/web/api/webrtc_api/index.md
+++ b/files/zh-cn/web/api/webrtc_api/index.md
@@ -1,82 +1,233 @@
---
title: WebRTC API
slug: Web/API/WebRTC_API
+l10n:
+ sourceCommit: 9716100b38b40f0f2ee8b3bfa2c692958868c5a6
---
{{DefaultAPISidebar("WebRTC")}}
-**WebRTC**（Web Real-Time Communications）是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
-
-WebRTC 包含了若干相互关联的 API 和协议以达到这个目标。你在这里看到的文档将会帮助你理解 WebRTC 的基本概念，还会教你如何去建立和使用可以传输媒体数据和其他任意数据的连接。当然你还会学到更多其他的东西。
-
-## 参考
-
-- {{domxref("RTCPeerConnection")}}
-- {{domxref("RTCSessionDescription")}}
-- {{domxref("RTCIceCandidate")}}
-- {{domxref("RTCPeerConnectionIceEvent")}}
-- {{domxref("MessageEvent")}}
-- {{domxref("MediaStream")}}
-- {{domxref("RTCStatsReport")}}
-- {{domxref("RTCIdentityEvent")}}
-- {{domxref("RTCIdentityErrorEvent")}}
-- {{domxref("MediaStreamEvent")}}
-- {{domxref("MediaStreamTrack")}}
-- {{domxref("MediaDevices")}}
+**WebRTC**（Web 实时通信）是一种使 Web 应用程序和站点能够捕获和选择性地流式传输音频或视频媒体，以及在浏览器之间交换任意数据的而无需中间件的技术。WebRTC 的一系列标准使得在不需要用户安装插件或任何其他第三方软件的情况下，可以实现点对点数据共享和电话会议。
+
+WebRTC 由几个相互关联的 API 和协议组成，它们共同工作以实现这一目标。你在这里找到的文档将帮助你了解 WebRTC 的基础知识，以及如何设置和使用数据和媒体连接等更多内容。
+
+## WebRTC 概念和用法
+
+WebRTC 有多种用途；与[媒体捕捉与媒体流 API](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API) 一起使用时，它们为 Web 提供了强大的多媒体功能，包括支持音频和视频会议、文件交换、屏幕共享、身份管理以及与传统电话系统的接口，包括发送 {{Glossary("DTMF")}}（按键拨号）信号。两个对等方之间的连接可以在不需要任何特殊驱动程序或插件的情况下建立，并且通常可以在没有任何中间服务器的情况下建立连接。
+
+两个对等方之间的连接由 {{DOMxRef("RTCPeerConnection")}} 接口表示。一旦使用 `RTCPeerConnection` 建立并打开了连接，就可以向连接添加媒体流（{{DOMxRef("MediaStream")}}）或数据通道（{{DOMxRef("RTCDataChannel")}}）。
+
+媒体流可以由任意数量的媒体信息轨道组成；轨道由基于 {{DOMxRef("MediaStreamTrack")}} 接口的对象表示，可以包含多种类型的媒体数据，包括音频、视频和文本（例如字幕甚至章节名称）。大多数流至少包含一个音频轨道和可能也包含一个视频轨道，并且可以用于发送和接收实时媒体或存储的媒体信息（例如流媒体电影）。
+
+你还可以使用两个对等方之间的连接来交换任意二进制数据，使用 {{DOMxRef("RTCDataChannel")}} 接口。这可以用于反向信道信息、元数据交换、游戏状态数据包、文件传输，甚至作为数据传输的主要通道。
+
+### 互操作性
+
+WebRTC 在现代浏览器中通常得到很好的支持，但仍存在一些不兼容性。[adapter.js](https://github.com/webrtcHacks/adapter) 库是一个可以使应用程序免受这些不兼容性的影响的垫片。
+
+## WebRTC 参考
+
+由于 WebRTC 提供了一系列共同工作以完成各种任务的接口，我们将参考资料按类别进行了划分。请参阅侧边栏中的按字母顺序排列的列表。
+
+### 连接设置和管理
+
+这些接口、字典和类型用于设置、打开和管理 WebRTC 连接。包括表示对等媒体连接、数据通道和在交换每个对等方的能力信息以选择最佳配置的接口时使用的接口。
+
+#### 接口
+
+- {{DOMxRef("RTCPeerConnection")}}
+ - : 表示本地计算机与远程对等方之间的 WebRTC 连接。它用于处理两个对等方之间的数据流式传输。
+- {{DOMxRef("RTCDataChannel")}}
+ - : 表示连接的两个对等方之间的双向数据通道。
+- {{DOMxRef("RTCDataChannelEvent")}}
+ - : 表示在将 {{DOMxRef("RTCDataChannel")}} 附加到 {{DOMxRef("RTCPeerConnection")}} 时发生的事件。使用此接口发送的唯一事件是 {{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}。
+- {{DOMxRef("RTCSessionDescription")}}
+ - : 表示会话的参数。每个 `RTCSessionDescription` 包括一个描述 {{DOMxRef("RTCSessionDescription.type", "type")}}，指示其描述的提议/应答协商过程的哪一部分，以及会话的 {{Glossary("SDP")}} 描述符。
+- {{DOMxRef("RTCStatsReport")}}
+ - : 提供有关连接或连接上的个别轨道的统计信息的详细信息；可以通过调用 {{DOMxRef("RTCPeerConnection.getStats()")}} 来获取报告。
+- {{DOMxRef("RTCIceCandidate")}}
+ - : 表示用于建立 {{DOMxRef("RTCPeerConnection")}} 的候选交互式连接建立（{{Glossary("ICE")}}）服务器。
+- {{DOMxRef("RTCIceTransport")}}
+ - : 表示有关 {{Glossary("ICE")}} 传输的信息。
+- {{DOMxRef("RTCPeerConnectionIceEvent")}}
+ - : 表示与目标 ICE 候选项相关的事件，通常是 {{DOMxRef("RTCPeerConnection")}}。此类型仅有一个事件：{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}。
+- {{DOMxRef("RTCRtpSender")}}
+ - : 管理在 {{DOMxRef("RTCPeerConnection")}} 上的 {{DOMxRef("MediaStreamTrack")}} 的数据编码和传输。
+- {{DOMxRef("RTCRtpReceiver")}}
+ - : 管理在 {{DOMxRef("RTCPeerConnection")}} 上的 {{DOMxRef("MediaStreamTrack")}} 的数据接收和解码。
+- {{DOMxRef("RTCTrackEvent")}}
+ - : 用于表示 {{domxref("RTCPeerConnection.track_event", "track")}} 事件的接口，该事件指示已将 {{DOMxRef("RTCRtpReceiver")}} 对象添加到 {{DOMxRef("RTCPeerConnection")}} 对象，表示已创建并添加了新的传入 {{DOMxRef("MediaStreamTrack")}} 至 `RTCPeerConnection`。
+- {{DOMxRef("RTCSctpTransport")}}
+ - : 提供描述流控制传输协议（**{{Glossary("SCTP")}}**）传输的信息，并提供一种访问底层的用于所有 [`RTCPeerConnection`](/zh-CN/docs/Web/API/RTCPeerConnection) 的数据通道发送和接收的 SCTP 包的数据报传输层安全（**{{Glossary("DTLS")}}**）传输的方式。
+
+#### 事件
+
+- {{domxref("RTCDataChannel.bufferedamountlow_event", "bufferedamountlow")}}
+ - : 表示数据通道当前缓冲的数据量（由其 {{domxref("RTCDataChannel.bufferedAmount", "bufferedAmount")}} 属性指示）已经减少到或低于通道的最小缓冲数据大小（由 {{domxref("RTCDataChannel.bufferedAmountLowThreshold", "bufferedAmountLowThreshold")}} 指定）。
+- {{domxref("RTCDataChannel.close_event", "close")}}
+ - : 数据通道已完成关闭过程，现在处于 `closed` 状态。此时，其底层数据传输完全关闭。你可以通过观察 `closing` 事件来在关闭完成*之前*得到通知。
+- {{domxref("RTCDataChannel.closing_event", "closing")}}
+ - : `RTCDataChannel` 已转换为 `closing` 状态，表示它将很快关闭。你可以通过观察 `close` 事件来检测关闭过程的完成。
+- {{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}
+ - : 连接状态（可以通过 {{domxref("RTCPeerConnection.connectionState", "connectionState")}} 访问）已更改。
+- {{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}
+ - : 有一个新的 {{domxref("RTCDataChannel")}} 在远程对等方打开新数据通道之后可用。此事件的类型是 {{domxref("RTCDataChannelEvent")}}。
+- {{domxref("RTCDataChannel.error_event", "error")}}
+ - : 表示数据通道上发生错误的 {{domxref("RTCErrorEvent")}}。
+- {{domxref("RTCDtlsTransport.error_event", "error")}}
+ - : 表示 {{domxref("RTCDtlsTransport")}} 上发生错误的 {{domxref("RTCErrorEvent")}}。此错误将是 `dtls-failure` 或 `fingerprint-failure`。
+- {{domxref("RTCIceTransport.gatheringstatechange_event", "gatheringstatechange")}}
+ - : {{domxref("RTCIceTransport")}} 的收集状态已更改。
+- {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}
+ - : 每当本地设备识别出一个新的 ICE 候选需要通过调用 {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} 添加到本地对等方时，就会发送的 {{domxref("RTCPeerConnectionIceEvent")}}。
+- {{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}
+ - : 表示在收集 ICE 候选时发生错误的 {{domxref("RTCPeerConnectionIceErrorEvent")}}。
+- {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}
+ - : 在其 ICE 连接的状态（可通过 {{domxref("RTCPeerConnection.iceconnectionstate", "iceconnectionstate")}} 属性访问）更改时，会发送给 {{domxref("RTCPeerConnection")}}。
+- {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}
+ - : 在其 ICE 收集状态（可通过 {{domxref("RTCPeerConnection.icegatheringstate", "icegatheringstate")}} 属性访问）更改时，会发送给 {{domxref("RTCPeerConnection")}}。
+- {{domxref("RTCDataChannel.message_event", "message")}}
+ - : 在数据通道上收到消息。该事件的类型为 {{domxref("MessageEvent")}}。
+- {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}
+ - : 通知 `RTCPeerConnection` 需要通过调用 {{domxref("RTCPeerConnection.createOffer", "createOffer()")}}，然后是 {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} 来执行会话协商。
+- {{domxref("RTCDataChannel.open_event", "open")}}
+ - : `RTCDataChannel` 的底层数据传输已成功打开或重新打开。
+- {{domxref("RTCIceTransport.selectedcandidatepairchange_event", "selectedcandidatepairchange")}}
+ - : `RTCIceTransport` 上的当前选择的 ICE 候选对已更改时触发的事件。
+- {{domxref("RTCPeerConnection.track_event", "track")}}
+ - : 当成功协商了媒体流的流式传输后，将向 {{domxref("RTCPeerConnection")}} 添加新轨道时，会发送类型为 {{domxref("RTCTrackevent")}} 的 `track` 事件。
+- {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}
+ - : 在其 {{domxref("RTCPeerConnection.signalingstate", "signalingstate")}} 更改时，会发送到对等连接。这是由于调用 {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} 或 {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}} 引起的。
+- {{domxref("RTCDtlsTransport.statechange_event", "statechange")}}
+ - : `RTCDtlsTransport` 的状态已更改。
+- {{domxref("RTCIceTransport.statechange_event", "statechange")}}
+ - : `RTCIceTransport` 的状态已更改。
+- {{domxref("RTCSctpTransport.statechange_event", "statechange")}}
+ - : `RTCSctpTransport` 的状态已更改。
+- {{DOMxRef("DedicatedWorkerGlobalScope.rtctransform_event", "rtctransform")}}
+ - : 编码的视频或音频帧已准备好在 worker 中使用转换流进行处理。
+
+#### 类型
+
+- {{DOMxRef("RTCSctpTransport.state")}}
+ - : 指示 {{DOMxRef("RTCSctpTransport")}} 实例的状态。
+
+### 身份和安全
+
+这些 API 用于管理用户身份和安全性，以便为连接认证用户。
+
+- {{DOMxRef("RTCIdentityProvider")}}
+ - : 使用户代理能够请求生成或验证身份断言。
+- {{DOMxRef("RTCIdentityAssertion")}}
+ - : 表示当前连接的远程对等方的身份。如果尚未设置和验证对等方，则此接口返回 `null`。一旦设置，便无法更改。
+- {{DOMxRef("RTCIdentityProviderRegistrar")}}
+ - : 注册身份提供商（IdP）。
+- {{DOMxRef("RTCCertificate")}}
+ - : 表示 {{DOMxRef("RTCPeerConnection")}} 用于身份验证的证书。
+
+### 电话
+
+#### 接口
+
+- {{DOMxRef("RTCDTMFSender")}}
+ - : 管理 {{DOMxRef("RTCPeerConnection")}} 的双音多频（DTMF）信号的编码和传输。
+- {{DOMxRef("RTCDTMFToneChangeEvent")}}
+ - : 由 {{domxref("RTCDTMFSender.tonechange_event", "tonechange")}} 事件使用，指示 DTMF 音调已开始或结束。此事件不冒泡（除非另有说明），也不可取消（除非另有说明）。
+
+#### 事件
+
+- {{domxref("RTCDTMFSender.tonechange_event", "tonechange")}}
+ - : 连接上已开始播放新的 DTMF 音调，或者 `RTCDTMFSender` 的 {{domxref("RTCDTMFSender.toneBuffer", "toneBuffer")}} 中的最后一个音调已发送，且缓冲区现在为空。事件的类型为 {{domxref("RTCDTMFToneChangeEvent")}}。
+
+### 编码转换
+
+这些接口和事件用于使用在 worker 中运行的转换流处理传入和传出的编码视频和音频帧。
+
+#### 接口
+
+- {{DOMxRef("RTCRtpScriptTransform")}}
+ - : 用于将 worker 中运行的转换流插入 RTC 流水线的接口。
+- {{DOMxRef("RTCRtpScriptTransformer")}}
+ - : `RTCRtpScriptTransform` 的 worker 对应项，传递来自主线程的选项，以及可用于通过 {{DOMxRef("TransformStream")}} 传递编码帧的可读流和可写流。
+- {{DOMxRef("RTCEncodedVideoFrame")}}
+ - : 表示要在 RTC 流水线中进行转换的编码视频帧。
+- {{DOMxRef("RTCEncodedAudioFrame")}}
+ - : 表示要在 RTC 流水线中进行转换的编码音频帧。
+
+#### 属性
+
+- {{DOMxRef("RTCRtpReceiver.transform")}}
+ - : 用于将转换流插入接收器流水线以处理传入的编码视频和音频帧的属性。
+- {{DOMxRef("RTCRtpSender.transform")}}
+ - : 用于将转换流插入发送器流水线以处理传出的编码视频和音频帧的属性。
+
+#### 事件
+
+- {{DOMxRef("DedicatedWorkerGlobalScope.rtctransform_event", "rtctransform")}}
+ - : RTC 转换已准备好在 worker 中运行，或者已准备处理编码视频或音频帧时触发的事件。
## 指南
-- [WebRTC 架构概述](/zh-CN/docs/Web/API/WebRTC_API/Architecture)
- - : 用来创建 WebRTC 连接的 API 底层使用了一系列的网络协议和连接标准。这篇文章涵盖了这些标准。
-- [WebRTC 基础](/zh-CN/docs/Web/API/WebRTC_API/WebRTC_basics)
- - : 这篇文章将带你贯穿一个跨浏览器 RTC 应用的整个创建过程。结束的时候，你将拥有一个可以运行的点对点（peer-to-peer）数据通道（data channel）和媒体通道（media channel）。
-- [WebRTC 协议](/zh-CN/docs/Web/API/WebRTC_API/Protocols)
- - : 这篇文章介绍了一系列的协议，WebRTC API 就是建立于他们之上。
+- [WebRTC 协议简介](/zh-CN/docs/Web/API/WebRTC_API/Protocols)
+ - : 本文介绍了构建 WebRTC API 的底层协议。
- [WebRTC 连接](/zh-CN/docs/Web/API/WebRTC_API/Connectivity)
- - : 这篇文章将向你介绍为创建点对点的连接并且实现数据或/和媒体的传输，各个 WebRTC 相关的协议是如何相互协作的。
-- [WebRTC API 概览](/zh-CN/docs/Web/API/WebRTC_API/Overview)
- - : WebRTC 包含了一些关联的 API 和协议，它们相互协作以支持数据或媒体在两个或多个点之间传输。这篇文章将向你展示这些 API 的简要介绍以及它们的用途。
+ - : 介绍了 WebRTC 连接的工作原理以及如何将各种协议和接口结合起来以构建功能强大的通信应用程序的指南。
- [WebRTC 会话的生命周期](/zh-CN/docs/Web/API/WebRTC_API/Session_lifetime)
- - : WebRTC 让你可以在基于浏览器应用中实现任意点对点（peer-to-peer）的数据、音频、视频 或它们的任意组合的通信。在这篇文章中我们一起来看一下 WebRTC 的生命周期。从建立连接开始，一直到不再需要的时候将它关闭掉。
+ - : WebRTC 允许你在浏览器应用程序中构建任意数据、音频或视频（或其中的任意组合）的点对点通信。在本文中，我们将从建立连接一直到关闭连接（不再需要时）的整个 WebRTC 会话生命周期进行探讨。
+- [建立连接：完美协商模式](/zh-CN/docs/Web/API/WebRTC_API/Perfect_negotiation)
+ - : **完美协商**是一种建议你的信令流程遵循的设计模式，它在协商过程中提供了透明性，同时允许双方都是提供方或应答方，而无需进行大量的编码来区分两者。
+- [信令和双向视频通话](/zh-CN/docs/Web/API/WebRTC_API/Signaling_and_video_calling)
+ - : 它将一个之前的示例创建的、基于 WebSocket 的聊天系统转换为教程和示例，并添加了参与者之间进行视频通话的支持。聊天服务器的 WebSocket 连接用于 WebRTC 信令。
+- [WebRTC 使用的编解码器](/zh-CN/docs/Web/Media/Formats/WebRTC_codecs)
+ - : 介绍了 WebRTC 需要浏览器支持的编解码器以及各种流行浏览器支持的可选编解码器。本文还包括了一个帮助你选择最适合你需求的编解码器的指南。
+- [使用 WebRTC 数据通道](/zh-CN/docs/Web/API/WebRTC_API/Using_data_channels)
+ - : 本指南介绍了如何使用对等连接和相关的 {{DOMxRef("RTCDataChannel")}} 在两个对等方之间交换任意数据。
+- [在 WebRTC 中使用 DTMF](/zh-CN/docs/Web/API/WebRTC_API/Using_DTMF)
+ - : WebRTC 与连接到老式电话系统的网关进行交互的支持，包括使用 {{DOMxRef("RTCDTMFSender")}} 接口发送 DTMF 音调。本指南展示了如何做到这一点。
+- [使用 WebRTC 编码转换](/zh-CN/docs/Web/API/WebRTC_API/Using_Encoded_Transforms)
+ - : 本指南展示了一个 Web 应用程序如何使用在 worker 中运行的 {{DOMxRef("TransformStream")}} 来修改传入和传出的 WebRTC 编码视频和音频帧。
## 教程
-- [使用 WebRTC 拍摄静止的照片](/zh-CN/docs/Web/API/WebRTC_API/Taking_still_photos)
- - : 这篇文章介绍了如何在 WebRTC 的支持下可以访问到电脑或者手机的摄像头并且使用它来拍摄照片。
-- [一个简易 RTCDataChannel 的例子](/zh-CN/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)
- - : {{domxref("RTCDataChannel")}} 接口是一个特性，使用它你可以在两个点之间发送和接收任意数据。它的 API 和[WebSocket API](/zh-CN/docs/Web/API/WebSocket_API)非常相似，所以同样的代码对他们来说都可以使用。
-
-## 资源
-
-### 协议
-
-#### WebRTC-proper protocols
-
-- [Application Layer Protocol Negotiation for Web Real-Time Communications](http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/)
-- [WebRTC Audio Codec and Processing Requirements](http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/)
-- [RTCWeb Data Channels](http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/)
-- [RTCWeb Data Channel Protocol](http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/)
-- [Web Real-Time Communication (WebRTC): Media Transport and Use of RTP](http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/)
-- [WebRTC Security Architecture](http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/)
-- [Transports for RTCWEB](http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/)
-
-#### 相关的支持协议
-
-- [Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol](https://tools.ietf.org/html/rfc5245)
-- [Session Traversal Utilities for NAT (STUN)](https://tools.ietf.org/html/rfc5389)
-- [URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol](https://tools.ietf.org/html/rfc7064)
-- [Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers](https://tools.ietf.org/html/rfc7065)
-- [An Offer/Answer Model with Session Description Protocol (SDP)](https://tools.ietf.org/html/rfc3264)
-- [Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization](https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/)
+- [使用 WebRTC adapter.js 改善兼容性](#互操作性)
+ - : WebRTC 组织[在 GitHub 上提供了 WebRTC 适配器](https://github.com/webrtc/adapter/)来解决不同浏览器的 WebRTC 实现的兼容性问题。适配器是一个 JavaScript 垫片，使你的代码只需按照规范编写，便可以在所有支持 WebRTC 的浏览器中“正常工作”。
+- [RTCDataChannel 简单示例](/zh-CN/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)
+ - : {{DOMxRef("RTCDataChannel")}} 接口是一个允许你在两个对等方之间打开一个通道（通过该通道你可以发送和接收任意数据）的特性。API 故意设计成与 [WebSocket API](/zh-CN/docs/Web/API/WebSockets_API) 类似，以便可以使用相同的编程模型。
+- [使用 Peer.js 构建联网电话](/zh-CN/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs)
+ - : 本教程将逐步指导你如何使用 Peer.js 构建电话。
## 规范
{{Specifications}}
-除了这些定义 WebRTC 需要的 API 的标准之外，还有其他的一些协议，在[资源](#Protocols)中列了出来。
-
-## 相关链接
-
-- [Firefox multistream and renegotiation for Jitsi Videobridge](https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/)
-- [Peering Through the WebRTC Fog with SocketPeer](https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/)
-- [Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics](https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/)
+### WebRTC 相关协议
+
+- [Web 实时通信的应用层协议协商](https://datatracker.ietf.org/doc/rfc8833/)
+- [WebRTC 音频编解码器和处理要求](https://datatracker.ietf.org/doc/rfc7874/)
+- [RTCWeb 数据通道](https://datatracker.ietf.org/doc/rfc8831/)
+- [RTCWeb 数据通道协议](https://datatracker.ietf.org/doc/rfc8832/)
+- [Web 实时通信（WebRTC）：媒体传输和 RTP 的使用](https://datatracker.ietf.org/doc/rfc8834/)
+- [WebRTC 安全架构](https://datatracker.ietf.org/doc/rfc8827/)
+- [RTCWEB 的传输](https://datatracker.ietf.org/doc/rfc8835/)
+
+### 相关支持协议
+
+- [交互式连接建立（ICE）：用于网络地址转换器（NAT）穿越的协议](https://datatracker.ietf.org/doc/html/rfc5245)
+- [NAT 会话穿越应用程序（STUN）](https://datatracker.ietf.org/doc/html/rfc5389)
+- [NAT 会话穿越应用程序（STUN）的 URI 方案协议](https://datatracker.ietf.org/doc/html/rfc7064)
+- [绕过 NAT 的中继穿越（TURN）的统一资源标识符](https://datatracker.ietf.org/doc/html/rfc7065)
+- [具有会话描述协议（SDP）的提供/应答模型](https://datatracker.ietf.org/doc/html/rfc3264)
+- [NAT 会话穿越应用程序（STUN）的第三方认证扩展](https://datatracker.ietf.org/doc/rfc7635/)
+
+## 参见
+
+- {{DOMxRef("MediaDevices")}}
+- {{DOMxRef("MediaStreamEvent")}}
+- {{DOMxRef("MediaStreamTrack")}}
+- {{DOMxRef("MessageEvent")}}
+- {{DOMxRef("MediaStream")}}
+- [媒体捕捉与媒体流 API](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API)
+- [Firefox 多流和 Jitsi Videobridge 的重新协商](https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/)
+- [使用 SocketPeer 拨开 WebRTC 迷雾](https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/)
+- [Party Bus 内部：构建具有多个实时视频流和交互式图形的 Web 应用](https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/)
+- [Web 媒体技术](/zh-CN/docs/Web/Media)
diff --git a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md
index fa3271098bc467..1fc6638a0e961a 100644
--- a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md
+++ b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md
@@ -3,6 +3,8 @@ title: WebRTC 介绍
slug: Web/API/WebRTC_API/Session_lifetime
---
+{{DefaultAPISidebar("WebRTC")}}
+
> **备注：** 此页面正在建设中，部分内容会移至其他页面，因为 WebRTC 指导资料已经建成。
>
> WebRTC 允许你将任意数据，音频或视频（或其任何组合）的点对点通信构建到浏览器应用程序中。在本文中，我们将介绍一个 WebRTC 会话的生命周期，从建立连接到不再需要时关闭连接。
diff --git a/files/zh-cn/web/api/webrtc_api/using_dtmf/index.md b/files/zh-cn/web/api/webrtc_api/using_dtmf/index.md
new file mode 100644
index 00000000000000..a7f2917aaed949
--- /dev/null
+++ b/files/zh-cn/web/api/webrtc_api/using_dtmf/index.md
@@ -0,0 +1,406 @@
+---
+title: 在 WebRTC 中使用 DTMF
+slug: Web/API/WebRTC_API/Using_DTMF
+l10n:
+ sourceCommit: f92df19cdf44d4352b89e446dc1b9d1e5addcbe1
+---
+
+{{DefaultAPISidebar("WebRTC")}}
+
+为了更全面地支持音频/视频会议，[WebRTC](/zh-CN/docs/Web/API/WebRTC_API) 支持在 {{domxref("RTCPeerConnection")}} 上向远程对等方发送{{Glossary("DTMF", "双音多频信号")}}（DTMF）。本文简要概述了 WebRTC 上的 DTMF 是如何工作的，然后提供了一个指导开发人员如何通过 `RTCPeerConnection` 发送 DTMF 的指南。DTMF 系统通常被称为“触摸音调”，这是一种旧的商标名称。
+
+WebRTC 不会将 DTMF 代码作为音频数据发送。相反，它们作为 RTP 载荷在带外发送。但是，请注意，尽管可以使用 WebRTC _发送_ DTMF，但目前无法检测或接收*传入*的 DTMF。WebRTC 目前会忽略这些载荷；这是因为 WebRTC 的 DTMF 支持主要是为了与依赖 DTMF 音调执行任务的传统电话服务一起使用，例如：
+
+- 电话会议系统
+- 菜单系统
+- 语音信箱系统
+- 输入信用卡或其他支付信息
+- 密码输入
+
+> **备注：** 虽然 DTMF 不会作为音频发送到远程对等方，但浏览器可能会选择向本地用户播放相应的音调来提升用户体验，因为用户通常习惯于听到电话播放的提示音。
+
+## 在 RTCPeerConnection 上发送 DTMF
+
+可以在一个给定的 {{domxref("RTCPeerConnection")}} 上发送或接收多个媒体轨道。当你希望传输 DTMF 信号时，你首先需要决定要将它们发送到哪个轨道，因为 DTMF 是作为 {{domxref("RTCRtpSender")}}——负责将该轨道的数据传输到其他对等方——上的一系列带外载荷发送的。
+
+一旦选择了轨道，你可以从其 `RTCRtpSender` 获取你将用于发送 DTMF 的 {{domxref("RTCDTMFSender")}} 对象。在那里，你可以调用 {{domxref("RTCDTMFSender.insertDTMF()")}} 将 DTMF 信号排入队列，以便通过轨道将其发送给其他对等方。然后，`RTCRtpSender` 将音调作为数据包与轨道的音频数据一起发送到其他对等方。
+
+每次发送音调时，`RTCPeerConnection` 都会接收到一个带有 {{domxref("RTCDTMFToneChangeEvent.tone", "tone")}} 属性的 [`tonechange`](/zh-CN/docs/Web/API/RTCDTMFSender/tonechange_event) 事件，该属性指定了播放完成的音调，这是完成诸如更新接口元素等任务的机会。当音调缓冲区为空时，表示所有音调都已发送完成，连接对象将接收到一个带有其 `tone` 属性设置为 `""`（空字符串）的 `tonechange` 事件。
+
+如果你想了解更多关于这是如何工作的信息，请阅读 {{RFC(3550, "RTP：实时应用的传输协议")}}和 {{RFC(4733, "用于 DTMF 数字、电话音和电话信号的 RTP 载荷")}}。关于如何在 RTP 上处理 DTMF 载荷的详细信息超出了本文的范围。相反，我们将通过研究一个示例的工作原理来重点关注如何在 {{domxref("RTCPeerConnection")}} 上下文中使用 DTMF。
+
+## 简单示例
+
+这个简单的示例构建了两个 {{domxref("RTCPeerConnection")}}，在它们之间建立了连接，然后等待用户点击“拨号”按钮。当用户点击按钮时，使用 {{domxref("RTCDTMFSender.insertDTMF()")}} 在连接上发送一个 DTMF 字符串。一旦音调传输完成，连接就会关闭。
+
+> **备注：** 这个示例显然有些牵强，因为通常两个 `RTCPeerConnection` 对象会存在于不同的设备上，并且信令传输通常是通过网络进行的，而不是像这里一样全部都在内部连接。
+
+### HTML
+
+这个示例的 HTML 非常基础，只有三个重要的元素：
+
+- {{HTMLElement("audio")}} 元素：用于播放由被“呼叫”的 `RTCPeerConnection` 接收到的音频。
+- {{HTMLElement("button")}} 元素：用于触发创建和连接两个 `RTCPeerConnection` 对象，然后发送 DTMF 音调。
+- {{HTMLElement("div")}}：用于接收和显示日志文本，以显示状态信息。
+
+```html
+<p>
+ 这个示例演示了在 WebRTC 中使用
+ DTMF。请注意，这个示例是“作弊”的，它在一个代码流中生成两个对等端，而不是让每个对等端都是一个真正独立的实体。
+</p>
+
+<audio id="audio" autoplay controls></audio><br />
+<button name="dial" id="dial">拨号</button>
+
+<div class="log"></div>
+```
+
+### JavaScript
+
+让我们接下来看一下 JavaScript 代码。请注意，这里建立连接的过程有些牵强；通常情况下，你不会在同一个文档中构建连接的两端。
+
+#### 全局变量
+
+首先，我们创建全局变量。
+
+```js
+let dialString = "12024561111";
+
+let callerPC = null;
+let receiverPC = null;
+let dtmfSender = null;
+
+let hasAddTrack = false;
+
+let mediaConstraints = {
+ audio: true,
+ video: false,
+};
+
+let offerOptions = {
+ offerToReceiveAudio: 1,
+ offerToReceiveVideo: 0,
+};
+
+let dialButton = null;
+let logElement = null;
+```
+
+它们依次是：
+
+- `dialString`
+ - : 当用户点击“拨号”按钮时，呼叫方将发送的 DTMF 字符串。
+- `callerPC` 和 `receiverPC`
+ - : 分别表示呼叫方和接收方的 {{domxref("RTCPeerConnection")}} 对象。这些对象将在呼叫启动时在我们的 `connectAndDial()` 函数中初始化，如下面的[启动连接过程](#启动连接过程)所示。
+- `dtmfSender`
+ - : 连接的 {{domxref("RTCDTMFSender")}} 对象。这将在设置连接时在 `gotStream()` 函数中获取，如[将音频添加到连接](#将音频添加到连接)部分所示。
+- `hasAddTrack`
+ - : 由于一些浏览器尚未实现 {{domxref("RTCPeerConnection.addTrack()")}}，因此需要使用已过时的 {{domxref("RTCPeerConnection.addStream", "addStream()")}} 方法，我们使用此布尔值来确定用户代理是否支持 `addTrack()`；如果不支持，我们将退回到 `addStream()`。这将在 `connectAndDial()` 中确定，如下面的[启动连接过程](#启动连接过程)所示。
+- `mediaConstraints`
+ - : 指定启动连接时要使用的约束的对象。我们只想要音频连接，所以 `video` 是 `false`，而 `audio` 是 `true`。
+- `offerOptions`
+ - : 用于在调用 {{domxref("RTCPeerConnection.createOffer()")}} 时指定选项的对象。在本例中，我们声明我们想要接收音频但不要视频。
+- `dialButton` 和 `logElement`
+ - : 这些变量将用于存储对拨号按钮和将写入日志信息的 {{HTMLElement("div")}} 的引用。它们将在页面首次加载时设置。参见下面的[初始化](#初始化)。
+
+#### 初始化
+
+页面加载时，我们进行一些基本设置：我们获取对拨号按钮和日志输出框元素的引用，并使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 为拨号按钮添加事件监听器，以便点击它会调用开始连接过程的 `connectAndDial()` 函数。
+
+```js
+window.addEventListener("load", () => {
+ logElement = document.querySelector(".log");
+ dialButton = document.querySelector("#dial");
+
+ dialButton.addEventListener("click", connectAndDial, false);
+});
+```
+
+#### 启动连接过程
+
+当点击拨号按钮时，将调用 `connectAndDial()`。这将开始构建 WebRTC 连接，为发送 DTMF 代码做准备。
+
+```js
+function connectAndDial() {
+ callerPC = new RTCPeerConnection();
+
+ hasAddTrack = callerPC.addTrack !== undefined;
+
+ callerPC.onicecandidate = handleCallerIceEvent;
+ callerPC.onnegotiationneeded = handleCallerNegotiationNeeded;
+ callerPC.oniceconnectionstatechange = handleCallerIceConnectionStateChange;
+ callerPC.onsignalingstatechange = handleCallerSignalingStateChangeEvent;
+ callerPC.onicegatheringstatechange = handleCallerGatheringStateChangeEvent;
+
+ receiverPC = new RTCPeerConnection();
+ receiverPC.onicecandidate = handleReceiverIceEvent;
+
+ if (hasAddTrack) {
+ receiverPC.ontrack = handleReceiverTrackEvent;
+ } else {
+ receiverPC.onaddstream = handleReceiverAddStreamEvent;
+ }
+
+ navigator.mediaDevices
+ .getUserMedia(mediaConstraints)
+ .then(gotStream)
+ .catch((err) => log(err.message));
+}
+```
+
+在为呼叫方（`callerPC`）创建 `RTCPeerConnection` 后，我们查看它是否具有 {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} 方法。如果有，我们将 `hasAddTrack` 设置为 `true`；否则，我们将其设置为 `false`。这个变量将让示例即使在尚未实现较新的 `addTrack()` 方法的浏览器上也能运行；我们将通过退回到较旧的 {{domxref("RTCPeerConnection.addStream", "addStream()")}} 方法来实现。
+
+接下来，为呼叫方建立了事件处理器。我们稍后将详细介绍这些。
+
+然后创建第二个用于代表呼叫的接收端的 `RTCPeerConnection`，并将它存储在 `receiverPC` 中；同时设置它的 `onicecandidate` 事件处理器。
+
+如果支持 `addTrack()`，我们设置接收方的 `ontrack` 事件处理器；否则，我们设置 `onaddstream`。当媒体被添加到连接时，会发送 {{domxref("RTCPeerConnection.track_event", "track")}} 和 {{domxref("RTCPeerConnection/addstream_event", "addstream")}} 事件。
+
+最后，我们调用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来获取对呼叫方麦克风的访问权限。如果成功，将调用函数 `gotStream()`，否则我们记录调用失败的错误。
+
+#### 将音频添加到连接
+
+如上所述，当从麦克风获取到音频输入时，将调用 `gotStream()`。它的工作是构建发送到接收方的流，从而可以开始实际的传输过程。它还会获取我们将在连接上使用的 `RTCDTMFSender`。
+
+```js
+function gotStream(stream) {
+ log("已获取麦克风的访问权限。");
+
+ let audioTracks = stream.getAudioTracks();
+
+ if (hasAddTrack) {
+ if (audioTracks.length > 0) {
+ audioTracks.forEach((track) => callerPC.addTrack(track, stream));
+ }
+ } else {
+ log(
+ "你的浏览器不支持 RTCPeerConnection.addTrack()。正在退回到<strong>已弃用</strong>的 addStream() 方法…",
+ );
+ callerPC.addStream(stream);
+ }
+
+ if (callerPC.getSenders) {
+ dtmfSender = callerPC.getSenders()[0].dtmf;
+ } else {
+ log(
+ "你的浏览器不支持 RTCPeerConnection.getSenders()，因此正在退回到使用<strong>已弃用</strong>的 createDTMFSender()。",
+ );
+ dtmfSender = callerPC.createDTMFSender(audioTracks[0]);
+ }
+
+ dtmfSender.ontonechange = handleToneChangeEvent;
+}
+```
+
+在将 `audioTracks` 设置为用户麦克风流上的音频轨道列表后，是时候将媒体添加到呼叫方的 `RTCPeerConnection` 中了。如果 `RTCPeerConnection` 上有 `addTrack()` 可用，我们将使用 {{domxref("RTCPeerConnection.addTrack()")}} 逐个将流的每个音频轨道添加到连接中。否则，我们调用 {{domxref("RTCPeerConnection.addStream()")}} 将流作为单个单元添加到呼叫中。
+
+接下来，我们查看是否实现了 {{domxref("RTCPeerConnection.getSenders()")}} 方法。如果实现了，我们在 `callerPC` 上调用它，并获取返回的发送器列表中的第一个条目；这是负责传输呼叫的第一个音频轨道数据的 {{domxref("RTCRtpSender")}}（这是我们将发送 DTMF 的轨道）。然后，我们获取 `RTCRtpSender` 的 {{domxref("RTCRtpSender.dtmf", "dtmf")}} 属性，它是一个 {{domxref("RTCDTMFSender")}} 对象，可以在连接中从呼叫方发送到接收方发送 DTMF。
+
+如果 `getSenders()` 不可用，我们将调用 {{domxref("RTCPeerConnection.createDTMFSender()")}} 来获取 `RTCDTMFSender` 对象。尽管这个方法已经过时，但这个示例支持它作为一个备用方法，让旧的浏览器（和尚未更新以支持当前 WebRTC DTMF API 的浏览器）可以运行这个示例。
+
+最后，我们设置 DTMF 发送器的 {{domxref("RTCDTMFSender.tonechange_event", "ontonechange")}} 事件处理器，以便每当一个 DTMF 音调完成播放时都会收到通知。
+
+你可以在当前文档的底部找到日志函数。
+
+#### 当音调播放完成
+
+每当一个 DTMF 音调播放完成时，[`tonechange`](/zh-CN/docs/Web/API/RTCDTMFSender/tonechange_event) 事件就会被传递给 `callerPC`。这些事件的事件监听器被实现为 `handleToneChangeEvent()` 函数。
+
+```js
+function handleToneChangeEvent(event) {
+ if (event.tone !== "") {
+ log(`播放音调：${event.tone}`);
+ } else {
+ log("All tones have played. Disconnecting.");
+ callerPC.getLocalStreams().forEach((stream) => {
+ stream.getTracks().forEach((track) => {
+ track.stop();
+ });
+ });
+ receiverPC.getLocalStreams().forEach((stream) => {
+ stream.getTracks().forEach((track) => {
+ track.stop();
+ });
+ });
+
+ audio.pause();
+ audio.srcObject = null;
+ receiverPC.close();
+ callerPC.close();
+ }
+}
+```
+
+[`tonechange`](/zh-CN/docs/Web/API/RTCDTMFSender/tonechange_event) 事件既用于指示单个音调已播放，也用于指示所有音调已完成播放。事件的 {{domxref("RTCDTMFToneChangeEvent.tone", "tone")}} 属性是一个指示刚刚完成播放的音调的字符串。如果所有音调都已完成播放，`tone` 将是一个空字符串；在这种情况下，{{domxref("RTCDTMFSender.toneBuffer")}} 为空。
+
+在这个示例中，我们将刚刚完成播放的音调记录到屏幕上。在更高级的应用程序中，你可能会更新用户界面，例如，指示当前正在播放的音符。
+
+另一方面，如果音调缓冲区为空，我们的示例被设计为断开通话。这是通过迭代每个 `RTCPeerConnection` 的轨道列表（由其 {{domxref("MediaStream.getTracks", "getTracks()")}} 方法返回）并调用每个轨道的 {{domxref("MediaStreamTrack.stop", "stop()")}} 方法来完成的。
+
+一旦呼叫方和接收方的所有媒体轨道都停止了，我们暂停 {{HTMLElement("audio")}} 元素，并将其 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 设置为 `null`。这会将音频流从 {{HTMLElement("audio")}} 元素中分离出来。
+
+最后，通过调用每个 `RTCPeerConnection` 的 {{domxref("RTCPeerConnection.close", "close()")}} 方法来关闭它。
+
+#### 将候选者添加到呼叫方
+
+当呼叫方的 `RTCPeerConnection` ICE 层提出一个新的候选者时，它会向 `callerPC` 发出一个 {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} 事件。`icecandidate` 事件处理器的工作是将候选者传输给接收方。在我们的示例中，我们直接控制呼叫方和接收方，所以我们可以直接通过调用其 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 方法将候选者添加到接收方。这由 `handleCallerIceEvent()` 处理：
+
+```js
+function handleCallerIceEvent(event) {
+ if (event.candidate) {
+ log(`正在向接收方添加候选者：${event.candidate.candidate}`);
+
+ receiverPC
+ .addIceCandidate(new RTCIceCandidate(event.candidate))
+ .catch((err) => log(`向接收方添加候选者时出错：${err}`));
+ } else {
+ log("呼叫方没有更多的候选者。");
+ }
+}
+```
+
+如果 {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} 事件具有非 `null` 的 `candidate` 属性，我们将从 `event.candidate` 字符串创建一个新的 {{domxref("RTCIceCandidate")}} 对象，并通过调用 `receiverPC.addIceCandidate()` 将其“传输”到接收方，提供新的 `RTCIceCandidate` 作为其输入。如果 `addIceCandidate()` 失败，`catch()` 子句将错误输出到我们的日志框中。
+
+如果 `event.candidate` 是 `null`，这表示没有更多的候选者可用，我们会记录这一信息。
+
+#### 在连接打开后进行拨号
+
+我们的设计要求在连接建立后立即发送 DTMF 字符串。为了实现这一点，我们会监视呼叫方接收到的 {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}} 事件。当 ICE 连接过程的状态发生变化，包括成功建立连接时，就会发送这个事件。
+
+```js
+function handleCallerIceConnectionStateChange() {
+ log(`呼叫方连接状态已更改为 ${callerPC.iceConnectionState}`);
+ if (callerPC.iceConnectionState === "connected") {
+ log(`发送 DTMF: "${dialString}"`);
+ dtmfSender.insertDTMF(dialString, 400, 50);
+ }
+}
+```
+
+实际上，`iceconnectionstatechange` 事件并没有在其中包含新状态，因此我们从 `callerPC` 的 {{domxref("RTCPeerConnection.iceConnectionState")}} 属性中获取连接过程的当前状态。在记录新状态后，我们查看状态是否为 `"connected"`。如果是，我们记录即将发送 DTMF 的事实，然后调用 {{domxref("RTCDTMFSender.insertDTMF", "dtmf.insertDTMF()")}} 在与我们[之前存储](#将音频添加到连接)在 `dtmfSender` 中的 `RTCDTMFSender` 相同的轨道上发送 DTMF。
+
+我们调用 `insertDTMF()` 不仅指定要发送的 DTMF（`dialString`），还指定了每个音调的长度（400 毫秒）和音调之间的时间间隔（50 毫秒）。
+
+#### 协商连接
+
+当呼叫方 `RTCPeerConnection` 开始接收媒体（在将麦克风的流添加到其中后），会向呼叫方传递一个 {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} 事件，让它知道现在是时候开始与接收方协商连接了。如前所述，我们的示例稍微简化了一些，因为我们控制着呼叫方和接收方，所以 `handleCallerNegotiationNeeded()` 能够快速地为呼叫方和接收方构建连接，如下所示。
+
+```js
+function handleCallerNegotiationNeeded() {
+ log("协商中……");
+ callerPC
+ .createOffer(offerOptions)
+ .then((offer) => {
+ log(`设置呼叫方的本地描述：${offer.sdp}`);
+ return callerPC.setLocalDescription(offer);
+ })
+ .then(() => {
+ log("将接收方的远程描述设置为与呼叫方的本地描述相同");
+ return receiverPC.setRemoteDescription(callerPC.localDescription);
+ })
+ .then(() => {
+ log("创建应答");
+ return receiverPC.createAnswer();
+ })
+ .then((answer) => {
+ log(`将接收方的本地描述设置为 ${answer.sdp}`);
+ return receiverPC.setLocalDescription(answer);
+ })
+ .then(() => {
+ log("设置要匹配的呼叫方的远程描述");
+ return callerPC.setRemoteDescription(receiverPC.localDescription);
+ })
+ .catch((err) => log(`协商过程中出错：${err.message}`));
+}
+```
+
+由于参与协商连接的各种方法返回了 {{jsxref("promise")}}，我们可以像这样将它们链接在一起：
+
+1. 调用 {{domxref("RTCPeerConnection.createOffer", "callerPC.createOffer()")}} 获取一个提议。
+2. 然后采用这个提议，并通过调用 {{domxref("RTCPeerConnection.setLocalDescription", "callerPC.setLocalDescription()")}} 设置呼叫方的本地描述来匹配。
+3. 然后通过调用 {{domxref("RTCPeerConnection.setRemoteDescription", "receiverPC.setRemoteDescription()")}} 将提议“传输”到接收方。这样配置接收方，使其知道呼叫方的配置。
+4. 然后接收方通过调用 {{domxref("RTCPeerConnection.createAnswer", "receiverPC.createAnswer()")}} 创建一个答复。
+5. 然后接收方通过调用 {{domxref("RTCPeerConnection.setLocalDescription", "receiverPC.setLocalDescription()")}} 将其本地描述设置为与新创建的答复匹配。
+6. 然后通过调用 {{domxref("RTCPeerConnection.setRemoteDescription", "callerPC.setRemoteDescription()")}} 将答复“传输”给呼叫方。这样让呼叫方知道接收方的配置。
+7. 如果在任何时候发生错误，`catch()` 子句将输出错误消息到日志中。
+
+#### 跟踪其他状态变化
+
+我们还可以观察信令状态的变化（通过接受 {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}} 事件）和 ICE 收集状态的变化（通过接受 {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} 事件）。我们没有为这些事件做任何操作，所以我们只是将它们记录到日志中。实际上，我们完全可以不设置这些事件监听器。
+
+```js
+function handleCallerSignalingStateChangeEvent() {
+ log(`呼叫方的信令状态已更改为 ${callerPC.signalingState}`);
+}
+
+function handleCallerGatheringStateChangeEvent() {
+ log(`呼叫方的 ICE 收集状态已更改为 ${callerPC.iceGatheringState}`);
+}
+```
+
+#### 向接收方添加候选者
+
+当接收方的 `RTCPeerConnection` ICE 层提出一个新的候选者时，它会向 `receiverPC` 发出一个 {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} 事件。`icecandidate` 事件处理器的工作是将候选者传输给呼叫方。在我们的示例中，我们直接控制呼叫方和接收方，所以我们可以直接通过调用其 {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}} 方法将候选者添加到呼叫方。这由 `handleReceiverIceEvent()` 处理。
+
+这段代码类似于上面[将候选者添加到呼叫方](#将候选者添加到呼叫方)中看到的呼叫方的 `icecandidate` 事件处理器。
+
+```js
+function handleReceiverIceEvent(event) {
+ if (event.candidate) {
+ log(`Adding candidate to caller: ${event.candidate.candidate}`);
+
+ callerPC
+ .addIceCandidate(new RTCIceCandidate(event.candidate))
+ .catch((err) => log(`向呼叫方添加候选时出错：${err}`));
+ } else {
+ log("接收方已经没有更多的候选者。");
+ }
+}
+```
+
+如果 {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} 事件具有非 `null` 的 `candidate` 属性，我们将从 `event.candidate` 字符串创建一个新的 {{domxref("RTCIceCandidate")}} 对象，并将其传递给呼叫方，通过将其传递给 `callerPC.addIceCandidate()`。如果 `addIceCandidate()` 失败，`catch()` 子句将错误输出到我们的日志框中。
+
+如果 `event.candidate` 是 `null`，这表示没有更多的候选者可用，我们会记录这一信息。
+
+#### 向接收方添加媒体
+
+当接收方开始接收媒体时，一个事件会传递到接收方的 {{domxref("RTCPeerConnection")}}，即 `receiverPC`。如[开始连接过程](#开始连接过程)中所解释的，当前的 WebRTC 规范使用 {{domxref("RTCPeerConnection.track_event", "track")}} 事件来处理这个情况。由于一些浏览器尚未更新以支持此功能，我们还需要处理 {{domxref("RTCPeerConnection/addstream_event", "addstream")}} 事件。下面的 `handleReceiverTrackEvent()` 和 `handleReceiverAddStreamEvent()` 方法演示了这一点。
+
+```js
+function handleReceiverTrackEvent(event) {
+ audio.srcObject = event.streams[0];
+}
+
+function handleReceiverAddStreamEvent(event) {
+ audio.srcObject = event.stream;
+}
+```
+
+`track` 事件包含一个 {{domxref("RTCTrackEvent.streams", "streams")}} 属性，其中包含轨道所属的流的数组（一个轨道可以是多个流的一部分）。我们取第一个流并将其附加到 {{HTMLElement("audio")}} 元素上。
+
+`addstream` 事件包含一个指定添加到轨道的单个流的属性 {{domxref("MediaStreamEvent.stream", "stream")}}。我们将其附加到 `<audio>` 元素上。
+
+#### 日志记录
+
+代码中使用了一个简单的 `log()` 函数，用于将 HTML 附加到一个 {{HTMLElement("div")}} 盒子中，以向用户显示状态和错误。
+
+```js
+function log(msg) {
+ logElement.innerHTML += `${msg}<br/>`;
+}
+```
+
+### 结果
+
+你可以在这里尝试此示例。当你点击“拨号”按钮时，你应该会看到一系列的日志消息输出；然后拨号将开始。如果你的浏览器作为其用户体验的一部分以可听的方式播放音调，则在它们被传输时你应该会听到它们。
+
+{{ EmbedLiveSample("简单示例", 600, 500, "", "", "", "microphone") }}
+
+一旦音调传输完成，连接就会关闭。你可以再次点击“拨号”以重新连接并发送音调。
+
+## 参见
+
+- [WebRTC API](/zh-CN/docs/Web/API/WebRTC_API)
+- [WebRTC 会话的生命周期](/zh-CN/docs/Web/API/WebRTC_API/Session_lifetime)
+- [信令与视频通话](/zh-CN/docs/Web/API/WebRTC_API/Signaling_and_video_calling)（一个更详细地解释信令过程的教程和示例）
+- [WebRTC 协议介绍](/zh-CN/docs/Web/API/WebRTC_API/Protocols)
diff --git a/files/zh-cn/web/api/webrtc_api/using_encoded_transforms/index.md b/files/zh-cn/web/api/webrtc_api/using_encoded_transforms/index.md
new file mode 100644
index 00000000000000..d4819586d7c2bb
--- /dev/null
+++ b/files/zh-cn/web/api/webrtc_api/using_encoded_transforms/index.md
@@ -0,0 +1,254 @@
+---
+title: 使用 WebRTC 编码转换
+slug: Web/API/WebRTC_API/Using_Encoded_Transforms
+l10n:
+ sourceCommit: 4799bed9382147f0b0ff642a130a1c12ed59a28e
+---
+
+{{DefaultAPISidebar("WebRTC")}}
+
+WebRTC 编码转换提供了一种机制，可以将高性能的 [Stream API](/zh-CN/docs/Web/API/Streams_API) 注入到传入和传出的 WebRTC 管道中，用于修改编码的视频和音频帧。使得第三方代码能够实现对编码帧的端到端加密等用例。
+
+该 API 定义了主线程和 Worker 的对象。主线程接口是一个 {{domxref("RTCRtpScriptTransform")}} 实例，其在构造时指定了要实现转换器代码的 {{domxref("Worker")}}。在 Worker 中运行的转换器通过分别将 `RTCRtpScriptTransform` 添加到 {{domxref("RTCRtpReceiver.transform")}} 或 {{domxref("RTCRtpSender.transform")}} 中，插入到传入或传出的 WebRTC 管道中。
+
+在 Worker 中创建了一个对应的 {{domxref("RTCRtpScriptTransformer")}} 对象，它具有一个 {{domxref("ReadableStream")}} `readable` 属性，一个 {{domxref("WritableStream")}} `writable` 属性，以及一个从关联的 {{domxref("RTCRtpScriptTransform")}} 构造函数传递的 `options` 对象。来自 WebRTC 管道的编码视频帧（{{domxref("RTCEncodedVideoFrame")}}）或音频帧（{{domxref("RTCEncodedAudioFrame")}}）会被入队到 `readable` 上进行处理。
+
+`RTCRtpScriptTransformer` 作为 {{domxref("DedicatedWorkerGlobalScope/rtctransform_event", "rtctransform")}} 事件的 `transformer` 属性向代码提供，该事件在每次编码帧被入队进行处理时（以及在相应的 {{domxref("RTCRtpScriptTransform")}} 构造函数的初始时）在 Worker 全局作用域内触发。Worker 代码必须实现一个事件处理程序，从 `transformer.readable` 中读取编码帧，根据需要对其进行修改，并按照相同的顺序且不重复地将它们写入 `transformer.writable`。
+
+虽然接口对实现没有其他限制，但一种自然的转换帧的方式是创建一个[链式管道](/zh-CN/docs/Web/API/Streams_API/Concepts#链式管道传输)，将在 `event.transformer.readable` 流上入队的帧通过 {{DOMxRef("TransformStream")}} 发送到 `event.transformer.writable` 流。我们可以使用 `event.transformer.options` 属性来配置任何取决于转换是从封包器入队传入帧，还是从编解码器出队传出帧的转换代码。
+
+{{domxref("RTCRtpScriptTransformer")}} 接口还提供了一些方法，可在发送编码视频时使用，以便让编解码器生成一个“关键”帧，在接收视频时请求发送一个新的关键帧。如果（例如）在发送增量帧时加入会议呼叫，则这些方法可能很有用，允许接收者更快地开始查看视频。
+
+以下示例提供了如何使用基于 {{DOMxRef("TransformStream")}} 的实现框架的更具体示例。
+
+## 测试是否支持编码转换
+
+通过检查 {{domxref("RTCRtpSender.transform")}}（或 {{domxref("RTCRtpReceiver.transform")}}）的存在来测试是否支持[编码转换](#浏览器兼容性)。
+
+```js
+const supportsEncodedTransforms =
+ window.RTCRtpSender && "transform" in RTCRtpSender.prototype;
+```
+
+## 添加用于传出帧的转换
+
+通过将相应的 `RTCRtpScriptTransform` 分配给传出轨道的 {{domxref("RTCRtpSender.transform")}}，将运行在 Worker 中的转换插入到传出的 WebRTC 管道中。
+
+以下示例展示了如何从用户的网络摄像头通过 WebRTC 传输视频，并添加一个 WebRTC 编码转换以修改传出流。代码假设已经有一个名为 `peerConnection` 的 {{domxref("RTCPeerConnection")}}，并且已经连接到远程对等端。
+
+首先，我们使用 {{domxref("MediaDevices/getUserMedia", "getUserMedia()")}} 从媒体设备获取视频 {{domxref("MediaStream")}}，然后使用 {{domxref("MediaStream.getTracks()")}} 方法获取流中的第一个 {{domxref("MediaStreamTrack")}}。
+
+使用 {{domxref("RTCPeerConnection/addTrack()", "addTrack()")}} 将轨道添加到对等连接，从而开始将其流式传输到远程对等端。`addTrack()` 方法返回用于发送轨道的 {{domxref("RTCRtpSender")}}。
+
+```js
+// 获取视频流和媒体轨道
+const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+const [track] = stream.getTracks();
+const videoSender = peerConnection.addTrack(track, stream);
+```
+
+接下来构造一个 `RTCRtpScriptTransform`，需要一个 Worker 脚本来定义转换，并且还可以使用一个可选对象来向 Worker 传递任意消息（在本例中，我们使用了一个值为 "senderTransform" 的 `name` 属性来告诉 Worker，此转换将被添加到传出流中）。
+通过将其分配给 {{domxref("RTCRtpSender.transform")}} 属性，我们将转换添加到传出管道中。
+
+```js
+// 创建一个包含 TransformStream 的 Worker
+const worker = new Worker("worker.js");
+videoSender.transform = new RTCRtpScriptTransform(worker, {
+ name: "senderTransform",
+});
+```
+
+下面的使用[单独的发送器和接收器转换](#单独的发送器和接收器转换)部分显示了在 Worker 中可能如何使用 `name`。
+
+请注意，你可以在任何时候添加转换，但是通过在调用 `addTrack()` 后立即添加转换，转换将获得发送的第一帧编码帧。
+
+## 添加用于传入帧的转换
+
+运行在 Worker 中的转换通过将相应的 `RTCRtpScriptTransform` 分配给传入轨道的 {{domxref("RTCRtpReceiver.transform")}} 来插入到传入的 WebRTC 管道中。
+
+这个例子展示了如何添加一个转换来修改传入流。该代码假定已经连接到远程对等端的名为 `peerConnection` 的 {{domxref("RTCPeerConnection")}}。
+
+首先，我们添加了一个 `RTCPeerConnection` 的 [`track` 事件](/zh-CN/docs/Web/API/RTCPeerConnection/track_event)处理程序，以捕获当对等端开始接收新轨道时的事件。在处理程序内部，我们构造了一个 `RTCRtpScriptTransform` 并将其添加到 `event.receiver.transform`（`event.receiver` 是一个 {{domxref("RTCRtpReceiver")}}）。与前一节相同，构造函数采用一个具有 `name` 属性的对象，但是在这里我们使用 `receiverTransform` 作为值，告诉 Worker 正在传入帧。
+
+```js
+peerConnection.ontrack = (event) => {
+ const worker = new Worker("worker.js");
+ event.receiver.transform = new RTCRtpScriptTransform(worker, {
+ name: "receiverTransform",
+ });
+ received_video.srcObject = event.streams[0];
+};
+```
+
+再次注意，你可以在任何时候添加转换流。但是通过在 `track` 事件处理器中添加它，可以确保转换流将获得轨道的第一帧编码帧。
+
+## Worker 实现
+
+Worker 脚本必须实现一个处理 {{domxref("DedicatedWorkerGlobalScope/rtctransform_event", "rtctransform")}} 事件的处理程序，创建一个[链式管道](/zh-CN/docs/Web/API/Streams_API/Concepts#链式管道传输)，将 `event.transformer.readable`（{{DOMxRef("ReadableStream")}}）流通过 {{DOMxRef("TransformStream")}} 传输到 `event.transformer.writable`（{{DOMxRef("WritableStream")}}）流中。
+
+Worker 可能支持转换传入或传出的编码帧，也可能同时支持两者，并且转换可能是硬编码的，也可能是在运行时使用从 Web 应用传递的信息配置的。
+
+### 基本的 WebRTC 编码转换
+
+下面的示例展示了一个基本的 WebRTC 编码转换，它对队列中的所有帧进行位求反操作。它不使用或需要从主线程传递的选项，因为相同的算法可以用于发送管道来对位进行求反，并且在接收管道中进行还原。
+
+该代码实现了一个 `rtctransform` 事件的事件处理器。这个处理程序构建了一个 {{DOMxRef("TransformStream")}}，然后使用 {{domxref("ReadableStream.pipeThrough()")}} 进行管道传输，最后使用 {{domxref("ReadableStream.pipeTo()")}} 传输到 `event.transformer.writable`。
+
+```js
+addEventListener("rtctransform", (event) => {
+ const transform = new TransformStream({
+ start() {}, // 在启动时调用
+ flush() {}, // 在流即将关闭时调用
+ async transform(encodedFrame, controller) {
+ // 重建原始帧
+ const view = new DataView(encodedFrame.data);
+
+ // 构建一个新的缓冲区
+ const newData = new ArrayBuffer(encodedFrame.data.byteLength);
+ const newView = new DataView(newData);
+
+ // 将传入帧中的所有位取反
+ for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
+ newView.setInt8(i, ~view.getInt8(i));
+ }
+
+ encodedFrame.data = newData;
+ controller.enqueue(encodedFrame);
+ },
+ });
+ event.transformer.readable
+ .pipeThrough(transform)
+ .pipeTo(event.transformer.writable);
+});
+```
+
+WebRTC 编码转换的实现类似于“通用” `TransformStream`，但存在一些重要的区别。像通用流一样，它的[构造函数](/zh-CN/docs/Web/API/TransformStream/TransformStream#参数)接受一个对象，其定义了在构造时调用的*可选* [`start()`](/zh-CN/docs/Web/API/TransformStream/TransformStream#startcontroller) 方法，在流即将关闭时调用的 [`flush()`](/zh-CN/docs/Web/API/TransformStream/TransformStream#flushcontroller) 方法，以及 [`transform()`](/zh-CN/docs/Web/API/TransformStream/TransformStream#transformchunk_controller) 方法，每当有一个块需要处理时都会调用。与通用构造函数不同，任何在构造函数对象中传递的 `writableStrategy` 或 `readableStrategy` 属性都会被忽略，队列策略完全由用户代理管理。
+
+`transform()` 方法也不同，它接收的是 {{DOMxRef("RTCEncodedVideoFrame")}} 或 {{DOMxRef("RTCEncodedAudioFrame")}}，而不是通用的“块”。除了它展示了如何将帧转换为可以修改并在之后排队到流上的形式之外，此处显示的方法没有什么特别之处。
+
+### 使用单独的发送器和接收器转换
+
+之前的例子在发送和接收时使用相同的转换函数时可以工作，但在许多情况下，算法会有所不同。你可以为发送器和接收器使用单独的 Worker 脚本，或者在一个 Worker 中处理这两种情况，如下所示。
+
+如果 Worker 用于发送器和接收器，它需要知道当前的编码帧是来自编解码器的传出帧，还是来自封包器的传入帧。可以使用 [`RTCRtpScriptTransform` 构造函数](/zh-CN/docs/Web/API/RTCRtpScriptTransform/RTCRtpScriptTransform)的第二个选项来指定此信息。例如，我们可以为发送器和接收器定义一个单独的 `RTCRtpScriptTransform`，传递相同的 Worker 和一个 options 对象，其中的 `name` 属性指示转换是用于发送还是接收（如上面的前几节所示）。然后在 Worker 中，可以通过 `event.transformer.options` 获取到此信息。
+
+在这个例子中，我们在全局专用 Worker 的作用域对象上实现了 `onrtctransform` 事件处理器。`name` 属性的值用于确定构造哪个 `TransformStream`（实际的构造方法没有显示）。
+
+```js
+// 实例化变换并将它们附加到发送器/接收器管道的代码
+onrtctransform = (event) => {
+ let transform;
+ if (event.transformer.options.name == "senderTransform")
+ transform = createSenderTransform(); // 返回一个 TransformStream
+ else if (event.transformer.options.name == "receiverTransform")
+ transform = createReceiverTransform(); // 返回一个 TransformStream
+ else return;
+ event.transformer.readable
+ .pipeThrough(transform)
+ .pipeTo(event.transformer.writable);
+};
+```
+
+请注意，创建管道链的代码与上一个示例中的代码相同。
+
+### 运行时与变换进行通信
+
+[`RTCRtpScriptTransform` 构造函数](/zh-CN/docs/Web/API/RTCRtpScriptTransform/RTCRtpScriptTransform)允许你传递选项和对象到 Worker。在前面的示例中，我们传递了静态信息，但有时你可能希望在运行时修改 Worker 中的变换算法，或者从 Worker 中获取信息。例如，支持加密的 WebRTC 会议可能需要向变换使用的算法添加一个新的密钥。
+
+虽然可以使用 {{domxref("Worker.postMessage()")}} 在运行变换代码的 Worker 和主线程之间共享信息，但通常将 {{domxref("MessageChannel")}} 作为 [`RTCRtpScriptTransform` 构造函数](/zh-CN/docs/Web/API/RTCRtpScriptTransform/RTCRtpScriptTransform)的选项更容易，因为在处理新的编码帧时，通道上下文直接可在 `event.transformer.options` 中使用。
+
+以下代码创建了一个 {{domxref("MessageChannel")}} 并将其第二个端口[传输](/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects)给 Worker。主线程和变换随后可以使用第一个和第二个端口进行通信。
+
+```js
+// 创建一个包含 TransformStream 的 Worker 脚本
+const worker = new Worker("worker.js");
+
+// 创建一个 channel
+// 将 channel.port2 作为构造函数选项传递给 transform，并将其传输到 Worker。
+const channel = new MessageChannel();
+const transform = new RTCRtpScriptTransform(
+ worker,
+ { purpose: "encrypt", port: channel.port2 },
+ [channel.port2],
+);
+
+// 使用 port1 发送一个字符串。（我们可以发送和传输基本类型/对象）
+channel.port1.postMessage("给 Worker 的消息");
+channel.port1.start();
+```
+
+在 Worker 中，端口可作为 `event.transformer.options.port` 使用。下面的代码显示了如何监听端口的 `message` 事件以从主线程获取消息。你还可以使用该端口将消息发送回主线程。
+
+```js
+event.transformer.options.port.onmessage = (event) => {
+ // 消息载荷在“event.data”中
+ console.log(event.data);
+};
+```
+
+### 触发关键帧
+
+原始视频很少被发送或存储，因为用完整图像来表示每一帧会消耗大量的空间和带宽。相反，编解码器定期生成一个包含足够信息构建完整图像的“关键帧”，在关键帧之间发送“增量帧”，它们只包含自上一个增量帧以来的变化。虽然这比发送原始视频要高效得多，但这意味着为了显示与特定增量帧相关联的图像，你需要最后一个关键帧和所有随后的增量帧。
+
+这可能会导致新用户加入 WebRTC 会议应用时出现延迟，因为他们在收到第一个关键帧之前无法显示视频。同样，如果使用编码转换来加密帧，则接收方在收到使用其密钥加密的第一个关键帧之前无法显示视频。
+
+为了确保在需要时尽早发送新的关键帧，`event.transformer` 中的 {{domxref("RTCRtpScriptTransformer")}} 对象有两种方法：{{domxref("RTCRtpScriptTransformer.generateKeyFrame()")}}，它会导致编解码器生成一个关键帧，和 {{domxref("RTCRtpScriptTransformer.sendKeyFrameRequest()")}}，它会导致接收方可以从发送方请求一个关键帧。
+
+下面的示例显示了主线程如何将加密密钥传递给发送方转换，并触发编解码器生成一个关键帧。请注意，主线程无法直接访问 {{domxref("RTCRtpScriptTransformer")}} 对象，因此它需要将密钥和限制标识符（“rid”是流 ID，指示必须生成关键帧的编码器）传递给 Worker。在这里，我们使用了一个 `MessageChannel`，使用了与前一节相同的模式。代码假定已经有一个对等连接，并且 `videoSender` 是一个 {{domxref("RTCRtpSender")}}。
+
+```js
+const worker = new Worker("worker.js");
+const channel = new MessageChannel();
+
+videoSender.transform = new RTCRtpScriptTransform(
+ worker,
+ { name: "senderTransform", port: channel.port2 },
+ [channel.port2],
+);
+
+// 将 rid 和新密钥发送到发送方
+channel.port1.start();
+channel.port1.postMessage({
+ rid: "1",
+ key: "93ae0927a4f8e527f1gce6d10bc6ab6c",
+});
+```
+
+在 Worker 中的 {{domxref("DedicatedWorkerGlobalScope/rtctransform_event", "rtctransform")}} 事件处理器获取端口，并使用它来监听来自主线程的 `message` 事件。如果收到事件，则获取 `rid` 和 `key`，然后调用 `generateKeyFrame()`。
+
+```js
+event.transformer.options.port.onmessage = (event) => {
+ const { rid, key } = event.data;
+ // 密钥由转换器用于加密帧（未显示）
+
+ // 使用 rid 获取编解码器生成新关键帧。这里的 'rcevent' 是 rtctransform 事件。
+ rcevent.transformer.generateKeyFrame(rid);
+};
+```
+
+接收方请求新关键帧的代码几乎相同，只是没有指定“rid”。这里是仅包含端口消息处理程序的代码：
+
+```js
+event.transformer.options.port.onmessage = (event) => {
+ const { key } = event.data;
+ // key 由转换器用于解密帧（未显示）
+
+ // 请求发送器发出一个关键帧
+ transformer.sendKeyFrameRequest();
+};
+```
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("RTCRtpScriptTransform")}}
+- {{domxref("RTCRtpReceiver.transform")}}
+- {{domxref("RTCRtpSender.transform")}}
+- {{domxref("DedicatedWorkerGlobalScope.rtctransform_event")}}
+- {{domxref("RTCTransformEvent")}}
+- {{domxref("RTCRtpScriptTransformer")}}
+- {{domxref("RTCEncodedVideoFrame")}}
+- {{domxref("RTCEncodedAudioFrame")}}
diff --git a/files/zh-cn/web/api/websocket/open_event/index.md b/files/zh-cn/web/api/websocket/open_event/index.md
index a182272f53e42f..ad712744a56fba 100644
--- a/files/zh-cn/web/api/websocket/open_event/index.md
+++ b/files/zh-cn/web/api/websocket/open_event/index.md
@@ -3,6 +3,8 @@ title: WebSocket.onopen
slug: Web/API/WebSocket/open_event
---
+{{APIRef("WebSockets API")}}
+
**`WebSocket.onopen`**属性定义一个事件处理程序，当{{domxref("WebSocket")}} 的连接状态{{domxref("WebSocket.readyState","readyState")}} 变为{{domxref("WebSocket.readyState","1")}}时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 {{domxref("事件")}}（建立连接时）触发。
## 语法
diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md
index 8e229c589df4bd..ec8004e3c2e161 100644
--- a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -3,6 +3,8 @@ title: 编写 WebSocket 客户端应用
slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
---
+{{DefaultAPISidebar("WebSockets API")}}
+
WebSocket 客户端应用程序使用 WebSocket API 通过 WebSocket 协议与 WebSocket 服务器通信。
{{AvailableInWorkers}}
diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.md b/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.md
index ba119b90f57593..45652892778b0a 100644
--- a/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.md
+++ b/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.md
@@ -3,6 +3,8 @@ title: 用 C＃来编写 WebSocket 服务器
slug: Web/API/WebSockets_API/Writing_WebSocket_server
---
+{{DefaultAPISidebar("WebSockets API")}}
+
## 介绍
如果你想学习如何使用 WebSocket API，那么有一台服务器将会是非常有用的。在本文中，我将向你展示如何使用 C#来写后端。你可以使用任何可用于后端开发的语言来做这个事，但是，要为了使例子简明易懂，我选择微软的 C#。
diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md b/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md
index c3281c3802ca3a..7209846dfa8efa 100644
--- a/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md
+++ b/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md
@@ -3,6 +3,8 @@ title: 编写 WebSocket 服务器
slug: Web/API/WebSockets_API/Writing_WebSocket_servers
---
+{{DefaultAPISidebar("WebSockets API")}}
+
**WebSocket 服务器是一个**TCP 应用程序，监听服务器上任何遵循特定协议的端口，就这么简单。创建自定义服务器的任务往往听起来很吓人，然而，在你选择的平台上实现一个简单的 WebSocket 服务器是很容易的。
WebSocket 服务器可以用任何实现了[Berkeley sockets](https://en.wikipedia.org/wiki/Berkeley_sockets)的服务器端编程语言编写，如 C(++) 或 Python 甚至[PHP](/zh-CN/docs/PHP)和[服务器端 JavaScript](/zh-CN/docs/Web/JavaScript/Server-Side_JavaScript)。这不是任何特定语言的教程，而是作为指导，以方便编写自己的服务器。
diff --git a/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md b/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md
index 2d73879b1e70ef..1f390873dbd8a0 100644
--- a/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md
+++ b/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md
@@ -3,6 +3,8 @@ title: Using the WebVR API
slug: Web/API/WebVR_API/Using_the_WebVR_API
---
+{{APIRef("WebVR API")}}
+
The [WebVR API](/zh-CN/docs/Web/API/WebVR_API) is a fantastic addition to the web developer's toolkit, allowing access to virtual reality hardware such as the [Oculus Rift](https://developer.oculus.com/), and converting outputted movement and orientation data into view rendering updates on a web app. But how do you get started in developing VR apps for the Web? This article will guide you through the basics.
[WebVR API](/zh-CN/docs/Web/API/WebVR_API) 对于 web 开发者来说，是一个令人心动的功能包，允许你连接到类似于[Oculus Rift](https://developer.oculus.com/) 这样的虚拟现实硬件，并且能够在你的 web app 中，将从硬件获取到的位置移动数据和姿态角数据，实时更新你的渲染显示输出。具体要如何在 Web 上开始开发你的 VR app 呢？这篇文章将会提供基础的引导信息。
diff --git a/files/zh-cn/web/api/webxr_device_api/index.md b/files/zh-cn/web/api/webxr_device_api/index.md
index 12477fd07bc9c3..d70132dee3c7e8 100644
--- a/files/zh-cn/web/api/webxr_device_api/index.md
+++ b/files/zh-cn/web/api/webxr_device_api/index.md
@@ -3,6 +3,8 @@ title: WebXR 设备 接口参考
slug: Web/API/WebXR_Device_API
---
+{{DefaultAPISidebar("WebXR Device API")}}
+
**WebXR** 是一组支持将渲染 3D 场景用来呈现虚拟世界（虚拟现实，也称作 VR）或将图形图像添加到现实世界（增强现实，也称作 AR）的标准。 **WebXR 设备 API** 实现了 WebXR 功能集的核心，管理输出设备的选择，以适当的帧速率将 3D 场景呈现给所选设备，并管理使用输入控制器创建的运动矢量。
WebXR-兼容性设备包括沉浸式 3D 运动和定位跟踪耳机，通过框架覆盖在真实世界场景之上的眼镜，以及手持移动电话，它们通过用摄像机捕捉世界来增强现实，并通过计算机生成的图像增强场景。
diff --git a/files/zh-cn/web/api/wgsllanguagefeatures/index.md b/files/zh-cn/web/api/wgsllanguagefeatures/index.md
new file mode 100644
index 00000000000000..f75ccda1b62a55
--- /dev/null
+++ b/files/zh-cn/web/api/wgsllanguagefeatures/index.md
@@ -0,0 +1,75 @@
+---
+title: WGSLLanguageFeatures
+slug: Web/API/WGSLLanguageFeatures
+l10n:
+ sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e
+---
+
+{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+{{domxref("WebGPU API", "WebGPU API", "", 1)}} 的 **`WGSLLanguageFeatures`** 接口是[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set)对象，用于报告 WebGPU 实现支持的 [WGSL 语言扩展](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)。
+
+`WGSLLanguageFeatures` 对象可通过 {{domxref("GPU.wgslLanguageFeatures")}} 属性访问。
+
+> **备注：** 并非所有 WGSL 语言扩展在支持 WebGPU API 的所有浏览器中都可用。我们建议你对选择使用的任何扩展程序进行彻底测试。
+
+{{InheritanceDiagram}}
+
+## 可用特性
+
+可用的 WGSL 语言扩展可能因实现和物理设备的不同而不同，也可能随着时间的推移而变化；因此，我们没有在此列出。有关完整列表，请参阅 WGSL 规范中的 [WGSL 语言扩展](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)。
+
+## 实例属性
+
+以下属性适用于所有只读[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set)对象：
+
+- {{jsxref("Set.prototype.size", "size")}} {{Experimental_Inline}}
+ - : 返回集合中的值的数量。
+
+## 实例方法
+
+以下方法适用于所有只读[类集合](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set)对象：
+
+- {{jsxref("Set.prototype.has()", "has()")}} {{Experimental_Inline}}
+ - : 返回用于判断集合中是否存在具有给定值的元素的布尔值。
+- {{jsxref("Set.prototype.values()", "values()")}} {{Experimental_Inline}}
+ - : 返回按插入顺序为集合中的每个元素生成**值**的新的迭代器对象。
+- {{jsxref("Set.prototype.keys()", "keys()")}} {{Experimental_Inline}}
+ - : {{jsxref("Set.prototype.values()", "values()")}} 的别名。
+- {{jsxref("Set.prototype.entries()", "entries()")}} {{Experimental_Inline}}
+ - : 返回该对象按插入顺序包含集合中每个元素的 **`[value, value]` 的数组**的新的迭代器对象。
+- {{jsxref("Set.prototype.forEach()", "forEach()")}} {{Experimental_Inline}}
+ - : 按插入顺序对集合中的每个值调用一次提供的回调函数。
+
+## 示例
+
+```js
+if (!navigator.gpu) {
+ throw Error("不支持 WebGPU。");
+}
+
+const wgslFeatures = navigator.gpu.wgslLanguageFeatures;
+
+// 返回集合的大小
+console.log(wgslFeatures.size);
+
+// 使用 values() 遍历所有集合值
+const valueIterator = wgslFeatures.values();
+for (const value of valueIterator) {
+ console.log(value);
+}
+
+// ...
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [WebGPU API](/zh-CN/docs/Web/API/WebGPU_API)
diff --git a/files/zh-cn/web/api/wheelevent/deltamode/index.md b/files/zh-cn/web/api/wheelevent/deltamode/index.md
index de0100b6930f9e..e5ee5e1d863b17 100644
--- a/files/zh-cn/web/api/wheelevent/deltamode/index.md
+++ b/files/zh-cn/web/api/wheelevent/deltamode/index.md
@@ -1,28 +1,28 @@
---
-title: WheelEvent.deltaMode
+title: WheelEvent：deltaMode 属性
slug: Web/API/WheelEvent/deltaMode
+l10n:
+ sourceCommit: eda49877b9078b24cd18f794470e5e225add9b94
---
{{APIRef("UI Events")}}
-**`WheelEvent.deltaMode`** 只读属性返回一个 `unsigned long` 类型的值，声明 delta 的滚动值的单位。可能的值为：
+**`WheelEvent.deltaMode`** 只读属性返回 `unsigned long`，表示滚动量的 delta 值的单位。允许的值为：
-| Constant | Value | Description |
-| ----------------- | ------ | ------------------------ |
-| `DOM_DELTA_PIXEL` | `0x00` | delta 的值为 像素 级别。 |
-| `DOM_DELTA_LINE` | `0x01` | delta 的值为 行 级别。 |
-| `DOM_DELTA_PAGE` | `0x02` | delta 的值为 页 级别。 |
+| 常量 | 值 | 描述 |
+| ----------------- | ------ | ---------------------- |
+| `DOM_DELTA_PIXEL` | `0x00` | delta 值以像素为单位。 |
+| `DOM_DELTA_LINE` | `0x01` | delta 值以行为单位。 |
+| `DOM_DELTA_PAGE` | `0x02` | delta 值以页为单位。 |
-## 语法
+## 值
-```
-var unit = event.deltaMode;
-```
+`unsigned long`。
-## 例子
+## 示例
```js
-var syntheticEvent = new WheelEvent("syntheticWheel", {
+const syntheticEvent = new WheelEvent("syntheticWheel", {
deltaX: 4,
deltaMode: 0,
});
@@ -40,5 +40,5 @@ console.log(syntheticEvent.deltaMode);
## 参见
-- [`wheel`](/zh-CN/docs/Web/API/Element/wheel_event)
+- {{domxref("Element/wheel_event","wheel")}}
- {{domxref("WheelEvent")}}
diff --git a/files/zh-cn/web/api/wheelevent/deltax/index.md b/files/zh-cn/web/api/wheelevent/deltax/index.md
index 8a4abbc518b3f7..4714b2ff67d97c 100644
--- a/files/zh-cn/web/api/wheelevent/deltax/index.md
+++ b/files/zh-cn/web/api/wheelevent/deltax/index.md
@@ -1,22 +1,22 @@
---
-title: WheelEvent.deltaX
+title: WheelEvent：deltaX 属性
slug: Web/API/WheelEvent/deltaX
+l10n:
+ sourceCommit: eda49877b9078b24cd18f794470e5e225add9b94
---
{{APIRef("UI Events")}}
-**`WheelEvent.deltaX`** 只读属性是一个 `double` 类型值，声明水平滚动量以{{domxref("WheelEvent.deltaMode")}} 为单位。
+**`WheelEvent.deltaX`** 只读属性是一个表示以 {{domxref("WheelEvent.deltaMode")}} 为单位的水平滚动量的 `double` 值。
-## 语法
+## 值
-```plain
-var dX = event.deltaX;
-```
+数字。
-## 例子
+## 示例
```js
-var syntheticEvent = new WheelEvent("syntheticWheel", {
+const syntheticEvent = new WheelEvent("syntheticWheel", {
deltaX: 4,
deltaMode: 0,
});
@@ -34,5 +34,5 @@ console.log(syntheticEvent.deltaX);
## 参见
-- [`wheel`](/zh-CN/docs/Web/API/Element/wheel_event)
+- {{domxref("Element/wheel_event","wheel")}}
- {{domxref("WheelEvent")}}
diff --git a/files/zh-cn/web/api/wheelevent/deltay/index.md b/files/zh-cn/web/api/wheelevent/deltay/index.md
index e3da6f2dea2535..2e8a9e21e1ada6 100644
--- a/files/zh-cn/web/api/wheelevent/deltay/index.md
+++ b/files/zh-cn/web/api/wheelevent/deltay/index.md
@@ -1,22 +1,22 @@
---
-title: WheelEvent.deltaY
+title: WheelEvent：deltaY 属性
slug: Web/API/WheelEvent/deltaY
+l10n:
+ sourceCommit: eda49877b9078b24cd18f794470e5e225add9b94
---
{{APIRef("UI Events")}}
-**`WheelEvent.deltaY`** 只读属性是一个 `double` 类型值，声明垂直滚动量以 [`WheelEvent.deltaMode`](/zh-CN/docs/Web/API/WheelEvent/deltaMode) 为单位。
+**`WheelEvent.deltaY`** 只读属性是一个表示以 {{domxref("WheelEvent.deltaMode")}} 为单位的垂直滚动量的 `double` 值。
-## 语法
+## 值
-```js
-var dY = event.deltaY;
-```
+数字。
-## 例子
+## 示例
```js
-var syntheticEvent = new WheelEvent("syntheticWheel", {
+const syntheticEvent = new WheelEvent("syntheticWheel", {
deltaY: 4,
deltaMode: 0,
});
@@ -34,5 +34,5 @@ console.log(syntheticEvent.deltaY);
## 参见
-- [`wheel`](/zh-CN/docs/Web/API/Element/wheel_event)
+- {{domxref("Element/wheel_event","wheel")}}
- {{domxref("WheelEvent")}}
diff --git a/files/zh-cn/web/api/wheelevent/deltaz/index.md b/files/zh-cn/web/api/wheelevent/deltaz/index.md
index 721b99cc7541c8..a947ccc385ad3d 100644
--- a/files/zh-cn/web/api/wheelevent/deltaz/index.md
+++ b/files/zh-cn/web/api/wheelevent/deltaz/index.md
@@ -1,22 +1,22 @@
---
-title: WheelEvent.deltaZ
+title: WheelEvent：deltaZ 属性
slug: Web/API/WheelEvent/deltaZ
+l10n:
+ sourceCommit: eda49877b9078b24cd18f794470e5e225add9b94
---
{{APIRef("UI Events")}}
-**`WheelEvent.deltaZ`** 只读属性是一个 `double` 类型值，声明 Z 轴滚动量以[`WheelEvent.deltaMode`](/zh-CN/docs/Web/API/WheelEvent/deltaMode) 为单位。
+**`WheelEvent.deltaZ`** 只读属性是一个表示以 {{domxref("WheelEvent.deltaMode")}} 为单位沿 Z 轴的滚动量的 `double` 值。
-## 语法
+## 值
-```plain
-var dZ = event.deltaZ;
-```
+数字。
-## 例子
+## 示例
```js
-var syntheticEvent = new WheelEvent("syntheticWheel", {
+const syntheticEvent = new WheelEvent("syntheticWheel", {
deltaZ: 4,
deltaMode: 0,
});
@@ -34,5 +34,5 @@ console.log(syntheticEvent.deltaZ);
## 参见
-- [`wheel`](/zh-CN/docs/Web/API/Element/wheel_event)
+- {{domxref("Element/wheel_event","wheel")}}
- {{domxref("WheelEvent")}}
diff --git a/files/zh-cn/web/api/atob/index.md b/files/zh-cn/web/api/window/atob/index.md
similarity index 55%
rename from files/zh-cn/web/api/atob/index.md
rename to files/zh-cn/web/api/window/atob/index.md
index b91cc06fa4521c..5cd6aec4f798d9 100644
--- a/files/zh-cn/web/api/atob/index.md
+++ b/files/zh-cn/web/api/window/atob/index.md
@@ -1,13 +1,15 @@
---
-title: atob() 全局函数
-slug: Web/API/atob
+title: Window：atob() 方法
+slug: Web/API/Window/atob
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
---
-{{APIRef("HTML DOM")}}{{AvailableInWorkers}}
+{{APIRef("HTML DOM")}}
-**`atob()`** 函数会对经过 {{glossary("Base64")}} 编码的字符串进行解码。你可以使用 {{domxref("btoa","btoa()")}} 方法来编码可能会在传输过程中出现问题的数据，并且在接收数据之后，使用 `atob()` 方法再将数据解码。例如：你可以编码、传输和解码控制字符，如 {{Glossary("ASCII")}} 值为 0 到 31 的。
+{{domxref("Window")}} 接口的 **`atob()`** 函数会对经过 {{glossary("Base64")}} 编码的字符串进行解码。你可以使用 {{domxref("Window.btoa()")}} 方法来编码可能会在传输过程中出现问题的数据，并且在接收数据之后，使用 `atob()` 方法再将数据解码。例如：你可以编码、传输和解码控制字符，如 {{Glossary("ASCII")}} 值为 0 到 31 的。
-对于任意 Unicode 字符串的使用，请参阅 {{Glossary("Base64")}} 文中的[“Unicode 问题”](/zh-CN/docs/Glossary/Base64#“unicode_问题”)。
+对于任意 Unicode 字符串的使用，请参阅 {{Glossary("Base64")}} 文中的“_Unicode 问题_”。
## 语法
@@ -48,4 +50,5 @@ const decodedData = window.atob(encodedData); // 解码
- [`core-js`](https://github.com/zloirock/core-js) 提供了 [`atob` 的 polyfill](https://github.com/zloirock/core-js#base64-utility-methods)
- [`data` URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
-- {{domxref("btoa","btoa()")}}
+- {{domxref("WorkerGlobalScope.atob()")}}：相同的，但是是在 worker 作用域内的方法。
+- {{domxref("Window.btoa()")}}
diff --git a/files/zh-cn/web/api/window/btoa/index.md b/files/zh-cn/web/api/window/btoa/index.md
new file mode 100644
index 00000000000000..5e34e5b27ced09
--- /dev/null
+++ b/files/zh-cn/web/api/window/btoa/index.md
@@ -0,0 +1,72 @@
+---
+title: Window：btoa() 方法
+slug: Web/API/Window/btoa
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("Window")}} 接口的 **`btoa()`** 方法可以将一个*二进制字符串*（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 {{glossary("Base64")}} 编码的 ASCII 字符串。
+
+你可以使用这个方法来对可能遇到通信问题的数据进行编码，然后使用 {{domxref("Window.atob()")}} 方法来对数据进行解码。例如，你可以对 ASCII 中的控制字符（值为 0 到 31 的字符）进行编码。
+
+## 语法
+
+```js-nolint
+btoa(stringToEncode)
+```
+
+### 参数
+
+- `stringToEncode`
+ - : 一个需要编码的*二进制字符串*。
+
+### 返回值
+
+一个包含 `stringToEncode` 的 Base64 表示的 ASCII 字符串。
+
+### 异常
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+ - : 该字符串包含非单字节的字符。参见下方的“Unicode 字符串”。
+
+## 示例
+
+```js
+const encodedData = window.btoa("Hello, world"); // 编码字符串
+const decodedData = window.atob(encodedData); // 解码字符串
+```
+
+## Unicode 字符串
+
+根据设计，Base64 仅将二进制数据作为其输入。而在 JavaScript 字符串中，这意味着每个字符只能使用一个字节表示。所以，如果你将一个字符串传递给 `btoa()`，而其中包含了需要使用超过一个字节才能表示的字符，你就会得到一个错误，因为这个字符串不能被看作是二进制数据：
+
+```js
+const ok = "a";
+console.log(ok.codePointAt(0).toString(16)); // 61：占用 < 1 字节
+
+const notOK = "✓";
+console.log(notOK.codePointAt(0).toString(16)); // 2713：占用 > 1 字节
+
+console.log(window.btoa(ok)); // YQ==
+console.log(window.btoa(notOK)); // 错误
+```
+
+参见 {{Glossary("Base64")}} 术语条目中的“_Unicode 问题_”，以了解如何在处理任意 Unicode 文本时解决此限制。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`core-js`](https://github.com/zloirock/core-js) 中有对 [`btoa` 的 polyfill](https://github.com/zloirock/core-js#base64-utility-methods)
+- [`data` URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- {{domxref("WorkerGlobalScope.btoa()")}}：相同的，但是是在 worker 作用域内的方法。
+- {{domxref("Window.atob()")}}
+- {{Glossary("Base64")}}
diff --git a/files/zh-cn/web/api/window/crypto/index.md b/files/zh-cn/web/api/window/crypto/index.md
index c55784d25bf477..842cf4bdc60132 100644
--- a/files/zh-cn/web/api/window/crypto/index.md
+++ b/files/zh-cn/web/api/window/crypto/index.md
@@ -9,7 +9,7 @@ l10n:
{{domxref("Window")}} 接口的 **`crypto`** 只读属性返回当前窗口的作用域的 {{domxref("Crypto")}} 对象。此对象允许网页访问某些加密相关的服务。
-虽然该属性自身的只读的，但它的所有方法（以及其子对象的方法——{{domxref("SubtleCrypto")}}）不仅是只读的，因此容易受到 {{glossary("polyfill")}} 的攻击。
+虽然该属性自身是只读的，但它的所有方法（以及其子对象 {{domxref("SubtleCrypto")}} 的方法）不仅是只读的，因此容易受到 {{glossary("polyfill")}} 的攻击。
虽然 `crypto` 在所有窗口上均可用，但其返回的 `Crypto` 对象在不安全的上下文中仅有一个可用的特性：{{domxref("Crypto.getRandomValues", "getRandomValues()")}} 方法。通常，你应该仅在安全上下文中使用此 API。
diff --git a/files/zh-cn/web/api/window/focus_event/index.md b/files/zh-cn/web/api/window/focus_event/index.md
index 6dfbca00166a23..5d73e62d2e4106 100644
--- a/files/zh-cn/web/api/window/focus_event/index.md
+++ b/files/zh-cn/web/api/window/focus_event/index.md
@@ -1,56 +1,49 @@
---
-title: "Window: focus event"
+title: Window：focus 事件
slug: Web/API/Window/focus_event
+l10n:
+ sourceCommit: b4dc8c13ae9041844dc45423aa087002bf9a25e9
---
{{APIRef}}
-当元素获得焦点时， **`focus`** 事件就会触发。
-
-与 `focus` 相反的事件是 {{domxref("Window/blur_event", "blur")}}
-
-<table class="properties">
- <tbody>
- <tr></tr>
- <tr>
- <th>Bubbles（支持冒泡）</th>
- <td>No</td>
- </tr>
- <tr>
- <th>Cancelable（可撤销）</th>
- <td>No</td>
- </tr>
- <tr>
- <th>Interface（接口）</th>
- <td>{{DOMxRef("FocusEvent")}}</td>
- </tr>
- <tr>
- <th>Event handler property（事件处理程序属性）</th>
- <td>
- {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}
- </td>
- </tr>
- <tr>
- <th>Sync / Async（同步/异步）</th>
- <td>Sync</td>
- </tr>
- <tr>
- <th>Composed（可组成）</th>
- <td>Yes</td>
- </tr>
- </tbody>
-</table>
+当元素获得焦点时，**`focus`** 事件就会触发。
+
+与 `focus` 相反的事件是 {{domxref("Window/blur_event", "blur")}}，此事件不可取消，也不会冒泡。
+
+## 语法
+
+在如 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称，或设置事件处理器属性。
+
+```js
+addEventListener("focus", (event) => {});
+
+onfocus = (event) => {};
+```
+
+## 事件类型
+
+一个 {{domxref("FocusEvent")}}。继承自 {{domxref("UIEvent")}} 和 {{domxref("Event")}}。
+
+{{InheritanceDiagram("FocusEvent")}}
+
+## 事件属性
+
+_此接口从它的父类 {{domxref("UIEvent")}} 继承了属性，间接继承于 {{domxref("Event")}}。_
+
+- {{domxref("FocusEvent.relatedTarget")}}
+ - : {{domxref("EventTarget")}} 代表此次事件的次要目标。在一些案例中（例如切换浏览器 tab 标签时），出于安全的原因，这个属性可能会被设置为 `null`。
## 示例
-### 在线示例
+### 实时示例
本示例在失去焦点时更改文档的外观。它使用 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 监听 `focus` 和 {{domxref("Window/blur_event", "blur")}} 事件。
#### HTML
```html
-<p id="log">Click on this document to give it focus.</p>
+<p id="log">单击文档使其获得焦点。</p>
```
#### CSS
@@ -67,13 +60,12 @@ slug: Web/API/Window/focus_event
```js
function pause() {
document.body.classList.add("paused");
- log.textContent = "FOCUS LOST!";
+ log.textContent = "失去焦点！";
}
function play() {
document.body.classList.remove("paused");
- log.textContent =
- "This document has focus. Click outside the document to lose focus.";
+ log.textContent = "文档有焦点，点击文档外部可失去焦点。";
}
const log = document.getElementById("log");
@@ -84,7 +76,7 @@ window.addEventListener("focus", play);
#### 结果
-{{EmbedLiveSample("在线示例")}}
+{{EmbedLiveSample("实时示例")}}
## 规范
@@ -94,7 +86,7 @@ window.addEventListener("focus", play);
{{Compat}}
-## 参考
+## 参见
-- 相关联事件： {{domxref("Window/blur_event", "blur")}}
+- 相关联事件：{{domxref("Window/blur_event", "blur")}}
- `Element` 目标上的这个事件：{{domxref("Element/focus_event", "focus")}} 事件
diff --git a/files/zh-cn/web/api/window/gamepadconnected_event/index.md b/files/zh-cn/web/api/window/gamepadconnected_event/index.md
index 62354f188ecbaf..ec10c142d3c445 100644
--- a/files/zh-cn/web/api/window/gamepadconnected_event/index.md
+++ b/files/zh-cn/web/api/window/gamepadconnected_event/index.md
@@ -3,6 +3,8 @@ title: gamepadconnected
slug: Web/API/Window/gamepadconnected_event
---
+{{APIRef}}
+
`gamepadconnected` 事件会在浏览器检测到游戏控制器第一次连接或者第一次按下游戏键/摇杆的时候触发。
## 基本信息
diff --git a/files/zh-cn/web/api/window/hashchange_event/index.md b/files/zh-cn/web/api/window/hashchange_event/index.md
index 65ae4f97aa0969..b889afd9bb358c 100644
--- a/files/zh-cn/web/api/window/hashchange_event/index.md
+++ b/files/zh-cn/web/api/window/hashchange_event/index.md
@@ -1,34 +1,43 @@
---
-title: "Window: hashchange event"
+title: Window：hashchange 事件
slug: Web/API/Window/hashchange_event
+l10n:
+ sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---
{{APIRef}}
-当 URL 的片段标识符更改时，将触发**hashchange**事件 (跟在＃符号后面的 URL 部分，包括＃符号)
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row">Bubbles</th>
- <td>Yes</td>
- </tr>
- <tr>
- <th scope="row">Cancelable</th>
- <td>No</td>
- </tr>
- <tr>
- <th scope="row">Interface</th>
- <td>{{domxref("HashChangeEvent")}}</td>
- </tr>
- <tr>
- <th scope="row">Event handler</th>
- <td>
- {{domxref("WindowEventHandlers/onhashchange", "onhashchange")}}
- </td>
- </tr>
- </tbody>
-</table>
+当 URL 的片段标识符（以 `#` 符号开头和之后的 URL 部分）更改时，将触发 **`hashchange`** 事件。
+
+## 语法
+
+在如 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称，或设置事件处理器属性。
+
+```js
+addEventListener("hashchange", (event) => {});
+onhashchange = (event) => {};
+```
+
+## 事件类型
+
+一个 {{domxref("HashChangeEvent")}}，继承自 {{domxref("Event")}}。
+
+{{InheritanceDiagram("HashChangeEvent")}}
+
+## 事件属性
+
+- {{domxref("HashChangeEvent.newURL")}} {{ReadOnlyInline}}
+ - : 一个字符串，表示窗口导航到的新 URL。
+- {{domxref("HashChangeEvent.oldURL")}} {{ReadOnlyInline}}
+ - : 一个字符串，表示导航窗口的上一个 URL。
+
+## 事件处理器别名
+
+除了 `Window` 接口以外，事件处理器属性 `onhashchange` 同样可以用于以下目标：
+
+- {{domxref("HTMLBodyElement")}}
+- {{domxref("HTMLFrameSetElement")}}
+- {{domxref("SVGSVGElement")}}
## 示例
@@ -37,8 +46,8 @@ slug: Web/API/Window/hashchange_event
```js
window.addEventListener(
"hashchange",
- function () {
- console.log("The hash has changed!");
+ () => {
+ console.log("哈希已更改！");
},
false,
);
@@ -49,7 +58,7 @@ window.addEventListener(
```js
function locationHashChanged() {
if (location.hash === "#cool-feature") {
- console.log("You're visiting a cool feature!");
+ console.log("你正在访问一个很酷的功能！");
}
}
@@ -66,5 +75,4 @@ window.onhashchange = locationHashChanged;
## 参见
-- {{domxref("Window/popstate_event", "popstate")}}
-- {{domxref("WindowEventHandlers.onhashchange")}}
+- {{domxref("Window/popstate_event", "popstate")}} 事件
diff --git a/files/zh-cn/web/api/window/index.md b/files/zh-cn/web/api/window/index.md
index 5973f03c51a976..9d39c7038bc695 100644
--- a/files/zh-cn/web/api/window/index.md
+++ b/files/zh-cn/web/api/window/index.md
@@ -153,7 +153,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_
- {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}}
- : 为 window 上的特定事件类型注册一个事件处理器。
-- {{domxref("atob", "Window.atob()")}}
+- {{domxref("Window.atob()")}}
- : 解码一个使用 base-64 编码的数据字符串。
- {{domxref("Window.alert()")}}
- : 显示一个警告对话框。
diff --git a/files/zh-cn/web/api/window/languagechange_event/index.md b/files/zh-cn/web/api/window/languagechange_event/index.md
new file mode 100644
index 00000000000000..d7f59ae6567f65
--- /dev/null
+++ b/files/zh-cn/web/api/window/languagechange_event/index.md
@@ -0,0 +1,63 @@
+---
+title: Window：languagechange 事件
+slug: Web/API/Window/languagechange_event
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
+---
+
+{{APIRef}}
+
+**`languagechange`** 事件在用户首选语言发生变化时，在全局对象作用域上触发。
+
+## 语法
+
+在如 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称，或设置事件处理器属性。
+
+```js
+addEventListener("languagechange", (event) => {});
+onlanguagechange = (event) => {};
+```
+
+## 事件类型
+
+一个通用的 {{domxref("Event")}}。
+
+## 事件处理器别名
+
+除了 `Window` 接口以外，事件处理器属性 `onlanguagechange` 同样可以用于以下目标：
+
+- {{domxref("HTMLBodyElement")}}
+- {{domxref("HTMLFrameSetElement")}}
+- {{domxref("SVGSVGElement")}}
+
+## 示例
+
+你可以在 {{domxref("EventTarget/addEventListener", "addEventListener")}} 方法中使用 `languagechange` 事件：
+
+```js
+window.addEventListener("languagechange", () => {
+ console.log("检测到 languagechange 事件！");
+});
+```
+
+或使用 `onlanguagechange` 事件处理器属性：
+
+```js
+window.onlanguagechange = (event) => {
+ console.log("检测到 languagechange 事件！");
+};
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("navigator.language")}}
+- {{domxref("navigator.languages")}}
+- {{domxref("navigator")}}
diff --git a/files/zh-cn/web/api/window/locationbar/index.md b/files/zh-cn/web/api/window/locationbar/index.md
index ebce8b6c4d2249..c98e67ef03d380 100644
--- a/files/zh-cn/web/api/window/locationbar/index.md
+++ b/files/zh-cn/web/api/window/locationbar/index.md
@@ -1,45 +1,37 @@
---
-title: Window.locationbar
+title: Window：locationbar 属性
slug: Web/API/Window/locationbar
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
---
{{APIRef}}
-## 概要
+返回 `locationbar` 对象。
-返回一个可以检查 visibility 属性的 `locationbar` 对象。
+这是包含布尔值 `visible` 属性的一组 `Window` 属性之一，用于表示 web 浏览器用户界面的特定部分是否可见。
-## 语法
+出于隐私和互操作性的考虑，如果 `Window` 是弹出窗口，则 `visible` 属性的值为 `false`，反之为 `true`。
-```plain
-objRef = window.locationbar
-```
+## 值
-## 示例
+包含单个属性的对象：
-以下完整的 HTML 示例显示了使用 locationbar 对象的 visible 属性的方式。
-
-```html
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <title>Various DOM Tests</title>
-
- <script>
- var visible = window.locationbar.visible;
- </script>
- </head>
- <body>
- <p>Various DOM Tests</p>
- </body>
-</html>
-```
+- `visible` {{ReadOnlyInline}}
+ - : 布尔属性，如果 `Window` 是弹出窗口，则为 `false`，反之为 `true`。
## 规范
{{Specifications}}
-## 相关链接
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
-- {{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}
+- {{domxref("window.menubar")}}
+- {{domxref("window.personalbar")}}
+- {{domxref("window.scrollbars")}}
+- {{domxref("window.statusbar")}}
+- {{domxref("window.toolbar")}}
diff --git a/files/zh-cn/web/api/window/menubar/index.md b/files/zh-cn/web/api/window/menubar/index.md
index c1c1ccecfc1644..c08a117e7405d9 100644
--- a/files/zh-cn/web/api/window/menubar/index.md
+++ b/files/zh-cn/web/api/window/menubar/index.md
@@ -1,42 +1,37 @@
---
-title: Window.menubar
+title: Window：menubar 属性
slug: Web/API/Window/menubar
+l10n:
+ sourceCommit: 62cedc63226017e9e7d0718b6fea3529ca8dbf37
---
-{{ APIRef() }}
+{{APIRef}}
-## 概要
+返回 `menubar` 对象。
-返回一个可以检测 visibility 属性的 `menubar` 对象。
+这是包含布尔值 `visible` 属性的一组 `Window` 属性之一，用于表示 web 浏览器用户界面的特定部分是否可见。
-## 语法
+出于隐私和互操作性的考虑，如果 `Window` 是弹出窗口，则 `visible` 属性的值为 `false`，反之为 `true`。
-```plain
-objRef = window.menubar
-```
+## 值
-## 示例
+包含单个属性的对象：
-以下完整的 HTML 示例显示了使用 locationbar 对象的 visible 属性的方式。
-
-```html
-<html>
- <head>
- <title>Various DOM Tests</title>
- <script>
- var visible = window.menubar.visible;
- </script>
- </head>
- <body>
- <p>Various DOM Tests</p>
- </body>
-</html>
-```
+- `visible` {{ReadOnlyInline}}
+ - : 布尔属性，如果 `Window` 是弹出窗口，则为 `false`，反之为 `true`。
## 规范
{{Specifications}}
-## 相关链接：
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
-[window.locationbar](/zh-CN/DOM/window.locationbar), [window.personalbar](/zh-CN/DOM/window.personalbar), [window.scrollbars](/zh-CN/DOM/window.scrollbars), [window.statusbar](/zh-CN/DOM/window.statusbar), [window.toolbar](/zh-CN/DOM/window.toolbar)
+- {{domxref("window.locationbar")}}
+- {{domxref("window.personalbar")}}
+- {{domxref("window.scrollbars")}}
+- {{domxref("window.statusbar")}}
+- {{domxref("window.toolbar")}}
diff --git a/files/zh-cn/web/api/window/open/index.md b/files/zh-cn/web/api/window/open/index.md
index 86c7bafd2bc8aa..d3e9cf1a14f756 100644
--- a/files/zh-cn/web/api/window/open/index.md
+++ b/files/zh-cn/web/api/window/open/index.md
@@ -26,7 +26,7 @@ open(url, target, windowFeatures)
- : 一个不含空格的字符串，用于指定加载资源的浏览上下文的[名称](/zh-CN/docs/Web/API/Window/name)。如果该名称无法识别现有的上下文，则会创建一个新的上下文，并赋予指定的名称。还可以使用特殊的 [`target` 关键字](/zh-CN/docs/Web/HTML/Element/a#target)：`_self`、`_blank`、`_parent` 和 `_top`。
- 该名称可用作 [`<a>`](/zh-CN/docs/Web/HTML/Element/a#target) 或 [`<form>`](/zh-CN/docs/Web/HTML/Element/form#target) 元素的 `target` 属性。
+ 该名称可用作 [`<a>`](/zh-CN/docs/Web/HTML/Element/a#target) 或 [`<form>`](/zh-CN/docs/Web/HTML/Element/form#target) 元素的 `target` 属性。
- `windowFeatures` {{optional_inline}}
@@ -40,7 +40,7 @@ open(url, target, windowFeatures)
> **备注：** 在 `windowFeatures` 参数中指定除 `noopener` 或 `noreferrer` 以外的任何特性，也会产生请求弹出窗口的效果。
- 要启用该特性，可以不指定 `popup` 值，或将其设置为 `yes`, `1` 或 `true`。
+ 要启用该特性，可以不指定 `popup` 值，或将其设置为 `yes`、`1` 或 `true`。
例如：`popup=yes`、`popup=1`、`popup=true` 和`popup` 的结果完全相同。
diff --git a/files/zh-cn/web/api/window/orientationchange_event/index.md b/files/zh-cn/web/api/window/orientationchange_event/index.md
index f1ca66400b4e8e..1724ff7b197a3d 100644
--- a/files/zh-cn/web/api/window/orientationchange_event/index.md
+++ b/files/zh-cn/web/api/window/orientationchange_event/index.md
@@ -3,6 +3,8 @@ title: orientationchange
slug: Web/API/Window/orientationchange_event
---
+{{APIRef}}
+
`orientationchange`事件在设备的纵横方向改变时触发。
<table class="properties">
diff --git a/files/zh-cn/web/api/window/pageshow_event/index.md b/files/zh-cn/web/api/window/pageshow_event/index.md
index e5410ae2ed41c0..7d5bbe1693d314 100644
--- a/files/zh-cn/web/api/window/pageshow_event/index.md
+++ b/files/zh-cn/web/api/window/pageshow_event/index.md
@@ -3,6 +3,8 @@ title: pageshow
slug: Web/API/Window/pageshow_event
---
+{{APIRef("HTML DOM")}}
+
当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)
## 基本信息
diff --git a/files/zh-cn/web/api/window/personalbar/index.md b/files/zh-cn/web/api/window/personalbar/index.md
new file mode 100644
index 00000000000000..4f06f509d094a0
--- /dev/null
+++ b/files/zh-cn/web/api/window/personalbar/index.md
@@ -0,0 +1,37 @@
+---
+title: Window：personalbar 属性
+slug: Web/API/Window/personalbar
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
+---
+
+{{APIRef}}
+
+返回 `personalbar` 对象。
+
+这是包含布尔属性 `visible` 的一组 `Window` 属性之一，用于表示 web 浏览器用户界面的特定部分是否可见。
+
+由于隐私和互操作性的原因，如果 `Window` 是弹出窗口，则 `visible` 属性的值为 `false`，反之为 `true`。
+
+## 值
+
+包含单个属性的对象：
+
+- `visible` {{ReadOnlyInline}}
+ - : 一个布尔属性，如果 `Window` 是弹出窗口，则为 `false`，反之为 `true`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("window.locationbar")}}
+- {{domxref("window.menubar")}}
+- {{domxref("window.scrollbars")}}
+- {{domxref("window.statusbar")}}
+- {{domxref("window.toolbar")}}
diff --git a/files/zh-cn/web/api/window/resize_event/index.md b/files/zh-cn/web/api/window/resize_event/index.md
index 5aae0f9a2d9840..f0f31084ffbab4 100644
--- a/files/zh-cn/web/api/window/resize_event/index.md
+++ b/files/zh-cn/web/api/window/resize_event/index.md
@@ -1,11 +1,13 @@
---
title: Window：resize 事件
slug: Web/API/Window/resize_event
+l10n:
+ sourceCommit: 030c1397d753681105a443d619c9ef0e10cd7458
---
{{APIRef}}
-文档视图（窗口）调整大小时会触发 **`resize`** 事件。
+**`resize`** 事件在文档视图（窗口）调整大小时触发。
这个事件不可取消，不会冒泡。
@@ -13,7 +15,7 @@ slug: Web/API/Window/resize_event
虽然现在 `resize` 事件只针对窗口触发，但你可以使用 [ResizeObserver](/zh-CN/docs/Web/API/ResizeObserver) API 获得其他元素的尺寸调整通知。
-如果对你的应用程序来说，调整大小事件被触发了太多次，请参阅[优化 window.onresize](https://web.archive.org/web/20220714020647/https://bencentra.com/code/2015/02/27/optimizing-window-resize.html) 来控制事件触发的时间。
+如果对你的应用程序来说，调整大小事件被触发了太多次，请参阅[优化 window.onresize](https://bencentra.com/code/2015/02/27/optimizing-window-resize.html) 来控制事件触发的时间。
## 语法
@@ -27,22 +29,7 @@ onresize = (event) => {};
## 事件类型
-{{domxref("UIEvent")}}。继承自 {{domxref("Event")}}。
-
-{{InheritanceDiagram("UIEvent")}}
-
-## 事件属性
-
-_本接口也从其父接口 {{domxref("Event")}} 继承属性。_
-
-- {{domxref("UIEvent.detail")}} {{ReadOnlyInline}}
- - : 根据事件类型不同，返回一个带有事件细节的 `long` 值。
-- {{domxref("UIEvent.sourceCapabilities")}} {{experimental_inline}} {{ReadOnlyInline}}
- - : 返回 `InputDeviceCapabilities` 接口的一个实例，它提供了生成触摸事件相关的物理设备信息。
-- {{domxref("UIEvent.view")}} {{ReadOnlyInline}}
- - : 返回一个 {{glossary("WindowProxy")}}，其中包含产生该事件的视图。
-- {{domxref("UIEvent.which")}} {{deprecated_inline}} {{Non-standard_inline}} {{ReadOnlyInline}}
- - : 返回被按下的数字键的 `keyCode`，或被按下的字母数字键的字符代码（`charCode`）。
+一个通用的 {{domxref("Event")}}。
## 示例
@@ -78,7 +65,7 @@ window.onresize = reportWindowSize;
> **备注：** 这里的例子是在 {{HTMLElement("iframe")}} 中输出的，所以报告的宽度和高度值是针对 `<iframe>` 的，而不是本页面所在的窗口。特别是，很难调整窗口的大小，以便看到报告高度的不同。
>
-> [在示例本身窗口查看示例](https://yari-demos.prod.mdn.mozit.cloud/zh-CN/docs/Web/API/Window/resize_event/_sample_.window_size_logger.html)更容易观察到效果。
+> {{LiveSampleLink("窗口大小记录器", "在示例本身窗口查看示例", 1)}}更容易观察到效果。
### addEventListener 等价形式
diff --git a/files/zh-cn/web/api/window/statusbar/index.md b/files/zh-cn/web/api/window/statusbar/index.md
new file mode 100644
index 00000000000000..5e04907d76f05d
--- /dev/null
+++ b/files/zh-cn/web/api/window/statusbar/index.md
@@ -0,0 +1,37 @@
+---
+title: Window：statusbar 属性
+slug: Web/API/Window/statusbar
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
+---
+
+{{APIRef}}
+
+返回 `statusbar` 对象。
+
+这是包含布尔属性 `visible` 的一组 `Window` 属性之一，用于表示 web 浏览器用户界面的特定部分是否可见。
+
+由于隐私和互操作性的原因，如果 `Window` 是弹出窗口，则 `visible` 属性的值为 `false`，反之为 `true`。
+
+## 值
+
+包含单个属性的对象：
+
+- `visible` {{ReadOnlyInline}}
+ - : 一个布尔属性，如果 `Window` 是弹出窗口，则为 `false`，反之为 `true`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("window.locationbar")}}
+- {{domxref("window.menubar")}}
+- {{domxref("window.personalbar")}}
+- {{domxref("window.scrollbars")}}
+- {{domxref("window.toolbar")}}
diff --git a/files/zh-cn/web/api/window/storage_event/index.md b/files/zh-cn/web/api/window/storage_event/index.md
index 2ece8ee975a4d7..be59879a38818f 100644
--- a/files/zh-cn/web/api/window/storage_event/index.md
+++ b/files/zh-cn/web/api/window/storage_event/index.md
@@ -3,6 +3,8 @@ title: storage
slug: Web/API/Window/storage_event
---
+{{APIRef}}
+
当存储区域（localStorage 或 sessionStorage）被修改时，将触发 storage 事件。查看 [Web Storage API](/zh-CN/docs/Web/API/Web_Storage_API) 来获取更多信息。
## 常规信息
diff --git a/files/zh-cn/web/api/window/toolbar/index.md b/files/zh-cn/web/api/window/toolbar/index.md
new file mode 100644
index 00000000000000..0e52dea28f839e
--- /dev/null
+++ b/files/zh-cn/web/api/window/toolbar/index.md
@@ -0,0 +1,37 @@
+---
+title: Window：toolbar 属性
+slug: Web/API/Window/toolbar
+l10n:
+ sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
+---
+
+{{APIRef}}
+
+返回 `toolbar` 对象。
+
+这是包含布尔属性 `visible` 属性的一组 `Window` 属性之一，用于表示 web 浏览器用户界面的特定部分是否可见。
+
+由于隐私和互操作性的原因，如果 `Window` 是弹出窗口，则 `visible` 属性的值为 `false`，反之为 `true`。
+
+## 值
+
+包含单个属性的对象：
+
+- `visible` {{ReadOnlyInline}}
+ - : 一个布尔属性，如果 `Window` 是弹出窗口，则为 `false`，反之为 `true`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("window.locationbar")}}
+- {{domxref("window.menubar")}}
+- {{domxref("window.personalbar")}}
+- {{domxref("window.scrollbars")}}
+- {{domxref("window.statusbar")}}
diff --git a/files/zh-cn/web/api/window/trustedtypes/index.md b/files/zh-cn/web/api/window/trustedtypes/index.md
new file mode 100644
index 00000000000000..2ac5435ce7b3d6
--- /dev/null
+++ b/files/zh-cn/web/api/window/trustedtypes/index.md
@@ -0,0 +1,22 @@
+---
+title: Window：trustedTypes 属性
+slug: Web/API/Window/trustedTypes
+l10n:
+ sourceCommit: fc4f2ea893df340f8b41ef8ec956f2d36242bee4
+---
+
+{{APIRef("Trusted Types API")}}
+
+{{domxref("Window")}} 接口的 **`trustedTypes`** 只读属性返回与全局对象关联的 {{domxref("TrustedTypePolicyFactory")}} 对象，为使用{{domxref("Trusted Types API", "可信类型 API", "", "nocode")}} 提供入口点。
+
+## 值
+
+一个 {{domxref("TrustedTypePolicyFactory")}} 对象。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/worker/index.md b/files/zh-cn/web/api/worker/index.md
index ee64a740b7c519..d36e84588da52c 100644
--- a/files/zh-cn/web/api/worker/index.md
+++ b/files/zh-cn/web/api/worker/index.md
@@ -20,7 +20,7 @@ Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建
## 属性
-*继承*父对象*{{domxref("EventTarget")}} 的属性，以及实现对象 {{domxref("AbstractWorker")}}的属性。*
+_继承父接口 {{domxref("EventTarget")}} 的属性。_
### _事件句柄_
@@ -33,7 +33,7 @@ Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建
## 方法
-*继承*父对象*{{domxref("EventTarget")}} 的方法，以及实现对象 {{domxref("AbstractWorker")}}的方法。*
+_继承父接口 {{domxref("EventTarget")}} 的方法。_
- {{domxref("Worker.postMessage()")}}
- : 发送一条消息到最近的外层对象，消息可由任何 JavaScript 对象组成。
diff --git a/files/zh-cn/web/api/workerglobalscope/atob/index.md b/files/zh-cn/web/api/workerglobalscope/atob/index.md
new file mode 100644
index 00000000000000..5ff2b6654b47da
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/atob/index.md
@@ -0,0 +1,54 @@
+---
+title: WorkerGlobalScope：atob() 方法
+slug: Web/API/WorkerGlobalScope/atob
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`atob()`** 函数会对经过 {{glossary("Base64")}} 编码的字符串进行解码。你可以使用 {{domxref("WorkerGlobalScope.btoa()")}} 方法来编码可能会在传输过程中出现问题的数据，并且在接收数据之后，使用 `atob()` 方法再将数据解码。例如：你可以编码、传输和解码控制字符，如 {{Glossary("ASCII")}} 值为 0 到 31 的。
+
+对于任意 Unicode 字符串的使用，请参阅 {{Glossary("Base64")}} 文中的“_Unicode 问题_”。
+
+## 语法
+
+```js-nolint
+atob(encodedData)
+```
+
+### 参数
+
+- `encodedData`
+ - : 一个包含 base64 编码数据的二进制字符串（即字符串中的每个字符都被视为一字节的二进制数据）。
+
+### 返回值
+
+从 `encodedData` 解码出来的 ASCII 字符串
+
+### 异常
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+ - : 如果 `encodedData` 不是有效的 base64 字符串，则抛出错误。
+
+## 示例
+
+```js
+const encodedData = self.btoa("Hello, world"); // 编码
+const decodedData = self.atob(encodedData); // 解码
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`core-js`](https://github.com/zloirock/core-js) 提供了 [`atob` 的 polyfill](https://github.com/zloirock/core-js#base64-utility-methods)
+- [`data` URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- {{domxref("Window.atob()")}}：相同的，但是是在窗口作用域内的方法。
+- {{domxref("WorkerGlobalScope.btoa()")}}
diff --git a/files/zh-cn/web/api/workerglobalscope/btoa/index.md b/files/zh-cn/web/api/workerglobalscope/btoa/index.md
new file mode 100644
index 00000000000000..558754240259b0
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/btoa/index.md
@@ -0,0 +1,72 @@
+---
+title: WorkerGlobalScope：btoa() 方法
+slug: Web/API/WorkerGlobalScope/btoa
+l10n:
+ sourceCommit: dd3048a4eb74a53395c9a2015baefaa46ef77a56
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`btoa()`** 方法可以将一个*二进制字符串*（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 {{glossary("Base64")}} 编码的 ASCII 字符串。
+
+你可以使用这个方法来对可能遇到通信问题的数据进行编码，然后使用 {{domxref("WorkerGlobalScope.atob()")}} 方法来对数据进行解码。例如，你可以对 ASCII 中的控制字符（值为 0 到 31 的字符）进行编码。
+
+## 语法
+
+```js-nolint
+btoa(stringToEncode)
+```
+
+### 参数
+
+- `stringToEncode`
+ - : 一个需要编码的*二进制字符串*。
+
+### 返回值
+
+一个包含 `stringToEncode` 的 Base64 表示的 ASCII 字符串。
+
+### 异常
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+ - : 该字符串包含非单字节的字符。参见下方的“Unicode 字符串”。
+
+## 示例
+
+```js
+const encodedData = self.btoa("Hello, world"); // 编码字符串
+const decodedData = self.atob(encodedData); // 解码字符串
+```
+
+## Unicode 字符串
+
+根据设计，Base64 仅将二进制数据作为其输入。而在 JavaScript 字符串中，这意味着每个字符只能使用一个字节表示。所以，如果你将一个字符串传递给 `btoa()`，而其中包含了需要使用超过一个字节才能表示的字符，你就会得到一个错误，因为这个字符串不能被看作是二进制数据：
+
+```js
+const ok = "a";
+console.log(ok.codePointAt(0).toString(16)); // 61：占用 < 1 字节
+
+const notOK = "✓";
+console.log(notOK.codePointAt(0).toString(16)); // 2713：占用 > 1 字节
+
+console.log(self.btoa(ok)); // YQ==
+console.log(self.btoa(notOK)); // 错误
+```
+
+参见 {{Glossary("Base64")}} 术语条目中的“Unicode 问题”，以了解如何在处理任意 Unicode 文本时解决此限制。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`core-js`](https://github.com/zloirock/core-js) 中有对 [`btoa` 的 polyfill](https://github.com/zloirock/core-js#base64-utility-methods)
+- [`data` URL](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+- {{domxref("WorkerGlobalScope.atob()")}}
+- {{domxref("Window.atob()")}}：相同的，但是是在窗口作用域内的方法。
+- {{Glossary("Base64")}}
diff --git a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.md b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.md
index 31fe27491332fd..99f17c0c9ba3f8 100644
--- a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.md
@@ -3,6 +3,8 @@ title: loadend
slug: Web/API/XMLHttpRequest/loadend_event
---
+{{APIRef("XMLHttpRequest API")}}
+
loadend 事件总是在一个资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)。这适用于 {{domxref("XMLHttpRequest")}} 调用，以及 {{htmlelement("img")}} 或 {{htmlelement("video")}} 之类元素的内容。
## General info
diff --git a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.md b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.md
index 0dbd57984d8960..8c288865677554 100644
--- a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.md
@@ -3,6 +3,8 @@ title: loadstart
slug: Web/API/XMLHttpRequest/loadstart_event
---
+{{APIRef("XMLHttpRequest API")}}
+
当程序开始加载时，loadstart 事件将被触发。这个事件可以被 {{domxref("XMLHttpRequest")}} 调用，也适用于 {{htmlelement("img")}} 和 {{htmlelement("video")}} 元素。
## 基本信息
diff --git a/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md b/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md
index 0620934b97c94f..0ff06cc896bf38 100644
--- a/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md
@@ -3,6 +3,8 @@ title: XMLHttpRequest.overrideMimeType()
slug: Web/API/XMLHttpRequest/overrideMimeType
---
+{{APIRef("XMLHttpRequest API")}}
+
XMLHttpRequest 的 **`overrideMimeType`** 方法是指定一个 MIME 类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定 MIME 类型处理。例如强制使流方式处理为"text/xml"类型处理时会被使用到，即使服务器在响应头中并没有这样指定。此方法必须在 send 方法之前调用方为有效。
## Syntax
diff --git a/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md b/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md
index 86cc7e726e355a..44f6083078f888 100644
--- a/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md
@@ -1,30 +1,40 @@
---
-title: XMLHttpRequest.setRequestHeader()
+title: XMLHttpRequest：setRequestHeader() 方法
slug: Web/API/XMLHttpRequest/setRequestHeader
+l10n:
+ sourceCommit: 9c78a44b9321fcd3fbe63d6f5b61ed749c2fa261
---
-{{APIRef('XMLHttpRequest')}}
+{{APIRef("XMLHttpRequest API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
-**XMLHttpRequest.setRequestHeader()** 是设置 HTTP 请求头部的方法。此方法必须在 {{domxref("XMLHttpRequest.open", "open()")}} 方法和 {{domxref("XMLHttpRequest.send", "send()")}} 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
+{{domxref("XMLHttpRequest")}} 的 **`setRequestHeader()`** 方法设置 HTTP 请求头部的值。此方法必须在 {{domxref("XMLHttpRequest.open", "open()")}} 方法和 {{domxref("XMLHttpRequest.send", "send()")}} 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
-如果没有设置 {{HTTPHeader("Accept")}} 属性，则此发送出{{domxref("XMLHttpRequest.send", "send()")}} 的值为此属性的默认值：`*/*`。
+在第一次调用 `setRequestHeader()` 之后的每次调用，指定文本会附加到存在的标头内容的末尾。
-安全起见，有些请求头的值只能由 user agent 设置：{{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。
+如果没有设置 {{HTTPHeader("Accept")}} 标头，则在调用 {{domxref("XMLHttpRequest.send", "send()")}} 时，会随请求发送一个类型为 `"*/*"` 的 `Accept` 标头。
-> **备注：** 自定义一些 header 属性进行跨域请求时，可能会遇到"**not allowed by Access-Control-Allow-Headers in preflight response**"，你可能需要在你的服务端设置 "Access-Control-Allow-Headers"。
+安全起见，有些{{Glossary("Forbidden_header_name", "禁止修改的标头")}}的值只能由用户代理控制。任何通过前端 JavaScript 代码为其中一个标头设置值的尝试都将被忽略，不会出现警告或错误。
+
+另外，[`Authorization`](/zh-CN/docs/Web/HTTP/Headers/Authorization) HTTP 标头可以添加到请求中，但如果请求被跨源重定向，则会被删除。
+
+> **备注：** 对于自定义字段，在跨域请求时可能遇到“**not allowed by Access-Control-Allow-Headers in preflight response**”异常，你可能需要在你的服务端设置 {{HTTPHeader("Access-Control-Allow-Headers")}}。
## 语法
-```
-myReq.setRequestHeader(header, value);
+```js-nolint
+setRequestHeader(header, value)
```
### 参数
- `header`
- - : 属性的名称。
+ - : 要设置的标头的名称。
- `value`
- - : 属性的值。
+ - : 要设置的标头正文的值。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
## 规范
@@ -34,6 +44,7 @@ myReq.setRequestHeader(header, value);
{{Compat}}
-## 参考
+## 参见
-[使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)
+- [使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)
+- [XMLHttpRequest 中的 HTML](/zh-CN/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest)
diff --git a/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md b/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md
index d07bfb7170aca5..fb56bbd4422024 100644
--- a/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md
@@ -3,6 +3,8 @@ title: timeout
slug: Web/API/XMLHttpRequest/timeout_event
---
+{{APIRef("XMLHttpRequest API")}}
+
当进度由于预定时间到期而终止时，会触发 `timeout` 事件。
<table class="properties">
diff --git a/files/zh-cn/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md b/files/zh-cn/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
index 0c33d4b6a2fe71..b1c882a2e915c6 100644
--- a/files/zh-cn/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest_api/synchronous_and_asynchronous_requests/index.md
@@ -3,6 +3,8 @@ title: 同步和异步请求
slug: Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests
---
+{{DefaultAPISidebar("XMLHttpRequest API")}}
+
`XMLHttpRequest` 支持同步和异步通信。但是，一般来说，出于性能原因，异步请求应优先于同步请求。
同步请求阻止代码的执行，这会导致屏幕上出现“冻结”和无响应的用户体验。
diff --git a/files/zh-cn/web/api/xmlhttprequest_api/using_formdata_objects/index.md b/files/zh-cn/web/api/xmlhttprequest_api/using_formdata_objects/index.md
index df22a1b1ee8d15..709802f275b2af 100644
--- a/files/zh-cn/web/api/xmlhttprequest_api/using_formdata_objects/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest_api/using_formdata_objects/index.md
@@ -3,6 +3,8 @@ title: FormData 对象的使用
slug: Web/API/XMLHttpRequest_API/Using_FormData_Objects
---
+{{DefaultAPISidebar("XMLHttpRequest API")}}
+
FormData 对象用以将数据编译成键值对，以便用[`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest)来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据 (keyed data)，而独立于表单使用。如果表单`enctype`属性设为 multipart/form-data，则会使用表单的{{domxref("HTMLFormElement.submit","submit()")}}方法来发送数据，从而，发送数据具有同样形式。
## 从零开始创建 FormData 对象
diff --git a/files/zh-cn/web/css/@font-face/font-style/index.md b/files/zh-cn/web/css/@font-face/font-style/index.md
index 5dfa6ba75b67a9..97748828fc9f5b 100644
--- a/files/zh-cn/web/css/@font-face/font-style/index.md
+++ b/files/zh-cn/web/css/@font-face/font-style/index.md
@@ -1,44 +1,52 @@
---
title: font-style
slug: Web/CSS/@font-face/font-style
+l10n:
+ sourceCommit: 418b3ebf6464716649125199385c39d86c944973
---
{{CSSRef}}
-## 概述
+**`font-style`** CSS 描述符允许作者为 {{cssxref("@font-face")}} @ 规则中指定的字体指定字体样式。
-**font-style** 描述符允许开发者在 @font-rule 规则中为指定字体样式 (该条目区别于 font-style，意指用在 @font-rule 中的 font-style 属性)
+对于特定字体家族，作者可以下载与同一字体家族的不同风格相对应的各种字体，然后使用 `font-style` 描述符明确指定字体的风格。该 CSS 描述符的值与相应的 {{cssxref("font-style")}} 属性的值相同。
-For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-style` descriptor to explicitly specify the font face's style. The values for the CSS descriptor is same as that of its corresponding font property.
-
-{{cssinfo}}
-
-## Syntax
+## 语法
```css
font-style: normal;
font-style: italic;
font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;
```
-### Values
+### 值
-**`normal`**
-Selects the normal version of the font-family.
+- `normal`
+ - : 选择 font-family 的常规版本。
+- `italic`
+ - : 指定 font-face 为普通字体的斜体版本。
+- `oblique`
+ - : 指定 font-face 是普通字体的人工倾斜版本。
+- 带有角度值 `oblique`
+ - : 选择被归类为 `oblique` 的字体，并指定文字倾斜的角度。
+- 带有角度范围的 `oblique`
+ - : 选择被归类为 `oblique` 的字体，并指定文字倾斜角度的允许范围。请注意，只有当 `font-style` 为 `oblique` 时，才支持范围；对于 `font-style: normal` 或 `italic`，不允许使用第二个值。
-**`italic`**
-Specifies that font-face is an italicized version of the normal font .
+## 形式定义
-**`oblique`**
-Specifies that the font-face is an artificially sloped version of the normal font.
+{{cssinfo}}
-### Formal syntax
+## 形式语法
{{csssyntax}}
-## Examples
+## 示例
-As an example, consider the garamond font family, in its normal form, we get the following result:
+### 指定斜体字体样式
+
+以 garamond 字体家族为例，在其正常形式下，我们可以得到以下结果：
```css
@font-face {
@@ -47,13 +55,13 @@ As an example, consider the garamond font family, in its normal form, we get the
}
```
-
+
-The italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.
+该文本的斜体版本使用与无样式版本相同的字形，但它们被人为地倾斜了几度。
-
+
-On the other hand, if a true italicized version of the font family exists, we can include it in the `src` descriptor and specify the font style as italic, so that it is clear that the font is italicized. True italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. These fonts are specially created by font designers and are **not** artificially sloped.
+另一方面，如果存在字体家族的真正斜体版本，我们可以将其包含在 `src` 描述符中，并将字体样式指定为斜体，这样就可以清楚地看到字体是斜体了。真正的斜体使用不同的字形，与正体有些不同，具有一些独特的特征，通常具有圆润的书法气质。这些字体是由字体设计师专门设计的，并**不是**人为倾斜的。
```css
@font-face {
@@ -63,12 +71,23 @@ On the other hand, if a true italicized version of the font family exists, we ca
}
```
-
+
-## Specifications
+## 规范
{{Specifications}}
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
+
+## 参见
+
+- {{cssxref("@font-face/font-display", "font-display")}}
+- {{cssxref("@font-face/font-family", "font-family")}}
+- {{cssxref("@font-face/font-stretch", "font-stretch")}}
+- {{cssxref("@font-face/font-weight", "font-weight")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/src", "src")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range")}}
diff --git a/files/zh-cn/web/css/@font-face/src/index.md b/files/zh-cn/web/css/@font-face/src/index.md
index 2bc6b113edf719..ea7d472108390d 100644
--- a/files/zh-cn/web/css/@font-face/src/index.md
+++ b/files/zh-cn/web/css/@font-face/src/index.md
@@ -1,79 +1,279 @@
---
title: src
slug: Web/CSS/@font-face/src
+l10n:
+ sourceCommit: 8d4fb1e2934111a13989d2796152dc601468e7b5
---
{{CSSRef}}
-{{cssxref("@font-face")}} 中的 src 描述符指定了包含字体数据的资源。`@font-face` 规则中需要指定这个属性。
+{{cssxref("@font-face")}} @ 规则中的 **`src`** CSS 描述符指定了包含字体数据的资源。它是 `@font-face` 规则有效的必要条件。
-它的值是一个有优先级的，以逗号分割的外部引用或者本地安装的字体名称。当需要使用字体时，用户代理（指浏览器的意思）将会使用以逗号分隔的参考集中能成功激活的第一个参考值。如果是包含无效数据的字体或者本地的字体资源不存在，用户代理将会忽略当前字体并且加载下一个字体。
+## 语法
-与 CSS 中的其他 URL 一样，URL 可以是相对的，在这种情况下，它相对于包含 @ font-face 规则的样式表的位置进行解析。对于 SVG 字体，URL 指向文档中定义的包含 SVG 字体的元素。如果省略元素引用，则默认引用第一个定义字体。同样，字体容器只加载`@font-face` 规则给定的其中一种字体。片段标识符用于指示要加载的字体。如果容器格式缺少定义的片段标识符方案，将会使用一个简单的基于 1 的索引方案（e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.）
+```css
+/* <url> 值 */
+src: url(https://somewebsite.com/path/to/font.woff); /* 绝对 URL */
+src: url(path/to/font.woff); /* 相对 URL */
+src: url("path/to/font.woff"); /* 带引号的 URL */
+src: url(path/to/svgFont.svg#example); /* 标识字体的片段 */
-{{cssinfo}}
+/* <font-face-name> 值 */
+src: local(font); /* 不带引号的名称 */
+src: local(some font); /* 带空格的名称 */
+src: local("font"); /* 带引号的名称 */
+src: local("some font"); /* 带引号、包含空格的名称 */
-## Syntax
+/* <tech(<font-tech>)> 值 */
+src: url(path/to/fontCOLRv1.otf) tech(color-COLRv1);
+src: url(path/to/fontCOLR-svg.otf) tech(color-SVG);
-```css
-/* <url> values */
-src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */
-src: url(path/to/font.woff); /* Relative URL */
-src: url(path/to/font.woff) format("woff"); /* Explicit format */
-src: url("path/to/font.woff"); /* Quoted URL */
-src: url(path/to/svgfont.svg#example); /* Fragment identifying font */
-
-/* <font-face-name> values */
-src: local(font); /* Unquoted name */
-src: local(some font); /* Name containing space */
-src: local("font"); /* Quoted name */
-
-/* Multiple items */
+/* <format(<font-format>)> 值 */
+src: url(path/to/font.woff) format("woff");
+src: url(path/to/font.otf) format("opentype");
+
+/* 多个资源 */
src:
- local(font),
- url(path/to/font.svg) format("svg"),
url(path/to/font.woff) format("woff"),
url(path/to/font.otf) format("opentype");
+
+/* 多个具有字体格式和技术的资源 */
+src:
+ url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
+ url("trickster-outline.otf") format(opentype);
```
-### Values
+### 值
+
+- `url()`
+
+ - : 指定由 {{cssxref("<url>")}} 组成的外部引用，之后是使用 `format()` 和 `tech()` 组件值的可选提示，这些提示指定了 URL 引用资源的格式和字体技术。`format()` 和 `tech()` 组件是以逗号分隔的已知[字体格式](#字体格式)和技术字符串列表。如果用户代理不支持字体技术或格式，就会跳过下载字体资源。如果不提供格式或技术提示，则始终下载字体资源。
-- `<url> [ format( <string># ) ]?`
+- `format()`
+ - : 紧跟 `url()` 值的可选声明，为用户代理提供有关字体格式的提示。如果该值不被支持或无效，浏览器可能不会下载该资源，从而可能节省带宽。如果省略，浏览器将下载资源，然后检测格式。如果为了向后兼容而包含了[已定义关键字](#形式语法)列表中没有的字体源，请将格式字符串用引号括起来。下面的[字体格式](#字体格式)部分介绍了可能的值。
+- `tech()`
+ - : 在 `url()` 值之后的一个可选声明，为用户代理提供有关字体技术的提示。`tech()`的值可以是[字体技术](#字体技术)中描述的关键字之一。
+- `local(<font-face-name>)`
- - : Specifies an external reference consisting of a {{cssxref("<url>")}}, followed by an optional hint using the 
+ - : 如果用户设备上有字体，则指定字体名称。字体名称可以不加引号。
- `format()`
+ > **备注：** 对于 OpenType 和 TrueType 字体，`<font-face-name>` 用于匹配 Postscript 名称或本地可用字体名称表中的完整字体名称。使用哪种类型的名称因平台和字体而异，因此应同时包含这两种名称，以确保跨平台的正确匹配。不得使用指定字体名称的平台替换。
-  function to describe the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. If a user agent doesn't support the specified formats, it skips downloading the font resource. If no format hints are supplied, the font resource is always downloaded.
+ > **备注：** 本地可用字体可能已经预装在用户的设备上，也可能是用户主动安装的。
+ >
+ > 对于特定设备的所有用户来说，预装字体集可能是相同的，但用户安装的字体集却不尽相同。因此，通过发现用户安装的字体集，网站可以为设备建立{{glossary("fingerprinting", "指纹")}}，帮助网站在整个网络中跟踪用户。
+ >
+ > 为防止出现这种情况，用户代理在使用 `local()` 时可以忽略用户安装的字体。
- `<font-face-name>`
+ - : 使用 `local()` 组件值指定本地安装的字体的全名或 postscript 名称，该名称可在较大的字体系列中唯一标识单个字体。该名称可以选择用引号括起来。字体名称[不区分大小写](https://drafts.csswg.org/css-fonts-3/#font-family-casing)。
+
+> **备注：** {{domxref("Local Font Access API", "本地字体访问 API","", "nocode")}} 可用于访问用户本地安装的字体数据，其中包括名称、样式和家族等高级细节，以及底层字体文件的原始字节。
+
+## 描述
+
+该描述符的值是一个以逗号分隔的外部引用或本地安装的字体名称优先级列表，其中每个资源都使用 `url()` 或 `local()` 指定。需要使用字体时，{{glossary("user agent", "用户代理")}}会遍历列出的引用集，并使用第一个能成功激活的引用。包含无效数据的字体或未找到的本地字体将被忽略，用户代理将加载列表中的下一个字体。
+
+如果设置了多个 `src` 描述符，则只应用最后声明的能够加载资源的规则。如果最后一个 `src` 描述符可以加载资源，但不包括 `local()` 字体，即使设备上有可用的字体，浏览器也可能会下载外部字体文件，而忽略本地版本。
+
+> **备注：** 浏览器认为无效的描述符中的值将被忽略。某些浏览器会在任何一项无效时忽略整个描述符，即使只有一项无效。这可能会影响回退的设计。更多信息，请参见[浏览器兼容性](#浏览器兼容性)。
+
+与 CSS 中的其他 URL 一样，URL 也可以是相对的，在这种情况下，URL 会相对于包含 `@font-face` 规则的样式表的位置进行解析。对于 SVG 字体，URL 指向的是包含 SVG 字体定义的文档中的一个元素。如果省略了元素引用，则隐含了对第一个定义字体的引用。同样，可包含多种字体的字体容器格式只加载给定 `@font-face` 规则中的一种字体。片段标识符用于指示加载哪种字体。如果容器格式缺乏已定义的片段标识符方案，则使用简单的从 1 开始的索引方案（例如，“font-collection#1”表示第一种字体，“font-collection#2”表示第二种字体，等等）。
+
+如果字体文件是多个字体的容器，则会包含一个片段标识符，用于指示应使用的子字体，如下所示：
+
+```css
+/* WhichFont 是字体文件中字体的 PostScript 名称 */
+src: url(collection.otc#WhichFont);
+/* WhichFont 是 SVG 字体文件中字体的元素 ID */
+src: url(fonts.svg#WhichFont);
+```
+
+### 字体格式
+
+下表列出了有效的字体关键字及其对应的字体格式。要检查 CSS 中的字体格式是否受浏览器支持，请使用 {{cssxref("@supports", "@supports")}} 规则。
+
+| 关键字 | 字体格式 | 常见扩展名 |
+| ------------------- | ------------------- | ----------- |
+| `collection` | OpenType Collection | .otc、.ttc |
+| `embedded-opentype` | Embedded OpenType | .eot |
+| `opentype` | OpenType | .otf、.ttf |
+| `svg` | SVG Font（已弃用） | .svg、.svgz |
+| `truetype` | TrueType | .ttf |
+| `woff` | WOFF 1.0 | .woff |
+| `woff2` | WOFF 2.0 | .woff2 |
+
+> **备注：**
+>
+> - `format(svg)` 表示 [SVG 字体](/zh-CN/docs/Web/SVG/Tutorial/SVG_fonts)，而 `tech(color-SVG)` 表示[带有 SVG 表的 OpenType 字体](https://learn.microsoft.com/en-us/typography/opentype/spec/svg)（也称为 OpenType-SVG 彩色字体），两者完全不同。
+> - 无论字体文件使用的是三次菱形曲线（在 CFF/CFF2 表中）还是二次菱形曲线（在字形表中），`opentype` 和 `truetype` 值都是相同的。
+
+旧的非规范化 `format()` 值有以下等效语法；出于向后兼容的考虑，以带引号的字符串形式提供：
+
+| 旧语法 | 等效语法 |
+| ------------------------------- | ----------------------------------- |
+| `format("woff2-variations")` | `format(woff2) tech(variations)` |
+| `format("woff-variations")` | `format(woff) tech(variations)` |
+| `format("opentype-variations")` | `format(opentype) tech(variations)` |
+| `format("truetype-variations")` | `format(truetype) tech(variations)` |
+
+### 字体技术
+
+下表列出了 `tech()` 描述符的有效值及其对应的字体技术。要在 CSS 中检查浏览器是否支持某种字体技术，请使用 {{cssxref("@supports", "@supports")}} @ 规则。
+
+| 关键字 | 描述 |
+| :------------------ | :-------------------------------------------------------------------- |
+| `color-cbdt` | 彩色位图数据表 |
+| `color-colrv0` | 通过 COLR 第 0 版表格显示多色字形 |
+| `color-colrv1` | 通过 COLR 第 1 版表格显示多色字形 |
+| `color-sbix` | 标准位图图形表 |
+| `color-svg` | SVG 多色表 |
+| `features-aat` | TrueType `morx` 和 `kerx` 表 |
+| `features-graphite` | 石墨特征，即 `Silf`、`Glat`、`Gloc`、`Feat` 和 `Sill` 表 |
+| `features-opentype` | OpenType `GSUB` 和 `GPOS` 表 |
+| `incremental` | 增量式字体加载 |
+| `palettes` | 字体调色板通过 `font-palette` 从字体的多种调色板中选择一种 |
+| `variations` | TrueType 和 OpenType 字体中的字体变化，用于控制字体轴、字重、字形等。 |
+
+## 形式定义
+
+{{cssinfo}}
+
+## 形式语法
+
+```plain
+<url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]? |
+local( <family-name> )
+
+<font-format> = [ <string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]
+
+<font-tech> = [ <font-features-tech> | <color-font-tech> | variations | palettes | incremental-patch | incremental-range | incremental-auto ]
+
+<font-features-tech> = [ features-opentype | features-aat | features-graphite ]
+
+<color-font-tech> = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]
+```
+
+## 示例
- - : Specifies the name of a locally-installed font face using the 
+### 使用 url() 和 local() 指定字体资源
- `local()`
+下面的示例展示了如何定义两个具有相同字体家族的 font face。字体家族命名为 `MainText`。第一个 font face 是普通字体，第二个 font face 是同一字体系列的粗体。
-  function, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes.
+```css
+/* 定义常规 font face */
+@font-face {
+ font-family: MainText;
+ src: local(Futura-Medium),
+ url('FuturaMedium.woff') format("woff"),
+ url('FuturaMedium.otf') format("opentype");
+ format("opentype");
+}
+
+/* 为同一家族定义不同的粗体 font face */
+@font-face {
+ font-family: MainText;
+ src: local(Gill Sans Bold), /* 字体全名 */
+ local(GillSans-Bold), /* postscript 名称 */
+ url('GillSansBold.woff') format("woff"),
+ url('GillSansBold.otf') format("opentype"),
+ url("GillSansBold.svg#MyFontBold"); /* 通过 id 引用 SVG 字体片段 */
+ font-weight: bold;
+}
+
+/* 使用常规 font face */
+p {
+ font-family: MainText;
+}
+
+/* 继承了字体家族，但使用了粗体字 */
+p.bold {
+ font-weight: bold;
+}
+```
+
+### 使用 tech() 和 format() 值指定字体资源
+
+下面的示例展示了如何使用 `tech()` 和 `format()` 值指定字体资源。使用 `tech()` 和 `format()` 值指定了使用 `color-colrv1` 技术和 `opentype` 格式的字体。如果用户代理支持彩色字体，则将激活彩色字体，并提供非彩色的 `opentype` 字体作为回退。
+
+```css
+@font-face {
+ font-family: "Trickster";
+ src:
+ url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
+ url("trickster-outline.otf") format(opentype);
+}
+
+/* 使用 font face */
+p {
+ font-family: "Trickster";
+}
+```
+
+### 为旧式浏览器指定回退
+
+浏览器应使用带有单个 `src` 描述符的 `@font-face`，该描述符列出了字体的可能来源。由于浏览器将使用其能够加载的第一个资源，因此应按照偏好的使用顺序指定项目。
+
+一般来说，这意味着本地文件应出现在远程文件之前，而带有 `format()` 或 `tech()` 约束的资源应出现在不带这些约束的资源之前（否则总是会选择约束较少的版本）。例如：
-### Formal syntax
+```css
+@font-face {
+ font-family: "MgOpenModernaBold";
+ src:
+ url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
+ url("MgOpenModernaBold.otf") format(opentype);
+}
+```
-{{csssyntax}}
+不支持上述 `tech()` 的浏览器应忽略第一项，并尝试加载第二项资源。
-## Examples
+有些浏览器尚不能够[忽略无效项](#浏览器兼容性)，如果任何值无效，整个 `src` 描述符都会失效。如果使用这些浏览器，可以指定多个 `src` 描述符作为后备。请注意，多个 `src` 描述符会以相反的顺序进行尝试，因此最后我们会得到包含所有项目的正常描述符。
```css
@font-face {
- font-family: examplefont;
+ font-family: "MgOpenModernaBold";
+ src: url("MgOpenModernaBold.otf") format(opentype);
+ src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);
src:
- local(Example Font),
- url("examplefont.woff") format("woff"),
- url("examplefont.otf") format("opentype");
+ url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
+ url("MgOpenModernaBold.otf") format(opentype);
}
```
-## Specifications
+### 检查用户代理是否支持某些字体
+
+下面的示例展示了如何使用 {{cssxref("@supports")}} 规则检查用户代理是否支持某种字体技术。如果用户代理支持 `color-COLRv1` 技术，就会应用 `@supports` 中的 CSS 块。
+
+```css
+@supports font-tech(color-COLRv1) {
+ @font-face {
+ font-family: "Trickster";
+ src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);
+ }
+
+ .colored_text {
+ font-family: "Trickster";
+ }
+}
+```
+
+## 规范
{{Specifications}}
-## Browser compatibility
+## 浏览器兼容性
{{Compat}}
+
+## 参见
+
+- {{cssxref("@font-face", "@font-face")}}
+- {{cssxref("@supports", "@supports")}}
+- {{cssxref("@font-face/font-display", "font-display")}}
+- {{cssxref("@font-face/font-family", "font-family")}}
+- {{cssxref("@font-face/font-stretch", "font-stretch")}}
+- {{cssxref("@font-face/font-style", "font-style")}}
+- {{cssxref("@font-face/font-weight", "font-weight")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range")}}
diff --git a/files/zh-cn/web/css/@media/prefers-contrast/index.md b/files/zh-cn/web/css/@media/prefers-contrast/index.md
new file mode 100644
index 00000000000000..d48885ec5dd404
--- /dev/null
+++ b/files/zh-cn/web/css/@media/prefers-contrast/index.md
@@ -0,0 +1,67 @@
+---
+title: prefers-contrast
+slug: Web/CSS/@media/prefers-contrast
+l10n:
+ sourceCommit: eb20a5272772231852864ddc71b9710de0fa1d4f
+---
+
+{{CSSRef}}
+
+**`prefers-contrast`** [CSS](/zh-CN/docs/Web/CSS) [媒体特性](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries#媒体特性)用于检测用户是否要求以更低或更高的对比度来呈现 Web 内容。
+
+## 语法
+
+- `no-preference`
+ - : 表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 `false`。
+- `more`
+ - : 表示用户已告知系统他们选择使用对比度更高的界面。
+- `less`
+ - : 表示用户已告知系统他们选择使用对比度更低的界面。
+- `custom`
+ - : 表示用户已告知系统他们选择使用特定的颜色组合，这些颜色的对比度既不匹配 `more` 也不匹配 `less`。此值将与用户指定的调色板 [`forced-colors: active`](/zh-CN/docs/Web/CSS/@media/forced-colors) 相匹配。
+
+## 用户偏好
+
+各种操作系统都支持此类偏好设置，用户代理可能会依赖操作系统提供的设置。
+
+## 示例
+
+这个例子默认情况下的对比度太低，令人感到不适。
+
+### HTML
+
+```html
+<div class="contrast">低对比度盒子</div>
+```
+
+### CSS
+
+```css
+.contrast {
+ width: 100px;
+ height: 100px;
+ outline: 2px dashed black;
+}
+
+@media (prefers-contrast: more) {
+ .contrast {
+ outline: 2px solid black;
+ }
+}
+```
+
+### 结果
+
+{{EmbedLiveSample("示例")}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [forced-colors](/zh-CN/docs/Web/CSS/@media/forced-colors) CSS 媒体查询
diff --git a/files/zh-cn/web/css/background-image/index.md b/files/zh-cn/web/css/background-image/index.md
index d59a1db8178444..1fd28a48179e0b 100644
--- a/files/zh-cn/web/css/background-image/index.md
+++ b/files/zh-cn/web/css/background-image/index.md
@@ -28,7 +28,8 @@ background-image: linear-gradient(
to bottom,
rgba(255, 255, 0, 0.5),
rgba(0, 0, 255, 0.5)
- ), url("catfront.png");
+ ),
+ url("catfront.png");
```
### 取值
diff --git a/files/zh-cn/web/css/basic-shape/inset/index.md b/files/zh-cn/web/css/basic-shape/inset/index.md
new file mode 100644
index 00000000000000..30abc6e9c8e092
--- /dev/null
+++ b/files/zh-cn/web/css/basic-shape/inset/index.md
@@ -0,0 +1,51 @@
+---
+title: inset()
+slug: Web/CSS/basic-shape/inset
+l10n:
+ sourceCommit: 20315338453f387f8c1f6c20a07766f8f71e8032
+---
+
+{{CSSRef}}
+
+**`inset()`** [CSS](/zh-CN/docs/Web/CSS) 函数定义了一个矩形，其位于参考框的每一边内侧的指定的距离处。它是用于定义 {{cssxref("<basic-shape>")}} [数据类型](/zh-CN/docs/Web/CSS/CSS_Types)之一的基本形状函数。
+
+{{EmbedInteractiveExample("pages/css/function-inset.html")}}
+
+## 语法
+
+```css
+shape-outside: inset(20px 50px 10px 0 round 50px);
+```
+
+### 值
+
+- `<length-percentage>{1,4}`
+ - : 当提供了四个参数时，它们分别表示从参考框的上侧、右侧、下侧和左侧向内的偏移量，这些偏移量定义了内嵌矩形边缘的位置。这些参数遵循边距简写的语法，它允许你定义具有一个、两个或四个值的 inset。
+- `<border-radius>`
+ - : 可选的 [`<border-radius>`](/zh-CN/docs/Web/CSS/border-radius) 参数使用边框半径简写语法为内嵌矩形定义圆角。
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 基本 inset 示例
+
+在下面的示例中，我们使用了一个 `inset()` 形状来拉取内容覆盖浮动元素。更改偏移值以查看形状如何变化。
+
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 使用该数据类型的属性：{{cssxref("clip-path")}}、{{cssxref("shape-outside")}}
+- [CSS 形状](/zh-CN/docs/Web/CSS/CSS_shapes)模块
+- [基本形状指南](/zh-CN/docs/Web/CSS/CSS_shapes/Basic_shapes)
diff --git a/files/zh-cn/web/css/basic-shape/polygon/index.md b/files/zh-cn/web/css/basic-shape/polygon/index.md
new file mode 100644
index 00000000000000..3d54c12c534c7f
--- /dev/null
+++ b/files/zh-cn/web/css/basic-shape/polygon/index.md
@@ -0,0 +1,158 @@
+---
+title: polygon()
+slug: Web/CSS/basic-shape/polygon
+l10n:
+ sourceCommit: 9760ffbbd1720d09b7d36853edd421fe5447dbc4
+---
+
+{{CSSRef}}
+
+**`polygon()`** [CSS](/zh-CN/docs/Web/CSS) 函数是 {{cssxref("<basic-shape>")}} [数据类型](/zh-CN/docs/Web/CSS/CSS_Types)之一。它用于通过提供一个或多个坐标对（每一个坐标代表形状的一个顶点）来绘制[多边形](https://zh.wikipedia.org/wiki/多边形)。
+
+{{EmbedInteractiveExample("pages/css/function-polygon.html")}}
+
+## 语法
+
+```css-nolint
+
+/* 指定坐标列表 */
+/* polygon(<length-percentage> <length-percentage>, ... )*/
+polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)
+polygon(0px 0px, 200px 100px, 0px 200px)
+polygon(0% 0px, 100% 100px, 0px 100%)
+polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%)
+
+/* 指定填充规则和坐标列表 */
+/* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/
+polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
+polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)
+```
+
+`polygon()` 的参数用逗号和可选的空格分隔。第一个参数是一个可选的 [`<fill-rule>`](/zh-CN/docs/Web/SVG/Attribute/fill-rule) 值。其他参数是定义多边形的点。每个点是一对 x/y 坐标 {{cssxref("length-percentage")}} 值，用空格分隔，例如左/上角和右下角的“0 0”和“100% 100%”。
+
+> **备注：** SVG [`<polygon>`](/zh-CN/docs/Web/SVG/Element/polygon) 元素有单独的属性用于 [`fill-rule`](/zh-CN/docs/Web/SVG/Attribute/fill-rule) 和 [`points`](/zh-CN/docs/Web/SVG/Attribute/points)，而 `points` 在使用空格和逗号分隔时是灵活的。CSS `polygon()` 规则对分隔符严格执行。
+
+### 参数
+
+- [`<fill-rule>`](/zh-CN/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}}
+ - : 一个可选的值，可以是 `nonzero`（默认值，当省略时）或 `evenodd`，指定填充规则。
+- {{cssxref("length-percentage")}}
+ - : 每个多边形的顶点由一对 `<length-percentage>` 值表示，给出了相对于形状的[参考框](/zh-CN/docs/Web/CSS/CSS_shapes/Basic_shapes#参考框)的顶点的 x/y 坐标。
+
+### 返回值
+
+返回一个 {{cssxref("basic-shape")}} 值。
+
+## 描述
+
+通过指定其点的坐标，你可以使用 `polygon()` 函数创建几乎任何形状。定义点的顺序很重要，可能会导致不同的形状。`polygon()` 函数至少需要 3 个点，这将创建一个三角形，但没有上限。
+
+`polygon()` 函数接受逗号分隔的坐标或点作为其值。每个点由一对以空格分隔的 `x` 和 `y` 值表示，这些值指示多边形内的点的坐标。
+
+<code>polygon(x<sub>1</sub> y<sub>1</sub>, x<sub>2</sub> y<sub>2</sub>, x<sub>3</sub> y<sub>3</sub>, x<sub>4</sub> y<sub>4</sub>, x<sub>n</sub> y<sub>n</sub>)</code>
+
+给定上述内容，将容器的坐标映射为可视化：
+
+| 轴 | 点 1 | 点 2 | 点 3 | 点 4 | 点 n |
+| --- | ---- | ---- | ---- | ---- | ------------- |
+| x | 0% | 100% | 100% | 0% | x<sub>n</sub> |
+| y | 0% | 0% | 100% | 100% | y<sub>n</sub> |
+
+将这些坐标应用于使用 `polygon()` 函数的 CSS {{cssxref("clip-path")}} 属性：
+
+```css
+clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+```
+
+这将创建一个矩形形状，其大小与其父内容相同，通过指定其四个角的坐标：左上角（`0% 0%`）、右上角（`100% 0%`）、右下角（`100% 100%`）和左下角（`0% 100%`）。
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 创建一个三角形
+
+在此示例中，通过定义其三个点的坐标来形成一个三角形。
+
+#### HTML
+
+```html
+<div class="triangle"></div>
+```
+
+#### CSS
+
+```css
+.triangle {
+ width: 400px;
+ height: 400px;
+ background-color: magenta;
+ clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("创建一个三角形", '100%', 400)}}
+
+三角形的坐标是容器的右上角（`100% 0%`）、中心点（`50% 50%`）和右下角（`100% 100%`）。
+
+### 为 shape-outside 设置多边形
+
+在此示例中，使用 {{cssxref("shape-outside")}} 属性创建一个形状，使文本遵循它。
+
+```html
+<div class="box">
+ <div class="shape"></div>
+ <p>
+ 1782 年 11 月的一个夜晚，据说两兄弟坐在法国小镇 Annonay
+ 的冬季火炉旁，看着烟雾从壁炉的宽烟囱里升起。他们的名字叫史蒂芬和约瑟夫·蒙戈菲耶，他们是纸张制造商，以拥有思想深度和对所有科学知识和新发现的浓厚兴趣而闻名。在那之前的一晚——一个值得铭记的夜晚，正如后来所证明的——数亿人都看着他们火炉里升起的烟雾，却没有从中获得任何特别的灵感。
+ </p>
+</div>
+```
+
+```css
+.box {
+ width: 250px;
+}
+
+.shape {
+ float: left;
+ shape-outside: polygon(
+ 0 5%,
+ 15% 12%,
+ 30% 15%,
+ 40% 26%,
+ 45% 35%,
+ 45% 45%,
+ 40% 55%,
+ 10% 90%,
+ 10% 98%,
+ 8% 100%,
+ 0 100%
+ );
+ width: 300px;
+ height: 320px;
+}
+
+p {
+ font-size: 0.9rem;
+}
+```
+
+{{EmbedLiveSample("为 shape-outside 设置多边形", '100%', 400)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 使用此数据类型的属性：{{cssxref("clip-path")}}、{{cssxref("shape-outside")}}
+- [基本形状指南](/zh-CN/docs/Web/CSS/CSS_shapes/Basic_shapes)
diff --git a/files/zh-cn/web/css/basic-shape/shape/index.md b/files/zh-cn/web/css/basic-shape/shape/index.md
new file mode 100644
index 00000000000000..70602abb0db444
--- /dev/null
+++ b/files/zh-cn/web/css/basic-shape/shape/index.md
@@ -0,0 +1,328 @@
+---
+title: shape()
+slug: Web/CSS/basic-shape/shape
+l10n:
+ sourceCommit: acc5072d1116cb02b67998e63de3d8b23e14e9ed
+---
+
+{{CSSRef}}
+
+**`shape()`** [CSS 函数](/zh-CN/docs/Web/CSS/CSS_Functions)用于定义 {{cssxref("clip-path")}} 和 {{cssxref("offset-path")}} 属性的形状。它结合了一个初始起点和一系列定义形状路径的形状命令。`shape()` 函数是 {{cssxref("<basic-shape>")}} 数据类型的成员。
+
+## 语法
+
+```css
+/* <fill-rule> */
+clip-path: shape(nonzero from 0 0, line to 10px 10px);
+
+/* <move-command>、<line-command> 和 close */
+offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close);
+
+/* <hvline-command> */
+offset-path: shape(from 10px 10px, hline by 50px, vline to 5rem);
+
+/* <curve-command> */
+offset-path: shape(from 10px 10px, curve to 80px 80px via 160px 1px 20% 16px);
+
+/* <smooth-command> */
+offset-path: shape(from 10px 10px, smooth to 100px 50pt);
+
+/* <arc-command> */
+offset-path: shape(
+ from 5% 0.5rem,
+ arc to 80px 1pt of 10% ccw large rotate 25deg
+);
+
+/* 使用 CSS 数学函数 */
+offset-path: shape(
+ from 5px -5%,
+ hline to 50px,
+ vline by calc(0% + 160px),
+ hline by 70.5px,
+ close,
+ vline by 60px
+);
+
+clip-path: shape(
+ nonzero from 10px 10px,
+ curve to 60px 20% via 40px 0,
+ smooth to 90px 0,
+ curve by -20px 60% via 10% 40px 20% 20px,
+ smooth by -40% -10px via -10px 70px
+);
+```
+
+### 参数
+
+- [`<fill-rule>`](/zh-CN/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}}
+
+ - : 指定了如何填充形状的重叠区域。可能的取值包括：
+
+ - `nonzero`：如果从某点绘制的射线穿过的左到右路径段多于右到左路径段，即导致非零计数，则该点被视为在形状内部。当省略 `<fill-rule>` 时，这是默认值。
+
+ - `evenodd`：如果从某点绘制的射线穿过的路径段数量为奇数，则该点被视为在形状内部。这意味着每当射线进入形状时，它都没有相等数量的退出，表明缺少对应的退出而具有奇数个条目。
+
+ > **警告：** `<fill-rule>` 不受 {{cssxref("offset-path")}} 支持，使用它会使该属性无效。
+
+- `from <coordinate-pair>`
+
+ - : 将第一个 `<shape-command>` 的起始点定义为一对坐标，这些坐标是从[参考框](/zh-CN/docs/Web/CSS/CSS_shapes/Basic_shapes#参考框)的左上角测量得到的。这些坐标被指定为用空格分隔的 `<x> <y>` {{cssxref("<length-percentage>")}} 值，分别表示左偏移和上偏移。百分比值相对于元素的参考框的宽度和高度计算。在此参数后添加逗号。
+
+- `<shape-command>`
+
+ - : 指定一个或多个逗号分隔的命令列表，用于定义形状，其语法类似于 [SVG 路径命令](/zh-CN/docs/Web/SVG/Attribute/d#路径命令)。命令包括 `<move-command>`、`<line-command>`、`<hv-line-command>`、`<curve-command>`、`<smooth-command>`、`<arc-command>` 和 `close`。每个命令的起始点是前一个命令的结束点，形状的第一个点由 [`from <coordinate-pair>`](#from_coordinate-pair) 参数定义。
+
+ 大多数形状命令的语法是一个关键字，提供一个指令，如 `move` 或 `line`，后跟 `by` 或 `to` 关键字，以及一组坐标。
+
+ `by`：表示 `<coordinate-pair>` 相对于命令的起始点的位置（“相对”值）。
+
+ `to`：表示 `<coordinate-pair>` 相对于参考框的左上角的位置（“绝对”值）。
+
+ > **备注：** 如果 `<coordinate-pair>` 中的坐标以百分比形式指定，则该值相对于参考框的宽度或高度进行计算。
+
+ 可以指定 `<move-command>`、`<line-command>`、`<hv-line-command>`、`<curve-command>`、`<smooth-command>`、`<arc-command>` 和 `close` 作为 `<shape-command>`。
+
+ `<move-command>`：指定为 `move [by | to] <coordinate-pair>`。此命令将 [MoveTo 路径命令](/zh-CN/docs/Web/SVG/Attribute/d#moveto_路径命令)添加到形状命令列表中。它不绘制任何内容。相反，它指定了下一个命令的起始位置。`by` 或 `to` 关键字分别指定 `<coordinate-pair>` 点是“相对”还是“绝对”。如果 `<move-command>` 跟随 `close` 命令，则它标识了下一个形状或子路径的起始点。
+
+ `<line-command>`：指定为 `line [by | to] <coordinate-pair>`。此命令将 [LineTo 路径命令](/zh-CN/docs/Web/SVG/Attribute/d#lineto_路径命令)添加到形状命令列表中。它从命令的起始点直线绘制到其结束点。`by` 或 `to` 关键字指定由 `<coordinate-pair>` 分别指定的结束点是“相对”还是“绝对”。
+
+ `<hv-line-command>`：指定为 `[hline | vline] [by | to] <length-percentage>`。此命令将水平（`hline`）或垂直（`vline`）[LineTo 命令](/zh-CN/docs/Web/SVG/Attribute/d#lineto_路径命令)添加到形状命令列表中。使用 `hline`，从命令的起始点绘制水平线到由 `<length-percentage>` 定义的 `x` 位置的 `to` 或 `by`。使用 `vline`，从命令的起始点绘制垂直线到由 `<length-percentage>` 定义的 `y` 位置的 `to` 或 `by`。`by` 或 `to` 关键字分别确定了“相对”或“绝对”结束点。此命令相当于 `<line-command>`，其中一个坐标值由单个 `<length-percentage>` 设置，另一个坐标值与命令开始时的保持一致。
+
+ `<curve-command>`：指定为 `curve [by | to] <coordinate-pair> via <coordinate-pair> [<coordinate-pair>]`。此命令将一个[贝塞尔曲线命令](/zh-CN/docs/Web/SVG/Attribute/d#三次贝塞尔曲线)添加到形状命令列表中。`by` 或 `to` 关键字确定由第一个 `<coordinate-pair>` 指定的曲线的结束点是“相对”还是“绝对”。`via` 关键字指定贝塞尔曲线的控制点。
+
+ - 如果只提供一个 `<coordinate-pair>`，该命令会绘制一条[二次贝塞尔曲线](/zh-CN/docs/Web/SVG/Attribute/d#二次贝塞尔曲线)，它由三个点（起点、控制点和终点）定义。
+ - 如果提供两个 `<coordinate-pair>` 值，该命令会绘制一条三次贝塞尔曲线，它由四个点（起点、两个控制点和终点）定义。
+
+ `<smooth-command>`：指定为 `smooth [by | to] <coordinate-pair> [via <coordinate-pair>]`。此命令将一个平滑的[贝塞尔曲线命令](/zh-CN/docs/Web/SVG/Attribute/d#三次贝塞尔曲线)添加到形状命令列表中。`by` 或 `to` 关键字确定由第一个 `<coordinate-pair>` 指定的曲线的结束点是“相对“还是”绝对“。
+
+ - 如果省略 `via <coordinate-pair>`，该命令会绘制一条平滑的二次贝塞尔曲线，该曲线使用前一个控制点和当前终点来定义。
+ - 如果包含可选的 `via` 关键字，则通过 `<coordinate-pair>` 指定曲线的控制点，绘制一条平滑的三次贝塞尔曲线，该曲线由前一个控制点、当前控制点和当前终点定义。
+
+ 平滑曲线确保形状的连续过渡，而二次曲线则不然。平滑的二次曲线使用单个控制点来保持无缝过渡，而平滑的三次曲线使用两个控制点提供更精细的过渡。
+
+ `<arc-command>`：指定为 `arc [by | to] <coordinate-pair> of <length-percentage> [<length-percentage>] [<arc-sweep> | <arc-size> | rotate <angle>]`。此命令将一个[椭圆曲线命令](/zh-CN/docs/Web/SVG/Attribute/d#椭圆曲线)添加到形状命令列表中。它在起始点和结束点之间绘制椭圆弧。`by` 或 `to` 关键字确定由第一个 `<coordinate-pair>` 指定的曲线的结束点是“相对”还是“绝对”。
+
+ 椭圆弧曲线命令定义了两个可能的椭圆，这两个椭圆都与起始点和结束点相交，并且每个椭圆都可以顺时针或逆时针追踪，从而根据弧的大小、方向和角度得到四个可能的弧。`of` 关键字指定从中获取弧的椭圆的大小。第一个 `<length-percentage>` 提供椭圆的水平半径，第二个提供垂直半径。如果只提供一个 `<length-percentage>`，则该值用于两个半径（圆的半径）。
+
+ 以下参数有助于确定使用哪个弧：
+
+ - `<arc-sweep>`：指示所需的弧是否是顺时针（`cw`）或逆时针（`ccw`）围绕椭圆追踪的。如果省略，这默认为 `ccw`。
+ - `<arc-size>`：指示所需的弧是否是两个弧中较大的一个（`large`）或较小的一个（`small`）。如果省略，这默认为 `small`。
+ - `<angle>`：指定椭圆相对于 x 轴旋转的角度，单位为度。正角度将椭圆顺时针旋转，负角度将其逆时针旋转。如果省略，这默认为 `0deg`。
+
+ 特殊情况处理如下：
+
+ - 如果只提供一个 `<length-percentage>`，则该值用于水平和垂直半径，从而有效地创建一个圆。在这种情况下，`<arc-size>` 和 `<angle>` 没有影响。
+ - 如果任一半径为零，则该命令等同于到终点的 `<line-command>`。
+ - 如果任一半径为负，则使用其绝对值。
+ - 如果水平和垂直半径不能描述一个足够大的椭圆来同时与起点和终点相交（在通过指定的 `<angle>` 旋转后），则半径会被均匀放大，直到椭圆刚好足够大以与两点相交。
+ - 如果弧的起点和终点恰好位于椭圆的两侧，则只有一个可能的椭圆和两个可能的弧。在这种情况下，`<arc-sweep>` 指定选择的弧，而 `<arc-size>` 没有影响。
+
+ `close`：将一个 [ClosePath 命令](/zh-CN/docs/Web/SVG/Attribute/d#closepath)添加到形状命令列表中，从当前位置（最后一个命令的终点）到在 `from <coordinate-pair>` 参数中定义的路径的第一个点绘制一条直线。要关闭形状而不绘制直线，请在关闭命令之前包含一个带有起始坐标的 `<move-command>`。如果 `close` 命令后立即跟随一个 `<move-command>`，则它定义了下一个形状或子路径的起点。
+
+## 描述
+
+`shape()` 函数允许你定义复杂的形状。它在几个方面类似于 {{cssxref("basic-shape/path","path()")}} 形状函数：
+
+- `shape()` 函数中的 `<fill-rule>` 参数的工作方式与 `path()` 函数中的相同。
+- `shape()` 函数要求指定一个或多个 `<shape-command>`，其中每个命令使用底层的[路径命令](/zh-CN/docs/Web/SVG/Attribute/d#路径命令)，例如 [MoveTo](/zh-CN/docs/Web/SVG/Attribute/d#moveto_路径命令)、[LineTo](/zh-CN/docs/Web/SVG/Attribute/d#lineto_路径命令) 和 [ClosePath](/zh-CN/docs/Web/SVG/Attribute/d#closepath)。
+
+然而，与使用 `path()` 相比，`shape()` 提供了几个优点：
+
+- `shape()` 使用标准的 CSS 语法，使得在样式表中直接创建和修改形状更加容易。相比之下，`path()` 使用 [SVG 路径](/zh-CN/docs/Web/SVG/Element/path)语法，对于不熟悉 SVG 的用户来说可能不太直观。
+- `shape()` 支持各种 CSS 单位，包括百分比、`rem` 和 `em`。相反，`path()` 将形状定义为单个字符串，并将单位限制为 `px`。
+- `shape()` 还允许使用 CSS 数学函数，例如 {{cssxref("calc")}}、{{cssxref("max")}} 和 {{cssxref("abs")}}，在定义形状时提供了更多的灵活性。
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 使用 `shape()` 定义路径
+
+该示例演示了如何在 {{cssxref("offset-path")}} 属性中使用 `shape()` 函数来定义元素可以跟随的路径形状。
+
+第一个形状 `shape1` 遵循由 `curve to` 命令定义的三次贝塞尔曲线路径。接下来，`close` 命令从曲线的终点画一条直线回到 `from` 命令中定义的初始点。最后，`shape1` 移动到新位置 `0px 150px`，然后沿着一条水平线继续前进。
+
+第二个形状 `shape2` 最初沿着一条水平线移动，然后返回到起始位置 `50px 90px`。接着，它沿着一条垂直线移动，最后通过 `close` 命令回到初始点关闭路径。
+
+两个形状都从它们的原始颜色开始，并在 `move` 动画结束时逐渐过渡到 `hotpink`。随着动画重新开始，它们的颜色会恢复到初始状态。这个循环的颜色变化为你提供了一个关于动画进程和重新开始的视觉提示。
+
+```html hidden
+<div class="container">
+ 使用 <code><curve-command></code>
+ <div class="shape shape1">>></div>
+</div>
+
+<div class="container">
+ 使用 <code><move-command></code> 和
+ <code><hvline-command></code>
+ <div class="shape shape2">>></div>
+</div>
+```
+
+```css hidden
+body {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+}
+
+.container {
+ position: relative;
+ display: inline-block;
+ width: 250px;
+ height: 250px;
+ border: 2px dotted green;
+ margin: 20px;
+}
+
+@supports not (offset-path: shape(from 0 0, move to 0 0)) {
+ .container {
+ display: none;
+ }
+ body::after {
+ content: "你的浏览器尚不支持 `shape()` 函数。";
+ }
+}
+```
+
+```css
+.shape {
+ width: 50px;
+ height: 50px;
+ background: #2bc4a2;
+ position: absolute;
+ text-align: center;
+ line-height: 50px;
+ animation: move 6s infinite linear;
+}
+
+.shape1 {
+ offset-path: shape(
+ from 30% 60px,
+ curve to 180px 180px via 90px 190px,
+ close,
+ move by 0px 150px,
+ hline by 40%
+ );
+}
+
+.shape2 {
+ offset-path: shape(
+ from 50px 90px,
+ hline to 8em,
+ move to 50px 90px,
+ vline by 20%,
+ close
+ );
+}
+
+@keyframes move {
+ 0% {
+ offset-distance: 0%;
+ }
+ 100% {
+ offset-distance: 100%;
+ background-color: hotpink;
+ }
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample('使用 shape() 来定义路径', '100%', 300)}}
+
+### 使用 `shape()` 定义元素的可见部分
+
+该例子演示了如何在 {{cssxref("clip-path")}} 属性中使用 `shape()` 函数来为剪切区域创建不同的形状。第一个形状（`shape1`）使用由直线定义的三角形。第二个形状（`shape2`）包含曲线和平滑过渡；它还展示了在 `close` 命令之后使用 `<move-command>`，从而在剪切区域中添加矩形形状。
+
+```html hidden
+<div class="container">
+ <div class="shape shape1"></div>
+</div>
+
+<div class="container">
+ <div class="shape shape2"></div>
+</div>
+```
+
+```css hidden
+body {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+}
+
+.container {
+ position: relative;
+ display: inline-block;
+ width: 200px;
+ height: 200px;
+ margin: 20px;
+ background-color: lightgray;
+}
+
+@supports not (clip-path: shape(from 0 0, move to 0 0)) {
+ .container {
+ display: none;
+ }
+ body::after {
+ content: "你的浏览器尚不支持 `shape()` 函数。";
+ }
+}
+```
+
+```css
+.shape {
+ width: 100%;
+ height: 100%;
+ background: #2bc4a2;
+ position: absolute;
+ text-align: center;
+ line-height: 50px;
+}
+
+/* 三角形剪切区域 */
+.shape1 {
+ clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
+}
+
+/* 包含曲线和平滑过渡以及一个矩形的剪切区域 */
+.shape2 {
+ clip-path: shape(
+ from 10px 10px,
+ curve to 60px 20% via 40px 0,
+ smooth to 90px 0,
+ curve by -20px 60% via 10% 40px 20% 20px,
+ smooth by -40% -10px via -10px 70px,
+ close,
+ move to 100px 100px,
+ hline by 50px,
+ vline by 50px,
+ hline by -50px,
+ close
+ );
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample('使用 shape() 函数来定义元素的可见部分', '100%', 300)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("clip-path")}}
+- {{cssxref("offset-path")}}
+- [CSS 形状](/zh-CN/docs/Web/CSS/CSS_shapes)模块
+- [形状概述](/zh-CN/docs/Web/CSS/CSS_shapes/Overview_of_shapes)指南
+- [基本形状](/zh-CN/docs/Web/CSS/CSS_shapes/Basic_shapes)指南
diff --git a/files/zh-cn/web/css/color_value/color-contrast/index.md b/files/zh-cn/web/css/color_value/color-contrast/index.md
index 3ab2bed2f5699b..ea0e6aacb09449 100644
--- a/files/zh-cn/web/css/color_value/color-contrast/index.md
+++ b/files/zh-cn/web/css/color_value/color-contrast/index.md
@@ -1,11 +1,13 @@
---
title: color-contrast()
slug: Web/CSS/color_value/color-contrast
+l10n:
+ sourceCommit: 8a22e494736dbe7cc8ba38127a0d928b9fe8e700
---
{{CSSRef}}{{SeeCompatTable}}
-**`color-contrast()`** 函数标记接收一个 {{cssxref("color_value","color")}} 值，并将其与其他的 {{cssxref("color_value","color")}} 值比较，从列表中选择最高对比度的颜色。
+**`color-contrast()`** 函数标记接收 {{cssxref("color_value","color")}} 值，并将其与其他的 {{cssxref("color_value","color")}} 值比较，从列表中选择最高对比度的颜色。
## 语法
@@ -37,3 +39,12 @@ color-contrast(#008080 vs olive, var(--myColor), #d2691e)
## 浏览器兼容性
{{Compat}}
+
+## 参见
+
+- {{cssxref("color_value", "<color>")}} 数据类型
+- [CSS 颜色](/zh-CN/docs/Web/CSS/CSS_colors)模块
+- [`prefers-contrast`](/zh-CN/docs/Web/CSS/@media/prefers-contrast) 和 [`prefers-color-scheme`](/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) {{cssxref("@media")}} 特性
+- [`contrast()`](/zh-CN/docs/Web/CSS/filter-function/contrast)
+- [WCAG：色彩对比](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)
+- [CSS 自定义属性](/zh-CN/docs/Web/CSS/--*)和 {{cssxref("var")}}
diff --git a/files/zh-cn/web/css/counter/index.md b/files/zh-cn/web/css/counter/index.md
index 74e00e5d4bfc81..6b704b83d6a19a 100644
--- a/files/zh-cn/web/css/counter/index.md
+++ b/files/zh-cn/web/css/counter/index.md
@@ -97,11 +97,8 @@ li {
counter-increment: count;
}
li::after {
- content: "[" counter(count, decimal-leading-zero) "] == [" counter(
- count,
- lower-alpha
- )
- "]";
+ content: "[" counter(count, decimal-leading-zero) "] == ["
+ counter(count, lower-alpha) "]";
}
```
diff --git a/files/zh-cn/web/css/counters/index.md b/files/zh-cn/web/css/counters/index.md
index 9fdbe0fef89db5..f59f5eb7cac57a 100644
--- a/files/zh-cn/web/css/counters/index.md
+++ b/files/zh-cn/web/css/counters/index.md
@@ -89,11 +89,8 @@ li::marker {
content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
- content: counters(listCounter, ".") " == " counters(
- listCounter,
- ".",
- lower-roman
- );
+ content: counters(listCounter, ".") " == "
+ counters(listCounter, ".", lower-roman);
}
```
@@ -144,11 +141,8 @@ li::marker {
content: counters(count, ".", upper-alpha) ") ";
}
li::before {
- content: counters(count, ".", decimal-leading-zero) " == " counters(
- count,
- ".",
- lower-alpha
- );
+ content: counters(count, ".", decimal-leading-zero) " == "
+ counters(count, ".", lower-alpha);
}
```
diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 1334deee94a7b3..e5ff7c98558f32 100644
--- a/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -37,7 +37,8 @@ slug: Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
.multi-bg-example {
width: 100%;
height: 400px;
- background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+ background-image: url(firefox.png), url(bubbles.png),
+ linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
diff --git a/files/zh-cn/web/css/css_images/using_css_gradients/index.md b/files/zh-cn/web/css/css_images/using_css_gradients/index.md
index d1532d49f15c11..df3ef55e441ce5 100644
--- a/files/zh-cn/web/css/css_images/using_css_gradients/index.md
+++ b/files/zh-cn/web/css/css_images/using_css_gradients/index.md
@@ -354,7 +354,8 @@ div {
217deg,
rgba(255, 0, 0, 0.8),
rgba(255, 0, 0, 0) 70.71%
- ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+ ),
+ linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}
```
@@ -609,7 +610,8 @@ div {
circle at 93.3% 75%,
rgba(0, 255, 0, 0.5),
rgba(0, 255, 0, 0) 70.71%
- ) beige;
+ )
+ beige;
border-radius: 50%;
}
```
@@ -757,7 +759,8 @@ div {
rgba(75, 0, 130, 0.5) 240px,
rgba(238, 130, 238, 0.5) 280px,
rgba(255, 0, 0, 0.5) 300px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-190deg,
rgba(255, 0, 0, 0.5) 30px,
rgba(255, 153, 0, 0.5) 60px,
@@ -767,8 +770,18 @@ div {
rgba(75, 0, 130, 0.5) 180px,
rgba(238, 130, 238, 0.5) 210px,
rgba(255, 0, 0, 0.5) 230px
- ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
- 200px, blue 250px, indigo 300px, violet 350px, red 370px);
+ ),
+ repeating-linear-gradient(
+ 23deg,
+ red 50px,
+ orange 100px,
+ yellow 150px,
+ green 200px,
+ blue 250px,
+ indigo 300px,
+ violet 350px,
+ red 370px
+ );
}
```
@@ -805,7 +818,8 @@ div {
transparent 116px,
rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
0deg,
transparent,
transparent 50px,
@@ -819,18 +833,21 @@ div {
transparent 116px,
rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
rgba(143, 77, 63, 0.25) 5px,
rgba(143, 77, 63, 0.25) 10px
- ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
- 143,
- 77,
- 63,
- 0.25
- ) 5px, rgba(143, 77, 63, 0.25) 10px);
+ ),
+ repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 5px,
+ rgba(143, 77, 63, 0.25) 5px,
+ rgba(143, 77, 63, 0.25) 10px
+ );
background: repeating-linear-gradient(
90deg,
@@ -840,7 +857,8 @@ div {
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
0deg,
transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
@@ -848,16 +866,17 @@ div {
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px
- ), repeating-linear-gradient(
+ ),
+ repeating-linear-gradient(
-45deg,
transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px
- ), repeating-linear-gradient(45deg, transparent 0 5px, rgba(
- 143,
- 77,
- 63,
- 0.25
- ) 5px 10px);
+ ),
+ repeating-linear-gradient(
+ 45deg,
+ transparent 0 5px,
+ rgba(143, 77, 63, 0.25) 5px 10px
+ );
}
```
@@ -913,14 +932,16 @@ div {
rgba(0, 0, 0, 0.5) 15px,
rgba(255, 255, 255, 0.5) 15px,
rgba(255, 255, 255, 0.5) 30px
- ) top left no-repeat,
+ )
+ top left no-repeat,
repeating-radial-gradient(
ellipse at 20% 50%,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5) 10px,
rgba(255, 255, 255, 0.5) 10px,
rgba(255, 255, 255, 0.5) 20px
- ) top left no-repeat yellow;
+ )
+ top left no-repeat yellow;
background-size:
200px 200px,
150px 150px;
diff --git a/files/zh-cn/web/css/env/index.md b/files/zh-cn/web/css/env/index.md
index d1407890fc2563..2d8fa7aab893c9 100644
--- a/files/zh-cn/web/css/env/index.md
+++ b/files/zh-cn/web/css/env/index.md
@@ -13,10 +13,8 @@ slug: Web/CSS/env
```css
body {
- padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
- safe-area-inset-bottom,
- 20px
- ) env(safe-area-inset-left, 20px);
+ padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+ env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}
```
@@ -69,10 +67,8 @@ env(safe-area-inset-left, 1.4rem);
p {
width: 300px;
border: 2px solid red;
- padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
- safe-area-inset-bottom,
- 50px
- ) env(SAFE-AREA-INSET-LEFT, 50px);
+ padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
+ env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
}
```
diff --git a/files/zh-cn/web/css/filter/index.md b/files/zh-cn/web/css/filter/index.md
index 7b3e446d3866d5..405b1fe92d1578 100644
--- a/files/zh-cn/web/css/filter/index.md
+++ b/files/zh-cn/web/css/filter/index.md
@@ -194,8 +194,8 @@ img:nth-of-type(2) {
```css
#MDN-logo {
border: 1px solid blue;
- filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
- red);
+ filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
+ drop-shadow(5px 5px 0 red);
}
```
diff --git a/files/zh-cn/web/css/forced-color-adjust/index.md b/files/zh-cn/web/css/forced-color-adjust/index.md
new file mode 100644
index 00000000000000..d88baca06799ef
--- /dev/null
+++ b/files/zh-cn/web/css/forced-color-adjust/index.md
@@ -0,0 +1,104 @@
+---
+title: forced-color-adjust
+slug: Web/CSS/forced-color-adjust
+l10n:
+ sourceCommit: 5f13cbe7517ce96deeb521d4c8e6923266a22913
+---
+
+{{CSSRef}}
+
+**`forced-color-adjust`** CSS 属性允许用户将某些元素从强制颜色模式中移除，这些值的控制权将交还给 CSS。
+
+## 语法
+
+```css
+forced-color-adjust: auto;
+forced-color-adjust: none;
+
+/* 全局值 */
+forced-color-adjust: inherit;
+forced-color-adjust: initial;
+forced-color-adjust: revert;
+forced-color-adjust: revert-layer;
+forced-color-adjust: unset;
+```
+
+`forced-color-adjust` 属性的值必须是以下关键字之一。
+
+### 值
+
+- `auto`
+ - : 在强制颜色模式下，元素的颜色由{{Glossary("user agent","用户代理")}}调整。这是默认值。
+- `none`
+ - : 在强制颜色模式下，{{Glossary("user agent","用户代理")}}不会自动调整元素的颜色。
+
+## 使用说明
+
+此属性应仅用于进行支持用户颜色和对比度需求的更改。例如，如果你发现{{Glossary("user agent","用户代理")}}所做的颜色优化在高对比度或暗黑模式下体验不佳，可以使用此属性调整该模式下的结果，以提供更好的体验。**使用此属性时不应忽视用户的选择**。
+
+## 形式定义
+
+{{cssinfo}}
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 保留颜色
+
+在下面的示例中，第一个盒子将使用用户设置的颜色方案。例如，在 Windows 高对比度模式黑色主题中，它将使用黑色背景和白色文本。第二个盒子将保留在 `.box` 类上设置的网站颜色。
+
+通过使用 [`forced-colors`](/zh-CN/docs/Web/CSS/@media/forced-colors) 媒体特性，你可以在使用 `forced-color-adjust` 属性的同时添加任何其他针对强制颜色模式的优化。
+
+#### CSS
+
+```css
+.box {
+ border: 5px solid grey;
+ background-color: #ccc;
+ width: 300px;
+ margin: 20px;
+ padding: 10px;
+}
+
+@media (forced-colors: active) {
+ .forced {
+ forced-color-adjust: none;
+ }
+}
+```
+
+#### HTML
+
+```html
+<div class="box">
+ <p>This is a box which should use your color preferences.</p>
+</div>
+
+<div class="box forced">
+ <p>This is a box which should stay the colors set by the site.</p>
+</div>
+```
+
+#### 结果
+
+{{EmbedLiveSample("保留颜色", 640, 300)}}
+
+下面的截图显示了 Windows 高对比度模式下的图像：
+
+
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [为 Windows 高对比度模式设置样式，并采用强制色彩标准。](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/)
+- {{cssxref("print-color-adjust")}}
diff --git a/files/zh-cn/web/css/gradient/conic-gradient/index.md b/files/zh-cn/web/css/gradient/conic-gradient/index.md
index 63d0fcbae7db24..155a30c68f8b6a 100644
--- a/files/zh-cn/web/css/gradient/conic-gradient/index.md
+++ b/files/zh-cn/web/css/gradient/conic-gradient/index.md
@@ -203,7 +203,8 @@ div {
#000 0.25turn 0.5turn,
#fff 0.5turn 0.75turn,
#000 0.75turn
- ) top left / 25% 25% repeat;
+ )
+ top left / 25% 25% repeat;
border: 1px solid;
}
```
diff --git a/files/zh-cn/web/css/grid-auto-columns/index.md b/files/zh-cn/web/css/grid-auto-columns/index.md
index 506db08d71d504..ec8b2f1f99ff9a 100644
--- a/files/zh-cn/web/css/grid-auto-columns/index.md
+++ b/files/zh-cn/web/css/grid-auto-columns/index.md
@@ -48,7 +48,8 @@ grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
-grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
+ minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
/* Global values */
diff --git a/files/zh-cn/web/css/index.md b/files/zh-cn/web/css/index.md
index a5df9bb47da49c..4c843b2a2aa944 100644
--- a/files/zh-cn/web/css/index.md
+++ b/files/zh-cn/web/css/index.md
@@ -72,6 +72,5 @@ CSS 是**开放 Web** 的核心语言之一，并根据 [W3C 规范](https://www
## 参见
-- [CSS 演示](/zh-CN/docs/Web/Demos#css)：通过探索最新的 CSS 技术的应用实例，获得创造性的提升。
- CSS 常常应用的 Web 语言：[HTML](/zh-CN/docs/Web/HTML)、[SVG](/zh-CN/docs/Web/SVG)、[MathML](/zh-CN/docs/Web/MathML)、{{Glossary("XHTML")}} 以及 [XML](/zh-CN/docs/Web/XML/XML_introduction)。
- [StackOverflow 上 CSS 相关的问题](https://stackoverflow.com/questions/tagged/css)
diff --git a/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
new file mode 100644
index 00000000000000..bb736376525c07
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
@@ -0,0 +1,44 @@
+---
+title: 手册模版
+slug: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+l10n:
+ sourceCommit: d4a09bb1d0d466e0f31d1c15d1bc0d908b5d70ea
+---
+
+{{CSSRef}}
+
+> **备注：** 这是一个 CSS 手册页面的模板页面。创建新手册页面时，请将其用作原始模板。_斜体的内容是关于如何使用模板部分的信息。_
+
+_描述这个方案解决的问题或你正在演示的模式。_
+
+## 要求
+
+_列出这个模式需要包含的内容或需要解决的问题。_
+
+## 方案
+
+_将下面示例的路径更改为指向你的已合并示例。最后一个参数是实时示例的高度，可以根据需要进行更改。_
+
+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
+
+_将链接更改为指向你的已合并下载版本。_
+
+[下载示例](https://github.com/mdn/css-examples/blob/main/css-cookbook/center--download.html)
+
+## 作出决定
+
+_解释你在创建模式时的决定。为什么选择某种方法？如果你想在此添加一个额外的示例，例如带有回退支持的版本，请这样做。此部分有意保持宽松，因为模式从非常简单到更复杂的都有。_
+
+## 有用的回退或替代方法
+
+_如果有用于构建该方案的有用替代方法，或在必须支持不支持的浏览器时使用的回退方案，请在这里的各个部分中包含它们。_
+
+## 无障碍考虑
+
+_如果有任何关于无障碍的具体注意事项，请包含在内。如果与你的模式无关，可以省略此部分。_
+
+## 参见
+
+- _相关属性的链接：{{Cssxref("example-property")}}_
+- _展示如何在上下文中使用该属性的文章链接：“使用...文章”_
+- _非常好的外部链接。不要害怕使用外部链接，但它们应该是出色的，并且不仅仅提到一些细节。_
diff --git a/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.md
index 71f8b46db35020..80872ef6b6bd58 100644
--- a/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.md
+++ b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.md
@@ -1,83 +1,91 @@
---
-title: Contribute a recipe
+title: 贡献方案
slug: Web/CSS/Layout_cookbook/Contribute_a_recipe
+l10n:
+ sourceCommit: 0ea79e9c21f720ad71d1a0e8a524e13bd7af6895
---
{{CSSRef}}
-如果你愿意为 Layout Cookbook 贡献示例文件，那么本页将通过阐释步骤指导你发布示例。
+如果你愿意为布局手册贡献示例，那么本页将通过阐释步骤指导你发布示例。
-## 好的 recipe 是怎样的？
+## 好的方案是怎样的？
-**任何有用的 web 设计模式的最简版本。**你 CSS 文件中的每一行代码都应该有助于演示该模式，省去无用的部分就是为了能让示例显得完美。这种想法就是，某个人既能将这种模式应用在网站中，又可以保持自己的风格。
+**任何有用的 web 设计模式的最简版本**。你 CSS 文件中的每一行代码都应该有助于演示该模式，省去无用的部分就是为了能让示例显得完美。这种想法就是，某个人既能将这种模式应用在网站中，又可以保持自己的风格。
-## 发布 recipe 的步骤
+一份方案包括以下内容：
-一份 recipe 包括以下内容：
+- 一个实时示例，存储在 [CSS 示例 GitHub 存储库](https://github.com/mdn/css-examples)之中。
+- 这份示例的可供下载版本，同样也存储在 CSS 示例仓库之中。
+- 在本站 [CSS 布局手册](/zh-CN/docs/Web/CSS/Layout_cookbook)中的页面应包含以下组成部分：
-1. 一个动态的示例，存储在 [CSS Examples GitHub repo](https://github.com/mdn/css-examples) 之上。
-2. 这份示例的可供下载版本，同样也存储在 CSS Examples repo 之上。
-3. 该网站的某个页面在 [CSS layout cookbook](/zh-CN/docs/Web/CSS/Layout_cookbook) 上应详细说明：
+ 1. 介绍
+ 2. 要求
+ 3. 方案
+ 4. 做出的选择
+ 5. 任何有用的反馈或供选择的方法（如果相关）
+ 6. 无障碍考虑
+ 7. 浏览器兼容性（仅对未被全面支持的 CSS 属性）
+ 8. 其他资源
- 1. 要求
- 2. recipe
- 3. 做出的选择
- 4. 任何有用的反馈或供选择的方法
- 5. 任何无障碍访问问题
- 6. 浏览器兼容性
- 7. 其他资源
+## 发布方案的步骤
-### 1. 建立自己的模式
+要创建一个方案并将其添加到 CSS 布局手册中，请按照以下步骤操作：
-在将示例转换为 recipe 之前，先将你的模式创建成为一个简单的 HTML 页面。想想看你要展示的是什么，并使这个想法尽可能简单。避免使用特殊的 CSS 约定（例如 BEM），因为并非每个人都熟悉这些约定，反而会使他们将事情做得看起来要比预期中的更复杂。
+1. [构建模式](#1._构建模式)
+2. [创建一个实时示例](#2._创建实时示例)
+3. [创建可下载版本](#3._创建可下载版本)
+4. [提交拉取请求](#4._提交拉取请求)
+5. [将内容添加到 MDN](#5._创建你的页面)
-确保 HTML 和 CSS 有效，并将其在一种以上的浏览器上进行测试。如果你使用的 CSS 属性并非广受支持，那也没关系！你可以在创建页面时包含浏览器支持信息。在某些情况下，创建示例的第二个版本可能会有帮助，其中包括回退支持。
+### 1. 构建模式
-### 2. 创建一个动态示例
+在将示例变成方案之前，首先要创建一个基础的 HTML 页面来展示你的模式。思考你想要演示的内容，并尽量保持简单。为类名使用描述性词语，如“container”或“item”。
-The live examples that you can see on cookbook pages and elsewhere on MDN allow visitors to play with the code and change relevant parts without being overwhelmed with all of the code needed. You recipe will be demonstrated by way of one or more examples.
+确保在多个浏览器、视口大小和设备上测试了 HTML 和 CSS。此外，还要确保任何 CSS 样式都遵循无障碍指南。虽然可以使用支持有限的 CSS 属性，但在创建页面时务必包含浏览器支持信息，特别是在浏览器兼容性部分。在某些情况下，创建一个带有回退支持的示例版本会有所帮助。
-Fork the [CSS Examples repo](https://github.com/mdn/css-examples) and then take a look in the `css-cookbook` folder. There is a [cookbook-template.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html) file you can copy as a starting point. Save this in the css-cookbook directory with a name that makes sense for your pattern. The template is commented to help you add the various parts to the right place.
+### 2. 创建实时示例
-The important parts of this are as follows.
+手册页面上的实时示例，例如[居中元素](/zh-CN/docs/Web/CSS/Layout_cookbook/Center_an_element)的示例，以及 MDN 上的其他示例，允许读者尝试代码并更改相关部分，而不会被所有代码淹没。你的方案将通过一个或多个示例进行演示。
-There is a stylesheet for styles for the editor panels, and some basic body styling, and a JavaScript file included for the editor functionality. Leave these files as they are.
+分叉 [CSS 示例仓库](https://github.com/mdn/css-examples)，然后查看 `css-cookbook` 文件夹。有一个 [cookbook-template.html](https://github.com/mdn/css-examples/blob/main/css-cookbook/cookbook-template.html) 文件。复制此文件并以此为起点。将其保存在 `css-cookbook` 目录中，并为你的模式选择一个有意义的名称。模板包含注释，指导你在适当的地方添加各个部分。
-There are two style blocks in the head. The first are for things that a visitor to the page does not need to change to play with the example. The second is for any of the items they might want to play with in the live example. We typically add all of our CSS from like example in the first block, then choose which sets of rules we need to move down to the second block. The rules in the second block should be those that are fundamental to the pattern, perhaps those where a user could make a change to a CSS value and see the pattern update.
+此模板的重要部分如下：
-You need to add the HTML for your component twice. First inside the section with a class of preview, then inside the textarea `playable-html`.
+- 有一个样式表用于编辑器面板，包含一些基本的主体样式和一个用于编辑器功能的 JavaScript 文件。请原样保留这些文件。
+- `<head>` 包含两个样式块。第一个样式块用于读者无需更改即可尝试示例的元素。第二个样式块包含读者可能想要更改的项目。我们通常将所有 CSS 添加到第一个块，然后选择要移动到第二个块的规则。第二个块中的规则应该是模式的基本规则，可能是那些读者可以更改 CSS 值并查看模式更新的规则。
+- 你需要在两个地方添加组件的 HTML：首先是在带有类 `preview` 的部分，然后是在带有类 `playable-html` 的 `<textarea>` 内。
+- 可编辑的 CSS 也必须从第二个 `<head>` 块复制到 `playable-css` 部分。
-Your editable CSS, from the second block in the head, also needs to be copied into the `playable-css` section.
+一个简单的可用示例是 [center.html](https://github.com/mdn/css-examples/blob/main/css-cookbook/center.html)，它嵌入在[居中元素](/zh-CN/docs/Web/CSS/Layout_cookbook/Center_an_element)页面上。你可以使用它来查看如何正确添加各个部分。
-A simple worked example is [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html), which is embedded on the page [Center an element](/zh-CN/docs/user:chrisdavidmills/Layout_Cookbook_Home/Center_an_element). You can use this to see how to add the various bits correctly.
+如果你已经分叉了仓库并将我们的 CSS 和 JavaScript 文件与示例一起合并，在浏览器中打开你的实时示例应该会显示所有内容，就像在 MDN 页面上显示的那样。
-If you have forked the repo and therefore have our CSS and JavaScript files alongside your example, if you open up your live example in the browser you should see everything working exactly as it will when included in a page.
+#### 实用提示
-#### Useful tips
+- 不要缩进 textarea 内的 CSS 和 HTML；而是将代码对齐到行的开始。这在渲染时看起来会更好。
+- 如果需要任何图像，请将它们放在示例目录中。你可以使用任何已经存在的图像。
+- 你可以通过更改内联样式中的高度来调整 textarea 的高度。
-1. Do not indent the CSS and HTML inside the textareas; instead bump it up against the start of the lines. This will look better when it is rendered.
-2. If you have any required images, pop them into the directory with the examples. Or you are welcome to use any already there.
-3. You can adjust the height of the textareas by changing the height in the inline styles.
+### 3. 创建可下载版本
-### 3. 创建一份可供下载的版本
+由于示例包含了我们所有的实时示例代码，我们希望为读者提供他们的示例所需的代码，省去任何不必要的项目。创建你的实时示例的副本，并在其名称中添加 `--download`。例如，`center.html` 的下载版本是 `center--download.html`。该文件将类似于你的初始示例。它应该是一个由单个 HTML 页面构成的基础版本的模式。
-As the examples include all of our live example code, we want to offer visitors a simple example without all of that included. Make a copy of your live example with --download appended. For example, center.html, has a download version named `center--download.html`. This file will be similar to your initial example. It should be a basic version of your pattern as a single HTML page. It can be handy to include the body CSS rules that are in our included stylesheet, if you take a look at [cookbook-template--download.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html), these are included as a starting point.
+包含我们的包含样式表中的主体 CSS 规则是很有用的。参考 [`cookbook-template--download.html`](https://github.com/mdn/css-examples/blob/main/css-cookbook/cookbook-template--download.html) 作为指南；这些规则提供了一个起点。
-### 4. 用你的示例发起 Pull 请求
+### 4. 提交拉取请求
-Make a PR on the [CSS Examples repo](https://github.com/mdn/css-examples). This way we can help you with any changes to the example that may be needed before you create your page, plus the example will need to be live to be included some it makes sense to create it first. Include in your PR an explanation of the pattern and what you are demonstrating.
+在 [CSS 示例仓库](https://github.com/mdn/css-examples/pulls)上提交一个拉取请求（PR）。这样我们可以帮助你进行任何可能需要的示例更改，然后再创建你的页面。此外，示例需要上线才能被包含在内。这就是为什么首先创建代码示例然后创建解释性指南是有意义的。在你的 PR 中，解释模式及其演示内容。请参阅我们的[创建拉取请求指南](/zh-CN/docs/MDN/Community/Pull_requests#创建拉取请求)。
### 5. 创建你的页面
-Once your example is merged you can create your page. You will need an MDN account to do so with [page creation permissions](/zh-CN/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting#新建一个页面), and you can then create the page as a subpage of the CSS Cookbook page. [There is a template for Cookbook pages here](/zh-CN/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template).
+在你的示例 PR 合并后，在[布局手册目录](https://github.com/mdn/content/tree/main/files/zh-CN/web/css/layout_cookbook)中创建一个新页面的拉取请求。使用我们的[手册页面模板](https://github.com/mdn/content/blob/main/files/zh-CN/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md?plain=1)。模板解释了每个部分的要求，你可以参考其他手册示例获取更多帮助。
-The template explains what should be part of each section, and you can refer to other cookbook examples for more help. If you click to edit any of those pages then you will be able to see things such as the macros used to embed compat data, and live examples.
+请记得在主页面[布局手册](/zh-CN/docs/Web/CSS/Layout_cookbook)上添加指向你新方案的链接。
-If you need general guidance on using the MDN wiki, see the help pages available here.
+如果你有任何问题或希望有人查看你的页面，请通过我们的任何[沟通渠道](/zh-CN/docs/MDN/Community/Communication_channels)与我们联系。
-If you need to ask any questions, or want someone to take a look at your page then the [MDN Discourse forum](https://discourse.mozilla.org/c/mdn) is a good place to do this, or [chat with us on Matrix](/zh-CN/docs/MDN/Community/Conversations#Synchronous_chat).
+## 参见
-## See also
-
-- [Cookbook page template](/zh-CN/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template)
-- [CSS Examples repo](https://github.com/mdn/css-examples)
+- [手册页面模板](/zh-CN/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template)
+- [CSS 示例仓库](https://github.com/mdn/css-examples)
diff --git a/files/zh-cn/web/css/mask-image/index.md b/files/zh-cn/web/css/mask-image/index.md
index 7c693e32fde753..7d0211259e8686 100644
--- a/files/zh-cn/web/css/mask-image/index.md
+++ b/files/zh-cn/web/css/mask-image/index.md
@@ -19,7 +19,8 @@ mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);
/* 多个属性值 */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);
+mask-image: image(url(mask.png), skyblue),
+ linear-gradient(rgba(0, 0, 0, 1), transparent);
/* 全局属性值 */
mask-image: inherit;
diff --git a/files/zh-cn/web/css/print-color-adjust/index.md b/files/zh-cn/web/css/print-color-adjust/index.md
new file mode 100644
index 00000000000000..48564f1e67c485
--- /dev/null
+++ b/files/zh-cn/web/css/print-color-adjust/index.md
@@ -0,0 +1,102 @@
+---
+title: print-color-adjust
+slug: Web/CSS/print-color-adjust
+l10n:
+ sourceCommit: aac4966bd12c77281f9374bbfaf4e17e2680ac3b
+---
+
+{{CSSRef}}
+
+**`print-color-adjust`** [CSS](/zh-CN/docs/Web/CSS) 属性用于设置{{Glossary("user agent", "用户代理")}}在输出设备上优化元素外观时可以采取的措施。默认情况下，浏览器可根据输出设备的类型和功能，对元素的外观进行必要和谨慎的调整。
+
+## 语法
+
+```css
+print-color-adjust: economy;
+print-color-adjust: exact;
+
+/* 全局值 */
+print-color-adjust: inherit;
+print-color-adjust: initial;
+print-color-adjust: revert;
+print-color-adjust: revert-layer;
+print-color-adjust: unset;
+```
+
+`print-color-adjust` 属性值需指定为以下关键字之一。
+
+### 值
+
+- `economy`
+ - : 用户代理可以根据其认为适当和审慎的方式对元素进行调整，以优化针对其渲染设备的输出效果。例如，在打印时，浏览器可能会选择省略所有背景图像，并调整文本颜色，以确保对比度达到最佳，便于在白纸上阅读。这是默认值。
+- `exact`
+ - : 该元素的内容是经过特别精心设计的，在使用颜色、图像和样式时考虑周到和/或非常重要，因此浏览器对其进行修改可能会使情况更糟而不是更好。除非用户要求，否则不应改变内容的外观。例如，一个页面可能包含一个信息列表，其中各行的背景颜色在白色和浅灰色之间交替。去掉背景色会降低内容的可读性。
+
+## 使用说明
+
+浏览器希望偏离指定外观的原因有很多，例如：
+
+- 内容使用的文字和背景颜色在输出设备上过于相似，不利于辨认。
+- 如果输出设备是打印机，为了节省墨水，可能会删除深色或非常密集的背景图像。
+- 在打印页面时，浏览器可能希望将深色背景上的浅色文本替换为白色背景上的深色文本。
+
+用户代理向用户提供的任何允许用户控制颜色和图像使用的选项，都将优先于 `print-color-adjust` 的值。换句话说，`print-color-adjust` 不一定会起作用。不仅用户可以覆盖该行为，而且每个用户代理可以自行决定在任何给定情况下如何处理 `print-color-adjust` 的值。
+
+## 形式定义
+
+{{cssinfo}}
+
+## 形式语法
+
+{{csssyntax}}
+
+## 示例
+
+### 保持低对比度
+
+在这个示例中，一个盒子在黑色背景上使用了 {{cssxref("background-image")}} 和半透明的 {{cssxref("gradient/linear-gradient", "linear-gradient()")}} 函数，在中间的红色文本后面显示了深蓝色渐变。无论出于何种原因，在任何渲染环境中，包括在纸张上，这都是所需的外观，因此我们使用 `print-color-adjust: exact` 来告诉浏览器在渲染时不要对盒子进行颜色或样式的调整。
+
+#### CSS
+
+```css
+.my-box {
+ background-color: black;
+ background-image: linear-gradient(rgb(0 0 180 / 50%), rgb(70 140 220 / 50%));
+ color: #900;
+ width: 15rem;
+ height: 6rem;
+ text-align: center;
+ font:
+ 24px "Helvetica",
+ sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ print-color-adjust: exact;
+}
+```
+
+#### HTML
+
+```html
+<div class="my-box">
+ <p>需要更高的对比度！</p>
+</div>
+```
+
+#### 结果
+
+{{EmbedLiveSample("保持低对比度", 640, 120)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 其他与颜色相关的属性：{{cssxref("color")}}、{{cssxref("background-color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}} 和 {{cssxref("column-rule-color")}}
+- {{cssxref("background-image")}}
diff --git a/files/zh-cn/web/css/url/index.md b/files/zh-cn/web/css/url/index.md
index 2a163d411104bf..5f6d51a3182e1c 100644
--- a/files/zh-cn/web/css/url/index.md
+++ b/files/zh-cn/web/css/url/index.md
@@ -1,56 +1,175 @@
---
-title: <url>
+title: url()
slug: Web/CSS/url
+l10n:
+ sourceCommit: 875d97804293021faaf66c16a76e2f31a6df56e1
---
{{CSSRef}}
-## 概述
+**`url()`** [CSS](/zh-CN/docs/Web/CSS) [函数](/zh-CN/docs/Web/CSS/CSS_Functions)用于包含文件。参数可以是绝对 URL、相对 URL、blob URL 或数据 URL。**`url()`** 函数可以作为其他 CSS 函数的参数传递，如 {{cssxref("attr")}} 函数。根据属性值的不同，所查找的资源可以是图像、字体或样式表。`url()` 函数标记表示 `<url>` 数据类型的值。
-[CSS](/zh-CN/CSS) 数据类型 `<url>` 指向一个资源。它没有独有的表达形式，只能通过 `url()` 函数定义。
-
-> **备注：** **URI 和 URL?**
->
-> [URI](https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E6%A0%87%E5%BF%97%E7%AC%A6)（统一资源标识符）与 [URL](https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%AC%A6)（统一资源定位符）不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 [URN](https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%90%8D%E7%A7%B0)（统一资源名称）。
->
-> 在 CSS Level 1 中，`url()` 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 `<url>`）
->
-> 在 CSS Level 2 中，`url()` 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致 `url()` 函数被用于创建一个 `<uri>` 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。
+> **备注：** {{Glossary("URI")}} 和 {{Glossary("URL")}} 是不同的。URI 用于标识资源。URL 是 URI 的一种类型，用于描述资源的*位置*。URI 可以是 URL，也可以是资源的名称（{{Glossary("URN")}}）。
>
-> 为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， `url()` 函数被明确定义为指代 `<url>` CSS 数据类型，且 `<uri>` CSS 数据类型不再存在。
->
-> 注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。
+> 在 CSS 第 1 版中，`url()` 函数标记只表示真正的 URL。在 CSS 第 2 版中，`url()` 的定义扩展到可描述任何 URI，无论是 URL 还是 URN。令人困惑的是，这意味着 `url()` 可以用来创建 `<uri>` CSS 数据类型。这种更改不仅笨拙，而且毫无必要，因为 URN 几乎从未在实际 CSS 中使用过。为了减少混淆，CSS 第 3 版又回到了狭义的初始定义。现在，`url()` 只表示真正的 `<url>`。
-许多 [CSS 属性](/zh-CN/CSS_Reference) 将 URL 作为属性值，例如 {{ Cssxref("background-image") }}、{{ Cssxref("cursor") }}、{{ Cssxref("@font-face") }}、{{ cssxref("list-style") }} 等。
+```css
+/* 简单用法 */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* 相关属性 */
+background-image: url("star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* 带回退的属性 */
+cursor: url(pointer.cur), pointer;
+
+/* 相关的简写属性 */
+background: url('star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* 作为另一个 CSS 函数的参数 */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgb(0 0 0 / 100%), transparent));
+
+/* 作为非简写多重数值的一部分 */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* at 规则 */
+@document url("https://www.example.com/") { /* … */ }
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+```
-## url() 函数
+如果使用相对 URL，它是相对于样式表的 URL（而不是相对于网页的 URL）。
-URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。
+**`url()`** 函数可以用作 {{cssxref('background')}}、{{cssxref('background-image')}}、{{cssxref('border')}}、{{cssxref('border-image')}}、{{cssxref('border-image-source')}}、{{cssxref('content')}}、{{cssxref('cursor')}}、{{cssxref('filter')}}、{{cssxref('list-style')}}、{{cssxref('list-style-image')}}、{{cssxref('mask')}}、{{cssxref('mask-image')}}、{{cssxref('offset-path')}}、{{cssxref('clip-path')}} 的值，作为 [@font-face](/zh-CN/docs/Web/CSS/@font-face) 块的一部分的 [src](/zh-CN/docs/Web/CSS/@font-face/src)，以及 [@counter-style/symbol](/zh-CN/docs/Web/CSS/@counter-style/symbols)。
## 语法
-```
- <CSS 属性>: url("http://mysite.example.com/mycursor.png")
+### 值
- <CSS 属性>: url(http://mysite.example.com/mycursor.png)
-```
+- `<string>`
+
+ - : 可以指定一个 URL 或 SVG 形状的 ID 的字符串。
+
+ - \<url>
+
+ - : 为相对地址、绝对地址的 URL，或指向所包含的 web 资源的指针，或数据 URL，可选择使用单引号或双引号。如果 URL 包含括号、空白字符或引号（除非这些字符已转义），或者地址包含高于 0x7e 的控制字符，则需要使用引号。除非经过转义，否则双引号不能出现在双引号内，单引号不能出现在单引号内。以下内容均有效且等效：
+
+ ```css
+ <css_property>: url("https://example.com/image.png")
+ <css_property>: url('https://example.com/image.png')
+ <css_property>: url(https://example.com/image.png)
+ ```
+
+ 如果选择不使用引号编写 URL，请在 URL 中的任何括号、空白字符、单引号（`'`）和双引号（`"`）前使用反斜线（`\`）。
-> **备注：** 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 [Firefox bug 752230](https://bugzil.la/752230)。
+ - path
+ - : 引用 [SVG 形状](/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes)（`circle`、`ellipse`、`line`、`path`、`polygon`、`polyline` 或 `rect`）的 ID ——使用形状的几何体作为路径。
+
+- `<url-modifier>`
+ - 将来，`url()` 函数可能会支持指定修饰符、标识符或函数标记，从而改变 URL 字符串的含义。本规范不支持此特性，也未对其进行全面定义。
+
+### 形式语法
+
+```plain
+url( <string> <url-modifier>* )
+```
## 示例
+### 在 background 属性中使用的 url
+
```css
.topbanner {
background: url("topbanner.png") #00d no-repeat fixed;
}
```
+### 作为列表项目符号加载图像的 url
+
```css
ul {
list-style: square url(http://www.example.com/redball.png);
}
```
+### 内容属性中的用法
+
+#### HTML
+
+```html
+<ul>
+ <li>第 1 项</li>
+ <li>第 2 项</li>
+ <li>第 3 项</li>
+</ul>
+```
+
+#### CSS
+
+```css
+li::after {
+ content: " - " url(star.gif);
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("内容属性中的用法", "100%", 110)}}
+
+### 使用数据 URL
+
+#### HTML
+
+```html
+<div class="background"></div>
+```
+
+#### CSS
+
+```css hidden
+.background {
+ height: 100vh;
+}
+```
+
+```css
+.background {
+ background: yellow;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}
+```
+
+{{EmbedLiveSample("使用数据 URL", "100%", 50)}}
+
+### 在滤镜中的使用
+
+当 URL 被用作滤镜路径时，URL 必须是以下其中之一：
+
+1. SVG 文件的路径，并附加滤镜的 ID。
+2. 如果页面上已经存在 SVG，则为滤镜的 ID。
+
+```css
+.blur {
+ filter: url(my-file.svg#svg-blur); /* 作为滤镜使用的 SVG 文件的 URL */
+}
+
+.inline-blur {
+ filter: url(#svg-blur); /* 嵌入到 HTML 页面中的 SVG 的 ID */
+}
+```
+
## 规范
{{Specifications}}
@@ -58,3 +177,11 @@ ul {
## 浏览器兼容性
{{Compat}}
+
+## 参见
+
+- {{cssxref("<gradient>")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("image/image", "image()")}}
+- {{cssxref("image/image-set", "image-set()")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/zh-cn/web/demos/index.md b/files/zh-cn/web/demos/index.md
deleted file mode 100644
index 6a411a5389c174..00000000000000
--- a/files/zh-cn/web/demos/index.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: 开源 Web 技术示例
-slug: Web/Demos
----
-
-Mozilla 支持各种令人兴奋的开源 Web 技术，我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。
-
-如果你知道开源 Web 技术的优秀演示或者应用，就在这里（以及 [英文页面](/zh-CN/docs/Web/Demos_of_open_web_technologies)）添加一个合适的链接吧。
-
-## 2D 图形
-
-### Canvas
-
-- [Blob Sallad: an interactive blob using JavaScript and canvas](http://www.blobsallad.se/)（[示例](http://blobsallad.se/article/)）
-- [Flying through space](http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html)
-- [3D RayCaster](/samples/raycaster/RayCaster.html)
-- [processing.js](http://processingjs.org/exhibition/)
-- [3D on 2D Canvas](http://gyu.que.jp/jscloth/)
-- [miniPaint: Image editor](http://viliusle.github.io/miniPaint/)（[源码](https://github.com/viliusle/miniPaint)）
-- [Zen Photon Garden](http://zenphoton.com/)（[源码](https://github.com/scanlime/zenphoton)）
-
-### SVG
-
-- [Bubblemenu](http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml) （视觉特效与交互）
-- [HTML transformations](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/)（使用了 `<foreignObject>` 元素）（视觉特效与变换）
-- [Phonetics Guide](http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg)（可交互）
-- [3D objects demo](http://www.lutanho.net/svgvml3d/platonic.html)（可交互）
-- [Blobular](http://www.themaninblue.com/experiment/Blobular/)（可交互）
-- [Video embedded in SVG](http://www.double.co.nz/video_test/video.svg)（或[下载到本地](http://www.double.co.nz/video_test/video_svg.tar.bz2)）
-- [Summer HTML image map creator](http://summerstyle.github.io/summer/)（[源码](https://github.com/summerstyle/summer)）
-
-### 视频
-
-- [Video 3D Animation "mozilla constantly evolving"](https://vimeo.com/172328210)
-- [Video 3D animation "Floating Dance"](https://vimeo.com/173851395)
-- [Streaming Anime, Movie Trailer and Interview](http://www.double.co.nz/video_test/test1.html)
-- [Billy's Browser Firefox Flick](http://www.double.co.nz/video_test/test2.html)
-- [Virtual Barber Shop](http://www.double.co.nz/video_test/test3.html)
-- [Transformers Movie Trailer](http://www.double.co.nz/video_test/test4.html)
-- [A Scanner Darkly Movie Trailer](http://www.double.co.nz/video_test/test5.html)（自带控制功能）
-- [Events firing and volume control](http://www.double.co.nz/video_test/events.html)
-- [Dragable and sizable videos](http://www.double.co.nz/video_test/video.svg)
-
-## 3D 图像
-
-### WebGL
-
-- [Web Audio Fireworks](http://ondras.github.io/fireworks-webgl/)
-- IoQuake3（[源码](https://github.com/klaussilveira/ioquake3.js)）
-- Escher puzzle（[源码](https://github.com/micahbolen/demoscene)）
-- [Kai 'Opua](http://collinhover.github.io/kaiopua/)（[源码](https://github.com/collinhover/kaiopua)）
-
-### 虚拟现实（VR）
-
-- The Polar Sea（[源码](https://github.com/MozVR/polarsea)）
-- Sechelt fly-through（[源码](https://github.com/mozvr/sechelt)）
-
-## CSS
-
-- [CSS Zen Garden](http://www.csszengarden.com/)
-- [CSS floating logo "mozilla"](https://codepen.io/SoftwareRVG/pen/OXkOWj/)
-- [Paperfold](http://felixniklas.com/paperfold/)
-- [CSS Blockout](http://ondras.github.io/blockout/)
-- [Rubik's cube](http://ondras.zarovi.cz/demos/rubik/)
-- [Pure CSS Slides](http://ondras.zarovi.cz/demos/nojs/)
-- Planetarium（[源码](https://github.com/littleworkshop/planetarium)）
-- [Loader with blend modes](https://codepen.io/equinusocio/full/qjyXPP/)
-- [Text reveal with clip-path](https://codepen.io/equinusocio/full/KNYOxJ/)
-- [Ambient shadow with custom properties](https://codepen.io/equinusocio/full/GvyvWd/)
-- [Luminiscent vial](https://codepen.io/equinusocio/full/jEVNeJ/)
-
-旧项目：
-
-- [CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG.](https://s.codepen.io/SoftwareRVG/debug/OXkOWj) (debug 模式)
-- [Bootstrap Contact Form Design](https://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php)
-- [CSS Paralax Forest](http://www.lesmoffat.co.uk/folio/forest/forest.html)
-- [Responsive Login Page Design](http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html)
-- [One Page Scroll Website Template](http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html)
-
-### 变换
-
-- [Impress.js](http://impress.github.io/impress.js) ([源码](https://github.com/impress/impress.js))
-
-## 游戏
-
-- IoQuake3（[源码](https://github.com/klaussilveira/ioquake3.js)）
-- [Kai 'Opua](http://collinhover.github.io/kaiopua/)（[源码](https://github.com/collinhover/kaiopua)）
-
-## Web API
-
-### 通知 API
-
-- [HTML5 Notifications](http://elfoxero.github.io/html5notifications/)（[源码](https://github.com/elfoxero/html5notifications)）
-
-### 网络音频 API
-
-- [Web Audio Fireworks](http://ondras.github.io/fireworks-webgl/)
-- [oscope.js - JavaScript oscilloscope](http://ondras.github.io/oscope/)
-- [HTML5 Web Audio Showcase](http://nipe-systems.de/webapps/html5-web-audio/)（[源码](https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase)）
-- [HTML5 Audio Visualizer](http://wayou.github.io/HTML5_Audio_Visualizer/)（[源码](https://github.com/Wayou/HTML5_Audio_Visualizer)）
-- [Graphical Filter Editor and Visualizer](http://carlosrafaelgn.com.br/GraphicalFilterEditor/)（[源码](https://github.com/carlosrafaelgn/GraphicalFilterEditor)）
-
-### 文件 API
-
-- [Slide My Text - presentation from plain text files](http://palerdot.github.io/slide-my-text/)
-
-### 其他
-
-- [Web Worker Fractals](http://ondras.github.io/fractal/)
-- [Photo editor](http://ondras.github.io/photo/)
-- [Coral generator](http://ondras.github.io/coral/)
-- [Raytracer](http://nerget.com/rayjs-mt/rayjs.html)
-- [HotCold Touch Typing](http://palerdot.github.io/hotcold/)
diff --git a/files/zh-cn/web/events/index.md b/files/zh-cn/web/events/index.md
index de066cc009b5df..cff2ff25769663 100644
--- a/files/zh-cn/web/events/index.md
+++ b/files/zh-cn/web/events/index.md
@@ -1,15 +1,15 @@
---
title: 事件参考
slug: Web/Events
+l10n:
+ sourceCommit: 4ca4fa3d9d1de5601b406b13dc75aff30709c66f
---
[事件](/zh-CN/docs/Learn/JavaScript/Building_blocks/Events)的触发用于通知“对变化感兴趣”的代码以影响代码的执行。这些事件可能来自用户的交互（例如：使用鼠标或调整窗口大小）、底层环境状态的改变（例如：电池电量不足或操作系统的媒体事件）和其他的情况。
每个事件都使用继承自 {{domxref("Event")}} 接口的对象来表示，可以包括额外的自定义成员属性及函数，以获取事件发生时相关的更多信息。本文为每个事件都提供了一个表格（靠近顶部的区域），其中包含了指向相关事件接口的链接和其他相关的信息。[事件 > 基于 `Event` 的接口](/zh-CN/docs/Web/API/Event#基于_event_的接口)中完整地列出了不同的事件类型。
-本文提供了你可能感兴趣的主要事件类型（动画、剪切板、worker，等等）的索引，以及实现这些事件的主要的类。最后是所有提供了文档的事件列表。
-
-> **备注：** 此页面列出了你会在 web 上遇到的绝大多数常见事件。如果你正在查找一个这里没有列出的事件，请尝试在 MDN 上搜索它的名字、主题或关联的规范。
+本文提供了你可能感兴趣的主要事件类型（动画、剪切板、worker 等等）的索引，以及实现这些事件的主要的类。
## 事件索引
@@ -176,10 +176,6 @@ slug: Web/Events
</p>
<p>
滚轮事件在
- <a href="/zh-CN/docs/Web/API/Document/wheel_event"
- ><code>Document</code></a
- >
- 和
<a href="/zh-CN/docs/Web/API/Element/wheel_event"
><code>Element</code></a
> 上触发。
@@ -275,34 +271,6 @@ slug: Web/Events
><code>gestureend</code> 事件</a
>。
</li>
- <li>
- IE 非标准的、在 <a href="/zh-CN/docs/Web/API/Element#touch_events"
- ><code>Element</code></a
- > 上的事件：
- <a href="/zh-CN/docs/Web/API/Element/MSGestureStart_event"
- ><code>MSGestureStart</code></a
- >、<a href="/zh-CN/docs/Web/API/Element/MSGestureChange_event"
- ><code>MSGestureChange</code></a
- >、<a href="/zh-CN/docs/Web/API/Element/MSGestureEnd_event"
- ><code>MSGestureEnd</code></a
- >、<a href="/zh-CN/docs/Web/API/Element/MSGestureHold_event"
- ><code>MSGestureHold</code></a
- >、<a href="/zh-CN/docs/Web/API/Element/MSGestureTap_event"
- ><code>MSGestureTap</code></a
- >。
- </li>
- <li>
- Mozilla 已启用/非标准的 touch 事件
- <a
- href="/zh-CN/docs/Web/API/Touch_events/Mozilla_experimental_events"
- >Touch 事件（Mozilla 实验性）</a
- >。
- </li>
- <li>
- <a href="/zh-CN/docs/Web/Events/Mouse_gesture_events"
- >Firefox 附加组件的鼠标手势事件</a
- >
- </li>
</ul>
</td>
</tr>
@@ -434,13 +402,13 @@ slug: Web/Events
><code>VideoTrackList</code></a
>、<a href="/zh-CN/docs/Web/API/HTMLTrackElement#events"
><code>HTMLTrackElement</code></a
- >、<a href="/zh-CN/docs/Web/API/OfflineAudioContext#events"
+ >、<a href="/zh-CN/docs/Web/API/OfflineAudioContext#事件"
><code>OfflineAudioContext</code></a
>、<a href="/zh-CN/docs/Web/API/TextTrack#events"><code>TextTrack</code></a
>、<a href="/zh-CN/docs/Web/API/TextTrackList#events"
><code>TextTrackList</code></a
- >、<a href="/zh-CN/docs/Web/HTML/Element/audio#events">Element/audio</a>,
- <a href="/zh-CN/docs/Web/HTML/Element/video#events">Element/video</a> 上触发的事件。
+ >、<a href="/zh-CN/docs/Web/HTML/Element/audio#事件">Element/audio</a>,
+ <a href="/zh-CN/docs/Web/HTML/Element/video#事件">Element/video</a> 上触发的事件。
</td>
</tr>
<tr>
@@ -521,16 +489,10 @@ slug: Web/Events
<td>性能</td>
<td>
<p>
- 与
+ 与任何性能相关的规范分组为
<a href="/zh-CN/docs/Web/API/Performance_API"
- >High Resolution Time API</a
- >、<a href="/zh-CN/docs/Web/API/Performance_API/Navigation_timing"
- >Navigation Timing API</a
- >、<a href="/zh-CN/docs/Web/API/Performance_API/User_timing">User Timing API</a>
- 和
- <a href="/zh-CN/docs/Web/API/Performance_API/Resource_timing"
- >Resource Timing API</a
- > 相关的事件。
+ >Performance API</a
+ > 的相关事件。
</p>
</td>
<td>
@@ -759,8 +721,6 @@ slug: Web/Events
>、<a href="/zh-CN/docs/Web/API/WorkerGlobalScope#events"
><code>WorkerGlobalScope</code></a
>、<a href="/zh-CN/docs/Web/API/Worker#events"><code>Worker</code></a
- >、<a href="/zh-CN/docs/Web/API/WorkerGlobalScope#events"
- ><code>WorkerGlobalScope</code></a
>、<a href="/zh-CN/docs/Web/API/BroadcastChannel#事件"
><code>BroadcastChannel</code></a
>、<a href="/zh-CN/docs/Web/API/MessagePort#事件"
@@ -771,538 +731,6 @@ slug: Web/Events
</tbody>
</table>
-## 事件列表
-
-本节列出了在 MDN 上有自己的参考页面的事件。如果下面没有列出你感兴趣的某个事件，请尝试搜索它的名字、主题或关联的规范。
-
-- {{DOMxRef("AbortSignal")}}
-
- - [abort 事件](/zh-CN/docs/Web/API/AbortSignal/abort_event)
-
-- {{DOMxRef("AudioScheduledSourceNode")}}
-
- - [ended 事件](/zh-CN/docs/Web/API/AudioScheduledSourceNode/ended_event)
-
-- {{DOMxRef("AudioTrackList")}}
-
- - [addtrack 事件](/zh-CN/docs/Web/API/AudioTrackList/addtrack_event)
- - [change 事件](/zh-CN/docs/Web/API/AudioTrackList/change_event)
- - [removetrack 事件](/zh-CN/docs/Web/API/AudioTrackList/removetrack_event)
-
-- {{DOMxRef("BroadcastChannel")}}
-
- - [messageerror 事件](/zh-CN/docs/Web/API/BroadcastChannel/messageerror_event)
- - [message 事件](/zh-CN/docs/Web/API/BroadcastChannel/message_event)
-
-- {{DOMxRef("DedicatedWorkerGlobalScope")}}
-
- - [messageerror 事件](/zh-CN/docs/Web/API/DedicatedWorkerGlobalScope/messageerror_event)
- - [message 事件](/zh-CN/docs/Web/API/DedicatedWorkerGlobalScope/message_event)
-
-- {{DOMxRef("Document")}}
-
- - [animationcancel 事件](/zh-CN/docs/Web/API/Document/animationcancel_event)
- - [animationend 事件](/zh-CN/docs/Web/API/Document/animationend_event)
- - [animationiteration 事件](/zh-CN/docs/Web/API/Document/animationiteration_event)
- - [animationstart 事件](/zh-CN/docs/Web/API/Document/animationstart_event)
- - [copy 事件](/zh-CN/docs/Web/API/Document/copy_event)
- - [cut 事件](/zh-CN/docs/Web/API/Document/cut_event)
- - [DOMContentLoaded 事件](/zh-CN/docs/Web/API/Document/DOMContentLoaded_event)
- - [dragend 事件](/zh-CN/docs/Web/API/Document/dragend_event)
- - [dragenter 事件](/zh-CN/docs/Web/API/Document/dragenter_event)
- - [dragleave 事件](/zh-CN/docs/Web/API/Document/dragleave_event)
- - [dragover 事件](/zh-CN/docs/Web/API/Document/dragover_event)
- - [dragstart 事件](/zh-CN/docs/Web/API/Document/dragstart_event)
- - [drag 事件](/zh-CN/docs/Web/API/Document/drag_event)
- - [drop 事件](/zh-CN/docs/Web/API/Document/drop_event)
- - [fullscreenchange 事件](/zh-CN/docs/Web/API/Document/fullscreenchange_event)
- - [fullscreenerror 事件](/zh-CN/docs/Web/API/Document/fullscreenerror_event)
- - [gotpointercapture 事件](/zh-CN/docs/Web/API/Document/gotpointercapture_event)
- - [keydown 事件](/zh-CN/docs/Web/API/Document/keydown_event)
- - [keypress 事件](/zh-CN/docs/Web/API/Document/keypress_event)
- - [keyup 事件](/zh-CN/docs/Web/API/Document/keyup_event)
- - [lostpointercapture 事件](/zh-CN/docs/Web/API/Document/lostpointercapture_event)
- - [paste 事件](/zh-CN/docs/Web/API/Document/paste_event)
- - [pointercancel 事件](/zh-CN/docs/Web/API/Document/pointercancel_event)
- - [pointerdown 事件](/zh-CN/docs/Web/API/Document/pointerdown_event)
- - [pointerenter 事件](/zh-CN/docs/Web/API/Document/pointerenter_event)
- - [pointerleave 事件](/zh-CN/docs/Web/API/Document/pointerleave_event)
- - [pointerlockchange 事件](/zh-CN/docs/Web/API/Document/pointerlockchange_event)
- - [pointerlockerror 事件](/zh-CN/docs/Web/API/Document/pointerlockerror_event)
- - [pointermove 事件](/zh-CN/docs/Web/API/Document/pointermove_event)
- - [pointerout 事件](/zh-CN/docs/Web/API/Document/pointerout_event)
- - [pointerover 事件](/zh-CN/docs/Web/API/Document/pointerover_event)
- - [pointerup 事件](/zh-CN/docs/Web/API/Document/pointerup_event)
- - [readystatechange 事件](/zh-CN/docs/Web/API/Document/readystatechange_event)
- - [scroll 事件](/zh-CN/docs/Web/API/Document/scroll_event)
- - [selectionchange 事件](/zh-CN/docs/Web/API/Document/selectionchange_event)
- - [selectstart 事件](/zh-CN/docs/Web/API/Document/selectstart_event)
- - [touchcancel 事件](/zh-CN/docs/Web/API/Document/touchcancel_event)
- - [touchend 事件](/zh-CN/docs/Web/API/Document/touchend_event)
- - [touchmove 事件](/zh-CN/docs/Web/API/Document/touchmove_event)
- - [touchstart 事件](/zh-CN/docs/Web/API/Document/touchstart_event)
- - [transitioncancel 事件](/zh-CN/docs/Web/API/Document/transitioncancel_event)
- - [transitionend 事件](/zh-CN/docs/Web/API/Document/transitionend_event)
- - [transitionrun 事件](/zh-CN/docs/Web/API/Document/transitionrun_event)
- - [transitionstart 事件](/zh-CN/docs/Web/API/Document/transitionstart_event)
- - [visibilitychange 事件](/zh-CN/docs/Web/API/Document/visibilitychange_event)
- - [wheel 事件](/zh-CN/docs/Web/API/Document/wheel_event)
-
-- {{DOMxRef("Element")}}
-
- - [afterscriptexecute 事件](/zh-CN/docs/Web/API/Element/afterscriptexecute_event)
- - [auxclick 事件](/zh-CN/docs/Web/API/Element/auxclick_event)
- - [beforescriptexecute 事件](/zh-CN/docs/Web/API/Element/beforescriptexecute_event)
- - [blur 事件](/zh-CN/docs/Web/API/Element/blur_event)
- - [click 事件](/zh-CN/docs/Web/API/Element/click_event)
- - [compositionend 事件](/zh-CN/docs/Web/API/Element/compositionend_event)
- - [compositionstart 事件](/zh-CN/docs/Web/API/Element/compositionstart_event)
- - [compositionupdate 事件](/zh-CN/docs/Web/API/Element/compositionupdate_event)
- - [contextmenu 事件](/zh-CN/docs/Web/API/Element/contextmenu_event)
- - [copy 事件](/zh-CN/docs/Web/API/Element/copy_event)
- - [cut 事件](/zh-CN/docs/Web/API/Element/cut_event)
- - [dblclick 事件](/zh-CN/docs/Web/API/Element/dblclick_event)
- - [DOMActivate 事件](/zh-CN/docs/Web/API/Element/DOMActivate_event)
- - [DOMMouseScroll 事件](/zh-CN/docs/Web/API/Element/DOMMouseScroll_event)
- - [error 事件](/zh-CN/docs/Web/API/Element/error_event)
- - [focusin 事件](/zh-CN/docs/Web/API/Element/focusin_event)
- - [focusout 事件](/zh-CN/docs/Web/API/Element/focusout_event)
- - [focus 事件](/zh-CN/docs/Web/API/Element/focus_event)
- - [fullscreenchange 事件](/zh-CN/docs/Web/API/Element/fullscreenchange_event)
- - [fullscreenerror 事件](/zh-CN/docs/Web/API/Element/fullscreenerror_event)
- - [gesturechange 事件](/zh-CN/docs/Web/API/Element/gesturechange_event)
- - [gestureend 事件](/zh-CN/docs/Web/API/Element/gestureend_event)
- - [gesturestart 事件](/zh-CN/docs/Web/API/Element/gesturestart_event)
- - [keydown 事件](/zh-CN/docs/Web/API/Element/keydown_event)
- - [keypress 事件](/zh-CN/docs/Web/API/Element/keypress_event)
- - [keyup 事件](/zh-CN/docs/Web/API/Element/keyup_event)
- - [mousedown 事件](/zh-CN/docs/Web/API/Element/mousedown_event)
- - [mouseenter 事件](/zh-CN/docs/Web/API/Element/mouseenter_event)
- - [mouseleave 事件](/zh-CN/docs/Web/API/Element/mouseleave_event)
- - [mousemove 事件](/zh-CN/docs/Web/API/Element/mousemove_event)
- - [mouseout 事件](/zh-CN/docs/Web/API/Element/mouseout_event)
- - [mouseover 事件](/zh-CN/docs/Web/API/Element/mouseover_event)
- - [mouseup 事件](/zh-CN/docs/Web/API/Element/mouseup_event)
- - [mousewheel 事件](/zh-CN/docs/Web/API/Element/mousewheel_event)
- - [msContentZoom 事件](/zh-CN/docs/Web/API/Element/msContentZoom_event)
- - [MSGestureChange 事件](/zh-CN/docs/Web/API/Element/MSGestureChange_event)
- - [MSGestureEnd 事件](/zh-CN/docs/Web/API/Element/MSGestureEnd_event)
- - [MSGestureHold 事件](/zh-CN/docs/Web/API/Element/MSGestureHold_event)
- - [MSGestureStart 事件](/zh-CN/docs/Web/API/Element/MSGestureStart_event)
- - [MSGestureTap 事件](/zh-CN/docs/Web/API/Element/MSGestureTap_event)
- - [MSInertiaStart 事件](/zh-CN/docs/Web/API/Element/MSInertiaStart_event)
- - [MSManipulationStateChanged 事件](/zh-CN/docs/Web/API/Element/MSManipulationStateChanged_event)
- - [paste 事件](/zh-CN/docs/Web/API/Element/paste_event)
- - [scroll 事件](/zh-CN/docs/Web/API/Element/scroll_event)
- - [select 事件](/zh-CN/docs/Web/API/Element/select_event)
- - [touchcancel 事件](/zh-CN/docs/Web/API/Element/touchcancel_event)
- - [touchend 事件](/zh-CN/docs/Web/API/Element/touchend_event)
- - [touchmove 事件](/zh-CN/docs/Web/API/Element/touchmove_event)
- - [touchstart 事件](/zh-CN/docs/Web/API/Element/touchstart_event)
- - [webkitmouseforcechanged 事件](/zh-CN/docs/Web/API/Element/webkitmouseforcechanged_event)
- - [webkitmouseforcedown 事件](/zh-CN/docs/Web/API/Element/webkitmouseforcedown_event)
- - [webkitmouseforceup 事件](/zh-CN/docs/Web/API/Element/webkitmouseforceup_event)
- - [webkitmouseforcewillbegin 事件](/zh-CN/docs/Web/API/Element/webkitmouseforcewillbegin_event)
- - [wheel 事件](/zh-CN/docs/Web/API/Element/wheel_event)
-
-- {{DOMxRef("EventSource")}}
-
- - [error 事件](/zh-CN/docs/Web/API/EventSource/error_event)
- - [message 事件](/zh-CN/docs/Web/API/EventSource/message_event)
- - [open 事件](/zh-CN/docs/Web/API/EventSource/open_event)
-
-- {{DOMxRef("FileReader")}}
-
- - [abort 事件](/zh-CN/docs/Web/API/FileReader/abort_event)
- - [error 事件](/zh-CN/docs/Web/API/FileReader/error_event)
- - [loadend 事件](/zh-CN/docs/Web/API/FileReader/loadend_event)
- - [loadstart 事件](/zh-CN/docs/Web/API/FileReader/loadstart_event)
- - [load 事件](/zh-CN/docs/Web/API/FileReader/load_event)
- - [progress 事件](/zh-CN/docs/Web/API/FileReader/progress_event)
-
-- {{DOMxRef("HTMLCanvasElement")}}
-
- - [webglcontextcreationerror 事件](/zh-CN/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event)
- - [webglcontextlost 事件](/zh-CN/docs/Web/API/HTMLCanvasElement/webglcontextlost_event)
- - [webglcontextrestored 事件](/zh-CN/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event)
-
-- {{DOMxRef("HTMLDetailsElement")}}
-
- - [toggle 事件](/zh-CN/docs/Web/API/HTMLDetailsElement/toggle_event)
-
-- {{DOMxRef("HTMLDialogElement")}}
-
- - [cancel 事件](/zh-CN/docs/Web/API/HTMLDialogElement/cancel_event)
- - [close 事件](/zh-CN/docs/Web/API/HTMLDialogElement/close_event)
-
-- {{DOMxRef("HTMLElement")}}
-
- - [animationcancel 事件](/zh-CN/docs/Web/API/HTMLElement/animationcancel_event)
- - [animationend 事件](/zh-CN/docs/Web/API/HTMLElement/animationend_event)
- - [animationiteration 事件](/zh-CN/docs/Web/API/HTMLElement/animationiteration_event)
- - [animationstart 事件](/zh-CN/docs/Web/API/HTMLElement/animationstart_event)
- - [beforeinput 事件](/zh-CN/docs/Web/API/Element/beforeinput_event)
- - [change 事件](/zh-CN/docs/Web/API/HTMLElement/change_event)
- - [gotpointercapture 事件](/zh-CN/docs/Web/API/HTMLElement/gotpointercapture_event)
- - [input 事件](/zh-CN/docs/Web/API/Element/input_event)
- - [lostpointercapture 事件](/zh-CN/docs/Web/API/HTMLElement/lostpointercapture_event)
- - [pointercancel 事件](/zh-CN/docs/Web/API/HTMLElement/pointercancel_event)
- - [pointerdown 事件](/zh-CN/docs/Web/API/HTMLElement/pointerdown_event)
- - [pointerenter 事件](/zh-CN/docs/Web/API/HTMLElement/pointerenter_event)
- - [pointerleave 事件](/zh-CN/docs/Web/API/HTMLElement/pointerleave_event)
- - [pointermove 事件](/zh-CN/docs/Web/API/HTMLElement/pointermove_event)
- - [pointerout 事件](/zh-CN/docs/Web/API/HTMLElement/pointerout_event)
- - [pointerover 事件](/zh-CN/docs/Web/API/HTMLElement/pointerover_event)
- - [pointerup 事件](/zh-CN/docs/Web/API/HTMLElement/pointerup_event)
- - [transitioncancel 事件](/zh-CN/docs/Web/API/HTMLElement/transitioncancel_event)
- - [transitionend 事件](/zh-CN/docs/Web/API/HTMLElement/transitionend_event)
- - [transitionrun 事件](/zh-CN/docs/Web/API/HTMLElement/transitionrun_event)
- - [transitionstart 事件](/zh-CN/docs/Web/API/HTMLElement/transitionstart_event)
-
-- {{DOMxRef("HTMLFormElement")}}
-
- - [formdata 事件](/zh-CN/docs/Web/API/HTMLFormElement/formdata_event)
- - [reset 事件](/zh-CN/docs/Web/API/HTMLFormElement/reset_event)
- - [submit 事件](/zh-CN/docs/Web/API/HTMLFormElement/submit_event)
-
-- {{DOMxRef("HTMLInputElement")}}
-
- - [invalid 事件](/zh-CN/docs/Web/API/HTMLInputElement/invalid_event)
- - [search 事件](/zh-CN/docs/Web/API/HTMLInputElement/search_event)
-
-- {{DOMxRef("HTMLMediaElement")}}
-
- - [abort 事件](/zh-CN/docs/Web/API/HTMLMediaElement/abort_event)
- - [canplaythrough 事件](/zh-CN/docs/Web/API/HTMLMediaElement/canplaythrough_event)
- - [canplay 事件](/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event)
- - [durationchange 事件](/zh-CN/docs/Web/API/HTMLMediaElement/durationchange_event)
- - [emptied 事件](/zh-CN/docs/Web/API/HTMLMediaElement/emptied_event)
- - [ended 事件](/zh-CN/docs/Web/API/HTMLMediaElement/ended_event)
- - [error 事件](/zh-CN/docs/Web/API/HTMLMediaElement/error_event)
- - [loadeddata 事件](/zh-CN/docs/Web/API/HTMLMediaElement/loadeddata_event)
- - [loadedmetadata 事件](/zh-CN/docs/Web/API/HTMLMediaElement/loadedmetadata_event)
- - [loadstart 事件](/zh-CN/docs/Web/API/HTMLMediaElement/loadstart_event)
- - [pause 事件](/zh-CN/docs/Web/API/HTMLMediaElement/pause_event)
- - [playing 事件](/zh-CN/docs/Web/API/HTMLMediaElement/playing_event)
- - [play 事件](/zh-CN/docs/Web/API/HTMLMediaElement/play_event)
- - [progress 事件](/zh-CN/docs/Web/API/HTMLMediaElement/progress_event)
- - [ratechange 事件](/zh-CN/docs/Web/API/HTMLMediaElement/ratechange_event)
- - [seeked 事件](/zh-CN/docs/Web/API/HTMLMediaElement/seeked_event)
- - [seeking 事件](/zh-CN/docs/Web/API/HTMLMediaElement/seeking_event)
- - [stalled 事件](/zh-CN/docs/Web/API/HTMLMediaElement/stalled_event)
- - [suspend 事件](/zh-CN/docs/Web/API/HTMLMediaElement/suspend_event)
- - [timeupdate 事件](/zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event)
- - [volumechange 事件](/zh-CN/docs/Web/API/HTMLMediaElement/volumechange_event)
- - [waiting 事件](/zh-CN/docs/Web/API/HTMLMediaElement/waiting_event)
-
-- {{DOMxRef("HTMLSlotElement")}}
-
- - [slotchange 事件](/zh-CN/docs/Web/API/HTMLSlotElement/slotchange_event)
-
-- {{DOMxRef("HTMLTrackElement")}}
-
- - [cuechange 事件](/zh-CN/docs/Web/API/HTMLTrackElement/cuechange_event)
-
-- {{DOMxRef("HTMLVideoElement")}}
-
- - [enterpictureinpicture 事件](/zh-CN/docs/Web/API/HTMLVideoElement/enterpictureinpicture_event)
- - [leavepictureinpicture 事件](/zh-CN/docs/Web/API/HTMLVideoElement/leavepictureinpicture_event)
-
-- {{DOMxRef("IDBDatabase")}}
-
- - [abort 事件](/zh-CN/docs/Web/API/IDBTransaction/abort_event)
- - [close 事件](/zh-CN/docs/Web/API/IDBDatabase/close_event)
- - [error 事件](/zh-CN/docs/Web/API/IDBTransaction/error_event)
- - [versionchange 事件](/zh-CN/docs/Web/API/IDBDatabase/versionchange_event)
-
-- {{DOMxRef("IDBOpenDBRequest")}}
-
- - [blocked 事件](/zh-CN/docs/Web/API/IDBOpenDBRequest/blocked_event)
- - [upgradeneeded 事件](/zh-CN/docs/Web/API/IDBOpenDBRequest/upgradeneeded_event)
-
-- {{DOMxRef("IDBRequest")}}
-
- - [error 事件](/zh-CN/docs/Web/API/IDBRequest/error_event)
- - [success 事件](/zh-CN/docs/Web/API/IDBRequest/success_event)
-
-- {{DOMxRef("IDBTransaction")}}
-
- - [abort 事件](/zh-CN/docs/Web/API/IDBTransaction/abort_event)
- - [complete 事件](/zh-CN/docs/Web/API/IDBTransaction/complete_event)
- - [error 事件](/zh-CN/docs/Web/API/IDBTransaction/error_event)
-
-- {{DOMxRef("MediaDevices")}}
-
- - [devicechange 事件](/zh-CN/docs/Web/API/MediaDevices/devicechange_event)
-
-- {{DOMxRef("MediaRecorder")}}
-
- - [error 事件](/zh-CN/docs/Web/API/MediaRecorder/error_event)
-
-- {{DOMxRef("MediaStream")}}
-
- - [addtrack 事件](/zh-CN/docs/Web/API/MediaStream/addtrack_event)
- - [removetrack 事件](/zh-CN/docs/Web/API/MediaStream/removetrack_event)
-
-- {{DOMxRef("MediaStreamTrack")}}
-
- - [ended 事件](/zh-CN/docs/Web/API/MediaStreamTrack/ended_event)
- - [mute 事件](/zh-CN/docs/Web/API/MediaStreamTrack/mute_event)
- - [unmute 事件](/zh-CN/docs/Web/API/MediaStreamTrack/unmute_event)
-
-- {{DOMxRef("MessagePort")}}
-
- - [messageerror 事件](/zh-CN/docs/Web/API/MessagePort/messageerror_event)
- - [message 事件](/zh-CN/docs/Web/API/MessagePort/message_event)
-
-- {{DOMxRef("OfflineAudioContext")}}
-
- - [complete 事件](/zh-CN/docs/Web/API/OfflineAudioContext/complete_event)
-
-- {{DOMxRef("PaymentRequest")}}
-
- - [merchantvalidation 事件](/zh-CN/docs/Web/API/PaymentRequest/merchantvalidation_event)
- - [paymentmethodchange 事件](/zh-CN/docs/Web/API/PaymentRequest/paymentmethodchange_event)
- - [shippingaddresschange 事件](/zh-CN/docs/Web/API/PaymentRequest/shippingaddresschange_event)
- - [shippingoptionchange 事件](/zh-CN/docs/Web/API/PaymentRequest/shippingoptionchange_event)
-
-- {{DOMxRef("PaymentResponse")}}
-
- - [payerdetailchange 事件](/zh-CN/docs/Web/API/PaymentResponse/payerdetailchange_event)
-
-- {{DOMxRef("Performance")}}
-
- - [resourcetimingbufferfull 事件](/zh-CN/docs/Web/API/Performance/resourcetimingbufferfull_event)
-
-- {{DOMxRef("PictureInPictureWindow")}}
-
- - [resize 事件](/zh-CN/docs/Web/API/PictureInPictureWindow/resize_event)
-
-- {{DOMxRef("RTCDataChannel")}}
-
- - [bufferedamountlow 事件](/zh-CN/docs/Web/API/RTCDataChannel/bufferedamountlow_event)
- - [close 事件](/zh-CN/docs/Web/API/RTCDataChannel/close_event)
- - [closing 事件](/zh-CN/docs/Web/API/RTCDataChannel/closing_event)
- - [error 事件](/zh-CN/docs/Web/API/RTCDataChannel/error_event)
- - [message 事件](/zh-CN/docs/Web/API/RTCDataChannel/message_event)
- - [open 事件](/zh-CN/docs/Web/API/RTCDataChannel/open_event)
-
-- {{DOMxRef("RTCDtlsTransport")}}
-
- - [error 事件](/zh-CN/docs/Web/API/RTCDtlsTransport/error_event)
-
-- {{DOMxRef("RTCDTMFSender")}}
-
- - [tonechange 事件](/zh-CN/docs/Web/API/RTCDTMFSender/tonechange_event)
-
-- {{DOMxRef("RTCIceTransport")}}
-
- - [gatheringstatechange 事件](/zh-CN/docs/Web/API/RTCIceTransport/gatheringstatechange_event)
- - [selectedcandidatepairchange 事件](/zh-CN/docs/Web/API/RTCIceTransport/selectedcandidatepairchange_event)
- - [statechange 事件](/zh-CN/docs/Web/API/RTCIceTransport/statechange_event)
-
-- {{DOMxRef("RTCPeerConnection")}}
-
- - [addstream 事件](/zh-CN/docs/Web/API/RTCPeerConnection/addstream_event)
- - [connectionstatechange 事件](/zh-CN/docs/Web/API/RTCPeerConnection/connectionstatechange_event)
- - [datachannel 事件](/zh-CN/docs/Web/API/RTCPeerConnection/datachannel_event)
- - [icecandidateerror 事件](/zh-CN/docs/Web/API/RTCPeerConnection/icecandidateerror_event)
- - [icecandidate 事件](/zh-CN/docs/Web/API/RTCPeerConnection/icecandidate_event)
- - [iceconnectionstatechange 事件](/zh-CN/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event)
- - [icegatheringstatechange 事件](/zh-CN/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event)
- - [negotiationneeded 事件](/zh-CN/docs/Web/API/RTCPeerConnection/negotiationneeded_event)
- - [removestream 事件](/zh-CN/docs/Web/API/RTCPeerConnection/removestream_event)
- - [signalingstatechange 事件](/zh-CN/docs/Web/API/RTCPeerConnection/signalingstatechange_event)
- - [track 事件](/zh-CN/docs/Web/API/RTCPeerConnection/track_event)
-
-- {{DOMxRef("ScriptProcessorNode")}}
-
- - [audioprocess 事件](/zh-CN/docs/Web/API/ScriptProcessorNode/audioprocess_event)
-
-- {{DOMxRef("ServiceWorkerContainer")}}
-
- - [message 事件](/zh-CN/docs/Web/API/ServiceWorkerContainer/message_event)
-
-- {{DOMxRef("ServiceWorkerGlobalScope")}}
-
- - [activate 事件](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/activate_event)
- - [contentdelete 事件](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/contentdelete_event)
- - [install 事件](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/install_event)
- - [message 事件](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/message_event)
- - [notificationclick 事件](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event)
- - [pushsubscriptionchange 事件](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event)
- - [push 事件](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/push_event)
-
-- {{DOMxRef("SharedWorkerGlobalScope")}}
-
- - [connect 事件](/zh-CN/docs/Web/API/SharedWorkerGlobalScope/connect_event)
-
-- {{DOMxRef("SpeechRecognition")}}
-
- - [audioend 事件](/zh-CN/docs/Web/API/SpeechRecognition/audioend_event)
- - [audiostart 事件](/zh-CN/docs/Web/API/SpeechRecognition/audiostart_event)
- - [end 事件](/zh-CN/docs/Web/API/SpeechRecognition/end_event)
- - [error 事件](/zh-CN/docs/Web/API/SpeechRecognition/error_event)
- - [nomatch 事件](/zh-CN/docs/Web/API/SpeechRecognition/nomatch_event)
- - [result 事件](/zh-CN/docs/Web/API/SpeechRecognition/result_event)
- - [soundend 事件](/zh-CN/docs/Web/API/SpeechRecognition/soundend_event)
- - [soundstart 事件](/zh-CN/docs/Web/API/SpeechRecognition/soundstart_event)
- - [speechend 事件](/zh-CN/docs/Web/API/SpeechRecognition/speechend_event)
- - [speechstart 事件](/zh-CN/docs/Web/API/SpeechRecognition/speechstart_event)
- - [start 事件](/zh-CN/docs/Web/API/SpeechRecognition/start_event)
-
-- {{DOMxRef("SpeechSynthesis")}}
-
- - [voiceschanged 事件](/zh-CN/docs/Web/API/SpeechSynthesis/voiceschanged_event)
-
-- {{DOMxRef("SpeechSynthesisUtterance")}}
-
- - [boundary 事件](/zh-CN/docs/Web/API/SpeechSynthesisUtterance/boundary_event)
- - [end 事件](/zh-CN/docs/Web/API/SpeechSynthesisUtterance/end_event)
- - [error 事件](/zh-CN/docs/Web/API/SpeechSynthesisUtterance/error_event)
- - [mark 事件](/zh-CN/docs/Web/API/SpeechSynthesisUtterance/mark_event)
- - [pause 事件](/zh-CN/docs/Web/API/SpeechSynthesisUtterance/pause_event)
- - [resume 事件](/zh-CN/docs/Web/API/SpeechSynthesisUtterance/resume_event)
- - [start 事件](/zh-CN/docs/Web/API/SpeechSynthesisUtterance/start_event)
-
-- {{DOMxRef("SVGAnimationElement")}}
-
- - [beginEvent 事件](/zh-CN/docs/Web/API/SVGAnimationElement/beginEvent_event)
- - [endEvent 事件](/zh-CN/docs/Web/API/SVGAnimationElement/endEvent_event)
- - [repeatEvent 事件](/zh-CN/docs/Web/API/SVGAnimationElement/repeatEvent_event)
-
-- {{DOMxRef("SVGElement")}}
-
- - [abort 事件](/zh-CN/docs/Web/API/SVGElement/abort_event)
- - [error 事件](/zh-CN/docs/Web/API/SVGElement/error_event)
- - [load 事件](/zh-CN/docs/Web/API/SVGElement/load_event)
- - [resize 事件](/zh-CN/docs/Web/API/SVGElement/resize_event)
- - [scroll 事件](/zh-CN/docs/Web/API/SVGElement/scroll_event)
- - [unload 事件](/zh-CN/docs/Web/API/SVGElement/unload_event)
-
-- {{DOMxRef("SVGGraphicsElement")}}
-
- - [copy 事件](/zh-CN/docs/Web/API/SVGGraphicsElement/copy_event)
- - [cut 事件](/zh-CN/docs/Web/API/SVGGraphicsElement/cut_event)
- - [paste 事件](/zh-CN/docs/Web/API/SVGGraphicsElement/paste_event)
-
-- {{DOMxRef("TextTrack")}}
-
- - [cuechange 事件](/zh-CN/docs/Web/API/TextTrack/cuechange_event)
-
-- {{DOMxRef("TextTrackList")}}
-
- - [addtrack 事件](/zh-CN/docs/Web/API/TextTrackList/addtrack_event)
- - [change 事件](/zh-CN/docs/Web/API/TextTrackList/change_event)
- - [removeTrack 事件](/zh-CN/docs/Web/API/TextTrackList/removeTrack_event)
-
-- {{DOMxRef("VideoTrackList")}}
-
- - [addtrack 事件](/zh-CN/docs/Web/API/VideoTrackList/addtrack_event)
- - [change 事件](/zh-CN/docs/Web/API/VideoTrackList/change_event)
- - [removetrack 事件](/zh-CN/docs/Web/API/VideoTrackList/removetrack_event)
-
-- {{DOMxRef("VisualViewport")}}
-
- - [resize 事件](/zh-CN/docs/Web/API/VisualViewport/resize_event)
- - [scroll 事件](/zh-CN/docs/Web/API/VisualViewport/scroll_event)
-
-- {{DOMxRef("WebSocket")}}
-
- - [close 事件](/zh-CN/docs/Web/API/WebSocket/close_event)
- - [error 事件](/zh-CN/docs/Web/API/WebSocket/error_event)
- - [message 事件](/zh-CN/docs/Web/API/WebSocket/message_event)
- - [open 事件](/zh-CN/docs/Web/API/WebSocket/open_event)
-
-- {{DOMxRef("Window")}}
-
- - [afterprint 事件](/zh-CN/docs/Web/API/Window/afterprint_event)
- - [animationcancel 事件](/zh-CN/docs/Web/API/Window/animationcancel_event)
- - [animationend 事件](/zh-CN/docs/Web/API/Window/animationend_event)
- - [animationiteration 事件](/zh-CN/docs/Web/API/Window/animationiteration_event)
- - [animationstart 事件](/zh-CN/docs/Web/API/Window/animationstart_event)
- - [appinstalled 事件](/zh-CN/docs/Web/API/Window/appinstalled_event)
- - [beforeprint 事件](/zh-CN/docs/Web/API/Window/beforeprint_event)
- - [beforeunload 事件](/zh-CN/docs/Web/API/Window/beforeunload_event)
- - [blur 事件](/zh-CN/docs/Web/API/Window/blur_event)
- - [copy 事件](/zh-CN/docs/Web/API/Window/copy_event)
- - [cut 事件](/zh-CN/docs/Web/API/Window/cut_event)
- - [devicemotion 事件](/zh-CN/docs/Web/API/Window.devicemotion_event)
- - [deviceorientation 事件](/zh-CN/docs/Web/API/Window.deviceorientation_event)
- - [error 事件](/zh-CN/docs/Web/API/Window/error_event)
- - [focus 事件](/zh-CN/docs/Web/API/Window/focus_event)
- - [gamepadconnected 事件](/zh-CN/docs/Web/API/Window/gamepadconnected_event)
- - [gamepaddisconnected 事件](/zh-CN/docs/Web/API/Window/gamepaddisconnected_event)
- - [hashchange 事件](/zh-CN/docs/Web/API/Window/hashchange_event)
- - [languagechange 事件](/zh-CN/docs/Web/API/Window/languagechange_event)
- - [load 事件](/zh-CN/docs/Web/API/Window/load_event)
- - [messageerror 事件](/zh-CN/docs/Web/API/Window/messageerror_event)
- - [message 事件](/zh-CN/docs/Web/API/Window/message_event)
- - [offline 事件](/zh-CN/docs/Web/API/Window/offline_event)
- - [online 事件](/zh-CN/docs/Web/API/Window/online_event)
- - [orientationchange 事件](/zh-CN/docs/Web/API/Window/orientationchange_event)
- - [pagehide 事件](/zh-CN/docs/Web/API/Window/pagehide_event)
- - [pageshow 事件](/zh-CN/docs/Web/API/Window/pageshow_event)
- - [paste 事件](/zh-CN/docs/Web/API/Window/paste_event)
- - [popstate 事件](/zh-CN/docs/Web/API/Window/popstate_event)
- - [rejectionhandled 事件](/zh-CN/docs/Web/API/Window/rejectionhandled_event)
- - [resize 事件](/zh-CN/docs/Web/API/Window/resize_event)
- - [storage 事件](/zh-CN/docs/Web/API/Window/storage_event)
- - [transitioncancel 事件](/zh-CN/docs/Web/API/Window/transitioncancel_event)
- - [transitionend 事件](/zh-CN/docs/Web/API/Window/transitionend_event)
- - [transitionrun 事件](/zh-CN/docs/Web/API/Window/transitionrun_event)
- - [transitionstart 事件](/zh-CN/docs/Web/API/Window/transitionstart_event)
- - [unhandledrejection 事件](/zh-CN/docs/Web/API/Window/unhandledrejection_event)
- - [unload 事件](/zh-CN/docs/Web/API/Window/unload_event)
- - [vrdisplayactivate 事件](/zh-CN/docs/Web/API/Window/vrdisplayactivate_event)
- - [vrdisplayblur 事件](/zh-CN/docs/Web/API/Window/vrdisplayblur_event)
- - [vrdisplayconnect 事件](/zh-CN/docs/Web/API/Window/vrdisplayconnect_event)
- - [vrdisplaydeactivate 事件](/zh-CN/docs/Web/API/Window/vrdisplaydeactivate_event)
- - [vrdisplaydisconnect 事件](/zh-CN/docs/Web/API/Window/vrdisplaydisconnect_event)
- - [vrdisplayfocus 事件](/zh-CN/docs/Web/API/Window/vrdisplayfocus_event)
- - [vrdisplaypointerrestricted 事件](/zh-CN/docs/Web/API/Window/vrdisplaypointerrestricted_event)
- - [vrdisplaypointerunrestricted 事件](/zh-CN/docs/Web/API/Window/vrdisplaypointerunrestricted_event)
- - [vrdisplaypresentchange 事件](/zh-CN/docs/Web/API/Window/vrdisplaypresentchange_event)
-
-- {{DOMxRef("Worker")}}
-
- - [messageerror 事件](/zh-CN/docs/Web/API/Worker/messageerror_event)
- - [message 事件](/zh-CN/docs/Web/API/Worker/message_event)
-
-- {{DOMxRef("WorkerGlobalScope")}}
-
- - [languagechange 事件](/zh-CN/docs/Web/API/WorkerGlobalScope/languagechange_event)
-
-- {{DOMxRef("XMLHttpRequest")}}
-
- - [abort 事件](/zh-CN/docs/Web/API/XMLHttpRequest/abort_event)
- - [error 事件](/zh-CN/docs/Web/API/XMLHttpRequest/error_event)
- - [loadend 事件](/zh-CN/docs/Web/API/XMLHttpRequest/loadend_event)
- - [loadstart 事件](/zh-CN/docs/Web/API/XMLHttpRequest/loadstart_event)
- - [load 事件](/zh-CN/docs/Web/API/XMLHttpRequest/load_event)
- - [progress 事件](/zh-CN/docs/Web/API/XMLHttpRequest/progress_event)
- - [timeout 事件](/zh-CN/docs/Web/API/XMLHttpRequest/timeout_event)
-
-- {{DOMxRef("XRReferenceSpace")}}
-
- - [reset 事件](/zh-CN/docs/Web/API/XRReferenceSpace/reset_event)
-
-- {{DOMxRef("XRSession")}}
-
- - [end 事件](/zh-CN/docs/Web/API/XRSession/end_event)
- - [inputsourceschange 事件](/zh-CN/docs/Web/API/XRSession/inputsourceschange_event)
- - [selectend 事件](/zh-CN/docs/Web/API/XRSession/selectend_event)
- - [selectstart 事件](/zh-CN/docs/Web/API/XRSession/selectstart_event)
- - [select 事件](/zh-CN/docs/Web/API/XRSession/select_event)
- - [squeezeend 事件](/zh-CN/docs/Web/API/XRSession/squeezeend_event)
- - [squeezestart 事件](/zh-CN/docs/Web/API/XRSession/squeezestart_event)
- - [squeeze 事件](/zh-CN/docs/Web/API/XRSession/squeeze_event)
- - [visibilitychange 事件](/zh-CN/docs/Web/API/XRSession/visibilitychange_event)
-
-- {{DOMxRef("XRSystem")}}
-
- - [devicechange 事件](/zh-CN/docs/Web/API/XRSystem/devicechange_event)
-
## 规范
{{Specifications}}
diff --git a/files/zh-cn/web/html/attributes/index.md b/files/zh-cn/web/html/attributes/index.md
index f2539f1616a399..21a74f7b1c4ba5 100644
--- a/files/zh-cn/web/html/attributes/index.md
+++ b/files/zh-cn/web/html/attributes/index.md
@@ -721,23 +721,6 @@ HTML 中的元素拥有**属性**（attribute）；这些额外的值可以配
<td>{{ HTMLElement("meter") }}</td>
<td>指示低值区间的上限值。</td>
</tr>
- <tr>
- <td>
- <code><a href="/zh-CN/docs/Web/HTML/Element/html#manifest">manifest</a></code>
- {{deprecated_inline}}
- </td>
- <td>{{ HTMLElement("html") }}</td>
- <td>
- 指定文档的缓存清单的 URL。
- <div class="note">
- <p>
- <strong>备注：</strong>该属性已过时，请使用
- <a href="/zh-CN/docs/Web/Manifest"><code><link rel="manifest"></code></a>
- 代替。
- </p>
- </div>
- </td>
- </tr>
<tr>
<td>
<code><a href="/zh-CN/docs/Web/HTML/Attributes/max">max</a></code>
diff --git a/files/zh-cn/web/html/element/body/index.md b/files/zh-cn/web/html/element/body/index.md
index b1db82c8d2ca1f..14baabe8a7f7e8 100644
--- a/files/zh-cn/web/html/element/body/index.md
+++ b/files/zh-cn/web/html/element/body/index.md
@@ -1,53 +1,138 @@
---
title: <body>：文档主体元素
slug: Web/HTML/Element/body
+l10n:
+ sourceCommit: e3f162d122a38c8dc81a1e733894c5c54d134454
---
{{HTMLSidebar}}
-**HTML `body` 元素**表示文档的内容。{{domxref("document.body")}} 属性提供了可以轻松访问文档的 body 元素的脚本。
+**`<body>`** [HTML](/zh-CN/docs/Web/HTML) 元素表示 HTML 文档的内容。文档中只能有一个 `<body>` 元素。
+
+## 属性
+
+这个元素只包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
+
+- `alink` {{deprecated_inline}}
+ - : 选中时超链接文本的颜色。**请勿使用此属性！请结合使用 CSS {{cssxref("color")}} 属性和 {{cssxref(":active")}} 伪类来代替。**
+- `background` {{deprecated_inline}}
+ - : 用作背景的图片的 URI。**请勿使用此属性！请在元素上使用 CSS {{cssxref("background")}} 属性来代替。**
+- `bgcolor` {{deprecated_inline}}
+ - : 文档的背景颜色。**请勿使用此属性！请在元素上使用 CSS {{cssxref("background-color")}} 属性来代替。**
+- `bottommargin` {{deprecated_inline}}
+ - : body 底部的外边距。**请勿使用此属性！请在元素上使用 CSS {{cssxref("margin-bottom")}} 属性来代替。**
+- `leftmargin` {{deprecated_inline}}
+ - : body 左侧的外边距。**请勿使用此属性！请在元素上使用 CSS {{cssxref("margin-left")}} 属性来代替。**
+- `link` {{deprecated_inline}}
+ - : 未访问超文本链接文本的颜色。**请勿使用此属性！请结合使用 CSS {{cssxref("color")}} 属性和 {{cssxref(":link")}} 伪类来代替。**
+- `onafterprint`
+ - : 当用户打印文档后调用的函数。
+- `onbeforeprint`
+ - : 当用户要求打印文档时调用的函数。
+- `onbeforeunload`
+ - : 当文档即将卸载时调用的函数。
+- `onblur`
+ - : 当文档失去焦点时调用的函数。
+- `onerror`
+ - : 当文档无法正常加载时调用的函数。
+- `onfocus`
+ - : 当文档收到焦点时调用的函数。
+- `onhashchange`
+ - : 当文档当前地址的片段标识符部分（以 `'#'` 字符开头）发生变化时调用的函数。
+- `onlanguagechange`
+ - : 当首选语言发生变化时调用的函数。
+- `onload`
+ - : 当文档加载完成后调用的函数。
+- `onmessage`
+ - : 当文档收到消息时调用的函数。
+- `onoffline`
+ - : 当网络通信失败时调用的函数。
+- `ononline`
+ - : 当网络通信恢复后调用的函数。
+- `onpopstate`
+ - : 当用户浏览会话历史时调用的函数。
+- `onresize`
+ - : 当文档大小调整时调用的函数。
+- `onstorage`
+ - : 当存储区域发生变化时调用的函数。
+- `onunload`
+ - : 当文档即将被卸载时调用的函数。
+- `rightmargin` {{deprecated_inline}}
+ - : body 右侧的外边距。**请勿使用此属性！请在元素上使用 CSS {{cssxref("margin-right")}} 属性来代替。**
+- `text` {{deprecated_inline}}
+ - : 文字的前景色。**请勿使用此属性！请在元素上使用 CSS {{cssxref("color")}} 属性来代替。**
+- `topmargin` {{deprecated_inline}}
+ - : body 顶部的外边距。**请勿使用此属性！在元素上使用 CSS {{cssxref("margin-top")}} 属性来代替。**
+- `vlink` {{deprecated_inline}}
+ - : 已访问超文本链接文本的颜色。**请勿使用此属性！请结合使用 CSS {{cssxref("color")}} 属性和 {{cssxref(":visited")}} 伪类来代替。**
+
+## 示例
+
+```html
+<html lang="zh-CN">
+ <head>
+ <title>文档标题</title>
+ </head>
+ <body>
+ <p>
+ <code><body></code> HTML 元素代表 HTML
+ 文档的内容。一个文档中只能有一个 <code><body></code> 元素。
+ </p>
+ </body>
+</html>
+```
+
+### 结果
+
+{{EmbedLiveSample('示例')}}
+
+## 技术概要
<table class="properties">
<tbody>
<tr>
<th scope="row">
- <a href="/zh-CN/docs/Web/HTML/Content_categories">内容分类</a>
+ <a href="/zh-CN/docs/Web/HTML/Content_categories"
+ >内容分类</a
+ >
</th>
<td>
- <a
- href="/zh-CN/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots"
- >Sectioning root</a
- >.
+ 无。
</td>
</tr>
<tr>
<th scope="row">允许的内容</th>
<td>
- <a href="/zh-CN/docs/Web/HTML/Content_categories#Flow_content"
- >Flow content</a
- >.
+ <a href="/zh-CN/docs/Web/HTML/Content_categories#流式内容"
+ >流式内容</a
+ >。
</td>
</tr>
<tr>
- <th scope="row">Tag omission</th>
+ <th scope="row">标签省略</th>
<td>
- The start tag may be omitted if the first thing inside it is not a space
- character, comment, {{HTMLElement("script")}} element or
- {{HTMLElement("style")}} element. The end tag may be omitted if
- the <code><body></code> element has contents or has a start tag,
- and is not immediately followed by a comment.
+ 如果开始标签内的第一个内容不是空格符、注释、{{HTMLElement("script")}} 元素或 {{HTMLElement("style")}} 元素，则可以省略起始标签。如果 <code><body></code> 元素有内容或有开始标记，且后面没有紧跟注释，则可以省略结束标记。
</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>
- 它必须是
- <a href="/zh-CN/docs/Web/HTML/Element/html">html</a> 元素的直接子元素。
+ 它必须是 {{HTMLElement("html")}} 元素的第二个元素。
</td>
</tr>
<tr>
- <th scope="row">Permitted ARIA roles</th>
- <td>None</td>
+ <th scope="row">隐含的 ARIA 角色</th>
+ <td>
+ <code
+ ><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/generic_role"
+ >generic</a
+ ></code
+ >
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">允许的 ARIA 角色</th>
+ <td>没有允许的 <code>role</code></td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
@@ -55,12 +140,10 @@ slug: Web/HTML/Element/body
{{domxref("HTMLBodyElement")}}
<ul>
<li>
- <code>body</code> 元素接口 {{domxref("HTMLBodyElement")}}
- 。
+ <code><body></code> 元素使用 {{domxref("HTMLBodyElement")}} 接口。
</li>
<li>
- 你可以通过 {{domxref("document.body")}} 属性访问
- <code>body</code> 元素。
+ 你可以通过 {{domxref("document.body")}} 属性访问 <code><body></code> 元素。
</li>
</ul>
</td>
@@ -68,80 +151,6 @@ slug: Web/HTML/Element/body
</tbody>
</table>
-## 属性
-
-此元素包含 [全局属性](/zh-CN/docs/Web/HTML/Global_attributes) 。
-
-- `alink` {{Deprecated_Inline}}
- - : 超链接选中之后的文本颜色。_此方法不符合规范，请使用 CSS 的 {{cssxref("color")}} 属性和 {{cssxref(":active")}} 伪类替代。_
-- `background` {{Deprecated_Inline}}
- - : 将 URI 所指向的图片作为背景。此方法不符合规范，请*使用* _CSS 的 {{cssxref("background")}} 属性替代。_
-- `bgcolor` {{Deprecated_Inline}}
- - : 文档的背景颜色。此方法不符合规范，请使用 _CSS 的 {{cssxref("background-color")}} 属性替代。_
-- `bottommargin` {{Deprecated_Inline}}
- - : `body` 的底外边距。此方法不符合规范，请使用 _CSS 的 {{cssxref("margin-bottom")}} 属性替代。_
-- `leftmargin` {{Deprecated_Inline}}
- - : `body` 的左外边距。此方法不符合规范，请使用 _CSS 的 {{cssxref("margin-left")}} 属性替代。_
-- `link` {{Deprecated_Inline}}
- - : 未访问过的超链接文本颜色。此方法不符合规范，请使用 _CSS 的 {{cssxref("color")}} 属性和 {{cssxref(":link")}} 伪类替代。_
-- `onafterprint`
- - : 用户完成文档打印之后调用的函数。
-- `onbeforeprint`
- - : 用户要求打印文档之前调用的函数。
-- `onbeforeunload`
- - : 文档即将被关闭之前调用的函数。
-- `onblur`
- - : 文档失去焦点时调用的函数。
-- `onerror`
- - : 文档加载失败时调用的函数。
-- `onfocus`
- - : 文档获得焦点时调用的函数。
-- `onhashchange`
- - : 文档当前地址的片段标识部分（以 (`'#'`) 开始的部分）发生改变时调用的函数。
-- `onlanguagechange` {{experimental_inline}}
- - : 用户选择的语言发生改变时调用的函数。
-- `onload`
- - : 文档完成加载时调用的函数。
-- `onmessage`
- - : 文档接收到消息时调用的函数。
-- `onoffline`
- - : 网络连接失败时调用的函数。
-- `ononline`
- - : 网络连接恢复时调用的函数。
-- `onpopstate`
- - : 用户回退历史记录时调用的函数。
-- `onredo`
- - : 用户重做操作时调用的函数。
-- `onresize`
- - : 文档尺寸发生改变时调用的函数。
-- `onstorage`
- - : 存储内容（`localStorage` / `sessionStorage`）发生改变时调用的函数。
-- `onundo`
- - : 用户撤销操作时调用的函数。
-- `onunload`
- - : 文档关闭时调用的函数。
-- `rightmargin` {{Deprecated_Inline}}
- - : `body` 的右外边距。此方法不符合规范，请使用 _CSS 的 {{cssxref("margin-right")}} 属性替代。_
-- `text` {{Deprecated_Inline}}
- - : 文本颜色。此方法不符合规范，请使用 _CSS 的 {{cssxref("color")}} 属性替代。_
-- `topmargin` {{Deprecated_Inline}}
- - : `body` 的上外边距。此方法不符合规范，请使用 _CSS 的 {{cssxref("margin-top")}} 属性替代。_
-- `vlink` {{Deprecated_Inline}}
- - : 访问过的超链接的文本颜色。此方法不符合规范，请使用 _CSS {{cssxref("color")}} 属性和 {{cssxref(":visited")}} 伪类替代。_
-
-## 例子
-
-```html
-<html>
- <head>
- <title>Document title</title>
- </head>
- <body>
- <p>This is a paragraph</p>
- </body>
-</html>
-```
-
## 规范
{{Specifications}}
diff --git a/files/zh-cn/web/html/element/canvas/index.md b/files/zh-cn/web/html/element/canvas/index.md
index d1834d41d4c71b..2e7e7b5566e4d0 100644
--- a/files/zh-cn/web/html/element/canvas/index.md
+++ b/files/zh-cn/web/html/element/canvas/index.md
@@ -91,6 +91,4 @@ ctx.fillRect(10, 10, 100, 100);
- [MDN canvas portal](/zh-CN/docs/Web/API/Canvas_API)
- [Canvas tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial)
- [Canvas cheat sheet](https://simon.html5.org/dump/html5-canvas-cheat-sheet.html)
-
-- [Canvas-related demos](/zh-CN/docs/Web/Demos#canvas)
- [Canvas introduction by Apple](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html)
diff --git a/files/zh-cn/web/html/element/html/index.md b/files/zh-cn/web/html/element/html/index.md
index 8fd375c542b0f5..44986f98481cf9 100644
--- a/files/zh-cn/web/html/element/html/index.md
+++ b/files/zh-cn/web/html/element/html/index.md
@@ -1,11 +1,47 @@
---
title: <html>：HTML 文档/根元素
slug: Web/HTML/Element/html
+l10n:
+ sourceCommit: bf671984cfef2f7c6419571d834a146c5424ac10
---
{{HTMLSidebar}}
-[HTML](/zh-CN/docs/Web/HTML) **`<html>`** 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为*根元素*。所有其他元素必须是此元素的后代。
+[HTML](/zh-CN/docs/Web/HTML) **`<html>`** 元素表示 HTML 文档的根（顶级元素），所以它也被称为*根元素*。其他所有元素必须是此元素的后代。
+
+## 属性
+
+该元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
+
+- `version` {{deprecated_inline}}
+ - : 指定用于组织当前文档的 HTML {{glossary("Doctype", "文档类型定义")}}的版本。这个属性已不再需要，因为这与文档类型声明中的版本信息重复。
+- `xmlns`
+ - : 指定文档的 {{glossary("XML")}} {{glossary("Namespace", "命名空间")}}。默认的值是 `"http://www.w3.org/1999/xhtml"`。这在由 XML {{glossary("parser", "解析器")}}解析的文档中是必需的，而在 text/html 文档中是可选的。
+
+## 示例
+
+```html
+<!doctype html>
+<html lang="zh">
+ <head>
+ <!-- … -->
+ </head>
+ <body>
+ <!-- … -->
+ </body>
+</html>
+```
+
+## 无障碍考虑
+
+虽然 HTML 并不要求作者指定 `<html>` 元素的开始和结束标记，但作者必须这样做，因为这将允许他们为网页指定 [`lang`](/zh-CN/docs/Web/HTML/Global_attributes#lang)。根据 {{RFC(5646, "识别语言的标签（也称为 BCP 47）")}}，在 `<html>` 元素上提供一个带有有效语言标记的 `lang` 属性，将有助于屏幕阅读技术确定要宣告的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它，屏幕阅读器通常会默认使用操作系统设置的语言，这可能会导致发音错误。
+
+在 `<html>` 元素中包含一个有效的 `lang` 声明，还可以确保页面的 {{HTMLElement("head")}} 中包含的重要元数据（如页面的 {{HTMLElement("title")}}）也会被正确地宣告。
+
+- [MDN | 理解 WCAG，准则 3.1 的解释](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Understandable#准则_3.1——可读性：使文本内容可读，可理解)
+- [理解成功标准 3.1.1 | W3C 理解 WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html)
+
+## 技术概要
<table class="properties">
<tbody>
@@ -18,10 +54,10 @@ slug: Web/HTML/Element/html
<td>一个 {{HTMLElement("head")}} 元素，后跟一个 {{HTMLElement("body")}} 元素</td>
</tr>
<tr>
- <th scope="row">忽略标签</th>
+ <th scope="row">标签省略</th>
<td>
- 如果 <code><html></code> 元素中的第一个元素不是注释，则可以忽略开始标签。<br>
- 如果 <code><html></code> 元素没有紧接着注释，则可以忽略结束标签。
+ 如果 <code><html></code> 元素中的第一个元素不是注释，则可以省略开始标签。<br>
+ 如果 <code><html></code> 元素没有紧接着注释，则可以省略结束标签。
</td>
</tr>
<tr>
@@ -38,7 +74,7 @@ slug: Web/HTML/Element/html
</tr>
<tr>
<th scope="row">允许的 ARIA 角色</th>
- <td>无</td>
+ <td>没有允许的角色（<code>role</code>）</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
@@ -47,40 +83,6 @@ slug: Web/HTML/Element/html
</tbody>
</table>
-## 属性
-
-元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
-
-- `manifest` {{deprecated_inline}} {{Non-standard_Inline}}
- - : 指定一个资源清单的 {{glossary("URI")}}，指示应在本地缓存的资源。
-- `version` {{deprecated_inline}}
- - : 指定控制当前文档的 HTML 版本{{glossary("Doctype", "文档类型定义")}}。这个属性已不再需要，因为这在文档类型声明中是多余的版本信息。
-- `xmlns`
- - : 指派文档的 {{glossary("XML")}} {{glossary("Namespace", "命名空间")}}。默认的值是`"http://www.w3.org/1999/xhtml"`。这在由 XML {{glossary("parser", "解析器")}}解析的文档中是必需的，而在 text/html 文档中是可选的。
-
-## 示例
-
-```html
-<!doctype html>
-<html lang="zh">
- <head>
- <!-- … -->
- </head>
- <body>
- <!-- … -->
- </body>
-</html>
-```
-
-## 无障碍考虑
-
-虽然 HTML 并不要求作者指定 `<html>` 元素的开始和结束标记，但作者必须这样做，因为这将允许他们为网页指定 [`lang`](/zh-CN/docs/Web/HTML/Global_attributes#lang)。根据 {{RFC(5646, "识别语言的标签（也称为 BCP 47）")}}，在 `<html>` 元素上提供一个带有有效语言标记的 `lang` 属性，将有助于屏幕阅读技术确定要发布的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它，屏幕阅读器通常会默认使用操作系统设置的语言，这可能会导致发音错误。
-
-在 `<html>` 元素中包含一个有效的 `lang` 声明，还可以确保页面的 {{HTMLElement("head")}} 中包含的重要元数据，如页面的 {{HTMLElement("title")}}，也会被正确地声明。
-
-- [MDN | 理解 WCAG，指引 3.1 的解释](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.1_%e2%80%94_readable_make_text_content_readable_and_understandable)
-- [理解成功准则 3.1.1 | W3C 理解 WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html)
-
## 规范
{{Specifications}}
diff --git a/files/zh-cn/web/html/element/search/index.md b/files/zh-cn/web/html/element/search/index.md
new file mode 100644
index 00000000000000..d374ecf4d30dcf
--- /dev/null
+++ b/files/zh-cn/web/html/element/search/index.md
@@ -0,0 +1,165 @@
+---
+title: <search>：通用搜索元素
+slug: Web/HTML/Element/search
+l10n:
+ sourceCommit: fdd3ac5598c3ddceb71e59949b003936ae99f647
+---
+
+{{HTMLSidebar}}
+
+**`<search>`** [HTML](/zh-CN/docs/Web/HTML) 元素是一个容器，代表文档或应用程序中包含与执行搜索或过滤操作相关的表单控件或其他内容的部分。`<search>` 元素在语义上标识了元素内容的用途——具有搜索或过滤功能。搜索或过滤功能可以针对网站或应用程序、当前网页或文档，也可以针对整个互联网或其子部分。
+
+## 属性
+
+这个元素只包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
+
+## 使用说明
+
+`<search>` 元素不是用来显示搜索结果的。相反，搜索或过滤结果应作为该网页主要内容的一部分。也就是说，属于搜索或筛选功能中“快速搜索”功能的建议和链接，应嵌套在 `<search>` 元素的内容中——因为它们是搜索功能的特性。
+
+## 无障碍考虑
+
+`<search>` 元素定义了 [`search`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/search_role) 地标。这样就不需要在 {{HTMLElement('form')}} 元素中添加 `role=search` 了。
+
+## 示例
+
+### 标题搜索表单
+
+此示例演示了如何将 `<search>` 作为网站页眉中的搜索容器，以执行简单的全站搜索。`<search>` 是向服务器提交用户输入的搜索查询的 {{HTMLElement("form")}} 的语义容器。
+
+#### HTML
+
+```html
+<header>
+ <h1>电影网站</h1>
+ <search>
+ <form action="./search/">
+ <label for="movie">查找电影</label>
+ <input type="search" id="movie" name="q" />
+ <button type="submit">搜索</button>
+ </form>
+ </search>
+</header>
+```
+
+#### 结果
+
+{{EmbedLiveSample('标题搜索表单')}}
+
+### Web 应用搜索
+
+此示例演示了在 web 应用程序中动态加入 JavaScript 搜索功能时可能出现的 DOM 内容。在完全使用 JavaScript 实现搜索功能时，如果没有提交表单，则既不需要 {{HTMLElement("form")}} 元素，也不需要提交 {{HTMLElement("button")}} 元素。从语义上讲，`<search>` 元素包含搜索和过滤功能。
+
+#### HTML
+
+```html
+<search>
+ <label>
+ 查找和过滤你的查询
+ <input type="search" id="query" />
+ </label>
+ <label>
+ <input type="checkbox" id="exact-only" />
+ 仅精确匹配
+ </label>
+
+ <section>
+ <h3>结果：</h3>
+ <ul id="results">
+ <!-- 搜索结果内容 -->
+ </ul>
+ <output id="no-results">
+ <!-- 无结果内容 -->
+ </output>
+ </section>
+</search>
+```
+
+#### 结果
+
+{{EmbedLiveSample('Web 应用搜索')}}
+
+> **备注：** 请记住，有些用户没有 JavaScript，而在 JavaScript 成功下载、解析和执行之前，你的用户都不会运行 JavaScript，因此请确保你的用户在禁用 JavaScript 的情况下也能访问网站内容。
+
+### 多重搜索
+
+此示例演示了一个具有两种搜索特性的页面。首先是位于页眉的全局网站搜索。第二种是基于页面上下文的搜索和筛选，在我们的例子中是汽车搜索。
+
+#### HTML
+
+```html
+<body>
+ <header>
+ <h1>汽车租赁公司</h1>
+ <search title="网站">...</search>
+ </header>
+ <main>
+ <h2>可供出租的汽车</h2>
+ <search title="汽车">
+ <h3>筛选结果</h3>
+ ...
+ </search>
+ <article>
+ <!-- 搜索结果内容 -->
+ </article>
+ </main>
+</body>
+```
+
+#### 结果
+
+{{EmbedLiveSample('多重搜索')}}
+
+## 技术概要
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">
+ <a href="/zh-CN/docs/Web/HTML/Content_categories">内容分类</a>
+ </th>
+ <td>
+ <a href="/zh-CN/docs/Web/HTML/Content_categories#流式内容">流式内容</a>、<a href="/zh-CN/docs/Web/HTML/Content_categories#短语内容">短语内容</a>。
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">允许的内容</th>
+ <td>
+ <a href="/zh-CN/docs/Web/HTML/Content_categories#流式内容">流式内容</a>。
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">标签省略</th>
+ <td>不允许，开始标签和结束标签都不能省略。</td>
+ </tr>
+ <tr>
+ <th scope="row">隐含的 ARIA 角色</th>
+ <td>
+ <code><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/search_role">search</a></code>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">允许的 ARIA 角色</th>
+ <td>
+ <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/form_role"><code>form</code></a>、<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>、<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>、<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>、<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/region_role"><code>region</code></a>、<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/search_role"><code>search</code></a>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">DOM 接口</th>
+ <td>{{domxref("HTMLElement")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 其他搜索相关元素：{{HTMLElement("header")}}、{{HTMLElement("footer")}}、{{HTMLElement("aside")}}、{{HTMLElement("nav")}}、{{HTMLElement("form")}}
+- [ARIA：Search 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/search_role)
diff --git a/files/zh-cn/web/html/element/th/index.md b/files/zh-cn/web/html/element/th/index.md
index 3d1d0963531968..26caff5a019757 100644
--- a/files/zh-cn/web/html/element/th/index.md
+++ b/files/zh-cn/web/html/element/th/index.md
@@ -3,124 +3,117 @@ title: <th>
slug: Web/HTML/Element/th
---
-**HTML `<th>` 元素**定义表格内的表头单元格。这部分特征是由 [`scope`](/zh-CN/docs/Web/HTML/Element/th#scope) 和 [`headers`](/zh-CN/docs/Web/HTML/Element/th#headers) 属性准确定义的。
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row"><a href="/zh-CN/docs/HTML/Content_categories">内容范畴</a></th>
- <td>无</td>
- </tr>
- <tr>
- <th scope="row">允许内容</th>
- <td>
- <div class="content-models">
- <div id="table-mdls">流内容（除 header、footer、sectioning content 或 heading content 的继承。）</div>
- </div>
- </td>
- </tr>
- <tr>
- <th scope="row">遗漏标签</th>
- <td>开始标签是必需要的，而结束标签有时可以省略：当其后是{{HTMLElement("th")}} 或 {{HTMLElement("td")}} ，或者其后没有其他数据内容在其父元素内，。</td>
- </tr>
- <tr>
- <th scope="row">允许的父级元素</th>
- <td> {{HTMLElement("tr")}} 元素</td>
- </tr>
- <tr>
- <th scope="row"><dfn>元素类型</dfn></th>
- <td>任何</td>
- </tr>
- <tr>
- <th scope="row">DOM 接口</th>
- <td>{{domxref("HTMLTableHeaderCellElement")}}</td>
- </tr>
- </tbody>
-</table>
-
-## 属性
-
-该元素包含 [全局属性](/zh-CN/docs/Web/HTML/Global_attributes)
-
-- `abbr` {{Deprecated_Inline}}
-
- - : 这个属性包含一个关于单元格内容的简单的介绍。一个用户代理（例如，语音阅读器）可能出现在描述之前。
-
- > **备注：** 不要使用这个属性，因为它已经在最新标准中过时。相对的，你可以把简短的描述放置于单元格内，把较长的描述内容放到 title 属性内。
-
-- `align` {{Deprecated_Inline}}
-
- - : 这个枚举属性指定单元格内容的水平对齐方式。可能的值有：
-
- - `left`: 单元格内容左对齐
- - `center`: 单元格内容居中
- - `right`: 单元格内容右对齐
- - `justify` (仅文字内容): 内容拉伸以覆盖单元格
- - `char` (仅文字内容): 内容相对`<th>`标签中的某个字符对齐（默认值是页面语言的小数点字符）。该字符由[`char`](/zh-CN/docs/Web/HTML/Element/th#char) 和[`charoff`](/zh-CN/docs/Web/HTML/Element/th#charoff) 属性定义。对齐方式的默认值是 `left`.
-
- > **备注：** 不要使用这个属性，因为它已经在最新标准中过时。
- >
- > - `left`, `center`, `right` 或 `justify` 这些对齐效果，应该使用 CSS 的{{cssxref("text-align")}} 来实现。
- > - `char` 的对齐效果使用 CSS 的 {{cssxref("text-align")}} 实现，[`char`](/zh-CN/docs/Web/HTML/Element/th#char) 亦同。
-
-- `axis` {{Deprecated_Inline}}
-
- - : 这个属性包含了一个空间分隔的字符串的列表。每个字符串是一组单元格的 ID，而该表头适用于这个 ID。
-
- > **备注：** 不要使用这个属性，因为它已经在最新标准中过时。应该使用 [`scope`](/zh-CN/docs/Web/HTML/Element/th#scope) 属性代替。
-
-- `bgcolor` {{Non-standard_inline}}
-
- - : 这个属性定义了每列中每单元格的背景色。它由带有‘#’前缀的 6 位数的十六进制码组成，并在[sRGB](https://www.w3.org/Graphics/Color/sRGB)中被定义。这个属性可能会用到十六个预定义的颜色字符串儿之一。
-
- > **备注：** 不要使用这个属性，它不是标准属性且仅在某些版本的 Microsoft Internet Explorer 支持：{{HTMLElement("th")}} 元素应当用[CSS](/zh-CN/docs/CSS)来样式化。为了创造出同样的效果只需要使用[CSS](/zh-CN/docs/CSS)中的{{cssxref("background-color")}}属性就可以啦。
-
-- `char` {{Deprecated_inline}}
+{{HTMLSidebar}}
- - : 列中的内容与 `<th>` 元素中的字母对齐。通常其值包含一个句点（`.`）来排列数字或者货币值。如果 [`align`](/zh-CN/docs/Web/HTML/Element/th#align) 没有被设置为 `char`，这个属性就会被忽略。
+**HTML `<th>` 元素**定义表格内的表头单元格。这部分特征是由 [`scope`](#scope) 和 [`headers`](#headers) 属性准确定义的。
-- `charoff` {{Deprecated_inline}}
+{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}
- - : 这个属性用来将列数据移到 **char** 属性指定字母的右边。其值指定了移动的长度。
+## 属性
- > **备注：** 不要使用这个属性，因为它已经在最新标准中过时。
+该元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
+- `abbr`
+ - : 一个简短的描述，作为对表头单元格内容的替代标签，用于在其他上下文中引用该单元格。一些用户代理（如语音阅读器）可能会在内容本身之前呈现此描述。
- `colspan`
- - : 这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为`1` 。超过 1000 的值被视作 1000。
+ - : 一个非负整数值，指示表头单元格跨越或扩展多少列。默认值为 `1`。用户代理会将大于 1000 的值视为不正确，而默认将其设置为 1。
- `headers`
- - : 这个属性包含了一个空间分隔的字符串的列表，每个与其他{{HTMLElement("th")}}元素相关联的`id` 属性一一对应。
+ - : 包含了一个空格分隔的字符串（对应于为此表头单元格提供标题的 `<th>` 元素的 `id` 属性）的列表。
- `rowspan`
- - : 这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为`1.` 如果该值被设置为 `0`, 这个单元格就被扩展为 ({{HTMLElement("thead")}}，{{HTMLElement("tbody")}} 或{{HTMLElement("tfoot")}}) 中表格部分的最后一个元素。比 65534 大的值被视作 65534。
+ - : 一个非负整数值，指示表头单元格跨越或扩展多少行。默认值为 `1`。如果该值被设置为 `0`，这个单元格就被扩展到 `<th>` 所属的表格分组部分（{{HTMLElement("thead")}}、{{HTMLElement("tbody")}} 或 {{HTMLElement("tfoot")}}）的最后一个单元。比 `65534` 大的值被会被裁剪到 `65534`。
- `scope`
- - : 这个枚举属性定义了表头元素 (在{{HTMLElement("th")}}中定义) 关联的单元格。它可能有以下值：
+ - : 定义了表头元素（在 `<th>` 中定义）关联的单元格。可能的{{Glossary("enumerated", "枚举")}}值如下：
+
+ - `row`：表头关联所属的行中所有的单元格。
+ - `col`：表头关联所属的列中所有的单元格。
+ - `rowgroup`：表头属于一个行组并与其中所有单元格相关联。
+ - `colgroup`：表头属于一个列组并与其中所有单元格相关联。
- - `row`: 表头关联一行中所有的单元格。
- - `col`: 表头关联一列中所有的单元格。
- - `rowgroup`:表头属于一个行组并与其中所有单元格相关联。这些单元格可以被放在表头的左侧或右侧，取决于 {{HTMLElement("table")}} 元素中 [`dir`](/zh-CN/docs/Web/HTML/Global_attributes/dir) 属性的值。
- - `colgroup`: 表头属于一个列组并与其中所有单元格相关联。
- - `auto`
+ 如果未指定 `scope` 属性，或其值不是 `row`、`col`、`rowgroup` 或 `colgroup`，则浏览器会自动选择标题单元格适用的单元格集。
-- `valign` {{Deprecated_inline}}
+### 已弃用的属性
- - : 这个属性指定了单元格内文本的垂直对齐方式。这个属性可能有以下值：
+以下属性已被弃用，不应使用。下面记录它们是为了在更新现有代码时提供参考，并供参考历史。
- - `baseline`: 将文本置于单元格底部并将其与字母的[baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29)对齐而不是与底部。若字母没有 `baseline` 以下的部分（即为无[降部](https://www.wikiwand.com/zh/%E9%99%8D%E9%83%A8)）那么 `baseline` 值起到的效果便和 `bottom` 相同。
- - `bottom`: 将文本置于底部。
- - `middle`: 将文本置于单元格中央。
- - `top`: 将文本置于单元格顶部。
+- `align` {{deprecated_inline}}
+ - : 指定单元格内容的水平对齐方式。可能的{{Glossary("enumerated", "枚举")}}值有：`left`、`center`、`right`、`justify`、`char`。在受支持的情况下，`char` 值可以让文本内容根据 [`char`](#char) 属性中指定的字符以及 [`charoff`](#charoff) 属性指定的偏移量进行对齐。该属性已弃用，请使用 CSS {{cssxref("text-align")}} 属性代替。
+- `axis` {{deprecated_inline}}
+ - : 包含一个空格分隔的字符串列表。每个字符串对应一组该表头适用的单元格的 `id` 属性。该属性以弃用，请使用 [`scope`](#scope) 属性代替。
+- `bgcolor` {{deprecated_inline}}
+ - : 定义表头单元格的背景色。其值为 HTML 颜色；可以是带有“#”前缀的 [6 位十六进制的 RGB 代码](/zh-CN/docs/Web/CSS/hex-color)或[颜色关键字](/zh-CN/docs/Web/CSS/named-color)。不支持其他的 CSS {{cssxref("color_value", "<color>")}} 值。该属性已弃用，请使用 CSS {{cssxref("background-color")}} 属性代替。
+- `char` {{deprecated_inline}}
+ - : 无任何行为。它最初用于将内容与表头单元格的指定字符对齐。当尝试对齐数字或货币值时，其值通常包含一个句点（`.`）。如果 [`align`](#align) 属性没有设置为 `char`，则此属性将被忽略。
+- `charoff` {{deprecated_inline}}
+ - : 无任何行为。它最初用于指定表头单元格内容与 [`char`](#char) 属性指定的字符之间的偏移量。
+- `height` {{deprecated_inline}}
+ - : 定义建议的表头单元格高度。该属性已弃用，请使用 CSS {{cssxref("height")}} 属性代替。
+- `valign` {{deprecated_inline}}
+ - : 指定表头单元格内文本的垂直对齐方式。可能的{{Glossary("enumerated", "枚举值")}}有：`baseline`、`bottom`、`middle` 和 d `top`。该属性已弃用，请使用 CSS {{cssxref("vertical-align")}} 属性代替。
+- `width` {{deprecated_inline}}
+ - : 定义建议的表头单元格宽度。该属性已弃用，请使用 CSS {{cssxref("width")}} 属性代替。
- > **备注：** 不要使用这个属性，因为它已经在最新标准中过时。使用 CSS {{cssxref("vertical-align")}}特性代替。
+## 使用说明
-- `width` {{Deprecated_inline}}
+- 只能在 {{HTMLElement("tr")}} 元素内使用 `<th>`。
+- 在简单的上下文中，在表头单元格（`<th>` 元素）上使用 [`scope`](#scope) 属性是多余的，因为 [`scope`](#scope) 会被默认推断。然而，某些辅助技术可能无法正确推断，因此指定标题范围可能会改善用户体验。
+- 当使用 [`colspan`](#colspan) 和 [`rowspan`](#rowspan) 属性来使表头单元格跨越多个列和行时，未定义这些属性的单元格（默认为 1）会自动适配表结构中的空闲可用空间，跨越 1x1 单元格，如下图所示：
- - : 这个属性用来定义一个期望的单元格宽。额外的空间可以藉由[cellspacing](/zh-CN/docs/Web/API/HTMLTableElement/cellSpacing)和 [cellpadding](/zh-CN/docs/Web/API/HTMLTableElement/cellPadding) 属性来增加，并且{{HTMLElement("col")}}元素的宽也可以创造额外空间。但是，如果一列宽太窄以至于无法恰当显示 某单元格时，它会被自动加宽。
+
- > **备注：** 不要使用这个属性，因为它已经在最新标准中过时。使用 CSS {{cssxref("width")}}属性代替。
+> **备注：** 这些属性不能用于重叠单元格。
## 示例
-参考 {{HTMLElement("table")}} 中 `<th>`的示例内容。
+参考 {{HTMLElement("table")}} 中 `<th>` 的示例内容。
+
+## 技术概要
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">
+ <a href="/zh-CN/docs/Web/HTML/Content_categories"
+ >内容分类</a
+ >
+ </th>
+ <td>无。</td>
+ </tr>
+ <tr>
+ <th scope="row">允许的内容</th>
+ <td>
+ <a href="/zh-CN/docs/Web/HTML/Content_categories#流式内容"
+ >流式内容 content</a
+ >，但不能有页眉（header）、页脚（footer）、分段内容或标题内容作为后代元素。
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">标签省略</th>
+ <td>
+ 开始标签是必须的。<br />结束标签有时可以省略：当其后是 {{HTMLElement("th")}} 或
+ {{HTMLElement("td")}} 元素，或者其后没有其他数据内容在其父元素内。
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">允许的父元素</th>
+ <td>{{HTMLElement("tr")}} 元素。</td>
+ </tr>
+ <tr>
+ <th scope="row">隐含的 ARIA 角色</th>
+ <td>
+ <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role"><code>columnheader</code></a> 或 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/rowheader_role"><code>rowheader</code></a>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">允许的 ARIA 角色</th>
+ <td>任意</td>
+ </tr>
+ <tr>
+ <th scope="row">DOM 接口</th>
+ <td>{{domxref("HTMLTableCellElement")}}</td>
+ </tr>
+ </tbody>
+</table>
## 规范
@@ -130,8 +123,14 @@ slug: Web/HTML/Element/th
{{Compat}}
-## 参阅
-
-- Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.
-
-{{HTMLSidebar}}
+## 参见
+
+- [学习：HTML 表格](/zh-CN/docs/Learn/HTML/Tables)
+- {{HTMLElement("caption")}}、{{HTMLElement("col")}}、{{HTMLElement("colgroup")}}、{{HTMLElement("table")}}、{{HTMLElement("tbody")}}、{{HTMLElement("td")}}、 {{HTMLElement("tfoot")}}、{{HTMLElement("thead")}}、{{HTMLElement("tr")}}：其他与表格相关的元素
+- {{cssxref("background-color")}}：用于设置每个表头单元格的背景颜色的 CSS 属性
+- {{cssxref("border")}}：用于控制表头单元格边框的 CSS 属性
+- {{cssxref("height")}}：用于控制建议的表头单元格高度的 CSS 属性
+- {{cssxref("text-align")}}：用于水平对齐每个表头单元格的内容的 CSS 属性
+- {{cssxref("vertical-align")}}：用于垂直对齐每个表头单元格的内容的 CSS 属性
+- {{cssxref("width")}}：用于控制建议的表头单元格宽度的 CSS 属性
+- {{cssxref(":nth-of-type")}}、{{cssxref(":first-of-type")}}、{{cssxref(":last-of-type")}}：用于选择所需的表头单元格的 CSS 伪类
diff --git a/files/zh-cn/web/html/reference/index.md b/files/zh-cn/web/html/reference/index.md
index 8517a3e191388b..fbb515a2373a7d 100644
--- a/files/zh-cn/web/html/reference/index.md
+++ b/files/zh-cn/web/html/reference/index.md
@@ -1,26 +1,21 @@
---
title: HTML 参考
slug: Web/HTML/Reference
+l10n:
+ sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35
---
{{HTMLSidebar}}
-HTML 是一种描述 Web 文档结构和语义的语言；它由**元素**组成，每个元素可以有一些**属性**。网页中的内容通过 HTML 元素标记，如{{HTMLElement("img")}}、{{HTMLElement("title")}}、{{HTMLElement("p")}}、{{HTMLElement("div")}} 等等。
-
-本文提供了你进行 Web 开发时可以参考的资料。MDN 提供了组成 HTML 的所有元素的参考和每个属性的参考，这些属性可以控制元素的行为。
-
-## 内容
+这篇 [HTML](/zh-CN/docs/Web/HTML) 参考描述了 HTML 中所有的**元素**和**属性**，包含适用于所有元素的**全局属性**。
- [HTML 元素参考](/zh-CN/docs/Web/HTML/Element)
- - : 此页面列出了所有 tag 创建的 HTML elements。它们按功能分组，以帮助你轻松找到想要的内容。页面左侧边栏中列出了所有元素，当然也包含在了这个页面中。
+ - : 此页面列出了所有使用标签创建的 HTML 元素。
- [HTML 属性参考](/zh-CN/docs/Web/HTML/Attributes)
- : HTML 中的元素是有属性的；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。
- [全局属性](/zh-CN/docs/Web/HTML/Global_attributes)
- - : TBD
-- [链接类型](/zh-CN/docs/Web/HTML/Link_types)
- - : 在超文本标记语言中，在两种文档之间可以指定\<a>, \<area>或\<link> 元素使一个页面链接到另一个页面。
-
-## 指南和教程
-
-- [HTML 开发者指南](/zh-CN/docs/Web/Guide/HTML)
- - : MDN 文章介绍了用于构建网页的特定 HTML 技巧，还有教程和其他资料。
+ - : 全局属性是所有 HTML 元素共有的属性；它们可用于所有元素，但对某些元素可能不起作用。
+- [内容分类](/zh-CN/docs/Web/HTML/Content_categories)
+ - : 每个 HTML 元素都是一个或多个内容类别的成员——这些类别将具有共同特征的元素组合在一起。
+- [HTML 中使用的日期和时间格式](/zh-CN/docs/Web/HTML/Date_and_time_formats)
+ - : 某些 HTML 元素允许将日期和/或时间指定为属性或属性值。这些元素包括 {{HTMLElement("input")}} 元素的日期和时间变体，以及 {{HTMLElement("ins")}} 和 {{HTMLElement("del")}} 元素。
diff --git a/files/zh-cn/web/http/conditional_requests/index.md b/files/zh-cn/web/http/conditional_requests/index.md
index 2b0cac4f6872ee..86182f7526bf27 100644
--- a/files/zh-cn/web/http/conditional_requests/index.md
+++ b/files/zh-cn/web/http/conditional_requests/index.md
@@ -5,7 +5,7 @@ slug: Web/HTTP/Conditional_requests
{{HTTPSidebar}}
-在 HTTP 协议中有一个“**条件式请求**”的概念，在这类请求中，请求的结果，甚至请求成功的状态，都会随着验证器与受影响资源的比较结果的变化而变化。这类请求可以用来验证缓存的有效性，省去不必要的控制手段，以及验证文件的完整性，例如在断点续传的场景下或者在上传或者修改服务器端的文件的时候避免更新丢失问题。
+在 HTTP 中有一个*条件请求*的概念，在这类请求中，请求的结果，甚至请求成功的状态，都会随着验证器与受影响资源的比较结果的变化而变化。这类请求可以用来验证缓存的有效性，省去不必要的控制手段，以及验证文件的完整性，例如在断点续传的场景下或者在上传或者修改服务器端的文件的时候避免更新丢失问题。
## 基本原理
@@ -13,8 +13,8 @@ slug: Web/HTTP/Conditional_requests
请求引发的不同的反应取决于请求所使用的方法，以及组成前置条件首部集合：
-- 对于安全（{{glossary("safe")}}）方法来说，例如 {{HTTPMethod("GET")}}，通常用来获取文件，条件请求可以被用来限定仅在满足条件的情况下返回文件。这样可以节省带宽。
-- 对于非安全（{{glossary("safe", "unsafe")}}）方法来说，例如 {{HTTPMethod("PUT")}} 方法，通常用来上传文件，条件请求可以被用来限定仅在满足文件的初始版本与服务器上的版本相同的条件下才会将其上传。
+- 对于{{glossary("Safe/HTTP", "安全")}}方法来说，例如 {{HTTPMethod("GET")}}，通常用来获取文件，条件请求可以被用来限定仅在满足条件的情况下返回文件。这样可以节省带宽。
+- 对于{{glossary("Safe/HTTP", "非安全")}}方法来说，例如 {{HTTPMethod("PUT")}} 方法，通常用来上传文件，条件请求可以被用来限定仅在满足文件的初始版本与服务器上的版本相同的条件下才会将其上传。
## 验证器
@@ -61,19 +61,19 @@ slug: Web/HTTP/Conditional_requests
条件式请求最常见的应用场景是更新缓存。假如缓存为空，或者是没有缓存的话，被请求资源会以状态码 {{HTTPStatus("200")}} `OK` 返回。
-
+
验证器会同资源一起返回，它们出现在首部字段中。在这个例子中， {{HTTPHeader("Last-Modified")}} 与 {{HTTPHeader("ETag")}} 都被返回，不过如果只返回其中的一个也是可以的。这些验证器会同资源一起被缓存起来（与所有的首部一样），并在在缓存失效的时候用来发起条件式请求。
-只要缓存未失效，就不会发起任何请求。但是一旦失效——主要是由 {{HTTPHeader("Cache-Control")}} 首部控制——客户端就不会采用缓存值而是发起条件式请求。验证器的值会用作 {{HTTPHeader("If-Modified-Since")}} 和 {{HTTPHeader("If-Match")}} 首部字段的参数。
+只要缓存未失效，就不会发起任何请求。但是一旦失效——主要是由 {{HTTPHeader("Cache-Control")}} 首部控制——客户端就不会采用缓存值而是发起条件式请求。验证器的值会用作 {{HTTPHeader("If-Modified-Since")}} 和 {{HTTPHeader("If-None-Match")}} 首部字段的参数。
假如资源未发生变化，服务器就返回状态码为 {{HTTPStatus("304")}} `Not Modified` 的响应。这样相当于对缓存资源进行了刷新，而客户端则采用被缓存的资源。尽管这里有一次请求/响应往返会消耗一定的资源，但是这样做比将整个资源通过网络再传输一遍更高效。
-
+
假如资源发生了变化，服务器就直接返回 {{HTTPStatus("200")}} `OK` 响应码，连同新版本的资源，就像是没有应用条件式请求一样；客户端则采用新版本资源（并将其缓存起来）。
-
+
除了需要在服务器端对验证器进行设置以外，该机制是透明的：所有的浏览器都会对缓存资源进行管理，在不需要 Web 开发者进行任何特殊处理的情况下发送条件式请求。
@@ -81,21 +81,21 @@ slug: Web/HTTP/Conditional_requests
文件的增量下载是 HTTP 协议规定的一项功能，它允许恢复先前的操作，通过保存先前已经获得的信息来节省带宽和时间：
-
+
支持增量下载的服务器会通过 {{HTTPHeader("Accept-Ranges")}} 首部来广播这项能力。此后客户端就可以通过发送 {{HTTPHeader("Ranges")}} 首部字段以及缺失的范围值来进行断点续传了：
-
+
基本原理很简单，但是这里有一个潜在的问题：如果要下载的资源在两次下载之间进行了修改，得到的数据范围就会对应该资源的两个不同的版本，那么最终获得的文件是损坏的。
为了防止这种情况的发生，需要使用条件式请求。对于范围请求来说，有两种方法可以实现这个目的。更灵活一些的方法是使用 {{HTTPHeader("If-Modified-Since")}} 和 {{HTTPHeader("If-Match")}} 首部，假如前置条件失败，服务器端会返回错误提示，然后客户端可以从头开始重新下载资源：
-
+
尽管这种方法行得通，但是它在文件发生变化的情况下增加了一次额外的请求/响应往返。这一点会影响性能。为此 HTTP 协议规定了一个特定的首部——{{HTTPHeader("If-Range")}}——来避免这种情况的发生：
-
+
该方法更高效，但是缺乏一定的灵活性，因为条件值只能是实体标签。不过这种额外的灵活性很少会需要。
@@ -105,29 +105,29 @@ slug: Web/HTTP/Conditional_requests
使用 {{HTTPMethod("PUT")}} 方法可以实现上述机制。客户端首先读取原始文件，然后进行修改，最后将它们推送到服务器上：
-
+
-不幸的是，当把并发情况考虑在内的时候，事情变得有些不那么确定。当一个客户端在本地修改它新获得的资源副本的时候，另外一个客户端同样可以获取一份资源副本并进行同样的操作。接下来要发生的事情就不那么顺利了：当二者提交回服务器的时候，前一个客户端作出的修改会被第二个客户端的推送所覆盖，因为第二个客户端对于第一个客户端做出的修改一无所知。最终的结果则取决于获胜的一方，但是该结果不会通知给另一方。哪一个客户端作出的修改将会被保存下来，会由于它们提交的速度而有所不同；提交的速度则依赖于客户端及服务器端的性能，甚至是使用客户端进行编辑的人的表现。每一次的胜出者都会有所不同。这种情况被称作竞态条件（{{glossary("race condition")}} ），会导致难以捉摸的情况的发生，并且难以探测和除错：
+不幸的是，当把并发情况考虑在内的时候，事情变得有些不那么确定。当一个客户端在本地修改它新获得的资源副本的时候，另外一个客户端同样可以获取一份资源副本并进行同样的操作。接下来要发生的事情就不那么顺利了：当二者提交回服务器的时候，前一个客户端作出的修改会被第二个客户端的推送所覆盖，因为第二个客户端对于第一个客户端做出的修改一无所知。最终的结果则取决于获胜的一方，但是该结果不会通知给另一方。哪一个客户端作出的修改将会被保存下来，会由于它们提交的速度而有所不同；提交的速度则依赖于客户端及服务器端的性能，甚至是使用客户端进行编辑的人的表现。每一次的胜出者都会有所不同。这种情况被称作*竞态条件*，会导致难以捉摸的情况的发生，并且难以探测和除错：
-
+
不存在解决这一问题而不打扰双方某一方的办法。然而，更新丢失问题以及竞态条件是需要避免的。我们希望获得可预测的结果，并且希望在更新操作被拒绝的时候客户端可以得到反馈。
条件式请求可以被用在**乐观锁算法**（大多数 wiki 系统和版本管理系统采用的是该算法）的实现上。其思路是，允许所有的客户端获得资源的副本，然后在本地进行编辑，通过只允许第一个客户端成功提交的方式来控制并发操作。其余的基于现今已过期版本的更新操作都会被拒绝：
-
+
这种方式的实现需要用到 {{HTTPHeader("If-Match")}} 或 {{HTTPHeader("If-Unmodified-Since")}} 首部。假如实体标签与源头文件的实体标签不一致，或者源头文件在被获取副本之后经过了修改，那么此次变更请求就会被拒绝，收到 {{HTTPStatus("412")}} `Precondition Failed` 的错误提示。之后就需要依靠客户端来处理该错误了：或者通知用户重新开始（基于最新的版本），或者是给用户展示两个版本之间的**差异**，辅助他们决定要保留哪些变更。
### 处理资源的首次上传问题
-资源的首次上传问题是前面所描述的情况的一个极端情况。与任何资源更新问题一样，当两个客户端在大致相同的时间进行上传操作的时候，就会遇到竞态条件。为了防止这种情况的发生，可以使用条件式请求：添加 {{HTTPHeader("If-None-Match")}} 首部，并将其值设置为`'*'`, 表示任意实体标签。当且仅当资源先前并不存在的情况下请求的操作才会成功执行：
+资源的首次上传问题是前面所描述的情况的一个极端情况。与任何资源更新问题一样，当两个客户端在大致相同的时间进行上传操作的时候，就会遇到竞态条件。为了防止这种情况的发生，可以使用条件式请求：添加 {{HTTPHeader("If-None-Match")}} 首部，并将其值设置为 `'*'`, 表示任意实体标签。当且仅当资源先前并不存在的情况下请求的操作才会成功执行：
-
+
`If-None-Match` 首部只可应用于兼容 HTTP/1.1（及后续版本）的服务器。假如不确定所访问的服务器是否兼容，需要首先向要访问的资源发送一次 {{HTTPMethod("HEAD")}} 请求来进行确认。
-## 结语
+## 总结
条件式请求是 HTTP 协议中一项非常重要的特性，它使高效复杂的应用系统的构建得以实现。对于缓存或断点续传功能来说，站点管理员只需要正确配置服务器就可以了；在某些环境中设置正确的实体标签可能需要一些技巧。但一旦设置成功，浏览器就能够按照预期地发送条件式请求。
diff --git a/files/zh-cn/web/http/content_negotiation/index.md b/files/zh-cn/web/http/content_negotiation/index.md
index dffea6dacae449..9a76eb79b627b3 100644
--- a/files/zh-cn/web/http/content_negotiation/index.md
+++ b/files/zh-cn/web/http/content_negotiation/index.md
@@ -56,12 +56,6 @@ HTTP/1.1 规范指定了一系列的标准标头用于启动服务端驱动型
| `Viewport-Width` | 标明用 CSS 像素数值表示的布局视口（layout viewport）宽度。 |
| `Width` | 标明用物理像素值表示的资源宽度（换句话说就是一张图片的固有大小）。 |
-### `Accept-CH-Lifetime` 标头
-
-> **备注：** 这是被称为*客户端提示*的**实验性**技术方案的一部分，目前仅在 Chrome 61 及以后的版本中得到了实现。
-
-{{HTTPHeader("Accept-CH-Lifetime")}} 标头与 `Accept-CH` 标头的 `Device-Memory` 值一起使用，并指示设备应与服务器共享设备内存的时间量。该值以毫秒为单位给出，并且是可选的。
-
### `Accept-Encoding` 标头
{{HTTPHeader("Accept-Encoding")}} 标头明确说明了（接收端）可以接受的内容编码形式（所支持的压缩算法）。该标头的值是一个 Q 因子清单（例如 `br, gzip;q=0.8`），用来提示不同编码类型值的优先级顺序。默认值 `identity` 的优先级最低（除非声明为其他优先级）。
diff --git a/files/zh-cn/web/http/headers/accept-ch-lifetime/index.md b/files/zh-cn/web/http/headers/accept-ch-lifetime/index.md
deleted file mode 100644
index aea939e16dfba2..00000000000000
--- a/files/zh-cn/web/http/headers/accept-ch-lifetime/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Accept-CH-Lifetime
-slug: Web/HTTP/Headers/Accept-CH-Lifetime
-l10n:
- sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
----
-
-{{HTTPSidebar}}{{securecontext_header}}{{Deprecated_header}}{{Non-standard_header}}
-
-> **警告：** 在[草案第 8 版](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-08)中，该标头已被从规范中移除。
-
-**`Accept-CH-Lifetime`** 标头由服务器设置，用于指定其通过使用 {{HTTPHeader("Accept-CH")}} 指定的[客户端提示](/zh-CN/docs/Web/HTTP/Client_hints)标头在客户端的后续请求中应被包含的持续时间。
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row">标头类型</th>
- <td>{{Glossary("Response header", "响应标头")}}</td>
- </tr>
- <tr>
- <th scope="row">{{Glossary("Forbidden header name", "禁止修改的标头")}}</th>
- <td>否</td>
- </tr>
- <tr>
- <th scope="row">
- {{Glossary("CORS-safelisted request header", "列入 CORS 白名单的请求标头")}}
- </th>
- <td>否</td>
- </tr>
- </tbody>
-</table>
-
-> **备注：** 客户端提示只能在安全源（通过 TLS 协议）上访问。为了确保客户端提示能够可靠地发送，在所有安全请求中应持久化保存 {{HTTPHeader("Accept-CH")}} 和 {{HTTPHeader("Accept-CH-Lifetime")}} 标头信息。
-
-## 语法
-
-```http
-Accept-CH-Lifetime: <age>
-```
-
-## 示例
-
-```http
-Accept-CH: Viewport-Width
-Accept-CH-Lifetime: 86400
-```
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 参见
-
-- {{HTTPHeader("Accept-CH")}}
-- {{HTTPHeader("Vary")}}
diff --git a/files/zh-cn/web/http/headers/accept-ch/index.md b/files/zh-cn/web/http/headers/accept-ch/index.md
index 27d07656f66205..3ba09eff4f941e 100644
--- a/files/zh-cn/web/http/headers/accept-ch/index.md
+++ b/files/zh-cn/web/http/headers/accept-ch/index.md
@@ -28,7 +28,7 @@ l10n:
</tbody>
</table>
-> **备注：** 客户端提示只能在安全源（通过 TLS）上访问。所有安全的请求都应该持久化 `Accept-CH`（和 `Accept-CH-Lifetime`）标头，以确保客户端提示可靠地发送。
+> **备注：** 客户端提示只能在安全源（通过 TLS）上访问。所有安全的请求都应该持久化 `Accept-CH` 标头，以确保客户端提示可靠地发送。
## 语法
diff --git a/files/zh-cn/web/http/headers/cross-origin-resource-policy/index.md b/files/zh-cn/web/http/headers/cross-origin-resource-policy/index.md
index 851e9b18b5f96b..b25f85eaa50b90 100644
--- a/files/zh-cn/web/http/headers/cross-origin-resource-policy/index.md
+++ b/files/zh-cn/web/http/headers/cross-origin-resource-policy/index.md
@@ -1,32 +1,43 @@
---
title: Cross-Origin-Resource-Policy
slug: Web/HTTP/Headers/Cross-Origin-Resource-Policy
+l10n:
+ sourceCommit: b54373ab9025ceb6eb404bd2538ebd4c01576c60
---
{{HTTPSidebar}}
-> **备注：** 由于[Chrome 浏览器中的一个 Bug](https://bugs.chromium.org/p/chromium/issues/detail?id=952834), 设置 Cross-Origin-Resource-Policy（跨域资源策略）会使文件下载失败：当从设置了 CORP 请求头的资源服务器下载资源时，浏览器会阻止用户使用“保存”或“另存为”按钮将文件保存到本地。在决定生产环境中是否使用这一特性（CORP）之前需要慎重考虑。
-
-**`Cross-Origin-Resource-Policy`** 响应头会指示浏览器阻止对指定资源的无源跨域/跨站点请求。
-
-| Header type | {{Glossary("Response header")}} |
-| ------------------------------------- | ------------------------------- |
-| {{Glossary("Forbidden header name")}} | no |
+HTTP **`Cross-Origin-Resource-Policy`** 响应标头表示期望浏览器阻止对给定资源在 no-cors 模式下的跨源或跨站点请求。
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">标头类型</th>
+ <td>{{Glossary("Response header", "响应标头")}}</td>
+ </tr>
+ <tr>
+ <th scope="row">{{Glossary("Forbidden header name", "禁止修改的标头")}}</th>
+ <td>否</td>
+ </tr>
+ </tbody>
+</table>
## 语法
-```plain
-Cross-Origin-Resource-Policy: same-site | same-origin
+```http
+Cross-Origin-Resource-Policy: same-site | same-origin | cross-origin
```
-## 案例
+## 示例
-下面的响应头会导致兼容该响应头的用户代理禁止跨域访问和跨域资源共享：
+以下响应标头将导致兼容的用户代理拒绝 no-cors 模式下的跨源请求：
-```plain
+```http
Cross-Origin-Resource-Policy: same-origin
```
+有关更多示例，请参阅 <https://resourcepolicy.fyi/>。
+
## 规范
{{Specifications}}
@@ -35,6 +46,8 @@ Cross-Origin-Resource-Policy: same-origin
{{Compat}}
-## 相关文章
+## 参见
-- [Cross-Origin Resource Policy (CORP) explainer](</zh-CN/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)>)
+- [跨源资源策略（CORP）说明](/zh-CN/docs/Web/HTTP/Cross-Origin_Resource_Policy)
+- [考虑部署跨源资源策略](https://resourcepolicy.fyi/)
+- {{httpheader("Access-Control-Allow-Origin")}}
diff --git a/files/zh-cn/web/http/headers/device-memory/index.md b/files/zh-cn/web/http/headers/device-memory/index.md
index ec361f7003ec7e..e710f21df8254c 100644
--- a/files/zh-cn/web/http/headers/device-memory/index.md
+++ b/files/zh-cn/web/http/headers/device-memory/index.md
@@ -1,38 +1,59 @@
---
title: Device-Memory
slug: Web/HTTP/Headers/Device-Memory
+l10n:
+ sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3
---
-{{HTTPSidebar}}{{securecontext_header}}{{SeeCompatTable}}
-
-**`Device-Memory`** 是一个跟 [Device Memory API](/zh-CN/docs/Web/API/Device_Memory_API) 相关的请求头，它跟 [Client Hints](/zh-CN/docs/Glossary/Client_hints) 请求头的作用相似，用来表示客户端设备内存的近似大小。
-
-| Header type | {{Glossary("Request header")}} |
-| ------------------------------------- | ------------------------------ |
-| {{Glossary("Forbidden header name")}} | ? |
-
-> **备注：** Client Hints are accessible only on secure origins (via TLS). Server has to opt in to receive `Device-Memory` header from the client by sending {{HTTPHeader("Accept-CH")}} and {{HTTPHeader("Accept-CH-Lifetime")}} response headers.
+{{HTTPSidebar}}{{securecontext_header}}
+
+**`Device-Memory`** [设备客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#设备客户端提示)请求标头的字段指示客户端设备上可用内存的近似大小。该标头属于{{DOMxRef("Device Memory API", "设备内存 API", "", "nocode")}}。
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">标头类型</th>
+ <td>
+ {{Glossary("Request header", "请求标头")}}、<a href="/zh-CN/docs/Web/HTTP/Client_hints">客户端提示</a>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">{{Glossary("Forbidden header name", "禁止修改的标头")}}</th>
+ <td>否</td>
+ </tr>
+ </tbody>
+</table>
+
+> **备注：**
+>
+> - 客户端提示仅在安全来源（通过 TLS）上可用。
+> - 服务器必须通过发送 {{HTTPHeader("Accept-CH")}} 响应标头，才能接收来自客户端的 `Device-Memory` 标头。
+> - 选择加入 `Device-Memory` 客户端提示的服务器通常也会在 {{HTTPHeader("Vary")}} 标头中指定它。这会通知缓存服务器：服务器可能会根据请求中的标头值发送不同的响应。
## 语法
-设备的内存大小可能会被用作指纹变量，因此将这个取值设置的比较粗糙，以减少滥用它的可能性。请求头采用以下值：0.25、0.5、1、2、4、8。
-
-```plain
+```http
Device-Memory: <number>
```
+## 指令
+
+- `<number>`
+ - : 设备内存的近似大小。可能的值有：`0.25`、`0.5`、`1`、`2`、`4`、`8`。
+
+设备内存的大小可被用作{{glossary("fingerprinting", "指纹识别")}}的变量，因此标头的值故意设置得很粗略，以减小其被滥用的可能性。
+
## 示例
-服务器需要先发送包含 `Device-Memory` 的 {{HTTPHeader("Accept-CH")}} 和 {{HTTPHeader("Accept-CH-Lifetime")}} 响应头，来表明可以接收 `Device-Memory` 请求头。
+服务器需要先发送包含 `Device-Memory` 的 {{HTTPHeader("Accept-CH")}} 响应标头，来选择接收 `Device-Memory` 请求标头。
-```plain
+```http
Accept-CH: Device-Memory
-Accept-CH-Lifetime: 86400
```
接下来客户端发送的请求则可能会包含 `Device-Memory` 请求头：
-```plain
+```http
Device-Memory: 1
```
@@ -46,8 +67,16 @@ Device-Memory: 1
## 参见
-- [Device Memory API](/zh-CN/docs/Web/API/Device_Memory_API)
-- {{HTTPHeader("Accept-CH")}}
-- {{HTTPHeader("Accept-CH-Lifetime")}}
-- {{HTTPHeader("Vary")}}
+- [利用用户代理客户端提示改善用户隐私并提升开发者体验](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints)（developer.chrome.com）
+- {{DOMxRef("Device Memory API", "设备内存 API", "", "nocode")}}
- {{DOMxRef("Navigator.deviceMemory")}}
+- {{DOMxRef("WorkerNavigator.deviceMemory")}}
+- 设备客户端提示
+
+ - {{HTTPHeader("Content-DPR")}}
+ - {{HTTPHeader("DPR")}}
+ - {{HTTPHeader("Viewport-Width")}}
+ - {{HTTPHeader("Width")}}
+
+- {{HTTPHeader("Accept-CH")}}
+- [HTTP 缓存 > Vary 响应](/zh-CN/docs/Web/HTTP/Caching#vary_响应)和 {{HTTPHeader("Vary")}}
diff --git a/files/zh-cn/web/http/headers/dpr/index.md b/files/zh-cn/web/http/headers/dpr/index.md
index 87ba548558380c..19aed5c56e2470 100644
--- a/files/zh-cn/web/http/headers/dpr/index.md
+++ b/files/zh-cn/web/http/headers/dpr/index.md
@@ -1,37 +1,71 @@
---
title: DPR
slug: Web/HTTP/Headers/DPR
+l10n:
+ sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3
---
-{{HTTPSidebar}}{{securecontext_header}}{{SeeCompatTable}}
+{{HTTPSidebar}}{{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}}
-**`DPR`**请求头是“ [客户端提示”](/zh-CN/docs/Glossary/Client_hints)消息头，它代表客户端设备的像素比 ({{Glossary("DPR")}})，该比例是与每个 CSS 像素相对应的物理设备像素的数量。
+**`DPR`** [设备客户端提示](/zh-CN/docs/Web/HTTP/Client_hints)请求标头提供客户端设备的像素比。该比例是与每个 {{Glossary("CSS pixel", "CSS 像素")}}相对应的物理设备像素的数量。
-| Header type | {{Glossary("Request header")}} |
-| ------------------------------------- | ------------------------------ |
-| {{Glossary("Forbidden header name")}} | ? |
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">标头类型</th>
+ <td>
+ {{Glossary("Request header", "请求标头")}}、<a href="/zh-CN/docs/Web/HTTP/Client_hints">客户端提示</a>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">{{Glossary("Forbidden header name", "禁止修改的标头")}}</th>
+ <td>否</td>
+ </tr>
+ </tbody>
+</table>
-> **备注：** Client Hints are accessible only on secure origins (via TLS). Server has to opt in to receive `DPR` header from the client by sending {{HTTPHeader("Accept-CH")}} and {{HTTPHeader("Accept-CH-Lifetime")}} response headers.
+在选择与屏幕像素密度最匹配的图像源时，此提示非常有用。这类似于 `<img>` [`srcset`](/zh-CN/docs/Web/HTML/Element/img#srcset) 属性中 `x` 描述符的作用，其允许用户代理选择首选图像。
+
+如果服务器使用 `DPR` 提示来选择在响应中发送哪个资源，则响应必须包含 {{HTTPHeader("Content-DPR")}} 标头。如果 `Content-DPR` 的值与请求的 `DPR` 标头中的值不同，客户端必须使用 `Content-DPR` 的值进行布局。
+
+如果 `DPR` 标头出现在消息中多次，则使用最后一次出现的值。
+
+> **备注：**
+>
+> - 客户端提示仅在安全来源（通过 TLS）上可用。
+> - 服务器必须通过发送包含 `DPR` 的 {{HTTPHeader("Accept-CH")}} 响应标头，才能接收来自客户端的 `DPR` 标头。
+> - 选择加入 `DPR` 客户端提示的服务器通常也会在 {{HTTPHeader("Vary")}} 标头中指定它。这会通知缓存服务器，服务器可能会根据请求中的标头值发送不同的响应。
+> - 在 [draft-ietf-httpbis-client-hints-07](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07) 中，客户端提示规范已经移除了 `DPR`。建议的替代方案是 [`Sec-CH-DPR`](https://wicg.github.io/responsive-image-client-hints/#sec-ch-dpr)（响应式图像客户端提示）。
## 语法
-```plain
+```http
DPR: <number>
```
+## 指令
+
+- `<number>`
+ - : 客户端设备的像素比。
+
## 示例
-Server first needs to opt in to receive `DPR` header by sending the response headers {{HTTPHeader("Accept-CH")}} containing `DPR` and {{HTTPHeader("Accept-CH-Lifetime")}}.
+服务器必须首先通过发送包含 `DPR` 指令的 {{HTTPHeader("Accept-CH")}} 响应标头来选择接收 `DPR` 标头。
-```plain
+```http
Accept-CH: DPR
-Accept-CH-Lifetime: 86400
```
-Then on subsequent requests the client might send `DPR` header back:
+然后，在后续请求中，客户端可能会将 `DPR` 标头发送到服务器：
-```plain
-DPR: 1.0
+```http
+DPR: 2.0
+```
+
+如果带有 `DPR` 标头（如上所示）的请求是针对图像资源的，则服务器响应必须包含 {{HTTPHeader("Content-DPR")}} 标头：
+
+```http
+Content-DPR: 2.0
```
## 浏览器兼容性
@@ -40,6 +74,13 @@ DPR: 1.0
## 参见
+- [利用用户代理客户端提示改善用户隐私并提升开发者体验](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints)（developer.chrome.com）
+- 设备客户端提示
+
+ - {{HTTPHeader("Content-DPR")}}
+ - {{HTTPHeader("Device-Memory")}}
+ - {{HTTPHeader("Viewport-Width")}}
+ - {{HTTPHeader("Width")}}
+
- {{HTTPHeader("Accept-CH")}}
-- {{HTTPHeader("Accept-CH-Lifetime")}}
-- {{HTTPHeader("Vary")}}
+- [HTTP 缓存 > Vary 响应](/zh-CN/docs/Web/HTTP/Caching#vary_响应)和 {{HTTPHeader("Vary")}}
diff --git a/files/zh-cn/web/http/headers/index.md b/files/zh-cn/web/http/headers/index.md
index 70fc9ea9047df9..0a25c6d1221f73 100644
--- a/files/zh-cn/web/http/headers/index.md
+++ b/files/zh-cn/web/http/headers/index.md
@@ -1,5 +1,5 @@
---
-title: HTTP 标头（header）
+title: HTTP 标头
slug: Web/HTTP/Headers
---
@@ -67,11 +67,9 @@ HTTP [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints)是一组请求标头
服务器使用 {{HTTPHeader("Accept-CH")}} 主动向客户端请求它们感兴趣的客户端提示标头。客户端可以选择在后续的请求中包含请求的标头。
- {{HTTPHeader("Accept-CH")}} {{experimental_inline}}
- - : 服务器可以使用 `Accept-CH` 标头字段或具有 [`http-equiv`](/zh-CN/docs/Web/HTML/Element/meta#attr-http-equiv) 属性的等效 HTML `<meta>` 元素来宣告对客户端提示的支持。
-- {{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}} {{deprecated_inline}}
- - : 服务器可以要求客户端记住服务器在指定时间段内支持的客户端提示集合，以便在后续请求到服务器源站时能够传送客户端提示。
+ - : 服务器可以使用 `Accept-CH` 标头字段或具有 [`http-equiv`](/zh-CN/docs/Web/HTML/Element/meta#http-equiv) 属性的等效 HTML `<meta>` 元素来宣告对客户端提示的支持。
- {{HTTPHeader("Critical-CH")}} {{experimental_inline}}
- - : 服务器使用 `Critical-CH` 和 {{HttpHeader("Accept-CH")}} 来指定接受的客户端提示，也是[重要的客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#critical_client_hints)。
+ - : 服务器使用 `Critical-CH` 和 {{HttpHeader("Accept-CH")}} 来指定接受的客户端提示，也是[重要的客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#重要客户端提示)。
下面列出了不同类别的客户端提示。
diff --git a/files/zh-cn/web/http/overview/index.md b/files/zh-cn/web/http/overview/index.md
index a14e7428420595..66c4fc9959ada0 100644
--- a/files/zh-cn/web/http/overview/index.md
+++ b/files/zh-cn/web/http/overview/index.md
@@ -1,27 +1,29 @@
---
title: HTTP 概述
slug: Web/HTTP/Overview
+l10n:
+ sourceCommit: 5f0ee8a970aded9221273700aa8c5be964d6c1c1
---
{{HTTPSidebar}}
-**HTTP** 是一种用作获取诸如 HTML 文档这类资源的{{glossary("protocol","协议")}}。它是 Web 上进行任何数据交换的基础，同时，也是一种客户端—服务器（client-server）协议，也就是说，请求是由接受方——通常是浏览器——发起的。一个完整网页文档是由获取到的不同文档组件——像是文本、布局描述、图片、视频、脚本等——重新构建出来的。
+**HTTP** 是一种用作获取诸如 HTML 文档这类资源的{{glossary("protocol","协议")}}。它是 Web 上进行任何数据交换的基础，同时，也是一种客户端—服务器（client-server）协议，也就是说，请求是由接受方——通常是 Web 浏览器——发起的。完整网页文档通常由文本、布局描述、图片、视频、脚本等资源构成。
-
+
-客户端与服务端之间通过交换一个个独立的消息（而非数据流）进行通信。由客户端——通常是个浏览器——发出的消息被称作*请求*（request），由服务端发出的应答消息被称作*响应*（response）。
+客户端与服务端之间通过交换一个个独立的消息（而非数据流）进行通信。由客户端发出的消息被称作*请求*（request），由服务端发出的应答消息被称作*响应*（response）。
-
+
-20 世纪 90 年代，HTTP 作为一套可扩展的协议被设计出来，并随时间不断演进。HTTP 是一种应用层的协议，通过 {{glossary("TCP")}}，或者是 {{glossary("TLS")}}——一种加密过的 TCP 连接——来发送，当然，理论上来说可以借助任何可靠的传输协议。受益于 HTTP 的可扩展性，时至今日，它不仅可以用来获取超文本文档，还可用来获取图片、视频或者向服务端发送信息，比如填写好的 HTML 表单。HTTP 还可以用来获取文档的部分内容，以便按需更新 Web 页面。
+20 世纪 90 年代，HTTP 作为一套可扩展的协议被设计出来，并随时间不断演进。HTTP 是一种应用层的协议，通过 {{glossary("TCP")}} 或 {{glossary("TLS")}}（一种加密过的 TCP 连接）来发送，当然，理论上来说可以借助任何可靠的传输协议。受益于 HTTP 的可扩展性，时至今日，它不仅可以用来获取超文本文档，还可用来获取图片、视频或者向服务端发送信息，比如填写好的 HTML 表单。HTTP 还可以用来获取文档的部分内容，以便按需更新 Web 页面。
-## 基于 HTTP 的组件系统
+## 基于 HTTP 的系统的组成
-HTTP 是一个客户端—服务器协议：请求由一个实体，即用户代理（user agent），或是一个可以代表它的代理方（proxy）发出。大多数情况下，这个用户代理都是一个网页浏览器，不过它也可能是任何东西，比如一个爬取网页来充实、维护搜索引擎索引的机器爬虫。
+HTTP 是一个客户端—服务器协议：请求由一个实体，即用户代理（user agent），或是一个可以代表它的代理方（proxy）发出。大多数情况下，这个用户代理都是一个 Web 浏览器，不过它也可能是任何东西，比如一个爬取网页来充实、维护搜索引擎索引的机器爬虫。
-每个请求都会被发送到一个服务端，它会处理这个请求并提供一个称作*响应*的回复。在客户端与服务端之间，还有许许多多的被称为{{Glossary("Proxy_server", "代理")}}的实体，履行不同的作用，例如充当网关或{{Glossary("Cache", "缓存")}}。
+每个请求都会被发送到一个服务器，它会处理这个请求并提供一个称作*响应*的回复。在客户端与服务器之间，还有许许多多的被称为{{Glossary("Proxy_server", "代理")}}的实体，履行不同的作用，例如充当网关或{{Glossary("Cache", "缓存")}}。
-
+
实际上，在浏览器和处理其请求的服务器之间，还有路由器、调制解调器等等许多计算机。归功于 Web 的分层设计，这些机器都隐藏在网络层和传输层内。而 HTTP 位于这些机器之上的应用层。虽然下面的层级在诊断网络问题时很重要，但在描述 HTTP 的设计时，它们大多是不相干的。
@@ -31,19 +33,19 @@ HTTP 是一个客户端—服务器协议：请求由一个实体，即用户代
浏览器**总是**首先发起请求的那个实体，永远不会是服务端（不过，后来已经加入了一些机制，能够模拟出由服务端发起的消息）。
-为了展现一个网页，浏览器需要发送最初的请求来获取描述这个页面的 HTML 文档。接着，解析文档，并发送数个其他请求，响应地获取可执行脚本、展示用的布局信息（CSS）以及其他页面内的资源（一般是图片和视频等）。然后，浏览器将这些资源整合到一起，展现出一个完整的文档，即 Web 页面。之后的阶段，浏览器中执行的脚本可以获取更多资源，同时浏览器相应地更新网页。
+为了展现一个网页，浏览器需要发送最初的请求来获取描述这个页面的 HTML 文档。接着，解析文档，并发送数个其他请求，相应地获取可执行脚本、展示用的布局信息（CSS）以及其他页面内的子资源（一般是图片和视频等）。然后，Web 浏览器将这些资源整合到一起，展现出一个完整的文档，即网页。在之后的阶段，浏览器中执行的脚本可以获取更多资源，并且浏览器会相应地更新网页。
-一个 Web 页面是一个超文本文档。这意味着有一部分展示的内容会是链接——可以被激活（通常是点击鼠标）来获取一个新的网页——用户可以通过这些链接指示用户代理并进行网络浏览。浏览器会将收到的指示转换成 HTTP 请求，并进一步解析 HTTP 响应，向用户提供清楚的回复。
+网页是超文本文档。这意味着有一部分展示的内容会是链接——可以通过激活（通常是点击鼠标）来获取一个新的网页——用户可以通过这些链接指示用户代理并进行 Web 浏览。浏览器会将收到的指示转换成 HTTP 请求，并进一步解析 HTTP 响应，向用户提供清晰的响应。
-### Web 服务端
+### Web 服务器
-在上述通信过程的另一侧是服务端，它*负责提供*客户端所请求的文档。一个服务端可以假装表现为仅有一台机器，但实际上，它可以是共享负载的一组服务器集群（负载均衡）或是其他类型的软件（如缓存、数据库服务、电商服务等），按需完整或部分地生成文档。
+在上述通信过程的另一侧是服务器，它负责*提供*客户端所请求的文档。服务器可以表现为仅有一台机器，但实际上，它可以是共享负载的一组服务器集群（负载均衡）或是其他类型的软件（如缓存、数据库服务、电商服务等），按需完整或部分地生成文档。
-一个服务器可以不仅仅只有一台机器，而多个服务端软件实例也可部署在同一台机器上。利用 HTTP/1.1 和 {{HTTPHeader("Host")}} 标头，它们甚至可以共用同一个 IP 地址。
+服务器不一定只有一台机器，也可以在同一台机器上托管多个服务器软件实例。利用 HTTP/1.1 和 {{HTTPHeader("Host")}} 标头，它们甚至可以共用同一个 IP 地址。
### 代理
-在浏览器和服务器之间，有许多计算机和设备参与传递了 HTTP 消息。依靠 Web 技术栈的层次化的结构，传递过程中的多数操作都位于传输层、网络层或物理层，它们对于 HTTP 应用层而言就是透明的，并默默地对网络性能产生着重要影响。还有一部分实体在应用层参与消息传递，一般被称为**代理**（Proxy）。代理可以是透明的，即转发它们收到的请求并不做任何修改，也可以表现得不透明，将它传递给服务端之前使用一些手段修改这个请求。代理可以发挥很多种作用：
+在 Web 浏览器和服务器之间，有许多计算机和设备参与传递了 HTTP 消息。依靠 Web 技术栈的层次化的结构，传递过程中的多数操作都位于传输层、网络层或物理层，它们对于 HTTP 应用层而言就是透明的，并默默地对网络性能产生着重要影响。还有一部分实体在应用层参与消息传递，一般被称为**代理**（Proxy）。代理可以是透明的，即转发它们收到的请求并不做任何修改，也可以表现得不透明，将它传递给服务端之前使用一些手段修改这个请求。代理可以发挥很多种作用：
- 缓存（可以是公开的也可以是私有的，如浏览器的缓存）
- 过滤（如反病毒扫描、家长控制...）
@@ -59,41 +61,40 @@ HTTP 是一个客户端—服务器协议：请求由一个实体，即用户代
### HTTP 是可扩展的
-在 HTTP/1.0 中引入的 [HTTP 标头（header）](/zh-CN/docs/Web/HTTP/Headers)让协议扩展变得非常容易。只要服务端客户端之间对新标头的语义经过简单协商，新功能就可以被加入进来。
+在 HTTP/1.0 中引入的 [HTTP 标头](/zh-CN/docs/Web/HTTP/Headers)让该协议易于扩展和实验。只要服务器客户端之间对新标头的语义经过简单协商，新功能就可以被加入进来。
### HTTP 无状态，但并非无会话
HTTP 是无状态的：在同一个连接中，两个执行成功的请求之间是没有关系的。这就带来了一个问题，用户没有办法在同一个网站中进行连贯的交互，比如在电商网站中使用购物车功能。尽管 HTTP 根本上来说是无状态的，但借助 HTTP Cookie 就可使用有状态的会话。利用标头的扩展性，HTTP Cookie 被加进了协议工作流程，每个请求之间就能够创建会话，让每个请求都能共享相同的上下文信息或相同的状态。
-### HTTP 和网络连接
+### HTTP 和连接
-一个网络连接是由传输层来控制的，因此从根本上说不属于 HTTP 的范畴。HTTP 协议并不需要下面的传输层协议是面向连接的，仅仅需要它是*可靠的*，或不会丢失消息（至少，某个情况下告知错误）。在互联网两个最常用的传输层协议中，TCP 是可靠的而 UDP 不是。HTTP 因此而依靠于 TCP 的标准，即面向链接的。
+连接是由传输层来控制的，因此从根本上说不属于 HTTP 的范畴。HTTP 并不需要底层的传输协议是面向连接的，仅仅需要它是*可靠的*，或不会丢失消息（至少，某个情况下告知错误）。在互联网两个最常用的传输协议中，TCP 是可靠的而 UDP 不是。HTTP 因此而依靠于 TCP 的标准，即面向连接的。
-在客户端与服务端能够传递请求、响应之前，这两者间必须建立一个 TCP 链接，这个过程需要多次往返交互。HTTP/1.0 默认为每一对 HTTP 请求/响应都打开一个单独的 TCP 连接。当需要接连发起多个请求时，工作效率相比于它们之间共享同一个 TCP 连接要低。
+在客户端与服务器能够传递请求、响应之前，这两者间必须建立 TCP 连接，这个过程需要多次往返交互。HTTP/1.0 默认为每一对 HTTP 请求/响应都打开一个单独的 TCP 连接。当需要接连发起多个请求时，工作效率相比于它们之间共享同一个 TCP 连接要低。
-为了减轻这个缺陷，HTTP/1.1 引入了*流水线*（已被证明难以实现）和*持久化连接*：可以通过 {{HTTPHeader("Connection")}} 标头来部分控制底层的 TCP 连接。HTTP/2 则更进一步，通过在一个连接中复合多个消息，让这个连接始终平缓并更加高效。
+为了减轻这个缺陷，HTTP/1.1 引入了*流水线*（已被证明难以实现）和*持久化连接*：可以通过 {{HTTPHeader("Connection")}} 标头来部分控制底层的 TCP 连接。HTTP/2 则更进一步，通过在一个连接中复合多个消息，让这个连接始终活跃并更加高效。
-为了设计一种更匹配 HTTP 的传输层协议，各种实验正在进行中。例如，Google 正在测试一种基于 UDP 构建，更可靠、高效的传输层协议——[QUIC](https://zh.wikipedia.org/wiki/QUIC)。
+为了设计一种更匹配 HTTP 的传输协议，各种实验正在进行中。例如，Google 正在测试一种基于 UDP 构建，更可靠、高效的传输协议——[QUIC](https://zh.wikipedia.org/wiki/QUIC)。
## HTTP 能控制什么
-多年以来，良好的扩展性使得 HTTP 涉及到更多的 Web 功能与控制权。在 HTTP 诞生的早期，缓存和认证就可以由这个协议来处理了。而直到 2010 年，放行*同源限制*的能力才加入到协议里。
+多年以来，良好的扩展性使得 HTTP 涉及到更多的 Web 功能与控制权。在 HTTP 诞生的早期，缓存和认证就可以由这个协议来处理了。而直到 2010 年，放行*同源限制*的能力才加入到协议中。
以下是可以被 HTTP 控制的常见特性。
- _[缓存](/zh-CN/docs/Web/HTTP/Caching)_：文档如何被缓存可以通过 HTTP 来控制。服务端能指示代理和客户端缓存哪些内容以及缓存多长时间，客户端能够指示中间的缓存代理来忽略已存储的文档。
-- _开放同源限制_：为了阻止网络窥听和其它侵犯隐私的问题，浏览器强制在不同网站之间做了严格分割。只有来自于**相同来源**（same origin）的网页才能够获取一个网页的全部信息。这种限制有时对服务器是一种负担，服务器的 HTTP 标头可以减弱此类严格分离，使得一个网页可以是由源自不同地址的信息拼接而成。某些情况下，放开这些限制还有安全相关的考虑。
+- _开放同源限制_：为了阻止网络窥听和其它侵犯隐私的问题，Web 浏览器强制在不同网站之间做了严格分割。只有来自于**相同来源**（same origin）的网页才能够获取一个网页的全部信息。这种限制有时对服务器是一种负担，服务器的 HTTP 标头可以减弱此类严格分离，使得一个网页可以是由源自不同地址的信息拼接而成。某些情况下，放开这些限制还有安全相关的考虑。
- _认证_：一些页面可能会被保护起来，仅让特定的用户进行访问。基本的认证功能可以直接由 HTTP 提供，既可以使用 {{HTTPHeader("WWW-Authenticate")}} 或其他类似的标头，也可以用 [HTTP cookie](/zh-CN/docs/Web/HTTP/Cookies) 来设置一个特定的会话。
-- _[代理服务器和隧道](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling)_：
- 服务器或客户端常常是处于内网的，对其他计算机隐藏真实 IP 地址。因此 HTTP 请求就要通过代理服务器越过这个网络屏障。并非所有的代理都是 HTTP 代理，例如，SOCKS 协议就运作在更底层。其他的协议，比如 ftp，也能够被这些代理处理。
+- _[代理服务器和隧道](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling)_：服务器或客户端常常是处于内网的，对其他计算机隐藏真实 IP 地址。因此 HTTP 请求就要通过代理服务器越过这个网络屏障。并非所有的代理都是 HTTP 代理，例如，SOCKS 协议就运作在更底层。其他的协议，比如 ftp，也能够被这些代理处理。
- _会话_：使用 HTTP Cookie 可以利用服务端的状态将不同请求联系在一起。这就创建了会话，尽管 HTTP 本身是无状态协议。这不仅仅对电商平台购物车很有用，也让任何网站都能够允许用户自由定制内容了。
## HTTP 流
-当客户端想要和服务端——不管是最终的服务端还是中间的代理——进行信息交互时，过程表现为下面几步：
+当客户端想要和服务器——不管是最终的服务器还是中间的代理——进行信息交互时，过程表现为下面几步：
-1. 打开一个 TCP 连接：TCP 连接被用来发送一条或多条请求，以及接受响应消息。客户端可能打开一条新的连接，或重用一个已经存在的连接，或者也可能开几个新的 TCP 连接连向服务端。
-2. 发送一个 HTTP 报文：HTTP 报文（在 HTTP/2 之前）是语义可读的。在 HTTP/2 中，这些简单的消息被封装在了帧中，这使得报文不能被直接读取，但是原理仍是相同的。
+1. 打开一个 TCP 连接：TCP 连接被用来发送一条或多条请求，以及接受响应消息。客户端可能打开一条新的连接，或重用一个已经存在的连接，或者也可能开几个新的与服务器的 TCP 连接。
+2. 发送一个 HTTP 报文：HTTP 报文（在 HTTP/2 之前）是人类可读的。在 HTTP/2 中，这些简单的消息被封装在了帧中，这使得报文不能被直接读取，但是原理仍是相同的。例如：
```http
GET / HTTP/1.1
@@ -130,33 +131,33 @@ HTTP/1.1 以及更早的 HTTP 协议报文都是语义可读的。在 HTTP/2 中
HTTP 请求的一个例子：
-
+
请求由以下元素组成：
-- 一个 HTTP [方法](/zh-CN/docs/Web/HTTP/Methods)，通常是由一个动词，像 {{HTTPMethod("GET")}}、{{HTTPMethod("POST")}} 等，或者一个名词，像 {{HTTPMethod("OPTIONS")}}、{{HTTPMethod("HEAD")}} 等，来定义客户端执行的动作。典型场景有：客户端意图抓取某个资源（使用`GET`）；发送 [HTML 表单](/zh-CN/docs/Learn/Forms)的参数值（使用`POST`）；以及其他情况下需要的那些其他操作。
-- 要获取的那个资源的路径——去除了当前上下文中显而易见的信息之后的 URL，比如说，它不包括{{glossary("protocol","协议")}}（`http://`）、{{glossary("domain","域名")}}（这里的域名是`developer.mozilla.org`），或是 TCP 的{{glossary("port","端口")}}（这里的端口是 `80`）。
+- HTTP [方法](/zh-CN/docs/Web/HTTP/Methods)，通常是由一个动词，像 {{HTTPMethod("GET")}}、{{HTTPMethod("POST")}} 等，或者一个名词，像 {{HTTPMethod("OPTIONS")}}、{{HTTPMethod("HEAD")}} 等，来定义客户端执行的动作。典型场景有：客户端意图获取某个资源（使用 `GET`）；发送 [HTML 表单](/zh-CN/docs/Learn/Forms)的参数值（使用 `POST`）；以及其他情况下需要的那些其他操作。
+- 要获取的那个资源的路径——去除了当前上下文中显而易见的信息之后的 URL，比如说，它不包括{{glossary("protocol","协议")}}（`http://`）、{{glossary("domain","域名")}}（这里是 `developer.mozilla.org`），或是 TCP 的{{glossary("port","端口")}}（这里是 `80`）。
- HTTP 协议版本号。
- 为服务端表达其他信息的可选[标头](/zh-CN/docs/Web/HTTP/Headers)。
-- 请求体（body），类似于响应中的请求体，一些像 POST 这样的方法，请求体内包含需要了发送的资源。
+- 请求体（body），类似于响应中的请求体，一些像 `POST` 这样的方法，请求体内包含需要了发送的资源。
### 响应
HTTP 响应的一个例子：
-
+
响应报文包含了下面的元素：
- HTTP 协议版本号。
-- 一个状态码（[status code](/zh-CN/docs/Web/HTTP/Status)），来指明对应请求已成功执行或是没有，以及相应的原因。
-- 一个状态信息，这个信息是一个不权威、简短的状态码描述
+- [状态码](/zh-CN/docs/Web/HTTP/Status)，来指明对应请求已成功执行与否，以及不成功时相应的原因。
+- 状态信息，这个信息是一个不权威、简短的状态码描述。
- HTTP [标头](/zh-CN/docs/Web/HTTP/Headers)，与请求标头类似。
- 可选项，一个包含了被获取资源的主体。
## 基于 HTTP 的 API
-{{domxref("XMLHttpRequest")}} 是基于 HTTP 的最常用 API，可用于在{{Glossary("user agent","用户代理")}}和服务端之间交换数据。现代 {{domxref("Fetch API")}} 提供相同的功能，并具有更强大和灵活的功能集。
+[Fetch API](/zh-CN/docs/Web/API/Fetch_API) 是基于 HTTP 的最常用 API，其可用于在 JavaScript 中发起 HTTP 请求。Fetch API 取代了 {{domxref("XMLHttpRequest")}} API。
另一种 API，[server-sent 事件](/zh-CN/docs/Web/API/Server-sent_events)，是一种单向服务，允许服务端借助作为 HTTP 传输机制向客户端发送事件。使用 {{domxref("EventSource")}} 接口，客户端可打开连接并创建事件处理器。客户端浏览器自动将 HTTP 流里到达的消息转换为适当的 {{domxref("Event")}} 对象。继而将已知{{domxref("Event.type", "类型", "", 1)}}的事件，传递给先前注册过的事件处理器，其他未指明类型的事件则传递给 {{domxref("EventSource.message_event", "onmessage")}} 事件处理器。
@@ -164,4 +165,4 @@ HTTP 响应的一个例子：
HTTP 是一种简单、易用、具有可扩展性的协议，其客户端—服务器模式的结构，加上能够增加标头的能力，使得 HTTP 随 Web 中不断扩展的能力一起发展。
-虽然增加了一些复杂度——为了提高性能，HTTP/2 将 HTTP 报文嵌入到帧中——但是报文的基本结构自 HTTP/1.0 起仍保持不变。会话流依旧简单，通过一个简单的 [HTTP 消息监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)就可以查看和纠错。
+虽然增加了一些复杂度——为了提高性能，HTTP/2 将 HTTP 报文嵌入到帧中——但是报文的基本结构自 HTTP/1.0 起仍保持不变。会话流依旧基础，通过 [HTTP 网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)就可以查看和调试。
diff --git a/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md b/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md
index 188a841886da03..8b15f703167fc1 100644
--- a/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md
+++ b/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md
@@ -63,22 +63,22 @@ switch (NaN) {
宽松相等是*对称的*：对于任何 `A` 和 `B` 的值，`A == B` 总是与 `B == A` 具有相同的语义（除了转换应用的顺序）。使用 `==` 执行宽松相等的行为如下：
-1. 如果操作数具有相同的类型，则按以下方式进行比较：
- - Object：仅当两个操作数引用相同的对象时，才返回 `true`。
- - String：仅当两个操作数具有相同的字符并且顺序相同，才返回 `true`。
- - Number：仅当两个操作数具有相同的值时，才返回 `true`。`+0` 和 `-0` 被视为相同的值。如果任一操作数为 `NaN`，则返回 `false`；因此 `NaN` 永远不等于 `NaN`。
- - Boolean：仅当操作数都是 `true` 或 `false` 时，才返回 `true`。
- - BigInt：仅当两个操作数具有相同的值时，才返回 `true`。
- - Symbol：仅当两个操作数引用相同的 symbol 时，才返回 `true`。
-2. 如果操作数之一为 `null` 或 `undefined`，则另一个操作数必须为 `null` 或 `undefined` 才返回 `true`。否则返回 `false`。
-3. 如果操作数之一是对象，而另一个是原始值，[则将对象转换为原始值](/zh-CN/docs/Web/JavaScript/Data_structures#强制原始值转换)。
-4. 在这一步骤中，两个操作数都被转换为原始值（String、Number、Boolean、Symbol 和 BigInt 之一）。剩余的转换将分情况完成。
- - 如果它们是相同类型的，则使用步骤 1 进行比较。
- - 如果操作数中有一个是 Symbol，但另一个不是，则返回 `false`。
- - 如果操作数之一是 Boolean，而另一个不是，[则将 Boolean 转换为 Number](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)：`true` 转换为 1，`false` 转换为 0。然后再次对两个操作数进行宽松比较。
- - Number 转 String：[将 String 转换为 Number](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)。转换失败会得到 `NaN`，这将确保相等性为 `false`。
- - Number 转 BigInt：按照其数值进行比较。如果 Number 是 `±Infinity` 或 `NaN`，返回 `false`。
- - String 转 BigInt: 使用与 [`BigInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 构造函数相同的算法将字符串转换为 BigInt。如果转换失败，则返回 `false`。
+1. 如果操作数具有相同的类型，则按如下方式进行比较：
+ - 对象（Object）：仅当两个操作数引用同一个对象时返回 `true`。
+ - 字符串（String）：仅当两个操作数具有相同的字符且顺序相同时返回 `true`。
+ - 数字（Number）：如果两个操作数的值相同，则返回 `true`。`+0` 和 `-0` 被视为相同的值。如果任何一个操作数是 `NaN`，返回 `false`；所以，`NaN` 永远不等于 `NaN`。
+ - 布尔值（Boolean）：仅当操作数都为 `true` 或都为 `false` 时返回 `true`。
+ - 大整型（BigInt）：仅当两个操作数的值相同时返回 `true`。
+ - 符号（Symbol）：仅当两个操作数引用相同的符号时返回 `true`。
+2. 如果其中一个操作数为 `null` 或 `undefined`，另一个操作数也必须为 `null` 或 `undefined` 以返回 `true`。否则返回 `false`。
+3. 如果其中一个操作数是对象，另一个是原始值，则[将对象转换为原始值](/zh-CN/docs/Web/JavaScript/Data_structures#原始值强制转换)。
+4. 在这一步，两个操作数都被转换为原始值（字符串、数字、布尔值、符号和大整型中的一个）。剩余的转换将分情况完成。
+ - 如果是相同的类型，使用步骤 1 进行比较。
+ - 如果其中一个操作数是符号而另一个不是，返回 `false`。
+ - 如果其中一个操作数是布尔值而另一个不是，则[将布尔值转换为数字](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)：`true` 转换为 1，`false` 转换为 0。然后再次对两个操作数进行宽松比较。
+ - 数字与字符串：[将字符串转换为数字](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)。转换失败将导致 `NaN`，这将保证相等比较为 `false`。
+ - 数字与大整型：按数值进行比较。如果数字的值为 ±∞ 或 `NaN`，返回 `false`。
+ - 字符串与大整型：使用与 [`BigInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 构造函数相同的算法将字符串转换为大整型数。如果转换失败，返回 `false`。
一般而言，根据 ECMAScript 规范，所有原始类型和对象都不与 `undefined` 和 `null` 宽松相等。但是大部分浏览器允许非常有限的一类对象（即，所有页面中的 `document.all` 对象）在某些情况下表现出*模拟* `undefined` 值特性。宽松相等就是这些情况之一：当且仅当 A 是一个*模拟* `undefined` 的对象时，`null == A` 和 `undefined == A` 将会计算得到 `true`。在其他所有情况下，一个对象都不会与 `undefined` 或 `null` 宽松相等。
diff --git a/files/zh-cn/web/javascript/index.md b/files/zh-cn/web/javascript/index.md
index 2dc64dc4499966..9f97d063a606eb 100644
--- a/files/zh-cn/web/javascript/index.md
+++ b/files/zh-cn/web/javascript/index.md
@@ -11,7 +11,7 @@ JavaScript 的动态特性包括运行时对象的构造、变量参数列表、
本部分文档将专注于 JavaScript 语言本身，而非局限于网页或其他运行环境。想要了解网页中特有的 {{Glossary("API")}}，请参考 [Web API](/zh-CN/docs/Web/API) 以及 {{Glossary("DOM")}}。
-[ECMAScript 语言规范（ECMAScript Language Specification）](https://tc39.es/ecma262/)（ECMA-262）和[ECMAScript 国际化 API 规范（ECMAScript Internationalization API specification）](https://tc39.es/ecma262/)（ECMA-402）是 Javascript 的标准。当某个 [ECMAScript 新特性的提案](https://github.com/tc39/proposals)已经被一些浏览器实现时，MDN 上的文档或示例就可能会涉及到这些新特性。大多数时候，处在 [stages](https://tc39.es/process-document/) 3 和 4 的新特性会被收录到文档中，且收录时间通常早于其正式发布的时间。
+[ECMAScript 语言规范（ECMAScript Language Specification）](https://tc39.es/ecma262/)（ECMA-262）和 [ECMAScript 国际化 API 规范（ECMAScript Internationalization API specification）](https://tc39.es/ecma402/)（ECMA-402）是 JavaScript 的标准。当某个 [ECMAScript 新特性的提案](https://github.com/tc39/proposals)已经被一些浏览器实现时，MDN 上的文档或示例就可能会涉及到这些新特性。大多数时候，处在[阶段](https://tc39.es/process-document/) 3 和 4 的新特性会被收录到文档中，且收录时间通常早于其正式发布的时间。
不要将 JavaScript 与 [Java 编程语言](https://zh.wikipedia.org/wiki/Java)混淆——**JavaScript 不是“解释型 Java”**。虽然“Java”和“JavaScript”都是 Oracle 公司在美国和其他国家注册（或未注册）的商标，但是这两门语言在语法、语义与用途方面有相当大的不同。
diff --git a/files/zh-cn/web/javascript/reference/global_objects/error/columnnumber/index.md b/files/zh-cn/web/javascript/reference/global_objects/error/columnnumber/index.md
index dc072a0ef8fd2f..a0af8a93415680 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/error/columnnumber/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/error/columnnumber/index.md
@@ -1,25 +1,35 @@
---
title: Error.prototype.columnNumber
slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+l10n:
+ sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
---
-{{JSRef}} {{non-standard_header}}
+{{JSRef}} {{Non-standard_Header}}
-**`columnNumber`**属性包含引发此错误的文件行中的列号。
+{{jsxref("Error")}} 实例的 **`columnNumber`** 数据属性包含引发此错误的文件行中的列号。
+
+## 值
+
+正整数。
+
+{{js_property_attributes(1, 0, 1)}}
## 示例
-### 使用 `columnNumber`
+### 使用 columnNumber
```js
-var e = new Error("Could not parse input");
-throw e;
-console.log(e.columnNumber); // 0
+try {
+ throw new Error("无法解析输入");
+} catch (err) {
+ console.log(err.columnNumber); // 9
+}
```
## 规范
-{{Specifications}}
+不属于任何规范。
## 浏览器兼容性
@@ -27,6 +37,6 @@ console.log(e.columnNumber); // 0
## 参见
-- {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
-- {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
-- {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.stack")}}
+- {{jsxref("Error.prototype.lineNumber")}}
+- {{jsxref("Error.prototype.fileName")}}
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/index.md
index e95632134ef0a2..cf899cb00b9dcb 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/index.md
@@ -43,7 +43,7 @@ const string4 = new String("A String object");
"cat"[1]; // gives value "a"
```
-当使用方括号表示法进行字符串访问时，尝试删除或为其复制的行为将不成功。涉及的属性既不可写（writable）也不可配置（configurable）（更多细节，请参见 {{jsxref("Object.defineProperty()")}}）。
+当使用方括号表示法进行字符串访问时，尝试删除或为其赋值的行为将不成功。涉及的属性既不可写（writable）也不可配置（configurable）（更多细节，请参见 {{jsxref("Object.defineProperty()")}}）。
### 比较字符串
@@ -366,5 +366,5 @@ String(undefinedVar); // "undefined"
## 参见
-- [JavaScript 指南中的文本格式化](/zh-CN/docs/Web/JavaScript/Guide/Text_formatting)
+- [文本格式化](/zh-CN/docs/Web/JavaScript/Guide/Text_formatting)指南
- {{jsxref("RegExp")}}
diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md b/files/zh-cn/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md
index f4076e63bf96fe..f1996ae4f16091 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md
@@ -30,7 +30,7 @@ toLocaleUpperCase(locales)
## 描述
-`toLocaleUpperCase()` 方法返回根据特定区域设置的大小写映射规则将字符串转换为小写形式的值。`toLocaleUpperCase()` 不会影响字符串本身的值。在大多数情况下，这将产生与 {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} 相同的结果，但对于某些区域设置（例如土耳其语），它们的大小写映射与 Unicode 的默认映射不同，可能会得到不同的结果。
+`toLocaleUpperCase()` 方法返回根据特定区域设置的大小写映射规则将字符串转换为大写形式的值。`toLocaleUpperCase()` 不会影响字符串本身的值。在大多数情况下，这将产生与 {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} 相同的结果，但对于某些区域设置（例如土耳其语），它们的大小写映射与 Unicode 的默认映射不同，可能会得到不同的结果。
还要注意，转换不一定是一对一的字符映射，因为某些字符在转换为小写形式时可能会产生两个（甚至更多）字符。因此，结果字符串的长度可能与输入长度不同。这也意味着转换是不稳定的，因此下面的例子可能返回 `false`：
`x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase()`
diff --git a/files/zh-cn/web/javascript/reference/global_objects/symbol/valueof/index.md b/files/zh-cn/web/javascript/reference/global_objects/symbol/valueof/index.md
index 60b02af056c8a2..bfe09fbd1d072a 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/symbol/valueof/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/symbol/valueof/index.md
@@ -1,35 +1,43 @@
---
title: Symbol.prototype.valueOf()
slug: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+l10n:
+ sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
---
{{JSRef}}
-## 概述
+{{jsxref("Symbol")}} 值的 **`valueOf()`** 方法会返回该符号（symbol）的值。
-**`valueOf()`** 方法返回当前 symbol 对象所包含的 symbol 原始值。
+{{EmbedInteractiveExample("pages/js/symbol-prototype-valueof.html")}}
## 语法
-```plain
-symbol.valueOf();
+```js-nolint
+valueOf()
```
+### 参数
+
+无。
+
+### 返回值
+
+指定的 {{jsxref("Symbol")}} 对象的原始值。
+
## 描述
-在 JavaScript 中，虽然大多数类型的对象在某些操作下都会自动的隐式调用自身的 `valueOf()` 方法或者 `toString()` 方法来将自己转换成一个原始值，但 symbol 对象不会这么干，symbol 对象无法隐式转换成对应的原始值：
+{{jsxref("Symbol")}} 的 `valueOf()` 方法会以 Symbol 数据类型返回 Symbol 对象的原始值。
-```js
-Object(Symbol("foo")) + "bar";
-// TypeError: can't convert symbol object to primitive
-// 无法隐式的调用 valueOf() 方法
+JavaScript 调用 `valueOf()` 方法会将对象转换为原始值。你很少需要自己调用 `valueOf()` 方法；当遇到期望原始值的对象时，JavaScript 会自动调用它。
+
+## 示例
-Object(Symbol("foo")).valueOf() + "bar";
-// TypeError: can't convert symbol to string
-// 手动调用 valueOf() 方法，虽然转换成了原始值，但 symbol 原始值不能转换为字符串
+### 使用 valueOf()
-Object(Symbol("foo")).toString() + "bar";
-// "Symbol(foo)bar"，需要手动调用 toString() 方法才行
+```js
+const sym = Symbol("example");
+sym === sym.valueOf(); // true
```
## 规范
diff --git a/files/zh-cn/web/javascript/reference/lexical_grammar/index.md b/files/zh-cn/web/javascript/reference/lexical_grammar/index.md
index 81d4f7f6309532..16be046333e7d7 100644
--- a/files/zh-cn/web/javascript/reference/lexical_grammar/index.md
+++ b/files/zh-cn/web/javascript/reference/lexical_grammar/index.md
@@ -120,13 +120,26 @@ console.log("Hello world");
JavaScript 的解释器会把它视为普通注释——只有当脚本直接在 shell 中运行时，它对 shell 才有语义意义。
-> **警告：** 如果你想让脚本直接在 shell 环境中运行，请用不含 [BOM](https://en.wikipedia.org/wiki/Byte_order_mark) 的 UTF-8 编码。虽然 BOM 不会对在浏览器中运行的代码造成任何问题——在 UTF-8 解码过程中，分析源文本之前，BOM 就已经被剥离了——但如果前面有一个 BOM 字符，Unix/Linux shell 就不会识别该注释。
+> **警告：** 如果你想让脚本直接在 shell 环境中运行，请用不含 [BOM](https://zh.wikipedia.org/wiki/端序記號) 的 UTF-8 编码。虽然 BOM 不会对在浏览器中运行的代码造成任何问题——在 UTF-8 解码过程中，分析源文本之前，BOM 就已经被剥离了——但如果前面有一个 BOM 字符，Unix/Linux shell 就不会识别该注释。
你只能使用 `#!` 注释样式以指定 JavaScript 解释器。在所有其他情况下，只需使用 `//` 注释（或多行注释）。
## 关键字
-### ECMAScript 6 中的保留关键字
+*关键字*是 JavaScript 中看起来像标识符但又具有特殊含义的标记。例如，在函数声明之前的 [`async`](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function) 关键字表示该函数是异步的。
+
+一些关键字是*保留的*，这意味着它们不能被用作变量声明、函数声明等的标识符。它们通常被称为*保留字*。下面提供了[这些保留字的列表](#保留字)。并不是所有的关键字都是保留的——例如，`async` 可以在任何地方用作标识符。一些关键字只是*在上下文中保留*——例如，`await` 只在异步函数体内保留，`let` 只在严格模式代码中，或 `const` 和 `let` 声明中保留。
+
+标识符总是通过*字符串值*进行比较，所以转义序列会被解释。例如，这也是一个语法错误：
+
+```js-nolint example-bad
+const els\u{65} = 1;
+// `els\u{65}` 编码的标识符与 `else` 相同
+```
+
+### 保留字
+
+这些关键字不能在 JavaScript 源码中的任何地方用作变量、函数、类等的标识符。
- {{jsxref("Statements/break", "break")}}
- {{jsxref("Statements/switch", "case")}}
@@ -135,12 +148,13 @@ JavaScript 的解释器会把它视为普通注释——只有当脚本直接在
- {{jsxref("Statements/const", "const")}}
- {{jsxref("Statements/continue", "continue")}}
- {{jsxref("Statements/debugger", "debugger")}}
-- {{jsxref("Statements/default", "default")}}
+- {{jsxref("Statements/switch", "default")}}
- {{jsxref("Operators/delete", "delete")}}
- {{jsxref("Statements/do...while", "do")}}
- {{jsxref("Statements/if...else", "else")}}
- {{jsxref("Statements/export", "export")}}
-- {{jsxref("Statements/class", "extends")}}
+- [`extends`](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends)
+- [`false`](#布尔字面量)
- {{jsxref("Statements/try...catch", "finally")}}
- {{jsxref("Statements/for", "for")}}
- {{jsxref("Statements/function", "function")}}
@@ -149,18 +163,19 @@ JavaScript 的解释器会把它视为普通注释——只有当脚本直接在
- {{jsxref("Operators/in", "in")}}
- {{jsxref("Operators/instanceof", "instanceof")}}
- {{jsxref("Operators/new", "new")}}
+- {{jsxref("Operators/null", "null")}}
- {{jsxref("Statements/return", "return")}}
- {{jsxref("Operators/super", "super")}}
- {{jsxref("Statements/switch", "switch")}}
- {{jsxref("Operators/this", "this")}}
- {{jsxref("Statements/throw", "throw")}}
+- [`true`](#布尔字面量)
- {{jsxref("Statements/try...catch", "try")}}
- {{jsxref("Operators/typeof", "typeof")}}
- {{jsxref("Statements/var", "var")}}
- {{jsxref("Operators/void", "void")}}
- {{jsxref("Statements/while", "while")}}
- {{jsxref("Statements/with", "with")}}
-- {{jsxref("Operators/yield", "yield")}}
### 未来保留关键字
diff --git a/files/zh-cn/web/javascript/reference/operators/equality/index.md b/files/zh-cn/web/javascript/reference/operators/equality/index.md
index 08284dcf7b5228..0bc812a19c5275 100644
--- a/files/zh-cn/web/javascript/reference/operators/equality/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/equality/index.md
@@ -1,11 +1,13 @@
---
title: 相等（==）
slug: Web/JavaScript/Reference/Operators/Equality
+l10n:
+ sourceCommit: f616cb604af851f77f8cd59368e94ee3e43a8838
---
{{jsSidebar("Operators")}}
-相等运算符（`==`）检查其两个操作数是否相等，返回一个布尔值结果。与[严格相等](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality)运算符（`===`）不同，它会比较不同类型的操作数，并尝试强制类型转换。
+**相等**（**`==`**）运算符检查其两个操作数是否相等，返回一个布尔值结果。与[严格相等](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality)运算符不同，它会尝试转换不同类型的操作数，并进行比较。
{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}
@@ -17,24 +19,24 @@ x == y
## 描述
-相等运算符（`==` 和 `!=`）提供[非严格相等](/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness#非严格相等)语义。这可以大致总结如下：
+相等运算符（`==` 和 `!=`）提供[非严格相等](/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness#使用_进行宽松相等比较)语义。这可以大致总结如下：
1. 如果操作数具有相同的类型，则按如下方式进行比较：
- 对象（Object）：仅当两个操作数引用同一个对象时返回 `true`。
- - 字符串（String）：只有当两个操作数具有相同的字符且顺序相同时才返回 `true`。
- - 数值（Number）：如果两个操作数的值相同，则返回 `true`。`+0` 和 `-0` 被视为相同的值。如果任何一个操作数是 `NaN`，返回 `false`；所以，`NaN` 永远不等于 `NaN`。
+ - 字符串（String）：仅当两个操作数具有相同的字符且顺序相同时返回 `true`。
+ - 数字（Number）：如果两个操作数的值相同，则返回 `true`。`+0` 和 `-0` 被视为相同的值。如果任何一个操作数是 `NaN`，返回 `false`；所以，`NaN` 永远不等于 `NaN`。
- 布尔值（Boolean）：仅当操作数都为 `true` 或都为 `false` 时返回 `true`。
- - 大整形（BigInt）：仅当两个操作数值相同时返回 `true`。
+ - 大整型（BigInt）：仅当两个操作数的值相同时返回 `true`。
- 符号（Symbol）：仅当两个操作数引用相同的符号时返回 `true`。
2. 如果其中一个操作数为 `null` 或 `undefined`，另一个操作数也必须为 `null` 或 `undefined` 以返回 `true`。否则返回 `false`。
-3. 如果其中一个操作数是对象，另一个是基本类型，按此顺序使用对象的 [`@@toPrimitive()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)（以 `"default"` 作为提示），[`valueOf()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/object/valueOf) 和 [`toString()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/object/toString) 方法将对象转换为基本类型。（这个基本类型转换与[相加](/zh-CN/docs/Web/JavaScript/Reference/Operators/Addition)中使用的转换相同。）
-4. 在这一步，两个操作数都被转换为基本类型（String、Number、Boolean、Symbol 和 BigInt 中的一个）。其余的转换是逐个进行的。
+3. 如果其中一个操作数是对象，另一个是原始值，则[将对象转换为原始值](/zh-CN/docs/Web/JavaScript/Data_structures#原始值强制转换)。
+4. 在这一步，两个操作数都被转换为原始值（字符串、数字、布尔值、符号和大整型中的一个）。剩余的转换将分情况完成。
- 如果是相同的类型，使用步骤 1 进行比较。
- - 如果其中一个操作数是 Symbol 而另一个不是，返回 `false`。
- - 如果其中一个操作数是布尔型而另一个不是，则将布尔型转换为数字：`true` 转换为 1，`false` 转换为 0。然后再次松散地比较两个操作数。
- - Number to String：使用与 [`Number()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/Number) 构造函数相同的算法将字符串转换为数字。转换失败将导致 `NaN`，这将保证相等是 `false`。
- - Number to BigInt：按数值进行比较。如果数值为 ±∞ 或 `NaN`，返回 `false`。
- - String to BigInt：使用与 [`BigInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 构造函数相同的算法将字符串转换为 BigInt。如果转换失败，返回 `false`。
+ - 如果其中一个操作数是符号而另一个不是，返回 `false`。
+ - 如果其中一个操作数是布尔值而另一个不是，则[将布尔值转换为数字](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)：`true` 转换为 1，`false` 转换为 0。然后再次对两个操作数进行宽松比较。
+ - 数字与字符串：[将字符串转换为数字](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)。转换失败将导致 `NaN`，这将保证相等比较为 `false`。
+ - 数字与大整型：按数值进行比较。如果数字的值为 ±∞ 或 `NaN`，返回 `false`。
+ - 字符串与大整型：使用与 [`BigInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 构造函数相同的算法将字符串转换为大整型数。如果转换失败，返回 `false`。
宽松相等是*对称的*：`A == B` 对于 `A` 和 `B` 的任何值总是具有与 `B == A` 相同的语义（应用转换的顺序除外）。
@@ -59,8 +61,8 @@ x == y
0 == false; // true
0 == null; // false
0 == undefined; // false
-0 == !!null; // true, 看看逻辑非运算符
-0 == !!undefined; // true, 看看逻辑非运算符
+0 == !!null; // true，看看逻辑非运算符
+0 == !!undefined; // true，看看逻辑非运算符
null == undefined; // true
const number1 = new Number(3);
@@ -86,7 +88,7 @@ console.log(object1 == object1); // true
### 比较字符串和 String 对象
-请注意，使用构造的字符串 `new String()` 是对象。如果将其中之一与字符串文字进行比较，则该 `String` 对象将被转换为字符串文字并对其内容进行比较。但是，如果两个操作数都是 `String` 对象，则将它们作为对象进行比较，并且必须引用相同的对象才能进行比较：
+请注意，使用 `new String()` 构造的字符串是对象。如果将其中之一与字符串字面量进行比较，则该 `String` 对象将被转换为字符串字面量并对其内容进行比较。但是，如果两个操作数都是 `String` 对象，则将它们作为对象进行比较，并且必须引用相同的对象才会相等：
```js
const string1 = "hello";
@@ -105,8 +107,8 @@ console.log(string4 == string4); // true
```js
const d = new Date("December 17, 1995 03:24:00");
-const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
-console.log(d == s); //true
+const s = d.toString(); // 例如：“Sun Dec 17 1995 03:24:00 GMT+0800 (中国标准时间)”
+console.log(d == s); // true
```
### 比较数组和字符串
@@ -114,7 +116,7 @@ console.log(d == s); //true
```js
const a = [1, 2, 3];
const b = "1,2,3";
-a == b; // true, `a` converts to string
+a == b; // true，`a` 转换为字符串
const c = [true, 0.5, "hey"];
const d = c.toString(); // "true,0.5,hey"
@@ -131,6 +133,6 @@ c == d; // true
## 参见
-- [不相等运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Inequality)
-- [严格相等运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality)
-- [严格不相等运算符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
+- [不相等（`!=`）](/zh-CN/docs/Web/JavaScript/Reference/Operators/Inequality)
+- [严格相等（`===`）](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality)
+- [严格不相等（`!==`）](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
diff --git a/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md b/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md
index 75ba8d37a702f4..bed03c04e6fe2b 100644
--- a/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/expression_statement/index.md
@@ -1,6 +1,8 @@
---
title: 表达式语句
slug: Web/JavaScript/Reference/Statements/Expression_statement
+l10n:
+ sourceCommit: 4c26e8a3fb50d06963b06017f51ce19364350564
---
{{jsSidebar("Statements")}}
@@ -39,12 +41,12 @@ expression;
- `function`：这将是 [`function` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/function)或者 [`function*` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/function*)，而不是 [`function` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function)或者 [`function*` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/function*)
- `async function`：这将是 [`async function` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function)或者 [`async function*` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function*)，而不是 [`async function` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/async_function)或者 [`async function*` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/async_function*)
- `class`：这将是 [`class` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/class)，而不是 [`class` 表达式](/zh-CN/docs/Web/JavaScript/Reference/Operators/class)
-- `let[`：这将是带有[数组解构](/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)的 [`let` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/let)，而不是称为 `let` 变量的[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)（`let` 仅可以是在[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode#extra_reserved_words)下的标识符）
+- `let[`：这将是带有[数组解构](/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)的 [`let` 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/let)，而不是称为 `let` 变量的[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)（`let` 仅可以是在[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode#额外的保留字)下的标识符）
- `{`：这将是一个[块语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/block)，而不是[对象字面量](/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer)
因此，以下所有内容均无效：
-```js example-bad
+```js-nolint example-bad
function foo() {
console.log("foo");
}(); // SyntaxError: Unexpected token '('
diff --git a/files/zh-cn/web/javascript/reference/statements/if...else/index.md b/files/zh-cn/web/javascript/reference/statements/if...else/index.md
index 15de8d73d9094a..4b6e2d5d96efe5 100644
--- a/files/zh-cn/web/javascript/reference/statements/if...else/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/if...else/index.md
@@ -1,121 +1,171 @@
---
title: if...else
slug: Web/JavaScript/Reference/Statements/if...else
+l10n:
+ sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
---
{{jsSidebar("Statements")}}
-当指定条件为真，**if 语句**会执行一段语句。如果条件为假，则执行另一段语句。
+**`if...else`** 语句会在指定的条件为{{Glossary("truthy", "真")}}时执行一个语句。如果条件为{{Glossary("falsy", "假")}}，则会执行可选的 `else` 子句中的另一个语句。
{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}
## 语法
-```plain
+```js-nolint
if (condition)
- statement1
-[else
- statement2]
+ statement1
+
+// 带有 else 子句
+if (condition)
+ statement1
+else
+ statement2
```
- `condition`
- - : 值为真或假的[表达式](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#表达式)
+ - : 值为{{Glossary("truthy", "真")}}或{{Glossary("falsy", "假")}}的[表达式](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#表达式)
- `statement1`
- - : 当`condition`为真时执行的语句。可为任意语句，包括更深层的内部`if`语句。要执行多条语句，使用[块](/zh-CN/docs/Web/JavaScript/Reference/Statements/block)语句（{ ... }）将这些语句分组；若不想执行语句，则使用[空](/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty)语句。
+ - : 当*条件*为{{Glossary("truthy", "真")}}时执行的语句。可为任意语句，包括嵌套了 `if` 的语句。要执行多条语句，使用[块](/zh-CN/docs/Web/JavaScript/Reference/Statements/block)语句（`{ /* ... */ }`）将这些语句分组；若不想执行语句，则使用[空](/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty)语句。
- `statement2`
- - : 如果`condition`为假且 `else`从句存在时执行的语句。可为任意语句，包括块语句和嵌套的`if`语句。
+ - : 如果 `condition` 为{{Glossary("falsy", "假")}}且 `else` 从句存在时执行的语句。可为任意语句，包括块语句和嵌套的 `if` 语句。
-## 说明
+## 描述
-多层 `if...else` 语句可使用 `else if` 从句。注意：在 Javascript 中没有 `elseif` （一个单词）关键字。
+可以嵌套多个 `if...else` 语句以创建 `else if` 子句。请注意，JavaScript 中没有 `elseif`（单个词）关键字。
-```plain
+```js-nolint
if (condition1)
- statement1
+ statement1
else if (condition2)
- statement2
+ statement2
else if (condition3)
- statement3
-...
+ statement3
+// …
else
- statementN
+ statementN
```
要看看它如何工作，可以调整下嵌套的缩进：
-```plain
+```js-nolint
if (condition1)
- statement1
+ statement1
else
- if (condition2)
- statement2
- else
- if (condition3)
-...
+ if (condition2)
+ statement2
+ else
+ if (condition3)
+ statement3
+// …
```
-要在一个从句中执行多条语句，可使用语句块（`{ ... }`）。通常情况下，一直使用语句块是个好习惯，特别是在涉及嵌套`if`语句的代码中：
+要在一个子句中执行多条语句，可使用块语句（`{ /* ... */ }`）来组织这些语句。
-```plain
+```js-nolint
if (condition) {
- statements1
+ statements1
} else {
- statements2
+ statements2
+}
+```
+
+不使用块可能会导致令人困惑的行为，尤其是在代码是手动格式化的情况下。例如：
+
+```js-nolint example-bad
+function checkValue(a, b) {
+ if (a === 1)
+ if (b === 2)
+ console.log("a 是 1 并且 b 是 2");
+ else
+ console.log("a 不是 1");
+}
+```
+
+这段代码看上去没什么问题，但是，执行 `checkValue(1, 3)` 会输出“a 不是 1”。这是因为在[悬空 else](https://en.wikipedia.org/wiki/Dangling_else) 的情况下，`else` 子句会连接到最近的 `if` 子句。因此，上述代码在缩进适当的情况下看起来会是这样的：
+
+```js-nolint
+function checkValue(a, b) {
+ if (a === 1)
+ if (b === 2)
+ console.log("a 是 1 并且 b 是 2");
+ else
+ console.log("a 不是 1");
+}
+```
+
+通常情况下，始终使用块语句是种很好的做法，特别是在涉及嵌套 `if` 语句的代码中。
+
+```js example-good
+function checkValue(a, b) {
+ if (a === 1) {
+ if (b === 2) {
+ console.log("a 是 1 并且 b 是 2");
+ }
+ } else {
+ console.log("a 不是 1");
+ }
}
```
-不要将原始布尔值的`true`和`false`与[Boolean](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean)对象的真或假混淆。任何一个值，只要它不是 `undefined`、`null`、 `0`、`NaN`或空字符串（`""`），那么无论是任何对象，即使是值为假的 Boolean 对象，在条件语句中都为真。例如：
+不要将原始的布尔值 `true` 和 `false` 与 {{jsxref("Boolean")}} 对象的真或假混淆。任何不是 `false`、`undefined`、`null`、`0`、`-0`、`NaN` 或空字符串（`""`）的值，以及任何对象（包括值为 `false` 的布尔对象），在用作条件时都被视为{{Glossary("truthy", "真")}}。例如：
```js
-var b = new Boolean(false);
-if (b) //表达式的值为 true
+const b = new Boolean(false);
+if (b) {
+ console.log("b 为真"); // “b 为真”
+}
```
## 示例
-### 使用 `if...else`
+### 使用 if...else
```js
-if (cipher_char === from_char) {
- result = result + to_char;
+if (cipherChar === fromChar) {
+ result += toChar;
x++;
} else {
- result = result + clear_char;
+ result += clearChar;
}
```
-### 使用 `else if`
+### 使用 else if
-注意，Javascript 中没有`elseif`语句。但可以使用`else`和`if`中间有空格的语句：
+请注意，JavaScript 中没有 `elseif` 关键字。但是，你可以在 `else` 和 `if` 之间加上一个空格：
```js
-if (x > 5) {
- /* do the right thing */
-} else if (x > 50) {
- /* do the right thing */
+if (x > 50) {
+ /* 做一些事情 */
+} else if (x > 5) {
+ /* 做一些事情 */
} else {
- /* do the right thing */
+ /* 做一些事情 */
}
```
-### 条件表达式中的赋值运算
+### 使用赋值作为条件
-建议不要在条件表达式中单纯的使用赋值运算，因为粗看下赋值运算的代码很容易让人误认为是等性比较。比如，不要使用下面示例的代码：
+你几乎不应该在 `if...else` 语句中使用像 `x = y` 这样的赋值作为条件：
-```js-nolint example-bad
-if (x = y) {
- /* do the right thing */
+```js example-bad
+if ((x = y)) {
+ // …
}
```
-如果你需要在条件表达式中使用赋值运算，用圆括号包裹赋值运算。例如：
+因为与 {{jsxref("Statements/while", "while")}} 循环不同，条件只会被求值一次，所以赋值操作只会被执行一次。上述代码等价于：
```js example-good
-if ((x = y)) {
- /* do the right thing */
+x = y;
+if (x) {
+ // …
}
```
+这更加清晰。然而，在极少数情况下，你可能需要这样做，[`while`](/zh-CN/docs/Web/JavaScript/Reference/Statements/while) 文档有[使用赋值作为条件](/zh-CN/docs/Web/JavaScript/Reference/Statements/while#使用赋值作为条件)一节，其中包含我们的建议。
+
## 规范
{{Specifications}}
diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.md b/files/zh-cn/web/javascript/reference/statements/import/index.md
index e7c4465c4a5920..d8e5ddb8e32ed5 100644
--- a/files/zh-cn/web/javascript/reference/statements/import/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/import/index.md
@@ -1,17 +1,17 @@
---
title: import
slug: Web/JavaScript/Reference/Statements/import
+l10n:
+ sourceCommit: 4f86aad2b0b66c0d2041354ec81400c574ab56ca
---
{{jsSidebar("Statements")}}
-静态 **`import`** 语句用于导入由另一个模块导出的绑定。无论是否声明了 {{jsxref("Strict_mode","strict mode")}}，导入的模块都运行在严格模式下。在浏览器中，`import` 语句只能在声明了 `type="module"` 的 `script` 的标签中使用。
+静态 **`import`** 声明用于导入由另一个模块导出的只读动态（live）{{Glossary("binding", "绑定")}}。导入的绑定被称为*动态绑定*，因为它们会由导出绑定的模块更新，但导入模块不能重新赋值。
-此外，还有一个类似函数的动态 `import()`，它不需要依赖 `type="module"` 的 script 标签。
+要在源文件中使用 `import` 声明，该文件必须被运行时解释为[模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)。在 HTML 中，这可以通过在 {{HTMLElement("script")}} 标签中添加 `type="module"` 来实现。模块会自动以[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)解释。
-在 [script](/zh-CN/docs/Web/HTML/Element/script) 标签中使用 `nomodule` 属性，可以确保向后兼容。
-
-在你希望按照一定的条件或者按需加载模块的时候，动态 `import()` 是非常有用的。而静态型的 `import` 是初始化加载依赖项的最优选择，使用静态 `import` 更容易从代码静态分析工具和 [tree shaking](/zh-CN/docs/Glossary/Tree_shaking) 中受益。
+此外，还有一个类似函数的动态 [`import()`](/zh-CN/docs/Web/JavaScript/Reference/Operators/import)，它不需要依赖 `type="module"` 的 script 标签。
## 语法
@@ -30,193 +30,199 @@ import "module-name";
```
- `defaultExport`
- - : 导入模块的默认导出接口的引用名。
+ - : 引用模块默认导出的名称。必须是有效的 JavaScript 标识符。
- `module-name`
- : 要导入的模块。访问修饰符与主机相关。其通常是包含目标模块的 `.js` 文件的相对或绝对路径名。在 Node 中，通常在引用 `node_modules` 中的包时使用不添加扩展名的导入。某些特定的打包工具可能允许不添加扩展名的导入模块方式，请检查你的环境以确定导入方式。模块名只允许单引号和双引号的字符串。
+- `module-name`
+ - : 要导入的模块。模块的路径或名称是由运行环境决定的。这通常是指向包含模块的 `.js` 文件的相对或绝对路径。在 Node 环境中，没有扩展名的导入通常指向 `node_modules` 中的包。某些打包工具可能允许导入没有扩展名的文件；请检查你的环境。只允许使用单引号和双引号的字符串。
- `name`
- - : 导入模块对象整体的别名，在引用导入模块时，它将作为一个命名空间来使用。
+ - : 模块对象的名称，将用作引用导入时的命名空间。必须是一个有效的 JavaScript 标识符。
- `exportN`
- - : 被导入模块的导出接口的名称。
+ - : 要导入的导出名称。名称可以是标识符或字符串字面量，这取决于 `module-name` 声明导出的是什么。如果它是一个字符串字面量，那么它必须被别名化为一个有效的标识符。
- `aliasN`
- : 将引用指定的导入的名称。必须是有效的 JavaScript 标识符。
## 描述
-`name` 参数是“导入模块对象”的名称，它将用一种名称空间来引用导入模块的接口。export 参数指定单个的命名导出，而 `import * as name` 语法导入所有导出接口，即导入模块整体。以下示例阐明该语法。
+`import` 声明只能出现在模块中，并且只能在顶级作用域中（即不能在块、函数等内部）。如果在非模块上下文中遇到 `import` 声明（例如，没有 `type="module"` 的 `<script>` 标签、`eval`、`new Function`，这些都有“脚本”或“函数体”作为解析目标），则会抛出 `SyntaxError`。要在非模块上下文中加载模块，请改用[动态导入](/zh-CN/docs/Web/JavaScript/Reference/Operators/import)语法。
-### 导入整个模块的内容
+所有导入的绑定不能与任何其他声明在同一个作用域中，包括 {{jsxref("Statements/let", "let")}}、{{jsxref("Statements/const", "const")}}、{{jsxref("Statements/class", "class")}}、{{jsxref("Statements/function", "function")}}、{{jsxref("Statements/var", "var")}}，以及 `import` 声明。
-这将`myModule`插入当前作用域，其中包含来自位于`/modules/my-module.js`文件中导出的所有接口。
+`import` 声明在设计上是语法严格的（例如，只有字符串字面量说明符，只允许在顶级作用域，所有绑定必须是标识符），这允许模块在被求值之前进行静态分析和链接。这是使模块是天然异步的关键，支持了像[顶层 await](/zh-CN/docs/Web/JavaScript/Guide/Modules#顶层_await) 这样的特性。
-```js
-import * as myModule from "/modules/my-module.js";
-```
+### 导入声明的形式
-在这里，访问导出接口意味着使用模块名称（在本例为“myModule”）作为命名空间。例如，如果上面导入的模块包含一个接口 `doAllTheAmazingThings()`，你可以这样调用：
+`import` 声明有四种形式：
-```js
-myModule.doAllTheAmazingThings();
-```
+- [具名导入](#具名导入)：`import { export1, export2 } from "module-name";`
+- [默认导入](#默认导入)：`import defaultExport from "module-name";`
+- [命名空间导入](#命名空间导入)：`import * as name from "module-name";`
+- [副作用导入](#仅为了其副作用而导入模块)：`import "module-name";`
+
+下面是阐明语法的示例。
-### 导入单个接口
+#### 具名导入
-给定一个名为 `myExport` 的对象或值，它已经从模块 `my-module` 导出（因为整个模块被导出）或显式地导出（使用 {{jsxref("Statements/export", "export")}} 语句），将 `myExport` 插入当前作用域。
+给定一个名为 `myExport` 的值，该值已经通过隐式方式 `export * from "another.js"` 从模块 `my-module` 导出，或者显式地使用 {{jsxref("Statements/export", "export")}} 语句导出，这将把 `myExport` 插入到当前作用域中。
```js
import { myExport } from "/modules/my-module.js";
```
-### 导入多个接口
-
-这将 `foo` 和 `bar` 插入当前作用域。
+你可以从同一个模块导入多个名称。
```js
import { foo, bar } from "/modules/my-module.js";
```
-### 导入带有别名的接口
-
-你可以在导入时重命名接口。例如，将 `shortName` 插入当前作用域。
+你可以在导入时重命名导出。例如，这会将 `shortName` 插入当前作用域。
```js
import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";
```
-### 导入时重命名多个接口
-
-使用别名导入模块的多个接口。
+模块还可能以字符串字面量的形式导出一个成员，如果该字符串不是一个有效的标识符，那么你必须对其进行别名化，以便在当前模块中使用它。
```js
-import {
- reallyReallyLongModuleMemberName as shortName,
- anotherLongModuleName as short,
-} from "/modules/my-module.js";
+// /modules/my-module.js
+const a = 1;
+export { a as "a-b" };
```
-### 仅为副作用而导入一个模块
-
-整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。这将运行模块中的全局代码，但实际上不导入任何值。
-
```js
-import "/modules/my-module.js";
+import { "a-b" as a } from "/modules/my-module.js";
```
-### 导入默认值
+> **备注：** `import { x, y } from "mod"` 并不等同于 `import defaultExport from "mod"` 然后从 `defaultExport` 中解构出 `x` 和 `y`。具名导入和默认导入是 JavaScript 模块中不同的语法。
-引入模块可能有一个 `default` {{jsxref("Statements/export", "export")}}（无论它是对象，函数，类等）可用。然后可以使用 `import` 语句来导入这样的默认接口。
+#### 默认导入
-最简单的用法是直接导入默认值：
+默认导出需要使用相应的默认导入语法来导入。直接导入默认导出的最简单的版本：
```js
import myDefault from "/modules/my-module.js";
```
-也可以同时将 `default` 语法与上述用法（命名空间导入或命名导入）一起使用。在这种情况下，`default` 导入必须首先声明。例如：
+由于默认导出没有明确指定名称，因此你可以为标识符指定任何你喜欢的名称。
+
+也可以在使用命名空间导入或具名导入时指定默认导入。在这种情况下，必须首先声明默认导入。例如：
```js
import myDefault, * as myModule from "/modules/my-module.js";
-// myModule used as a namespace
+// myModule.default 和 myDefault 指向相同的绑定
```
或者
```js
import myDefault, { foo, bar } from "/modules/my-module.js";
-// specific, named imports
```
-当用[动态导入](#动态导入)的方式导入默认导出时，其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。
+导入一个名为 `default` 的名称与默认导入效果相同。必须对其进行别名化，因为 `default` 是保留字。
```js
-(async () => {
- if (somethingIsTrue) {
- const {
- default: myDefault,
- foo,
- bar,
- } = await import("/modules/my-module.js");
- }
-})();
+import { default as myDefault } from "/modules/my-module.js";
```
-### 动态 import
-
-标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。下面的是你可能会需要动态导入的场景：
+#### 命名空间导入
-- 当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低，或者并不需要马上使用它。
-- 当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低。
-- 当被导入的模块，在加载时并不存在，需要异步获取。
-- 当导入模块的说明符，需要动态构建。（静态导入只能使用静态说明符）
-- 当被导入的模块有副作用（这里说的副作用，可以理解为模块中会直接运行的代码），这些副作用只有在触发了某些条件才被需要时。（原则上来说，模块不能有副作用，但是很多时候，你无法控制你所依赖的模块的内容）
+以下代码将 `myModule` 插入当前作用域，其中包含来自 `/modules/my-module.js` 模块的所有导出。
-请不要滥用动态导入（只有在必要情况下采用）。静态框架能更好的初始化依赖，而且更有利于静态分析工具和 [tree shaking](/zh-CN/docs/Glossary/Tree_shaking) 发挥作用。
+```js
+import * as myModule from "/modules/my-module.js";
+```
-关键字 import 可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 `promise`。
+在这里，`myModule` 表示一个*命名空间*对象，其中包含来自 `/modules/my-module.js` 模块的所有导出。例如，如果上面的模块导入了一个导出 `doAllTheAmazingThings()`，你可以像这样调用它：
```js
-import("/modules/my-module.js").then((module) => {
- // Do something with the module.
-});
+myModule.doAllTheAmazingThings();
```
-这种使用方式也支持 `await` 关键字。
+`myModule` 是一个[密封](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed)的对象，其原型为 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#null_原型对象)。它提供了一个名为 `default` 的键，用于访问默认导出。有关更多信息，请参考[模块命名空间对象](/zh-CN/docs/Web/JavaScript/Reference/Operators/import#模块命名空间对象)。
+
+> **备注：** JavaScript 没有像 `import * from "module-name"` 这样的通配符导入，因为它会导致名称冲突的可能性很高。
+
+#### 仅为了其副作用而导入模块
+
+导入整个模块只是为了产生副作用，而不导入任何内容。这会运行模块的全局代码，但实际上不会导入任何值。
```js
-let module = await import("/modules/my-module.js");
+import "/modules/my-module.js";
```
-## 示例
-
-### 标准导入
+这经常用于 [polyfill](/zh-CN/docs/Glossary/Polyfill)，它会修改全局变量。
-下面的代码将会演示如何从辅助模块导入以协助处理 AJAX JSON 请求。
+### 提升
-#### 模块：file.js
+导入的声明会被[提升](/zh-CN/docs/Glossary/Hoisting)。在这种情况下，这意味着导入引入的标识符在整个模块范围内可用，并且它们的副作用是在模块其余代码运行之前产生的。
```js
-function getJSON(url, callback) {
- let xhr = new XMLHttpRequest();
- xhr.onload = function () {
- callback(this.responseText);
- };
- xhr.open("GET", url, true);
- xhr.send();
-}
+myModule.doAllTheAmazingThings(); // myModule.doAllTheAmazingThings 在下一行导入
-export function getUsefulContents(url, callback) {
- getJSON(url, (data) => callback(JSON.parse(data)));
-}
+import * as myModule from "/modules/my-module.js";
```
-#### 主程序：main.js
+## 示例
+
+### 标准导入
+
+在这个示例中，我们创建一个可重用的模块，它导出了一个函数，用于获取给定范围内的所有质数。
+
+```js
+// getPrimes.js
+/**
+ * 返回一个小于 `max` 的质数列表。
+ */
+export function getPrimes(max) {
+ const isPrime = Array.from({ length: max }, () => true);
+ isPrime[0] = isPrime[1] = false;
+ isPrime[2] = true;
+ for (let i = 2; i * i < max; i++) {
+ if (isPrime[i]) {
+ for (let j = i ** 2; j < max; j += i) {
+ isPrime[j] = false;
+ }
+ }
+ }
+ return [...isPrime.entries()]
+ .filter(([, isPrime]) => isPrime)
+ .map(([number]) => number);
+}
+```
```js
-import { getUsefulContents } from "/modules/file.js";
+import { getPrimes } from "/modules/getPrimes.js";
-getUsefulContents("http://www.example.com", (data) => {
- doSomethingUseful(data);
-});
+console.log(getPrimes(10)); // [2, 3, 5, 7]
```
-### 动态导入
+### 导入的值只能由导出者修改
+
+被导入的标识符是一个*动态绑定*，因为它可能由导出它的模块重新赋值。但是，导入它的模块不能重新赋值。然而，任何拥有导出对象的模块都可修改该对象，并会影响到所有导入该值的模块。
-此示例展示了如何基于用户操作去加载功能模块到页面上，在例子中通过点击按钮，然后会调用模块内的函数。当然这不是能实现这个功能的唯一方式，`import()` 函数也可以支持 `await`。
+你也可以通过[模块命名空间对象](/zh-CN/docs/Web/JavaScript/Reference/Operators/import#模块命名空间对象)观察到新的值。
```js
-const main = document.querySelector("main");
-for (const link of document.querySelectorAll("nav > a")) {
- link.addEventListener("click", (e) => {
- e.preventDefault();
+// my-module.js
+export let myValue = 1;
+setTimeout(() => {
+ myValue = 2;
+}, 500);
+```
- import("/modules/my-module.js")
- .then((module) => {
- module.loadPageInto(main);
- })
- .catch((err) => {
- main.textContent = err.message;
- });
- });
-}
+```js
+// main.js
+import { myValue } from "/modules/my-module.js";
+import * as myModule from "/modules/my-module.js";
+
+console.log(myValue); // 1
+console.log(myModule.myValue); // 1
+setTimeout(() => {
+ console.log(myValue); // 2；my-module 更新了它的值
+ console.log(myModule.myValue); // 2
+ myValue = 3; // TypeError: Assignment to constant variable.
+ // 导入模块只能读取该值但不能重新对它赋值。
+}, 1000);
```
## 规范
diff --git a/files/zh-cn/web/javascript/reference/statements/label/index.md b/files/zh-cn/web/javascript/reference/statements/label/index.md
index 7609a2fdc43f71..c573953760ddc2 100644
--- a/files/zh-cn/web/javascript/reference/statements/label/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/label/index.md
@@ -1,77 +1,111 @@
---
title: label
slug: Web/JavaScript/Reference/Statements/label
+l10n:
+ sourceCommit: c6f0f106b9083984dbf597678def6561729bb459
---
{{jsSidebar("Statements")}}
-**标记语句**可以和 {{jsxref("Statements/break", "break")}} 或 {{jsxref("Statements/continue", "continue")}} 语句一起使用。标记就是在一条语句前面加个可以引用的标识符（identifier）。
+**标记语句**是任何带有标识符前缀的[语句](/zh-CN/docs/Web/JavaScript/Reference/Statements)。你可以使用嵌套在标记语句中的 {{jsxref("Statements/break", "break")}} 或 {{jsxref("Statements/continue", "continue")}} 语句跳转到对应标记。
{{EmbedInteractiveExample("pages/js/statement-label.html")}}
-> **备注：** 使用标记的循环或语句块非常罕见。通常情况下，可以使用函数调用而不是（基于标记的）循环跳转。
-
## 语法
-```plain
-label :
- statement
+```js-nolint
+label:
+ statement
```
- `label`
- - : 任何不属于保留关键字的 JavaScript 标识符。
+ - : 任何不属于[保留字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#保留字)的 JavaScript [标识符](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#标识符)。
- `statement`
- - : JavaScript 语句。`break` 可用于任何标记语句，而 `continue` 可用于循环标记语句。
+ - : JavaScript 语句。`break` 可以在任何标记语句中使用，而 `continue` 可以在标记的循环语句中使用。
## 描述
-可使用一个标签来唯一标记一个循环，然后使用 `break` 或 `continue` 语句来指示程序是否中断循环或继续执行。
+你可以使用标签来标识语句，并在后续使用 `break` 或 `continue` 语句来引用该标签。请注意，JavaScript _没有_ `goto` 语句；你只能将标签与 `break` 或 `continue` 一起使用。
+
+任何引用 `label` 的 `break` 或 `continue` 语句都必须位于标记语句 `label` 所标记的语句的范围内。把 `label` 看作是仅在 `statement` 作用域内可用的变量。
+
+如果在执行 `statement` 时遇到 `break label;` 语句，则 `statement` 执行终止，并继续执行标记的语句之后的语句。
-需要注意的是，JavaScript 没有 `goto` 语句，标记只能和 `break` 或 `continue` 一起使用。
+`continue label;` 只能在 `statement` 是[循环语句](/zh-CN/docs/Web/JavaScript/Reference/Statements#迭代)时使用。如果在执行 `statement` 时遇到 `continue label;` 语句，则 `statement` 继续执行循环的下一次迭代。不带标签的 `continue;` 语句只能继续最内层的循环，而 `continue label;` 语句可以继续任何给定的循环，即使该语句嵌套在其他循环中。
-在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中，你不能使用“`let`”作为标签名称。它会抛出一个 {{jsxref("SyntaxError")}}（因为 let 是一个保留的标识符）。
+一个语句可以有多个标签。在这种情况下，这些标签在功能上都是等价的。
## 示例
-### 在 `for` 循环中使用带标记的 `continue` 语句
+### 在 for 循环中使用带标签的 continue 语句
+
+```js
+// 第一个 for 语句被标记为“loop1”
+loop1: for (let i = 0; i < 3; i++) {
+ // 第二个 for 语句被标记为“loop2”
+ loop2: for (let j = 0; j < 3; j++) {
+ if (i === 1 && j === 1) {
+ continue loop1;
+ }
+ console.log(`i = ${i}, j = ${j}`);
+ }
+}
+
+// 输出：
+// i = 0, j = 0
+// i = 0, j = 1
+// i = 0, j = 2
+// i = 1, j = 0
+// i = 2, j = 0
+// i = 2, j = 1
+// i = 2, j = 2
+```
+
+注意它如何跳过“i = 1, j = 1”和“i = 1, j = 2”。
+
+### 在 for 循环中使用带标签的 break 语句
```js
-var i, j;
+let i, j;
+// 第一个 for 语句被标记为“loop1”
loop1: for (i = 0; i < 3; i++) {
- //The first for statement is labeled "loop1"
+ // 第二个 for 语句被标记为“loop2”
loop2: for (j = 0; j < 3; j++) {
- //The second for statement is labeled "loop2"
if (i === 1 && j === 1) {
- continue loop1;
+ break loop1;
}
- console.log("i = " + i + ", j = " + j);
+ console.log(`i = ${i}, j = ${j}`);
}
}
-// Output is:
-// "i = 0, j = 0"
-// "i = 0, j = 1"
-// "i = 0, j = 2"
-// "i = 1, j = 0"
-// "i = 2, j = 0"
-// "i = 2, j = 1"
-// "i = 2, j = 2"
-// Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"
+// 输出：
+// i = 0, j = 0
+// i = 0, j = 1
+// i = 0, j = 2
+// i = 1, j = 0
```
-### 使用带标记的 `continue` 语句
+请注意和前面的 `continue` 示例的区别：当遇到 `break loop1` 时，外层循环的执行终止，因此之后的日志都不会再输出；当遇到 `continue loop1` 时，外层循环的执行会继续下一次迭代，因此会跳过“i = 1, j = 1”和“i = 1, j = 2”。
-若给定一个数据数组和一个测试数组，则下面的例子会统计通过测试的数据的数量。
+### 使用带标签的 continue 语句
-```js
-var itemsPassed = 0;
-var i, j;
+给定一个数据数组和一个测试数组，下面的例子会统计通过测试的数据的数量。
-top: for (i = 0; i < items.length; i++) {
- for (j = 0; j < tests.length; j++) {
- if (!tests[j].pass(items[i])) {
- continue top;
+```js
+// 从 1 到 100 的数字
+const items = Array.from({ length: 100 }, (_, i) => i + 1);
+const tests = [
+ { pass: (item) => item % 2 === 0 },
+ { pass: (item) => item % 3 === 0 },
+ { pass: (item) => item % 5 === 0 },
+];
+let itemsPassed = 0;
+
+itemIteration: for (const item of items) {
+ for (const test of tests) {
+ if (!test.pass(item)) {
+ continue itemIteration;
}
}
@@ -79,87 +113,125 @@ top: for (i = 0; i < items.length; i++) {
}
```
-### 在 `for` 循环中使用带标记的 `break`
+请注意 `continue itemIteration;` 语句如何跳过当前项的其余测试以及更新 `itemsPassed` 计数器的语句，并继续下一个项目。如果你不使用标签，则需要使用布尔标志。
```js
-var i, j;
-
-loop1: for (i = 0; i < 3; i++) {
- //The first for statement is labeled "loop1"
- loop2: for (j = 0; j < 3; j++) {
- //The second for statement is labeled "loop2"
- if (i == 1 && j == 1) {
- break loop1;
+// 从 1 到 100 的数字
+const items = Array.from({ length: 100 }, (_, i) => i + 1);
+const tests = [
+ { pass: (item) => item % 2 === 0 },
+ { pass: (item) => item % 3 === 0 },
+ { pass: (item) => item % 5 === 0 },
+];
+let itemsPassed = 0;
+
+for (const item of items) {
+ let passed = true;
+ for (const test of tests) {
+ if (!test.pass(item)) {
+ passed = false;
+ break;
}
- console.log("i = " + i + ", j = " + j);
+ }
+ if (passed) {
+ itemsPassed++;
}
}
-
-// Output is:
-// "i = 0, j = 0"
-// "i = 0, j = 1"
-// "i = 0, j = 2"
-// "i = 1, j = 0"
-// Notice the difference with the previous continue example
```
-### 使用带标记的 `break` 语句
+### 使用带标签的 break 语句
-若给定一个数据数组和一个测试数组，则下面的例子会判断是否所有数据均通过了测试。
+给定一个数据数组和一个测试数组，下面的例子会确定所有数据是否通过所有测试。
```js
-var allPass = true;
-var i, j;
-
-top: for (i = 0; items.length; i++)
- for (j = 0; j < tests.length; i++)
- if (!tests[j].pass(items[i])) {
+// 从 1 到 100 的数字
+const items = Array.from({ length: 100 }, (_, i) => i + 1);
+const tests = [
+ { pass: (item) => item % 2 === 0 },
+ { pass: (item) => item % 3 === 0 },
+ { pass: (item) => item % 5 === 0 },
+];
+let allPass = true;
+
+itemIteration: for (const item of items) {
+ for (const test of tests) {
+ if (!test.pass(item)) {
allPass = false;
- break top;
+ break itemIteration;
}
+ }
+}
```
-### 在标记块中使用 `break`
+同样，如果你不使用标签，则需要使用布尔标志。
-你可以在代码块中使用标记，但只有 `break` 语句可以使用非循环标记。
+```js
+// 从 1 到 100 的数字
+const items = Array.from({ length: 100 }, (_, i) => i + 1);
+const tests = [
+ { pass: (item) => item % 2 === 0 },
+ { pass: (item) => item % 3 === 0 },
+ { pass: (item) => item % 5 === 0 },
+];
+let allPass = true;
+
+for (const item of items) {
+ let passed = true;
+ for (const test of tests) {
+ if (!test.pass(item)) {
+ passed = false;
+ break;
+ }
+ }
+ if (!passed) {
+ allPass = false;
+ break;
+ }
+}
+```
+
+### 在带标签的块语句中使用 break
+
+你可以标记除循环语句以外的语句，例如简单的块，但只有 `break` 语句才能引用非循环标签。
```js
foo: {
- console.log("face");
+ console.log("脸");
break foo;
- console.log("this will not be executed");
+ console.log("这句不会被执行");
}
-console.log("swap");
+console.log("交换");
-// this will log:
-
-// "face"
-// "swap
+// 输出：
+// "脸"
+// "交换"
```
### 标记函数声明
-从 ECMAScript 2015 开始，标准的函数声明现在对规范的 [Web 兼容性附件](http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations)中的非严格代码进行了标准化。
+只能标记[语句而不能标记声明](/zh-CN/docs/Web/JavaScript/Reference/Statements#语句和声明的区别)。在非严格代码中，有一种遗留语法允许使用标签来标记函数声明：
```js
L: function F() {}
```
-在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中，这会抛出 {{jsxref("SyntaxError")}}：
+在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下，这将会抛出一个 {{jsxref("SyntaxError")}}：
-```js
+```js-nolint example-bad
"use strict";
L: function F() {}
// SyntaxError: functions cannot be labelled
```
-无论是否处于严格模式下，[生成器函数](/zh-CN/docs/Web/JavaScript/Reference/Statements/function*)都不能被标记：
+非普通函数，例如[生成器函数](/zh-CN/docs/Web/JavaScript/Reference/Statements/function*)和[异步函数](/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function)既不能在严格代码中进行标记，也不能在非严格代码中进行标记：
-```js
+```js-nolint example-bad
L: function* F() {}
// SyntaxError: generator functions cannot be labelled
```
+函数声明标记语法已[弃用](/zh-CN/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features)，并且即使是在非严格代码中，也不应该使用。你不能在函数体内跳转到此标签。
+
## 规范
{{Specifications}}
diff --git a/files/zh-cn/web/javascript/reference/statements/switch/index.md b/files/zh-cn/web/javascript/reference/statements/switch/index.md
index e59dccd000a29a..57192b7d351a86 100644
--- a/files/zh-cn/web/javascript/reference/statements/switch/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/switch/index.md
@@ -7,7 +7,7 @@ l10n:
{{jsSidebar("Statements")}}
-**`switch`** 语句会对一个[表达式](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#表达式)求值，并将表达式的值与一系列 `case` 子句进行匹配，一旦遇到与表达式值相匹配的第一个 `case` 子句后，将执行该子句后面的[语句](/zh-CN/docs/Web/JavaScript/Reference/Statements)，直到遇到 `break` 语句为止。若没有 `case` 子句与表达式的值匹配，如果没有任何 `case` 子句与表达式的值匹配，则会跳转至 `switch` 语句的 `default` 子句执行。
+**`switch`** 语句会对[表达式](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#表达式)进行求值，并将表达式的值与一系列 `case` 子句进行匹配，一旦遇到与表达式值相匹配的第一个 `case` 子句后，将执行该子句后面的[语句](/zh-CN/docs/Web/JavaScript/Reference/Statements)，直到遇到 `break` 语句为止。若没有 `case` 子句与表达式的值匹配，则会跳转至 `switch` 语句的 `default` 子句执行。
{{EmbedInteractiveExample("pages/js/statement-switch.html", "taller")}}
diff --git a/files/zh-cn/web/mathml/element/mfenced/index.md b/files/zh-cn/web/mathml/element/mfenced/index.md
new file mode 100644
index 00000000000000..9c3974880bcfcf
--- /dev/null
+++ b/files/zh-cn/web/mathml/element/mfenced/index.md
@@ -0,0 +1,73 @@
+---
+title: <mfenced>
+slug: Web/MathML/Element/mfenced
+l10n:
+ sourceCommit: e3faa375b0179de77a5eff00074e3d168a0a904c
+---
+
+{{MathMLRef}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+`<mfenced>` [MathML](/zh-CN/docs/Web/MathML) 元素提供了向表达式添加自定义开和闭括号（如圆括号）以及分隔符（如逗号或分号）的可能。
+
+> **备注：** 从历史上看，`<mfenced>` 元素被定义为编写围栏表达式的一种简写形式，相当于涉及 {{MathMLElement("mrow")}} 和 {{MathMLElement("mo")}} 元素的扩展形式。现在，建议改用等效形式。
+
+## 属性
+
+该元素的属性包括[全局 MathML 属性](/zh-CN/docs/Web/MathML/Global_attributes)。
+
+- `close`
+ - : 用于闭分隔符的字符串。默认值为 `")"`，任何空白都将被裁剪。
+- `open`
+ - : 用于开定界符的字符串。默认值为 `"("`，任何空白都将被裁剪。
+- `separators`
+ - : 零个或多个字符组成的序列，用于不同的分隔符，可以由空格分隔（空格将被忽略）。默认值为“,”。通过指定多个字符，可以为表达式中的每个参数设置不同的分隔符。如果分隔符过多，则会忽略所有多余的分隔符。如果表达式中的分隔符过少，则会重复最后指定的分隔符。
+
+## 示例
+
+### 最后一个分隔符被重复（`,`）
+
+```html
+<math display="block">
+ <mfenced open="{" close="}" separators=";;,">
+ <mi>a</mi>
+ <mi>b</mi>
+ <mi>c</mi>
+ <mi>d</mi>
+ <mi>e</mi>
+ </mfenced>
+</math>
+```
+
+示例渲染：
+
+你的浏览器中的渲染：
+
+{{ EmbedLiveSample('最后一个分隔符被重复（,）', 700, 200) }}
+
+### 所有多余的内容都被忽略（`,`）
+
+```html
+<math display="block">
+ <mfenced open="[" close="]" separators="||||,">
+ <mi>a</mi>
+ <mi>b</mi>
+ <mi>c</mi>
+ <mi>d</mi>
+ <mi>e</mi>
+ </mfenced>
+</math>
+```
+
+示例渲染：![[a|b|c|d|e]](mfenced02.png)
+
+你的浏览器中的渲染：
+
+{{ EmbedLiveSample('所有多余的内容都被忽略（,）', 700, 200) }}
+
+## 规范
+
+`<mfenced>` 元素没有在任何面向浏览器的规范中定义，但你可以在 [MathML 4](https://w3c.github.io/mathml/#presm_mfenced) 中找到描述。
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/mathml/element/mmultiscripts/index.md b/files/zh-cn/web/mathml/element/mmultiscripts/index.md
new file mode 100644
index 00000000000000..617591949e81b2
--- /dev/null
+++ b/files/zh-cn/web/mathml/element/mmultiscripts/index.md
@@ -0,0 +1,123 @@
+---
+title: <mmultiscripts>
+slug: Web/MathML/Element/mmultiscripts
+l10n:
+ sourceCommit: 4d5e2c11f4b8cc32e54d2527d9576ed26ced9458
+---
+
+{{MathMLRef}}
+
+**`<mmultiscripts>`** [MathML](/zh-CN/docs/Web/MathML) 元素用于一次性将任意数量的下标和上标附加到表达式上，将 {{ MathMLElement("msubsup") }} 元素泛化。附加符号可以是前置的附加符号（放置在表达式之前）或后置的附加符号（放置在表达式之后）。
+
+MathML 使用以下语法，即一个基本表达式，后跟任意数量的后置下标—后置上标对（按给定顺序附加），可选择后跟一个 `<mprescripts>` 和任意数量的前置下标—前置上标对（按给定顺序附加）。此外，空的 `<mrow>` 元素可用于表示不存在的脚本。
+
+```html-nolint
+<mmultiscripts>
+ base
+ postsubscript1 postsuperscript1
+ postsubscript2 postsuperscript2
+ postsubscript3 postsuperscript3
+ ...
+ postsubscriptN postsuperscriptN
+ <mprescripts/> ⎫
+ presubscript1 presuperscript1 ⎪
+ presubscript2 presuperscript2 ⎬ 可选
+ presubscript3 presuperscript3 ⎪
+ ... ⎪
+ presubscriptM presuperscriptM ⎭
+</mmultiscripts>
+```
+
+## 属性
+
+该元素的属性包括[全局 MathML 属性](/zh-CN/docs/Web/MathML/Global_attributes)以及以下已弃用的属性：
+
+- `subscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
+ - : 表示将下标基线向下移动的最小量的 {{cssxref("length-percentage")}}。
+- `superscriptshift` {{deprecated_inline}} {{Non-standard_Inline}}
+ - : 表示将上标基线向上移动的最小量的 {{cssxref("length-percentage")}}。
+
+> **备注：** 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+
+## 示例
+
+### 使用 `<mprescripts/>`
+
+`<mprescripts/>` 元素后的子元素被放置为前置附加符号（在基本表达式之前）。
+
+```html-nolint
+<math display="block">
+ <mmultiscripts>
+ <mi>X</mi> <!-- 基本表达式 -->
+ <mi>d</mi> <!-- 后下标 -->
+ <mi>c</mi> <!-- 后上标 -->
+ <mprescripts />
+ <mi>b</mi> <!-- 前下标 -->
+ <mi>a</mi> <!-- 前上标 -->
+ </mmultiscripts>
+</math>
+```
+
+{{ EmbedLiveSample('使用 `<mprescripts/>`', 700, 200) }}
+
+### 空附加符号
+
+空的 `<mrow>` 元素可用于表示不存在的附加符号。
+
+```html-nolint
+<math display="block">
+ <mmultiscripts>
+ <mi>X</mi> <!-- 基本表达式 -->
+ <mrow></mrow> <!-- 后下标 -->
+ <mi>c</mi> <!-- 后上标 -->
+ <mprescripts />
+ <mi>b</mi> <!-- 前下标 -->
+ <mrow></mrow> <!-- 前上标 -->
+ </mmultiscripts>
+</math>
+```
+
+{{ EmbedLiveSample('空附加符号', 700, 200) }}
+
+### 附加符号的顺序
+
+以下是一个更复杂的示例，其中包含许多附加符号，以便你可以查看它们附加到基本表达式的顺序：
+
+```html
+<math display="block">
+ <mmultiscripts>
+ <mtext>base</mtext>
+ <mtext>postsubscript1</mtext>
+ <mtext>postsupscript1</mtext>
+ <mtext>postsubscript2</mtext>
+ <mtext>postsupscript2</mtext>
+ <mtext>postsubscript3</mtext>
+ <mtext>postsupscript3</mtext>
+ <mtext>postsubscript4</mtext>
+ <mtext>postsupscript4</mtext>
+ <mprescripts />
+ <mtext>presubscript1</mtext>
+ <mtext>presupscript1</mtext>
+ <mtext>presubscript2</mtext>
+ <mtext>presupscript2</mtext>
+ <mtext>presubscript3</mtext>
+ <mtext>presupscript3</mtext>
+ </mmultiscripts>
+</math>
+```
+
+{{ EmbedLiveSample('附加符号的顺序', 700, 200) }}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{ MathMLElement("msub") }}（下标）
+- {{ MathMLElement("msup") }}（上标）
+- {{ MathMLElement("msubsup") }}（上下标对）
diff --git a/files/zh-cn/web/mathml/element/mtable/index.md b/files/zh-cn/web/mathml/element/mtable/index.md
new file mode 100644
index 00000000000000..47a40f8785258c
--- /dev/null
+++ b/files/zh-cn/web/mathml/element/mtable/index.md
@@ -0,0 +1,88 @@
+---
+title: <mtable>
+slug: Web/MathML/Element/mtable
+l10n:
+ sourceCommit: 4d5e2c11f4b8cc32e54d2527d9576ed26ced9458
+---
+
+{{MathMLRef}}
+
+**`<mtable>`** [MathML](/zh-CN/docs/Web/MathML) 元素允许你创建表格或矩阵。其子元素是 {{MathMLElement("mtr")}} 元素（表示行），每个子元素都有 {{MathMLElement("mtd")}} 元素作为其子元素（表示单元格）。这些元素类似于 [HTML](/zh-CN/docs/Web/HTML) 中的 {{HTMLElement("table")}}、{{HTMLElement("tr")}} 和 {{HTMLElement("td")}}元素。
+
+## 属性
+
+该元素的属性包括[全局 MathML 属性](/zh-CN/docs/Web/MathML/Global_attributes)。某些浏览器还可能支持以下属性：
+
+- `align` {{Non-standard_Inline}}
+
+ - : 指定表格相对于其环境的**垂直**对齐方式。
+ 可能的值包括：
+
+ - `axis`（默认）：表格的垂直中心与环境的轴线（通常是负号）对齐。
+ - `baseline`：表格的垂直中心与环境的基线对齐。
+ - `bottom`：表格的底部与环境的基线对齐。
+ - `center`：参见基线。
+ - `top`：表格的顶部与环境的基线对齐。
+
+ 此外，`align` 属性的值可以*行号*结尾（例如 `align="center 3"`）。这样可以对齐指定的行而不是整个表格。负整数值从表格底部开始计算行数。
+
+- `columnalign` {{Non-standard_Inline}}
+ - : 指定单元格的水平对齐方式。允许多个值以空格分隔，并应用于相应的列（例如 `columnalign="left right center"`）。可能的值包括：`left`、`center`（默认）和 `right`。
+- `columnlines` {{Non-standard_Inline}}
+ - : 指定列边框。允许多个值以空格分隔，并应用于相应的列（例如 `columnlines="none none solid"`）。可能的值包括：`none`（默认）、`solid` 和 `dashed`。
+- `columnspacing` {{Non-standard_Inline}}
+ - : 指定表格列之间的间距。允许多个值以空格分隔，并应用于相应的列（例如 `columnspacing="1em 2em"`）。可能的值是 {{cssxref("length-percentage")}}。
+- `frame` {{Non-standard_Inline}}
+ - : 指定整个表格的边框。可能的值包括：`none`（默认）、`solid` 和 `dashed`。
+- `framespacing` {{Non-standard_Inline}}
+ - : 指定表格和框架之间添加的额外空间。第一个值指定右侧和左侧的间距；第二个值指定上方和下方的间距。可能的值是 {{cssxref("length-percentage")}}。
+- `rowalign` {{Non-standard_Inline}}
+ - : 指定单元格的垂直对齐方式。允许多个值以空格分隔，并应用于相应的行（例如 `rowalign="top bottom axis"`）。可能的值包括：`axis`、`baseline`（默认）、`bottom`、`center` 和 `top`。
+- `rowlines` {{Non-standard_Inline}}
+ - : 指定行边框。允许多个值以空格分隔，并应用于相应的行（例如 `rowlines="none none solid"`）。可能的值包括：`none`（默认）、`solid` 和 `dashed`。
+- `rowspacing` {{Non-standard_Inline}}
+ - : 指定表格行之间的间距。允许多个值以空格分隔，并应用于相应的行（例如 `rowspacing="1em 2em"`）。可能的值是 {{cssxref("length-percentage")}}。
+- `width` {{Non-standard_Inline}}
+ - : 一个用于指定整个表格的宽度的 {{cssxref("length-percentage")}}。
+
+> **备注：** 对于 `width` 属性，某些浏览器还可能接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+
+## 示例
+
+### 与行号对齐
+
+```html
+<math display="block">
+ <mi>X</mi>
+ <mo>=</mo>
+ <mtable frame="solid" rowlines="solid" align="axis 3">
+ <mtr>
+ <mtd><mi>A</mi></mtd>
+ <mtd><mi>B</mi></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mi>C</mi></mtd>
+ <mtd><mi>D</mi></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mi>E</mi></mtd>
+ <mtd><mi>F</mi></mtd>
+ </mtr>
+ </mtable>
+</math>
+```
+
+{{EmbedLiveSample('与行号对齐')}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{ MathMLElement("mtd") }}（表格单元）
+- {{ MathMLElement("mtr") }}（表格行）
diff --git a/files/zh-cn/web/mathml/element/mtr/index.md b/files/zh-cn/web/mathml/element/mtr/index.md
new file mode 100644
index 00000000000000..2c3a5b708ee5c0
--- /dev/null
+++ b/files/zh-cn/web/mathml/element/mtr/index.md
@@ -0,0 +1,32 @@
+---
+title: <mtr>
+slug: Web/MathML/Element/mtr
+l10n:
+ sourceCommit: 8eece0b998c23e8ea35f936d7371a169974130f5
+---
+
+{{MathMLRef}}
+
+**`<mtr>`** [MathML](/zh-CN/docs/Web/MathML) 元素表示表格或矩阵中的一行。它只能出现在 {{ MathMLElement("mtable") }} 元素中，其子元素是表示单元格的 {{ MathMLElement("mtd") }} 元素。该元素类似于 HTML 中的 {{ HTMLElement("tr") }} 元素。
+
+## 属性
+
+该元素的属性包括[全局 MathML 属性](/zh-CN/docs/Web/MathML/Global_attributes)。一些浏览器还可能支持以下属性：
+
+- `columnalign` {{Non-standard_Inline}}
+ - : 覆盖由 {{ MathMLElement("mtable") }} 对此行单元格指定的水平对齐方式。允许使用以空格分隔的多个值，并应用于相应的列（例如 `columnalign="left center right"`）。可能的值为：`left`、`center` 和 `right`。
+- `rowalign` {{Non-standard_Inline}}
+ - : 覆盖由 {{ MathMLElement("mtable") }} 对此行单元格指定的垂直对齐方式。可能的值为：`axis`、`baseline`、`bottom`、`center` 和 `top`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{ MathMLElement("mtable") }}
+- {{ MathMLElement("mtd") }}
diff --git a/files/zh-cn/web/mathml/element/munder/index.md b/files/zh-cn/web/mathml/element/munder/index.md
new file mode 100644
index 00000000000000..be994abad3f6d9
--- /dev/null
+++ b/files/zh-cn/web/mathml/element/munder/index.md
@@ -0,0 +1,49 @@
+---
+title: <munder>
+slug: Web/MathML/Element/munder
+l10n:
+ sourceCommit: 07f0cf4375aaa02e1071d8bd0e8518db7609b7a9
+---
+
+{{MathMLRef}}
+
+**`<munder>`** [MathML](/zh-CN/docs/Web/MathML) 元素用于在表达式下方附加着重标识或界限。它使用以下语法：`<munder> base underscript </munder>`。
+
+## 属性
+
+该元素的属性包括[全局 MathML 属性](/zh-CN/docs/Web/MathML/Global_attributes) 以及以下属性：
+
+- `accentunder`
+ - : [`<boolean>`](/zh-CN/docs/Web/MathML/Values#mathml_特定类型)，表示下标是否应被着重标识（即，绘制得更大并且更接近基本表达式）。
+
+## 示例
+
+```html
+<math display="block">
+ <munder accentunder="true">
+ <mrow>
+ <mi>x</mi>
+ <mo>+</mo>
+ <mi>y</mi>
+ <mo>+</mo>
+ <mi>z</mi>
+ </mrow>
+ <mo>⏟<!--下花括号--></mo>
+ </munder>
+</math>
+```
+
+{{ EmbedLiveSample('示例', 700, 200) }}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{ MathMLElement("mover") }}（上标）
+- {{ MathMLElement("munderover") }}（上标下标对）
diff --git a/files/zh-cn/web/mathml/element/munderover/index.md b/files/zh-cn/web/mathml/element/munderover/index.md
new file mode 100644
index 00000000000000..42df3d82b4f22d
--- /dev/null
+++ b/files/zh-cn/web/mathml/element/munderover/index.md
@@ -0,0 +1,55 @@
+---
+title: <munderover>
+slug: Web/MathML/Element/munderover
+l10n:
+ sourceCommit: 07f0cf4375aaa02e1071d8bd0e8518db7609b7a9
+---
+
+{{MathMLRef}}
+
+**`<munderover>`** [MathML](/zh-CN/docs/Web/MathML) 元素用于在表达式上方和下方同时附加符号。
+
+它使用以下语法：`<munderover> base underscript overscript </munderover>`
+
+## 属性
+
+该元素的属性包括[全局 MathML 属性](/zh-CN/docs/Web/MathML/Global_attributes)以及以下属性：
+
+- `accent`
+ - : [`<boolean>`](/zh-CN/docs/Web/MathML/Values#mathml_特定类型)，表示上标是否应被着重标识（即，绘制得更大并且更接近基本表达式）。
+- `accentunder`
+ - : [`<boolean>`](/zh-CN/docs/Web/MathML/Values#mathml_特定类型)，表示下标是否应被着重标识（即，绘制得更大并且更接近基本表达式）。
+
+## 示例
+
+```html
+<math display="block">
+ <munderover>
+ <mo>∑</mo>
+ <mrow>
+ <mi>n</mi>
+ <mo>=</mo>
+ <mn>1</mn>
+ </mrow>
+ <mrow>
+ <mo>+</mo>
+ <mn>∞</mn>
+ </mrow>
+ </munderover>
+</math>
+```
+
+{{ EmbedLiveSample('示例', 700, 200) }}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{ MathMLElement("munder") }}（下标）
+- {{ MathMLElement("mover") }}（上标）
diff --git a/files/zh-cn/web/mathml/fonts/index.md b/files/zh-cn/web/mathml/fonts/index.md
new file mode 100644
index 00000000000000..8987bdd5678cf0
--- /dev/null
+++ b/files/zh-cn/web/mathml/fonts/index.md
@@ -0,0 +1,149 @@
+---
+title: 用于 MathML 的字体
+slug: Web/MathML/Fonts
+l10n:
+ sourceCommit: 8eece0b998c23e8ea35f936d7371a169974130f5
+---
+
+{{MathMLRef}}
+
+需要具有适当 Unicode 覆盖范围和 Open Font Format 特性的字体才能实现良好的数学渲染。本页面描述了用户如何安装此类数学字体以在浏览器中正确显示 MathML。
+
+## 安装说明
+
+一般而言，建议安装 _Latin Modern Math_（采用数学公式中常见的 [Computer Modern](https://zh.wikipedia.org/wiki/Computer_Modern) 风格）和 _STIX Two Math_（覆盖了 Unicode 中的大量科学字符）两种字体。在接下来的小节中，你将找到在各种操作系统中安装这些字体的详细说明。
+
+### Windows
+
+按以下步骤安装 _Latin Modern Math_ 和 _STIX Two Math_ 字体：
+
+1. 下载 [latinmodern-math-1959.zip](https://www.gust.org.pl/projects/e-foundry/lm-math/download/latinmodern-math-1959.zip)。
+2. 打开 ZIP 压缩文件，进入 `latinmodern-math-1959` 目录，然后进入 `otf` 目录。你将找到一个 `latinmodern-math` 字体文件。
+3. 打开 `latinmodern-math` 字体文件，然后点击**安装**按钮。
+4. 下载 [static_otf.zip](https://raw.githubusercontent.com/stipub/stixfonts/master/zipfiles/static_otf.zip)。
+5. 打开 `static_otf.zip` ZIP 压缩文件，然后进入 `static_otf` 目录。在那里的文件中，你将找到一个 `STIXTwoMath-Regular` 文件。
+6. 打开 `STIXTwoMath-Regular` 文件，然后点击**安装**按钮。如果需要，你也可以对目录中的其他字体文件执行相同操作。
+
+> **备注：** Windows 上默认安装了 _Cambria Math_ 字体，应该可以确保相对良好的 MathML 渲染效果。
+
+### macOS
+
+按照以下步骤安装 _Latin Modern Math_ 字体：
+
+1. 下载 [latinmodern-math-1959.zip](https://www.gust.org.pl/projects/e-foundry/lm-math/download/latinmodern-math-1959.zip)。
+2. 解压缩 ZIP 文件，进入 `latinmodern-math-1959` 目录，然后进入 `otf` 目录。你将找到一个 `latinmodern-math` 字体文件。
+3. 双击 `latinmodern-math` 字体文件，然后点击打开的窗口中的**安装字体**按钮。
+
+> **备注：** 如果你使用的是 macOS Ventura（版本 13）或更高版本，则已经预装 _STIX Two Math_，你可以跳过以下步骤。
+
+按照以下步骤安装 _STIX Two Math_ 字体：
+
+1. 下载 [static_otf.zip](https://raw.githubusercontent.com/stipub/stixfonts/master/zipfiles/static_otf.zip)。
+2. 打开 `static_otf.zip` ZIP 压缩文件，然后进入 `static_otf` 目录。在那里的文件中，你将找到一个 `STIXTwoMath-Regular.otf` 文件。
+3. 打开 `STIXTwoMath-Regular.otf` 文件，然后点击打开的窗口中的**安装字体**按钮。如果需要，你也可以对目录中的其他字体文件执行相同操作。
+
+> **备注：** 自 OS X Lion（版本 10.7）开始，已预安装了 _STIX_ 的废弃版本。虽然一些浏览器可以使用它，但强烈建议按照上述说明进行操作以实现最佳的数学渲染效果。
+
+### Linux
+
+在下面，你可以找到在流行的 Linux 发行版上执行的命令，以从你的软件包管理器中安装 _Latin Modern Math_ 和 _STIX Two Math_ 字体。如果你的 Linux 发行版没有提供这些字体的专用软件包，则还提供了替代方法。
+
+#### 基于 Debian 的发行版（包括 Ubuntu 和 Mint）
+
+```bash
+sudo apt-get install fonts-lmodern fonts-stix
+```
+
+#### 基于 Fedora 的发行版
+
+```bash
+sudo dnf install texlive-lm-math stix-math-fonts
+```
+
+#### 基于 openSUSE 的发行版
+
+```bash
+sudo zypper install texlive-lm-math stix-fonts
+```
+
+#### Arch Linux
+
+```bash
+sudo pacman -S otf-latinmodern-math otf-stix
+```
+
+#### TeXLive 软件包
+
+如果你的 Linux 发行版没有提供 _Latin Modern Math_ 和 _STIX_ 字体的软件包，考虑安装包含 _Latin Modern Math_ 和 _XITS_ 字体的 `texlive` 软件包。例如，在 Mageia 上可以这样做：
+
+```bash
+sudo urpmi texlive-dist texlive-fontsextra
+```
+
+然而，你可能需要确保你的系统知道这些字体。添加一个指向 TeXLive 的 `opentype` 目录的 fontconfig 配置 `/etc/fonts/conf.avail/09-texlive-fonts.conf`，例如：
+
+```xml
+<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+ <dir>/your/path/to/texmf-dist/fonts/opentype</dir>
+</fontconfig>
+```
+
+最后，将此配置文件添加到系统字体位置列表中，并重新生成字体配置缓存：
+
+```bash
+ln -sf /etc/fonts/conf.avail/09-texlive-fonts.conf /etc/fonts/conf.d/
+fc-cache -sf
+```
+
+#### 上游软件包
+
+如果你的 Linux 发行版没有提供软件包，或者如果你只想安装上游软件包，请尝试以下方法：
+
+1. 下载 [latinmodern-math-1959.zip](https://www.gust.org.pl/projects/e-foundry/lm-math/download/latinmodern-math-1959.zip) 和 [static_otf.zip](https://raw.githubusercontent.com/stipub/stixfonts/master/zipfiles/static_otf.zip)。
+2. 如果尚不存在，请创建 `~/.fonts` 目录，并将 `latinmodern-math.otf` 和 `STIXTwoMath-Regular.otf` 放入该目录。
+3. 运行 `fc-cache -f` 以重新生成字体配置缓存。
+
+### Android
+
+你必须使用 [MathML 字体插件](https://addons.mozilla.org/firefox/addon/mathml-fonts/)。
+
+> **备注：** Noto Sans Math 提供了良好的 Unicode 数学符号的覆盖，并且 [Google 计划添加数学布局特性的支持](https://github.com/notofonts/math/issues/14#issuecomment-1161414446)。
+
+### 其他系统
+
+在其他系统上，考虑使用包管理器安装[带有 MATH 表的字体](#带有_math_表的字体)。请注意，这些字体通常随着 TeX 发行版（如 [TeX Live](https://www.tug.org/texlive/)）一起提供，但你可能需要遵循特定的说明，以使系统知道这些字体。作为最后的手段，可以安装 [MathML 字体插件](https://addons.mozilla.org/firefox/addon/mathml-fonts/)。
+
+## 高级设置
+
+在接下来的小节中，你将找到安装和配置 MathML 字体的其他有用提示。
+
+### 阿拉伯数学字母符号
+
+目前，很少有字体具有适合的阿拉伯数学字母符号的图形。如果你可能需要这些字符，我们建议安装 _XITS_ 或 [Amiri](https://www.amirifont.org/) 字体。
+
+### 在没有管理员权限的情况下安装
+
+如果你需要在没有管理员权限的系统上安装字体，则最简单的方法是使用 [MathML 字体插件](https://addons.mozilla.org/firefox/addon/mathml-fonts/)。请注意，使用该插件并不是最佳选择，因为它会强制你的 Gecko 浏览器在访问每个页面时加载 CSS 样式表，以及在所有包含 MathML 内容的页面上加载 Web 数学字体。
+
+在 UNIX 系统上的更好的替代方法是将 [Latin Modern Math](https://www.gust.org.pl/projects/e-foundry/lm-math/download/latinmodern-math-1959.zip) 和 [STIX](https://github.com/stipub/stixfonts) 的 OTF 文件安装到某个本地字体文件夹中，并（如果需要）在其上运行 `fc-cache`。在 macOS 和 Linux 上，标准路径分别是 `~/Library/Fonts/` 和 `~/.fonts`。
+
+### 带有 MATH 表的字体
+
+实际上，你可以安装任何[数学 OpenType 字体](https://fred-wang.github.io/MathFonts/)并将它们用于 MathML 渲染。一些浏览器提供了在字体首选项菜单中配置 MathML 默认字体的方法。或者，你可以尝试使用 [MathML-fontsettings 插件](https://addons.mozilla.org/zh-CN/firefox/addon/mathml-font-settings/)。
+
+- [Asana Math](https://www.ctan.org/tex-archive/fonts/Asana-Math/)
+- [Cambria Math](https://docs.microsoft.com/typography/font-list/?FID=360)
+- [DejaVu Math TeX Gyre](https://sourceforge.net/projects/dejavu/files/dejavu/)
+- [Garamond Math](https://github.com/YuanshengZhao/Garamond-Math)
+- [Latin Modern Math](https://www.gust.org.pl/projects/e-foundry/lm-math)
+- [Libertinus Math](https://github.com/alerque/libertinus)
+- [STIX Math](https://github.com/stipub/stixfonts)
+- [TeX Gyre Bonum Math](https://www.gust.org.pl/projects/e-foundry/tg-math/download/index_html#Bonum_Math)
+- [TeX Gyre Pagella Math](https://www.gust.org.pl/projects/e-foundry/tg-math/download/index_html#Pagella_Math)
+- [TeX Gyre Schola Math](https://www.gust.org.pl/projects/e-foundry/tg-math/download/index_html#Schola_Math)
+- [TeX Gyre Termes Math](https://www.gust.org.pl/projects/e-foundry/tg-math/download/index_html#Termes_Math)
+- [XITS Math](https://github.com/aliftype/xits/releases)
+- [Fira Math](https://github.com/firamath/firamath)
+- [GFS Neohellenic Math](https://greekfontsociety-gfs.gr/typefaces/Math)
diff --git a/files/zh-cn/web/mathml/global_attributes/dir/index.md b/files/zh-cn/web/mathml/global_attributes/dir/index.md
new file mode 100644
index 00000000000000..d50dacd787d65a
--- /dev/null
+++ b/files/zh-cn/web/mathml/global_attributes/dir/index.md
@@ -0,0 +1,63 @@
+---
+title: dir
+slug: Web/MathML/Global_attributes/dir
+l10n:
+ sourceCommit: 8eece0b998c23e8ea35f936d7371a169974130f5
+---
+
+{{MathMLRef}}
+
+**`dir`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)是一个表示 MathML 元素的方向的[枚举](/zh-CN/docs/Glossary/Enumerated)属性。
+
+## 语法
+
+```html
+<!-- 摩洛哥风格 -->
+<math dir="ltr">
+ <msqrt>
+ <mi>س</mi>
+ </msqrt>
+ <mo>=</mo>
+ <msup>
+ <mn>3</mn>
+ <mi>ب</mi>
+ </msup>
+</math>
+
+<!-- 马格里布/马什里克风格 -->
+<math dir="rtl">
+ <msqrt>
+ <mi>س</mi>
+ </msqrt>
+ <mo>=</mo>
+ <msup>
+ <mn>٣</mn>
+ <mi>ب</mi>
+ </msup>
+</math>
+```
+
+### 值
+
+- `ltr`，表示*从左到右*，用于将数学表达式从左到右渲染（例如，英语或摩洛哥风格）；
+- `rtl`，表示*从右到左*，用于将数学表达式从右到左渲染（例如，摩洛哥或马什里克风格）；
+
+> **备注：**
+>
+> - 如果存在 CSS 页面并且元素支持这些属性，则此属性可以被 CSS 属性 {{ cssxref("direction") }} 覆盖。
+> - 数学的方向性与其内容的语义相关，而不是与其表现形式相关，因此建议 Web 开发者尽可能使用这一属性，而不是相关的 CSS 属性。这样，即使在不支持 CSS 或已停用 CSS 的浏览器上，公式也能正确显示。
+> - `dir` 属性用于设置数学公式的方向性，在阿拉伯语世界通常是从右到左的。然而，从右到左书写的语言通常嵌入从左到右书写的数学内容。因此，默认情况下，HTML `dir` 属性中的 `auto` 关键字不被识别，并且[用户代理样式表](/zh-CN/docs/Web/CSS/Cascade#用户代理样式表)会重置 [`math`](/zh-CN/docs/Web/MathML/Element/math) 元素上的方向属性。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 所有[全局属性](/zh-CN/docs/Web/MathML/Global_attributes)
+- {{cssxref("direction")}}
+- HTML [`dir`](/zh-CN/docs/Web/HTML/Global_attributes#dir) 全局属性
diff --git a/files/zh-cn/web/mathml/global_attributes/displaystyle/index.md b/files/zh-cn/web/mathml/global_attributes/displaystyle/index.md
new file mode 100644
index 00000000000000..5d42f69df025a0
--- /dev/null
+++ b/files/zh-cn/web/mathml/global_attributes/displaystyle/index.md
@@ -0,0 +1,57 @@
+---
+title: displaystyle
+slug: Web/MathML/Global_attributes/displaystyle
+l10n:
+ sourceCommit: 8eece0b998c23e8ea35f936d7371a169974130f5
+---
+
+{{MathMLRef}}
+
+**`displaystyle`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)是一个用于设置 MathML 元素的 [math-style](/zh-CN/docs/Web/CSS/math-style) 的布尔值。
+
+## 示例
+
+在这个示例中，使用 [munder](/zh-CN/docs/Web/MathML/Element/munder) 元素将脚本“A”附加到基础的“∑”上。默认情况下，求和符号是以从其父元素继承的[字体大小](/zh-CN/docs/Web/CSS/font-size)渲染的，并且 A 作为缩小的下标。通过显式设置 `displaystyle="true"` 属性，求和符号将会变大，并且“A”变成一个下标。
+
+```html
+<math>
+ <munder>
+ <mo>∑</mo>
+ <mi>A</mi>
+ </munder>
+ <munder displaystyle="true">
+ <mo>∑</mo>
+ <mi>A</mi>
+ </munder>
+</math>
+```
+
+## 语法
+
+```html-nolint
+<math displaystyle="true"></math>
+<math displaystyle="false"></math>
+```
+
+### 值
+
+- `true`
+ - : 将显示样式设置为 `normal`。
+- `false`
+ - : 将显示样式设置为 `compact`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 所有[全局属性](/zh-CN/docs/Web/MathML/Global_attributes)
+- [scriptlevel](/zh-CN/docs/Web/MathML/Global_attributes/scriptlevel) 全局属性
+- {{cssxref("font-size")}}
+- {{cssxref("math-depth")}}
+- {{cssxref("math-style")}}
diff --git a/files/zh-cn/web/mathml/global_attributes/href/index.md b/files/zh-cn/web/mathml/global_attributes/href/index.md
new file mode 100644
index 00000000000000..a0bf1b2b69bba5
--- /dev/null
+++ b/files/zh-cn/web/mathml/global_attributes/href/index.md
@@ -0,0 +1,46 @@
+---
+title: href
+slug: Web/MathML/Global_attributes/href
+l10n:
+ sourceCommit: 8eece0b998c23e8ea35f936d7371a169974130f5
+---
+
+{{MathMLRef}}{{Non-standard_header}}
+
+**`href`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)在 MathML 元素上创建一个指向指定 URL 的超链接。
+
+## 示例
+
+```html
+<!-- 将这个数学方程链接到维基百科关于勾股定理的文章。 -->
+<math href="https://zh.wikipedia.org/wiki/勾股定理">
+ <mi>c</mi>
+ <mo>=</mo>
+ <!-- 将这个平方根链接到相应的 SageMath 计算。 -->
+ <msqrt href="https://sagecell.sagemath.org/?z=eJwrLiwq0TCOM9I2iTPSBAAeqgPO">
+ <msup>
+ <mn>3</mn>
+ <mn>2</mn>
+ </msup>
+ <mo>+</mo>
+ <msup>
+ <mn>4</mn>
+ <mn>2</mn>
+ </msup>
+ </msqrt>
+ <mo>=</mo>
+ <mn>5</mn>
+</math>
+```
+
+## 规范
+
+href 属性在任何面向浏览器的规范中都没有定义，但你可以在 [MathML 4](https://w3c.github.io/mathml/#interf_link) 中找到描述。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 所有 [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)
diff --git a/files/zh-cn/web/mathml/global_attributes/mathsize/index.md b/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
new file mode 100644
index 00000000000000..7b1866b7351032
--- /dev/null
+++ b/files/zh-cn/web/mathml/global_attributes/mathsize/index.md
@@ -0,0 +1,52 @@
+---
+title: mathsize
+slug: Web/MathML/Global_attributes/mathsize
+l10n:
+ sourceCommit: 07f0cf4375aaa02e1071d8bd0e8518db7609b7a9
+---
+
+{{MathMLRef}}{{Deprecated_Header}}
+
+**`mathsize`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[字体大小](/zh-CN/docs/Web/CSS/font-size)。
+
+> **备注：** 尽可能使用 CSS 对 MathML 进行样式设置。`mathsize` 属性只应包含在不支持 CSS 的应用程序中，并且如果设置的话，其将被 CSS `font-size` 属性值覆盖。
+
+## 语法
+
+```html-nolint
+<!-- <length> 值 -->
+<math mathsize="12px">
+<math mathsize="0.8em">
+
+<!-- <percentage> 值 -->
+<math mathsize="80%">
+```
+
+### 值
+
+- {{cssxref("<length>")}}
+
+ - : 一个正的 {{cssxref("<length>")}} 值。对于大多数与字体相关的单位（例如 `em` 和 `ex`），字体大小是相对于父元素的字体大小的。
+
+- {{cssxref("<percentage>")}}
+
+ - : 一个正的 {{cssxref("<percentage>")}} 值，相对于父元素的字体大小。
+
+> **备注：** 一些浏览器可能还接受[旧版 MathML 长度](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。
+
+## 规范
+
+{{Specifications}}
+
+- 在 MathML 3 和更早版本中，支持关键字 `small`、`normal` 和 `big`，以及 MathML3 特定的长度语法。自 MathML 核心版本以来，语法与 CSS {{cssxref("<length-percentage>")}} 值相匹配。
+
+- 此属性设计用于不支持 CSS 的 MathML 应用程序。自 MathML 核心版本以来，推荐使用等效的 CSS。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 所有[全局属性](/zh-CN/docs/Web/MathML/Global_attributes)
+- {{cssxref("font-size")}}
diff --git a/files/zh-cn/web/mathml/global_attributes/scriptlevel/index.md b/files/zh-cn/web/mathml/global_attributes/scriptlevel/index.md
new file mode 100644
index 00000000000000..705e94eecd0668
--- /dev/null
+++ b/files/zh-cn/web/mathml/global_attributes/scriptlevel/index.md
@@ -0,0 +1,61 @@
+---
+title: scriptlevel
+slug: Web/MathML/Global_attributes/scriptlevel
+l10n:
+ sourceCommit: 8eece0b998c23e8ea35f936d7371a169974130f5
+---
+
+{{MathMLRef}}
+
+**`scriptlevel`** [全局属性](/zh-CN/docs/Web/MathML/Global_attributes)设置 MathML 元素的[数学深度](/zh-CN/docs/Web/CSS/math-depth)。它允许覆盖[用户代理样式表](/zh-CN/docs/Web/CSS/Cascade#用户代理样式表)中定义的在 MathML 公式中自动计算[字体大小](/zh-CN/docs/Web/CSS/font-size)的规则。
+
+## 示例
+
+```html
+<!-- math-depth 在 <math> 根元素上默认为 0。 -->
+<math style="font-size: 64pt">
+ <msubsup>
+ <!-- base 上的 math-depth 和 font-size 保持不变。 -->
+ <mtext>BASE</mtext>
+ <!-- math-depth 在下标中默认为 add(1)，因此增加了 1，字体大小缩小了一次。 -->
+ <mtext>SUBSCRIPT</mtext>
+ <!-- 上标中的 math-depth 也默认为 add(1)，但 scriptlevel 属性告诉它增加 2，因此实际上字体大小缩小了两次。 -->
+ <mtext scriptlevel="+2">SUPERSCRIPT</mtext>
+ </msubsup>
+</math>
+```
+
+## 语法
+
+```html-nolint
+<math scriptlevel="-1"> <!-- 将 math-depth 减小 1 -->
+<math scriptlevel="+2"> <!-- 将 math-depth 增加 2 -->
+<math scriptlevel="0"> <!-- 重置 math-depth 为 0 -->
+```
+
+### 值
+
+如果 `<U>` 是一个无符号[整数](/zh-CN/docs/Web/CSS/integer)（即移除了前缀符号的整数），则接受的值为：
+
+- `<U>`
+ - : 将 math-depth 设置为值 `<U>`。这将使元素的 `font-size` 与指定深度的元素的字体大小相同。
+- `+<U>`
+ - : 将 `math-depth` 设置为值 `add(<U>)`。这将使元素的 `font-size` 缩小 `<U>` 次。
+- `-<U>`
+ - : 将 `math-depth` 设置为值 `add(-<U>)`。这将使元素的 `font-size` 放大 `<U>` 次。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 所有[全局属性](/zh-CN/docs/Web/MathML/Global_attributes)
+- [displaystyle](/zh-CN/docs/Web/MathML/Global_attributes/displaystyle) 全局属性
+- {{cssxref("font-size")}}
+- {{cssxref("math-depth")}}
+- {{cssxref("math-style")}}
diff --git a/files/zh-cn/web/media/autoplay_guide/index.md b/files/zh-cn/web/media/autoplay_guide/index.md
index 61013efb20762f..37ecff700757ad 100644
--- a/files/zh-cn/web/media/autoplay_guide/index.md
+++ b/files/zh-cn/web/media/autoplay_guide/index.md
@@ -3,6 +3,8 @@ title: 媒体和 Web Audio API 的自动播放指南
slug: Web/Media/Autoplay_guide
---
+{{QuickLinksWithSubpages("/zh-CN/docs/Web/Media")}}
+
网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。在这篇文章中，我们将介绍各种媒体和 Web Audio API 的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。
当源媒体没有音轨或音轨静音时，阻止自动播放*不会*应用于 {{HTMLElement("video")}} 元素。具有活动音轨的媒体被认为是**可听的**，并且阻止自动播放适用于它们。**听不见的**媒体不受阻止自动播放的影响。
diff --git a/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.md b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.md
index e8a90eb726eb2d..f2a105e1ccfa2d 100644
--- a/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.md
+++ b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.md
@@ -3,6 +3,8 @@ title: 为 HTML 5 视频提供的 DASH 自适应串流
slug: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video
---
+{{QuickLinksWithSubpages("/zh-CN/docs/Web/Media")}}
+
经由 HTTP 的动态自适应串流（DASH）是一种自适应串流协议。这意味着它使得视频串流能基于网络性能来调整比特率，以保证视频流畅播放。
## 浏览器支持
diff --git a/files/zh-cn/web/performance/critical_rendering_path/index.md b/files/zh-cn/web/performance/critical_rendering_path/index.md
index 79642db4418805..9b2f2469e53d5e 100644
--- a/files/zh-cn/web/performance/critical_rendering_path/index.md
+++ b/files/zh-cn/web/performance/critical_rendering_path/index.md
@@ -3,6 +3,8 @@ title: 关键渲染路径
slug: Web/Performance/Critical_rendering_path
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
**关键渲染路径**是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了[文档对象模型](/zh-CN/docs/Web/API/Document_Object_Model)（DOM）、[CSS 对象模型](/zh-CN/docs/Web/API/CSS_Object_Model)（CSSOM）、渲染树和布局。
在解析 HTML 时会创建文档对象模型。HTML 可以请求 JavaScript，而 JavaScript 反过来，又可以更改 DOM。HTML 包含或请求样式，依次来构建 CSS 对象模型。浏览器引擎将两者结合起来以创建渲染树。布局确定页面上所有内容的大小和位置。确定布局后，将像素绘制到屏幕上。
diff --git a/files/zh-cn/web/performance/index.md b/files/zh-cn/web/performance/index.md
index deef788e56f36d..3b753eb4994e4b 100644
--- a/files/zh-cn/web/performance/index.md
+++ b/files/zh-cn/web/performance/index.md
@@ -1,15 +1,17 @@
---
title: Web 性能
slug: Web/Performance
+l10n:
+ sourceCommit: 035dd5ef748061d1997c1c79f972781dd680dfa4
---
{{QuickLinksWithSubPages}}
-Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速打开，动画是否平滑？Web 性能既包括客观的度量如加载时间，每秒帧数和到页面可交互的时间；也包括用户的对页面内容加载时间的主观感觉。
+Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指站点从加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速加载和显示、动画是否平滑？Web 性能既包括客观的度量（如加载时间、每秒帧数和到页面可交互的时间），也包括用户的对页面内容加载时间的主观感觉。
-页面响应时间越长，越多的用户就会放弃该网站。重要的是，通过使体验尽可能早地变得可用和交互，同时异步地加载长尾体验部分，来最大程度地减少加载和响应时间，并添加其他功能以降低延迟。
+站点响应时间越长，越多的用户就会放弃该网站。重要的是尽量缩短加载和响应时间，并添加其他特性来降低延迟：尽快提供尽可能可用且可交互的体验，并异步加载长尾体验部分。
-有很多工具，API 和最佳实践帮助我们测量和改进网页性能。本章对此有所讲解。
+有很多工具、API 和最佳实践帮助我们测量和改进 Web 性能。我们将在本节中介绍：
## 关键性能指南
@@ -17,52 +19,48 @@ Web 性能是客观的衡量标准，是用户对加载时间和运行时的直
## 初学者教程
-MDN [Web 性能学习专区](/zh-CN/docs/Learn/Performance)有着涵盖性能要素的最新教程。如果你是性能新手，请从这里开始：
+MDN [Web 性能学习专区](/zh-CN/docs/Learn/Performance)有着涵盖性能要素的最新教程。如果你是性能方面的新手，请从这里开始：
-- [Web 性能：概述](/zh-CN/docs/Learn/Performance/web_performance_overview)
- - : Web 性能学习路径概述。在这里开始你的旅程。
+- [Web 性能：概述](/zh-CN/docs/Learn/Performance/What_is_web_performance)
+ - : Web 性能学习路径概述。从这里开始你的旅程。
- [什么是 Web 性能？](/zh-CN/docs/Learn/Performance/What_is_web_performance)
- - : 该文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。
-- [用户如何看待性能？](/zh-CN/docs/Learn/Performance/perceived_performance)
- - : 比网站在毫秒内响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳练习来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。
-- [Web 性能基础](/zh-CN/docs/Learn/Performance/web_performance_basics)
- - : 除了 HTML，CSS，JavaScript 和媒体文件这些前端模块之外，还有其他影响 Web 性能的因素，它们可能会导致应用程序变慢，或在主观和客观上使应用程序变快。有许多与 Web 性能相关的 API、开发人员工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。
+ - : 本文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。
+- [用户如何看待性能？](/zh-CN/docs/Learn/Performance/Perceived_performance)
+ - : 比网站在毫秒内的响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳实践来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。
+- [Web 性能基础](/zh-CN/docs/Learn/Performance/Web_Performance_Basics)
+ - : 除了 HTML、CSS、JavaScript 和媒体文件这些前端组件之外，还有其他导致应用程序变慢，或在主观和客观上使应用程序变快的因素。有许多与 Web 性能相关的 API、开发者工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。
- [HTML 性能特性](/zh-CN/docs/Learn/Performance/HTML)
- - : 标签的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性，包括样式、脚本、媒体和第三方脚本等内容，可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。
+ - : 标记的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性（包括样式、脚本、媒体和第三方脚本等内容），可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。
- [多媒体：图像与视频](/zh-CN/docs/Learn/Performance/Multimedia)
- - : Web 性能的最小代价通常是媒体优化。基于每个用户代理的能力、大小和像素密度来服务不同的媒体文件已成为可能。另外，如从背景图像中删除音频轨迹，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保影响尽可能小的方法。
-- [CSS 性能特性](/zh-CN/docs/Learn/Performance/CSS_performance)
+ - : Web 性能最容易提升的点通常是媒体优化。基于每个用户代理的能力、尺寸和像素密度来提供不同的媒体文件已成为可能。另外，如从背景视频中删除音轨，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保将影响降至最低的方法。
+- [CSS 性能特性](/zh-CN/docs/Learn/Performance/CSS)
- : CSS 对于提高性能来说可能是一个不太重要的优化点，但是某些 CSS 特性对性能的影响比其他特性更大。在该文中，我们将研究一些影响性能的 CSS 属性，并提供样式处理的建议方法，以确保性能不受负面影响。
- [JavaScript 性能最佳实践](/zh-CN/docs/Learn/Performance/JavaScript)
- - : 如果正确使用 JavaScript，则可以提供交互式和身临其境的 Web 体验——否则可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。
-- [移动端性能](/zh-CN/docs/Learn/Performance/Mobile)
- - : 随着移动设备上的 Web 访问普及，并且所有移动平台都具有功能完善的 Web 浏览器，但由于受限于带宽、CPU、电池续航等因素，因此考虑这些平台上 Web 内容的性能非常重要。本文着眼于特定于移动设备的性能注意事项。
+ - : 如果正确使用 JavaScript，则可以提供交互式和沉浸式的 Web 体验——否则可能会严重影响下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。
## 使用 Performance API
-- [Performance API](/zh-CN/docs/Web/API/Performance_API/Using_the_Performance_API)
- - : 该指南介绍了如何使用 [High-Resolution Time](https://w3c.github.io/hr-time/) 标准中定义的 [`Performance`](/zh-CN/docs/Web/API/Performance) 接口。
-- [Resource Timing API](/zh-CN/docs/Web/API/Performance_API/Resource_timing)
- - : [资源加载和定时](/zh-CN/docs/Web/API/Performance_API/Resource_timing)加载这些资源，包括管理资源缓冲区和处理 CORS
-- [User Timing API](/zh-CN/docs/Web/API/Performance_API/User_timing)
- - : 使用创建特定于应用程序的时间戳 user timing API 的“标记”和“度量”条目类型——它们是浏览器性能时间轴的一部分。
-- [Beacon API](/zh-CN/docs/Web/API/Beacon_API/Using_the_Beacon_API)
- - : 使用 [Beacon](/zh-CN/docs/Web/API/Beacon_API) 接口调度发送给服务器的异步非阻塞请求。
-- [Intersection Observer API](/zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)
- - : 通过 [Intersection Observer API](/zh-CN/docs/Web/API/Intersection_Observer_API) 学习对元素可见性的监测，并在关注的元素变得可见时被异步通知。
+- [资源计时 API](/zh-CN/docs/Web/API/Performance_API/Resource_timing)
+ - : [资源加载并计时](/zh-CN/docs/Web/API/Performance_API/Resource_timing)这些资源的加载，包括管理资源缓冲区和应对 [CORS](/zh-CN/docs/Web/HTTP/CORS)。
+- [用户计时 API](/zh-CN/docs/Web/API/Performance_API/User_timing)
+ - : 使用[用户计时 API](/zh-CN/docs/Web/API/Performance_API/User_timing) 的“标记”和“度量”条目类型（它们是浏览器性能时间轴的一部分）创建特定于应用程序的时间戳。
+- [信标 API](/zh-CN/docs/Web/API/Beacon_API)
+ - : 使用[信标](/zh-CN/docs/Web/API/Beacon_API)接口调度发送给 Web 服务器的异步非阻塞请求。
+- [交叉观察器 API](/zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)
+ - : 通过[交叉观察器 API](/zh-CN/docs/Web/API/Intersection_Observer_API) 学习对元素可见性的监测，并在关注的元素变得可见时接收异步通知。
## 其他文档
-- [开发者工具中与性能相关的功能](/zh-CN/docs/Tools/Performance)
- - : 本节提供有关如何使用和理解开发人员工具中的性能特性的信息，包括 [Waterfall](/zh-CN/docs/Tools/Performance/Waterfall)、[Call Tree](/zh-CN/docs/Tools/Performance/Call_Tree) 和 [Flame Charts](/zh-CN/docs/Tools/Performance/Flame_Chart)。
+- [Firefox Profiler 性能特性](https://profiler.firefox.com/docs/#/)
+ - : 网站提供了如何使用和理解开发者工具中的性能特性的信息，包括[调用树](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-call-tree)、[火焰图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-flame-graph)、[栈图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-stack-chart)、[标记图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-marker-chart)和[网络图](https://profiler.firefox.com/docs/#/./guide-ui-tour-panels?id=the-network-chart)。
- [使用内置分析器进行分析](https://profiler.firefox.com/docs/#/./guide-getting-started)
- : 了解如何使用 Firefox 的内置分析器来分析应用程序性能。
-## 各种术语
+## 术语表
-- {{glossary('Beacon')}}
+- {{glossary('Beacon', '信标')}}
- {{glossary('Brotli compression', 'Brotli 压缩')}}
-- {{glossary('Client hints', '客户端提示')}}
+- [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints)
- {{glossary('Code splitting', '代码拆分')}}
- {{glossary('CSSOM')}}
- {{glossary('Domain sharding', '域名分片')}}
@@ -70,44 +68,43 @@ MDN [Web 性能学习专区](/zh-CN/docs/Learn/Performance)有着涵盖性能要
- {{glossary('First contentful paint', '首次内容绘制')}}
- {{glossary('First CPU idle', '首次 CPU 空闲')}}
- {{glossary('First input delay', '首次输入延迟')}}
-- {{glossary('First interactive', '首次交互')}}
- {{glossary('First meaningful paint', '首次有效绘制')}}
- {{glossary('First paint', '首次绘制')}}
- {{glossary('HTTP')}}
- {{glossary('HTTP_2', 'HTTP/2')}}
-- {{glossary('Jank', '卡顿（Jank）')}}
+- {{glossary('Jank', '卡顿')}}
- {{glossary('Latency', '延迟')}}
- {{glossary('Lazy load', '懒加载')}}
- {{glossary('Long task', '长任务')}}
- {{glossary('Lossless compression', '无损压缩')}}
- {{glossary('Lossy compression', '有损压缩')}}
- {{glossary('Main thread', '主线程')}}
-- {{glossary('Minification', '代码缩减')}}
-- {{glossary('Network throttling', '网络节流')}}
+- {{glossary('Minification', '极简化')}}
+- {{glossary('Network throttling', '网络限速')}}
- {{glossary('Packet', '包')}}
- {{glossary('Page load time', '页面加载时间')}}
- {{glossary('Page prediction', '页面预测')}}
- {{glossary('Parse', '解析')}}
- {{glossary('Perceived performance', '感知性能')}}
-- {{glossary('Prefetch')}}
-- {{glossary('Prerender')}}
+- {{glossary('Prefetch', '预取')}}
+- {{glossary('Prerender', '预渲染')}}
- {{glossary('QUIC')}}
- {{glossary('RAIL')}}
- {{glossary('Real User Monitoring', '真实用户监控')}}
-- {{glossary('Resource Timing')}}
+- {{glossary('Resource Timing', '资源计时')}}
- {{glossary('Round Trip Time (RTT)', '来回通讯延迟（RTT）')}}
-- {{glossary('Server Timing')}}
-- {{glossary('Speculative parsing')}}
+- {{glossary('Server Timing', '服务器计时')}}
+- {{glossary('Speculative parsing', '预解析')}}
- {{glossary('Speed index', '速度指标')}}
- {{glossary('SSL')}}
-- {{glossary('Synthetic monitoring', '综合监控')}}
+- {{glossary('Synthetic monitoring', "模拟监控")}}
- {{glossary('TCP handshake', 'TCP 握手')}}
- {{glossary('TCP slow start', 'TCP 慢开始')}}
- {{glossary('Time to first byte', '第一字节时间')}}
- {{glossary('Time to interactive', '可交互时间')}}
- {{glossary('TLS')}}
- {{glossary('TCP', '传输控制协议（TCP）')}}
-- {{glossary('Tree shaking', '摇树（Tree shaking）')}}
+- {{glossary('Tree shaking', '摇树')}}
- {{glossary('Web performance', 'Web 性能')}}
## 参见
@@ -121,7 +118,8 @@ HTML
- [响应式图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
-- [使用 `rel="preload"` 以预加载内容](/zh-CN/docs/Web/HTML/Link_types/preload)——<https://w3c.github.io/preload/>
+- [使用 `rel="preload"` 以预加载内容](/zh-CN/docs/Web/HTML/Attributes/rel/preload)
+- <https://w3c.github.io/preload/>
CSS
@@ -133,30 +131,30 @@ CSS
JavaScript
- [DOMContentLoaded](/zh-CN/docs/Web/API/Document/DOMContentLoaded_event)
-- [垃圾回收（GC）](/zh-CN/docs/Glossary/Garbage_collection)
-- [requestAnimationFrame](/zh-CN/docs/Web/API/window/requestAnimationFrame)
+- [垃圾回收](/zh-CN/docs/Glossary/Garbage_collection)
+- [requestAnimationFrame](/zh-CN/docs/Web/API/Window/requestAnimationFrame)
API
- [Performance API](/zh-CN/docs/Web/API/Performance_API)
-- [Navigation Timing API](/zh-CN/docs/Web/API/Performance_API/Navigation_timing)
-- [Media Capabilities API](/zh-CN/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API)
-- [Network Information API](/zh-CN/docs/Web/API/Network_Information_API)
+- [导航计时 API](/zh-CN/docs/Web/API/Performance_API/Navigation_timing)
+- [媒体能力 API](/zh-CN/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API)
+- [网络信息 API](/zh-CN/docs/Web/API/Network_Information_API)
- [PerformanceNavigationTiming](/zh-CN/docs/Web/API/PerformanceNavigationTiming)
-- [Battery Status API](/zh-CN/docs/Web/API/Battery_Status_API)
+- [电池状态 API](/zh-CN/docs/Web/API/Battery_Status_API)
- [Navigator.deviceMemory](/zh-CN/docs/Web/API/Navigator/deviceMemory)
-- [Intersection Observer](/zh-CN/docs/Web/API/Intersection_Observer_API)
-- [使用 User Timing API](/zh-CN/docs/Web/API/Performance_API/User_timing)
-- [Long Tasks API](/zh-CN/docs/Web/API/Long_Tasks_API)
-- [High Resolution Timing API](/zh-CN/docs/Web/API/DOMHighResTimeStamp)（[https://w3c.github.io/hr-time/)](https://w3c.github.io/hr-time/)）
-- [Resource Timing API](/zh-CN/docs/Web/API/Performance_API/Resource_timing)
-- [Page Visibility](/zh-CN/docs/Web/API/Page_Visibility_API)
-- [基于 Background Tasks API 的后台任务调度](/zh-CN/docs/Web/API/Background_Tasks_API)
+- [交叉观察器](/zh-CN/docs/Web/API/Intersection_Observer_API)
+- [使用用户计时 API](/zh-CN/docs/Web/API/Performance_API/User_timing)
+- [长任务 API](/zh-CN/docs/Web/API/PerformanceLongTaskTiming)
+- [高解析度时间 API](/zh-CN/docs/Web/API/DOMHighResTimeStamp)（<https://w3c.github.io/hr-time/>）
+- [资源计时 API](/zh-CN/docs/Web/API/Performance_API/Resource_timing)
+- [页面可见性](/zh-CN/docs/Web/API/Page_Visibility_API)
+- [后台任务协同调度 API](/zh-CN/docs/Web/API/Background_Tasks_API)
- [requestIdleCallback()](/zh-CN/docs/Web/API/Window/requestIdleCallback)
-- [Beacon API](/zh-CN/docs/Web/API/Beacon_API)
-- Resource Hints - [dns-prefetch](/zh-CN/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control), preconnect, [prefetch](/zh-CN/docs/Glossary/Prefetch), and prerender
+- [信标 API](/zh-CN/docs/Web/API/Beacon_API)
+- 资源提示：[dns-prefetch](/zh-CN/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control)、[preconnect](/zh-CN/docs/Web/HTML/Attributes/rel/preconnect)、[prefetch](/zh-CN/docs/Glossary/Prefetch) 和 prerender
- [FetchEvent.preloadResponse](/zh-CN/docs/Web/API/FetchEvent/preloadResponse)
- [Performance Server Timing API](/zh-CN/docs/Web/API/PerformanceServerTiming)
@@ -164,7 +162,7 @@ API
- [Content-encoding](/zh-CN/docs/Web/HTTP/Headers/Content-Encoding)
- HTTP/2
-- [gZip](/zh-CN/docs/Glossary/GZip_compression)
+- [gZip](/zh-CN/docs/Glossary/gzip_compression)
- 客户端提示
工具
@@ -182,6 +180,6 @@ API
- [Web Worker API](/zh-CN/docs/Web/API/Web_Workers_API)
-- [PWA](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers)
+- [离线和后台操作](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation)
- [缓存](/zh-CN/docs/Web/HTTP/Caching)
- 内容分发网络（CDN）
diff --git a/files/zh-cn/web/performance/optimizing_startup_performance/index.md b/files/zh-cn/web/performance/optimizing_startup_performance/index.md
index aac67df9686e4f..3df2c42cb956ea 100644
--- a/files/zh-cn/web/performance/optimizing_startup_performance/index.md
+++ b/files/zh-cn/web/performance/optimizing_startup_performance/index.md
@@ -3,6 +3,8 @@ title: 优化启动性能
slug: Web/Performance/Optimizing_startup_performance
---
+{{QuickLinksWithSubPages("Web/Performance")}}
+
一个在软件应用开发中经常被忽视的方面—即便在那些专注于性能优化的软件中—就是启动时的表现。你的应用需要花费多长时间启动？当应用加载时是否会卡住用户的设备或浏览器？这会让用户担心你的应用崩溃了，或者哪儿出错了。花时间确保你的应用能够更好地启动总是一个好主意。这篇文章提供了一些技巧和建议来帮助你达成这个目标，不管是在写一个新的应用还是从其他平台向 Web 移植一个应用。
## 更好地启动
diff --git a/files/zh-cn/web/security/securing_your_site/index.md b/files/zh-cn/web/security/practical_implementation_guides/index.md
similarity index 98%
rename from files/zh-cn/web/security/securing_your_site/index.md
rename to files/zh-cn/web/security/practical_implementation_guides/index.md
index 3474b2bb3962ce..05e68968c69b21 100644
--- a/files/zh-cn/web/security/securing_your_site/index.md
+++ b/files/zh-cn/web/security/practical_implementation_guides/index.md
@@ -1,6 +1,6 @@
---
title: 确保你的站点安全
-slug: Web/Security/Securing_your_site
+slug: Web/Security/Practical_implementation_guides
---
你可以采取一些措施来确保你的网站安全。本文提供了各种建议，以及提供更多有用信息的其他文章的链接。
diff --git a/files/zh-cn/web/security/securing_your_site/turning_off_form_autocompletion/index.md b/files/zh-cn/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
similarity index 98%
rename from files/zh-cn/web/security/securing_your_site/turning_off_form_autocompletion/index.md
rename to files/zh-cn/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
index 5aeeb38064fd29..9d6cb3c8154f50 100644
--- a/files/zh-cn/web/security/securing_your_site/turning_off_form_autocompletion/index.md
+++ b/files/zh-cn/web/security/practical_implementation_guides/turning_off_form_autocompletion/index.md
@@ -1,6 +1,6 @@
---
title: 如何关闭表单自动填充
-slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+slug: Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
---
本文介绍了网站如何禁用表单字段的自动完成功能。
diff --git a/files/zh-cn/web/svg/attribute/d/index.md b/files/zh-cn/web/svg/attribute/d/index.md
index fbbc64d56c0084..9b8a9f3dbea121 100644
--- a/files/zh-cn/web/svg/attribute/d/index.md
+++ b/files/zh-cn/web/svg/attribute/d/index.md
@@ -1,6 +1,8 @@
---
title: d
slug: Web/SVG/Attribute/d
+l10n:
+ sourceCommit: 8cd08162e592c1baf5d888f4c5a08a58360344b5
---
{{SVGRef}}
@@ -11,7 +13,7 @@ slug: Web/SVG/Attribute/d
你可以将此属性与以下 SVG 元素一起使用：[`<path>`](#path)、[`<glyph>`](#path)、[`<missing-glyph>`](#missing-glyph)。
-`d` 是一个[表现属性](/zh-CN/docs/Web/SVG/Attribute/Presentation)，因此可以[用于作为 CSS 属性](#将_d_作为_css_属性)。
+`d` 是一个表现属性，因此可以[用于作为 CSS 属性](#将_d_作为_css_属性)。
## 示例
@@ -40,7 +42,7 @@ svg {
## path
-对于 {{SVGElement('path')}}，`d` 是一个字符串，其中包含一组路径命令，用于定义要绘制的路径。
+对于 {{SVGElement('path')}}，`d` 是一个包含一组路径命令的字符串，用于定义要绘制的路径。
<table class="properties">
<tbody>
@@ -65,7 +67,7 @@ svg {
> **警告：** 自 SVG2 起，{{SVGElement('glyph')}} 已被弃用，不应该继续使用。
-对于 {{SVGElement('glyph')}}，`d` 是一个字符串，其中包一组路径命令，用于定义字形（glyph）的轮廓形状。
+对于 {{SVGElement('glyph')}}，`d` 是一个包含一组路径命令的字符串，用于定义字形（glyph）的轮廓形状。
<table class="properties">
<tbody>
@@ -92,7 +94,7 @@ svg {
> **警告：** 自 SVG2 起，{{SVGElement('missing-glyph')}} 已被弃用，不应该继续使用。
-对于 {{SVGElement('missing-glyph')}}，`d` 是一个字符串，其中包一组路径命令，用于定义字形（glyph）的轮廓形状。
+对于 {{SVGElement('missing-glyph')}}，`d` 是一个包含一组路径命令的字符串，用于定义字形（glyph）的轮廓形状。
<table class="properties">
<tbody>
@@ -115,9 +117,9 @@ svg {
## 将 d 作为 CSS 属性
-`d` 是一个[表现属性](/zh-CN/docs/Web/SVG/Attribute/Presentation)，因此也可以使用 CSS 进行修改。该属性采用 [path()](/zh-CN/docs/Web/CSS/path) 或 `none`。
+`d` 是一个表现属性，因此也可以使用 CSS 进行修改。该属性采用 [path()](/zh-CN/docs/Web/CSS/path) 或 `none`。
-下面的示例展示了如何在悬停在元素上时应用新的路径。新的路径与旧的路径现统，但额外增加了一条穿过心形图案的线。
+下面的示例展示了如何在悬停在元素上时应用新的路径。新的路径与旧的路径相同，但额外增加了一条穿过心形图案的线。
```css
html,
@@ -126,7 +128,7 @@ svg {
height: 100%;
}
-/* This path is displayed on hover*/
+/* 这条路径会在悬停时显示 */
#svg_css_ex1:hover path {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
@@ -156,12 +158,12 @@ svg {
SVG 定义了六种路径命令类型，一共 20 条命令：
-- 移动到：`M`、`m`
-- 画线至：`L`、`l`、`H`、`h`、`V`、`v`
-- 三次方贝塞尔曲线：`C`、`c`、`S`、`s`
-- 二次方贝塞尔曲线：`Q`、`q`、`T`、`t`
-- 椭圆曲线：`A`、`a`
-- 封闭路径：`Z`、`z`
+- [MoveTo](#moveto_路径命令)：`M`、`m`
+- [LineTo](#lineto_路径命令)：`L`、`l`、`H`、`h`、`V`、`v`
+- [三次贝塞尔曲线](#三次贝塞尔曲线)：`C`、`c`、`S`、`s`
+- [二次贝塞尔曲线](#二次贝塞尔曲线)：`Q`、`q`、`T`、`t`
+- [椭圆曲线](#椭圆曲线)：`A`、`a`
+- [ClosePath](#closepath)：`Z`、`z`
> **备注：** 命令是*大小写敏感*的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。
@@ -267,9 +269,6 @@ svg {
{{EmbedLiveSample('MoveTo 路径命令', '100%', 200)}}
-- 位于绝对位置 x=50, y= 100：`<path d="M50,100..." />`
-- 往右移 50，往下移 100：`<path d="m50,100..." />`
-
### Lineto 路径命令
_Lineto_ 指令将绘制一条直线段。这个直线段从*当前位置*（_P<sub>o</sub>_; {_x<sub>o</sub>_, _y<sub>o</sub>_}）移到*指定位置*（_P<sub>n</sub>_; {_x<sub>n</sub>_, _y<sub>n</sub>_}）。然后，_指定位置_（_P<sub>n</sub>_）将变成下一个命令中的*当前位置*（_P<sub>o</sub>′_）。
@@ -426,7 +425,7 @@ svg {
```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
- <!-- LineTo commands with absolute coordinates -->
+ <!-- 使用绝对坐标的 LineTo 命令 -->
<path
fill="none"
stroke="red"
@@ -435,7 +434,7 @@ svg {
V 10
H 50" />
- <!-- LineTo commands with relative coordinates -->
+ <!-- 使用相对坐标的 LineTo 命令 -->
<path
fill="none"
stroke="red"
@@ -448,7 +447,7 @@ svg {
{{EmbedLiveSample('Lineto 路径命令', '100%', 200)}}
-## 三次贝塞尔曲线
+### 三次贝塞尔曲线
_三次_[_贝塞尔曲线_](/zh-CN/docs/Glossary/Bezier_curve)是使用四个点定义的平滑曲线：
@@ -609,7 +608,7 @@ svg {
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Cubic Bézier curve with absolute coordinates -->
+ <!-- 使用绝对坐标的三次贝塞尔曲线 -->
<path
fill="none"
stroke="red"
@@ -617,7 +616,7 @@ svg {
C 30,90 25,10 50,10
S 70,90 90,90" />
- <!-- Cubic Bézier curve with relative coordinates -->
+ <!-- 使用相对坐标的三次贝塞尔曲线 -->
<path
fill="none"
stroke="red"
@@ -625,16 +624,16 @@ svg {
c 20,0 15,-80 40,-80
s 20,80 40,80" />
- <!-- Highlight the curve vertex and control points -->
+ <!-- 高亮显示曲线顶点和控制点 -->
<g id="ControlPoints">
- <!-- First cubic command control points -->
+ <!-- 第一段三次贝塞尔曲线的控制点 -->
<line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
<circle cx="30" cy="90" r="1.5" />
<line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
<circle cx="25" cy="10" r="1.5" />
- <!-- Second smooth command control points (the first one is implicit) -->
+ <!-- 第二段平滑三次贝塞尔曲线的控制点（第一个是隐式的） -->
<line
x1="50"
y1="10"
@@ -647,7 +646,7 @@ svg {
<line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
<circle cx="70" cy="90" r="1.5" />
- <!-- curve vertex points -->
+ <!-- 曲线顶点 -->
<circle cx="10" cy="90" r="1.5" />
<circle cx="50" cy="10" r="1.5" />
<circle cx="90" cy="90" r="1.5" />
@@ -815,7 +814,7 @@ svg {
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Quadratic Bézier curve with implicit repetition -->
+ <!-- 二次贝塞尔曲线，带有隐式重复 -->
<path
fill="none"
stroke="red"
@@ -823,12 +822,12 @@ svg {
Q 25,25 40,50
t 30,0 30,0 30,0 30,0 30,0" />
- <!-- Highlight the curve vertex and control points -->
+ <!-- 高亮显示曲线顶点和控制点 -->
<g>
<polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
<circle cx="25" cy="25" r="1.5" />
- <!-- Curve vertex points -->
+ <!-- 曲线顶点 -->
<circle cx="10" cy="50" r="1.5" />
<circle cx="40" cy="50" r="1.5" />
@@ -975,7 +974,7 @@ svg {
```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
- <!-- The influence of the arc flags with which the arc is drawn -->
+ <!-- 通过弧形标志绘制不同的弧形路径 -->
<path
fill="none"
stroke="red"
@@ -1004,7 +1003,7 @@ svg {
{{EmbedLiveSample('椭圆曲线', '100%', 200)}}
-## ClosePath
+### ClosePath
_ClosePath_ 命令将从*当前位置*绘制一条直线到路径中的第一个点。
@@ -1040,8 +1039,7 @@ svg {
```html
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
<!--
- An open shape with the last point of
- the path different to the first one
+ 一个起点和终点不同的开放形状
-->
<path
stroke="red"
@@ -1049,8 +1047,7 @@ svg {
l -4,8 8,0" />
<!--
- An open shape with the last point of
- the path matching the first one
+ 一个起点和终点相同的开放形状
-->
<path
stroke="red"
@@ -1058,8 +1055,7 @@ svg {
l -4,8 8,0 -4,-8" />
<!--
- A closed shape with the last point of
- the path different to the first one
+ 一个起点和终点不同的闭合形状
-->
<path
stroke="red"
diff --git a/files/zh-cn/web/svg/attribute/enable-background/index.md b/files/zh-cn/web/svg/attribute/enable-background/index.md
deleted file mode 100644
index b9fb8dba6d50af..00000000000000
--- a/files/zh-cn/web/svg/attribute/enable-background/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: enable-background
-slug: Web/SVG/Attribute/enable-background
----
-
-{{SVGRef}} {{deprecated_header("SVG 2")}}
-
-该 **`enable-background`** 属性指定如何管理背景图像的累积。
-
-**注意：**作为演示文稿属性，`enable-background`可以用作 CSS 属性。
-
-作为表示属性，它可以应用于任何元素，但仅对以下 11 个元素有效：{{SVGElement("a")}}，{{SVGElement("defs")}}，{{SVGElement("字形")}}，{{SVGElement("g")}}，{{SVGElement("marker")}}，{{SVGElement("mask")}}，{{SVGElement("missing-glyph")}}，{{SVGElement("pattern")}}，{{SVGElement("svg")}}，{{SVGElement("switch")}}和{{SVGElement("symbol")}}
-
-## 上下文注释
-
-| 值 | `accumulate`\| `new`[ `<x>` `<y>` `<width>` `<height>`]？ |
-| -------- | --------------------------------------------------------- |
-| 默认值 | `accumulate` |
-| 可动画的 | 没有 |
-
-- `accumulate`
- - : 如果祖先容器元素的属性值为`enable-background: new`，则当前容器元素内的所有图形元素都将呈现到父容器元素的背景图像画布上以及目标设备上。否则，没有当前的背景图像画布，因此图形元素仅渲染到目标设备上。
-- `new [ <x> <y> <width> <height> ]?`
- - : 该值使当前容器元素的子代能够访问背景图像。它还指示建立了新的（即最初为透明的黑色）背景图像画布，并且实际上，除了将当前容器元素的所有子对象呈现到目标设备上之外，还应将其呈现到新的背景图像画布中。The optional `<x>`, `<y>`, `<width>`, and `<height>` parameters are [`<number>`](/zh-CN/docs/Web/SVG/Content_type#Number) values that indicate the subregion of the container elementʼs user space where access to the background image is allowed to happen. Those values act as a clipping rectangle on the background image canvas.
- Negative values for `<width>` or `<height>` are forbidden. If one, two, or three values are specified or if neither `<width>` nor `<height>` are specified, the `BackgroundImage` and `BackgroundAlpha` of a filter primitive are processed as if background image processing were not enabled.
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/image-rendering/index.md b/files/zh-cn/web/svg/attribute/image-rendering/index.md
index 6f306c0f44e4ed..099bd43e04307d 100644
--- a/files/zh-cn/web/svg/attribute/image-rendering/index.md
+++ b/files/zh-cn/web/svg/attribute/image-rendering/index.md
@@ -1,40 +1,59 @@
---
title: image-rendering
slug: Web/SVG/Attribute/image-rendering
+l10n:
+ sourceCommit: cd840e78b6027a391fe1f11b745564cf3ebfb8e7
---
{{SVGRef}}
-`image-rendering` 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。
+**`image-rendering`** 属性向浏览器提供了一个在图片处理时应如何权衡速度和质量的提示。
-作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考 {{ cssxref("image-rendering","CSS image-rendering") }} 获取更多的信息
+即使原始数据和/或目标设备是索引颜色的，也总是在真彩色（例如，24 位）颜色空间中进行重新采样。
-## 使用语境
+> **备注：** 作为一个表现属性，`image-rendering` 可以用作 CSS 属性。请参考 {{cssxref("image-rendering", "CSS image-rendering")}}，以获取更多的信息。
-| 类别 | Presentation attribute |
-| -------- | ------------------------------------------------------- |
-| 值 | **auto** \| optimizeSpeed \| optimizeQuality \| inherit |
-| 动画效果 | Yes |
+你可以和下面的 SVG 元素一起使用该属性：
-- auto
- - : 表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。
-- optimizeSpeed
- - : 表示用户代理应该更注重速度。
-- optimizeQuality
- - : 表示用户代理应该更注重质量
+- {{SVGElement("image")}}
-## 示例
+## 使用说明
-## 元素
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">值</th>
+ <td>
+ <code>auto</code> | <code>optimizeSpeed</code> |
+ <code>optimizeQuality</code>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">默认值</th>
+ <td><code>auto</code></td>
+ </tr>
+ <tr>
+ <th scope="row">动画性</th>
+ <td>是</td>
+ </tr>
+ </tbody>
+</table>
-下面的元素可以能够使用 `image-rendering` 属性
-
-- {{ SVGElement("image") }}
+- `auto`
+ - : 表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。
+- `optimizeSpeed`
+ - : 表示用户代理应该更注重速度。
+- `optimizeQuality`
+ - : 表示用户代理应该更注重质量。
## 规范
{{Specifications}}
-## 参考
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
-- {{ cssxref("image-rendering","CSS image-rendering") }}
+- {{cssxref("image-rendering", "CSS image-rendering")}}
diff --git a/files/zh-cn/web/svg/attribute/index.md b/files/zh-cn/web/svg/attribute/index.md
index ea26d88f930e1c..5d07d84dccb7dd 100644
--- a/files/zh-cn/web/svg/attribute/index.md
+++ b/files/zh-cn/web/svg/attribute/index.md
@@ -74,7 +74,6 @@ SVG 元素可以通过属性来修改，这些属性指定有关如何处理或
- {{SVGAttr("edgeMode")}}
- {{SVGAttr("elevation")}}
-- {{SVGAttr("enable-background")}}
- {{SVGAttr("end")}}
- {{SVGAttr("exponent")}}
@@ -388,7 +387,6 @@ SVG 元素可以通过属性来修改，这些属性指定有关如何处理或
- {{SVGAttr("direction")}}
- {{SVGAttr("display")}}
- {{SVGAttr("dominant-baseline")}}
-- {{SVGAttr("enable-background")}}
- {{SVGAttr("fill")}}
- {{SVGAttr("fill-opacity")}}
- {{SVGAttr("fill-rule")}}
diff --git a/files/zh-cn/web/svg/element/feflood/index.md b/files/zh-cn/web/svg/element/feflood/index.md
index 9fe6e91b2c89fd..73682f23e5182c 100644
--- a/files/zh-cn/web/svg/element/feflood/index.md
+++ b/files/zh-cn/web/svg/element/feflood/index.md
@@ -1,56 +1,80 @@
---
-title: feFlood
+title: <feFlood>
slug: Web/SVG/Element/feFlood
+l10n:
+ sourceCommit: 3a1ef2abc8233835f0b0cc73afaf36e44edaf4a1
---
{{SVGRef}}
-该滤镜用{{ SVGAttr("flood-color") }}元素定义的颜色和{{ SVGAttr("flood-opacity") }}元素定义的不透明度填充了滤镜子区域。
+**`<feFlood>`** SVG 滤镜原语使用由 {{SVGAttr("flood-color")}} 和 {{SVGAttr("flood-opacity")}} 定义的颜色和透明度填充滤镜子区域。
-## 用法
+## 使用上下文
{{svginfo}}
+## 属性
+
+- {{SVGAttr("flood-color")}}
+- {{SVGAttr("flood-opacity")}}
+
+## DOM 接口
+
+该元素实现了 {{domxref("SVGFEFloodElement")}} 接口。
+
## 示例
-## 属性
+### HTML
-### 全局属性
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <defs>
+ <filter id="floodFilter" filterUnits="userSpaceOnUse">
+ <feFlood
+ x="50"
+ y="50"
+ width="100"
+ height="100"
+ flood-color="green"
+ flood-opacity="0.5" />
+ </filter>
+ </defs>
-- [核心属性](/zh-CN/SVG/Attribute#Core) »
-- [外观属性](/zh-CN/SVG/Attribute#Presentation) »
-- [滤镜属性](/zh-CN/SVG/Attribute#Filter) »
-- {{ SVGAttr("class") }}
-- {{ SVGAttr("style") }}
+ <use style="filter: url(#floodFilter);" />
+</svg>
+```
-### 专有属性
+### 结果
-- {{ SVGAttr("flood-color") }}
-- {{ SVGAttr("flood-opacity") }}
+{{EmbedLiveSample("示例", 200, 200)}}
-## DOM 接口
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
-该元素实现了 `SVGFEFloodElement` 接口。
+{{Compat}}
## 参见
-- {{ SVGElement("filter") }}
-- {{ SVGElement("animate") }}
-- {{ SVGElement("animateColor") }}
-- {{ SVGElement("set") }}
-- {{ SVGElement("feBlend") }}
-- {{ SVGElement("feColorMatrix") }}
-- {{ SVGElement("feComponentTransfer") }}
-- {{ SVGElement("feComposite") }}
-- {{ SVGElement("feConvolveMatrix") }}
-- {{ SVGElement("feDiffuseLighting") }}
-- {{ SVGElement("feDisplacementMap") }}
-- {{ SVGElement("feGaussianBlur") }}
-- {{ SVGElement("feImage") }}
-- {{ SVGElement("feMerge") }}
-- {{ SVGElement("feMorphology") }}
-- {{ SVGElement("feOffset") }}
-- {{ SVGElement("feSpecularLighting") }}
-- {{ SVGElement("feTile") }}
-- {{ SVGElement("feTurbulence") }}
-- [SVG 教程：滤镜效果](/zh-CN/SVG/Tutorial/Filter_effects)
+- [SVG 滤镜原语属性](/zh-CN/docs/Web/SVG/Attribute#滤镜属性)
+- {{SVGElement("filter")}}
+- {{SVGElement("animate")}}
+- {{SVGElement("set")}}
+- {{SVGElement("feBlend")}}
+- {{SVGElement("feColorMatrix")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feComposite")}}
+- {{SVGElement("feConvolveMatrix")}}
+- {{SVGElement("feDiffuseLighting")}}
+- {{SVGElement("feDisplacementMap")}}
+- {{SVGElement("feGaussianBlur")}}
+- {{SVGElement("feImage")}}
+- {{SVGElement("feMerge")}}
+- {{SVGElement("feMorphology")}}
+- {{SVGElement("feOffset")}}
+- {{SVGElement("feSpecularLighting")}}
+- {{SVGElement("feTile")}}
+- {{SVGElement("feTurbulence")}}
+- [SVG 教程：滤镜效果](/zh-CN/docs/Web/SVG/Tutorial/Filter_effects)
diff --git a/files/zh-cn/web/svg/element/fefunca/index.md b/files/zh-cn/web/svg/element/fefunca/index.md
index 9e70f5d065eb5b..db3cfe75d860af 100644
--- a/files/zh-cn/web/svg/element/fefunca/index.md
+++ b/files/zh-cn/web/svg/element/fefunca/index.md
@@ -1,27 +1,18 @@
---
-title: feFuncA
+title: <feFuncA>
slug: Web/SVG/Element/feFuncA
+l10n:
+ sourceCommit: 3a1ef2abc8233835f0b0cc73afaf36e44edaf4a1
---
{{SVGRef}}
-[SVG](/zh-CN/docs/Web/SVG) 滤镜 **`<feFuncA>`** 为它的父元素 {{SVGElement("feComponentTransfer")}} 的输入图形的透明度（alpha）组件定义了变换函数。
+**`<feFuncA>`** [SVG](/zh-CN/docs/Web/SVG) 滤镜原语为其 {{SVGElement("feComponentTransfer")}} 父元素输入图形的 alpha 分量定义了传递函数。
-## 用法
+## 使用上下文
{{svginfo}}
-## 属性
-
-### 全局属性
-
-- [核心属性](/zh-CN/docs/Web/SVG/Attribute#Core_attributes)
-- [Transfer function attributes](/zh-CN/docs/Web/SVG/Attribute#Transfer_function_attributes)
-
-### 专有属性
-
-_无。_
-
## DOM 接口
该元素实现了 {{domxref("SVGFEFuncAElement")}} 接口。
@@ -36,11 +27,14 @@ _无。_
## 参见
-- {{ SVGElement("filter") }}
-- {{ SVGElement("animate") }}
-- {{ SVGElement("set") }}
-- {{ SVGElement("feComponentTransfer")}}
-- {{ SVGElement("feFuncR") }}
-- {{ SVGElement("feFuncB") }}
-- {{ SVGElement("feFuncG") }}
-- [SVG 教程：滤镜效果](/zh-CN/SVG/Tutorial/Filter_effects)
+- [SVG 滤镜原语属性](/zh-CN/docs/Web/SVG/Attribute#滤镜属性)
+- {{SVGAttr('flood-color')}} 属性
+- {{SVGAttr('flood-opacity')}} 属性
+- {{SVGElement("filter")}}
+- {{SVGElement("animate")}}
+- {{SVGElement("set")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feFuncR")}}
+- {{SVGElement("feFuncB")}}
+- {{SVGElement("feFuncG")}}
+- [SVG 教程：滤镜效果](/zh-CN/docs/Web/SVG/Tutorial/Filter_effects)
diff --git a/files/zh-cn/web/svg/element/fefuncb/index.md b/files/zh-cn/web/svg/element/fefuncb/index.md
index 6b923e2716b02a..6ec1def6c55953 100644
--- a/files/zh-cn/web/svg/element/fefuncb/index.md
+++ b/files/zh-cn/web/svg/element/fefuncb/index.md
@@ -1,39 +1,40 @@
---
-title: feFuncB
+title: <feFuncB>
slug: Web/SVG/Element/feFuncB
+l10n:
+ sourceCommit: 3a1ef2abc8233835f0b0cc73afaf36e44edaf4a1
---
{{SVGRef}}
-该滤镜为它的父{{SVGElement("feComponentTransfer")}}元素的输入图形的蓝色成分定义了变换函数。
+**`<feFuncB>`** [SVG](/zh-CN/docs/Web/SVG) 滤镜原语为其 {{SVGElement("feComponentTransfer")}} 父元素输入图形的蓝色分量定义了传递函数。
-## 用法
+## 使用上下文
{{svginfo}}
-## 示例
-
-## 属性
-
-### 全局属性
+## DOM 接口
-- [核心属性](/zh-CN/SVG/Attribute#Core) »
+该元素实现了 {{domxref("SVGFEFuncBElement")}} 接口。
-### 专有属性
+## 规范
-- [变换函数属性](/zh-CN/SVG/Attribute#Transfer_function_attributes) »
+{{Specifications}}
-## DOM 接口
+## 浏览器兼容性
-该元素实现了 [`SVGFEFuncBElement`](/zh-CN/DOM/SVGFEFuncBElement) 接口。
+{{Compat}}
## 参见
-- {{ SVGElement("filter") }}
-- {{ SVGElement("animate") }}
-- {{ SVGElement("set") }}
-- {{ SVGElement("feComponentTransfer") }}
-- {{ SVGElement("feFuncA") }}
-- {{ SVGElement("feFuncR") }}
-- {{ SVGElement("feFuncG") }}
-- [SVG 教程：滤镜效果](/zh-CN/SVG/Tutorial/Filter_effects)
+- [SVG 滤镜原语属性](/zh-CN/docs/Web/SVG/Attribute#滤镜属性)
+- {{SVGAttr('flood-color')}} 属性
+- {{SVGAttr('flood-opacity')}} 属性
+- {{SVGElement("filter")}}
+- {{SVGElement("animate")}}
+- {{SVGElement("set")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncR")}}
+- {{SVGElement("feFuncG")}}
+- [SVG 教程：滤镜效果](/zh-CN/docs/Web/SVG/Tutorial/Filter_effects)
diff --git a/files/zh-cn/web/svg/element/fefuncg/index.md b/files/zh-cn/web/svg/element/fefuncg/index.md
index 46035dbbfdd22b..d25d18395805d9 100644
--- a/files/zh-cn/web/svg/element/fefuncg/index.md
+++ b/files/zh-cn/web/svg/element/fefuncg/index.md
@@ -1,39 +1,40 @@
---
-title: feFuncG
+title: <feFuncG>
slug: Web/SVG/Element/feFuncG
+l10n:
+ sourceCommit: 3a1ef2abc8233835f0b0cc73afaf36e44edaf4a1
---
{{SVGRef}}
-该滤镜为它的父{{SVGElement("feComponentTransfer")}}元素的输入图形的绿色成分定义了变换函数。
+**`<feFuncG>`** [SVG](/zh-CN/docs/Web/SVG) 滤镜原语为其 {{SVGElement("feComponentTransfer")}} 父元素输入图形的绿色分量定义了传递函数。
-## 用法
+## 使用上下文
{{svginfo}}
-## 示例
-
-## 属性
-
-### 全局属性
+## DOM 接口
-- [核心属性](/zh-CN/SVG/Attribute#Core) »
+该元素实现了 {{domxref("SVGFEFuncBElement")}} 接口。
-### 专有属性
+## 规范
-- [变换函数属性](/zh-CN/SVG/Attribute#Transfer_function_attributes) »
+{{Specifications}}
-## DOM 接口
+## 浏览器兼容性
-该元素实现了 [`SVGFEFuncGElement`](/zh-CN/DOM/SVGFEFuncGElement) 接口。
+{{Compat}}
## 参见
-- {{ SVGElement("filter") }}
-- {{ SVGElement("animate") }}
-- {{ SVGElement("set") }}
-- {{ SVGElement("feComponentTransfer") }}
-- {{ SVGElement("feFuncA") }}
-- {{ SVGElement("feFuncR") }}
-- {{ SVGElement("feFuncB") }}
-- [SVG 教程：滤镜效果](/zh-CN/SVG/Tutorial/Filter_effects)
+- [SVG 滤镜原语属性](/zh-CN/docs/Web/SVG/Attribute#滤镜属性)
+- {{SVGAttr('flood-color')}} 属性
+- {{SVGAttr('flood-opacity')}} 属性
+- {{SVGElement("filter")}}
+- {{SVGElement("animate")}}
+- {{SVGElement("set")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncR")}}
+- {{SVGElement("feFuncB")}}
+- [SVG 教程：滤镜效果](/zh-CN/docs/Web/SVG/Tutorial/Filter_effects)
diff --git a/files/zh-cn/web/svg/element/fefuncr/index.md b/files/zh-cn/web/svg/element/fefuncr/index.md
index c4f796902bea83..c55816081b87ad 100644
--- a/files/zh-cn/web/svg/element/fefuncr/index.md
+++ b/files/zh-cn/web/svg/element/fefuncr/index.md
@@ -1,39 +1,37 @@
---
-title: feFuncR
+title: <feFuncR>
slug: Web/SVG/Element/feFuncR
+l10n:
+ sourceCommit: 3a1ef2abc8233835f0b0cc73afaf36e44edaf4a1
---
{{SVGRef}}
-该滤镜为它的父{{SVGElement("feComponentTransfer")}}元素的输入图形的红色成分定义了变换函数。
+**`<feFuncR>`** [SVG](/zh-CN/docs/Web/SVG) 滤镜原语为其 {{SVGElement("feComponentTransfer")}} 父元素输入图形的红色分量定义了传递函数。
-## 用法
+## 使用上下文
{{svginfo}}
-## 示例
-
-## 属性
-
-### 全局属性
+## DOM 接口
-- [核心属性](/zh-CN/SVG/Attribute#Core) »
+该元素实现了 {{domxref("SVGFEFuncRElement")}} 接口。
-### 专有属性
+## 规范
-- [变换函数属性](/zh-CN/SVG/Attribute#Transfer_function_attributes) »
+{{Specifications}}
-## DOM 接口
+## 浏览器兼容性
-该元素实现了 `SVGFEFuncRElement` 接口。
+{{Compat}}
## 参见
-- {{ SVGElement("filter") }}
-- {{ SVGElement("animate") }}
-- {{ SVGElement("set") }}
-- {{ SVGElement("feComponentTransfer") }}
-- {{ SVGElement("feFuncA") }}
-- {{ SVGElement("feFuncB") }}
-- {{ SVGElement("feFuncG") }}
-- [SVG 教程：滤镜效果](/zh-CN/SVG/Tutorial/Filter_effects)
+- {{SVGElement("filter")}}
+- {{SVGElement("animate")}}
+- {{SVGElement("set")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncB")}}
+- {{SVGElement("feFuncG")}}
+- [SVG 教程：滤镜效果](/zh-CN/docs/Web/SVG/Tutorial/Filter_effects)
diff --git a/files/zh-cn/web/svg/element/font-face-src/index.md b/files/zh-cn/web/svg/element/font-face-src/index.md
index 65c1ab82caa4c2..5caafaa004af0f 100644
--- a/files/zh-cn/web/svg/element/font-face-src/index.md
+++ b/files/zh-cn/web/svg/element/font-face-src/index.md
@@ -7,7 +7,7 @@ l10n:
{{SVGRef}}{{deprecated_header}}
-**`<font-face-src>`** [SVG](/zh-CN/docs/Web/SVG) 元素对应于 CSS {{cssxref("@font-face/src", "src")}} 规则中的 {{cssxref("@font-face")}} 描述符。它是 {{SVGElement("font-face-name")}} 和 {{{SVGElement("font-face-uri")}} 的容器，前者指向本地安装的字体副本，后者则使用远程定义的字体。
+**`<font-face-src>`** [SVG](/zh-CN/docs/Web/SVG) 元素对应于 CSS {{cssxref("@font-face/src", "src")}} 规则中的 {{cssxref("@font-face")}} 描述符。它是 {{SVGElement("font-face-name")}} 和 {{SVGElement("font-face-uri")}} 的容器，前者指向本地安装的字体副本，后者则使用远程定义的字体。
## 使用上下文
diff --git a/files/zh-cn/web/svg/tutorial/paths/index.md b/files/zh-cn/web/svg/tutorial/paths/index.md
index 13970e882422d6..923b361c3f42ca 100644
--- a/files/zh-cn/web/svg/tutorial/paths/index.md
+++ b/files/zh-cn/web/svg/tutorial/paths/index.md
@@ -15,7 +15,7 @@ slug: Web/SVG/Tutorial/Paths
每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的 x 和 y 轴坐标。比如移动到 (10,10) 这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用**大写字母**，表示采用绝对定位。另一种是用**小写字母**，表示采用相对定位（例如：_从上一个点开始，向上移动 10px，向左移动 7px_）。
-`因为属性 d`采用的是用户坐标系统，所以**不需标明单位**。在后面的教程中，我们会学到如何让变换路径，以满足更多需求。
+因为属性 `d` 采用的是用户坐标系统，所以**不需标明单位**。在后面的教程中，我们会学到如何让变换路径，以满足更多需求。
## 直线命令
@@ -34,7 +34,7 @@ m dx dy
<path d="M10 10"/>
- <!-- Points -->
+ <!-- 点 -->
<circle cx="10" cy="10" r="2" fill="red"/>
</svg>
@@ -59,9 +59,11 @@ V y
v dy
```
-现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果用`<rect/>`元素可以更简单的实现），矩形是由水平线和垂直线组成的，所以这个例子可以很好地展现前面讲的画线的方法。
+现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果用`<rect/>`元素可以更简单的实现），矩形是由水平线和垂直线组成的，所以这个例子可以很好地展现前面讲的画线的方法。
-```plain
+
+
+```xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
@@ -115,7 +117,7 @@ c dx1 dy1, dx2 dy2, dx dy
这里的最后一个坐标 (x,y) 表示的是曲线的终点，另外两个坐标是控制点，(x1,y1) 是起点的控制点，(x2,y2) 是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。（文字描述不好，维基百科上有图示，更直观。）
-
+
```xml
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
@@ -145,7 +147,7 @@ s dx2 dy2, dx dy
S 命令可以用来创建与前面一样的贝塞尔曲线，但是，如果 S 命令跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果 S 命令单独使用，前面没有 C 或 S 命令，那当前点将作为第一个控制点。下面是 S 命令的语法示例，图中左侧红色标记的点对应的控制点即为蓝色标记点。
-
+
```xml
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
@@ -161,7 +163,7 @@ Q x1 y1, x y
q dx1 dy1, dx dy
```
-
+
```xml
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
@@ -179,7 +181,7 @@ t dx dy
和之前一样，快捷命令 T 会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T 命令前面必须是一个 Q 命令，或者是另一个 T 命令，才能达到这种效果。如果 T 单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
-
+
```xml
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
@@ -217,7 +219,7 @@ t dx dy
对于上图没有旋转的椭圆，只有 2 种弧形可以选择，不是 4 种，因为两点连线（也就是对角线）正好穿过了椭圆的中心。像下面这张图，就是普通的情况，可以画出两个椭圆，四种弧。
-
+
```xml
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
diff --git a/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md b/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md
index 4c9d09e9128739..faa5c062ea3eca 100644
--- a/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md
+++ b/files/zh-cn/web/xml/parsing_and_serializing_xml/index.md
@@ -25,57 +25,51 @@ slug: Web/XML/Parsing_and_serializing_XML
下面这个例子使用 {{domxref("DOMParser")}} 把字符串中的 XML 片段转换为 DOM 树：
```js
-const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
+const xmlStr = '<q id="a"><span id="b">你好！</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// 打印根元素的名称或错误信息
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
- console.log("error while parsing");
+ console.log("解析时遇到错误");
} else {
console.log(doc.documentElement.nodeName);
}
```
-### 把可寻址的 URL 资源解析成 DOM 树
+### 把 URL 可寻址的资源解析成 DOM 树
-#### 使用 XMLHttpRequest
+#### 使用 fetch
-下列示例代码读取一个可寻址的 URL 资源文件，并将其解析成 DOM 树：
+下列示例代码读取一个 URL 可寻址的 XML 文件，并将其解析成 DOM 树：
```js
-const xhr = new XMLHttpRequest();
-
-xhr.onload = () => {
- dump(xhr.responseXML.documentElement.nodeName);
-};
-
-xhr.onerror = () => {
- dump("Error while getting XML.");
-};
-
-xhr.open("GET", "example.xml");
-xhr.responseType = "document";
-xhr.send();
+fetch("example.xml")
+ .then((response) => response.text())
+ .then((text) => {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(text, "text/xml");
+ console.log(doc.documentElement.nodeName);
+ });
```
-在 `xhr` 对象 {{domxref("XMLHttpRequest.responseXML", "responseXML")}} 字段中返回的值是一个通过解析 XML 构造的 {{domxref("Document")}}。
+这些代码将资源以文本字符串的形式获取，然后使用 {{domxref("DOMParser.parseFromString()")}} 构建 {{domxref("XMLDocument")}}。
-如果这个文档是 {{Glossary("HTML")}}，上面实例代码将会返回一个 {{domxref("Document")}}。如果它是 XML，那获取的结果对象实际上是一个 {{domxref("XMLDocument")}}。这两种类型实质上是一样的，不同点大部分是历史遗留的，尽管区分它们也会有一些实际好处。
+如果文档是 {{Glossary("HTML")}}，上面的代码将返回一个 {{domxref("Document")}}。如果文档是 XML，那得到的对象实际上是一个 `XMLDocument`。这两种类型实质上是一样的，不同点大部分是历史遗留的，尽管区分它们也会有一些实际好处。
> **备注：** 事实上，{{domxref("HTMLDocument")}} 也是一个接口，但是它不必是一个独立的类型。在一些浏览器上它是，但在另外一些浏览器上它仅仅是 `Document` 接口的别名。
-## 序列化一个 XML 文档
+## 序列化 XML 文档
给定一个 {{domxref("Document")}}，你可以使用 {{domxref("XMLSerializer.serializeToString()")}} 方法把文档的 DOM 树序列化为 XML。
-使用下面的方法来序列化在先前章节中创建的 XML 文档内容。
+使用下面的方法来序列化在前面的部分中创建的 XML 文档内容。
### 把 DOM 树序列化成字符串
-首先，使用[如何创建一个 DOM 树](/zh-CN/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree)中的方法构建一个 DOM 树。也可以使用从 {{ domxref("XMLHttpRequest") }} 中获得的 DOM 树。
+首先，使用[使用文档对象模型](/zh-CN/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model)中的方法构建一个 DOM 树。也可以使用从 {{domxref("fetch()")}} 中获得的 DOM 树。
-为了序列化 DOM 树的 `doc` 为 XML 文档，调用 {{domxref("XMLSerializer.serializeToString()")}}：
+为了将 DOM 树 `doc` 序列化为 XML 文本，调用 {{domxref("XMLSerializer.serializeToString()")}}：
```js
const serializer = new XMLSerializer();
@@ -90,7 +84,7 @@ const xmlStr = serializer.serializeToString(doc);
const docInnerHtml = document.documentElement.innerHTML;
```
-因此，`docInnerHtmlL` 是一个包含 HTML 内容的文档的字符串，换句话来说，也是 {{HTMLElement("body")}} 元素的内容。
+因此，`docInnerHtml` 是一个包含 HTML 内容的文档的字符串，换句话来说，也是 {{HTMLElement("body")}} 元素的内容。
你可以使用以下代码得到 `<body>` *和*它的后代对应的 HTML：
@@ -101,5 +95,6 @@ const docOuterHtml = document.documentElement.outerHTML;
## 参见
- [XPath](/zh-CN/docs/Web/XPath)
+- {{domxref("fetch()")}}
- {{domxref("XMLHttpRequest")}}
- {{domxref("Document")}}、{{domxref("XMLDocument")}} 和 {{domxref("HTMLDocument")}}
diff --git a/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.md b/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.md
index b11a23f78899e8..8600a7a570a06a 100644
--- a/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.md
+++ b/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.md
@@ -3,6 +3,8 @@ title: Introduction to using XPath in JavaScript
slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript
---
+{{XsltSidebar}}
+
该篇文档描述了如何在扩展和网站内部通过 JavaScript 调用 [XPath](/zh-CN/XPath) 接口。Mozilla 实现了相当多的 [DOM 3 XPath](http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html)，意味着 Xpath 表达式已经可以在 HTML 和 XML 文档中使用。
使用 XPath 的主要接口是 [document](/zh-CN/DOM/document) 对象的 [evaluate](/zh-CN/DOM/document.evaluate) 方法。
diff --git a/files/zh-cn/webassembly/javascript_interface/instance/index.md b/files/zh-cn/webassembly/javascript_interface/instance/index.md
index a3bc6def805cb2..7f403cede686f0 100644
--- a/files/zh-cn/webassembly/javascript_interface/instance/index.md
+++ b/files/zh-cn/webassembly/javascript_interface/instance/index.md
@@ -1,39 +1,67 @@
---
title: WebAssembly.Instance
slug: WebAssembly/JavaScript_interface/Instance
+l10n:
+ sourceCommit: d23f8c5c52bdfb6151476a2574e72d323d0d30f4
---
-{{WebAssemblySidebar}} {{SeeCompatTable}}
+{{WebAssemblySidebar}}
-**`WebAssembly.Instance`** 对象本身是有状态的，是 [WebAssembly.Module](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module) 的一个可执行实例。`实例`包含所有的 [WebAssembly 导出函数](/zh-CN/docs/WebAssembly/Exported_functions)，允许从 JavaScript 调用 WebAssembly 代码。
-
-`WebAssembly.Instance()` 构造函数以同步方式实例化一个{{jsxref("WebAssembly.Module")}} 对象。然而，通常获取实例的方法是通过异步函数{{jsxref("WebAssembly.instantiate()")}} .
+**`WebAssembly.Instance`** 对象本身是有状态的，是 [`WebAssembly.Module`](/zh-CN/docs/WebAssembly/JavaScript_interface/Module) 的一个可执行实例。`Instance` 对象包含所有的 [WebAssembly 导出函数](/zh-CN/docs/WebAssembly/Exported_functions)，允许从 JavaScript 调用 WebAssembly 代码。
## 构造函数
-> **警告：** 由于大型模块的实例化代价极高，开发人员应只在必须同步实例化的时候，才使用`Instance()`；绝大多数情况应该使用异步方法{{jsxref("WebAssembly.instantiate()")}} .
+- [`WebAssembly.Instance()`](/zh-CN/docs/WebAssembly/JavaScript_interface/Instance/Instance)
+ - : 创建一个新的 `Instance` 对象。
-```plain
-var myInstance = new WebAssembly.Instance(module, importObject);
-```
+## 实例属性
+
+- [`exports`](/zh-CN/docs/WebAssembly/JavaScript_interface/Instance/exports)
+ - : 返回一个包含此 WebAssembly 模块实例所导出的全部成员对象，以便 JavaScript 访问和使用这些成员，这个对象是只读的。
+
+## 示例
-### 参数
+### 同步实例化 WebAssembly 模块
-- _module_
- - : 要被实例化的 [`WebAssembly.Module`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module) 对象。
-- _importObject_ {{optional_inline}}
- - : 一个包含值的对象，导入到新创建的 `实例`, 比如函数或 [`WebAssembly.Memory`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory) 对象。There must be one matching property for each declared import of `module` 否则抛出 [WebAssembly.LinkError](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError) 异常。
+`WebAssembly.Instance()` 构造函数以同步方式实例化一个 [`WebAssembly.Module`](/zh-CN/docs/WebAssembly/JavaScript_interface/Module) 对象，例如：
-## 实例化
+```js
+const importObject = {
+ imports: {
+ imported_func(arg) {
+ console.log(arg);
+ },
+ },
+};
-所有的 `Instance` 实例继承自`Instance()` [属性对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype)— 修改它会影响所有的`Instance` 实例。
+fetch("simple.wasm")
+ .then((response) => response.arrayBuffer())
+ .then((bytes) => {
+ const mod = new WebAssembly.Module(bytes);
+ const instance = new WebAssembly.Instance(mod, importObject);
+ instance.exports.exported_func();
+ });
+```
+
+获得一个 `Instance` 的首选方式是异步的，例如像这样使用 [`WebAssembly.instantiateStreaming()`](/zh-CN/docs/WebAssembly/JavaScript_interface/instantiateStreaming_static) 函数：
-### 实例属性
+```js
+const importObject = {
+ imports: {
+ imported_func(arg) {
+ console.log(arg);
+ },
+ },
+};
+
+WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
+ (obj) => obj.instance.exports.exported_func(),
+);
+```
-- {{jsxref("WebAssembly/Instance/exports", "Instance.prototype.exports")}}
- - : 返回一个包含此 WebAssembly 模块实例所导出的全部成员的 JS 对象，以便 JavaScript 访问和使用这些成员，这个对象是只读的。
+示例也说明如何使用 `exports` 属性来访问导出的函数。
-## 规格
+## 规范
{{Specifications}}
@@ -41,8 +69,8 @@ var myInstance = new WebAssembly.Instance(module, importObject);
{{Compat}}
-## 参考
+## 参见
-- [WebAssembly](/zh-CN/docs/WebAssembly) overview page
-- [WebAssembly concepts](/zh-CN/docs/WebAssembly/Concepts)
-- [Using the WebAssembly JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API)
+- [WebAssembly](/zh-CN/docs/WebAssembly) 概览页
+- [WebAssembly 概念](/zh-CN/docs/WebAssembly/Concepts)
+- [使用 WebAssembly JavaScript API](/zh-CN/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt
index 151e3983b96042..0f52fe5a76a24a 100644
--- a/files/zh-tw/_redirects.txt
+++ b/files/zh-tw/_redirects.txt
@@ -350,7 +350,6 @@
/zh-TW/docs/SVG/Tutorial/渐变 /zh-TW/docs/Web/SVG/Tutorial/Gradients
/zh-TW/docs/SVG/教學 /zh-TW/docs/Web/SVG/Tutorial
/zh-TW/docs/Security/MixedContent /zh-TW/docs/Web/Security/Mixed_content
-/zh-TW/docs/Security/MixedContent/How_to_fix_website_with_mixed_content /zh-TW/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
/zh-TW/docs/Security/弱簽章演算法 /zh-TW/docs/Web/Security/Weak_Signature_Algorithm
/zh-TW/docs/Security/缺少安全性的密碼 /zh-TW/docs/Web/Security/Insecure_passwords
/zh-TW/docs/Tools https://firefox-source-docs.mozilla.org/devtools-user/index.html
diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json
index b5c79e0df471de..b16c911d881831 100644
--- a/files/zh-tw/_wikihistory.json
+++ b/files/zh-tw/_wikihistory.json
@@ -2675,10 +2675,6 @@
"modified": "2020-10-15T22:01:32.599Z",
"contributors": ["yutzuch"]
},
- "Web/Demos": {
- "modified": "2019-03-23T22:08:13.863Z",
- "contributors": ["h223449961", "tigercosmos"]
- },
"Web/Events": {
"modified": "2019-11-28T04:54:28.795Z",
"contributors": [
@@ -4086,10 +4082,6 @@
"modified": "2019-03-23T23:04:08.690Z",
"contributors": ["jackblackevo", "iigmir", "a780201", "wildsky", "Asheesh"]
},
- "Web/Security/Mixed_content/How_to_fix_website_with_mixed_content": {
- "modified": "2019-03-23T23:04:13.940Z",
- "contributors": ["jackblackevo", "iigmir", "wildsky"]
- },
"Web/Security/Same-origin_policy": {
"modified": "2020-09-01T23:06:58.364Z",
"contributors": [
diff --git a/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
index 7f3a1fa8858efd..158dade01ca0e4 100644
--- a/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
+++ b/files/zh-tw/learn/common_questions/web_mechanics/what_is_a_web_server/index.md
@@ -3,6 +3,8 @@ title: 何謂網路伺服器？
slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server
---
+{{QuicklinksWithSubPages("Learn/Common_questions")}}
+
本文章將講解網路伺服器是什麼、如何運作、還有他們的重要性。
<table class="learn-box standard-table">
diff --git a/files/zh-tw/learn/performance/multimedia/index.md b/files/zh-tw/learn/performance/multimedia/index.md
index 529f3ba9f2e0ef..dccfb130721b6a 100644
--- a/files/zh-tw/learn/performance/multimedia/index.md
+++ b/files/zh-tw/learn/performance/multimedia/index.md
@@ -3,6 +3,8 @@ title: 多媒體：圖像跟影片
slug: Learn/Performance/Multimedia
---
+{{LearnSidebar}}
+
媒體，換句話說就是圖像跟影片，平均占了網站超過 70%的下載流量。以下載的效能來考慮的話，減少媒體數量和檔案大小是一個簡單可以實現的目標。 這篇文章聚焦在優化圖像跟影片來改善網站的效能。
> **備註：** 這是一篇進階的在 web 上優化多媒體的介紹，包含基本的原則還有技巧，想了更多的話，可以看 <https://images.guide>。
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md
index 4f7db1e7fd4560..d4abd9aeaf4973 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component/index.md
@@ -189,7 +189,7 @@ export class ItemComponent {
`editable` 屬性有助於切換模板，讓使用者可以編輯其項目。HTML 中的 `editable` 屬性與 `*ngIf` 語句中的屬性相同， `*ngIf="editable"`。當你在模板使用此屬性時，你也必須在 class 中宣告它。
-`@Input()` ， `@Output()` 和 `EventEmitter` 促進兩個元件中的溝通，一個 `@Output()` 服務元件做為資料傳進的入口，然後一個 `@Output()` 是將元件資料傳到外層。`@Output()` 必須是 `EventEmitter` 的類型，資料可以透過事件分享至其他組件。
+`@Input()`、`@Output()` 和 `EventEmitter` 促進兩個元件中的溝通，一個 `@Input()` 服務元件做為資料傳進的入口，然後一個 `@Output()` 是將元件資料傳到外層。`@Output()` 必須是 `EventEmitter` 的類型，資料可以透過事件分享至其他組件。
使用 `@Input()`指定外部元件要傳進之屬性的值，將 `@Output()` 與 `EventEmitter` 結合使用可將該元件指定屬性的值傳出，使得另一個元件可以接收其資料。
diff --git a/files/zh-tw/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/zh-tw/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index 7c71b08a1748e2..ba54f14716b2ab 100644
--- a/files/zh-tw/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/zh-tw/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -3,6 +3,8 @@ title: Writing forward-compatible websites
slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
---
+{{LearnSidebar}}
+
這個頁面將解釋如何撰寫在新的瀏覽器版本發布時不會遭受毀損的網頁。
這對內部網路和其他非公共網站尤其重要，如果我們不能看到你的原始碼，我們將無法看到它是否已遭受毀損。底下所提到的原則可能無法全數做到，但盡可能遵守這些原則，對於你的網站在未來發展維護上有所幫助。
diff --git a/files/zh-tw/mdn/community/contributing/translated_content/index.md b/files/zh-tw/mdn/community/contributing/translated_content/index.md
index e7021733aa2901..2d52a4c20e1dd5 100644
--- a/files/zh-tw/mdn/community/contributing/translated_content/index.md
+++ b/files/zh-tw/mdn/community/contributing/translated_content/index.md
@@ -41,8 +41,8 @@ l10n:
### 韓文（`ko`）
-- 討論群組：[Discord（`#korean`）](/discord)、[Kakao Talk（`#MDN Korea`）](https://open.kakao.com/o/gdfG288c)
-- 目前的維護者：[hochan222](https://github.com/hochan222)、[yechoi42](https://github.com/yechoi42)、[cos18](https://github.com/cos18)、[pje1740](https://github.com/pje1740)、[wisedog](https://github.com/wisedog)、[swimjiy](https://github.com/swimjiy)、[jho2301](https://github.com/jho2301)、[sunhpark42](https://github.com/sunhpark42)、[1ilsang](https://github.com/1ilsang)
+- 討論群組：[Discord（`#korean`）](/discord)、[Google Groups (`yari-content-ko`)](https://groups.google.com/g/yari-content-ko)
+- 目前的維護者：[hochan222](https://github.com/hochan222)、[yechoi42](https://github.com/yechoi42)、[wisedog](https://github.com/wisedog)、[sunhpark42](https://github.com/sunhpark42)、[1ilsang](https://github.com/1ilsang)
### 俄文（`ru`）
diff --git a/files/zh-tw/web/api/battery_status_api/index.md b/files/zh-tw/web/api/battery_status_api/index.md
index fdef7a01070752..6abf97fd35d57f 100644
--- a/files/zh-tw/web/api/battery_status_api/index.md
+++ b/files/zh-tw/web/api/battery_status_api/index.md
@@ -3,6 +3,8 @@ title: Battery Status API
slug: Web/API/Battery_Status_API
---
+{{DefaultAPISidebar("Battery API")}}
+
**Battery Status API** 也就是所謂的 **Battery API**，將提供系統電池充電容量的資訊，並在電池容量變化時送出事件，以通知使用者。此 API 可調整 Apps 的資源耗用量，在電力偏低時縮減耗電量；或可在電力耗盡之前儲存檔案，避免資料遺失。
Battery Status API 是以 [`window.navigator.battery`](/zh-TW/docs/Web/API/window.navigator.battery) 屬性 (為 [`BatteryManager`](/zh-TW/docs/Web/API/BatteryManager) 物件) 而擴充了 [`window.navigator`](/zh-TW/docs/Web/API/window.navigator)，並新增數項可讓使用者接收的新事件，以隨時監控電池狀態。
diff --git a/files/zh-tw/web/api/channel_messaging_api/index.md b/files/zh-tw/web/api/channel_messaging_api/index.md
index 745d4b7479a867..dab9a2228431a9 100644
--- a/files/zh-tw/web/api/channel_messaging_api/index.md
+++ b/files/zh-tw/web/api/channel_messaging_api/index.md
@@ -3,6 +3,8 @@ title: Channel Messaging API
slug: Web/API/Channel_Messaging_API
---
+{{DefaultAPISidebar("Channel Messaging API")}}
+
Channel Messaging API 讓同屬一份文件不同瀏覽環境的兩份程式腳本 (如兩個 IFrame、或主頁面和 IFrame、文件和 {{domxref("SharedWorker")}}、或兩個 worker)，也能夠經由雙向 channel (通道) 兩端的 port (連接阜) 直接傳遞訊息互相溝通。
{{AvailableInWorkers}}
diff --git a/files/zh-tw/web/api/closeevent/index.md b/files/zh-tw/web/api/closeevent/index.md
index 025e8fab7544bc..f5d947f4c20239 100644
--- a/files/zh-tw/web/api/closeevent/index.md
+++ b/files/zh-tw/web/api/closeevent/index.md
@@ -3,6 +3,8 @@ title: CloseEvent
slug: Web/API/CloseEvent
---
+{{APIRef("Websockets API")}}
+
當 WebSocket 連線關閉時，客戶端會收到一個 `CloseEvent`，由 `WebSocket` 物件 `onclose` 屬性表示的監聽器接收。
## 屬性
diff --git a/files/zh-tw/web/api/document_object_model/examples/index.md b/files/zh-tw/web/api/document_object_model/examples/index.md
index 43c237233b4f50..fa48292b55147a 100644
--- a/files/zh-tw/web/api/document_object_model/examples/index.md
+++ b/files/zh-tw/web/api/document_object_model/examples/index.md
@@ -3,6 +3,8 @@ title: 使用 web 和 XML 開發來使用 DOM
slug: Web/API/Document_Object_Model/Examples
---
+{{DefaultAPISidebar("DOM")}}
+
本章介紹了使用 DOM 進行 Web 以及 XML 開發的一些長範例。只要可能，在例子就會使用通用的 JavaScript Web API 、技巧以及模式來操作文檔對象（the document object）。
## 範例一：高度和寬度
diff --git a/files/zh-tw/web/api/document_object_model/whitespace/index.md b/files/zh-tw/web/api/document_object_model/whitespace/index.md
index 9a7416e9e4d31a..945e9d782c34ca 100644
--- a/files/zh-tw/web/api/document_object_model/whitespace/index.md
+++ b/files/zh-tw/web/api/document_object_model/whitespace/index.md
@@ -3,6 +3,8 @@ title: DOM 中的空白字元
slug: Web/API/Document_Object_Model/Whitespace
---
+{{DefaultAPISidebar("DOM")}}
+
#### 問題說明
[DOM](zh_tw/DOM) 裡的空白字元會讓處理節點結構時增加不少麻煩。Mozilla 相關軟體中，原始文件裡所有空白字元都會在 DOM 中出現（不包括標籤內含的空白字元）。這樣的處理方式有其必要，一方面編輯器中可逕行排列文字、二方面 [CSS](zh_tw/CSS) 裡的 `white-space: pre` 也才能發揮作用。 如此一來就表示：
diff --git a/files/zh-tw/web/api/file_and_directory_entries_api/index.md b/files/zh-tw/web/api/file_and_directory_entries_api/index.md
index 6a55e6f4760108..9fd6c09d8cd55c 100644
--- a/files/zh-tw/web/api/file_and_directory_entries_api/index.md
+++ b/files/zh-tw/web/api/file_and_directory_entries_api/index.md
@@ -3,6 +3,8 @@ title: FileHandle API
slug: Web/API/File_and_Directory_Entries_API
---
+{{DefaultAPISidebar("File and Directory Entries API")}}
+
FileHandle API 可操作檔案，例如建立檔案、修改檔案內容 (不同於 [File](/zh-TW/docs/DOM/File) API)。而正在編輯中的部分，將使用回合制的鎖定機制，以避免發生競態 (Race) 問題。
## API
diff --git a/files/zh-tw/web/api/file_api/using_files_from_web_applications/index.md b/files/zh-tw/web/api/file_api/using_files_from_web_applications/index.md
index 392dee562b22d6..aa65648145f702 100644
--- a/files/zh-tw/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/zh-tw/web/api/file_api/using_files_from_web_applications/index.md
@@ -3,6 +3,8 @@ title: 在網頁應用程式中使用本地檔案
slug: Web/API/File_API/Using_files_from_web_applications
---
+{{DefaultAPISidebar("File API")}}
+
現在可以透過新增至 HTML5 DOM 的 File API 讓 web 內容要求使用者選取本地端的檔案後讀取被選取檔案中的內容。檔案的選取動作可以使用 HTML 的 [`input`](/zh-TW/DOM/HTMLInputElement) 元素，或是用拖曳檔案（drag and drop）的方式來完成。
如果你想要使用 DOM 檔案 API 的文件擴展或是其他 Chrome 程式碼，你可以參考[使用 DOM 檔案 API 在 FireFox 外觀代碼中](/zh-TW/Extensions/Using_the_DOM_File_API_in_chrome_code)。
diff --git a/files/zh-tw/web/api/geolocation_api/index.md b/files/zh-tw/web/api/geolocation_api/index.md
index 4eb97463de060a..07e2320f2e504a 100644
--- a/files/zh-tw/web/api/geolocation_api/index.md
+++ b/files/zh-tw/web/api/geolocation_api/index.md
@@ -3,6 +3,8 @@ title: 地理位置定位 (Geolocation)
slug: Web/API/Geolocation_API
---
+{{DefaultAPISidebar("Geolocation API")}}
+
Web Apps 若需要使用者的位置，可透過 **Geolocation API** 取得相關資訊。而基於隱私權的考量，這些 Web Apps 均必須取得使用者的許可之後，才能發佈位置資訊。
## 地理位置定位 (Geolocation) 物件
diff --git a/files/zh-tw/web/api/history_api/index.md b/files/zh-tw/web/api/history_api/index.md
index f76b27570071e5..179ad77a406065 100644
--- a/files/zh-tw/web/api/history_api/index.md
+++ b/files/zh-tw/web/api/history_api/index.md
@@ -3,6 +3,8 @@ title: 操控瀏覽器歷史紀錄
slug: Web/API/History_API
---
+{{DefaultAPISidebar("History API")}}
+
DOM {{ domxref("window") }} 物件透過 {{ domxref("window.history", "history") }} 物件，提供了進入瀏覽歷史的方式。他透過一些方便的屬性與方法，讓你可以在歷史紀錄中往上一步或往下一步移動，並且讓你——從 HTML5 開始——能操作歷史紀錄堆疊（history stack）的內容。
## 在歷史紀錄中移動
diff --git a/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.md b/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.md
index 15ca91a00bed7e..a5cc8587091298 100644
--- a/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.md
+++ b/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.md
@@ -3,6 +3,8 @@ title: "HTMLMediaElement: ratechange"
slug: Web/API/HTMLMediaElement/ratechange_event
---
+{{APIRef("HTMLMediaElement")}}
+
`ratechange` 事件將在播放速度改變時被觸發
## 基本資訊
diff --git a/files/zh-tw/web/api/indexeddb_api/index.md b/files/zh-tw/web/api/indexeddb_api/index.md
index 5615c7676eabec..8ff38e560bc205 100644
--- a/files/zh-tw/web/api/indexeddb_api/index.md
+++ b/files/zh-tw/web/api/indexeddb_api/index.md
@@ -3,7 +3,7 @@ title: IndexedDB
slug: Web/API/IndexedDB_API
---
-{{SeeCompatTable}}
+{{DefaultAPISidebar("IndexedDB")}}{{SeeCompatTable}}
IndexedDB 為用戶端的儲存用 API，可用於大量的結構化資料，並透過索引功能而高效率搜尋資料。[DOM Storage](/zh-TW/docs/DOM/Storage) 適合儲存較少量的資料；IndexedDB 則適合大量結構化資料的儲存方案。
diff --git a/files/zh-tw/web/api/indexeddb_api/using_indexeddb/index.md b/files/zh-tw/web/api/indexeddb_api/using_indexeddb/index.md
index b55786478488f4..646039eee57f3b 100644
--- a/files/zh-tw/web/api/indexeddb_api/using_indexeddb/index.md
+++ b/files/zh-tw/web/api/indexeddb_api/using_indexeddb/index.md
@@ -3,6 +3,8 @@ title: 使用IndexedDB
slug: Web/API/IndexedDB_API/Using_IndexedDB
---
+{{DefaultAPISidebar("IndexedDB")}}
+
IndexedDB 提供了在瀏覽器上儲存保留資料的功能，藉由它，不論是線上或線下我們的應用都可以進行資料存取。
## 關於本文
diff --git a/files/zh-tw/web/api/messageevent/index.md b/files/zh-tw/web/api/messageevent/index.md
index 341371b08160cb..4f664208b99767 100644
--- a/files/zh-tw/web/api/messageevent/index.md
+++ b/files/zh-tw/web/api/messageevent/index.md
@@ -3,6 +3,8 @@ title: MessageEvent
slug: Web/API/MessageEvent
---
+{{APIRef("HTML DOM")}}
+
當伺服器傳來資料時，客戶端會收到一個 `MessageEvent`，由 `WebSocket` 物件 `onmessage` 表示的監聽器接收。
## 屬性
diff --git a/files/zh-tw/web/api/network_information_api/index.md b/files/zh-tw/web/api/network_information_api/index.md
index a602a01e4d995c..a0cde11b750611 100644
--- a/files/zh-tw/web/api/network_information_api/index.md
+++ b/files/zh-tw/web/api/network_information_api/index.md
@@ -3,7 +3,7 @@ title: Network Information API
slug: Web/API/Network_Information_API
---
-{{ SeeCompatTable() }}
+{{DefaultAPISidebar("Network Information API")}}{{ SeeCompatTable() }}
Network Information API 將提供系統連線的相關資訊，如使用者裝置的現有頻寬，或目前的連線狀態。根據使用者的連線情形，可進一步選擇高解析度或低解析度的內容。此完整的 API 另包含 domxref("Connection") 介面，以及 [`Navigator`](/zh-TW/docs/Web/API/Navigator) 介面的單一屬性 ─ [`Navigator.connection`](/zh-TW/docs/Web/API/Navigator.connection)。
diff --git a/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md b/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md
index 811d0a73c41fcf..6bf32196f0b288 100644
--- a/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md
@@ -3,7 +3,7 @@ title: 使用 Web Notifications
slug: Web/API/Notifications_API/Using_the_Notifications_API
---
-{{SeeCompatTable}}
+{{DefaultAPISidebar("Web Notifications")}}{{SeeCompatTable}}
## 摘要
diff --git a/files/zh-tw/web/api/pointer_lock_api/index.md b/files/zh-tw/web/api/pointer_lock_api/index.md
index d3dacbc76ebbf3..cd9a97368f6248 100644
--- a/files/zh-tw/web/api/pointer_lock_api/index.md
+++ b/files/zh-tw/web/api/pointer_lock_api/index.md
@@ -3,7 +3,7 @@ title: Pointer Lock API
slug: Web/API/Pointer_Lock_API
---
-{{ SeeCompatTable() }}
+{{DefaultAPISidebar("Pointer Lock API")}}{{ SeeCompatTable() }}
**Pointer lock** (之前稱為 Mouse lock) 提供「隨時間經過所產生的滑鼠位移資訊 (即 deltas)」的輸入方法，而不只是滑鼠游標的絕對位置而已。此函式可存取基本的滑鼠位移、將滑鼠事件的目標鎖定至單一元素、讓滑鼠單一方向的位移距離不再受限、將游標移除到視點之外。
diff --git a/files/zh-tw/web/api/server-sent_events/index.md b/files/zh-tw/web/api/server-sent_events/index.md
index dcef8b8e5d7c71..4f7613dc56e993 100644
--- a/files/zh-tw/web/api/server-sent_events/index.md
+++ b/files/zh-tw/web/api/server-sent_events/index.md
@@ -3,6 +3,8 @@ title: Server-sent events
slug: Web/API/Server-sent_events
---
+{{DefaultAPISidebar("Server Sent Events")}}
+
網頁一般來說是由客戶端向伺服器請求資料. 藉由 server-sent 事件, 伺服器在任何時候都可以向客戶端推送資料. 即將推送進來的訊息可以自客戶端上做 _[Events](/zh-TW/docs/DOM/event) + data_ 處理.
## 文件
diff --git a/files/zh-tw/web/api/web_audio_api/index.md b/files/zh-tw/web/api/web_audio_api/index.md
index 81699107d3e3f2..40aa00a46af7d9 100644
--- a/files/zh-tw/web/api/web_audio_api/index.md
+++ b/files/zh-tw/web/api/web_audio_api/index.md
@@ -3,7 +3,7 @@ title: Web Audio API
slug: Web/API/Web_Audio_API
---
-{{SeeCompatTable}}
+{{DefaultAPISidebar("Web Audio API")}}{{SeeCompatTable}}
**Web Audio API** 可於 Web App 或網頁上操作並播放音訊檔案。
diff --git a/files/zh-tw/web/api/websocket/index.md b/files/zh-tw/web/api/websocket/index.md
index e7b4a6ac324c19..9f471d61641882 100644
--- a/files/zh-tw/web/api/websocket/index.md
+++ b/files/zh-tw/web/api/websocket/index.md
@@ -3,7 +3,7 @@ title: WebSocket
slug: Web/API/WebSocket
---
-{{ SeeCompatTable() }}
+{{APIRef("WebSockets API")}}{{ SeeCompatTable() }}
`WebSocket` 物件提供了建立、管理 [WebSocket](/zh_tw/WebSockets) 伺服器連線的 API，它也有在連線中傳送、接收資料的能力。
diff --git a/files/zh-tw/web/api/websockets_api/index.md b/files/zh-tw/web/api/websockets_api/index.md
index 0eccd32f3d1742..9bec44f0f5b104 100644
--- a/files/zh-tw/web/api/websockets_api/index.md
+++ b/files/zh-tw/web/api/websockets_api/index.md
@@ -3,7 +3,7 @@ title: WebSockets
slug: Web/API/WebSockets_API
---
-{{ SeeCompatTable() }}
+{{DefaultAPISidebar("WebSockets API")}}{{ SeeCompatTable() }}
WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。這個 API 在不必輪詢（poll）伺服器下，讓使用者傳送訊息至伺服器並接受事件驅動回應。
diff --git a/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md
index 06821a0e14d742..08f9a3836587b9 100644
--- a/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -3,6 +3,8 @@ title: 製作 WebSocket 客戶端應用程式
slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
---
+{{DefaultAPISidebar("WebSockets API")}}
+
WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。使用這項技術的 Webapp 可以直接進行即時通訊而不需要不斷對資料更改進行輪詢（polling）。
> **備註：** 當我們的系統架構可以寄存 WebSocket 範例之後，我們會提供聊天／伺服器系統實例的幾個範例。
diff --git a/files/zh-tw/web/api/webvtt_api/index.md b/files/zh-tw/web/api/webvtt_api/index.md
index 810255a2fe3022..bb68dc21bbd752 100644
--- a/files/zh-tw/web/api/webvtt_api/index.md
+++ b/files/zh-tw/web/api/webvtt_api/index.md
@@ -3,6 +3,8 @@ title: WebVTT
slug: Web/API/WebVTT_API
---
+{{DefaultAPISidebar("WebVTT")}}
+
WebVTT 是一種 UTF-8 編碼的文字檔案格式，可藉由 {{ HTMLElement("track") }} 元素顯示加註時間資訊之文字軌，其主要設計目的是為 {{ HTMLElement("video") }} 顯示字幕。
WebVTT 當中可以採用空白或分隔字元（tab）。
diff --git a/files/zh-tw/web/api/xmlhttprequest/open/index.md b/files/zh-tw/web/api/xmlhttprequest/open/index.md
new file mode 100644
index 00000000000000..85fbdeaa058b8b
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/open/index.md
@@ -0,0 +1,53 @@
+---
+title: XMLHttpRequest：open() 方法
+slug: Web/API/XMLHttpRequest/open
+---
+
+{{APIRef('XMLHttpRequest')}}
+
+{{domxref("XMLHttpRequest")}} 的 **`open()`** 方法用來初始化新建立的請求，或重新初始化現有請求。
+
+> **備註：** 為已啟動（已經呼叫 `open()`）的請求呼叫此方法，相當於呼叫 {{domxref("XMLHttpRequest.abort", "abort()")}}。
+
+## 語法
+
+```js-nolint
+open(method, url)
+open(method, url, async)
+open(method, url, async, user)
+open(method, url, async, user, password)
+```
+
+### 參數
+
+- `method`
+ - : 要使用的 [HTTP 請求方法](/zh-TW/docs/Web/HTTP/Methods)，例如 `"GET"`、`"POST"`、`"PUT"`、`"DELETE"` 等。對於非 HTTP(S) 之 URL 將被忽略。
+- `url`
+ - : 字串或任何其他帶有 {{Glossary("stringifier")}} 的物件──包括 {{domxref("URL")}} 物件──提供要向其發送請求的資源的 URL。
+- `async` {{optional_inline}}
+
+ - : 選擇性布林參數，表示是否非同步執行操作，預設為 `true`。如果該值為 `false`，則 `send()` 方法在收到回應之前不會傳回。如果為 `true`，則使用事件監聽器提供交易完成的通知。如果 `multipart` 屬性為 `true`，則該值必須為 `true`，否則將引發例外。
+
+ > **備註：** 主執行緒上的同步請求很容易破壞使用者體驗，應該避免；事實上，許多瀏覽器已經完全棄用了主執行緒上的同步 XHR 支援。 {{domxref("Worker")}} 中允許同步請求。
+
+- `user` {{optional_inline}}
+ - : 選擇性參數，用於身份驗證的用戶名；預設值為 `null`。
+- `password` {{optional_inline}}
+ - : 選擇性參數，用於身份驗證的密碼；預設值為 `null`。
+
+### 回傳值
+
+無（{{jsxref("undefined")}}）。
+
+## 規範
+
+{{Specifications}}
+
+## 瀏覽器相容性
+
+{{Compat}}
+
+## 參見
+
+- [使用 XMLHttpRequest](/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)
+- {{domxref("XMLHttpRequest")}} 相關方法：{{domxref("XMLHttpRequest.setRequestHeader","setRequestHeader()")}}、{{domxref("XMLHttpRequest.send", "send()")}}、{{domxref("XMLHttpRequest.abort", "abort()")}}
diff --git a/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md b/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md
index 3e524068549b57..445965395e376f 100644
--- a/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md
+++ b/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.md
@@ -1,36 +1,40 @@
---
-title: XMLHttpRequest.setRequestHeader()
+title: XMLHttpRequest：setRequestHeader() 方法
slug: Web/API/XMLHttpRequest/setRequestHeader
+l10n:
+ sourceCommit: 9c78a44b9321fcd3fbe63d6f5b61ed749c2fa261
---
{{APIRef('XMLHttpRequest')}}
-{{domxref("XMLHttpRequest")}} 物件中的 **`setRequestHeader()`** 方法用來設定 HTTP 的表頭請求。當使用 `setRequestHeader()` 的時候，必須在 {{domxref("XMLHttpRequest.open", "open()")}} 之後呼叫，同時也必須在 {{domxref("XMLHttpRequest.send", "send()")}} 之前呼叫。如果這個方法被呼叫了許多次，且設定的表頭是一樣的，那所有設定的值會被合併成一個單一的表頭請求。
+{{domxref("XMLHttpRequest")}} 的 **`setRequestHeader()`** 方法用來設定 HTTP 的請求標頭。當使用 `setRequestHeader()` 的時候，必須在 {{domxref("XMLHttpRequest.open", "open()")}} 之後呼叫，同時也必須在 {{domxref("XMLHttpRequest.send", "send()")}} 之前呼叫。如果這個方法被呼叫了許多次，且設定的標頭是一樣的，那所有設定的值會被合併成一個單一的請求標頭。
-在第一次呼叫 `setRequestHeader()` 之後的每一次的呼叫，都會把給定的文字附加在已存在的表頭內容之後。
+在第一次呼叫 `setRequestHeader()` 之後的每一次的呼叫，都會把給定的文字附加在已存在的標頭內容之後。
-If no {{HTTPHeader("Accept")}} header has been set using this, an `Accept` header with the type `"*/*"` is sent with the request when {{domxref("XMLHttpRequest.send", "send()")}} is called.
+如果沒有使用此設定 {{HTTPHeader("Accept")}} 標頭，則在呼叫 {{domxref("XMLHttpRequest.send", "send()")}} 時，將隨請求傳送類型為「`*/*`」 的 `Accept` 標頭。
-基於安全的理由，有些表頭只有使用者代理器可以使用。這些表頭包含了： {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.
+出於安全原因，有幾個由使用者代理（User Agent）管控的{{Glossary("Forbidden_header_name", "禁止修改的標頭")}}。任何嘗試從前端 JavaScript 程式碼中設置這些標頭的值之行為都會被忽略，且不會發出警告或錯誤。
-> **備註：** For your custom fields, you may encounter a "**not allowed by Access-Control-Allow-Headers in preflight response**" exception when you send requests across domains. In this situation, you need to set up the {{HTTPHeader("Access-Control-Allow-Headers")}} in your response header at server side.
+此外，可以在請求中添加 [`Authorization`](/zh-TW/docs/Web/HTTP/Headers/Authorization) HTTP 標頭，但如果請求被跨域重定向，這個標頭將會被移除。
+
+> **備註：** 對於你的自訂字段，跨域發送請求時可能會遇到「**not allowed by Access-Control-Allow-Headers in preflight response**」的例外狀況。在這種情況下，你需要在伺服器端的回應標頭中設定 {{HTTPHeader("Access-Control-Allow-Headers")}}。
## 語法
-```plain
-XMLHttpRequest.setRequestHeader(header, value)
+```js-nolint
+setRequestHeader(header, value)
```
### 參數
- `header`
- - : 想要設定所屬值的表頭名稱。
+ - : 想要設定所屬值的標頭名稱。
- `value`
- - : 用來設定表頭本身的值。
+ - : 用來設定標頭本身的值。
-### 回傳值
+### 傳回值
-未定義。
+無（{{jsxref("undefined")}}）。
## 規範
@@ -43,4 +47,4 @@ XMLHttpRequest.setRequestHeader(header, value)
## 參見
- [使用 XMLHttpRequest](/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)
-- [HTML in XMLHttpRequest](/zh-TW/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest)
+- [XMLHttpRequest 中的 HTML](/zh-TW/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest)
diff --git a/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index 9369996b398406..1c9d563e6dc0c3 100644
--- a/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
+++ b/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -3,6 +3,8 @@ title: 使用 XMLHttpRequest
slug: Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
---
+{{DefaultAPISidebar("XMLHttpRequest API")}}
+
要送出一個 HTTP 請求，需要建立一個 {{domxref("XMLHttpRequest")}} 物件、開啟一個 URL，並發起一個請求。在交易（transaction）完成後，`XMLHttpRequest` 物件將會包含如回應內容（response body）及 [HTTP 狀態](/docs/Web/HTTP/Status)等等請求結果中的有用資訊。本頁概述了一些常見的、甚至略為難理解的 `XMLHttpRequest` 物件使用案例。
```js
diff --git a/files/zh-tw/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/zh-tw/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 28aa8f4e6a46bd..4a7c93c3f088a2 100644
--- a/files/zh-tw/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/zh-tw/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -33,7 +33,8 @@ slug: Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
```css
.multi_bg_example {
- background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+ background-image: url(firefox.png), url(bubbles.png),
+ linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
diff --git a/files/zh-tw/web/css/css_fonts/index.md b/files/zh-tw/web/css/css_fonts/index.md
new file mode 100644
index 00000000000000..6aa1ef0687e72d
--- /dev/null
+++ b/files/zh-tw/web/css/css_fonts/index.md
@@ -0,0 +1,174 @@
+---
+title: CSS 字型
+slug: Web/CSS/CSS_fonts
+---
+
+{{CSSRef}}
+
+**CSS 字型**模組定義了與字型相關的屬性以及字體資源的載入方式。它允許你定義字型的樣式，例如其字族、大小和粗細，以及當多個字形可用於單一字元時要使用的字形變體。
+
+字型是一種資源檔案，其內容包含字元的視覺表示，以及將字元代碼映射到代表字母、數字、標點符號甚至表情符號的字形。字型家族是一組共享相同設計風格和字型屬性的字型組，每個成員提供不同的字形顯示方式，這些方式可能在筆劃粗細、傾斜度或相對寬度等屬性上有所不同。字型通常代表某種樣式的字體，例如為粗斜體的 Helvetica。字型家族則是所有樣式的完整集合。在文件或設計中包含此類字型，是透過為每個字型資源定義一個單獨的 `@font-face` 宣告來實現的。
+
+CSS 字型模組的屬性、@ 規則和描述符使得能夠下載多種變體的字型。它們還定義了用於特定字型特徵的字型檔案，並在資源加載失敗時提供後備指示。CSS 字型選擇機制描述了將一組給定的 CSS 字型屬性與單個字型面匹配的過程。
+
+CSS 字型模組還支持可變字型。與常規字型不同的是，每種樣式都作為一個單獨的字型檔案實現，可變字型可以在單一檔案中包含所有樣式。通過使用單個 `@font-face` 宣告，可以導入包含所有樣式的可變字型。根據字型的不同，這可以包含多種字型變體。可變字型是 OpenType 字型規範的一部分。
+
+## 參考
+
+### 屬性
+
+- {{cssxref("font")}} 簡寫
+- {{cssxref("font-family")}}
+- {{cssxref("font-feature-settings")}}
+- {{cssxref("font-kerning")}}
+- {{cssxref("font-language-override")}}
+- {{cssxref("font-optical-sizing")}}
+- {{cssxref("font-palette")}}
+- {{cssxref("font-size")}}
+- {{cssxref("font-size-adjust")}}
+- {{cssxref("font-stretch")}}
+- {{cssxref("font-style")}}
+- {{cssxref("font-weight")}}
+
+- {{cssxref("font-synthesis")}} 簡寫
+- {{cssxref("font-synthesis-small-caps")}}
+- {{cssxref("font-synthesis-style")}}
+- {{cssxref("font-synthesis-weight")}}
+
+- {{cssxref("font-variant")}} 簡寫
+- {{cssxref("font-variant-alternates")}}
+- {{cssxref("font-variant-caps")}}
+- {{cssxref("font-variant-east-asian")}}
+- {{cssxref("font-variant-emoji")}}
+- {{cssxref("font-variant-ligatures")}}
+- {{cssxref("font-variant-numeric")}}
+- {{cssxref("font-variant-position")}}
+- {{cssxref("font-variation-settings")}}
+
+### @ 規則與描述符
+
+- @ 規則：{{cssxref("@font-face")}}
+
+ - : 描述符：
+ - {{cssxref("@font-face/ascent-override", "ascent-override")}}
+ - {{cssxref("@font-face/descent-override", "descent-override")}}
+ - {{cssxref("@font-face/font-display", "font-display")}}
+ - {{cssxref("@font-face/font-family", "font-family")}}
+ - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
+ - {{cssxref("@font-face/font-stretch", "font-stretch")}}
+ - {{cssxref("@font-face/font-style", "font-style")}}
+ - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+ - {{cssxref("@font-face/font-weight", "font-weight")}}
+ - {{cssxref("@font-face/line-gap-override", "line-gap-override")}}
+ - {{cssxref("@font-face/size-adjust", "size-adjust")}}
+ - {{cssxref("@font-face/src", "src")}}
+ - {{cssxref("@font-face/unicode-range", "unicode-range")}}
+
+- @ 規則：{{cssxref("@font-feature-values")}}
+
+ - : 描述符：
+ - {{cssxref("@font-feature-values/font-display", "font-display")}}
+
+- @ 規則：{{cssxref("@font-palette-values")}}
+
+ - : 描述符：
+ - {{cssxref("@font-palette-values/base-palette", "base-palette")}}
+ - {{cssxref("@font-palette-values/font-family", "font-family")}}
+ - {{cssxref("@font-palette-values/override-colors", "override-colors")}}
+
+### 資料類型
+
+`font-size`：
+
+- {{cssxref("absolute-size")}}
+- {{cssxref("relative-size")}}
+
+`font-family`：
+
+- {{cssxref("generic-family")}}
+
+`font-feature-settings`：
+
+- [`<feature-tag-value>`](/zh-TW/docs/Web/CSS/font-feature-settings#值)
+
+`font-format`：
+
+- [`<font-format>`](/zh-TW/docs/Web/CSS/@supports#font-format)
+
+`font-stretch`：
+
+- [`<font-stretch-css3>`](/zh-TW/docs/Web/CSS/font-stretch#值)
+
+`font-tech`：
+
+- [`<color-font-tech>`](/zh-TW/docs/Web/CSS/@supports#font-tech)
+- [`<font-features-tech>`](/zh-TW/docs/Web/CSS/@supports#font-tech)
+- [`<font-tech>`](/zh-TW/docs/Web/CSS/@supports#font-tech)
+
+`font-variant`：
+
+- [`<font-variant-css2>`](/zh-TW/docs/Web/CSS/font-variant)
+- [`<east-asian-variant-values>`](/zh-TW/docs/Web/CSS/font-variant#值)
+- [`<east-asian-width-values>`](/zh-TW/docs/Web/CSS/font-variant#值)
+
+`font-variant-ligatures`：
+
+- [`<common-lig-values>`](/zh-TW/docs/Web/CSS/font-variant-ligatures#值)
+- [`<contextual-alt-values>`](/zh-TW/docs/Web/CSS/font-variant-ligatures#值)
+- [`<discretionary-lig-values>`](/zh-TW/docs/Web/CSS/font-variant-ligatures#值)
+- [`<historical-lig-values>`](/zh-TW/docs/Web/CSS/font-variant-ligatures#值)
+
+`font-variant-numeric`：
+
+- [`<numeric-figure-values>`](/zh-TW/docs/Web/CSS/font-variant-numeric#值)
+- [`<numeric-fraction-values>`](/zh-TW/docs/Web/CSS/font-variant-numeric#值)
+- [`<numeric-spacing-values>`](/zh-TW/docs/Web/CSS/font-variant-numeric#值)
+
+`font-weight`：
+
+- [`<font-weight-absolute>`](/zh-TW/docs/Web/CSS/font-weight#值)
+
+### 介面
+
+- {{domxref("CSSFontFaceRule")}}
+- {{domxref("CSSFontFeatureValuesRule")}}
+- {{domxref("CSSFontPaletteValuesRule")}}
+
+## 指南
+
+- [文字和字型樣式基礎](/zh-TW/docs/Learn/CSS/Styling_text/Fundamentals)
+
+ - : 在這篇給初學者的文章中，我們詳細說明了文字和字型樣式的基礎知識，包括瞭解如何使用 {{cssxref("font")}} 簡寫來設定字型粗細、字族和樣式，以及如何對齊文字以及管理行和字母間距。
+
+- [Web 字型](/zh-TW/docs/Learn/CSS/Styling_text/Web_fonts)
+
+ - : 在這篇給初學者的文章中，我們詳細介紹如何在網頁上使用自訂字型以實現更多樣化的自訂文字樣式。
+
+- [OpenType 字型特性指南](/zh-TW/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide)
+
+ - : 字型功能或變體是指 OpenType 字型中包含的不同字形或字元樣式，其中包括連字（組合「fi」或「ffl」等字元的特殊字形）、字距調整（調整特定字母形式對之間的間距）、分數、數字樣式以及許多其他內容。 這些都稱為 OpenType 功能，並且可以透過特定屬性和低階控制屬性 {{cssxref("font-feature-settings")}} 在 Web 上使用。本文提供了有關在 CSS 中使用 OpenType 字型功能所需的所有資訊。
+
+- [可變字型指南](/zh-TW/docs/Web/CSS/CSS_fonts/Variable_fonts_guide)
+
+ - : 本文將協助你開始使用可變字型。
+
+- [提升字型效能](/zh-TW/docs/Learn/Performance/CSS#improving_font_performance)
+
+ - : 本文是 CSS 效能指南的一部分，討論字型載入、僅載入所需的字形以及使用 `font-display` 定義字型顯示行為。
+
+## 相關概念
+
+- {{cssxref("letter-spacing")}} CSS 屬性
+- {{cssxref("line-height")}} CSS 屬性
+- {{cssxref("text-transform")}} CSS 屬性
+
+## 規範
+
+{{Specifications}}
+
+## 參見
+
+- [CSS 字型載入](/zh-TW/docs/Web/CSS/CSS_font_loading)模組
+- [CSS 字型載入 API](/zh-TW/docs/Web/API/CSS_Font_Loading_API)
+- [CSS 文本](/zh-TW/docs/Web/CSS/CSS_text)模組
+- [CSS 書寫模式](/zh-TW/docs/Web/CSS/CSS_writing_modes)模組
diff --git a/files/zh-tw/web/css/css_media_queries/testing_media_queries/index.md b/files/zh-tw/web/css/css_media_queries/testing_media_queries/index.md
index 6daec19513b2f0..d3bc51d810187a 100644
--- a/files/zh-tw/web/css/css_media_queries/testing_media_queries/index.md
+++ b/files/zh-tw/web/css/css_media_queries/testing_media_queries/index.md
@@ -3,7 +3,7 @@ title: 測試媒體查詢
slug: Web/CSS/CSS_media_queries/Testing_media_queries
---
-{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}}
DOM 提供了一個用程式去測試 media query 的方法：那就是透過 {{domxref("MediaQueryList") }} 物件；透過 {{domxref("MediaQueryList") }} 物件上的屬性和方法，我們可以得知、觀察目前 media query 的狀態。
diff --git a/files/zh-tw/web/css/index.md b/files/zh-tw/web/css/index.md
index 9efbf703190aee..2ce7f06ba4d38d 100644
--- a/files/zh-tw/web/css/index.md
+++ b/files/zh-tw/web/css/index.md
@@ -63,6 +63,5 @@ slug: Web/CSS
## 參見
-- [CSS demos](/zh-TW/docs/Web/Demos_of_open_web_technologies#CSS) 最新的 CSS 技術動向：給予創意的一拔。
- 常與 CSS 相關聯的語言：[HTML](/zh-TW/docs/Web/HTML)、[SVG](/zh-TW/docs/Web/SVG)、[XHTML](/zh-TW/docs/Glossary/XHTML)、[XML](/zh-TW/docs/XML)。
- 廣泛運用 CSS 的 Mozilla 科技：[Firefox](/zh-TW/docs/Mozilla/Firefox) 及 [Thunderbird](/zh-TW/docs/Mozilla/Thunderbird) 的[套件](/zh-TW/docs/Extensions)與[佈景](/zh-TW/docs/Mozilla/Add-ons/Themes)
diff --git a/files/zh-tw/web/css/transition-duration/index.md b/files/zh-tw/web/css/transition-duration/index.md
index c63f289327a216..6815ab81fb59c3 100644
--- a/files/zh-tw/web/css/transition-duration/index.md
+++ b/files/zh-tw/web/css/transition-duration/index.md
@@ -129,8 +129,8 @@ var intervalID = window.setInterval(updateTransition, 7000);
left: 0px;
top: 0px;
position: absolute;
- -webkit-transition-property: width height background-color font-size left
- top -webkit-transform color;
+ -webkit-transition-property: width height background-color font-size left top -webkit-transform
+ color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
transition-property: width height background-color font-size left top
@@ -149,8 +149,8 @@ var intervalID = window.setInterval(updateTransition, 7000);
left: 150px;
top: 25px;
position: absolute;
- -webkit-transition-property: width height background-color font-size left
- top -webkit-transform transform color;
+ -webkit-transition-property: width height background-color font-size left top -webkit-transform
+ transform color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
transition-property: width height background-color font-size left top
diff --git a/files/zh-tw/web/demos/index.md b/files/zh-tw/web/demos/index.md
deleted file mode 100644
index 70ab553db213cd..00000000000000
--- a/files/zh-tw/web/demos/index.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Demos of open web technologies
-slug: Web/Demos
----
-
-Mozilla 支援豐富、廣泛且扣人心弦的網路公開技術，並且我們鼓勵使用他們。這個頁面提供一些展示這些有趣技術的連結，包含那些曾經在 Demo Studio 有人氣的，但[現在已經落伍了](https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/)的技術。如果你知道有關於新的網路公開技術，不錯的展示或是應用程式，請將連結加到下方適合的區塊中。
-
-## 2D 繪圖
-
-### Canvas
-
-- [An interactive blob using javascript and canvas (fun)](http://www.blobsallad.se/)
-- [Blob's demos](http://blobsallad.se/article/)
-- [Canvas3D & Flickr](http://www.xs4all.nl/~peterned/3d/)
-- [Playing with Canvas](http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html)
-- [Using the Canvas Html element5](http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html)
-- [RayCaster](https://mdn.github.io/canvas-raycaster/index.html)
-- [MSX Emulator](http://jsmsxdemo.googlepages.com/jsmsx.html)
-- [processing.js](https://processingjs.org/exhibition/)
-- [3D on 2D Canvas](http://gyu.que.jp/jscloth/)
-- [miniPaint - Image editor](http://viliusle.github.io/miniPaint/) ([source code](https://github.com/viliusle/miniPaint))
-
-### SVG
-
-- [Bubblemenu](http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml) (visual effects and interaction)
-- [HTML transformations](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/) using `foreignObject` (visual effects and transforms)
-- [Phonetics Guide](http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg) (interactive)
-- [3D objects demo](http://www.lutanho.net/svgvml3d/platonic.html) (interactive)
-- [Blobular](https://www.themaninblue.com/experiment/Blobular/) (interactive)
-- [Video embedded in SVG](http://www.double.co.nz/video_test/video.svg) (or use the [local download](http://www.double.co.nz/video_test/video_svg.tar.bz2))
-- [Summer HTML image map creator](http://summerstyle.github.io/summer/) ([source code](https://github.com/summerstyle/summer))
-
-### 影片
-
-- [Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.](https://vimeo.com/172328210)
-- [Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.](https://vimeo.com/173851395)
-- [Streaming Anime, Movie Trailer and Interview](http://www.double.co.nz/video_test/test1.html)
-- [Billy's Browser Firefox Flick](http://www.double.co.nz/video_test/test2.html)
-- [Virtual Barber Shop](http://www.double.co.nz/video_test/test3.html)
-- [Transformers Movie Trailer](http://www.double.co.nz/video_test/test4.html)
-- [A Scanner Darkly Movie Trailer](http://www.double.co.nz/video_test/test5.html) (with built in controls)
-- [Events firing and volume control](http://www.double.co.nz/video_test/events.html)
-- [Dragable and sizable videos](http://www.double.co.nz/video_test/video.svg)
-
-## 3D 繪圖
-
-### WebGL
-
-- [Web Audio Fireworks](http://ondras.github.io/fireworks-webgl/)
-- IoQuake3 ([source code](https://github.com/klaussilveira/ioquake3.js))
-- Escher puzzle ([source code](https://github.com/micahbolen/demoscene))
-- [Kai 'Opua](http://collinhover.github.io/kaiopua/) ([source code](https://github.com/collinhover/kaiopua))
-
-### 虛擬實境 ( Virtual Reality )
-
-- The Polar Sea ([source code](https://github.com/MozVR/polarsea))
-- [Sechelt fly-through](https://mozvr.github.io/sechelt/) ([source code](https://github.com/mozvr/sechelt))
-
-## CSS
-
-- [CSS floating logo " mozilla " developed by Rober Villar , from Software RVG.](https://codepen.io/SoftwareRVG/full/OXkOWj) (debug mode)
-- [CSS floating logo " mozilla " developed by Rober Villar , from Software RVG.](https://codepen.io/SoftwareRVG/pen/OXkOWj/) (source code)
-- [Paperfold](https://felixniklas.com/paperfold/)
-- [CSS Blockout](http://ondras.github.io/blockout/)
-- [Rubik's cube](https://ondras.zarovi.cz/demos/rubik/)
-- [Pure CSS Slides](https://ondras.zarovi.cz/demos/nojs/)
-- Planetarium ([source code](https://github.com/littleworkshop/planetarium))
-
-### 轉換 ( Transformations )
-
-- [Impress.js](http://impress.github.io/impress.js) ([source code](https://github.com/impress/impress.js))
-
-## 遊戲
-
-- IoQuake3 ([source code](https://github.com/klaussilveira/ioquake3.js))
-- [Kai 'Opua](http://collinhover.github.io/kaiopua/) ([source code](https://github.com/collinhover/kaiopua))
-
-## HTML
-
-- [Zen Photon Garden](https://zenphoton.com) ([source code](https://github.com/scanlime/zenphoton))
-
-## Web APIs
-
-### 提示工具的 API
-
-- [HTML5 Notifications](http://elfoxero.github.io/html5notifications/) ([source code](https://github.com/elfoxero/html5notifications))
-
-### 網路 API
-
-- [Web Audio Fireworks](http://ondras.github.io/fireworks-webgl/)
-- [oscope.js - JavaScript oscilloscope](http://ondras.github.io/oscope/)
-- [HTML5 Web Audio Showcase](http://nipe-systems.de/webapps/html5-web-audio/) ([source code](https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase))
-- [HTML5 Audio Visualizer](http://wayou.github.io/HTML5_Audio_Visualizer/) ([source code](https://github.com/Wayou/HTML5_Audio_Visualizer))
-- [Graphical Filter Editor and Visualizer](https://carlosrafaelgn.com.br/GraphicalFilterEditor/) ([source code](https://github.com/carlosrafaelgn/GraphicalFilterEditor))
-
-### 檔案的 API
-
-- [Slide My Text - presentation from plain text files](http://palerdot.github.io/slide-my-text/)
-
-### Web Workers
-
-- [Web Worker Fractals](http://ondras.github.io/fractal/)
-- [圖片編輯器](http://ondras.github.io/photo/)
-- [Coral generator](http://ondras.github.io/coral/)
-- [Raytracer](https://nerget.com/rayjs-mt/rayjs.html)
-- [HotCold Touch Typing](http://palerdot.github.io/hotcold/)
diff --git a/files/zh-tw/web/html/attributes/index.md b/files/zh-tw/web/html/attributes/index.md
index 7befa23301ada3..1cf1c086e4c253 100644
--- a/files/zh-tw/web/html/attributes/index.md
+++ b/files/zh-tw/web/html/attributes/index.md
@@ -3,6 +3,8 @@ title: HTML attribute reference
slug: Web/HTML/Attributes
---
+{{HTMLSidebar("Attributes")}}
+
HTML 中的元素具有**屬性**；而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。
## 屬性列表
diff --git a/files/zh-tw/web/html/element/fencedframe/index.md b/files/zh-tw/web/html/element/fencedframe/index.md
index 937e1f708c447a..d89da736675251 100644
--- a/files/zh-tw/web/html/element/fencedframe/index.md
+++ b/files/zh-tw/web/html/element/fencedframe/index.md
@@ -1,6 +1,8 @@
---
title: <fencedframe>：圍欄頁框元素
slug: Web/HTML/Element/fencedframe
+l10n:
+ sourceCommit: 5618052b7314a29552ff9e4331dd3da13dc19f5e
---
{{HTMLSidebar}}{{SeeCompatTable}}
@@ -18,15 +20,15 @@ slug: Web/HTML/Element/fencedframe
該元素包括[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)。
-- `allow`
+- `allow` {{experimental_inline}}
- : 為 `<fencedframe>` 指定一個[權限策略](/zh-TW/docs/Web/HTTP/Permissions_Policy)，該策略基於請求的原始位置定義了哪些功能對 `<fencedframe>` 可用。有關可以通過設置在圍欄頁框上的策略來控制哪些功能的更多詳細信息，請參見[可用於圍欄頁框權限策略](#可用於圍欄頁框權限策略)。
-- `height`
+- `height` {{experimental_inline}}
- : 一個無單位的整數，表示圍欄頁框的高度，以 CSS 像素為單位。默認值為 `150`。
-- `width`
+- `width` {{experimental_inline}}
- : 一個無單位的整數，表示圍欄頁框的寬度，以 CSS 像素為單位。默認值為 `300`。
## 可用於圍欄頁框權限策略
diff --git a/files/zh-tw/web/html/element/marquee/index.md b/files/zh-tw/web/html/element/marquee/index.md
index cb240803695327..568392bf5367e9 100644
--- a/files/zh-tw/web/html/element/marquee/index.md
+++ b/files/zh-tw/web/html/element/marquee/index.md
@@ -3,7 +3,7 @@ title: <marquee>：捲動元素（已過時）
slug: Web/HTML/Element/marquee
---
-{{Deprecated_Header}}
+{{HTMLSidebar}}{{Deprecated_Header}}
HTML `<marquee>` 元素用作插入一段文字的捲動區域。你可以透過屬性，控制文字在到達邊緣後的應對動作。
diff --git a/files/zh-tw/web/html/global_attributes/spellcheck/index.md b/files/zh-tw/web/html/global_attributes/spellcheck/index.md
index 5e9235dc60421a..2bdce5d0a909c0 100644
--- a/files/zh-tw/web/html/global_attributes/spellcheck/index.md
+++ b/files/zh-tw/web/html/global_attributes/spellcheck/index.md
@@ -3,6 +3,8 @@ title: 控制 HTML 表單中的拼字檢查功能
slug: Web/HTML/Global_attributes/spellcheck
---
+{{HTMLSidebar("Global_attributes")}}
+
Firefox 2 新增了網頁表單文字輸入區的即時拼字檢查功能，使用者可以修改 about:config 來調整是否使用拼字檢查、是否同時檢查文字輸入**欄**等設定。預設值狀態下，Firefox 會檢查文字輸入區（text area）及 `designMode` 的文件，而不檢查文字輸入欄（text field）的拼字。
不過，總是會有些不見得適合預設值的情況，例如在某些用來編寫 HTML 等程式碼的輸入區中拼字檢查就變得煩人，或者有些網站也希望建議 Firefox 檢查某些特定文字輸入欄的拼字等等。
diff --git a/files/zh-tw/web/html/reference/index.md b/files/zh-tw/web/html/reference/index.md
index 207f6033698070..d78cca83d33f19 100644
--- a/files/zh-tw/web/html/reference/index.md
+++ b/files/zh-tw/web/html/reference/index.md
@@ -1,17 +1,21 @@
---
title: HTML 參考
slug: Web/HTML/Reference
+l10n:
+ sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35
---
{{HTMLSidebar}}
-這裡的 HTML 參考描述了所有 HTML 的**元素**（elements）與**屬性**（attributes），包括為所有元素接受的**全域屬性**（global attributes）。
+這裡的 [HTML](/zh-TW/docs/Web/HTML) 參考描述了 HTML 所有的**元素**與**屬性**，包括為所有元素接受的**全域屬性**。
- [HTML 元素指引](/zh-TW/docs/Web/HTML/Element)
- - : 本頁列出了所有 HTML elements
+ - : 本頁列出使用{{Glossary("Tag", "標籤")}}建立的所有 {{Glossary("HTML")}} {{Glossary("Element","元素")}}。
- [HTML 屬性指引](/zh-TW/docs/Web/HTML/Attributes)
- - : HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。
+ - : HTML 中的元素具有屬性，這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。
- [全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)
- - : Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as \<foo hidden>...\<foo>, even though \<foo> is not a valid HTML element.
-- [連結類型](/docs/Web/HTML/Link_types)
- - : In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an \<a>, \<area>, or \<link> element.
+ - : 全域屬性是所有 HTML 元素共有的屬性，可以用於所有元素，儘管它們可能對於某些元素無效。
+- [內容類型](/zh-TW/docs/Web/HTML/Content_categories)
+ - : 每個 HTML 元素都是一個或多個內容類型的成員──這些類別會將具有共同特性的元素分組。
+- [HTML 中使用的日期與時間格式](/zh-TW/docs/Web/HTML/Date_and_time_formats)
+ - : 某些 HTML 元素可讓你將日期及時間指定為值或作為屬性之值，其中包括 {{HTMLElement("input")}} 之 `type` 屬性值為 [`date`](/zh-TW/docs/Web/HTML/Element/input/date) 或 [`time`](/zh-TW/docs/Web/HTML/Element/input/time) 的元素，以及 {{HTMLElement("ins")}} 與 {{HTMLElement("del")}} 元素。
diff --git a/files/zh-tw/web/http/basics_of_http/identifying_resources_on_the_web/index.md b/files/zh-tw/web/http/basics_of_http/identifying_resources_on_the_web/index.md
index 88d38bc4ab4221..eec37467fa44f0 100644
--- a/files/zh-tw/web/http/basics_of_http/identifying_resources_on_the_web/index.md
+++ b/files/zh-tw/web/http/basics_of_http/identifying_resources_on_the_web/index.md
@@ -1,6 +1,8 @@
---
-title: 識別網絡上的資源
+title: 識別 Web 上的資源
slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+l10n:
+ sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
---
{{HTTPSidebar}}
@@ -39,20 +41,20 @@ urn:ietf:rfc:7230
這兩個 URN 分別對應到：
- 《0984》一書，作者是喬治·奧威爾（George Orwell）。
-- IETF 規範 7230，標題為「超文本傳輸協議（HTTP/1.1）：消息語法和路由」。
+- IETF 規範 7230，標題為「超文本傳輸協定（HTTP/1.1）：消息語法和路由」。
## 統一資源識別符的語法
### 方案或協定
- 
- - : `http://` 是個協定（protocol），它指示瀏覽器應該使用哪種協定。通常情況下，這是 HTTP 協議或其安全版本 HTTPS。網頁需要使用這兩者之一，但瀏覽器也知道如何處理其他協定，比如 `mailto:`（用於打開郵件客戶端）或 `ftp:`（用於處理文件傳輸），所以如果你看到這些協定，也不要感到驚訝。一些常見的方案（scheme）包括：
+ - : `http://` 是個協定（protocol），它指示瀏覽器應該使用哪種協定。通常情況下，這是 HTTP 協定或其安全版本 HTTPS。網頁需要使用這兩者之一，但瀏覽器也知道如何處理其他協定，比如 `mailto:`（用於打開郵件用戶端）或 `ftp:`（用於處理文件傳輸），所以如果你看到這些協定，也不要感到驚訝。一些常見的方案（scheme）包括：
| 方案 | 描述 |
| ----------- | ------------------------------------------------------------ |
| data | [Data URL](/zh-TW/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) |
| file | 特定主機的文件名 |
-| ftp | {{Glossary("FTP","文件傳輸協定")}} |
+| ftp | {{Glossary("FTP", "文件傳輸協定")}} |
| http/https | [超文字傳輸協定（安全）](/zh-TW/docs/Glossary/HTTP) |
| javascript | URL 中嵌入的 JavaScript 程式碼 |
| mailto | 電子郵件地址 |
@@ -65,33 +67,33 @@ urn:ietf:rfc:7230
### 權威
- 
- - : `www.example.com` 是域名或管理命名空間的權威，它指示正在請求的 Web 服務器。或者，也可以直接使用 IP 位址，但由於不太方便，因此在 Web 上很少使用。
+ - : `www.example.com` 是域名或管理命名空間的權威，它指示正在請求的 Web 伺服器。或者，也可以直接使用 IP 位址，但由於不太方便，因此在 Web 上很少使用。
### 通訊埠
- 
- - : `:80` 是在這個示例中的通訊埠編號。它表示用於訪問 Web 服務器上的資源的技術「閘道」。通常，如果 Web 服務器使用 HTTP 協議的標準通訊埠（HTTP 的通訊埠為 80，HTTPS 的通訊埠為 443）來提供對其資源的訪問權，則可以省略它。否則，它是必需的。
+ - : `:80` 是在這個範例中的通訊埠編號。它表示用於訪問 Web 伺服器上的資源的技術「閘道器」。通常，如果 Web 伺服器使用 HTTP 協定的標準通訊埠（HTTP 的通訊埠為 80，HTTPS 的通訊埠為 443）來提供對其資源的訪問權，則可以省略它。否則，它是必需的。
### 路徑
- 
- - : `/path/to/myfile.html` 是 Web 服務器上資源的路徑。在 Web 早期，這樣的路徑代表了 Web 服務器上的實際文件位置。如今，它主要是由 Web 服務器抽象的處理，並且沒有實際的物理存在。
+ - : `/path/to/myfile.html` 是 Web 伺服器上資源的路徑。在 Web 早期，這樣的路徑代表了 Web 伺服器上的實際文件位置。如今，它主要是由 Web 伺服器抽象的處理，並且沒有實際的物理存在。
### 查詢
- 
- - : `?key1=value1&key2=value2` 是提供給 Web 服務器的額外參數。這些參數是一個由 `&` 符號分隔的鍵/值對列表。Web 服務器可以使用這些參數在將資源返回給用戶之前執行額外的操作。每個 Web 服務器都有自己的參數處理規則，了解特定 Web 服務器如何處理參數的唯一可靠方法是請教 Web 服務器的所有者。
+ - : `?key1=value1&key2=value2` 是提供給 Web 伺服器的額外參數。這些參數是一個由 `&` 符號分隔的鍵／值對列表。Web 伺服器可以使用這些參數在將資源返回給用戶之前執行額外的操作。每個 Web 伺服器都有自己的參數處理規則，了解特定 Web 伺服器如何處理參數的唯一可靠方法是請教 Web 伺服器的所有者。
### 片段
- 
- - : `#SomewhereInTheDocument` 是對資源本身的另一部分的錨點。錨點代表資源內的一種「書籤」，它告訴瀏覽器顯示位於該「書籤」位置的內容。例如，在 HTML 文件中，瀏覽器將滾動到定義錨點的位置；在視頻或音頻文件中，瀏覽器將嘗試跳轉到錨點代表的時間。值得注意的是，# 後面的部分，也稱為片段標識符，不會隨請求一起發送到服務器。
+ - : `#SomewhereInTheDocument` 是對資源本身的另一部分的錨點。錨點代表資源內的一種「書籤」，它告訴瀏覽器顯示位於該「書籤」位置的內容。例如，在 HTML 文件中，瀏覽器將滾動到定義錨點的位置；在視訊或音訊文件中，瀏覽器將嘗試跳轉到錨點代表的時間。值得注意的是，# 後面的部分，也稱為片段標識符，不會隨請求一起發送到伺服器。
## 使用筆記
-在 {{Glossary("HTML")}} 內容中使用 URL 時，通常只應該使用其中一些 URL 方案。當引用子資源（即作為較大文檔的一部分加載的文件）時，應僅使用 HTTP 和 HTTPS 方案。出於安全原因，越來越多的瀏覽器已經停用了使用 FTP 來加載子資源的支援。
+在 {{Glossary("HTML")}} 內容中使用 URL 時，通常只應該使用其中一些 URL 方案。當引用子資源（即作為更大文件一部分加載的檔案）時，應僅使用 HTTP 和 HTTPS 方案。出於安全原因，越來越多的瀏覽器已經停用了使用 FTP 來加載子資源的支援。
-FTP 在頂層（例如直接輸入到瀏覽器的 URL 欄中，或作為鏈接的目標）仍然可以接受，但一些瀏覽器可能將 FTP 內容的加載委派給另一個應用程序。
+FTP 在頂層（例如直接輸入到瀏覽器的 URL 欄中，或作為連結的目標）仍然可以接受，但一些瀏覽器可能將 FTP 內容的加載委派給另一個應用程序。
## 範例
diff --git a/files/zh-tw/web/http/headers/accept-ch-lifetime/index.md b/files/zh-tw/web/http/headers/accept-ch-lifetime/index.md
deleted file mode 100644
index 55bb5203652887..00000000000000
--- a/files/zh-tw/web/http/headers/accept-ch-lifetime/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Accept-CH-Lifetime
-slug: Web/HTTP/Headers/Accept-CH-Lifetime
-l10n:
- sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
----
-
-{{HTTPSidebar}}{{securecontext_header}}{{Deprecated_header}}{{Non-standard_header}}
-
-> **警告：** 在[草案第 8 版](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-08)中，此標頭已经从規範中移除。
-
-**`Accept-CH-Lifetime`** 標頭由伺服器設置，用於指定使用 {{HTTPHeader("Accept-CH")}} 所指定的[用戶端提示標頭](/zh-TW/docs/Web/HTTP/Client_hints)的持久性，用戶端應該在後續請求中包括這些標頭。
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row">標頭類型</th>
- <td>{{Glossary("Response header", "回應標頭")}}</td>
- </tr>
- <tr>
- <th scope="row">{{Glossary("Forbidden header name", "禁止修改的標頭")}}</th>
- <td>否</td>
- </tr>
- <tr>
- <th scope="row">
- {{Glossary("CORS-safelisted response header", "CORS 安全清單回應標頭")}}
- </th>
- <td>否</td>
- </tr>
- </tbody>
-</table>
-
-> **備註：** 用戶端提示僅在安全來源（透過 TLS）上可訪問。應該對所有安全請求持久化 {{HTTPHeader("Accept-CH")}} 和 {{HTTPHeader("Accept-CH-Lifetime")}} 標頭，以確保可靠地發送用戶端提示。
-
-## 語法
-
-```http
-Accept-CH-Lifetime: <age>
-```
-
-## 範例
-
-```http
-Accept-CH: Viewport-Width
-Accept-CH-Lifetime: 86400
-```
-
-## 瀏覽器相容性
-
-{{Compat}}
-
-## 參見
-
-- {{HTTPHeader("Accept-CH")}}
-- {{HTTPHeader("Vary")}}
diff --git a/files/zh-tw/web/http/headers/accept-ch/index.md b/files/zh-tw/web/http/headers/accept-ch/index.md
index 6e5526dc20047a..ad25d2730fb7b2 100644
--- a/files/zh-tw/web/http/headers/accept-ch/index.md
+++ b/files/zh-tw/web/http/headers/accept-ch/index.md
@@ -28,7 +28,7 @@ l10n:
</tbody>
</table>
-> **備註：** 用戶端提示僅在安全來源（通過 TLS）上可訪問。應該對所有安全請求持久化 `Accept-CH`（和 `Accept-CH-Lifetime`）標頭，以確保可靠地發送用戶端提示。
+> **備註：** 用戶端提示僅在安全來源（通過 TLS）上可訪問。應該對所有安全請求持久化 `Accept-CH` 標頭，以確保可靠地發送用戶端提示。
## 語法
diff --git a/files/zh-tw/web/javascript/reference/errors/unexpected_type/index.md b/files/zh-tw/web/javascript/reference/errors/unexpected_type/index.md
index 07e2560d0bbfda..aed52269fbef51 100644
--- a/files/zh-tw/web/javascript/reference/errors/unexpected_type/index.md
+++ b/files/zh-tw/web/javascript/reference/errors/unexpected_type/index.md
@@ -3,6 +3,8 @@ title: 'TypeError: "x" is (not) "y"'
slug: Web/JavaScript/Reference/Errors/Unexpected_type
---
+{{jsSidebar("Errors")}}
+
## 錯誤類型
{{jsxref("TypeError")}}
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/entries/index.md b/files/zh-tw/web/javascript/reference/global_objects/object/entries/index.md
new file mode 100644
index 00000000000000..c73431294540db
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/entries/index.md
@@ -0,0 +1,121 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/entries
+l10n:
+ sourceCommit: 4ce6b9526bfa5b44a518e8ecb21a9894973136bd
+---
+
+{{JSRef}}
+
+**`Object.entries()`** 靜態方法回傳給定之物件自己的可枚舉字串以字串為鍵的屬性之鍵值對陣列。
+
+{{EmbedInteractiveExample("pages/js/object-entries.html")}}
+
+## 語法
+
+```js-nolint
+Object.entries(obj)
+```
+
+### 參數
+
+- `obj`
+ - : 一個物件。
+
+### 回傳值
+
+給定之物件自己的可枚舉字串以字串為鍵的屬性之鍵值對陣列。每個鍵值對都是一個包含兩個元素的陣列：第一個元素是屬性鍵（總是字串），第二個元素是屬性值。
+
+## 描述
+
+`Object.entries()` 傳回一個陣列，其元素是與直接在 `object` 上找到的可枚舉字串以字串為鍵的屬性之鍵值對相對應的陣列。這與使用 {{jsxref("Statements/for...in", "for...in")}} 迴圈進行迭代相同，只不過 `for...in` 迴圈也會列舉原型鏈中的屬性。`Object.entries()` 傳回的陣列的順序與 {{jsxref("Statements/for...in", "for...in")}} 迴圈給的順序相同。
+
+如果你只需要屬性鍵，可改用 {{jsxref("Object.keys()")}}。如果你只需要屬性值，可改用 {{jsxref("Object.values()")}}。
+
+## 範例
+
+### 使用 Object.entries()
+
+```js
+const obj = { foo: "bar", baz: 42 };
+console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
+
+const arrayLike = { 0: "a", 1: "b", 2: "c" };
+console.log(Object.entries(arrayLike)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+const randomKeyOrder = { 100: "a", 2: "b", 7: "c" };
+console.log(Object.entries(randomKeyOrder)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getFoo 是不可枚舉的屬性
+const myObj = Object.create(
+ {},
+ {
+ getFoo: {
+ value() {
+ return this.foo;
+ },
+ },
+ },
+);
+myObj.foo = "bar";
+console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
+```
+
+### 在原始值上使用 Object.entries()
+
+非物件參數會被[強制轉換為物件](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object#object_coercion)，而 [`undefined`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/undefined) 和 [`null`](/zh-TW/docs/Web/JavaScript/Reference/Operators/null) 不能被強制轉換為物件，且會先拋出 {{jsxref("TypeError")}}。僅字串可擁有自己的可枚舉屬性，其它所有的[原始值](/zh-TW/docs/Glossary/Primitive) 都會變成空陣列。
+
+```js
+// 字串具有作為可枚舉自身屬性的索引
+console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
+
+// 除 undefined 和 null 之外的其它原始型別沒有自己的屬性
+console.log(Object.entries(100)); // []
+```
+
+### 將 Object 轉換為 Map
+
+{{jsxref("Map/Map", "Map()")}} 建構子接受可迭代的 `entries`。你可以藉由 `Object.entries` 輕鬆地將 {{jsxref("Object")}} 轉換為 {{jsxref("Map")}}：
+
+```js
+const obj = { foo: "bar", baz: 42 };
+const map = new Map(Object.entries(obj));
+console.log(map); // Map(2) {"foo" => "bar", "baz" => 42}
+```
+
+### 迭代 Object
+
+你可以使用[陣列解構](/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#array_destructuring)輕鬆地迭代物件。
+
+```js
+// 使用 for...of 迴圈
+const obj = { a: 5, b: 7, c: 9 };
+for (const [key, value] of Object.entries(obj)) {
+ console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+}
+
+// 使用陣列方法
+Object.entries(obj).forEach(([key, value]) => {
+ console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+});
+```
+
+## 規格
+
+{{Specifications}}
+
+## 瀏覽器相容性
+
+{{Compat}}
+
+## 參見
+
+- [`core-js` 中 `Object.entries` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-object)
+- [屬性的可枚舉性和所有權](/zh-TW/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Object.values()")}}
+- {{jsxref("Object.prototype.propertyIsEnumerable()")}}
+- {{jsxref("Object.create()")}}
+- {{jsxref("Object.fromEntries()")}}
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Map.prototype.entries()")}}
diff --git a/files/zh-tw/web/javascript/reference/index.md b/files/zh-tw/web/javascript/reference/index.md
index 7c43c9ab3c1b4c..c0e24e580e3b7b 100644
--- a/files/zh-tw/web/javascript/reference/index.md
+++ b/files/zh-tw/web/javascript/reference/index.md
@@ -158,7 +158,6 @@ slug: Web/JavaScript/Reference
- {{jsxref("Statements/do...while", "do...while")}}
- {{jsxref("Statements/for", "for")}}
-- {{jsxref("Statements/for_each...in", "for each...in")}}
- {{jsxref("Statements/for...in", "for...in")}}
- {{jsxref("Statements/for...of", "for...of")}}
- {{jsxref("Statements/for-await...of", "for await...of")}}
diff --git a/files/zh-tw/web/javascript/reference/operators/delete/index.md b/files/zh-tw/web/javascript/reference/operators/delete/index.md
index 8f25d58672c6dc..e9f998dc6ff981 100644
--- a/files/zh-tw/web/javascript/reference/operators/delete/index.md
+++ b/files/zh-tw/web/javascript/reference/operators/delete/index.md
@@ -3,6 +3,8 @@ title: 屬性的刪除
slug: Web/JavaScript/Reference/Operators/delete
---
+{{jsSidebar("Operators")}}
+
你可以使用 `delete` 運算子移除屬性。下面的代碼示範如何移除屬性︰
```js
diff --git a/files/zh-tw/web/javascript/reference/statements/for/index.md b/files/zh-tw/web/javascript/reference/statements/for/index.md
index 379b1daa093077..669efb0bbf66cd 100644
--- a/files/zh-tw/web/javascript/reference/statements/for/index.md
+++ b/files/zh-tw/web/javascript/reference/statements/for/index.md
@@ -3,6 +3,8 @@ title: for 語法
slug: Web/JavaScript/Reference/Statements/for
---
+{{jsSidebar("Statements")}}
+
`for` 循環反覆執行直到指定的條件的求值為 false 為止。JavaScript 的 for 循環和 Java 和 C 的 for 循環很類似。`for` 語法如下︰
```js
diff --git a/files/zh-tw/web/javascript/reference/statements/try...catch/index.md b/files/zh-tw/web/javascript/reference/statements/try...catch/index.md
index 1b552e6a645bea..5adf1dda6015e9 100644
--- a/files/zh-tw/web/javascript/reference/statements/try...catch/index.md
+++ b/files/zh-tw/web/javascript/reference/statements/try...catch/index.md
@@ -3,6 +3,8 @@ title: try...catch 語法
slug: Web/JavaScript/Reference/Statements/try...catch
---
+{{jsSidebar("Statements")}}
+
`try...catch` 語法標記出一整塊需要測試的語句，並指定一個以上的回應方法，萬一有例外拋出時，`try...catch` 語句就會捕捉。
`try...catch` 語法由 `try` 區塊所組成，其中內含一個以上的語句，和零個以上的 `catch` 區塊，其中內含語句用來指明當例外在 try 區塊裡拋出時要做些什麼。也就是當你希望 `try` 區塊成功，但如果他不成功時，你會想要把控制權移交給 `catch` 區塊。如果任何在 `try` 區塊內部裡的語句（或者在 `try` 區塊內部呼叫的函數裡）拋出例外，控制權將立即轉移給 `catch` 區塊。如果沒有例外從 `try` 區塊裡拋出，就會跳過 `catch` 區塊。`finally` 區塊會在 `try` 或 `catch` 區塊執行之後才執行，但會在 `try...catch` 語法後面的語句之前執行。
diff --git a/files/zh-tw/web/manifest/index.md b/files/zh-tw/web/manifest/index.md
index 02a1a96a8ce849..24545c733b84f6 100644
--- a/files/zh-tw/web/manifest/index.md
+++ b/files/zh-tw/web/manifest/index.md
@@ -3,7 +3,7 @@ title: Web App Manifest
slug: Web/Manifest
---
-{{SeeCompatTable}}
+{{QuickLinksWithSubpages("/zh-TW/docs/Web/Manifest")}}{{SeeCompatTable}}
Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊（像是名稱、作者、圖示、描述）。 manifest 的功用是將 Web 應用程式安裝到設備的主畫面，為使用者提供更快速的訪問和更豐富的體驗。
diff --git a/files/zh-tw/web/mathml/index.md b/files/zh-tw/web/mathml/index.md
index c4b544251ab6ba..30df26263ba53d 100644
--- a/files/zh-tw/web/mathml/index.md
+++ b/files/zh-tw/web/mathml/index.md
@@ -3,6 +3,8 @@ title: MathML
slug: Web/MathML
---
+{{MathMLRef}}
+
**Mathematical Markup Language (MathML)** 是一種基於 [XML](/zh-TW/docs/XML) 的延伸，可以用來描述數學符號以及保留數學式結構和內容。在這裡你可以找到參考文件, 範例以及工具。你可以從 [slides for the innovation fairs at Mozilla Summit 2013](http://fred-wang.github.io/MozSummitMathML/index.html) 做個快速的大致瀏覽。
## MathML references
diff --git a/files/zh-tw/web/media/index.md b/files/zh-tw/web/media/index.md
index 764079070b815d..33e594f2de5205 100644
--- a/files/zh-tw/web/media/index.md
+++ b/files/zh-tw/web/media/index.md
@@ -3,6 +3,8 @@ title: Web media technologies
slug: Web/Media
---
+{{QuickLinksWithSubpages("/zh-TW/docs/Web/Media")}}
+
這些年來，網頁來表達，創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的 API 及 HTML 元件，DOM 介面，及其他不止於 發揮傳統效果，還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的 APIs 和連結其詳細資料的超連結，希望你能認為這些資訊能幫你盡快純熟這些技術。
## References
diff --git a/files/zh-tw/web/progressive_web_apps/index.md b/files/zh-tw/web/progressive_web_apps/index.md
index edb3eee1626627..71e5e78a30f755 100644
--- a/files/zh-tw/web/progressive_web_apps/index.md
+++ b/files/zh-tw/web/progressive_web_apps/index.md
@@ -3,6 +3,8 @@ title: 漸進式網路應用程式
slug: Web/Progressive_web_apps
---
+{{PWASidebar}}
+
漸進式網路應用程式（Progressive web app）使用當代 web API，並以漸進增強策略，建立跨平台 web 應用程式。 這些程式提供了能讓用戶體驗，逼近於原生程式的功能。這套文件將講述你需要知道的一切。
## PWA 優勢
diff --git a/files/zh-tw/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md b/files/zh-tw/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
deleted file mode 100644
index 5ab39e32c77989..00000000000000
--- a/files/zh-tw/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: 如何修正含有混合內容的網站
-slug: Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
----
-
-自 [Firefox 23](/zh-TW/docs/Mozilla/Firefox/Releases/23) 起，Firefox 會預設阻擋[主動型混合內容](/zh-TW/docs/Security/MixedContent#Mixed_active_content)。這項動作是跟在 [IE 9](http://blogs.msdn.com/b/ie/archive/2011/06/23/internet-explorer-9-security-part-4-protecting-consumers-from-malicious-mixed-content.aspx) 和 [Chrome](http://googleonlinesecurity.blogspot.com/2011/06/trying-to-end-mixed-scripting.html) 後實行的。
-
-本頁面會告訴你，身為一個網頁開發者需要知道甚麼。
-
-## 你的網站可能出問題了
-
-如果你的網站由 HTTPS 傳輸，那麼本頁所有由 HTTP 接收的[主動型混合內容](/zh-TW/docs/Security/MixedContent#Mixed_active_content)就會被封鎖。你的網站可能就會讓使用者遇到一些問題（像是 iframes 或擴充套件無法載入…之類的）。至於 [被動型混合內容](/zh-TW/docs/Security/MixedContent#Mixed_passivedisplay_content) 預設是會顯示出來的，可是使用者也可以設定將這類內容擋下來。
-
-值得注意的是，由於阻擋混合內容已經在 Chrome 和 Internet Explorer 中實行了，所以如果你的網站已經在這些瀏覽器中出問題，那麼在 Firefox 也很有可能會發生相同情況。
-
-在任何情況下，要知道網站是否出問題的最好方法，就是下載 [最新的 Firefox Developer Edition](https://www.mozilla.org/zh-TW/firefox/developer/)，然後到網站中的不同頁面打開[網頁主控台](/zh-TW/docs/Tools/Web_Console)（要啟用「安全」訊息）、並檢查是否有任何混合內容的回報。也可以用 [SSL-check](http://www.jitbit.com/sslcheck/) or [Missing Padlock](https://www.missingpadlock.com) 這網路爬蟲、或是桌面桌面， [HTTPSChecker](https://httpschecker.net/how-it-works) 來檢查並抓出不安全的內容、另外還有文字介面的工具 [mcdetect](https://github.com/agis/mcdetect)。如果檢查不到任何有關於混和式內容的東西，就代表你的網站狀態良好：繼續建置你出色的網站吧！
-
-## 如何修復你的網站
-
-避免混合內容阻塞最好的方法，就是使用 HTTPS 而不是 HTTP 來傳輸所有的內容。
-
-**對於你自己的域名，**使用 HTTPS 來傳輸所有內容並修正你的連結。一般而言 HTTPS 版本的內容都已經存在了，只需要在連結後面加上「s」：就是將 http\:// 改成 https\:// 。
-
-但有時候，媒體的路徑可能不正確。按照作業系統的不同，你可以使用線上或離線的工具如 [linkchecker](https://wummel.github.io/linkchecker/) 來解決問題。
-
-**對於其他域名，**盡可能使用該網站的 HTTPS 版本。如果 HTTPS 不能用，試著跟域名擁有者聯絡並詢問他們是否可以使用 HTTPS 傳輸內容。
diff --git a/files/zh-tw/web/security/mixed_content/index.md b/files/zh-tw/web/security/mixed_content/index.md
index df59ceb9e326d3..2db8de2dcfca68 100644
--- a/files/zh-tw/web/security/mixed_content/index.md
+++ b/files/zh-tw/web/security/mixed_content/index.md
@@ -3,6 +3,8 @@ title: 混合內容
slug: Web/Security/Mixed_content
---
+{{QuickLinksWithSubpages("/zh-TW/docs/Web/Security")}}
+
當使用者以 {{Glossary("HTTPS")}} 瀏覽網站時，他們與伺服器之間的連線就會以 {{Glossary("TLS")}} 加密，以防受到竊聽或中間人攻擊。一個含有 HTTP 明文內容的 HTTPS 頁面稱為**混合內容（mixed content）**。這種頁面只有部份加密，沒有加密的內容，易於遭到竊聽和中間人攻擊。這會令網頁不安全。
## 混合內容的類型
@@ -63,4 +65,3 @@ Firefox 網頁主控台會在網站含有混合內容時，於「網路」標籤
## 參見
- [Mixed Content - W3C Editor's Draft](https://w3c.github.io/webappsec/specs/mixedcontent/)
-- [如何修正含有混和內容的網站](/zh-TW/docs/Security/MixedContent/How_to_fix_website_with_mixed_content)
diff --git a/files/zh-tw/web/security/same-origin_policy/index.md b/files/zh-tw/web/security/same-origin_policy/index.md
index 39171404b0bb98..1bb0a25efaddf7 100644
--- a/files/zh-tw/web/security/same-origin_policy/index.md
+++ b/files/zh-tw/web/security/same-origin_policy/index.md
@@ -3,6 +3,8 @@ title: 同源政策 (Same-origin policy)
slug: Web/Security/Same-origin_policy
---
+{{QuickLinksWithSubpages("/zh-TW/docs/Web/Security")}}
+
同源政策限制了程式碼和不同網域資源間的互動。
## 同源定義
diff --git a/files/zh-tw/web/security/weak_signature_algorithm/index.md b/files/zh-tw/web/security/weak_signature_algorithm/index.md
index 90d91657a80a43..a1f53b75afd510 100644
--- a/files/zh-tw/web/security/weak_signature_algorithm/index.md
+++ b/files/zh-tw/web/security/weak_signature_algorithm/index.md
@@ -3,6 +3,8 @@ title: 弱簽章演算法
slug: Web/Security/Weak_Signature_Algorithm
---
+{{QuickLinksWithSubpages("/zh-TW/docs/Web/Security")}}
+
### 簽章演算法的重要性
在簽署憑證時，雜湊演算法的完整性是非常重要的一環。雜湊演算法的漏洞可能導致攻擊者獲取假造的憑證。隨著科技發展出現更多可行的攻擊新手法，並不建議繼續使用舊的演算法，且這些演算法最終該被移除。
diff --git a/files/zh-tw/webassembly/c_to_wasm/index.md b/files/zh-tw/webassembly/c_to_wasm/index.md
new file mode 100644
index 00000000000000..c9d80d8a5b9901
--- /dev/null
+++ b/files/zh-tw/webassembly/c_to_wasm/index.md
@@ -0,0 +1,174 @@
+---
+title: 從 C/C++ 編譯 WebAssembly
+slug: WebAssembly/C_to_Wasm
+---
+
+{{WebAssemblySidebar}}
+
+當你使用 C/C++ 之類的語言編寫模組時，你可以使用 [Emscripten](https://emscripten.org/) 等工具將它編譯成 WebAssembly。讓我們來看看它是如何做到的。
+
+## Emscripten 環境配置
+
+首先，讓我們來配置所需要的開發環境。
+
+### 所需條件
+
+利用這些說明，取得 Emscripten SDK：<https://emscripten.org/docs/getting_started/downloads.html>
+
+## 編譯範例
+
+環境配置完畢了，讓我們看看如何使用它將 C 的程式編譯成 Wasm。使用 Emscripten 來編譯的時候，有很多種不同的作法。其中，主要有 2 種：
+
+- 編譯到 Wasm 並且產生一個用來運行我們的程式的 HTML，並引入所有 Wasm 在 web 環境下運行所需要的 JavaScript 膠水程式碼。
+- 編譯到 Wasm，並僅僅生成 JavaScript。
+
+讓我們逐一檢視。
+
+### 生成 HTML 和 JavaScript
+
+我們先來看一個最簡單的例子，利用 Emscripten 來將程式碼轉為 WebAssembly，以便在瀏覽器上運行。
+
+1. 首先我們需要一段能夠編譯的範例程式碼。將下方的 C 程式碼複製一份，命名為 `hello.c` 並儲存到一個新的資料夾。
+
+ ```cpp
+ #include <stdio.h>
+
+ int main() {
+ printf("Hello World\n");
+ return 0;
+ }
+ ```
+
+2. 現在，使用一個已經配置完 Emscripten 編譯環境的終端機窗口，進入剛剛儲存 `hello.c` 的資料夾中，執行下列指令：
+
+ ```bash
+ emcc hello.c -o hello.html
+ ```
+
+下面列出了我們指令中選項的細節：
+
+- `-o hello.html`——指定這個選項將會生成 HTML 頁面來運行我們的程式，並且會產生 Wasm 模組，編譯和實例化 Wasm 模組所需要的 JavaScript 膠水程式碼，讓程式能直接在 web 環境使用。
+
+這個時候在你的原始碼資料夾應該有下列文件：
+
+- `hello.wasm` 二進制的 Wasm 模組程式碼
+- `hello.js` 一個包含了用來在原生 C 函數和 JavaScript/Wasm 之間轉換的膠水程式碼的 JavaScript 檔案
+- `hello.html` 一個用來加載、編譯、實例化你的 Wasm 程式，並將它輸出在瀏覽器顯示上的 HTML 檔案
+
+### 運行你的範例
+
+現在只要使用一個支援 WebAssembly 的瀏覽器，加載產生的 `hello.html` 即可。自從 Firefox 52、Chrome 57、Edge 57 和 Opera 44 開始，已經預設啟用了 WebAssembly。
+
+> **備註：** 如果你試圖直接從本機硬碟打開產生的 HTML 檔案（`hello.html`）（例如 `file://your_path/hello.html`），你會得到一個錯誤訊息，_`both async and sync fetching of the wasm failed`_。你需要藉由 HTTP 伺服器（`http://`）來執行你的 HTML 檔案——參見[如何設定本機測試伺服器？](/zh-TW/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)來取得更多資訊。
+
+如果一切順利，你應該可以在網頁上的 Emscripten 控制台和瀏覽器的 JavaScript 控制台中看到「Hello World」的輸出。
+
+恭喜！你已經成功將 C 程式碼編譯成 WebAssembly 並且在瀏覽器中執行了！
+
+## 使用自訂的 HTML 模板
+
+有些時候你可能想要使用一個自訂的 HTML 模板。讓我們看看怎麼做到。
+
+1. 首先，在一個新資料夾中將以下 C 代碼儲存到 `hello2.c` 中：
+
+ ```cpp
+ #include <stdio.h>
+
+ int main() {
+ printf("Hello World\n");
+ return 0;
+ }
+ ```
+
+2. 在 emsdk 中搜尋一個叫做 `shell_minimal.html` 的檔案，複製到剛剛創建的目錄下的 `html_template` 資料夾。
+
+3. 現在進入你的新目錄（同樣地，使用 Emscripten 編譯器環境的終端機窗口），然後運行下面的指令：
+
+ ```bash
+ emcc -o hello2.html hello2.c -O3 --shell-file html_template/shell_minimal.html
+ ```
+
+ 這次使用的選項略有不同：
+
+ - 我們使用了 `-o hello2.html`，這意味著編譯器仍將輸出 JavaScript 和 HTML 檔案。
+ - 我們也使用了 `-O3` 用來優化編譯程式的。Emcc 像其他的 C 編譯器一樣，也有編譯優化的選項：`-O0`（不進行優化）、`-O1`、`-O2`、`-Os`、`-Oz`、`-Og` 和 `-O3`。`-O3` 是適合發行版本的優化設定。
+ - 我們還使用了 `--shell-file html_template/shell_minimal.html`，這指定了你要運行的範例使用的 HTML 頁面模板。
+
+4. 下面讓我們來運行這個例子。上面的指令已經產生了 `hello2.html`，內容和我們使用的模板非常相像，只不過多加了一些 JavaScript 膠水程式碼和加載 Wasm 程式的程式碼。在瀏覽器中打開它，你會看到與上一個範例相同的輸出。
+
+> **備註：** 你可以在 `-o` 選項中指定 .js 檔案而不是 HTML 檔案，例如 `emcc -o hello2.js hello2.c -O3`，從而只輸出 JavaScript 膠水程式碼，而不是完整的 HTML 檔案。這樣，你就可以完全從頭開始建立自訂 HTML，儘管這是一種進階用法；使用提供的 HTML 模板通常會更簡單。
+>
+> - Emscripten 需要大量的 JavaScript 膠水程式碼來處理記憶體分配、記憶體洩漏等一系列問題
+
+## 調用一個定義在 C 中的自訂方法
+
+如果要調用一個在 C 語言自訂的函式，你可以使用 Emscripten 中的 `ccall()` 函式，以及 `EMSCRIPTEN_KEEPALIVE` 宣告，從而將你的函式添加到導出函式列表中（詳見[為什麼當我要將 C/C++ 編譯成 JavaScript 時，原始碼中的函式會消失且／或沒有函式可以處理？](https://emscripten.org/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-webassembly)）。
+
+讓我們看看這是怎麼實現的。
+
+1. 首先，將以下程式碼在新資料夾中儲存為 `hello3.c`：
+
+ ```cpp
+ #include <stdio.h>
+ #include <emscripten/emscripten.h>
+
+ int main() {
+ printf("Hello World\n");
+ return 0;
+ }
+
+ #ifdef __cplusplus
+ #define EXTERN extern "C"
+ #else
+ #define EXTERN
+ #endif
+
+ EXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char ** argv) {
+ printf("MyFunction Called\n");
+ }
+ ```
+
+ 預設情況下，Emscripten 生成的程式只會調用 `main()` 函式，其他的函式將被無視。在函式名稱之前添加 `EMSCRIPTEN_KEEPALIVE` 能夠防止這樣的事情發生。你需要導入 `emscripten.h` 來使用 `EMSCRIPTEN_KEEPALIVE`。
+
+ > **備註：** 我們使用了 `#ifdef`，來使得你在引用這段 C++ 程式時，這個範例一樣會運作。由於 C 與 C++ 中名字修飾規則的差異，這有可能發生問題，但目前我們這樣設定能保證你使用 C++ 時，這些代碼會被視為外部 C 語言函式。
+
+2. 為了方便起見，現在將 `html_template/shell_minimal.html` 也添加到這一資料夾（但在實際開發環境中你肯定需要將其放到某一特定位置）。
+
+3. 運行以下指令編譯。請注意，我們需要使用 `NO_EXIT_RUNTIME` 來進行編譯。否則，當 `main()` 退出時，程式將被關閉，無法繼續調用編譯後的程式碼。這對於正確模擬 C 語言是必要的：例如，確保 [`atexit()`](https://zh.cppreference.com/w/c/program/atexit) 函式被調用。
+
+ ```bash
+ emcc -o hello3.html hello3.c --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"
+ ```
+
+4. 如果你在瀏覽器中在此加載實例，你將看到和之前相同的結果。
+
+5. 現在我們需要運行新的 `myFunction()` JavaScript 函數。
+
+6. 首先，在 `<script type='text/javascript'>` 開頭標籤之前，依照以下範例添加一個 {{htmlelement("button")}}。
+
+ ```html
+ <button id="mybutton">Run myFunction</button>
+ ```
+
+7. 在第一個 {{htmlelement("script")}} 元素（位於 `</script>` 關閉標籤前）中添加以下程式碼：
+
+ ```js
+ document.getElementById("mybutton").addEventListener("click", () => {
+ alert("check console");
+ const result = Module.ccall(
+ "myFunction", // C 函式的名稱
+ null, // 回傳值的類型
+ null, // 引數的類型
+ null, // 引數
+ );
+ });
+ ```
+
+以上就是如何使用 `ccall()` 調用來導出的函數的方式。
+
+## 參見
+
+- [emscripten.org](http://emscripten.org/)——了解更多有關 Emscripten 和其各種不同的設定
+- [利用 ccall/cwrap 從 JavaScript 調用編譯過的 C 函式](https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap)
+- [為什麼當我要將 C/C++ 編譯成 JavaScript 時，原始碼中的函式會消失且／或沒有函式可以處理？](https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process)
+- [將現成的 C 模組編譯為 WebAssembly](/zh-TW/docs/WebAssembly/existing_C_to_wasm)
diff --git a/package.json b/package.json
index 4f7d8ecf661d32..5117f2bf53c763 100644
--- a/package.json
+++ b/package.json
@@ -27,18 +27,18 @@
"node": ">=18.0.0"
},
"dependencies": {
- "autocorrect-node": "2.10.0",
+ "autocorrect-node": "2.11.1",
"cld": "^2.9.1",
"fdir": "^6.1.1",
"front-matter": "^4.0.2",
"husky": "9.0.11",
- "lint-staged": "15.2.5",
+ "lint-staged": "15.2.7",
"markdown-it": "^14.1.0",
"markdownlint-cli2": "0.13.0",
"markdownlint-rule-search-replace": "1.2.0",
"mdast-util-from-markdown": "^2.0.1",
"ora": "^8.0.1",
- "prettier": "3.2.5",
+ "prettier": "3.3.2",
"unist-util-visit": "^5.0.0",
"yargs": "^17.7.2"
}
diff --git a/yarn.lock b/yarn.lock
index 05e5f9b126f401..503efc9aa116fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -93,41 +93,41 @@ argparse@^2.0.1:
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
-autocorrect-node-darwin-arm64@2.10.0:
- version "2.10.0"
- resolved "https://registry.yarnpkg.com/autocorrect-node-darwin-arm64/-/autocorrect-node-darwin-arm64-2.10.0.tgz#70e5a943c1894a27ec813b68d0be2121b1326437"
- integrity sha512-7wJWVY9KBvWDp+ga0mIW2aeeuEC8YuWk9qZROGz5yyTryxER8iOS/upMFxyamq1DsLuFmndALQTxYMh7qusQVw==
-
-autocorrect-node-darwin-x64@2.10.0:
- version "2.10.0"
- resolved "https://registry.yarnpkg.com/autocorrect-node-darwin-x64/-/autocorrect-node-darwin-x64-2.10.0.tgz#d9e8c964237499bf4a9ebe5558e517adea144799"
- integrity sha512-vBiIxg+1AT9lEK1EgdjnTEks1OPaVKvmLSyqqRug2Ns7tSTt4ZIv4A3XeY7hWwpCTdDDcyie4p/ztpX/pUE0tg==
-
-autocorrect-node-linux-x64-gnu@2.10.0:
- version "2.10.0"
- resolved "https://registry.yarnpkg.com/autocorrect-node-linux-x64-gnu/-/autocorrect-node-linux-x64-gnu-2.10.0.tgz#ec9cc723d5909c110c4a70ad4a3a0be739e95ef8"
- integrity sha512-Yz2PkT2B0Z758dBUxQdGIIxRvHrRcOcr6fd+YdOZ0LqBUupA4mPglEhzhyxh1eE2WLQgbvulHcSetikuSkTEyw==
-
-autocorrect-node-linux-x64-musl@2.10.0:
- version "2.10.0"
- resolved "https://registry.yarnpkg.com/autocorrect-node-linux-x64-musl/-/autocorrect-node-linux-x64-musl-2.10.0.tgz#5d03162433ba8e6053dd882b97dbfe3ea6042720"
- integrity sha512-CTPOoQy9n1kYL5TpKCwsuTLHiRZSqW5u8icDun2A2Mdf8sUcciBm8mcsc/jVtme9t3qCLe5OFYtousJrgiILtQ==
-
-autocorrect-node-win32-x64-msvc@2.10.0:
- version "2.10.0"
- resolved "https://registry.yarnpkg.com/autocorrect-node-win32-x64-msvc/-/autocorrect-node-win32-x64-msvc-2.10.0.tgz#b1eac7058bb1cfa6198d4623425873154f59ba60"
- integrity sha512-Pcgn7jJlCQVSY6Qv7xQ6ZDZa/DDHEqVWYlugaSHtlhs9TUCHzWcDNolK/pubdmxq7LVr8U0bGXsx4ACEhD78BA==
-
-autocorrect-node@2.10.0:
- version "2.10.0"
- resolved "https://registry.yarnpkg.com/autocorrect-node/-/autocorrect-node-2.10.0.tgz#d292d23c61a184deb0f771555b1aa4839a40d896"
- integrity sha512-T4Z/LkeP475pozez7Z1t+ne5I7AG1o8daVWTwD1Jfdb9anspnZyS7rqwOjpBp6aRthRjf8sysCa+9ztDUxK0jQ==
+autocorrect-node-darwin-arm64@2.11.1:
+ version "2.11.1"
+ resolved "https://registry.yarnpkg.com/autocorrect-node-darwin-arm64/-/autocorrect-node-darwin-arm64-2.11.1.tgz#d45d4f804720535bab6a24e695f48d1736e8f398"
+ integrity sha512-7VdYsMAbJuLVHXPM6hv9+Sds91VX55DaMjiVvC6/p/orAg3pIy1wnk2JfJ0GKouKbkOKBp1fT2XFCJXVPBdh5w==
+
+autocorrect-node-darwin-x64@2.11.1:
+ version "2.11.1"
+ resolved "https://registry.yarnpkg.com/autocorrect-node-darwin-x64/-/autocorrect-node-darwin-x64-2.11.1.tgz#09a9c69b1945762bb2eb929fa1eaba728522cb67"
+ integrity sha512-oHiIq+RQm70DfgliW2W5/J8i7ov2cZyyK6l73fHxKOUzwVi7CSxMV6CHnthOZ7yUA07Y2QlFqVyYYPYbMykavA==
+
+autocorrect-node-linux-x64-gnu@2.11.1:
+ version "2.11.1"
+ resolved "https://registry.yarnpkg.com/autocorrect-node-linux-x64-gnu/-/autocorrect-node-linux-x64-gnu-2.11.1.tgz#0d83cd938648ff7ca0046d472ee7c68ff25a50dd"
+ integrity sha512-qWFiur7vXgnMLQ0zLpJ+ZRpBg23FQY0UrWIXgv+5uSVgPIUcDWa78FVpSDVmeWelpP3XTJ4ljUQuuXdok8oQEA==
+
+autocorrect-node-linux-x64-musl@2.11.1:
+ version "2.11.1"
+ resolved "https://registry.yarnpkg.com/autocorrect-node-linux-x64-musl/-/autocorrect-node-linux-x64-musl-2.11.1.tgz#570bf961dbfe1ed6a122ff6025a317bbacb62626"
+ integrity sha512-Hml5ZRdZMqpeM1p/j7TVy6xdv0+I5yxpRBAMCIkYJp6Le/NIz9EkEP9eYFxHOwdL+MexXvOd/1xSeHEjUL6JDw==
+
+autocorrect-node-win32-x64-msvc@2.11.1:
+ version "2.11.1"
+ resolved "https://registry.yarnpkg.com/autocorrect-node-win32-x64-msvc/-/autocorrect-node-win32-x64-msvc-2.11.1.tgz#7a54dc04d53115993bf7a9843d510da0f4f7eca6"
+ integrity sha512-1Cx2iI0eVz/tLyjnkaDx0uH+fXMRxV16tEjbnX0mWPV+LVp2KM5zqYYuzsSkm6f9O6dOFWGUn0ybKZ4QpZb/Dg==
+
+autocorrect-node@2.11.1:
+ version "2.11.1"
+ resolved "https://registry.yarnpkg.com/autocorrect-node/-/autocorrect-node-2.11.1.tgz#5e84f6541a2f62e9eb5858f46d6bcc6f610b5920"
+ integrity sha512-xalvvRcynT9BEKCq05SinOkaoINtmkqWk8qHQMh/R6ZA962we3W+zv1I4Qx6Ac3CcegSbGoJgCcYM59ZABhBNQ==
optionalDependencies:
- autocorrect-node-darwin-arm64 "2.10.0"
- autocorrect-node-darwin-x64 "2.10.0"
- autocorrect-node-linux-x64-gnu "2.10.0"
- autocorrect-node-linux-x64-musl "2.10.0"
- autocorrect-node-win32-x64-msvc "2.10.0"
+ autocorrect-node-darwin-arm64 "2.11.1"
+ autocorrect-node-darwin-x64 "2.11.1"
+ autocorrect-node-linux-x64-gnu "2.11.1"
+ autocorrect-node-linux-x64-musl "2.11.1"
+ autocorrect-node-win32-x64-msvc "2.11.1"
balanced-match@^1.0.0:
version "1.0.2"
@@ -525,10 +525,10 @@ linkify-it@^5.0.0:
dependencies:
uc.micro "^2.0.0"
-lint-staged@15.2.5:
- version "15.2.5"
- resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.2.5.tgz#8c342f211bdb34ffd3efd1311248fa6b50b43b50"
- integrity sha512-j+DfX7W9YUvdzEZl3Rk47FhDF6xwDBV5wwsCPw6BwWZVPYJemusQmvb9bRsW23Sqsaa+vRloAWogbK4BUuU2zA==
+lint-staged@15.2.7:
+ version "15.2.7"
+ resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.2.7.tgz#97867e29ed632820c0fb90be06cd9ed384025649"
+ integrity sha512-+FdVbbCZ+yoh7E/RosSdqKJyUM2OEjTciH0TFNkawKgvFp1zbGlEC39RADg+xKBG1R4mhoH2j85myBQZ5wR+lw==
dependencies:
chalk "~5.3.0"
commander "~12.1.0"
@@ -983,10 +983,10 @@ pidtree@~0.6.0:
resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
-prettier@3.2.5:
- version "3.2.5"
- resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
- integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+prettier@3.3.2:
+ version "3.3.2"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
+ integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
punycode.js@^2.3.1:
version "2.3.1"
]]></plaintext></https:></span></div></div></td></tr></tbody></table></flex></flex></xsl:with-param></xsl:choose></xsl:when></xsl:variable></xsl:value-of></xsl:stylesheet></xsl:transform></xsl:text></xsl:template></xsl:transform></xsl:stylesheet></xsl:strip-space></xsl:for-each></xsl:apply-templates></xsl:sort></xsl:processing-instruction></xsl:strip-space></xsl:preserve-space></xsl:template></xsl:param></xsl:output></xsl:when></xsl:otherwise></xsl:number></xsl:namespace-alias></xsl:message></xsl:key></xsl:transform></xsl:stylesheet></xsl:import></xsl:include></xsl:include></xsl:import></xsl:otherwise></xsl:when></xsl:choose></xsl:if></xsl:sort></xsl:for-each></xsl:fallback></xsl:element></xsl:decimal-format></xsl:copy></xsl:copy-of></xsl:comment></xsl:choose></xsl:call-template></xsl:attribute></xsl:attribute-set></xsl:apply-templates></xsl:apply-imports></table></missing-glyph></missing-glyph></missing-glyph></glyph></table></glyph></glyph></glyph></table></path></path></missing-glyph></glyph></path></td></tr></div>