diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index ad5291f6fb8ce4..92ee1067e9a079 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1738,7 +1738,7 @@
 /es/docs/Web/API/WindowOrWorkerGlobalScope/caches	/es/docs/Web/API/Window/caches
 /es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/es/docs/Web/API/clearInterval
 /es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/es/docs/Web/API/clearTimeout
-/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/es/docs/Web/API/createImageBitmap
+/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/es/docs/Web/API/Window/createImageBitmap
 /es/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/es/docs/Web/API/Window/fetch
 /es/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/es/docs/Web/API/Window/indexedDB
 /es/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/es/docs/Web/API/Window/isSecureContext
@@ -1767,6 +1767,7 @@
 /es/docs/Web/API/console/timeEnd	/es/docs/Web/API/console/timeEnd_static
 /es/docs/Web/API/console/trace	/es/docs/Web/API/console/trace_static
 /es/docs/Web/API/console/warn	/es/docs/Web/API/console/warn_static
+/es/docs/Web/API/createImageBitmap	/es/docs/Web/API/Window/createImageBitmap
 /es/docs/Web/API/crypto_property	/es/docs/Web/API/Window/crypto
 /es/docs/Web/API/event.defaultPrevented	/es/docs/Web/API/Event/defaultPrevented
 /es/docs/Web/API/event.which	/es/docs/Web/API/UIEvent/which
@@ -2199,13 +2200,17 @@
 /es/docs/Web/HTML/microformatos	/es/docs/Web/HTML/microformats
 /es/docs/Web/HTML/Índice	/es/docs/Web/HTML
 /es/docs/Web/HTTP/Access_control_CORS	/es/docs/Web/HTTP/CORS
+/es/docs/Web/HTTP/Basics_of_HTTP	/es/docs/conflicting/Web/HTTP
 /es/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs	/es/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/es/docs/Web/URI/Schemes/data
 /es/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/es/docs/Web/URI/Schemes/data
 /es/docs/Web/HTTP/Basics_of_HTTP/Datos_URIs	/es/docs/Web/URI/Schemes/data
+/es/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP	/es/docs/Web/HTTP/Evolution_of_HTTP
 /es/docs/Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web	/es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
 /es/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web	/es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
-/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME	/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/es/docs/Web/HTTP/MIME_types
+/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/es/docs/Web/HTTP/MIME_types/Common_types
+/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME	/es/docs/Web/HTTP/MIME_types/Common_types
 /es/docs/Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x	/es/docs/Web/HTTP/Connection_management_in_HTTP_1.x
 /es/docs/Web/HTTP/Peticiones_condicionales	/es/docs/Web/HTTP/Conditional_requests
 /es/docs/Web/HTTP/Sesión	/es/docs/Web/HTTP/Session
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 4c761971946439..3bc79705abf482 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -5472,6 +5472,10 @@
     "modified": "2019-03-23T22:45:47.266Z",
     "contributors": ["julian3xl"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2020-10-15T22:14:17.553Z",
+    "contributors": ["Bumxu"]
+  },
   "Web/API/Window/crypto": {
     "modified": "2020-02-12T20:26:38.795Z",
     "contributors": ["joseluisq", "AlePerez92", "victorjavierss"]
@@ -5767,10 +5771,6 @@
     "modified": "2020-10-15T21:53:36.780Z",
     "contributors": ["juanluisrp", "oderflaj"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2020-10-15T22:14:17.553Z",
-    "contributors": ["Bumxu"]
-  },
   "Web/API/notification/icon": {
     "modified": "2019-03-23T22:59:32.492Z",
     "contributors": ["joxhker"]
@@ -9415,34 +9415,6 @@
       "DavidPeniafiel"
     ]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2020-04-20T02:59:31.392Z",
-    "contributors": [
-      "obed3113",
-      "sanxofon",
-      "Sergio_Gonzalez_Collado",
-      "cissoid"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
-    "modified": "2019-03-23T22:10:11.567Z",
-    "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2019-11-18T08:03:54.325Z",
-    "contributors": [
-      "IsaacAaron",
-      "sanxofon",
-      "Sergio_Gonzalez_Collado",
-      "kevinmont",
-      "juanrarodriguez18",
-      "strattadb"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-02-28T13:10:45.613Z",
-    "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"]
-  },
   "Web/HTTP/CORS": {
     "modified": "2020-08-10T16:23:20.546Z",
     "contributors": [
@@ -9521,6 +9493,10 @@
       "omertafox"
     ]
   },
+  "Web/HTTP/Evolution_of_HTTP": {
+    "modified": "2019-03-23T22:10:11.567Z",
+    "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"]
+  },
   "Web/HTTP/Headers": {
     "modified": "2019-12-10T13:29:15.931Z",
     "contributors": [
@@ -9719,6 +9695,21 @@
     "modified": "2020-10-15T21:59:06.897Z",
     "contributors": ["JulioMoreyra", "francinysalles", "tonialfaro"]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2019-11-18T08:03:54.325Z",
+    "contributors": [
+      "IsaacAaron",
+      "sanxofon",
+      "Sergio_Gonzalez_Collado",
+      "kevinmont",
+      "juanrarodriguez18",
+      "strattadb"
+    ]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:10:45.613Z",
+    "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"]
+  },
   "Web/HTTP/Messages": {
     "modified": "2019-11-12T11:40:26.816Z",
     "contributors": [
@@ -14288,6 +14279,15 @@
       "Nukeador"
     ]
   },
+  "conflicting/Web/HTTP": {
+    "modified": "2020-04-20T02:59:31.392Z",
+    "contributors": [
+      "obed3113",
+      "sanxofon",
+      "Sergio_Gonzalez_Collado",
+      "cissoid"
+    ]
+  },
   "conflicting/Web/HTTP/Basics_of_HTTP/MIME_types": {
     "modified": "2019-01-16T15:43:53.805Z",
     "contributors": [
diff --git a/files/es/web/http/basics_of_http/index.md b/files/es/conflicting/web/http/index.md
similarity index 98%
rename from files/es/web/http/basics_of_http/index.md
rename to files/es/conflicting/web/http/index.md
index 89eb19f963bab5..0725dbfefbb528 100644
--- a/files/es/web/http/basics_of_http/index.md
+++ b/files/es/conflicting/web/http/index.md
@@ -1,6 +1,7 @@
 ---
 title: Conceptos básicos de HTTP
-slug: Web/HTTP/Basics_of_HTTP
+slug: conflicting/Web/HTTP
+original_slug: Web/HTTP/Basics_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/es/web/api/createimagebitmap/index.md b/files/es/web/api/window/createimagebitmap/index.md
similarity index 97%
rename from files/es/web/api/createimagebitmap/index.md
rename to files/es/web/api/window/createimagebitmap/index.md
index 43a86129ef01de..51a5e63062eef2 100644
--- a/files/es/web/api/createimagebitmap/index.md
+++ b/files/es/web/api/window/createimagebitmap/index.md
@@ -1,6 +1,7 @@
 ---
 title: self.createImageBitmap()
-slug: Web/API/createImageBitmap
+slug: Web/API/Window/createImageBitmap
+original_slug: Web/API/createImageBitmap
 ---
 
 {{APIRef("Canvas API")}}
diff --git a/files/es/web/http/basics_of_http/evolution_of_http/index.md b/files/es/web/http/evolution_of_http/index.md
similarity index 99%
rename from files/es/web/http/basics_of_http/evolution_of_http/index.md
rename to files/es/web/http/evolution_of_http/index.md
index 1d38c4992f2ce4..4684d6bcd460c4 100644
--- a/files/es/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/es/web/http/evolution_of_http/index.md
@@ -1,6 +1,7 @@
 ---
 title: Evolución del protocolo HTTP
-slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+slug: Web/HTTP/Evolution_of_HTTP
+original_slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/es/web/http/basics_of_http/mime_types/common_types/index.md b/files/es/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/es/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/es/web/http/mime_types/common_types/index.md
index c4269f6d809c71..0711b60967a996 100644
--- a/files/es/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/es/web/http/mime_types/common_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: Lista completa de tipos MIME
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/es/web/http/basics_of_http/mime_types/index.md b/files/es/web/http/mime_types/index.md
similarity index 99%
rename from files/es/web/http/basics_of_http/mime_types/index.md
rename to files/es/web/http/mime_types/index.md
index 28f0a23f5a016e..73e89a5546e678 100644
--- a/files/es/web/http/basics_of_http/mime_types/index.md
+++ b/files/es/web/http/mime_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: Tipos MIME
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 3179efb3068144..18061dc6907cb1 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -2536,8 +2536,8 @@
 /ja/docs/Tools/Working_with_iframes	https://firefox-source-docs.mozilla.org/devtools-user/working_with_iframes/index.html
 /ja/docs/Tools/about:debugging	https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html
 /ja/docs/Transforming_XML_with_XSLT	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
-/ja/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
-/ja/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+/ja/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
+/ja/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
 /ja/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces	/ja/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
 /ja/docs/Tutorials/Using_CSS_gradients	/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients
 /ja/docs/Upcoming_Firefox_features_for_developers	/ja/docs/Mozilla/Firefox/Releases/4
@@ -3218,7 +3218,7 @@
 /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
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/ja/docs/Web/API/createImageBitmap
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/ja/docs/Web/API/Window/createImageBitmap
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/ja/docs/Web/API/Window/fetch
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/ja/docs/Web/API/Window/indexedDB
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/ja/docs/Web/API/Window/isSecureContext
@@ -3276,6 +3276,7 @@
 /ja/docs/Web/API/console/timeStamp	/ja/docs/Web/API/console/timeStamp_static
 /ja/docs/Web/API/console/trace	/ja/docs/Web/API/console/trace_static
 /ja/docs/Web/API/console/warn	/ja/docs/Web/API/console/warn_static
+/ja/docs/Web/API/createImageBitmap	/ja/docs/Web/API/Window/createImageBitmap
 /ja/docs/Web/API/crypto_property	/ja/docs/Web/API/Window/crypto
 /ja/docs/Web/API/document.URL	/ja/docs/Web/API/Document/URL
 /ja/docs/Web/API/document.activeElement	/ja/docs/Web/API/Document/activeElement
@@ -4145,11 +4146,15 @@
 /ja/docs/Web/HTML/Supported_media_formats	/ja/docs/Web/Media/Formats
 /ja/docs/Web/HTML/Using_HTML5_audio_and_video	/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 /ja/docs/Web/HTML/属性	/ja/docs/Web/HTML/Attributes
+/ja/docs/Web/HTTP/Basics_of_HTTP	/ja/docs/Web/HTTP
 /ja/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs	/ja/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/ja/docs/Web/URI/Schemes/data
 /ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/ja/docs/Web/URI/Schemes/data
+/ja/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP	/ja/docs/Web/HTTP/Evolution_of_HTTP
 /ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web	/ja/docs/Web/URI
-/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/ja/docs/Web/HTTP/MIME_types
+/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/ja/docs/Web/HTTP/MIME_types/Common_types
+/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/ja/docs/Web/HTTP/MIME_types/Common_types
 /ja/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs	/ja/docs/Web/URI/Schemes/resource
 /ja/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)	/ja/docs/Web/HTTP/Cross-Origin_Resource_Policy
 /ja/docs/Web/HTTP/Feature_Policy	/ja/docs/Web/HTTP/Permissions_Policy
@@ -4192,7 +4197,7 @@
 /ja/docs/Web/HTTP/Headers/Feature-Policy/sync-xhr	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Feature-Policy/vr	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Feature-Policy/web-share	/ja/docs/Web/HTTP/Headers/Permissions-Policy/web-share
-/ja/docs/Web/HTTP/Headers/Feature-Policy/xr	/ja/docs/conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
+/ja/docs/Web/HTTP/Headers/Feature-Policy/xr	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Permissions-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Set-Cookie2	/ja/docs/Web/HTTP/Headers/Set-Cookie
@@ -4200,7 +4205,7 @@
 /ja/docs/Web/HTTP/Link_prefetching_FAQ	/ja/docs/Glossary/Prefetch
 /ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file	/ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file
 /ja/docs/Web/HTTP/Public_Key_Pinning	/ja/docs/conflicting/Web/Security/Certificate_Transparency
-/ja/docs/Web/HTTP/Resources_and_URIs	/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+/ja/docs/Web/HTTP/Resources_and_URIs	/ja/docs/Web/HTTP/MIME_types
 /ja/docs/Web/HTTP/Response_codes	/ja/docs/Web/HTTP/Status
 /ja/docs/Web/HTTP/Response_codes/204	/ja/docs/Web/HTTP/Status/204
 /ja/docs/Web/HTTP/Server-Side_Access_Control	/ja/docs/Web/HTTP/CORS
@@ -4701,6 +4706,7 @@
 /ja/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Resources	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/Transforming_XML_with_XSLT/Resources	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
+/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
 /ja/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example	/ja/docs/Web/API/XSLTProcessor
@@ -4892,7 +4898,7 @@
 /ja/docs/XSLT/Transforming_XML_with_XSLT/An_Overview	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/An_Overview
 /ja/docs/XSLT/Transforming_XML_with_XSLT/For_Further_Reading	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading
 /ja/docs/XSLT/Transforming_XML_with_XSLT/Resources	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
-/ja/docs/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+/ja/docs/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
 /ja/docs/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/XSLT/value-of	/ja/docs/Web/XSLT/Element/value-of
 /ja/docs/XSLT:Elements	/ja/docs/Web/XSLT/Element
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index cd2c352fa5268f..63b58c8458fd9c 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13927,6 +13927,10 @@
     "modified": "2020-10-15T22:27:12.990Z",
     "contributors": ["mfuji09"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2020-10-15T22:34:31.000Z",
+    "contributors": ["silverskyvicto"]
+  },
   "Web/API/Window/crypto": {
     "modified": "2020-10-15T21:16:38.249Z",
     "contributors": [
@@ -15161,10 +15165,6 @@
     "modified": "2019-03-23T22:34:47.743Z",
     "contributors": ["yyss"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2020-10-15T22:34:31.000Z",
-    "contributors": ["silverskyvicto"]
-  },
   "Web/API/setInterval": {
     "modified": "2020-10-15T21:15:06.280Z",
     "contributors": [
@@ -21368,22 +21368,6 @@
     "modified": "2020-07-07T14:27:04.565Z",
     "contributors": ["mfuji09", "Uemmra3", "silverskyvicto"]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2019-11-23T23:17:48.338Z",
-    "contributors": ["mfuji09", "silverskyvicto", "cissoid"]
-  },
-  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
-    "modified": "2020-09-25T15:03:35.377Z",
-    "contributors": ["mfuji09", "silverskyvicto", "yyss"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2020-07-24T02:39:26.659Z",
-    "contributors": ["pcw", "mfuji09", "nekottyo", "silverskyvicto", "yyss"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-05-15T22:15:38.965Z",
-    "contributors": ["mfuji09", "chrisdavidmills", "silverskyvicto", "yyss"]
-  },
   "Web/HTTP/Browser_detection_using_the_user_agent": {
     "modified": "2020-11-12T13:14:23.994Z",
     "contributors": ["mfuji09", "negibokken", "silverskyvicto", "karaage-kun"]
@@ -21555,6 +21539,10 @@
     "modified": "2020-10-15T22:27:25.103Z",
     "contributors": ["mfuji09", "Potappo", "shisama", "53able"]
   },
+  "Web/HTTP/Evolution_of_HTTP": {
+    "modified": "2020-09-25T15:03:35.377Z",
+    "contributors": ["mfuji09", "silverskyvicto", "yyss"]
+  },
   "Web/HTTP/Headers": {
     "modified": "2020-04-10T02:46:53.832Z",
     "contributors": ["mfuji09", "ycrack", "yyss", "hamasaki"]
@@ -22060,6 +22048,14 @@
     "modified": "2020-10-15T22:05:39.038Z",
     "contributors": ["mfuji09", "pcw", "kurimaru"]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2020-07-24T02:39:26.659Z",
+    "contributors": ["pcw", "mfuji09", "nekottyo", "silverskyvicto", "yyss"]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-05-15T22:15:38.965Z",
+    "contributors": ["mfuji09", "chrisdavidmills", "silverskyvicto", "yyss"]
+  },
   "Web/HTTP/Messages": {
     "modified": "2020-07-11T01:20:50.882Z",
     "contributors": ["mfuji09", "yyss"]
@@ -29889,10 +29885,6 @@
     "modified": "2019-03-18T20:50:35.199Z",
     "contributors": ["mfuji09", "silverskyvicto"]
   },
-  "Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference": {
-    "modified": "2019-03-18T20:50:35.595Z",
-    "contributors": ["mfuji09", "ExE-Boss", "silverskyvicto", "Mgjbot", "Okome"]
-  },
   "WebAssembly": {
     "modified": "2020-10-15T21:52:54.116Z",
     "contributors": ["mfuji09", "mosh", "ukyo", "silverskyvicto", "dskmori"]
@@ -30296,10 +30288,6 @@
     "modified": "2020-11-30T10:28:22.488Z",
     "contributors": ["chrisdavidmills", "mfuji09", "inkusu"]
   },
-  "conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking": {
-    "modified": "2020-08-12T12:42:41.854Z",
-    "contributors": ["mfuji09", "tamura4278"]
-  },
   "conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain": {
     "modified": "2020-10-21T02:00:03.457Z",
     "contributors": [
@@ -30354,10 +30342,6 @@
     "modified": "2020-10-15T21:36:10.884Z",
     "contributors": ["mfuji09", "silverskyvicto", "hashedhyphen", "clariroid"]
   },
-  "conflicting/Web/XSLT/Transforming_XML_with_XSLT": {
-    "modified": "2019-03-18T20:50:34.704Z",
-    "contributors": ["mfuji09", "silverskyvicto"]
-  },
   "orphaned/Code_snippets/Toolbar": {
     "modified": "2019-03-23T23:46:21.932Z",
     "contributors": ["teoli", "Mgjbot", "Shimono"]
diff --git a/files/ja/mozilla/firefox/releases/128/index.md b/files/ja/mozilla/firefox/releases/128/index.md
index c665e86e7c7931..049e954fff4c82 100644
--- a/files/ja/mozilla/firefox/releases/128/index.md
+++ b/files/ja/mozilla/firefox/releases/128/index.md
@@ -50,7 +50,7 @@ l10n:
 - {{domxref('MediaKeys.getStatusForPolicy()')}} をサポートしました。DRM で保護されたコンテンツを復号するために使用する CDM モジュールが、システムでサポートされる [High-bandwidth Digital Content Protection (HDCP)](https://en.wikipedia.org/wiki/High-bandwidth_Digital_Content_Protection) バージョンのような指定されたポリシー要件に基づく "仮想" キーに暗号化されたメディアの提示を許可するかを確認します。
   これは最適な解像度での再生が許可されるかを、メディアキーセッションを作成したり実際のライセンスを取得したりする必要なく事前に知るためのシンプルな仕組みをアプリケーションに提供します ([Firefox bug 1878714](https://bugzil.la/1878714))。
 - {{domxref('RTCRtpTransceiver.setCodecPreferences()')}} をサポートしました。WebRTC のローカルピアが受信したデータをデコードするために使用できるコーデックを、好みの順番で設定します。ウェブアプリケーションは、リモートピアに好みのコーデックを選択させたり、(再送信、冗長化、前方誤り訂正に使用するものを含む) 特定のコーデックのネゴシエーションを無効にしたりするためにこのメソッドを使用できます ([Firefox bug 1396922](https://bugzil.la/1396922))。
-- {{domxref('ShadowRoot.getHTML()')}}、{{domxref('Element.getHTML()')}} メソッド、およびこれらに関連する {{domxref('ShadowRoot.serializable')}}、{{domxref('HTMLTemplateElement.shadowRootSerializable')}} プロパティを含む、[宣言的なシャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html) のシリアライズをサポートしました。
+- {{domxref('ShadowRoot.getHTML()')}}、{{domxref('Element.getHTML()')}} メソッド、およびこれらに関連する {{domxref('ShadowRoot.serializable')}}、{{domxref('HTMLTemplateElement.shadowRootSerializable')}} プロパティを含む、[宣言的なシャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#html_で宣言的に) のシリアライズをサポートしました。
 - [`CSSPropertyRule`](/ja/docs/Web/API/CSSPropertyRule) インターフェイスをデフォルトで有効にして、CSS の [`@property`](/ja/docs/Web/CSS/@property) アットルールを表すようになりました。このインターフェイスは [`name`](/ja/docs/Web/API/CSSPropertyRule/name)、[`syntax`](/ja/docs/Web/API/CSSPropertyRule/syntax)、[`inherits`](/ja/docs/Web/API/CSSPropertyRule/inherits)、[`initialValue`](/ja/docs/Web/API/CSSPropertyRule/initialvalue) のような、`@property` アットルールを使用して定義した CSS カスタムプロパティの値を取得できます ([Firefox bug 1864818](https://bugzil.la/1864818))。
 - [`registerProperty()`](/ja/docs/Web/API/CSS/registerProperty_static) メソッドをデフォルトで有効にしました。JavaScript で [CSS カスタムプロパティ](/ja/docs/Web/CSS/--*) を定義できます。これは、CSS の `@property` アットルールを使用することに似ています ([Firefox bug 1864818](https://bugzil.la/1864818))。
 
diff --git a/files/ja/mozilla/firefox/releases/130/index.md b/files/ja/mozilla/firefox/releases/130/index.md
index c8dda68123f7cf..a7152e63610e5b 100644
--- a/files/ja/mozilla/firefox/releases/130/index.md
+++ b/files/ja/mozilla/firefox/releases/130/index.md
@@ -14,7 +14,7 @@ l10n:
 ### HTML
 
 - `<details>` 要素の [`name`](/ja/docs/Web/HTML/Element/details#name) 属性で、`<details>` 要素のグループ化が可能になりました。グループの中で同時にひとつの要素だけを開くことができます。これにより、JavaScript を使用せずに排他的なアコーディオンを作成できます ([Firefox bug 1856460](https://bugzil.la/1856460)、[Firefox bug 1909613](https://bugzil.la/1909613))。
-- [シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#attribute_inheritance) における動作など、[`dir`](/ja/docs/Web/HTML/Global_attributes/dir) および [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) [グローバル属性](/ja/docs/Web/HTML/Global_attributes) の継承を改良しました ([Firefox bug 1876163](https://bugzil.la/1876163))。
+- [シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#属性の継承) における動作など、[`dir`](/ja/docs/Web/HTML/Global_attributes/dir) および [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) [グローバル属性](/ja/docs/Web/HTML/Global_attributes) の継承を改良しました ([Firefox bug 1876163](https://bugzil.la/1876163))。
 
 ### CSS
 
diff --git a/files/ja/web/api/htmltemplateelement/index.md b/files/ja/web/api/htmltemplateelement/index.md
index 6d88edbdb3145e..5f5b5453354c82 100644
--- a/files/ja/web/api/htmltemplateelement/index.md
+++ b/files/ja/web/api/htmltemplateelement/index.md
@@ -2,13 +2,18 @@
 title: HTMLTemplateElement
 slug: Web/API/HTMLTemplateElement
 l10n:
-  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
 ---
 
 {{APIRef("Web Components")}}
 
 `HTMLTemplateElement` インターフェイスは、HTML の {{HTMLElement("template")}} 要素の内容にアクセスできるようにします。
 
+> [!NOTE]
+> HTML パーサーは、{{HTMLElement("template")}} 要素を構文解析する際に、その `<template>` 属性に応じて、`HTMLTemplateElement` または {{domxref("ShadowRoot")}} のどちらかを生成する可能性があります。
+> `HTMLTemplateElement` が作成されると、"shadow" 属性がテンプレートから反映されます。
+> しかし、これらは有用ではありません。`HTMLTemplateElement` はシャドウルートではなく、シャドウルートに変更することができないからです。
+
 {{InheritanceDiagram}}
 
 ## インスタンスプロパティ
@@ -17,6 +22,14 @@ _このインターフェイスには {{domxref("HTMLElement")}} から継承し
 
 - {{domxref("HTMLTemplateElement.content", "content")}} {{ReadOnlyInline}}
   - : 読み取り専用の {{domxref("DocumentFragment")}} で、 {{HTMLElement("template")}} 要素のテンプレートの内容を表す DOM サブツリーを返します。
+- {{domxref("HTMLTemplateElement.shadowRootMode", "shadowRootMode")}}
+  - : 文字列で、関連付けられた `<template>` 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性の値を反映します。
+- {{domxref("HTMLTemplateElement.shadowRootDelegatesFocus", "shadowRootDelegatesFocus")}}
+  - : 論理値で、関連付けられた `<template>` 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) 属性の値を反映します。
+- {{domxref("HTMLTemplateElement.shadowRootClonable", "shadowRootClonable")}}
+  - : 論理値で、関連付けられた `<template>` 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性の値を反映します。
+- {{domxref("HTMLTemplateElement.shadowRootSerializable", "shadowRootSerializable")}}
+  - : 論理値で、関連付けられた `<template>` 要素の [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性の値を反映します。
 
 ## インスタンスメソッド
 
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootclonable/index.md b/files/ja/web/api/htmltemplateelement/shadowrootclonable/index.md
new file mode 100644
index 00000000000000..b46ecb04ca3541
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootclonable/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootClonable プロパティ"
+short-title: shadowRootClonable
+slug: Web/API/HTMLTemplateElement/shadowRootClonable
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootClonable`** プロパティは、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable)（`<template>` 要素の属性）
+- [`ShadowRoot.clonable`](/ja/docs/Web/API/ShadowRoot/clonable)
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootdelegatesfocus/index.md b/files/ja/web/api/htmltemplateelement/shadowrootdelegatesfocus/index.md
new file mode 100644
index 00000000000000..31226361dd02d8
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootdelegatesfocus/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootDelegatesFocus プロパティ"
+short-title: shadowRootDelegatesFocus
+slug: Web/API/HTMLTemplateElement/shadowRootDelegatesFocus
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootDelegatesFocus`** は {{domxref("HTMLTemplateElement")}} インターフェイスのプロパティで、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus)（`<template>` 要素の属性）
+- [`ShadowRoot.delegatesFocus`](/ja/docs/Web/API/ShadowRoot/delegatesFocus)
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootmode/index.md b/files/ja/web/api/htmltemplateelement/shadowrootmode/index.md
new file mode 100644
index 00000000000000..d81bdedca424c7
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootmode/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootMode プロパティ"
+short-title: shadowRootMode
+slug: Web/API/HTMLTemplateElement/shadowRootMode
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootMode`** は {{domxref("HTMLTemplateElement")}} インターフェイスのプロパティで、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode)（`<template>` 要素の属性）
+- [`ShadowRoot.mode`](/ja/docs/Web/API/ShadowRoot/mode)
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootserializable/index.md b/files/ja/web/api/htmltemplateelement/shadowrootserializable/index.md
new file mode 100644
index 00000000000000..bc48432baa3ae8
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootserializable/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootSerializable プロパティ"
+short-title: shadowRootSerializable
+slug: Web/API/HTMLTemplateElement/shadowRootSerializable
+l10n:
+  sourceCommit: b9e02b32080fc4e079ed3d0e1ae003cab3b770ad
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootSerializable`** プロパティは、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable)（`<template>` 要素の属性）
+- [`ShadowRoot.serializable`](/ja/docs/Web/API/ShadowRoot/serializable)
diff --git a/files/ja/web/api/shadowroot/adoptedstylesheets/index.md b/files/ja/web/api/shadowroot/adoptedstylesheets/index.md
new file mode 100644
index 00000000000000..e6104bba95493c
--- /dev/null
+++ b/files/ja/web/api/shadowroot/adoptedstylesheets/index.md
@@ -0,0 +1,92 @@
+---
+title: "ShadowRoot: adoptedStyleSheets プロパティ"
+short-title: adoptedStyleSheets
+slug: Web/API/ShadowRoot/adoptedStyleSheets
+l10n:
+  sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
+---
+
+{{APIRef("CSSOM")}}
+
+**`adoptedStyleSheets`** は {{domxref("ShadowRoot")}} インターフェイスのプロパティで、構築されたスタイルシートの配列を設定し、シャドウ DOM サブツリーで使用します。
+
+> [!NOTE]
+> 構築されたスタイルシートは、[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を使用してプログラムで作成されたスタイルシートです（ユーザーエージェントがスクリプトからスタイルシートをインポートする際に作成するスタイルシート、{{HTMLElement('style')}} と {{CSSXref('@import')}} を使用してインポートするスタイルシート、または {{HTMLElement('link')}} を使用してリンクするスタイルシートと比較すると）。
+
+このスタイルシートは、複数の {{domxref("ShadowRoot")}} インスタンスや、親文書にも（ {{domxref("Document.adoptedStyleSheets")}} プロパティを使用して）適用することができます。
+適用されたスタイルシートを変更すると、適用されたすべてのオブジェクトに影響します。
+
+`adoptedStyleSheets` プロパティ内のスタイルシートは、シャドウ DOM の他のスタイルシートとともに考慮されます。
+そのため、最終的な計算結果の CSS を決定する目的では、シャドウ DOM 内の他のスタイルシート ([`ShadowRoot.styleSheets`](/ja/docs/Web/API/ShadowRoot/styleSheets)) の後に追加されたものとみなされます。
+
+[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を使用して作成し、シャドウルートと同じ親文書 ({{domxref("Document")}}) 内のもののみ、このスタイルシートを適用することができます。
+
+## 値
+
+値は {{domxref("CSSStyleSheet")}} インスタンスの配列であり、シャドウルートの親文書 ({{domxref("Document")}}) のコンテキスト内で {{domxref("CSSStyleSheet.CSSStyleSheet()", "CSSStyleSheet()")}} コンストラクターを使用して作成されたものでなければなりません。
+
+配列を変更する必要がある場合は、その場で変更する `push()` のような方法を使用します。{{domxref("CSSStyleSheet")}} インスタンス自体も変更することができ、この変更は、このスタイルシートが採用されている場所すべてに適用されます。
+
+仕様書の以前のバージョンでは、配列は変更することができなかったため、新しいスタイルシートを追加する唯一の方法は、`adoptedStyleSheets` に新しい配列を割り当てることでした。
+
+## 例
+
+### スタイルシートの適用
+
+下記のコードでは、最初のスタイルシートが構築され、その後、{{domxref("CSSStyleSheet.replaceSync()")}} が呼び出されて、シートにルールが追加されます。
+
+```js
+// 空の「構築された」スタイルシートを作成
+const sheet = new CSSStyleSheet();
+// シートにルールを適用
+sheet.replaceSync("a { color: red; }");
+```
+
+次に {{domxref("ShadowRoot")}} を作成し、シートオブジェクトを配列内の `adoptedStyleSheets` に渡します。
+
+```js
+// 文書内の要素を作成し、次にシャドウルートを作成
+const node = document.createElement("div");
+const shadow = node.attachShadow({ mode: "open" });
+
+// シートをシャドウ DOM に適用
+shadow.adoptedStyleSheets = [sheet];
+```
+
+このスタイルシートは、配列に追加した後でも変更することができます。
+次の例では、{{domxref("CSSStyleSheet.insertRule()")}} を使用して、同じスタイルシートに新しいルールを追加しています。
+
+```js
+sheet.insertRule("* { background-color: blue; }");
+// The document will now have blue background.
+```
+
+### 新しいスタイルシートの追加
+
+`adoptedStyleSheets.push()` を使用することで、新しいスタイルシートを文書またはシャドウルートに追加することができます。
+
+```js
+const extraSheet = new CSSStyleSheet();
+extraSheet.replaceSync("p { color: green; }");
+
+// 新しいシートに結合する
+shadow.adoptedStyleSheets.push(extraSheet);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Constructable Stylesheets](https://web.dev/articles/constructable-stylesheets) (web.dev)
+- [シャドウ DOM の使用](/ja/docs/Web/API/Web_components/Using_shadow_DOM)
+- [`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)
+- {{domxref("CSSStyleSheet.replaceSync()")}}
+- {{domxref("CSSStyleSheet.replace()")}}
+- {{domxref("CSSStyleSheet.insertRule()")}}
+- {{domxref("CSSStyleSheet.deleteRule()")}}
diff --git a/files/ja/web/api/shadowroot/clonable/index.md b/files/ja/web/api/shadowroot/clonable/index.md
new file mode 100644
index 00000000000000..7aac326113b640
--- /dev/null
+++ b/files/ja/web/api/shadowroot/clonable/index.md
@@ -0,0 +1,41 @@
+---
+title: "ShadowRoot: clonable プロパティ"
+short-title: clonable
+slug: Web/API/ShadowRoot/clonable
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`clonable`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウルートが複製可能であれば `true` を返し、そうでなければ `false` を返します。
+
+値が `true` の場合、{{domxref("Node.cloneNode()")}} または {{domxref("Document.importNode()")}} で複製されたシャドウホストにはシャドウルートのコピーが含まれます。
+
+既定値は `false` です。
+`true` に設定するには、{{domxref("Element.attachShadow()")}} メソッドの `clonable` オプションを使用するか、またはシャドウルートを宣言的に関連付ける使用される `<template>` 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性を設定します。
+
+## 値
+
+シャドウルートが複製可能であれば `true`、そうでなければ `false` です。
+
+## 例
+
+```js
+const host = document.createElement("div");
+const shadowRoot = host.attachShadow({
+  mode: "open",
+  clonable: true,
+});
+
+shadowRoot.clonable;
+// true
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/shadowroot/delegatesfocus/index.md b/files/ja/web/api/shadowroot/delegatesfocus/index.md
index 3283d521ff23d1..9ae871c425b859 100644
--- a/files/ja/web/api/shadowroot/delegatesfocus/index.md
+++ b/files/ja/web/api/shadowroot/delegatesfocus/index.md
@@ -1,28 +1,39 @@
 ---
-title: ShadowRoot.delegatesFocus
+title: "ShadowRoot: delegatesFocus プロパティ"
+short-title: delegatesFocus
 slug: Web/API/ShadowRoot/delegatesFocus
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
 ---
 
 {{APIRef("Shadow DOM")}}
 
 **`delegatesFocus`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウルートがフォーカスを委任する場合は `true`、そうでなければ `false` を返します。
 
-`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックさると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。
+`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックされるか、ホスト要素に対して `.focus()` が呼び出されると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。
 
-このプロパティの値は {{domxref("Element.attachShadow()")}}) に渡されたオブジェクトの `delegatesFocus` プロパティを使用して設定します。
+キーボードのユーザー（スクリーンリーダーを使用するユーザーも含む）にとっては、フォーカスが特に重要です。 `delegatesFocus` の既定の動作は、最初のフォーカス可能な要素にフォーカスを当てるというものです。これは、その要素がタブ順序の一部として意図されていない場合（例えば、`tabindex="-1"` の要素）や、より「重要な」フォーカス可能な要素に初期フォーカスを当てるべき場合（例えば、最初のテキストフィールドをその前にある「閉じる」ボタンより優先させるなど）には望ましくない場合があります。このような場合、初期フォーカスを受け取る要素に `autofocus` 属性を指定することができます。 `autofocus` 属性は、アクセシビリティに関する課題を引き起こす可能性があるため、使用する際には注意が必要です。例えば、DOM の順序が後にある要素にフォーカスが設定されているために気づかないような重要なコンテンツを回避するといった課題です。
+
+このプロパティ値は、元々、{{domxref("Element.attachShadow()")}} に渡すオブジェクトの `delegatesFocus` プロパティを使用するか、またはシャドウルートを宣言的に作成する際の [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性を使用して設定します。
 
 ### 値
 
+シャドウルートがフォーカスを譲る場合は `true`、そうでない場合は `false`。
+
+## 例
+
 ```js
-let customElem = document.querySelector('my-shadow-dom-element');
+let customElem = document.querySelector("my-shadow-dom-element");
 let shadow = customElem.shadowRoot;
 
-  ...
+// ...
 
 // Does it delegate focus?
 let hostElem = shadow.delegatesFocus;
 ```
 
+`<template>` のドキュメント内の[フォーカスのｐ譲渡を伴う宣言的シャドウ DOM](/ja/docs/Web/HTML/Element/template#フォーカスを譲渡を伴う宣言的シャドウ_dom)の例では、フォーカスを譲ることの効果が示されています。
+
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/shadowroot/fullscreenelement/index.md b/files/ja/web/api/shadowroot/fullscreenelement/index.md
index c99e18aa67a36b..60ae26ce4792c5 100644
--- a/files/ja/web/api/shadowroot/fullscreenelement/index.md
+++ b/files/ja/web/api/shadowroot/fullscreenelement/index.md
@@ -1,19 +1,16 @@
 ---
-title: ShadowRoot.fullscreenElement
+title: "ShadowRoot: fullscreenElement プロパティ"
+short-title: fullscreenElement
 slug: Web/API/ShadowRoot/fullscreenElement
+l10n:
+  sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
 ---
 
 {{APIRef("Shadow DOM")}}
 
 **`fullscreenElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、現在全画面モードで表示されているシャドウツリー内の要素を返します。
 
-## 構文
-
-```js
-shadowRoot.fullscreenElement;
-```
-
-### 値
+## 値
 
 現在全画面モードで表示されている {{domxref('Element')}}、または全画面モードの要素がなければ `null` を返します。
 
diff --git a/files/ja/web/api/shadowroot/host/index.md b/files/ja/web/api/shadowroot/host/index.md
index b12a9737c66b44..156645cf3a3f4e 100644
--- a/files/ja/web/api/shadowroot/host/index.md
+++ b/files/ja/web/api/shadowroot/host/index.md
@@ -1,29 +1,26 @@
 ---
-title: ShadowRoot.host
+title: "ShadowRoot: host プロパティ"
+short-title: host
 slug: Web/API/ShadowRoot/host
+l10n:
+  sourceCommit: 584e1d86cc4d770f43b32ec62613a4840d2821db
 ---
 
 {{APIRef("Shadow DOM")}}
 
-**`host`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、 `ShadowRoot` が取り付けられている DOM 要素の参照を返します。
+**`host`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、 `ShadowRoot` が装着されている DOM 要素の参照を返します。
 
-## 構文
-
-```js
-const someElement = shadowRoot.host;
-```
-
-### 値
+## 値
 
 DOM の {{domxref('Element')}} です。
 
 ## 例
 
 ```js
-let customElem = document.querySelector('my-shadow-dom-element');
+let customElem = document.querySelector("my-shadow-dom-element");
 let shadow = customElem.shadowRoot;
 
-  ...
+// ...
 
 // 後で、元のホスト要素を返す
 let hostElem = shadow.host;
@@ -36,3 +33,10 @@ let hostElem = shadow.host;
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- HTML の [`part`](/ja/docs/Web/HTML/Global_attributes#part) および [`exportparts`](/ja/docs/Web/HTML/Global_attributes#exportparts) 属性
+- HTML の {{HTMLelement("template")}} および {{HTMLElement("slot")}} 要素
+- CSS の {{CSSXref(":host")}}, {{CSSXref(":host_function", ":host()")}}, {{CSSXref(":host-context", ":host-context()")}} 擬似クラス
+- CSS の {{CSSXref("::part")}} および {{CSSXref("::slotted")}} 擬似クラス
diff --git a/files/ja/web/api/shadowroot/index.md b/files/ja/web/api/shadowroot/index.md
index 2fc6c99642de53..95902a04976d28 100644
--- a/files/ja/web/api/shadowroot/index.md
+++ b/files/ja/web/api/shadowroot/index.md
@@ -2,7 +2,7 @@
 title: ShadowRoot
 slug: Web/API/ShadowRoot
 l10n:
-  sourceCommit: 9091d8b54a600e5b751c97b1e47261324ef475d8
+  sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
 ---
 
 {{APIRef('Shadow DOM')}}
@@ -20,8 +20,10 @@ l10n:
 - {{domxref("ShadowRoot.adoptedStyleSheets")}}
   - : シャドウ DOM のサブツリーで使用するために構築されたスタイルシートの配列を追加します。
     これらは、同じ親 {{domxref("Document")}} ノードを共有する他の DOM サブツリーや、文書自身と共有されることがあります。
+- {{domxref("ShadowRoot.clonable")}} {{ReadOnlyInline}}
+  - : 論理値で、シャドウルートがクローン可能であるかどうかを示します。
 - {{domxref("ShadowRoot.delegatesFocus")}} {{ReadOnlyInline}}
-  - : シャドウが取り付けられたときに `delegatesFocus` が設定されていたかどうかを示す論理値を返します（{{domxref("Element.attachShadow()")}} を参照）。
+  - : 論理値で、フォーカスできないノードが選択された場合に、シャドウルートがフォーカスを譲るかどうかを示します。
 - {{DOMxRef("ShadowRoot.fullscreenElement")}} {{ReadOnlyInline}}
   - : このシャドウツリーで現在全画面モードになっている要素です。
 - {{domxref("ShadowRoot.host")}} {{ReadOnlyInline}}
@@ -36,6 +38,12 @@ l10n:
 - {{DOMxRef("ShadowRoot.pointerLockElement")}} {{ReadOnlyInline}}
   - : ポインターがロックされている間、マウスイベントのターゲットとして設定されている {{DOMxRef('Element')}} を返します。
     ロックが保留中か、ポインターがロックされていないか、ターゲットがほかのツリーにある場合は `null` を返します。
+- {{DOMxRef("ShadowRoot.serializable")}} {{ReadOnlyInline}}
+  - : 論理値で、シャドウルートがシリアライズ可能かどうかを示します。
+    要素内のシリアライズ可能なシャドウルートは、[`options.serializableShadowRoots`](/ja/docs/Web/API/Element/getHTML#serializableshadowroots) 引数が `true` に設定されている場合、{{DOMxRef('Element.getHTML()')}} または {{DOMxRef('ShadowRoot.getHTML()')}} によってシリアライズされます。
+    これは、シャドウルートが作成される際に設定されます。
+- {{DOMxRef("ShadowRoot.slotAssignment")}} {{ReadOnlyInline}}
+  - : スロット割り当ての型（`manual` または `named`）を持つ文字列を返します。
 - {{domxref("ShadowRoot.styleSheets")}} {{ReadOnlyInline}}
   - : シャドウツリーに明示的にリンクされている、または埋め込まれている {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。
 
@@ -49,6 +57,8 @@ l10n:
   - : 指定された座標における最上位の要素を返します。
 - {{domxref("ShadowRoot.elementsFromPoint()")}} {{Non-standard_Inline}}
   - : 指定された座標における全要素からなる配列を返します。
+- {{DOMxRef("ShadowRoot.setHTMLUnsafe()")}}
+  - : HTML 文字列を、無害化せずに文書フラグメントとして解析し、シャドウルートに元から存在するサブツリーを置き換えます。HTML 文字列には宣言型のシャドウルートを記載することができます。これは、[`ShadowRoot.innerHTML`](#shadowroot.innerhtml) を使用して設定された HTML のテンプレート要素として解釈されます。
 
 ## イベント
 
diff --git a/files/ja/web/api/shadowroot/mode/index.md b/files/ja/web/api/shadowroot/mode/index.md
index 37071c3aeac35d..dea6b8e4ad0f01 100644
--- a/files/ja/web/api/shadowroot/mode/index.md
+++ b/files/ja/web/api/shadowroot/mode/index.md
@@ -1,41 +1,42 @@
 ---
-title: ShadowRoot.mode
+title: "ShadowRoot: mode プロパティ"
+short-title: mode
 slug: Web/API/ShadowRoot/mode
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
 ---
 
 {{APIRef("Shadow DOM")}}
 
-**`mode`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。
+**`mode`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。
+これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。
 
 シャドウルートの `mode` が "`closed`" であった場合、シャドウルートの内部的な実装は JavaScript からアクセスできず、変更できなくなります。例えば、 {{HTMLElement("video")}} の内部の実装は JavaScript からアクセスも変更もできないのと同様になります。
 
-## 構文
-
-```js
-var mode = shadowRoot.mode;
-```
+このプロパティ値を設定するには、{{domxref("Element.attachShadow()")}} に渡すオブジェクトの `options.mode` プロパティを使用するか、シャドウルートを宣言的に作成する場合は、[`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性を使用します。
 
 ### 値
 
-[`ShadowRootMode`](https://dom.spec.whatwg.org/#enumdef-shadowrootmode) 列挙型で定義された値です。 `open` か `closed` のどちらかです。
+次のどちらかの値を取りうる文字列です。
+
+- `open`
+  - : このシャドウルートの要素は、ルート外の JavaScript からアクセスすることができます。
+- `closed`
+  - : 閉じられたシャドウツリー内のノードは、ルート外の JavaScript でアクセスすることはできません。
 
 ## 例
 
 ```js
-  // アクセスできない closed のシャドウルートを作成します
-  let element = document.createElement("div");
-  element.attachShadow({ mode: "closed" });
-  element.shadowRoot // シャドウルートが closed なので null
-
-  // アクセスできる open のシャドウルートを作成します
-  let element2 = document.createElement("div");
-  element2.attachShadow({ mode: "open" });
-  console.log("The shadow is" + element2.shadowRoot.mode) // "The shadow is open" と出力
-  element2.shadowRoot.innerHTML("
-
-Opened shadow
-
-") // シャドウは open なので、外部からアクセスできます
+// アクセスできない closed のシャドウルートを作成します
+let element = document.createElement("div");
+element.attachShadow({ mode: "closed" });
+element.shadowRoot; // シャドウルートが closed なので null
+
+// アクセスできる open のシャドウルートを作成します
+let element2 = document.createElement("div");
+element2.attachShadow({ mode: "open" });
+console.log(`The shadow is ${element2.shadowRoot.mode}`); // "The shadow is open" と出力
+element2.shadowRoot.textContent("Opened shadow"); // シャドウは open なので、外部からアクセスできる
 ```
 
 ## 仕様書
diff --git a/files/ja/web/api/shadowroot/pictureinpictureelement/index.md b/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
index a0cf6da35a22c0..2de006a59951f6 100644
--- a/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
+++ b/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
@@ -1,19 +1,16 @@
 ---
-title: ShadowRoot.pictureInPictureElement
+title: "ShadowRoot: pictureInPictureElement プロパティ"
+short-title: pictureInPictureElement
 slug: Web/API/ShadowRoot/pictureInPictureElement
+l10n:
+  sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
 ---
 
 {{APIRef("Shadow DOM")}}
 
 **`pictureInPictureElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、このシャドウツリー内で現在、ピクチャインピクチャモードで表示されている要素 ({{domxref("Element")}}) を返します。現在、ピクチャインピクチャモードが使用されていない場合は `null` を返します。
 
-## 構文
-
-```js
-shadowRoot.pictureInPictureElement;
-```
-
-### 値
+## 値
 
 現在ピクチャインピクチャモードになっている {{domxref("Element")}} オブジェクトへの参照、またはピクチャインピクチャモードが現在シャドウツリーで使われていない場合は `null` が返されます。
 
diff --git a/files/ja/web/api/shadowroot/pointerlockelement/index.md b/files/ja/web/api/shadowroot/pointerlockelement/index.md
index 283971be8d9160..cd79d888190211 100644
--- a/files/ja/web/api/shadowroot/pointerlockelement/index.md
+++ b/files/ja/web/api/shadowroot/pointerlockelement/index.md
@@ -1,19 +1,16 @@
 ---
-title: ShadowRoot.pointerLockElement
+title: "ShadowRoot: pointerLockElement プロパティ"
+short-title: pointerLockElement
 slug: Web/API/ShadowRoot/pointerLockElement
+l10n:
+  sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("Pointer Lock API")}}
 
-**`pointerLockElement`** は {{domxref("ShadowRoot")}} インターフェースの読み取り専用プロパティで、ポインターがロックされている間、マウスイベントのターゲットとして設定される要素を提供します。ロックが保留されている場合、ポインタのロックが解除されている場合、ターゲットが別のツリーにある場合は `null` になります。
+**`pointerLockElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、ポインターがロックされている間、マウスイベントのターゲットとして設定される要素を提供します。ロックが保留されている場合、ポインターのロックが解除されている場合、ターゲットが別のツリーにある場合は `null` になります。
 
-## 構文
-
-```js
-shadowRoot.pointerLockElement;
-```
-
-### 値
+## 値
 
 {{domxref("Element")}} または `null` です。
 
diff --git a/files/ja/web/api/url/createobjecturl_static/index.md b/files/ja/web/api/url/createobjecturl_static/index.md
index 8c50d87adbf6cd..1231ff600fb7c6 100644
--- a/files/ja/web/api/url/createobjecturl_static/index.md
+++ b/files/ja/web/api/url/createobjecturl_static/index.md
@@ -3,18 +3,16 @@ title: "URL: createObjectURL() 静的メソッド"
 short-title: createObjectURL()
 slug: Web/API/URL/createObjectURL_static
 l10n:
-  sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839
+  sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
 
-**`URL.createObjectURL()`** 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。
+**`createObjectURL()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。
 
 URL の寿命は、それを作成したウィンドウ内の {{domxref("document")}} と結び付けられています。 新しいオブジェクト URL は、指定された {{domxref("File")}} オブジェクトか {{domxref("Blob")}} オブジェクトを表します。
 
-オブジェクト URL を解放するには、 {{domxref("URL/revokeObjectURL_static", "revokeObjectURL()")}} を呼び出してください。
-
-{{AvailableInWorkers}}
+オブジェクト URL を解放するには、 {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}} を呼び出してください。
 
 > [!NOTE]
 > この機能はメモリーリークを生み出す可能性があるため、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内で利用することは*できません*。
@@ -44,14 +42,14 @@ URL.createObjectURL(object)
 
 すでにオブジェクト URL が生成されている場合でも、 `createObjectURL()` を呼び出す度に、新しいオブジェクト URL が生成されます。 必要がなくなったら {{domxref("URL.revokeObjectURL_static")}} を呼び出して、それぞれを解放してください。
 
-ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリから解放します。しかし、性能とメモリ使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべきです。
+ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリーから解放します。しかし、性能とメモリー使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべきです。
 
 ### メディアストリームのオブジェクト URL の使用
 
 古いバージョンの Media Source 仕様書では、 {{HTMLElement("video")}} 要素にストリームを添付するには {{domxref("MediaStream")}} にオブジェクト URL を生成する必要があるとしてます。 これはもう必要なく、ブラウザーはこのようにする対応を削除してきています。
 
 > [!WARNING]
-> もし {{domxref("URL/createObjectURL_static", "createObjectURL()")}} でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
+> もし `createObjectURL()` でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
 
 ## 仕様書
 
@@ -65,6 +63,6 @@ URL.createObjectURL(object)
 
 - [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications)
 - [オブジェクト URL で画像を表示](/ja/docs/Web/API/File_API/Using_files_from_web_applications#例_オブジェクト_url_で画像を表示)
-- {{domxref("URL.revokeObjectURL_static")}}
+- {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}}
 - {{domxref("HTMLMediaElement.srcObject")}}
 - {{domxref("FileReader.readAsDataURL()")}}
diff --git a/files/ja/web/api/url/index.md b/files/ja/web/api/url/index.md
index bdec1f504d4f73..cd18c88a5adf3c 100644
--- a/files/ja/web/api/url/index.md
+++ b/files/ja/web/api/url/index.md
@@ -2,23 +2,20 @@
 title: URL
 slug: Web/API/URL
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 32305cc3cf274fbfdcc73a296bbd400a26f38296
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`URL`** インターフェイスは、{{glossary("URL", "URL")}} の解釈、構築、正規化、およびエンコードに使用します。 URL のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。
 
 通常、新しい `URL` オブジェクトを作成するにはコンストラクターを呼び出すときに URL を文字列として指定するか、相対 URL とベース URL を指定します。その後、解釈された URL のコンポーネントを簡単に読み取ったり、URL を変更したりすることができます。
 
-ブラウザーがまだ {{domxref("URL.URL", "URL()")}} コンストラクターに対応していない場合は、{{domxref("Window")}} インターフェイスの {{domxref("URL")}} プロパティを使用して URL オブジェクトにアクセスできます。対象とするブラウザーのいずれかに、この接頭辞を付ける必要があるかどうかを確認してください。
-
-{{AvailableInWorkers}}
-
 ## コンストラクター
 
 - {{domxref("URL.URL", "URL()")}}
-  - : 絶対 URL 文字列、または相対 URL 文字列とベース URL 文字列を使用して指定された URL を参照する `URL` オブジェクトを作成して返します。
+  - : `URL` オブジェクトを、URL 文字列とオプションのベース URL 文字列から作成し、それを返します。
+    渡された引数が有効な URL を定義していない場合、例外が発生します。
 
 ## プロパティ
 
@@ -49,12 +46,14 @@ l10n:
 
 ## 静的メソッド
 
-- [`canParse()`](/ja/docs/Web/API/URL/canParse_static)
+- {{domxref("URL.canParse_static", "canParse()")}}
   - : URL 文字列とオプションのベース URL 文字列から定義された URL が解釈可能で有効かどうかを示す論理値を返します。
-- {{domxref("URL/createObjectURL_static", "createObjectURL()")}}
+- {{domxref("URL.createObjectURL_static", "createObjectURL()")}}
   - : 一意の blob URL の入った文字列を返します。 これは、スキームとして `blob:` の入った URL で、その後にブラウザー内のオブジェクトを一意に識別する不透明な文字列が続きます。
-- {{domxref("URL/revokeObjectURL_static", "revokeObjectURL()")}}
-  - : {{domxref("URL.createObjectURL_static")}} を使用して以前に生成したオブジェクト URL を取り消します。
+- {{domxref("URL.parse_static", "parse()")}}
+  - : `URL` オブジェクトを、URL 文字列とオプションのベース URL 文字列から作成して返します。渡された引数が無効な `URL` を定義している場合は、`null` を返します。
+- {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}}
+  - : {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を使用して以前に生成したオブジェクト URL を取り消します。
 
 ## メソッド
 
@@ -74,7 +73,7 @@ console.log(url.pathname); // "/cats"
 ```
 
 コンストラクターは URL を有効な URL に解釈できない場合に例外を発生させます。
-上記のコードを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックの中で呼び出すか、[`canParse()`](/ja/docs/Web/API/URL/canParse_static) 静的メソッドを使って先に URL が有効かどうかをチェックしてください。
+上記のコードを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックの中で呼び出すか、{{domxref("URL.canParse_static", "canParse()")}} 静的メソッドを使って先に URL が有効かどうかをチェックしてください。
 
 ```js
 if (URL.canParse("../cats", "http://www.example.com/dogs")) {
@@ -131,5 +130,4 @@ const response = await fetch(
 - [`URL` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
 - [URL API](/ja/docs/Web/API/URL_API)
 - [URL とは何か](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
-- `URL` オブジェクトを取得するプロパティ: {{domxref("URL")}}
 - {{domxref("URLSearchParams")}}
diff --git a/files/ja/web/api/url/parse_static/index.md b/files/ja/web/api/url/parse_static/index.md
new file mode 100644
index 00000000000000..e19ed3d97e94f5
--- /dev/null
+++ b/files/ja/web/api/url/parse_static/index.md
@@ -0,0 +1,136 @@
+---
+title: "URL: parse() 静的メソッド"
+short-title: parse()
+slug: Web/API/URL/parse_static
+l10n:
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
+---
+
+{{ApiRef("URL API")}}
+
+**`URL.parse()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、引数で定義された {{domxref("URL")}} を表す、新たに作成された URL オブジェクトを返します。
+
+指定されたベース URL または結果の URL が解析可能で有効な URL でない場合、`null` が返されます。
+これは、{{domxref("URL.URL", "URL()")}} コンストラクターを使用することに対する、[try...catch](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロック内で `URL` を構築したり、 {{domxref("URL.canParse_static", "canParse()")}} を使用して引数を調べ、メソッドが `false` を返した場合に `null` を返したりする代替手段です。
+
+## 構文
+
+```js-nolint
+URL.parse(url)
+URL.parse(url, base)
+```
+
+### 引数
+
+- `url`
+  - : 文字列、または{{Glossary("stringifier", "文字列化")}}を持つオブジェクトで、絶対 URL または URL への相対参照を表します。
+    `url` が相対参照の場合、`base` は要求され、最終的な URL を解決するために使用されます。
+    `url` が絶対 URL の場合、指定された `base` は結果の URL を作成するために使用されません。
+- `base` {{optional_inline}}
+
+  - : `url` が相対 URL の場合に利用するベース URL を表す文字列です。
+    指定しない場合、既定では `undefined` となります。
+
+    `base` URL を指定すると、解決された URL は単に `url` と `base` を結合したものではありません。
+    親ディレクトリーおよびカレントディレクトリーへの相対参照は、`base` URL のカレントディレクトリーを基準として解決されます。
+    ルートへの相対参照は、`base` のオリジンを基準として解決されます。 詳細については、[相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)を参照してください。
+
+> **Note:** `url` および `base` 引数は、渡した値が例えば {{domxref("HTMLAnchorElement")}} や {{domxref("HTMLAreaElement")}} 要素など、何であれそれぞれ文字列化されます。文字列を受け入れる他の Web API と同様です。
+> 具体的には、どちらかの引数に既存の {{domxref("URL")}} オブジェクトを使用することができます。そのオブジェクトの {{domxref("URL.href", "href")}} プロパティから文字列化されます。
+
+### 返値
+
+引数が有効な URL に解決できた場合は `URL` です。そうでなければ `null` です。
+
+## 例
+
+[相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)および [`URL()` コンストラクター](/ja/docs/Web/API/URL/URL#examples)の記事には、`url` および `base` 値が最終的な絶対 URL に解決される方法を示す例がもっとあります（主に `URL()` を使用するものですが）。
+
+### URL.parse() の使用
+
+この例では、いくつかの異なる絶対参照値と相対参照値に対して、静的メソッド `URL.parse()` を使用する方法を説明しています。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+最初に、`URL.parse()` メソッドに対応しているかどうかを `"parse" in URL` という条件式でチェックします。
+メソッドが対応している場合、絶対URL、相対参照、ベース URL、より[複雑なベース URL](/ja/docs/Web/API/URL_API/Resolving_relative_references) を持つ相対参照、有効なベース URL を持つ有効な絶対 URL（これは使用されません）、およびメソッドが `null` を返す不正なベース URL のチェック結果をログ出力します。
+
+また、`URL.parse()` に対応していない場合にもログ出力します。
+
+```js-nolint
+if ("parse" in URL) {
+  // Absolute URL
+  let result = URL.parse("https://developer.mozilla.org/ja/docs");
+  log(`[1]: ${result.href}`);
+
+  // 相対参照を有効なベース URL へ
+  result = URL.parse("ja/docs", "https://developer.mozilla.org");
+  log(`[2]: ${result.href}`);
+
+  // 相対参照を「複雑」で有効なベース URL へ
+  // （スキームとドメインのみを使用して URL を解決します）
+  result = URL.parse(
+    "/different/place",
+    "https://developer.mozilla.org:443/some/path?id=4",
+  );
+  log(`[3]: ${result.href}`);
+
+  // 絶対 URL の引数（ベース URL は無視される）
+  result = URL.parse(
+    "https://example.org/some/docs",
+    "https://developer.mozilla.org",
+  );
+  log(`[4]: ${result.href}`);
+
+  // 無効なベース URL（コロンの付け忘れ）
+  result = URL.parse("ja/docs", "https//developer.mozilla.org");
+  log(`[5]: ${result}`);
+} else {
+  log("URL.parse() に対応していません");
+}
+```
+
+最後に、下記のコードでは、`base` 引数に `URL` オブジェクトを渡すとことで、引数が文字列でなくてもよいことを示しています。
+
+```js
+if ("parse" in URL) {
+  // URL オブジェクトとして指定されたベース URL との相対参照
+  result = URL.parse("/ja/docs", new URL("https://developer.mozilla.org/"));
+  log(`[6]: ${result.href}`);
+}
+```
+
+それぞれのチェックを以下に表示します。
+
+{{EmbedLiveSample('URL.parse()', '100%')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`URL()` コンストラクター](/ja/docs/Web/API/URL/URL): 渡された引数が不正な引数を定義している場合は例外が発生します。
+- [`URL.parse()` のポリフィル](https://github.com/zloirock/core-js#url-and-urlsearchparams) が [`core-js`](https://github.com/zloirock/core-js) で利用できます
diff --git a/files/ja/web/api/url/port/index.md b/files/ja/web/api/url/port/index.md
index 3415f48a603f1e..da808a0ce360ba 100644
--- a/files/ja/web/api/url/port/index.md
+++ b/files/ja/web/api/url/port/index.md
@@ -3,17 +3,15 @@ title: "URL: port プロパティ"
 short-title: port
 slug: Web/API/URL/port
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`port`** は {{domxref("URL")}} インターフェイスのプロパティで、この URL のポート番号の入った文字列です。
 
 > **メモ:** [`URL()`](/ja/docs/Web/API/URL/URL) コンストラクターに渡された入力文字列が明示的なポート番号を含んでいないか（例えば `https://localhost`）、入力文字列のプロトコル部分に対応する既定のポート番号を含んでいる場合（例えば `https://localhost:443`）、コンストラクターが返す [`URL`](/ja/docs/Web/API/URL) オブジェクトの port プロパティの値は空文字列 (`''`) になります。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -21,11 +19,25 @@ l10n:
 ## 例
 
 ```js
-const url = new URL("https://example.com:80/svn/Repos/");
-console.log(url.port); // '80' と出力
+// https プロトコルで既定ではないポート番号
+new URL("https://example.com:5443/svn/Repos/").port; // '5443'
+// http プロトコルで既定ではないポート番号
+new URL("http://example.com:8080/svn/Repos/").port; // '8080'
+// https プロトコルで既定のポート番号
+new URL("https://example.com:443/svn/Repos/").port; // ''（空文字列）
+// http プロトコルで既定のポート番号
+new URL("http://example.com:80/svn/Repos/").port; // ''（空文字列）
+// https プロトコルで明示的なポート番号なし
+new URL("https://example.com/svn/Repos/").port; // ''（空文字列）
+// http プロトコルで明示的なポート番号なし
+new URL("https://example.com/svn/Repos/").port; // ''（空文字列）
+// ftp プロトコルで既定ではないポート番号
+new URL("ftp://example.com:221/svn/Repos/").port; // '221'
+// ftp プロトコルで既定のポート番号
+new URL("ftp://example.com:21/svn/Repos/").port; // ''（空文字列）
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url/protocol/index.md b/files/ja/web/api/url/protocol/index.md
index a513138eefc5c3..771c65e5009b79 100644
--- a/files/ja/web/api/url/protocol/index.md
+++ b/files/ja/web/api/url/protocol/index.md
@@ -3,15 +3,13 @@ title: "URL: protocol プロパティ"
 short-title: protocol
 slug: Web/API/URL/protocol
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`protocol`** は {{domxref("URL")}} インターフェイスのプロパティで、最後の `':'` を含む URL のプロトコルスキームを表す文字列です。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -25,7 +23,7 @@ const url = new URL(
 console.log(url.protocol); // "https:" とログ出力
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url/revokeobjecturl_static/index.md b/files/ja/web/api/url/revokeobjecturl_static/index.md
index e4917f08d6b645..2782ae779a4d89 100644
--- a/files/ja/web/api/url/revokeobjecturl_static/index.md
+++ b/files/ja/web/api/url/revokeobjecturl_static/index.md
@@ -3,19 +3,18 @@ title: "URL: revokeObjectURL() 静的メソッド"
 short-title: revokeObjectURL()
 slug: Web/API/URL/revokeObjectURL_static
 l10n:
-  sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
 ---
 
-{{ApiRef("URL API")}}
+{{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
 
-**`URL.revokeObjectURL()`** 静的メソッドは、以前に {{domxref("URL.createObjectURL_static") }} を呼び出して生成された既存のオブジェクト URL を解放します。
+**`revokeObjectURL()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、以前に {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を呼び出して生成された既存のオブジェクト URL を解放します。
 
-オブジェクト URL を使い終わったら、このメソッドを呼び出して、ファイルへの参照をこれ以上保持しないようにブラウザーに知らせます。
-
-{{AvailableInWorkers}}
+オブジェクト URL を使い終わったら、このメソッドを呼び出して、ファイルへの参照をこれ以上保持しないようにブラウザーに知らせてください。
 
 > [!NOTE]
-> このメソッドは、{{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるため、サービスワーカーからは利用できません。
+> このメソッドは、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)からは利用できません。
+> {{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるためです。
 
 ## 構文
 
@@ -26,7 +25,7 @@ URL.revokeObjectURL(objectURL)
 ### 引数
 
 - `objectURL`
-  - : 以前に {{domxref("URL/createObjectURL_static", "createObjectURL()") }} を呼び出して生成されたオブジェクト URL を表す文字列です。
+  - : 以前に {{domxref("URL.createObjectURL_static", "createObjectURL()") }} を呼び出して生成されたオブジェクト URL を表す文字列です。
 
 ### 返値
 
@@ -48,4 +47,4 @@ URL.revokeObjectURL(objectURL)
 
 - [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications)
 - [オブジェクト URL で画像を表示](/ja/docs/Web/API/File_API/Using_files_from_web_applications#例_オブジェクト_url_で画像を表示)
-- {{domxref("URL.createObjectURL_static") }}
+- {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}
diff --git a/files/ja/web/api/url/url/index.md b/files/ja/web/api/url/url/index.md
index 3ee42f49422202..e2a967a8bc3778 100644
--- a/files/ja/web/api/url/url/index.md
+++ b/files/ja/web/api/url/url/index.md
@@ -3,17 +3,15 @@ title: "URL: URL() コンストラクター"
 short-title: URL()
 slug: Web/API/URL/URL
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 5a7fae1cc8df27d50c9365511a714f3c2fa4bfc1
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`URL()`** コンストラクターは、引数によって定義された URL を表す、新しく生成された {{domxref("URL")}} オブジェクトを返します。
 
 与えられたベース URL または結果の URL が有効な URL でない場合、JavaScript の {{jsxref("TypeError")}} 例外が発生します。
 
-{{AvailableInWorkers}}
-
 ## 構文
 
 ```js-nolint
@@ -24,26 +22,35 @@ new URL(url, base)
 ### 引数
 
 - `url`
-  - : 絶対または相対 URL を表す文字列または{{Glossary("stringifier", "文字列化")}}のあるその他のオブジェクト、例えば {{htmlelement("a")}} や {{htmlelement("area")}} 要素です。
-    `url` が相対 URL である場合、`base` は必須であり、ベース URL として使用されます。
-    `url` が絶対 URL である場合、指定された `base` は無視されます。
+  - : 文字列または{{Glossary("stringifier", "文字列化")}}のあるその他のオブジェクトで、絶対またはベース URL に対する相対参照を表します。
+    `url` が相対参照である場合、`base` は必須であり、最終的な URL を解決するために使用されます。
+    `url` が絶対 URL である場合、指定された `base` は結果の URL を作成するためには使用されません。
 - `base` {{optional_inline}}
-  - : `url` が相対 URL の場合に使用するベース URL を表す文字列です。
+
+  - : 文字列で、`url` が相対参照の場合に使用するベース URL を表します。
     指定されなかった場合、既定値は `undefined` です。
 
+    `base` を指定した場合、解決した URL は単に `url` と `base` を結合したものではありません。
+    親ディレクトリーおよびカレントディレクトリーへの相対参照は、`base` URL の最後のスラッシュまでのパス部分をカレントディレクトリーとした相対で解決されます。ただし、最後のスラッシュ以降は含まれません。
+    ルートへの相対参照は、ベースを原点とした相対で解決されます。
+    詳細については、[URL への相対参照の解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)を参照してください。
+
 > [!NOTE]
-> 引数 `url` と `base` はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。
+> 引数 `url` と `base` はそれぞれ、渡された値を何でも、{{domxref("HTMLAnchorElement")}} や {{domxref("HTMLAreaElement")}} であっても文字列化します。これは、文字列を受け入れる他の Web API と同様です。
 > 具体的な例としては、既存の {{domxref("URL")}} オブジェクトをどちらの引数にも使用することができ、そのオブジェクトの {{domxref("URL.href", "href")}} プロパティに文字列化されます。
 
 ### 例外
 
-| 例外                    | 説明                                                                                            |
-| ----------------------- | ----------------------------------------------------------------------------------------------- |
-| {{jsxref("TypeError")}} | `url`（絶対 URL の場合）または `base` + `url`（相対 URL の場合）が、有効な URL ではありません。 |
+- {{jsxref("TypeError")}}
+  - : `url`（絶対 URL の場合）または `base` + `url`（相対 URL の場合）が、有効な URL ではない場合。
 
 ## 例
 
-```js
+コンストラクターを使用する例をいくつか示します。
+
+> **メモ:** [相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)では、さまざまな `url` と `base` 値が最終的な絶対 URL に解決される方法を説明するさらなる例が提供されています。
+
+```js-nolint
 // ベース URL:
 let baseUrl = "https://developer.mozilla.org";
 
@@ -67,9 +74,11 @@ new URL("/ja/docs", A);
 
 new URL("/ja/docs", "https://developer.mozilla.org/fr-FR/toto");
 // => 'https://developer.mozilla.org/ja/docs'
+```
 
-// 無効な URL:
+こちらは無効な URL の例です。
 
+```js
 new URL("/ja/docs", "");
 // Raises a TypeError exception as '' is not a valid URL
 
@@ -104,5 +113,6 @@ new URL("//foo.com", "https://example.com");
 
 ## 関連項目
 
+- {{domxref("URL.parse_static", "URL.parse()")}}: 例外を発生しないこのコンストラクターの代用
 - [`URL` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
-- 所属しているインターフェース: {{domxref("URL")}}。
+- 所属しているインターフェイス: {{domxref("URL")}}
diff --git a/files/ja/web/api/url/username/index.md b/files/ja/web/api/url/username/index.md
index d89a535a6e37fa..4ae87bf8e48b10 100644
--- a/files/ja/web/api/url/username/index.md
+++ b/files/ja/web/api/url/username/index.md
@@ -3,15 +3,13 @@ title: "URL: username プロパティ"
 short-title: username
 slug: Web/API/URL/username
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`username`** は {{domxref("URL")}} インターフェイスのプロパティで、ドメイン名の前に指定されたユーザー名をの入った文字列です。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -25,7 +23,7 @@ const url = new URL(
 console.log(url.username); // "anonymous" とログ出力
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url_api/resolving_relative_references/index.md b/files/ja/web/api/url_api/resolving_relative_references/index.md
new file mode 100644
index 00000000000000..83fab003471d2e
--- /dev/null
+++ b/files/ja/web/api/url_api/resolving_relative_references/index.md
@@ -0,0 +1,164 @@
+---
+title: 相対参照の URL への解決
+slug: Web/API/URL_API/Resolving_relative_references
+l10n:
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
+---
+
+{{DefaultAPISidebar("URL API")}}
+
+[`URL()` コンストラクター](/ja/docs/Web/API/URL/URL)、または {{domxref("URL.parse_static", "URL.parse()")}} 静的メソッド ([URL API](/ja/docs/Web/API/URL_API)) を使用すると、相対参照とベース URL を絶対 URL に解決することができます。
+
+どちらのメソッドも、最大 2 つの文字列引数を取り、絶対 URL を表す [`URL()`](/ja/docs/Web/API/URL) オブジェクトを返します。
+最初の引数は絶対 URL または URL への相対参照を表し、2 番目の引数は、最初の引数に相対参照が指定されている場合にその相対参照を解決するために使用されるベース URL です。
+これらのメソッドは、無効な URL が渡されると `URL()` コンストラクターがエラーを発生させるのに対し、`parse()` は `null` を返すという点を除いて、同じ方法で相対参照を解決します。
+
+下記コードは、同じ `url` および `base` URL 値を使用してメソッドがどのように使用されるかを示しています。
+
+```js
+const url = "articles";
+const base = "https://developer.mozilla.org/some/path";
+const constructorResult = new URL(url, base);
+// => https://developer.mozilla.org/some/articles
+const parseResult = URL.parse(url, base);
+// => https://developer.mozilla.org/some/articles
+```
+
+例えば、指定されたベース URL と相対参照から `URL` を解決することは、単純に指定された引数を結合するだけではないことが分かります。
+
+この場合、カレントディレクトリーに相対するパス (`articles`) が渡されます。
+ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列です。
+この例では、`https://developer.mozilla.org/some/path` の末尾にスラッシュが指定されていないため、カレントディレクトリーは `https://developer.mozilla.org/some/` となり、最終的な URL は `https://developer.mozilla.org/some/articles` となります。
+
+相対参照は、カレントディレクトリー (`./`)、カレントディレクトリーの親ディレクトリー (`../`)、またはサイトルート (`/`) に対する相対パス参照を使用して、ベース URL に対して解決されます。
+以下の章では、相対パスの各タイプについて、解決の作業方法を表示させます。
+
+## カレンとディレクトリーからの相対
+
+`./` で始まる相対参照、または接頭辞のない参照、例えば `./article`、`article`、`./article/` は、`base` 引数で表される URL のカレントディレクトリーに対する相対参照です。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 90px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列であり、下記コードブロックのベース文字列どちらも `https://test.example.org/api/` です。
+カレントディレクトリーから相対参照する `article` がこれに追加され、`https://test.example.org/api/article` に解決されます。
+
+```js
+log(new URL("./article", "https://test.example.org/api/").href);
+// => https://test.example.org/api/article
+log(new URL("article", "https://test.example.org/api/v1").href);
+// => https://test.example.org/api/article
+```
+
+同様に、下記どちらのベース URL 文字列も、カレンとディレクトリーは `https://test.example.org/api/v2/` です。
+最終的な URL を解決するために、これらに `story/` と `story` を追加します。
+
+```js
+log(new URL("./story/", "https://test.example.org/api/v2/").href);
+// => https://test.example.org/api/v2/story/
+log(new URL("./story", "https://test.example.org/api/v2/v3").href);
+// => https://test.example.org/api/v2/story
+```
+
+{{EmbedLiveSample('Current directory relative', '100%', '140px')}}
+
+## 親ディレクトリーからの相対
+
+`../` という接頭辞が付いた相対参照、例えば `../path` は、`base` 引数で表される URL の現在のディレクトリーの親ディレクトリーに対する相対参照です。
+`../` の各インスタンスは現在のディレクトリーからフォルダー内を削除し、`../` 以降のテキストは残りのベースパスに追加されます。
+`../` を複数回指定することで親ディレクトリーに移動できますが、サイトルートのレベルまでです。
+
+例えば、ベース URL `https://test.example.com/test/api/v1/` とその親の相対 URL `../some/path` が指定された場合、カレントディレクトリーは `https://test.example.com/test/api/v1/`、親ディレクトリーは `https://test.example.com/test/api/`、解決された絶対 URL は `https://test.example.com/test/api/some/path` となります。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 80px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+次の例では、この点をより詳しく説明します。
+すべてのケースにおいて、カレントディレクトリーは `https://test.example.org/api/v1/v2/` です（2 つ目のケースでは、`v3` が最後のスラッシュの後に続きます）。相対参照はそれぞれ異なる親ディレクトリを指します。
+
+```js
+log(new URL("../path", "https://test.example.org/api/v1/v2/").href);
+// => https://test.example.org/api/v1/path
+log(new URL("../../path", "https://test.example.org/api/v1/v2/v3").href);
+// => https://test.example.org/api/path
+log(new URL("../../../../path", "https://test.example.org/api/v1/v2/").href);
+// => https://test.example.org/path
+```
+
+{{EmbedLiveSample('Parent-directory relative', '100%')}}
+
+## ルートからの相対
+
+`/` 接頭辞付きの相対参照、たとえば `/path` は、`base` 引数で指定された URL のサイトルートに対する相対パスとなります。
+例えば、ベース URL が `https://test.example.com/api/v1` の場合、ルート相対 URL `/some/path` の解決後の URL は `https://test.example.com/some/path` となります。
+
+> [!NOTE]
+> ルート相対 URL を解決すると、`base` URL のパス部分は関係なくなります。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 80px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+以下に、いくつか例を挙げます。
+
+```js
+log(new URL("/some/path", "https://test.example.org/api/").href);
+// => https://test.example.org/some/path
+log(new URL("/", "https://test.example.org/api/v1/").href);
+// => https://test.example.org/
+log(new URL("/article", "https://example.com/api/v1/").href);
+// => https://example.com/article
+```
+
+{{EmbedLiveSample('Root relative', '100%')}}
+
+## 関連情報
+
+- [RFC 3986 - Relative Resolution](https://datatracker.ietf.org/doc/html/rfc3986.html#section-5.2): ベース及び相対 URL の解決の仕様書
diff --git a/files/ja/web/api/urlsearchparams/delete/index.md b/files/ja/web/api/urlsearchparams/delete/index.md
index b48b97456ad6af..dc67b14b3c113f 100644
--- a/files/ja/web/api/urlsearchparams/delete/index.md
+++ b/files/ja/web/api/urlsearchparams/delete/index.md
@@ -3,10 +3,10 @@ title: "URLSearchParams: delete() メソッド"
 short-title: delete()
 slug: Web/API/URLSearchParams/delete
 l10n:
-  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
+  sourceCommit: ed8ef3722c476fffa19914bef27689e7b2048b0e
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`delete()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。
 
@@ -14,8 +14,6 @@ l10n:
 パラメーター名のみが指定された場合、その名前に一致するすべての検索パラメーターが、関連する値とともに削除されます。
 パラメーター名と値の両方が指定された場合、パラメーター名と値の両方に一致するすべての検索パラメーターが削除されます。
 
-{{AvailableInWorkers}}
-
 ## 構文
 
 ```js-nolint
@@ -40,55 +38,39 @@ delete(name, value)
 
 この例では、特定の名前を持つクエリーパラメーター（および値）をすべて削除する方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3");
 const params = new URLSearchParams(url.search);
-log(`Query string (before):\t ${params}`);
+console.log(`クエリー文字列（変更前）:\t ${params}`);
 params.delete("foo");
-log(`Query string (after):\t ${params}`);
+console.log(`クエリー文字列（変更後）:\t ${params}`);
 ```
 
-以下のログは、`foo` という名前を持つパラメータがすべて削除されていることを示しています。
+以下のログは、`foo` という名前を持つパラメーターがすべて削除されていることを示しています。
 
-{{EmbedLiveSample('Delete all parameters with specified name', '100%', '50')}}
+```plain
+クエリー文字列（変更前）:  foo=1&bar=2&foo=3
+クエリー文字列（変更後）:   bar=2
+```
 
 ### 指定した名前と値を持つパラメーターの削除
 
 この例では、特定の名前と値に一致するクエリーパラメーターを削除する方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3&foo=1");
 const params = new URLSearchParams(url.search);
-log(`Query string (before):\t ${params}`);
+console.log(`クエリー文字列（変更前）:\t ${params}`);
 params.delete("foo", "1");
-log(`Query string (after):\t ${params}`);
+console.log(`クエリー文字列（変更後）:\t ${params}`);
 ```
 
 パラメーターの `name` と `value` の両方が一致するパラメーターがすべて削除されるはずです（上記のように、同じ名前と値を持つパラメーターを 2 つ指定する理由はありません）。
 
-{{EmbedLiveSample('Delete parameters with specified name and value', '100%', '50')}}
+```plain
+クエリー文字列（変更前）:  foo=1&bar=2&foo=3&foo=1
+クエリー文字列（変更後）:   bar=2&foo=3
+```
 
 ブラウザーが `value` オプションに対応している場合、"after" の文字列は `bar=2&foo=3` となります。
 そうでない場合、結果は前の例 (`bar=2`) と同じになります。
diff --git a/files/ja/web/api/urlsearchparams/get/index.md b/files/ja/web/api/urlsearchparams/get/index.md
index 9f0f29d2179f30..69f9a9f3a9a26d 100644
--- a/files/ja/web/api/urlsearchparams/get/index.md
+++ b/files/ja/web/api/urlsearchparams/get/index.md
@@ -3,14 +3,12 @@ title: "URLSearchParams: get() メソッド"
 short-title: get()
 slug: Web/API/URLSearchParams/get
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
-**`get()`** は {{domxref("URLSearchParams")}} インターフェースのメソッドで、指定された検索パラメーターに関連付けられた最初の値を返します。
-
-{{availableinworkers}}
+**`get()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、指定された検索パラメーターに関連付けられた最初の値を返します。
 
 ## 構文
 
diff --git a/files/ja/web/api/urlsearchparams/has/index.md b/files/ja/web/api/urlsearchparams/has/index.md
index d41956fe6ca514..92743980fc3158 100644
--- a/files/ja/web/api/urlsearchparams/has/index.md
+++ b/files/ja/web/api/urlsearchparams/has/index.md
@@ -3,10 +3,10 @@ title: "URLSearchParams: has() メソッド"
 short-title: has()
 slug: Web/API/URLSearchParams/has
 l10n:
-  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
+  sourceCommit: 42d23bc68c42b3eaef5a4a7990499bdf88ff680f
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`has()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドは、指定された名前のパラメーターが存在するかどうかを示す論理値を返します。
 
@@ -14,8 +14,6 @@ l10n:
 パラメーター名のみが指定された場合、このメソッドはクエリー文字列内のいずれかのパラメーターがその名前と一致した場合に `true` を返し、それ以外の場合は `false` を返します。
 パラメーター名と値の両方が指定された場合、あるパラメーターの名前と値の両方が一致した場合に `true` を返します。
 
-{{AvailableInWorkers}}
-
 ## 構文
 
 ```js-nolint
@@ -40,59 +38,45 @@ has(name, value)
 
 この例では、クエリー文字列に特定の名前のパラメーターがあるかどうかをチェックする方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3");
 const params = new URLSearchParams(url.search);
 
 // has() はそのパラメーターがクエリー文字列にある場合に true を返す
-log(`bar?:\t${params.has("bar")}`);
-log(`bark?:\t${params.has("bark")}`);
-log(`foo?:\t${params.has("foo")}`);
+console.log(`bar?:\t${params.has("bar")}`);
+console.log(`bark?:\t${params.has("bark")}`);
+console.log(`foo?:\t${params.has("foo")}`);
 ```
 
 以下のログは、パラメーター `bar`、`bark`、`foo` がクエリー文字列内に存在するかどうかを示しています。
 
-{{EmbedLiveSample('Check for parameter with specified name', '100%', '80')}}
+```plain
+bar?:  true
+bark?: false
+foo?:  true
+```
 
 ### 指定された名前と値を持つパラメーターをチェック
 
 この例では、クエリー文字列に特定の名前と値の両方が一致するパラメーターがあるかどうかをチェックする方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3");
 const params = new URLSearchParams(url.search);
 
 // has() は、一致する名前と値を持つパラメーターがクエリー文字列内にある場合に true を返します。
-log(`bar=1?:\t${params.has("bar", "1")}`);
-log(`bar=2?:\t${params.has("bar", "2")}`);
-log(`foo=4?:\t${params.has("foo", "4")}`);
+console.log(`bar=1?:\t${params.has("bar", "1")}`);
+console.log(`bar=2?:\t${params.has("bar", "2")}`);
+console.log(`foo=4?:\t${params.has("foo", "4")}`);
 ```
 
 パラメーター名が `bar` で値が `2` のもののみが一致するので、上記の 2 番目の値のみが `true` になるはずです。
 
-{{EmbedLiveSample('Check for parameter with specified name and value', '100%', '80')}}
+```plain
+bar=1?: false
+bar=2?: true
+foo=4?: false
+```
 
 ブラウザーが `value` オプションに対応していない場合、このメソッドは名前に一致し、結果はすべて `true` になるはずです。
 
diff --git a/files/ja/web/api/urlsearchparams/index.md b/files/ja/web/api/urlsearchparams/index.md
index 7bf65ff5b3b1f2..168a5da83c3fcb 100644
--- a/files/ja/web/api/urlsearchparams/index.md
+++ b/files/ja/web/api/urlsearchparams/index.md
@@ -2,14 +2,14 @@
 title: URLSearchParams
 slug: Web/API/URLSearchParams
 l10n:
-  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
+  sourceCommit: 6cca2796f0dcfe90e2b6a069b5e10e0d139278a3
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
-**`URLSearchParams`** インターフェイスは URL のクエリー文字列の操作に役立つメソッドを定義します。
+**`URLSearchParams`** インターフェイスは、URL のクエリー文字列の操作に役立つメソッドを定義します。
 
-`URLSearchParams` を実装しているオブジェクトは、{{jsxref("Statements/for...of", "for...of")}} 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。
+`URLSearchParams` オブジェクトは[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)ですので、{{jsxref("Statements/for...of", "for...of")}} 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。
 
 ```js
 for (const [key, value] of mySearchParams) {
@@ -18,7 +18,7 @@ for (const [key, value] of mySearchParams.entries()) {
 }
 ```
 
-{{availableinworkers}}
+`URLSearchParams` は機能的には {{jsxref("Map")}} に似ていますが、反復処理を行う際には、`Map` では実装方法の関係で発生しないような[落とし穴](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#concurrent_modifications_when_iterating)に陥る可能性があります。
 
 ## コンストラクター
 
@@ -27,19 +27,19 @@ for (const [key, value] of mySearchParams.entries()) {
 
 ## インスタンスプロパティ
 
-- {{domxref("URLSearchParams.size", 'size')}}
+- {{domxref("URLSearchParams.size", 'size')}} {{ReadOnlyInline}}
   - : 検索パラメーター項目の総数を示します。
 
 ## インスタンスメソッド
 
-- `URLSearchParams.[@@iterator]()`
-  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター")}}を返します。
+- `URLSearchParams[Symbol.iterator]()`
+  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 - {{domxref("URLSearchParams.append()")}}
   - : 指定されたキーと値のペアを新しい検索パラメーターとして追加します。
 - {{domxref("URLSearchParams.delete()")}}
   - : 指定された名前と値に一致する検索パラメーターを、検索パラメーターのリストからすべて削除します。
 - {{domxref("URLSearchParams.entries()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター")}}を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 - {{domxref("URLSearchParams.forEach()")}}
   - : コールバック関数を介して、このオブジェクトに含まれるすべての値を反復処理します。
 - {{domxref("URLSearchParams.get()")}}
@@ -49,7 +49,7 @@ for (const [key, value] of mySearchParams.entries()) {
 - {{domxref("URLSearchParams.has()")}}
   - : 指定されたパラメーター、またはパラメーターと値のペアが存在するかどうかを示す論理値を返します。
 - {{domxref("URLSearchParams.keys()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する {{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 - {{domxref("URLSearchParams.set()")}}
   - : 指定された検索パラメーターに結び付けられた値を指定された値に設定します。複数の値が存在していた場合、他のものは削除されます。
 - {{domxref("URLSearchParams.sort()")}}
@@ -57,7 +57,7 @@ for (const [key, value] of mySearchParams.entries()) {
 - {{domxref("URLSearchParams.toString()")}}
   - : URL で使用するのに適したクエリー文字列を返します。
 - {{domxref("URLSearchParams.values()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する {{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 
 ## 例
 
@@ -107,7 +107,7 @@ console.log(searchParams.getAll("foo")); // ["bar", "baz"]
 
 ### URL の解釈なし
 
-`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、文字列から最初の `?` 以降が存在すれば、削除します。
+`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、もし存在すれば、文字列から最初の `?` 以降を削除します。
 
 ```js
 const paramsString1 = "http://example.com/search?query=%40";
@@ -130,7 +130,7 @@ console.log(searchParams3.has("query")); // true
 
 ### プラス記号の温存
 
-`URLSearchParams` コンストラクターはプラス記号 (`+`) をスペースとして解釈します。以下の例では、[16 進エスケープシーケンス](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#16_進エスケープシーケンス) を使って、URL 検索パラメーターに格納する必要のあるバイナリデータ（各バイトが情報を持つ）を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。
+`URLSearchParams` コンストラクターはプラス記号 (`+`) を空白として解釈します。以下の例では、[16 進エスケープシーケンス](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#16_進エスケープシーケンス) を使って、URL 検索パラメーターに格納する必要のあるバイナリーデータ（各バイトが情報を持つ）を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。
 
 ```js
 const rawData = "\x13à\x17@\x1F\x80";
diff --git a/files/ja/web/api/urlsearchparams/keys/index.md b/files/ja/web/api/urlsearchparams/keys/index.md
index de06263916153c..634549d97c767a 100644
--- a/files/ja/web/api/urlsearchparams/keys/index.md
+++ b/files/ja/web/api/urlsearchparams/keys/index.md
@@ -3,16 +3,13 @@ title: "URLSearchParams: keys() メソッド"
 short-title: keys()
 slug: Web/API/URLSearchParams/keys
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: bd15d43260b7e72b1066c04d9d9f3b79129c619c
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`keys()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを反復処理できる{{jsxref("Iteration_protocols",'イテレーター')}}を返します。 キーは文字列です。
 
-> [!NOTE]
-> このメソッドは[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
-
 ## 構文
 
 ```js-nolint
@@ -54,6 +51,6 @@ key2
 
 {{Compat}}
 
-## 関連項目
+## 関連情報
 
 - {{domxref("URL")}} インターフェイス
diff --git a/files/ja/web/api/web_components/index.md b/files/ja/web/api/web_components/index.md
index 5fc7b9e8dcba3f..cb5578012b09ed 100644
--- a/files/ja/web/api/web_components/index.md
+++ b/files/ja/web/api/web_components/index.md
@@ -2,7 +2,7 @@
 title: ウェブコンポーネント
 slug: Web/API/Web_components
 l10n:
-  sourceCommit: 94b59a847d74883c9cf3a6aed38426c95cf3998b
+  sourceCommit: 839b5e82a117678948392e77b81d64a7f6d03811
 ---
 
 {{DefaultAPISidebar("Web Components")}}
@@ -47,7 +47,7 @@ l10n:
   - : カスタム要素に関わる機能が含まれています。中でも注目すべきは、 {{domxref("CustomElementRegistry.define()")}} メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素を文書内で使用できるようになります。
 - {{domxref("Window.customElements")}}
   - : `CustomElementRegistry` オブジェクトへの参照を返します。
-- [ライフサイクルコールバック](/ja/docs/Web/API/Web_components/Using_custom_elements#ライフサイクルコールバックの使用)
+- [ライフサイクルコールバック](/ja/docs/Web/API/Web_components/Using_custom_elements#カスタム要素のライフサイクルコールバック)
 
   - : カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。
 
@@ -81,6 +81,9 @@ l10n:
       - : 使われている CSS を含む、[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) のシャドウホストを選択します。（シャドウ DOM の内側からカスタム要素を選択することができます。）ただし、関数の引数として渡されるセレクターがシャドウホストに一致している場合に限ります。
     - {{cssxref(":host-context", ":host-context()")}}
       - : 使われている CSS を含む、[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) のシャドウホストを選択します。（シャドウ DOM の内側からカスタム要素を選択することができます。）ただし、関数の引数として渡されるセレクターが DOM 階層内のシャドウホストの先祖要素に一致している場合に限ります。
+    - {{CSSxRef(":state",":state()")}}
+      - : 指定したカスタム状態にあるカスタム要素と一致します。
+        より正確に言えば、指定した状態が要素の {{domxref("CustomStateSet")}} に存在する無名カスタム要素と一致します。
 
 - CSS 擬似要素
 
diff --git a/files/ja/web/api/web_components/using_custom_elements/index.md b/files/ja/web/api/web_components/using_custom_elements/index.md
index a47cef72808dc3..08782e3ca72949 100644
--- a/files/ja/web/api/web_components/using_custom_elements/index.md
+++ b/files/ja/web/api/web_components/using_custom_elements/index.md
@@ -2,114 +2,342 @@
 title: カスタム要素の使用
 slug: Web/API/Web_components/Using_custom_elements
 l10n:
-  sourceCommit: 270351317fdaa57ba9123a19aa281e9e40bb0baa
+  sourceCommit: b065c09b79d18abf0f04778c9307e1c312b8c6f9
 ---
 
 {{DefaultAPISidebar("Web Components")}}
 
-ウェブコンポーネント標準の主な特徴の 1 つは、 HTML ページに機能をカプセル化するカスタム要素を作成できることで、カスタムページの機能を提供する要素の長いネストしたバッチを作成する必要がありません。この記事では、カスタム要素 API の使い方を紹介します。
+ウェブコンポーネントの主な特徴のひとつは、カスタム要素を作成できることです。つまり、ウェブ開発者によって動作が定義され、ブラウザーで利用可能な要素セットを拡張する HTML 要素です。
 
-## 高水準のビュー
+この記事では、カスタム要素について紹介し、いくつかの例を説明します。
 
-ウェブ文書上でカスタム要素を制御するのは {{domxref("CustomElementRegistry")}} オブジェクトです。このオブジェクトで、ページへカスタム要素を登録したり、どのようなカスタム要素が登録されているのかを返したりすることができます。
+## カスタム要素の種類
 
-ページにカスタム要素を登録するには、 {{domxref("CustomElementRegistry.define()")}} メソッドを使います。引数に次のものを取ります。
+カスタム要素には 2 つの種類があります。
 
-- 要素に与える名前を表す文字列。カスタム要素の名前は、[ダッシュが使われている名前](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) (kebab-case) である必要があります。単一の単語にすることはできません。
-- 要素の振る舞いを定義した[クラス](/ja/docs/Web/JavaScript/Reference/Classes)のオブジェクト。
-- {{optional_inline}} `extends` プロパティを含むオプションオブジェクトです。このプロパティは、もしあれば、要素が継承する組み込み要素を指定します（カスタマイズされた組み込み要素にのみ関係します）。
+- **カスタム組み込み要素** (Customized built-in element) は、標準 HTML 要素、例えば {{domxref("HTMLImageElement")}} や {{domxref("HTMLParagraphElement")}} を継承します。これらの実装により、標準要素の特定のインスタンスの動作が拡張されます。
 
-カスタム要素には 2 つの種類があります。
+  > [!NOTE]
+  > カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。
+
+- **自律型カスタム要素** (Autonomous custom element) は HTML 要素の基底クラスである {{domxref("HTMLElement")}} を継承します。一から動作を実装する必要があります。
 
-- **自律カスタム要素** (Autonomous custom element) はスタンドアロンです。標準の HTML 要素を継承しません。 HTML 要素としてページ内で記述して使います。例えば、`<popup-info>` あるいは `document.createElement("popup-info")` などです。
-- **カスタマイズされた組み込み要素** (Customized built-in element) は、基礎となる HTML 要素を継承します。これらを作成するには、どの要素を拡張するかを指定する必要があり（上記の例で示した通り）、基本要素を記述し、カスタム要素の名前を [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性（またはプロパティ）で指定することで使用します。例えば、 `<p is="word-count">` や `document.createElement("p", { is: "word-count" })` のようにします。
+## カスタム要素の実装
 
-例えば、**カスタマイズされた組み込み要素**である [word-count 要素](https://mdn.github.io/web-components-examples/word-count-web-component/)を定義するには次のようにします。
+カスタム要素は、{{domxref("HTMLElement")}} を拡張する[クラス](/ja/docs/Web/JavaScript/Reference/Classes)（自立型要素の場合）またはカスタマイズするインターフェイス（カスタム組み込み要素の場合）として実装されます。
+
+以下は、最小限のカスタム要素で、{{HTMLElement("p")}} 要素をカスタマイズする実装例です。
 
 ```js
-customElements.define("word-count", WordCount, { extends: "p" });
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    super();
+  }
+  // 要素の機能をここに書く
+}
 ```
 
-この要素は `word-count` と呼ばれ、クラスオブジェクトは `WordCount` であり、 {{htmlelement("p")}} 要素を拡張したものになります。これは拡張された要素内で `is` 属性を設定することでのみ構築することができます。例えば、 `<p is="word-count">` または
-`document.createElement("p", { is: "word-count" })` のようにします。
+最小限の自律型カスタム要素の実装は次のとおりです。
+
+```js
+class PopupInfo extends HTMLElement {
+  constructor() {
+    super();
+  }
+  // 要素の機能をここに書く
+}
+```
+
+クラスの[コンストラクター](/ja/docs/Web/JavaScript/Reference/Classes/constructor)では、初期状態や既定値の設定、イベントリスナーの登録、シャドウルートを作成することなどが可能です。この時点では、要素の属性や子要素を検査したり、新しい属性や子要素を追加したりしないでください。要件のすべてについては、[Requirements for custom element constructors and reactions](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance) を参照してください。
+
+### カスタム要素のライフサイクルコールバック
 
-カスタム要素のクラスのオブジェクトは `class` 構文で実装します。例えば、 `WordCount` は次のように構成します。
+カスタム要素が登録されると、ページのコードがカスタム要素と特定の方法でやり取りを行う際に、ブラウザーがそのクラスの特定のメソッドを呼び出します。 仕様書ではこれらのメソッドの実装を「ライフサイクルコールバック」と呼んでいますが、これらのメソッドを提供することで、これらのイベントに応答してコードを実行することができます。
+
+カスタム要素のライフサイクルコールバックには、以下のものが含まれます。
+
+- `connectedCallback()`: 要素が文書に追加されるたびに呼び出されます。仕様では、開発者は可能な限り、カスタム要素の設定をコンストラクターではなく、このコールバックで実装することを推奨しています。
+- `disconnectedCallback()`: 要素が文書から削除されるたびに呼び出されます。
+- `adoptedCallback()`: 要素が新しい文書に移動されるたびに呼び出されます。
+- `attributeChangedCallback()`: 属性が変更、追加、削除、置換されたときに呼び出されます。このコールバックの詳細については、[属性の変更への応答](#属性の変更への応答)を参照してください。
+
+これらのライフサイクルイベントを記録する最小限のカスタム要素は次のとおりです。
 
 ```js
-class WordCount extends HTMLParagraphElement {
+// 要素のためのクラスを作成
+class MyCustomElement extends HTMLElement {
+  static observedAttributes = ["color", "size"];
+
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
+    // コンストラクターでは、常に super を最初に呼び出す
     super();
+  }
+
+  connectedCallback() {
+    console.log("カスタム要素がページに追加されました。");
+  }
+
+  disconnectedCallback() {
+    console.log("カスタム要素がページから除去されました。");
+  }
 
-    // ここに要素の機能を記述します
+  adoptedCallback() {
+    console.log("カスタム要素が新しいページへ移動されました。");
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(`属性 ${name} が変更されました。`);
   }
 }
+
+customElements.define("my-custom-element", MyCustomElement);
 ```
 
-> **メモ:** [JavaScript のソース全体](https://github.com/mdn/web-components-examples/blob/main/word-count-web-component/main.js)があります。
+## カスタム要素の登録
 
-これはごく簡単な例ですが、ここでできることはもっとあります。クラスの中でライフサイクルコールバックを定義することにより、要素のライフサイクルの特定の時点で実行することができます。例えば、 `connectedCallback` は文書に接続された要素にカスタム要素が追加されるたびに実行されます。一方 `attributeChangedCallback` はカスタム要素に属性が追加、削除、変更される時に実行されます。
+カスタム要素をページで利用できるようにするには、{{domxref("Window.customElements")}} の {{domxref("CustomElementRegistry.define()", "define()")}} メソッドを呼び出します。
 
-これらについては、下記の[ライフサイクルコールバックの使用](#ライフサイクルコールバックの使用)の節で詳しく学ぶことができます。
+`define()` メソッドは、以下の引数を取ります。
 
-## 簡単な例での作業
+- `name`
+  - : 要素の名前。これは小文字で始まり、ハイフンを含み、仕様書の [definition of a valid name](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) に記載されているその他の特定のルールを満たす必要があります。
+- `constructor`
+  - : カスタム要素のコンストラクター関数。
+- `options`
+  - : カスタム組み込み要素のみに含まれ、これは単一のプロパティ `extends` を含むオブジェクトです。これは、拡張する組み込み要素の名前を指定する文字列です。
 
-ここで、もう少し簡単な例で、カスタム要素の作成方法をより詳しく説明しましょう。
+例えば、このコードはカスタム組み込み要素である `WordCount` を登録します。
 
-### 自律カスタム要素
+```js
+customElements.define("word-count", WordCount, { extends: "p" });
+```
 
-自律カスタム要素の例を見てみましょう。[`<popup-info-box>`](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component) ([ライブ例](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)も参照) です。これは画像とテキストを受け取り、ページにアイコンを埋め込みます。アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。
+このコードは、`PopupInfo` という自律型カスタム要素を登録します。
 
-最初に汎用的な {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。
+```js
+customElements.define("popup-info", PopupInfo);
+```
+
+## カスタム要素の使用
+
+カスタム要素を定義し登録すると、コードで使用できるようになります。
+
+カスタム組み込み要素を使用するには、組み込み要素を使用しますが、カスタム名を [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性の値として使用します。
+
+```html
+<p is="word-count"></p>
+```
+
+自律型カスタム要素を独自に作成して使用するには、組み込みの HTML 要素と同様にカスタム名を使用します。
+
+```html
+<popup-info>
+  <!-- 要素の中身 -->
+</popup-info>
+```
+
+## 属性の変更への応答
+
+組み込み要素と同様に、カスタム要素も HTML 属性を使用して要素の動作を設定することができます。属性を効果的に使用するには、要素が属性値の変更に対応できなければなりません。これを実現するには、カスタム要素を実装するクラスに以下のメンバーを追加する必要があります。
+
+- `observedAttributes` という名前の静的プロパティ。これは、その要素が変更通知を必要とするすべての属性の名前を含む配列でなければなりません。
+- `attributeChangedCallback()` ライフサイクルコールバックの実装。
+
+`attributeChangedCallback()` コールバックは、要素の `observedAttributes` プロパティにリストされた名前の属性が追加、修正、削除、置換されるたびに呼び出されます。
+
+コールバックには 3 つの引数が渡されます。
+
+- 変更された属性の名前。
+- 属性の古い値。
+- 属性の新しい値。
+
+例えば、この自律的な要素は `size` 属性を監視し、値が変更された際に新旧の値を記録します。
 
 ```js
-class PopupInfo extends HTMLElement {
+// 要素のためのクラスを作成
+class MyCustomElement extends HTMLElement {
+  static observedAttributes = ["size"];
+
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
     super();
+  }
 
-    // ここに要素の機能を記述します
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(
+      `Attribute ${name} has changed from ${oldValue} to ${newValue}.`,
+    );
   }
 }
+
+customElements.define("my-custom-element", MyCustomElement);
+```
+
+要素の HTML 宣言に監視される属性が含まれている場合、その属性が初期化された後に、要素の宣言が最初に解釈された時点で `attributeChangedCallback()` が呼び出されることに
+注意してください。 したがって、以下の例では、たとえ属性がその後変更されることがなかったとしても、DOM が解釈された時点で `attributeChangedCallback()` が呼び出されます。
+
+```html
+<my-custom-element size="100"></my-custom-element>
 ```
 
-前述のコードスニペットはクラスのコンストラクター ([`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)) の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。
+`attributeChangedCallback()` の使用を示す完全な例については、このページの[ライフサイクルコールバック](#ライフサイクルコールバックの使用)を参照してください。
+
+### カスタム状態と CSS のカスタム状態擬似クラスセレクター
+
+HTML 要素に組み込まれた要素は、「ホバー」、「無効」、「読み取り専用」など、様々な状態を取ります。。
+これらの状態の一部は、HTML または JavaScript を使用して属性として設定できますが、内部的なものもあり、設定できないものもあります。
+外部または内部に関わらず、これらの状態には通常、特定の状態にある要素を選択し、スタイルを適用するために使用できる対応する [CSS 擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)が存在します。
+
+また、自律型カスタム要素（組み込み要素をベースにした要素を除く）では、擬似クラス関数 `:state()` を使用して状態を定義し、それに対して選択を行うこともできます。
+以下のコードでは、内部状態 "`collapsed`" を持つ自律型カスタム要素の例を使用して、その動作を示しています。
 
-コンストラクターの内部では、その要素のインスタンスが生成されたときに持つすべての機能を定義します。この場合、カスタム要素にシャドウルートを添付し、いくつかの DOM 操作を使用して要素の内部シャドウ DOM 構造を作成します。それをシャドウルートに添付します。そして最後に、いくつかの CSS をシャドウルートに添付してスタイル付けを行います。
+`collapsed` の状態は、要素の外からは見えない論理値プロパティ（セッターとゲッターメソッド付き）として表現されます。
+この状態を CSS で選択できるようにするために、カスタム要素は最初のコンストラクターで {{domxref("HTMLElement.attachInternals()")}} を呼び出し、{{domxref("ElementInternals")}} オブジェクトを装着します。これにより、{{domxref("ElementInternals.states")}} プロパティを通じて {{domxref("CustomStateSet")}} にアクセスできるようになります。
+（内部で）折りたたまれた状態のセッターは、状態が `true` であれば `CustomStateSet` に識別子 `hidden` を追加し、状態が `false` であれば除去します。 識別子は単なる文字列です。この場合、`hidden` と呼びましたが、`collapsed` と読んでも同じように機能します。
 
 ```js
-// シャドウルートを生成
-this.attachShadow({ mode: "open" }); // 'this.shadowRoot' を設定して返す
-
-//（内部の）span 要素を生成
-const wrapper = document.createElement("span");
-wrapper.setAttribute("class", "wrapper");
-const icon = wrapper.appendChild(document.createElement("span"));
-icon.setAttribute("class", "icon");
-icon.setAttribute("tabindex", 0);
-// アイコンを、定義された属性または既定のアイコンから挿入
-const img = icon.appendChild(document.createElement("img"));
-img.src = this.hasAttribute("img")
-  ? this.getAttribute("img")
-  : "img/default.png";
-// 画像を追加する際には、常に説明文を含めるようする
-img.alt = this.hasAttribute("alt") ? this.getAttribute("alt") : "";
-
-const info = wrapper.appendChild(document.createElement("span"));
-info.setAttribute("class", "info");
-// 属性の中身を取得し、 info の span の中に入れる
-info.textContent = this.getAttribute("data-text");
-
-// CSS を作成しシャドウ DOM に割り当てる
-const style = document.createElement("style");
-style.textContent = `.wrapper {
-  /* 簡略化のために CSS は省略 */
-}`;
+class MyCustomElement extends HTMLElement {
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
 
-// 生成された要素をシャドウ DOM に添付する
-this.shadowRoot.append(style, wrapper);
+  get collapsed() {
+    return this._internals.states.has("hidden");
+  }
+
+  set collapsed(flag) {
+    if (flag) {
+      // Existence of identifier corresponds to "true"
+      this._internals.states.add("hidden");
+    } else {
+      // Absence of identifier corresponds to "false"
+      this._internals.states.delete("hidden");
+    }
+  }
+}
+
+// Register the custom element
+customElements.define("my-custom-element", MyCustomElement);
+```
+
+カスタム要素の `CustomStateSet` (`this._internals.states`) に追加された識別子を使用して、要素のカスタム状態と照合することができます。
+これは、[`:state()`](/ja/docs/Web/CSS/:state) 擬似クラスに識別子を渡すと照合されます。
+例えば、下記では、`hidden` セレクターを使用して、`hidden` 状態が `true`（したがって、要素が`collapsed` 状態）であることを選択し、境界線を削除します。
+
+```css
+my-custom-element {
+  border: dashed red;
+}
+my-custom-element:state(hidden) {
+  border: none;
+}
+```
+
+`:state()` 擬似クラスを [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用すると、[カスタム要素のシャドウ DOM 内の](/ja/docs/Web/CSS/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom)カスタム状態と照合することもできます。
+さらに、`:state()` 擬似クラスを [`::part()`](/ja/docs/Web/CSS/::part) 擬似要素の後で使用することで、特定の状態にあるカスタム要素の[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)と照合することもできます。
+
+{{domxref("CustomStateSet")}} には、これがどのように動作するのかを示すいくつかのライブサンプルがあります。
+
+## 例
+
+このガイドの残りの部分では、いくつかのカスタム要素の例を見ていきます。 これらの例のすべて、およびその他のソースは、[web-components-examples](https://github.com/mdn/web-components-examples) リポジトリーで参照できます。また、すべてをライブで確認するには、<https://mdn.github.io/web-components-examples/> にアクセスしてください。
+
+### 自律カスタム要素
+
+まず、自律カスタム要素の例を見てみましょう。`<popup-info>` カスタム要素は、画像アイコンとテキスト文字列を属性として取り、アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。
+
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component)
+
+最初に {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。
+
+```js
+// 要素のためのクラスを作成
+class PopupInfo extends HTMLElement {
+  constructor() {
+    // コンストラクターでは super を常に最初に呼び出す
+    super();
+  }
+
+  connectedCallback() {
+    // シャドウルートを生成
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // span 要素を生成
+    const wrapper = document.createElement("span");
+    wrapper.setAttribute("class", "wrapper");
+
+    const icon = document.createElement("span");
+    icon.setAttribute("class", "icon");
+    icon.setAttribute("tabindex", 0);
+
+    const info = document.createElement("span");
+    info.setAttribute("class", "info");
+
+    // 属性の中身を取得し、情報 span の中に入れる
+    const text = this.getAttribute("data-text");
+    info.textContent = text;
+
+    // アイコンを挿入
+    let imgUrl;
+    if (this.hasAttribute("img")) {
+      imgUrl = this.getAttribute("img");
+    } else {
+      imgUrl = "img/default.png";
+    }
+
+    const img = document.createElement("img");
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // いくらかの CSS を生成してシャドウ DOM に適用
+    const style = document.createElement("style");
+    console.log(style.isConnected);
+
+    style.textContent = `
+      .wrapper {
+        position: relative;
+      }
+
+      .info {
+        font-size: 0.8rem;
+        width: 200px;
+        display: inline-block;
+        border: 1px solid black;
+        padding: 10px;
+        background: white;
+        border-radius: 10px;
+        opacity: 0;
+        transition: 0.6s all;
+        position: absolute;
+        bottom: 20px;
+        left: 10px;
+        z-index: 3;
+      }
+
+      img {
+        width: 1.2rem;
+      }
+
+    .icon:hover + .info, .icon:focus + .info {
+        opacity: 1;
+      }
+    `;
+
+    // 生成要素をシャドウ DOM に結びつける
+    shadow.appendChild(style);
+    console.log(style.isConnected);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
 ```
 
+前述のコードスニペットはクラスのコンストラクター（[`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)）の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。
+
+`connectedCallback()` メソッド内で、要素が DOM に接続された際にその要素が持つすべての機能を定義します。この例では、シャドウルートをカスタム要素に割り当て、DOM 操作を使用して要素の内部シャドウルート構造を作成します（そしてシャドウルートに割り当てます）。最後に、シャドウルートにいくつかの CSS を割り当ててスタイル設定します。要素の属性は DOM に接続されるまで利用できないため、コンストラクターでは処理はうまくいきません。
+
 最後に、カスタム要素を `CustomElementRegistry` に登録します。前述の `define()` を使用して、引数で要素名とその機能を定義するクラス名を指定します。
 
 ```js
@@ -126,55 +354,157 @@ customElements.define("popup-info", PopupInfo);
   back of your card."></popup-info>
 ```
 
-> [!NOTE]
-> こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js) を見ることができます。
-
 ### 内部スタイルと外部スタイル
 
-上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。
+上記の例では、{{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。この例では、外部スタイルシートを使用するように `<popup-info>` カスタム要素を変更します。
 
-例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-external-stylesheet/main.js)はこちら）。
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-external-stylesheet)
+
+こちらがクラス定義です。
 
 ```js
-// 外部スタイルシートをシャドウ DOM に適用
-const linkElem = document.createElement("link");
-linkElem.setAttribute("rel", "stylesheet");
-linkElem.setAttribute("href", "style.css");
+// 要素のためのクラスを作成
+class PopupInfo extends HTMLElement {
+  constructor() {
+    // コンストラクターでは super を常に最初に呼び出す
+    super();
+  }
+
+  connectedCallback() {
+    // シャドウルートを生成
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // span 要素を生成
+    const wrapper = document.createElement("span");
+    wrapper.setAttribute("class", "wrapper");
+
+    const icon = document.createElement("span");
+    icon.setAttribute("class", "icon");
+    icon.setAttribute("tabindex", 0);
+
+    const info = document.createElement("span");
+    info.setAttribute("class", "info");
+
+    // 属性の中身を取得し、情報 span の中に入れる
+    const text = this.getAttribute("data-text");
+    info.textContent = text;
+
+    // アイコンを挿入
+    let imgUrl;
+    if (this.hasAttribute("img")) {
+      imgUrl = this.getAttribute("img");
+    } else {
+      imgUrl = "img/default.png";
+    }
 
-// 生成された要素をシャドウ DOM に添付
-shadow.appendChild(linkElem);
+    const img = document.createElement("img");
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // 外部スタイルシートをシャドウ DOM に適用
+    const linkElem = document.createElement("link");
+    linkElem.setAttribute("rel", "stylesheet");
+    linkElem.setAttribute("href", "style.css");
+
+    // 生成した要素をシャドウ DOM に結びつける
+    shadow.appendChild(linkElem);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
 ```
 
+これは、元の `<popup-info>` の例とほぼ同じですが、外部スタイルシートにリンクするために、シャドウ DOM に追加する {{HTMLElement("link")}} 要素を使用している点が異なります。
+
 なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。
 
 最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。
 
-### カスタマイズされた組み込み要素
+### カスタム組み込み要素
 
-ここで、もう 1 つの組み込み要素の例を見てみましょう。 [expanding-list](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component) です。（[ライブでも確認してください](https://mdn.github.io/web-components-examples/expanding-list-web-component/)） これにより番号なしリストが展開・収納するメニューになります。
+ここで、もう 1 つの組み込み要素の例を見てみましょう。この例は、組み込みの {{HTMLElement("ul")}} 要素を拡張して、リストアイテムが展開・収納するするようにします。
+
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/expanding-list-web-component/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component)
+
+> [!NOTE]
+> カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。
 
 まず始めに、これまでと同様の方法でクラス要素を定義します。
 
 ```js
+// 要素のためのクラスを作成
 class ExpandingList extends HTMLUListElement {
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
-    super();
+    // コンストラクターでは super を常に最初に呼び出す
+    // super() の返値はこの要素への参照
+    self = super();
+  }
 
-    // ここに要素の機能を記述します
+  connectedCallback() {
+    // このカスタム ul 要素の子である ul および li 要素を取得する
+    // li 要素は、その中に ul がある場合、コンテナーとして機能する
+    const uls = Array.from(self.querySelectorAll("ul"));
+    const lis = Array.from(self.querySelectorAll("li"));
+    // すべての子の ul を隠す
+    // これらのリストは、ユーザーが上位レベルのコンテナーをクリックしたときに表示される
+    uls.forEach((ul) => {
+      ul.style.display = "none";
+    });
+
+    // ul内のli要素をそれぞれ見ていく
+    lis.forEach((li) => {
+      // この li に ul が子要素としてある場合、クリックハンドラーを追加する
+      if (li.querySelectorAll("ul").length > 0) {
+        // スタイル設定で使用できる属性を追加し、
+        // 開く・閉じるアイコンを表示させる
+        li.setAttribute("class", "closed");
+
+        // li 要素のテキストを新しい span 要素で囲むことで、
+        // span にスタイルやイベントハンドラーを割り当てることができる
+        const childText = li.childNodes[0];
+        const newSpan = document.createElement("span");
+
+        // li から span にテキストをコピーし、カーソルスタイルを設定
+        newSpan.textContent = childText.textContent;
+        newSpan.style.cursor = "pointer";
+
+        // この span にクリックハンドラーを追加
+        newSpan.addEventListener("click", (e) => {
+          // span 要素の次兄弟要素は ul であるはず
+          const nextul = e.target.nextElementSibling;
+
+          // 表示状態を切り替え、ul の class 属性を更新
+          if (nextul.style.display == "block") {
+            nextul.style.display = "none";
+            nextul.parentNode.setAttribute("class", "closed");
+          } else {
+            nextul.style.display = "block";
+            nextul.parentNode.setAttribute("class", "open");
+          }
+        });
+        // span を追加し、li から裸のテキストノードを除去
+        childText.parentNode.insertBefore(newSpan, childText);
+        childText.parentNode.removeChild(childText);
+      }
+    });
   }
 }
 ```
 
-ここでは要素の詳細な機能については説明しませんが、ソースコードからどのように動作するのか確認することができます。これまでと唯一違う点は、 {{domxref("HTMLUListElement")}} インターフェースを継承しており、 {{domxref("HTMLElement")}} ではないことです。そのため、独立した要素ではなく、 {{htmlelement("ul")}} 要素の特徴を備えた上に、定義した機能を持ちます。これこそが、自律カスタム要素ではなくカスタマイズされた組み込み要素である理由です。
+なお、今回は {{domxref("HTMLElement")}} ではなく、{{domxref("HTMLUListElement")}} を拡張しています。 つまり、リストの既定の動作が得られ、独自のカスタマイズのみを実装すればよいということです。
+
+前回と同様に、コードのほとんどは `connectedCallback()` ライフサイクルコールバック内にあります。
 
-次に、以前と同様に `define()` を用いて要素を登録しますが、今回はこのカスタム要素がどの要素から継承したのかという情報をオプションとして渡しています。
+次に、前回と同様に `define()` メソッドを使用して要素を登録しますが、今回は、カスタム要素が継承する要素の詳細を記載した options オブジェクトも含めます。
 
 ```js
 customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 ```
 
-ウェブ文書内で組み込み要素を使用する場合とはやや異なります。
+ウェブ文書内で組み込み要素を使用すると、また少し違った見え方になります。
 
 ```html
 <ul is="expanding-list">
@@ -184,48 +514,45 @@ customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 
 通常のように `<ul>` を使用していますが、カスタム要素の名前が `is` 属性で指定されています。
 
-> [!NOTE]
-> 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/main.js)はこちらにあります。
-
-## ライフサイクルコールバックの使用
-
-カスタム要素のクラス定義内に、いくつかの異なるコールバックを定義できます。これらは要素のライフサイクルのさまざまな時点で起動します。
+この場合、DOM が完全に解釈された後にカスタム要素を定義するスクリプトが実行されるように保証する必要があります。`connectedCallback()` は展開されたリストが DOM に追加されると同時に呼び出されますが、その時点では子要素はまだ追加されていないため、`querySelectorAll()` の呼び出しでは何も見つかりません。これを保証する一つの方法は、スクリプトを記載する行に [defer](/ja/docs/Web/HTML/Element/script#defer) 属性を追加することです。
 
-- `connectedCallback`: 文書に接続された要素にカスタム要素が追加されるたびに呼び出されます。これはそのノードが移動するために発生するので、要素の内容が完全に解釈される前に発生することがあります。
-
-  > **メモ:** `connectedCallback` は要素の接続が終了したときにも呼び出されることがあります。 {{domxref("Node.isConnected")}} を使用して確認してください。
+```html
+<script src="main.js" defer></script>
+```
 
-- `disconnectedCallback`: カスタム要素が文書の DOM から切断されるたびに呼び出されます。
-- `adoptedCallback`: カスタム要素が新しい文書に移動するたびに呼び出されます。
-- `attributeChangedCallback`: カスタム要素の属性の 1 つが追加、削除、変更されるたびに呼び出されます。どの属性の変更が通知されたかは、静的な get `observedAttributes()` メソッドで指定されます。
+## ライフサイクルコールバック
 
-これらの使用例を見てみましょう。以下のコードは [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) の例から引用しています（[実行可能なライブでも確認してください](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)）。これは、ページ上に一定の大きさの色のついた四角形を生成する些細な例です。カスタム要素は次のようなものです。
+これまでは、`connectedCallback()` というライフサイクルコールバックが 1 つだけ動作しているのを見てきました。最後の例である `<custom-square>` では、他にもいくつか見ていきます。この例では、自律型のカスタム要素 `<custom-square>` を紹介します。これは、名前付きの 2 つの属性 `"size"` および `"color"` によってサイズと色が決定される四角形を描画します。
 
-```html
-<custom-square l="100" c="red"></custom-square>
-```
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks)
 
-クラスのコンストラクターは非常に単純です。ここでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。
+クラスのコンストラクターでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。
 
 ```js
+constructor() {
+  // コンストラクターでは super を常に最初に呼び出す
+  super();
+
 const shadow = this.attachShadow({ mode: "open" });
 
 const div = document.createElement("div");
 const style = document.createElement("style");
 shadow.appendChild(style);
 shadow.appendChild(div);
+}
 ```
 
-この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その `<style>` 要素を見つけて、{{cssxref("width")}}, {{cssxref("height")}}, および{{cssxref("background-color")}} をそのスタイルに追加します。
+この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その `<style>` 要素を見つけて、{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("background-color")}} をそのスタイルに追加します。
 
 ```js
 function updateStyle(elem) {
   const shadow = elem.shadowRoot;
   shadow.querySelector("style").textContent = `
     div {
-      width: ${elem.getAttribute("l")}px;
-      height: ${elem.getAttribute("l")}px;
-      background-color: ${elem.getAttribute("c")};
+      width: ${elem.getAttribute("size")}px;
+      height: ${elem.getAttribute("size")}px;
+      background-color: ${elem.getAttribute("color")};
     }
   `;
 }
@@ -235,7 +562,7 @@ function updateStyle(elem) {
 
 ```js
 connectedCallback() {
-  console.log('Custom square element added to page.');
+  console.log("Custom square element added to page.");
   updateStyle(this);
 }
 ```
@@ -244,19 +571,19 @@ connectedCallback() {
 
 ```js
 disconnectedCallback() {
-  console.log('Custom square element removed from page.');
+  console.log("Custom square element removed from page.");
 }
 
 adoptedCallback() {
-  console.log('Custom square element moved to new page.');
+  console.log("Custom square element moved to new page.");
 }
 ```
 
-`attributeChangedCallback()` コールバックは、要素の属性の 1 つが何らかの方法で変更されるたびに実行されます。そのプロパティからわかるように、属性、属性の名前、および古い属性値と新しい属性値を個別に操作することができます。ただし、この場合は、 `updateStyle()` 関数を再度実行して、新しい値に従って正方形のスタイルが更新されるようにします。
+`attributeChangedCallback()` コールバックは、要素の属性の 1 つが何らかの方法で変更されるたびに実行されます。その引数からわかるように、属性、属性の名前、および古い属性値と新しい属性値を個別に操作することができます。ただし、この場合は、`updateStyle()` 関数を再度実行して、新しい値に従って正方形のスタイルが更新されるようにします。
 
 ```js
 attributeChangedCallback(name, oldValue, newValue) {
-  console.log('Custom square element attributes changed.');
+  console.log("Custom square element attributes changed.");
   updateStyle(this);
 }
 ```
@@ -264,17 +591,7 @@ attributeChangedCallback(name, oldValue, newValue) {
 ある属性が変更されたときに起動する `attributeChangedCallback()` コールバックを取得するには、その属性を監視する必要があることに注意してください。これは、カスタム要素クラス内で `static get observedAttributes()` メソッドを定義することによって行われます。これは、監視したい属性の名前を含む配列を返すようにしてください。
 
 ```js
-static get observedAttributes() { return ['c', 'l']; }
+static get observedAttributes() {
+  return ["color", "size"];
+}
 ```
-
-この例では、これはコンストラクターの最上部に配置されています。
-
-> **メモ:** [完全な JavaScript のソース](https://github.com/mdn/web-components-examples/blob/main/life-cycle-callbacks/main.js)はこちらにあります。
-
-## トランスパイラーとクラス
-
-古いブラウザーを対象とした Babel 6 や TypeScript では、クラスが期待通りにトランスパイルされない可能性があることに注意してください。 Babel 7 もしくは Babel 6 の [babel-plugin-transform-builtin-classes](https://www.npmjs.com/package/babel-plugin-transform-builtin-classes) を使用すると、 TypeScript で古いブラウザーではなく ES2015 をターゲットとすることができます。
-
-## ライブラリー
-
-カスタム要素を作る際に抽象度を高めることを目的とした、ウェブコンポーネントで実装されたライブラリーがあります。これらのライブラリーには、 [FASTElement](https://www.fast.design/docs/fast-element/getting-started), [snuggsi](https://github.com/devpunks/snuggsi), [X-Tag](https://x-tag.github.io/), [Slim.js](https://slimjs.com/), [Lit](https://lit.dev/), [Smart](https://www.htmlelements.com/), [Stencil](https://stenciljs.com), [hyperHTML-Element](https://github.com/WebReflection/hyperHTML-Element), [DataFormsJS](https://www.dataformsjs.com/), [Custom-Element-Builder](https://tmorin.github.io/ceb/) などがあります。
diff --git a/files/ja/web/api/web_components/using_shadow_dom/index.md b/files/ja/web/api/web_components/using_shadow_dom/index.md
index d36b5f94b5c512..a6ef38c3aa833b 100644
--- a/files/ja/web/api/web_components/using_shadow_dom/index.md
+++ b/files/ja/web/api/web_components/using_shadow_dom/index.md
@@ -2,29 +2,28 @@
 title: シャドウ DOM の使用
 slug: Web/API/Web_components/Using_shadow_DOM
 l10n:
-  sourceCommit: de954cbfe1c070de631cdaf91005c7def339c344
+  sourceCommit: 9d76a1d4601c8e0042732899a99b6fecde2c919d
 ---
 
 {{DefaultAPISidebar("Web Components")}}
 
-ウェブコンポーネントにおける重要な側面の一つが、カプセル化です。マークアップ構造、スタイル、動作を隠蔽し、コード上の他のコードから分離することで、他の部分でクラッシュすることを防ぎ、コードをきれいにしておくことができます。シャドウ DOM API はこの主要部分であり、隠蔽され分離された DOM を要素に取り付けるための方法を提供しています。この記事ではシャドウ DOM を使う基本を記述しています。
+カスタム要素の重要な側面の一つがカプセル化です。なぜなら、カスタム要素は定義上、再利用可能な機能の一部であり、任意のウェブページにドロップして動作させることが期待されるからです。そのため、ページで実行されるコードが、内部実装を変更することでカスタム要素を誤って壊すことがないようにすることが重要です。シャドウ DOM を使用すると、DOM ツリーを要素に割り当て、ページで実行される JavaScript や CSS からこのツリーの内部を隠すことができます。
 
-## 高水準のビュー
+この記事では、シャドウ DOM の使用法の基本について説明します。
+
+## 高水準の視点
 
 この記事は、すでにあなたが [DOM (Document Object Model)](/ja/docs/Web/API/Document_Object_Model/Introduction) の概念を理解していることを想定しています。これはツリー上の構造で、接続されたノードがマークアップ文書（ウェブ文書の場合は通常 HTML 文書）に現れるさまざまな要素や文字列を表します。例として、以下のような HTML の断片を考えてみましょう。
 
 ```html
-<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>Simple DOM example</title>
+    <title>DOM example</title>
   </head>
   <body>
     <section>
-      <img
-        src="dinosaur.png"
-        alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
+      <img src="dinosaur.png" alt="A red Tyrannosaurus Rex." />
       <p>
         Here we will add a link to the
         <a href="https://www.mozilla.org/">Mozilla homepage</a>
@@ -34,9 +33,22 @@ l10n:
 </html>
 ```
 
-この断片によって以下のような DOM 構造が構成されます。
-
-![要素とテキストノードを持つDOMツリー、要素の属性名と内容を含めるために、空でないテキストノードのコンテンツ。](dom-screenshot.png)
+このフラグメントは、以下の DOM 構造を生成します（ホワイトスペースのみのテキストノードを除く）。
+
+```plain
+- HTML
+    - HEAD
+        - META charset="utf-8"
+        - TITLE
+            - #text: DOM example
+    - BODY
+        - SECTION
+            - IMG src="dinosaur.png" alt="A red Tyrannosaurus Rex."
+            - P
+                - #text: Here we will add a link to the
+                - A href="https://www.mozilla.org/"
+                    - #text: Mozilla homepage
+```
 
 _シャドウ_ DOM により、通常の DOM ツリーの要素の下に隠れた DOM ツリーを取り付けることができます。このシャドウ DOM ツリーはシャドウルートから始まり、その下には普通の DOM ツリーと同様に任意の要素を追加することができます。
 
@@ -51,180 +63,329 @@ _シャドウ_ DOM により、通常の DOM ツリーの要素の下に隠れ
 
 シャドウ DOM 内のノードには、シャドウでないノードと全く同じように影響を与えることができます。たとえば、子を追加したり、属性を設定したり、element.style.foo を使用して個々のノードのスタイルを設定したり、 {{htmlelement("style")}} 要素内でシャドウ DOM ツリー全体へのスタイルを追加したりすることができます。違いは、シャドウ DOM 内のどのコードもその外の何かに影響を与えることができず、便利なカプセル化ができることです。
 
-なお、シャドウ DOM は決して新しいものではありません。ブラウザーは長い間、要素の内部構造をカプセル化するためにこれを使用してきました。例えば、既定のブラウザーコントロールが公開されている {{htmlelement("video")}} 要素を思い浮かべてください。 DOM には `<video>` 要素しか表示されませんが、そのシャドウ DOM の内部には、一連のボタンやその他のコントロールが含まれています。 シャドウ DOM 仕様書により、独自のカスタム要素のシャドウ DOM を実際に操作することができるようになりました。
+ウェブ開発者がシャドウ DOM を利用できるようになる前から、ブラウザーはすでに要素の内部構造をカプセル化するためにシャドウ DOM を使用していました。例えば、既定のブラウザーコントロールが公開されている {{htmlelement("video")}} 要素を思い浮かべてください。 DOM には `<video>` 要素しか表示されませんが、そのシャドウ DOM の内部には、一連のボタンやその他のコントロールが含まれています。 シャドウ DOM 仕様書では、自分自身でカスタマイズした要素のシャドウ DOM を操作できるようにします。
 
-## 基本的な使い方
+### 属性の継承
 
-任意の要素にシャドウルートを取り付けるには {{domxref("Element.attachShadow()")}} メソッドを使用します。このメソッドはオプションオブジェクトを引数として取り、その中にはオプションが 1 つ、 `mode` オプションを `open` または `closed` の値で取ります。
+シャドウツリーと {{ HTMLElement("slot") }} 要素は、シャドウホストから [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) および [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性を継承しています。
 
-```js
-const shadowOpen = elementRef.attachShadow({ mode: "open" });
-const shadowClosed = elementRef.attachShadow({ mode: "closed" });
+## シャドウ DOM の作成
+
+### JavaScript で命令的に
+
+次のページには、2つの要素が含まれています。{{htmlelement("div")}} 要素で [`id`](/ja/docs/Web/HTML/Global_attributes/id) が `"host"` であるものと、テキストを格納する {{htmlelement("span")}} 要素です。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
 ```
 
-`open` の場合は、シャドウ DOM にメインページに書かれた JavaScript からアクセスできます。以下のように {{domxref("Element.shadowRoot")}} プロパティを利用してアクセスできます。
+`"host"` の要素をシャドウホストとして使用します。このホスト上で {{domxref("Element.attachShadow()", "attachShadow()")}} を呼び出してシャドウ DOM を作成し、このシャドウ DOM には、メイン DOM に対して行うのと同じようにノードを追加することができます。この例では、単一の `<span>` 要素を追加します。
 
 ```js
-const myShadowDom = myCustomElem.shadowRoot;
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
 ```
 
-シャドウルートを `mode: "closed"` が設定された状態で取り付けた場合、外部からシャドウ DOM にアクセスすることができません。 `myCustomElem.shadowRoot` は `null` を返します。シャドウ DOM を含む既成の要素、例えば `<video>` などはこれに該当します。
+結果は次のようになります。
 
-なお、同じ JavaScript の領域内において、これはシャドウルートを隠す方法として完全に安全な訳ではありません。コードが `Element.prototype.attachShadow` を上書きして、常に `mode: "open"` を使用することが可能だと[このブログ記事](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af)が示しています。しかし、悪意のあるコードがグローバルを操作することが懸念される環境でない限り、このことを心配する必要はないでしょう。さらに、ウェブ拡張機能はウィンドウのグローバルにアクセスしないため、シャドウ DOM をウェブ拡張機能から確実に保護することができます。
+{{EmbedLiveSample("Imperatively with JavaScript")}}
 
-シャドウ DOM をカスタム要素のコンストラクターの一部として取り付けた場合（シャドウ DOM の最も有用な用途です）、次のような方法を使用することになります。
+### HTML で宣言的に
 
-```js
-const shadow = this.attachShadow({ mode: "open" });
+シャドウ DOM を作成するのに JavaScript API を使用する方法は、クライアント側でレンダリングされるアプリケーションには良い選択肢かもしれません。それ以外のアプリケーションでは、サーバー側でレンダリングされた UI の方がパフォーマンスが良いことが多く、その結果、より使い勝手の良いものにできる可能性があります。そのような場合、{{htmlelement("template")}} 要素を使用してシャドウ DOM を宣言的に定義することができます。この動作の鍵となるのは{{glossary("enumerated","列挙型")}}の `shadowrootmode` 属性です。これは `open` または `closed` のどちらかに設定することができ、{{domxref("Element.attachShadow()", "attachShadow()")}} メソッドの `mode` オプションと同じ値です。
+
+```html
+<div id="host">
+  <template shadowrootmode="open">
+    <span>I'm in the shadow DOM</span>
+  </template>
+</div>
 ```
 
-シャドウ DOM を要素に取り付けた場合、その操作は通常の DOM 操作と同じ DOM API を使うだけでよいのです。
+{{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/simple.html", "", "")}}
 
-```js
-const para = document.createElement("p");
-shadow.appendChild(para);
-// etc.
+> [!NOTE]
+> 既定では、`<template>` の内容は表示されません。この場合、`shadowrootmode="open"` が記載されているため、シャドウルートがレンダリングされます。対応しているブラウザーでは、そのシャドウルート内の可視コンテンツが表示されます。
+
+ブラウザーが HTML を解釈し終えると、 {{htmlelement("template")}} 要素は、親要素（この例では `<div id="host">`）に追加された[シャドウルート](/ja/docs/Glossary/Shadow_tree)にラップされた内容に置き換えられます。その結果の DOM ツリーは次のようになります（DOM ツリーには `<template>` 要素はありません）。
+
+```plain
+- DIV id="host"
+  - #shadow-root
+    - SPAN
+      - #text: I'm in the shadow DOM
 ```
 
-## 簡単な例を一通り扱う
+なお、`shadowrootmode` に加えて、 `<template>` の `shadowrootclonable` や `shadowrootdelegatesfocus` 属性などの使用して、生成されるシャドウルートに他のプロパティを指定することができます。
 
-カスタム要素内のシンプルなシャドウ DOM を見てみましょう。 [`<popup-info>`](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component) （[ライブ例](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)を参照）です。この要素は画像アイコンとテキストを取り、アイコンをページに埋め込みます。アイコンがフォーカスされるとポップアップが表示され、さらなる情報を提供します。まずは `HTMLElement` を拡張して `PopUpInfo` というクラスを定義します。
+## JavaScript からのカプセル化
 
-```js
-class PopUpInfo extends HTMLElement {
-  constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
-    super();
+ここまでは、それほど多くはないように見えるかもしれません。しかし、ページで実行しているコードが、シャドウ DOM 内の要素にアクセスしようとした場合、何が起こるか見ていきましょう。
+
+このページは、2 つの {{htmlelement("button")}} 要素を追加したことを除いて、先のページと同じです。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+<br />
+
+<button id="upper" type="button">Uppercase span elements</button>
+<button id="reload" type="button">Reload</button>
+```
+
+"Uppercase span elements" ボタンをクリックすると、ページ内のすべての `<span>` 要素を探し、そのテキストを大文字に変換します。
+"Reload" ボタンをクリックすると、ページが再読み込みされるので、もう一度試してみることができます。
 
-    // ここに要素の機能を記述します
+```js
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
+
+const upper = document.querySelector("button#upper");
+upper.addEventListener("click", () => {
+  const spans = Array.from(document.querySelectorAll("span"));
+  for (const span of spans) {
+    span.textContent = span.textContent.toUpperCase();
   }
-}
+});
+
+const reload = document.querySelector("#reload");
+reload.addEventListener("click", () => document.location.reload());
 ```
 
-クラス定義の中で、要素のコンストラクターを定義し、その中で要素のインスタンスが生成されたときに、その要素が持つすべての機能を定義します。
+"Uppercase span elements" をクリックすると、{{domxref("Document.querySelectorAll()")}} が私たちのシャドウ DOM 内の要素を探していないことがわかります。それらはページ内の JavaScript から効果的に隠されています。
+
+{{EmbedLiveSample("Encapsulation from JavaScript")}}
 
-### シャドウルートの作成
+## Element.shadowRoot および "mode" オプション
 
-最初にシャドウルートをカスタム要素に追加します。
+上記の例では、引数 `{ mode: "open" }` を `attachShadow()` に渡しています。 モードが `"open"` に設定されている場合、ページ内の JavaScript は、シャドウホストの {{domxref("Element.shadowRoot", "shadowRoot")}} プロパティを通じて、シャドウ DOM の内部にアクセスすることができます。
+
+この例では、前述の例と同様に、HTML はシャドウホスト、メインの DOM ツリー内の `<span>` 要素、および 2 つのボタンを含んでいます。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+<br />
+
+<button id="upper" type="button">Uppercase shadow DOM span elements</button>
+<button id="reload" type="button">Reload</button>
+```
+
+この時点では、"Uppercase" ボタンは `shadowRoot` を使用して DOM 内の `<span>` 要素を探します。
 
 ```js
-// シャドウルートを生成
-const shadow = this.attachShadow({ mode: "open" });
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
+
+const upper = document.querySelector("button#upper");
+upper.addEventListener("click", () => {
+  const spans = Array.from(host.shadowRoot.querySelectorAll("span"));
+  for (const span of spans) {
+    span.textContent = span.textContent.toUpperCase();
+  }
+});
+
+const reload = document.querySelector("#reload");
+reload.addEventListener("click", () => document.location.reload());
 ```
 
-### シャドウ DOM 構造の作成
+この時点では、ページで実行されている JavaScript は、シャドウ DOM の内部にアクセスすることができます。
 
-次に、いくつかの DOM 操作を使用して、要素の内部シャドウ DOM 構造を作成します。
+{{EmbedLiveSample("Element.shadowRoot and the \"mode\" option")}}
 
-```js
-// span の生成
-const wrapper = document.createElement("span");
-wrapper.setAttribute("class", "wrapper");
-const icon = document.createElement("span");
-icon.setAttribute("class", "icon");
-icon.setAttribute("tabindex", "0");
-const info = document.createElement("span");
-info.setAttribute("class", "info");
+引数 `{mode: "open"}` は、ページにシャドウ DOM のカプセル化を解除する方法を提供します。ページにこの機能を与えたくない場合は、代わりに `{mode: "closed"}` を渡すと、`shadowRoot` は `null` を返します。
 
-// 属性の中身を取得し、 info の span の中に入れる
-const text = this.getAttribute("data-text");
-info.textContent = text;
+しかし、これを強力なセキュリティの仕組みだと考えるべきではありませ ん。例えば、ページで実行するブラウザー拡張機能など、回避する方法があるからです。むしろ、ページがシャドウ DOM ツリーの内部にアクセスすべきではないことを示すものです。
 
-// アイコンを挿入
-const img = document.createElement("img");
-img.src = this.hasAttribute("img")
-  ? this.getAttribute("img")
-  : "img/default.png";
-img.alt = this.hasAttribute("alt") ? this.getAttribute("alt") : "";
-icon.appendChild(img);
-```
+## CSS からのカプセル化
 
-### シャドウ DOM のスタイル付け
+このページのこのバージョンでは、HTML は元のバージョンと同じです。
 
-そのあと、 {{htmlelement("style")}} 要素を作り CSS でスタイルを付けます。
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+```
+
+JavaScript では、シャドウ DOM を作成します。
 
 ```js
-// CSS を生成してシャドウ DOM に適用
-let style = document.createElement("style");
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
+```
 
-style.textContent = `
-.wrapper {
-  position: relative;
-}
+今回は、ページ内の `<span>` 要素を対象とする CSS を指定します。
 
-.info {
-  font-size: 0.8rem;
-  width: 200px;
-  display: inline-block;
+```css
+span {
+  color: blue;
   border: 1px solid black;
-  padding: 10px;
-  background: white;
-  border-radius: 10px;
-  opacity: 0;
-  transition: 0.6s all;
-  position: absolute;
-  bottom: 20px;
-  left: 10px;
-  z-index: 3;
 }
+```
 
-img {
-  width: 1.2rem;
-}
+ページの CSS は、シャドウ DOM 内のノードには影響しません。
 
-.icon:hover + .info, .icon:focus + .info {
-  opacity: 1;
-}`;
-```
+{{EmbedLiveSample("Encapsulation from CSS")}}
 
-### シャドウ DOM をシャドウルートに追加
+## シャドウ DOM 内にスタイルを適用
 
-最後のステップは、生成した要素すべてをシャドウルートに取り付けることです。
+この節では、シャドウ DOM ツリー内でスタイル設定を行う 2 つの異なる方法を見ていきます。
 
-```js
-// 生成した要素をシャドウ DOM に取り付ける
-shadow.appendChild(style);
-shadow.appendChild(wrapper);
-wrapper.appendChild(icon);
-wrapper.appendChild(info);
-```
+- [プログラム的](#構築可能なスタイルシート)な方法。{{domxref("CSSStyleSheet")}} オブジェクトを構築し、それをシャドウルートに添付します。
+- [宣言的](#template_宣言への_style_要素の追加)な方法。 {{htmlelement("template")}} 要素の宣言に {{htmlelement("style")}} 要素を追加します。
+
+どちらの場合も、シャドウ DOM ツリーで定義されたスタイルはそのツリーにのみ適用されるため、ページスタイルがシャドウ DOM の要素に影響を与えないのと同様に、シャドウ DOM スタイルはページの他の部分の要素に影響を与えません。
 
-### カスタム要素の使用
+### 構築可能なスタイルシート
 
-一度クラスを定義すれば、[カスタム要素の使用](/ja/docs/Web/API/Web_components/Using_custom_elements)で説明したように、その要素を定義し、ページに配置するだけで簡単に使用できるようになります。
+シャドウ DOM のページ要素を構築可能なスタイルシートでスタイル設定するには、次の方法があります。
+
+1. 空の {{domxref("CSSStyleSheet")}} オブジェクトを作成する
+2. {{domxref("CSSStyleSheet.replace()")}} または {{domxref("CSSStyleSheet.replaceSync()")}} を使用して内容を設定
+3. それを {{domxref("ShadowRoot.adoptedStyleSheets")}} へ代入することでシャドウルートへ追加
+
+`CSSStyleSheet` で定義されたルールは、シャドウ DOM ツリーだけでなく、他にも割り当てられた DOM ツリーにも適用されます。
+
+ここで、再び、ホストと `<span>` を格納する HTML は次のとおりです。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+```
+
+今回は、シャドウ DOM を作成し、`CSSStyleSheet` オブジェクトを割り当てます。
 
 ```js
-// 新しい要素を定義
-customElements.define("popup-info", PopUpInfo);
+const sheet = new CSSStyleSheet();
+sheet.replaceSync("span { color: red; border: 2px dotted black;}");
+
+const host = document.querySelector("#host");
+
+const shadow = host.attachShadow({ mode: "open" });
+shadow.adoptedStyleSheets = [sheet];
+
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
 ```
 
+シャドウ DOM ツリーで定義されたスタイルは、ページの他の部分には適用されません。
+
+{{EmbedLiveSample("Constructable stylesheets")}}
+
+### `<template>` 宣言への `<style>` 要素の追加
+
+`CSSStyleSheet` オブジェクトを作成する代わりに、{{htmlelement("style")}} 要素をウェブコンポーネントを定義するために使用する {{htmlelement("template")}} 要素内に記載することもできます。
+
+この場合、HTML には次の `<template>` 宣言が含まれます。
+
 ```html
-<popup-info
-  img="img/alt.png"
-  data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info>
+<template id="my-element">
+  <style>
+    span {
+      color: red;
+      border: 2px dotted black;
+    }
+  </style>
+  <span>I'm in the shadow DOM</span>
+</template>
+
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
 ```
 
-### 内部スタイルと外部スタイル
+JavaScript で、シャドウ DOM を作成し、そこに `<template>` の内容を追加します。
 
-上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。
+```js
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const template = document.getElementById("my-element");
+
+shadow.appendChild(template.content);
+```
+
+繰り返しになりますが、`<template>` で定義されたスタイルはシャドウ DOM ツリー内でのみ適用され、ページの他の部分には適用されません。
+
+{{EmbedLiveSample("adding_style_elements_in_template_declarations")}}
+
+### プログラム型と宣言型の選択肢の選択
+
+どのオプションを使用するかは、アプリケーションと環境設定によって異なります。
+
+`CSSStyleSheet` を作成し、`adoptedStyleSheets` を使用してシャドウルートに割り当てることで、単一のスタイルシートを作成し、それを複数の DOM ツリーで共有することができます。例えば、コンポーネントライブラリーで単一のスタイルシートを作成し、そのライブラリーに属するすべてのカスタム要素で共有することができます。このスタイルシートは、ブラウザーによって一度だけ解釈されます。また、スタイルシートに動的な変更を加え、そのシートを使用するすべてのコンポーネントに伝搬させることもできます。
+
+`<style>` 要素を添付する手法は、宣言的でありたい場合や、保有するスタイルがいくつかある場合、異なるコンポーネント間でスタイルを共有する必要がない場合に最適です。
+
+## シャドウ DOM とカスタム要素
 
-例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-external-stylesheet/main.js)はこちら）。
+シャドウ DOM によってカプセル化が提供されなければ、[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)は非常に壊れやすいものになってしまいます。 ページで実行する JavaScript や CSS によって、カスタム要素の動作やレイアウトが誤って壊れてしまうことが簡単に起こり得ます。 カスタム要素を開発する立場では、カスタム要素内で適用されるセレクターが、カスタム要素を使用することを選んだページで適用されるセレクターと競合しているかどうかを知ることはできません。
+
+カスタム要素は、ベースの {{domxref("HTMLElement")}} または {{domxref("HTMLParagraphElement")}} などの組み込みの HTML 要素を拡張するクラスとして実装されます。通常、カスタム要素自体がシャドウホストとなり、その要素がルートの下に複数の要素を作成し、要素の内部実装を提供します。
+
+次の例では、単一色で塗りつぶされた円を描画するカスタム要素 `<filled-circle>` を作成します。
 
 ```js
-// 外部スタイルシートをシャドウ DOM に適用
-const linkElem = document.createElement("link");
-linkElem.setAttribute("rel", "stylesheet");
-linkElem.setAttribute("href", "style.css");
+class FilledCircle extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    // Create a shadow root
+    // The custom element itself is the shadow host
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // create the internal implementation
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const circle = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "circle",
+    );
+    circle.setAttribute("cx", "50");
+    circle.setAttribute("cy", "50");
+    circle.setAttribute("r", "50");
+    circle.setAttribute("fill", this.getAttribute("color"));
+    svg.appendChild(circle);
+
+    shadow.appendChild(svg);
+  }
+}
 
-// 生成された要素をシャドウ DOM に添付
-shadow.appendChild(linkElem);
+customElements.define("filled-circle", FilledCircle);
+```
+
+```html
+<filled-circle color="blue"></filled-circle>
 ```
 
-なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。
+{{EmbedLiveSample("Shadow DOM and custom elements", 100, 160)}}
 
-最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。
+カスタム要素の実装のさまざまな側面を示す例については、[カスタム要素のガイド]を参照してください。
 
 ## 関連情報
 
 - [カスタム要素の使用](/ja/docs/Web/API/Web_components/Using_custom_elements)
 - [テンプレートとスロットの使用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)
+- {{domxref("Element.attachShadow()")}}
+- {{domxref("ShadowRoot.adoptedStyleSheets")}}
+- {{domxref("CSSStyleSheet.replace()")}}
+- {{domxref("CSSStyleSheet.replaceSync()")}}
+- {{HTMLelement("template")}}
+- [CSS スコープ化](/ja/docs/Web/CSS/CSS_scoping)モジュール
+- {{CSSXref(":host")}}
+- {{CSSXref(":host_function", ":host()")}}
+- {{CSSXref(":host-context", ":host-context()")}}
+- {{CSSXref("::slotted", "::slotted()")}}
+- [CSS シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)モジュール
+- {{CSSXref("::part")}}
diff --git a/files/ja/web/api/web_components/using_templates_and_slots/index.md b/files/ja/web/api/web_components/using_templates_and_slots/index.md
index 8d67728ae21dc8..18e66663041328 100644
--- a/files/ja/web/api/web_components/using_templates_and_slots/index.md
+++ b/files/ja/web/api/web_components/using_templates_and_slots/index.md
@@ -2,7 +2,7 @@
 title: テンプレートとスロットの使用
 slug: Web/API/Web_components/Using_templates_and_slots
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: bc7e82aa6db60568d7146ee285918550bbe4b8ce
 ---
 
 {{DefaultAPISidebar("Web Components")}}
@@ -18,7 +18,7 @@ l10n:
 簡単な例を見てみましょう。
 
 ```html
-<template id="my-paragraph">
+<template id="custom-paragraph">
   <p>My paragraph</p>
 </template>
 ```
@@ -26,7 +26,7 @@ l10n:
 これはページ上に表示されず、以下のようなコードで JavaScript で参照を取得し、 DOM に追加することで表示されます。
 
 ```js
-let template = document.getElementById("my-paragraph");
+let template = document.getElementById("custom-paragraph");
 let templateContent = template.content;
 document.body.appendChild(templateContent);
 ```
@@ -45,7 +45,7 @@ customElements.define(
   class extends HTMLElement {
     constructor() {
       super();
-      let template = document.getElementById("my-paragraph");
+      let template = document.getElementById("custom-paragraph");
       let templateContent = template.content;
 
       const shadowRoot = this.attachShadow({ mode: "open" });
@@ -63,7 +63,7 @@ customElements.define(
 したがって、例えば次のようにすると、
 
 ```html
-<template id="my-paragraph">
+<template id="custom-paragraph">
   <style>
     p {
       color: white;
diff --git a/files/ja/web/api/websockets_api/index.md b/files/ja/web/api/websockets_api/index.md
index 00ede1d0bb0e6c..62cc9d57673238 100644
--- a/files/ja/web/api/websockets_api/index.md
+++ b/files/ja/web/api/websockets_api/index.md
@@ -2,60 +2,85 @@
 title: WebSocket API (WebSockets)
 slug: Web/API/WebSockets_API
 l10n:
-  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
+  sourceCommit: f49de43625cd621fd73c7ba2e9a2db3d8566580f
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
-**WebSocket API** は、ユーザーのブラウザーとサーバー間で対話的な通信セッションを開くことができる先進技術です。この API によって、サーバーにメッセージを送信したり、応答をサーバーにポーリングすることなく、イベント駆動型のレスポンスを受信したりすることができます。
+**WebSocket API** は、ユーザーのブラウザーとサーバー間で対話的な通信セッションを開くことができるものです。この API を使用すると、サーバーにメッセージを送信し、サーバーから返信をポーリングすることなく応答を受信することができます。
+
+WebSocket API は、ウェブソケット接続を作成して使用するための、{{domxref("WebSocket")}} インターフェイスと {{domxref("WebSocketStream")}} インターフェイスという 2 つの異なるメカニズムを提供しています。
+
+- `WebSocket` インターフェイスは安定しており、ブラウザーとサーバーの対応も充実しています。しかし、[背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)には対応していません。そのため、アプリケーションがメッセージを処理するよりも速いペースでメッセージが到着すると、メッセージをバッファーに保存することで端末のメモリーがいっぱいになったり、CPU 使用率が 100% になって応答不能になったり、あるいはその両方が起こります。
+- `WebSocketStream` インターフェイスは、`WebSocket` の{{jsxref("Promise","プロミス","","nocode")}}ベースの別バージョンです。[ストリーム API](/ja/docs/Web/API/Streams_API) を使用してメッセージの送受信を処理し、ソケット接続がストリームの背圧を自動的に利用できます。つまり、アプリケーションのボトルネックを避けるために読み取りまたは書き込みの速度を調整できます。しかし、`WebSocketStream` は標準化されておらず、現在、1 つのレンダリングエンジンしか対応していません。
+
+それに加えて、[WebTransport API](/ja/docs/Web/API/WebTransport_API) が多くのアプリケーションで WebSocket API に取って代わることも予想されます。WebTransport は、汎用性の高い低レベル API で、背圧や、`WebSocket` や `WebSocketStream` では対応していない機能、例えば、一方向ストリーム、順不同配信、データグラムを介した信頼性の低いデータ転送など、他にも多くの機能を提供します。WebTransport は WebSocket よりも複雑で、ブラウザーの対応も限定的ですが、高度なソリューションの実装が可能です。標準の WebSocket 接続が用途に適しており、幅広いブラウザーとの互換性が必要な場合は、WebSockets API を用いてすばやく実装し、実行することができます。しかし、アプリケーションに標準以外のカスタムソリューションが要求される場合は、WebTransport API を使用すべきでしょう。
 
 > [!NOTE]
-> WebSocket のコネクションは機能的にどこか標準 Unix スタイルのソケットに似ていますが、関連はありません。
+> WebSocket の接続は機能的にどこか標準 Unix スタイルのソケットに似ていますが、関連はありません。
 
 ## インターフェイス
 
 - [`WebSocket`](/ja/docs/Web/API/WebSocket)
   - : WebSocket サーバーに接続し、その接続を通じてデータを送受信するための主要インターフェイス
+- [`WebSocketStream`](/ja/docs/Web/API/WebSocketStream) {{non-standard_inline}}
+  - : WebSocket サーバーに接続するためのプロミスベースのインターフェイス。[ストリーム](/ja/docs/Web/API/Streams_API)を使用して接続上のデータの送受信を行います。
 - [`CloseEvent`](/ja/docs/Web/API/CloseEvent)
   - : 接続が閉じた時に WebSocket オブジェクトによって送信されるイベントです。
 - [`MessageEvent`](/ja/docs/Web/API/MessageEvent)
   - : サーバーからメッセージを受信した時に WebSocket オブジェクトによって送信されるイベント
 
+## 関連 HTTP ヘッダー
+
+[WebSocket のハンドシェイク](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#websocket_ハンドシェイク)では、HTTP ヘッダーが使用されます。
+
+- {{HTTPHeader("Sec-WebSocket-Key")}}
+  - : クライアントからのノンスを保持する HTTP リクエストヘッダー。
+    これは、[WebSocket 開始時のハンドシェイク](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#websocket_ハンドシェイク)で使用され、クライアントが明示的に WebSocket を開く意図があることを確認します。 ブラウザーによって自動的に追加されます。
+    ブラウザーによって自動的に追加されます。
+- {{HTTPHeader("Sec-WebSocket-Accept")}}
+  - : WebSocket の開くためのハンドシェイクで使用する HTTP {{glossary("response header","レスポンスヘッダー")}}で、サーバーが WebSocket 接続へのアップグレードを望んでいることを示します。
+    ディレクティブの値は、対応するリクエストの `Sec-WebSocket-Key` の値から計算されます。
+- {{HTTPHeader("Sec-WebSocket-Version")}}
+  - : リクエストで、クライアントが理解する WebSocket プロトコルのバージョンを示す HTTP ヘッダー。
+    レスポンスでは、リクエストされたプロトコルバージョンがサーバーで対応していない場合にのみ送信され、サーバーが対応しているバージョンが掲載されています。
+- {{HTTPHeader("Sec-WebSocket-Protocol")}}
+  - : リクエストでは、クライアントが対応しているサブプロトコルを推奨する順番で示す HTTP ヘッダーです。
+    レスポンスでは、サーバーがクライアントの環境設定から選択したサブプロトコルを示します。
+- {{HTTPHeader("Sec-WebSocket-Extensions")}}
+  - : リクエストでは、クライアントが対応している WebSocket 拡張機能を推奨する順番で示す HTTP ヘッダーです。
+    レスポンスでは、サーバーがクライアントの環境設定から選択した拡張機能です。
+
 ## ガイド
 
-- [WebSocket クライアントアプリケーションの記述](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
+- [WebSocket クライアントアプリケーションを書く](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
 - [WebSocket サーバーの記述](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)
 - [WebSocket サーバーを C# で書く](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_server)
 - [WebSocket サーバーを Java で書く](/ja/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java)
 - [WebSocket サーバーを JavaScript (Deno) で書く](/ja/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno)
+- [WebSocketStream を用いてクライアントを書く](/ja/docs/Web/API/WebSockets_API/Using_WebSocketStream)
 
 ## ツール
 
 - [AsyncAPI](https://www.asyncapi.com/): WebSocket のようなプロトコルに基づいたイベントドリブン型アーキテクチャを記述するための仕様です。 OpenAPI 仕様で REST API を記述するのと同じように、 WebSocket ベースの API を記述するために使用することができます。 [WebSocket で AsyncAPI の利用を検討すべき理由](https://www.asyncapi.com/blog/websocket-part1)と[利用する方法](https://www.asyncapi.com/blog/websocket-part2)を紹介します。
-- [HumbleNet](https://hacks.mozilla.org/2017/06/introducing-humblenet-a-cross-platform-networking-library-that-works-in-the-browser/): ブラウザーで動作するクロスプラットフォームのネットワークライブラリです。ブラウザー間の違いを抽象化する WebSocket や WebRTC の C ラッパー、ゲームやその他のアプリで複数ユーザーのネットワーク機能を作成するものから成ります。
 - [µWebSockets](https://github.com/uNetworking/uWebSockets): [C++11](https://isocpp.org/) および [Node.js](https://nodejs.org) で書かれた可用性の高い WebSocket サーバーとクライアントの実装です。
 - [Socket.IO](https://socket.io): 長いポーリングと WebSocket ベースのサードバーティ―の [Node.js](https://nodejs.org) 用転送プロトコルです。
 - [SocketCluster](https://socketcluster.io/): スケーラビリティに焦点を当てた [Node.js](https://nodejs.org) 用の pub/sub WebSocket フレームワークです。
 - [WebSocket-Node](https://github.com/theturtle32/WebSocket-Node): [Node.js](https://nodejs.org) 用の WebSocket サーバー API 実装です。
 - [Total.js](https://www.totaljs.com): [Node.js](https://nodejs.org/en/) 用の ウェブアプリケーションフレームワーク(使用例: [WebSocket chat](https://github.com/totaljs/examples/tree/master/websocket))
-- [Faye](https://www.npmjs.com/package/faye-websocket): [Node.js](https://nodejs.org) 用の [WebSocket](/ja/docs/Web/API/WebSockets_API) (双方向接続) と [EventSource](/ja/docs/Web/API/EventSource) (片方向接続) サーバーおよびクライアント
-- [SignalR](https://dotnet.microsoft.com/en-us/apps/aspnet/signalr): SignalR は単一のコードだけで、もし WebSockets が使用可能な場合、基盤として WebSockets を使用し、そうでない場合はほかの代替技術にフォールバックします。
+- [SignalR](https://dotnet.microsoft.com/ja/apps/aspnet/signalr): SignalR は単一のコードだけで、もし WebSockets が使用可能な場合、基盤として WebSockets を使用し、そうでない場合はほかの代替技術にフォールバックします。
 - [Caddy](https://caddyserver.com/): WebSocket として任意のコマンド (stdin/stdout) を中継することができるウェブサーバーです。
-- [ws](https://github.com/websockets/ws): [Node.js](https://nodejs.org/) のための有名な WebSocket クライアント＆サーバーライブラリです。
-- [jsonrpc-bidirectional](https://github.com/bigstepinc/jsonrpc-bidirectional): 非同期の RPC で、単一の接続を用いて、サーバー上にエクスポートされた機能と、同時にクライアント上のものがあります (クライアントがサーバーを呼び出すことができ、サーバーもクライアントを呼び出すことができます)。
+- [ws](https://github.com/websockets/ws): [Node.js](https://nodejs.org/) のための有名な WebSocket クライアント＆サーバーライブラリーです。
 - [cowboy](https://github.com/ninenines/cowboy): Cowboy は高速で最新の HTTP サーバーで、 Erlang/OTP のためのものであり、 WebSocket に対応しています。
 - [ZeroMQ](https://zeromq.org): ZeroMQ は、インプロセス、IPC、TCP、UDP、TIPC、マルチキャスト、WebSocket でメッセージを伝送する組み込み可能なネットワーキングライブラリーです。
 - [WebSocket King](https://websocketking.com): WebSocket サーバーの開発、テスト、作業を支援するクライアントツールです。
 - [PHP WebSocket Server](https://github.com/napengam/phpWebSocketServer): WebSocket の wss:\// または ws:\// および通常ソケットの ssl:\//, tcp:\// を介して接続を処理するために PHP で書かれたサーバーです。
-- [Channels](https://channels.readthedocs.io/en/stable/index.html): WebSocket（および長時間動作する非同期接続を必要とする他のプロトコル）の対応を追加する Django ライブラリーです。
+- [Django Channels](https://channels.readthedocs.io/en/stable/index.html): WebSocket（および長時間動作する非同期接続を必要とする他のプロトコル）の対応を追加する Django ライブラリーです。
+- [(Phoenix) Channels](https://hexdocs.pm/phoenix/channels.html): Elixir Phoenix フレームワークで WebSocket を使用したスケーラブルなリアルタイム通信です。
+- [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view): Elixir Phoenix フレームワークで WebSocket によるリアルタイムの対話型ウェブ体験です。
 - [Flask-SocketIO](https://flask-socketio.readthedocs.io/en/latest/): Flask アプリケーションに、クライアントとサーバー間の低遅延な双方向通信を提供します。
 - [Gorilla WebSocket](https://pkg.go.dev/github.com/gorilla/websocket): Gorilla WebSocket は、WebSocket プロトコルの [Go](https://go.dev/) による実装です。
 
-## 関連トピック
-
-- [AJAX](/ja/docs/Web/Guide/AJAX)
-- [JavaScript](/ja/docs/Web/JavaScript)
-
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/websockets_api/using_websocketstream/index.md b/files/ja/web/api/websockets_api/using_websocketstream/index.md
new file mode 100644
index 00000000000000..da174d6f1585ed
--- /dev/null
+++ b/files/ja/web/api/websockets_api/using_websocketstream/index.md
@@ -0,0 +1,300 @@
+---
+title: WebSocketStream でクライアントを書く
+slug: Web/API/WebSockets_API/Using_WebSocketStream
+l10n:
+  sourceCommit: d102514706e844bd642850aa340c9645c74bf70c
+---
+
+{{DefaultAPISidebar("WebSockets API")}}{{non-standard_header}}
+
+{{domxref("WebSocketStream")}} API は、{{jsxref("Promise", "プロミス", "", 1)}}ベースのもうひとつの選択肢であり、クライアントサイドの WebSocket 接続の作成と使用にWebSocket を使用します。 `WebSocketStream` は、[ストリーム API](/ja/docs/Web/API/Streams_API) を使用してメッセージの送受信を処理するため、ソケット接続はストリームの[背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)を自動的に利用することができ（開発者による追加の操作は不要）、アプリケーションのボトルネックを回避するために読み取りまたは書き込みの速度を調整することができます。
+
+この記事では、{{domxref("WebSocketStream")}} API を使用して WebSocket クライアントを作成する方法を説明します。
+
+## 機能検出
+
+`WebSocketStream` API に対応しているかどうかを確認するには、次のようにします。
+
+```js
+if ("WebSocketStream" in self) {
+  // WebSocketStream に対応
+}
+```
+
+## WebSocketStream オブジェクトの作成
+
+WebSocket クライアントを作成するには、まず新しい `WebSocketStream` インスタンスを {{domxref("WebSocketStream.WebSocketStream", "WebSocketStream()")}} コンストラクターで作成する必要があります。最もシンプルな形では、WebSocket サーバーの URL を引数として使用します。
+
+```js
+const wss = new WebSocketStream("wss://example.com/wss");
+```
+
+また、カスタムプロトコルや {{domxref("AbortSignal")}} を含むオプションオブジェクトを受け取ることもできます（[接続の切断](#接続の切断)を参照）。
+
+```js
+const controller = new AbortController();
+const queueWSS = new WebSocketStream("wss://example.com/queue", {
+  protocols: ["amqp", "mqtt"],
+  signal: controller.signal,
+});
+```
+
+## データの送信と受信
+
+`WebSocketStream` インスタンスには {{domxref("WebSocketStream.opened", "opened")}} プロパティがあります。これは、WebSocket 接続が正常に開かれると、{{domxref("ReadableStream")}} と {{domxref("WritableStream")}} インスタンスを含むオブジェクトで履行されるプロミスを返します。
+
+```js
+const { readable, writable } = await wss.opened;
+```
+
+これらのオブジェクトに対して {{domxref("ReadableStream.getReader", "getReader()")}} と {{domxref("WritableStream.getWriter", "getWriter()")}} を呼び出すと、それぞれ {{domxref("ReadableStreamDefaultReader")}} および {{domxref("WritableStreamDefaultWriter")}} が返されます。これらは、それぞれソケット接続の読み取りと書き込みに使用できます。
+
+```js
+const reader = readable.getReader();
+const writer = writable.getWriter();
+```
+
+ソケットへデータを書き込むには、 {{domxref("WritableStreamDefaultWriter.write()")}} が利用できます。
+
+```js
+writer.write("My message");
+```
+
+ソケットからデータを読み込むには、ストリームが終了するまで、{{domxref("ReadableStreamDefaultReader.read()")}} を継続的に呼び出すことができます。ストリームが終了すると、`done` が `true` になります。
+
+```js
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+
+  // Process value in some way
+}
+```
+
+ブラウザーは必要に際して背圧を適用することで、クライアントがデータを受信および送信する速度を自動的に制御します。クライアントが `read()` できる速度よりも速い速度でデータが到着している場合、基盤となるストリーム API がサーバーに背圧をかけます。さらに、`write()` 操作は安全に行える場合にのみ実行されます。
+
+## 接続の切断
+
+`WebSocketStream` により、以前に `WebSocket` の {{domxref("WebSocket.close_event", "close")}} および {{domxref("WebSocket.error_event", "error")}} イベントで利用可能だった情報は、{{domxref("WebSocketStream.closed", "closed")}} プロパティで利用できるようになりました。これは、終了コード（[`CloseEvent` ステータスコード](/ja/docs/Web/API/CloseEvent/code#値)の完全なリストを参照）とサーバーが接続を終了した理由を示す理由を含むオブジェクトで履行されるプロミスを返します。
+
+```js
+const { code, reason } = await wss.closed;
+```
+
+前述の通り、WebSocket 接続は {{domxref("AbortController")}} を使用して終了することができます。必要な {{domxref("AbortSignal")}} は、`WebSocketStream` コンストラクターの作成時に渡され、必要に応じて {{domxref("AbortController.abort()")}} を呼び出すことができます。
+
+```js
+const controller = new AbortController();
+const wss = new WebSocketStream("wss://example.com/wss", {
+  signal: controller.signal,
+});
+
+// しばらく後
+
+controller.abort();
+```
+
+他に、{{domxref("WebSocketStream.close()")}} メソッドを使用して接続を閉じることもできます。これは主に、カスタムコードや理由を指定したい場合に利用されます。
+
+```js
+wss.close({
+  code: 4000,
+  reason: "Night draws to a close",
+});
+```
+
+> [!NOTE]
+> 使用するサーバーの設定やステータスコードによっては、サーバーが、終了理由に適した有効なコードを優先して、カスタムコードを無視することがあります。
+
+## 完全なサンプルクライアント
+
+`WebSocketStream` の基本的な使い方を示すために、サンプルクライアントを作成しました。記事の一番下に[全リスト](#全リスト)がありますので、以下の説明と合わせてご覧ください。
+
+> [!NOTE]
+> この例を動作させるには、サーバーコンポーネントも必要です。[WebSocket サーバーを JavaScript (Deno) で書く](/ja/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno)で説明されている Deno サーバーと連携するようにクライアントを書きましたが、互換性のあるサーバーであればどれでも構いません。
+
+デモの HTML は以下の通りです。情報的な [`<h2>`](/ja/docs/Web/HTML/Element/Heading_Elements) と {{htmlelement("p")}} 要素、初期状態では無効になっている WebSocket 接続を閉じるための{{htmlelement("button")}}、および出力メッセージを書き込むための {{htmlelement("div")}} があります。
+
+```html
+<h2>WebSocketStream Test</h2>
+<p>Sends a ping every five seconds</p>
+<button id="close" disabled>Close socket connection</button>
+<div id="output"></div>
+```
+
+次に JavaScript です。まず、出力先の `<div>` と終了タグの `<button>` の参照を取得し、メッセージを `<div>` に挿入するユーティリティ関数を定義します。
+
+```js
+const output = document.querySelector("#output");
+const closeBtn = document.querySelector("#close");
+
+function writeToScreen(message) {
+  const pElem = document.createElement("p");
+  pElem.textContent = message;
+  output.appendChild(pElem);
+}
+```
+
+次に、`WebSocketStream` を検出する `if ... else` 構造を作成し、対応していないブラウザーに対して情報メッセージを出力します。
+
+```js
+if (!("WebSocketStream" in self)) {
+  writeToScreen("Your browser does not support WebSocketStream");
+} else {
+  // supporting code path
+}
+```
+
+補助的なコードパスでは、まず WebSocket サーバーの URL を含む変数を定義し、新しい `WebSocketServer` インスタンスを構築します。
+
+```js
+const wsURL = "ws://127.0.0.1/";
+const wss = new WebSocketStream(wsURL);
+```
+
+> [!NOTE]
+> 実際のアプリケーションでは、安全な WebSocket (`wss://`) を使用するのが最善の方法です。しかし、このデモではローカルホストに接続しているため、例を動作させるには安全ではない WebSocket プロトコル (`ws://`) を使用する必要があります。
+
+私たちのコードの大部分は `start()` 関数内に含まれており、私たちはこの関数を定義し、すぐに呼び出します。{{domxref("WebSocketStream.opened", "opened")}} のプロミスを待ち、それが履行された後に、接続が成功したことを読み手に知らせるメッセージを書き込みます。そして、{{domxref("ReadableStreamDefaultReader")}} および {{domxref("WritableStreamDefaultWriter")}} のインスタンスを返された `readable` および `writable` から作成します。
+
+次に、`start()` として、サーバーに "ping" メッセージを送信し、"pong" メッセージを受信する関数を作成し、それを呼び出します。関数本体では、`wss.opened` プロミスを待ち、その履行値からリーダーとライターを作成します。ソケットが開いたら、そのことをユーザーに通知し、Close ボタンを有効にします。次に、ソケットに `"ping"` 値を `write()` し、そのことをユーザーに通知します。この時点で、サーバーは `"pong"` メッセージで応答します。応答の `read()` を待ち、ユーザーに通知します。その後、5 秒のタイムアウト後にサーバーに別の `"ping"` を送信します。この動作を繰り返すことで、 `"ping"`/`"pong"` のループが延々と続きます。
+
+```js
+async function start() {
+  const { readable, writable } = await wss.opened;
+  writeToScreen("CONNECTED");
+  closeBtn.disabled = false;
+  const reader = readable.getReader();
+  const writer = writable.getWriter();
+
+  writer.write("ping");
+  writeToScreen("SENT: ping");
+
+  while (true) {
+    const { value, done } = await reader.read();
+    writeToScreen(`RECEIVED: ${value}`);
+    if (done) {
+      break;
+    }
+
+    setTimeout(async () => {
+      try {
+        await writer.write("ping");
+        writeToScreen("SENT: ping");
+      } catch (e) {
+        writeToScreen(`Error writing to socket: ${e.message}`);
+      }
+    }, 5000);
+  }
+}
+
+start();
+```
+
+> **メモ:** {{domxref("setTimeout")}} 関数は、アプリケーションがストリームを閉じた後に書き込みを行おうとした場合に発生する可能性のあるエラーを処理するために、`write()` 呼び出しを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックで囲みます。
+
+WebSocket 接続が閉じられた場合、{{domxref("WebSocketStream.closed", "closed")}} プロミスが履行されることで通知されるように、コードと理由をユーザーに通知するプロミススタイルのコードセクションを追加しました。
+
+```js
+wss.closed.then((result) => {
+  writeToScreen(
+    `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+  );
+  console.log("Socket closed", result.closeCode, result.reason);
+});
+```
+
+最後に、コードとカスタムの理由を指定して、`close()` メソッドを使用して接続を閉じるイベントリスナーを Close ボタンに追加します。この関数は Close ボタンを無効にもします。接続がすでに閉じられた後は、ユーザーにボタンを押させたくないからです。
+
+```js
+closeBtn.addEventListener("click", () => {
+  wss.close({
+    code: 1000,
+    reason: "That's all folks",
+  });
+
+  closeBtn.disabled = true;
+});
+```
+
+### 完全なリスト
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>WebSocketStream Test</title>
+  </head>
+
+  <body>
+    <h2>WebSocketStream Test</h2>
+    <p>Sends a ping every five seconds</p>
+    <button id="close" disabled>Close socket connection</button>
+    <div id="output"></div>
+    <script>
+      const output = document.querySelector("#output");
+      const closeBtn = document.querySelector("#close");
+
+      function writeToScreen(message) {
+        const pElem = document.createElement("p");
+        pElem.textContent = message;
+        output.appendChild(pElem);
+      }
+
+      if (!("WebSocketStream" in self)) {
+        writeToScreen("Your browser does not support WebSocketStream");
+      } else {
+        const wsURL = "ws://127.0.0.1/";
+        const wss = new WebSocketStream(wsURL);
+
+        console.log(wss.url);
+
+        async function start() {
+          const { readable, writable, extensions, protocol } = await wss.opened;
+          writeToScreen("CONNECTED");
+          closeBtn.disabled = false;
+          const reader = readable.getReader();
+          const writer = writable.getWriter();
+
+          writer.write("ping");
+          writeToScreen("SENT: ping");
+
+          while (true) {
+            const { value, done } = await reader.read();
+            writeToScreen(`RECEIVED: ${value}`);
+            if (done) {
+              break;
+            }
+
+            setTimeout(() => {
+              writer.write("ping");
+              writeToScreen("SENT: ping");
+            }, 5000);
+          }
+        }
+
+        start();
+
+        wss.closed.then((result) => {
+          writeToScreen(
+            `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+          );
+          console.log("Socket closed", result.closeCode, result.reason);
+        });
+
+        closeBtn.addEventListener("click", () => {
+          wss.close({
+            code: 1000,
+            reason: "That's all folks",
+          });
+
+          closeBtn.disabled = true;
+        });
+      }
+    </script>
+  </body>
+</html>
+```
diff --git a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
index 6d98158bb72a33..b50e4715056328 100644
--- a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
+++ b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
@@ -1,11 +1,11 @@
 ---
-title: Java による WebSocket サーバーの記述
+title: Java で WebSocket サーバーを書く
 slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: 44c4ec928281dc2d7c5ea42b7d2c74a2013f16ac
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
 この例では、Oracle Java を使用して WebSocket API サーバーを作成する方法を示します。
 
diff --git a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
index cf05008b838cec..3954e9375fd235 100644
--- a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
+++ b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
@@ -2,10 +2,10 @@
 title: WebSocket サーバーを JavaScript (Deno) で書く
 slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno
 l10n:
-  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
+  sourceCommit: b065c09b79d18abf0f04778c9307e1c312b8c6f9
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
 この例では、 Deno を使用して WebSocket API サーバーを作成する方法を、付随するウェブページと共に示します。
 
@@ -55,7 +55,7 @@ Deno.serve({
 
 `Deno.upgradeWebSocket()` は接続をウェブソケット接続にアップグレードします。これは[プロトコルアップグレードメカニズム](/ja/docs/Web/HTTP/Protocol_upgrade_mechanism)で詳しく説明されています。
 
-[`Deno.serve()`](https://deno.land/api@v1.36.4?s=Deno.serve) は、 `Deno.listen()` と `Deno.serveHttp()` を基盤に使用し、 HTTP サーバーを簡単に設定するための上位インターフェイスです。これがなければ、コードは次のように見ていくことになります。
+[`Deno.serve()`](https://docs.deno.com/api/deno/~/Deno.serve) は、 `Deno.listen()` と `Deno.serveHttp()` を基盤に使用し、 HTTP サーバーを簡単に設定するための上位インターフェイスです。これがなければ、コードは次のように見ていくことになります。
 
 ```js
 for await (const conn of Deno.listen({ port: 80 })) {
diff --git a/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md
index 84fe25f66a63b5..50986d7f1ef215 100644
--- a/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -1,8 +1,8 @@
 ---
-title: WebSocket クライアントアプリケーションの記述
+title: WebSocket クライアントアプリケーションを書く
 slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
 l10n:
-  sourceCommit: 8a9085b96d0135920be9b281d4500ff72a7a8369
+  sourceCommit: 4bd2e8957a40a8f31484f9aea3725bdfe78a921a
 ---
 
 {{DefaultAPISidebar("WebSockets API")}} {{AvailableInWorkers}}
@@ -26,7 +26,8 @@ webSocket = new WebSocket(url, protocols);
 - `url`
   - : 接続先 URL。これは、 WebSocket サーバーが応答する URL である必要があります。
     これは URL スキームに `wss://` を使用するべきですが、ソフトウェアによってはローカル接続用に安全ではない `ws://` を使用することを許可していることがあります。
-- `protocols` {{ optional_inline() }}
+    相対 URL 値と `https://` および `http://` スキームも、[ほとんどのブラウザーの最新バージョン](/ja/docs/Web/API/WebSocket/WebSocket#ブラウザーの互換性)で許可されています。
+- `protocols` {{optional_inline}}
   - : 単一のプロトコル文字列または一連のプロトコル文字列。
     これらの文字列はサブプロトコルを示すのに使用されるため、単一のサーバーで複数の WebSocket サブプロトコルを実装できます（たとえば、特定の `protocol` に応じて 1 つのサーバーで異なる種類の対話を処理できるようにする）。
     プロトコル文字列を指定しない場合、空文字列であると仮定されます。
@@ -36,7 +37,7 @@ webSocket = new WebSocket(url, protocols);
 
 ### 接続エラー
 
-接続中にエラーが発生した場合、最初に `error` という名前の単純なイベントが {{domxref("WebSocket")}} オブジェクトに送信され（その結果、その {{domxref("WebSocket/error_event", "onerror")}} ハンドラーが呼び出されます）、次に {{domxref("CloseEvent")}} が `WebSocket` オブジェクトに送信され（{{domxref("WebSocket/close_event", "onclose")}} ハンドラーが呼び出されます）接続の終了の理由を示します。
+接続を試行中にエラーが発生した場合、最初の [`error` イベント](/ja/docs/Web/API/WebSocket/error_event)が {{domxref("WebSocket")}} オブジェクトに送信され（これにより、すべてのハンドラーが呼び出されます）、接続が閉じられた理由を示す [`close` イベント](/ja/docs/Web/API/WebSocket/close_event)が続きます。
 
 ブラウザーは {{domxref("CloseEvent")}} 経由で、コンソールにも [RFC 6455 第 7.4 節](https://datatracker.ietf.org/doc/html/rfc6455#section-7.4)で定義されている終了コードと同時に、もっと説明的なエラーメッセージを出力するができます。
 
@@ -52,7 +53,8 @@ const exampleSocket = new WebSocket(
 );
 ```
 
-返されると、 {{domxref("WebSocket.readyState", "exampleSocket.readyState")}} は `CONNECTING` です。 `readyState` は接続がデータを転送する準備ができたら `OPEN`になります。
+返されると、 {{domxref("WebSocket.readyState", "exampleSocket.readyState")}} は `CONNECTING` です。
+`readyState` は接続がデータを転送する準備ができたら `OPEN`になります。
 
 接続を開き、サポートしているプロトコルについて柔軟に対応したい場合は、プロトコルの配列を指定することができます。
 
@@ -89,7 +91,8 @@ exampleSocket.onopen = (event) => {
 
 ### JSON を使用したオブジェクトの送信
 
-サーバーに複雑なデータを合理的に送信するのに手軽な方法の一つとして、 {{glossary("JSON")}} を使用する方法があります。たとえば、チャットプログラムがサーバーとやり取りするのに、 JSON でカプセル化されたデータのパケットを使用して実装されたプロトコルを使用することができます。
+サーバーに複雑なデータを合理的に送信するのに手軽な方法の一つとして、{{glossary("JSON")}} を使用する方法があります。
+たとえば、チャットプログラムがサーバーとやり取りするのに、 JSON でカプセル化されたデータのパケットを使用して実装されたプロトコルを使用することができます。
 
 ```js
 // Send text to all users through the server
@@ -153,7 +156,7 @@ exampleSocket.onmessage = (event) => {
       text = `Your username has been set to <em>${msg.name}</em> because the name you chose is in use.<br>`;
       break;
     case "userlist":
-      document.getElementById("userlistbox").innerHTML = msg.users.join("<br>");
+      document.getElementById("userlistbox").innerText = msg.users.join("\n");
       break;
   }
 
diff --git a/files/ja/web/api/websockets_api/writing_websocket_server/index.md b/files/ja/web/api/websockets_api/writing_websocket_server/index.md
index 32421c12f3537a..055107860acc4f 100644
--- a/files/ja/web/api/websockets_api/writing_websocket_server/index.md
+++ b/files/ja/web/api/websockets_api/writing_websocket_server/index.md
@@ -1,11 +1,11 @@
 ---
-title: C# による WebSocket サーバーの記述
+title: C# で WebSocket サーバーを書く
 slug: Web/API/WebSockets_API/Writing_WebSocket_server
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: 1fc3cc69ee229c7677883b45f5d1a71095f8a4c4
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
 WebSocket API を使用したい場合は、サーバーを所有していると便利です。この記事では、C# で記述する方法を説明します。どんなサーバーサイドの言語でも行うことができますが、わかりやすく理解しやすいように、 Microsoft の言語を選択しました。
 
@@ -13,7 +13,7 @@ WebSocket API を使用したい場合は、サーバーを所有していると
 
 ## 最初のステップ
 
-WebSocket は [TCP (伝送制御プロトコル)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol) 接続を介して通信します。幸いにも、C# には [TcpListener](https://docs.microsoft.com/en-us/dotnet/api/system.net.sockets.tcplistener?view=net-6.0) クラスがあり、その名前が示すようにします。これは System.Net.Sockets 名前空間にあります。
+WebSocket は [TCP (伝送制御プロトコル)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol) 接続を介して通信します。幸いにも、C# には [TcpListener](https://learn.microsoft.com/ja/dotnet/api/system.net.sockets.tcplistener?view=net-6.0) クラスがあり、その名前が示すようにします。これは System.Net.Sockets 名前空間にあります。
 
 > [!NOTE]
 > 書く量を減らすために名前空間を `using` キーワードに含めることをお勧めします。毎回完全な名前空間を入力することなく、名前空間のクラスを使用できます。
@@ -140,7 +140,7 @@ if (Regex.IsMatch(data, "^GET")) {
 1. 先行または後続空白なしで "Sec-WebSocket-Key" リクエストヘッダーの値を取得します
 2. それを "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (RFC 6455 で指定された特別な GUID)
 3. 新しい値の SHA-1 および Base64 ハッシュを計算します
-4. HTTP レスポンスの "Sec-WebSocket-Accept" レスポンスヘッダーの値としてハッシュを書き戻します
+4. HTTP レスポンスの {{httpheader("Sec-WebSocket-Accept")}} レスポンスヘッダーの値としてハッシュを書き戻します
 
 ```cs
 if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
@@ -280,9 +280,9 @@ class Server {
             } else {
                 bool fin = (bytes[0] & 0b10000000) != 0,
                     mask = (bytes[1] & 0b10000000) != 0; // must be true, "All messages from the client to the server have this bit set"
-                int opcode = bytes[0] & 0b00001111, // expecting 1 - text message
-                    offset = 2;
-                ulong msglen = bytes[1] & 0b01111111;
+                int opcode = bytes[0] & 0b00001111; // expecting 1 - text message
+                ulong offset = 2,
+                      msglen = bytes[1] & (ulong)0b01111111;
 
                 if (msglen == 126) {
                     // bytes are reversed because websocket will print them in Big-Endian, whereas
diff --git a/files/ja/web/api/websockets_api/writing_websocket_servers/index.md b/files/ja/web/api/websockets_api/writing_websocket_servers/index.md
index 74ea53234cfc31..9cbaa98d0f0be0 100644
--- a/files/ja/web/api/websockets_api/writing_websocket_servers/index.md
+++ b/files/ja/web/api/websockets_api/writing_websocket_servers/index.md
@@ -1,13 +1,13 @@
 ---
-title: WebSocket サーバーの記述
+title: WebSocket サーバーを書く
 slug: Web/API/WebSockets_API/Writing_WebSocket_servers
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: c69e36924e1849fdc9b7fc49a3f4c550efa3468a
 ---
 
-{{APIRef("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
-WebSocket サーバーは、特定のプロトコルに従うサーバーの任意のポートを待ち受けする TCP アプリケーションに他なりません。カスタムサーバーを作成する作業は人々を悩ませる傾向があります。ただし、選択したプラットフォームに簡単な WebSocket サーバーを実装するのは簡単です。
+WebSocket サーバーは、特定のプロトコルに従うサーバーの任意のポートを待ち受けする TCP アプリケーションに他なりません。カスタムサーバーを作成したことがない人にとっては、カスタムサーバーの作成は大変な作業のように思えるかもしれません。しかし、実際には、選択したプラットフォームに基本的な WebSocket サーバーを実装するのは、それほど難しいことではありません。
 
 WebSocket サーバーは、 [Berkeley sockets](https://en.wikipedia.org/wiki/Berkeley_sockets) が利用可能なサーバーサイドプログラミング言語、例えば C(++)、Python、{{Glossary("PHP")}}、[サーバーサイド JavaScript](/ja/docs/Learn/Server-side/Node_server_without_framework) などで記述することができます。これは特定の言語のチュートリアルではありませんが、独自のサーバーの作成を容易にするガイドとして役立ちます。
 
@@ -28,13 +28,13 @@ WebSocket サーバーは、 [Berkeley sockets](https://en.wikipedia.org/wiki/Be
 ハンドシェイクは WebSockets の "Web" です。それは HTTP から WS への橋渡しです。ハンドシェイクでは、接続の詳細がネゴシエートされ、いずれの当事者も条件が悪い場合には完了前に取り消すことができます。 サーバーはクライアントがリクエストするすべてのものを理解するように注意する必要があります。そうしないとセキュリティの問題が発生します。
 
 > [!NOTE]
-> request-uri （ここでは `/chat`）の意味は仕様書では定義されていません。多くの人がこれを使用して、 1 つのサーバーが複数の WebSocket アプリケーションを処理できるようにします。たとえば、`example.com/chat` はマルチユーザチャットアプリを呼び出すことができ、同じサーバーの `/game` はマルチプレイヤーゲームを呼び出すことができるようにするなどです。
+> request-uri （ここでは `/chat`）の意味は仕様書では定義されていません。多くの人がこれを使用して、 1 つのサーバーが複数の WebSocket アプリケーションを処理できるようにします。たとえば、`example.com/chat` はマルチユーザーチャットアプリを呼び出すことができ、同じサーバーの `/game` はマルチプレイヤーゲームを呼び出すことができるようにするなどです。
 
 ### クライアントハンドシェイクリクエスト
 
 サーバーを構築していても、クライアントは WebSocket ハンドシェイクプロセスを開始する必要があります。したがってクライアントのリクエストをどのように解釈するかを知っておく必要があります。**クライアント**は次のようなかなり標準的な HTTP リクエスト (HTTP バージョンは 1.1 以上**でなければならず**、メソッドは`GET` **でなければなりません**) を送信します。
 
-```bash
+```http
 GET /chat HTTP/1.1
 Host: example.com:8000
 Upgrade: websocket
@@ -46,7 +46,7 @@ Sec-WebSocket-Version: 13
 クライアントはここで拡張子やサブプロトコルを求めることができます。詳細は「[その他](#その他)」を参照してください。また {{HTTPHeader("User-Agent")}}、{{HTTPHeader("Referer")}}、{{HTTPHeader("Cookie")}}、認証ヘッダーなどの一般的なヘッダーも存在する可能性があります。これらに対しては何をしても構いません。 WebSocket には直接関係しません。それらを無視することも安全です。多くの一般的な設定では、リバースプロキシーは既にそれらを処理しています。
 
 > [!NOTE]
-> すべての**ブラウザー**は [`Origin` ヘッダー](/ja/docs/Web/HTTP/CORS#origin)を送信します。このヘッダーをセキュリティ（同一オリジンのチェック、ホワイトリスト/ブラックリストなど) に使用し、見せたくなければ [403 Forbidden](/ja/docs/Web/HTTP/Status#403) を送ることができます。ただし、ブラウザー以外のエージェントは、偽の `Origin` を送信するだけであることに注意してください。ほとんどのアプリケーションは、このヘッダーのないリクエストを拒否します。
+> すべての**ブラウザー**は [`Origin` ヘッダー](/ja/docs/Web/HTTP/CORS#origin)を送信します。このヘッダーをセキュリティ（同一オリジンのチェック、自動許可または拒否など）に使用し、見せたくなければ [403 Forbidden](/ja/docs/Web/HTTP/Status/403) を送ることができます。これは[クロスサイト WebSocket ハイジャッキング (CSWH)] (https://cwe.mitre.org/data/definitions/1385.html) に対して効果があります。ただし、ブラウザー以外のエージェントは、偽の `Origin` を送信するだけであることに注意してください。ほとんどのアプリケーションは、このヘッダーのないリクエストを拒否します。
 
 ヘッダーが解釈されていないか値が正しくない場合、サーバーは {{HTTPStatus("400")}} ("Bad Request") を送信し、すぐにソケットを閉じる必要があります。通常は、HTTP レスポンス本体でハンドシェイクが失敗した理由を示すかもしれませんが、メッセージは表示されないかもしれません（ブラウザーは表示しません）。 サーバーが WebSocket のバージョンを認識しない場合、サーバーは解釈可能なバージョンを含む {{HTTPHeader("Sec-WebSocket-Version")}} ヘッダーを返す必要があります。上記の例では、 WebSocket プロトコル 13 版であることを示しています。
 
@@ -58,7 +58,7 @@ Sec-WebSocket-Version: 13
 
 **サーバー**がハンドシェイクリクエストを受け取ると、プロトコルが HTTP から WebSocket に変更されることを示す特別なレスポンスを送り返す必要があります。そのヘッダーは次のようなものです（各ヘッダー行は `\r\n` で終わり、ヘッダーの終わりを示すために最後の行の後に追加の `\r\n` を置くことを忘れないでください）。
 
-```bash
+```http
 HTTP/1.1 101 Switching Protocols
 Upgrade: websocket
 Connection: Upgrade
@@ -112,13 +112,25 @@ Frame format:
      +---------------------------------------------------------------+
 ```
 
+つまり、フレームには次のバイトが格納されているということです。
+
+- 1 バイト目:
+  - bit 0: FIN
+  - bit 1: RSV1
+  - bit 2: RSV2
+  - bit 3: RSV3
+  - bits 4-7 OPCODE
+- 2-10 バイト目: 本体の長さ（[本体長のデコード](#本体長のデコード) を参照）
+- マスクを使用する場合は、次の 4 バイトにマスクキーが格納されます（[データの読み取りとマスキングの解除](#データの読み込みとマスク解除)を参照）
+- 続くバイト列はすべて本体です
+
 MASK ビットはメッセージがエンコードされているかどうかを示します。クライアントからのメッセージはマスクされている必要がありますので、サーバーはこのビットが 1 であることを確認する必要があります。（実際、[仕様書の第 5.1 節](https://datatracker.ietf.org/doc/html/rfc6455#section-5.1)では、クライアントがマスクされていないメッセージを送信する場合、サーバーはクライアントから切断する必要があります。）フレームをクライアントに戻すときは、マスクしたりマスクビットを設定しないでください。後でマスキングについて説明します。注意：セキュアソケットを使用している場合でも、メッセージをマスクする必要があります。RSV1-3 は無視することができますが、それは拡張のためのものです。
 
-opcode フィールドは、ペイロードデータをどのように解釈するかを定義します。継続の場合 `0x0`、テキスト (UTF-8 で常にエンコードされる) の場合は `0x1`、バイナリの場合は `0x2`、およびその他のいわゆる「制御コード」については後で説明します。この版の WebSocket では、`0x3` 〜 `0x7` および `0xB` 〜`0xF` は意味を持ちません。
+opcode フィールドは、ペイロードデータをどのように解釈するかを定義します。継続の場合 `0x0`、テキスト (UTF-8 で常にエンコードされる) の場合は `0x1`、バイナリーの場合は `0x2`、およびその他のいわゆる「制御コード」については後で説明します。この版の WebSocket では、`0x3` 〜 `0x7` および `0xB` 〜`0xF` は意味を持ちません。
 
 FIN ビットは、これがシリーズ内の最後のメッセージであるかどうかを示します。0 の場合、サーバーはメッセージのより多くの部分をリスニングし続けます。それ以外の場合、サーバーは配信されたメッセージを考慮する必要があります。これについては後で詳しく説明します。
 
-### ペイロード長のデコード
+### 本体長のデコード
 
 ペイロードデータを読み取るには、いつ読み終えるべきかを知っておく必要があります。そのためペイロードの長さを知ることが重要です。残念ながら、これはやや複雑です。それを読むには、次の手順を実行します。
 
@@ -128,7 +140,7 @@ FIN ビットは、これがシリーズ内の最後のメッセージである
 
 ### データの読み込みとマスク解除
 
-MASK ビットがセットされていた場合は（クライアントからサーバーへのメッセージではそうあるべきです）、次の 4 オクテット（32 ビット）を読み込みます。これがマスキングキーです。ペイロード長とマスキングキーがデコードされたら、ソケットからそのバイト数を読み取ることができます。データを `ENCODED`、キーを `MASK` 呼ぶことにします。 `DECODED` を取得するには、`ENCODED` のオクテット（バイト列、すなわちテキストデータの文字の列）をループし、オクテットを `MASK` の（i モジュロ 4）番目のオクテットを使用して XOR します。擬似コードで表してみます（JavaScript が有効な場合）。
+MASK ビットがセットされていた場合は（クライアントからサーバーへのメッセージではそうあるべきです）、次の 4 オクテット（32 ビット）を読み込みます。これがマスキングキーです。本体長とマスキングキーがデコードされたら、ソケットからそのバイト数を読み取ることができます。データを `ENCODED`、キーを `MASK` 呼ぶことにします。 `DECODED` を取得するには、`ENCODED` のオクテット（バイト列、すなわちテキストデータの文字の列）をループし、オクテットを `MASK` の（i モジュロ 4）番目のオクテットを使用して XOR します。擬似コードで表してみます（JavaScript が有効な場合）。
 
 ```js
 const MASK = [1, 2, 3, 4]; // 4 バイトマスク
@@ -144,7 +156,7 @@ const DECODED = Uint8Array.from(ENCODED, (elt, i) => elt ^ MASK[i % 4]); // マ
 
 FIN フィールドとオペコードフィールドは連携して、別々のフレームに分割されたメッセージを送信します。これはメッセージフラグメンテーションと呼ばれます。フラグメンテーションは、オペコード `0x0` 〜 `0x2` でのみ使用できます。
 
-オペコードはフレームの意味を示しています。`0x1` の場合、ペイロードはテキストです。`0x2` の場合、ペイロードはバイナリデータです。ただし、`0x0` の場合、フレームは継続フレームです。つまりサーバーはフレームのペイロードをそのクライアントから受信した最後のフレームに連結する必要があります。ここでは、サーバーがテキストメッセージを送信するクライアントに反応する概略を示します。第 1 のメッセージは単一のフレームで送信され、第 2 のメッセージは3つのフレームにわたって送信されます。FIN とオペコードの詳細は、クライアントに対してのみ表示されます。
+オペコードはフレームの意味を示しています。`0x1` の場合、ペイロードはテキストです。`0x2` の場合、ペイロードはバイナリーデータです。ただし、`0x0` の場合、フレームは継続フレームです。つまりサーバーはフレームのペイロードをそのクライアントから受信した最後のフレームに連結する必要があります。ここでは、サーバーがテキストメッセージを送信するクライアントに反応する概略を示します。第 1 のメッセージは単一のフレームで送信され、第 2 のメッセージは3つのフレームにわたって送信されます。FIN とオペコードの詳細は、クライアントに対してのみ表示されます。
 
 ```plain
 Client: FIN=1, opcode=0x1, msg="hello"
@@ -163,7 +175,7 @@ Server: (process complete message) Happy new year to you too!
 
 ハンドシェイク後の任意の時点で、クライアントまたはサーバーのどちらかが、相手に ping を送信することを選択できます。 ping が受信されると、受信者はできるだけ早く pong を返さなければなりません。 これを使用して、たとえばクライアントがまだ接続されていることを確認できます。
 
-ping や pong は単なる通常のフレームですが、**制御フレーム**です。ping のオペコードは `0x9`、pong のオペコードは `0xA` です。ping を取得したら、ping と同じペイロードデータを持つ pong を送ります（ping と pong の場合、最大ペイロード長は 125 です）。ping を送信することなく pong を取得することもできます。その場合はこれを無視してください。
+ping や pong は単なる通常のフレームですが、**制御フレーム**です。ping のオペコードは `0x9`、pong のオペコードは `0xA` です。ping を取得したら、ping と同じペイロードデータを持つ pong を送ります（ping と pong の場合、最大本体長は 125 です）。ping を送信することなく pong を取得することもできます。その場合はこれを無視してください。
 
 > [!NOTE]
 > pong を送信する機会を得る前に複数の ping を受信した場合でも、送信する pong は 1 つだけです。
@@ -177,7 +189,7 @@ ping や pong は単なる通常のフレームですが、**制御フレーム*
 > [!NOTE]
 > WebSocket のコード、拡張機能、サブプロトコルなどは、[IANA WebSocket プロトコルレジストリー](https://www.iana.org/assignments/websocket/websocket.xml)に登録されています。
 
-WebSocket の拡張機能とサブプロトコルは、ハンドシェイク中にヘッダーを介して交渉されます。拡張機能とサブプロトコルはとても似ていますが、明確な区別があります。拡張機能は WebSocket **フレーム**を制御し、ペイロードを**変更**しますが、サブプロトコルは WebSocket **ペイロード**を構造化し、**何も変更しません**。拡張機能は任意のもので一般化されています（圧縮など）。サブプロトコルは必須のもので、ローカライズされています（チャットや MMORPG ゲームなど）。
+WebSocket の拡張機能とサブプロトコルは、[ハンドシェイク](#websocket_ハンドシェイク)中にヘッダーを介して交渉されます。拡張機能とサブプロトコルはとても似ていますが、明確な区別があります。拡張機能は WebSocket **フレーム**を制御し、ペイロードを**変更**しますが、サブプロトコルは WebSocket **ペイロード**を構造化し、**何も変更しません**。拡張機能は任意のもので一般化されています（圧縮など）。サブプロトコルは必須のもので、ローカライズされています（チャットや MMORPG ゲームなど）。
 
 ## 拡張機能
 
@@ -195,7 +207,7 @@ WebSocket の拡張機能とサブプロトコルは、ハンドシェイク中
 
 クライアントは特定のサブプロトコルを要求する必要があります。 これを行うには、**元のハンドシェイクの一部として**次のようなものを送ります。
 
-```bash
+```http
 GET /chat HTTP/1.1
 ...
 Sec-WebSocket-Protocol: soap, wamp
@@ -203,7 +215,7 @@ Sec-WebSocket-Protocol: soap, wamp
 
 次のものも同等です。
 
-```bash
+```http
 ...
 Sec-WebSocket-Protocol: soap
 Sec-WebSocket-Protocol: wamp
@@ -211,7 +223,7 @@ Sec-WebSocket-Protocol: wamp
 
 これでサーバーはクライアントが提案して対応しているプロトコルの 1 つを選択する必要があります。複数ある場合は、クライアントが送信した最初のものを送信します。サーバーが `soap` と `wamp` の両方を使用できると想像してください。 次に、レスポンスハンドシェイクで次のメッセージが送信されます。
 
-```bash
+```http
 Sec-WebSocket-Protocol: soap
 ```
 
@@ -219,7 +231,7 @@ Sec-WebSocket-Protocol: soap
 > サーバーは複数の `Sec-Websocket-Protocol` ヘッダーを送信できません。
 > サーバーがサブプロトコルを使用したくない場合、 **`Sec-WebSocket-Protocol` ヘッダーを送信してはいけません**。空白のヘッダーを送信するのは間違いです。クライアントは、必要なサブプロトコルを取得できない場合に接続を閉じることがあります。
 
-サーバーが特定のサブプロトコルに従うようにしたいのであれば、必然的にサーバー上に特別なコードが必要になります。 `json` サブプロトコルを使用しているとしましょう。このサブプロトコルではすべてのデータが [JSON](https://en.wikipedia.org/wiki/JSON) として渡されます。クライアントがこのプロトコルを要求し、サーバーがそれを使用したい場合、サーバーは JSON パーサーを持つ必要があります。実際に言えば、これはライブラリの一部になりますが、サーバーはデータを渡す必要があります。
+サーバーが特定のサブプロトコルに従うようにしたいのであれば、必然的にサーバー上に特別なコードが必要になります。 `json` サブプロトコルを使用しているとしましょう。このサブプロトコルではすべてのデータが [JSON](https://en.wikipedia.org/wiki/JSON) として渡されます。クライアントがこのプロトコルを要求し、サーバーがそれを使用したい場合、サーバーは JSON パーサーを持つ必要があります。実際に言えば、これはライブラリーの一部になりますが、サーバーはデータを渡す必要があります。
 
 > [!NOTE]
 > 名前の競合を避けるため、サブプロトコル名をドメイン文字列の一部にすることをお勧めします。Example Inc. 専用の独自の形式を使用するカスタムチャットアプリを構築する場合は、次のように使用します: `Sec-WebSocket-Protocol: chat.example.com`。これは必須ではないことに注意してください。これは単なるオプションです。任意の文字列を使用できます。
diff --git a/files/ja/web/api/createimagebitmap/index.md b/files/ja/web/api/window/createimagebitmap/index.md
similarity index 98%
rename from files/ja/web/api/createimagebitmap/index.md
rename to files/ja/web/api/window/createimagebitmap/index.md
index 89c4239eb28407..9c4d597ff1db18 100644
--- a/files/ja/web/api/createimagebitmap/index.md
+++ b/files/ja/web/api/window/createimagebitmap/index.md
@@ -1,6 +1,7 @@
 ---
 title: createImageBitmap()
-slug: Web/API/createImageBitmap
+slug: Web/API/Window/createImageBitmap
+original_slug: Web/API/createImageBitmap
 l10n:
   sourceCommit: 32539676aca5ea2913cfaefeab3ba986ecd2206f
 ---
diff --git a/files/ja/web/css/_colon_state/index.md b/files/ja/web/css/_colon_state/index.md
new file mode 100644
index 00000000000000..b5ae607460fb89
--- /dev/null
+++ b/files/ja/web/css/_colon_state/index.md
@@ -0,0 +1,109 @@
+---
+title: ":state()"
+slug: Web/CSS/:state
+l10n:
+  sourceCommit: b60bc79c7ad36c56dddf6760d2fd4dbb642d2023
+---
+
+{{CSSRef}}
+
+**`:state()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、特定のカスタム状態を持つ[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)に一致します。
+
+## 構文
+
+`:state()` 擬似クラスは、引数として一致するカスタム要素の状態を表すカスタム識別子を取ります。
+
+```css-nolint
+:state(<カスタム識別子>) {
+  /* ... */
+}
+```
+
+## 解説
+
+要素は、ユーザー操作や他の要因により、状態が遷移することがあります。
+例えば、ユーザーが要素にカーソルをかざしたときに "hover" 状態に遷移したり、ユーザーがクリックした後にリンクが "visited" 状態に遷移したりします。
+ブラウザーで指定された要素は、[`:hover`](/ja/docs/Web/CSS/:hover) や [`:visited`](/ja/docs/Web/CSS/:visited) などの CSS 擬似クラスを使用して、これらの状態に基づいてスタイルを設定することができます。
+同様に、[自律的カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements#カスタム要素の種類)（組み込み要素から派生していないカスタム要素）は、その状態を公開することができ、その要素を使用するページは、CSS の `:state()` 擬似クラスを使用して、それらにスタイル設定することができます。
+
+カスタム要素の状態は文字列値で表されます。
+これらの値は、要素に関連付けられた [`CustomStateSet`](/ja/docs/Web/API/CustomStateSet) オブジェクトに追加または除去されます。
+CSS の `:state()` 擬似クラスは、引数として渡された識別子が要素の `CustomStateSet` に存在する場合に、その要素と一致します。
+
+`:state()` 擬似クラスは、カスタム要素の実装内でカスタム状態を一致させるためにも使用することができます。
+これは、 `:state()` を [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用することで実現され、現在のカスタム要素のシャドウ DOM 内でのみ状態を一致させます。
+
+さらに、[`::part()`](/ja/docs/Web/CSS/::part) 擬似要素に `:state()` 擬似クラスが続くことで、特定の状態にあるカスタム要素の[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)と照合することができます。
+（**シャドウパーツ**とは、カスタム要素のシャドウツリーの一部で、スタイル設定のため、コンテナーページに明示的に公開される部分です。）
+
+## 例
+
+### カスタム状態の照合
+
+この CSS は、"checked" 状態にある場合、カスタム要素 `<labeled-checkbox>` の境界線を `red` に変更する方法を示しています。
+
+```css
+labeled-checkbox {
+  border: dashed red;
+}
+labeled-checkbox:state(checked) {
+  border: solid;
+}
+```
+
+このコードのライブサンプルについては、`CustomStateSet` ページの[カスタムチェックボックス要素のカスタム状態の照合](/ja/docs/Web/API/CustomStateSet#matching_the_custom_state_of_a_custom_checkbox_element)の例を参照してください。
+
+### カスタム要素のシャドウ DOM 内のカスタム状態の照合
+
+この例では、カスタム要素の実装内でカスタム状態を照合するために、`:state()` 擬似クラスを [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用できることを表示させています。
+
+以下の CSS は、要素が "checked" の状態にある場合、その要素の前にグレーの `[x]` を挿入します。
+
+```css
+:host(:state(checked))::before {
+  content: "[x]";
+}
+```
+
+このコードのライブサンプルについては、`CustomStateSet` ページの[カスタムチェックボックス要素のカスタム状態の照合](/ja/docs/Web/API/CustomStateSet#matching_the_custom_state_of_a_custom_checkbox_element)の例を参照してください。
+
+### シャドウパーツでカスタム状態との照合
+
+この例では、カスタム要素の `:state()` 擬似クラスを[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)を対象として使用できることを示しています。
+
+シャドウパーツは、[`part`](/ja/docs/Web/HTML/Global_attributes#part) 属性を使用して定義し、名前を付けます。
+例えば、`<question-box>` という名前のカスタム要素が、`<labeled-checkbox>` カスタム要素を `checkbox` という名前のシャドウパーツとして使用しているとします。
+
+```js
+shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
+```
+
+次の CSS は、[`::part()`](/ja/docs/Web/CSS/::part) 擬似要素を使用して `'checkbox'` シャドウパーツと照合する方法を示しています。
+また、`::part()`擬 似要素に続いて `:state()` 擬似クラスを使用することで、チェック状態の同じ部分と照合する方法も表示させています。
+
+```css
+question-box::part(checkbox) {
+  color: red;
+}
+
+question-box::part(checkbox):state(checked) {
+  color: green;
+}
+```
+
+このコードの動作例については、`CustomStateSet` ページの[カスタム要素のシャドウパーツ内のカスタム状態の照合](/ja/docs/Web/API/CustomStateSet#matching_a_custom_state_in_a_shadow_part_of_a_custom_element)の例を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`CustomStateSet`](/ja/docs/Web/API/CustomStateSet)
+- [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)
+- [擬似クラスと擬似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [カスタム状態と CSS のカスタム状態擬似クラスセレクター](/ja/docs/Web/API/Web_components/Using_custom_elements#カスタム状態と_css_のカスタム状態擬似クラスセレクター)（[カスタム要素の使用](/ja/docs/Web/API/Web_components/Using_custom_elements)）
diff --git a/files/ja/web/css/reference/index.md b/files/ja/web/css/reference/index.md
index a3fc7e07fbed34..d38d75f0e594bb 100644
--- a/files/ja/web/css/reference/index.md
+++ b/files/ja/web/css/reference/index.md
@@ -2,7 +2,7 @@
 title: CSS リファレンス
 slug: Web/CSS/Reference
 l10n:
-  sourceCommit: 62c5c3f5655002f230bf0153fbdf8a883611014a
+  sourceCommit: 583d48191a7a8605d831aff357bef6cc63aef2e3
 ---
 
 {{CSSRef}}
@@ -13,7 +13,7 @@ l10n:
 
 ### スタイルルールの構文
 
-```
+```css
 スタイルルール ::=
     セレクターリスト {
       プロパティリスト
@@ -22,7 +22,7 @@ l10n:
 
 ここで、
 
-```
+```css
 セレクターリスト ::=
     セレクター[:擬似クラス] [::擬似要素]
     [, セレクターリスト]
@@ -45,7 +45,7 @@ div.menu-bar li:hover > ul {
 }
 ```
 
-初心者レベルの CSS セレクター構文への入門については、 [CSS セレクターのガイド](/ja/docs/Learn/CSS/Building_blocks/Selectors)をご覧ください。ルール定義内での [CSS 構文](/ja/docs/Web/CSS/Syntax) エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて (ASCII) [テキストベース](https://www.w3.org/TR/css-syntax-3/#intro) であり、DOM-CSS / CSSOM (ルール管理システム) は [オブジェクトベース](https://www.w3.org/TR/cssom/#introduction) なので注意してください。
+初心者レベルの CSS セレクター構文への入門については、 [CSS セレクターのガイド](/ja/docs/Learn/CSS/Building_blocks/Selectors)をご覧ください。ルール定義内での [CSS 構文](/ja/docs/Web/CSS/Syntax) エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて ({{Glossary("ASCII")}}) [テキストベース](https://www.w3.org/TR/css-syntax-3/#intro) であり、DOM-CSS / CSSOM (ルール管理システム) は [オブジェクトベース](https://www.w3.org/TR/cssom/#introduction) なので注意してください。
 
 ### アットルールの構文
 
@@ -53,6 +53,9 @@ div.menu-bar li:hover > ul {
 
 ## 索引
 
+> [!NOTE]
+> この索引は、[SVG](/ja/docs/Web/SVG) 要素上で CSS プロパティとして使える SVG 専用プレゼンテーション属性を含んでいません。
+
 > [!NOTE]
 > この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。
 
@@ -60,7 +63,7 @@ div.menu-bar li:hover > ul {
 
 ## セレクター
 
-以下は様々な[セレクター](/ja/docs/Web/CSS/CSS_Selectors)で、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。
+以下は様々な[セレクター](/ja/docs/Web/CSS/CSS_selectors)で、DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。
 
 ### 基本セレクター
 
@@ -99,7 +102,7 @@ div.menu-bar li:hover > ul {
 - [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) `::`
   - : HTML に含まれていないエンティティを表します。
 
-> **メモ:** **関連情報:** [Selectors Level 4 仕様書におけるセレクター](https://www.w3.org/TR/selectors/#overview)。
+> **注目:** [Selectors Level 4 仕様書におけるセレクター](https://www.w3.org/TR/selectors/#overview)および[擬似要素の仕様書](https://drafts.csswg.org/css-pseudo/)も参照してください。
 
 ## 概念
 
@@ -128,7 +131,7 @@ div.menu-bar li:hover > ul {
 
 ### レイアウト
 
-- [ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)
+- [ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context)
 - [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
 - [包含ブロック](/ja/docs/Web/CSS/Containing_block)
 - [レイアウトモード](/ja/docs/Web/CSS/Layout_mode)
@@ -142,11 +145,7 @@ div.menu-bar li:hover > ul {
 ### 主なオブジェクトの種類
 
 - {{DOMxRef("Document.styleSheets")}}
-- `{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}`
-- `cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}` (セレクターとスタイル)
-- `cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}`
 - {{DOMxRef("HTMLElement.style")}}
-- `HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}` (スタイルのみ)
 - {{DOMxRef("Element.className")}}
 - {{DOMxRef("Element.classList")}}
 
@@ -162,4 +161,4 @@ div.menu-bar li:hover > ul {
 
 ## 外部リンク
 
-- [CSS 目次 (w3.org)](https://www.w3.org/TR/CSS/#indices)
+- [CSS 索引 (w3.org)](https://www.w3.org/TR/CSS/#indices)
diff --git a/files/ja/web/css/scrollbar-gutter/index.md b/files/ja/web/css/scrollbar-gutter/index.md
index d9fd88921a7c2d..7f6214348a8c7c 100644
--- a/files/ja/web/css/scrollbar-gutter/index.md
+++ b/files/ja/web/css/scrollbar-gutter/index.md
@@ -53,14 +53,14 @@ scrollbar-gutter: unset;
 
 ## 例
 
-The examples below show how the different values for the `scrollbar-gutter` property would affect a scrollable `div` element (`.container`) with one or more paragraphs contained within.
+次の例は、`scrollbar-gutter` プロパティの異なる値が、1 つ以上の段落を含むスクロール可能な `div` 要素（`.container`）にどのように影響するかを示しています。
 
 > [!NOTE]
-> In the images for the examples, the user's system settings are set to classic scrollbars (always shown).
+> 例の画像では、ユーザーのシステム設定は従来のスクロールバー（常に表示）に設定されています。
 
 ### 例 1
 
-Prevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear, a space is reserved for it.
+コンテンツが大きくなったり小さくなったりすることでスクロールバーが表示されたり消えたりするため、そのための空間が確保され、不要なレイアウト変更を防ぐことができます。
 
 ```css
 .container {
@@ -68,11 +68,11 @@ Prevent unneeded layout changes as the content growing or shrinking causes the s
 }
 ```
 
-![A containing div element with a paragraph of text inside and a space to the right where the scrollbar is](stable-no-scroll.png)
+![div 要素の中にテキストの段落があり、スクロールバーの右側に空間がある。](stable-no-scroll.png)
 
 ### 例 2
 
-Add symmetric spacing to both sides of the box so the content is centered:
+ボックスの両側に左右対称の空間を追加し、コンテンツが中央に来るようにします。
 
 ```css
 .container {
@@ -80,12 +80,12 @@ Add symmetric spacing to both sides of the box so the content is centered:
 }
 ```
 
-![A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left](stable-both-edges.png)
+![テキストの段落を含む div 要素で、スクロールバーがある右側に空間があり、左側に同じ空間がある。](stable-both-edges.png)
 
 ### 例 3
 
-Align the contents of a non-scrolling element and a scrolling one adjacent to it:
-This example shows two divs side by side. The one on the left has no scroll, but the one on the right does. Both have `scrollbar-gutter` applied, which also reserves space for the div on the left which doesn't have scrollable content. This is a good technique to use to keep the width of content consistent.
+スクロールしない要素と、それに隣接するスクロールする要素の内容を揃えます。
+この例では、2 つの div を横に並べています。左側のものはスクロールしませんが、右側のものはスクロールします。両方とも `scrollbar-gutter` が適用されており、スクロール可能なコンテンツを持たない左側の div のための空間も確保されています。これは、コンテンツの幅を一定に保つために使う良いテクニックです。
 
 ```css
 .container1 {
@@ -98,13 +98,13 @@ This example shows two divs side by side. The one on the left has no scroll, but
 }
 ```
 
-![Two adjacent divs containing text, both with space for a scrollbar](side-by-side.png)
+![テキストを含む 2 つの隣接する div で、両方ともスクロールバーのための空間がある。](side-by-side.png)
 
 ### スクロールバーのオーバーレイ
 
-For reference, this image shows the same div as above, but with the user's system settings set to overlay scrollbars. Note here the scrollbar will only show when the user is scrolling and on top of the content, so no space is reserved for it and the `scrollbar-gutter` property has no effect.
+参考までに、この画像は上記と同じ div を示していますが、ユーザーのシステム設定がスクロールバーをオーバーレイするように設定されています。ここでは、スクロールバーはユーザーがスクロールしているときだけ表示され、コンテンツの上に表示されるため、スクロールバーのための空間は確保されず、`scrollbar-gutter` プロパティは影響しないことに注意してください。
 
-![One div with text, no visible scrollbar](for-ref-no-scroll.png)
+![テキストを含む 1 つの div、スクロールバーなし](for-ref-no-scroll.png)
 
 ## 仕様書
 
diff --git a/files/ja/web/http/basics_of_http/index.md b/files/ja/web/http/basics_of_http/index.md
deleted file mode 100644
index 9e26061948e4d0..00000000000000
--- a/files/ja/web/http/basics_of_http/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: HTTP の基本
-slug: Web/HTTP/Basics_of_HTTP
----
-
-{{HTTPSidebar}}
-
-HTTP はとても拡張性のあるプロトコルです。リソースの記述や URI などわずかな基本概念に基づいており、メッセージ構造が単純で、コミュニケーションの流れはクライアント・サーバー構造です。これらの基本概念の上に、いくつもの拡張が何年にもわたって行われ、新しい機能や新しい意味が新しい HTTP メソッドやヘッダーによって追加されています。
-
-## 記事
-
-- [HTTP の概要](/ja/docs/Web/HTTP/Overview)
-  - : HTTP とは何であるか、そしてウェブアーキテクチャにおけるこのプロトコルの役割について説明します。
-- [HTTP の進化](/ja/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
-  - : HTTP は 1990 年代初めに作成され、何度も拡張されました。この記事では、 HTTP/0.9、 HTTP/1.0、 HTTP/1.1、現代の HTTP/2、および長年にわたり導入されている小さなノベルティについての歴史を説明します。
-- [HTTP バージョンのネゴシエーション](/ja/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version)
-  - : クライアントとサーバーが特定の HTTP バージョンをネゴシエートし、最終的に使用されたプロトコルバージョンをアップグレードする方法を説明します。
-- [リソースと URI](/ja/docs/Web/HTTP/Resources_and_URIs)
-  - : ウェブ上のリソース、識別子、および場所の概念を簡単に紹介します。
-- [ウェブ上のリソースの識別](/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web)
-  - : ウェブリソースの参照方法とどのように配置されるのかについて説明します。
-- [データ URI](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
-  - : それが表すリソースを直接埋め込む特定の種類の URI。データ URI はとても便利ですが、いくつかの注意点があります。
-- [リソース URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs) {{Non-standard_Inline}}
-  - : `resource:` というスキームの接頭辞が付いた URL は、 Firefox と Firefox のブラウザー拡張機能によってリソースを内部的に読み込むために使用されますが、情報の一部はブラウザーが接続するサイトでも利用できます。
-- リソースの識別と場所の分離: Alt-Svc HTTP ヘッダー
-  - : ほとんどの場合、ウェブリソースの識別子と場所は共有されますが、これは {{HTTPHeader("Alt-Svc")}} ヘッダーで変更できます。
-- [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
-  - : HTTP/1.0 以降では、様々なタイプのコンテンツを送信することができます。 この記事では {{HTTPHeader("Content-Type")}} ヘッダーと MIME 標準を使用してこれがどのように行われるかについて説明します。
-- [www URL とそうでない URL の選択](/ja/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs)
-  - : www という接頭辞のドメインを使うかどうかに関するアドバイスで、この記事では選択の結果とその作成方法について説明します。
-- [HTTP セッションの流れ](/ja/docs/Web/HTTP/Flow_of_an_HTTP_session)
-  - : この基本的な記事では典型的な HTTP セッションについて説明します。ブラウザーのリンクをクリックすると、何が起こるのでしょうか
-- [HTTP メッセージ](/ja/docs/Web/HTTP/Messages)
-  - : HTTP リクエストまたはレスポンス中に送信されるメッセージは、非常に明確な構造を持っています。この入門記事ではその構造、目的、可能性について説明します。
-- [HTTP/2 でのフレームとメッセージ構造](</ja/docs/Web/HTTP/Frame and message structure in HTTP_2>)
-  - : HTTP/2 は HTTP/1.x メッセージをカプセル化し、バイナリフレームで表現します。この記事ではフレームの構造、目的、エンコード方法について説明します。
-- [HTTP/1.x でのコネクション管理](/ja/docs/Web/HTTP/Connection_management_in_HTTP_1.x)
-  - : HTTP/1.1 は持続的な接続とパイプライン処理をサポートする HTTP の最初のバージョンでした。この記事ではこれらの 2 つの概念について説明します。
-- [HTTP/2 でのコネクション管理](/ja/docs/Web/HTTP/Connection_management_in_HTTP_2)
-  - : HTTP/2 では接続の作成方法とメンテナンス方法が完全に再考されました。この記事では HTTP フレームが多重化を許可し、以前の HTTP バージョンの 'head-of-line' ブロック問題を解決する方法について説明します。
-- [コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)
-  - : HTTP はブラウザーが好みの形式、言語、またはエンコーディングをアナウンスするための方法として `Accept-` から始まる一連のヘッダを導入しています。この記事ではこの宣言がどのように起こるか、サーバがどのように反応すると予想され、どのように最も適切な応答を選択するかについて説明します。
diff --git a/files/ja/web/http/basics_of_http/evolution_of_http/index.md b/files/ja/web/http/evolution_of_http/index.md
similarity index 99%
rename from files/ja/web/http/basics_of_http/evolution_of_http/index.md
rename to files/ja/web/http/evolution_of_http/index.md
index 8d24072dcf4872..b94231d752da72 100644
--- a/files/ja/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/ja/web/http/evolution_of_http/index.md
@@ -1,6 +1,7 @@
 ---
 title: HTTP の進化
-slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+slug: Web/HTTP/Evolution_of_HTTP
+original_slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
 l10n:
   sourceCommit: eb9eef29f1ccdaf1c8a464dbe4483c78f7a13b2a
 ---
diff --git a/files/ja/web/http/basics_of_http/mime_types/common_types/index.md b/files/ja/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/ja/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/ja/web/http/mime_types/common_types/index.md
index 5d515c37752961..6250ec599ce122 100644
--- a/files/ja/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/ja/web/http/mime_types/common_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: よくある MIME タイプ
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ja/web/http/basics_of_http/mime_types/index.md b/files/ja/web/http/mime_types/index.md
similarity index 99%
rename from files/ja/web/http/basics_of_http/mime_types/index.md
rename to files/ja/web/http/mime_types/index.md
index 2b14f4bcb4de4d..7a0fe3ef561e29 100644
--- a/files/ja/web/http/basics_of_http/mime_types/index.md
+++ b/files/ja/web/http/mime_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: MIME タイプ（IANA メディア種別）
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types
 l10n:
   sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
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
deleted file mode 100644
index cbae9ee3f14356..00000000000000
--- a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Netscape XSLT/XPath リファレンス
-slug: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
-l10n:
-  sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a
----
-
-{{XsltSidebar}}
-
-次のリストは W3C の XSLT 1.0 勧告と、XPath 勧告に適したセクションの要素、axes、関数にアルファベット順に注釈をつけたものです。XSLT プロセッサーの開発は進行中です。また、機能の拡張と共にこのドキュメントも更新されます。
-
-### 要素
-
-- [xsl:apply-imports](/ja/docs/Web/XSLT/Element/apply-imports) _(対応済)_
-- [xsl:apply-templates](/ja/docs/Web/XSLT/Element/apply-templates) _(対応済)_
-- [xsl:attribute](/ja/docs/Web/XSLT/Element/attribute) _(対応済)_
-- [xsl:attribute-set](/ja/docs/Web/XSLT/Element/attribute-set) _(対応済)_
-- [xsl:call-template](/ja/docs/Web/XSLT/Element/call-template) _(対応済)_
-- [xsl:choose](/ja/docs/Web/XSLT/Element/choose) _(対応済)_
-- [xsl:comment](/ja/docs/Web/XSLT/Element/comment) _(対応済)_
-- [xsl:copy](/ja/docs/Web/XSLT/Element/copy) _(対応済)_
-- [xsl:copy-of](/ja/docs/Web/XSLT/Element/copy-of) _(対応済)_
-- [xsl:decimal-format](/ja/docs/Web/XSLT/Element/decimal-format) _(対応済)_
-- [xsl:element](/ja/docs/Web/XSLT/Element/element) _(対応済)_
-- [xsl:fallback](/ja/docs/Web/XSLT/Element/fallback) _(非対応)_
-- [xsl:for-each](/ja/docs/Web/XSLT/Element/for-each) _(対応済)_
-- [xsl:if](/ja/docs/Web/XSLT/Element/if) _(対応済)_
-- [xsl:import](/ja/docs/Web/XSLT/Element/import) _(ほとんど対応)_
-- [xsl:include](/ja/docs/Web/XSLT/Element/include) _(対応済)_
-- [xsl:key](/ja/docs/Web/XSLT/Element/key) _(対応済)_
-- [xsl:message](/ja/docs/Web/XSLT/Element/message) _(対応済)_
-- [xsl:namespace-alias](/ja/docs/Web/XSLT/Element/namespace-alias) _(非対応)_
-- [xsl:number](/ja/docs/Web/XSLT/Element/number) _(一部対応)_
-- [xsl:otherwise](/ja/docs/Web/XSLT/Element/otherwise) _(対応済)_
-- [xsl:output](/ja/docs/Web/XSLT/Element/output) _(一部対応)_
-- [xsl:param](/ja/docs/Web/XSLT/Element/param) _(対応済)_
-- [xsl:preserve-space](/ja/docs/Web/XSLT/Element/preserve-space) _(対応済)_
-- [xsl:processing-instruction](/ja/docs/Web/XSLT/Element/processing-instruction)
-- [xsl:sort](/ja/docs/Web/XSLT/Element/sort) _(対応済)_
-- [xsl:strip-space](/ja/docs/Web/XSLT/Element/strip-space) _(対応済)_
-- [xsl:stylesheet](/ja/docs/Web/XSLT/Element/stylesheet) _(一部対応)_
-- [xsl:template](/ja/docs/Web/XSLT/Element/template) _(対応済)_
-- [xsl:text](/ja/docs/Web/XSLT/Element/text) _(一部対応)_
-- [xsl:transform](/ja/docs/Web/XSLT/Element/transform) _(対応済)_
-- [xsl:value-of](/ja/docs/Web/XSLT/Element/value-of) _(一部対応)_
-- [xsl:variable](/ja/docs/Web/XSLT/Element/variable) _(対応済)_
-- [xsl:when](/ja/docs/Web/XSLT/Element/when) _(対応済)_
-- [xsl:with-param](/ja/docs/Web/XSLT/Element/with-param) _(対応済)_
-
-### Axes
-
-- [ancestor](/ja/docs/Web/XPath/Axes#ancestor)
-- [ancestor-or-self](/ja/docs/Web/XPath/Axes#ancestor-or-self)
-- [attribute](/ja/docs/Web/XPath/Axes#attribute)
-- [child](/ja/docs/Web/XPath/Axes#child)
-- [descendant](/ja/docs/Web/XPath/Axes#descendant)
-- [descendant-or-self](/ja/docs/Web/XPath/Axes#descendant-or-self)
-- [following](/ja/docs/Web/XPath/Axes#following)
-- [following-sibling](/ja/docs/Web/XPath/Axes#following-sibling)
-- [namespace](/ja/docs/Web/XPath/Axes#namespace) _(非対応)_
-- [parent](/ja/docs/Web/XPath/Axes#parent)
-- [preceding](/ja/docs/Web/XPath/Axes#preceding)
-- [preceding-sibling](/ja/docs/Web/XPath/Axes#preceding-sibling)
-- [self](/ja/docs/Web/XPath/Axes#self)
-
-### 関数
-
-- [boolean()](/ja/docs/Web/XPath/Functions/boolean) _(対応済)_
-- [ceiling()](/ja/docs/Web/XPath/Functions/ceiling) _(対応済)_
-- [concat()](/ja/docs/Web/XPath/Functions/concat) _(対応済)_
-- [contains()](/ja/docs/Web/XPath/Functions/contains) _(対応済)_
-- [count()](/ja/docs/Web/XPath/Functions/count) _(対応済)_
-- [current()](/ja/docs/Web/XPath/Functions/current) _(対応済)_
-- [document()](/ja/docs/Web/XPath/Functions/document) _(対応済)_
-- [element-available()](/ja/docs/Web/XPath/Functions/element-available) _(対応済)_
-- [false()](/ja/docs/Web/XPath/Functions/false) _(対応済)_
-- [floor()](/ja/docs/Web/XPath/Functions/floor) _(対応済)_
-- [format-number()](/ja/docs/Web/XPath/Functions/format-number) _(対応済)_
-- [function-available()](/ja/docs/Web/XPath/Functions/function-available) _(対応済)_
-- [generate-id()](/ja/docs/Web/XPath/Functions/generate-id) _(対応済)_
-- [id()](/ja/docs/Web/XPath/Functions/id) _(一部対応)_
-- [key()](/ja/docs/Web/XPath/Functions/key) _(対応済)_
-- [lang()](/ja/docs/Web/XPath/Functions/lang) _(対応済)_
-- [last()](/ja/docs/Web/XPath/Functions/last) _(対応済)_
-- [local-name()](/ja/docs/Web/XPath/Functions/local-name) _(対応済)_
-- [name()](/ja/docs/Web/XPath/Functions/name) _(対応済)_
-- [namespace-uri()](/ja/docs/Web/XPath/Functions/namespace-uri) _(対応済)_
-- [normalize-space()](/ja/docs/Web/XPath/Functions/normalize-space) _(対応済)_
-- [not()](/ja/docs/Web/XPath/Functions/not) _(対応済)_
-- [number()](/ja/docs/Web/XPath/Functions/number) _(対応済)_
-- [position()](/ja/docs/Web/XPath/Functions/position) _(対応済)_
-- [round()](/ja/docs/Web/XPath/Functions/round) _(対応済)_
-- [starts-with()](/ja/docs/Web/XPath/Functions/starts-with) _(対応済)_
-- [string()](/ja/docs/Web/XPath/Functions/string) _(対応済)_
-- [string-length()](/ja/docs/Web/XPath/Functions/string-length) _(対応済)_
-- [substring()](/ja/docs/Web/XPath/Functions/substring) _(対応済)_
-- [substring-after()](/ja/docs/Web/XPath/Functions/substring-after) _(対応済)_
-- [substring-before()](/ja/docs/Web/XPath/Functions/substring-before) _(対応済)_
-- [sum()](/ja/docs/Web/XPath/Functions/sum) _(対応済)_
-- [system-property()](/ja/docs/Web/XPath/Functions/system-property) _(対応済)_
-- [translate()](/ja/docs/Web/XPath/Functions/translate) _(対応済)_
-- [true()](/ja/docs/Web/XPath/Functions/true) _(対応済)_
-- [unparsed-entity-url()](/ja/docs/Web/XPath/Functions/unparsed-entity-url) _(非対応)_
diff --git a/files/ko/learn/common_questions/index.md b/files/ko/learn/common_questions/index.md
new file mode 100644
index 00000000000000..1159c1a56538a0
--- /dev/null
+++ b/files/ko/learn/common_questions/index.md
@@ -0,0 +1,17 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+l10n:
+  sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3
+---
+
+{{LearnSidebar}}
+
+해당 학습 영역의 섹션은 [HTML](/ko/docs/Learn/HTML)이나 [CSS](/ko/docs/Learn/CSS)와 같은 구조화된 핵심 학습 경로의 일부는 아니지만, 자주 묻는 질문에 대한 답변을 제공하기 위해 만들어졌습니다. 아래의 글들은 독립적으로 읽고 이해할 수 있도록 작성되었습니다.
+
+- [HTML 관련 질문](/ko/docs/Learn/HTML/Howto)
+- [CSS 관련 질문](/ko/docs/Learn/CSS/Howto)
+- [JavaScript 관련 질문](/ko/docs/Learn/JavaScript/Howto)
+- [웹 메커니즘](/ko/docs/Learn/Common_questions/Web_mechanics)
+- [도구 및 설정](/ko/docs/Learn/Common_questions/Tools_and_setup)
+- [디자인 및 접근성](/ko/docs/Learn/Common_questions/Design_and_accessibility)
diff --git a/files/ko/learn/javascript/building_blocks/event_bubbling/index.md b/files/ko/learn/javascript/building_blocks/event_bubbling/index.md
new file mode 100644
index 00000000000000..c1fdd5a269d22f
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/event_bubbling/index.md
@@ -0,0 +1,417 @@
+---
+title: 이벤트 버블링
+slug: Learn/JavaScript/Building_blocks/Event_bubbling
+l10n:
+  sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa
+---
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+
+웹 페이지는 제목, 텍스트 단락, 이미지, 버튼 등 "요소"로 구성되어 있으며 이러한 요소에 발생하는 이벤트를 수신할 수 있다는 것을 살펴보았습니다. 예를 들어, 버튼에 수신기를 추가하면 사용자가 버튼을 클릭했을 때 실행됩니다.
+
+또한 이러한 요소가 서로 "중첩"될 수 있다는 것을 보았습니다. 예를 들어, {{htmlelement("button")}}은 {{htmlelement("div")}} 요소 안에 놓일 수 있습니다. 이 때 `<div>` 요소를 "부모" 요소라고 부르고 `<button>`을 "자식" 요소라고 부릅니다.
+
+이번 장에서는 부모 요소에 이벤트 수신기를 추가했을 때 사용자가 자식 요소를 클릭하면 어떤 일이 일어나는지 살펴보겠습니다.
+
+## 이벤트 버블링 소개
+
+### 부모 요소에 수신기 설정하기
+
+다음과 같은 웹 페이지가 있다고 가정해 봅시다.
+
+```html
+<div id="container">
+  <button>여기를 클릭하세요!</button>
+</div>
+<pre id="output"></pre>
+```
+
+여기서 버튼은 다른 요소인 {{HTMLElement("div")}} 안에 있습니다. 이 `<div>` 요소는 내부에 포함된 요소의 **부모**라고 합니다. 부모에 클릭 이벤트 처리기를 추가한 다음 버튼을 클릭하면 어떻게 될까요?
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+container.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Setting a listener on a parent element', '100%', 200, "", "") }}
+
+사용자가 버튼을 클릭하면 부모가 클릭 이벤트를 방출하는 것을 볼 수 있습니다.
+
+```plain
+DIV 요소를 클릭했습니다.
+```
+
+버튼이 `<div>` 안에 있으므로 버튼을 클릭하면 암시적으로 버튼 안에 있는 요소도 클릭하게 됩니다.
+
+### 버블링 예제
+
+버튼과 부모 "둘 다" 이벤트 수신기를 추가하면 어떻게 될까요?
+
+```html
+<body>
+  <div id="container">
+    <button>여기를 클릭하세요!</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+버튼과 부모(`<div>`), 그리고 두 요소를 모두 포함하는 {{HTMLElement("body")}} 요소에 클릭 이벤트 처리기를 추가해 보겠습니다.
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Bubbling example', '100%', 200, "", "") }}
+
+사용자가 버튼을 클릭하면 세 요소 모두 클릭 이벤트를 방출하는 것을 볼 수 있습니다.
+
+```plain
+BUTTON 요소를 클릭했습니다.
+DIV 요소를 클릭했습니다.
+BODY 요소를 클릭했습니다.
+```
+
+이 경우는 다음과 같습니다.
+
+- 버튼 클릭이 먼저 일어납니다.
+- 그 다음에 부모(`<div>` 요소) 클릭이 일어납니다.
+- 그리고 `<div>` 요소의 부모(`<body>` 요소) 클릭이 일어납니다.
+
+이를 이벤트가 클릭한 가장 안쪽의 요소에서 **상위로 버블링**된다고 설명할 수 있습니다.
+
+이 동작은 유용할 수도 있고 예상치 못한 문제를 일으킬 수도 있습니다. 다음 섹션에서는 이로 인해 발생하는 문제를 살펴보고 해결책을 찾아보겠습니다.
+
+### 동영상 플레이어 예제
+
+이 예제에서 페이지에 처음에는 숨겨져있는 동영상과 "동영상 표시"라는 버튼이 있습니다. 우리는 다음과 같은 상호작용을 원합니다.
+
+- 사용자가 "동영상 표시" 버튼을 클릭하면 동영상이 포함된 상자를 표시하지만 재생하지는 않습니다.
+- 사용자가 동영상을 클릭하면 재생합니다.
+- 사용자가 동영상 외부의 상자 어딘가를 클릭하면 상자를 숨깁니다.
+
+HTML은 다음과 같습니다.
+
+```html
+<button>동영상 표시</button>
+
+<div class="hidden">
+  <video>
+    <source
+      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+      type="video/webm" />
+    <p>
+      이 브라우저는 HTML 동영상을 지원하지 않습니다. 대신
+      <a href="rabbit320.mp4">동영상 링크</a>를 제공합니다.
+    </p>
+  </video>
+</div>
+```
+
+HTML에는 다음이 포함됩니다.
+
+- `<button>` 요소
+- 초기에 `class="hidden"` 특성을 갖는 `<div>` 요소
+- `<div>` 요소 내부에 중첩된 `<video>` 요소.
+
+CSS 를 사용해 `"hidden"` 클래스를 설정한 요소를 숨기고 있습니다.
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+JavaScript는 다음과 같습니다.
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+video.addEventListener("click", () => video.play());
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+이렇게 하면 세 개의 `'click'` 이벤트 수신기가 추가됩니다.
+
+- 하나는 `<button>`에 있으며, `<video>`를 포함하는 `<div>`를 표시합니다.
+- 하나는 `<video>`에 있으며, 동영상을 재생합니다.
+- 하나는 `<div>`에 있으며, 동영상을 숨깁니다.
+
+예제가 어떻게 동작하는지 살펴보겠습니다.
+
+{{ EmbedLiveSample('Video_player_example', '100%', 500) }}
+
+버튼을 클릭하면 컨테이너와 그 안에 있는 동영상이 표시됩니다. 하지만 동영상을 클릭하면 동영상은 재생되지만 상자는 다시 숨겨집니다!
+
+동영상은 `<div>` 안에 있으며 그 일부입니다. 따라서 동영상을 클릭하면 두 이벤트 처리기가 "모두" 실행되어 이런 동작이 일어납니다.
+
+### stopPropagation() 으로 문제 해결하기
+
+이전 섹션에서 보았듯이 이벤트 버블링은 때때로 문제를 일으킬 수 있지만 이를 방지하는 방법이 있습니다.
+[`Event`](/ko/docs/Web/API/Event) 객체에는 [`stopPropagation()`](/ko/docs/Web/API/Event/stopPropagation)이라는 함수가 있으며 이벤트 처리기 내에서 호출되면 이벤트가 다른 요소로 버블링되는 것을 방지합니다.
+
+JavaScript를 다음과 같이 변경하여 현재 문제를 해결할 수 있습니다.
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+
+video.addEventListener("click", (event) => {
+  event.stopPropagation();
+  video.play();
+});
+
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+`<video>` 요소의 `'click'` 이벤트 처리기에서 이벤트 객체에 `stopPropagation()`을 호출하기만 하면 됩니다. 이렇게 하면 해당 이벤트가 상위 박스로 버블링되는 것을 멈출 수 있습니다. 이제 버튼을 클릭하고 동영상을 클릭해 보세요.
+
+{{EmbedLiveSample("Fixing the problem with stopPropagation()", '100%', 500)}}
+
+```html hidden
+<button>동영상 보기</button>
+
+<div class="hidden">
+  <video>
+    <source
+      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+      type="video/webm" />
+    <p>
+      이 브라우저는 HTML 동영상을 지원하지 않습니다. 대신
+      <a href="rabbit320.mp4">동영상 링크</a>를 제공합니다.
+    </p>
+  </video>
+</div>
+```
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+## 이벤트 캡처
+
+이벤트 전파의 또 다른 형태로 "이벤트 캡처"가 있습니다. 이것은 이벤트 버블링과 비슷하지만 순서가 반대입니다. 즉, 이벤트가 대상의 가장 안쪽의 대상 요소에서 발생해서 그 다음으로 중첩이 적은 요소순으로 전파되는게 아니라, 반대로 "가장 적게 중첩된" 요소에서 발생해서 그 다음으로 중첩이 많은 요소순으로 대상에 도달할 때까지 전파됩니다.
+
+이벤트 캡처는 기본적으로 비활성화되어 있습니다. 활성화하려면 `addEventListener()`에서 `capture` 옵션을 전달해야 합니다.
+
+이 예제는 `capture` 옵션을 사용한다는 점을 제외하면 앞서 본 [버블링 예제](#버블링_예제)와 동일합니다.
+
+```html
+<body>
+  <div id="container">
+    <button>클릭해주세요!</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick, { capture: true });
+container.addEventListener("click", handleClick, { capture: true });
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Event capture', '100%', 200, "", "") }}
+
+이 경우 메시지 순서는 반대입니다. `<body>` 이벤트 처리기가 먼저 실행되고, 그 다음에 `<div>` 이벤트 처리기가 실행되고, 그 다음에 `<button>` 이벤트 처리기가 실행됩니다.
+
+```plain
+BODY 요소를 클릭했습니다.
+DIV 요소를 클릭했습니다.
+BUTTON 요소를 클릭했습니다.
+```
+
+굳이 왜 버블링과 캡처링을 둘 다 쓰는걸까요? 브라우저 간의 호환성이 지금보다 훨씬 낮았던 예전에 Netscape는 이벤트 캡처링만 사용했고 Internet Explorer는 이벤트 버블링만 사용했습니다. W3C가 동작을 표준화하기로 결정하고 합의할 때, 최신 브라우저에 구현된 것처럼 둘 다 포함하는 시스템이 되었습니다.
+
+기본적으로 거의 모든 이벤트 처리기는 버블링 단계에서 등록되며, 대부분의 경우 이 동작이 더 합리적입니다.
+
+## 이벤트 위임
+
+이전 섹션에서는 이벤트 버블링으로 인해 발생하는 문제와 그 해결 방법을 살펴보았습니다. 이벤트 버블링은 성가신게 아니라 매우 유용할 수도 있습니다. 특히, **이벤트 위임**을 가능하게 합니다. 많은 자식 요소 중 하나와 사용자가 상호 작용할 때 특정 코드를 실행하려면, 부모 요소에 이벤트 수신기를 설정하고 자식 요소에서 발생한 이벤트가 부모로 버블링되도록 하면 됩니다. 이렇게 하면 각 자식 요소에 개별적으로 이벤트 수신기를 설정할 필요가 없습니다.
+
+사용자가 버튼을 클릭했을 때 전체 페이지의 배경색을 설정했던 첫 번째 예제로 돌아갑시다. 이번엔 페이지를 16개의 타일로 나누고 사용자가 해당 타일을 클릭했을 때 각 타일을 임의의 색상으로 설정하려고 합니다.
+
+HTML은 다음과 같습니다.
+
+```html
+<div id="container">
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+</div>
+```
+
+타일의 크기와 위치를 설정하기 위해 간단한 CSS를 설정합니다.
+
+```css
+.tile {
+  height: 100px;
+  width: 25%;
+  float: left;
+}
+```
+
+JavaScript에서 모든 타일에 클릭 이벤트 처리기를 추가할 수 있습니다. 그러나 보다 간단하고 효율적인 옵션은 부모에 클릭 이벤트 처리기를 설정하고 이벤트 버블링을 사용하여 사용자가 타일을 클릭할 때 처리기가 실행되도록 하는 것입니다.
+
+```js
+function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+function bgChange() {
+  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
+  return rndCol;
+}
+
+const container = document.querySelector("#container");
+
+container.addEventListener("click", (event) => {
+  event.target.style.backgroundColor = bgChange();
+});
+```
+
+출력은 다음과 같습니다 (클릭해보십시오).
+
+{{ EmbedLiveSample('Event delegation', '100%', 430, "", "") }}
+
+> [!NOTE]
+> 이 예제에서, 우리는 `event.target`을 사용하여 이벤트의 대상이었던 요소(즉, 가장 안쪽 요소)를 가져오고 있습니다. 이 이벤트를 처리한 요소(이 경우 컨테이너)에 접근하고싶다면 `event.currentTarget`을 사용할 수 있습니다.
+
+> [!NOTE]
+> 전체 소스 코드는 [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html)에서 볼 수 있습니다. 또한 [라이브 실행](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)도 참고하십시오.
+
+## `target` 과 `currentTarget`
+
+이 페이지에서 소개한 예제를 자세히 살펴보면, 클릭한 요소에 접근하기 위해 이벤트 객체의 두 가지 속성을 사용하고 있음을 알 수 있습니다. [부모 요소에 수신기 설정하기](#부모_요소에_수신기_설정하기)에서 {{domxref("Event.currentTarget", "event.currentTarget")}}을 사용하고, [이벤트 위임](#이벤트_위임)에서는 {{domxref("Event.target", "event.target")}}을 사용하고 있습니다.
+
+`target`이 이벤트가 처음 발생한 요소를 참조하는 반면 `currentTarget`은 이 이벤트 처리기가 연결된 요소를 참조하는 차이가 있습니다.
+
+이벤트가 상위로 버블링되는 동안 `target`은 동일하게 유지되는 반면, `currentTarget`은 계층구조 내 서로 다른 요소에 연결된 이벤트 처리기에 따라 달라집니다.
+
+위의 [버블링 예제](#버블링_예제)를 약간 변형하면 이를 확인할 수 있습니다. 이전과 같은 HTML을 사용하고 있습니다.
+
+```html
+<body>
+  <div id="container">
+    <button>클릭해주세요!</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+JavaScript는 `target`과 `currentTarget`을 모두 로깅하는것 외에는 거의 같습니다.
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  const logTarget = `Target: ${e.target.tagName}`;
+  const logCurrentTarget = `Current target: ${e.currentTarget.tagName}`;
+  output.textContent += `${logTarget}, ${logCurrentTarget}\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+버튼을 클릭했을 때, 이벤트 처리기가 버튼 자체나 `<div>` 또는 `<body>` 에 연결되어 있어도 `target` 은 항상 버튼 요소라는 점을 주의하세요. 그러나 `currentTarget`은 현재 실행중인 이벤트 처리기의 요소로 식별됩니다.
+
+{{embedlivesample("target and currentTarget")}}
+
+`target` 속성은 위의 [이벤트 위임](#이벤트_위임) 예제처럼 이벤트 위임에서 자주 사용합니다.
+
+## 스킬 테스트!
+
+이 문서의 마지막까지 왔습니다. 그런데 가장 중요한 정보를 기억하고 있나요? 계속하기 전에 이 정보를 기억했는지 확인하려면 [스킬 테스트: 이벤트](/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)를 참조하세요.
+
+## 요약
+
+이제 이 초기 단계에서 웹 이벤트에 대해 알아야 할 모든 것을 알게 되었을 것입니다.
+앞서 언급했듯이 이벤트는 코어 JavaScript의 일부가 아니며 브라우저 웹 API에서 정의되어 있습니다.
+
+또한 웹 API에서부터 브라우저 WebExtensions, Node.js(서버 측 JavaScript)와 같은 다른 영역에 이르기까지 JavaScript를 사용하는 맥락에 따라 다양한 이벤트 모델이 있다는 것을 이해하는 것이 중요합니다.
+지금 당장 이 모든 영역을 이해할 것으로 기대하지는 않지만 웹 개발을 배우면서 이벤트의 기본을 이해하는 데 확실히 도움이 됩니다.
+
+> [!NOTE]
+> 진행중에 막혔다면 [커뮤니케이션 채널](/ko/docs/MDN/Community/Communication_channels)에서 도움을 요청하세요.
+
+## 같이 보기
+
+- [domevents.dev](https://domevents.dev/) — 탐색을 통해 DOM 이벤트 시스템의 동작에 대해 학습할 수 있는 매우 유용한 대화형 놀이터 앱입니다.
+- [이벤트 참고서](/ko/docs/Web/Events)
+- [이벤트 순서](https://www.quirksmode.org/js/events_order.html) (캡처링과 버블링에 대한 논의) — 피터-폴 코흐가 매우 자세하게 설명한 글입니다.
+
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.md b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
new file mode 100644
index 00000000000000..c2662e022bacdd
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
@@ -0,0 +1,215 @@
+---
+title: 사용자 인터페이스
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+l10n:
+  sourceCommit: 668b38a4f6cd96609b9a969fe4653b46aec4e712
+---
+
+{{AddonSidebar}}
+
+WebExtension API를 사용하는 확장 프로그램은 사용자에게 기능을 제공할 수 있도록 몇몇 사용자 인터페이스 옵션을 제공합니다. 이러한 옵션들의 요약은 아래에 제공되며, 각 사용자 인터페이스 옵션에 대한 자세한 소개는 이 섹션에서 다룹니다.
+
+> [!NOTE]
+> 확장 프로그램에서 UI 컴포넌트를 사용해 훌륭한 사용자 경험을 만들기 위한 조언을 얻고 싶다면 [User experience best practices](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/)를 참고하세요.
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">UI 옵션</th>
+      <th scope="col">내용</th>
+      <th scope="col">예시</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button"
+          >툴바 버튼</a
+        >
+        (브라우저 동작)
+      </td>
+      <td>
+        클릭했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 툴바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보입니다.
+      </td>
+      <td>
+        <img
+          alt="툴바(브라우저 동작) 버튼을 보여주는 예시"
+          src="browser-action.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">팝업</a>이 있는 툴바 버튼
+      </td>
+      <td>
+       브라우저 툴바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다.
+      </td>
+      <td>
+        <img
+          alt="툴바 버튼의 팝업 예시"
+          src="popup-shadow.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions"
+          >주소 바 버튼</a
+        >
+        (페이지 동작)
+      </td>
+      <td>
+        클랙했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 주소 바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보이지 않습니다.
+      </td>
+      <td>
+        <img
+          alt="주소 바 버튼(페이지 액션)을 보여주는 예시"
+          src="address_bar_button.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">팝업</a>이 있는 주소 바 버튼
+      </td>
+      <td>
+        주소 바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다.
+      </td>
+      <td>
+        <img
+          alt="주소 바 버튼의 팝업 예시"
+          src="page_action_popup.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items"
+          >맥락 메뉴 항목</a
+        >
+      </td>
+      <td>
+        하나 이상의 브라우저 맥락 메뉴의 메뉴 항목, 체크박스, 라디오 버튼입니다. 또한, 구분선을 추가하여 메뉴를 구조화할 수도 있습니다. 메뉴 항목들이 클릭되면 이벤트가 확장 프로그램에 전달됩니다.
+      </td>
+      <td>
+         <img
+          alt="context-menu-demo 예제에서 WebExtension이 추가한 컨텍스트 메뉴 항목의 예시"
+          src="context_menu_example.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars"
+          >사이드바</a
+        >
+      </td>
+      <td>
+         <p>
+          웹 페이지 옆에 표시되는 HTML 문서로 페이지마다 고유한 콘텐츠를 표시할 수 있습니다. 사이드바는 확장 프로그램이 설치될 때 열리며, 이후 사용자의 사이드바 가시성 선택을 따릅니다. 사이드바 내의 사용자 상호작용은 해당 HTML 문서에서 처리됩니다.
+        </p>
+      </td>
+      <td><img alt="사이드바의 예시" src="bookmarks-sidebar.png" /></td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"
+          >옵션 페이지</a
+        >
+      </td>
+       <td>
+        확장 프로그램의 설정을 정의할 수 있는 페이지로 사용자가 이 설정을 변경할 수 있습니다.
+        사용자는 브라우저의 애드온 관리자에서 이 페이지에 접근할 수 있습니다.
+      </td>
+      <td>
+        <img
+          alt="즐겨찾는 색상 예시에서 옵션 페이지에 추가된 내용을 보여주는 예시."
+          src="options_page.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages"
+          >확장 프로그램 페이지</a
+        >
+      </td>
+       <td>
+       확장 프로그램에 포함된 웹 페이지를 사용하여 창이나 탭 내에서 양식, 도움말 또는 필요한 기타 콘텐츠를 제공할 수 있습니다.
+      </td>
+      <td>
+        <img
+          alt="분리된 패널로 표시되는 간단한 번들 페이지의 예시"
+          src="bundled_page_as_panel_small.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"
+          >알림</a
+        >
+      </td>
+      <td>
+        운영체제의 알림 메커니즘을 통해 사용자에게 표시되는 일시적인 알림입니다. 사용자가 알림을 클릭하거나 알림이 자동으로 또는 사용자의 요청으로 닫힐 때, 확장 프로그램으로 이벤트가 전달됩니다.
+      </td>
+      <td>
+        <img
+          alt="확장 프로그램에 의해 트리거된 시스템 알림의 예시"
+          src="notify-shadowed.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"
+          >주소 바 제안</a
+        >
+      </td>
+      <td>
+        사용자가 키워드를 입력할 때 맞춤 주소 표시줄 제안을 제공합니다.
+      </td>
+      <td>
+        <img
+          alt="firefox_code_search 확장 프로그램이 주소 표시줄 제안을 커스터마이즈한 결과를 보여주는 예시."
+          src="omnibox_example_small.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"
+          >개발자 도구 패널</a
+        >
+      </td>
+      <td>
+        브라우저의 개발자 도구에 표시되는 HTML 문서가 연결된 탭.
+      </td>
+      <td>
+        <img
+          alt="Example showing the result of the firefox_code_search WebExtension&#x27;s customization of the address bar suggestions."
+          src="developer_panel_tab.png"
+        />
+      </td>
+    </tr>
+
+  </tbody>
+</table>
+
+다음의 사용 방법 가이드에서는 이러한 사용자 인터페이스 옵션 중 일부를 만드는 방법을 단계별로 안내합니다.
+
+- [접근성 가이드라인](https://extensionworkshop.com/documentation/develop/build-an-accessible-extension/)
+- [툴바에 버튼 추가하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar)
+- [브라우저 스타일](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles)
+- [개발자 도구 확장하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)
+- [설정 페이지 구현하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page)
diff --git a/files/ko/web/api/battery_status_api/index.md b/files/ko/web/api/battery_status_api/index.md
index 1035888a4ab79f..b9b943d93e4b7d 100644
--- a/files/ko/web/api/battery_status_api/index.md
+++ b/files/ko/web/api/battery_status_api/index.md
@@ -1,38 +1,74 @@
 ---
 title: Battery Status API
 slug: Web/API/Battery_Status_API
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
-{{DefaultAPISidebar("Battery API")}}
+{{DefaultAPISidebar("Battery API")}}{{securecontext_header}}
 
 **Battery API** 만큼이나 자주 언급되는 **Battery Status API**는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.
 
-Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.
+> [!NOTE]
+> 이 API는 [Web Workers](/ko/docs/Web/API/Web_Workers_API) 에서 사용이 불가능합니다. ({{domxref("WorkerNavigator")}} 에 포함되어 있지 않음)
+
+## 인터페이스
+
+- {{domxref("BatteryManager")}}
+  - : 시스템의 배터리 충전 상태에 대한 정보를 제공합니다.
+
+### 다른 인터페이스로의 확장
+
+- {{domxref("Navigator.getBattery()")}}
+  - : {{DOMxRef("BatteryManager")}} 객체를 이행하는 {{JSxRef("Promise")}}를 리턴합니다.
 
 ## 예제
 
-아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{domxref("BatteryManager.chargingchange_event", "chargingchange")}} 와 {{domxref("BatteryManager.levelchange_event", "levelchange")}} 이벤트가 발생하면 완료 됩니다.
+이 예제에서는 배터리가 충전중인 상태(전원 케이블을 연결하여 충전 중인지)와 배터리 잔량 및 타이밍의 변화를 모두 관찰합니다. 이 작업은 {{domxref("BatteryManager.chargingchange_event", "chargingchange")}}, {{domxref("BatteryManager.levelchange_event", "levelchange")}}, {{domxref("BatteryManager.chargingtimechange_event", "chargingtimechange")}}, {{domxref("BatteryManager.dischargingtimechange_event", "dischargingtimechange")}} 이벤트를 수신하는 방식으로 수행됩니다.
 
 ```js
-var battery =
-  navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+navigator.getBattery().then((battery) => {
+  function updateAllBatteryInfo() {
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
 
-function updateBatteryStatus() {
-  console.log("Battery status: " + battery.level * 100 + " %");
+  battery.addEventListener("chargingchange", () => {
+    updateChargeInfo();
+  });
+  function updateChargeInfo() {
+    console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
+  }
+
+  battery.addEventListener("levelchange", () => {
+    updateLevelInfo();
+  });
+  function updateLevelInfo() {
+    console.log(`Battery level: ${battery.level * 100}%`);
+  }
 
-  if (battery.charging) {
-    console.log("Battery is charging");
+  battery.addEventListener("chargingtimechange", () => {
+    updateChargingInfo();
+  });
+  function updateChargingInfo() {
+    console.log(`Battery charging time: ${battery.chargingTime} seconds`);
   }
-}
 
-battery.addEventListener("chargingchange", updateBatteryStatus);
-battery.addEventListener("levelchange", updateBatteryStatus);
-updateBatteryStatus();
+  battery.addEventListener("dischargingtimechange", () => {
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo() {
+    console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
+  }
+});
 ```
 
-명세서의 예제도 [**확인**](http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction)해보세요.
+[명세서의 예시도](https://www.w3.org/TR/battery-status/#examples) 참조하세요.
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -40,8 +76,6 @@ updateBatteryStatus();
 
 {{Compat}}
 
-## 더보기
+## 같이 보기
 
-- [Hacks blog post - Using the Battery API](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
-- {{domxref("BatteryManager")}}
-- {{domxref("window.navigator.battery","navigator.battery")}}
+- [Hacks blog post - Using the Battery API](https://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
diff --git a/files/ko/web/api/document/scripts/index.md b/files/ko/web/api/document/scripts/index.md
new file mode 100644
index 00000000000000..3d91925219767b
--- /dev/null
+++ b/files/ko/web/api/document/scripts/index.md
@@ -0,0 +1,34 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+l10n:
+  sourceCommit: 904f8c3d9c8a54e917f8db565bcfe58f976d859c
+---
+
+{{APIRef("DOM")}}
+
+**`scripts`** 는 {{domxref("Document")}}인터페이스의 속성으로 문서 중{{HTMLElement("script")}} 요소의 목록을 반환합니다. 반환되는 객체는 단일 {{domxref("HTMLCollection")}} 객체입니다.
+
+## 값
+
+{{domxref("HTMLCollection")}}입니다. 이를 사용하여 목록의 모든 요소를 배열처럼 가져올 수 있습니다.
+
+## 예제
+
+다음은 페이지 내 {{HTMLElement("script")}} 요소의 존재를 확인하는 예시입니다.
+
+```js
+let scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/htmlelement/tabindex/index.md b/files/ko/web/api/htmlelement/tabindex/index.md
new file mode 100644
index 00000000000000..3c1db6a1af5f95
--- /dev/null
+++ b/files/ko/web/api/htmlelement/tabindex/index.md
@@ -0,0 +1,46 @@
+---
+title: "HTMLElement: tabIndex 속성"
+slug: Web/API/HTMLElement/tabIndex
+l10n:
+  sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("HTML DOM")}}
+
+**`tabIndex`** 는 현재 요소의 탭 순서를 나타내는 {{DOMxRef("HTMLElement")}} 인터페이스입니다.
+
+탭 순서는 다음과 같습니다.
+
+1. `tabIndex`가 양수인 요소인 경우.
+   동일한 `tabIndex`값을 가진 요소들은 나타나는 순서대로 탐색되어야 합니다.
+   탐색은 가장 낮은 `tabIndex`에서 가장 높은 `tabIndex`로 진행됩니다.
+2. `tabIndex` 속성을 지원하지 않거나 지원하면서 `tabIndex`를 `0`으로 지정한 요소들은 나타나는 순서대로 탐색됩니다.
+
+비활성화된 요소들은 탭 순서에 참여하지 않습니다.
+
+값은 순차적일 필요가 없으며, 특정 값으로 시작할 필요도 없습니다. 값은 음수일 수도 있지만, 각 브라우저는 매우 큰 값을 잘라냅니다.
+
+## 값
+
+정수
+
+## 예제
+
+```js
+const b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Accessibility of keyboard-navigable JavaScript widgets](/ko/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)
+- HTML 전역 특성 [`tabindex`](/ko/docs/Web/HTML/Global_attributes/tabindex)
diff --git a/files/ko/web/css/css_counter_styles/using_css_counters/index.md b/files/ko/web/css/css_counter_styles/using_css_counters/index.md
index 54c6ede2189fea..05390bd39c64c2 100644
--- a/files/ko/web/css/css_counter_styles/using_css_counters/index.md
+++ b/files/ko/web/css/css_counter_styles/using_css_counters/index.md
@@ -1,59 +1,213 @@
 ---
 title: CSS 카운터 사용하기
 slug: Web/CSS/CSS_counter_styles/Using_CSS_counters
+l10n:
+  sourceCommit: f75fd658f627b5730a14ada901120cfa4ee01bda
 ---
 
 {{CSSRef}}
 
-**CSS counters**를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.
+**CSS counters**를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, 카운터를 사용해 웹페이지의 제목에 자동으로 번호를 매기거나 순서가 있는 목록의 서수를 변경할 수 있습니다.
+
+카운터는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하거나 감소하며, 본질적으로 변수입니다.
+카운터에 사용자 지정 이름을 적용할 수 있고, 모든 순서가 있는 목록에 대해 기본적으로 생성되는 `list-item` 카운터도 조작할 수 있습니다.
 
 ## Counters 사용하기
 
+CSS 카운터를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성을 사용하여 초기화 해야합니다. 카운터의 값은 {{cssxref("counter-increment")}} 속성을 이용하여 증가하거나 감소시킬 수 있습니다. 카운터의 현재 값은 {{cssxref("counter", "counter()")}} 혹은 {{cssxref("counters", "counters()")}} 함수로 표시되는데, 일반적으로 [가상 요소](/ko/docs/Web/CSS/Pseudo-elements)인 {{CSSxRef("content")}} 속성 내에서 쓰입니다.
+
+카운터는 박스를 생성하는 요소에 대해서만 설정, 재설정, 혹은 증가시킬 수 있습니다.
+예를 들어, 요소에 `display: none` 가 설정되어 있다면, 해당 요소에서 적용되는 카운터는 모두 무시됩니다.
+
+카운터의 속성은 {{cssxref("contain")}} 속성에 상세하게 설명된 스타일 격리를 사용하여 특정 요소 내에서 범위를 지정할 수 있습니다.
+
 ### 카운터 값 조작하기
 
-CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값 `0`)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.
+CSS 카운터를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성을 사용하여 초기화 해야합니다.
+이 속성은 카운터의 값을 아무 숫자로 변경하는 데에 사용됩니다.
+
+아래 예제에서는 `section` 이라고 명명된 카운터를 기본값 (0)으로 초기화합니다.
+
+```css
+counter-reset: section;
+```
+
+각각에 대해 초기값을 특정한다면 여러 개의 카운터를 초기화할 수도 있습니다.
+아래 예제에서는 `section` 과 `topic` 카운터를 기본값으로 초기화하고, `page` 카운터는 3으로 설정합니다.
+
+```css
+counter-reset: section page 3 topic;
+```
+
+한번 초기화가 되면 카운터의 값은 {{cssxref("counter-increment")}} 을 사용하여 증가하거나 감소시킬 수 있습니다.
+예를 들어, 아래 선언에서는 모든 `h3` 태그에 대해 `section` 카운터를 하나씩 증가시킵니다.
+
+```css
+h3::before {
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+}
+```
+
+카운터의 이름 뒤에 양수나 음수를 사용함으로써증가하거나 감소시킬 값을 설정할 수 있습니다.
+
+카운터의 이름으로 `none`, `inherit`, 또는 `initial` 는 사용 불가하고, 이런 이름을 사용하면 선언은 무시됩니다.
 
 ### 카운터 표시하기
 
-Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.
+카운터의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.
+
+예를 들어, 다음 선언에서는 `counter()` 를 사용하여 각각의 `h3` 제목 앞에 `Section <number>:` 라는 텍스트를 추가하고, 여기서의 `<number>` 는 십진수로 카운트된 값입니다. (기본으로 표시되는 스타일)
+
+```css
+h3::before {
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+  content: "Section " counter(section) ": "; /* 기본 스타일(십진수)로 카운터 값 표시 */
+}
+```
+
+{{cssxref("counter", "counter()")}} 함수는 중첩된 단계의 번호 매기기가 부모 단계의 맥락을 포함하지 않을 때에 사용됩니다.
+여기 각각의 중첩 단계가 1부터 시작하는 예제가 있습니다.
+
+```plain
+1 One
+  1 Nested one
+  2 Nested two
+2 Two
+  1 Nested one
+  2 Nested two
+  3 Nested three
+3 Three
+```
+
+{{cssxref("counters", "counters()")}} 함수는 중첩된 단계의 카운트가 부모 단계의 카운트를 포함해야 할 때 사용됩니다.
+예를 들어, 다음과 같이 섹션을 레이아웃하는 데에 사용할 수 있습니다.
+
+```plain
+1 One
+  1.1 Nested one
+  1.2 Nested two
+2 Two
+  2.1 Nested one
+  2.2 Nested two
+  2.3 Nested three
+3 Three
+```
+
+{{cssxref("counter", "counter()")}} 함수는 `counter(<counter-name>)` 와 `counter(<counter-name>, <counter-style>)` 처럼 두 가지 형태로 사용될 수 있습니다.
+생성된 텍스트는 의사 요소의 범위 내에서 주어진 이름의 가장 안쪽의 카운터 값입니다.
+
+{{cssxref("counters", "counters()")}} 함수 또한 두 가지 형태를 가지는데, `counters(<counter-name>, <separator>)` 와 `counters(<counter-name>, <separator>, <counter-style>)` 입니다.
+생성된 텍스트는 의사 요소의 범위 내에서 주어진 이름의 모든 카운터 값이고, 가장 바깥쪽부터 가장 안쪽까지를 문자열 (`<separator>`)를 사용하여 분리합니다.
+
+카운터는 두 가지 방법 모두에서 지정된 `<counter-style>` 로 렌더링됩니다. (기본값은 `decimal`)
+{{cssxref("list-style-type")}} 값들을 사용하거나 사용자 지정의 [맞춤 스타일](/ko/docs/Web/CSS/CSS_counter_styles)을 사용할 수도 있습니다.
+
+`counter()` 와 `counters()` 의 사용에 대한 예제는 아래 [기본 예제](#기본_예제) 그리고 [중첩 카운터 예제](#중첩_카운터_예제)에서 확인할 수 있습니다.
+
+### 역순 카운터
+
+역순 카운터는 증가가 아닌 감소를 목적으로 하는 카운터입니다.
+역순 카운터는 {{cssxref("counter-reset")}} 에서 카운터의 이름을 지정할 때 `reversed()` 함수 표기를 사용하여 생성할 수 있습니다.
+
+역순 카운터는 기본 초기값을 가지고 있는데, 이는 요소의 수와 동일합니다. (기본값이 0인 일반적인 카운터와는 다릅니다.)
+이는 요소의 수에서 하나까지 감소시키는 카운터의 구현을 더 쉽게 만듭니다.
 
-`counter()` 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수`decimal`)으로 뿌려집니다.
+예를 들어, `section` 이라는 이름의 역순 카운터를 기본 초기값으로 생성하기 위해서는 아래 문법처럼 작성할 수 있습니다.
 
-`counters()` 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수`decimal`)로 렌더링 됩니다.
+```css
+counter-reset: reversed(section);
+```
+
+물론 원하는 초기값을 지정할 수도 있습니다.
+
+카운터의 값은 {{cssxref("counter-increment")}} 의 음수값을 특정함에 따라 감소하게 됩니다.
+
+> **참고:** {{cssxref("counter-increment")}} 를 사용하여 역순이 아닌 카운터를 감소시킬 수 있습니다.
+> 역순 카운터의 주요 이점은 기본 초기값이며,`list-item` 카운터가 역순 카운터를 자동으로 감소시킨다는 점입니다.
+
+### 목록 요소의 카운터
+
+{{HTMLElement("ol")}} 요소로 생성된 것과 같은 순서가 있는 목록에서, 카운터는 암묵적으로 `list-item` 라는 이름을 갖습니다.
+
+다른 카운터들처럼 이 또한 0의 기본 초기값을 가지게 되는데, "요소의 숫자" 역시 역순 카운터의 초기값으로 쓰입니다.
+사용자가 지정한 카운터가 아니라면 `list-item` 은 카운터가 역순인지 아닌지 여부에 따라 자동적으로 각각의 요소에 대하여 1씩 증가하거나 감소하게 됩니다.
+
+`list-item` 카운터는 CSS 를 사용한 순서가 있는 목록의 기본 동작을 조작할 수도 있습니다.
+예를 들어 기본 초기값을 변경하거나, {{cssxref("counter-increment")}} 를 사용하여 목록 요소가 증가하거나 감소되는 것을 변경할 수 있습니다.
+
+## 예제
 
 ### 기본 예제
 
-여기서는 제목 앞에 숫자를 붙여봅니다.
+이 예제는 각 제목의 시작 부분에 "Section \[카운터 값]:"을 추가합니다.
 
 #### CSS
 
 ```css
 body {
-  counter-reset: section; /* counter 이름을 'section'으로 지정합니다.
-                                                   초깃값은 0입니다. */
+  counter-reset: section; /* 카운터의 이름을 'section' 으로 지정하며, 초기값은 0이 됩니다. */
 }
 
 h3::before {
-  counter-increment: section; /* section의 카운터 값을 1씩 증가시킵니다. */
-  content: "Section " counter(section) ": "; /* section의 카운터 값을 표시합니다. */
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+  content: "Section " counter(section) ": "; /* 'Section ' 단어를 표시하고,
+                                                각 h3의 내용 앞에 섹션 카운터 값과
+                                                콜론을 추가합니다. */
 }
 ```
 
 #### HTML
 
 ```html
-<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
+<h3>도입</h3>
+<h3>본문</h3>
+<h3>결론</h3>
 ```
 
 #### 결과
 
 {{EmbedLiveSample("Basic_example", "100%", 150)}}
 
-### 더 정교한 예시
+### 기본 예제: 역순 카운터
 
-카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.
+이 예제는 위에서 본 예제와 동일하지만, 역순 카운터를 사용한다는 점만 다릅니다.
+만일 브라우저가 `reversed()` 함수 표기법을 지원한다면, 결과는 아래와 같이 보일 것입니다.
+
+![역순 카운터](reversed_headings_basic.png)
+
+#### CSS
+
+```css
+body {
+  counter-reset: reversed(
+    section
+  ); /* 카운터의 이름을 'section' 으로 지정하며, 초기값은 0이 됩니다. */
+}
+
+h3::before {
+  counter-increment: section -1; /* section 카운터를 1씩 감소 */
+  content: "Section " counter(section) ": "; /* 'Section ' 단어를 표시하고,
+                                                각 h3의 내용 앞에 섹션 카운터 값과
+                                                콜론을 추가합니다. */
+}
+```
+
+#### HTML
+
+```html
+<h3>도입</h3>
+<h3>본문</h3>
+<h3>결론</h3>
+```
+
+#### 결과
+
+{{EmbedLiveSample("Basic example: reversed counter", "100%", 150)}}
+
+### 더 정교한 예제
+
+카운터는 증가할 때마다 반드시 표시될 필요는 없습니다.
+이 예제는 모든 링크를 세면서, 링크에 텍스트가 없을 때만 카운터를 표시하여 편리한 대체 방법으로 사용합니다.
 
 #### CSS
 
@@ -74,21 +228,20 @@ a[href]:empty::after {
 #### HTML
 
 ```html
-<p>See <a href="https://www.mozilla.org/"></a></p>
-<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
-<p>See also <a href="https://developer.mozilla.org/"></a></p>
+<p>보기 <a href="https://www.mozilla.org/"></a></p>
+<p><a href="contact-me.html">메시지를 남기는 것을</a> 잊지 마세요!</p>
+<p>같이 보기 <a href="https://developer.mozilla.org/"></a></p>
 ```
 
-#### Result
+#### 결과
 
 {{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}
 
-## 중첩 카운터
-
-CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.
-
 ### 중첩 카운터 예제
 
+CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다.
+{{cssxref("counters", "counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.
+
 #### CSS
 
 ```css
@@ -123,9 +276,9 @@ li::before {
           <li>item</li>  <!-- 2.3.2 -->
         </ol>
         <ol>
-          <li>item</li>  <!-- 2.4.1 -->
-          <li>item</li>  <!-- 2.4.2 -->
-          <li>item</li>  <!-- 2.4.3 -->
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
         </ol>
       </li>
       <li>item</li>      <!-- 2.4   -->
@@ -148,8 +301,12 @@ li::before {
 
 {{Specifications}}
 
-## See also
+## 같이 보기
 
+- {{cssxref("contain")}}
 - {{cssxref("counter-reset")}}
+- {{cssxref("counter-set")}}
 - {{cssxref("counter-increment")}}
 - {{cssxref("@counter-style")}}
+- [CSS 카운터 스타일](/ko/docs/Web/CSS/CSS_counter_styles) 모듈
+- [CSS 목록과 카운터](/ko/docs/Web/CSS/CSS_lists) 모듈
diff --git a/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md b/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
new file mode 100644
index 00000000000000..6c50778fae1b05
--- /dev/null
+++ b/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
@@ -0,0 +1,55 @@
+---
+title: 논리적 속성과 값의 기본 개념
+slug: Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values
+l10n:
+  sourceCommit: a08c1d8b4022ffbd69d4fd3097d0a30716f5fde7
+---
+
+{{CSSRef}}
+
+[CSS 논리적 속성과 값 모듈](/ko/docs/Web/CSS/CSS_logical_properties_and_values#properties) 은 CSS 에서의 {{glossary("physical properties")}} 의 대열 상대적인 매핑과 값을 정의합니다. 이 안내서에서는 모듈에 대해 다루며, {{glossary("flow relative values")}} 값과 속성에 대해 설명합니다.
+
+## 논리적 속성이 유용한 이유
+
+CSS 2.1과 이전 버전에서는 화면의 물리적 크기를 따라 요소의 크기를 설정해왔습니다. 그렇기 떄문에 박스를 {{CSSxRef("width")}} 와 {{CSSxRef("height")}} 로 표현했고, 아이템은 `top` 과 `left` 에서부터 위치시키고, 테두리, 바깥 여백, 그리고 안쪽 여백을 `top`, `right`, `bottom`, `left` 등에 할당했습니다. 논리적 속성과 값 모듈은 이러한 {{glossary("physical properties")}} 와 값을 논리적이거나 흐름 상대적인 값에 매핑합니다. 예로 `left`와 `right`, `top` 과 `bottom` 대신에 `start`와 `end`를 이용합니다.
+
+이러한 매핑은 원래의 레이아웃과 다른 쓰기 모드의 언어로 번역되는 사이트에서 매우 유용합니다. 예를 들어, CSS 그리드 레이아웃에서는, 만일 그리드 컨테이너가 그리드 요소들을 정렬하기 위해 {{CSSxRef("align-self")}} 와 {{CSSxRef("justify-self")}} 속성이 적용된 너비를 가지고 있을 때, 이 속성은 대열 상대적이기 때문에 `justify-self: start` 는 요소를 인라인 차원의 시작 지점에 요소들을 정렬하고, `align-self: start` 는 블록 차원에서의 시작 지점에 요소들을 정렬합니다.
+
+![가로 쓰기 모드에서의 그리드](grid-horizontal-width-sm.png)
+
+만일 컴포넌트의 쓰기 모드가 {{CSSxRef("writing-mode")}} 속성을 사용하여 `vertical-rl` 로 변경될 때, 정렬은 여전히 같은 방식으로 동작합니다. 인라인 차원은 세로로 동작하며, 블록 차원은 가로로 동작합니다. 그러나 그리드가 동일하게 보이지는 않는데, 이는 컨테이너에 지정된 너비는 가로로 측정되었으며, 이 측정은 텍스트의 논리나 상대 대열이 아닌 물리적인 측정이기 때문입니다.
+
+![세로 쓰기 모드에서의 그리드](grid-vertical-width-sm.png)
+
+`width` 속성을 사용하는 대신 논리적 속성인 {{CSSxRef("inline-size")}} 가 사용되었다면, 쓰기 모드에 관계 없이 컴포넌트가 동일한 방식으로 작동합니다.
+
+![세로 쓰기 모드에서의 그리드 레이아웃](grid-vertical-inline-size-small.png)
+
+아래의 실제 예제를 이용하여 시연해 볼 수 있습니다. `grid` 의 `writing-mode` 를 `vertical-rl` 에서 `horizontal-tb` 로 변경하여 다른 속성들이 레이아웃을 어떻게 변화시키는지 확인해 보세요.
+
+{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}
+
+창의적인 이유로 가로 방향이 아닌 위에서 아래 방향의 쓰기 모드를 사용할 때 콘텐츠의 대열을 연관지을 수 있다는 것은 매우 중요한 일입니다.
+
+## 블록과 인라인 차원
+
+대열 상대적인 속성과 값의 핵심 개념은 블록과 인라인 두 개의 차원입니다. 플렉스박스와 그리드 레이아웃과 같은 CSS 레이아웃 메서드는 요소를 정렬하기 위해 `right` 및 `left`/`top` 및 `bottom` 를 대신하여 `block` 과 `inline` 개념을 사용합니다.
+
+`inline` 차원은 현재 사용 중인 쓰기 모드에서 텍스트가 따르는 차원입니다. 즉, 텍스트가 왼쪽에서 오른쪽의 가로 방향을 따르는 영어 문서나 텍스트가 오른쪽에서 왼쪽의 가로 방향을 따라는 아랍어 문서에서 인라인 차원은 수평입니다. 세로 쓰기 모드 (예시. 일어 문서) 로 전환되면 해당 쓰기 모드에서는 줄이 세로를 따르므로 인라인 차원은 수직이 됩니다.
+
+블록 차원은 다른 차원이고, 단락과 같은 블록 방향에서는 하나의 요소가 다른 요소 뒤에 배치됩니다. 영어나 아랍어 문서에서는 이들이 세로 방향을 따르고, 세로 쓰기 모드에서는 가로로 표시됩니다.
+
+아래 도표는 가로 쓰기 모드에서의 인라인과 블록 방향을 나타냅니다.
+
+![인라인 축이 가로로, 블록 축이 세로로 실행되는 것을 나타내는 도표](mdn-horizontal.png)
+
+아래 도표는 세로 쓰기 모드에서의 인라인과 블록 방향을 나타냅니다.
+
+![블록 축이 가로로, 인라인 축이 세로로 실행되는 것을 나타내는 도표](mdn-vertical.png)
+
+## 같이 보기
+
+- [그리드 레이아웃에서의 박스 정렬](/ko/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [플렉스 레이아웃에서의 박스 정렬](/ko/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [대열 레이아웃과 쓰기 모드](/ko/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
+- Smashing Magazine (2018)의 [논리적 속성과 값 이해하기](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)
diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md
new file mode 100644
index 00000000000000..e607b1374b2d9b
--- /dev/null
+++ b/files/ko/web/css/fit-content/index.md
@@ -0,0 +1,73 @@
+---
+title: fit-content
+slug: Web/CSS/fit-content
+l10n:
+  sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
+---
+
+{{CSSRef}}
+
+**`fit-content`** 키워드는 {{cssxref("fit-content_function", "fit-content(stretch)")}}와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 {{cssxref("max-content")}}보다 크지는 않음을 의미합니다.
+
+{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 가 레이아웃된 박스의 크기로 사용된 경우, 최대 크기와 최소 크기는 콘텐츠의 크기를 참조합니다.
+
+> [!NOTE]
+> CSS Sizing 명세는 {{cssxref("fit-content_function", "fit-content()")}} 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다.
+
+## 구문
+
+```css
+width: fit-content;
+block-size: fit-content;
+```
+
+## 예제
+
+### fit-content를 사용해 박스 크기 설정하기
+
+#### HTML
+
+```html
+<div class="container">
+  <div class="item">항목</div>
+  <div class="item">더 많은 텍스트가 포함된 항목입니다.</div>
+  <div class="item">
+    텍스트가 더 많이 포함된 항목입니다. 텍스트가 줄바꿈되기를 기대하며 충분한
+    양의 텍스트를 추가했습니다.
+  </div>
+</div>
+```
+
+#### CSS
+
+```css
+.container {
+  border: 2px solid #ccc;
+  padding: 10px;
+  width: 20em;
+}
+
+.item {
+  width: fit-content;
+  background-color: #8ca0ff;
+  padding: 5px;
+  margin-bottom: 1em;
+}
+```
+
+#### 결과
+
+{{EmbedLiveSample("fit-content를 사용해 박스 크기 설정하기", "100%", 200)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- 연관된 크기 설정 키워드: {{cssxref("min-content")}}, {{cssxref("max-content")}}
+- [CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) 모듈
diff --git a/files/ko/web/css/image/image-set/index.md b/files/ko/web/css/image/image-set/index.md
new file mode 100644
index 00000000000000..0cc3a6932f0c1d
--- /dev/null
+++ b/files/ko/web/css/image/image-set/index.md
@@ -0,0 +1,111 @@
+---
+title: image-set()
+slug: Web/CSS/image/image-set
+l10n:
+  sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
+---
+
+{{CSSRef}}
+
+**`image-set()`** [CSS](/ko/docs/Web/CSS) [함수형](/ko/docs/Web/CSS/CSS_Functions) 표기법은 브라우저가 높은 해상도를 위해 주어진 이미지 집합 안에서 가장 적합한 CSS를 선택하도록 할 수 있는 방법입니다.
+
+해상도와 대역폭은 기기와 네트워크 접근에 따라 달라집니다. `image-set()` 함수는 가장 적합한 해상도의 이미지를 사용자의 기기로 전달하여 기기와 설정에 따른 적합한 이미지를 선택할 수 있도록 하는데, 이는 해상도와 이미지 옵션의 집합을 제공하고 각 이미지에는 해상도 정의도 연관되어 있습니다. 해상도는 파일 크기에 따라 프록시로도 사용될 수 있습니다. 느린 모바일 연결이지만 높은 해상도의 화면을 가진 사용자 에이전트는 고해상도 이미지의 로드를 기다리는 것보다 저해상도 이미지를 선호할 수도 있습니다.
+
+`image-set()` 은 각각의 사용자가 필요로 하는 것을 결정하기 보다는 선택할 수 있는 옵션을 제공합니다.
+
+## 구문
+
+```css-nolint
+/* 해상도를 기반으로 이미지 선택하기 */
+image-set(
+  "image1.jpg" 1x,
+  "image2.jpg" 2x
+);
+
+image-set(
+  url("image1.jpg") 1x,
+  url("image2.jpg") 2x
+);
+
+/* 해상도를 기반으로 그라디언트 선택하기 */
+image-set(
+  linear-gradient(blue, white) 1x,
+  linear-gradient(blue, green) 2x
+);
+
+/* 지원하는 확장자를 기반으로 이미지 선택하기 */
+image-set(
+  url("image1.avif") type("image/avif"),
+  url("image2.jpg") type("image/jpeg")
+);
+```
+
+### 값
+
+- `<image>`
+  - : [`<image>`](/ko/docs/Web/CSS/image) 태그는 이미지 집합을 제외하고서는 어떠한 이미지 타입도 될 수 있습니다. `image-set()` 함수는 다른 `image-set()` 함수 내에 중첩될 수 없습니다.
+- `<string>`
+  - : 이미지의 URL입니다.
+- `<resolution>` {{optional_inline}}
+  - : [`<resolution>`](/ko/docs/Web/CSS/resolution) 태그는 픽셀 당 도트 단위인 `x` 혹은 `dppx` 를 포함하여 인치 당 도트 단위인 `dpi`, 센티미터 당 도트 단위인 `dpcm` 등 단위를 나타냅니다. `image-set()` 내의 모든 이미지는 고유한 해상도를 가져야 합니다.
+- `type(<string>)` {{optional_inline}}
+  - : "image/jpeg" 와 같은 유효한 MIME 타입의 문자열입니다.
+
+### 형식 구문
+
+{{csssyntax}}
+
+## 접근성
+
+브라우저는 배경 이미지에 대한 특수한 정보를 보조 기술로 제공하지 않습니다. 이는 주로 화면 리더기를 위한 기능인데, 스크린 리더는 배경 이미지의 존재를 알리지 않기 때문에 사용자는 아무런 정보를 전달 받을 수 없습니다. 만일 이미지에 페이지의 전반적인 목적을 이해하는 데에 중요한 정보가 포함되어 있다면 이를 문서 안에서 의미론적으로 설명하는 것이 좋습니다.
+
+- [MDN WCAG 이해하기, 가이드라인 1.1 설명](/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
+- [Success Criterion 1.1.1 이해하기 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## 예제
+
+### background-image 옵션으로 대안으로 image-set()를 사용하기
+
+이 예제는 [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) 가 두 개의 {{cssxref("background-image")}} 옵션의 대안, 즉 일반적인 버전과 고해상도 버전의 해상도를 어떻게 제공하는지에 대해 설명합니다.
+
+{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}}
+
+> [!NOTE]
+> 위 예제에서처럼, `-webkit` 접미사는 크롬과 사파리에서도 사용할 수 있습니다. 파이어폭스 90에서는 (개발자가 표준 속성을 추가하지 않은 경우 호환성을 제공하기 위해) `-webkit-image-set()` 가 `image-set()` 의 별칭으로 사용됩니다.
+
+### 이미지 확장자의 대안으로 image-set()를 사용하기
+
+다음 예제에서는 `type()` 함수가 AVIF 와 JPEG 확장자를 전달하기 위해 사용될 수도 있음을 설명합니다. 만일 브라우저가 avif를 지원한다면 이는 해당 버전을 선택하게 되고, 그렇지 않다면 jpeg 버전을 사용하게 됩니다.
+
+{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}}
+
+#### 폴백 제공하기
+
+`image-set()` 을 위한 내장 폴백은 존재하지 않습니다. 이 기능을 지원하지 않는 브라우저를 위해 {{cssxref("background-image")}} 를 포합하려면 `image-set()` 를 사용하는 줄 앞에 별도의 정의가 필요합니다.
+
+```css
+.box {
+  background-image: url("large-balloons.jpg");
+  background-image: image-set(
+    "large-balloons.avif" type("image/avif"),
+    "large-balloons.jpg" type("image/jpeg")
+  );
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{cssxref("image")}}
+- {{cssxref("image/image", "image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("url", "url()")}}
+- {{cssxref("&lt;gradient&gt;")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/ko/web/css/layout_cookbook/center_an_element/index.md b/files/ko/web/css/layout_cookbook/center_an_element/index.md
new file mode 100644
index 00000000000000..a1c12ce0aa6bff
--- /dev/null
+++ b/files/ko/web/css/layout_cookbook/center_an_element/index.md
@@ -0,0 +1,98 @@
+---
+title: 요소의 중앙 정렬
+slug: Web/CSS/Layout_cookbook/Center_an_element
+l10n:
+  sourceCommit: 70f49e78d0f6830748fcaa490d98b4ae3e2da161
+---
+
+{{CSSRef}}
+
+이 조리법에서는 [flex 박스](#using_flexbox)와 [그리드](#using_grid)를 사용해서 박스를 다른 박스 내부에 중앙 정렬하는 방법을 배울 수 있습니다. 수평과 수직으로 중앙 정렬하는 것은 간단하고 직관적입니다.
+
+![an element centered inside a larger box](cookbook-center.png)
+
+## 요구 사항
+
+박스 내부의 아이템을 수평과 수직 방향으로 중앙 정렬합니다.
+
+## 조리법
+
+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
+
+> [!CALLOUT]
+>
+> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/center--download.html)
+
+## 플렉스박스 사용하기
+
+박스를 다른 박스 내부에서 중앙 정렬하기 위해서는 먼저 감싸고 있는 박스에 {{cssxref("display")}} 속성을 `flex`로 지정해서 [flex 컨테이너](/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox#the_flex_container) 로 바꿔줍니다. 그 다음에 {{cssxref("align-items")}}를 `center`로 지정하여 수직 방향의 중앙 정렬(블록 축)을 하고, {{cssxref("justify-content")}}를 `center`로 설정하여 수평 방향의 중앙 정렬(인라인 축)을 합니다. 그러면 박스를 다른 박스 내부에서 중앙 정렬하는 데 필요한 모든 작업이 완료됩니다!
+
+### HTML
+
+```html
+<div class="container">
+  <div class="item">I am centered!</div>
+</div>
+```
+
+### CSS
+
+```css
+div {
+  border: solid 3px;
+  padding: 1em;
+  max-width: 75%;
+}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 8em;
+}
+```
+
+컨테이너의 높이를 지정하면 컨테이너 내부의 아이템이 실제로 수직 방향으로 중앙 정렬된 것을 확인할 수 있습니다.
+
+### 결과
+
+{{ EmbedLiveSample('Using_flexbox', 400, 200) }}
+
+컨테이너에 `align-items: center;`를 적용하는 대신, 내부 아이템에 {{cssxref("align-self")}}를 `center`로 지정해서 내부 아이템 자체를 수직으로 중앙 정렬할 수 있습니다.
+
+## 그리드 사용
+
+박스를 다른 박스 내부에서 중앙 정렬하는 또 다른 방법은 감싸고 있는 박스를 [그리드 컨테이너](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_container)로 만들고 {{cssxref("place-items")}} 속성을 `center`로 지정해서 내부의 아이템들을 블록과 인라인 축에서 중앙 정렬 하는 것입니다.
+
+### HTML
+
+```html
+<div class="container">
+  <div class="item">I am centered!</div>
+</div>
+```
+
+### CSS
+
+```css
+div {
+  border: solid 3px;
+  padding: 1em;
+  max-width: 75%;
+}
+.container {
+  display: grid;
+  place-items: center;
+  height: 8em;
+}
+```
+
+### 결과
+
+{{ EmbedLiveSample('Using_grid', 400, 200) }}
+
+컨테이너에 `place-items: center;`를 적용하는 대신, 컨테이너에 {{cssxref("place-content", "place-content: center;")}}를 지정하거나 내부 아이템 자체에 {{cssxref("place-self", "place-self: center")}} 또는 {{cssxref("margin", "margin: auto;")}}를 지정하여 동일하게 중앙 정렬을 할 수 있습니다.
+
+## MDN 관련 문서
+
+- [Box alignment in flexbox](/ko/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [CSS box alignment guide](/ko/docs/Web/CSS/CSS_box_alignment)
diff --git a/files/ko/web/javascript/guide/indexed_collections/index.md b/files/ko/web/javascript/guide/indexed_collections/index.md
index 438c7dd8d8566f..71a94155cd841a 100644
--- a/files/ko/web/javascript/guide/indexed_collections/index.md
+++ b/files/ko/web/javascript/guide/indexed_collections/index.md
@@ -559,7 +559,7 @@ const a = Array(5); // [ <5 empty items> ]
 // 배열 리터럴의 연속된 쉼표
 const b = [1, 2, , , 5]; // [ 1, 2, <2 empty items>, 5 ]
 
-// array.length보다 큰 인덱스의 슬록에 직접적으로 값 설정하기
+// array.length보다 큰 인덱스의 슬롯에 직접적으로 값 설정하기
 const c = [1, 2];
 c[4] = 5; // [ 1, 2, <2 empty items>, 5 ]
 
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md b/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md
new file mode 100644
index 00000000000000..c858de8b3b00f5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md
@@ -0,0 +1,55 @@
+---
+title: RegExp.prototype.unicodeSets
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets
+l10n:
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
+---
+
+{{JSRef}}
+
+**`unicodeSets`** 접근자 속성은 {{jsxref("RegExp")}} 인스턴스의 속성으로, 이 정규 표현식에 `v` 플래그가 사용되었는지 여부를 반환합니다.
+
+## 설명
+
+`RegExp.prototype.unicodeSets`는 `v` 플래그가 사용된 경우 `true` 값을 가지며, 그렇지 않으면 `false`입니다. `v` 플래그는 [`u`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode) 플래그의 업그레이드 버전으로, 더 많은 유니코드 관련 기능을 활성화합니다. ("v"는 알파벳에서 "u" 다음 글자입니다.) `u`와 `v`는 동일한 정규식을 호환되지 않는 방식으로 해석하기 때문에, 두 플래그를 모두 사용하면 {{jsxref("SyntaxError")}}가 발생합니다. `v` 플래그를 사용하면 `u` 플래그 설명에 언급된 모든 기능과 함께 다음과 같은 추가 기능을 사용할 수 있습니다.
+
+- [`\p`](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape) 이스케이프 시퀀스를 문자뿐만 아니라 문자열의 속성과도 일치시키는 데 사용할 수 있습니다.
+- [문자 클래스](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class) 구문이 업그레이드되어 교집합, 합집합, 차집합 구문을 허용하며, 여러 유니코드 문자와 일치시킬 수 있습니다.
+- 문자 클래스 보수 구문 `[^...]`은 일치 결과를 부정하는 대신 보수 클래스를 구성하여 대소문자 구분 없는 일치에서 일부 혼란스러운 동작을 피합니다. 자세한 내용은 [보수 클래스와 대소문자 구분 없는 일치](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#complement_classes_and_case-insensitive_matching)를 참조하세요.
+
+`u` 모드에서 유효했던 일부 정규식은 `v` 모드에서 유효하지 않습니다. 특히 문자 클래스 구문이 다르고 일부 문자는 더 이상 문자 그대로 나타날 수 없습니다. 자세한 내용은 [`v` 모드 문자 클래스](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#v-mode_character_class)를 참조하세요.
+
+> [!NOTE] > `v` 모드는 문자소를 단일 문자로 해석하지 않습니다. 여전히 다수의 코드 포인트입니다. 예를 들어, `/[🇺🇳]/v`는 여전히 `"🇺"`와 일치할 수 있습니다.
+
+`unicodeSets`의 설정자는 `undefined`입니다. 이 속성을 직접 변경할 수 없습니다.
+
+## 예제
+
+### unicodeSets 속성 사용하기
+
+```js
+const regex = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
+
+console.log(regex.unicodeSets); // true
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.dotAll")}}
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.hasIndices")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
+- {{jsxref("RegExp.prototype.unicode")}}
+- [문자열의 표기법 및 속성을 설정하는 RegExp v 플래그](https://v8.dev/features/regexp-v-flag) - v8.dev (2022)
diff --git a/files/ko/web/javascript/reference/global_objects/string/at/index.md b/files/ko/web/javascript/reference/global_objects/string/at/index.md
index f9e503496fbb0e..6a98427da6e9c4 100644
--- a/files/ko/web/javascript/reference/global_objects/string/at/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/at/index.md
@@ -1,11 +1,13 @@
 ---
 title: String.prototype.at()
 slug: Web/JavaScript/Reference/Global_Objects/String/at
+l10n:
+  sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
 ---
 
 {{JSRef}}
 
-**`at()`** 메서드는 정수 값을 받아서 지정된 오프셋에 있는 단일 UTF-16 코드 단위로 구성된 새 {{jsxref('String')}}을 반환합니다. 이 방법은 양의 정수와 음의 정수를 허용합니다. 음의 정수는 문자열의 마지막부터 셉니다.
+{{jsxref("String")}} 값의 **`at()`** 메서드는 정수 값을 받아 지정된 오프셋에 위치한 단일 UTF-16 코드 유닛으로 구성된 새로운 {{jsxref("String")}}을 반환합니다. 이 메서드는 양의 정수와 음의 정수를 모두 허용합니다. 음의 정수는 문자열의 마지막 문자부터 거꾸로 세어 위치를 지정합니다.
 
 {{EmbedInteractiveExample("pages/js/string-at.html")}}
 
@@ -18,11 +20,11 @@ at(index)
 ### 매개변수
 
 - `index`
-  - : 문자열에서 반환할 문자의 인덱스(위치)입니다. 인덱스로 음수를 전달할 때 문자열의 끝에서 상대적인 색인을 지원합니다. 즉, 음수가 사용되면 반환할 문자는 문자열의 끝에서 역으로 계산하여 찾습니다.
+  - : 반환할 문자열 문자의 인덱스(위치)입니다. 음수 인덱스를 전달하면 문자열 끝에서부터의 상대적 인덱싱을 지원합니다. 즉, 음수가 사용되면 반환되는 문자는 문자열의 끝에서부터 거꾸로 세어 찾아집니다.
 
 ### 반환 값
 
-지정된 위치에 있는 단일 UTF-16 코드 단위로 구성된 새 {{jsxref('String')}}. 만약 주어진 인덱스를 찾을 수 없는 경우 {{jsxref('undefined')}}을 반환합니다.
+지정된 위치에 있는 단일 UTF-16 코드 유닛으로 구성된 {{jsxref("String")}}을 반환합니다. 주어진 인덱스를 찾을 수 없으면 {{jsxref("undefined")}}를 반환합니다.
 
 ## 예제
 
@@ -35,6 +37,7 @@ at(index)
 function returnLast(arr) {
   return arr.at(-1);
 }
+
 let invoiceRef = "myinvoice01";
 
 console.log(returnLast(invoiceRef)); // '1'
@@ -46,7 +49,7 @@ console.log(returnLast(invoiceRef)); // '2'
 
 ### 메서드 비교하기
 
-여기서 {{jsxref('String')}}의 끝에서 두 번째 문자를 선택하는 다양한 방법을 비교하겠습니다. 아래의 모든 방법이 유효하며, 싱대적으로 `at()`의 간결함과 가독성이 돋보입니다.
+여기서는 {{jsxref("String")}}의 끝에서 두 번째(마지막에서 하나 앞) 문자를 선택하는 다양한 방법을 비교합니다. 아래의 모든 방법이 유효하지만, 이는 `at()` 메서드의 간결성과 가독성을 강조합니다.
 
 ```js
 const myString = "Every green bus drives fast.";
@@ -64,7 +67,7 @@ const atWay = myString.at(-2);
 console.log(atWay); // 't'
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -74,8 +77,7 @@ console.log(atWay); // 't'
 
 ## 같이 보기
 
-- [Polyfill of `String.prototype.at` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- [A polyfill for the at() method](https://github.com/tc39/proposal-relative-indexing-method#polyfill).
+- [`core-js`에서의 `String.prototype.at` 폴리필](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
 - {{jsxref("String.prototype.indexOf()")}}
 - {{jsxref("String.prototype.lastIndexOf()")}}
 - {{jsxref("String.prototype.charCodeAt()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/weakset/index.md b/files/ko/web/javascript/reference/global_objects/weakset/index.md
index a12c11d5da6dca..02297c449b1228 100644
--- a/files/ko/web/javascript/reference/global_objects/weakset/index.md
+++ b/files/ko/web/javascript/reference/global_objects/weakset/index.md
@@ -99,7 +99,7 @@ ws.has(foo); // true
 ws.has(bar); // true
 
 ws.delete(foo); // set에서 foo를 제거
-ws.has(foo); // false, foo 는 이미 제거has been removed
+ws.has(foo); // false, foo 는 이미 제거
 ws.has(bar); // true, bar 는 유지 됨
 ```
 
diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.md b/files/ko/web/javascript/reference/statements/try...catch/index.md
new file mode 100644
index 00000000000000..30ba3a337c7a0e
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/try...catch/index.md
@@ -0,0 +1,314 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+l10n:
+  sourceCommit: 4e947e81afc753bedcaaba75f262a07b92511849
+---
+
+{{jsSidebar("Statements")}}
+
+**`try...catch`** 문은 `try` 블록과 `catch` 블록, `finally` 블록 중 하나 혹은 두 블록으로 구성됩니다. `try` 블록 내 코드가 먼저 실행되고, 만약 그 안에서 예외가 발생한다면 `catch` 블록 내 코드가 실행됩니다. `finally` 블록 내 코드는 항상 실행되며, 제어 흐름이 전체 구문을 종료하기 전에 실행됩니다.
+
+{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
+
+## 문법
+
+```js-nolint
+try {
+  tryStatements
+} catch (exceptionVar) {
+  catchStatements
+} finally {
+  finallyStatements
+}
+```
+
+- `tryStatements`
+  - : `try` 블록에서 실행될 구문들입니다.
+- `catchStatements`
+  - : `try` 블록에서 예외가 발생했을 때 실행될 구문들입니다.
+- `exceptionVar` {{optional_inline}}
+  - : 해당 `catch` 블록에서 잡힌 예외를 담는 선택적 [식별자 혹은 패턴](#catch_binding)입니다. 만약 `catch` 블록에서 예외 값을 사용하지 않는 경우 `exceptionVar` 과 괄호를 생략할 수 있습니다.
+- `finallyStatements`
+  - : `try...catch...finally` 구문에서 제어 흐름이 빠져나가기 전에 실행되는 구문들입니다. 예외가 발생했는지 여부와 관계없이 항상 실행됩니다.
+
+## 설명
+
+`try` 문은 항상 `try` 블록으로 시작합니다. 그리고 `catch` 블록 또는 `finally` 블록 중 하나가 반드시 존재해야 합니다. `catch` 블록과 `finally` 블록을 모두 가질 수도 있습니다. 이렇게 해서 `try` 문에는 다음과 같은 세 가지 형태가 있습니다.
+
+- `try...catch`
+- `try...finally`
+- `try...catch...finally`
+
+다른 구조인 [`if`](/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`for`](/ko/docs/Web/JavaScript/Reference/Statements/for)와 달리, `try`, `catch`, `finally` 블록은 반드시 단일 구문이 아닌 중괄호 {} 로 감싸진 블록이어야 합니다.
+
+```js-nolint example-bad
+try doSomething(); // SyntaxError
+catch (e) console.log(e);
+```
+
+`catch` 블록에는 `try` 블록에서 예외가 발생했을 때 어떻게 처리할지에 대한 구문들이 포함됩니다. 만약 `try` 블록 내의 어떤 구문(또는 `try` 블록 내에서 호출된 함수)에서 예외가 발생하면, 제어 흐름이 즉시 `catch` 블록으로 전환됩니다. `try` 블록에서 예외가 발생하지 않으면 `catch` 블록은 실행되지 않습니다.
+
+`finally` 블록은 `try...catch...finally` 구문에서 제어 흐름이 빠져나가기 전에 항상 실행됩니다. 즉 예외가 발생했는지 여부와 관계없이, `finally` 블록은 항상 실행됩니다.
+
+하나 이상의 `try` 문을 중첩해서 사용할 수 있습니다. 내부 `try` 문에 `catch` 블록이 없는 경우, 외부 `try` 문의 `catch` 블록이 대신 사용됩니다. 즉, 즉, 중첩된 `try` 문 내에서 예외가 발생하면, 가장 가까운 상위 `catch` 블록이 해당 예외를 처리하게 됩니다.
+
+또한, `try` 문을 사용하여 JavaScript 예외를 처리할 수 있습니다. JavaScript 예외 처리에 대한 자세한 정보는 [JavaScript 안내서](/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements)를 참고하시면 됩니다.
+
+### Catch 바인딩
+
+`try` 블록에서 예외가 발생하면, `exceptionVar`(즉, `catch (e)` 에서의 `e`)에 예외 값이 저장됩니다. 이 {{Glossary("binding")}}을 이용해 발생한 예외에 대한 정보를 얻을 수 있습니다. 이 {{Glossary("binding")}}은 `catch` 블록의 {{Glossary("Scope", "scope")}} 내에서만 사용할 수 있습니다.
+
+`exceptionVar`는 반드시 단일 식별자일 필요가 없습니다. [구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 사용하여 여러 개의 식별자를 한 번에 할당할 수 있습니다.
+
+```js
+try {
+  throw new TypeError("oops");
+} catch ({ name, message }) {
+  console.log(name); // "TypeError"
+  console.log(message); // "oops"
+}
+```
+
+`catch` 절에 의해 생성된 바인딩은 `catch` 블록과 동일한 범위에 존재합니다. 따라서 catch 블록 내에서 선언된 변수는 `catch` 절에 의해 생성된 바인딩과 동일한 이름을 가질 수 없습니다. ([이 규칙에 한가지 예외가 있지만](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#statements), 이는 더 이상 사용되지 않는 문법입니다.)
+
+```js-nolint example-bad
+try {
+  throw new TypeError("oops");
+} catch ({ name, message }) {
+  var name; // SyntaxError: Identifier 'name' has already been declared
+  let message; // SyntaxError: Identifier 'message' has already been declared
+}
+```
+
+예외 바인딩은 쓰기 가능합니다. 예를 들어, 예외 값을 정규화하여 {{jsxref("Error")}} 객체인지 확인할 수 있습니다.
+
+```js
+try {
+  throw "Oops; this is not an Error object";
+} catch (e) {
+  if (!(e instanceof Error)) {
+    e = new Error(e);
+  }
+  console.error(e.message);
+}
+```
+
+예외 값이 필요 없는 경우에는 괄호와 함께 예외 변수 자체를 생략할 수 있습니다.
+
+```js
+function isValidJSON(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+```
+
+### finally 블록
+
+`finally` 블록은 `try` 블록과 `catch` 블록(들)이 실행된 후에 실행할 구문들을 포함하지만, `try...catch...finally` 블록 다음의 구문들보다 먼저 실행됩니다. 제어 흐름은 항상 `finally` 블록으로 진입하며, 다음과 같은 방식 중 하나로 진행될 수 있습니다.
+
+- `try` 블록이 정상적으로 실행을 마치고 (예외가 발생하지 않은 경우)
+- `catch` 블록이 정상적으로 실행을 마치고
+- `try` 블록이나 `catch` 블록에서 제어 흐름 구문(`return`, `throw`, `break`, `continue`)이 실행되어 해당 블록을 벗어나기 직전에
+
+예외를 처리할 `catch` 블록이 없더라도 `try` 블록에서 예외가 발생한다면 `finally` 블록은 실행됩니다. 이러한 경우 `finally` 블록이 실행을 마친 직후 해당 예외가 다시 던져집니다.
+
+다음 예제는 finally 블록의 한 가지 사용 사례를 보여줍니다. 이 코드는 파일을 열고 그 파일을 사용하는 구문들을 실행합니다. 그리고 `finally` 블록은 예외가 발생했더라도 파일이 항상 닫히도록 보장합니다.
+
+```js
+openMyFile();
+try {
+  // tie up a resource
+  writeMyFile(theData);
+} finally {
+  closeMyFile(); // always close the resource
+}
+```
+
+`finally` 블록 내의 제어 흐름 구문(`return`, `throw`, `break`, `continue`)은 `try` 블록이나 `catch` 블록의 완료 값을 "가립니다". 아래 예시에서, `try`블록에서 1을 반환하려고 하지만, 반환하기 전에 제어 흐름이 `finally`블록에 먼저 전달되어 `finally` 블록의 반환 값(2)이 대신 반환됩니다.
+
+```js
+function doIt() {
+  try {
+    return 1;
+  } finally {
+    return 2;
+  }
+}
+
+doIt(); // returns 2
+```
+
+`finally` 블록 내에 제어 흐름 구문을 사용하는 것은 일반적으로 좋지 않은 생각입니다. `finally` 블록은 오직 정리 작업을 위한 코드에만 사용해야 합니다.
+
+## 예시
+
+### 무조건적 catch 블록
+
+`catch` 블록을 사용하면 `try` 블록 내에서 어떤 예외가 발생하든 `catch` 블록이 실행됩니다. 예를 들어, 다음 코드에서 예외가 발생하면 제어 흐름이 `catch` 블록으로 전달됩니다.
+
+```js
+try {
+  throw "myException"; // generates an exception
+} catch (e) {
+  // statements to handle any exceptions
+  logMyErrors(e); // pass exception object to error handler
+}
+```
+
+`catch` 블록에서는 식별자(`e`와 같은)를 지정하여 예외 객체의 값을 캡처할 수 있습니다. 이 식별자가 참조하는 예외 객체의 값은 `catch` 블록의 {{Glossary("Scope", "범위")}} 내에서만 사용할 수 있습니다.
+
+### 조건적 catch 블록
+
+여러 개의 `try...catch` 블록과 `if...else if...else` 구문을 조합하면 "조건부 `catch` 블록"을 만들 수 있습니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다.
+
+```js
+try {
+  myroutine(); // may throw three types of exceptions
+} catch (e) {
+  if (e instanceof TypeError) {
+    // statements to handle TypeError exceptions
+  } else if (e instanceof RangeError) {
+    // statements to handle RangeError exceptions
+  } else if (e instanceof EvalError) {
+    // statements to handle EvalError exceptions
+  } else {
+    // statements to handle any unspecified exceptions
+    logMyErrors(e); // pass exception object to error handler
+  }
+}
+```
+
+조건부 `catch` 블록의 일반적인 사용 사례는 예상되는 일부 오류만 포착하고 억제한 후, 다른 경우에는 오류를 다시 던지는 것입니다.
+
+```js
+try {
+  myRoutine();
+} catch (e) {
+  if (e instanceof RangeError) {
+    // statements to handle this very common expected error
+  } else {
+    throw e; // re-throw the error unchanged
+  }
+}
+```
+
+이것은 Java와 같은 다른 프로그래밍 언어와 유사한 형태를 취할 수 있습니다.
+
+```java
+try {
+  myRoutine();
+} catch (RangeError e) {
+  // statements to handle this very common expected error
+}
+// Other errors are implicitly re-thrown
+```
+
+### 중첩 try 블록
+
+먼저, 다음과 같은 코드가 어떻게 되는지 살펴보겠습니다.
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "finally"
+// "outer" "oops"
+```
+
+이제 `catch` 블록을 추가하여 내부 `try` 블록에서 이미 예외를 포착한다면:
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } catch (ex) {
+    console.error("inner", ex.message);
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "inner" "oops"
+// "finally"
+```
+
+이제 오류를 다시 발생시키겠습니다.
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } catch (ex) {
+    console.error("inner", ex.message);
+    throw ex;
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "inner" "oops"
+// "finally"
+// "outer" "oops"
+```
+
+예외는 가장 가까운 `catch` 블록에서 한 번만 잡히게 되며, 다시 던져지지 않는 한 외부 `catch` 블록에서는 잡히지 않습니다. 물론 "내부" 블록(즉, `catch` 블록 내부)에서 새로운 예외가 발생한다면, "외부" 블록에서 해당 예외를 잡을 수 있습니다.
+
+### finally 블록에서의 반환하기
+
+만약 `finally` 블록에서 값을 반환하면, 해당 값이 전체 `try-catch-finally` 문의 반환 값이 됩니다. 이는 `try` 블록이나 `catch` 블록 내에 있는 `return` 문에 관계없이 적용됩니다. 이는 `catch` 블록 내에서 발생한 예외에도 포함합니다.
+
+```js
+(() => {
+  try {
+    try {
+      throw new Error("oops");
+    } catch (ex) {
+      console.error("inner", ex.message);
+      throw ex;
+    } finally {
+      console.log("finally");
+      return;
+    }
+  } catch (ex) {
+    console.error("outer", ex.message);
+  }
+})();
+
+// Logs:
+// "inner" "oops"
+// "finally"
+```
+
+`finally` 블록에서 값을 반환했기 때문에 (이는 전체 `try-catch-finally` 문의 반환 값) 외부로 "oops"는 전파되지 않습니다. 이는 `catch` 블록에서 반환된 어떤 값에도 동일하게 적용됩니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 관련 항목
+
+- {{jsxref("Error")}}
+- {{jsxref("Statements/throw", "throw")}}
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index 3d7f7e146b5eac..a5d67c5d0a01ce 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -682,11 +682,14 @@
 /ru/docs/Web/HTML/Общие_атрибуты/style	/ru/docs/Web/HTML/Global_attributes/style
 /ru/docs/Web/HTML/Общие_атрибуты/tabindex	/ru/docs/Web/HTML/Global_attributes/tabindex
 /ru/docs/Web/HTML/Ссылки	/ru/docs/Web/HTML/Reference
+/ru/docs/Web/HTTP/Basics_of_HTTP	/ru/docs/conflicting/Web/HTTP
 /ru/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/ru/docs/Web/URI/Schemes/data
 /ru/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/ru/docs/Web/URI/Schemes/data
 /ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web	/ru/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
 /ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web_RU	/ru/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
-/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Полный_список_типов_MIME	/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/ru/docs/Web/HTTP/MIME_types
+/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/ru/docs/Web/HTTP/MIME_types/Common_types
+/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Полный_список_типов_MIME	/ru/docs/Web/HTTP/MIME_types/Common_types
 /ru/docs/Web/HTTP/Feature_Policy	/ru/docs/Web/HTTP/Permissions_Policy
 /ru/docs/Web/HTTP/Response_codes	/ru/docs/Web/HTTP/Status
 /ru/docs/Web/HTTP/Авторизация	/ru/docs/Web/HTTP/Authentication
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index 8e11f1df59e2f7..701eb2b01ca0ca 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -10549,31 +10549,6 @@
       "deniskoronets"
     ]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2020-07-14T17:05:38.093Z",
-    "contributors": ["vladimir.i.kuropatka", "enonotugh", "cissoid"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2019-10-21T06:21:06.123Z",
-    "contributors": [
-      "ismorozs",
-      "dartraiden",
-      "wcoder",
-      "vfr5cv",
-      "dawsonbotsford"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-02-28T13:11:18.234Z",
-    "contributors": [
-      "chrisdavidmills",
-      "SphinxKnight",
-      "nickvoronin",
-      "MineDen",
-      "vladkras",
-      "david.orbelian"
-    ]
-  },
   "Web/HTTP/CORS": {
     "modified": "2020-10-21T11:45:01.641Z",
     "contributors": [
@@ -10850,6 +10825,27 @@
     "modified": "2020-10-15T22:01:31.139Z",
     "contributors": ["n00b"]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2019-10-21T06:21:06.123Z",
+    "contributors": [
+      "ismorozs",
+      "dartraiden",
+      "wcoder",
+      "vfr5cv",
+      "dawsonbotsford"
+    ]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:11:18.234Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SphinxKnight",
+      "nickvoronin",
+      "MineDen",
+      "vladkras",
+      "david.orbelian"
+    ]
+  },
   "Web/HTTP/Messages": {
     "modified": "2020-05-02T15:29:40.125Z",
     "contributors": ["Excent163", "Sarox", "registoo", "mariag"]
@@ -15942,6 +15938,10 @@
     "modified": "2019-06-12T07:08:20.267Z",
     "contributors": ["deadblackclover", "vkorniiko"]
   },
+  "conflicting/Web/HTTP": {
+    "modified": "2020-07-14T17:05:38.093Z",
+    "contributors": ["vladimir.i.kuropatka", "enonotugh", "cissoid"]
+  },
   "orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": {
     "modified": "2020-01-09T21:04:16.499Z",
     "contributors": ["rshmelev"]
diff --git a/files/ru/web/http/basics_of_http/index.md b/files/ru/conflicting/web/http/index.md
similarity index 98%
rename from files/ru/web/http/basics_of_http/index.md
rename to files/ru/conflicting/web/http/index.md
index 26fb583f654e84..cf64c61c5038f5 100644
--- a/files/ru/web/http/basics_of_http/index.md
+++ b/files/ru/conflicting/web/http/index.md
@@ -1,6 +1,7 @@
 ---
 title: Basics of HTTP
-slug: Web/HTTP/Basics_of_HTTP
+slug: conflicting/Web/HTTP
+original_slug: Web/HTTP/Basics_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ru/learn/html/tables/advanced/index.md b/files/ru/learn/html/tables/advanced/index.md
index 383a6cdaaa20ab..6ad640e8b48440 100644
--- a/files/ru/learn/html/tables/advanced/index.md
+++ b/files/ru/learn/html/tables/advanced/index.md
@@ -30,18 +30,18 @@ slug: Learn/HTML/Tables/Advanced
 Заголовок помещают сразу после тега `<table>`.
 
 > [!NOTE]
-> Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в `<table>` элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать `<caption>` элемент, так как `summary` {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).
+> Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в элементе `<table>` для добавления описания, которое также будет распознано программами для чтения с экрана. Однако мы рекомендуем вместо этого использовать элемент `<caption>`, так как `summary` является устаревшим и не может быть прочитан зрячими пользователями (он не отображается на странице).
 
 ### Упражнение: Добавление заголовка
 
 Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.
 
-1. Откройте расписание занятий школьного учителя по языку в конце статьи [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col), или сделайте копию нашего [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) файла.
+1. Откройте расписание занятий школьного учителя по языку в конце статьи [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics#active_learning_colgroup_and_col) или сделайте копию нашего [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) файла.
 2. Добавьте подходящий заголовок к таблице.
 3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
 
 > [!NOTE]
-> Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)).
 
 ## Добавление структуры с помощью \<thead>, \<tfoot> и \<tbody>
 
@@ -55,7 +55,7 @@ slug: Learn/HTML/Tables/Advanced
 - Элементом `<tfoot>` нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
 - Элементом `<tbody>` необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).
 
-> **Примечание:** `<tbody>` всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется `<tbody>` и посмотрите HTML код в [browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
+> **Примечание:** `<tbody>` всегда есть в каждой таблице, даже если он не указывается коде явно. Вы можете убедиться в этом, открыв один из предыдущих примеров в котором не используется `<tbody>` и посмотрев HTML код в [Developer Tools браузера](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
 
 ### Упражнение: Добавление структуры таблицы
 
@@ -82,7 +82,7 @@ slug: Learn/HTML/Tables/Advanced
 7. Сохраните, обновите и вы увидите результат. Если `<tbody>` и `<tfoot>` элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.
 
 > [!NOTE]
-> Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)).
+> Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Введение в CSS](/ru/docs/Learn/CSS/First_steps) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)).
 
 Ваша готовая таблица должна выглядеть примерно так:
 
@@ -198,7 +198,7 @@ slug: Learn/HTML/Tables/Advanced
 {{ EmbedLiveSample('Hidden_example', '100%', 300) }}
 
 > [!NOTE]
-> Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
 
 ## Вложенные таблицы
 
@@ -389,16 +389,10 @@ slug: Learn/HTML/Tables/Advanced
 3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты `id` и `headers`.
 
 > [!NOTE]
-> Вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([also see this live](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([see this live too](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
+> Вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
 
 ## Заключение
 
-Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью ["Стилизация таблиц"](/ru/docs/Learn/CSS/Styling_boxes/Styling_tables).
+Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью ["Стилизация таблиц"](/ru/docs/Learn/CSS/Building_blocks/Styling_tables).
 
 {{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
-
-## В этом блоке
-
-- [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics)
-- [HTML таблицы продвинутые возможности и доступность](/ru/docs/Learn/HTML/Tables/Advanced)
-- [Структурирование данных о планетах](/ru/docs/Learn/HTML/Tables/Structuring_planet_data)
diff --git a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
index 109a274c6d3164..8f43d6d64f8fe0 100644
--- a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
+++ b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
@@ -4,10 +4,6 @@ slug: Learn/JavaScript/Building_blocks/Event_bubbling
 original_slug: Web/API/Event/Comparison_of_Event_Targets
 ---
 
-{{ ApiRef() }}
-
-### Event targets
-
 Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.
 
 Существуют 5 целей для рассмотрения:
diff --git a/files/ru/web/api/animation/cancel/index.md b/files/ru/web/api/animation/cancel/index.md
index 9ee818ece042e0..546dd27227d8d7 100644
--- a/files/ru/web/api/animation/cancel/index.md
+++ b/files/ru/web/api/animation/cancel/index.md
@@ -1,32 +1,34 @@
 ---
-title: Animation.cancel()
+title: "Animation: метод cancel()"
 slug: Web/API/Animation/cancel
+l10n:
+  sourceCommit: ec1006afdf68a5808a48ab6301f9ccff3cd7ecc2
 ---
 
-{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+{{ APIRef("Web Animations") }}
 
-Метод **`cancel()`** API Web Animation интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}} вызванной этой анимацией и прекращает его воспроизведение.
+Метод **`cancel()`** Web Animation API интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}}, вызванные этой анимацией и прекращает воспроизведение.
 
 > [!NOTE]
 > Когда анимация отменена, её {{domxref("Animation.startTime", "startTime")}} и {{domxref("Animation.currentTime", "currentTime")}} устанавливаются в `null`.
 
-## Syntax
+## Синтаксис
 
-```
-Animation.cancel();
+```js-nolint
+cancel()
 ```
 
-### Parameters
+### Параметры
 
-None.
+Нет.
 
-### Return value
+### Возвращаемое значение
 
-None.
+Нет ({{jsxref("undefined")}}).
 
-### Exceptions
+### Исключения
 
-Этот метод не выбрасывает напрямую исключения; однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены ничего кроме `"idle"`, {{domxref("Animation.finished", "current finished promise", "", 1)}} отклоняется с помощью {{domxref("DOMException")}} названным `AbortError`.
+Этот метод напрямую не выбрасывает исключения, однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены является `"idle"`, то {{domxref("Animation.finished", "промис завершения текущей анимации", "", 1)}} отклоняется с {{domxref("DOMException")}} и именем `AbortError`.
 
 ## Спецификации
 
@@ -42,4 +44,4 @@ None.
 - {{domxref("KeyframeEffect")}}
 - {{domxref("Animation")}}
 - {{domxref("Animation.playState")}}
-- {{domxref("Animation.finished")}} returns the promise this action will reject if the animation's `playState` is not `"idle"`.
+- {{domxref("Animation.finished")}} возвращает промис, который отменит это действие, если `playState` анимации не `"idle"`.
diff --git a/files/ru/web/api/document/createattribute/index.md b/files/ru/web/api/document/createattribute/index.md
index 8e2a3a4cc22134..3479f8cac58f0b 100644
--- a/files/ru/web/api/document/createattribute/index.md
+++ b/files/ru/web/api/document/createattribute/index.md
@@ -1,38 +1,42 @@
 ---
-title: Document.createAttribute()
+title: "Document: метод createAttribute()"
 slug: Web/API/Document/createAttribute
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
-{{APIRef("DOM")}}
+{{ ApiRef("DOM") }}
 
-Метод **`Document.createAttribute()`** создаёт новый атрибут узла и возвращает его. Созданный объект узла реализует {{domxref("Attr")}} интерфейс . DOM не указывает, какие атрибуты могут быть добавлены к определённому элементу таким способом.
+Метод **`Document.createAttribute()`** создаёт новый атрибут и возвращает его. Созданный объект является узлом и реализует интерфейс {{domxref("Attr")}}. DOM не накладывает ограничений на тип атрибутов, которые могут быть добавлены к определённому элементу таким способом.
 
 > [!NOTE]
 > Строка, заданная в параметре, преобразуется в нижний регистр.
 
-## Syntax
+## Синтаксис
 
-```
-attribute = document.createAttribute(name)
+```js-nolint
+createAttribute(name)
 ```
 
-### Parameters
+### Параметры
 
-- `name` строка, содержащая имя атрибута.
+- `name`
+  - : строка, содержащая имя атрибута.
 
-### Return value
+### Возвращаемое значение
 
-A {{domxref("Attr")}} node.
+Узел {{domxref("Attr")}}.
 
-### Exceptions
+### Исключения
 
-- `INVALID_CHARACTER_ERR` если параметр содержит недопустимые символы для атрибута XML.
+- `InvalidCharacterError` {{domxref("DOMException")}}
+  - : Вызывается если значение [`name`](#name) не является корректным [именем XML](https://www.w3.org/TR/REC-xml/#dt-name) (например, начинается с цифры, дефиса или точки, или содержит символы, отличные от букв и цифр, подчёркиваний, дефисов и точек).
 
-## Example
+## Примеры
 
 ```js
-var node = document.getElementById("div1");
-var a = document.createAttribute("my_attrib");
+const node = document.getElementById("div1");
+const a = document.createAttribute("my_attrib");
 a.value = "newVal";
 node.setAttributeNode(a);
 console.log(node.getAttribute("my_attrib")); // "newVal"
@@ -48,4 +52,7 @@ console.log(node.getAttribute("my_attrib")); // "newVal"
 
 ## Смотрите также
 
+- {{domxref("Document.createAttributeNS()")}}
 - {{domxref("Document.createElement()")}}
+- {{domxref("Element.setAttribute()")}}
+- {{domxref("Element.setAttributeNode()")}}
diff --git a/files/ru/web/api/document/defaultview/index.md b/files/ru/web/api/document/defaultview/index.md
index 535033af175295..059caf01c0580c 100644
--- a/files/ru/web/api/document/defaultview/index.md
+++ b/files/ru/web/api/document/defaultview/index.md
@@ -5,7 +5,7 @@ l10n:
   sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d
 ---
 
-{{ApiRef}}
+{{APIRef}}
 
 В браузерах **`document.defaultView`** возвращает объект
 {{domxref("Window", "window")}}, связанный с {{Glossary("Browsing_context", "документом")}}, или `null` если документ не доступен.
diff --git a/files/ru/web/api/settimeout/index.md b/files/ru/web/api/settimeout/index.md
index 580bf91e16063e..aab96f1831ddc0 100644
--- a/files/ru/web/api/settimeout/index.md
+++ b/files/ru/web/api/settimeout/index.md
@@ -1,9 +1,9 @@
 ---
-title: WindowTimers.setTimeout()
+title: Глобальная функция setTimeout()
 slug: Web/API/setTimeout
 ---
 
-{{ APIRef() }}
+{{APIRef("HTML DOM")}} {{AvailableInWorkers}}
 
 ## Краткое изложение
 
diff --git a/files/ru/web/api/window/scrollby/index.md b/files/ru/web/api/window/scrollby/index.md
index ae7b652510e17b..a927f714dc8fd5 100644
--- a/files/ru/web/api/window/scrollby/index.md
+++ b/files/ru/web/api/window/scrollby/index.md
@@ -1,37 +1,69 @@
 ---
-title: Window.scrollBy()
+title: "Window: метод scrollBy()"
 slug: Web/API/Window/scrollBy
+l10n:
+  sourceCommit: 62cedc63226017e9e7d0718b6fea3529ca8dbf37
 ---
 
-{{ APIRef() }}
+{{APIRef}}
 
-## Описание
-
-Прокручивает документ на указанные величины.
+Метод **`Window.scrollBy()`** прокручивает документ в окне на указанную величину.
 
 ## Синтаксис
 
-```
-window.scrollBy(X, Y);
+```js-nolint
+scrollBy(x-coord, y-coord)
+scrollBy(options)
 ```
 
 ### Параметры
 
-- `X` - смещение в пикселях по горизонтали.
-- `Y` - смещение в пикселях по вертикали.
+- `x-coord` смещение в пикселях по горизонтали.
+- `y-coord` смещение в пикселях по вертикали.
 
-Положительные значения приведут к прокрутке страницы вправо и вниз. Отрицательные координаты прокрутят страницу влево и вверх.
+\- или -
 
-## Пример
+- `options`
 
-```
-// Прокрутка на один экран вертикально вниз.
+  - : Объект, содержащий следующие свойства:
+    - `top`
+      - : Указывает количество пикселей по оси Y для прокрутки окна или элемента.
+    - `left`
+      - : Указывает количество пикселей по оси X для прокрутки окна или элемента.
+    - `behavior`
+      - : Указывает, нужно ли анимировать прокрутку плавно (`smooth`), быстрым перемещением (`instant`) или предоставить выбор браузеру (`auto`, по умолчанию).
+
+### Возвращаемое значение
+
+Нет ({{jsxref("undefined")}}).
+
+## Примеры
+
+Для прокрутки вниз страницы:
+
+```js
 window.scrollBy(0, window.innerHeight);
 ```
 
+Для прокрутки вверх:
+
+```js
+window.scrollBy(0, -window.innerHeight);
+```
+
+С использованием `options`:
+
+```js
+window.scrollBy({
+  top: 100,
+  left: 100,
+  behavior: "smooth",
+});
+```
+
 ## Примечания
 
-[window.scrollBy](/ru/docs/DOM/Window.scrollBy) прокручивает страницу на указанное количество пикселей, в то время как метод [window.scroll](/ru/docs/DOM/Window.scroll) указывает абсолютную позицию в документе, на которую надо сместиться. Смотрите также [window.scrollByLines](/ru/docs/DOM/Window.scrollByLines), [window.scrollByPages](/ru/docs/DOM/Window.scrollByPages)
+`window.scrollBy()` прокручивает страницу на указанное количество пикселей, в то время как метод {{domxref("window.scroll()")}} прокручивает к абсолютной позиции в документе. Смотрите также {{domxref("window.scrollByLines()")}} и {{domxref("window.scrollByPages()")}}.
 
 ## Спецификации
 
diff --git a/files/ru/web/api/window/self/index.md b/files/ru/web/api/window/self/index.md
index 5f24950a8e5cfc..5531b31177a845 100644
--- a/files/ru/web/api/window/self/index.md
+++ b/files/ru/web/api/window/self/index.md
@@ -1,31 +1,32 @@
 ---
-title: Window.self
+title: "Window: свойство self"
 slug: Web/API/Window/self
+l10n:
+  sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
 ---
 
-{{ APIRef() }}
+{{APIRef}}
 
-Свойство **`Window.self`** доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект `window` (`window.self`) или переменную `self`. Преимущество доступа через переменную `self` заключается в том, что её можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование `self` даёт возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае `self` эквивалентна `window.self`), но также в воркерах (в случае воркера `self` эквивалентна {{domxref("WorkerGlobalScope.self")}}).
+Доступное только для чтения свойство **`Window.self`** возвращает само окно в виде объекта {{domxref("WindowProxy")}}. Оно может быть использовано вместе с точечной нотацией на объекте `window` (как `window.self`) или просто `self`. Преимущество доступа через `self` заключается в том, что такую нотацию можно использовать в окружениях, в которых нет объекта `window`, например {{domxref("Worker", "Web Workers")}}. Использование `self` даёт возможность обращаться к глобальному объекту не только в окружениях где есть `window` (в таком случае `self` эквивалентно `window.self`), но также в контексте воркерах (тогда `self` будет эквивалентно {{domxref("WorkerGlobalScope.self")}}).
 
-## Пример
+## Примеры
 
-В следующем примере `window.self` точно также может быть заменено на `window`.
+В следующем примере `window.self` может быть заменено на `window`.
 
 ```js
 if (window.parent.frames[0] != window.self) {
-  // этот window не является первым frame в списке
+  // это окно не является первым в списке
 }
 ```
 
-Кроме того, когда код выполняется в активном документе браузера, объект `window` является ссылкой на текущий глобальный объект и таким образом:
+Кроме того, когда код выполняется в активном документе браузера, объект `window` является ссылкой на текущий глобальный объект, и поэтому всё следующее эквивалентно:
 
 ```js
-var w1 = window;
-var w2 = self;
-var w3 = window.window;
-var w4 = window.self;
-// Значения переменных w1, w2, w3, w4 строго равны между собой
-// Но только переменная w2 будет работать в workers
+const w1 = window;
+const w2 = self;
+const w3 = window.window;
+const w4 = window.self;
+// w1, w2, w3, w4 равнозначны, но только w2 будет работать в workers
 ```
 
 ## Спецификации
@@ -38,4 +39,4 @@ var w4 = window.self;
 
 ## Смотрите также
 
-- Its `Worker` equivalent, {{domxref("WorkerGlobalScope.self")}}.
+- {{domxref("WorkerGlobalScope.self")}} — эквивалент для' `Worker`.
diff --git a/files/ru/web/api/window/sessionstorage/index.md b/files/ru/web/api/window/sessionstorage/index.md
index 1f8e0dec74fc36..b7604875e894c8 100644
--- a/files/ru/web/api/window/sessionstorage/index.md
+++ b/files/ru/web/api/window/sessionstorage/index.md
@@ -1,9 +1,9 @@
 ---
-title: Window.sessionStorage
+title: "Window: свойство sessionStorage"
 slug: Web/API/Window/sessionStorage
 ---
 
-{{APIRef()}}
+{{APIRef("Web Storage API")}}
 
 `Свойство sessionStorage` позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохранённые в localStorage не имеют определённого времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остаётся активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. **Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы,** что отличается от поведения session cookies**.**
 
diff --git a/files/ru/web/http/basics_of_http/mime_types/common_types/index.md b/files/ru/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/ru/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/ru/web/http/mime_types/common_types/index.md
index 5d19b8f4c4c671..7b2591a39726f9 100644
--- a/files/ru/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/ru/web/http/mime_types/common_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: Неполный список типов MIME
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}Здесь представлен исчерпывающий список типов MIME, соотнесённых с типами документов и отсортированных по расширению.Два ключевых типа MIME, использующихся в качестве типов по умолчанию:
diff --git a/files/ru/web/http/basics_of_http/mime_types/index.md b/files/ru/web/http/mime_types/index.md
similarity index 99%
rename from files/ru/web/http/basics_of_http/mime_types/index.md
rename to files/ru/web/http/mime_types/index.md
index 6921d156c682f9..1e0f22d235748d 100644
--- a/files/ru/web/http/basics_of_http/mime_types/index.md
+++ b/files/ru/web/http/mime_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: MIME types
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md
index 873114ae0515e1..c7a723e994320a 100644
--- a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md
+++ b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md
@@ -1,31 +1,57 @@
 ---
 title: Date.prototype.toUTCString()
 slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+l10n:
+  sourceCommit: 77e46a5b43f828fcc6bd30facddc6fc4bfe84f9b
 ---
 
 {{JSRef}}
 
 ## Сводка
 
-Метод **`toUTCString()`** преобразует дату в строку, используя часовой пояс UTC.
+Метод **`toUTCString()`** экземпляров {{jsxref("Date")}} возвращает строку, представляющую дату в формате [RFC 7231](https://datatracker.ietf.org/doc/html/rfc7231#section-7.1.1.1), отрицательные значения допускаются. Временная зона всегда UTC. `toGMTString()` является синонимом этого метода.
+
+{{EmbedInteractiveExample("pages/js/date-toutcstring.html", "shorter")}}
 
 ## Синтаксис
 
-```
-dateObj.toUTCString()
+```js-nolint
+toUTCString()
 ```
 
 ### Параметры
 
 Нет.
 
+### Возвращаемое значение
+
+Строка, представляющая дату, используя временную зону UTC (смотрите описание формата). Возвращает `"Invalid Date"` если дата [недопустима](/ru/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date).
+
 ## Описание
 
-Значение, возвращаемое методом `toUTCString()`, является человеко-читаемой строкой в часовом поясе UTC. Формат возвращаемого значения зависит от платформы. Наиболее распространённым значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822.
+Значение, возвращаемое методом `toUTCString()`, является строкой в формате `Www, dd Mmm yyyy HH:mm:ss GMT`, где:
+
+| Строка | Значение                                                            |
+| ------ | ------------------------------------------------------------------- |
+| `Www`  | День недели в виде трёх букв (например, `Sun`, `Mon`)               |
+| `dd`   | День месяца в виде двух цифр, с ведущим нулём, если требуется       |
+| `Mmm`  | Месяц в виде трёх букв (например, `Jan`, `Feb`)                     |
+| `yyyy` | Год в виде четырёх или более цифр с ведущими нулями, если требуется |
+| `HH`   | Час в виде двух цифр с ведущим нулём если требуется                 |
+| `mm`   | Минута в виде двух цифр с ведущим нулём если требуется              |
+| `ss`   | Секунды в виде двух цифр с ведущим нулём, если требуется            |
+
+### Псевдонимы
+
+`Date` API в JavaScript был создан под влиянием библиотеки `java.util.Date` из языка Java (которая впоследствии стала устаревшей, начиная с версии Java 1.1 в 1997 году). В частности, у класса `Date` в Java есть метод `toGMTString`, который был неудачно назван, потому что [Среднее время по Гринвичу](https://ru.wikipedia.org/wiki/Среднее_время_по_Гринвичу) не эквивалентно [Всемирному координированному времени](https://ru.wikipedia.org/wiki/Всемирное_координированное_время), тогда как даты в JavaScript оперируют временем UTC. В целях совместимости `toGMTString` остаётся псевдонимом `toUTCString`, и они ссылаются на один и тот же объект. То есть:
+
+```js
+Date.prototype.toGMTString.name === "toUTCString";
+```
 
 ## Примеры
 
-### Пример: использование метода `toUTCString()`
+### Использование toUTCString()
 
 ```js
 const d = new Date(0);
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 1380fbf848ab74..e2138bb4b30088 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -1903,7 +1903,7 @@
 /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
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/zh-CN/docs/Web/API/createImageBitmap
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/zh-CN/docs/Web/API/Window/createImageBitmap
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated	/zh-CN/docs/Web/API/Window/crossOriginIsolated
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/zh-CN/docs/Web/API/Window/fetch
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/zh-CN/docs/Web/API/Window/indexedDB
@@ -1961,6 +1961,7 @@
 /zh-CN/docs/Web/API/console/timeStamp	/zh-CN/docs/Web/API/console/timeStamp_static
 /zh-CN/docs/Web/API/console/trace	/zh-CN/docs/Web/API/console/trace_static
 /zh-CN/docs/Web/API/console/warn	/zh-CN/docs/Web/API/console/warn_static
+/zh-CN/docs/Web/API/createImageBitmap	/zh-CN/docs/Web/API/Window/createImageBitmap
 /zh-CN/docs/Web/API/crossOriginIsolated	/zh-CN/docs/Web/API/Window/crossOriginIsolated
 /zh-CN/docs/Web/API/crypto_property	/zh-CN/docs/Web/API/Window/crypto
 /zh-CN/docs/Web/API/document.URL	/zh-CN/docs/Web/API/Document/URL
@@ -2426,10 +2427,14 @@
 /zh-CN/docs/Web/HTML/动作	/zh-CN/docs/Glossary/Speculative_parsing
 /zh-CN/docs/Web/HTML/属性	/zh-CN/docs/Web/HTML/Attributes
 /zh-CN/docs/Web/HTTP/Access_control_CORS	/zh-CN/docs/Web/HTTP/CORS
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP	/zh-CN/docs/Web/HTTP
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs	/zh-CN/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/zh-CN/docs/Web/URI/Schemes/data
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/zh-CN/docs/Web/URI/Schemes/data
-/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP	/zh-CN/docs/Web/HTTP/Evolution_of_HTTP
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/zh-CN/docs/Web/HTTP/MIME_types
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/zh-CN/docs/Web/HTTP/MIME_types/Common_types
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/zh-CN/docs/Web/HTTP/MIME_types/Common_types
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/选择_www_或非_www_URL_作为域名	/zh-CN/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /zh-CN/docs/Web/HTTP/CORS/Errors/CORS错误允许凭证	/zh-CN/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials
 /zh-CN/docs/Web/HTTP/Caching_FAQ	/zh-CN/docs/Web/HTTP/Caching
@@ -2465,7 +2470,7 @@
 /zh-CN/docs/Web/HTTP/Link_prefetching_FAQ	/zh-CN/docs/Glossary/Prefetch
 /zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file	/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file
 /zh-CN/docs/Web/HTTP/Public_Key_Pinning	/zh-CN/docs/Web/Security/Certificate_Transparency
-/zh-CN/docs/Web/HTTP/Resources_and_URIs	/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+/zh-CN/docs/Web/HTTP/Resources_and_URIs	/zh-CN/docs/Web/HTTP/MIME_types
 /zh-CN/docs/Web/HTTP/Response_codes	/zh-CN/docs/Web/HTTP/Status
 /zh-CN/docs/Web/HTTP/Response_codes/100	/zh-CN/docs/Web/HTTP/Status/100
 /zh-CN/docs/Web/HTTP/Response_codes/204	/zh-CN/docs/Web/HTTP/Status/204
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index ca036768227942..1b2e8bc5a3c0a0 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -15180,6 +15180,10 @@
     "modified": "2020-10-15T22:30:15.212Z",
     "contributors": ["Jee"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2019-03-18T20:44:01.174Z",
+    "contributors": ["fanerge", "varcat"]
+  },
   "Web/API/Window/crossOriginIsolated": {
     "modified": "2020-10-15T22:26:03.129Z",
     "contributors": ["Fulgrim"]
@@ -16267,10 +16271,6 @@
     "modified": "2019-03-23T22:12:15.122Z",
     "contributors": ["pluwen", "choukin"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2019-03-18T20:44:01.174Z",
-    "contributors": ["fanerge", "varcat"]
-  },
   "Web/API/notification": {
     "modified": "2020-09-28T00:03:47.900Z",
     "contributors": [
@@ -22375,61 +22375,6 @@
       "thomastao0215"
     ]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2020-05-07T23:19:31.676Z",
-    "contributors": [
-      "Filon",
-      "HardcorePhysician",
-      "Yayure",
-      "695919451",
-      "BobGreen",
-      "magiclyde",
-      "cissoid"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
-    "modified": "2020-02-20T03:41:08.272Z",
-    "contributors": [
-      "Babyfaceqian",
-      "XFJGitHub",
-      "lc-soft",
-      "BobGreen",
-      "enjolras1205",
-      "zihengCat",
-      "GuoShuai",
-      "Haruhi",
-      "huangchanghuan",
-      "keifergu",
-      "JsonLi",
-      "WeijieZhu"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2020-11-04T00:16:29.009Z",
-    "contributors": [
-      "lujjjh",
-      "andysongs",
-      "rascalquan",
-      "BobGreen",
-      "NewbieAndy",
-      "zhangchen",
-      "xgqfrms-GitHub",
-      "w11th",
-      "YuriTu"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-02-28T13:11:23.222Z",
-    "contributors": [
-      "chrisdavidmills",
-      "RainSlide",
-      "qq58553442",
-      "sam-dingkang",
-      "xgqfrms-GitHub",
-      "choury",
-      "pasturn"
-    ]
-  },
   "Web/HTTP/Browser_detection_using_the_user_agent": {
     "modified": "2019-03-23T22:26:23.825Z",
     "contributors": ["xgqfrms-GitHub", "konrumi", "Leogh", "jianyi1995"]
@@ -22655,6 +22600,23 @@
       "charlie"
     ]
   },
+  "Web/HTTP/Evolution_of_HTTP": {
+    "modified": "2020-02-20T03:41:08.272Z",
+    "contributors": [
+      "Babyfaceqian",
+      "XFJGitHub",
+      "lc-soft",
+      "BobGreen",
+      "enjolras1205",
+      "zihengCat",
+      "GuoShuai",
+      "Haruhi",
+      "huangchanghuan",
+      "keifergu",
+      "JsonLi",
+      "WeijieZhu"
+    ]
+  },
   "Web/HTTP/Headers": {
     "modified": "2020-05-20T02:33:50.716Z",
     "contributors": [
@@ -23230,6 +23192,32 @@
       "xgqfrms-GitHub"
     ]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2020-11-04T00:16:29.009Z",
+    "contributors": [
+      "lujjjh",
+      "andysongs",
+      "rascalquan",
+      "BobGreen",
+      "NewbieAndy",
+      "zhangchen",
+      "xgqfrms-GitHub",
+      "w11th",
+      "YuriTu"
+    ]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:11:23.222Z",
+    "contributors": [
+      "chrisdavidmills",
+      "RainSlide",
+      "qq58553442",
+      "sam-dingkang",
+      "xgqfrms-GitHub",
+      "choury",
+      "pasturn"
+    ]
+  },
   "Web/HTTP/Messages": {
     "modified": "2020-04-19T05:44:17.609Z",
     "contributors": [
diff --git a/files/zh-cn/glossary/http_2/index.md b/files/zh-cn/glossary/http_2/index.md
index 6d1800ef640c5e..e6d4d0ab654597 100644
--- a/files/zh-cn/glossary/http_2/index.md
+++ b/files/zh-cn/glossary/http_2/index.md
@@ -2,14 +2,14 @@
 title: HTTP/2
 slug: Glossary/HTTP_2
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{GlossarySidebar}}
 
-**HTTP/2** 是 [HTTP 网络协议](/zh-CN/docs/Web/HTTP/Basics_of_HTTP)的一个主要版本。
+**HTTP/2** 是 [HTTP 网络协议](/zh-CN/docs/Web/HTTP)的一个主要版本。
 
-它的主要目标是通过启用完整的请求和响应多路复用来降低{{glossary("latency", "延迟")}}，通过有效压缩 HTTP 标头字段来最小化协议开销，增加对请求优先级和服务器推送的支持。
+它的主要目标是通过启用完整的请求和响应多路复用来降低{{glossary("latency", "延迟")}}和队头阻塞，通过有效压缩 HTTP 标头字段来最小化协议开销，增加对请求优先级和服务器推送的支持。
 
 HTTP/2 不会修改 HTTP 协议的语义。HTTP 1.1 中的所有核心概念（例如 HTTP 方法、状态码、URI 和标头）都得以保留。而是修改了 HTTP/2 数据在客户端和服务器之间的格式（帧）和传输方式，这两者都管理整个过程，并在新的框架层内隐藏了应用程序的复杂性。所以，所有现有的应用程序都可以不经修改地交付。
 
diff --git a/files/zh-cn/glossary/http_3/index.md b/files/zh-cn/glossary/http_3/index.md
index 9e4cbb7a8f015b..87407baddecdb5 100644
--- a/files/zh-cn/glossary/http_3/index.md
+++ b/files/zh-cn/glossary/http_3/index.md
@@ -1,21 +1,21 @@
 ---
 title: HTTP/3
 slug: Glossary/HTTP_3
+l10n:
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{GlossarySidebar}}
 
-**HTTP/3**是继{{glossary("HTTP 2", "HTTP/2")}}即将到来的[HTTP 网络协议的](/zh-CN/docs/Web/HTTP/Basics_of_HTTP)主要修订版。HTTP/3 的要点是它使用名为 QUIC 的新{{glossary("UDP")}}协议代替{{glossary("TCP")}}。
+**HTTP/3** 是继 {{glossary("HTTP 2", "HTTP/2")}} 之后的 [HTTP 网络协议](/zh-CN/docs/Web/HTTP)的主要修订版。
 
-## 参见
-
-- 基础知识
+HTTP/3 的最大不同之处在于它使用了一种名为 QUIC 的协议（基于 {{glossary("UDP")}} 而不是 {{glossary("TCP")}}）。
 
-  - [HTTP on MDN](/zh-CN/docs/Web/HTTP)
-  - [HTTP/3](https://zh.wikipedia.org/wiki/HTTP/3)
-
-- 词汇表
+## 参见
 
+- [HTTP 文档](/zh-CN/docs/Web/HTTP)
+- 维基百科上的 [HTTP/3](https://zh.wikipedia.org/wiki/HTTP/3)
+- 相关术语：
   - {{glossary("HTTP")}}
   - {{glossary("HTTP 2")}}
   - {{glossary("Latency")}}
diff --git a/files/zh-cn/glossary/lossy_compression/index.md b/files/zh-cn/glossary/lossy_compression/index.md
index ccad67ddfc2dbb..ba42a77a4b3374 100644
--- a/files/zh-cn/glossary/lossy_compression/index.md
+++ b/files/zh-cn/glossary/lossy_compression/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **有损压缩**，又称为不可逆压缩，是一种数据压缩方法，它使用不精确的近似值和部分数据丢弃来表示内容。简单来说：有损压缩导致原始文件中的数据丢失，可能导致质量下降。这种压缩过程是不可逆的；一旦对内容进行了有损压缩，就无法将内容恢复到原始状态。因此，经过有损压缩的内容通常不应再进一步编辑。
 
-有损压缩在诸如 {{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)。
+有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式（如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)）中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
 
 ![有损压缩的图像](2019-11-18.png)
 
diff --git a/files/zh-cn/glossary/mime_type/index.md b/files/zh-cn/glossary/mime_type/index.md
index c3687f10e255dd..f3fe2769c12b37 100644
--- a/files/zh-cn/glossary/mime_type/index.md
+++ b/files/zh-cn/glossary/mime_type/index.md
@@ -2,12 +2,12 @@
 title: MIME 类型
 slug: Glossary/MIME_type
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{GlossarySidebar}}
 
-**MIME 类型**（现在正式地称作“媒体类型”，但有时也被称作“内容类型”）是指示文件类型的会与文件同时发送出去的字符串，描述了内容的格式（例如，一个声音文件可能被标记为 `audio/ogg` ，一个图像文件可能是 `image/png`）。
+**MIME 类型**（现在正式地称作“媒体类型”，但有时也被称作“内容类型”）是指示文件类型的会与文件同时发送出去的字符串，描述了内容的格式（例如，一个声音文件可能被标记为 `audio/ogg`，一个图像文件可能是 `image/png`）。
 
 它与传统 Windows 上的文件扩展名有相同目的。这个术语的名字源于最初用于电子邮件的 {{glossary("mime","MIME")}} 标准。
 
@@ -16,6 +16,6 @@ l10n:
 - 维基百科上的[互联网媒体类型](https://zh.wikipedia.org/wiki/互联网媒体类型)
 - [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)
+- 有关在 Web 环境中使用 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的详细信息。
+- [MIME 类型的不完整列表](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)
 - [MediaRecorder.mimeType](/zh-CN/docs/Web/API/MediaRecorder/mimeType)
diff --git a/files/zh-cn/learn/forms/basic_native_form_controls/index.md b/files/zh-cn/learn/forms/basic_native_form_controls/index.md
index 6a7dcf5144fb3f..5847c8a0cb71fc 100644
--- a/files/zh-cn/learn/forms/basic_native_form_controls/index.md
+++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.md
@@ -62,7 +62,7 @@ slug: Learn/Forms/Basic_native_form_controls
 
 单行文本框只有一个真正的约束：如果你输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符。
 
-_以下截图现实了 macOS 上的 Firefox 71 和 Safair 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的文本输入框。_
+_以下截图现实了 macOS 上的 Firefox 71 和 Safari 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的文本输入框。_
 
 ![Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge.](disabled.png)
 
@@ -141,7 +141,7 @@ HTML5 中添加了其他的文本输入类型，如：{{HTMLElement("input/searc
 </fieldset>
 ```
 
-_以下截图显示了 macOS 上的 Firefox 71 和 Safair 13 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的复选框。_
+_以下截图显示了 macOS 上的 Firefox 71 和 Safari 13 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的复选框。_
 
 ![Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10](checkboxes.png)
 
diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
index 819d7916fbc51a..834f6e8763f984 100644
--- a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
@@ -7,7 +7,7 @@ slug: Learn/Forms/Sending_and_retrieving_form_data
 
 本文将讨论当用户提交表单时发生了什么——数据去了哪，以及当它到达时该如何处理？我们还研究了与发送表单数据相关的一些安全问题。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">前提：</th>
@@ -16,7 +16,7 @@ slug: Learn/Forms/Sending_and_retrieving_form_data
           基本计算机素养，对<a
             href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
             >HTML 的理解</a
-          >，对<a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> 和<a
+          >，对<a href="/zh-CN/docs/Web/HTTP">HTTP</a> 和<a
             href="/zh-CN/docs/Learn/Server-side/First_steps"
             >服务器端编程</a
           >的基础知识。
diff --git a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
index 5c4e9fae05141e..d965effa6becb2 100644
--- a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
@@ -2,380 +2,125 @@
 title: 使用 JavaScript 发送表单
 slug: Learn/Forms/Sending_forms_through_JavaScript
 l10n:
-  sourceCommit: 402d8cd44691881e55bf214a7c0cb02bcb817305
+  sourceCommit: 4414bc297a05373570250fe1fb154eab197f29ca
 ---
 
 {{LearnSidebar}}
 
-HTML 表单可以声明式地发送一个 [HTTP](/zh-CN/docs/Web/HTTP) 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求（例如通过 `XMLHttpRequest`）。本文对这些方法进行了探讨。
+当用户提交 HTML 表单（如通过点击{{glossary("Submit_button", "提交按钮")}}）时，浏览器会发出 [HTTP](/zh-CN/docs/Web/HTTP) 请求，来发送表单中的数据。但是，web 应用有时会使用 JavaScript API（如 {{domxref("Window/fetch", "fetch()")}}），以编程方式将数据发送到期望提交表单的端点，而不是采用这种声明式方法。本文将解释为什么这是一个重要的用例，并说明如何实现它。
 
-## 表单不总是表单
+## 为什么使用 JavaScript 提交表单数据？
 
-在渐进式 Web 应用、单页应用和基于框架的应用中，通常会使用 [HTML 表单](/zh-CN/docs/Learn/Forms)来发送数据，而不会在收到响应数据时加载新文档。让我们先来谈谈为什么这需要一种不同的方法。
+根据文章[发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data)中的描述，标准 HTML 表单提交会加载发送数据的目标 URL，这意味着浏览器窗口将以加载整个页面的方式进行导航。
 
-### 获得整体界面的控制
+然而，许多 web 应用（特别是{{glossary("progressive web apps","渐进式 web 应用")}}和{{glossary("SPA","单页面应用")}}）都使用 JavaScript API 向服务器请求数据，并更新页面的相关部分，从而避免加载整个页面的开销。
 
-如前一篇文章所述，标准 HTML 表单提交会加载发送数据的 URL，这意味着浏览器窗口会以全页面加载的方式进行导航。避免全页面加载可以避免网络延迟和可能出现的视觉问题（如闪烁），从而提供更流畅的体验。
+因此，当这些 web 应用想要提交表单数据时，仅使用 HTML 表单来收集用户输入，而不提交数据。当用户尝试发送数据时，应用会接管控制权并使用 JavaScript API（如 {{domxref("Window/fetch", "fetch()")}}）来发送数据。
 
-许多现代用户界面只使用 HTML 表单来收集用户输入，而不是用于数据提交。当用户尝试发送数据时，应用程序会控制并在后台异步传输数据，只更新用户界面中需要更改的部分。
+## JavaScript 表单提交的问题
 
-### 表单提交和 AJAX 请求之间的区别？
+如果 Web 应用的服务器端点由开发人员控制，那么他们可以选择任意方式发送表单数据，例如以 JSON 对象的形式。
 
-{{domxref("XMLHttpRequest")}}（XHR）DOM 对象可以构建 HTTP 请求、发送请求并获取结果。从历史上看，{{domxref("XMLHttpRequest")}} 是为获取和发送 [XML](/zh-CN/docs/Web/XML) 作为交换格式而设计的，后来这种格式被 [JSON](/zh-CN/docs/Glossary/JSON) 所取代。但是，XML 和 JSON 都不适合表单数据请求编码。表单数据（`application/x-www-form-urlencoded`）由键/值对的 URL 编码列表组成。为了传输二进制数据，HTTP 请求被重塑为 `multipart/form-data`。
+然而，如果服务器端点希望提交表单，web 应用就必须以特定方式对数据进行编码。例如，如果数据仅为文本，则可以由 URL 编码的键/值对列表组成，并以 `application/x-www-form-urlencoded` 的 {{httpheader("Content-Type")}} 发送。如果表单包含二进制数据，则必须使用 `multipart/form-data` 内容类型发送。
 
-> [!NOTE]
-> 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，工作原理类似，但有一些优点。你在本文中看到的大部分 XHR 代码都可以换成 Fetch。
+{{domxref("FormData")}} 接口以上述方式对数据进行编码，在本文的其余部分，我们将对 `FormData` 进行简要介绍。更多详情，请参阅[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)指南。
 
-如果你控制了前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），就可以发送 JSON/XML，并随心所欲地处理它们。
+## 手动创建 `FormData` 对象
 
-但如果要使用第三方服务，就需要按照服务要求的格式发送数据。
+可以为要添加的每个字段调用其 {{domxref("FormData.append()", "append()")}} 方法（传入字段的名称和值），以此来填充 `FormData` 对象。对于文本字段，值可以是字符串；对于二进制字段（包括 {{domxref("File")}} 对象），值可以是 {{domxref("Blob")}}。
 
-那么我们应该如何发送这些数据呢？下面将介绍所需要的不同技术。
-
-## 发送表单数据
-
-一共有三种方式来发送表单数据：
-
-- 手工构建 `XMLHttpRequest`。
-- 使用独立的 `FormData` 对象。
-- 使用绑定到 `<form>` 元素的 `FormData`。
-
-让我们仔细看一下。
-
-### 手工构建 XMLHttpRequest
-
-{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全可靠的方式。要使用 {{domxref("XMLHttpRequest")}} 发送表单数据，请通过 URL 编码准备数据，并遵守表单数据请求的具体规定。
-
-让我们看个示例：
-
-```html
-<button>点我！</button>
-```
-
-这是 JavaScript 代码部分：
-
-```js
-const btn = document.querySelector("button");
-
-function sendData(data) {
-  console.log("Sending data");
-
-  const XHR = new XMLHttpRequest();
-
-  const urlEncodedDataPairs = [];
-
-  // 将数据对象转换为 URL 编码的键/值对数组。
-  for (const [name, value] of Object.entries(data)) {
-    urlEncodedDataPairs.push(
-      `${encodeURIComponent(name)}=${encodeURIComponent(value)}`,
-    );
-  }
-
-  // 将配对合并为单个字符串，并将所有 % 编码的空格替换为
-  // “+”字符；匹配浏览器表单提交的行为。
-  const urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");
-
-  // 定义成功数据提交时发生的情况
-  XHR.addEventListener("load", (event) => {
-    alert("耶！已发送数据并加载响应。");
-  });
-
-  // 定义错误提示
-  XHR.addEventListener("error", (event) => {
-    alert("哎呀！出问题了。");
-  });
-
-  // 建立我们的请求
-  XHR.open("POST", "https://example.com/cors.php");
-
-  // 为表单数据 POST 请求添加所需的 HTTP 头
-  XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-
-  // 最后，发送我们的数据。
-  XHR.send(urlEncodedData);
-}
-
-btn.addEventListener("click", () => {
-  sendData({ test: "ok" });
-});
-```
-
-这里是实时演示效果：
-
-{{EmbedLiveSample("构建_xmlhttprequest", "100%", 50)}}
-
-> [!NOTE]
-> 当你想要往第三方网站传输数据时，使用 {{domxref("XMLHttpRequest")}} 会受到{{glossary('same-origin policy', '同源策略')}}的影响。如果你需要执行跨源请求，你需要熟悉一下 [CORS 和 HTTP 访问控制](/zh-CN/docs/Web/HTTP/CORS)。
-
-### 使用 XMLHttpRequest 和 FormData 对象
-
-手动建立一个 HTTP 请求非常困难。幸运的是，[XMLHttpRequest 规范](https://www.w3.org/TR/XMLHttpRequest/)提供了一种方便简单的方法——利用 {{domxref("FormData","FormData")}} 对象来处理表单数据请求。
-
-{{domxref("FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。
-
-该对象的使用详见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)，下面是两个示例：
-
-#### 使用一个独立的 FormData 对象
-
-```html
-<button>点我！</button>
-```
-
-你应该会觉得那个 HTML 示例很熟悉，现在来展示 JavaScript 代码：
+在下面的示例中，当用户点击按钮时，将以表单提交的形式发送数据：
 
 ```js
-const btn = document.querySelector("button");
-
-function sendData(data) {
-  const XHR = new XMLHttpRequest();
-  const FD = new FormData();
-
-  // 把我们的数据添加到这个 FormData 对象中
-  for (const [name, value] of Object.entries(data)) {
-    FD.append(name, value);
+async function sendData(data) {
+  // 构建一个 FormData 实例
+  const formData = new FormData();
+
+  // 添加一个文本字段
+  formData.append("name", "Pomegranate");
+
+  // 添加一个文件
+  const selection = await window.showOpenFilePicker();
+  if (selection.length > 0) {
+    const file = await selection[0].getFile();
+    formData.append("file", file);
   }
 
-  // 定义数据成功发送并返回后执行的操作
-  XHR.addEventListener("load", (event) => {
-    alert("耶！已发送数据并加载响应。");
-  });
-
-  // 定义发生错误时执行的操作
-  XHR.addEventListener("error", (event) => {
-    alert("Oops! 出错了。");
-  });
-
-  // 设置请求地址和方法
-  XHR.open("POST", "https://example.com/cors.php");
-
-  // 发送这个 formData 对象，HTTP 请求头会自动设置
-  XHR.send(FD);
-}
-
-btn.addEventListener("click", () => {
-  sendData({ test: "ok" });
-});
-```
-
-这里是实时演示效果：
-
-{{EmbedLiveSample("使用一个独立的_FormData_对象", "100%", 50)}}
-
-#### 使用绑定到表单元素上的 FormData
-
-你也可以把一个 `FormData` 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个 `FormData` 对象，表示表单中包含的数据。
-
-这段 HTML 是典型的情况：
-
-```html
-<form id="myForm">
-  <label for="myName">告诉我你的名字：</label>
-  <input id="myName" name="name" value="小明" />
-  <input type="submit" value="提交" />
-</form>
-```
-
-但是 JavaScript 接管了这个表单：
-
-```js
-window.addEventListener("load", () => {
-  function sendData() {
-    const XHR = new XMLHttpRequest();
-
-    // 我们把这个 FormData 和表单元素绑定在一起。
-    const FD = new FormData(form);
-
-    // 我们定义了数据成功发送时会发生的事件
-    XHR.addEventListener("load", (event) => {
-      alert(event.target.responseText);
+  try {
+    const response = await fetch("https://example.org/post", {
+      method: "POST",
+      // 将 FormData 实例设置为请求正文
+      body: formData,
     });
-
-    // 我们定义了失败的情形下会发生的事件
-    XHR.addEventListener("error", (event) => {
-      alert("哎呀！出了一些问题。");
-    });
-
-    // 我们设置了我们的请求
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // 发送的数据是由用户在表单中提供的
-    XHR.send(FD);
+    console.log(await response.json());
+  } catch (e) {
+    console.error(e);
   }
+}
 
-  // 获取表单元素
-  const form = document.getElementById("myForm");
-
-  // 接管表单的 submit 事件
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-
-    sendData();
-  });
-});
+const send = document.querySelector("#send");
+send.addEventListener("click", sendData);
 ```
 
-这里是实时演示效果：
-
-{{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}}
-
-你甚至可以通过使用表单的 {{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理它们。想了解更多，请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。
-
-## 处理二进制数据
+1. 首先，构建一个新的、空的 `FormData` 对象。
+2. 接下来，调用 `append()` 两次，向 `FormData` 对象添加两个项目：一个文本字段和一个文件。
+3. 最后，我们使用 `fetch()` API 发出 {{httpmethod("POST")}} 请求，并将 `FormData` 对象设置为请求体。
 
-如果你使用一个含有 `<input type="file">` 组件的 {{domxref("FormData","FormData")}} 表单对象，数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。
+请注意，不必设置 {{httpheader("Content-Type")}} 标头：当将 `FormData` 对象传入 `fetch()` 时，会自动设置正确的标头。
 
-在现代网络上，二进制数据有很多来源：例如 {{domxref("FileReader")}}、{{domxref("HTMLCanvasElement","Canvas")}}、[WebRTC](/zh-CN/docs/Web/API/Navigator/getUserMedia)，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 `FileReader` API 的知识，参见[如何在 web 应用程序中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)。
+## 关联 `FormData` 对象和 `<form>`
 
-发送二进制数据最简单的方法是使用 {{domxref("FormData", "FormData")}} 的 `append()` 方法，如上图所示。如果必须手工操作，就比较麻烦了。
+如果提交的数据来自 {{htmlelement("form")}}，则可以通过将表单传入 `FormData` 构造函数来填充 `FormData` 实例。
 
-在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多部分表单数据请求：
+假设我们的 HTML 声明了一个 `<form>` 元素：
 
 ```html
-<form id="myForm">
+<form id="userinfo">
   <p>
-    <label for="theText">文本数据：</label>
-    <input id="theText" name="myText" value="一些文本数据" type="text" />
+    <label for="username">输入你的姓名：</label>
+    <input type="text" id="username" name="username" value="Dominic" />
   </p>
   <p>
-    <label for="theFile">文件数据：</label>
-    <input id="theFile" name="myFile" type="file" />
+    <label for="avatar">选择一个头像</label>
+    <input type="file" id="avatar" name="avatar" required />
   </p>
-  <button>提交！</button>
+  <input type="submit" value="Submit" />
 </form>
 ```
 
-如你所见，这个 HTML 只是一个标准的 `<form>`，没有什么神奇的事情。“魔法”都在 JavaScript 里：
+表单包含一个文本输入、一个文件输入和一个提交按钮。
+
+JavaScript 如下：
 
 ```js
-// 因为我们想获取 DOM 节点，
-// 我们在页面加载时初始化我们的脚本。
-window.addEventListener("load", () => {
-  // 这些变量用于存储表单数据
-  const text = document.getElementById("theText");
-  const file = {
-    dom: document.getElementById("theFile"),
-    binary: null,
-  };
-
-  // 使用 FileReader API 获取文件内容
-  const reader = new FileReader();
-
-  // 因为 FileReader 是异步的，会在完成读取文件时存储结果
-  reader.addEventListener("load", () => {
-    file.binary = reader.result;
-  });
-
-  // 页面加载时，如果一个文件已经被选择，那么读取该文件。
-  if (file.dom.files[0]) {
-    reader.readAsBinaryString(file.dom.files[0]);
-  }
+const form = document.querySelector("#userinfo");
 
-  // 如果没有被选择，一旦用户选择了它，就读取文件。
-  file.dom.addEventListener("change", () => {
-    if (reader.readyState === FileReader.LOADING) {
-      reader.abort();
-    }
-
-    reader.readAsBinaryString(file.dom.files[0]);
-  });
-
-  // 发送数据是我们需要的主要功能
-  function sendData() {
-    // 如果存在被选择的文件，等待它读取完成
-    // 如果没有，延迟函数的执行
-    if (!file.binary && file.dom.files.length > 0) {
-      setTimeout(sendData, 10);
-      return;
-    }
-
-    // 要构建我们的多部分表单数据请求，
-    // 我们需要一个 XMLHttpRequest 实例
-    const XHR = new XMLHttpRequest();
-
-    // 我们需要一个分隔符来定义请求的每一部分。
-    const boundary = "blob";
-
-    // 将我们的主体请求存储于一个字符串中
-    let data = "";
-
-    // 所以，如果用户已经选择了一个文件
-    if (file.dom.files[0]) {
-      // 在请求体中开始新的一部分
-      data += `--${boundary}\r\n`;
-
-      // 把它描述成表单数据
-      data +=
-        "content-disposition: form-data; " +
-        // 定义表单数据的名称
-        `name="${file.dom.name}"; ` +
-        // 提供文件的真实名字
-        `filename="${file.dom.files[0].name}"\r\n`;
-      // 和文件的 MIME 类型
-      data += `Content-Type: ${file.dom.files[0].type}\r\n`;
-
-      // 元数据和数据之间有一条空行。
-      data += "\r\n";
-
-      // 将二进制数据添加到主体请求中
-      data += file.binary + "\r\n";
-    }
-
-    // 文本数据更简单一些
-    // 在主体请求中开始一个新的部分
-    data += `--${boundary}\r\n`;
-
-    // 假设这是表单数据，并命名它
-    data += `content-disposition: form-data; name="${text.name}"\r\n`;
-    // 元数据和数据之间有一条空行。
-    data += "\r\n";
-
-    // 添加文本数据到主体请求中
-    data += text.value + "\r\n";
-
-    // 一旦完成，“关闭”主体请求
-    data += `--${boundary}--`;
-
-    // 定义成功提交数据执行的语句
-    XHR.addEventListener("load", (event) => {
-      alert("耶！已发送数据并加载响应。");
-    });
+async function sendData() {
+  // 将 FormData 对象与表单元素关联起来
+  const formData = new FormData(form);
 
-    // 定义发生错误时做的事
-    XHR.addEventListener("error", function (event) {
-      alert("哎呀！出现了一些问题。");
+  try {
+    const response = await fetch("https://example.org/post", {
+      method: "POST",
+      // 将 FormData 实例设置为请求正文
+      body: formData,
     });
-
-    // 建立请求
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // 添加需要的 HTTP 头部来处理多部分表单数据 POST 请求
-    XHR.setRequestHeader(
-      "Content-Type",
-      `multipart/form-data; boundary=${boundary}`,
-    );
-
-    // 最后，发送数据。
-    XHR.send(data);
+    console.log(await response.json());
+  } catch (e) {
+    console.error(e);
   }
+}
 
-  // 获取表单元素
-  const form = document.getElementById("theForm");
-
-  // 添加 submit 事件处理器
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-    sendData();
-  });
+// 接管表单提交
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  sendData();
 });
 ```
 
-这里是实时演示效果：
-
-{{EmbedLiveSample("处理二进制数据", "100%", 150)}}
-
-## 总结
+为表单元素添加了一个提交事件处理程序。首先调用 {{domxref("Event.preventDefault()", "preventDefault()")}} 阻止浏览器内置的表单提交，这样我们就可以接手了。然后，调用 `sendData()` 来获取表单元素并将其传递给 `FormData` 构造函数。
 
-取决于不同的浏览器和正在处理数据的类型，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫地在旧浏览器上通过 [polyfill](https://github.com/jimmywarting/FormData) 使用它：
+之后，我们使用 `fetch()` 以 HTTP `POST` 请求的形式发送 `FormData` 实例。
 
 ## 参见
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
index dc040f6804d2b0..3ac3e2271ff96f 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
@@ -65,7 +65,7 @@ _唯一不变的就是变化。_
 
 ### HTTP
 
-超文本传输协议（Hypertext Transfer Protocol，[HTTP](/zh-CN/docs/Web/HTTP/Basics_of_HTTP)），它允许 Web 浏览器与 Web 服务器（存储网站的位置）进行通信。典型的通信就像这样
+超文本传输协议（Hypertext Transfer Protocol，[HTTP](/zh-CN/docs/Web/HTTP)），它允许 Web 浏览器与 Web 服务器（存储网站的位置）进行通信。典型的通信就像这样
 
 ```plain
 "你好 Web 服务器。你可以给我用于渲染 bbc.co.uk 的文件吗？"
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
new file mode 100644
index 00000000000000..8a7393724e166e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
@@ -0,0 +1,89 @@
+---
+title: extension
+slug: Mozilla/Add-ons/WebExtensions/API/extension
+l10n:
+  sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+有关插件的工具；获取你的插件的资源包的 URL；获取你的插件页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象；获取各种设置的值。
+
+> **备注：** **该模块中的消息 API 被弃用**，取而代之的是 [`runtime`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/runtime) 模块中相应的 API。
+
+## 类型
+
+- {{WebExtAPIRef("extension.ViewType")}}
+  - : 用于指定要获取的视图类型的字符串。
+
+## 属性
+
+- {{WebExtAPIRef("extension.lastError")}} {{deprecated_inline}}
+  - : 如果异步扩展 API 中出现错误，将在回调的调用中将该属性设置为那一错误。若没有发生错误，`lastError` 将为 {{jsxref("undefined")}}。
+- {{WebExtAPIRef("extension.inIncognitoContext")}}
+  - : 对在隐身模式标签中运行的内容脚本、在隐身模式进程中运行的扩展页面返回 `true`。（仅适用于 `incognito_behavior` 取值为“`split`”的扩展。）
+
+## 函数
+
+- {{WebExtAPIRef("extension.getBackgroundPage()")}}
+  - : 返回当前扩展内运行的后台页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象。如果扩展不存在后台页面，则返回 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)。
+- {{WebExtAPIRef("extension.getExtensionTabs()")}} {{deprecated_inline}}
+  - : 返回当前扩展内运行的每个标签的 JavaScript [`Window`](/zh-CN/docs/Web/API/Window) 对象的数组。
+- {{WebExtAPIRef("extension.getURL()")}} {{deprecated_inline}}
+  - : 将扩展安装目录内的相对路径转换为完全限定的 URL。
+- {{WebExtAPIRef("extension.getViews()")}}
+  - : 返回当前扩展内运行的每个页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象的数组。
+- {{WebExtAPIRef("extension.isAllowedIncognitoAccess()")}}
+  - : 获取扩展对隐身模式的访问权限的状态（由用户控制的“_允许在隐身模式中_”复选框确定）。
+- {{WebExtAPIRef("extension.isAllowedFileSchemeAccess()")}}
+  - : 获取扩展对 `file://` 协议的访问权限的状态（由用户控制的“_允许访问文件 URL_”复选框确定）。
+- {{WebExtAPIRef("extension.sendRequest()")}} {{deprecated_inline}}
+  - : 发送单一请求到扩展中的其他监听器。
+- {{WebExtAPIRef("extension.setUpdateUrlData()")}}
+  - : 设置扩展的更新 URL 中使用的 ap CGI 参数的值。对于托管在浏览器供应商商店中的扩展，此值将被忽略。
+
+## 事件
+
+- {{WebExtAPIRef("extension.onRequest")}} {{deprecated_inline}}
+  - : 当从扩展进程或内容脚本发送请求时触发。
+- {{WebExtAPIRef("extension.onRequestExternal")}} {{deprecated_inline}}
+  - : 当从另一个扩展发送请求时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
+
+> [!NOTE]
+> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension/) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.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/firefox/releases/65/index.md b/files/zh-cn/mozilla/firefox/releases/65/index.md
index 79579fef50e787..7011828d6f92e2 100644
--- a/files/zh-cn/mozilla/firefox/releases/65/index.md
+++ b/files/zh-cn/mozilla/firefox/releases/65/index.md
@@ -57,9 +57,9 @@ _无变化。_
 #### Service workers
 
 - The {{domxref("Response.redirect()")}} method now correctly throws a `TypeError` if a non-valid URL is specified as the first parameter ([Firefox bug 1503276](https://bugzil.la/1503276)).
-- The {{domxref("ServiceWorkerContainer.register()")}} and {{domxref("WorkerGlobalScope.importScripts()")}} (when used by a service worker) methods will now accept any files with a valid [JavaScript MIME type](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types) ([Firefox bug 1354577](https://bugzil.la/1354577)).
+- The {{domxref("ServiceWorkerContainer.register()")}} and {{domxref("WorkerGlobalScope.importScripts()")}} (when used by a service worker) methods will now accept any files with a valid [JavaScript MIME type](/zh-CN/docs/Web/HTTP/MIME_types#textjavascript) ([Firefox bug 1354577](https://bugzil.la/1354577)).
 
-#### Media, Web Audio, 和 WebRTC
+#### Media、Web Audio 和 WebRTC
 
 - 增加了对 [WebP](/zh-CN/docs/Glossary/webp) Google 压缩图像文件的支持 ([bug 1294490](https://bugzilla.mozilla.org/show_bug.cgi?id=1294490)) 。
 
diff --git a/files/zh-cn/web/api/createimagebitmap/index.md b/files/zh-cn/web/api/createimagebitmap/index.md
deleted file mode 100644
index 0c4ff5eef8efa2..00000000000000
--- a/files/zh-cn/web/api/createimagebitmap/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: self.createImageBitmap()
-slug: Web/API/createImageBitmap
----
-
-{{APIRef("Canvas API")}}
-
-**`createImageBitmap`** 方法存在 windows 和 workers 中。它接受各种不同的图像来源，并返回一个{{domxref("Promise")}}, resolve 为{{domxref("ImageBitmap")}}. 可选地参数，图像被剪裁成自（sx，sy）且宽度为 sw，高度为 sh 的像素的矩形。
-
-## 语法
-
-```js-nolint
-createImageBitmap(image)
-createImageBitmap(image, options)
-createImageBitmap(image, sx, sy, sw, sh)
-createImageBitmap(image, sx, sy, sw, sh, options)
-```
-
-### 参数
-
-- `image`
-  - : 一个图像源，可以是一个 {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, 或 {{domxref("OffscreenCanvas")}} 对象。
-- `sx`
-  - : 裁剪点 x 坐标。
-- `sy`
-  - : 裁剪点 y 坐标。
-- `sw`
-  - : 裁剪宽度，值可为负数。
-- `sh`
-  - : 裁剪高度，值可为负数。
-- options {{optional_inline}}
-
-  - : 为其设置选项的对象。可用的选项是：
-
-    - `imageOrientation`: 指示图像是按原样呈现还是垂直翻转。`none` (默认不翻转) 或 `flipY`.
-    - `premultiplyAlpha`: 指示位图颜色通道由 alpha 通道预乘。选择其一：`none`, `premultiply`, 或 `default` (默认).
-    - `colorSpaceConversion`: 指示图像是否使用色彩空间转换进行解码。`none` 或 `default` (默认). The value `default` indicates that implementation-specific behavior is used.
-    - `resizeWidth`: 指示新宽度的长整数。
-    - `resizeHeight`: 指示新高度的长整数。
-    - `resizeQuality`: 指定图像缩放算法。选择其一`pixelated`, `low` (默认), `medium`, 或 `high`.
-
-### 返回值
-
-返回一个解决 ImageBitmap 的{{domxref("Promise")}} ，当 Promise 成功时 resolves 接收一个包含所得到的矩形的位图数据{{domxref("ImageBitmap")}}。
-
-## 示例
-
-```js
-var canvas = document.getElementById("myCanvas"),
-  ctx = canvas.getContext("2d"),
-  image = new Image();
-
-image.onload = function () {
-  Promise.all([
-    createImageBitmap(this, 0, 0, 32, 32),
-    createImageBitmap(this, 32, 0, 32, 32),
-  ]).then(function (sprites) {
-    ctx.drawImage(sprites[0], 0, 0);
-    ctx.drawImage(sprites[1], 32, 32);
-  });
-};
-
-image.src = "sprites.png";
-```
-
-## 规范
-
-{{Specifications}}
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 参见
-
-- {{domxref("CanvasRenderingContext2D.drawImage()")}}
-- {{domxref("ImageData")}}
diff --git a/files/zh-cn/web/api/datatransferitem/type/index.md b/files/zh-cn/web/api/datatransferitem/type/index.md
index 856c45cb33c44c..5016fdb19f9bc6 100644
--- a/files/zh-cn/web/api/datatransferitem/type/index.md
+++ b/files/zh-cn/web/api/datatransferitem/type/index.md
@@ -2,7 +2,7 @@
 title: DataTransferItem：type 属性
 slug: Web/API/DataTransferItem/type
 l10n:
-  sourceCommit: b5583a21df2aeaebddd7e0eeb58ff690b013546b
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{APIRef("HTML Drag and Drop API")}}
@@ -59,4 +59,4 @@ function dropHandler(ev) {
 ## 参见
 
 - {{domxref("DataTransfer.types()")}}
-- [常见 MIME 类型列表](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
+- [常见 MIME 类型列表](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)
diff --git a/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
new file mode 100644
index 00000000000000..7408b10474b270
--- /dev/null
+++ b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
@@ -0,0 +1,230 @@
+---
+title: 使用 Document Picture-in-Picture API
+slug: Web/API/Document_Picture-in-Picture_API/Using
+l10n:
+  sourceCommit: d0b23f3f26637aa405ee9ee0a0892fc6e9b742ef
+---
+
+{{SeeCompatTable}}{{DefaultAPISidebar("Document Picture-in-Picture API")}}{{securecontext_header}}
+
+本指南提供了 {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 典型用法的详细指导。
+
+> [!NOTE]
+> 你可以在 [Document Picture-in-Picture API 示例](https://mdn.github.io/dom-examples/document-picture-in-picture/)中看到特性演示（另请参阅完整的[源代码](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture)）。
+
+## 示例 HTML
+
+以下 HTML 设置了一个基本的视频播放器。
+
+```html
+<div id="container">
+  <p class="in-pip-message">视频播放器当前位于单独的画中画窗口中。</p>
+  <div id="player">
+    <video
+      src="assets/bigbuckbunny.mp4"
+      id="video"
+      controls
+      width="320"></video>
+
+    <div id="credits">
+      <a href="https://peach.blender.org/download/" target="_blank">
+        Blender 的视频
+      </a>
+      ;
+      <a href="https://peach.blender.org/about/" target="_blank">
+        许可 CC-BY 3.0
+      </a>
+    </div>
+
+    <div id="controlbar">
+      <p class="no-picture-in-picture">
+        Document Picture-in-Picture API 不可用
+      </p>
+
+      <p></p>
+    </div>
+  </div>
+</div>
+```
+
+## 特性检测
+
+要检查是否支持 Document Picture-in-Picture API，你可以测试 `window` 上的 `documentPictureInPicture` 属性是否可用：
+
+```js
+if ("documentPictureInPicture" in window) {
+  document.querySelector(".no-picture-in-picture").remove();
+
+  const togglePipButton = document.createElement("button");
+  togglePipButton.textContent = "切换画中画";
+  togglePipButton.addEventListener("click", togglePictureInPicture, false);
+
+  document.getElementById("controlbar").appendChild(togglePipButton);
+}
+```
+
+如果可用，我们将删除“Document Picture-in-Picture API 不可用”消息，并添加 {{htmlelement("button")}} 元素以在文档画中画窗口中打开视频播放器。
+
+## 打开画中画窗口
+
+以下 JavaScript 调用 {{domxref("DocumentPictureInPicture.requestWindow", "window.documentPictureInPicture.requestWindow()")}} 打开一个空白的画中画窗口。返回的 {{jsxref("Promise")}} 兑现画中画 {{domxref("Window")}} 对象。使用 {{domxref("Element.append()")}} 将视频播放器移动到该窗口，然后我们显示消息通知用户它已被移动。
+
+`requestWindow()` 的 `width` 和 `height` 选项将画中画窗口设置为所需大小。如果选项值太大或太小而无法适应用户友好的窗口大小，浏览器可能会限制选项值。
+
+```js
+async function togglePictureInPicture() {
+  // 如果已经打开画中画窗口，则提前返回
+  if (window.documentPictureInPicture.window) {
+    return;
+  }
+
+  // 打开画中画窗口。
+  const pipWindow = await window.documentPictureInPicture.requestWindow({
+    width: videoPlayer.clientWidth,
+    height: videoPlayer.clientHeight,
+  });
+
+  // ...
+
+  // 将播放器移至画中画窗口。
+  pipWindow.document.body.append(videoPlayer);
+
+  // 显示一条消息表明它已被移动
+  inPipMessage.style.display = "block";
+}
+```
+
+## 将样式表复制到画中画窗口
+
+要从原始窗口复制所有 CSS 样式表，请循环遍历文档中明确链接或嵌入的所有样式表（通过 {{domxref("Document.styleSheets")}}），然后将其附加到画中画窗口。请注意，这是一次性复制。
+
+```js
+// ...
+
+// 从初始文档复制样式表，以便播放器看起来相同。
+[...document.styleSheets].forEach((styleSheet) => {
+  try {
+    const cssRules = [...styleSheet.cssRules]
+      .map((rule) => rule.cssText)
+      .join("");
+    const style = document.createElement("style");
+
+    style.textContent = cssRules;
+    pipWindow.document.head.appendChild(style);
+  } catch (e) {
+    const link = document.createElement("link");
+
+    link.rel = "stylesheet";
+    link.type = styleSheet.type;
+    link.media = styleSheet.media;
+    link.href = styleSheet.href;
+    pipWindow.document.head.appendChild(link);
+  }
+});
+
+// ...
+```
+
+## 画中画模式下目标样式
+
+{{cssxref("@media/display-mode", "display-mode")}} [媒体特性](/zh-CN/docs/Web/CSS/@media#媒体特性) 的 `picture-in-picture` 值允许开发人员根据文档是否以画中画模式显示来将 CSS 应用于文档。基本用法如下：
+
+```css
+@media (display-mode: picture-in-picture) {
+  body {
+    background: red;
+  }
+}
+```
+
+仅当以画中画模式显示时，此代码片段才会将文档 `<body>` 的背景变为红色。
+
+在[我们的演示](https://mdn.github.io/dom-examples/document-picture-in-picture/)中，我们将 `display-mode: picture-in-picture` 值与 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 媒体特性相结合，以根据用户的配色方案偏好创建仅当应用以画中画模式显示时才应用的明暗配色方案。
+
+```css
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
+  body {
+    background: antiquewhite;
+  }
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
+  body {
+    background: #333;
+  }
+
+  a {
+    color: antiquewhite;
+  }
+}
+```
+
+## 处理画中画窗口关闭时的情况
+
+当第二次按下按钮时，切换画中画窗口再次关闭的代码如下所示：
+
+```js
+inPipMessage.style.display = "none";
+playerContainer.append(videoPlayer);
+window.documentPictureInPicture.window.close();
+```
+
+在这里，我们恢复 DOM 更改——隐藏消息并将视频播放器放回主应用窗口中的播放器容器中。我们还使用 {{domxref("Window.close()")}} 方法以编程方式关闭画中画窗口。
+
+但是，你还需要考虑用户通过按下窗口本身上浏览器提供的关闭（X）按钮来关闭画中画窗口的情况。你可以通过使用 [`pagehide`](/zh-CN/docs/Web/API/Window/pagehide_event) 事件检测窗口何时关闭来处理这种情况：
+
+```js
+pipWindow.addEventListener("pagehide", (event) => {
+  inPipMessage.style.display = "none";
+  playerContainer.append(videoPlayer);
+});
+```
+
+## 监听网站何时进入画中画模式
+
+监听 `DocumentPictureInPicture` 实例上的 {{domxref("DocumentPictureInPicture.enter_event", "enter")}} 事件，了解画中画窗口何时打开。
+
+在我们的演示中，我们使用 `enter` 事件向画中画窗口添加静音切换按钮：
+
+```js
+documentPictureInPicture.addEventListener("enter", (event) => {
+  const pipWindow = event.window;
+  console.log("视频播放器已进入画中画窗口");
+
+  const pipMuteButton = pipWindow.document.createElement("button");
+  pipMuteButton.textContent = "静音";
+  pipMuteButton.addEventListener("click", () => {
+    const pipVideo = pipWindow.document.querySelector("#video");
+    if (!pipVideo.muted) {
+      pipVideo.muted = true;
+      pipMuteButton.textContent = "取消静音";
+    } else {
+      pipVideo.muted = false;
+      pipMuteButton.textContent = "静音";
+    }
+  });
+
+  pipWindow.document.body.append(pipMuteButton);
+});
+```
+
+> **备注：** {{domxref("DocumentPictureInPictureEvent")}} 事件对象包含一个 `window` 属性，用于访问画中画窗口。
+
+## 访问元素并处理事件
+
+你可以通过多种不同的方式访问画中画窗口中的元素：
+
+- {{domxref("DocumentPictureInPicture.requestWindow()")}} 方法返回的 {{domxref("Window")}} 实例，如上所示。
+- 通过 {{domxref("DocumentPictureInPictureEvent")}} 事件对象的 `window` 属性（在 {{domxref("DocumentPictureInPicture.enter_event", "enter")}} 事件上），如上所示。
+- 通过 {{domxref("DocumentPictureInPicture.window")}} 属性：
+
+```js
+const pipWindow = window.documentPictureInPicture.window;
+if (pipWindow) {
+  // 使画中画窗口中播放的视频静音。
+  const pipVideo = pipWindow.document.querySelector("#video");
+  pipVideo.muted = true;
+}
+```
+
+一旦获得了对画中画 `window` 实例的引用，你就可以操作 DOM（例如创建按钮）并响应用户输入事件（例如 [`click`](/zh-CN/docs/Web/API/Element/click_event) 事件），就像在常规浏览器窗口上下文中正常执行一样。
diff --git a/files/zh-cn/web/api/file/index.md b/files/zh-cn/web/api/file/index.md
index 8dbaf7f9afe65e..7e3eb3a671dbbd 100644
--- a/files/zh-cn/web/api/file/index.md
+++ b/files/zh-cn/web/api/file/index.md
@@ -2,7 +2,7 @@
 title: File
 slug: Web/API/File
 l10n:
-  sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b
+  sourceCommit: 58d79e9c2206e0a604cd4d7f6fba5181262af420
 ---
 
 {{APIRef("File API")}}{{AvailableInWorkers}}
@@ -11,7 +11,13 @@ l10n:
 
 `File` 对象通常从用户使用 {{HTMLElement("input")}} 元素选择文件返回的 {{DOMxRef("FileList")}} 对象中检索，或者从拖放操作返回的 {{DOMxRef("DataTransfer")}} 对象中检索。
 
-`File` 对象是一种特定类型的 {{DOMxRef("Blob")}}，并且可以在 Blob 可以使用的任何上下文中使用。特别是，{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{domxref("Window/fetch", "fetch()")}} 方法的 [`body`](/zh-CN/docs/Web/API/RequestInit#body) 选项和 {{DOMxRef("XMLHttpRequest.send()")}} 都可以接收 `Blob` 对象和 `File` 对象。
+`File` 对象是一种特定类型的 {{DOMxRef("Blob")}}，并且可以在 Blob 可以使用的任何上下文中使用。特别地，以下 API 都接受 `Blob` 对象和 `File` 对象：
+
+- {{DOMxRef("FileReader")}}
+- {{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}
+- {{DOMxRef("Window.createImageBitmap()")}} 和 {{DOMxRef("WorkerGlobalScope.createImageBitmap()")}}
+- {{domxref("Window/fetch", "fetch()")}} 方法的 [`body`](/zh-CN/docs/Web/API/RequestInit#body) 选项
+- {{DOMxRef("XMLHttpRequest.send()")}}
 
 参见[在 Web 应用程序使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)了解更多信息和例子。
 
diff --git a/files/zh-cn/web/api/imagebitmap/index.md b/files/zh-cn/web/api/imagebitmap/index.md
index 061a63f0243333..af699517edd09d 100644
--- a/files/zh-cn/web/api/imagebitmap/index.md
+++ b/files/zh-cn/web/api/imagebitmap/index.md
@@ -5,7 +5,7 @@ slug: Web/API/ImageBitmap
 
 {{APIRef("Canvas API")}}
 
-**`ImageBitmap`** 接口表示能够被绘制到 {{HTMLElement("canvas")}} 上的位图图像，具有低延迟的特性。运用 {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}} 工厂方法模式，它可以从多种源中生成。 `ImageBitmap`提供了一种异步且高资源利用率的方式来为 WebGL 的渲染准备基础结构。
+**`ImageBitmap`** 接口表示能够被绘制到 {{HTMLElement("canvas")}} 上的位图图像，具有低延迟的特性。运用 {{domxref("Window.createImageBitmap()")}} 或 {{domxref("WorkerGlobalScope.createImageBitmap()")}} 工厂方法模式，它可以从多种源中生成。`ImageBitmap` 提供了一种异步且高资源利用率的方式来为 WebGL 的渲染准备基础结构。
 
 ## 属性
 
@@ -29,7 +29,8 @@ slug: Web/API/ImageBitmap
 
 ## 参见
 
-- {{domxref("ImageBitmapFactories.createImageBitmap()")}}
+- {{domxref("Window.createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.createImageBitmap()")}}
 - {{domxref("CanvasRenderingContext2D.drawImage()")}}
 - {{domxref("WebGLRenderingContext.texImage2D()")}}
-- {{domxref("OffScreenCanvas.transferToImageBitmap()")}}
+- {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
diff --git a/files/zh-cn/web/api/keyboard/index.md b/files/zh-cn/web/api/keyboard/index.md
new file mode 100644
index 00000000000000..7149e0c5661a93
--- /dev/null
+++ b/files/zh-cn/web/api/keyboard/index.md
@@ -0,0 +1,65 @@
+---
+title: Keyboard
+slug: Web/API/Keyboard
+l10n:
+  sourceCommit: d2dfabf734bc4dbba589eae6f40227b9b2068adc
+---
+
+{{SeeCompatTable}}{{APIRef("Keyboard API")}}{{securecontext_header}}
+
+{{domxref("Keyboard API", "", "", "nocode")}} 的 **`Keyboard`** 接口提供检索键盘布局图和切换从物理键盘捕获按键的功能。
+
+在 [UI 事件 KeyboardEvent 代码值](https://www.w3.org/TR/uievents-code/#key-alphanumeric-writing-system)规范中可以找到有效的代码值列表。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_还从其父接口 {{DOMxRef("EventTarget")}} 继承属性。_
+
+## 实例方法
+
+_还从其父接口 {{DOMxRef("EventTarget")}} 继承方法。_
+
+- {{domxref('Keyboard.getLayoutMap()')}} {{experimental_inline}}
+  - : 返回一个 {{jsxref('Promise')}}，兑现 {{domxref('KeyboardLayoutMap')}} 实例，该实例是一个类 map 对象，具有检索与特定物理键关联的字符串的功能。
+- {{domxref('Keyboard.lock()')}} {{experimental_inline}}
+  - : 返回一个 {{jsxref('Promise')}}，在启用对物理键盘上任意或所有按键的按键捕获后兑现。
+- {{domxref('Keyboard.unlock()')}} {{experimental_inline}}
+  - : 解锁 `lock()` 方法捕获的所有键并同步返回。
+
+## 示例
+
+### 键盘映射
+
+下面的示例说明如何获取与英语 QWERTY 键盘上“W”键对应的键关联的位置或布局特定字符串。
+
+```js
+if (navigator.keyboard) {
+  const keyboard = navigator.keyboard;
+  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
+    const upKey = keyboardLayoutMap.get("KeyW");
+    window.alert(`按 ${upKey} 向上移动。`);
+  });
+} else {
+  // 做点别的事。
+}
+```
+
+### 键盘锁定
+
+以下示例捕获 <kbd>W</kbd>、<kbd>A</kbd>、<kbd>S</kbd> 和 <kbd>D</kbd> 键，并使用包含每个键的键代码属性值的列表调用 `lock()`：
+
+```js
+navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
+```
+
+无论按键时使用了哪些修饰键，此操作都会捕获这些键。假设采用标准的美国 QWERTY 布局，注册 `KeyW` 可确保 <kbd>W</kbd>、<kbd>Shift+W</kbd>、<kbd>Control+W</kbd>、<kbd>Control+Shift+W</kbd> 以及所有其他带有 <kbd>W</kbd> 的修饰键组合都发送到应用。这同样适用于 `KeyA`、`KeyS` 和 `KeyD`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md b/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md
index 535e4c8433e730..2795916b01cdc6 100644
--- a/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md
+++ b/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md
@@ -2,7 +2,7 @@
 title: NDEFMessage：NDEFMessage() 构造函数
 slug: Web/API/NDEFMessage/NDEFMessage
 l10n:
-  sourceCommit: 7793383ec44ad25f522b96cda00f8a745b27d865
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{SecureContext_Header}}{{APIRef("Web NFC API")}}{{SeeCompatTable}}
@@ -30,7 +30,7 @@ new NDEFMessage(records)
     - `lang` {{optional_inline}}
       - : 根据 {{RFC(5646, "用于标识语言的标记（又称 BCP 47）")}}规定的有效语言标签。
     - `mediaType` {{optional_inline}}
-      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
     - `recordType`
 
       - : 指示存储在 `data` 中的数据类型的字符串。必须是以下值之一：
@@ -44,7 +44,7 @@ new NDEFMessage(records)
           - : 一个空的 {{domxref("NDEFRecord")}}。
 
         - `"mime"`
-          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
         - `"smart-poster"`
           - : 一个由 [NDEF-SMARTPOSTER](https://w3c.github.io/web-nfc/#bib-ndef-smartposter) 规范定义的智能海报。
         - `"text"`
diff --git a/files/zh-cn/web/api/ndefreader/write/index.md b/files/zh-cn/web/api/ndefreader/write/index.md
index 137864953edcac..217938df230c9c 100644
--- a/files/zh-cn/web/api/ndefreader/write/index.md
+++ b/files/zh-cn/web/api/ndefreader/write/index.md
@@ -2,7 +2,7 @@
 title: NDEFReader：write() 方法
 slug: Web/API/NDEFReader/write
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
@@ -20,7 +20,7 @@ write(message, options)
 
 - `message`
 
-  - : 要写入的消息，可以是字符串对象或字面量、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}，或者是记录数组。具有以下成员：
+  - : 要写入的消息，可以是字符串、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}，或者是记录数组。具有以下成员：
 
     - `data` {{optional_inline}}
       - : 包含要传输的数据；可以是字符串、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}} 或嵌套记录数组之一。
@@ -31,7 +31,7 @@ write(message, options)
     - `lang` {{optional_inline}}
       - : 根据 {{RFC(5646, "用于标识语言的标记（又称 BCP 47）")}}规定的有效语言标签。
     - `mediaType` {{optional_inline}}
-      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
     - `recordType`
 
       - : 指示存储在 `data` 中的数据类型的字符串。必须是以下值之一：
@@ -41,7 +41,7 @@ write(message, options)
         - `"empty"`
           - : 一个空的 {{domxref("NDEFRecord")}}。
         - `"mime"`
-          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
         - `"smart-poster"`
           - : 一个由 [NDEF-SMARTPOSTER](https://w3c.github.io/web-nfc/#bib-ndef-smartposter) 规范定义的智能海报。
         - `"text"`
@@ -64,7 +64,7 @@ write(message, options)
 
 一个 {{JSxRef("Promise")}}，当消息成功写入标签时兑现，或者在遇到硬件或权限错误时拒绝。
 
-## 异常
+### 异常
 
 此方法不抛出异常；相反，它会拒绝返回的 promise，并传入一个 {{domxref("DOMException")}}，其 `name` 属性是以下值之一：
 
diff --git a/files/zh-cn/web/api/permissions/index.md b/files/zh-cn/web/api/permissions/index.md
index a277033bdb522b..684cb7e671be3f 100644
--- a/files/zh-cn/web/api/permissions/index.md
+++ b/files/zh-cn/web/api/permissions/index.md
@@ -2,7 +2,7 @@
 title: Permissions
 slug: Web/API/Permissions
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 805d398f95c9d1ad8769e65d56bbfe2a31205021
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}
@@ -13,10 +13,6 @@ l10n:
 
 - {{domxref("Permissions.query","Permissions.query()")}}
   - : 返回给定 API 的用户权限状态。
-- {{domxref("Permissions.request","Permissions.request()")}} {{Experimental_Inline}}
-  - : 请求使用给定 API 的权限。目前任何浏览器都不支持此功能。
-- {{domxref("Permissions.requestAll","Permissions.requestAll()")}} {{Experimental_Inline}} {{Non-standard_Inline}}
-  - : 请求使用一组给定 API 的权限。目前任何浏览器都不支持此功能。
 - {{domxref("Permissions.revoke","Permissions.revoke()")}} {{Deprecated_Inline}}
   - : 撤消当前在给定 API 上设置的权限。
 
diff --git a/files/zh-cn/web/api/permissions/query/index.md b/files/zh-cn/web/api/permissions/query/index.md
index 81d68ff3f7f150..f062e813d1b3ba 100644
--- a/files/zh-cn/web/api/permissions/query/index.md
+++ b/files/zh-cn/web/api/permissions/query/index.md
@@ -2,13 +2,17 @@
 title: Permissions：query() 方法
 slug: Web/API/Permissions/query
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}
 
 {{domxref("Permissions")}} 接口的 **`query()`** 方法会返回全局作用域中用户权限的状态。
 
+用户权限名称在每个功能的各自规范中定义。不同浏览器版本支持的权限在 [`Permissions` 接口的兼容性数据](/zh-CN/docs/Web/API/Permissions#浏览器兼容性)中列出（另请参阅 [Firefox 值](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)、[Chromium 值](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)和 [WebKit 值](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)的相关源代码）。
+
+每个权限所控制的 API 在[权限 API](/zh-CN/docs/Web/API/Permissions_API) 概述主题中的[权限相关的 API](/zh-CN/docs/Web/API/Permissions_API#权限相关的_api) 中列出。
+
 ## 语法
 
 ```js-nolint
@@ -19,23 +23,24 @@ query(permissionDescriptor)
 
 - `permissionDescriptor`
 
-  - : 一个为 `query` 操作设置选项的对象，由一个以逗号分隔的键——值对列表组成。可用的选项有：
+  - : 设置 `query` 操作选项的对象。此描述符的可用选项取决于权限类型。所有权限都有一个名称：
 
     - `name`
-      - : 要查询权限的 API 名称。每个浏览器支持不同的值集。Firefox 的值在[这里](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)，Chromium 的值在[这里](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)，WebKit 的值在[这里](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)。
-    - `userVisibleOnly`
-      - : （仅推送，不被 Firefox 所支持——请参阅下面的“浏览器兼容性”部分）表示是否希望为每条消息显示通知或发送静默推送通知。默认为 `false`。
-    - `sysex`（仅限 MIDI）
-      - : 表示是否需要接收系统专有信息。默认为 `false`。
+      - : 包含要查询其权限的 API 名称的字符串，例如 `camera`、`bluetooth`、`camera`、`geolocation`（有关更完整的列表，请参阅 [`Permissions`](/zh-CN/docs/Web/API/Permissions#浏览器兼容性)）。如果浏览器不支持权限名称，则返回的 {{jsxref("Promise")}} 将使用 {{jsxref("TypeError")}} 拒绝。
+
+    对于 `push` 权限，你还可以指定：
+
+    - `userVisibleOnly` {{optional_inline}}
+      - : （仅推送，Firefox 不支持——请参阅下面的浏览器支持部分）表示你是否要为每条消息显示通知或能够发送静默推送通知。默认值为 `false`。
 
-> [!NOTE]
-> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+    对于 `midi` 权限，你还可以指定：
 
-> **备注：** `persistent-storage`权限允许根据 [Storage API](https://storage.spec.whatwg.org/) 使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）来进行存储。
+    - `sysex` {{optional_inline}}
+      - : 指示是否需要接收系统独有消息。默认值为 `false`。
 
 ### 返回值
 
-一个会兑现为 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。
+一个兑现为 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/permissions/revoke/index.md b/files/zh-cn/web/api/permissions/revoke/index.md
index 6535c7d1742d59..f2b72976e1b1bb 100644
--- a/files/zh-cn/web/api/permissions/revoke/index.md
+++ b/files/zh-cn/web/api/permissions/revoke/index.md
@@ -2,38 +2,43 @@
 title: Permissions：revoke() 方法
 slug: Web/API/Permissions/revoke
 l10n:
-  sourceCommit: afdbe078d7c0357430ff360538edafba3af5496d
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}{{deprecated_header}}
 
 {{domxref("Permissions")}} 接口的 **`revoke()`** 方法可将当前设置的权限还原为默认状态，即通常的 `prompt` 状态。该方法在全局 {{domxref("Permissions")}} 对象 {{domxref("navigator.permissions")}} 上调用。
 
+此方法已从主要权限 API 规范中删除，因为其用例不明确。权限由浏览器管理，当前权限模型不涉及网站开发人员能够强制请求或撤销权限。浏览器已以首选项形式提供此 API，但它不太可能达到标准轨道。有关更多上下文，请参阅[删除 `permissions.revoke()` 的原始讨论](https://github.com/w3c/permissions/issues/46)。
+
 ## 语法
 
 ```js-nolint
-revoke(descriptor)
+revoke(permissionDescriptor)
 ```
 
 ### 参数
 
-- `descriptor`
-  - : 一个基于 `PermissionDescriptor` 字典的对象，用于设置由逗号分隔的键——值对列表组成的操作选项。可用的选项有：
+- `permissionDescriptor`
+
+  - : 设置 `revoke` 操作选项的对象。此描述符的可用选项取决于权限类型。所有权限都有一个名称：
+
     - `name`
-      - : 要查询其权限的 API 的名称。每个浏览器支持不同的值集。你可以查阅 [Firefox 的值](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)、[Chromium 的值](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)、[WebKit 的值](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)。
-    - `userVisibleOnly`
-      - : （仅限推送，Firefox 不支持——请参阅下面的[浏览器兼容性](#浏览器兼容性)部分）表示是否要为每条信息显示通知，还是能够发送静默推送通知。默认为 `false`。
-    - `sysex`（仅限 MIDI）
-      - : 表示是否需要接收系统专用消息。默认为 `false`。
+      - : 包含要查询其权限的 API 名称的字符串。如果浏览器不支持该权限名称，则返回的 {{jsxref("Promise")}} 将使用 {{jsxref("TypeError")}} 拒绝。
+
+    对于 `push` 权限，你还可以指定：
+
+    - `userVisibleOnly` {{optional_inline}}
+      - : （仅推送，Firefox 不支持——请参阅下面的浏览器支持部分）表示你是否要为每条消息显示通知或能够发送静默推送通知。默认值为 `false`。
 
-> [!NOTE]
-> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+    对于 `midi` 权限，你还可以指定：
 
-> **备注：** `persistent-storage` 权限允许使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）进行存储，如 [Storage API](https://storage.spec.whatwg.org/) 所述。
+    - `sysex` {{optional_inline}}
+      - : 指示是否需要接收系统独有消息。默认值为 `false`。
 
 ### 返回值
 
-一个 {{jsxref("Promise")}}，其会在调用兑现处理器时传入指示请求的结果的 {{domxref("PermissionStatus")}} 对象。
+使用 {{domxref("PermissionStatus")}} 对象调用其兑现处理器以指示请求的结果的 {{jsxref("Promise")}}。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/permissions_api/index.md b/files/zh-cn/web/api/permissions_api/index.md
index f053a1393550d3..a922709ebb0489 100644
--- a/files/zh-cn/web/api/permissions_api/index.md
+++ b/files/zh-cn/web/api/permissions_api/index.md
@@ -2,29 +2,48 @@
 title: 权限 API
 slug: Web/API/Permissions_API
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{DefaultAPISidebar("Permissions API")}}{{AvailableInWorkers}}
 
-**权限 API**（Permissions API）提供一致的编程方式来查询归因于当前上下文的 API 权限的状态。例如，权限 API 可用于确定是否已授予或拒绝访问特定 API 的权限，或者是否需要特定的用户权限。
-
-请注意，此 API 的权限有效地聚合了上下文的所有安全限制，包括在安全上下文中使用 API 的任何要求，[Permissions-Policy](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy) 应用于文档的限制以及用户提示。因此，例如，如果 API 受到权限策略的限制，则返回的权限将被“拒绝”，并且不会提示用户访问。
+**权限 API** 提供了一种一致的编程方式来查询当前上下文（例如网页或 worker）的 API 权限状态。例如，它可用于确定访问特定功能或 API 的权限是否已被授予、被拒绝或需要特定用户权限。
 
 ## 概念和用法
 
-历史上不同的 API 对自己的权限的处理方式不一致——例如，[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 提供了自己的方法来请求权限和检查权限状态，而 [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 没有。权限 API 提供的工具允许开发者在使用权限时实现一致且更好的用户体验。
+历史上不同的 API 对自己的权限的处理方式不一致——例如，[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 提供了自己的方法来请求权限和检查权限状态，而 [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 没有。权限 API 提供的工具允许开发者在使用权限时实现一致的用户体验。
+
+此 API 的权限有效地汇总了上下文的所有安全限制，包括在安全上下文中使用 API 的任何要求、应用于文档的 [Permissions-Policy](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy) 限制、用户交互要求和用户提示。因此，例如，如果 API 受到权限策略的限制，则返回的权限将会为 `denied`，并且不会提示用户访问。
+
+`permissions` 属性已在 {{domxref("Navigator")}} 对象上可用，在标准浏览上下文和 worker 上下文中均可用（{{domxref("WorkerNavigator")}}——因此可在 worker 内进行权限检查），并返回 {{domxref("Permissions")}} 对象，该对象提供对权限 API 功能的访问。
+
+一旦你有了这个对象，你就可以使用 {{domxref("Permissions.query()")}} 方法返回一个通过 {{domxref("PermissionStatus")}} 兑现特定 API 的 promise。
+
+### 请求权限
+
+如果权限状态为 `prompt`，则用户必须确认提示以授予对该特性的访问权限。
+
+触发此提示的机制将取决于特定 API——它未定义为权限 API 的一部分。通常，触发器是调用方法来访问或打开该特性的代码，或者注册随后将访问该特性的通知的代码。
+
+请注意，并非所有功能都需要提示。权限可能由 `Permission Policy` 授予，由{{glossary("transient activation", "瞬态激活")}}隐式授予，或通过其他机制授予。
+
+### 撤销权限
 
-`permissions` 属性已在标准浏览上下文和 worker 上下文（{{domxref("WorkerNavigator")}} ——因此可以在 worker 内部进行权限检查）中的 {{domxref("Navigator")}} 对象上可用，并返回一个提供对权限 API 功能的访问的 {{domxref("Permissions")}} 对象。
+权限撤销不由 API 管理。更具体地说，{{domxref("Permissions.revoke()")}} 方法曾被提出，但此后已从实施该方法的浏览器中删除。
 
-获得此对象后，你可以使用 {{domxref("Permissions.query()")}} 方法返回一个 promise，该 promise 为特定的 API 解析 {{domxref("PermissionStatus")}} 对象。请注意，如果状态为 `prompt`，则用户必须在访问该功能之前确认提示，并且启动此提示的机制将取决于特定的 API——它并未定义为权限 API 的一部分。
+用户可以使用浏览器设置手动删除特定网站的权限：
+
+- **Firefox**：_菜单 > 设置 > 隐私和安全 > 权限_（然后选择感兴趣的权限的**设置**按钮）。
+- **Chrome**：_菜单 > 设置 > 显示高级设置_。在*隐私*部分中，单击*内容设置*。在出现的对话框中，找到*位置*部分并选择*当网站尝试... 时询问*。最后，单击*管理例外*并删除你授予你感兴趣的网站的权限。
 
 ### 权限相关的 API
 
 并非所有 API 的权限状态都可以通过权限 API 查询。权限相关的 API 的非详尽列表包括：
 
 - [Background Synchronization API](/zh-CN/docs/Web/API/Background_Synchronization_API)：`background-sync`（应当总是被授予）
-- [Geolocation API](/zh-CN/docs/Web/API/Geolocation_API)：`geolocation`
+- [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API#安全考虑)：`clipboard-read`、`clipboard-write`
+- [Compute Pressure API](/zh-CN/docs/Web/API/Compute_Pressure_API)：`compute-pressure`
+- [Geolocation API](/zh-CN/docs/Web/API/Geolocation_API#security_considerations)：`geolocation`
 - [Local Font Access API](/zh-CN/docs/Web/API/Local_Font_Access_API)：`local-fonts`
 - [Media Capture and Streams API](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API)：`microphone`、`camera`
 - [Notifications API](/zh-CN/docs/Web/API/Notifications_API)：`notifications`
@@ -34,15 +53,10 @@ l10n:
 - [Sensor APIs](/zh-CN/docs/Web/API/Sensor_APIs)：`accelerometer`、`gyroscope`、`magnetometer`、`ambient-light-sensor`
 - [Storage Access API](/zh-CN/docs/Web/API/Storage_Access_API)：`storage-access`、`top-level-storage-access`
 - [Storage API](/zh-CN/docs/Web/API/Storage_API)：`persistent-storage`
+- [Web Bluetooth API](/zh-CN/docs/Web/API/Web_Bluetooth_API)：`bluetooth`
 - [Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)：`midi`
 - [Window Management API](/zh-CN/docs/Web/API/Window_Management_API)：`window-management`
 
-## 示例
-
-我们创建了一个名为 Location Finder 的简单示例。你可以[实时运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 GitHub 上查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。
-
-有关其工作原理的更多信息，请阅读我们的文章[使用权限 API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API)。
-
 ## 接口
 
 - {{domxref("Permissions")}}
@@ -55,6 +69,12 @@ l10n:
 - {{domxref("Navigator.permissions")}} 和 {{domxref("WorkerNavigator.permissions")}} {{ReadOnlyInline}}
   - : 分别用于访问主上下文和 worker 上下文的 {{domxref("Permissions")}} 对象。
 
+## 示例
+
+我们创建了一个名为 Location Finder 的简单示例。你可以[实时运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)、[在 GitHub 上查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)，或者在我们的文章[使用权限 API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API)中阅读有关其工作原理的更多信息。
+
+[`Permissions.query()` 示例](/zh-CN/docs/Web/API/Permissions/query#测试对不同权限的支持)也展示了在当前浏览器上测试大多数权限并记录结果的代码。
+
 ## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
index 276fbb9d77a124..2cc53eec70f687 100644
--- a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
+++ b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
@@ -1,27 +1,25 @@
 ---
-title: 使用 Permissions API
+title: 使用权限 API
 slug: Web/API/Permissions_API/Using_the_Permissions_API
 l10n:
-  sourceCommit: 3dbfd299e6f34873d6355bae4b12b5c1c69242f1
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{DefaultAPISidebar("Permissions API")}}
 
-本文提供了使用 W3C [Permissions API](/zh-CN/docs/Web/API/Permissions_API)——它提供了一种用于查询当前上下文的 API 权限授权状态的编程方式——的基本指南。
+本文提供了使用[权限 API](/zh-CN/docs/Web/API/Permissions_API)——它提供了一种用于查询当前上下文的 API 权限授权状态的编程方式——的基本指南。
 
 ## 申请权限面临的困境
 
-惨淡的事实是，权限在 Web 开发中是令人厌恶却不得不面对的问题，对于开发者而言，处理它毫无乐趣。
+Web 上的权限是令人厌恶却不得不面对的问题，但对于开发人员来说，处理它们并不是一件有趣的事。
 
 由于历史原因，不同的 API 使用各自不同的方式来处理自己的权限──例如，[Notification API](/zh-CN/docs/Web/API/Notifications_API) 允许显式地检查权限状态和申请权限，然而，[Geolocation API](/zh-CN/docs/Web/API/Geolocation_API) 却不能。
 
-[Permissions API](/zh-CN/docs/Web/API/Permissions_API) 提供了一系列工具来让开发者在权限方面实现更好的用户体验。具体来说，开发人员可以使用 {{domxref("Permissions.query()")}} 来检查在当前上下文中使用特定 API 的权限是已授予、已拒绝还是需要通过提示获得特定用户权限。在主线程中查询权限是被[广泛支持](/zh-CN/docs/Web/API/Permissions_API#api.navigator.permissions)的，在 [Worker](/zh-CN/docs/Web/API/Permissions_API#api.workernavigator.permissions) 中也是如此（但有一个明显的例外）。
+[权限 API](/zh-CN/docs/Web/API/Permissions_API) 提供了一系列工具来让开发者在权限方面实现更好的用户体验。具体来说，开发人员可以使用 {{domxref("Permissions.query()")}} 来检查在当前上下文中使用特定 API 的权限是已授予、已拒绝还是需要通过提示获得特定用户权限。在主线程中查询权限是被[广泛支持](/zh-CN/docs/Web/API/Permissions_API#api.navigator.permissions)的，在 [Worker](/zh-CN/docs/Web/API/Permissions_API#api.workernavigator.permissions) 中也是如此（但有一个明显的例外）。
 
-许多 API 现在都能进行权限查询，例如 [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API)、[Notifications API](/zh-CN/docs/Web/API/Notifications_API)
+许多 API 现已启用权限查询，例如 [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API)、[Notifications API](/zh-CN/docs/Web/API/Notifications_API)、[Push API](/zh-CN/docs/Web/API/Push_API) 和 [Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)。[API 概览](/zh-CN/docs/Web/API/Permissions_API#权限相关的_api)中提供了许多权限启用的 API 列表，你可以在[此处的兼容性表](/zh-CN/docs/Web/API/Permissions_API#api.permissions)中了解浏览器支持情况。
 
-- [Push API](/zh-CN/docs/Web/API/Push_API)、[Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)。[API 概览](/zh-CN/docs/Web/API/Permissions_API#permission-aware_apis)中提供了许多启用权限的 API 的列表，你可以在[此处的兼容性表](/zh-CN/docs/Web/API/Permissions_API#api.permissions)中了解浏览器的支持情况。
-
-{{domxref("Permissions")}} 还有其他方法可用于专门请求使用 API 的权限和撤销权限，但这些方法已被弃用（非标准及不被广泛支持）。
+{{domxref("Permissions")}} 还有其他方法可用于专门请求使用 API 的权限和撤销权限，但这些方法已被弃用（非标准且不被广泛支持）。
 
 ## 一个简单的例子
 
@@ -29,22 +27,22 @@ l10n:
 
 ![英国格林菲尔德地图的截图](location-finder-with-permissions-api.png)
 
-你可以[在线运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 Github 查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。大部分代码都很简单且常见──所以接下来我们会重点关注和 Permissions API 有关的代码，如果你想学习其他部分，请自行阅读。
+你可以[在线运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 Github 查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。大部分代码都很简单且常见──所以接下来我们会重点关注和权限 API 有关的代码，如果你想学习其他部分，请自行阅读。
 
-### 访问 Permissions API
+### 访问权限 API
 
-浏览器现已包含 {{domxref("Navigator.permissions")}} 属性使开发者可以访问全局的 {{domxref("Permissions")}} 对象。这个对象最终将包含用来查询、申请和重置权限的方法，尽管，目前只有 {{domxref("Permissions.query()")}}; 我们接下来会讨论它。
+浏览器现已包含 {{domxref("Navigator.permissions")}} 属性使开发者可以访问全局的 {{domxref("Permissions")}} 对象。这个对象最终将包含用来查询、申请和撤销权限的方法，尽管，目前只有 {{domxref("Permissions.query()")}}；我们接下来会讨论它。
 
 ### 查询权限状态
 
-在我们的例子中，权限功能使用一个函数来处理— `handlePermission()`. 它开始于使用 {{domxref("Permissions.query()")}} 查询权限状态。根据 Promise resolve 后返回的 {{domxref("PermissionStatus")}} 对象的 {{domxref("PermissionStatus.state", "state")}} 属性，做出不同的处理：
+在我们的例子中，权限功能使用一个函数来处理——`handlePermission()`。它开始于使用 {{domxref("Permissions.query()")}} 查询权限状态。根据 Promise 兑现后返回的 {{domxref("PermissionStatus")}} 对象的 {{domxref("PermissionStatus.state", "state")}} 属性，做出不同的处理：
 
 - `"granted"`
-  - : "Enable Geolocation" 按钮被隐藏掉了，因为 Geolocation 已经被允许了，不需要这个按钮了。
+  - : “Enable Geolocation”按钮被隐藏掉了，因为 Geolocation 已经被允许了，不需要这个按钮了。
 - `"prompt"`
-  - : 隐藏 "Enable Geolocation" 按钮，因为用户会被（浏览器）引导授权 Geolocation 权限，所以它不需要了。接下来 {{domxref("Geolocation.getCurrentPosition()")}} 函数会运行，它会引导用户授权；如果用户授权了，它会继续执行 `revealPosition()` 函数（会显示地图）；如果用户拒绝了， `positionDenied()` 函数会被执行（这会让 "Enable Geolocation" 按钮显示出来）。
+  - : 隐藏“Enable Geolocation”按钮，因为用户会被（浏览器）引导授权 Geolocation 权限，所以它不需要了。接下来 {{domxref("Geolocation.getCurrentPosition()")}} 函数会运行，它会引导用户授权；如果用户授权了，它会继续执行 `revealPosition()` 函数（会显示地图）；如果用户拒绝了， `positionDenied()` 函数会被执行（这会让“Enable Geolocation”按钮显示出来）。
 - `"denied"`
-  - : "Enable Geolocation" 按钮会被显示（这段代码也需要放在这里，以防在页面首次加载时，这个源的权限状态就已经被设置为拒绝了）。
+  - : “Enable Geolocation”按钮会显示（这段代码也需要放在这里，以防在页面首次加载时，这个源的权限状态就已经被设置为拒绝了）。
 
 ```js
 function handlePermission() {
@@ -79,42 +77,8 @@ handlePermission();
 
 ### 权限描述符
 
-{{domxref("Permissions.query()")}} 方法接受一个 `PermissionDescriptor` 字典作为参数 — 它包含你感兴趣的 API 的名称。一些 API 有继承自默认的 `PermissionDescriptor` 的更加复杂的 `PermissionDescriptor`s 以包含更多额外的信息。例如，`PushPermissionDescriptor` 也包含一个比尔值指定 [`userVisibleOnly`](/zh-CN/docs/Web/API/PushManager/subscribe#Parameters) 是 `true` 还是 `false`.
-
-### 重置权限
-
-从 Firefox 47 开始，你可以使用 {{domxref("Permissions.revoke()")}} 方法重置现有权限。它的调用方式和 {{domxref("Permissions.query()")}} 方法几乎一模一样，区别是，当 promise 成功 resolve 时，它会让一个现有的权限恢复默认状态（通常是 `prompt`）。让我们看看 demo 中的代码：
-
-```js
-const revokeBtn = document.querySelector(".revoke");
-
-// ...
-
-revokeBtn.onclick = () => {
-  revokePermission();
-};
-
-// ...
-
-function revokePermission() {
-  navigator.permissions.revoke({ name: "geolocation" }).then((result) => {
-    report(result.state);
-  });
-}
-```
-
-> [!NOTE]
-> 自 Firefox 51 开始 `revoke()` 函数被默认关闭了，因为它的设计带来了 [Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) 中提到的问题。可以通过将设置项 `dom.permissions.revoke.enable` 置为 `true` 来重新开启它。
+{{domxref("Permissions.query()")}} 方法接受一个 `PermissionDescriptor` 字典作为参数——它包含你感兴趣的 API 的名称。一些 API 有更复杂的 `PermissionDescriptor` 结构，该结构继承自默认的 `PermissionDescriptor`，包含更多额外的信息。例如，`PushPermissionDescriptor` 也包含一个布尔值指定 [`userVisibleOnly`](/zh-CN/docs/Web/API/PushManager/subscribe#参数) 是 `true` 还是 `false`。
 
 ### 响应权限状态变化
 
 你会注意到，在上面的代码中，在 {{domxref("PermissionStatus")}} 对象上有一个 `onchange` 事件回调——这让我们可以对感兴趣的 API 的状态变化做出响应。目前，我们只是上报了状态的变化。
-
-## 总结和展望未来
-
-目前，较之我们已有的，这个 API 并没有提供太多额外内容。如果在浏览器询问时，我们选择了从不分享我们的位置，那么不使用浏览器菜单选项的话，我们将无法返回权限的初始状态（询问）：
-
-- **Firefox**：_工具 > 页面信息 > 权限 > 访问你的位置_。选择“总是询问”。
-- **Chrome**：_汉堡菜单 > 设置 > 显示高级设置。在隐私部分，点击“内容设置”。在出现的对话框中，找到“位置”部分，选择“当网站试图访问时询问”...最后，点击“管理特例”_，移除你对特定网站的授权。
-
-但是，未来浏览器会提供 `request()` 方法，他让我们可以在任何时候以编程的方式来请求权限。这非常值得期待尽快被实现。
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 72c1641884a944..ae18d47456d88b 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
@@ -21,7 +21,7 @@ slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
 - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
 - {{domxref("clearInterval()")}}
 - {{domxref("clearTimeout()")}}
-- {{domxref("createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}}
 - {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
 - {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
 - {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
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 803ec4411eb2e4..b681130fb8f65a 100644
--- a/files/zh-cn/web/api/web_workers_api/index.md
+++ b/files/zh-cn/web/api/web_workers_api/index.md
@@ -42,7 +42,7 @@ worker 在一个与当前 {{DOMxRef("window")}} 不同的全局上下文中运
 - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
 - {{domxref("clearInterval()")}}
 - {{domxref("clearTimeout()")}}
-- {{domxref("createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}}
 - {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
 - {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
 - {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
@@ -56,7 +56,7 @@ worker 在一个与当前 {{DOMxRef("window")}} 不同的全局上下文中运
 以下函数**仅**对 worker 可用：
 
 - {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}}（所有 worker）
-- {{domxref("DedicatedWorkerGlobalScope.postMessage")}}（仅限专用 worker）
+- {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}（仅限专用 worker）
 
 ### 支持的 Web API
 
diff --git a/files/zh-cn/web/api/window/beforeprint_event/index.md b/files/zh-cn/web/api/window/beforeprint_event/index.md
index 98df9a56991fba..238b96243ac2b2 100644
--- a/files/zh-cn/web/api/window/beforeprint_event/index.md
+++ b/files/zh-cn/web/api/window/beforeprint_event/index.md
@@ -5,7 +5,7 @@ slug: Web/API/Window/beforeprint_event
 
 {{APIRef}}
 
-当相关联的文档即将打印或关闭打印预览时，将触发 **`beforeprint`** 事件。
+**`beforeprint`** 事件会在相关联的文档即将打印或预览打印时触发。
 
 {{domxref("Window.afterprint_event", "afterprint")}} 和 `beforeprint` 事件允许页面在打印开始之前更改其内容（例如，也许是移除 banner）然后在打印完成后还原这些更改。一般来说，你应该更倾向于使用 [`@media print`](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries) CSS at 规则，但在某些情况下可能有必要使用这些事件。
 
diff --git a/files/zh-cn/web/api/window/createimagebitmap/index.md b/files/zh-cn/web/api/window/createimagebitmap/index.md
new file mode 100644
index 00000000000000..9c1cfd94b8c255
--- /dev/null
+++ b/files/zh-cn/web/api/window/createimagebitmap/index.md
@@ -0,0 +1,128 @@
+---
+title: Window：createImageBitmap() 方法
+slug: Web/API/Window/createImageBitmap
+l10n:
+  sourceCommit: 58d79e9c2206e0a604cd4d7f6fba5181262af420
+---
+
+{{APIRef("Canvas API")}}
+
+{{domxref("Window")}} 接口的 **`createImageBitmap`** 从给定的来源创建位图，也可以进行裁剪以包含源图像的一部分。它接受各种不同的图像来源，并返回一个会兑现 {{domxref("ImageBitmap")}} 的 {{domxref("Promise")}}。
+
+## 语法
+
+```js-nolint
+createImageBitmap(image)
+createImageBitmap(image, options)
+createImageBitmap(image, sx, sy, sw, sh)
+createImageBitmap(image, sx, sy, sw, sh, options)
+```
+
+### 参数
+
+- `image`
+  - : 图像源，可以是以下值之一：
+    - {{domxref("HTMLImageElement")}}
+    - {{domxref("SVGImageElement")}}
+    - {{domxref("HTMLVideoElement")}}
+    - {{domxref("HTMLCanvasElement")}}
+    - {{domxref("Blob")}}
+    - {{domxref("ImageData")}}
+    - {{domxref("ImageBitmap")}}
+    - {{domxref("OffscreenCanvas")}}
+    - {{domxref("VideoFrame")}}
+- `sx`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 x 坐标。
+- `sy`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 y 坐标。
+- `sw`
+  - : 将从中提取 `ImageBitmap` 的矩形的宽度。此值可以为负数。
+- `sh`
+  - : 将从中提取 `ImageBitmap` 的矩形的高度。此值可以为负数。
+- `options` {{optional_inline}}
+
+  - : 设置图像提取选项的对象。可用的选项包括：
+
+    - `imageOrientation`
+
+      - : 指定位图图像的方向。
+
+        - `from-image`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向（默认）。
+        - `flipY`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向，然后垂直翻转。
+        - `none`
+          - : 根据图像的编码来指定图像方向，忽略有关方向的任何元数据（例如，可能添加到图像中的 EXIF 元数据，以指示相机被转向以在人像模式下捕获图像）。
+
+    - `premultiplyAlpha`
+      - : 指定位图的颜色通道是否应与 alpha 通道预乘。以下值之一：`none`、`premultiply` 或 `default`（默认）。
+    - `colorSpaceConversion`
+      - : 指定图像是否应使用色彩空间转换进行解码。`none` 或 `default`（默认）。`default` 值表示使用特定于实现的行为。
+    - `resizeWidth`
+      - : 指定输出宽度的长整数。
+    - `resizeHeight`
+      - : 指定输出高度的长整数。
+    - `resizeQuality`
+      - : 指定用于调整输入大小以匹配输出尺寸的算法。以下值之一：`pixelated`、`low`（默认）、`medium` 或 `high`。
+
+### 返回值
+
+一个 {{jsxref("Promise")}}，会兑现为一个包含给定矩形的位图数据的 {{domxref("ImageBitmap")}} 对象。
+
+## 示例
+
+### 通过精灵表创建精灵
+
+此示例加载精灵表（sprite sheet），从中提取精灵，然后将每个精灵渲染到画布上。精灵表是包含多个较小图像（你希望能够单独渲染每个图像）的图像。
+
+```html hidden
+原图像：<img src="50x50.jpg" />
+<hr />
+<canvas id="myCanvas"></canvas>
+```
+
+```css hidden
+canvas {
+  border: 2px solid green;
+}
+```
+
+```js
+const canvas = document.getElementById("myCanvas"),
+  ctx = canvas.getContext("2d"),
+  image = new Image();
+
+// 等待精灵表加载完成
+image.onload = () => {
+  Promise.all([
+    // 从精灵表中裁剪出两个精灵
+    createImageBitmap(image, 0, 0, 32, 32),
+    createImageBitmap(image, 32, 0, 32, 32),
+    createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
+  ]).then((sprites) => {
+    // 将每个精灵绘制到画布上
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+    ctx.drawImage(sprites[2], 64, 64);
+  });
+};
+
+// 从图像文件加载精灵表
+image.src = "50x50.jpg";
+```
+
+{{EmbedLiveSample("通过精灵表创建精灵", "100%", "250")}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("WorkerGlobalScope.createImageBitmap()")}}
+- {{domxref("CanvasRenderingContext2D.drawImage()")}}
+- {{domxref("ImageData")}}
diff --git a/files/zh-cn/web/api/window/index.md b/files/zh-cn/web/api/window/index.md
index 86b28db686a132..4a4573f4d8d07f 100644
--- a/files/zh-cn/web/api/window/index.md
+++ b/files/zh-cn/web/api/window/index.md
@@ -175,7 +175,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_
   - : 关闭当前窗口。
 - {{domxref("Window.confirm()")}}
   - : 显示一个带有用户需要回应的信息对话框。
-- {{domxref("createImageBitmap", "Window.createImageBitmap()")}}
+- {{domxref("Window.createImageBitmap()")}}
   - : 接受各种不同的图像源，并返回一个 {{jsxref("Promise")}}，经兑现可得到 {{domxref("ImageBitmap")}}。可以选择将图片源裁剪成以 _(sx, sy)_ 为起点的像素矩形，宽度为 sw，高度为 sh。
 - {{domxref("EventTarget.dispatchEvent", "Window.dispatchEvent()")}}
   - : 用于触发事件。
diff --git a/files/zh-cn/web/api/window/showopenfilepicker/index.md b/files/zh-cn/web/api/window/showopenfilepicker/index.md
index 3a468425066c77..df22c5abc70fbe 100644
--- a/files/zh-cn/web/api/window/showopenfilepicker/index.md
+++ b/files/zh-cn/web/api/window/showopenfilepicker/index.md
@@ -2,7 +2,7 @@
 title: Window：showOpenFilePicker() 方法
 slug: Web/API/Window/showOpenFilePicker
 l10n:
-  sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{APIRef("File System API")}}{{SecureContext_Header}}{{SeeCompatTable}}
@@ -34,7 +34,7 @@ showOpenFilePicker()
         - `description` {{Optional_Inline}}
           - : 允许的文件类型类别的可选描述。默认为空字符串。
         - `accept`
-          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
+          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/window/showsavefilepicker/index.md b/files/zh-cn/web/api/window/showsavefilepicker/index.md
index 6a5cea8cfa5fd2..7af773f9b0211d 100644
--- a/files/zh-cn/web/api/window/showsavefilepicker/index.md
+++ b/files/zh-cn/web/api/window/showsavefilepicker/index.md
@@ -2,7 +2,7 @@
 title: Window：showSaveFilePicker() 方法
 slug: Web/API/Window/showSaveFilePicker
 l10n:
-  sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{APIRef("File System API")}}{{SecureContext_Header}}{{SeeCompatTable}}
@@ -36,7 +36,7 @@ showSaveFilePicker()
         - `description` {{Optional_Inline}}
           - : 允许的文件类型类别的可选描述。默认为空字符串。
         - `accept`
-          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
+          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/workerglobalscope/createimagebitmap/index.md b/files/zh-cn/web/api/workerglobalscope/createimagebitmap/index.md
new file mode 100644
index 00000000000000..037cedb9e2915c
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/createimagebitmap/index.md
@@ -0,0 +1,88 @@
+---
+title: WorkerGlobalScope：createImageBitmap() 方法
+slug: Web/API/WorkerGlobalScope/createImageBitmap
+l10n:
+  sourceCommit: 58d79e9c2206e0a604cd4d7f6fba5181262af420
+---
+
+{{APIRef("Canvas API")}}{{AvailableInWorkers("worker")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`createImageBitmap`** 从给定的来源创建位图，也可以进行裁剪以包含源图像的一部分。它接受各种不同的图像来源，并返回一个会兑现 {{domxref("ImageBitmap")}} 的 {{domxref("Promise")}}。
+
+## 语法
+
+```js-nolint
+createImageBitmap(image)
+createImageBitmap(image, options)
+createImageBitmap(image, sx, sy, sw, sh)
+createImageBitmap(image, sx, sy, sw, sh, options)
+```
+
+### 参数
+
+- `image`
+  - : 图像源，可以是以下值之一：
+    - {{domxref("HTMLImageElement")}}
+    - {{domxref("SVGImageElement")}}
+    - {{domxref("HTMLVideoElement")}}
+    - {{domxref("HTMLCanvasElement")}}
+    - {{domxref("Blob")}}
+    - {{domxref("ImageData")}}
+    - {{domxref("ImageBitmap")}}
+    - {{domxref("OffscreenCanvas")}}
+    - {{domxref("VideoFrame")}}
+- `sx`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 x 坐标。
+- `sy`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 y 坐标。
+- `sw`
+  - : 将从中提取 `ImageBitmap` 的矩形的宽度。此值可以为负数。
+- `sh`
+  - : 将从中提取 `ImageBitmap` 的矩形的高度。此值可以为负数。
+- `options` {{optional_inline}}
+
+  - : 设置图像提取选项的对象。可用的选项包括：
+
+    - `imageOrientation`
+
+      - : 指定位图图像的方向。
+
+        - `from-image`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向（默认）。
+        - `flipY`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向，然后垂直翻转。
+        - `none`
+          - : 根据图像的编码来指定图像方向，忽略有关方向的任何元数据（例如，可能添加到图像中的 EXIF 元数据，以指示相机被转向以在人像模式下捕获图像）。
+
+    - `premultiplyAlpha`
+      - : 指定位图的颜色通道是否应与 alpha 通道预乘。以下值之一：`none`、`premultiply` 或 `default`（默认）。
+    - `colorSpaceConversion`
+      - : 指定图像是否应使用色彩空间转换进行解码。`none` 或 `default`（默认）。`default` 值表示使用特定于实现的行为。
+    - `resizeWidth`
+      - : 指定输出宽度的长整数。
+    - `resizeHeight`
+      - : 指定输出高度的长整数。
+    - `resizeQuality`
+      - : 指定用于调整输入大小以匹配输出尺寸的算法。以下值之一：`pixelated`、`low`（默认）、`medium` 或 `high`。
+
+### 返回值
+
+一个 {{jsxref("Promise")}}，会兑现为一个包含给定矩形的位图数据的 {{domxref("ImageBitmap")}} 对象。
+
+## 示例
+
+参见 {{domxref("Window.createImageBitmap()")}} 以获取示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Window.createImageBitmap()")}}
+- {{domxref("CanvasRenderingContext2D.drawImage()")}}
+- {{domxref("ImageData")}}
diff --git a/files/zh-cn/web/api/workerglobalscope/importscripts/index.md b/files/zh-cn/web/api/workerglobalscope/importscripts/index.md
index 9ecfc68187827d..d808ff2f8cc4c5 100644
--- a/files/zh-cn/web/api/workerglobalscope/importscripts/index.md
+++ b/files/zh-cn/web/api/workerglobalscope/importscripts/index.md
@@ -2,10 +2,10 @@
 title: WorkerGlobalScope：importScripts() 方法
 slug: Web/API/WorkerGlobalScope/importScripts
 l10n:
-  sourceCommit: 542ef6cfd82288925e0a9238b47933f03e2dddca
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
-{{APIRef("Web Workers API")}}
+{{APIRef("Web Workers API")}}{{AvailableInWorkers("worker")}}
 
 {{domxref("WorkerGlobalScope")}} 接口的 **`importScripts()`** 方法将一个或多个脚本同步导入到 worker 的作用域中。
 
@@ -20,7 +20,7 @@ importScripts(path0, path1, /* …, */ pathN)
 ### 参数
 
 - `pathN`
-  - : 一个表示要导入的脚本的 URL 的字符串值。URL 可以是绝对的，也可以是相对的。如果 URL 是相对的，那么它是相对于 HTML 文档的基本 URL 的。
+  - : 一个表示要导入的脚本的 URL 的字符串值。URL 可以是绝对的，也可以是相对的。如果 URL 是相对的，那么它是相对于 worker 入口脚本的 URL。
 
 ### 返回值
 
@@ -29,16 +29,20 @@ importScripts(path0, path1, /* …, */ pathN)
 ### 异常
 
 - `NetworkError`
-  - : 要导入的脚本没有按有效的 JavaScript MIME 类型（有效的类型如 `text/javascript`）或允许的[旧版 JavaScript MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#遗留的_javascript_mime_类型)提供。
+  - : 要导入的脚本没有按有效的 JavaScript MIME 类型（有效的类型如 `text/javascript`）或允许的[旧版 JavaScript MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types#遗留的_javascript_mime_类型)提供。
+- {{jsxref("TypeError")}}
+  - : 如果当前的 {{domxref("WorkerGlobalScope")}} 是一个模块，则抛出此异常。请改用 [`import`](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)。
 
 ## 示例
 
-如果你在一个名为 `foo.js` 的单独脚本中编写了一些你想在 worker.js 中使用的功能，则可以使用以下行导入它：
+如果你在一个名为 `foo.js` 的单独脚本中编写了一些你想在 `worker.js` 中使用的功能，则可以使用以下行导入它：
 
 ```js
 importScripts("foo.js");
 ```
 
+`foo.js` 应该在与 worker 的入口点相同的 URL 子树中——例如，如果这个 worker 是通过 `new Worker("worker.js")` 创建的，那么 `worker.js` 就是入口点。如果 `worker.js` 在 `https://example.com/scripts/worker.js`，那么 `foo.js` 应该在 `https://example.com/scripts/foo.js`。
+
 `importScripts()` 和 `self.importScripts()` 实际上是等效的——都表示在 worker 的内部作用域中调用的 `importScripts()`。
 
 ## 规范
diff --git a/files/zh-cn/web/api/workernavigator/permissions/index.md b/files/zh-cn/web/api/workernavigator/permissions/index.md
index 619af770994cb1..3d504d2b557941 100644
--- a/files/zh-cn/web/api/workernavigator/permissions/index.md
+++ b/files/zh-cn/web/api/workernavigator/permissions/index.md
@@ -2,10 +2,10 @@
 title: WorkerNavigator：permissions 属性
 slug: Web/API/WorkerNavigator/permissions
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: e8fe043f7d2ad7cd9804d1bf96e0310949f1dac7
 ---
 
-{{APIRef("Permissions API")}}
+{{APIRef("Permissions API")}}{{AvailableInWorkers("worker")}}
 
 {{domxref("WorkerNavigator")}} 接口的 **`permissions`** 只读属性返回一个 {{domxref("Permissions")}} 对象，可以用于查询或更新 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 涵盖的 API 权限状态。
 
diff --git a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md
index 4c3c75df1f18af..0f638f489ba4ea 100644
--- a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md
@@ -5,7 +5,7 @@ slug: Web/API/XMLHttpRequest/responseXML
 
 {{APIRef('XMLHttpRequest')}}
 
-**XMLHttpRequest.responseXML** 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}}，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml”来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为“document”并且请求已异步执行时，响应将被当作“text / html”来解析。`responseXML` 对于任何其他类型的数据以及 [`data:` URLs](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 为 null。
+**XMLHttpRequest.responseXML** 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}}，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml”来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为“document”并且请求已异步执行时，响应将被当作“text / html”来解析。`responseXML` 对于任何其他类型的数据以及 [`data:` URL](/zh-CN/docs/Web/URI/Schemes/data) 为 null。
 
 > **备注：** `responseXML` 在这个属性的历史堪称神器，它可以同时在 HTML 和 XML 中工作
 
diff --git a/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index 0fa510c7388e3a..9eae0b38e148ef 100644
--- a/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -217,7 +217,7 @@ foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
   The second line.
   ```
 
-- 方法：`POST`；编码类型：[`multipart/form-data`](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)：
+- 方法：`POST`；编码类型：[`multipart/form-data`](/zh-CN/docs/Web/HTTP/MIME_types#multipartform-data)：
 
   ```plain
   Content-Type: multipart/form-data; boundary=---------------------------314911788813839
diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md
index 798d97bcf8b2bd..e5687bea35c727 100644
--- a/files/zh-cn/web/css/@layer/index.md
+++ b/files/zh-cn/web/css/@layer/index.md
@@ -141,9 +141,10 @@ p {
 
 ```html
 <div class="item">
-  I am displayed in <code>color: rebeccapurple</code> because the
-  <code>type</code> layer comes after the <code>base</code> layer. My green
-  border, font-size, and padding come from the <code>base</code> layer.
+  我以 <code>color: rebeccapurple</code> 的样式显示，因为
+  <code>special</code> 层定义在 <code>base</code>
+  层之后。我的绿色边框、font-size 和内边距来自于
+  <code>base</code> 层。
 </div>
 ```
 
diff --git a/files/zh-cn/web/html/element/input/file/index.md b/files/zh-cn/web/html/element/input/file/index.md
index 957cd2b9df46ac..ad66e5353b04e7 100644
--- a/files/zh-cn/web/html/element/input/file/index.md
+++ b/files/zh-cn/web/html/element/input/file/index.md
@@ -156,7 +156,7 @@ div {
 - `size`
   - : 以字节数为单位的文件大小。
 - `type`
-  - : 文件的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+  - : 文件的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
 - `webkitRelativePath` {{non-standard_inline}}
   - : 一个字符串，指定了相对于在目录选择器中选择的基本目录的文件路径（即，一个设置了 [`webkitdirectory`](/zh-CN/docs/Web/HTML/Element/input/file#webkitdirectory) 属性的 `file` 选择器）。_这是非标准的，应该谨慎使用。_
 
diff --git a/files/zh-cn/web/html/element/meta/index.md b/files/zh-cn/web/html/element/meta/index.md
index e5f75675b2300c..95006af631bf9b 100644
--- a/files/zh-cn/web/html/element/meta/index.md
+++ b/files/zh-cn/web/html/element/meta/index.md
@@ -106,7 +106,7 @@ slug: Web/HTML/Element/meta
       允许页面作者定义当前页面的[内容策略](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
 
     - `content-type`
-      声明 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)和文档的字符编码。如果使用 `content-type` 属性，与之在同一个 `<meta>` 元素中使用的 [`content`](#content) 属性的值必须是 `"text/html; charset=utf-8"`。这相当于一个具有指定 `charset` 属性的 `<meta>` 元素，并对其在文档中的放置位置有相同的限制。**注意**：该属性只能用于 MIME 类型为 `text/html` 的文档，不能用于 MIME 类型为 XML 的文档。
+      声明 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)和文档的字符编码。如果使用 `content-type` 属性，与之在同一个 `<meta>` 元素中使用的 [`content`](#content) 属性的值必须是 `"text/html; charset=utf-8"`。这相当于一个具有指定 `charset` 属性的 `<meta>` 元素，并对其在文档中的放置位置有相同的限制。**注意**：该属性只能用于 MIME 类型为 `text/html` 的文档，不能用于 MIME 类型为 XML 的文档。
 
     - `default-style`
 
diff --git a/files/zh-cn/web/html/element/picture/index.md b/files/zh-cn/web/html/element/picture/index.md
index 7b9b610f72b645..5334f221cf8d42 100644
--- a/files/zh-cn/web/html/element/picture/index.md
+++ b/files/zh-cn/web/html/element/picture/index.md
@@ -85,7 +85,7 @@ slug: Web/HTML/Element/picture
 
 ### `type` 属性
 
-`type` 属性允许你为 {{HTMLElement("source")}} 元素的 `srcset` 属性指向的资源指定一个 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。如果用户代理不支持指定的类型，那么这个 {{HTMLElement("source")}} 元素会被跳过。
+`type` 属性允许你为 {{HTMLElement("source")}} 元素的 `srcset` 属性指向的资源指定一个 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。如果用户代理不支持指定的类型，那么这个 {{HTMLElement("source")}} 元素会被跳过。
 
 ```html
 <picture>
diff --git a/files/zh-cn/web/html/element/script/index.md b/files/zh-cn/web/html/element/script/index.md
index 001ed23a0fb39e..2b6af008f5b489 100644
--- a/files/zh-cn/web/html/element/script/index.md
+++ b/files/zh-cn/web/html/element/script/index.md
@@ -115,7 +115,7 @@ slug: Web/HTML/Element/script
 
   - : 该属性表示所代表的脚本类型。该属性的值可能为以下类型：
     - **属性未设置（默认），一个空字符串，或一个 JavaScript MIME 类型**
-      - : 代表脚本为包含 JavaScript 代码的“传统的脚本”。如果脚本指的是 JavaScript 代码，我们鼓励作者省略这个属性，而不是指定一个 MIME 类型。所有的 JavaScript MIME 类型都列在 [IANA 的媒体类型规范](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#textjavascript)中。
+      - : 代表脚本为包含 JavaScript 代码的“传统的脚本”。如果脚本指的是 JavaScript 代码，我们鼓励作者省略这个属性，而不是指定一个 MIME 类型。所有的 JavaScript MIME 类型都列在 [IANA 的媒体类型规范](/zh-CN/docs/Web/HTTP/MIME_types#textjavascript)中。
     - `module`
       - : 此值导致代码被视为 JavaScript 模块。其中的代码内容会延后处理。`charset` 和 `defer` 属性不会生效。对于使用 `module` 的更多信息，请参见 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)指南。与传统代码不同的是，模块代码需要使用 CORS 协议来跨源获取。
     - [`importmap`](/zh-CN/docs/Web/HTML/Element/script/type/importmap)
diff --git a/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md b/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md
index 8e58b45f2cc7a5..000b4c70e00b0a 100644
--- a/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md
+++ b/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md
@@ -2,12 +2,12 @@
 title: virtualkeyboardpolicy
 slug: Web/HTML/Global_attributes/virtualkeyboardpolicy
 l10n:
-  sourceCommit: d3cdafcdb4d22e5c55771501e7c80451a96aa032
+  sourceCommit: 96e73ab4d1fdb714a6a6516821b3206d83909046
 ---
 
 {{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
 
-**`virtualkeyboardpolicy`** [全局属性](/zh-CN/docs/Web/HTML/Global_attributes)是一个枚举属性。当在一个元素上指定了该属性，且也同时使用了 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes#contenteditable) 属性时，它会控制在平板电脑、手机或其他设备上的虚拟键盘的行为，这些设备上可能没有硬件键盘。
+**`virtualkeyboardpolicy`** [全局属性](/zh-CN/docs/Web/HTML/Global_attributes)是一个枚举属性。当在元素上指定元素内容可编辑时（例如，它是 {{htmlelement("input")}} 或 {{htmlelement("textarea")}} 元素，或具有 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes/contenteditable) 属性的元素），它会控制平板电脑、手机或其他可能没有硬件键盘的设备上的屏幕虚拟键盘行为。
 
 该属性必须设置以下值之一：
 
diff --git a/files/zh-cn/web/http/basics_of_http/index.md b/files/zh-cn/web/http/basics_of_http/index.md
deleted file mode 100644
index 7b9cc470305aea..00000000000000
--- a/files/zh-cn/web/http/basics_of_http/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: HTTP 基础
-slug: Web/HTTP/Basics_of_HTTP
----
-
-{{HTTPSidebar}}
-
-HTTP 是一个拓展性非常好的协议。它依赖于资源或统一资源定位符（URI）的概念、一个简单的消息结构和一个客户端——服务器结构的通信流。在这些基础概念之上，近年来已经出现了许多拓展，以增加新的 HTTP 方法或首部的方式为 HTTP 协议增加了新的功能和语义。
-
-## 文章
-
-- [HTTP 概览](/zh-CN/docs/Web/HTTP/Overview)
-  - : 描述了什么是 HTTP，它在 Web 架构中的角色，以及它在协议栈中的位置。
-- [HTTP 演变](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
-  - : HTTP 是在 20 世纪 90 年代早期出现的，并且已经被扩充了多次。本文会回顾 HTTP 的发展史，描述 HTTP/0.9、HTTP/1.0、HTTP/1.1 和最新的 HTTP/2，以及这些年来出现的一些新特性。
-- [URI](/zh-CN/docs/Web/URI)
-  - : URI 用于定位 Web 上的资源，并且可以作为 HTTP 请求的目标。
-- [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
-  - : 从 HTTP/1.0 开始，HTTP 协议允许传输不同类型的内容。本文解释了如何通过使用 {{HTTPHeader("Content-Type")}} 首部和 MIME 标准实现这一过程的。
-- [HTTP 会话流程](/zh-CN/docs/Web/HTTP/Session)
-  - : 本文描述了一个经典的 HTTP 会话：当你在浏览器中点击一个链接或在网页中加载一张图片时，背后到底发生了什么。
-- [HTTP 消息](/zh-CN/docs/Web/HTTP/Messages)
-  - : 在请求和响应中传输的 HTTP 消息具有非常清晰的结构；本文介绍了消息的结构、设计目的以及其可能性。
-- [HTTP/2 中的帧及消息结构](/zh-CN/docs/Web/HTTP/Frame_and_message_structure_in_HTTP_2)
-  - : HTTP/2 用二进制帧来压缩和表示 HTTP/1.x 中的消息。本文解释了 HTTP/2 中的帧结构，其设计目的以及编码方式。
-- [HTTP/1.x 的连接管理](/zh-CN/docs/Web/HTTP/Connection_management_in_HTTP_1.x)
-  - : HTTP/1.1 是首个支持持久化连接和管道化的 HTTP 版本。本文介绍了这两个概念。
-- [HTTP/2 的连接管理](/zh-CN/docs/Web/HTTP/Connection_management_in_HTTP_2)
-  - : HTTP/2 完全改变了连接创建和维护的方式：本文介绍了 HTTP 帧是怎样支持多路复用并解决之前的 HTTP 版本中存在的队头阻塞问题的。
-- [内容协商](/zh-CN/docs/Web/HTTP/Content_negotiation)
-  - : HTTP 引入了一组以 [`Accept`](/zh-CN/docs/Web/HTTP/Headers/Accept) 开头的首部，作为浏览器用来声明它们期望得到的格式，语言或编码的方法。本文讲述了这一过程是怎样实现的，以及服务器是怎样处理并选择恰当的响应的。
diff --git a/files/zh-cn/web/http/cors/index.md b/files/zh-cn/web/http/cors/index.md
index fb470289fccf12..782b90cb885164 100644
--- a/files/zh-cn/web/http/cors/index.md
+++ b/files/zh-cn/web/http/cors/index.md
@@ -29,7 +29,7 @@ CORS 机制允许 Web 应用服务器进行跨源访问控制，从而使跨源
 
 ## 功能概述
 
-跨源资源共享标准新增了一组 [HTTP 标头](/zh-CN/docs/Web/HTTP/Headers)字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 {{HTTPMethod("GET")}} 以外的 HTTP 请求，或者搭配某些 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的 {{HTTPMethod("POST")}} 请求），浏览器必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（例如 [Cookie](/zh-CN/docs/Web/HTTP/Cookies) 和 [HTTP 认证](/zh-CN/docs/Web/HTTP/Authentication)相关数据）。
+跨源资源共享标准新增了一组 [HTTP 标头](/zh-CN/docs/Web/HTTP/Headers)字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 {{HTTPMethod("GET")}} 以外的 HTTP 请求，或者搭配某些 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的 {{HTTPMethod("POST")}} 请求），浏览器必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（例如 [Cookie](/zh-CN/docs/Web/HTTP/Cookies) 和 [HTTP 认证](/zh-CN/docs/Web/HTTP/Authentication)相关数据）。
 
 CORS 请求失败会产生错误，但是为了安全，在 JavaScript 代码层面*无法*获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。
 
diff --git a/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md b/files/zh-cn/web/http/evolution_of_http/index.md
similarity index 99%
rename from files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md
rename to files/zh-cn/web/http/evolution_of_http/index.md
index 159a189341f5ce..1412c42a81bc4e 100644
--- a/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/zh-cn/web/http/evolution_of_http/index.md
@@ -1,6 +1,6 @@
 ---
 title: HTTP 的发展
-slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+slug: Web/HTTP/Evolution_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/zh-cn/web/http/headers/accept-post/index.md b/files/zh-cn/web/http/headers/accept-post/index.md
index 9b5e4911f8b78c..99803fec166d94 100644
--- a/files/zh-cn/web/http/headers/accept-post/index.md
+++ b/files/zh-cn/web/http/headers/accept-post/index.md
@@ -2,19 +2,21 @@
 title: Accept-Post
 slug: Web/HTTP/Headers/Accept-Post
 l10n:
-  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{HTTPSidebar}}
 
-**`Accept-Post`** HTTP 响应标头用于告知客户端服务器在接受 HTTP 的 POST 请求时能处理哪些[媒体类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+**`Accept-Post`** HTTP 响应标头用于告知客户端服务器在接受 HTTP 的 POST 请求时能处理哪些[媒体类型](/zh-CN/docs/Web/HTTP/MIME_types)。
 
 响应中对于任何方法的 **`Accept-Post`** 字段意味着允许在请求的资源上执行 `POST` 操作（标头中任何提及的文档或媒体格式进一步表明该格式的文档也被允许）。
 
 例如，服务器接收到具有不支持的媒体类型的 `POST` 请求时，可以回复 {{HTTPStatus("415")}} `Unsupported Media Type`（不支持的媒体类型）状态码，并在响应中包含一个 **`Accept-Post`** 标头，其中引用了一个或多个支持的媒体类型。
 
 > [!NOTE]
-> IANA 维护了[一个完整的官方支持的编码方式列表](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)。
+>
+> - 一个 IANA 注册表维护了[完整的官方支持的编码方式列表](https://www.iana.org/assignments/http-parameters/http-parameters.xhtml#content-coding)。
+> - `bzip` 和 `bzip2` 编码不是标准化的，但可能在某些情况下被使用（包括遗留的支持）。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/accept/index.md b/files/zh-cn/web/http/headers/accept/index.md
index b62213bab262a8..b6ffd736917f37 100644
--- a/files/zh-cn/web/http/headers/accept/index.md
+++ b/files/zh-cn/web/http/headers/accept/index.md
@@ -2,12 +2,12 @@
 title: Accept
 slug: Web/HTTP/Headers/Accept
 l10n:
-  sourceCommit: 7aab76c49ae49d606b4958f8dc8cd1269fb7b9b6
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{HTTPSidebar}}
 
-**`Accept`** 请求 HTTP 标头表示客户端能够理解的内容类型，以 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的形式表达。借助[内容协商机制](/zh-CN/docs/Web/HTTP/Content_negotiation), 服务器可以从诸多备选项中选择一项进行应用，并使用 {{HTTPHeader("Content-Type")}} 响应标头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求标头设置合适的值，比如，获取一个 CSS 层叠样式表时的值与获取图片、视频或脚本文件时的值是不同的。
+**`Accept`** 请求 HTTP 标头表示客户端能够理解的内容类型，以 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的形式表达。借助[内容协商机制](/zh-CN/docs/Web/HTTP/Content_negotiation), 服务器可以从诸多备选项中选择一项进行应用，并使用 {{HTTPHeader("Content-Type")}} 响应标头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求标头设置合适的值，比如，获取一个 CSS 层叠样式表时的值与获取图片、视频或脚本文件时的值是不同的。
 
 <table class="properties">
   <tbody>
@@ -44,7 +44,7 @@ Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*
 ## 指令
 
 - `<MIME_type>/<MIME_subtype>`
-  - : 一个单一且精确的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)，例如 `text/html`。
+  - : 一个单一且精确的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)，例如 `text/html`。
 - `<MIME_type>/*`
   - : 一个 MIME 类型，但不包含子类型。`image/*` 对应于 `image/png`、`image/svg`、`image/gif` 以及其他图像类型。
 - `*/*`
diff --git a/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md b/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md
index 28f31ab2026ce7..09dd6cf8d7cd35 100644
--- a/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md
+++ b/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md
@@ -1,11 +1,11 @@
 ---
-title: "CSP: default-src"
+title: CSP：default-src
 slug: Web/HTTP/Headers/Content-Security-Policy/default-src
 ---
 
 {{HTTPSidebar}}
 
-在 HTTP 协议中，{{HTTPHeader("Content-Security-Policy")}} (CSP) 首部字段中的 **`default-src`** 指令可以为其他 CSP 拉取指令（{{Glossary("fetch directive", "fetch directives")}}）提供备选项。对于以下列出的指令，假如不存在的话，那么用户代理会查找并应用 default-src 指令的值。
+HTTP {{HTTPHeader("Content-Security-Policy")}}（CSP）的 **`default-src`** 指令可以为其他 CSP {{Glossary("fetch directive", "fetch 指令")}}提供回退。对于以下列出的指令，假如不存在的话，那么用户代理会查找并应用 `default-src` 指令的值：
 
 - {{CSP("child-src")}}
 - {{CSP("connect-src")}}
@@ -19,65 +19,47 @@ slug: Web/HTTP/Headers/Content-Security-Policy/default-src
 - {{CSP("style-src")}}
 - {{CSP("worker-src")}}
 
-| CSP 版本 | 1                               |
-| -------- | ------------------------------- |
-| 指令类型 | {{Glossary("Fetch directive")}} |
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">CSP 版本</th>
+      <td>1</td>
+    </tr>
+    <tr>
+      <th scope="row">指令类型</th>
+      <td>{{Glossary("Fetch directive", "fetch 指令")}}</td>
+    </tr>
+  </tbody>
+</table>
 
 ## 语法
 
 `default-src` 策略允许指定一个或多个源：
 
-```plain
+```http
 Content-Security-Policy: default-src <source>;
 Content-Security-Policy: default-src <source> <source>;
 ```
 
 ### 源
 
-\<source> 可以是以下之一：
-
-- \<host-source>
-  - : 以域名或者 IP 地址表示的主机名，外加可选的 URL 协议名（[URL scheme](/zh-CN/docs/URIs_and_URLs)）以及端口号。站点地址中可能会包含一个可选的前置通配符（星号 '\*'），同时也可以将通配符（也是'\*'）应用于端口号，表示在这个源中可以使用任意合法的端口号。
-    举例说明：_ `http://_.example.com:` 匹配从使用 http: 的 example.com 的任意子域的资源加载。
-    - `mail.example.com:443:`匹配对 mail.example.com 上的 443 端口号的访问。
-    - `https://store.example.com`: 匹配对使用了 https: 的 store.example.com 的访问。
-- \<scheme-source>
-
-  - : 协议名如'http:' 或者 'https:'。**必须带有冒号，不要有单引号**。同时你还可以指定数据协议（data schema）（不推荐使用）。
-
-    - `data:` 允许 [`data:` URIs](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 作为内容的源。这是不安全的。攻击者可以注入任意 data: URI。不要轻易使用这种形式的源，尤其是脚本，绝对不要使用。
-    - `mediastream:` 允许 [`mediastream:` URIs](/zh-CN/docs/Web/API/MediaStream_API) 作为内容的源。
-    - `blob:` 允许 [`blob:` URIs](/zh-CN/docs/Web/API/Blob) 作为内容的源。
-    - `filesystem:` 允许 [`filesystem:` URIs](/zh-CN/docs/Web/API/FileSystem) 作为内容的源。
-
-- `'self'`
-  - : 指向与要保护的文件所在的源，包括相同的 URL scheme 与端口号。必须有单引号。一些浏览器会特意排除 blob 与 filesystem。需要设定这两种内容类型的站点可以在 Data 属性中进行设定。
-- `'unsafe-inline'`
-  - : 允许使用内联资源，例如内联 {{HTMLElement("script")}} 元素（javascript: URL）、内联事件处理器以及内联 {{HTMLElement("style")}} 元素。必须有单引号。
-- `'unsafe-eval'`
-  - : 允许使用 eval() 以及相似的函数来从字符串创建代码。必须有单引号。
-- `'none'`
-  - : 不允许任何内容。必须有单引号。
-- 'nonce-\<base64 值>'
-  - : 特定使用一次性加密内联脚本的白名单。服务器必须在每一次传输政策时生成唯一的一次性值。否则将存在绕过资源政策的可能。请参见[不安全的内联脚本](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script)查看示例。
-- \<hash-source>
-  - : 使用 sha256、sha384 或 sha512 编码过的内联脚本或样式。其由用短划线分隔的两部分组成：用于创建哈希的加密算法，以及脚本或样式 base64 编码的哈希值。当生成哈希值的时候，不要包含 \<script> 或 \<style> 标签，同时注意字母大小写与空格——包括首尾空格——都是会影响生成的结果的。请参见[不安全的内联脚本](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script)。
-- 'strict-dynamic'
-  - : strict-dynamic 指定对于含有标记脚本 (通过附加一个随机数或散列) 的信任，应该传播到由该脚本加载的所有脚本。与此同时，任何白名单以及源表达式例如 'self' 或者 'unsafe-inline' 都会被忽略。参见 [script-src](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic) 。
+`<source>` 可以是 [CSP 源值](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#源)中列出的任何值。
+
+注意，这些值可以在所有的 {{Glossary("fetch directive", "fetch 指令")}}（以及[其他指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#相关指令)）中使用。
 
 ## 示例
 
-### `不继承 default-src 的情况`
+### 不继承 default-src 的情况
 
-假如设定了其他指令，那么 `default-src` 不会对它们起作用。这个首部
+假如设定了其他指令，那么 `default-src` 不会对它们起作用。这个标头：
 
-```bash
+```http
 Content-Security-Policy: default-src 'self'; script-src https://example.com
 ```
 
-与下列代码等价：
+与下面的等价：
 
-```bash
+```http
 Content-Security-Policy: connect-src 'self';
                          font-src 'self';
                          frame-src 'self';
diff --git a/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md b/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md
index f34d3cbbe3fbbb..66feb83dd8c7ae 100644
--- a/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md
+++ b/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md
@@ -33,34 +33,34 @@ HTTP 标头 {{HTTPHeader("Content-Security-Policy")}}（CSP）中的 `frame-ance
   </tbody>
 </table>
 
-## Syntax
+## 语法
 
 `frame-ancestors`策略可以设置一个或多个源\<source>：
 
-```plain
+```http
 Content-Security-Policy: frame-ancestors <source>;
-Content-Security-Policy: frame-ancestors <source> <source>;
+Content-Security-Policy: frame-ancestors <space separated list of sources>;
 ```
 
-### Sources
+### 源
 
 \<source> 可以是如下内容：
 
 > **备注：** `frame-ancestors` 指令的语法类似于其他指令的源列表（source list，如{{CSP("default-src")}}），但不允许 `'unsafe-eval'` 或`'unsafe-inline'` 。它也不会回退使用 `default-src` 的值。仅有如下的源列表是可用的：
 
 - \<host-source>
-  - : 一个 Internet 主机的名称或 IP 地址，以及一个可选的[URL scheme](/zh-CN/docs/URIs_and_URLs)和／或端口号。这些站点的地址可以包含一个可选的引导通配符（星号， `'*'），或者你可以使用通配符`（同样还是， `'*'）作为端口地址`，以示这个源的所有合法端口地址都是有效的。
-    例子：_ `http://_.example.com`: 匹配所有使用 http:URL scheme 并来对于 example.com 及其子域名的加载意图。
+  - : 一个 Internet 主机的名称或 IP 地址，以及一个可选的 {{Glossary("URL")}} 方案和／或端口号。这些站点的地址可以包含一个可选的引导通配符（星号， `'*'），或者你可以使用通配符`（同样还是， `'*'）作为端口地址`，以示这个源的所有合法端口地址都是有效的。
+    例子：_ `http://_.example.com`: 匹配所有使用 `http:` URL 方案并来对于 example.com 及其子域名的加载意图。
     - `mail.example.com:443`: 匹配所有对于 mail.example.com 在 443 端口的访问意图。
-    - `https://store.example.com`: 匹配所有使用 https:访问 store.example.com 的意图。
+    - `https://store.example.com`: 匹配所有使用 `https:` 访问 store.example.com 的意图。
 - \<scheme-source>
 
   - : 一个 schema 配置，比如'http:'或'https:'。注意，冒号是必要的。你同样也可以指定一个 data schema（但并不推荐）。
 
-    - '`data:`' 允许 [`data:` URIs](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 作为内容源。_这是不安全的，攻击者可以用此来注入恶意代码。请谨慎使用，并不要令其作用于脚本。_
-    - `'mediastream:'` 允许 [`mediastream:` URIs](/zh-CN/docs/Web/API/MediaStream_API) 作为内容源。
-    - `'blob:'` 允许 [`blob:` URIs](/zh-CN/docs/Web/API/Blob) 作为内容源。
-    - `'filesystem:'` 允许 [`filesystem:` URIs](/zh-CN/docs/Web/API/FileSystem) 作为内容源。
+    - '`data:`' 允许 [`data:` URI](/zh-CN/docs/Web/URI/Schemes/data) 作为内容源。_这是不安全的，攻击者可以用此来注入恶意代码。请谨慎使用，并不要令其作用于脚本。_
+    - `'mediastream:'` 允许 [`mediastream:` URI](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API) 作为内容源。
+    - `'blob:'` 允许 [`blob:` URI](/zh-CN/docs/Web/API/Blob) 作为内容源。
+    - `'filesystem:'` 允许 [`filesystem:` URI](/zh-CN/docs/Web/API/FileSystem) 作为内容源。
 
 - `'self'`
   - : 指向一个该受保护文档所在的源，包含同样的 URL schema 和端口号。必须用单引号设置。有些浏览器会从源指令中排`除 blob`和`filesystem`。需要允许这些内容类型的站点可以通过 Data 属性指定它们。
diff --git a/files/zh-cn/web/http/headers/content-type/index.md b/files/zh-cn/web/http/headers/content-type/index.md
index b288e59adaf2ff..af30dc17ef5203 100644
--- a/files/zh-cn/web/http/headers/content-type/index.md
+++ b/files/zh-cn/web/http/headers/content-type/index.md
@@ -51,7 +51,7 @@ Content-Type: multipart/form-data; boundary=something
 ## 指令
 
 - `media-type`
-  - : 资源或数据的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+  - : 资源或数据的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
 - charset
   - : 字符编码标准。不区分大小写，推荐使用小写。
 - boundary
diff --git a/files/zh-cn/web/http/headers/index.md b/files/zh-cn/web/http/headers/index.md
index 6168a7dc58ee16..6908792029370c 100644
--- a/files/zh-cn/web/http/headers/index.md
+++ b/files/zh-cn/web/http/headers/index.md
@@ -13,7 +13,7 @@ slug: Web/HTTP/Headers
 
 - {{Glossary("Request header", "请求标头")}}包含有关要获取的资源或客户端或请求资源的客户端的更多信息。
 - {{Glossary("Response header", "响应标头")}}包含有关响应的额外信息，例如响应的位置或者提供响应的服务器。
-- {{Glossary("Representation header", "表示标头")}}包含资源主体的信息，例如主体的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)或者应用的编码/压缩方案。
+- {{Glossary("Representation header", "表示标头")}}包含资源主体的信息，例如主体的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)或者应用的编码/压缩方案。
 - {{Glossary("Payload header","有效负荷标头")}}包含有关有效载荷数据表示的单独信息，包括内容长度和用于传输的编码。
 
 标头也可以根据{{Glossary("Proxy_server", "代理")}}处理它们的方式进行分组：
diff --git a/files/zh-cn/web/http/headers/x-content-type-options/index.md b/files/zh-cn/web/http/headers/x-content-type-options/index.md
index 4adeda3dc5b605..bae260b9c387a0 100644
--- a/files/zh-cn/web/http/headers/x-content-type-options/index.md
+++ b/files/zh-cn/web/http/headers/x-content-type-options/index.md
@@ -5,7 +5,7 @@ slug: Web/HTTP/Headers/X-Content-Type-Options
 
 {{HTTPSidebar}}
 
-**`X-Content-Type-Options`** HTTP 消息头相当于一个提示标志，被服务器用来提示客户端一定要遵循在 {{HTTPHeader("Content-Type")}} 首部中对 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 的设定，而不能对其进行修改。这就禁用了客户端的 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing)行为，换句话说，也就是意味着网站管理员确定自己的设置没有问题。
+**`X-Content-Type-Options`** HTTP 消息头相当于一个提示标志，被服务器用来提示客户端一定要遵循在 {{HTTPHeader("Content-Type")}} 首部中对 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types) 的设定，而不能对其进行修改。这就禁用了客户端的 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/MIME_types#mime_嗅探)行为，换句话说，也就是意味着网站管理员确定自己的设置没有问题。
 
 该消息头最初是由微软在 IE 8 浏览器中引入的，提供给网站管理员用作禁用内容嗅探的手段，内容嗅探技术可能会把不可执行的 MIME 类型转变为可执行的 MIME 类型。在此之后，其他浏览器也相继引入了这个消息头，尽管它们的 MIME 嗅探算法没有那么有侵略性。
 
diff --git a/files/zh-cn/web/http/index.md b/files/zh-cn/web/http/index.md
index 12b8c1e0d32419..4c36ab0c6b5a05 100644
--- a/files/zh-cn/web/http/index.md
+++ b/files/zh-cn/web/http/index.md
@@ -21,7 +21,7 @@ slug: Web/HTTP
   - : **跨站点 HTTP 请求**就是从**另一个域**，而不是资源所在的域发起的 HTTP 请求。举例来说，在域 A（`http://domaina.example/`）的 HTML 页面上通过 `img` 元素来请求域 B（`http://domainb.foo/image.jpg`）上的图片资源。这在当今的 Web 页面上是很常见的——加载跨站点资源，包括 CSS 样式表、图片、脚本和其他资源。CORS 允许 Web 开发人员控制其站点对跨站点请求的反应。
 - [HTTP 客户端提示（Client Hint）](/zh-CN/docs/Web/HTTP/Client_hints)
   - : **客户端提示**是一组响应标头，服务器可以使用它来主动从客户端请求关于设备、网络、用户以及用户代理指定的首选项的信息。然后，服务器可以根据客户端选择提供的信息来确定发送哪些资源。
-- [HTTP 的演变](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
+- [HTTP 的演变](/zh-CN/docs/Web/HTTP/Evolution_of_HTTP)
   - : 简单描述了从早期版本的 HTTP 到现代 HTTP/2，新兴的 HTTP/3 以及未来版本的 HTTP 这个过程中发生的变更。
 - [Mozilla Web 安全准则](https://wiki.mozilla.org/Security/Guidelines/Web_Security)
   - : 一系列用于帮助运营团队创建安全的 Web 应用程序的技巧。
diff --git a/files/zh-cn/web/http/messages/index.md b/files/zh-cn/web/http/messages/index.md
index 3cbf8cf8476b86..9a719f5cb87e57 100644
--- a/files/zh-cn/web/http/messages/index.md
+++ b/files/zh-cn/web/http/messages/index.md
@@ -65,7 +65,7 @@ HTTP 请求是由客户端发出的消息，用来使服务器执行动作。_
 主体大致可分为两类：
 
 - 单一资源（Single-resource）主体，由一个单文件组成。该类型的主体由两个标头定义：{{HTTPHeader("Content-Type")}} 和 {{HTTPHeader("Content-Length")}}。
-- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)，由多部分主体组成，每一部分包含不同的信息位。通常是和 [HTML 表单](/zh-CN/docs/Learn/Forms)连系在一起。
+- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/MIME_types#multipartform-data)，由多部分主体组成，每一部分包含不同的信息位。通常是和 [HTML 表单](/zh-CN/docs/Learn/Forms)连系在一起。
 
 ## HTTP 响应
 
@@ -99,7 +99,7 @@ HTTP 响应的起始行被称作*状态行*（status line），包含以下信
 
 - 单资源（Single-resource）主体，由**已知**长度的单个文件组成。该类型主体由两个标头定义：{{HTTPHeader("Content-Type")}} 和 {{HTTPHeader("Content-Length")}}。
 - 单资源（Single-resource）主体，由**未知**长度的单个文件组成。通过将 {{HTTPHeader("Transfer-Encoding")}} 设置为 `chunked` 来使用分块编码。
-- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)，由多部分 body 组成，每部分包含不同的信息段。但这是比较少见的。
+- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/MIME_types#multipartform-data)，由多部分 body 组成，每部分包含不同的信息段。但这是比较少见的。
 
 ## HTTP/2 帧
 
diff --git a/files/zh-cn/web/http/basics_of_http/mime_types/common_types/index.md b/files/zh-cn/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/zh-cn/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/zh-cn/web/http/mime_types/common_types/index.md
index 9834bd891cd76d..dd0f629a954094 100644
--- a/files/zh-cn/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/zh-cn/web/http/mime_types/common_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: 常见 MIME 类型列表
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/zh-cn/web/http/basics_of_http/mime_types/index.md b/files/zh-cn/web/http/mime_types/index.md
similarity index 99%
rename from files/zh-cn/web/http/basics_of_http/mime_types/index.md
rename to files/zh-cn/web/http/mime_types/index.md
index 03e7da3ff4448d..4f945abb57cded 100644
--- a/files/zh-cn/web/http/basics_of_http/mime_types/index.md
+++ b/files/zh-cn/web/http/mime_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: MIME 类型（IANA 媒体类型）
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/zh-cn/web/security/index.md b/files/zh-cn/web/security/index.md
index 602ee723b0ac5a..cd8e0b793258fc 100644
--- a/files/zh-cn/web/security/index.md
+++ b/files/zh-cn/web/security/index.md
@@ -58,7 +58,7 @@ slug: Web/Security
 - [HTTP Access-Control-Allow-Origin](/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
   - : **`Access-Control-Allow-Origin`** 响应头表明响应是否可以与来自给定{{glossary("origin","来源")}}的请求代码共享。
 - [HTTP X-Content-Type-Options](/zh-CN/docs/Web/HTTP/Headers/X-Content-Type-Options)
-  - : **`X-Content-Type-Options`** 响应的 HTTP 头是一个标记，由服务器用来表示应该遵循 {{HTTPHeader("Content-Type")}} 头中宣告的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)，不应该被改变。这是一种选择退出 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing)的方法，或者换句话说，MIME 类型是故意配置的。
+  - : **`X-Content-Type-Options`** 响应的 HTTP 头是一个标记，由服务器用来表示应该遵循 {{HTTPHeader("Content-Type")}} 头中宣告的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)，不应该被改变。这是一种选择退出 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/MIME_types#mime_嗅探)的方法，或者换句话说，MIME 类型是故意配置的。
 
 ## 点击劫持保护
 
diff --git a/files/zh-cn/web/svg/attribute/amplitude/index.md b/files/zh-cn/web/svg/attribute/amplitude/index.md
new file mode 100644
index 00000000000000..8b0ee8aac60da2
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/amplitude/index.md
@@ -0,0 +1,44 @@
+---
+title: amplitude
+slug: Web/SVG/Attribute/amplitude
+l10n:
+  sourceCommit: c2274293475b0a5b4febf85a49c1f91bf43ebac7
+---
+
+{{SVGRef}}
+
+**`amplitude`** 属性用于在 {{SVGAttr("type")}} 属性为 `gamma` 时，控制组件转换元素的伽马函数的幅值。
+
+你可以将此属性与以下 SVG 元素一起使用：
+
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncB")}}
+- {{SVGElement("feFuncG")}}
+- {{SVGElement("feFuncR")}}
+
+## 使用说明
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td><a href="/zh-CN/docs/Web/CSS/number">&#x3C;number></a></td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>有</td>
+    </tr>
+  </tbody>
+</table>
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- {{SVGElement("feComponentTransfer")}}
diff --git a/files/zh-cn/web/svg/attribute/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md
index 2685709224bb11..1aeb222088b400 100644
--- a/files/zh-cn/web/svg/attribute/attributename/index.md
+++ b/files/zh-cn/web/svg/attribute/attributename/index.md
@@ -1,47 +1,72 @@
 ---
 title: attributeName
 slug: Web/SVG/Attribute/attributeName
+l10n:
+  sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0
 ---
 
 {{SVGRef}}
 
-该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。
+**`attributeName`** 属性表示动画期间将要更改的目标元素的 CSS 属性或属性的名称。
 
-## 使用说明
+你可以将此属性与以下 SVG 元素一起使用：
 
-| 类别     | 动画属性目标属性                                                                      |
-| -------- | ------------------------------------------------------------------------------------- |
-| 值       | \<attributeName>                                                                      |
-| 可变性   | No                                                                                    |
-| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute) |
+- {{SVGElement("animate")}}
+- {{SVGElement("animateTransform")}}
+- {{SVGElement("set")}}
 
 ## 示例
 
-下面的示例使用了 y 作为`attributeName`，通过改变一个矩形在 Y 轴上的位置来变动这个矩形。
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
-```xml
-<?xml version="1.0"?>
-<svg width="250" height="250"
-  viewPort="0 0 250 250" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
+```html
+<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
   <rect x="50" y="50" width="100" height="100">
-    <animate attributeType="XML"
+    <animate
+      attributeType="XML"
       attributeName="y"
-      from="0" to="50"
-      dur="5s"/>
+      from="0"
+      to="50"
+      dur="5s"
+      repeatCount="indefinite" />
   </rect>
 </svg>
 ```
 
-## 元素
+{{EmbedLiveSample("示例", "400", "250")}}
+
+## 使用说明
 
-下列元素可以使用`attributeName`属性：
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td><code>&#x3C;name></code></td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td><em>None</em></td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>无</td>
+    </tr>
+  </tbody>
+</table>
 
-- {{ SVGElement("animate") }}
-- {{ SVGElement("animateColor") }}
-- {{ SVGElement("animateTransform") }}
-- {{ SVGElement("set") }}
+- `<name>`
+  - ：此值表示要动画化的目标元素的 CSS 属性或属性的名称。
 
 ## 规范
 
 {{Specifications}}
+
+## 参见
+
+- [SMIL 动画规范](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute)
diff --git a/files/zh-cn/web/svg/attribute/azimuth/index.md b/files/zh-cn/web/svg/attribute/azimuth/index.md
new file mode 100644
index 00000000000000..9c8be37734cb29
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/azimuth/index.md
@@ -0,0 +1,75 @@
+---
+title: azimuth
+slug: Web/SVG/Attribute/azimuth
+l10n:
+  sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a
+---
+
+{{SVGRef}}
+
+**`azimuth`** 属性指定了光源在 XY 平面上的方向角度（顺时针），以相对于 x 轴的度数为单位。
+
+你可以将此属性与以下 SVG 元素一起使用：
+
+- {{SVGElement("feDistantLight")}}
+
+## 示例
+
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 440 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="distantLight1">
+    <feDiffuseLighting>
+      <feDistantLight azimuth="0" />
+    </feDiffuseLighting>
+  </filter>
+  <filter id="distantLight2">
+    <feDiffuseLighting>
+      <feDistantLight azimuth="240" />
+    </feDiffuseLighting>
+  </filter>
+
+  <circle cx="100" cy="100" r="80" style="filter: url(#distantLight1);" />
+  <circle
+    cx="100"
+    cy="100"
+    r="80"
+    style="filter: url(#distantLight2); transform: translateX(240px);" />
+</svg>
+```
+
+{{EmbedLiveSample("示例", "420", "200")}}
+
+## 使用说明
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td>{{cssxref("number")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td>0</td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>有</td>
+    </tr>
+  </tbody>
+</table>
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/uri/schemes/data/index.md b/files/zh-cn/web/uri/schemes/data/index.md
index 4512d19c287e7c..738a0cdcff28e8 100644
--- a/files/zh-cn/web/uri/schemes/data/index.md
+++ b/files/zh-cn/web/uri/schemes/data/index.md
@@ -18,11 +18,11 @@ Data URL 由四个部分组成：前缀（`data:`）、指示数据类型的 MIM
 data:[<mediatype>][;base64],<data>
 ```
 
-`mediatype` 是个 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的字符串，例如 `'image/jpeg'` 表示 JPEG 图像文件。如果被省略，则默认值为 `text/plain;charset=US-ASCII`。
+`mediatype` 是个 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的字符串，例如 `'image/jpeg'` 表示 JPEG 图像文件。如果被省略，则默认值为 `text/plain;charset=US-ASCII`。
 
 如果数据包含 [RFC 3986 中定义为保留字符](https://datatracker.ietf.org/doc/html/rfc3986#section-2.2)的字符或包含空格符、换行符或者其他非打印字符，这些字符必须进行[百分号编码](/zh-CN/docs/Glossary/percent-encoding)（又名“URL 编码”）。
 
-如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。否则，你可以指定 `base64` 来嵌入 base64 编码的二进制数据。你可以在[这里](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)和[这里](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)找到更多关于 MIME 类型的信息。
+如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。否则，你可以指定 `base64` 来嵌入 base64 编码的二进制数据。你可以在[这里](/zh-CN/docs/Web/HTTP/MIME_types)和[这里](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)找到更多关于 MIME 类型的信息。
 
 下面是一些示例：
 
diff --git a/package.json b/package.json
index 0adf8aabd2276c..dc17c86fca0394 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "autocorrect-node": "2.11.1",
     "cld": "^2.10.0",
-    "fdir": "^6.3.0",
+    "fdir": "^6.4.0",
     "front-matter": "^4.0.2",
     "husky": "9.1.6",
     "lint-staged": "15.2.10",
diff --git a/yarn.lock b/yarn.lock
index 96df4edfd2f8dc..928d8a3281667c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -327,10 +327,10 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fdir@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.3.0.tgz#fcca5a23ea20e767b15e081ee13b3e6488ee0bb0"
-  integrity sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==
+fdir@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.0.tgz#8e80ab4b18a2ac24beebf9d20d71e1bc2627dbae"
+  integrity sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==
 
 fill-range@^7.1.1:
   version "7.1.1"