From 1c83c9e42c7aac942510f08451a36f8156843793 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Mon, 18 Sep 2023 17:16:28 +0900
Subject: [PATCH 001/268] [ko] add index.md for `web/glossary/certified`
 (#15704)

---
 files/ko/glossary/certified/index.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 files/ko/glossary/certified/index.md

diff --git a/files/ko/glossary/certified/index.md b/files/ko/glossary/certified/index.md
new file mode 100644
index 00000000000000..50be2cfcdf40ff
--- /dev/null
+++ b/files/ko/glossary/certified/index.md
@@ -0,0 +1,16 @@
+---
+title: 인증됨
+slug: Glossary/Certified
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**인증됨**은 애플리케이션, 콘텐츠 또는 데이터 전송이 해당 분야의 전문 지식을 갖춘 전문가에 의해 성공적으로 평가되어 완전성, 보안 및 신뢰성을 가진다는 것을 의미합니다.
+
+{{glossary("Cryptography", "암호화")}} 인증에 대한 자세한 내용은, {{glossary("Digital Certificate", "디지털 인증서")}}를 참조하세요.
+
+## 같이 보기
+
+- 위키백과의 [인증](https://en.wikipedia.org/wiki/Professional_certification#Computer_technology)

From ee1bbb565f754a318a596e1faa9a6294f22fd619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9A=8F=E4=BA=91?= <suiyun39@gmail.com>
Date: Mon, 18 Sep 2023 16:37:07 +0800
Subject: [PATCH 002/268] [zh-cn]: add View Transitions API document
 translation (#15643)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../api/document/startviewtransition/index.md |  71 ++++
 .../web/api/view_transitions_api/index.md     | 305 ++++++++++++++++++
 .../web/api/viewtransition/finished/index.md  |  55 ++++
 files/zh-cn/web/api/viewtransition/index.md   | 104 ++++++
 .../web/api/viewtransition/ready/index.md     |  93 ++++++
 .../viewtransition/skiptransition/index.md    |  45 +++
 .../updatecallbackdone/index.md               |  40 +++
 .../index.md                                  |  71 ++++
 .../index.md                                  |  62 ++++
 .../_doublecolon_view-transition-new/index.md | 107 ++++++
 .../_doublecolon_view-transition-old/index.md | 107 ++++++
 .../css/_doublecolon_view-transition/index.md |  50 +++
 12 files changed, 1110 insertions(+)
 create mode 100644 files/zh-cn/web/api/document/startviewtransition/index.md
 create mode 100644 files/zh-cn/web/api/view_transitions_api/index.md
 create mode 100644 files/zh-cn/web/api/viewtransition/finished/index.md
 create mode 100644 files/zh-cn/web/api/viewtransition/index.md
 create mode 100644 files/zh-cn/web/api/viewtransition/ready/index.md
 create mode 100644 files/zh-cn/web/api/viewtransition/skiptransition/index.md
 create mode 100644 files/zh-cn/web/api/viewtransition/updatecallbackdone/index.md
 create mode 100644 files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
 create mode 100644 files/zh-cn/web/css/_doublecolon_view-transition-image-pair/index.md
 create mode 100644 files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
 create mode 100644 files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
 create mode 100644 files/zh-cn/web/css/_doublecolon_view-transition/index.md

diff --git a/files/zh-cn/web/api/document/startviewtransition/index.md b/files/zh-cn/web/api/document/startviewtransition/index.md
new file mode 100644
index 00000000000000..c3b3db261f27e4
--- /dev/null
+++ b/files/zh-cn/web/api/document/startviewtransition/index.md
@@ -0,0 +1,71 @@
+---
+title: Document：startViewTransition() 方法
+short-title: startViewTransition()
+slug: Web/API/Document/startViewTransition
+---
+
+{{APIRef("Document")}}{{SeeCompatTable}}
+
+{{domxref("View Transitions API", "View Transitions API", "", "nocode")}} 的 **`startViewTransition()`** 方法开始一个新的视图过渡，并返回一个 {{domxref("ViewTransition")}} 对象来表示它。
+
+当调用 `startViewTransition()` 时，将按照[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述的步骤序列进行。
+
+## 语法
+
+```js-nolint
+startViewTransition(callback)
+```
+
+### 参数
+
+- `callback`
+  - : 一个在视图过渡过程中通常用于更新 DOM 的回调函数，它返回一个 {{jsxref("Promise")}}。这个回调函数在 API 截取了当前页面的屏幕截图后被调用。当回调函数返回的 Promise 兑现时，视图过渡将在下一帧开始。如果回调函数返回的 Promise 拒绝，过渡将被放弃。
+
+### 返回值
+
+一个 {{domxref("ViewTransition")}} 对象实例。
+
+## 示例
+
+### 基本用法
+
+在[基础视图过渡演示](https://mdn.github.io/dom-examples/view-transitions/)中，`updateView()` 函数处理支持和不支持 View Transitions API 的浏览器。在支持的浏览器中，我们调用 `startViewTransition()` 来启动视图过渡，而不关心返回值。
+
+```js
+function updateView(event) {
+  // 处理在 <a> 或 <img> 上触发事件的差异
+  let targetIdentifier;
+  if (event.target.firstChild === null) {
+    targetIdentifier = event.target;
+  } else {
+    targetIdentifier = event.target.firstChild;
+  }
+
+  const displayNewImage = () => {
+    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
+    galleryImg.src = mainSrc;
+    galleryCaption.textContent = targetIdentifier.alt;
+  };
+
+  // 浏览器不支持 View Transitions 时的回退方案：
+  if (!document.startViewTransition) {
+    displayNewImage();
+    return;
+  }
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => displayNewImage());
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/view_transitions_api/index.md b/files/zh-cn/web/api/view_transitions_api/index.md
new file mode 100644
index 00000000000000..710c2e61365407
--- /dev/null
+++ b/files/zh-cn/web/api/view_transitions_api/index.md
@@ -0,0 +1,305 @@
+---
+title: View Transitions API
+slug: Web/API/View_Transitions_API
+---
+
+{{SeeCompatTable}}{{DefaultAPISidebar("View Transitions API")}}
+
+**View Transitions API** 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。
+
+## 概念和用法
+
+视图过渡是一种流行的设计选择，可以减少用户认知负荷，帮助他们保持上下文，并减少他们在应用程序的状态或视图之间移动时感知的加载延迟。
+
+但是，在 Web 上创建视图过渡历来很困难。在单页应用程序（SPA）中，状态之间的过渡往往需要编写大量的 CSS 和 JavaScript 来：
+
+- 处理新旧内容的加载和定位。
+- 为新旧状态添加动画以创建过渡。
+- 防止用户与旧内容的意外交互而导致的问题。
+- 完成过渡后删除旧内容。
+
+像阅读位置丢失、焦点混乱和实时区域宣告的奇怪行为等无障碍问题，也可能由于新旧内容同时存在于 DOM 中而导致。此外，跨文档视图过渡（即在常规非 SPA 网站中跨越不同页面）是不可能的。
+
+View Transitions API 提供了一种更简单的方法来处理必需的 DOM 更改和过渡动画。
+
+> **备注：** View Transitions API 目前不支持跨文档视图过渡，但这已计划在未来的规范版本中实现，并正在积极开发中。
+
+### 创建基本视图过渡
+
+例如，一个 SPA 应用可能包含获取新内容和响应某种事件并更新 DOM 的功能，例如点击导航链接或从服务器推送更新。在我们的[基础视图过渡演示](https://mdn.github.io/dom-examples/view-transitions/)中，我们将其简化为一个 `displayNewImage()` 函数，该函数根据点击的缩略图显示新的全尺寸图像。我们将其封装在 `updateView()` 函数中，该函数仅在浏览器支持时才调用 View Transitions API：
+
+```js
+function updateView(event) {
+  // 处理在 <a> 或 <img> 上触发事件的差异
+  const targetIdentifier = event.target.firstChild || event.target;
+
+  const displayNewImage = () => {
+    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
+    galleryImg.src = mainSrc;
+    galleryCaption.textContent = targetIdentifier.alt;
+  };
+
+  // 浏览器不支持 View Transitions 时的回退方案：
+  if (!document.startViewTransition) {
+    displayNewImage();
+    return;
+  }
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => displayNewImage());
+}
+```
+
+这段代码足以处理显示的图像之间的过渡。支持的浏览器将以平滑的交叉淡入淡出（默认的视图过渡）显示新旧图像和标题的变化。它仍可以在不支持的浏览器中工作，但没有漂亮的动画效果。
+
+值得一提的是，`startViewTransition()` 返回一个 {{domxref("ViewTransition")}} 实例，该实例包含了多个 Promise, 允许你在到达视图过渡过程的不同阶段时运行代码。
+
+### 视图过渡过程
+
+让我们来看看这是如何工作的：
+
+1. 当调用 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 时，API 会截取当前页面的屏幕截图。
+2. 接下来，调用传递给 `startViewTransition()` 的回调函数，即 `displayNewImage`，这会导致 DOM 发生更改。
+
+   当回调函数成功运行时，{{domxref("ViewTransition.updateCallbackDone")}} Promise 兑现，允许你响应 DOM 更新。
+
+3. API 会捕获页面的新状态并实时展示。
+4. API 构造了一个具有以下结构的伪元素树：
+
+   ```plain
+   ::view-transition
+   └─ ::view-transition-group(root)
+      └─ ::view-transition-image-pair(root)
+         ├─ ::view-transition-old(root)
+         └─ ::view-transition-new(root)
+   ```
+
+   - {{cssxref("::view-transition")}} 是视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。
+   - {{cssxref("::view-transition-old")}} 是旧页面视图的屏幕截图，且 {{cssxref("::view-transition-new")}} 是新页面视图的实时展示。这两者都呈现为替换内容，就像 {{htmlelement("img")}} 或 {{htmlelement("video")}} 那样，这意味着它们可以方便的使用属性进行样式设置，例如 {{cssxref("object-fit")}} 和 {{cssxref("object-position")}}。
+
+   当过渡动画即将运行时，{{domxref("ViewTransition.ready")}} Promise 兑现，你可以响应它进行一些操作，例如运行自定义的 JavaScript 动画，而不是默认的动画。
+
+5. 旧页面视图的 {{cssxref("opacity")}} 从 1 过渡到 0，而新视图从 0 过渡到 1，这就是默认的交叉淡入淡出效果。
+6. 当过渡动画结束时，{{domxref("ViewTransition.finished")}} Promise 兑现，你可以响应它进行一些操作。
+
+### 为不同的元素使用不同的过渡效果
+
+目前，当 DOM 更新时发生变化的不同元素都使用相同的过渡动画。如果你想让不同的元素以不同于默认的“root”动画的方式进行过渡，你可以使用 {{cssxref("view-transition-name")}} 属性将它们分开。例如：
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+```
+
+我们给 {{htmlelement("figcaption")}} 元素设置了值为 `figure-caption` 的 `view-transition-name`，以将其与页面上的其余部分分开，便于在视图过渡时进行分离。
+
+应用此 CSS 后，伪元素树现在如下所示：
+
+```plain
+::view-transition
+├─ ::view-transition-group(root)
+│ └─ ::view-transition-image-pair(root)
+│     ├─ ::view-transition-old(root)
+│     └─ ::view-transition-new(root)
+└─ ::view-transition-group(figure-caption)
+  └─ ::view-transition-image-pair(figure-caption)
+      ├─ ::view-transition-old(figure-caption)
+      └─ ::view-transition-new(figure-caption)
+```
+
+第二组伪元素的存在允许将单独的视图过渡样式仅应用于 `<figcaption>`。不同的新旧页面视图之间捕获和处理是完全独立的。
+
+`view-transition-name` 的值可以是除 `none` 之外的任何值——`none` 值表示该元素不参与视图过渡。
+
+> **备注：** `view-transition-name` 必须是唯一的。如果两个渲染元素同时具有相同的 `view-transition-name`，{{domxref("ViewTransition.ready")}} 将拒绝并跳过过渡。
+
+### 自定义动画
+
+视图过渡伪元素具有默认的 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations)（在其[参考页面](#css_扩展)中详细介绍）。
+
+值得注意的是，`height`、`width`、`position` 和 `transform` 的过渡不使用平滑的淡入淡出动画。相反，高度和宽度过渡使用平滑的缩放动画。同时，位置和变换过渡将使用平滑的移动动画。
+
+你可以使用常规 CSS 以任何你想要的方式修改默认动画。
+
+例如，你要调整动画速度：
+
+```css
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.5s;
+}
+```
+
+让我们看些更有趣的东西——`<figcaption>` 的自定义动画：
+
+```css
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes shrink-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: auto;
+  right: 0;
+  left: auto;
+  transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+  animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+  animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+在这里，我们创建了一个自定义 CSS 动画并将其应用到 `::view-transition-old(figure-caption)` 和 `::view-transition-new(figure-caption)` 伪元素上。我们还为两者添加了许多其他样式，以使它们保持在同一位置，并防止默认样式干扰我们的自定义动画。
+
+请注意，我们还发现了另一种比上面更简单且产生更好结果的过渡选项。我们最终的 `<figcaption>` 视图过渡看起来像这样：
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: 100%;
+}
+```
+
+这是有效的，因为默认情况下，`::view-transition-group` 在新旧视图之间过渡高度和宽度。我们只需要在两个状态上设置固定的高度，就可以使其正常工作。
+
+> **备注：** [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)包含了其他几个自定义示例。
+
+### 使用 JavaScript 控制动画
+
+{{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 方法返回一个 {{domxref("ViewTransition")}} 对象实例，实例中包含多个 Promise 成员，允许你在到达不同状态的过渡时运行 JavaScript。例如，{{domxref("ViewTransition.ready")}} 在伪元素树创建并且动画即将开始时兑现，而 {{domxref("ViewTransition.finished")}} 在动画结束后兑现，此时新页面视图对用户可见且可交互。
+
+例如，下面的 JavaScript 可以用于创建从用户单击位置开始的圆形揭示视图过渡，动画由 {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} 提供。
+
+```js
+// 保存最后一次点击事件
+let lastClick;
+addEventListener("click", (event) => (lastClick = event));
+
+function spaNavigate(data) {
+  // 为不支持此 API 的浏览器提供回退方案：
+  if (!document.startViewTransition) {
+    updateTheDOMSomehow(data);
+    return;
+  }
+
+  // 获取点击位置，或者回退到屏幕中间
+  const x = lastClick?.clientX ?? innerWidth / 2;
+  const y = lastClick?.clientY ?? innerHeight / 2;
+  // 获取到最远角的距离
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => {
+    updateTheDOMSomehow(data);
+  });
+
+  // 等待伪元素创建完成：
+  transition.ready.then(() => {
+    // 新视图的根元素动画
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0 at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration: 500,
+        easing: "ease-in",
+        // 指定要附加动画的伪元素
+        pseudoElement: "::view-transition-new(root)",
+      },
+    );
+  });
+}
+```
+
+该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
+```
+
+## 接口
+
+- {{domxref("ViewTransition")}}
+  - : 表示视图过渡，并提供了在过渡到达不同状态时运行代码的功能（例如，准备运行动画或动画完成），或跳过视图过渡。
+
+## 其他接口扩展
+
+- {{domxref("Document.startViewTransition()")}}
+  - : 开始新的视图过渡并返回一个 {{domxref("ViewTransition")}} 对象来表示它。
+
+## CSS 扩展
+
+### 属性
+
+- {{cssxref("view-transition-name")}}
+  - : 为选定的元素提供单独的标识名称，并使其参与与根视图过渡不同的单独视图过渡——或者如果指定了 `none` 值，则不参与视图过渡。
+
+### 伪元素
+
+- {{cssxref("::view-transition")}}
+  - : 视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。
+- {{cssxref("::view-transition-group", "::view-transition-group()")}}
+  - : 单个视图过渡的根元素。
+- {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}}
+  - : 视图过渡的旧视图和新视图的容器——过渡前和过渡后。
+- {{cssxref("::view-transition-old", "::view-transition-old()")}}
+  - : 转换前的旧视图的静态屏幕截图。
+- {{cssxref("::view-transition-new", "::view-transition-new()")}}
+  - : 转换后的新视图的实时表示。
+
+## 示例
+
+- [基础视图过渡演示](https://mdn.github.io/dom-examples/view-transitions/)：一个基本的图像库演示，其中包含新旧图像之间的单独过渡，以及新旧标题之间的单独过渡。
+- [HTTP 203 播放列表](https://http203-playlist.netlify.app/)：一个更复杂的视频播放器演示应用程序，包含了许多不同的视图过渡，在[使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)中解释了其中的很多视图过渡。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [View Transitions API：创建平滑的页面过渡](https://stackdiary.com/view-transitions-api/)
diff --git a/files/zh-cn/web/api/viewtransition/finished/index.md b/files/zh-cn/web/api/viewtransition/finished/index.md
new file mode 100644
index 00000000000000..2b18bb99966331
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/finished/index.md
@@ -0,0 +1,55 @@
+---
+title: ViewTransition：finished 属性
+short-title: finished
+slug: Web/API/ViewTransition/finished
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`finished`** 只读属性是一个 {{jsxref("Promise")}}。会在过渡动画完成（新的页面视图对用户可见且可交互）时兑现。
+
+仅当传递给 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调函数抛出异常或返回的 Promise 被拒绝时，`finished` 才会被拒绝，这表示页面的新状态未被创建。
+
+如果过渡动画无法开始，或在动画期间使用 {{domxref("ViewTransition.skipTransition()")}} 跳过了过渡动画，那么视图过渡依旧可以到达最终状态，因此 `finished` 依旧会被兑现。
+
+## 值
+
+一个 promise。
+
+## 示例
+
+### 不同的导航使用不同的过渡效果
+
+有时，某些导航需要特定的过渡效果，例如后退导航可能与前进导航的过渡效果不同。处理这种情况的最佳实践是在 `<html>` 元素上设置一个类名以处理过渡（使用特定的选择器应用正确的动画），然后在过渡结束后删除该类名。
+
+```js
+async function handleTransition() {
+  if (isBackNavigation) {
+    document.documentElement.classList.add("back-transition");
+  }
+
+  const transition = document.startViewTransition(() =>
+    updateTheDOMSomehow(data),
+  );
+
+  try {
+    await transition.finished;
+  } finally {
+    document.documentElement.classList.remove("back-transition");
+  }
+}
+```
+
+> **备注：** `isBackNavigation` 不是内置特性；它是一个理论上存在的函数，可以使用 [Navigation API](/zh-CN/docs/Web/API/Navigation_API) 或类似的特性实现。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/index.md b/files/zh-cn/web/api/viewtransition/index.md
new file mode 100644
index 00000000000000..9b621ecccda8c7
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/index.md
@@ -0,0 +1,104 @@
+---
+title: ViewTransition
+slug: Web/API/ViewTransition
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("View Transitions API", "View Transitions API", "", "nocode")}} 的 **`ViewTransition`** 接口表示视图过渡，并提供了在过渡到达不同状态时运行代码的功能（例如，准备运行动画，或动画完成），或跳过视图过渡。
+
+此对象类型由 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 方法返回。当调用 `startViewTransition()` 时，将按照[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述的步骤序列进行。这也解释了不同的 Promise 何时兑现。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+- {{domxref("ViewTransition.finished")}} {{Experimental_Inline}}
+  - : 一个在过渡动画完成后兑现的 {{jsxref("Promise")}}，新的页面视图对用户可见且可交互。
+- {{domxref("ViewTransition.ready")}} {{Experimental_Inline}}
+  - : 一个在伪元素树创建且过渡动画即将开始时兑现的 {{jsxref("Promise")}}。
+- {{domxref("ViewTransition.updateCallbackDone")}} {{Experimental_Inline}}
+  - : 当 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调返回的 {{jsxref("Promise")}} 兑现时，该 {{jsxref("Promise")}} 也会兑现。
+
+## 实例方法
+
+- {{domxref("ViewTransition.skipTransition", "skipTransition()")}} {{Experimental_Inline}}
+  - : 跳过视图过渡的动画部分，但不会跳过运行 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调，该回调会更新 DOM。
+
+## 示例
+
+在下面的示例中，{{domxref("ViewTransition.ready")}} 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} 提供。
+
+```js
+// 保存最后一次点击事件
+let lastClick;
+addEventListener("click", (event) => (lastClick = event));
+
+function spaNavigate(data) {
+  // 为不支持此 API 的浏览器提供回退方案：
+  if (!document.startViewTransition) {
+    updateTheDOMSomehow(data);
+    return;
+  }
+
+  // 获取点击位置，或者回退到屏幕中间
+  const x = lastClick?.clientX ?? innerWidth / 2;
+  const y = lastClick?.clientY ?? innerHeight / 2;
+  // 获取到最远角的距离
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => {
+    updateTheDOMSomehow(data);
+  });
+
+  // 等待伪元素创建完成：
+  transition.ready.then(() => {
+    // 新视图的根元素动画
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0 at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration: 500,
+        easing: "ease-in",
+        // 指定要附加动画的伪元素
+        pseudoElement: "::view-transition-new(root)",
+      },
+    );
+  });
+}
+```
+
+该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/ready/index.md b/files/zh-cn/web/api/viewtransition/ready/index.md
new file mode 100644
index 00000000000000..3a13d77acc9c73
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/ready/index.md
@@ -0,0 +1,93 @@
+---
+title: ViewTransition：ready 属性
+short-title: ready
+slug: Web/API/ViewTransition/ready
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`ready`** 只读属性是一个 {{jsxref("Promise")}}。会在伪元素树被创建且过渡动画即将开始时兑现。
+
+如果视图过渡无法开始，`ready` 就会被拒绝。这可能是由于错误的配置，例如重复的 {{cssxref("view-transition-name")}}，或者是因为 {{domxref("Document.startViewTransition()")}} 的回调函数抛出异常或返回的 Promise 被拒绝。
+
+## 值
+
+一个 promise。
+
+## 示例
+
+在下面的示例中，`ready` 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} 提供。
+
+```js
+// 保存最后一次点击事件
+let lastClick;
+addEventListener("click", (event) => (lastClick = event));
+
+function spaNavigate(data) {
+  // 为不支持此 API 的浏览器提供回退方案：
+  if (!document.startViewTransition) {
+    updateTheDOMSomehow(data);
+    return;
+  }
+
+  // 获取点击位置，或者回退到屏幕中间
+  const x = lastClick?.clientX ?? innerWidth / 2;
+  const y = lastClick?.clientY ?? innerHeight / 2;
+  // 获取到最远角的距离
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => {
+    updateTheDOMSomehow(data);
+  });
+
+  // 等待伪元素创建完成：
+  transition.ready.then(() => {
+    // 新视图的根元素动画
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0 at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration: 500,
+        easing: "ease-in",
+        // 指定要附加动画的伪元素
+        pseudoElement: "::view-transition-new(root)",
+      },
+    );
+  });
+}
+```
+
+该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/skiptransition/index.md b/files/zh-cn/web/api/viewtransition/skiptransition/index.md
new file mode 100644
index 00000000000000..030ab3517cba9a
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/skiptransition/index.md
@@ -0,0 +1,45 @@
+---
+title: ViewTransition：skipTransition() 方法
+short-title: skipTransition()
+slug: Web/API/ViewTransition/skipTransition
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`skipTransition()`** 方法跳过视图过渡的动画部分，但不跳过更新 DOM 的 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 回调函数。
+
+## 语法
+
+```js-nolint
+skipTransition()
+```
+
+### 参数
+
+无
+
+### 返回值
+
+`undefined`。
+
+## 示例
+
+```js
+// 开始新的视图过渡
+const transition = document.startViewTransition(() => displayNewImage());
+
+// 跳过视图过渡动画，仅更新 DOM
+transition.skipTransition();
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/updatecallbackdone/index.md b/files/zh-cn/web/api/viewtransition/updatecallbackdone/index.md
new file mode 100644
index 00000000000000..a8d63f15b03256
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/updatecallbackdone/index.md
@@ -0,0 +1,40 @@
+---
+title: ViewTransition：updateCallbackDone 属性
+short-title: updateCallbackDone
+slug: Web/API/ViewTransition/updateCallbackDone
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`updateCallbackDone`** 只读属性是一个 {{jsxref("Promise")}}。当传递给 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调函数返回的 Promise 兑现时，该 Promise 也会兑现，当回调函数返回的 Promise 被拒绝时，该 Promise 也会被拒绝。
+
+当你不关心过渡动画的成功或失败，而只关心 DOM 是否更新以及何时更新时，`updateCallbackDone` 非常有用。
+
+## 值
+
+一个 promise。
+
+## 示例
+
+```js
+// 开始新的视图过渡
+const transition = document.startViewTransition(() => displayNewImage());
+
+transition.updateCallbackDone.then(() => {
+  // 响应 DOM 更新成功
+});
+```
+
+参见[过渡作为增强功能](https://developer.chrome.com/docs/web-platform/view-transitions/#transitions-as-an-enhancement)以获取一个有用的示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
new file mode 100644
index 00000000000000..8af5074149380c
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
@@ -0,0 +1,71 @@
+---
+title: "::view-transition-group"
+slug: Web/CSS/::view-transition-group
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-group`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示单个视图过渡组。
+
+在视图过渡期间，`::view-transition-group` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它只能是 {{cssxref("::view-transition")}} 的子节点，并且有一个 {{cssxref("::view-transition-image-pair")}} 子节点。
+
+`::view-transition-group` 在 UA 样式表中具有以下默认样式：
+
+```css
+html::view-transition-group(*) {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  animation-duration: 0.25s;
+  animation-fill-mode: both;
+}
+```
+
+默认情况下，该元素最初会镜像表示 {{cssxref("::view-transition-old")}} 伪元素的大小和位置，即旧视图状态。如果没有旧视图状态，则会镜像表示 {{cssxref("::view-transition-new")}} 伪元素的大小和位置，即新视图状态。
+
+如果同时存在新旧两种视图状态，则视图过渡样式表中的样式会将该伪元素的 {{cssxref("width")}} 和 {{cssxref("height")}} 从旧视图状态的边框盒大小动画到新视图状态的边框盒大小。
+
+> **备注：** 视图过渡样式表中的样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+
+此外，元素的变换是从旧视图状态的屏幕空间，变换到新视图状态的屏幕空间。由于动画属性的值是在过渡开始时确定的，因此此样式是动态生成的。
+
+## 语法
+
+```css-nolint
+::view-transition-group(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+view-transition-group(embed-container) {
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  z-index: 1;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-image-pair/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-image-pair/index.md
new file mode 100644
index 00000000000000..e7313d59ef46ef
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-image-pair/index.md
@@ -0,0 +1,62 @@
+---
+title: "::view-transition-image-pair"
+slug: Web/CSS/::view-transition-image-pair
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-image-pair`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示一个视图过渡的旧视图状态和新视图状态的容器——即过渡前和过渡后的状态。
+
+在视图过渡期间，`::view-transition-image-pair` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它只能是 {{cssxref("::view-transition-group")}} 的子节点。并且可以有一个 {{cssxref("::view-transition-new")}} 或一个 {{cssxref("::view-transition-old")}} 子节点，亦或是两者都有。
+
+`::view-transition-image-pair` 在 UA 样式表中具有以下默认样式：
+
+```css
+html::view-transition-image-pair(*) {
+  position: absolute;
+  inset: 0;
+
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+}
+```
+
+默认情况下，`::view-transition-image-pair` 在视图过渡样式表中设置了 {{cssxref("isolation", "isolation: isolate")}}，以便其子元素可以使用非正常混合模式进行混合，而不会影响其他视觉输出。
+
+## 语法
+
+```css-nolint
+::view-transition-image-pair(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
new file mode 100644
index 00000000000000..2499e34b688637
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
@@ -0,0 +1,107 @@
+---
+title: "::view-transition-new"
+slug: Web/CSS/::view-transition-new
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-new`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示视图过渡的新视图状态——即过渡后新视图的实时表示。
+
+在视图过渡期间，`::view-transition-new` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它只能是 {{cssxref("::view-transition-image-pair")}} 的子节点，并且它不会有任何子节点。
+
+它是一个可替换元素，因此可以使用 {{cssxref("object-fit")}} 和 {{cssxref("object-position")}} 等属性进行操作。它的自然尺寸等于内容的大小。
+
+`::view-transition-new` 在 UA 样式表中具有以下默认样式：
+
+```css
+@keyframes -ua-view-transition-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+html::view-transition-new(*) {
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: auto;
+
+  animation-name: -ua-view-transition-fade-in;
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+}
+```
+
+> **备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-new`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+
+## 语法
+
+```css-nolint
+::view-transition-new(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes shrink-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: auto;
+  right: 0;
+  left: auto;
+  transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+  animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+  animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
new file mode 100644
index 00000000000000..81df7be9c806e4
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
@@ -0,0 +1,107 @@
+---
+title: "::view-transition-old"
+slug: Web/CSS/::view-transition-old
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-old`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示视图过渡的旧视图状态——即过渡前旧视图的静态屏幕截图。
+
+在视图过渡期间，`::view-transition-old` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述，前提是有一个旧视图状态需要表示。它只能是 {{cssxref("::view-transition-image-pair")}} 的子节点，并且它不会有任何子节点。
+
+它是一个可替换元素，因此可以使用 {{cssxref("object-fit")}} 和 {{cssxref("object-position")}} 等属性进行操作。它的自然尺寸等于内容的大小。
+
+`::view-transition-old` 在 UA 样式表中具有以下默认样式：
+
+```css
+@keyframes -ua-view-transition-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+html::view-transition-old(*) {
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: auto;
+
+  animation-name: -ua-view-transition-fade-out;
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+}
+```
+
+> **备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-old`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+
+## 语法
+
+```css-nolint
+::view-transition-old(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes shrink-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: auto;
+  right: 0;
+  left: auto;
+  transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+  animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+  animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition/index.md b/files/zh-cn/web/css/_doublecolon_view-transition/index.md
new file mode 100644
index 00000000000000..761ba3bcc667f9
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition/index.md
@@ -0,0 +1,50 @@
+---
+title: "::view-transition"
+slug: Web/CSS/::view-transition
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。
+
+在视图过渡期间，`::view-transition` 包含在相关的伪元素树中，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它是该树的顶级节点，并且有一个或多个 {{cssxref("::view-transition-group")}} 子节点。
+
+`::view-transition` 在 UA 样式表中具有以下默认样式：
+
+```css
+html::view-transition {
+  position: fixed;
+  inset: 0;
+}
+```
+
+所有 {{cssxref("::view-transition-group")}} 伪元素都相对于视图过渡根元素定位。
+
+## 语法
+
+```css
+::view-transition {
+  /* ... */
+}
+```
+
+## 示例
+
+```css
+::view-transition {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)

From 765522e51fbbc9d7f0120cb80fdd91d211bc6b7c Mon Sep 17 00:00:00 2001
From: KyeongSang Yu <yukyeongsang@gmail.com>
Date: Mon, 18 Sep 2023 17:39:34 +0900
Subject: [PATCH 003/268] [ko] update translation to permission api in Web API
 (#15312)

* add translation to permission api
---
 files/ko/web/api/permissions_api/index.md | 70 +++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 files/ko/web/api/permissions_api/index.md

diff --git a/files/ko/web/api/permissions_api/index.md b/files/ko/web/api/permissions_api/index.md
new file mode 100644
index 00000000000000..c3662510a26cd0
--- /dev/null
+++ b/files/ko/web/api/permissions_api/index.md
@@ -0,0 +1,70 @@
+---
+title: Permissions API
+slug: Web/API/Permissions_API
+l10n:
+  sourceCommit: 381c51574a3e6a07ee09c63493452440f046038d
+---
+
+{{DefaultAPISidebar("Permissions API")}}
+
+**Permissions API**는 현재 맥락에 따른 API 권한의 상태를 조회할 수 있는 일관된 프로그래밍 방식을 제공합니다. 예를 들어, Permissions API를 사용하여 특정 API에 대한 접근 권한이 부여되었는지 또는 거부되었는지, 특정 사용자 권한이 필요한지를 확인할 수 있습니다.
+
+이 API의 권한은 보안 맥락에서 API를 사용하기 위한 모든 요구 사항, 문서에 적용된 권한 정책 제한, 사용자 프롬프트 등 맥락에 대한 모든 보안 제한을 효과적으로 집계합니다. 예를 들어 API가 [권한 정책](/ko/docs/Web/HTTP/Headers/Permissions-Policy)에 의해 제한되는 경우, 반환된 권한은 `거부(denied)`되고 사용자에게 접근 여부를 묻는 메시지가 표시되지 않습니다.
+
+> **참고:** 이 기능은 [WorkerNavigator.permissions](/ko/docs/Web/API/WorkerNavigator/permissions#browser_support) 속성을 지원하는 [Web Workers](/ko/docs/Web/API/Web_Workers_API)에서 사용할 수 있습니다.
+
+## 개념 및 사용법
+
+예를 들어, [Notifications API](/ko/docs/Web/API/Notifications_API)는 권한을 요청하고 권한 상태를 확인하는 자체 메서드를 제공한 반면, [Geolocation API](/ko/docs/Web/API/Geolocation)는 그렇지 않았습니다. Permissions API는 개발자가 권한 작업을 위한 일관되고 더 나은 사용자 환경을 구현할 수 있는 도구를 제공합니다.
+
+`permissions` 속성은 표준 브라우징 맥락과 작업자 맥락({{domxref("WorkerNavigator")}} - 작업자 내부에서 권한 확인이 가능) 모두에서 {{domxref("Navigator")}} 객체에서 사용할 수 있게 되었으며, Permissions API 기능에 대한 접근을 제공하는 {{domxref("Permissions")}} 객체를 반환합니다.
+
+이 객체가 있으면, {{domxref("Permissions.query()")}} 메서드를 사용하여 권한을 조회하여, 특정 API에 대한 {{domxref("PermissionStatus")}}로 확인되는 프로미스를 반환하는 등 권한 관련 작업을 수행할 수 있습니다.
+
+### 권한 인식 API 목록(Permission-aware APIs)
+
+Permissions API를 사용하여 모든 API의 권한 상태를 조회할 수 있는 것은 아닙니다. 권한을 인식 가능한 API의 전체 목록은 다음과 같습니다.
+
+- [Background Synchronization API](/ko/docs/Web/API/Background_Synchronization_API): `background-sync` (항상 부여되어야 합니다.)
+- [Clipboard API](/ko/docs/Web/API/Clipboard_API): `clipboard-read`, `clipboard-write`
+- [Geolocation API](/ko/docs/Web/API/Geolocation_API): `geolocation`
+- [Local Font Access API](/ko/docs/Web/API/Local_Font_Access_API)
+- [Media Capture and Streams API](/ko/docs/Web/API/Media_Capture_and_Streams_API): `microphone`, `camera`
+- [Notifications API](/ko/docs/Web/API/Notifications_API): `notifications`
+- [Payment Handler API](/ko/docs/Web/API/Payment_Handler_API): `payment-handler`
+- [Push API](/ko/docs/Web/API/Push_API): `push`
+- [Sensor APIs](/ko/docs/Web/API/Sensor_APIs): `accelerometer`, `gyroscope`, `magnetometer`, `ambient-light-sensor`
+- [Storage Access API](/ko/docs/Web/API/Storage_Access_API): `storage-access`
+- [Storage API](/ko/docs/Web/API/Storage_API): `persistent-storage`
+- [Web Audio Output Devices API](/ko/docs/Web/API/Audio_Output_Devices_API): `speaker-selection`
+- [Web MIDI API](/ko/docs/Web/API/Web_MIDI_API): `midi`
+
+## 예제
+
+위치 찾기라는 간단한 예제를 만들었습니다. [예제를 실시간으로 실행](https://chrisdavidmills.github.io/location-finder-permissions-api/)하거나 [Github에서 소스 코드를 확인](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)할 수 있습니다.
+
+작동 방식에 대한 자세한 내용은 [Permissions API 사용하기](/ko/docs/Web/API/Permissions_API/Using_the_Permissions_API) 문서를 참조하세요.
+
+## 인터페이스
+
+- {{domxref("Navigator.permissions")}} 및 {{domxref("WorkerNavigator.permissions")}} {{ReadOnlyInline}}
+  - : 기본 맥락 및 작업자 맥락에서 각각 {{domxref("Permissions")}} 객체에 대한 접근을 제공합니다.
+- {{domxref("Permissions")}}
+  - : 권한을 조회하고, 해제하는 메서드 등 핵심 권한 API 기능을 제공합니다.
+- {{domxref("PermissionStatus")}}
+  - : 권한의 현재 상태에 대한 액세스와 권한 상태 변경에 응답하는 이벤트 핸들러를 제공합니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Permissions API 사용하기](/ko/docs/Web/API/Permissions_API/Using_the_Permissions_API)
+- [Permissions API를 사용하여 사용자가 카메라 액세스를 허용하거나 거부하는 빈도 감지하기](https://blog.addpipe.com/using-permissions-api-to-detect-getusermedia-responses/)
+- {{DOMxref("Notification.permission_static", "Notification.permission")}}
+- [개인정보 보호, 권한 및 정보 보안](/ko/docs/Web/Privacy)

From 12c851fef38e6bdf60004029f7a58da10ff53bc0 Mon Sep 17 00:00:00 2001
From: BenjaminLesne <73464907+BenjaminLesne@users.noreply.github.com>
Date: Mon, 18 Sep 2023 13:33:00 +0200
Subject: [PATCH 004/268] [fr] fix:15843 PNG lossless compression (#15899)

* [fr] fix:15843 PNG lossless compression

* removed plurial and removed anglicism
---
 files/fr/web/html/element/img/index.md          | 2 +-
 files/fr/web/media/formats/image_types/index.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/fr/web/html/element/img/index.md b/files/fr/web/html/element/img/index.md
index 80ac429e1e22da..d4e06b4f3a8760 100644
--- a/files/fr/web/html/element/img/index.md
+++ b/files/fr/web/html/element/img/index.md
@@ -32,7 +32,7 @@ Les formats d'image qu'on rencontre le plus fréquemment sur le Web sont&nbsp;:
 - [AVIF (<i lang="en">AV1 Image File Format</i>)](/fr/docs/Web/Media/Formats/Image_types#avif) pour les images et les images animées avec de hautes performances
 - [GIF (<i lang="en">Graphics Interchange Format</i>)](/fr/docs/Web/Media/Formats/Image_types#gif_graphics_interchange_format) pour les images et animations _simples_
 - [JPEG (<i lang="en">Joint Photographic Expert Group image</i>)](/fr/docs/Web/Media/Formats/Image_types#jpeg_joint_photographic_experts_group_image) pour une compression avec pertes d'images statiques, il s'agit du format le plus utilisé
-- [PNG (<i lang="en">Portable Network Graphics</i>)](/fr/docs/Web/Media/Formats/Image_types#png_portable_network_graphics) pour une compression avec pertes d'images statiques, de meilleure qualité que le JPEG
+- [PNG (<i lang="en">Portable Network Graphics</i>)](/fr/docs/Web/Media/Formats/Image_types#png_portable_network_graphics) pour une compression sans perte d'images statiques, de meilleure qualité que le JPEG
 - [SVG (<i lang="en">Scalable Vector Graphics</i>)](/fr/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics) pour un format d'image vectorielle (qui permet de dessiner une image précisément à différentes échelles)
 - [WebP (<i lang="en">Web Picture format</i>)](/fr/docs/Web/Media/Formats/Image_types#webp) pour les images statiques et animées
 
diff --git a/files/fr/web/media/formats/image_types/index.md b/files/fr/web/media/formats/image_types/index.md
index 0374dc1f38d2ae..01e9a6971248b0 100644
--- a/files/fr/web/media/formats/image_types/index.md
+++ b/files/fr/web/media/formats/image_types/index.md
@@ -891,7 +891,7 @@ Le JPEG est en fait un format de données pour les photos compressées, plutôt
 
 ### PNG (Portable Network Graphics)
 
-Le [PNG](/fr/docs/Glossary/PNG) (prononcé "**png**") utilise une compression sans perte ou avec perte afin de fournir une compression plus efficace, et prend en charge des profondeurs de couleurs plus élevées que [GIF](#gif), ainsi qu'une transparence alpha complète.
+Le format d'image [PNG](/fr/docs/Glossary/PNG) utilise une compression sans perte, prend en charge des profondeurs de couleurs plus élevées que le [GIF](#gif), est plus efficace, et prend complètement en charge la transparence alpha.
 
 Le format PNG est largement soutenu, tous les principaux navigateurs offrant une prise en charge complète de ses fonctionnalités. Internet Explorer, qui a introduit le support PNG dans les versions 4-5, ne l'a pas entièrement pris en charge avant IE 9, et a connu de nombreux bogues tristement célèbres pendant de nombreuses années, y compris dans l'Internet Explorer 6, autrefois omniprésent. Cela a ralenti l'adoption de la PNG, mais elle est maintenant couramment utilisée, surtout lorsqu'il faut reproduire avec précision l'image source.
 

From dd28fdcef3623ce8106759b94ec93c0279c26f0b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 18 Sep 2023 11:59:24 +0000
Subject: [PATCH 005/268] Bump markdownlint-cli2 from 0.9.2 to 0.10.0 (#15924)

---
 package.json |  2 +-
 yarn.lock    | 25 +++++++++++++++----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 8b1cbedbc36912..a56434c446921e 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
     "markdown-it": "^13.0.1",
-    "markdownlint-cli2": "0.9.2",
+    "markdownlint-cli2": "0.10.0",
     "markdownlint-rule-search-replace": "1.2.0",
     "ora": "^7.0.1",
     "prettier": "3.0.3",
diff --git a/yarn.lock b/yarn.lock
index 9f0ea6681e237c..4de69fdae357da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -495,17 +495,17 @@ markdownlint-cli2-formatter-default@0.0.4:
   resolved "https://registry.yarnpkg.com/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.4.tgz#81e26b0a50409c0357c6f0d38d8246946b236fab"
   integrity sha512-xm2rM0E+sWgjpPn1EesPXx5hIyrN2ddUnUwnbCsD/ONxYtw3PX6LydvdH6dciWAoFDpwzbHM1TO7uHfcMd6IYg==
 
-markdownlint-cli2@0.9.2:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/markdownlint-cli2/-/markdownlint-cli2-0.9.2.tgz#ed714905e0e4ce583e5c3d95134ba1e2d0287552"
-  integrity sha512-ndijEHIOikcs29W8068exHXlfkFviGFT/mPhREia7zSfQzHvTDkL2s+tWizvELjLHiKRO4KGTkkJyR3oeR8A5g==
+markdownlint-cli2@0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/markdownlint-cli2/-/markdownlint-cli2-0.10.0.tgz#4ba94b6cc648eb62475432ebcc19557afcdd487b"
+  integrity sha512-kVxjPyKFC+eW7iqcxiNI50RDzwugpXkEX5eQlDso/0IUs9M73jXYguLFHDzgi5KatcxU/57Fu8KoGtkFft9lfA==
   dependencies:
     globby "13.2.2"
-    markdownlint "0.30.0"
+    markdownlint "0.31.1"
     markdownlint-cli2-formatter-default "0.0.4"
     micromatch "4.0.5"
     strip-json-comments "5.0.1"
-    yaml "2.3.1"
+    yaml "2.3.2"
 
 markdownlint-micromark@0.1.2:
   version "0.1.2"
@@ -531,10 +531,10 @@ markdownlint-rule-search-replace@1.2.0:
   dependencies:
     markdownlint-rule-helpers "0.21.0"
 
-markdownlint@0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.30.0.tgz#e5b43f794c6810299cd4be86f8d54108e9169860"
-  integrity sha512-nInuFvI/rEzanAOArW5490Ez4EYpB5ODqVM0mcDYCPx9DKJWCQqCgejjiCvbSeE7sjbDscVtZmwr665qpF5xGA==
+markdownlint@0.31.1:
+  version "0.31.1"
+  resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.31.1.tgz#f014ed2d3614c5dbc351b7f65641ccc0a5facdb7"
+  integrity sha512-CKMR2hgcIBrYlIUccDCOvi966PZ0kJExDrUi1R+oF9PvqQmCrTqjOsgIvf2403OmJ+CWomuzDoylr6KbuMyvHA==
   dependencies:
     markdown-it "13.0.1"
     markdownlint-micromark "0.1.7"
@@ -888,6 +888,11 @@ yaml@2.3.1:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
   integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
 
+yaml@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
+  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
+
 yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"

From bbd382a3ae748c4984b9c35fac213b8c43f0a90b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= <mikecat@users.noreply.github.com>
Date: Tue, 19 Sep 2023 00:45:53 +0900
Subject: [PATCH 006/268] Translate BluetoothCharacteristicProperties (#15798)

* Translate BluetoothCharacteristicProperties

* Improve wording
---
 .../authenticatedsignedwrites/index.md        | 22 +++++++
 .../broadcast/index.md                        | 22 +++++++
 .../index.md                                  | 63 +++++++++++++++++++
 .../indicate/index.md                         | 22 +++++++
 .../notify/index.md                           | 22 +++++++
 .../read/index.md                             | 22 +++++++
 .../reliablewrite/index.md                    | 22 +++++++
 .../writableauxiliaries/index.md              | 22 +++++++
 .../write/index.md                            | 24 +++++++
 .../writewithoutresponse/index.md             | 22 +++++++
 10 files changed, 263 insertions(+)
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/broadcast/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/indicate/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/notify/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/read/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/reliablewrite/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/writableauxiliaries/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/write/index.md
 create mode 100644 files/ja/web/api/bluetoothcharacteristicproperties/writewithoutresponse/index.md

diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.md
new file mode 100644
index 00000000000000..d3e47870fbc682
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: authenticatedSignedWrites プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/authenticatedSignedWrites
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`authenticatedSignedWrites`** は、キャラクタリスティックの値への署名付き書き込みが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/broadcast/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/broadcast/index.md
new file mode 100644
index 00000000000000..4bb99addab36b6
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/broadcast/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: broadcast プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/broadcast
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`broadcast`** は、Server Characteristic Configuration Descriptor によりキャラクタリスティックの値のブロードキャストが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/index.md
new file mode 100644
index 00000000000000..b31ad57c77c60a
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/index.md
@@ -0,0 +1,63 @@
+---
+title: BluetoothCharacteristicProperties
+slug: Web/API/BluetoothCharacteristicProperties
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Bluetooth API")}}{{securecontext_header}}{{SeeCompatTable}}
+
+[Web Bluetooth API](/ja/docs/Web/API/Web_Bluetooth_API) の **`BluetoothCharacteristicProperties`** インターフェイスは、指定の {{domxref('BluetoothRemoteGATTCharacteristic')}} で有効な操作を提供します。
+
+このインターフェイスは、{{DOMxRef("BluetoothRemoteGATTCharacteristic.properties")}} を呼ぶと返されます。
+
+## インスタンスプロパティ
+
+- {{DOMxRef("BluetoothCharacteristicProperties.authenticatedSignedWrites","authenticatedSignedWrites")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックの値への署名付き書き込みが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.broadcast", "broadcast")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : Server Characteristic Configuration Descriptor によりキャラクタリスティックの値のブロードキャストが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.indicate","indicate")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックの値のアクノリッジメントありのインジケーションが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.notify","notify")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックの値のアクノリッジメントなしのノーティフィケーションが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.read", "read")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックの値の読み取りが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.reliableWrite","reliableWrite")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.writableAuxiliaries","writableAuxiliaries")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックディスクリプターへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.write","write")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックへのレスポンスありの書き込みが許可されているならば `true` となる `boolean` 値を返します。
+- {{DOMxRef("BluetoothCharacteristicProperties.writeWithoutResponse","writeWithoutResponse")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : キャラクタリスティックへのレスポンスなしの書き込みが許可されているならば `true` となる `boolean` 値を返します。
+
+## 例
+
+以下の例では、GATT キャラクタリスティックが値の変化の通知に対応しているかを調べる方法を示します。
+
+```js
+let device = await navigator.bluetooth.requestDevice({
+  filters: [{ services: ["heart_rate"] }],
+});
+let gatt = await device.gatt.connect();
+let service = await gatt.getPrimaryService("heart_rate");
+let characteristic = await service.getCharacteristic("heart_rate_measurement");
+if (characteristic.properties.notify) {
+  characteristic.addEventListener(
+    "characteristicvaluechanged",
+    async (event) => {
+      console.log(`心拍数測定の受信: ${event.target.value}`);
+    },
+  );
+  await characteristic.startNotifications();
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/indicate/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/indicate/index.md
new file mode 100644
index 00000000000000..78afa668f1c6fb
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/indicate/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: indicate プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/indicate
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`indicate`** は、キャラクタリスティックの値のアクノリッジメントありのインジケーションが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/notify/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/notify/index.md
new file mode 100644
index 00000000000000..693ab16ea3bc02
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/notify/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: notify プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/notify
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`notify`** は、キャラクタリスティックの値のアクノリッジメントなしのノーティフィケーションが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/read/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/read/index.md
new file mode 100644
index 00000000000000..4957e97964dda4
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/read/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: read プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/read
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`read`** は、キャラクタリスティックの値の読み取りが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/reliablewrite/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/reliablewrite/index.md
new file mode 100644
index 00000000000000..86730fc54c61f5
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/reliablewrite/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: reliableWrite プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/reliableWrite
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`reliableWrite`** は、キャラクタリスティックへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/writableauxiliaries/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/writableauxiliaries/index.md
new file mode 100644
index 00000000000000..2878caf04b9a65
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/writableauxiliaries/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: writableAuxiliaries プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/writableAuxiliaries
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`writableAuxiliaries`** は、キャラクタリスティックディスクリプターへの信頼性のある書き込みが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/write/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/write/index.md
new file mode 100644
index 00000000000000..19336523b8b230
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/write/index.md
@@ -0,0 +1,24 @@
+---
+title: "BluetoothCharacteristicProperties: write プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/write
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`write`** は、キャラクタリスティックへのレスポンスありの書き込みが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+null
diff --git a/files/ja/web/api/bluetoothcharacteristicproperties/writewithoutresponse/index.md b/files/ja/web/api/bluetoothcharacteristicproperties/writewithoutresponse/index.md
new file mode 100644
index 00000000000000..67f489e098edbe
--- /dev/null
+++ b/files/ja/web/api/bluetoothcharacteristicproperties/writewithoutresponse/index.md
@@ -0,0 +1,22 @@
+---
+title: "BluetoothCharacteristicProperties: writeWithoutResponse プロパティ"
+slug: Web/API/BluetoothCharacteristicProperties/writeWithoutResponse
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{APIRef("Bluetooth API")}}{{SeeCompatTable}}
+
+{{domxref("BluetoothCharacteristicProperties")}} インターフェイスの読み取り専用プロパティ **`writeWithoutResponse`** は、キャラクタリスティックへのレスポンスなしの書き込みが許可されているならば `true` となる `boolean` 値を返します。
+
+## 値
+
+論理値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 509b4aa8b8fc1c083486726942280db8cd5f473c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= <mikecat@users.noreply.github.com>
Date: Tue, 19 Sep 2023 00:46:57 +0900
Subject: [PATCH 007/268] Translate MediaStreamAudioDestinationNode (#15845)

---
 .../mediastreamaudiodestinationnode/index.md  | 71 +++++++++++++++++++
 .../mediastreamaudiodestinationnode/index.md  | 48 +++++++++++++
 .../stream/index.md                           | 32 +++++++++
 3 files changed, 151 insertions(+)
 create mode 100644 files/ja/web/api/mediastreamaudiodestinationnode/index.md
 create mode 100644 files/ja/web/api/mediastreamaudiodestinationnode/mediastreamaudiodestinationnode/index.md
 create mode 100644 files/ja/web/api/mediastreamaudiodestinationnode/stream/index.md

diff --git a/files/ja/web/api/mediastreamaudiodestinationnode/index.md b/files/ja/web/api/mediastreamaudiodestinationnode/index.md
new file mode 100644
index 00000000000000..d9f45f795fe0ad
--- /dev/null
+++ b/files/ja/web/api/mediastreamaudiodestinationnode/index.md
@@ -0,0 +1,71 @@
+---
+title: MediaStreamAudioDestinationNode
+slug: Web/API/MediaStreamAudioDestinationNode
+l10n:
+  sourceCommit: 0d8d3980dc8b8267b60e899c41a76a2832556cbc
+---
+
+{{APIRef("Web Audio API")}}
+
+`MediaStreamAudioDestinationNode` インターフェイスは、単一の `AudioMediaStreamTrack` を持つ [WebRTC](/ja/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} からなる音声の出力先を表します。これは、{{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} で取得した `MediaStream` と同様に用いることができます。
+
+これは音声の出力先としてふるまう {{domxref("AudioNode")}} であり、{{domxref("AudioContext.createMediaStreamDestination()")}} メソッドで生成できます。
+
+{{InheritanceDiagram}}
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">入力数</th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">出力数</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">チャンネル数</th>
+      <td><code>2</code></td>
+    </tr>
+    <tr>
+      <th scope="row">チャンネルカウントモード</th>
+      <td><code>"explicit"</code></td>
+    </tr>
+    <tr>
+      <th scope="row">チャンネルカウントの解釈</th>
+      <td><code>"speakers"</code></td>
+    </tr>
+  </tbody>
+</table>
+
+## コンストラクター
+
+- {{domxref("MediaStreamAudioDestinationNode.MediaStreamAudioDestinationNode", "MediaStreamAudioDestinationNode()")}}
+  - : 新しい `MediaStreamAudioDestinationNode` オブジェクトのインスタンスを生成します。
+
+## インスタンスプロパティ
+
+_親の {{domxref("AudioNode")}} からプロパティを継承します。_
+
+- {{domxref("MediaStreamAudioDestinationNode.stream")}}
+  - : {{domxref("MediaStreamTrack.kind", "kind")}} が `audio` であり、ノードと同じ数のチャンネルを持つ単一の {{domxref("MediaStreamTrack")}} からなる {{domxref("MediaStream")}} です。このプロパティを用いて、ストリームを音声グラフから取り出し、[Media Recorder](/ja/docs/Web/API/MediaStream_Recording_API) などの他の構築に供給できます。
+
+## インスタンスメソッド
+
+_親の {{domxref("AudioNode")}} からメソッドを継承します。_
+
+## 例
+
+[`AudioContext.createMediaStreamDestination()`](/ja/docs/Web/API/AudioContext/createMediaStreamDestination#例) に、`MediaStreamAudioDestinationNode` を生成し、それを録音する音声の音源として用いるサンプルコードがあります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Web Audio API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/ja/web/api/mediastreamaudiodestinationnode/mediastreamaudiodestinationnode/index.md b/files/ja/web/api/mediastreamaudiodestinationnode/mediastreamaudiodestinationnode/index.md
new file mode 100644
index 00000000000000..e0886c8bf469a9
--- /dev/null
+++ b/files/ja/web/api/mediastreamaudiodestinationnode/mediastreamaudiodestinationnode/index.md
@@ -0,0 +1,48 @@
+---
+title: "MediaStreamAudioDestinationNode: MediaStreamAudioDestinationNode() コンストラクター"
+slug: Web/API/MediaStreamAudioDestinationNode/MediaStreamAudioDestinationNode
+l10n:
+  sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
+---
+
+{{APIRef("Web Audio API")}}
+
+[Web Audio API](/ja/docs/Web/API/Web_Audio_API) の **`MediaStreamAudioDestinationNode()`** コンストラクターは、新しい {{domxref("MediaStreamAudioDestinationNode")}} オブジェクトのインスタンスを生成します。
+
+## 構文
+
+```js-nolint
+new MediaStreamAudioDestinationNode(context)
+new MediaStreamAudioDestinationNode(context, options)
+```
+
+### 引数
+
+- `context`
+  - : このノードを関連付ける音声コンテキストを表す {{domxref("AudioContext")}} です。
+- `options` {{optional_inline}}
+
+  - : `MediaStreamAudioDestinationNode` に持たせる性質を定義するオブジェクトです。
+
+    - `channelCount`
+      - : ノードの入力への接続を[アップミキシングとダウンミキシング](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#アップミキシングとダウンミキシング)する際に使用するチャンネルの数を決めるのに用いる整数です。(詳しくは {{domxref("AudioNode.channelCount")}} を参照してください) 使用法と正確な定義は、`channelCountMode` の値によります。
+    - `channelCountMode`
+      - : ノードの入力と出力のチャンネルを対応させる方法を表す文字列です。(デフォルト値を含む詳細は {{domxref("AudioNode.channelCountMode")}} を参照してください)
+    - `channelInterpretation`
+      - : チャンネルの意味を表す文字列です。この解釈は、音声の[アップミキシングとダウンミキシング](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#アップミキシングとダウンミキシング)を行う方法を定義します。取りうる値は `"speakers"` および `"discrete"` です。(デフォルト値を含む詳細は {{domxref("AudioNode.channelCountMode")}} を参照してください)
+
+## 例
+
+```js
+const ac = new AudioContext();
+
+const myDestination = new MediaStreamAudioDestinationNode(ac);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/mediastreamaudiodestinationnode/stream/index.md b/files/ja/web/api/mediastreamaudiodestinationnode/stream/index.md
new file mode 100644
index 00000000000000..28f54e388eee7e
--- /dev/null
+++ b/files/ja/web/api/mediastreamaudiodestinationnode/stream/index.md
@@ -0,0 +1,32 @@
+---
+title: "MediaStreamAudioDestinationNode: stream プロパティ"
+slug: Web/API/MediaStreamAudioDestinationNode/stream
+l10n:
+  sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
+---
+
+{{ APIRef("Web Audio API") }}
+
+{{ domxref("AudioContext") }} インターフェイスの `stream` プロパティは、ノード自身と同じ数のチャンネルを持つ単一の音声 {{domxref("MediaStreamTrack")}} を持った {{domxref("MediaStream")}} を表します。
+
+このプロパティを用いて、ストリームを音声グラフから取り出し、[Media Recorder](/ja/docs/Web/API/MediaStream_Recording_API) などの他の構築に供給できます。
+
+## 値
+
+単一の音声トラックを持った {{domxref("MediaStream")}} です。この音声トラックは、{{domxref("MediaStreamTrack.kind", "kind")}} が `audio` である {{domxref("MediaStreamTrack")}} です。
+
+## 例
+
+[`AudioContext.createMediaStreamDestination()`](/ja/docs/Web/API/AudioContext/createMediaStreamDestination#例) に、`MediaStreamAudioDestinationNode` を生成し、その `stream` プロパティを録音する音声の音源として用いるサンプルコードがあります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Web Audio API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)

From ad007c6e0678ac96824e151a2f7f836513a251ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= <mikecat@users.noreply.github.com>
Date: Tue, 19 Sep 2023 00:48:58 +0900
Subject: [PATCH 008/268] Translate MediaStreamTrackAudioSourceNode (#15846)

---
 .../mediastreamtrackaudiosourcenode/index.md  | 67 ++++++++++++++++
 .../mediastreamtrackaudiosourcenode/index.md  | 77 +++++++++++++++++++
 2 files changed, 144 insertions(+)
 create mode 100644 files/ja/web/api/mediastreamtrackaudiosourcenode/index.md
 create mode 100644 files/ja/web/api/mediastreamtrackaudiosourcenode/mediastreamtrackaudiosourcenode/index.md

diff --git a/files/ja/web/api/mediastreamtrackaudiosourcenode/index.md b/files/ja/web/api/mediastreamtrackaudiosourcenode/index.md
new file mode 100644
index 00000000000000..80030cdd8848f6
--- /dev/null
+++ b/files/ja/web/api/mediastreamtrackaudiosourcenode/index.md
@@ -0,0 +1,67 @@
+---
+title: MediaStreamTrackAudioSourceNode
+slug: Web/API/MediaStreamTrackAudioSourceNode
+l10n:
+  sourceCommit: fa1301aead2cee37516b7ad5a5ec2fb21e004227
+---
+
+{{APIRef("Web Audio API")}}
+
+**`MediaStreamTrackAudioSourceNode`** インターフェイスは {{domxref("AudioNode")}} の一種で、[WebRTC](/ja/docs/Web/API/WebRTC_API) や[メディアキャプチャとストリーム](/ja/docs/Web/API/Media_Capture_and_Streams_API) API から得られた特定の {{domxref("MediaStreamTrack")}} からデータを取得する音源を表します。
+
+音声自体は、マイクやその他の音声サンプリングデバイスからの入力かもしれないし、{{domxref("RTCPeerConnection")}} から受信したものかもしれないし、その他かもしれません。
+
+`MediaStreamTrackAudioSourceNode` は入力を持たず、ちょうど 1 個の出力を持ち、{{domxref("AudioContext.createMediaStreamTrackSource()")}} メソッドにより生成されます。このインターフェイスは、ストリームの最初の音声トラックで決め打ちするのではなく使用するトラックを明示できるという点以外、{{domxref("MediaStreamAudioSourceNode")}} に似ています。
+
+{{InheritanceDiagram}}
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">入力数</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">出力数</th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">チャンネル数</th>
+      <td>
+        生成時に {{domxref("AudioContext.createMediaStreamTrackSource()")}} メソッドに渡された最初の音声 {{domxref("MediaStreamTrack")}} により定義されます。
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## コンストラクター
+
+- {{domxref("MediaStreamTrackAudioSourceNode.MediaStreamTrackAudioSourceNode", "new MediaStreamTrackAudioSourceNode()")}}
+  - : オプションを指定して新しい `MediaStreamTrackAudioSourceNode` オブジェクトを生成します。
+
+## インスタンスプロパティ
+
+_`MediaStreamTrackAudioSourceNode` インターフェイスは自身のプロパティを持ちません。しかし、親の {{domxref("AudioNode")}} のプロパティを継承します。_
+
+## インスタンスメソッド
+
+_親の {{domxref("AudioNode")}} からメソッドを継承します。_
+
+## 例
+
+[`AudioContext.createMediaStreamSource()`](/ja/docs/Web/API/AudioContext/createMediaStreamSource#例) に、このオブジェクトを用いるサンプルコードがあります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Web Audio API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
+- [WebRTC API](/ja/docs/Web/API/WebRTC_API)
+- [メディアキャプチャとストリーム API (メディアストリーム)](/ja/docs/Web/API/Media_Capture_and_Streams_API)
+- {{domxref("MediaStreamAudioSourceNode")}}
diff --git a/files/ja/web/api/mediastreamtrackaudiosourcenode/mediastreamtrackaudiosourcenode/index.md b/files/ja/web/api/mediastreamtrackaudiosourcenode/mediastreamtrackaudiosourcenode/index.md
new file mode 100644
index 00000000000000..059a58e10dcde2
--- /dev/null
+++ b/files/ja/web/api/mediastreamtrackaudiosourcenode/mediastreamtrackaudiosourcenode/index.md
@@ -0,0 +1,77 @@
+---
+title: "MediaStreamTrackAudioSourceNode: MediaStreamTrackAudioSourceNode() コンストラクター"
+slug: Web/API/MediaStreamTrackAudioSourceNode/MediaStreamTrackAudioSourceNode
+l10n:
+  sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
+---
+
+{{APIRef("Web Audio API")}}
+
+[Web Audio API](/ja/docs/Web/API/Web_Audio_API) の **`MediaStreamTrackAudioSourceNode()`** コンストラクターは、オプションオブジェクトで指定された {{domxref("MediaStreamTrack")}} から音声を取得する新しい {{domxref("MediaStreamTrackAudioSourceNode")}} オブジェクトを生成して返します。
+
+`MediaStreamTrackAudioSourceNode` を生成する別の方法は、音声の取得元とする {{domxref("MediaStreamTrack")}} を指定して {{domxref("AudioContext.createMediaStreamTrackSource()")}} メソッドを呼び出すことです。
+
+## 構文
+
+```js-nolint
+new MediaStreamTrackAudioSourceNode(context, options)
+```
+
+### 引数
+
+- `context`
+  - : このノードを関連付ける音声コンテキストを表す {{domxref("AudioContext")}} です。
+- `options`
+
+  - : `MediaStreamTrackAudioSourceNode` に持たせる性質を定義するオブジェクトです。
+
+    - `mediaStreamTrack`
+      - : このノードの出力とする音声のデータの取得元とする {{domxref("MediaStreamTrack")}} です。
+
+### 返値
+
+メディアを指定のメディアトラックから取得する音声ノードを表す新しい {{domxref("MediaStreamTrackAudioSourceNode")}} オブジェクトです。
+
+### 例外
+
+- `NotSupportedError` {{domxref("DOMException")}}
+  - : 指定の `context` が {{domxref("AudioContext")}} でないとき投げられます。
+- `InvalidStateError` {{domxref("DOMException")}}
+  - : 指定の {{domxref("MediaStreamTrack")}} が音声トラックでない (すなわち、{{domxref("MediaStreamTrack.kind", "kind")}} プロパティが `audio` でない) とき投げられます。
+
+## 例
+
+この例では、{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を用いてユーザーのカメラにアクセスし、そのデバイスが提供する最初の音声トラックから新しい {{domxref("MediaStreamAudioSourceNode")}} を生成します。
+
+```js
+const audioCtx = new AudioContext();
+
+if (navigator.mediaDevices.getUserMedia) {
+  navigator.mediaDevices
+    .getUserMedia({
+      audio: true,
+      video: false,
+    })
+    .then((stream) => {
+      const options = {
+        mediaStreamTrack: stream.getAudioTracks()[0],
+      };
+
+      const source = new MediaStreamTrackAudioSourceNode(audioCtx, options);
+      source.connect(audioCtx.destination);
+    })
+    .catch((err) => {
+      console.error(`以下の gUM エラーが発生しました: ${err}`);
+    });
+} else {
+  console.log("このブラウザーは新しい getUserMedia に対応していません！");
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From ffec0e0be9c14161c5ecdb6d76761776d8e02194 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 15 Sep 2023 08:52:30 +0900
Subject: [PATCH 009/268] =?UTF-8?q?2023/08/11=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/eval/index.md    | 386 +++++++++++-------
 1 file changed, 241 insertions(+), 145 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/eval/index.md b/files/ja/web/javascript/reference/global_objects/eval/index.md
index 5d6b8a773f3e40..0759f75b5386fa 100644
--- a/files/ja/web/javascript/reference/global_objects/eval/index.md
+++ b/files/ja/web/javascript/reference/global_objects/eval/index.md
@@ -1,120 +1,221 @@
 ---
 title: eval()
 slug: Web/JavaScript/Reference/Global_Objects/eval
+l10n:
+  sourceCommit: 4c26e8a3fb50d06963b06017f51ce19364350564
 ---
 
 {{jsSidebar("Objects")}}
 
 > **警告:** 文字列から JavaScript を実行することは、非常に大きなセキュリティリスクを伴います。`eval()` を使用すると、悪意のある者が任意のコードを実行することがあまりにも簡単になります。下記の [eval() を使わないでください!](#eval_を使わないでください!)を参照してください。
 
-**`eval()`** 関数は、文字列として表現された JavaScript コードを評価します。
+**`eval()`** 関数は、文字列として表現された JavaScript コードを評価します。ソースはスクリプトとして解釈されます。
 
 {{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}
 
 ## 構文
 
-```js
-eval(string);
+```js-nolint
+eval(script)
 ```
 
 ### 引数
 
-- `string`
-  - : JavaScript の式、文、または一連の文を表す文字列です。式には、既存オブジェクトの変数およびプロパティを含められます。
+- `script`
+  - : JavaScript の式、文、または一連の文を表す文字列です。式には、既存オブジェクトの変数およびプロパティを含められます。これはスクリプトとして解釈されますので、 [`import`](/ja/docs/Web/JavaScript/Reference/Statements/import) 宣言（モジュールの中に存在しうる）は許可されていません。
 
 ### 返値
 
-与えられたコードの評価結果の値を返します。評価結果が空の場合は、{{jsxref("undefined")}} を返します。
+与えられたコードの評価結果の値を返します。評価結果が空の場合は、{{jsxref("undefined")}} を返します。もし `script` が文字列プリミティブでなければ、 `eval()` は引数を変更せずに返します。
+
+### 例外
+
+コードを評価している間に発生するあらゆる例外が発生します。もし `script` がスクリプトとして解釈できなかった場合は {{jsxref("SyntaxError")}} になります。
 
 ## 解説
 
 `eval()` はグローバルオブジェクトの関数プロパティです。
 
-`eval()` 関数の引数は文字列です。その文字列が式に相当する場合、`eval()` は引数を式として評価します。引数が 1 つ以上の JavaScript 文に相当する場合、`eval()` は引数を文として評価します。算術式を評価する目的で `eval()` を呼び出してはいけません。JavaScript は算術式を自動的に評価します。
+`eval()` 関数の引数は文字列です。
+ソース文字列をスクリプト本体として評価します。つまり、文と式の両方が使用可能です。コードの完了値を返します。式の場合は、式が評価された値です。多くの文や宣言も同様に完了値を持ちますが、その結果は意外なものになることがあります（例えば、代入の完了値は代入された値ですが、 [`let`](/ja/docs/Web/JavaScript/Reference/Statements/let) の完了値は undefined です）。そのため、文の完了値には頼らないことをお勧めします。
+
+厳格モードでは、 `eval` という名前の変数を宣言したり、 `eval` に代入したりすることは {{jsxref("SyntaxError")}} になります。
+
+```js-nolint example-bad
+"use strict";
 
-算術式を文字列として構築した場合、後で `eval()` を使ってそれを評価することができます。例えば `x` という変数があるとします。ある変数に "`3 * x + 2`" といった式の文字列値を代入し、そしてスクリプトの後方で `eval()` を呼び出すことで、`x` が関わる式の評価を後回しにすることができます。
+const eval = 1; // SyntaxError: Unexpected eval or arguments in strict mode
+```
 
-`eval()` の引数が文字列でない場合、`eval()` は引数を変更せずに返します。次の例では `String` コンストラクターが指定されているため、`eval()` は文字列を評価したものではなく `String` オブジェクトを返します。
+`eval()` の引数が文字列でない場合、`eval()` は引数を変更せずに返します。次の例では、プリミティブの代わりに `String` オブジェクトを渡すと、 `eval()` は文字列を評価するのではなく、 `String` オブジェクトを返します。
 
 ```js
-eval(new String("2 + 2")); // "2 + 2" を含む String オブジェクトを返します
-eval("2 + 2"); // 4 を返します
+eval(new String("2 + 2")); // "2 + 2" を含む String オブジェクトを返す
+eval("2 + 2"); // 4 を返す
 ```
 
-この制約は、`toString` を使用する一般的な方法で回避できます。
+一般的な方法でこの課題をうまく回避するには、`eval()` に渡す前に、自分で[引数を文字列に変換する](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#文字列変換)ことができます。
 
 ```js
-var expression = new String("2 + 2");
-eval(expression.toString()); // 4 を返します
+const expression = new String("2 + 2");
+eval(String(expression)); // 4 を返します
 ```
 
-`eval` 関数を `eval` 以外の名前を参照して呼び出すことで*間接的に*使用した場合、[ECMAScript
-5](https://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2) 以降ではローカルスコープではなくグローバルスコープで機能します。これは例えると、関数定義によりグローバル関数が作成されるため、評価されたコードはその呼び出されたスコープ内のローカル変数にアクセスできなくなる、ということです。
-
-```ja
-function test() {
-  var x = 2, y = 4;
-  // 直接呼び出し、ローカルスコープを使用
-  console.log(eval('x + y')); // 結果は 6
-  // eval を返すカンマ演算子を使用した間接呼び出し
-  console.log((0, eval)('x + y')); // グローバルスコープを使用、x は未定義のため例外が発生
-  // eval を変数に保存して返したものを使用した間接呼び出し
-  var geval = eval;
-  console.log(geval('x + y')); // グローバルスコープを使用、x は未定義のため例外が発生
-}
+### 直接的または間接的な eval
+
+`eval()` の呼び出しには、直接的な eval と間接的な eval の 2 つのモードがあります。直接的な eval は `eval( )` が唯一の形です（呼び出す関数の名前は `eval` で、その値はグローバルな `eval` 関数です）。それ以外のすべて は、エイリアス変数経由、メンバーアクセスやその他の式経由、またはオプショナルチェーン [`?.`](/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining) 演算子を使用して呼び出すことも含めて、間接的なものです。
+
+```js
+// eval を返すためにカンマ演算子を使用する間接的呼び出し
+(0, eval)("x + y");
+
+// オプショナルチェーンによる間接的呼び出し
+eval?.("x + y");
+
+// eval を格納し返すために変数を使用する間接的呼び出し
+const geval = eval;
+geval("x + y");
+
+// メンバーアクセスによる間接的呼び出し
+const obj = { eval };
+obj.eval("x + y");
 ```
 
+間接的な eval は、コードが別個の `<script>` タグの中で評価されるように見ることができます。これはつまり次のような意味です。
+
+- 間接的な eval はローカルスコープではなくグローバルスコープで動作し、評価されるコードは呼び出されるスコープ内のローカル変数にアクセスすることはありません。
+
+  ```js
+  function test() {
+    const x = 2;
+    const y = 4;
+    // 直接呼び出し、ローカルスコープを使用
+    console.log(eval("x + y")); // 結果は 6
+    // eval を返すカンマ演算子を使用した間接呼び出し
+    console.log(eval?.("x + y")); // グローバルスコープを使用、x は未定義のため例外が発生
+  }
+  ```
+
+- 間接的な `eval` は周囲のコンテキストの厳格さを継承せず、ソース文字列自体に `"use strict"` ディレクティブがある場合にのみ [厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) になります。
+
+  ```js
+  function strictContext() {
+    "use strict";
+    eval?.(`with (Math) console.log(PI);`);
+  }
+  function strictContextStrictEval() {
+    "use strict";
+    eval?.(`"use strict"; with (Math) console.log(PI);`);
+  }
+  strictContext(); // Logs 3.141592653589793
+  strictContextStrictEval(); // 文字列が厳格モードであるため SyntaxError を発生します。
+  ```
+
+  一方、直接的な eval は、呼び出すコンテキストの厳格さを継承します。
+
+  ```js
+  function nonStrictContext() {
+    eval(`with (Math) console.log(PI);`);
+  }
+  function strictContext() {
+    "use strict";
+    eval(`with (Math) console.log(PI);`);
+  }
+  nonStrictContext(); // Logs 3.141592653589793
+  strictContext(); // 厳格モードなので SyntaxError が発生します。
+  ```
+
+- もしソース文字列が厳格モードで解釈されていない場合、 `var` で宣言された変数と [関数宣言](/ja/docs/Web/JavaScript/Reference/Statements/function) は周囲のスコープに入ってしまいます。厳格モードのコンテキストでの直接的な eval であった場合、または `eval` のソース文字列自体が厳格モードであった場合、 `var` と関数宣言は周囲のスコープに「漏れる」ことはありません。
+
+  ```js
+  // コンテキストもソース文字列も厳格モードではないため、 var は周囲のスコープで変数を作成します。
+  eval("var a = 1;");
+  console.log(a); // 1
+  // コンテキストは厳格ではありませんが、 eval のソースは厳格なので、 b は評価されたスクリプトにスコープされます。
+  eval("'use strict'; var b = 1;");
+  console.log(b); // ReferenceError: b is not defined
+
+  function strictContext() {
+    "use strict";
+    // コンテキストは厳格ですが、これは間接的なもので、文字列は厳格ではありません。
+    eval?.("var c = 1;");
+    // 厳密なコンテキストでのディレクティブ eval なので、 d はスコープされます。
+    eval("var d = 1;");
+  }
+  strictContext();
+  console.log(c); // 1
+  console.log(d); // ReferenceError: d is not defined
+  ```
+
+  評価される文字列内の [`let`](/ja/docs/Web/JavaScript/Reference/Statements/let) および [`const`](/ja/docs/Web/JavaScript/Reference/Statements/const) 宣言は、常にそのスクリプトにスコープされます。
+
+- ディレクティブ eval は追加のコンテキスト式にアクセスすることができます。例えば、関数の本体で [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) を使用することができます。
+
+  ```js
+  function Ctor() {
+    eval("console.log(new.target)");
+  }
+  new Ctor(); // [Function: Ctor]
+  ```
+
 ## eval() を使わないでください!
 
-`eval()` は呼び出し元の権限で渡されたコードを実行する危険な関数です。悪意のある第三者に影響を受ける可能性のある文字列で `eval()` を実行すると、そのウェブページや拡張機能の権限において、ユーザーのマシン上で悪意のあるコードを実行してしまう可能性があります。さらに重要なことに、サードパーティのコードは `eval()` が呼び出されたスコープを見ることができるので、類似の {{jsxref("Global_Objects/Function", "Function")}} では影響を受けない方法でも攻撃を受ける可能性があります。
+直接的な `eval()` はいくつもの問題を引き起こします。
 
-また、ここ最近の JavaScript では多くの構造が JS エンジンによって最適化されているため、`eval()` は他の方法よりも低速でもあります。
+- `eval()` は呼び出し元の権限で渡されたコードを実行します。悪意のある第三者に影響を受ける可能性のある文字列で `eval()` を実行すると、そのウェブページや拡張機能の権限において、ユーザーのマシン上で悪意のあるコードを実行してしまう可能性があります。さらに重要なことに、サードパーティのコードが `eval()` が（直接的な eval であれば）呼び出されたスコープを見ることができるため、攻撃者がローカル変数を読み取ったり変更したりすることができてしまいます。
+- 現代の JavaScript では多くの構造が JS エンジンによって最適化されているため、`eval()` は他の方法よりも低速です。
+- 現代の JavaScript インタープリターは JavaScript を機械語に変換します。これは、変数の名前の概念がすべて消滅することを意味します。したがって、`eval()` を使用すると、ブラウザーは長い高価な変数名検索を実行して、変数が機械語のどこに存在しているかを把握し、その値を設定します。さらに、`eval()` が変数の型の変更など、その変数に新しい変数をもたらす可能性もあり、生成されたすべての機械語を再評価して補正させられる可能性があります。
+- スコープが `eval()` によって推移的に依存されている場合、ミニファイヤーはミニ化をあきらめます。そうしないと `eval()` は実行時に正しい変数を読み込むことができないからです。
 
-さらに、現代の JavaScript インタープリターは JavaScript を機械語に変換します。これは、変数の名前の概念がすべて消滅することを意味します。したがって、`eval()` を使用すると、ブラウザーは長い高価な変数名検索を実行して、変数が機械語のどこに存在しているかを把握し、その値を設定します。さらに、`eval()` が変数の型の変更など、その変数に新しい変数をもたらす可能性もあり、生成されたすべての機械語を再評価して補正させられる可能性があります。
+`eval()` や関連のメソッドを使用することで、最適化したり、完全に避けることができる用途はたくさんあります。
 
-幸い、`eval()` にはとても良い代替策があります。{{jsxref("Function", "window.Function()")}} を使用することです。危険な `eval()` を使用したコードから `Function()` を使用したコードに変換する方法の例として、以下を参照してください。
+#### 間接的 eval() の使用
 
-`eval()` を使用した悪いコード:
+このコードを考えてみてください。
 
 ```js
 function looseJsonParse(obj) {
-  return eval("(" + obj + ")");
+  return eval(`(${obj})`);
 }
-console.log(looseJsonParse("{a:(4-1), b:function(){}, c:new Date()}"));
+console.log(looseJsonParse("{ a: 4 - 1, b: function () {}, c: new Date() }"));
 ```
 
-`eval()` を使用しないより良いコード:
+間接的 eval を使用して厳格モードを強制するだけで、コードはずっと良くなります。
 
 ```js
 function looseJsonParse(obj) {
-  return Function('"use strict";return (' + obj + ")")();
+  return eval?.(`"use strict";(${obj})`);
 }
-console.log(looseJsonParse("{a:(4-1), b:function(){}, c:new Date()}"));
+console.log(looseJsonParse("{ a: 4 - 1, b: function () {}, c: new Date() }"));
 ```
 
-上記の 2 つのコードスニペットを比較すると、2 つのコードスニペットが同じように動作するように見えるかもしれませんが、よく考えてみてください。`eval()` の方は非常に遅いのです。評価されたオブジェクトの中の `c: new Date()` に注目してください。`eval()` を使用しない関数では、オブジェクトはグローバルスコープで評価されているので、ブラウザーは `Date` が `window.Date` を参照しており、`Date` というローカル変数ではないと考えて安全です。しかし、コードが次のようになっている場合 `eval()` を使ったコードでは、ブラウザーがこれを仮定することができません。
+上記の 2 つのコードスニペットは同じように動作するように見えるかもしれませんが、そうではありません。前者は直接的 eval を使用しているので、複数の問題が発生します。
 
-```js
-function Date(n) {
-  return [
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-    "Sunday",
-  ][n % 7 || 0];
-}
-function looseJsonParse(obj) {
-  return eval("(" + obj + ")");
-}
-console.log(looseJsonParse("{a:(4-1), b:function(){}, c:new Date()}"));
-```
+- より多くの範囲を検査するため、非常に時間がかかります。評価される文字列中の `c: new Date()` に注目してください。間接的 eval のバージョンでは、オブジェクトはグローバルスコープで評価されるので、インタープリターは `Date` が `Date` という名前のローカル変数ではなく、グローバルな `Date()` コンストラクターを参照しているとみなされます。しかし、直接的 eval を使用するコードでは、インタープリターはこれを想定することができません。例えば、次の例では、評価された文字列の `Date` は `window.Date()` を参照しません。
+
+  ```js
+  function looseJsonParse(obj) {
+    function Date() {}
+    return eval(`(${obj})`);
+  }
+  console.log(looseJsonParse(`{ a: 4 - 1, b: function () {}, c: new Date() }`));
+  ```
 
-したがって、コードの `eval()` バージョンでは、ブラウザーは高価なルックアップ呼び出しを行い、`Date()` というローカル変数があるかどうかを確認します。これは `Function()` と比較して非常に効率が悪くなります。
+  したがって、この `eval()` バージョンでは、ブラウザーは高価なルックアップ呼び出しを行い、`Date()` というローカル変数があるかどうかを確認します。
 
-関連する状況で、実際に `Date()` 関数を `Function()` 内のコードから呼び出すことができるようにしたいとしたらどうでしょうか。簡単な方法を取って、`eval()` に戻るべきでしょうか。いいえ、決してそうではありません。代わりに、以下の方法を試してみてください。
+- 厳格モードを使用していない場合、 `eval()` ソース内の `var` 宣言は周囲のスコープの変数になります。これは、文字列が外部入力から取得された場合、特に同じ名前の既存の変数がある場合に、デバッグしにくい課題につながります。
+- 直接的 eval は、周囲のスコープのバインディングを読み込んだり、変更したりすることができます。
+- 直接的 `eval` を使用する場合、特に eval ソースが厳格モードであることを証明できない場合、 `eval()` ソースはその周囲のスコープ内の任意の変数名に依存することができるため、エンジン（およびビルドツール）はインライン化に関連するすべての最適化を無効にしなければなりません。
+
+しかし、間接的な `eval()` を使用すると、評価されたソースが読み込む既存のグローバル変数以外の追加のバインディングを渡すことができません。評価されるソースがアクセスすべき追加の変数を指定する必要がある場合は、コンストラクター `Function()` を使用することを検討してください。
+
+#### Function() コンストラクターの使用
+
+[`Function()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function) コンストラクターは、上記の間接的 eval の例ととてもよく似ています。グローバルスコープで渡された JavaScript ソースを、ローカルバインディングを読み込んだり変更したりすることなく評価するので、エンジンは直接 `eval()` を実行するよりも多くの最適化を実行することができます。
+
+`eval()` と `Function()`の異なる点は、`Function()`に渡された文字列はスクリプトとしてではなく、関数本体として解釈できるということです。例えば、関数本体の最上位では `return` 文を使用することができますが、スクリプトの中では使用できません。
+
+`Function()` コンストラクターは、変数を引数として渡して eval ソース内でローカルバインディングを作成したい場合に有益です。
 
 ```js
 function Date(n) {
@@ -129,174 +230,170 @@ function Date(n) {
   ][n % 7 || 0];
 }
 function runCodeWithDateFunction(obj) {
-  return Function('"use strict";return (' + obj + ")")()(Date);
+  return Function("Date", `"use strict";return (${obj});`)(Date);
 }
-console.log(runCodeWithDateFunction("function(Date){ return Date(5) }"));
+console.log(runCodeWithDateFunction("Date(5)")); // Saturday
 ```
 
-上記のコードは、三重に入れ子になった関数があるために効率が悪く遅いと思えるかもしれませんが、上記の効率的なメソッドの利点を分析してみましょう。
+`eval()` と `Function()` はどちらも暗黙的に任意のコードを評価するので、厳格な [CSP](/ja/docs/Web/HTTP/CSP) 設定では禁止されています。また、一般的な用途では `eval()` や `Function()` に代わる、より安全な（そして、より高速な）方法が他にもあります。
 
-- これにより、`runCodeWithDateFunction()` に渡される文字列のコードを短縮することができます。
-- 関数呼び出しのオーバーヘッドが最小になり、コードサイズがはるかに小さくなるという利点には十分な価値があります。
-- `Function()` を使用することで、コードのパフォーマンスを向上させる `"use strict";` をより簡単に利用できるようになります。
-- このコードでは `eval()` を使用しないので、そうでない場合に比べて桁違いに高速になります。
-
-最後に、最小化を検討してみましょう。上記のように `Function()` を使用すると、`runCodeWithDateFunction` に渡されたコード文字列をはるかに効率的に最小化することができます。関数の引数名は、下の最小化されたコードで見られるように最小化することができるからです。
-
-```js
-console.log(
-  Function('"use strict";return(function(a){return a(5)})')()(function (a) {
-    return "Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(
-      " ",
-    )[a % 7 || 0];
-  }),
-);
-```
-
-一般的な用途においては、さらに安全 (そして高速) な `eval()` または `Function()` の代替手段があります。
-
-### メンバーのプロパティへのアクセス
+#### ブラケットアクセサーの使用
 
 プロパティ名からプロパティ自体への変換を行うために `eval()` を使用しないでください。アクセスされるオブジェクトのプロパティがコードが実行されるまでわからない場合の例を考えてみましょう。これは `eval()` で行うことができます。
 
 ```js
-var obj = { a: 20, b: 30 };
-var propName = getPropName(); // "a" または "b" が返される
+const obj = { a: 20, b: 30 };
+const propName = getPropName(); // returns "a" or "b"
 
-eval("var result = obj." + propName);
+const result = eval(`obj.${propName}`);
 ```
 
-ただし、ここで `eval()` は必要ありません。実際、この使い方はお勧めできません。代わりに[プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)を使用したほうが、より速くて安全です。
+ただし、ここで `eval()` は必要ありません。実際、この使い方はお勧めできません。なぜなら `propName` が有効な識別子でないと構文エラーになるからです。さらに、 `getPropName` が制御する関数でない場合、任意のコードを実行してしまう可能性があります。代わりに[プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors)を使用したほうが、より速くて安全です。
 
 ```js
-var obj = { a: 20, b: 30 };
-var propName = getPropName(); // "a" または "b" が返される
-var result = obj[propName]; //  obj[ "a" ] は obj.a と同じ
+const obj = { a: 20, b: 30 };
+const propName = getPropName(); // "a" または "b" が返される
+const result = obj[propName]; // obj[ "a" ] は obj.a と同じ
 ```
 
 このメソッドを使用して子孫プロパティにアクセスすることもできます。`eval()` を使うと以下のようになります。
 
 ```js
-var obj = { a: { b: { c: 0 } } };
-var propPath = getPropPath(); // "a.b.c" などを返す
+const obj = { a: { b: { c: 0 } } };
+const propPath = getPropPath(); // "a.b.c" などを返す
 
-eval("var result = obj." + propPath);
+const result = eval(`obj.${propPath}`); // 0
 ```
 
 ここで `eval()` を回避するには、プロパティのパスを分割し、様々なプロパティをループすることで行うことができます。
 
 ```js
 function getDescendantProp(obj, desc) {
-  var arr = desc.split(".");
+  const arr = desc.split(".");
   while (arr.length) {
     obj = obj[arr.shift()];
   }
   return obj;
 }
 
-var obj = { a: { b: { c: 0 } } };
-var propPath = getPropPath(); // "a.b.c" などを返す
-var result = getDescendantProp(obj, propPath);
+const obj = { a: { b: { c: 0 } } };
+const propPath = getPropPath(); // "a.b.c" などを返す
+const result = getDescendantProp(obj, propPath);
 ```
 
 プロパティの設定も同様に行うことができます。
 
 ```js
 function setDescendantProp(obj, desc, value) {
-  var arr = desc.split(".");
+  const arr = desc.split(".");
   while (arr.length > 1) {
     obj = obj[arr.shift()];
   }
   return (obj[arr[0]] = value);
 }
 
-var obj = { a: { b: { c: 0 } } };
-var propPath = getPropPath(); // "a.b.c" などを返す
-var result = setDescendantProp(obj, propPath, 1); // obj.a.b.c は 1 になる
+const obj = { a: { b: { c: 0 } } };
+const propPath = getPropPath(); // "a.b.c" などを返す
+const result = setDescendantProp(obj, propPath, 1); // obj.a.b.c は 1 になる
 ```
 
-### コードの断片を評価する場合、代わりに関数を使う
+しかし、制約のない入力でブラケットアクセッサを使用することも安全ではありません。[オブジェクトインジェクション攻撃](https://github.com/nodesecurity/eslint-plugin-security/blob/main/docs/the-dangers-of-square-bracket-notation.md)を許す可能性もあります。
+
+#### コールバックの使用
 
-JavaScript [第一級関数](https://ja.wikipedia.org/wiki/第一級関数)を備えており、関数を他の API の引数としたり、変数やオブジェクトのプロパティに保存したりすることができます。多くの DOM API はこれを考慮して作られているので、次のように書くことができます (また、書くべきです)。
+JavaScript [第一級関数](/ja/docs/Glossary/First-class_Function)を備えており、関数を他の API の引数としたり、変数やオブジェクトのプロパティに保存したりすることができます。多くの DOM API はこれを考慮して作られているので、次のように書くことができます（また、書くべきです）。
 
 ```js
 // setTimeout(" ... ", 1000) を使う代わりに
-setTimeout(function() { ... }, 1000);
-
-// elt.setAttribute("onclick", " ... ") を使う代わりに
-elt.addEventListener('click', function() { ... } , false);
+setTimeout(() => {
+  // …
+}, 1000);
+
+// elt.setAttribute("onclick", "…") を使う代わりに
+elt.addEventListener("click", () => {
+  // …
+});
 ```
 
 文字列を連結せずにパラメーター化した関数を作成する方法としては、[クロージャ](/ja/docs/Web/JavaScript/Closures)を使う方法も便利です。
 
-### JSON の解析 (文字列を JavaScript オブジェクトに変換)
-
-`eval()` の呼び出しに使おうとしている文字列がコードではなくデータ (例えば `"[1, 2, 3]"` で配列を表す) を含むものであれば、{{Glossary("JSON")}} に切り替えることを検討してください。これは JavaScript のサブセットを使用することで、文字列でデータを表現することができます。<a href="/ja/docs/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a> の記事も参照してください。
+### JSON の使用
 
-JSON の構文は JavaScript の構文に比べて制限があり、多くの有効な JavaScript リテラルが JSON としては解釈されないことに注意してください。例えば、最後にカンマを付けることは JSON では許されておらず、オブジェクトリテラル内のプロパティ名 (キー) は引用符で囲む必要があります。後で JSON として解析される文字列を生成するには、JSON シリアライザーを使うようにしてください。
+`eval()` の呼び出しに使おうとしている文字列がコードではなくデータ（例えば `"[1, 2, 3]"` で配列を表す）を含むものであれば、{{Glossary("JSON")}} に切り替えることを検討してください。これは JavaScript のサブセットを使用することで、文字列でデータを表現することができます。
 
-<h3 id="Pass_data_instead_of_code" name="Pass_data_instead_of_code">コードの代わりにデータを渡す</h3>
+JSON の構文は JavaScript の構文に比べて制限があり、多くの有効な JavaScript リテラルが JSON としては解釈されないことに注意してください。例えば、最後にカンマを付けることは JSON では許されておらず、オブジェクトリテラル内のプロパティ名（キー）は引用符で囲む必要があります。後で JSON として解析される文字列を生成するには、JSON シリアライザーを使うようにしてください。
 
-例えば、ウェブページの内容を取得できるよう設計された拡張であれば、JavaScript コードの代わりに <a href="/ja/docs/Web/XPath">XPath</a> を使って取得ルールを定義できます。
+任意のコードではなく、注意深く制約されたデータを渡すことは、一般的によい考えです。例えば、ウェブページの内容を取得できるよう設計された拡張であれば、JavaScript コードの代わりに <a href="/ja/docs/Web/XPath">XPath</a> を使って取得ルールを定義できます。
 
-<h2 id="Examples" name="Examples">使用例</h2>
+## 例
 
-<h3 id="Using_eval" name="Using_eval">`eval` を使用する</h3>
+### eval() の使用
 
 次のコードでは、`eval` を含むどちらの文も 42 を返します。最初のコードは文字列 "`x + y + 1`" を評価します。2 番目のコードは文字列 "`42`" を評価します。
 
 ```js
-var x = 2;
-var y = 39;
-var z = "42";
+const x = 2;
+const y = 39;
+const z = "42";
 eval("x + y + 1"); // 42 が返される
 eval(z); // 42 が返される
 ```
 
-### `eval` を使用して JavaScript 文の文字列を評価する
+### 評価される最後の式について
 
-次の例は、`eval()` を使用して文字列 `str` を評価しています。この文字列は `x` が 5 の場合に `z` に 42 の値を代入し、それ以外の場合は `z` に 0 を代入する JavaScript 文で構成されています。2 番目の文が実行される時、`eval` によってこれらの文が実行され、そして一連の文を評価して `z` に代入される値を返します。
+`eval()` は最後に評価された式の値を返します。 `if` については、評価された最後の式または文になります。
 
 ```js
-var x = 5;
-var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;";
-
-console.log("z is ", eval(str));
-```
+const str = "if (a) { 1 + 1 } else { 1 + 2 }";
+let a = true;
+let b = eval(str); // 2 が返される
 
-複数の値を定義した場合、最後の値が返されます。
+console.log(`b is: ${b}`); // b is: 2
 
-```js
-var x = 5;
-var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;";
+a = false;
+b = eval(str); // 3 が返される
 
-console.log("x is ", eval(str)); // z is 42  x is 420
+console.log(`b is: ${b}`); // b is: 3
 ```
 
-### 評価される最後の式について
-
-`eval()` は最後に評価された式の値を返します。
+次の例では `eval()` を使用して文字列 `str` を評価しています。この文字列は、`x` が 5 であれば `z` に 42 という値を割り当てる、そうでなければ `z` に 0 を代入するという JavaScript の文で構成されています。 2 つ目の文が実行されると、 `eval()` はこれらの文を発生させ、文の集合も評価して `z` に代入された値を返します。
 
 ```js
-var str = "if ( a ) { 1 + 1; } else { 1 + 2; }";
-var a = true;
-var b = eval(str); // 2 が返される
-
-console.log("b is : " + b);
+const x = 5;
+const str = `if (x === 5) {
+  console.log("z is 42");
+  z = 42;
+} else {
+  z = 0;
+}`;
+
+console.log("z is ", eval(str)); // z is 42  z is 42
+```
 
-a = false;
-b = eval(str); // 3 が返される
+複数の値を割り当てる場合は、最後の値を返します。
 
-console.log("b is : " + b);
+```js
+let x = 5;
+const str = `if (x === 5) {
+  console.log("z is 42");
+  z = 42;
+  x = 420;
+} else {
+  z = 0;
+}`;
+
+console.log("x is", eval(str)); // z is 42  x is 420
 ```
 
 ### 関数定義の文字列の `eval` には先頭と末尾に "(" と ")" が必要
 
 ```js
-var fctStr1 = "function a() {}";
-var fctStr2 = "(function a() {})";
-var fct1 = eval(fctStr1); // undefined が返される
-var fct2 = eval(fctStr2); // 関数が返される
+// 関数宣言
+const fctStr1 = "function a() {}";
+// 関数宣言
+const fctStr2 = "(function b() {})";
+const fct1 = eval(fctStr1); // undefined を返しますが、グローバル関数として `a` が使えるようになる
+const fct2 = eval(fctStr2); // 関数 `b` を返す
 ```
 
 ## 仕様書
@@ -309,6 +406,5 @@ var fct2 = eval(fctStr2); // 関数が返される
 
 ## 関連情報
 
-- {{jsxref("Global_Objects/uneval", "uneval()")}}
-- [プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)
+- [プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors)
 - [WebExtensions: コンテンツスクリプトでの eval() の使用](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#using_eval_in_content_scripts)

From 3e6e6c8a23b04a00974ebbb5423feea5c9c968d9 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 19 Sep 2023 02:04:48 +0900
Subject: [PATCH 010/268] [ko]: revise index.md files for `web/glossary/x`
 (#15424)

[revise]: revise index.md files for web/glossary/x
---
 files/ko/glossary/xhtml/index.md          | 80 ++++++++++-------------
 files/ko/glossary/xml/index.md            |  2 +
 files/ko/glossary/xmlhttprequest/index.md | 15 ++---
 3 files changed, 42 insertions(+), 55 deletions(-)

diff --git a/files/ko/glossary/xhtml/index.md b/files/ko/glossary/xhtml/index.md
index db5440d955251b..b609a23d05aa7d 100644
--- a/files/ko/glossary/xhtml/index.md
+++ b/files/ko/glossary/xhtml/index.md
@@ -1,70 +1,56 @@
 ---
 title: XHTML
 slug: Glossary/XHTML
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-[HTML](/ko/docs/HTML)은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.
+{{GlossarySidebar}}
 
-## HTML5 와 HTML/XHTML
+**XHTML**은 역사적으로 {{Glossary("XML")}} 구문 규칙을 준수하도록 작성된
+[HTML](/ko/docs/HTML)문서를 설명하는 데 사용된 용어입니다.
 
-[HTML5](/ko/docs/HTML/HTML5) 표준은 두가지 문법을 정의합니다. MIME 타입(HTTP `Content-Type` 헤더로 전송되는)을 참조하여 어떤 문법을 사용할지 선택합니다. : XHTML의 MIME 타입은 `application/xhtml+xml`이며 이외는 `text/html`.
+아래의 예는 HTML 문서와 해당 "XHTML" 문서, 그리고 함께 제공되어야 하는 {{Glossary("HTTP")}} {{HTTPHeader("Content-Type")}} 헤더를 보여줍니다.
 
-아래 예제는 HTML 문서와 XHTML문서의 사용된 헤더내용을 보여줍니다.
+### HTML document
 
-### HTML 문서
+```html
+<!-- Content-Type: text/html -->
 
-```
-HTTP/1.1 200 OK
-Content-Type: text/html
-
-<!DOCTYPE html>
-<html lang=en>
+<!doctype html>
+<html lang="en-US">
   <head>
-    <meta charset=utf-8>
+    <meta charset="utf-8" />
     <title>HTML</title>
   </head>
   <body>
-    <p>I am a HTML document</p>
+    <p>저는 HTML 문서입니다</p>
   </body>
 </html>
 ```
 
-### XHTML 문서
-
-```
-HTTP/1.1 200 OK Content-Type: application/xhtml+xml <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML</title> </head> <body> <p>I am a XHTML document</p> </body> </html>
-```
-
-## MIME type vs DOCTYPE
-
-HTML5 이전에는 [HTML 4.01](http://www.w3.org/TR/html4/) 과 [XHTML 1.0](http://www.w3.org/TR/xhtml1/) 두개의 표준이 두개의 문법으로 분리되어 정의되었습니다. XHTML1 표준에는, XHTML을 사용하기 위해서는 특별한 DOCTYPE을 정의해야 한다고 명시되어있습니다. 하지만 브라우저들은 이 표준을 구현하지 않았고 반대로 HTML5 표준에서 다음과 같이 결정되었습니다. "**content-type을 text/html로 전송한다면 XHTML을 사용하지 않는 것이다."**
-
-대신, 적절한 MIME 타입은 `Content-Type` HTTP 헤더에 정의 되어 있어야 합니다. 만약 \<meta http-equiv=…> 같은 메타테그에 MIME 타입을 넣었다면 그것은 무시되고 `text/html로 간주됩니다.`.
-
-페이지를 `text/html로` 서비스 하지만 XHTML로 문서를 작성했다면 아래 글에서 설명하는 많은 문제점들이 발생할 것 입니다.:
-
-- [No to XHTML](http://www.spartanicus.utvinternet.ie/no-xhtml.htm) an excellent article from Spartanicus
-- [Beware of XHTML](http://www.webdevout.net/articles/beware-of-xhtml) by David Hammond
-- [Sending XHTML as text/html Considered Harmful](http://www.hixie.ch/advocacy/xhtml) by Ian Hickson
-- [XHTML's Dirty Little Secret](http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html) by Mark Pilgrim
-- [XHTML - What's the Point?](http://hsivonen.iki.fi/xhtml-the-point/) by Henri Sivonen
-- [XHTML is not for Beginners](http://lachy.id.au/log/2005/12/xhtml-beginners) by Lachlan Hunt
+### XHTML document
 
-## 지원
+```xml
+<!-- Content-Type: application/xhtml+xml -->
 
-대부분의 브라우저들은 현재 XHTML를 지원합니다, Firefox, Chrome, Safari, Opera, 그리고 Internet Explorer (IE 9 이후). (Internet Explorer 8 과 그 이전 버전은 표준의 XHTML MIME타입을 선언한 XHTML문서를 알려지지않은 파일타입으로 간주하여 다운로드 다이얼로그를 표시합니다.)
-
-또 많이 사용하는 {{Glossary("JavaScript")}} 라이브러리와 개발자도구들은 XHTML을 제한적으로 지원하건나 지원하지 않으니 주의하십시오.
-
-## HTML과의 차이점
-
-[Properly Using CSS and JavaScript in XHTML Documents](/ko/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents) 글의 일부문에서 HTML과 XHTML의차이점을 설명하고 있습니다.
-
-## 도구
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
+  <head>
+    <title>XHTML</title>
+  </head>
+  <body>
+    <p>저는 XHTML 문서입니다</p>
+  </body>
+</html>
+```
 
-- [Standards-Compliant Authoring Tools](/ko/docs/Standards-Compliant_Authoring_Tools)
+실제로, `Content-Type: application/xhtml+xml` 헤더를 사용하여 웹을 통해 제공되는 "XHTML" 문서는 거의 없습니다. 대신, 문서가 XML 구문 규칙을 따르도록 작성되었더라도 `Content-Type: text/html` 헤더와 함께 제공됩니다. 따라서 브라우저는 XML 파서가 아닌 HTML 파서를 사용하여 해당 문서를 구문 분석합니다.
 
-## 바깥 고리
+## 같이 보기
 
-- [HTML](/ko/docs/HTML)
-- [Namespaces](/ko/docs/Namespaces)
+- [HTML](/ko/docs/Glossary/HTML)
+- [HTML5](/ko/docs/Glossary/HTML5)
+- [SVG](/ko/docs/Glossary/SVG)
+- [MathML](/ko/docs/Glossary/MathML)
+- [XML](/ko/docs/Glossary/XML)
diff --git a/files/ko/glossary/xml/index.md b/files/ko/glossary/xml/index.md
index e3f7ecedeb50bb..3e9545e3fc2eb4 100644
--- a/files/ko/glossary/xml/index.md
+++ b/files/ko/glossary/xml/index.md
@@ -1,6 +1,8 @@
 ---
 title: XML
 slug: Glossary/XML
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 XML(eXtensible Markup Language)은 W3C에서 지정한 범용 마크업 언어입니다. 정보 기술(IT) 산업에서는 데이터 기술 언어로서 XML을 기반으로 한 많은 언어를 사용하고 있습니다.
diff --git a/files/ko/glossary/xmlhttprequest/index.md b/files/ko/glossary/xmlhttprequest/index.md
index 599bc89de7aacb..781a5011368151 100644
--- a/files/ko/glossary/xmlhttprequest/index.md
+++ b/files/ko/glossary/xmlhttprequest/index.md
@@ -1,18 +1,17 @@
 ---
 title: XHR (XMLHttpRequest)
 slug: Glossary/XMLHttpRequest
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
 ---
 
-{{domxref("XMLHttpRequest")}}(XHR)은 {{Glossary("AJAX")}} 요청을 생성하는 {{Glossary("JavaScript")}} {{Glossary("API")}}입니다. XHR의 메서드로 {{Glossary("browser", "브라우저")}}와 {{Glossary("server", "서버")}}간의 네트워크 요청을 전송할 수 있습니다.
+{{GlossarySidebar}}
 
-## 더 알아보기
+{{domxref("XMLHttpRequest")}}(XHR)은 {{Glossary("AJAX")}} 요청을 생성하는 {{Glossary("JavaScript")}} {{Glossary("API")}}입니다. XHR의 메서드로 {{Glossary("browser", "브라우저")}}와 {{Glossary("server", "서버")}}간의 네트워크 요청을 전송할 수 있습니다.
 
-### 일반 지식
+## 같이 보기
 
 - 위키백과 [XMLHttpRequest](https://ko.wikipedia.org/wiki/XMLHttpRequest)
-- [Synchronous vs. Asynchronous Communications](http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/)
-
-### 기술 정보
-
+- [동기식 vs. 비동기식 통신](http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/)
 - {{domxref("XMLHttpRequest")}} 객체.
-- [XMLHttpRequest를 사용하는 방법에 관한 MDN 문서](/ko/docs/XMLHttpRequest/Using_XMLHttpRequest).
+- [XMLHttpRequest를 사용하는 방법에 관한 MDN 문서](/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest).

From aae0568a389d00134a412a30122f840c1c2005cf Mon Sep 17 00:00:00 2001
From: KyeongSang Yu <yukyeongsang@gmail.com>
Date: Tue, 19 Sep 2023 02:16:15 +0900
Subject: [PATCH 011/268] [ko] add translation to popover api in Web API 
 (#15346)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add translation to popover api

* Update files/ko/web/api/popover_api/index.md

Co-authored-by: fano <jho2301@gmail.com>

* Update files/ko/web/api/popover_api/index.md

Co-authored-by: fano <jho2301@gmail.com>

* Update files/ko/web/api/popover_api/index.md

Co-authored-by: fano <jho2301@gmail.com>

* Update files/ko/web/api/popover_api/index.md

Co-authored-by: fano <jho2301@gmail.com>

* Update files/ko/web/api/popover_api/index.md

Co-authored-by: fano <jho2301@gmail.com>

* @jho2301 피드백 반영

---------

Co-authored-by: fano <jho2301@gmail.com>
---
 files/ko/web/api/popover_api/index.md | 96 +++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 files/ko/web/api/popover_api/index.md

diff --git a/files/ko/web/api/popover_api/index.md b/files/ko/web/api/popover_api/index.md
new file mode 100644
index 00000000000000..f631a57c75cfd3
--- /dev/null
+++ b/files/ko/web/api/popover_api/index.md
@@ -0,0 +1,96 @@
+---
+title: Popover API
+slug: Web/API/Popover_API
+l10n:
+  sourceCommit: e0d92259b485a219840367cf4e23a7069f192eec
+---
+
+{{DefaultAPISidebar("Popover API")}}
+
+**Popover API**는 개발자에게 다른 페이지 콘텐츠 위에 팝오버 콘텐츠를 표시할 수 있는 표준적이고 일관되며 유연한 메커니즘을 제공합니다. 팝오버 콘텐츠는 HTML 속성을 사용하여 선언적으로 제어하거나 JavaScript를 통해 제어할 수 있습니다.
+
+## 개념 및 사용법
+
+웹에서 매우 일반적인 패턴은 다른 콘텐츠 위에 콘텐츠를 표시하여 사용자의 주의를 특정 중요 정보나 수행해야 하는 작업으로 유도하는 것입니다. 이 콘텐츠는 오버레이, 팝업, 팝오버, 대화 상자 등 여러 가지 이름으로 불릴 수 있습니다. 문서에서는 이를 팝오버라고 부릅니다. 일반적으로 다음과 같이 말할 수 있습니다.
+
+- **모달**, 즉 팝오버가 표시되는 동안에는 팝오버가 어떤 식으로든 작동할 때까지(예: 중요한 선택이 이루어질 때까지) 페이지의 나머지 부분이 상호작용하지 않는 상태로 렌더링 됩니다.
+- **비모달**, 팝오버가 표시되는 동안 페이지의 나머지 부분과 상호 작용할 수 있음을 의미합니다.
+
+팝오버 API를 사용하여 생성된 팝오버는 항상 비모달입니다. 모달 팝오버를 만들려면 {{htmlelement("dialog")}}를 사용하는 것이 올바른 방법이지만, 기본적으로 `<dialog>` 요소는 {{glossary("top layer")}}에 배치되지 않지만, 팝오버는 배치된다는 점에 유의하세요. 예를 들어 지속되는 팝오버를 만들되 선언적 HTML을 사용하여 제어하려는 경우와 같이 두 요소 사이에는 상당한 중복이 있습니다. 팝오버 제어와 최상위 수준 배치를 대화 상자 의미와 결합하려는 경우, `<dialog>` 요소를 팝오버로 바꿀 수도 있습니다.
+
+popover API의 일반적인 사용 사례에는 액션 메뉴, 사용자 지정 '토스트' 알림, 폼 요소 제안, 콘텐츠 선택기 또는 교육용 UI 같은 상호작용 요소가 포함됩니다.
+
+팝오버는 두 가지 방법으로 만들 수 있습니다.
+
+- 선언적으로, 새로운 HTML 특성 세트를 통해 다음 코드를 사용하여 토글 버튼이 있는 간단한 팝오버를 만들 수 있습니다.
+
+  ```html
+  <button popovertarget="mypopover">팝오버를 토글하세요</button>
+  <div id="mypopover" popover>팝오버 콘텐츠</div>
+  ```
+
+- 예를 들어 {{domxref("HTMLElement.togglePopover()")}}와 같은 JavaScript API를 사용하여 팝오버를 표시와 숨김 간에 토글 할 수 있습니다.
+
+팝오버가 전환될 때 반응하는 새로운 이벤트와 팝오버의 스타일을 지정하는 데 도움이 되는 CSS 기능도 추가되었습니다. 모든 새로운 기능은 아래에 나열되어 있습니다.
+
+이 API 사용에 대한 자세한 안내는 [popover API 사용하기](/ko/docs/Web/API/Popover_API/Using) 문서를 참조하세요.
+
+## HTML 특성
+
+- [`popover`](/ko/docs/Web/HTML/Global_attributes/popover)
+  - : 요소를 팝오버 요소로 전환하는 전역 속성으로, 팝오버 상태(`"auto"` 또는 `"manual"`)를 값으로 받습니다.
+- [`popovertarget`](/ko/docs/Web/HTML/Element/button#popovertarget)
+  - : {{htmlelement("button")}} 또는 {{htmlelement("input")}} 요소를 팝오버 제어 버튼으로 바꾸고 제어할 팝오버 요소의 ID를 값으로 받습니다.
+- [`popovertargetaction`](/ko/docs/Web/HTML/Element/button#popovertargetaction)
+  - : 컨트롤 {{htmlelement("button")}} 또는 {{htmlelement("input")}}으로 제어되는 팝오버 요소에서 수행할 작업(`"hide"`, `"show"`, 또는 `"toggle"`)을 지정합니다.
+
+## CSS 기능
+
+- {{cssxref("::backdrop")}}
+  - : `::backdrop` 의사 요소(pseudo-element)는 팝오버 요소 바로 뒤에 배치되는 전체 화면 요소로, 원하는 경우 팝오버 뒤에 있는 페이지 콘텐츠에 효과(예: 흐리게 처리)를 추가할 수 있습니다.
+- {{cssxref(":popover-open")}}
+  - : `:popover-open` 의사 클래스(pseudo-class)는 팝오버 요소가 표시 상태일 때만 일치하며, 팝오버 요소가 표시될 때 스타일을 지정하는 데 사용할 수 있습니다.
+
+## 인터페이스
+
+- {{domxref("ToggleEvent")}}
+  - : 팝오버 요소의 상태가 표시와 숨김 사이를 전환할 때 사용자에게 알리는 이벤트를 나타냅니다. 팝오버의 상태가 변경될 때 발생하는 {{domxref("HTMLElement.beforetoggle_event", "beforetoggle")}} 및 {{domxref("HTMLElement.toggle_event", "toggle")}} 이벤트의 이벤트 객체입니다.
+
+## 다른 인터페이스로의 확장
+
+### 인스턴스 속성
+
+- {{domxref("HTMLElement.popover")}}
+  - : JavaScript를 통해 요소의 팝오버 상태(`"auto"` or `"manual"`)를 가져오고 설정하며, 기능 감지에 사용할 수 있습니다. [`popover`](/ko/docs/Web/HTML/Global_attributes/popover) 전역 HTML 특성 값을 반영합니다.
+- {{domxref("HTMLButtonElement.popoverTargetElement")}} 및 {{domxref("HTMLInputElement.popoverTargetElement")}}
+  - : 컨트롤 버튼으로 제어되는 팝오버 요소를 가져오고 설정합니다. JavaScript에서 [`popovertarget`](/ko/docs/Web/HTML/Element/button#popovertarget) HTML 특성에 해당하는 값입니다.
+- {{domxref("HTMLButtonElement.popoverTargetAction")}} 및 {{domxref("HTMLInputElement.popoverTargetAction")}}
+  - : 컨트롤 버튼으로 제어되는 팝오버 요소에서 수행할 액션(`"hide"`, `"show"`, 또는 `"toggle"`)을 가져오고 설정합니다. [`popovertargetaction`](/ko/docs/Web/HTML/Element/button#popovertargetaction) HTML 특성의 값을 반영합니다.
+
+### 인스턴스 메서드
+
+- {{domxref("HTMLElement.hidePopover()")}}
+  - : 팝오버 요소를 최상위 레이어에서 제거하고 `display: none`으로 스타일을 지정하여 숨깁니다.
+- {{domxref("HTMLElement.showPopover()")}}
+  - : 팝오버 요소를 최상위 레이어에 추가하여 표시합니다.
+- {{domxref("HTMLElement.togglePopover()")}}
+  - : 팝오버 요소를 표시 상태와 숨김 상태 간에 토글 합니다.
+
+### 이벤트
+
+- `HTMLElement` {{domxref("HTMLElement.beforetoggle_event", "beforetoggle")}} 이벤트
+  - : 팝오버 요소의 상태가 표시와 숨김 사이 또는 그 반대로 변경되기 직전에 실행됩니다.
+- `HTMLElement` {{domxref("HTMLElement.toggle_event", "toggle")}} 이벤트
+  - : 팝오버 요소의 상태가 표시됨에서 숨김으로 또는 그 반대로 변경된 직후에 발생합니다. 이 이벤트는 이미 {{htmlelement("details")}} 요소의 상태 변경을 알리기 위해 존재했으며, 팝오버 요소에도 확장하는 것이 논리적으로 보였습니다.
+
+## 예제
+
+MDN 팝오버 예제의 전체 컬렉션에 접근하려면 [Popover API 예제 랜딩 페이지](https://mdn.github.io/dom-examples/popover-api/)를 참조하세요.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}

From 8f9688adff45edb14ea0b8f777f80fb009cde9b8 Mon Sep 17 00:00:00 2001
From: Eblis Manuel Caro Rivero <ebliscode@gmail.com>
Date: Mon, 18 Sep 2023 14:12:29 -0400
Subject: [PATCH 012/268] es: Fix typo in video_and_audio_content (#15929)

Update index.md

Correcting only one letter in the translation of the word "sizes" into Spanish.
---
 .../multimedia_and_embedding/video_and_audio_content/index.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 11e93e09f755b7..137b8b6bc871a4 100644
--- a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -153,7 +153,7 @@ Esto nos dará un resultado que se parece a esto:
 Las nuevas características son:
 
 - [`width`](/es/docs/Web/HTML/Element/video#width) y [`height`](/es/docs/Web/HTML/Element/video#height)
-  - : Puede controlar el tamanño con estos atributos o con [CSS](/es/docs/Glossary/CSS). En ambos casos, los vídeos mantienen su relación **anchura - altura nativa**. Si la relación de aspecto no se mantiene con los tamañis establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada.
+  - : Puede controlar el tamanño con estos atributos o con [CSS](/es/docs/Glossary/CSS). En ambos casos, los vídeos mantienen su relación **anchura - altura nativa**. Si la relación de aspecto no se mantiene con los tamaños establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada.
 - [`autoplay`](/es/docs/Web/HTML/Element/video#autoplay)
   - : Hace que el audio o el vídeo empiece a reproducirse de inmediato, mientras se carga el resto de la página. Le aconsejamos que no utilice vídeo (o audio) de reproducción automática en sus sitios, ya que los usuarios pueden encontralo molesto.
 - [`loop`](/es/docs/Web/HTML/Element/video#loop)

From 884f80a91d37569fc12e4f83ff9d36f8b64be5f5 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Mon, 18 Sep 2023 20:32:34 +0200
Subject: [PATCH 013/268] Fix #14379 - Translate
 Learn/Accessibility/WAI-ARIA_basics (#15773)

* Start

* Progress X/N

* progress

* first pass - end

* typos

* Typofix

* Typofixes/nitpicking

---------

Co-authored-by: Carolyn Wu <carolyn94118@gmail.com>
---
 .../accessibility/wai-aria_basics/index.md    | 370 ++++++++++--------
 1 file changed, 196 insertions(+), 174 deletions(-)

diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.md b/files/fr/learn/accessibility/wai-aria_basics/index.md
index b20dda9a308995..aabe5a52cbbb91 100644
--- a/files/fr/learn/accessibility/wai-aria_basics/index.md
+++ b/files/fr/learn/accessibility/wai-aria_basics/index.md
@@ -1,203 +1,202 @@
 ---
 title: Les bases de WAI-ARIA
 slug: Learn/Accessibility/WAI-ARIA_basics
+l10n:
+  sourceCommit: ebd38013d2af33dd860b50cee59802661aa3c966
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
 
-Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.
+Nous avons vu dans l'article précédent qu'il pouvait être difficile de créer des contrôles d'interface complexes à l'aide de HTML non-sémantique et dont le contenu est géré en JavaScript. WAI-ARIA est une technologie qui aide à résoudre ces problèmes en ajoutant une couche sémantique supplémentaire qui peut être utilisée par les navigateurs et les outils d'assistance pour indiquer à la personne ce dont il s'agit. Dans cet article, nous verrons comment l'utiliser à un premier niveau pour améliorer l'accessibilité.
 
-<table class="standard-table">
+<table>
   <tbody>
     <tr>
-      <th scope="row">  Prerequis:</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
-        Connaissances informatiques de base, une compréhension de base de HTML,
-        CSS et JavaScript, une compréhension des
-        <a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.
+        Notions de base en informatique, compréhension élémentaire de HTML, CSS et JavaScript, compréhension <a href="/fr/docs/Learn/Accessibility">des articles précédent de ce module</a>.
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectifs&nbsp;:</th>
       <td>
-        Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir
-        une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le
-        cas échéant.
+        Se familiariser avec WAI-ARIA et apprendre comment il peut être utilisé pour fournir une couche sémantique complémentaire utile, permettant d'améliorer l'accessibilité aux endroits nécessaires.
       </td>
     </tr>
   </tbody>
 </table>
 
-## Qu'est WAI-ARIA?
+## Qu'est-ce que WAI-ARIA&nbsp;?
 
-Commençons par regarder ce que WAI-ARIA est , et ce qu'il peut faire pour nous.
+Commençons par définir ce qu'est WAI-ARIA et par voir ce qu'il peut apporter.
 
-### Un nouvel ensemble de problèmes
+### Une nouvelle classe de problème
 
-Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.
+Dès lors que les applications web ont gagné en complexité et en dynamisme, certains problèmes et certaines fonctionnalités d'accessibilité sont apparus.
 
-Par exemple, HTML5 a introduit un certain nombre d'éléments sémantiques pour définir des fonctionnalités de page communes ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.) Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple `<div class="nav">` , mais ils posaient problème, car il n'existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .
+HTML a par exemple introduit différents éléments sémantiques pour les composants génériques d'une page ([`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<footer>`](/fr/docs/Web/HTML/Element/footer), etc.). Avant que ces éléments soient disponibles, les équipes de développement utilisaient plutôt des éléments [`<div>`](/fr/docs/Web/HTML/Element/div) avec des identifiants ou des classes (par exemple `<div class="nav">`), mais cette méthode ne permettait pas à un programme de trouver simplement certaines fonctionnalités de la page, comme les blocs de navigation.
 
-La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:
+La solution initiale consista alors à ajouter un ou plusieurs liens masqués en haut de la page pour pointer vers la navigation (ou autre chose). Par exemple :
 
 ```html
-<a href="#hidden" class="hidden">Passer à la navigation</a>
+<a href="#hidden" class="hidden">Accéder directement à la navigation</a>
 ```
 
-Mais ceci n'est pas encore très précis et ne peut être utilisé que lorsque le lecteur d'écran lit en haut de la page.
+Toutefois, cette solution n'était pas précise et pouvait uniquement être utilisée lorsque le lecteur d'écran narrait depuis le haut de la page.
 
-Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux input pour rendre de tels contrôles:
+Par ailleurs, les applications ont commencé à fournir des contrôles complexes, comme des sélecteurs de date, des curseurs, etc. HTML a apporté [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) et [`<input type="range">`](/fr/docs/Web/HTML/Element/input/range).
 
-```html
-<input type="date" /> <input type="range" />
-```
-
-Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.
+À leurs débuts, ces éléments étaient mal pris en charge et il était (voire il est toujours) difficile de les mettre en forme, entraînant les équipes de conception et de développement à choisir des solutions sur mesure. Plutôt que d'utiliser des fonctionnalités natives, ils tiraient parti de bibliothèques JavaScript qui généraient de tels contrôles sous la forme de [`<div>`](/fr/docs/Web/HTML/Element/div) imbriqués, mis en forme avec CSS et contrôlés avec JavaScript.
 
-Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d'écran ne peuvent pas comprendre ce qu'ils sont, et on dit aux utilisateurs qu'ils peuvent voir une multitude d'éléments sans sémantique pour décrire ce qu'ils veulent dire.
+Cela fonctionne visuellement, mais les lecteurs d'écran ne peuvent pas interpréter le rôle de ces éléments. Ces outils indiquent alors aux utilisatrices et utilisateurs qu'il y a un ensemble d'élément sans sémantique permettant de décrire leur fonctionnalité.
 
-### Entrez WAI-ARIA
+### L'arrivée de WAI-ARIA
 
-[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:
+[WAI-ARIA](https://www.w3.org/TR/wai-aria/) (<i lang="en">Web Accessibility Initiative - Accessible Rich Internet Applications</i>) est une spécification écrite par le W3C, qui définit un ensemble d'attributs HTML supplémentaires, qui peuvent être appliqués aux éléments afin de fournir une sémantique complémentaire et d'améliorer l'accessibilité où elle fait défaut. La spécification définit trois grandes fonctionnalités&nbsp;:
 
-- **Rôles** - Ceux-ci définissent ce qu'un élément est ou fait. Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple role = "navigation" ({{htmlelement("nav")}}) ou `role="complementary"` ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"`, etc., que l'on trouve couramment dans les UIs.
-- **Propriétés** — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, `aria-required="true"` spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que `aria-labelledby="label"` vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec `<label for="input">`. À titre d'exemple, vous pouvez utiliser `aria-labelledby` pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}} est le label de plusieurs cellules de tableau, ou vous pouvez l'utiliser comme alternative au texte alternatif d'image — spécifiez les informations existantes sur la page en tant que texte alternatif d'image, plutôt que de devoir les répéter à l'intérieur de l'attribut `alt`. Vous pouvez voir un exemple de celà à [Alternatives textuelles](/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles).
-- **États** — Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que `aria-disabled="true"`, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.
+- [Les rôles](/fr/docs/Web/Accessibility/ARIA/Roles)
+  - : Ils définissent ce qu'est un élément ou ce qu'il fait. La plupart sont appelés des rôles de repère (<i lang="en">landmark roles</i>), car ils dupliquent la valeur sémantique des éléments structurels, comme `role="navigation"` ([`<nav>`](/fr/docs/Web/HTML/Element/nav)) or `role="complementary"` ([`<aside>`](/fr/docs/Web/HTML/Element/aside)). D'autres rôles décrivent différentes structures qu'on retrouve fréquemment sur les pages comme `role="banner"`, `role="search"`, `role="tablist"`, `role="tabpanel"`.
+- Les propriétés
+  - : Elles définissent des propriétés des éléments, qui peuvent être utilisées pour indiquer une sémantique supplémentaire. Par exemple, `aria-required="true"` indiquera qu'un champ doit être renseigné afin que le formulaire soit valide&nbsp;; `aria-labelledby="label"` permettra d'indiquer un identifiant d'un élément qui pourra être utilisé comme libellé pour n'importe quoi sur la page, même pour plusieurs éléments (ce qui n'est pas possible avec `<label for="input">`). On pourrait par exemple utiliser `aria-labelledby` afin d'indiquer qu'une description importante contenue dans un élément [`<div>`](/fr/docs/Web/HTML/Element/div) est le libellé pour plusieurs cellules d'un tableau, ou l'utiliser comme texte alternatif d'une image (en indiquant une information existant déjà sur la page plutôt que d'avoir à la répéter au sein de l'attribut `alt`). Vous pouvez observer un tel exemple dans [la section sur les alternatives textuelles](/fr/docs/Learn/Accessibility/HTML#alternatives_textuelles).
+- Les états
+  - : Il s'agit de propriétés spéciales qui définissent les conditions actuelles des éléments. Par exemple, `aria-disabled="true"` permet d'indiquer à un lecteur d'écran que le champ de formulaire est actuellement désactivé. Contrairement aux propriétés qui ne changent pas pendant le fonctionnement de l'application, les états peuvent changer (ils sont généralement mis à jour à l'aide de JavaScript).
 
-Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.
+Les attributs WAI-ARIA ne modifient en rien la page web en dehors des informations exposées aux API du navigateur portant sur l'accessibilité (ce qu'utilisent les lecteurs d'écran pour récupérer des informations). WAI-ARIA ne modifie pas la structure de la page web, le DOM, etc. On pourra toutefois utiliser ses attributs pour sélectionner certains éléments en CSS.
 
-> **Note :** Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la [définition des rôles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions).
+> **Note :** La spécification WAI-ARIA liste l'ensemble des rôles ARIA et leurs utilisations possibles, avec des liens vers de plus amples informations&nbsp;: [définition des rôles (en anglais)](https://www.w3.org/TR/wai-aria-1.1/#role_definitions). Sur MDN, vous pouvez consulter [la section sur les rôles ARIA](/fr/docs/Web/Accessibility/ARIA/Roles).
 >
-> La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir [Définitions des états et des propriétés (tous les attributs aria-\*)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def).
+> La spécification contient également la liste de l'ensemble des propriétés et des états, avec des liens vers de plus amples informations&nbsp;: [définition des états et propriétés (tous les attributs `aria-\*`)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def).
 
-### Où WAI-ARIA est supporté?
+### Quelle est la prise en charge de WAI-ARIA&nbsp;?
 
-Ce n'est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:
+Cette question n'est pas si simple. Il est difficile de trouver une ressource de référence qui indique les fonctionnalités de WAI-ARIA qui sont prises en charge et dans quelles conditions. En effet&nbsp;:
 
-1. Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA
-2. Il y a beaucoup de combinaisons de systèmes d'exploitation, navigateurs et lecteurs d'écrans à considérer
+1. La spécification WAI-ARIA définit de nombreuses fonctionnalités.
+2. Il y a de nombreuses combinaisons à considérer, créées par les systèmes d'exploitation, les navigateurs et les lecteurs d'écran.
 
-Ce dernier point est la clé: pour utiliser un lecteur d'écran, votre système d'exploitation a besoin d'un navigateur ayant les APIs d'accessibilité nécessaires, de manière à présenter l'information dont les lecteurs d'écran ont besoin pour faire leur travail. Les systèmes d'exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d'écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir [Rough Guide: browsers, operating systems and screen reader support updated](https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/).
+Ce dernier point est crucial. Pour utiliser un lecteur d'écran, il faut déjà que votre système d'exploitation permette de lancer des navigateurs disposant des API d'accessibilité pour exposer les bonnes informations aux lecteurs d'écran, afin que ces derniers fonctionnent. La plupart des systèmes d'exploitation communément utilisés disposent d'un ou deux navigateurs qui permettent aux lecteurs d'écran de fonctionner. Le groupe Paciello décrit dans un billet relativement à jour les données qui permettent d'arriver à cette conclusion&nbsp;: [Guide approximatif&nbsp; prise en charge entre les navigateurs, systèmes d'exploitation et lecteurs d'écran (mis à jour en juin 2017) (en anglais)](https://www.tpgi.com/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/).
 
-Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d'écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d'une manière utile.
+Il faut ensuite savoir si les navigateurs en question prennent en charge les fonctionnalités ARIA et les exposent grâce à leurs API, mais aussi savoir si les lecteurs d'écran reconnaissent l'information et la présente à leurs utilisatrices et utilisateurs de façon utile.
 
-1. Browser support is generally quite good — at the time of writing, [caniuse.com](http://caniuse.com/#feat=wai-aria) stated that global browser support for WAI-ARIA was around 88%.
-2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's [WAI-ARIA Screen reader compatibility](http://www.powermapper.com/tests/screen-readers/aria/) article.
+1. La prise en charge par les navigateurs est quasiment universelle.
+2. La prise en charge des fonctionnalités ARIA par les lecteurs d'écran n'est pas aussi complète, bien que les lecteurs d'écran les plus populaires s'en approchent. Pour avoir une idée concrète des niveaux de prise en charge, vous pouvez consulter l'article de Powermapper [Compatibilité des lecteurs d'écran avec WAI-ARIA (en anglais)](https://www.powermapper.com/tests/screen-readers/aria/).
 
-In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.
+Dans cet article, nous n'aborderons pas chaque fonctionnalité WAI-ARIA et les détails de chaque prise en charge. Nous nous intéresserons plutôt aux fonctionnalités essentielles de WAI-ARIA que vous devez connaître, et si nous ne mentionnons pas la compatibilité, vous pouvez partir du principe que la fonctionnalité en question est relativement bien prise en charge. Nous indiquerons clairement s'il y a des exceptions.
 
-> **Note :** Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see [About jQuery UI: Deep accessibility support](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/), and [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html).
+> **Note :** Certaines bibliothèques JavaScript prennent en charge WAI-ARIA, ce qui signifie qu'elles ajoutent des attributs ARIA lorsqu'elles génèrent des éléments d'interface complexes comme des contrôles de formulaires. Si vous recherchez une bibliothèque JavaScript tierce pour vos composants d'interface, gardez en tête que l'accessibilité est un critère de choix. On pourra notamment citer jQuery UI (voir [à propos de jQuery UI&nbsp;: prise en charge étendue de l'accessibilité](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/), et [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html).
 
-### When should you use WAI-ARIA?
+### Quand faut-il utiliser WAI-ARIA&nbsp;?
 
-We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:
+Nous avons déjà abordé les problèmes qui ont amené à la création de WAI-ARIA, mais on retiendra quatre domaines pour lesquels WAI-ARIA s'avère utile&nbsp;:
 
-1. **Signposts/Landmarks**: ARIA's `role` attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g `search`, `tabgroup`, `tab`, `listbox`, etc.
-2. **Dynamic content updates**: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use `aria-live` to inform screenreader users when an area of content is updated, e.g. via [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest), or [DOM APIs](/fr/docs/Web/API/Document_Object_Model).
-3. **Enhancing keyboard accessibility**: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using `tabindex`).
-4. **Accessibility of non-semantic controls**: When a series of nested `<div>`s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like `button`, `listbox`, or `tabgroup`, and properties like `aria-required` or `aria-posinset` to provide further clues as to functionality.
+- Signes et repères
+  - : Les valeurs utilisées pour l'attribut ARIA [`role`](/fr/docs/Web/Accessibility/ARIA/Roles) agissent comme des repères qui répliquent la sémantique d'éléments HTML natifs (par exemple [`<nav>`](/fr/docs/Web/HTML/Element/nav)), ou qui vont au-delà en fournissant des points de repères pour des domaines fonctionnels comme&nbsp;:`search`, `tablist`, `tab`, `listbox`, etc.
+- Mises à jour dynamiques du contenu
+  - : Les lecteurs d'écran peuvent avoir des difficultés à constamment indiquer le contenu qui change sur la page. Avec ARIA, on peut utiliser l'attribut [`aria-live`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-live) pour informer les personnes lorsqu'une zone de contenu est mise à jour (que ce soit avec [`fetch()`](/fr/docs/Web/API/fetch) et/ou [les API du DOM](/fr/docs/Web/API/Document_Object_Model).
+- Amélioration de l'accessibilité au clavier
+  - : Certains éléments HTML natifs peuvent être utilisés avec le clavier. Lorsqu'on utilise d'autres éléments avec JavaScript pour simuler des interactions analogues, l'accessibilité au clavier et la détection par les lecteurs d'écran peuvent en pâtir. WAI-ARIA fournit des outils pour permettre aux autres éléments de recevoir le focus, notamment grâce à `tabindex`).
+- Accessibilité des contrôles non-sémantiques
+  - : Lorsqu'un contrôle d'interface complexe est implémenté à l'aide d'éléments `<div>` imbriqués et avec CSS/JavaScript, ou qu'un contrôle natif est amélioré ou modifié à l'aide de JavaScript, l'accessibilité peut être réduite, celles et ceux qui utilisent des lecteurs d'écran peuvent avoir des difficultés à déterminer ce que permet le contrôle s'il n'y a pas d'indications sémantiques ou d'autres indices. Dans ces situations, ARIA peut aider en fournissant ce qui manque, à l'aide de rôles comme `button`, `listbox`, ou `tablist`, de propriétés comme `aria-required` ou `aria-posinset` afin d'offrir des indications sur la fonctionnalité en question.
 
-One thing to remember though — **you should only use WAI-ARIA when you need to!** Ideally, you should _always_ use [native HTML features](/fr/docs/Learn/Accessibility/HTML) to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.
+S'il y a une chose à se rappeler, c'est qu'**il faut uniquement utiliser WAI-ARIA lorsque c'est nécessaire&nbsp;!** Idéalement, vous devriez _toujours_ utiliser [les fonctionnalités HTML natives](/fr/docs/Learn/Accessibility/HTML) pour fournir les informations sémantiques nécessaires aux lecteurs d'écran pour que leurs indications soient pertinentes. Cela n'est pas toujours possible, soit parce que vous avez un contrôle limité sur le code, soit parce que vous créez quelque chose de complexe pour lequel il n'existe pas d'élément HTML natif. Dans ces situations, WAI-ARIA peut être un outil pertinent afin d'améliorer l'accessibilité.
 
-But again, only use it when necessary!
+Rappelons-le quand même&nbsp;: **n'utilisez WAI-ARIA que lorsque c'est nécessaire&nbsp;!**
 
-> **Note :** Also, try to make sure you test your site with a variety of _real_ users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.
+> **Note :** De façon générale, essayez autant que possible de tester votre site avec une diversité de personnes, avec un handicap ou non, utilisant des lecteurs d'écran, utilisant la navigation au clavier, etc. Elles sauront bien mieux vous dire si le résultat fonctionne bien.
 
-## Practical WAI-ARIA implementations
+## Implémentations concrètes avec WAI-ARIA
 
-In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.
+Dans cette section, nous verrons chacun de ces quatre domaines avec des exemples concrets. Avant de continuer, mettez en place un lecteur d'écran pour tester les différents exemples. Pour cela, n'hésitez pas à consulter [le paragraphe Tester les lecteurs d'écrans](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#les_lecteurs_décran).
 
-See our section on [testing screenreaders](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) for more information.
+### Signes et repères
 
-### Signposts/Landmarks
-
-WAI-ARIA adds the [`role` attribute](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our [website-no-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles) example ([see it live](http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/)) has the following structure:
+WAI-ARIA ajoute [l'attribut `role`](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) aux navigateurs, qui permet d'indiquer une valeur sémantique supplémentaire aux éléments de votre site où c'est nécessaire. Cela permet notamment de fournir des informations aux lecteurs d'écran pour aider les personnes à trouver des éléments courants sur la page. Prenons comme exemple le site [website-no-roles](https://github.com/mdn/learning-area/tree/main/accessibility/aria/website-no-roles) ([voir ce qu'il donne en direct](https://mdn.github.io/learning-area/accessibility/aria/website-no-roles/)). Ce site a la structure suivante&nbsp;:
 
 ```html
 <header>
-  <h1>...</h1>
+  <h1>…</h1>
   <nav>
     <ul>
-      ...
+      …
     </ul>
     <form>
-      <!-- search form  -->
+      <!-- Formulaire de recherche -->
     </form>
   </nav>
 </header>
 
 <main>
-  <article>...</article>
-  <aside>...</aside>
+  <article>…</article>
+  <aside>…</aside>
 </main>
 
-<footer>...</footer>
+<footer>…</footer>
 ```
 
-If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:
+Si vous essayez cet exemple avec un lecteur d'écran sur un navigateur récent, vous obtiendrez déjà certaines informations utiles. VoiceOver vous donnera les indications suivantes&nbsp;:
 
-- On the `<header>` element — "banner, 2 items" (it contains a heading and the `<nav>`).
-- On the `<nav>` element — "navigation 2 items" (it contains a list and a form).
-- On the `<main>` element — "main 2 items" (it contains an article and an aside).
-- On the `<aside>` element — "complementary 2 items" (it contains a heading and a list).
-- On the search form input — "Search query, insertion at beginning of text".
-- On the `<footer>` element — "footer 1 item".
+- Sur l'élément `<header>`&nbsp;: «&nbsp;bannière, 2 éléments&nbsp;» (il contient un titre et l'élément `<nav>`).
+- Sur l'élément `<nav>`&nbsp;: «&nbsp;navigation, 2 éléments&nbsp;» (il contient une liste et un formulaire).
+- Sur l'élément `<main>`&nbsp;: «&nbsp;principal, 2 éléments&nbsp;» (il contient un article et un aparté).
+- Sur l'élément `<aside>`&nbsp;: «&nbsp;complémentaire, 2 éléments&nbsp;» (il contient un titre et une liste).
+- Sur l'élément du formulaire de recherche&nbsp;: «&nbsp;requête de recherche, insertion au début du texte&nbsp;».
+- Sur l'élément `<footer>`&nbsp;: «&nbsp;pied-de-page, 1 élément.&nbsp;»
 
-If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.
+Si vous utilisez le menu des repères de VoiceOver (ou de votre lecteur d'écran) et utilisez les flèches du clavier pour naviguer parmi les choix du menu, vous verrez la plupart des éléments bien organisés, ce qui permet d'y accéder rapidement.
 
-![](landmarks-list.png)
+![Capture d'écran du menu de VoiceOver sur macOS où la liste des repères (landmarks) inclut la bannière, l'élément de navigation, le contenu principal et le contenu complémentaire.](landmarks-list.png)
 
-However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (`<input type="search">`). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.
+Toutefois, on pourrait faire encore mieux. Le formulaire de recherche est un emplacement important dont on souhaite qu'il soit rapidement accessible, mais il n'apparaît pas dans la liste du menu des repères et n'est pas considéré comme un repère important.
 
-Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see [index.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html) and [style.css](https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css)), or navigating to our [website-aria-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles) example ([see it live](http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)), which has a structure like this:
+Améliorons cet exemple en utilisant certaines fonctionnalités ARIA. Tout d'abord, ajoutons quelques attributs [`role`](/fr/docs/Web/Accessibility/ARIA/Roles) à notre structure HTML. Vous pouvez récupérer un exemplaire des fichiers (voir [`index.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/website-no-roles/index.html) et [`style.css`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/website-no-roles/style.css)), ou naviguer jusqu'à l'exemple [website-aria-roles](https://github.com/mdn/learning-area/tree/main/accessibility/aria/website-aria-roles) ([le voir en direct](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)), dont la structure est la suivante&nbsp;:
 
 ```html
 <header>
-  <h1>...</h1>
+  <h1>…</h1>
   <nav role="navigation">
     <ul>
-      ...
+      …
     </ul>
     <form role="search">
-      <!-- search form  -->
+      <!-- formulaire de recherche -->
     </form>
   </nav>
 </header>
 
 <main>
-  <article role="article">...</article>
-  <aside role="complementary">...</aside>
+  <article role="article">…</article>
+  <aside role="complementary">…</aside>
 </main>
 
-<footer>...</footer>
+<footer>…</footer>
 ```
 
-We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label), which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.
+Nous avons également ajouté l'attribut [`aria-label`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-label) à l'élément [`<input>`](/fr/docs/Web/HTML/Element/input), qui fournit un libellé descriptif à utiliser par le lecteur d'écran, même sans élément [`<label>`](/fr/docs/Web/HTML/Element/label). Dans un cas comme celui-ci, c'est plutôt utile, un formulaire de recherche comme celui-là est très courant et facilement reconnaissable, ajouter un libellé visible pourrait dégrader l'apparence de la page.
 
 ```html
 <input
   type="search"
   name="q"
-  placeholder="Search query"
-  aria-label="Search through site content" />
+  placeholder="Termes de recherche"
+  aria-label="Recherchez parmi le contenu du site" />
 ```
 
-Now if we use VoiceOver to look at this example, we get some improvements:
+Si on utilise VoiceOver sur cette version, on pourra noter quelques améliorations&nbsp;:
 
-- The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.
-- The label text contained in the `aria-label` attribute is read out when the form input is highlighted.
+- Le formulaire de recherche apparaît comme un élément distinct, à la navigation sur la page et sur le menu des repères de VoiceOver.
+- Le texte du libellé porté par l'attribut `aria-label` est énoncé lorsque le champ du formulaire reçoit le focus.
 
-Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just `<div>`s, you should definitely include the ARIA roles to provide these much needed semantics!
+De plus, le site est ainsi plus accessible pour les personnes qui utilisent un ancien navigateur tel qu'IE8 grâce aux rôles indiqués. Si votre site est construit uniquement avec des éléments `<div>`, vous devriez absolument inclure ces rôles ARIA pour indiquer la sémantique correspondante&nbsp;!
 
-The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the [Accessibility of non-semantic controls](#accessibility_of_non-semantic_controls) section. For now though, let's look at how ARIA can help with dynamic content updates.
+La sémantique améliorée du formulaire de recherche illustre ce qu'ARIA rend possible en allant au-delà de la sémantique fournie par HTML. Nous verrons plus d'exemples dans la suite de cet article et notamment dans la section [Accessibilité des contrôles non-sémantiques](#accessibilité_des_contrôles_non-sémantiques). Avant cela, voyons comment ARIA peut aider lorsque contenu est mis à jour dynamiquement.
 
-### Dynamic content updates
+### Mises à jour dynamiques du contenu
 
-Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.
+Le contenu chargé dans le DOM est facilement accessible à l'aide d'un lecteur d'écran, que ce soit le contenu textuel ou les alternatives textuelles attachées aux images. Il est donc relativement simple de rendre accessible un site statique contenant de grandes parties de textes.
 
-The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest), [Fetch](/fr/docs/Web/API/Fetch_API), or [DOM APIs](/fr/docs/Web/API/Document_Object_Model). These are sometimes referred to as **live regions**.
+Toutefois, la plupart des applications web modernes ne contiennent pas uniquement du texte statiques. Elles contiennent du contenu mis à jour dynamiquement, sans recharger l'ensemble de la page, grâce à des mécanismes comme [l'API <i lang="en">Fetch</i>](/fr/docs/Web/API/Fetch_API) (ou avant [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest)), ou [les API du DOM](/fr/docs/Web/API/Document_Object_Model). Ces emplacements dynamiques sont parfois appelés <i lang="en">live regions</i> en anglais.
 
-Let's look at a quick example — see [aria-no-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html) (also [see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html)). In this example we have a simple random quote box:
+Prenons un rapide exemple avec le fichier [`aria-no-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html) (vous pouvez [voir le résultat correspondant en démonstration](https://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html)). Dans cet exemple, on a une simple boîte contenant une citation aléatoire&nbsp;:
 
 ```html
 <section>
@@ -208,62 +207,67 @@ Let's look at a quick example — see [aria-no-live.html](https://github.com/mdn
 </section>
 ```
 
-Our JavaScript loads a JSON file via [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) containing a series of random quotes and their authors. Once that is done, we start up a [`setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval) loop that loads a new random quote into the quote box every 10 seconds:
+Grâce à [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest), le code JavaScript charge un fichier JSON contenant un ensemble de citations aléatoires avec leurs autrices et auteurs. Lorsque ce chargement est effectué, on démarre une boucle [`setInterval()`](/fr/docs/Web/API/setInterval) qui charge une nouvelle citation aléatoire dans la boîte toutes les 10 secondes&nbsp;:
 
 ```js
-var intervalID = window.setInterval(showQuote, 10000);
+const intervalID = setInterval(showQuote, 10000);
 ```
 
-This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.
+Cela fonctionne, mais l'accessibilité n'est pas au rendez-vous&nbsp;: la mise à jour du contenu n'est pas détectée par les lecteurs d'écran et les personnes qui utilisent ces outils ne sauront pas ce qui se passe sur la page. Il s'agit d'un exemple plutôt simpliste, mais imaginez une interface utilisateur plus complexe, constamment mise à jour, comme un salon de discussion, ou l'interface d'un jeu de stratégie, ou la mise à jour d'un panier d'achat dans une boutique. Il serait impossible d'utiliser l'application de façon correcte s'il n'y avait aucun moyen d'alerter l'utilisatrice ou l'utilisateur des mises à jour.
 
-WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the [`aria-live`](https://www.w3.org/TR/wai-aria-1.1/#aria-live) property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:
+Heureusement, WAI-ARIA fournit un mécanisme pour ces alertes&nbsp;: [la propriété `aria-live`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-live). Appliquer cette propriété à un élément permet aux lecteurs d'écran d'annoncer le contenu mis à jour. La rapidité à laquelle le contenu est énoncé dépend de la valeur de l'attribut&nbsp;:
 
-- `off:` The default. Updates should not be announced.
-- `polite`: Updates should be announced only if the user is idle.
-- `assertive`: Updates should be announced to the user as soon as possible.
+- `off`
+  - : Il s'agit de la valeur par défaut, les mises à jour ne doivent pas être annoncées.
+- `polite`
+  - : Les mises à jour devraient être annoncées uniquement si la personne n'est pas active sur la page.
+- `assertive`
+  - : Les mises à jour devraient être annoncées dès que possible.
 
-We'd like you to take a copy of [aria-no-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html) and [quotes.json](https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json), and update your `<section>` tag as follows:
+Téléchargez un exemplaire du fichier [`aria-no-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html) et de [`quotes.json`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/quotes.json), puis mettez à jour la balise ouvrante `<section>` comme suit&nbsp;:
 
 ```html
-<section aria-live="assertive"></section>
+<section aria-live="assertive">…</section>
 ```
 
-This will cause a screenreader to read out the content as it is updated.
+Cela permettra au lecteur d'écran d'annoncer le contenu dès qu'il est mis à jour.
 
-> **Note :** Most browsers will throw a security exception if you try to do an `XMLHttpRequest` call from a `file://` URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example [using GitHub](/fr/docs/Learn/Common_questions/Using_Github_pages), or a local web server like [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/).
+> **Note :** Si vous voyez une exception de sécurité lors de l'appel `XMLHttpRequest`, c'est que le fichier est chargé localement plutôt que depuis un serveur. Voyez [comment mettre en place un serveur de test](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) pour que cela fonctionne.
 
-There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) property to the section. Update your `<section>` tag again, like so:
+C'est mieux, mais seul le texte mis à jour est énoncé. Ce serait encore mieux d'avoir le titre qui est rappelé afin que la personne sache ce qui est énoncé. Pour cela, on peut ajouter la propriété [`aria-atomic`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) à la section. Reprenez la balise ouvrante `<section>` et modifiez-la ainsi&nbsp;:
 
 ```html
-<section aria-live="assertive" aria-atomic="true"></section>
+<section aria-live="assertive" aria-atomic="true">…</section>
 ```
 
-The `aria-atomic="true"` attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.
+L'attribut `aria-atomic="true"` indique au lecteur d'écran d'énoncer l'intégralité du contenu de l'élément comme une seule unité et pas uniquement les fragments mis à jour.
 
-> **Note :** You can see the finished example at [aria-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html) ([see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
+> **Note :** Vous pouvez consulter l'exemple terminé dans le fichier [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([et aussi voir le résultat avec cette démonstration](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
 
-> **Note :** The [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.
+> **Note :** La propriété [`aria-relevant`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) peut aussi s'avérer utile pour contrôler ce qui est énoncé lorsqu'une zone dynamique est mise à jour. On peut par exemple la paramétrer pour n'énoncer que les ajouts ou les suppressions.
 
-### Enhancing keyboard accessibility
+### Améliorer l'accessibilité au clavier
 
-As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a `<select>` box).
+Nous l'avons déjà mentionné dans ce module, un atout de HTML quant à l'accessibilité est la capacité à manipuler les fonctionnalités au clavier, comme les boutons, les contrôles de formulaire, et les liens. Généralement, on utilise la touche de tabulation pour se déplacer d'un contrôle à l'autre, la touche <kbd>Entrée</kbd> pour sélectionner ou activer un contrôle (certaines fois d'autres touches sont nécessaires comme les flèches haut et bas pour sélectionner une option dans une boîte `<select>`).
 
-However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.
+Toutefois, vous aurez parfois à écrire du code qui utilise des éléments non sémantiques pour représenter des boutons (ou d'autres contrôles), ou à détourner des contrôles pouvant gagner le focus, que ce soit pour corriger du code historique ou pour construire quelque chose de complexe où il n'y a pas de meilleure solution actuellement.
 
-In terms of making non-focusable code focusable, WAI-ARIA extends the `tabindex` attribute with some new values:
+Pour qu'un élément puisse recevoir le focus alors qu'il n'a pas cette capacité nativement, WAI-ARIA étend l'attribut `tabindex` avec de nouvelles valeurs&nbsp;:
 
-- `tabindex="0"` — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of `tabindex`.
-- `tabindex="-1"` — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links.
+- `tabindex="0"`
+  - : Comme indiqué auparavant, cette valeur permet aux éléments vers lesquels on ne peut pas naviguer au clavier de devenir accessible avec la touche <kbd>Tab</kbd>. C'est la valeur la plus utile pour `tabindex`.
+- `tabindex="-1"`
+  - : Cela permet aux éléments vers lesquels on ne peut pas naviguer au clavier de recevoir le focus via du code (JavaScript, ou comme étant la cible d'un lien).
 
-We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see [Building keyboard accessibility back in](/fr/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in).
+Ce fonctionnement est abordé plus en détails dans l'article sur l'accessibilité HTML et notamment dans la section [Remettre l'accessibilité au clavier](/fr/docs/Learn/Accessibility/HTML#remettre_laccessibilité_au_clavier).
 
-### Accessibility of non-semantic controls
+### Accessibilité des contrôles non-sémantiques
 
-This follows on from the previous section — when a series of nested `<div>`s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.
+Nous avons déjà évoqué le cas où on crée un contrôle d'interface avec des éléments `<div>` imbriqués et avec CSS/JavaScript, ou celui où on améliore un contrôle HTML natif à l'aide de JavaScript. Non seulement l'accessibilité au clavier en pâti, mais les personnes utilisant un lecteur d'écran auront des difficultés à l'utiliser s'il n'y a pas d'indications sémantiques. Dans ces situations, ARIA peut aider à fournir ces informations sémantiques.
 
-#### Form validation and error alerts
+#### Validation de formulaires et alertes en cas d'erreur
 
-First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read [Keeping it unobtrusive](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive) for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:
+Reprenons l'exemple du formulaire que nous avions abordé dans l'article sur l'accessibilité avec CSS et JavaScript (voir le paragraphe [Savoir rester discret](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#le_garder_discret) pour un récapitulatif). À la fin de cette section, nous avions inclus certains attributs ARIA dans la boîte qui affiche les messages d'erreurs lorsque la validation du formulaire échoue à l'envoi&nbsp;:
 
 ```html
 <div class="errors" role="alert" aria-relevant="all">
@@ -271,20 +275,20 @@ First of all, let's revisit the form example we first looked at in our CSS and J
 </div>
 ```
 
-- [`role="alert"`](https://www.w3.org/TR/wai-aria-1.1/#alert) automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like [`alert()`](/fr/docs/Web/API/Window/alert) calls have a number of accessibility problems; see [Popup Windows](http://webaim.org/techniques/javascript/other#popups) by WebAIM).
-- An [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) value of `all` instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.
+- [`role="alert"`](/fr/docs/Web/Accessibility/ARIA/Roles/alert_role) convertit automatiquement l'élément sur lequel il est appliqué en une zone dynamique, les changements apportés à cet endroit sont donc énoncés. De plus, il permet d'identifier sémantiquement qu'il s'agit d'un message d'alerte (contenant des informations importantes pour un temps/contexte donné). Cela représente une méthode plus accessible pour afficher une alerte (les fenêtres modales comme celles créées avec [`alert()`](/fr/docs/Web/API/Window/alert) posent certains problèmes d'accessibilité).
+- La valeur `all` de l'attribut [`aria-relevant`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) indique au lecteur d'écran de lire tout le contenu de la liste des erreurs dès qu'elle est modifiée (c'est-à-dire quand des erreurs sont ajoutées ou supprimées). Cela permet de connaître les erreurs restantes et pas uniquement ce qui a été ajouté ou supprimé de la liste.
 
-We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?
+Nous pouvons aller plus loin avec ARIA et aider à la validation. Comment indiquer les champs obligatoires et l'intervalle d'âge autorisé&nbsp;?
 
-1. At this point, take a copy of our [form-validation.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html) and [validation.js](https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js) files, and save them in a local directory.
-2. Open them both in a text editor and have a look at how the code works.
-3. First of all, add a paragraph just above the opening `<form>` tag, like the one below, and mark both the form `<label>`s with an asterisk. This is normally how we mark required fields for sighted users.
+1. Récupérez un exemplaire des fichiers [`form-validation.html`](https://github.com/mdn/learning-area/blob/main/accessibility/css/form-validation.html) et [`validation.js`](https://github.com/mdn/learning-area/blob/main/accessibility/css/validation.js) et enregistrez-les dans un répertoire local.
+2. Ouvrez ces deux fichiers dans un éditeur de texte et voyez comment le code fonctionne.
+3. Pour commencer, ajoutez un paragraphe avant la balise `<form>` ouvrante, comme celui qui suit. Ajoutez ensuite un astérisque aux libellés (éléments `<label>`) correspondant. C'est la méthode généralement utilisée pour indiquer visuellement les champs obligatoires.
 
    ```html
-   <p>Fields marked with an asterisk (*) are required.</p>
+   <p>Les champs indiqués par un astérisque (*) sont obligatoires.</p>
    ```
 
-4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the [`aria-required`](https://www.w3.org/TR/wai-aria-1.1/#aria-required) attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so:
+4. Cela a du sens visuellement, mais ça ne rend pas la chose évidente pour les personnes qui utilisent un lecteur d'écran. Heureusement, WAI-ARIA fournit l'attribut [`aria-required`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-required) qui donne une indication aux lecteurs d'écran sur ce qui doit être renseigné dans un formulaire. Mettez à jour les éléments `<input>` comme suit&nbsp;:
 
    ```html
    <input type="text" name="name" id="name" aria-required="true" />
@@ -292,78 +296,83 @@ We could go further with our ARIA usage, and provide some more validation help.
    <input type="number" name="age" id="age" aria-required="true" />
    ```
 
-5. If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".
-6. It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include [`aria-valuemin`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin) and [`aria-valuemax`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax) properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 `placeholder` attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this:
+5. Si vous enregistrez les fichiers et testez l'exemple avec un lecteur d'écran, vous pourrez entendre quelque chose comme «&nbsp;entrez votre nom astérisque, nécessaire, champ texte".
+6. Il peut également être judicieux d'indiquer une idée de la valeur attendue pour l'âge. Généralement, cela se présente sous la forme d'une bulle d'informations ou d'un texte de remplacement écrit à l'intérieur du champ. WAI-ARIA permet d'utiliser les propriétés [`aria-valuemin`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) et [`aria-valuemax`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) pour indiquer les valeurs minimale et maximale. Les lecteurs d'écran prennent en charge les attributs natifs `min` et `max`. Une autre fonctionnalité HTML prise en charge par certains lecteurs d'écran est l'attribut HTML `placeholder`, qui peut contenir un message affiché dans le champ tant qu'aucune valeur n'est saisie et qui est énoncé par les lecteurs d'écran. Mettez à jour le champ numérique de cette façon&nbsp;:
 
    ```html
+   <label for="age">Votre âge :</label>
    <input
      type="number"
      name="age"
      id="age"
-     placeholder="Enter 1 to 150"
+     placeholder="Saisissez de 1 à 150"
+     required
      aria-required="true" />
    ```
 
-> **Note :** You can see the finished example live at [form-validation-updated.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
+On veillera à toujours associer un élément [`<label>`](/fr/docs/Web/HTML/Element/label) à chaque champ du formulaire. Bien que certains lecteurs d'écran énoncent le texte de remplacement, ce n'est pas le cas de tous. Une solution complémentaire pour indiquer un nom accessible pourra être d'utiliser les attributs [`aria-label`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-label) et [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby). Toutefois, utiliser un élément `<label>` doté d'un attribut `for` restera la meilleure méthode, car elle améliore l'accessibilité pour toutes les personnes, y compris celles qui utilisent la souris.
+
+> **Note :** Vous pouvez voir l'exemple terminé dans le fichier [`form-validation-updated.html`](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
 
-WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) property to provide a label where we don't want the label to be visible to sighted users (see the [Signposts/Landmarks](#signposts/landmarks) section, above). There are some other labelling techniques that use other properties such as [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) if you want to designate a non-`<label>` element as a label or label multiple form inputs with the same label, and [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby), if you want to associate other information with a form input and have it read out as well. See [WebAIM's Advanced Form Labeling article](http://webaim.org/techniques/forms/advanced) for more details.
+En plus de [`<label>`](/fr/docs/Web/HTML/Element/label), WAI-ARIA permet certaines techniques avancées pour les libellés des formulaires. Nous avons déjà abordé la propriété [`aria-label`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-label) pour fournir un libellé qu'on ne souhaitait pas afficher visuellement (voir la section [Signes et repères](#signes_et_repères) ci-avant). D'autres techniques utilisent la propriété [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) qui permet de désigner un libellé qui n'est pas un élément `<label>` ou de libeller plusieurs champs avec le même texte. [`aria-describedby`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) quant à lui permet d'associer d'autres informations à un champ de formulaire afin qu'elles soient énoncées. Voir [le guide WebAIM sur les techniques avancées pour les libellés des formulaires (en anglais)](https://webaim.org/techniques/forms/advanced) pour plus de détails.
 
-There are many other useful properties and states too, for indicating the status of form elements. For example, `aria-disabled="true"` can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.
+Il existe de nombreux autres états et propriétés, indiquant par exemple le statut des éléments du formulaire. `aria-disabled="true"` pourra ainsi être utilisé pour indiquer qu'un champ est désactivé. La plupart des navigateurs passeront sur les champs désactivés et ceux-ci ne seront pas énoncés par le lecteur d'écran. Mais dans certains cas, un élément désactivé pourra être listé et inclure cet attribut permettra au lecteur d'écran d'indiquer que le contrôle est bel et bien désactivé.
 
-If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our [form-validation-checkbox-disabled.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html) demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:
+Si l'état désactivé d'un champ peut être amené à changer, il faudra également indiquer lorsque ça se produit et le résultat. Dans notre démo [`form-validation-checkbox-disabled.html`](https://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html), nous avons une case à cocher qui, lorsqu'elle est cochée active un autre champ pour saisir des informations complémentaires. Nous mettons en place une zone dynamique masquée&nbsp;:
 
 ```html
 <p class="hidden-alert" aria-live="assertive"></p>
 ```
 
-which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the `aria-disabled` state, and some visual indicators too:
+Ce paragraphe est masqué visuellement en utilisant du positionnement absolu. Lorsque la case est cochée, on met à jour le texte de la zone dynamique masquée pour indiquer aux personnes avec un lecteur d'écran ce qui s'est produit en cochant la case&nbsp;; on met aussi à jour l'état `aria-disabled`, ainsi que certains indicateurs visuels&nbsp;:
 
 ```js
 function toggleMusician(bool) {
-  var instruItem = formItems[formItems.length - 1];
+  const instruItem = formItems[formItems.length - 1];
   if (bool) {
     instruItem.input.disabled = false;
     instruItem.label.style.color = "#000";
     instruItem.input.setAttribute("aria-disabled", "false");
     hiddenAlert.textContent =
-      "Instruments played field now enabled; use it to tell us what you play.";
+      "Le champ instruments joués est désormais activé. Remplissez-le pour indiquer ce dont vous jouez.";
   } else {
     instruItem.input.disabled = true;
     instruItem.label.style.color = "#999";
     instruItem.input.setAttribute("aria-disabled", "true");
     instruItem.input.removeAttribute("aria-label");
-    hiddenAlert.textContent = "Instruments played field now disabled.";
+    hiddenAlert.textContent =
+      "Le champ instruments joués est désormais désactivé.";
   }
 }
 ```
 
-#### Describing non-semantic buttons as buttons
+#### Décrire les boutons non-sémantiques comme des boutons
 
-A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see [UI controls](/fr/docs/Learn/Accessibility/HTML#UI_controls) in the HTML accessibility article, and [Enhancing keyboard accessibility](#enhancing_keyboard_accessibility), above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using `tabindex` and a bit of JavaScript.
+Nous avons déjà mentionné l'accessibilité native et les problèmes causés par l'utilisation d'éléments détournés (pour les boutons, les liens ou les éléments de formulaires), voir [la section sur les contrôles de l'interface utilisateur de l'article sur l'accessibilité avec HTML](/fr/docs/Learn/Accessibility/HTML#contrôles_de_linterface_utilisateur) ou [la section plus haut sur l'amélioration de l'accessibilité au clavier](#améliorer_laccessibilité_au_clavier). Il est généralement possible de remettre l'accessibilité au clavier sans trop de problèmes à l'aide de `tabindex` et d'un peu de JavaScript.
 
-But what about screenreaders? They still won't see the elements as buttons. If we test our [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.
+Mais qu'en est-il des lecteurs d'écran ? Ils ne verront pas les éléments comme des boutons. Si vous testez l'exemple [`fake-div-buttons.html`](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) avec un lecteur d'écran, les faux boutons seront énoncés avec des phrases comme «&nbsp;Cliquez ici&nbsp;! groupe&nbsp;», ce qui prêtera assurément à confusion.
 
-We can fix this using a WAI-ARIA role. Make a local copy of [fake-div-buttons.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html), and add [`role="button"`](https://www.w3.org/TR/wai-aria-1.1/#button) to each button `<div>`, for example:
+Cela peut être corrigé à l'aide d'un rôle WAI-ARIA. Téléchargez un exemplaire local de [`fake-div-buttons.html`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html), puis ajoutez [`role="button"`](/fr/docs/Web/Accessibility/ARIA/Roles/button_role) à chaque bouton représenté par un élément `<div>`, par exemple&nbsp;:
 
 ```html
-<div data-message="This is from the first button" tabindex="0" role="button">
-  Click me!
+<div data-message="Cela vient du premier bouton" tabindex="0" role="button">
+  Cliquez ici !
 </div>
 ```
 
-Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.
+Maintenant, en utilisant un lecteur d'écran, les boutons seront indiqués par «&nbsp;Cliquez ici&nbsp;! bouton&nbsp;». Bien que ça soit déjà mieux, il faut encore ajouter les fonctionnalités natives auxquelles on s'attend quand on utilise un bouton comme la gestion de la touche <kbd>Entrée</kbd> et des évènements de clic, comme expliqué dans [la documentation du rôle `button`](/fr/docs/Web/Accessibility/ARIA/Roles/button_role).
 
-> **Note :** Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!
+> **Note :** N'oubliez pas qu'il vaut mieux utiliser l'élément sémantique correct lorsque c'est possible. Si vous souhaitez créer un bouton et que vous pouvez utiliser un élément [`<button>`](/fr/docs/Web/HTML/Element/button), faites-le&nbsp;!
 
-#### Guiding users through complex widgets
+#### Guider les utilisatrices et utilisateurs pour les contrôles complexes
 
-There are a whole host of other [roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example [`combobox`](https://www.w3.org/TR/wai-aria-1.1/#combobox), [`slider`](https://www.w3.org/TR/wai-aria-1.1/#slider), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel), [`tree`](https://www.w3.org/TR/wai-aria-1.1/#tree). You can see a number of userful examples in the [Deque university code library](https://dequeuniversity.com/library/), to give you an idea of how such controls can be made accessible.
+Il existe un ensemble de [rôles](/fr/docs/Web/Accessibility/ARIA/Roles) qui permettent d'identifier des structures d'éléments non-sémantiques comme des contrôles d'interface et qui vont au-delà de ce que permet le HTML. On a par exemple, [`combobox`](/fr/docs/Web/Accessibility/ARIA/Roles/combobox_role), [`slider`](/fr/docs/Web/Accessibility/ARIA/Roles/slider_role), [`tabpanel`](/fr/docs/Web/Accessibility/ARIA/Roles/tabpanel_role), [`tree`](/fr/docs/Web/Accessibility/ARIA/Roles/tree_role). Vous pouvez consulter plusieurs exemples dans [la bibliothèque d'exemples de Deque University](https://dequeuniversity.com/library/) pour voir comment de tels contrôles sont rendus accessibles.
 
-Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see [Hiding things](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things) in our CSS and JavaScript accessibility article), which you can find at [Tabbed info box example](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (see [source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)).
+Prenons un exemple ici. Reprenons l'interface avec des onglets positionnés de façon absolue (voir [Cacher des choses](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#cacher_des_choses) dans l'article sur l'accessibilité avec CSS et JavaScript). Vous pouvez observer cet exemple [sur cette page](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (et [consulter le code source correspondant](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)).
 
-This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.
+Tel quel, cet exemple fonctionne correctement pour l'accessibilité au clavier&nbsp;: on peut naviguer entre les différents onglets et choisir d'afficher leur contenu. On peut également faire défiler le contenu et utiliser les titres pour naviguer, même si on ne voit pas ce qu'il y a l'écran. Toutefois, il n'est pas évident de déterminer ce qu'est le contenu. Un lecteur d'écran indiquera une liste de liens avec du contenu et trois titres. Cela ne donne pas d'indication sur la relation entre les contenus. On pourra améliorer cet exemple en fournissant des indications sur la structure du contenu.
 
-To improve things, we've created a new version of the example called [aria-tabbed-info-box.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html) ([see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)). We've updated the structure of the tabbed interface like so:
+Pour voir l'amélioration, vous pouvez télécharger le fichier [`aria-tabbed-info-box.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-tabbed-info-box.html) ([voir le résultat sur une page](https://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)). Nous avons mis à jour la structure de l'interface à onglets&nbsp;:
 
 ```html
 <ul role="tablist">
@@ -394,39 +403,52 @@ To improve things, we've created a new version of the example called [aria-tabbe
   </li>
 </ul>
 <div class="panels">
-  <article class="active-panel" role="tabpanel" aria-hidden="false">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">...</article>
-  <article role="tabpanel" aria-hidden="true">...</article>
+  <article class="active-panel" role="tabpanel" aria-hidden="false">…</article>
+  <article role="tabpanel" aria-hidden="true">…</article>
+  <article role="tabpanel" aria-hidden="true">…</article>
 </div>
 ```
 
-> **Note :** The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.
+> **Note :** Le changement le plus important est le retrait des liens. Seuls les éléments de la liste sont utilisés comme onglets. En effet, les liens n'avaient pas vraiment de destination, ils ne faisaient que changer la vue. De plus, cela permet une meilleure utilisation des attributs `aria-setsize` et `aria-posinset`, au lien de toujours énoncer «&nbsp;1 sur 1&nbsp;», le lecteur d'écran pourra maintenant indiquer «&nbsp;1 sur 3&nbsp;», «&nbsp;2 sur 3&nbsp;», etc.
+
+Les fonctionnalités ARIA utilisées ici sont&nbsp;:
+
+- De nouveaux rôles
+  - : [`tablist`](/fr/docs/Web/Accessibility/ARIA/Roles/tablist_role), [`tab`](/fr/docs/Web/Accessibility/ARIA/Roles/tab_role), [`tabpanel`](/fr/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) qui identifient les zones importantes de l'interface avec les onglets&nbsp;: le conteneur des onglets, les onglets et les panneaux correspondants.
+- [`aria-selected`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+  - : Définit l'onglet actuellement sélectionné. Lorsque la personne passe d'un onglet à l'autre, la valeur de cet attribut est mise à jour grâce à JavaScript sur les différents onglets.
+- [`aria-hidden`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)
+  - : Empêche qu'un élément soit énoncé par le lecteur d'écran. Lorsque la personne passe d'un onglet à l'autre, la valeur de cet attribut est mise à jour grâce à JavaScript sur les différents onglets.
+- `tabindex="0"`
+  - : Comme les liens sont retirés, on fournit cet attribut aux éléments de la liste afin qu'ils puissent recevoir le focus au clavier.
+- [`aria-setsize`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-setsize)
+  - : Cette propriété permet d'indiquer aux lecteurs d'écran que l'élément courant fait partie d'un ensemble et d'indiquer la taille de cet ensemble.
+- [`aria-posinset`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-posinset)
+  - : Cette propriété permet d'indiquer la position de l'élément au sein de l'ensemble dans lequel il s'inscrit. Combiné avec `aria-setsize`, il fournit suffisamment d'informations au lecteur d'écran pour que ce dernier puisse énoncer qu'on se situe sur l'élément «&nbsp;1 sur 3&nbsp;» etc. Dans la plupart des cas, les navigateurs devraient pouvoir déduire cette information à partir de la hiérarchie des éléments, mais autant fournir des indications complémentaires.
+
+Cette nouvelle structure apporte plusieurs améliorations&nbsp;:
 
-The new features are as follows:
+- Les onglets sont désormais reconnus comme tels (le lecteur d'écran indique «&nbsp;onglet&nbsp;»).
+- L'onglet sélectionné est indiqué avec le mot-clé «&nbsp;sélectionné&nbsp;» avant le nom de l'onglet.
+- Le lecteur d'écran indique également le numéro de l'onglet sur lequel on se situe.
+- De plus, grâce à `aria-hidden` (seul l'onglet affiché a `aria-hidden="false"`), le contenu non-masqué est le seul vers lequel on peut naviguer, le contenu sélectionné est donc plus simple à trouver.
 
-- New roles — [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist), [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.
-- [`aria-selected`](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
-- [`aria-hidden`](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden) — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
-- `tabindex="0"` — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.
-- [`aria-setsize`](https://www.w3.org/TR/wai-aria-1.1/#aria-setsize) — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.
-- [`aria-posinset`](https://www.w3.org/TR/wai-aria-1.1/#aria-posinset) — This property allows you to specify what position in a series an element is in. Along with `aria-setsize`, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.
+> **Note :** Si vous souhaitez explicitement que quelque chose ne soit pas énoncé par un lecteur d'écran, il faudra appliquer l'attribut `aria-hidden="true"` à l'élément correspondant.
 
-In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the `aria-hidden` settings (only the non-hidden tab ever has `aria-hidden="false"` set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.
+## Évaluez vos compétences&nbsp;!
 
-> **Note :** If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"` attribute.
+Vous voici à la fin de cet article, mais aurez-vous retenu les informations essentielles&nbsp;? Vous pouvez vous évaluer pour vérifier que vous avez retenu les bonnes informations avant d'aller plus loin&nbsp;: [évaluez vos compétences&nbsp;: WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics/Test_your_skills:_WAI-ARIA).
 
-## Summary
+## Résumé
 
-This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.
+Nous n'avons pas abordé l'intégralité de WAI-ARIA dans cet article, mais vous devriez désormais comprendre comment l'utiliser et les situations courantes pour lesquelles cet outil est nécessaire.
 
 ## Voir aussi
 
-- [Definition of Roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) — ARIA roles reference.
-- [Definitions of States and Properties (all aria-\* attributes)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def) — properties and states reference.
-- [Deque university code library](https://dequeuniversity.com/library/) — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.
-- [WAI-ARIA Authoring Practices](http://w3c.github.io/aria-practices/) — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.
-- [ARIA in HTML](https://www.w3.org/TR/html-aria/) — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.
+- [Les états et propriétés ARIA](/fr/docs/Web/Accessibility/ARIA/Attributes)&nbsp;: tous les attributs `aria-*`
+- [Les rôles WAI-ARIA](/fr/docs/Web/Accessibility/ARIA/Roles)&nbsp;: les catégories de rôles ARIA et ceux documentés sur MDN
+- [ARIA et HTML](https://www.w3.org/TR/html-aria/)&nbsp;: une spécification du W3C qui définit la sémantique d'accessibilité (ARIA) associée à chaque fonctionnalité HTML par le navigateur, ainsi que les fonctionnalités WAI-ARIA qui peuvent être appliquées sur ces fonctionnalités HTML si une sémantique supplémentaire est nécessaire
+- [Bibliothèque d'exemples de Deque](https://dequeuniversity.com/library/)&nbsp;: un ensemble d'exemples utiles et concrets qui illustrent des contrôles d'interface complexes, rendus accessibles à l'aide des fonctionnalités WAI-ARIA
+- [Bonnes pratiques pour l'écriture de WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/)&nbsp;: un portail du W3C expliquant comment implémenter différents types de contrôles complexes tout en les rendant accessibles à l'aide des fonctionnalités WAI-ARIA
 
 {{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

From ac1b0dcdc9aa8b8310477bf007bef3d11ba5ae7a Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Tue, 19 Sep 2023 09:09:16 +0800
Subject: [PATCH 014/268] zh-CN: Translate/sync CSS scroll snap guide-like
 pages (#15921)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../zh-cn/glossary/scroll_container/index.md  |  16 +++
 .../css_scroll_snap/basic_concepts/index.md   |  86 ++++++++++++++
 files/zh-cn/web/css/css_scroll_snap/index.md  | 106 ++++++++++++------
 3 files changed, 171 insertions(+), 37 deletions(-)
 create mode 100644 files/zh-cn/glossary/scroll_container/index.md
 create mode 100644 files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md

diff --git a/files/zh-cn/glossary/scroll_container/index.md b/files/zh-cn/glossary/scroll_container/index.md
new file mode 100644
index 00000000000000..57c0da018bed0b
--- /dev/null
+++ b/files/zh-cn/glossary/scroll_container/index.md
@@ -0,0 +1,16 @@
+---
+title: 滚动容器
+slug: Glossary/Scroll_container
+---
+
+{{GlossarySidebar}}
+
+**滚动容器**为一种元素盒。无论滚动条是否存在，滚动容器中的内容均可滚动。当 CSS 属性 {{CSSXref("overflow")}} 设置为 `scroll`，或者 `overflow` 设置为 `auto` *且*内容溢出滚动容器时，用户代理将为元素盒添加滚动条，使其成为滚动容器。
+
+当元素盒的内容溢出其包围盒时，用户可使用滚动条滚动经过被裁减的内容，而这些内容本将在视野中被隐藏。
+
+滚动容器含有滚动口和滚动条。
+
+## 滚动口
+
+滚动口为滚动容器的可见部分，与滚动容器的内边距盒重合。滚动条用于将内容移入或移出滚动口，由此使内容可见。
diff --git a/files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md b/files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md
new file mode 100644
index 00000000000000..43d8577fc5904b
--- /dev/null
+++ b/files/zh-cn/web/css/css_scroll_snap/basic_concepts/index.md
@@ -0,0 +1,86 @@
+---
+title: 滚动吸附的基本概念
+slug: Web/CSS/CSS_scroll_snap/Basic_concepts
+---
+
+{{CSSRef}}
+
+[CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap)模块中的属性可以定义用户在滚动文档时滚动吸附到指定点的方式。
+
+滚动吸附特性可以定义吸附位置。[滚动容器](/zh-CN/docs/Glossary/Scroll_container)的滚动口在完成滚动操作后可能会停在或“吸附到”这些位置。
+
+## CSS 滚动吸附的关键属性
+
+在定义滚动吸附前，需要在滚动容器上启用滚动。通过确保滚动容器指定了尺寸且启用 {{CSSXref("overflow")}} 可启用滚动。
+
+然后可以在滚动容器上使用下列关键属性定义滚动吸附：
+
+- {{CSSXref("scroll-snap-type")}}——使用这个属性可定义滚动式视口是否可被吸附、必须还是可选吸附以及吸附应当出现在哪些轴上。
+- {{CSSXref("scroll-snap-align")}}——这个属性设置在滚动容器的每个子元素上，可用于定义每个子元素的吸附位置或没有吸附位置。
+- {{CSSXref("scroll-snap-stop")}}——这个属性确保在滚动中吸附到而不是越过某个子元素。
+- {{CSSXref("scroll-margin")}}——这个属性可以设置在在滚动中可以被吸附的子元素上，用于在指定盒子上创建吸附外边距。
+- {{CSSXref("scroll-padding")}}——这个属性可以设置在滚动容器上，用于创建吸附偏移。
+
+下列示例演示了由 `scroll-snap-type` 所定义的纵轴方向的滚动吸附。此外，`scroll-snap-align` 被应用于 `<section>` 元素的所有子元素，决定了每个子元素的滚动止点。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", "100%", 700)}}
+
+## 使用 scroll-snap-type
+
+{{CSSXref("scroll-snap-type")}} 属性需要知道在哪个方向上有滚动吸附。方向可以是 `x`、`y` 或者逻辑对应关系 `block`、`inline`。还可以用关键字 `both` 使两个轴都有滚动吸附。
+
+你还可以传入关键字 `mandatory` 或 `proximity`。关键字 `mandatory` 告诉浏览器无论滚动到哪个位置，内容都*必须*吸附到特定的点，而关键字 `proximity` 意味着内容可以吸附而不是必须吸附到点上。
+
+使用 `mandatory` 可以创造非常一致的滚动效果——你知道浏览器总会吸附到每个指定的点。这意味着有把握相信在滚动结束时，你希望出现在屏幕顶部的东西就会出现在那里。然而，如果内容比预想的大，那么会产生问题——用户可能会沮丧地发现他们永远无法滚动并查看内容中特定的某处。因此，使用 `mandatory` 应当仔细考虑，而且只用于你知道屏幕上或滚动式区域在任何时刻有多少内容的情形。
+
+> **备注：** 如果某个子元素的内容会溢出父容器，那么请务必不要使用 `mandatory`，这是因为用户会无法把溢出内容滚入视野。
+
+`proximity` 值只在子元素靠近某个位置时把它吸附到这个位置，具体的距离由浏览器决定。
+
+在下列示例中，可以在 `mandatory` 和 `proximity` 之间改变取值，看看对滚动产生的效果。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", "100%", 700)}}
+
+在上述示例中的滚动容器上同时设置了 {{CSSXref("height", "height: 300px;")}} 和 {{CSSXref("overflow-y", "overflow-y: scroll;")}}。
+
+如果内容没有溢出容器，那么没有用于滚动的内容。
+
+## 使用 scroll-snap-align
+
+{{CSSXref("scroll-snap-align")}} 属性的有效值包括 `start`、`end`、`center` 和 `none`。这些值用于标示内容应当吸附到滚动容器中的哪个点。在下列示例中，可以改变 `scroll-snap-align` 的值，看看滚动行为如何变化。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", "100%", 700)}}
+
+如果 `scroll-snap-type` 是 `mandatory` 而且某个子元素上的 `scroll-snap-align` 被设置为 `none` 或者未被设置（此时默认为 `none`），那么用户会无法把这个元素滚入视野。
+
+## 使用 scroll-padding
+
+如果你在使用 `start` 或 `end` 时不想将内容恰好吸附到滚动容器的边上，或者在使用 `center` 时想让吸附位置略微偏离中心，请使用 {{CSSXref("scroll-padding")}} 属性或者等价的全称属性添加一点内边距。
+
+在下列示例中，`scroll-padding` 被设置为 `40px`。当内容吸附到第二和第三节的开头时，滚动会停在离章节开头 40 像素远的位置。试试改变 `scroll-padding` 的值，看看距离如何变化。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", "100%", 700)}}
+
+如果有像导航栏这种可能遮盖滚动内容的[固定](/zh-CN/docs/Web/CSS/position#固定定位)元素，那么这个属性可以派上用场。使用 `scroll-padding` 可以为固定元素留出空间。例如在下列示例中，当内容在 `<h1>` 元素下方滚动时，`<h1>` 在屏幕上保持不动。如果没有内边距，那么在发生吸附时，标题会遮盖一些内容。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", "100%", 700)}}
+
+## 使用 scroll-margin
+
+在子元素上可以设置 {{CSSXref("scroll-margin")}} 属性或者全称滚动外边距值，用于定义指定盒子的外边距。这可以让不同的子元素有不同大小的空间，而且可以和父元素上的 `scroll-padding` 一起使用。在下列示例中尝试一下。
+
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", "100%", 700)}}
+
+## 使用 scroll-snap-stop
+
+使用 {{CSSXref("scroll-snap-stop")}} 属性可以指定滚动是否必须吸附到指定的吸附点。在上述示例中，这意味着滚动究竟是会停在每个章节的开头还是可以跳过章节。
+
+这个属性可以确保用户看见滚动区域的每个章节而不会不小心滚过章节。然而这个设置会阻止用户快速滚动到想要的内容，因而对用户体验产生负面影响。
+
+## 参见
+
+- [CSS 滚动吸附](/zh-CN/docs/Web/CSS/CSS_scroll_snap)模块
+- [用 CSS 滚动吸附明确控制滚动](https://web.dev/css-scroll-snap/)（载于 web.dev，2021 年）
+- [实用 CSS 滚动吸附](https://css-tricks.com/practical-css-scroll-snapping/)（载于 CSS-Tricks，2020 年）
+- [CSS 滚动吸附](https://12daysofweb.dev/2022/css-scroll-snap/)（载于 12 Days of Web，2019 年）
+- [滚动吸附示例](https://codepen.io/collection/KpqBGW)（载于 Codepen）
diff --git a/files/zh-cn/web/css/css_scroll_snap/index.md b/files/zh-cn/web/css/css_scroll_snap/index.md
index 0e6ce226e8a10c..634a5a980834e6 100644
--- a/files/zh-cn/web/css/css_scroll_snap/index.md
+++ b/files/zh-cn/web/css/css_scroll_snap/index.md
@@ -1,56 +1,88 @@
 ---
-title: CSS Scroll Snap
+title: CSS 滚动吸附
 slug: Web/CSS/CSS_scroll_snap
 ---
 
 {{CSSRef}}
 
-**CSS 滚动快照**是 CSS 的模块，它引入滚动捕捉位置，它强制滚动位置，即 {{Glossary("滚动容器")}}的 {{Glossary("滚动端口")}} 在滚动操作完成后可能结束的滚动位置。
+**CSS 滚动吸附**模块所提供的属性可通过定义吸附位置控制滑屏和滚动行为。当用户在{{Glossary("Scroll container", "滚动容器")}}中滚动溢出的内容时，内容可吸附至特定位置，由此提供分页和滚动定位效果。
 
-> **备注：** 此模块的早期版本称为滚动捕捉点，已被弃用。CSS 滚动快照是当前实现。
+此模块包含滚动容器的滚动内边距属性，用于调整滚入视野操作中分页的最佳可见区域。此模块还包含设置于滚动容器子元素的滚动外边距和滚动对齐方式属性，用于调整子元素在滚入视野时的可见区域，以及用于使滚动强制止于各子元素的属性。
+
+## 滚动吸附实践
+
+为在下方的框中查看滚动吸附，可在滚动式视口中上下左右地滚动经过含 45 个带编号盒子的网格。
+
+{{EmbedGHLiveSample("css-examples/modules/scroll_snap.html", "100%", 250)}}
+
+在有滚动吸附时，所滚动的带编号盒子中的一者将吸附至指定位置。初始的 CSS 代码使带编号盒子吸附至视口中心，可使用滑块改变块向和行向的吸附位置。
+
+使用吸附属性可允许或防止滚动越过某个元素（此示例中为带编号盒子）。可勾选“Prevent scrolling past boxes”使所有滚动操作被强制限于滚动至相邻盒子。
+
+为比较滚动吸附与普通滚动，可勾选“disable snapping”并再次尝试滚动。
+
+此示例的代码[见 GitHub 上的源码](https://github.com/mdn/css-examples/blob/main/modules/scroll_snap.html)。
 
 ## 参考
 
-### 容器上的 CSS 属性
-
-- {{cssxref("scroll-snap-type")}}
-- {{cssxref("scroll-snap-stop")}}
-- {{cssxref("scroll-padding")}}
-- {{cssxref("scroll-padding-top")}}
-- {{cssxref("scroll-padding-right")}}
-- {{cssxref("scroll-padding-bottom")}}
-- {{cssxref("scroll-padding-left")}}
-- {{cssxref("scroll-padding-inline")}}
-- {{cssxref("scroll-padding-inline-start")}}
-- {{cssxref("scroll-padding-inline-end")}}
-- {{cssxref("scroll-padding-block")}}
-- {{cssxref("scroll-padding-block-start")}}
-- {{cssxref("scroll-padding-block-end")}}
-
-### 子上的 CSS 属性
-
-- {{cssxref("scroll-snap-align")}}
-- {{cssxref("scroll-margin")}}
-- {{cssxref("scroll-margin-top")}}
-- {{cssxref("scroll-margin-right")}}
-- {{cssxref("scroll-margin-bottom")}}
-- {{cssxref("scroll-margin-left")}}
-- {{cssxref("scroll-margin-inline")}}
-- {{cssxref("scroll-margin-inline-start")}}
-- {{cssxref("scroll-margin-inline-end")}}
-- {{cssxref("scroll-margin-block")}}
-- {{cssxref("scroll-margin-block-start")}}
-- {{cssxref("scroll-margin-block-end")}}
+### 容器上的属性
+
+- {{CSSXref("scroll-snap-type")}}
+- {{CSSXref("scroll-padding")}}
+  - {{CSSXref("scroll-padding-top")}}
+  - {{CSSXref("scroll-padding-right")}}
+  - {{CSSXref("scroll-padding-bottom")}}
+  - {{CSSXref("scroll-padding-left")}}
+  - {{CSSXref("scroll-padding-inline")}}
+  - {{CSSXref("scroll-padding-inline-start")}}
+  - {{CSSXref("scroll-padding-inline-end")}}
+  - {{CSSXref("scroll-padding-block")}}
+  - {{CSSXref("scroll-padding-block-start")}}
+  - {{CSSXref("scroll-padding-block-end")}}
+
+### 子元素上的属性
+
+- {{CSSXref("scroll-snap-align")}}
+- {{CSSXref("scroll-margin")}}
+  - {{CSSXref("scroll-margin-top")}}
+  - {{CSSXref("scroll-margin-right")}}
+  - {{CSSXref("scroll-margin-bottom")}}
+  - {{CSSXref("scroll-margin-left")}}
+  - {{CSSXref("scroll-margin-inline")}}
+  - {{CSSXref("scroll-margin-inline-start")}}
+  - {{CSSXref("scroll-margin-inline-end")}}
+  - {{CSSXref("scroll-margin-block")}}
+  - {{CSSXref("scroll-margin-block-start")}}
+  - {{CSSXref("scroll-margin-block-end")}}
+- {{CSSXref("scroll-snap-stop")}}
 
 ## 指南
 
-- [CSS 滚动快照的基本概念](/zh-CN/docs/Web/CSS/CSS_scroll_snap/Basic_concepts)
-- [浏览器兼容性和滚动快照](/zh-CN/docs/Web/CSS/CSS_scroll_snap/compat)
+- [CSS 滚动吸附的基本概念](/zh-CN/docs/Web/CSS/CSS_scroll_snap/Basic_concepts)
+  - : CSS 滚动吸附特性的概览和示例。
+
+## 相关概念
+
+- {{CSSXref(":target")}} 伪类
+- CSS 属性 {{CSSXref("overflow")}}
+- Element {{DOMXref("Element.scroll", "scroll()")}} 方法
+- Element {{DOMXref("Element.scrollBy", "scrollBy()")}} 方法
+- Element {{DOMXref("Element.scrollIntoView", "scrollIntoView()")}} 方法
+- Element {{DOMXref("Element.scrollTo", "scrollTo()")}} 方法
+- Document {{DOMXref("Document.scroll_event", "scroll")}} 事件
+- ARIA 角色 [`scrollbar`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/scrollbar_role)
+- 术语{{Glossary("Scroll container", "滚动容器")}}
 
 ## 规范
 
 {{Specifications}}
 
-## 浏览器兼容性
+## 参见
 
-The individual property pages detail the browser compatibility situation for Scroll Snap. Note that at the present time Firefox still implements an old version of the specification. [Read the guide to browser compatibility](/zh-CN/docs/Web/CSS/CSS_scroll_snap/compat) for an overview of how to support both the old and new specification.
+- [CSS 溢出](/zh-CN/docs/Web/CSS/CSS_overflow)模块
+- [CSS 滚动条样式化](/zh-CN/docs/Web/CSS/CSS_scrollbars_styling)模块
+- [纯键盘滚动区域](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html)（载于 adrianroselli.com，2022 年）
+- [滚动吸附示例](https://codepen.io/collection/KpqBGW)（载于 Codepen，2022 年）
+- [用 CSS 滚动吸附明确控制滚动](https://web.dev/css-scroll-snap/)（载于 web.dev，2021 年）
+- [实用 CSS 滚动吸附](https://css-tricks.com/practical-css-scroll-snapping/)（载于 CSS-Tricks，2020 年）
+- [CSS 滚动吸附](https://12daysofweb.dev/2022/css-scroll-snap/)（载于 12 Days of Web，2019 年）

From 1427ecfacc38c2c1cfda8686591878b32814df6f Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Tue, 19 Sep 2023 09:24:43 +0800
Subject: [PATCH 015/268] [zh-cn]: update the translation of
 Number.MAX_SAFE_INTEGER (#15917)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../number/max_safe_integer/index.md          | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/max_safe_integer/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/max_safe_integer/index.md
index 31fdb607ede02c..74cebfde6a3119 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/max_safe_integer/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/max_safe_integer/index.md
@@ -7,21 +7,36 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
 
 **`Number.MAX_SAFE_INTEGER`** 静态数据属性表示在 JavaScript 中最大的安全整数（2<sup>53</sup> – 1）。
 
+对于更大的整数，请考虑使用 {{jsxref("BigInt")}}。
+
+{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}
+
+## 值
+
+`9007199254740991`（9,007,199,254,740,991，或者约 9 千万亿）。
+
 {{js_property_attributes(0, 0, 0)}}
 
 ## 描述
 
-`MAX_SAFE_INTEGER` 是一个值为 9007199254740991 的常量。因为 Javascript 的数字存储使用了 [IEEE 754](http://en.wikipedia.org/wiki/IEEE_floating_point) 中规定的[双精度浮点数](https://zh.wikipedia.org/zh-cn/%E9%9B%99%E7%B2%BE%E5%BA%A6%E6%B5%AE%E9%BB%9E%E6%95%B8)数据类型，而这一数据类型能够安全存储 `-(2^53 - 1)` 到 `2^53 - 1` 之间的数值（包含边界值）。
-
-这里安全存储的意思是指能够准确区分两个不相同的值，例如 `Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2` 将得到 true 的结果，而这在数学上是错误的，参考{{jsxref("Number.isSafeInteger()")}}获取更多信息。
+[双精度浮点格式](https://zh.wikipedia.org/wiki/雙精度浮點數)只有 52 位用于表示[尾数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_编码)，因此它只能安全地表示介于 -(2<sup>53</sup> – 1) 和 2<sup>53</sup> – 1 之间的整数。本文中，“安全”指的是能够精确表示整数并正确比较它们。例如，`Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2` 的结果将为真，这在数学上是不正确的。有关更多信息，请参阅 {{jsxref("Number.isSafeInteger()")}}。
 
-由于 `MAX_SAFE_INTEGER` 是 {{jsxref("Number")}} 的一个静态属性，所以你可以直接以 `Number.MAX_SAFE_INTEGER` 的形式使用这一属性，而无需作为数值属性来使用。
+由于 `MAX_SAFE_INTEGER` 是 {{jsxref("Number")}} 的静态属性，你应该始终将其使用为 `Number.MAX_SAFE_INTEGER`，而不是一个数字值的属性。
 
 ## 示例
 
+### MAX_SAFE_INTEGER 的返回值
+
 ```js
 Number.MAX_SAFE_INTEGER; // 9007199254740991
-Math.pow(2, 53) - 1; // 9007199254740991
+```
+
+### MAX_SAFE_INTEGER 和 EPSILON 之间的关系
+
+{{jsxref("Number.EPSILON")}} 是 2<sup>-52</sup>，而 `MAX_SAFE_INTEGER` 是 2<sup>53</sup> – 1，它们都源自尾数的宽度，即 53 位（最高位始终为 1）。将它们相乘会得到一个非常接近但不等于 2 的值。
+
+```js
+Number.MAX_SAFE_INTEGER * Number.EPSILON; // 1.9999999999999998
 ```
 
 ## 规范
@@ -32,7 +47,9 @@ Math.pow(2, 53) - 1; // 9007199254740991
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
+- [`core-js` 中 `Number.MAX_SAFE_INTEGER` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
 - {{jsxref("Number.MIN_SAFE_INTEGER")}}
 - {{jsxref("Number.isSafeInteger()")}}
+- {{jsxref("BigInt")}}

From ac7fb84a60d113ca8ba3075c644e543ee0b577c8 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Tue, 19 Sep 2023 09:26:25 +0800
Subject: [PATCH 016/268] [zh-cn]: update the translation of Number.EPSILON
 (#15905)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../global_objects/number/epsilon/index.md    | 71 +++++++++++++++----
 1 file changed, 58 insertions(+), 13 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md
index 8e9bdc66196b9b..e7ccfd0316b8fa 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/epsilon/index.md
@@ -5,35 +5,79 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
 
 {{JSRef}}
 
-**`Number.EPSILON`** 属性表示 1 与{{jsxref("Number")}}可表示的大于 1 的最小的浮点数之间的差值。
+**`Number.EPSILON`** 静态数据属性表示 1 与大于 1 的最小浮点数之间的差值。
 
-你不必创建一个 {{jsxref("Number")}} 对象来访问这个静态属性（直接使用 `Number.EPSILON`）。
+{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}
+
+## 值
+
+2<sup>-52</sup>，或大约 `2.2204460492503130808472633361816E-16`。
 
 {{js_property_attributes(0, 0, 0)}}
 
 ## 描述
 
-`EPSILON` 属性的值接近于 `2.2204460492503130808472633361816E-16`，或者 `2^-52`。
+`Number.EPSILON` 是数字中 1 和可表示的比 1 大的最小数字之间的差值，因为[双精度浮点格式](https://zh.wikipedia.org/wiki/雙精度浮點數)只有 52 位来表示[尾数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_编码)，并且最低位的有效值为 2<sup>-52</sup>。
+
+请注意，浮点数的绝对精度随着数字变大而降低，因为指数增长而尾数的精度保持不变。{{jsxref("Number.MIN_VALUE")}} 是可表示的最小正数，远小于 `Number.EPSILON`。
+
+由于 `EPSILON` 是 {{jsxref("Number")}} 的静态属性，因此你应该始终将其用作 `Number.EPSILON`，而不是作为数字值的属性。
 
 ## 示例
 
-### 测试是否相等
+### 相等测试
+
+任何占用位数有限的数字编码系统，无论你选择的是什么基数（例如十进制或二进制），都*必定*无法精确表示所有数字，因为你试图使用有限的内存来表示数轴上无限数量的点。例如，十进制系统无法准确表示 1/3，而二进制系统无法准确表示 `0.1`。因此，例如，`0.1 + 0.2` 并不完全等于 `0.3`：
 
 ```js
-x = 0.2;
-y = 0.3;
-z = 0.1;
-equal = Math.abs(x - y + z) < Number.EPSILON;
+console.log(0.1 + 0.2); // 0.30000000000000004
+console.log(0.1 + 0.2 === 0.3); // false
 ```
 
-## Polyfill
+因此，通常建议**不要使用 `===` 比较浮点数**。相反，我们可以认为两个数在彼此之间是*足够接近*的时候它们是相等的。如果算术运算的数量级在 `1` 附近，那么 `Number.EPSILON` 常数通常是一个合理的误差阈值，因为实质上，`EPSILON` 指定了数字“1”的精确度。
 
-```plain
-if (Number.EPSILON === undefined) {
-    Number.EPSILON = Math.pow(2, -52);
+```js
+function equal(x, y) {
+  return Math.abs(x - y) < Number.EPSILON;
 }
+
+const x = 0.2;
+const y = 0.3;
+const z = 0.1;
+console.log(equal(x + z, y)); // true
 ```
 
+然而，对于任何具有更大数量级的算术运算，`Number.EPSILON` 是不适用的。如果你的数据数量级在 10<sup>3</sup> 的范围，那么小数部分的精确度将远远小于`Number.EPSILON`：
+
+```js
+function equal(x, y) {
+  return Math.abs(x - y) < Number.EPSILON;
+}
+
+const x = 1000.1;
+const y = 1000.2;
+const z = 2000.3;
+console.log(x + y); // 2000.3000000000002；误差为 10^-13 而不是 10^-16
+console.log(equal(x + y, z)); // false
+```
+
+在这种情况下，需要更大的容差。由于进行比较的数字的数量级大约为 `2000`，使用类似于 `2000 * Number.EPSILON` 的乘积可以为此情况提供足够的容差。
+
+```js
+function equal(x, y, tolerance = Number.EPSILON) {
+  return Math.abs(x - y) < tolerance;
+}
+
+const x = 1000.1;
+const y = 1000.2;
+const z = 2000.3;
+console.log(equal(x + y, z, 2000 * Number.EPSILON)); // true
+```
+
+除了数量级之外，考虑输入的*精度*也非常重要。例如，如果数字是从表单输入收集的，并且输入值只能以 `0.1` 的步长调整（即 [`<input type="number" step="0.1">`](/zh-CN/docs/Web/HTML/Attributes/step)），通常可以允许更大的容差，例如 `0.01`，因为数据的精度只有 `0.1`。
+
+> **备注：** 重点是：不要简单地将 `Number.EPSILON` 作为相等性测试的阈值。使用适合要比较的数字的数量级和精度的阈值。
+
 ## 规范
 
 {{Specifications}}
@@ -42,6 +86,7 @@ if (Number.EPSILON === undefined) {
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
+- [`core-js` 中 `Number.EPSILON` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
 - {{jsxref("Number")}}

From 216834ac427a43ba8f33762a4f8003526ad8c43c Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 19 Sep 2023 14:18:54 +0900
Subject: [PATCH 017/268] [ko]: add index.md for `web/glossary/ecma` (#15930)

[add]: add index.md for web/glossary/ecma
---
 files/ko/glossary/ecma/index.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 files/ko/glossary/ecma/index.md

diff --git a/files/ko/glossary/ecma/index.md b/files/ko/glossary/ecma/index.md
new file mode 100644
index 00000000000000..524c81f7ad4c70
--- /dev/null
+++ b/files/ko/glossary/ecma/index.md
@@ -0,0 +1,17 @@
+---
+title: 유럽 컴퓨터 제조업 협회 (European Computer Manufacturers Association, ECMA)
+slug: Glossary/ECMA
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**유럽 컴퓨터 제조업 협회 (European Computer Manufacturers Association, ECMA)**는 컴퓨터 하드웨어, 통신 및 프로그래밍 언어의 표준을 개발하는 비영리 조직입니다.
+
+웹에서는 {{Glossary("JavaScript")}} 언어의 핵심 명세인 [ECMA-262 명세서](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) (aka. {{Glossary("ECMAScript")}})를 관리하는 기관으로 유명합니다.
+
+## 같이 보기
+
+- 위키백과의 [Ecma 인터내셔널](https://en.wikipedia.org/wiki/Ecma_International)
+- [Ecma 인터내셔널 웹사이트](https://www.ecma-international.org/)

From cb437f412611617df8e5d09dc1d26b28296e874a Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 19 Sep 2023 14:20:09 +0900
Subject: [PATCH 018/268] [ko]: add index.md for `web/glossary/dynamic_typing`
 (#15906)

[add]: add index.md for web/glossary/dynamic_typing
---
 files/ko/glossary/dynamic_typing/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/ko/glossary/dynamic_typing/index.md

diff --git a/files/ko/glossary/dynamic_typing/index.md b/files/ko/glossary/dynamic_typing/index.md
new file mode 100644
index 00000000000000..34d54137069e8b
--- /dev/null
+++ b/files/ko/glossary/dynamic_typing/index.md
@@ -0,0 +1,15 @@
+---
+title: 동적 타입 (Dynamic typing)
+slug: Glossary/Dynamic_typing
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**동적 타입 언어**는 마치 {{glossary("JavaScript")}}처럼, 인터프리터가 그 시점의 변수 {{glossary("value", "값")}}을 기반으로 런타임에 {{glossary("variable","변수")}}에 {{glossary("type", "타입")}}을 할당하는 것을 말합니다.
+
+## 같이 보기
+
+- [JavaScript 데이터 타입 및 자료구조](/ko/docs/Web/JavaScript/Data_structures)
+- 위키백과의 [타입 시스템](https://en.wikipedia.org/wiki/Type_system#DYNAMIC)

From 273985fb4aaca150ba5fa6621f9583a7d056bd2b Mon Sep 17 00:00:00 2001
From: puxiao <yangpuxiao@gmail.com>
Date: Tue, 19 Sep 2023 13:49:38 +0800
Subject: [PATCH 019/268] [zh-cn]: Update
 CanvasRenderingContext2D/createLinearGradient (#15944)

---
 .../api/canvasrenderingcontext2d/createlineargradient/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md
index 31e09a9c158607..5c2ef09aa93b66 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md
@@ -5,7 +5,7 @@ slug: Web/API/CanvasRenderingContext2D/createLinearGradient
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.createLinearGradient()`**方法创建一个沿参数坐标指定的直线的渐变。
+Canvas 2D API 的 **`CanvasRenderingContext2D.createLinearGradient()`** 方法会根据两个给定的坐标值所构成的线段创建一个线性渐变。
 
 ![](mdn-canvas-lineargradient.png)
 

From 3bd22c6a65f9a77e4cdd95ed4825330df9ddd710 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:05:04 +0800
Subject: [PATCH 020/268] chore(zh-cn): unify all usage of 'Objective' and
 'Prerequisites' (#15942)

---
 files/zh-cn/learn/accessibility/index.md                  | 2 +-
 files/zh-cn/learn/accessibility/multimedia/index.md       | 2 +-
 files/zh-cn/learn/accessibility/wai-aria_basics/index.md  | 2 +-
 .../learn/accessibility/what_is_accessibility/index.md    | 2 +-
 .../thinking_before_coding/index.md                       | 2 +-
 .../tools_and_setup/available_text_editors/index.md       | 2 +-
 .../index.md                                              | 2 +-
 .../tools_and_setup/how_much_does_it_cost/index.md        | 2 +-
 .../tools_and_setup/upload_files_to_a_web_server/index.md | 2 +-
 .../learn/css/building_blocks/a_cool_looking_box/index.md | 4 ++--
 .../css/building_blocks/advanced_styling_effects/index.md | 2 +-
 .../css/building_blocks/cascade_and_inheritance/index.md  | 2 +-
 .../creating_fancy_letterheaded_paper/index.md            | 4 ++--
 .../fundamental_css_comprehension/index.md                | 2 +-
 .../handling_different_text_directions/index.md           | 2 +-
 .../building_blocks/images_media_form_elements/index.md   | 2 +-
 files/zh-cn/learn/css/building_blocks/organizing/index.md | 2 +-
 .../css/building_blocks/sizing_items_in_css/index.md      | 2 +-
 .../learn/css/building_blocks/styling_tables/index.md     | 2 +-
 .../learn/css/building_blocks/the_box_model/index.md      | 4 ++--
 .../learn/css/building_blocks/values_and_units/index.md   | 2 +-
 files/zh-cn/learn/css/css_layout/grids/index.md           | 2 +-
 files/zh-cn/learn/css/css_layout/introduction/index.md    | 2 +-
 files/zh-cn/learn/css/css_layout/positioning/index.md     | 4 ++--
 .../css_layout/practical_positioning_examples/index.md    | 2 +-
 files/zh-cn/learn/css/first_steps/index.md                | 2 +-
 .../css/first_steps/styling_a_biography_page/index.md     | 4 ++--
 files/zh-cn/learn/css/first_steps/what_is_css/index.md    | 2 +-
 files/zh-cn/learn/css/styling_text/fundamentals/index.md  | 4 ++--
 files/zh-cn/learn/css/styling_text/styling_links/index.md | 4 ++--
 files/zh-cn/learn/css/styling_text/web_fonts/index.md     | 2 +-
 .../zh-cn/learn/forms/basic_native_form_controls/index.md | 2 +-
 files/zh-cn/learn/forms/form_validation/index.md          | 2 +-
 .../learn/forms/how_to_structure_a_web_form/index.md      | 2 +-
 files/zh-cn/learn/forms/html5_input_types/index.md        | 2 +-
 files/zh-cn/learn/forms/index.md                          | 2 +-
 files/zh-cn/learn/forms/other_form_controls/index.md      | 2 +-
 .../learn/forms/sending_and_retrieving_form_data/index.md | 2 +-
 files/zh-cn/learn/forms/your_first_form/index.md          | 2 +-
 .../advanced_text_formatting/index.md                     | 2 +-
 .../introduction_to_html/creating_hyperlinks/index.md     | 2 +-
 .../html/introduction_to_html/debugging_html/index.md     | 2 +-
 .../document_and_website_structure/index.md               | 2 +-
 .../html/introduction_to_html/getting_started/index.md    | 2 +-
 .../introduction_to_html/html_text_fundamentals/index.md  | 4 ++--
 .../introduction_to_html/marking_up_a_letter/index.md     | 2 +-
 .../structuring_a_page_of_content/index.md                | 2 +-
 .../the_head_metadata_in_html/index.md                    | 2 +-
 .../html/multimedia_and_embedding/images_in_html/index.md | 2 +-
 .../multimedia_and_embedding/mozilla_splash_page/index.md | 4 ++--
 .../other_embedding_technologies/index.md                 | 2 +-
 .../multimedia_and_embedding/responsive_images/index.md   | 2 +-
 .../video_and_audio_content/index.md                      | 2 +-
 files/zh-cn/learn/html/tables/advanced/index.md           | 2 +-
 .../learn/html/tables/structuring_planet_data/index.md    | 4 ++--
 .../learn/javascript/asynchronous/introducing/index.md    | 2 +-
 .../zh-cn/learn/javascript/asynchronous/promises/index.md | 2 +-
 .../javascript/building_blocks/conditionals/index.md      | 2 +-
 .../learn/javascript/building_blocks/functions/index.md   | 2 +-
 .../javascript/building_blocks/image_gallery/index.md     | 2 +-
 .../javascript/building_blocks/looping_code/index.md      | 2 +-
 .../client-side_web_apis/drawing_graphics/index.md        | 2 +-
 .../javascript/client-side_web_apis/introduction/index.md | 6 +++---
 .../client-side_web_apis/third_party_apis/index.md        | 4 ++--
 .../learn/javascript/first_steps/a_first_splash/index.md  | 2 +-
 files/zh-cn/learn/javascript/first_steps/arrays/index.md  | 2 +-
 .../javascript/first_steps/silly_story_generator/index.md | 2 +-
 files/zh-cn/learn/javascript/first_steps/strings/index.md | 2 +-
 .../javascript/first_steps/useful_string_methods/index.md | 2 +-
 .../learn/javascript/first_steps/what_went_wrong/index.md | 2 +-
 .../objects/adding_bouncing_balls_features/index.md       | 2 +-
 .../javascript/objects/classes_in_javascript/index.md     | 2 +-
 .../objects/object-oriented_programming/index.md          | 2 +-
 .../javascript/objects/object_building_practice/index.md  | 2 +-
 .../learn/javascript/objects/object_prototypes/index.md   | 2 +-
 .../learn/performance/perceived_performance/index.md      | 2 +-
 files/zh-cn/learn/server-side/django/admin_site/index.md  | 2 +-
 .../learn/server-side/django/authentication/index.md      | 4 ++--
 files/zh-cn/learn/server-side/django/deployment/index.md  | 8 ++++----
 .../server-side/django/development_environment/index.md   | 4 ++--
 .../server-side/django/django_assessment_blog/index.md    | 2 +-
 .../zh-cn/learn/server-side/django/generic_views/index.md | 2 +-
 files/zh-cn/learn/server-side/django/home_page/index.md   | 2 +-
 files/zh-cn/learn/server-side/django/index.md             | 2 +-
 .../zh-cn/learn/server-side/django/introduction/index.md  | 4 ++--
 files/zh-cn/learn/server-side/django/sessions/index.md    | 2 +-
 files/zh-cn/learn/server-side/django/testing/index.md     | 2 +-
 .../learn/server-side/express_nodejs/deployment/index.md  | 2 +-
 .../express_nodejs/development_environment/index.md       | 2 +-
 .../zh-cn/learn/server-side/express_nodejs/forms/index.md | 2 +-
 .../server-side/express_nodejs/introduction/index.md      | 2 +-
 .../learn/server-side/express_nodejs/mongoose/index.md    | 2 +-
 .../learn/server-side/express_nodejs/routes/index.md      | 2 +-
 .../server-side/express_nodejs/skeleton_website/index.md  | 2 +-
 .../tutorial_local_library_website/index.md               | 2 +-
 .../first_steps/client-server_overview/index.md           | 2 +-
 files/zh-cn/learn/server-side/first_steps/index.md        | 2 +-
 .../learn/server-side/first_steps/introduction/index.md   | 2 +-
 .../angular_getting_started/index.md                      | 2 +-
 .../introduction/index.md                                 | 2 +-
 .../react_components/index.md                             | 2 +-
 .../react_getting_started/index.md                        | 4 ++--
 .../vue_first_component/index.md                          | 2 +-
 .../vue_methods_events_models/index.md                    | 2 +-
 .../vue_styling/index.md                                  | 4 ++--
 .../cross_browser_testing/automated_testing/index.md      | 2 +-
 .../cross_browser_testing/feature_detection/index.md      | 2 +-
 .../cross_browser_testing/html_and_css/index.md           | 2 +-
 .../tools_and_testing/cross_browser_testing/index.md      | 2 +-
 .../cross_browser_testing/javascript/index.md             | 2 +-
 .../your_own_automation_environment/index.md              | 2 +-
 .../understanding_client-side_tools/index.md              | 2 +-
 112 files changed, 133 insertions(+), 133 deletions(-)

diff --git a/files/zh-cn/learn/accessibility/index.md b/files/zh-cn/learn/accessibility/index.md
index fdceb83d3f2571..5a7d8aa1da1d0f 100644
--- a/files/zh-cn/learn/accessibility/index.md
+++ b/files/zh-cn/learn/accessibility/index.md
@@ -29,7 +29,7 @@ Firefox 浏览器无障碍检查器是一个非常有用的工具，用于检查
 >
 > [**从这里开始**](/zh-CN/docs/Learn/Front-end_web_developer)
 
-## 预备知识
+## 前提
 
 为了充分理解这个模块，你至少需要读过 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 各个主题的前两个模块，或者有可能的话，在你学习相关联的技术话题时也把无障碍相关的内容学习了，这样会更好。
 
diff --git a/files/zh-cn/learn/accessibility/multimedia/index.md b/files/zh-cn/learn/accessibility/multimedia/index.md
index 8d2d5154198680..364c91d1069082 100644
--- a/files/zh-cn/learn/accessibility/multimedia/index.md
+++ b/files/zh-cn/learn/accessibility/multimedia/index.md
@@ -20,7 +20,7 @@ slug: Learn/Accessibility/Multimedia
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>了解多媒体背后的无障碍问题，以及如何克服这些问题。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
index 04d9304f5cc44f..1f8b98c456d2c1 100644
--- a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
+++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
@@ -19,7 +19,7 @@ slug: Learn/Accessibility/WAI-ARIA_basics
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>
         进一步了解
         WAI-ARIA，明白他如何提供有效的语义，以便接下来在有需要的时候提供无障碍优化。
diff --git a/files/zh-cn/learn/accessibility/what_is_accessibility/index.md b/files/zh-cn/learn/accessibility/what_is_accessibility/index.md
index aa5f15bccdb9f8..389e3b019beac8 100644
--- a/files/zh-cn/learn/accessibility/what_is_accessibility/index.md
+++ b/files/zh-cn/learn/accessibility/what_is_accessibility/index.md
@@ -10,7 +10,7 @@ slug: Learn/Accessibility/What_is_accessibility
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>基本的计算机知识，对 HTML 和 CSS 的基本理解。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
index d636656c7686bf..499edb577116f5 100644
--- a/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
+++ b/files/zh-cn/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
@@ -10,7 +10,7 @@ slug: Learn/Common_questions/Design_and_accessibility/Thinking_before_coding
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>无</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/available_text_editors/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/available_text_editors/index.md
index ee8815883a40fc..c0dfcad281e61f 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/available_text_editors/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/available_text_editors/index.md
@@ -10,7 +10,7 @@ slug: Learn/Common_questions/Tools_and_setup/Available_text_editors
 <table class="learn-box nostripe standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         你应该已经知晓了<a
           href="/zh-CN/docs/Learn/Common_questions/What_software_do_I_need">为了建立一个网站所需的各种软件</a
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md
index 629dc557109e08..ebd4c3d28165b2 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md
@@ -10,7 +10,7 @@ slug: Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_work
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         你需要知道怎么<a href="/zh-CN/docs/Learn/Upload_files_to_a_web_server"
           >上传文件到 web 服务器</a
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
index d1b1618b5457bb..9e548670e6a9e9 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
@@ -24,7 +24,7 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>评估创建一个网站的完整流程，计算每个步骤的花费。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
index 8eee3a39949674..dd1fd502465433 100644
--- a/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/zh-cn/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -10,7 +10,7 @@ slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         你必须知道<a
           href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server"
diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
index 4c5299be580b0c..628f4e06293f0a 100644
--- a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
+++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
@@ -10,11 +10,11 @@ slug: Learn/CSS/Building_blocks/A_cool_looking_box
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>测试对 CSS 盒模型和其他盒相关特性的掌握程度，比如背景和边框。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md
index ac47797a0bdb0a..26e6058768fab9 100644
--- a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md
+++ b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Building_blocks/Advanced_styling_effects
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         HTML 基础 (学习
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
index 9110215c78d26c..c2e87358475c69 100644
--- a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -12,7 +12,7 @@ slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机知识、<a
           href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
index 8a295e0da870b3..62dbf6f8c7af3e 100644
--- a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
+++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
@@ -10,11 +10,11 @@ slug: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>测试对 CSS 盒模型和其他盒相关特性的掌握程度，比如实现背景等。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
index 3aae5306fc667e..26c7e853007f40 100644
--- a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">学习本章的前提条件：</th>
+      <th scope="row">前提：</th>
       <td>在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md
index 9840ecabcd8da1..87ef485cd3fa9d 100644
--- a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md
+++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.md
@@ -12,7 +12,7 @@ slug: Learn/CSS/Building_blocks/Handling_different_text_directions
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         计算机基础知识，基本软件（参见<a
           href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md
index 9ec39c459cd8f9..e8e669a939f9ce 100644
--- a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Building_blocks/Images_media_form_elements
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         计算机基础知识、<a
           href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/css/building_blocks/organizing/index.md b/files/zh-cn/learn/css/building_blocks/organizing/index.md
index b5c31d80626782..0e4f5be004eb15 100644
--- a/files/zh-cn/learn/css/building_blocks/organizing/index.md
+++ b/files/zh-cn/learn/css/building_blocks/organizing/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Building_blocks/Organizing
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         电脑的基本操作，<a
           href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md
index afbb202e8d7218..ca67ad31aa7827 100644
--- a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md
+++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的电脑知识、<a
           href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.md b/files/zh-cn/learn/css/building_blocks/styling_tables/index.md
index 9628bd74e3ac96..bceee17731eba6 100644
--- a/files/zh-cn/learn/css/building_blocks/styling_tables/index.md
+++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Building_blocks/Styling_tables
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         HTML 基础 (学习
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
index 918fe75febb03e..fae3296fc23d76 100644
--- a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
+++ b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
@@ -12,7 +12,7 @@ slug: Learn/CSS/Building_blocks/The_box_model
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识（Prerequisites）:</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           基本的计算机知识，<a
@@ -30,7 +30,7 @@ slug: Learn/CSS/Building_blocks/The_box_model
       </td>
     </tr>
     <tr>
-      <th scope="row">学习目标（Objective）:</th>
+      <th scope="row">目标：</th>
       <td>
         学习盒模型的基本理论，了解盒装模型的工作原理，了解盒模型与替代模型的区别以及如何进行切换。
       </td>
diff --git a/files/zh-cn/learn/css/building_blocks/values_and_units/index.md b/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
index 844540d057a5a6..d714da1fda7c61 100644
--- a/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
+++ b/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
@@ -10,7 +10,7 @@ CSS 中使用的每个属性都允许拥有一个或一组值，查看 MDN 上
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机知识、<a
           href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/css/css_layout/grids/index.md b/files/zh-cn/learn/css/css_layout/grids/index.md
index 1c3c17dcae7e44..a0a8448b1ce36f 100644
--- a/files/zh-cn/learn/css/css_layout/grids/index.md
+++ b/files/zh-cn/learn/css/css_layout/grids/index.md
@@ -10,7 +10,7 @@ CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         HTML 基础 (学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">
           HTML 简介</a
diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.md b/files/zh-cn/learn/css/css_layout/introduction/index.md
index 95044d1d6b4661..0a9075d070474c 100644
--- a/files/zh-cn/learn/css/css_layout/introduction/index.md
+++ b/files/zh-cn/learn/css/css_layout/introduction/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/CSS_layout/Introduction
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>
         对 HTML 有一些基本的了解 (学习“<a
           href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.md b/files/zh-cn/learn/css/css_layout/positioning/index.md
index 434e87e7ab48db..8f55828165ac7a 100644
--- a/files/zh-cn/learn/css/css_layout/positioning/index.md
+++ b/files/zh-cn/learn/css/css_layout/positioning/index.md
@@ -12,7 +12,7 @@ slug: Learn/CSS/CSS_layout/Positioning
 <table>
   <tbody>
     <tr>
-      <th>预备知识：</th>
+      <th>前提：</th>
       <td>
         HTML 基础 (学习
         <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML">HTML 导学</a>) 和
@@ -22,7 +22,7 @@ slug: Learn/CSS/CSS_layout/Positioning
       </td>
     </tr>
     <tr>
-      <th>目的：</th>
+      <th>目标：</th>
       <td>了解 CSS 定位的工作原理</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md
index 3e73d5d0063b01..f5d1e2c3a9acbd 100644
--- a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row"><p>预备知识：</p></th>
+      <th scope="row"><p>前提：</p></th>
       <td>
         <p>
           HTML 基础 (学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/zh-cn/learn/css/first_steps/index.md b/files/zh-cn/learn/css/first_steps/index.md
index 266c0020882eac..f2d0f843c34148 100644
--- a/files/zh-cn/learn/css/first_steps/index.md
+++ b/files/zh-cn/learn/css/first_steps/index.md
@@ -7,7 +7,7 @@ slug: Learn/CSS/First_steps
 
 CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。这个模块为你掌握 CSS 的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为 HTML 添加样式。
 
-## 先决条件
+## 前提
 
 在开始本单元之前，你应该：
 
diff --git a/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md
index 8feead97717c48..405e50dd3a625f 100644
--- a/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/First_steps/Styling_a_biography_page
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           基本熟悉使用计算机，<a
@@ -33,7 +33,7 @@ slug: Learn/CSS/First_steps/Styling_a_biography_page
   </tbody>
 </table>
 
-## 先决条件
+## 前提
 
 你可以使用下面的实时编辑器，或者下载这个[download the starting point](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/)在自己的编辑器中进行编辑。这是一个独立的 HTML 文件，在 head 中包含了初始 CSS 样式。你可以将这些 CSS 样式从 HTML 文件中移出，保存为另一个独立文件。你可以选择 CodePen、jsFiddle 或 Glitch 中的任意一个完成这些工作。
 
diff --git a/files/zh-cn/learn/css/first_steps/what_is_css/index.md b/files/zh-cn/learn/css/first_steps/what_is_css/index.md
index 34da2541bd9359..e2db6a8c52eb1f 100644
--- a/files/zh-cn/learn/css/first_steps/what_is_css/index.md
+++ b/files/zh-cn/learn/css/first_steps/what_is_css/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/First_steps/What_is_CSS
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机知识，<a
           href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.md b/files/zh-cn/learn/css/styling_text/fundamentals/index.md
index f0b083e22e7e8f..aa57a65fd0bc35 100644
--- a/files/zh-cn/learn/css/styling_text/fundamentals/index.md
+++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Styling_text/Fundamentals
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的电脑操作，HTML 基础 (学习
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
@@ -22,7 +22,7 @@ slug: Learn/CSS/Styling_text/Fundamentals
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>了解在网页上设计文本所需的基本属性和技术。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/css/styling_text/styling_links/index.md b/files/zh-cn/learn/css/styling_text/styling_links/index.md
index 172de12b064403..c032d4b6f07932 100644
--- a/files/zh-cn/learn/css/styling_text/styling_links/index.md
+++ b/files/zh-cn/learn/css/styling_text/styling_links/index.md
@@ -12,7 +12,7 @@ slug: Learn/CSS/Styling_text/Styling_links
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">学习本章节的前提：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机使用能力，HTML 基础 (学习
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
@@ -27,7 +27,7 @@ slug: Learn/CSS/Styling_text/Styling_links
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>
         学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI
         功能，比如导航菜单。
diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.md b/files/zh-cn/learn/css/styling_text/web_fonts/index.md
index 105e6658ea76ee..6a22d11499c871 100644
--- a/files/zh-cn/learn/css/styling_text/web_fonts/index.md
+++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.md
@@ -10,7 +10,7 @@ slug: Learn/CSS/Styling_text/Web_fonts
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本计算机素养，HTML 基础 (学习
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
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 7eaf82522159dd..3401575e0919e3 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
@@ -10,7 +10,7 @@ slug: Learn/Forms/Basic_native_form_controls
 <table>
  <tbody>
   <tr>
-   <th scope="row">预备知识：</th>
+   <th scope="row">前提：</th>
    <td>计算机基础知识和对于 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 的基本理解</a>。</td>
   </tr>
   <tr>
diff --git a/files/zh-cn/learn/forms/form_validation/index.md b/files/zh-cn/learn/forms/form_validation/index.md
index 09310f4954b49a..31cb64daa1491f 100644
--- a/files/zh-cn/learn/forms/form_validation/index.md
+++ b/files/zh-cn/learn/forms/form_validation/index.md
@@ -10,7 +10,7 @@ slug: Learn/Forms/Form_validation
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         计算机基础能力，对 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a
           href="/zh-CN/docs/Learn/CSS"
diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
index f77bd3f05d7f9f..2be68524a968ca 100644
--- a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
@@ -10,7 +10,7 @@ slug: Learn/Forms/How_to_structure_a_web_form
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机能力，和基本的
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">对 HTML 的理解</a
diff --git a/files/zh-cn/learn/forms/html5_input_types/index.md b/files/zh-cn/learn/forms/html5_input_types/index.md
index 1c10718d0c4555..6eee95347c283e 100644
--- a/files/zh-cn/learn/forms/html5_input_types/index.md
+++ b/files/zh-cn/learn/forms/html5_input_types/index.md
@@ -10,7 +10,7 @@ slug: Learn/Forms/HTML5_input_types
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         计算机基础知识和对于
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/zh-cn/learn/forms/index.md b/files/zh-cn/learn/forms/index.md
index b18a21baf9d5c2..b91998d8bb0c8a 100644
--- a/files/zh-cn/learn/forms/index.md
+++ b/files/zh-cn/learn/forms/index.md
@@ -15,7 +15,7 @@ slug: Learn/Forms
 >
 > [**开始使用**](/zh-CN/docs/Learn/Front-end_web_developer)
 
-## 预备知识
+## 前提
 
 在开始这个模块之前，你至少应该熟悉[对 HTML 的介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)系列。此时此刻，你应该会发现[基本指南](#基本指南)很容易理解，并且能够使用我们的[原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls)指南。
 
diff --git a/files/zh-cn/learn/forms/other_form_controls/index.md b/files/zh-cn/learn/forms/other_form_controls/index.md
index 7225938ba36157..e838380f9598e6 100644
--- a/files/zh-cn/learn/forms/other_form_controls/index.md
+++ b/files/zh-cn/learn/forms/other_form_controls/index.md
@@ -10,7 +10,7 @@ slug: Learn/Forms/Other_form_controls
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         计算机基础知识和对于
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
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 9a488dff84e2d1..2e7543c604adcb 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
@@ -10,7 +10,7 @@ slug: Learn/Forms/Sending_and_retrieving_form_data
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           基本计算机素养，对<a
diff --git a/files/zh-cn/learn/forms/your_first_form/index.md b/files/zh-cn/learn/forms/your_first_form/index.md
index 98d8196132c3ee..e7a9f50f4d6809 100644
--- a/files/zh-cn/learn/forms/your_first_form/index.md
+++ b/files/zh-cn/learn/forms/your_first_form/index.md
@@ -10,7 +10,7 @@ slug: Learn/Forms/Your_first_form
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           基本计算机素养和<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 94ce860488f748..6b2391b88922b9 100644
--- a/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -10,7 +10,7 @@ HTML 中有许多其他元素可以用于格式化文本，我们没有在 [HTML
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         熟悉 HTML 基础（包含在
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
diff --git a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md
index a1ab2937f53273..4a4904f87ff28d 100644
--- a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
        <td>熟悉基本 HTML（包含在<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a>中），HTML 文本格式（包含在 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字处理基础</a>中）。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md
index 63e638cc8519a3..98fafb2bad07d4 100644
--- a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.md
@@ -10,7 +10,7 @@ HTML 优雅明了，但要是出了错，你会不会一头雾水呢，本节将
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         阅读并理解
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
diff --git a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md
index af014420def2d7..b8bd86fc546cec 100644
--- a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         阅读
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
diff --git a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
index 20f03eeafb5e7c..3214754a1bacc1 100644
--- a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Introduction_to_HTML/Getting_started
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         具备计算机基础知识，安装了<a
           href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md
index 7ae1d872a3c60e..4877ed6eda7a89 100644
--- a/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -10,7 +10,7 @@ HTML 的主要工作之一是赋予文本结构，使浏览器能够按照开发
 <table>
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         阅读
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
@@ -19,7 +19,7 @@ HTML 的主要工作之一是赋予文本结构，使浏览器能够按照开发
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>
         学习如何用标记（段落、标题、列表、强调、引用等）来建立页面的基本文本结构和文本内容。
       </td>
diff --git a/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md
index 7d808e4b1a4540..d7b85e8904a4e5 100644
--- a/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
 <table>
  <tbody>
   <tr>
-   <th scope="row">预备知识：</th>
+   <th scope="row">前提：</th>
    <td>阅读并掌握以下文章的内容：<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a>、<a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">“头”里有什么？HTML 元信息</a>、<a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字处理初步</a>、<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a>和<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高级文字格式</a>。</td>
   </tr>
   <tr>
diff --git a/files/zh-cn/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/zh-cn/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
index bf899b162b5417..08728840556587 100644
--- a/files/zh-cn/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         完成本章之前的全部课程，特别是
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/文件和网站结构"
diff --git a/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 88f53bb20b21e6..a484f3b72dd446 100644
--- a/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>初步了解 HTML（参见 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a>）。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md
index 8664c4dc8bef0e..98bfc0da4509f7 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         掌握基本的电脑知识，<a
           href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index 8c41e920fbf52f..00a6737ecde855 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">学习本章节的要求：</th>
+      <th scope="row">前提：</th>
       <td>
         在开始这个测验之前，你应该了解了
         <a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding"
@@ -20,7 +20,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>
         测试这些知识的掌握程度：在页面中嵌入图片和视频，框架，和 HTML
         响应式图片技术。
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index f67b7ae8dccdc7..59940245b20e4f 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -11,7 +11,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机知识、<a
           href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
index 83c5c7ccfa464c..55e20abdd90caf 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         你应该知道
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 基础</a>以及如何<a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">在网站上添加静态图片</a>。
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 29dd56e39a6b30..91fe2050eb8eec 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基础计算机能力，<a
           href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/html/tables/advanced/index.md b/files/zh-cn/learn/html/tables/advanced/index.md
index 5393627306ec1d..37c0af441cebec 100644
--- a/files/zh-cn/learn/html/tables/advanced/index.md
+++ b/files/zh-cn/learn/html/tables/advanced/index.md
@@ -10,7 +10,7 @@ slug: Learn/HTML/Tables/Advanced
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         HTML 的基础知识（参见
         <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
diff --git a/files/zh-cn/learn/html/tables/structuring_planet_data/index.md b/files/zh-cn/learn/html/tables/structuring_planet_data/index.md
index 81b6d1c5388e10..e1b54923d4579a 100644
--- a/files/zh-cn/learn/html/tables/structuring_planet_data/index.md
+++ b/files/zh-cn/learn/html/tables/structuring_planet_data/index.md
@@ -10,11 +10,11 @@ slug: Learn/HTML/Tables/Structuring_planet_data
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">学习本章的前提条件：</th>
+      <th scope="row">前提：</th>
       <td>在尝试这个评定之前，你应该已经把这个模块的所有文章都学习完成了。</td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>检测对 HTML 表格及相关功能的理解。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/javascript/asynchronous/introducing/index.md b/files/zh-cn/learn/javascript/asynchronous/introducing/index.md
index 254b074a246e61..810e67c9acb045 100644
--- a/files/zh-cn/learn/javascript/asynchronous/introducing/index.md
+++ b/files/zh-cn/learn/javascript/asynchronous/introducing/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Asynchronous/Introducing
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机素养，以及对 JavaScript 基础知识的一定了解，包括函数和事件处理程序。
       </td>
diff --git a/files/zh-cn/learn/javascript/asynchronous/promises/index.md b/files/zh-cn/learn/javascript/asynchronous/promises/index.md
index bdf022b11a28aa..92142b210ae5b2 100644
--- a/files/zh-cn/learn/javascript/asynchronous/promises/index.md
+++ b/files/zh-cn/learn/javascript/asynchronous/promises/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Asynchronous/Promises
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机素养，以及对 JavaScript 基础知识的一定了解，包括函数和事件处理程序。
       </td>
diff --git a/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md b/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
index 87ec8db05d283d..ed8db33c3e0e55 100644
--- a/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/conditionals/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Building_blocks/conditionals
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机知识，对 HTML 和 CSS 有基本的了解，已经阅读了 <a
           href="/zh-CN/docs/Learn/JavaScript/First_steps"
diff --git a/files/zh-cn/learn/javascript/building_blocks/functions/index.md b/files/zh-cn/learn/javascript/building_blocks/functions/index.md
index 565de4bd955964..da3385b86199a4 100644
--- a/files/zh-cn/learn/javascript/building_blocks/functions/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/functions/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Building_blocks/Functions
 <table>
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的电脑知识，对 HTML 与 CSS 有基本的了解，及已阅读：
         <a href="/zh-CN/docs/Learn/JavaScript/First_steps"
diff --git a/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md
index c1524c0315b085..26cedb5a05ebfc 100644
--- a/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Building_blocks/Image_gallery
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>请读完本章其他所有小节的内容后再开始这个测验。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
index 4c3009bc5d64f0..473dc52a32b3ec 100644
--- a/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/zh-cn/learn/javascript/building_blocks/looping_code/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Building_blocks/Looping_code
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的电脑知识，对 HTML 与 CSS 有基本的了解，及已阅读：
         <a href="/zh-CN/docs/Learn/JavaScript/First_steps"
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index a71bb88054601d..1566ae2356c99f 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         JavaScript 基础（见
         <a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript 第一步</a
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
index b194d5349b1beb..9265f477a9171a 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.md
@@ -7,10 +7,10 @@ slug: Learn/JavaScript/Client-side_web_APIs/Introduction
 
 首先，我们将从一个高层次看看 API - 它们是什么；他们如何工作；如何在代码中使用它们，以及它们是如何组织的。我们也将看看不同主要类别的 API 以及它们的用途。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
-      <th scope="row">预备知识</th>
+      <th scope="row">前提：</th>
       <td>
         基本计算机知识，对于 HTML 和 CSS 的基本理解（见<a
           href="/zh-CN/docs/Learn/JavaScript/First_steps"
@@ -22,7 +22,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Introduction
       </td>
     </tr>
     <tr>
-      <th scope="row">目标</th>
+      <th scope="row">目标：</th>
       <td>熟悉 API，他们可以做什么，以及如何在代码中使用它们。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 0f36c019caeccc..bb43dbbc7d5597 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         JavaScript 基础知识 (see
         <a href="/zh-CN/docs/Learn/JavaScript/First_steps">first steps</a>,
@@ -25,7 +25,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>学习了解第三方 API 的运作方式，以及如何运用它们来提高你的网站性能</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
index 7bca29d125fd01..74100bc6f19ded 100644
--- a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/First_steps/A_first_splash
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>计算机基础知识，初步理解 HTML 和 CSS，了解 JavaScript。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/javascript/first_steps/arrays/index.md b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
index 8c845e4e2e37af..d8bdbe1f38888b 100644
--- a/files/zh-cn/learn/javascript/first_steps/arrays/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/arrays/index.md
@@ -16,7 +16,7 @@ slug: Learn/JavaScript/First_steps/Arrays
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>理解什么是数组，和如何在 JavaScript 中操作数组。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
index 43a7d3d78fbf03..b686b5aceef1b3 100644
--- a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>请读完本章所有小节的内容后再开始这个测验。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/javascript/first_steps/strings/index.md b/files/zh-cn/learn/javascript/first_steps/strings/index.md
index bd253c36f9d347..f2839794868bfc 100644
--- a/files/zh-cn/learn/javascript/first_steps/strings/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/strings/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/First_steps/Strings
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机读写能力，对 HTML 和 CSS 的基本理解，对 JavaScript 的理解。
       </td>
diff --git a/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md
index f79eb659bb30d9..d3a430886bb7e6 100644
--- a/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md
@@ -17,7 +17,7 @@ slug: Learn/JavaScript/First_steps/Useful_string_methods
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>明白字符串这个对象，学会使用字符串的基本方法去处理字符串</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
index 0797e24fb961b0..5e73a15c53036c 100644
--- a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>计算机基础知识，初步理解 HTML 和 CSS，了解 JavaScript。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md
index 704f9749dd3690..9ace4388ae11d6 100644
--- a/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>请确保完整学习本章所有内容后再开始测验。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md b/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md
index 366849d9b05da1..3b863a1c58f415 100644
--- a/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/zh-cn/learn/javascript/objects/classes_in_javascript/index.md
@@ -14,7 +14,7 @@ slug: Learn/JavaScript/Objects/Classes_in_JavaScript
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机素养，对 HTML 和 CSS 有基本的理解，熟悉 JavaScript
         基础（参见<a
diff --git a/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md b/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
index d10d564d8ea1a6..4dec6b681011f6 100644
--- a/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
+++ b/files/zh-cn/learn/javascript/objects/object-oriented_programming/index.md
@@ -14,7 +14,7 @@ slug: Learn/JavaScript/Objects/Object-oriented_programming
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         理解 JavaScript 函数，熟悉 JavaScript 基础
         （参见
diff --git a/files/zh-cn/learn/javascript/objects/object_building_practice/index.md b/files/zh-cn/learn/javascript/objects/object_building_practice/index.md
index 5526e273275b6e..f3db85cc35f1d5 100644
--- a/files/zh-cn/learn/javascript/objects/object_building_practice/index.md
+++ b/files/zh-cn/learn/javascript/objects/object_building_practice/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Objects/Object_building_practice
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机知识，了解 HTML 与 CSS 的基本概念，熟悉 JavaScript
         基本知识（请参阅
diff --git a/files/zh-cn/learn/javascript/objects/object_prototypes/index.md b/files/zh-cn/learn/javascript/objects/object_prototypes/index.md
index 05ad7d40d0f07a..5c3df819f43639 100644
--- a/files/zh-cn/learn/javascript/objects/object_prototypes/index.md
+++ b/files/zh-cn/learn/javascript/objects/object_prototypes/index.md
@@ -10,7 +10,7 @@ slug: Learn/JavaScript/Objects/Object_prototypes
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的计算机素养，对 HTML 和 CSS 有基本的理解，熟悉 JavaScript 基础（参见
         <a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript 第一步</a>和<a href="/zh-CN/docs/Learn/JavaScript/Building_blocks"
diff --git a/files/zh-cn/learn/performance/perceived_performance/index.md b/files/zh-cn/learn/performance/perceived_performance/index.md
index 0aa7dedc7147d0..fcf524af62133b 100644
--- a/files/zh-cn/learn/performance/perceived_performance/index.md
+++ b/files/zh-cn/learn/performance/perceived_performance/index.md
@@ -12,7 +12,7 @@ slug: Learn/Performance/Perceived_performance
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         基础计算机知识，<a
           href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software"
diff --git a/files/zh-cn/learn/server-side/django/admin_site/index.md b/files/zh-cn/learn/server-side/django/admin_site/index.md
index 088fa3749c6b1f..52d856472b9c1a 100644
--- a/files/zh-cn/learn/server-side/django/admin_site/index.md
+++ b/files/zh-cn/learn/server-side/django/admin_site/index.md
@@ -19,7 +19,7 @@ slug: Learn/Server-side/Django/Admin_site
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>
         <p>
           了解关于管理站点的优点与缺点，并且可以使用它为我们模型创建一些记录。
diff --git a/files/zh-cn/learn/server-side/django/authentication/index.md b/files/zh-cn/learn/server-side/django/authentication/index.md
index e4aad4ff2a8d52..48c1938b64f274 100644
--- a/files/zh-cn/learn/server-side/django/authentication/index.md
+++ b/files/zh-cn/learn/server-side/django/authentication/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Django/Authentication
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         完成之前的所有教程主题，包括<a
           href="/zh-CN/docs/Learn/Server-side/Django/Sessions"
@@ -19,7 +19,7 @@ slug: Learn/Server-side/Django/Authentication
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>了解如何设置和使用用户身份验证和权限。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/server-side/django/deployment/index.md b/files/zh-cn/learn/server-side/django/deployment/index.md
index c229017924420b..72b23287cbdf14 100644
--- a/files/zh-cn/learn/server-side/django/deployment/index.md
+++ b/files/zh-cn/learn/server-side/django/deployment/index.md
@@ -1,5 +1,5 @@
 ---
-title: "Django 教程 11: 部署 Django 到生产环境"
+title: Django 教程 11：部署 Django 到生产环境
 slug: Learn/Server-side/Django/Deployment
 ---
 
@@ -7,10 +7,10 @@ slug: Learn/Server-side/Django/Deployment
 
 现在，你已经创建（并测试）了一个令人敬畏的[LocalLibrary](/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website)网站，如果你希望将其安装在公共 Web 服务器上，以便图书馆工作人员和成员可以通过 Internet 访问它。本文概述了如何找到主机来部署你的网站，以及你需要做什么才能让你的网站准备好生产。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
-      <th scope="row"><strong>先决条件</strong>：</th>
+      <th scope="row">前提：</th>
       <td>
         完成所有先前的教程，包括：
         <p>
@@ -21,7 +21,7 @@ slug: Learn/Server-side/Django/Deployment
       </td>
     </tr>
     <tr>
-      <th scope="row"><strong>目的</strong>：</th>
+      <th scope="row">目标：</th>
       <td>了解你可以在何处以及如何将 Django 应用程序部署到生产环境。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/server-side/django/development_environment/index.md b/files/zh-cn/learn/server-side/django/development_environment/index.md
index 60df8339227aa6..1b9f5ce457adb6 100644
--- a/files/zh-cn/learn/server-side/django/development_environment/index.md
+++ b/files/zh-cn/learn/server-side/django/development_environment/index.md
@@ -11,13 +11,13 @@ slug: Learn/Server-side/Django/development_environment
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         知道如何在你开发所用的计算机操作系统中，打开终端/命令行和安装软件包。
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>在你的计算机中运行 Django（1.10）开发环境。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md b/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md
index 568e92208222ae..838d05895e57bf 100644
--- a/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md
+++ b/files/zh-cn/learn/server-side/django/django_assessment_blog/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Django/django_assessment_blog
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>在尝试此评估之前，你应该已经完成了本模块中的所有文章。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/server-side/django/generic_views/index.md b/files/zh-cn/learn/server-side/django/generic_views/index.md
index 76f209a548bc81..1d1ad8160a028f 100644
--- a/files/zh-cn/learn/server-side/django/generic_views/index.md
+++ b/files/zh-cn/learn/server-side/django/generic_views/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Django/Generic_views
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         完成所有先前的教程主题，包含<a
           href="/zh-CN/docs/Learn/Server-side/Django/Home_page"
diff --git a/files/zh-cn/learn/server-side/django/home_page/index.md b/files/zh-cn/learn/server-side/django/home_page/index.md
index 34299f55f7c120..dfbb6697ac44da 100644
--- a/files/zh-cn/learn/server-side/django/home_page/index.md
+++ b/files/zh-cn/learn/server-side/django/home_page/index.md
@@ -22,7 +22,7 @@ slug: Learn/Server-side/Django/Home_page
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>
         了解如何创建简单的 URL 映射和视图（没有数据编码在 URL
         中）以及如何从模型中获取数据并创建模版。
diff --git a/files/zh-cn/learn/server-side/django/index.md b/files/zh-cn/learn/server-side/django/index.md
index b3b4d3578f7681..38ff8990cfc726 100644
--- a/files/zh-cn/learn/server-side/django/index.md
+++ b/files/zh-cn/learn/server-side/django/index.md
@@ -7,7 +7,7 @@ slug: Learn/Server-side/Django
 
 Django 是使用 Python 语言编写的一个广受欢迎且功能完整的服务器端网站框架。本模块将为你展示为什么 Django 能够成为一个广受欢迎的服务器端框架，如何设置开发环境，以及如何开始创建你自己的网络应用。
 
-## 先决条件
+## 前提
 
 开始学习本模块并不需要任何 Django 知识。但你要理解什么是服务器端网络编程、什么是网络框架，最好能够阅读我们的[服务端网站编程的第一步](/zh-CN/docs/Learn/Server-side/First_steps)模块。
 
diff --git a/files/zh-cn/learn/server-side/django/introduction/index.md b/files/zh-cn/learn/server-side/django/introduction/index.md
index cf2a855ab788c7..caf02378d7592d 100644
--- a/files/zh-cn/learn/server-side/django/introduction/index.md
+++ b/files/zh-cn/learn/server-side/django/introduction/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Django/Introduction
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         基本的电脑知识。对
         <a href="/zh-CN/docs/Learn/Server-side/First_steps"
@@ -23,7 +23,7 @@ slug: Learn/Server-side/Django/Introduction
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>
         了解 Django 是什么，它提供了哪些功能，以及 Django 应用程序的主要构建块。
       </td>
diff --git a/files/zh-cn/learn/server-side/django/sessions/index.md b/files/zh-cn/learn/server-side/django/sessions/index.md
index c1d2ef8d9364ab..1e642eafaa4812 100644
--- a/files/zh-cn/learn/server-side/django/sessions/index.md
+++ b/files/zh-cn/learn/server-side/django/sessions/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Django/Sessions
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         完成之前的所有教程主题，包括<a
           href="/zh-CN/docs/Learn/Server-side/Django/Generic_views"
diff --git a/files/zh-cn/learn/server-side/django/testing/index.md b/files/zh-cn/learn/server-side/django/testing/index.md
index 6014923a563cf8..a8fe88dfdf8886 100644
--- a/files/zh-cn/learn/server-side/django/testing/index.md
+++ b/files/zh-cn/learn/server-side/django/testing/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Django/Testing
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>完成之前的所有教程主题，包括 Django 教程 9：使用表单。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
index 3d25e2a9b52d36..4c392210e3a033 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/deployment/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Express_Nodejs/deployment
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         完成前面所有的指南主题，包括
         <a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms"
diff --git a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
index 47636c2de1a9bb..25fb1edaa32a61 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/development_environment/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Express_Nodejs/development_environment
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>会打开终端 / 命令行。会为开发用操作系统安装软件包。</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
index f37e0f7f7babca..be9fb0d84e8862 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/forms/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Express_Nodejs/forms
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           完成前面所有的教程，包括
diff --git a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
index 05e8ee0ea99dc6..866ad7d9f98be9 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/introduction/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Express_Nodejs/Introduction
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         掌握计算机基础知识。了解
         <a href="/zh-CN/docs/Learn/Server-side">服务器端编程</a>，特别是
diff --git a/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md b/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md
index 1248a2b4f6adb5..7aec4c12465c1a 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/mongoose/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Express_Nodejs/mongoose
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         <a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website"
           >Express 教程 2: 创建站点骨架</a
diff --git a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
index ff58efd3d99937..e1f6f30af28938 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/routes/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Express_Nodejs/routes
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         回顾
         <a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction"
diff --git a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
index fa02a32fcb29a2..b58be3d0cd143e 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -12,7 +12,7 @@ slug: Learn/Server-side/Express_Nodejs/skeleton_website
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         <a
           href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment"
diff --git a/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
index e50772651ccc77..81ff58cccb2644 100644
--- a/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/zh-cn/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         阅读
         <a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction"
diff --git a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
index 5d0259119c4bdf..d00f05a81fa546 100644
--- a/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/client-server_overview/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/First_steps/Client-Server_overview
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>基本电脑素养、对于什么是网络服务器的基本了解</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/server-side/first_steps/index.md b/files/zh-cn/learn/server-side/first_steps/index.md
index 327577a51c5842..389dce088beaee 100644
--- a/files/zh-cn/learn/server-side/first_steps/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/index.md
@@ -5,7 +5,7 @@ slug: Learn/Server-side/First_steps
 
 {{LearnSidebar}}在我们的服务端编程板块中，我们回答了服务端编程的一系列基础问题—“它是什么？”，“它和客户端编程的区别是什么？”，还有“为什么它是有价值的？”。然后我们提供了对几个最受欢迎的服务端 Web 框架的概览，同时还有对如何选择最适合的框架来创建你第一个网站的指导。最后我们提供了一篇从高层次介绍 Web 服务器安全的文章。
 
-## 先决条件
+## 前提
 
 在开始这个模块之前，你不必知道任何关于服务端网站编程的知识，或者任何一种其他编程经验。
 
diff --git a/files/zh-cn/learn/server-side/first_steps/introduction/index.md b/files/zh-cn/learn/server-side/first_steps/introduction/index.md
index 2e40c722782101..fb94d9e6ed1d7d 100644
--- a/files/zh-cn/learn/server-side/first_steps/introduction/index.md
+++ b/files/zh-cn/learn/server-side/first_steps/introduction/index.md
@@ -10,7 +10,7 @@ slug: Learn/Server-side/First_steps/Introduction
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>基础电脑知识、对“Web 服务器是什么”的基本理解</td>
     </tr>
     <tr>
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
index 61eeb13f390173..b5e50e79442f24 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         熟悉核心的 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言，以及<a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">终端命令行</a>的知识。
       </td>
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
index f18db301e845fc..ca9a0e58abf232 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">先决条件：</th>
+   <th scope="row">前提：</th>
    <td>熟悉 <a href="/zh-CN/docs/Learn/HTML">HTML</a>, <a href="/zh-CN/docs/Learn/CSS">CSS</a>, 以及 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言的核心。</td>
   </tr>
   <tr>
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
index 52864a927ae383..ec2f0218ee1d66 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           熟悉核心 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a>
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index 1ec9474cda81bf..5e6e9520ec02ca 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_st
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           熟悉核心 <a href="/zh-CN/docs/Learn/HTML">HTML</a>，<a
@@ -31,7 +31,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_st
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>要设置本地 React 开发环境，创建一个启动应用程序，并了解其工作原理</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
index d8061162aeff2e..a9b017c6c53b05 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
@@ -12,7 +12,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_compon
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">前提条件：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           熟悉<a href="/zh-CN/docs/learn/HTML">HTML</a>、<a
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
index 55da5240cb192c..f99d69f1931134 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_even
 <table>
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           熟悉核心 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
index 6cd1e492f729e3..b97b8ee95d95db 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling
 <table>
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           熟悉核心 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a
@@ -30,7 +30,7 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling
       </td>
     </tr>
     <tr>
-      <th scope="row">目的：</th>
+      <th scope="row">目标：</th>
       <td>了解有关设置 Vue 组件样式的信息。</td>
     </tr>
   </tbody>
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
index 4f32732fcbddd4..9f9a3631187cfa 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         熟悉核心的 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言，以及对<a
           href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
index 8b15eb65c4fd2f..ac0fd560eefddb 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         熟悉核心的 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a
           href="/zh-CN/docs/Learn/CSS"
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index 542adea9a0b7e4..ce8f05e246e5bc 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -12,7 +12,7 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
 <table class="learn-box standard-table">
   <tbody>
     <tr>
-      <th scope="row">先决条件：</th>
+      <th scope="row">前提：</th>
       <td>
         <p>
           熟悉核心的 <a href="/zh-CN/docs/Learn/HTML">HTML</a>，<a
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.md
index f0a7354394ad0c..f108333901c491 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.md
@@ -15,7 +15,7 @@ slug: Learn/Tools_and_testing/Cross_browser_testing
 >
 > [**开始使用**](/zh-CN/docs/Learn/Front-end_web_developer)
 
-## 先决条件
+## 前提
 
 在你尝试使用这里详细介绍的工具时，你需要已经学习核心 [HTML](/zh-CN/docs/Learn/HTML)、[CSS](/zh-CN/docs/Learn/CSS) 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 语言。
 
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index 382d8c3fca3131..cac59be39a739b 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -11,7 +11,7 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         熟练使用 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言，了解<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"
           >跨浏览器测试的核心概念</a
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
index 1d02b312615406..624ab58ae599ce 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
@@ -10,7 +10,7 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm
 <table>
   <tbody>
     <tr>
-      <th scope="row">预备知识：</th>
+      <th scope="row">前提：</th>
       <td>
         熟悉 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言的核心知识，对<a
           href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.md b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.md
index 9bb9ef2d1d050f..3327f664b88f2f 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.md
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.md
@@ -9,7 +9,7 @@ slug: Learn/Tools_and_testing/Understanding_client-side_tools
 
 **[现在就从我们的“客户端工具概览”开始吧](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)**
 
-## 先决条件
+## 前提
 
 在尝试使用这里列举的工具之前，你应该先好好学习一下 [HTML](/zh-CN/docs/Learn/HTML), [CSS](/zh-CN/docs/Learn/CSS), 和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 的核心基础知识。
 

From 4f2faa22a9e76a3d86fd9c182756596a053b16f9 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Tue, 19 Sep 2023 14:25:59 +0800
Subject: [PATCH 021/268] [zh-cn]: update the translation of
 Number.MIN_SAFE_INTEGER (#15941)

---
 .../number/min_safe_integer/index.md          | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/min_safe_integer/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/min_safe_integer/index.md
index f38cc46cad164f..6578462b01f9b6 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/min_safe_integer/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/min_safe_integer/index.md
@@ -5,21 +5,31 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
 
 {{JSRef}}
 
-**`Number.MIN_SAFE_INTEGER`** 代表在 JavaScript 中最小的安全的 integer 型数字 (`-(2^53 - 1)`)。
+**`Number.MIN_SAFE_INTEGER`** 静态数据属性代表在 JavaScript 中最小的安全整数（-2<sup>53</sup> – 1）。
+
+要表示比这小的整数，请考虑使用 {{jsxref("BigInt")}}。
+
+{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}
+
+## 值
+
+`-9007199254740991`（-9,007,199,254,740,991，或大约 -9 千万亿）。
 
 {{js_property_attributes(0, 0, 0)}}
 
 ## 描述
 
-`MIN_SAFE_INTEGER` 的值是`-9007199254740991`. 形成这个数字的原因是 JavaScript 在 [IEEE 754](http://en.wikipedia.org/wiki/IEEE_floating_point)中使用[double-precision floating-point format numbers](http://en.wikipedia.org/wiki/Double_precision_floating-point_format) 作为规定。在这个规定中能安全的表示数字的范围在`-(2^53 - 1)` 到 `2^53 - 1`之间。
+[双精度浮点格式](https://zh.wikipedia.org/wiki/雙精度浮點數)只有 52 位用于表示[尾数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_编码)，因此它只能安全地表示介于 -(2<sup>53</sup> – 1) 和 2<sup>53</sup> – 1 之间的整数。本文中，“安全”指的是能够精确表示整数并正确比较它们。例如，`Number.MIN_SAFE_INTEGER - 1 === Number.MIN_SAFE_INTEGER - 2` 的结果将为真，这在数学上是不正确的。有关更多信息，请参阅 {{jsxref("Number.isSafeInteger()")}}。
 
-`由于 MIN_SAFE_INTEGER` 是 {{jsxref("Number")}} 的一个静态属性，你可以直接使用`Number.MIN_SAFE_INTEGER`, 而不是自己去创建一个 {{jsxref("Number")}} 的属性。
+由于 `MIN_SAFE_INTEGER` 是 {{jsxref("Number")}} 的静态属性，你应该始终将其使用为 `Number.MIN_SAFE_INTEGER`，而不是一个数字值的属性。
 
 ## 示例
 
+### 使用 MIN_SAFE_INTEGER
+
 ```js
 Number.MIN_SAFE_INTEGER; // -9007199254740991
--(Math.pow(2, 53) - 1); // -9007199254740991
+-(2 ** 53 - 1); // -9007199254740991
 ```
 
 ## 规范
@@ -30,7 +40,9 @@ Number.MIN_SAFE_INTEGER; // -9007199254740991
 
 {{Compat}}
 
-## 参阅
+## 参见
 
+- [`core-js` 中 `Number.MIN_SAFE_INTEGER` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
 - {{jsxref("Number.MAX_SAFE_INTEGER")}}
 - {{jsxref("Number.isSafeInteger()")}}
+- {{jsxref("BigInt")}}

From d5df18417aee4db99e6c36cf14a68a6b7dbcf341 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:29:09 +0800
Subject: [PATCH 022/268] [zh-cn]: init the translation of 'syntax sections'
 (#15857)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../page_structures/syntax_sections/index.md  | 312 ++++++++++++++++++
 1 file changed, 312 insertions(+)
 create mode 100644 files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md

diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md
new file mode 100644
index 00000000000000..bda54bfa38a55c
--- /dev/null
+++ b/files/zh-cn/mdn/writing_guidelines/page_structures/syntax_sections/index.md
@@ -0,0 +1,312 @@
+---
+title: 语法小节
+slug: MDN/Writing_guidelines/Page_structures/Syntax_sections
+---
+
+{{MDNSidebar}}
+
+MDN 参考页面的语法小节包含一个语法框，其定义了某个特性的确切语法（例如，它可以接受哪些参数，哪些参数是可选的）。本文将解释如何编写参考页面的语法框。
+
+## API 参考语法
+
+API 参考页面的语法小节是手工书写的，并且通常根据所记录特性的不同有所区别。语法小节以命名为“语法”的标题开头（且通常是二级标题 `##`），并且必须在参考页面的顶部包含此小节（在介绍性文字下方）。标题下方是展示该特性准确语法的代码块，以围栏式代码语法 ` ```[标记语言] ` 标记。
+
+下面的示例显示了一个典型语法部分（JavaScript 函数）的 Markdown 代码：
+
+````md
+## 语法
+
+```js-nolint
+slice()
+slice(start)
+slice(start, end)
+```
+````
+
+> **备注：** 这里使用的标记语言是 `js-nolint`，其中 `js` 指示了应使用 JavaScript 语法进行高亮。对于 JavaScript 语法部分，也需要指定 `nolint`，因为该部分并不是完全的合法 JavaScript 代码，我们并不想让 linter“修正”它（这里省略了返回值和行尾分号）。
+
+### 通用风格规则
+
+语法块内的标记应遵循一些规则：
+
+- **不要**用分号 `;` 结束每行。语法小节不是用来显示可运行代码的。因此，显示分号毫无意义。
+- **不要**在语法块（或在 MDN 的任意示例代码块）内使用 \<code>。它不仅通常毫无用处，而且我们的标记也不需要它，如果包含它，就不会呈现你想要的效果。
+- 只指定函数及其参数，下方是一些“修正过”的示例
+
+  ```js-nolint
+  querySelector(selector)
+  // responseStr = element.querySelector(selector)
+
+  new IntersectionObserver(callback, options)
+  // const observer = new IntersectionObserver(callback, options)
+  ```
+
+### 构造函数和方法
+
+#### 语法块
+
+以语法块开头，就像这样（节选自 {{DOMxRef("IntersectionObserver.IntersectionObserver", "IntersectionObserver")}} 构造函数页）：
+
+```js-nolint
+new IntersectionObserver(callback, options)
+```
+
+或这样（节选自 {{DOMxRef("Document.hasStorageAccess()")}} 页）：
+
+```js-nolint
+hasStorageAccess()
+```
+
+如果是静态方法，如 {{DOMxRef("URL.createObjectURL()")}}，则一同提供它的接口：
+
+```js-nolint
+URL.createObjectURL(object)
+```
+
+##### 多行/可选参数
+
+可用于多种不同方法的方法应扩展为多行，显示所有可能的变化。
+
+每个选项应独立成行，省略每个选项的注释和赋值。例如，{{jsxref("Array.prototype.slice()")}} 有两个可选参数，其文档如下所示：
+
+```js-nolint
+slice()
+slice(begin)
+slice(begin, end)
+```
+
+类似的示例是 {{DOMxRef("CanvasRenderingContext2D.drawImage")}}：
+
+```js-nolint
+drawImage(image, dx, dy)
+drawImage(image, dx, dy, dWidth, dHeight)
+drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+```
+
+{{jsxref("Date")}} 构造函数也是这样：
+
+```js-nolint
+new Date()
+new Date(value)
+new Date(dateString)
+new Date(year, monthIndex)
+new Date(year, monthIndex, day)
+new Date(year, monthIndex, day, hours)
+new Date(year, monthIndex, day, hours, minutes)
+new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)
+```
+
+##### 形式语法
+
+语法部分不应使用形式语法符号（使用[巴科斯范式](https://zh.wikipedia.org/wiki/巴科斯范式)），而应使用[如上所述](#多行可选参数)的扩展多行格式。
+
+虽然形式化符号为复杂语法的描述提供了一种简洁的机制，但它并不为许多开发人员所熟悉，而且可能与特定编程语言的有效语法相冲突。例如，“`[ ]`”既表示“可选参数”，也表示 JavaScript {{jsxref("Array")}} 。你可以从下面 {{jsxref("Array.prototype.slice()")}} 的形式语法中看到这一点：
+
+```js-nolint
+arr.slice([begin[, end]])
+```
+
+在认为有益的特定情况下，可使用形式通知声明单独的**形式语法**部分。
+
+##### 使语法块简洁
+
+目的是使语法块尽可能纯粹、明确地定义功能的语法，不要包含任何无关的语法。例如，你可能会在网站的许多地方看到这种用于描述 promise 的语法形式：
+
+```js-nolint
+caches.match(request, options).then(function (response) {
+  // 使用 response 完成一些事情
+})
+```
+
+但下面这个版本要简洁得多，而且不包含多余的 {{JSxRef("Promise.prototype.then()")}} 方法调用：
+
+```js-nolint
+match(request, options)
+```
+
+##### 回调函数语法块
+
+对于接受回调函数的方法，要将该回调作为参数展示，而不是箭头函数或 `function` 表达式。
+
+```js-nolint
+filter(callbackFn)
+filter(callbackFn, thisArg)
+```
+
+然后，在“参数”小节，列出回调函数的参数和期望的返回类型。
+
+```md
+- `callbackFn`
+  - : 为数组中的每个元素执行的函数。它应该返回一个[真值](/zh-CN/docs/Glossary/Truthy)以将元素保留在结果数组中，否则返回一个[假值](/zh-CN/docs/Glossary/Falsy)。该函数被调用时将传入以下参数：
+    - `element`
+      - : 数组中当前正在处理的元素。
+    - `index`
+      - : 正在处理的元素在数组中的索引。
+    - `array`
+      - : 调用了 `filter()` 的数组本身。
+```
+
+##### 接受任意数量参数的语法
+
+对于接受任意数量参数的方法，语法块的写法如下：
+
+```js-nolint
+unshift()
+unshift(element1)
+unshift(element1, element2)
+unshift(element1, element2, /* …, */ elementN)
+```
+
+这里更倾向于从 1 开始编号，这样可以写出“`unshift` 在数组开头添加 N 个元素”这样的描述，也可以写成“第一个元素”（而不是“第零个元素”）。
+
+请注意，这里总是包含没有传递剩余参数的情况（即使没有意义）。然后，在“参数”小节中，像这样记录：
+
+```md
+- `element1`、…、`elementN`
+  - : 添加到数组开头的元素。
+```
+
+如果不传递剩余参数具有意义，请在这里添加 `\{{optional_inline}}`。
+
+另一个在剩余参数之前有一些位置参数的示例：
+
+```js-nolint
+splice(start)
+splice(start, deleteCount)
+splice(start, deleteCount, item1)
+splice(start, deleteCount, item1, item2)
+splice(start, deleteCount, item1, item2, /* …, */ itemN)
+```
+
+#### 参数小节
+
+然后，包含一个“参数”小节，其中以描述列表的方式解释了每个参数及其作用。如果参数是包含多个成员的对象，可以包含一个嵌套的描述列表，该列表本身也包含对每个成员的解释。可选参数应在其名称旁标注 \\{{optional_inline}} 宏调用。
+
+列表中每个参数的名称应包含在 markdown 代码标记 `` ` ` `` 中。
+
+> **备注：** 即使该特性不接受任何参数，也应包含“参数”小节，其中的内容为“无”。
+
+#### 返回值小节
+
+然后，包含一个“返回值”小节，其中解释了构造函数或方法的返回值。请参阅上述链接作为示例。
+
+如果没有返回值，使用以下文本：
+
+无（\\{{jsxref("undefined")}}）。
+
+#### 异常小节
+
+最后，加入一个“异常”小节，说明在调用构造函数/方法时如果遇到问题会抛出哪些异常。这可能是因为参数名拼写错误或给定的数据类型错误，也可能是因为调用环境有问题（例如，试图在非安全环境中运行仅限于安全上下文的特性）或其他原因。
+
+确定一个方法会抛出哪些异常需要仔细阅读规范。一般来说，通过规范中对某一特性如何运行的逐步解释，就能提供一份异常和导致异常抛出的情况的可靠列表。
+
+异常情况名称和解释应使用描述列表的形式。
+
+> **备注：** 如果该特性不抛出任何异常，则不需要包含“异常”小节，但也可以包含该小节，且内容为“无”。
+
+### 属性
+
+#### 值小节
+
+属性不包含语法部分。取而代之的是添加一个“值”小节，其中包含对属性值的解释，说明其数据类型和用途。
+
+#### 异常小节
+
+如果访问属性时会出现异常，则应包含一个“异常”小节，对每种异常进行解释；该小节的结构应与上述方法和构造函数相同。
+
+## JavaScript 参考语法
+
+JavaScript 内置对象参考页面遵循与 API 参考页面相同的基本规则，例如方法和属性。你可能会发现一些不同之处：
+
+- 对于只有一个构造函数的内置对象，构造函数语法通常包含在对象着陆页面中。例如，请参见 {{JSxRef("Date")}}。你会注意到，静态方法（存在于 `Date` 对象本身的方法）列在“方法”（Methods）下，而实例方法列在“Date.prototype 方法”（Date.prototype methods）下。
+- 你还会注意到，没有参数/异常的方法更有可能在 JavaScript 参考页面中完全不包含这些小节。请参见 {{JSxRef("Date.getDate()")}} 和 {{JSxRef("Date.now()")}} 以了解示例。
+
+## CSS 参考语法
+
+### 属性
+
+CSS 属性参考页面包括“语法”小节，该小节过去位于页面顶部，但现在越来越多地位于包含代码块的部分下方，代码块显示了该特性的典型用法，另外还有一个示例来说明该特性的作用（例如，请参见 {{CSSxRef("animation")}}）。
+
+> **备注：** 这样做是因为 CSS 的形式语法非常复杂，MDN 的许多读者都不会使用，而且对初学者来说很不方便。真实的语法和示例对大多数人更有用。
+
+在该小节中你会找到以下内容。
+
+#### 可选说明文字
+
+有些 CSS 属性不言自明，无需额外解释（例如 {{CSSxRef("color")}}）。另一方面，有些属性比较复杂，需要解释语法顺序、包含多个值等（参见 {{CSSxRef("animation")}}）。在这种情况下，可以在任何小节之前添加额外的解释。
+
+#### 值小节
+
+接下来，你应该包含一个“值”小节——该小节包含一个说明列表，解释构成属性值的 CSS 值类型。每种值类型都应该用角括弧括起来，并链接到涵盖该值类型的 MDN 参考页面（如果有相关页面的话）。例如，请参阅 {{CSSxRef("border")}} 属性参考——该属性参考了三种值类型，其中只有一种是链接的（{{CSSxRef("&lt;color&gt;")}}）。
+
+#### 形式语法
+
+最后一部分，“形式语法”，是根据 [MDN data 仓库](https://github.com/mdn/data)的 CSS 目录中的数据自动生成的。你只需在标题下方加入一个 `CSSSyntax` 宏调用，剩下的就交给它了。
+
+唯一的复杂之处在于要确保所需的数据都已存在。[properties.json](https://github.com/mdn/data/blob/main/css/properties.json) 文件需要包含你要记录的属性的条目，而 [types.json](https://github.com/mdn/data/blob/main/css/types.json) 文件需要包含该属性值中使用的所有值类型的条目。
+
+为此，你需要分叉 [MDN data 仓库](https://github.com/mdn/data)，在本地克隆你的分叉，在新分支中进行修改，然后向上游仓库提交拉取请求。你可以[在这里找到关于使用 Git 的更多细节](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables)。
+
+### 选择器
+
+与属性页面相比，选择器参考页面的“语法”部分要简单得多。它包含一个使用“语法框”样式的块，显示了选择器的基本语法，无论是一个简单的关键字（例如 {{CSSxRef(":hover")}}），还是一个需要参数的更复杂的函数值（例如 {{CSSxRef(":not", ":not()")}}）。有时，参数会在语法块内的另一个条目中进行解释（以 {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}} 为例）。
+
+该代码块由 [MDN data 仓库](https://github.com/mdn/data)的 CSS 目录中的数据自动生成。你只需在标题下方加入一个 `CSSSyntax` 宏调用，剩下的就交给它了。
+
+唯一的复杂之处在于确保你需要的数据已经存在。[selectors.json](https://github.com/mdn/data/blob/main/css/selectors.json) 文件需要包含你要记录的选择器的条目。
+
+为此，你需要分叉 [MDN data 仓库](https://github.com/mdn/data)，在本地克隆你的分叉，在新分支中进行修改，然后向上游仓库提交拉取请求。你可以[在这里找到更多关于使用 Git 的细节](/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables)。
+
+## HTML 参考语法
+
+HTTP 参考语法全部是手工创建的，并根据要记录的 HTTP 特性类型而有所不同。
+
+### HTTP 标头/内容安全策略标头
+
+HTTP 标头语法（和内容安全策略）在页面的两个独立部分——“语法”和“指令”中进行了说明。
+
+#### 语法小节
+
+“语法”小节通过使用“语法框”样式的语法块来显示页眉的语法，包括显示值中可以包含哪些指令、顺序如何等的正式语法。例如，{{HTTPHeader("If-None-Match")}} 标头信息的语法块如下所示：
+
+```http
+If-None-Match: <etag_value>
+If-None-Match: <etag_value>, <etag_value>, …
+If-None-Match: *
+```
+
+有些标头有单独的请求指令、响应指令和扩展语法。如果有的话，这些语法必须包含在单独的语法块中，每个语法块都有自己的小节。请参阅 {{HTTPHeader("Cache-Control")}} 以了解示例。
+
+#### 指令小节
+
+“指令”小节包含一个说明列表，其中包含语法中可能出现的所有指令的名称和说明。
+
+### HTTP 请求方法
+
+请求方法的语法非常简单，只包含一个使用“语法框”样式的语法块，显示方法语法的结构。[GET 方法](/zh-CN/docs/Web/HTTP/Methods/GET)的语法如下：
+
+```http
+GET /index.html
+```
+
+### HTTP 响应状态码
+
+同样，HTTP 响应状态代码的语法非常简单——一个包含代码和名称的语法块。例如：
+
+```http
+404 Not Found
+```
+
+## SVG 参考语法
+
+### SVG 元素
+
+SVG 元素语法部分是不存在的——就像 HTML 元素语法部分一样。每个 SVG 元素的参考页面都只是列出了适用于该元素的属性列表。请参见 {{SVGElement("feTile")}} 为例。
+
+### SVG 属性
+
+SVG 属性参考页面也不包含语法小节。
+
+## 参见
+
+- [MDN 中的 Markdown 语法](/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#示例代码块)

From 20bae1b878cc53318e1d95e7810e9ea3f7d7ee48 Mon Sep 17 00:00:00 2001
From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:41:45 +0800
Subject: [PATCH 023/268] zh-cn: init the translation of cycletracker manifest
 (#15890)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../cycletracker/manifest_file/index.md       | 271 ++++++++++++++++++
 1 file changed, 271 insertions(+)
 create mode 100644 files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md

diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
new file mode 100644
index 00000000000000..31bc88a4411b9f
--- /dev/null
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
@@ -0,0 +1,271 @@
+---
+title: 经期跟踪器：清单和图标
+slug: Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file
+---
+
+{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}
+
+{{PWASidebar}}
+
+PWA 清单文件是一个 JSON 文件，它提供了关于该应用程序的特性信息，使其在用户设备上安装时看起来和表现得像原生应用。清单包含了你的应用的元数据，包括它的名称、图标和呈现指令。
+
+虽然根据规格，清单的所有键或成员都是可选的，但是一些浏览器、操作系统和应用分发机构对于 Web 应用成为 PWA 有[特定成员的要求](/zh-CN/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#必须的清单成员)。通过包含名称或简称、启动 URL、满足一定最低要求的图标，以及 PWA 应该在什么样的应用程序视口中显示，你的应用将满足 PWA 的清单要求。
+
+我们的月经周期跟踪应用的最小化清单文件可能如下所示：
+
+```js
+{
+  "short_name": "CT",
+  "start_url" : "/",
+  "icons": [
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512"
+    }
+  ],
+  "display": "standalone"
+}
+```
+
+在保存清单文件并从我们的 HTML 文件中链接到它之前，我们可以开发一个仍然简洁但具有更多信息的 JSON 对象，以定义 PWA 的身份、展示和图标。是的，上面的内容会起作用，但让我们讨论一下这个示例中的成员以及其他一些成员，这些成员使清单文件能够更好地定义我们的经期跟踪器 PWA 的外观。
+
+## 应用标识
+
+为了识别你的 PWA，JSON 必须包含一个 `name` 或 `short_name` 成员，或者两者都包含，以定义 PWA 的名称。它还可以包含一个 `description`。
+
+- [`name`](/zh-CN/docs/Web/Manifest/name)
+  - : PWA 的名称。这是操作系统列出应用程序时使用的名称，也是应用图标旁边的标签，等等。
+- [`short_name`](/zh-CN/docs/Web/Manifest/short_name)
+  - : 如果没有足够的空间显示 `name`，则显示给用户的 PWA 的名称。它被用作手机屏幕上图标的标签，包括在 iOS 的“添加到主屏幕”对话框中。
+
+当 `name` 和 `short_name` 都存在时，大多数情况下都会使用 `name`，在显示应用程序名称的空间有限时使用 `short_name`。
+
+- [`description`](/zh-CN/docs/Web/Manifest/description)
+  - : 说明应用程序的功能。它提供了一个关于应用程序目的和功能的[无障碍描述](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description)。
+
+### 任务
+
+编写你的清单文件的前几行。你可以使用下面的文本，或者更为谨慎或描述性的值，并选择你自己的描述。
+
+### 示例解决方案
+
+```js
+{
+  "name": "CycleTracker: Period Tracking app",
+  "short_name": "CT",
+  "description": "Securely and confidentially track your menstrual cycle. Enter the start and end dates of your periods, saving your private data to your browser on your device, without sharing it with the rest of the world."
+}
+```
+
+## 应用程序外观
+
+PWA 的安装后和离线体验的外观由清单文件定义。外观清单成员包括 `start_url` 和 `display`，以及可以用于[自定义应用程序颜色](/zh-CN/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors)的成员，包括 `theme_color` 和 `background_color`。
+
+- [`start_url`](/zh-CN/docs/Web/Manifest/start_url)
+
+  - : 用户启动 PWA 时的起始页面。
+
+- [`display`](/zh-CN/docs/Web/Manifest/display)
+  - : 控制应用程序的显示模式，包括 `fullscreen`、`standalone`，后者可以将 PWA 显示为[独立应用程序](/zh-CN/docs/Web/Progressive_web_apps/How_to/Create_a_standalone_app)、`minimal-ui`，类似独立视图但具有用于控制导航的 UI 元素，以及 `browser`，即在常规浏览器视图中打开应用程序。
+
+还有一个 [`orientation`](/zh-CN/docs/Web/Manifest/orientation) 成员，用于将 PWA 的默认方向定义为 `portrait` 或 `landscape`。由于我们的应用程序在两种方向下都能很好地工作，因此我们将省略此成员。
+
+### 颜色
+
+- [`theme_color`](/zh-CN/docs/Web/Manifest/theme_color)
+  - : 默认的[操作系统和浏览器 UI 元素的颜色](/zh-CN/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors#定义主题色)，例如某些移动体验中的状态栏和桌面操作系统上的应用程序标题栏。
+- [`background_color`](/zh-CN/docs/Web/Manifest/background_color)
+  - : 在 CSS 加载之前，显示为[应用程序背景](/zh-CN/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors#定制应用窗口背景色)的占位符颜色。为了在应用启动和加载之间创建平滑过渡，建议使用声明为应用程序 [`background-color`](/zh-CN/docs/Web/CSS/background-color) 颜色的 [`<color>`](/zh-CN/docs/Web/CSS/color_value)。
+
+### 任务
+
+在之前任务开始创建的清单文件中添加外观定义。
+
+### 示例解决方案
+
+由于示例应用程序是一个单页面，我们可以使用 `"/"` 作为 `start_url`，或者完全省略该成员。出于同样的原因，我们可以通过将 `display` 设置为 `standalone` 来不显示浏览器 UI 而显示应用程序。
+
+在[我们的 CSS](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS#css_内容) 中，`background-color: #efe;` 被设置在 `body` 元素选择器上。我们使用 `#eeffee` 以确保从占位符外观到应用加载之间实现平滑过渡。
+
+```js
+{
+  "name": "...",
+  "short_name": "...",
+  "description": "...",
+  "start_url": "/",
+  "theme_color": "#eeffee",
+  "background_color": "#eeffee",
+  "display": "standalone"
+}
+```
+
+## 应用图标
+
+PWA 图标帮助用户识别你的应用程序，使其更具视觉吸引力，并提高可发现性。PWA 应用图标出现在主屏幕、应用启动器或应用商店搜索结果中。渲染的图标大小和文件要求因显示位置和显示方而异。清单文件是定义图像的地方。
+
+在清单 JSON 对象中，`icons` 成员指定用于不同上下文的一个或多个图标对象数组，每个对象都有一个 `src` 和 `sizes` 成员，还有可选的 `type` 和 `purpose` 成员。每个图标对象的 `src` 列出单个图像文件的源。`sizes` 成员提供空格分隔的尺寸列表，指明应该对该特定图像使用哪些尺寸，或者使用关键字 `any`；该值与 {{HTMLElement("link")}} 元素的 [`sizes`](/zh-CN/docs/Web/HTML/Element/link#sizes) 属性相同。`type` 成员列出图像的 MIME 类型。
+
+```js
+{
+  "name": "MyApp",
+  "icons": [
+    {
+      "src": "icons/tiny.webp",
+      "sizes": "48x48"
+    },
+    {
+      "src": "icons/small.png",
+      "sizes": "72x72 96x96 128x128 256x256",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icons/large.png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "icons/scalable.svg",
+      "sizes": "any"
+    }
+  ]
+}
+```
+
+所有图标都应该有相同的外观和感觉，以确保用户可以识别你的 PWA。但图标越大，它可以包含的细节就越丰富。尽管所有图标文件都是正方形的，但有些操作系统会以不同的形状渲染图标，裁剪部分区域或“遮挡”图标以适应 UI，或者如果图标不可遮挡则会缩小并居中放置在背景上。[安全区域](/zh-CN/docs/Web/Progressive_web_apps/How_to/Define_app_icons#支持遮挡)，即图标被遮挡为圆形时也会正常渲染的内部 80% 区域。通过将 `purpose` 成员设置为 `maskable`，可以将图标定义为[自适应图标](https://web.dev/maskable-icons/)。
+
+在 Safari 以及 iOS 和 iPadOS 中，如果通过 {{HTMLElement("link")}} 在 HTML 文档的 {{HTMLElement("head")}} 中包含[非标准的 `apple-touch-icon`](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#在你的站点增加自定义图标)，它们会优先于清单中声明的图标。
+
+### 任务
+
+将图标添加到你一直在构建的清单文件中。
+
+围绕经期跟踪器的“循环”和“周期”这两个词以及我们选择的绿色主题色，我们可以将所有图标图像设计成浅绿色正方形，中间有一个绿色圆圈。我们最小尺寸的图标文件 `circle.ico` 只是一个代表句号标点符号和应用程序主题颜色的圆圈；而中间尺寸的图像 `circle.svg`、`tire.svg` 和 `wheel.svg` 则随着尺寸变大而增加更多细节，从简单的圆圈变成轮胎；我们最大尺寸的图标则是一个有辐条和阴影的精细轮子。不过，设计图标已经超出了本教程的范围。
+
+```html hidden
+<div>
+  <img alt="一个绿色圆圈" src="circle.svg" role="img" />
+  <img alt="一个简单的轮子" src="tire.svg" role="img" />
+  <img alt="一个详细的轮子" src="wheel.svg" role="img" />
+</div>
+```
+
+```css hidden
+div {
+  display: flex;
+  gap: 5px;
+}
+img {
+  width: 33%;
+}
+```
+
+{{EmbedLiveSample("PWA iconography", 600, 250)}}
+
+### 示例解决方案
+
+```js
+{
+  "name": "...",
+  "short_name": "...",
+  "description": "...",
+  "start_url": "...",
+  "theme_color": "...",
+  "background_color": "...",
+  "display": "...",
+  "icons": [
+    {
+      "src": "circle.ico",
+      "sizes": "48x48"
+    },
+    {
+      "src": "icons/circle.svg",
+      "sizes": "72x72 96x96",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icons/tire.svg",
+      "sizes": "128x128 256x256"
+    },
+    {
+      "src": "icons/wheel.svg",
+      "sizes": "512x512"
+    }
+  ]
+}
+```
+
+## 将清单添加到应用中
+
+你现在已经有一个完全可用的清单文件了。是时候保存它并从我们的 HTML 文件中链接到它了。
+
+清单文件的文件扩展名可以是规范建议的 `.webappmanifest`。但是，作为 JSON 文件，它最常见的保存扩展名是浏览器支持的 `.json`。
+
+PWA 需要从应用的 HTML 文档中链接到清单文件。我们已经有一个功能完全的应用，但它还不是 PWA，因为它还没有链接到我们的外部 manifest JSON 文件。为了包含外部 JSON 资源，我们使用 `<link>` 元素，带有 `rel="manifest"` 属性，并将 `href` 属性设置为资源的位置。
+
+```html
+<link rel="manifest" href="cycletracker.json" />
+```
+
+`<link>` 元素最常用于链接样式表，在 PWA 中，它用于链接必须的清单文件，但也用于[建立站点图标](/zh-CN/docs/Web/HTML/Attributes/rel#图标)（包括“favicon”风格的图标和移动设备主屏幕和应用程序上的图标）等其他用途。
+
+```html
+<link rel="icon" href="icons/circle.svg" />
+```
+
+使用 `.webmanifest` 扩展名时，如果你的服务器不支持那种 MIME 类型，请设置 `type="application/manifest+json"`。
+
+#### 任务
+
+保存你在上面的步骤中创建的清单文件，然后从 `index.html` 文件中链接到它。
+
+可选地，也可以从 HTML 中链接到一个快捷图标。
+
+#### 示例解决方案
+
+`index.html` 的 {{HTMLelement("head")}} 现在可能如下所示：
+
+```html
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Cycle Tracker</title>
+  <link rel="stylesheet" href="style.css" />
+  <link rel="manifest" href="cycletracker.json" />
+  <link rel="icon" href="icons/circle.svg" />
+</head>
+```
+
+查看 [`cycletracker.json` 文件](https://mdn.github.io/pwa-examples/cycletracker/Manifest_file/cycletracker.json)和在 GitHub 上查看[项目源代码](https://github.com/mdn/pwa-examples/tree/master/cycletracker/Manifest_file)。
+
+有了清单文件，Safari 会将你的网站识别为 web 应用。要使 web 应用成为完整的 PWA, 我们仍需要添加 service worker。
+
+## 调试清单文件
+
+一些浏览器开发者工具可以洞察应用清单文件。在 Edge、Firefox 和 Chrome 开发者工具中，清单成员及其值可在“Application”面板下看到。
+
+![在开发者工具中，左侧面板包含指向清单的链接。右侧显示应用清单文件，文件名称是一个指向 JSON 文件的链接。](debugger_devtools.jpg)
+
+Manifest 应用面板提供了清单文件名称作为链接，以及身份、外观和图标部分。
+
+![身份和外观清单成员以及存在的任何值。](manifest_identity_and_presentation.jpg)
+
+支持的清单成员将显示出来，以及所有包含的值。在此截图中，虽然我们没有包括 `orientation` 或 `id` 成员，但它们都被列出来了。应用面板可以用来查看清单成员，甚至可以了解：在这个例子中，我们了解到要指定与当前身份匹配的应用 Id，需要将 `id` 字段设置为“/”。
+
+![由于我们没有 service worker，我们的应用不是可安装的 PWA。](manifest_installability.jpg)
+
+Chrome 和 Edge 还提供错误和警告、协议处理程序以及改进清单和图标的信息。
+
+我们的 web 应用没有任何协议处理程序；这是一个本教程未涵盖的主题。如果我们包含一些协议处理程序，它们会在“Protocol Handlers”下找到。由于该部分为空，开发者工具会链接到该主题的更多信息。
+
+![清单文件中包含的四个图标，已选中“仅显示可遮罩图标的最小安全区域”以移除背景。](manifest_icons.jpg)
+
+清单面板还包括关于可遮罩图标安全区域的信息，以及指向 [PWA 图像生成器](https://www.pwabuilder.com/imageGenerator)的链接。该工具为 Android、Apple 操作系统和 Windows 创建 100 多个正方形 PNG 图像，以及列出所有图像及其尺寸的 JSON 对象。它生成的图像可能不符合你的需要，但是为每个操作系统生成的图像尺寸列表展示了 PWA 可以提供服务的位置和方式的多样性。
+
+开发者工具在识别支持的清单成员方面非常有用。请注意，Firefox 开发者工具中甚至包括 `dir`、`lang`、`orientation`、`scope` 和 `id` 的条目，尽管我们的清单文件没有包括这些成员。Firefox 还包括每个图标的 `purpose` 成员的值，如果目的没有明确设置，会显示 `any`。
+
+![Firefox 开发者工具中的 Manifest 面板，显示未包含的 dir、scope 和 id 成员的值，以及没有关联值的 lang 和 orientation 成员。](manifest_firefox.jpg)
+
+## 接下来
+
+要从其他浏览器和所有支持 PWA 的操作系统中获得 PWA 的好处，我们需要[添加 service worker](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers)，我们将在不使用框架的情况下完成这项工作。
+
+{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality", "Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}

From 3eeff21a311a460357343a8c61a66b883f673d2a Mon Sep 17 00:00:00 2001
From: Javien Lee <kraccoon@kakao.com>
Date: Tue, 19 Sep 2023 23:19:05 +0900
Subject: [PATCH 024/268] ko: How to fix a website with blocked mixed content
 (#15389)

* sync with e74627e6fd9ba19696b918c2bdddfff8aa160787

* fix en-us to ko

* fix typo

* Update files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md

Co-authored-by: fano <jho2301@gmail.com>

* Update files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md

Co-authored-by: fano <jho2301@gmail.com>

* Update files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update index.md

---------

Co-authored-by: fano <jho2301@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../index.md                                  | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md

diff --git a/files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md b/files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
new file mode 100644
index 00000000000000..a846fe57248ddb
--- /dev/null
+++ b/files/ko/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.md
@@ -0,0 +1,30 @@
+---
+title: 차단된 혼합 콘텐츠가 있는 웹사이트를 고치는 방법
+slug: Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
+l10n:
+  sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787
+---
+
+{{QuickLinksWithSubpages("/ko/docs/Web/Security")}}
+
+Firefox 23부터는 기본적으로 [액티브 혼합 콘텐츠](/ko/docs/Web/Security/Mixed_content#혼합_액티브_콘텐츠)를 차단합니다. 이는 [Chrome](https://security.googleblog.com/2011/06/trying-to-end-mixed-scripting.html?m=1)에서 채택한 방식을 따른 것입니다.
+
+이 페이지는 웹 개발자로서 알아야 할 사항을 설명합니다.
+
+## 웹사이트가 고장날 수 있습니다
+
+웹사이트가 HTTPS 페이지를 제공하는 경우, 이 페이지에서 HTTP를 통해 전달되는 모든 [액티브 혼합 콘텐츠](/ko/docs/Web/Security/Mixed_content#혼합_액티브_콘텐츠)는 기본적으로 차단됩니다. 따라서 사용자에겐 웹사이트가 손상된 것처럼 보일 수 있습니다(iframe 또는 플러그인이 로드되지 않는 경우 등). [패시브 혼합 콘텐츠](/ko/docs/Web/Security/Mixed_content#혼합_패시브디스플레이_콘텐츠)는 기본적으로 표시되긴 하지만, 사용자는 이러한 유형의 콘텐츠도 차단하도록 설정할 수 있습니다.
+
+이미 Chrome부터 혼합 콘텐츠 차단을 시행했기 때문에 웹사이트가 Chrome에서 정상적으로 작동하는 경우, 혼합 콘텐츠 차단 기능이 있는 Firefox에서도 동일하게 작동할 가능성이 높습니다.
+
+어떤 경우든 Firefox에 문제가 있는지 확인하는 가장 좋은 방법은 [최신 Firefox 에디션](https://www.mozilla.org/en-US/firefox/developer/)을 다운로드하고, 검사할 여러 페이지에서 [웹 콘솔](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)을 열고 ("Security" 메시지 활성화) 웹 사이트에 접속하여 혼합 콘텐츠와 관련된 사항이 보고되는지 확인하는 것입니다. 또는 [SSL-check](https://www.jitbit.com/sslcheck/)나 [Missing Padlock](https://www.missingpadlock.com)과 같은 무료 온라인 크롤러, [HTTPSChecker](https://httpschecker.net/how-it-works)와 같은 데스크톱 크롤러, 아니면 [mcdetect](https://github.com/agis/mcdetect)과 같은 CLI 도구를 사용하여 웹사이트를 재귀적으로 검사하고 안전하지 않은 콘텐츠의 링크를 찾을 수 있습니다. 혼합 콘텐츠에 대한 언급이 없다면 웹사이트는 좋은 상태입니다. 계속해서 멋진 웹사이트를 만드세요!
+
+## 웹사이트를 고치는 방법
+
+혼합 콘텐츠 차단을 피하는 가장 좋은 전략은 모든 콘텐츠를 HTTP가 아닌 HTTPS로 제공하는 것입니다.
+
+**자체 도메인의 경우,** 모든 콘텐츠를 HTTPS로 제공하고 링크를 수정하세요. 콘텐츠의 HTTPS 버전이 이미 존재하는 경우가 많으므로 http\://에서 https\://로 링크에 "s"를 추가하기만 하면 됩니다.
+
+그러나 경우에 따라서 해당 미디어의 경로가 올바르지 않을 수도 있습니다. [linkchecker](https://linkchecker.github.io/linkchecker/)와 같이 이 문제를 해결하는 데 도움이 되는 온라인 및 오프라인 도구(운영 체제에 따라 다름)가 있습니다.
+
+**다른 도메인의 경우,** 사용 할 수 있다면 사이트를 HTTPS 버전으로 사용하세요. HTTPS를 사용할 수 없는 경우, 해당 도메인에 연락하여 HTTPS를 통해 콘텐츠를 제공할 수 있는지 문의해 보세요.

From 10a20943a34c216b93c1cfb13f5258dc72bcdb3e Mon Sep 17 00:00:00 2001
From: MikeCAT <mikecat@users.noreply.github.com>
Date: Fri, 15 Sep 2023 20:10:34 +0900
Subject: [PATCH 025/268] Improve ::backdrop

---
 .../ja/web/css/_doublecolon_backdrop/index.md | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/files/ja/web/css/_doublecolon_backdrop/index.md b/files/ja/web/css/_doublecolon_backdrop/index.md
index 151f7d9a653236..929d771c0f6667 100644
--- a/files/ja/web/css/_doublecolon_backdrop/index.md
+++ b/files/ja/web/css/_doublecolon_backdrop/index.md
@@ -5,9 +5,27 @@ slug: Web/CSS/::backdrop
 
 {{CSSRef}}
 
-[CSS](/ja/docs/Web/CSS) の **`::backdrop`** [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は、何らかの要素が全画面モードで表示される直下に直接表示される {{Glossary("viewport")}} の寸法のボックスです。これは [Fullscreen API](/ja/docs/Web/API/Fullscreen_API) を使用した全画面モードに配置される要素、および {{HTMLElement("dialog")}} 要素の両方を含みます。
+[CSS](/ja/docs/Web/CSS) の **`::backdrop`** [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は、何らかの要素が全画面モード ({{glossary("top layer")}}) で表示される直下に直接表示される {{Glossary("viewport")}} の寸法のボックスです。
 
-全画面モードで複数の要素が配置されたときは、 backdrop はそのような要素の最上位の直下、より古い全画面要素の上に絵が描かれます。
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-backdrop.html", "tabbed-shorter")}}
+
+## 構文
+
+```css
+::backdrop {
+  /* ... */
+}
+```
+
+## 説明
+
+Backdrop は以下の状況で現れます。
+
+- [Fullscreen API](/ja/docs/Web/API/Fullscreen_API) の {{domxref("Element.requestFullscreen()")}} メソッドを使用した全画面モードに配置される要素
+- {{domxref("HTMLDialogElement.showModal()")}} の呼び出しにより最上位レイヤーで表示される {{HTMLElement("dialog")}} 要素
+- {{domxref("HTMLElement.showPopover()")}} の呼び出しにより最上位レイヤーで表示される {{domxref("Popover API", "Popover", "", "nocode")}} の要素
+
+全画面モードで複数の要素が配置されたときは、それぞれに自身の `::backdrop` 疑似要素があります。
 
 ```css
 /* backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
@@ -16,14 +34,10 @@ dialog::backdrop {
 }
 ```
 
-すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。 `::backdrop` 擬似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。
+すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。`::backdrop` 擬似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。
 
 `::backdrop` 擬似要素はどの要素にも継承せず、どの要素からも継承しません。この擬似要素に適用するプロパティの制限はありません。
 
-## 構文
-
-{{CSSSyntax}}
-
 ## 例
 
 ### 全画面動画の背景のスタイル付け
@@ -38,7 +52,7 @@ video::backdrop {
 
 結果の画面は以下のようになります。
 
-![](bbb-backdrop.png)
+![ほぼ全画面のビデオプレイヤー。ビデオプレイヤーが完全に画面を覆わないので、プレイヤーの上下に紫が見える。](bbb-backdrop.png)
 
 [動作例を見てみてください](https://mdn.github.io/css-examples/backdrop/index.html)。背景の色を変更した後、動画を全画面表示にすると、背景色の変更を確認することができます。
 

From 0b8cf42453c20726e8900e35378800568021cf68 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 3 Sep 2023 02:45:21 +0900
Subject: [PATCH 026/268] =?UTF-8?q?2023/08/30=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/click_event/index.md | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/api/element/click_event/index.md b/files/ja/web/api/element/click_event/index.md
index 348d7d8fcb3f22..8fc336fc7251ce 100644
--- a/files/ja/web/api/element/click_event/index.md
+++ b/files/ja/web/api/element/click_event/index.md
@@ -26,9 +26,11 @@ onclick = (event) => {};
 
 ## イベント型
 
-{{domxref("MouseEvent")}} です。 {{domxref("Event")}} を継承しています。
+{{domxref("PointerEvent")}} です。 {{domxref("MouseEvent")}} を継承しています。
 
-{{InheritanceDiagram("MouseEvent")}}
+{{InheritanceDiagram("PointerEvent")}}
+
+> **メモ:** この仕様書の以前のバージョンでは、このイベントのイベント型は {{domxref("MouseEvent")}} でした。 Firefox と Safari では今でもこの型で渡されます。
 
 ## イベントプロパティ
 
@@ -81,10 +83,30 @@ _親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承
   - : {{domxref("MouseEvent.clientX")}} の別名です。
 - {{domxref("MouseEvent.y")}} {{ReadOnlyInline}}
   - : {{domxref("MouseEvent.clientY")}} の別名です。
+- {{ domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
+  - : イベントの原因となっているポインターの一意の識別子。
+- {{ domxref('PointerEvent.width')}} {{ReadOnlyInline}}
+  - : ポインターの接触形状の幅（X 軸上の大きさ、CSS ピクセル単位）。
+- {{ domxref('PointerEvent.height')}} {{ReadOnlyInline}}
+  - : ポインターの接触形状の高さ（Y 軸上の大きさ、CSS ピクセル単位）。
+- {{ domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
+  - : 0 から 1 の範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。
+- {{ domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
+  - : ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（[cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)）とも呼ばれます）は `-1` から `1` の範囲で、 `0` はコントロールの中立位置です。
+- {{ domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
+  - : Y-Z 平面と、ポインター（ペン/スタイラスなど）軸と Y 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。
+- {{ domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
+  - : X-Z 平面と、ポインター（ペン/スタイラスなど）軸と X 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。
+- {{ domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
+  - : ポインター（ペン/スタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。
+- {{ domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
+  - : イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
+- {{ domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
+  - : ポインターがこのポインターの種類の主ポインターを表しているかどうかを示します。
 
 ## 使用上の注意
 
-`click` のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("UIEvent/detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。
+`click` のイベントハンドラーに渡される {{domxref("PointerEvent")}} オブジェクトの {{domxref("UIEvent/detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。
 
 ## 例
 

From c5dd84a30bdfcd7e201df10c52ef5724e567ca29 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Aug 2023 21:20:58 +0900
Subject: [PATCH 027/268] =?UTF-8?q?2023/04/22=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/javascript/reference/index.md | 28 ++++++++++++----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/javascript/reference/index.md b/files/ja/web/javascript/reference/index.md
index 77e415d6eec5d0..6baaf58b3c1056 100644
--- a/files/ja/web/javascript/reference/index.md
+++ b/files/ja/web/javascript/reference/index.md
@@ -2,7 +2,7 @@
 title: JavaScript リファレンス
 slug: Web/JavaScript/Reference
 l10n:
-  sourceCommit: b8e4922dacc3ce43e239f7984b61493568e93f59
+  sourceCommit: ab19b16083a8cafc5b060ac3de05a426b226e245
 ---
 
 {{JsSidebar}}
@@ -106,6 +106,8 @@ JavaScript 言語は、ブラウザーやサーバーサイドのスクリプト
 
 ### 制御の抽象化
 
+- {{JSxRef("Iterator")}}
+- {{JSxRef("AsyncIterator")}}
 - {{JSxRef("Promise")}}
 - {{JSxRef("GeneratorFunction")}}
 - {{JSxRef("AsyncGeneratorFunction")}}
@@ -121,15 +123,16 @@ JavaScript 言語は、ブラウザーやサーバーサイドのスクリプト
 ### 国際化
 
 - {{JSxRef("Intl")}}
-- {{JSxRef("Global_Objects/Intl/Collator", "Intl.Collator")}}
-- {{JSxRef("Global_Objects/Intl/DateTimeFormat", "Intl.DateTimeFormat")}}
-- {{JSxRef("Global_Objects/Intl/DisplayNames", "Intl.DisplayNames")}}
-- {{JSxRef("Global_Objects/Intl/ListFormat", "Intl.ListFormat")}}
-- {{JSxRef("Global_Objects/Intl/Locale", "Intl.Locale")}}
-- {{JSxRef("Global_Objects/Intl/NumberFormat", "Intl.NumberFormat")}}
-- {{JSxRef("Global_Objects/Intl/PluralRules", "Intl.PluralRules")}}
-- {{JSxRef("Global_Objects/Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
-- {{JSxRef("Global_Objects/Intl/Segmenter", "Intl.Segmenter")}}
+- {{JSxRef("Intl.Collator")}}
+- {{JSxRef("Intl.DateTimeFormat")}}
+- {{JSxRef("Intl.DisplayNames")}}
+- {{JSxRef("Intl.DurationFormat")}}
+- {{JSxRef("Intl.ListFormat")}}
+- {{JSxRef("Intl.Locale")}}
+- {{JSxRef("Intl.NumberFormat")}}
+- {{JSxRef("Intl.PluralRules")}}
+- {{JSxRef("Intl.RelativeTimeFormat")}}
+- {{JSxRef("Intl.Segmenter")}}
 
 ## 文
 
@@ -172,6 +175,7 @@ JavaScript 言語は、ブラウザーやサーバーサイドのスクリプト
 
 - {{jsxref("Statements/Empty", "空文", "", 1)}}
 - {{jsxref("Statements/block", "ブロック", "", 1)}}
+- {{jsxref("Statements/Expression_statement", "式文", "", 1)}}
 - {{jsxref("Statements/debugger", "debugger")}}
 - {{jsxref("Statements/export", "export")}}
 - {{jsxref("Statements/import", "import")}}
@@ -270,7 +274,7 @@ JavaScript 言語は、ブラウザーやサーバーサイドのスクリプト
 
 ### 条件 (三項) 演算子
 
-- {{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
+- {{JSxRef("Operators/Conditional_operator", "(condition ? ifTrue : ifFalse)")}}
 
 ### 代入演算子
 
@@ -303,7 +307,7 @@ JavaScript 言語は、ブラウザーやサーバーサイドのスクリプト
 
 ### カンマ演算子
 
-- {{JSxRef("Operators/Comma_Operator", ",")}}
+- {{JSxRef("Operators/Comma_operator", ",")}}
 
 ## 関数
 

From 5ac66b6601bcdb430bd8a006b5c3d2b78ebf2dee Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 16 Sep 2023 00:04:56 +0900
Subject: [PATCH 028/268] =?UTF-8?q?2023/09/14=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/websockets_api/index.md | 31 ++++++++++++------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/files/ja/web/api/websockets_api/index.md b/files/ja/web/api/websockets_api/index.md
index 8a9f129accb478..d0851af9b2833d 100644
--- a/files/ja/web/api/websockets_api/index.md
+++ b/files/ja/web/api/websockets_api/index.md
@@ -1,6 +1,8 @@
 ---
 title: WebSocket API (WebSockets)
 slug: Web/API/WebSockets_API
+l10n:
+  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
 ---
 
 {{DefaultAPISidebar("Websockets API")}}
@@ -24,29 +26,29 @@ slug: Web/API/WebSockets_API
 - [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)
 
 ## ツール
 
-- [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)を紹介します。
+- [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 サーバーとクライアントの実装です。
-- [ClusterWS](https://github.com/ClusterWS/ClusterWS): [Node.js](https://nodejs.org) でスケーラブルな WebSocket アプリケーションを構築する、軽量で高速で強力なフレームワークです。
-- [CWS](https://github.com/ClusterWS/cWS): Node.js のための高速な C++ による WebSocket の実装です (uWebSockets v0.14 のフォーク)
 - [Socket.IO](https://socket.io): 長いポーリングと WebSocket ベースのサードバーティ―の [Node.js](https://nodejs.org) 用転送プロトコルです。
-- [SocketCluster](http://socketcluster.io/): スケーラビリティに焦点を当てた [Node.js](https://nodejs.org) 用の pub/sub WebSocket フレームワークです。
+- [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](http://www.totaljs.com): [Node.js](https://www.nodejs.org) 用の ウェブアプリケーションフレームワーク(使用例: [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](http://signalr.net/): SignalR は単一のコードだけで、もし WebSockets が使用可能な場合、基盤として WebSockets を使用し、そうでない場合はほかの代替技術にフォールバックします。
-- [Caddy](https://caddyserver.com/docs/websocket): WebSocket として任意のコマンド (stdin/stdout) を中継することができるウェブサーバーです。
+- [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 を使用し、そうでない場合はほかの代替技術にフォールバックします。
+- [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 で、単一の接続を用いて、サーバー上にエクスポートされた機能と、同時にクライアント上のものがあります (クライアントがサーバーを呼び出すことができ、サーバーもクライアントを呼び出すことができます)。
 - [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): WebSockset の wss:\// または ws:\// および通常ソケットの ssl:\//, tcp:\// を介して接続を処理するために PHP で書かれたサーバーです。
+- [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 ライブラリーです。
 - [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://golang.org/) による実装です。
+- [Gorilla WebSocket](https://pkg.go.dev/github.com/gorilla/websocket): Gorilla WebSocket は、WebSocket プロトコルの [Go](https://go.dev/) による実装です。
 
 ## 関連トピック
 
@@ -55,17 +57,14 @@ slug: Web/API/WebSockets_API
 
 ## 仕様書
 
-| 仕様書                                                                                            |
-| ------------------------------------------------------------------------------------------------- |
-| [HTML Living Standard # network](https://html.spec.whatwg.org/multipage/web-sockets.html#network) |
-| [RFC 6455, The WebSocket Protocol](https://datatracker.ietf.org/doc/html/rfc6455)                 |
+{{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.WebSocket")}}
+{{Compat}}
 
 ## 関連情報
 
 - [RFC 6455 — The WebSocket Protocol](https://datatracker.ietf.org/doc/html/rfc6455)
-- [WebSocket API Specification](https://www.w3.org/TR/websockets/)
+- [WebSocket API Specification](https://websockets.spec.whatwg.org/)
 - [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events)

From 5b2ccb8114138062ad50edf0a411f14b5cc48ffa Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 16 Sep 2023 00:09:13 +0900
Subject: [PATCH 029/268] =?UTF-8?q?2022/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.md                                  | 50 ++++++++-----------
 1 file changed, 20 insertions(+), 30 deletions(-)

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 42461deeaa145c..7b6d08760472ad 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,6 +1,8 @@
 ---
 title: WebSocket クライアントアプリケーションの記述
 slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+l10n:
+  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
 ---
 
 {{APIRef("Websockets API")}}
@@ -30,7 +32,7 @@ webSocket = new WebSocket(url, protocols);
 
 ### 接続エラー
 
-接続中にエラーが発生した場合、最初に `error` という名前の単純なイベントが {{domxref("WebSocket")}} オブジェクトに送信され（その結果、その {{domxref("WebSocket.onerror", "onerror")}} ハンドラーが呼び出されます）、次に {{domxref("CloseEvent")}} が `WebSocket` オブジェクトに送信され（{{domxref("WebSocket.onclose", "onclose")}} ハンドラーが呼び出されます）接続の終了の理由を示します。
+接続中にエラーが発生した場合、最初に `error` という名前の単純なイベントが {{domxref("WebSocket")}} オブジェクトに送信され（その結果、その {{domxref("WebSocket/error_event", "onerror")}} ハンドラーが呼び出されます）、次に {{domxref("CloseEvent")}} が `WebSocket` オブジェクトに送信され（{{domxref("WebSocket/close_event", "onclose")}} ハンドラーが呼び出されます）接続の終了の理由を示します。
 
 ブラウザーは {{domxref("CloseEvent")}} 経由で、コンソールにも [RFC 6455 第 7.4 節]で定義されている終了コードと同時に、もっと説明的なエラーメッセージを出力するができます。
 
@@ -39,7 +41,7 @@ webSocket = new WebSocket(url, protocols);
 この簡単な例では新しい WebSocket を作成し、 `wss://www.example.com/socketserver` のサーバーに接続します。この例では、ソケットのリクエストで "protocolOne" のカスタムプロトコルが指定されていますが、省略することもできます。
 
 ```js
-var exampleSocket = new WebSocket(
+const exampleSocket = new WebSocket(
   "wss://www.example.com/socketserver",
   "protocolOne",
 );
@@ -50,7 +52,7 @@ var exampleSocket = new WebSocket(
 接続を開き、サポートしているプロトコルについて柔軟に対応したい場合は、プロトコルの配列を指定することができます。
 
 ```js
-var exampleSocket = new WebSocket("wss://www.example.com/socketserver", [
+const exampleSocket = new WebSocket("wss://www.example.com/socketserver", [
   "protocolOne",
   "protocolTwo",
 ]);
@@ -70,10 +72,10 @@ exampleSocket.send("Here's some text that the server is urgently awaiting!");
 
 データは文字列、 {{ domxref("Blob") }}、 {{jsxref("ArrayBuffer")}} のいずれかで送信することができます。
 
-接続の確立は非同期であり、失敗しやすいため、 `send()` メソッドの呼び出しが WebSocket オブジェクトの作成直後に成功するという保証はありません。データの送信を試みるのは、少なくともいったん接続が確立してからでなければならないので、作業を行うための {{domxref("WebSocket.onopen", "onopen")}} イベントハンドラーを定義してその中で行います。
+接続の確立は非同期であり、失敗しやすいため、 `send()` メソッドの呼び出しが WebSocket オブジェクトの作成直後に成功するという保証はありません。データの送信を試みるのは、少なくともいったん接続が確立してからでなければならないので、作業を行うための {{domxref("WebSocket/open_event", "onopen")}} イベントハンドラーを定義してその中で行います。
 
 ```js
-exampleSocket.onopen = function (event) {
+exampleSocket.onopen = (event) => {
   exampleSocket.send("Here's some text that the server is urgently awaiting!");
 };
 ```
@@ -86,7 +88,7 @@ exampleSocket.onopen = function (event) {
 // Send text to all users through the server
 function sendText() {
   // Construct a msg object containing the data the server needs to process the message from the chat client.
-  var msg = {
+  const msg = {
     type: "message",
     text: document.getElementById("text").value,
     id: clientID,
@@ -103,10 +105,10 @@ function sendText() {
 
 ## サーバーからのメッセージの受信
 
-WebSockets はイベント駆動型 API です。メッセージを受信すると、 `message` イベント `WebSocket` オブジェクトに送信されます。これを処理するには、 `message` イベントのイベントリスナーを追加するか、 {{domxref("WebSocket.onmessage", "onmessage")}} イベントハンドラーを使用するかします。受信データの待ち受けを開始するには、次のようにします。
+WebSockets はイベント駆動型 API です。メッセージを受信すると、 `message` イベント `WebSocket` オブジェクトに送信されます。これを処理するには、 `message` イベントのイベントリスナーを追加するか、 {{domxref("WebSocket/message_event", "onmessage")}} イベントハンドラーを使用するかします。受信データの待ち受けを開始するには、次のようにします。
 
 ```js
-exampleSocket.onmessage = function (event) {
+exampleSocket.onmessage = (event) => {
   console.log(event.data);
 };
 ```
@@ -122,12 +124,12 @@ exampleSocket.onmessage = function (event) {
 これらの受信メッセージを解釈するコードは、次のようになります。
 
 ```js
-exampleSocket.onmessage = function (event) {
-  var f = document.getElementById("chatbox").contentDocument;
-  var text = "";
-  var msg = JSON.parse(event.data);
-  var time = new Date(msg.date);
-  var timeStr = time.toLocaleTimeString();
+exampleSocket.onmessage = (event) => {
+  const f = document.getElementById("chatbox").contentDocument;
+  let text = "";
+  const msg = JSON.parse(event.data);
+  const time = new Date(msg.date);
+  const timeStr = time.toLocaleTimeString();
 
   switch (msg.type) {
     case "id":
@@ -135,28 +137,16 @@ exampleSocket.onmessage = function (event) {
       setUsername();
       break;
     case "username":
-      text =
-        "<b>User <em>" +
-        msg.name +
-        "</em> signed in at " +
-        timeStr +
-        "</b><br>";
+      text = `User <em>${msg.name}</em> signed in at ${timeStr}<br>`;
       break;
     case "message":
-      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      text = `(${timeStr}) ${msg.name} : ${msg.text} <br>`;
       break;
     case "rejectusername":
-      text =
-        "<b>Your username has been set to <em>" +
-        msg.name +
-        "</em> because the name you chose is in use.</b><br>";
+      text = `Your username has been set to <em>${msg.name}</em> because the name you chose is in use.<br>`;
       break;
     case "userlist":
-      var ul = "";
-      for (i = 0; i < msg.users.length; i++) {
-        ul += msg.users[i] + "<br>";
-      }
-      document.getElementById("userlistbox").innerHTML = ul;
+      document.getElementById("userlistbox").innerHTML = msg.users.join("<br>");
       break;
   }
 

From a1a2c748af16a59b444da032895735815709fc41 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 16 Sep 2023 00:17:30 +0900
Subject: [PATCH 030/268] =?UTF-8?q?2022/07/25=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.md                                  |  52 ++---
 .../writing_websocket_server/index.md         | 205 +++++++++---------
 .../writing_websocket_servers/index.md        |  14 +-
 3 files changed, 137 insertions(+), 134 deletions(-)

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 c9462435fb2f7d..885a436beb246d 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,15 +1,17 @@
 ---
-title: Java で WebSocket サーバーを記述する
+title: Java による WebSocket サーバーの記述
 slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
 
-## はじめに
+{{DefaultAPISidebar("Websockets API")}}
 
 この例では、Oracle Java を使用して WebSocket API サーバーを作成する方法を示します。
 
 他のサーバーサイドの言語を使用して WebSocket サーバーを作成することもできますが、この例では Oracle Java を使用してサンプルコードを簡略化しています。
 
-このサーバーは [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455rfc6455) に準拠しているため、 Chrome バージョン 16、Firefox 11、IE 10 以降の接続のみを処理します。
+このサーバーは [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455) に準拠しているため、 Chrome バージョン 16、Firefox 11、IE 10 以降の接続のみを処理します。
 
 ## 最初のステップ
 
@@ -17,9 +19,7 @@ WebSocket は [TCP (伝送制御プロトコル)](http://en.wikipedia.org/wiki/T
 
 ### ServerSocket
 
-コンストラクター:
-
-ServerSocket`(int port)`
+`ServerSocket` コンストラクターは、単一の引数 `port` を `int` 型で取ります。
 
 ServerSocket クラスをインスタンス化すると、port 引数で指定したポート番号にバインドされます。
 
@@ -42,23 +42,19 @@ public class WebSocket {
   public static void main(String[] args) throws IOException, NoSuchAlgorithmException {
     ServerSocket server = new ServerSocket(80);
     try {
-      System.out.println("Server has started on 127.0.0.1:80.\r\nWaiting for a connection...");
+      System.out.println("Server has started on 127.0.0.1:80.\r\nWaiting for a connection…");
       Socket client = server.accept();
       System.out.println("A client connected.");
 ```
 
-### Socket
-
-メソッド:
+### Socket のメソッド
 
-- `java.net.`[Socket](https://docs.oracle.com/javase/jp/8/docs/api/java/net/Socket.html) `getInputStream()`
+- `java.net.Socket.getInputStream()`
   このソケットの入力ストリームを返します。
-- `java.net.`[Socket](https://docs.oracle.com/javase/jp/8/docs/api/java/net/Socket.html) `getOutputStream`
+- `java.net.Socket.getOutputStream()`
   このソケットの出力ストリームを返します。
 
-### OutputStream
-
-メソッド:
+### OutputStream のメソッド
 
 ```java
 write(byte[] b, int off, int len)
@@ -66,11 +62,9 @@ write(byte[] b, int off, int len)
 
 指定された byte 配列からオフセット `off` で始まる `len` バイトをこの出力ストリームに書き込みます。
 
-### InputStream
+### InputStream のメソッド
 
-メソッド:
-
-```cpp
+```java
 read(byte[] b, int off, int len)
 ```
 
@@ -122,24 +116,24 @@ if (get.find()) {
 
 "abcdef" を送信すると、次のバイトが得られます。
 
-```
+```plain
 129 134 167 225 225 210 198 131 130 182 194 135
 ```
 
-\- 129:
+- 129:
 
-| FIN (これがメッセージ全体であるかどうか) | RSV1 | RSV2 | RSV3 | Opcode   |
-| ---------------------------------------- | ---- | ---- | ---- | -------- |
-| 1                                        | 0    | 0    | 0    | 0x1=0001 |
+  | FIN (これがメッセージ全体であるかどうか) | RSV1 | RSV2 | RSV3 | Opcode   |
+  | ---------------------------------------- | ---- | ---- | ---- | -------- |
+  | 1                                        | 0    | 0    | 0    | 0x1=0001 |
 
-FIN: メッセージをフレームで送ることができますが、単純化します。
-Opcode _0x1_ はテキストであることを意味します。 [Opcode の完全なリスト](https://datatracker.ietf.org/doc/html/rfc6455#section-5.2)
+  FIN: メッセージをフレームで送ることができますが、単純化します。
+  Opcode _0x1_ はテキストであることを意味します。 [Opcode の完全なリスト](https://datatracker.ietf.org/doc/html/rfc6455#section-5.2)
 
-\- 134:
+  - 134:
 
-2 番目のバイトから 128 を引いた値が 0 〜 125 の場合、これはメッセージの長さです。 126 の場合は、次の 2 バイト (16 ビット符号なし整数)、127 の場合、次の 8 バイト (64 ビット符号なし整数、最上位ビットは 0 でなければならない) が長さです。
+  2 番目のバイトから 128 を引いた値が 0 〜 125 の場合、これはメッセージの長さです。 126 の場合は、次の 2 バイト (16 ビット符号なし整数)、127 の場合、次の 8 バイト (64 ビット符号なし整数、最上位ビットは 0 でなければならない) が長さです。
 
-> **メモ:** 最初のビットは常に 1 なので、 128 を取ることができます。
+  > **メモ:** 最初のビットは常に 1 なので、 128 を取ることができます。
 
 - 167、225、225、および 210 はデコードするキーのバイトです。それは毎回変わります。
 
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 bf94d7e5d5656d..9a957d6e48c369 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,9 +1,11 @@
 ---
-title: C# で WebSocket サーバーを記述する
+title: C# による WebSocket サーバーの記述
 slug: Web/API/WebSockets_API/Writing_WebSocket_server
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
 
-## はじめに
+{{DefaultAPISidebar("Websockets API")}}
 
 WebSocket API を使用したい場合は、サーバーを所有していると便利です。この記事では、C# で記述する方法を説明します。どんなサーバーサイドの言語でも行うことができますが、わかりやすく理解しやすいように、 Microsoft の言語を選択しました。
 
@@ -11,7 +13,7 @@ WebSocket API を使用したい場合は、サーバーを所有していると
 
 ## 最初のステップ
 
-WebSocket は [TCP (伝送制御プロトコル)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol) 接続を介して通信します。幸いにも、C# には [TcpListener](https://msdn.microsoft.com/library/system.net.sockets.tcplistener.aspx) クラスがあり、その名前が示すようにします。これは System.Net.Sockets 名前空間にあります。
+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 名前空間にあります。
 
 > **メモ:** 書く量を減らすために名前空間を `using` キーワードに含めることをお勧めします。毎回完全な名前空間を入力することなく、名前空間のクラスを使用できます。
 
@@ -45,7 +47,7 @@ class Server {
         TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
 
         server.Start();
-        Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection...", Environment.NewLine);
+        Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection…", Environment.NewLine);
 
         TcpClient client = server.AcceptTcpClient();
 
@@ -70,17 +72,17 @@ class Server {
 
 メソッド:
 
-```cs
-Write(Byte[] buffer, int offset, int size)
-```
+- buffer からバイトを書き込み、offset と size はメッセージの長さを決定します。
 
-buffer からバイトを書き込み、offset と size はメッセージの長さを決定します。
+  ```cs
+  Write(byte[] buffer, int offset, int size)
+  ```
 
-```cs
-Read(Byte[] buffer, int offset, int size)
-```
+- `buffer` を読み込みます。 `offset` と `size` はメッセージの長さを決定します。
 
-buffer を読み込みます。offset と size はメッセージの長さを決定します。
+  ```cs
+  Read(byte[] buffer, int offset, int size)
+  ```
 
 例を拡張してみましょう。
 
@@ -95,7 +97,7 @@ NetworkStream stream = client.GetStream();
 while (true) {
     while (!stream.DataAvailable);
 
-    Byte[] bytes = new Byte[client.Available];
+    byte[] bytes = new byte[client.Available];
 
     stream.Read(bytes, 0, bytes.Length);
 }
@@ -116,7 +118,7 @@ while(client.Available < 3)
    // wait for enough bytes to be available
 }
 
-Byte[] bytes = new Byte[client.Available];
+byte[] bytes = new byte[client.Available];
 
 stream.Read(bytes, 0, bytes.Length);
 
@@ -140,11 +142,11 @@ if (Regex.IsMatch(data, "^GET")) {
 4. HTTP レスポンスの "Sec-WebSocket-Accept" レスポンスヘッダーの値としてハッシュを書き戻します
 
 ```cs
- if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
+if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
 {
     const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
 
-    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol
+    byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol
         + "Connection: Upgrade" + eol
         + "Upgrade: websocket" + eol
         + "Sec-WebSocket-Accept: " + Convert.ToBase64String(
@@ -166,7 +168,7 @@ if (Regex.IsMatch(data, "^GET")) {
 
 "MDN" を送信すると、次のバイト列が得られます。
 
-```
+```plain
 129 131 61 84 35 6 112 16 109
 ```
 
@@ -206,12 +208,12 @@ D は復号されたメッセージ配列、E は符号化されたメッセー
 C# の例です。
 
 ```cs
-Byte[] decoded = new Byte[3];
-Byte[] encoded = new Byte[3] {112, 16, 109};
-Byte[] mask = new Byte[4] {61, 84, 35, 6};
+byte[] decoded = new byte[3];
+byte[] encoded = new byte[3] {112, 16, 109};
+byte[] mask = new byte[4] {61, 84, 35, 6};
 
 for (int i = 0; i < encoded.Length; i++) {
-    decoded[i] = (Byte)(encoded[i] ^ mask[i % 4]);
+    decoded[i] = (byte)(encoded[i] ^ mask[i % 4]);
 }
 ```
 
@@ -237,7 +239,7 @@ class Server {
         var server = new TcpListener(IPAddress.Parse(ip), port);
 
         server.Start();
-        Console.WriteLine("Server has started on {0}:{1}, Waiting for a connection...", ip, port);
+        Console.WriteLine("Server has started on {0}:{1}, Waiting for a connection…", ip, port);
 
         TcpClient client = server.AcceptTcpClient();
         Console.WriteLine("A client connected.");
@@ -250,7 +252,7 @@ class Server {
             while (client.Available < 3); // match against "get"
 
             byte[] bytes = new byte[client.Available];
-            stream.Read(bytes, 0, client.Available);
+            stream.Read(bytes, 0, bytes.Length);
             string s = Encoding.UTF8.GetString(bytes);
 
             if (Regex.IsMatch(s, "^GET", RegexOptions.IgnoreCase)) {
@@ -276,30 +278,31 @@ 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
-                    msglen = bytes[1] - 128, // & 0111 1111
                     offset = 2;
+                ulong msglen = bytes[1] & 0b01111111;
 
                 if (msglen == 126) {
-                    // was ToUInt16(bytes, offset) but the result is incorrect
+                    // bytes are reversed because websocket will print them in Big-Endian, whereas
+                    // BitConverter will want them arranged in little-endian on windows
                     msglen = BitConverter.ToUInt16(new byte[] { bytes[3], bytes[2] }, 0);
                     offset = 4;
                 } else if (msglen == 127) {
-                    Console.WriteLine("TODO: msglen == 127, needs qword to store msglen");
-                    // i don't really know the byte order, please edit this
-                    // msglen = BitConverter.ToUInt64(new byte[] { bytes[5], bytes[4], bytes[3], bytes[2], bytes[9], bytes[8], bytes[7], bytes[6] }, 0);
-                    // offset = 10;
+                    // To test the below code, we need to manually buffer larger messages — since the NIC's autobuffering
+                    // may be too latency-friendly for this code to run (that is, we may have only some of the bytes in this
+                    // websocket frame available through client.Available).
+                    msglen = BitConverter.ToUInt64(new byte[] { bytes[9], bytes[8], bytes[7], bytes[6], bytes[5], bytes[4], bytes[3], bytes[2] },0);
+                    offset = 10;
                 }
 
-                if (msglen == 0)
+                if (msglen == 0) {
                     Console.WriteLine("msglen == 0");
-                else if (mask) {
+                } else if (mask) {
                     byte[] decoded = new byte[msglen];
                     byte[] masks = new byte[4] { bytes[offset], bytes[offset + 1], bytes[offset + 2], bytes[offset + 3] };
                     offset += 4;
 
-                    for (int i = 0; i < msglen; ++i)
+                    for (ulong i = 0; i < msglen; ++i)
                         decoded[i] = (byte)(bytes[offset + i] ^ masks[i % 4]);
 
                     string text = Encoding.UTF8.GetString(decoded);
@@ -318,73 +321,75 @@ class Server {
 
 ```html
 <!doctype html>
-<style>
-  textarea {
-    vertical-align: bottom;
-  }
-  #output {
-    overflow: auto;
-  }
-  #output > p {
-    overflow-wrap: break-word;
-  }
-  #output span {
-    color: blue;
-  }
-  #output span.error {
-    color: red;
-  }
-</style>
-<h2>WebSocket Test</h2>
-<textarea cols="60" rows="6"></textarea>
-<button>send</button>
-<div id="output"></div>
-<script>
-  // http://www.websocket.org/echo.html
-
-  var button = document.querySelector("button"),
-    output = document.querySelector("#output"),
-    textarea = document.querySelector("textarea"),
-    // wsUri = "ws://echo.websocket.org/",
-    wsUri = "ws://127.0.0.1/",
-    websocket = new WebSocket(wsUri);
-
-  button.addEventListener("click", onClickButton);
-
-  websocket.onopen = function (e) {
-    writeToScreen("CONNECTED");
-    doSend("WebSocket rocks");
-  };
-
-  websocket.onclose = function (e) {
-    writeToScreen("DISCONNECTED");
-  };
-
-  websocket.onmessage = function (e) {
-    writeToScreen("<span>RESPONSE: " + e.data + "</span>");
-  };
-
-  websocket.onerror = function (e) {
-    writeToScreen("<span class=error>ERROR:</span> " + e.data);
-  };
-
-  function doSend(message) {
-    writeToScreen("SENT: " + message);
-    websocket.send(message);
-  }
-
-  function writeToScreen(message) {
-    output.insertAdjacentHTML("afterbegin", "<p>" + message + "</p>");
-  }
-
-  function onClickButton() {
-    var text = textarea.value;
-
-    text && doSend(text);
-    textarea.value = "";
-    textarea.focus();
-  }
-</script>
+<html lang="en">
+  <style>
+    textarea {
+      vertical-align: bottom;
+    }
+    #output {
+      overflow: auto;
+    }
+    #output > p {
+      overflow-wrap: break-word;
+    }
+    #output span {
+      color: blue;
+    }
+    #output span.error {
+      color: red;
+    }
+  </style>
+  <body>
+    <h2>WebSocket Test</h2>
+    <textarea cols="60" rows="6"></textarea>
+    <button>send</button>
+    <div id="output"></div>
+  </body>
+  <script>
+    // http://www.websocket.org/echo.html
+    const button = document.querySelector("button");
+    const output = document.querySelector("#output");
+    const textarea = document.querySelector("textarea");
+    const wsUri = "ws://127.0.0.1/";
+    const websocket = new WebSocket(wsUri);
+
+    button.addEventListener("click", onClickButton);
+
+    websocket.onopen = (e) => {
+      writeToScreen("CONNECTED");
+      doSend("WebSocket rocks");
+    };
+
+    websocket.onclose = (e) => {
+      writeToScreen("DISCONNECTED");
+    };
+
+    websocket.onmessage = (e) => {
+      writeToScreen(`<span>RESPONSE: ${e.data}</span>`);
+    };
+
+    websocket.onerror = (e) => {
+      writeToScreen(`<span class="error">ERROR:</span> ${e.data}`);
+    };
+
+    function doSend(message) {
+      writeToScreen(`SENT: ${message}`);
+      websocket.send(message);
+    }
+
+    function writeToScreen(message) {
+      output.insertAdjacentHTML("afterbegin", `<p>${message}</p>`);
+    }
+
+    function onClickButton() {
+      const text = textarea.value;
+
+      text && doSend(text);
+      textarea.value = "";
+      textarea.focus();
+    }
+  </script>
+</html>
 ```
 
 ## 関連情報
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 d7b081d804908b..99106db78f38b5 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,6 +1,8 @@
 ---
 title: WebSocket サーバーの記述
 slug: Web/API/WebSockets_API/Writing_WebSocket_servers
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
 
 {{APIRef("Websockets API")}}
@@ -120,12 +122,14 @@ 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
-var DECODED = "";
-for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+const MASK = [1, 2, 3, 4]; // 4 バイトマスク
+const ENCODED = [105, 103, 111, 104, 110]; // encoded string "hello"
+
+// デコードする内容のバイト配列を作成
+const DECODED = Uint8Array.from(ENCODED, (elt, i) => elt ^ MASK[i % 4]); // マスクの XOR を実行
 ```
 
 これで、アプリケーションに応じて **DECODED** が何を意味するのかを理解することができます。
@@ -136,7 +140,7 @@ FIN フィールドとオペコードフィールドは連携して、別々の
 
 オペコードはフレームの意味を示しています。`0x1` の場合、ペイロードはテキストです。`0x2` の場合、ペイロードはバイナリデータです。ただし、`0x0` の場合、フレームは継続フレームです。つまりサーバーはフレームのペイロードをそのクライアントから受信した最後のフレームに連結する必要があります。ここでは、サーバーがテキストメッセージを送信するクライアントに反応する概略を示します。第 1 のメッセージは単一のフレームで送信され、第 2 のメッセージは3つのフレームにわたって送信されます。FIN とオペコードの詳細は、クライアントに対してのみ表示されます。
 
-```
+```plain
 Client: FIN=1, opcode=0x1, msg="hello"
 Server: (process complete message immediately) Hi.
 Client: FIN=0, opcode=0x1, msg="and a"

From 8fb8313b4831a76be71bb6b7519f87483bbaecbd Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 16 Sep 2023 00:43:02 +0900
Subject: [PATCH 031/268] =?UTF-8?q?2023/09/14=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.md                                  | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md

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
new file mode 100644
index 00000000000000..cf05008b838cec
--- /dev/null
+++ b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
@@ -0,0 +1,130 @@
+---
+title: WebSocket サーバーを JavaScript (Deno) で書く
+slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno
+l10n:
+  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
+---
+
+{{DefaultAPISidebar("Websockets API")}}
+
+この例では、 Deno を使用して WebSocket API サーバーを作成する方法を、付随するウェブページと共に示します。
+
+Deno は JavaScript ランタイムで、 TypeScript のコンパイルとオンザフライでのキャッシュに対応しています。 Deno はフォーマッター、リンター、テストランナーなどを持ち、また多くのウェブ API も実装しています。ウェブ標準に準拠するために、 Deno 固有の API はすべて `Deno` 名前空間の下に実装されています。
+
+[Deno のウェブサイト](https://deno.com/)では、 Deno のインストール方法を提供しています。
+
+執筆時点での Deno のバージョンは `1.36` です。
+
+## コード
+
+コードはサーバー用とクライアント用の 2 つのファイルに格納します。
+
+### サーバー
+
+`main.js` ファイルを作成します。このファイルにはクライアントに HTML を提供する単純な HTTP サーバーのコードを格納します。
+
+```js
+Deno.serve({
+  port: 80,
+  handler: async (request) => {
+    // If the request is a websocket upgrade,
+    // we need to use the Deno.upgradeWebSocket helper
+    if (request.headers.get("upgrade") === "websocket") {
+      const { socket, response } = Deno.upgradeWebSocket(request);
+
+      socket.onopen = () => {
+        console.log("CONNECTED");
+      };
+      socket.onmessage = (event) => {
+        console.log(`RECEIVED: ${event.data}`);
+        socket.send("pong");
+      };
+      socket.onclose = () => console.log("DISCONNECTED");
+      socket.onerror = (error) => console.error("ERROR:", error);
+
+      return response;
+    } else {
+      // If the request is a normal HTTP request,
+      // we serve the client HTML file.
+      const file = await Deno.open("./index.html", { read: true });
+      return new Response(file.readable);
+    }
+  },
+});
+```
+
+`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 サーバーを簡単に設定するための上位インターフェイスです。これがなければ、コードは次のように見ていくことになります。
+
+```js
+for await (const conn of Deno.listen({ port: 80 })) {
+  for await (const { request, respondWith } of Deno.serveHttp(conn)) {
+    respondWith(handler(request));
+  }
+}
+```
+
+### クライアント
+
+`index.html` ファイルを作成します。このファイルには、接続が確立してから 5 秒ごとにサーバーに ping を送信するスクリプトがあります。
+
+```html
+<!doctype html>
+<h2>WebSocket Test</h2>
+<p>Sends a ping every five seconds</p>
+<div id="output"></div>
+<script>
+  const wsUri = "ws://127.0.0.1/";
+  const output = document.querySelector("#output");
+  const websocket = new WebSocket(wsUri);
+  let pingInterval;
+
+  function writeToScreen(message) {
+    output.insertAdjacentHTML("afterbegin", `<p>${message}</p>`);
+  }
+
+  function sendMessage(message) {
+    writeToScreen(`SENT: ${message}`);
+    websocket.send(message);
+  }
+
+  websocket.onopen = (e) => {
+    writeToScreen("CONNECTED");
+    sendMessage("ping");
+    pingInterval = setInterval(() => {
+      sendMessage("ping");
+    }, 5000);
+  };
+
+  websocket.onclose = (e) => {
+    writeToScreen("DISCONNECTED");
+    clearInterval(pingInterval);
+  };
+
+  websocket.onmessage = (e) => {
+    writeToScreen(`RECEIVED: ${e.data}`);
+  };
+
+  websocket.onerror = (e) => {
+    writeToScreen(`ERROR: ${e.data}`);
+  };
+</script>
+```
+
+## コードの実行
+
+これら 2 つのファイルを用いて、 Deno を使用してアプリを実行します。
+
+```sh
+deno run --allow-net=0.0.0.0:80 --allow-read=./index.html main.js
+```
+
+Deno では、ホストマシン上でアクセスするための明示的な権限を要求します。
+
+- `--allow-net=0.0.0.0:80` はアプリが localhost を 80 番ポートで使用することを許可します。
+- `--allow-read=./index.html` はクライアントが HTML ファイルにアクセスできるようにします。
+
+## 関連情報
+
+- [WebSocket サーバーを書く](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)

From 776d51952cde85b830e7ad561c6861bc5981a8d8 Mon Sep 17 00:00:00 2001
From: Alexander <alexander_belial999@hotmail.com>
Date: Tue, 19 Sep 2023 11:59:04 -0600
Subject: [PATCH 032/268] es: Update
 writing_guidelines/experimental_deprecated_obsolete (#15803)

* es: Update writing_guidelines/experimental_deprecated_obsolete

* Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../experimental_deprecated_obsolete/index.md | 198 +++++++-----------
 1 file changed, 77 insertions(+), 121 deletions(-)

diff --git a/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md b/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
index 275121f6bbead7..04ce87dc14b10a 100644
--- a/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
+++ b/files/es/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md
@@ -1,164 +1,120 @@
 ---
-title: MDN convenciones y definiciones
+title: Experimental, desaprobado y obsoleto
 slug: MDN/Writing_guidelines/Experimental_deprecated_obsolete
+l10n:
+  sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e
 ---
 
 {{MDNSidebar}}
 
-Este artículo define algunas convenciones y definiciones que se usan comúnmente en MDN, que pueden no ser obvias para algunas personas cuando las encuentran en la documentación.
+Estos términos se asocian comúnmente con tecnologías y especificaciones y se utilizan en MDN Web Docs para etiquetar el estado de una tecnología. Para la definición de estos términos, MDN Web Docs se alinea con el repositorio [Browser Compatibility Data (BCD)](https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md#status-information).
+Estos términos se describen a continuación en el contexto de su uso en MDN Web Docs.
 
-## Definiciones
+## Experimental
 
-### Desaprobado y obsoleto
+Cuando una tecnología se describe como experimental en MDN Web Docs, significa que la tecnología es emergente e inmadura y actualmente está _en proceso_ de ser añadida a la plataforma web (o de ser considerada para su adición).
+Marcar una tecnología como experimental indica que los lectores deben pensar cuidadosamente antes de usar esa tecnología en cualquier tipo de proyecto en producción (es decir, un proyecto que no sea solo una demostración o un experimento). Se [anima a los lectores a probar funciones experimentales](https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md#status-information) y proporcionar comentarios a los proveedores de navegadores y autores de estándares.
 
-**Desaprobado** y **obsoleto** son términos comunes asociados con tecnologías y especificaciones, pero ¿qué significan?
+Para una tecnología marcada como **experimental**, se aplican una o más de las siguientes condiciones:
 
-- Desaprobado
-  - En MDN, el término **desaprobado** se usa para marcar una API o tecnología que ya no se recomienda, pero que aún está implementada y puede funcionar. Recientemente, la hemos actualizado a la definición utilizada en nuestro [proyecto de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information), que esa "característica ya no se recomienda. Es posible que se elimine en el futuro o que solo se conserve por motivos de compatibilidad. Evita el uso de esta funcionalidad."
-- Obsoleto
-  - En MDN, el término **obsoleto** se utiliza para marcar una API o tecnología que no solo ya no se recomienda, sino que ya no se implementa en los navegadores. Sin embargo, esto fue confuso — es similar a desaprobado, y la distinción no es muy útil (aún no debes usarlo en un sitio de producción). Por lo tanto, ya no la usamos, y cualquier instancia con la que te encuentres se debe eliminar/reemplazar por desaprobada.
+- Se implementa y habilita de forma predeterminada en la compilación de la versión de **solo un** motor de renderizado de los navegadores principales modernos.
+- Solo se admite a través de cambios de configuración como preferencias o parámetros, independientemente del número de motores de renderizado admitidos.
+- Es probable que su especificación definitiva cambie significativamente en formas incompatibles con versiones anteriores (es decir, puede romper el código existente que se basa en la característica).
 
-### Experimental
+> **Nota:** Una función que solo se publica en un motor de renderizado se sigue considerando experimental, incluso si está disponible en compilaciones de vista previa de otros motores de renderizado (o estableciendo una preferencia o indicador).
 
-**Experimental** puede significar diferentes cosas según el contexto en el que lo escuches o lo leas. Cuando una tecnología se describe como experimental en MDN, significa que la tecnología es incipiente e inmadura, y actualmente está en proceso de ser agregada a la plataforma web (o considerada para agregarla).
+El estado **experimental** de una tecnología puede caducar si se cumple una o más de las siguientes condiciones:
 
-Uno o ambos de estos serán ciertos:
+- Es compatible de forma predeterminada en **dos o más** de los principales motores de renderizado de los navegadores.
+- Es compatible de forma predeterminada con un único motor de renderizado de navegador durante dos o más años y no sufre cambios importantes.
+- Es poco probable que su especificación definitiva cambie de manera que rompa la compatibilidad.
 
-- Está implementado y habilitado de forma predeterminada en menos de dos de los principales navegadores modernos.
-- Su especificación definitoria no es estable y es probable que cambie significativamente. Por lo tanto, su sintaxis y comportamiento están sujetos a cambios en futuras versiones de navegadores a medida que cambie la especificación.
+Para ver ejemplos de estas condiciones, consulte la documentación de [bandera experimental](https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/index.md#setting-experimental) de BCD.
 
-Si una o ambas de estas definiciones es cierta, entonces debes pensar detenidamente antes de comenzar a usar esa tecnología en cualquier tipo de proyecto de producción (es decir, no solo en una demostración o experimento). Consulta también la definición de experimental en nuestro [proyecto de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information).
+Usualmente, si una tecnología es soportada a través de varios de los navegadores principales, la especificación será estable, pero este no es siempre el caso.
+Por otro lado, algunas tecnologías pueden tener una especificación estable, pero no tienen soporte nativo en los navegadores. [IMSC](/es/docs/Related/IMSC), por ejemplo, se utiliza mediante un polyfill de JavaScript. <!-- need to revisit link -->
 
-Por el contrario, un elemento ya no es experimental cuando:
+Una característica o tecnología que forma parte de una especificación activa o un proceso de estandarización y no está marcada como **obsoleta** se dice que está en **vía de estandarización**.
 
-- Está implementado en dos o más navegadores principales; o
-- Su especificación definitoria es estable y es poco probable que cambie.
+## Desaprobada
 
-El _or_ es importante aquí — por lo general, si una tecnología es compatible con varios navegadores importantes, la especificación será estable, pero no siempre es así. Y algunas tecnologías tendrán una especificación estable y se usarán bien, pero no tendrán soporte nativo en los navegadores ([IMSC](/es/docs/Related/IMSC), por ejemplo).
+El término **desaprobado** en MDN Web Docs se utiliza para marcar una API o tecnología que ya no se recomienda. Una API o tecnología obsoleta podría eliminarse en el futuro o podría conservarse solo por motivos de compatibilidad y seguir funcionando. Recomendamos evitar el uso de las funcionalidades marcadas como desaprobadas.
 
-### Páginas archivadas
+Para más información en la definición de **desaprobado**, vea la [la bandera desaprobado](https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/index.md#encuadre-deprecated) de la documentación de BCD.
 
-Las páginas archivadas son páginas que se almacenan en el [Archivo de contenido obsoleto](/es/docs/Archive) de MDN. Estas páginas contienen información lo suficientemente desactualizada como para que ya no sea directamente útil para nadie.
+## Obsoleto
 
-Por lo general, estas se refieren a proyectos de Mozilla que han sido descontinuados y ya no se debe confiar en ellos. Pero no las eliminamos simplemente porque forman un registro histórico útil, y algunos de los patrones o ideas contenidos en ellos podrían ser útiles para trabajos futuros. Un buen ejemplo es el [proyecto B2G (Firefox OS)](/es/docs/Archive/B2G_OS).
+En MDN Web Docs, el término **obsoleto** se usaba históricamente para indicar una API o tecnología que ya no solo ya no se recomienda, sino que ya no se implementa en los navegadores.
+Debido a que la distinción entre **obsoleto** y **desaprobado** no es muy útil, ya no usamos el término **obsoleto** en MDN Web Docs.
 
-#### ¿Cuándo se debe archivar una página?
+> **Nota:** Si te encuentras con algún caso de **obsoleto**, debes eliminarlo o reemplazarlo con el término **desaprobado**.
 
-Una página se debe archivar si se ajusta a la descripción anterior. Para archivar una página, debes utilizar la "función Mover página" (_Avanzado > Mover este artículo_) para mover la página al árbol de páginas de archivo (/es/docs/Archive). Es posible que no tengas los permisos para usar esta función, y antes de comenzar a archivar páginas, primero debas discutirlo con la comunidad MDN; habla con nosotros en nuestro [Foro de discusión](https://discourse.mozilla.org/c/mdn).
+## Pautas para eliminar contenido
 
-### Páginas eliminadas
+A veces, durante el desarrollo de una nueva especificación o en el transcurso de la evolución de los estándares, como en HTML, se agregan nuevos elementos, métodos, propiedades, etc., a la especificación, se mantienen allí durante un tiempo y luego se eliminan. A veces esto sucede muy rápidamente, y a veces estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea difícil decidir cómo manejar la eliminación del elemento de la especificación.
 
-Las páginas eliminadas son páginas que se eliminaron explícitamente de MDN — consulta, por ejemplo, la interfaz [`SharedKeyframeList`](/es/docs/Web/API/SharedKeyframeList) y el constructor [`SharedKeyframeList()`](/es/docs/Web/API/SharedKeyframeList/SharedKeyframeList). Estas páginas contienen información que ya no es útil de ninguna manera y/o puede ser incorrecta hasta el punto en que mantenerla disponible puede ser confuso o malo para la gente.
+Aquí hay algunas pautas para ayudarlo a decidir qué hacer cuando se elimina algo de la especificación.
 
-Estas pueden ser:
+> **Nota:** A los efectos de esta discusión, la palabra "elemento" se utiliza para referirse a cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, una propiedad u otro miembro de una interfaz, y así sucesivamente.
 
-- Páginas de referencia para funciones de API que se eliminaron de la especificación antes de que se implementaran en cualquier navegador.
-- Artículos que cubren técnicas que luego se demostró que eran malas prácticas y fueron reemplazadas por mejores técnicas.
-- Artículos que contienen información que luego fue reemplazada por otros artículos de mejor calidad.
-- Artículos que contienen contenido inapropiado para MDN.
-- Traducciones antiguas, desactualizadas y difíciles de arreglar, lo que significa que la versión en inglés es preferible y comenzar una nueva traducción sería una opción más fácil.
+### Si el elemento nunca se implementó
 
-#### ¿Cuándo se debe eliminar una página?
+Si el elemento _nunca_ fue implementado en una versión de _cualquier_ navegador, ni siquiera detrás de una preferencia o un parámetro, elimine cualquier referencia al elemento de la documentación.
 
-Se debe eliminar una página si se ajusta a la descripción anterior. Para eliminar una página, debes utilizar la función "Eliminar esta página" (_Avanzado> Eliminar esta página_) para eliminar la página. Probablemente no tengas los permisos para usar esta función, y cuando pienses en eliminar páginas, primero debes discutirlo con la comunidad de MDN; habla con nosotros en nuestro [Foro de discusión](https://discourse.mozilla.org/c/mdn).
+- Si el artículo tiene alguna página de documentación que describa solo ese artículo (como {{domxref("RTCPeerConnection.close()")}}), elimina esa página.
+  Si el elemento eliminado es una interfaz, esto significa eliminar también cualquier subpágina que describa las propiedades y los métodos en esa interfaz.
+- Elimine el elemento de cualquier lista de propiedades, atributos, métodos, etc. Para los métodos de una interfaz, por ejemplo, esto significa eliminarla de la sección "Métodos" en la página de descripción general de la interfaz.
+- Busque en el texto de la página de resumen de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Elimine esas referencias, asegurándose de no dejar problemas gramaticales extraños u otros problemas con el texto. Esto puede significar no solo eliminar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del artículo es larga.
+- Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Elimine esas referencias, asegurándose de no dejar problemas gramaticales extraños u otros problemas con el texto. Esto puede significar no solo eliminar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del artículo es larga.
+- Busque en MDN Web Docs referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Es poco probable que los haya, ya que si nunca se implementó, es poco probable que se discuta ampliamente. Elimina esas menciones también.
+- Si los archivos JSON en el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) contienen datos de los elementos eliminados, elimine esos objetos del código JSON y envíe una solicitud de revisión con ese cambio, explicando el motivo en el mensaje de confirmación y la descripción. Tenga cuidado de no romper la sintaxis JSON mientras lo hace.
 
-### Cuando documentar nuevas tecnologías
+### Si el elemento se implementó en un navegador detrás de un argumento
 
-En MDN, buscamos constantemente documentar nuevas tecnologías de estándares web según corresponda. Intentamos lograr un equilibrio entre publicar la documentación lo suficientemente temprano para que los desarrolladores puedan aprender sobre las nuevas funciones tan pronto como lo necesiten y publicarla lo suficientemente tarde para que la tecnología sea madura y estable para que los documentos no necesiten actualizaciones constantes o rápida eliminación.
+Si el elemento se implementó en cualquier versión de lanzamiento de uno o más navegadores pero _solo_ detrás de una preferencia o un argumento, no lo elimine de la documentación de inmediato. En su lugar, marca el artículo como **desaprobado** de la siguiente manera:
 
-En general, nuestra definición de lo más temprano que consideraremos para documentar una nueva tecnología es:
+- Si el artículo tiene alguna página de documentación que describa solo ese artículo (como {{domxref ("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Header.ejs) a la parte superior de la página y agrega la siguiente entrada de metadato `status:`:
 
-_"Cuando la función está en una pista de estándares y se implementa en algún lugar."_
+  ```yaml
+  status:
+    - deprecated
+  ```
 
-Definitivamente deberías considerar documentar una nueva tecnología si:
+- En la página de descripción general del elemento, interfaz o API, busca la lista de elementos que incluye el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Inline.ejs) después del nombre del elemento en esa lista.
+- Buscar en el texto informativo de la página de resumen de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agregue cuadros de advertencia en los lugares apropiados con texto como "\[item] se ha eliminado de la especificación y se eliminará pronto de los navegadores. Consulta \[enlace a página] para obtener una nueva forma de hacerlo."
+- Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Añade advertencias similares.
+- Busque en MDN Web Docs referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Añade mensajes de advertencia similares allí también.
+- En algún momento en el futuro, se puede tomar la decisión de eliminar el artículo de la documentación; normalmente no lo hacemos, pero si el artículo estaba especialmente inutilizado o no era interesante, podemos decidir hacerlo.
+- Actualizar cualquier entrada relevante en el [Repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la obsolescencia de los artículos afectados.
 
-- Se especifica en un documento de especificación publicado bajo una organización de estándares confiable (como W3C, WHATWG, Khronos, IETF, etc.), que ha alcanzado un nivel razonable de estabilidad (por ejemplo, un borrador de trabajo del W3C o una recomendación candidata, o la especificación está buscando ser bastante estable a juzgar por el flujo de asuntos presentados en su contra).
-- Se implementa de manera consistente en al menos un navegador, y otros desarrolladores de navegadores muestran signos de interés (como un boleto activo o un proceso de "intención de implementar" en vigor).
+### Si el elemento se implementó en un navegador sin un parámetro
 
-Deberías tener más cuidado al documentar una nueva tecnología (pero deberías considerarla si tiene sentido) si:
+Si el elemento se implementó en una o más compilaciones de versiones de navegadores sin requerir una preferencia o un parámetro, marque el elemento como **desaprobado**, de la siguiente manera:
 
-- No tiene una especificación, o la especificación es una nota aproximada que parece estar sujeta a cambios.
-- Uno o cero navegadores lo implementan actualmente, y los navegadores que no lo admiten no muestran signos de interés en implementarlo (puedes evaluar esto preguntando a los ingenieros que trabajan en esos navegadores, buscando rastreadores de errores del navegador y listas de correo, etc.).
+- Si el artículo tiene alguna página de documentación que describa solo ese artículo (como {{domxref ("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Header.ejs) a la parte superior de la página y agrega la siguiente entrada de metadato `status:`:
 
-No debes considerar documentar una nueva tecnología si:
+  ```yaml
+  status:
+    - deprecated
+  ```
 
-- No es una tecnología expuesta a la web y/o es completamente propietaria.
-- Ya muestra signos de estar obsoleto o reemplazado por una característica similar.
+- En la página de descripción general del elemento, interfaz o API, busca la lista de elementos que incluye el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/blob/main/kumascript/macros/Deprecated_Inline.ejs) después del nombre del elemento en esa lista.
+- Buscar en el texto informativo de la página de resumen de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agregue mensajes de advertencia en los lugares apropiados con texto como "\[item] ha sido eliminado de la especificación y está desaprobado. Es posible que se elimine de los navegadores en el futuro, por lo que no debes usarlo. Consulta \[enlace a página] para obtener una nueva forma de hacerlo."
+- Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Añade advertencias similares.
+- Busque en MDN Web Docs referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Añade mensajes de advertencia similares allí también.
+- Es poco probable que estos artículos se eliminen de la documentación en el corto plazo, si es que se eliminan alguna vez.
+- Actualizar cualquier entrada relevante en el [Repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la caducidad de los artículos afectados.
 
-## Convenciones
+Utilice el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos en las pautas anteriores.
+Diferentes elementos requerirán una redacción y un manejo diferente de la situación.
+En caso de duda, no dudes en pedir consejo en las [salas de chat de MDN Web Docs](/es/docs/MDN/Community/Communication_channels#chat_rooms).
 
-### Cuando se elimina algo de la especificación
+## Pautas para documentar un conflicto de especificaciones
 
-A veces, durante el desarrollo de una nueva especificación, o en el transcurso de la evolución de los estándares como HTML, se agregan nuevos elementos, métodos, propiedades, etc. a la especificación, permanecen allí por un tiempo y luego se eliminan nuevamente. A veces, esto sucede muy rápido y, a veces, estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea complicado decidir cómo manejar la eliminación del artículo de la especificación. Aquí hay algunas pautas que te ayudarán a decidir qué hacer.
+A veces, pero rara vez, puede haber un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG). Por ejemplo, una versión puede tener una función que aparece como obsoleta, mientras que la otra no.
+En tales casos, considere cuál es la realidad, es decir, considere qué están haciendo realmente los navegadores y escriba una nota "importante" para resumir ese último estado.
+Por ejemplo, a partir de enero de 2019, el atributo global [`inputmode`](/es/docs/Web/HTML/Global_attributes/inputmode) tiene un conflicto, que se resumió así: <!--este ejemplo de advertencia de conflicto de especificaciones ya no existe en esa página. no pude encontrar ningún otro ejemplo-->
 
-> **Nota:** Para los propósitos de esta discusión, la palabra "elemento" se usa para significar cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, propiedad u otro miembro de una interfaz, etcétera.
-
-- Si el elemento _nunca_ se implementó en una versión de lanzamiento de _cualquier_ navegador, incluso detrás de una preferencia o marca, simplemente elimina cualquier referencia al elemento de la documentación.
-
-  - Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), elimina esa página. Si el elemento eliminado es una interfaz, esto significa eliminar también las subpáginas que describen las propiedades y los métodos de esa interfaz.
-  - Elimina el elemento de cualquier lista de propiedades, atributos, métodos, etc. Para los métodos de una interfaz, eso significa eliminarlo de la sección "Métodos" en la página de descripción general de la interfaz, por ejemplo.
-  - Busca en el texto de la página de descripción general para esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Elimina esas referencias, asegurándote de no dejar extraños problemas gramaticales u otros problemas con el texto. Esto puede significar no solo borrar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del elemento es extensa.
-  - Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Elimina esas referencias, asegurándote de no dejar extraños problemas gramaticales u otros problemas con el texto. Esto puede significar no solo borrar palabras, sino reescribir una oración o párrafo para que tenga más sentido. También puede significar eliminar secciones enteras de contenido si la descripción del uso del elemento es extensa.
-  - Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Es poco probable que las haya, ya que si nunca se implementó, es poco probable que se discuta ampliamente. Elimina también esas menciones.
-  - Si el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) contienen datos de los elementos eliminados, elimina esos objetos del código JSON y envía una SE con ese cambio, explicando por qué en el mensaje de confirmación y la descripción de la SE. Ten cuidado de no romper la sintaxis JSON mientras haces esto.
-
-- Si el elemento se implementó en cualquier versión de lanzamiento de uno o más navegadores, pero _solo_ detrás de una preferencia o marca, no elimines el elemento de la documentación inmediatamente. En su lugar, marca el artículo como obsoleto de la siguiente manera:
-
-  - Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_header.ejs) en la parte superior de la página y agrega la etiqueta `Deprecated` a la lista de etiquetas de la página.
-  - En la página de descripción general del elemento, la interfaz o la API, busca la lista de elementos que incluyan el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_inline.ejs) después del nombre del elemento en esa lista.
-  - Busca en el texto informativo de la página de descripción general de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agrega cuadros de advertencia en los lugares apropiados con texto del tipo "\[lo que sea] se ha eliminado de la especificación y pronto se eliminará de los navegadores. Consulta \[enlace a la página] para conocer una nueva forma de hacer esto."
-  - Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Agrega advertencias similares.
-  - Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Agrega también cuadros de advertencia similares allí.
-  - En algún momento en el futuro, se puede tomar la decisión de eliminar el elemento de la documentación; Normalmente no hacemos esto, pero si el artículo no se utilizó o no fue interesante, podemos decidir hacerlo.
-  - Actualiza cualquier entrada relevante en el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la obsolescencia de los elementos afectados.
-
-- Si el elemento se implementó en una o más versiones de publicaciones de navegadores, sin que sea necesario cambiar una preferencia o una marca, marca el elemento como obsoleto, de la siguiente manera:
-
-  - Si el elemento tiene páginas de documentación que describen solo ese elemento (como {{domxref("RTCPeerConnection.close()")}}), agrega la macro [`deprecated_header`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_header.ejs) en la parte superior de la página y agrega la etiqueta `Deprecated` a la lista de etiquetas de la página.
-  - En la página de descripción general del elemento, la interfaz o la API, busca la lista de elementos que incluyan el elemento que se ha eliminado de la especificación y agrega la macro [`deprecated_inline`](https://github.com/mdn/yari/tree/main/kumascript/macros/deprecated_inline.ejs) después del nombre del elemento en esa lista.
-  - Busca en el texto informativo de la página de descripción general de esa interfaz, elemento, etc., cualquier referencia al elemento eliminado. Agrega recuadros de advertencia en los lugares apropiados con texto del tipo "\[lo que sea] se ha eliminado de la especificación y está obsoleto. Es posible que se elimine de los navegadores en el futuro, por lo que no debes usarlo. Consulta \[enlace a la página] para conocer una nueva forma de hacer esto."
-  - Del mismo modo, busca cualquier discusión sobre el tema en las guías y tutoriales sobre la API o tecnología relevante. Agrega advertencias similares.
-  - Busca en MDN referencias al elemento eliminado, en caso de que haya discusiones en otro lugar. Agrega también cuadros de advertencia similares allí.
-  - Es poco probable que estos elementos se eliminen de la documentación pronto, si es que alguna vez lo hacen. Sin embargo, es posible que parte o todo el material se mueva a la sección [Archivo](/es/docs/Archive) del sitio.
-  - Actualiza todas las entradas relevantes en el [repositorio de datos de compatibilidad del navegador](https://github.com/mdn/browser-compat-data) para reflejar la obsolescencia de los elementos afectados.
-
-Utiliza el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos por las pautas anteriores. Los diferentes elementos requerirán una redacción y un manejo diferentes de la situación. En caso de duda, no dudes en pedir consejo en la [sala del chat de Docs Web de MDN](https://chat.mozilla.org/#/room/#mdn:mozilla.org) en [Matrix](https://wiki.mozilla.org/Matrix), o en el [foro de debate de Docs Web de MDN](https://discourse.mozilla.org/c/mdn).
-
-### Copiar contenido dentro de MDN
-
-A veces, necesitas reutilizar el mismo texto en varias páginas (o deseas usar el contenido de una página como plantilla para otra página). Tienes tres opciones:
-
-- Si deseas copiar una página completa:
-
-  1. Mientras visualizas la página que deseas copiar, en el menú **Avanzado** (engrane), elige [**Clona esta página**](/es/docs/MDN/Contribute/Creating_and_editing_pages#Clone_of_an_existing_page). Esto abre la interfaz de usuario del editor para una nueva página, con el contenido de la página clonada ya poblada.
-  2. Introduce un **título** y un **`slug`** nuevo para la página clonada.
-  3. Edita el contenido de la página según sea necesario y guárdalo como usualmente lo haces.
-
-- Si deseas copiar solo una parte de una página, **no solo visites la página y la copies**. Esto introduce bits adicionales de HTML no deseados en la página destino, y alguien tendrá que limpiar eso, tú u otro editor. Nadie quiere eso. Para copiar parte de una página MDN a otra página:
-
-  1. En la página fuente, haz clic en el botón **Editar** en la página de fuente.
-  2. **Copia el contenido que deseas reutilizar desde la interfaz de usuario del editor.**
-  3. Haz clic en **Descartar** para salir de la interfaz de usuario del editor de esa página.
-  4. Abre la interfaz de usuario del editor de la página donde deseas pegar.
-  5. Pega el contenido del portapapeles.
-
-  > **Nota:** Chrome generalmente no incluye las clases aplicadas al contenido al copiar y pegar documentos en nuestro editor. Debes revisar el contenido después de hacer esto y volver a aplicar los estilos perdidos. Checa las tablas, cuadros de sintaxis, resaltado de sintaxis y secciones ocultas de contenido en particular.
-
-- A veces, literalmente, deseas utilizar el mismo contenido en muchas páginas. En este caso, es mejor que coloques el contenido en una página y luego uses la macro [`Page`](https://github.com/mdn/yari/tree/main/kumascript/macros/Page.ejs) para trasladar el material de una página a otra. De esta forma, siempre que se actualice el texto de la página fuente, la página de destino también se actualizará (es decir, esto sucederá en una actualización forzada o cuando la página destino pase por una reconstrucción programada).
-
-#### Copiar contenido de otro lugar
-
-A menudo, hay contenido útil sobre un tema en algún lugar de la web además de MDN. Sin embargo, copiar dicho contenido puede plantear dificultades, tanto legales como técnicas.
-
-En el nivel técnico, los motores de búsqueda suelen penalizar a un sitio en su clasificación por reproducir contenido disponible en otros lugares. Por lo tanto, es preferible tener contenido original en MDN, para mejorar la clasificación del contenido de MDN en los motores de búsqueda. Puedes vincular al contenido existente de MDN.
-
-A nivel legal, debes estar autorizado para contribuir con el contenido, y debes tener licencia y atribución de una manera que sea compatible con [licencia de MDN](/es/docs/MDN/About#Copyrights_and_licenses).
-
-- **Si creaste el contenido existente** (para tus propios fines y no como trabajo por encargo) y estás dispuesto a contribuir a MDN con la licencia de MDN, este es el caso más fácil y estás libre de contribuir con el contenido.
-- **Si los derechos de autor del contenido pertenecen a otra persona**, debes tener licencia y atribuir de manera compatible con la licencia de MDN. A menudo, no es fácil para alguien que no es abogado determinar qué licencias son compatibles. Para estar seguro, comunícate con un miembro del [equipo de personal de MDN](https://wiki.mozilla.org/MDN#Staff_Team), quien puede consultar al equipo legal de Mozilla para obtener orientación si es necesario .
-
-#### Cómo comunicar un conflicto de especificaciones
-
-Ten en cuenta que a veces (pero rara vez) hay un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG), p. ej. una versión puede tener una característica listada como obsoleta, mientras que la otra no. En tales casos, considera cuál es la realidad, es decir, qué están haciendo los navegadores, y escribe una nota "importante" para resumir ese último estado. Por ejemplo, a enero de 2019, el atributo global [`inputmode`](/es/docs/Web/HTML/Global_attributes/inputmode) tiene un conflicto, que se resumió al igual que:
-
-> **Advertencia:** **Conflicto de especificaciones**: La [lista de especificaciones de WHATWG `inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode), y los navegadores modernos están trabajando para admitirlo. Sin embargo, la [especificación W3C HTML 5.2](https://www.w3.org/TR/html52/index.html#contents) ya no la incluye (es decir, la marca como desaprobada). Debes considerar que la definición del WHATWG es correcta, hasta que se logre un consenso.
+> **Advertencia:** Conflicto de especificación: La especificación WHATWG enumera [`inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode) y los navegadores modernos están trabajando para soportarlo.
+> La [especificación HTML 5.2 del W3C](https://html.spec.whatwg.org/multipage/index.html#contents), sin embargo, ya no la enumera (es decir, la marca como obsoleta).
+> Debe considerar la definición de WHATWG como correcta, hasta que se llegue a un consenso.

From 7b47b10efb42ba405a3673422fdf9fa5d305c1bd Mon Sep 17 00:00:00 2001
From: du33169 <46591250+du33169@users.noreply.github.com>
Date: Wed, 20 Sep 2023 12:19:49 +0800
Subject: [PATCH 033/268] fix(typo): scrpit -> script (#15963)

---
 .../add-ons/webextensions/your_second_webextension/index.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md
index 12654a43518381..1f62bfbead99bc 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md
@@ -311,7 +311,7 @@ browser.tabs
   .catch(reportExecuteScriptError);
 ```
 
-从 96 行开始。只要弹出窗加载完，popup scrpit 就会使用 [`browser.tabs.executeScript()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript) API 在活跃标签页执行 content script。如果执行 content scrpit 成功，content script 会在页面中一直保持，直到标签被关闭或者用户导航到其他页面。
+从 96 行开始。只要弹出窗加载完，popup script 就会使用 [`browser.tabs.executeScript()`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript) API 在活跃标签页执行 content script。如果执行 content script 成功，content script 会在页面中一直保持，直到标签被关闭或者用户导航到其他页面。
 
 `browser.tabs.executeScript()`调用失败的常见原因是你不能在所有页面执行 content scripts。例如，你不能在特权浏览器页面执行，像 about:debugging，你也不能在[addons.mozilla.org](https://addons.mozilla.org/)域执行。如果调用失败，`reportExecuteScriptError()`会隐藏`"popup-content"` `<div>`，并展示`"error-content"` `<div>`, 然后打印一个错误到[控制台](/zh-CN/Add-ons/WebExtensions/Debugging)。
 

From 3c70ec060c53ccf075fb1d9d1e2b4dd544917de0 Mon Sep 17 00:00:00 2001
From: Fina <42113148+BSPR0002@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:22:04 +0800
Subject: [PATCH 034/268] zh-cn: init the translation of "CycleTracker: Service
 workers" (#15936)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../cycletracker/service_workers/index.md     | 401 ++++++++++++++++++
 1 file changed, 401 insertions(+)
 create mode 100644 files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md

diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md
new file mode 100644
index 00000000000000..2344b1ca7dcbad
--- /dev/null
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md
@@ -0,0 +1,401 @@
+---
+title: 经期跟踪器：Service worker
+short-title: Service worker
+slug: Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers
+---
+
+{{PWASidebar}}
+
+{{PreviousMenu("Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}
+
+目前为止，我们已经为经期跟踪器编写了 HTML、CSS 和 JavaScript，添加了清单文件用于定义颜色、图标、URL 以及其他的应用特性。我们已经有了一个能运行的 Web 应用！但它还不是一个 PWA。在这一章节，我们将要编写将我们的功能完整、能够作为独立应用分发并且能无缝地在离线状态下运行的 Web 应用转化为 PWA 所需的 JavaScript 脚本。
+
+如果你还没有完成到这一步，请复制这些 [HTML](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/index.html)、[CSS](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/style.css)、[JavaScript](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/app.js)，还有[清单](https://github.com/mdn/pwa-examples/tree/master/cycletracker/manifest_file/cycletracker.json) JSON 文件的内容，并分别按照以下文件名保存：`index.html`、`styles.css`、`app.js` 以及 `cycletracker.json`。
+
+在本章节，我们要创建 `sw.js`——service worker 脚本，用于将我们的 Web 应用转化成 PWA。我们已经有了一个 JavaScript 文件——在 HTML 文件的最后一行里名为 `app.js` 的那一个。这个 JavaScript 脚本提供了全部标准 Web 应用特性的功能。我们并不会像使用 `app.js` 那样通过 {{HTMLElement("script")}} 元素的 `src` 属性来调用 `sw.js`，而是通过注册 service worker 来建立它与 Web 应用的联系。
+
+在本课程的最后，你将会拥有一个功能完整的 PWA——一个能够被完整安装的、即使用户处于离线状态也能运行的逐步增强的 Web 应用。
+
+## Service worker 的职责
+
+Service worker 能够让应用离线运行，并且时刻确保应用是最新的。为了能出色地做到这点，service worker 应当包含以下信息：
+
+- 版本号（或者其他标识）。
+- 缓存资源的列表。
+- 缓存版本的名称。
+
+Service worker 还需要负责：
+
+- 在应用被安装时安装缓存资源。
+- 根据需要更新自身和其他的应用文件。
+- 移除不会再被用到的缓存文件。
+
+我们通过响应以下三种 service worker 事件来实现这些任务：
+
+- [`fetch`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/fetch_event) 事件、
+- [`install`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/install_event) 事件，以及
+- [`activate`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/activate_event) 事件。
+
+### 版本号
+
+PWA 一但在用户的机器上被安装，唯一通知浏览器有要检索的更新文件的方法就是对 service worker 作出修改。如果 PWA 的其他资源发生了改动——比如 HTML 更新了、CSS 里的 bug 被修复了、`app.js` 添加了新函数、一张图片被压缩了以减少文件体积，等等——你安装的 PWA 的 service worker 是不会知道它需要下载更新资源的。只有 service worker 被改动了，PWA 才会知道它也许该更新缓存了，然后去发起更新的任务。
+
+虽然修改任意字符在技术上都足以达成，但 PWA 的最佳做法是创建一个按顺序更新的版本号常量用以指示文件的更新。即使 service worker 本身没有其他任何的改动，也应当以更新版本号（或者日期）这种较为正式的方式对 service worker 做出修改，这也是给开发人员提供一种辨别应用版本的方法。
+
+#### 任务
+
+新建一个包含版本号的 JavaScript 文件：
+
+```js
+const VERSION = "v1";
+```
+
+将文件保存为 `sw.js`。
+
+### 离线资源列表
+
+为了能有优良的离线体验，缓存文件列表应当包含 PWA 离线时需要使用的所有资源。即使清单文件里可能会罗列出一大堆各种大小的图标，应用缓存也只需要包含应用在离线模式下需要使用的资源。
+
+```js
+const APP_STATIC_RESOURCES = [
+  "/",
+  "/index.html",
+  "/styles.css",
+  "/app.js",
+  "/icon-512x512.png",
+];
+```
+
+你不需要把在各个不同操作系统和设备上使用的各个图标都包含进列表里。而是应该把应用使用的所有图片包含进来，包括在应用启动缓慢时用户可能会看见的应用启动页面或者提示用户“你需要连接到互联网以获得完整体验”的页面所使用的素材。
+
+不要把 service worker 文件包含到缓存资源列表里。
+
+#### 任务
+
+向 `sw.js` 添加用于经期跟踪器 PWA 的缓存资源列表。
+
+#### 示例方案
+
+我们包括了在本教程的其他章节中所创建的经期跟踪器在离线状态下运作所需的静态资源。我们的 `sw.js` 文件目前是这样的：
+
+```js
+const VERSION = "v1";
+
+const APP_STATIC_RESOURCES = [
+  "/",
+  "/index.html",
+  "/styles.css",
+  "/app.js",
+  "/cycletrack.json",
+  "/icons/wheel.svg",
+];
+```
+
+我们包括了 `wheel.svg` 图标，以备你要增强 PWA 的 UI 时使用，比如在没有经期数据时显示 logo，虽然我们的应用目前并没有使用它。
+
+### 应用缓存名称
+
+我们有了版本号，也有了需要缓存的文件。在缓存文件之前，我们需要创建一个在存储应用的静态资源时需要使用的缓存名称。这个缓存名称应当被版本化，以确保在应用更新时可以创建新的缓存同时删除旧的缓存。
+
+#### 任务
+
+使用 `VERSION` 版本号来创建一个版本化的 `CACHE_NAME` 缓存名，作为常量添加到 `sw.js`。
+
+#### 示例方案
+
+我们将缓存命名为 `period-tracker-` 后跟 `VERSION` 版本号。鉴于我们的常量声明都是单行的，为了方便阅读，我们将其放在了资源数组常量的前面。
+
+```js
+const VERSION = "v1";
+const CACHE_NAME = `period-tracker-${VERSION}`;
+
+const APP_STATIC_RESOURCES = [ ... ];
+```
+
+我们成功声明了我们的常量：一个唯一的标识符、数组形式的离线资源列表以及随版本号更新的应用缓存名称。现在，让我们把注意力转向安装、更新以及删除无用的缓存资源。
+
+### 在 PWA 安装过程中保存缓存
+
+当用户安装 PWA 或者只是单纯的访问带有 service worker 的网站时，会在 service worker 的作用域触发一个 `install` 事件。我们想要监听这个事件，在安装期间用 PWA 的静态资源填充缓存。每当 service worker 的版本更新，浏览器都会安装新的 service worker 并触发安装事件。
+
+`install` 事件会在应用第一次被安装或者浏览器检测到有新版本的 service worker 时触发。当旧的 service worker 将要被新的替换时，旧的 service worker 仍然会作为 PWA 的 service worker，直到新的 service worker 被激活。
+
+全局变量 [`caches`](/zh-CN/docs/Web/API/caches) 只在安全上下文中可用，它会返回一个与当前上下文关联的 {{domxref("CacheStorage")}} 对象。{{domxref("CacheStorage.open()")}} 方法会返回一个 {{jsxref("Promise")}} 对象，可以兑现一个名称与作为参数传递的名称相符的 {{domxref("Cache")}} 对象。
+
+{{domxref("Cache.addAll()")}} 方法接收一个 URL 数组作为参数，然后会检索这些 URL，将它们的响应添加到指定的缓存中。[`waitUntil()`](/zh-CN/docs/Web/API/ExtendableEvent/waitUntil) 方法可以告诉浏览器在 Promise 被敲定前，工作仍在进行中，浏览器如果想让工作能够完成就不应该终止 service worker。浏览器负责执行并在必要时终止 service worker，`waitUntil` 方法可用于请求浏览器在任务执行时不要终止 service worker。
+
+```js
+self.addEventListener("install", (e) => {
+  e.waitUntil((async () => {
+      const cache = await caches.open("cacheName_identifier");
+      cache.addAll([
+        "/",
+        "/index.html"
+        "/styles.css"
+        "/app.js"
+      ]);
+    })()
+  );
+});
+```
+
+#### 任务
+
+添加一个安装事件监听器，用于检索并存储 `APP_STATIC_RESOURCES` 列表中的文件到名为 `CACHE_NAME` 的缓存中。
+
+#### 示例方案
+
+```js
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      cache.addAll(APP_STATIC_RESOURCES);
+    })(),
+  );
+});
+```
+
+### 更新 PWA 并删除旧缓存
+
+正如上文提到的，当现有的 service worker 将要被新的替换时，现有的 service worker 仍然会作为 PWA 的 service worker，直到新的 service worker 被激活。我们使用 `activate` 事件来删除旧的缓存以避免空间被耗尽。我们对被命名的 {{domxref("Cache")}} 对象进行迭代，删除除了目前在使用外的全部缓存，然后将 service worker 设为 PWA 的 [`controller`](/zh-CN/docs/Web/API/ServiceWorkerContainer/controller)。
+
+我们监听当前 service worker 全局作用域的 [`activate`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/activate_event) 事件。
+
+我们获取现有的命名缓存，使用 {{domxref("CacheStorage.keys()")}} 方法（重新通过全局 {{domxref("caches")}} 属性访问 `CacheStorage`），它会返回一个 {{jsxref("Promise")}} 对象，可兑现一个包含对应到按创建顺序排列的命名 {{domxref("Cache")}} 对象的字符串的数组。
+
+我们使用 [`Promise.all()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) 方法来迭代命名缓存 Promise 列表。`all()` 方法接收一个可迭代的 Promise 列表，并返回单个 `Promise`。对于列表中的每个命名缓存，检查其是否是当前活动的缓存。如果不是，用 `Cache` 的 [`delete()`](/zh-CN/docs/Web/API/Cache/delete) 方法删除它。
+
+最后一行 `await clients.claim()` 使用 [`Clients`](/zh-CN/docs/Web/API/Clients) 接口的 [`claim()`](/zh-CN/docs/Web/API/Clients/claim) 方法来启用我们的 service worker 以将其设为我们客户端的控制器，“客户端”指正在运行的一个 PWA 实例。`claim()` 方法用于使 service worker 接管控制其作用域内的所有客户端。这样，作用域内已加载的客户端就不需要重新加载。
+
+```js
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const names = await caches.keys();
+      await Promise.all(
+        names.map((name) => {
+          if (name !== CACHE_NAME) {
+            return caches.delete(name);
+          }
+        }),
+      );
+      await clients.claim();
+    })(),
+  );
+});
+```
+
+#### 任务
+
+将上述 `activate` 事件监听器添加至你的 `sw.js` 文件。
+
+### fetch 事件
+
+我们可以利用 [`fetch`](/zh-CN/docs/Web/API/ServiceWorkerGlobalScope/fetch_event) 事件的优势，在用户处于在线状态时阻止已安装的 PWA 发起请求。监听 fetch 事件使得拦截所有请求并使用缓存的响应内容进行响应而不流经网络变得可能。大多数的应用不需要这样的行为。事实上，许多商业模式出于跟踪和营销目的都希望用户定期发送服务器请求。所以，尽管拦截请求对于某些应用来说是一种反面模式，但为了提高我们的经期跟踪器应用的隐私性，我们不希望应用发出不必要的网络请求。
+
+鉴于我们的 PWA 只由单一的页面构成，对于页面导航请求，我们返回至 `index.html` 主页面，因为没有其他页面，我们也不想请求总是发送到服务器。如果 Fetch API 的 [`Request`](/zh-CN/docs/Web/API/Request) 的只读属性 [`mode`](/zh-CN/docs/Web/API/Request/mode) 值为 `navigate`，意味着它在查找一个 Web 页面，我们使用 FetchEvent 的 [`respondWith()`](/zh-CN/docs/Web/API/FetchEvent/respondWith) 方法来阻止浏览器默认的 fetch 处理，使用 [`caches.match()`](/zh-CN/docs/Web/API/CacheStorage/match) 方法来提供我们自己的响应 Promise。
+
+对于其他所有的请求模式，我们则按照在 [install 事件响应](#在_pwa_安装过程中保存缓存)里的那样打开缓存，向同样的 `match()` 方法传递事件请求。它会检查请求是否是已存储的 {{domxref("Response")}} 的键。如果是，我们返回缓存的响应，如果不是，我们返回一个 [404 状态码](/zh-CN/docs/Web/HTTP/Status/404)作为响应。
+
+使用 [`Response()`](/zh-CN/docs/Web/API/Response/Response) 构造器，传递为 `null` 的主体以及一个 `404` 的状态码作为选项，并不意味着我们的 PWA 出错了。相反，我们需要的所有东西应该都已经在缓存里了，如果没有，我们也不用去服务器解决这个小问题。
+
+```js
+self.addEventListener("fetch", (event) => {
+  // 当在查找 HTML 页面时
+  if (event.request.mode === "navigate") {
+    // 返回到 index.html 页面
+    event.respondWith(caches.match("/"));
+    return;
+  }
+
+  // 对于其他所有请求模式
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      const cachedResponse = await cache.match(event.request.url);
+      if (cachedResponse) {
+        // 如果有缓存的响应可用就将其返回
+        return cachedResponse;
+      } else {
+        // 响应 HTTP 404 状态码
+        return new Response(null, { status: 404 });
+      }
+    })(),
+  );
+});
+```
+
+## 完善 service worker 文件
+
+你的 `sw.js` 文件现在应该和下面的 JavaScript 脚本相似。要注意，当 `APP_STATIC_RESOURCES` 数组中的资源列表发生了任何改动，我们唯一需要在这个 service worker 中更新的常量或功能就是 `VERSION` 的值。
+
+```js
+// 缓存的版本
+const VERSION = "v1";
+
+// 缓存的名称
+const CACHE_NAME = `period-tracker-${VERSION}`;
+
+// 使应用运作所需的静态资源
+const APP_STATIC_RESOURCES = [
+  "/",
+  "/index.html",
+  "/app.js",
+  "/styles.css",
+  "/icons/wheel.svg",
+];
+
+// 在安装时缓存缓存静态资源
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      cache.addAll(APP_STATIC_RESOURCES);
+    })(),
+  );
+});
+
+// 在被激活时删除旧的缓存
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const names = await caches.keys();
+      await Promise.all(
+        names.map((name) => {
+          if (name !== CACHE_NAME) {
+            return caches.delete(name);
+          }
+        }),
+      );
+      await clients.claim();
+    })(),
+  );
+});
+
+// 在 fetch 时，拦截服务器请求并用缓存的响应内容进行响应而不流经网络
+self.addEventListener("fetch", (event) => {
+  // 作为一个单页应用，总是将应用定向到缓存的主页面
+  if (event.request.mode === "navigate") {
+    event.respondWith(caches.match("/"));
+    return;
+  }
+
+  // 对于其他所有请求，先找缓存，再去网络
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      const cachedResponse = await cache.match(event.request.url);
+      if (cachedResponse) {
+        // 如果有缓存的响应可用就将其返回
+        return cachedResponse;
+      } else {
+        // 如果资源不在缓存中，返回 404
+        return new Response(null, { status: 404 });
+      }
+    })(),
+  );
+});
+```
+
+当更新 service worker 本身时，不需要更新 VERSION 常量，因为 service worker 脚本内容的任何更改都会触发浏览器去安装新的 service worker。但不论如何，更新版本号是方便开发人员（也包括你自己）的好习惯。可以在浏览器中通过[在应用程序工具中检查缓存的名称](#使用开发者工具)（或在源代码工具）来查看当前正在运行的是哪一个版本的 service worker。
+
+**备注**：在对应用的任何资源（包括 CSS、HTML、JS 代码和图像素材）做出更改后更新版本号是非常重要的。版本号或者对 service worker 文件所做的任何更改是唯一为你的用户强制更新应用的方式。
+
+## 注册 service worker
+
+现在我们的 service worker 脚本已经完成了，我们需要注册 service worker。
+
+我们先从使用检查全局 [`navigator`](/zh-CN/docs/Web/API/Navigator) 对象上是否存在 [`serviceWorker`](/zh-CN/docs/Web/API/ServiceWorker) 属性的[特性检测](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#特性检测的概念)手段来检查浏览器是否支持 [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) 开始：
+
+```html
+<script>
+  // “serviceWorker”是否存在
+  if ("serviceWorker" in navigator) {
+    // 如果存在，我们就注册 service worker
+  }
+</script>
+```
+
+如果这个属性受支持，我们就可以使用 service worker API 的 [`ServiceWorkerContainer`](/zh-CN/docs/Web/API/ServiceWorkerContainer) 接口的 [`register()`](/zh-CN/docs/Web/API/ServiceWorkerContainer/register) 方法。
+
+```html
+<script>
+  if ("serviceWorker" in navigator) {
+    // 注册应用的 service worker
+    // 传递定义 worker 的文件的文件名
+    navigator.serviceWorker.register("sw.js");
+  }
+</script>
+```
+
+虽然上述内容已经满足了经期跟踪器应用的需要，但是 `register()` 方法返回的是一个兑现 {{domxref("ServiceWorkerRegistration")}} 对象的 {{jsxref("Promise")}}。为了使应用更加健壮，最好对注册进行错误检查：
+
+```js
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("sw.js").then(
+    (registration) => {
+      console.log("Service worker registration successful:", registration);
+    },
+    (error) => {
+      console.error(`Service worker registration failed: ${error}`);
+    },
+  );
+} else {
+  console.error("Service workers are not supported.");
+}
+```
+
+### 任务
+
+打开 `index.html`，在 `app.js` 脚本之后、被 `</body>` 标签闭合之前添加以下 {{HTMLElement("script")}} 元素。
+
+```html
+<!-- 注册应用的 service worker -->
+<script>
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("sw.js");
+  }
+</script>
+```
+
+你可以体验功能完整的 [CycleTracker 月经周期跟踪 Web 应用](https://mdn.github.io/pwa-examples/cycletracker/service_workers)，并可以在 GitHub 上查看该 [Web 应用的源代码](https://github.com/mdn/pwa-examples/tree/master/cycletracker/service_workers)。是的，它能运行，并且现在正式成为了一个 PWA！
+
+## 调试 service worker
+
+出于我们安装 service worker 的方式的因素，一旦其被注册，所有的请求都将会从缓存中拉取，而不是加载新内容。在开发的时候，你会频繁地编辑你的代码，你可能会希望定期甚至是在每一次保存后在浏览器中测试你的编辑。
+
+### 通过更新版本号并进行强重置
+
+要获得新的缓存，你可以更改[版本号](#版本号)然后进行一次浏览器强刷新。进行强刷新的方式取决于你的浏览器和操作系统：
+
+- Windows：Ctrl+F5，Shift+F5 或 Ctrl+Shift+R。
+- MacOS：Shift+Command+R。
+- MacOS 上的 Safari：按 Option+Command+E 清空缓存，然后按 Option+Command+R。
+- 移动设备：前往浏览器（Android）或操作系统（Samsung、iOS）设置，在高级设置下找到浏览器（iOS）或站点数据（Android、Samsung）网站设置，然后删除经期跟踪器的数据，再重新加载页面。
+
+### 使用开发者工具
+
+你可能会不想每次保存都要更新版本号。在你准备好将你的 PWA 的新版本投入生产并为所有人提供你的 PWA 的新版本前，你可以用注销 service worker 的方法来代替在每次保存时更改版本号。
+
+你可以通过在[浏览器开发者工具](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)中点击 `unregister` 按钮来注销一个 service worker。强刷新页面将会重新注册 service worker 并建立新的缓存。
+
+![带有停止和注销 service worker 按钮的 Firefox 开发者工具应用程序面板](firefox_sw.jpg)
+
+在某些开发者工具里，你可以手动注销一个 service worker，或者你可以选择 service worker 的“重新加载时更新”选项来设置当开发者工具打开时，每次重新加载都重置并重新激活 service worker。还有一个选项可以绕过 service worker 从网络加载资源。这个面板包含了本教程中我们未涵盖的特性，但会对你在创建包含[同步](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation#周期性后台同步)和[推送消息](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation#推送消息)等特性的更高级的 PWA 时有所帮助，这些内容都涵盖在了[离线和后台操作](/zh-CN/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation)中。
+
+![Edge 开发者工具显示针对 service worker 的应用程序面板集](edge_sw.jpg)
+
+开发者工具的应用程序面板中的 service worker 窗口，提供了访问包含浏览器所有已注册的 service worker 的列表的弹出窗口的链接，不只是在当前标签页中打开的应用的 service worker。列表中的每个 service worker 都有单独的停止、启动或注销按钮。
+
+![localhost:8080 存在两个 service worker，它们能在列表中被注销](edge_sw_list.jpg)
+
+换句话说，当你在处理你的 PWA 时，你不需要更新每个应用视图的版本号。但是，当你做完了所有的改动后，记得在分发你的 PWA 的新版本前更新 VERSION 的值。如果你忘了，那些已经安装了你的应用又或者只是访问了你的线上 PWA 但是没有安装的人，是永远看不到你的改动的！
+
+## 我们完成了！
+
+PWA 的核心是一种可以被安装并可以被逐步增强至可以离线运行的 Web 应用。我们创建了一个功能完整的 Web 应用，然后添加了两项特性——一个清单文件和一个 service worker——将其转化为 PWA 所需要的东西。如果你想和其他人分享你的应用，请将其通过安全连接提供。或者，如果你只想自己使用经期跟踪器，[创建一个本地部署环境](/zh-CN/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection)，[安装 PWA](/zh-CN/docs/Web/Progressive_web_apps/Guides/Installing)，然后尽情享受吧！一经安装，你就不需要再运行 localhost 了。
+
+恭喜！
+
+{{PreviousMenu("Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}

From 4d329bcb36f86e51b26d3806eb8a002eb2eec19b Mon Sep 17 00:00:00 2001
From: hanyujie2002 <84226578+hanyujie2002@users.noreply.github.com>
Date: Wed, 20 Sep 2023 16:48:12 +0800
Subject: [PATCH 035/268] =?UTF-8?q?zh-cn:=20align=20the=20translation=20of?=
 =?UTF-8?q?=20"identity"=20to=20"=E6=A0=87=E8=AF=86"=20(#15966)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tutorials/cycletracker/manifest_file/index.md         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
index 31bc88a4411b9f..9f526a40b79774 100644
--- a/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
+++ b/files/zh-cn/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md
@@ -27,7 +27,7 @@ PWA 清单文件是一个 JSON 文件，它提供了关于该应用程序的特
 }
 ```
 
-在保存清单文件并从我们的 HTML 文件中链接到它之前，我们可以开发一个仍然简洁但具有更多信息的 JSON 对象，以定义 PWA 的身份、展示和图标。是的，上面的内容会起作用，但让我们讨论一下这个示例中的成员以及其他一些成员，这些成员使清单文件能够更好地定义我们的经期跟踪器 PWA 的外观。
+在保存清单文件并从我们的 HTML 文件中链接到它之前，我们可以开发一个仍然简洁但具有更多信息的 JSON 对象，以定义 PWA 的标识、展示和图标。是的，上面的内容会起作用，但让我们讨论一下这个示例中的成员以及其他一些成员，这些成员使清单文件能够更好地定义我们的经期跟踪器 PWA 的外观。
 
 ## 应用标识
 
@@ -244,11 +244,11 @@ PWA 需要从应用的 HTML 文档中链接到清单文件。我们已经有一
 
 ![在开发者工具中，左侧面板包含指向清单的链接。右侧显示应用清单文件，文件名称是一个指向 JSON 文件的链接。](debugger_devtools.jpg)
 
-Manifest 应用面板提供了清单文件名称作为链接，以及身份、外观和图标部分。
+Manifest 应用面板提供了清单文件名称作为链接，以及标识、外观和图标部分。
 
-![身份和外观清单成员以及存在的任何值。](manifest_identity_and_presentation.jpg)
+![标识和外观清单成员以及存在的任何值。](manifest_identity_and_presentation.jpg)
 
-支持的清单成员将显示出来，以及所有包含的值。在此截图中，虽然我们没有包括 `orientation` 或 `id` 成员，但它们都被列出来了。应用面板可以用来查看清单成员，甚至可以了解：在这个例子中，我们了解到要指定与当前身份匹配的应用 Id，需要将 `id` 字段设置为“/”。
+支持的清单成员将显示出来，以及所有包含的值。在此截图中，虽然我们没有包括 `orientation` 或 `id` 成员，但它们都被列出来了。应用面板可以用来查看清单成员，甚至可以了解：在这个例子中，我们了解到要指定与当前标识匹配的应用 Id，需要将 `id` 字段设置为“/”。
 
 ![由于我们没有 service worker，我们的应用不是可安装的 PWA。](manifest_installability.jpg)
 

From 27a568bbdb06f41d85b907fae41d50cc7b169b59 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Wed, 20 Sep 2023 19:03:00 +0900
Subject: [PATCH 036/268] [ko] revise
 `web/javascript/inheritance_and_the_prototype_chain` (#15090)

---
 .../index.md                                  | 937 +++++++++++-------
 1 file changed, 560 insertions(+), 377 deletions(-)

diff --git a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md
index a41fa55270e3a4..31a08d6836c3e9 100644
--- a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -1,552 +1,735 @@
 ---
 title: 상속과 프로토타입
 slug: Web/JavaScript/Inheritance_and_the_prototype_chain
+l10n:
+  sourceCommit: 7a58753bcf70d274dfe3a0385e4c3861d0df3dd4
 ---
 
 {{jsSidebar("Advanced")}}
 
-Java 나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 자바스크립트가 동적인 언어라는 점과 클래스가 없다는 것에서 혼란스러워 한다. (ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.)
+JavaScript는 동적 타입이고 정적 타입이 없기 때문에, (Java 또는 C++와 같은) 클래스 기반 언어에 경험이 있는 개발자에게는 약간 혼란스럽습니다.
 
-상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 \[\[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 **프로토타입**이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다, 결국 `null`을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, **프로토타입 체인**의 종점 역할을 한다.
+상속과 관련하여, JavaScript에는 객체라는 하나의 구조만 있습니다. 각 객체에는 **프로토타입**이라는 다른 객체에 대한 링크를 보유하는 비공개 속성이 있습니다. 그 프로토타입 객체도 자신만의 프로토타입을 가지고 있으며, 프로토타입으로 `null`을 가진 객체에 도달할 때까지 이 연결은 계속됩니다. 정의에 따르면 `null`에는 프로토타입이 없으며, 이 **프로토타입 체인**에서 최종 링크 역할을 합니다. 프로토타입 체인의 모든 구성요소들을 변경하거나 런타임 시 프로토타입을 교체할 수도 있으므로 JavaScript에는 [정적 디스패칭(static dispatching)](https://en.wikipedia.org/wiki/Static_dispatch)과 같은 개념이 없습니다.
 
-종종 이러한 점이 자바스크립트의 약점이라고 지적되지만, 프로토타입적 상속 모델은 사실 고전적인 방법보다 좀 더 강력한 방법이다. 그 말은, 예를 들자면, 프로토타입적 모델에서 고전적인 방식을 구현하는 건 꽤나 사소한 일이지만, 그 반대는 훨씬 더 어려운 일이기 때문이다.
+이러한 혼란은 종종 JavaSCript의 약점 중 하나로 생각되어지지만, 프로토타입 상속 모델 자체는 사실 고전적인 모델보다 더 강력합니다. 예를 들어, [classes](/ko/docs/Web/JavaScript/Reference/Classes)가 구현되는 방식인 프로토타입 모델 위에 고전적인 모델을 구축하는 것은 매우 간단합니다.
+
+클래스는 현재 널리 채택되어 JavaScript의 새로운 패러다임이 되었지만, 클래스는 새로운 상속 패턴을 가져오지 않습니다. 클래스는 대부분의 프로토타입 메커니즘을 추상화하지만, 내부에서 프로토타입이 작동하는 방식을 이해하는 것은 여전히 유용합니다.
 
 ## 프로토타입 체인을 이용한 상속
 
 ### 속성 상속
 
-자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (**자기만의 속성**이라고 부른다) 프로토타입 객체에 대한 링크를 가진다. 객체의 어떤 속성에 접근하려할 때 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색한다.
+자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (**자기만의 속성**이라고 부릅니다) 프로토타입 객체에 대한 링크를 가집니다. 객체의 어떤 속성에 접근하려할 때, 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색합니다.
+
+> **Note:** ECMAScript 표준은 `someObject.[[Prototype]]`을 객체 `someObject`의 프로토타입을 지시하도록 명시하였습니다. `[[Prototype]]` 내부 슬롯은 각각 {{jsxref("Object.getPrototypeOf()")}}과 {{jsxref("Object.setPrototypeOf()")}} 함수로 접근하고 수정할 수 있습니다. 이것은 자바스크립트의 표준은 아니나 많은 브라우저에 구현되어 사실상의 표준이 된 속성 [`__proto__`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)과 동일합니다. 간결함을 유지하고 혼동을 방지하기 위해 표기법에서 `obj.__proto__`를 사용하지 않고, `obj.[[Prototype]]`을 사용합니다. 이것은 `Object.getPrototypeOf(obj)`에 해당합니다.
+>
+> 생성자로 사용될 때 주어진 함수에 의해 생성된 객체의 모든 `인스턴스`에 `[[Prototype]]`이 할당되도록 지정하는 함수의 `func.prototype` 속성과 혼동해서는 안 됩니다. [나중 섹션](#constructors)에서 생성자 함수의 `prototype` 속성에 대해 논의할 것입니다.
 
-> **Note:** ECMAScript 표준은 `someObject.[[Prototype]]`을 객체 `someObject`의 프로토타입을 지시하도록 명시하였다. ECMAScript 2015부터 `[[Prototype]]`에 조상 {{jsxref("Object.getPrototypeOf()")}}과 {{jsxref("Object.setPrototypeOf()")}}을 이용하여 접근하기 때문이다. 이것은 자바스크립트의 표준은 아니나 많은 브라우저에 구현되어 사실상의 표준이 된 속성 `__proto__`과 동일하다.
+객체의 `[[Prototype]]`을 지정하는 방법에는 여러 가지가 있으며, [나중 섹션](#different_ways_of_creating_and_mutating_prototype_chains)에 나열되어 있습니다. 지금은, 설명을 위해 [`__proto__` 문법](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#prototype_setter)을 사용합니다. `{ __proto__: ... }` 구문이 표준이며, 더 이상 사용되지 않는 `obj.__proto__` 접근자와 다르다는 점을 참고해주십시오.
+`{ a: 1, b: 2, __proto__: c }`와 같은 객체 리터럴에서, 값 `c`(`null` 또는 다른 객체여야 합니다)는 해당 객체의 `[[Prototype]]`이 됩니다. 반면, `a` 및 `b`와 같은 다른 키는 해당 객체의 *자체 속성*이 됩니다. `[[Prototype]]`은 객체의 "내부 속성"일 뿐이므로, 이 구문은 매우 자연스럽게 읽히는 부분입니다.
 
-아래 코드에는 어떤 속성에 접근 하려할 때 일어나는 상황이다.
+다음은 속성에 접근하려고 할 때 발생하는 상황입니다.
 
 ```js
-// o라는 객체가 있고, 속성 'a' 와 'b'를 갖고 있다고 하자.
-let f = function () {
-  this.a = 1;
-  this.b = 2;
+const o = {
+  a: 1,
+  b: 2,
+  // __proto__는 [[Prototype]]을 설정합니다.
+  // 여기에 다른 객체 리터럴로 지정되어 있습니다.
+  __proto__: {
+    b: 3,
+    c: 4,
+  },
 };
-let o = new f(); // {a: 1, b: 2}
-
-// f 함수의 prototype 속성 값들을 추가 하자.
-f.prototype.b = 3;
-f.prototype.c = 4;
 
-// f.prototype = {b: 3, c: 4}; 라고 하지 마라, 해당 코드는 prototype chain 을 망가뜨린다.
-// o.[[Prototype]]은 속성 'b'와 'c'를 가지고 있다.
-// o.[[Prototype]].[[Prototype]] 은 Object.prototype 이다.
-// 마지막으로 o.[[Prototype]].[[Prototype]].[[Prototype]]은 null이다.
-// null은 프로토타입의 종단을 말하며 정의에 의해서 추가 [[Prototype]]은 없다.
+// o.[[Prototype]]은 속성 'b'와 'c'를 가지고 있습니다.
+// o.[[Prototype]].[[Prototype]] 은 Object.prototype 입니다(무엇을 의미하는지 나중에 설명하겠습니다).
+// 마지막으로, o.[[Prototype]].[[Prototype]].[[Prototype]]은 null입니다.
+// null은 프로토타입의 종단을 말하며 정의에 의해서 추가 [[Prototype]]은 없습니다.
+// 그러면 전체 프로토타입 체인은 다음과 같습니다.
 // {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null
 
 console.log(o.a); // 1
-// o는 'a'라는 속성을 가지는가? 그렇다. 속성의 값은 1이다.
+// o에 'a' 자체 소유 속성이 있습니까? 네, 그 값은 1입니다.
 
 console.log(o.b); // 2
-// o는 'b'라는 속성을 가지는가? 그렇다. 속성의 값은 2이다.
-// 프로토타입 역시 'b'라는 속성을 가지지만 이 값은 쓰이지 않는다. 이것을 "속성의 가려짐(property shadowing)" 이라고 부른다.
+// o에 'b'라는 자체 소유 속성이 있습니까? 네, 그 값은 2입니다.
+// 프로토타입 역시 'b'라는 속성을 가지지만 이 값은 쓰이지 않습니다. 이것을 "속성의 가려짐(property shadowing)" 이라고 부릅니다.
 
 console.log(o.c); // 4
-// o는 'c'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자.
-// o.[[Prototype]]은 'c'라는 속성을 가지는가? 가지고 값은 4이다.
+// o는 'c'라는 속성을 소유하나요? 아니요, 프로토타입을 확인해보자.
+// o.[[Prototype]]은 'c'라는 속성을 소유하나요? 네, 값은 4이다.
 
 console.log(o.d); // undefined
-// o는 'd'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자.
-// o.[[Prototype]]은 'd'라는 속성을 가지는가? 아니다. 다시 프로토타입을 확인해보자.
-// o.[[Prototype]].[[Prototype]]은 null이다. 찾는 것을 그만두자.
-// 속성이 발견되지 않았기 때문에 undefined를 반환한다.
+// o에 'd' 자체 속성이 있습니까? 아니요, 프로토타입을 확인하세요.
+// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype.
+// o.[[Prototype]]에 'd' 자체 소유 속성이 있습니까? 아니요, 프로토타입을 확인하세요.
+// o.[[Prototype]].[[Prototype]]은 Object.prototype이고,
+// 기본적으로 'd' 속성이 없습니다. 프로토타입을 확인하세요.
+// o.[[Prototype]].[[Prototype]].[[Prototype]]은 null, 검색을 중지합니다,
+// 속성을 찾을 수 없어서, undefined를 반환합니다.
 ```
 
-객체의 속성에 값을 지정하면 "자기만의 속성"이 생긴다. 단, [getter or a setter](/en/JavaScript/Guide/Obsolete_Pages/Creating_New_Objects/Defining_Getters_and_Setters)가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용된다.
+객체의 속성에 값을 지정하면 "자기만의 속성"이 생성됩니다. 단, [getter or setter](/ko/docs/Web/JavaScript/Guide/Working_with_objects#defining_getters_and_setters)가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용됩니다.
 
-### 메소드 상속
-
-자바스크립트에 "메소드"라는건 없다. 하지만 자바스크립트는 객체의 속성으로 함수를 지정할 수 있고 속성 값을 사용하듯 쓸 수 있다. 속성 값으로 지정한 함수의 상속 역시 위에서 본 속성의 상속과 동일하다. (단 위에서 언급한 "속성의 가려짐" 대신 "_메소드 오버라이딩, method overriding_" 라는 용어를 사용한다)
-
-상속된 함수가 실행 될 때, [`this`](/en/JavaScript/Reference/Operators/this) 라는 변수는 상속된 오브젝트를 가르킨다. 그 함수가 프로토타입의 속성으로 지정되었다고 해도 말이다.
+마찬가지로, 더 긴 프로토타입 체인을 만들 수 있으며, 모든 체인에서 속성을 찾을 수 있습니다.
 
 ```js
-var o = {
-  a: 2,
-  m: function (b) {
-    return this.a + 1;
+const o = {
+  a: 1,
+  b: 2,
+  // __proto__는 [[Prototype]]을 설정합니다.
+  // 여기에 다른 객체 리터럴로 지정되어 있습니다.
+  __proto__: {
+    b: 3,
+    c: 4,
+    __proto__: {
+      d: 5,
+    },
   },
 };
 
-console.log(o.m()); // 3
-// o.m을 호출하면 'this' 는 o를 가리킨다.
-
-var p = Object.create(o);
-// p 는 프로토타입을 o로 가지는 오브젝트이다.
+// { a: 1, b: 2 } ---> { b: 3, c: 4 } ---> { d: 5 } ---> Object.prototype ---> null
 
-p.a = 12; // p 에 'a'라는 새로운 속성을 만들었다.
-console.log(p.m()); // 13
-// p.m이 호출 될 때 'this' 는 'p'를 가리킨다.
-// 따라서 o의 함수 m을 상속 받으며,
-// 'this.a'는 p.a를 나타내며 p의 개인 속성 'a'가 된다.
+console.log(o.d); // 5
 ```
 
-## Javascript 에서 프로토타입을 사용하는 방법
+### 메서드 상속
 
-뒤에서 일어나는 일을 좀 더 자세히 파헤쳐보자.
+JavaScript에는 클래스 기반 언어에서 정의하는 형식의 "[메서드](/ko/docs/Glossary/Method)"가 없습니다. JavaScript에서는 모든 함수를 속성의 형태로 객체에 추가할 수 있습니다.
+상속된 함수는 위에 표시된 "속성의 가려짐"을 포함하여 다른 모든 속성처럼 작동합니다(단, 위에서 언급한 "속성의 가려짐" 대신 "메소드 오버라이딩, method overriding" 라는 용어를 사용한다).
 
-위에서 언급했듯이, 자바스크립트에서 함수는 속성을 가질 수 있다. 모든 함수에는 `prototype`이라는 특수한 속성이 있다. 아래의 예제 코드는 독립적이라는 것에 유의하자. (아래의 코드 이외에는 웹페이지에 다른 자바스크립트가 없다고 가정하는 것이 좋다.)
+상속된 함수가 실행 될 때, [`this`](/ko/docs/Web/JavaScript/Reference/Operators/this) 값은 함수가 자체 속성인 프로토타입 객체가 아니라 상속 객체를 가리킵니다.
 
-최적의 실습을 위해서 콘솔을 열고 "Console" 탭으로 이동하여 아래의 JavaScript 코드를 복사하여 붙여넣은 다음 , 엔터키를 눌러 실행할 것을 적극 권한다. (콘솔은 대부분 웹 브라우저의 Developer Tools에 포함되어있다. 자세한 내용은 [Firefox Developer Tools](/ko/docs/Tools), [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/), [Edge DevTools](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide) 에서 확인할 수 있다. )
+```js
+const parent = {
+  value: 2,
+  method() {
+    return this.value + 1;
+  },
+};
 
-```
-    function doSomething(){}
-    console.log( doSomething.prototype );
-    // It does not matter how you declare the function, a
-    //  function in JavaScript will always have a default
-    //  prototype property.
-    var doSomething = function(){};
-    console.log( doSomething.prototype );
+console.log(parent.method()); // 3
+// 이 경우 parent.method를 호출할 때, 'this'는 부모를 가리킵니다.
+
+// 자식은 부모로부터 상속받는 객체입니다.
+const child = {
+  __proto__: parent,
+};
+console.log(child.method()); // 3
+// child.method가 호출되면, 'this'는 자식을 가리킵니다.
+// 자식이 부모의 메서드를 상속받을 때,
+// 자식에서 'value' 속성을 찾습니다. 그러나 자식은 'value'라는 자체 속성이 없기 때문에,
+// 해당 속성은 [[Prototype]]에서 찾을 수 있으며, 이는 parent.value입니다.
+
+child.value = 4; // 자식의 속성 'value'에 값 4를 할당합니다.
+// 이 코드는 부모의 'value' 속성을 숨깁니다.
+// 자식 객체는 이제 다음과 같습니다.
+// { value: 4, __proto__: { value: 2, method: [Function] } }
+console.log(child.method()); // 5
+// Since child now has the 'value' property, 'this.value' means
+// 자식은 이제 'value' 속성을 가지므로 'this.value'는 child.value를 의미합니다.
 ```
 
-위 내용을 토대로, 콘솔을 보면 `doSomething()` 은 기본 `prototype` 속성을 가진다. 코드를 실행한 뒤에 콘솔에서는 다음과 유사한 형태의 객체가 표시되어야한다.
+## 생성자
 
-```
-{
-    constructor: ƒ doSomething(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
-}
+모든 인스턴스가 동일한 몇가지 동일한 속성을 공유하는 경우, 프로토타입의 강점이 드러납니다. 이는 특히 메서드를 공유할 경우 더욱 두드러집니다. 예로, `getValue` 함수를 통해 접근할 수 있는 값을 포함하는 '상자' 객체를 여럿 만드는 경우를 생각해봅시다. 단순한 구현은 다음과 같습니다.
+
+```js-nolint
+const boxes = [
+  { value: 1, getValue() { return this.value; } },
+  { value: 2, getValue() { return this.value; } },
+  { value: 3, getValue() { return this.value; } },
+];
 ```
 
-우리는 아래에 보이는 것과 같이 `doSomething()` 프로토타입에 속성을 추가할 수 있다.
+각 인스턴스에는 중복되고 불필요한 작업을 수행하는 고유한 함수 속성이 있기 때문에, 기대에 미치지 못하는 코드가 됩니다. 대신에, `getValue`를 모든 상자의 `[[Prototype]]`으로 이동할 수 있습니다.
 
 ```js
-function doSomething() {}
-doSomething.prototype.foo = "bar";
-console.log(doSomething.prototype);
+const boxPrototype = {
+  getValue() {
+    return this.value;
+  },
+};
+
+const boxes = [
+  { value: 1, __proto__: boxPrototype },
+  { value: 2, __proto__: boxPrototype },
+  { value: 3, __proto__: boxPrototype },
+];
 ```
 
-결과:
+이렇게 하면, 모든 상자의 `getValue` 메서드가 동일한 함수를 참조하므로, 메모리의 사용량이 줄어듭니다. 그러나 모든 객체 생성에 대해 `__proto__`를 수동으로 바인딩하는 것은 여전히 매우 불편합니다. 이것은 생성된 모든 객체에 대해 `[[Prototype]]`을 자동으로 설정하는 constructor 함수를 사용하는 경우입니다. 생성자는 [`new`](/ko/docs/Web/JavaScript/Reference/Operators/new)로 호출되는 함수입니다.
 
-```
-{
-    foo: "bar",
-    constructor: ƒ doSomething(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
+```js
+// 생성자 함수
+function Box(value) {
+  this.value = value;
 }
+
+// Box() 생성자에서 생성된 모든 속성
+Box.prototype.getValue = function () {
+  return this.value;
+};
+
+const boxes = [new Box(1), new Box(2), new Box(3)];
 ```
 
-이제 `new` 연산자를 사용해서 프로토타입 기반의 `doSomething()` 인스턴스를 생성할 수 있다. new 연산자를 사용하려면 함수 호출 형식에 `new` 접두사를 붙이기만하면 된다. `new` 연산자로 함수를 호출하면 해당 함수의 인스턴스 객체를 반환받는다. 그러면 속성들을 이 객체에 추가할 수 있다.
+`new Box(1)`이 `Box` 생성자 함수에서 생성된 "인스턴스"라고 말할 수 있는데, `Box.prototype`은 이전에 생성한 `boxPrototype` 객체와 크게 다르지 않습니다. `Box.prototype`은 그냥 일반 객체입니다. 생성자 함수에서 생성된 모든 인스턴스는 자동으로 생성자의 [`prototype`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 속성을 `[[Prototype]]`으로 갖게 됩니다. 즉, `Object.getPrototypeOf(new Box()) === Box.prototype`입니다. 기본적으로 `Constructor.prototype`에는 생성자 함수 자체를 참조하는 [`constructor`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) 속성이 하나 있습니다. 즉, `Box.prototype.constructor === Box`이기 때문에, 모든 인스턴스에서 원래 생성자에 접근할 수 있게 됩니다.
 
-다음의 코드를 실행해보자.
+> **참고:** 생성자 함수에서 반환된 값이 원시 값이 아니라면, 해당 값은 `new` 표현식의 결과가 됩니다. 이 경우, `[[Prototype]]`이 올바르게 바인딩되지 않을 수 있지만, 실제로는 많이 발생하지 않습니다.
+
+위 생성자 함수는 [classes](/ko/docs/Web/JavaScript/Reference/Classes)에서 다음과 같이 다시 작성할 수 있습니다.
 
 ```js
-function doSomething() {}
-doSomething.prototype.foo = "bar"; // add a property onto the prototype
-var doSomeInstancing = new doSomething();
-doSomeInstancing.prop = "some value"; // add a property onto the object
-console.log(doSomeInstancing);
+class Box {
+  constructor(value) {
+    this.value = value;
+  }
+
+  // 메서드는 Box.prototype에 생성됩니다.
+  getValue() {
+    return this.value;
+  }
+}
 ```
 
-실행하고나면 결과는 다음과 비슷할 것이다.
+클래스는 생성자 함수보다 문법적인 설탕입니다. 즉, 여전히 `Box.prototype`을 조작하여 모든 인스턴스의 동작을 변경할 수 있습니다. 그러나 클래스는 기본 프로토타입 메커니즘에 대한 추상화로 설계되었기 때문에, 이 자습서에서는 더 가벼운 생성자 함수 구문을 사용하여 프로토타입이 작동하는 방식을 보겠습니다.
 
-```
-{
-    prop: "some value",
-    __proto__: {
-        foo: "bar",
-        constructor: ƒ doSomething(),
-        __proto__: {
-            constructor: ƒ Object(),
-            hasOwnProperty: ƒ hasOwnProperty(),
-            isPrototypeOf: ƒ isPrototypeOf(),
-            propertyIsEnumerable: ƒ propertyIsEnumerable(),
-            toLocaleString: ƒ toLocaleString(),
-            toString: ƒ toString(),
-            valueOf: ƒ valueOf()
-        }
-    }
+`Box.prototype`은 모든 인스턴스의 `[[Prototype]]`과 동일한 객체를 참조하기 때문에, `Box.prototype`을 변경하여 모든 인스턴스의 동작을 변경할 수 있습니다.
+
+```js
+function Box(value) {
+  this.value = value;
 }
+Box.prototype.getValue = function () {
+  return this.value;
+};
+const box = new Box(1);
+
+// 인스턴스가 이미 생성된 후, `Box.prototype`을 변경합니다.
+Box.prototype.getValue = function () {
+  return this.value + 1;
+};
+box.getValue(); // 2
 ```
 
-위에서 본 것과 같이, doSomeInstancing 객체의 `__proto__` 는 doSomething.prototype 이다.
-그래서 도대체 `__proto__`는 무엇을 하는것인지 알아보자.
-우리가 doSomeInstancing의 속성에 접근할때 브라우저는 우선 doSomeInstancing이 그 속성을 갖고있는지 확인한다.
-만약 doSomeInstancing이 속성을 갖고있지 않다면, 브라우저는 doSomeInstancing의 `__proto__`(doSomething.prototype)가 그 속성을 갖고있는지 확인한다.
-만약 doSomeInstancing의 `__proto__`가 브라우저가 찾던 속성을 갖고 있다면, doSomething의 `__proto__`가 갖고있는 그 속성을 사용한다.
+결과적으로, 재할당 (`Constructor.prototype` (`Constructor.prototype = ...`))은 두 가지 이유로 나쁜 생각입니다.
 
-그렇지 않고, doSomeInstancing의 `__proto__`가 그 속성을 갖고있지 않을때에는
-doSomeInstancing의 `__proto__`의 `__proto__`가 그 속성을 갖는지 확인한다.
-기본적으로, 어떠한 함수던지 그 함수의 prototype 속성의 `__proto__`는 window\.Object.prototype이다.
-그러므로 브라우저는 doSomeInstancing의 `__proto__`의 `__proto__`(doSomething.prototype의 `__proto__`(다시말해, Object.prototype)) 에서 그 속성을 찾아본다.
-만약 그 속성을 doSomeInstancing의 `__proto__`의 `__proto__`에서 찾을 수 없다면 그다음엔 doSomeInstancing의 `__proto__`의 `__proto__`의 `__proto__`에서 찾을것이다.
-하지만 여기서 문제가 발생한다.
-doSomeInstancing의 `__proto__`의 `__proto__`의 `__proto__`는 존재할 수 없다(window\.Object.prototype의 `__proto__`는 null이기 때문).
-그제서야, 오직 모든 프로토타입 체인이 검사 되고 브라우저가 더이상 검사할 `__proto__`가 없을때에서야 브라우저는 우리가 찾던 값이 undefined라고 결론짓는다.
+- 재할당 전에 생성된 인스턴스의 `[[Prototype]]`은 이제 재할당 후 생성된 인스턴스의 `[[Prototype]]`과 다른 객체를 참조합니다. 하나의 `[[Prototype]]`을 변경해도 더 이상 다른 객체가 변경되지 않습니다.
+- `constructor` 속성을 수동으로 재설정하지 않는 한, `instance.contructor`에서 더 이상 생성자 함수를 추적할 수 없어 동작 방식을 예상하기 어려워집니다. 일부 기본 제공 연산은 `constructor` 속성도 읽으며 설정되지 않은 경우, 예상대로 작동하지 않을 수 있습니다.
 
-콘솔에 코드를 조금 더 추가해보자.
+`Constructor.prototype`은 인스턴스를 구성할 때만 유용합니다. 이는 `Function.prototype` 생성자 함수의 자체 소유의 프로토타입인 `Constructor.[[Prototype]]`과 아무 관련이 없습니다. 즉, `Object.getPrototypeOf(Constructor) === Function.prototype`입니다.
+
+### 리터럴의 암시적 생성자
+
+JavaScript의 일부 리터럴 구문은 암시적으로 `[[Prototype]]`을 설정하는 인스턴스를 생성합니다. 예를 들어,
 
 ```js
-function doSomething() {}
-doSomething.prototype.foo = "bar";
-var doSomeInstancing = new doSomething();
-doSomeInstancing.prop = "some value";
-console.log("doSomeInstancing.prop:      " + doSomeInstancing.prop);
-console.log("doSomeInstancing.foo:       " + doSomeInstancing.foo);
-console.log("doSomething.prop:           " + doSomething.prop);
-console.log("doSomething.foo:            " + doSomething.foo);
-console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);
-console.log("doSomething.prototype.foo:  " + doSomething.prototype.foo);
-```
+// 객체 리터럴 (`__proto__` 키 없음)은 자동으로 `[[Prototype]]`으로 `Object.prototype`을 갖습니다.
+const object = { a: 1 };
+Object.getPrototypeOf(object) === Object.prototype; // true
 
-이 코드의 결과는 아래와 같다.
+// 배열 리터럴은 자동으로 `Array.prototype`을 `[[Prototype]]`으로 갖습니다.
+const array = [1, 2, 3];
+Object.getPrototypeOf(array) === Array.prototype; // true
 
+// RegExp 리터럴은 자동으로 `RegExp.prototype`을 `[[Prototype]]`으로 갖습니다.
+const regexp = /abc/;
+Object.getPrototypeOf(regexp) === RegExp.prototype; // true
 ```
-doSomeInstancing.prop:      some value
-doSomeInstancing.foo:       bar
-doSomething.prop:           undefined
-doSomething.foo:            undefined
-doSomething.prototype.prop: undefined
-doSomething.prototype.foo:  bar
-```
-
-## 객체를 생성하는 여러 방법과 프로토타입 체인 결과
 
-### 문법 생성자로 객체 생성
+생성자 형태를 통해, "문법 설탕을 제거"할 수 있습니다.
 
 ```js
-var o = { a: 1 };
+const array = new Array(1, 2, 3);
+const regexp = new RegExp("abc");
+```
 
-// o 객체는 프로토타입으로 Object.prototype 을 가진다.
-// 이로 인해 o.hasOwnProperty('a') 같은 코드를 사용할 수 있다.
-// hasOwnProperty 라는 속성은 Object.prototype 의 속성이다.
-// Object.prototype 의 프로토타입은 null 이다.
-// o ---> Object.prototype ---> null
+예를 들어, [`map()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)과 같은 "배열 메서드"는 단순히 `Array.prototype`에 정의된 메서드입니다. 모든 배열 인스턴스에서 자동으로 사용할 수 있습니다.
 
-var a = ["yo", "whadup", "?"];
+> **경고:** 널리 알려진 한 가지 잘못된 기능이 있습니다. 바로 `Object.prototype` 또는 다른 내장 프로토타입 중 하나를 확장하는 것입니다. 이 잘못된 기능의 예는 `Array.prototype.myMethod = function () {...}`를 정의한 다음 모든 배열 인스턴스에서 `myMethod`를 사용하는 것입니다.
+>
+> 이러한 잘못된 기능을 원숭이 패칭(monkey patching)이라고 합니다. 원숭이 패칭을 하게 되면, 상위 호환성에 문제가 발생합니다. 언어가 나중에 이 메서드를 추가하지만 다른 서명을 사용하면, 코드가 깨질 수 있기 대문입니다. 이로 인해, [SmooshGate](https://developer.chrome.com/blog/smooshgate/)와 같은 사고가 발생했으며, JavaScript는 "웹을 중단하지 않으려" 시도하므로 언어가 발전하는 데 있어 큰 장애물이 될 수 있습니다.
+>
+> 내장 제공 프로토타입을 확장해도 좋은 `유일한` 경우는 최신 JavaScript 엔진의 기능을 이전 버전에서도 사용할 수 있게 해줄 때입니다(backport). 예로,`Array.prototype.forEach`가 있습니다.
 
-// Array.prototype을 상속받은 배열도 마찬가지다.
-// (이번에는 indexOf, forEach 등의 메소드를 가진다)
-// 프로토타입 체인은 다음과 같다.
-// a ---> Array.prototype ---> Object.prototype ---> null
+흥미롭게도, 일부 내장 생성자의 `prototype` 속성은 역사적인 이유로 해당 인스턴스 자체입니다. 예를 들어, `Number.prototype`은 숫자 0이고, `Array.prototype`은 빈 배열이고, `RegExp.prototype`은 `/(?:)/`입니다.
 
-function f() {
-  return 2;
-}
+```js
+Number.prototype + 1; // 1
+Array.prototype.map((x) => x + 1); // []
+String.prototype + "a"; // "a"
+RegExp.prototype.source; // "(?:)"
+Function.prototype(); // Function.prototype은 자체로 프로그램에 아무 작업도 수행하지 말라고 지시하는 (no-operation, no-op) 함수입니다.
+```
 
-// 함수는 Function.prototype 을 상속받는다.
-// (이 프로토타입은 call, bind 같은 메소드를 가진다)
-// f ---> Function.prototype ---> Object.prototype ---> null
+그러나, 이것은 사용자 정의 생성자나 `Map`과 같은 최신 생성자의 경우에는 해당되지 않습니다.
+
+```js
+Map.prototype.get(1);
+// Uncaught TypeError: 호환되지 않는 Map.prototype에서 호출된 get 메서드
 ```
 
-### 생성자를 이용
+### 더 긴 상속 체인 구축
 
-자바스크립트에서 생성자는 단지 [new 연산자](/en/JavaScript/Reference/Operators/new)를 사용해 함수를 호출하면 된다.
+`Constructor.prototype` 속성은 `Constructor.prototype`의 자체 `[[Prototype]]`을 포함하여, 생성자 인스턴스의 `[[Prototype]]`이 됩니다. 기본적으로 `Constructor.prototype`은 일반 객체입니다. 즉, `Object.getPrototypeOf(Constructor.prototype) === Object.prototype` 입니다. 유일한 예외는 `Object.prototype` 자체이며, `[[Prototype]]`은 `null`입니다. 즉, `Object.getPrototypeOf(Object.prototype) === null`입니다. 따라서, 일반적인 생성자는 다음 프로토타입 체인을 빌드합니다.
 
 ```js
-function Graph() {
-  this.vertexes = [];
-  this.edges = [];
-}
-
-Graph.prototype = {
-  addVertex: function (v) {
-    this.vertexes.push(v);
-  },
-};
+function Constructor() {}
 
-var g = new Graph();
-// g 'vertexes' 와 'edges'를 속성으로 가지는 객체이다.
-// 생성시 g.[[Prototype]]은 Graph.prototype의 값과 같은 값을 가진다.
+const obj = new Constructor();
+// obj ---> Constructor.prototype ---> Object.prototype ---> null
 ```
 
-### Object.create 이용
+더 긴 프로토타입 체인을 구축하려면, [`Object.setPrototypeOf()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) 함수를 통해 `Constructor.prototype`의 `[[Prototype]]`을 설정할 수 있습니다.
 
-ECMAScript 5는 새로운 방법을 도입했다. [Object.create](/en/JavaScript/Reference/Global_Objects/Object/create)라는 메소드를 호출하여 새로운 객체를 만들 수 있다. 생성된 객체의 프로토타입은 이 메소드의 첫 번째 인수로 지정된다.
+```js
+function Base() {}
+function Derived() {}
+// `Derived.prototype`의 `[[Prototype]]`을 `Base.prototype`으로 설정합니다.
+Object.setPrototypeOf(Derived.prototype, Base.prototype);
+
+const obj = new Derived();
+// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null
+```
+
+클래스 문법 용어로, 이는 [`extends`](/ko/docs/Web/JavaScript/Reference/Classes/extends) 구문을 사용하는 것과 동일합니다.
 
 ```js
-var a = { a: 1 };
-// a ---> Object.prototype ---> null
+class Base {}
+class Derived extends Base {}
 
-var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
-console.log(b.a); // 1 (상속됨)
+const obj = new Derived();
+// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null
+```
 
-var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
+상속 체인을 구축하기 위해, {{jsxref("Object.create()")}}를 사용하는 일부 레거시 코드를 볼 수도 있습니다. 그러나 이것은 `prototype` 속성을 재할당하고 [`constructor`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) 속성을 제거하기 때문에, 오류가 더 많이 발생할 수 있습니다. 생성자가 아직 인스턴스를 생성하지 않은 경우에는 성능에서 얻는 이점 또한 체감하기 어렵습니다.
+
+```js example-bad
+function Base() {}
+function Derived() {}
+//  `[[Prototype]]`으로 `Base.prototype`을 사용하여 `Derived.prototype을 새로운 객체에 다시 할당합니다.
+// 이렇게 하지 마세요, 대신 `Object.setPrototypeOf`를 사용하여 변경하세요.
 
-var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty); // undefined이다. 왜냐하면 d는 Object.prototype을 상속받지 않기 때문이다.
+Derived.prototype = Object.create(Base.prototype);
 ```
 
-### `class` 키워드 이용
+### 프로토타입 심층 분석
+
+뒤에서 어떠한 일이 일어나는지 좀 더 자세히 살펴보겠습니다.
 
-ECMAScript2015에는 몇 가지 키워드가 도입되어 [class](/ko/docs/Web/JavaScript/Reference/Classes)를 구현하였다. 이런 생성 방식은 클래서 기반 언어의 개발자들에게 친숙하게 다가오나 동작 방식이 같지는 않다. 자바스크립트는 여전히 프로토타입 기반으로 남아있다. 새로 도입된 키워드는 {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, 그리고 {{jsxref("Operators/super", "super")}}가 있다.
+위에서 언급한 것처럼, JavaScript에서 함수는 속성을 가질 수 있습니다. 모든 함수에는 `prototype`이라는 특수한 속성이 있습니다. 아래의 예제 코드는 독립적이라는 것에 유의하세요(아래의 코드 이외에는 웹페이지에 다른 자바스크립트가 없다고 가정해도 문제 없습니다).
+
+최적의 실습을 위해, 콘솔을 열고 "console" 탭으로 이동하여 아래의 JavaScript 코드를 복사하여 붙여넣고, 엔터/Return 키를 눌러서 실행하는 것이 좋습니다(콘솔은 대부분 웹 브라우저의 개발자 도구에 포함되어 있습니다. 자세한 내용은 [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), [Chrome DevTools](https://developer.chrome.com/docs/devtools/) 및 [Edge DevTools](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/)을 참고하세요).
 
 ```js
-"use strict";
+function doSomething() {}
+console.log(doSomething.prototype);
+// 함수 선언 방법은 중요하지 않습니다. JavaScript의 함수는 항상 기본 프로토타입 속성을 갖습니다.
+// 한 가지 예외가 있습니다. 화살표 함수에는 기본 프로토타입 속성이 없습니다.
+const doSomethingFromArrowFunction = () => {};
+console.log(doSomethingFromArrowFunction.prototype);
+```
 
-class Polygon {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-}
+위 내용을 토대로, 콘솔을 보면 `doSomething()` 은 기본 `prototype` 속성을 가지고 있습니다. 코드를 실행한 뒤에 콘솔에서는 다음과 유사한 형태의 객체가 표시되어야 합니다.
 
-class Square extends Polygon {
-  constructor(sideLength) {
-    super(sideLength, sideLength);
-  }
-  get area() {
-    return this.height * this.width;
-  }
-  set sideLength(newLength) {
-    this.height = newLength;
-    this.width = newLength;
+```plain
+{
+  constructor: ƒ doSomething(),
+  [[Prototype]]: {
+    constructor: ƒ Object(),
+    hasOwnProperty: ƒ hasOwnProperty(),
+    isPrototypeOf: ƒ isPrototypeOf(),
+    propertyIsEnumerable: ƒ propertyIsEnumerable(),
+    toLocaleString: ƒ toLocaleString(),
+    toString: ƒ toString(),
+    valueOf: ƒ valueOf()
   }
 }
-
-var square = new Square(2);
 ```
 
-### 성능
+> **참고:** Chrome 콘솔은 `[[Prototype]]`을 사용하여, 명세의 용어에 따라 객체의 프로토타입을 나타냅니다. Firefox는 `<prototype>`을 사용하는데, 일관성을 위해 `[[Prototype]]`을 사용합니다.
 
-프로토타입 체인에 걸친 속성 검색으로 성능에 나쁜 영향을 줄 수 있으며, 때때로 치명적일 수 있다. 또한 존재하지도 않는 속성에 접근하려는 시도는 항상 모든 프로토타입 체인인 전체를 탐색해서 확인하게 만든다.
-
-객체의 속성에 걸쳐 루프를 수행 하는 경우 프로토타입 체인 전체의 **모든** 열거자 속성에 대하여 적용된다. 객체 개인 속성인지 프로토타입 체인상 어딘가에 있는지 확인하기 위해서는 Object.prototype에서 모든 오브젝트로 상속된 [`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 메소드를 이용할 필요가 있다. 다음 코드를 통하여 구체적인 예를 확인하여 보자.
+아래와 같이, `doSomething()`의 프로토타입에 속성을 추가할 수 있습니다.
 
 ```js
-console.log(g.hasOwnProperty("vertices"));
-// true
-
-console.log(g.hasOwnProperty("nope"));
-// false
+function doSomething() {}
+doSomething.prototype.foo = "bar";
+console.log(doSomething.prototype);
+```
 
-console.log(g.hasOwnProperty("addVertex"));
-// false
+결과:
 
-console.log(g.__proto__.hasOwnProperty("addVertex"));
-// true
+```plain
+{
+  foo: "bar",
+  constructor: ƒ doSomething(),
+  [[Prototype]]: {
+    constructor: ƒ Object(),
+    hasOwnProperty: ƒ hasOwnProperty(),
+    isPrototypeOf: ƒ isPrototypeOf(),
+    propertyIsEnumerable: ƒ propertyIsEnumerable(),
+    toLocaleString: ƒ toLocaleString(),
+    toString: ƒ toString(),
+    valueOf: ƒ valueOf()
+  }
+}
 ```
 
-[`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 메소드만이 속성을 확인하고 프로토타입 체인 전체를 훑지 않게 할 수 있다.
-
-참고: [`undefined`](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined)인지 여부만 확인하는 것으로는 충분하지 않다. 여전히 속성이 존재할 수도 있는데 단지 그 값에 `undefined`가 할당되어 있을 수도 있기 때문이다.
+이제 `new` 연산자를 사용해서 프로토타입 기반의 `doSomething()` 인스턴스를 생성할 수 있습니다. new 연산자를 사용하려면 `new` 접두어를 제외하고 일반적으로 함수를 호출하세요. `new` 연산자로 함수를 호출하면 해당 함수의 인스턴스 객체를 반환받습니다. 그러면 속성들을 이 객체에 추가할 수 있습니다.
 
-### 좋지 않은 사례: 기본 프로타입의 확장 변형
+다음의 코드를 실행해봅시다.
 
-Object.prototype 혹은 빌트인 프로토타입의 확장은 종종 이용되지만 오용이다.
+```js
+function doSomething() {}
+doSomething.prototype.foo = "bar"; // 프로토타입에 속성 추가
+const doSomeInstancing = new doSomething();
+doSomeInstancing.prop = "some value"; // 객체에 속성 추가
+console.log(doSomeInstancing);
+```
 
-이 기법은 Monkey patching으로 불리며 캡슐화를 망가뜨린다. Prototype.js와 같은 유명한 프레임워크에서도 사용되지만, 빌트인 타입에 비표준 기능을 추가하는 것은 좋은 생각이 아니다.
+실행한 후에는 결과는 아래와 비슷할 겁니다.
 
-유일하게 좋은 사용 예라면, 새로운 자바스크립트 엔진에 Array.forEach등의 새로운 기능을 추가하면서 빌트인 프로토타입을 확장하는 것 정도다.
+```plain
+{
+  prop: "some value",
+  [[Prototype]]: {
+    foo: "bar",
+    constructor: ƒ doSomething(),
+    [[Prototype]]: {
+      constructor: ƒ Object(),
+      hasOwnProperty: ƒ hasOwnProperty(),
+      isPrototypeOf: ƒ isPrototypeOf(),
+      propertyIsEnumerable: ƒ propertyIsEnumerable(),
+      toLocaleString: ƒ toLocaleString(),
+      toString: ƒ toString(),
+      valueOf: ƒ valueOf()
+    }
+  }
+}
+```
 
-## 예
+위에서 볼 수 있듯이, `doSomeInstancing`의 `[[Prototype]]`은 `doSomething.prototype`입니다. 그러나 이것은 어떤 역할을 하나요? `doSomeInstancing`의 속성에 접근하면 런타임은 먼저 `doSomeInstancing`에 해당 속성이 있는지 확인합니다.
 
-`B는 A를 상속한다`:
+`doSomeInstancing`에 속성이 없으면, 런타임은 `doSomeInstancing.[[Prototype]]` (`doSomething.prototype`)에서 속성을 찾습니다. `doSomeInstancing.[[Prototype]]`에 찾고 있는 속성이 있으면 `doSomeInstancing.[[Prototype]]`의 해당 속성이 사용됩니다.
 
-```js
-function A(a) {
-  this.varA = a;
-}
+그렇지 않고, `doSomeInstancing.[[Prototype]]`에 속성이 없으면, `doSomeInstancing.[[Prototype]].[[Prototype]]`에서 속성을 확인합니다. 기본적으로, 함수의 `prototype` 속성 중 `[[Prototype]]`은 `Object.prototype`입니다. 따라서, `doSomeInstancing.[[Prototype]].[[Prototype]]` (`doSomething.prototype.[[Prototype]]`(`Object.prototype`)) 은 검색 중인 속성을 찾습니다.
 
-// A의 정의에서 this.varA는 항상 A.prototype.varA가 가려버리는데
-// prototype에 varA를 다시 넣는 이유는 무엇인가?
-A.prototype = {
-  varA: null, // 아무것도 안하면서 varA를 쓰는 이유가 있을까?
-  // 아마도 숨겨진 클래스의 할당 구조를 최적화 하려는 것인가?
-  // https://developers.google.com/speed/articles/optimizing-javascript#Initializing-instance-variables
-  // 모든 객체의 varA가 동일하게 초기화 되어야 상기 링크 내용이 유효할 수 있다.
-  doSomething: function () {
-    // ...
-  },
-};
+속성이 `doSomeInstancing.[[Prototype]].[[Prototype]]`에 없으면, `doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]`을 통해 찾습니다. 그러나, `doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]`이 존재하지 않는 문제가 있는데, 그 이유는 `Object.prototype.[[Prototype]]`이 `null`이기 때문입니다. 그런 다음, `[[Prototype]]`의 전체 프로토타입 체인을 살펴본 후, 런타임은 속성이 존재하지 않는다고 주장하고 속성의 값이 `undefined`이라고 결정합니다.
 
-function B(a, b) {
-  A.call(this, a);
-  this.varB = b;
-}
-B.prototype = Object.create(A.prototype, {
-  varB: {
-    value: null,
-    enumerable: true,
-    configurable: true,
-    writable: true,
-  },
-  doSomething: {
-    value: function () {
-      // override
-      A.prototype.doSomething.apply(this, arguments); // call super
-      // ...
-    },
-    enumerable: true,
-    configurable: true,
-    writable: true,
-  },
-});
-B.prototype.constructor = B;
+콘솔에 코드를 추가로 입력해 봅시다.
 
-var b = new B();
-b.doSomething();
+```js
+function doSomething() {}
+doSomething.prototype.foo = "bar";
+const doSomeInstancing = new doSomething();
+doSomeInstancing.prop = "some value";
+console.log("doSomeInstancing.prop:     ", doSomeInstancing.prop);
+console.log("doSomeInstancing.foo:      ", doSomeInstancing.foo);
+console.log("doSomething.prop:          ", doSomething.prop);
+console.log("doSomething.foo:           ", doSomething.foo);
+console.log("doSomething.prototype.prop:", doSomething.prototype.prop);
+console.log("doSomething.prototype.foo: ", doSomething.prototype.foo);
 ```
 
-중요한 점은:
+코드의 결과는 아래와 같습니다.
 
-- `.prototype`에 타입이 정의되어 있다.
-- `Object.create()`을 이용하여 상속한다.
+```plain
+doSomeInstancing.prop:      some value
+doSomeInstancing.foo:       bar
+doSomething.prop:           undefined
+doSomething.foo:            undefined
+doSomething.prototype.prop: undefined
+doSomething.prototype.foo:  bar
+```
 
-## `prototype` `그리고 Object.getPrototypeOf`
+## 프로토타입 체인을 만들고 변경하는 다양한 방법
 
-Java나 C++에 익숙한 개발자는 클래스라는 것도 없고, 모든 것이 동적이고 실행 시 결정되는 자바스크립트의 특징 때문에 어려움을 겪을 수도 있다. 모든 것은 객체이고, 심지의 "class"를 흉내내는 방식도 단지 함수 오브젝트를 이용하는 것 뿐이다.
+객체를 생성하고 프로토타입 체인을 변경하는 다양한 방법을 만나보았습니다. 각 접근 방식의 장단점을 비교하여, 다양한 방식을 체계적으로 요약합니다.
 
-이미 알아챘겠지만 우리의 함수 A도 특별한 속성 prototype를 가지고 있다. 이 특별한 속성은 자바스크립트의 new 연산자와 함께 쓰인다. 프로토타입 객체는 새로 만들어진 인스턴스의 내부 `[[Prototype]]` 속성에 복사되어 참조된다. 가령, `var a1 = new A()`를 수행할 때, this를 포함하고 있는 함수을 수행하기 전, 메모리에 새로 생성된 객체를 생성한 직후 자바스크립트는 a1.`[[Prototype]] = A.prototype`를 수행한다. 그 인스턴스의 속성에 접근하려 할 때 자바스크립트는 그 객체의 개인 속성인지 우선 확인하고 그렇지 않은 경우에 `[[Prototype]]`에서 찾는다. 이것은 prototype에 정의한 모든 것은 모든 인스턴스가 효과적으로 공유한다는 뜻이며, 심지어 프로토타입의 일부를 나중에 변경하다고 해도 이미 생성되어 있는 인스턴스는 필요한 경우 그 변경 사항에 접근할 수 있다.
+### 문법 생성자로 객체 생성
 
-위의 예에서, 만일 `var a1 = new A(); var a2 = new A();` 그 후 `a1.doSomething`이 `Object.getPrototypeOf(a1).doSomething`를 가리키게 되는 것은`A.prototype.doSomething`으로 정의한 것과 같게 된다. 즉, `Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething`.
+```js
+const o = { a: 1 };
+// 새롭게 만들어진 각체 o는 Object.prototype을 [[Prototype]]으로 가지고 있습니다.
+// Object.prototype의 프로토타입은 null 입니다.
+// o ---> Object.prototype ---> null
 
-요약 하자면, prototype은 타입 정의를 위한 것이고, `Object.getPrototypeOf()`는 모든 인스턴스가 공유한다.
+const b = ["yo", "whadup", "?"];
+// Array.prototype을 상속받은 배열도 마찬가지 입니다.
+// (이번에는 indexOf, forEach 등의 메소드를 가집니다)
+// 프로토타입 체인은 다음과 같습니다.
+// b ---> Array.prototype ---> Object.prototype ---> null
 
-`[[Prototype]]`은 재귀적으로 탐색된다. 즉, `a1.doSomething`, `Object.getPrototypeOf(a1).doSomething`,`Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething` 등등, 이미 발견했거나 `Object.getPrototypeOf`가 `null`을 반환할 때까지 반복된다.
+function f() {
+  return 2;
+}
+// 함수는 Function.prototype 을 상속받습니다.
+// (이 프로토타입은 call, bind 같은 메소드를 가집니다).
+// f ---> Function.prototype ---> Object.prototype ---> null
 
-따라서 다음 호출에 대하여
+const p = { b: 2, __proto__: o };
 
-```js
-var o = new Foo();
+// 새로 생성된 객체의 [[Prototype]]이 __proto__  리터럴 속성을 통해 다른 객체를 가리키도록 할 수 있습니다.
+// (Object.prototype.__proto__ 접근자와 혼동하지 마세요).
+// p ---> o ---> Object.prototype ---> null
 ```
 
-자바스크립트는 실제로 다음 작업을 수행한다.
+<table class="standard-table">
+  <caption>
+    <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 초기자</a>에서 <code>__proto__</code> 키 사용의 장점과 단점
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="row">장점</th>
+      <td>
+        모든 최신 엔진에서 지원됩니다. 객체가 아닌 것을 <code>__proto__</code>키로 지정하면 예외를 발생시키지 않고 조용히 실패합니다. {{jsxref("Object/proto", "Object.prototype.__proto__")}} 설정자와 반대로, 객체 리터럴 초기자의 <code>__proto__</code>가 표준화되고 최적화되었으며 {{jsxref("Object.create")}}보다 성능이 더 뛰어날 수 있습니다. 객체 생성 시 추가 자체 속성을 선언하는 것이 {{jsxref("Object.create")}}보다 편리합니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">단점</th>
+      <td>
+        IE10 이하에서는 지원하지 않습니다. 차이점을 모르는 사람들이 {{jsxref("Object/proto", "Object.prototype.__proto__")}}와 혼동하기 쉽습니다.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### 생성자 함수를 이용
+
+자바스크립트에서 생성자는 단지 [new 연산자](/en/JavaScript/Reference/Operators/new)를 사용해 함수를 호출하면 된다.
 
 ```js
-var o = new Object();
-o.[[Prototype]] = Foo.prototype;
-Foo.call(o);
-```
+function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
 
-(혹은 그런 비슷한 작업, 내부 구현은 다를 수 있다) 그리고 나중에 다음을 수행하면
+Graph.prototype.addVertex = function (v) {
+  this.vertices.push(v);
+};
 
-```js
-o.someProp;
+const g = new Graph();
+// g는 자체 속성으로 'vertices' 와 'edges'를 가지는 객체이다.
+// g.[[Prototype]]은 new Graph()가 실행될 때 Graph.prototype의 값이 됩니다.
 ```
 
-자바스크립트는 o가 속성 someProp을 가졌는지 확인하고, 아니면 `Object.getPrototypeOf(o).someProp`, 또 아니면 `Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp` 등으로 계속 된다.
+<table class="standard-table">
+  <caption>
+    생성자 함수 사용의 장점과 단점
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="row">장점</th>
+      <td>
+        모든 엔진에서 지원합니다(IE 5.5까지도 지원). 또한, 매우 빠르고, 표준에 따르고, JIT 최적화가 가능합니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">단점</th>
+      <td>
+        <ul>
+          <li>이 방법을 사용하기 위해서는, 해당 함수를 초기화해야 합니다. 이 초기화 중에 생성자는 각각의 객체마다 생성해야 하는 고유한 정보를 저장할 수 있습니다. 이 고유한 정보는 한 번만 생성되고, 잠재적으로 문제를 발생시킬 수 있습니다.</li>
+          <li>생성자의 초기화는 원치 않는 메서드를 객체에 넣을 수 있습니다.</li>
+        </ul>
+        <p>둘 다 실제로는 일반적으로 문제가 되지 않습니다.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
-## 프로토타입 상속의 종류
+### Object.create 이용
 
-프로토타입 상속에는 3가지 종류가 있다 : 위임형 상속, 연결형 상속, 함수형 상속.
+{{jsxref("Object.create()")}}을 호출하면 새로운 객체가 생성됩니다. 이 객체의 `[[Prototype]]`은 함수의 첫 번째 인수입니다.
 
-### 위임형 상속(Delegation inheritance)
+```js
+const a = { a: 1 };
+// a ---> Object.prototype ---> null
 
-위임형 상속에서 프로토타입 객체는 다른 객체의 기반이 된다. 위임 프로토타입을 상속받을 경우 새 객체는 해당 프로토타입에 대한 참조를 가지고 있다.
+const b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
 
-새 객체의 속성에 접근할 때, 해당 객체가 직접적으로 속성을 소유하고 있는지 먼저 체크한다. 없다면 다음 순서로 `[[Prototype]]`을 체크한다. 이 과정은 프로토타입 체인을 따라서 모든 객체의 프로토타입 체인의 최상위에 있는 객체인 `Object.prototype`에 도달할 때 까지 반복된다.
+const c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
 
-메소드를 위임 상속할 경우 모든 객체가 각 메소드에에 대해 하나의 코드를 공유하므로 메모리를 절약할 수 있다.
+const d = Object.create(null);
+// d ---> null (d는 프로토타입으로 직접 null을 갖는 객체입니다)
+console.log(d.hasOwnProperty);
+// undefined, d는 Object.prototype에서 상속받지 않기 때문입니다.
+```
 
-Javascript에서 이를 구현하는 방법은 여러가지가 있는데 ES6에서는 아래와 같은 방식이 흔하다:
+<table class="standard-table">
+  <caption>
+    {{jsxref("Object.create")}}의 장점과 단점
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="row">장점</th>
+      <td>
+        모든 최신 엔진을 지원합니다. 생성 시 객체의 <code>[[Prototype]]</code>을 직접 설정할 수 있으므로, 런타임에서 객체를 더욱 최적화할 수 있습니다. 또한 <code>Object.create(null)</code>를 사용하여 프로토타입 없이 객체를 생성할 수 있습니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">단점</th>
+      <td>
+        IE8 이하에서는 지원하지 않습니다. 그러나 Microsoft는 IE8 이하를 실행하는 시스템에 대한 확장 지원을 중단했기 때문에 대부분의 응용 프로그램에서는 문제가 되지 않습니다. 또한, 두 번째 인수를 사용하는 경우 느린 객체 초기화로 인해 성능이 저하될 수 있습니다. 각 객체 설명자 속성에는 자체적으로 구분된 설명자 객체가 있기 때문입니다. 객체 형태를 가지는 수십만 개의 객체 설명자를 처리할 때, 지연 시간이 심각한 문제가 될 수 있습니다.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### class를 이용하는 방법
 
 ```js
-class Greeter {
-  constructor(name) {
-    this.name = name || "John Doe";
+class Rectangle {
+  constructor(height, width) {
+    this.name = "Rectangle";
+    this.height = height;
+    this.width = width;
   }
-  hello() {
-    return `Hello, my name is ${this.name}`;
+}
+
+class FilledRectangle extends Rectangle {
+  constructor(height, width, color) {
+    super(height, width);
+    this.name = "Filled rectangle";
+    this.color = color;
   }
 }
 
-const george = new Greeter("George");
-const msg = george.hello();
-console.log(msg); // Hello, my name is George
+const filledRectangle = new FilledRectangle(5, 10, "blue");
+// filledRectangle ---> FilledRectangle.prototype ---> Rectangle.prototype ---> Object.prototype ---> null
 ```
 
-`Object.create(null)`. 을 통해 프로토타입을 {{jsxref("null")}}로 지정하여 속성 위임 없이 객체를 생성할 수 있다..
-
-이 방법의 큰 단점 중 하나는 상태를 저장하는데 그리 좋은 방법이 아니라는 것이다. 객체나 배열의 상태를 변경하게 되면 같은 프로토타입을 공유하는 모든 객체의 상태가 변경된다.
+<table class="standard-table">
+  <caption>
+    클래스의 장점과 단점
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="row">장점</th>
+      <td>
+        모든 최신 엔진에서 지원됩니다. 매우 높은 가독성과 유지 보수성. <a href="/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields">비공개 속성</a>은 프로토타입 상속에서 자잘한 대체가 없는 기능입니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">단점</th>
+      <td>
+        특히 비공개 속성이 있는 클래스는 기존 클래스보다 덜 최적화되어 있습니다(엔진 구현자가 이를 개선하기 위해 노력하고 있습니다). 이전 환경에서는 지원되지 않으며 일반적으로 실제 서비스의 운영 환경에서 클래스를 사용하려면 트랜스파일러(transpilers)가 필요합니다.
+      </td>
+    </tr>
+
+  </tbody>
+</table>
+
+### Object.setPrototypeOf()를 이용하는 방법
+
+위의 모든 메서드는 객체 생성 시 프로토타입 체인을 설정하지만, [`Object.setPrototypeOf()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf)는 이미 생성된 객체의 내부 `[[Prototype]]` 속성을 변경할 수 있습니다.
 
-상태 변경이 전파되는 것을 막으려면 각 객체마다 상태 값의 복사본을 만들어야 한다.
-
-### 연결형 상속(Concatenative inheritance)
-
-연결형 상속은 한 객체의 속성을 다른 객체에 모두 복사함으로써 상속을 구현하는 방법이다.
+```js
+const obj = { a: 1 };
+const anotherObj = { b: 2 };
+Object.setPrototypeOf(obj, anotherObj);
+// obj ---> anotherObj ---> Object.prototype ---> null
+```
 
-이 상속법은 Javascript 객체의 동적 확장성을 이용한 방법이다. 객체 복사는 속성의 초기값을 저장하기 위한 좋은 방법이다: 이 방식은 {{jsxref("Object.assign()")}}을 통해 구현하는 것이 보통이며 ES6 이전에 Lodash, Underscore, jQuery등의 라이브러리들이 `.extend()` 와 비슷한 메소드로 제공한 방법이다.
+<table class="standard-table">
+  <caption>
+   {{jsxref("Object.setPrototypeOf")}}의 장점과 단점
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="row">장점</th>
+      <td>
+        모든 최신 엔진에서 지원됩니다. 객체의 프로토타입을 동적으로 조작할 수 있으며 <code>Object.create(null)</code>로 만든 프로토타입이 없는 객체에 프로토타입을 적용할 수 있습니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">단점</th>
+      <td>
+        성능이 좋지 않습니다. 객체 생성 시 프로토타입을 설정할 수 있는 경우 피해야 합니다. 많은 엔진들이 프로토타입을 최적화하고 미리 인스턴스를 호출할 때 메모리에서 메서드의 위치를 추측하려고 합니다. 그러나 프로토타입을 동적으로 설정하면 이러한 모든 최적화가 중단됩니다. 명세에 따라 작동하도록, 일부 엔진이 최적화 해제를 위해 코드를 다시 컴파일하게 할 수 있습니다. IE8 이하에서는 지원하지 않습니다.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### \_\_proto\_\_ 접근자를 사용하는 방법
+
+모든 객체는 [`Object.prototype.__proto__`](//docs/Web/JavaScript/Reference/Global_Objects/Object/proto) 설정자를 상속하며, 이는 기존 객체의 `[[Prototype]]`을 설정하는 데 사용할 수 있습니다(`__proto__` 키가 객체에서 재정의되지 않은 경우).
+
+> **경고:** `Object.prototype.__proto__` 접근자는 **비표준**이며 더 이상 사용되지 않습니다. 대신 거의 항상 `Object.setPrototypeOf`를 사용해야 합니다.
 
 ```js
-const proto = {
-  hello: function hello() {
-    return `Hello, my name is ${this.name}`;
-  },
-};
-
-const george = Object.assign({}, proto, { name: "George" });
-const msg = george.hello();
-console.log(msg); // Hello, my name is George
+const obj = {};
+// 이것을 사용하지 마세요. 오직 예시일 뿐입니다.
+obj.__proto__ = { barProp: "bar val" };
+obj.__proto__.__proto__ = { fooProp: "foo val" };
+console.log(obj.fooProp);
+console.log(obj.barProp);
 ```
 
-연결형 상속은 매우 좋은 방법이며 클로져와 같이 사용한다면 훨씬 효과적인 상속 방식입니다..
+<table class="standard-table">
+  <caption>
+    {{jsxref("Object/proto","__proto__")}} 속성 설정의 장점과 단점
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="row">장점</th>
+      <td>
+        모든 최신 엔진에서 지원됩니다. {{jsxref("Object/proto","__proto__")}}를 객체가 아닌 것으로 설정하면 조용히 실패합니다. 예외를 던지지 않습니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">단점</th>
+      <td>
+        성능이 떨어지고 더 이상 사용되지 않습니다. 많은 엔진이 프로토타입을 최적화하고 미리 인스턴스를 호출할 때 메모리에서 메서드의 위치를 추측하려고 합니다. 그러나 프로토타입을 동적으로 설정하면 이러한 모든 최적화가 중단되고 일부 엔진이 명세에 따라 작동하도록 코드의 최적화 해제를 위해 다시 컴파일하도록 강제할 수 있습니다. IE10 이하에서는 지원하지 않습니다. {{jsxref("Object/proto","__proto__")}} 설정자는 표준 선택 사항이므로, 모든 플랫폼에서 작동하지 않을 수 있습니다. 대신 거의 항상 {{jsxref("Object.setPrototypeOf")}}를 사용해야 합니다.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## 성능
+
+프로토타입 체인에서 상위에 있는 속성에 대한 조회 시간은 성능에 부정적인 영향을 미칠 수 있으며, 이는 성능 중심의 코드에선 심각한 문제입니다. 또한, 존재하지도 않는 속성에 접근하려는 시도는 항상 모든 프로토타입 체인인 전체를 탐색하게 됩니다.
+
+또한, 객체의 속성을 반복할 때, 프로토타입 체인에 있는 **모든"** 열거 가능한 속성이 열거됩니다. 객체가 프로토타입 체인이 아닌 *itself*에 정의된 속성을 가지고 있는지 확인하려면, [`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) 또는 [`Object.hasOwn`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn) 메서드를 사용해야 합니다. `[[Prototype]]`으로 `null`이 있는 객체를 제외한 모든 객체는 프로토타입 체인에서 더 아래로 재정의되지 않는 한 `Object.prototype`에서 [`hasOwnProperty`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)를 상속합니다. 구체적인 예를 제공하기 위해 위의 그래프 예제 코드를 사용하여 설명하겠습니다.
 
-### 함수형 상속(Functional inheritance)
+```js
+function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
 
-함수형 상속(Functional inheritance)이라는 단어는 Douglas Crockford가 자신의 저서 "JavaScript: The Good Parts"에서 창조한 단어이다. 이 방법은 새 속성들을 연결형 상속으로 쌓되 상속 기능을 Factory 함수로 만들어 사용하는 방식이다.
+Graph.prototype.addVertex = function (v) {
+  this.vertices.push(v);
+};
 
-기존의 객체를 확장하는데 쓰이는 함수를 일반적으로 믹스인 함수라 칭한다. 객체 확장에 함수를 사용하는 가장 큰 이점은 Private Data를 클로져를 통해 캡슐화 시킬 수 있다는 점이다.
+const g = new Graph();
+// g ---> Graph.prototype ---> Object.prototype ---> null
 
-다르게 말하자면 Private 상태를 지정할 수 있다는 의미이다.
+g.hasOwnProperty("vertices"); // true
+Object.hasOwn(g, "vertices"); // true
 
-특정 함수를 통할 필요 없이 public 접근이 가능한 속성에 대해 접근 제한을 거는 것은 문제가 있다. 따라서 private 클로져에 속성 값을 숨겨야 하며 이는 아래와 같이 구현한다:
+g.hasOwnProperty("nope"); // false
+Object.hasOwn(g, "nope"); // false
 
-```js
-// import Events from 'eventemitter3';
-
-const rawMixin = function () {
-  const attrs = {};
-  return Object.assign(
-    this,
-    {
-      set(name, value) {
-        attrs[name] = value;
-        this.emit("change", {
-          prop: name,
-          value: value,
-        });
-      },
-      get(name) {
-        return attrs[name];
-      },
-    },
-    Events.prototype,
-  );
-};
+g.hasOwnProperty("addVertex"); // false
+Object.hasOwn(g, "addVertex"); // false
 
-const mixinModel = (target) => rawMixin.call(target);
-const george = { name: "george" };
-const model = mixinModel(george);
-model.on("change", (data) => console.log(data));
-model.set("name", "Sam");
-/*
-{
-  prop: 'name',
-  value: 'Sam'
-}
-*/
+Object.getPrototypeOf(g).hasOwnProperty("addVertex"); // true
 ```
 
-`attrs` 을 public 속성에서 private 영역으로 옮겨서 public API를 통한 접근을 차단할 수 있다. // 접근할 수 있는 유일한 방법은 Privileged 메소드 뿐이다. Privileged 메소드는 클로져 영역에 정의된 함수로 private data에 접근 가능한 함수들을 일컫는다.
-
-위 예제를 보면 믹스인 함수 `rawMixin()`.에 대한 래퍼로 `mixinModel()` 을 선언한 것을 알 수 있다. 이는 예제에서 {{jsxref("Function.prototype.call()")}} 을 사용했듯이 함수 내에서 `this`의 값을 설정해야 하기 때문이다. Wrapper를 생략하고 호출자가 알아서 하도록 놔둘 수 있지만 그럴 경우 혼동될 가능성이 있다.
+참고: 속성이 [`undefined`](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined)인지 확인하는 것만으로는 충분하지 않습니다. 속성이 존재하나 단순히 값이 `undefined`인 경우도 있습니다.
 
 ## 결론
 
-복잡한 코드를 작성하여 이용하기 전에 프로토타입 기반의 상속 모델을 이해하는 것이 **중요하다**. 또한 프로토타입 체인의 길이는 성능을 저해하지 않도록 줄이는 방법을 고안해야 한다. 또한 빌트인 프로토타입은 새로운 자바스크립트 기능과 호환성을 갖기 위한 이유가 아닌 이상 **절대** 확장해서는 안된다.
+JavaScript는 모두 동적이고 런타임이며 정적 타입이 전혀 없기 때문에, Java 또는 C++에서 온 개발자에게는 다소 혼란스러울 수 있습니다. 모든 것은 객체(인스턴스)이거나 함수(생성자)이며 함수 자체도 `Function` 생성자의 인스턴스입니다. 문법 구성인 "클래스"도 런타임에는 생성자 함수일 뿐입니다.
+
+JavaScript의 모든 생성자 함수에는 `new` 연산자와 함께 작동하는 `prototype`이라는 특수 속성이 있습니다.
+프로토타입 객체에 대한 참조는 새 인스턴스의 내부 `[[Prototype]]` 속성에 복사됩니다. 예를 들어, `const a1 = new A()`를 수행하면, JavaScript(메모리에 객체를 생성한 후 `this`를 정의한 `A()`를 실행하기 전에)는 `a1.[[Prototype]] = A.prototype`을 설정합니다. 그런 다음 인스턴스의 속성에 접근하면, JavaScript는 먼저 해당 객체에 직접 존재하는지 여부를 확인하고, 그렇지 않은 경우 `[[Prototype]]`에서 찾습니다. `[[Prototype]]`은 원하는 값을 찾을 때까지 재귀적으로 탐색합니다. 즉, `a1.doSomething`, `Object.getPrototypeOf(a1).doSomething`, `Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething` 순서로 탐색하며, 값을 찾거나 `Object.getPrototypeOf`는 `null`일 때 탐색을 종료합니다. 이는 `prototype`에 정의된 모든 속성이 모든 인스턴스에서 효과적으로 공유되며, 나중에 `prototype`의 일부를 변경하고 변경 사항이 모든 기존 인스턴스에 나타나도록 할 수 있다는 것을 의미합니다.
+
+위의 예에서 `const a1 = new A(); const a2 = new A();`인 경우 `a1.doSomething`은 실제로 `Object.getPrototypeOf(a1).doSomething`을 참조하고, 이는 정의한 `A.prototype.doSomething`과 동일합니다. 즉, `Object.getPrototypeOf(a1).doSomething === Object.getPrototypeOf(a2).doSomething === A.prototype.doSomething`입니다.
+
+프로토타입 상속 모델을 사용하는 복잡한 코드를 작성하기 전에 프로토타입 상속 모델을 이해하는 것이 필수적입니다. 또한, 코드에서 프로토타입 체인의 길이를 파악하여 필요한 경우 성능 문제를 방지하기 위해 분할하세요. 또한, 내장 프로토타입은 최신 JavaScript 기능과의 호환성을 위한 경우가 아니면 **절대** 확장해서는 안 됩니다.

From cfbf2895886ec9e6100d5ecf722a72b0db71fa09 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Wed, 20 Sep 2023 19:09:25 +0900
Subject: [PATCH 037/268] [ko] add index.md for
 `web/glossary/cross-site_scripting` (#15782)

---
 .../ko/glossary/cross-site_scripting/index.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 files/ko/glossary/cross-site_scripting/index.md

diff --git a/files/ko/glossary/cross-site_scripting/index.md b/files/ko/glossary/cross-site_scripting/index.md
new file mode 100644
index 00000000000000..d08911e0311ff6
--- /dev/null
+++ b/files/ko/glossary/cross-site_scripting/index.md
@@ -0,0 +1,19 @@
+---
+title: 크로스 사이트 스크립팅 (Cross-site scripting (XSS))
+slug: Glossary/Cross-site_scripting
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+크로스 사이트 스크립팅 (XSS)은 공격자가 웹사이트에 악성 클라이언트 사이드 코드를 삽입할 수 있도록 하는 보안 취약점 공격입니다. 이 악성 코드는 피해자에 의해 실행되며 공격자가 접근 제어를 우회하고 사용자로 위장할 수 있게 만들어 줍니다. 오픈 웹 애플리케이션 보안 프로젝트에 따르면, XSS는 2017년에 [7번째로 흔한 웹 앱 취약점](<https://owasp.org/www-project-top-ten/OWASP_Top_Ten_2017/Top_10-2017_A7-Cross-Site_Scripting_(XSS)>)이었습니다.
+
+웹 앱이 충분한 유효성 검사나 인코딩을 사용하지 않으면 이러한 공격은 성공하게 됩니다. 사용자의 브라우저는 신뢰할 수 없는 악성 스크립트를 탐지할 수 없고, 쿠키, 세션 토큰 또는 기타 민감한 사이트별 정보에 대한 접근 권한을 부여해버리거나 악성 스크립트가 {{glossary("HTML")}} 콘텐츠를 다시 작성할 수 있도록 합니다.
+
+## 같이 보기
+
+- [공격 유형: 크로스 사이트 스크립팅 (XSS)](/ko/docs/Web/Security/Types_of_attacks#cross-site_scripting_xss)
+- 위키백과의 [크로스 사이트 스크립팅](https://en.wikipedia.org/wiki/Cross-site_scripting)
+- [OWASP의 크로스 사이트 스크립팅](https://owasp.org/www-community/attacks/xss/)
+- [크로스 사이트 스크립팅에 대한 다른 글](https://www.acunetix.com/blog/articles/dom-xss-explained/)

From fe3f9d25142145d1fdc171e770996142fe318fd5 Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-950MM36.localdomain>
Date: Sat, 16 Sep 2023 17:30:08 +0900
Subject: [PATCH 038/268] =?UTF-8?q?=E7=94=A8=E8=AA=9E=E9=9B=86=20=E3=80=8C?=
 =?UTF-8?q?Node=E3=80=8D=E3=82=92=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/glossary/node/index.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 files/ja/glossary/node/index.md

diff --git a/files/ja/glossary/node/index.md b/files/ja/glossary/node/index.md
new file mode 100644
index 00000000000000..153178dfdaaa37
--- /dev/null
+++ b/files/ja/glossary/node/index.md
@@ -0,0 +1,12 @@
+---
+title: Node
+slug: Glossary/Node
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+**node** という用語は文脈によっていくつかの意味を持ちます。下記の用語を指しているかもしれません。
+
+{{GlossaryDisambiguation}}
+
+この用語は {{Glossary("Node.js")}} について話すときにも使われます。

From 947ed6338df0a370a2f282950b441c1b6112b12b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 16 Sep 2023 23:06:34 +0900
Subject: [PATCH 039/268] =?UTF-8?q?2023/02/28=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/messageevent/index.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/api/messageevent/index.md b/files/ja/web/api/messageevent/index.md
index 6a9fbc9d1279ce..303c70d64e01d1 100644
--- a/files/ja/web/api/messageevent/index.md
+++ b/files/ja/web/api/messageevent/index.md
@@ -2,7 +2,7 @@
 title: MessageEvent
 slug: Web/API/MessageEvent
 l10n:
-  sourceCommit: bbecba9e7d688493adbdc37fc70e02d87adfe371
+  sourceCommit: 2ba2c0efbdf0c34b1da02203e4e84b571c883629
 ---
 
 {{APIRef("HTML DOM")}}
@@ -16,7 +16,7 @@ l10n:
 - 文書間のメッセージ（{{domxref("Window.postMessage()")}} および {{domxref("Window.message_event")}} を参照）。
 - [チャンネルメッセージ](/ja/docs/Web/API/Channel_Messaging_API) （{{domxref("MessagePort.postMessage()")}} および {{domxref("MessagePort.message_event")}} を参照）。
 - ワーカー／文書間メッセージ（上記 2 項目ほか、{{domxref("Worker.postMessage()")}}, {{domxref("Worker.message_event")}}, {{domxref("ServiceWorkerGlobalScope.message_event")}} なども参照）。
-- [ブロードキャストチャンネル](/ja/docs/Web/API/Broadcast_Channel_API) ({{domxref("Broadcastchannel.postMessage()")}}) および {{domxref("BroadcastChannel.onmessage")}} を参照).
+- [ブロードキャストチャンネル](/ja/docs/Web/API/Broadcast_Channel_API) ({{domxref("Broadcastchannel.postMessage()")}}) および {{domxref("BroadcastChannel.message_event")}} を参照).
 
 このイベントによって引き起こされる動作は、対応する `message` イベント（例えば、 上記の `onmessage` ハンドラーを使ったもの）のイベントハンドラーとして設定された関数の中で定義されています。
 
@@ -39,7 +39,7 @@ _このインターフェースは親である {{domxref("Event")}} からプロ
 - {{domxref("MessageEvent.lastEventId")}} {{ReadOnlyInline}}
   - : 文字列で、このイベントの一意の ID を表します。
 - {{domxref("MessageEvent.source")}} {{ReadOnlyInline}}
-  - : `MessageEventSource` （{{domxref("WindowProxy")}}、{{domxref("MessagePort")}}、{{domxref("ServiceWorker")}} の何れかのオブジェクト）で、メッセージの送信元を表します。
+  - : `MessageEventSource` （{{glossary("WindowProxy")}}、{{domxref("MessagePort")}}、{{domxref("ServiceWorker")}} の何れかのオブジェクト）で、メッセージの送信元を表します。
 - {{domxref("MessageEvent.ports")}} {{ReadOnlyInline}}
   - : {{domxref("MessagePort")}} オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。
 
@@ -50,7 +50,7 @@ _このインターフェースは親である {{domxref("Event")}} からメソ
 - {{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}
   - : メッセージイベントを初期化します。**これ以上このメソッドを使用しないでください。代わりに、{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} コンストラクターを使用してください。**
 
-## 例>
+## 例
 
 [基本的な共有ワーカーの例](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker)（[共有ワーカーを実行](https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/)）には 2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一のワーカーファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトもワーカーファイルにアクセスできます。
 

From 35a6cbce1e6676b165027b0fb7e7d5ac1db02b69 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 17 Sep 2023 00:36:16 +0900
Subject: [PATCH 040/268] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/messageevent/lasteventid/index.md  |  5 +++--
 files/ja/web/api/messageevent/messageevent/index.md | 11 ++++++-----
 files/ja/web/api/messageevent/origin/index.md       |  3 ++-
 files/ja/web/api/messageevent/ports/index.md        |  7 ++++---
 files/ja/web/api/messageevent/source/index.md       |  9 +++++----
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/files/ja/web/api/messageevent/lasteventid/index.md b/files/ja/web/api/messageevent/lasteventid/index.md
index 77d295937c131d..287fcc36ffd6ce 100644
--- a/files/ja/web/api/messageevent/lasteventid/index.md
+++ b/files/ja/web/api/messageevent/lasteventid/index.md
@@ -1,8 +1,9 @@
 ---
-title: MessageEvent.lastEventId
+title: "MessageEvent: lastEventId プロパティ"
+short-title: lastEventId
 slug: Web/API/MessageEvent/lastEventId
 l10n:
-  sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+  sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
 ---
 
 {{APIRef("HTML DOM")}}
diff --git a/files/ja/web/api/messageevent/messageevent/index.md b/files/ja/web/api/messageevent/messageevent/index.md
index 74c105dd00a0ae..6b306577cc0699 100644
--- a/files/ja/web/api/messageevent/messageevent/index.md
+++ b/files/ja/web/api/messageevent/messageevent/index.md
@@ -1,8 +1,9 @@
 ---
-title: MessageEvent()
+title: "MessageEvent: MessageEvent() コンストラクター"
+short-title: MessageEvent()
 slug: Web/API/MessageEvent/MessageEvent
 l10n:
-  sourceCommit: b7556b71e1fc3e89057671b372871e9f33d3f0b8
+  sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
 ---
 
 {{APIRef("HTML DOM")}}
@@ -11,9 +12,9 @@ l10n:
 
 ## 構文
 
-```js
-new MessageEvent(type);
-new MessageEvent(type, options);
+```js-nolint
+new MessageEvent(type)
+new MessageEvent(type, options)
 ```
 
 ### 引数
diff --git a/files/ja/web/api/messageevent/origin/index.md b/files/ja/web/api/messageevent/origin/index.md
index dfd061a4afbc63..587f3979d563c7 100644
--- a/files/ja/web/api/messageevent/origin/index.md
+++ b/files/ja/web/api/messageevent/origin/index.md
@@ -1,5 +1,6 @@
 ---
-title: MessageEvent.origin
+title: "MessageEvent: origin プロパティ"
+short-title: origin
 slug: Web/API/MessageEvent/origin
 l10n:
   sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
diff --git a/files/ja/web/api/messageevent/ports/index.md b/files/ja/web/api/messageevent/ports/index.md
index 58904836c77a5e..95d692dd97b825 100644
--- a/files/ja/web/api/messageevent/ports/index.md
+++ b/files/ja/web/api/messageevent/ports/index.md
@@ -1,8 +1,9 @@
 ---
-title: MessageEvent.ports
+title: "MessageEvent: ports プロパティ"
+short-title: ports
 slug: Web/API/MessageEvent/ports
 l10n:
-  sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+  sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
 ---
 
 {{APIRef("HTML DOM")}}
@@ -24,7 +25,7 @@ onconnect = (e) => {
     port.postMessage(workerResult);
   });
 
-  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+  port.start(); // addEventListener を使用した場合は必要。 onmessage セッターからは暗黙に呼び出されます。
 };
 ```
 
diff --git a/files/ja/web/api/messageevent/source/index.md b/files/ja/web/api/messageevent/source/index.md
index 5e9b20a10bf40b..3b93d831ac815f 100644
--- a/files/ja/web/api/messageevent/source/index.md
+++ b/files/ja/web/api/messageevent/source/index.md
@@ -1,17 +1,18 @@
 ---
-title: MessageEvent.source
+title: "MessageEvent: source プロパティ"
+short-title: source
 slug: Web/API/MessageEvent/source
 l10n:
-  sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+  sourceCommit: 84f8672adab0fdb783d02676c42a2b7ae16b3606
 ---
 
 {{APIRef("HTML DOM")}}
 
-**`source`** は {{domxref("MessageEvent")}} インターフェイスの読み取り専用プロパティで、メッセージ送信者を表す `MessageEventSource` （{{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。
+**`source`** は {{domxref("MessageEvent")}} インターフェイスの読み取り専用プロパティで、メッセージ送信者を表す `MessageEventSource` （{{glossary("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。
 
 ## 値
 
-メッセージ送信者を表す `MessageEventSource` （{{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。
+メッセージ送信者を表す `MessageEventSource` （{{glossary("WindowProxy")}}, {{domxref("MessagePort")}}, {{domxref("ServiceWorker")}} オブジェクトのいずれか）です。
 
 ## 例
 

From 89027458d15d07998999cde34bf9fa28a166ca46 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 17 Sep 2023 00:39:30 +0900
Subject: [PATCH 041/268] =?UTF-8?q?2023/08/19=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/messageevent/data/index.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/api/messageevent/data/index.md b/files/ja/web/api/messageevent/data/index.md
index d755e9a64f0e15..0dc0408b447a8c 100644
--- a/files/ja/web/api/messageevent/data/index.md
+++ b/files/ja/web/api/messageevent/data/index.md
@@ -1,8 +1,9 @@
 ---
-title: MessageEvent.data
+title: "MessageEvent: data プロパティ"
+short-title: data
 slug: Web/API/MessageEvent/data
 l10n:
-  sourceCommit: 4b4638246aad5d39b9a2e5c572b179b4c39c0a84
+  sourceCommit: 6a0f22ee0b3a854ed37271373cbc1d1099c0d361
 ---
 
 {{APIRef("HTML DOM")}}
@@ -11,7 +12,7 @@ l10n:
 
 ## 値
 
-このメッセージの送信元が送信するデータです。これはどの型でも構いません。
+このメッセージの送信元が送信するデータです。このイベントの発信元が何であるかによって、あらゆるデータ型になる可能性があります。
 
 ## 例
 

From 0e40b53e04148614ec578f8f0958d7ebb4ae053b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isma=C3=ABl=20Maurice?=
 <55036198+tisma95@users.noreply.github.com>
Date: Wed, 20 Sep 2023 12:22:29 +0200
Subject: [PATCH 042/268] =?UTF-8?q?Translate=20pseudo=20classes=20&=20?=
 =?UTF-8?q?=C3=A9l=C3=A9ments=20(#15806)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the reference section to be the same like english doc

Set the doc according to english translation

* Update files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md

Co-authored-by: SphinxKnight <SphinxKnight@users.noreply.github.com>
---
 .../index.md                                  | 82 +++----------------
 1 file changed, 12 insertions(+), 70 deletions(-)

diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 2f0d358fbc6464..fcb88096f77259 100644
--- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -123,75 +123,17 @@ Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le pseu
 
 L'utilisation des pseudo-éléments `::before` et `::after` avec la propriété `content` est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site [CSS Arrow Please](http://www.cssarrowplease.com/), qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.
 
-## Section de référence
-
-Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.
-
-### Pseudo-classes
-
-| Sélecteur                           | Description                                                                                                                                                                                                                                                                                                                                                               |
-| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{ Cssxref(":active") }}            | Matches when the user activates (for example clicks on) an element.                                                                                                                                                                                                                                                                                                       |
-| {{ Cssxref(":any-link") }}          | Matches both the `:link` and `:visited` states of a link.                                                                                                                                                                                                                                                                                                                 |
-| {{ Cssxref(":blank") }}             | Matches an [`<input>` element](/fr/docs/Web/HTML/Element/input) whose input value is empty.                                                                                                                                                                                                                                                                               |
-| {{ Cssxref(":checked") }}           | Matches a radio button or checkbox in the selected state.                                                                                                                                                                                                                                                                                                                 |
-| {{ Cssxref(":current") }}           | Matches the element, or an ancestor of the element, that is currently being displayed.                                                                                                                                                                                                                                                                                    |
-| {{ Cssxref(":default") }}           | Matches the one or more UI elements that are the default among a set of similar elements.                                                                                                                                                                                                                                                                                 |
-| {{ Cssxref(":dir") }}               | Select an element based on its directionality (value of the HTML [`dir`](/fr/docs/Web/HTML/Global_attributes/dir) attribute or CSS [`direction`](/fr/docs/Web/CSS/direction) property).                                                                                                                                                                                   |
-| {{ Cssxref(":disabled") }}          | Matches user interface elements that are in an disabled state.                                                                                                                                                                                                                                                                                                            |
-| {{ Cssxref(":empty") }}             | Matches an element that has no children except optionally white space.                                                                                                                                                                                                                                                                                                    |
-| {{ Cssxref(":enabled") }}           | Matches user interface elements that are in an enabled state.                                                                                                                                                                                                                                                                                                             |
-| {{ Cssxref(":first") }}             | In [Paged Media](/fr/docs/Web/CSS/Paged_Media), matches the first page.                                                                                                                                                                                                                                                                                                   |
-| {{ Cssxref(":first-child") }}       | Matches an element that is first among its siblings.                                                                                                                                                                                                                                                                                                                      |
-| {{ Cssxref(":first-of-type") }}     | Matches an element which is first of a certain type among its siblings.                                                                                                                                                                                                                                                                                                   |
-| {{ Cssxref(":focus") }}             | Matches when an element has focus.                                                                                                                                                                                                                                                                                                                                        |
-| {{ Cssxref(":focus-visible")}}      | Matches when an element has focus and the focus should be visible to the user.                                                                                                                                                                                                                                                                                            |
-| {{ Cssxref(":focus-within") }}      | Matches an element with focus plus an element with a descendent that has focus.                                                                                                                                                                                                                                                                                           |
-| {{ Cssxref(":future") }}            | Matches the elements after the current element.                                                                                                                                                                                                                                                                                                                           |
-| {{ Cssxref(":hover") }}             | Matches when the user hovers over an element.                                                                                                                                                                                                                                                                                                                             |
-| {{ Cssxref(":indeterminate") }}     | Matches UI elements whose value is in an indeterminate state, usually [checkboxes](/fr/docs/Web/HTML/Element/input/checkbox).                                                                                                                                                                                                                                             |
-| {{ Cssxref(":in-range") }}          | Matches an element with a range when its value is in-range.                                                                                                                                                                                                                                                                                                               |
-| {{ Cssxref(":invalid") }}           | Matches an element, such as an `<input>`, in an invalid state.                                                                                                                                                                                                                                                                                                            |
-| {{ Cssxref(":lang") }}              | Matches an element based on language (value of the HTML [lang](/fr/docs/Web/HTML/Global_attributes/lang) attribute).                                                                                                                                                                                                                                                      |
-| {{ Cssxref(":last-child") }}        | Matches an element which is last among its siblings.                                                                                                                                                                                                                                                                                                                      |
-| {{ Cssxref(":last-of-type") }}      | Matches an element of a certain type that is last among its siblings.                                                                                                                                                                                                                                                                                                     |
-| {{ Cssxref(":left") }}              | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches left-hand pages.                                                                                                                                                                                                                                                                                                    |
-| {{ Cssxref(":link")}}               | Matches unvisited links.                                                                                                                                                                                                                                                                                                                                                  |
-| {{ Cssxref(":local-link")}}         | Matches links pointing to pages that are in the same site as the current document.                                                                                                                                                                                                                                                                                        |
-| {{ Cssxref(":is", ":is()")}}        | Matches any of the selectors in the selector list that is passed in.                                                                                                                                                                                                                                                                                                      |
-| {{ Cssxref(":not") }}               | Matches things not matched by selectors that are passed in as a value to this selector.                                                                                                                                                                                                                                                                                   |
-| {{ Cssxref(":nth-child") }}         | Matches elements from a list of siblings — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)                                                                                                                                                                                                 |
-| {{ Cssxref(":nth-of-type") }}       | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements) — the siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)                                                                                                                           |
-| {{ Cssxref(":nth-last-child") }}    | Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)                                                               |
-| {{ Cssxref(":nth-last-of-type") }}  | Matches elements from a list of siblings that are of a certain type (e.g. `<p>` elements), counting backwards from the end. The siblings are matched by a formula of the form _an+b_ (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.) |
-| {{ Cssxref(":only-child") }}        | Matches an element that has no siblings.                                                                                                                                                                                                                                                                                                                                  |
-| {{ Cssxref(":only-of-type") }}      | Matches an element that is the only one of its type among its siblings.                                                                                                                                                                                                                                                                                                   |
-| {{ Cssxref(":optional") }}          | Matches form elements that are not required.                                                                                                                                                                                                                                                                                                                              |
-| {{ Cssxref(":out-of-range") }}      | Matches an element with a range when its value is out of range.                                                                                                                                                                                                                                                                                                           |
-| {{ Cssxref(":past") }}              | Matches the elements before the current element.                                                                                                                                                                                                                                                                                                                          |
-| {{ Cssxref(":placeholder-shown") }} | Matches an input element that is showing placeholder text.                                                                                                                                                                                                                                                                                                                |
-| {{ Cssxref(":playing") }}           | Matches an element representing an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "playing".                                                                                                                                                                                                                       |
-| {{ Cssxref(":paused") }}            | Matches an element representing an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused".                                                                                                                                                                                                                        |
-| {{ Cssxref(":read-only") }}         | Matches an element if it is not user-alterable.                                                                                                                                                                                                                                                                                                                           |
-| {{ Cssxref(":read-write") }}        | Matches an element if it is user-alterable.                                                                                                                                                                                                                                                                                                                               |
-| {{ Cssxref(":required") }}          | Matches form elements that are required.                                                                                                                                                                                                                                                                                                                                  |
-| {{ Cssxref(":right") }}             | In [Paged Media](/fr/docs/Web/CSS/CSS_Pages), matches right-hand pages.                                                                                                                                                                                                                                                                                                   |
-| {{ Cssxref(":root") }}              | Matches an element that is the root of the document.                                                                                                                                                                                                                                                                                                                      |
-| {{ Cssxref(":scope") }}             | Matches any element that is a scope element.                                                                                                                                                                                                                                                                                                                              |
-| {{ Cssxref(":valid") }}             | Matches an element such as an `<input>` element, in a valid state.                                                                                                                                                                                                                                                                                                        |
-| {{ Cssxref(":target") }}            | Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current [URL fragment](https://en.wikipedia.org/wiki/Fragment_identifier)).                                                                                                                                                                                                  |
-| {{ Cssxref(":visited") }}           | Matches visited links.                                                                                                                                                                                                                                                                                                                                                    |
-
-### Pseudo-éléments
-
-| Sélecteur                         | Description                                                                              |
-| --------------------------------- | ---------------------------------------------------------------------------------------- |
-| {{ Cssxref("::after") }}          | Matches a stylable element appearing after the originating element's actual content.     |
-| {{ Cssxref("::before") }}         | Matches a stylable element appearing before the originating element's actual content.    |
-| {{ Cssxref("::first-letter") }}   | Matches the first letter of the element.                                                 |
-| {{ Cssxref("::first-line") }}     | Matches the first line of the containing element.                                        |
-| {{ Cssxref("::grammar-error") }}  | Matches a portion of the document containing a grammar error as flagged by the browser.  |
-| {{ Cssxref("::selection") }}      | Matches the portion of the document that has been selected.                              |
-| {{ Cssxref("::spelling-error") }} | Matches a portion of the document containing a spelling error as flagged by the browser. |
+## Résumé
+
+Dans cet article, nous avons présenté les pseudo-classes et les pseudo-éléments CSS, qui sont des types particuliers de sélecteurs.
+
+Les pseudo-classes vous permettent de cibler un élément lorsqu'il se trouve dans un état particulier, comme si vous aviez ajouté une classe pour cet état au DOM. Les pseudo-éléments agissent comme si vous aviez ajouté un nouvel élément au DOM, et vous permettent de le styliser. Les pseudo-éléments `::before` et `::after` vous permettent d'insérer du contenu dans le document à l'aide de CSS.
+
+Dans le prochain article, nous aborderons [les combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators).
+
+## Voir aussi
+
+- [La référence des pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes)
+- [La référence des pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements)
 
 {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

From a9518c8b08cfeb78a5f9f0f062743fbeee5f77ed Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:02:44 +0200
Subject: [PATCH 043/268] Fix #14813 (#15889)

Update to fix #14813
---
 .../auto-placement_in_grid_layout/index.md    | 154 ++++++------------
 1 file changed, 53 insertions(+), 101 deletions(-)

diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md b/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
index 100eddbb3fe2fa..2f629ee192cc2a 100644
--- a/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md
@@ -1,16 +1,18 @@
 ---
 title: Le placement automatique sur une grille CSS
 slug: Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout
+l10n:
+  sourceCommit: b906098e63b1eb3512b4381fe7c105b67037aff1
 ---
 
 {{CSSRef}}
 
-{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}
-
-En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.
+En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains (voire aucun) des objets ne sont pas placés sur la grille. Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets.
 
 ## Placement automatique
 
+Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.
+
 ```css hidden
 * {
   box-sizing: border-box;
@@ -49,17 +51,17 @@ En plus de pouvoir placer des objets de façon précise sur une grille, la spéc
 </div>
 ```
 
-{{EmbedLiveSample('Placement_automatique', '500', '230')}}
+{{EmbedLiveSample('', '500', '230')}}
 
-## Définir des règles pour le placement automatique
+## Les règles par défaut pour le placement automatique
 
-Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec `grid-template-rows`, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.
+Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets se placeront chacun sur une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec `grid-template-rows`, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, _implicites_, seront créées.
 
 ### Dimensionner les lignes de la grille implicite
 
 Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.
 
-Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété `grid-auto-rows`. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :
+Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété `grid-auto-rows`. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera&nbsp;:
 
 ```css hidden
 * {
@@ -100,11 +102,11 @@ Il est toutefois possible de contrôler la taille de ces lignes grâce à la pro
 }
 ```
 
-{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}}
+{{EmbedLiveSample('', '500', '330')}}
 
-### Dimensionner les lignes avec minmax()
+### Dimensionner les lignes avec `minmax()`
 
-On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.
+On peut utiliser la fonction [`minmax()`](/fr/docs/Web/CSS/minmax) pour la valeur de [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows) afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.
 
 ```css hidden
 * {
@@ -148,11 +150,11 @@ On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de
 }
 ```
 
-{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}}
+{{EmbedLiveSample('', '500', '330')}}
 
 ### Dimensionner les lignes avec une liste de pistes
 
-On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de `200px`. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.
+On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200 pixels. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.
 
 ```css hidden
 * {
@@ -196,11 +198,11 @@ On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l
 }
 ```
 
-{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}}
+{{EmbedLiveSample('', '500', '480')}}
 
-### Utiliser le placement automatique pour les colonnes
+### Utiliser le placement automatique avec les colonnes
 
-On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur `column`. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.
+On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow) avec la valeur `column`. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec [`grid-template-rows`](/fr/docs/Web/CSS/grid-template-rows). Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns), cette dernière fonctionne de façon analogue à [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows).
 
 Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.
 
@@ -247,19 +249,19 @@ Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent cha
 </div>
 ```
 
-{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}}
+{{EmbedLiveSample('', '500', '640')}}
 
 ## L'ordre des éléments placés automatiquement
 
-Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement [l'algorithme de placement des objets sur la grille](https://drafts.csswg.org/css-grid/#auto-placement-algo), mais voyons ici les quelques règles simples qu'il faut principalement retenir.
+Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille&nbsp;: il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement [l'algorithme de placement des objets sur la grille](https://drafts.csswg.org/css-grid/#auto-placement-algo), mais voyons ici les quelques règles simples qu'il faut principalement retenir.
 
 ### Modification de l'ordre du document
 
-Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _"order modified document order"_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.
+Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _«&nbsp;<i lang="en">order modified document order</i>&nbsp;»_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.
 
 ### Les éléments avec des propriétés de placement
 
-La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.
+La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On peut voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM, ils ne commencent pas après la position d'un élément placé qui les précède.
 
 ```css hidden
 * {
@@ -315,13 +317,13 @@ La grille commencera par placer les éléments pour lesquels on a défini une po
 }
 ```
 
-{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}}
+{{EmbedLiveSample('', '500', '450')}}
 
 ### Gérer les éléments qui s'étalent sur plusieurs pistes
 
-On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur `span 2`. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.
+On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 5 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés [`grid-column-end`](/fr/docs/Web/CSS/grid-column-end) et [`grid-row-end`](/fr/docs/Web/CSS/grid-row-end) avec la valeur `span 2`. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.
 
-On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.
+On peut voir comment cela laisse des espaces dans la grille, car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.
 
 ```css hidden
 * {
@@ -381,15 +383,15 @@ On peut voir coment cela laisse des espaces dans la grille car lorsqu'un éléme
 }
 ```
 
-{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}}
+{{EmbedLiveSample('', '500', '770')}}
 
 ### Combler les espaces
 
-En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.
+En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire (on ne voudrait pas que les libellés et les champs soient mélangés pour combler certains trous). Toutefois, on dispose parfois des éléments pour lesquels l'ordre logique n'a pas d'importance et où on veut obtenir une disposition plus dense, sans vide entre les différents éléments.
 
-Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur `dense`. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec `column`. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : `grid-auto-flow: column dense`.
+Pour cela, sur le conteneur, on ajoute la propriété [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow) avec la valeur `dense`. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec `column`. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété&nbsp;: `grid-auto-flow: column dense`.
 
-Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (_tab order_) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans [un article sur l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité).
+Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés, quitte à ne pas respecter l'ordre du DOM. Cela ne modifiera pas l'ordre logique des éléments. Par exemple, l'ordre de la navigation au clavier suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans [un article sur l'accessibilité](/fr/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility). Pour résumer, il faut faire attention quand on détache l'ordre visuel de l'ordre d'affichage.
 
 ```css hidden
 * {
@@ -450,80 +452,34 @@ Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a lai
 }
 ```
 
-{{EmbedLiveSample('Combler_les_espaces', '500', '730')}}
+{{EmbedLiveSample('', '500', '730')}}
 
 ### Les éléments anonymes de la grille
 
-Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des `div` et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.
+Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille&nbsp;:
 
-```css
+- Le premier est un élément anonyme, car il n'est placé dans aucun élément, il sera alors placé automatiquement.
+- Les deux éléments suivants sont placés dans des `div` et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.
+
+```html
 <div class="grid">
-  Je suis une chaîne de caractères et je serai placé
-  automatiquement.
+  Je suis une chaîne de caractères et je serai placée automatiquement.
   <div>Un élément de la grille</div>
   <div>Un élément de la grille</div>
 </div>
 ```
 
-Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.
+Les éléments anonymes sont toujours placés automatiquement, car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.
 
 ### Les cas d'utilisation pour le placement automatique
 
-Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe `landscape` l'élément s'étend sur deux colonnes). On utilise ensuite `grid-auto-flow: dense` afin de créer une grille dense.
-
-```css
-.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  grid-gap: 10px;
-  grid-auto-flow: dense;
-  list-style: none;
-  margin: 1em auto;
-  padding: 0;
-  max-width: 800px;
-}
-.wrapper li {
-  border: 1px solid #ccc;
-}
-.wrapper li.landscape {
-  grid-column-end: span 2;
-}
-.wrapper li img {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-```
-
-```html
-<ul class="wrapper">
-  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
-  <li class="landscape">
-    <img src="http://placehold.it/350x200" alt="placeholder" />
-  </li>
-  <li class="landscape">
-    <img src="http://placehold.it/350x200" alt="placeholder" />
-  </li>
-  <li class="landscape">
-    <img src="http://placehold.it/350x200" alt="placeholder" />
-  </li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
-  <li class="landscape">
-    <img src="http://placehold.it/350x200" alt="placeholder" />
-  </li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder" /></li>
-</ul>
-```
+Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier&nbsp;: une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe `landscape` l'élément s'étend sur deux colonnes). On utilise ensuite `grid-auto-flow: dense` afin de créer une grille dense.
 
-{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}}
+Dans l'exemple qui suit, retirez la ligne `grid-auto-flow: dense` pour voir la réorganisation du contenu et les espaces que cela crée.
 
-Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.
+{{EmbedGHLiveSample("css-examples/grid/docs/autoplacement.html", '100%', 1200)}}
 
-### Autre exemple
+Le placement automatique peut également aider lorsqu'on dispose des éléments d'interface sans ordre logique. Dans l'exemple qui suit, on a une liste de définitions. Dans une telle liste, rien ne regroupe particulièrement plusieurs éléments `<dt>` et `<dd>`. Ici, on autorise le placement automatique tout en utilisant des classes pour que les `<dt>` soient dans la colonne 1 et les `<dd>` dans la colonne 2. On s'assure ainsi que les termes et leurs définitions seront bien l'un en face de l'autre, quel que soit le nombre de définitions pour un terme.
 
 ```css hidden
 * {
@@ -540,15 +496,15 @@ Le placement automatique peut également aider à disposer des éléments d'inte
 ```html
 <div class="wrapper">
   <dl>
-    <dt>Mammals</dt>
-    <dd>Cat</dd>
-    <dd>Dog</dd>
-    <dd>Mouse</dd>
-    <dt>Fish</dt>
-    <dd>Guppy</dd>
-    <dt>Birds</dt>
-    <dd>Pied Wagtail</dd>
-    <dd>Owl</dd>
+    <dt>Mammifères</dt>
+    <dd>Chat</dd>
+    <dd>Chien</dd>
+    <dd>Souris</dd>
+    <dt>Poisson</dt>
+    <dd>Poisson rouge</dd>
+    <dt>Oiseaux</dt>
+    <dd>Bergeronnette</dd>
+    <dd>Hiboux</dd>
   <dl>
 </div>
 ```
@@ -570,14 +526,10 @@ dd {
 }
 ```
 
-{{EmbedLiveSample('Autre_exemple', '500', '230')}}
-
-> **Note :** Voir [cet article de SitePoint](https://www.sitepoint.com/understanding-masonry-layout/) à propos de la disposition en briques pour d'autres cas d'utilisation.
-
-## Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?
+{{EmbedLiveSample('', '500', '230')}}
 
-Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée `n` » (pour que certaines lignes soient sautées). Cette question [est décrite sur le dépôt GitHub du CSSWG](https://github.com/w3c/csswg-drafts/issues/796), n'hésitez pas à ajouter vos exemples de scénarios.
+## Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement)&nbsp;?
 
-Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les _issues_ existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.
+Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour «&nbsp;placer tous les éléments automatiquement après la prochaine ligne intitulée `n`&nbsp;» (pour que certaines lignes soient sautées). Cette question [est décrite sur le dépôt GitHub du CSSWG](https://github.com/w3c/csswg-drafts/issues/796), n'hésitez pas à ajouter vos exemples de scénarios.
 
-{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}
+Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les <i lang="en">issues</i> existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.

From 5adfed8c0b349fa2ca14a491912e09bc0aee9c1b Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:03:05 +0200
Subject: [PATCH 044/268] Fix #15129 (#15928)

Update and fix #15129
---
 .../8-horizontal-tb.png                       | Bin 0 -> 5691 bytes
 .../index.md                                  | 113 +++++++++++-------
 2 files changed, 71 insertions(+), 42 deletions(-)
 create mode 100644 files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-horizontal-tb.png

diff --git a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-horizontal-tb.png b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/8-horizontal-tb.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b833aa98e54b4edea3262ce68f0d4a9e9f6b996
GIT binary patch
literal 5691
zcmds5i96KY+aF1`7$WPSs4SDGgbYGOSsTQRq}3>qWd>sxF=4`3vZTgdXlz-trLmMG
zgU31}3}fH-UEg;+J@4;*uj~B}-s?KoIrsOR`~IB!+~@wB`?|h(Gq^qvmlzia1mZC?
z(7Oo&9fE;CEJzMk=8VN>VRsOS6=Y^&c?|#nssR{}$FKG0GM6^(*#iRufwc*sKNt9L
zLtkH?YJ&v&BPVUZK%Tj;uP;A8zqhydvuDo+4ZtBGAz@)*9v&Vz94;av!q3kSgTW98
z1S$qSH#a9EBNG%91k@rM8yh=1I(&S592^`}R8)ZWM4&$hD6s`r#{iNkP=^HyEP>9n
zc?_6`hX?o`1x&W?_vd<gdWMFEQVpb|qN2jX!`<E8b8>R12K-i5R#UaPJ52Zb-_Z;N
zfhvoYm6i4GT&l59d3ia||8{nE_Vw%6%gf6H24EoT(s+3;@Gb1fks|;J&M*THc{&Xm
z@dL{vgM))W&ugF$2mC}gG&F2FgQ<qH_wL=>%QK`Jh!0@U>rwJUFC(dzCcjL;w42(a
zS-C@aJkXzMW@bh;kp%X3r>fqq;icy>B2zB1qekEXe_x;nKWHXEy=x8hC;qyn2z0$&
z$uj-r{&b~3ce^K-Zo*Hu;G6Hy9ga&JM}l{fm8VfW)SKrQzGbeoW^QL_3>fhZ`1p=`
zT&5am?$x;s8-W*tWa+mA7$4p*_@5d!l%%<PtR(3FvV?3N9N!CQdCUydLTfGu2gd?l
zb2IMj{#e&eRn&I2>z2R#rUUmDMtCRN5$I2)KD;|y|85YaK5i?sU4fc$5?|@b9SjPd
zY0m{3?@ihsA4|m143z0_Q-9ebfp!OgY(0;WTTj!Uao}UPD$Kd?Z5JZP9ze!R-_h=v
z)A4~56&b7T?-=ihjI@}kirnE~k9qw4k^91oXrEz(0MJFCn#fQsV1qWuF;etOuq4nE
zvr~F=qAGWioI80Jy#GO$o=BJ^1nj(3-6B1n#;XE7=+UfqYdx<witXg&<QNRbKK1h?
zMv`h{xJQoL?<4`=BUeJ9^xLNA&YjcL)ZA=Noc;7>`mw;EodNZ!!zfl|gLG%u-)?(*
zd#W*atNk5Nb%%E6%A`MPzdd5w2RVv;2z)f8$Kl6foMw}d8}TYsBb~`Cf@1Od2N3Ak
zhN0dSOK;lTAZLuAl_>kt^hDc*F0zUErPzf>XS)2(%@t-+;18^=f2m$E5P2YMXdv_=
z1_ufi3Bg}IeDtvU>szOe{guEct$;U-6qAu$CTtcMs&FDcSSlnU?janl>o%(=r>J+c
zhu4T&K#^k@mFhe*+xKOA=W}0?eSr4iL(eat;N$o+gkR7LZsHn#EjJ;Yxgc%mfnbH;
zo*a$4a?Fd3-8?BnT)PJZ!9CDxNk3<jxn_+M*^4!g!CpPqvUbivDIxcv=T(`NAQ!Fj
zG?Mg@0G}W|r!R3--jVX~*i&B{YnmTQ@2U)q;Q8<J<~bS>9`juzV62+VP?m_Z!W0nO
z)lYQv-(TX&B^sV)oS6#ASeXocV-mxH#2%{^I-Nfp>wp+dIY|mWE=z(6^KND*|ErAR
zpOir5`9V%=aIPu{sz$_O<BEwLLoq!$<_5e(xnaU@o!GhiEi~SdVgo*9!Mw7mi7QFg
za*-^38LNxf3nz&%sAaw-m2T%8wuC(8Ad7o(C2pc~0x4*0AqH2_8?md<^>#jHPu4)a
z*!C(RJ<UHlz7`Ts9N83s#bQhm3g2c@Q<@Cd-4HvcNMaryf~ZJ4?L?zCxn}QaJn07x
zolhxt346sn73vkNcrEwRg7U4j*WkP<zBkw#4ap<k!MyEM(=)-1VT@|W13lY45mJvK
zv0F(ZJw>9FlAG_@0S7Bx5SA_zdCM1R;!ny1Sl)u-=g}n<d7WEN@l=(gjL#^-59uLV
zhP{#cyjJ&l`+&h$N_mLKwjEF<#=_0cX;-2y2N$8?+j@0G>s-%mHx7AD2})=>eM`mD
zx_jxtIqxI#EE2DHxCluM(Py{_BiXM<*qXbPLIjiGZ+N)iTJc2N&K6tUR2PrqMV{hC
z?&7W#fua^+*EWHY0q@TP-o|y_jHYF2c`*qMkZibbq*ql2>qYF1$zNWT>0KNeSg}Qd
zP;qn@x);{$TwDJLxB9ipXB4qLdc%cL?!s{Pu?>yzF7|dhPa<WBRM)(AIv;JJhJnXY
zA52ujxhTZU(w2@ZEz92Z@)zH#NW??V2@`LAES|ucxz*aBxgINz;dqS*`rL#F$FB23
z5#qd%OJnUX=bzz(QF{#EDf)9BUbq`0p2)Mg1CEYNzdNgZ{W|aNVjDCkRwZ(B;(O=h
z{U@Br^S7(3ZDgbIy$gTYji1j8&RVBt>972lPSc%Oo2>ID2aZ)y9@xlPR#kAkparM2
zx_LQ>mbeiU^1K(qfy;Hlx(29)2zId4{GGo$hq@uTw^Y>1z0OYm^pPr;hBjMQMP`M8
zC!jDprxtaU75|SYOnO6crA)u`@LLzVaTqjddG32gEt|bl%W`yWN3UeAciAT_bu*jW
zTAlL4S;xL9?GrsxQT<t<aqfqes7^u0;zgbkx737zrQKCwqSEQ+MR4dF=&(pzMtXpK
zOu}lu5m$~*`PiA9F*8{G<>PwiH~CI7-AE9GqkN~WWauCQ3bvm-p0N?f3JY?-2#d0g
zh!<yJM?)H>+v^hQk!~P%H04lEr{{gW17#W5gl$(&!MV7ASO^+qZwupbQd&Om=Ol8k
zUGl(+oWW+l|FI=3F2ke5h?fqc;Lu{d;G7xWBGtxOaVFMEgQysV`0=b#qizr@j8cf8
z($k}vTmPqp=pO#(D<q$(ebAbP{4T<i<9+LV`?6DKV0zz43L|sW%4;(NJ1L*Ka=vWO
zYf4=FR{dqp&(siXe$qO?C#`I0yxr0U*_;+Hq+L1ejuslEd5!2F>Z=1nGz-&*2eH^}
zB{zn}FlBFQE6LOFJ<h@mskuw|d_ke0I<vau_Q!P{U{Ln6Yg{w^Y&B`~^WNtYH~FW_
zAG*%CM6&7p{N0)Gj|r5}X<NFdFx};av_SUl&FY=_=tKJ|?0u9%@z4Zr`|dSS#Zcpa
z%RdTX;s<KBNlMZDR(X2jd;H<^KkA}=xG68ehHAG>1HG_|^1UK~mDs)p?rB5+L8&hn
zUd_X1VI7NB(MEA9o3$lm`AbkFyAfOS4Wwy-)`%jkG`oG@ft2l%^mxN0Wn)rDB5Oa%
zc%q<&VTf1#Mk!ZQ{PN;i+U^nPX<|dEE!qf6a*OTx;hdw@tFC?j_IhdeD)sMpLyMdO
z-{91Y&5|G04>X)3!(4V1G)2|~?_P(!us_a0tex^Ge}tWv$$DG32_c$1R1*(bTo!Xs
z^9$?zwl(%himp>#R*U9pdzmVz#|>{OeWMYTS}8fas0vHAz#vgeYJ9Gd)HqS)R_>gR
z{6n&R3q^JLZx%!oJU6|$D8e~8&G=QRS1zXW%lRg#cQ)yfXs&k0)c{k=hsZX|KEP#3
z5TbFjvfJ0U@1}1FT<tn(kMg_0z7?E9&ll42*XX!|wJzqY*LU3zB9g=2x8^?|J=Z^%
zUEVyo`CA)1v@jl3K58|Nvv`7BZQrX2f?j`5`EltJ9xl<>@pGB5deb%GT6D?aSQN%>
z@#~j4&a;89qXfN&i+(9LAF?jcY*eG|MQi5CL-TH@tkB9yQp3Z35?_9=uzF(AGwpsw
zyE`j3-r!ei-}Y4F%9a>epW3<alm;wBFKj(_EFF(F1h2&(g<oL;l`^ta?ulw4ZdfZ;
zPA#5W-&_4XxO&M8>;HRs_xk&~f;2UIu{y7IA?@vC$4K&?ejW7gZ`Fzc9qPuu>)Jbg
zkt+ABYjwPLFC$H@L*96pW+{}=_S8w!<4JeEv^YLF*_S^J7WBd!nkSm{JVmOqO@1R?
z(pyhP@YGwQ2iOqa;WMgvV$WCc&fuZ4i8vpGXZVadb3(VqBPnop=W>EXrZ0udOP&4~
zJDCMSu0MGQaxh*&{!7UJ!$$Tnj(=FmZq34^_d(<3|1*~SF=c^3qz@oiAa-p3i`Gnj
z|A*0kc>Ui!I{XjOV~+p9q0{;PK%apA!THxKqHR6CqsUtj4btZzJf2#MjS*o!NE}2F
z(Rb0EBC*WZ=P*52Y4!Lub_kh2NEgZjPG<TSZb`&#8=0^%=Vlm9R2>XW^9WNGL444&
z5=;>hV?untL=fub>}(VZWdwyJqsa2?L=GP2)>mNszS)_RBo?O34>QjUWh{R*%47!S
z5c-&7{I0nGQ<PS2ez=-&{xN}tJqZHJ8AE%p39GZ@fM6H!4%%s<kB$e)z#wWIO8vr2
zaG8rNB34hDlvp@mm17{-`xgSmY|Q<2VNF6zDBh9p6(DBlrP$F%U|G?m@ya8xAekfj
z6A}<rUZ!+N79Qz+>X_Ph(1Fk83U?XMXe=x9GOU_ea>kA~SF^z)#aBT3`OyMORv_L(
zymT0@vCu_9!Q4*$iiZj45PT#Fa<whNHDbbS;p9~$p_J6|6Z1c1<S4U@AYRZt%FC_l
zlxPFhbDAOfM0><Z*kC>3Yl2I}SBZL;UCIgQq&0#A{&X^qu#wG`TJ!cTO*7G>g64I^
zTD_fg6@BL1?9qxBSL<J1lj|0myOUU>_Wg$s@_4XvRe4R`>09+rre`E4wQzrs!*_W3
zVVxf{x5iG<PvGdd?J+6yS3x0sLCOZl43lq3N#a9UA+dhV@{m=AV<$RDrbIHVeq<KY
zfevDbz>gkhHwO_9<1fI(0KLCdAavO8qn8s-2}<WV3ZnU>8<%q%bg(KfeIPjcPt1j5
zc-sk)lSi4?#Ak~Zv;py6MYk1SsZm#;pU{IN_@$rj{b&RwBI2<ux&@6&B|3#d#@RnU
z*^zoj`dwJQNw=*i{+*A7IeLDrFIieq<SxR(l!ls%wNHqvWyUXFkG~z3C5oHUILYPm
z9lBWHTCT$)Vk&3UuoL9;%gLtVt+SS@d*r}wtCye7zghkdcMfE4c7hOoYpG=>NQOf;
z`GJ=k>ES;KXPD3=II3*GEVKGc;NH>!)Pah!^%}T0XL0N>ge*TL^nj^28F;t}hoW1u
z!E6IRYV*HG+wIl+lKI66%|A6IY()sHg#N=1P9<6&6j>SHmMg3W?8tgD0cG9tLj=jF
zK&;sP{fjl2In|Lu)Zi=)I}B$|cQ<z)(^G3DxWoQ;@eQ&V%I{Ez&otGhtj?h~oPJ5K
zJMRZ-dWi{q6>Y}&OIpXhXy6(tP<<>Mqj|Z3+l*}ayqi1giO>vN=Lz$y_s64ecRM=A
z`<fZ*#<n8!dTG5w<(mQ2T^9ix)r)mcXk|q-;TyX@KXPkw|7;+C6xjNGtnDxHIA8%#
z1_CBTFDwp8OFi2iEYNi|M-7>9kGv+4#)J4WS4`=V9F%vk=66r@;|4_FEg7TNHerju
zN>E-Y{+>>#`w_wJqw^dAug>C7g``a5whKHj$fBIYQ*9>J#AOPmWhYpb#$TIXdvinX
zjOUV2+m77Q`#7E(z4c1gJuhZ$wn<_Md5oD9(5s{8+!l_5bvjn3#Ftk@vxF3(eV@B4
z&$Md5&g4~>y;7yf5fR&gb}E>}A;mqZjZJaxR7;yRMn*uXaLfCzw6uF~G6{h2TiniG
zg=3ZfRMy{a`;l0*39>xjf1?F(d#-Gx*}UC(1f6|)EMUU#))!-wmMHxG_~fhhMFA*R
zpJaf3t|HB*G-ov3zffn+_+qzuK?tgZ6sTr=O*I;1FGxR|44FK?LwW;M(Am_X98<g2
z)P$^4=;L93xtIjVeiyn6^EbbXI-8ag)+Lv8f_Xrjgw>|S8<`VV=#hf(I$v&blX@t6
zp~iSvx&RFQ`gsO(&StG+rhsOg=b;#P-x6-j47$;cufEIT_6V6^20Xs;jQp^-l)VeN
z<aGKq+QWi!IpZ}uqX!X2@cSOOxtmQ8T2#S-FkV<=sJr{KI7^F(nv?-LIu#zn82ZGy
z5)2z%Y%Hr2THjz=N7=h8zCaZ!l<vlnr$c1IZv3+IS_}a3w3CqAl9JFQ<M1J&?Jt5Q
zsowebBW!I0*lR^5>a`+ENh4O{?K+=}SnT`J5R2ABt|uHmMt8{})24ma-dAch42M;*
z>1<gEu-)cPdM444xzoGv=qb1e_~o5On;?32Yw|Ha8<R7hnJS8M5red7gUb8t=oa@9
z8!bf*uLs*!Rg{<Z-K$AGzGtjaCGMBjNH1OX-WOuvJs9MpXHli^oJfsIGCC@dN!c83
zv9i3YQY7&cO7{g-YLOT-&G$XGEz53(Q`>s<xl-0^R<yNuCi=-rh@L7OZB?y8<qJjo
zAZxC*bNXOwr#dZqGPek;17-G$pImw??DiGigtT^3a|5oW{7!QL=uy9vf>GHdfr6gQ
zjcBboNOXfXCDLpcc0D-}-5VPC{ZRmdZ0>*GI(uZU>@+cjEc)sxVnOc}`msc+y)LZR
zijBzsD>m=Zu7w}6P_9grSp0ztCKFUTjWOTty;!qfywh*V23cU?fY3qgFft1-I*9fE
zjo5qyZ8W$~uQYznN{kVZt@}|B!YF)cKMImnA^y$An?L{)YJL=_3&O~v4PvtQ;y$=N
zMV}H6Yitx_hv`0-(I@;YstbJ1%8ZMWM&1hS5Mv~t3#J>=rR?U<31J3{FrrPck9p1v
zm`DSsh<f!u(jvs~h~&Yd5^*RtOA4j{>04X!dQuG)At>g(3GX9aV&#Q!%6?6N{1!T0
zb92r0TPos)9;_}_Km{FduvlKUw)9C(OVI{+T;goqQ)xo#+nTAgPk)}};azn7(NC~f
z*o3{__|)(XCY)GO)!e+<RRWRzJgdyh)BdlY2By4>m$trczTX;tcBeOz6A@9Z9$ppD
zllt%_vN=t<rqJ&C`>H$U4<lL=gc7P?Tk~ft9w8X#t*WI5;>~1ohRNo=647%rb-s$H
z6(S8=D5CW5@V1tUhX{sqfO}O9bY)B9bock=H6SCtYkK{99H(f}C*?A6bvGmSt?BBD
z4PNbf{2RhXMU0E!>3b)e^o+JSI8NgDuKuUHkiQ4svDvjWoxJyq`R5m8cnz*sc=bW>
Fe*v>8?GFF|

literal 0
HcmV?d00001

diff --git a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
index e44b4acf2fcb58..6d44345c2ae61a 100644
--- a/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
+++ b/files/fr/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
@@ -1,17 +1,17 @@
 ---
 title: Les grilles CSS, les valeurs logiques et les modes d'écriture
 slug: Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes
+l10n:
+  sourceCommit: f224dbe80c60289cd8b7d2bf92871d091e0f5d0d
 ---
 
 {{CSSRef}}
 
-{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}
-
-Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.
+Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille&nbsp;: la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.
 
 ## Les propriétés logiques, les propriétés physiques et les valeurs
 
-CSS possède de nombreux mots-clés qui permettent de positionner **physiquement** les éléments : `left`, `right`, `top`, `bottom`… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.
+CSS possède de nombreux mots-clés qui permettent de positionner **physiquement** les éléments&nbsp;: `left`, `right`, `top`, `bottom`… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.
 
 ```css
 .container {
@@ -30,15 +30,48 @@ CSS possède de nombreux mots-clés qui permettent de positionner **physiquement
 </div>
 ```
 
-On rencontre également ces mots-clés physiques avec `text-align: right` afin d'aligner le texte à droite. Il existe aussi des propriétés **physiques** en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.
+On rencontre également ces mots-clés physiques avec `text-align: right` afin d'aligner le texte à droite. Il existe aussi des propriétés **physiques** en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme [`margin-left`](/fr/docs/Web/CSS/margin-left), [`padding-left`](/fr/docs/Web/CSS/padding-left), etc.
+
+On qualifie ces propriétés de physiques, car elles concernent l'écran qu'on regarde&nbsp;: la gauche sera toujours la gauche, quelle que soit la direction du texte.
+
+### Les problèmes des propriétés physiques
+
+Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété [`text-align`](/fr/docs/Web/CSS/text-align) n'est utilisée, alors que pour le second, on utilise `text-align` avec `left` et on ajoute `dir="rtl"` sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec `text-align value: left`, l'alignement reste à gauche.
+
+```html hidden
+<p class="left">
+  Pour ce paragraphe, on a <code>text-align: left</code>, il sera donc toujours
+  aligné à gauche, même si le sens d'écriture du document va de droite à gauche
+  (rtl).
+</p>
+
+<p>
+  Aucun alignement imposé sur ce paragraphe, il suit la direction du document.
+</p>
+```
 
-On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.
+```css hidden
+body {
+  direction: rtl;
+}
+
+p {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  margin: 1em;
+  color: #d9480f;
+}
 
-Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise `text-align` avec `left` et on ajoute `dir="rtl"` sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec `text-align value: left`, l'alignement reste à gauche.
+.left {
+  text-align: left;
+}
+```
 
-![A simple example of text direction.](8_direction_simple_example.png)
+{{EmbedLiveSample("","",200)}}
 
-Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.
+Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS&nbsp;: en supposant que le texte est toujours écrit de gauche à droite et de bas en haut, elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.
 
 ### Les propriétés et valeurs logiques
 
@@ -46,17 +79,17 @@ Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à l
 
 ## L'axe de bloc et l'axe en ligne
 
-Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (_block axis_ en anglais) et l'axe en ligne (_inline axis_). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes _logiques_ sont très utiles et on comprend mieux leurs rôles sur la grille.
+Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références&nbsp;: l'axe de bloc (<i lang="en">block axis</i> en anglais) et l'axe en ligne (<i lang="en">inline axis</i> en anglais). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes _logiques_ sont très utiles et on comprend mieux leurs rôles sur la grille.
 
-![An image showing the default direction of the Block and Inline Axes.](8-horizontal-tb.png)
+![Une image illustrant la direction par défaut pour l'axe de bloc et l'axe en ligne.](8-horizontal-tb.png)
 
 ## Les modes d'écriture CSS
 
-Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (_CSS Writing Modes_). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article [_CSS Writing Modes_ (en anglais)](https://24ways.org/2016/css-writing-modes/) écrit par Jen Simmons.
+Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples&nbsp;: la spécification CSS sur les modes d'écriture (<i lang="en">CSS Writing Modes</i>). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter [l'article <i lang="en">CSS Writing Modes</i> (en anglais), écrit par Jen Simmons](https://24ways.org/2016/css-writing-modes/).
 
 ### `writing-mode`
 
-Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété `writing-mode` nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :
+Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété `writing-mode` nous permet d'afficher du texte dans plusieurs directions. La propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) peut prendre les valeurs suivantes&nbsp;:
 
 - `horizontal-tb`
 - `vertical-rl`
@@ -64,7 +97,7 @@ Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou d
 - `sideways-rl`
 - `sideways-lr`
 
-Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut `horizontal-tb` et le second utilise la valeur `vertical-rl`. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (_inline_) est donc l'axe vertical.
+Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut `horizontal-tb` et le second utilise la valeur `vertical-rl`. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne est donc l'axe vertical.
 
 ```css hidden
 .wrapper > p {
@@ -89,7 +122,7 @@ Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour l
 </div>
 ```
 
-{{EmbedLiveSample("writing-mode", '500', '420')}}
+{{EmbedLiveSample("", '500', '420')}}
 
 ## La gestion des modes d'écriture avec une grille
 
@@ -97,7 +130,7 @@ Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement
 
 ### Mode d'écriture par défaut
 
-Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.
+Dans le prochain exemple, la grille possède trois colonnes et deux pistes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.
 
 ```css hidden
 * {
@@ -138,11 +171,11 @@ Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela
 </div>
 ```
 
-{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}
+{{EmbedLiveSample("", '500', '230')}}
 
-### Définir writing-mode
+### Définir le mode d'écriture
 
-Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.
+Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement, de haut en bas.
 
 ```css hidden
 * {
@@ -184,9 +217,7 @@ Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir
 </div>
 ```
 
-{{EmbedLiveSample("Définir_writing-mode", '500', '330')}}
-
-![A image showing the direction of Block and Inline when writing-mode is vertical-lr](8-vertical-lr.png)
+{{EmbedLiveSample("", '500', '330')}}
 
 ## L'utilisation de valeurs logiques pour l'alignement
 
@@ -250,25 +281,25 @@ Dans le prochain exemple, on aligne des objets dans une grille pour laquelle `wr
 </div>
 ```
 
-{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}
+{{EmbedLiveSample("", '500', '240')}}
 
 Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de `vertical-lr` à `vertical-rl` pour changer de mode d'écriture.
 
 ## Le placement automatique et les modes d'écriture
 
-On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.
+On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin, mais cette ligne ne progresse pas nécessairement de gauche à droite.
 
 ## Le placement sur les lignes et les modes d'écriture
 
 Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.
 
-Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne trois objets en utilisant le placement sur les lignes.
+### Placement sur les lignes pour du texte de gauche à droite
 
-- L'objet 1 commence à la colonne 1 et occupe une piste
-- L'objet 2 commence à la colonne -1 et occupe -3 pistes
-- L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.
+Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne trois objets en utilisant le placement sur les lignes.
 
-### Placement sur les lignes pour du texte de gauche à droite
+- L'objet 1 commence à la ligne verticale 1 et occupe une piste
+- L'objet 2 commence à la ligne verticale -1 (le bord tout à droite) et s'étend jusqu'à la ligne verticale -3
+- L'objet 3 commence à la ligne verticale 1 et s'étend jusqu'à la troisième ligne verticale.
 
 ```css hidden
 * {
@@ -317,11 +348,11 @@ Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne
 </div>
 ```
 
-{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}
+{{EmbedLiveSample("", '500', '240')}}
 
 ### Placement sur les lignes pour du texte de droite à gauche
 
-Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl` pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.
+Si on ajoute alors la propriété [`direction`](/fr/docs/Web/CSS/direction) avec la valeur `rtl` pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne -1 sera à gauche.
 
 ```css hidden
 * {
@@ -371,29 +402,29 @@ Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl`
 </div>
 ```
 
-{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}
+{{EmbedLiveSample("", '500', '240')}}
 
-On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.
+On voit ici que si on change la direction du texte pour la page ou pour une partie de la page, la disposition change selon les numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.
 
 ### L'étrange ordre des valeurs pour `grid-area`
 
-La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).
+La propriété [`grid-area`](/fr/docs/Web/CSS/grid-area) permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire&nbsp;: haut, droit, bas, gauche).
 
-Pour les valeurs de `grid-area`, l'ordre est le suivant :
+Pour les valeurs de `grid-area`, l'ordre est le suivant&nbsp;:
 
 - `grid-row-start`
 - `grid-column-start`
 - `grid-row-end`
 - `grid-column-end`
 
-Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :
+Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes&nbsp;:
 
 - `top`
 - `left`
 - `bottom`
 - `right`
 
-Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété `grid-area` comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !
+Ce qui correspond… au sens anti-horaire&nbsp;! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage (<i lang="en">padding</i>). Pour comprendre, mieux vaut voir la propriété `grid-area` comme une propriété logique qui fonctionne selon les axes de bloc et en ligne&nbsp;: on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus «&nbsp;logique&nbsp;»&nbsp;!
 
 ## Utiliser des modes d'écriture hybrides et les grilles CSS
 
@@ -455,11 +486,11 @@ Les modes d'écritures permettent d'afficher les documents en respectant les rè
 </div>
 ```
 
-{{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}
+{{EmbedLiveSample("", '500', '280')}}
 
 ## Les valeurs physiques et les grilles CSS
 
-On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur [l'alignement des boîtes et les grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout), nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.
+On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur [l'alignement des boîtes et les grilles](/fr/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout), nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.
 
 Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode `ltr` à un mode `rtl`.
 
@@ -467,6 +498,4 @@ Si on utilise le positionnement absolu dans une zone d'une grille, là encore, o
 
 Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.
 
-La [spécification sur les propriétés logiques en CSS](https://drafts.csswg.org/css-logical-props/) vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des [équivalents logiques](/fr/docs/Web/CSS/CSS_Logical_Properties) pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.
-
-{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}
+La [spécification sur les propriétés logiques en CSS](https://drafts.csswg.org/css-logical-props/) vise à résoudre ce problème en fournissant [des équivalents logiques](/fr/docs/Web/CSS/CSS_logical_properties_and_values) pour chacune des propriétés physiques telles que [`margin-left`](/fr/docs/Web/CSS/margin-left) et [`margin-right`](/fr/docs/Web/CSS/margin-right). Ces propriétés et valeurs sont bien prises en charge par les navigateurs récents. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, cela vous aidera à comprendre le fonctionnement de ces propriétés logiques.

From c6b1c6025ad3fb598b34304c71a5e6212d59850c Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:12:51 +0200
Subject: [PATCH 045/268] Fix #14172 (#15826)

* update and fix #14172
* fix asset compression
---
 files/fr/web/css/css_media_queries/index.md   | 47 ++++++++++++++-----
 .../css/css_media_queries/media-queries.svg   |  1 +
 2 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 files/fr/web/css/css_media_queries/media-queries.svg

diff --git a/files/fr/web/css/css_media_queries/index.md b/files/fr/web/css/css_media_queries/index.md
index f222af221919cb..13f553e2a7372d 100644
--- a/files/fr/web/css/css_media_queries/index.md
+++ b/files/fr/web/css/css_media_queries/index.md
@@ -1,32 +1,52 @@
 ---
-title: Media queries
+title: Requêtes média CSS (media queries)
 slug: Web/CSS/CSS_media_queries
+l10n:
+  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
 ---
 
 {{CSSRef}}
 
-Les requêtes média, plus souvent appelées **_media queries,_** sont un outil de _responsive design_ qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou _at-rule_) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.
+Les **requêtes média CSS**, plus souvent appelées **<i lang="en">media queries</i>**, sont un outil de [<i lang="en">responsive design</i>](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) qui permet d'adapter la feuille de styles CSS en fonction de différents paramètres ou caractéristiques de l'appareil.
 
-De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut [`media`](/fr/docs/Web/HTML/Element/source#media) de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.
+Par exemple, on pourra appliquer différentes mises en forme selon la taille de [la zone d'affichage](/fr/docs/Glossary/Viewport) pour que la disposition soit correcte selon les tailles d'écran des appareils.
 
-De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.
+Par exemple, on pourra utiliser une police de caractères plus petite pour les appareils avec des petits écrans, augmenter l'espace entre les paragraphes si la page est vue en mode portrait, ou encore augmenter la taille des boutons sur les écrans tactiles.
 
-Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries).
+![Un ordinateur portable et un smartphone, chacun avec une taille de zone d'affichage différente, où le contenu est agencé différemment grâce aux media queries.](media-queries.svg)
+
+C'est [la règle @](/fr/docs/Web/CSS/At-rule) [`@media`](/fr/docs/Web/CSS/@media) qui est utilisée en [CSS](/fr/docs/Web/CSS) pour appliquer de façon conditionnelle un fragment d'une feuille de styles selon le résultat d'une requête média. Si on souhaite appliquer de façon conditionnelle une feuille de styles entière, on utilisera [`@import`](/fr/docs/Web/CSS/@import).
+
+Lorsqu'on conçoit des composants HTML réutilisables, on peut également utiliser [les requêtes de conteneur](/fr/docs/Web/CSS/CSS_container_queries) qui permettent d'appliquer des mises en forme selon la taille de l'élément englobant plutôt que par rapport à la zone d'affichage ou aux caractéristiques de l'appareil.
+
+### Les requêtes média en HTML
+
+En [HTML](/fr/docs/Web/HTML), on peut appliquer des requêtes média à différents éléments&nbsp;:
+
+- Dans l'attribut [`media`](/fr/docs/Web/HTML/Element/link#media) de l'élément [`<link>`](/fr/docs/Web/HTML/Element/link), qui définit le média auquel une ressource liée (généralement du CSS) s'applique.
+- Dans l'attribut [`media`](/fr/docs/Web/HTML/Element/source#media) de l'élément [`<source>`](/fr/docs/Web/HTML/Element/source), qui définit le média sur lequel la source s'applique (uniquement valide à l'intérieur d'éléments [`<picture>`](/fr/docs/Web/HTML/Element/picture)).
+- Dans l'attribut [`media`](/fr/docs/Web/HTML/Element/style#media) de l'élément [`<style>`](/fr/docs/Web/HTML/Element/style), qui définit le média auquel le style s'applique.
+
+### Les requêtes média en JavaScript
+
+En [JavaScript](/fr/docs/Web/JavaScript), on peut utiliser la méthode [`Window.matchMedia()`](/fr/docs/Web/API/Window/matchMedia) pour tester une requête média par rapport à la fenêtre courante. On peut également utiliser [`MediaQueryList.addListener()`](/fr/docs/Web/API/MediaQueryList/addListener) pour réagir aux changements d'états d'une requête média. Grâce à cette méthode, votre site ou application peut réagir aux modifications de configuration, d'orientation ou d'état.
+
+Pour en savoir plus sur les tests des requêtes média dans des programmes, voir l'article [Tester les requêtes média](/fr/docs/Web/CSS/CSS_media_queries/Testing_media_queries).
 
 ## Référence
 
 ### Règles @
 
-- {{cssxref("@import")}}
-- {{cssxref("@media")}}
+- [`@import`](/fr/docs/Web/CSS/@import)
+- [`@media`](/fr/docs/Web/CSS/@media)
 
 ## Guides
 
-- [Manipuler les requêtes média](/fr/docs/Web/CSS/Media_queries)
-  - : Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
-- [Tester les requêtes média](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries)
-  - : Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
-- [Utiliser des requêtes média pour l'accessibilité](/fr/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)
+- [Utiliser les requêtes média](/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+  - : Cet article présente les requêtes média, leur syntaxe, les opérateurs et caractéristiques média utilisées pour les construire.
+- [Tester les requêtes média](/fr/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
+  - : Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié·e lorsque les résultats d'une requête média évoluent (par exemple lorsque la personne tourne son appareil ou redimensionne la fenêtre de son navigateur).
+- [Utiliser des requêtes média pour l'accessibilité](/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility)
   - : Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
 
 ## Spécifications
@@ -35,4 +55,5 @@ Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/d
 
 ## Voir aussi
 
-- La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
+- [Les requêtes de conteneur](/fr/docs/Web/CSS/CSS_container_queries)
+- La règle @ [`@supports`](/fr/docs/Web/CSS/@supports) afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
diff --git a/files/fr/web/css/css_media_queries/media-queries.svg b/files/fr/web/css/css_media_queries/media-queries.svg
new file mode 100644
index 00000000000000..1ffe3a41090f6a
--- /dev/null
+++ b/files/fr/web/css/css_media_queries/media-queries.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" width="1025" height="479" viewBox="-0.5 -0.5 1025 479"><defs><clipPath id="mx-clip-253-212-282-124-0"><path d="M253 212h282v124H253z"/></clipPath><clipPath id="mx-clip-743-227-134-134-0"><path d="M743 227h134v134H743z"/></clipPath><clipPath id="mx-clip-253-162-282-34-0"><path d="M253 162h282v34H253z"/></clipPath><clipPath id="mx-clip-743-202-134-24-0"><path d="M743 202h134v24H743z"/></clipPath><style>@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);</style></defs><path fill="none" pointer-events="all" d="M20 89h634.29v370H20z"/><path d="M588.46 419.51H85.83v-310.7c0-10.89 8.92-19.81 19.93-19.81h462.77c11.01 0 19.93 8.92 19.93 19.81Z" fill="#fff" pointer-events="all"/><path d="M654.29 431.58H380.35v3.67c0 4.2-3.41 7.61-7.6 7.61h-71.21c-4.19 0-7.6-3.41-7.6-7.61v-3.67H20v9.71c0 9.84 7.87 17.71 17.57 17.71h599.15c9.7 0 17.57-7.87 17.57-17.71Zm-87.6-320.8v286.95H107.6V110.78ZM568.53 89H105.76c-11.01 0-19.93 8.92-19.93 19.81v310.7h502.63v-310.7c0-10.89-8.92-19.81-19.93-19.81Z" fill="#005f4b" pointer-events="all"/><path d="M730 116.69c0-7.34 3.03-14.39 8.44-19.58 5.4-5.19 12.72-8.11 20.36-8.11h102.4c7.64 0 14.96 2.92 20.36 8.11 5.41 5.19 8.44 12.24 8.44 19.58v244.62c0 7.34-3.03 14.39-8.44 19.58-5.4 5.19-12.72 8.11-20.36 8.11H758.8c-7.64 0-14.96-2.92-20.36-8.11-5.41-5.19-8.44-12.24-8.44-19.58Zm6.4-.77v246.16h148V115.92Z" fill="#49ab95" stroke="#427368" stroke-miterlimit="10" pointer-events="all"/><ellipse cx="783.6" cy="95.15" rx="2.4" ry="2.308" fill="#fff" stroke="#427368" pointer-events="all"/><rect x="790.8" y="370.54" width="38.4" height="10.77" rx="4.62" ry="4.62" fill="#fff" stroke="#427368" pointer-events="all"/><rect x="791.6" y="94.38" width="36" height="3.85" rx="1.54" ry="1.54" fill="#fff" stroke="#427368" pointer-events="all"/><ellipse cx="834" cy="95.15" rx="2.4" ry="2.308" fill="#fff" stroke="#427368" pointer-events="all"/><ellipse cx="842" cy="95.15" rx="2.4" ry="2.308" fill="#fff" stroke="#427368" pointer-events="all"/><ellipse cx="862" cy="98.23" rx="3.2" ry="3.077" fill="#fff" stroke="#427368" pointer-events="all"/><path fill="#FFF" stroke="#91cbff" stroke-width="2" pointer-events="all" d="M100 109h470v290H100z"/><path d="M100 143.8h470m-451.2-17.4h9.4m14.1 0h9.4m14.1 0h385.4" fill="none" stroke="#91cbff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/><path fill="none" pointer-events="all" d="M250 209h287.85v130H250z"/><g font-family="Helvetica" clip-path="url(#mx-clip-253-212-282-124-0)" font-size="12"><text x="254.5" y="224.5">Lorem ipsum dolor sit amet, consectetur adipisicing</text><text x="254.5" y="238.5">elit, sed do eiusmod tempor incididunt ut labore et</text><text x="254.5" y="252.5">dolore magna aliqua.</text><text x="254.5" y="294.5">Praesent aliquam, enim at fermentum mollis, ligula</text><text x="254.5" y="308.5">massa adipiscing nisl, ac euismod nibh nisl eu lectus.</text><text x="254.5" y="322.5">Fusce vulputate sem at sapien. Vivamus leo</text></g><path fill="none" pointer-events="all" d="M740 219h140v140H740z"/><g font-family="Helvetica" clip-path="url(#mx-clip-743-227-134-134-0)" font-size="9"><text x="744.5" y="236.5">Lorem ipsum dolor sit amet,</text><text x="744.5" y="247.5">consectetur adipisicing elit, sed </text><text x="744.5" y="258.5">do eiusmod tempor incididunt ut </text><text x="744.5" y="269.5">labore et dolore magna aliqua.</text><text x="744.5" y="291.5">Praesent aliquam, enim at</text><text x="744.5" y="302.5">fermentum mollis, ligula massa</text><text x="744.5" y="313.5">adipiscing nisl, ac euismod nibh</text><text x="744.5" y="324.5">nisl eu lectus. Fusce vulputate</text><text x="744.5" y="335.5">sem at sapien. Vivamus leo</text></g><path d="m106.37 69 457.26.13" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/><path d="m101.12 69 7-3.5-1.75 3.5 1.75 3.5Zm467.76.13-7 3.5 1.75-3.5-1.75-3.5Z" stroke="#000" stroke-miterlimit="10" pointer-events="all"/><g font-family="Helvetica" text-anchor="middle" font-size="18"><path fill="#FFF" stroke-width="0" d="M209 29h243v23H209z"/><text x="329.51" y="46.56">Largeur de la zone d&apos;affichage</text></g><path d="m741.41 69.03 137.18.54" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/><path d="m736.16 69 7.01-3.47-1.76 3.5 1.73 3.5Zm147.68.6-7.01 3.47 1.76-3.5-1.73-3.5Z" stroke="#000" stroke-miterlimit="10" pointer-events="all"/><g font-family="Helvetica" text-anchor="middle" font-size="18"><path fill="#FFF" stroke-width="0" d="M744 18h132v44H744z"/><text x="809.27" y="35.8">Largeur de la</text><text x="809.27" y="57.8">zone d&apos;affichage</text></g><path d="M600 392.48V155.37" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/><path d="m600 397.73-3.5-7 3.5 1.75 3.5-1.75Zm0-247.61 3.5 7-3.5-1.75-3.5 1.75Z" stroke="#000" stroke-miterlimit="10" pointer-events="all"/><g font-family="Helvetica" text-anchor="middle" font-size="18"><path fill="#FFF" stroke-width="0" d="M607 227h88v66h-88z"/><text x="649.5" y="233.35">Hauteur</text><text x="649.5" y="255.35">de la zone</text><text x="649.5" y="277.35">d&apos;affichage</text></g><path d="M910 352.63V125.52" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/><path d="m910 357.88-3.5-7 3.5 1.75 3.5-1.75Zm0-237.61 3.5 7-3.5-1.75-3.5 1.75Z" stroke="#000" stroke-miterlimit="10" pointer-events="all"/><g font-family="Helvetica" text-anchor="middle" font-size="18"><path fill="#FFF" stroke-width="0" d="M917 207h88v66h-88z"/><text x="959.5" y="213.5">Hauteur</text><text x="959.5" y="235.5">de la zone</text><text x="959.5" y="257.5">d&apos;affichage</text></g><path fill="none" pointer-events="all" d="M130 179h100v100H130z"/><path d="M170.91 208.55c3.76 0 6.82 3.05 6.82 6.81s-3.06 6.82-6.82 6.82c-3.76 0-6.82-3.06-6.82-6.82 0-3.76 3.06-6.81 6.82-6.81Zm0 18.18c6.26 0 11.36-5.1 11.36-11.37 0-6.26-5.1-11.36-11.36-11.36-6.27 0-11.36 5.1-11.36 11.36 0 6.27 5.09 11.37 11.36 11.37Zm-36.36 47.72v-21.78l18.18-18.18 34.75 34.75 3.22-3.21-17.71-17.71 25.19-25.2 27.27 27.28v24.05Zm90.9-90.9v60.42l-25.66-25.67c-.89-.89-2.33-.89-3.21 0l-26.81 26.8-15.44-15.43c-.88-.89-2.32-.89-3.21 0l-16.57 16.57v-62.69Zm2.28-4.55h-95.46c-1.25 0-2.27 1.02-2.27 2.27v95.46c0 1.25 1.02 2.27 2.27 2.27h95.46c1.25 0 2.27-1.02 2.27-2.27v-95.46c0-1.25-1.02-2.27-2.27-2.27Z" fill="#d45b07" pointer-events="all"/><path fill="none" pointer-events="all" d="M775 129h70v70h-70z"/><path d="M803.64 149.68a4.776 4.776 0 0 1 0 9.55c-2.63 0-4.78-2.14-4.78-4.78 0-2.63 2.15-4.77 4.78-4.77Zm0 12.73c4.38 0 7.95-3.57 7.95-7.96 0-4.38-3.57-7.95-7.95-7.95-4.39 0-7.96 3.57-7.96 7.95 0 4.39 3.57 7.96 7.96 7.96Zm-25.46 33.41v-15.25l12.73-12.73 24.33 24.33 2.25-2.25-12.4-12.4 17.64-17.63 19.09 19.09v16.84Zm63.64-63.64v42.3l-17.97-17.97c-.62-.62-1.63-.62-2.25 0l-18.76 18.76-10.81-10.8c-.62-.63-1.62-.63-2.25 0l-11.6 11.6v-43.89Zm1.59-3.18h-66.82c-.88 0-1.59.71-1.59 1.59v66.82c0 .88.71 1.59 1.59 1.59h66.82c.88 0 1.59-.71 1.59-1.59v-66.82c0-.88-.71-1.59-1.59-1.59Z" fill="#d45b07" pointer-events="all"/><path fill="none" pointer-events="all" d="M250 159h287.85v40H250z"/><g font-family="Helvetica" clip-path="url(#mx-clip-253-162-282-34-0)" font-size="25"><text x="254.5" y="190">Titre</text></g><path fill="none" pointer-events="all" d="M740 199h140v30H740z"/><g font-family="Helvetica" clip-path="url(#mx-clip-743-202-134-24-0)" font-size="17"><text x="744.5" y="221">Titre</text></g></svg>
\ No newline at end of file

From 327c08c4f3c1eaaebf8c07b58690bd92494f1bab Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:31:30 +0200
Subject: [PATCH 046/268] Fix #13894 (#15802)

Fixes #13894 and update 2 pages along the way
---
 .../reference/global_objects/number/index.md  | 250 ++++++++++++------
 .../global_objects/typedarray/slice/index.md  |  49 ++--
 2 files changed, 189 insertions(+), 110 deletions(-)

diff --git a/files/fr/web/javascript/reference/global_objects/number/index.md b/files/fr/web/javascript/reference/global_objects/number/index.md
index 4b9c10816f778f..96436a622b6c48 100644
--- a/files/fr/web/javascript/reference/global_objects/number/index.md
+++ b/files/fr/web/javascript/reference/global_objects/number/index.md
@@ -1,137 +1,229 @@
 ---
 title: Number
 slug: Web/JavaScript/Reference/Global_Objects/Number
+l10n:
+  sourceCommit: b2a5f62d66b4e3d71704017d0fab7ad710e68057
 ---
 
 {{JSRef}}
 
-L'objet **`Number`** est une enveloppe objet (_wrapper_) autour du [type primitif numérique](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre). Autrement dit, il est utilisé pour manipuler les nombres comme des objets. Pour créer un objet `Number`, on utilise le constructeur `Number()`.
+Les valeurs **`Number`** représentent les nombres décimaux comme `37` ou `-9.25`.
 
-Le type JavaScript `Number` utilise [une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754). Les implémentations plus récentes offrent un nouveau type : {{jsxref("BigInt")}} qui permet de représenter des entiers avec une précision arbitraire.
+Le constructeur `Number()` contient des constantes et des méthodes pour manipuler les nombres. Les valeurs des autres types peuvent être converties en nombre à l'aide de la fonction `Number()`.
 
-## Syntaxe
+## Description
+
+Les nombres sont généralement exprimés sous leur forme littérale comme `255` ou `3.14159`. La [grammaire lexicale](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#littéraux_numériques) contient une référence plus détaillée à ce sujet.
 
 ```js
-new Number(valeur);
-var a = new Number("123"); // a === 123 donnera false
-var b = Number("123"); // b === 123 donnera true
-a instanceof Number; // donnera true
-b instanceof Number; // donnera false
+255; // deux cent vingt-cinq
+255.0; // le même nombre
+255 === 255.0; // true
+255 === 0xff; // true (notation hexadécimale)
+255 === 0b11111111; // true (notation binaire)
+255 === 0.255e3; // true (notation scientifique)
 ```
 
-### Paramètres
+En JavaScript, un littéral numérique comme `37` est bien une valeur décimale et pas particulièrement entière. Il n'existe pas de type entier distinct pour un usage courant (le type [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt) existe mais sert à représenter les très grandes valeurs entières et pas les nombres courants comme `37`).
 
-- `valeur`
-  - : La valeur numérique pour l'objet qu'on souhaite créer.
+Quand on utilise `Number(valeur)` comme fonction, elle permet de convertir une chaîne de caractères ou une valeur d'un autre type en valeur de type `Number`. Si la valeur ne peut pas être convertie, elle renvoie [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN)
 
-## Description
+```js
+Number("123"); // renvoie le nombre 123
+Number("123") === 123; // true
+
+Number("licorne"); // NaN
+Number(undefined); // NaN
+```
+
+### Encodage des valeurs numériques
+
+Le type JavaScript `Number` utilise [une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754). Cela signifie que les valeurs décimales peuvent être représentées, avec certaines limites sur l'amplitude et la précision. En résumé, un nombre à précision double IEEE 754 utilise 64 bits pour représenter trois fragments&nbsp;:
+
+- 1 bit pour _le signe_ (indiquant si le nombre est positif ou négatif)
+- 11 bits pour _l'exposant_ (pouvant aller de -1022 à 1023)
+- 52 bits pour _la mantisse_ (représentant un nombre entre 0 et 1)
+
+La mantisse est la partie qui représente la valeur effective (les chiffres significatifs). L'exposant indique la puissance de deux par laquelle la mantisse devrait être multipliée. On peut écrire la formule suivante (proche de la notation scientifique)&nbsp;:
+
+<math display="block"><semantics><mrow><mtext>Nombre</mtext><mo>=</mo><mo stretchy="false">(</mo><mrow><mo>−</mo><mn>1</mn></mrow><msup><mo stretchy="false">)</mo><mtext>signe</mtext></msup><mo>⋅</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mtext>mantisse</mtext><mo stretchy="false">)</mo><mo>⋅</mo><msup><mn>2</mn><mtext>exposant</mtext></msup></mrow><annotation encoding="TeX">\text{Number} = ({-1})^{\text{signe}} \cdot (1 + \text{mantisse}) \cdot 2^{\text{exposant}}</annotation></semantics></math>
+
+La mantisse est stockée sur 52 bits, interprétés comme les chiffres de la partie fractionnaire de `1.…` en binaire. La précision de la mantisse est donc 2<sup>-52</sup> (valeur qu'on peut obtenir via [`Number.EPSILON`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON)), soit entre 15 et 17 chiffres en écriture décimale. Les valeurs arithmétiques au-delà de cette précision seront [arrondies](https://fr.wikipedia.org/wiki/IEEE_754#Arrondir_les_nombres_flottants).
+
+La valeur la plus grande qui puisse être représentée par un nombre en JavaScript est 2<sup>1024</sup> - 1 (ici l'exposant vaut 1023 et la mantisse vaut 0.1111… en base 2), valeur qu'on peut obtenir avec [`Number.MAX_VALUE`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Les valeurs supérieures à celle-ci sont remplacées par la constante spéciale [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity).
+
+Les entiers peuvent uniquement être représentés sans perte de précision dans l'intervalle -2<sup>53</sup> + 1 à 2<sup>53</sup> - 1 inclus (valeurs qu'on peut obtenir avec [`Number.MIN_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) et [`Number.MAX_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)), car la mantisse ne peut contenir que 53 bits (en comptant le 1).
+
+De plus amples précisions sont disponibles dans [le standard ECMAScript](https://tc39.es/ecma262/multipage/ecmascript-data-types-and-values.html#sec-ecmascript-language-types-number-type).
+
+### Conversion numérique
+
+De nombreuses opérations natives qui s'attendent à manipuler des nombres appliquent d'abord une conversion à leurs arguments pour les transformer en nombre (ce qui explique pourquoi les objets `Number` se comportent généralement comme des valeurs numériques primitives). [Cette opération de conversion](https://tc39.es/ecma262/multipage/abstract-operations.html#sec-tonumber) peut être résumée ainsi&nbsp;:
+
+- Les nombres sont renvoyés tels quels.
+- [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) est transformé en [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN).
+- [`null`](/fr/docs/Web/JavaScript/Reference/Operators/null) est transformé en `0`.
+- `true` est transformé en `1`, et `false` est transformé en `0`.
+- Les chaînes de caractères sont converties en les analysant comme si elles contenaient [un littéral numérique](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_literals). Toute erreur d'analyse produira `NaN`. Il y a quelques différences mineures par rapport à littéral numérique&nbsp;:
+  - Les blancs et fins de lignes au début ou à la fin sont ignorés.
+  - Un chiffre `0` en début de chaîne n'indique pas un littéral en base octale (et n'est pas rejeté en mode strict).
+  - `+` et `-` sont autorisés au début de la chaîne pour indiquer le signe. Dans du code littéral, ils semblent faire partie du littéral, mais sont en réalité des opérateurs unaires distincts. Toutefois, le signe ne peut apparaître qu'une seule fois et ne pas être suivi par des blancs.
+  - `Infinity` et `-Infinity` sont reconnus comme des valeurs littérales. Dans du code réel, il s'agit de variables globales.
+  - Les chaînes de caractères vides ou qui ne contiennent que des blancs sont converties en `0`.
+  - [Les séparateurs numériques](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#séparateurs_numériques) (le tiret bas dans `1_050.95`) ne sont pas autorisés.
+- [Les grands entiers (<i lang="en">BigInts</i>)](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt) déclenchent une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError) pour empêcher une perte de précision involontaire lors de la conversion implicite.
+- [Les symboles](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol) déclenchent une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError)
+- Les objets sont d'abord [convertis en une valeur primitive](/fr/docs/Web/JavaScript/Data_structures#primitive_coercion) à l'aide de leurs méthodes [`[@@toPrimitive]()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) (où `"number"` est fourni comme indication), `valueOf()`, et `toString()`, selon cet ordre. La valeur primitive obtenue est alors convertie en nombre.
+
+Il existe deux méthodes qui permettent de déclencher cette conversion (ou presque) en JavaScript&nbsp;:
 
-L'objet `Number` est principalement utilisé dans les cas de figure suivants :
+- [Le plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)&nbsp;: `+x` applique l'algorithme explicité avant pour convertir `x`.
+- [La fonction `Number()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number)&nbsp;: `Number(x)` utilise le même algorithme pour convertir `x`, sauf que [les grands entiers (<i lang="en">BigInts</i>)](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt) ne déclenchent pas d'exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError) mais renvoient la valeur numérique correspondante, quitte à ce qu'il y ait une perte de précision.
 
-- Si l'argument ne peut pas être converti en un nombre, il renverra {{jsxref("NaN")}}.
-- Dans un contexte de fonction simple (quand il n'est pas utilisé comme un constructeur avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}), `Number` peut être utilisé afin d'effectuer des conversions.
+[`Number.parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat) et [`Number.parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) sont semblables à `Number()` mais servent uniquement à convertir des chaînes de caractères, en suivant des règles légèrement différentes. Par exemple, `parseInt()` ne reconnaît pas le point décimal et `parseFloat()` ne reconnaît pas le préfixe `0x`.
 
-## Propriétés
+#### Conversion entière
 
-- {{jsxref("Number.EPSILON")}}
+Certaines opérations s'attendent à manipuler des entiers, notamment celles qui fonctionnent avec des indices de tableaux ou de chaînes de caractères, des composantes temporelles et des bases numériques. Après la conversion numérique décrite ci-avant, le résultat est [tronqué](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc) en un nombre entier (la partie fractionnaire est ignorée). Si le nombre est `±Infinity`, il est renvoyé tel quel. Si le nombre est `NaN` ou `-0`, c'est `0` qui est renvoyé. Le résultat est donc toujours un entier (qui n'est pas `-0`) ou `±Infinity`.
+
+On notera que, pour la conversion entière, `undefined` et `null` deviennent `0`, car `undefined` est d'abord converti en `NaN` lors de la conversion numérique, puis en `0` lors de la conversion entière qui suit.
+
+#### Conversion en nombre à longueur fixe
+
+Certaines fonctions JavaScript «&nbsp;bas-niveau&nbsp;» permettent de manipuler l'encodage binaire des nombres entiers, notamment [les opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Operators#opérateurs_de_décalage_binaires) et les objets [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray). Les opérateurs binaires convertissent toujours leurs opérandes en entiers sur 32 bits. Dans ces cas, après la conversion numérique décrite avant, le nombre est normalisé à la largeur souhaitée en [tronquant](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc) la partie fractionnaire, puis en considérant les bits les plus faibles de la représentation de l'entier en complément à deux.
+
+```js
+new Int32Array([1.1, 1.9, -1.1, -1.9]); // Int32Array(4) [ 1, 1, -1, -1 ]
+
+new Int8Array([257, -257]); // Int8Array(2) [ 1, -1 ]
+// 257 = 0001 0000 0001
+//     =      0000 0001 (mod 2^8)
+//     = 1
+// -257 = 1110 1111 1111
+//      =      1111 1111 (mod 2^8)
+//      = -1 (comme entier signé)
+
+new Uint8Array([257, -257]); // Uint8Array(2) [ 1, 255 ]
+// -257 = 1110 1111 1111
+//      =      1111 1111 (mod 2^8)
+//      = 255 (comme entier non-signé)
+```
+
+## Constructeur
+
+- [`Number()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number)
+  - : Crée une nouvelle valeur `Number`.
+
+Lorsque `Number` est appelé comme constructeur (avec le mot-clé `new`), il crée un objet `Number` qui **n'est pas** une valeur primitive. Par exemple, on aura `typeof new Number(42) === "object"`, et `new Number(42) !== 42` (même si `new Number(42) == 42`).
+
+> **Attention :** Il est plutôt rare de devoir utiliser `Number` comme constructeur.
+
+## Propriétés statiques
+
+- [`Number.EPSILON`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON)
   - : Le plus petit intervalle entre deux valeurs qu'il est possible de représenter en JavaScript.
-- {{jsxref("Number.MAX_SAFE_INTEGER")}}
-  - : La valeur entière maximale qu'on peut représenter en JavaScript (`2^53 - 1`).
-- {{jsxref("Number.MAX_VALUE")}}
+- [`Number.MAX_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)
+  - : La valeur entière maximale qu'on peut représenter en JavaScript (2<sup>53</sup> - 1).
+- [`Number.MAX_VALUE`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE)
   - : La valeur numérique maximale qu'on peut représenter en JavaScript.
-- {{jsxref("Number.MIN_SAFE_INTEGER")}}
-  - : La valeur entière minimale qu'on peut représenter en JavaScript (`-(2^53 - 1)`).
-- {{jsxref("Number.MIN_VALUE")}}
-  - : La plus petite valeur qu'on peut représenter en JavaScript, c'est-à-dire le plus petit nombre positif (le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript).
-- {{jsxref("Number.NaN")}}
+- [`Number.MIN_SAFE_INTEGER`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER)
+  - : La valeur entière minimale qu'on peut représenter en JavaScript (-(2<sup>53</sup> - 1)).
+- [`Number.MIN_VALUE`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE)
+  - : La plus petite valeur positive qu'on peut représenter en JavaScript, c'est-à-dire le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript.
+- [`Number.NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/NaN)
   - : Une valeur spéciale pour représenter les valeurs non-numériques (**NaN** correspond à «&nbsp;<i lang="en">**N**ot **a** **N**umber</i>&nbsp;» en anglais, qui signifie «&nbsp;n'est pas un nombre&nbsp;»).
-- {{jsxref("Number.NEGATIVE_INFINITY")}}
-  - : Une valeur spéciale pour représenter l'infini négatif.
-- {{jsxref("Number.POSITIVE_INFINITY")}}
-  - : Une valeur spéciale pour représenter l'infini (positif).
-- {{jsxref("Number.prototype")}}
-  - : Cet objet permet d'ajouter des propriétés aux instances de `Number`.
+- [`Number.NEGATIVE_INFINITY`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY)
+  - : Une valeur spéciale pour représenter l'infini négatif. Cette valeur est renvoyée quand on dépasse les valeurs représentables.
+- [`Number.POSITIVE_INFINITY`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY)
+  - : Une valeur spéciale pour représenter l'infini (positif). Cette valeur est renvoyée quand on dépasse les valeurs représentables.
 
-## Méthodes
+## Méthodes statiques
 
-- {{jsxref("Number.isNaN()")}}
-  - : Cette méthode permet de déterminer si la valeur passée en argument vaut `NaN`.
-- {{jsxref("Number.isFinite()")}}
+- [`Number.isFinite()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite)
   - : Cette méthode permet de déterminer si la valeur numérique passée en argument est un nombre fini.
-- {{jsxref("Number.isInteger()")}}
+- [`Number.isInteger()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger)
   - : Cette méthode permet de déterminer si la valeur passée en argument est un entier.
-- {{jsxref("Number.isSafeInteger()")}}
-  - : Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre `-(2^53 - 1)` et `2^53 - 1`).
-- {{jsxref("Number.toInteger()")}} {{deprecated_inline}}
-  - : Cette méthode est utilisée afin d'évaluer et de convertir la valeur passée en argument en entier (ou en l'{{jsxref("Infinity", "infini","",1)}}). Cette méthode a été supprimée.
-- {{jsxref("Number.parseFloat()", "Number.parseFloat(<var>string</var>)")}}
-  - : Cette méthode correspond à la méthode {{jsxref("parseFloat", "parseFloat()")}} de l'objet global.
-- {{jsxref("Number.parseInt()", "Number.parseInt(<var>string</var>, [<var>radix</var>])")}}
-  - : Cette méthode correspond à la méthode {{jsxref("parseInt", "parseInt()")}} de l'objet global.
+- [`Number.isNaN()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN)
+  - : Cette méthode permet de déterminer si la valeur passée en argument vaut `NaN`.
+- [`Number.isSafeInteger()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger)
+  - : Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre -(2<sup>53</sup> - 1) et 2<sup>53</sup> - 1).
+- [`Number.parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat)
+  - : Cette méthode correspond à la méthode [`parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) de l'objet global.
+- [`Number.parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt)
+  - : Cette méthode correspond à la méthode [`parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt) de l'objet global.
 
-## Les instances de `Number`
+## Propriétés des instances
 
-Toutes les instances de `Number` héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur `Number` pour affecter toutes les instances de `Number`.
+Ces propriétés sont définies sur `Number.prototype` et partagées par l'ensemble des instances de `Number`.
 
-### Méthodes
+- [`Number.prototype.constructor`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor)
+  - : La fonction utilisée comme constructeur pour créer l'instance objet. Pour les instances `Number`, la valeur initiale est le constructeur [`Number()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/Number).
 
-- {{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}
+### Méthodes des instances
+
+- [`Number.prototype.toExponential()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential)
   - : Retourne une chaîne représentant le nombre en notation exponentielle.
-- {{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}
-  - : Retourne une chaîne représentant le nombre avec la notation virgule fixe.
-- {{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}
-  - : Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
-- {{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}}
-  - : Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle.
-- {{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}}
-  - : Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
-- {{jsxref("Number.prototype.valueOf()")}}
-  - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+- [`Number.prototype.toFixed()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)
+  - : Retourne une chaîne représentant le nombre avec la notation en virgule fixe.
+- [`Number.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)
+  - : Retourne une chaîne avec une représentation du nombre tenant compte de la locale. Surcharge la méthode [`Object.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString).
+- [`Number.prototype.toPrecision()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision)
+  - : Retourne une chaîne représentant le nombre avec une précision donnée en notation en virgule fixe ou exponentielle.
+- [`Number.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)
+  - : Retourne une chaîne représentant le nombre dans une base numérique donnée. Surcharge la méthode [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString).
+- [`Number.prototype.valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/valueOf)
+  - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode [`Object.prototype.valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf).
 
 ## Exemples
 
 ### Utiliser l'objet `Number` pour affecter des valeurs numériques à des variables
 
-Dans l'exemple suivant, on utilise les propriétés de l'objet `Number` pour affecter des valeurs à des variables numériques :
+Dans l'exemple suivant, on utilise les propriétés de l'objet `Number` pour affecter des valeurs à des variables numériques&nbsp;:
 
 ```js
-var plusGrandNombre = Number.MAX_VALUE;
-var plusPetitNombre = Number.MIN_VALUE;
-var infini = Number.POSITIVE_INFINITY;
-var infiniNégatif = Number.NEGATIVE_INFINITY;
-var nonNumérique = Number.NaN;
+const plusGrandNombre = Number.MAX_VALUE;
+const plusPetitNombre = Number.MIN_VALUE;
+const infini = Number.POSITIVE_INFINITY;
+const infiniNégatif = Number.NEGATIVE_INFINITY;
+const nonNumérique = Number.NaN;
 ```
 
 ### Intervalle entier pour `Number`
 
-Dans l'exemple suivant, on illustre les valeurs numériques maximales et minimales (exclues) qu'on peut représenter avec un nombre en JavaScript (pour plus de détails, [voir le chapitre 6.1.6 du standard ECMAScript](https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type)) :
+Dans l'exemple suivant, on illustre les valeurs numériques entières maximales et minimales qu'on peut représenter avec une valeur `Number`&nbsp;:
 
 ```js
-var biggestInt = 9007199254740992; //Number.MAX_SAFE_INTEGER+1 (2^53-1)
-var smallestInt = -9007199254740992; //Number.MIN_SAFE_INTEGER-1 -(2^53-1)
+const biggestInt = Number.MAX_SAFE_INTEGER; // (2**53 - 1) => 9007199254740991
+const smallestInt = Number.MIN_SAFE_INTEGER; // -(2**53 - 1) => -9007199254740991
 ```
 
-Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. Selon les objets qu'on souhaite représenter, on peut utiliser {{jsxref("String")}} dans certains cas pour représenter certaines valeurs.
+Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions.
+
+Selon les objets qu'on souhaite représenter, on peut utiliser [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String) dans certains cas pour représenter certaines valeurs.
 
-### Utiliser `Number` pour convertir un objet `Date`
+Pour les plus grands nombres, on pourra utiliser le type [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt).
 
-Dans l'exemple suivant, on convertit un objet {{jsxref("Date")}} en une valeur numérique grâce à la fonction `Number` :
+### Utiliser `Number()` pour convertir un objet `Date`
+
+Dans l'exemple suivant, on convertit un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date) en une valeur numérique grâce à la fonction `Number()`&nbsp;:
 
 ```js
-var d = new Date("December 17, 1995 03:24:00");
+const d = new Date("1995-12-17T03:24:00");
 console.log(Number(d));
 ```
 
-Ceci affichera "819167040000".
+Ceci affichera `819199440000`.
 
-### Convertir une chaîne représentant une valeur numérique en un nombre
+### Convertir une chaîne de caractères représentant une valeur numérique, ou `null` en un nombre
 
 ```js
 Number("123"); // 123
+Number("123") === 123; // true
 Number("12.3"); // 12.3
 Number("12.00"); // 12
 Number("123e-1"); // 12.3
 Number(""); // 0
+Number(null); // 0
 Number("0x11"); // 17
 Number("0b11"); // 3
 Number("0o11"); // 9
@@ -140,8 +232,6 @@ Number("100a"); // NaN
 Number("-Infinity"); // -Infinity
 ```
 
-> **Note :** On pourra également convertir `null` en `0` grâce à `Number` : `Number(null)` donnera `0`.
-
 ## Spécifications
 
 {{Specifications}}
@@ -152,8 +242,8 @@ Number("-Infinity"); // -Infinity
 
 ## Voir aussi
 
-- {{jsxref("NaN")}}
-- L'objet global {{jsxref("Math")}}
-- [Les types de données en JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre)
-- [Un billet sur le type `Number` (en anglais)](https://medium.com/@maximus.koretskyi/javascripts-number-type-8d59199db1b6#.9whwe88tz)
-- Représenter de grands entiers avec une précision arbitraire : {{jsxref("BigInt")}}
+- [Une prothèse d'émulation (<i lang="en">polyfill</i>) du comportement moderne de `Number` (dont la prise en charge des littéraux binaires et octaux) dans la bibliothèque `core-js`](https://github.com/zloirock/core-js#ecmascript-number)
+- [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN)
+- [Les opérateurs arithmétiques](/fr/docs/Web/JavaScript/Reference/Operators#opérateurs_arithmétiques)
+- [`Math`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math)
+- [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md
index 8db67bc548de61..1090869590c544 100644
--- a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md
@@ -1,26 +1,30 @@
 ---
 title: TypedArray.prototype.slice()
 slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
+l10n:
+  sourceCommit: b2a5f62d66b4e3d71704017d0fab7ad710e68057
 ---
 
 {{JSRef}}
 
-La méthode **`slice()`** renvoie une copie superficielle (shallow copy) d'un fragment du tableau typé courant dans un nouveau tableau typé. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.slice()")}}_._ _TypedArray_ est utilisé par la suite de façon générique pour réprésenter l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+La méthode **`slice()`** des instances de [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) renvoie une copie d'un fragment du tableau typé courant dans un nouveau tableau typé. La portion est prise entre les paramètres `début` (inclus) et `fin` (non-inclus) qui correspondent aux indices des éléments du tableau typé courant. Le tableau typé original ne sera pas modifié. Cette méthode utilise le même algorithme que [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
 
-{{EmbedInteractiveExample("pages/js/typedarray-slice.html")}}
+{{EmbedInteractiveExample("pages/js/typedarray-slice.html", "shorter")}}
 
 ## Syntaxe
 
-```js
-typedarray.slice([début[, fin]])
+```js-nolint
+slice()
+slice(début)
+slice(début, fin)
 ```
 
 ## Paramètres
 
 - `début` {{optional_inline}}
-  - : L'indice (compté à partir de zéro) à partir duquel commencer le fragment. Si l'indice fourni est négatif, `début` indiquera le décalage par rapport à la fin de la séquence. Par exemple, `slice(-2)` extrait les deux derniers éléments de la séquence. Par défaut, si `début` n'est pas utilisé, `slice()` commencera à partir de l'indice `0`.
+  - : L'indice (compté à partir de zéro), [converti en entier](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number#conversion_entière), à partir duquel commencer le fragment.
 - `fin` {{optional_inline}}
-  - : L'indice (compté à partir de zéro) jusqu'auquel extraire le fragment. Le fragment obtenu n'incluera pas l'élément situé à l'indice `fin`. `slice(1,4)` extrait par exemple à partir du deuxième élément et jusqu'au quatrième (c'est-à-dire les éléments dont les indices respectifs sont 1, 2, et 3). Si l'indice utilisé est négatif, `fin` indiquera le décalage par rapport à la fin de la séquence. Ainsi, `slice(2,-1)` extraira à partir du troisième élément et jusqu'à l'avant dernier élément (compris). Par défaut, si `fin` n'est pas utilisé, `slice()` extraira les éléments jusqu'à la fin de la séquence (`arr.length`).
+  - : L'indice (compté à partir de zéro), [converti en entier](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number#conversion_entière), jusqu'auquel extraire le fragment. Le fragment obtenu n'inclura pas l'élément situé à l'indice `fin`.
 
 ### Valeur de retour
 
@@ -28,39 +32,20 @@ Un nouveau tableau typé qui contient les éléments extraits.
 
 ## Description
 
-La méthode `slice()` ne modifie pas le tableau typé courant, elle renvoie une copie superficielle (_shallow copy_) du tableau typé original.
-
-Si un nouvel élément est ajouté à l'un des deux tableaux typés, l'autre ne sera pas impacté.
+Voir [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) pour plus détails. Cette méthode n'est pas générique et peut uniquement être appelée sur les instances de tableaux typés.
 
 ## Exemples
 
+### Renvoyer un fragment d'un tableau typé existant
+
 ```js
-var uint8 = new Uint8Array([1, 2, 3]);
+const uint8 = new Uint8Array([1, 2, 3]);
 uint8.slice(1); // Uint8Array [ 2, 3 ]
 uint8.slice(2); // Uint8Array [ 3 ]
 uint8.slice(-2); // Uint8Array [ 2, 3 ]
 uint8.slice(0, 1); // Uint8Array [ 1 ]
 ```
 
-## Prothèse d'émulation (_polyfill_)
-
-Il n'existe pas d'objet global intitulé _TypedArray_, la prothèse doit donc uniquement être employée si nécessaire :
-
-```js
-// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
-if (!Uint8Array.prototype.slice) {
-  Object.defineProperty(Uint8Array.prototype, "slice", {
-    value: function (begin, end) {
-      return new Uint8Array(Array.prototype.slice.call(this, begin, end));
-    },
-  });
-}
-```
-
-De plus cette prothèse n'est pas parfaite car elle renvoie une instance d'`Array` et pas de `Uint8Array`. Elle manque donc des propriétés normalement associées aux objets `TypedArray`.
-
-S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour `TypedArray.prototype` car on ne peut pas les rendre non-énumérables.
-
 ## Spécifications
 
 {{Specifications}}
@@ -71,4 +56,8 @@ S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pa
 
 ## Voir aussi
 
-- {{jsxref("Array.prototype.slice()")}}
+- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `TypedArray.prototype.slice()` dans la bibliothèque `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [Le guide sur les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Guide/Typed_arrays)
+- [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
+- [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
+- [`String.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/slice)

From d6899591ed6a3921fd5ffa9f964773f068583692 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:36:18 +0200
Subject: [PATCH 047/268] Fix #13769 (#15797)

Fixes #13769
---
 .../resizing_background_images/index.md       | 112 +++++++++++-------
 1 file changed, 69 insertions(+), 43 deletions(-)

diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md
index bbd12c99587bf1..8e5acec07c50c2 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md
@@ -1,119 +1,145 @@
 ---
-title: Mettre à l'échelle des images en arrière-plan
+title: Redimensionner les images d'arrière-plan avec background-size
 slug: Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images
+l10n:
+  sourceCommit: 70b1b8ac18d3e3346645d4ee5155f654c83d96e0
 ---
 
 {{CSSRef}}
 
-La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.
+La propriété [CSS](/fr/docs/Web/CSS) [`background-size`](/fr/docs/Web/CSS/background-size) permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer une mosaïque répétant l'image à sa taille normale en indiquant une hauteur et/ou une largeur pour l'image. Il est ainsi possible d'agrandir ou de rapetisser l'image.
 
-## Carreler une image de grande taille
+## Répéter une grande image
 
-Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.
+Prenons une grande image, ici le logo de Firefox aux dimensions 2982x2808 pixels. Imaginons qu'on veuille (pour de mauvaises raisons), obtenir une mosaïque avec quatre exemplaires de cette image dans un élément de 300x300 pixels. Pour cela, on pourra fixer la propriété `background-size` à 150 pixels.
 
-![](logo-quantum.9c5e96634f92.png)
+### HTML
 
-On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :
+```html
+<div class="tiledBackground"></div>
+```
+
+### CSS
 
 ```css
-.square {
-  width: 300px;
-  height: 300px;
+.tiledBackground {
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
   background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
 }
 ```
 
-On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`.
+### Résultat
+
+{{EmbedLiveSample("", 340, 340)}}
 
 ## Étirer une image
 
-Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.
+On peut aussi indiquer les dimensions horizontale et verticale de l'image, comme ceci&nbsp;:
+
+### CSS
 
 ```css
 background-size: 300px 150px;
 ```
 
-L'image suivante montre le résultat obtenu.
+### Résultat
 
-![Logo de Firefox étité](s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png)
+![Le logo étiré](stretched_firefox_logo.png)
 
 ## Agrandir une image
 
-On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.
+À l'inverse, on peut vouloir agrandir une image en arrière-plan. Ici, on passe d'une icône de 32x32 pixels à 300x300 pixels&nbsp;:
 
-![Logo MDN à l'échelle](favicon57.de33179910ae.1.1.png)
+### CSS
 
 ```css
 .square2 {
-  width: 300px;
-  height: 300px;
   background-image: url(favicon.png);
   background-size: 300px;
-  border: solid 2px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
   text-shadow: white 0px 0px 2px;
   font-size: 16px;
 }
 ```
 
-On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.
+### Résultat
 
-## Valeurs spéciales : `contain` et `cover`
+![Logo de MDN agrandi](scaled_mdn_logo.png)
 
-En plus de {{cssxref("&lt;length&gt;")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`.
+Comme vous pouvez le voir, le CSS est quasi-identique, seul le nom du fichier a été modifié.
 
-### `contain`
+## Les valeurs spéciales `contain` et `cover`
 
-La valeur `contain` spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.
+En plus des valeurs de longueur (type [`<length>`](/fr/docs/Web/CSS/length)), la propriété [`background-size`](/fr/docs/Web/CSS/background-size) permet d'utiliser valeurs spéciales `contain` et `cover`. Voyons ce qu'ils offrent.
 
-Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).
+### `contain`
 
-{{EmbedLiveSample("contain", "100%", "220")}}
+La valeur `contain` indique que, quelle que soit la taille de la boîte englobante, l'image d'arrière-plan devrait être redimensionnée afin que chaque côté soit aussi grand que possible, sans dépasser la taille du conteneur. Redimensionnez l'exemple qui suit pour observer l'effet obtenu.
+
+#### HTML
 
 ```html
 <div class="bgSizeContain">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+  <p>Essayez de redimensionner cet élément !</p>
 </div>
 ```
 
+#### CSS
+
 ```css
 .bgSizeContain {
-  height: 200px;
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: contain;
-  border: 2px solid darkgray;
-  color: #000;
-  text-shadow: 1px 1px 0 #fff;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  resize: both;
+  overflow: scroll;
 }
 ```
 
-### `cover`
+#### Résultat
 
-La valeur `cover` assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.
+{{EmbedLiveSample('', 250, 250)}}
 
-{{EmbedLiveSample("cover", "100%", "220")}}
+### `cover`
+
+La valeur `cover` indique que l'image d'arrière-plan devrait être aussi petite que possible tout en ayant ses deux dimensions supérieures ou égales à celles du conteneur. Vous pouvez redimensionner l'exemple qui suit pour observer l'effet obtenu.
 
-Cet exemple utilise le document HTML et la feuille de style suivants :
+#### HTML
 
 ```html
 <div class="bgSizeCover">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+  <p>Essayez de redimensionner cet élément !</p>
 </div>
 ```
 
+#### CSS
+
 ```css
 .bgSizeCover {
-  height: 200px;
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  resize: both;
+  overflow: scroll;
+}
 ```
 
+#### Résultat
+
+{{EmbedLiveSample('', 250, 250)}}
+
 ## Voir aussi
 
-- {{cssxref("background-size")}}
-- {{cssxref("background")}}
+- [`background-size`](/fr/docs/Web/CSS/background-size)
+- [`background`](/fr/docs/Web/CSS/background)
+- [Redimensionnement des arrières-plans SVG](/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds)

From 8ad29f1df50ecac764a3fa29c09cacb9e4518c58 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Wed, 20 Sep 2023 13:41:07 +0200
Subject: [PATCH 048/268] Fix #13734 for `fr` (#15793)

* Fixes #13734
* Fix img compression
---
 .../confirm/firefoxcomfirmdialog_zpsf00ec381.png | Bin 0 -> 2636 bytes
 files/fr/web/api/window/confirm/index.md         |  14 ++++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)
 create mode 100644 files/fr/web/api/window/confirm/firefoxcomfirmdialog_zpsf00ec381.png

diff --git a/files/fr/web/api/window/confirm/firefoxcomfirmdialog_zpsf00ec381.png b/files/fr/web/api/window/confirm/firefoxcomfirmdialog_zpsf00ec381.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d05fe4c70c995f201244e104ba983e864836ad1
GIT binary patch
literal 2636
zcmYk8dpOhWAIImA^Oiz(_!cQm*1@4PlG>bQBNSVR<a`=yN}*9x8!3!Zq>^W49juAR
zp&DhF;!&aYIBd-f={KeF)VGJ<damE~`~9x#zTfxfbN}(V?(6e<U!Ut{`V&2&dPqG8
z1OoN;atnY!)GAdmQ%6IkTjz5wsSeFp903P`@Gj{8j9jM5)u;iUc*y-eU|N;vQoKl1
z2xR5aUt4V~#_Tu*qHgK$8|0415fE@xQX&nHV<X^5I2;Lri+)5h5&=L)m$-=pAt)~_
zU~}tu_(UEGxw;TXkV@qMYK>6X3kuozf?hvbBN7Qn>uACPLOqQv1s73BKnO0%z(qSd
zCs8Tcue2Wo6;iNwZthE=P*t3yKKvbzqk&-WxpNnj>f~fn6w2B@2}gMQc9bh!gp9UR
zC?`;yC8cuS-Ob<lUiV&~{o5nboOgQQ_V}(_hX$oQjJ17xdspM5HV~9cLAeZ6XtBr`
z>r>FtrK0nh!EjV=j7KSvT-viZJUjySR1ygx>#Xgu4tv(Iq>zpq)z@m<1;Uu<R8ZFF
zN2~<Fej(V4MgSQ^GBn9vCYzd=n98VEXpJsmd~aZq+NDw+gmVfM_R7Hi+*l8M0S^JU
z;wG|7ORh?#y+WZ}s8T6U1S(|pbP>2Hs&ACm@jz)Ww?Oq&vQR2F?pWeV<(m-z0`BUD
z0O-+f2)G9V?o9Cqj_d+3xG;pJ-OCpPDfEI<%=4_A6y&!3fp8R)b^gq0`pcKENXa>|
zF{C(p5pn}Q^jKj5Biq*fU?7Esc277;b|oMHrwzcN`0V^dLQy^?|8%}90!Su>+97}w
zkzQxdUf>oG3g`*Bv0m{J;ko%tMjk`dqcHYW^_&eEm4dQ<Ze6cPrb0unmo3(pl0`lJ
zC{8<ybt6N?PWY6zub>+O(XRJ)!v!4|f2=xt(8wDuJUfx1Qv$Iy-)!sVT5NGn%|K@=
z)18%P+&Y$d?bx;9FDI0b7sgI1kDVIN9)D4O*V`uU4Rhhi^7>YOpo2110mcMp8Dh%n
zya(cTZG?nv<1GzX@&5=q!`Ps=Y0{iUK7NLwbq(I>DO-Wb6$UwD7%}!M{g&%@>p(fO
zbu3srb0r76$#!pA-pYHcUc_jnT>cHw5wLm2Hr2Ok=RVwbE#l?d#d{tLp4%RqF|6EH
zXtOVVnRa5FeefGSSe8v7T?1<<fxt9XdKtzsaJYQOPO#A(TQ$G2;>wcxstRq+N$X6n
zC!3aAa#|uwA}K9_QTlfrZ7-4Gdvl8-DJM>L9^abUb?gh#vDRg}_x=_BobOGKANrc*
zP)=Y*!4b6bmRr-TCQvFVJYSI0d^#heJIB`LKo%BeW*FiCT-lC3LCf0N&Od8XVuz2>
zs%2XMD=bzHfi7Gdx09isQ}4|Oe>+eDv%qn%&qx0#-btOZy8C08v)?|^O3<V0d7?J;
zi+P1d&dOEkSCfZ9(S&*R!V2~3Fkn4rzu)YR>_5wHZ?f1GNiZdIPU}5H>QO$wsPsQI
z6|wt+;YZ8C=ek_4TPZ*5BTT=p*P*T*2c;K3I{~jcaUbtL96^ux;J^Q?gXu57KDfJT
zGG@r19!TlqNvGh(%rh2ZzhWr*ZcWe{Y{E?}1)l&@?<3tCD*2YM`F0dEH4EpYr_C5U
z)`3jM#%j`dCf%Xf1D5U6U5pyLVE<*VG^g8k@D6cFzhmIxET7#9-{~^7F0;N@KtuPA
zvd+OLkIf@e*HylzrL6+E0dHH)=h7aq3SI7P2-Vcjvm7^EuP`m49^TSyQ@!agD9+Y(
zMTa;*IdmdWTmJfUL|qfuf%4&R1+=c#j`>`$j84Bhe|Y5Mx6i97b4o|Lh8j$=M+N==
zxc{R6>;50@tNqOs(iIw}ft{R@`8{_L*alVSY`6visL#afF0^Y!Nk{&QI}l&R{*ch-
zz9=&J7jAIKMBy}--r5~JP7Q0e{t-p0u4PM{+0oC%$bDbsuQnX12ym8vxYEn-lh@5|
zY>j8cC0miO7h>g=EiXUxPlfad*3!zhRG#Ha{)(D;9khM#ySRhzAGC2u0cl+JqoY~W
z!lt08Fv6vYumI0PHR>PYhX=Z}zcrg-Qp19yXg6AuZcRe*3lk51GGIS#xx1}f3ld4P
z`HM>}&weyxp!n5X{p&pE;qrxWjPB#st;1AUwom$wp>DMi2Xtd*cGZst(Z<%0H^uzL
z$L0DH@rgA}VPW^?DiaM;Oh+t>??iE$(WmYXx%fAE)l7-scckSvU}BHfZgD-ome}fW
zI4hg^aK+Xqm%z0Rb<M^0%fac(HM{HC2a`C*SzggCG<)T}PvcL<{=8pD>N3tIe!upP
z5m<0i1Q*#29;(nNI!NNzZ*{%RQ<c&udC%O*O4VsepmyBoDAES7iHU91Pq?`qtxc;<
z(nI(vhmC9*Ng2JB?tvvn>-Ujkw-0qjZk`wWkR1<Yy;A4YJisx~b|nwptBk_1wMn$f
zfZ|SA!mMI*)1Xf3PPEwvs`G+#*jpTbt$vZo(8#B%AH--3s}pIL{!}5JeWb9|?DFX`
zMl?=Y9X%~Gh^}c>25R4Pnii2o%2z(ktFxV2jx<o$RJ?IanL1ir;Tq)k4aYUPuzstK
zolub;8)91I(rDK2Je;B1Ve6?#Ylr<Z*?*1okL~_rK10bKPJ8A`)v)P*YNB-3N4<D+
zZ2VkPI0G6pgP8!RUuk>V7WI<+#oOM7@4GJ6-qHL~D_<<?CndXTkW3qPnUCcdg&JSY
z8?bVQRpnY--*;RqU67f)Q&6vkDX+z~j{0X7Z)0opq59PfxY?N$@yCqh&b-&<8h!Kq
z5CiVviidxenGzf&nnfCg6_mLjS`>)(|CWz&U*o{Qz&jQTx(kKL_~;yftsLci^PTu~
zYS4s04>Z7P-*00HfJp4_zbQu$_UKRZ4>r@O;nG=gb8*g^#|t@m{PS27SnTHsX}rMk
z0cD$^1^<R3weyZYwpAHNrX}6X8l2e~+#7$gH01U3aRc;P`8DSAD@y)hGl?-w(UNFV
z`3}0PCZWk6%k2F7>EC1cpj8X@u*Ydqo8Nn;&p0zH0@)Sw!Tqy#65r2eniCtJ(aCqu
z>nm)k!+*vSj3mZr1+aQF#0Fp`un!gyCK&wRt2w3;<H$!2-11l24}&$oOV(pA&AJS}
zXFR*=y$rqfj%2xD<0O@MK-{Apn@(Q((jkpl;Dj6chrV{yq0Hq&C=kVxwgM-xHSXK1
zjGBb&D^4$0>k7ek?N$e<)V@J_R8QL>YfZp&@^7at60Dul^qm^|bW!}$vNIBiU&CeV
z7eJ|0@)fF@J=E!TU4fRp2?P-2_O0r($+Fq^Opl24xO}@I&*<!m4c7N1g#sO;?KdS6
zGjOLg<4S=+n+?HU4F#JlV$KWmjo?fU@1{dEw5sTWmDSgq;jeYsWo2P8AJV7tdTp!s
rgm~SwKvIIrb#+>Ftf@U0>y|XQ4ZI;b$|zj*1B7_H6W#9PBl7+Y;0NC6

literal 0
HcmV?d00001

diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md
index f38d89d90cdcf3..4b291c57a56ec0 100644
--- a/files/fr/web/api/window/confirm/index.md
+++ b/files/fr/web/api/window/confirm/index.md
@@ -1,6 +1,8 @@
 ---
-title: Window.confirm()
+title: "Window : méthode confirm()"
 slug: Web/API/Window/confirm
+l10n:
+  sourceCommit: 70b1b8ac18d3e3346645d4ee5155f654c83d96e0
 ---
 
 {{ApiRef("Window")}}
@@ -11,8 +13,8 @@ Sous certaines conditions, par exemple au changement d'onglet, le navigateur pou
 
 ## Syntaxe
 
-```js
-confirm(message);
+```js-nolint
+confirm(message)
 ```
 
 ### Paramètres
@@ -27,8 +29,8 @@ Un booléen qui indique si l'option «&nbsp;OK&nbsp;» (`true`) ou «&nbsp;Annul
 ## Exemples
 
 ```js
-if (window.confirm("Do you really want to leave?")) {
-  window.open("exit.html", "Thanks for Visiting!");
+if (window.confirm("Souhaitez-vous vraiment quitter le site ?")) {
+  window.open("exit.html", "Merci de votre visite !");
 }
 ```
 
@@ -42,7 +44,7 @@ Ces boîtes de dialogue sont des fenêtres modales qui empêchent d'accéder au
 
 Il y a également d'autres raisons [d'éviter les boîtes de dialogue pour demander une confirmation](https://alistapart.com/article/neveruseawarning/).
 
-Une autre méthode consiste à utiliser l'élément [`<dialog>`](/fr/docs/Web/HTML/Element/dialog) afin d'afficher des demandes de confirmation.
+Une autre méthode consiste à utiliser l'élément HTML [`<dialog>`](/fr/docs/Web/HTML/Element/dialog) afin d'afficher des demandes de confirmation.
 
 ## Spécifications
 

From 7a1456919206ecc60fe8a18a1a0ccfb344aaf038 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Wed, 20 Sep 2023 21:02:32 +0800
Subject: [PATCH 049/268] [zh-cn]: update TLS page (#15946)

---
 .../transport_layer_security/index.md         | 95 ++++++++++++++++++-
 1 file changed, 90 insertions(+), 5 deletions(-)

diff --git a/files/zh-cn/web/security/transport_layer_security/index.md b/files/zh-cn/web/security/transport_layer_security/index.md
index 36aa98cf3bf7e2..c63a9bb5d52d39 100644
--- a/files/zh-cn/web/security/transport_layer_security/index.md
+++ b/files/zh-cn/web/security/transport_layer_security/index.md
@@ -1,16 +1,101 @@
 ---
-title: 传输层安全协议
+title: 传输层安全
 slug: Web/Security/Transport_Layer_Security
 ---
 
-使用传输层安全性协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。本文的目的是帮助你确保客户端和服务器之间的机密性和完整性通信。Mozilla 运营安全团队（OpSec）维护了 [服务器端 TLS 参考配置的 Wiki 条目](https://wiki.mozilla.org/Security/Server_Side_TLS)。
+{{QuickLinksWithSubpages("/zh-CN/docs/Web/Security")}}
 
-传输层安全性协议（Transport Layer Security protocol，TLS）是使两个联网应用程序或设备能够安全可靠地交换信息的标准。使用 TLS 的应用程序可以自行选择安全性参数，这可能会对数据的安全性和可靠性产生重大影响。本文对 TLS 进行了概述，并提供了多种在保护内容时需要做出的决策。
+使用传输层安全协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。本文的目的是帮助你确保客户端和服务器之间的机密性和完整性通信。Mozilla 运营安全团队（OpSec）维护了[服务器端 TLS 参考配置的 Wiki 条目](https://wiki.mozilla.org/Security/Server_Side_TLS)。
 
-### 参见
+传输层安全协议（Transport Layer Security protocol，TLS）是使两个联网应用程序或设备能够安全可靠地交换信息的标准。使用 TLS 的应用程序可以自行选择安全性参数，这可能会对数据的安全性和可靠性产生重大影响。本文对 TLS 进行了概述，并提供了多种在保护内容时需要做出的决策。
+
+## 历史
+
+HTTPS 推出时，是基于 Netscape 公司推出的安全套接字层（SSL）2.0 技术的。不久后，该技术更新为 SSL 3.0，随着使用范围的扩大，显然需要指定一种通用的标准加密技术，以确保所有 web 浏览器和服务器之间的互操作性。1999 年 1 月，[互联网工程任务组](https://www.ietf.org/)（IETF）在 {{RFC(2246)}} 中规定了 TLS 1.0。TLS 的当前版本为 1.3（{{RFC(8446)}}）。
+
+尽管 web 现在使用 TLS 进行加密，但许多人仍然习惯性地将其称为“SSL”。
+
+虽然 TLS 可用于任何底层传输协议，但该协议的最初目标是加密 HTTP 流量。使用 TLS 加密的 HTTP 通常被称为 {{Glossary("HTTPS")}}。根据惯例，TLS 加密的网络流量默认在 443 端口交换，而未加密的 HTTP 默认使用 80 端口。HTTPS 仍是 TLS 的一个重要用例。
+
+## 在 TLS 上的 HTTP
+
+TLS 提供三种主要服务，有助于确保与之交换的数据的安全性：
+
+- 身份验证
+  - : 通过认证，通信的每一方都可以验证另一方的身份。
+- 加密
+  - : 在用户代理和服务器之间传输数据时对数据进行加密，以防止未经授权的各方读取和解读数据。
+- 完整性
+  - : TLS 确保数据在加密、传输和解密过程中不会丢失、损坏、篡改或伪造任何信息。
+
+TLS 连接以握手阶段开始，在此阶段，客户端和服务器就共享秘密和重要参数（如密码套件）达成一致。一旦参数确定，就进入数据交换模式，交换应用数据（如 HTTP）。
+
+### 密码套件
+
+TLS 握手协商的主要参数是[密码套件](https://zh.wikipedia.org/wiki/密码套件)。
+
+在 TLS 1.2 及更早版本中，协商密码套件包括一组加密算法，这些算法共同提供了共享秘密的协商、服务器身份验证方法以及用于加密数据的方法。
+
+TLS 1.3 中的密码套件主要用于数据加密，密钥协议和身份验证则使用单独的协商方法。
+
+不同的软件可能会对相同的密码套件使用不同的名称。例如，OpenSSL 和 GnuTLS 使用的名称与 TLS 标准中的名称不同。Mozilla OpSec 团队关于 TLS 配置的文章中的[密码名称对应表](https://wiki.mozilla.org/Security/Server_Side_TLS#Cipher_names_correspondence_table)列出了这些名称以及有关兼容性和安全级别的信息。
+
+### 配置服务器
+
+正确配置服务器至关重要。一般来说，应尽量将密码支持限制在与希望连接到网站的浏览器兼容的最新密码上。[Mozilla OpSec TLS 配置指南](https://wiki.mozilla.org/Security/Server_Side_TLS)提供了更多有关推荐配置的信息。
+
+为了帮助你配置网站，Mozilla 提供了一个有用的 [TLS 配置生成器](https://ssl-config.mozilla.org/)，它可以为以下 Web 服务器生成配置文件：
+
+- Apache
+- Nginx
+- Lighttpd
+- HAProxy
+- Amazon Web Services CloudFormation Elastic Load Balancer
+
+建议使用[配置生成器](https://ssl-config.mozilla.org/)来创建配置，以满足你的需要；然后将其复制并粘贴到服务器上的相应文件中，并重新启动服务器以接收更改。配置文件可能需要进行一些调整才能包含自定义设置，因此在使用前一定要检查生成的配置文件；安装配置文件时如果不确保任何域名等引用都是正确的，就会导致服务器无法正常工作。
+
+## TLS 1.3
+
+{{RFC("8446", "TLS 1.3")}} 是对 TLS 的重大修订。TLS 1.3 包含大量改进安全性和性能的变更。TLS 1.3 的目标是：
+
+- 删除 TLS 1.2 中未使用和不安全的特性。
+- 在设计中加入强大的安全分析。
+- 通过加密更多协议来提高隐私性。
+- 缩短完成握手所需的时间。
+
+TLS 1.3 改变了协议的许多基本原理，但保留了以前 TLS 版本的几乎所有基本功能。对于 web 而言，启用 TLS 1.3 不会影响兼容性，但也有极少数例外情况（见下文）。
+
+TLS 1.3 的主要更改有：
+
+- 在大多数情况下，TLS 1.3 的握手在一次往返中完成，从而减少了握手延迟。
+- 服务器可以启用 0-RTT（零往返时间）握手。重新连接服务器的客户端可以立即发送请求，完全消除了 TLS 握手的延迟。虽然 0-RTT 带来的性能提升非常明显，但也存在一定的重放攻击风险，因此在启用此功能前需要谨慎。
+- TLS 1.3 仅支持前向安全模式，除非连接恢复或使用预共享密钥。
+- TLS 1.3 定义了一组 TLS 1.3 独有的新密码套件。这些密码套件全部使用现代的关联数据验证加密（AEAD）算法。
+- 除了建立共享秘密所需的信息外，TLS 1.3 的握手过程都是加密的。这尤其意味着服务器和客户端证书是加密的。但请注意，客户端发送给服务器的服务器标识（服务器名称或 SNI 扩展名）不加密。
+- 许多机制已被禁用：重新协商、通用数据压缩、[数字签名算法](https://zh.wikipedia.org/wiki/数字签名算法)（DSA）证书、静态 RSA 密钥交换和使用自定义 Diffie-Hellman（DH）组的密钥交换。
+
+TLS 1.3 的草案版本已经实现。一些浏览器已启用 TLS 1.3，包括 0-RTT 模式。启用 TLS 1.3 的 web 服务器可能需要调整配置，以便 TLS 1.3 成功运行。
+
+TLS 1.3 只增加了一个重要的新用例。0-RTT 握手可为网络等对延迟敏感的应用带来显著的性能提升。启用 0-RTT 需要额外的步骤，既要确保成功部署，又要管理重放攻击的风险。
+
+TLS 1.3 中取消了重新协商功能，这可能会影响到一些依赖使用证书进行客户端身份验证的 web 服务器。一些 web 服务器会使用重新协商来确保客户端证书已加密，或仅在请求某些资源时才请求客户端证书。为了保护客户证书的隐私，TLS 1.3 握手的加密可确保客户证书是加密的；但这可能需要对软件进行一些修改。TLS 1.3 支持使用证书进行反应式客户端验证，但并未广泛实施。替代机制正在开发中，也将支持 HTTP/2。
+
+## 移除对旧 TLS 版本的支持
+
+为了帮助实现更现代、更安全的 web，所有主流浏览器都在 2020 年初开始取消对 TLS 1.0 和 1.1 的支持。需要确保你的 web 服务器支持 TLS 1.2 或 1.3。
+
+从版本 74 开始，Firefox 浏览器在连接使用旧版 TLS 的服务器时会返回 [Secure Connection Failed](https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect) 错误（[Firefox bug 1606734](https://bugzil.la/1606734)）。
+
+## TLS 握手超时值
+
+如果 TLS 握手由于某种原因开始变得缓慢或反应迟钝，用户的体验就会受到严重影响。为了缓解这一问题，现代浏览器已经实现了握手超时：
+
+- 从版本 58 开始，Firefox 浏览器实现了 TLS 握手超时，默认值为 30 秒。超时值可通过编辑 about:config 中的 `network.http.tls-handshake-timeout` 首选项来更改。
+
+## 参见
 
 - [Mozilla SSL 配置生成器](https://ssl-config.mozilla.org)和 [Cipherlist.eu](https://cipherlist.eu/) 帮助你为服务器生成配置文件以保护你的站点。
-- Mozilla 运营安全（OpSec）团队维护了一个带有[引用的 TLS 配置](https://wiki.mozilla.org/Security/Server_Side_TLS)的 wiki 页面。
+- Mozilla 运营安全（OpSec）团队维护了一个带有[参考的 TLS 配置](https://wiki.mozilla.org/Security/Server_Side_TLS)的 wiki 页面。
 - [Mozilla Observatory](https://observatory.mozilla.org/)、[SSL Labs](https://www.ssllabs.com/ssltest/) 以及 [Cipherscan](https://github.com/mozilla/cipherscan) 可以帮助你测试站点以了解其 TLS 配置的安全性。
 - [安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts)
 - [Strict-Transport-Security](/zh-CN/docs/Web/HTTP/Headers/Strict-Transport-Security) HTTP 标头

From 041b3d4b638c8c5ac6533e30da4494ed537bff6b Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Wed, 20 Sep 2023 21:03:15 +0800
Subject: [PATCH 050/268] [zh-cn]: update html element <p> (#15947)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo <yin199909@aliyun.com>
---
 files/zh-cn/web/html/element/p/index.md | 152 ++++++++++++++++++++++--
 1 file changed, 139 insertions(+), 13 deletions(-)

diff --git a/files/zh-cn/web/html/element/p/index.md b/files/zh-cn/web/html/element/p/index.md
index 7a9933e99657df..b42d8dad8ec3e8 100644
--- a/files/zh-cn/web/html/element/p/index.md
+++ b/files/zh-cn/web/html/element/p/index.md
@@ -1,38 +1,164 @@
 ---
-title: <p>
+title: <p>：段落元素
 slug: Web/HTML/Element/p
 ---
 
 {{HTMLSidebar}}
 
-**HTML \<p>**元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，\<p> 是[块级元素](/zh-CN/docs/HTML/Block-level_elements)。
-
-- _[内容分类](/zh-CN/docs/Web/HTML/Content_categories)_ [Flow content](/zh-CN/docs/Web/HTML/Content_categories#Flow_content), palpable content.
-- _允许的内容_ [Phrasing content](/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content).
-- *标签省略*起始标签是必需的，结束标签在以下情形中可以省略。\<p>元素后紧跟{{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}或另一个{{HTMLElement("p")}}元素；或者父元素中没有其他内容了，而且父元素不是{{HTMLElement("a")}}元素
-- *允许的父元素*任何接受[flow content](/zh-CN/docs/Web/HTML/Content_categories#Flow_content)的元素
-- _DOM 接口_ {{domxref("HTMLParagraphElement")}}
+[HTML](/zh-CN/docs/Web/HTML) **`<p>`** 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。
+
+段落是[块级元素](/zh-CN/docs/Glossary/Block-level_content)，如果在关闭的 `</p>` 标签之前解析了另一个块级元素，则该标签将自动关闭。请参阅下面的“标签省略”。
+
+{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/zh-CN/docs/Web/HTML/Content_categories"
+          >内容分类</a
+        >
+      </th>
+      <td>
+        <a href="/zh-CN/docs/Web/HTML/Content_categories#流式内容"
+          >流式内容</a
+        >、可感知内容。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允许的内容类型</th>
+      <td>
+        <a href="/zh-CN/docs/Web/HTML/Content_categories#短语内容"
+          >短语内容</a
+        >。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">标签省略</th>
+      <td>
+        开始标签是必要的。如果 {{HTMLElement("p")}} 元素后面紧跟 {{HTMLElement("address")}}、{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("blockquote")}}、{{HTMLElement("div")}}、{{HTMLElement("dl")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("footer")}}、{{HTMLElement("form")}}、{{HTMLElement("Heading_Elements", "h1")}}、{{HTMLElement("Heading_Elements", "h2")}}、{{HTMLElement("Heading_Elements", "h3")}}、{{HTMLElement("Heading_Elements", "h4")}}、{{HTMLElement("Heading_Elements", "h5")}}、{{HTMLElement("Heading_Elements", "h6")}}、{{HTMLElement("header")}}、{{HTMLElement("hr")}}、{{HTMLElement("menu")}}、{{HTMLElement("nav")}}、{{HTMLElement("ol")}}、{{HTMLElement("pre")}}、{{HTMLElement("section")}}、{{HTMLElement("table")}}、{{HTMLElement("ul")}} 或其他 {{HTMLElement("p")}} 元素，或者父元素中已没有内容，且父元素不是 {{HTMLElement("a")}} 元素，则可以省略结束标签。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允许的父元素</th>
+      <td>
+        任何接受<a href="/zh-CN/docs/Web/HTML/Content_categories#流式内容"
+          >流式内容</a
+        >的元素。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">隐式 ARIA 角色</th>
+      <td>
+        <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles"
+          >paragraph</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允许的 ARIA 角色</th>
+      <td>任意</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM 接口</th>
+      <td>{{domxref("HTMLParagraphElement")}}</td>
+    </tr>
+  </tbody>
+</table>
 
 ## 属性
 
 这个元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
 
-\<p> 元素的 **align** 属性已被弃用，请不要使用。
+> **备注：** `<p>` 标签的 `align` 属性已被弃用，请不要使用。
 
 ## 示例
 
+### HTML
+
 ```html
 <p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
 <p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
 ```
 
-输出如下：
+### 运行结果
+
+{{EmbedLiveSample('示例')}}
+
+## 为段落添加样式
+
+默认情况下，浏览器会用一个空行来分隔段落。其他分隔方法，如首行缩进，可以通过 {{glossary("CSS")}} 来实现：
+
+### HTML
+
+```html
+<p>
+  用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。
+</p>
+
+<p>
+  学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。
+</p>
+
+<p>
+  在非常古老的文字中，段落之间用一种特殊的字符：¶（称为<i>段落符号</i>）分隔。如今，这个符号太密集了，难以阅读。
+</p>
+
+<p>
+  究竟有多难阅读？自己试一下：
+  <button data-toggle-text="换回去！">使用段落符号分隔段落</button>
+</p>
+```
+
+### CSS
+
+```css
+p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.pilcrow {
+  text-indent: 0;
+  display: inline;
+}
+p.pilcrow + p.pilcrow::before {
+  content: " ¶ ";
+}
+```
+
+### JavaScript
+
+```js
+document.querySelector("button").addEventListener("click", (event) => {
+  document.querySelectorAll("p").forEach((paragraph) => {
+    paragraph.classList.toggle("pilcrow");
+  });
+
+  [event.target.innerText, event.target.dataset.toggleText] = [
+    event.target.dataset.toggleText,
+    event.target.innerText,
+  ];
+});
+```
 
-{{ EmbedLiveSample('示例') }}
+### 运行结果
 
-## 注意
+{{EmbedLiveSample('为段落添加样式')}}
 
-使用[CSS](/zh-CN/docs/Web/CSS) {{cssxref("margin")}}属性去改变段落之间的间隙，**不要**在段落之间插入空的段落元素或者{{HTMLElement("br")}}元素。
+## 无障碍考虑
+
+将内容分成段落有助于使页面更易于访问。屏幕阅读器和其他辅助技术提供的快捷方式可以让用户跳到下一个或上一个段落，让他们可以略读内容，就像留白可以让视觉用户跳来跳去一样。
+
+使用空的 `<p>` 元素在段落之间添加空格，对于使用读屏技术浏览的人来说是有问题的。屏幕阅读器可能会显示段落的存在，但不会显示其中包含的任何内容——因为没有内容。这会让使用屏幕阅读器的人感到困惑和沮丧。
+
+如果需要额外的空间，可以使用 {{glossary("CSS")}} 属性，如 {{cssxref("margin")}} 来创建效果：
+
+```css
+p {
+  margin-bottom: 2em; /* 增加段落之后的空白 */
+}
+```
 
 ## 规范
 

From 7720a5e00702cd911d9911adb42483777b749fc6 Mon Sep 17 00:00:00 2001
From: PADAone <50942816+yo-goto@users.noreply.github.com>
Date: Mon, 18 Sep 2023 13:20:21 +0900
Subject: [PATCH 051/268] =?UTF-8?q?fix:=206=20primitive=20data=20types=20?=
 =?UTF-8?q?=E2=86=92=207=20primitive=20data=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/glossary/primitive/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/glossary/primitive/index.md b/files/ja/glossary/primitive/index.md
index 6c052d288244f9..55c0f96a59459e 100644
--- a/files/ja/glossary/primitive/index.md
+++ b/files/ja/glossary/primitive/index.md
@@ -5,7 +5,7 @@ l10n:
   sourceCommit: 72e6429af2f0ad138223623fb2c86087a008d4dd
 ---
 
-{{Glossary("JavaScript")}} において、**プリミティブ** (primitive、プリミティブ値、プリミティブデータ型) は{{Glossary("object","オブジェクト")}}でなく、{{glossary("method","メソッド")}}を持たないデータのことです。 6 種類のプリミティブデータ型があります。
+{{Glossary("JavaScript")}} において、**プリミティブ** (primitive、プリミティブ値、プリミティブデータ型) は{{Glossary("object","オブジェクト")}}でなく、{{glossary("method","メソッド")}}を持たないデータのことです。 7 種類のプリミティブデータ型があります。
 
 - {{Glossary("string","文字列")}}
 - {{Glossary("number","数値")}}

From 39563fc576cda4d8cf65aa9df5b1d1d212053d63 Mon Sep 17 00:00:00 2001
From: wonseok <tkddls23@konkuk.ac.kr>
Date: Thu, 21 Sep 2023 07:29:07 +0900
Subject: [PATCH 052/268] =?UTF-8?q?ko:=20203=20status=20=EB=B2=88=EC=97=AD?=
 =?UTF-8?q?=20(#15888)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ko: 203 status 번역
---
 files/ko/web/http/status/203/index.md | 28 +++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 files/ko/web/http/status/203/index.md

diff --git a/files/ko/web/http/status/203/index.md b/files/ko/web/http/status/203/index.md
new file mode 100644
index 00000000000000..64fd43522dae73
--- /dev/null
+++ b/files/ko/web/http/status/203/index.md
@@ -0,0 +1,28 @@
+---
+title: 203 Non-Authoritative Information
+slug: Web/HTTP/Status/203
+l10n:
+  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+The HTTP **`203 Non-Authoritative Information`** 는 요청이 성공했지만 오리진 서버의 {{HTTPStatus("200")}} (`OK`) 응답에서 {{Glossary("Proxy server", "proxy")}}에 의해 포함된 페이로드가 수정되었음을 나타냅니다.
+
+`203` 응답은 {{HTTPHeader("Warning")}} 헤더 코드의 변환 적용을 의미하는 [`214`](/ko/docs/Web/HTTP/Headers/Warning#warning_codes) 값과 유사하며, 모든 상태 코드가 있는 응답에 적용할 수 있다는 추가적인 이점이 있습니다.
+
+## 상태
+
+```http
+203 Non-Authoritative Information
+```
+
+## 명세
+
+{{Specifications}}
+
+## 같이 보기
+
+- {{HTTPStatus("200")}}
+- {{Glossary("Proxy server")}}
+- {{HTTPHeader("Warning")}}

From b6229a9bd87d43da95addc853210518cb84acaac Mon Sep 17 00:00:00 2001
From: pirateTurtle <75886763+wogha95@users.noreply.github.com>
Date: Thu, 21 Sep 2023 07:33:33 +0900
Subject: [PATCH 053/268] [ko] translate `accept-post` (#15493)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* accept-post 1차 번역 완료

* accept-post 소제목 용어 가이드 반영
---
 .../ko/web/http/headers/accept-post/index.md  | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 files/ko/web/http/headers/accept-post/index.md

diff --git a/files/ko/web/http/headers/accept-post/index.md b/files/ko/web/http/headers/accept-post/index.md
new file mode 100644
index 00000000000000..d61a5092834e4d
--- /dev/null
+++ b/files/ko/web/http/headers/accept-post/index.md
@@ -0,0 +1,64 @@
+---
+title: Accept-Post
+slug: Web/HTTP/Headers/Accept-Post
+l10n:
+  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+**`Accept-Post`** 응답 HTTP 헤더는 HTTP 포스트 요청에 대해 서버가 수락하는 [미디어 유형](/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types)을 알립니다.
+
+모든 메소드에 대한 응답으로 **`Accept-Post`** 를 사용하면 요청된 리소스에서 `POST`가 허용됨을 의미합니다. 헤더의 모든 문서/미디어 형식은 해당 문서 형식이 허용됨을 추가로 나타냅니다.
+
+예를 들어, 지원되지 않는 미디어 유형이 포함된 `POST` 요청을 수신하는 서버는 {{HTTPStatus("415")}} `Unsupported Media Type`과 하나 이상의 지원되는 미디어 유형을 참조하는 **`Accept-Post`** 헤더를 사용하여 응답할 수 있습니다.
+
+> **참고:** IANA 레지스트리는 [공식 콘텐츠 인코딩의 전체 목록](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)을 유지 관리합니다.
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">헤더 유형</th>
+      <td>{{Glossary("Response header", "응답 헤더")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden header name", "금지된 헤더 이름")}}</th>
+      <td>예</td>
+    </tr>
+  </tbody>
+</table>
+
+## 구문
+
+```http
+Accept-Post: <MIME_type>/<MIME_subtype>
+Accept-Post: <MIME_type>/*
+Accept-Post: */*
+```
+
+> **참고:** `Accept-Post` 헤더는 기본 설정 개념이 없다는 점(즉, `q` 인수가 없다는 점)을 제외하면 {{HTTPHeader("Accept")}}와 동일한 방식으로 미디어 범위를 지정합니다. 이는 `Accept-Post`가 응답 헤더인 반면 `Accept`는 요청 헤더이기 때문입니다.
+
+## 지시어
+
+없습니다.
+
+## 예제
+
+```http
+Accept-Post: application/example, text/example
+Accept-Post: image/webp
+Accept-Post: */*
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+브라우저 호환성은 이 헤더와 관련이 없습니다. 헤더는 서버에서 전송되며 사양은 클라이언트 동작을 정의하지 않습니다.
+
+## 같이 보기
+
+- HTTP 메서드 {{HTTPMethod("POST")}}
+- HTTP 시맨틱 및 컨텍스트 {{RFC("7231", "POST", "4.3.3")}}

From 27a6c97500fca135959a1aece983fd62aed7da87 Mon Sep 17 00:00:00 2001
From: KyeongSang Yu <yukyeongsang@gmail.com>
Date: Thu, 21 Sep 2023 07:35:55 +0900
Subject: [PATCH 054/268] [ko] add translation to typesetting a homepage in CSS
 styling text (#15130)

* add : translation of typesetting a homepage

* delete image file
---
 .../typesetting_a_homepage/index.md           | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 files/ko/learn/css/styling_text/typesetting_a_homepage/index.md

diff --git a/files/ko/learn/css/styling_text/typesetting_a_homepage/index.md b/files/ko/learn/css/styling_text/typesetting_a_homepage/index.md
new file mode 100644
index 00000000000000..dcd4682c181027
--- /dev/null
+++ b/files/ko/learn/css/styling_text/typesetting_a_homepage/index.md
@@ -0,0 +1,98 @@
+---
+title: 커뮤니티 대학 홈페이지 레이아웃 구성하기
+slug: Learn/CSS/Styling_text/Typesetting_a_homepage
+l10n:
+  sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3
+---
+
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+
+이 평가에서는 커뮤니티 대학 홈페이지의 텍스트 스타일을 지정하도록 하여 이 모듈에서 다룬 모든 텍스트 스타일링 기법에 대한 이해도를 테스트합니다. 여러분은 그 과정에서 재미를 느낄 수 있습니다.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">필요한 사전 지식:</th>
+      <td>
+        이 평가를 진행하기 전에 이 모듈의 모든 문서를 이미 살펴봤어야 합니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">목표:</th>
+      <td>CSS 텍스트 스타일링 기법에 대한 이해도를 테스트합니다. </td>
+    </tr>
+  </tbody>
+</table>
+
+## 시작 지점
+
+이 평가를 시작하기 위해서는 다음과 같이 해야 합니다.
+
+- 연습용 [HTML](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/index.html) 및 [CSS](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/style.css) 파일과 제공된 [외부 링크 아이콘](https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-start/external-link-52.png)을 가져옵니다.
+- 여러분의 로컬 컴퓨터에 복사본을 만듭니다.
+
+또는, [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com/)와 같은 사이트를 사용하여 평가를 수행할 수도 있습니다. 이러한 온라인 편집기 중 하나에 HTML을 붙여 넣고 CSS를 입력한 다음, [이 URL](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png)을 사용하여 배경 이미지를 지정할 수 있습니다. 사용 중인 온라인 편집기에 별도의 CSS 패널이 없는 경우, 문서의 head 부분의 `<style>` 요소에 자유롭게 입력할 수 있습니다.
+
+> **참고:** 만약 문제가 해결되지 않으면, 이 페이지 하단의 [평가 및 추가적인 도움말](#평가_및_추가적인_도움말) 섹션을 참조하여 도움을 요청하세요.
+
+## 프로젝트 개요
+
+가상의 커뮤니티 대학 홈페이지에 대한 가공되지 않은 HTML과 페이지를 3열 레이아웃으로 스타일링하고 다른 기초적인 스타일을 제공하는 CSS를 제공받았습니다. CSS 파일 하단의 주석 아래에 추가한 CSS를 작성하여 작업한 부분을 쉽게 표시할 수 있도록 해야 합니다. 선택자 중 일부가 반복적이더라도 걱정하지 마세요. 이 경우에는 그냥 넘어갈 수 있습니다.
+
+글꼴:
+
+- 우선, 무료로 사용할 수 있는 글꼴 몇 가지를 다운로드하세요. 대학교 홈페이지이기 때문에 글꼴은 상당히 진지하고, 공식적이며, 신뢰할 수 있는 느낌을 줄 수 있도록 선택해야 합니다. 일반 본문 텍스트에는 serif site-wide 글꼴을 사용하고, 제목에는 sans-serif 또는 slab serif 글꼴을 사용하는 것이 좋을 수 있습니다.
+- 적절한 서비스를 사용하여 이 두 글꼴에 대한 견고한 `@font-face` 코드를 생성하세요.
+- 본문 글꼴은 페이지 전체에 적용하고 제목 글꼴은 제목(heading)에 적용합니다.
+
+일반적인 텍스트 스타일링:
+
+- 페이지의 `font-size`를 사이트 전체에 `10px`로 설정하세요.
+- 제목 및 기타 요소 유형에 적절한 상대 단위를 사용하여 정의된 적절한 글꼴 크기를 지정하세요.
+- 본문 텍스트에 적절한 `line-height`를 지정하세요.
+- 페이지의 최상위 레벨 제목을 중앙에 배치하세요.
+- 제목에 `letter-spacing`을 설정하여 너무 눌리지 않고 글자가 숨을 쉴 수 있도록 하세요.
+- 본문 텍스트의 `letter-spacing`과 `word-spacing`도 적절하게 조절하세요.
+- `<section>`의 각 제목 뒤 첫 번째 단락에 텍스트 들여 쓰기(예: 20px)를 설정하세요.
+
+링크:
+
+- link, visited, focus와 hover 상태에 페이지 위쪽과 아래쪽의 가로 막대 색상과 어울리는 색상을 지정하세요.
+- 링크에 기본적으로 밑줄이 그어져 있지만, 마우스를 가리키거나, 초점을 맞추면 밑줄이 사라지도록 설정하세요.
+- 페이지의 모든 링크에서 기본 초점 윤곽선을 제거하세요.
+- 활성 상태에 눈에 띌 수 있게 다른 스타일을 지정하여 눈에 잘 띄도록 하되, 전체 페이지 디자인에 어울려야 합니다.
+- 외부 링크 옆에 외부 링크 아이콘이 삽입되도록 설정하세요.
+
+목록:
+
+- 목록과 목록 항목의 간격이 전체 페이지의 스타일과 잘 어울리는지 확인해야 합니다. 각 목록 항목의 `line-height`는 단락 줄과 같아야 하며, 각 목록의 위쪽과 아래쪽의 간격은 단락 사이의 간격과 같아야 합니다.
+- 목록 항목에 페이지 디자인에 적합한 글머리 기호를 부여합니다. 사용자 정의 글머리 기호 이미지를 선택할지 다른 이미지를 선택할지는 여러분이 결정할 수 있습니다.
+
+탐색 메뉴:
+
+- 탐색 메뉴가 페이지와 조화를 이루도록 스타일을 지정하세요.
+
+## 힌트 및 팁
+
+- 이 연습을 위해 HTML을 어떤 식으로든 편집할 필요는 없습니다.
+- 탐색 메뉴를 반드시 버튼처럼 만들 필요는 없지만, 페이지 측면에서 우스꽝스러워 보이지 않도록 약간 더 커야 하며, 세로 탐색 메뉴로 만들어야 한다는 점도 기억해야 합니다.
+
+## 예시
+
+다음 스크린샷은 완성된 디자인이 어떤 모습일지 보여주는 예시입니다.
+
+!['커뮤니티 대학 웹사이트 홈페이지' 텍스트 스타일링 평가의 완성된 디자인 스크린샷 입니다. 제목은 '세인트 헉슬리 커뮤니티 대학'입니다. 배너 헤더와 콘텐츠를 구분하는 빨간색 선이 있습니다. 기본 콘텐츠에는 세 개의 열이 있습니다. 가장 넓은 첫 번째 열에는 학생에게 대학의 중요성을 암시하는 몇 개의 단락이 있습니다. 두 번째 열에는 대학에서 제공하는 상위 코스 선택에 대한 링크 목록이 있습니다. 세 번째 열에는 직사각형으로 윤곽이 그려진 버튼 링크가 있는 세로 탐색 모음과 웹사이트의 여러 섹션으로 연결되는 링크가 포함되어 있습니다.](example2.png)
+
+## 평가 또는 추가적인 도움
+
+작업에 대한 평가를 받고 싶거나 막혀서 도움을 요청하는 경우 아래와 같이 하세요.
+
+1. [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 공유 가능한 온라인 편집기에 작업을 입력합니다.
+2. [MDN 담론 포럼 학습 카테고리](https://discourse.mozilla.org/c/mdn/learn/250)에서 평가 및 도움을 요청하는 게시물을 작성합니다. 게시물에는 아래 사항이 포함되어야 합니다.
+
+   - "커뮤니티 대학 홈페이지 레이아웃 구성하기에 대한 평가 요청"과 같은 설명이 포함된 제목을 입력합니다.
+   - 이미 시도해 본 부분과, 궁금한 부분에 대한 세부 정보에 대해 포함하세요. 예를 들어, 막히거나 평가를 원하는 부분을 써넣으세요.
+   - 평가받거나 도움이 필요한 예제에 대한 온라인 공유 가능 편집기 링크(위 1단계에서 설명한 대로)를 포함하세요. 코드를 볼 수 없다면 코딩 문제가 있는 사람을 도와주기 어렵기 때문에 이 방법을 사용하는 것이 좋습니다.
+   - 실제 과제 또는 평가 페이지로 연결되는 링크를 통해 도움을 원하는 문제를 찾을 수 있습니다.
+
+{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

From fc4e4ed7f5f2bb7e3dc61618084994f96d7d6872 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Thu, 21 Sep 2023 07:54:46 +0900
Subject: [PATCH 055/268] [ko]: add index.md for
 `web/http/basic_of_http/evolution_of_http` (#15678)

[add]: add index.md for web/http/basic_of_http/evolution_of_http
---
 .../basics_of_http/evolution_of_http/index.md | 128 +++++++++---------
 1 file changed, 64 insertions(+), 64 deletions(-)

diff --git a/files/ko/web/http/basics_of_http/evolution_of_http/index.md b/files/ko/web/http/basics_of_http/evolution_of_http/index.md
index 03d788f4302d95..87b18d331a117c 100644
--- a/files/ko/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/ko/web/http/basics_of_http/evolution_of_http/index.md
@@ -1,55 +1,57 @@
 ---
 title: HTTP의 진화
 slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+l10n:
+  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
 ---
 
 {{HTTPSidebar}}
 
-**HTTP**는 월드 와이드 웹에 내재된 프로토콜입니다. Tim Berners-Lee에 의해 1989년부터 1991년에 발명된 HTTP는, 본래의 단순함의 대부분을 지키면서 확장성 위에서 만들어지도록, 많은 수정을 거쳐왔습니다. HTTP는 의사-신뢰도가 있는 실험실 환경에서 파일을 교환하는 프로토콜에서 높은 수준의 분석과 3D 내에서 이미지와 비디오를 실어나르는 현대 인터넷 정글로 진화해 왔습니다.
+**HTTP** (HyperText Transfer Protocol)은 월드 와이드 웹의 기반이 되는 프로토콜입니다. 1989년부터 1991년까지 Tim Berners-Lee와 그의 팀이 개발한 HTTP는 유연함을 형성하는 동시에 단순함을 지키는 데 도움이 되는 많은 수정을 거쳐왔습니다. HTTP가 신뢰할 수 있는 실험실 환경에서 파일을 교환하도록 만들어진 프로토콜에서 고해상도와 3D 이미지와 비디오를 전달하는 현대 인터넷 미로로 어떻게 진화했는지 알아보려면 계속해서 읽어주세요.
 
 ## 월드 와이드 웹의 발명
 
-1989년 당시 제네바의 CERN에서 일하고 있던 Tim Berners-Lee는 인터넷 상의 하이퍼텍스트 시스템을 만들기 위한 제안을 작성했습니다. 초기에 *Mesh*라고 불리던 그것은 1990년에 구현 과정에서 *월드 와이드 웹*으로 이름을 바꿨습니다. 기존의 TCP 그리고 IP 프로토콜 상에서 만들어지면서 4개의 빌딩 블록으로 구성되었습니다:
+1989년 CERN에서 일하고 있던 Tim Berners-Lee는 인터넷을 통한 하이퍼텍스트 시스템을 만들기 위한 제안을 작성했습니다. 초기에 Mesh라고 불리던 그것은 1990년에 구현 과정에서 '월드 와이드 웹'으로 이름을 바꿨습니다. 기존의 TCP 그리고 IP 프로토콜 기반으로 만들어졌고, 4개의 기본 구성요소로 이루어져 있습니다.
 
-- 하이퍼텍스트 문서를 표현하기 위한 텍스트 형식의 _[하이퍼텍스트 마크업 언어](/ko/docs/Web/HTML)_ (HTML).
-- 문서 같은 것을 교환하기 위한 간단한 프로토콜인 _하이퍼텍스트 전송 프로토콜_ (HTTP).
-- 문서를 디스플레이(그리고 우발적으로 수정)하기 위한 클라이언트인 _월드 와이드 웹_(WorldWideWeb)이라고 불리는 첫번째 브라우저.
-- 문서에 접근하도록 해주는, *httpd*의 초기 버전.
+- 하이퍼텍스트 문서를 표현하기 위한 텍스트 형식의 '[하이퍼텍스트 마크업 언어](/ko/docs/Web/HTML)' (HTML).
+- 하이퍼텍스트 문서를 교환하기 위한 간단한 프로토콜인 '하이퍼텍스트 전송 프로토콜' (HTTP).
+- 문서를 보여주기(그리고 수정하기) 위한 클라이언트인 '월드 와이드 웹(WorldWideWeb)'이라고 불리는 첫번째 브라우저.
+- 문서에 접근하도록 해주는 서버, 'httpd'의 초기 버전.
 
-이 네 개의 빌드 블록은 1990년 말에 완료되었으며, 첫번째 서버는 1991년 초에 CERN 외부에서 가동을 시작했습니다. 1991년 9월 6일, _alt.hypertext_ 공개 뉴스 그룹의 Tim Berners-Lee의 [포스트](https://groups.google.com/forum/#!msg/alt.hypertext/eCTkkOoWTAY/urNMgHnS2gYJ)가 공개 프로젝트로써의 월드 와이드 웹의 공식적인 출발점으로 여겨집니다.
+이 네 개의 기본 구성 요소는 1990년 말에 완료되었으며, 첫번째 서버는 1991년 초에 CERN 외부에서 실행되었습니다. 1991년 8월 6일, 'alt.hypertext' 공개 뉴스 그룹의 Tim Berners-Lee의 [포스트](https://www.w3.org/People/Berners-Lee/1991/08/art-6484.txt)가 공개 프로젝트로써의 월드 와이드 웹의 공식적인 출발점으로 여겨집니다.
 
-이렇게 초기 단계에 사용되던 HTTP 프로토콜은 매우 간단했으며 이후 HTTP/0.9 버전을 부여했으며 때로는 원-라인 프로토콜로 불리기도 했습니다.
+이렇게 초기 단계에 사용되던 HTTP 프로토콜은 매우 간단했습니다. 이후 HTTP/0.9 버전을 부여했으며 때로는 원-라인 프로토콜로 불리기도 했습니다.
 
 ## HTTP/0.9 – 원-라인 프로토콜
 
-HTTP 초기 버전에는 버전 번호가 없었습니다. HTTP/0.9는 이후에 차후 버전과 구별하기 위해 0.9로 불리게 됐습니다. HTTP/0.9는 극히 단순합니다. 요청은 단일 라인으로 구성되며 리소스에 대한 (프로토콜, 서버 그리고 포트는 서버가 연결되고 나면 불필요로 하므로 URL은 아닌) 경로로 가능한 메서드는 {{HTTPMethod("GET")}}이 유일했습니다.
+HTTP 초기 버전에는 버전 번호가 없었습니다. HTTP/0.9는 이후 버전과 구별하기 위해 0.9로 불리게 됐습니다. HTTP/0.9는 극히 단순합니다. 요청은 단일 라인으로 구성되며 리소스에 대한 경로로 가능한 메서드는 {{HTTPMethod("GET")}}이 유일했습니다. 서버에 연결되면 프로토콜, 서버 및 포트가 필요하지 않으므로 전체 URL은 포함되지 않았습니다.
 
-```
+```http
 GET /mypage.html
 ```
 
 응답 또한 극도로 단순합니다. 오로지 파일 내용 자체로 구성됩니다.
 
-```
-<HTML>
-A very simple HTML page
-</HTML>
+```html
+<html>
+  A very simple HTML page
+</html>
 ```
 
-그 이후에 진화와는 다르게, HTTP 헤더가 없었는데 이는 HTML 파일만 전송될 수 있으며 다른 유형의 문서는 전송될 수 없음을 의미합니다. 상태 혹은 오류 코드도 없었습니다. 문제가 발생한 경우, 특정 HTML 파일이 사람이 처리할 수 있도록, 해당 파일 내부에 문제에 대한 설명과 함께 되돌려 보내졌었습니다.
+다음 발전 방향과는 다르게, HTTP 헤더가 없었는데 이는 HTML 파일만 전송될 수 있으며 다른 유형의 문서는 전송될 수 없음을 의미합니다. 상태 혹은 오류 코드도 없었습니다. 문제가 발생한 경우, 특정 HTML 파일이 만들어지고 사람이 처리할 수 있도록, 해당 파일 내부에 문제에 대한 설명이 HTML 파일에 추가되었습니다.
 
 ## HTTP/1.0 – 확장성 만들기
 
-HTTP/0.9는 매우 제한적이었으며 브라우저와 서버 모두 좀 더 융통성을 가지도록 빠르게 확장되었습니다:
+HTTP/0.9는 매우 제한적이었으며, 브라우저와 서버를 통해서 빠르게 다양한 특징을 가지게 되었습니다.
 
-- 버전 정보가 각 요청 사이내로 전송되기 시작했습니다. (`HTTP/1.0` 이 `GET` 라인에 붙은 형태로)
-- 상태 코드 라인 또한 응답의 시작 부분에 붙어 전송되어, 브라우저가 요청에 대한 성공과 실패를 알 수 있고 그 결과에 대한 동작(특정 방법으로 그것의 로컬 캐시를 갱신하거나 사용하는 것과 같은)을 할 수 있게 되었습니다.
-- HTTP 헤더 개념은 요청과 응답 모두를 위해 도입되어, 메타데이터 전송을 허용하고 프로토콜을 극도로 유연하고 확장 가능하도록 만들어주었습니다.
-- 새로운 HTTP 헤더의 도움으로, 평이한 HTML 파일들 외에 다른 문서들을 전송하는 기능이 추가되었습니다({{HTTPHeader("Content-Type")}} 덕분에).
+- 각 요청 안에 버전 정보가 포함되어 전송되었습니다(`HTTP/1.0` 이 `GET` 라인에 붙은 형태).
+- 상태 코드 라인 또한 응답의 시작 부분에 붙어 전송되었습니다. 브라우저가 요청에 대한 성공과 실패를 알 수 있고 그 결과에 대한 동작(예, 특정 방법으로 로컬 캐시를 갱신하거나 사용)을 할 수 있게 되었습니다.
+- HTTP 헤더 개념은 요청과 응답 둘 다 도입되어, 메타데이터 전송이 가능해졌고, 프로토콜이 극도로 유연하고 확장성이 높아졌습니다.
+- {{HTTPHeader("Content-Type")}} 덕분에, 일반 HTML 파일들 외에 다른 문서들을 전송할 수 있었습니다.
 
 다음은 일반적인 요청과 응답입니다:
 
-```
+```http
 GET /mypage.html HTTP/1.0
 User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
 
@@ -63,9 +65,9 @@ A page with an image
 </HTML>
 ```
 
-두 번째 커넥션에 의한 이미지를 내려받기 위한 요청과 그에 대한 응답입니다:
+두 번째 연결에 의한 이미지를 내려받기 위한 요청과 그에 대한 응답입니다.
 
-```
+```http
 GET /myimage.gif HTTP/1.0
 User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
 
@@ -76,31 +78,31 @@ Content-Type: text/gif
 (image content)
 ```
 
-이런 새로운 기능들은 합의된 노력들로써 도입되지는 않았지만 1991년부터 1995년까지의 기간 동안 일단 해보자는 접근법으로 이루어졌습니다. 서버와 브라우저에 기능을 추가한 뒤, 그것이 관심을 끄는지 지켜보았습니다. 수많은 상호작용의 문제는 일반적이었습니다. 1996년 11월에, 이런 괴로운 문제를 해결하기 위해, 일반적인 실제 내용을 설명하는 정보 문서는 {{RFC(1945)}}에 공개되었습니다. 이것이 HTTP/1.0의 정의이며, 용어의 좁은 의미에서 공식적인 표준이 아니라는 것은 주목할 만한 일입니다.
+1991년부터 1995년 사이에 시도해보고 접근하는 방식으로 도입되었습니다. 서버와 브라우저는 기능을 추가하고, 새로운 기능이 관심을 끄는지 주시했습니다. 수많은 상호작용의 문제는 일반적이었습니다. 1996년 11월에, 문제를 해결하기 위해, 일반적인 실제 내용을 설명하는 정보 문서로 HTTP/1.0가 정의된 {{RFC(1945)}}로 알려진 문서가 게시되었습니다.
 
 ## HTTP/1.1 – 표준 프로토콜
 
-1995부터 다양한 HTTP/1.0 구현이 동시에 진행되어, 그 이듬해 HTTP/1.0 문서 출간 전까지, 합당한 표준화가 진행 중에 있었습니다. HTTP의 첫번째 표준 버전인 HTTP/1.1은 HTTP/1.0이 나온지 몇 달 안되서 1997년 초에 공개되었습니다.
+그 동안, 적절한 표준화 작업이 진행되었습니다. 표준화 작업은 HTTP/1.0의 다양한 구현과 병행되었습니다. HTTP의 첫 번째 표준화 버전인 HTTP/1.1은 HTTP/1.0 이후 불과 몇 달 뒤인 1997년 초에 발표되었습니다.
 
-HTTP/1.1은 모호함을 명확하게 하고 많은 개선 사항들을 도입했습니다:
+HTTP/1.1은 모호함을 명확하게 하고 많은 개선 사항들을 도입했습니다.
 
-- 커넥션이 재사용될 수 있게 하여, 탐색된 단일 원본 문서 내로 임베드된 리소스들을 디스플레이하기 위해 사용된 커넥션을 다시 열어 시간을 절약하게 하였습니다.
-- 파이프라이닝을 추가하여, 첫번째 요청에 대한 응답이 완전히 전송되기 이전에 두번째 요청 전송을 가능케 하여, 커뮤니케이션 레이턴시를 낮췄습니다.
-- 청크된 응답 또한 지원됩니다.
+- 연결을 재사용할 수 있어 시간이 절약됩니다. 단일 원본 문서 내로 포함된 리소스들을 표시하기 위해 더 이상 여러 번 연결을 열 필요가 없기 때문입니다.
+- 파이프라이닝을 추가하여, 첫번째 요청에 대한 응답이 완전히 전송되기 전에 두번째 요청 전송을 가능케 하여, 통신 지연 시간이 단축되었습니다.
+- 청크된 응답도 지원되었습니다.
 - 추가적인 캐시 제어 메커니즘이 도입되었습니다.
-- 언어, 인코딩 혹은 타입을 포함한 컨텐츠 협상이 도입되어, 클라이언트와 서버로 하여금 교환하려는 가장 적합한 컨텐츠에 대한 동의를 가능케 했습니다.
-- {{HTTPHeader("Host")}} 헤더 덕분에, 동일 IP 주소에 다른 도메인을 호스트하는 기능이 서버 코로케이션을 가능케 합니다.
+- 언어, 인코딩 혹은 타입을 포함한 컨텐츠 협상이 도입되어, 클라이언트와 서버로 하여금 교환하려는 가장 적합한 컨텐츠에 대한 합의를 할 수 있습니다.
+- {{HTTPHeader("Host")}} 헤더 덕분에, 동일 IP 주소에 다른 도메인을 호스트하는 기능이 서버 배치가 가능해졌습니다.
 
-다음은 하나의 단일 커넥션을 통한 요청의 전형적인 전체 흐름의 예시입니다:
+다음은 하나의 단일 커넥션을 통한 요청의 전형적인 전체 흐름의 예시입니다.
 
-```
-GET /ko/docs/Glossary/Simple_header HTTP/1.1
+```http
+GET /en-US/docs/Glossary/Simple_header HTTP/1.1
 Host: developer.mozilla.org
 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
 Accept-Language: en-US,en;q=0.5
 Accept-Encoding: gzip, deflate, br
-Referer: https://developer.mozilla.org/ko/docs/Glossary/Simple_header
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
 
 200 OK
 Connection: Keep-Alive
@@ -116,14 +118,13 @@ Vary: Cookie, Accept-Encoding
 
 (content)
 
-
 GET /static/img/header-background.png HTTP/1.1
 Host: developer.mozilla.org
 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
 Accept: */*
 Accept-Language: en-US,en;q=0.5
 Accept-Encoding: gzip, deflate, br
-Referer: https://developer.mozilla.org/ko/docs/Glossary/Simple_header
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
 
 200 OK
 Age: 9578461
@@ -142,60 +143,59 @@ HTTP/1.1는 1997년 1월에 {{rfc(2068)}}에서 처음 공개되었습니다.
 
 ## 15년 넘게 진행된 확장
 
-(새로운 헤더 혹은 메서드를 생성하기 쉬운) 확장성 덕분에, 그리고 1999년 6월에 공개된 {{RFC("2616")}}과 HTTP/2 릴리즈의 예견 속에서 2014년 6월에 공개된 {{RFC("7230")}}-{{RFC("7235")}} 시리즈, 그런 두번에 걸친 리비전을 통해 정재되었에도, 이 프로토콜은 15년 넘도록 극도로 안정성을 유지해왔습니다.
+HTTP의 확장성 덕분에 새로운 헤더와 메서드를 쉽게 만들 수 있었습니다. HTTP/1.1 프로토콜은 HTTP/2가 나오기 전인 1999년 6월에 공개된 {{RFC("2616")}}과 2014년 6월에 공개된 {{RFC("7230")}}-{{RFC("7235")}}라는 두 번에 걸친 개정을 통해 개선되었고, 이 프로토콜은 15년 넘도록 매우 안정적이었습니다.
 
 ### 보안 전송을 위한 HTTP 사용
 
-HTTP에 일어났던 가장 큰 변화는 1994년 말에 이미 완료되었습니다. 기본적인 TCP/IP 스택을 통해 HTTP를 전송하는 대신에, 넷스케이프 커뮤니케이션은 그것의 토대 위에 추가적인 암호화된 전송 계층인 SSL을 만들어냈습니다. SSL 1.0은 회사 외부로 릴리즈된 적이 없으며, SSL 2.0과 그것의 후계자인 SSL 3.0과 SSL 3.1은 서버와 클라이언트 간에 교환된 메시지 인증을 암호화하고 보장하여 e-커머스 웹 사이트를 만들어내도록 했습니다. SSL은 표준 트랙 상에 놓여져 있었고 마침내 TLS가 되어, 성공적으로 취약성을 종식시키는 1.0, 1.1 그리고 1.2 버전이 나와있습니다. TLS 1.3은 현재 진행 중에 있습니다.
+HTTP에 일어났던 가장 큰 변화는 1994년 말에 이루어졌습니다. 컴퓨터 서비스 회사인 Netscape Communications는 기본 TCP/IP 스택을 통해 HTTP를 전송하는 대신에, TCP/IP 스택 위에 추가적인 암호화된 전송 계층인 SSL을 만들어냈습니다. SSL 1.0은 대중에게 비공개였고, SSL 2.0과 후속 버전인 SSL 3.0을 통해 전자 상거래 웹사이트를 만들 수 있었습니다. 이를 위해서 서버와 클라이언트 간에 교환되는 메시지의 신뢰성을 암호화하고 보장했습니다. SSL은 결국 표준화되어 TLS가 되었습니다.
 
-같은 시간 동안, 암호화된 전송 계층에 대한 필요성이 대두되었습니다. 웹은 광고주, 불특정 개인, 혹은 범죄자가 다른 사람인척 가장하거나 전송된 데이터를 수정된 데이터로 대치시키고자, 개인 정보를 빼내려고 경쟁하는 정글 속에, 거의 학문적인 네트워크의 상대적인 신뢰를 남겨두었습니다. HTTP 상에서 만들어진 애플리케이션들이 주소록, 이메일 혹은 사용자의 지리적 위치와 같은 수 많은 개인 정보에 접근하는 등 점점 더 강력해짐에 따라, TLS의 필요성은 e-커머스 사용 케이스 외에 여기 저기서 나타나게 되었습니다.
+같은 기간에, 암호화된 전송 계층에 대한 필요하다는 것이 분명해졌습니다. 웹은 더 이상 학문적인 네트워크가 아니라, 광고주, 불특정 개인 혹은 범죄자가 가능한 한 많은 개인정보 데이터를 놓고 경쟁하는 정글이 되었습니다. HTTP를 통해 구축된 애플리케이션이 더욱 강력해지고 주소록, 이메일 혹은 사용자의 지리적 위치와 같은 수 많은 개인 정보에 접근하는 부분이 필요해짐에 따라, 전자 상거래 이외의 경우에서도 TLS에서 필요해졌습니다.
 
 ### 복잡한 애플리케이션을 위한 HTTP 사용
 
-웹에 대한 Tim Berners-Lee의 본래 비전은 읽기 전용의 매체는 아니었습니다. 그는 사람들이 문서를 원격으로 추가하거나 이동시킬 수 있는, 분산된 파일 시스템의 한 종류로 웹을 상상했었습니다. 1996 쯤, HTTP는 저작을 허용하도록 확장되었으며 WebDAV라고 불리는 표준이 만들어졌습니다. 그것은 주소록 개체들을 다루기 위한 CardDAV 그리고 달력을 다루기 위한 CalDav와 같은 특정 애플리케이션들로 더 확장되었습니다. 그러나 이런 모든 \*DAV 확장들은 한 가지 결점을 갖고 있었습니다. 꽤 복잡한, 사용하고 있는 서버에 의해 구현되어야만 한다는 것이었죠. 웹 영역에서 그것들을 사용하는 것은 극비로 남겨져 있었습니다.
+Tim Berners-Lee는 원래 HTTP를 읽기 전용 도구로 생각하지 않았습니다.
+그는 사람들이 문서를 원격으로 추가하거나 이동시킬 수 있는, 분산된 파일 시스템의 한 종류로 웹을 만들고 싶었습니다. 1996년경에 HTTP는 저작을 허용하도록 확장되었으며 WebDAV라고 불리는 표준이 만들어졌습니다. WebDAV는 주소록 항목들을 다루기 위한 CardDAV 및 달력을 다루기 위한 CalDav와 같은 특정 애플리케이션들로 더 확장되었습니다. 그러나 이런 모든 \*DAV 확장들은 한 가지 결함이 있었는데, 서버에서 구현된 경우에만 사용할 수 있었습니다.
 
-2000년에, HTTP 사용에 대한 새로운 패턴이 고안되었습니다. {{glossary("REST", "representational state transfer")}} (혹은 REST). API에 의해 유도되는 액션들은 새로운 HTTP 메서드 뿐만 아니라, 기초적인 HTTP/1.1 메서드를 이용한 특정 URI 접근에 의해서도 더 이상 전달되지 않았습니다. 이것은 모든 웹 애플리케이션으로 하여금 브라우저나 서버의 갱신없이 데이터 탐색과 수정을 허용하는 API 제공을 가능케했습니다. 필요로 하는 모든 것은 표준 HTTP/1.1을 통해 웹 사이트에 의해 서브되는 파일 내로 임베드되는 것이었습니다. REST 모델의 단점은 각각의 웹사이트가 자신의 비표준 RESTful API를 정의하고 그에 대한 전권을 가진다는 사실에 있습니다; \*DAV 확장과는 다르게 클라이언트와 서버들은 상호작용이 가능합니다. RESTful API들은 2010년에 들어 매우 일반적인 게 되었습니다.
+2000년에, HTTP 사용에 대한 새로운 패턴인 {{glossary("REST", "representational state transfer")}} (또는 REST)가 설계가 되었습니다. API는 새로운 HTTP 메서드를 기반으로 하지 않았지만, 대신 기본 HTTP/1.1 메서드를 사용하여 특정 URI에 대한 접근에 의존했습니다. 이를 통해 모든 웹 애플리케이션에서 API가 브라우저나 서버를 업데이트하지 않고도 데이터를 검색하고 수정할 수 있게 되었습니다. 필요한 모든 정보는 웹 사이트가 표준 HTTP/1.1을 통해 제공되는 파일에 포함되었습니다. REST 모델의 단점은 각 웹사이트가 자체 비표준 RESTful API를 정의하고 이를 완전히 제어할 수 있다는 것입니다. 이는 클라이언트와 서버가 상호 운용 가능한 \*DAV 확장과 차이가 있습니다. RESTful API들은 2010년에 들어 매우 보편화되었습니다.
 
-2005년부터, 웹 페이지에서 사용 가능한 API 집합들이 급격히 늘어나게 되었고 이들 API 중 몇몇은, 거의 새로운 특성화된 HTTP 헤더로, 특정한 목적을 위해 HTTP 프로토콜에 확장을 만들어냈습니다:
+2005년 이후 웹 페이지에서 사용 가능한 API를 사용할 수 있게 되었습니다. 이 API 중 일부는 특정한 목적을 위해 HTTP 프로토콜에 확장을 생성합니다.
 
-- [서버 전송 이벤트](/ko/docs/Web/API/Server-sent_events), 서버가 브라우저로 이따금씩 보내는 메시지를 푸쉬할 수 있는 곳.
-- [웹소켓](/ko/docs/Web/API/WebSockets_API), 기존 HTTP 커넥션을 업그레이드하여 만들 수 있는 새로운 프로토콜.
+- [서버 전송 이벤트](/ko/docs/Web/API/Server-sent_events), 서버가 브라우저로 가끔 메시지를 푸쉬할 수 있습니다.
+- [웹소켓](/ko/docs/Web/API/WebSockets_API)은 기존 HTTP 연결을 업그레이드하여 만들 수 있는 새로운 프로토콜입니다.
 
 ### 웹의 보안 모델 완화
 
-HTTP는 웹의 보안 모델인 [same-origin 정책](/ko/docs/Web/Security/Same-origin_policy)에서 독립되어 있습니다. 사실, 현재의 웹 보안 모델은 HTTP이 만들어진 이후에 개발되어 왔습니다! 몇 년에 걸쳐, 이 정책의 몇 가지 정책을 고무시키기 위해 확실한 제약사항 아래 허용함으로써, 좀 더 관대해지도록 하는 것이 유용하다는 것을 증명해왔습니다. 제약사항이 얼마나 그리고 언제 리프트될지는 HTTP 헤더의 새로운 묶음들을 사용하는 서버부터 클라이언트에 의해 전도됩니다. 이러한 내용들은 [Cross-Origin 리소스 공유](/ko/docs/Glossary/CORS) (CORS) 혹은 [컨텐츠 보안 정책](/ko/docs/Web/HTTP/CSP) (CSP)과 같은 스펙 내에 정의되어 있습니다.
+HTTP는 [동일 출처 정책](/ko/docs/Web/Security/Same-origin_policy)으로 알려진 웹 보안 모델과는 독립되어 있습니다. 사실, 현재의 웹 보안 모델은 HTTP이 만들어진 이후에 개발되었습니다! 몇 년에 걸쳐, 특정 제약 조건을 두고, 이 정책의 일부 제한 사항을 해제하는 것이 유용한 것으로 입증되었습니다. 서버는 새로운 HTTP 헤더 세트를 사용하여 이러한 제한을 언제, 얼마나 해제해야 하는지 클라이언트에 전송했습니다. [교차 출처 리소스 공유](/ko/docs/Glossary/CORS) (CORS) 및 [컨텐츠 보안 정책](/ko/docs/Web/HTTP/CSP) (CSP)과 같은 명세 안에 정의되었습니다.
 
-이런 커다란 확장에 덧붙여, 다른 많은 헤더들이, 때로는 실험적으로만, 추가되어 오고 있습니다. 주목할 만한 헤더들은 프라이버시를 제어하기 위한 Do Not Track ({{HTTPHeader("DNT")}}) 헤더, {{HTTPHeader("X-Frame-Options")}}, 혹은 {{HTTPHeader('Upgrade-Insecure-Requests')}}이 있고, 그 외에도 수많은 헤더들이 존재합니다.
+큰 확장 외에, 다른 많은 헤더들이, 때로는 실험적으로만, 추가되었습니다. 주목할 만한 헤더는 프라이버시를 제어하기 위한 Do Not Track ({{HTTPHeader("DNT")}}) 헤더, {{HTTPHeader("X-Frame-Options")}}, 혹은 {{HTTPHeader('Upgrade-Insecure-Requests')}}이 있지만, 더 많은 헤더들이 존재합니다.
 
 ## HTTP/2 – 더 나은 성능을 위한 프로토콜
 
-몇 년에 걸쳐, 웹 페이지는 매우 복잡해지면서, 종종 진정한 애플리케이션이 됩니다. 디스플레이되는 시각적 미디어의 양에 덧붙여 상호작용을 추가하기 위한 스크립트의 양과 크기는 점점 더 많이 증가하고 있습니다. 더 많은 데이터들이 더 많은 요청 너머로 전송되고 있습니다. HTTP/1.1 커넥션은 올바른 순서로 전송되는 요청을 필요로 합니다. 또한, 몇몇 병렬 커넥션이 이론적으로 사용 가능한 경우(일반적으로 5와 8 사이에서), 여전히 많은 양의 오버헤드와 복잡도가 남아 있습니다. 예를 들어, HTTP 파이프라이닝은 디플로이 악몽임이 확실해졌습니다.
-
-2010년 전반기에, Google은 실험적인 SPDY 프로토콜을 구현하여, 클라이언트와 서버 간의 데이터 교환을 대체할 수단을 실증하였습니다. 그것은 브라우저와 서버 측 모두에 있어 많은 관심을 불러일으켰습니다. 응답성 증가 능력을 입증하고 전송된 데이터 중복에 관한 문제를 해결하면서, SPDY는 HTTP/2 프로토콜의 기초로써 기여했습니다.
+몇 년에 걸쳐, 웹 페이지는 더욱 복잡해졌습니다. 일부는 그 자체로 애플리케이션이기도 했습니다. 더 많은 시각적 미디어가 표시되고 상호작용을 위한 스크립트 코드의 양과 크기도 증가했습니다. 훨씬 더 많은 HTTP 요청을 통해, 많은 데이터가 전송되었고, 이를 통해 HTTP/1.1 연결에 복잡성과 오버헤드가 많이 발생했습니다. 이를 설명하기 위해, Google은 2010년 초반에 실험적인 프로토콜 SPDY를 구현했습니다. 클라이언트와 서버 간 데이터를 교환하는 이 대체 방법은 브라우저와 서버 모두에서 작업하는 개발자들의 관심을 끌었습니다. SPDY는 응답성 증가를 정의하고 중복 데이터 전송 문제를 해결하여 HTTP/2 프로토콜의 기반이 됩니다.
 
-HTTP/2 프로토콜은 HTTP/1.1 버전과 다른 몇가지 근본적인 차이점을 가지고 있습니다:
+HTTP/2 프로토콜은 HTTP/1.1과 몇가지 특징이 다릅니다.
 
-- 그것은 텍스트 프로토콜이라기 보다는 이진 프로토콜입니다. 더 이상 읽을 수도 없고 수작업을 만들어낼 수 없습니다.이런 결점에 대한 보상으로, 새로운 최적화 기술이 구현될 수 있습니다.
-- 병렬 요청이 동일한 커넥션 상에서 다루어질 수 있는 다중화 프로토콜로, 순서를 제거해주고 HTTP/1.x 프로토콜의 제약사항을 막아줍니다.
-- 전송된 데이터의 분명한 중복과 그런 데이터로부터 유발된 불필요한 오버헤드를 제거하면서, 연속된 요청 사이의 매우 유사한 내용으로 존재하는 헤더들을 압축시킵니다.
-- 서버로 하여금 사전에 클라이언트 캐시를 서버 푸쉬라고 불리는 메커니즘에 의해, 필요하게 될 데이터로 채워넣도록 허용합니다.
+- 텍스트 프로토콜이 아닌 이진 프로토콜입니다. 읽을 수도 없고 수동으로 만들 수 없습니다. 이러한 장애물에도 불구하고, 향상된 최적화 기술을 구현할 수 있습니다.
+- 다중화 프로토콜입니다. 동일한 연결을 통해 병렬 요청을 수행할 수 있어, HTTP/1.x 프로토콜의 제약을 없애줍니다.
+- 헤더를 압축합니다. 요청 집합 간에 유사한 경우가 많으므로, 전송된 데이터의 중복과 오버헤드가 제거됩니다.
+- 서버가 서버 푸시라는 메커니즘으로 클라이언트 캐시에 데이터를 저장할 수 있습니다.
 
-2015년 5월에 공식적으로 표준화된, HTTP/2는 큰 성공을 거두었습니다. 2016년 6월, 모든 웹 사이트 중 8.7%[\[1\]](https://w3techs.com/technologies/details/ce-http2/all/all)가 이미 사용 중에 있고, 이것은 모든 요청의 68%[\[2\]](https://www.keycdn.com/blog/http2-statistics/) 이상을 나타냅니다. 인터넷 상에서 전송 오버헤드 감소로 많은 돈을 절약하는 높은 트래픽의 웹 사이트들은 이 프로토콜을 급속히 받아들이고 있습니다.
+2015년 5월에 공식적으로 표준화된 HTTP/2는 2022년 1월 전체 웹 사이트의 46.9%로 사용량 정점에 도달했습니다([these stats](https://w3techs.com/technologies/details/ce-http2) 참조). 트래픽이 많은 웹사이트는 데이터 전송 오버헤드와 그에 따른 예산을 절약하기 위한 노력의 일환으로 가장 빠르게 채택되었습니다.
 
-이러한 급격한 채택은 HTTP/2가 웹 사이트와 애플리케이션의 채택이 필요하지 않았기에 가능했습니다. HTTP/1.1을 사용할지 HTTP/2를 사용할지 고민할 필요가 없어졌습니다. 최신 브라우저와 통신하는 최신의 서버를 갖는 것은 프로토콜 사용을 활성화하는 것만으로 충분합니다.어느 정도의 제한된 액터 세트만이 HTTP/2 채택을 불러일으키는데 필요했으며 브라우저와 서버 버전이 교체됨에 따라, 웹 개발자의 투입없이도 HTTP/2의 사용은 자연스럽게 증가했습니다.
+HTTP/2가 웹사이트와 애플리케이션을 변경할 필요가 없었기 때문에 빠른 채택이 가능했을 확률이 높습니다. 이를 사용하려면, 최신 브라우저와 통신하는 최신 서버만 필요했습니다. HTTP/2 채택을 높이기 위해서는 제한된 그룹 집합만 필요했고, 레거시 브라우저와 서버 버전이 갱신되면서 웹 개발자의 큰 노력 없이도 자연스럽게 사용량이 늘어났습니다.
 
 ## 차세대-HTTP/2로의 진화
 
-HTTP는 HTTP/2의 릴리즈와 함께 진화를 멈추지 않았습니다. HTTP/1.x처럼, 확장성은 여전히 새로운 기능들을 추가하는데 사용되고 있습니다. 주목할 만한 중요성에 있어 2016년에 나타난 HTTP의 새로운 확장들을 들 수 있습니다:
+HTTP의 확장성은 여전히 새로운 기능을 추가하는 데 사용되고 있습니다. 특히 2016년에 등장한 HTTP 프로토콜의 새로운 확장을 예로 들 수 있습니다.
 
 - {{HTTPHeader("Alt-Svc")}} 지원은 좀 더 영리한 {{Glossary("CDN")}} 메커니즘을 따라, 신분 증명의 개념과 주어진 자원의 위치를 분리하도록 해줍니다.
-- [Client Hints](/ko/docs/Web/HTTP/Client_hints)의 도입으로 브라우저 혹은 클라이언트가 요구사항이나 서버의 하드웨어 제약사항에 관한 정보를 사전에 미리 주고 받을 수 있게 되었습니다.
-- {{HTTPHeader("Cookie")}} 내에 보안 관련 접두사 도입은 보안 쿠키가 변경되지 않았다는 것을 보장하는데 도움을 줍니다.
+- [클라이언트 힌트](/ko/docs/Web/HTTP/Client_hints)의 도입으로 브라우저 혹은 클라이언트가 요구사항이나 서버의 하드웨어 제약사항에 관한 정보를 사전에 미리 주고 받을 수 있게 되었습니다.
+- {{HTTPHeader("Cookie")}} 헤더에 보안 관련 접두사 도입은 보안 쿠키가 변경되지 않았다는 것을 보장하는데 도움을 줍니다.
 
-HTTP의 진화는 그것의 확장성과 단순함이 예측 불가능한 애플리케이션과 프로토콜 채택을 만들어내고 있다는 것을 보여줍니다. 오늘날 HTTP가 사용되는 환경은 1990년 초에 상상하던 것과는 완전히 다릅니다. HTTP 본래의 설계가 걸작이 되었음을 지난 25년 넘게 호환되지 않는 진화의 요구없이 웹을 진화시킴으로 증명했습니다. 25년 넘게 HTTP의 성공을 만들어 온 유연함과 확장성을 유지하는 동시에, 수년 넘게 밝혀진 많은 결함들을 수정한 덕택에, HTTP/2의 등장은 프로토콜에 대한 밝은 미래를 암시하는 것처럼 보입니다.
+## HTTP/3 - QUIC를 통한 HTTP
 
-## HTTP/3 - HTTP over QUIC
+HTTP의 다음 주요 버전인 HTTP/3에서는 이전 버전의 HTTP와 동일한 의미를 가지지만, 전송 계층에서 {{Glossary("TCP")}} 대신 {{Glossary("QUIC")}}를 사용합니다. 2022년 10월까지 [모든 웹사이트의 26%가 HTTP/3를 사용하고 있었습니다](https://w3techs.com/technologies/details/ce-http3).
 
-HTTP의 다음 메이저 버전인 HTTP/3에서는 전송 계층 부분에 {{Glossary("TCP")}}/{{Glossary("TLS")}} 대신 {{Glossary("QUIC")}}가 사용됩니다.
+QUIC는 HTTP 연결에 대해서 훨씬 낮은 대기 시간을 제공하도록 설계되었습니다. HTTP/2와 마찬가지로, 다중화 프로토콜이지만, HTTP/2는 단일 TCP 연결을 통해 실행되어 TCP 계층에서 처리되는 패킷 손실 감지 및 재전송이 모든 스트림을 차단할 수 있습니다. QUIC는 {{Glossary("UDP")}}를 통해 여러 스트림을 실행하고 각 스트림에 대해 독립적으로 패킷 손실 감지 및 재전송을 구현하므로, 오류가 발생하면 해당 패킷에 데이터가 있는 스트림만 차단됩니다.
 
-Firefox에서의 구현 상태는 [Firefox bug 1158011](https://bugzil.la/1158011)을 참조해주세요.
+{{RFC("9114")}}에 정의되어 있고, [HTTP/3은 주요 브라우저에서 지원됩니다](https://caniuse.com/http3). Chromium(및 Chrome 및 Edge와 같은 변형) 및 Firefox도 지원대상에 포함됩니다.

From bd184c33b8882f24f18d730635ee97b8e87cd2e3 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Thu, 21 Sep 2023 07:36:30 +0800
Subject: [PATCH 056/268] [ko] remove `{{htmlattrdef}}` macro (#15796)

---
 .../html/howto/use_data_attributes/index.md   |   2 +-
 .../aria/attributes/aria-label/index.md       |   2 +-
 .../api/web_audio_api/best_practices/index.md |   2 +-
 files/ko/web/html/attributes/index.md         |   2 +-
 files/ko/web/html/content_categories/index.md |   8 +-
 files/ko/web/html/element/a/index.md          |  16 +--
 files/ko/web/html/element/area/index.md       |  28 ++---
 files/ko/web/html/element/base/index.md       |   4 +-
 files/ko/web/html/element/bdo/index.md        |   2 +-
 files/ko/web/html/element/blockquote/index.md |   2 +-
 files/ko/web/html/element/body/index.md       |  56 +++++-----
 files/ko/web/html/element/button/index.md     |  66 +++++-------
 files/ko/web/html/element/canvas/index.md     |   6 +-
 files/ko/web/html/element/caption/index.md    |   2 +-
 files/ko/web/html/element/data/index.md       |   2 +-
 files/ko/web/html/element/dd/index.md         |   2 +-
 files/ko/web/html/element/del/index.md        |   4 +-
 files/ko/web/html/element/dialog/index.md     |   2 +-
 files/ko/web/html/element/embed/index.md      |   8 +-
 files/ko/web/html/element/fieldset/index.md   |   6 +-
 files/ko/web/html/element/form/index.md       |  20 ++--
 files/ko/web/html/element/frameset/index.md   |   4 +-
 files/ko/web/html/element/hr/index.md         |  10 +-
 files/ko/web/html/element/html/index.md       |   6 +-
 files/ko/web/html/element/img/index.md        | 101 ++++++++----------
 .../web/html/element/input/checkbox/index.md  |  10 +-
 files/ko/web/html/element/input/date/index.md |   6 +-
 files/ko/web/html/element/input/file/index.md |  10 +-
 files/ko/web/html/element/ins/index.md        |   4 +-
 files/ko/web/html/element/label/index.md      |   4 +-
 files/ko/web/html/element/li/index.md         |   4 +-
 files/ko/web/html/element/link/index.md       |  36 +++----
 files/ko/web/html/element/map/index.md        |   2 +-
 files/ko/web/html/element/meta/index.md       |   8 +-
 files/ko/web/html/element/meter/index.md      |  14 +--
 files/ko/web/html/element/object/index.md     |  32 +++---
 files/ko/web/html/element/ol/index.md         |   6 +-
 files/ko/web/html/element/optgroup/index.md   |   4 +-
 files/ko/web/html/element/option/index.md     |   8 +-
 files/ko/web/html/element/output/index.md     |   6 +-
 files/ko/web/html/element/pre/index.md        |   6 +-
 files/ko/web/html/element/progress/index.md   |   4 +-
 files/ko/web/html/element/q/index.md          |   2 +-
 files/ko/web/html/element/script/index.md     |  22 ++--
 files/ko/web/html/element/slot/index.md       |   2 +-
 files/ko/web/html/element/style/index.md      |  10 +-
 files/ko/web/html/element/tfoot/index.md      |  10 +-
 files/ko/web/html/element/thead/index.md      |  10 +-
 files/ko/web/html/element/time/index.md       |   2 +-
 files/ko/web/html/element/track/index.md      |  10 +-
 files/ko/web/html/element/ul/index.md         |   4 +-
 files/ko/web/html/element/video/index.md      |  24 ++---
 .../global_attributes/contextmenu/index.md    |   2 +-
 files/ko/web/html/global_attributes/index.md  |  62 +++++------
 54 files changed, 333 insertions(+), 354 deletions(-)

diff --git a/files/ko/learn/html/howto/use_data_attributes/index.md b/files/ko/learn/html/howto/use_data_attributes/index.md
index 15ecb1adc310e8..094ea268a0fc8f 100644
--- a/files/ko/learn/html/howto/use_data_attributes/index.md
+++ b/files/ko/learn/html/howto/use_data_attributes/index.md
@@ -5,7 +5,7 @@ slug: Learn/HTML/Howto/Use_data_attributes
 
 {{LearnSidebar}}
 
-[HTML5](/ko/docs/Web/Guide/HTML/HTML5) 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. [`data-*` 속성](/ko/docs/Web/HTML/Global_attributes#attr-dataset)은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.
+[HTML5](/ko/docs/Web/Guide/HTML/HTML5) 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. [`data-*` 속성](/ko/docs/Web/HTML/Global_attributes#dataset)은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.
 
 ## HTML 문법
 
diff --git a/files/ko/web/accessibility/aria/attributes/aria-label/index.md b/files/ko/web/accessibility/aria/attributes/aria-label/index.md
index 4ec6b53eda5ee3..d2c38632eaa18f 100644
--- a/files/ko/web/accessibility/aria/attributes/aria-label/index.md
+++ b/files/ko/web/accessibility/aria/attributes/aria-label/index.md
@@ -30,7 +30,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label
 
 대부분의 콘텐츠에는 이를 직접 감싸는 요소의 텍스트 콘텐츠로부터 생성된 접근자 이름이 있습니다. 또한, 접근자이름들은 특정 속성들 또는 연관된 요소들로부터 생성될 수 있습니다.
 
-기본적으로, 버튼의 접근자 이름은 {{HTMLElement('button')}}의 여는 태그와, 닫는 태그 사이의 콘텐츠이고, image 요소의 접근자 이름은 [`alt`](/ko/docs/Web/HTML/Element/img#attr-alt) 속성의 콘텐츠, 그리고 form input요소의 접근자 이름은 연결된 {{HTMLElement('label')}} 요소의 콘텐츠입니다.
+기본적으로, 버튼의 접근자 이름은 {{HTMLElement('button')}}의 여는 태그와, 닫는 태그 사이의 콘텐츠이고, image 요소의 접근자 이름은 [`alt`](/ko/docs/Web/HTML/Element/img#alt) 속성의 콘텐츠, 그리고 form input요소의 접근자 이름은 연결된 {{HTMLElement('label')}} 요소의 콘텐츠입니다.
 
 만약 이러한 옵션들 중 가능한 것이 없거나, 초기 접근자 이름이 적합하지 않은 경우, `aria-label` 속성을 사용하여 요소의 접근자 이름을 정의합니다.
 
diff --git a/files/ko/web/api/web_audio_api/best_practices/index.md b/files/ko/web/api/web_audio_api/best_practices/index.md
index 2d8430860ece93..0ec2b8ac55dbf8 100644
--- a/files/ko/web/api/web_audio_api/best_practices/index.md
+++ b/files/ko/web/api/web_audio_api/best_practices/index.md
@@ -84,7 +84,7 @@ button.addEventListener(
 
 만약 여러분이 오디오를 켜고 끄는 버튼을 가지고 있다면, ARIA [`role="switch"`](/ko/docs/Web/Accessibility/ARIA/Roles/Switch_role) 특성을 그것에 사용하는 것은 보조 기술에 그 버튼의 정확한 목적이 무엇인지에 대한 신호를 보내고, 그럼으로써 앱을 더욱 접근 가능하게 만들기 위한 좋은 옵션입니다. [여기 어떻게 이것을 사용하는지에 대한 데모](https://codepen.io/Wilto/pen/ZoGoQm?editors=1100)가 있습니다.
 
-여러분은 Web Audio API 내에서 많은 변화하는 값들을 가지고 작업하고 유저에게 이것들에 대한 제어를 제공하기를 원할 것이므로, [`range input`](/ko/docs/Web/HTML/Element/input/range)은 종종 사용할 제어의 좋은 선택입니다. 이것은 여러분이 최소와 최대값 뿐만 아니라 [`step`](/ko/docs/Web/HTML/Element/input#attr-step) 특성으로 증가량 또한 설정할 수 있으므로 좋은 옵션입니다.
+여러분은 Web Audio API 내에서 많은 변화하는 값들을 가지고 작업하고 유저에게 이것들에 대한 제어를 제공하기를 원할 것이므로, [`range input`](/ko/docs/Web/HTML/Element/input/range)은 종종 사용할 제어의 좋은 선택입니다. 이것은 여러분이 최소와 최대값 뿐만 아니라 [`step`](/ko/docs/Web/HTML/Element/input#step) 특성으로 증가량 또한 설정할 수 있으므로 좋은 옵션입니다.
 
 ## AudioParam 값 설정하기
 
diff --git a/files/ko/web/html/attributes/index.md b/files/ko/web/html/attributes/index.md
index ebbe1d4923b7d6..40cfd1f5807b19 100644
--- a/files/ko/web/html/attributes/index.md
+++ b/files/ko/web/html/attributes/index.md
@@ -697,7 +697,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     </tr>
     <tr>
       <td>
-        <a href="/ko/docs/Web/HTML/Element/img#attr-intrinsicsize"
+        <a href="/ko/docs/Web/HTML/Element/img#intrinsicsize"
           ><code>intrinsicsize</code></a
         >
         {{deprecated_inline}}
diff --git a/files/ko/web/html/content_categories/index.md b/files/ko/web/html/content_categories/index.md
index be2bbe4d900404..37de88fe438c65 100644
--- a/files/ko/web/html/content_categories/index.md
+++ b/files/ko/web/html/content_categories/index.md
@@ -34,8 +34,8 @@ slug: Web/HTML/Content_categories
 특정 조건을 만족하는 경우 플로우 콘텐츠에 속하는 요소도 있습니다.
 
 - {{HTMLElement("area")}}는 {{HTMLElement("map")}} 요소의 자손인 경우.
-- {{HTMLElement("link")}}가 [`itemprop`](/ko/docs/HTML/Global_attributes#attr-itemprop) 특성을 가지고 있는 경우..
-- {{HTMLElement("meta")}}가 [`itemprop`](/ko/docs/HTML/Global_attributes#attr-itemprop) 특성을 가지고 있는 경우.
+- {{HTMLElement("link")}}가 [`itemprop`](/ko/docs/HTML/Global_attributes#itemprop) 특성을 가지고 있는 경우..
+- {{HTMLElement("meta")}}가 [`itemprop`](/ko/docs/HTML/Global_attributes#itemprop) 특성을 가지고 있는 경우.
 - {{HTMLElement("style")}}이 [`scoped`](/ko/docs/Web/HTML/Element/style#scoped) 특성을 가지고 있는 경우.
 
 ### 구획 콘텐츠
@@ -68,9 +68,9 @@ slug: Web/HTML/Content_categories
 - {{HTMLElement("area")}}, {{HTMLElement("map")}}의 자손인 경우.
 - {{HTMLElement("del")}}, 구문 콘텐츠만 포함하는 경우.
 - {{HTMLElement("ins")}}, 구문 콘텐츠만 포함하는 경우.
-- {{HTMLElement("link")}}, [`itemprop`](/ko/docs/Web/HTML/Global_attributes#attr-itemprop) 속성을 가지고 있는 경우.
+- {{HTMLElement("link")}}, [`itemprop`](/ko/docs/Web/HTML/Global_attributes#itemprop) 속성을 가지고 있는 경우.
 - {{HTMLElement("map")}}, 구문 콘텐츠만 포함하는 경우.
-- {{HTMLElement("meta")}}, [`itemprop`](/ko/docs/Web/HTML/Global_attributes#attr-itemprop) 속성을 가지고 있는 경우.
+- {{HTMLElement("meta")}}, [`itemprop`](/ko/docs/Web/HTML/Global_attributes#itemprop) 속성을 가지고 있는 경우.
 
 ### 내장 콘텐츠
 
diff --git a/files/ko/web/html/element/a/index.md b/files/ko/web/html/element/a/index.md
index 87e9c889d20dca..7f530f03e9ca7b 100644
--- a/files/ko/web/html/element/a/index.md
+++ b/files/ko/web/html/element/a/index.md
@@ -13,7 +13,7 @@ slug: Web/HTML/Element/a
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("download")}}
+- `download`
 
   - : 링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.
 
@@ -29,7 +29,7 @@ slug: Web/HTML/Element/a
     >
     > - `Content-Disposition`의 `filename`이 `download`와 다를 땐 헤더가 우선권을 가집니다. (`Content-Disposition: inline`일 때, Firefox는 헤더를 우선하고 Chrome은 `download`를 우선합니다.)
 
-- {{HTMLAttrDef("href")}}
+- `href`
 
   - : 하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.
 
@@ -39,15 +39,15 @@ slug: Web/HTML/Element/a
     - `mailto:` URL을 사용하는 이메일 주소
     - 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 통해 지원할 수 있습니다.
 
-- {{htmlattrdef("hreflang")}}
+- `hreflang`
   - : 링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 [전역 `lang` 특성](/ko/docs/Web/HTML/Global_attributes/lang)과 동일합니다.
-- {{HTMLAttrDef("ping")}}
+- `ping`
   - : 하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 {{HTTPMethod("POST")}} 요청을 전송합니다. 대개 추적 용도로 사용합니다.
-- {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+- `referrerpolicy` {{experimental_inline}}
   - : URL을 가져올 때 사용할 리퍼러. {{httpheader("Referrer-Policy")}} 문서에서 가능한 값과 효과를 확인하세요.
-- {{htmlattrdef("rel")}}
+- `rel`
   - : 하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 [링크 유형](/ko/docs/Web/HTML/Link_types) 목록.
-- {{htmlattrdef("target")}}
+- `target`
 
   - : 링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, `<iframe>`의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
 
@@ -60,7 +60,7 @@ slug: Web/HTML/Element/a
 
     > **참고:** 최근의 브라우저(Firefox 79+ 등)에서는 target="\_blank"를 지정하면 `rel="noopener"`를 적용한 것과 같은 동작을 합니다.
 
-- {{htmlattrdef("type")}}
+- `type`
   - : 링크 URL의 {{Glossary("MIME type")}}에 대한 힌트. 특별한 내장 기능은 없습니다.
 
 ## 속성
diff --git a/files/ko/web/html/element/area/index.md b/files/ko/web/html/element/area/index.md
index d0f7583f7346bd..ae68e07c5df834 100644
--- a/files/ko/web/html/element/area/index.md
+++ b/files/ko/web/html/element/area/index.md
@@ -68,11 +68,11 @@ slug: Web/HTML/Element/area
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("alt")}}
+- `alt`
 
   - : 이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트입니다. 텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 합니다. [`href`](/ko/docs/Web/HTML/Element/area#href) 특성이 존재할 경우 필수 사항입니다.
 
-- {{htmlattrdef("coords")}}
+- `coords`
 
   - : 핫스팟 영역을 지정하는 일련의 좌표입니다. 값의 수와 의미는 `shape` 특성의 값에 따라 달라집니다.
 
@@ -82,19 +82,19 @@ slug: Web/HTML/Element/area
 
     값의 단위는 CSS 픽셀입니다.
 
-- {{htmlattrdef("download")}}
+- `download`
 
 특성이 존재할 경우, 이 하이퍼링크는 리소스 다운로드 용도로 사용하는 것을 의도했음을 나타냅니다. {{htmlelement("a")}}의 [`download`](/ko/docs/Web/HTML/Element/a#download) 특성 설명에서 전체 설명을 볼 수 있습니다.</dl>
 
-- {{htmlattrdef("href")}}
+- `href`
   - : `<area>` 하이퍼링크의 대상입니다. 유효한 URL이야 합니다. 생략할 경우, 이 `<area>` 요소는 하이퍼링크를 나타내지 않습니다.
-- {{htmlattrdef("hreflang")}}
+- `hreflang`
   - : 연결한 리소스의 언어를 나타냅니다. 가능한 값은 [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)에 따릅니다. [`href`](/ko/docs/Web/HTML/Element/area#href) 특성이 존재할 때만 사용하세요.
-- {{htmlattrdef("ping")}}
+- `ping`
 
   - : 하이퍼링크를 따라갈 때, 백그라운드에서 브라우저가 {{HTTPMethod("POST")}} 요청을 본문 `PING`으로 전송할 URL의 목록입니다. 공백으로 구분하며 주로 추적용으로 사용합니다.
 
-- {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+- `referrerpolicy` {{experimental_inline}}
 
   - : A string indicating which referrer to use when fetching the resource:
 
@@ -104,13 +104,13 @@ slug: Web/HTML/Element/area
     - "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
     - `"unsafe-url"` meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
 
-- {{htmlattrdef("rel")}}
+- `rel`
   - : For anchors containing the **href** attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of [link types values](/ko/docs/Web/HTML/Link_types). The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the **href** attribute is present.
-- {{htmlattrdef("shape")}}
+- `shape`
 
   - : 관련된 핫 스폿의 모양. The specifications for HTML 5 and HTML 4 define the values `rect`, which defines a rectangular region; `circle`, which defines a circular region; `poly`, which defines a polygon; and `default`, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support `circ`, `polygon`, and `rectangle` as valid values for **shape**; these values are {{Non-standard_inline}}.
 
-- {{htmlattrdef("target")}}
+- `target`
 
   - : 이 속성은 링크된 리소스가 어디에 표시될지 지정합니다. HTML4에서 이것은 프레임의 이름이나 키워드가 될수 있습니다. HTML5에서는, 브라우징 컨텍스트(탭,윈도우,인라인 프레임)의 이름이나 키워드가 될수 있습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다.
 
@@ -123,21 +123,21 @@ slug: Web/HTML/Element/area
 
 ### Deprecated attributes
 
-- {{htmlattrdef("name")}} {{deprecated_inline}}
+- `name` {{deprecated_inline}}
 
 Define a names for the clickable area so that it can be scripted by older browsers.
 
-- {{htmlattrdef("nohref")}} {{deprecated_inline}}
+- `nohref` {{deprecated_inline}}
 
 Indicates that no hyperlink exists for the associated area.
 
 > **Note:** Since HTML5, omitting the `href` attribute is sufficient.
 
-- {{htmlattrdef("tabindex")}} {{deprecated_inline}}
+- `tabindex` {{deprecated_inline}}
 
 A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.
 
-- {{htmlattrdef("type")}} {{deprecated_inline}}
+- `type` {{deprecated_inline}}
 
 No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but [the canonical HTML specification](https://html.spec.whatwg.org/multipage/#the-area-element) doesn't, and it has no effect in any user agents.)
 
diff --git a/files/ko/web/html/element/base/index.md b/files/ko/web/html/element/base/index.md
index 682a5718755aa9..877c1fb24d8c7b 100644
--- a/files/ko/web/html/element/base/index.md
+++ b/files/ko/web/html/element/base/index.md
@@ -59,9 +59,9 @@ slug: Web/HTML/Element/base
 
 > **경고:** 다음 특성 중 하나라도 지정한 경우, 상대 URL을 특성에 사용한 모든 요소보다 `<base>`가 앞에 위치해야 합니다.
 
-- {{htmlattrdef("href")}}
+- `href`
   - : 문서 내 상대 URL이 사용할 기준 URL. 절대 및 상대 URL을 사용할 수 있습니다.
-- {{htmlattrdef("target")}}
+- `target`
 
   - : `target` 속성을 명시하지 않은 {{htmlelement("a")}}, {{htmlelement("area")}}, 또는 {{htmlelement("form")}} 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 {{glossary("browsing context", "브라우징 맥락")}}. **키워드**나 **저작자 정의 이름**으로 지정합니다.
 
diff --git a/files/ko/web/html/element/bdo/index.md b/files/ko/web/html/element/bdo/index.md
index 54655089e77dad..63487817923362 100644
--- a/files/ko/web/html/element/bdo/index.md
+++ b/files/ko/web/html/element/bdo/index.md
@@ -70,7 +70,7 @@ slug: Web/HTML/Element/bdo
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("dir")}}
+- `dir`
 
   - : 요소 콘텐츠의 텍스트 쓰기 방향. 가능한 값은 다음과 같습니다.
 
diff --git a/files/ko/web/html/element/blockquote/index.md b/files/ko/web/html/element/blockquote/index.md
index 5a854aeb35f100..dd9981696bc1a2 100644
--- a/files/ko/web/html/element/blockquote/index.md
+++ b/files/ko/web/html/element/blockquote/index.md
@@ -67,7 +67,7 @@ slug: Web/HTML/Element/blockquote
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.
 
 ## 사용 일람
diff --git a/files/ko/web/html/element/body/index.md b/files/ko/web/html/element/body/index.md
index 6502fa726866e3..f8584a1a5062b5 100644
--- a/files/ko/web/html/element/body/index.md
+++ b/files/ko/web/html/element/body/index.md
@@ -76,61 +76,61 @@ slug: Web/HTML/Element/body
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("alink")}} {{deprecated_inline}}
+- `alink` {{deprecated_inline}}
   - : 선택한 하이퍼텍스트 링크의 색. _이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":active")}}의 조합을 대신 사용하세요._
-- {{htmlattrdef("background")}} {{deprecated_inline}}
+- `background` {{deprecated_inline}}
   - : 배경 이미지의 URI. _이 방법은 적합하지 않습니다. CSS {{cssxref("background")}} 속성을 대신 적용하세요._
-- {{htmlattrdef("bgcolor")}} {{deprecated_inline}}
+- `bgcolor` {{deprecated_inline}}
   - : 배경색. _이 방법은 적합하지 않습니다. CSS {{cssxref("background-color")}} 속성을 대신 적용하세요._
-- {{htmlattrdef("bottommargin")}} {{deprecated_inline}}
+- `bottommargin` {{deprecated_inline}}
   - : 아래쪽 여백. _이 방법은 적합하지 않습니다. CSS {{cssxref("margin-bottom")}} 속성을 대신 적용하세요._
-- {{htmlattrdef("leftmargin")}} {{deprecated_inline}}
+- `leftmargin` {{deprecated_inline}}
   - : 왼쪽 여백. _이 방법은 적합하지 않습니다. CSS {{cssxref("margin-left")}} 속성을 대신 적용하세요._
-- {{htmlattrdef("link")}} {{deprecated_inline}}
+- `link` {{deprecated_inline}}
   - : 방문하지 않은 하이퍼텍스트 링크의 색. _이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":link")}}의 조합을 대신 사용하세요._
-- {{htmlattrdef("onafterprint")}}
+- `onafterprint`
   - : 사용자가 문서를 출력한 뒤 호출할 함수.
-- {{htmlattrdef("onbeforeprint")}}
+- `onbeforeprint`
   - : 사용자가 문서 출력을 요청했을 때 호출할 함수.
-- {{htmlattrdef("onbeforeunload")}}
+- `onbeforeunload`
   - : 문서를 처분unload하기 직전에 호출할 함수.
-- {{htmlattrdef("onblur")}}
+- `onblur`
   - : 문서가 포커스를 상실했을 때 호출할 함수.
-- {{htmlattrdef("onerror")}}
+- `onerror`
   - : 문서를 제대로 불러오지 못했을 때 호출할 함수.
-- {{htmlattrdef("onfocus")}}
+- `onfocus`
   - : 문서가 포커스를 받을 때 호출할 함수.
-- {{htmlattrdef("onhashchange")}}
+- `onhashchange`
   - : 문서의 현재 주소 중 Fragment identifier part(해시(`'#'`) 문자로 시작)가 변경됐을 때 호출할 함수.
-- {{htmlattrdef("onlanguagechange")}} {{experimental_inline}}
+- `onlanguagechange` {{experimental_inline}}
   - : 선호 언어 변경 시 호출할 함수.
-- {{htmlattrdef("onload")}}
+- `onload`
   - : 문서를 다 불러왔을 때 호출할 함수.
-- {{htmlattrdef("onmessage")}}
+- `onmessage`
   - : 문서가 메시지를 받았을 때 호출할 함수.
-- {{htmlattrdef("onoffline")}}
+- `onoffline`
   - : 네트워크 연결이 실패했을 때 호출할 함수.
-- {{htmlattrdef("ononline")}}
+- `ononline`
   - : 네트워크 연결을 복구했을 때 호출할 함수.
-- {{htmlattrdef("onpopstate")}}
+- `onpopstate`
   - : 사용자가 세션 기록을 따라 이동했을 때 호출할 함수.
-- {{htmlattrdef("onredo")}}
+- `onredo`
   - : 사용자가 되돌리기 변경 기록(undo transaction history)에서 다시 이후로 이동했을 때 호출할 함수.
-- {{htmlattrdef("onresize")}}
+- `onresize`
   - : 문서의 크기가 바뀔 때 호출할 함수.
-- {{htmlattrdef("onstorage")}}
+- `onstorage`
   - : 저장 영역이 변경되었을 때 호출할 함수.
-- {{htmlattrdef("onundo")}}
+- `onundo`
   - : 사용자가 되돌리기 변경 기록(undo transaction history)에서 이전으로 이동했을 때 호출할 함수.
-- {{htmlattrdef("onunload")}}
+- `onunload`
   - : 문서를 처분(unload) 중일 때 호출할 함수.
-- {{htmlattrdef("rightmargin")}} {{deprecated_inline}}
+- `rightmargin` {{deprecated_inline}}
   - : 오른쪽 여백. _이 방법은 적합하지 않습니다. CSS {{cssxref("margin-right")}} 속성을 대신 적용하세요._
-- {{htmlattrdef("text")}} {{deprecated_inline}}
+- `text` {{deprecated_inline}}
   - : 글자의 전경색. _이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성을 대신 적용하세요._
-- {{htmlattrdef("topmargin")}} {{deprecated_inline}}
+- `topmargin` {{deprecated_inline}}
   - : 위쪽 여백. _이 방법은 적합하지 않습니다. CSS {{cssxref("margin-top")}} 속성을 대신 적용하세요._
-- {{htmlattrdef("vlink")}} {{deprecated_inline}}
+- `vlink` {{deprecated_inline}}
   - : 방문했던 하이퍼텍스트 링크의 색. _이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":visited")}}의 조합을 대신 사용하세요._
 
 ## 예제
diff --git a/files/ko/web/html/element/button/index.md b/files/ko/web/html/element/button/index.md
index 85f6b3dc9c6ec3..c3bfa933acc6eb 100644
--- a/files/ko/web/html/element/button/index.md
+++ b/files/ko/web/html/element/button/index.md
@@ -91,77 +91,67 @@ slug: Web/HTML/Element/button
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-<dl>
-
-- {{htmlattrdef("autofocus")}}
-
+- `autofocus`
   - : 페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 문서 내에서 **하나의 요소**만 `autofocus` 특성을 가질 수 있습니다.
-
-- {{htmlattrdef("autocomplete")}} {{non-standard_inline}}
-
+- `autocomplete` {{non-standard_inline}}
   - : This attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. Unlike other browsers, [Firefox persists the dynamic disabled state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of a {{HTMLElement("button")}} across page loads. Setting `autocomplete="off"` disables this feature; see [Firefox bug 654072](https://bugzil.la/654072).
-
-- {{htmlattrdef("disabled")}}
+- `disabled`
 
   - : 버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.
 
-  Firefox, unlike other browsers, [persist the dynamic disabled state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of a {{HTMLElement("button")}} across page loads. Use the [`autocomplete`](/ko/docs/Web/HTML/Element/button#autocomplete) attribute to control this feature.
+    Firefox, unlike other browsers, [persist the dynamic disabled state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of a {{HTMLElement("button")}} across page loads. Use the [`autocomplete`](/ko/docs/Web/HTML/Element/button#autocomplete) attribute to control this feature.
 
-- {{htmlattrdef("form")}}
+- `form`
 
   - : 버튼과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 [`id`](/ko/docs/Web/HTML/Global_attributes#id) 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다.
 
-  `form` 특성을 사용하면 버튼을 `<form>` 요소에 넣지 않고도 연결할 수 있고, 조상 중 `<form>`이 있더라도 소유자를 재정의할 수 있습니다.
+    `form` 특성을 사용하면 버튼을 `<form>` 요소에 넣지 않고도 연결할 수 있고, 조상 중 `<form>`이 있더라도 소유자를 재정의할 수 있습니다.
 
-- {{htmlattrdef("formaction")}}
+- `formaction`
 
   - : `<button>`이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진 [`action`](/ko/docs/Web/HTML/Element/form#action) 특성보다 우선합니다. 양식 소유자가 존재하지 않으면 영향을 주지 않습니다.
 
-- {{htmlattrdef("formenctype")}}
+- `formenctype`
 
   - : `<button>`이 제출 버튼인 경우, `formenctype` 특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다.
 
-  - `application/x-www-form-urlencoded`: 기본값.
-  - `multipart/form-data`: [`type`](/ko/docs/Web/HTML/Element/input#type) 특성이 `file`인 {{HTMLElement("input")}}이 존재하는 양식에서 사용하세요.
-  - `text/plain`: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.
+    - `application/x-www-form-urlencoded`: 기본값.
+    - `multipart/form-data`: [`type`](/ko/docs/Web/HTML/Element/input#type) 특성이 `file`인 {{HTMLElement("input")}}이 존재하는 양식에서 사용하세요.
+    - `text/plain`: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.
 
-  지정한 경우, 버튼의 양식 소유자가 가진 [`enctype`](/ko/docs/Web/HTML/Element/form#enctype) 특성보다 우선합니다.
+    지정한 경우, 버튼의 양식 소유자가 가진 [`enctype`](/ko/docs/Web/HTML/Element/form#enctype) 특성보다 우선합니다.
 
-- {{htmlattrdef("formmethod")}}
+- `formmethod`
 
   - : `<button>`이 제출 버튼인 경우, `formmethod` 특성은 양식을 서버로 제출할 때 사용할 [HTTP 메서드](/ko/docs/Web/HTTP/Methods)를 지정합니다. 가능한 값은 다음과 같습니다.
 
-  - `post`: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.
-  - `get`: 양식 `action` URL 뒤에 `?` 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.
+    - `post`: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.
+    - `get`: 양식 `action` URL 뒤에 `?` 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.
 
-  지정한 경우, 버튼의 양식 소유자가 가진 [`method`](/ko/docs/Web/HTML/Element/form#method) 특성보다 우선합니다.
-
-- {{htmlattrdef("formnovalidate")}}
+    지정한 경우, 버튼의 양식 소유자가 가진 [`method`](/ko/docs/Web/HTML/Element/form#method) 특성보다 우선합니다.
 
+- `formnovalidate`
   - : `<button>`이 제출 버튼인 경우, `formnovalidate` 특성은 양식을 제출할 때 [유효성 검사](/ko/docs/Learn/Forms/Form_validation)를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진 [`novalidate`](/ko/docs/Web/HTML/Element/form#novalidate) 특성보다 우선합니다.
-
-- {{htmlattrdef("formtarget")}}
+- `formtarget`
 
   - : `<button>`이 제출 버튼인 경우, `formtarget` 특성에는 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있습니다. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 [`target`](/ko/docs/Web/HTML/Element/form#target) 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
 
-  - `_self`: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.
-  - `_blank`: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
-  - `_parent`: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 `_self`와 동일하게 행동합니다.
-  - `_top`: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 `_self`와 동일하게 행동합니다.
-
-- {{htmlattrdef("name")}}
+    - `_self`: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.
+    - `_blank`: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
+    - `_parent`: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 `_self`와 동일하게 행동합니다.
+    - `_top`: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 `_self`와 동일하게 행동합니다.
 
+- `name`
   - : 버튼의 이름. 제출할 때, 버튼의 `value` 특성과 함께 양식 데이터의 일부를 구성합니다.
-
-- {{htmlattrdef("type")}}
+- `type`
 
   - : 버튼의 행동 방식. 가능한 값은 다음과 같습니다.
 
-  - `submit`: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
-  - `reset`: `<input type="reset">`처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
-  - `button`: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
+    - `submit`: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
+    - `reset`: `<input type="reset">`처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
+    - `button`: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
 
-- {{htmlattrdef("value")}}
+- `value`
   - : 버튼의 초깃값. 제출할 때, 버튼의 `value` 특성과 함께 양식 데이터의 일부를 구성합니다.
 
 ## 참고
diff --git a/files/ko/web/html/element/canvas/index.md b/files/ko/web/html/element/canvas/index.md
index aa6b06a3eddb90..407f80d047a41e 100644
--- a/files/ko/web/html/element/canvas/index.md
+++ b/files/ko/web/html/element/canvas/index.md
@@ -68,11 +68,11 @@ slug: Web/HTML/Element/canvas
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("height")}}
+- `height`
   - : 좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.
-- {{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}
+- `moz-opaque` {{non-standard_inline}} {{deprecated_inline}}
   - : 투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 를 대신 사용하세요.
-- {{htmlattrdef("width")}}
+- `width`
   - : 좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.
 
 ## 사용 일람
diff --git a/files/ko/web/html/element/caption/index.md b/files/ko/web/html/element/caption/index.md
index 46d052d804a730..b1cf3eddbea52d 100644
--- a/files/ko/web/html/element/caption/index.md
+++ b/files/ko/web/html/element/caption/index.md
@@ -54,7 +54,7 @@ slug: Web/HTML/Element/caption
 
 The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
 
   - : This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:
 
diff --git a/files/ko/web/html/element/data/index.md b/files/ko/web/html/element/data/index.md
index f13386e732a14e..75686898b4c56f 100644
--- a/files/ko/web/html/element/data/index.md
+++ b/files/ko/web/html/element/data/index.md
@@ -59,7 +59,7 @@ slug: Web/HTML/Element/data
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다
 
-- {{htmlattrdef("value")}}
+- `value`
   - : 기계가 읽을 수 있는 형태의 콘텐츠 해석본.
 
 ## 예제
diff --git a/files/ko/web/html/element/dd/index.md b/files/ko/web/html/element/dd/index.md
index ee22d44876dec5..ac3ccc4b92dd19 100644
--- a/files/ko/web/html/element/dd/index.md
+++ b/files/ko/web/html/element/dd/index.md
@@ -66,7 +66,7 @@ slug: Web/HTML/Element/dd
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("nowrap")}} {{Non-standard_inline}}
+- `nowrap` {{Non-standard_inline}}
   - : 값이 `yes`면 너비의 끝에서 정의 텍스트의 줄이 바뀌지 않습니다. 기본값은 `no`입니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/del/index.md b/files/ko/web/html/element/del/index.md
index fa060b87b4582e..6a0b1f898d8316 100644
--- a/files/ko/web/html/element/del/index.md
+++ b/files/ko/web/html/element/del/index.md
@@ -59,9 +59,9 @@ slug: Web/HTML/Element/del
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : 회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : 변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 [HTML에서 사용하는 날짜와 시간 형식](/ko/docs/Web/HTML/Date_and_time_formats) 문서에서 확인할 수 있습니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/dialog/index.md b/files/ko/web/html/element/dialog/index.md
index 33a02a017b0240..d053422361894e 100644
--- a/files/ko/web/html/element/dialog/index.md
+++ b/files/ko/web/html/element/dialog/index.md
@@ -64,7 +64,7 @@ slug: Web/HTML/Element/dialog
 
 > **경고:** `tabindex` 특성을 `<dialog>` 요소에 사용해서는 안됩니다.
 
-- {{htmlattrdef("open")}}
+- `open`
   - : 대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. `open` 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.
 
 ## 사용 일람
diff --git a/files/ko/web/html/element/embed/index.md b/files/ko/web/html/element/embed/index.md
index 0258f602542c4d..c06d6e875e9f4a 100644
--- a/files/ko/web/html/element/embed/index.md
+++ b/files/ko/web/html/element/embed/index.md
@@ -19,13 +19,13 @@ slug: Web/HTML/Element/embed
 
 이 요소는 [전역 속성](/ko/docs/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("height")}}
+- `height`
   - : 리소스의 표시될 높이 길이를 CSS 픽셀로 지정
-- {{htmlattrdef("src")}}
+- `src`
   - : 포함된 리소스의 URL
-- {{htmlattrdef("type")}}
+- `type`
   - : 인스턴스화할 플러그인을 고르기 위해 사용되는 MIME 타입
-- {{htmlattrdef("width")}}
+- `width`
   - : 리소스의 표시될 가로 길이를 CSS 픽셀로 지정
 
 ## 예제
diff --git a/files/ko/web/html/element/fieldset/index.md b/files/ko/web/html/element/fieldset/index.md
index 024a6282a1cb39..7e0203c6aabe5d 100644
--- a/files/ko/web/html/element/fieldset/index.md
+++ b/files/ko/web/html/element/fieldset/index.md
@@ -15,11 +15,11 @@ slug: Web/HTML/Element/fieldset
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : 지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없고, {{htmlelement("form")}}을 제출할 때 데이터에 포함되지 않습니다. 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않습니다. 브라우저는 비활성 컨트롤을 주로 회색으로 표시합니다. 단, {{htmlelement("legend")}} 안의 양식 요소는 비활성 상태로 전환되지 않습니다.
-- {{htmlattrdef("form")}}
+- `form`
   - : `<fieldset>` 요소와 연결할 {{htmlelement("form")}} 요소("양식 소유자")의 [`id`](/ko/docs/Web/HTML/Global_attributes#id). `<fieldset>`이 해당 `<form>` 안에 위치하지 않아도 연결할 수 있습니다.
-- {{htmlattrdef("name")}}
+- `name`
 
   - : 그룹과 연관지을 이름.
 
diff --git a/files/ko/web/html/element/form/index.md b/files/ko/web/html/element/form/index.md
index 92f00fae9f8de7..285e4553faba54 100644
--- a/files/ko/web/html/element/form/index.md
+++ b/files/ko/web/html/element/form/index.md
@@ -61,17 +61,17 @@ slug: Web/HTML/Element/form
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("accept")}} {{deprecated_inline}}
+- `accept` {{deprecated_inline}}
 
   - : A comma-separated list of content types that the server accepts.
 
     > **참고:** **사용시 주의:** 이 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, {{HTMLElement("input")}} 요소의 [`accept`](/ko/docs/Web/HTML/Element/input#accept) 속성을 사용하세요.
 
-- {{htmlattrdef("accept-charset")}}
+- `accept-charset`
   - : 스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용합니다. 기본값은 [페이지 인코딩](/ko/docs/Web/HTTP/Headers/Content-Encoding)과 같습니다.
-- {{htmlattrdef("action")}}
+- `action`
   - : 양식 데이터를 처리할 프로그램의 {{glossary("URI")}}. {{HTMLElement("button")}}, [`<input type="submit">`](/ko/docs/Web/HTML/Element/input/submit), [`<input type="image">`](/ko/docs/Web/HTML/Element/input/image) 요소의 [`formaction`](/ko/docs/Web/HTML/Element/button#formaction) 특성으로 재정의할 수 있습니다.
-- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
+- `autocapitalize` {{non-standard_inline}}
 
   - : 양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 `autocapitalize` 특성이 `<form>`에 정의된 값을 재정의합니다.
 
@@ -80,14 +80,14 @@ slug: Web/HTML/Element/form
     - `words`: 각 단어의 첫 글자를 대문자로 변환합니다.
     - `characters`: 모든 글자를 대문자로 변환합니다.
 
-- {{htmlattrdef("autocomplete")}}
+- `autocomplete`
 
   - : 입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 `autocomplete` 특성이 `<form>`에 정의된 값을 재정의합니다.
 
     - `off`: 브라우저가 각 항목에 자동으로 값을 채워 넣지 않습니다. (로그인 양식으로 의심되는 경우 보통 무시합니다)
     - `on`: 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣습니다.
 
-- {{htmlattrdef("enctype")}}
+- `enctype`
 
   - : `method` 특성이 `post`인 경우, `enctype`은 양식 제출 시 데이터의 [MIME 유형](https://ko.wikipedia.org/wiki/%EB%AF%B8%EB%94%94%EC%96%B4_%ED%83%80%EC%9E%85)을 나타냅니다.
 
@@ -97,7 +97,7 @@ slug: Web/HTML/Element/form
 
     {{HTMLElement("button")}}, [`<input type="submit">`](/ko/docs/Web/HTML/Element/input/submit), [`<input type="image">`](/ko/docs/Web/HTML/Element/input/image) 요소의 [`formenctype`](/ko/docs/Web/HTML/Element/button#formenctype) 특성으로 재정의할 수 있습니다.
 
-- {{htmlattrdef("method")}}
+- `method`
 
   - : 양식을 제출할 때 사용할 [HTTP](/ko/docs/Web/HTTP) 메서드.
 
@@ -107,11 +107,11 @@ slug: Web/HTML/Element/form
 
     {{HTMLElement("button")}}, [`<input type="submit">`](/ko/docs/Web/HTML/Element/input/submit), [`<input type="image">`](/ko/docs/Web/HTML/Element/input/image) 요소의 [`formmethod`](/ko/docs/Web/HTML/Element/button#formmethod) 특성으로 재정의할 수 있습니다.
 
-- {{htmlattrdef("name")}} {{deprecated_inline}}
+- `name` {{deprecated_inline}}
   - : 양식의 이름. HTML 4부터 사용 중단됐습니다. [`id`](/ko/docs/Web/HTML/Global_attributes#id)를 사용하세요.
-- {{htmlattrdef("novalidate")}}
+- `novalidate`
   - : 지정한 경우 양식의 유효성 검증을 건너뜁니다. `novalidate` 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 {{HTMLElement("button")}}, [`<input type="submit">`](/ko/docs/Web/HTML/Element/input/submit), [`<input type="image">`](/ko/docs/Web/HTML/Element/input/image) 요소의 [`formnovalidate`](/ko/docs/Web/HTML/Element/button#formnovalidate) 특성으로 재정의할 수 있습니다.
-- {{htmlattrdef("target")}}
+- `target`
 
   - : 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 [`target`](/ko/docs/Web/HTML/Element/form#target) 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
 
diff --git a/files/ko/web/html/element/frameset/index.md b/files/ko/web/html/element/frameset/index.md
index ec2c70c7860b48..3e3c9151cb1ca2 100644
--- a/files/ko/web/html/element/frameset/index.md
+++ b/files/ko/web/html/element/frameset/index.md
@@ -15,9 +15,9 @@ slug: Web/HTML/Element/frameset
 
 다른 모든 HTML elments와 마찬가지로, `<frameset>` element는 전역속성([global attributes](/en-US/HTML/Global_attributes))이 적용된다.
 
-- {{htmlattrdef("cols")}}
+- `cols`
   - : 이 속성은 프레임셋안의 가로공간의 갯수와 크기를 정합니다.
-- {{htmlattrdef("rows")}}
+- `rows`
   - : 이 속성은 프레임셋안의 세로공간의 갯수와 크기를 정합니다.
 
 ## 예시
diff --git a/files/ko/web/html/element/hr/index.md b/files/ko/web/html/element/hr/index.md
index 9e4c63314716df..22ddb3a90ebf56 100644
--- a/files/ko/web/html/element/hr/index.md
+++ b/files/ko/web/html/element/hr/index.md
@@ -59,15 +59,15 @@ slug: Web/HTML/Element/hr
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
   - : 줄의 정렬을 지정합니다. 기본값은 `left`입니다.
-- {{htmlattrdef("color")}} {{Non-standard_inline}}
+- `color` {{Non-standard_inline}}
   - : 색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.
-- {{htmlattrdef("noshade")}} {{deprecated_inline}}
+- `noshade` {{deprecated_inline}}
   - : Sets the rule to have no shading.
-- {{htmlattrdef("size")}} {{deprecated_inline}}
+- `size` {{deprecated_inline}}
   - : 줄의 높이를 픽셀 단위로 지정합니다.
-- {{htmlattrdef("width")}} {{deprecated_inline}}
+- `width` {{deprecated_inline}}
   - : 줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/html/index.md b/files/ko/web/html/element/html/index.md
index 402aff310b86b2..0c77eb67a389d3 100644
--- a/files/ko/web/html/element/html/index.md
+++ b/files/ko/web/html/element/html/index.md
@@ -57,11 +57,11 @@ slug: Web/HTML/Element/html
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("manifest")}} {{deprecated_inline}}
+- `manifest` {{deprecated_inline}}
   - : 지역적으로 캐시되어야하는 리소스를 가리키는 매니페스트 리소스의 URI를 나타냅니다. 자세한 내용은 [애플리케이션 캐시 사용하기](/ko/docs/HTML/Using_the_application_cache)를 보세요.
-- {{htmlattrdef("version")}} {{deprecated_inline}}
+- `version` {{deprecated_inline}}
   - : 현재 문서를 제어하는 HTML 문서 타입 정의의 버전을 나타냅니다. 하지만 이미 문서 타입 선언이 버전을 나타내고 있기 떄문에 이 속성은 필요하지 않습니다.
-- {{htmlattrdef("xmlns")}}
+- `xmlns`
   - : 문서의 {{glossary("XML")}} {{glossary("네임스페이스")}}를 지정합니다. 기본값은 `"http://www.w3.org/1999/xhtml"`입니다. XML {{glossary("parser", "구문 분석기")}}로 분석한 문서에는 필수이고, `text/html` 문서에서는 선택사항입니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/img/index.md b/files/ko/web/html/element/img/index.md
index d602150f260f4c..fb98b394d0aa00 100644
--- a/files/ko/web/html/element/img/index.md
+++ b/files/ko/web/html/element/img/index.md
@@ -38,123 +38,116 @@ HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("alt")}}
+- `alt`
 
   - : 이미지의 대체 텍스트 설명.
 
-  > **참고:** 브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,
+    > **참고:** 브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,
 
-  - 비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)
-  - 사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)
-  - 유효하지 않은 이미지거나, [지원하지 않는 형식](/ko/docs/Web/HTML/Element/img#지원하는_이미지_형식)
+    - 비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)
+    - 사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)
+    - 유효하지 않은 이미지거나, [지원하지 않는 형식](/ko/docs/Web/HTML/Element/img#지원하는_이미지_형식)
 
-  위와 같은 경우 브라우저가 이미지를 `alt` 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 `alt` 특성에 항상 유용한 값을 제공해야 합니다.
+    위와 같은 경우 브라우저가 이미지를 `alt` 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 `alt` 특성에 항상 유용한 값을 제공해야 합니다.
 
-  `alt` 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(`alt=""`)을 사용한 경우, 이미지가 콘텐츠의 중요 부분이 **아니므로**(장식 또는 추적용 픽셀 등), 비 시각적 브라우저가 {{glossary("Rendering engine", "렌더링")}}을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 `alt` 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.
+    `alt` 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(`alt=""`)을 사용한 경우, 이미지가 콘텐츠의 중요 부분이 **아니므로**(장식 또는 추적용 픽셀 등), 비 시각적 브라우저가 {{glossary("Rendering engine", "렌더링")}}을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 `alt` 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.
 
-  이미지를 텍스트로서 복사-붙여넣기할 때와, 이미지 링크를 북마크 할 때도 `alt`의 값을 사용합니다. {{htmlattrdef("crossorigin")}}
+    이미지를 텍스트로서 복사-붙여넣기할 때와, 이미지 링크를 북마크 할 때도 `alt`의 값을 사용합니다.
 
+- `crossorigin`
   - : CORS를 사용해 지정한 이미지 파일을 가져와야 하는지의 여부. [교차 출처 활성화 리소스](/ko/docs/Web/HTML/CORS_enabled_image)는 {{HTMLElement("canvas")}} 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다.
-
 - `anonymous`
-
   - : 자격 증명 없이 교차 출처 요청을 전송합니다. 즉, {{httpheader("Origin")}} {{glossary("HTTP")}} 헤더를 쿠키, [X.509 인증서](https://tools.ietf.org/html/rfc5280), [HTTP Basic 인증](/ko/docs/Web/HTTP/Authentication#Basic_인증_스킴) 없이 전송합니다. 서버에서 {{httpheader("Access-Control-Allow-Origin")}} HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.
-
 - `use-credentials`
 
   - : 자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, `Origin` HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 `Access-Control-Allow-Credentials` HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.
 
-  특성이 존재하지 않으면 리소스를 CORS 요청 없이(`Origin` HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 `anonymous` 키워드를 사용한 것으로 간주합니다.
-
-- {{htmlattrdef("decoding")}}
+    특성이 존재하지 않으면 리소스를 CORS 요청 없이(`Origin` HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 `anonymous` 키워드를 사용한 것으로 간주합니다.
 
+- `decoding`
   - : 이미지 디코딩에 관해 브라우저에 제공할 힌트. 가능한 값은 다음과 같습니다.
-
 - `sync`
   - : 다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩 합니다.
 - `async`
   - : 다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.
 - `auto`
   - : 선호하는 디코딩 모드가 없음을 나타내는 기본값입니다. 사용자에게 제일 적절한 값을 브라우저가 결정합니다.
-- {{htmlattrdef("height")}}
+- `height`
   - : 픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다.
-- {{htmlattrdef("importance")}} {{experimental_inline}}
+- `importance` {{experimental_inline}}
 
   - : 리소스의 상대적인 다운로드 중요도. 가능한 값은 다음과 같습니다.
 
-  `auto`: **설정 안함**. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.
-
-  `high`: 이미지가 **높은** 우선순위를 지님.
+    `auto`: **설정 안함**. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.
 
-  `low`: 이미지가 **낮은** 우선순위를 지님.
+    `high`: 이미지가 **높은** 우선순위를 지님.
 
-  - {{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}
+    `low`: 이미지가 **낮은** 우선순위를 지님.
 
-    - This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute. Specifically, the image would raster at these dimensions and `naturalWidth`/`naturalHeight` on images would return the values specified in this attribute. [Explainer](https://github.com/ojanvafai/intrinsicsize-attribute), [examples](https://googlechrome.github.io/samples/intrinsic-size/index.html)
-
-- {{htmlattrdef("ismap")}}
+- `intrinsicsize` {{deprecated_inline}}
+  - : This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute. Specifically, the image would raster at these dimensions and `naturalWidth`/`naturalHeight` on images would return the values specified in this attribute. [Explainer](https://github.com/ojanvafai/intrinsicsize-attribute), [examples](https://googlechrome.github.io/samples/intrinsic-size/index.html)
+- `ismap`
 
   - : 이미지가 [서버 사이드 맵](https://ko.wikipedia.org/wiki/%EC%9D%B4%EB%AF%B8%EC%A7%80_%EB%A7%B5)의 일부인지 나타냄. 서버 사이드 맵에 속하는 경우, 사용자가 이미지에서 클릭한 위치를 서버로 전송합니다.
 
-  > **참고:** 포인팅 장치가 없는 사용자도 갈 수 있는 대체 목적지를 제공하기 위해, `ismap`은 `&#x3C;img>` 요소가 유효한 [`href`](/ko/docs/Web/HTML/Element/a#href) 특성을 가진 {{htmlelement("a")}} 요소의 자손인 경우에만 사용 가능합니다.
+    > **참고:** 포인팅 장치가 없는 사용자도 갈 수 있는 대체 목적지를 제공하기 위해, `ismap`은 `&#x3C;img>` 요소가 유효한 [`href`](/ko/docs/Web/HTML/Element/a#href) 특성을 가진 {{htmlelement("a")}} 요소의 자손인 경우에만 사용 가능합니다.
 
-- {{htmlattrdef("loading")}}
+- `loading`
 
   - : 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다.
 
-  - `eager`: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)
-  - `lazy`: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.
+    - `eager`: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)
+    - `lazy`: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.
 
-- {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+- `referrerpolicy` {{experimental_inline}}
 
   - : 리소스를 가져올 때 사용할 리퍼러를 나타내는 문자열.
 
-  - `no-referrer:` {{httpheader("Referer")}} 헤더를 전송하지 않습니다.
-  - `no-referrer-when-downgrade:` TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 `Referer` 헤더를 전송하지 않습니다. 따로 지정하지 않은 경우 사용하는 기본 정책입니다.
-  - `origin:` `Referer` 헤더가 요청 출처의 {{glossary("schema", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}}를 포함합니다.
-  - `origin-when-cross-origin:` 다른 출처로 요청할 땐 리퍼럴 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로와 쿼리 문자열도 포함합니다.
-  - `unsafe-url:` `Referrer` 헤더가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 하지만 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. TLS로 보호받는 리소스에서 그렇지 않은 출처로 정보를 누출할 수 있으므로 **안전하지 않습니다**.
+    - `no-referrer:` {{httpheader("Referer")}} 헤더를 전송하지 않습니다.
+    - `no-referrer-when-downgrade:` TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 `Referer` 헤더를 전송하지 않습니다. 따로 지정하지 않은 경우 사용하는 기본 정책입니다.
+    - `origin:` `Referer` 헤더가 요청 출처의 {{glossary("schema", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}}를 포함합니다.
+    - `origin-when-cross-origin:` 다른 출처로 요청할 땐 리퍼럴 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로와 쿼리 문자열도 포함합니다.
+    - `unsafe-url:` `Referrer` 헤더가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 하지만 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. TLS로 보호받는 리소스에서 그렇지 않은 출처로 정보를 누출할 수 있으므로 **안전하지 않습니다**.
 
-- {{htmlattrdef("sizes")}}
+- `sizes`
 
   - : 소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열. 각각의 문자열은 다음 구성요소로 이루어집니다.
 
     - [미디어 조건](/ko/docs/Web/Guide/CSS/Media_queries#구문). 마지막 항목에서는 생략해야 합니다.
     - 소스 크기 값.
 
-  미디어 조건은 이미지의 속성이 아니라** {{glossary("viewport", "뷰포트")}}** 속성을 가리킵니다. 예를 들어, `(max-height: 500px) 1000px`은 1000px 너비의 소스를 사용하려면 **뷰포트**가 500px 이하여야 한다는 뜻입니다.
+    미디어 조건은 이미지의 속성이 아니라** {{glossary("viewport", "뷰포트")}}** 속성을 가리킵니다. 예를 들어, `(max-height: 500px) 1000px`은 1000px 너비의 소스를 사용하려면 **뷰포트**가 500px 이하여야 한다는 뜻입니다.
 
-  소스 크기는 의도한 이미지 표시 크기를 지정합니다. {{glossary("user agent", "사용자 에이전트")}}는 현재 소스 크기를 사용해, 너비(`w`) 서술자를 사용한 `srcset` 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 {{glossary("intrinsic size", "고유 크기")}}({{glossary("CSS")}} 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. `srcset`이 비어있거나 너비 서술자를 사용하지 않은 경우, `sizes` 특성은 아무 효과도 없습니다.
+    소스 크기는 의도한 이미지 표시 크기를 지정합니다. {{glossary("user agent", "사용자 에이전트")}}는 현재 소스 크기를 사용해, 너비(`w`) 서술자를 사용한 `srcset` 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 {{glossary("intrinsic size", "고유 크기")}}({{glossary("CSS")}} 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. `srcset`이 비어있거나 너비 서술자를 사용하지 않은 경우, `sizes` 특성은 아무 효과도 없습니다.
 
-- {{htmlattrdef("src")}}
+- `src`
   - : 이미지의 {{glossary("URL")}}. 필수 사항입니다. `srcset`을 지원하는 {{glossary("Browser", "브라우저")}}의 `srcset`에 픽셀 밀도 `1x`와 `w` 서술자가 없는 경우, `src`는 픽셀 밀도 `1x`의 이미지 후보로 취급합니다.
-- {{htmlattrdef("srcset")}}
+- `srcset`
 
   - : {{glossary("user agent", "사용자 에이전트")}}가 사용할 수 있는 이미지 소스의 후보. 쉼표로 구분하는 한 개 이상의 문자열 목록입니다. 각각의 문자열은 다음 구성요소로 이루어집니다.
 
     - 이미지의 {{glossary("URL")}}.
     - 선택적으로, 공백과 함께 그 뒤를 잇는...
-
     - 너비 서술자(양의 정수와 바로 뒤의 '`w`' 문자). 너비 서술자의 값을 `sizes` 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.
     - 픽셀 밀도 서술자(양의 실수와 바로 뒤의 '`x`' 문자).
 
-  서술자를 포함하지 않은 경우 기본값인 `1x`로 간주합니다.
+    서술자를 포함하지 않은 경우 기본값인 `1x`로 간주합니다.
 
-  같은 `srcset` 특성에 너비와 픽셀 밀도 서술자를 함께 사용하거나, 동일한 서술자를 두 개 이상 사용하는건 유효하지 않습니다.
+    같은 `srcset` 특성에 너비와 픽셀 밀도 서술자를 함께 사용하거나, 동일한 서술자를 두 개 이상 사용하는건 유효하지 않습니다.
 
-  사용자 에이전트 스스로 가능한 소스 중 하나를 선택합니다. 따라서 사용자 에이전트는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있는 상당한 여지를 가집니다. [반응형 이미지 자습서](/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 방문해 예제를 살펴보세요.
+    사용자 에이전트 스스로 가능한 소스 중 하나를 선택합니다. 따라서 사용자 에이전트는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있는 상당한 여지를 가집니다. [반응형 이미지 자습서](/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 방문해 예제를 살펴보세요.
 
-- {{htmlattrdef("width")}}
+- `width`
   - : 이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다.
-- {{htmlattrdef("usemap")}}
+- `usemap`
 
   - : 요소와 연결할 [이미지 맵](/ko/docs/HTML/Element/map)의 프래그먼트.
 
-  > **참고: **`&#x3C;img>` 요소가 {{htmlelement("a")}} 또는 {{HTMLElement("button")}} 요소의 자손이면 사용할 수 없습니다.
+    > **참고:** `<img>` 요소가 {{htmlelement("a")}} 또는 {{HTMLElement("button")}} 요소의 자손이면 사용할 수 없습니다.
 
 ### Deprecated attributes
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
 
   - : Aligns the image with its surrounding context. Use the {{cssxref('float')}} and/or {{cssxref('vertical-align')}} {{glossary("CSS")}} properties instead of this attribute. Allowed values:
 
@@ -169,19 +162,19 @@ HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않
     - `right`
       - : Equivalent to `float: right`
 
-- {{htmlattrdef("border")}} {{deprecated_inline}}
+- `border` {{deprecated_inline}}
   - : The width of a border around the image. Use the {{cssxref('border')}} {{glossary("CSS")}} property instead.
-- {{htmlattrdef("hspace")}} {{deprecated_inline}}
+- `hspace` {{deprecated_inline}}
   - : The number of pixels of white space on the left and right of the image. Use the {{cssxref('margin')}} CSS property instead.
-- {{htmlattrdef("longdesc")}} {{deprecated_inline}}
+- `longdesc` {{deprecated_inline}}
 
   - : A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element [`id`](/ko/docs/Web/HTML/Global_attributes#id).
 
-    > **Note:** This attribute is mentioned in the latest {{glossary("W3C")}} version, [HTML 5.2](https://html.spec.whatwg.org/multipage/obsolete.html#element-attrdef-img-longdesc), but has been removed from the {{glossary("WHATWG")}}'s [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element). It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) or [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details).
+    > **참고:** This attribute is mentioned in the latest {{glossary("W3C")}} version, [HTML 5.2](https://html.spec.whatwg.org/multipage/obsolete.html#element-attrdef-img-longdesc), but has been removed from the {{glossary("WHATWG")}}'s [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element). It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) or [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details).
 
-- {{htmlattrdef("name")}} {{deprecated_inline}}
+- `name` {{deprecated_inline}}
   - : A name for the element. Use the [`id`](/ko/docs/Web/HTML/Global_attributes#id) attribute instead.
-- {{htmlattrdef("vspace")}} {{deprecated_inline}}
+- `vspace` {{deprecated_inline}}
   - : The number of pixels of white space above and below the image. Use the {{cssxref('margin')}} CSS property instead.
 
 ## CSS 스타일링
diff --git a/files/ko/web/html/element/input/checkbox/index.md b/files/ko/web/html/element/input/checkbox/index.md
index 1f3d3c256855cf..4748b03a1201f9 100644
--- a/files/ko/web/html/element/input/checkbox/index.md
+++ b/files/ko/web/html/element/input/checkbox/index.md
@@ -43,13 +43,13 @@ l10n:
 
 모든 {{HTMLElement("input")}} 요소들에 의해 공유되는 공통 특성들 외에도, `checkbox` input은 아래의 특성들을 지원합니다.
 
-- {{htmlattrdef("checked")}}
+- `checked`
 
   - : (페이지가 로드될 때) 체크박스가 기본적으로 체크된 상태로 보여질 것인지를 지칭하는 불리언 특성입니다. 이 특성은 체크박스가 "현재 체크된 상태"인지를 나타내지 않습니다. 만약 체크박스의 상태가 변경되면, 이 특성은 그 변경을 반영하지 않습니다 (단지 {{domxref("HTMLInputElement")}} 의 `checked` IDL 특성이 변경됩니다.)
     > **참고:** 다른 Input 컨트롤들과는 다르게, 체크박스의 값은 현재 체크박스의 상태가 `checked`일 때에만 제출되는 데이터에 포함됩니다. 이 경우, 체크박스의 `value` 특성에 지정된 값이 Input의 `value`으로서 전달됩니다.
     > 다른 브라우저들과는 다르게, Firefox의 경우 기본적으로 페이지 로드에 걸쳐서 `<input>`의 [`checked` 상태를 동적으로 유지합니다.](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) 이 기능을 제어하기 위해서는 [`autocomplete`](/ko/docs/Web/HTML/Element/input#autocomplete) 특성을 사용해야 합니다.
 
-- {{htmlattrdef("value")}}
+- `value`
 
   - : The `value` 특성은 {{HTMLElement("input")}} 요소가 공유하는 특성입니다. 하지만, `checkbox` 유형의 `input`에서는 특별한 용도로 사용됩니다. 폼이 제출될 때, 현재 활성화되어 있는 체크박스만이 서버 측에 전달됩니다. 그리고 `value` 특성에 지정된 값이 바로 전달되는 값이 됩니다. 만약 `value` 특성의 값이 지정되어 있지 않다면, 서버 측에는 기본 값으로 `on`이 전달됩니다. 이는 위의 [Value](#Value) 구획에서도 설명하고 있습니다.
 
@@ -279,9 +279,9 @@ otherCheckbox.addEventListener("change", () => {
     <tr>
       <td><strong>IDL 특성</strong></td>
       <td>
-        <code><a href="#attr-checked">checked</a></code>,
-        <code><a href="#attr-indeterminate">indeterminate</a></code> 그리고
-        <code><a href="#attr-value">value</a></code>
+        <code><a href="#checked">checked</a></code>,
+        <code><a href="#indeterminate">indeterminate</a></code> 그리고
+        <code><a href="#value">value</a></code>
       </td>
     </tr>
     <tr>
diff --git a/files/ko/web/html/element/input/date/index.md b/files/ko/web/html/element/input/date/index.md
index 585808eb6a4589..387e1a2b62455c 100644
--- a/files/ko/web/html/element/input/date/index.md
+++ b/files/ko/web/html/element/input/date/index.md
@@ -105,19 +105,19 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a UNIX timestam
 | [`min`](#min)   | 허용하는 가장 이른 날짜                                                      |
 | [`step`](#step) | 위/아래 조절 버튼을 눌렀을 때와, 날짜 유효성을 검증할 때 사용하는 스텝 간격. |
 
-### {{htmlattrdef("max")}}
+### `max`
 
 받을 수 있는 제일 나중 날짜. 입력받은 [`value`](/ko/docs/Web/HTML/Element/input#value)가 `max`보다 더 나중이라면 유효성 검증에 실패합니다. `max`의 값이 `yyyy-mm-dd` 형식의 유효한 날짜 문자열이 아니면 최댓값을 지정하지 않은 것으로 간주합니다.
 
 `max`와 `min` 특성을 모두 사용할 경우, `max`는 `min`과 **동일하거나 이후**인 날짜 문자열이어야 합니다.
 
-### {{htmlattrdef("min")}}
+### `min`
 
 받을 수 있는 제일 이전 날짜. 입력받은 [`value`](/ko/docs/Web/HTML/Element/input#value)가 `min`보다 더 이전이라면 유효성 검증에 실패합니다. `min`의 값이 `yyyy-mm-dd` 형식의 유효한 날짜 문자열이 아니면 최솟값을 지정하지 않은 것으로 간주합니다.
 
 `max`와 `min` 특성을 모두 사용할 경우, `min`은 `max`와 **동일하거나 이전**인 날짜 문자열이어야 합니다.
 
-### {{htmlattrdef("step")}}
+### `step`
 
 The `step` attribute is a number that specifies the granularity that the value must adhere to, or the special value `any`, which is described below. Only values which are equal to the basis for stepping ([`min`](#min) if specified, [`value`](/ko/docs/Web/HTML/Element/input#value) otherwise, and an appropriate default value if neither of those is provided) are valid.
 
diff --git a/files/ko/web/html/element/input/file/index.md b/files/ko/web/html/element/input/file/index.md
index 5ca249e9901f07..d1c861621c6c52 100644
--- a/files/ko/web/html/element/input/file/index.md
+++ b/files/ko/web/html/element/input/file/index.md
@@ -73,7 +73,7 @@ slug: Web/HTML/Element/input/file
 | [`files`](#files)       | 선택한 파일을 나열하는 {{domxref("FileList")}}                                            |
 | [`multiple`](#multiple) | 지정할 경우 사용자가 여러 개의 파일을 선택할 수 있음                                      |
 
-### {{htmlattrdef("accept")}}
+### `accept`
 
 [`accept`](/ko/docs/Web/HTML/Attributes/accept) 특성은 파일 입력 칸이 허용할 파일 유형을 나타내는 문자열로, 쉼표로 구분한 [**고유 파일 유형 지정자**](#고유_파일_유형_지정자)의 목록입니다. 주어진 파일 유형의 식별 방법이 여러 가지일 수도 있으므로, 특정 파일 형식이 필요할 땐 유형의 집합을 제공하는 것이 좋습니다.
 
@@ -86,17 +86,17 @@ slug: Web/HTML/Element/input/file
   accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
 ```
 
-### {{htmlattrdef("capture")}}
+### `capture`
 
 [`accept`](/ko/docs/Web/HTML/Attributes/accept) 특성이 이미지나 비디오 캡처 데이터를 요구할 경우, [`capture`](/ko/docs/Web/HTML/Attributes/capture) 특성으로는 어떤 카메라를 사용할지 지정할 수 있습니다. `user` 값은 전면 카메라(사용자를 향한 카메라)와 마이크를, `environment` 값은 후면 카메라와 마이크를 사용해야 함을 나타냅니다. `capture` 특성을 누락한 경우 {{Glossary("user agent", "사용자 에이전트")}}가 어떤 쪽을 선택할지 스스로 결정합니다. 요청한 방향의 카메라를 사용할 수 없는 경우 사용자 에이전트는 자신이 선호하는 기본 모드로 대체할 수 있습니다.
 
 > **참고:** `capture`는 과거 불리언 특성이었으며, 존재할 경우 파일 선택 창을 요청하는 대신 장치의 카메라나 마이크 등 미디어 캡처 장치를 요청했었습니다.
 
-### {{htmlattrdef("files")}}
+### `files`
 
 선택한 모든 파일을 나열하는 {{domxref("FileList")}} 객체입니다. [`multiple`](/ko/docs/Web/HTML/Element/input/file#multiple) 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않습니다.
 
-### {{htmlattrdef("multiple")}}
+### `multiple`
 
 [`multiple`](/ko/docs/Web/HTML/Attributes/multiple) 불리언 특성을 지정한 경우 사용자가 파일 선택 창에서 복수의 파일을 선택할 수 있습니다.
 
@@ -108,7 +108,7 @@ slug: Web/HTML/Element/input/file
 | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
 | [`webkitdirectory`](#webkitdirectory) | 사용자가 디렉토리를 선택할 수 있는지 나타내는 불리언 특성. [`multiple`](#multiple) 특성을 지정한 경우 복수 선택 가능 |
 
-### {{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
+### `webkitdirectory` {{non-standard_inline}}
 
 `webkitdirectory` 불리언 특성이 존재할 경우 사용자의 파일 선택 창에서 디렉토리만 선택 가능해야 함을 나타냅니다. {{domxref("HTMLInputElement.webkitdirectory")}} 문서를 방문해 보다 자세한 정보와 예제를 알아보세요.
 
diff --git a/files/ko/web/html/element/ins/index.md b/files/ko/web/html/element/ins/index.md
index b9a023ee7b5f4a..e5d885b3d49ba3 100644
--- a/files/ko/web/html/element/ins/index.md
+++ b/files/ko/web/html/element/ins/index.md
@@ -55,9 +55,9 @@ slug: Web/HTML/Element/ins
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : 회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : 변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 [HTML에서 사용하는 날짜와 시간 형식](/ko/docs/Web/HTML/Date_and_time_formats) 문서에서 확인할 수 있습니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/label/index.md b/files/ko/web/html/element/label/index.md
index c0f748cc265eeb..ff63eaa93cc8cb 100644
--- a/files/ko/web/html/element/label/index.md
+++ b/files/ko/web/html/element/label/index.md
@@ -34,13 +34,13 @@ slug: Web/HTML/Element/label
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("for")}}
+- `for`
 
   - : 같은 문서 내의 `<label>` 요소로서, [레이블 가능](/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능)한 form-related 요소의 [`id`](/ko/docs/Web/HTML/Global_attributes#id). 레이블 가능한 요소일 때, `for` 속성값과 일치하는 `id`를 가진 문서의 첫 번째 요소는 그 label 요소의 *라벨 제어(labeled control)*라고 합니다. label을 지정할 수 없으면 `for` 속성은 영향을 미치지 않습니다. 문서의 뒷부분에 `id` 값과 일치하는 다른 요소들은 무시합니다.
 
     > **참고:** `<label>` 요소는 `for` 속성과 제어control 요소를 동시에 가질 수 있습니다. 이 때 `for` 속성은 포함되어있는 제어control 요소를 가리키고 있어야 합니다.
 
-- {{htmlattrdef("form")}}
+- `form`
   - : label과 연관된 {{htmlelement ( "form")}} 요소(_양식 소유자 form owner_). 이 속성이 지정된 경우, 이 속성 값은 동일한 문서의 {{HTMLElement ( "form")}} 요소의 id입니다. 따라서 label 요소를 양식 요소의 자손이 아닌 문서의 어느 곳에나 배치 할 수 있습니다.
 
 ## CSS 스타일링
diff --git a/files/ko/web/html/element/li/index.md b/files/ko/web/html/element/li/index.md
index f501ed6f2bd20d..c4071b78a08371 100644
--- a/files/ko/web/html/element/li/index.md
+++ b/files/ko/web/html/element/li/index.md
@@ -61,13 +61,13 @@ slug: Web/HTML/Element/li
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("value")}}
+- `value`
 
   - : {{HTMLElement("ol")}} 요소 내부에서 항목의 현재 서수 값을 나타내는 정수. 리스트가 로마 숫자나 문자로 표시되더라도 이 특성에는 숫자만 넣을수 있습니다. `value`를 지정한 항목을 뒤따르는 다른 항목은 이 값에서부터 번호를 매깁니다. `value` 속성은 비정렬 목록({{HTMLElement("ul")}})과 메뉴({{HTMLElement("menu")}})에서는 아무 의미가 없습니다.
 
     > **참고:** HTML4에서는 `value`의 사용을 중단했지만 HTML5에서 다시 도입했습니다.
 
-- {{htmlattrdef("type")}} {{Deprecated_inline}}
+- `type` {{Deprecated_inline}}
 
   - : 넘버링 타입을 나타내는 문자.
 
diff --git a/files/ko/web/html/element/link/index.md b/files/ko/web/html/element/link/index.md
index ff3f7bf381484a..335259279e0f94 100644
--- a/files/ko/web/html/element/link/index.md
+++ b/files/ko/web/html/element/link/index.md
@@ -70,7 +70,7 @@ Other usage notes:
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다
 
-- {{HTMLAttrDef("as")}}
+- `as`
 
   - : `<link>` 요소에 `rel="preload"` 또는 `rel="prefetch"` 특성을 지정했을 때만 사용합니다. `as` 특성은 `&#x3C;link>` 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 {{HTTPHeader("Accept")}} 요청 헤더 적용에 필요합니다. 이에 더해, `rel="preload"`는 `as` 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.
 
@@ -150,7 +150,7 @@ Other usage notes:
         </tbody>
       </table>
 
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
 
   - : 리소스를 가져올 때 {{glossary("CORS")}}를 사용해야 하는지 나타내는 열거형 특성입니다. [CORS 활성화 이미지](/ko/docs/Web/HTML/CORS_Enabled_Image)는 {{HTMLElement("canvas")}} 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다.
   - `anonymous`
@@ -159,17 +159,17 @@ Other usage notes:
 
   `crossorigin` 특성이 존재하지 않으면 리소스를 {{Glossary("CORS")}} 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 **anonymous**를 지정한 것으로 간주합니다. [CORS 설정 특성](/ko/docs/Web/HTML/Attributes/crossorigin) 문서에서 더 자세한 정보를 알아보세요.
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
 
   - : `rel="stylesheet"`에 한정하여, `disabled` 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 `disabled`를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 `disabled` 특성이 `false`로 바뀌거나 아예 제거될 때는 불러옵니다.
 
     DOM에서 `disabled` 속성을 지정하면 문서의 {{domxref("document.styleSheets")}} 리스트에서 스타일시트를 제거합니다.
 
-- {{HTMLAttrDef("href")}}
+- `href`
   - : 연결할 리소스의 {{glossary("URL")}}입니다. 절대와 상대 URL 모두 가능합니다.
-- {{HTMLAttrDef("hreflang")}}
+- `hreflang`
   - : 연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)에 따릅니다. [`href`](/ko/docs/Web/HTML/Element/link#href) 특성이 존재할 때만 사용하세요.
-- {{HTMLAttrDef("importance")}} {{Experimental_Inline}}
+- `importance` {{Experimental_Inline}}
 
   - : 리소스의 상대적인 중요도입니다. 가능한 값은 다음과 같습니다.
 
@@ -181,9 +181,9 @@ Other usage notes:
 
   > **참고:** `importance` 특성은 `<link>` 요소가 `rel="preload"` 또는 `rel="prefetch"`를 가지고 있어야 사용할 수 있습니다.
 
-- {{HTMLAttrDef("integrity")}} {{Experimental_Inline}}
+- `integrity` {{Experimental_Inline}}
   - : Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you're telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See [Subresource Integrity](/ko/docs/Web/Security/Subresource_Integrity).
-- {{htmlattrdef("media")}}
+- `media`
 
   - : 연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. `media` 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다.
 
@@ -192,7 +192,7 @@ Other usage notes:
     > - HTML 4에서는 이 특성의 값으로 사용할 수 있는 `print`, `screen`, `aural`, `braille` 등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹([media types and groups](/ko/docs/Web/CSS/@media))일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의[media queries](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries)든 사용할 수 있습니다.
     > - [CSS3 Media Queries](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries)를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로HTML 4에 정의되어 있는제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기바랍니다.
 
-- {{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}
+- `referrerpolicy` {{Experimental_Inline}}
 
   - : A string indicating which referrer to use when fetching the resource:
 
@@ -202,9 +202,9 @@ Other usage notes:
     - `origin-when-cross-origin` means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.
     - `unsafe-url` means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
 
-- {{htmlattrdef("rel")}}
+- `rel`
   - : 연결할 리소스와 현재 문서의 관계. [링크 유형](/ko/docs/Web/HTML/Link_types)의 값을 공백으로 구분한 리스트를 지정해야 합니다.
-- {{HTMLAttrDef("sizes")}}
+- `sizes`
 
   - : This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the [`rel()`](/ko/docs/Web/HTML/Element/link#rel) contains a value of `icon` or a non-standard type such as Apple's `apple-touch-icon`. It may have the following values:
 
@@ -213,29 +213,29 @@ Other usage notes:
 
     > **Note:** Most icon formats are only able to store one single icon; therefore most of the time the [`sizes()`](/ko/docs/Web/HTML/Global_attributes#sizes) attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).
 
-- {{htmlattrdef("title")}}
+- `title`
   - : The `title` attribute has special semantics on the `&#x3C;link>` element. When used on a `&#x3C;link rel="stylesheet">` it defines a [preferred or an alternate stylesheet](/ko/docs/Web/CSS/Alternative_style_sheets). Incorrectly using it may [cause the stylesheet to be ignored](/ko/docs/Correctly_Using_Titles_With_External_Stylesheets).
-- {{htmlattrdef("type")}}
+- `type`
   - : 이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은** text/html**, **text/css**와 같은 MIME 타입이여야합니다. 이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.
 
 ### 비표준 특성
 
-- {{HTMLAttrDef("methods")}} {{Non-standard_Inline}}
+- `methods` {{Non-standard_Inline}}
   - : The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the **title** attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.
-- {{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}
+- `prefetch` {{Non-standard_Inline}} {{secureContext_inline}}
   - : This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.
-- {{HTMLAttrDef("target")}} {{Non-standard_Inline}}
+- `target` {{Non-standard_Inline}}
   - : Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.
 
 ### 폐기된 특성
 
-- {{HTMLAttrDef("charset")}} {{deprecated_inline}}
+- `charset` {{deprecated_inline}}
 
   - : This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is `iso-8859-1`.
 
     > **Note:** To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.
 
-- {{HTMLAttrDef("rev")}} {{deprecated_inline}}
+- `rev` {{deprecated_inline}}
 
   - : The value of this attribute shows the relationship of the current document to the linked document, as defined by the [`href`](/ko/docs/Web/HTML/Element/link#href) attribute. The attribute thus defines the reverse relationship compared to the value of the `rel` attribute. [Link type values](/ko/docs/Web/HTML/Link_types) for the attribute are similar to the possible values for [`rel`](/ko/docs/Web/HTML/Element/link#rel).
   - :
diff --git a/files/ko/web/html/element/map/index.md b/files/ko/web/html/element/map/index.md
index 71514bf92baacc..a35d5e48d1c7f7 100644
--- a/files/ko/web/html/element/map/index.md
+++ b/files/ko/web/html/element/map/index.md
@@ -61,7 +61,7 @@ slug: Web/HTML/Element/map
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("name")}}
+- `name`
   - : 맵을 참조할 때 사용할 수 있는 이름. 반드시 존재해야 하고, 값이 비면 안되며, 값에 공백 문자가 포함되어도 안됩니다. `name` 특성은 문서 내의 모든 `<map>`에서 유일해야 합니다. [`id`](/ko/docs/Web/HTML/Global_attributes#id) 특성이 존재하는 경우 `name`과 값이 동일해야 합니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/meta/index.md b/files/ko/web/html/element/meta/index.md
index fafcf647aba646..0f4deab7b618e6 100644
--- a/files/ko/web/html/element/meta/index.md
+++ b/files/ko/web/html/element/meta/index.md
@@ -86,11 +86,11 @@ slug: Web/HTML/Element/meta
 
 > **참고:** [`name`](/ko/docs/Web/HTML/Element/meta#name) 특성은 `<meta>` 요소에 대해 특정한 의미를 가집니다. 하나의 `<meta>` 요소에서, [`itemprop`](/ko/docs/Web/HTML/Element/meta#itemprop) 특성을 [`name`](/ko/docs/Web/HTML/Element/meta#name), [`http-equiv`](/ko/docs/Web/HTML/Element/meta#http-equiv) 또는 [`charset`](/ko/docs/Web/HTML/Element/meta#charset) 특성과 함께 설정할 수 없습니다.
 
-- {{htmlattrdef("charset")}}
+- `charset`
   - : 페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "`utf-8`"의 대소문자 구분 없는 {{glossary("ASCII")}} 표현이어야 합니다.
-- {{htmlattrdef("content")}}
+- `content`
   - : [`http-equiv`](/ko/docs/Web/HTML/Element/meta#http-equiv) 또는 [`name`](/ko/docs/Web/HTML/Element/meta#name) 특성의 값을 담습니다.
-- {{htmlattrdef("http-equiv")}}
+- `http-equiv`
 
   - : 프래그마 지시문을 정의합니다. 특성의 이름(`http-equiv(alent)`)에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.
 
@@ -125,7 +125,7 @@ slug: Web/HTML/Element/meta
       > - [Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html)
       > - [Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html)
 
-- {{htmlattrdef("name")}}
+- `name`
 
   - : `name`과 `content` 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. `name`은 이름, `content`는 값을 담당합니다.
 
diff --git a/files/ko/web/html/element/meter/index.md b/files/ko/web/html/element/meter/index.md
index a8edeb11c45f5b..17a66c58637213 100644
--- a/files/ko/web/html/element/meter/index.md
+++ b/files/ko/web/html/element/meter/index.md
@@ -62,23 +62,23 @@ slug: Web/HTML/Element/meter
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("value")}}
+- `value`
 
   - : 현재의 값. 최소와 최댓값(`min`과 `max` 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 `0`으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.
 
     > **참고:**`value`가 `0` 이상 `1` 이하가 아닌 이상, `min`과 `max`를 정의해 `value` 값이 그 안에 들어가도록 해야 합니다.
 
-- {{htmlattrdef("min")}}
+- `min`
   - : 측정 범위의 가능한 최솟값. 지정할 경우 최댓값(`max` 특성) 미만이어야 합니다. 지정하지 않은 경우 `0`입니다.
-- {{htmlattrdef("max")}}
+- `max`
   - : 측정 범위의 가능한 최댓값. 지정할 경우 최솟값(`min` 특성)을 초과해야 합니다. 지정하지 않은 경우 `1`입니다.
-- {{htmlattrdef("low")}}
+- `low`
   - : 측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(`min` 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 `high`와 `max` 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.
-- {{htmlattrdef("high")}}
+- `high`
   - : 측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(`max` 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 `low`와 `min` 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.
-- {{htmlattrdef("optimum")}}
+- `optimum`
   - : 이상적인 값. `min`과 `max` 특성으로 정의한 범위 내에 위치해야 합니다. `low`와 `high` 특성을 함께 사용한 경우, `optimum`은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 `min`과 `low` 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.
-- {{htmlattrdef("form")}}
+- `form`
   - : `<meter>`와 연결할 {{htmlelement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 [`id`](/ko/docs/Web/HTML/Global_attributes#id) 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다. [`<input type="number">`](/ko/docs/Web/HTML/Element/input/number)의 값 범위를 보여주는 등 `<meter>`를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.
 
 ## 예제
diff --git a/files/ko/web/html/element/object/index.md b/files/ko/web/html/element/object/index.md
index e0a4d64e30e53e..9bb307b210a52c 100644
--- a/files/ko/web/html/element/object/index.md
+++ b/files/ko/web/html/element/object/index.md
@@ -19,37 +19,37 @@ slug: Web/HTML/Element/object
 
 이 속성은 [전역 속성](/ko/docs/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("archive")}} {{deprecated_inline}}
+- `archive` {{deprecated_inline}}
   - : A space-separated list of URIs for archives of resources for the object.
-- {{htmlattrdef("border")}} {{deprecated_inline}}
+- `border` {{deprecated_inline}}
   - : The width of a border around the control, in pixels.
-- {{htmlattrdef("classid")}} {{deprecated_inline}}
+- `classid` {{deprecated_inline}}
   - : The URI of the object's implementation. It can be used together with, or in place of, the **data** attribute.
-- {{htmlattrdef("codebase")}} {{deprecated_inline}}
+- `codebase` {{deprecated_inline}}
   - : The base path used to resolve relative URIs specified by **classid**, **data**, or **archive**. If not specified, the default is the base URI of the current document.
-- {{htmlattrdef("codetype")}} {{deprecated_inline}}
+- `codetype` {{deprecated_inline}}
   - : The content type of the data specified by **classid**.
-- {{htmlattrdef("data")}}
+- `data`
   - : 리소스의 URL. 최소 하나의 **data**와 **type**가 정의되어야 합니다.
-- {{htmlattrdef("declare")}} {{deprecated_inline}}
+- `declare` {{deprecated_inline}}
   - : The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent `<object>` element. In HTML5, repeat the \<object> element completely each that that the resource is reused.
-- {{htmlattrdef("form")}}
+- `form`
   - : object 요소와 관련된 form 요소. 이 속성의 값은 같은 문서의 {{HTMLElement("form")}} 요소의 ID 속성의 값이여야 합니다.
-- {{htmlattrdef("height")}}
+- `height`
   - : 표시될 리소스의 높이를 CSS 픽셀 단위로 지정합니다.
-- {{htmlattrdef("name")}}
+- `name`
   - : 유효한 브라우징 컨텍스트의 이름(HTML5) 또는, 컨트롤의 이름(HTML 4)
-- {{htmlattrdef("standby")}} {{deprecated_inline}}
+- `standby` {{deprecated_inline}}
   - : A message that the browser can show while loading the object's implementation and data.
-- {{htmlattrdef("tabindex")}} {{deprecated_inline}}
+- `tabindex` {{deprecated_inline}}
   - : The position of the element in the tabbing navigation order for the current document.
-- {{htmlattrdef("type")}}
+- `type`
   - : **data**에 의해 지정된 리소스의 [컨텐츠 타입](/ko/docs/Glossary/Content_type). 최소 한 개의 **data**와 **type**가 정의되어야 합니다.
-- {{htmlattrdef("typemustmatch")}}
+- `typemustmatch`
   - : **type**와 리소스의 실제 [컨텐츠 타입](/ko/docs/Glossary/Content_type)이 일치해야되는지를 나타내는 불리언 속성
-- {{htmlattrdef("usemap")}}
+- `usemap`
   - : {{HTMLElement("map")}} 요소에 대한 해쉬-이름 참조; #와 그 뒤에 map 요소의 [`name`](/ko/docs/Web/HTML/Element/map#name) 값이 붙음
-- {{htmlattrdef("width")}}
+- `width`
   - : 표시될 리소스의 가로 길이를 CSS 픽셀단위로 지정합니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/ol/index.md b/files/ko/web/html/element/ol/index.md
index 2a96a61708f41a..f65f45b62be786 100644
--- a/files/ko/web/html/element/ol/index.md
+++ b/files/ko/web/html/element/ol/index.md
@@ -65,11 +65,11 @@ slug: Web/HTML/Element/ol
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("reversed")}}
+- `reversed`
   - : 목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.
-- {{htmlattrdef("start")}}
+- `start`
   - : 항목을 셀 때 시작할 수. `type`이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 `start="4"`를 사용하세요.
-- {{htmlattrdef("type")}}
+- `type`
 
   - : 항목을 셀 때 사용할 카운터 유형.
 
diff --git a/files/ko/web/html/element/optgroup/index.md b/files/ko/web/html/element/optgroup/index.md
index 8c1c91a6b83422..98eea82d316a3c 100644
--- a/files/ko/web/html/element/optgroup/index.md
+++ b/files/ko/web/html/element/optgroup/index.md
@@ -50,9 +50,9 @@ slug: Web/HTML/Element/optgroup
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : 지정한 경우 모든 하위 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.
-- {{htmlattrdef("label")}}
+- `label`
   - : 옵션 그룹의 이름. 브라우저가 그룹의 이름을 표시할 때 사용할 수 있습니다. 필수로 지정해야 합니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/option/index.md b/files/ko/web/html/element/option/index.md
index 4ae7cf62063d85..25ee54c4e787e9 100644
--- a/files/ko/web/html/element/option/index.md
+++ b/files/ko/web/html/element/option/index.md
@@ -54,13 +54,13 @@ slug: Web/HTML/Element/option
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : 지정한 경우 이 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다. `<option>`에 `disabled` 특성을 추가하지 않더라도, {{HTMLElement("optgroup")}} 등 조상 요소로 인해 비활성화될 수 있습니다.
-- {{htmlattrdef("label")}}
+- `label`
   - : 옵션의 뜻을 나타내는 텍스트. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.
-- {{htmlattrdef("selected")}}
+- `selected`
   - : 지정한 경우 초기에 이 옵션을 선택한 상태로 설정합니다. [`multiple`](/ko/docs/Web/HTML/Element/select#multiple)를 지정하지 않은 {{HTMLElement("select")}} 요소의 자손인 경우, 하나의 `<option>`만 `selected` 특성을 가질 수 있습니다.
-- {{htmlattrdef("value")}}
+- `value`
   - : 양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/output/index.md b/files/ko/web/html/element/output/index.md
index 1360b524166a40..952af6937244ad 100644
--- a/files/ko/web/html/element/output/index.md
+++ b/files/ko/web/html/element/output/index.md
@@ -60,15 +60,15 @@ slug: Web/HTML/Element/output
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("for")}}
+- `for`
   - : 스페이스로 구분한, 다른 여러 요소 [`id`](/ko/docs/Web/HTML/Global_attributes#id)의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다.
-- {{htmlattrdef("form")}}
+- `form`
 
   - : `<output>`과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 [`id`](/ko/docs/Web/HTML/Global_attributes#id) 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다.
 
   `form` 특성을 사용하면 `<output>`을 `<form>` 요소에 넣지 않고도 연결할 수 있고, 조상 중 `<form>`이 있더라도 소유자를 재정의할 수 있습니다.
 
-- {{htmlattrdef("name")}}
+- `name`
   - : 요소의 이름. {{domxref("HTMLFormElement.elements", "form.elements")}} API에서 사용합니다.
 
 `<output>`의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.
diff --git a/files/ko/web/html/element/pre/index.md b/files/ko/web/html/element/pre/index.md
index 10c32122ae6f34..50f39fcce9f04d 100644
--- a/files/ko/web/html/element/pre/index.md
+++ b/files/ko/web/html/element/pre/index.md
@@ -56,11 +56,11 @@ slug: Web/HTML/Element/pre
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)만 포함합니다.
 
-- {{htmlattrdef("cols")}} {{non-standard_inline}} {{deprecated_inline}}
+- `cols` {{non-standard_inline}} {{deprecated_inline}}
   - : Contains the _preferred_ count of characters that a line should have. It was a non-standard synonym of [`width`](/ko/docs/Web/HTML/Element/pre#width). To achieve such an effect, use CSS styling instead.
-- {{htmlattrdef("width")}} {{deprecated_inline}}
+- `width` {{deprecated_inline}}
   - : Contains the _preferred_ count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.
-- {{htmlattrdef("wrap")}} {{non-standard_inline}}
+- `wrap` {{non-standard_inline}}
   - : Is a _hint_ indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.
 
 ## 예제
diff --git a/files/ko/web/html/element/progress/index.md b/files/ko/web/html/element/progress/index.md
index 54df71fb70a2c1..5aedc455d6feb1 100644
--- a/files/ko/web/html/element/progress/index.md
+++ b/files/ko/web/html/element/progress/index.md
@@ -63,9 +63,9 @@ slug: Web/HTML/Element/progress
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{ htmlattrdef("max") }}
+- `max`
   - : `<progress>` 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.
-- {{ htmlattrdef("value") }}
+- `value`
   - : `<progress>` 요소가 나타내는 작업을 완료한 양. 유효한 부동소수점 숫자여야 하고, `max` 특성을 지정한 경우 0 이상 `max` 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. `value` 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.
 
 > **참고:** {{htmlelement("meter")}} 요소와 달리, 최솟값은 항상 0이며 `min` 특성을 지정할 수 없습니다.
diff --git a/files/ko/web/html/element/q/index.md b/files/ko/web/html/element/q/index.md
index 4f0562a774f49b..f05fa84e059f7b 100644
--- a/files/ko/web/html/element/q/index.md
+++ b/files/ko/web/html/element/q/index.md
@@ -61,7 +61,7 @@ slug: Web/HTML/Element/q
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.
 
 ## 예제
diff --git a/files/ko/web/html/element/script/index.md b/files/ko/web/html/element/script/index.md
index dcd93e37e36bb5..594d86ae5231a7 100644
--- a/files/ko/web/html/element/script/index.md
+++ b/files/ko/web/html/element/script/index.md
@@ -68,7 +68,7 @@ slug: Web/HTML/Element/script
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("async")}}
+- `async`
 
   - : 일반 스크립트에 `async` 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행합니다.
 
@@ -80,9 +80,9 @@ slug: Web/HTML/Element/script
 
     [브라우저 호환성](#브라우저_호환성)을 참고하세요.
 
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
   - : 일반 `script` 요소는 표준 {{glossary("CORS")}}를 통과하지 못했을 때 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}에 최소한의 정보만 넘깁니다. `crossorigin` 속성은 정적 미디어에 대해 별도의 도메인을 사용하는 사이트의 오류 기록을 허용하기 위해 사용할 수 있습니다. 유효한 인수에 대한 보다 자세한 설명은 [CORS 설정 속](/ko/docs/Web/HTML/Attributes/crossorigin)성 문서를 참고하세요.
-- {{htmlattrdef("defer")}}
+- `defer`
 
   - : 브라우저가 스크립트를 문서 분석 이후에, 그러나 {{event("DOMContentLoaded")}} 발생 이전에 실행해야 함을 나타내는 불리언 속성입니다.
 
@@ -96,15 +96,15 @@ slug: Web/HTML/Element/script
 
     기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, `defer` 속성을 사용하면 **분석기를 멈추는 JavaScript**를 제거할 수 있습니다. `async`도 비슷한 효과를 가집니다.
 
-- {{htmlattrdef("integrity")}}
+- `integrity`
   - : {{glossary("user agent", "사용자 에이전트")}}가 가져온 리소스에 예기치 못한 변형이 존재하는지 검사할 때 사용할 인라인 메타데이터입니다. [하위 리소스 무결성](/ko/docs/Web/Security/Subresource_Integrity) 문서를 참고하세요.
-- {{htmlattrdef("nomodule")}}
+- `nomodule`
 
   - : [ES2015 모듈](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/)을 지원하는 브라우저에서는 실행하지 않을 스크립트임을 나타내는 불리언 특성입니다. 모듈화 JavaScript를 지원하지 않는 오래된 브라우저가 사용할 대체 스크립트에 사용할 수 있습니다.
 
-- {{htmlattrdef("nonce")}}
+- `nonce`
   - : [`script-src` `Content-Security-Policy`](/ko/docs/Web/HTTP/Headers/Content-Security-Policy/script-src)의 화이트리스트에 스크립트를 등록하기 위한, 암호화된 일회용 숫자(논스, nonce)입니다. 서버는 고유한 일회용 숫자값을 정책을 전송할 때마다 생성해야 합니다. 자원의 정책을 우회할 수 없도록, 추측할 수 없는 임시값을 제공하는 것이 중요합니다.
-- {{htmlattrdef("referrerpolicy")}}
+- `referrerpolicy`
 
   - : 스크립트를 가져올 때, 또는 스크립트가 다른 리소스를 가져올 때 전송할 [리퍼러](/ko/docs/Web/API/Document/referrer)를 나타냅니다.
 
@@ -119,9 +119,9 @@ slug: Web/HTML/Element/script
 
     > **참고:** 빈 문자열 값(`""`)은 기본값이자 `referrerpolicy` 특성을 지원하지 않는 경우 사용하는 대체값입니다. `referrerpolicy`를 `<script>` 요소에 명시하지 않은 경우 더 상위 단계의 정책, 즉 문서 자체나 도메인의 정책을 따라갑니다. 상위 단계 정책도 사용할 수 없을 땐 빈 문자열을 `no-referrer-when-downgrade`로 간주합니다.
 
-- {{htmlattrdef("src")}}
+- `src`
   - : 외부 스크립트를 가리키는 {{glossary("URI")}}입니다. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있습니다.
-- {{htmlattrdef("type")}}
+- `type`
 
   - : 스크립트의 유형을 나타냅니다. 다음 다섯개의 범주 중 하나에 속할 수 있습니다.
 
@@ -131,9 +131,9 @@ slug: Web/HTML/Element/script
 
 ### Deprecated attributes
 
-- {{htmlattrdef("charset")}} {{Deprecated_inline}}
+- `charset` {{Deprecated_inline}}
   - : If present, its value must be an ASCII case-insensitive match for "`utf-8`". It's unnecessary to specify the `charset` attribute, because documents must use UTF-8, and the `script` element inherits its character encoding from the document.
-- {{htmlattrdef("language")}} {{Deprecated_inline}}
+- `language` {{Deprecated_inline}}
   - : Like the `type` attribute, this attribute identifies the scripting language in use. Unlike the `type` attribute, however, this attribute's possible values were never standardized. The `type` attribute should be used instead.
 
 ## 참고
diff --git a/files/ko/web/html/element/slot/index.md b/files/ko/web/html/element/slot/index.md
index bb31edf4a05522..7dcb69169f6f59 100644
--- a/files/ko/web/html/element/slot/index.md
+++ b/files/ko/web/html/element/slot/index.md
@@ -61,7 +61,7 @@ slug: Web/HTML/Element/slot
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("name")}}
+- `name`
   - : 슬롯의 이름.
 
 ## 예제
diff --git a/files/ko/web/html/element/style/index.md b/files/ko/web/html/element/style/index.md
index 62e2a7773a0b4d..e75dd1d694b2db 100644
--- a/files/ko/web/html/element/style/index.md
+++ b/files/ko/web/html/element/style/index.md
@@ -19,22 +19,22 @@ slug: Web/HTML/Element/style
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("type")}}
+- `type`
 
   - : 스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 `text/css`입니다. 빈 문자열과 `text/css` 외의 값은 사용하지 않습니다.
 
     > **참고:** 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.
 
-- {{htmlattrdef("media")}}
+- `media`
   - : 스타일을 적용할 매체. 값은 [미디어 쿼리](/ko/docs/Web/Guide/CSS/Media_queries)이며, 누락할 경우 기본값은 `all`입니다.
-- {{htmlattrdef("nonce")}}
+- `nonce`
   - : [`style-src Content-Security-Policy`](/ko/docs/Web/HTTP/Headers/Content-Security-Policy/style-src)에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.
-- {{htmlattrdef("title")}}
+- `title`
   - : [대체 스타일 시트](/ko/docs/Web/CSS/Alternative_style_sheets) 세트를 지정합니다.
 
 ### 사용 중단된 특성
 
-- {{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}
+- `scoped` {{non-standard_inline}} {{deprecated_inline}}
 
   - : 지정한 경우, `<style>` 요소의 부모 및 부모의 자식에만 스타일을 적용합니다.
 
diff --git a/files/ko/web/html/element/tfoot/index.md b/files/ko/web/html/element/tfoot/index.md
index d7f9c1d300b305..bbb901eb98e89b 100644
--- a/files/ko/web/html/element/tfoot/index.md
+++ b/files/ko/web/html/element/tfoot/index.md
@@ -70,7 +70,7 @@ slug: Web/HTML/Element/tfoot
 
 다음 특성은 더 이상 사용되지 않으므로 사용해서는 안 됩니다. 이 특성들은 기존 코드를 업데이트할 때 참조하는 용도와, 역사적인 흥미를 위해서만 작성되어 있습니다.
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
 
   - : 아래에 나열된 속성들은 각 셀 컨텐츠의 수평 정렬 방법을 지정합니다. 가능한 값:
 
@@ -86,14 +86,14 @@ slug: Web/HTML/Element/tfoot
     > - `left`, `center`, `right` 또는 `justify` 값과 같은 효과를 내고 싶다면, CSS {{cssxref("text-align")}} 속성을 적용하세요.
     > - `char` 값과 같은 효과를 내고 싶다면, CSS3에서 [`char`](/ko/docs/Web/HTML/Element/tfoot#char)의 값을 {{cssxref("text-align")}} 속성의 {{unimplemented_inline}} 값으로 사용할 수 있습니다.
 
-- {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}
+- `bgcolor` {{Deprecated_inline}}
   - : 표의 배경 색입니다. '`#`'이 앞에 붙는 [6자리의 16진수 RGB 코드](/ko/docs/Web/CSS/color_value#rgb_colors) 형식으로 작성합니다. 이미 정의되어 있는 [color keywords](/ko/docs/Web/CSS/color_value#color_keywords) 도 사용할 수 있습니다.
     비슷한 효과를 적용하고 싶다면 CSS {{cssxref("background-color")}} 속성을 사용합니다.
-- {{htmlattrdef("char")}} {{deprecated_inline}}
+- `char` {{deprecated_inline}}
   - : 이 특성은 열을 특정 문자에 대해 정렬하도록 지정합니다. 숫자 또는 통화 값을 정렬할 때에는 일반적으로 마침표(.)가 포함됩니다. 만약 [`align`](/ko/docs/Web/HTML/Element/tfoot#align) 이 `char`로 설정되어 있지 않으면, 이 특성은 무시됩니다.
-- {{htmlattrdef("charoff")}} {{deprecated_inline}}
+- `charoff` {{deprecated_inline}}
   - : 이 특성은 `char` 특성으로 지정된 정렬 문자에서 열 데이터를 오프셋할 문자의 수를 나타내는 데 사용됩니다.
-- {{htmlattrdef("valign")}} {{deprecated_inline}}
+- `valign` {{deprecated_inline}}
   - : 이 특성은 표 바닥글의 각 행 내에 있는 텍스트의 수직 정렬 방식을 지정합니다. 이 특성에 사용 가능한 값:
 - `baseline`, 텍스트를 가능한 한 셀의 하단에 가깝게, 하지만 텍스트의 [baseline](https://en.wikipedia.org/wiki/Baseline_%28typography%29) 에 맞춰 배치합니다. 만약 문자들의 크기가 모두 같다면, 이것은 `bottom`과 같은 효과를 가집니다.
 - `bottom`, 텍스트를 가능한 한 셀의 하단에 가깝게 배치합니다.
diff --git a/files/ko/web/html/element/thead/index.md b/files/ko/web/html/element/thead/index.md
index c2eed01941ce02..9a64f49d413ff0 100644
--- a/files/ko/web/html/element/thead/index.md
+++ b/files/ko/web/html/element/thead/index.md
@@ -63,7 +63,7 @@ slug: Web/HTML/Element/thead
 
 ### 더 이상 사용하지 않는 특성
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
 
   - : 아래에 나열된 속성들은 각 셀 컨텐츠의 수평 정렬 방법을 지정합니다. 가능한 값:
 
@@ -80,7 +80,7 @@ slug: Web/HTML/Element/thead
     > - `left`, `center`, `right` 또는 `justify` 값과 같은 효과를 내고 싶다면, CSS {{cssxref("text-align")}} 속성을 적용하세요.
     > - `char` 값과 같은 효과를 내고 싶다면, CSS3에서 {{cssxref("text-align")}} 속성의 값으로 [`char`](/ko/docs/Web/HTML/Element/thead#char)의 값을 사용할 수 있습니다.
 
-- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+- `bgcolor` {{Non-standard_inline}}
 
   - : 이 특성은 열의 각 셀의 배경색을 정의합니다. 앞에 '#'을 붙인 [sRGB](https://www.w3.org/Graphics/Color/sRGB) 6자리 16진수 코드입니다. 미리 정의된 16개의 색상 문자열을 사용할 수도 있습니다.
 
@@ -103,19 +103,19 @@ slug: Web/HTML/Element/thead
 
     > **Note:** 이 특성은 표준이 아니며, Microsoft Internet Explorer의 몇몇 버전에서만 구현되므로 사용하지 마십시오. {{HTMLElement("thead")}} 요소에 스타일을 적용하려면 [CSS](/ko/docs/Web/CSS)를 사용해야 합니다. **bgcolor** 특성과 비슷한 효과를 내고 싶다면, 관련된 {{HTMLElement("td")}} 또는 {{HTMLElement("th")}} 요소에 [CSS](/ko/docs/Web/CSS) {{cssxref("background-color")}} 속성을 사용하세요.
 
-- {{htmlattrdef("char")}} {{deprecated_inline}}
+- `char` {{deprecated_inline}}
 
   - : 이 특성은 열의 셀을 정렬할 문자를 설정하는 데 사용됩니다. 숫자 또는 통화 값을 정렬할 때에는 일반적으로 마침표(.)가 포함됩니다. 만약 [`align`](/ko/docs/Web/HTML/Element/thead#align)이 `char`로 설정되어 있지 않으면, 이 특성은 무시됩니다.
 
     > **Note:** 이 특성은 최신 표준에서는 사용되지 않으며 지원되지 않으므로 사용하지 마십시오. [`char`](/ko/docs/Web/HTML/Element/thead#char)와 같은 효과를 내고 싶다면, CSS3에서 [`char`](/ko/docs/Web/HTML/Element/thead#char) 특성을 {{cssxref("text-align")}} 속성의 값으로 하여 문자 집합을 사용할 수 있습니다.
 
-- {{htmlattrdef("charoff")}} {{deprecated_inline}}
+- `charoff` {{deprecated_inline}}
 
   - : 이 특성은 **char** 특성으로 지정된 정렬 문자에서 열 데이터를 오프셋할 문자의 수를 나타내는 데 사용됩니다.
 
     > **주의:** 이 특성은 최신 표준에서는 사용되지 않으며 지원되지 않으므로 사용하지 마십시오.
 
-- {{htmlattrdef("valign")}} {{deprecated_inline}}
+- `valign` {{deprecated_inline}}
 
   - : 이 특성은 표 머리글의 각 행 내에 있는 텍스트의 수직 정렬 방식을 지정합니다. 이 특성에 사용 가능한 값:
 
diff --git a/files/ko/web/html/element/time/index.md b/files/ko/web/html/element/time/index.md
index 0287f1edd8f8ff..b0248767a36ae8 100644
--- a/files/ko/web/html/element/time/index.md
+++ b/files/ko/web/html/element/time/index.md
@@ -65,7 +65,7 @@ slug: Web/HTML/Element/time
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : 요소의 시간 또는 날짜 값. 아래에서 설명하는 형식 중 하나여야 합니다.
 
 ## 사용 일람
diff --git a/files/ko/web/html/element/track/index.md b/files/ko/web/html/element/track/index.md
index af4f956ca73472..720a561bda52df 100644
--- a/files/ko/web/html/element/track/index.md
+++ b/files/ko/web/html/element/track/index.md
@@ -52,9 +52,9 @@ slug: Web/HTML/Element/track
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("default")}}
+- `default`
   - : 사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 나타냅니다. 하나의 미디어 요소 당 하나의 `<track>` 요소에만 사용할 수 있습니다.
-- {{htmlattrdef("kind")}}
+- `kind`
 
   - : 텍스트 트랙의 종류. 생략할 경우 `subtitles`로 간주합니다. 유효하지 않은 값을 가진 경우 `metadata`로 간주합니다. (Chrome 52 미만에서는 `subtitles`) 가능한 키워드는 다음과 같습니다.
 
@@ -82,11 +82,11 @@ slug: Web/HTML/Element/track
 
       - 트랙을 스크립트가 사용합니다. 사용자에게 보이지 않습니다.
 
-- {{htmlattrdef("label")}}
+- `label`
   - : 사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용합니다.
-- {{htmlattrdef("src")}}
+- `src`
   - : 자막의 주소(`.vtt` 파일). 유효한 {{glossary("URL")}}이어야 합니다. 필수 특성이며, `<track>`의 부모 {{htmlelement("audio")}}/{{htmlelement("video")}} 요소에 [`crossorigin`](/ko/docs/Web/HTML/CORS_settings_attributes) 특성이 없다면 문서와 같은 {{glossary("origin", "출처")}}여야 합니다.
-- {{htmlattrdef("srclang")}}
+- `srclang`
   - : 텍스트 트랙의 언어. 유효한 [IETF 언어 태그](https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8)여야 합니다. `kind` 특성이 `subtitle`인 경우 필수 항목입니다.
 
 ## 사용 일람
diff --git a/files/ko/web/html/element/ul/index.md b/files/ko/web/html/element/ul/index.md
index 867f681d1af2b1..6bd3926abdbed2 100644
--- a/files/ko/web/html/element/ul/index.md
+++ b/files/ko/web/html/element/ul/index.md
@@ -65,13 +65,13 @@ slug: Web/HTML/Element/ul
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)만 포함합니다.
 
-- {{ htmlattrdef("compact") }} {{Deprecated_inline}}
+- `compact` {{Deprecated_inline}}
 
   - : This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the {{glossary("user agent")}}, and it doesn't work in all browsers.
 
     > **Warning:** Do not use this attribute, as it has been deprecated: use [CSS](/ko/docs/CSS) instead. To give a similar effect as the `compact` attribute, the CSS property {{cssxref("line-height")}} can be used with a value of `80%`.
 
-- {{ htmlattrdef("type") }} {{Deprecated_inline}}
+- `type` {{Deprecated_inline}}
 
   - : This attribute sets the bullet style for the list. The values defined under [HTML3.2](/ko/docs/HTML3.2) and the transitional version of [HTML 4.0/4.01](/ko/docs/HTML4.01) are:
 
diff --git a/files/ko/web/html/element/video/index.md b/files/ko/web/html/element/video/index.md
index e2f37339a656a0..35137b15a593fe 100644
--- a/files/ko/web/html/element/video/index.md
+++ b/files/ko/web/html/element/video/index.md
@@ -17,14 +17,14 @@ slug: Web/HTML/Element/video
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다.
 
-- {{htmlattrdef("autoplay")}}
+- `autoplay`
   - : 부울 속성(boolean); 해당 속성이 지정된 경우 비디오가 데이터 로드를 완료하기 위해 중지하지 않고 재생할 수 있는 가장 빠른 시점에 재생되기 시작합니다.
     autoplay를 비활성화시킬 때 autoplay="false"는 동작하지 않습니다. `<video>`태그 내부에 autoplay 속성이 존재한다면 비디오가 자동재생 됩니다. autoplay를 비활성화하려면 해당 속성을 완전히 제거해야 합니다.
-- {{htmlattrdef("buffered")}}
+- `buffered`
   - : 미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 {{domxref("TimeRanges")}} 객체를 포함합니다.
-- {{htmlattrdef("controls")}}
+- `controls`
   - : 이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
 
   - : crossorigin 속성은 CORS를 사용해서 관련 이미지를 패치해야 하는지 여부를 나타냅니다. [CORS-enabled resources](/ko/docs/CORS_Enabled_Image) 는 {{HTMLElement("canvas")}} 요소에서 재사용 될 수 있으며 오염되지 않습니다. 허용되는 값은 다음과 같습니다:
 
@@ -35,15 +35,15 @@ slug: Web/HTML/Element/video
 
     crossorigin이 존재하지 않는 경우, CORS 요청 없이 (즉, `Origin:` HTTP 헤더를 사용 보내지 않고), 리소스를 가져와 {{HTMLElement('canvas')}} 요소에 오염되는 것을 방지합니다. 값을 설정하지 않을 경우 **anonymous**가 사용 됩니다. 추가 정보는 [CORS settings attributes](/ko/docs/HTML/CORS_settings_attributes) 를 참조하십시오.
 
-- {{htmlattrdef("height")}}
+- `height`
   - : 비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.
-- {{htmlattrdef("loop")}}
+- `loop`
   - : 부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.
-- {{htmlattrdef("muted")}}
+- `muted`
   - : 비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.
-- {{htmlattrdef("played")}}
+- `played`
   - : 재생된 동영상 영역을 나타내는 {{domxref("TimeRanges")}} 객체 입니다.
-- {{htmlattrdef("preload")}}
+- `preload`
 
   - : 이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다:
 
@@ -58,11 +58,11 @@ slug: Web/HTML/Element/video
     >
     > - 브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.
 
-- {{htmlattrdef("poster")}}
+- `poster`
   - : 사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.
-- {{htmlattrdef("src")}}
+- `src`
   - : 삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 {{HTMLElement("source")}} 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.
-- {{htmlattrdef("width")}}
+- `width`
   - : 비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.
 
 ## 이벤트
diff --git a/files/ko/web/html/global_attributes/contextmenu/index.md b/files/ko/web/html/global_attributes/contextmenu/index.md
index 22703320f77bf3..ee62d029068cbe 100644
--- a/files/ko/web/html/global_attributes/contextmenu/index.md
+++ b/files/ko/web/html/global_attributes/contextmenu/index.md
@@ -5,7 +5,7 @@ slug: Web/HTML/Global_attributes/contextmenu
 
 {{HTMLSidebar("Global_attributes")}}
 
-> **경고:** [contextmenu 특성은 폐기되었으며](https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu), 모든 브라우저에서 제거될 것입니다.
+> **경고:** [contextmenu 특성은 폐기되었으며](https://html.spec.whatwg.org/multipage/obsolete.html#contextmenu), 모든 브라우저에서 제거될 것입니다.
 
 **`contextmenu`** [전역 특성](/ko/docs/Web/HTML/Global_attributes)은 이 요소의 컨텍스트 메뉴로 사용될 {{HTMLElement("menu")}}의 [`id`](/ko/docs/Web/HTML/Global_attributes/id)입니다.
 
diff --git a/files/ko/web/html/global_attributes/index.md b/files/ko/web/html/global_attributes/index.md
index 9c683278e23337..d0702b0ba5fb45 100644
--- a/files/ko/web/html/global_attributes/index.md
+++ b/files/ko/web/html/global_attributes/index.md
@@ -11,20 +11,16 @@ slug: Web/HTML/Global_attributes
 
 기본 HTML 전역 특성 외에 아래와 같은 전역 특성도 존재합니다.
 
-- {{htmlattrdef("xml:lang")}}과 {{htmlattrdef("xml:base")}}는 XHTML 명세에서 상속받은 것으로 더 사용하지 않지만, 호환성 유지를 위해 아직 존재합니다.
-- 여러 개의&#x20;
-
-  **[aria-\*](/ko/docs/Web/Accessibility/ARIA)`**
-
-  &#x20;특성은 접근성 향상을 위해 사용됩니다.
+- `xml:lang`과 `xml:base`는 XHTML 명세에서 상속받은 것으로 더 사용하지 않지만, 호환성 유지를 위해 아직 존재합니다.
+- 여러 개의 **[`aria-\*`](/ko/docs/Web/Accessibility/ARIA)** 특성은 접근성 향상을 위해 사용됩니다.
 
 - [이벤트 처리기](/ko/docs/Web/Guide/Events/Event_handlers) 특성: **`onabort`**, **`onautocomplete`**, **`onautocompleteerror`**, **`onblur`**, **`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncontextmenu`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onsort`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**.
 
 ## 전역 특성 목록
 
-- [{{htmlattrdef("accesskey")}}](/ko/docs/Web/HTML/Global_attributes/accesskey)
+- [`accesskey`](/ko/docs/Web/HTML/Global_attributes/accesskey)
   - : 현재 요소에 대한 키보드 단축키 생성을 위한 힌트를 제공합니다. 이 특성은 공백으로 구분한 문자 목록으로 구성됩니다. 브라우저는 주어진 여러 개의 값 중 장치의 키보드 레이아웃에 존재하는 첫 번째 키를 사용해야 합니다.
-- [{{htmlattrdef("autocapitalize")}}](/ko/docs/Web/HTML/Global_attributes/autocapitalize)
+- [`autocapitalize`](/ko/docs/Web/HTML/Global_attributes/autocapitalize)
 
   - : 사용자가 입력 또는 수정하는 텍스트를 자동으로 대문자로 변환할지 여부와 변환하는 방법을 제어합니다. 다음과 같은 값이 가능합니다.
 
@@ -33,60 +29,60 @@ slug: Web/HTML/Global_attributes
     - `words`, 각 단어의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자
     - `characters`, 모든 글자의 기본값이 대문자
 
-- [{{htmlattrdef("class")}}](/ko/docs/Web/HTML/Global_attributes/class)
+- [`class`](/ko/docs/Web/HTML/Global_attributes/class)
   - : 공백으로 구분된 해당 요소의 클래스의 목록입니다. 클래스를 이용하면 CSS나 JavaScript에서 [클래스 선택자](/ko/docs/Web/CSS/Class_selectors)나 {{domxref("Document.getElementsByClassName()")}}과 같은 메서드를 이용해 특정 요소를 선택하거나 접근할 수 있습니다.
-- [{{htmlattrdef("contenteditable")}}](/ko/docs/Web/HTML/Global_attributes/contenteditable)
+- [`contenteditable`](/ko/docs/Web/HTML/Global_attributes/contenteditable)
   - : 해당 요소를 사용자가 편집할 수 있는지를 나타내는 열거형 특성입니다. 편집 가능한 경우에 브라우저는 편집을 허용하도록 위젯을 수정합니다.
-- [{{htmlattrdef("data-*")}}](/ko/docs/Web/HTML/Global_attributes/data-*)
+- [`data-*`](/ko/docs/Web/HTML/Global_attributes/data-*)
   - : 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 [HTML](/ko/docs/Web/HTML)과 [DOM](/ko/docs/Web/API/Document_Object_Model) 사이에서 교환할 수 있는 방법을 제공합니다.
-- [{{htmlattrdef("dir")}}](/ko/docs/Web/HTML/Global_attributes/dir)
+- [`dir`](/ko/docs/Web/HTML/Global_attributes/dir)
   - : 요소의 쓰기 방향을 나타내는 열거형 특성입니다.
-- [{{htmlattrdef("draggable")}}](/ko/docs/Web/HTML/Global_attributes/draggable)
+- [`draggable`](/ko/docs/Web/HTML/Global_attributes/draggable)
   - : [Drag and Drop API](/ko/docs/Web/API/HTML_드래그_앤_드롭_API)를 사용해 요소를 드래그할 수 있는지 나타내는 열거형 특성입니다.
-- [{{htmlattrdef("exportparts")}}](/ko/docs/Web/HTML/Global_attributes/exportparts) {{experimental_inline}}
+- [`exportparts`](/ko/docs/Web/HTML/Global_attributes/exportparts) {{experimental_inline}}
   - : 중첩 섀도우 트리에서 섀도우 파트를 전이적으로 라이트 파트에 내보낼 때 사용합니다.
-- [{{htmlattrdef("hidden")}}](/ko/docs/Web/HTML/Global_attributes/hidden)
+- [`hidden`](/ko/docs/Web/HTML/Global_attributes/hidden)
   - : 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다. 브라우저는 `hidden` 특성을 가진 요소를 렌더링 하지 않습니다.
-- [{{htmlattrdef("id")}}](/ko/docs/Web/HTML/Global_attributes/id)
+- [`id`](/ko/docs/Web/HTML/Global_attributes/id)
   - : 문서 전체에서 유일해야 하는 고유 식별자(ID)를 정의합니다. (프래그먼트 식별자를 사용한) 링크, 스크립트, 스타일 적용 시 요소를 식별할 때 사용합니다.
-- [{{htmlattrdef("inputmode")}}](/ko/docs/Web/HTML/Global_attributes/inputmode)
+- [`inputmode`](/ko/docs/Web/HTML/Global_attributes/inputmode)
   - : 사용자가 요소나 요소의 콘텐츠를 편집할 때, 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다. 주로 {{htmlelement("input")}} 요소에 사용하지만, [`contenteditable`](/ko/docs/Web/HTML/Global_attributes#contenteditable) 특성을 가진 요소라면 종류 불문하고 사용할 수 있습니다.
-- [{{htmlattrdef("is")}}](/ko/docs/Web/HTML/Global_attributes/is)
+- [`is`](/ko/docs/Web/HTML/Global_attributes/is)
   - : 표준 HTML 요소가 사용자 정의 기본 요소처럼 동작하도록 지정합니다. (자세한 내용은 [사용자 정의 요소 사용하기](/ko/docs/Web/Web_Components/Using_custom_elements)를 참고하세요[)](/ko/docs/Web/Web_Components/Using_custom_elements)
 
 > **참고:**`item*` 특성은 [WHATWG HTML Microdata feature](https://html.spec.whatwg.org/multipage/microdata.html#microdata)의 일부입니다.
 
-- [{{htmlattrdef("itemid")}}](/ko/docs/Web/HTML/Global_attributes/itemid)
+- [`itemid`](/ko/docs/Web/HTML/Global_attributes/itemid)
   - : 아이템의 고유하고 전역적인 식별자입니다.
-- [{{htmlattrdef("itemprop")}}](/ko/docs/Web/HTML/Global_attributes/itemprop)
+- [`itemprop`](/ko/docs/Web/HTML/Global_attributes/itemprop)
   - : 아이템에 특성(properties)을 추가할 때 사용합니다. 모든 HTML 요소에는 이름과 값의 쌍으로 구성된 `itemprop` 특성을 명시할 수 있습니다.
-- [{{htmlattrdef("itemref")}}](/ko/docs/Web/HTML/Global_attributes/itemref)
+- [`itemref`](/ko/docs/Web/HTML/Global_attributes/itemref)
   - : `itemscope` 특성을 가진 요소에 속하지 않는 특성들(properties)은 `itemref`를 사용하여 item에 연결할 수 있습니다. 여기에는 문서 내의 다른 위치에 있는 추가적인 특성을 갖는 요소 id(`itemid`s 가 아닌)목록이 제공됩니다.
-- [{{htmlattrdef("itemscope")}}](/ko/docs/Web/HTML/Global_attributes/itemscope)
+- [`itemscope`](/ko/docs/Web/HTML/Global_attributes/itemscope)
   - : `itemscope`은 (일반적으로) [`itemtype`](/ko/docs/Web/HTML/Global_attributes#itemtype)과 같이 사용하여 블록에 포함된 HTML이 특정 item에 대한 것임을 나타냅니다. `itemscope`은 item을 생성하고 그 item에 연결된 `itemtype`의 범위를 정의합니다. `itemtype`은 item과 특성 컨텍스트를 설명하는 ([schema.org](https://schema.org/)와 같은) 어휘(vocabulary)에 대한 유효한 URL입니다.
-- [{{htmlattrdef("itemtype")}}](/ko/docs/Web/HTML/Global_attributes/itemtype)
+- [`itemtype`](/ko/docs/Web/HTML/Global_attributes/itemtype)
   - : 데이터 구조에서 `itemprop`s (item properties)을 정의하는 데 사용할 단어의 URL을 지정합니다. [`itemscope`](/ko/docs/Web/HTML/Global_attributes/itemscope)은 데이터 구조 내에서 `itemtype`에 의해 설정된 어휘가 활성화되는 범위를 설정하는 데 사용됩니다.
-- [{{htmlattrdef("lang")}}](/ko/docs/Web/HTML/Global_attributes/lang)
-  - : 요소의 언어를 정의하는데 도움을 줍니다: 편집할 수 없는 요소가 있는 언어 또는 사용자가 요소를 편집할 수 있는 언어를 정의하는 데 도움이 됩니다(the language that non-editable elements are in, or the language that editable elements should be written in by the user). 이 특성은 언어 식별 태그([_Tags for Identifying Languages (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt))에 정의된 형식의 하나의 "언어 태그"(하이픈으로 구분된 "언어 하위 태그(language subtags)"로 구성된)를 포함합니다. [**xml:lang**](#attr-xml:lang)은 이보다 우선합니다.
-- [{{htmlattrdef("part")}}](/ko/docs/Web/HTML/Global_attributes/part)
+- [`lang`](/ko/docs/Web/HTML/Global_attributes/lang)
+  - : 요소의 언어를 정의하는데 도움을 줍니다: 편집할 수 없는 요소가 있는 언어 또는 사용자가 요소를 편집할 수 있는 언어를 정의하는 데 도움이 됩니다(the language that non-editable elements are in, or the language that editable elements should be written in by the user). 이 특성은 언어 식별 태그([_Tags for Identifying Languages (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt))에 정의된 형식의 하나의 "언어 태그"(하이픈으로 구분된 "언어 하위 태그(language subtags)"로 구성된)를 포함합니다. `xml:lang` 은 이보다 우선합니다.
+- [`part`](/ko/docs/Web/HTML/Global_attributes/part)
   - : A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part")}} pseudo-element.
-- [{{htmlattrdef("slot")}}](/ko/docs/Web/HTML/Global_attributes/slot)
+- [`slot`](/ko/docs/Web/HTML/Global_attributes/slot)
   - : 요소에 [shadow DOM](/ko/docs/Web/Web_Components/Shadow_DOM)의 shadow tree에 있는 슬롯을 할당합니다: `slot` 특성을 가진 요소는 [`name`](/ko/docs/Web/HTML/Element/slot#name) 특성의 값이 해당 `slot` 특성의 값과 일치하는 {HTMLElement("slot")}} 요소가 생성한 슬롯에 할당됩니다.
-- [{{htmlattrdef("spellcheck")}}](/ko/docs/Web/HTML/Global_attributes/spellcheck)
+- [`spellcheck`](/ko/docs/Web/HTML/Global_attributes/spellcheck)
   - : 요소의 맞춤법 검사 여부를 지정합니다.
-- [{{htmlattrdef("style")}}](/ko/docs/Web/HTML/Global_attributes/style)
+- [`style`](/ko/docs/Web/HTML/Global_attributes/style)
   - : 요소에 적용할 [CSS](/ko/docs/Web/CSS) 스타일 선언을 담습니다. 단, 스타일은 별도 파일에 정의하는 것이 추천하는 방식임을 유의하세요. 이 특성과 {{HTMLElement("style")}} 요소는 테스트 등을 위한 빠른 스타일링이 주 용도입니다.
-- [{{htmlattrdef("tabindex")}}](/ko/docs/Web/HTML/Global_attributes/tabindex)
+- [`tabindex`](/ko/docs/Web/HTML/Global_attributes/tabindex)
 
   - : An integer attribute indicating if the element can take input focus (is _focusable_), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:
 
     - a _negative value_ means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
     - `0` means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
-    - a _positive value_ means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the [**tabindex**](#attr-tabindex). If several elements share the same tabindex, their relative order follows their relative positions in the document.
+    - a _positive value_ means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the [**tabindex**](#tabindex). If several elements share the same tabindex, their relative order follows their relative positions in the document.
 
-- [{{htmlattrdef("title")}}](/ko/docs/Web/HTML/Global_attributes/title)
+- [`title`](/ko/docs/Web/HTML/Global_attributes/title)
   - : 요소에 대한 추가 정보를 제공하는 텍스트입니다. 사용자에게는 보통 툴팁으로서 보여집니다.
-- [{{htmlattrdef("translate")}}](/ko/docs/Web/HTML/Global_attributes/translate) {{experimental_inline}}
+- [`translate`](/ko/docs/Web/HTML/Global_attributes/translate) {{experimental_inline}}
   - : 페이지를 지역화할 때 요소의 {{domxref("Text")}} 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타냅니다.
 
 ## 명세

From e9c8b0e2f5ccaa62d651e86fa33f46e91c2f76ed Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Thu, 21 Sep 2023 08:56:45 +0800
Subject: [PATCH 057/268] [zh-cn]: update the translation of Number.MAX_VALUE
 and Number.MIN_VALUE (#15958)

---
 .../global_objects/number/max_value/index.md  | 23 +++++++++++-------
 .../global_objects/number/min_value/index.md  | 24 +++++++++++--------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/max_value/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/max_value/index.md
index d9ea2c1de2dfdb..c6e2ea3fb74cd9 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/max_value/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/max_value/index.md
@@ -3,25 +3,29 @@ title: Number.MAX_VALUE
 slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+**`Number.MIN_VALUE`** 静态数据属性表示在 JavaScript 中可表示的最大数值。
 
-**`Number.MAX_VALUE`** 属性表示在 JavaScript 里所能表示的最大数值。
+{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}
 
-{{js_property_attributes(0,0,0)}}
+## 值
+
+2<sup>1024</sup> - 1，或大约 `1.7976931348623157E+308`。
+
+{{js_property_attributes(0, 0, 0)}}
 
 ## 描述
 
-`MAX_VALUE` 属性值接近于 `1.79E+308`。大于 `MAX_VALUE` 的值代表 "`Infinity`"。
+大于 `MAX_VALUE` 的值表示为 {{jsxref("Infinity")}} 并将丢失其实际值。
 
-因为 `MAX_VALUE` 是 `Number` 对象的一个静态属性，所以你应该直接使用`Number.MAX_VALUE` ，而不是作为一个创建的 `Number` 实例的属性。
+由于 `MAX_VALUE` 是 `Number` 对象的静态属性，你应该始终将其用作 `Number.MAX_VALUE`，而不是作为一个数字值的属性。
 
 ## 示例
 
-### 示例：使用 `MAX_VALUE`
+### 使用 MAX_VALUE
 
-下面的代码求两个数值的乘积。如果结果小于等于 `MAX_VALUE`，则调用 `func1` 函数；否则，调用 `func2` 函数。
+下面的代码对两个数值进行乘法运算。如果结果小于或等于 `MAX_VALUE`，则调用函数 `func1`；否则，调用函数 `func2`。
 
 ```js
 if (num1 * num2 <= Number.MAX_VALUE) {
@@ -39,6 +43,7 @@ if (num1 * num2 <= Number.MAX_VALUE) {
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.MIN_VALUE")}}
+- {{jsxref("Number")}}
diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/min_value/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/min_value/index.md
index 2df4badabe21f7..800d03d3e69698 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/min_value/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/min_value/index.md
@@ -3,27 +3,31 @@ title: Number.MIN_VALUE
 slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+**`Number.MIN_VALUE`** 静态数据属性表示在 JavaScript 中可表示的最小正数值。
 
-**`Number.MIN_VALUE`** 属性表示在 JavaScript 中所能表示的最小的正值。
+{{EmbedInteractiveExample("pages/js/number-min-value.html")}}
 
-{{js_property_attributes(0,0,0)}}
+## 值
+
+2<sup>-1074</sup>，或 `5E-324`。
+
+{{js_property_attributes(0, 0, 0)}}
 
 ## 描述
 
-`MIN_VALUE` 属性是 JavaScript 里最接近 0 的正值，而不是最小的负值。
+`Number.MIN_VALUE` 是能够在浮点精度范围内表示的最小正数（不是最小负数），换句话说，它是最接近 0 的数。ECMAScript 规范并没有定义引擎实现必须支持的精确值，而是规定：_“必须是实现实际上可以表示的最小非零正值”_。这是因为小的 IEEE-754 浮点数是[非正规数](https://en.wikipedia.org/wiki/Subnormal_number)，但是实现并不要求支持这种表示方式，这种情况下 `Number.MIN_VALUE` 可能会更大。
 
-`MIN_VALUE` 的值约为 5e-324。小于 `MIN_VALUE` ("underflow values") 的值将会转换为 0。
+在实践中，在主流引擎（如 Chrome、Edge、Node.js 使用的 V8 引擎，Firefox 使用的 SpiderMonkey 引擎，以及 Safari 使用的 JavaScriptCore 引擎）中，`Number.MIN_VALUE` 的精确值为 2<sup>-1074</sup>，即 `5E-324`。
 
-因为 `MIN_VALUE` 是 `Number` 的一个静态属性，因此应该直接使用： `Number.MIN_VALUE，` 而不是作为一个创建的 `Number` 实例的属性。
+由于 `MIN_VALUE` 是 `Number` 对象的静态属性，你应该始终将其用作 `Number.MIN_VALUE`，而不是作为一个数字值的属性。
 
 ## 示例
 
-### 示例：使用 `MIN_VALUE`
+### 使用 MIN_VALUE
 
-下面的代码里两个数值相除。如果结果大于或等于 `MIN_VALUE`，则调用 `func1` 函数；否则，调用 `func2` 函数。
+下面的代码对两个数值进行除法运算。如果结果大于或等于 `MIN_VALUE`，则调用函数 `func1`；否则，调用函数 `func2`。
 
 ```js
 if (num1 / num2 >= Number.MIN_VALUE) {
@@ -41,6 +45,6 @@ if (num1 / num2 >= Number.MIN_VALUE) {
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.MAX_VALUE")}}

From e295d2a04a823d4e7e5d411ce31451eb130b5383 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Thu, 21 Sep 2023 11:22:13 +0900
Subject: [PATCH 058/268] [ko]: add index.md for `web/glossary/code_point`
 (#15829)

[revise]: revise feedback
---
 files/ko/glossary/code_point/index.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 files/ko/glossary/code_point/index.md

diff --git a/files/ko/glossary/code_point/index.md b/files/ko/glossary/code_point/index.md
new file mode 100644
index 00000000000000..8334742e868ad0
--- /dev/null
+++ b/files/ko/glossary/code_point/index.md
@@ -0,0 +1,16 @@
+---
+title: 코드 포인트 (Code point)
+slug: Glossary/Code_point
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**코드 포인트 (code point)**는 텍스트를 표현하기 위한 시스템(예, 유니코드)에서 추상 문자를 나타내기 위해 할당된 숫자입니다. 유니코드에서, 코드 포인트는 "U+1234" 형식으로 표현됩니다. 여기서 "1234"는 할당된 숫자입니다. 예를 들어, 문자 "A"에는 U+0041이라는 코드 포인트가 할당됩니다.
+
+UTF-8 및 UTF-16과 같은 문자 인코딩 형식은 유니코드 코드 포인트를 연속된 바이트로 인코딩하는 방법을 결정합니다. 다른 인코딩 형식은 동일한 코드 포인트를 다른 연속된 바이트로 인코딩할 수 있습니다. 예를 들어, 코드 포인트가 U+0424인 키릴 문자 "Ф"는 UTF-8에서는 `0xd0a4`로, UTF-16에서는 `0x0424`로 인코딩됩니다.
+
+## 같이 보기
+
+- [유니코드 표준: 코드 포인트와 문자](https://www.unicode.org/versions/Unicode14.0.0/ch02.pdf#G25564)

From 4da62ad7cb5301386363ac428ad5a9954429dc68 Mon Sep 17 00:00:00 2001
From: Shane <shanewestlife@outlook.com>
Date: Thu, 21 Sep 2023 10:41:21 +0800
Subject: [PATCH 059/268] zh-cn: fix link error (#15967)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/web/performance/lazy_loading/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/performance/lazy_loading/index.md b/files/zh-cn/web/performance/lazy_loading/index.md
index ffc4d294249b38..70614e0e3815fd 100644
--- a/files/zh-cn/web/performance/lazy_loading/index.md
+++ b/files/zh-cn/web/performance/lazy_loading/index.md
@@ -60,7 +60,7 @@ JavaScript、CSS 和 HTML 可以被分割成较小的代码块。这样就可以
 
 #### Loading 属性
 
-{{HTMLElement("img")}} 元素上的 [`loading`](/zh-CN/docs/Web/HTML/Element/iframe#loading) 属性（或 {{HTMLElement("iframe")}} 上的 [`loading`](/zh-CN/docs/Web/Element/iframe#loading) 属性）可用于指示浏览器推迟加载屏幕外的图像/iframe，直到用户滚动到其附近。
+{{HTMLElement("img")}} 元素上的 [`loading`](/zh-CN/docs/Web/HTML/Element/img#loading) 属性（或 {{HTMLElement("iframe")}} 上的 [`loading`](/zh-CN/docs/Web/HTML/Element/iframe#loading) 属性）可用于指示浏览器推迟加载屏幕外的图像/iframe，直到用户滚动到其附近。
 
 ```html
 <img src="image.jpg" alt="..." loading="lazy" />

From 2d03e08db144a90c872180929a157b0625008e73 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Thu, 21 Sep 2023 11:47:14 +0900
Subject: [PATCH 060/268] [ko]: add files in
 `web/http/basics_of_http/resource_urls` (#15727)

[revise]: revise feedback
---
 .../basics_of_http/resource_urls/index.md     | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 files/ko/web/http/basics_of_http/resource_urls/index.md

diff --git a/files/ko/web/http/basics_of_http/resource_urls/index.md b/files/ko/web/http/basics_of_http/resource_urls/index.md
new file mode 100644
index 00000000000000..d82daa6e1c1189
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/resource_urls/index.md
@@ -0,0 +1,76 @@
+---
+title: Resource URLs
+slug: Web/HTTP/Basics_of_HTTP/Resource_URLs
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+---
+
+{{HTTPSidebar}}{{non-standard_header}}
+
+`resource:` 스키마가 앞에 붙은 URL은 리소스 URL은 Firefox 및 Firefox 브라우저 확장 프로그램에서 내부적으로 리소스를 로드하는 데 사용되지만, 일부 정보는 브라우저가 연결하는 사이트에서도 사용할 수 있습니다.
+
+## 구문
+
+리소스 URL은 접두사 (`resource:`)와 로드하려는 리소스를 가리키는 URL의 두 부분으로 구성됩니다.
+
+```url
+resource://<url>
+```
+
+예를 들어,
+
+```url
+resource://gre/res/svg.css
+```
+
+리소스 URL('->')에 화살표가 있으면, 첫 번째 파일이 다음 파일을 로드했음을 의미합니다.
+
+```url
+resource://<File-loader> -> <File-loaded>
+```
+
+자세한 내용은 [웹에서 리소스 식별](/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web)을 참조하세요.
+
+이 글에서는, 내장 리소스를 가리키기 위해 Firefox에서 내부적으로 사용되는 리소스 URI에 중점을 둡니다.
+
+## 위협
+
+`resource:` URL을 통해 공유된 정보 중 일부는 다음에서 사용할 있기 때문입니다. 웹사이트, 웹페에지는 내부 스크립트를 실행하고 심각한 보안 및 개인정보 보호 문제가 될 수 있는, 기본 환경 설정을 포함하여 Firefox의 내부 리소스를 검사할 수 있습니다.
+
+예를 들어, [Browserleaks의 스크립트](https://browserleaks.com/firefox)는 사이트에서 실행할 수 있는 간단한 스크립트로 조회할 때 Firefox가 공개하는 내용을 강조합니다(<https://browserleaks.com/firefox#more>에서 코드를 찾을 수 있습니다).
+
+firefox.js 파일은 기본 설정된 이름과 값을 pref() 함수에 전달합니다. 예를 들어,
+
+```url
+http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/browser/app/profile/firefox.js#575
+```
+
+웹사이트는 이 `pref()` 함수를 재정의하고 `resource:///defaults/preferences/firefox.js` 스크립트를 사용하여 Firefox 기본 환경 설정을 쉽게 수집할 수 있습니다.
+
+또한, 기본 설정의 일부 기본값은 플랫폼 및 로케일 등 웹사이트가 이러한 정보들을 사용하여 개별 사용자를 식별할 수 있는 정보를 기반으로 빌드 구성마다 다릅니다.
+
+## 해결책
+
+이 문제를 해결하기 위해, Mozilla 리소스 로드 동작을 변경했습니다. [Firefox 버그 863246](https://bugzil.la/863246)의 URI는 [Firefox 57 (Quantum)](/ko/docs/Mozilla/Firefox/Releases/57)에 포함되었습니다.
+
+과거에는 웹 콘텐츠가 원하는 `resource:` URI가 무엇이든, 즉 Firefox의 내부 리소스뿐만 아니라 확장 프로그램의 자산에도 접근할 수 있었습니다. 이제 이 행위는 기본적으로 금지되어 있습니다.
+
+그러나 Firefox가 웹 콘텐츠의 리소스를 로드하는 것은 여전히 특정 상황에서는 필요한 부분입니다. 예를 들어, 소스 보기 페이지(View Page Source 또는 View Selection Source)를 열었을 때, `resource:` URI를 통해 `viewsource.css`가 필요하다는 것을 알 수 있습니다. 웹 콘텐츠에 노출되어야 하는 리소스에는 격리되어 있으며 민감하지 않은 리소스만 포함되어 있는 `resource://content-accessible/`이라는 새 위치로 이동되었습니다. 이러한 방법으로 우리는 필수적인 것을 유지할 수 있고, 리소스가 노출되어 대부분의 위협이 없어지게 되었습니다.
+
+> **참고:** 웹 및 확장 프로그램 개발자는 더 이상 리소스 URL을 시도하지 않는 것이 좋습니다.
+> 그들의 사용법은 기껏해야 해키였습니다.
+> 대부분의 사용법은 작동하지 않습니다.
+
+## 명세서
+
+리소스: 어떤 명세에도 아직 아무것도 정의되지 않았습니다.
+
+## 브라우저 호환성
+
+리소스: 오직 Firefox만 지원합니다.
+
+## 같이 보기
+
+- [Web에서 리소스를 식별하기](/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web)
+- [URL이란 무엇인가?](/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
+- [IANA URI 체계 목록](https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml) (`resource:`은 [이곳에서 다룹니다](https://www.iana.org/assignments/uri-schemes/prov/resource))

From 41bceef5784ae47af2d0b0957013d8f4ff6acc8d Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Thu, 21 Sep 2023 11:50:27 +0900
Subject: [PATCH 061/268] [ko]: add index.md in `web/glossary/challenge`
 (#15735)

[revise]: revise feedback
---
 files/ko/glossary/challenge/index.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 files/ko/glossary/challenge/index.md

diff --git a/files/ko/glossary/challenge/index.md b/files/ko/glossary/challenge/index.md
new file mode 100644
index 00000000000000..faef150e10ec7a
--- /dev/null
+++ b/files/ko/glossary/challenge/index.md
@@ -0,0 +1,16 @@
+---
+title: 시도-응답 인증 (Challenge-response authentication)
+slug: Glossary/Challenge
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+보안 프로토콜에서, '시도(challenge)'은 매번 다른 응답을 생성하기 위해 서버가 클라이언트에 전송하는 일부 데이터입니다. 시도-응답 프로토콜은 공격자가 이전 메시지를 듣고 나중에 다시 보내 원본 메시지와 동일한 자격 증명을 얻는 {{glossary("replay attack", "재전송 공격")}}에 맞서 싸우는 한가지 방법입니다.
+
+[HTTP 인증 프로토콜](/ko/docs/Web/HTTP/Authentication)는 시도-응답 기반이지만, "Basic" 프로토콜은 실제 시도를 사용하지 않습니다(영역은 항상 동일함).
+
+## 같이 보기
+
+- 위키 백과의 [시도-응답 인증](https://en.wikipedia.org/wiki/Challenge%E2%80%93response_authentication)

From a55870e2952f3e3803d0ce021d5e310262bc5f64 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Thu, 21 Sep 2023 11:56:39 +0800
Subject: [PATCH 062/268] [zh-cn]: update response.url (#14923)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 files/zh-cn/web/api/response/url/index.md | 48 +++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 files/zh-cn/web/api/response/url/index.md

diff --git a/files/zh-cn/web/api/response/url/index.md b/files/zh-cn/web/api/response/url/index.md
new file mode 100644
index 00000000000000..3c70ed241d171e
--- /dev/null
+++ b/files/zh-cn/web/api/response/url/index.md
@@ -0,0 +1,48 @@
+---
+title: Response：url 属性
+slug: Web/API/Response/url
+---
+
+{{APIRef("Fetch API")}}
+
+{{domxref("Response")}} 接口的只读属性 **`url`** 包含了响应的 URL 地址。`url` 属性值为经过重定向后最终获得的 URL 地址。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+在 [Fetch Response 示例](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-response) 中（请参见 [Fetch Response 实时演示](https://mdn.github.io/dom-examples/fetch/fetch-response/)），我们使用 {{domxref("Request.Request", "Request()")}} 构造函数创建了一个新的 {{domxref("Request")}} 对象，并向其传递了 JPG 的路径。然后，我们使用 {{domxref("fetch()")}} 获取该请求，使用 {{domxref("Response.blob")}} 从响应中提取一个 blob，使用 {{domxref("URL.createObjectURL")}} 从中创建一个对象 URL，并将其显示在 {{htmlelement("img")}} 中。
+
+请注意，在 `fetch()` 块的顶部，我们会将响应 `URL` 记录到控制台。
+
+```js
+const myImage = document.querySelector("img");
+
+const myRequest = new Request("flowers.jpg");
+
+fetch(myRequest)
+  .then((response) => {
+    console.log("response.url =", response.url); // response.url = https://mdn.github.io/dom-examples/fetch/fetch-response/flowers.jpg
+    return response.blob();
+  })
+  .then((myBlob) => {
+    const objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [ServiceWorker API](/zh-CN/docs/Web/API/Service_Worker_API)
+- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS)
+- [HTTP](/zh-CN/docs/Web/HTTP)

From 335c276b8a21cbe335e7d6169662b7dfedd64cbf Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Thu, 21 Sep 2023 15:58:16 +0800
Subject: [PATCH 063/268] [zh-cn]: update the translation of
 Number.POSITIVE_INFINITY/NEGATIVE_INFINITY (#15983)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../number/negative_infinity/index.md         | 49 +++++++++--------
 .../number/positive_infinity/index.md         | 52 +++++++++++--------
 2 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/negative_infinity/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/negative_infinity/index.md
index 9094e97bc9ccd2..3900d629d47eec 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/negative_infinity/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/negative_infinity/index.md
@@ -3,41 +3,47 @@ title: Number.NEGATIVE_INFINITY
 slug: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+**`Number.NEGATIVE_INFINITY`** 静态数据属性表示负无穷值。
 
-**`Number.NEGATIVE_INFINITY`** 属性表示负无穷大。
+{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}
 
-不用创建一个 {{jsxref("Global_Objects/Number", "Number")}} 实例，使用 `Number.NEGATIVE_INFINITY` 来访问该静态属性。
+## 值
 
-{{js_property_attributes(0,0,0)}}
+与全局属性 {{jsxref("Infinity")}} 的负值相同。
+
+{{js_property_attributes(0, 0, 0)}}
 
 ## 描述
 
-`Number.NEGATIVE_INFINITY` 的值和全局对象的 {{jsxref("Global_Objects/Infinity", "Infinity")}} 属性的负值相同。
+`Number.NEGATIVE_INFINITY` 的表现同数学上的无穷大略有不同：
 
-该值的行为同数学上的无穷大（infinity）有一点儿不同：
+- 任何正值，包括 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}，乘以 `NEGATIVE_INFINITY` 等于 `NEGATIVE_INFINITY`。
+- 任何负值，包括 `NEGATIVE_INFINITY`，乘以 `POSITIVE_INFINITY` 等于 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}。
+- 任何正值除以 `NEGATIVE_INFINITY` 都是[负零](https://zh.wikipedia.org/wiki/−0)（正如 [IEEE 754](https://zh.wikipedia.org/wiki/IEEE_754) 中所定义的）。
+- 任何负值除以 `NEGATIVE_INFINITY` 都是[正零](https://zh.wikipedia.org/wiki/0)（正如 [IEEE 754](https://zh.wikipedia.org/wiki/IEEE_754) 中所定义的）。
+- 零除以 `NEGATIVE_INFINITY` 等于 {{jsxref("NaN")}}。
+- {{jsxref("NaN")}} 乘以 `NEGATIVE_INFINITY` 等于 {{jsxref("NaN")}}。
+- `NEGATIVE_INFINITY`，除以任何负值（除了 `NEGATIVE_INFINITY`），都等于 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}。
+- `POSITIVE_INFINITY`，除以任何正值（除了 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}），都等于 `NEGATIVE_INFINITY`。
+- `NEGATIVE_INFINITY`，除以 `NEGATIVE_INFINITY` 或 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}，都等于 {{jsxref("NaN")}}。
+- `x > Number.NEGATIVE_INFINITY` 对于任何不是 `NEGATIVE_INFINITY` 的数字 _x_ 都为真。
 
-- 任何正值，包括 `POSITIVE_INFINITY，`乘以 `NEGATIVE_INFINITY` 为 `NEGATIVE_INFINITY`。
-- 任何负值，包括 `NEGATIVE_INFINITY`，乘以 `NEGATIVE_INFINITY` 为 `POSITIVE_INFINITY`。
-- 0 乘以 `NEGATIVE_INFINITY` 为 `NaN`.
-- NaN 乘以 `NEGATIVE_INFINITY` 为 `NaN`.
-- `NEGATIVE_INFINITY` 除以任何负值（除了 `NEGATIVE_INFINITY）`为 `POSITIVE_INFINITY`。
-- `NEGATIVE_INFINITY` 除以任何正值（除了 `POSITIVE_INFINITY`）为 `NEGATIVE_INFINITY`。
-- `NEGATIVE_INFINITY` 除以 `NEGATIVE_INFINITY` 或 `POSITIVE_INFINITY` 是 `NaN`。
-- 任何数除以 `NEGATIVE_INFINITY` 为 0。
+你可以使用 `Number.NEGATIVE_INFINITY` 属性来表示成功时返回有限数值的错误条件。不过，{{jsxref("NaN")}} 更适合于这种情况。
 
-为了成功返回一个有限值，你可能会使用 `Number.NEGATIVE_INFINITY` 属性来判断是否显示一个条件错误。然而 {{jsxref("Global_Objects/isFinite", "isFinite")}} 方法更适合这种情况。
+由于 `NEGATIVE_INFINITY` 是 {{jsxref("Number")}} 的静态属性，你应该始终将其用作 `Number.NEGATIVE_INFINITY`，而不是作为一个数字值的属性。
 
 ## 示例
 
-下例中，赋值给变量 `smallNumber` 一个明显小于 JavaScript 中的最小值的值。当 `if` 语句执行时，`smallNumber` 值为 "`-Infinity`"，因此在继续执行代码前，`smallNumber` 被设为一个更容易管理的值。
+### 使用 NEGATIVE_INFINITY
+
+在下面的例子中，变量 `smallNumber` 被赋值为比最小值更小的数值。当 {{jsxref("Statements/if...else", "if")}} 语句执行时，`smallNumber` 的值为 `-Infinity`，所以在继续之前，`smallNumber` 被设置为一个更易于管理的值。
 
 ```js
-var smallNumber = -Number.MAX_VALUE * 2;
+let smallNumber = -Number.MAX_VALUE * 2;
 
-if (smallNumber == Number.NEGATIVE_INFINITY) {
+if (smallNumber === Number.NEGATIVE_INFINITY) {
   smallNumber = returnFinite();
 }
 ```
@@ -50,8 +56,9 @@ if (smallNumber == Number.NEGATIVE_INFINITY) {
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.POSITIVE_INFINITY")}}
+- {{jsxref("Number.isFinite()")}}
 - {{jsxref("Global_Objects/Infinity", "Infinity")}}
-- {{jsxref("Global_Objects/isFinite", "isFinite")}}
+- {{jsxref("Global_Objects/isFinite", "isFinite()")}}
diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/positive_infinity/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/positive_infinity/index.md
index 5da6487fceba54..fe2caacc1b54a2 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/positive_infinity/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/positive_infinity/index.md
@@ -3,40 +3,47 @@ title: Number.POSITIVE_INFINITY
 slug: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+**`Number.POSITIVE_INFINITY`** 静态数据属性表示正无穷大值。
 
-**`Number.POSITIVE_INFINITY`** 属性表示正无穷大。
+{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}
 
-不必创建一个 {{jsxref("Global_Objects/Number", "Number")}} 实例，可使用 `Number.POSITIVE_INFINITY` 来访问该静态属性。
+## 值
 
-{{js_property_attributes(0,0,0)}}
+与全局属性 {{jsxref("Infinity")}} 的值相同。
+
+{{js_property_attributes(0, 0, 0)}}
 
 ## 描述
 
-`Number.POSITIVE_INFINITY` 的值同全局对象 {{jsxref("Global_Objects/Infinity", "Infinity")}} 属性的值相同。
+`Number.POSITIVE_INFINITY` 的表现同数学上的无穷大略有不同：
 
-该值的表现同数学上的无穷大有点儿不同：
+- 任何正值，包括 `POSITIVE_INFINITY`，乘以 `POSITIVE_INFINITY` 等于 `POSITIVE_INFINITY`。
+- 任何负值，包括 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}，除以 `POSITIVE_INFINITY` 等于 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}。
+- 任何正数除以 `POSITIVE_INFINITY` 都是[正零](https://zh.wikipedia.org/wiki/0)（正如 [IEEE 754](https://zh.wikipedia.org/wiki/IEEE_754) 中所定义的）。
+- 任何负数除以 `POSITIVE_INFINITY` 都是[负零](https://zh.wikipedia.org/wiki/−0)（正如 [IEEE 754](https://zh.wikipedia.org/wiki/IEEE_754) 中所定义的）。
+- 零乘以 `POSITIVE_INFINITY` 等于 {{jsxref("NaN")}}。
+- {{jsxref("Global_Objects/NaN", "NaN")}} 乘以 `POSITIVE_INFINITY` 等于 {{jsxref("NaN")}}。
+- `POSITIVE_INFINITY`，除以任何负值（除了 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}）都等于 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}。
+- `POSITIVE_INFINITY`，除以任何正值（除了 `POSITIVE_INFINITY`）都等于 `POSITIVE_INFINITY`。
+- `POSITIVE_INFINITY`，除以 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} 或 `POSITIVE_INFINITY`，都等于 {{jsxref("NaN")}}。
+- `Number.POSITIVE_INFINITY > x` 对于任何不是 `POSITIVE_INFINITY` 的数字 _x_ 都为真。
 
-- 任何正值，包括 `POSITIVE_INFINITY`，乘以 `POSITIVE_INFINITY` 为 `POSITIVE_INFINITY`。
-- 任何负值，包括 `NEGATIVE_INFINITY`，乘以 `POSITIVE_INFINITY` 为 `NEGATIVE_INFINITY`。
-- 0 乘以 `POSITIVE_INFINITY` 为 NaN。
-- NaN 乘以 `POSITIVE_INFINITY` 为 NaN。
-- `POSITIVE_INFINITY` 除以 `NEGATIVE_INFINITY` 以外的任何负值为 `NEGATIVE_INFINITY`。
-- `POSITIVE_INFINITY` 除以 `POSITIVE_INFINITY` 以外的任何正值为 `POSITIVE_INFINITY`。
-- `POSITIVE_INFINITY` 除以 `NEGATIVE_INFINITY` 或 `POSITIVE_INFINITY` 为 NaN。
-- 任何数除以 `POSITIVE_INFINITY` 为 0。
+你可以使用 `Number.POSITIVE_INFINITY` 属性来表示成功时返回有限数值的错误条件。不过，{{jsxref("NaN")}} 更适合于这种情况。
 
-You might use the `Number.POSITIVE_INFINITY` property to indicate an error condition that returns a finite number in case of success. Note, however, that {{jsxref("Global_Objects/isFinite", "isFinite")}} would be more appropriate in such a case.
+由于 `POSITIVE_INFINITY` 是 {{jsxref("Number")}} 的静态属性，你应该始终将其用作 `Number.POSITIVE_INFINITY`，而不是作为一个数字值的属性。
 
 ## 示例
 
-下例中，赋值给变量 `bigNumber` 一个大于 JavaScript 中最大值的值。当 `if` 语句执行时，变量 `bigNumber` 值为 "`Infinity`"，因此在继续执行代码前，为变量 `bigNumber` 设置一个容易管理的值。
+### 使用 POSITIVE_INFINITY
+
+在下面的例子中，变量 `bigNumber` 被赋值为比最大值更大的数值。当 {{jsxref("Statements/if...else", "if")}} 语句执行时，`bigNumber` 的值为 `Infinity`，所以在继续之前，`bigNumber` 被设置为一个更易于管理的值。
 
 ```js
-var bigNumber = Number.MAX_VALUE * 2;
-if (bigNumber == Number.POSITIVE_INFINITY) {
+let bigNumber = Number.MAX_VALUE * 2;
+
+if (bigNumber === Number.POSITIVE_INFINITY) {
   bigNumber = returnFinite();
 }
 ```
@@ -49,8 +56,9 @@ if (bigNumber == Number.POSITIVE_INFINITY) {
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.NEGATIVE_INFINITY")}}
-- {{jsxref("Global_Objects/Infinity", "Infinity")}}
-- {{jsxref("Global_Objects/isFinite", "isFinite")}}
+- {{jsxref("Number.isFinite()")}}
+- {{jsxref("Infinity")}}
+- {{jsxref("isFinite", "isFinite()")}}

From 6db5cb72cb463cc3264baa53180bcb0fa47528a6 Mon Sep 17 00:00:00 2001
From: Javien Lee <kraccoon@kakao.com>
Date: Fri, 22 Sep 2023 07:09:48 +0900
Subject: [PATCH 064/268] ko: update Array (#15466)

* sync with 4c26e8a3fb50d06963b06017f51ce19364350564

* add "mutating method"

see https://github.com/mdn/translated-content/pull/15542#discussion_r1320590727

* Update files/ko/web/javascript/reference/global_objects/array/index.md

* Update files/ko/web/javascript/reference/global_objects/array/index.md

* Update files/ko/web/javascript/reference/global_objects/array/index.md

* Update files/ko/web/javascript/reference/global_objects/array/index.md

---------

Co-authored-by: hochan Lee <hochan049@gmail.com>
---
 .../reference/global_objects/array/index.md   | 853 ++++++++++++------
 1 file changed, 578 insertions(+), 275 deletions(-)

diff --git a/files/ko/web/javascript/reference/global_objects/array/index.md b/files/ko/web/javascript/reference/global_objects/array/index.md
index 4180863ab320ee..a79e1beec9eb55 100644
--- a/files/ko/web/javascript/reference/global_objects/array/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/index.md
@@ -1,423 +1,707 @@
 ---
 title: Array
 slug: Web/JavaScript/Reference/Global_Objects/Array
+l10n:
+  sourceCommit: 4c26e8a3fb50d06963b06017f51ce19364350564
 ---
 
 {{JSRef}}
 
-JavaScript **`Array`** 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.
+다른 프로그래밍 언어의 배열과 마찬가지로, **`Array`** 객체는 [여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고](/ko/docs/Learn/JavaScript/First_steps/Arrays), [일반적인 배열 연산을 수행하기](#예제) 위한 멤버가 있습니다.
 
 ## 설명
 
-배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖습니다. JavaScript 배열은 길이도, 각 요소의 자료형도 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있고 데이터를 연속적이지 않은 곳에 저장할 수 있으므로, JavaScript 배열은 밀집성을 보장하지 않습니다. 보통 이런 성질들은 편리하지만, 사용하려는 목적에 맞지 않으면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.
+JavaScript에서 배열은 [원시 값](/ko/docs/Glossary/Primitive)이 아니라 다음과 같은 핵심적인 특성을 가진 `Array` 객체입니다.
 
-배열은 ([연관 배열](https://ko.wikipedia.org/wiki/연관_배열)과 달리) 요소 인덱스로 문자열을 사용할 수 없으며 무조건 정수만 허용합니다. [대괄호 구문](/ko/docs/Web/JavaScript/Guide/Working_with_Objects#객체와_속성) 또는 [속성 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors)를 사용해 정수가 아닌 키에 접근할 경우 배열의 요소가 아니라 배열의 [객체 속성 컬렉션](/ko/docs/Web/JavaScript/Data_structures#속성)에 연결된 변수를 바라보게 됩니다. [순회 및 변형 작업](/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드) 또한 이런 속성에 적용할 수 없습니다.
+- **JavaScript 배열은 크기를 조정이 가능하고, 다양한 [데이터 형식](/ko/docs/Web/JavaScript/Data_structures)을 혼합하여 저장할 수 있습니다**. (이러한 특성이 바람직하지 않은 경우라면, [형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays)을 대신 사용하세요.)
+- **JavaScript 배열은 연관 배열이 아니므로** 임의의 문자열을 인덱스로 사용하여 배열 요소에 접근할 수 없습니다. 하지만, 음수가 아닌 정수(또는 해당 수의 문자열 형식)를 인덱스로 사용하여 접근해야 합니다.
+- <strong>JavaScript 배열은 [0 인덱스](https://en.wikipedia.org/wiki/Zero-based_numbering)</strong>입니다. 배열의 첫 번째 요소는 인덱스 `0`, 두 번째 요소는 인덱스 `1`, 마지막 요소는 배열의 {{jsxref("Array/length", "length")}} 속성 값에서 1을 뺀 값에 위치합니다.
+- **JavaScript [배열 복사 연산](#배열_복사하기)은 얕은 복사본을 생성합니다**. (모든 JavaScript 객체의 모든 표준 내장 복사 연산은 [깊은 복사본](/ko/docs/Glossary/Deep_copy)이 아닌 얕은 복사본을 생성합니다).
 
-### 자주 사용하는 연산
+### 배열 인덱스
 
-**배열 만들기**
+`Array` 객체는 ([연관 배열](https://en.wikipedia.org/wiki/Associative_array)에서처럼) 임의의 문자열을 요소 인덱스로 사용할 수 없으며 음수가 아닌 정수(또는 해당 수의 문자열 형식)를 사용해야 합니다. 정수가 아닌 것을 통해 배열의 요소를 설정하거나 접근하려고 하면, 배열 목록 자체에서 요소를 설정하거나 검색하는 것이 아니라 해당 배열의 [객체 속성 컬렉션](/ko/docs/Web/JavaScript/Data_structures#속성)과 연결된 변수를 설정하거나 접근하게 됩니다. 배열의 객체 속성과 배열의 요소 목록은 별개이며, 배열의 [순회 및 수정 연산](/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_메서드)은 이렇게 이름 붙여진 속성에 적용할 수 없습니다.
 
-```js
-let fruits = ["사과", "바나나"];
+배열 요소는 `toString`이 속성인 것과 같은 방식으로 객체 속성입니다(하지만, 정확히 말하자면 `toString()`은 메서드입니다). 그럼에도 불구하고 다음과 같이 배열의 요소에 접근하려고 하면 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.
 
-console.log(fruits.length);
-// 2
+```js-nolint example-bad
+arr.0; // 구문 오류
 ```
 
-**인덱스로 배열의 항목에 접근하기**
-
-```js
-let first = fruits[0];
-// 사과
-
-let last = fruits[fruits.length - 1];
-// 바나나
-```
+JavaScript 구문에서 숫자로 시작하는 속성은 [점 표기법](/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors) 대신 [대괄호 표기법](/ko/docs/Web/JavaScript/Guide/Working_with_objects#객체와_속성)을 사용하여 접근해야 합니다. 배열 인덱스를 따옴표로 묶을 수도 있지만 (예: `years[2]` 대신 `years['2']`), 일반적으로는 필요하지 않습니다.
 
-**배열의 항목들을 순환하며 처리하기**
+`years[2]`의 `2`는 JavaScript 엔진에 의해 암시적 `toString` 변환을 통해 문자열로 강제 변환됩니다. 결과적으로 `'2'`와 `'02'`는 `years` 객체에서 서로 다른 두 개의 슬롯을 참조하게 되며, 다음 예제는 `true` 일 수 있습니다.
 
 ```js
-fruits.forEach(function (item, index, array) {
-  console.log(item, index);
-});
-// 사과 0
-// 바나나 1
+console.log(years["2"] !== years["02"]);
 ```
 
-**배열 끝에 항목 추가하기**
+`years['2']`만이 실제 배열 인덱스입니다. `years['02']`는 배열 순회에서 방문되지 않는 임의의 문자열 속성입니다.
 
-```js
-let newLength = fruits.push("오렌지");
-// ["사과", "바나나", "오렌지"]
-```
+### length와 숫자 속성의 관계
 
-**배열 끝에서부터 항목 제거하기**
+JavaScript 배열의 {{jsxref("Array/length", "length")}} 속성과 숫자 속성은 연결되어 있습니다.
 
-```js
-let last = fruits.pop(); // 끝에있던 '오렌지'를 제거
-// ["사과", "바나나"]
-```
+내장 배열 메서드 중 일부(예: {{jsxref("Array/join", "join()")}}, {{jsxref("Array/slice", "slice()")}}, {{jsxref("Array/indexOf", "indexOf()")}} 등)는 호출 시 배열의 {{jsxref("Array/length", "length")}} 속성 값을 고려합니다.
 
-**배열 앞에서부터 항목 제거하기**
+다른 메서드(예: {{jsxref("Array/push", "push()")}}, {{jsxref("Array/splice", "splice()")}} 등)도 배열의 {{jsxref("Array/length", "length")}} 속성을 갱신합니다.
 
 ```js
-let first = fruits.shift(); // 제일 앞의 '사과'를 제거
-// ["바나나"]
+const fruits = [];
+fruits.push("banana", "apple", "peach");
+console.log(fruits.length); // 3
 ```
 
-**배열 앞에 항목 추가하기**
+속성이 유효한 배열 인덱스이고 해당 인덱스가 배열의 현재 범위를 벗어날 때 JavaScript 배열에 속성을 설정하면, 엔진은 배열의 {{jsxref("Array/length", "length")}} 속성을 적절히 갱신합니다.
 
 ```js
-let newLength = fruits.unshift("딸기"); // 앞에 추가
-// ["딸기", "바나나"]
+fruits[5] = "mango";
+console.log(fruits[5]); // 'mango'
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
 ```
 
-**배열 안 항목의 인덱스 찾기**
+{{jsxref("Array/length", "length")}}를 늘리면 새 요소를 만들지 않고 빈 슬롯을 추가하여 배열을 확장할 수 있습니다. `undefined`가 아닙니다.
 
 ```js
-fruits.push("망고");
-// ["딸기", "바나나", "망고"]
-
-let pos = fruits.indexOf("바나나");
-// 1
+fruits.length = 10;
+console.log(fruits); // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4]
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+console.log(fruits[8]); // undefined
 ```
 
-**인덱스 위치에 있는 항목 제거하기**
+그러나 {{jsxref("Array/length", "length")}} 속성을 줄이면 요소가 삭제됩니다.
 
 ```js
-let removedItem = fruits.splice(pos, 1); // 항목을 제거하는 방법
-
-// ["딸기", "망고"]
+fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
 ```
 
-**인덱스 위치에서부터 여러개의 항목 제거하기**
-
-```js
-let vegetables = ["양배추", "순무", "무", "당근"];
-console.log(vegetables);
-// ["양배추", "순무", "무", "당근"]
+{{jsxref("Array/length", "length")}} 페이지에서 더 자세히 설명하겠습니다.
 
-let pos = 1;
-let n = 2;
+### 배열 메서드와 빈 슬롯
 
-let removedItems = vegetables.splice(pos, n);
-// 배열에서 항목을 제거하는 방법
-// pos 인덱스부터 n개의 항목을 제거함
+[희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)의 빈 슬롯은 배열 메서드 간에 일관성 없이 동작합니다. 일반적으로 오래된 메서드는 빈 슬롯을 건너뛰는 반면, 최신 메서드는 빈 슬롯을 `undefined`로 처리합니다.
 
-console.log(vegetables);
-// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
+여러 요소를 순회하는 메서드 중, 다음은 인덱스에 접근하기 전에 [`in`](/ko/docs/Web/JavaScript/Reference/Operators/in) 확인을 수행하여 빈 슬롯을 `undefined`로 취급하지 않습니다.
 
-console.log(removedItems);
-// ["순무", "무"]
-```
+- {{jsxref("Array/concat", "concat()")}}
+- {{jsxref("Array/copyWithin", "copyWithin()")}}
+- {{jsxref("Array/every", "every()")}}
+- {{jsxref("Array/filter", "filter()")}}
+- {{jsxref("Array/flat", "flat()")}}
+- {{jsxref("Array/flatMap", "flatMap()")}}
+- {{jsxref("Array/forEach", "forEach()")}}
+- {{jsxref("Array/indexOf", "indexOf()")}}
+- {{jsxref("Array/lastIndexOf", "lastIndexOf()")}}
+- {{jsxref("Array/map", "map()")}}
+- {{jsxref("Array/reduce", "reduce()")}}
+- {{jsxref("Array/reduceRight", "reduceRight()")}}
+- {{jsxref("Array/reverse", "reverse()")}}
+- {{jsxref("Array/slice", "slice()")}}
+- {{jsxref("Array/some", "some()")}}
+- {{jsxref("Array/sort", "sort()")}}
+- {{jsxref("Array/splice", "splice()")}}
 
-**배열 복사하기**
+빈 슬롯을 정확히 어떻게 처리하는지는 각 메서드의 페이지를 참조하세요.
 
-```js
-let shallowCopySpread = [...fruits];
-// ["딸기", "망고"]
-```
+아래 메서드는 빈 슬롯을 `undefined`로 취급합니다.
 
-위 코드는 [전개 구문](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax)을 사용해 배열의 얕은 복사를 만드는 방법입니다. 배열을 복사하는 다른 방법은 아래의 [배열 복사하기](#배열_복사하기)에서 논의합니다.
+- {{jsxref("Array/entries", "entries()")}}
+- {{jsxref("Array/fill", "fill()")}}
+- {{jsxref("Array/find", "find()")}}
+- {{jsxref("Array/findIndex", "findIndex()")}}
+- {{jsxref("Array/findLast", "findLast()")}}
+- {{jsxref("Array/findLastIndex", "findLastIndex()")}}
+- {{jsxref("Array/includes", "includes()")}}
+- {{jsxref("Array/join", "join()")}}
+- {{jsxref("Array/keys", "keys()")}}
+- {{jsxref("Array/toLocaleString", "toLocaleString()")}}
+- {{jsxref("Array/values", "values()")}}
 
-### 배열 요소에 접근하기
+### 복사 메서드와 변경 메서드(mutating method)
 
-JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.
+일부 메서드는 메서드가 호출된 기존 배열을 변경하지 않는 대신, 새 배열을 반환합니다. 이러한 메서드는 먼저 새 배열을 구성한 다음 요소를 채우는 방식으로 수행됩니다. 복사는 항상 [얕게](/ko/docs/Glossary/Shallow_copy) 이루어지며, 메서드는 처음에 생성된 배열 이외에는 아무것도 복사하지 않습니다. 원래 배열의 요소는 다음과 같이 새 배열에 복사됩니다
 
-잘못된 인덱스를 사용하면 `undefined`를 반환합니다.
+- 객체: 객체 참조가 새 배열로 복사됩니다. 원래 배열과 새 배열 모두 동일한 객체를 참조합니다. 즉, 참조된 객체가 수정되면 변경 사항이 새 배열과 원래 배열 모두에 표시됩니다.
+- 문자열, 숫자, 불리언과 같은 원시 유형({{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, {{jsxref("Global_Objects/Boolean", "Boolean")}} 객체 아님): 해당 값이 새 배열에 복사됩니다.
 
-```js
-let arr = ["첫 번째 요소입니다", "두 번째 요소입니다", "마지막 요소입니다"];
-console.log(arr[0]); // '첫 번째 요소입니다'를 기록
-console.log(arr[1]); // '두 번째 요소입니다'를 기록
-console.log(arr[arr.length - 1]); // '마지막 요소입니다'를 기록
-```
+어떤 메서드는 메서드가 호출된 배열을 변경하며, 이 경우 반환값은 메서드에 따라 다릅니다. 때로는 같은 배열에 대한 참조를 반환하고, 때로는 새 배열의 길이를 반환합니다.
 
-`toString`이 속성인 것과 마찬가지로 (정확히 하자면, `toString()`은 메서드입니다) 배열의 요소도 속성입니다. 하지만 배열 요소에 아래 코드처럼 접근하려고 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.
+다음 메서드는 [`this.constructor[Symbol.species]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species)에 접근하여 사용할 생성자를 결정하고 새 배열을 생성합니다.
 
-```js
-console.log(arr.0) // 구문 오류
-```
+- {{jsxref("Array/concat", "concat()")}}
+- {{jsxref("Array/filter", "filter()")}}
+- {{jsxref("Array/flat", "flat()")}}
+- {{jsxref("Array/flatMap", "flatMap()")}}
+- {{jsxref("Array/map", "map()")}}
+- {{jsxref("Array/slice", "slice()")}}
+- {{jsxref("Array/splice", "splice()")}} (반환되는 제거된 요소의 배열을 구성하기 위해)
 
-이 현상은 JavaScript 배열과 그 속성에 어떤 특별한 점이 있어서 그런 것이 아닙니다. 모든 JavaScript 속성은 이름이 숫자로 시작할 경우 마침표 표기법으로 접근할 수 없고, 대괄호 표기법을 사용해야 합니다.
+다음 메서드는 항상 `Array` 기본 생성자를 사용하여 새 배열을 생성합니다.
 
-예를 들면, 어떤 객체에 `'3d'`라는 이름의 속성이 있다면, 이 속성에 접근할 땐 대괄호 표기법을 사용해야만 합니다.
+- {{jsxref("Array/toReversed", "toReversed()")}}
+- {{jsxref("Array/toSorted", "toSorted()")}}
+- {{jsxref("Array/toSpliced", "toSpliced()")}}
+- {{jsxref("Array/with", "with()")}}
 
-```js
-let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
-console.log(years.0)   // 구문 오류
-console.log(years[0])  // 정상 작동
-```
+아래 표에는 원래 배열을 변경하는 메서드와 그에 상응하는 무변경 대체 메서드가 나열되어 있습니다.
 
-```js
-renderer.3d.setTexture(model, 'character.png')     // 구문 오류
-renderer['3d'].setTexture(model, 'character.png')  // 정상 작동
-```
-
-`3d` 예시에서 `'3d'`를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 `years[2]` 대신에 `years['2']`를 사용하듯 따옴표로 둘러쌀 수 있습니다. 그러나 굳이 그럴 필요는 없습니다.
+| 변경 메서드                                    | 무변경 메서드                                            |
+| ---------------------------------------------- | -------------------------------------------------------- |
+| {{jsxref("Array/copyWithin", "copyWithin()")}} | 단일 메서드 대안 없음                                    |
+| {{jsxref("Array/fill", "fill()")}}             | 단일 메서드 대안 없음                                    |
+| {{jsxref("Array/pop", "pop()")}}               | {{jsxref("Array/slice", "slice(0, -1)")}}                |
+| {{jsxref("Array/push", "push(v1, v2)")}}       | {{jsxref("Array/concat", "concat([v1, v2])")}}           |
+| {{jsxref("Array/reverse", "reverse()")}}       | {{jsxref("Array/toReversed", "toReversed()")}}           |
+| {{jsxref("Array/shift", "shift()")}}           | {{jsxref("Array/slice", "slice(1)")}}                    |
+| {{jsxref("Array/sort", "sort()")}}             | {{jsxref("Array/toSorted", "toSorted()")}}               |
+| {{jsxref("Array/splice", "splice()")}}         | {{jsxref("Array/toSpliced", "toSpliced()")}}             |
+| {{jsxref("Array/unshift", "unshift(v1, v2)")}} | {{jsxref("Array/toSpliced", "toSpliced(0, 0, v1, v2)")}} |
 
-`years[2]`의 `2`는 JavaScript 엔진이 암시적인 `toString` 변환을 사용해 문자열로 변환합니다. 그 결과로서 `'2'`와 `'02'`는 `years` 객체에서 서로 다른 칸을 가리키며, 다음 코드는 `true`가 될 수 있습니다.
+변경 메서드를 무변경 대체 메서드로 변경하는 쉬운 방법은 [전개 구문](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 또는 {{jsxref("Array/slice", "slice()")}}를 사용하여 먼저 복사본을 만드는 것입니다.
 
-```js
-console.log(years["2"] != years["02"]);
+```js-nolint
+arr.copyWithin(0, 1, 2); // arr을 변경함
+const arr2 = arr.slice().copyWithin(0, 1, 2); // arr을 변경하지 않음
+const arr3 = [...arr].copyWithin(0, 1, 2); // arr을 변경하지 않음
 ```
 
-### 배열 길이와 숫자형 속성의 관계
+### 순회 메서드
 
-JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.
+많은 배열 메서드는 콜백 함수를 인수로 받습니다. 콜백 함수는 배열의 각 요소에 대해 순차적으로 최대 한 번만 호출되며, 콜백 함수의 반환값은 메서드의 반환값을 결정하는 데 사용됩니다. 이들은 모두 같은 모습을 공유합니다.
 
-몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참고합니다.
-
-다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성을 바꾸는 결과를 낳습니다.
-
-```js
-const fruits = [];
-fruits.push("바나나", "사과", "복숭아");
-
-console.log(fruits.length); // 3
+```js-nolint
+method(callbackFn, thisArg)
 ```
 
-배열 인덱스로 유효한 속성을 JavaScript 배열에 설정할 때, 그 인덱스가 현재 배열의 경계 바깥에 있는 경우, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.
+여기서 `callbackFn`은 세 개의 인수를 받습니다.
 
-```js
-fruits[5] = "mango";
-console.log(fruits[5]); // '망고'
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 6
-```
+- `element`
+  - : 배열에서 현재 처리 중인 요소입니다.
+- `index`
+  - : 배열에서 현재 처리 중인 요소의 인덱스입니다.
+- `array`
+  - : 메서드가 호출된 배열입니다.
 
-{{jsxref("Array.length", "length")}}를 직접 늘려도 요소에 변화는 없습니다.
+`callbackFn`이 반환할 것으로 예상되는 것은 호출된 배열 메서드에 따라 다릅니다.
 
-```js
-fruits.length = 10;
-console.log(fruits); // ['바나나', '사과', '복숭아', 비어 있음 x 2, '망고', 비어 있음 x 4]
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 10
-console.log(fruits[8]); // undefined
-```
+`callbackFn`을 호출할 때 `thisArg` 인자(기본값은 `undefined`)는 `this` 값이 사용됩니다. `callbackFn`이 최종적으로 관찰할 수 있는 `this` 값은 [일반적인 규칙](/ko/docs/Web/JavaScript/Reference/Operators/this)에 따라 결정됩니다. `callbackFn`이 [비엄격](/ko/docs/Web/JavaScript/Reference/Strict_mode#this_대체_없음)이라면, 원시 `this` 값은 객체로 래핑되고, `undefined`/`null`은 [`globalThis`](/ko/docs/Web/JavaScript/Reference/Global_Objects/globalThis)로 대체됩니다. [화살표 함수](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)에는 자체 `this` {{glossary("binding", "바인딩")}}이 없으므로 `thisArg` 인자는 화살표 함수로 정의된 `callbackFn`과 관련이 없습니다.
 
-하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소가 지워집니다.
+모든 순회 메서드는 [복사](#복사_메서드와_변경_메서드)와 [범용](#범용_배열_메서드) 메서드 이지만, [빈 슬롯](#배열_메서드와_빈_슬롯)에서는 다르게 동작합니다.
 
-```js
-fruits.length = 2;
-console.log(Object.keys(fruits)); // ['0', '1']
-console.log(fruits.length); // 2
-```
+다음 메서드는 순회 메서드입니다.
 
-{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.
+- {{jsxref("Array/every", "every()")}}
+- {{jsxref("Array/filter", "filter()")}}
+- {{jsxref("Array/find", "find()")}}
+- {{jsxref("Array/findIndex", "findIndex()")}}
+- {{jsxref("Array/findLast", "findLast()")}}
+- {{jsxref("Array/findLastIndex", "findLastIndex()")}}
+- {{jsxref("Array/flatMap", "flatMap()")}}
+- {{jsxref("Array/forEach", "forEach()")}}
+- {{jsxref("Array/map", "map()")}}
+- {{jsxref("Array/some", "some()")}}
 
-### 정규표현식 일치 결과를 이용한 배열 생성
+특히, {{jsxref("Array/every", "every()")}}, {{jsxref("Array/find", "find()")}}, {{jsxref("Array/findIndex", "findIndex()")}}, {{jsxref("Array/findLast", "findLast()")}}, {{jsxref("Array/findLastIndex", "findLastIndex()")}}, {{jsxref("Array/some", "some()")}}는 모든 요소에 대해 항상 `callbackFn`을 호출하는 것이 아니라, 반환 값이 결정되는 즉시 순회를 중지합니다.
 
-{{jsxref("RegExp")}}와 문자열 사이의 일치 결과는 JavaScript 배열을 반환합니다. 이 배열은 일치 결과에 대한 정보를 포함하는 속성과 요소가 담겨있습니다. {{jsxref("RegExp.exec()")}}, {{jsxref("String.match()")}}의 반환 값에서 이런 배열을 볼 수 있습니다.
+콜백 함수를 받아 배열의 각 요소에 대해 최대 한 번만 실행하는 다른 두 가지 메서드가 있지만, 일반적인 순회 메서드와는 약간 다른 모습을 가집니다(예: `thisArg`를 허용하지 않음).
 
-다음 예제와 표에서 배열의 속성과 요소에 대한 설명을 확인하세요.
+- {{jsxref("Array/reduce", "reduce()")}}
+- {{jsxref("Array/reduceRight", "reduceRight()")}}
 
-```js
-// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 함
-// 일치한 b와 다음 d를 기억할 것
-// 대소문자 구분 없음
-
-const myRe = /d(b+)(d)/i;
-const myArray = myRe.exec("cdbBdbsbz");
-```
-
-반환된 `myArray` 배열의 속성과 요소는 다음과 같습니다.
-
-<table class="fullwidth-table standard-table">
-  <tbody>
-    <tr>
-      <th class="header" scope="col">속성/요소</th>
-      <th class="header" scope="col">설명</th>
-      <th class="header" scope="col">예시</th>
-    </tr>
-    <tr>
-      <td><code>input</code><br />{{ReadOnlyInline}}</td>
-      <td>정규표현식 일치 대상이 된 원본 문자열입니다.</td>
-      <td><code>"cdbBdbsbz"</code></td>
-    </tr>
-    <tr>
-      <td><code>index</code><br />{{ReadOnlyInline}}</td>
-      <td>일치가 위치한 원본 문자열에서의 인덱스입니다.</td>
-      <td><code>1</code></td>
-    </tr>
-    <tr>
-      <td><code>[0]</code><br />{{ReadOnlyInline}}</td>
-      <td>마지막으로 일치한 텍스트입니다.</td>
-      <td><code>"dbBd"</code></td>
-    </tr>
-    <tr>
-      <td><code>[1], ...[n]</code><br />{{ReadOnlyInline}}</td>
-      <td>
-        존재할 경우, 정규표현식에서 괄호로 지정한 부분문자열 일치에 대응하는 요소입니다. 가능한 수의 제한은 없습니다.
-      </td>
-      <td>
-        <code>[1]: "bB"<br />[2]: "d"</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{jsxref("Array/sort", "sort()")}} 메서드도 콜백 함수를 받지만, 순회 메서드는 아닙니다. 이 메서드는 배열을 제자리에서 변경하고, `thisArg`를 허용하지 않으며, 한 인덱스에서 콜백을 여러 번 호출할 수 있습니다.
 
-### 배열 복사하기
+### 범용 배열 메서드
 
-배열을 새로운 변수에 할당해도 배열이 복사되지는 않습니다. 새로운 변수에는 원본 배열을 가리키는 참조만 할당되며, 원본 배열의 값을 바꾸면 새 변수에서도 그 변경점이 반영됩니다.
+배열 메서드는 항상 범용적이고, 이는 배열 객체의 내부 데이터에 접근하지 않습니다. `length` 속성과 인덱스된 요소를 통해서만 배열 요소에 접근합니다. 즉, 유사 배열 객체에서도 이 메서드를 호출할 수 있습니다.
 
 ```js
-let array1 = [1, 2, 3];
-let array1Reference = array1;
-array1[1] = 9;
-console.log(array1Reference);
-// Array [1,9,3] - array1의 변화가 array1Reference에도 나타남 - 복사본이 아님
+const arrayLike = {
+  0: "a",
+  1: "b",
+  length: 2,
+};
+console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'
 ```
 
-배열의 복사본을 만들기 위해서는 새 배열을 위한 변수를 생성하고, 원본 배열 각각의 원시 요소에 대해서도 새로운 변수를 생성해야 합니다. (변수를 원시 값으로 초기화하면 참조를 할당하지 않고 값을 복사합니다.) JavaScript에서는 이를 위해 다음과 같은 방법을 사용할 수 있습니다.
+#### length 속성 일반화
 
-[전개 구문](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax):
+`length` 속성은 [정수로 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환)된 다음 0에서 2<sup>53</sup> - 1 사이의 범위로 고정됩니다. `NaN`은 `0`이 되므로, `length`가 없거나 `undefined`인 경우에도 `0` 값이 있는 것처럼 동작합니다.
 
-```js
-let shallowCopySpread = [...fruits];
-// ["Strawberry", "Mango"]
-```
-
-{{jsxref("Array.slice()")}}:
+이 언어는 `length`를 [안전하지 않은 정수](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)로 설정하지 못하도록 합니다. 모든 내장 메서드는 `length`가 2<sup>53</sup> - 1보다 큰 숫자로 설정될 때 {{jsxref("TypeError")}}를 발생시킵니다. 그러나 배열의 {{jsxref("Array/length", "length")}} 속성이 2<sup>32</sup> - 1보다 큰 값으로 설정되면 오류가 발생하기 때문에 배열이 아닌 객체에서 메서드를 호출하지 않는 한 일반적으로 안전한 정수 임곗값에 도달하지 못합니다.
 
 ```js
-let shallowCopySlice = fruits.slice();
-// ["Strawberry", "Mango"]
+Array.prototype.flat.call({}); // []
 ```
 
-{{jsxref("Array.from()")}}:
+일부 배열 메서드는 배열 객체의 `length` 속성을 설정합니다. 이러한 메서드는 항상 일반화한 후 값을 설정하므로 `length`는 항상 정수로 끝납니다.
 
 ```js
-let shallowCopyFrom = Array.from(fruits);
-// ["Strawberry", "Mango"]
+const a = { length: 0.7 };
+Array.prototype.push.call(a);
+console.log(a.length); // 0
 ```
 
-위의 세 코드는 모두 '얕은 복사'를 생성합니다. 얕은 복사란 배열의 최상위 요소가 원시 값일 경우 복사하지만, 중첩 배열이나 객체 요소일 경우에는 원본 배열의 요소를 참조하게 됩니다.
+#### 유사 배열 객체
+
+[유사 배열 객체](/ko/docs/Web/JavaScript/Guide/Indexed_collections#유사_배열_객체로_작업하기)라는 용어는 위에서 설명한 `length` 변환 프로세스 중에 오류가 발생하지 않는 모든 객체를 의미합니다. 실제로 이러한 객체는 정말 `length` 속성을 가지며, `0`에서 `length - 1` 범위의 인덱스 요소를 가질 것으로 예상됩니다. (모든 인덱스가 없는 경우, 기능적으로 [희소 배열](#배열_메서드와_빈_슬롯)과 동일합니다.) 배열 메서드가 유사 배열 객체에서 작동할 때 `0`보다 작거나 `length - 1`보다 큰 정수의 인덱스는 무시됩니다.
 
-모든 요소의 '깊은 복사', 즉 중첩 배열과 객체 요소 또한 동일한 형태로 복사하는 방법 중 하나는 {{jsxref("JSON.stringify()")}}를 사용해 배열을 JSON 문자열로 변환한 후, {{jsxref("JSON.parse()")}}로 다시 배열을 구성하는 것입니다.
+많은 DOM 객체는 유사 배열입니다(예: [`NodeList`](/ko/docs/Web/API/NodeList)와 [`HTMLCollection`](/ko/docs/Web/API/HTMLCollection)). [`arguments`](/ko/docs/Web/JavaScript/Reference/Functions/arguments) 객체도 유사 배열입니다. 유사 배열에 배열 메서드가 없더라도 배열 메서드를 호출할 수 있습니다.
 
 ```js
-let deepCopy = JSON.parse(JSON.stringify(fruits));
-// ["Strawberry", "Mango"]
+function f() {
+  console.log(Array.prototype.join.call(arguments, "+"));
+}
+
+f("a", "b"); // 'a+b'
 ```
 
 ## 생성자
 
-- {{jsxref("Array.Array", "Array()")}}
-  - : `Array` 객체를 생성합니다.
+- {{jsxref("Array/Array", "Array()")}}
+  - : 새 `Array` 객체를 생성합니다.
 
 ## 정적 속성
 
-- {{jsxref("Array.@@species", "get Array[@@species]")}}
-  - : 파생 객체를 생성하는데 사용하는 생성자 함수입니다.
+- {{jsxref("Array/@@species", "Array[@@species]")}}
+  - : `Array` 생성자를 반환합니다.
 
 ## 정적 메서드
 
 - {{jsxref("Array.from()")}}
-  - : 유사 배열 또는 반복 가능한 객체로부터 새로운 `Array` 인스턴스를 생성합니다.
+  - : 순회 가능 또는 유사 배열 객체에서 새 `Array`인스턴스를 생성합니다.
+- {{jsxref("Array.fromAsync()")}}
+  - : 비동기 순회 가능, 순회 가능, 또는 유사 배열 객체에서 새 `Array` 인스턴스를 생성합니다.
 - {{jsxref("Array.isArray()")}}
-  - : 만약 매개변수가 배열이면 참을, 아니면 거짓을 반환합니다.
+  - : 인자가 배열이면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다.
 - {{jsxref("Array.of()")}}
-  - : 매개변수의 수와 자료형에 제한 없이, 지정한 값을 사용해 새 `Array` 인스턴스를 생성합니다.
+  - : 인자의 개수나 유형에 관계없이 가변적인 수의 인자를 가진 새 `Array` 인스턴스를 생성합니다.
 
 ## 인스턴스 속성
 
-- {{jsxref("Array.prototype.length")}}
-  - : 배열의 원소 수를 나타냅니다.
-- {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
-  - : {{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.
+아래 속성은 `Array.prototype`에 정의되며 모든 `Array` 인스턴스에서 공유됩니다.
+
+- {{jsxref("Object/constructor", "Array.prototype.constructor")}}
+  - : 인스턴스 객체를 생성한 생성자 함수입니다. `Array` 인스턴스의 경우, 초기 값은 {{jsxref("Array/Array", "Array")}} 생성자입니다.
+- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}
+  - : ES2015 버전 이전의 ECMAScript 표준에 포함되지 않았으며 [`with`](/ko/docs/Web/JavaScript/Reference/Statements/with) 문 바인딩 목적으로 무시되는 속성 이름을 포함합니다.
+
+아래 속성은 각 `Array` 인스턴스의 고유 속성입니다.
+
+- {{jsxref("Array/length", "length")}}
+  - : 배열 요소의 개수를 반영합니다.
 
 ## 인스턴스 메서드
 
-- {{jsxref("Array.prototype.at()")}} {{Experimental_Inline}}
-  - : 주어진 인덱스의 요소를 반환합니다. 음수 값을 지정할 경우 인덱스를 배열의 끝부터 셉니다.
+- {{jsxref("Array.prototype.at()")}}
+  - : 주어진 인덱스에 있는 배열의 항목을 반환합니다. 마지막 항목부터 셀 수 있는 음의 정수를 허용합니다.
 - {{jsxref("Array.prototype.concat()")}}
-  - : 배열과 배열/값 매개변수를 이어붙인 새로운 배열을 반환합니다.
+  - : 다른 배열 및/또는 값과 결합된 호출 배열인 새 배열을 반환합니다.
 - {{jsxref("Array.prototype.copyWithin()")}}
-  - : 배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.
+  - : 배열 내의 배열 요소 시퀀스를 복사합니다.
 - {{jsxref("Array.prototype.entries()")}}
-  - : 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 배열 반복자 객체를 반환합니다.
+  - : 배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새 [배열 반복자](/ko/docs/Web/JavaScript/Guide/Iterators_and_generators) 객체를 반환합니다.
 - {{jsxref("Array.prototype.every()")}}
-  - : 배열의 모든 요소가 주어진 판별 함수를 만족할 경우 `true`를 반환합니다.
+  - : 호출 배열의 모든 요소가 테스트 함수를 만족하면 `true`를 반환합니다.
 - {{jsxref("Array.prototype.fill()")}}
-  - : 배열을 시작 인덱스부터 끝 인덱스까지의 지정한 값으로 채웁니다.
+  - : 시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 고정된 값으로 채웁니다.
 - {{jsxref("Array.prototype.filter()")}}
-  - : 지정한 필터 함수의 반환 결과가 `true`인 요소만 모아서 새로운 배열을 반환합니다.
+  - : 제공된 필터링 함수가 `true`를 반환하는 호출 배열의 모든 요소를 포함하는 새 배열을 반환합니다.
 - {{jsxref("Array.prototype.find()")}}
-  - : 주어진 판별 함수를 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 `undefined`를 반환합니다.
+  - : 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 값을 반환하고, 적절한 요소를 찾을 수 없으면 `undefined`를 반환합니다.
 - {{jsxref("Array.prototype.findIndex()")}}
-  - : 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 `-1`를 반환합니다.
+  - : 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환하고, 적절한 요소를 찾을 수 없으면 `-1`을 반환합니다.
+- {{jsxref("Array.prototype.findLast()")}}
+  - : 제공된 테스트 함수를 만족하는 배열의 마지막 요소의 값을 반환하고, 적절한 요소를 찾을 수 없으면 `undefined`를 반환합니다.
+- {{jsxref("Array.prototype.findLastIndex()")}}
+  - : 제공된 테스트 함수를 만족하는 배열의 마지막 요소의 인덱스를 반환하고, 적절한 요소를 찾을 수 없는 경우 `-1`을 반환합니다.
 - {{jsxref("Array.prototype.flat()")}}
-  - : 배열 내의 모든 중첩 배열을 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 반환합니다.
+  - : 지정된 깊이까지 재귀적으로 연결된 모든 하위 배열 요소가 포함된 새 배열을 반환합니다.
 - {{jsxref("Array.prototype.flatMap()")}}
-  - : 배열의 모든 요소 각각에 대해 주어진 콜백 함수를 호출하고, 그 반환 값을 모아 새로운 배열을 생성한 후, 모든 중첩 배열을 이어붙여 평탄화해 반환합니다.
+  - : 호출 배열의 각 요소에 지정된 콜백 함수를 적용한 다음 결과를 한 단계씩 평탄화하여 만들어진 새 배열을 반환합니다.
 - {{jsxref("Array.prototype.forEach()")}}
-  - : 배열의 각각의 요소에 대해 함수를 호출합니다.
+  - : 호출 배열의 각 요소로 함수를 호출합니다.
 - {{jsxref("Array.prototype.includes()")}}
-  - : 배열이 주어진 값을 포함하는지 판별해 `true` 또는 `false`를 반환합니다.
+  - : 호출하는 배열에 값이 포함되어 있는지 여부를 판단하여 적절하게 `true`나`false`를 반환합니다.
 - {{jsxref("Array.prototype.indexOf()")}}
-  - : 배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 `-1`을 반환합니다.
+  - : 호출 배열에서 지정된 요소를 찾을 수 있는 첫 번째(최소) 인덱스를 반환합니다.
 - {{jsxref("Array.prototype.join()")}}
-  - : 배열의 모든 요소를 문자열로 합칩니다.
+  - : 배열의 모든 요소를 문자열로 결합합니다.
 - {{jsxref("Array.prototype.keys()")}}
-  - : 배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.
+  - : 호출 배열의 각 인덱스에 대한 키를 포함하는 새 [배열 반복자](/ko/docs/Web/JavaScript/Guide/Iterators_and_generators)를 반환합니다.
 - {{jsxref("Array.prototype.lastIndexOf()")}}
-  - : 배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 `-1`을 반환합니다.
+  - : 호출 배열에서 지정된 요소를 찾을 수 있는 마지막(가장 큰) 인덱스를 반환하고, 찾을 수 없는 경우 `-1`을 반환합니다.
 - {{jsxref("Array.prototype.map()")}}
-  - : 배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환 값을 모은 새로운 배열을 반환합니다.
+  - : 호출 배열의 모든 요소에 함수를 호출한 결과를 포함하는 새 배열을 반환합니다.
 - {{jsxref("Array.prototype.pop()")}}
-  - : 배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.
+  - : 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.
 - {{jsxref("Array.prototype.push()")}}
-  - : 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 변경된 `length`를 반환합니다.
+  - : 배열 끝에 하나 이상의 요소를 추가하고, 배열의 새 `length`를 반환합니다.
 - {{jsxref("Array.prototype.reduce()")}}
-  - : 주어진 콜백 함수를 가산기와 요소 각각에 대해 (왼쪽에서 오른쪽으로) 호출하여 하나의 값으로 줄인 결과를 반환합니다.
+  - : 배열의 각 요소(왼쪽에서 오른쪽으로)에 대해 사용자가 제공한 "리듀서" 콜백 함수를 실행하여 하나의 값으로 줄입니다.
 - {{jsxref("Array.prototype.reduceRight()")}}
-  - : 주어진 콜백 함수를 가산기와 요소 각각에 대해 (오른쪽에서 왼쪽으로) 호출하여 하나의 값으로 줄인 결과를 반환합니다.
+  - : 배열의 각 요소(오른쪽에서 왼쪽으로)에 대해 사용자가 제공한 "리듀서" 콜백 함수를 실행하여 하나의 값으로 줄입니다.
 - {{jsxref("Array.prototype.reverse()")}}
-  - : 배열의 요소 순서를 뒤집습니다. 즉 첫 번째 요소가 마지막이 되고 마지막이 첫 번째가 됩니다.
+  - : 배열 요소의 순서를 반대로 바꿉니다. (첫 번째가 마지막이 되고, 마지막이 첫 번째가 됩니다.)
 - {{jsxref("Array.prototype.shift()")}}
-  - : 배열에서 첫 번째 요소를 삭제하고, 그 요소를 반환합니다.
+  - : 배열에서 첫 번째 요소를 제거하고 해당 요소를 반환합니다.
 - {{jsxref("Array.prototype.slice()")}}
-  - : 배열의 일부를 추출한 새 배열을 반환합니다.
+  - : 호출 배열의 구획을 추출하고 새 배열을 반환합니다.
 - {{jsxref("Array.prototype.some()")}}
-  - : 배열의 어떤 요소가 주어진 판별 함수를 만족할 경우 `true`를 반환합니다.
+  - : 호출 배열의 요소 중 하나 이상이 제공된 테스트 함수를 만족하면 `true`를 반환합니다.
 - {{jsxref("Array.prototype.sort()")}}
-  - : 배열의 요소를 정렬하고 그 배열을 반환합니다.
+  - : 배열의 요소를 제자리 정렬하고 배열을 반환합니다.
 - {{jsxref("Array.prototype.splice()")}}
-  - : 배열에서 요소를 추가하거나 삭제합니다.
+  - : 배열에서 요소를 추가 및/또는 제거합니다.
 - {{jsxref("Array.prototype.toLocaleString()")}}
-  - : 배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.
+  - : 호출 배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.
+- {{jsxref("Array.prototype.toReversed()")}}
+  - : 원래 배열을 수정하지 않고, 요소가 역순으로 배열된 새 배열을 반환합니다.
+- {{jsxref("Array.prototype.toSorted()")}}
+  - : 원래 배열을 수정하지 않고, 오름차순으로 정렬된 요소가 있는 새 배열을 반환합니다.
+- {{jsxref("Array.prototype.toSpliced()")}}
+  - : 원래 배열을 수정하지 않고, 지정된 인덱스에서 일부 요소를 제거 및/또는 교체한 새 배열을 반환합니다.
 - {{jsxref("Array.prototype.toString()")}}
-  - : 배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
+  - : 호출 배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
 - {{jsxref("Array.prototype.unshift()")}}
-  - : 배열의 앞에 하나 이상의 요소를 추가하고, 배열의 변경된 `length`를 반환합니다.
+  - : 배열 앞쪽에 하나 이상의 요소를 추가하고, 배열의 새 `length`를 반환합니다.
 - {{jsxref("Array.prototype.values()")}}
-  - : 배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
-- {{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
-  - : 배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
+  - : 배열의 각 인덱스의 값을 포함하는 새 [배열 순회자](/ko/docs/Web/JavaScript/Guide/Iterators_and_generators) 객체를 반환합니다.
+- {{jsxref("Array.prototype.with()")}}
+  - : 원래 배열을 수정하지 않고, 지정된 인덱스의 요소를 지정된 값으로 바꾼 새 배열을 반환합니다.
+- [`Array.prototype[@@iterator]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
+  - : 기본적으로 [`values()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/values) 메서드의 별칭입니다.
 
 ## 예제
 
-### 배열 생성
+이 구획은 JavaScript에서 흔히 사용되는 배열 연산에 대한 몇 가지 예제를 제공합니다.
+
+> **참고:** 배열의 기초가 아직 익숙하지 않다면, 먼저 [JavaScript 첫걸음: 배열](/ko/docs/Learn/JavaScript/First_steps/Arrays)을 읽어보세요. 이곳은 [배열이 무엇인지](/ko/docs/Learn/JavaScript/First_steps/Arrays#배열이란) 설명하고 일반적인 배열 연산에 대한 다른 예제를 포함하고 있습니다.
 
-아래 예제에서는 길이 0의 배열 `msgArray` 을 생성하고, `msgArray[0]` 와 `msgArray[99]` 에 값을 할당하여 배열의 길이를 100으로 변경합니다.
+### 배열 만들기
+
+이 예제는 먼저 [배열 리터럴 표기법](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Array#배열_맅터럴_표기법)을 사용하고, 다음은 [`Array()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Array) 생성자를 사용하고, 마지막으로 문자열에서 배열을 생성하는 [`String.prototype.split()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split)을 사용하여 새 배열을 만드는 세 가지 방법을 보여 줍니다.
 
 ```js
-let msgArray = [];
-msgArray[0] = "Hello";
-msgArray[99] = "world";
+// 배열 리터럴 표기법을 사용하여 'fruits' 배열을 만듭니다.
+console.log(fruits.length);
+// 2
 
-if (msgArray.length === 100) {
-  console.log("길이가 100입니다.");
+// Array() 생성자를 사용하여 'fruits2' 배열을 만듭니다.
+const fruits2 = new Array("Apple", "Banana");
+console.log(fruits2.length);
+// 2
+
+// String.prototype.split()을 사용하여 'fruits3' 배열을 만듭니다.
+const fruits3 = "Apple, Banana".split(", ");
+console.log(fruits3.length);
+// 2
+```
+
+### 배열에서 문자열 만들기
+
+이 예제에서는 [`join()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 메서드를 사용하여 `fruits` 배열로 문자열을 만듭니다.
+
+```js
+const fruits = ["Apple", "Banana"];
+const fruitsString = fruits.join(", ");
+console.log(fruitsString);
+// "Apple, Banana"
+```
+
+### 배열 인덱스로 항목에 접근하기
+
+이 예제는 배열에서 해당 위치의 인덱스 번호를 지정하여 `fruits` 배열 항목에 접근하는 방법을 보여 줍니다.
+
+```js
+const fruits = ["Apple", "Banana"];
+
+// 배열의 첫 번째 요소의 인덱스는 항상 0입니다.
+fruits[0]; // Apple
+
+// 배열의 두 번째 요소의 인덱스는 항상 1입니다.
+fruits[1]; // Banana
+
+// 배열의 마지막 요소의 인덱스는 항상
+// 배열의 길이보다 1 작습니다.
+fruits[fruits.length - 1]; // Banana
+
+// 배열의 길이볻 큰 인덱스를 사용하면
+// undefined가 반환됩니다.
+fruits[99]; // undefined
+```
+
+### 배열에서 항목의 인덱스 찾기
+
+이 예제는 [`indexOf()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) 메서드를 사용하여 `fruits` 배열에서 문자열 `"Banana"`의 위치(인덱스)를 찾습니다.
+
+```js
+const fruits = ["Apple", "Banana"];
+console.log(fruits.indexOf("Banana"));
+// 1
+```
+
+### 배열에 특정 항목이 포함되어 있는지 확인
+
+이 예제는 `fruits` 배열에 `"Banana"`와 `"Cherry"`가 포함되어 있는지 확인하는 두 가지 방법을 보여줍니다. 먼저 [`includes()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 메서드를 사용한 다음, [`indexOf()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) 메서드를 사용하여 인덱스가 `-1`이 아닌지 테스트합니다.
+
+```js
+const fruits = ["Apple", "Banana"];
+
+fruits.includes("Banana"); // true
+fruits.includes("Cherry"); // false
+
+// indexOf()가 -1을 반환하지 않으면 배열에 지정된 항목이 포함되어 있습니다.
+fruits.indexOf("Banana") !== -1; // true
+fruits.indexOf("Cherry") !== -1; // false
+```
+
+### 배열에 항목 추가하기
+
+이 예제는 [`push()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 메서드를 사용하여 `fruits` 배열에 새 문자열을 추가합니다.
+
+```js
+const fruits = ["Apple", "Banana"];
+const newLength = fruits.push("Orange");
+console.log(fruits);
+// ["Apple", "Banana", "Orange"]
+console.log(newLength);
+// 3
+```
+
+### 배열에서 마지막 항목 제거하기
+
+이 예제는 [`pop()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) 메서드를 사용하여 `fruits` 배열에서 마지막 항목을 제거합니다.
+
+```js
+const fruits = ["Apple", "Banana", "Orange"];
+const removedItem = fruits.pop();
+console.log(fruits);
+// ["Apple", "Banana"]
+console.log(removedItem);
+// Orange
+```
+
+> **참고:** `pop()`은 배열에서 마지막 항목을 제거하는 데에만 사용할 수 있습니다. 배열의 끝에서 여러 항목을 제거하려면 다음 예제를 참조하세요.
+
+### 배열의 끝에서 여러 항목 제거하기
+
+이 예제는 [`splice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 메서드를 사용하여 `fruits` 배열에서 마지막 3개 항목을 제거합니다.
+
+```js
+const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
+const start = -3;
+const removedItems = fruits.splice(start);
+console.log(fruits);
+// ["Apple", "Banana"]
+console.log(removedItems);
+// ["Strawberry", "Mango", "Cherry"]
+```
+
+### 배열을 처음 N개의 항목으로만 잘라내기
+
+이 예제는 [`splice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 메서드를 사용하여 `fruits` 배열을 처음 두 항목으로만 잘라냅니다.
+
+```js
+const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
+const start = 2;
+const removedItems = fruits.splice(start);
+console.log(fruits);
+// ["Apple", "Banana"]
+console.log(removedItems);
+// ["Strawberry", "Mango", "Cherry"]
+```
+
+### 배열에서 첫 번째 항목 제거하기
+
+이 예제는 [`shift()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) 메서드를 사용하여 `fruits` 배열에서 첫 번째 항목을 제거합니다.
+
+```js
+const fruits = ["Apple", "Banana"];
+const removedItem = fruits.shift();
+console.log(fruits);
+// ["Banana"]
+console.log(removedItem);
+// Apple
+```
+
+> **참고:** `shift()`는 배열에서 첫 번째 항목을 제거하는 데에만 사용할 수 있습니다. 배열의 시작 부분에서 여러 항목을 제거하려면 다음 예제를 참조하세요.
+
+### 배열의 시작 부분에서 여러 항목 제거하기
+
+이 예제는 [`splice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 메서드를 사용하여 `fruits` 배열에서 처음 3개의 항목을 제거합니다.
+
+```js
+const fruits = ["Apple", "Strawberry", "Cherry", "Banana", "Mango"];
+const start = 0;
+const deleteCount = 3;
+const removedItems = fruits.splice(start, deleteCount);
+console.log(fruits);
+// ["Banana", "Mango"]
+console.log(removedItems);
+// ["Apple", "Strawberry", "Cherry"]
+```
+
+### 배열에 새로운 첫 번째 항목 추가하기
+
+이 예제는 [`unshift()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) 메서드를 사용하여 `fruits`배열의 인덱스 `0`에 새 항목을 추가하고 배열의 새 첫 번째 항목으로 만듭니다.
+
+```js
+const fruits = ["Banana", "Mango"];
+const newLength = fruits.unshift("Strawberry");
+console.log(fruits);
+// ["Strawberry", "Banana", "Mango"]
+console.log(newLength);
+// 3
+```
+
+### 인덱스로 단일 항목 제거하기
+
+이 예제는 [`splice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 메서드를 사용하여 `"Banana"`의 인덱스 위치를 지정하여 `fruits` 배열에서 문자열 `"Banana"`를 제거합니다.
+
+```js
+const fruits = ["Strawberry", "Banana", "Mango"];
+const start = fruits.indexOf("Banana");
+const deleteCount = 1;
+const removedItems = fruits.splice(start, deleteCount);
+console.log(fruits);
+// ["Strawberry", "Mango"]
+console.log(removedItems);
+// ["Banana"]
+```
+
+### 인덱스로 여러 항목 제거하기
+
+이 예제는 [`splice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 메서드를 사용하여 `fruits` 배열에서 문자열 `"Banana"`와 `"Strawberry"`를 제거하는데, `"Banana"`의 인덱스 위치와 제거할 총 항목 수를 지정하여 제거합니다.
+
+```js
+const fruits = ["Apple", "Banana", "Strawberry", "Mango"];
+const start = 1;
+const deleteCount = 2;
+const removedItems = fruits.splice(start, deleteCount);
+console.log(fruits);
+// ["Apple", "Mango"]
+console.log(removedItems);
+// ["Banana", "Strawberry"]
+```
+
+### 배열의 여러 항목 바꾸기
+
+이 예제는 [`splice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 메서드를 사용하여 `fruits` 배열의 마지막 2개 항목을 새 항목으로 바꿉니다.
+
+```js
+const fruits = ["Apple", "Banana", "Strawberry"];
+const start = -2;
+const deleteCount = 2;
+const removedItems = fruits.splice(start, deleteCount, "Mango", "Cherry");
+console.log(fruits);
+// ["Apple", "Mango", "Cherry"]
+console.log(removedItems);
+// ["Banana", "Strawberry"]
+```
+
+### 배열 순회하기
+
+이 예제에서는 [`for...of`](/ko/docs/Web/JavaScript/Reference/Statements/for...of) 루프를 사용하여 `fruits` 배열을 순회하며 각 항목을 콘솔에 기록합니다.
+
+```js
+const fruits = ["Apple", "Mango", "Cherry"];
+for (const fruit of fruits) {
+  console.log(fruit);
 }
+// Apple
+// Mango
+// Cherry
 ```
 
-### 2차원 배열 생성
+그러나 `for...of`는 배열을 순회하는 여러 가지 방법 중 하나일 뿐입니다. 더 많은 방법은 [루프와 순회](/ko/docs/Web/JavaScript/Guide/Loops_and_iteration)와, [`every()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every), [`filter()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`flatMap()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap), [`map()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [`reduce()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), [`reduceRight()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight) 메서드에 대한 문서, 그리고 [`forEach()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 메서드를 사용하는 다음 예시를 참조하세요.
+
+### 배열의 각 요소에 대해 함수 호출
 
-아래의 예제는 2차원 문자열 배열로 체스판을 생성합니다. 첫 번째 이동은 `board[6][4]`의 `'p'`를 `board[4][4]`로 복사하여 이루어집니다. 그 후 이전 위치 `[6][4]`는 빈 공간으로 만듭니다.
+이 예제는 [`forEach()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 메서드를 사용하여 `fruits` 배열의 각 요소에 대해 함수를 호출합니다. 이 함수는 각 항목이 항목의 인덱스 번호를 함께 콘솔에 기록합니다.
 
 ```js
-let board = [
+const fruits = ["Apple", "Mango", "Cherry"];
+fruits.forEach((item, index, array) => {
+  console.log(item, index);
+});
+// Apple 0
+// Mango 1
+// Cherry 2
+```
+
+### 여러 배열 병합하기
+
+이 예제는 [`concat()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) 메서드를 사용하여 `fruits` 배열을 `moreFruits` 배열과 병합해 새로운 `combinedFruits` 배열을 생성합니다. `fruits`와 `moreFruits`는 변경되지 않습니다.
+
+```js
+const fruits = ["Apple", "Banana", "Strawberry"];
+const moreFruits = ["Mango", "Cherry"];
+const combinedFruits = fruits.concat(moreFruits);
+console.log(combinedFruits);
+// ["Apple", "Banana", "Strawberry", "Mango", "Cherry"]
+
+// 'fruits' 배열은 변경되지 않습니다.
+console.log(fruits);
+// ["Apple", "Banana", "Strawberry"]
+
+// 'moreFruits' 배열도 변경되지 않습니다.
+console.log(moreFruits);
+// ["Mango", "Cherry"]
+```
+
+### 배열 복사하기
+
+이 예제는 기존 `fruits` 배열에서 새 배열을 만드는 세 가지 방법을 보여줍니다. 먼저 [전개 구문](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax)을 사용하고, [`from()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 메서드, 그리고 [`slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 메서드를 사용합니다.
+
+```js
+const fruits = ["Strawberry", "Mango"];
+
+// 전개 구문을 사용하여 복사본을 만듭니다.
+const fruitsCopy = [...fruits];
+// ["Strawberry", "Mango"]
+
+// from() 메서드를 사용하여 복사본을 만듭니다.
+const fruitsCopy2 = Array.from(fruits);
+// ["Strawberry", "Mango"]
+
+// slice() 메서드를 사용하여 복사본을 만듭니다.
+const fruitsCopy3 = fruits.slice();
+// ["Strawberry", "Mango"]
+```
+
+모든 내장 배열 복사 연산([전개 구문](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax), [`Array.from()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from), [`Array.prototype.slice()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), [`Array.prototype.concat()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat))은 [얕은 복사본](/ko/docs/Glossary/Shallow_copy)을 생성합니다. 대신 배열의 [깊은 복사본](/ko/docs/Glossary/Deep_copy)을 원한다면 {{jsxref("JSON.stringify()")}}를 사용하여 배열을 JSON 문자열로 변환한 다음, {{jsxref("JSON.parse()")}}를 사용하여 문자열을 원래 배열과 완전히 독립된 새 배열로 다시 변환할 수 있습니다.
+
+```js
+const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));
+```
+
+[`structuredClone()`](/ko/docs/Web/API/structuredClone) 메서드를 사용하여 깊은 복사본을 만들 수도 있는데, 이 메서드는 소스의 [전송 가능한 객체](/ko/docs/Web/API/Web_Workers_API/Transferable_objects)를 단순히 복제하는 것이 아니라 새 복사본으로 전송할 수 있다는 장점이 있습니다.
+
+마지막으로, 기존 배열을 새 변수에 할당해도 배열이나 그 요소의 복사본이 생성되지 않는다는 점을 이해하는 것이 중요합니다. 대신 새 변수는 기존 배열에 대한 참조 또는 별칭일 뿐이며, 기존 배열의 이름과 새 변수 이름은 완전히 동일한 객체에 대한 두 개의 이름일 뿐입니다(따라서 항상 [엄격하게 동일](/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#를_사용하는_엄격한_동등)한 것으로 평가됩니다). 따라서 기존 배열의 값이나 새 변수의 값을 조금이라도 변경하면, 다른 변수도 변경됩니다.
+
+```js
+const fruits = ["Strawberry", "Mango"];
+const fruitsAlias = fruits;
+// 'fruits'와 'fruitsAlias'는 동일한 객체이며, 엄격하게 동일합니다.
+fruits === fruitsAlias; // true
+// 'fruits' 배열에 대한 모든 변경 사항은 'fruitsAlias'도 변경합니다.
+fruits.unshift("Apple", "Banana");
+console.log(fruits);
+// ['Apple', 'Banana', 'Strawberry', 'Mango']
+console.log(fruitsAlias);
+// ['Apple', 'Banana', 'Strawberry', 'Mango']
+```
+
+### 2차원 배열 만들기
+
+다음 예제는 2차원 문자열 배열로 체스 판을 만듭니다. 첫 번째 이동은 `'p'`가 `board[6][4]`에서 `board[4][4]`로 복사되어 이루어집니다. 이전 위치 `[6][4]`는 빈칸이 됩니다.
+
+```js
+const board = [
   ["R", "N", "B", "Q", "K", "B", "N", "R"],
   ["P", "P", "P", "P", "P", "P", "P", "P"],
   [" ", " ", " ", " ", " ", " ", " ", " "],
@@ -428,17 +712,17 @@ let board = [
   ["r", "n", "b", "q", "k", "b", "n", "r"],
 ];
 
-console.log(board.join("\n") + "\n\n");
+console.log(`${board.join("\n")}\n\n`);
 
-// 폰을 앞으로 두 칸 전진
+// 킹의 폰을 2칸 앞으로 이동
 board[4][4] = board[6][4];
 board[6][4] = " ";
 console.log(board.join("\n"));
 ```
 
-결과는 다음과 같습니다.
+출력 결과입니다.
 
-```
+```plain
 R,N,B,Q,K,B,N,R
 P,P,P,P,P,P,P,P
  , , , , , , ,
@@ -458,7 +742,7 @@ p,p,p,p, ,p,p,p
 r,n,b,q,k,b,n,r
 ```
 
-### 배열을 사용하여 일련의 값을 테이블처럼 표시하기
+### 배열을 사용하여 값 집합을 표로 만들기
 
 ```js
 const values = [];
@@ -468,10 +752,10 @@ for (let x = 0; x < 10; x++) {
 console.table(values);
 ```
 
-결과는 다음과 같습니다.
+출력 결과입니다.
 
-```
-// 첫 번째 열은 인덱스
+```plain
+// 첫 번째 열은 인덱스입니다.
 0  1    0
 1  2    2
 2  4    8
@@ -484,7 +768,28 @@ console.table(values);
 9  512  162
 ```
 
-## 명세
+### 일치 결과를 사용하여 배열 만들기
+
+{{jsxref("RegExp")}}와 문자열 간의 일치 결과는 일치에 대한 정보를 제공하는 속성과 요소를 포함하는 JavaScript 배열을 생성할 수 있습니다. 이러한 배열은 {{jsxref("RegExp.prototype.exec()")}}와 {{jsxref("String.prototype.match()")}}에서 반환됩니다.
+
+예를 들어 다음과 같습니다.
+
+```js
+// 하나의 d, 하나 이상의 b, 하나의 d를 일치시킵니다.
+// 일치하는 b와 뒤따라오는 d를 기억합니다.
+// 대소문자는 무시.
+
+const myRe = /d(b+)(d)/i;
+const execResult = myRe.exec("cdbBdbsbz");
+
+console.log(execResult.input); // 'cdbBdbsbz'
+console.log(execResult.index); // 1
+console.log(execResult); // [ "dbBd", "bB", "d" ]
+```
+
+일치 결과에 대한 자세한 내용은 {{jsxref("RegExp.prototype.exec()")}}와 {{jsxref("String.prototype.match()")}} 페이지를 참조하세요.
+
+## 명세서
 
 {{Specifications}}
 
@@ -494,8 +799,6 @@ console.table(values);
 
 ## 같이 보기
 
-- JavaScript 안내서:
-  - [객체 속성 인덱싱](/ko/docs/Web/JavaScript/Guide/Working_with_Objects#객체_속성_인덱싱)
-  - [인덱스 컬렉션: `Array` 객체](/ko/docs/Web/JavaScript/Guide/Indexed_collections#array_객체)
-- [형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
-- [RangeError: invalid array length](/ko/docs/Web/JavaScript/Reference/Errors/Invalid_array_length)
+- [인덱스된 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections)
+- {{jsxref("TypedArray")}}
+- {{jsxref("ArrayBuffer")}}

From d284020f35bf94198b7de57e824af14e8361ba00 Mon Sep 17 00:00:00 2001
From: Javien Lee <kraccoon@kakao.com>
Date: Fri, 22 Sep 2023 07:10:46 +0900
Subject: [PATCH 065/268] ko: update Array.prototype.find() (#15571)

sync with b7ca46c94631967ecd9ce0fe36579be334a01275
---
 .../global_objects/array/find/index.md        | 194 +++++++++---------
 1 file changed, 94 insertions(+), 100 deletions(-)

diff --git a/files/ko/web/javascript/reference/global_objects/array/find/index.md b/files/ko/web/javascript/reference/global_objects/array/find/index.md
index c0fd4df5da6c54..b64b2c36c28807 100644
--- a/files/ko/web/javascript/reference/global_objects/array/find/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/find/index.md
@@ -1,74 +1,82 @@
 ---
 title: Array.prototype.find()
 slug: Web/JavaScript/Reference/Global_Objects/Array/find
+l10n:
+  sourceCommit: b7ca46c94631967ecd9ce0fe36579be334a01275
 ---
 
 {{JSRef}}
 
-**`find()`** 메서드는 주어진 판별 함수를 만족하는 **첫 번째 요소**의 **값**을 반환합니다. 그런 요소가 없다면 {{jsxref("undefined")}}를 반환합니다.
+{{jsxref("Array")}} 인스턴스의 **`find()`** 메서드는 제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 테스트 함수를 만족하는 값이 없으면 {{jsxref("undefined")}}가 반환됩니다.
 
-{{EmbedInteractiveExample("pages/js/array-find.html")}}
+- 배열에서 찾은 요소의 **인덱스**가 필요한 경우, {{jsxref("Array/findIndex", "findIndex()")}}를 사용하세요.
+- **값의 인덱스**를 찾아야 하는 경우, {{jsxref("Array/indexOf", "indexOf()")}}를 사용하세요. ({{jsxref("Array/findIndex", "findIndex()")}}와 유사하지만, 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다.)
+- 배열에 값이 **존재**하는지 찾아야 하는 경우, {{jsxref("Array/includes", "includes()")}}를 사용하세요.
+  이 역시 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다.
+- 제공된 테스트 함수를 만족하는 요소가 있는지 찾아야 하는 경우, {{jsxref("Array/some", "some()")}}을 사용하세요.
 
-찾은 요소의 값 대신 **인덱스**를 반환하는 {{jsxref("Array.findIndex", "findIndex()")}} 메서드도 살펴보세요.
-
-배열 요소의 위치를 찾고자 하는 경우에는 {{jsxref("Array.prototype.indexOf()")}}를 사용하세요.
-
-배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 {{jsxref("Array.prototype.indexOf()")}} 또는 {{jsxref("Array.prototype.includes()")}}를 사용세요.
+{{EmbedInteractiveExample("pages/js/array-find.html","shorter")}}
 
 ## 구문
 
-```js
-    arr.find(callback[, thisArg])
+```js-nolint
+find(callbackFn)
+find(callbackFn, thisArg)
 ```
 
 ### 매개변수
 
 - `callback`
-  - : 배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다.
+  - : 배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 [참](/ko/docs/Glossary/Truthy) 값을 반환하고, 그렇지 않으면 [거짓](/ko/docs/Glossary/Falsy) 값을 반환해야 합니다. 함수는 다음 인수를 사용하여 호출됩니다.
     - `element`
-      - : 콜백함수에서 처리할 현재 요소.
-    - `index`{{optional_inline}}
-      - : 콜백함수에서 처리할 현재 요소의 인덱스.
-    - `array`{{optional_inline}}
-      - : `find` 함수를 호출한 배열.
-- `thisArg`
-  - : 선택 항목. 콜백이 호출될 때 `this`로 사용할 객체.
+      - : 배열에서 현재 처리되고 있는 요소.
+    - `index`
+      - : 배열에서 현재 처리되고 있는 요소의 인덱스.
+    - `array`
+      - : `find()`가 호출된 배열.
+- `thisArg` {{optional_inline}}
+  - : `callbackFn`을 실행할 때 `this`로 사용할 값입니다. [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)를 참조하세요.
 
 ### 반환 값
 
-주어진 판별 함수를 만족하는 **첫 번째 요소**의 **값**. 그 외에는 {{jsxref("undefined")}}.
+제공된 테스트 함수를 만족하는 배열의 첫 번째 요소입니다. 테스트 함수를 만족하는 요소가 없으면, {{jsxref("undefined")}}가 반환됩니다.
 
 ## 설명
 
-`find` 메서드는 `callback` 함수가 참을 반환 할 때까지 해당 배열의 각 요소에 대해서 `callback` 함수를 실행합니다. 만약 어느 요소를 찾았다면 `find` 메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않았다면 {{jsxref("undefined")}}를 반환합니다. `callback`은 `0` 부터 `length - 1` 까지 배열의 모든 인덱스에 대해 호출되며, 값이 지정되지 않은 요소도 포함하여 모든 인덱스에 대해 호출됩니다. 따라서, 희소 배열 (sparse arrays)의 경우에는 값이 지정된 요소만 탐색하는 다른 메소드에 비해 더 비효율적입니다.
+`find()` 메서드는 [순회 메서드](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#순회_메서드)입니다. 이 메서드는 `callbackFn`이 [참](/ko/docs/Glossary/Truthy) 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출합니다. 그런 다음 `find()`는 해당 요소를 반환하고 배열 순회를 중지합니다. `callbackFn`이 [참](/ko/docs/Glossary/Truthy) 값을 반환하지 않으면, `find()`는 {{jsxref("undefined")}}를 반환합니다.
 
-`callback`은 다음의 세가지 인자를 가지고 호출됩니다: 요소의 값, 요소의 인덱스, 순회의 대상이 되는 배열.
+`callbackFn`은 값이 할당된 인덱스뿐만 아니라 배열의 모든 인덱스에 대해 호출됩니다. [희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)의 빈 슬롯은 `undefined`와 동일하게 동작합니다.
 
-`thisArg` 파라미터가 주어진 경우에는 제공되었다면 `thisArg`가 `callback`안에서 `this`로 사용되고, 그렇지 않은 경우 {{jsxref("undefined")}} 가 `this`로 사용됩니다.
+`find()`는 호출되는 배열을 변경하지 않지만, `callbackFn`으로 제공된 함수는 변경할 수 있습니다. 그러나 배열의 length는 `callbackFn`을 처음 호출하기 전에 저장된다는 점에 유의하세요. 따라서,
 
-`find`는 호출의 대상이 된 배열을 변경(mutate)하지 않습니다.
+- `callbackFn`은 `find()` 호출이 시작되었을 때 배열의 초기 length 값을 초과하여 추가된 요소는 방문하지 않습니다.
+- 이미 방문한 인덱스를 변경해도 `callbackFn`이 해당 인덱스에 대해 다시 호출되지 않습니다.
+- 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 `undefined`가 있는것 처럼 방문됩니다.
 
-`find`가 처리할 배열 요소의 범위는 첫 `callback`이 호출되기 전에 먼저 결정됩니다. `find`메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 `callback`이 호출되지 않습니다. 아직 `callback`이 호출되지 않았던 배열 요소가 `callback`에 의해서 변경된 경우, `find`가 해당 요소의 인덱스를 방문할 때의 값으로 `callback`함수에 전달될 것입니다. 즉, 삭제된 요소에도 `callback`이 호출됩니다.
+> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
+
+`find()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.
 
 ## 예제
 
-### 속성 중 하나를 사용하여 배열에서 객체 찾기
+### 배열에서 속성 중 하나로 객체 찾기
 
 ```js
-var inventory = [
+const inventory = [
   { name: "apples", quantity: 2 },
   { name: "bananas", quantity: 0 },
   { name: "cherries", quantity: 5 },
 ];
 
-function findCherries(fruit) {
+function isCherries(fruit) {
   return fruit.name === "cherries";
 }
 
-console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
+console.log(inventory.find(isCherries));
+// { name: 'cherries', quantity: 5 }
 ```
 
-#### ES2015 화살표 함수 사용하기
+#### 화살표 함수 및 구조 분해 사용
 
 ```js
 const inventory = [
@@ -77,18 +85,18 @@ const inventory = [
   { name: "cherries", quantity: 5 },
 ];
 
-const result = inventory.find((fruit) => fruit.name === "cherries");
+const result = inventory.find(({ name }) => name === "cherries");
 
 console.log(result); // { name: 'cherries', quantity: 5 }
 ```
 
 ### 배열에서 소수 찾기
 
-다음 예제에서는 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 {{jsxref("undefined")}}를 반환).
+다음 예제는 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 {{jsxref("undefined")}}를 반환합니다.).
 
 ```js
 function isPrime(element, index, array) {
-  var start = 2;
+  let start = 2;
   while (start <= Math.sqrt(element)) {
     if (element % start++ < 1) {
       return false;
@@ -97,88 +105,67 @@ function isPrime(element, index, array) {
   return element > 1;
 }
 
-console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, 소수 없음
 console.log([4, 5, 8, 12].find(isPrime)); // 5
 ```
 
-### 탐색 중 삭제된 배열 요소
+### 희소 배열에서 find() 사용하기
 
-다음 예제에서는 삭제되어 존재하지 않는 배열의 요소에도 `callback`이 호출되어 해당 시점의 값이 `callback`에 전달되는 것을 보여줍니다.
+희소 배열의 빈 슬롯은 `undefined`와 동일하게 동작합니다.
 
 ```js
-// Declare array with no element at index 2, 3 and 4
-var a = [0, 1, , , , 5, 6];
+// 2, 3, 4 인덱스에 요소가 없는 배열로 선언
+const array = [0, 1, , , , 5, 6];
 
-// Shows all indexes, not just those that have been assigned values
-a.find(function (value, index) {
-  console.log("Visited index " + index + " with value " + value);
+// 값이 있는 요소만이 아닌 모든 인덱스를 표시합니다.
+array.find((value, index) => {
+  console.log("방문 인덱스:", index, "값:", value);
 });
-// Shows all indexes, including deleted
-a.find(function (value, index) {
-  // Delete element 5 on first iteration
-  if (index == 0) {
-    console.log("Deleting a[5] with value " + a[5]);
-    delete a[5];
+// 방문 인덱스: 0 값: 0
+// 방문 인덱스: 1 값: 1
+// 방문 인덱스: 2 값: undefined
+// 방문 인덱스: 3 값: undefined
+// 방문 인덱스: 4 값: undefined
+// 방문 인덱스: 5 값: 5
+// 방문 인덱스: 6 값: 6
+
+// 삭제된 요소를 포함한 모든 인덱스를 표시합니다.
+array.find((value, index) => {
+  // 첫 번째 순회에서 요소 5 삭제
+  if (index === 0) {
+    console.log(array[5], "값인 array[5] 삭제");
+    delete array[5];
   }
-  // Element 5 is still visited even though deleted
-  console.log("Visited index " + index + " with value " + value);
+  // 삭제된 요소 5를 포함하여 모든 인덱스를 방문합니다.
+  console.log("방문 인덱스:", index, "값:", value);
 });
+// 5 값인 array[5] 삭제
+// 방문 인덱스: 0 값: 0
+// 방문 인덱스: 1 값: 1
+// 방문 인덱스: 2 값: undefined
+// 방문 인덱스: 3 값: undefined
+// 방문 인덱스: 4 값: undefined
+// 방문 인덱스: 5 값: undefined
+// 방문 인덱스: 6 값: 6
 ```
 
-## 폴리필
+### 배열이 아닌 객체에서 find() 호출하기
 
-`find`는 ECMAScript 2015 명세에 추가됐으므로 어떤 표준 구현체에서는 사용지 못할 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 `find`를 지원하지 않는 환경에서도 사용할 수 있습니다.
+`find()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음수가 아닌 정수인 각 속성에 접근합니다.
 
 ```js
-// https://tc39.github.io/ecma262/#sec-array.prototype.find
-if (!Array.prototype.find) {
-  Object.defineProperty(Array.prototype, "find", {
-    value: function (predicate) {
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length >>> 0;
-
-      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-      if (typeof predicate !== "function") {
-        throw new TypeError("predicate must be a function");
-      }
-
-      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-      var thisArg = arguments[1];
-
-      // 5. Let k be 0.
-      var k = 0;
-
-      // 6. Repeat, while k < len
-      while (k < len) {
-        // a. Let Pk be ! ToString(k).
-        // b. Let kValue be ? Get(O, Pk).
-        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-        // d. If testResult is true, return kValue.
-        var kValue = o[k];
-        if (predicate.call(thisArg, kValue, k, o)) {
-          return kValue;
-        }
-        // e. Increase k by 1.
-        k++;
-      }
-
-      // 7. Return undefined.
-      return undefined;
-    },
-    configurable: true,
-    writable: true,
-  });
-}
+const arrayLike = {
+  length: 3,
+  "-1": 0.1, // -1 < 0 이므로 find()에서 무시됩니다.
+  0: 2,
+  1: 7.3,
+  2: 4,
+};
+console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)));
+// 7.3
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -188,7 +175,14 @@ if (!Array.prototype.find) {
 
 ## 같이 보기
 
-- {{jsxref("Array.prototype.findIndex()")}} – 찾기 이후 인덱스 반환
-- {{jsxref("Array.prototype.includes()")}} – 배열에 어떤 값이 존재하는지 검사
-- {{jsxref("Array.prototype.filter()")}} – 매칭되는 모든 요소 찾기
-- {{jsxref("Array.prototype.every()")}} – 모든 요소에 대해서 검사
+- [`core-js`의 `Array.prototype.find` 폴리필](https://github.com/zloirock/core-js#ecmascript-array)
+- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections)
+- {{jsxref("Array")}}
+- {{jsxref("Array.prototype.findIndex()")}}
+- {{jsxref("Array.prototype.findLast()")}}
+- {{jsxref("Array.prototype.findLastIndex()")}}
+- {{jsxref("Array.prototype.includes()")}}
+- {{jsxref("Array.prototype.filter()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
+- {{jsxref("TypedArray.prototype.find()")}}

From b3ea06cb81d9705d7275be103dcf10da6616ac25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EB=B2=94?=
 <59330110+jinbekim@users.noreply.github.com>
Date: Fri, 22 Sep 2023 07:20:51 +0900
Subject: [PATCH 066/268] Update README.md (#15981)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`현재 translated-content 저장소는 .html과 .md 두 개의 확장자로 문서 편집을 할 수 있습니다.`
라는 문구가 혼동을 줄 수 있을것 같아 삭제 했습니다.
---
 docs/ko/README.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/ko/README.md b/docs/ko/README.md
index d06b264419e848..028c83edd5b9b5 100644
--- a/docs/ko/README.md
+++ b/docs/ko/README.md
@@ -42,10 +42,6 @@ PR 생성시에 한국 리뷰어들은 라운드 로빈 방식으로 배정이 
 
 - [ko-locale 현황판](https://github.com/mdn/translated-content/projects/2)
 
-### 파일 확장자
-
-현재 translated-content 저장소는 `.html`과 `.md` 두 개의 확장자로 문서 편집을 할 수 있습니다. **(자세한 내용은 [자주 묻는 질문](./faq.md) 5번을 참고해주세요.)**
-
 첫 기여자분들을 위해 다음 [issue 827](https://github.com/mdn/translated-content/issues/827)에 기여 방법을 작성했습니다. 참고해주세요.
 
 ## yari 빠른 사용법

From c5cb930ffb96f1a44539d1a4504b0216b644ed5a Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 22 Sep 2023 07:45:35 +0900
Subject: [PATCH 067/268] [ko]: add index.md for `web/glossary/grid_areas`
 (#16009)

[add]: add index.md for web/glossary/grid_areas
---
 files/ko/glossary/grid_areas/index.md | 82 +++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 files/ko/glossary/grid_areas/index.md

diff --git a/files/ko/glossary/grid_areas/index.md b/files/ko/glossary/grid_areas/index.md
new file mode 100644
index 00000000000000..e81f8107e6039c
--- /dev/null
+++ b/files/ko/glossary/grid_areas/index.md
@@ -0,0 +1,82 @@
+---
+title: 그리드 영역 (Grid Areas)
+slug: Glossary/Grid_Areas
+l10n:
+  sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+---
+
+{{GlossarySidebar}}
+
+**그리드 영역(grid area)**은 그리드의 직사각형 영역을 구성하는 하나 이상의 {{glossary("grid cell", "그리드 셀")}}입니다. [줄 기반 배치](/ko/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)를 사용하여 항목을 배치하거나 [이름이 있는 그리드 영역](/ko/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)을 사용하여 영역을 정의할 때 그리드 영역이 생성됩니다.
+
+![강조 표시된 그리드 영역을 보여주는 이미지](1_grid_area.png)
+
+그리드 영역은 본질적으로 직사각형'이어야 합니다'. 예를 들어, T자형 또는 L자형 그리드 영역을 생성하는 것을 불가능합니다.
+
+## 예제
+
+아래 예제에는 두 개의 그리드 요소가 있는 그리드 컨테이너가 있습니다. 그리드 컨테이너를 {{cssxref("grid-area")}} 속성으로 이름을 지정하고 {{cssxref("grid-template-areas")}}를 사용하여 그리드에 배치했습니다. 이렇게 하면, 두 개의 그리드 영역이 생성되는데, 하나는 4개의 그리드 셀을 덮고, 나머지 두 개는 포함됩니다.
+
+```css hidden
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper > div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+```
+
+```css
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+  grid-template-areas:
+    "a a b"
+    "a a b";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+```
+
+```html
+<div class="wrapper">
+  <div class="item1">Item</div>
+  <div class="item2">Item</div>
+</div>
+```
+
+{{ EmbedLiveSample('Example', '300', '280') }}
+
+## 같이 보기
+
+### 속성 참고서
+
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-area")}}
+
+### 추가 읽어보기
+
+- CSS 그리드 레이아웃 안내서:
+  - [그리드 레이아웃의 기본 개념](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+  - [그리드 템플릿 영역](/ko/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)
+- [CSS 그리드 레이아웃 명세서의 그리드 영역의 정의](https://drafts.csswg.org/css-grid/#grid-area-concept)

From 1c01ca67291554040f6ff432eb805d5fafdf088e Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 22 Sep 2023 07:47:11 +0900
Subject: [PATCH 068/268] [ko]: add index.md for `web/glossary/css_selector`
 (#15818)

[add]: add index.md for web/glossary/css_selector
---
 files/ko/glossary/css_selector/index.md | 88 +++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 files/ko/glossary/css_selector/index.md

diff --git a/files/ko/glossary/css_selector/index.md b/files/ko/glossary/css_selector/index.md
new file mode 100644
index 00000000000000..3d838f549b1060
--- /dev/null
+++ b/files/ko/glossary/css_selector/index.md
@@ -0,0 +1,88 @@
+---
+title: CSS 선택자 (Selector (CSS))
+slug: Glossary/CSS_Selector
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{GlossarySidebar}}
+
+**CSS 선택자**는 규칙이 일치하는 문서의 요소를 설명하는 CSS 규칙의 일부입니다. 일치하는 요소는 규칙에 지정된 스타일이 적용됩니다.
+
+## 예제
+
+이 CSS를 생각해보세요.
+
+```css
+p {
+  color: green;
+}
+
+div.warning {
+  width: 100%;
+  border: 2px solid yellow;
+  color: white;
+  background-color: darkred;
+  padding: 0.8em 0.8em 0.6em;
+}
+
+#customized {
+  font:
+    16px Lucida Grande,
+    Arial,
+    Helvetica,
+    sans-serif;
+}
+```
+
+이 선택자들은 `"p"` ({{HTMLElement("p")}} 요소 내부 텍스트에 녹색을 적용), `"div.warning"` ([class](/ko/docs/Web/HTML/Global_attributes/class) `"warning"`이 있는 모든 {{HTMLElement("div")}} 요소는 경고 상자처럼 보임) 및 `"#customized"` (ID가 `"customized"`인 요소의 기본 글꼴을 16픽셀 크기의 Lucida Grande 또는 몇 가지 대체 글꼴 중 하나로 설정) 입니다.
+
+그런 다음, 이 CSS를 다음과 같은 일부 HTML에 적용할 수 있습니다.
+
+```html
+<p>This is happy text.</p>
+
+<div class="warning">
+  Be careful! There are wizards present, and they are quick to anger!
+</div>
+
+<div id="customized">
+  <p>This is happy text.</p>
+
+  <div class="warning">
+    Be careful! There are wizards present, and they are quick to anger!
+  </div>
+</div>
+```
+
+결과 페이지 콘텐츠의 스타일은 다음과 같습니다.
+
+{{EmbedLiveSample("Example", 640, 240)}}
+
+## 같이 보기
+
+- CSS 소개에서 [CSS 선택자에 대해 더 알아보기](/ko/docs/Learn/CSS/Building_blocks/Selectors)
+- 기본 선택자
+
+  - [타입 선택자](/ko/docs/Web/CSS/Type_selectors) `elementname`
+  - [클래스 선택자](/ko/docs/Web/CSS/Class_selectors) `.classname`
+  - [ID 선택자](/ko/docs/Web/CSS/ID_selectors) `#idname`
+  - [범용 선택자](/ko/docs/Web/CSS/Universal_selectors) `* ns|* *|*`
+  - [속성 선택자](/ko/docs/Web/CSS/Attribute_selectors) `[attr=value]`
+  - [상태 선택자](/ko/docs/Web/CSS/Pseudo-classes) `a:active, a:visited`
+
+- 그룹화 선택자
+
+  - [선택자 목록](/ko/docs/Web/CSS/Selector_list) `A, B`
+
+- 결합자
+
+  - [인접 형제 선택자](/ko/docs/Web/CSS/Adjacent_sibling_combinator) `A + B`
+  - [일반 형제 선택자](/ko/docs/Web/CSS/General_sibling_combinator) `A ~ B`
+  - [자식 선택자](/ko/docs/Web/CSS/Child_combinator) `A > B`
+  - [하위 선택자](/ko/docs/Web/CSS/Descendant_combinator) `A B`
+
+- 의사 요소
+
+  - [의사 클래스](/ko/docs/Web/CSS/Pseudo-classes) `:`
+  - [의사 요소](/ko/docs/Web/CSS/Pseudo-elements) `::`

From 53ebdd806f74e2adc0df192d1f980d7e6bd8a184 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 22 Sep 2023 08:42:37 +0900
Subject: [PATCH 069/268] [ko]: add index.md for `web/glossary/cryptanalysis`
 (#15787)

[revise]: revise feedback
---
 files/ko/glossary/cryptanalysis/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/ko/glossary/cryptanalysis/index.md

diff --git a/files/ko/glossary/cryptanalysis/index.md b/files/ko/glossary/cryptanalysis/index.md
new file mode 100644
index 00000000000000..682aa05943134f
--- /dev/null
+++ b/files/ko/glossary/cryptanalysis/index.md
@@ -0,0 +1,15 @@
+---
+title: 암호 해독 (Cryptanalysis)
+slug: Glossary/Cryptanalysis
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**암호 해독**은 코드와 암호체계를 해독하는 방법을 연구하는 {{glossary("cryptography", "암호화")}}의 한 분야입니다.
+암호 해독은 특히 [무차별 대입 검색](https://en.wikipedia.org/wiki/Brute-force_search)보다 더 효율적인 방법으로 {{glossary("cipher","암호")}}를 해독하는 기술을 만듭니다. [빈도 분석](https://en.wikipedia.org/wiki/Frequency_analysis) 및 [우연 지수](https://en.wikipedia.org/wiki/Index_of_coincidence) 등의 전통적인 방법 외에도, 암호 해독에는 [선형 분석](https://en.wikipedia.org/wiki/Linear_cryptanalysis) 또는 [차분 분석](https://en.wikipedia.org/wiki/Differential_cryptanalysis)과 같이 고급 암호를 해독할 수 있는 최신 방법이 포함됩니다.
+
+## 같이 보기
+
+- 위키백과의 [암호분석](https://en.wikipedia.org/wiki/Cryptanalysis)

From f766234d41f9c5bbfb6e377217d9c5fdc90e5fe2 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 22 Sep 2023 08:50:07 +0900
Subject: [PATCH 070/268] [ko]: add index.md for `web/glossary/data_structure`
 (#15867)

[add]: add index.md for web/glossary/data_structure
---
 files/ko/glossary/data_structure/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 files/ko/glossary/data_structure/index.md

diff --git a/files/ko/glossary/data_structure/index.md b/files/ko/glossary/data_structure/index.md
new file mode 100644
index 00000000000000..8a50204bf7f640
--- /dev/null
+++ b/files/ko/glossary/data_structure/index.md
@@ -0,0 +1,14 @@
+---
+title: 데이터 구조 (Data structure)
+slug: Glossary/Data_structure
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**데이터 구조**는 '데이터'를 효율적으로 사용할 수 있도록 구성하는 특별한 방법입니다.
+
+## 같이 보기
+
+- 위키백과의 [데이터 구조](https://en.wikipedia.org/wiki/Data_structure)

From 47501a96629fbbd3098e3617762307ac52058040 Mon Sep 17 00:00:00 2001
From: SENNIER <111584238+Cxumhe@users.noreply.github.com>
Date: Fri, 22 Sep 2023 08:03:22 +0800
Subject: [PATCH 071/268] zh-cn: fix the url error (#16007)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../learn/css/building_blocks/a_cool_looking_box/index.md   | 6 +++---
 .../css/building_blocks/cascade_and_inheritance/index.md    | 6 +++---
 .../building_blocks/fundamental_css_comprehension/index.md  | 4 ++--
 files/zh-cn/learn/css/building_blocks/organizing/index.md   | 4 ++--
 .../css/building_blocks/selectors/combinators/index.md      | 6 +++---
 .../zh-cn/learn/css/building_blocks/styling_tables/index.md | 2 +-
 .../zh-cn/learn/css/building_blocks/the_box_model/index.md  | 4 ++--
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
index 628f4e06293f0a..7b5d7a8c6b4848 100644
--- a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
+++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.md
@@ -3,7 +3,7 @@ title: 一个漂亮的盒子
 slug: Learn/CSS/Building_blocks/A_cool_looking_box
 ---
 
-{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Building_blocks")}}
 
 在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。
 
@@ -38,7 +38,7 @@ slug: Learn/CSS/Building_blocks/A_cool_looking_box
 
 ### 样式化盒子
 
-给 {{htmlelement("p")}} 添加样式：
+给 {{htmlelement("div")}} 添加样式：
 
 - 一个对于大按钮来说合理的宽度，200 像素左右。
 - 一个对于大按钮来说合理的高度，并使文本纵向居中。
@@ -61,4 +61,4 @@ slug: Learn/CSS/Building_blocks/A_cool_looking_box
 
 如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。如果你是自学，可以很容易地在[Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294)或[Mozilla IRC](https://wiki.mozilla.org/IRC)的[#mdn](irc://irc.mozilla.org/mdn) IRC 频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！
 
-{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Building_blocks")}}
diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
index c2e87358475c69..95c01308416f68 100644
--- a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -3,7 +3,7 @@ title: 层叠与继承
 slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
 ---
 
-{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Cascade_layers", "Learn/CSS/Building_blocks")}}
 
 本文旨在让你理解 CSS 的一些最基本的概念——层叠、优先级和继承——这些概念决定着如何将 CSS 应用到 HTML 中，以及如何解决冲突。
 
@@ -264,10 +264,10 @@ CSS 的简写属性 [`all`](/zh-CN/docs/Web/CSS/all) 可以用于同时将这些
 
 ## 总结
 
-如果你理解了本文的大部分内容，那么就做得很好了——你已经开始熟悉 CSS 的基本机制。接下来，我们将详细讨论[选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)。
+如果你理解了本文的大部分内容，那么就做得很好了——你已经开始熟悉 CSS 的基本机制。接下来，我们将详细讨论[层叠层](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_layers)。
 
 如果你没有完全理解层叠、优先级和继承，也请不要担心！这绝对是我们到目前为止在课程中所涉及到的最复杂的事情，即使是专业的 web 开发人员有时也会觉得棘手。我们建议你在继续学习这门课程的过程中，反复阅读这篇文章几次，并继续思考它。
 
 如果你开始遇到样式没有按照预期应用的奇怪问题，请回到这里。这可能是一个特殊的问题。
 
-{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Cascade_layers", "Learn/CSS/Building_blocks")}}
diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
index 26c7e853007f40..72048c3addcc38 100644
--- a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -3,7 +3,7 @@ title: 基本的 CSS 理解
 slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 ---
 
-{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper", "Learn/CSS/Building_blocks")}}
 
 你已经在这个模块中了解到了很多内容，所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。
 
@@ -83,4 +83,4 @@ slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 
 如果你将此评估作为有组织的课程的一部分，你应该能够将你的工作交给你的老师/导师进行打分。如果你是自学的，那么你可以通过询问 [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294), 或在 [#mdn](irc://irc.mozilla.org/mdn)的 IRC 频道 [Mozilla IRC](https://wiki.mozilla.org/IRC) 中轻松获得打分指南。首先尝试练习 - 作弊学不到什么！
 
-{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper", "Learn/CSS/Building_blocks")}}
diff --git a/files/zh-cn/learn/css/building_blocks/organizing/index.md b/files/zh-cn/learn/css/building_blocks/organizing/index.md
index 0e4f5be004eb15..8fa3c36e68a93b 100644
--- a/files/zh-cn/learn/css/building_blocks/organizing/index.md
+++ b/files/zh-cn/learn/css/building_blocks/organizing/index.md
@@ -3,7 +3,7 @@ title: 组织 CSS
 slug: Learn/CSS/Building_blocks/Organizing
 ---
 
-{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension", "Learn/CSS/Building_blocks")}}
 
 在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的 CSS 文件很有挑战性。在本文中，我们将会简要看一下在编写你的 CSS 时，让它更加易于维护的一些最佳实践，以及你会在其他人那里看到的，用来增强可维护性的解决方案。
 
@@ -366,4 +366,4 @@ $base-color: #c6538c;
 
 你应该也有了探索[MDN CSS](/zh-CN/docs/Web/CSS)学习材料的剩余部分的技能。你可以查阅属性和值，探索我们的[CSS Cookbook](/zh-CN/docs/Web/CSS/Layout_cookbook)来了解可用的排布，在诸如[Guide to CSS Grid Layout](/zh-CN/docs/Web/CSS/CSS_grid_layout)的一些更加专门的指导里阅读更多。.
 
-{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension", "Learn/CSS/Building_blocks")}}
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.md b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.md
index c4793044bd315f..58b0b63fcc9256 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.md
+++ b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.md
@@ -3,7 +3,7 @@ title: 关系选择器
 slug: Learn/CSS/Building_blocks/Selectors/Combinators
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks")}}
 
 我们要了解的最后一种选择器被命名为关系选择器（Combinator），这是因为它们在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系的缘故。
 
@@ -103,6 +103,6 @@ ul > li[class="a"] {
 
 ## 继续学习
 
-这是我们选择器这节课的最后一节了。下面我们将会继续前进，学习 CSS 的另一个重要部分——[CSS 盒模型](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)。
+这是我们选择器这节课的最后一节了。下面我们将会继续前进，学习 CSS 的另一个重要部分——[层叠与继承](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)。
 
-{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks")}}
diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.md b/files/zh-cn/learn/css/building_blocks/styling_tables/index.md
index bceee17731eba6..f55d33a45979a2 100644
--- a/files/zh-cn/learn/css/building_blocks/styling_tables/index.md
+++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.md
@@ -3,7 +3,7 @@ title: 样式化表格
 slug: Learn/CSS/Building_blocks/Styling_tables
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
 
 设计一个 HTML 表格不是世界上最迷人的工作，但有时我们必须这样做。本文提供了一个使 HTML 表格看起来不错的指南，其中一些功能在前面的文章中已作详细介绍。
 
diff --git a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
index fae3296fc23d76..6000f9bcda2e0b 100644
--- a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
+++ b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md
@@ -3,7 +3,7 @@ title: 盒模型
 slug: Learn/CSS/Building_blocks/The_box_model
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_layers", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
 
 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
 
@@ -311,4 +311,4 @@ display 有一个特殊的值，它在内联和块之间提供了一个中间状
 
 在下一节课中，我们将看看如何使用[背景和边框](/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)来使你的普通盒子看起来更有趣。
 
-{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_layers", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

From 4e2c0c94158b7e8918f185abc916e98dc83c9d16 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 17 Sep 2023 14:51:29 +0900
Subject: [PATCH 072/268] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/window/opener/index.md | 37 +++++++++++++------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/files/ja/web/api/window/opener/index.md b/files/ja/web/api/window/opener/index.md
index c433b820c51ac8..e93c2672b4c3fd 100644
--- a/files/ja/web/api/window/opener/index.md
+++ b/files/ja/web/api/window/opener/index.md
@@ -1,30 +1,33 @@
 ---
-title: window.opener
+title: "Window: opener プロパティ"
+short-title: opener
 slug: Web/API/Window/opener
+l10n:
+  sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
 ---
 
-{{ApiRef}}
+{{APIRef("HTML DOM")}}
 
-## 概要
+{{domxref("Window")}} インターフェイスの **`opener`** プロパティは、 {{domxref("Window.open", "open()")}} によって、または [`target`](/ja/docs/Web/HTML/Element/a#target) 属性の付いたリンクの操作によって開かれたウィンドウを開いたウィンドウへの参照を返します。
 
-現在のウィンドウを開いたウィンドウへの参照を返します。
+言い換えれば、ウィンドウ `A` がウィンドウ `B` を開いた場合、 `B.opener` は `A` を返します。
 
-## 構文
+## 値
 
-```
-objRef = window.opener;
-```
+{{domxref("Window")}} 風のオブジェクトで、（{{domxref("window.open()")}} を使用するか、または [`target`](/ja/docs/Web/HTML/Element/a#target) 属性が設定されたリンクによって）現在のウィンドウを開いたウィンドウ（オープナー）を参照します。このウィンドウが他のウィンドウにリンクされたり作成されたりして開かれたものでない場合は [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) を返します。
 
-## 例
+オープナーが現在のページと同じオリジン上にない場合、オープナーオブジェクトの機能は制限されます。例えば、ウィンドウオブジェクトの変数と関数はアクセスすることができません。しかし、オープナーウィンドウのナビゲーションは利用可能です。これは、開かれたページが元のタブやウィンドウで URL を開くためのものであることを意味しています。場合によっては、これによりフィッシング攻撃が可能であり、元のウィンドウで開かれた信頼できるページが、新しく開かれたページによってフィッシングページに置き換えられてしまいます。
 
-```js
-if (window.opener != indexWin) {
-  referToTop(window.opener);
-}
-```
+以下の場合、ブラウザーは `window.opener` を生成せず、 [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) のままにします。
 
-## 注記
+- リンクに [`rel=noopener`](/ja/docs/Web/HTML/Attributes/rel#noopener) を指定するか、 `noopener` を {{domxref("Window.open", "windowFeatures")}} 引数に渡すことで、オープナーを消すことができます。
+- [`target`](/ja/docs/Web/HTML/Element/a#target) が `_blank` であるリンクによって開かれたウィンドウは、明示的に [`rel=opener`](/ja/docs/Web/HTML/Attributes/rel#opener) を要求しない限り、 `opener` になることはありません。
+- 値が `same-origin` である {{HTTPHeader("Cross-Origin-Opener-Policy")}} ヘッダーがあると、 `opener` を設定することができません。新しいウィンドウは異なる閲覧コンテキストで読み込まれるので、開くためのウィンドウを参照することはありません。
 
-別のウィンドウから（{{domxref("Window.open")}} を使用して）開かれたウィンドウは、主ウィンドウへの参照を `window.opener` として保持します。現在のウィンドウが別のウィンドウから開かれたものではない場合、このメソッドは NULL を返します。
+## 仕様書
 
-Windows Phone ブラウザは window\.opener をサポートしていません（Edge 25.10586.36.0 でテストしました）。opener が異なるセキュリティゾーンにある場合、IE でもサポートされていません。
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From df06c0829fa60d1d2aa5b79655c1d6a6a300a96c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 17 Sep 2023 23:47:10 +0900
Subject: [PATCH 073/268] =?UTF-8?q?2023/06/19=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/set/index.md     | 176 +++++++++++-------
 1 file changed, 110 insertions(+), 66 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/index.md b/files/ja/web/javascript/reference/global_objects/set/index.md
index 9925df21f41511..26b24045675657 100644
--- a/files/ja/web/javascript/reference/global_objects/set/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/index.md
@@ -1,6 +1,8 @@
 ---
 title: Set
 slug: Web/JavaScript/Reference/Global_Objects/Set
+l10n:
+  sourceCommit: ef30b142b03870b8ca70919f1a65a96736898c3a
 ---
 
 {{JSRef}}
@@ -11,15 +13,51 @@ slug: Web/JavaScript/Reference/Global_Objects/Set
 
 `Set` オブジェクトは値のコレクションです。 `Set` に**重複する値は格納出来ません**。 `Set` 内の値はコレクション内で一意になります。 `Set` はその要素について挿入順で反復処理を行うことができます。挿入順は、各要素が [`add`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/add) メソッドによって正常に `Set` に挿入された順番に対応します。
 
-仕様書では `Set` の実装について「平均アクセス時間がコレクション内の要素数に対して線形以下」であることが要求されています。したがって、計算量が O(N) よりも優れていれば、内部的にはハッシュテーブル（ O(1) ルックアップ)、探索木（　O(log(N) ルックアップ)、その他のデータ構造として表現することが可能です。
+仕様書では `Set` の実装について「平均アクセス時間がコレクション内の要素数に対して線形探索以下」であることが要求されています。したがって、計算量が O(N) よりも優れている限り、内部的にはハッシュ表（ルックアップは O(1)）、探索木（ルックアップは O(log(N))）、または他のデータ構造として表すことができます。
 
 ### 値の等価性
 
-値の等値性は、[Same-value-zero](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#同値ゼロ等価性) アルゴリズムに基づいています。(以前は [Same-value](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#object.is_を使用した同値等価性) を使用しており、0 と -0 は異なるものとして扱われていました。詳しくは[ブラウザーの互換性](#ブラウザーの互換性)の "Key equality for -0 and 0" を参照してください。) つまり、 `NaN` は `NaN` と同じとみなされ (例え `NaN !== NaN` であっても)、それ以外の値は `===` 演算子の挙動に従って等しいとみなされます。
+値の等値性は、 [SameValueZero](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#同値ゼロ等価性) アルゴリズムに基づいています。（以前は [SameValue](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#object.is_を使用した同値等価性) を使用しており、0 と -0 は異なるものとして扱われていました。詳しくは[ブラウザーの互換性](#ブラウザーの互換性)の "Key equality for -0 and 0" を参照してください。）つまり、 {{jsxref("NaN")}} は `NaN` と同じとみなされ（例え `NaN !== NaN` であっても）、それ以外の値は `===` 演算子の挙動に従って等しいとみなされます。
 
-### 性能
+### パフォーマンス
 
-`Set` の [`has`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/has) メソッドは、値が `Set` オブジェクト内にあるかどうかをチェックします。これは、以前に `Set` オブジェクトに追加された要素のほとんどを確認するよりも平均すると高速なアプローチを使用します。特に、 `Array` オブジェクトの `length` が `Set` オブジェクトの `size` と等しい場合、平均して [`Array.prototype.includes`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) メソッドより速くなります。
+[`has`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/has) メソッドは、値が `Set` 内にあるかどうかをチェックします。これは、以前に `Set` に追加された要素のほとんどを確認するよりも平均すると高速なアプローチを使用します。特に、 `Array` オブジェクトの `length` が `Set` オブジェクトの `size` と等しい場合、平均して [`Array.prototype.includes`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) メソッドより速くなります。
+
+### Set 風のブラウザー API
+
+ブラウザーの **`Set` 風オブジェクト**（または「集合風オブジェクト」）とは、[ウェブ API](/ja/docs/Web/API) の中で多くの点で `Set` のように動作するインターフェイスです。
+
+`Set` のように、要素はオブジェクトに追加した順番に反復処理することができます。
+`Set` 風オブジェクトと `Set` には、名前と動作が同じプロパティとメソッドもあります。
+しかし Set とは異なり、各アイテムには特定の定義済みの型しか使用できません。
+
+許可されている型には仕様書の IDL 定義に設定されています。
+例えば、 {{domxref("GPUSupportedFeatures")}} は `Set` 風オブジェクトですが、キーと値として文字列を使用する必要があります。
+これは下記の仕様 IDL で定義されています。
+
+```webidl
+interface GPUSupportedFeatures {
+  readonly setlike<DOMString>;
+};
+```
+
+`Set` 風オブジェクトは、読み取り専用か読み書き可能かのどちらかです（上記の IDL で `readonly` キーワードを確認してください。
+
+- 読み取り専用の `Set` 風オブジェクトには [`size`](#set.prototype.size) プロパティがあり、 [`entries()`](#set.prototype.entries), [`forEach()`](#set.prototype.foreach), [`has()`](#set.prototype.has), [`keys()`](#set.prototype.keys), [`values()`](#set.prototype.values), [`@@iterator`](#set.prototypeiterator) の各メソッドがあります。
+- 読み書き可能な `Set` 風オブジェクトには、それに加えて [`clear()`](#set.prototype.clear), [`delete()`](#set.prototype.delete), [`add()`](#set.prototype.add) の各メソッドがあります。
+
+メソッドとプロパティは `Set` の等価なエンティティと同じ動作をしますが、項目のの型に制限があります。
+
+以下のものが、読み取り専用の `Set` 風ブラウザーオブジェクトの例です。
+
+- {{domxref("GPUSupportedFeatures")}}
+- {{domxref("XRAnchorSet")}}
+
+以下のものが、読み書き可能な `Set` 風ブラウザーオブジェクトの例です。
+
+- {{domxref("CustomStateSet")}}
+- {{domxref("FontFaceSet")}}
+- {{domxref("Highlight")}}
 
 ## コンストラクター
 
@@ -28,40 +66,40 @@ slug: Web/JavaScript/Reference/Global_Objects/Set
 
 ## 静的プロパティ
 
-- {{jsxref("Set.@@species", "get Set[@@species]")}}
+- {{jsxref("Set/@@species", "Set[@@species]")}}
   - : 派生オブジェクトを生成するために使用されるコンストラクター関数です。
 
 ## インスタンスプロパティ
 
-- `Set.prototype[@@toStringTag]`
-  - : [`@@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列の `"Set"` です。 このプロパティは {{jsxref("Object.prototype.toString()")}} で利用されます。
+これらのプロパティは `Set.prototype` で定義されており、すべての `Set` インスタンスから共有されます。
+
+- {{jsxref("Object/constructor", "Set.prototype.constructor")}}
+  - : このインスタンスオブジェクトを生成したコンストラクター関数です。 `Set` インスタンスの場合、初期値は {{jsxref("Set/Set", "Set")}} コンストラクターです。
 - {{jsxref("Set.prototype.size")}}
   - : `Set` オブジェクト内の値の数を返します。
+- `Set.prototype[@@toStringTag]`
+  - : [`@@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列の `"Set"` です。 このプロパティは {{jsxref("Object.prototype.toString()")}} で利用されます。
 
 ## インスタンスメソッド
 
-- {{jsxref("Set.add", "Set.prototype.add(<var>value</var>)")}}
-  - : `value` を `Set` オブジェクトに追加します。`Set` オブジェクトを返します。
+- {{jsxref("Set.prototype.add()")}}
+  - : `Set` オブジェクト内に同じ値を持つ要素がまだ存在しなかった場合、指定した値を持つ新しい要素を `Set` オブジェクトに挿入します。
 - {{jsxref("Set.prototype.clear()")}}
   - : すべての要素を `Set` オブジェクトから取り除きます。
-- {{jsxref("Set.delete", "Set.prototype.delete(<var>value</var>)")}}
+- {{jsxref("Set.prototype.delete()")}}
   - : `value` に関連した要素を取り除き、要素の削除に成功したかどうかを示す論理値を返します。 `Set.prototype.has(value)` はその後は `false` を返します。
-- {{jsxref("Set.has", "Set.prototype.has(<var>value</var>)")}}
+- {{jsxref("Set.prototype.entries()")}}
+  - : `Set` オブジェクト内の各要素を **`[value, value]` の配列**の形で挿入順で返す、新しいイテレーターオブジェクトを返します。これは {{jsxref("Map")}} オブジェクトと似ていますが、それぞれの項目の _key_ が `Set` では _value_ と同じになります。
+- {{jsxref("Set.prototype.forEach()")}}
+  - : `Set` オブジェクト内に存在する各値に対して、挿入順に一度ずつ `callbackFn` を呼びます。`thisArg` 引数が指定された場合、それぞれの `callbackFn` の呼び出しにおいて `this` の値として使用されます。
+- {{jsxref("Set.prototype.has()")}}
   - : `Set` オブジェクト内に引数で与えられた値をもつ要素が存在するかどうかを示す論理値を返します。
-- {{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
-  - : `Set` オブジェクト内の各要素の**値**を挿入順に返す、新しいイテレーターオブジェクトを返します。
-- {{jsxref("Set.prototype.values()")}}
-  - : `Set` オブジェクト内の各要素の**値**を挿入順に返す、新しいイテレーターオブジェクトを返します。
 - {{jsxref("Set.prototype.keys()")}}
   - : {{jsxref("Set.prototype.values()")}} の別名です。
-- {{jsxref("Set.prototype.entries()")}}
-
-  - : `Set` オブジェクト内の各要素を **`[value, value]` の配列**の形で挿入順で返す、新しいイテレーターオブジェクトを返します。
-
-    これは {{jsxref("Map")}} オブジェクトと似ていますが、それぞれの項目の _key_ が `set` では _value_ と同じになります。
-
-- {{jsxref("Set.forEach", "Set.prototype.forEach(<var>callbackFn</var>[, <var>thisArg</var>])")}}
-  - : `Set` オブジェクト内に存在する各値に対して、挿入順に一度ずつ `callbackFn` を呼びます。`thisArg` 引数が指定された場合、それぞれの `callbackFn` の呼び出しにおいて `this` の値として使用されます。
+- {{jsxref("Set.prototype.values()")}}
+  - : `Set` オブジェクト内の各要素の**値**を挿入順に返す、新しいイテレーターオブジェクトを返します。
+- [`Set.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator)
+  - : `Set` オブジェクト内の各要素の**値**を挿入順に返す、新しいイテレーターオブジェクトを返します。
 
 ## 例
 
@@ -70,10 +108,10 @@ slug: Web/JavaScript/Reference/Global_Objects/Set
 ```js
 const mySet1 = new Set();
 
-mySet1.add(1); // Set [ 1 ]
-mySet1.add(5); // Set [ 1, 5 ]
-mySet1.add(5); // Set [ 1, 5 ]
-mySet1.add("some text"); // Set [ 1, 5, 'some text' ]
+mySet1.add(1); // Set(1) { 1 }
+mySet1.add(5); // Set(2) { 1, 5 }
+mySet1.add(5); // Set(2) { 1, 5 }
+mySet1.add("some text"); // Set(3) { 1, 5, 'some text' }
 const o = { a: 1, b: 2 };
 mySet1.add(o);
 
@@ -100,44 +138,52 @@ console.log(mySet1); // Set(5) { 1, "some text", {…}, {…}, 5 }
 
 ### Set の反復処理
 
+挿入順に要素を訪問する集合に対する反復処理です。
+
 ```js
-// セット内のアイテムを反復処理
-// アイテムのログ出力順: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
-for (let item of mySet1) console.log(item)
+for (const item of mySet1) {
+  console.log(item);
+}
+// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5
 
-// アイテムのログ出力順: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
-for (let item of mySet1.keys()) console.log(item)
+for (const item of mySet1.keys()) {
+  console.log(item);
+}
+// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5
 
-// アイテムのログ出力順: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
-for (let item of mySet1.values()) console.log(item)
+for (const item of mySet1.values()) {
+  console.log(item);
+}
+// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5
 
-// アイテムのログ出力順: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
-// （ここではキーと値は同じ）
-for (let [key, value] of mySet1.entries()) console.log(key)
+// ここではキーと値は同じ
+for (const [key, value] of mySet1.entries()) {
+  console.log(key);
+}
+// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5
 
 // Set オブジェクトを Array オブジェクトに Array.from で変換
-const myArr = Array.from(mySet1) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]
+const myArr = Array.from(mySet1); // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}, 5]
 
 // HTML 文書内であれば以下のものも動作する
-mySet1.add(document.body)
-mySet1.has(document.querySelector('body')) // true
+mySet1.add(document.body);
+mySet1.has(document.querySelector("body")); // true
 
 // Set と Array の間の変換
-const mySet2 = new Set([1, 2, 3, 4])
-mySet2.size                    // 4
-[...mySet2]                    // [1, 2, 3, 4]
+const mySet2 = new Set([1, 2, 3, 4]);
+console.log(mySet2.size); // 4
+console.log([...mySet2]); // [1, 2, 3, 4]
 
 // 交差する様子をシミュレートすることができる
-const intersection = new Set([...mySet1].filter(x => mySet2.has(x)))
+const intersection = new Set([...mySet1].filter((x) => mySet2.has(x)));
 
 // 差をシミュレートすることができる
-const difference = new Set([...mySet1].filter(x => !mySet2.has(x)))
+const difference = new Set([...mySet1].filter((x) => !mySet2.has(x)));
 
 // セット内の項目を forEach() で反復処理
-mySet2.forEach(function(value) {
-  console.log(value)
-})
-
+mySet2.forEach((value) => {
+  console.log(value);
+});
 // 1
 // 2
 // 3
@@ -148,7 +194,7 @@ mySet2.forEach(function(value) {
 
 ```js
 function isSuperset(set, subset) {
-  for (let elem of subset) {
+  for (const elem of subset) {
     if (!set.has(elem)) {
       return false;
     }
@@ -157,16 +203,16 @@ function isSuperset(set, subset) {
 }
 
 function union(setA, setB) {
-  let _union = new Set(setA);
-  for (let elem of setB) {
+  const _union = new Set(setA);
+  for (const elem of setB) {
     _union.add(elem);
   }
   return _union;
 }
 
 function intersection(setA, setB) {
-  let _intersection = new Set();
-  for (let elem of setB) {
+  const _intersection = new Set();
+  for (const elem of setB) {
     if (setA.has(elem)) {
       _intersection.add(elem);
     }
@@ -175,8 +221,8 @@ function intersection(setA, setB) {
 }
 
 function symmetricDifference(setA, setB) {
-  let _difference = new Set(setA);
-  for (let elem of setB) {
+  const _difference = new Set(setA);
+  for (const elem of setB) {
     if (_difference.has(elem)) {
       _difference.delete(elem);
     } else {
@@ -187,8 +233,8 @@ function symmetricDifference(setA, setB) {
 }
 
 function difference(setA, setB) {
-  let _difference = new Set(setA);
-  for (let elem of setB) {
+  const _difference = new Set(setA);
+  for (const elem of setB) {
     _difference.delete(elem);
   }
   return _difference;
@@ -206,13 +252,13 @@ symmetricDifference(setA, setC); // returns Set {1, 2, 5, 6}
 difference(setA, setC); // returns Set {1, 2}
 ```
 
-### Array オブジェクトとの関係
+### 配列との関係
 
 ```js
-let myArray = ["value1", "value2", "value3"];
+const myArray = ["value1", "value2", "value3"];
 
 // 通常の Set コンストラクターを使用して、 Array を Set に変換
-let mySet = new Set(myArray);
+const mySet = new Set(myArray);
 
 mySet.has("value1"); // returns true
 
@@ -235,7 +281,7 @@ console.log([...new Set(numbers)]);
 ### 文字列との関係
 
 ```js
-let text = "India";
+const text = "India";
 
 const mySet = new Set(text); // Set(5) {'I', 'n', 'd', 'i', 'a'}
 mySet.size; // 5
@@ -248,12 +294,10 @@ new Set("firefox"); // Set(6) { "f", "i", "r", "e", "o", "x" }
 ### Set を使用して、リスト中の値の一意性を保証
 
 ```js
-const array = Array.from(document.querySelectorAll("[id]")).map(function (e) {
-  return e.id;
-});
+const array = Array.from(document.querySelectorAll("[id]")).map((e) => e.id);
 
 const set = new Set(array);
-console.assert(set.size == array.length);
+console.assert(set.size === array.length);
 ```
 
 ## 仕様書

From 52d3273e5b6eb43bdf62a6bf18e0fbd9bb635402 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 17 Sep 2023 23:51:20 +0900
Subject: [PATCH 074/268] =?UTF-8?q?2023/03/27=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/set/set/index.md  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/set/index.md b/files/ja/web/javascript/reference/global_objects/set/set/index.md
index 15055c6a146e79..9e5e3eb6fe75ae 100644
--- a/files/ja/web/javascript/reference/global_objects/set/set/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/set/index.md
@@ -1,21 +1,25 @@
 ---
 title: Set() コンストラクター
 slug: Web/JavaScript/Reference/Global_Objects/Set/Set
+l10n:
+  sourceCommit: 84aaeee9a64e1bfe002837468eb798e5d5eb2bbe
 ---
 
 {{JSRef}}
 
-**`Set` コンストラクター**は、あらゆる型の一意な[プリミティブ値](/ja/docs/Glossary/Primitive)やオブジェクト参照を格納する `Set` オブジェクトを生成します。
+**`Set()`** コンストラクターは {{jsxref("Set")}} オブジェクトを生成します。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}
 
 ## 構文
 
-```js
-new Set();
-new Set(iterable);
+```js-nolint
+new Set()
+new Set(iterable)
 ```
 
+> **メモ:** `Set()` は [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) を付けてのみ構築することができ案す。 `new` 無しで呼び出そうとすると {{jsxref("TypeError")}} が発生します。
+
 ### 引数
 
 - `iterable` {{optional_inline}}
@@ -33,13 +37,13 @@ new Set(iterable);
 ### `Set` オブジェクトの使用
 
 ```js
-let mySet = new Set();
+const mySet = new Set();
 
 mySet.add(1); // Set [ 1 ]
 mySet.add(5); // Set [ 1, 5 ]
 mySet.add(5); // Set [ 1, 5 ]
 mySet.add("some text"); // Set [ 1, 5, 'some text' ]
-let o = { a: 1, b: 2 };
+const o = { a: 1, b: 2 };
 mySet.add(o);
 ```
 
@@ -53,5 +57,5 @@ mySet.add(o);
 
 ## 関連情報
 
-- `Set` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#set) で利用できます
+- [`Set` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#set)
 - {{jsxref("Set")}}

From 84217831505d2fe63a3a21422fe5fa9ced1a7d4d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 17 Sep 2023 23:59:40 +0900
Subject: [PATCH 075/268] =?UTF-8?q?2023/04/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/set/@@species/index.md        | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/@@species/index.md b/files/ja/web/javascript/reference/global_objects/set/@@species/index.md
index 9b0364583c5fe3..a6eaf5f38e65de 100644
--- a/files/ja/web/javascript/reference/global_objects/set/@@species/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/@@species/index.md
@@ -1,6 +1,8 @@
 ---
-title: get Set[@@species]
+title: Set[@@species]
 slug: Web/JavaScript/Reference/Global_Objects/Set/@@species
+l10n:
+  sourceCommit: bf81c9ed7de8cfd94cf1fc7f77e23b987f753a8b
 ---
 
 {{JSRef}}
@@ -15,27 +17,27 @@ Set[Symbol.species]
 
 ### 返値
 
-`get @@species` が呼び出されたコンストラクタ (`this`) の値です。この返値は、コピーされた `Set` インスタンスを生成するために使用されます。
+`get @@species` が呼び出されたコンストラクター (`this`) の値です。この返値は、コピーされた `Set` インスタンスを生成するために使用されます。
 
 ## 解説
 
 `@@species` アクセサープロパティは、 `Set` オブジェクトの既定のコンストラクターを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドすることができます。
 
-> **Note:** このプロパティは現在、いずれの `Set` のメソッドでも使用されていません。
+> **メモ:** このプロパティは現在、 `Set` のどのメソッドでも使用されていません。
 
 ## 例
 
-### 通常のオブジェクトの spicies
+### 通常のオブジェクトの species
 
-`@@species` プロパティは、`Set` オブジェクトの既定のコンストラクター関数である `Set` コンストラクターを返します。
+`@@species` プロパティは、既定のコンストラクター関数、すなわち `Set` の `Set` コンストラクターを返します。
 
 ```js
 Set[Symbol.species]; // Set() 関数
 ```
 
-### 派生オブジェクトの spicies
+### 派生オブジェクトの species
 
-派生コレクションオブジェクト（たとえば、独自の集合である `MySet`）では、`MySet` の species は `MySet` コンストラクターです。しかし、派生クラスのメソッドで、親である `Set` オブジェクトを返すためにこれをオーバーライドしたいかもしれません。
+独自の `Set` のサブクラス、例えば `MySet` のインスタンス内では、 `MySet` の species は `MySet` コンストラクターです。しかし、派生クラスのメソッドで、親である `Set` オブジェクトを返すためにこれをオーバーライドしたいかもしれません。
 
 ```js
 class MySet extends Set {

From fbd5ed912e0aa2406b05189738a26ce89d7f9ab4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 00:02:10 +0900
Subject: [PATCH 076/268] =?UTF-8?q?2023/04/12=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../javascript/reference/global_objects/set/size/index.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/size/index.md b/files/ja/web/javascript/reference/global_objects/set/size/index.md
index 88fd62563d85a8..c86c0e7e7451bf 100644
--- a/files/ja/web/javascript/reference/global_objects/set/size/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/size/index.md
@@ -1,11 +1,13 @@
 ---
 title: Set.prototype.size
 slug: Web/JavaScript/Reference/Global_Objects/Set/size
+l10n:
+  sourceCommit: 16bacf2194dc9e9ff6ee5bcc65316547cf88a8d9
 ---
 
 {{JSRef}}
 
-**`size`** アクセサープロパティは {{jsxref("Set")}} オブジェクト内の（固有の）要素の数を返します。
+**`size`** は {{jsxref("Set")}} インスタンスのアクセサープロパティで、この集合内の（固有の）要素の数を返します。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}
 
@@ -18,12 +20,12 @@ slug: Web/JavaScript/Reference/Global_Objects/Set/size
 ### size の使用
 
 ```js
-var mySet = new Set();
+const mySet = new Set();
 mySet.add(1);
 mySet.add(5);
 mySet.add("some text");
 
-mySet.size; // 3
+console.log(mySet.size); // 3
 ```
 
 ## 仕様書

From 2c603f0c30205736c3462da208c6a41de4e7d7c3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 01:45:38 +0900
Subject: [PATCH 077/268] =?UTF-8?q?2023/09/01=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/set/delete/index.md       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/delete/index.md b/files/ja/web/javascript/reference/global_objects/set/delete/index.md
index 06cf2046a81ae0..ca80829ef847c7 100644
--- a/files/ja/web/javascript/reference/global_objects/set/delete/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/delete/index.md
@@ -1,18 +1,20 @@
 ---
 title: Set.prototype.delete()
 slug: Web/JavaScript/Reference/Global_Objects/Set/delete
+l10n:
+  sourceCommit: 88d71e500938fa8ca969fe4fe3c80a5abe23d767
 ---
 
 {{JSRef}}
 
-**`delete()`** メソッドは、指定された値が設定されていれば、 `Set` オブジェクトから取り除きます。
+**`delete()`** は {{jsxref("Set")}} インターフェイスのメソッドで、指定された値がこの集合にあれば、取り除きます。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}
 
 ## 構文
 
-```js
-delete value;
+```js-nolint
+setInstance.delete(value)
 ```
 
 ### 引数
@@ -50,7 +52,7 @@ setObj.add({ x: 10, y: 20 }); // セットにオブジェクトを追加
 setObj.add({ x: 20, y: 30 }); // セットにオブジェクトを追加
 
 // `x > 10` のポイントを削除
-setObj.forEach(function (point) {
+setObj.forEach((point) => {
   if (point.x > 10) {
     setObj.delete(point);
   }

From 93b3709cdc57b132001fb5f42089a468ff5e32cb Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 01:22:00 +0900
Subject: [PATCH 078/268] =?UTF-8?q?2023/08/25=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/set/@@iterator/index.md    | 23 ++++++++++-----
 .../global_objects/set/clear/index.md         | 24 +++++++++------
 .../global_objects/set/entries/index.md       | 18 ++++++++----
 .../global_objects/set/keys/index.md          | 29 +++++++++++++++++--
 .../global_objects/set/values/index.md        | 21 +++++++++-----
 5 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/@@iterator/index.md b/files/ja/web/javascript/reference/global_objects/set/@@iterator/index.md
index 1f48fd3df3e4f4..e2a74ad54c8369 100644
--- a/files/ja/web/javascript/reference/global_objects/set/@@iterator/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/@@iterator/index.md
@@ -1,31 +1,37 @@
 ---
 title: Set.prototype[@@iterator]()
 slug: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
+l10n:
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-`Set` オブジェクトの **`@@iterator`** メソッドは[反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装し、[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) や [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of) 文などの反復可能オブジェクトを期待するほとんどの文法で `Set` を利用できるようにします。`@@iterator` メソッドは `Set` の値を返すイテレーターを返します。
+**`[@@iterator]()`** は {{jsxref("Set")}} インスタンスのメソッドで、[反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装しており、 `Set` オブジェクトを、反復可能オブジェクトを期待するほとんどの構文、例えば[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) や {{jsxref("Statements/for...of", "for...of")}} ループなどで利用できるようにします。これは、挿入順に集合の値を返す[集合イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。
 
-**`@@iterator`** プロパティの初期値は {{jsxref("Set.prototype.values()", "values")}} プロパティの初期値と同じ関数オブジェクトです。
+**`@@iterator`** プロパティの初期値は {{jsxref("Set.prototype.values")}} プロパティの初期値と同じ関数オブジェクトです。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}
 
 ## 構文
 
-```js
-mySet[Symbol.iterator]();
+```js-nolint
+set[Symbol.iterator]()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-返値は {{jsxref("Set.prototype.values()", "values()")}} 同様、`Set` の値を返す新しい反復可能なイテレーターオブジェクトです。
+{{jsxref("Set.prototype.values()")}} と同じく、値の集合を生成する新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。
 
 ## 例
 
-### for..of とともに \[@@iterator]\() を使う
+### for...of ループを使用した反復処理
 
-このメソッドを直接呼び出す必要はほとんどないことに注意してください。`iterator` メソッドの存在によって `Set` オブジェクトは[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)になり、`for...of` 文のような反復処理の構文は自動的にこのメソッドを呼ぶことで反復処理を行うためのイテレーターを取得できるようになります。
+このメソッドを直接呼び出す必要はほとんどないことに注意してください。`@@iterator` メソッドの存在によって `Set` オブジェクトは[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)になり、`for...of` 文のような反復処理の構文は自動的にこのメソッドを呼ぶことで反復処理を行うためのイテレーターを取得できるようになります。
 
 ```js
 const mySet = new Set();
@@ -65,6 +71,9 @@ console.log(setIter.next().value); // Object
 
 ## 関連情報
 
+- {{jsxref("Set")}}
 - {{jsxref("Set.prototype.entries()")}}
 - {{jsxref("Set.prototype.keys()")}}
 - {{jsxref("Set.prototype.values()")}}
+- {{jsxref("Symbol.iterator")}}
+- [反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git a/files/ja/web/javascript/reference/global_objects/set/clear/index.md b/files/ja/web/javascript/reference/global_objects/set/clear/index.md
index c234186d1cdece..7eb92d288a86ce 100644
--- a/files/ja/web/javascript/reference/global_objects/set/clear/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/clear/index.md
@@ -1,40 +1,46 @@
 ---
 title: Set.prototype.clear()
 slug: Web/JavaScript/Reference/Global_Objects/Set/clear
+l10n:
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`clear()`** メソッドは、 `Set` オブジェクトからすべての要素を取り除きます。
+**`clear()`** は {{jsxref("Set")}} インターフェイスのメソッドで、この集合からすべての要素を取り除きます。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}
 
 ## 構文
 
-```js
-clear();
+```js-nolint
+clear()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-{{jsxref("undefined")}} です。
+なし ({{jsxref("undefined")}})。
 
 ## 例
 
 ### clear() メソッドの使用
 
 ```js
-var mySet = new Set();
+const mySet = new Set();
 mySet.add(1);
 mySet.add("foo");
 
-mySet.size; // 2
-mySet.has("foo"); // true
+console.log(mySet.size); // 2
+console.log(mySet.has("foo")); // true
 
 mySet.clear();
 
-mySet.size; // 0
-mySet.has("bar"); // false
+console.log(mySet.size); // 0
+console.log(mySet.has("bar")); // false
 ```
 
 ## 仕様書
diff --git a/files/ja/web/javascript/reference/global_objects/set/entries/index.md b/files/ja/web/javascript/reference/global_objects/set/entries/index.md
index c23ffd12e1707c..6d41f3c90a18b0 100644
--- a/files/ja/web/javascript/reference/global_objects/set/entries/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/entries/index.md
@@ -1,35 +1,41 @@
 ---
 title: Set.prototype.entries()
 slug: Web/JavaScript/Reference/Global_Objects/Set/entries
+l10n:
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`entries()`** メソッドは、新しい[イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)オブジェクトを返します。これは **`[value, value]` の配列**で `Set` オブジェクトの各要素を挿入順に返します。 `Set` オブジェクトは、`Map` オブジェクトのように `key` を持つことはありません。しかしながら、`Map` オブジェクトと似た API をもつために、それぞれの*項目*は _key_ と _value_ に対して同じ値を持ちます。そのため、配列 `[value, value]` が返されます。
+**`entries()`** は {{jsxref("Set")}} インターフェイスのメソッドで、集合の新しい[イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。これは **`[value, value]` の配列**の形で集合の各要素を挿入順に返します。 `Set` オブジェクトは、`Map` オブジェクトのように `key` を持つことはありません。しかしながら、`Map` オブジェクトと似た API をもつために、それぞれの項目は _key_ と _value_ に対して同じ値を持ちます。そのため、配列 `[value, value]` が返されます。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}
 
 ## 構文
 
-```js
-entries();
+```js-nolint
+entries()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-**`[value, value]` の配列**で `Set` オブジェクトの各要素を挿入順に返す、新しいイテレーターオブジェクトです。
+新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。
 
 ## 例
 
 ### entries() の使用
 
 ```js
-var mySet = new Set();
+const mySet = new Set();
 mySet.add("foobar");
 mySet.add(1);
 mySet.add("baz");
 
-var setIter = mySet.entries();
+const setIter = mySet.entries();
 
 console.log(setIter.next().value); // ["foobar", "foobar"]
 console.log(setIter.next().value); // [1, 1]
diff --git a/files/ja/web/javascript/reference/global_objects/set/keys/index.md b/files/ja/web/javascript/reference/global_objects/set/keys/index.md
index 27663080530b44..b47b4c003b4943 100644
--- a/files/ja/web/javascript/reference/global_objects/set/keys/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/keys/index.md
@@ -1,11 +1,13 @@
 ---
 title: Set.prototype.keys()
 slug: Web/JavaScript/Reference/Global_Objects/Set/keys
+l10n:
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`keys()`** メソッドは [`values()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/values) メソッドのエイリアスです。
+**`keys()`** は {{jsxref("Set")}} インターフェイスのメソッドで、 [`values()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/values) メソッドの別名です。
 
 ## 構文
 
@@ -13,9 +15,32 @@ slug: Web/JavaScript/Reference/Global_Objects/Set/keys
 keys()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-与えられた `Set` の各要素の値を挿入順で含んだ新しいイテレーターオブジェクト。
+新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。
+
+## 例
+
+### keys() の使用
+
+`keys()` メソッドは {{jsxref("Set/values", "values()")}} メソッドとまったく同じです。
+
+```js
+const mySet = new Set();
+mySet.add("foo");
+mySet.add("bar");
+mySet.add("baz");
+
+const setIter = mySet.keys();
+
+console.log(setIter.next().value); // "foo"
+console.log(setIter.next().value); // "bar"
+console.log(setIter.next().value); // "baz"
+```
 
 ## 仕様書
 
diff --git a/files/ja/web/javascript/reference/global_objects/set/values/index.md b/files/ja/web/javascript/reference/global_objects/set/values/index.md
index c94cbb329b1c7b..072cd691b518b6 100644
--- a/files/ja/web/javascript/reference/global_objects/set/values/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/values/index.md
@@ -1,37 +1,41 @@
 ---
 title: Set.prototype.values()
 slug: Web/JavaScript/Reference/Global_Objects/Set/values
+l10n:
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`values()`** メソッドは、新しい[イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)オブジェクトを返します。これは `Set` オブジェクトの各要素の値を挿入順に返します。
-
-> **メモ:** **`keys()`** メソッドは（{{jsxref("Map")}} オブジェクトと似せるため）このメソッドに対するエイリアスになっています。まったく同じように動作し、 `Set` の各要素の**値**を返します。
+**`values()`** は {{jsxref("Set")}} インターフェイスのメソッドで、集合の新しい[イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。これはこの集合のそれぞれの要素をの値を挿入順に返します。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}
 
 ## 構文
 
-```js
-values();
+```js-nolint
+values()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-新しいイテレーターオブジェクトで、この `Set` オブジェクト内のそれぞれの要素の値を返します。
+新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。
 
 ## 例
 
 ### values() の使用
 
 ```js
-var mySet = new Set();
+const mySet = new Set();
 mySet.add("foo");
 mySet.add("bar");
 mySet.add("baz");
 
-var setIter = mySet.values();
+const setIter = mySet.values();
 
 console.log(setIter.next().value); // "foo"
 console.log(setIter.next().value); // "bar"
@@ -49,3 +53,4 @@ console.log(setIter.next().value); // "baz"
 ## 関連情報
 
 - {{jsxref("Set.prototype.entries()")}}
+- {{jsxref("Set.prototype.keys()")}}

From 743bcb140765d3dd1f84ad26e33f1ff38b4a834a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 01:59:09 +0900
Subject: [PATCH 079/268] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/set/foreach/index.md       | 72 ++++++-------------
 1 file changed, 21 insertions(+), 51 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/foreach/index.md b/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
index 6887d05bb3ee56..d9f5fa5bf99a26 100644
--- a/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
@@ -1,66 +1,36 @@
 ---
 title: Set.prototype.forEach()
 slug: Web/JavaScript/Reference/Global_Objects/Set/forEach
+l10n:
+  sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
 ---
 
 {{JSRef}}
 
-**`forEach()`** メソッドは、与えられた関数を `Set` オブジェクトの各値に対して一回ずつ、挿入順で実行します。
+**`forEach()`** は {{jsxref("Set")}} インターフェイスのメソッドで、指定された関数をこの集合のそれぞれの値に対して一回ずつ、挿入順で実行します。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}
 
 ## 構文
 
-```js
-// Arrow function
-forEach(() => {
-  /* ... */
-});
-forEach((value) => {
-  /* ... */
-});
-forEach((value, key) => {
-  /* ... */
-});
-forEach((value, key, set) => {
-  /* ... */
-});
-
-// Callback function
-forEach(callbackFn);
-forEach(callbackFn, thisArg);
-
-// Inline callback function
-forEach(function () {
-  /* ... */
-});
-forEach(function (value) {
-  /* ... */
-});
-forEach(function (value, key) {
-  /* ... */
-});
-forEach(function (value, key, set) {
-  /* ... */
-});
-forEach(function (value, key, set) {
-  /* ... */
-}, thisArg);
+```js-nolint
+forEach(callbackFn)
+forEach(callbackFn, thisArg)
 ```
 
 ### 引数
 
 - `callback`
+  - : この集合のそれぞれの項目に対して実行する関数です。この関数は次の引数で呼び出されます。
 
-  - : 各要素に対して実行する関数で、 3 つの引数を受け付けます。
-
-    - `value`, `key`
-      - : `Set` で現在処理されている要素。 `Set` にはキー (key) がないため値 (value) が両方に渡されます。
+    - `value`
+      - : それぞれの反復処理の値です。
+    - `key`
+      - : それぞれの反復処理のキーです。これは常に `value` と同じです。
     - `set`
-      - : `forEach()` が呼び出された `Set` オブジェクトです。
-
-- `thisArg`
-  - : `callbackFn` を実行するとき、`this` として使用する値です。
+      - : 反復処理が行われる集合です。
+- `thisArg` {{optional_inline}}
+  - : `callbackFn` を実行するときｎ、`this` として使用する値です。
 
 ### 返値
 
@@ -68,15 +38,15 @@ forEach(function (value, key, set) {
 
 ## 解説
 
-`forEach()` メソッドは `Set` オブジェクトに実際に存在するそれぞれの値に対して、指定された `callback` を一回ずつ実行します。削除された値に対しては呼び出しません。ただし、`undefined` の値をもつ要素に対しては実行します。
+`forEach()` メソッドは、この `Set` オブジェクトに実際に存在するそれぞれの値に対して、指定された `callback` を一回ずつ実行します。削除された値に対しては呼び出しません。ただし、`undefined` の値をもつ要素に対しては実行します。
 
 `callback` は **3 つの引数**で呼び出されます。
 
-- **要素の値**
-- **要素のキー**
-- **走査を行う `Set` オブジェクト**
+- この**要素の値**
+- この**要素のキー**
+- **走査を行っている `Set` オブジェクト**
 
-しかし、 `Set` オブジェクトにキーがないので、最初の 2 つの引数は、両方とも {{jsxref("Set")}} に含まれる**値**です。そのため `callback` 関数は {{jsxref("Map.foreach", "Map")}} や {{jsxref("Array.forEach","Array")}} の `forEach()` メソッドと整合が取れています。
+しかし、 `Set` オブジェクトにキーがないので、最初の 2 つの引数は、両方とも {{jsxref("Set")}} に含まれる**値**です。これにより、他の {{jsxref("Map/foreach", "Map")}} や {{jsxref("Array/forEach", "Array")}} の `forEach()` メソッドと整合が取れています。
 
 `thisArg` 引数が `forEach()` に渡された場合、 `callback` を呼び出すときにこれが渡され、 `this` 値として使用されます。渡されなかった場合は、さもなければ、`this` 値として使用するために `undefined` 値が渡されます。 `this` の値が最終的に `callback` から見える姿は、[関数から見た `this` を決定するための通常のルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に応じて決まります。
 
@@ -92,12 +62,12 @@ forEach(function (value, key, set) {
 
 ```js
 function logSetElements(value1, value2, set) {
-  console.log("s[" + value1 + "] = " + value2);
+  console.log(`s[${value1}] = ${value2}`);
 }
 
 new Set(["foo", "bar", undefined]).forEach(logSetElements);
 
-// logs:
+// Logs:
 // "s[foo] = foo"
 // "s[bar] = bar"
 // "s[undefined] = undefined"

From ad6088508f7b4de06e138f376bb178b9b1a3add7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 01:28:02 +0900
Subject: [PATCH 080/268] =?UTF-8?q?2023/08/09=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/set/add/index.md | 10 ++++---
 .../reference/global_objects/set/has/index.md | 28 ++++++++++---------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/set/add/index.md b/files/ja/web/javascript/reference/global_objects/set/add/index.md
index ddc007d9f33363..339759e8f0777e 100644
--- a/files/ja/web/javascript/reference/global_objects/set/add/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/add/index.md
@@ -1,18 +1,20 @@
 ---
 title: Set.prototype.add()
 slug: Web/JavaScript/Reference/Global_Objects/Set/add
+l10n:
+  sourceCommit: 5e878acadb7afcf0443b619b1d2f70a4dfafd679
 ---
 
 {{JSRef}}
 
-**`add()`** メソッドは `Set` 内に同じ値を持つ要素がない場合、指定した値を持つ新しい要素を `Set` オブジェクトの末尾に追加します。
+**`add()`** は {{jsxref("Set")}} インスタンスのメソッドで、この集合に同じ値を持つ要素がない場合、指定した値を持つ新しい要素をこの集合に追加します。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}
 
 ## 構文
 
-```js
-add(value);
+```js-nolint
+add(value)
 ```
 
 ### 引数
@@ -29,7 +31,7 @@ add(value);
 ### add() メソッドの使用
 
 ```js
-var mySet = new Set();
+const mySet = new Set();
 
 mySet.add(1);
 mySet.add(5).add("some text"); // 連鎖可能
diff --git a/files/ja/web/javascript/reference/global_objects/set/has/index.md b/files/ja/web/javascript/reference/global_objects/set/has/index.md
index 0100a84cdec62d..7ed9b1241ff828 100644
--- a/files/ja/web/javascript/reference/global_objects/set/has/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/has/index.md
@@ -1,47 +1,49 @@
 ---
 title: Set.prototype.has()
 slug: Web/JavaScript/Reference/Global_Objects/Set/has
+l10n:
+  sourceCommit: 5e878acadb7afcf0443b619b1d2f70a4dfafd679
 ---
 
 {{JSRef}}
 
-**`has()`** メソッドは、特定の値をもつ要素が `Set` オブジェクト内に存在するかどうかを示す論理値を返します。
+**`has()`** は {{jsxref("Set")}} インターフェイスのメソッドで、指定された値をもつ要素がこの集合内に存在するかどうかを示す論理値を返します。
 
 {{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}
 
 ## 構文
 
-```js
-has(value);
+```js-nolint
+has(value)
 ```
 
 ### 引数
 
 - `value`
-  - : `Set` オブジェクトに存在するか検査する値です。
+  - : この `Set` オブジェクトに存在するかを検査する値です。
 
 ### 返値
 
-`Set` オブジェクト内に特定の値をもつ要素が存在していたら `true` を返します。さもなければ `false` を返します。
+この `Set` オブジェクト内に指定された値をもつ要素が存在していたら `true` を返します。さもなければ `false` を返します。
 
 ## 例
 
 ### has() メソッドの使用
 
 ```js
-var mySet = new Set();
+const mySet = new Set();
 mySet.add("foo");
 
-mySet.has("foo"); // returns true
-mySet.has("bar"); // returns false
+console.log(mySet.has("foo")); // true
+console.log(mySet.has("bar")); // false
 
-var set1 = new Set();
-var obj1 = { key1: 1 };
+const set1 = new Set();
+const obj1 = { key1: 1 };
 set1.add(obj1);
 
-set1.has(obj1); // returns true
-set1.has({ key1: 1 }); // オブジェクト参照が異なるため false を返す
-set1.add({ key1: 1 }); // set1 には 2 つの項目が含まれるようになる
+console.log(set1.has(obj1)); // true
+console.log(set1.has({ key1: 1 })); // オブジェクト参照が異なるため false を返す
+console.log(set1.add({ key1: 1 })); // set1 には 2 つの項目が含まれるようになる
 ```
 
 ## 仕様書

From 04cb139a7f010fe1c56bb878571f5a97011d79dd Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 02:21:20 +0900
Subject: [PATCH 081/268] Update
 files/ja/web/javascript/reference/global_objects/set/foreach/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../web/javascript/reference/global_objects/set/foreach/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/ja/web/javascript/reference/global_objects/set/foreach/index.md b/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
index d9f5fa5bf99a26..71edb4b841095b 100644
--- a/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
@@ -21,6 +21,7 @@ forEach(callbackFn, thisArg)
 ### 引数
 
 - `callback`
+
   - : この集合のそれぞれの項目に対して実行する関数です。この関数は次の引数で呼び出されます。
 
     - `value`

From 88211ffb0fddd79714f5da0de0f8b8df54677719 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 02:21:27 +0900
Subject: [PATCH 082/268] Update
 files/ja/web/javascript/reference/global_objects/set/foreach/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../web/javascript/reference/global_objects/set/foreach/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/ja/web/javascript/reference/global_objects/set/foreach/index.md b/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
index 71edb4b841095b..7b2441061d4a8d 100644
--- a/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
+++ b/files/ja/web/javascript/reference/global_objects/set/foreach/index.md
@@ -30,6 +30,7 @@ forEach(callbackFn, thisArg)
       - : それぞれの反復処理のキーです。これは常に `value` と同じです。
     - `set`
       - : 反復処理が行われる集合です。
+
 - `thisArg` {{optional_inline}}
   - : `callbackFn` を実行するときｎ、`this` として使用する値です。
 

From b31caac007b551621838c73740a5fc90333be1a8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 02:41:48 +0900
Subject: [PATCH 083/268] =?UTF-8?q?Web/Guide/HTML/Using=5FHTML=5Fsections?=
 =?UTF-8?q?=5Fand=5Foutlines=20=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/_redirects.txt                       |   8 +-
 files/ja/_wikihistory.json                    |  19 --
 .../using_html_sections_and_outlines/index.md | 289 ------------------
 .../aria/roles/search_role/index.md           |   2 +-
 4 files changed, 5 insertions(+), 313 deletions(-)
 delete mode 100644 files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.md

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 31e8a42b430f71..c8d1a1eac886f1 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -1535,7 +1535,7 @@
 /ja/docs/HTML/HTML_Elements/title	/ja/docs/Web/HTML/Element/title
 /ja/docs/HTML/HTML_Elements/var	/ja/docs/Web/HTML/Element/var
 /ja/docs/HTML/Introduction	/ja/docs/Learn/HTML/Introduction_to_HTML
-/ja/docs/HTML/Sections_and_Outlines_of_an_HTML5_document	/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
+/ja/docs/HTML/Sections_and_Outlines_of_an_HTML5_document	/ja/docs/Web/HTML/Element/Heading_Elements
 /ja/docs/HTML/Supported_media_formats	/ja/docs/Web/Media/Formats
 /ja/docs/HTML/Using_HTML5_audio_and_video	/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 /ja/docs/HTML/属性	/ja/docs/Web/HTML/Attributes
@@ -2361,7 +2361,7 @@
 /ja/docs/SVG_Namespace_Tips_(external)	/ja/docs/Web/SVG/Namespaces_Crash_Course
 /ja/docs/SVG_improvements_in_Firefox_3	/ja/docs/Mozilla/Firefox/Releases/3/SVG_improvements
 /ja/docs/Same_origin_policy_for_JavaScript	/ja/docs/Web/Security/Same-origin_policy
-/ja/docs/Sections_and_Outlines_of_an_HTML5_document	/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
+/ja/docs/Sections_and_Outlines_of_an_HTML5_document	/ja/docs/Web/HTML/Element/Heading_Elements
 /ja/docs/Security/CSP	/ja/docs/Web/HTTP/CSP
 /ja/docs/Security/CSP/CSP_policy_directives	/ja/docs/Web/HTTP/Headers/Content-Security-Policy
 /ja/docs/Security/CSP/Default_CSP_restrictions	/ja/docs/Web/HTTP/Headers/Content-Security-Policy
@@ -3925,7 +3925,7 @@
 /ja/docs/Web/Guide/HTML/HTML5/HTML5_のフォーム	/ja/docs/Learn/Forms
 /ja/docs/Web/Guide/HTML/Introduction	/ja/docs/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web/Guide/HTML/Obsolete_things_to_avoid	/ja/docs/Learn/HTML/Introduction_to_HTML
-/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines	/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
+/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines	/ja/docs/Web/HTML/Element/Heading_Elements
 /ja/docs/Web/Guide/HTML/XHTML	/ja/docs/Glossary/XHTML
 /ja/docs/Web/Guide/Index	/ja/docs/Web/Guide
 /ja/docs/Web/Guide/Localizations_and_character_encodings	/ja/docs/orphaned/Web/Guide/Localizations_and_character_encodings
@@ -4047,7 +4047,7 @@
 /ja/docs/Web/HTML/Link_types/prerender	/ja/docs/Web/HTML/Attributes/rel/prerender
 /ja/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing	/ja/docs/Glossary/Speculative_parsing
 /ja/docs/Web/HTML/Preloading_content	/ja/docs/Web/HTML/Attributes/rel/preload
-/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document	/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
+/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document	/ja/docs/Web/HTML/Element/Heading_Elements
 /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
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 23d088e12e3432..8295a78300bc36 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -30702,25 +30702,6 @@
     "modified": "2019-03-23T23:03:34.917Z",
     "contributors": ["wtrfp"]
   },
-  "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": {
-    "modified": "2020-08-09T13:53:14.893Z",
-    "contributors": [
-      "mfuji09",
-      "taku-furuta",
-      "miyah-kun",
-      "8845musign",
-      "michi-h0623",
-      "SphinxKnight",
-      "webooker",
-      "yyss",
-      "ethertank",
-      "teoli",
-      "DavidWalsh",
-      "Potappo",
-      "saneyuki_s",
-      "kj"
-    ]
-  },
   "orphaned/Web/Guide/Localizations_and_character_encodings": {
     "modified": "2020-09-18T02:40:01.125Z",
     "contributors": ["morinokami", "silverskyvicto"]
diff --git a/files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.md b/files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.md
deleted file mode 100644
index 25faff407833e7..00000000000000
--- a/files/ja/orphaned/web/guide/html/using_html_sections_and_outlines/index.md
+++ /dev/null
@@ -1,289 +0,0 @@
----
-title: HTML のセクションとアウトラインの使用
-slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
----
-
-{{HTMLSidebar}}
-
-> **警告:** ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、[アウトライン](https://www.w3.org/TR/html5/sections.html#outline)アルゴリズムを、ユーザーに文書の構造を伝えるために*使用するべきではありません*。作者には、見出しの[順位](https://www.w3.org/TR/html5/sections.html#rank) ([`h1`](https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements)-[`h6`](https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements)) を使用して文書の構造を伝えることを推奨します。
-
-HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。
-
-意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして `<div>` 要素だけがあり、意味づけが限られていましたが、これらの要素は、これを強化するためのものです。例えば、 `<div class="navigation">` はブラウザーにその内容についての意味を何も示唆しません。 HTML ソースを読む人間だけが、 `navigation` のようなクラスの意味を判断することができます。それに対して、 `<nav>` 区分化要素は、含まれているコンテンツをブラウザーやその他の端末により明確に説明します。リンクやその他のナビゲーション構造は、ユーザーがサイトやページのコンテンツのどこにいるかを理解して移動するのに役立ちます。
-
-HTML5 には新しい意味づけする要素が追加され、コンテンツの意味的な領域においてウェブサイトの区分化を進化・明確化することができるようになりました。開発者は、これらの意味づけ要素を意図した目的に沿って使用することが重要です。多くのアクセシビリティツールや一部のブラウザーが提供しているリーダービューは、意味づけされた区分化要素に依存しています。そのため、既存の `<div>` 要素群を、一括での `<section>` 要素群に入れ替えてはいけません。
-
-## HTML5 の区分化要素
-
-- **HTML ナビゲーション要素** ({{HTMLElement("nav")}}) は、サイト上で頻繁に表示されるナビゲーションリンクを含む区間を定義します。主要なメニューと従属的なメニューが存在することがありますが、他の `<nav>` 要素の中に他の `<nav>` 要素を入れ子にすることはできません。
-- **HTML 記事要素** ({{HTMLElement("article")}}) は、自己完結型のコンテンツの一部を定義します。単独のメインコンテンツを参照するものではなく、コメントやウィジェットに使用することができます。
-- **HTML セクション要素** ({{HTMLElement("section")}}) は、意味的な意味の関連するグループ化を示すために、文書のセクションを定義します。 section 要素を使用して親要素に追加の文脈を提供することは、理にかなっています。
-- **HTML 余談要素** ({{HTMLElement("aside")}}) は、メイン要素に関連してはいるが、本文の流れには属していない区間、例えば説明ボックスや広告などを定義します。 aside 要素は独自のアウトラインを持ちますが、本文のアウトラインには属しません。
-
-### 区分化に使用されるその他の意味づけする HTML 要素
-
-- **HTML 本文要素** ({{HTMLElement("body")}}) は、文書のすべての内容を定義します。これには、すべてのコンテンツと HTML 要素が含まれています。
-- **HTML ヘッダー要素** ({{HTMLElement("header")}}) は、通常はロゴ、タイトル、ナビゲーションを含むページ領域を定義します。ヘッダーはまた、 `<article>` や `<section>` のような他の意味づけする要素の中で使用することもできます。セクションのヘッダーはセクションの見出し、著者名などを含むかもしれません。 {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} は、それぞれ独自の {{HTMLElement("header")}} を持つことができます。その名前にもかかわらず、ヘッダーは必ずしもページやセクションの先頭に配置されるわけではありません。
-- **HTML フッター要素** ({{HTMLElement("footer")}}) はページのフッターを定義し、ふつうは著作権情報や法的事項を含み、いくつかのリンクを含む場合もあります。セクションに対して使用された場合は、フッターは区切られた部分のコンテンツの公開日やライセンス情報などを含むかもしれません。 {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} は、それぞれ独自の {{HTMLElement("footer")}} を持つことができます。その名前にもかかわらず、フッターは必ずしもページやセクションの末尾に配置されるわけではありません。
-
-## 区分化要素はどのように機能するのか
-
-```
- <body>
-    <header>
-      <nav>
-        <ul>
-          <li><a href="#">link</a></li>
-          <li><a href="#">link</a></li>
-          <li><a href="#">link</a></li>
-        </ul>
-      </nav>
-      <h1>
-        Page Title
-      </h1>
-    </header>
-
-    <section>
-      <h2>
-        My Blog Posts
-      </h2>
-      <article>
-        <header>
-          <p>
-            Article Title
-          </p>
-        </header>
-        <p>
-          content
-        </p>
-      </article>
-      <article>
-        <header>
-          <p>
-            Article Title
-          </p>
-        </header>
-        <p>
-          content
-        </p>
-      </article>
-      <aside>
-        <p>
-          Author info
-        </p>
-      </aside>
-    </section>
-
-    <footer>
-      Copyright Info
-    </footer>
-  </body>
-```
-
-### nav 要素
-
-`<nav>` はナビゲーションブロックを示し、主要なナビゲーションメニューに使用してください。
-
-```
-<nav>
-  <ul>
-    <li><a href="#">link</a></li>
-    <li><a href="#">link</a></li>
-  </ul>
-</nav>
-```
-
-#### 入れ子になったメニュー
-
-`<nav>` 要素は入れ子にしてはいけません。 `<nav>` には、主要なメニューと従属的なメニューの両方を含めることができます。
-
-```
-<nav>
-  <ul>
-    <li><a href="#">primary link</a></li>
-    <li>
-      <a href="#">primary link</a>
-      <ul>
-        <li><a href="#">secondary link</a></li>
-        <li><a href="#">secondary link</a></li>
-      </ul>
-    </li>
-    <li><a href="#">primary link</a></li>
-  </ul>
-</nav>
-```
-
-#### リンク集
-
-`<nav>` 要素は、サイトのナビゲーションメニューにのみ使用します。ソーシャルメディアのプロフィールまたはブログロールなどのリンク集は、 `<nav>` 要素で囲むべきではありません。
-
-#### \<nav> 内の HTML 要素
-
-リスト要素はナビゲーションでよく使われますが、必須というわけではありません。`<p>` などの他の要素を使用することができます。
-
-### article 要素
-
-`<article>` 要素は自己完結型のコンテンツを示します。つまり、`<article>` 要素を除く他のすべての HTML を削除しても、そのコンテンツが読者にとって意味を持つものです。
-
-```
-<article>
-  <h1>How to Become an MDN Contributor</h1>
-  <p>
-    Do you want to help protect the web?....
-  </p>
-</article>
-```
-
-#### article 内で入れ子になった要素
-
-`<article>` 要素は header, aside, footer などの他の意味づけ要素を持つことができます。これは、要素のクラスプロパティに CSS セレクターを追加して文書のスタイルを設定する場合に便利です。
-
-```
-<article>
-  <header>
-    <h1>How to Become an MDN Contributor</h1>
-  </header>
-  <p>
-    Do you want to help protect the web?....
-  </p>
-  <aside>
-    <blockquote>
-      Amazing quote from article
-    </blockquote>
-  </aside>
-  <footer>
-    <p>
-      Author info, publication date
-    </p>
-  </footer>
-</article>
-```
-
-#### article と section の入れ子
-
-article は section の中に含むことができ、 section は article の中に含むことができます。本に例えると、関連する記事でセクションに分割することができます。これらの article はどちらも関連する情報の section を含むことができます。
-
-```
-<section>
-  <h1>Getting Involved</h1>
-  <article>
-    <header>
-      <h2>How to Become an MDN Contributor</h2>
-      <p>Do you want to help protect the web?....</p>
-    </header>
-    <section>
-      <h3>Steps to Editing an Article</h3>
-    </section>
-    <footer>
-      <p>Author info</p>
-      <p>publication date</p>
-    </footer>
-  </article>
-</section>
-```
-
-### section 要素
-
-section 要素は、テーマによるコンテンツのグループ化のために使用されます。 W3C の仕様ふまえ、通常はセクションには見出しを含めるべきです。見出しに `<header>` 要素の使用が必須というわけではありません。
-
-```
-<section>
-  <h1>Amazing MDN Contributors</h1>
-    <ul>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-    </ul>
-</section>
-```
-
-### aside 要素
-
-`<aside>` 要素は、メインコンテンツとは別に配置される関連コンテンツを定義します。しばしばコールアウト、引用ブロック、定義などに使用されます。 `<aside>` 要素は、追加だが関連性のある情報を含む補足情報によく使用されます。
-
-```
-<section>
-  <h1>Amazing MDN Contributors</h1>
-    <ul>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-      <li><img src="link" alt="descriptive text"></li>
-    </ul>
-    <aside>
-     <p>To get involved contact</p>
-    </aside>
-</section>
-```
-
-#### aside 要素の入れ子
-
-`<aside>` 要素は、他の区分化 HTML 要素の内部に配置できます。 `<aside>` の内部に `<aside>` を含めることはできません。コールアウトボックスの中にコールアウトボックスを持たないということを意味します。
-
-## HTML5 非対応ブラウザーでの HTML5 要素の利用
-
-セクションと見出しの要素は、いくつかの手順を踏むことで多くの HTML5 非対応ブラウザーでも動作させることができます。オーディエンスの特定の対象が Internet Explorer 8 以前を使用している場合、以下の手順に従うと期待通りに動作させることができます。ただし、グローバルではこれらのブラウザーの使用はとても少なくなったので、そのような場面はわずかです。
-
-HTML5 のセマンティック要素は特別な DOM インターフェイスを必要としませんが、これらに明示的に対応していない古いブラウザーは、特定の CSS スタイルが必要です。未知の要素は既定で `display: inline` としてスタイル付けされるため、これらには `display: block` と設定したいところです。
-
-```css
-article, aside, footer, header, nav, section {
-  display: block;
-}
-```
-
-もちろんウェブ開発者はそれらに異なるスタイルを指定できますが、 HTML5 非対応ブラウザーでは、そのような要素のための既定のスタイル指定が意図通りにはならないことを忘れないでください。 {{HTMLElement("time")}} 要素が含まれていないのは、 HTML5 非対応ブラウザーのそれに対する既定のスタイル指定が、 HTML5 対応ブラウザーにおけるスタイル指定と同じだからということにも注意してください。
-
-さらに、より古いバージョンの IE では、 DOM のインスタンスを生成しない限り、対応していない要素のスタイル指定ができません。以下のように、特定のスクリプトを追加することで実現することができます。
-
-```xml
-<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-```
-
-最後の予防措置として、 {{HTMLElement("noscript")}} 要素を {{HTMLElement("head")}} 要素内に明示的に追加して、 JavaScript を無効にしたユーザーに対して、このページが JavaScript に依存していることを警告することができます。
-
-```xml
-<noscript>
-  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
-  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
-    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
-  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
-</noscript>
-```
-
-まとめると、 Internet Explorer (バージョン 8 以下) を含め、また、それらのブラウザーがスクリプトを利用しないように設定されていても正しく表示を代替する、 HTML5 非対応ブラウザー向けの HTML5 のセクショニングおよび見出し要素の対応を可能にするコードは以下になります。
-
-```xml
-<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-<noscript>
-  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
-  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
-    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
-  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
-</noscript>
-```
-
-> **メモ:** このコードは [HTML validator](https://validator.w3.org/) ではエラーが発生します。これは必ずしも本当に悪いことだとは言えません — サイトには若干のバリデーションエラーがあるものです — が、気を付けなければなりません。
-
-## まとめ
-
-HTML5 で導入された新しい意味づけ要素により、標準的な方法でウェブ文書の構造を記述することができるようになります。これらの要素は、 HTML5 ブラウザーを持っていて、ページを理解するのに役立つ構造を必要としている人、例えば、何らかの支援技術の助けを必要としている人に大きな利点をもたらします。これらの新しい意味づけ要素は使用が簡単で、負担がほとんどなく、 HTML5 に非対応のブラウザーでも動作するようにすることができます。したがって、それらは制限なく使用されるべきです。
diff --git a/files/ja/web/accessibility/aria/roles/search_role/index.md b/files/ja/web/accessibility/aria/roles/search_role/index.md
index 00cf4b86863780..8f1a3cee53bd1e 100644
--- a/files/ja/web/accessibility/aria/roles/search_role/index.md
+++ b/files/ja/web/accessibility/aria/roles/search_role/index.md
@@ -95,7 +95,7 @@ TBD
 
 - [\<form>: フォーム要素](/ja/docs/Web/HTML/Element/form)
 - [\<input type="search">](/ja/docs/Web/HTML/Element/input/search)
-- [HTML のセクションとアウトラインの使用](/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines)
+- [HTML のセクションとアウトラインの使用](/ja/docs/Web/HTML/Element/Heading_Elements)
 - [ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles)
 - [Using WAI-ARIA Landmarks – 2013 | The Paciello Group](https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/)
 - [Accessible Landmarks | scottohara.me](https://www.scottohara.me/blog/2018/03/03/landmarks.html)

From 45a8b0b5e94a7f73718a2d35a7aba213b8d7398e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 02:53:15 +0900
Subject: [PATCH 084/268] =?UTF-8?q?Web/Accessibility/ARIA/widgets=20?=
 =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/_redirects.txt                       |  4 +-
 files/ja/_wikihistory.json                    |  4 --
 .../index.md                                  | 52 -------------------
 3 files changed, 2 insertions(+), 58 deletions(-)
 delete mode 100644 files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.md

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index c8d1a1eac886f1..59b73b963b98b6 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3465,8 +3465,8 @@
 /ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints	/ja/docs/conflicting/Web/Accessibility/ARIA_64707ba1917a56654679cbe273e2f4ea
 /ja/docs/Web/Accessibility/ARIA/forms/Multipart_labels	/ja/docs/Web/Accessibility/ARIA/Multipart_labels
 /ja/docs/Web/Accessibility/ARIA/forms/alerts	/ja/docs/conflicting/Web/Accessibility/ARIA
-/ja/docs/Web/Accessibility/ARIA/widgets	/ja/docs/conflicting/Web/Accessibility/ARIA_229a3bbc8da83524de32990b14561155
-/ja/docs/Web/Accessibility/ARIA/widgets/overview	/ja/docs/conflicting/Web/Accessibility/ARIA_229a3bbc8da83524de32990b14561155
+/ja/docs/Web/Accessibility/ARIA/widgets	/ja/docs/Web/Accessibility/ARIA
+/ja/docs/Web/Accessibility/ARIA/widgets/overview	/ja/docs/Web/Accessibility/ARIA
 /ja/docs/Web/Accessibility/Accessibility_FAQ	/ja/docs/Web/Accessibility
 /ja/docs/Web/Accessibility/Community	/ja/docs/Web/Accessibility
 /ja/docs/Web/Accessibility/FAQ	/ja/docs/Web/Accessibility
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 8295a78300bc36..eed0ebf8b00af1 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -30438,10 +30438,6 @@
     "modified": "2019-03-23T23:28:50.521Z",
     "contributors": ["yyss", "teoli"]
   },
-  "conflicting/Web/Accessibility/ARIA_229a3bbc8da83524de32990b14561155": {
-    "modified": "2019-03-18T21:35:01.506Z",
-    "contributors": ["Uemmra3"]
-  },
   "conflicting/Web/Accessibility/ARIA_64707ba1917a56654679cbe273e2f4ea": {
     "modified": "2019-03-23T23:28:35.294Z",
     "contributors": ["yyss", "teoli"]
diff --git a/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.md b/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.md
deleted file mode 100644
index 898b01de297870..00000000000000
--- a/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: ウィジェット
-slug: conflicting/Web/Accessibility/ARIA_229a3bbc8da83524de32990b14561155
-original_slug: Web/Accessibility/ARIA/widgets
----
-
-> **警告:** 更新が必要
-
-## 入門
-
-ここでは、アクセシブルな JavaScript ウィジェットを作るための実装例とベストプラクティスを見ていきます。
-
-## 一般リソース
-
-- [DHTML Style Guide](https://dev.aol.com/dhtml_style_guide) にはキーボードインタラクションのお勧めがあります。
-- [WAI-ARIA Authoring Practices Guide](https://www.w3.org/wai/pf/aria-practices)
-
-## チェックボックス
-
-- [ARIA Toggle Button and Tri-state Checkbox examples](https://www.paciellogroup.com/blog/?p=53) (from "The Paciello Group Blog")
-- [ARIA Example Checkbox Widgets from the University of Illinois](http://test.cita.uiuc.edu/aria/checkbox)
-
-## メニュー
-
-- [Using WAI-ARIA Roles and States with the YUI Menu Control](http://yuiblog.com/blog/2007/12/21/menu-waiaria/)
-
-## スライダー
-
-- From the Paciello Group Blog: ARIA Slider, [part one](https://www.paciellogroup.com/blog/?p=68), [part two](https://www.paciellogroup.com/blog/?p=69), [part three](https://www.paciellogroup.com/blog/?p=76) ([example](https://www.paciellogroup.com/blog/misc/ARIA/slider/))
-- [Creating an Accessible, Internationalized Dojo Rating Widget](https://mindtrove.info/articles/creating-an-accessible-internationalized-dojo-rating-widget/)
-
-## タブ
-
-- [Enhancing TabView Accessibility with WAI-ARIA Roles and States](http://yuiblog.com/blog/2008/07/30/tabview-aria/), from the YUI blog
-- [Enhancing the jQuery UI Tabs accordingly to WCAG 2.0 and ARIA](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs)
-- [Tab panel example here on CodeTalks](https://codetalks.org/source/widgets/tabpanel/tabpanel1.html)
-
-## ライトボックス
-
-- [WCAG 2.0 and ARIA-](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox)[conformant](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/table) [lightbox application](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox)
-- <http://majx-js.digissime.net/js/popin/>
-
-## フォーム検証
-
-- [WCAG 2.0 and ARIA-conformant live form validation](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular)
-
-## 表
-
-- [German tutorial on creating an accessible form](https://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/)
-- [Simple grid example at CodeTalks](https://codetalks.org/source/widgets/grid/grid.sample.html)
-- [Date picker grid at CodeTalks](https://codetalks.org/source/widgets/datepicker/datepicker.sample.html)
-- [WCAG 2.0 and ARIA-conformant sortable tables](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/table)

From d2ee0dff28602e98704e75112283d43ee0af0f7a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 12:41:41 +0900
Subject: [PATCH 085/268] =?UTF-8?q?2023/07/20=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.md                                  | 93 ++++++++++---------
 1 file changed, 47 insertions(+), 46 deletions(-)

diff --git a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
index da0df2fdf57437..fd9f63e56880d6 100644
--- a/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
+++ b/files/ja/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
@@ -1,6 +1,8 @@
 ---
 title: WebIDL ファイルに含まれる情報
 slug: MDN/Writing_guidelines/Howto/Write_an_API_reference/Information_contained_in_a_WebIDL_file
+l10n:
+  sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
 ---
 
 {{MDNSidebar}}
@@ -39,7 +41,7 @@ WebIDL は[その仕様書](https://heycam.github.io/webidl/)で定義されて
 
 インターフェイス名は、キーワード `interface` の後、次の開き括弧 (`'{'`) またはコロン (`':'`) の前に表示される文字列です。
 
-```js
+```webidl
 interface URL {};
 ```
 
@@ -49,7 +51,7 @@ WebIDL インターフェイスは、真のインターフェイスであれ、
 
 あるインターフェイスの親がある場合は、インターフェイス名の後にコロン (`':'`) をつけて定義します。 1 つのインターフェイスにつき、親は 1 つだけ存在することができます。
 
-```js
+```webidl
 interface HTMLMediaElement : HTMLElement {…}
 ```
 
@@ -61,7 +63,7 @@ interface HTMLMediaElement : HTMLElement {…}
 
 2019 年 9 月に、ミックスインの構文が更新されています。新しい構文では、 `interface mixin` を使用して、ミックスインのインターフェイスを以下のように定義します。
 
-```js
+```webidl
 interface MyInterface {};
 
 interface mixin MyMixin {
@@ -71,13 +73,13 @@ interface mixin MyMixin {
 
 そして、 `includes` キーワードを使用して、ミックスインの内部で定義されたプロパティがインターフェイス上で利用可能であることを表明します。
 
-```js
+```webidl
 MyInterface includes MyMixin;
 ```
 
 ミックスインは継承をせず、他のミックスインを取り込むことはできません。しかし、パーシャルをサポートしているので、次のようにすることができます。
 
-```js
+```webidl
 interface MyInterface {};
 interface mixin MyMixin {};
 
@@ -91,8 +93,7 @@ MyInterface includes MyMixin;
 MDN では、ドキュメント作成にあたって、ミックスインを非表示にしています。これらは抽象的で仕様のみの構成要素です。
 ブラウザーのコンソールで見ることはできませんし、メソッドやプロパティが実際のどのインターフェイスで実装されているかを知る方がより有用です。
 
-IDL で [HTMLHyperlinkElementUtils](https://html.spec.whatwg.org/multipage/links.html#htmlhyperlinkelementutils) のようなミックスインに遭遇した場合。
-そのミックスインを実装しているインターフェイスを探してください。
+IDL で [HTMLHyperlinkElementUtils](https://html.spec.whatwg.org/multipage/links.html#htmlhyperlinkelementutils) のようなミックスインに遭遇した場合、そのミックスインを実装しているインターフェイスを探してください。
 [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/text-level-semantics.html#htmlanchorelement) のように、ミックスインを実装するインターフェイスを探し、それらのインターフェイス上で直接ミックスインのメンバーを文書化します。
 
 実際には、 `HTMLHyperlinkElementUtils` を文書化するのではなく、 [`HTMLAnchorElement`](/ja/docs/Web/API/HTMLAnchorElement) や [`HTMLAreaElement`](/ja/docs/Web/API/HTMLAreaElement) のような具体的なインターフェイスにドキュメントが追加されます。
@@ -108,14 +109,14 @@ IDL で [HTMLHyperlinkElementUtils](https://html.spec.whatwg.org/multipage/links
 
 古いスタイルの WebIDL ミックスインの構文では、まだいくつかの場所で見かけるかもしれませんが、ミックスインは `[NoInterfaceObject]` という注釈で接頭辞を付けます。
 
-```js
+```webidl
 [NoInterfaceObject]
    interface MyMixin {…}
 ```
 
 旧来の構文では、インターフェイスに実装されたミックスインは `implements` キーワードで定義します。
 
-```js
+```webidl
 MyInterface implements MyMixin;
 ```
 
@@ -123,7 +124,7 @@ MyInterface implements MyMixin;
 
 ウェブワーカー（任意の型）および Window スコープでの可用性は、注釈 `[Exposed=(Window,Worker)]` を使用して定義します。この注釈は一緒に掲載されている部分インターフェイスに適用されます。
 
-```js
+```webidl
 [Exposed=(Window,Worker)]
 interface Performance {
    [DependsOn=DeviceState, Affects=Nothing]
@@ -160,7 +161,7 @@ partial interface Performance {
 
 これらの可能な値は、それ自体が WebIDL ファイルで定義されていることに注意してください。インターフェイスは `[Global=xyz]` という注釈を持つことができます。これは、このタイプのオブジェクトがグローバルスコープとして使用される場合、 `[Exposed]` の値が `xyz` である インターフェイス、プロパティ、メソッドがすべて利用可能になることを意味します。
 
-```js
+```webidl
 [Global=(Worker,DedicatedWorker), Exposed=DedicatedWorker]
 interface DedicatedWorkerGlobalScope : WorkerGlobalScope {…}
 ```
@@ -173,7 +174,7 @@ interface DedicatedWorkerGlobalScope : WorkerGlobalScope {…}
 
 Gecko では、コンストラクター、プロパティ、メソッドを含む部分インターフェイスの可用性は、プリファレンス（通常 "pref" と呼ばれます）によって制御されることがあります。これは WebIDL でもマークされています。
 
-```js
+```webidl
 [Pref="media.webspeech.synth.enabled"]
 interface SpeechSynthesis {
    readonly attribute boolean pending;
@@ -190,7 +191,7 @@ interface SpeechSynthesis {
 
 インターフェイスによっては、ブラウザー内部システムコード、またはクロームコードでのみ利用可能な機能がある場合があります。これを示すために、 Gecko では \[ChromeOnly] を使用します。例えば、次の例の propName プロパティは、クロームコード経由でのみ呼び出せます。
 
-```js
+```webidl
 interface MyInterface {
   [ChromeOnly]
   readonly attribute PropValue propName;
@@ -203,7 +204,7 @@ interface MyInterface {
 
 ### プロパティの名前
 
-```js
+```webidl
 readonly attribute MediaError? error;
 ```
 
@@ -211,7 +212,7 @@ readonly attribute MediaError? error;
 
 ### プロパティの型
 
-```js
+```webidl
 readonly attribute MediaError? error;
 ```
 
@@ -219,7 +220,7 @@ readonly attribute MediaError? error;
 
 ### プロパティへの書き込み権限
 
-```js
+```webidl
 readonly attribute MediaError? error;
 ```
 
@@ -234,7 +235,7 @@ readonly attribute MediaError? error;
 
 ### 例外の発生
 
-```js
+```webidl
 [SetterThrows]
             attribute DOMString src;
 ```
@@ -245,7 +246,7 @@ readonly attribute MediaError? error;
 
 ゲッターが例外を発生させるのは珍しいことですが、発生する場合がいくつかあります。この場合、 `[GetterThrows]` 注釈が使用されます。ここでも、プロパティページの構文の節に、例外の項がなければなりません。
 
-```js
+```webidl
 partial interface Blob {
   [GetterThrows]
   readonly attribute unsigned long long size;
@@ -258,7 +259,7 @@ Webidl の意味論に従わない場合、`[SetterThrows]` や `[GetterThrows]`
 
 大抵は互換性のためですが、この動作は時に煩わしいものです。これを防ぐために、無操作なセッターを作る（つまり、プロパティを新しい値に設定しようとする試みを黙って無視する）ために、 `[LenientSetter]` 注釈を使用することができます。
 
-```js
+```webidl
 partial interface Document {
   [LenientSetter]
   readonly attribute boolean fullscreen;
@@ -283,7 +284,7 @@ _このプロパティは読み取り専用ですが、変更されても（厳
 
 API は時として、*新しい*オブジェクト、あるいは内部のオブジェクトの*コピー*を返さなければなりません。このような場合、 WebIDL では `[NewObject]` 注釈を使用します。
 
-```js
+```webidl
 [NewObject]
    readonly attribute TimeRanges buffered;
 ```
@@ -294,14 +295,14 @@ _**`HTMLMediaElement.buffered`** プロパティは読み取り専用で、新
 
 および
 
-- _\\{{domxref("HTMLMediaElement.buffered")}}\\{{readonlyinline}}_
+- _\\{{domxref("HTMLMediaElement.buffered")}}\\{{ReadOnlyInline}}_
   - : _新しい \\{{domxref("TimeRanges")}} オブジェクトを返します …_
 
 コレクションオブジェクトへの参照（`HTMLCollection`, `HTMLFormElementsCollection`, `HTMLOptionsCollection` など、常に `[NewObject]` を含まない）の場合、そのオブジェクトへの変更が、返された参照を通して利用できることを明確にします。このことを示すために、インターフェイスの説明とサブページの両方で、コレクションを**生きた** `HTMLCollection` （または `HTMLFormElementsCollections` や `HTMLOptionsCollection`）として修飾しています。
 
 例えば、
 
-- \\{{domxref("HTMLFormElement.elements")}}\\{{readonlyinline}}
+- \\{{domxref("HTMLFormElement.elements")}}\\{{ReadOnlyInline}}
   - : 生きた \\{{domxref("HTMLFormControlsCollection")}} を返します…
 
 ### ワーカーでの使用可否
@@ -316,7 +317,7 @@ _**`HTMLMediaElement.buffered`** プロパティは読み取り専用で、新
 
 Gecko では、いくつかのプロパティの使用可否は、環境設定によって制御されている場合があります。これは WebIDL でもマークされています。
 
-```js
+```webidl
 [Pref="media.webvtt.enabled"]
     readonly attribute TextTrackList? textTracks;
 ```
@@ -331,7 +332,7 @@ Gecko では、いくつかのプロパティの使用可否は、環境設定
 
 ### メソッド名
 
-```js
+```webidl
 DOMString canPlayType(DOMString type);
 ```
 
@@ -349,17 +350,17 @@ TextTrack addTextTrack(TextTrackKind kind,
 
 ### 返値の型
 
-```js
+```webidl
 DOMString canPlayType(DOMString type);
 ```
 
 返値の型は括弧の中で最初に示します。上記の場合、値は `DOMString` 型のオブジェクトです。疑問符 (`'?'`) が続く場合、 `null` という値も返すことができ、ドキュメントではこれがどのような場合に起こり得るかを説明しなければなりません。このように疑問符がない場合、その返値は `null` になることはありません。
 
-キーワード `void` は、返値が存在しないことを意味します。これは返値の型ではありません。WebIDL のエントリが `void` と書かれている場合、ドキュメントの返値の節にはシンプルに「なし」だけが書かれているはずです。
+キーワード `void` は、返値が存在しないことを意味します。これは返値の型ではありません。WebIDL のエントリが `void` と書かれている場合、ドキュメントの返値の節にはシンプルに「なし」とだけ書かれているはずです。
 
 ### 例外の発生
 
-```js
+```webidl
 [Throws]
    void fastSeek(double time);
 ```
@@ -382,7 +383,7 @@ DOMString canPlayType(DOMString type);
 
 Gecko では、いくつかのプロパティの利用可否は環境設定によって制御される場合があります。これは WebIDL でもマークされています。
 
-```js
+```webidl
 [Pref="media.webvtt.enabled"]
    TextTrack addTextTrack(TextTrackKind kind,
                           optional DOMString label = "",
@@ -401,7 +402,7 @@ Gecko では、いくつかのプロパティの利用可否は環境設定に
 
 文字列化子とは、あるインターフェイスに基づくオブジェクトが、文字列を期待するコンテキストでどのように解決されるかを指定するものです。（[文字列化子](#文字列化子)の節を参照してください。）さらに、このキーワードは `toString()` に対応付けられ、次のように定義されます。
 
-```js
+```webidl
 stringifier;
 ```
 
@@ -409,7 +410,7 @@ stringifier;
 
 JSON 化子は `toJSON()` に対応付けられ、次のように定義されます。
 
-```js
+```webidl
 jsonifier; // Gecko 版
 serializer; // 標準版
 ```
@@ -426,7 +427,7 @@ serializer; // 標準版
 
 #### 値イテレーター
 
-```js
+```webidl
 iterable<valueType>
 ```
 
@@ -437,7 +438,7 @@ iterable<valueType>
 - `keys()` はキー、すなわち添字（`unsigned long`）の[イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を返します。値イテレーターの場合、 `keys()` と `entries()` は等価です。
 - `forEach()` はキーで、リストの各項目に対応するコールバック関数を呼び出す[イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を返します。
 
-このようなイテレーターは，`for (var p in object)` という構文を `for (var p in object.entries())` の省略形として使うことを可能にします。インターフェイスの説明の中に、このことに関する文を追加しています。
+このようなイテレーターは，`for (const p in object)` という構文を `for (const p in object.entries())` の省略形として使うことを可能にします。インターフェイスの説明の中に、このことに関する文を追加しています。
 
 > **メモ:** 以下の場合、反復処理する値の組は 2 つの異なる方法で定義することができます。
 >
@@ -446,7 +447,7 @@ iterable<valueType>
 
 #### 組イテレーター
 
-```js
+```webidl
 iterable<keyType, valueType>
 ```
 
@@ -457,17 +458,17 @@ iterable<keyType, valueType>
 - `keys()` はキーの[イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を返します。例: {{domxref('FormData.keys()')}}
 - Once [Firefox バグ 1216751](https://bugzil.la/1216751) lands, `forEach()`.
 
-このようなイテレータを使うと，`for (var p in object)` という構文を， `for (var p in object.entries())` の省略形として使うことができます．インターフェイスの説明の中に、それに関する文を追加します。例: {{domxref('FormData')}}.
+このようなイテレータを使うと，`for (const p in object)` という構文を， `for (const p in object.entries())` の省略形として使うことができます．インターフェイスの説明の中に、それに関する文を追加します。例: {{domxref('FormData')}}.
 
 > **メモ:** 繰り返す値の組は、 webidl ファイルではなく、それに付随する散文で定義されます。そのような散文は仕様書にあり、通常、次のように始まります。_"The [value pairs to iterate over](https://heycam.github.io/webidl/#dfn-value-pairs-to-iterate-over)..."_ で始まります。
 >
-> 例えば、{{domxref('FormData')}}の場合、仕様書の中に次のように書かれています。_"The [value pairs to iterate over](https://heycam.github.io/webidl/#dfn-value-pairs-to-iterate-over) are the [entries](https://xhr.spec.whatwg.org/#concept-formdata-entry) with the key is the [name](https://xhr.spec.whatwg.org/#concept-formdata-entry-name) and the value the [value](https://xhr.spec.whatwg.org/#concept-formdata-entry-value). "_
+> 例えば、{{domxref('FormData')}}の場合、仕様書の中に次のように書かれています。_"The [value pairs to iterate over](https://heycam.github.io/webidl/#dfn-value-pairs-to-iterate-over) are the [entries](https://xhr.spec.whatwg.org/#concept-formdata-entry) with the key being the [name](https://xhr.spec.whatwg.org/#concept-formdata-entry-name) and the value the [value](https://xhr.spec.whatwg.org/#concept-formdata-entry-value). "_
 
 ### 集合風メソッド
 
 このインターフェイスは _set-like_ として定義することができます。つまり、順序付きの値の集合を表すもので、 `entries()`, `keys()`, `values()`, `forEach(),` と `has()` (`size` 属性も持ちます) のメソッドを持っています。また、このインターフェイスを実装したオブジェクトに対して {{jsxref("Statements/for...of", "for...of")}} を使用することもサポートしています。 set-like には、接頭辞として `readonly` を付けることも、付けないこともできます。read-only でない場合は、セットを変更するためのメソッド `add()`, `clear()`, `delete()` も実装されています。
 
-```js
+```webidl
 setlike<valueType>
 ```
 
@@ -484,7 +485,7 @@ set-like 宣言の前に read-only が付かない場合、以下のメソッド
 - `clear()` は集合風構造を空にします。例: {{domxref('FontFaceSet')}} の `.clear()` メソッド
 - `delete()` は項目を取り除きます。例: {{domxref('FontFaceSet')}} の `.delete()` メソッド
 
-このような集合インターフェイスでは、`for (var p in object)` という構文を `for (var p in object.entries())` の省略形として使うこともできます。
+このような集合インターフェイスでは、`for (const p in object)` という構文を `for (const p in object.entries())` の省略形として使うこともできます。
 
 ## 特殊な動作
 
@@ -496,7 +497,7 @@ IDLのメンバーには、適切なページで注意すべき特別な動作
 
 `stringifier` キーワードが属性名に付随している場合、オブジェクト名を参照することは属性名を参照することと同じ結果になります。次のような IDL を考えてみましょう。
 
-```js
+```webidl
 interface InterfaceIdentifier {
   stringifier attribute DOMString DOMString name;
 };
@@ -511,7 +512,7 @@ console.log(interfaceIdentifier.name);
 
 `stringifier` キーワードを単独で使用した場合、上記のようにインターフェイスのオブジェクトを使用することができますが、その動作はソースコードで定義されています。
 
-```js
+```webidl
 interface InterfaceIdentifier {
   stringifier;
 };
@@ -527,7 +528,7 @@ interface InterfaceIdentifier {
 
 これは、コンストラクターの最も一般的なケースです。与えられたインターフェイス A のコンストラクターは、 `a = new A(parameters);` のように使うことができます。
 
-```js
+```webidl
 [Constructor, Func="MessageChannel::Enabled",
   Exposed=(Window,Worker)]
     interface MessageChannel {…};
@@ -537,7 +538,7 @@ interface InterfaceIdentifier {
 
 無名コンストラクターのもうひとつの例、引数付きのものです。
 
-```js
+```webidl
 [Constructor(DOMString type, optional MessageEventInit eventInitDict),
  Exposed=(Window,Worker,System)]
    interface MessageEvent : Event {…};
@@ -545,7 +546,7 @@ interface InterfaceIdentifier {
 
 また、引数のリストが異なる無名のコンストラクターが複数存在することもあります。すべての構文は、ひとつのサブページで説明されています。
 
-```js
+```webidl
 [Constructor(DOMString url, URL base),
  Constructor(DOMString url, optional DOMString base),
  Exposed=(Window,Worker)]
@@ -554,7 +555,7 @@ interface InterfaceIdentifier {
 
 ### 名前付きコンストラクター
 
-```js
+```webidl
 [NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
     interface HTMLImageElement : HTMLElement {…
 ```
@@ -570,13 +571,13 @@ interface InterfaceIdentifier {
 ```webidl
 [Constructor(DOMString str)]
     interface MyInterface {
-     // …
+      ...
 };
 ```
 
 新しい仕様では、代わりに `constructor` という名前のメソッドに似た構文を使用し、返値の型を明示的に定義しない、次のような書き方をします。
 
-```js
+```webidl
 interface MyInterface {
   constructor(DOMString str);
 };
@@ -584,7 +585,7 @@ interface MyInterface {
 
 つまり、コンストラクターに拡張属性を指定できるようになり、すべてのコンストラクターが例外を発生することを前提にしなくなりました。コンストラクターが例外を発生する場合は、 `[Throws]` がそのことを示すのに使われます。
 
-```js
+```webidl
 interface MyInterface {
   [Throws] constructor();
 };

From 878aefa0a2a653c068868a5bee78839281e13401 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 12:51:37 +0900
Subject: [PATCH 086/268] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/document/referrer/index.md | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/files/ja/web/api/document/referrer/index.md b/files/ja/web/api/document/referrer/index.md
index 51a9b6bd4e9222..fbdae67b357172 100644
--- a/files/ja/web/api/document/referrer/index.md
+++ b/files/ja/web/api/document/referrer/index.md
@@ -1,23 +1,20 @@
 ---
-title: Document.referrer
+title: "Document: referrer プロパティ"
+short-title: referrer
 slug: Web/API/Document/referrer
+l10n:
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
 {{APIRef("DOM")}}
 
-**`Document.referrer`** プロパティは、このページへリンクしていたページの [URI](http://www.w3.org/Addressing/#background) を返します。
-
-## 構文
-
-```
-var referrer = document.referrer;
-```
+**`Document.referrer`** プロパティは、このページへリンクしていたページの [URI](https://www.w3.org/Addressing/#background) を返します。
 
 ### 値
 
-この値は、ユーザーが (リンクではなく、例えばブックマークから) ページに直接移動した場合は空文字列になります。プロパティはただ文字列を返すものであるため、参照先のページの DOM アクセスを提供するものではありません。
+この値は、ユーザーが（リンクではなく、例えばブックマークから）ページに直接移動した場合は空文字列になります。プロパティはただ文字列を返すものであるため、参照先のページの DOM アクセスを提供するものではありません。
 
-{{HTMLElement("iframe")}} の中では、 `Document.referrer` は最初、親ウィンドウの {{domxref("Window/location", "Window.location")}} の {{domxref("HTMLHyperlinkElementUtils/href", "href")}} と同じ値が設定されます。
+{{HTMLElement("iframe")}} の中では、 `Document.referrer` は親ウィンドウの {{domxref("Window/location", "Window.location")}} の {{domxref("HTMLAnchorElement/href", "href")}} と同じ値で初期化されます。
 
 ## 仕様書
 

From 38ae1a9a15d51e8ceeb307a5af6d6c72b16c83ab Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 13:07:17 +0900
Subject: [PATCH 087/268] =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E3=83=95?=
 =?UTF-8?q?=E3=83=A9=E3=82=B0=E3=83=A1=E3=83=B3=E3=83=88=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/htmlanchorelement/search/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/htmlanchorelement/search/index.md b/files/ja/web/api/htmlanchorelement/search/index.md
index 8110e0d0edf9a3..ed2d9babf81b30 100644
--- a/files/ja/web/api/htmlanchorelement/search/index.md
+++ b/files/ja/web/api/htmlanchorelement/search/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`HTMLAnchorElement.search`** プロパティは、*クエリー文字列*とも呼ばれる検索文字列、つまり `'?'` とその後に続く URL の引数の入った文字列です。
 
-最新のブラウザーでは、[`URLSearchParams`](/ja/docs/Web/API/URLSearchParams/get#examples) と [`URL.searchParams`](/ja/docs/Web/API/URL/searchParams#examples) を提供して、クエリー文字列から引数を簡単に解析できるようにしています。
+最新のブラウザーでは、[`URLSearchParams`](/ja/docs/Web/API/URLSearchParams/get#例) と [`URL.searchParams`](/ja/docs/Web/API/URL/searchParams#例) を提供して、クエリー文字列から引数を簡単に解析できるようにしています。
 
 ## 値
 
@@ -27,7 +27,7 @@ anchor.search; // '?q=123' を返す
 
 ### URLSearchParams を使用した高度な解釈
 
-他にも、 [`URLSearchParams`](/ja/docs/Web/API/URLSearchParams/get#examples) が使われる場面があります。
+他にも、 [`URLSearchParams`](/ja/docs/Web/API/URLSearchParams/get#例) が使われる場面があります。
 
 ```js
 let params = new URLSearchParams(queryString);

From abbf3f7cf4c3e924acfd7d346c57f3c967a4fdca Mon Sep 17 00:00:00 2001
From: MikeCAT <mikecat@users.noreply.github.com>
Date: Mon, 18 Sep 2023 21:27:02 +0900
Subject: [PATCH 088/268] Fix a link in Image_types

---
 files/ja/web/media/formats/image_types/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/media/formats/image_types/index.md b/files/ja/web/media/formats/image_types/index.md
index dc2fdd551ea327..6e76afbd957fde 100644
--- a/files/ja/web/media/formats/image_types/index.md
+++ b/files/ja/web/media/formats/image_types/index.md
@@ -801,7 +801,7 @@ JFIF (**J**PEG **F**ile **I**nterchange **F**ormat) 仕様書が、私たちが
     <tr>
       <th scope="row">圧縮</th>
       <td>
-        非可逆圧縮です。[離散コサイン変換](https://ja.wikipedia.org/wiki/離散コサイン変換)に基づいています。
+        非可逆圧縮です。<a href="https://ja.wikipedia.org/wiki/離散コサイン変換">離散コサイン変換</a>に基づいています。
       </td>
     </tr>
     <tr>

From b145f2a3e845e7b6f7cd1ef49592896577985b7f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 20:12:37 +0900
Subject: [PATCH 089/268] =?UTF-8?q?2023/08/11=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/streams_api/index.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/ja/web/api/streams_api/index.md b/files/ja/web/api/streams_api/index.md
index dcdc1f9c1d69bc..fdb96de9714242 100644
--- a/files/ja/web/api/streams_api/index.md
+++ b/files/ja/web/api/streams_api/index.md
@@ -2,7 +2,7 @@
 title: ストリーム API
 slug: Web/API/Streams_API
 l10n:
-  sourceCommit: d8a2942c4ea49cd3e4b5870fa39dca33f22257e4
+  sourceCommit: 2be3cb7ebebc76afa53a5604dc8be000d5ccd1c6
 ---
 
 {{DefaultAPISidebar("Streams")}}
@@ -13,23 +13,23 @@ l10n:
 
 ## 概念と使用方法
 
-ストリーミングでは、ネットワーク経由で受信するリソースを小さなチャンク（塊）に分割し、少しずつ処理します。これは、ウェブページに表示する資産を受け取るときに、ブラウザーがいずれにせよ行うことです。動画がバッファリングされて徐々に再生可能になり、画像が読み込まれるにつれて徐々に表示されることもあります。
+ストリーミングでは、ネットワーク経由で受信するリソースを小さなチャンク（塊）に分割し、少しずつ処理します。ブラウザーはメディア資産を受信する際にすでにこのような動作を行っています。動画はコンテンツのダウンロードが進むにつれてバッファーされ再生されますし、画像も読み込みが進むにつれて徐々に表示されることがあります。
 
-しかし、これは以前は JavaScript で実現できませんでした。以前は、何らかの種類のリソース（動画、テキストファイルなど）を処理したい場合は、ファイル全体をダウンロードし、適切な形式にデシリアライズされるのを待ってから、完全に受信した後に全部まとめて処理する必要がありました。
+しかし、この機能はこれまで JavaScript では利用できませんでした。以前は、ある種のリソース（動画やテキストファイルなど）を処理したい場合、ファイル全体をダウンロードして、適切な形式にデシリアライズされるのを待ち、それからすべてのデータを処理しなければなりませんでした。
 
-ストリームが JavaScript で利用できるようになったことで、これがすべて変わりました。クライアント側で利用可能になると、バッファー、文字列、 blob などを生成せずに、JavaScript で少しずつ生データの処理を開始することができます。
+ストリーム API を使えば、バッファーや文字列、blob ナドを生成する必要なく、利用できるようになったらすぐに、JavaScript で生のデータを少しずつ処理し始めることができます。
 
 ![ストリーム API の基本概念は、ネットワークからデータをいくつかのデータパケットに分割して取得することです。データは処理され、データパケットのストリームとしてブラウザーに送信されます。](concept.png)
 
 さらに利点もあります。 ストリームの開始または終了の検出、ストリームの連鎖、エラー処理と必要に応じたストリームのキャンセル、ストリームの読み取り速度への対応が可能です。
 
-ストリームの基本的な使用法は、応答をストリームとして利用可能にすることにかかっています。 例えば、成功した[フェッチリクエスト](/ja/docs/Web/API/fetch)によって返されたレスポンスの本体は、{{domxref("ReadableStream")}} として取り出すことができます。その後、{{domxref("ReadableStream.getReader()")}} で作成したリーダーを使用して読み取ったり、{{domxref("ReadableStream.cancel()")}} でキャンセルしたりすることができます。
+ストリームの使い方は、レスポンスをストリームとして利用できるかどうかにかかっています。例えば、[読み取りリクエスト](/ja/docs/Web/API/fetch)が成功すると返されるレスポンス本体は {{domxref("ReadableStream")}} となり、{{domxref("ReadableStream.getReader()")}} で作成したリーダーで読み取ることができます。
 
 より複雑な用途では、例えば[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内でデータを処理するために、 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクターを使用して独自のストリームを作成することができます。
 
 {{domxref("WritableStream")}} を使用してストリームにデータを書き込むこともできます。
 
-> **メモ:** ストリームの理論と実践の詳細については、[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)の記事をご覧ください。
+> **メモ:** ストリームの理論と実践の詳細については、[ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)の記事をご覧ください。
 
 ## ストリームのインターフェイス
 
@@ -54,7 +54,7 @@ l10n:
 ### 変換ストリーム
 
 - {{domxref("TransformStream")}}
-  - : 一連の変換可能なデータを表します。
+  - : ストリームオブジェクトの[パイプチェーン](/ja/docs/Web/API/Streams_API/Concepts#pipe_chains)を通して渡されるデータを変換するストリームオブジェクトの抽象化したものを表します。
 - {{domxref("TransformStreamDefaultController")}}
   - : 変換ストリームに関連付けられた {{domxref("ReadableStream")}} と {{domxref("WritableStream")}} を操作するためのメソッドを提供します。
 
@@ -108,5 +108,5 @@ l10n:
 
 - [ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)
 - [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
-- [読み取り可能な倍とストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
 - [書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)

From e1dc1b0e4f81250225b9bd6a2cd3241aec19371f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 20:20:19 +0900
Subject: [PATCH 090/268] =?UTF-8?q?2023/07/18=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/streams_api/concepts/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/files/ja/web/api/streams_api/concepts/index.md b/files/ja/web/api/streams_api/concepts/index.md
index f44b4b320ee276..0f592598065706 100644
--- a/files/ja/web/api/streams_api/concepts/index.md
+++ b/files/ja/web/api/streams_api/concepts/index.md
@@ -2,10 +2,10 @@
 title: ストリーム API の概念
 slug: Web/API/Streams_API/Concepts
 l10n:
-  sourceCommit: d8a2942c4ea49cd3e4b5870fa39dca33f22257e4
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
 ---
 
-{{apiref("Streams")}}
+{{DefaultAPISidebar("Streams")}}
 
 [ストリーム API](/ja/docs/Web/API/Streams_API) は、とても便利なツールセットをウェブプラットフォームに追加し、 JavaScript がネットワーク経由で受信したデータのストリームにプログラムからアクセスし、開発者の希望どおりに処理できるようにするオブジェクトを提供します。ストリームに関連する概念や用語の中には、初めて耳にするものもあるかもしれません。この記事では、知るべきことをすべて説明しています。
 
@@ -18,9 +18,9 @@ l10n:
 - **プッシュソース** (Push sources) は、アクセスしたときに常にデータをプッシュします。 ストリームへのアクセスを開始、一時停止、またはキャンセルするのはユーザー次第です。 例には、動画ストリームや TCP/[ウェブソケット](/ja/docs/Web/API/WebSockets_API)が含まれます。
 - **プルソース** (Pull sources) では、接続後、明示的にデータを要求する必要があります。 例には、[Fetch](/ja/docs/Web/API/Fetch_API) や [XHR](/ja/docs/Web/API/XMLHttpRequest/XMLHttpRequest) の呼び出しを介したファイルアクセス操作が含まれます。
 
-データは、**チャンク** (chunks) と呼ばれる小さな断片で順番に読み取られます。 チャンクは 1 バイトにすることも、特定のサイズの[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)など、より大きなものにすることもできます。 単一のストリームには、さまざまなサイズとタイプのチャンクを含めることができます。
+データは、**チャンク** (chunks) と呼ばれる小さな断片で順番に読み取られます。 チャンクは 1 バイトにすることも、特定のサイズの[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)など、より大きなものにすることもできます。 単一のストリームには、さまざまなサイズとタイプのチャンクを含めることができます。
 
-![](readable_streams.png)
+![読み取り可能なストリームのデータフロー](readable_streams.png)
 
 ストリームに置かれたチャンクは、**キューに入った** (enqueued) と言われます。 これは、読み取りの準備ができているキューで待機していることを意味します。 **内部キュー**（internal queue）は、まだ読み取られていないチャンクを追跡します（下の内部キューとキューイング戦略のセクションを参照）。
 
@@ -42,7 +42,7 @@ JavaScript では、これを {{domxref("ReadableStream.tee()")}} メソッド
 
 例えば、サーバーからレスポンスを取得してブラウザーにストリーミングしたいが、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)のキャッシュにもストリームしたい場合に、サービスワーカーでこれを行うことができます。 レスポンスの本体を複数回使用することはできず、ストリームを一度に複数のリーダーで読み取ることはできないため、これを行うには 2 つのコピーが必要です。
 
-![](tee.png)
+![データフローの分岐](tee.png)
 
 ## 書き込み可能なストリーム
 

From a6b0d87b793272ef1c921def05b7e6a51de2f033 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 21:11:36 +0900
Subject: [PATCH 091/268] =?UTF-8?q?2023/08/25=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../using_readable_streams/index.md           | 298 +++++++++++++++++-
 1 file changed, 287 insertions(+), 11 deletions(-)

diff --git a/files/ja/web/api/streams_api/using_readable_streams/index.md b/files/ja/web/api/streams_api/using_readable_streams/index.md
index e55d28e7cf0241..ebbd4bb530878c 100644
--- a/files/ja/web/api/streams_api/using_readable_streams/index.md
+++ b/files/ja/web/api/streams_api/using_readable_streams/index.md
@@ -2,10 +2,10 @@
 title: 読み取り可能なストリームの使用
 slug: Web/API/Streams_API/Using_readable_streams
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: 381c51574a3e6a07ee09c63493452440f046038d
 ---
 
-{{apiref("Streams")}}
+{{DefaultAPISidebar("Streams")}}
 
 JavaScript 開発者として、ネットワークを介して受信したデータのストリームをチャンクごとにプログラムで読み取り、操作することはとても便利です。しかし、ストリーム API の読み取り可能なストリームの機能はどのように使用するのでしょうか。この記事では、その基本について説明します。
 
@@ -13,11 +13,6 @@ JavaScript 開発者として、ネットワークを介して受信したデー
 
 > **メモ:** 書き込み可能なストリームに関する情報を探しているのであれば、[書き込み可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_writable_streams)を見てみてください。
 
-## ブラウザーの対応
-
-Fetch の本文オブジェクトをストリームとして消費し、自分自身で読み取り可能なストリームを作成することができます。ほとんどのブラウザーで可能です。
-[パイプチェーン](/ja/docs/Web/API/Streams_API/Concepts#パイプチェーン)の対応はまだ普遍的ではないので、互換性一覧表を調べる価値があるかもしれません（例えば、 {{domxref("ReadableStream.pipeThrough()")}} を参照してください）。
-
 ## いくつかの例を見つける
 
 この記事では、[dom-examples/streams](https://github.com/mdn/dom-examples/tree/main/streams) リポジトリーから取得したさまざまな例を見ていきます。 そこには完全なソースコードと例へのリンクがあります。
@@ -68,9 +63,9 @@ fetch("./tortoise.png")
   });
 ```
 
-### ストリームを読む
+### ストリームを読み取る
 
-リーダーを取り付けたら、{{domxref("ReadableStreamDefaultReader.read()")}} メソッドを使用してストリームからデータチャンクを読み取ることができます。 これにより、ストリームから 1 つチャンクを読み取って、好きなことを実行できます。 例えば、単純なストリームポンプの例では、新しいカスタム `ReadableStream` で各チャンクをキューに入れ（これについては次のセクションで詳しく説明します）、そこから新しい {{domxref("Response")}} を作成し、{{domxref("Blob")}} として使用し、 {{domxref("URL.createObjectURL()")}} を使用してその blob からオブジェクト URL を取得し、それを {{htmlelement("img")}} 要素で画面に表示して、元のフェッチした画像のコピーを効果的に作成します。
+リーダーを取り付けたら、{{domxref("ReadableStreamDefaultReader.read()")}} メソッドを使用してストリームからデータチャンクを読み取ることができます。 これにより、ストリームから 1 つチャンクを読み取って、好きなことを実行できます。 例えば、単純なストリームポンプの例では、新しいカスタム `ReadableStream` で各チャンクをキューに入れ（これについては次のセクションで詳しく説明します）、そこから新しい {{domxref("Response")}} を作成し、{{domxref("Blob")}} として使用し、 {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を使用してその blob からオブジェクト URL を取得し、それを {{htmlelement("img")}} 要素で画面に表示して、元のフェッチした画像のコピーを効果的に作成します。
 
 ```js
 // 元の画像を取得
@@ -146,8 +141,287 @@ return pump();
 3. さらに読み込むストリームがある場合は、現在のチャンクを処理してから、関数を再度実行します。
 4. 読み取るストリームがなくなるまで関数を再帰的に実行し続けます。 この場合、手順 2 が実行されます。
 
+実際に「ポンプ」を実行するコードをすべて除去されると、コードは次のように一般化されるかもしれません。
+
+```js
+fetch("http://example.com/somefile.txt")
+  // 本体を ReadableStream として受け取る
+  .then((response) => {
+    const reader = response.body.getReader();
+    // read() は値を受け取ったときに解決するプロミスを返す
+    reader.read().then(function pump({ done, value }) {
+      if (done) {
+        // データの最後の塊で何かを行い、リーダーを終了する
+        return;
+      }
+      // そうでない場合は、ここで現在の塊を処理する
+
+      // さらに読み進めて、この関数をもう一度呼び出す
+      return reader.read().then(pump);
+    });
+  })
+  .catch((err) => console.error(err));
+```
+
 > **メモ:** この関数は `pump()` が自分自身を呼び出すかのように見え、深い再帰につながる可能性があります。しかし、 `pump` は非同期であり、それぞれの `pump()` の呼び出しはプロミスハンドラーの終わりにあるため、実際にはプロミスハンドラーの連鎖に類似しています。
 
+ストリームの読み取りは、プロミスではなく async/awaitを使用して書くとさらに簡単です。
+
+```js
+async function readData(url) {
+  const response = await fetch(url);
+  const reader = response.body.getReader();
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      // データの最後の塊で何かを行い、リーダーを終了する
+      return;
+    }
+    // そうでない場合は、ここで現在の塊を処理する
+  }
+}
+```
+
+## 非同期反復処理を用いた fetch() の使用
+
+`fetch()` を使用するさらに簡単な方法があります。それは、[`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) 構文を使用して、返された `response.body` を反復処理することです。
+これは `response.body` が `ReadableStream` を返し、それが[非同期反復可能](/ja/docs/Web/API/ReadableStream#async_iteration)なのでうまく動作します。
+
+この手法を用いると、前節のコード例を次のように書き換えることができます。
+
+```js
+async function readData(url) {
+  const response = await fetch(url);
+  for await (const chunk of response.body) {
+    // Do something with each "chunk"
+  }
+  // Exit when done
+}
+```
+
+ストリームの反復処理を中止したい場合は、[`AbortController`](/ja/docs/Web/API/AbortController) とそれに関連付けられた [`AbortSignal`](/ja/docs/Web/API/AbortSignal) を使用して `fetch()` 処理をキャンセルすることができます：
+
+```js
+const aborter = new AbortController();
+button.addEventListener("click", () => aborter.abort());
+logChunks("http://example.com/somefile.txt", { signal: aborter.signal });
+
+async function logChunks(url, { signal }) {
+  const response = await fetch(url, signal);
+  for await (const chunk of response.body) {
+    // チャンクに対して何かを行う
+  }
+}
+```
+
+また、下記のコードに示すように、`break` を使用してループを終了することもできます。
+ループ内のコードは、ストリームに新しいデータを持つことができたときにのみ実行されるので、シグナルが中断されてから `break` が呼び付けられるまでに多少の遅延があることに注意してください。
+
+```js
+const aborter = new AbortController();
+button.addEventListener("click", () => aborter.abort());
+logChunks("http://example.com/somefile.txt", { signal: aborter.signal });
+
+async function logChunks(url, { signal }) {
+  const response = await fetch(url);
+  for await (const chunk of response.body) {
+    if (signal.aborted) break; // ループから脱出するだけ
+    // チャンクに対して何かを行う
+  }
+}
+```
+
+### 非同期リーダーの例
+
+<!-- 下記のコードのほとんどは、例に関係ないので意図的に隠してあります。 -->
+
+```js hidden
+// A mock push source.
+// Used to simulate some random data arriving
+class MockPushSource {
+  // total amount of data to stream from the push source
+  static #maxData = 90;
+  // total data read so far (capped to maxData)
+  #dataRead = 0;
+
+  // Method returning promise when this push source is readable.
+  dataRequest() {
+    const result = {
+      bytesRead: 8,
+      data: "",
+    };
+
+    return new Promise((resolve) => {
+      if (this.#dataRead >= MockPushSource.#maxData) {
+        // Out of data
+        result.bytesRead = 0;
+        result.data = "";
+        resolve(result);
+        return;
+      }
+
+      // Emulate slow read of data
+      setTimeout(() => {
+        const numberBytesReceived = 8;
+        this.#dataRead += numberBytesReceived;
+        result.data = MockPushSource.#randomChars();
+        resolve(result);
+      }, 500);
+    });
+  }
+
+  // Dummy close function
+  close() {
+    return;
+  }
+
+  // Return random character string
+  static #randomChars(length = 8) {
+    let string = "";
+    const choices =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+    for (let i = 0; i < length; i++) {
+      string += choices[Math.floor(Math.random() * choices.length)];
+    }
+    return string;
+  }
+}
+```
+
+<!-- 以下の HTML と js はレポートの設定です。読者には有益でないため、非表示にしました。 -->
+
+```css hidden
+.input {
+  float: left;
+  width: 50%;
+}
+.output {
+  float: right;
+  width: 50%;
+  overflow-wrap: break-word;
+}
+button {
+  display: block;
+}
+```
+
+```html hidden
+<button>Cancel stream</button>
+<div class="input">
+  <h2>Underlying source</h2>
+  <ul></ul>
+</div>
+<div class="output">
+  <h2>Consumer</h2>
+  <ul></ul>
+</div>
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list2.appendChild(listItem);
+}
+```
+
+```js hidden
+const stream = makePushSourceStream();
+
+function makePushSourceStream() {
+  const pushSource = new MockPushSource();
+
+  return new ReadableStream({
+    start(controller) {
+      readRepeatedly().catch((e) => controller.error(e));
+      function readRepeatedly() {
+        return pushSource.dataRequest().then((result) => {
+          if (result.data.length == 0) {
+            logSource(`No data from source: closing`);
+            controller.close();
+            return;
+          }
+
+          logSource(`Enqueue data: ${result.data}`);
+          controller.enqueue(result.data);
+          return readRepeatedly();
+        });
+      }
+    },
+
+    cancel() {
+      logSource(`cancel() called on underlying source`);
+      pushSource.close();
+    },
+  });
+}
+```
+
+```js hidden
+// Monkey patch fetch() so it returns a response that is a mocked stream
+window.fetch = async (...args) => {
+  return { body: stream };
+};
+```
+
+下記のコードは、より完全な例を示しています。
+ここでは、try/catch ブロック内で反復可能オブジェクトを使用してフェッチストリームを使用しています。
+ループの反復処理ごとに、コードは単純に受信したバイト数をログ出力して数えます。
+エラーがある場合は、その問題をログ出力します。
+`fetch()` 処理は `AbortSignal` を使用して取り消される可能性があり、その場合もエラーとしてログ出力されます。
+
+```js
+let bytes = 0;
+
+const aborter = new AbortController();
+button.addEventListener("click", () => aborter.abort());
+logChunks("http://example.com/somefile.txt", { signal: aborter.signal });
+
+async function logChunks(url, { signal }) {
+  try {
+    const response = await fetch(url, signal);
+    for await (const chunk of response.body) {
+      if (signal.aborted) throw signal.reason;
+      bytes += chunk.length;
+      logConsumer(`Chunk: ${chunk}. Read ${bytes} characters.`);
+    }
+  } catch (e) {
+    if (e instanceof TypeError) {
+      console.log(e);
+      logConsumer("TypeError: Browser may not support async iteration");
+    } else {
+      logConsumer(`Error in async iterator: ${e}.`);
+    }
+  }
+}
+```
+
+下記のログ出力例では、コードが実行されているか、ブラウザーが `ReadableStream` の非同期反復処理に対応していないことを表示しています。
+正しい辺には取得した塊が表示されます。フェッチを停止するにはキャンセルボタンを押します。
+
+> **メモ:** このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストの塊を生成する `ReadableStream` を返すだけです。
+> 下記左列の「基盤ソース」は模擬ソースで生成されるデータで、右列はコンシューマーからのログ出力です。
+> （模擬ソースのコードは例に関係ないので表示しません。）
+
+{{EmbedLiveSample("Example async reader","100%","400px")}}
+
 ## 独自の読み取り可能なストリームを作成する
 
 この記事で学習している単純なストリームポンプの例には 2 番目の部分が含まれています — フェッチした本体から画像をチャンク単位で読み取った後、独自作成の別のカスタムストリームのキューに入れます。 これをどのように作成するのでしょうか？ `ReadableStream()` コンストラクターです。
@@ -181,7 +455,8 @@ const stream = new ReadableStream(
 1. `start(controller)` — `ReadableStream` が構築された直後に 1 回だけ呼び出されるメソッド。 このメソッド内には、ストリーム機能を設定するコードを含める必要があります。 例えば、データの生成を開始するか、ソースにアクセスします。
 2. `pull(controller)` — 含まれている場合、ストリームの内部キューがいっぱいになるまで繰り返し呼び出されるメソッド。 これは、より多くのチャンクがキューに入れられるときにストリームを制御するために使用できます。
 3. `cancel()` — 含まれている場合、ストリームをキャンセルすることをアプリが通知した場合に呼び出されるメソッド（例えば、 {{domxref("ReadableStream.cancel()")}} が呼び出された場合）。 内容は、ストリームのソースへのアクセスを解放するために必要なことを行う必要があります。
-4. `type` および `autoAllocateChunkSize` — これらが含まれている場合、ストリームがバイトストリームであることを示すために使用されます。バイトストリームは、通常の（既定の）ストリームとは目的や用途が多少異なるため、今後のチュートリアルで個別に取り上げます。また、まだどこでも実装されていません。
+4. `type` および `autoAllocateChunkSize` — これらが含まれている場合、ストリームがバイトストリームであることを示すために使用されます。
+   バイトストリームは、通常の（既定の）ストリームとは用途や使用する場合が多少異なるため、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)で別に扱っています。
 
 簡単な例のコードをもう一度見ると、次のように `ReadableStream()` コンストラクターには、フェッチしたストリームからすべてのデータを読み取るための単一のメソッド `start()` のみが含まれていることがわかります。
 
@@ -239,6 +514,7 @@ readableStream
 カスタムストリームのコンストラクターには、{{domxref("setInterval()")}} 呼び出しを使用して 1 秒ごとにランダムな文字列を生成する `start()` メソッドがあります。 次に、{{domxref("ReadableStreamDefaultController.enqueue()")}} を使用してストリームに入れます。 ボタンが押されると、インターバルがキャンセルされ、 `readStream()` と呼ばれる関数が呼び出されて、データをストリームから再度読み取ります。 また、チャンクをストリームのキューへ入れることを止めたため、ストリームを閉じます。
 
 ```js
+let interval;
 const stream = new ReadableStream({
   start(controller) {
     interval = setInterval(() => {
@@ -278,7 +554,7 @@ function readStream() {
   // read() は、値を受け取ったときに解決するプロミスを返します
   reader.read().then(function processText({ done, value }) {
     // 結果オブジェクトには2つのプロパティが含まれます。
-    // done  - ストリームがすべてのデータを既に提供している場合は true。
+    // done - ストリームがすべてのデータを既に提供している場合は true。
     // value - 一部のデータ。 done が true の場合、常に undefined。
     if (done) {
       console.log("Stream complete");

From 5a01ae89f840fbae22a97581916e56418875428a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 22:31:21 +0900
Subject: [PATCH 092/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../using_readable_byte_streams/index.md      | 1143 +++++++++++++++++
 1 file changed, 1143 insertions(+)
 create mode 100644 files/ja/web/api/streams_api/using_readable_byte_streams/index.md

diff --git a/files/ja/web/api/streams_api/using_readable_byte_streams/index.md b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
new file mode 100644
index 00000000000000..84b9cc4491e183
--- /dev/null
+++ b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
@@ -0,0 +1,1143 @@
+---
+title: 読み取り可能なバイトストリームの使用
+slug: Web/API/Streams_API/Using_readable_byte_streams
+l10n:
+  sourceCommit: 381c51574a3e6a07ee09c63493452440f046038d
+---
+
+{{DefaultAPISidebar("Streams")}}
+
+読み取り可能なバイトストリームとは、[読み取り可能なストリーム](/ja/docs/Web/API/Streams_API/Using_readable_streams)のうち `type: "bytes"` の基盤バイトソースがあり、（ストリーム内部のキューをバイパスして）基盤ソースからコンシューマーへの効率的なゼロコピー移譲に対応しています。
+これは、データが任意の大きさの、潜在的にとても大きな塊で供給されたりリクエストされたりする可能性があり、したがってコピーを避けることが効率を向上させる可能性がある使用される用途を意図しています。
+
+この記事では、読み取り可能なバイトストリームと通常の「既定」ストリームとの比較、およびそれらをどのように作成し、使用するかについて説明します。
+
+> **メモ:** 読み取り可能なバイトストリームは、「通常の」読み取り可能なストリームとほとんど同じであり、概念もほとんどすべて同じです。
+> この記事は、あなたがすでにそれらの概念を理解していることを想定しており、（もしそうであれば）表面的にしか取り上げません。
+> 関連する概念に慣れていない方は、先に[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)、[ストリームの概念と使用法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)、[ストリーム API の概要](/ja/docs/Web/API/Streams_API/Concepts) を読んでください。
+
+## 概要
+
+読み取り可能なストリームは、ファイルやソケットなどの基盤となるソースから、リーダー、変換ストリーム、書き込み可能ストリームなどのコンシューマーにデータをストリーミングするための一貫したインターフェイスを提供します。
+通常の読み取り可能なストリームでは、基盤となるソースからのデータは常に内部キューを通ってコンシューマーに渡されます。
+読み取り可能なバイトストリームは、内部キューが空の場合、基盤となるソースがコンシューマーに直接書き込める（効率的なゼロコピー移譲）という点で異なります。
+
+読み取り可能なバイトストリームは `type: "bytes"` を `underlyingSource` オブジェクトに指定したものを、 [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream)に渡すことで作成されます。
+この値を設定すると、ストリームは {{domxref("ReadableByteStreamController")}} で作成され、`start(controller)` と `pull(controller)` コールバック関数を呼び出す際に、このオブジェクトが基盤内のソースに渡されます。
+
+{{domxref("ReadableByteStreamController")}} と既定のコントローラー ({{domxref("ReadableStreamDefaultController")}}) との主な違いは、追加のプロパティ {{domxref("ReadableByteStreamController.byobRequest")}} （{{domxref("ReadableStreamBYOBRequest")}} 型）を持っていることです。
+これは、基盤ソースからのゼロコピー移譲として行われる、コンシューマーによる待機中の読み取りリクエストを表します。
+保留中のリクエストがない場合、このプロパティは `null` になります。
+
+`byobRequest` は、読み取り可能なバイトストリームに対して読み取りリクエストが行われ、ストリームの内部キューにデータがない場合にのみ利用できます（データがある場合は、それらのキューからリクエストが満たされます）。
+
+データを転送する必要があるバイト基盤は `byobRequest` プロパティを調べ、利用できる場合はそれを使用してデータを転送する必要があります。
+プロパティが `null` の場合、受信データは代わりに {{domxref("ReadableByteStreamController.enqueue()")}} を使用してストリーム内部のキューに追加する必要があります（これは、「既定の」 ストリームを使用している場合にデータを転送する唯一の方法です）。
+
+{{domxref("ReadableStreamBYOBRequest")}} は {{domxref("ReadableStreamBYOBRequest.view","view")}} プロパティを持っています。これは移譲のために割り当てられたバッファーに関するビューです。
+基盤となるソースからのデータはこのプロパティに書き込まれ、次に基盤となるソースは、書き込まれたバイト数を示す {{domxref("ReadableStreamBYOBRequest.respond()","respond()")}} を呼び出さなければなりません。
+これはデータが移譲されるべきことを指示し、コンシューマーによる待機中の読み取りリクエストは解決されます。
+`respond()` を呼び出した後、 `view` には書き込みができなくなります。
+
+追加のメソッド {{domxref("ReadableStreamBYOBRequest.respondWithNewView()")}} もあります。このメソッドに、基盤となるソースは、移譲するデータを格納した「新しい」ビューを渡すことができます。
+この新しいビューは、元と同じメモリーバッファー上で、同じ開始オフセットからでなければなりません。
+このメソッドは、例えば、バイト基盤が最初にワーカースレッドにビューを移譲し、それを取得してから `byobRequest` に応答する必要がある場合に使用します。
+ほとんどの場合、このメソッドは必要ありません。
+
+読み取り可能なバイトストリームは通常、 {{domxref("ReadableStreamBYOBReader")}} を使用して読み取られます。これは、ストリーム上で {{domxref("ReadableStream.getReader()")}} を呼び出し、 options 引数に `mode: "byob"` を指定します。
+
+読み取り可能なバイトストリームは、既定のリーダー ({{domxref("ReadableStreamDefaultReader")}}) を使用して読み取ることもできますが、この場合 `byobRequest` オブジェクトは、ストリームに対して自動バッファー割り当てが有効になっている（[`autoAllocateChunkSize`](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) がストリームの `underlyingSource` に設定されている）場合にのみ作成されます。
+この用途では `autoAllocateChunkSize` で示されるサイズがバッファーサイズとして使用されることに注意してください。
+このプロパティを指定しなかった場合、既定値ではリーダーは「動作」しますが、基盤になるソースに `byobRequest` が提供されることはなく、すべてのデータはストリームの内部キューを通じて転送されます。
+
+上記の異なる点の他にも、バイトストリームのコントローラーと基盤は、既定のストリームのコントローラーととてもよく似ており、[ほぼ同じ方法で使用します](/ja/docs/Web/API/Streams_API/Using_readable_streams)。
+
+## 例
+
+### バイトリーダーの基盤のプッシュソース
+
+このライブ例では、プッシュ基礎バイトソースで読み取り可能なバイトストリームを作成し、バイトリーダーを使用して読み取る方法を示します。
+
+プル型バイトソースの場合とは異なり、データは任意の時点で到着します。
+そのため、基礎となるソースは `controller.byobRequest` を使用して、受信データが存在する場合はそれを移譲し、そうでない場合はストリーム内部のキューにデータを入れる必要があります。
+さらに、データはいつでも到着する可能性があるため、監視動作は `underlyingSource.start()` コールバック関数で設定します。
+
+この例は、ストリーム仕様のプッシュバイトソースの例から大きな影響を受けています。
+この例では、任意のサイズのデータを供給する「仮想ソケット」ソースを使用しています。
+元の基盤がストリームにデータを送信するために移譲と待ち行列の両方を使用することができるように、リーダーは様々な点で意図的に遅延しています。
+背圧対応は実演されていません。
+
+> **メモ:** 既定のリーダーでは、基盤バイトソースも使用することができます。
+> 自動バッファー割り当てが有効になっている場合、コントローラーは、リーダーからの未処理のリクエストがあり、ストリームの内部キューが空である場合に、ゼロコピー移譲用に修正されたサイズのバッファーを供給します。
+> 自動バッファー割り当てが有効になっていない場合、バイトストリームのデータはすべて常に待ち行列に入れられます。
+> これは、"pull: underlying byte source "の例で表示させた動作に似ています。
+
+#### 模擬基盤ソケットソース
+
+模擬基盤には 3 つの重要なメソッドがあります。
+
+- `select2()` は未処理のリクエストを表します。
+  データが利用できると解決するプロミスを返します。
+- `readInto()` はソケットから与えられたバッファーにデータを読み込み、データをクリアします。
+- `close()` はソケットを閉じます。
+
+実装するためにとても単純化しています。
+下記で示すように、 `select2()` はタイムアウト時にランダムなサイズのランダムなデータのバッファー を作成します。
+作成したデータはバッファーに読み込まれ、`readInto()` でクリアされます。
+
+```js
+class MockHypotheticalSocket {
+  constructor() {
+    this.max_data = 800; // total amount of data to stream from "socket"
+    this.max_per_read = 100; // max data per read
+    this.min_per_read = 40; // min data per read
+    this.data_read = 0; // total data read so far (capped is maxdata)
+    this.socketdata = null;
+  }
+
+  // Method returning promise when this socket is readable.
+  select2() {
+    // Object used to resolve promise
+    const resultobj = {};
+    resultobj["bytesRead"] = 0;
+
+    return new Promise((resolve /*, reject*/) => {
+      if (this.data_read >= this.max_data) {
+        //out of data
+        resolve(resultobj);
+        return;
+      }
+
+      // Emulate slow read of data
+      setTimeout(() => {
+        const numberBytesReceived = this.getNumberRandomBytesSocket();
+        this.data_read += numberBytesReceived;
+        this.socketdata = this.randomByteArray(numberBytesReceived);
+        resultobj["bytesRead"] = numberBytesReceived;
+        resolve(resultobj);
+      }, 500);
+    });
+  }
+
+  /* Read data into specified buffer offset */
+  readInto(buffer, offset, length) {
+    let length_data = 0;
+    if (this.socketdata) {
+      length_data = this.socketdata.length;
+      const myview = new Uint8Array(buffer, offset, length);
+      // Write the length of data specified into buffer
+      // Code assumes buffer always bigger than incoming data
+      for (let i = 0; i < length_data; i++) {
+        myview[i] = this.socketdata[i];
+      }
+      this.socketdata = null; // Clear "socket" data after reading
+    }
+    return length_data;
+  }
+
+  // Dummy close function
+  close() {
+    return;
+  }
+
+  // Return random number bytes in this call of socket
+  getNumberRandomBytesSocket() {
+    // Capped to remaining data and the max min return-per-read range
+    const remaining_data = this.max_data - this.data_read;
+    const numberBytesReceived =
+      remaining_data < this.min_per_read
+        ? remaining_data
+        : this.getRandomIntInclusive(
+            this.min_per_read,
+            Math.min(this.max_per_read, remaining_data),
+          );
+    return numberBytesReceived;
+  }
+
+  // Return random number between two values
+  getRandomIntInclusive(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+
+  // Return random character string
+  randomChars(length = 8) {
+    let string = "";
+    let choices =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+    for (let i = 0; i < length; i++) {
+      string += choices.charAt(Math.floor(Math.random() * choices.length));
+    }
+    return string;
+  }
+
+  /* Return random Uint8Array of bytes */
+  randomByteArray(bytes = 8) {
+    const textEncoder = new TextEncoder();
+    return textEncoder.encode(this.randomChars(bytes));
+  }
+}
+```
+
+<!-- The following html and js sets up reporting. Hidden because it is not useful for readers -->
+
+```css hidden
+.input {
+  float: left;
+  width: 50%;
+}
+.output {
+  float: right;
+  width: 50%;
+  overflow-wrap: break-word;
+}
+button {
+  display: block;
+}
+```
+
+```html hidden
+<button>Cancel stream</button>
+<div class="input">
+  <h2>Underlying source</h2>
+  <ul></ul>
+</div>
+<div class="output">
+  <h2>Consumer</h2>
+  <ul></ul>
+</div>
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list2.appendChild(listItem);
+}
+```
+
+#### 読み取り可能なソケットプッシュバイトストリームの作成
+
+以下のコードは、読み取り可能なソケット「プッシュ」バイトストリームを定義する方法を示しています。
+
+`underlyingSource` オブジェクトの定義は [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream)の最初の引数として渡されます。
+これを読み取り可能な「バイト」ストリームにするために、 `type: "bytes"` をオブジェクトのプロパティとして指定します。
+これにより、ストリームは確実に {{domxref("ReadableByteStreamController")}} に（既定のコントローラー ({{domxref("ReadableStreamDefaultController")}} の代わりに）渡されるようになります。
+
+データはコンシューマーが処理する準備ができる前にソケットに到着する可能性があるため、基盤の読み取りに関するすべての設定は `start()` コールバックメソッドで行います（データの処理を始めるにはプルを待ちません）。
+実装は "socket" を開き、データをリクエストするために `select2()` を呼び出します。
+返されたプロミスが解決されると、コードは `controller.byobRequest` が存在するか (`null` でないか) を調べ、存在する場合は `socket.readInto()` を呼び出してデータをリクエストにコピーして移譲します。
+もし `byobRequest` が存在しなければ、ゼロコピーで転送できる消費ストリームからの未処理のリクエストはありません。
+この場合、 `controller.enqueue()` を使用してストリーム内部のキューにデータをコピーします。
+
+さらにデータを要求する `select2()` リクエストは、データがないリクエストを返すまで再投稿されます。
+この点で、コントローラーはストリームを閉じるために使用されます。
+
+```js
+const stream = makeSocketStream("dummy host", "dummy port");
+
+const DEFAULT_CHUNK_SIZE = 400;
+
+function makeSocketStream(host, port) {
+  const socket = new MockHypotheticalSocket();
+
+  return new ReadableStream({
+    type: "bytes",
+
+    start(controller) {
+      readRepeatedly().catch((e) => controller.error(e));
+      function readRepeatedly() {
+        return socket.select2().then(() => {
+          // Since the socket can become readable even when there's
+          // no pending BYOB requests, we need to handle both cases.
+          let bytesRead;
+          if (controller.byobRequest) {
+            const v = controller.byobRequest.view;
+            bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+            if (bytesRead === 0) {
+              controller.close();
+            }
+            controller.byobRequest.respond(bytesRead);
+            logSource(`byobRequest with ${bytesRead} bytes`);
+          } else {
+            const buffer = new ArrayBuffer(DEFAULT_CHUNK_SIZE);
+            bytesRead = socket.readInto(buffer, 0, DEFAULT_CHUNK_SIZE);
+            if (bytesRead === 0) {
+              controller.close();
+            } else {
+              controller.enqueue(new Uint8Array(buffer, 0, bytesRead));
+            }
+            logSource(`enqueue() ${bytesRead} bytes (no byobRequest)`);
+          }
+
+          if (bytesRead === 0) {
+            return;
+            // no more bytes in source
+          }
+          return readRepeatedly();
+        });
+      }
+    },
+
+    cancel() {
+      socket.close();
+      logSource(`cancel(): socket closed`);
+    },
+  });
+}
+```
+
+`readRepeatedly()` はプロミスを返すことに注意してください。これを使用して、読み込み処理の設定や処理で発生したエラーをキャッチします。
+エラーは上で示したようにコントローラに渡されます（`readRepeatedly().catch((e) => controller.error(e));` を参照）。
+
+最後に `cancel()` メソッドが指定され、基盤となっているソースを閉じます。`pull()` コールバックは不要なので実装しません。
+
+#### プッシュバイトストリームの使用
+
+以下のコードはソケットのバイトストリーム用に `ReadableStreamBYOBReader` を作成し、それを使用してデータをバッファーに読み込みます。
+なお、 `processText()` が再帰的に呼び出され、バッファーが一杯になるまでデータを読み込まれることに注意してください。
+基盤がもうデータがないと指示すると、`reader.read()`には `done` が設定され、読み込み処理を完了します。
+
+このコードは、上記の[バイトリーダー付きの基盤プルソース](#バイトリーダー付きの基盤プルソース)の例とほとんど同じです。
+唯一の違いは、リーダーが読み取りを遅くするコードを含んでいることです。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+let buffer = new ArrayBuffer(4000);
+readStream(reader);
+
+function readStream(reader) {
+  let bytesReceived = 0;
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    // read() returns a promise that resolves when a value has been received
+    reader
+      .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+      .then(async function processText({ done, value }) {
+        // Result objects contain two properties:
+        // done - true if the stream has already given all its data.
+        // value - some data. Always undefined when done is true.
+
+        if (done) {
+          logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+          return;
+        }
+
+        buffer = value.buffer;
+        offset += value.byteLength;
+        bytesReceived += value.byteLength;
+
+        //logConsumer(`Read ${bytesReceived} bytes: ${value}`);
+        logConsumer(`Read ${bytesReceived} bytes`);
+        result += value;
+
+        // Add delay to emulate when data can't be read and data is enqueued
+        if (bytesReceived > 300 && bytesReceived < 600) {
+          logConsumer(`Delaying read to emulate slow stream reading`);
+          const delay = (ms) =>
+            new Promise((resolve) => setTimeout(resolve, ms));
+          await delay(1000);
+        }
+
+        // Read some more, and call this function again
+        return reader
+          .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+          .then(processText);
+      });
+  }
+}
+```
+
+#### リーダーと使用したストリームの取り消し
+
+{{domxref("ReadableStreamBYOBReader.cancel()")}} を使用してストリームを取り消すことができます。
+この例では、"user choice" の理由でボタンがクリックされた場合にメソッドを呼び出しています（ボタンの他の HTML やコードは表示していません）。
+取り消される可能性がある処理が完了したときもログ出力しています。
+
+```js
+button.addEventListener("click", () => {
+  reader
+    .cancel("user choice")
+    .then(() => logConsumer("reader.cancel complete"));
+});
+```
+
+{{domxref("ReadableStreamBYOBReader.releaseLock()")}} を使用すると、ストリームを取り消すことなくリーダーを解放することができます。
+ただし、未処理の読み込みリクエストは即座に拒否されることに注意してください。
+残りの塊を読むために、後で新しいリーダーを取得することができます。
+
+#### ストリームの close/error を監視
+
+{{domxref("ReadableStreamBYOBReader.closed")}} プロパティは、ストリームが閉じられたときに解決し、エラーがある場合は拒否されたプロミスを返します。
+このケースではエラーは期待されませんが、続くコードでは完了ケースをログ出力する必要があります。
+
+```js
+reader.closed
+  .then(() => {
+    logConsumer("ReadableStreamBYOBReader.closed: resolved");
+  })
+  .catch(() => {
+    logConsumer("ReadableStreamBYOBReader.closed: rejected:");
+  });
+```
+
+#### 結果
+
+基盤となるプッシュソース（左）とコンシューマー（右）からのログ出力を下記に示します。
+中央の期間は、データがゼロコピー処理として移譲されるのではなく、エンキューされる期間です。
+
+{{EmbedLiveSample("Underlying push source with default reader","100%","500px")}}
+
+### バイトリーダー付きの基盤プルソース
+
+このライブ表示例は、ファイルなどの「プル」バイト基盤からデータを読み取り、ストリームによって {{domxref("ReadableStreamBYOBReader")}} にゼロコピー移譲する方法を示しています。
+
+#### 模擬基盤ファイルソース
+
+基盤となるプルソースには、以下のクラスを使用して、nodejs の [`FileHandle`](https://nodejs.org/api/fs.html#class-filehandle)、特に [`read()`](https://nodejs.org/api/fs.html#filehandlereadbuffer-offset-length-position) メソッドを（とても表面的に）模倣します。
+このクラスは、ファイルを表すランダムなデータを生成します。
+`read()` メソッドはこのデータを指定された位置から提供されたバッファーに読み込みます。
+`close()` メソッドは何かするわけではありません。ストリームのコンストラクターを定義する際に、ソースを閉じる場所を示すために指定されただけです。
+
+> **メモ:** この同じクラスは、すべての「プルソース」の例に使用しています。
+> ここで表示させているのは、あくまで情報です（模擬であることがわかるように）。
+
+```js
+class MockUnderlyingFileHandle {
+  constructor() {
+    this.maxdata = 1300; // "file size"
+    this.filedata = this.randomByteArray(this.maxdata);
+    this.position = 0;
+  }
+
+  // Read data from "file" at position/length into specified buffer offset
+  read(buffer, offset, length, position) {
+    // Object used to resolve promise
+    const resultobj = {};
+    resultobj["buffer"] = buffer;
+    resultobj["bytesRead"] = 0;
+
+    return new Promise((resolve /*, reject*/) => {
+      if (position >= this.maxdata) {
+        //out of data
+        resolve(resultobj);
+        return;
+      }
+
+      // Read random data into supplied buffer
+      const myview = new Uint8Array(buffer, offset, length);
+      // Write the length of data specified
+      for (let i = 0; i < length; i++) {
+        myview[i] = this.filedata[position + i];
+        resultobj["bytesRead"] = i;
+        if (position + i >= this.maxdata) {
+          break;
+        }
+      }
+      // Emulate slow read of data
+      setTimeout(() => {
+        resolve(resultobj);
+      }, 1000);
+    });
+  }
+
+  // Dummy close function
+  close() {
+    return;
+  }
+
+  // Return random character string
+  randomChars(length = 8) {
+    let string = "";
+    let choices =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+    for (let i = 0; i < length; i++) {
+      string += choices.charAt(Math.floor(Math.random() * choices.length));
+    }
+    return string;
+  }
+
+  // Return random Uint8Array of bytes
+  randomByteArray(bytes = 8) {
+    const textEncoder = new TextEncoder();
+    return textEncoder.encode(this.randomChars(bytes));
+  }
+}
+```
+
+<!-- The following html and js sets up reporting. Hidden because it is not useful for readers -->
+
+```css hidden
+.input {
+  float: left;
+  width: 50%;
+}
+.output {
+  float: right;
+  width: 50%;
+  overflow-wrap: break-word;
+}
+button {
+  display: block;
+}
+```
+
+```html hidden
+<button>Cancel stream</button>
+<div class="input">
+  <h2>Underlying source</h2>
+  <ul></ul>
+</div>
+<div class="output">
+  <h2>Consumer</h2>
+  <ul></ul>
+</div>
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list2.appendChild(listItem);
+}
+```
+
+#### 読み取り可能なファイルバイトストリームの作成
+
+以下のコードは、読み取り可能なファイルのバイトストリームを定義する方法を示しています。
+
+前の例と同様に、 `underlyingSource` オブジェクト定義は [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream)の最初の引数として渡されます。
+これを読み取り可能な「バイト」ストリームにするために、オブジェクトのプロパティに `type: "bytes"` をオブジェクトのプロパティとして指定します。
+これにより、ストリームに {{domxref("ReadableByteStreamController")}} が渡されることを確実にします。
+
+`start()` 関数は単にファイルハンドルを開き、これは `cancel()` コールバックで閉じられます。
+`cancel()` は {{domxref("ReadableStream.cancel()")}} または {{domxref("ReadableStreamDefaultController.close()")}} が呼び出された場合にリソースをクリーンアップするために指定されています。
+
+最も興味深いコードは `pull()` コールバックです。
+これはファイルから待機中の読み込みリクエストにデータをコピーし（{{domxref("ReadableByteStreamController.byobRequest")}}）、 {{domxref("ReadableStreamBYOBRequest.respond()","respond()")}} を呼び出してバッファー内のデータ量を示し、それを転送します。
+ファイルから 0 バイトが転送された場合、すべてコピーされたことがわかり、コントローラーの {{domxref("ReadableStreamDefaultController.close()","close()")}} を呼び出します。
+
+```js
+const stream = makeReadableByteFileStream("dummy file.txt");
+
+function makeReadableByteFileStream(filename) {
+  let fileHandle;
+  let position = 0;
+  return new ReadableStream({
+    type: "bytes", // An underlying byte stream!
+    start(controller) {
+      // Called to initialise the underlying source.
+      // For a file source open a file handle (here we just create the mocked object).
+      fileHandle = new MockUnderlyingFileHandle();
+      logSource(
+        `start(): ${controller.constructor.name}.byobRequest = ${controller.byobRequest}`,
+      );
+    },
+    async pull(controller) {
+      // Called when there is a pull request for data
+      const theView = controller.byobRequest.view;
+      const { bytesRead, buffer } = await fileHandle.read(
+        theView.buffer,
+        theView.offset,
+        theView.length,
+        position,
+      );
+      if (bytesRead === 0) {
+        await fileHandle.close();
+        controller.close();
+        controller.byobRequest.respond(0);
+        logSource(
+          `pull() with byobRequest. Close controller (read bytes: ${bytesRead})`,
+        );
+      } else {
+        position += bytesRead;
+        controller.byobRequest.respond(bytesRead);
+        logSource(`pull() with byobRequest. Transfer ${bytesRead} bytes`);
+      }
+    },
+    cancel(reason) {
+      // This is called if the stream is cancelled (via reader or controller).
+      // Clean up any resources
+      fileHandle.close();
+      logSource(`cancel() with reason: ${reason}`);
+    },
+  });
+}
+```
+
+#### バイトストリームの使用
+
+以下のコードはファイルのバイトストリーム用に `ReadableStreamBYOBReader` を作成し、それを使用してデータをバッファーに読み込んでいます。
+なお、 `processText()` が再帰的に呼び出され、バッファーが一杯になるまでデータを読み込みます。
+基盤となるソースがこれ以上データがないことを指示すると、 `reader.read()` の `done` が true に設定され、読み込み処理を完了します。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+let buffer = new ArrayBuffer(4000);
+readStream(reader);
+
+function readStream(reader) {
+  let bytesReceived = 0;
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    // read() returns a promise that resolves when a value has been received
+    reader
+      .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+      .then(function processText({ done, value }) {
+        // Result objects contain two properties:
+        // done - true if the stream has already given all its data.
+        // value - some data. Always undefined when done is true.
+
+        if (done) {
+          logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+          return;
+        }
+
+        buffer = value.buffer;
+        offset += value.byteLength;
+        bytesReceived += value.byteLength;
+
+        logConsumer(`Read ${bytesReceived} bytes: ${value}`);
+        result += value;
+
+        // Read some more, and call this function again
+        return reader
+          .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+          .then(processText);
+      });
+  }
+}
+```
+
+最後に、ボタンがクリックされた場合にストリームを取り消される可能性のあるハンドラーを追加します（HTML とボタンのためのコードは示しません）。
+
+```js
+button.addEventListener("click", () => {
+  reader.cancel("user choice").then(() => {
+    logConsumer(`reader.cancel complete`);
+  });
+});
+```
+
+#### 結果
+
+基盤となるプルソース（左）とコンシューマー（右）からのログ出力を下記に示します。
+特筆すべきことは次の通りです。
+
+- `start()` 関数には `ReadableByteStreamController` が渡されます。
+- リーダに渡されるバッファーが「ファイル」全体を包含するのに十分な大きさであるため、 1 回の処理でファイル全体が移譲されます。
+
+{{EmbedLiveSample("Underlying pull source","100%","500px")}}
+
+### 既定のリーダー付きの基盤プルソース
+
+このライブ例では、既定のリーダー ({{domxref("ReadableStreamDefaultReader")}}) を使用して、同じデータをゼロコピー移譲で読み取る方法を示します。
+この例では、先の例と同じ[模擬基盤ファイルソース](#模擬基盤ファイルソース)を使用しています。
+
+```js hidden
+class MockUnderlyingFileHandle {
+  constructor() {
+    this.maxdata = 1300; // "file size"
+    this.filedata = this.randomByteArray(this.maxdata);
+    this.position = 0;
+  }
+
+  /* Read data from "file" at position/length into specified buffer offset */
+  read(buffer, offset, length, position) {
+    // Object used to resolve promise
+    const resultobj = {};
+    resultobj["buffer"] = buffer;
+    resultobj["bytesRead"] = 0;
+
+    return new Promise((resolve /*, reject*/) => {
+      if (position >= this.maxdata) {
+        // out of data
+        resolve(resultobj);
+        return;
+      }
+
+      // Read random data into supplied buffer
+      const myview = new Uint8Array(buffer, offset, length);
+      // Write the length of data specified
+      for (let i = 0; i < length; i++) {
+        myview[i] = this.filedata[position + i];
+        resultobj["bytesRead"] = i;
+        if (position + i >= this.maxdata) {
+          break;
+        }
+      }
+      // Emulate slow read of data
+      setTimeout(() => resolve(resultobj), 1000);
+    });
+  }
+
+  // Dummy close function
+  close() {
+    return;
+  }
+
+  // Return random character string
+  randomChars(length = 8) {
+    let string = "";
+    let choices =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+    for (let i = 0; i < length; i++) {
+      string += choices.charAt(Math.floor(Math.random() * choices.length));
+    }
+    return string;
+  }
+
+  // Return random Uint8Array of bytes
+  randomByteArray(bytes = 8) {
+    const textEncoder = new TextEncoder();
+    return textEncoder.encode(this.randomChars(bytes));
+  }
+}
+```
+
+<!-- The following html and js sets up reporting. Hidden because it is not useful for readers -->
+
+```css hidden
+.input {
+  float: left;
+  width: 50%;
+}
+.output {
+  float: right;
+  width: 50%;
+  overflow-wrap: break-word;
+}
+button {
+  display: block;
+}
+```
+
+```html hidden
+<button>Cancel stream</button>
+<div class="input">
+  <h2>Underlying source</h2>
+  <ul></ul>
+</div>
+<div class="output">
+  <h2>Consumer</h2>
+  <ul></ul>
+</div>
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list2.appendChild(listItem);
+}
+```
+
+#### 自動バッファー割り当てによる読み取り可能なファイルバイトストリームの作成
+
+唯一の基盤の違いは、`autoAllocateChunkSize` を指定しなければならないことと、コンシューマーから提供されるサイズではなく、`controller.byobRequest` のビューバッファサイズとして使用することです。
+
+```js
+const DEFAULT_CHUNK_SIZE = 200;
+const stream = makeReadableByteFileStream("dummy file.txt");
+
+function makeReadableByteFileStream(filename) {
+  let fileHandle;
+  let position = 0;
+  return new ReadableStream({
+    type: "bytes", // An underlying byte stream!
+    start(controller) {
+      // Called to initialise the underlying source.
+      // For a file source open a file handle (here we just create the mocked object).
+      fileHandle = new MockUnderlyingFileHandle();
+      logSource(
+        `start(): ${controller.constructor.name}.byobRequest = ${controller.byobRequest}`,
+      );
+    },
+    async pull(controller) {
+      // Called when there is a pull request for data
+      const theView = controller.byobRequest.view;
+      const { bytesRead, buffer } = await fileHandle.read(
+        theView.buffer,
+        theView.offset,
+        theView.length,
+        position,
+      );
+      if (bytesRead === 0) {
+        await fileHandle.close();
+        controller.close();
+        controller.byobRequest.respond(0);
+        logSource(
+          `pull() with byobRequest. Close controller (read bytes: ${bytesRead})`,
+        );
+      } else {
+        position += bytesRead;
+        controller.byobRequest.respond(bytesRead);
+        logSource(`pull() with byobRequest. Transfer ${bytesRead} bytes`);
+      }
+    },
+    cancel(reason) {
+      // This is called if the stream is cancelled (via reader or controller).
+      // Clean up any resources
+      fileHandle.close();
+      logSource(`cancel() with reason: ${reason}`);
+    },
+    autoAllocateChunkSize: DEFAULT_CHUNK_SIZE, // Only relevant if using a default reader
+  });
+}
+```
+
+#### 既定のリーダーでのバイトストリームの利用
+
+以下のコードでは、モードを指定せずに `stream.getReader();` を呼び出してファイルバイトストリーム用の {{domxref("ReadableStreamDefaultReader")}} を作成し、それを使用してデータをバッファに読み込んでいます。
+コードの処理は、バッファがコンシューマではなくストリームから供給されることを除いて、前回の例と同じです。
+
+```js
+const reader = stream.getReader();
+readStream(reader);
+
+function readStream(reader) {
+  let bytesReceived = 0;
+  let result = "";
+
+  // read() returns a promise that resolves
+  // when a value has been received
+  reader.read().then(function processText({ done, value }) {
+    // Result objects contain two properties:
+    // done - true if the stream has already given you all its data.
+    // value - some data. Always undefined when done is true.
+    if (done) {
+      logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+      return;
+    }
+
+    bytesReceived += value.length;
+    logConsumer(`Read ${bytesReceived} bytes so far. Current bytes = ${value}`);
+    result += value;
+
+    // Read some more, and call this function again
+    return reader.read().then(processText);
+  });
+}
+```
+
+最後に、ボタンがクリックされた場合にストリームを取り消される可能性のあるハンドラーを追加します（ボタンのための他の HTML とコードは示しません）。
+
+```js
+button.addEventListener("click", () => {
+  reader.cancel("user choice").then(() => {
+    logConsumer(`reader.cancel complete`);
+  });
+});
+```
+
+#### 結果
+
+基盤のバイトプルソース（左）とコンシューマ（右）からのログ出力を下記に示します。
+
+これで、基盤のバイトソースを指定しますと、塊は200バイト幅になることに注意してください。
+これらは、ゼロコピー移譲として行われます。
+
+{{EmbedLiveSample("Underlying pull source with default reader","100%","500px")}}
+
+### 既定のリーダーと割り当てなしのプルソース基盤
+
+完全を期すために、自動バッファー割り当てに対応していないバイトソースの既定のリーダーも使用することができます。
+
+```js hidden
+class MockUnderlyingFileHandle {
+  constructor() {
+    this.maxdata = 1300; // "file size"
+    this.filedata = this.randomByteArray(this.maxdata);
+    this.position = 0;
+  }
+
+  // Read data from "file" at position/length into specified buffer offset
+  read(buffer, offset, length, position) {
+    // Object used to resolve promise
+    const resultobj = {};
+    resultobj["buffer"] = buffer;
+    resultobj["bytesRead"] = 0;
+
+    return new Promise((resolve /*, reject*/) => {
+      if (position >= this.maxdata) {
+        //out of data
+        resolve(resultobj);
+        return;
+      }
+
+      // Read random data into supplied buffer
+      const myview = new Uint8Array(buffer, offset, length);
+      // Write the length of data specified
+      for (let i = 0; i < length; i++) {
+        myview[i] = this.filedata[position + i];
+        resultobj["bytesRead"] = i;
+        if (position + i >= this.maxdata) {
+          break;
+        }
+      }
+      // Emulate slow read of data
+      setTimeout(() => {
+        resolve(resultobj);
+      }, 1000);
+    });
+  }
+
+  // Dummy close function
+  close() {
+    return;
+  }
+
+  // Return random character string
+  randomChars(length = 8) {
+    let string = "";
+    let choices =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+    for (let i = 0; i < length; i++) {
+      string += choices.charAt(Math.floor(Math.random() * choices.length));
+    }
+    return string;
+  }
+
+  // Return random Uint8Array of bytes
+  randomByteArray(bytes = 8) {
+    const textEncoder = new TextEncoder();
+    return textEncoder.encode(this.randomChars(bytes));
+  }
+}
+```
+
+<!-- The following html and js sets up reporting. Hidden because it is not useful for readers -->
+
+```css hidden
+.input {
+  float: left;
+  width: 50%;
+}
+.output {
+  float: right;
+  width: 50%;
+  overflow-wrap: break-word;
+}
+button {
+  display: block;
+}
+```
+
+```html hidden
+<button>Cancel stream</button>
+<div class="input">
+  <h2>Underlying source</h2>
+  <ul></ul>
+</div>
+<div class="output">
+  <h2>Consumer</h2>
+  <ul></ul>
+</div>
+```
+
+```js hidden
+// Store reference to lists, paragraph and button
+const list1 = document.querySelector(".input ul");
+const list2 = document.querySelector(".output ul");
+const button = document.querySelector("button");
+
+// Create empty string in which to store final result
+let result = "";
+
+// Function to log data from underlying source
+function logSource(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list1.appendChild(listItem);
+}
+
+// Function to log data from consumer
+function logConsumer(result) {
+  const listItem = document.createElement("li");
+  listItem.textContent = result;
+  list2.appendChild(listItem);
+}
+```
+
+しかし、この場合、コントローラーは `byobRequest` を基盤に書き込むことはできません。
+その代わりに、基盤ソースはデータをエンキューしなければなりません。
+なお、このケースに対応するために、 `pull()` で `byobRequest` が存在するかどうかを調べる必要があります。
+
+```js
+const stream = makeReadableByteFileStream("dummy file.txt");
+const DEFAULT_CHUNK_SIZE = 300;
+
+function makeReadableByteFileStream(filename) {
+  let fileHandle;
+  let position = 0;
+  return new ReadableStream({
+    type: "bytes", // An underlying byte stream!
+    start(controller) {
+      // Called to initialise the underlying source.
+      // For a file source open a file handle (here we just create the mocked object).
+      fileHandle = new MockUnderlyingFileHandle();
+      logSource(
+        `start(): ${controller.constructor.name}.byobRequest = ${controller.byobRequest}`,
+      );
+    },
+    async pull(controller) {
+      // Called when there is a pull request for data
+      if (controller.byobRequest) {
+        const theView = controller.byobRequest.view;
+        const { bytesRead, buffer } = await fileHandle.read(
+          theView.buffer,
+          theView.offset,
+          theView.length,
+          position,
+        );
+        if (bytesRead === 0) {
+          await fileHandle.close();
+          controller.close();
+          controller.byobRequest.respond(0);
+          logSource(
+            `pull() with byobRequest. Close controller (read bytes: ${bytesRead})`,
+          );
+        } else {
+          position += bytesRead;
+          controller.byobRequest.respond(bytesRead);
+          logSource(`pull() with byobRequest. Transfer ${bytesRead} bytes`);
+        }
+      } else {
+        // No BYOBRequest so enqueue data to stream
+        // NOTE, this branch would only execute for a default reader if autoAllocateChunkSize is not defined.
+        const mynewBuffer = new Uint8Array(DEFAULT_CHUNK_SIZE);
+        const { bytesRead, buffer } = await fileHandle.read(
+          mynewBuffer.buffer,
+          mynewBuffer.offset,
+          mynewBuffer.length,
+          position,
+        );
+        if (bytesRead === 0) {
+          await fileHandle.close();
+          controller.close();
+          controller.enqueue(mynewBuffer);
+          logSource(
+            `pull() with no byobRequest. Close controller (read bytes: ${bytesRead})`,
+          );
+        } else {
+          position += bytesRead;
+          controller.enqueue(mynewBuffer);
+          logSource(`pull() with no byobRequest. enqueue() ${bytesRead} bytes`);
+        }
+      }
+    },
+    cancel(reason) {
+      // This is called if the stream is cancelled (via reader or controller).
+      // Clean up any resources
+      fileHandle.close();
+      logSource(`cancel() with reason: ${reason}`);
+    },
+  });
+}
+```
+
+```js hidden
+const reader = stream.getReader();
+
+readStream(reader);
+
+function readStream(reader) {
+  let bytesReceived = 0;
+  let result = "";
+
+  // read() returns a promise that resolves
+  // when a value has been received
+  reader.read().then(function processText({ done, value }) {
+    // Result objects contain two properties:
+    // done - true if the stream has already given you all its data.
+    // value - some data. Always undefined when done is true.
+    if (done) {
+      logConsumer(`readStream() complete. Total bytes: ${bytesReceived}`);
+      return;
+    }
+
+    bytesReceived += value.length;
+    logConsumer(`Read ${bytesReceived} bytes so far. Current bytes = ${value}`);
+    result += value;
+
+    // Read some more, and call this function again
+    return reader.read().then(processText);
+  });
+}
+```
+
+```js hidden
+button.addEventListener("click", () => {
+  reader.cancel("user choice").then(() => {
+    logConsumer(`reader.cancel complete`);
+  });
+});
+```
+
+#### 結果
+
+基礎となるプルソース（左）とコンシューマ（右）からのログ出力を下記に示します。
+基盤となるソースの側は、データがゼロバイト移譲ではなく、エンキューされたことを示していることに注意してください。
+
+{{EmbedLiveSample("Underlying pull source with default reader and no allocation","100%","500px")}}
+
+## 関連情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API/Concepts)
+- [ストリームの概念と使用方法の概要](/ja/docs/Web/API/Streams_API#概念と使用方法)
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)

From 94002e42ea35cda9bc7b5805356df91547f6d57d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 22:34:06 +0900
Subject: [PATCH 093/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/streams_api/using_writable_streams/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/streams_api/using_writable_streams/index.md b/files/ja/web/api/streams_api/using_writable_streams/index.md
index b7fdc79f0954ca..3690b025e01ea0 100644
--- a/files/ja/web/api/streams_api/using_writable_streams/index.md
+++ b/files/ja/web/api/streams_api/using_writable_streams/index.md
@@ -2,10 +2,10 @@
 title: 書き込み可能なストリームの使用
 slug: Web/API/Streams_API/Using_writable_streams
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{apiref("Streams")}}
+{{DefaultAPISidebar("Streams")}}
 
 JavaScript 開発者として、プログラムでストリームにデータを書き込むことはとても便利です。この記事では、[ストリーム API](/ja/docs/Web/API/Streams_API) の書き込み可能なストリームの機能について説明します。
 

From 5e5006e3e4c82fe642bab26c07a1a9e3c4b7e404 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Fri, 22 Sep 2023 10:43:47 +0800
Subject: [PATCH 094/268] [zh-cn]: Update translation of Number.NaN (#15960)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../global_objects/number/nan/index.md        | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/nan/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/nan/index.md
index 743037449eb2f1..0acc5de67660be 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/nan/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/nan/index.md
@@ -3,15 +3,34 @@ title: Number.NaN
 slug: Web/JavaScript/Reference/Global_Objects/Number/NaN
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+**`Number.NaN`** 静态数据属性表示非数字值，等同于 {{jsxref("NaN")}}。有关 `NaN` 的行为的更多信息，请参阅[全局属性的描述](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN)。
 
-**`Number.NaN`** 表示“非数字”（Not-A-Number）。和 {{jsxref("Global_Objects/NaN", "NaN")}} 相同。
+{{EmbedInteractiveExample("pages/js/number-nan.html", "taller")}}
 
-不必创建一个 {{jsxref("Global_Objects/Number", "Number")}} 实例来访问该属性，使用 `Number.NaN` 来访问该静态属性。
+## 值
 
-{{js_property_attributes(0,0,0)}}
+数字值 {{jsxref("NaN")}}。
+
+{{js_property_attributes(0, 0, 0)}}
+
+## 描述
+
+由于 `NaN` 是 {{jsxref("Number")}} 的静态属性，你应该始终将其用作 `Number.NaN`，而不是作为一个数字值的属性。
+
+## 示例
+
+### 检查值是否为数字
+
+```js
+function sanitize(x) {
+  if (isNaN(x)) {
+    return Number.NaN;
+  }
+  return x;
+}
+```
 
 ## 规范
 
@@ -21,7 +40,7 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/NaN
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
-- 全局对象 {{jsxref("Global_Objects/NaN", "NaN")}}
-- {{jsxref("Global_Objects/Number", "Number")}}
+- {{jsxref("NaN")}}
+- {{jsxref("Number.isNaN()")}}

From 72c5ec933dbf992fdea78032291e6b3b9a5d3a18 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Fri, 22 Sep 2023 10:53:31 +0800
Subject: [PATCH 095/268] zh-cn: update glossary/BigInt (#15996)

---
 files/zh-cn/glossary/bigint/index.md | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/files/zh-cn/glossary/bigint/index.md b/files/zh-cn/glossary/bigint/index.md
index 4116c59aaf4c16..edcc0a155bdb6b 100644
--- a/files/zh-cn/glossary/bigint/index.md
+++ b/files/zh-cn/glossary/bigint/index.md
@@ -5,15 +5,10 @@ slug: Glossary/BigInt
 
 {{GlossarySidebar}}
 
-在{{Glossary("JavaScript")}}中，**BigInt** 是一种数字类型的数据，它可以表示任意精度格式的整数。而在其他编程语言中，可以存在不同的数字类型，例如：整数、浮点数、双精度数或大斐波数。
+在 {{Glossary("JavaScript")}} 中，**BigInt** 是一种数字数据类型，它可以表示[任意精度格式](https://zh.wikipedia.org/wiki/高精度计算)的整数。而在其他编程语言中，可以存在不同的数字类型，例如：整数、浮点数、双精度浮点数或大整数（Bignum）。
 
-## 了解更多
+## 参见
 
-### 知识点
-
-- 维基百科：[Numeric types](https://zh.wikipedia.org/wiki/Data_type#Numeric_types)
-
-### 参阅
-
-- JavaScript 数据结构：[BigInt](/zh-CN/docs/Web/JavaScript/Data_structures#bigint_类型)
+- 维基百科上的[数字类型](https://zh.wikipedia.org/wiki/資料類型#数值范围)
+- JavaScript 类型：[`BigInt`](/zh-CN/docs/Web/JavaScript/Data_structures#bigint_类型)
 - JavaScript 全局对象 {{jsxref("BigInt")}}

From 7a4e0fc58a01592907f06bd170b8b9c7bf5fa932 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Fri, 22 Sep 2023 11:01:06 +0800
Subject: [PATCH 096/268] zh-cn: update the translation of styleSheetSets
 documents (#15998)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../document/selectedstylesheetset/index.md   | 40 ++++++++----------
 .../web/api/document/stylesheetsets/index.md  | 41 ++++++++-----------
 2 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/files/zh-cn/web/api/document/selectedstylesheetset/index.md b/files/zh-cn/web/api/document/selectedstylesheetset/index.md
index a4341a59a444c7..89fa91685497ed 100644
--- a/files/zh-cn/web/api/document/selectedstylesheetset/index.md
+++ b/files/zh-cn/web/api/document/selectedstylesheetset/index.md
@@ -1,43 +1,35 @@
 ---
-title: Document.selectedStyleSheetSet
+title: Document：selectedStyleSheetSet 属性
 slug: Web/API/Document/selectedStyleSheetSet
 ---
 
-{{ APIRef("DOM") }}
+{{APIRef("DOM")}}{{deprecated_header}}{{Non-standard_header}}
 
-表示当前使用的样式表集合的名称
+**`selectedStyleSheetSet`** 属性表示当前使用的样式表集合的名称。
 
-## 语法
+## 值
 
-```
-currentStyleSheetSet = document.selectedStyleSheetSet
-
-document.selectedStyleSheet = newStyleSheetSet
-```
+当前使用的样式表集合的名称。你也可以使用这个属性设置当前样式表集合。
 
-返回时，currentStyleSheetSet 表示当前使用的样式表集合的名称。你也可以使用这个属性设置当前样式表集。
+设置这个属性的值等价于用 `currentStyleSheetSet` 的值调用 {{domxref("document.enableStyleSheetsForSet()")}}，然后将 `lastStyleSheetSet` 的值设置为该值。
 
-设置这个属性的值相当于用`currentStyleSheetSet 的值`调用 {{ domxref("document.enableStyleSheetsForSet()") }}，然后将`lastStyleSheetSet` 的值设置为该值。
-
-> **备注：** 这个属性的值是实时的，直接更改样式表中的`disabled`属性将会影响这个属性的值。
+> **备注：** 这个属性的值是实时的，直接更改样式表中的 `disabled` 属性将会影响这个属性的值。
 
 ## 示例
 
 ```js
-console.log("Current style sheet set: " + document.selectedStyleSheetSet);
+console.log(`当前样式表集合：${document.selectedStyleSheetSet}`);
 
-document.selectedStyleSheetSet = "Some other style sheet";
+document.selectedStyleSheetSet = "其他的某些样式表";
 ```
 
-> **备注：** 这个例子会帮助你理解设置 `selectedStyleSheetSet` 的值和调用{{ domxref("document.enableStyleSheetsForSet()") }}之间行为的差异。
-
-## 参看
+## 浏览器兼容性
 
-- {{ domxref("document.lastStyleSheetSet") }}
-- {{ domxref("document.preferredStyleSheetSet") }}
-- {{ domxref("document.styleSheetSets") }}
-- {{ domxref("document.enableStyleSheetsForSet()") }}
+{{Compat}}
 
-## 规范
+## 参见
 
-- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets)
+- {{domxref("document.lastStyleSheetSet")}}
+- {{domxref("document.preferredStyleSheetSet")}}
+- {{domxref("document.styleSheetSets")}}
+- {{domxref("document.enableStyleSheetsForSet()")}}
diff --git a/files/zh-cn/web/api/document/stylesheetsets/index.md b/files/zh-cn/web/api/document/stylesheetsets/index.md
index f3a5a24a39e034..5760c37143409e 100644
--- a/files/zh-cn/web/api/document/stylesheetsets/index.md
+++ b/files/zh-cn/web/api/document/stylesheetsets/index.md
@@ -1,47 +1,42 @@
 ---
-title: Document.styleSheetSets
+title: Document：styleSheetSets 属性
 slug: Web/API/Document/styleSheetSets
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}{{deprecated_header}}{{Non-standard_header}}
 
-返回一个所有当前可用样式表集的实时列表。
+**`styleSheetSets`** 只读属性返回一个所有当前可用样式表集合的实时列表。
 
-## Syntax
+## 值
 
-```plain
-sets = document.styleSheetSets
-```
-
-在返回时，sets 是一个可用的样式表集的列表。
+一个可用的样式表集合的列表。
 
-## Example
+## 示例
 
-Given an {{HTMLElement("ul")}} (list) element with the ID "sheetList", you can populate it with the names of all the available style sheet sets with code like this:
+给定一个 ID 为“sheetList”的 {{HTMLElement("ul")}}（列表）元素，你可以使用下面的代码将所有可用样式表集合的名称填充到列表中：
 
 ```js
-var list = document.getElementById("sheetList");
-var sheets = document.styleSheetSets;
-
-list.innerHTML = "";
+const list = document.getElementById("sheetList");
+const sheets = document.styleSheetSets;
 
-for (var i = 0; i < sheets.length; i++) {
-  var item = document.createElement("li");
+list.textContent = "";
 
-  item.innerHTML = sheets[i];
+for (const sheet of sheets) {
+  const item = document.createElement("li");
+  item.textContent = sheet;
   list.appendChild(item);
 }
 ```
 
-## Notes
+## 备注
 
-The list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed in the {{domxref("document.styleSheets")}} attribute, adding the `title` of each style sheet that has a title to the list. Duplicates are dropped from the list (using a case-sensitive comparison).
+可用样式表集合的列表是通过以下方式构建的：按照文档中所有可用的样式表在 {{domxref("Document.styleSheets")}} 属性中列出的顺序枚举，并将每个具有标题的样式表的 `title` 添加到列表中。列表中的重复项将被删除（使用区分大小写的比较）。
 
-## Specifications
+## 浏览器兼容性
 
-- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets)
+{{Compat}}
 
-## See also
+## 参见
 
 - {{domxref("Stylesheet")}}
 - {{domxref("document.styleSheets")}}

From 80003a6d053acda2c8206663e65f8c1ed2b36a00 Mon Sep 17 00:00:00 2001
From: pirateTurtle <75886763+wogha95@users.noreply.github.com>
Date: Fri, 22 Sep 2023 21:09:51 +0900
Subject: [PATCH 097/268] [ko] translate `cross-origin-embedder-policy`
 (#15749)

---
 .../cross-origin-embedder-policy/index.md     | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 files/ko/web/http/headers/cross-origin-embedder-policy/index.md

diff --git a/files/ko/web/http/headers/cross-origin-embedder-policy/index.md b/files/ko/web/http/headers/cross-origin-embedder-policy/index.md
new file mode 100644
index 00000000000000..0f0489bc5fd79e
--- /dev/null
+++ b/files/ko/web/http/headers/cross-origin-embedder-policy/index.md
@@ -0,0 +1,87 @@
+---
+title: Cross-Origin-Embedder-Policy
+slug: Web/HTTP/Headers/Cross-Origin-Embedder-Policy
+l10n:
+  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+HTTP **`Cross-Origin-Embedder-Policy`** (COEP) 응답 헤더는 문서에 교차 출처 리소스를 포함하도록 구성합니다.
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">헤더 유형</th>
+      <td>{{Glossary("Response header")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden header name")}}</th>
+      <td>no</td>
+    </tr>
+  </tbody>
+</table>
+
+## 구문
+
+```http
+Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless
+```
+
+### 지시어
+
+- `unsafe-none`
+  - : 기본값입니다. 문서가 CORS 프로토콜 또는 {{HTTPHeader("Cross-Origin-Resource-Policy")}} 헤더를 통해 명시적인 권한을 부여하지 않고도 교차 출처 리소스를 가져올 수 있도록 허용합니다.
+- `require-corp`
+  - : 문서는 동일한 출처의 리소스 또는 다른 출처에서 불러오기 가능한 것으로 명시적으로 표시된 리소스만 불러올 수 있습니다. 교차 출처 리소스가 CORS를 지원하는 경우, COEP에 의해 차단되지 않고 불러오려면 [`crossorigin`](/ko/docs/Web/HTML/Attributes/crossorigin) 속성 또는 {{HTTPHeader("Cross-Origin-Resource-Policy")}} 헤더를 사용해야 합니다.
+- `credentialless` {{Experimental_Inline}}
+  - : [no-cors](/ko/docs/Web/API/Request/mode) 교차 출처 요청은 자격 증명 없이 전송됩니다. 특히 요청에서 쿠키가 생략되고 응답에서 쿠키가 무시됩니다. 응답은 {{HTTPHeader("Cross-Origin-Resource-Policy")}} 헤더를 통해 명시적인 권한 **없이** 허용됩니다. [Navigate](/ko/docs/Web/API/Request/mode) 응답은 `require-corp` 모드와 유사하게 작동합니다. {{HTTPHeader("Cross-Origin-Resource-Policy")}} 응답 헤더가 필요합니다.
+
+## 예제
+
+### 특정 기능은 교차 출처 격리에 따라 달라집니다
+
+문서에 `require-corp` 또는 `credentialless` 값이 설정된 COEP 헤더가 있는 경우, 스로틀링되지 않은 타이머를 사용하여 {{jsxref("SharedArrayBuffer")}} 객체나 {{domxref("Performance.now()")}} 같은 특정 기능에만 접근할 수 있습니다.
+
+```http
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+```
+
+설정해야 하는 {{HTTPHeader("Cross-Origin-Opener-Policy")}} 헤더도 참조하세요.
+
+[`crossOriginIsolated`](/ko/docs/Web/API/crossOriginIsolated)가 성공했는지 확인하려면 창 및 작업자 컨텍스트에서 사용할 수 있는 crossOriginIsolated 속성에 대해 테스트하면 됩니다.
+
+```js
+const myWorker = new Worker("worker.js");
+
+if (crossOriginIsolated) {
+  const buffer = new SharedArrayBuffer(16);
+  myWorker.postMessage(buffer);
+} else {
+  const buffer = new ArrayBuffer(16);
+  myWorker.postMessage(buffer);
+}
+```
+
+### CORS를 통한 COEP 차단 방지
+
+`require-corp`를 사용하여 COEP를 활성화하고 불러와야 하는 교차 출처 리소스가 있는 경우, 해당 리소스는 [CORS](/ko/docs/Web/HTTP/CORS)를 지원해야 하며 다른 출처에서 불러올 수 있는 것으로 명시적으로 표시해야 COEP의 차단을 방지할 수 있습니다. 예를 들어 타사 사이트의 이 이미지에 [`crossorigin`](/ko/docs/Web/HTML/Attributes/crossorigin) 속성을 사용할 수 있습니다.
+
+```html
+<img src="https://thirdparty.com/img.png" crossorigin />
+```
+
+일부 이미지에 대해 CORS가 지원되지 않는 경우, 쿠키 없이 요청하는 대신 교차 출처 서버에서 명시적인 동의 없이 이미지를 불러오는 대안으로 `credentialless` COEP 값을 사용할 수 있습니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{httpheader("Cross-Origin-Opener-Policy")}}

From 7f07326181c9012fd956a05cc8a4735c45837b1b Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Fri, 22 Sep 2023 22:55:41 +0800
Subject: [PATCH 098/268] [zh-cn]: update the translation of Number.isNaN()
 (#16015)

---
 .../global_objects/number/isnan/index.md      | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/isnan/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/isnan/index.md
index 1ca94453e68c2c..fc7c489d8b7ca8 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/isnan/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/isnan/index.md
@@ -5,62 +5,74 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN
 
 {{JSRef}}
 
-**`Number.isNaN()`** 方法确定传递的值是否为 {{jsxref("NaN")}}，并且检查其类型是否为 {{jsxref("Number")}}。它是原来的全局 {{jsxref("isNaN", "isNaN()")}} 的更稳妥的版本。
+**`Number.isNaN()`** 静态方法判断传入的值是否为 {{jsxref("NaN")}}，如果输入不是数字类型，则返回 `false`。它是全局 {{jsxref("isNaN()")}} 函数更健壮的版本。
 
 {{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}
 
 ## 语法
 
-```plain
+```js-nolint
 Number.isNaN(value)
 ```
 
 ### 参数
 
 - `value`
-  - : 要检测是否为 {{jsxref("Global_Objects/NaN", "NaN")}} 的值。
+  - : 要测试是否为 {{jsxref("NaN")}} 的值。
 
 ### 返回值
 
-一个{{jsxref("Boolean", "布尔值")}}，表示给定的值是否是 {{jsxref("NaN")}}。
+如果给定值是一个值为 {{jsxref("NaN")}} 的数字，则返回布尔值 `true`，否则返回 `false`。
 
 ## 描述
 
-在 JavaScript 中，`NaN` 最特殊的地方就是，我们不能使用相等运算符（{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 和 {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}）来判断一个值是否是 `NaN`，因为 `NaN == NaN` 和 `NaN === NaN` 都会返回 `false`。因此，必须要有一个判断值是否是 `NaN` 的方法。
+函数 `Number.isNaN()` 提供了一种方便的方法来检查值是否与 `NaN` 相等。请注意，你不能使用 [`==`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Equality) 或 [`===`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality) 运算符来测试值与 `NaN` 的相等性，因为与 JavaScript 中的其他值的比较不同，这些运算符在一个操作数为 {{jsxref("NaN")}} 时始终返回 `false`，即使另一个操作数也是 {{jsxref("NaN")}}。
 
-和全局函数 {{jsxref("Global_Objects/isNaN", "isNaN()")}} 相比，`Number.isNaN()` 不会自行将参数转换成数字，只有在参数是值为 `NaN` 的数字时，才会返回 `true`。
+由于在所有可能的 JavaScript 值中，`x !== x` 只有对于 `NaN` 才为真，因此 `Number.isNaN(x)` 也可以替换为 `x !== x`，尽管后者可读性较差。
+
+与全局的 {{jsxref("isNaN", "isNaN()")}} 函数相反，`Number.isNaN()` 方法不会将参数强制转换为数字。这样可以安全地传入通常会转换为 {{jsxref("NaN")}} 但实际上与 {{jsxref("NaN")}} 不同的值。这也意味着只有等于 {{jsxref("NaN")}} 的 Number 类型的值才会返回 `true`。
 
 ## 示例
 
+### 使用 isNaN()
+
 ```js
 Number.isNaN(NaN); // true
 Number.isNaN(Number.NaN); // true
 Number.isNaN(0 / 0); // true
+Number.isNaN(37); // false
+```
 
-// 下面这几个如果使用全局的 isNaN() 时，会返回 true。
-Number.isNaN("NaN"); // false，字符串 "NaN" 不会被隐式转换成数字 NaN。
-Number.isNaN(undefined); // false
-Number.isNaN({}); // false
-Number.isNaN("blabla"); // false
+### Number.isNaN() 和全局 isNaN() 之间的区别
 
-// 下面的都返回 false
+`Number.isNaN()` 不会尝试将参数转换为数字，因此非数字总是返回 `false`。以下都返回 `false`：
+
+```js
+Number.isNaN("NaN");
+Number.isNaN(undefined);
+Number.isNaN({});
+Number.isNaN("blabla");
 Number.isNaN(true);
 Number.isNaN(null);
-Number.isNaN(37);
 Number.isNaN("37");
 Number.isNaN("37.37");
 Number.isNaN("");
 Number.isNaN(" ");
 ```
 
-## Polyfill
+全局 {{jsxref("isNaN", "isNaN()")}} 函数会将参数强制转换为数字：
 
 ```js
-Number.isNaN =
-  Number.isNaN ||
-  function (value) {
-    return typeof value === "number" && isNaN(value);
-  };
+isNaN("NaN"); // true
+isNaN(undefined); // true
+isNaN({}); // true
+isNaN("blabla"); // true
+isNaN(true); // false，强制转换为 1
+isNaN(null); // false，强制转换为 0
+isNaN("37"); // false，强制转换为 37
+isNaN("37.37"); // false，强制转换为 37.37
+isNaN(""); // false，强制转换为 0
+isNaN(" "); // false，强制转换为 0
 ```
 
 ## 规范
@@ -71,7 +83,8 @@ Number.isNaN =
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
+- [`core-js` 中 `Number.isNaN` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
 - {{jsxref("Number")}}
 - {{jsxref("isNaN", "isNaN()")}}

From 9616d5a7fc0686d3b382cadf969754081eaae967 Mon Sep 17 00:00:00 2001
From: Christian Rivera <62572597+zcylla@users.noreply.github.com>
Date: Fri, 22 Sep 2023 08:41:26 -0700
Subject: [PATCH 099/268] es: Fix typos in web/http/overview/index.md (#16011)

---
 files/es/web/http/overview/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/es/web/http/overview/index.md b/files/es/web/http/overview/index.md
index b141b6ac063595..f43a18caa7ecd1 100644
--- a/files/es/web/http/overview/index.md
+++ b/files/es/web/http/overview/index.md
@@ -146,7 +146,7 @@ Un ejemplo de repuesta:
 
 ![](http_response.png)
 
-Las respuestas están formadas por los siguentes campos:
+Las respuestas están formadas por los siguientes campos:
 
 - La versión del protocolo HTTP que están usando.
 - Un código de estado, indicando si la petición ha sido exitosa, o no, y debido a que.
@@ -156,6 +156,6 @@ Las respuestas están formadas por los siguentes campos:
 
 ## Conclusión
 
-El protocólo HTTP es un protocolo ampliable y fácil de usar. Su estructura cliente-servidor, junto con la capacidad para usar cabeceras, permite a este protocolo evolucionar con las nuevas y futuras aplicaciones en Internet.
+El protocolo HTTP es un protocolo ampliable y fácil de usar. Su estructura cliente-servidor, junto con la capacidad para usar cabeceras, permite a este protocolo evolucionar con las nuevas y futuras aplicaciones en Internet.
 
 Aunque la versión del protocolo HTTP/2 añade algo de complejidad, al utilizar un formato en binario, esto aumenta su rendimiento, y la estructura y semantica de los mensajes es la misma desde la versión HTTP/1.0. El flujo de comunicaciones en una sesión es sencillo y puede ser fácilmente estudiado e investigado con un simple [monitor de mensajes HTTP](/es/docs/Tools/Network_Monitor).

From 24aaa1ae498bdf2def852692e765794cfe850ddd Mon Sep 17 00:00:00 2001
From: Alexander <alexander_belial999@hotmail.com>
Date: Fri, 22 Sep 2023 10:24:28 -0600
Subject: [PATCH 100/268] es: Create
 page_types/css_module_landing_page_template (#15957)

* es: Update page_types/css_module_landing_page_template

* Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: GrayWolf <a13x.graywolf@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../css_module_landing_page_template/index.md | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 files/es/mdn/writing_guidelines/page_structures/page_types/css_module_landing_page_template/index.md

diff --git a/files/es/mdn/writing_guidelines/page_structures/page_types/css_module_landing_page_template/index.md b/files/es/mdn/writing_guidelines/page_structures/page_types/css_module_landing_page_template/index.md
new file mode 100644
index 00000000000000..2823b36c11d6c4
--- /dev/null
+++ b/files/es/mdn/writing_guidelines/page_structures/page_types/css_module_landing_page_template/index.md
@@ -0,0 +1,122 @@
+---
+title: Plantilla de página de destino del módulo CSS
+slug: MDN/Writing_guidelines/Page_structures/Page_types/CSS_module_landing_page_template
+l10n:
+  sourceCommit: bfdfe970004b21218ef4ab6a4274d4fb29c4742b
+---
+
+{{MDNSidebar}}
+
+> **Nota:** _Recuerde eliminar este bloque de notas antes de publicar._
+>
+> ---
+>
+> **Metadatos de la página:**
+>
+> La parte superior de la página se utiliza para definir "metadatos de página".
+> Los valores deben actualizarse adecuadamente para el módulo en particular.
+>
+> ```md
+> ---
+> title: NombreDelModulo CSS
+> slug: Web/CSS/CSS_NameOfTheModule
+> page-type: css-module
+> spec-urls:
+>   - url1
+>   - url2
+> ---
+> ```
+>
+> - **title**
+>   - : El valor `title` se muestra en la parte superior de la página.
+>     Este es el nombre del módulo seguido del texto "CSS".
+>     Por ejemplo, el título de la página de inicio del módulo [grid layout](/es/docs/Web/CSS/CSS_grid_layout) es _Diseño de cuadrícula de CSS_.
+> - **slug**
+>   - : El valor `slug` es el final de la ruta de la URL después de `https://developer.mozilla.org/es/docs/`.
+>     Esto se formateará como `Web/CSS/CSS_NameOfTheModule`.
+>     Por ejemplo, el `slug` para la página de inicio del módulo [grid layout](/es/docs/Web/CSS/CSS_grid_layout) es `Web/CSS/CSS_grid_layout`.
+> - **page-type**
+>   - : El valor `page-type` para las páginas de destino del módulo CSS es `css-module` (solo para contenido en ingles).
+> - **spec-urls**
+>
+>   - : El valor `spec-urls` es una URL de la especificación. En caso de que haya más de una versión de la especificación que sea relevante, preséntelas en una lista con viñetas. Por ejemplo, el valor de la clave `spec-urls` para la página de inicio del módulo [filter effects](/es/docs/Web/CSS/CSS_filter_effects) es (solo para contenido en ingles):
+>
+>     ```plain
+>     - `https://drafts.fxtf.org/filter-effects-2/`
+>     - `https://drafts.fxtf.org/filter-effects-1/`
+>     ```
+>
+> ---
+>
+> **Macros al principio de la pagina**
+>
+> La macro llamada `\{{CSSRef}}` aparece en la parte superior de la sección de contenido (inmediatamente debajo de los metadatos).
+> Esta macro debe estar presente en cada página de destino del módulo CSS. Genera una barra lateral CSS adecuada, dependiendo de las etiquetas incluidas en la página.
+> Elimine la macro `\{{MDNSidebar}}` cuando utilice esta plantilla.
+>
+> ---
+>
+> _Recuerde eliminar este bloque de notas antes de publicar._
+
+Comience el contenido de la página con un párrafo introductorio, que nombra el módulo y dice lo que hace.
+Idealmente, esto debería ser una o dos oraciones cortas.
+
+## NombreDelModulo en acción
+
+En esta sección, incluya un ejemplo interactivo del módulo que ayude a demostrar la utilidad o el poder de varias propiedades proporcionadas por este módulo. El propósito de esta sección es demostrar algunos casos de uso y crear interés y curiosidad en la mente de los lectores que aprenden sobre este módulo.
+
+Proporcione una breve descripción de cómo los lectores pueden interactuar con el ejemplo. No entres en muchos detalles para explicar el ejemplo y no incluyas fragmentos de código. Añade un enlace al código fuente del ejemplo en el repositorio [`css-examples`](https://github.com/mdn/css-examples/tree/main/modules). Por ejemplo, para el ejemplo interactivo del módulo de efectos de filtro, diría:
+"Para ver el código de este ejemplo, [ver el código fuente en GitHub](https://github.com/mdn/css-examples/blob/main/modules/filters.html)."
+
+## Referencia
+
+Cree las subsecciones relevantes para enumerar las propiedades, funciones, tipos de datos, etc. relacionados.
+
+### Propiedades
+
+Lista de todas las propiedades abreviadas y completas proporcionadas por el módulo.
+
+### Reglas arroba
+
+Lista de reglas de arroba CSS proporcionada por el módulo. Omita esta sección si no hay reglas de arroba CSS relevantes para este módulo.
+
+### Funciones
+
+Lista de funciones CSS proporcionadas por el módulo. Omita esta sección si no hay funciones CSS relevantes para este módulo.
+
+### Tipos de datos
+
+Lista de tipos de datos CSS proporcionados por el módulo. Omita esta sección si no hay tipos de datos CSS relevantes para este módulo.
+
+### Eventos
+
+Lista de eventos de API proporcionados por el módulo. Omita esta sección si no hay eventos relevantes para este módulo.
+
+### Interfaces
+
+Enumere la API relacionada y las interfaces proporcionadas por el módulo. Omita esta sección si no hay interfaces API relevantes para este módulo.
+
+## Guías
+
+- EnlaceAGuia1
+  - : Descripción de la guía en una o dos frases.
+- EnlaceAGuia2
+  - : Descripción de la guía en una o dos frases.
+
+## Conceptos relacionados
+
+Enumere todas las demás propiedades, tipos de datos o términos del glosario que puedan ser relevantes o estar relacionados con este módulo.
+
+Especificaciones
+
+`\{{Specifications}}`
+
+_Para usar esta macro, elimine las comillas inveritdas y la barra invertida en el archivo de markdown._
+
+Vease también
+
+Incluya enlaces a páginas de referencia y guías relacionadas con la propiedad actual. Consulta la sección [Vease también](/es/docs/MDN/Writing_guidelines/Writing_style_guide#see_also_section) en nuestra _Guía de estilo de escritura_ para obtener más consejos e instrucciones.
+
+- enlace1
+- enlace2
+- enlace_externo (año)

From 56d8ade99d9ae72a744ae958bb3ae1cd2d0cf237 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= <mikecat@users.noreply.github.com>
Date: Sat, 23 Sep 2023 03:07:03 +0900
Subject: [PATCH 101/268] Translate (Extendable)CookieChangeEvent (#15926)

* Translate (Extendable)CookieChangeEvent

* Fix wording
---
 .../api/cookiechangeevent/changed/index.md    | 63 ++++++++++++++++++
 .../cookiechangeevent/index.md                | 42 ++++++++++++
 .../api/cookiechangeevent/deleted/index.md    | 55 ++++++++++++++++
 files/ja/web/api/cookiechangeevent/index.md   | 60 +++++++++++++++++
 .../changed/index.md                          | 63 ++++++++++++++++++
 .../deleted/index.md                          | 55 ++++++++++++++++
 .../extendablecookiechangeevent/index.md      | 42 ++++++++++++
 .../api/extendablecookiechangeevent/index.md  | 65 +++++++++++++++++++
 8 files changed, 445 insertions(+)
 create mode 100644 files/ja/web/api/cookiechangeevent/changed/index.md
 create mode 100644 files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md
 create mode 100644 files/ja/web/api/cookiechangeevent/deleted/index.md
 create mode 100644 files/ja/web/api/cookiechangeevent/index.md
 create mode 100644 files/ja/web/api/extendablecookiechangeevent/changed/index.md
 create mode 100644 files/ja/web/api/extendablecookiechangeevent/deleted/index.md
 create mode 100644 files/ja/web/api/extendablecookiechangeevent/extendablecookiechangeevent/index.md
 create mode 100644 files/ja/web/api/extendablecookiechangeevent/index.md

diff --git a/files/ja/web/api/cookiechangeevent/changed/index.md b/files/ja/web/api/cookiechangeevent/changed/index.md
new file mode 100644
index 00000000000000..ecf9f21a2f1afc
--- /dev/null
+++ b/files/ja/web/api/cookiechangeevent/changed/index.md
@@ -0,0 +1,63 @@
+---
+title: "CookieChangeEvent: changed プロパティ"
+slug: Web/API/CookieChangeEvent/changed
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+
+{{domxref("CookieChangeEvent")}} インターフェイスの読み取り専用プロパティ **`changed`** は、変更された Cookie の配列を返します。
+
+## 値
+
+オブジェクトの配列で、変更された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。
+
+- `name`
+  - : Cookie の名前を表す文字列です。
+- `value`
+  - : Cookie の値を表す文字列です。
+- `domain`
+  - : Cookie のドメインを表す文字列です。
+- `path`
+  - : Cookie のパスを表す文字列です。
+- `expires`
+  - : ミリ秒単位の [UNIX 時間](/ja/docs/Glossary/Unix_time)で与えられるタイムスタンプで、Cookie の有効期限を表します。
+- `secure`
+  - : Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す {{jsxref("boolean")}} です。
+- `sameSite`
+
+  - : 以下の [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) の値のいずれかです。
+
+    - `"strict"`
+      - : Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。
+    - `"lax"`
+      - : Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。
+    - `"none"`
+      - : Cookie はすべてのコンテキストで送信されます。
+
+## 例
+
+この例では、Cookie が設定されると、イベントリスナーがコンソールに `changed` プロパティを記録します。この配列の最初の要素には、今設定されたばかりの Cookie を表すオブジェクトが格納されています。
+
+```js
+cookieStore.addEventListener("change", (event) => {
+  console.log(event.changed[0]);
+});
+
+const one_day = 24 * 60 * 60 * 1000;
+cookieStore.set({
+  name: "cookie1",
+  value: "cookie1-value",
+  expires: Date.now() + one_day,
+  domain: "example.com",
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md b/files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md
new file mode 100644
index 00000000000000..93f5cbd60098cb
--- /dev/null
+++ b/files/ja/web/api/cookiechangeevent/cookiechangeevent/index.md
@@ -0,0 +1,42 @@
+---
+title: "CookieChangeEvent: CookieChangeEvent() コンストラクター"
+slug: Web/API/CookieChangeEvent/CookieChangeEvent
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+
+**`CookieChangeEvent()`** コンストラクターは、{{domxref("CookieStore/change_event", "CookieStore.onchange()")}} に渡されるイベント型である新しい {{domxref("CookieChangeEvent")}} オブジェクトを生成します。このコンストラクターは、変更イベントが発生するとブラウザーにより呼ばれます。
+
+> **メモ:** このコンストラクターは、通常は製品のウェブサイトでは必要ありません。主な使用法は、このイベントのインスタンスが必要なテストです。
+
+## 構文
+
+```js-nolint
+new CookieChangeEvent(type)
+new CookieChangeEvent(type, options)
+```
+
+### 引数
+
+- `type`
+  - : イベントの名前を表す文字列です。大文字と小文字は区別され、ブラウザーは常に `cookiechange` に設定します。
+- `options` {{Optional_Inline}}
+  - : _{{domxref("Event/Event", "Event()")}} で定義されたプロパティに加え_、以下のプロパティを持ちうるオブジェクトです。
+    - `changed`
+      - : 変更された Cookie が格納された配列です。
+    - `deleted`
+      - : 削除された Cookie が格納された配列です。
+
+### 返値
+
+新しい {{domxref("CookieChangeEvent")}} オブジェクトです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiechangeevent/deleted/index.md b/files/ja/web/api/cookiechangeevent/deleted/index.md
new file mode 100644
index 00000000000000..a137b3c4bd356e
--- /dev/null
+++ b/files/ja/web/api/cookiechangeevent/deleted/index.md
@@ -0,0 +1,55 @@
+---
+title: "CookieChangeEvent: deleted プロパティ"
+slug: Web/API/CookieChangeEvent/deleted
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+
+{{domxref("CookieChangeEvent")}} インターフェイスの読み取り専用プロパティ **`deleted`** は、与えられた `CookieChangeEvent` のインスタンスで削除された Cookie の配列を返します。
+
+## 値
+
+オブジェクトの配列で、削除された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。
+
+- `name`
+  - : Cookie の名前を表す文字列です。
+- `value`
+  - : Cookie の値を表す文字列です。
+- `domain`
+  - : Cookie のドメインを表す文字列です。
+- `path`
+  - : Cookie のパスを表す文字列です。
+- `expires`
+  - : ミリ秒単位の [UNIX 時間](/ja/docs/Glossary/Unix_time)で与えられるタイムスタンプで、Cookie の有効期限を表します。
+- `secure`
+  - : Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す {{jsxref("boolean")}} です。
+- `sameSite`
+
+  - : 以下の [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) の値のいずれかです。
+
+    - `"strict"`
+      - : Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。
+    - `"lax"`
+      - : Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。
+    - `"none"`
+      - : Cookie はすべてのコンテキストで送信されます。
+
+## 例
+
+この例では、Cookie が削除されると、イベントリスナーが `CookieChangeEvent.deleted` プロパティの最初の要素をコンソールに記録します。これには、今削除されたばかりの Cookie を表すオブジェクトが格納されています。
+
+```js
+cookieStore.addEventListener("change", (event) => {
+  console.log(event.deleted[0]);
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiechangeevent/index.md b/files/ja/web/api/cookiechangeevent/index.md
new file mode 100644
index 00000000000000..c23f022c420318
--- /dev/null
+++ b/files/ja/web/api/cookiechangeevent/index.md
@@ -0,0 +1,60 @@
+---
+title: CookieChangeEvent
+slug: Web/API/CookieChangeEvent
+l10n:
+  sourceCommit: 6a4893e8a50995d47cf60ea4e081dc5d39a0d9a0
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+
+[「Cookie Store API」](/ja/docs/Web/API/Cookie_Store_API)の **`CookieChangeEvent`** インターフェイスは、Cookie が何か変更された時 {{domxref("CookieStore")}} で発火する {{domxref("CookieStore.change_event", "change")}} イベントのイベント型です。Cookie の変更は、Cookie と種類 (`"changed"` または `"deleted"`) からなります。
+
+`CookieChangeEvent` を発生させる Cookie の変更は、以下のものがあります。
+
+- Cookie が新規作成され、すぐには削除されません。この場合の `type` は `"changed"` です。
+- Cookie が新規作成され、すぐに削除されます。この場合の `type` は `"deleted"` です。
+- Cookie が削除されます。この場合の `type` は `"deleted"` です。
+
+> **メモ:** 同じ名前・ドメイン・パスの他の Cookie が挿入されることにより置き換えられる Cookie は無視され、変更イベントを発生させません。
+
+{{InheritanceDiagram}}
+
+## コンストラクター
+
+- {{domxref("CookieChangeEvent.CookieChangeEvent", "CookieChangeEvent()")}} {{Experimental_Inline}}
+  - : 新しい `CookieChangeEvent` を生成します。
+
+## インスタンスプロパティ
+
+_このインターフェイスは、{{domxref("Event")}} からもプロパティを継承します。_
+
+- {{domxref("CookieChangeEvent.changed")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : 1 個以上の変更された Cookie が格納された配列を返します。
+- {{domxref("CookieChangeEvent.deleted")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : 1 個以上の削除された Cookie が格納された配列を返します。
+
+## 例
+
+この例では、Cookie が設定されると、イベントリスナーがイベントをコンソールに記録します。これは今設定されたばかりの Cookie を表すオブジェクトが格納された {{domxref("CookieChangeEvent.changed","changed")}} プロパティを持つ `CookieChangeEvent` オブジェクトです。
+
+```js
+cookieStore.addEventListener("change", (event) => {
+  console.log(event);
+});
+
+const one_day = 24 * 60 * 60 * 1000;
+cookieStore.set({
+  name: "cookie1",
+  value: "cookie1-value",
+  expires: Date.now() + one_day,
+  domain: "example.com",
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/extendablecookiechangeevent/changed/index.md b/files/ja/web/api/extendablecookiechangeevent/changed/index.md
new file mode 100644
index 00000000000000..4d3fe330140a5e
--- /dev/null
+++ b/files/ja/web/api/extendablecookiechangeevent/changed/index.md
@@ -0,0 +1,63 @@
+---
+title: "ExtendableCookieChangeEvent: changed プロパティ"
+slug: Web/API/ExtendableCookieChangeEvent/changed
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}
+
+{{domxref("ExtendableCookieChangeEvent")}} インターフェイスの読み取り専用プロパティ **`changed`** は、与えられた `ExtendableCookieChangeEvent` のインスタンスで変更されたすべての Cookie を返します。
+
+## 値
+
+オブジェクトの配列で、変更された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。
+
+- `name`
+  - : Cookie の名前を表す文字列です。
+- `value`
+  - : Cookie の値を表す文字列です。
+- `domain`
+  - : Cookie のドメインを表す文字列です。
+- `path`
+  - : Cookie のパスを表す文字列です。
+- `expires`
+  - : ミリ秒単位の [UNIX 時間](/ja/docs/Glossary/Unix_time)で与えられるタイムスタンプで、Cookie の有効期限を表します。
+- `secure`
+  - : Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す {{jsxref("boolean")}} です。
+- `sameSite`
+
+  - : 以下の [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) の値のいずれかです。
+
+    - `"strict"`
+      - : Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。
+    - `"lax"`
+      - : Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。
+    - `"none"`
+      - : Cookie はすべてのコンテキストで送信されます。
+
+## 例
+
+この例では、Cookie が設定されると、イベントリスナーがコンソールに `changed` プロパティを記録します。この配列の最初の要素には、今設定されたばかりの Cookie を表すオブジェクトが格納されています。
+
+```js
+self.addEventListener("cookiechange", (event) => {
+  console.log(event.changed[0]);
+});
+
+const one_day = 24 * 60 * 60 * 1000;
+cookieStore.set({
+  name: "cookie1",
+  value: "cookie1-value",
+  expires: Date.now() + one_day,
+  domain: "example.com",
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/extendablecookiechangeevent/deleted/index.md b/files/ja/web/api/extendablecookiechangeevent/deleted/index.md
new file mode 100644
index 00000000000000..eb89bb0dfbc677
--- /dev/null
+++ b/files/ja/web/api/extendablecookiechangeevent/deleted/index.md
@@ -0,0 +1,55 @@
+---
+title: "ExtendableCookieChangeEvent: deleted プロパティ"
+slug: Web/API/ExtendableCookieChangeEvent/deleted
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}
+
+{{domxref("ExtendableCookieChangeEvent")}} インターフェイスの読み取り専用プロパティ **`deleted`** は、与えられた `ExtendableCookieChangeEvent` のインスタンスで削除されたすべての Cookie を返します。
+
+## 値
+
+オブジェクトの配列で、削除された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。
+
+- `name`
+  - : Cookie の名前を表す文字列です。
+- `value`
+  - : Cookie の値を表す文字列です。
+- `domain`
+  - : Cookie のドメインを表す文字列です。
+- `path`
+  - : Cookie のパスを表す文字列です。
+- `expires`
+  - : ミリ秒単位の [UNIX 時間](/ja/docs/Glossary/Unix_time)で与えられるタイムスタンプで、Cookie の有効期限を表します。
+- `secure`
+  - : Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す {{jsxref("boolean")}} です。
+- `sameSite`
+
+  - : 以下の [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) の値のいずれかです。
+
+    - `"strict"`
+      - : Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。
+    - `"lax"`
+      - : Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。
+    - `"none"`
+      - : Cookie はすべてのコンテキストで送信されます。
+
+## 例
+
+この例では、Cookie が削除されると、イベントリスナーがコンソールに `deleted` プロパティの最初の要素を記録します。これには、削除されたばかりの Cookie を表すオブジェクトが格納されています。
+
+```js
+self.addEventListener("cookiechange", (event) => {
+  console.log(event.deleted[0]);
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/extendablecookiechangeevent/extendablecookiechangeevent/index.md b/files/ja/web/api/extendablecookiechangeevent/extendablecookiechangeevent/index.md
new file mode 100644
index 00000000000000..368bfd935715c8
--- /dev/null
+++ b/files/ja/web/api/extendablecookiechangeevent/extendablecookiechangeevent/index.md
@@ -0,0 +1,42 @@
+---
+title: "ExtendableCookieChangeEvent: ExtendableCookieChangeEvent() コンストラクター"
+slug: Web/API/ExtendableCookieChangeEvent/ExtendableCookieChangeEvent
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}
+
+**`ExtendableCookieChangeEvent()`** コンストラクターは、{{domxref("ServiceWorkerRegistration/cookiechange_event", "ServiceWorkerRegistration.oncookiechange()")}} に渡されるイベント型である新しい {{domxref("ExtendableCookieChangeEvent")}} オブジェクトを生成します。このコンストラクターは、変更イベントが発生するとブラウザーによって呼ばれます。
+
+> **メモ:** このコンストラクターは、通常は製品のウェブサイトでは必要ありません。主な使用法は、このイベントのインスタンスが必要なテストです。
+
+## 構文
+
+```js-nolint
+new ExtendableCookieChangeEvent(type)
+new ExtendableCookieChangeEvent(type, options)
+```
+
+### 引数
+
+- `type`
+  - : イベントの名前を表す文字列です。大文字と小文字は区別され、ブラウザーは常に `cookiechange` に設定します。
+- `options` {{optional_inline}}
+  - : _{{domxref("ExtendableEvent/ExtendableEvent", "ExtendableEvent()")}} で定義されたプロパティに加え_、以下のプロパティを持ちうるオブジェクトです。
+    - `changed`
+      - : 変更された Cookie が格納された配列です。
+    - `deleted`
+      - : 削除された Cookie が格納された配列です。
+
+### 返値
+
+新しい {{domxref("ExtendableCookieChangeEvent")}} オブジェクトです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/extendablecookiechangeevent/index.md b/files/ja/web/api/extendablecookiechangeevent/index.md
new file mode 100644
index 00000000000000..b6741a8334fe51
--- /dev/null
+++ b/files/ja/web/api/extendablecookiechangeevent/index.md
@@ -0,0 +1,65 @@
+---
+title: ExtendableCookieChangeEvent
+slug: Web/API/ExtendableCookieChangeEvent
+l10n:
+  sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store API")}}
+
+[「Cookie Store API」](/ja/docs/Web/API/Cookie_Store_API)の **`ExtendableCookieChangeEvent`** インターフェイスは、Cookie が何か変更された時 {{domxref("ServiceWorkerRegistration.oncookiechange()")}} に渡されるイベント型です。Cookie の変更イベントは、Cookie と種類 (`"changed"` または `"deleted"`) からなります。
+
+`ExtendableCookieChangeEvent` を発生させる Cookie の変更は、以下のものがあります。
+
+- Cookie が新規作成され、すぐには削除されません。この場合の `type` は `"changed"` です。
+- Cookie が新規作成され、すぐに削除されます。この場合の `type` は `"deleted"` です。
+- Cookie が削除されます。この場合の `type` は `"deleted"` です。
+
+> **メモ:** 同じ名前・ドメイン・パスの他の Cookie が挿入されることにより置き換えられる Cookie は無視され、変更イベントを発生させません。
+
+{{InheritanceDiagram}}
+
+## コンストラクター
+
+- {{domxref("ExtendableCookieChangeEvent.ExtendableCookieChangeEvent", "ExtendableCookieChangeEvent()")}}
+  - : 新しい `ExtendableCookieChangeEvent` を生成します。
+
+## インスタンスプロパティ
+
+_このインターフェイスは、{{domxref("ExtendableEvent")}} からもプロパティを継承します。_
+
+- {{domxref("ExtendableCookieChangeEvent.changed")}} {{ReadOnlyInline}}
+  - : 変更された Cookie が格納された配列を返します。
+- {{domxref("ExtendableCookieChangeEvent.deleted")}} {{ReadOnlyInline}}
+  - : 削除された Cookie が格納された配列を返します。
+
+## 例
+
+以下の例では、{{domxref("CookieStoreManager.getSubscriptions()")}} を用いて現在ある購読のリストを取得します。(サービスワーカーでは、イベントを監視するには購読が必要です) {{domxref("CookieStoreManager.unsubscribe()")}} を用いて既存の購読を解除し、{{domxref("CookieStoreManager.subscribe()")}} を用いて名前が `'COOKIE_NAME'` である Cookie を購読します。この Cookie が変更されると、イベントリスナーがイベントをコンソールに記録します。これは、変化が起きた Cookie が格納された {{domxref("ExtendableCookieChangeEvent.changed","changed")}} プロパティまたは {{domxref("ExtendableCookieChangeEvent.deleted","deleted")}} プロパティを持つ `ExtendableCookieChangeEvent` オブジェクトです。
+
+```js
+self.addEventListener("activate", (event) => {
+  event.waitUntil(async () => {
+    const subscriptions = await self.registration.cookies.getSubscriptions();
+    await self.registration.cookies.unsubscribe(subscriptions);
+
+    await self.registration.cookies.subscribe([
+      {
+        name: "COOKIE_NAME",
+      },
+    ]);
+  });
+});
+
+self.addEventListener("cookiechange", (event) => {
+  console.log(event);
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 48ab824aba07d7ae68053eaa3b5cd98a72799d8d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 19 Sep 2023 00:17:32 +0900
Subject: [PATCH 102/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../highwatermark/index.md                    | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 files/ja/web/api/countqueuingstrategy/highwatermark/index.md

diff --git a/files/ja/web/api/countqueuingstrategy/highwatermark/index.md b/files/ja/web/api/countqueuingstrategy/highwatermark/index.md
new file mode 100644
index 00000000000000..03bac2eeff4e0e
--- /dev/null
+++ b/files/ja/web/api/countqueuingstrategy/highwatermark/index.md
@@ -0,0 +1,51 @@
+---
+title: "CountQueuingStrategy: highWaterMark プロパティ"
+short-title: highWaterMark
+slug: Web/API/CountQueuingStrategy/highWaterMark
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Streams")}}
+
+**`CountQueuingStrategy.highWaterMark`** は読み取り専用プロパティで、背圧が適用される前の内部キューに含まれているチャンクの総数です。
+
+## 値
+
+チャンク数を表す整数です。
+
+## 例
+
+```js
+const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
+
+const readableStream = new ReadableStream(
+  {
+    start(controller) {
+      // …
+    },
+    pull(controller) {
+      // …
+    },
+    cancel(err) {
+      console.log("stream error:", err);
+    },
+  },
+  queuingStrategy,
+);
+
+const size = queuingStrategy.size(chunk);
+console.log(`highWaterMark value: ${queuingStrategy.highWaterMark}$`);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("CountQueuingStrategy.CountQueuingStrategy", "CountQueuingStrategy()")}} コンストラクター

From 93852eb8064ace375f4ef896a61d995a7e739492 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 19 Sep 2023 00:08:44 +0900
Subject: [PATCH 103/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../countqueuingstrategy/index.md             | 56 +++++++++++--------
 .../ja/web/api/countqueuingstrategy/index.md  | 52 ++++++++++-------
 .../api/countqueuingstrategy/size/index.md    | 52 ++++++++++-------
 3 files changed, 97 insertions(+), 63 deletions(-)

diff --git a/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md b/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md
index edadbb9b0e53db..c3cdc85535f43e 100644
--- a/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md
+++ b/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md
@@ -1,24 +1,29 @@
 ---
-title: CountQueuingStrategy.CountQueuingStrategy()
+title: "CountQueuingStrategy: CountQueuingStrategy() コンストラクター"
+short-title: CountQueuingStrategy()
 slug: Web/API/CountQueuingStrategy/CountQueuingStrategy
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
 **`CountQueuingStrategy()`** コンストラクターは、`CountQueuingStrategy` オブジェクトのインスタンスを作成して返します。
 
 ## 構文
 
+```js-nolint
+new CountQueuingStrategy(highWaterMark)
 ```
-var countQueuingStrategy = new CountQueuingStrategy({highWaterMark});
-```
 
-### パラメーター
+### 引数
+
+以下のプロパティを持つオブジェクトです。
 
-- {highWaterMark}
-  - : `highWaterMark` プロパティを含むオブジェクト。 これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義する負でない整数です。
+- `highWaterMark`
+  - : 背圧が適用される前に内部キューに含めることができるチャンクの総数です。
 
-### 戻り値
+### 返値
 
 {{domxref("CountQueuingStrategy")}} オブジェクトのインスタンス。
 
@@ -31,26 +36,33 @@ var countQueuingStrategy = new CountQueuingStrategy({highWaterMark});
 ```js
 const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // シンクの実装
-  write(chunk) {
-    ...
-  },
-  close() {
-    ...
+const writableStream = new WritableStream(
+  {
+    // シンクの実装
+    write(chunk) {
+      // …
+    },
+    close() {
+      // …
+    },
+    abort(err) {
+      console.log("Sink error:", err);
+    },
   },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queuingStrategy);
+  queuingStrategy,
+);
 
-var size = queuingStrategy.size();
+const size = queuingStrategy.size();
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.CountQueuingStrategy.CountQueuingStrategy")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("CountQueuingStrategy")}}
diff --git a/files/ja/web/api/countqueuingstrategy/index.md b/files/ja/web/api/countqueuingstrategy/index.md
index d06a35a19acc21..c3a2bab3888138 100644
--- a/files/ja/web/api/countqueuingstrategy/index.md
+++ b/files/ja/web/api/countqueuingstrategy/index.md
@@ -1,51 +1,63 @@
 ---
 title: CountQueuingStrategy
 slug: Web/API/CountQueuingStrategy
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-[Streams API](/ja/docs/Web/API/Streams_API) の **`CountQueuingStrategy`** インターフェイスは、ストリームの構築時に使用できる組み込みのチャンクカウントキューイング戦略を提供します。
+**`CountQueuingStrategy`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、ストリームの構築時に使用できる組み込みのチャンクカウントキューイング戦略を提供します。
 
 ## コンストラクター
 
 - {{domxref("CountQueuingStrategy.CountQueuingStrategy", "CountQueuingStrategy()")}}
   - : 新しい `CountQueuingStrategy` オブジェクトのインスタンスを作成します。
 
-## プロパティ
+## インスタンスプロパティ
 
-なし。
+- {{domxref("CountQueuingStrategy.highWaterMark")}} {{ReadOnlyInline}}
+  - : [背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)が適用される前の内部キューに含まれているチャンクの総数です。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("CountQueuingStrategy.size()")}}
-  - : `1` を返します。
+  - : 常に `1` を返します。
 
 ## 例
 
 ```js
 const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // シンクの実装
-  write(chunk) {
-    ...
+const writableStream = new WritableStream(
+  {
+    // シンクの実装
+    write(chunk) {
+      // …
+    },
+    close() {
+      // …
+    },
+    abort(err) {
+      console.log("Sink error:", err);
+    },
   },
-  close() {
-    ...
-  },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queueingStrategy);
+  queueingStrategy,
+);
 
-var size = queueingStrategy.size();
+const size = queueingStrategy.size();
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.CountQueuingStrategy")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Streams API", "Streams API", "", "nocode")}}
+- {{domxref("CountQueuingStrategy.CountQueuingStrategy", "CountQueuingStrategy()")}} コンストラクター
+- [内部キューとキューイング戦略](/ja/docs/Web/API/Streams_API/Concepts#内部キューとキューイング戦略)
diff --git a/files/ja/web/api/countqueuingstrategy/size/index.md b/files/ja/web/api/countqueuingstrategy/size/index.md
index a711dafc3f8d10..bb557659220638 100644
--- a/files/ja/web/api/countqueuingstrategy/size/index.md
+++ b/files/ja/web/api/countqueuingstrategy/size/index.md
@@ -1,23 +1,26 @@
 ---
-title: CountQueuingStrategy.size()
+title: "CountQueuingStrategy: size() メソッド"
+short-title: size()
 slug: Web/API/CountQueuingStrategy/size
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("CountQueuingStrategy")}} インターフェイスの **`size()`** メソッドは常に `1` を返すため、合計キューサイズはキュー内のチャンク数を数えたものになります。
+**`size()`** は {{domxref("CountQueuingStrategy")}} インターフェイスのメソッドで、常に `1` を返します。従って、合計キューサイズはキュー内のチャンク数を数えたものになります。
 
 ## 構文
 
-```
-var size = countQueuingStrategy.size();
+```js-nolint
+size()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
 `1`。
 
@@ -26,26 +29,33 @@ var size = countQueuingStrategy.size();
 ```js
 const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // シンクの実装
-  write(chunk) {
-    ...
-  },
-  close() {
-    ...
+const writableStream = new WritableStream(
+  {
+    // シンクの実装
+    write(chunk) {
+      // …
+    },
+    close() {
+      // …
+    },
+    abort(err) {
+      console.log("Sink error:", err);
+    },
   },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queuingStrategy);
+  queuingStrategy,
+);
 
-var size = queuingStrategy.size();
+const size = queuingStrategy.size();
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.CountQueuingStrategy.size")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("CountQueuingStrategy.CountQueuingStrategy", "CountQueuingStrategy()")}} コンストラクター

From e27b11307d34423345a39f7abaa4bd6fcfa56588 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 23:03:55 +0900
Subject: [PATCH 104/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../highwatermark/index.md                    | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 files/ja/web/api/bytelengthqueuingstrategy/highwatermark/index.md

diff --git a/files/ja/web/api/bytelengthqueuingstrategy/highwatermark/index.md b/files/ja/web/api/bytelengthqueuingstrategy/highwatermark/index.md
new file mode 100644
index 00000000000000..b1a9b1aec4a4dc
--- /dev/null
+++ b/files/ja/web/api/bytelengthqueuingstrategy/highwatermark/index.md
@@ -0,0 +1,55 @@
+---
+title: "ByteLengthQueuingStrategy: highWaterMark プロパティ"
+short-title: highWaterMark
+slug: Web/API/ByteLengthQueuingStrategy/highWaterMark
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Streams")}}
+
+**`ByteLengthQueuingStrategy.highWaterMark`** は読み取り専用プロパティで、[背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)が適用される前に内部キューに格納することができる総バイト数を返します。
+
+> **メモ:** [`CountQueuingStrategy()`](/ja/docs/Web/API/CountQueuingStrategy/CountQueuingStrategy) では `highWaterMark` 引数に単純な塊の数を指定しますが、 `ByteLengthQueuingStrategy()` では、 `highWaterMark` 引数はバイト数を指定します。具体的には、チャンクのストリームが指定された場合に、背圧が適用される前に内部キューに何バイト分のチャンクを格納することができるか（チャンクの数ではありません）を指定します。
+
+## 値
+
+整数です。
+
+## 例
+
+```js
+const queuingStrategy = new ByteLengthQueuingStrategy({
+  highWaterMark: 1 * 1024,
+});
+
+const readableStream = new ReadableStream(
+  {
+    start(controller) {
+      // …
+    },
+    pull(controller) {
+      // …
+    },
+    cancel(err) {
+      console.log("stream error:", err);
+    },
+  },
+  queuingStrategy,
+);
+
+const size = queuingStrategy.size(chunk);
+console.log(`highWaterMark value: ${queuingStrategy.highWaterMark}$`);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ByteLengthQueuingStrategy.ByteLengthQueuingStrategy", "ByteLengthQueuingStrategy()")}} コンストラクター

From 672c74cd65c752e090f16b4e44516f77562b0228 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 18 Sep 2023 22:47:27 +0900
Subject: [PATCH 105/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bytelengthqueuingstrategy/index.md        | 65 ++++++++++++-------
 .../api/bytelengthqueuingstrategy/index.md    | 54 +++++++++------
 .../bytelengthqueuingstrategy/size/index.md   | 56 +++++++++-------
 3 files changed, 107 insertions(+), 68 deletions(-)

diff --git a/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md b/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md
index e1b4831d8078cb..12935b68373266 100644
--- a/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md
+++ b/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md
@@ -1,26 +1,34 @@
 ---
-title: ByteLengthQueuingStrategy.ByteLengthQueuingStrategy()
+title: "ByteLengthQueuingStrategy: ByteLengthQueuingStrategy() コンストラクター"
+short-title: ByteLengthQueuingStrategy()
 slug: Web/API/ByteLengthQueuingStrategy/ByteLengthQueuingStrategy
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
 **`ByteLengthQueuingStrategy()`** コンストラクターは、`ByteLengthQueuingStrategy` オブジェクトのインスタンスを作成して返します。
 
 ## 構文
 
+```js-nolint
+new ByteLengthQueuingStrategy(highWaterMark)
 ```
-var byteLengthQueuingStrategy = new ByteLengthQueuingStrategy({highWaterMark});
-```
 
-### パラメーター
+### 引数
+
+以下のプロパティを持つオブジェクトです。
+
+- `highWaterMark`
+
+  - : 背圧が適用される前に内部キューに格納することができるバイト数の合計です。
 
-- {highWaterMark}
-  - : `highWaterMark` プロパティを含むオブジェクト。 これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義する負でない整数です。
+    [`CountQueuingStrategy()`](/ja/docs/Web/API/CountQueuingStrategy/CountQueuingStrategy) では `highWaterMark` 引数に単純な塊の数を指定しますが、 `ByteLengthQueuingStrategy()` では、 `highWaterMark` 引数はバイト数を指定します。具体的には、チャンクのストリームが指定された場合に、背圧が適用される前に内部キューに何バイト分のチャンクを格納することができるか（チャンクの数ではありません）を指定します。
 
-### 戻り値
+### 返値
 
-{{domxref("ByteLengthQueuingStrategy")}} オブジェクトのインスタンス。
+{{domxref("ByteLengthQueuingStrategy")}} オブジェクトのインスタンスです。。
 
 ### 例外
 
@@ -29,27 +37,36 @@ var byteLengthQueuingStrategy = new ByteLengthQueuingStrategy({highWaterMark});
 ## 例
 
 ```js
-const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
-
-const readableStream = new ReadableStream({
-  start(controller) {
-    ...
-  },
-  pull(controller) {
-    ...
+const queuingStrategy = new ByteLengthQueuingStrategy({
+  highWaterMark: 1 * 1024,
+});
+
+const readableStream = new ReadableStream(
+  {
+    start(controller) {
+      // …
+    },
+    pull(controller) {
+      // …
+    },
+    cancel(err) {
+      console.log("stream error:", err);
+    },
   },
-  cancel(err) {
-    console.log("stream error:", err);
-  }
-}, queuingStrategy);
+  queuingStrategy,
+);
 
-var size = queuingStrategy.size(chunk);
+const size = queuingStrategy.size(chunk);
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ByteLengthQueuingStrategy.ByteLengthQueuingStrategy")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ByteLengthQueuingStrategy")}} インターフェイス
diff --git a/files/ja/web/api/bytelengthqueuingstrategy/index.md b/files/ja/web/api/bytelengthqueuingstrategy/index.md
index aec463057a8993..a73a1dcce5cab6 100644
--- a/files/ja/web/api/bytelengthqueuingstrategy/index.md
+++ b/files/ja/web/api/bytelengthqueuingstrategy/index.md
@@ -1,50 +1,62 @@
 ---
 title: ByteLengthQueuingStrategy
 slug: Web/API/ByteLengthQueuingStrategy
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-[Streams API](/ja/docs/Web/API/Streams_API) の **`ByteLengthQueuingStrategy`** インターフェイスは、ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略を提供します。
+**`ByteLengthQueuingStrategy`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略を提供します。
 
 ## コンストラクター
 
 - {{domxref("ByteLengthQueuingStrategy.ByteLengthQueuingStrategy", "ByteLengthQueuingStrategy()")}}
   - : 新しい `ByteLengthQueuingStrategy` オブジェクトのインスタンスを作成します。
 
-## プロパティ
+## インスタンスプロパティ
 
-なし。
+- {{domxref("ByteLengthQueuingStrategy.highWaterMark")}} {{ReadOnlyInline}}
+  - : [背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)が適用される前に内部キューに格納することができるバイト数の合計。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("ByteLengthQueuingStrategy.size()")}}
-  - : 所与のチャンクの `byteLength` プロパティを返します。
+  - : 指定されたチャンクの `byteLength` プロパティを返します。
 
 ## 例
 
 ```js
-const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
-
-const readableStream = new ReadableStream({
-  start(controller) {
-    ...
-  },
-  pull(controller) {
-    ...
+const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1024 });
+
+const readableStream = new ReadableStream(
+  {
+    start(controller) {
+      // …
+    },
+    pull(controller) {
+      // …
+    },
+    cancel(err) {
+      console.log("stream error:", err);
+    },
   },
-  cancel(err) {
-    console.log("stream error:", err);
-  }
-}, queueingStrategy);
+  queueingStrategy,
+);
 
-var size = queueingStrategy.size(chunk);
+const size = queueingStrategy.size(chunk);
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ByteLengthQueuingStrategy")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Streams API", "ストリーム API", "", "nocode")}}
+- [内部キューとキューイング戦略](/ja/docs/Web/API/Streams_API/Concepts#内部キューとキューイング戦略)
+- {{domxref("ByteLengthQueuingStrategy.ByteLengthQueuingStrategy", "ByteLengthQueuingStrategy()")}} コンストラクター
diff --git a/files/ja/web/api/bytelengthqueuingstrategy/size/index.md b/files/ja/web/api/bytelengthqueuingstrategy/size/index.md
index 9a4b676b7048c9..c3615ed441470b 100644
--- a/files/ja/web/api/bytelengthqueuingstrategy/size/index.md
+++ b/files/ja/web/api/bytelengthqueuingstrategy/size/index.md
@@ -1,51 +1,61 @@
 ---
-title: ByteLengthQueuingStrategy.size()
+title: "ByteLengthQueuingStrategy: size() メソッド"
+short-title: size()
 slug: Web/API/ByteLengthQueuingStrategy/size
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ByteLengthQueuingStrategy")}} インターフェイスの **`size()`** メソッドは、所与のチャンクの `byteLength` プロパティを返します。
+**`size()`** は {{domxref("ByteLengthQueuingStrategy")}} インターフェイスのメソッドで、指定されたチャンクの `byteLength` プロパティを返します。
 
 ## 構文
 
-```
-var size = byteLengthQueuingStrategy.size(chunk);
+```js-nolint
+size(chunk)
 ```
 
-### パラメーター
+### 引数
 
-- chunk
-  - : ストリームを通過するデータのチャンク。
+- `chunk`
+  - : ストリームを通して渡されるデータのチャンク。
 
-### 戻り値
+### 返値
 
-所与のチャンクのバイト長を表す整数。
+指定されたチャンクのバイト長を表す整数です。
 
 ## 例
 
 ```js
 const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
 
-const readableStream = new ReadableStream({
-  start(controller) {
-    ...
-  },
-  pull(controller) {
-    ...
+const readableStream = new ReadableStream(
+  {
+    start(controller) {
+      // …
+    },
+    pull(controller) {
+      // …
+    },
+    cancel(err) {
+      console.log("stream error:", err);
+    },
   },
-  cancel(err) {
-    console.log("stream error:", err);
-  }
-}, queuingStrategy);
+  queuingStrategy,
+);
 
-var size = queueingStrategy.size(chunk);
+const size = queueingStrategy.size(chunk);
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ByteLengthQueuingStrategy.size")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ByteLengthQueuingStrategy.ByteLengthQueuingStrategy", "ByteLengthQueuingStrategy()")}} コンストラクター

From 2db0b859d5ecadecc0a7bbd80311ac5e4a2bfdeb Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 19 Sep 2023 01:43:00 +0900
Subject: [PATCH 106/268] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../byobrequest/index.md                      | 45 +++++++++++-----
 .../close/index.md                            | 50 ++++++++++++-----
 .../desiredsize/index.md                      | 35 +++++++-----
 .../enqueue/index.md                          | 50 ++++++++++++-----
 .../api/readablebytestreamcontroller/index.md | 53 +++++++++++++++----
 5 files changed, 172 insertions(+), 61 deletions(-)

diff --git a/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md b/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md
index 52708fd817c419..497a184bf2a325 100644
--- a/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/byobrequest/index.md
@@ -1,30 +1,51 @@
 ---
-title: ReadableByteStreamController.byobRequest
+title: "ReadableByteStreamController: byobRequest プロパティ"
+short-title: byobRequest
 slug: Web/API/ReadableByteStreamController/byobRequest
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`byobRequest`** 読み取り専用プロパティは、現在の BYOB プルリクエストを返します。 保留中のリクエストがない場合は `undefined` を返します。
+**`byobRequest`** は {{domxref("ReadableByteStreamController")}} インターフェイスの読み取り専用プロパティで、現在の BYOB リクエストを返します。保留中のリクエストがない場合は `null` を返します。
 
-## 構文
-
-```
-var request = readableByteStreamController.byobRequest;
-```
+基盤となるバイトソースはこのプロパティを調べ、存在する場合はそれを使用してストリームにデータを書き込む必要があります（{{domxref("ReadableByteStreamController.enqueue()")}}を使用するのではなく）。
+こうすることで、コンシューマーへのデータの効率的なゼロバイト移譲が実現します。
 
 ### 値
 
-{{domxref("ReadableStreamBYOBRequest")}} オブジェクトのインスタンス、または `undefined`。
+{{domxref("ReadableStreamBYOBRequest")}} オブジェクトのインスタンス、または `null`。
 
 ## 例
 
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成)の例では、 `byobRequest` を使用して（データが存在する場合は）データを移譲するか、 {{domxref("ReadableByteStreamController.enqueue()")}} を使用してストリーム内部のキューにデータをコピーする方法を示しています。
+
+関連するコードを下記に示します。
+`byobRequest` が存在すれば、 {{domxref("ReadableStreamBYOBRequest.view","controller.byobRequest.view")}} にデータが読み込まれ、 {{domxref("ReadableStreamBYOBRequest.respond()")}} が呼び出されて、移譲可能なデータ量を指示します。
+
+```js
+if (controller.byobRequest) {
+  const v = controller.byobRequest.view;
+  bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+  if (bytesRead === 0) {
+    controller.close();
+  }
+  controller.byobRequest.respond(bytesRead);
+} else {
+  // Write to data using enqueue().
+}
+```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableByteStreamController.byobRequest")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/close/index.md b/files/ja/web/api/readablebytestreamcontroller/close/index.md
index 3c59e1ea58b264..e01f8e3ea44456 100644
--- a/files/ja/web/api/readablebytestreamcontroller/close/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/close/index.md
@@ -1,41 +1,65 @@
 ---
-title: ReadableByteStreamController.close()
+title: "ReadableByteStreamController: close() メソッド"
+short-title: close()
 slug: Web/API/ReadableByteStreamController/close
+l10n:
+  sourceCommit: dcce943de1c2fa0f6a82de3c90bc98285f27ed6f
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`close()`** メソッドは、関連するストリームを閉じます。
+**`close()`** は {{domxref("ReadableByteStreamController")}} インターフェイスのメソッドで、関連するストリームを閉じます。
 
-> **メモ:** リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取とってしまうとストリームは閉じられます。
+これは、そのデータソースが使い果たされたとき/完全に完了したときに、基盤ソースによって呼び出される可能性があります。
+
+> **メモ:** リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取ってしまうとストリームは閉じられます。
+> しかし、 `close()` が呼び出されたときに、未処理で部分的に書き込まれた {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} がある場合、ストリームはエラーになります。
 
 ## 構文
 
-```
-readableByteStreamController.close();
+```js-nolint
+close()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームが読み取り可能ではありません。
 
 ## 例
 
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成)の例で、データがなくなったときにストリームを閉じています。
+
+関連するコードを下記に示します。
+これは `readInto()` メソッドがデータがまだないときだけ 0 バイトを返すと仮定しています。
+
+```js
+bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+if (bytesRead === 0) {
+  controller.close();
+}
+```
+
+closeを呼び出すと、ストリームは閉じられ、コンシューマーがあれば通知されます。
+例えば {{domxref("ReadableStreamBYOBReader")}} を使用している場合、 {{domxref("ReadableStreamBYOBReader.read()","read()")}} リクエストは `done: true` で解決され、 {{domxref("ReadableStreamBYOBReader.closed")}} からのプロミスも解決されます。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableByteStreamController.close")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md b/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md
index 1fe4754701811f..6be832203b09c0 100644
--- a/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/desiredsize/index.md
@@ -1,30 +1,41 @@
 ---
-title: ReadableByteStreamController.desiredSize
+title: "ReadableByteStreamController: desiredSize プロパティ"
+short-title: desiredSize
 slug: Web/API/ReadableByteStreamController/desiredSize
+l10n:
+  sourceCommit: dcce943de1c2fa0f6a82de3c90bc98285f27ed6f
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`desiredSize`** 読み取り専用プロパティは、ストリームの内部キューを満たすために必要な希望サイズを返します。
+**`desiredSize`** は {{domxref("ReadableByteStreamController")}} インターフェイスの読み取り専用プロパティで、ストリームの内部キューを満たすために必要な「希望サイズ」を返します。
 
-## 構文
+この値は、ストリームが、基盤となるソースへの推奨する流量を示すために使用します。
+データ流入のスロットリングや一時停止に対応しているソース（すべてではありません）は、ストリームバッファの `desiredSize` が正の値で、使用可能な限りゼロに近づくように流入を制御する必要があります。
 
-```
-var desiredSize = readableByteStreamController.desiredSize;
-```
+`desiredSize` は下流コンシューマーの[背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)を適用するために使用します。
 
-### 値
+## 値
 
-整数。 キューがいっぱいになった場合、これは負になる可能性があることに注意してください。
+整数です。キューがいっぱいになった場合、これは負になる可能性があることに注意してください。
+
+ストリームがエラーになったときは `null`、閉じられていたときは `0` になる可能性があります。
 
 ## 例
 
-未定。
+仕様書の [A readable stream with an underlying push source and backpressure support](https://streams.spec.whatwg.org/#example-rs-push-backpressure) の例には、ストリームが一杯になったことを手動で検出して背圧をかけるために `desiredSize` を使用する良い例が示されています。
+
+この例では既定のソースを使用していますが、概念は読み取り可能なバイトソースとまったく同じです。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableByteStreamController.desiredSize")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
index d49aa092cbbb45..140afde4fae874 100644
--- a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
@@ -1,40 +1,64 @@
 ---
-title: ReadableByteStreamController.enqueue()
+title: "ReadableByteStreamController: enqueue() メソッド"
+short-title: enqueue()
 slug: Web/API/ReadableByteStreamController/enqueue
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`enqueue()`** メソッドは、所与のチャンクを関連するストリームのキューに入れます。
+**`enqueue()`** は {{domxref("ReadableByteStreamController")}} で、指定された塊を、関連する読み取り可能なバイトストリームのキューに入れます（塊はストリーム内部のキューにコピーされます）。
+
+これは、 {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} が `null` である場合にのみ、キューへのデータ移譲に使用しましょう。
 
 ## 構文
 
-```
-readableByteStreamController.enqueue(chunk);
+```js-nolint
+enqueue(chunk)
 ```
 
-### パラメーター
+### 引数
 
-- _chunk_
+- `chunk`
   - : キューに入れるチャンク。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームを読み取れないか、チャンクがオブジェクトではないか、チャンクの内部配列バッファーが存在しないか、切り離されています。
+    ストリームが既に閉じられていたときにも発生します。
 
 ## 例
 
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成) の例では、未処理の {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} がない場合に `enqueue()` を使用してデータをストリームにコピーする方法を示します。
+もし `byobRequest` があれば、それを使用しましょう。
 
-## 仕様
+下記のコードでは、「仮定の」 `socket.readInto()` メソッドを使用してデータを `ArrayBuffer` に読み込ませ、その後キューに入れています（ただし、実際にデータがコピーされた場合のみ）。
+
+```js
+const buffer = new ArrayBuffer(DEFAULT_CHUNK_SIZE);
+bytesRead = socket.readInto(buffer, 0, DEFAULT_CHUNK_SIZE);
+if (bytesRead === 0) {
+  controller.close();
+} else {
+  controller.enqueue(new Uint8Array(buffer, 0, bytesRead));
+}
+```
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableByteStreamController.enqueue")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableByteStreamController")}}
diff --git a/files/ja/web/api/readablebytestreamcontroller/index.md b/files/ja/web/api/readablebytestreamcontroller/index.md
index 4c86fbe4ef8880..b7bd86e2448706 100644
--- a/files/ja/web/api/readablebytestreamcontroller/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/index.md
@@ -1,24 +1,45 @@
 ---
 title: ReadableByteStreamController
 slug: Web/API/ReadableByteStreamController
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{APIRef("Streams")}}{{SeeCompatTable}}
+{{APIRef("Streams")}}
 
-[Streams API](/ja/docs/Web/API/Streams_API) の **`ReadableByteStreamController`** インターフェイスは、{{domxref("ReadableStream")}} の状態と内部キューを制御できるコントローラーを表します。 バイトストリームコントローラーは、バイトストリーム用です。
+**`ReadableByteStreamController`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)コントローラーを表します。
+これは、基礎となるバイトソースを持つ {{domxref("ReadableStream")}} の状態と内部キューを制御し、ストリームの内部キューが空の場合に、基礎となるソースからコンシューマーへの効率的なゼロコピーデータ移譲を可能にします。
+
+このコントローラ型のインスタンスは、 `underlyingSource` オブジェクトに `type="bytes"` プロパティを設定して [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#type)の引数として渡された場合に作成されます。
+`underlyingSource` オブジェクトは [`start()`](/ja/docs/Web/API/ReadableStream/ReadableStream#start) および [`pull()`](/ja/docs/Web/API/ReadableStream/ReadableStream#pull) コールバック関数を定義することもできます。
+これらは、コントローラーを引数として呼び出され、 基盤となるソースを設定し、必要に応じてデータをリクエストします。
+
+基盤となるソースは、コントローラーを使用して [`byobRequest`](#readablebytestreamcontroller.byobrequest) プロパティまたは [`enqueue()`](#readablebytestreamcontroller.enqueue) メソッドでストリームにデータを供給します。
+[`byobRequest`](#readablebytestreamcontroller.byobrequest) は {{domxref("ReadableStreamBYOBRequest")}} オブジェクトで、コンシューマーから直接コンシューマーにゼロコピーでデータを移譲するための待機リクエストを表します。
+データが存在する場合は、`byobRequest` を使用してデータをコピーする必要があります（この場合は `enqueue()` を使用しないでください）。
+基盤となるソースがストリームにデータを渡す必要があり、 `byobRequest` が `null` の場合、ソースは [`enqueue()`](#readablebytestreamcontroller.enqueue) を呼び出して、ストリーム内部のキューにデータを追加することができます。
+
+[`byobRequest`](#readablebytestreamcontroller.byobrequest) は、リーダーからのリクエストがあり、ストリームの内部キューが空の場合にのみ、「BYOB モード」で作成されることに注意してください。
+「BYOB モード」は、 {{domxref("ReadableStreamBYOBReader")}} （通常、 {{domxref("ReadableStream.getReader()")}} を引数 `{ mode: 'byob' }` で呼び出すことで構築されます）を使用している場合に有効になります。
+既定値でリーダーを使用し、 [`autoAllocateChunkSize`](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) が [`ReadableController()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) で指定されている場合にも有効になります。
+
+基盤となるバイトソースは、コントローラーを使用して、すべてのデータが送信されたときにストリームを閉じたり ([`close()`](#readablebytestreamcontroller.close))、 [`error()`](#readablebytestreamcontroller.error) を使用して基盤となるソースからエラーを報告したりすることもできます。
+コントローラーの [`desiredSize`](#readablebytestreamcontroller.desiredsize) プロパティを使用して「背圧」をかけ、基盤となるソースに内部キューのサイズを通知します（値が小さいと、キューがいっぱいになっていることを示し、基盤となるソースに流入を一時停止またはスロットルすることが望ましいことを示唆します）。
+
+たとえコントローラーが主に基盤となるバイトソースによって使用されるとしても、ストリームの指示のためにシステムの他の部分によって格納することができない理由はないことに注意してください。
 
 ## コンストラクター
 
-なし。 `ReadableByteStreamController` インスタンスは、`ReadableStream` の構築中に自動的に作成されます。
+なし。 `ReadableByteStreamController` インスタンスは、 `underlyingSource` に `type="bytes"` プロパティが設定されたものが [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#type)に渡された場合、自動的に作成されます。
 
-## プロパティ
+## インスタンスプロパティ
 
-- {{domxref("ReadableByteStreamController.byobRequest")}} {{readonlyInline}}
-  - : 現在の BYOB プルリクエストを返します。
-- {{domxref("ReadableByteStreamController.desiredSize")}} {{readonlyInline}}
+- {{domxref("ReadableByteStreamController.byobRequest")}} {{ReadOnlyInline}}
+  - : 現在の BYOB プルリクエストを返します。未処理のリクエストがない場合は `null` となります。
+- {{domxref("ReadableByteStreamController.desiredSize")}} {{ReadOnlyInline}}
   - : ストリームの内部キューを満たすために必要な希望サイズを返します。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("ReadableByteStreamController.close()")}}
   - : 関連するストリームを閉じます。
@@ -29,12 +50,22 @@ slug: Web/API/ReadableByteStreamController
 
 ## 例
 
-未定。
+コントローラーは、データを移譲またはエンキューしたり、ストリームにデータがない（閉じられた）またはエラーとされていたことを指示するために、基盤となるソースによって使用されます。また、 {{domxref("ReadableByteStreamController.desiredSize","desiredSize")}} を使用して、希望するデータレートの「上流」から基盤ソースに指示するためにも使用します。
+
+[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)の例、特に[読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成)がこれらのほとんどの場合を示します。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableByteStreamController")}}
+{{Compat}}
+
+## 関連情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API)
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableStream")}}
+- [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/), for a basic visualization of readable, writable, and transform streams.
+- [Web-streams-polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) or [sd-streams](https://github.com/stardazed/sd-streams) - polyfills

From bdb3c11127f338416f7603c66f5935c6c9be5207 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 19 Sep 2023 09:32:20 +0900
Subject: [PATCH 107/268] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../error/index.md                            | 55 ++++++++++++++-----
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/files/ja/web/api/readablebytestreamcontroller/error/index.md b/files/ja/web/api/readablebytestreamcontroller/error/index.md
index 06eb7098718f5e..e93deee9212fe2 100644
--- a/files/ja/web/api/readablebytestreamcontroller/error/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/error/index.md
@@ -1,40 +1,67 @@
 ---
-title: ReadableByteStreamController.error()
+title: "ReadableByteStreamController: error() メソッド"
+short-title: error()
 slug: Web/API/ReadableByteStreamController/error
+l10n:
+  sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableByteStreamController")}} インターフェイスの **`error()`** メソッドにより、関連するストリームとの今後のやり取りがエラーになります。
+**`error()`** は {{domxref("ReadableByteStreamController")}} インターフェイスのメソッドで、関連するストリームとの今後のやり取りを、指定した理由でエラーとします。
+
+これは一般的に、データを取得するインターフェイスからのエラー（ファイル読み込みやソケットエラーなど）を表面化するために、基盤から呼び出されます。
+また、例えばストリームが依存しているシステムの別の部分に障害が発生した場合など、ストリームエラーを発生させるために他の場所から呼び出すこともできます。
 
 ## 構文
 
-```
-readableByteStreamController.error(e);
+```js-nolint
+error(errorObject)
 ```
 
-### パラメーター
+### 引数
 
-- _e_
-  - : 今後のやり取りを失敗させるエラー。
+- `errorObject`
+  - : 今後のやり取りを失敗させるための任意のオブジェクトです。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}}).
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableByteStreamController` ではないか、何らかの理由でストリームが読み取り可能ではありません。
 
 ## 例
 
-未定。
+[読み取り可能なバイトストリームの使用 > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成) の例では、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームエラーを発生させる方法を示しています。
+
+具体的には、基盤ソースの `start()` メソッドは `readRepeatedly()` を呼び出して、すべてのセットアップ処理を行い、データのリクエストを行います。
+これはプロミスを返します。
+データを読み込む際に発生したエラーは、連鎖する `catch()` 関数で捕捉されます。
+`catch()` では、コントローラーの `error()` を呼び出して、その理由を基盤から渡します。
+
+```js
+function start(controller) {
+  readRepeatedly().catch((e) => controller.error(e));
+}
 
-## 仕様
+function readRepeatedly() {
+  return socket.select2().then(() => {
+    // …
+  });
+}
+```
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableByteStreamController.error")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)

From 35ac5fb7ff413dee2ae01f08dd5ffba63b143ba6 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 23 Sep 2023 09:02:33 +0900
Subject: [PATCH 108/268] [ko] add index.md for `web/glossary/cipher` (#15761)

---
 files/ko/glossary/cipher/index.md | 40 +++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 files/ko/glossary/cipher/index.md

diff --git a/files/ko/glossary/cipher/index.md b/files/ko/glossary/cipher/index.md
new file mode 100644
index 00000000000000..d7630a47b9805e
--- /dev/null
+++ b/files/ko/glossary/cipher/index.md
@@ -0,0 +1,40 @@
+---
+title: 암호 (Cipher)
+slug: Glossary/Cipher
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+{{glossary("cryptography", "암호학")}}에서, **암호**는 {{glossary("Plaintext", "평문")}}을 읽을 수 없게 {{glossary("encryption", "암호화")}}하고, 다시 {{glossary("decryption", "복호화")}}할 수 있는 알고리즘입니다.
+
+암호는 정보화 시대 이전부터 널리 사용되었습니다 (예, [대체 암호](https://en.wikipedia.org/wiki/Substitution_cipher), [전치 암호](https://en.wikipedia.org/wiki/Transposition_cipher) 및 [순열 암호](https://en.wikipedia.org/wiki/Permutation_cipher)), [일회용 패드](https://en.wikipedia.org/wiki/One-time_pad)를 제외하고는 그 어느 것도 암호학적으로 안전하지 않았습니다.
+
+최신 암호는 {{glossary("cryptanalysis", "암호해석")}}을 통해 발견한 {{glossary("attack", "공격")}}을 견딜 수 있도록 설계되었습니다. 모든 공격 방법이 발견되었다는 보장은 아니지만, 각 알고리즘은 알려진 공격 클래스를 기준으로 판단됩니다.
+
+암호는 데이터의 연속 블록 또는 버퍼에 대한 [블록 암호](https://en.wikipedia.org/wiki/Block_cipher) 또는 연속적인 데이터 흐름(주로 소리와 영상)의 [스트림 암호](https://en.wikipedia.org/wiki/Stream_cipher)의 두 가지 방식으로 작동합니다.
+
+또한, {{glossary("key", "키")}} 처리 방법에 따라 분류됩니다.
+
+- [대칭 키](https://en.wikipedia.org/wiki/Symmetric_key_algorithm) 알고리즘은 동일한 키를 사용하여 메시지를 암호화 및 복호화합니다. 또한 메시지를 기밀로 유지하려면 키를 안전하게 전송해야 합니다.
+- [비대칭 키](https://en.wikipedia.org/wiki/Asymmetric_key_algorithm) 알고리즘은 암호화와 복호화에 서로 다른 키를 사용합니다.
+
+## 같이 보기
+
+- [암호](https://en.wikipedia.org/wiki/Cipher) on Wikipedia
+- [암호화와 복호화](/ko/docs/Archive/Security/Encryption_and_Decryption)
+- [MDN 웹 문서 용어사전](/ko/docs/Glossary)
+
+  - {{Glossary("Block cipher mode of operation", "블록 암호 운용 방식")}}
+  - {{Glossary("Cipher", "암호")}}
+  - {{Glossary("Ciphertext", "암호문")}}
+  - {{Glossary("Cipher suite", "암호알고리즘 집합")}}
+  - {{Glossary("Cryptanalysis", "암호분석")}}
+  - {{Glossary("Cryptography", "암호학")}}
+  - {{Glossary("Decryption", "복호화")}}
+  - {{Glossary("Encryption", "암호화")}}
+  - {{Glossary("Key", "키")}}
+  - {{Glossary("Plaintext", "평문")}}
+  - {{Glossary("Public-key cryptography", "공개키 암호화")}}
+  - {{Glossary("Symmetric-key cryptography", "대칭키 암호화")}}

From 3dfc30f70a655b615927a27e2ffb71b7fa41bb27 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 23 Sep 2023 09:09:00 +0900
Subject: [PATCH 109/268] [ko] add index.md for `web/glossary/code_unit`
 (#15831)

---
 files/ko/glossary/code_unit/index.md | 38 ++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 files/ko/glossary/code_unit/index.md

diff --git a/files/ko/glossary/code_unit/index.md b/files/ko/glossary/code_unit/index.md
new file mode 100644
index 00000000000000..2826bd12c6f8dd
--- /dev/null
+++ b/files/ko/glossary/code_unit/index.md
@@ -0,0 +1,38 @@
+---
+title: 코드 단위 (Code unit)
+slug: Glossary/Code_unit
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**코드 단위**는 문자 인코딩 시스템(예, UTF-8 또는 UTF-16)에서 사용되는 기본 구성 요소입니다. 문자 인코딩 시스템은 하나 이상의 코드 단위를 사용하여 유니코드 {{Glossary("code point", "코드 포인트")}}를 인코딩합니다.
+
+UTF-16 (JavaScript 문자열에 사용되는 인코딩 시스템)에서 코드 단위는 16비트 값입니다. 이것은 문자열에 대한 인덱싱이나 문자열 길이 가져오는 작업이 이러한 16비트 단위에서 작동함을 의미합니다. 이러한 단위는 우리가 문자로 간주할 수 있는 항목에 항상 1대1로 매핑되지는 않습니다.
+
+예를 들어, 악센트와 같은 발음 구별 부호가 있는 문자는 때때로 두 개의 유니코드 코드 포인트를 사용하여 표현될 수 있습니다.
+
+```js
+const myString = "\u006E\u0303";
+console.log(myString); // ñ
+console.log(myString.length); // 2
+```
+
+또한, 유니코드로 정의된 모든 코드 포인트가 16비트에 맞지 않기 때문에, 많은 유니코드 코드 포인트가 '대리 쌍'이라고 불리는 UTF-16 코드 단위 쌍으로 인코딩됩니다.
+
+```js
+const face = "🥵";
+console.log(face.length); // 2
+```
+
+JavaScript {{jsxref("String")}} 객체의 {{jsxref("String/codePointAt", "codePointAt()")}} 메서드를 사용하면 인코딩된 형식에서 유니코드 코드 포인트를 검색할 수 있습니다.
+
+```js
+const face = "🥵";
+console.log(face.codePointAt(0)); // 129397
+```
+
+## 같이 보기
+
+- [유니코드 인코딩 FAQ](https://www.unicode.org/faq/utf_bom.html)

From 55f5caccca7882c476f814db65812bc28b80eb71 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Sat, 23 Sep 2023 09:09:08 +0800
Subject: [PATCH 110/268] [zh-cn]: update the translation of Number.isInteger()
 (#16012)

---
 .../global_objects/number/isinteger/index.md  | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/isinteger/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/isinteger/index.md
index d1ece267378493..26d8bf1cb7dca9 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/isinteger/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/isinteger/index.md
@@ -5,59 +5,58 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/isInteger
 
 {{JSRef}}
 
-**`Number.isInteger()`** 方法用来判断给定的参数是否为整数。
+**`Number.isInteger()`** 静态方法判断传入值是否为整数。
 
 {{EmbedInteractiveExample("pages/js/number-isinteger.html")}}
 
 ## 语法
 
-```plain
+```js-nolint
 Number.isInteger(value)
 ```
 
 ### 参数
 
 - `value`
-  - : 要判断此参数是否为整数
+  - : 要测试是否为整数的值。
 
 ### 返回值
 
-判断给定值是否是整数的 {{jsxref("Boolean")}} 值。
+如果给定值是整数，则返回布尔值 `true`。否则为 `false`。
 
 ## 描述
 
-如果被检测的值是整数，则返回 `true`，否则返回 `false`。注意 {{jsxref("Global_Objects/NaN", "NaN")}} 和正负 {{jsxref("Global_Objects/Infinity", "Infinity")}} 不是整数。
+如果目标值是一个整数，返回 `true`，否则返回 `false`。如果该值是 {{jsxref("NaN")}} 或者 {{jsxref("Infinity")}}，返回 `false`。对于可以表示为整数的浮点数，该方法也将返回 `true`。如果该值不是一个数字，该方法将始终返回 `false`。
+
+请注意，一些数字字面量看起来像是非整数，但实际上却表示整数。这是由于 ECMAScript 浮点数编码（IEEE-754）的精度限制。例如，`5.0000000000000001` 只与 `5` 相差 `1e-16`，这个差值太小了而无法表示。（作为参考，[`Number.EPSILON`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON) 存储 1 与大于 1 的下一个可表示的浮点数之间的距离，大约为 `2.22e-16`。）因此，`5.0000000000000001` 将使用与 `5` 相同的编码表示，从而使得 `Number.isInteger(5.0000000000000001)` 返回 `true`。
+
+在类似的意义上，接近 [`Number.MAX_SAFE_INTEGER`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) 大小的数值会因精度损失而使得 `Number.isInteger` 在传入值实际上不是整数的情况下返回 `true`。（实际阈值根据需要表示小数所需的位数而变化——例如，`Number.isInteger(4500000000000000.1)` 为 `true`，但 `Number.isInteger(4500000000000000.5)` 为 `false`。）
 
 ## 示例
 
+### 使用 isInteger
+
 ```js
 Number.isInteger(0); // true
 Number.isInteger(1); // true
 Number.isInteger(-100000); // true
+Number.isInteger(99999999999999999999999); // true
 
 Number.isInteger(0.1); // false
 Number.isInteger(Math.PI); // false
 
+Number.isInteger(NaN); // false
 Number.isInteger(Infinity); // false
 Number.isInteger(-Infinity); // false
 Number.isInteger("10"); // false
 Number.isInteger(true); // false
 Number.isInteger(false); // false
 Number.isInteger([1]); // false
-```
-
-## Polyfill
 
-```js
-Number.isInteger =
-  Number.isInteger ||
-  function (value) {
-    return (
-      typeof value === "number" &&
-      isFinite(value) &&
-      Math.floor(value) === value
-    );
-  };
+Number.isInteger(5.0); // true
+Number.isInteger(5.000000000000001); // false
+Number.isInteger(5.0000000000000001); // true，因为精度损失
+Number.isInteger(4500000000000000.1); // true，因为精度损失
 ```
 
 ## 规范
@@ -68,6 +67,7 @@ Number.isInteger =
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
-- {{jsxref("Global_Objects/Number", "Number")}}
+- [`core-js` 中 `Number.isInteger` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
+- {{jsxref("Number")}}

From 31aa075eeffbafcdfc979059ab2354657e358fb4 Mon Sep 17 00:00:00 2001
From: Ivor <42016099+minecraftfen@users.noreply.github.com>
Date: Sat, 23 Sep 2023 09:11:49 +0800
Subject: [PATCH 111/268] zh-cn: update the translation of "Prototype-based
 programming" (#16019)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../glossary/prototype-based_programming/index.md    | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/files/zh-cn/glossary/prototype-based_programming/index.md b/files/zh-cn/glossary/prototype-based_programming/index.md
index a88853c680a4f1..702d88eb2706ef 100644
--- a/files/zh-cn/glossary/prototype-based_programming/index.md
+++ b/files/zh-cn/glossary/prototype-based_programming/index.md
@@ -1,16 +1,14 @@
 ---
-title: 原型编程
+title: 基于原型编程
 slug: Glossary/Prototype-based_programming
 ---
 
 {{GlossarySidebar}}
 
-**原型编程** 是一种 {{Glossary("OOP", "面向对象编程")}} 的风格。在这种风格中，我们不会显式地定义{{Glossary('Class', '类')}} ，而会通过向其他类的实例（对象）中添加属性和方法来创建类，甚至偶尔使用空对象创建类。
+**基于原型编程**是一种{{Glossary("OOP", "面向对象编程")}}的风格。在这种风格中，我们不会显式地定义{{Glossary('Class', '类')}}，而会通过向其他类的实例（对象）中添加属性和方法（甚至偶尔向空对象添加）来创建类。
 
-简单来说，这种风格是在不定义{{Glossary('Class', 'class')}}的情况下创建一个 {{Glossary('Object', 'object')}}。
+简单来说，这种风格是在不定义{{Glossary('Class', '类')}}的情况下创建一个{{Glossary('Object', '对象')}}。
 
-## 更多内容
+## 参见
 
-### 常识
-
-- [原型编程](https://zh.wikipedia.org/wiki/Prototype-based_programming) 的维基页面
+- [基于原型编程](https://zh.wikipedia.org/wiki/基于原型编程)的维基页面

From 88de6f0ef798763eb321c38a118337559ddc2fd0 Mon Sep 17 00:00:00 2001
From: Shane <shanewestlife@outlook.com>
Date: Sat, 23 Sep 2023 09:13:34 +0800
Subject: [PATCH 112/268] zh-cn: update the description section for the
 `Object.hasOwn()` page (#16020)

---
 .../javascript/reference/global_objects/object/hasown/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/hasown/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/hasown/index.md
index 0194dc6cc9d8f3..8f8c28503ad052 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/hasown/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/hasown/index.md
@@ -32,7 +32,7 @@ Object.hasOwn(obj, prop)
 
 如果指定的属性是该对象的直接属性——**`Object.hasOwn()`** 方法返回 `true`，即使属性值是 `null` 或 `undefined`。如果属性是继承的或者不存在，该方法返回 `false`。它不像 {{jsxref("Operators/in", "in")}} 运算符，这个方法不检查对象的原型链中的指定属性。
 
-建议使用此方法替代 {{jsxref("Object.hasOwnProperty()")}}，因为它适用于使用 `Object.create(null)` 创建的对象且重写了继承的 `hasOwnProperty()` 方法的对象。尽管可以通过在外部对象上调用 `Object.prototype.hasOwnProperty()` 解决这些问题，但是 `Object.hasOwn()` 更加直观。
+建议使用此方法替代 {{jsxref("Object.prototype.hasOwnProperty()")}}，因为它适用于使用 `Object.create(null)` 创建的对象，以及重写了继承的 `hasOwnProperty()` 方法的对象。尽管可以通过在外部对象上调用 `Object.prototype.hasOwnProperty()` 解决这些问题，但是 `Object.hasOwn()` 更加直观。
 
 ## 示例
 

From 2de4f9f452aabd12113164d7203174ed22db9995 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Sat, 23 Sep 2023 09:20:47 +0800
Subject: [PATCH 113/268] [zh-cn]: update the translation of Number.isFinite()
 (#15985)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../global_objects/number/isfinite/index.md   | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/isfinite/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/isfinite/index.md
index 2974a952070093..4b8c6defce3e9b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/isfinite/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/isfinite/index.md
@@ -5,40 +5,29 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite
 
 {{JSRef}}
 
-**`Number.isFinite()`** 方法用来检测传入的参数是否是一个有穷数。
+**`Number.isFinite()`** 静态方法判断传入值是否是一个有限数——也就是说，它检查给定值是一个数字，且该数字既不是正的 {{jsxref("Infinity")}}，也不是负的 `Infinity` 或 {{jsxref("NaN")}}。
 
 {{EmbedInteractiveExample("pages/js/number-isfinite.html")}}
 
 ## 语法
 
-```plain
+```js-nolint
 Number.isFinite(value)
 ```
 
 ### 参数
 
 - `value`
-  - : 要被检测有穷性的值。
+  - : 要测试有限性的值。
 
 ### 返回值
 
-一个 {{jsxref("Boolean", "布尔值")}} 表示给定的值是否是一个有穷数。
-
-## 描述
-
-和全局的 {{jsxref("Global_Objects/isFinite", "isFinite()")}} 函数相比，这个方法不会强制将一个非数值的参数转换成数值，这就意味着，只有数值类型的值，且是有穷的（finite），才返回 `true`。
-
-## Polyfill
-
-```js
-if (Number.isFinite === undefined)
-  Number.isFinite = function (value) {
-    return typeof value === "number" && isFinite(value);
-  };
-```
+如果给定值是有限数，则返回布尔值 `true`。否则为 `false`。
 
 ## 示例
 
+### 使用 isFinite()
+
 ```js
 Number.isFinite(Infinity); // false
 Number.isFinite(NaN); // false
@@ -46,11 +35,17 @@ Number.isFinite(-Infinity); // false
 
 Number.isFinite(0); // true
 Number.isFinite(2e64); // true
+```
+
+### Number.isFinite() 和全局 isFinite() 之间的不同
 
-Number.isFinite("0"); // false, would've been true with
-// global isFinite('0')
-Number.isFinite(null); // false, would've been true with
-// global isFinite(null)
+与全局 {{jsxref("isFinite", "isFinite()")}} 函数相比，此方法不会先将参数转换为数字，这意味着只有类型为数字*且*为有限数的值才返回 `true`，而非数字的值始终返回 `false`。
+
+```js
+isFinite("0"); // true；强制转换为数字 0
+Number.isFinite("0"); // false
+isFinite(null); // true；强制转换为数字 0
+Number.isFinite(null); // false
 ```
 
 ## 规范
@@ -61,7 +56,8 @@ Number.isFinite(null); // false, would've been true with
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
-- The {{jsxref("Number")}} object it belongs to.
-- The global function {{jsxref("isFinite")}}.
+- [`core-js` 中 `Number.isFinite` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
+- {{jsxref("Number")}}
+- {{jsxref("isFinite", "isFinite()")}}

From 997a6edd6f512ab83eaa99d8303d906130974eb3 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 23 Sep 2023 13:56:19 +0800
Subject: [PATCH 114/268] zh-cn: update `text-size-adjust` layout (#16024)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 files/zh-cn/web/css/text-size-adjust/index.md | 47 ++++++++-----------
 1 file changed, 19 insertions(+), 28 deletions(-)

diff --git a/files/zh-cn/web/css/text-size-adjust/index.md b/files/zh-cn/web/css/text-size-adjust/index.md
index e023ea56cba450..553ec9577a50df 100644
--- a/files/zh-cn/web/css/text-size-adjust/index.md
+++ b/files/zh-cn/web/css/text-size-adjust/index.md
@@ -7,36 +7,29 @@ slug: Web/CSS/text-size-adjust
 
 **`text-size-adjust`** [CSS](/zh-CN/docs/Web/API/CSS) 控制将一些手机或平板设备上使用的文本溢出算法（text inflation algorithm）。其他类型的设备上的浏览器会忽略此属性。
 
+因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。它们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的{{glossary("viewport", "视口")}}去布局网页，通常是 800 到 1000 像素。为了将视口上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。
+
+因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。`text-size-adjust` 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。
+
+## 语法
+
 ```css
-/* 专有属性值 */
+/* 关键字值 */
 text-size-adjust: none;
 text-size-adjust: auto;
 
 /* <percentage> 值 */
 text-size-adjust: 80%;
 
-/* 全局属性值 */
+/* 全局值 */
 text-size-adjust: inherit;
 text-size-adjust: initial;
+text-size-adjust: revert;
+text-size-adjust: revert-layer;
 text-size-adjust: unset;
 ```
 
-因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的 {{glossary("viewport", "视窗")}} 去布局网页，通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。
-
-因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。`text-size-adjust` 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。
-
-> **备注：** 这个属性并不是标准。你必须为每个你想要应用的浏览器加上属性前缀。
->
-> - 不同浏览器，这个属性有不同的行为和语法。更多的信息，请查看下面的浏览器兼容性部分。
-> - **这个属性只在一些智能手机和平板电脑上使用。**桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。
-> - 如果 `-webkit-text-size-adjust` 显式设置为 `none`, 老的基于桌面的 WebKit 和平板电脑浏览器，像 Chrome≤26 或者 Safari≤5，不会忽略这个属性，反而会阻止用户在 web 界面放大或缩小。[#](https://bugs.webkit.org/show_bug.cgi?id=56543)
-> - 不是所有的浏览器都支持这个属性使用百分比值 (例如 Webkit 和 Trident , 但是 Gecko 不支持). 检查下面浏览器兼容的部分查看更多的信息。
-
-{{cssinfo}}
-
-## 语法
-
-`text-size-adjust` 属性的值为 [`none`](#none), [`auto`](#auto)，或 [`<percentage>`](#percentage)
+`text-size-adjust` 属性的值为 `none`、`auto` 或 `<percentage>`。
 
 ### 属性值
 
@@ -47,7 +40,11 @@ text-size-adjust: unset;
 - `<percentage>`
   - : 启用浏览器的文本溢出算法，并使用用一个百分数来确定文本放大程度。
 
-### 形式化语法
+### 形式定义
+
+{{cssinfo}}
+
+### 形式语法
 
 {{csssyntax}}
 
@@ -59,14 +56,8 @@ text-size-adjust: unset;
 
 {{Compat}}
 
-\[1] There is a bug in older WebKit-based desktop browsers. If `-webkit-text-size-adjust` is explicitly set to `none`, older Webkit-based desktop browsers, instead of ignoring the property, will prevent the user from zooming in or out of the web page. See [Bug 56543](https://bugs.webkit.org/show_bug.cgi?id=56543) (affected Safari≤5 & Chrome≤26), [Bug 163359](https://code.google.com/p/chromium/issues/detail?id=163359), and [Bug 84186](https://bugs.webkit.org/show_bug.cgi?id=84186).
-
-\[2] In addition to the `-moz-` prefixed support, Gecko 44.0 added support for a `-webkit-` prefixed version of the property for web compatibility reasons behind the `layout.css.prefixes.webkit` flag, defaulting to `false`. Since Gecko 49.0 the preference defaults to `true`.
-
-\[3] If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS `text-size-adjust` property is ignored. See [detailed implementation hints on MSDN](<https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS>).
-
 ## 参见
 
-- [Apple's documentation](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16)
-- [Gecko's behavior description](http://dbaron.org/log/20111126-font-inflation), by L. David Baron
-- [Microsoft's documentation](<https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS>)
+- [Apple 的文档](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16)
+- [Google Chrome 的行为描述](https://docs.google.com/document/d/1PPcEwAhXJJ1TQShor29KWB17KJJq7UJOM34oHwYP3Zg/edit)
+- [Gecko 的行为描述](https://dbaron.org/log/20111126-font-inflation)，来自 L. David Baron

From 3afa69e1c70c8a6a9786541009af7861db6db5ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diego=20Gonz=C3=A1lez?=
 <120255397+diegomox@users.noreply.github.com>
Date: Sun, 24 Sep 2023 00:34:45 +0200
Subject: [PATCH 115/268] Update removeChild index.md [es] (#15730)

---
 files/es/web/api/node/removechild/index.md | 139 ++++++++++++---------
 1 file changed, 82 insertions(+), 57 deletions(-)

diff --git a/files/es/web/api/node/removechild/index.md b/files/es/web/api/node/removechild/index.md
index 855ed6653a1d41..ff21049e1a1722 100644
--- a/files/es/web/api/node/removechild/index.md
+++ b/files/es/web/api/node/removechild/index.md
@@ -1,98 +1,123 @@
 ---
-title: Node.removeChild()
+title: "Node: Método removeChild()"
+short-title: removeChild()
 slug: Web/API/Node/removeChild
+l10n:
+  sourceCommit: 56c76424a5edb45f6716ac4ee48861dac8e7ae38
 ---
 
-{{APIRef ( "DOM")}}
+{{APIRef("DOM")}}
 
-El método **`Node.removeChild()`** elimina un nodo hijo del DOM y puede devolver el nodo eliminado.
+El método **`removeChild()`** de la interfaz {{domxref("Node")}} elimina un nodo hijo del DOM y devuelve el nodo eliminado.
 
-## Sintaxis
-
-```
-var antiguoHijo = elemento.removeChild(child);
-O
-elemento.removeChild(child);
-```
+> **Nota:** Mientras se mantenga una referencia sobre el elemento hijo eliminado, seguirá existiendo en la memoria, pero ya no forma parte del DOM. Todavía se puede reutilizar más adelante en el código.
+>
+> Si el valor devuelto de `removeChild()` no se almacena y no se guarda ninguna otra referencia, se [eliminará automáticamente](/es/docs/Web/JavaScript/Memory_management) de la memoria al cabo de un breve tiempo.
 
-- `child` es el nodo hijo a eliminar del DOM.
-- `elemento` es el nodo padre de `hijo`.(ver nota mas abajo)
-- `antiguoHijo` tiene una referencia al hijo eliminado. `antiguoHijo === child`.
+A diferencia de {{domxref("Node.cloneNode()")}}, el valor devuelto conserva los objetos `EventListener` asociados con él.
 
-El hijo(child) eliminado aún existe en memoria pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, se puede reutilizar el nodo eliminado más tarde en el código, por medio de la referencia al objeto `antiguoHijo`. Sin embargo, en la segunda forma, la referencia a `antiguoHijo` se pierde, y suponiendo que el código no mantenga una referencia a ese objeto en alguna otra parte, inmediatamente será inutilizable e irrecuperable y será [eliminada automáticamente](/es/docs/Web/JavaScript/Gestion_de_Memoria)de memoria después de poco tiempo.
-
-Si hijo(`child)` no es en realidad hijo del nodo `elemento`, el método lanza una excepción. Esto también sucederá si `child` es en realidad hijo de `elemento` al momento de llamar al método, pero fue eliminado por un controlador(manejador) de eventos(event handler) invocado en el curso de tratar de eliminar el elemento. (e.g. blur).
+## Sintaxis
 
-Por lo tanto el método removeChild(child) lanza una excepción de 2 casos diferentes:
+```js-nolint
+removeChild(child)
+```
 
-1\. Si child es un hijo del elemento y por lo tanto existe en el DOM, pero se retiró el método lanza la siguiente excepción:
+### Parámetros
 
-`Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node`.
+- `child`
+  - : Un {{domxref("Node")}} que es el nodo hijo que se eliminará del DOM.
 
-2\. Si `child` no existe en el DOM de la página, el método emite la siguiente excepción:
+### Excepción
 
-`Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.`
+- `NotFoundError` {{domxref("DOMException")}}
+  - : Se lanza si `child` no es un hijo del nodo.
+- {{jsxref("TypeError")}}
+  - : Se lanza si `child` es `null`.
 
 ## Ejemplos
 
-```html
-<!--Ejemplo 1 HTML-->
-<div id="top" align="center"></div>
-```
+### Ejemplos simples
 
-```js
-<!--Javascript-->
-// El método lanza la excepción correspondiente al (caso 2)
-var top = document.getElementById("top");
-var nested = document.getElementById("nested");
-var garbage = top.removeChild(nested);
-```
+Dado este HTML:
 
 ```html
-<!--Ejemplo 2 HTML-->
-<div id="top">
-  <div id="anidados"></div>
+<div id="parent">
+  <div id="child"></div>
 </div>
 ```
 
+Para eliminar un elemento específico cuando se conoce su nodo principal:
+
 ```js
-<!--Javascript-->
-// Eliminando un elemento específico cuando se conoce su nodo padre
-var d = document.getElementById("top");
-var d_nested = document.getElementById("anidados");
-var throwawayNode = d.removeChild(d_nested);
+const parent = document.getElementById("parent");
+const child = document.getElementById("child");
+const throwawayNode = parent.removeChild(child);
 ```
 
+Para eliminar un elemento específico sin tener que especificar su nodo principal:
+
 ```js
-<!--Javascript-->
-// Eliminando un elemento específico utilizando la propiedad parentNode, que siempre hace referencia al nodo padre de un nodo (nodoHijo.parentNode.).
-nodo var = document.getElementById("anidados");
+const node = document.getElementById("child");
 if (node.parentNode) {
-  node.parentNode.removeChild(nodo);
+  node.parentNode.removeChild(node);
 }
 ```
 
+Para eliminar todos los hijos de un elemento:
+
 ```js
-<!--Javascript-->
-// Eliminando todos los hijos de un elemento
-elemento var = document.getElementById("top");
+const element = document.getElementById("idOfParent");
 while (element.firstChild) {
   element.removeChild(element.firstChild);
 }
 ```
 
-## Notas
+### Causar un TypeError
+
+```html
+<!--Código HTML de muestra-->
+<div id="parent"></div>
+```
+
+```js
+const parent = document.getElementById("parent");
+const child = document.getElementById("child");
+
+// Arroja Uncaught TypeError
+const garbage = parent.removeChild(child);
+```
+
+### Causar un NotFoundError
+
+```html
+<!--Código HTML de muestra-->
+<div id="parent">
+  <div id="child"></div>
+</div>
+```
+
+```js
+const parent = document.getElementById("parent");
+const child = document.getElementById("child");
+
+// Esta primera llamada elimina correctamente el nodo.
+const garbage = parent.removeChild(child);
+
+// Arroja NotFoundError
+garbage = parent.removeChild(child);
+```
+
+## Especificaciones
 
-**`removeChild()`** se debe invocar sobre el nodo padre del nodo que se va a eliminar.
+{{Specifications}}
 
-## Especificación
+## Compatibilidad con navegadores
 
-- [DOM Nivel 1 Core: removeChild](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild)
-- [DOM Nivel 2 Core: removeChild](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066)
-- [DOM Nivel 3 Core: removeChild](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066)
+{{Compat}}
 
-## Vea también
+## Véase también
 
-- {{Domxref ( "Node.replaceChild")}}
-- {{Domxref ( "Node.parentNode")}}
-- {{Domxref ( "ChildNode.remove")}}
+- {{domxref("Node.replaceChild()")}}
+- {{domxref("Node.parentNode")}}
+- {{domxref("Element.remove()")}}
+- {{domxref("Node.cloneNode()")}}

From 09824fe3cc24942dcf41eb385e8ddd9d83e28d4e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 19:17:31 +0900
Subject: [PATCH 116/268] =?UTF-8?q?=E8=A1=A8=E8=A8=98=E3=81=AE=E4=B8=8D?=
 =?UTF-8?q?=E7=B5=B1=E4=B8=80=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/click_event/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/element/click_event/index.md b/files/ja/web/api/element/click_event/index.md
index 8fc336fc7251ce..8b732991897cf1 100644
--- a/files/ja/web/api/element/click_event/index.md
+++ b/files/ja/web/api/element/click_event/index.md
@@ -10,7 +10,7 @@ l10n:
 
 **`click`** イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。
 
-ある要素でボタンが押され、ボタンが離される前にポインタが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。
+ある要素でボタンが押され、ボタンが離される前にポインターが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。
 
 `click` は {{domxref("Element/mousedown_event", "mousedown")}} および {{domxref("Element/mouseup_event", "mouseup")}} イベントの後、順番通りに発生します。
 

From c1bf77e06c4ae07154ae6b54b4b34f4a75d26f10 Mon Sep 17 00:00:00 2001
From: MikeCAT <mikecat@users.noreply.github.com>
Date: Wed, 20 Sep 2023 21:54:27 +0900
Subject: [PATCH 117/268] Translate CookieStoreManager

---
 .../getsubscriptions/index.md                 | 45 ++++++++++++++
 files/ja/web/api/cookiestoremanager/index.md  | 46 ++++++++++++++
 .../api/cookiestoremanager/subscribe/index.md | 61 +++++++++++++++++++
 .../cookiestoremanager/unsubscribe/index.md   | 53 ++++++++++++++++
 4 files changed, 205 insertions(+)
 create mode 100644 files/ja/web/api/cookiestoremanager/getsubscriptions/index.md
 create mode 100644 files/ja/web/api/cookiestoremanager/index.md
 create mode 100644 files/ja/web/api/cookiestoremanager/subscribe/index.md
 create mode 100644 files/ja/web/api/cookiestoremanager/unsubscribe/index.md

diff --git a/files/ja/web/api/cookiestoremanager/getsubscriptions/index.md b/files/ja/web/api/cookiestoremanager/getsubscriptions/index.md
new file mode 100644
index 00000000000000..d3d41d4dde0a8b
--- /dev/null
+++ b/files/ja/web/api/cookiestoremanager/getsubscriptions/index.md
@@ -0,0 +1,45 @@
+---
+title: "CookieStoreManager: getSubscriptions() メソッド"
+slug: Web/API/CookieStoreManager/getSubscriptions
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store")}}{{SeeCompatTable}}
+
+{{domxref("CookieStoreManager")}} インターフェイスの **`getSubscriptions()`** メソッドは、この {{domxref("ServiceWorkerRegistration")}} のすべての Cookie 変更購読のリストを返します。
+
+## 構文
+
+```js-nolint
+getSubscriptions()
+```
+
+### 引数
+
+なし
+
+### 返値
+
+オブジェクトのリストで解決する {{jsxref("promise")}} です。それぞれのオブジェクトは以下を持ちます。
+
+- `name`
+  - : Cookie の名前を表す文字列です。
+- `url`
+  - : Cookie を購読するのに用いるスコープの URL を表す文字列です。
+
+## 例
+
+`registration` で表される {{domxref("ServiceWorkerRegistration")}} が既に何か Cookie 変更イベントを購読している場合は、`subscriptions` はそれらの Cookie の名前と URL が格納されたオブジェクトのリストで解決します。
+
+```js
+const subscriptions = await registration.cookies.getSubscriptions();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestoremanager/index.md b/files/ja/web/api/cookiestoremanager/index.md
new file mode 100644
index 00000000000000..26880b80542034
--- /dev/null
+++ b/files/ja/web/api/cookiestoremanager/index.md
@@ -0,0 +1,46 @@
+---
+title: CookieStoreManager
+slug: Web/API/CookieStoreManager
+l10n:
+  sourceCommit: e811fc31b67e145c5882e8e3f128d1938c627a51
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store")}}{{SeeCompatTable}}
+
+[「Cookie Store API」](/ja/docs/Web/API/Cookie_Store_API)の **`CookieStoreManager`** インターフェイスは、サービスワーカーが Cookie 変更イベントを購読できるようにします。変更イベントを受け取るには、特定のサービスワーカーの登録で {{domxref("CookieStoreManager.subscribe()","subscribe()")}} を呼びます。
+
+`CookieStoreManager` には、関連づいた {{domxref("ServiceWorkerRegistration")}} があります。それぞれのサービスワーカーの登録には、Cookie 変更購読リストがあります。これは、それぞれが名前と URL を持つ Cookie 変更購読のリストです。このインターフェイスのメソッドにより、サービスワーカーはこのリストに購読を追加したり、リストから購読を削除したり、すべての購読のリストを取得したりできます。
+
+`CookieStoreManager` を得るには、{{domxref("ServiceWorkerRegistration.cookies")}} を参照します。
+
+## インスタンスメソッド
+
+- {{domxref("CookieStoreManager.getSubscriptions()")}} {{Experimental_Inline}}
+  - : このサービスワーカーの登録の Cookie 変更購読のリストで解決する {{jsxref("promise")}} を返します。
+- {{domxref("CookieStoreManager.subscribe()")}} {{Experimental_Inline}}
+  - : Cookie の変更を購読します。購読に成功したら解決する {{jsxref("promise")}} を返します。
+- {{domxref("CookieStoreManager.unsubscribe()")}} {{Experimental_Inline}}
+  - : このサービスワーカーの登録の Cookie の変更の購読を解除します。操作に成功したら解決する {{jsxref("promise")}} を返します。
+
+## 例
+
+この例では、`registration` で表される {{domxref("ServiceWorkerRegistration")}} が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントを購読します。
+
+```js
+const subscriptions = [{ name: "cookie1", url: `/path1` }];
+await registration.cookies.subscribe(subscriptions);
+```
+
+{{domxref("ServiceWorkerRegistration")}} が既に何か Cookie を購読している場合は、{{domxref("CookieStoreManager.getSubscriptions()","getSubscriptions()")}} はもとの購読で用いるのと同じ形式のオブジェクトで表された Cookie のリストを返します。
+
+```js
+const subscriptions = await registration.cookies.getSubscriptions();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestoremanager/subscribe/index.md b/files/ja/web/api/cookiestoremanager/subscribe/index.md
new file mode 100644
index 00000000000000..90fab15adb995d
--- /dev/null
+++ b/files/ja/web/api/cookiestoremanager/subscribe/index.md
@@ -0,0 +1,61 @@
+---
+title: "CookieStoreManager: subscribe() メソッド"
+slug: Web/API/CookieStoreManager/subscribe
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store")}}{{SeeCompatTable}}
+
+{{domxref("CookieStoreManager")}} インターフェイスの **`subscribe()`** メソッドは、{{domxref("ServiceWorkerRegistration")}} に Cookie 変更イベントを購読させます。
+
+## 構文
+
+```js-nolint
+subscribe(subscriptions)
+```
+
+### 引数
+
+- `subscriptions`
+
+  - : 以下が格納されたオブジェクトです。
+
+    - `name`
+      - : Cookie の名前を表す文字列です。
+    - `url`
+      - : Cookie のスコープの URL を表す文字列です。サービスワーカーの登録のスコープより狭くすることができます。
+
+### 返値
+
+購読が完了したら {{jsxref("undefined")}} で解決する {{jsxref("Promise")}} です。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : `subscriptions` に渡された URL がサービスワーカーの登録の {{domxref("ServiceWorkerRegistration.scope","scope")}} とマッチしないとき投げられます。
+
+## 例
+
+この例では、`registration` で表される {{domxref("ServiceWorkerRegistration")}} が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントを購読します。
+
+```js
+const subscriptions = [{ name: "cookie1", url: `/path1` }];
+await registration.cookies.subscribe(subscriptions);
+```
+
+`subscribe()` メソッドに渡す URL は、サービスワーカーの登録のスコープより狭くすることができます。以下の例では、`/path/one/` を購読しているので、最初の Cookie の変更では変更イベントを受け取りますが、2 番目では受け取りません。
+
+```js
+registration.cookies.subscribe([{ name: "cookie1", url: "/path/one/" }]); // 購読
+cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/one/" }); // 変更イベントを受け取る
+cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/two/" }); // 変更イベントを受け取らない
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestoremanager/unsubscribe/index.md b/files/ja/web/api/cookiestoremanager/unsubscribe/index.md
new file mode 100644
index 00000000000000..ed57cf39f5ed20
--- /dev/null
+++ b/files/ja/web/api/cookiestoremanager/unsubscribe/index.md
@@ -0,0 +1,53 @@
+---
+title: "CookieStoreManager: unsubscribe() メソッド"
+slug: Web/API/CookieStoreManager/unsubscribe
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+---
+
+{{securecontext_header}}{{APIRef("Cookie Store")}}{{SeeCompatTable}}
+
+{{domxref("CookieStoreManager")}} インターフェイスの **`unsubscribe()`** メソッドは、{{domxref("ServiceWorkerRegistration")}} が以前購読していたイベントを受け取るのを止めます。
+
+## 構文
+
+```js-nolint
+unsubscribe(subscriptions)
+```
+
+### 引数
+
+- `subscriptions`
+
+  - : 以下が格納されたオブジェクトです。
+
+    - `name`
+      - : Cookie の名前を表す文字列です。
+    - `url`
+      - : この Cookie の購読に使用していたスコープの URL を表す文字列です。
+
+### 返値
+
+購読の解除が完了したら {{jsxref("undefined")}} で解決する {{jsxref("Promise")}} を返します。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : `subscriptions` に渡された URL がサービスワーカーの登録の {{domxref("ServiceWorkerRegistration.scope","scope")}} とマッチしないとき投げられます。
+
+## 例
+
+この例では、`registration` で表される {{domxref("ServiceWorkerRegistration")}} が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントの購読を解除します。
+
+```js
+const subscriptions = [{ name: "cookie1", url: `/path1` }];
+await registration.cookies.unsubscribe(subscriptions);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From fbb1ab86b46ae044441f4b67dd1e84d621db849d Mon Sep 17 00:00:00 2001
From: MikeCAT <mikecat@users.noreply.github.com>
Date: Thu, 21 Sep 2023 19:22:53 +0900
Subject: [PATCH 118/268] Update unsubscribe

---
 files/ja/web/api/cookiestoremanager/unsubscribe/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/cookiestoremanager/unsubscribe/index.md b/files/ja/web/api/cookiestoremanager/unsubscribe/index.md
index ed57cf39f5ed20..009adb9c4b7350 100644
--- a/files/ja/web/api/cookiestoremanager/unsubscribe/index.md
+++ b/files/ja/web/api/cookiestoremanager/unsubscribe/index.md
@@ -2,7 +2,7 @@
 title: "CookieStoreManager: unsubscribe() メソッド"
 slug: Web/API/CookieStoreManager/unsubscribe
 l10n:
-  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
+  sourceCommit: 010a96869db46dc6e1a9bc9808dc3a1588bf025a
 ---
 
 {{securecontext_header}}{{APIRef("Cookie Store")}}{{SeeCompatTable}}
@@ -28,7 +28,7 @@ unsubscribe(subscriptions)
 
 ### 返値
 
-購読の解除が完了したら {{jsxref("undefined")}} で解決する {{jsxref("Promise")}} を返します。
+サービスワーカーの購読の解除が完了したら {{jsxref("undefined")}} で解決する {{jsxref("Promise")}} を返します。
 
 ### 例外
 

From c3d9b9591b07f2372abb58eb8f05003e84c08240 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 02:29:42 +0900
Subject: [PATCH 119/268] =?UTF-8?q?2023/08/21=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/readablestream/index.md | 78 +++++++++++++++++++++---
 1 file changed, 70 insertions(+), 8 deletions(-)

diff --git a/files/ja/web/api/readablestream/index.md b/files/ja/web/api/readablestream/index.md
index 3055a3c79d484f..2df5bcffd6027d 100644
--- a/files/ja/web/api/readablestream/index.md
+++ b/files/ja/web/api/readablestream/index.md
@@ -2,26 +2,31 @@
 title: ReadableStream
 slug: Web/API/ReadableStream
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: e862ea87669db4c9f9d28d141613fbc7ce558838
 ---
 
 {{APIRef("Streams")}}
 
 `ReadableStream` は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、バイトデータの読み取り可能なストリームを表します。 [Fetch API](/ja/docs/Web/API/Fetch_API) は、 `ReadableStream` の具体的なインスタンスを{{domxref("Response")}} オブジェクトの {{domxref("Response.body", "body")}} プロパティを介して提供します。
 
-`ReadableStream` は{{glossary("Transferable objects","移譲可能オブジェクト")}}です。
+`ReadableStream` は[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)です。
 
 ## コンストラクター
 
 - {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}
   - : 指定されたハンドラーから読み取り可能なストリームのオブジェクトを作成して返します。
 
-## プロパティ
+## インスタンスプロパティ
 
 - {{domxref("ReadableStream.locked")}} {{ReadOnlyInline}}
   - : 論理値で、読み取り可能なストリームがリーダーにロックされているかどうかを返します。
 
-## メソッド
+## 静的メソッド
+
+- {{domxref("ReadableStream/from_static", "ReadableStream.from()")}} {{Experimental_Inline}}
+  - : 指定された反復可能オブジェクトまたは非同期反復可能オブジェクト（配列、集合、非同期ジェネレーターなど）から `ReadableStream` を返します。
+
+## インスタンスメソッド
 
 - {{domxref("ReadableStream.cancel()")}}
   - : ストリームがキャンセルされたときに解決する {{jsxref("Promise")}} を返します。このメソッドを呼び出されると、コンシューマーがストリームへの関心を失ったことを通知します。与えられた `reason` 引数は基になるソースに与えられ、使用する場合と使用しない場合があります。
@@ -34,6 +39,36 @@ l10n:
 - {{domxref("ReadableStream.tee()")}}
   - : `tee` メソッドは、この読み取り可能なストリームを [tee](https://streams.spec.whatwg.org/#tee-a-readable-stream) し、結果の 2 つの分岐を含む 2 要素配列を新しい {{domxref("ReadableStream")}} インスタンスとして返します。 これらの各ストリームは、同じ着信データを受信します。
 
+## 非同期の反復処理
+
+`ReadableStream` は[非同期反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols)を実装しています。
+これにより、 [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) 構文を使用して、ストリーム内の塊を非同期に反復処理することができます。
+
+```js
+const stream = new ReadableStream(getSomeSource());
+
+for await (const chunk of stream) {
+  // それぞれの 'chunk' で何かをする
+}
+```
+
+非同期イテレーターは、データがなくなるか、さもなければ終了するまでストリームを消費します。
+ループは `break`、`throw`、`return` ステートメントによって早期に終了することもできます。
+
+反復処理中は、他のコンシューマーがリーダーを取得できないようにストリームがロックされます（既にロックされているストリームを反復処理しようとすると `TypeError` が発生します）。
+このロックはループが終了すると解除されます。
+
+既定値では、ループを終了するとストリームも取り消される可能性があり、使用できなくなります。
+ループを抜けた後もストリームを使用し続けるには、ストリームの `values()` メソッドに `{ preventCancel: true }` を渡してください。
+
+```js
+for await (const chunk of stream.values({ preventCancel: true })) {
+  // 'chunk' で何かをする
+  break;
+}
+// ストリームのためのリーダーを取得し、読み取りを続ける ...
+```
+
 ## 例
 
 ### ストリームのフェッチ
@@ -54,9 +89,9 @@ fetch("https://www.example.org")
         function push() {
           // done は論理値で、value は Uint8Array です
           reader.read().then(({ done, value }) => {
-            // 読み取るデータはもうありませんか？
+            // 読み取るデータがもうない場合
             if (done) {
-              // データの送信が完了したことをブラウザーに伝えます
+              console.log("done", done);
               controller.close();
               return;
             }
@@ -84,7 +119,13 @@ fetch("https://www.example.org")
 
 ### 非同期イテレーターをストリームへ変換
 
-[（非同期）イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)を読み取り可能なストリームへ変換します。
+静的な {{domxref("ReadableStream/from_static", "from()")}} メソッドは、イテレーターを変換します。例えば {{jsxref("Array")}} や {{jsxref("Map")}}, [（非同期）イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_generators)を読み取り可能なストリームへ変換します。
+
+```js
+const myReadableStream = ReadableStream.from(iteratorOrAsyncIterator);
+```
+
+`from()` メソッドに対応していないブラウザーでは、代わりに自分自身で[独自の読み取り可能なストリーム](/ja/docs/Web/API/Streams_API/Using_readable_streams#creating_your_own_custom_readable_stream)を作成して同じ結果を得ることができます。
 
 ```js
 function iteratorToStream(iterator) {
@@ -102,7 +143,24 @@ function iteratorToStream(iterator) {
 }
 ```
 
-これは、イテレーターが非同期でも非同期でなくても動作します。
+### for await...of を用いたストリームの非同期反復処理
+
+この例では、 `fetch()` レスポンスを処理するために [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) ループを使用して、到着した塊を反復処理する方法を示します。
+
+```js
+const response = await fetch("https://www.example.org");
+let total = 0;
+
+// Iterate response.body (a ReadableStream) asynchronously
+for await (const chunk of response.body) {
+  // Do something with each chunk
+  // Here we just accumulate the size of the response.
+  total += chunk.length;
+}
+
+// Do something with the total
+console.log(total);
+```
 
 ## 仕様書
 
@@ -114,4 +172,8 @@ function iteratorToStream(iterator) {
 
 ## 関連情報
 
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API)
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
 - [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/): 読み取り可能なストリーム、書き込み可能なストリーム、および変換ストリームの基本的な視覚化。
+- [Web-streams-polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) または [sd-streams](https://github.com/stardazed/sd-streams) - ポリフィル

From d885c14d7b0eb57fdc3dc61f473463243d09b126 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 09:11:18 +0900
Subject: [PATCH 120/268] =?UTF-8?q?2023/07/19=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../readablestream/readablestream/index.md    | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/api/readablestream/readablestream/index.md b/files/ja/web/api/readablestream/readablestream/index.md
index c5a9b564f6202e..dcf725fa9fdb85 100644
--- a/files/ja/web/api/readablestream/readablestream/index.md
+++ b/files/ja/web/api/readablestream/readablestream/index.md
@@ -1,8 +1,9 @@
 ---
-title: ReadableStream()
+title: "ReadableStream: ReadableStream() コンストラクター"
+short-title: ReadableStream()
 slug: Web/API/ReadableStream/ReadableStream
 l10n:
-  sourceCommit: 2b8f5d9a29f00aea5d2edfa78d1fb90c51752858
+  sourceCommit: d0ba214db1913215e8fac13bc2d66013b148d50a
 ---
 
 {{APIRef("Streams")}}
@@ -25,11 +26,11 @@ new ReadableStream(underlyingSource, queuingStrategy)
 
   - : 構築されたストリームのインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 `underlyingSource` には次のものを含めることができます。
 
-    - `start`(controller) {{optional_inline}}
+    - `start` (controller) {{optional_inline}}
       - : これは、オブジェクトが構築されるとすぐに呼び出されるメソッドです。 このメソッドの内容は開発者が定義し、ストリームのソースへのアクセスを取得し、ストリーム機能を設定するために必要な他のすべての操作を行う必要があります。 このプロセスを非同期で実行する場合、成功または失敗を通知するプロミスを返すことができます。このメソッドに渡される `controller` 引数は、 {{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} を `type` プロパティの値に応じて指定します。開発者はこれを使用して、セットアップ中にストリームを制御できます。
-    - `pull`(controller) {{optional_inline}}
-      - : このメソッドは、開発者が定義し、ストリームの内部にあるチャンクのキューがいっぱいになっていない場合、最高水準点に達するまで繰り返し呼び出されます。 `pull()` がプロミスを返す場合、そのプロミスが満たされるまで再び呼び出されません。プロミスが拒否された場合、ストリームはエラーになります。このメソッドに渡される `controller` 引数は、 {{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} を `type` プロパティの値に応じて指定します。開発者はこれを使用して、より多くのチャンクが読み取られるようストリームを制御できます。
-    - `cancel`(reason) {{optional_inline}}
+    - `pull` (controller) {{optional_inline}}
+      - : このメソッドは、開発者が定義し、ストリームの内部にあるチャンクのキューがいっぱいになっていない場合、最高水準点に達するまで繰り返し呼び出されます。 `pull()` がプロミスを返す場合、そのプロミスが満たされるまで再び呼び出されません。プロミスが拒否された場合、ストリームはエラーになります。このメソッドに渡される `controller` 引数は、 {{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} を `type` プロパティの値に応じて指定します。開発者はこれを使用して、より多くのチャンクが読み取られるようストリームを制御できます。この関数は `start()` が完全に終了するまで呼び出されません。さらに、この関数は少なくとも一つの塊がキューに入れられるか、BYOB リクエストが履行された場合にのみ繰り返し呼び出されます。
+    - `cancel` (reason) {{optional_inline}}
       - : このメソッドは、開発者が定義し、ストリームがキャンセルされることをアプリが通知した場合に呼び出されます（例えば、{{domxref("ReadableStream.cancel()")}} が呼び出された場合）。 内容は、ストリームのソースへのアクセスを解放するために必要なことを行う必要があります。 このプロセスが非同期の場合、成功または失敗を通知するプロミスを返すことができます。 `reason` 引数には、ストリームがキャンセルされた理由を説明する文字列が含まれています。
     - `type` {{optional_inline}}
       - : このプロパティは、どの種類の読み取り可能なストリームが処理されるかを制御します。 `"bytes"` に設定された値が含まれている場合、渡されるコントローラーオブジェクトは、 BYOB （独自のバッファーを持ち込む）/バイトストリームを処理できる {{domxref("ReadableByteStreamController")}} になります。 含まれていない場合、渡されるコントローラーは {{domxref("ReadableStreamDefaultController")}} になります。
@@ -106,3 +107,10 @@ const stream = new ReadableStream({
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream")}}
+- {{domxref("ReadableByteStreamController")}}
+- {{domxref("ReadableStreamDefaultController")}}
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)

From d5fbd305f56a1137a56f590d5fb688678b07e825 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 21:54:39 +0900
Subject: [PATCH 121/268] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/readablestream/locked/index.md | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/readablestream/locked/index.md b/files/ja/web/api/readablestream/locked/index.md
index 326e22e0e5977c..d369d8b8b73a75 100644
--- a/files/ja/web/api/readablestream/locked/index.md
+++ b/files/ja/web/api/readablestream/locked/index.md
@@ -1,8 +1,9 @@
 ---
-title: ReadableStream.locked
+title: "ReadableStream: locked プロパティ"
+short-title: locked
 slug: Web/API/ReadableStream/locked
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
@@ -36,3 +37,8 @@ stream.locked;
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)

From 15e045efe5b2d6bab5031e0fe816d166ef626615 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 22:21:50 +0900
Subject: [PATCH 122/268] =?UTF-8?q?2023/08/21=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/readablestream/from_static/index.md   | 170 ++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 files/ja/web/api/readablestream/from_static/index.md

diff --git a/files/ja/web/api/readablestream/from_static/index.md b/files/ja/web/api/readablestream/from_static/index.md
new file mode 100644
index 00000000000000..2ee5f824a1e010
--- /dev/null
+++ b/files/ja/web/api/readablestream/from_static/index.md
@@ -0,0 +1,170 @@
+---
+title: "ReadableStream: from() 静的メソッド"
+short-title: from()
+slug: Web/API/ReadableStream/from_static
+l10n:
+  sourceCommit: e862ea87669db4c9f9d28d141613fbc7ce558838
+---
+
+{{APIRef("Streams")}}{{SeeCompatTable}}
+
+**`ReadableStream.from()`** は静的メソッドで、指定された反復可能または非同期反復可能オブジェクトから {{domxref("ReadableStream")}} を返します。
+
+このメソッドは、配列、設定、プロミスの配列、非同期ジェネレーター、`ReadableStreams`、Node.js の `readable` ストリームなど、反復可能オブジェクトや非同期反復可能オブジェクトを読み取り可能なストリームとしてラップするために使用することができます。
+
+## 構文
+
+```js-nolint
+ReadableStream.from(anyIterable)
+```
+
+### 引数
+
+- `anyIterable`
+  - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)または[非同期反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)オブジェクトです。
+
+### 返値
+
+{{domxref("ReadableStream")}} です。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : 渡された引数が反復可能オブジェクトまたは非同期反復可能オブジェクトではない（`@@iterator` または `@@asyncIterator` メソッドを定義していない）場合に発生します。
+    また、反復処理中に、次の反復処理の結果がオブジェクトでない場合、またはオブジェクトに解決されないプロミスである場合にも発生します。
+
+## 例
+
+### 非同期イテレーターを ReadableStream に変換
+
+このライブ例では、非同期イテレーターを `ReadableStream` に変換し、このストリームをどのように使用するかを示します。
+
+#### HTML
+
+HTMLはログ出力に用いる単一の要素 `<pre>` で構成されています。
+
+```html
+<pre id="log"></pre>
+```
+
+#### JavaScript
+
+例えば、このコードでは `log()` 関数を作成してログ HTML 要素に出力しています。
+
+```js
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+そして、静的メソッドが対応しているかどうかを調べ、対応していない場合はその結果をログ出力します。
+
+```js
+if (!ReadableStream.from) {
+  log("ReadableStream.from() is not supported");
+}
+```
+
+非同期反復可能オブジェクトは、 3 回呼び出されると 1、2、3 の値を返す匿名ジェネレーター関数です。
+これを `ReadableStream.from()` に渡して `ReadableStream` を作成します。
+
+```js
+// 非同期イテレーターを定義
+const asyncIterator = (async function* () {
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+
+// ReadableStream をイテレーターから作成
+const myReadableStream = ReadableStream.from(asyncIterator);
+```
+
+[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)では、ストリームを利用する何通りかの方法を示しています。
+以下のコードは `for ...await` ループを使用しています。このメソッドは最もシンプルだからです。
+ループのそれぞれの反復処理は、ストリームから現在の塊をログ出力します。
+
+```js
+consumeStream(myReadableStream);
+
+// Iterate a ReadableStream asynchronously
+async function consumeStream(readableStream) {
+  for await (const chunk of myReadableStream) {
+    // Do something with each chunk
+    // Here we just log the values
+    log(`chunk: ${chunk}`);
+  }
+}
+```
+
+#### 結果
+
+ストリームを消費したときの出力は下記のように表示されます（`ReadableStream.from()` に対応している場合）。
+
+{{EmbedLiveSample("Convert an async iterator to a ReadableStream","100%", "80")}}
+
+### 配列から ReadableStream への変換
+
+この例は `Array` を `ReadableStream` に変換する方法を示しています。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+
+if (!ReadableStream.from) {
+  log("ReadableStream.from() is not supported");
+}
+```
+
+#### JavaScript
+
+反復可能オブジェクトは単なる文字列の配列で、 `ReadableStream.from()` に渡して `ReadableStream` を作成します。
+
+```js
+// 野菜の名前の配列
+const vegetables = ["Carrot", "Broccoli", "Tomato", "Spinach"];
+
+// 配列から ReadableStream を作成
+const myReadableStream = ReadableStream.from(vegetables);
+```
+
+```js hidden
+consumeStream(myReadableStream);
+
+// ReadableStream を非同期に反復処理
+async function consumeStream(readableStream) {
+  for await (const chunk of myReadableStream) {
+    // 塊ごとに何かをする
+    // ここでは値をログ出力するだけ
+    log(`chunk: ${chunk}`);
+  }
+}
+```
+
+前回の例のログ出力とストリームの利用と同じ手法を使用しているので、ここでは表示させません。
+
+#### 結果
+
+出力結果は次の通りです。
+
+{{EmbedLiveSample("Convert an Array to a ReadableStream","100%", "100")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream")}}
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)

From b1ca79a1d9560b0b620c0ffd5d4fdba23fadbaf5 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 22:26:55 +0900
Subject: [PATCH 123/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/readablestream/cancel/index.md | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/api/readablestream/cancel/index.md b/files/ja/web/api/readablestream/cancel/index.md
index 33f5e170f57ffb..addf5184d633e9 100644
--- a/files/ja/web/api/readablestream/cancel/index.md
+++ b/files/ja/web/api/readablestream/cancel/index.md
@@ -1,8 +1,9 @@
 ---
-title: ReadableStream.cancel()
+title: "ReadableStream: cancel() メソッド"
+short-title: cancel()
 slug: Web/API/ReadableStream/cancel
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Streams")}}
@@ -61,7 +62,7 @@ fetch(url)
 
     return reader.read().then(function process(result) {
       if (result.done) {
-        console.log("一致が見つかりませんでした");
+        console.log("一致するものが見つかりませんでした");
         return;
       }
 
@@ -96,7 +97,7 @@ fetch(url)
         console.log("一致が見つかりましたが、さらにコンテキストが必要です…");
       }
 
-      // 読み続けます
+      // 読み続ける
       return reader.read().then(process);
     });
   })
@@ -115,3 +116,8 @@ fetch(url)
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)

From 8d15e4fc311e8844a5f5cd3febefff0882a9a016 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 22:32:29 +0900
Subject: [PATCH 124/268] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/readablestream/getreader/index.md | 15 ++++++++---
 .../api/readablestream/pipethrough/index.md   | 12 ++++++---
 .../ja/web/api/readablestream/pipeto/index.md | 25 ++++++++++++++++---
 files/ja/web/api/readablestream/tee/index.md  | 12 ++++++---
 4 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/api/readablestream/getreader/index.md b/files/ja/web/api/readablestream/getreader/index.md
index de507238384317..11e2b2103fe1d9 100644
--- a/files/ja/web/api/readablestream/getreader/index.md
+++ b/files/ja/web/api/readablestream/getreader/index.md
@@ -1,8 +1,9 @@
 ---
-title: ReadableStream.getReader()
+title: "ReadableStream: getReader() メソッド"
+short-title: getReader()
 slug: Web/API/ReadableStream/getReader
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
@@ -55,7 +56,7 @@ function fetchStream() {
   // read() は、値を受け取ったときに解決する promise を返します
   reader.read().then(function processText({ done, value }) {
     // 結果オブジェクトには2つのプロパティが含まれます。
-    // done  - ストリームがすべてのデータを既に提供している場合は true。
+    // done - ストリームがすべてのデータを既に提供している場合は true。
     // value - 一部のデータ。 done が true の場合、常に undefined。
     if (done) {
       console.log("Stream complete");
@@ -85,3 +86,11 @@ function fetchStream() {
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクター
+- {{domxref("ReadableStreamDefaultReader")}}
+- {{domxref("ReadableStreamBYOBReader")}}
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
diff --git a/files/ja/web/api/readablestream/pipethrough/index.md b/files/ja/web/api/readablestream/pipethrough/index.md
index 2a2d58cb6b6bfe..ef2dcd082ebf1f 100644
--- a/files/ja/web/api/readablestream/pipethrough/index.md
+++ b/files/ja/web/api/readablestream/pipethrough/index.md
@@ -1,8 +1,9 @@
 ---
-title: ReadableStream.pipeThrough()
+title: "ReadableStream: pipeThrough() メソッド"
+short-title: pipeThrough()
 slug: Web/API/ReadableStream/pipeThrough
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
@@ -65,7 +66,7 @@ pipeThrough(transformStream, options)
 次に、読み取り可能なストリームのコンテンツをログに記録し、`pipeThrough()` を使用して、グレースケールバージョンのストリームを作成する新しい関数に送信し、新しいストリームのコンテンツもログに記録します。
 
 ```js
-// 元の画像をフェッチ
+// 元の画像を取得
 fetch("png-logo.png")
   // その body を ReadableStream として取得
   .then((response) => response.body)
@@ -82,3 +83,8 @@ fetch("png-logo.png")
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクター
+- [パイプチェーン](/ja/docs/Web/API/Streams_API/Using_readable_streams#パイプチェーン)
diff --git a/files/ja/web/api/readablestream/pipeto/index.md b/files/ja/web/api/readablestream/pipeto/index.md
index e452cec3ea35ca..fbfb191c5339ee 100644
--- a/files/ja/web/api/readablestream/pipeto/index.md
+++ b/files/ja/web/api/readablestream/pipeto/index.md
@@ -1,8 +1,9 @@
 ---
-title: ReadableStream.pipeTo()
+title: "ReadableStream: pipeTo() メソッド"
+short-title: pipeTo()
 slug: Web/API/ReadableStream/pipeTo
 l10n:
-  sourceCommit: 2b8f5d9a29f00aea5d2edfa78d1fb90c51752858
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
@@ -27,7 +28,7 @@ pipeTo(destination, options)
 - `options` {{optional_inline}}
 
   - : `writable` ストリームにパイプ接続するときに使用するオプションです。
-    利用できるオプションは以下の通り。
+    利用できるオプションは以下の通りです。
 
     - `preventClose`
       - : これを `true` に設定すると、入力元の `ReadableStream` が閉じられても、出力先の `WritableStream` が閉じられることはなくなります。
@@ -63,6 +64,19 @@ fetch("png-logo.png")
   .then((rs) => rs.pipeTo(new FinalDestinationStream()));
 ```
 
+同じ例で {{jsxref("Operators/await", "await")}} 使用すると次のようになります。
+
+```js
+(async () => {
+// 元の画像を読み取る
+  const response = await fetch("png-logo.png");
+  // その body を ReadableStream として取得
+  response.body
+    .pipeThrough(new PNGTransformStream())
+    .pipeTo(new FinalDestinationStream());
+})();
+```
+
 ## 仕様書
 
 {{Specifications}}
@@ -70,3 +84,8 @@ fetch("png-logo.png")
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクター
+- [パイプチェーン](/ja/docs/Web/API/Streams_API/Using_readable_streams#パイプチェーン)
diff --git a/files/ja/web/api/readablestream/tee/index.md b/files/ja/web/api/readablestream/tee/index.md
index 99ad91ec98fc84..ee5962a587d4ff 100644
--- a/files/ja/web/api/readablestream/tee/index.md
+++ b/files/ja/web/api/readablestream/tee/index.md
@@ -1,8 +1,9 @@
 ---
-title: ReadableStream.tee()
+title: "ReadableStream: tee() メソッド"
+short-title: tee()
 slug: Web/API/ReadableStream/tee
 l10n:
-  sourceCommit: 2b8f5d9a29f00aea5d2edfa78d1fb90c51752858
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
@@ -53,7 +54,7 @@ function fetchStream(stream, list) {
   // read() は、値を受け取ったときに解決するプロミスを返します
   reader.read().then(function processText({ done, value }) {
     // 結果オブジェクトには 2 つのプロパティが含まれます。
-    // done  - ストリームがすべてのデータを既に提供している場合は true。
+    // done - ストリームがすべてのデータを既に提供している場合は true。
     // value - 一部のデータ。 done が true の場合、常に undefined。
     if (done) {
       console.log("Stream complete");
@@ -80,3 +81,8 @@ function fetchStream(stream, list) {
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} コンストラクター
+- [ストリームの分岐](/ja/docs/Web/API/Streams_API/Using_readable_streams#ストリームの分岐)

From b56dc441e244471aa56ff19afd9b8262c7c71121 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 23:18:43 +0900
Subject: [PATCH 125/268] =?UTF-8?q?=E3=83=95=E3=83=A9=E3=82=B0=E3=83=A1?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/readablestream/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/readablestream/index.md b/files/ja/web/api/readablestream/index.md
index 2df5bcffd6027d..21332d071e82f0 100644
--- a/files/ja/web/api/readablestream/index.md
+++ b/files/ja/web/api/readablestream/index.md
@@ -41,7 +41,7 @@ l10n:
 
 ## 非同期の反復処理
 
-`ReadableStream` は[非同期反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols)を実装しています。
+`ReadableStream` は[非同期反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)を実装しています。
 これにより、 [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) 構文を使用して、ストリーム内の塊を非同期に反復処理することができます。
 
 ```js

From 9bcef288c62019f7b5f1bbf26ab25354c168ce27 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 20 Sep 2023 23:19:41 +0900
Subject: [PATCH 126/268] Update
 files/ja/web/api/readablestream/pipeto/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/ja/web/api/readablestream/pipeto/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/readablestream/pipeto/index.md b/files/ja/web/api/readablestream/pipeto/index.md
index fbfb191c5339ee..51fb0382af9ba6 100644
--- a/files/ja/web/api/readablestream/pipeto/index.md
+++ b/files/ja/web/api/readablestream/pipeto/index.md
@@ -68,7 +68,7 @@ fetch("png-logo.png")
 
 ```js
 (async () => {
-// 元の画像を読み取る
+  // 元の画像を読み取る
   const response = await fetch("png-logo.png");
   // その body を ReadableStream として取得
   response.body

From 12c6ee00cda6f61b82d0f70de06fe61cf7023aaf Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 12:36:06 +0900
Subject: [PATCH 127/268] =?UTF-8?q?=E7=94=A8=E8=AA=9E=E3=81=AE=E7=B5=B1?=
 =?UTF-8?q?=E4=B8=80=EF=BC=9A=E5=A1=8A=E2=86=92=E3=83=81=E3=83=A3=E3=83=B3?=
 =?UTF-8?q?=E3=82=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/readablestream/from_static/index.md    | 4 ++--
 files/ja/web/api/readablestream/index.md                | 4 ++--
 files/ja/web/api/readablestream/readablestream/index.md | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/files/ja/web/api/readablestream/from_static/index.md b/files/ja/web/api/readablestream/from_static/index.md
index 2ee5f824a1e010..5a35406a0e81fe 100644
--- a/files/ja/web/api/readablestream/from_static/index.md
+++ b/files/ja/web/api/readablestream/from_static/index.md
@@ -83,7 +83,7 @@ const myReadableStream = ReadableStream.from(asyncIterator);
 
 [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)では、ストリームを利用する何通りかの方法を示しています。
 以下のコードは `for ...await` ループを使用しています。このメソッドは最もシンプルだからです。
-ループのそれぞれの反復処理は、ストリームから現在の塊をログ出力します。
+ループのそれぞれの反復処理は、ストリームから現在のチャンクをログ出力します。
 
 ```js
 consumeStream(myReadableStream);
@@ -141,7 +141,7 @@ consumeStream(myReadableStream);
 // ReadableStream を非同期に反復処理
 async function consumeStream(readableStream) {
   for await (const chunk of myReadableStream) {
-    // 塊ごとに何かをする
+    // チャンクごとに何かをする
     // ここでは値をログ出力するだけ
     log(`chunk: ${chunk}`);
   }
diff --git a/files/ja/web/api/readablestream/index.md b/files/ja/web/api/readablestream/index.md
index 21332d071e82f0..7adfb3a1ebba46 100644
--- a/files/ja/web/api/readablestream/index.md
+++ b/files/ja/web/api/readablestream/index.md
@@ -42,7 +42,7 @@ l10n:
 ## 非同期の反復処理
 
 `ReadableStream` は[非同期反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)を実装しています。
-これにより、 [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) 構文を使用して、ストリーム内の塊を非同期に反復処理することができます。
+これにより、 [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) 構文を使用して、ストリーム内のチャンクを非同期に反復処理することができます。
 
 ```js
 const stream = new ReadableStream(getSomeSource());
@@ -145,7 +145,7 @@ function iteratorToStream(iterator) {
 
 ### for await...of を用いたストリームの非同期反復処理
 
-この例では、 `fetch()` レスポンスを処理するために [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) ループを使用して、到着した塊を反復処理する方法を示します。
+この例では、 `fetch()` レスポンスを処理するために [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) ループを使用して、到着したチャンクを反復処理する方法を示します。
 
 ```js
 const response = await fetch("https://www.example.org");
diff --git a/files/ja/web/api/readablestream/readablestream/index.md b/files/ja/web/api/readablestream/readablestream/index.md
index dcf725fa9fdb85..fa6a52de537346 100644
--- a/files/ja/web/api/readablestream/readablestream/index.md
+++ b/files/ja/web/api/readablestream/readablestream/index.md
@@ -29,7 +29,7 @@ new ReadableStream(underlyingSource, queuingStrategy)
     - `start` (controller) {{optional_inline}}
       - : これは、オブジェクトが構築されるとすぐに呼び出されるメソッドです。 このメソッドの内容は開発者が定義し、ストリームのソースへのアクセスを取得し、ストリーム機能を設定するために必要な他のすべての操作を行う必要があります。 このプロセスを非同期で実行する場合、成功または失敗を通知するプロミスを返すことができます。このメソッドに渡される `controller` 引数は、 {{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} を `type` プロパティの値に応じて指定します。開発者はこれを使用して、セットアップ中にストリームを制御できます。
     - `pull` (controller) {{optional_inline}}
-      - : このメソッドは、開発者が定義し、ストリームの内部にあるチャンクのキューがいっぱいになっていない場合、最高水準点に達するまで繰り返し呼び出されます。 `pull()` がプロミスを返す場合、そのプロミスが満たされるまで再び呼び出されません。プロミスが拒否された場合、ストリームはエラーになります。このメソッドに渡される `controller` 引数は、 {{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} を `type` プロパティの値に応じて指定します。開発者はこれを使用して、より多くのチャンクが読み取られるようストリームを制御できます。この関数は `start()` が完全に終了するまで呼び出されません。さらに、この関数は少なくとも一つの塊がキューに入れられるか、BYOB リクエストが履行された場合にのみ繰り返し呼び出されます。
+      - : このメソッドは、開発者が定義し、ストリームの内部にあるチャンクのキューがいっぱいになっていない場合、最高水準点に達するまで繰り返し呼び出されます。 `pull()` がプロミスを返す場合、そのプロミスが満たされるまで再び呼び出されません。プロミスが拒否された場合、ストリームはエラーになります。このメソッドに渡される `controller` 引数は、 {{domxref("ReadableStreamDefaultController")}} または {{domxref("ReadableByteStreamController")}} を `type` プロパティの値に応じて指定します。開発者はこれを使用して、より多くのチャンクが読み取られるようストリームを制御できます。この関数は `start()` が完全に終了するまで呼び出されません。さらに、この関数は少なくとも一つのチャンクがキューに入れられるか、BYOB リクエストが履行された場合にのみ繰り返し呼び出されます。
     - `cancel` (reason) {{optional_inline}}
       - : このメソッドは、開発者が定義し、ストリームがキャンセルされることをアプリが通知した場合に呼び出されます（例えば、{{domxref("ReadableStream.cancel()")}} が呼び出された場合）。 内容は、ストリームのソースへのアクセスを解放するために必要なことを行う必要があります。 このプロセスが非同期の場合、成功または失敗を通知するプロミスを返すことができます。 `reason` 引数には、ストリームがキャンセルされた理由を説明する文字列が含まれています。
     - `type` {{optional_inline}}

From f7c13ebf9c2d1caa6a6e2d1f7345d263dac580dc Mon Sep 17 00:00:00 2001
From: KyeongSang Yu <yukyeongsang@gmail.com>
Date: Sun, 24 Sep 2023 14:04:28 +0900
Subject: [PATCH 128/268] [ko] add translation to geometry interfaces in Web
 API (#15528)

add translation to geometry interfaces
---
 files/ko/web/api/geometry_interfaces/index.md | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 files/ko/web/api/geometry_interfaces/index.md

diff --git a/files/ko/web/api/geometry_interfaces/index.md b/files/ko/web/api/geometry_interfaces/index.md
new file mode 100644
index 00000000000000..1960230308da2d
--- /dev/null
+++ b/files/ko/web/api/geometry_interfaces/index.md
@@ -0,0 +1,55 @@
+---
+title: Geometry interfaces
+slug: Web/API/Geometry_interfaces
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
+---
+
+{{DefaultAPISidebar("Geometry Interfaces")}}
+
+**Geometry interfaces**는 3D 및 2D 그래픽 작업, 특히 점, 사각형, 사변형 및 [변환 행렬(transformation matrices)](/ko/docs/Web/API/WebGL_API/Matrix_math_for_the_web#transformation_matrices)(그래픽 이동/이동, 크기 조정, 회전, 기울이기/가르기/비틀기 및 뒤집기 작업과 이러한 작업의 곱하기/연결 및 반전/실행 취소 작업)을 위한 인터페이스를 제공하는 CSS 모듈입니다.
+
+웹 개발자는 항상 geometry interfaces를 직접 사용하지 않고 뒤에서 이를 사용하는 다른 기능, 즉 [CSS Transforms](/ko/docs/Web/CSS/CSS_transforms)의 일부, [Canvas API](/ko/docs/Web/API/Canvas_API) 및 [WebXR Device API](/ko/docs/Web/API/WebXR_Device_API), (더 직접적으로는) {{domxref('VideoFrame.visibleRect')}}와 {{domxref('Element.getClientRects()')}}, {{domxref('Element.getBoundingClientRect()')}}를 사용합니다.
+
+## 인터페이스
+
+- {{domxref('DOMMatrix')}}
+  - : 그래픽 이동/이동, 크기 조정, 회전, 기울이기/가르기/비틀기 및 뒤집기 작업과 이러한 작업의 곱하기/연결 및 반전/실행 취소 작업을 위한 [변환 행렬](/ko/docs/Web/API/WebGL_API/Matrix_math_for_the_web#transformation_matrices)을 나타냅니다.
+- {{domxref('DOMMatrixReadOnly')}}
+  - : {{domxref('DOMMatrix')}}의 읽기 전용 버전.
+- {{domxref('DOMPoint')}}
+  - : 좌표계의 2D 또는 3D 점을 나타내며, 최대 3차원의 좌표 값과 선택적 원근값을 포함합니다.
+- {{domxref('DOMPointReadOnly')}}
+  - : {{domxref('DOMPoint')}}의 읽기 전용 버전.
+- {{domxref('DOMQuad')}}
+  - : [사변형(quadrilateral)](https://en.wikipedia.org/wiki/Quadrilateral)의 모서리를 정의하는 네 개의 {{domxref('DOMPoint')}} 객체 모음을 나타냅니다.
+- {{domxref('DOMRect')}}
+  - : 직사각형의 크기와 위치를 나타냅니다.
+- {{domxref('DOMRectReadOnly')}}
+  - : {{domxref('DOMRect')}}의 읽기 전용 버전.
+
+## 예제
+
+{{domxref('Path2D.addPath()')}} 및 {{domxref('CanvasPattern.setTransform()')}} 문서에는 일부 Geometry interfaces를 사용하는 예제가 있습니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref('Path2D.addPath()')}}
+- {{domxref('CanvasPattern.setTransform()')}}
+- {{domxref('CanvasRenderingContext2D.getTransform()')}}
+- {{domxref('CanvasRenderingContext2D.setTransform()')}}
+- {{domxref('CSSTransformValue.toMatrix()')}}
+- {{domxref('CSSTransformComponent.toMatrix()')}}
+- {{domxref('Element.getBoundingClientRect()')}}
+- {{domxref('Element.getClientRects()')}}
+- {{domxref('VideoFrame.visibleRect')}}
+- {{domxref('XRLightEstimate')}}
+- {{domxref('XRRigidTransform')}}

From 5bf80e39d15033632762345ed807cb6ec7a668fd Mon Sep 17 00:00:00 2001
From: Javien Lee <kraccoon@kakao.com>
Date: Sun, 24 Sep 2023 14:10:03 +0900
Subject: [PATCH 129/268] ko: Firefox security guidelines (#15361)

sync with e74627e6fd9ba19696b918c2bdddfff8aa160787
---
 .../firefox_security_guidelines/index.md      | 162 ++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 files/ko/web/security/firefox_security_guidelines/index.md

diff --git a/files/ko/web/security/firefox_security_guidelines/index.md b/files/ko/web/security/firefox_security_guidelines/index.md
new file mode 100644
index 00000000000000..a609c743ff005f
--- /dev/null
+++ b/files/ko/web/security/firefox_security_guidelines/index.md
@@ -0,0 +1,162 @@
+---
+title: Firefox 보안 지침
+slug: Web/Security/Firefox_Security_Guidelines
+l10n:
+  sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787
+---
+
+{{QuickLinksWithSubpages("/ko/docs/Web/Security")}}
+
+## 목적
+
+이 문서는 Firefox와 Thunderbird와 같이, 모든 클라이언트 애플리케이션에 일반적으로 적용되는 보안 지침을 간략하게 설명합니다.
+
+## 안전한 코딩 원칙
+
+애플리케이션이 아래 [OWASP 보안 코딩 원칙](https://wiki.owasp.org/index.php/Secure_Coding_Principles)을 따르는지 확인하십시오.
+
+1. 공격 노출 영역 최소화
+2. 보안 기본값 설정
+3. 최소 권한의 원칙
+4. 심층 방어의 원칙
+5. 안전한 실패
+6. 서비스를 믿지 마라
+7. 보안을 단순하게 유지하라
+8. 보안 문제를 올바르게 해결하라
+
+## 입력 유효성 검사
+
+1. 애플리케이션이 사용자 입력을 받나요?
+
+   1. 사용자 데이터를 받을 때 적정한 최댓값이 적용되는지 확인하기 위해 입력 위치를 샘플링하여 확인하세요.
+   2. 애플리케이션이 허용된 문자 집합만 입력받는지 확인하기 위해 입력 위치를 샘플링하여 확인하세요.
+   3. 거부 목록 대신 허용 목록을 사용하는지 확인하세요.
+
+2. 애플리케이션이 어떤 방식으로든 사용자의 입력을 화면에 표시하나요?
+
+   1. 응답에서 사용자가 제공했던 콘텐츠가 올바르게 인코딩되었는지 확인하기 위해 입력과 출력 위치를 샘플링하여 확인하세요.
+
+## Chrome JS - 위험한 함수
+
+다음 함수 중 사용하고 있는 것이 있나요?
+
+그렇다면 함수가 안전한지 확인하고 더 나은 대안이 있는지 확인하세요.
+
+| 이름                     | 위험 수준 | 문제                                                                               | 해결 방법                                                   |
+| ------------------------ | --------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| eval                     | 매우 높음 | JavaScript 파서를 호출하기 때문에, 신뢰할 수 없는 입력과 함께 사용하면 위험합니다. | 가능하다면 항상 eval을 사용하지 마세요.                     |
+| setTimeout(string, time) | 매우 높음 | eval처럼 동작합니다.                                                               | setTimeout(function, time, param1, param2, …)을 사용하세요. |
+
+## C++ - 위험한 함수
+
+다음 함수 중 사용하고 있는 것이 있나요?
+
+그렇다면 함수가 안전한지 확인하고 더 나은 대안이 있는지 확인하세요.
+
+| 이름                                                  | 위험 수준 | 문제                                       | 해결 방법                                                                                                                                                                                                                                          |
+| ----------------------------------------------------- | --------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| gets                                                  | 매우 높음 | 경계 검사 없음                             | gets를 사욜하지 마세요. 대신 fgets를 사용하세요.                                                                                                                                                                                                   |
+| strcpy                                                | 매우 높음 | 경계 검사 없음                             | strcpy는 소스 문자열이 상수이고, 대상이 이를 수용할 만큼 큰 경우에만 안전합니다. 그렇지 않으면 strncpy를 사용하세요.                                                                                                                               |
+| sprintf                                               | 매우 높음 | 경계 검사 없음, 형식 문자열 공격           | sprintf는 안전하게 사용하기 매우 어렵습니다. 대신 snprintf를 사용하세요.                                                                                                                                                                           |
+| scanf, sscanf                                         | 높음      | 경계 검사가 없을 수 있음, 형식 문자열 공격 | 모든 % 지시어가 해당 인수의 유형과 일치하는지 확인하세요. 경계 검사 없이 '%s' 지시문을 사용하지 마세요. x가 해당 인수의 버퍼 크기인 '%xs'를 사용하세요. 형식 문자열에 신뢰할 수 없고 검증되지 않은 데이터를 사용하지 마세요.                       |
+| strcat                                                | 높음      | 경계 검사 없음                             | 입력 크기가 잘 알려져 있지 않고, 고정되어 있지 않으면 strncat를 대신 사용하세요.                                                                                                                                                                   |
+| printf, fprintf, snprintf, vfprintf, vsprintf, syslog | 높음      | 형식 문자열 공격                           | 형식 문자열에 신뢰할 수 없고 검증되지 않은 데이터를 사용하지 마세요. 형식 문자열이 웹 콘텐츠나 사용자 입력의 영향을 받을 수 있는 경우, 이러한 함수를 호출하기 전에 % 지시문의 적절한 수와 유형을 확인하세요. 대상 크기 인수가 올바른지 확인하세요. |
+| strncpy, fgets, strncat                               | 낮음      | null 종료가 없을 수 있음                   | 항상 대상 버퍼를 null 통해 명시적으로 종료하세요. 크기 인수가 올바른지 확인하세요. null 문자를 추가할 공간을 대상 버퍼에 남겨두세요!                                                                                                               |
+
+## URL
+
+1. 애플리케이션이 신뢰할 수 없는 데이터를 사용하여 URL을 구성하나요?
+
+   - 이런 데이터는 사용하기 전에 불필요한 부분은 적절히 삭제하고, 인코딩하세요.
+   - 사용하거나 저장하기 전에 이런 URL에서 얻은 데이터를 확인하세요.
+
+2. 애플리케이션이 리다이렉션을 따르나요?
+
+   - 원본 요청 URI뿐만 아니라 리다이렉션에 대해서도 보안 검사가 수행되는지 확인하세요.
+
+## 보안 제어
+
+1. 애플리케이션이 적절한 권한 검사를 구현하나요?
+
+   - API가 사용 가능한 곳에서 사용 되는지 확인하세요. (예: shouldload, 등)
+   - 애플리케이션이 안전하게 실패하는지 확인하세요.
+
+## 원격 시스템 접근
+
+1. 애플리케이션이 원격 시스템에 접근하나요?
+
+- TLS를 사용하지 않을 타당한 이유가 없는 한 TLS를 사용하세요.
+- 사용자 동의 없이 사용자 정보가 전송되지 않도록 하세요.
+
+## 정보 저장
+
+1. 파일 저장소
+
+   1. 애플리케이션은 생성된 모든 파일이 허용된 경로에 있는지 확인해야 합니다.
+   2. 파일 이름이 신뢰할 수 없는 데이터로 만들어지나요?
+
+      - 데이터가 적절하게 인코딩되었는지 확인하세요.
+
+   3. 파일이 허용 가능한 유형인지 확인하세요.
+   4. 파일은 어느 정도의 크기 제한을 초과할 수 없습니다.
+
+2. 데이터베이스 저장소
+
+   1. 데이터베이스로 전송된 신뢰할 수 없는 정보가 적절하게 삭제되었는지 확인하세요.
+   2. 가능하다면 주입 공격을 방지하기 위해 타입 안전 매개변수화를 사용하세요.
+
+3. 민감한 정보
+
+   1. 보안에 민감한 정보나 개인 정보가 적절하게 보호되는지 확인하세요(암호화 구획 참조).
+   2. 자격 증명(비밀번호 등)은 특별히 주의를 기울여야 합니다. 이러한 유형의 정보로 작업할 때 무엇을 해야 할지 확실하지 않다면, 누군가에게 물어볼 가치가 충분히 있습니다.
+
+4. 로그
+
+   1. 위의 규칙은 일반적인 애플리케이션 데이터뿐만 아니라 로그에도 적용된다는 점을 잊지 마세요.
+
+## 암호화
+
+1. 애플리케이션이 암호화를 사용하나요?
+2. 사용된 알고리즘은 인정된 표준인가요?
+
+## 서비스 거부
+
+1. 애플리케이션이 아래 항목에 대한 고갈을 보호하는지 확인하세요.
+
+   1. 시스템 메모리
+   2. 저장소
+
+## 보안 경고
+
+1. 애플리케이션이 사용자에게 보안 경고를 표시하나요?
+2. 명확하게 이해할 수 있고 적절한 경고인가요?
+3. 신뢰할 수 없는 데이터가 사용자에게 보내지는 메시지의 의미를 바꿀 수 있나요?
+
+   - 사용자 입력이 메시지의 의미를 변경할 수 있나요?
+   - 사용자 입력이 시스템 메시지를 화면에서 강제로 표시되지 않도록 할 수 있나요?
+   - 사용자 입력에 메시지의 의미를 변경할 수 있는 특수 문자가 포함될 수 있나요? (예: 쓰기를 오른쪽에서 왼쪽으로 재설정하는 유니코드 U+202E)
+
+4. 공격자가 대화 상자의 타이밍을 이용하여 사용자가 의도하지 않은 항목을 클릭하도록 속일 수 있습니까?
+
+## 정보 공개
+
+1. 애플리케이션이 사용자를 위험에 빠뜨리게할 수 있는 정보를 공개하나요?
+2. 애플리케이션이 공개할 필요가 없는 정보를 공개하나요?
+3. 애플리케이션이 사용자를 놀라게 하거나 화나게 할 수 있는 내용을 공개하나요?
+
+## 프런트엔드
+
+1. XUL과 HTML UI 요소를 생성하는 데 안전한 메커니즘이 사용되나요?
+
+   - 예를 들어, innerHTML이나 이와 유사한 기능 대신 createTextNode를 사용하세요.
+
+2. 애플리케이션이 자체 docshell(탭, iframe)을 생성하나요?
+
+   - docshell의 유형을 명시적으로 나타내는지 확인하세요. 예: iframe.setAttribute("type", "content")
+
+## 참고서
+
+- [웹 보안 검증](https://wiki.mozilla.org/WebAppSec/Web_Security_Verification)
+- [Mozilla 보안 컴토와 모범 사례](https://www-archive.mozilla.org/projects/security/components/reviewguide.html)
+- [Mozilla와 확장 프로그램 개발자를 위한 보안 팁](https://www.squarefree.com/securitytips/mozilla-developers.html)
+- [OWASP Secure Coding Practices - 빠른 참고 안내서](https://owasp.org/www-pdf-archive/OWASP_SCP_Quick_Reference_Guide_v2.pdf)

From af7b15e379830ea98d35a79ea05a11f954c75769 Mon Sep 17 00:00:00 2001
From: Shane <shanewestlife@outlook.com>
Date: Sun, 24 Sep 2023 15:59:23 +0800
Subject: [PATCH 130/268] zh-cn: update `rel=preload` page (#16030)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../web/html/attributes/rel/preload/index.md  | 223 +++++++++++++++++-
 1 file changed, 221 insertions(+), 2 deletions(-)

diff --git a/files/zh-cn/web/html/attributes/rel/preload/index.md b/files/zh-cn/web/html/attributes/rel/preload/index.md
index 3396bbfe63d3ad..fc9e57ec730e50 100644
--- a/files/zh-cn/web/html/attributes/rel/preload/index.md
+++ b/files/zh-cn/web/html/attributes/rel/preload/index.md
@@ -5,9 +5,224 @@ slug: Web/HTML/Attributes/rel/preload
 
 {{HTMLSidebar}}
 
-关键字 **`preload`** 作为元素 {{HTMLElement("link")}} 的属性 [`rel`](/zh-CN/docs/Web/HTML/Element/link#rel) 的值，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源。
+{{HTMLElement("link")}} 元素的 [`rel`](/zh-CN/docs/Web/HTML/Element/link#rel) 属性的 `preload` 值允许你在 HTML 的 {{htmlelement("head")}} 中声明获取请求，指定页面很快就需要的资源，这些资源是你希望在页面生命周期的早期就开始加载的，早于浏览器的主要渲染机制启动。这可以确保它们更早可用，并且不太可能阻塞页面的渲染，从而提高性能。尽管名称中包含“load”一词，但它并不加载和执行脚本，而只是安排脚本以更高的优先级进行下载和缓存。
 
-更多细节见[通过 rel="preload"进行内容预加载](/zh-CN/docs/Web/HTML/Preloading_content)。
+## 基础知识
+
+你最常使用 `<link>` 标签来加载一个 CSS 文件，以为你的页面添加样式：
+
+```html
+<link rel="stylesheet" href="styles/main.css" />
+```
+
+然而，在这里，我们将使用值为 `preload` 的 `rel` 属性，这会将 `<link>` 标签转变成任何我们想要的资源的预加载器。你还需要指定：
+
+- [`href`](/zh-CN/docs/Web/HTML/Element/link#href) 属性中的资源路径。
+- [`as`](/zh-CN/docs/Web/HTML/Element/link#as) 属性中的资源类型。
+
+一个简单的示例可能如下所示（查看我们的 [JS 和 CSS 示例源码](https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css)，以及[在线演示](https://mdn.github.io/html-examples/link-rel-preload/js-and-css/)）
+
+```html
+<head>
+  <meta charset="utf-8" />
+  <title>JS and CSS preload example</title>
+
+  <link rel="preload" href="style.css" as="style" />
+  <link rel="preload" href="main.js" as="script" />
+
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <h1>bouncing balls</h1>
+  <canvas></canvas>
+
+  <script src="main.js" defer></script>
+</body>
+```
+
+在这里，我们预加载我们的 CSS 和 JavaScript 文件，以便它们在稍后渲染页面时立即可用。这个示例可能过于简单，因为浏览器很可能在与预加载的 HTML 块中相同的位置发现了 `<link rel="stylesheet">` 和 `<script>` 元素，但在稍后发现资源并且资源越大时，好处就会更加明显。例如：
+
+- 从 CSS 内部指向的资源，如字体或图像。
+- JavaScript 可以请求的资源，如 JSON、导入的脚本或 Web Worker。
+- 较大的图像和视频文件。
+
+`preload` 还有其他优点。使用 `as` 来指定要预加载的内容类型允许浏览器：
+
+- 更准确地优先加载资源。
+- 将资源存储在缓存中以备将来使用，在适当的情况下复用资源。
+- 对资源应用正确的[内容安全策略](/zh-CN/docs/Web/HTTP/CSP)。
+- 为其设置正确的 {{HTTPHeader("Accept")}} 请求标头。
+
+### 什么类型的内容可以被预加载？
+
+可以预加载多种类型的内容。`as` 属性可能的值包括：
+
+- `audio`：音频文件，通常在 {{htmlelement("audio")}} 中使用。
+- `document`：用于嵌入在 {{htmlelement("frame")}} 或 {{htmlelement("iframe")}} 中的 HTML 文档。
+- `embed`：用于嵌入在 {{htmlelement("embed")}} 元素中的资源。
+- `fetch`：通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer、WebAssembly 二进制文件或 JSON 文件。
+- `font`：字体文件。
+- `image`：图像文件。
+- `object`：要嵌入在 {{htmlelement("object")}} 元素中的资源。
+- `script`：JavaScript 文件。
+- `style`：CSS 样式表。
+- `track`：WebVTT 文件。
+- `worker`：JavaScript web worker 或 shared worker。
+- `video`：视频文件，通常在 {{htmlelement("video")}} 中使用。
+
+> **备注：** 预加载 `font` 和 `fetch` 资源需要设置 `crossorigin` 属性；请参阅下文的[启用 CORS 的获取请求](#启用_cors_的获取请求)。
+
+> **备注：** 关于这些值以及它们所期望被使用的 web 功能的更多细节可以在预加载规范中找到——请参见[链接元素扩展](https://w3c.github.io/preload/#link-element-extensions)。此外，请注意，`as` 属性可以接受的值的完整列表受 Fetch 规范的约束——请参见[请求目标](https://fetch.spec.whatwg.org/#concept-request-destination)。
+
+## 包括 MIME 类型
+
+`<link>` 元素可以接受一个 [`type`](/zh-CN/docs/Web/HTML/Element/link#type) 属性，其中包含元素指向的资源的 MIME 类型。这在预加载资源时特别有用——浏览器将使用 `type` 属性的值来确定是否支持该资源，如果不支持，则会忽略它，仅在支持时才会下载它。
+
+你可以在我们的视频示例中看到这个示例（查看[完整的源代码](https://github.com/mdn/html-examples/tree/master/link-rel-preload/video)，以及[在线版本](https://mdn.github.io/html-examples/link-rel-preload/video/)），以下是其中一部分代码片段。这展示了一般情况下预加载背后的核心行为。
+
+```html
+<head>
+  <meta charset="utf-8" />
+  <title>Video preload example</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4" />
+    <source src="sintel-short.webm" type="video/webm" />
+    <p>
+      Your browser doesn't support HTML video. Here is a
+      <a href="sintel-short.mp4">link to the video</a> instead.
+    </p>
+  </video>
+</body>
+```
+
+上面的示例代码只会在支持的浏览器中预加载 `video/mp4` 格式的视频，对于那些浏览器中支持 `video/mp4` 格式的用户，实际上会使用 `video/mp4` 格式的视频（因为它是首个指定的 {{htmlelement("source")}}）。这可以让拥有支持 `video/mp4` 格式的浏览器的用户获得更流畅和更响应的视频播放体验。
+
+请注意，对于那些浏览器既支持 `video/mp4` 格式又支持 `video/webm` 格式的用户，如果在上述代码中还指定了一个 `<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">` 元素，那么两种格式的视频（`video/mp4` 和 `video/webm`）*都*会被预加载，尽管实际上只有其中一种会被使用。
+
+因此，不建议为同一资源的多种类型指定预加载。相反，最佳实践是仅为大多数用户可能实际使用的类型指定预加载。这就是为什么上面示例中的代码没有为 `video/webm` 视频指定预加载的原因。
+
+然而，缺少预加载并不会阻止那些需要的用户实际使用 `video/webm` 视频：对于那些浏览器不支持 `video/mp4` 但支持 `video/webm` 的用户，上述示例中的代码仍然会使 `video/webm` 视频被使用——但它这样做的同时也不会导致对大多数其他用户不必要地进行预加载。
+
+## 启用 CORS 的获取请求
+
+在预加载启用 [CORS](/zh-CN/docs/Web/HTTP/CORS) 的资源（例如 [`fetch()`](/zh-CN/docs/Web/API/fetch)、[`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest) 或[字体](/zh-CN/docs/Web/CSS/@font-face)）时，需要特别注意在你的 [`<link>`](/zh-CN/docs/Web/HTML/Element/link) 元素上设置 [`crossorigin`](/zh-CN/docs/Web/HTML/Element/link#crossorigin) 属性。该属性需要设置为与资源的 CORS 和凭据模式相匹配，即使获取请求不跨域也需要设置。
+
+如上所述，其中一个适用的有趣情况是字体文件。由于各种原因，这些文件必须使用匿名模式的 CORS 进行获取（参见[字体获取要求](https://drafts.csswg.org/css-fonts/#font-fetching-requirements)）。
+
+让我们以这个案例作为示例。你可以在 GitHub 上查看完整的[示例源代码](https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts)（也可以[在线查看](https://mdn.github.io/html-examples/link-rel-preload/fonts/)）：
+
+```html
+<head>
+  <meta charset="utf-8" />
+  <title>Web font example</title>
+
+  <link
+    rel="preload"
+    href="fonts/cicle_fina-webfont.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin />
+  <link
+    rel="preload"
+    href="fonts/zantroke-webfont.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin />
+
+  <link href="style.css" rel="stylesheet" />
+</head>
+<body>
+  …
+</body>
+```
+
+我们不仅在 `type` 属性中提供了 MIME 类型提示，还提供了 `crossorigin` 属性，以确保预加载的 CORS 模式与最终的字体资源请求相匹配。
+
+## 包括 media
+
+`<link>` 元素的一个很好的特性是它们能够接受 [`media`](/zh-CN/docs/Web/HTML/Element/link#media) 属性。这些属性可以接受[媒体类型](/zh-CN/docs/Web/CSS/@media#media_types)或完整的[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)，让你可以进行响应式的预加载！
+
+让我们来看一个例子（在 GitHub 上查看，包括[源代码](https://github.com/mdn/html-examples/tree/master/link-rel-preload/media)和[在线示例](https://mdn.github.io/html-examples/link-rel-preload/media/)）：
+
+```html
+<head>
+  <meta charset="utf-8" />
+  <title>Responsive preload example</title>
+
+  <link
+    rel="preload"
+    href="bg-image-narrow.png"
+    as="image"
+    media="(max-width: 600px)" />
+  <link
+    rel="preload"
+    href="bg-image-wide.png"
+    as="image"
+    media="(min-width: 601px)" />
+
+  <link rel="stylesheet" href="main.css" />
+</head>
+<body>
+  <header>
+    <h1>My site</h1>
+  </header>
+
+  <script>
+    const mediaQueryList = window.matchMedia("(max-width: 600px)");
+    const header = document.querySelector("header");
+
+    if (mediaQueryList.matches) {
+      header.style.backgroundImage = "url(bg-image-narrow.png)";
+    } else {
+      header.style.backgroundImage = "url(bg-image-wide.png)";
+    }
+  </script>
+</body>
+```
+
+我们在 `<link>` 元素上包含 `media` 属性，以便在用户的视口较窄时预加载窄图像，在视口较宽时加载宽图像。我们使用 {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} 来实现这一点（查看[测试媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)以获取更多信息）。
+
+这使得字体在页面渲染时更有可能可用，减少了 FOUT（未经样式处理的文本闪烁）。
+
+这并不局限于图像，甚至不局限于同类型的文件——大胆想象！如果用户使用的是带宽和 CPU 可能更受限的窄屏幕，你可以预加载和显示一个简单的 SVG 图表，或者如果用户的资源更丰富，可以预加载一个复杂的 JavaScript 代码块，然后用它来渲染一个交互式的 3D 模型。
+
+## 脚本和预加载
+
+> **备注：** 如果你正在使用 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)，请使用 [`<link rel="modulepreload">`](/zh-CN/docs/Web/HTML/Attributes/rel/modulepreload)。
+
+关于这些预加载的另一个好处是，你可以使用脚本来执行它们。例如，这里我们创建一个 {{domxref("HTMLLinkElement")}} 实例，然后将其附加到 DOM 中：
+
+```js
+const preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+```
+
+这意味着浏览器将预加载 `myscript.js` 文件，但实际上还没有使用它。要使用它，你可以这样做：
+
+```js
+const preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+```
+
+当你想要预加载一个脚本，但需要将执行推迟到确切需要它的时候，这很有用。
+
+## 其他资源预加载机制
+
+还存在其他预加载特性，但都不如 `<link rel="preload">` 适合该目的：
+
+- `<link rel="prefetch">` 在浏览器中支持已久，但它是用于预取将在下一次导航/页面加载时使用的资源（例如，当你跳转到下一页时）。这是可以的，但对于当前页面没有用！此外，浏览器会给预取（`prefetch`）的资源比预加载（`preload`）的资源更低的优先级——当前页面比下一页更重要。有关更多详细信息，请参阅{{Glossary("prefetch", "预取")}}。
+- `<link rel="prerender">` 在后台渲染指定的网页，如果用户导航到该页面，可以加速其加载。由于有可能浪费用户的带宽，Chrome 将 `prerender` 视为 [NoState 预取](https://developer.chrome.com/blog/nostate-prefetch/)。
+- `<link rel="subresource">` {{non-standard_inline}} 一段时间以前在 Chrome 中得到了支持，其目的是解决与 `preload` 相同的问题，但它存在一个问题：没有办法确定项目的优先级（`as` 当时还不存在），所以它们都是以相当低的优先级获取的。
+- 有许多基于脚本的资源加载器，但它们无法控制浏览器的获取优先级队列，并面临着同样的性能问题。
 
 ## 规范
 
@@ -16,3 +231,7 @@ slug: Web/HTML/Attributes/rel/preload
 ## 浏览器兼容性
 
 {{Compat}}
+
+## 参见
+
+- [预加载的好处是什么？](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)作者 Yoav Weiss

From 2bc414354c666f170dfad0ff26904e6d5819ebe9 Mon Sep 17 00:00:00 2001
From: P_nutsK <107553542+P-nutsK@users.noreply.github.com>
Date: Sun, 24 Sep 2023 18:27:15 +0900
Subject: [PATCH 131/268] Fix Mistakes (#16056)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix Mistakes

複数のパターンが書かれていた部分がおかしくなっていたのを修正

* 整形を抑制した上で修正

コードブロックのjsをjs-nolintにしました
---
 .../reference/operators/property_accessors/index.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/javascript/reference/operators/property_accessors/index.md b/files/ja/web/javascript/reference/operators/property_accessors/index.md
index 37b36fd68ed30c..f8e7a993bc3005 100644
--- a/files/ja/web/javascript/reference/operators/property_accessors/index.md
+++ b/files/ja/web/javascript/reference/operators/property_accessors/index.md
@@ -52,17 +52,18 @@ document.createElement("pre");
 
 数値リテラルに対してメソッドを使用する場合で、その数値リテラルに指数や小数点がない場合、メソッド呼び出しをするドットの前に[ホワイトスペース](/ja/docs/Glossary/Whitespace)を入れることで、ドットが小数点とみなされることを防ぐことができます。
 
-```js
-(77).toExponential();
+```js-nolint
+77 .toExponential();
 // or
-(77).toExponential();
+77
+.toExponential();
 // or
 (77).toExponential();
 // or
-(77).toExponential();
+77..toExponential();
 // or
-(77.0).toExponential();
-// because 77. === 77.0, no ambiguity
+77.0.toExponential();
+// 77.と77.0は同じものとして評価されます
 ```
 
 ### ブラケット表記法

From 4938fd28a5cf74a9a0722b7eaf8b99a17af2eec7 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Sun, 24 Sep 2023 18:20:10 +0800
Subject: [PATCH 132/268] [zh-cn]: update the translation of
 Number.isSafeInteger() (#16040)

---
 .../number/issafeinteger/index.md             | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/issafeinteger/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/issafeinteger/index.md
index 08596b698e5e9b..d1e5b498f59d62 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/issafeinteger/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/issafeinteger/index.md
@@ -5,38 +5,46 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
 
 {{JSRef}}
 
-**`Number.isSafeInteger()`** 方法用来判断传入的参数值是否是一个“安全整数”（safe integer）。
+**`Number.isSafeInteger()`** 静态方法判断提供的值是否是一个*安全整数*。
 
-一个安全整数是一个符合下面条件的整数：
-
-- 可以准确地表示为一个 IEEE-754 双精度数字，
-- 其 IEEE-754 表示不能是舍入任何其他整数以适应 IEEE-754 表示的结果。.
-
-比如，`2^53 - 1` 是一个安全整数，它能被精确表示，在任何 IEEE-754 舍入模式（rounding mode）下，没有其他整数舍入结果为该整数。作为对比，`2^53` 就不是一个安全整数，它能够使用 IEEE-754 表示，但是 `2^53 + 1` 不能使用 IEEE-754 直接表示，在就近舍入（round-to-nearest）和向零舍入中，会被舍入为 `2^53`。
-
-安全整数范围为 `-(2^53 - 1)` 到 `2^53 - 1` 之间的整数，包含 `-(2^53 - 1)` 和 `2^53 - 1`。
+{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}
 
 ## 语法
 
-```plain
+```js-nolint
 Number.isSafeInteger(testValue)
 ```
 
 ### 参数
 
 - `testValue`
-  - : 需要检测的参数。
+  - : 要测试是否为安全整数的值。
 
 ### 返回值
 
-一个{{jsxref("Boolean", "布尔值")}} 表示给定的值是否是一个安全整数（safe integer）。
+如果给定的值是一个安全整数，则返回布尔值 `true`。否则返回 `false`。
+
+## 描述
+
+安全整数由 -(2<sup>53</sup> - 1) 到 2<sup>53</sup> - 1 的所有整数组成，包含（±9,007,199,254,740,991）。安全整数是符合以下条件的整数：
+
+- 可以精确地表示为 IEEE-754 双精度数，并且
+- 其 IEEE-754 表示形式不能是舍入任何其他整数以适应 IEEE-754 表示形式的结果。
+
+例如，2<sup>53</sup> - 1 是一个安全整数：它可以精确地表示，并且在任何 IEEE-754 舍入模式下都没有其他整数舍入结果为该整数。相比之下，2<sup>53</sup> *不是*一个安全整数：它可以在 IEEE-754 中精确地表示，但整数 2<sup>53</sup> + 1 不能直接在 IEEE-754 中表示，而是采用就近舍入和向零舍入时，会舍入到 2<sup>53</sup>。
+
+处理大约 9 千万亿左右的值时，需要使用[任意精度算术库](https://zh.wikipedia.org/wiki/高精度计算)来实现完全精确性。有关浮点数表示的更多信息，请参阅[程序员需要了解的浮点数算术知识](https://floating-point-gui.de/)。
+
+对于更大的整数，请考虑使用 {{jsxref("BigInt")}} 类型。
 
 ## 示例
 
+### 使用 isSafeInteger()
+
 ```js
 Number.isSafeInteger(3); // true
-Number.isSafeInteger(Math.pow(2, 53)); // false
-Number.isSafeInteger(Math.pow(2, 53) - 1); // true
+Number.isSafeInteger(2 ** 53); // false
+Number.isSafeInteger(2 ** 53 - 1); // true
 Number.isSafeInteger(NaN); // false
 Number.isSafeInteger(Infinity); // false
 Number.isSafeInteger("3"); // false
@@ -44,14 +52,6 @@ Number.isSafeInteger(3.1); // false
 Number.isSafeInteger(3.0); // true
 ```
 
-## Polyfill
-
-```plain
-Number.isSafeInteger = Number.isSafeInteger || function (value) {
-   return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER;
-};
-```
-
 ## 规范
 
 {{Specifications}}
@@ -60,8 +60,10 @@ Number.isSafeInteger = Number.isSafeInteger || function (value) {
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
+- [`core-js` 中 `Number.isSafeInteger` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
 - {{jsxref("Number")}}
 - {{jsxref("Number.MIN_SAFE_INTEGER")}}
 - {{jsxref("Number.MAX_SAFE_INTEGER")}}
+- {{jsxref("BigInt")}}

From ebe7348552a09b72adb7f41137b8bec7f626a0ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20P?= <yukulele@users.noreply.github.com>
Date: Sun, 24 Sep 2023 21:47:31 +0200
Subject: [PATCH 133/268] Typofix for fr `Web/API/File` (#16041)

typo
---
 files/fr/web/api/file/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/web/api/file/index.md b/files/fr/web/api/file/index.md
index d7d3859d0e1912..51e3ce24c76965 100644
--- a/files/fr/web/api/file/index.md
+++ b/files/fr/web/api/file/index.md
@@ -5,7 +5,7 @@ slug: Web/API/File
 
 {{APIRef}}
 
-L'interface **`File`** fournit des informations sur des fichiers et permet au code JavaScript d'une une page web d'accéder à leurs contenus.
+L'interface **`File`** fournit des informations sur des fichiers et permet au code JavaScript d'une page web d'accéder à leurs contenus.
 
 Les objets `File` sont généralements obtenus à partir de&nbsp;:
 

From 48842b39aac5318acef5e94a699a4610aa96d20e Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Mon, 25 Sep 2023 08:50:04 +0800
Subject: [PATCH 134/268] [zh-cn]: update the translation of Number.parse*()
 (#16059)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../global_objects/number/parsefloat/index.md | 35 +++++++++++++------
 .../global_objects/number/parseint/index.md   | 23 ++++++------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/parsefloat/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/parsefloat/index.md
index 44a5692efb15b5..efbfd83050b0c7 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/parsefloat/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/parsefloat/index.md
@@ -3,30 +3,42 @@ title: Number.parseFloat()
 slug: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+**`Number.parseFloat()`** 静态方法解析参数并返回浮点数。如果无法从参数中解析出一个数字，则返回 {{jsxref("NaN")}}。
 
-**`Number.parseFloat()`** 方法可以把一个字符串解析成浮点数。该方法与全局的 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 函数相同，并且处于 ECMAScript 6 规范中（用于全局变量的模块化）。
+{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}
 
 ## 语法
 
-```plain
+```js-nolint
 Number.parseFloat(string)
 ```
 
 ### 参数
 
 - `string`
-  - : 被解析的字符串。
+  - : 要解析的值，会被[强制转换为字符串](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)。该参数开头的{{Glossary("whitespace", "空白")}}会被忽略。
 
 ### 返回值
 
-给定值被解析成浮点数，如果无法被解析成浮点数，则返回`NaN`
+由给定 `string` 解析得到的浮点数。
 
-## 描述
+如果第一个非空白字符不能被转换为数字，则返回 {{jsxref("NaN")}}。
 
-请移步全局函数 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 页面查看更多的解释和示例。
+## 示例
+
+### Number.parseFloat 与 parseFloat 对比
+
+此方法与全局函数 {{jsxref("parseFloat", "parseFloat()")}} 具有相同的功能：
+
+```js
+Number.parseFloat === parseFloat; // true
+```
+
+其目的是全局的模块化。
+
+有关更多详细信息和示例，请参见 {{jsxref("parseFloat", "parseFloat()")}}。
 
 ## 规范
 
@@ -36,7 +48,8 @@ Number.parseFloat(string)
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
-- {{jsxref("Global_Objects/Number", "Number")}}
-- {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
+- [`core-js` 中 `Number.parseFloat` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
+- {{jsxref("Number")}}
+- {{jsxref("parseFloat", "parseFloat()")}}
diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/parseint/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/parseint/index.md
index d7117fdf376e10..c635bbf9cf77f7 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/parseint/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/parseint/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt
 
 {{JSRef}}
 
-**`Number.parseInt()`** 方法依据指定基数，解析字符串并返回一个整数。
+**`Number.parseInt()`** 静态方法解析一个字符串参数并返回一个指定基数的整数。
 
 {{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}}
 
@@ -19,21 +19,24 @@ Number.parseInt(string, radix)
 ### 参数
 
 - `string`
-  - : 要被解析的值。如果参数不是一个字符串，则将其[强制转化为字符串](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)。字符串开头的空白符将会被忽略。
+  - : 要被解析的值，会被[强制转化为字符串](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)。字符串开头的空白符将会被忽略。
 - `radix` {{optional_inline}}
-  - : 从 `2` 到 `36` 的整数，表示进制的基数。如果超出这个范围，将返回 `NaN`。假如 `radix` 未指定或者为 `0`，除非数字以 `0x` 或 `0X` 开头（此时假定为十六进制 `16`），否则假定为 `10`（十进制）。
+
+  - : `2` 到 `36` 之间的整数，表示 `string` 的*基数*（数学记数系统中的基）。
+
+    如果 `radix` 为 `undefined` 或 `0`，则 `radix` 将被默认设置为 `10`，除非该数字以码元对 `0x` 或 `0X` 开头，在这种情况下，`radix` 将被默认设置为 `16`。
 
 ### 返回值
 
-从给定的字符串中解析出的一个整数。
+从给定的 `string` 中解析出的一个整数。
 
-如果基数小于 `2` 或大于 `36`，或第一个非空白字符不能转换为数字，则返回 {{jsxref("NaN")}}。
+如果 `radix` 小于 `2` 或大于 `36`，或第一个非空白字符不能转换为数字，则返回 {{jsxref("NaN")}}。
 
 ## 示例
 
-### Number.parseInt 与 parseInt
+### Number.parseInt 与 parseInt 对比
 
-这个方法和全局的 {{jsxref("parseInt", "parseInt()")}} 函数具有一样的函数功能：
+这个方法和全局的 {{jsxref("parseInt", "parseInt()")}} 函数具有相同的功能：
 
 ```js
 Number.parseInt === parseInt; // true
@@ -51,6 +54,6 @@ Number.parseInt === parseInt; // true
 
 ## 参见
 
-- [`Number.parseInt` 在 `core-js` 中的 Polyfill](https://github.com/zloirock/core-js#ecmascript-number)
-- 所属的 {{jsxref("Number")}} 对象。
-- 全局的 {{jsxref("parseInt", "parseInt()")}} 方法。
+- [`core-js` 中 `Number.parseInt` 的 polyfill](https://github.com/zloirock/core-js#ecmascript-number)
+- {{jsxref("Number")}}
+- {{jsxref("parseInt", "parseInt()")}}

From fd22c15d5b3bb7bed83299fc57d5def3cc1bccb2 Mon Sep 17 00:00:00 2001
From: hanyujie2002 <yujiehan2002@outlook.com>
Date: Mon, 25 Sep 2023 13:02:12 +0800
Subject: [PATCH 135/268] zh-cn: init the translation of performance/video
 (#16082)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 files/zh-cn/learn/performance/video/index.md | 128 +++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 files/zh-cn/learn/performance/video/index.md

diff --git a/files/zh-cn/learn/performance/video/index.md b/files/zh-cn/learn/performance/video/index.md
new file mode 100644
index 00000000000000..b7fee1f5c57dc2
--- /dev/null
+++ b/files/zh-cn/learn/performance/video/index.md
@@ -0,0 +1,128 @@
+---
+title: 多媒体：视频
+slug: Learn/Performance/video
+---
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/Multimedia", "Learn/Performance/javascript_performance", "Learn/Performance")}}
+
+正如我们在前一节中了解到的，媒体（即图片和视频）占了一般网站下载量的 70% 以上。我们已经学过了如何优化图片。本文将研究如何优化视频来提高 web 性能。
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">前提：</th>
+      <td>
+        基本的计算机知识，
+        <a
+          href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
+          >已安装基本软件</a
+        >，以及<a
+         href="/zh-CN/docs/Learn/Getting_started_with_the_web"
+         >客户端 web 技术</a
+        >的基本知识。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">目标：</th>
+      <td>
+        了解各种视频格式及其对性能的影响，以及如何在为每个浏览器提供最小的视频文件类型的同时减少视频对整个页面加载时间的影响。
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## 为什么优化你的多媒体？
+
+对于一般网站来说，[25% 的带宽来自视频](https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367)。优化视频有望带来巨大的带宽节省，而这又可以转化为更好的网站性能。
+
+## 优化视频传输
+
+下面的小节描述了以下优化技术：
+
+- [压缩所有视频](#压缩所有视频)
+- [优化 `<source>` 顺序](#优化_source_顺序)
+- [视频自动播放](#视频自动播放)
+- [从静音的视频中移除音频](#从静音的_hero_视频中移除音频)
+- [优化视频预加载](#视频预加载)
+- [考虑流媒体](#考虑流媒体)
+
+### 压缩所有视频
+
+大多数视频压缩工作都是比较视频内相邻帧之间的细节，目的是移除两帧中相同的细节。压缩视频并导出多种视频格式，包括 WebM、MPEG-4/H.264 和 Ogg/Theora。
+
+你的视频编辑软件可能有减小文件大小的功能。如果没有，有在线工具，比如 [FFmpeg](https://www.ffmpeg.org/)（将在后面的小节讨论）可以对视频进行编码、解码、转换以及其他优化功能。
+
+### 优化 `<source>` 顺序
+
+按从小到大的顺序排序视频源。例如，给定三种分别压缩为 10 MB、12 MB 和 13 MB 的不同格式的视频，先声明最小的，最后声明最大的：
+
+```html
+<video width="400" height="300" controls="controls">
+  <!-- WebM: 10 MB -->
+  <source src="video.webm" type="video/webm" />
+  <!-- MPEG-4/H.264: 12 MB -->
+  <source src="video.mp4" type="video/mp4" />
+  <!-- Ogg/Theora: 13 MB -->
+  <source src="video.ogv" type="video/ogv" />
+</video>
+```
+
+浏览器会下载它所理解的第一个格式。这样做的目的是优先提供较小的版本。对于最小的版本，应确保压缩程度最高的视频质量仍然可以。有一些压缩算法可以使视频看起来（很糟糕）像动画 GIF。尽管一个 128 Kb 视频相比 10 MB 在下载方面貌似可以提供更好的用户体验，但是模糊的 GIF 似的视频可能会对品牌或项目产生不好的影响。
+
+参阅 [CanIUse.com](https://caniuse.com/#search=video) 了解当前浏览器对视频和其他媒体类型的支持。
+
+### 视频自动播放
+
+要确保背景视频自动循环播放，你必须在视频标签中添加几个属性：`autoplay`、`muted` 和`playsinline`。
+
+```html
+<video
+  autoplay=""
+  loop=""
+  muted="true"
+  playsinline=""
+  src="backgroundvideo.mp4"></video>
+```
+
+虽然 `loop` 和 `autoplay` 足以使视频循环和自动播放，但想要在移动浏览器中自动播放的话，`muted` 属性是必需的。
+
+`Playsinline` 对于移动 Safari 浏览器来说是必需的，它允许视频播放时不强制全屏模式。
+
+### 从静音的 hero 视频中移除音频
+
+对于 hero 视频或者其他没有音频的视频，移除音频是明智的选择。
+
+```html
+<video autoplay="" loop="" muted="true" playsinline="" id="hero-video">
+  <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"' />
+  <source src="web_banner.mp4" type="video/mp4" />
+</video>
+```
+
+这段 hero 视频代码（上面）常用于会议网站和企业主页。它包含了一个自动播放、循环和静音的视频。没有控制按钮，所以无法听到声音。音频通常是无声的，但仍然存在，而且仍然占用带宽。没有理由在永远静音的视频中提供音频。**删除音频可以节省 20% 的带宽。**
+
+根据你选择的软件，你可能可以在导出和压缩过程中移除音频。如果不能，一个名为 [FFmpeg](https://www.ffmpeg.org/) 的免费工具可以帮你做到。这是用 FFmpeg 移除音频的命令字符串：
+
+```bash
+ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4
+```
+
+### 视频预加载
+
+预加载属性有三个可用选项：`auto`|`metadata`|`none`。默认设置是 `metadata`。这些设置控制了在页面加载时下载多少视频文件。你可以通过延迟下载较少受欢迎的视频来节省数据。
+
+设置 `preload="none"` 的结果是在播放开始之前，视频不会被下载。这会延迟启动，但对于播放概率较低的视频，可以节省大量数据。
+
+为了更适度的带宽节省，可以设置 `preload="metadata"`，这可能会在页面加载时下载视频的 3%。这对于一些小型或中等大小的文件来说是一个有用的选项。
+
+将设置改为 `auto` 告诉浏览器自动下载整个视频。只有当播放可能性非常高时才这样做。否则，这将浪费大量的带宽。
+
+### 考虑流媒体
+
+[视频流媒体允许适当的视频大小和带宽](https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-2/)（基于网络速度）被传送到最终用户。类似于响应式图像，正确大小的视频被传送到浏览器，确保视频快速启动、缓冲少以及播放优化。
+
+## 结论
+
+优化视频有可能显著提高网站性能。视频文件相比其他网站文件相对较大，因此始终值得关注。本文解释了如何通过减少文件大小、使用（HTML）下载设置和流媒体来优化网站视频。
+
+{{PreviousMenuNext("Learn/Performance/Multimedia", "Learn/Performance/javascript_performance", "Learn/Performance")}}

From 757a8745683d500b845183419c0b106a81f6fb0e Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Mon, 25 Sep 2023 11:07:23 +0200
Subject: [PATCH 136/268] fr: translate page report (#15789)

Translate page report template in French - fix #8918 for `fr`

Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>
---
 .github/ISSUE_TEMPLATE/page-report-fr.yml | 40 +++++++++++------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/page-report-fr.yml b/.github/ISSUE_TEMPLATE/page-report-fr.yml
index 531f93181e39c1..156bf9ccc6af30 100644
--- a/.github/ISSUE_TEMPLATE/page-report-fr.yml
+++ b/.github/ISSUE_TEMPLATE/page-report-fr.yml
@@ -1,62 +1,62 @@
 name: "[via des pages MDN uniquement // fr]"
-description: Issue filed via le lien "Report a problem with this content on GitHub" sur des pages MDN.
+description: Tickets rapportés via le lien "Report a problem with this content on GitHub" sur des pages MDN.
 labels: ["l10n-fr", "needs triage"]
 body:
   - type: markdown
     attributes:
       value: |
-        ### Before you start
+        ### Avant toute chose
 
-        **Want to change this page yourself?** This content is open source!
-        ↩ Go back and use the _Edit on GitHub_ link on the page.
+        **Vous souhaitez éditer cette page vous-même ?** Le contenu est open source !
+        ↩ Revenez sur la page et cliquez sur le lien _Edit on GitHub_ en bas de la page.
 
-        **Is your issue about the browser compatibility table?**
-        ↩ Go back and use the _Report problems with this compatibility data on GitHub_ link on the page.
+        **Est-ce que le problème porte sur le tableau de compatibilité des navigateurs ?**
+        ↩ Revenez sur la page et cliquez sur le lien _Report problems with this compatibility data on GitHub_ en bas de la page.
 
-        **Need help with a browser?**
-        🙋 To get help with [Firefox](https://support.mozilla.org/en-US/kb/file-bug-report-or-feature-request-mozilla), [Chrome](https://support.google.com/chrome/answer/95315?hl=en-GB&ref_topic=7439544), [Safari](https://www.apple.com/feedback/safari.html), or another browser, check the browser's support site.
+        **Vous avez besoin d'aide avec votre navigateur ?**
+        Consultez le site d'aide du navigateur (https://support.mozilla.org/fr/products/firefox pour Firefox, https://support.apple.com/fr-fr/safari pour Safari, https://support.google.com/chrome/?hl=fr#topic=7439538 pour Chrome, https://support.microsoft.com/fr-fr/microsoft-edge pour Edge).
 
         ---
   - type: input
     id: mdn-url
     attributes:
-      label: MDN URL
-      description: Set automatically. Do not modify.
+      label: URL MDN
+      description: Cette information est ajoutée automatiquement. Veuillez ne pas la modifier.
     validations:
       required: true
   - type: input
     id: section
     attributes:
-      label: What specific section or headline is this issue about?
+      label: Sur quelle section/titre porte ce problème ?
   - type: textarea
     id: problem
     attributes:
-      label: What information was incorrect, unhelpful, or incomplete?
+      label: Quelle information était incorrecte, inutile ou incomplète ?
     validations:
       required: true
   - type: textarea
     id: expected
     attributes:
-      label: What did you expect to see?
+      label: Que vous attendiez-vous à voir ?
     validations:
       required: true
   - type: textarea
     id: references
     attributes:
-      label: Do you have any supporting links, references, or citations?
-      description: Link to information that helps us confirm your issue.
+      label: Avez-vous des liens, références ou citations sur ce sujet ?
+      description: Des liens vers des informations qui pourront nous aider à confirmer le problème.
   - type: textarea
     id: more-info
     attributes:
-      label: Do you have anything more you want to share?
-      description: For example, steps to reproduce a bug, screenshots, screen recordings, or sample code
+      label: Souhaitez-vous ajouter autre chose ?
+      description: Cela peut être des étapes de reproduction du bogue, des captures ou enregistrements d'écran, un fragment de code.
   - type: markdown
     attributes:
       value: |
         ---
-        You're finished! The following fields are prefilled. Please click **Submit new issue**.
+        Et voilà, c'est terminé ! Les champs suivants sont remplis automatiquement. Vous pouvez cliquer sur **Submit new issue**.
   - type: textarea
     id: metadata
     attributes:
-      label: MDN metadata
-      description: Set automatically. Do not modify.
+      label: Métadonnées MDN
+      description: Remplies automatiquement. Ne pas modifier.

From d88ca286637d7dcb6fa7a21d16ee78cc50c561be Mon Sep 17 00:00:00 2001
From: KyeongSang Yu <yukyeongsang@gmail.com>
Date: Mon, 25 Sep 2023 19:31:39 +0900
Subject: [PATCH 137/268] [ko] update translation to history api in Web API 
 (#15772)

update to history api
---
 files/ko/web/api/history_api/index.md | 58 +++++++++++++++------------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/files/ko/web/api/history_api/index.md b/files/ko/web/api/history_api/index.md
index 14375b30228421..ac5fd6bbe5d26f 100644
--- a/files/ko/web/api/history_api/index.md
+++ b/files/ko/web/api/history_api/index.md
@@ -1,15 +1,19 @@
 ---
 title: History API
 slug: Web/API/History_API
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{DefaultAPISidebar("History API")}}
 
-DOM의 {{domxref("Window")}} 객체는 {{domxref("Window.history", "history")}} 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. {{domxref("History", "history")}}는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가집니다.
+**History API**는 {{DOMxRef("Window.history","history")}} 전역 객체를 통해 브라우저 세션 히스토리([웹 익스텐션 히스토리](/ko/docs/Mozilla/Add-ons/WebExtensions/API/history)와 혼동해서는 안 됩니다.)에 대한 접근을 제공합니다. 사용자의 방문 기록을 앞뒤로 탐색하고, 방문 기록 스택의 내용을 조작할 수 있는 유용한 메서드와 속성을 노출합니다.
 
-## 개념과 사용 방법
+> **참고:** 이 API는 메인 스레드({{domxref("Window")}})에서만 사용할 수 있습니다. {{domxref("Worker")}} 또는 {{domxref("Worklet")}} 맥락에서는 접근할 수 없습니다.
 
-사용자 방문 기록에서 앞뒤로 이동할 땐 {{domxref("History.back","back()")}}, {{domxref("History.forward","forward()")}}, {{domxref("History.go","go()")}} 메서드를 사용합니다.
+## 개념 및 사용법
+
+사용자의 방문 기록을 앞뒤로 이동하는 것은 {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}} 그리고 {{DOMxRef("History.go","go()")}} 메서드를 사용하여 수행됩니다.
 
 ### 앞으로 가기와 뒤로 가기
 
@@ -19,73 +23,75 @@ DOM의 {{domxref("Window")}} 객체는 {{domxref("Window.history", "history")}}
 history.back();
 ```
 
-위의 코드는 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같습니다.
+이는 사용자가 브라우저 도구 모음에서 <kbd><strong>뒤로 가기</strong></kbd> 버튼을 클릭한 것과 똑같이 작동합니다.
 
-이와 비슷하게, 기록의 앞으로 (도구 모음의 앞으로 가기 버튼) 가는 것도 할 수 있습니다.
+마찬가지로 다음과 같이 사용자가 <kbd><strong>앞으로 가기</strong></kbd> 버튼을 클릭한 것처럼 앞으로 이동할 수도 있습니다.
 
 ```js
 history.forward();
 ```
 
-### 기록의 특정 지점으로 이동
+### 방문 기록의 특정 지점으로 이동
 
-{{domxref("History.go", "go()")}} 메서드를 사용하면 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점까지 이동할 수 있습니다.
+{{DOMxRef("History.go","go()")}} 메서드를 사용하여 세션 기록에서 현재 페이지에 대한 상대 위치로 식별되는 특정 페이지를 로드할 수 있습니다. (현재 페이지의 상대 위치는 `0`입니다.)
 
-한 페이지 뒤로 이동하려면 다음과 같이 사용합니다. ({{domxref("History.back", "back()")}}과 동일)
+한 페이지를 뒤로 이동하려면 아래와 같이 사용합니다. ({{DOMxRef("History.back","back()")}}을 호출하는 것과 동일합니다.)
 
 ```js
 history.go(-1);
 ```
 
-한 페이지 앞으로 이동하려면 다음과 같이 사용합니다. ({{domxref("History.forward", "forward()")}}와 동일)
+{{DOMxRef("History.forward","forward()")}}를 호출하는 것과 마찬가지로 페이지를 앞으로 이동할 때는 아래와 같이 사용합니다.
 
 ```js
 history.go(1);
 ```
 
-매개변수로 지정한 숫자를 바꾸면 2 페이지씩 이동하는 것도 가능합니다.
+마찬가지로 `2`를 넘기면 2 페이지 앞으로 이동할 수 있습니다.
 
-`go()`의 다른 사용법은 매개변수를 제공하지 않거나 0을 제공해 현재 페이지를 다시 불러오는 것입니다.
+`go()` 메서드의 또 다른 용도는 `0`을 전달하거나 인수 없이 호출하여 현재 페이지를 새로고침하는 것입니다.
 
 ```js
-// The following statements
-// both have the effect of
-// refreshing the page
+// 아래 두 줄의 코드는
+// 모두 페이지를
+// 새로고침 합니다.
 history.go(0);
 history.go();
 ```
 
-{{domxref("History.length", "length")}} 속성을 사용해 방문 기록 스택의 크기도 알아낼 수 있습니다.
+`length` 속성 값을 확인하여 방문 기록 스택의 페이지 수를 확인할 수 있습니다.
 
 ```js
-let numberOfEntries = window.history.length;
+const numberOfEntries = history.length;
 ```
 
 ## 인터페이스
 
 - {{domxref("History")}}
-  - : 브라우저의 세션 기록에 접근할 수 있는 방법을 제공하는 인터페이스입니다.
+  - : 브라우저 세션 기록(즉, 현재 페이지가 로드된 탭 또는 프레임에서 방문한 페이지)을 조작할 수 있습니다.
+- {{domxref("PopStateEvent")}}
+  - : {{domxref("Window.popstate_event", "popstate")}} 이벤트의 인터페이스입니다.
 
 ## 예제
 
-다음 예제는 {{domxref("window.onpopstate")}} 속성에 이벤트 처리기를 부착한 후, {{domxref("window.history", "history")}} 객체를 사용해 브라우저 방문 기록을 추가하거나 대체한 후 탐색하는 코드입니다.
+다음 예제에서는 {{domxref("Window.popstate_event", "popstate")}} 이벤트에 대한 수신기를 할당합니다. 그런 다음 현재 탭의 브라우저 기록 내에서 추가, 바꾸기 및 이동하는 history 객체의 몇 가지 메서드를 보여줍니다.
 
 ```js
-window.onpopstate = function (event) {
+window.addEventListener("popstate", (event) => {
   alert(
     `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
   );
-};
+});
 
 history.pushState({ page: 1 }, "title 1", "?page=1");
 history.pushState({ page: 2 }, "title 2", "?page=2");
 history.replaceState({ page: 3 }, "title 3", "?page=3");
-history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
-history.back(); // alerts "location: http://example.com/example.html, state: null"
-history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
+history.back(); // "location: http://example.com/example.html?page=1, state: {"page":1}"라는 알림이 발생합니다.
+history.back(); // "location: http://example.com/example.html, state: null"라는 알림이 발생합니다.
+history.go(2); // "location: http://example.com/example.html?page=3, state: {"page":3}"라는 알림이 발생합니다.
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -95,5 +101,5 @@ history.go(2); // alerts "location: http://example.com/example.html?page=3, stat
 
 ## 같이 보기
 
-- {{domxref("window.history")}}
-- {{domxref("window.onpopstate")}}
+- {{domxref("window.history", "history")}} 전역 객체
+- {{domxref("Window/popstate_event", "popstate")}} 이벤트

From f9a792f9229864638c91b6add2ef600d7a701c87 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Mon, 25 Sep 2023 19:32:29 +0900
Subject: [PATCH 138/268] [ko]: revise index.md in `web/glossary/character_set`
 (#15751)

[revise]: revise feedback
---
 files/ko/glossary/character_set/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/files/ko/glossary/character_set/index.md b/files/ko/glossary/character_set/index.md
index 30a4f6fbffd05a..5db3a55d52bb10 100644
--- a/files/ko/glossary/character_set/index.md
+++ b/files/ko/glossary/character_set/index.md
@@ -1,5 +1,5 @@
 ---
-title: Character set
+title: 문자 집합 (Character set)
 slug: Glossary/Character_set
 l10n:
   sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
@@ -11,13 +11,13 @@ l10n:
 
 이전에, 각 나라들은 그들의 다양한 문자 사용 때문에 고유의 문자 집합(예를 들면 일본어를 위한 Kanji JIS 코드(예: Shift-JIS, EUC-JP 등), 전통 중국어를 위한 Big5, 러시아어를 위한 KOI8-R) 을 개발했습니다. 그러나, {{Glossary("Unicode")}}는 점차 보편적인 언어 지원을 위해 가장 수용 가능한 문자 집합이 되었습니다.
 
-문자 집합이 잘못 사용된 경우(예: Big5로 인코딩된 글의 Unicode) [글자 깨짐](https://ko.wikipedia.org/wiki/%EA%B8%80%EC%9E%90_%EA%B9%A8%EC%A7%90)이라고 하는 끊어진 문자만 볼 수 있다.
+문자 집합이 잘못 사용된 경우(예: Big5로 인코딩된 글의 Unicode), [글자 깨짐](https://ko.wikipedia.org/wiki/%EA%B8%80%EC%9E%90_%EA%B9%A8%EC%A7%90)이라고 하는 끊어진 문자만 볼 수 있습니다.
 
 ## 같이 보기
 
-- 위키피디아의 [Character encoding](https://en.wikipedia.org/wiki/Character_encoding)
-- [글자 깨짐](https://ko.wikipedia.org/wiki/%EA%B8%80%EC%9E%90_%EA%B9%A8%EC%A7%90)
-- [Glossary](/ko/docs/Glossary)
+- 위키백과의 [문자 인코딩](https://en.wikipedia.org/wiki/Character_encoding)
+- 위키백과의 [글자 깨짐](https://ko.wikipedia.org/wiki/%EA%B8%80%EC%9E%90_%EA%B9%A8%EC%A7%90)
+- [용어 사전](/ko/docs/Glossary)
 
   - {{Glossary("Character")}}
   - {{Glossary("Unicode")}}

From 1db4e11b91184ab74e9a084b921e2b3806ad0af9 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Mon, 25 Sep 2023 18:58:36 +0800
Subject: [PATCH 139/268] [zh-cn]: update the translation of Number.toFixed()
 (#16098)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../global_objects/number/tofixed/index.md    | 71 ++++++++++++-------
 1 file changed, 46 insertions(+), 25 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md
index 2635a784b365ed..9e4f0b0444a99e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/tofixed/index.md
@@ -5,62 +5,82 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed
 
 {{JSRef}}
 
-**`toFixed()`** 方法使用定点表示法来格式化一个数值。
+{{jsxref("Number")}} 值的 **`toFixed()`** 方法使用定点表示法来格式化该数值。
 
 {{EmbedInteractiveExample("pages/js/number-tofixed.html")}}
 
 ## 语法
 
-```plain
-numObj.toFixed(digits)
+```js-nolint
+toFixed()
+toFixed(digits)
 ```
 
 ### 参数
 
-- digits
-  - : 小数点后数字的个数；介于 0 到 20（包括）之间，实现环境可能支持更大范围。如果忽略该参数，则默认为 0。
+- `digits` {{optional_inline}}
+  - : 小数点后的位数。应该是一个介于 `0` 和 `100` 之间的值，包括 `0` 和 `100`。如果这个参数被省略，则被视为 `0`。
 
 ### 返回值
 
 使用定点表示法表示给定数字的字符串。
 
-### 抛出异常
+### 异常
 
 - {{jsxref("RangeError")}}
-  - : 如果 _digits_ 参数太小或太大。0 到 20（包括）之间的值不会引起 {{jsxref("RangeError")}}。实现环境（implementations）也可以支持更大或更小的值。
+  - : 如果 `digits` 不是介于 `0` 和 `100` 之间（含两端）的值，则抛出该异常。
 - {{jsxref("TypeError")}}
-  - : 如果该方法在一个非{{jsxref( "Number")}}类型的对象上调用。
+  - : 如果不是在 {{jsxref("Number")}} 上调用该方法，则抛出该异常。
 
 ## 描述
 
-一个数值的字符串表现形式，不使用指数记数法，而是在小数点后有 digits（注：digits 具体值取决于传入参数）位数字。该数值在必要时进行四舍五入，另外在必要时会用 0 来填充小数部分，以便小数部分有指定的位数。如果数值大于 1e+21，该方法会简单调用 {{jsxref("Number.prototype.toString()")}}并返回一个指数记数法格式的字符串。
+`toFixed()` 方法返回一个表示 `numObj` 的字符串，但不使用指数计数法，并且小数点后有精确到 `digits` 位的数字。如果需要截断，则将数字四舍五入；如果小数位数不足，则小数部分用零填充，以使其具有指定长度。
 
-> **警告：** 浮点数不能精确地用二进制表示所有小数。这可能会导致意外的结果，例如 `0.1 + 0.2 === 0.3` 返回 `false` .
+如果 `numObj` 的绝对值大于或等于 10<sup>21</sup>，则该方法使用与 {{jsxref("Number.prototype.toString()")}} 相同的算法，并以指数计数法返回字符串。如果 `numObj` 的值不是有限的，则 `toFixed()` 会返回 `"Infinity"`、`"NaN"` 或 `"-Infinity"`。
 
-## 示例
-
-### 使用 `toFixed`
+`toFixed()` 对于某些值可能具有比 [`toString`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) 更加精确的输出，因为 `toString()` 只输出足够的有效数字来区分该数值与邻近的数值。例如：
 
 ```js
-var numObj = 12345.6789;
+(1000000000000000128).toString(); // '1000000000000000100'
+(1000000000000000128).toFixed(0); // '1000000000000000128'
+```
 
-numObj.toFixed(); // 返回 "12346"：进行四舍六入五看情况，不包括小数部分
-numObj.toFixed(1); // 返回 "12345.7"：进行四舍六入五看情况
+然而，选择一个过高的 `digits` 精度会导致意外的结果，因为小数部分的数字不能精确地表示成浮点数。例如：
 
-numObj.toFixed(6); // 返回 "12345.678900"：用 0 填充
+```js
+(0.3).toFixed(50); // '0.29999999999999998889776975374843459576368331909180'
+```
 
-(1.23e20).toFixed(2); // 返回 "123000000000000000000.00"
+## 示例
 
-(1.23e-10).toFixed(2); // 返回 "0.00"
+### 使用 toFixed()
 
-(2.34).toFixed(1); // 返回 "2.3"
+```js
+const numObj = 12345.6789;
+
+numObj.toFixed(); // '12346'；四舍五入，没有小数部分
+numObj.toFixed(1); // '12345.7'；向上舍入
+numObj.toFixed(6); // '12345.678900'；用零补足位数
+(1.23e20).toFixed(2); // '123000000000000000000.00'
+(1.23e-10).toFixed(2); // '0.00'
+(2.34).toFixed(1); // '2.3'
+(2.35).toFixed(1); // '2.4'；向上舍入
+(2.55).toFixed(1); // '2.5'
+// 它向下舍入，因为它无法用浮点数精确表示，并且最接近的可表示浮点数较小
+(2.449999999999999999).toFixed(1); // '2.5'
+// 向上舍入，因为它与 2.45 的差值小于 Number.EPSILON。
+// 这个字面量实际上编码和 2.45 相同的数值
+
+(6.02 * 10 ** 23).toFixed(50); // 6.019999999999999e+23；大数仍然使用指数表示法
+```
 
-(2.35).toFixed(1); // 返回 '2.4'. Note it rounds up
+### 对负数使用 toFixed()
 
-(2.55).toFixed(1) - // 返回 '2.5'. Note it rounds down - see warning above
-  (2.34).toFixed(1); // 返回 -2.3（由于操作符优先级，负数不会返回字符串）
+由于成员访问的[优先级](/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence)高于一元减号，你需要将负数表达式组合以获得一个字符串。
 
-(-2.34).toFixed(1); // 返回 "-2.3"（若用括号提高优先级，则返回字符串）
+```js-nolint
+-2.34.toFixed(1); // -2.3，数字
+(-2.34).toFixed(1); // '-2.3'
 ```
 
 ## 规范
@@ -71,8 +91,9 @@ numObj.toFixed(6); // 返回 "12345.678900"：用 0 填充
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.prototype.toExponential()")}}
 - {{jsxref("Number.prototype.toPrecision()")}}
 - {{jsxref("Number.prototype.toString()")}}
+- {{jsxref("Number.EPSILON")}}

From 43e8456641703722e0053c7a7c2ee507cf6e4a40 Mon Sep 17 00:00:00 2001
From: Shane <shanewestlife@outlook.com>
Date: Mon, 25 Sep 2023 20:40:03 +0800
Subject: [PATCH 140/268] zh-cn: fix typo in `Evolution_of_HTTP` (#16112)

zh-cn: fix typo
---
 files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md b/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md
index 0fdc4543af4878..1b7ba74593a26f 100644
--- a/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md
@@ -192,7 +192,7 @@ HTTP/2 在 HTTP/1.1 有几处基本的不同：
 
 ## HTTP/3——基于 QUIC 的 HTTP
 
-HTTP 的下一个主要版本，HTTP/3 有这与 HTTP 早期版本的相同语义，但在传输层部分使用 {{Glossary("QUIC")}} 而不是 {{Glossary("TCP")}}。到 2022 年 10 月，[26% 的网站正在使用 HTTP/3](https://w3techs.com/technologies/details/ce-http3)。
+HTTP 的下一个主要版本，HTTP/3 有着与 HTTP 早期版本的相同语义，但在传输层部分使用 {{Glossary("QUIC")}} 而不是 {{Glossary("TCP")}}。到 2022 年 10 月，[26% 的网站正在使用 HTTP/3](https://w3techs.com/technologies/details/ce-http3)。
 
 QUIC 旨在为 HTTP 连接设计更低的延迟。类似于 HTTP/2，它是一个多路复用协议，但是 HTTP/2 通过单个 TCP 连接运行，所以在 TCP 层处理的数据包丢失检测和重传可以阻止所有流。QUIC 通过 {{Glossary("UDP")}} 运行多个流，并为每个流独立实现数据包丢失检测和重传，因此如果发生错误，只有该数据包中包含数据的流才会被阻止。
 

From 5c17b84bf5ab13d7901a2c4c3c49811a4de207dd Mon Sep 17 00:00:00 2001
From: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>
Date: Mon, 25 Sep 2023 21:54:50 +0900
Subject: [PATCH 141/268] =?UTF-8?q?[ja]=20JavaScript=20`BigInt`=20?=
 =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E6=9B=B4=E6=96=B0=20(#1610?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Original source: https://github.com/mdn/content/blob/6d606174faaedaa5dee7b7ebd87602cd51e5dd7e/files/en-us/web/javascript/reference/global_objects/bigint/index.md
- Web (en-US): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt
- Web (ja): https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt
---
 .../reference/global_objects/bigint/index.md  | 246 +++++++++---------
 1 file changed, 128 insertions(+), 118 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/bigint/index.md b/files/ja/web/javascript/reference/global_objects/bigint/index.md
index 24d4173f3bff36..3c130c94e0f38e 100644
--- a/files/ja/web/javascript/reference/global_objects/bigint/index.md
+++ b/files/ja/web/javascript/reference/global_objects/bigint/index.md
@@ -1,49 +1,51 @@
 ---
 title: BigInt
 slug: Web/JavaScript/Reference/Global_Objects/BigInt
+l10n:
+  sourceCommit: 6d606174faaedaa5dee7b7ebd87602cd51e5dd7e
 ---
 
 {{JSRef}}
 
-**`BigInt`** は[プリミティブラッパーオブジェクト](/ja/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript)で、{{Glossary("Primitive", "プリミティブ")}}の `bigint` 値、すなわち[大きすぎて](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) `number` {{Glossary("Primitive", "プリミティブ")}}で表すことができない数を、表現したり操作したりするために使用します。
+**`BigInt`** は、[大きすぎて](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) `number` {{Glossary("Primitive", "プリミティブ")}}で表すことができない数を表現します。
 
 ## 解説
 
-**BigInt 値**は、単に **BigInt** と呼ばれることもありますが、 `bigint` {{Glossary("Primitive", "プリミティブ")}}です。整数リテラルの末尾に `n` を追加するか、 {{jsxref("Global_Objects/BigInt/BigInt", "BigInt()")}} コンストラクターを呼び出し、整数値または文字列値を与えることで生成することができます (ただし `new` 演算子なしで)。
+**BigInt 値**は、単に **BigInt** と呼ばれることもありますが、`bigint` {{Glossary("Primitive", "プリミティブ")}}です。整数リテラルの末尾に `n` を追加するか、{{jsxref("Global_Objects/BigInt/BigInt", "BigInt()")}} コンストラクターを呼び出し、整数値または文字列値を与えることで生成することができます（ただし `new` 演算子なしで）。
 
 ```js
 const previouslyMaxSafeInteger = 9007199254740991n;
 
 const alsoHuge = BigInt(9007199254740991);
-// ↪ 9007199254740991n
+// 9007199254740991n
 
 const hugeString = BigInt("9007199254740991");
-// ↪ 9007199254740991n
+// 9007199254740991n
 
 const hugeHex = BigInt("0x1fffffffffffff");
-// ↪ 9007199254740991n
+// 9007199254740991n
 
 const hugeOctal = BigInt("0o377777777777777777");
-// ↪ 9007199254740991n
+// 9007199254740991n
 
 const hugeBin = BigInt(
   "0b11111111111111111111111111111111111111111111111111111",
 );
-// ↪ 9007199254740991n
+// 9007199254740991n
 ```
 
-BigInt はいくつかの点で Number と似ていますが、重要ないくつかの点が異なります。組み込みの [`Math`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math) オブジェクト内のメソッドでは利用できず、演算で Number の値と混ぜることができません。同じ型に統一する必要があります。ただし、BigInt を Number へ変換する際には精度が落ちることがあるので、相互に変化する場合には注意が必要です。
+BigInt はいくつかの点で Number と似ていますが、重要ないくつかの点が異なります。組み込みの [`Math`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math) オブジェクト内のメソッドでは利用できず、演算で Number の値と混ぜることができません。同じ型に統一する必要があります。ただし、BigInt を Number へ変換する際には精度が落ちることがあるので、相互に変換する場合には注意が必要です。
 
 ### 型情報
 
-`typeof` の `BigInt` 値 (`bigint` プリミティブ) に対する評価値は、"`bigint`" となります。
+`typeof` の BigInt 値 (`bigint` プリミティブ) に対する評価値は、`"bigint"` となります。
 
 ```js
 typeof 1n === "bigint"; // true
 typeof BigInt("1") === "bigint"; // true
 ```
 
-BigInt の値は `Object` でラップすることができます。
+BigInt 値は `Object` でラップすることができます。
 
 ```js
 typeof Object(1n) === "object"; // true
@@ -53,89 +55,77 @@ typeof Object(1n) === "object"; // true
 
 以下の演算子は BigInt 値またはオブジェクトでラップした BigInt 値で使用することができます。
 
-```
+```plain
 + * - % **
 ```
 
-[ビット操作演算子](/ja/docs/Web/JavaScript/Reference/Operators)は、同様に利用できますが、 `>>>` (論理的右シフト) は BigInt が常に符号付きなので除外されます。
+[ビット操作演算子](/ja/docs/Web/JavaScript/Reference/Operators)も同様に利用できますが、`>>>`（論理的右シフト）は BigInt が常に符号付きなので除外されます。
 
-同様に、単項演算子 (`+`) は [asm.js を壊さないように](https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs)対応していません。
+同様に、[asm.js を壊さないようにするため](https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs)単項演算子（`+`）にも対応していません。
 
 ```js
 const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
-// ↪ 9007199254740991n
+// 9007199254740991n
 
 const maxPlusOne = previousMaxSafe + 1n;
-// ↪ 9007199254740992n
+// 9007199254740992n
 
 const theFuture = previousMaxSafe + 2n;
-// ↪ 9007199254740993n, this works now!
+// 9007199254740993n, this works now!
 
 const multi = previousMaxSafe * 2n;
-// ↪ 18014398509481982n
+// 18014398509481982n
 
 const subtr = multi - 10n;
-// ↪ 18014398509481972n
+// 18014398509481972n
 
 const mod = multi % 10n;
-// ↪ 2n
+// 2n
 
 const bigN = 2n ** 54n;
-// ↪ 18014398509481984n
+// 18014398509481984n
 
 bigN * -1n;
-// ↪ -18014398509481984n
+// -18014398509481984n
 ```
 
-`/` 演算子もすべての数値に対して、期待される通りに動作します。ただし、実数との演算では BigInt 値と演算する際に小数が切り捨てられます。実数を返すことはありません。
+`/` 演算子もすべての数値に対して、期待される通りに動作します。ただし、小数の結果をもつ演算では BigInt 値と演算する際に小数が切り捨てられます。小数点以下の桁数は返されません。
 
 ```js
 const expected = 4n / 2n;
-// ↪ 2n
+// 2n
 
 const truncated = 5n / 2n;
-// ↪ 2n, not 2.5n
+// 2n, not 2.5n
 ```
 
 ### 比較演算
 
-BigInt 値は Number 値と厳密等価ではありませんが、等価にはなります。
+BigInt 値は Number 値と厳密等価ではありませんが、*等価*にはなります。
 
 ```js
-0n === 0;
-// ↪ false
-
-0n == 0;
-// ↪ true
+0n === 0; // false
+0n == 0; // true
 ```
 
-Number と BigInt は通常通り比較できます。
+Number 値と BigInt 値は通常通り比較できます。
 
 ```js
-1n < 2;
-// ↪ true
-
-2n > 1;
-// ↪ true
-
-2 > 2;
-// ↪ false
-
-2n > 2;
-// ↪ false
-
-2n >= 2;
-// ↪ true
+1n < 2; // true
+2n > 1; // true
+2 > 2; // false
+2n > 2; // false
+2n >= 2; // true
 ```
 
-BigInt 値と Number 値は配列の要素に混在させたり並べ替えたりすることも可能です。
+BigInt 値と Number 値は配列内に混在させて並べ替えることができます。
 
 ```js
 const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
-// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+// [4n, 6, -12n, 10, 4, 0, 0n]
 
 mixed.sort(); // 既定の並べ替えの動作
-// ↪  [ -12n, 0, 0n, 10, 4n, 4, 6 ]
+// [ -12n, 0, 0n, 10, 4n, 4, 6 ]
 
 mixed.sort((a, b) => a - b);
 // 型が混在した減算はできないので動作しない
@@ -143,10 +133,10 @@ mixed.sort((a, b) => a - b);
 
 // 適切な数値比較関数を使用した並べ替え
 mixed.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
-// ↪  [ -12n, 0, 0n, 4n, 4, 6, 10 ]
+// [ -12n, 0, 0n, 4n, 4, 6, 10 ]
 ```
 
-なお、 `Object` にラップされた BigInt は他のオブジェクトと同様の振る舞いをします。同じインスタンス同士が比較された場合にのみ等価となります。
+なお、`Object` にラップされた BigInt は他のオブジェクトと同様の振る舞いをします。同じインスタンス同士が比較された場合にのみ等価となります。
 
 ```js
 0n === Object(0n); // false
@@ -156,12 +146,20 @@ const o = Object(0n);
 o === o; // true
 ```
 
+Number 値と BigInt 値の型変換は精度が落ちる可能性があるため、次のことを推奨します。
+
+- BigInt 値は、値が 2<sup>53</sup> を超えることが合理的に予想される場合にのみ使用する。
+- BigInt 値と Number 値の間で型変換を行わない。
+
 ### 条件式
 
 BigInt 値は次のような場合は Number 値のように動作します。
 
-- [`Boolean`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) へ変換される場合 ( [`Boolean`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) 関数を使用して)
-- [論理演算子](/ja/docs/Web/JavaScript/Reference/Operators)の `||`、`&&`、`!`、または [`if`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) 文のような条件式の中で使用された場合
+- [`Boolean`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) へ変換される場合（[`Boolean`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) 関数を使用して）
+- [論理演算子](/ja/docs/Web/JavaScript/Reference/Operators)の `||`、`&&`、`!` と一緒に使用された場合
+- または [`if`](/ja/docs/Web/JavaScript/Reference/Statements/if...else) 文のような条件式の中で使用された場合
+
+つまり、`0n` のみが[偽値](/ja/docs/Glossary/Falsy)で、他のすべては[真値](/ja/docs/Glossary/Truthy)となります。
 
 ```js
 if (0n) {
@@ -169,100 +167,112 @@ if (0n) {
 } else {
   console.log("Hello from the else!");
 }
+// "Hello from the else!"
+
+0n || 12n; // 12n
+0n && 12n; // 0n
+Boolean(0n); // false
+Boolean(12n); // true
+!12n; // false
+!0n; // true
+```
 
-// ↪ "Hello from the else!"
+### 暗号処理
 
-0n || 12n;
-// ↪ 12n
+BigInt で対応している演算は、実行時間が一定ではないので、[タイミング攻撃](https://en.wikipedia.org/wiki/Timing_attack)を受ける可能性があります。したがって、緩和要因がなければ JavaScript の BigInt を暗号処理で使うのは危険な可能性があります。非常に一般的な例として、攻撃者は `101n ** 65537n` と `17n ** 9999n` の時間差を計測し、経過時間にもとづいて秘密鍵のような秘匿情報の大きさを推定することができます。もしそれでも BigInt を使用しなければならない場合は、この問題に関する一般的なアドバイスが掲載されている[タイミング攻撃のFAQ](https://timing.attacks.cr.yp.to/programming.html)をご覧ください。
 
-0n && 12n;
-// ↪ 0n
+### JSON での使用
 
-Boolean(0n);
-// ↪ false
+[`JSON.stringify()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) を BigInt 値に対して使用すると `TypeError` が発生します。 BigInt 値は既定で JSON のシリアライズに対応していないためです。ただし、`JSON.stringify()` は特別に BigInt 値に対する裏口を残しており、 BigInt の `toJSON()` メソッドを呼び出そうとします（他のプリミティブ値に対してはそうしません）。したがって、自身で `toJSON()` メソッドを実装することができます（組み込みにオブジェクトにパッチを当てることが明確に抑止されていない数少ない例の一つ）。
 
-Boolean(12n);
-// ↪ true
+```js
+BigInt.prototype.toJSON = function () {
+  return this.toString();
+};
+```
 
-!12n;
-// ↪ false
+エラーを発生させるかわりに、`JSON.stringify()` は次のような文字列を生成します。
 
-!0n;
-// ↪ true
+```js
+console.log(JSON.stringify({ a: 1n }));
+// {"a":"1"}
 ```
 
-## コンストラクター
+もし `BigInt.prototype` にパッチを当てたくない場合は、 BigInt 値のシリアライズに `JSON.stringify()` の [`replacer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#replacer_引数) 引数を使うことができます。
 
-- [`BigInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt)
-  - : 新しい BigInt 値を生成します。
+```js
+const replacer = (key, value) =>
+  typeof value === "bigint" ? value.toString() : value;
 
-<h2 id="Methods" name="Methods">静的メソッド</h2>
+const data = {
+  number: 1,
+  big: 18014398509481982n,
+};
+const stringified = JSON.stringify(data, replacer);
 
-- [`BigInt.asIntN()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asIntN)
-  - : BigInt 値を符号付き整数値に丸め、その値を返します。
-- [`BigInt.asUintN()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asUintN)
-  - : BigInt 値を符号なし整数値に丸め、その値を返します。
+console.log(stringified);
+// {"number":1,"big":"18014398509481982"}
+```
 
-## インスタンスメソッド
+長整数になることがわかっている値を含む JSON データがある場合は、`JSON.parse` の [`reviver`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#reviver_引数の使用) 引数を使って対処することができます。
+
+```js
+const reviver = (key, value) => (key === "big" ? BigInt(value) : value);
 
-- [`BigInt.prototype.toLocaleString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString)
-  - : この BigInt 値の言語に合わせた表現の文字列を返します。 [`Object.prototype.toLocaleString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString) メソッドを上書きします。
-- [`BigInt.prototype.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toString)
-  - : この BigInt 値を指定された基数で表現した文字列を返します。 [`Object.prototype.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) メソッドを上書きします。
-- [`BigInt.prototype.valueOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/valueOf)
-  - : この BigInt 値を返します。 [`Object.prototype.valueOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) メソッドを上書きします。
+const payload = '{"number":1,"big":"18014398509481982"}';
+const parsed = JSON.parse(payload, reviver);
 
-## 使用方法の推奨事項
+console.log(parsed);
+// { number: 1, big: 18014398509481982n }
+```
 
-## 型変換
+> **メモ:** `JSON.stringify()` の replacer を汎用的にし、すべてのオブジェクトに対して BigInt 値を適切にシリアライズをすることが可能であるのに対し、`JSON.parse()` の reviver は期待するペイロードの形に特化していなければなりません。というのも、シリアライズは*非可逆的*だからです。つまり BigInt を表現する文字列と通常の文字列を区別することはできません。
 
-Number 値と BigInt 値との間の型変換は精度が落ちる可能性があるため、次のことを推奨します。
+### BigInt の変換
 
-- BigInt 値は、値が 2^53 を超えることが合理的に予想される場合にのみ使用する。
-- BigInt 値と Number 値の間で型変換を行わない。
+BigInt を期待する多くの組み込み演算は、まず引数を BigInt に変換します。[演算](https://tc39.es/ecma262/multipage/abstract-operations.html#sec-tobigint)は以下のように要約できます。
 
-### 暗号処理
+- BigInt はそのまま返される。
+- [`undefined`](/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined) と [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) は {{jsxref("TypeError")}} を発生させる。
+- `true` は `1n` になり、 `false` は `0n` になる。
+- 文字列は整数リテラルを含むかのように解析され、変換される。解析に失敗すると {{jsxref("SyntaxError")}} が発生する。
+- [数値](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number)は {{jsxref("TypeError")}} を発生させ、精度の低下を引き起こす意図しない暗黙の変換を防ぐ。
+- [シンボル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol)は {{jsxref("TypeError")}} を発生させる。
+- オブジェクトはまず、[`[@@toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) （`"number"` をヒントに指定）、`valueOf()`、`toString()` の順にメソッドを呼び出して[プリミティブ変換](/ja/docs/Web/JavaScript/Data_structures#プリミティブ変換)される。その結果のプリミティブは BigInt に変換される。
 
-BigInt で対応している演算は、実行時間が一定ではないので、[タイミング攻撃](https://en.wikipedia.org/wiki/Timing_attack)を受ける可能性があります。したがって、 JavaScript の BigInt は暗号処理での使用には向きません。
+JavaScript でほぼ同じ効果を得る最良の方法は、[`BigInt()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 関数を使うことです。`BigInt(x)` は同じアルゴリズムを使って `x` を変換しますが、[数値](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number)が {{jsxref("TypeError")}} を発生させず、整数であれば BigInt に変換される点が異なります。
 
-### JSON での使用
+BigInt を期待する組み込み演算は、変換後に BigInt を固定幅に切り詰めることが多いことに注意してください。これは {{jsxref("BigInt.asIntN()")}} と {{jsxref("BigInt.asUintN()")}} 、および {{jsxref("BigInt64Array")}} と {{jsxref("BigUint64Array")}} のメソッドも含みます。
 
-[`JSON.stringify()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) を BigInt 値に対して使用すると `TypeError` が発生します。 BigInt 値は既定で JSON のシリアライズに対応していないためです。ただし、 [replacer](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#the_replacer_parameter) 引数を `JSON.stringify` で使用すると、 BigInt のプロパティをエラーなしでシリアライズすることができます。
+## コンストラクター
 
-```js
-function replacer(key, value) {
-  if (key === "big") {
-    return value.toString();
-  }
-  return value;
-}
+- {{jsxref("BigInt/BigInt", "BigInt()")}}
+  - : 新しい BigInt 値を生成します。
 
-const data = {
-  number: 1,
-  big: BigInt("18014398509481982"),
-};
-const stringified = JSON.stringify(data, replacer);
+## 静的メソッド
 
-console.log(stringified);
-// ↪ '{"number":1,"big":"18014398509481982"}'
-```
+- {{jsxref("BigInt.asIntN()")}}
+  - : BigInt 値を符号付き整数値に丸め、その値を返します。
+- {{jsxref("BigInt.asUintN()")}}
+  - : BigInt 値を符号なし整数値に丸め、その値を返します。
 
-長整数になる値が含まれると思われる JSON データがある場合は、 [reviver](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#using_the_reviver_parameter) 引数を `JSON.parse` で使用することで取り扱うことができます。
+## インスタンスプロパティ
 
-```js
-function reviver(key, value) {
-  if (key === "big") {
-    return BigInt(value);
-  }
-  return value;
-}
+以下のプロパティは `BigInt.prototype` で定義されており、すべての `BigInt` インスタンスで共有されます。
 
-const payload = '{"number":1,"big":"18014398509481982"}';
-const parsed = JSON.parse(payload, reviver);
+- {{jsxref("Object/constructor", "BigInt.prototype.constructor")}}
+  - : インスタンスオブジェクトを作成したコンストラクター関数。`BigInt` インスタンスの場合、初期値は {{jsxref("BigInt/BigInt", "BigInt")}} コンストラクターです。
+- `BigInt.prototype[@@toStringTag]`
+  - : [`@@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列 `"BigInt"` です。このプロパティは {{jsxref("Object.prototype.toString()")}} で使われます。ただし、 `BigInt` も独自の [`toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toString) メソッドをもつので、`thisArg` として BigInt を指定して [`Object.prototype.toString.call()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call) を呼び出さないかぎりこのプロパティは使われません。
 
-console.log(parsed);
-// ↪ {number: 1, big: 18014398509481982n}
-```
+## インスタンスメソッド
+
+- {{jsxref("BigInt.prototype.toLocaleString()")}}
+  - : この BigInt 値の言語に合わせた表現の文字列を返します。[`Object.prototype.toLocaleString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString) メソッドを上書きします。
+- {{jsxref("BigInt.prototype.toString()")}}
+  - : この BigInt 値を指定された基数で表現した文字列を返します。[`Object.prototype.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) メソッドを上書きします。
+- {{jsxref("BigInt.prototype.valueOf()")}}
+  - : この BigInt 値を返します。[`Object.prototype.valueOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) メソッドを上書きします。
 
 ## 例
 
@@ -294,7 +304,7 @@ function nthPrime(nth) {
 }
 
 nthPrime(20n);
-// ↪ 73n
+// 73n
 ```
 
 ## 仕様書

From 0502e735978f1b8eace96a6b836c0740d78b2cae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= <mikecat@users.noreply.github.com>
Date: Mon, 25 Sep 2023 21:56:13 +0900
Subject: [PATCH 142/268] Translate Cookie Store API (#15922)

* Translate Cookie Store API

* Fix wording

* Improve wording
---
 files/ja/web/api/cookie_store_api/index.md | 37 ++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 files/ja/web/api/cookie_store_api/index.md

diff --git a/files/ja/web/api/cookie_store_api/index.md b/files/ja/web/api/cookie_store_api/index.md
new file mode 100644
index 00000000000000..48477db21830b6
--- /dev/null
+++ b/files/ja/web/api/cookie_store_api/index.md
@@ -0,0 +1,37 @@
+---
+title: Cookie Store API
+slug: Web/API/Cookie_Store_API
+l10n:
+  sourceCommit: e811fc31b67e145c5882e8e3f128d1938c627a51
+---
+
+{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}{{SeeCompatTable}}
+
+_**Cookie Store API**_ は Cookie を管理するための非同期 API を提供し、同時に Cookie を [Service Worker API](/ja/docs/Web/API/Service_Worker_API) から参照できるようにします。
+
+## 概念と使用法
+
+Cookie の取得や設定を行うこれまでの方法は、文字列であるキーと値のペアとして {{domxref("document.cookie")}} を扱うことでした。面倒で間違えやすい上に、モダンなウェブ開発の文脈では問題のもとになります。
+
+`document.cookie` インターフェイスは{{Glossary("synchronous", "同期的")}}で、シングルスレッドで、イベントループをブロックします。Cookie に書き込みを行うとき、ブラウザーがすべての Cookie の文字列を更新するまで待たなければいけません。さらに、{{domxref("document")}} に依存しているので、`document` オブジェクトにアクセスできないサービスワーカーからは Cookie にアクセスできません。
+
+_Cookie Store API_ は、Cookie を管理する新しい方法を提供します。これは{{Glossary("asynchronous", "非同期的")}}でプロミスベースなので、イベントループをブロックしません。{{domxref("document")}} に依存していないため、サービスワーカーから利用可能です。Cookie の取得や設定を行うメソッドは、エラーメッセージにより、より多くのフィードバックを提供します。これにより、ウェブ開発者は Cookie を設定した直後に読み込みを行って設定に成功したかを確認しなくてよくなります。
+
+## インターフェイス
+
+- {{domxref("CookieStore")}}
+  - : `CookieStore` インターフェイスは、Cookie の取得や設定を可能にします。
+- {{domxref("CookieStoreManager")}}
+  - : `CookieStoreManager` インターフェイスは、サービスワーカーが Cookie 変更イベントを購読できるよう、サービスワーカーの登録を提供します。
+- {{domxref("CookieChangeEvent")}}
+  - : `change` という名前の `CookieChangeEvent` は、スクリプトから参照可能な Cookie の変更が何か起こると、{{domxref("Window")}} コンテキストの `CookieStore` オブジェクトで発行されます。
+- {{domxref("ExtendableCookieChangeEvent")}}
+  - : `change` という名前の `ExtendableCookieChangeEvent` は、スクリプトから参照可能かつサービスワーカーの Cookie 変更購読リストにマッチする Cookie の変更が何か起こると、{{domxref("ServiceWorkerGlobalScope")}} イベントで発行されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 9ac91b5cb64892c301598c67bd7c67e0cbd27057 Mon Sep 17 00:00:00 2001
From: Timothy Liu <liuxf19@163.com>
Date: Tue, 26 Sep 2023 09:21:14 +0800
Subject: [PATCH 143/268] [zh-cn]: fix incorrect style of self-closing input
 tag (#16123)

---
 .../react_todo_list_beginning/index.md                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index 3854ad3e5156bc..0aa15d411536d5 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -231,7 +231,7 @@ function App(props) {
 <label className="todo-label" htmlFor="todo-0"> Eat </label>
 ```
 
-`<input/ >` 标签中的 `defaultChecked` 属性告诉 React 最初要检查这个复选框。如果我们像在普通的 HTML 中那样使用 `checked`，React 会在浏览器控制台中记录一些与处理复选框事件有关的警告，这是我们不想要的。现在不用太担心这个问题——我们将在以后使用事件的时候讨论这个问题。
+`<input />` 标签中的 `defaultChecked` 属性告诉 React 最初要检查这个复选框。如果我们像在普通的 HTML 中那样使用 `checked`，React 会在浏览器控制台中记录一些与处理复选框事件有关的警告，这是我们不想要的。现在不用太担心这个问题——我们将在以后使用事件的时候讨论这个问题。
 
 `htmlFor` 属性对应于 HTML 中使用的 `for` 属性。因为 `for` 是一个保留词，我们不能在 JSX 中使用 `for` 作为属性，所以 React 使用 `htmlFor` 代替。
 

From 34886bca82641443937b78d4b2efd5f832b1a8ca Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Tue, 26 Sep 2023 10:07:32 +0800
Subject: [PATCH 144/268] [zh-cn]: update translation of Number.toExponential()
 (#16090)

---
 .../number/toexponential/index.md             | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/toexponential/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/toexponential/index.md
index 5068535c4deb48..d92d9c7d171754 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/toexponential/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/toexponential/index.md
@@ -3,52 +3,55 @@ title: Number.prototype.toExponential()
 slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+{{jsxref("Number")}} 值的 **`toExponential()`** 方法返回一个以指数表示法表示该数字的字符串。
 
-**`toExponential()`** 方法以指数表示法返回该数值字符串表示形式。
+{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}
 
 ## 语法
 
-```plain
-numObj.toExponential(fractionDigits)
+```js-nolint
+toExponential()
+toExponential(fractionDigits)
 ```
 
 ### 参数
 
-- fractionDigits
-  - : 可选。一个整数，用来指定小数点后有几位数字。默认情况下用尽可能多的位数来显示数字。
+- `fractionDigits` {{optional_inline}}
+  - : 可选。一个整数，用来指定小数点后有几位数字。默认设置为完整表示该数字所需要的数字。
 
 ### 返回值
 
-一个用幂的形式 (科学记数法) 来表示{{jsxref("Number")}} 对象的字符串。小数点后以 fractionDigits 提供的值来四舍五入。如果 `fractionDigits` 参数被忽略了，小数点后的将尽可能用最多的位数来表示该数值。
-
-对数值字面量使用 `toExponential()` 方法，且该数值没有小数点和指数时，应该在该数值与该方法之间隔开一个空格，以避免点号被解释为一个小数点。也可以使用两个点号调用该方法。
-
-如果一个数值的小数位数多余 `fractionDigits` 参数所提供的，则该数值将会在 `fractionDigits` 指定的小数位数处四舍五入。可以查看 {{jsxref("Number.toFixed", "toFixed()")}} 方法描述中关于四舍五入的讨论，同样应用于 `toExponential()` 方法。
+一个以指数表示法表示给定 {{jsxref("Number")}} 对象的的字符串，其小数点前为一位数字，小数点后舍入到 `fractionDigits` 位。
 
 ### 异常
 
-- {{jsxref("Global_Objects/RangeError", "RangeError")}}
-  - : 如果 _fractionDigits_ 太小或太大将会抛出该错误。介于 0 和 20（包括 20）之间的值不会引起 `RangeError` 。执行环境也可以支持更大或更小范围。
-- {{jsxref("Global_Objects/TypeError", "TypeError")}}
-  - : 如果该方法在一个非数值类型对象上调用。
+- {{jsxref("RangeError")}}
+  - : 如果 `fractionDigits` 不是介于 `0` 和 `100` 之间（包含两端）的整数，则抛出该错误。
+- {{jsxref("TypeError")}}
+  - : 如果在非 {{jsxref("Number")}} 对象上调用该方法，则抛出该错误。
 
-## 示例
+## 描述
 
-```js
-var numObj = 77.1234;
+如果省略了 `fractionDigits` 参数，则小数点后的位数默认为精确表示该值的所需的位数。
 
-alert("numObj.toExponential() is " + numObj.toExponential()); //输出 7.71234e+1
+如果你为一个没有指数也没有小数点的数字字面量使用 `toExponential()` 方法。请在方法调用之前的点之前留出空格，以防止该点被解释为小数点。
 
-alert("numObj.toExponential(4) is " + numObj.toExponential(4)); //输出 7.7123e+1
+如果一个数字的位数比 `fractionDigits` 参数指定的位数更多，则该数字将被舍入为最接近的数字，请参阅 {{jsxref("Number.prototype.toFixed", "toFixed()")}} 方法的描述中关于舍入的讨论，这也适用于 `toExponential()`。
 
-alert("numObj.toExponential(2) is " + numObj.toExponential(2)); //输出 7.71e+1
+## 示例
+
+### 使用 toExponential
 
-alert("77.1234.toExponential() is " + (77.1234).toExponential()); //输出 7.71234e+1
+```js
+const numObj = 77.1234;
 
-alert("77 .toExponential() is " + (77).toExponential()); //输出 7.7e+1
+console.log(numObj.toExponential()); // 7.71234e+1
+console.log(numObj.toExponential(4)); // 7.7123e+1
+console.log(numObj.toExponential(2)); // 7.71e+1
+console.log((77.1234).toExponential()); // 7.71234e+1
+console.log((77).toExponential()); // 7.7e+1
 ```
 
 ## 规范
@@ -59,8 +62,9 @@ alert("77 .toExponential() is " + (77).toExponential()); //输出 7.7e+1
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
+- [`core-js` 中 `Number.prototype.toExponential` 的 polyfill，并对此方法进行了修复](https://github.com/zloirock/core-js#ecmascript-number)
 - {{jsxref("Number.prototype.toFixed()")}}
 - {{jsxref("Number.prototype.toPrecision()")}}
 - {{jsxref("Number.prototype.toString()")}}

From edd7d4427f53ab2e2fccc76812dd76256de78dd5 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Tue, 26 Sep 2023 11:13:54 +0200
Subject: [PATCH 145/268] chore(codeowners): remove `@mdn/core-dev` from
 {CONTRIBUTING,PEERS_GUIDELINES}.md (#16130)

---
 .github/CODEOWNERS | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index c024915e998242..df904b8d21d8ed 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -87,4 +87,6 @@
 /.github/     @mdn/core-dev
 /*            @mdn/core-dev
 /*.md         @mdn/core-dev @mdn/core-yari-content
+/CONTRIBUTING.md            @mdn/core-yari-content
+/PEERS_GUIDELINES.md        @mdn/core-yari-content
 /.prettierignore

From 2d536497479a1319ddad58ef1d427bca682426ad Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 26 Sep 2023 21:15:35 +0900
Subject: [PATCH 146/268] [ko] add index.md for `web/glossary/control_flow`
 (#15854)

---
 files/ko/glossary/control_flow/index.md | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 files/ko/glossary/control_flow/index.md

diff --git a/files/ko/glossary/control_flow/index.md b/files/ko/glossary/control_flow/index.md
new file mode 100644
index 00000000000000..85ec78f61e58e6
--- /dev/null
+++ b/files/ko/glossary/control_flow/index.md
@@ -0,0 +1,34 @@
+---
+title: 제어 흐름 (Control flow)
+slug: Glossary/Control_flow
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+'제어 흐름'은 컴퓨터가 스크립트의 명령문을 실행하는 순서입니다.
+
+컴퓨터가 조건문 및 루프아 같이 제어 흐름을 변경하는 (매우 빈번합니다) 구조를 통해 실행되지 않는 한, 코드는 파일의 첫 번재 줄부터 마지막 줄까지 순서대로 실행됩니다.
+
+예를 들어, 웹페이지 양식에서 사용자 데이터의 유효성을 검사하는 데 사용되는 스크립트를 상상해보세요. 스크립트는 검증된 데이터를 제출하지만, 사용자가 필수 입력 필드를 비워두면, 이를 입력하라는 메시지를 표시합니다. 이를 위해서, 스크립트는 {{Glossary("Conditional", "조건")}} 구조 또는 `if...else`를 사용하여 양식이 다 채워졌는지 여부에 따라 다른 코드가 실행되도록 합니다.
+
+```js
+if (isEmpty(field)) {
+  promptUser();
+} else {
+  submitForm();
+}
+```
+
+{{glossary("JavaScript")}} 또는 {{glossary("PHP")}} 등의 일반적인 스크립트에는 조건문, {{Glossary("Loop", "반복문")}} 및 {{Glossary("Function", "함수")}}를 포함한 많은 제어 구조가 포함되어 있습니다. {{Glossary("Event", "이벤트")}}가 발생할 때 스크립트의 일부가 실행되도록 설정할 수도 있습니다.
+
+예를 들어, 위의 인용문은 사용자가 양식에 대해 **제출** 버튼을 클릭할 때 실행되는 함수 내에 있을 수 있습니다. 함수에는 양식의 모든 필드를 반복하여 각 필디를 차례로 확인하는 반복문이 포함될 수도 있습니다. `if` 및 `else` 섹션의 코드를 다시 살펴보면, `promptUser` 및 `submitForm` 줄은 스크립트의 다른 함수에 대한 호출일 수도 있습니다. 보시다시피, 제어 구조는 단 몇 줄의 코드로도 복잡한 처리 흐름을 지시할 수 있습니다.
+
+제어 흐름은 스크립트를 읽을 때 처음부터 끝까지 읽어야 할 뿐만 아니라 프로그램 구조와 실행 순서에 미치는 영향도 살펴봐야 함을 의미합니다.
+
+## 같이 보기
+
+- 위키백과의 [제어 흐름](https://en.wikipedia.org/wiki/Control_flow)
+- MDN의 [JavaScript 참조 - 제어 흐름](/ko/docs/Web/JavaScript/Reference#control_flow)
+- MDN의 [명령문 (제어 흐름)](/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)

From 4203f54071c1fb2a63f185b569e3326e7e531924 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 22 Sep 2023 22:30:39 +0900
Subject: [PATCH 147/268] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../readablestreambyobreader/read/index.md    | 131 +++++++++++++++---
 1 file changed, 114 insertions(+), 17 deletions(-)

diff --git a/files/ja/web/api/readablestreambyobreader/read/index.md b/files/ja/web/api/readablestreambyobreader/read/index.md
index 520ae05367ed4d..51be94d444537c 100644
--- a/files/ja/web/api/readablestreambyobreader/read/index.md
+++ b/files/ja/web/api/readablestreambyobreader/read/index.md
@@ -1,44 +1,141 @@
 ---
-title: ReadableStreamBYOBReader.read()
+title: "ReadableStreamBYOBReader: read() メソッド"
+short-title: read()
 slug: Web/API/ReadableStreamBYOBReader/read
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableStreamBYOBReader")}} インターフェイスの **`read()`** メソッドは、バイトストリームの内部キュー内の次のチャンクへのアクセスを提供する promise を返します。
+**`read()`** は {{domxref("ReadableStreamBYOBReader")}} インターフェイスのメソッドで、ユーザーが提供したバッファー上のビューに、関連付けられた[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)からデータを読み込むために使用します。
+データに対するリクエストは、データを説明しているものがあれば、ストリームの内部キューから満たされます。
+ストリームキューが空の場合、リクエストは、基盤のバイトソースからのゼロコピー移譲として供給されるかもしれません。
+
+このメソッドは、渡されたデータを読み込むバッファーに対するビューを引数として取り、プロミス ({{jsxref("Promise")}}) を返します。
+このプロミスは、データが利用できるようになったとき、またはストリームが取り消される可能性があるときに `value` と `done` のプロパティを持つオブジェクトで履行されます。
+ストリームがエラーになった場合、プロミスは関連するエラーオブジェクトと共に拒否されます。
+
+データの塊が渡された場合、 `value` プロパティには新しいビューが格納されます。
+これは `read()` メソッドに渡された元の `view` と同じバッファー/バッキングメモリ（および同じ型）上のビューになります。
+プロミスが履行されると、メソッドに渡された元の `view` は切り離され、使えなくなることに注意してください。
+ストリームが取り消された可能性がある場合、プロミスは `value: undefined` で履行されます。
+この場合、 `view` のバッキングメモリー領域は破棄され、呼び出し側には返されません（ビューのバッファー内の前回読み込んだデータはすべて失われます）。
+
+`done` プロパティは、さらなるデータが期待されるかどうかを示します。
+この値は、ストリームが閉じられたり取り消されたり可能性がある場合は `true` に設定され、そうでない場合は `false` に設定されます。
 
 ## 構文
 
-```
-var promise = readableStreamBYOBReader.read(view);
+```js-nolint
+read(view)
 ```
 
-### パラメーター
+### 引数
 
-- view
+- `view`
   - : 読み込み先のビュー。
 
-### 戻り値
+### 返値
+
+プロミス ({{jsxref("Promise")}}) で、ストリームの状態に応じた結果で履行または拒否されます。
+
+取りうる値は次の通りです。
+
+- 塊が利用でき、ストリームがまだアクティブであれば、プロミスは次の形のオブジェクトで履行されます。
+
+  ```js
+  { value: theChunk, done: false }
+  ```
+
+  `theChunk` は新しいデータを格納するビューです。
+  これは `read()` メソッドに渡された `view` と同じ型で、同じバッキングメモリー上のビューです。
+  元の `view` は切り離されて使えなくなりました。
+
+- ストリームが閉じられた場合、プロミスは（`theChunk` を上記と同じプロパティを持つ）形式のオブジェクトで履行されます。
+
+  ```js
+  { value: theChunk, done: true }
+  ```
 
-{{jsxref("Promise")}}。 ストリームの状態に応じて結果を充足/拒否します。 異なる可能性は次のとおりです。
+- If the stream is cancelled, the promise fulfills with an object of the form:
 
-- チャンクが使用可能な場合、`{ value: theChunk, done: false }` の形式のオブジェクトで promise が満たされます。
-- ストリームが閉じられると、`{ value: undefined, done: true }` という形式のオブジェクトで promise が満たされます。
-- ストリームがエラーになると、関連するエラーで promise が拒否されます。
+  ```js
+  { value: undefined, done: true }
+  ```
+
+  In this case the backing memory is discarded.
+
+- If the stream throws an error, the promise rejects with the relevant error.
 
 ### 例外
 
-- TypeError
-  - : ソースオブジェクトが `ReadableStreamBYOBReader` ではない、ストリームに所有者がない、ビューがオブジェクトではない、または切り離されている、またはビューの長さが 0 である。
+- {{jsxref("TypeError")}}
+  - : 元のオブジェクトが `ReadableStreamBYOBReader` ではないか、ストリームにオーナーがいないか、ビューがオブジェクトでないか、切り離されているか、ビューの長さが 0 であるか、（待機中の読み取りリクエストがある場合に） {{domxref("ReadableStreamBYOBReader.releaseLock()")}} が呼び出された場合。
 
 ## 例
 
-未定。
+以下の例は、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#例)から取ったものです。
+
+まず、ストリーム上で {{domxref("ReadableStream.getReader()")}} を使用してリーダーを作成します。 options 引数に `mode: "byob"` を指定します。
+`ArrayBuffer` も作成する必要があります。これはビューの「バッキングメモリー」で、ここに書き込むことになります。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+let buffer = new ArrayBuffer(4000);
+```
+
+リーダーを使用する関数を下記に示します。
+これは `read()` メソッドを再帰的に呼び出して、データをバッファーに読み込みます。
+このメソッドは [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) [型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)を取ります。これは、元の配列バッファーでまだ書き込まれていない部分のビューです。
+ビューの引数は、前回呼び出された際に受け取ったデータから計算され、元の配列バッファーへのオフセットを定義します。
+
+```js
+readStream(reader);
+
+function readStream(reader) {
+  let bytesReceived = 0;
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    // read() returns a promise that fulfills when a value has been received
+    reader
+      .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+      .then(function processBytes({ done, value }) {
+        // Result objects contain two properties:
+        // done - true if the stream has already given all its data.
+        // value - some data. 'undefined' if the reader is canceled.
+
+        if (done) {
+          // There is no more data in the stream
+          return;
+        }
+
+        buffer = value.buffer;
+        offset += value.byteLength;
+        bytesReceived += value.byteLength;
+
+        // Read some more, and call this function again
+        // Note that here we create a new view over the original buffer.
+        return reader
+          .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+          .then(processBytes);
+      });
+  }
+}
+```
+
+ストリームにデータがなくなると、`read()` メソッドは `done` プロパティを `true` に設定したオブジェクトで履行され、関数を返します。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamBYOBReader.read")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamBYOBReader.ReadableStreamBYOBReader", "ReadableStreamBYOBReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)

From 02a709e0b5b62ef71cc1f7bd58f7df3f492b3c66 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 21 Sep 2023 23:45:58 +0900
Subject: [PATCH 148/268] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../readablestreambyobreader/cancel/index.md  |  49 +++++---
 .../readablestreambyobreader/closed/index.md  |  39 ++++--
 .../web/api/readablestreambyobreader/index.md | 117 ++++++++++++++++--
 .../readablestreambyobreader/index.md         |  35 ++++--
 .../releaselock/index.md                      |  44 ++++---
 5 files changed, 223 insertions(+), 61 deletions(-)

diff --git a/files/ja/web/api/readablestreambyobreader/cancel/index.md b/files/ja/web/api/readablestreambyobreader/cancel/index.md
index 0ca202bd1d90f3..f61460fce40eca 100644
--- a/files/ja/web/api/readablestreambyobreader/cancel/index.md
+++ b/files/ja/web/api/readablestreambyobreader/cancel/index.md
@@ -1,42 +1,61 @@
 ---
-title: ReadableStreamBYOBReader.cancel()
+title: "ReadableStreamBYOBReader: cancel() メソッド"
+short-title: cancel()
 slug: Web/API/ReadableStreamBYOBReader/cancel
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableStreamBYOBReader")}} インターフェイスの **`cancel()`** メソッドはストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された `reason` パラメーターは、基になるソースに与えられ、使用する場合もしない場合もあります。
+**`cancel()`** は {{domxref("ReadableStreamBYOBReader")}} インターフェイスのメソッドで、ストリームがキャンセルされたときに解決するプロミス ({{jsxref("Promise")}}) を返します。
+このメソッドを呼び出すと、コンシューマーがストリームへの関心を失ったことを示します。
 
-> **メモ:** リーダーがアクティブな場合、`cancel()` メソッドは、関連するストリームの場合（{{domxref("ReadableStream.cancel()")}}）と同じように振る舞います。
+> **メモ:** リーダーがアクティブな場合、 `cancel()` メソッドは、関連するストリームの場合（{{domxref("ReadableStream.cancel()")}}）と同じように振る舞います。
 
 ## 構文
 
-```
-var promise = readableStreamBYOBReader.cancel(reason);
+```js-nolint
+cancel()
+cancel(reason)
 ```
 
-### パラメーター
+### 引数
 
-- reason
-  - : 人間が読むことができるキャンセルの理由を提供する {{domxref("DOMString")}}。
+- `reason` {{optional_inline}}
+  - : 人間が読むことができるキャンセルの理由です。基盤ソースは使用しても使用しなくても構いません。
 
-### 戻り値
+### 返値
 
-{{jsxref("Promise")}}。 `reason` パラメーターで指定された値で満たされます。
+プロミス ({{jsxref("Promise")}})。 `reason` 引数で指定された値で満たされます。
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableStreamBYOBReader` ではないか、ストリームに所有者がいません。
 
 ## 例
 
-未定。
+このコード例では、ボタンが押されたときに `cancel()` メソッドを呼び出します。理由として文字列 "user choice" を渡します。
+プロミスはキャンセルが完了すると解決します。
+
+```js
+button.addEventListener("click", () => {
+  reader.cancel("user choice").then(() => console.log(`cancel complete`));
+});
+```
+
+このコードは、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#result)の例で実行することができます（**Cancel stream** ボタンを押してください）。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamBYOBReader.cancel")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamBYOBReader.ReadableStreamBYOBReader", "ReadableStreamBYOBReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
diff --git a/files/ja/web/api/readablestreambyobreader/closed/index.md b/files/ja/web/api/readablestreambyobreader/closed/index.md
index 8ea58825049f29..13f6173acd5e56 100644
--- a/files/ja/web/api/readablestreambyobreader/closed/index.md
+++ b/files/ja/web/api/readablestreambyobreader/closed/index.md
@@ -1,30 +1,45 @@
 ---
-title: ReadableStreamBYOBReader.closed
+title: "ReadableStreamBYOBReader: closed プロパティ"
+short-title: closed
 slug: Web/API/ReadableStreamBYOBReader/closed
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableStreamBYOBReader")}} インターフェイスの **`closed`** 読み取り専用プロパティは、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たし、ストリームがエラーの場合は拒否する promise を返します。
+**`closed`** は {{domxref("ReadableStreamBYOBReader")}} インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行され、ストリームがエラーの場合は拒否されるプロミスを返します。
 
-## 構文
-
-```
-var closed = readableStreamBYOBReader.closed;
-```
+このプロパティにより、ストリーミング処理の終わりに応答するコードを書くことができます。
 
 ### 値
 
-{{jsxref("Promise")}}。
+{{jsxref("Promise")}} です。
 
 ## 例
 
-未定。
+下記コードは BYOBReader の閉じられたかエラーかの状態を処理するパターンを示します。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+reader.closed
+  .then(() => {
+    // 解決 - ストリームを閉じるコード
+  })
+  .catch(() => {
+    // 拒否 - エラーを扱うコード
+  });
+```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamBYOBReader.closed")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamBYOBReader.ReadableStreamBYOBReader", "ReadableStreamBYOBReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
diff --git a/files/ja/web/api/readablestreambyobreader/index.md b/files/ja/web/api/readablestreambyobreader/index.md
index c5e8baa18c79df..725d277d3251cf 100644
--- a/files/ja/web/api/readablestreambyobreader/index.md
+++ b/files/ja/web/api/readablestreambyobreader/index.md
@@ -1,23 +1,35 @@
 ---
 title: ReadableStreamBYOBReader
 slug: Web/API/ReadableStreamBYOBReader
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{APIRef("Streams")}}{{SeeCompatTable}}
+{{APIRef("Streams")}}
 
-[Streams API](/ja/docs/Web/API/Streams_API) の `ReadableStreamBYOBReader` インターフェイスは、開発者が提供するストリームデータ（カスタムの {{domxref("ReadableStream.ReadableStream","ReadableStream()")}} コンストラクターなど）の読み取りに使用できる BYOB（"bring your own buffer"）リーダーを表します。
+`ReadableStreamBYOBReader` は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、 {{domxref("ReadableStream")}} 用のリーダーを定義します。このリーダーは、基盤となるバイトソースからのゼロコピー読み込みに対応しています。
+ファイルなど、データがバイト列の「無名」シーケンスとして配信される基盤から効率的にコピーするために使用します。
+
+このリーダー型のインスタンスは、通常、ストリーム上で {{domxref("ReadableStream.getReader()")}} を呼び出して、オプション引数に `mode: "byob"` を指定します。
+読み取り可能なストリームは、基盤バイトソースを保有していなければなりません。言い換えれば、[構築](/ja/docs/Web/API/ReadableStream/ReadableStream)時に[`type: "bytes"`](/ja/docs/Web/API/ReadableStream/ReadableStream#type)を持つ基盤を指定されていなければなりません。
+
+この種のリーダーを使用すると、読み取り可能なストリームの内部キューが空のときに [`read()`](#readablestreambyobreader.read) リクエストを行うと、基盤となっているソースから（ストリームの内部キューをバイパスして）ゼロコピーで移譲されます。
+内部キューが空でない場合、 `read()` はバッファーされたデータからリクエストを満たします。
+
+メソッドとプロパティは 既定のリーダー ({{domxref("ReadableStreamDefaultReader")}}) のものと似ていることに注意してください。
+`read()` メソッドは、データを書き込むビューを提供するという点で異なります。
 
 ## コンストラクター
 
 - {{domxref("ReadableStreamBYOBReader.ReadableStreamBYOBReader", "ReadableStreamBYOBReader()")}}
   - : `ReadableStreamBYOBReader` オブジェクトのインスタンスを作成して返します。
 
-## プロパティ
+## インスタンスプロパティ
 
-- {{domxref("ReadableStreamBYOBReader.closed")}} {{readonlyInline}}
-  - : ストリーミングプロセスの終了に応答するコードを記述できます。 ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たす promise を返します。 ストリームがエラーの場合は拒否します。
+- {{domxref("ReadableStreamBYOBReader.closed")}} {{ReadOnlyInline}}
+  - : ストリーミングプロセスの終了に応答するコードを記述できます。ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たすプロミスを返します。ストリームがエラーの場合は拒否します。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("ReadableStreamBYOBReader.cancel()")}}
   - : ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された `reason` 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。
@@ -28,12 +40,99 @@ slug: Web/API/ReadableStreamBYOBReader
 
 ## 例
 
-未定。
+以下の例は、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#例)から取ったものです。
+
+まず、ストリーム上で {{domxref("ReadableStream.getReader()")}} を使用してリーダーを作成します。オプション引数に "byob"` を指定します。
+これは "Bring Your Own Buffer" リーダーなので、読み込むための `ArrayBuffer` も作成する必要があります。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+let buffer = new ArrayBuffer(4000);
+```
+
+リーダーを使用する関数を下記に示します。
+これは `read()` メソッドを再帰的に呼び出して、データをバッファーに読み込みます。
+このメソッドは [`Uint8Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) [型付き配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)を取り、これが これは、元の配列バッファーでまだ書き込まれていない部分のビューです。
+ビューの引数は、前回呼び出された際に受け取ったデータから計算され、元配列バッファーへのオフセットを定義します。
+
+```js
+readStream(reader);
+
+function readStream(reader) {
+  let bytesReceived = 0;
+  let offset = 0;
+
+  while (offset < buffer.byteLength) {
+    // read() returns a promise that resolves when a value has been received
+    reader
+      .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+      .then(function processBytes({ done, value }) {
+        // Result objects contain two properties:
+        // done - true if the stream has already given all its data.
+        // value - some data. Always undefined when done is true.
+
+        if (done) {
+          // There is no more data in the stream
+          return;
+        }
+
+        buffer = value.buffer;
+        offset += value.byteLength;
+        bytesReceived += value.byteLength;
 
-## 仕様
+        // Read some more, and call this function again
+        return reader
+          .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
+          .then(processBytes);
+      });
+  }
+}
+```
+
+ストリームにデータがなくなると、`read()`メソッドはプロパティ `done` を `true` に設定したオブジェクトで解決し、関数を返します。
+
+{{domxref("ReadableStreamBYOBReader.closed")}} プロパティはプロミスを返し、ストリームが閉じられたり、エラーとされたり、リーダーロックが解放されたりすることを監視するために使用することができます。
+
+```js
+reader.closed
+  .then(() => {
+    // Resolved - code to handle stream closing
+  })
+  .catch(() => {
+    // Rejected - code to handle error
+  });
+```
+
+ストリームを取り消すには {{domxref("ReadableStreamBYOBReader.cancel()")}} を呼び出します。オプションで理由を指定します。
+これは、ストリームが取り消される可能性を解決するプロミスを返します。
+ストリームがキャンセルされると、コントローラは次に `cancel()` を基盤となるソース上で呼び出します。
+
+[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#例)の例では、次のようにボタンが押されたときに cancel メソッドを呼び出します。
+
+```js
+button.addEventListener("click", () => {
+  reader.cancel("user choice").then(() => console.log("cancel complete"));
+});
+```
+
+コンシューマーは `releaseLock()` を呼び出して、ストリーム上のリーダーの保持を解放することもできますが、これは読み込みが待機していない場合に限られます。
+
+```js
+reader.releaseLock();
+```
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamBYOBReader")}}
+{{Compat}}
+
+## 関連情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API)
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
+- {{domxref("ReadableStream")}}
+- [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/), for a basic visualization of readable, writable, and transform streams.
+- [Web-streams-polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) or [sd-streams](https://github.com/stardazed/sd-streams) - polyfills
diff --git a/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md b/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md
index f59178c2a14446..04810700ac8160 100644
--- a/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md
+++ b/files/ja/web/api/readablestreambyobreader/readablestreambyobreader/index.md
@@ -1,26 +1,29 @@
 ---
-title: ReadableStreamBYOBReader.ReadableStreamBYOBReader()
+title: "ReadableStreamBYOBReader: ReadableStreamBYOBReader() コンストラクター"
+short-title: ReadableStreamBYOBReader()
 slug: Web/API/ReadableStreamBYOBReader/ReadableStreamBYOBReader
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
 **`ReadableStreamBYOBReader()`** コンストラクターは、`ReadableStreamBYOBReader` オブジェクトのインスタンスを作成して返します。
 
-> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドを使用します。
+> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドに `"byob"` を引数につけて使用してください。
 
 ## 構文
 
-```
-var readableStreamBYOBReader = new ReadableStreamBYOBReader(stream);
+```js-nolint
+new ReadableStreamBYOBReader(stream)
 ```
 
-### パラメーター
+### 引数
 
-- stream
+- `stream`
   - : 読み取られる {{domxref("ReadableStream")}}。
 
-### 戻り値
+### 返値
 
 {{domxref("ReadableStreamBYOBReader")}} オブジェクトのインスタンス。
 
@@ -31,12 +34,22 @@ var readableStreamBYOBReader = new ReadableStreamBYOBReader(stream);
 
 ## 例
 
-未定。
+コンストラクターが直接呼び出されることはほとんどありません。
+代わりに、表示させるように {{domxref("ReadableStream.getReader()")}} を呼び出してください。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamBYOBReader.ReadableStreamBYOBReader")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamBYOBReader")}}
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)
diff --git a/files/ja/web/api/readablestreambyobreader/releaselock/index.md b/files/ja/web/api/readablestreambyobreader/releaselock/index.md
index d3ca0ff6b46be6..aa731206ddc5ad 100644
--- a/files/ja/web/api/readablestreambyobreader/releaselock/index.md
+++ b/files/ja/web/api/readablestreambyobreader/releaselock/index.md
@@ -1,43 +1,59 @@
 ---
-title: ReadableStreamBYOBReader.releaseLock()
+title: "ReadableStreamBYOBReader: releaseLock() メソッド"
+short-title: releaseLock()
 slug: Web/API/ReadableStreamBYOBReader/releaseLock
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
-{{SeeCompatTable}}{{APIRef("Streams")}}
+{{APIRef("Streams")}}
 
-{{domxref("ReadableStreamBYOBReader")}} インターフェイスの **`releaseLock()`** メソッドは、ストリーム上のリーダーのロックを解除します。 ロックを解除すると、リーダーはアクティブではなくなります。
+**`releaseLock()`** は {{domxref("ReadableStreamBYOBReader")}} インターフェイスのメソッドで、ストリーム上のリーダーのロックを解除します。
+ロックを解除すると、リーダーはアクティブではなくなります。
 
 ロックを解除したときに関連するストリームにエラーが発生した場合、リーダーはその後同様にエラーが発生したようになります。 そうでない場合、リーダーは閉じた状態になります。
 
-リーダーのロックは、保留中の読み取り要求が残っている間、つまり、リーダーの {{domxref("ReadableStreamBYOBReader.read()")}} メソッドによって返された promise が終了していない場合、解除できません。 これにより、`TypeError` がスローされます。
+保留中の読み込みリクエストがある間にリーダーのロックが解除された場合、リーダーの {{domxref("ReadableStreamBYOBReader.read()")}} メソッドによって返されるプロミスは、直ちに `TypeError` で拒否されます。
+未読の塊はストリームの内部キューに残り、後で新しいリーダーを取得することで読み取ることができます。
 
 ## 構文
 
-```
-readableStreamBYOBReader.releaseLock();
+```js-nolint
+releaseLock()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
-- TypeError
-  - : ソースオブジェクトが `ReadableStreamBYOBReader` でないか、読み取り要求が保留中です。
+- {{jsxref("TypeError")}}
+  - : ソースオブジェクトが `ReadableStreamBYOBReader` ではない場合に発生します。
 
 ## 例
 
-未定。
+簡単な例を下記に示します。
+ストリーム上にリーダーが作成されると同時にロックが作成されます。
+
+```js
+const reader = stream.getReader({ mode: "byob" });
+reader.releaseLock();
+```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamBYOBReader.releaseLock")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamBYOBReader.ReadableStreamBYOBReader", "ReadableStreamBYOBReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)

From 40fc8a752b530c194421e64ae603721f773afd5a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 23 Sep 2023 03:12:32 +0900
Subject: [PATCH 149/268] Update index.md

---
 files/ja/web/api/readablestreambyobreader/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/readablestreambyobreader/index.md b/files/ja/web/api/readablestreambyobreader/index.md
index 725d277d3251cf..22d053715ba62e 100644
--- a/files/ja/web/api/readablestreambyobreader/index.md
+++ b/files/ja/web/api/readablestreambyobreader/index.md
@@ -42,7 +42,7 @@ l10n:
 
 以下の例は、[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#例)から取ったものです。
 
-まず、ストリーム上で {{domxref("ReadableStream.getReader()")}} を使用してリーダーを作成します。オプション引数に "byob"` を指定します。
+まず、ストリーム上で {{domxref("ReadableStream.getReader()")}} を使用してリーダーを作成します。 options 引数に `mode: "byob"` を指定します。
 これは "Bring Your Own Buffer" リーダーなので、読み込むための `ArrayBuffer` も作成する必要があります。
 
 ```js

From 4f9134084111241581b712a0fd8236a70eaad99f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 12:44:47 +0900
Subject: [PATCH 150/268] =?UTF-8?q?=E8=A8=B3=E8=AA=9E=E3=81=AE=E7=B5=B1?=
 =?UTF-8?q?=E4=B8=80=EF=BC=9A=E5=A1=8A=E2=86=92=E3=83=81=E3=83=A3=E3=83=B3?=
 =?UTF-8?q?=E3=82=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/readablestreambyobreader/read/index.md       | 4 ++--
 .../ja/web/api/readablestreambyobreader/releaselock/index.md  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/api/readablestreambyobreader/read/index.md b/files/ja/web/api/readablestreambyobreader/read/index.md
index 51be94d444537c..d80ef07c69e26d 100644
--- a/files/ja/web/api/readablestreambyobreader/read/index.md
+++ b/files/ja/web/api/readablestreambyobreader/read/index.md
@@ -16,7 +16,7 @@ l10n:
 このプロミスは、データが利用できるようになったとき、またはストリームが取り消される可能性があるときに `value` と `done` のプロパティを持つオブジェクトで履行されます。
 ストリームがエラーになった場合、プロミスは関連するエラーオブジェクトと共に拒否されます。
 
-データの塊が渡された場合、 `value` プロパティには新しいビューが格納されます。
+データのチャンクが渡された場合、 `value` プロパティには新しいビューが格納されます。
 これは `read()` メソッドに渡された元の `view` と同じバッファー/バッキングメモリ（および同じ型）上のビューになります。
 プロミスが履行されると、メソッドに渡された元の `view` は切り離され、使えなくなることに注意してください。
 ストリームが取り消された可能性がある場合、プロミスは `value: undefined` で履行されます。
@@ -42,7 +42,7 @@ read(view)
 
 取りうる値は次の通りです。
 
-- 塊が利用でき、ストリームがまだアクティブであれば、プロミスは次の形のオブジェクトで履行されます。
+- チャンクが利用でき、ストリームがまだアクティブであれば、プロミスは次の形のオブジェクトで履行されます。
 
   ```js
   { value: theChunk, done: false }
diff --git a/files/ja/web/api/readablestreambyobreader/releaselock/index.md b/files/ja/web/api/readablestreambyobreader/releaselock/index.md
index aa731206ddc5ad..87b7bf9bb0f47f 100644
--- a/files/ja/web/api/readablestreambyobreader/releaselock/index.md
+++ b/files/ja/web/api/readablestreambyobreader/releaselock/index.md
@@ -14,7 +14,7 @@ l10n:
 ロックを解除したときに関連するストリームにエラーが発生した場合、リーダーはその後同様にエラーが発生したようになります。 そうでない場合、リーダーは閉じた状態になります。
 
 保留中の読み込みリクエストがある間にリーダーのロックが解除された場合、リーダーの {{domxref("ReadableStreamBYOBReader.read()")}} メソッドによって返されるプロミスは、直ちに `TypeError` で拒否されます。
-未読の塊はストリームの内部キューに残り、後で新しいリーダーを取得することで読み取ることができます。
+未読のチャンクはストリームの内部キューに残り、後で新しいリーダーを取得することで読み取ることができます。
 
 ## 構文
 

From 867b4f87164401ae6daa3259fd2fb24c8be60fec Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 26 Sep 2023 22:17:55 +0900
Subject: [PATCH 151/268] [ko] add index.md for `web/glossary/digest` (#15874)

---
 files/ko/glossary/digest/index.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 files/ko/glossary/digest/index.md

diff --git a/files/ko/glossary/digest/index.md b/files/ko/glossary/digest/index.md
new file mode 100644
index 00000000000000..66971667edf66f
--- /dev/null
+++ b/files/ko/glossary/digest/index.md
@@ -0,0 +1,25 @@
+---
+title: Digest
+slug: Glossary/Digest
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**다이제스트**는 전체 메시지에서 {{glossary("cryptographic hash function", "암호화 해쉬 함수")}}에 의해 생성된 작은 값입니다. 이상적으로, 다이제스트는 계산이 빠르고, 되돌릴 수 없으며, 예측할 수 없으므로 누군가 특정 메시지를 변조했는지 여부를 나타냅니다.
+
+다이제스트를 사용하여 여러 작업을 수행할 수 있습니다.
+
+- 비암호화 애플리케이션(예, 해시 테이블의 인덱스 또는 중복 데이터를 감지하거나 파일을 고유하게 식별하는 데 사용되는 지문)
+- 메시지 무결성 확인(조작된 메시지는 다른 해시를 갖습니다)
+- 비밀번호를 검색할 수는 없지만, 확인할 수 있도록 저장합니다(이 작업을 안전하게 수행하려면 비밀번호도 솔트해야 합니다).
+- 의사 난수 생성
+- {{glossary("key","키")}} 생성합니다
+
+충돌과 예측 가능성을 방지하려면 사용 사례에 적합한 해시 함수를 선택하는 것이 중요합니다.
+
+## 같이 보기
+
+- {{glossary("Cryptographic hash function", "암호화 해쉬 함수")}}를 참고하세요.
+- 위키백과의 [해쉬 함수](https://en.wikipedia.org/wiki/Cryptographic_hash_function)

From 929a7d014c5d483b2e5afa7c0a1741d37928ebe4 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 26 Sep 2023 22:20:03 +0900
Subject: [PATCH 152/268] [ko] add index.md for
 `web/glossary/document_directive` (#15902)

---
 files/ko/glossary/document_directive/index.md | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 files/ko/glossary/document_directive/index.md

diff --git a/files/ko/glossary/document_directive/index.md b/files/ko/glossary/document_directive/index.md
new file mode 100644
index 00000000000000..034ff8c9845aca
--- /dev/null
+++ b/files/ko/glossary/document_directive/index.md
@@ -0,0 +1,30 @@
+---
+title: 문서 지시문 (Document directive)
+slug: Glossary/Document_directive
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**{{Glossary("CSP")}} 문서 지시문**은 {{HTTPHeader("Content-Security-Policy")}}에 사용되며 정책이 적용되는 문서 또는 [워커](/ko/docs/Web/API/Web_Workers_API) 환경의 속성을 관리합니다.
+
+문서 지시문은 {{CSP("default-src")}} 지시문으로 대체되지 않습니다.
+
+전체 목록은 [문서 지시문](/ko/docs/Web/HTTP/Headers/Content-Security-Policy#document_directives)을 참고해주세요.
+
+## 같이 보기
+
+- [용어 사전](/ko/docs/Glossary)
+
+  - {{Glossary("CSP")}}
+  - {{Glossary("Reporting directive", "Reporting 지시문")}}
+  - {{Glossary("Fetch directive", "Fetch 지시문")}}
+  - {{Glossary("Navigation directive", "Navigation 지시문")}}
+
+- 참조
+
+  - <https://www.w3.org/TR/CSP/#directives-document>
+  - {{HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")}}
+  - {{HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")}}
+  - {{HTTPHeader("Content-Security-Policy")}}

From 239b7e60ed41d49f93abfc7299a2f9cefe5ee723 Mon Sep 17 00:00:00 2001
From: Hailie Eunjoo Kim <100138593+ekim49@users.noreply.github.com>
Date: Tue, 26 Sep 2023 22:25:15 +0900
Subject: [PATCH 153/268] ko: Fixed typo in index.md in
 `Learn/Performance/why_web_performance` (#16029)

---
 files/ko/learn/performance/why_web_performance/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ko/learn/performance/why_web_performance/index.md b/files/ko/learn/performance/why_web_performance/index.md
index ffded0c28dc074..dec605372c0989 100644
--- a/files/ko/learn/performance/why_web_performance/index.md
+++ b/files/ko/learn/performance/why_web_performance/index.md
@@ -61,7 +61,7 @@ l10n:
 
 여기 성능 개선의 몇몇 실제 사례들이 있습니다.
 
-- [Tokopedia는 렌더링 시간을 3G 연걸 시 14초에서 2초로 줄였습니다. 그리고 방문자의 19% 증가, 전체 세션의 35% 증가, 새로운 사용자의 7% 증가, 활성 사용자의 17% 증가 및 사용자당 세션들이 16% 증가했습니다.](https://wpostats.com/2018/05/30/tokopedia-new-users.html)
+- [Tokopedia는 렌더링 시간을 3G 연결 시 14초에서 2초로 줄였습니다. 그리고 방문자의 19% 증가, 전체 세션의 35% 증가, 새로운 사용자의 7% 증가, 활성 사용자의 17% 증가 및 사용자당 세션들이 16% 증가했습니다.](https://wpostats.com/2018/05/30/tokopedia-new-users.html)
 - [성능을 위해 Pinterest 페이지들을 재구축한 결과 대기 시간의 40% 감소, SEO 트래픽의 15% 증가 및 회원가입 전환율이 15% 증가했습니다.](https://wpostats.com/2017/03/10/pinterest-seo.html)
 
 사람들이 사용하고 싶어 하는 웹사이트와 애플리케이션을 구축하고, 사이트 방문자들을 유치하고 유지하려면 사용자 경험이 좋은 접근성 있는 사이트를 만들어야 합니다. 웹사이트를 구축하려면 일반적으로 이미지나 비디오 같은 이진 파일 유형을 포함하여 HTML, CSS, Javascript 가 필요합니다. 당신이 사이트를 구축할 때 내리는 결정 및 도구 선택은 완성된 결과물의 성능에 큰 영향을 줄 수 있습니다.

From dee629a8dac3b394f82a873b2275bd8a95f5b104 Mon Sep 17 00:00:00 2001
From: Javien Lee <kraccoon@kakao.com>
Date: Tue, 26 Sep 2023 22:39:43 +0900
Subject: [PATCH 154/268] ko: update Array.fromAsync() (#15916)

---
 .../global_objects/array/fromasync/index.md   | 204 ++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 files/ko/web/javascript/reference/global_objects/array/fromasync/index.md

diff --git a/files/ko/web/javascript/reference/global_objects/array/fromasync/index.md b/files/ko/web/javascript/reference/global_objects/array/fromasync/index.md
new file mode 100644
index 00000000000000..1e9c096964f599
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/fromasync/index.md
@@ -0,0 +1,204 @@
+---
+title: Array.fromAsync()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fromAsync
+l10n:
+  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
+---
+
+{{JSRef}}
+
+**`Array.fromAsync()`** 정적 메서드는 [비동기 순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#비동기_순회자와_비동기_순회_가능_프로토콜), [순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#순회_가능_프로토콜), 또는 [유사 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#유사_배열_객체_다루기) 객체에서 얕게 복사된 새로운 `Array` 인스턴스를 만듭니다.
+
+## 구문
+
+```js-nolint
+Array.fromAsync(arrayLike)
+Array.fromAsync(arrayLike, mapFn)
+Array.fromAsync(arrayLike, mapFn, thisArg)
+```
+
+### 매개변수
+
+- `arrayLike`
+  - : 배열로 변환할 비동기 순회 가능, 순회 가능, 또는 유사 배열 객체입니다.
+- `mapFn` {{optional_inline}}
+  - : 배열의 모든 요소에 대해 호출할 함수입니다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수로 먼저 전달되고, ([await](/ko/docs/Web/JavaScript/Reference/Operators/await)된 후) `mapFn`의 반환 값이 대신 배열에 추가됩니다. 이 함수는 다음 인수를 사용하여 호출됩니다.
+    - `element`
+      - : 배열에서 처리 중인 현재 요소입니다. 모든 요소가 먼저 [await](/ko/docs/Web/JavaScript/Reference/Operators/await) 되므로, 절대 [then](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables)을 사용할 수 있는 값이 될 수 없습니다.
+    - `index`
+      - : 배열에서 처리 중인 현재 요소의 인덱스입니다.
+- `thisArg` {{optional_inline}}
+  - : `mapFn`을 실행할 때 `this` 값으로 사용할 값입니다.
+
+### 반환 값
+
+이행 값이 새 {{jsxref("Array")}} 인스턴스인 새로운 {{jsxref("Promise")}}입니다.
+
+## 설명
+
+`Array.fromAsync()`은 다음으로부터 배열을 만들 수 있습니다.
+
+- [비동기 순회 가능 객체](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#비동기_순회자와_비동기_순회_가능_프로토콜)({{domxref("ReadableStream")}}와 {{jsxref("AsyncGenerator")}} 같은 객체). 또는, 객체가 비동기 순회 가능이 아니라면,
+- [순회 가능 객체](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#순회_가능_프로토콜)({{jsxref("Map")}}과 {{jsxref("Set")}} 같은 객체). 또는, 객체가 순회 가능이 아니라면
+- 유사 배열 객체(`length` 속성과 인덱스된 요소가 있는 객체).
+
+`Array.fromAsync()`는 {{jsxref("Statements/for-await...of", "for await...of")}}와 매우 유사한 방식으로 비동기 순회 가능을 순회합니다. `Array.fromAsync()`는 다음을 제외하고 동작 측면에서 `Array.from()`과 거의 동일합니다.
+
+- `Array.fromAsync()`는 비동기 순회 가능 객체를 처리합니다.
+- `Array.fromAsync()`는 배열 인스턴스에 이행하는 {{jsxref("Promise")}}를 반환합니다.
+- 비동기 순회 가능 객체로 `Array.fromAsync()`를 호출하면 배열에 추가할 각 요소가 먼저 [await](/ko/docs/Web/JavaScript/Reference/Operators/await)됩니다.
+- `mapFn`이 제공되면, 그 입력과 출력이 내부적으로 await 됩니다.
+
+`Array.fromAsync()`와 `Promise.all()`은 모두 프로미스의 순회 가능을 배열의 프로미스로 변환할 수 있습니다. 하지만 두 가지 중요한 차이점이 있습니다.
+
+- `Array.fromAsync()`는 객체에서 yield된 각 값을 순차적으로 await 합니다. `Promise.all()`은 모든 값을 동시에 await 합니다.
+- `Array.fromAsync()`는 순회 가능을 지연(lazy) 순회하고, 현재 값이 확정될 때까지 다음 값을 가져오지 않습니다. `Promise.all()`은 모든 값을 미리 가져오고 모두 await 합니다.
+
+## 예제
+
+### 비동기 순회 가능에서 배열 만들기
+
+```js
+const asyncIterable = (async function* () {
+  for (let i = 0; i < 5; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 10 * i));
+    yield i;
+  }
+})();
+
+Array.fromAsync(asyncIterable).then((array) => console.log(array));
+// [0, 1, 2, 3, 4]
+```
+
+### 동기 순회 가능에서 배열 만들기
+
+```js
+Array.fromAsync(
+  new Map([
+    [1, 2],
+    [3, 4],
+  ]),
+).then((array) => console.log(array));
+// [[1, 2], [3, 4]]
+```
+
+### 프로미스를 yield하는 동기 순회 가능에서 배열 만들기
+
+```js
+Array.fromAsync(
+  new Set([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]),
+).then((array) => console.log(array));
+// [1, 2, 3]
+```
+
+### 프로미스 유사 배열 객체에서 배열 만들기
+
+```js
+Array.fromAsync({
+  length: 3,
+  0: Promise.resolve(1),
+  1: Promise.resolve(2),
+  2: Promise.resolve(3),
+}).then((array) => console.log(array));
+// [1, 2, 3]
+```
+
+### mapFn 사용하기
+
+`mapFn`의 입력과 출력은 모두 `Array.fromAsync()`에서 내부적으로 await 됩니다.
+
+```js
+function delayedValue(v) {
+  return new Promise((resolve) => setTimeout(() => resolve(v), 100));
+}
+
+Array.fromAsync(
+  [delayedValue(1), delayedValue(2), delayedValue(3)],
+  (element) => delayedValue(element * 2),
+).then((array) => console.log(array));
+// [2, 4, 6]
+```
+
+### Promise.all()과 비교하기
+
+`Array.fromAsync()`는 객체에서 yield 각 값을 순차적으로 await 합니다. `Promise.all()`은 모든 값을 동시에 await 합니다.
+
+```js
+function* makeAsyncIterable() {
+  for (let i = 0; i < 5; i++) {
+    yield new Promise((resolve) => setTimeout(resolve, 100));
+  }
+}
+
+(async () => {
+  console.time("Array.fromAsync() 시간");
+  await Array.fromAsync(makeAsyncIterable());
+  console.timeEnd("Array.fromAsync() 시간");
+  // Array.fromAsync() 시간: 503.610ms
+
+  console.time("Promise.all() 시간");
+  await Promise.all(makeAsyncIterable());
+  console.timeEnd("Promise.all() 시간");
+  // Promise.all() 시간: 101.728ms
+})();
+```
+
+### 동기 순회 가능에 대한 오류 처리 없음
+
+[`for await...of`](/ko/docs/Web/JavaScript/Reference/Statements/for-await...of#동기_이터러블과_제너레이터_순회)의 경우와 마찬가지로, 순회되는 객체가 동기 순회 가능이고, 순회하는 동안 오류가 발생하면, 기본 반복자의 `return()` 메서드가 호출되지 않으므로 반복자가 종료되지 않습니다.
+
+```js
+function* generatorWithRejectedPromises() {
+  try {
+    yield 0;
+    yield Promise.reject(3);
+  } finally {
+    console.log("finally 호출");
+  }
+}
+
+(async () => {
+  try {
+    await Array.fromAsync(generatorWithRejectedPromises());
+  } catch (e) {
+    console.log(e, "잡음");
+  }
+})();
+// 3 잡음
+// "finally 호출" 메시지 없음
+```
+
+반복자를 종료해야 하는 경우, {{jsxref("Statements/for...of", "for...of")}} 루프를 대신 사용하고, 각 값을 직접 await 해야 합니다.
+
+```js
+(async () => {
+  const arr = [];
+  try {
+    for (const val of generatorWithRejectedPromises()) {
+      arr.push(await val);
+    }
+  } catch (e) {
+    console.log(e, "잡음");
+  }
+})();
+// finally 호출
+// 3 잡음
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js`의 `Array.fromAsync` 폴리필](https://github.com/zloirock/core-js#arrayfromasync)
+- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서
+- {{jsxref("Array")}}
+- {{jsxref("Array/Array", "Array()")}}
+- {{jsxref("Array.of()")}}
+- {{jsxref("Array.from()")}}
+- {{jsxref("Statements/for-await...of", "for await...of")}}

From d3287c8d919bcc260a12ac6c1d5501a5026d7579 Mon Sep 17 00:00:00 2001
From: Javien Lee <kraccoon@kakao.com>
Date: Tue, 26 Sep 2023 22:50:45 +0900
Subject: [PATCH 155/268] ko: update Array.prototype.includes() (#15959)

---
 .../global_objects/array/includes/index.md    | 139 +++++++-----------
 1 file changed, 57 insertions(+), 82 deletions(-)

diff --git a/files/ko/web/javascript/reference/global_objects/array/includes/index.md b/files/ko/web/javascript/reference/global_objects/array/includes/index.md
index a4a185d3f16243..43dd99f59a2e70 100644
--- a/files/ko/web/javascript/reference/global_objects/array/includes/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/includes/index.md
@@ -1,62 +1,80 @@
 ---
 title: Array.prototype.includes()
 slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+l10n:
+  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
 ---
 
 {{JSRef}}
 
-**`includes()`** 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.
+{{jsxref("Array")}} 인스턴스의 **`includes()`** 메서드는 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 적절히 `true` 또는 `false`를 반환합니다.
 
 {{EmbedInteractiveExample("pages/js/array-includes.html")}}
 
 ## 구문
 
-```js
-    arr.includes(valueToFind[, fromIndex])
+```js-nolint
+includes(searchElement)
+includes(searchElement, fromIndex)
 ```
 
 ### 매개변수
 
-- `valueToFind`
-  - : 탐색할 요소.> **참고:** 문자나 문자열을 비교할 때, `includes()`는 **대소문자를 구분**합니다.
+- `searchElement`
+  - : 찾을 값입니다.
 - `fromIndex` {{optional_inline}}
-  - : 이 배열에서 searchElement 검색을 시작할 위치입니다. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다. 기본값은 0입니다.
+  - : 검색을 시작할 0 기반 인덱스로, [정수로 변환됩니다](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number#정수_변환).
+    - 음수 인덱스는 배열의 끝부터 거꾸로 셉니다. 즉, `fromIndex < 0`이면, `fromIndex + array.length`가 사용됩니다. 그러나, 이 경우에도 배열은 여전히 앞에서 뒤로 검색됩니다.
+    - `fromIndex < -array.length`이거나 `fromIndex`가 생략되면, `0`이 사용되어 전체 배열이 검색됩니다.
+    - `fromIndex >= array.length` 이면, 배열은 검색되지 않고 `false`가 반환됩니다.
 
 ### 반환 값
 
-{{jsxref("Boolean")}}.
+배열(또는 `fromIndex`를 지정했다면, `fromIndex` 인덱스로 표시된 배열의 일부) 내에서 `searchElement` 값이 발견되면 `true` 불리언 값이 반환됩니다.
+
+## 설명
+
+`includes()` 메서드는 [SameValueZero](/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#동일_값_제로_동등) 알고리즘을 사용하여 `searchElement`를 배열의 요소와 비교합니다. 0 값은 부호에 관계없이 모두 동일한 것으로 간주됩니다. (즉, `-0`은 `0`과 같지만), `false`는 `0`과 같은 것으로 간주되지 않습니다. [`NaN`](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN)은 올바르게 검색될 수 있습니다.
+
+[희소 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections#희소_배열)에 사용할 경우, `include()` 메서드는 빈 슬롯을 `undefined`로 간주하고 순회합니다.
+
+`includes()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.
 
 ## 예제
 
+### includes() 사용하기
+
 ```js
 [1, 2, 3].includes(2); // true
 [1, 2, 3].includes(4); // false
 [1, 2, 3].includes(3, 3); // false
 [1, 2, 3].includes(3, -1); // true
 [1, 2, NaN].includes(NaN); // true
+["1", "2", "3"].includes(3); // false
 ```
 
-### `fromIndex` 가 배열의 길이보다 같거나 큰 경우
+### fromIndex가 배열 길이보다 크거나 같은 경우
 
-`fromIndex` 가 배열의 길이보다 같거나 크다면, `false` 를 반환합니다. 배열은 검색되지 않을 것입니다.
+`fromIndex`가 배열의 길이보다 크거나 같으면 `false`가 반환됩니다. 배열은 검색되지 않습니다.
 
 ```js
-var arr = ["a", "b", "c"];
+const arr = ["a", "b", "c"];
 
 arr.includes("c", 3); // false
 arr.includes("c", 100); // false
 ```
 
-### 0보다 작은 인덱스의 계산
+### 0보다 작은 인덱스 계산
 
-`fromIndex` 가 음수라면, 이 계산된 인덱스는 `valueToFind` 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 `-1 * array.length` 보다 작거나 같다면, 전체 배열이 검색될 것입니다.
+`fromIndex`가 음수라면, 계산된 인덱스가 `searchElement` 검색을 시작할 배열의 위치로 사용되도록 계산됩니다.
+계산된 인덱스가 `0`보다 작거나 같으면 전체 배열에서 검색됩니다.
 
 ```js
-// array length is 3
-// fromIndex is -100
-// computed index is 3 + (-100) = -97
+// 배열 길이는 3
+// fromIndex는 -100
+// 계산된 인덱스는 3 + (-100) = -97
 
-var arr = ["a", "b", "c"];
+const arr = ["a", "b", "c"];
 
 arr.includes("a", -100); // true
 arr.includes("b", -100); // true
@@ -64,79 +82,33 @@ arr.includes("c", -100); // true
 arr.includes("a", -2); // false
 ```
 
-### 제네릭 메소드로 사용되는 `includes()`
+### 희소 배열에서 includes() 사용하기
 
-`includes()` 메서드는 의도적으로 제네릭입니다. 배열 객체가 되기 위한 `this` 값을 요구하지 않아, 다른 종류의 객체에 적용될 수 있습니다 (e.g. 유사 배열 객체). 아래 예시는 이 함수의 [arguments](/ko/docs/Web/JavaScript/Reference/Functions/arguments) 객체로 호출되는 `includes()` 메소드를 보여줍니다.
+희소 배열에서 `undefined`를 검색하면 `true`를 얻을 수 있습니다.
 
 ```js
-(function () {
-  console.log([].includes.call(arguments, "a")); // true
-  console.log([].includes.call(arguments, "d")); // false
-})("a", "b", "c");
+console.log([1, , 3].includes(undefined)); // true
 ```
 
-## 폴리필
+### 배열이 아닌 객체에서 includes() 호출하기
+
+`includes()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음수가 아닌 정수인 각 속성에 접근합니다.
 
 ```js
-// https://tc39.github.io/ecma262/#sec-array.prototype.includes
-if (!Array.prototype.includes) {
-  Object.defineProperty(Array.prototype, "includes", {
-    value: function (searchElement, fromIndex) {
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      // 1. Let O be ? ToObject(this value).
-      var o = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length >>> 0;
-
-      // 3. If len is 0, return false.
-      if (len === 0) {
-        return false;
-      }
-
-      // 4. Let n be ? ToInteger(fromIndex).
-      //    (If fromIndex is undefined, this step produces the value 0.)
-      var n = fromIndex | 0;
-
-      // 5. If n ≥ 0, then
-      //  a. Let k be n.
-      // 6. Else n < 0,
-      //  a. Let k be len + n.
-      //  b. If k < 0, let k be 0.
-      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
-
-      function sameValueZero(x, y) {
-        return (
-          x === y ||
-          (typeof x === "number" &&
-            typeof y === "number" &&
-            isNaN(x) &&
-            isNaN(y))
-        );
-      }
-
-      // 7. Repeat, while k < len
-      while (k < len) {
-        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
-        // b. If SameValueZero(searchElement, elementK) is true, return true.
-        if (sameValueZero(o[k], searchElement)) {
-          return true;
-        }
-        // c. Increase k by 1.
-        k++;
-      }
-
-      // 8. Return false
-      return false;
-    },
-  });
-}
+const arrayLike = {
+  length: 3,
+  0: 2,
+  1: 3,
+  2: 4,
+  3: 1, // length가 3이므로 includes()에서 무시됩니다.
+};
+console.log(Array.prototype.includes.call(arrayLike, 2));
+// true
+console.log(Array.prototype.includes.call(arrayLike, 1));
+// false
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -146,8 +118,11 @@ if (!Array.prototype.includes) {
 
 ## 같이 보기
 
-- {{jsxref("TypedArray.prototype.includes()")}}
-- {{jsxref("String.prototype.includes()")}}
+- [`core-js`의 `Array.prototype.includes` 폴리필](https://github.com/zloirock/core-js#ecmascript-array)
+- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서
+- {{jsxref("Array")}}
 - {{jsxref("Array.prototype.indexOf()")}}
 - {{jsxref("Array.prototype.find()")}}
 - {{jsxref("Array.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.includes()")}}
+- {{jsxref("String.prototype.includes()")}}

From 419b28f48f94dda9bdf8668ce9a284b948c6458b Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 26 Sep 2023 22:52:05 +0900
Subject: [PATCH 156/268] [ko] add index.md for `web/glossary/engine` (#15943)

---
 files/ko/glossary/engine/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 files/ko/glossary/engine/index.md

diff --git a/files/ko/glossary/engine/index.md b/files/ko/glossary/engine/index.md
new file mode 100644
index 00000000000000..197ace08385439
--- /dev/null
+++ b/files/ko/glossary/engine/index.md
@@ -0,0 +1,14 @@
+---
+title: 엔진 (Engine)
+slug: Glossary/Engine
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+{{glossary("JavaScript")}} 엔진은 JavaScript 프로그램을 구문 분석하고 실행하는 인터프리터입니다.
+
+## 같이 보기
+
+- 위키백과의 [JavaScript 엔진](https://en.wikipedia.org/wiki/JavaScript_engine)

From 465aff9945c781cd9cc96fb01b1539ff7e122ea8 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 26 Sep 2023 23:04:53 +0900
Subject: [PATCH 157/268] [ko] add index.md for `web/glossary/fragmentainer`
 (#15992)

---
 files/ko/glossary/fragmentainer/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 files/ko/glossary/fragmentainer/index.md

diff --git a/files/ko/glossary/fragmentainer/index.md b/files/ko/glossary/fragmentainer/index.md
new file mode 100644
index 00000000000000..6955ef5de160e7
--- /dev/null
+++ b/files/ko/glossary/fragmentainer/index.md
@@ -0,0 +1,14 @@
+---
+title: 단편화 상자 (Fragmentainer)
+slug: Glossary/Fragmentainer
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+단편화 상자 (Fragmentainer)는 [CSS Fragmentation 명세서](https://www.w3.org/TR/css-break-3/)에 아래와 같이 정의되어 있습니다.
+
+> 단편화된 흐름의 일부 (또는 전체)를 포함하는 페이지 상자, 열 상자 또는 영역과 같은 상자입니다. 단편화 상자는 사전 정의되거나, 필요에 따라 생성될 수 있습니다. 깨지기 쉬운 콘텐츠가 블록 차원의 단편화 상자를 오버플로우하는 경우, 대신 조각화 컨텍스트에서 다음 컨테이너로 침범하게 됩니다.
+
+단편화된 컨텍스트는 CSS 페이징 미디어(CSS Paged Media)에서 찾을 수 있고, 여기서 단편화 상자는 페이지를 정의하는 상자입니다. 다중 열 레이아웃에서 단편화 상자는 다중 열 컨테이너에 열이 정의될 때 생성되는 열 상자입니다. CSS 영역에서 각 영역은 단편화 상자입니다.

From 6edb82f6cf1f0d9cfdaf5683d61093fe0205aef2 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Tue, 26 Sep 2023 23:06:50 +0900
Subject: [PATCH 158/268] [ko] add index.md for `web/glossary/global_variable`
 (#16005)

---
 files/ko/glossary/global_variable/index.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 files/ko/glossary/global_variable/index.md

diff --git a/files/ko/glossary/global_variable/index.md b/files/ko/glossary/global_variable/index.md
new file mode 100644
index 00000000000000..44db48f3f8ec8c
--- /dev/null
+++ b/files/ko/glossary/global_variable/index.md
@@ -0,0 +1,16 @@
+---
+title: 전역 변수 (Global variable)
+slug: Glossary/Global_variable
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+전역 변수는 {{glossary("global scope", "전역 범위")}}에 선언된 {{glossary("variable", "변수")}}입니다. 즉, 다른 모든 범위에서 볼 수 있는 변수입니다.
+
+JavaScript에서는 {{glossary("global object", "전역 객체")}}의 {{glossary("property", "속성")}}입니다.
+
+## 같이 보기
+
+- 위키백과의 [전역 변수](https://en.wikipedia.org/wiki/Global_variable)

From a487cdfa47e1bd7b368c8c622b9e81df8413c392 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Tue, 26 Sep 2023 23:19:36 +0800
Subject: [PATCH 159/268] zh-cn: update the translation of media query (#15979)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../zh-cn/web/css/css_media_queries/index.md  | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/files/zh-cn/web/css/css_media_queries/index.md b/files/zh-cn/web/css/css_media_queries/index.md
index 58042f15c5f57c..c28ce9c438e38f 100644
--- a/files/zh-cn/web/css/css_media_queries/index.md
+++ b/files/zh-cn/web/css/css_media_queries/index.md
@@ -1,33 +1,39 @@
 ---
 title: 媒体查询
 slug: Web/CSS/CSS_media_queries
+l10n:
+  sourceCommit: 72304bf90ccd530ff9dc9e5ff12397b2600248ed
 ---
 
 {{CSSRef}}
 
-通过**媒体查询**（**Media queries**），你可以根据各种设备特征和参数的值或者是否存在来调整你的网站或应用。
+**CSS 媒体查询**（media query）是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的关键组成部分，你可以根据各种设备特征和参数是否存在以及对应的值来应用 CSS 样式。
 
-它们是[响应式设计](/zh-CN/docs/Web/Apps/Progressive/Responsive)的关键组成部分。例如，媒体查询可以缩小小型设备上的字体大小，在纵向模式下查看页面时增加段落之间的填充，或者增加触摸屏上按钮的大小。
+通常根据{{Glossary("viewport", "视口")}}大小来应用媒体查询，以便可以为不同屏幕大小的设备做出布局调整。例如，你可以为小屏设备设置较小的字体，在纵向模式下查看页面时增加段落间的边距，或者增加触摸屏上按钮的大小。
 
-在 CSS 中，使用 {{cssxref("@media")}} [at-rule](/zh-CN/docs/Web/CSS/At-rule) 根据媒体查询的结果有条件地应用样式表的一部分。使用 {{cssxref("@import")}} 有条件地应用整个样式表。
+![笔记本电脑和移动设备具有不同的视口大小，可以使用媒体查询进行查询，我们可以看到内容布局的不同。](media-queries.svg)
+
+在 CSS 中，可以使用 {{cssxref("@media")}} [at 规则](/zh-CN/docs/Web/CSS/At-rule)根据媒体查询的结果有条件地应用样式表的一部分。要有条件地应用整个样式表，请使用 {{cssxref("@import")}}。
+
+在设置可重用的 HTML 组件时，你还可以使用容器查询，它允许你根据容器元素的大小而非视口或者其他设备特征来应用样式。
 
 ### 在 HTML 中使用媒体查询
 
 在 [HTML](/zh-CN/docs/Web/HTML) 中，媒体查询可以应用于各种元素：
 
-- 在{{HTMLElement("link")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/link#media)属性中，它们定义了待应用链接资源（通常是 CSS）的媒体。
-- 在{{HTMLElement("source")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/source#media)属性中，它们定义待应用源的媒体。 （这仅在{{HTMLElement("picture")}}元素内有效。）
-- 在{{HTMLElement("style")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/style#media)属性中，它们定义待应用样式的媒体。
+- 在 {{HTMLElement("link")}} 元素的 [`media`](/zh-CN/docs/Web/HTML/Element/link#media) 属性中，其定义待应用链接资源（通常是 CSS）的媒体。
+- 在 {{HTMLElement("source")}} 元素的 [`media`](/zh-CN/docs/Web/HTML/Element/source#media) 属性中，其定义待应用源的媒体。（这仅在 {{HTMLElement("picture")}} 元素内有效。）
+- 在 {{HTMLElement("style")}} 元素的 [`media`](/zh-CN/docs/Web/HTML/Element/style#media) 属性中，其定义待应用样式的媒体。
 
 ### 在 JavaScript 中使用媒体查询
 
-在[JavaScript](/zh-CN/docs/Web/JavaScript)中，你可以使用 {{domxref("Window.matchMedia()")}} 方法根据媒体查询测试窗口。你还可以使用{{domxref("MediaQueryList.addListener()")}}在查询状态发生变化时收到通知。借助此功能，你的站点或应用可以响应设备配置，方向或状态的更改。
+在 [JavaScript](/zh-CN/docs/Web/JavaScript) 中，你可以使用 {{domxref("Window.matchMedia()")}} 方法根据媒体查询测试窗口。你还可以使用 {{domxref("MediaQueryList.addListener()")}} 在查询状态发生变化时收到通知。借助此功能，你的站点或应用可以响应设备配置、方向或状态的更改。
 
-你可以学习更多以编程方式使用媒体查询在[测试媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)中。
+你可以在[测试媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)中学到更多通过编程方式使用媒体查询的知识。
 
 ## 参考
 
-### At-rules
+### At 规则
 
 - {{cssxref("@import")}}
 - {{cssxref("@media")}}
@@ -35,10 +41,10 @@ slug: Web/CSS/CSS_media_queries
 ## 指南
 
 - [使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
-  - : 介绍媒体查询和媒体查询的的语法以及用于构造媒体查询表达式的运算符和媒体功能。
-- [编程方式使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
+  - : 介绍媒体查询及其语法，以及用于构造媒体查询表达式的运算符和媒体特性。
+- [通过编程方式使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
   - : 描述如何在 JavaScript 代码中使用媒体查询来确定设备的状态，以及设置在媒体查询结果发生更改时（例如，当用户旋转屏幕或调整浏览器大小时）通知代码的监听器。
-- [使用媒体查询增强网站的无障碍](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_CSS_media_queries_for_Accessibility)
+- [使用媒体查询增强无障碍](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility))
   - : 了解媒体查询如何帮助用户更好地了解你的网站。
 
 ## 规范
@@ -47,4 +53,5 @@ slug: Web/CSS/CSS_media_queries
 
 ## 参见
 
-- Use {{cssxref("@supports")}} to apply styles that depend on browser support for various CSS technologies.
+- [容器查询](/zh-CN/docs/Web/CSS/CSS_container_queries)
+- 使用 {{cssxref("@supports")}} 来根据浏览器支持的 CSS 技术应用样式。

From 9d50b638c78a07827bb1037504bdedd5307fda4e Mon Sep 17 00:00:00 2001
From: Alexander <alexander_belial999@hotmail.com>
Date: Tue, 26 Sep 2023 11:04:23 -0600
Subject: [PATCH 160/268] es: Create howto/json_structured_data (#15956)

es: Update howto/json_structured_data

Co-authored-by: GrayWolf <a13x.graywolf@gmail.com>
---
 .../howto/json_structured_data/index.md       | 124 ++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 files/es/mdn/writing_guidelines/howto/json_structured_data/index.md

diff --git a/files/es/mdn/writing_guidelines/howto/json_structured_data/index.md b/files/es/mdn/writing_guidelines/howto/json_structured_data/index.md
new file mode 100644
index 00000000000000..bda0def8c43c1b
--- /dev/null
+++ b/files/es/mdn/writing_guidelines/howto/json_structured_data/index.md
@@ -0,0 +1,124 @@
+---
+title: Cómo usar datos estructurados
+slug: MDN/Writing_guidelines/Howto/JSON_Structured_data
+l10n:
+  sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
+---
+
+{{MDNSidebar}}
+
+MDN almacena los datos en estructuras bien definidas cuando es posible. Esta información se centraliza y se puede actualizar una vez, mientras se utiliza en numerosos lugares.
+
+Existen varios de estos archivos, y este documento describe su propósito, estructura y proceso de mantenimiento.
+
+## GroupData: agrupación lógica de API
+
+`GroupData` es un archivo JSON que recopila información sobre las API web. La agrupación de APIs es algo difusa: cualquier interfaz, método o propiedad puede formar parte de varias APIs. El conjunto de API agrupadas bajo un nombre es una convención utilizada para comunicar sobre una característica, sin ninguna aplicación técnica.
+
+Sin embargo, MDN necesita esta información para crear menus laterales coherentes de Web-API (como con la macro `\{{APIRef}}`) con las páginas de referencia, guías y artículos generales adecuados.
+
+GroupData hace exactamente eso: para cada API, enumera las interfaces, propiedades, métodos, guías y páginas de descripción general. En el pasado, también enumeraba diccionarios y devoluciones de llamada. Pero ese uso, aunque todavía es compatible, está obsoleto y se eliminará en el futuro.
+
+### Estructura de GroupData
+
+> **Advertencia:** Las páginas inexistentes enumeradas en este archivo se ignoran.
+
+Una entrada en `GroupData.json` tiene la siguiente estructura:
+
+```json
+"Nombre_de_API": {
+  "overview": ["nombre de la página de descripción general"],
+  "guides": [
+    "nombre_de_guia_1",
+    (…)
+  ],
+  "interfaces": [
+    "nombre_de_interfaz_1",
+    (…)
+  ],
+  "methods": [
+    "nombre_de_metodo_adicional_1",
+    (…)
+  ],
+  "properties": [
+    "nombre_de_propiedad_adicional_1",
+    (…)
+  ],
+  "events": [
+    "nombre_de_propiedad_adicional_1",
+    (…)
+  ]
+}
+```
+
+…donde:
+
+- `"Nombre_de_API"`
+  - : Esta clave es un ID utilizado por macros de menu lateral como `\{{APIRef("Nombre_de_API")}}` y el nombre que se muestra en el menu lateral. Elígelo sabiamente.
+    > **Advertencia:** Si desea cambiar el nombre que se muestra en el menu lateral, debe editar todas las páginas que lo muestran.
+- `"overview"`
+  - : Esta es una lista que contiene una página: la página de resumen, utilizada como enlace para el texto `"Nombre_de_API"`. El valor es el _titulo de la página_, y la página debe estar en el directorio `web/api/`.
+- `"guides"`
+  - : Esta es una lista de guías para mostrar en el menu lateral, en el orden dado. Los valores son _rutas a la página_, comenzando con `/docs/`.
+- `"interfaces"`
+  - : Enumera las interfaces que forman parte de la API.
+- `"methods"`
+  - : Enumera los métodos que forman parte de la API.
+    > **Nota:** Los métodos de las interfaces enumeradas en `"interfaces"` **no deben** estar enumerados allí. Se añaden automáticamente al menu lateral si la etiqueta `Method` está en el encabezado YAML de esa página.
+- `"properties"`
+  - : Enumera los métodos en otras interfaces que forman parte de la API, como `navigator.xr` (una propiedad que la API de WebXR agrega al objeto `navigator`)
+    > **Nota:** Las propiedades de las interfaces enumeradas en `"interfaces"` **no deben** estar enumeradas allí. Se añaden automáticamente a la barra lateral si la etiqueta `Property` está en el encabezado YAML de esa página.
+- `"events"`
+  - : Enumera los eventos de otras interfaces que forman parte de la API. Los valores son el _título de las páginas_ (que debe residir en `Web/Events`)
+    > **Nota:** Los eventos dirigidos a las interfaces enumeradas en `"interfaces"` **no deben** estar enumerados allí. Se añaden automáticamente al menu lateral si la etiqueta `Event` (¡singular!) está en el encabezado YAML de esa página.
+
+Hay otras dos claves, `"dictionaries"` y `"callbacks"`, que funcionan con el mismo principio. Como ya no documentamos estas entidades en sus propias páginas, su uso está obsoleto y no se les debe añadir ninguna entrada nueva (y las eliminamos poco a poco).
+
+> **Nota:** Además, ninguna de las claves es obligatoria; es una buena práctica (y lo haremos cumplir) agregar las no obsoletas con una lista vacía en lugar de omitirlas. Muestra que la ausencia de valor es una elección consciente.
+
+### Proceso de actualización para GroupData
+
+Este archivo debe actualizarse en el mismo PR donde se producen los cambios que afectan al menu lateral. De esta forma, el menu lateral estará siempre actualizado. Los revisores no deben fusionar las solicitudes de incorporacion que no las adopten.
+
+Para probar sus cambios, verifique que el menu lateral en los archivos de su PR muestre todas las entradas correctamente.
+
+El archivo `GroupData.json` se encuentra [aquí](https://github.com/mdn/content/blob/main/files/jsondata/GroupData.json) en GitHub.
+
+## InterfaceData: herencia de la interfaz de grabación
+
+> **Nota:** Esperamos generar este archivo automáticamente a partir de los datos disponibles a través de w3c/webref en el futuro.
+
+`InterfaceData` describe la jerarquía de las interfaces. Enumera la herencia. En el pasado, también enumeraba los mixins implementados por cada interfaz; pero ese uso está obsoleto, y eliminamos los mixins de este archivo al mismo ritmo que se actualiza MDN.
+
+Estos datos de herencia se utilizan al crear menus laterales de API y por el `\{{InheritanceDiagram}}` en las páginas de la interfaz.
+
+### Estructura de InterfaceData
+
+Una entrada en `InterfaceData.json` tiene la siguiente estructura:
+
+```json
+"Nombre_de_la_interfaz": {
+  "inh": "Nombre_de_la_interfaz_padre",
+  "impl": []
+}
+```
+
+> **Nota:** Como los mixins están obsoletos, `"impl"` debe ser una lista vacía para todas las interfaces nuevas.
+
+El valor de `"Nombre_de_la_interfaz_padre"` no es una lista sino una sola entrada, obligatoria; no debemos enumerar ninguna interfaz que no herede de otra.
+
+### Proceso de actualización para InterfaceData
+
+El mismo PR que añade una nueva interfaz que hereda de otra debe actualizar este archivo. Los revisores no deben fusionar las solicitudes de incorporacion que no lo hacen.
+
+Para probar sus cambios, verifique que los menus laterales de cada interfaz que editó en su PR muestren la herencia correctamente.
+
+El archivo `InterfaceData.json` se encuentra [aquí](https://github.com/mdn/content/blob/main/files/jsondata/InterfaceData.json) en GitHub.
+
+## SpecData: Información de especificación
+
+> **Advertencia:** El archivo `SpecData.json` ya no se mantiene. La información de especificación canónica se almacena en w3c/browser-spec y en la clave `spec_url` de características en mdn/browser-compat-data.
+
+Las macros `\{{SpecName}}` y `\{{Spec2}}` que estamos eliminando utilizan el archivo `SpecData.json`. No aceptamos más contribuciones al archivo `SpecData.json`; en su lugar, intente insertar una tabla de especificaciones, utilizando la macro `\{{Specifications}}`, o intente codificar el enlace (bueno) a la especificación. Tenga en cuenta que la mayoría de las veces, mencionar o vincular a una especificación fuera de la sección _Especificaciones_ es un signo de algo que no está debidamente documentado en MDN.
+
+El archivo `SpecData.json` se encuentra [aquí](https://github.com/mdn/content/blob/main/files/jsondata/SpecData.json) en GitHub.

From 2057ca97803e3b18c3549d2e0a8f9d7582f7c0c7 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Tue, 26 Sep 2023 19:13:56 +0200
Subject: [PATCH 161/268] Fix #14447 (#15884)

* Update, fix #14447 and enhance
* Align ELS IDs when auto doesn't work
---
 files/fr/web/css/grid-column-start/index.md | 143 ++++++++++++++++----
 1 file changed, 113 insertions(+), 30 deletions(-)

diff --git a/files/fr/web/css/grid-column-start/index.md b/files/fr/web/css/grid-column-start/index.md
index a2ef1f373077ac..1e413bd67a0c79 100644
--- a/files/fr/web/css/grid-column-start/index.md
+++ b/files/fr/web/css/grid-column-start/index.md
@@ -1,11 +1,13 @@
 ---
 title: grid-column-start
 slug: Web/CSS/grid-column-start
+l10n:
+  sourceCommit: 84b1729de4f527c8d81e44a38fca70ea4db97922
 ---
 
 {{CSSRef}}
 
-La propriété **`grid-column-start`** définit la position du début d'un élément (au sens des propriétés logiques `*-block-start`) en définissant la ligne ou la taille de fragment occupé sur la grille.
+La propriété **`grid-column-start`** définit la position du début d'un élément au sein de la grille de façon automatique, absolue ou relative par rapport à la fin de l'élément. La position de début définit le bord de la [zone de grille](/fr/docs/Glossary/Grid_Areas) selon l'axe logique de bloc (celui orthogonal au sens de lecteur).
 
 {{EmbedInteractiveExample("pages/css/grid-column-start.html")}}
 
@@ -30,44 +32,48 @@ grid-column-start: span unezonedegrille 5;
 /* Valeurs globales */
 grid-column-start: inherit;
 grid-column-start: initial;
+grid-column-start: revert;
+grid-column-start: revert-layer;
 grid-column-start: unset;
 ```
 
-La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`. Une telle valeur peut être définie avec :
+La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`. Une telle valeur peut être définie avec&nbsp;:
 
 - le mot-clé `auto`
-- ou une valeur `<custom-ident>`
-- ou une valeur `<integer>`
-- ou une valeur `<custom-ident>` et un `<integer>` séparés par un espace
-- ou le mot-clé `span` avec une valeur `<custom-ident>` ou un `<integer>` ou les deux.
+- un identifiant ([`<custom-ident>`](/fr/docs/Web/CSS/custom-ident))
+- ou une valeur entière ([`<integer>`](/fr/docs/Web/CSS/integer))
+- ou un identifiant et un entier séparés par un espace
+- ou le mot-clé `span` avec un identifiant ou un entier ou les deux.
 
 ### Valeurs
 
 - `auto`
-  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (_span_) automatique ou une taille par défaut de `1`.
-- `<custom-ident>`
 
-  - : S'il existe une ligne nommée avec '\<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<i lang="en">span</i>) automatique ou une taille par défaut de `1`.
 
-    > **Note :** Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant `grid-column-start: foo;` cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne `foo-start` a été explicitement déclarée).
+- [`<custom-ident>`](/fr/docs/Web/CSS/custom-ident)
+
+  - : S'il existe une ligne nommée avec '\<custom-ident>-start', le début de l'élément coincide avec la première ligne correspondante.
+
+    > **Note :** Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant `grid-column-start: toto;` cela sélectionnera le bord de la zone de grille nommée correspondante (sauf si une autre ligne `toto-start` a explicitement été déclarée).
 
     Sinon, la valeur est traitée comme si on avait utilisé `<custom-ident>` et la valeur `1`.
 
 - `<integer> && <custom-ident>?`
 
-  - : La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+  - : Le début de l'élément est placé sur la n-ième ligne de la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
 
-    Si un nom est fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.
+    Si un nom est fourni pour `<custom-ident>`, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront considérées afin de trouver la position.
 
-    Si la valeur entière utilisée est `0`, la règle est invalide.
+    Une valeur entière de `0` sera considérée comme invalide.
 
 - `span && [ <integer> || <custom-ident> ]`
 
-  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+  - : Le début de l'élément est placé relativement au bord de fin pour occuper n colonnes.
 
-    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
+    Si un nom fourni pour `<custom-ident>`, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, toutes les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées pour l'étendue de l'élément.
 
-    Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera `1`. Les entiers négatifs ou nuls sont invalides.
+    Si l'entier n'est pas défini, la valeur par défaut sera `1`. Les entiers négatifs ou nuls sont invalides.
 
     `<custom-ident>` ne peut pas prendre la valeur `span`.
 
@@ -81,16 +87,22 @@ La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`.
 
 ## Exemples
 
+### Définir la colonne de début pour un élément de grille
+
+#### HTML
+
 ```html
 <div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-  <div class="box4">Four</div>
-  <div class="box5">Five</div>
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+  <div class="box5">Cinq</div>
 </div>
 ```
 
+#### CSS
+
 ```css
 .wrapper {
   display: grid;
@@ -99,7 +111,7 @@ La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`.
 }
 
 .box1 {
-  grid-column-start: 1;
+  grid-column-start: span 2;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
@@ -139,7 +151,78 @@ La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`.
 }
 ```
 
-{{EmbedLiveSample('Exemples', '230', '420')}}
+#### Résultat
+
+{{EmbedLiveSample('définir_la_colonne_de_début_pour_un_élément_de_grille', '230', '420')}}
+
+### Placement relatif aux lignes
+
+#### HTML
+
+```html
+<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+  <div class="box5">Cinq</div>
+</div>
+```
+
+#### CSS
+
+```css
+.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 2fr [main] 1fr [main] 1fr [inter] 1fr [main];
+}
+
+.box1 {
+  grid-column-start: span 2 main;
+  grid-column-end: 5;
+}
+
+.box2 {
+  grid-column-start: span 2 main;
+  grid-column-end: inter;
+}
+
+.box3 {
+  grid-column-start: span 2 main;
+  grid-column-end: main;
+}
+```
+
+```css hidden
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper > div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample('placement_relatif_aux_lignes', '230', '220')}}
 
 ## Spécifications
 
@@ -151,10 +234,10 @@ La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`.
 
 ## Voir aussi
 
-- {{cssxref("grid-column-end")}}
-- {{cssxref("grid-column")}}
-- {{cssxref("grid-row-start")}}
-- {{cssxref("grid-row-end")}}
-- {{cssxref("grid-row")}}
-- [Guide : le placement sur les lignes d'une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-- Tutoriel vidéo : [le placement sur les lignes (en anglais)](https://gridbyexample.com/video/series-line-based-placement/)
+- [`grid-column-end`](/fr/docs/Web/CSS/grid-column-end)
+- [`grid-column`](/fr/docs/Web/CSS/grid-column)
+- [`grid-row-start`](/fr/docs/Web/CSS/grid-row-start)
+- [`grid-row-end`](/fr/docs/Web/CSS/grid-row-end)
+- [`grid-row`](/fr/docs/Web/CSS/grid-row)
+- [Guide&nbsp;: le placement sur les lignes d'une grille](/fr/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+- [Tutoriel vidéo en anglais sur le placement sur les lignes](https://gridbyexample.com/video/series-line-based-placement/)

From 6323d52d9093bf3cadbb5f5b00588277244c74f2 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Tue, 26 Sep 2023 19:15:17 +0200
Subject: [PATCH 162/268] Fix #14146 (#15813)

* update vs en-us and fix #14146
* Fix per Tristan's review
---
 files/fr/web/css/max-width/index.md | 87 +++++++++++++++--------------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md
index c3ab09c4ce57e0..1e392429cd6746 100644
--- a/files/fr/web/css/max-width/index.md
+++ b/files/fr/web/css/max-width/index.md
@@ -1,13 +1,17 @@
 ---
 title: max-width
 slug: Web/CSS/max-width
+l10n:
+  sourceCommit: de7d710496266ccf4fce5ade75a67e6605f60ce5
 ---
 
 {{CSSRef}}
 
-La propriété **`max-width`** est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par `max-width` (autrement dit, `max-width` est une borne supérieur pour `width`).
+La propriété [CSS](/fr/docs/Web/CSS) **`max-width`** est utilisée pour définir la largeur maximale d'un élément. Elle empêche la [valeur utilisée](/fr/docs/Web/CSS/used_value) de la propriété [`width`](/fr/docs/Web/CSS/width) de devenir supérieure à la valeur spécifiée par `max-width`.
 
-{{EmbedInteractiveExample("pages/css/max-width.html")}}La valeur de `max-width` surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.
+{{EmbedInteractiveExample("pages/css/max-width.html")}}
+
+La valeur de `max-width` surcharge la valeur de [`width`](/fr/docs/Web/CSS/width), mais `max-width` est, elle, surchargée par [`min-width`](/fr/docs/Web/CSS/min-width).
 
 ## Syntaxe
 
@@ -18,37 +22,43 @@ max-width: 3.5em;
 
 /* Valeurs relatives */
 /* Type <percentage> */
-max-width: 10%;
+max-width: 75%;
 
 /* Valeurs avec un mot-clé */
 max-width: none;
 max-width: max-content;
 max-width: min-content;
-max-width: fit-content;
-max-width: fill-available;
+max-width: fit-content(20em);
 
 /* Valeurs globales */
 max-width: inherit;
 max-width: initial;
+max-width: revert;
+max-width: revert-layer;
 max-width: unset;
 ```
 
 ### Valeurs
 
-- `<length>`
-  - : La largeur minimale fixée. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.
-- `<percentage>`
-  - : La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
-- `fill-available`{{experimental_inline}}
-  - : La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`.
-- `fit-content` {{experimental_inline}}
-  - : Un synonyme pour `max-content`.
+- [`<length>`](/fr/docs/Web/CSS/length)
+  - : Définit la largeur maximale avec une valeur absolue.
+- [`<percentage>`](/fr/docs/Web/CSS/percentage)
+  - : Définit la largeur maximale avec une valeur relative à la largeur du bloc englobant.
+- <code>fit-content(<a href="/fr/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a>)</code>
+  - : Utilise la formule `fit-content` avec l'espace disponible remplacé par l'argument fourni, c'est-à-dire `min(max-content, max(min-content, argument))`.
 - `max-content` {{experimental_inline}}
-  - : La largeur intrinsèque préférée.
+  - : La largeur maximale intrinsèque préférée.
 - `min-content` {{experimental_inline}}
-  - : La largeur intrinsèque minimale.
+  - : La valeur minimale intrinsèque pour la largeur maximale.
 - `none`
-  - : Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.
+  - : Il n'y a pas de maximum pour la largeur.
+
+## Accessibilité
+
+Veiller à s'assurer que les éléments ciblés avec une règle utilisant `max-width` ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.
+
+- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [_Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
 
 ## Définition formelle
 
@@ -60,44 +70,38 @@ max-width: unset;
 
 ## Exemples
 
-### Exemple simple avec un tableau
+### Définir une largeur maximale en pixels
+
+Dans cet exemple, l'élément `enfant` aura la largeur la plus petite entre 150 et celle de l'élément `parent`.
 
 #### HTML
 
 ```html
-<div>
-  Lorem ipsum tralala sit amet, consectetur adipisicing
-  <p>
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-    aliquip ex ea commodo consequat.
-  </p>
+<div id="parent">
+  <div id="enfant">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
 </div>
 ```
 
 #### CSS
 
 ```css
-div {
-  width: 250px;
-  border: solid 1px red;
+#parent {
+  background: lightblue;
+  width: 300px;
 }
 
-p {
-  max-width: 60%;
-  border: solid 1px blue;
+#enfant {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
 }
 ```
 
 #### Résultat
 
-{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}}
-
-## Accessibilité
-
-Veiller à s'assurer que les éléments ciblés avec une règle utilisant `max-width` ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.
-
-- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [_Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+{{EmbedLiveSample("", 350, 100)}}
 
 ## Spécifications
 
@@ -109,9 +113,6 @@ Veiller à s'assurer que les éléments ciblés avec une règle utilisant `max-w
 
 ## Voir aussi
 
-- {{cssxref("width")}}
-- {{cssxref("min-width")}}
-- {{cssxref("min-height")}}
-- {{cssxref("max-height")}}
-- {{cssxref("box-sizing")}}
-- [Le modèle de boîtes](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte)
+- [Le modèle de boîtes](/fr/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) et [`box-sizing`](/fr/docs/Web/CSS/box-sizing)
+- [`width`](/fr/docs/Web/CSS/width), [`min-width`](/fr/docs/Web/CSS/min-width)
+- Les propriétés logiques correspondantes [`max-block-size`](/fr/docs/Web/CSS/max-block-size) et [`max-inline-size`](/fr/docs/Web/CSS/max-inline-size)

From 58325e3572db42586e841059f0de1da11015887d Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Tue, 26 Sep 2023 19:16:47 +0200
Subject: [PATCH 163/268] Fix #13597 (#15792)

* Rewordings and minor updates to fix #13597
* Applying Tristan's review :)
---
 files/fr/web/css/background-position/index.md | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md
index 077d699c528cd6..96b29da0138b7d 100644
--- a/files/fr/web/css/background-position/index.md
+++ b/files/fr/web/css/background-position/index.md
@@ -1,11 +1,13 @@
 ---
 title: background-position
 slug: Web/CSS/background-position
+l10n:
+  sourceCommit: 70b1b8ac18d3e3346645d4ee5155f654c83d96e0
 ---
 
 {{CSSRef}}
 
-La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par [`background-origin`](/fr/docs/Web/CSS/background-origin), pour chaque image d'arrière-plan.
+La propriété [CSS](/fr/docs/Web/CSS) **`background-position`** permet de définir la position initiale, relative à l'origine définie par [`background-origin`](/fr/docs/Web/CSS/background-origin), pour chaque image d'arrière-plan.
 
 {{EmbedInteractiveExample("pages/css/background-position.html")}}
 
@@ -44,6 +46,7 @@ background-position: top right 10px;
 background-position: inherit;
 background-position: initial;
 background-position: revert;
+background-position: revert-layer;
 background-position: unset;
 ```
 
@@ -53,12 +56,12 @@ La propriété `background-position` peut être définie grâce à une ou plusie
 
 - `<position>`
 
-  - : Une valeur [`<position>`](/fr/docs/Web/CSS/position). Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs. La première correspond à la position horizontale et la seconde à la position verticale.
+  - : Une valeur [`<position>`](/fr/docs/Web/CSS/position). Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une à quatre valeurs. Si deux valeurs qui ne sont pas des mots-clés sont utilisées, la première représente la position horizontale et la seconde la position verticale. Si une seule valeur est indiquée, la deuxième sera `center` par défaut. Si trois ou quatre valeurs sont utilisées, les valeurs de longueur-pourcentage sont des décalages relatifs au(x) mot(s)-clé(s) précédent(s).
 
     **Définition avec une valeur&nbsp;:** la valeur peut être&nbsp;:
 
     - Le mot-clé `center` qui centre l'image.
-    - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).
+    - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%) et l'élément sera placé au milieu de cet axe.
     - Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.
 
     **Définition avec deux valeurs&nbsp;:** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être&nbsp;:
@@ -66,7 +69,11 @@ La propriété `background-position` peut être définie grâce à une ou plusie
     - Un des mots-clés parmi `top`, `left`, `bottom`, `right`. Si `left` ou `right` est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si `top` ou `bottom` est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
     - Une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
 
-    > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit `top top` ou `left right` seront considérées comme invalides.
+    > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit, les combinaisons `top top`, `bottom bottom`, `top bottom`, `bottom top`, `right right`, `left left`, `left right` et `right left` seront considérées comme invalides.
+
+    - L'ordre des mots-clés n'est pas important, le navigateur pourra les réarranger si besoin. Ainsi, `top left` et `left top` auront le même effet. En revanche, si on associe une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) avec un mot-clé, l'ordre est important et la valeur définissant l'abscisse doit arriver avant l'ordonnée&nbsp;: `right 20px` ne sera pas équivalent à `20px right` et cette dernière forme sera invalide. Les valeurs `left 20%` ou `20% bottom` sont valides car les abscisses et ordonnées sont bien rangées.
+
+    - La valeur par défaut est `left top` ou `0% 0%`.
 
     **Définition avec 3 valeurs&nbsp;:** Deux valeurs sont des mots-clés et la troisième est le décalage appliqué à la valeur qui précède.
 
@@ -85,20 +92,20 @@ Lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au contene
 
 Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante&nbsp;:
 
-```
+```plain
 (largeur conteneur - largeur image) * (position en %) = (décalage horizontal)
 (hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)
 ```
 
 En utilisant l'axe horizontal pour un exemple, prenons une image dont la largeur mesure 300px, qu'on utilise celle-ci dans un conteneur dont la largeur mesure 100px et que `background-size` vaut `auto`&nbsp;:
 
-```
+```plain
 100px - 300px = -200px (différence entre le conteneur et l'image)
 ```
 
 Voici donc les décalages, exprimés en pixels, qu'on obtient avec les pourcentages -25%, 0%, 50%, 100% et 125%&nbsp;:
 
-```
+```plain
 -200px * -25% = 50px
 -200px * 0% = 0px
 -200px * 50% = -100px
@@ -114,7 +121,7 @@ Traduisons l'effet obtenu avec ces valeurs. Le **bord gauche** de **l'image** es
 - \-200px (le bord gauche de l'image est situé à 200px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image coïncide avec le bord droit du conteneur)
 - \-250px (le bord gauche de l'image est situé à 250px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image de 300px est au centre du conteneur).
 
-On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.
+On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet (car la différence entre l'image et le conteneur est alors nulle). Il faudra utiliser des valeurs absolues pour décaler l'image.
 
 ## Définition formelle
 
@@ -154,7 +161,7 @@ div {
   background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
 }
 .exemple_deux {
-  background: url("startransparent.gif") #ffee99 3em 50% no-repeat;
+  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
 }
 
 /*
@@ -166,7 +173,7 @@ L'ordre est le même entre background-image et -position.
   background-image: url("startransparent.gif"), url("catfront.png");
   background-position:
     0px 0px,
-    center;
+    right 3em bottom 2em;
 }
 ```
 
@@ -184,7 +191,7 @@ L'ordre est le même entre background-image et -position.
 
 ## Voir aussi
 
-- [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+- [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
 - [`background-position-x`](/fr/docs/Web/CSS/background-position-x)
 - [`background-position-y`](/fr/docs/Web/CSS/background-position-y)
 - [`background-position-inline`](/fr/docs/Web/CSS/background-position-inline)

From 9ad10f19b5f10a6b1b432ce179b93aa13c8549a6 Mon Sep 17 00:00:00 2001
From: tristantheb <tristantheb@users.noreply.github.com>
Date: Tue, 26 Sep 2023 19:17:34 +0200
Subject: [PATCH 164/268] fr: Updating `Web/CSS/CSS_backgrounds_and_borders`
 main page (#15976)

* First changes

* Add second part and fix typo

* Apply page link and name from #15797

* FIX: html tag and md conflict

Correction of upper and lower signs within markdown inline code.

* Minor fixes and rewordings

---------

Co-authored-by: SphinxKnight <julien.gattelier@gmail.com>
---
 .../css/css_backgrounds_and_borders/index.md  | 182 ++++++++++++------
 1 file changed, 125 insertions(+), 57 deletions(-)

diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md
index 278e2ee77f6e4b..d7f89f63057ac5 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/index.md
@@ -1,79 +1,147 @@
 ---
-title: CSS Backgrounds and Borders
+title: Arrière-plans et bordures CSS (CSS backgrounds and borders)
 slug: Web/CSS/CSS_backgrounds_and_borders
+l10n:
+  sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d
 ---
 
 {{CSSRef}}
 
-**_CSS Backgrounds and Borders_** est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.
+Le module de spécification **Arrière-plans et bordures CSS** (<i lang="en">CSS backgrounds and borders</i> en anglais) fournit des propriétés permettant d'ajouter des bordures, des coins arrondis et des ombres aux éléments.
+
+Vous pouvez ajouter différents types de styles de bordures, y compris des bordures composées d'images de tous types, que ce soit [des images matricielles](https://fr.wikipedia.org/wiki/Image_matricielle) ou des dégradés CSS. Les bordures peuvent être carrées ou arrondies, et un rayon de courbure différent peut être défini pour chaque coin. Les éléments peuvent être arrondis, qu'ils aient ou non une bordure visible.
+
+Les ombres des boîtes comprennent les ombres intérieures et extérieures, les ombres simples ou multiples, et les ombres opaques ou transparentes. Une ombre extérieure projette une ombre comme si la bordure de l'élément était opaque. Une ombre intérieure projette une ombre comme si tout ce qui se trouvait à l'extérieur du bord de remplissage était opaque. L'ombre peut être unie et opaque ou inclure une distance d'étalement avec une transition de la couleur de l'ombre vers la transparence.
+
+Les propriétés de ce module vous permettent également de définir si les cellules à l'intérieur d'un élément [`<table>`](/fr/docs/Web/HTML/Element/table) doivent avoir des bordures communes ou séparées.
+
+### Arrière-plans, bordures et ombres de boîtes en action
+
+Cet exemple de bordures, d'arrière-plans et d'ombres en boîte se compose d'images d'arrière-plan centrées composées de dégradés linéaires et radiaux. Une série d'ombres en boîte fait ressortir la bordure. L'élément de gauche a une image de bordure définie. L'élément de droite a une bordure arrondie en pointillés.
+
+{{EmbedGHLiveSample("css-examples/modules/backgrounds.html", '100%', 430)}}
+
+Les images d'arrière-plan sont définies avec la propriété CSS [`background-image`](/fr/docs/Web/CSS/background-image). Les images sont centrées avec la propriété [`background-position`](/fr/docs/Web/CSS/background-position). Différentes valeurs de la propriété [`background-clip`](/fr/docs/Web/CSS/background-clip) pour les images d'arrière-plan multiples sont utilisées pour faire en sorte que les images d'arrière-plan restent à l'intérieur de la boîte de contenu. La couleur d'arrière-plan est découpée dans le cadre de remplissage, ce qui empêche l'arrière-plan d'apparaître à travers les sections transparentes pour les propriétés [`border-image`](/fr/docs/Web/CSS/border-image) et [`border`](/fr/docs/Web/CSS/border). Les coins arrondis de l'élément de droite sont créés à l'aide de la propriété [`border-radius`](/fr/docs/Web/CSS/border-radius). Une seule déclaration [`box-shadow`](/fr/docs/Web/CSS/box-shadow) est utilisée pour définir toutes les ombres, tant à l'intérieur qu'à l'extérieur.
+
+Pour voir le code de cet exemple, [regardez le code source sur GitHub](https://github.com/mdn/css-examples/blob/main/modules/backgrounds.html).
 
 ## Référence
 
 ### Propriétés CSS
 
-- {{cssxref("background")}}
-- {{cssxref("background-attachment")}}
-- {{cssxref("background-clip")}}
-- {{cssxref("background-color")}}
-- {{cssxref("background-image")}}
-- {{cssxref("background-origin")}}
-- {{cssxref("background-position")}}
-- {{cssxref("background-position-x")}}
-- {{cssxref("background-position-y")}}
-- {{cssxref("background-repeat")}}
-- {{cssxref("background-size")}}
-- {{cssxref("border")}}
-- {{cssxref("border-bottom")}}
-- {{cssxref("border-bottom-color")}}
-- {{cssxref("border-bottom-left-radius")}}
-- {{cssxref("border-bottom-right-radius")}}
-- {{cssxref("border-bottom-style")}}
-- {{cssxref("border-bottom-width")}}
-- {{cssxref("border-collapse")}}
-- {{cssxref("border-color")}}
-- {{cssxref("border-image")}}
-- {{cssxref("border-image-outset")}}
-- {{cssxref("border-image-repeat")}}
-- {{cssxref("border-image-slice")}}
-- {{cssxref("border-image-source")}}
-- {{cssxref("border-image-width")}}
-- {{cssxref("border-left")}}
-- {{cssxref("border-left-color")}}
-- {{cssxref("border-left-style")}}
-- {{cssxref("border-left-width")}}
-- {{cssxref("border-radius")}}
-- {{cssxref("border-right")}}
-- {{cssxref("border-right-color")}}
-- {{cssxref("border-right-style")}}
-- {{cssxref("border-right-width")}}
-- {{cssxref("border-style")}}
-- {{cssxref("border-top")}}
-- {{cssxref("border-top-color")}}
-- {{cssxref("border-top-left-radius")}}
-- {{cssxref("border-top-right-radius")}}
-- {{cssxref("border-top-style")}}
-- {{cssxref("border-top-width")}}
-- {{cssxref("border-width")}}
-- {{cssxref("box-shadow")}}
+- [`background-attachment`](/fr/docs/Web/CSS/background-attachment)
+- [`background-clip`](/fr/docs/Web/CSS/background-clip)
+- [`background-color`](/fr/docs/Web/CSS/background-color)
+- [`background-image`](/fr/docs/Web/CSS/background-image)
+- [`background-origin`](/fr/docs/Web/CSS/background-origin)
+- [`background-position`](/fr/docs/Web/CSS/background-position)
+- [`background-repeat`](/fr/docs/Web/CSS/background-repeat)
+- [`background-size`](/fr/docs/Web/CSS/background-size)
+- La propriété raccourcie [`background`](/fr/docs/Web/CSS/background)
+- [`background-position-x`](/fr/docs/Web/CSS/background-position-x) {{experimental_inline}}
+- [`background-position-y`](/fr/docs/Web/CSS/background-position-y) {{experimental_inline}}
+- [`background-position-inline`](/fr/docs/Web/CSS/background-position-inline) {{experimental_inline}}
+- [`background-position-block`](/fr/docs/Web/CSS/background-position-block) {{experimental_inline}}
+
+- [`border-bottom-color`](/fr/docs/Web/CSS/border-bottom-color)
+- [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style)
+- [`border-bottom-width`](/fr/docs/Web/CSS/border-bottom-width)
+- La propriété raccourcie [`border-bottom`](/fr/docs/Web/CSS/border-bottom)
+- [`border-left-color`](/fr/docs/Web/CSS/border-left-color)
+- [`border-left-style`](/fr/docs/Web/CSS/border-left-style)
+- [`border-left-width`](/fr/docs/Web/CSS/border-left-width)
+- La propriété raccourcie [`border-left`](/fr/docs/Web/CSS/border-left)
+- [`border-right-color`](/fr/docs/Web/CSS/border-right-color)
+- [`border-right-style`](/fr/docs/Web/CSS/border-right-style)
+- [`border-right-width`](/fr/docs/Web/CSS/border-right-width)
+- La propriété raccourcie [`border-right`](/fr/docs/Web/CSS/border-right)
+- [`border-top-color`](/fr/docs/Web/CSS/border-top-color)
+- [`border-top-style`](/fr/docs/Web/CSS/border-top-style)
+- [`border-top-width`](/fr/docs/Web/CSS/border-top-width)
+- La propriété raccourcie [`border-top`](/fr/docs/Web/CSS/border-top)
+- La propriété raccourcie [`border-color`](/fr/docs/Web/CSS/border-color)
+- La propriété raccourcie [`border-style`](/fr/docs/Web/CSS/border-style)
+- La propriété raccourcie [`border-width`](/fr/docs/Web/CSS/border-width)
+- La propriété raccourcie [`border`](/fr/docs/Web/CSS/border)
+
+- [`border-collapse`](/fr/docs/Web/CSS/border-collapse)
+
+- [`border-bottom-left-radius`](/fr/docs/Web/CSS/border-bottom-left-radius)
+- [`border-bottom-right-radius`](/fr/docs/Web/CSS/border-bottom-right-radius)
+- [`border-top-left-radius`](/fr/docs/Web/CSS/border-top-left-radius)
+- [`border-top-right-radius`](/fr/docs/Web/CSS/border-top-right-radius)
+- La propriété raccourcie [`border-radius`](/fr/docs/Web/CSS/border-radius)
+
+- [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset)
+- [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat)
+- [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice)
+- [`border-image-source`](/fr/docs/Web/CSS/border-image-source)
+- [`border-image-width`](/fr/docs/Web/CSS/border-image-width)
+- La propriété raccourcie [`border-image`](/fr/docs/Web/CSS/border-image)
+
+- [`box-shadow`](/fr/docs/Web/CSS/box-shadow)
+
+### Types de données
+
+- Le type énuméré [`line-type`](/fr/docs/Web/CSS/line-type")
 
 ## Guides
 
-- [Manipuler plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+- [Apprendre CSS: Arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+  - : Dans cet article, on voit comment implémenter des images décoratives à l'aide d'images d'arrière-plan CSS.
+- [Utiliser plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
   - : Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.
-- [Mettre à l'échelle les images utilisées pour un arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images)
+- [Redimensionner les images d'arrière-plan avec background-size](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images)
   - : Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.
-- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
-  - : Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.
+- [Apprendre CSS: Le modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model)
+  - : Dans cet article, on voit comment les bordures, ainsi que d'autres propriétés du modèle de boîte, affectent le modèle de boîte CSS.
+- [Utilisation de dégradés CSS](/fr/docs/Web/CSS/CSS_images/Using_CSS_gradients)
+  - : Dans cet article, on voit comment créer des images d'arrière-plan dégradées CSS.
+
+## Notions associées
+
+### Propriétés
+
+- [`border-block-end-color`](/fr/docs/Web/CSS/border-block-end-color)
+- [`border-block-start-color`](/fr/docs/Web/CSS/border-block-start-color)
+- [`border-inline-end-color`](/fr/docs/Web/CSS/border-inline-end-color)
+- [`border-inline-start-color`](/fr/docs/Web/CSS/border-inline-start-color)
+- [`border-block-end-style`](/fr/docs/Web/CSS/border-block-end-style)
+- [`border-block-start-style`](/fr/docs/Web/CSS/border-block-start-style)
+- [`border-inline-end-style`](/fr/docs/Web/CSS/border-inline-end-style)
+- [`border-inline-start-style`](/fr/docs/Web/CSS/border-inline-start-style)
+- [`border-block-end-width`](/fr/docs/Web/CSS/border-block-end-width)
+- [`border-block-start-width`](/fr/docs/Web/CSS/border-block-start-width)
+- [`border-inline-end-width`](/fr/docs/Web/CSS/border-inline-end-width)
+- [`border-inline-start-width`](/fr/docs/Web/CSS/border-inline-start-width)
 
-## Outils
+- [`border-start-start-radius`](/fr/docs/Web/CSS/border-start-start-radius)
+- [`border-start-end-radius`](/fr/docs/Web/CSS/border-start-end-radius)
+- [`border-end-start-radius`](/fr/docs/Web/CSS/border-end-start-radius)
+- [`border-end-end-radius`](/fr/docs/Web/CSS/border-end-end-radius)
 
-- [Générateur pour `border-image`](/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image)
-  - : Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).
-- [Générateur pour `border-radius`](/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius)
-  - : Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).
-- [Générateur pour `box-shadow`](/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow)
-  - : Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).
+- [`box-sizing`](/fr/docs/Web/CSS/box-sizing)
+- [`box-decoration-break`](/fr/docs/Web/CSS/box-decoration-break)
+- [`text-shadow`](/fr/docs/Web/CSS/text-shadow)
+
+### Autres
+
+- La fonction CSS [`url()`](/fr/docs/Web/CSS/url)
+- Le type de donnée [`<color>`](/fr/docs/Web/CSS/color)
+- Le type de donnée [`<image>`](/fr/docs/Web/CSS/image)
+- Le type de donnée[`<position>`](/fr/docs/Web/CSS/position)
+
+- Le mot-clé [`currentcolor`](/fr/docs/Web/CSS/color_value#currentcolor_keyword)
 
 ## Spécifications
 
 {{Specifications}}
+
+## Voir aussi
+
+- Des outils interactifs qui vous permettent de créer visuellement des bordures, des coins arrondis et des ombres&nbsp;:
+  - [Générateur pour `border-image`](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator)
+  - [Générateur pour `border-radius`](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator)
+  - [Générateur pour `box-shadow`](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator)
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/CSS/CSS_colors/Applying_color), incluant les bordures.
+- Le filtre de fonction [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow) qui applique un effet d'ombre portée à une image en entrée. Cette fonction est utilisée par les propriétés [`filter`](/fr/docs/Web/CSS/filter) et [`backdrop-filter`](/fr/docs/Web/CSS/backdrop-filter).

From 418258c4f93517127bebb50f37d61100420c5b56 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Wed, 27 Sep 2023 06:36:02 +0900
Subject: [PATCH 165/268] [ko] add index.md for
 `web/glossary/first_input_delay` (#15975)

---
 files/ko/glossary/first_input_delay/index.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 files/ko/glossary/first_input_delay/index.md

diff --git a/files/ko/glossary/first_input_delay/index.md b/files/ko/glossary/first_input_delay/index.md
new file mode 100644
index 00000000000000..d2da109fa7dfa6
--- /dev/null
+++ b/files/ko/glossary/first_input_delay/index.md
@@ -0,0 +1,19 @@
+---
+title: 최초 입력 지연 (First input delay, FID)
+slug: Glossary/First_input_delay
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**최초 입력 지연 (First input delay, FID)** 은 사용자가 사이트와 처음 상호작용할 때(예, 링크를 클릭 또는 버튼을 탭하거나 사용자 정의 JavaScript 기반 컨트롤 UI를 사용할 때)부터 실제로 해당 상호작용에 응답할 수 있는 시간까지 측정합니다.
+
+웹 페이지에서 첫 번째 사용자와의 상호작용과 해당 상호 작용에 대한 브라우저의 응답 사이의 시간(밀리초)입니다. 스크롤 및 확대/축소는 이 측정 부분에 포함되지 않습니다.
+
+콘텐츠가 페이지에 그려지는 시점과 모든 기능이 사람과의 상호작용에 반응하는 시점 사이의 시간은 메인 스레드에서 다운로드, 구문 분석 및 실행해야 하는 JavaScript의 크기와 복잡성 및 장치 속도에 따라 달라지는 경우가 많거나 부족합니다(저사양 모바일 장치를 생각해보세요). 지연 시간이 길어질수록, 사용자 경험은 더욱 안 좋아집니다. 사이트 초기화 시간을 줄이고 [시간이 오래 걸리는 작업](/ko/docs/Web/API/PerformanceLongTaskTiming)을 제거하면 최초 입력 지연을 제거하는 데 도움이 될 수 있습니다.
+
+## 같이 보기
+
+- [requestIdleCallback](/ko/docs/Web/API/Window/requestIdleCallback)
+- [지연 로딩](/ko/docs/Web/Performance/Lazy_loading)

From 85e55ffa392ca6aeca125e6fe7bfbf40eb0a6a5e Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Wed, 27 Sep 2023 06:40:09 +0900
Subject: [PATCH 166/268] [ko] add index.md for `web/glossary/interpolation`
 (#16096)

---
 files/ko/glossary/interpolation/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/ko/glossary/interpolation/index.md

diff --git a/files/ko/glossary/interpolation/index.md b/files/ko/glossary/interpolation/index.md
new file mode 100644
index 00000000000000..cd8d63a01e7e17
--- /dev/null
+++ b/files/ko/glossary/interpolation/index.md
@@ -0,0 +1,15 @@
+---
+title: 보간법 (Interpolation)
+slug: Glossary/Interpolation
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+보간법 (Interpolation)은 알려진 값을 기반으로 값을 계산하는 프로세스입니다. 보간법은 애니메이션 프로세스 중에 높이, 너비 등과 같은 속성의 중간 값을 얻는 데 사용됩니다. 그라데이션에서는, 제공된 색상 목록을 기반으로 색상의 중간 값을 정의하는 데 보간법이 사용됩니다. 또한, "보간"이라는 용어는 템플릿 리터럴의 문자열 대체에 대한 설명으로 사용됩니다.
+
+## 같이 보기
+
+- 위키백과의 [보간법](https://en.wikipedia.org/wiki/Interpolation)
+- 위키백과의 [문자열 보간법](https://en.wikipedia.org/wiki/String_interpolation)

From b6902bc0381d61e13ff951bb9d9364ee57ffaf1b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 23 Sep 2023 09:48:55 +0900
Subject: [PATCH 167/268] =?UTF-8?q?2023/02/19=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/readablestreambyobrequest/index.md    | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 files/ja/web/api/readablestreambyobrequest/index.md

diff --git a/files/ja/web/api/readablestreambyobrequest/index.md b/files/ja/web/api/readablestreambyobrequest/index.md
new file mode 100644
index 00000000000000..18c44392c8c042
--- /dev/null
+++ b/files/ja/web/api/readablestreambyobrequest/index.md
@@ -0,0 +1,93 @@
+---
+title: ReadableStreamBYOBRequest
+slug: Web/API/ReadableStreamBYOBRequest
+l10n:
+  sourceCommit: 2937558d5ed1e03d7f60b2de71dd9c17f490166e
+---
+
+{{APIRef("Streams")}}
+
+**`ReadableStreamBYOBRequest`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、は、コンシューマーにゼロコピーで移譲される（ストリーム内部のキューをバイパスする）基盤からのデータの「プルリクエスト」を表します。
+
+`ReadableStreamBYOBRequest` オブジェクトは、コンシューマーがデータのリクエストを行い、ストリームの内部キューが空である場合に、「BYOBモード」で作成されます。
+（ストリームがすでにバッファーされたデータを持っている場合、ストリームはコンシューマーのリクエストを直接解決します。）
+基盤のバイトソースは、コントローラの {{domxref("ReadableByteStreamController.byobRequest")}} プロパティを通してアクティブな BYOB リクエストにアクセスすることができます。
+
+「BYOB モード」に対応している基盤ソースは、 {{domxref("ReadableByteStreamController.byobRequest")}} を調べ、存在する場合はそれを使用してデータを移譲しなければなりません。
+もし {{domxref("ReadableByteStreamController.byobRequest")}} が `null` の時に基盤からデータが到着した場合、 {{domxref("ReadableByteStreamController.enqueue()")}} を使用してキューに入れることができます。
+これは、ストリームの内部バッファーが空でないときに、基盤のプッシュソースが新しいデータを受信した場合に発生する可能性があります。
+
+基盤ソースは、 BYOB リクエストの [`view`](#readablestreambyobrequest.view) にデータを書き込んでから [`respond()`](#readablestreambyobrequest.respond) を呼び出すか、 [`respondWithNewView()`](#readablestreambyobrequest.respondwithnewview) を呼び出して新しいビューを引数として渡すことで、リクエストを使用します。
+「新しいビュー」は、実際には元の `view` と同じバッファー上で、同じオフセットから始まるビューでなければならないことに注意してください。
+これは、基盤が元のビュー全体を満たすことができない場合に、より短いバッファーを返すために使用することができます。
+
+なお、 {{domxref("ReadableByteStreamController")}} は [`ReadableStream()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#type)で `type="bytes"` を指定した場合のみ、が基盤ソースに対して作成されます。
+「BYOB モード」は [`autoAllocateChunkSize`](/ja/docs/Web/API/ReadableStream#autoallocatechunksize) を [`ReadableController()` コンストラクター](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize)で指定した場合、または {{domxref("ReadableStreamBYOBReader")}} （ふつうは {{domxref("ReadableStream.getReader()")}} に引数 `{ mode: 'byob' }` 付きで呼び出すことで構築される）を使用した場合にに有効になります。
+
+## コンストラクター
+
+なし。 `ReadableStreamBYOBRequest` インスタンスは `ReadableByteStreamController` によって必要に応じて作成されます。
+
+## インスタンスプロパティ
+
+- {{domxref("ReadableStreamBYOBRequest.view")}} {{ReadOnlyInline}}
+  - : 現在のビューを返します。
+    `ReadableStreamBYOBRequest.respond()` が呼び出されたときにコンシューマーに移譲されるバッファーに関するビューです。
+
+## インスタンスメソッド
+
+- {{domxref("ReadableStreamBYOBRequest.respond()")}}
+  - : 関連付けられた読み取り可能なバイトストリームに、指定したバイト数が現在の [`view`](#readablestreambyobrequest.view) に書き込まれたことを通知し、コンシューマーからの待機中のリクエストを解決させます。
+    このメソッドが呼び出された後、`view`は移譲され、変更できなくなることに注意してください。
+- {{domxref("ReadableStreamBYOBRequest.respondWithNewView()")}}
+  - : 引数として渡された、読み取り可能なバイトストリームのコンシューマーに転送される、関連付けられた読み取り可能なストリームビューへ通知します。
+    この新しいビューは、元の [`view`](#readablestreambyobrequest.view) と同じバッファーを使用し、同じオフセットから始まり、同じ長さかそれ以下でなければなりません。
+    このメソッドが呼び出された後、 `view` は移譲され、変更できなくなることに注意してください。
+
+## 例
+
+以下のコードは、[読み取り可能なバイトストリーム > 読み取り可能なソケットプッシュバイトストリームの作成](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams#読み取り可能なソケットプッシュバイトストリームの作成)のライブ例から引用したものです。
+
+データを移譲するプッシュ基盤バイトソースは、最初に {{domxref("ReadableByteStreamController.byobRequest","controller.byobRequest")}} が `null` でないことを調べる必要があります。
+このチェックが必要なのは、自動チャンク割り当てが有効でなく、既定のリーダーで使用する場合のみです。
+
+```js
+if (controller.byobRequest) {
+  /* code to transfer data */
+}
+```
+
+`ReadableStreamBYOBRequest` にデータを読み込んでそれを移譲するには 2 つの方法があります。
+最初の方法は {{domxref("ReadableStreamBYOBRequest.view")}} プロパティにデータを書き込んでから {{domxref("ReadableStreamBYOBRequest.respond()")}} を呼び出して移譲するデータ量を示す方法です。
+処理後、 `byobRequest.view` を切り離し、リクエストを破棄すべきです。
+
+下記のコードはこの用途を示すもので、データをビューにコピーするために `readInto()` メソッドを使用しています。
+
+```js
+const v = controller.byobRequest.view;
+bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+controller.byobRequest.respond(bytesRead);
+```
+
+他にも、 {{domxref("ReadableStreamBYOBRequest.respondWithNewView()")}} を呼び出して、同じ基盤バッキングデータに自分自身でビューを渡す、という手法があります。
+これは単に、実際に移譲される基盤バッファー/メモリーバッキングの範囲を指定する別の方法であることに注意してください。
+上のコードと同等の `respondWithNewView` は次のようになります。
+
+```js
+const v = controller.byobRequest.view;
+bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+const newView = new Uint8Array(v.buffer, v.byteOffset, bytesRead);
+controller.byobRequest.respondWithNewView(newView);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)

From 1cb62b2390bd6da6f3633408047e2337067a0bdb Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 23 Sep 2023 09:56:41 +0900
Subject: [PATCH 168/268] =?UTF-8?q?2023/07/18=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../readablestreambyobrequest/view/index.md   | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 files/ja/web/api/readablestreambyobrequest/view/index.md

diff --git a/files/ja/web/api/readablestreambyobrequest/view/index.md b/files/ja/web/api/readablestreambyobrequest/view/index.md
new file mode 100644
index 00000000000000..76d522a80115f5
--- /dev/null
+++ b/files/ja/web/api/readablestreambyobrequest/view/index.md
@@ -0,0 +1,33 @@
+---
+title: "ReadableStreamBYOBRequest: view プロパティ"
+short-title: view
+slug: Web/API/ReadableStreamBYOBRequest/view
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
+---
+
+{{APIRef("Streams")}}
+
+**`view`** は {{domxref("ReadableStreamBYOBRequest")}} インターフェイスのゲッタープロパティで、現在のビューを返します。
+
+## 値
+
+コントローラーが生成したデータを書き込む出力先領域を表す[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)です。
+
+{{domxref("ReadableStreamBYOBRequest.respond()")}} または {{domxref("ReadableStreamBYOBRequest.respondWithNewView()")}} の呼び出しによって、すでにリクエストが応答されていた場合は `null` になります。
+
+## 例
+
+{{domxref("ReadableStreamBYOBRequest")}} の例を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)

From 42ea235a27ae9e5a0884d58f1bafba07036324bc Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 23 Sep 2023 10:04:09 +0900
Subject: [PATCH 169/268] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../respond/index.md                          | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 files/ja/web/api/readablestreambyobrequest/respond/index.md

diff --git a/files/ja/web/api/readablestreambyobrequest/respond/index.md b/files/ja/web/api/readablestreambyobrequest/respond/index.md
new file mode 100644
index 00000000000000..6f71cbd244193f
--- /dev/null
+++ b/files/ja/web/api/readablestreambyobrequest/respond/index.md
@@ -0,0 +1,62 @@
+---
+title: "ReadableStreamBYOBRequest: respond() メソッド"
+short-title: respond()
+slug: Web/API/ReadableStreamBYOBRequest/respond
+l10n:
+  sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
+---
+
+{{APIRef("Streams")}}
+
+**`respond()`** は {{domxref("ReadableStreamBYOBRequest")}} インターフェイスのメソッドで、 {{domxref("ReadableStreamBYOBRequest.view")}} に指定したバイト数が書き込まれたことを、関連する[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)に通知するために用いられます。
+
+このメソッドが呼び出された後、 {{domxref("ReadableStreamBYOBRequest/view","view")}} は移譲され、変更できなくなります。
+
+## 構文
+
+```js-nolint
+respond(bytesWritten)
+```
+
+### 引数
+
+- `bytesWritten`
+  - : {{domxref("ReadableStreamBYOBRequest.view")}} に書き込まれたバイト数です。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : リクエストが関連付けられた{{domxref("ReadableByteStreamController")}}を持っていないか、ビューバッファが切り離されていないか、移譲できません。
+
+## 例
+
+下記のコードは[読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)のライブ例から引用しています。
+
+このメソッドは、コンシューマーからの待機中の読み取りリクエストを履行するために、データのゼロコピー移譲を行う一環として、基盤となるバイトソースによって呼び出されます。
+基盤となるバイトソースは最初に {{domxref("ReadableStreamBYOBRequest.view")}} にデータを書き込み、次にこの `respond()` メソッドを呼び出して、バッファにコピーされたデータの量を示し、データをリーダーに移譲させます。
+
+下記のコードはこの用途を示すもので、データをビューにコピーするために `readInto()` メソッドを使用しています。
+
+```js
+const v = controller.byobRequest.view;
+bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+controller.byobRequest.respond(bytesRead);
+```
+
+処理後、 `byobRequest.view` は切り離され、リクエストは破棄されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)

From 0b4384d81e44fbcb5521372c52c0f5cc22dc512a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 23 Sep 2023 10:09:35 +0900
Subject: [PATCH 170/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../respondwithnewview/index.md               | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 files/ja/web/api/readablestreambyobrequest/respondwithnewview/index.md

diff --git a/files/ja/web/api/readablestreambyobrequest/respondwithnewview/index.md b/files/ja/web/api/readablestreambyobrequest/respondwithnewview/index.md
new file mode 100644
index 00000000000000..ab77eea55292eb
--- /dev/null
+++ b/files/ja/web/api/readablestreambyobrequest/respondwithnewview/index.md
@@ -0,0 +1,73 @@
+---
+title: "ReadableStreamBYOBRequest: respondWithNewView() メソッド"
+short-title: respondWithNewView()
+slug: Web/API/ReadableStreamBYOBRequest/respondWithNewView
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Streams")}}
+
+**`respondWithNewView()`** は {{domxref("ReadableStreamBYOBRequest")}} インターフェイスのメソッドで、 {{domxref("ReadableStreamBYOBRequest.view")}} の代わりに、関連付けられた読み取り可能なバイトストリームの消費者が書き込むべき新しいビューを指定します。
+
+新しいビューは {{jsxref("TypedArray")}} または {{jsxref("DataView")}} でなければならず、 {{domxref("ReadableStreamBYOBRequest.view")}} と同じバッキングメモリー領域にビューを提供します。
+このメソッドが呼び出された後、メソッドに渡されたビューは移譲され、変更できなくなりました。
+
+このメソッドは、バイト基盤がレスポンスを完了する前に `byobRequest.view` を内部的に移譲する必要がある使用する用途を意図しています。
+例えば、 BYOB ソースは BYOB ビューを別個のワーカースレッドに移譲し、それが満たされたらワーカがそれを移譲し返すのを待つことができます。
+
+## 構文
+
+```js-nolint
+respondWithNewView(view)
+```
+
+### 引数
+
+- `view`
+
+  - : 関連付けられた読み取り可能なバイトストリームの消費者が {{domxref("ReadableStreamBYOBRequest.view")}} の代わりに書くべき {{jsxref("TypedArray")}} または {{jsxref("DataView")}} です。
+
+    これは {{domxref("ReadableStreamBYOBRequest.view")}} と同じバッキングメモリー領域上のビューでなければならず、占めるメモリーは同じかそれ以下でなければなりません。
+    具体的には、ビューのバッファーか移譲されたもので、同じ `byteOffset` を保有し、`byteLength` （書き込むバイト数）がビューのバイト数以下でなければなりません。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+
+  - : 元のオブジェクトが `ReadableStreamBYOBRequest` でないか、関連するコントローラがないか、関連する内部配列バッファが存在しないか切り離されている場合に発生します。
+    また、アクティブな読者がいるときに `view` の長さがゼロである場合や、閉じられたストリームで呼び出されたときにゼロでない場合にも発生する可能性があります。
+
+- {{jsxref("RangeError")}}
+  - : 新しい `view` が {{domxref("ReadableStreamBYOBRequest.view")}} のバッキングメモリー領域と一致しない場合に発生します。
+    例えば、同じバッファー（または移譲されたバージョン）ではない、異なる `byteOffset` を持っている、バッキングビューで利用できるメモリーより大きい、などです。
+
+## 例
+
+移譲するビューは、 {{domxref("ReadableStreamBYOBRequest.view")}} と同じタイプであり、同じ基盤バッファーとバイトオフセットを保有し、同じかそれ以下のバイト長でなければなりません。
+
+例えば、下記のようにビューとレスポンスを定義します。
+
+```js
+const v = controller.byobRequest.view;
+bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
+byobRequest.respondWithNewView(
+  byobRequest.view.subarray(v.byteOffset, bytesRead),
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なバイトストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)

From a5ef2c646c9c78c927e7dd2ac1d9b671a00f5427 Mon Sep 17 00:00:00 2001
From: student_2333 <lgc2333@126.com>
Date: Wed, 27 Sep 2023 08:53:55 +0800
Subject: [PATCH 171/268] [zh-cn]: fix typo (#16147)

---
 files/zh-cn/learn/css/css_layout/grids/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/learn/css/css_layout/grids/index.md b/files/zh-cn/learn/css/css_layout/grids/index.md
index a0a8448b1ce36f..04b5ab550b62e6 100644
--- a/files/zh-cn/learn/css/css_layout/grids/index.md
+++ b/files/zh-cn/learn/css/css_layout/grids/index.md
@@ -113,7 +113,7 @@ body {
 
 ### 使用 fr 单位的灵活网格
 
-除了长度和百分比，我们也可以用 `fr` 这个单位来灵活地定义网格的行与列的大小。这个单位代表网格容器中可用空间的一份，可能有点抽像，看看下面的例子吧。
+除了长度和百分比，我们也可以用 `fr` 这个单位来灵活地定义网格的行与列的大小。这个单位代表网格容器中可用空间的一份，可能有点抽象，看看下面的例子吧。
 
 使用下面的规则来修改你的网格轨道，创建 3 个宽度为 `1fr` 的列：
 

From dd759949c7ba334d9263b79cb4818a6336d008f2 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Wed, 27 Sep 2023 09:54:36 +0800
Subject: [PATCH 172/268] [zh-cn]: update the translation of Number.toString()
 (#16124)

---
 .../global_objects/number/tostring/index.md   | 77 +++++++++++++------
 1 file changed, 55 insertions(+), 22 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md
index fdd242a2e732c8..d7aeff63bd3dee 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/tostring/index.md
@@ -5,54 +5,87 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/toString
 
 {{JSRef}}
 
-**`toString()`** 方法返回指定 {{jsxref("Number")}} 对象的字符串表示形式。
+{{jsxref("Number")}} 值的 **`toString()`** 方法返回表示该数字值的字符串。
+
+{{EmbedInteractiveExample("pages/js/number-tostring.html")}}
 
 ## 语法
 
-```plain
-numObj.toString([radix])
+```js-nolint
+toString()
+toString(radix)
 ```
 
 ### 参数
 
-- radix
-  - : 指定要用于数字到字符串的转换的基数 (从 2 到 36)。如果未指定 `radix` 参数，则默认值为 10。
+- `radix` {{optional_inline}}
+  - : 一个整数，范围在 `2` 到 `36` 之间，用于指定表示数字值的基数。默认为 10。
+
+### 返回值
 
-### 异常信息
+一个表示指定数字值的字符串。
+
+### 异常
 
 - {{jsxref("RangeError")}}
-  - : 如果 `toString()` 的 radix 参数不在 2 到 36 之间，将会抛出一个 {{jsxref("RangeError")}}。
+  - : 如果 `radix` 小于 2 或大于 36，则抛出该异常。
 
 ## 描述
 
-{{jsxref("Number")}} 对象覆盖了 {{jsxref("Object")}} 对象上的 `toString()` 方法，它不是继承的 {{jsxref("Object.prototype.toString()")}}。对于 {{jsxref( "Number")}} 对象，`toString()` 方法以指定的基数返回该对象的字符串表示。
+{{jsxref("Number")}} 对象的重写了 {{jsxref("Object")}} 的 `toString` 方法；它不会继承 {{jsxref("Object.prototype.toString()")}}。对于 `Number` 值，`toString` 方法返回数字值指定基数的字符串表示。
+
+对于 10 以上的基数，字母表示大于 9 的数字。例如，对于十六进制数（基数为 16），`a` 到 `f` 用于表示大于 9 的数字。
 
-如果转换的基数大于 10，则会使用字母来表示大于 9 的数字，比如基数为 16 的情况，则使用 a 到 f 的字母来表示 10 到 15。
+如果指定的值为负数，则符号会被保留。即使基数为 2，也是如此；返回的字符串是带有 `-` 符号的正数二进制表示，而**不是**数字值的补码表示。
+
+`0` 和 `-0` 都以 `"0"` 作为其字符串表示。{{jsxref("Infinity")}} 返回 `"Infinity"`，而 {{jsxref("NaN")}} 返回 `"NaN"`。
+
+如果该数字不是一个整数，则使用小数点 `.` 来分隔小数部分。如果基数为 10，并且数字的大小（忽略符号）大于或等于 10<sup>21</sup> 或小于 10<sup>-6</sup>，则使用[科学计数法](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#指数)。在这种情况下，返回的字符串总是显式地指定了指数的符号。
+
+```js
+console.log((10 ** 21.5).toString()); // "3.1622776601683794e+21"
+console.log((10 ** 21.5).toString(8)); // "526665530627250154000000"
+```
 
-如果基数没有指定，则使用 10。
+`toString` 方法要求 `this` 值是 `Number` 原始值或包装对象。对于其他 `this` 值，不会尝试将它们转换为数字值，而是抛出 {{jsxref("TypeError")}}。
 
-如果对象是负数，则会保留负号。即使 radix 是 2 时也是如此：返回的字符串包含一个负号（-）前缀和正数的二进制表示，**不是** 数值的二进制补码。
+因为 `Number` 没有 [`[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) 方法，当一个 `Number` *对象*在一个期望字符串的上下文中使用时（比如在[模板字符串](/zh-CN/docs/Web/JavaScript/Reference/Template_literals)中），JavaScript 会自动调用 `toString()` 方法。然而，`Number` *原始值*不会使用 `toString()` 方法来进行[字符串强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)——相反，它们会直接使用与 `toString()` 初始实现的相同算法进行转换。
 
-进行数字到字符串的转换时，建议**用小括号将要转换的目标括起来**，防止出错。
+```js
+Number.prototype.toString = () => "重写了";
+console.log(`${1}`); // "1"
+console.log(`${new Number(1)}`); // "重写了"
+```
 
 ## 示例
 
+### 使用 toString()
+
 ```js
-var count = 10;
+const count = 10;
+console.log(count.toString()); // "10"
 
-console.log(count.toString()); // 输出 '10'
-console.log((17).toString()); // 输出 '17'
-console.log((17.2).toString()); // 输出 '17.2'
+console.log((17).toString()); // "17"
+console.log((17.2).toString()); // "17.2"
 
-var x = 6;
+const x = 6;
+console.log(x.toString(2)); // "110"
+console.log((254).toString(16)); // "fe"
+console.log((-10).toString(2)); // "-1010"
+console.log((-0xff).toString(2)); // "-11111111"
+```
+
+### 转换数字字符串的基数
 
-console.log(x.toString(2)); // 输出 '110'
-console.log((254).toString(16)); // 输出 'fe'
+如果你有一个非十进制的数字的字符串，可以使用 [`parseInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt) 和 `toString()` 将其转换为不同的基数。
 
-console.log((-10).toString(2)); // 输出 '-1010'
-console.log((-0xff).toString(2)); // 输出 '-11111111'
+```js
+const hex = "CAFEBABE";
+const bin = parseInt(hex, 16).toString(2); // "11001010111111101011101010111110"
 ```
 
+注意精度损失：如果原始数字字符串太大（比如大于 [`Number.MAX_SAFE_INTEGER`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) ），则应使用 [`BigInt`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 来替代。然而，`BigInt` 的构造函数仅支持表示数字字面量的字符串（即以 `0b`、`0o` 或 `0x` 开头的字符串）。如果原始基数不是二进制、八进制、十进制或十六进制，则可能需要手工编写基数转换器，或者使用库。
+
 ## 规范
 
 {{Specifications}}
@@ -61,7 +94,7 @@ console.log((-0xff).toString(2)); // 输出 '-11111111'
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.prototype.toFixed()")}}
 - {{jsxref("Number.prototype.toExponential()")}}

From 35abd55dc7fbcb87abe272854a1b279d9211b39d Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Wed, 27 Sep 2023 11:11:40 +0900
Subject: [PATCH 173/268] [ko] add index.md for `web/glossary/quaternion`
 (#16057)

---
 files/ko/glossary/quaternion/index.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 files/ko/glossary/quaternion/index.md

diff --git a/files/ko/glossary/quaternion/index.md b/files/ko/glossary/quaternion/index.md
new file mode 100644
index 00000000000000..ddd59ef9b573b7
--- /dev/null
+++ b/files/ko/glossary/quaternion/index.md
@@ -0,0 +1,18 @@
+---
+title: 사원수 (Quaternion)
+slug: Glossary/Quaternion
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**사원수(quaternion)** 는 두 개의 3D 벡터의 몫이며 3D 그래픽과 가속도계 기반 센서에서 방향 또는 회전 데이터를 나타내는 데 사용됩니다.
+
+수학적 사원수는 이보다 더 복잡하지만, [WebGL](/ko/docs/Glossary/WebGL) 또는 [WebXR](/ko/docs/Web/API/WebXR_Device_API)를 사용하는 동안 회전을 나타내는 데 사용되는 **단위 사원수(unit quaternions)** (또는 **회전 사원수(rotational quaternions)**)는 예를 들어 3D 포인트와 동일한 구문을 사용하여 표현됩니다. 따라서, {{domxref("DOMPoint")}} (또는 {{domxref("DOMPointReadOnly")}}) 타입은 사원수를 저장하는 데 사용됩니다.
+
+## 같이 보기
+
+- 위키백과의 [사원수와 공간 회전](https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation)
+- 위키백과의 [사원수](https://en.wikipedia.org/wiki/Quaternion)
+- WebXR 장치 API 참고서에서 {{domxref("XRRigidTransform.orientation")}}

From e387463a16f12caf8defa948038aa06067156dd6 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Wed, 27 Sep 2023 12:46:42 +0800
Subject: [PATCH 174/268] feat(scripts): add check url locales tool (#15638)

* feat(scripts): add check url locales tool

* fix ignore content function

* minor improvements
---
 package.json                |   2 +
 scripts/check-url-locale.js | 310 ++++++++++++++++++++++++++++++++++++
 yarn.lock                   | 300 +++++++++++++++++++++++++++++++++-
 3 files changed, 611 insertions(+), 1 deletion(-)
 create mode 100644 scripts/check-url-locale.js

diff --git a/package.json b/package.json
index a56434c446921e..2bf1bf6da9264f 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,10 @@
     "markdown-it": "^13.0.1",
     "markdownlint-cli2": "0.10.0",
     "markdownlint-rule-search-replace": "1.2.0",
+    "mdast-util-from-markdown": "^2.0.0",
     "ora": "^7.0.1",
     "prettier": "3.0.3",
+    "unist-util-visit": "^5.0.0",
     "yargs": "^17.7.2"
   }
 }
diff --git a/scripts/check-url-locale.js b/scripts/check-url-locale.js
new file mode 100644
index 00000000000000..acfba2f083507e
--- /dev/null
+++ b/scripts/check-url-locale.js
@@ -0,0 +1,310 @@
+//
+// This script uses mdast to parse the markdown files and check if the URLs
+// are pointing to the correct locale.
+// You can also use the --fix option to fix the URL locale errors.
+//
+// Usage:
+// node scripts/check-url-locale.js [files...]
+// node scripts/check-url-locale.js --fix [files...]
+
+"use strict";
+
+import fs from "fs-extra";
+import * as path from "node:path";
+import { fdir } from "fdir";
+import ora from "ora";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { visit } from "unist-util-visit";
+
+const spinner = ora().start();
+
+const IGNORE_BLOCK_STRINGS = [
+  "<!-- url-locale-check ignore-start -->",
+  "<!-- url-locale-check ignore-end -->",
+];
+
+/**
+ * define types
+ *
+ * @typedef {Array<{url: string, line: number, column: number, urlLocale: string}>} UrlLocaleErrors
+ * @typedef {Array<{url: string, line: number, column: number}>} Urls
+ */
+
+/**
+ *
+ * @param {string} content
+ */
+function removeIgnoredContent(content) {
+  while (true) {
+    const posStart = content.search(IGNORE_BLOCK_STRINGS[0]);
+    const posEnd = content.search(IGNORE_BLOCK_STRINGS[1]);
+
+    if (posStart === -1 || posEnd === -1) {
+      // If there isn't a full lang-detect ignore block left, we're finished
+      break;
+    }
+
+    // replace the ignored section with empty lines (so that the line numbers don't change)
+    const replaceLines = content.slice(
+      posStart,
+      posEnd + IGNORE_BLOCK_STRINGS[1].length,
+    );
+    const lines = (replaceLines.match(/\n/g) || []).length;
+    content = content.replace(replaceLines, "\n".repeat(lines));
+  }
+
+  return content;
+}
+
+/**
+ *
+ * @param {string} locale
+ */
+function normalizeLocale(locale) {
+  const localeParts = locale.split("-");
+  if (localeParts.length === 2) {
+    localeParts[1] = localeParts[1].toUpperCase();
+  }
+  return localeParts.join("-");
+}
+
+/**
+ *
+ * @param {string} rawContent
+ * @returns {Urls}
+ */
+function findUrlInText(rawContent) {
+  const urls = [];
+  for (const match of rawContent.matchAll(/href=['"]([^'"]+)['"]/g)) {
+    const left = rawContent.slice(0, match.index);
+    const line = (left.match(/\n/g) || []).length + 1;
+    const lastIndexOf = left.lastIndexOf("\n") + 1;
+    const column = match.index - lastIndexOf + 1 + ("href".length + 2);
+    urls.push({ url: match[1], line, column });
+  }
+  return urls;
+}
+
+/**
+ *
+ * @param {string} content
+ * @returns {Urls}
+ */
+function findUrlInMarkdown(content) {
+  const tree = fromMarkdown(content);
+  const urls = [];
+  visit(tree, ["link", "html"], (node) => {
+    if (node.type === "link") {
+      if (node.children.length === 1) {
+        urls.push({
+          url: node.url,
+          line: node.children[0].position.end.line,
+          column: node.children[0].position.end.column + 2,
+        });
+      } else {
+        urls.push({
+          url: node.url,
+          line: node.position.start.line,
+          column: node.position.start.column + 3,
+        });
+      }
+    } else {
+      // html
+      const urlsInHtml = findUrlInText(node.value);
+      const correctedUrls = urlsInHtml.map(({ url, line, column }) => {
+        if (line === 1) {
+          // if it's the first line, we need to add the column offset
+          column += node.position.start.column - 1;
+        }
+        line += node.position.start.line - 1;
+        return { url, line, column };
+      });
+      urls.push(...correctedUrls);
+    }
+  });
+  return urls;
+}
+
+/**
+ *
+ * @param {string} content
+ * @param {string} docLocale
+ * @returns {UrlLocaleErrors}
+ */
+function checkUrlLocale(content, docLocale) {
+  const urls = findUrlInMarkdown(content);
+  const reportUrls = [];
+  for (const { url, line, column } of urls) {
+    const urlParts = url.split("/").slice(1);
+    if (urlParts.length < 2 || urlParts[1] !== "docs") {
+      // ignore non-docs links
+      continue;
+    }
+    const urlLocale = urlParts[0];
+    if (urlLocale === docLocale) {
+      continue;
+    }
+    reportUrls.push({
+      url,
+      line,
+      column,
+      urlLocale,
+    });
+  }
+  return reportUrls;
+}
+
+/**
+ *
+ * @param {string} filePath
+ * @param {UrlLocaleErrors} errors
+ * @param {string} expectedLocale
+ */
+function generateReport(filePath, errors, expectedLocale) {
+  return errors
+    .map(
+      (e) =>
+        `  - ${filePath}:${e.line}:${e.column}: ${e.url} (${e.urlLocale} ==> ${expectedLocale})`,
+    )
+    .join("\n");
+}
+
+/**
+ *
+ * @param {string} content
+ * @param {UrlLocaleErrors} errors
+ * @param {string} expectedLocale
+ */
+function fixUrlLocale(content, errors, expectedLocale) {
+  errors.sort((a, b) => {
+    if (a.line === b.line) {
+      // sort by column, descending
+      return b.column - a.column;
+    }
+    return a.line - b.line;
+  });
+  const lines = content.split("\n");
+  for (const { url, line, column, urlLocale } of errors) {
+    let lineContent = lines[line - 1];
+    const prefix = lineContent.slice(0, column - 1);
+    const newUrl = url.replace(urlLocale, expectedLocale);
+    const suffix = lineContent.slice(column - 1).replace(url, newUrl);
+    lines[line - 1] = `${prefix}${suffix}`;
+  }
+  return lines.join("\n");
+}
+
+async function main() {
+  const { argv } = yargs(hideBin(process.argv)).command(
+    "$0 [files..]",
+    "Check the url locales of the given files",
+    (yargs) => {
+      yargs
+        .positional("files", {
+          describe:
+            "The files to check (relative to the current working directory)",
+          type: "string",
+          array: true,
+          default: ["./files/"],
+        })
+        .option("fix", {
+          describe: "Fix the URL locale errors",
+          type: "boolean",
+          default: false,
+        });
+    },
+  );
+
+  const files = [];
+
+  spinner.text = "Crawling files...";
+
+  const dryRun = argv.dry;
+
+  for (const fp of argv.files) {
+    const fstats = await fs.stat(fp);
+
+    if (fstats.isDirectory()) {
+      files.push(
+        ...new fdir()
+          .withBasePath()
+          .filter((path) => path.endsWith(".md"))
+          .crawl(fp)
+          .sync(),
+      );
+    } else if (fstats.isFile()) {
+      files.push(fp);
+    }
+  }
+
+  let exitCode = 0;
+
+  for (const i in files) {
+    const file = files[i];
+
+    spinner.text = `${i}/${files.length}: ${file}...`;
+
+    const relativePath = path.relative(process.cwd(), file);
+    const parts = relativePath.split(path.sep);
+    if (parts.length < 2 || parts[0] !== "files") {
+      spinner.warn(`File "${file}" is not in the files directory!`);
+      spinner.start();
+      continue;
+    }
+
+    try {
+      const locale = normalizeLocale(parts[1]);
+
+      const originContent = await fs.readFile(relativePath, "utf8");
+      const content = removeIgnoredContent(originContent);
+
+      const urlLocaleErrors = checkUrlLocale(content, locale);
+
+      if (urlLocaleErrors.length > 0) {
+        if (dryRun) {
+          spinner.fail(
+            `${file}: Found ${
+              urlLocaleErrors.length
+            } URL locale errors!\n${generateReport(
+              relativePath,
+              urlLocaleErrors,
+              locale,
+            )}`,
+          );
+          exitCode = 1;
+        } else {
+          spinner.info(
+            `${file}: Found ${urlLocaleErrors.length} URL locale errors! Fixing...`,
+          );
+          const newContent = fixUrlLocale(
+            originContent,
+            urlLocaleErrors,
+            locale,
+          );
+          if (newContent === originContent) {
+            spinner.fail(`${file}: Fixing URL locale errors failed!`);
+            exitCode = 1;
+          } else {
+            await fs.writeFile(relativePath, newContent);
+          }
+        }
+        spinner.start();
+      }
+    } catch (e) {
+      spinner.fail(`${file}: ${e}`);
+      spinner.start();
+    }
+  }
+
+  spinner.stop();
+
+  if (exitCode === 0) {
+    console.log("Checked all files successfully!");
+  } else {
+    process.exitCode = exitCode;
+  }
+}
+
+await main();
diff --git a/yarn.lock b/yarn.lock
index 4de69fdae357da..de20b1e6bd272b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23,6 +23,30 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@types/debug@^4.0.0":
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
+  integrity sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==
+  dependencies:
+    "@types/ms" "*"
+
+"@types/mdast@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.0.tgz#9f9462d4584a8b3e3711ea8bb4a94c485559ab90"
+  integrity sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
+"@types/unist@*", "@types/unist@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.0.tgz#988ae8af1e5239e89f9fbb1ade4c935f4eeedf9a"
+  integrity sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==
+
 ansi-escapes@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-5.0.0.tgz#b6a0caf0eef0c41af190e9a749e0c00ec04bb2a6"
@@ -104,6 +128,11 @@ chalk@5.3.0, chalk@^5.0.0, chalk@^5.3.0:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385"
   integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==
 
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
 cld@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/cld/-/cld-2.9.0.tgz#8a4cec2541ac54fa45cf3aa3f13e561fed913fe7"
@@ -178,13 +207,32 @@ cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-debug@4.3.4:
+debug@4.3.4, debug@^4.0.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
+decode-named-character-reference@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
+  dependencies:
+    character-entities "^2.0.0"
+
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+devlop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
+  integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
+  dependencies:
+    dequal "^2.0.0"
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -539,6 +587,31 @@ markdownlint@0.31.1:
     markdown-it "13.0.1"
     markdownlint-micromark "0.1.7"
 
+mdast-util-from-markdown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz#52f14815ec291ed061f2922fd14d6689c810cb88"
+  integrity sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    "@types/unist" "^3.0.0"
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    mdast-util-to-string "^4.0.0"
+    micromark "^4.0.0"
+    micromark-util-decode-numeric-character-reference "^2.0.0"
+    micromark-util-decode-string "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+    unist-util-stringify-position "^4.0.0"
+
+mdast-util-to-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz#7a5121475556a04e7eddeb67b264aae79d312814"
+  integrity sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -554,6 +627,200 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+micromark-core-commonmark@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-2.0.0.tgz#50740201f0ee78c12a675bf3e68ffebc0bf931a3"
+  integrity sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    micromark-factory-destination "^2.0.0"
+    micromark-factory-label "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-factory-title "^2.0.0"
+    micromark-factory-whitespace "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-classify-character "^2.0.0"
+    micromark-util-html-tag-name "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-resolve-all "^2.0.0"
+    micromark-util-subtokenize "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-destination@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz#857c94debd2c873cba34e0445ab26b74f6a6ec07"
+  integrity sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-label@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz#17c5c2e66ce39ad6f4fc4cbf40d972f9096f726a"
+  integrity sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-space@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz#5e7afd5929c23b96566d0e1ae018ae4fcf81d030"
+  integrity sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-title@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz#726140fc77892af524705d689e1cf06c8a83ea95"
+  integrity sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==
+  dependencies:
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-whitespace@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz#9e92eb0f5468083381f923d9653632b3cfb5f763"
+  integrity sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==
+  dependencies:
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-character@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-2.0.1.tgz#52b824c2e2633b6fb33399d2ec78ee2a90d6b298"
+  integrity sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-chunked@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz#e51f4db85fb203a79dbfef23fd41b2f03dc2ef89"
+  integrity sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-classify-character@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz#8c7537c20d0750b12df31f86e976d1d951165f34"
+  integrity sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-combine-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz#75d6ab65c58b7403616db8d6b31315013bfb7ee5"
+  integrity sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==
+  dependencies:
+    micromark-util-chunked "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-decode-numeric-character-reference@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.0.tgz#a798808d02cc74113e2c939fc95363096ade7f1d"
+  integrity sha512-pIgcsGxpHEtTG/rPJRz/HOLSqp5VTuIIjXlPI+6JSDlK2oljApusG6KzpS8AF0ENUMCHlC/IBb5B9xdFiVlm5Q==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-decode-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz#7dfa3a63c45aecaa17824e656bcdb01f9737154a"
+  integrity sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-decode-numeric-character-reference "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz#0921ac7953dc3f1fd281e3d1932decfdb9382ab1"
+  integrity sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==
+
+micromark-util-html-tag-name@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz#ae34b01cbe063363847670284c6255bb12138ec4"
+  integrity sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==
+
+micromark-util-normalize-identifier@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz#91f9a4e65fe66cc80c53b35b0254ad67aa431d8b"
+  integrity sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-resolve-all@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz#189656e7e1a53d0c86a38a652b284a252389f364"
+  integrity sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==
+  dependencies:
+    micromark-util-types "^2.0.0"
+
+micromark-util-sanitize-uri@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz#ec8fbf0258e9e6d8f13d9e4770f9be64342673de"
+  integrity sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-encode "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-subtokenize@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.0.tgz#9f412442d77e0c5789ffdf42377fa8a2bcbdf581"
+  integrity sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-symbol@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz#12225c8f95edf8b17254e47080ce0862d5db8044"
+  integrity sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==
+
+micromark-util-types@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-2.0.0.tgz#63b4b7ffeb35d3ecf50d1ca20e68fc7caa36d95e"
+  integrity sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==
+
+micromark@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-4.0.0.tgz#84746a249ebd904d9658cfabc1e8e5f32cbc6249"
+  integrity sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    micromark-core-commonmark "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-combine-extensions "^2.0.0"
+    micromark-util-decode-numeric-character-reference "^2.0.0"
+    micromark-util-encode "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-resolve-all "^2.0.0"
+    micromark-util-sanitize-uri "^2.0.0"
+    micromark-util-subtokenize "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
 micromatch@4.0.5, micromatch@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
@@ -838,6 +1105,37 @@ underscore@^1.12.1:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.6.tgz#04786a1f589dc6c09f761fc5f45b89e935136441"
   integrity sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==
 
+unist-util-is@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-6.0.0.tgz#b775956486aff107a9ded971d996c173374be424"
+  integrity sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==
+  dependencies:
+    "@types/unist" "^3.0.0"
+
+unist-util-stringify-position@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz#449c6e21a880e0855bf5aabadeb3a740314abac2"
+  integrity sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==
+  dependencies:
+    "@types/unist" "^3.0.0"
+
+unist-util-visit-parents@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz#4d5f85755c3b8f0dc69e21eca5d6d82d22162815"
+  integrity sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+
+unist-util-visit@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.0.0.tgz#a7de1f31f72ffd3519ea71814cccf5fd6a9217d6"
+  integrity sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+    unist-util-visit-parents "^6.0.0"
+
 universalify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"

From 4e455e0e2dd5bf2419563f891a0172ae3e3a88f0 Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Tue, 26 Sep 2023 21:47:47 -0700
Subject: [PATCH 175/268] Add a script to get sourceCommit front matter in
 files (#16152)

---
 package.json                |   1 +
 scripts/get-sourceCommit.js | 113 ++++++++++++++++++++++++++++++++++++
 yarn.lock                   |  32 ++++++++++
 3 files changed, 146 insertions(+)
 create mode 100644 scripts/get-sourceCommit.js

diff --git a/package.json b/package.json
index 2bf1bf6da9264f..b9da0c4b53b266 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "cld": "^2.9.0",
     "fdir": "^6.1.0",
+    "front-matter": "^4.0.2",
     "fs-extra": "^11.1.1",
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
diff --git a/scripts/get-sourceCommit.js b/scripts/get-sourceCommit.js
new file mode 100644
index 00000000000000..2c77968cbdf9a5
--- /dev/null
+++ b/scripts/get-sourceCommit.js
@@ -0,0 +1,113 @@
+//
+// This script uses a language detection library to calculate what language
+// a document is written in. This will help us find any partially translated
+// or untranslated documents within the repository, as well as any documents
+// in the upstream content that shouldn't be translated.
+//
+// Written by Queen Vinyl Da.i'gyu-Kazotetsu (@queengooborg, https://www.queengoob.org)
+
+import fs from "fs-extra";
+import cld from "cld";
+import { fdir } from "fdir";
+import fm from "front-matter";
+import ora from "ora";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+const spinner = ora().start();
+
+const getSourceCommit = async (doc) => {
+  const data = fm(await fs.readFile(doc, "utf8"));
+  return data.attributes.l10n?.sourceCommit;
+};
+
+const printTable = (data, md = true) => {
+  // Print header
+  if (md) {
+    console.log("| File | Source Commit |");
+    console.log("| --- | --- |");
+  } else {
+    console.log("File,Source Commit");
+  }
+
+  // Print file details
+  for (const [k, v] of Object.entries(data)) {
+    if (md) {
+      console.log(`| ${k} | ${v} |`);
+    } else {
+      console.log(`${k},${v}`);
+    }
+  }
+};
+
+const printJSON = (data) => {
+  console.log(JSON.stringify(data));
+};
+
+const main = async () => {
+  const { argv } = yargs(hideBin(process.argv)).command(
+    "$0 [files..]",
+    "Check the given files for a sourceCommit front matter key",
+    (yargs) => {
+      yargs
+        .positional("files", {
+          describe:
+            "The files to check (relative to the current working directory)",
+          type: "string",
+          array: true,
+          default: ["./files/"],
+        })
+        .option("format", {
+          alias: "f",
+          describe: "The format to print results in",
+          type: "string",
+          default: "md",
+          choices: ["md", "csv", "json"],
+        });
+    },
+  );
+
+  const files = [];
+  const data = {};
+
+  spinner.text = "Crawling files...";
+
+  for (const fp of argv.files) {
+    const fstats = await fs.stat(fp);
+
+    if (fstats.isDirectory()) {
+      files.push(
+        ...new fdir()
+          .withBasePath()
+          .filter((path) => path.endsWith(".md"))
+          .crawl(fp)
+          .sync(),
+      );
+    } else if (fstats.isFile()) {
+      files.push(fp);
+    }
+  }
+
+  for (const i in files) {
+    const file = files[i];
+
+    spinner.text = `${i}/${files.length}: ${file}...`;
+
+    try {
+      data[file] = await getSourceCommit(file);
+    } catch (e) {
+      spinner.fail(`${file}: ${e}`);
+      spinner.start();
+    }
+  }
+
+  spinner.stop();
+
+  if (argv.format === "json") {
+    printJSON(data);
+  } else {
+    printTable(data, argv.format === "md");
+  }
+};
+
+await main();
diff --git a/yarn.lock b/yarn.lock
index de20b1e6bd272b..d1725869c5ffac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -76,6 +76,13 @@ ansi-styles@^6.0.0, ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -270,6 +277,11 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 eventemitter3@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
@@ -320,6 +332,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+front-matter@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5"
+  integrity sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==
+  dependencies:
+    js-yaml "^3.13.1"
+
 fs-extra@^11.1.1:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
@@ -459,6 +478,14 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -1013,6 +1040,11 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
 stdin-discarder@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stdin-discarder/-/stdin-discarder-0.1.0.tgz#22b3e400393a8e28ebf53f9958f3880622efde21"

From d9136e3935447809d9b1e81c3c915b7584bb8874 Mon Sep 17 00:00:00 2001
From: SebastienM <58223862+M-Sebastien@users.noreply.github.com>
Date: Wed, 27 Sep 2023 06:58:59 +0200
Subject: [PATCH 176/268] Fix typo (#16153)

---
 .../understanding_client-side_tools/command_line/index.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
index 51a63f55ef8c15..eb1ebdb68049c5 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
@@ -258,7 +258,7 @@ ls | wc -l
 
 Comme `ls` affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.
 
-Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou `STDOUT`). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou `STDIN`).
+Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard output)" ou `STDOUT`). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou `STDIN`).
 
 L'opérateur pipe peut _connecter_ ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, `ls` enverrait normalement sa sortie sur `STDOUT`, mais au lieu de cela la sortie de `ls` est passée par un pipe à `wc`, qui la prend en entrée, compte ses lignes et imprime ce décompte sur `STDOUT`.
 

From bbc5c78ba11423d449db2d0d2cb4a1392f305ab3 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Wed, 27 Sep 2023 14:42:44 +0800
Subject: [PATCH 177/268] fix(url-check-locale): prevent replacing the empty
 url locale (#16157)

---
 scripts/check-url-locale.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/scripts/check-url-locale.js b/scripts/check-url-locale.js
index acfba2f083507e..7fbc3b80174183 100644
--- a/scripts/check-url-locale.js
+++ b/scripts/check-url-locale.js
@@ -185,11 +185,14 @@ function fixUrlLocale(content, errors, expectedLocale) {
     }
     return a.line - b.line;
   });
+  expectedLocale = `/${expectedLocale}/`;
   const lines = content.split("\n");
   for (const { url, line, column, urlLocale } of errors) {
     let lineContent = lines[line - 1];
     const prefix = lineContent.slice(0, column - 1);
-    const newUrl = url.replace(urlLocale, expectedLocale);
+    // replace the slashed locale with the expected locale
+    // to prevent replacing the empty url locale
+    const newUrl = url.replace(`/${urlLocale}/`, expectedLocale);
     const suffix = lineContent.slice(column - 1).replace(url, newUrl);
     lines[line - 1] = `${prefix}${suffix}`;
   }
@@ -221,7 +224,7 @@ async function main() {
 
   spinner.text = "Crawling files...";
 
-  const dryRun = argv.dry;
+  const dryRun = !argv.fix;
 
   for (const fp of argv.files) {
     const fstats = await fs.stat(fp);

From 1aff4a4fb9b0d2076029ec476846699ce6c7f637 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 11:42:16 +0000
Subject: [PATCH 178/268] Bump markdown-it from 13.0.1 to 13.0.2 (#16160)

---
 package.json |  2 +-
 yarn.lock    | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b9da0c4b53b266..247791256d6fcf 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "fs-extra": "^11.1.1",
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^13.0.2",
     "markdownlint-cli2": "0.10.0",
     "markdownlint-rule-search-replace": "1.2.0",
     "mdast-util-from-markdown": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index d1725869c5ffac..f164502dbf32a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -554,7 +554,7 @@ log-update@^5.0.1:
     strip-ansi "^7.0.1"
     wrap-ansi "^8.0.1"
 
-markdown-it@13.0.1, markdown-it@^13.0.1:
+markdown-it@13.0.1:
   version "13.0.1"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
   integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
@@ -565,6 +565,17 @@ markdown-it@13.0.1, markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+markdown-it@^13.0.2:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.2.tgz#1bc22e23379a6952e5d56217fbed881e0c94d536"
+  integrity sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 markdownlint-cli2-formatter-default@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.4.tgz#81e26b0a50409c0357c6f0d38d8246946b236fab"

From 5d65668d473dde5091261eceaf0019c775cd798d Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Wed, 27 Sep 2023 23:09:17 +0900
Subject: [PATCH 179/268] [ko] add index.md for `web/glossary/idl` (#16083)

---
 files/ko/glossary/idl/index.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 files/ko/glossary/idl/index.md

diff --git a/files/ko/glossary/idl/index.md b/files/ko/glossary/idl/index.md
new file mode 100644
index 00000000000000..350c06e2dfedbe
--- /dev/null
+++ b/files/ko/glossary/idl/index.md
@@ -0,0 +1,30 @@
+---
+title: 인터페이스 정의 언어 (IDL)
+slug: Glossary/IDL
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**인터페이스 정의 언어(Interface Description Language, IDL)** 는 특정 프로그래밍 언어와 별도로 지정된 객체의 인터페이스에 사용되는 일반 언어입니다.
+
+## 콘텐츠 속성 vs 인터페이스 정의 언어 속성
+
+HTML에서, 대부분의 속성에는 **콘텐츠 속성** 및 **인터페이스 정의 언어 속성**이라는 두 가지 측면이 있습니다.
+
+콘텐츠 속성은 콘텐츠(HTML 코드)에서 설정한 속성이며, {{domxref("element.setAttribute()")}} 또는 {{domxref("element.getAttribute()")}}를 통해 설정하거나 가져올 수 있습니다. 예상 값이 정수여야 하는 경우에도 콘텐츠 속성은 항상 문자열입니다. 예를 들어, 콘텐츠 속성을 사용하여 {{HTMLElement("input")}} 요소의 `maxlength`를 42로 설정하려면, 해당 요소에 대해 `setAttribute("maxlength", "42")`를 호출해야 합니다.
+
+IDL 속성은 JavaScript 속성이라고도 합니다. IDL 속성은 `element.foo`와 같은 JavaScript 속성을 사용하여 읽거나 설정할 수 있는 속성입니다. IDL 속성은 항상 기본 콘텐츠 속성을 사용하여(그러나 변환될 수도 있음) 값을 얻을 때 값을 반환하고 이를 설정할 때 콘텐츠 속성에 무언가를 저장합니다. 즉, IDL 속성은 본질적으로 콘텐츠 속성을 반영합니다.
+
+대부분의 경우, IDL 속성은 실제로 사용되는 값을 반환합니다. 예를 들어, {{HTMLElement("input")}} 요소의 기본 `type`은 'text'이므로, `input.type="foobar"`를 설정하면, `<input>` 요소는 'text' 타입(외관 및 동작하는 측면에서)이지만, 'type' 콘텐츠 속성의 값은 'foobar'입니다. 그러나, `type` IDL 속성은 문자열 'text'를 반환합니다.
+
+IDL 속성이 항상 문자열은 아닙니다. 예를 들어, `input.maxlength`는 숫자(부호 있는 long)입니다. IDL 속성을 사용할 때, 원하는 타입의 값을 읽거나 설정하므로, `input.maxlength`는 항상 숫자를 반환하고 `input.maxlength`를 설정하면, IDL 속성은 숫자 타입이 오기를 바랍니다. 다른 타입을 전달하면, 타입 변환에 대한 표준 JavaScript 규칙에 지정된 대로 자동으로 숫자로 변환됩니다.
+
+IDL 속성은 unsigned long, URL, 불리언 등과 같은 [다른 타입을 반영](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)할 수 있습니다. 불행하게도, 명확한 규칙이 없고 IDL 속성이 해당 콘텐츠 속성과 함께 작동하는 방식은 속성에 따라 다릅니다. 대부분의 경우 [명세서에 표현된 규칙](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)을 따르지만, 때로는 그렇지 않은 경우도 있습니다. HTML 명세서는 이를 가능한 개발자 친화적으로 만들려고 노력하지만, 다양한 이유(주로 역사적)로 일부 속성이 이상하게 동작(예, `select.size`)하므로, 해당 속성이 정확히 어떻게 작동하는지 이해하려면 명세서를 읽어야 합니다.
+
+## 같이 보기
+
+- 위키백과의 [IDL](https://en.wikipedia.org/wiki/Interface_description_language)
+- [HTML 속성 참고서](/ko/docs/Web/HTML/Attributes)
+- [인터페이스 정의 언어](https://people.eecs.berkeley.edu/~messer/netappc/Supplements/10-idl.pdf)

From ac9f5f19389830543ba3596c0891cfdb11690da0 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Thu, 28 Sep 2023 00:13:50 +0900
Subject: [PATCH 180/268] [ko] add index.md for `web/glossary/local_variable`
 (#16119)

---
 files/ko/glossary/local_variable/index.md | 24 +++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 files/ko/glossary/local_variable/index.md

diff --git a/files/ko/glossary/local_variable/index.md b/files/ko/glossary/local_variable/index.md
new file mode 100644
index 00000000000000..c3cfa4c1f2594c
--- /dev/null
+++ b/files/ko/glossary/local_variable/index.md
@@ -0,0 +1,24 @@
+---
+title: 지역 변수 (Local variable)
+slug: Glossary/Local_variable
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+이름이 {{Glossary("local scope", "로컬 범위")}} 내에서만 해당 값에 바인딩되는 {{glossary("variable", "변수")}}입니다.
+
+## 예제
+
+```js
+let global = 5; // 전역 변수
+
+function fun() {
+  let local = 10; // 지역 변수
+}
+```
+
+## 같이 보기
+
+- 위키백과의 [지역 변수](https://en.wikipedia.org/wiki/Local_variable)

From 2f67fc87e2bb7dc03a0a9ad893f449950a05192c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 01:41:05 +0900
Subject: [PATCH 181/268] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../close/index.md                            | 33 ++++++++++-------
 .../desiredsize/index.md                      | 24 +++++++------
 .../enqueue/index.md                          | 35 ++++++++++++-------
 .../error/index.md                            | 32 ++++++++++-------
 .../readablestreamdefaultcontroller/index.md  | 27 +++++++++-----
 5 files changed, 95 insertions(+), 56 deletions(-)

diff --git a/files/ja/web/api/readablestreamdefaultcontroller/close/index.md b/files/ja/web/api/readablestreamdefaultcontroller/close/index.md
index 75d17138e39cb5..7bd32c470b61ce 100644
--- a/files/ja/web/api/readablestreamdefaultcontroller/close/index.md
+++ b/files/ja/web/api/readablestreamdefaultcontroller/close/index.md
@@ -1,31 +1,34 @@
 ---
-title: ReadableStreamDefaultController.close()
+title: "ReadableStreamDefaultController: close() メソッド"
+short-title: close()
 slug: Web/API/ReadableStreamDefaultController/close
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`close()`** メソッドは、関連するストリームを閉じます。
+**`close()`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスのメソッドで、関連するストリームを閉じます。
 
-リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取とってしまうとストリームは閉じられます。 ストリームを完全に取り除き、キューに入れられたチャンクを破棄する場合は、{{domxref("ReadableStream.cancel()")}} または {{domxref("ReadableStreamDefaultReader.cancel()")}} を使用します。
+リーダーは、以前にキューに入れられたチャンクをストリームから読み取ることができますが、それらを読み取とってしまうとストリームは閉じられます。 ストリームを完全に取り除き、キューに入れられたチャンクを破棄する場合は、{{domxref("ReadableStream.cancel()")}} または {{domxref("ReadableStreamDefaultReader.cancel()")}} を使用してください。
 
 ## 構文
 
-```
-readableStreamDefaultController.close();
+```js-nolint
+close()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトは `ReadableStreamDefaultController` ではありません。
 
 ## 例
@@ -35,6 +38,7 @@ readableStreamDefaultController.close();
 ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。
 
 ```js
+let interval;
 const stream = new ReadableStream({
   start(controller) {
     interval = setInterval(() => {
@@ -49,7 +53,7 @@ const stream = new ReadableStream({
       list1.appendChild(listItem);
     }, 1000);
 
-    button.addEventListener("click", function () {
+    button.addEventListener("click", () => {
       clearInterval(interval);
       fetchStream();
       controller.close();
@@ -66,10 +70,15 @@ const stream = new ReadableStream({
 });
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultController.close")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- {{domxref("ReadableStreamDefaultController")}}
diff --git a/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md b/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md
index 2f826a8a30ed9e..f189ee2c3f101f 100644
--- a/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md
+++ b/files/ja/web/api/readablestreamdefaultcontroller/desiredsize/index.md
@@ -1,17 +1,14 @@
 ---
-title: ReadableStreamDefaultController.desiredSize
+title: "ReadableStreamDefaultController: desiredSize プロパティ"
+short-title: desiredSize
 slug: Web/API/ReadableStreamDefaultController/desiredSize
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`desiredSize`** 読み取り専用プロパティは、ストリームの内部キューを満たすために必要な希望サイズを返します。
-
-## 構文
-
-```
-var desiredSize = readableStreamDefaultController.desiredSize;
-```
+**`desiredSize`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスの読み取り専用プロパティで、ストリームの内部キューを満たすために必要な希望サイズを返します。
 
 ### 値
 
@@ -19,12 +16,17 @@ var desiredSize = readableStreamDefaultController.desiredSize;
 
 ## 例
 
-仕様にある[基になるプッシュソースとバックプレッシャーサポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、`desiredSize` を使用してストリームがいっぱいになったことを手動で検出し、バックプレッシャーを適用する良い例を示しています。 また、{{domxref("ReadablestreamDefaultController.error()")}} を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーします。
+仕様にある[基になるプッシュソースと背圧サポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、`desiredSize` を使用してストリームがいっぱいになったことを手動で検出し、背圧を適用する良い例を示しています。 また、{{domxref("ReadablestreamDefaultController.error()")}} を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーします。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultController.desiredSize")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- {{domxref("ReadableStreamDefaultController")}}
diff --git a/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md b/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md
index 132cfa1ab5d3f5..dc6879a9f8067d 100644
--- a/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md
+++ b/files/ja/web/api/readablestreamdefaultcontroller/enqueue/index.md
@@ -1,31 +1,34 @@
 ---
-title: ReadableStreamDefaultController.enqueue()
+title: "ReadableStreamDefaultController: enqueue() メソッド"
+short-title: enqueue()
 slug: Web/API/ReadableStreamDefaultController/enqueue
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`enqueue()`** メソッドは、所与のチャンクを関連するストリームのキューに入れます。
+**`enqueue()`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスのメソッドで、受け取ったのチャンクを関連するストリームのキューに入れます。
 
 ## 構文
 
-```
-readableStreamDefaultController.enqueue(chunk);
+```js-nolint
+enqueue(chunk)
 ```
 
-### パラメーター
+### 引数
 
-- _chunk_
+- `chunk`
   - : キューに入れるチャンク。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
-- TypeError
-  - : ソースオブジェクトは `ReadableStreamDefaultController` ではありません。
+- {{jsxref("TypeError")}}
+  - : ソースオブジェクトが `ReadableStreamDefaultController` ではありません。
 
 ## 例
 
@@ -34,6 +37,7 @@ readableStreamDefaultController.enqueue(chunk);
 ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。
 
 ```js
+let interval;
 const stream = new ReadableStream({
   start(controller) {
     interval = setInterval(() => {
@@ -48,7 +52,7 @@ const stream = new ReadableStream({
       list1.appendChild(listItem);
     }, 1000);
 
-    button.addEventListener("click", function () {
+    button.addEventListener("click", () => {
       clearInterval(interval);
       fetchStream();
       controller.close();
@@ -65,10 +69,15 @@ const stream = new ReadableStream({
 });
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultController.enqueue")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- {{domxref("ReadableStreamDefaultController")}}
diff --git a/files/ja/web/api/readablestreamdefaultcontroller/error/index.md b/files/ja/web/api/readablestreamdefaultcontroller/error/index.md
index f7815b35bf79b9..31c0b7695442b0 100644
--- a/files/ja/web/api/readablestreamdefaultcontroller/error/index.md
+++ b/files/ja/web/api/readablestreamdefaultcontroller/error/index.md
@@ -1,42 +1,50 @@
 ---
-title: ReadableStreamDefaultController.error()
+title: "ReadableStreamDefaultController: error() メソッド"
+short-title: error()
 slug: Web/API/ReadableStreamDefaultController/error
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultController")}} インターフェイスの **`error()`** メソッドにより、関連するストリームとの今後のやり取りがエラーになります。
+**`error()`** は {{domxref("ReadableStreamDefaultController")}} インターフェイスのメソッドで、関連づけられたストリームとの今後のやり取りをエラーにします。
 
 > **メモ:** `error()` メソッドは複数回呼び出すことができ、ストリームが読み取り可能でないときに呼び出すことができます。
 
 ## 構文
 
-```
-readableStreamDefaultController.error(e);
+```js-nolint
+error(e)
 ```
 
-### パラメーター
+### 引数
 
-- _e_
+- `e`
   - : 今後のやり取りを失敗させるエラー。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableStreamDefaultController` ではないか、何らかの理由でストリームが読み取り可能ではありません。
 
 ## 例
 
-仕様にある[基になるプッシュソースとバックプレッシャーサポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、{{domxref("ReadablestreamDefaultController.desiredSize")}} を使用してストリームがいっぱいになったことを手動で検出し、バックプレッシャーを適用しています。 また、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーする良い例を示しています。
+仕様にある[基になるプッシュソースと背圧サポートのある読み取り可能なストリーム](https://streams.spec.whatwg.org/#example-rs-push-backpressure)の例は、{{domxref("ReadablestreamDefaultController.desiredSize")}} を使用してストリームがいっぱいになったことを手動で検出し、背圧を適用しています。 また、`error()` を使用して、依存しているシステムの別の部分に障害が発生した場合に手動でストリームのエラーをトリガーする良い例を示しています。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultController.error")}}
+{{Compat}}
+
+## 関連情報
+
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- {{domxref("ReadableStreamDefaultController")}}
diff --git a/files/ja/web/api/readablestreamdefaultcontroller/index.md b/files/ja/web/api/readablestreamdefaultcontroller/index.md
index d91836fdff2fd3..d8ba7636f04662 100644
--- a/files/ja/web/api/readablestreamdefaultcontroller/index.md
+++ b/files/ja/web/api/readablestreamdefaultcontroller/index.md
@@ -1,22 +1,24 @@
 ---
 title: ReadableStreamDefaultController
 slug: Web/API/ReadableStreamDefaultController
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-[Streams API](/ja/docs/Web/API/Streams_API) の **`ReadableStreamDefaultController`** インターフェイスは、{{domxref("ReadableStream")}} の状態と内部キューを制御できるコントローラーを表します。 デフォルトのコントローラーは、バイトストリームではないストリーム用です。
+**`ReadableStreamDefaultController`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、{{domxref("ReadableStream")}} の状態と内部キューを制御できるコントローラーを表します。既定のコントローラーは、バイトストリームではないストリーム用のものです。
 
 ## コンストラクター
 
 なし。 `ReadableStreamDefaultController` インスタンスは、`ReadableStream` の構築中に自動的に作成されます。
 
-## プロパティ
+## インスタンスプロパティ
 
 - {{domxref("ReadableStreamDefaultController.desiredSize")}} {{readonlyInline}}
   - : ストリームの内部キューを満たすために必要な希望サイズを返します。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("ReadableStreamDefaultController.close()")}}
   - : 関連するストリームを閉じます。
@@ -29,11 +31,12 @@ slug: Web/API/ReadableStreamDefaultController
 
 次の単純な例では、コンストラクターを使用してカスタムの `ReadableStream` を作成します（完全なコードについては、[単純なランダムストリームの例](https://mdn.github.io/dom-examples/streams/simple-random-stream/)を参照）。 `start()` 関数は、1 秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するための `cancel()` 関数も提供します。
 
-{{domxref("ReadableStreamDefaultController")}} オブジェクトは、`start()` 関数および `pull()` 関数のパラメーターとして提供されることに注意してください。
+{{domxref("ReadableStreamDefaultController")}} オブジェクトは、 `start()` 関数および `pull()` 関数の引数として提供されることに注意してください。
 
-ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。
+ボタンが押されると、生成を停止し、 {{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。
 
 ```js
+let interval;
 const stream = new ReadableStream({
   start(controller) {
     interval = setInterval(() => {
@@ -48,7 +51,7 @@ const stream = new ReadableStream({
       list1.appendChild(listItem);
     }, 1000);
 
-    button.addEventListener("click", function () {
+    button.addEventListener("click", () => {
       clearInterval(interval);
       fetchStream();
       controller.close();
@@ -65,10 +68,18 @@ const stream = new ReadableStream({
 });
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultController")}}
+{{Compat}}
+
+## 関連情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API)
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- {{domxref("ReadableStream")}}
+- [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/), for a basic visualization of readable, writable, and transform streams.
+- [Web-streams-polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) or [sd-streams](https://github.com/stardazed/sd-streams) - polyfills

From 2d3afd5e4423fe4e5d839a774b1e307d11b477b7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 11:19:45 +0900
Subject: [PATCH 182/268] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cancel/index.md                           | 47 +++++++++--------
 .../closed/index.md                           | 28 +++++-----
 .../api/readablestreamdefaultreader/index.md  | 33 ++++++++----
 .../readablestreamdefaultreader/read/index.md | 51 ++++++++++---------
 .../readablestreamdefaultreader/index.md      | 42 ++++++++-------
 .../releaselock/index.md                      | 36 ++++++++-----
 6 files changed, 139 insertions(+), 98 deletions(-)

diff --git a/files/ja/web/api/readablestreamdefaultreader/cancel/index.md b/files/ja/web/api/readablestreamdefaultreader/cancel/index.md
index dca4d4581c3a3b..54996c04ece3f2 100644
--- a/files/ja/web/api/readablestreamdefaultreader/cancel/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/cancel/index.md
@@ -1,34 +1,38 @@
 ---
-title: ReadableStreamDefaultReader.cancel()
+title: "ReadableStreamDefaultReader: cancel() メソッド"
+short-title: cancel()
 slug: Web/API/ReadableStreamDefaultReader/cancel
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultReader")}} インターフェイスの **`cancel()`** メソッドはストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。
+**`cancel()`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスのメソッドで、ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。
 
-キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入っている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、{{domxref("ReadableStreamDefaultController.close()")}} を使用します。
+キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入っている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、 {{domxref("ReadableStreamDefaultController.close()")}} を使用します。
 
-> **メモ:** リーダーがアクティブな場合、`cancel()` メソッドは、関連付けられたストリームの場合（{{domxref("ReadableStream.cancel()")}}）と同じように振る舞います。
+> **メモ:** リーダーがアクティブな場合、`cancel()` メソッドは、関連付けられたストリームの場合 ({{domxref("ReadableStream.cancel()")}}) と同じように振る舞います。
 
 ## 構文
 
-```
-var promise = readableStreamDefaultReader.cancel(reason);
+```js-nolint
+cancel()
+cancel(reason)
 ```
 
-### パラメーター
+### 引数
 
-- reason {{optional_inline}}
-  - : 人間が読むことができるキャンセルの理由を提供する {{domxref("DOMString")}}。
+- `reason` {{optional_inline}}
+  - : 人間が読むことができるキャンセルの理由です。この値は使われたり使われなかったりします。
 
-### 戻り値
+### 返値
 
-{{jsxref("Promise")}}。 `reason` パラメーターで指定された値で満たされます。
+{{jsxref("Promise")}} です。 `reason` 引数で指定された値で履行されます。
 
-### Exceptions
+### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableStreamDefaultReader` ではないか、ストリームに所有者がいません。
 
 ## 例
@@ -45,7 +49,7 @@ function fetchStream() {
   // read() は、値を受け取ったときに解決する promise を返します
   reader.read().then(function processText({ done, value }) {
     // 結果オブジェクトには2つのプロパティが含まれます
-    // done  - ストリームがすべてのデータを既に提供している場合は true
+    // done - ストリームがすべてのデータを既に提供している場合は true
     // value - 一部のデータ。 done が true の場合、常に undefined
     if (done) {
       console.log("Stream complete");
@@ -58,11 +62,7 @@ function fetchStream() {
     charsReceived += value.length;
     const chunk = value;
     let listItem = document.createElement("li");
-    listItem.textContent =
-      "Received " +
-      charsReceived +
-      " characters so far. Current chunk = " +
-      chunk;
+    listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
     list2.appendChild(listItem);
 
     result += chunk;
@@ -73,10 +73,15 @@ function fetchStream() {
 }
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultReader.cancel")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
diff --git a/files/ja/web/api/readablestreamdefaultreader/closed/index.md b/files/ja/web/api/readablestreamdefaultreader/closed/index.md
index 20c532a57a0b3d..82cfe0258ff587 100644
--- a/files/ja/web/api/readablestreamdefaultreader/closed/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/closed/index.md
@@ -1,25 +1,22 @@
 ---
-title: ReadableStreamDefaultReader.closed
+title: "ReadableStreamDefaultReader: closed プロパティ"
+short-title: closed
 slug: Web/API/ReadableStreamDefaultReader/closed
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultReader")}} インターフェイスの **`closed`** 読み取り専用プロパティは、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たし、ストリームがエラーの場合に拒否する promise を返します。
+**`closed`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行され、ストリームがエラーの場合に拒否されるプロミス ({{jsxref("Promise")}}) を返します。このプロパティを使用すると、ストリーミング処理の終わりに応答するコードを書くことができます。
 
-## 構文
+## 値
 
-```
-var closed = readableStreamDefaultReader.closed;
-```
-
-### 値
-
-{{jsxref("Promise")}}。
+{{jsxref("Promise")}} です。
 
 ## 例
 
-このスニペットでは、以前に作成したリーダーに問い合わせて、ストリームが閉じられているかどうかを確認します。 閉じられると、promise が満たされ、メッセージをコンソールに記録します。
+このスニペットでは、以前に作成したリーダーに問い合わせて、ストリームが閉じられているかどうかを確認します。 閉じられるとプロミスが履行され、メッセージをコンソールに出力します。
 
 ```js
 reader.closed.then(() => {
@@ -27,10 +24,15 @@ reader.closed.then(() => {
 });
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultReader.closed")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
diff --git a/files/ja/web/api/readablestreamdefaultreader/index.md b/files/ja/web/api/readablestreamdefaultreader/index.md
index b928b379fd05e3..27294585235670 100644
--- a/files/ja/web/api/readablestreamdefaultreader/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/index.md
@@ -1,28 +1,35 @@
 ---
 title: ReadableStreamDefaultReader
 slug: Web/API/ReadableStreamDefaultReader
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-[Streams API](/ja/docs/Web/API/Streams_API) の **`ReadableStreamDefaultReader`** インターフェイスは、ネットワークから提供されたストリームデータ（フェッチ要求など）を読み取るために使用できるデフォルトのリーダーを表します。
+**`ReadableStreamDefaultReader`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、ネットワークから提供されたストリームデータ（フェッチリクエストなど）を読み取るために使用できる既定のリーダーを表します。
+
+`ReadableStreamDefaultReader` は、任意の種類の基盤ソースを持つ {{domxref("ReadableStream")}} からの読み取りに使用することができます（基盤バイトソースを持つ読み取り可能なストリームにのみ使用することができる {{domxref("ReadableStreamBYOBReader")}} とは異なります）。
+
+ただし、基盤ソースからのゼロコピー移譲は、バッファーを自動割り当てするバイトソースにのみ対応していることに注意してください。
+言い換えれば、ストリームは[構築時](/ja/docs/Web/API/ReadableStream/ReadableStream)に、[`type="bytes"`](/ja/docs/Web/API/ReadableStream/ReadableStream#type) と [`autoAllocateChunkSize`](/ja/docs/Web/API/ReadableStream/ReadableStream#autoallocatechunksize) の両方が指定されたものでなければなりません。他にも基盤ソースがある場合、ストリームは常に内部キューからのデータで読み取りリクエストを満たします。
 
 ## コンストラクター
 
 - {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}}
   - : `ReadableStreamDefaultReader` オブジェクトのインスタンスを作成して返します。
 
-## プロパティ
+## インスタンスプロパティ
 
-- {{domxref("ReadableStreamDefaultReader.closed")}} {{readonlyInline}}
-  - : ストリーミングプロセスの終了に応答するコードを記述できます。 ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たされる promise を返します。 ストリームがエラーの場合は拒否します。
+- {{domxref("ReadableStreamDefaultReader.closed")}} {{ReadOnlyInline}}
+  - : ストリーミングプロセスの終了に応答するコードを記述できます。 ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行されるプロミスを返します。 ストリームがエラーの場合は拒否されます。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("ReadableStreamDefaultReader.cancel()")}}
-  - : ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。
+  - : ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された引数 `reason` は、基盤ソースに与えられ、使用する場合もしない場合もあります。
 - {{domxref("ReadableStreamDefaultReader.read()")}}
-  - : ストリームの内部キュー内の次のチャンクへのアクセスを提供する promise を返します。
+  - : ストリームの内部キュー内の次のチャンクへのアクセスを提供するプロミスを返します。
 - {{domxref("ReadableStreamDefaultReader.releaseLock()")}}
   - : ストリームのリーダーのロックを解除します。
 
@@ -62,10 +69,18 @@ fetch("https://www.example.org/").then((response) => {
 });
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultReader")}}
+{{Compat}}
+
+## 関r根情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API)
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- {{domxref("ReadableStream")}}
+- [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/), for a basic visualization of readable, writable, and transform streams.
+- [Web-streams-polyfill](https://github.com/MattiasBuelens/web-streams-polyfill) or [sd-streams](https://github.com/stardazed/sd-streams) - polyfills
diff --git a/files/ja/web/api/readablestreamdefaultreader/read/index.md b/files/ja/web/api/readablestreamdefaultreader/read/index.md
index 9a3a7b43ee738b..6e774d32fea895 100644
--- a/files/ja/web/api/readablestreamdefaultreader/read/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/read/index.md
@@ -1,33 +1,37 @@
 ---
-title: ReadableStreamDefaultReader.read()
+title: "ReadableStreamDefaultReader: read() メソッド"
+short-title: read()
 slug: Web/API/ReadableStreamDefaultReader/read
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultReader")}} インターフェイスの **`read()`** メソッドは、ストリームの内部キュー内の次のチャンクへのアクセスを提供する promise を返します。
+**`read()`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスのメソッドで、ストリームの内部キュー内の次のチャンクへのアクセスを提供するプロミスを返します。
 
 ## 構文
 
-```
-var promise = readableStreamDefaultReader.read();
+```js-nolint
+read()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-{{jsxref("Promise")}}。ストリームの状態に応じて結果を充足/拒否します。 異なる可能性は次のとおりです。
+{{jsxref("Promise")}} です。ストリームの状態に応じて、結果にて履行または拒否されます。
+ありうる状況ものは次の通りです。
 
-- チャンクが使用可能な場合、`{ value: theChunk, done: false }` の形式のオブジェクトで promise が満たされます。
-- ストリームが閉じられると、`{ value: undefined, done: true }` という形式のオブジェクトで promise が満たされます。
-- ストリームがエラーになると、関連するエラーで promise が拒否されます。
+- チャンクが使用可能な場合、プロミスが `{ value: theChunk, done: false }` の形式のオブジェクトで履行されます。
+- ストリームが閉じられると、プロミスが `{ value: undefined, done: true }` という形式のオブジェクトで履行されます。
+- ストリームがエラーになると、プロミスが関連するエラーでプロミスが拒否されます。
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableStreamDefaultReader` ではないか、ストリームに所有者がいません。
 
 ## 例
@@ -46,7 +50,7 @@ function fetchStream() {
   // read() は、値を受け取ったときに解決する promise を返します
   reader.read().then(function processText({ done, value }) {
     // 結果オブジェクトには2つのプロパティが含まれます
-    // done  - ストリームがすべてのデータを既に提供している場合は true
+    // done - ストリームがすべてのデータを既に提供している場合は true
     // value - 一部のデータ。 done が true の場合、常に undefined
     if (done) {
       console.log("Stream complete");
@@ -58,11 +62,7 @@ function fetchStream() {
     charsReceived += value.length;
     const chunk = value;
     let listItem = document.createElement("li");
-    listItem.textContent =
-      "Received " +
-      charsReceived +
-      " characters so far. Current chunk = " +
-      chunk;
+    listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
     list2.appendChild(listItem);
 
     result += chunk;
@@ -83,11 +83,10 @@ async function* makeTextFileLineIterator(fileURL) {
   let response = await fetch(fileURL);
   let reader = response.body.getReader();
   let { value: chunk, done: readerDone } = await reader.read();
-  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+  chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : "";
 
-  let re = /\n|\r|\r\n/gm;
+  let re = /\r\n|\n|\r/gm;
   let startIndex = 0;
-  let result;
 
   for (;;) {
     let result = re.exec(chunk);
@@ -97,7 +96,8 @@ async function* makeTextFileLineIterator(fileURL) {
       }
       let remainder = chunk.substr(startIndex);
       ({ value: chunk, done: readerDone } = await reader.read());
-      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
+      chunk =
+        remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : "");
       startIndex = re.lastIndex = 0;
       continue;
     }
@@ -115,10 +115,15 @@ for await (let line of makeTextFileLineIterator(urlOfFile)) {
 }
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultReader.read")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
diff --git a/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md b/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
index a4a8bd8c2aac07..edbc164d02d9e8 100644
--- a/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/readablestreamdefaultreader/index.md
@@ -1,33 +1,36 @@
 ---
-title: ReadableStreamDefaultReader.ReadableStreamDefaultReader()
+title: "ReadableStreamDefaultReader: ReadableStreamDefaultReader() コンストラクター"
+short-title: ReadableStreamDefaultReader()
 slug: Web/API/ReadableStreamDefaultReader/ReadableStreamDefaultReader
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
 **`ReadableStreamDefaultReader()`** コンストラクターは、`ReadableStreamDefaultReader` オブジェクトのインスタンスを作成して返します。
 
-> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}}) メソッドを使用します。
+> **メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、{{domxref("ReadableStream.getReader()")}} メソッドを使用してください。
 
 ## 構文
 
-```
-var readableStreamDefaultReader = new ReadableStreamDefaultReader(stream);
+```js-nolint
+new ReadableStreamDefaultReader(stream)
 ```
 
-### パラメーター
+### 引数
 
-- stream
-  - : 読み取られる {{domxref("ReadableStream")}}。
+- `stream`
+  - : 読み取り対象となる {{domxref("ReadableStream")}}。
 
-### 戻り値
+### 返値
 
 {{domxref("ReadableStreamDefaultReader")}} オブジェクトのインスタンス。
 
 ### 例外
 
-- TypeError
-  - : 指定された `stream` パラメーターは {{domxref("ReadableStream")}} ではないか、別のリーダーによる読み取りのために既にロックされています。
+- {{jsxref("TypeError")}}
+  - : 指定された `stream` 引数が {{domxref("ReadableStream")}} ではないか、別のリーダーによる読み取りのために既にロックされています。
 
 ## 例
 
@@ -41,7 +44,7 @@ function fetchStream() {
   // read() は、値を受け取ったときに解決する promise を返します
   reader.read().then(function processText({ done, value }) {
     // 結果オブジェクトには2つのプロパティが含まれます。
-    // done  - ストリームがすべてのデータを既に提供している場合は true。
+    // done - ストリームがすべてのデータを既に提供している場合は true。
     // value - 一部のデータ。 done が true の場合、常に undefined。
     if (done) {
       console.log("Stream complete");
@@ -53,11 +56,7 @@ function fetchStream() {
     charsReceived += value.length;
     const chunk = value;
     let listItem = document.createElement("li");
-    listItem.textContent =
-      "Received " +
-      charsReceived +
-      " characters so far. Current chunk = " +
-      chunk;
+    listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
     list2.appendChild(listItem);
 
     result += chunk;
@@ -68,10 +67,17 @@ function fetchStream() {
 }
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultReader.ReadableStreamDefaultReader")}}
+{{Compat}}
+
+## 関連情報
+
+- [ストリーム API の概念](/ja/docs/Web/API/Streams_API)
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)
+- {{domxref("ReadableStream")}}
+- {{domxref("ReadableStreamDefaultController")}}
diff --git a/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md b/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md
index dbb57b3103f0d8..b3d27ceaac6d9b 100644
--- a/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md
+++ b/files/ja/web/api/readablestreamdefaultreader/releaselock/index.md
@@ -1,33 +1,36 @@
 ---
-title: ReadableStreamDefaultReader.releaseLock()
+title: "ReadableStreamDefaultReader: releaseLock() メソッド"
+short-title: releaseLock()
 slug: Web/API/ReadableStreamDefaultReader/releaseLock
+l10n:
+  sourceCommit: d41c5446d4ef257280fae9b78e2298ced8954a95
 ---
 
 {{APIRef("Streams")}}
 
-{{domxref("ReadableStreamDefaultReader")}} インターフェイスの `releaseLock()` メソッドは、ストリームのリーダーのロックを解除します。
+**`releaseLock()`** は {{domxref("ReadableStreamDefaultReader")}} インターフェイスのメソッドで、ストリームのリーダーのロックを解除します。
 
 ロックを解除したときに関連するストリームにエラーが発生した場合、リーダーはその後同様にエラーが発生したようになります。 そうでない場合、リーダーは閉じた状態になります。
 
-リーダーのロックは、保留中の読み取り要求が残っている間、つまり、リーダーの {{domxref("ReadableStreamDefaultReader.read()")}} メソッドによって返された promise が終了していない場合、解除できません。 これにより、`TypeError` がスローされます。
+リーダーのロックは、保留中の読み取りリクエストが残っている間、つまり、リーダーの {{domxref("ReadableStreamDefaultReader.read()")}} メソッドによって返されたプロミスが終了していない場合、解除できません。 これにより、`TypeError` が発生します。
 
 ## 構文
 
-```
-readableStreamDefaultReader.releaseLock();
+```js-nolint
+releaseLock()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### Return value
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
-- TypeError
+- {{jsxref("TypeError")}}
   - : ソースオブジェクトが `ReadableStreamDefaultReader` でないか、読み取り要求が保留中です。
 
 ## 例
@@ -36,18 +39,23 @@ readableStreamDefaultReader.releaseLock();
 function fetchStream() {
   const reader = stream.getReader();
 
-  ...
+  // ...
 
-  reader.releaseLock()
+  reader.releaseLock();
 
-  ...
+  // ...
 }
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.ReadableStreamDefaultReader.releaseLock")}}
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ReadableStreamDefaultReader.ReadableStreamDefaultReader", "ReadableStreamDefaultReader()")}} コンストラクター
+- [読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)

From 69ac7fe58c69081545ae41534bbf6804beba90eb Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 28 Sep 2023 09:00:11 +0900
Subject: [PATCH 183/268] =?UTF-8?q?=E3=82=B9=E3=83=88=E3=83=AA=E3=83=BC?=
 =?UTF-8?q?=E3=83=A0=20API=20=E3=81=AE=E7=94=A8=E8=AA=9E=E3=81=AE=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=EF=BC=8F=E8=AA=A4=E8=A8=B3=E3=81=AE=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=20(#16050)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 2023/08/11 時点の英語版に同期

* 2023/07/18 時点の英語版に同期

* 2023/08/25 時点の英語版に同期

* 2023/07/07 時点の英語版に基づき新規翻訳

* 2023/07/07 時点の英語版に同期
---
 .../streams_api/using_readable_byte_streams/index.md |  6 +++---
 .../api/streams_api/using_readable_streams/index.md  | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/files/ja/web/api/streams_api/using_readable_byte_streams/index.md b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
index 84b9cc4491e183..3f87526a4593c0 100644
--- a/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
+++ b/files/ja/web/api/streams_api/using_readable_byte_streams/index.md
@@ -8,7 +8,7 @@ l10n:
 {{DefaultAPISidebar("Streams")}}
 
 読み取り可能なバイトストリームとは、[読み取り可能なストリーム](/ja/docs/Web/API/Streams_API/Using_readable_streams)のうち `type: "bytes"` の基盤バイトソースがあり、（ストリーム内部のキューをバイパスして）基盤ソースからコンシューマーへの効率的なゼロコピー移譲に対応しています。
-これは、データが任意の大きさの、潜在的にとても大きな塊で供給されたりリクエストされたりする可能性があり、したがってコピーを避けることが効率を向上させる可能性がある使用される用途を意図しています。
+これは、データが任意の大きさの、潜在的にとても大きなチャンクで供給されたりリクエストされたりする可能性があり、したがってコピーを避けることが効率を向上させる可能性がある使用される用途を意図しています。
 
 この記事では、読み取り可能なバイトストリームと通常の「既定」ストリームとの比較、およびそれらをどのように作成し、使用するかについて説明します。
 
@@ -383,7 +383,7 @@ button.addEventListener("click", () => {
 
 {{domxref("ReadableStreamBYOBReader.releaseLock()")}} を使用すると、ストリームを取り消すことなくリーダーを解放することができます。
 ただし、未処理の読み込みリクエストは即座に拒否されることに注意してください。
-残りの塊を読むために、後で新しいリーダーを取得することができます。
+残りのチャンクを読むために、後で新しいリーダーを取得することができます。
 
 #### ストリームの close/error を監視
 
@@ -888,7 +888,7 @@ button.addEventListener("click", () => {
 
 基盤のバイトプルソース（左）とコンシューマ（右）からのログ出力を下記に示します。
 
-これで、基盤のバイトソースを指定しますと、塊は200バイト幅になることに注意してください。
+なお、チャンクは基盤バイトソースで指定されているように、 200 バイト長になります。
 これらは、ゼロコピー移譲として行われます。
 
 {{EmbedLiveSample("Underlying pull source with default reader","100%","500px")}}
diff --git a/files/ja/web/api/streams_api/using_readable_streams/index.md b/files/ja/web/api/streams_api/using_readable_streams/index.md
index ebbd4bb530878c..c631e352493da6 100644
--- a/files/ja/web/api/streams_api/using_readable_streams/index.md
+++ b/files/ja/web/api/streams_api/using_readable_streams/index.md
@@ -151,10 +151,10 @@ fetch("http://example.com/somefile.txt")
     // read() は値を受け取ったときに解決するプロミスを返す
     reader.read().then(function pump({ done, value }) {
       if (done) {
-        // データの最後の塊で何かを行い、リーダーを終了する
+        // データの最後のチャンクで何かを行い、リーダーを終了する
         return;
       }
-      // そうでない場合は、ここで現在の塊を処理する
+      // そうでない場合は、ここで現在のチャンクを処理する
 
       // さらに読み進めて、この関数をもう一度呼び出す
       return reader.read().then(pump);
@@ -174,10 +174,10 @@ async function readData(url) {
   while (true) {
     const { done, value } = await reader.read();
     if (done) {
-      // データの最後の塊で何かを行い、リーダーを終了する
+      // データの最後のチャンクで何かを行い、リーダーを終了する
       return;
     }
-    // そうでない場合は、ここで現在の塊を処理する
+    // そうでない場合は、ここで現在のチャンクを処理する
   }
 }
 ```
@@ -414,9 +414,9 @@ async function logChunks(url, { signal }) {
 ```
 
 下記のログ出力例では、コードが実行されているか、ブラウザーが `ReadableStream` の非同期反復処理に対応していないことを表示しています。
-正しい辺には取得した塊が表示されます。フェッチを停止するにはキャンセルボタンを押します。
+正しい辺には取得したチャンクが表示されます。フェッチを停止するにはキャンセルボタンを押します。
 
-> **メモ:** このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストの塊を生成する `ReadableStream` を返すだけです。
+> **メモ:** このフェッチ処理はデモのために模擬的に作成されたもので、ランダムにテキストのチャンクを生成する `ReadableStream` を返すだけです。
 > 下記左列の「基盤ソース」は模擬ソースで生成されるデータで、右列はコンシューマーからのログ出力です。
 > （模擬ソースのコードは例に関係ないので表示しません。）
 

From 2596b93ecbb6c63ca0ab33f40ac7f226a7952ae7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 28 Sep 2023 09:00:33 +0900
Subject: [PATCH 184/268] =?UTF-8?q?ReadableByteStreamController=20?=
 =?UTF-8?q?=E3=81=AB=E3=81=8A=E3=81=91=E3=82=8B=E7=94=A8=E8=AA=9E=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20(#16051)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 2023/05/10 時点の英語版に同期

* 2023/04/08 時点の英語版に同期

* 用語の統一：塊→チャンク
---
 files/ja/web/api/readablebytestreamcontroller/enqueue/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
index 140afde4fae874..232d2db6aeacf9 100644
--- a/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
+++ b/files/ja/web/api/readablebytestreamcontroller/enqueue/index.md
@@ -8,7 +8,7 @@ l10n:
 
 {{APIRef("Streams")}}
 
-**`enqueue()`** は {{domxref("ReadableByteStreamController")}} で、指定された塊を、関連する読み取り可能なバイトストリームのキューに入れます（塊はストリーム内部のキューにコピーされます）。
+**`enqueue()`** は {{domxref("ReadableByteStreamController")}} で、指定されたチャンクを、関連する読み取り可能なバイトストリームのキューに入れます（チャンクはストリーム内部のキューにコピーされます）。
 
 これは、 {{domxref("ReadableByteStreamController.byobRequest","byobRequest")}} が `null` である場合にのみ、キューへのデータ移譲に使用しましょう。
 

From 775bfcf05b361d7d3163729073bb4a8f5c21b885 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 13:09:47 +0900
Subject: [PATCH 185/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/transformstream/index.md | 102 ++++++++++++++--------
 1 file changed, 65 insertions(+), 37 deletions(-)

diff --git a/files/ja/web/api/transformstream/index.md b/files/ja/web/api/transformstream/index.md
index 59956b8cad9386..454aa3698a7798 100644
--- a/files/ja/web/api/transformstream/index.md
+++ b/files/ja/web/api/transformstream/index.md
@@ -1,25 +1,35 @@
 ---
 title: TransformStream
 slug: Web/API/TransformStream
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{APIRef("Media Capture and Streams")}}
+{{APIRef("Streams")}}
 
-`TransformStream` は [Streams API](/ja/docs/Web/API/Streams_API) のインターフェイスで一連の変換可能なデータを表します。
+**`TransformStream`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、変換ストリームの概念である[パイプチェーン](/ja/docs/Web/API/Streams_API/Concepts#パイプチェーン)の具体的な実装を表します。
+
+これは、データのストリームをある形式から別の形式に変換するために {{domxref("ReadableStream.pipeThrough()")}} メソッドに渡すことができます。
+例えば、動画フレームをデコード（またはエンコード）したり、データを解凍したり、ストリームを XML から JSON に変換したりするために使用します。
+
+変換アルゴリズムは、オブジェクトのコンストラクターのオプション引数として指定されます。
+提供されない場合、ストリームを通してパイプ処理されたデータは変更されません。
+
+`TransformStream` は[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)です。
 
 ## コンストラクター
 
 - {{domxref("TransformStream.TransformStream", "TransformStream()")}}
-  - : 指定されたハンドラーから変換ストリームを作成して返却します。
+  - : 指定されたハンドラーから変換ストリームを作成して返却します。オプションで、変換オブジェクトとストリームのキューイング戦略を指定します。
 
-## プロパティ
+## インスタンスプロパティ
 
-- {{domxref("TransformStream.readable")}} {{readonlyInline}}
-  - : TransformStream の `readable` 側の端点です。
-- {{domxref("TransformStream.writable")}} {{readonlyInline}}
-  - : TransformStream の `writable` 側の端点です。
+- {{domxref("TransformStream.readable")}} {{ReadOnlyInline}}
+  - : `TransformStream` の `readable` 側の端点です。
+- {{domxref("TransformStream.writable")}} {{ReadOnlyInline}}
+  - : `TransformStream` の `writable` 側の端点です。
 
-## メソッド
+## インスタンスメソッド
 
 なし
 
@@ -27,40 +37,55 @@ slug: Web/API/TransformStream
 
 ### 何かを uint8array に変換するストリーム
 
-以下の例では、変換ストリームは受信したすべてのチャンクを {{domxref("Uint8Array")}} の値に渡します。
+以下の例では、変換ストリームは受信したすべてのチャンクを {{jsxref("Uint8Array")}} の値に渡します。
 
 ```js
 const transformContent = {
   start() {}, // required.
   async transform(chunk, controller) {
-    chunk = await chunk
+    chunk = await chunk;
     switch (typeof chunk) {
-      case 'object':
+      case "object":
         // just say the stream is done I guess
-        if (chunk === null) controller.terminate()
-        else if (ArrayBuffer.isView(chunk))
-          controller.enqueue(new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength))
-        else if (Array.isArray(chunk) && chunk.every(value => typeof value === 'number'))
-          controller.enqueue(new Uint8Array(chunk))
-        else if ('function' === typeof chunk.valueOf && chunk.valueOf() !== chunk)
-          this.transform(chunk.valueOf(), controller) // hack
-        else if ('toJSON' in chunk) this.transform(JSON.stringify(chunk), controller)
-        break
-      case 'symbol':
-        controller.error("Cannot send a symbol as a chunk part")
-        break
-      case 'undefined':
-        controller.error("Cannot send undefined as a chunk part")
+        if (chunk === null) {
+          controller.terminate();
+        } else if (ArrayBuffer.isView(chunk)) {
+          controller.enqueue(
+            new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
+          );
+        } else if (
+          Array.isArray(chunk) &&
+          chunk.every((value) => typeof value === "number")
+        ) {
+          controller.enqueue(new Uint8Array(chunk));
+        } else if (
+          typeof chunk.valueOf === "function" &&
+          chunk.valueOf() !== chunk
+        ) {
+          this.transform(chunk.valueOf(), controller); // hack
+        } else if ("toJSON" in chunk) {
+          this.transform(JSON.stringify(chunk), controller);
+        }
+        break;
+      case "symbol":
+        controller.error("Cannot send a symbol as a chunk part");
+        break;
+      case "undefined":
+        controller.error("Cannot send undefined as a chunk part");
+        break;
       default:
-        controller.enqueue(this.textencoder.encode(String(chunk)))
-        break
+        controller.enqueue(this.textencoder.encode(String(chunk)));
+        break;
+    }
   },
-  flush() { /* do any destructor work here */ }
-}
+  flush() {
+    /* do any destructor work here */
+  },
+};
 
 class AnyToU8Stream extends TransformStream {
   constructor() {
-    super({...transformContent, textencoder: new TextEncoder()})
+    super({ ...transformContent, textencoder: new TextEncoder() });
   }
 }
 ```
@@ -78,6 +103,7 @@ const tes = {
     controller.enqueue(this.encoder.encode(chunk));
   },
 };
+
 let _jstes_wm = new WeakMap(); /* info holder */
 class JSTextEncoderStream extends TransformStream {
   constructor() {
@@ -92,24 +118,25 @@ class JSTextEncoderStream extends TransformStream {
 }
 ```
 
-同様に、 TextDecoderStream は次のように書くことができます。
+同様に、 `TextDecoderStream` は次のように書くことができます。
 
 ```js
-const tes = {
+const tds = {
   start() {
     this.decoder = new TextDecoder(this.encoding, this.options);
   },
   transform(chunk, controller) {
-    controller.enqueue(this.decoder.decode(chunk));
+    controller.enqueue(this.decoder.decode(chunk, { stream: true }));
   },
 };
+
 let _jstds_wm = new WeakMap(); /* info holder */
 class JSTextDecoderStream extends TransformStream {
   constructor(encoding = "utf-8", { ...options } = {}) {
     let t = { ...tds, encoding, options };
 
     super(t);
-    _jstes_wm.set(this, t);
+    _jstds_wm.set(this, t);
   }
   get encoding() {
     return _jstds_wm.get(this).decoder.encoding;
@@ -148,8 +175,9 @@ responses.reduce(
 
 ## ブラウザーの互換性
 
-{{Compat("api.TransformStream")}}
+{{Compat}}
 
 ## 関連情報
 
-- [WHATWG Stream Visualiser](https://whatwg-stream-visualizer.glitch.me/): 読み取り、書き込み、変換ストリームの基本的な視覚化
+- [WHATWG Stream Visualizer](https://whatwg-stream-visualizer.glitch.me/): 読み取り、書き込み、変換ストリームの基本的な視覚化
+- [Streams—The Definitive Guide](https://web.dev/streams/)

From 6712f736344d17b1350204801a9002dc0471f79f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 14:39:44 +0900
Subject: [PATCH 186/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../transformstream/transformstream/index.md  | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 files/ja/web/api/transformstream/transformstream/index.md

diff --git a/files/ja/web/api/transformstream/transformstream/index.md b/files/ja/web/api/transformstream/transformstream/index.md
new file mode 100644
index 00000000000000..df9f8e6b270ad8
--- /dev/null
+++ b/files/ja/web/api/transformstream/transformstream/index.md
@@ -0,0 +1,107 @@
+---
+title: "TransformStream: TransformStream() コンストラクター"
+short-title: TransformStream()
+slug: Web/API/TransformStream/TransformStream
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Streams")}}
+
+**`TransformStream()`** コンストラクターは、新しい {{domxref("TransformStream")}} オブジェクトを作成します。このオブジェクトは、書き込み可能な端点を表す {{domxref("WritableStream")}} と、読み取り可能な端点を表す {{domxref("ReadableStream")}} の 2 つのストリームを表します。
+
+## 構文
+
+```js-nolint
+new TransformStream()
+new TransformStream(transformer)
+new TransformStream(transformer, writableStrategy)
+new TransformStream(transformer, writableStrategy, readableStrategy)
+```
+
+### 引数
+
+- `transformer` {{optional_inline}}
+
+  - : `transformer` を表すオブジェクト。指定されなかった場合、ストリームは**同一変換ストリーム**となり、書き込み可能な端点に書き込まれたすべてのチャンクをそのまま読み取り可能な端点に転送します。
+
+    変換オブジェクトは以下のメソッドを持つことができます。各メソッドの、 `controller` は {{domxref("TransformStreamDefaultController")}} のインスタンスです。
+
+    - `start(controller)`
+      - : `TransformStream` が構築される際に呼び出されます。通常は {{domxref("TransformStreamDefaultController.enqueue()")}} を使用してチャンクをキューに入れます。
+    - `transform(chunk, controller)`
+      - : 書き込み可能な端点に書き込まれたチャンクが変換される準備ができたときに呼び出され、変換ストリームの作業をします。書き込み処理の成功や失敗を指示するプロミスを返すことがあります。もし `transform()` メソッドが与えられなかった場合、ID 変換が使用され、チャンクは変更されずにキューに入れられます。
+    - `flush(controller)`
+      - : 書き込み可能な端点に書き込まれたチャンクがすべて正常に変換され、書き込み可能な端点が閉じられた後に呼び出されます。
+
+- `writableStrategy` {{optional_inline}}
+
+  - : オプションでストリームのキューイング戦略を定義するオブジェクト。これは 2 つの引数を取ります。
+
+    - `highWaterMark`
+      - : 非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。
+    - `size(chunk)`
+      - : 引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。
+
+- `readableStrategy` {{optional_inline}}
+
+  - : オプションでストリームのキューイング戦略を定義するオブジェクト。 2 つの引数を取ります。
+
+    - `highWaterMark`
+      - : 非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。
+    - `size(chunk)`
+      - : 引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。
+
+> **メモ:** 自分自身で独自の `readableStrategy` や `writableStrategy` を定義したり、オブジェクト値に対して {{domxref("ByteLengthQueuingStrategy")}} や {{domxref("CountQueuingStrategy")}} のインスタンスを使用したりすることができます。
+
+## 例
+
+### テキストを大文字に変換
+
+次の例は、チャンクごとにテキストを大文字に変換します。この例は [Streams—The Definitive Guide](https://web.dev/streams/) から引用したもので、異なる種類のストリームの例が数多く含まれています。
+
+```js
+function upperCaseStream() {
+  return new TransformStream({
+    transform(chunk, controller) {
+      controller.enqueue(chunk.toUpperCase());
+    },
+  });
+}
+
+function appendToDOMStream(el) {
+  return new WritableStream({
+    write(chunk) {
+      el.append(chunk);
+    },
+  });
+}
+
+fetch("./lorem-ipsum.txt").then((response) =>
+  response.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(upperCaseStream())
+    .pipeTo(appendToDOMStream(document.body)),
+);
+```
+
+### 同一変換ストリームの作成
+
+引数 `transformer` を与えない場合は、書き込み可能な端点に書き込まれたチャンクを変更せずに読み取り可能な辺にすべて転送する同一変換ストリームになります。次の例では、パイプにバッファー機能を追加するために同一変換ストリームを使用しています。
+
+```js
+const writableStrategy = new ByteLengthQueuingStrategy({
+  highWaterMark: 1024 * 1024,
+});
+readableStream
+  .pipeThrough(new TransformStream(undefined, writableStrategy))
+  .pipeTo(writableStream);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 0855cb5be03dc47171cca929a99f4d5bb8fe60ed Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 14:52:43 +0900
Subject: [PATCH 187/268] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/transformstream/readable/index.md | 32 +++++++++++++++++++
 .../web/api/transformstream/writable/index.md | 32 +++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 files/ja/web/api/transformstream/readable/index.md
 create mode 100644 files/ja/web/api/transformstream/writable/index.md

diff --git a/files/ja/web/api/transformstream/readable/index.md b/files/ja/web/api/transformstream/readable/index.md
new file mode 100644
index 00000000000000..90a492c2c0bfb4
--- /dev/null
+++ b/files/ja/web/api/transformstream/readable/index.md
@@ -0,0 +1,32 @@
+---
+title: "TransformStream: readable プロパティ"
+short-title: readable
+slug: Web/API/TransformStream/readable
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{APIRef("Streams")}}
+
+**`readable`** は {{domxref("TransformStream")}} インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する {{domxref("ReadableStream")}} インスタンスを返します。
+
+## 値
+
+{{domxref("ReadableStream")}} です。
+
+## 例
+
+次の例は、新しい {{domxref("TransformStream")}} を `textEncoderStream` として作成し、 `readable` の値をコンソールに出力します。
+
+```js
+const textEncoderStream = new TransformStream();
+console.log(textEncoderStream.readable); // a ReadableStream
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/transformstream/writable/index.md b/files/ja/web/api/transformstream/writable/index.md
new file mode 100644
index 00000000000000..91d7acff704783
--- /dev/null
+++ b/files/ja/web/api/transformstream/writable/index.md
@@ -0,0 +1,32 @@
+---
+title: "TransformStream: writable プロパティ"
+short-title: writable
+slug: Web/API/TransformStream/writable
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{APIRef("Streams")}}
+
+**`writable`** は {{domxref("TransformStream")}} インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する {{domxref("WritableStream")}} インスタンスを返します。
+
+## 値
+
+{{domxref("WritableStream")}} です。
+
+## 例
+
+次の例は、新しい {{domxref("TransformStream")}} を `textEncoderStream` として作成し、 `writable` の値をコンソールに出力します。
+
+```js
+const textEncoderStream = new TransformStream();
+console.log(textEncoderStream.writable); // a WritableStream
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From e68cfcef2be8bd7a3b257206527fa5bd197b42a4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 15:18:00 +0900
Subject: [PATCH 188/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../transformstreamdefaultcontroller/index.md | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/index.md

diff --git a/files/ja/web/api/transformstreamdefaultcontroller/index.md b/files/ja/web/api/transformstreamdefaultcontroller/index.md
new file mode 100644
index 00000000000000..2210dfa3b1c813
--- /dev/null
+++ b/files/ja/web/api/transformstreamdefaultcontroller/index.md
@@ -0,0 +1,89 @@
+---
+title: TransformStreamDefaultController
+slug: Web/API/TransformStreamDefaultController
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Streams")}}
+
+**TransformStreamDefaultController`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、関連する {{domxref("ReadableStream")}} と {{domxref("WritableStream")}} を操作するメソッドを提供します。
+
+{{domxref("TransformStream")}} を作成すると、 `TransformStreamDefaultController` が作成されます。そのため、コンストラクターはありません。 `TransformStreamDefaultController` のインスタンスを取得するには、 {{domxref("TransformStream.TransformStream", "TransformStream()")}} のコールバックメソッドを使用します。
+
+## インスタンスプロパティ
+
+- {{domxref("TransformStreamDefaultController.desiredSize")}} {{ReadOnlyInline}}
+  - : ストリームの内部キューの読み取り可能な側を埋めるために必要なサイズを返します。
+
+## インスタンスメソッド
+
+- {{domxref("TransformStreamDefaultController.enqueue()")}}
+  - : ストリームの読み取り可能な側にチャンク（単一のデータ）をキューに入れます。
+- {{domxref("TransformStreamDefaultController.error()")}}
+  - : 変換ストリームの読み取り可能な側と書き込み可能な側の両方をエラーを発生させます。
+- {{domxref("TransformStreamDefaultController.terminate()")}}
+  - : ストリームの読み取り可能な側を閉じ、書き込み可能な側にエラーを発生させます。
+
+## 例
+
+次の例では、変換ストリームは、 {{domxref("TransformStreamDefaultController.error()","error()")}} メソッドと {{domxref("TransformStreamDefaultController.enqueue()", "enqueue()")}} メソッドを使用して、受信したチャンクをすべて {{jsxref("Uint8Array")}} 値として渡します。
+
+```js
+const transformContent = {
+  start() {}, // required.
+  async transform(chunk, controller) {
+    chunk = await chunk;
+    switch (typeof chunk) {
+      case "object":
+        // just say the stream is done I guess
+        if (chunk === null) {
+          controller.terminate();
+        } else if (ArrayBuffer.isView(chunk)) {
+          controller.enqueue(
+            new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
+          );
+        } else if (
+          Array.isArray(chunk) &&
+          chunk.every((value) => typeof value === "number")
+        ) {
+          controller.enqueue(new Uint8Array(chunk));
+        } else if (
+          typeof chunk.valueOf === "function" &&
+          chunk.valueOf() !== chunk
+        ) {
+          this.transform(chunk.valueOf(), controller); // hack
+        } else if ("toJSON" in chunk) {
+          this.transform(JSON.stringify(chunk), controller);
+        }
+        break;
+      case "symbol":
+        controller.error("Cannot send a symbol as a chunk part");
+        break;
+      case "undefined":
+        controller.error("Cannot send undefined as a chunk part");
+        break;
+      default:
+        controller.enqueue(this.textencoder.encode(String(chunk)));
+        break;
+    }
+  },
+  flush() {
+    /* do any destructor work here */
+  },
+};
+
+class AnyToU8Stream extends TransformStream {
+  constructor() {
+    super({ ...transformContent, textencoder: new TextEncoder() });
+  }
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 32cc7533679f7a1965e8e648d34edc88f778af47 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 15:23:39 +0900
Subject: [PATCH 189/268] =?UTF-8?q?2023/04/08=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../desiredsize/index.md                      | 35 ++++++++++++
 .../enqueue/index.md                          | 57 +++++++++++++++++++
 .../error/index.md                            | 55 ++++++++++++++++++
 .../terminate/index.md                        | 41 +++++++++++++
 4 files changed, 188 insertions(+)
 create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md
 create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md
 create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/error/index.md
 create mode 100644 files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md

diff --git a/files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md b/files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md
new file mode 100644
index 00000000000000..14ec1c0b04833c
--- /dev/null
+++ b/files/ja/web/api/transformstreamdefaultcontroller/desiredsize/index.md
@@ -0,0 +1,35 @@
+---
+title: "TransformStreamDefaultController: desiredSize プロパティ"
+short-title: desiredSize
+slug: Web/API/TransformStreamDefaultController/desiredSize
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{DefaultAPISidebar("Streams API")}}
+
+**`desiredSize`** は {{domxref("TransformStreamDefaultController")}} インターフェイスの読み取り専用プロパティで、関連付けられた {{domxref("ReadableStream")}} のキューを埋めるのに必要なサイズを返します。
+
+`ReadableStream` の内部キューには、キューに入れられたがまだ読み込まれていないチャンクが格納されます。ブラウザーはストリームを埋めるために **必要なサイズ** を決定し、この値が `desiredSize` プロパティによって返されます。
+
+もし `desiredSize` が `0` ならば、キューは満杯です。従って、この情報を使用して[手動で背圧をかける](/ja/docs/Web/API/Streams_API/Concepts#背圧)ことでキューを管理することができます。
+
+## 値
+
+必要なサイズ。
+
+## 例
+
+次の例では、 `desiredSize` をコンソールに出力します。
+
+```js
+console.log(controller.desiredSize);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md b/files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md
new file mode 100644
index 00000000000000..7d263063358dd5
--- /dev/null
+++ b/files/ja/web/api/transformstreamdefaultcontroller/enqueue/index.md
@@ -0,0 +1,57 @@
+---
+title: "TransformStreamDefaultController: enqueue() メソッド"
+short-title: enqueue()
+slug: Web/API/TransformStreamDefaultController/enqueue
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{DefaultAPISidebar("Streams API")}}
+
+**`enqueue()`** は {{domxref("TransformStreamDefaultController")}} インターフェイスのメソッドで、このストリームの読み取り可能側にある指定されたチャンクをキューに入れます。
+
+読み取り可能なストリームとチャンクについて詳しくは、[読み取り可能なストリームの使用](/ja/docs/Web/API/Streams_API/Using_readable_streams)を参照してください。
+
+## 構文
+
+```js-nolint
+enqueue(chunk)
+```
+
+### 引数
+
+- `chunk`
+  - : キューに入れられるチャンク。チャンクとは単一のデータのことです。データの種類は問いません。ストリームは様々な型のチャンクを格納することができます。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : ストリームが読み取り可能ではありません。
+    これは、ストリームが `controller.error()` によってエラーになった場合や、コントローラーの `controller.close()` メソッドが名付けられずに閉じられた場合に発生します。
+
+## 例
+
+この例では、エンコードされたチャンクが `enqueue()` メソッドを使用してキューに渡されます。
+
+```js
+const textEncoderStream = new TransformStream({
+  transform(chunk, controller) {
+    controller.enqueue(new TextEncoder().encode(chunk));
+  },
+  flush(controller) {
+    controller.terminate();
+  },
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/transformstreamdefaultcontroller/error/index.md b/files/ja/web/api/transformstreamdefaultcontroller/error/index.md
new file mode 100644
index 00000000000000..51575578ec4836
--- /dev/null
+++ b/files/ja/web/api/transformstreamdefaultcontroller/error/index.md
@@ -0,0 +1,55 @@
+---
+title: "TransformStreamDefaultController: error() メソッド"
+short-title: error()
+slug: Web/API/TransformStreamDefaultController/error
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{DefaultAPISidebar("Streams API")}}
+
+**`error()`** は {{domxref("TransformStreamDefaultController")}} インターフェイスのメソッドで、両側のストリームをエラーにします。これ以上何か操作をすると、指定されたエラーメッセージとともに失敗するようになり、キュー内のチャンクは破棄されます。
+
+## 構文
+
+```js-nolint
+error(reason)
+```
+
+### 引数
+
+- `reason`
+  - : それ以降のストリームの操作において返されるエラーメッセージを格納した文字列。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+## 例
+
+この例では、チャンクが変換できなかったときに `error()` メソッドを使用しています。
+
+```js
+const transformContent = {
+  start() {
+    /* … */
+  },
+  async transform(chunk, controller) {
+    try {
+      chunk = await applyMyTransformation(chunk);
+    } catch (err) {
+      controller.error(`Unable to transform chunk: ${err}`);
+    }
+    // …
+  },
+  // …
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md b/files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md
new file mode 100644
index 00000000000000..72aebe2650477f
--- /dev/null
+++ b/files/ja/web/api/transformstreamdefaultcontroller/terminate/index.md
@@ -0,0 +1,41 @@
+---
+title: "TransformStreamDefaultController: terminate() メソッド"
+short-title: terminate()
+slug: Web/API/TransformStreamDefaultController/terminate
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+---
+
+{{DefaultAPISidebar("Streams API")}}
+
+**`terminate()`** は {{domxref("TransformStreamDefaultController")}} インターフェイスのメソッドで、このストリームの読み取り可能側を閉じ、書き込み可能側をエラーにします。
+
+## 構文
+
+```js-nolint
+terminate()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
+
+## 例
+
+下記の例では、 {{domxref("TransformStreamDefaultController")}} で `terminate()` メソッドを呼び出しています。
+
+```js
+controller.terminate();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 42d00868cf52dbc89f6f816c21bc0e1187b75018 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 16:35:13 +0900
Subject: [PATCH 190/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/api/writablestream/close/index.md  | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 files/ja/web/api/writablestream/close/index.md

diff --git a/files/ja/web/api/writablestream/close/index.md b/files/ja/web/api/writablestream/close/index.md
new file mode 100644
index 00000000000000..258fe8680e6e7f
--- /dev/null
+++ b/files/ja/web/api/writablestream/close/index.md
@@ -0,0 +1,122 @@
+---
+title: "WritableStream: close() メソッド"
+short-title: close()
+slug: Web/API/WritableStream/close
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Streams")}}
+
+**`close()`** は {{domxref("WritableStream")}} インターフェイスのメソッドで、関連付けられたストリームを閉じます。このメソッドが呼び出される前に書き込まれたチャンクはすべて、返されたプロミスが履行される前に送信されます。
+
+これは {{domxref("WritableStreamDefaultWriter")}} を {{domxref("WritableStream.getWriter()", "getWriter()")}} で取得し、 {{domxref("WritableStreamDefaultWriter.close()", "close()")}} を呼び付けるのと同じです。
+
+## 構文
+
+```js-nolint
+close()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+{{jsxref("Promise")}} で、閉じる前に残りのチャンクがすべて正常に書き込まれた場合は `undefined` で履行され、処理中に問題が発生した場合はエラーで拒否されます。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : 閉じようとしているストリームがロックされています。
+
+## 例
+
+次の例は `WritableStream` のいくつかの機能を示しています。これはカスタムシンクと、 API が提供するキューイング戦略による `WritableStream` の作成を示しています。次に `sendMessage()` という関数を呼び出して、新しく作成したストリームと文字列を渡します。この関数の内部では、ストリームの `getWriter()` メソッドを呼び出して {{domxref("WritableStreamDefaultWriter")}} のインスタンスを返します。 `forEach()` 呼び出しは、文字列の各チャンクをストリームに書き込むために使用されます。最後に、 `write()` と `close()` はチャンクとストリームの成功と失敗を処理するプロミスを返します。なお、ストリーム自体で `close()` を呼び出すには、 `defaultWriter.releaseLock();` を使用してライターを切断する必要があります。
+
+```html hidden
+<ul id="log"></ul>
+```
+
+```js hidden
+const list = document.getElementById("log");
+function log(message) {
+  const listItem = document.createElement("li");
+  listItem.textContent = message;
+  list.appendChild(listItem);
+}
+```
+
+```js
+function sendMessage(message, writableStream) {
+  // defaultWriter is of type WritableStreamDefaultWriter
+  const defaultWriter = writableStream.getWriter();
+  const encoder = new TextEncoder();
+  const encoded = encoder.encode(message, { stream: true });
+  encoded.forEach((chunk) => {
+    defaultWriter.ready
+      .then(() => {
+        defaultWriter.write(chunk);
+      })
+      .catch((err) => {
+        log("Chunk error:", err);
+      });
+  });
+
+  // Call ready again to ensure that all chunks are written
+  //   before closing the writer.
+  defaultWriter.ready
+    .then(() => {
+      defaultWriter.releaseLock();
+      writableStream.close();
+    })
+    .then(() => {
+      log("All chunks written / stream closed.");
+    })
+    .catch((err) => {
+      log("Stream error:", err);
+    });
+}
+
+const decoder = new TextDecoder("utf-8");
+const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
+let result = "";
+const writableStream = new WritableStream(
+  {
+    // Implement the sink
+    write(chunk) {
+      return new Promise((resolve, reject) => {
+        const buffer = new ArrayBuffer(1);
+        const view = new Uint8Array(buffer);
+        view[0] = chunk;
+        const decoded = decoder.decode(view, { stream: true });
+        const listItem = document.createElement("li");
+        result += decoded;
+        resolve();
+      });
+    },
+    close() {
+      const listItem = document.createElement("li");
+      log(`[MESSAGE RECEIVED] ${result}`);
+    },
+    abort(err) {
+      log("Sink error:", err);
+    },
+  },
+  queuingStrategy,
+);
+
+log("Sending 'Hello, world.' message.");
+sendMessage("Hello, world.", writableStream);
+```
+
+{{EmbedLiveSample("Examples", "100%", "100px")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

From 3671864d2f0d351bbbbc99cb074fb14e67024bd0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 16:11:32 +0900
Subject: [PATCH 191/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/writablestream/abort/index.md      |  9 +++++----
 files/ja/web/api/writablestream/getwriter/index.md  |  5 +++--
 files/ja/web/api/writablestream/index.md            |  8 ++++----
 files/ja/web/api/writablestream/locked/index.md     |  5 +++--
 .../web/api/writablestream/writablestream/index.md  | 13 +++++++------
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/files/ja/web/api/writablestream/abort/index.md b/files/ja/web/api/writablestream/abort/index.md
index 51f31ffa391ef6..37b0b4f6d5da87 100644
--- a/files/ja/web/api/writablestream/abort/index.md
+++ b/files/ja/web/api/writablestream/abort/index.md
@@ -1,8 +1,9 @@
 ---
-title: WritableStream.abort()
+title: "WritableStream: abort() メソッド"
+short-title: abort()
 slug: Web/API/WritableStream/abort
 l10n:
-  sourceCommit: c575deb5f1775b532360c612a85b35a5ff9525d9
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Streams")}}
@@ -17,12 +18,12 @@ abort(reason)
 
 ### 引数
 
-- reason
+- `reason`
   - : 人間が読むことのできる文字列で、中止した理由を提供します。
 
 ### 返値
 
-{{jsxref("Promise")}} です。 `reason` 引数で指定された値で満たされます。
+{{jsxref("Promise")}} です。 `reason` 引数で指定された値で履行されます。
 
 ### 例外
 
diff --git a/files/ja/web/api/writablestream/getwriter/index.md b/files/ja/web/api/writablestream/getwriter/index.md
index c58747f913ec7f..2baaedaa7f87dc 100644
--- a/files/ja/web/api/writablestream/getwriter/index.md
+++ b/files/ja/web/api/writablestream/getwriter/index.md
@@ -1,8 +1,9 @@
 ---
-title: WritableStream.getWriter()
+title: "WritableStream: getWriter() メソッド"
+short-title: getWriter()
 slug: Web/API/WritableStream/getWriter
 l10n:
-  sourceCommit: c575deb5f1775b532360c612a85b35a5ff9525d9
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Streams")}}
diff --git a/files/ja/web/api/writablestream/index.md b/files/ja/web/api/writablestream/index.md
index c1c39c61cc5c2b..9b04f9fb5e487a 100644
--- a/files/ja/web/api/writablestream/index.md
+++ b/files/ja/web/api/writablestream/index.md
@@ -2,26 +2,26 @@
 title: WritableStream
 slug: Web/API/WritableStream
 l10n:
-  sourceCommit: 579788ba8fe61b6c7dddaec09dee7b33d6548a4d
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Streams")}}
 
 **`WritableStream`** は[ストリーム API](/ja/docs/Web/API/Streams_API) のインターフェイスで、ストリーミングデータをシンクと呼ばれる宛先に書き込むための標準的な抽象化を提供します。 このオブジェクトには、背圧とキューイングが組み込まれています。
 
-`WritableStream` は{{glossary("Transferable objects","移譲可能オブジェクト")}}です。
+`WritableStream` は[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)です。
 
 ## コンストラクター
 
 - {{domxref("WritableStream.WritableStream", "WritableStream()")}}
   - : 新しい `WritableStream` オブジェクトを作成します。
 
-## プロパティ
+## インスタンスプロパティ
 
 - {{domxref("WritableStream.locked")}} {{ReadOnlyInline}}
   - : 論理値で、 `WritableStream` がライターにロックされているかどうかを示します。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("WritableStream.abort()")}}
   - : ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みが破棄されてすぐにエラー状態に移行することを通知します。
diff --git a/files/ja/web/api/writablestream/locked/index.md b/files/ja/web/api/writablestream/locked/index.md
index 83901cfc2d4862..428f241ee76678 100644
--- a/files/ja/web/api/writablestream/locked/index.md
+++ b/files/ja/web/api/writablestream/locked/index.md
@@ -1,8 +1,9 @@
 ---
-title: WritableStream.locked
+title: "WritableStream: locked プロパティ"
+short-title: locked
 slug: Web/API/WritableStream/locked
 l10n:
-  sourceCommit: f7dae62645a2c735ed6f6ed63f664bf279fdfc4b
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Streams")}}
diff --git a/files/ja/web/api/writablestream/writablestream/index.md b/files/ja/web/api/writablestream/writablestream/index.md
index f8539359f53851..d9c2a9c5fa3ddb 100644
--- a/files/ja/web/api/writablestream/writablestream/index.md
+++ b/files/ja/web/api/writablestream/writablestream/index.md
@@ -1,8 +1,9 @@
 ---
-title: WritableStream()
+title: "WritableStream: WritableStream() コンストラクター"
+short-title: WritableStream()
 slug: Web/API/WritableStream/WritableStream
 l10n:
-  sourceCommit: 87a9f73c410c9b9e91300695c8aa4931367243fb
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Streams")}}
@@ -20,15 +21,15 @@ new WritableStream(underlyingSink, queuingStrategy)
 
 - `underlyingSink` {{optional_inline}}
 
-  - : 構築されたストリームのインスタンスの振る舞いを定義するメソッドとプロパティを含むオブジェクト。 `underlyingSink` には以下を含めることができます。
+  - : 構築されたストリームのインスタンスの振る舞いを定義するメソッドとプロパティを含むオブジェクト。 `underlyingSink` には以下を含めることができます。このメソッドに渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} であり、これを使用して中止やエラーの通知を行うことができます。
 
     - `start(controller)` {{optional_inline}}
-      - : これは、オブジェクトが構築されたときにすぐに呼び出されるメソッドです。このメソッドの中身は開発者が定義し、基礎となるシンクにアクセスすることを目的とする必要があります。この処理が非同期で行われる場合は、成功か失敗かを示すプロミスを返すことができます。このメソッドに渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} である。これを使用して、開発者は設定中にストリームを制御することができます。
+      - : これは、オブジェクトが構築されたときにすぐに呼び出されるメソッドです。このメソッドの中身は開発者が定義し、基礎となるシンクにアクセスすることを目的とする必要があります。この処理が非同期で行われる場合は、成功か失敗かを示すプロミスを返すことができます。
     - `write(chunk, controller)` {{optional_inline}}
-      - : このメソッドも開発者によって定義され、新しいデータチャンク （`chunk` 引数で指定されたもの）が基底のシンクに書き込める状態になったときに呼び出されます。このメソッドは、書き込み処理の成功または失敗を示すプロミスを返すことができます。このメソッドに引数として渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} であり、チャンクを追加して書き込みを行う際に、開発者がストリームを制御するために使用することができます。このメソッドは前回の書き込みが成功した後にのみ呼び出され、ストリームが閉じられたり中断されたりした後には呼び出されません（下記を参照）。
+      - : このメソッドも開発者によって定義され、新しいデータチャンク （`chunk` 引数で指定されたもの）が基底のシンクに書き込める状態になったときに呼び出されます。このメソッドは、書き込み処理の成功または失敗を示すプロミスを返すことができます。このメソッドは前回の書き込みが成功した後にのみ呼び出され、ストリームが閉じられたり中断されたりした後には呼び出されません（下記参照）。
     - `close(controller)` {{optional_inline}}
       - : このメソッドも開発者によって定義され、アプリがストリームへのチャンクの書き込みを完了したことを通知すると呼び出されます。中身は、基礎となるシンクへの書き込みを確定し、それへのアクセスを解放するために必要なことを何でも行う必要があります。
-        この処理が非同期である場合、成功または失敗を示すプロミスを返すことができます。このメソッドは、キューに入れられたすべての書き込みが成功した後にのみ呼び出されます。このメソッドに渡される `controller` 引数は {{domxref("WritableStreamDefaultController")}} で、書き込みが終わったときにストリームを制御するために使用することができます。
+        この処理が非同期である場合、成功または失敗を示すプロミスを返すことができます。このメソッドは、キューに入れられたすべての書き込みが成功した後にのみ呼び出されます。
     - `abort(reason)` {{optional_inline}}
       - : このメソッドも開発者によって定義され、アプリが突然ストリームを閉じてエラー状態にしたいことを合図したときに呼び出されます。これは `close()` のように保持されたリソースを整理することができますが、書き込みがキューイングされている場合でも `abort()` が呼び出されます - これらのチャンクは破棄されます。この処理が非同期の場合、成功や失敗のシグナルのためにプロミスを返すことができます。 `reason` 引数には、ストリームが中断された理由を記述する文字列を指定します。
 

From b0987f2e43a765dda11137144f04ac12b4684b18 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 16:54:25 +0900
Subject: [PATCH 192/268] =?UTF-8?q?2023/09/14=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/response/body/index.md | 29 +++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/api/response/body/index.md b/files/ja/web/api/response/body/index.md
index 98cbe7a265aa94..67ec764b9fad63 100644
--- a/files/ja/web/api/response/body/index.md
+++ b/files/ja/web/api/response/body/index.md
@@ -1,22 +1,27 @@
 ---
-title: Response.body
+title: "Response: body プロパティ"
+short-title: body
 slug: Web/API/Response/body
 l10n:
-  sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+  sourceCommit: 84b1729de4f527c8d81e44a38fca70ea4db97922
 ---
 
-{{APIRef("Fetch")}}
+{{APIRef("Fetch API")}}
 
 **`body`** は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本体コンテンツの {{domxref("ReadableStream")}} です。
 
 ## 値
 
-{{domxref("ReadableStream")}}、または [`body`](/ja/docs/Web/API/Response/Response#body) プロパティが null で構築された `Response` オブジェクト、あるいは[本体](/ja/docs/Web/HTTP/Messages#body_2)を持たない実際の [HTTP レスポンス](/ja/docs/Web/HTTP/Messages#http_responses)に対しては [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) です。
+{{domxref("ReadableStream")}}、または `Response` オブジェクトが[構築](/ja/docs/Web/API/Response/Response)時に [`body`](/ja/docs/Web/API/Response/Response#body) プロパティが null であった場合、あるいは [HTTP レスポンス](/ja/docs/Web/HTTP/Messages#http_responses)に[本体](/ja/docs/Web/HTTP/Messages#body_2)がなかった場合には [`null`](/ja/docs/Web/JavaScript/Reference/Operators/null) になります。
+
+ストリームは[読み取り可能なバイトストリーム](/ja/docs/Web/API/Streams_API/Using_readable_byte_streams)で、 {{domxref("ReadableStreamBYOBReader")}} を用いたゼロコピー移譲に対応しています。
 
 > **メモ:** 現在のブラウザーは、本体なしのレスポンス（例えば、 [`HEAD`](/ja/docs/Web/HTTP/Methods/HEAD) リクエストに対するレスポンスや、 [`204 No Content`](/ja/docs/Web/HTTP/Status/204) レスポンス）には `body` プロパティを `null` に設定するという仕様に実際には適合していません。
 
 ## 例
 
+### 画像の複製
+
 [単純なストリームポンプ](https://mdn.github.io/dom-examples/streams/simple-pump/)の例では、画像を読み取り、 `response.body` を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを 2 番目のカスタム読み取り可能なストリームのキューに入れます。画像の同一コピーを効果的に作成します。
 
 ```js
@@ -56,6 +61,22 @@ fetch("./tortoise.png")
   .catch((err) => console.error(err));
 ```
 
+### BYOB リーダーの作成
+
+この例では、 {{domxref("ReadableStreamBYOBReader")}} を使用して本体から {{domxref("ReadableStream.getReader()", "ReadableStream.getReader({mode: 'byob'})")}} を構築します。このリーダーを使用して、レスポンスデータのゼロコピー移譲を実装することができます。
+
+```js
+async function getProducts(url) {
+  const response = await fetch(url);
+  const reader = response.body.getReader({ mode: "byob" });
+  // このレスポンスを読む
+}
+
+getProducts(
+  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
+);
+```
+
 ## 仕様書
 
 {{Specifications}}

From bc502a47c9e66a276e23793b96e77ade5c66bb77 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 17:19:32 +0900
Subject: [PATCH 193/268] =?UTF-8?q?2023/09/06=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/fetch/index.md | 40 ++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/files/ja/web/api/fetch/index.md b/files/ja/web/api/fetch/index.md
index 607bf07cc5fa71..16acf03d6ad17e 100644
--- a/files/ja/web/api/fetch/index.md
+++ b/files/ja/web/api/fetch/index.md
@@ -1,8 +1,9 @@
 ---
-title: fetch()
+title: fetch() グローバル関数
+short-title: fetch()
 slug: Web/API/fetch
 l10n:
-  sourceCommit: 4e233c16c6f0d347972c5c762f5b836318a46124
+  sourceCommit: bb75692ff9b82320169ed3f27fcc5136c86b8d21
 ---
 
 {{APIRef("Fetch API")}}
@@ -40,14 +41,22 @@ fetch(resource, options)
   - : リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。
 
     - `method`
-      - : リクエストするメソッド、`GET`、`POST` など。なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。
+      - : リクエストするメソッド、`"GET"`、`"POST"` など。既定値は `"GET"` です。
+        なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。
         (この動作は Firefox 65 で修正されました。 [Firefox バグ 1508661](https://bugzil.la/1508661) を参照)
+        [RFC 9110](https://www.rfc-editor.org/rfc/rfc9110#name-overview) のメソッドのいずれかと大文字小文字を区別せずに照合する文字列は、自動的に大文字になります。
+        （`PATCH` のような）カスタムメソッドを使用したい場合は、自分で大文字にする必要があります。
     - `headers`
-      - : リクエストに追加したいヘッダーで、 {{domxref("Headers")}} オブジェクトまたは {{jsxref("String")}} 値を持つオブジェクトリテラルで指定してください。なお、[一部の名前は禁止されています](/ja/docs/Glossary/Forbidden_header_name)。
+
+      - : リクエストに追加したいヘッダーで、 {{domxref("Headers")}} オブジェクトまたは {{jsxref("String")}} 値を持つオブジェクトリテラルで指定してください。
+        なお、[一部の名前は禁止されています](/ja/docs/Glossary/Forbidden_header_name)。
+
+        > **メモ:** HTTP の [`Authorization`](/ja/docs/Web/HTTP/Headers/Authorization) ヘッダーがリクエストに追加される場合がありますが、そのリクエストがオリジン間でリダイレクトされた場合は削除されます。
+
     - `body`
       - : リクエストに追加したい本体です。これには {{domxref("Blob")}}, {{jsxref("ArrayBuffer")}}, {{jsxref("TypedArray")}}, {{jsxref("DataView")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, 文字列オブジェクトまたはリテラル、 {{domxref("ReadableStream")}} オブジェクトなどが使用できます。これは最新の利用可能状況で、まだ実験的なものです。[互換性情報](/ja/docs/Web/API/Request#ブラウザーの互換性)を調べて、あなたがこれを使用できるかどうかを確認してください。メソッドが `GET` や `HEAD` の場合は使用できないので注意してください。
     - `mode`
-      - : リクエストで使用するモードです。例: `cors`, `no-cors`, `same-origin`
+      - : リクエストで使用する[モード](/ja/docs/Web/API/Request/mode)です。例えば `cors`、`no-cors`、`same-origin` などです。
     - `credentials`
 
       - : ブラウザーが資格情報を使用して何を行うか（[クッキー](/ja/docs/Web/HTTP/Cookies)、 [HTTP 認証](/ja/docs/Web/HTTP/Authentication)項目、 TLS クライアント証明書）を制御します。以下の文字列のうちの何れかでなければなりません。
@@ -68,10 +77,13 @@ fetch(resource, options)
 
       - : リダイレクトレスポンスを取り扱う方法を示します。
 
-        - `follow`: 自動的にリダイレクトに従います。他の方法が指定されていない限り、リダイレクトモードは `follow` に設定されます。
-        - `error`: リダイレクトが発生した場合は、エラーで中止します。
-        - `manual`: 呼び出し側は、レスポンスを別のコンテキストで処理する予定です。
-          詳しくは [WHATWG fetch standard](https://fetch.spec.whatwg.org/#requests) を参照してください。
+        - `follow`
+          - : 自動的にリダイレクトを行います。他の方法が指定されていない限り、リダイレクトモードは `follow` に設定されます。
+        - `error`
+          - : リダイレクトが発生した場合は、エラーで中止します。
+        - `manual`
+          - : 呼び出し側は、レスポンスを別のコンテキストで処理する予定です。
+            詳しくは [WHATWG fetch standard](https://fetch.spec.whatwg.org/#concept-request-redirect-mode) を参照してください。
 
     - `referrer`
       - : 文字列で、リクエストのリファラーを指定します。これは同じオリジンの URL、 `about:client`、空文字列のいずれかを取ることができます。
@@ -80,9 +92,17 @@ fetch(resource, options)
     - `integrity`
       - : リクエストの[サブリソース完全性](/ja/docs/Web/Security/Subresource_Integrity)の値を保持します（`sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=` など）。
     - `keepalive`
-      - : `keepalive` オプションは、ページの終了後のリクエストを許可するのに使用されます。`keepalive` フラグつきのフェッチは {{domxref("Navigator.sendBeacon()")}} API の置き換えです。
+      - : `keepalive` オプションは、ページの終了後のリクエストを許可するのに使用されます。 `keepalive` フラグつきのフェッチは {{domxref("Navigator.sendBeacon()")}} API の置き換えです。
     - `signal`
       - : {{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由でフェッチリクエストと通信したり望む場合には中止したりできます。
+    - `priority`
+      - : 同じ種類の他のリクエストに対する、この読み込みリクエストの優先度を指定します。以下の文字列のいずれかでなければなりません。
+        - `high`
+          - : 同じ種類の他のリクエストに対する優先度の高いフェッチリクエスト。
+        - `low`
+          - : 同じ種類の他のリクエストと相対した、優先度の低いフェッチリクエスト。
+        - `auto`
+          - : 同じ種類の他のリクエストに対するフェッチリクエストの優先度を自動的に決定します（既定値）。
 
 ### 返値
 

From b44051d746b0702445eece0fe6a9ec6f97598292 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 27 Jul 2023 22:53:47 +0900
Subject: [PATCH 194/268] =?UTF-8?q?2023/07/03=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/event/index.md | 47 ++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/files/ja/web/api/event/index.md b/files/ja/web/api/event/index.md
index 5b33186cdb109d..64b1a47d43d562 100644
--- a/files/ja/web/api/event/index.md
+++ b/files/ja/web/api/event/index.md
@@ -1,6 +1,8 @@
 ---
 title: Event
 slug: Web/API/Event
+l10n:
+  sourceCommit: 0a3eba62842757c71fbd39060f00a3159b7fcdc5
 ---
 
 {{APIRef("DOM")}}
@@ -24,7 +26,7 @@ slug: Web/API/Event
 なお、すべてのイベントインターフェイスは、名称の末尾が "Event" になっています。
 
 - {{domxref("AnimationEvent")}}
-- {{domxref("AudioProcessingEvent")}}
+- {{domxref("AudioProcessingEvent")}} {{Deprecated_Inline}}
 - {{domxref("BeforeUnloadEvent")}}
 - {{domxref("BlobEvent")}}
 - {{domxref("ClipboardEvent")}}
@@ -33,11 +35,11 @@ slug: Web/API/Event
 - {{domxref("CustomEvent")}}
 - {{domxref("DeviceMotionEvent")}}
 - {{domxref("DeviceOrientationEvent")}}
-- {{domxref("DeviceProximityEvent")}}
 - {{domxref("DragEvent")}}
 - {{domxref("ErrorEvent")}}
 - {{domxref("FetchEvent")}}
 - {{domxref("FocusEvent")}}
+- {{domxref("FontFaceSetLoadEvent")}}
 - {{domxref("FormDataEvent")}}
 - {{domxref("GamepadEvent")}}
 - {{domxref("HashChangeEvent")}}
@@ -45,10 +47,10 @@ slug: Web/API/Event
 - {{domxref("IDBVersionChangeEvent")}}
 - {{domxref("InputEvent")}}
 - {{domxref("KeyboardEvent")}}
-- {{domxref("MediaStreamEvent")}}
+- {{domxref("MediaStreamEvent")}} {{Deprecated_Inline}}
 - {{domxref("MessageEvent")}}
 - {{domxref("MouseEvent")}}
-- {{domxref("MutationEvent")}}
+- {{domxref("MutationEvent")}} {{Deprecated_Inline}}
 - {{domxref("OfflineAudioCompletionEvent")}}
 - {{domxref("PageTransitionEvent")}}
 - {{domxref("PaymentRequestUpdateEvent")}}
@@ -59,13 +61,12 @@ slug: Web/API/Event
 - {{domxref("RTCPeerConnectionIceEvent")}}
 - {{domxref("StorageEvent")}}
 - {{domxref("SubmitEvent")}}
-- {{domxref("SVGEvent")}}
+- {{domxref("SVGEvent")}} {{Deprecated_Inline}}
 - {{domxref("TimeEvent")}}
 - {{domxref("TouchEvent")}}
 - {{domxref("TrackEvent")}}
 - {{domxref("TransitionEvent")}}
 - {{domxref("UIEvent")}}
-- {{domxref("UserProximityEvent")}}
 - {{domxref("WebGLContextEvent")}}
 - {{domxref("WheelEvent")}}
 
@@ -74,45 +75,43 @@ slug: Web/API/Event
 - {{domxref("Event.Event", "Event()")}}
   - : `Event` オブジェクトを生成して、呼び出し元に返します。
 
-## プロパティ
+## インスタンスプロパティ
 
-- {{domxref("Event.bubbles")}} {{readonlyinline}}
+- {{domxref("Event.bubbles")}} {{ReadOnlyInline}}
   - : 論理値で、イベントが DOM を通してバブリングするかどうかを示します。
-- {{domxref("Event.cancelable")}} {{readonlyinline}}
+- {{domxref("Event.cancelable")}} {{ReadOnlyInline}}
   - : 論理値で、イベントがキャンセル可能かを示します。
-- {{domxref("Event.composed")}} {{readonlyinline}}
+- {{domxref("Event.composed")}} {{ReadOnlyInline}}
   - : 論理値で、シャドウ DOM と 通常の DOM の間の境界を越えてイベントがバブリングできるかどうかを示します。
-- {{domxref("Event.currentTarget")}} {{readonlyinline}}
+- {{domxref("Event.currentTarget")}} {{ReadOnlyInline}}
   - : イベントが現在登録されているターゲットへの参照。これは、現在イベントの送信先として予定されているオブジェクトです。これは*再ターゲティング*によって、途中で変更される可能性があります。
-- {{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+- {{domxref("Event.defaultPrevented")}} {{ReadOnlyInline}}
   - : このイベントをキャンセルするために {{domxref("event.preventDefault()")}} が呼び出されたかどうかを示します。
-- {{domxref("Event.eventPhase")}} {{readonlyinline}}
+- {{domxref("Event.eventPhase")}} {{ReadOnlyInline}}
   - : イベントフローのどのフェーズで処理されているかを示します。 `NONE`, `CAPTURING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE` のうちのいずれかの数値です。
 - {{domxref("Event.srcElement")}} {{non-standard_inline}}
   - : {{domxref("Event.target")}} の、(古いバージョンの Microsoft Internet Explorer 由来の) 標準外の別名であり、ウェブの互換性の目的で一部の他のブラウザーでも対応が始められています。
-- {{domxref("Event.target")}} {{readonlyinline}}
+- {{domxref("Event.target")}} {{ReadOnlyInline}}
   - : イベントが最初に送出されたターゲットへの参照。
-- {{domxref("Event.timeStamp")}} {{readonlyinline}}
+- {{domxref("Event.timeStamp")}} {{ReadOnlyInline}}
   - : イベントが生成された時刻をミリ秒単位で示します。仕様書ではこの値を元期からの経過時間としていますが、実際のブラウザーでの定義は様々です。また、値を {{domxref("DOMHighResTimeStamp")}} に変更する作業が進行中です。
-- {{domxref("Event.type")}} {{readonlyinline}}
-  - : イベントの種類を識別する名前で、大文字小文字を区別しません。
+- {{domxref("Event.type")}} {{ReadOnlyInline}}
+  - : イベントの種類を識別する名前です。
 
 ### 古い標準外のプロパティ
 
 - {{domxref("Event.cancelBubble")}} {{deprecated_inline}}
   - : {{domxref("Event.stopPropagation()")}} の過去の別名であり、そちらを使用してください。イベントハンドラーから戻る前に値 `true` を設定すると、イベントの伝播を抑制します。
-- {{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+- {{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{ReadOnlyInline}}
   - : イベントの明確な最初のターゲットです。
-- {{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+- {{domxref("Event.originalTarget")}} {{non-standard_inline}} {{ReadOnlyInline}}
   - : イベントの再ターゲティング前の最初のターゲットです。
 - {{domxref("Event.returnValue")}} {{deprecated_inline}}
   - : 過去のプロパティで、既存のサイトが動作するように対応されているものです。代わりに {{domxref("Event.preventDefault()")}} および {{domxref("Event.defaultPrevented")}} を使用してください。
-- {{domxref("Event.composed", "Event.scoped")}} {{readonlyinline}} {{deprecated_inline}}
+- {{domxref("Event.composed", "Event.scoped")}} {{ReadOnlyInline}} {{deprecated_inline}}
   - : 論理値で、指定されたイベントがシャドウルートを通過して標準 DOM までバブリングするかどうかを示します。代わりに {{domxref("Event.composed", "composed")}} を使用してください。
-- {{domxref("Event.srcElement")}} {{readonlyinline}} {{deprecated_inline}}
-  - : （Microsoft Internet Explorer の古いバージョンからの） {{domxref("Event.target")}} の別名です。代わりに {{domxref("Event.target")}} を使用してください。
 
-## メソッド
+## インスタンスメソッド
 
 - {{domxref("Event.composedPath()")}}
 
@@ -141,5 +140,5 @@ slug: Web/API/Event
 ## 関連情報
 
 - 利用できるイベントの種類: [イベントリファレンス](/ja/docs/Web/Events)
-- [イベントターゲットの比較](/ja/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs `currentTarget` vs `relatedTarget` vs `originalTarget`)
+- [イベントターゲットの比較](/ja/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs. `currentTarget` vs. `relatedTarget` vs. `originalTarget`)
 - [カスタムイベントの生成と発行](/ja/docs/Web/Events/Creating_and_triggering_events)

From 608acb15770b56fe8b51c66306b221a929218825 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 27 Jul 2023 22:49:27 +0900
Subject: [PATCH 195/268] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/event/stoppropagation/index.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/api/event/stoppropagation/index.md b/files/ja/web/api/event/stoppropagation/index.md
index aca09ee543361f..072a5dad133bb0 100644
--- a/files/ja/web/api/event/stoppropagation/index.md
+++ b/files/ja/web/api/event/stoppropagation/index.md
@@ -1,16 +1,19 @@
 ---
-title: Event.stopPropagation()
+title: "Event: stopPropagation() メソッド"
+short-title: stopPropagation()
 slug: Web/API/Event/stopPropagation
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
 ---
 
 {{APIRef("DOM")}}
 
-**`stopPropagation()`** は {{domxref("Event")}} インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。しかし、これは既定の動作の発生を妨げるものではありません。例えば、リンクのクリックはまだ処理されます。これらの動作を止めたい場合は、{{domxref("Event.preventDefault", "preventDefault()")}} メソッドを参照してください。また、他のイベントハンドラーへの即時伝搬も防げません。それらを止めたい場合は、{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}を参照してください。
+**`stopPropagation()`** は {{domxref("Event")}} インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。しかし、これは既定の動作の発生を妨げるものではありません。例えば、リンクのクリックはまだ処理されます。これらの動作を止めたい場合は、{{domxref("Event.preventDefault", "preventDefault()")}} メソッドを参照してください。また、現在の要素における他のイベントハンドラーへの伝搬も防げません。それらを止めたい場合は、{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}　を参照してください。
 
 ## 構文
 
-```js
-event.stopPropagation();
+```js-nolint
+event.stopPropagation()
 ```
 
 ### 引数
@@ -24,6 +27,7 @@ event.stopPropagation();
 ## 例
 
 [イベントの伝播](/ja/docs/Web/API/Document_Object_Model/Examples#example_5_event_propagation) を参照してください。
+{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} の例も参照してください。
 
 ## 仕様書
 

From f73fdb7928ba7320a22900c51a4c3f41755739ac Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 27 Jul 2023 09:39:59 +0900
Subject: [PATCH 196/268] =?UTF-8?q?2023/07/20=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/api/event/preventdefault/index.md  | 65 +++++++++----------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/files/ja/web/api/event/preventdefault/index.md b/files/ja/web/api/event/preventdefault/index.md
index fd7e712d0b56b8..0a456f9300dda6 100644
--- a/files/ja/web/api/event/preventdefault/index.md
+++ b/files/ja/web/api/event/preventdefault/index.md
@@ -1,6 +1,9 @@
 ---
-title: Event.preventDefault()
+title: "Event: preventDefault() メソッド"
+short-title: preventDefault()
 slug: Web/API/Event/preventDefault
+l10n:
+  sourceCommit: 32b07aa5b6ac4799a88e7b87a4d8333643ab6427
 ---
 
 {{apiref("DOM")}}
@@ -13,8 +16,8 @@ slug: Web/API/Event/preventDefault
 
 ## 構文
 
-```js
-event.preventDefault();
+```js-nolint
+event.preventDefault()
 ```
 
 ## 例
@@ -26,15 +29,15 @@ event.preventDefault();
 #### JavaScript
 
 ```js
-document.querySelector("#id-checkbox").addEventListener(
-  "click",
-  function (event) {
-    document.getElementById("output-box").innerHTML +=
-      "ごめん！ <code>preventDefault()</code> がチェックさせません！<br>";
-    event.preventDefault();
-  },
-  false,
-);
+const checkbox = document.querySelector("#id-checkbox");
+
+checkbox.addEventListener("click", checkboxClick, false);
+
+function checkboxClick(event) {
+  let warn = "preventDefault() がこのチェックを妨害しています。<br>";
+  document.getElementById("output-box").innerHTML += warn;
+  event.preventDefault();
+}
 ```
 
 #### HTML
@@ -60,14 +63,15 @@ document.querySelector("#id-checkbox").addEventListener(
 
 #### HTML
 
-こちらがフォームです。
+下の HTML フォームはユーザーの入力をキャプチャします。
+キー入力にしか興味がないので、`autocomplete` を無効にして、ブラウザーがキャッシュした値で入力フィールドを埋めるのを防いでいます。
 
 ```html
 <div class="container">
   <p>名前を小文字のみで入力してください。</p>
 
   <form>
-    <input type="text" id="my-textbox" />
+    <input type="text" id="my-textbox" autocomplete="off" />
   </form>
 </div>
 ```
@@ -89,29 +93,24 @@ document.querySelector("#id-checkbox").addEventListener(
 
 #### JavaScript
 
-そして、こちらがその仕事を行う JavaScript コードです。まず、{{domxref("Element/keypress_event", "keypress")}} イベントを待ち受けします。
+そして、こちらがその仕事を行う JavaScript コードです。まず、{{domxref("Element/keydown_event", "keydown")}} イベントを待ち受けします。
 
 ```js
-var myTextbox = document.getElementById("my-textbox");
-myTextbox.addEventListener("keypress", checkName, false);
+const myTextbox = document.getElementById("my-textbox");
+myTextbox.addEventListener("keydown", checkName, false);
 ```
 
 `checkName()` 関数は押されたキーを調べ、それを許可するかどうかを決定します。
 
 ```js
 function checkName(evt) {
-  var charCode = evt.charCode;
-  if (charCode != 0) {
-    if (charCode < 97 || charCode > 122) {
-      evt.preventDefault();
-      displayWarning(
-        "小文字のみを使用してください。" +
-          "\n" +
-          "charCode: " +
-          charCode +
-          "\n",
-      );
-    }
+  const key = evt.key;
+  const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
+  if (!lowerCaseAlphabet.includes(key)) {
+    evt.preventDefault();
+    displayWarning(
+      "小文字のみを使用してください。\n" + `押されたキー: ${key}\n`,
+    );
   }
 }
 ```
@@ -119,21 +118,21 @@ function checkName(evt) {
 `displayWarning()` 関数は、問題発生の通知を表示します。これはエレガントな関数ではありませんが、この例の目的には十分です。
 
 ```js
-var warningTimeout;
-var warningBox = document.createElement("div");
+let warningTimeout;
+const warningBox = document.createElement("div");
 warningBox.className = "warning";
 
 function displayWarning(msg) {
   warningBox.innerHTML = msg;
 
   if (document.body.contains(warningBox)) {
-    window.clearTimeout(warningTimeout);
+    clearTimeout(warningTimeout);
   } else {
     // insert warningBox after myTextbox
     myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
   }
 
-  warningTimeout = window.setTimeout(function () {
+  warningTimeout = setTimeout(() => {
     warningBox.parentNode.removeChild(warningBox);
     warningTimeout = -1;
   }, 2000);

From ec1f983ced02e333bccd8dff85f02b4970b93761 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 27 Jul 2023 22:45:04 +0900
Subject: [PATCH 197/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../event/stopimmediatepropagation/index.md   | 107 +++++++++++++++++-
 1 file changed, 104 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/api/event/stopimmediatepropagation/index.md b/files/ja/web/api/event/stopimmediatepropagation/index.md
index d9b7243c37696e..3666be7bfdc8c9 100644
--- a/files/ja/web/api/event/stopimmediatepropagation/index.md
+++ b/files/ja/web/api/event/stopimmediatepropagation/index.md
@@ -1,20 +1,121 @@
 ---
-title: Event.stopImmediatePropagation()
+title: "Event: stopImmediatePropagation() メソッド"
+short-title: stopImmediatePropagation()
 slug: Web/API/Event/stopImmediatePropagation
+l10n:
+  sourceCommit: 32b07aa5b6ac4799a88e7b87a4d8333643ab6427
 ---
 
 {{APIRef("DOM")}}
 
 **`stopImmediatePropagation()`** は {{domxref("Event")}} インターフェイスのメソッドで、呼び出されている同じイベントの他のリスナーを抑止します。
 
-同じイベントタイプで複数のリスナーが同じ要素に装着されている場合、追加された順番に呼び出されます。もし、そのような呼び出しの最中に `stopImmediatePropagation()` が呼び出された場合、残りのリスナーは呼び出されなくなります。
+同じ要素で、同じ種類のイベントに複数のリスナーが装着されている場合、追加された順番に呼び出されます。もし、そのような呼び出しの最中に `stopImmediatePropagation()` が呼び出された場合、残りのリスナーは呼び出されなくなります。
 
 ## 構文
 
+```js-nolint
+event.stopImmediatePropagation()
+```
+
+## 例
+
+### イベントを停止する関数の比較
+
+下の例では、3 つの入れ子になった div の中に 3 つのボタンがあります。それぞれのボタンにはクリックイベント用に登録された 3 つのイベントリスナーがあり、それぞれの div にもクリックイベント用に登録されたイベントリスナーがあります。
+
+- 一番上のボタンは、通常のイベント伝播が可能です。
+- 中央のボタンは、最初のイベントハンドラーで `stopPropagation()` を呼び出します。
+- 一番下のボタンは、最初のイベントハンドラーで `stopImmediatePropagation()` を呼び出します。
+
+#### HTML
+
+```html
+<h2>ボタンをクリックしてください</h2>
+<div>
+  外側の div<br />
+  <div>
+    中央の div<br />
+    <div>
+      内側の div<br />
+      <button>伝播可能</button><br />
+      <button id="stopPropagation">伝播を停止</button><br />
+      <button id="stopImmediatePropagation">直ちに伝播を停止</button>
+    </div>
+  </div>
+</div>
+<pre></pre>
+```
+
+#### CSS
+
+```css
+div {
+  display: inline-block;
+  padding: 10px;
+  background-color: #fff;
+  border: 2px solid #000;
+  margin: 10px;
+}
+
+button {
+  width: 100px;
+  color: #008;
+  padding: 5px;
+  background-color: #fff;
+  border: 2px solid #000;
+  border-radius: 30px;
+  margin: 5px;
+}
+```
+
+#### JavaScript
+
 ```js
-event.stopImmediatePropagation();
+const outElem = document.querySelector("pre");
+
+/* Clear the output */
+document.addEventListener(
+  "click",
+  () => {
+    outElem.textContent = "";
+  },
+  true,
+);
+
+/* Set event listeners for the buttons */
+document.querySelectorAll("button").forEach((elem) => {
+  for (let i = 1; i <= 3; i++) {
+    elem.addEventListener("click", (evt) => {
+      /* 最初のイベントハンドラーですべての伝播を停止 */
+      if (i === 1 && elem.id) {
+        evt[elem.id]();
+        outElem.textContent += `イベント 1 のイベントハンドラーが ${elem.id}() を呼び出しました\n`;
+      }
+
+      outElem.textContent += `"${elem.textContent}" ボタンのクリックイベント ${i} が処理されました\n`;
+    });
+  }
+});
+
+/* それぞれの div にイベントリスナーを設定 */
+document
+  .querySelectorAll("div")
+  .forEach((elem) =>
+    elem.addEventListener(
+      "click",
+      (evt) =>
+        (outElem.textContent += `"${elem.firstChild.data.trim()}" でクリックイベントが処理されました\n`),
+    ),
+  );
 ```
 
+#### 結果
+
+それぞれのクリックイベントハンドラーは、呼び出されるとステータスメッセージを表示します。中央のボタンを押すと、`stopPropagation()` によって、そのボタンがクリックされたときに登録されたイベントハンドラはすべて実行されますが、その後に続くはずの div のクリックイベントハンドラーは実行されないことがわかります。しかし、一番下のボタンを押すと、`stopImmediatePropagation()` はそのイベント以降の伝播をすべて停止します。
+
+{{ EmbedLiveSample("Comparing event-stopping functions", 500, 550) }}
+
 ## 仕様書
 
 {{Specifications}}

From 6ffaff3c067fdc0b8a5b598d49ffca46c4c95126 Mon Sep 17 00:00:00 2001
From: manjuu-eater <88940383+manjuu-eater@users.noreply.github.com>
Date: Sun, 24 Sep 2023 18:10:32 +0900
Subject: [PATCH 198/268] =?UTF-8?q?=E8=A8=B3=E3=81=95=E3=82=8C=E3=81=A6?=
 =?UTF-8?q?=E3=81=84=E3=81=9F"in-place"=E3=82=92=E8=A8=B3=E8=AA=9E?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E4=BD=B5=E8=A8=98=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/array/reverse/index.md           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md
index d5bf92eefb4c79..39f5a599b1e5bc 100644
--- a/files/ja/web/javascript/reference/global_objects/array/reverse/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/reverse/index.md
@@ -7,7 +7,7 @@ l10n:
 
 {{JSRef}}
 
-**`reverse()`** メソッドは、配列の要素を[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。
+**`reverse()`** メソッドは、配列の要素を [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。
 
 {{EmbedInteractiveExample("pages/js/array-reverse.html")}}
 
@@ -19,7 +19,7 @@ reverse();
 
 ### 返値
 
-元の配列を反転されたものへの参照です。なお、配列は[その場](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)で反転され、コピーは作られません。
+元の配列を反転されたものへの参照です。なお、配列は [in-place(その場)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で反転され、コピーは作られません。
 
 ## 解説
 

From 201c0c04c1ade7c598b66ad1fe580502807d499e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 31 May 2023 00:01:03 +0900
Subject: [PATCH 199/268] =?UTF-8?q?2023/02/20=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/htmldlistelement/index.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/files/ja/web/api/htmldlistelement/index.md b/files/ja/web/api/htmldlistelement/index.md
index 2d1c62e3bec3f1..e6f80523fee900 100644
--- a/files/ja/web/api/htmldlistelement/index.md
+++ b/files/ja/web/api/htmldlistelement/index.md
@@ -1,24 +1,26 @@
 ---
 title: HTMLDListElement
 slug: Web/API/HTMLDListElement
+l10n:
+  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
 ---
 
 {{ApiRef("HTML DOM")}}
 
-**`HTMLDListElement`** インターフェイスは、（継承によって使用できる通常の {{domxref("HTMLElement")}} インターフェイスのものに加えて）定義リスト要素 ({{HtmlElement("dl")}}) を操作するための特別なプロパティを提供します。
+**`HTMLDListElement`** インターフェイスは、（継承によって使用できる通常の {{domxref("HTMLElement")}} インターフェイスのものの他に）定義リスト要素 ({{HtmlElement("dl")}}) を操作するための特別なプロパティを提供します。
 
 {{InheritanceDiagram}}
 
-## プロパティ
+## インスタンスプロパティ
 
-_親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
+_親である {{domxref("HTMLElement")}} から継承したプロパティがあります。_
 
 - {{domxref("HTMLDListElement.compact")}} {{deprecated_inline}}
   - : 論理値で、リスト項目間の間隔を縮小することを示します。
 
-## メソッド
+## インスタンスメソッド
 
-_固有のメソッドはありません。親である {{domxref("HTMLElement")}} からメソッドを継承しています。_
+_固有のメソッドはありません。親である {{domxref("HTMLElement")}} から継承したメソッドがあります。_
 
 ## 仕様書
 

From 5336f988fb9e3753ed4e95b088e12fff057f34f9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 18:23:24 +0900
Subject: [PATCH 200/268] =?UTF-8?q?Web/API/Web=5Fcomponents=20=E3=81=B8?=
 =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/mozilla/firefox/releases/52/index.md                 | 2 +-
 files/ja/mozilla/firefox/releases/63/index.md                 | 2 +-
 .../ja/orphaned/web/web_components/status_in_firefox/index.md | 2 +-
 files/ja/web/api/element/slot/index.md                        | 2 +-
 files/ja/web/api/html_dom_api/index.md                        | 4 ++--
 files/ja/web/css/_colon_defined/index.md                      | 2 +-
 files/ja/web/css/_colon_host/index.md                         | 2 +-
 files/ja/web/css/_colon_host_function/index.md                | 2 +-
 files/ja/web/css/_colon_is/index.md                           | 2 +-
 files/ja/web/css/_colon_where/index.md                        | 2 +-
 files/ja/web/css/_doublecolon_slotted/index.md                | 2 +-
 11 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/files/ja/mozilla/firefox/releases/52/index.md b/files/ja/mozilla/firefox/releases/52/index.md
index 8fa06766651925..fe4c44ad6e83d0 100644
--- a/files/ja/mozilla/firefox/releases/52/index.md
+++ b/files/ja/mozilla/firefox/releases/52/index.md
@@ -108,7 +108,7 @@ Firefox 52 は、米国時間 2017 年 3 月 7 日にリリースされました
 - `loadstart` および `loadend` イベントが {{htmlelement("img")}} 要素で発生するようになりました ([Firefox バグ 1264769](https://bugzil.la/1264769)。
 - [Notifications API](/ja/docs/Web/API/Notifications_API) の {{domxref("Notification.requireInteraction")}} を実装しました ([Firefox バグ 862395](https://bugzil.la/862395))。
 - {{domxref("Window.open()")}} メソッドで、`noopener` [ウィンドウ機能特性](/ja/docs/Web/API/Window/open#window_functionality_features) が使用可能になりました ([Firefox バグ 1267339](https://bugzil.la/1267339))。これは、`rel="noopener"` [リンクタイプ](/ja/docs/Web/HTML/Link_types) の機能を反映します。
-- [Web Components API](/ja/docs/Web/Web_Components) の {{domxref("CustomElementRegistry.get()")}} メソッドを実装しました ([Firefox バグ 1275838](https://bugzil.la/1275838))。
+- [Web Components API](/ja/docs/Web/API/Web_components) の {{domxref("CustomElementRegistry.get()")}} メソッドを実装しました ([Firefox バグ 1275838](https://bugzil.la/1275838))。
 - [Pointer Event](/ja/docs/Web/API/Pointer_events) の {{domxref("PointerEvent.width","width")}} および {{domxref("PointerEvent.height","height")}} プロパティのデフォルト値が 1 になりました ([Firefox バグ 1304315](https://bugzil.la/1304315))。
 - [最新の仕様書](https://wicg.github.io/entries-api/) における変更点を含むように、[File and Directory Entries API](/ja/docs/Web/API/File_and_Directory_Entries_API) を更新しました (詳しくは [Firefox バグ 1284987](https://bugzil.la/1284987) をご覧ください)。
 - {{domxref("UIEvent")}} で定義されていた {{domxref("Event.cancelBubble", "cancelBubble")}} プロパティが、 {{domxref("Event")}} インターフェイスで定義するようになりました。詳しくは [Firefox バグ 1298970](https://bugzil.la/1298970) をご覧ください。
diff --git a/files/ja/mozilla/firefox/releases/63/index.md b/files/ja/mozilla/firefox/releases/63/index.md
index 8bb83c0cf4603b..b6c30738ffedd3 100644
--- a/files/ja/mozilla/firefox/releases/63/index.md
+++ b/files/ja/mozilla/firefox/releases/63/index.md
@@ -64,7 +64,7 @@ _変更なし。_
 
 #### 新規 API
 
-- Shadow DOM ([Firefox バグ 1471947](https://bugzil.la/1471947)) および Custom Elements ([Firefox バグ 1471948](https://bugzil.la/1471948)) API をデフォルトで有効にしました。詳しくは [Web components](/ja/docs/Web/Web_Components) をご覧ください。
+- Shadow DOM ([Firefox バグ 1471947](https://bugzil.la/1471947)) および Custom Elements ([Firefox バグ 1471948](https://bugzil.la/1471948)) API をデフォルトで有効にしました。詳しくは [Web components](/ja/docs/Web/API/Web_components) をご覧ください。
 - {{domxref("Media_Capabilities_API", "Media Capabilities API", "", "1")}} を実装しました ([Firefox バグ 1409664](https://bugzil.la/1409664))。
 - {{domxref("Clipboard", "Async Clipboard API", "", "1")}} を実装して、デフォルトですべてのチャンネルで有効化しました。Chrome および Firefox では現在 {{domxref("Clipboard.writeText", "writeText()")}} および {{domxref("Clipboard.readText", "readText()")}} メソッドのみ実装しています。ただし、`readText()` が [ブラウザー拡張機能](/ja/docs/Mozilla/Add-ons/WebExtensions) に限り使用可能であることが Chrome とは異なります。
 - {{domxref("SecurityPolicyViolationEvent")}} インターフェイスをサポートしました。{{HTTPHeader("Content-Security-Policy")}} に違反したときにイベントを送信できます ([Firefox バグ 1472661](https://bugzil.la/1472661))。
diff --git a/files/ja/orphaned/web/web_components/status_in_firefox/index.md b/files/ja/orphaned/web/web_components/status_in_firefox/index.md
index e9d163595651f1..50c307316368c9 100644
--- a/files/ja/orphaned/web/web_components/status_in_firefox/index.md
+++ b/files/ja/orphaned/web/web_components/status_in_firefox/index.md
@@ -5,6 +5,6 @@ slug: orphaned/Web/Web_Components/Status_in_Firefox
 
 {{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}
 
-[Web Components](/docs/Web/Web_Components) は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている [Gecko](/docs/Mozilla/Gecko) での実装状況の一覧を示します。
+[Web Components](/docs/Web/API/Web_components) は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている [Gecko](/docs/Mozilla/Gecko) での実装状況の一覧を示します。
 
 <div class="blob instapaper_body" id="readme"><article class="markdown-body entry-content"><h2 id="ネイティブサポート">ネイティブサポート</h2><p>Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:</p><ul><li>{{HTMLElement("template")}}</li></ul><h2 id="今後実装予定の機能">今後実装予定の機能</h2><ul><li>新しい同意に基づいた <a href="/docs/Web/API/Web_components/Shadow_DOM">Shadow DOM</a> の実装は、2016 年 Q1 にリリース予定です。<a href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Anne</a> と <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">Wilson</a> のブログ投稿に詳細が記述されています。しかし、まだ仕様について <a href="https://github.com/w3c/webcomponents/labels/shadow-dom">多くの議論や課題</a> があり、すべてのブラウザへの実装は将来となるでしょう。</li><li><strong>Custom elements</strong> は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。<ul><li>古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、{{domxref("Element.attachShadow()")}} に対して {{domxref("Element.createShadowRoot()")}})、しかし、Firefox ではネイティブでは動作しないでしょう。</li></ul></li><li>これらの問題について、<a href="https://github.com/w3c/WebPlatformWG/blob/gh-pages/meetings/29janWC.md">2016 年 1 月の会議</a> でベンダが議論するでしょう。</li></ul><h2 id="放棄された機能">放棄された機能</h2><p>これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。</p><ul><li><strong>HTML imports</strong> の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。[Firefox バグ 568953](https://bugzil.la/568953) をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。</li></ul><h2 id="Firefox_でポリフィルを使用する">Firefox でポリフィルを使用する</h2><p>Firefox でポリフィルを使用する際に考慮すべき注意事項があります:</p><ul><li><code>about:config</code> の <code>dom.webcomponents.enabled</code> 設定を <code>true</code> に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。</li><li><a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a> ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を <strong>サポートした</strong> 環境と異なる見た目になることに注意してください。</li><li>Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。</li><li>Shadow DOM を使用する必要がない場合、webcomponents.js ポリフィルの <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents-lite.js</a> バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。</li></ul></article></div>
diff --git a/files/ja/web/api/element/slot/index.md b/files/ja/web/api/element/slot/index.md
index f839c3f220e383..0ff723c19b9510 100644
--- a/files/ja/web/api/element/slot/index.md
+++ b/files/ja/web/api/element/slot/index.md
@@ -10,7 +10,7 @@ l10n:
 
 **`slot`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素が挿入されたシャドウ DOM のスロットの名前を返します。
 
-スロットは[ウェブコンポーネント](/ja/docs/Web/Web_Components)内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます（詳しくは、[テンプレートとスロットの使用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)をご覧ください）。
+スロットは[ウェブコンポーネント](/ja/docs/Web/API/Web_components)内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます（詳しくは、[テンプレートとスロットの使用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)をご覧ください）。
 
 ## 値
 
diff --git a/files/ja/web/api/html_dom_api/index.md b/files/ja/web/api/html_dom_api/index.md
index f807ac5c87f904..8e41c9e6a7c7e9 100644
--- a/files/ja/web/api/html_dom_api/index.md
+++ b/files/ja/web/api/html_dom_api/index.md
@@ -17,7 +17,7 @@ HTML DOM API に含まれる機能領域には、以下のようなものがあ
 - HTML のメディア要素 ({{HTMLElement("audio")}} と {{HTMLElement("video")}} に接続されたメディアの管理。
 - ウェブページ上のコンテンツのドラッグ＆ドロップ。
 - ブラウザーのナビゲーション履歴へのアクセス。
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)、{{DOMxRef("Web_Storage_API", "ウェブストレージ", "", "1")}}、{{DOMxRef("Web_Workers_API", "ウェブワーカー", "", "1")}}、{{DOMxRef("WebSockets_API", "ウェブソケット", "", "1")}}、{{DOMxRef("Server-sent_events", "サーバー側イベント", "", "1")}} などの他の API のサポートおよび接続インターフェイス。
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)、{{DOMxRef("Web_Storage_API", "ウェブストレージ", "", "1")}}、{{DOMxRef("Web_Workers_API", "ウェブワーカー", "", "1")}}、{{DOMxRef("WebSockets_API", "ウェブソケット", "", "1")}}、{{DOMxRef("Server-sent_events", "サーバー側イベント", "", "1")}} などの他の API のサポートおよび接続インターフェイス。
 
 ## HTML DOM の概念と利用方法
 
@@ -239,7 +239,7 @@ HTML DOM API を構成するインターフェイスの大部分は、個々の
 
 ### ウェブコンポーネントインターフェイス
 
-これらのインターフェイスは[ウェブコンポーネント API](/ja/docs/Web/Web_Components) で使用され、利用可能な[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)を作成・管理します。
+これらのインターフェイスは[ウェブコンポーネント API](/ja/docs/Web/API/Web_components) で使用され、利用可能な[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)を作成・管理します。
 
 - {{DOMxRef("CustomElementRegistry")}}
 
diff --git a/files/ja/web/css/_colon_defined/index.md b/files/ja/web/css/_colon_defined/index.md
index 9f76024a80638c..3afba7167b1491 100644
--- a/files/ja/web/css/_colon_defined/index.md
+++ b/files/ja/web/css/_colon_defined/index.md
@@ -99,4 +99,4 @@ simple-custom:defined {
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
diff --git a/files/ja/web/css/_colon_host/index.md b/files/ja/web/css/_colon_host/index.md
index 43e1336454539e..b03fdb567e00e1 100644
--- a/files/ja/web/css/_colon_host/index.md
+++ b/files/ja/web/css/_colon_host/index.md
@@ -68,6 +68,6 @@ style.textContent =
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
 - {{cssxref(":host()")}}
 - {{cssxref(":host-context()")}}
diff --git a/files/ja/web/css/_colon_host_function/index.md b/files/ja/web/css/_colon_host_function/index.md
index 5e61ca70a318b7..c1fbbdf1965415 100644
--- a/files/ja/web/css/_colon_host_function/index.md
+++ b/files/ja/web/css/_colon_host_function/index.md
@@ -71,6 +71,6 @@ style.textContent =
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
 - {{CSSxRef(":host")}}
 - {{CSSxRef(":host-context()")}}
diff --git a/files/ja/web/css/_colon_is/index.md b/files/ja/web/css/_colon_is/index.md
index d2434e84c00400..97f21a68999990 100644
--- a/files/ja/web/css/_colon_is/index.md
+++ b/files/ja/web/css/_colon_is/index.md
@@ -226,4 +226,4 @@ some-element::after {
 
 - {{CSSxRef(":where", ":where()")}} - `:is()` と同様ですが、[詳細度](/ja/docs/Web/CSS/Specificity)が 0 です。
 - [セレクターリスト](/ja/docs/Web/CSS/Selector_list)
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
diff --git a/files/ja/web/css/_colon_where/index.md b/files/ja/web/css/_colon_where/index.md
index dfa3ecd0fe5bdb..426c2ca37934dd 100644
--- a/files/ja/web/css/_colon_where/index.md
+++ b/files/ja/web/css/_colon_where/index.md
@@ -153,4 +153,4 @@ footer a {
 
 - {{CSSxRef(":is", ":is()")}}
 - [セレクターリスト](/ja/docs/Web/CSS/Selector_list)
-- [ウェブコンポーネント](/ja/docs/Web/Web_components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)
diff --git a/files/ja/web/css/_doublecolon_slotted/index.md b/files/ja/web/css/_doublecolon_slotted/index.md
index 0c4254ed2a0a3e..f3de6340600cbd 100644
--- a/files/ja/web/css/_doublecolon_slotted/index.md
+++ b/files/ja/web/css/_doublecolon_slotted/index.md
@@ -96,4 +96,4 @@ customElements.define(
 
 ## 関連情報
 
-- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
+- [ウェブコンポーネント](/ja/docs/Web/API/Web_components)

From 42dd46e34eede4a6c1fe723e7c3f6a7b0b9624d1 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 20:07:15 +0900
Subject: [PATCH 201/268] =?UTF-8?q?2023/07/04=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/glossary/binding/index.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 files/ja/glossary/binding/index.md

diff --git a/files/ja/glossary/binding/index.md b/files/ja/glossary/binding/index.md
new file mode 100644
index 00000000000000..1efc1aab78a15b
--- /dev/null
+++ b/files/ja/glossary/binding/index.md
@@ -0,0 +1,20 @@
+---
+title: Binding （バインド）
+slug: Glossary/Binding
+l10n:
+  sourceCommit: 1c4869cdb1a9a9c3cafba87a2cd9469591f7aa47
+---
+
+プログラミングにおいて**バインド**とは、{{glossary("identifier","識別子")}}と値の関連付けのことです。バインドは{{glossary("variable", "変数")}}だけとは限りません。例えば、関数の{{glossary("parameter", "引数")}}や {{jsxref("Statements/try...catch", "catch (e)")}} ブロックで作成されるバインドは、厳密な意味での「変数」ではありません。さらに、一部のバインドは言語によって暗黙に作成されます。例えば、 JavaScript の {{jsxref("Operators/this", "this")}} や [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) などです。
+
+バインドは代入可能であれば{{glossary("mutable", "変更可能")}}であり、そうでなければ{{glossary("immutable", "変更不可")}}です。これは、保持している値が変更不可であるという意味ではありません。
+
+バインドはよく{{glossary("scope", "スコープ")}}と関連付けられます。 JavaScript でバインドを再宣言できるかどうかは、バインドを作成するために使用された構築方法に依存します。
+
+## 関連情報
+
+- {{jsxref("Statements/var", "var")}}
+- {{jsxref("Statements/let", "let")}}
+- {{jsxref("Statements/const", "const")}}
+- {{jsxref("Statements/function", "function")}}
+- {{jsxref("Statements/class", "class")}}

From d63c1db68ab95765467208d533c7f8a3bc0097dd Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 20:09:45 +0900
Subject: [PATCH 202/268] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../functions/arrow_functions/index.md        | 542 +++++++++---------
 1 file changed, 262 insertions(+), 280 deletions(-)

diff --git a/files/ja/web/javascript/reference/functions/arrow_functions/index.md b/files/ja/web/javascript/reference/functions/arrow_functions/index.md
index 2dba7e671f2f41..ab4c45f9904e6f 100644
--- a/files/ja/web/javascript/reference/functions/arrow_functions/index.md
+++ b/files/ja/web/javascript/reference/functions/arrow_functions/index.md
@@ -1,91 +1,128 @@
 ---
 title: アロー関数式
 slug: Web/JavaScript/Reference/Functions/Arrow_functions
+l10n:
+  sourceCommit: 4f86aad2b0b66c0d2041354ec81400c574ab56ca
 ---
 
 {{jsSidebar("Functions")}}
 
-**アロー関数式**は、従来の [関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)の簡潔な代替構文ですが、制限があり、すべての場面で使用することができるわけではできません。
+**アロー関数式**は、従来の[関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。
 
-*アロー関数*と*従来の関数*には違いがあり、また制限もあります。
-
-- アロー関数には、[`this`](/ja/docs/Web/JavaScript/Reference/Operators/this)、[`arguments`](/ja/docs/Web/JavaScript/Reference/Functions/arguments)、[`super`](/ja/docs/Web/JavaScript/Reference/Operators/super) への結びつけがないので、[メソッド](/ja/docs/Glossary/Method)として使用することはできません。
-- アロー関数には [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) キーワードがありません。
-- アロー関数は、[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) のような、一般に[スコープ](/ja/docs/Glossary/Scope)を確立することを前提としたメソッドには適していません。
-- アロー関数は[コンストラクター](/ja/docs/Glossary/Constructor)として使用することはできません。
-- アロー関数は本体内で [`yield`](/ja/docs/Web/JavaScript/Reference/Operators/yield) を使用することはできません。
+- アロー関数自身には [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this)、[`arguments`](/ja/docs/Web/JavaScript/Reference/Functions/arguments)、[`super`](/ja/docs/Web/JavaScript/Reference/Operators/super) への{{Glossary("binding", "バインド")}}がないので、[メソッド](/ja/docs/Glossary/Method)として使用することはできません。
+- アロー関数は[コンストラクター](/ja/docs/Glossary/Constructor)として使用することはできません。 [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) をつけて呼び出すと {{jsxref("TypeError")}} が発生します。 [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) キーワードにアクセスすることもできません。
+- アロー関数は本体内で [`yield`](/ja/docs/Web/JavaScript/Reference/Operators/yield) を使用することができず、ジェネレーター関数として作成することもできません。
 
 {{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
 
-### 従来の関数とアロー関数の比較
+## 構文
 
-「従来の関数」を分解して、最もシンプルな「アロー関数」に段階的に変えていきましょう。
+```js-nolint
+() => 式
 
-> **メモ:** 途中の各ステップは有効な「アロー関数」です。
+引数 => 式
 
-```js
-// 従来の関数
-function (a){
-  return a + 100;
+(引数) => 式
+
+(引数1, 引数N) => 式
+
+() => {
+  文
+}
+
+引数 => {
+  文
+}
+
+(引数1, 引数N) => {
+  文
+}
+```
+
+引数内での[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)、[デフォルト引数](/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters)、[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)には対応していますが、常に括弧が必要になります。
+
+```js-nolint
+(a, b, ...r) => 式
+(a = 400, b = 20, c) => 式
+([a, b] = [10, 20]) => 式
+({ a, b } = { a: 10, b: 20 }) => 式
+```
+
+アロー関数は、 [`async`](/ja/docs/Web/JavaScript/Reference/Statements/async_function) にすることができます。この場合は式の前に `async` キーワードを付けます。
+
+```js-nolint
+async 引数 => 式
+async (引数1, 引数2, ...引数N) => {
+  文
 }
+```
+
+### 解説
 
-// アロー関数に分解
+伝統的な無名関数を、最も単純なアロー関数に段階的に分解してみましょう。それぞれの段階も有効なアロー関数です。
+
+> **メモ:** 従来の関数式とアロー関数は、構文以外にも異なる点があります。次のいくつかの節で、その動作の違いを詳しく紹介します。
+
+```js-nolint
+// 従来の無名関数
+(function (a) {
+  return a + 100;
+});
 
 // 1. "function" という語を削除し、引数と本体の開始中括弧の間に矢印を配置する
 (a) => {
   return a + 100;
-}
+};
 
-// 2. 本体の中括弧を削除と "return" という語を削除 -- return は既に含まれています。
+// 2. 本体の中括弧を削除と "return" という語を削除 — return は既に含まれています。
 (a) => a + 100;
 
 // 3. 引数の括弧を削除
 a => a + 100;
 ```
 
-{ 中括弧 } と ( 括弧 ) と "return" は必要になる場合もあります。
+上の例では、引数を囲む括弧と関数本体を囲む中括弧の両方を省略することができます。ただし、省略できるのは特定の場合のみです。
 
-例えば、**複数の引数**や**引数なし**の場合、引数の周りの括弧を入れなおす必要があります。
+括弧を省略できるのは、関数に単一の単純な引数がある場合だけです。複数の引数がある場合、引数がない場合、デフォルト引数、分割代入、残余引数がある場合は、引数リストを括弧で囲む必要があります。
 
 ```js
-// 従来の関数
-function (a, b){
+// 従来の無名関数
+(function (a, b) {
   return a + b + 100;
-}
+});
 
 // アロー関数
 (a, b) => a + b + 100;
 
-// 従来の関数 (引数なし)
-let a = 4;
-let b = 2;
-function (){
+const a = 4;
+const b = 2;
+
+// 従来の関数（引数なし）
+(function () {
   return a + b + 100;
-}
+});
 
-// アロー関数 (引数なし)
-let a = 4;
-let b = 2;
+// アロー関数（引数なし）
 () => a + b + 100;
 ```
 
-同様に、本文に処理の**追加の行**が必要な場合は、中括弧**に加えて "return"** を入れなおす必要があります（アロー関数は "return" する場所や返値を魔法のように推測できるわけではありません）。
+中括弧を省略できるのは、関数が直接式を返す場合だけです。本体に追加の処理がある場合は中括弧が必要となり、 `return` キーワードも必要となります。アロー関数はいつ何を返すかを推測することはできません。
 
 ```js
 // 従来の関数
-function (a, b){
-  let chuck = 42;
+(function (a, b) {
+  const chuck = 42;
   return a + b + chuck;
-}
+});
 
 // アロー関数
 (a, b) => {
-  let chuck = 42;
+  const chuck = 42;
   return a + b + chuck;
-}
+};
 ```
 
-そして最後に、**名前付き関数**については、変数のようにアロー関数式を扱います。
+アロー関数は常に無名です。アロー関数自身を呼び出す必要がある場合は、代わりに名前付き関数式を使用 してください。アロー関数を変数に割り当てて、名前を持たせることもできます。
 
 ```js
 // 従来の関数
@@ -94,342 +131,203 @@ function bob(a) {
 }
 
 // アロー関数
-let bob = (a) => a + 100;
+const bob2 = (a) => a + 100;
 ```
 
-## 構文
-
-### 基本的な構文
-
-引数が単一の場合。単純な式ならば return は不要です。
-
-```js
-(param) => expression;
-```
-
-引数が複数の場合は括弧が必要です。単純な式ならば return は不要です。
+### 関数の本体
 
-```js
-(param1, paramN) => expression;
-```
+アロー関数は、簡潔文体 (concise body) か、もしくはより一般的なブロック文体 (block body) のどちらかを使用することができます。
 
-複数行の文ならば、本体の中括弧と return が必要です。
+簡潔文体においては、単一の式しか記述できないので、その式が暗黙的に return される値となります。しかし、ブロック文体においては、明示的に `return` 文を使用する必要があります。
 
 ```js
-(param) => {
-  let a = 1;
-  return a + param;
-};
-```
-
-引数が複数の場合は括弧が必要です。複数行の文ならば、本体の中括弧と return が必要です。
+const func = (x) => x * x;
+// 簡潔構文の場合、暗黙の "return" があります
 
-```js
-(param1, paramN) => {
-  let a = 1;
-  return a + param1 + paramN;
+const func2 = (x, y) => {
+  return x + y;
 };
+// ブロック文体では、明示的な "return" が必要です
 ```
 
-### 高度な構文
+簡潔文体 `(params) => { object: literal }` を使ってオブジェクトリテラルを返そうとしても、期待通りに動作しないことに注意しましょう。
 
-オブジェクトリテラル式を返す場合は、式の周りに括弧が必要です。
-
-```js
-(params) => ({ foo: "a" }); // オブジェクト {foo: "a"} を返す
-```
+```js-nolint example-bad
+const func = () => { foo: 1 };
+// 呼び出した func() は undefined を返す！
 
-[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)に対応しています。
+const func2 = () => { foo: function () {} };
+// SyntaxError: function statement requires a name
 
-```js
-(a, b, ...r) => expression;
+const func3 = () => { foo() {} };
+// SyntaxError: Unexpected token '{'
 ```
 
-[デフォルト引数](/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters)に対応しています。
+これは、 JavaScript がアロー関数を簡潔文体とみなすのは、アローに続くトークンが左中括弧でない場合のみであるため、中括弧 ({}) 内のコードは一連の文として解釈され、 `foo` はオブジェクトリテラルのキーではなく、[ラベル](/ja/docs/Web/JavaScript/Reference/Statements/label)となります。
 
-```js
-(a = 400, b = 20, c) => expression;
-```
-
-引数の[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)に対応しています。
+これを修正するには、オブジェクトリテラルを括弧で囲んでください。
 
-```js
-([a, b] = [10, 20]) => a + b; // result is 30
-({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30
+```js example-good
+const func = () => ({ foo: 1 });
 ```
 
-## 解説
-
-### メソッドとして使われるアロー関数
+### メソッドとしては使用不可
 
-前に述べたように、アロー関数式は非メソッド型の関数に最もよく合っています。これをメソッドとして使った時のことを見てみましょう。
+アロー関数式は自分自身で `this` を持たないので、メソッドではない関数にのみ使用してください。メソッドとして使用しようとするとどうなるか見てみましょう。
 
 ```js
 "use strict";
 
-var obj = {
-  // 新しいスコープを作成しない
+const obj = {
   i: 10,
   b: () => console.log(this.i, this),
-  c: function () {
+  c() {
     console.log(this.i, this);
   },
 };
 
-obj.b(); // undefined, Window {...} (or the global object) と表示
-obj.c(); // 10, Object {...} と表示
+obj.b(); // undefined, Window { /* … */ } (またはグローバルオブジェクト) と表示
+obj.c(); // 10, Object { /* … */ } と表示
 ```
 
-アロー関数は自身の `this` を持ちません。{{jsxref("Object.defineProperty()")}} を使った他の例です。
+{{jsxref("Object.defineProperty()")}} を使った他の例です。
 
 ```js
 "use strict";
 
-var obj = {
+const obj = {
   a: 10,
 };
 
 Object.defineProperty(obj, "b", {
   get: () => {
-    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
-    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (またはグローバルオブジェクト)
+    return this.a + 10; // グローバルオブジェクト 'Window' を表すので、 'this.a' は 'undefined' を返す
   },
 });
 ```
 
-### call、apply、bind
-
-[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) の各メソッドは、アロー関数には**ふさわしくありません**。これらは異なるスコープ内でメソッドを実行できるようにするために設計されているものです。_アロー関数は、そのアロー関数が定義されているスコープに基づいて "this" を確立するからです。_
-
-[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) は、従来の関数ではそれぞれのメソッドにスコープを確立するので、期待通りに動作します。
+[クラス](/ja/docs/Web/JavaScript/Reference/Classes)の本体は `this` コンテキストを持っているので、[クラスフィールド](/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields)のようなアロー関数はクラスの `this` コンテキストを閉じ、アロー関数の本体の中の `this` はインスタンス（または[静的フィールド](/ja/docs/Web/JavaScript/Reference/Classes/static)の場合はクラス自体）を正しく参照します。しかし、これは関数自身のバインディングではなく、[クロージャ](/ja/docs/Web/JavaScript/Closures)であるため、 `this` の値が実行コンテキストによって変わることはありません。
 
 ```js
-// ----------------------
-// 従来の関数の例
-// ----------------------
-// 単純化されたオブジェクトで "this" を持つ
-var obj = {
-  num: 100,
-};
-
-// "num" を window に設定し、使用されていないことを表す。
-window.num = 2020; // yikes!
-
-// 単純な従来の関数で "this" を運用する
-var add = function (a, b, c) {
-  return this.num + a + b + c;
-};
-
-// call
-var result = add.call(obj, 1, 2, 3); // "obj" としてスコープを確立
-console.log(result); // result 106
-
-// apply
-const arr = [1, 2, 3];
-var result = add.apply(obj, arr); // "obj" としてスコープを確立
-console.log(result); // result 106
-
-// bind
-var result = add.bind(obj); // "obj" としてスコープを確立
-console.log(result(1, 2, 3)); // result 106
-```
-
-アロー関数では、 `add` 関数は基本的に `window` (グローバル) スコープで作成されているので、 `this` は window だと仮定されます。
-
-```js
-// ----------------------
-// アロー関数の例
-// ----------------------
-
-// 単純化されたオブジェクトで "this" を持つ
-var obj = {
-  num: 100,
-};
-
-// "num" を window に設定し、どのように扱われるかを見る。
-window.num = 2020; // yikes!
-
-// アロー関数
-var add = (a, b, c) => this.num + a + b + c;
-
-// call
-console.log(add.call(obj, 1, 2, 3)); // result 2026
-
-// apply
-const arr = [1, 2, 3];
-console.log(add.apply(obj, arr)); // result 2026
+class C {
+  a = 1;
+  autoBoundMethod = () => {
+    console.log(this.a);
+  };
+}
 
-// bind
-const bound = add.bind(obj);
-console.log(bound(1, 2, 3)); // result 2026
+const c = new C();
+c.autoBoundMethod(); // 1
+const { autoBoundMethod } = c;
+autoBoundMethod(); // 1
+// 通常のメソッドであれば、この場合は未定義になるはずです。
 ```
 
-おそらくアロー関数を使う最大の利点は、 DOM レベルのメソッド (`setTimeout`, `setInterval`, `addEventListener`) で、通常は何らかのクロージャ、call、apply、bind を使用して、関数が適切なスコープで実行されることを確認する必要があることです。
-
-#### 従来の関数の例
+アロー関数のプロパティはよく「自動バインドメソッド」と言いますが、これは通常のメソッドと同等だからです。
 
 ```js
-var obj = {
-  count: 10,
-  doSomethingLater: function () {
-    setTimeout(function () {
-      // 関数を window スコープで実行
-      this.count++;
-      console.log(this.count);
-    }, 300);
-  },
-};
-
-obj.doSomethingLater(); // コンソールに "NaN" と表示。 "count" プロパティは window スコープではないため。
+class C {
+  a = 1;
+  constructor() {
+    this.method = this.method.bind(this);
+  }
+  method() {
+    console.log(this.a);
+  }
+}
 ```
 
-#### アロー関数の例
+> **メモ:** クラスフィールドはインスタンスで定義され、プロトタイプでは定義されません。そのため、インスタンスを作成するたびに新しい関数参照が作成され、新しいクロージャが割り当てられます。
 
-```js
-var obj = {
-  count: 10,
-  doSomethingLater: function () {
-    // 従来の関数は "this" を "obj" コンテキストに結びつける
-    setTimeout(() => {
-      // アロー関数はそれ自身のバインディングを持たず、
-      // setTimeout （関数呼び出しとして）はバインディング
-      // 自体を作成しないので、従来の関数の "obj" コンテキスト
-      // が中で使用されることになります。
-      this.count++;
-      console.log(this.count);
-    }, 300);
-  },
-};
-
-obj.doSomethingLater();
-```
+同様の理由で、[`call()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) の各メソッドは、アロー関数で呼び出されても有益ではありません。アロー関数は、アロー関数が定義されているスコープに基づいて `this` の値を定義しており、関数の呼び出し方によってこの値が変わることはないからです。
 
-### `arguments` のバインドがない
+### arguments のバインドがない
 
-アロー関数は自身の [`arguments` オブジェクト](/ja/docs/Web/JavaScript/Reference/Functions/arguments)を持ちません。そのため、この例では、`arguments` は囲っているスコープでの同名変数への参照にすぎません。
+アロー関数は自身の [`arguments` オブジェクト](/ja/docs/Web/JavaScript/Reference/Functions/arguments)を持ちません。そのため、この例では、 `arguments` は囲っているスコープでの同名変数への参照にすぎません。
 
 ```js
-var arguments = [1, 2, 3];
-var arr = () => arguments[0];
-
-arr(); // 1
-
 function foo(n) {
-  var f = () => arguments[0] + n; // foo は arguments をバインドしている。 arguments[0] は n である
+  const f = () => arguments[0] + n; // foo は arguments をバインドしている。 arguments[0] は n である
   return f();
 }
 
 foo(3); // 3 + 3 = 6
 ```
 
+> **メモ:** `arguments` という変数は[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode#eval_および_arguments_の単純化)では宣言できないので、上のコードは構文エラーになります。これにより、 `arguments` のスコープ効果がより理解しやすくなります。
+
 多くの場合、[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)が `arguments` オブジェクトの代わりに使えます。
 
 ```js
 function foo(n) {
-  var f = (...args) => args[0] + n;
+  const f = (...args) => args[0] + n;
   return f(10);
 }
 
 foo(1); // 11
 ```
 
-### `new` 演算子の使用
+### コンストラクターとしては使用不可
 
-アロー関数はコンストラクターとして使用できず、`new` と共に使うとエラーが発生します。
+アロー関数はコンストラクターとして使用することができず、 [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) を付けて呼び出されるとエラーが発生します。また、 [`prototype`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function) プロパティもありません。
 
 ```js
-var Foo = () => {};
-var foo = new Foo(); // TypeError: Foo is not a constructor
+const Foo = () => {};
+const foo = new Foo(); // TypeError: Foo is not a constructor
+console.log("prototype" in Foo); // false
 ```
 
-### `prototype` プロパティの使用
-
-アロー関数には `prototype` プロパティはありません。
-
-```js
-var Foo = () => {};
-console.log(Foo.prototype); // undefined
-```
-
-### `yield` キーワードの使用
+### ジェネレーターとしては使用不可
 
 [`yield`](/ja/docs/Web/JavaScript/Reference/Operators/yield) キーワードはアロー関数内で使用できません（内部で入れ子になった関数が許可されている場合を除く）。結果として、アロー関数はジェネレーターとして使用できません。
 
-### 関数の本体
-
-アロー関数は、簡潔文体 (concise body)か、もしくはより一般的なブロック文体 (block body) のどちらかを使用することができます。
-
-簡潔文体においては、単一の式しか記述できないので、その式が暗黙的に return される値となります。しかし、ブロック文体においては、自動的に return はされないので、明示的に `return` 文を使用する必要があります。
-
-```js
-var func = (x) => x * x;
-// 簡潔構文の場合、暗黙の "return" があります
-
-var func = (x, y) => {
-  return x + y;
-};
-// ブロック文体では、明示的な "return" が必要です
-```
-
-### オブジェクトリテラルの返却
-
-簡潔文体 `params => {object:literal}` を使ってオブジェクトリテラルを返そうとしても、期待通りに動作しないことに注意しましょう。
-
-```js
-var func = () => { foo: 1 };
-// 呼び出した func() は undefined を返す！
-
-var func = () => { foo: function() {} };
-// SyntaxError: function 文には名前が必要
-```
-
-これは、括弧 ({}) 内のコードが文の列として構文解析されてしまっているからです（つまり、`foo` はオブジェクトリテラル内のキーでなく、ラベルとして扱われています）。
-
-オブジェクトリテラルは括弧で囲むのを忘れないでください。
-
-```js
-var func = () => ({ foo: 1 });
-```
-
-### 改行
+### アローの前の改行
 
 アロー関数では、括弧とアロー（矢印）の間に改行を入れることができません。
 
-```js
-var func = (a, b, c)
+```js-nolint example-bad
+const func = (a, b, c)
   => 1;
 // SyntaxError: Unexpected token '=>'
 ```
 
 しかし、矢印の後に改行を入れたり、以下のように括弧や中括弧を使用して、コードがきれいで滑らかになるように修正することができます。また、引数同士の間にも改行を入れることができます。
 
-```js
-var func = (a, b, c) => 1;
+```js-nolint
+const func = (a, b, c) =>
+  1;
 
-var func = (a, b, c) => 1;
+const func2 = (a, b, c) => (
+  1
+);
 
-var func = (a, b, c) => {
+const func3 = (a, b, c) => {
   return 1;
 };
 
-var func = (a, b, c) => 1;
-
-// SyntaxError は発生しない
+const func4 = (
+  a,
+  b,
+  c,
+) => 1;
 ```
 
-### 解釈の順序
+### アロー関数の優先順位
 
-アロー関数のアロー (矢印) は演算子ではありませんが、アロー関数には特別な解釈ルールがあり、通常の関数とは[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)の扱いが異なります。
+アロー関数のアロー（矢印）は演算子ではありませんが、アロー関数には特別な解釈ルールがあり、通常の関数とは[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)の扱いが異なります。
 
-```js
+```js-nolint example-bad
 let callback;
 
-callback = callback || function() {}; // ok
-
 callback = callback || () => {};
 // SyntaxError: invalid arrow-function arguments
+```
 
-callback = callback || (() => {});    // ok
+`=>` はほとんどの演算子よりも優先順位が低いので、`callback || ()` がアロー関数の引数リストとして解釈されるのを避けるために括弧が必要になります。
+
+```js example-good
+callback = callback || (() => {});
 ```
 
 ## 例
@@ -438,38 +336,37 @@ callback = callback || (() => {});    // ok
 
 ```js
 // 空のアロー関数は undefined を返します
-let empty = () => {};
+const empty = () => {};
 
 (() => "foobar")();
 // "foobar" を返します
-// (これは、即時起動型の関数式です。)
+// （これは、即時起動型の関数式です。）
 
-var simple = (a) => (a > 15 ? 15 : a);
+const simple = (a) => (a > 15 ? 15 : a);
 simple(16); // 15
 simple(10); // 10
 
-let max = (a, b) => (a > b ? a : b);
+const max = (a, b) => (a > b ? a : b);
 
 // 簡単な配列のフィルターリング、マッピング等
+const arr = [5, 6, 13, 0, 1, 18, 23];
 
-var arr = [5, 6, 13, 0, 1, 18, 23];
-
-var sum = arr.reduce((a, b) => a + b);
+const sum = arr.reduce((a, b) => a + b);
 // 66
 
-var even = arr.filter((v) => v % 2 == 0);
+const even = arr.filter((v) => v % 2 === 0);
 // [6, 0, 18]
 
-var double = arr.map((v) => v * 2);
+const double = arr.map((v) => v * 2);
 // [10, 12, 26, 0, 2, 36, 46]
 
-// さらに簡潔な promise チェーン
+// さらに簡潔なプロミスチェーン
 promise
   .then((a) => {
-    // ...
+    // …
   })
   .then((b) => {
-    // ...
+    // …
   });
 
 // 見た目に解析が簡単な引数なしのアロー関数
@@ -482,6 +379,87 @@ setTimeout(() => {
 }, 1);
 ```
 
+### call、apply、bind の使用
+
+[`call`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)、[`bind`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) は、従来の関数ではそれぞれのメソッドにスコープを確立するので、期待通りに動作します。
+
+```js
+const obj = {
+  num: 100,
+};
+
+// "num" を window に設定し、使用されていないことを表す。
+globalThis.num = 42;
+
+// 単純な従来の関数で "this" を運用する
+const add = function (a, b, c) {
+  return this.num + a + b + c;
+};
+
+console.log(add.call(obj, 1, 2, 3)); // 106
+console.log(add.apply(obj, [1, 2, 3])); // 106
+const boundAdd = add.bind(obj);
+console.log(boundAdd(1, 2, 3)); // 106
+```
+
+アロー関数では、 `add` 関数は基本的に `window` (グローバル) スコープで作成されているので、 `this` は window だと仮定されます。
+
+```js
+const obj = {
+  num: 100,
+};
+
+// "num" を window に設定し、どのように扱われるかを見る。
+globalThis.num = 42;
+
+// アロー関数
+const add = (a, b, c) => this.num + a + b + c;
+
+console.log(add.call(obj, 1, 2, 3)); // 48
+console.log(add.apply(obj, [1, 2, 3])); // 48
+const boundAdd = add.bind(obj);
+console.log(boundAdd(1, 2, 3)); // 48
+```
+
+おそらくアロー関数を使う最大の利点は、 DOM レベルのメソッド（{{domxref("setTimeout()")}} や {{domxref("EventTarget/addEventListener()", "EventTarget.prototype.addEventListener()")}}）で、通常は何らかのクロージャ、`call()`、`apply()`、`bind()` を使用して、関数が適切なスコープで実行されることを確認する必要があることです。
+
+従来の関数式では、このようなコードは期待通りに動作しません。
+
+```js
+const obj = {
+  count: 10,
+  doSomethingLater() {
+    setTimeout(function () {
+      // この関数は window のスコープで実行される
+      this.count++;
+      console.log(this.count);
+    }, 300);
+  },
+};
+
+obj.doSomethingLater(); // "NaN" と表示。 "count" プロパティが window のスコープにないため。
+```
+
+アロー関数を使えば、 `this` スコープをより簡単に保持することができます。
+
+```js
+const obj = {
+  count: 10,
+  doSomethingLater() {
+    // メソッドの構文で "this" を "obj" コンテキストにバインドする
+    setTimeout(() => {
+      // アロー関数は独自のバインドを行わないので、
+      // setTimeout （関数呼び出しとして）は自身へのバインドを作成せず、
+      // 外部メソッドの "obj" コンテキストが使用される。
+      this.count++;
+      console.log(this.count);
+    }, 300);
+  },
+};
+
+obj.doSomethingLater(); // logs 11
+```
+
 ## 仕様書
 
 {{Specifications}}
@@ -492,4 +470,8 @@ setTimeout(() => {
 
 ## 関連情報
 
-- ["ES6 In Depth: Arrow functions" (hacks.mozilla.org)](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)
+- [関数](/ja/docs/Web/JavaScript/Guide/Functions)ガイド
+- [関数](/ja/docs/Web/JavaScript/Reference/Functions)
+- {{jsxref("Statements/function", "function")}}
+- [`function` 式](/ja/docs/Web/JavaScript/Reference/Operators/function)
+- [ES6 In Depth: Arrow functions](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/) (hacks.mozilla.org, 2015)

From 14fa490d152f3cb85f7908c3e3797d1e4c10d3e9 Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Thu, 28 Sep 2023 11:04:32 +0800
Subject: [PATCH 203/268] [zh-cn]: update translation of Number.valueOf()
 (#16122)

---
 .../global_objects/number/valueof/index.md    | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md
index 669db4c252d804..44b5d9d93513b1 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/valueof/index.md
@@ -3,33 +3,39 @@ title: Number.prototype.valueOf()
 slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+{{jsxref("Number")}} 值的 **`valueOf()`** 方法返回该数字的值。
 
-**`valueOf()`** 方法返回一个被 {{jsxref("Global_Objects/Number", "Number")}} 对象包装的原始值。
+{{EmbedInteractiveExample("pages/js/number-valueof.html")}}
 
 ## 语法
 
-```plain
-numObj.valueOf()
+```js-nolint
+valueOf()
 ```
 
+### 参数
+
+无。
+
 ### 返回值
 
-表示指定 {{jsxref("Number")}} 对象的原始值的数字
+一个表示指定 {{jsxref("Number")}} 对象的原始值的数字。
 
 ## 描述
 
-该方法通常是由 JavaScript 引擎在内部隐式调用的，而不是由用户在代码中显式调用的。
+该方法通常由 JavaScript 在内部调用，而非在 Web 代码中显式调用。
 
 ## 示例
 
+### 使用 valueOf
+
 ```js
-var numObj = new Number(10);
+const numObj = new Number(10);
 console.log(typeof numObj); // object
 
-var num = numObj.valueOf();
+const num = numObj.valueOf();
 console.log(num); // 10
 console.log(typeof num); // number
 ```
@@ -42,6 +48,6 @@ console.log(typeof num); // number
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
-- {{jsxref("Number.prototype.toSource()")}}
+- {{jsxref("Object.prototype.valueOf()")}}

From 48d69830d5a8f5d020f4026591746e18dcbdb87f Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Thu, 28 Sep 2023 11:51:38 +0800
Subject: [PATCH 204/268] zh-cn: init the translation of vulnerability response
 (#16151)

---
 .../security_vulnerability_response/index.md  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md

diff --git a/files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md b/files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md
new file mode 100644
index 00000000000000..832ca62b7aa8dd
--- /dev/null
+++ b/files/zh-cn/mdn/community/contributing/security_vulnerability_response/index.md
@@ -0,0 +1,39 @@
+---
+title: 安全漏洞响应步骤
+slug: MDN/Community/Contributing/Security_vulnerability_response
+l10n:
+  sourceCommit: aba02eadb67bbc425b4c8f3bbe9b066b6d21ea1b
+---
+
+{{MDNSidebar}}
+
+## 历史
+
+2018 年 11 月 27 日，一个 npm 安全漏洞被公布，所有（无论是直接还是间接）依赖于 [event-stream](https://snyk.io/blog/malicious-code-found-in-npm-package-event-stream) 包的用户，都会受到影响。这是一个非常有针对性的攻击，只有在安装了 Copay 比特币钱包的情况下才会激活，然后它会尝试窃取内容。
+
+我们的两个项目，即 [interactive-examples](https://github.com/mdn/interactive-examples/) 和 [BoB](https://github.com/mdn/bob/)，依赖一个名为 [npm-run-all](https://www.npmjs.com/package/npm-run-all) 的 npm 包，而这个包又依赖于 event-stream 包。
+
+这意味着不仅员工面临风险，分叉这两个仓库的人也可能受到影响。值得庆幸的是，受影响的软件包维护者反应迅速，并发布了更新来解决该问题。因为我们在这些仓库中运行了 [Renovate 机器人](https://github.com/marketplace/renovate)，所以自动创建了一个随时可以合并的[拉取请求](https://github.com/mdn/interactive-examples/pull/1239/)。
+
+但这只解决了问题的一部分。我们的用户仍需得到通知。
+
+## 采取的步骤
+
+项目（特别是 interactive-examples）的社区非常庞大，而且并不是每个人都活跃，但我们仍然需要一种方法来与每个人取得联系。因此，第一步是针对每个仓库打开一个议题，详细说明问题：
+
+- [interactive-examples](https://github.com/mdn/interactive-examples/issues/1242)
+- [bob](https://github.com/mdn/bob/issues/184)
+
+这本身还不够，因为用户不一定会主动监视议题。因此，我们需要查看项目的所有[分叉](https://github.com/mdn/interactive-examples/network/members)。
+
+然后，我们复制了所有这些用户的用户名，并在上述议题中提到了他们，例如通过[评论](https://github.com/mdn/interactive-examples/issues/1242#issuecomment-442110598)。
+
+从该议题收到的回复来看，这非常有效，但我们不能就这样放任不管。下一步是在每个打开的拉取请求中发布评论，通知用户存在的问题以及他们的下一步应该是什么。这是我们的回复的一个[例子](https://github.com/mdn/interactive-examples/pull/1144)。
+
+因此，我们相信我们的用户是安全的，因为我们联系了他们，而且 npm 和其他渠道也报道了这个问题。
+
+最后，我们通过官方 Twitter 账户发布了推文，以尽可能地引起人们对该问题的注意。
+
+### 总结
+
+希望此类事件会越来越少。但如果再次发生，上述内容提供了一个很好的指导方针。

From afd7e9ab308d121441c5dbbc617c84b7f503c4a6 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 24 Sep 2023 23:54:00 +0900
Subject: [PATCH 205/268] =?UTF-8?q?2023/08/04=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../navigation_and_resource_timings/index.md  | 399 ++++++++++++++++++
 1 file changed, 399 insertions(+)
 create mode 100644 files/ja/web/performance/navigation_and_resource_timings/index.md

diff --git a/files/ja/web/performance/navigation_and_resource_timings/index.md b/files/ja/web/performance/navigation_and_resource_timings/index.md
new file mode 100644
index 00000000000000..408329a9cb88d2
--- /dev/null
+++ b/files/ja/web/performance/navigation_and_resource_timings/index.md
@@ -0,0 +1,399 @@
+---
+title: ナビゲーションおよびリソースタイミング
+slug: Web/Performance/Navigation_and_resource_timings
+l10n:
+  sourceCommit: b69005a7ebb830a96a37ffcb2adf8b97f956469d
+---
+
+{{QuickLinksWithSubPages("Web/Performance")}}
+
+**ナビゲーションタイミング**は、ブラウザーによる文書ナビゲーションイベントを測定する指標です。**リソースタイミング**は、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングの測定値です。どちらも同じ読み取り専用のプロパティを提供しますが、ナビゲーションタイミングはメイン文書の時間を測定するのに対し、リソースタイミングはそのメイン文書内の呼び出されるすべての資産やリソース、およびリソースのリクエストされたリソースの時刻を提供します。
+
+下記の一般的なパフォーマンス項目は非推奨です。パフォーマンス項目 API は、ナビゲーションやリソースの読み込みプロセスに沿った時刻を指定し、測定するために提供されます。非推奨ですが、ブラウザーのすべてで対応しています。
+
+## パフォーマンスタイミング
+
+リクエストされたページの読み込みパフォーマンスを測定する JavaScript API である[パフォーマンスタイミング API](/ja/docs/Web/API/PerformanceTiming) は非推奨ですが、すべてのブラウザーで対応しています。これは[パフォーマンスナビゲーションタイミング](/ja/docs/Web/API/PerformanceNavigationTiming) API に置き換えられています。
+
+パフォーマンスタイミング API は、ページ読み込みプロセスの各ポイントにつ達したかを記述する読み取り専用の時刻をミリ秒 (ms) 単位で提供していました。下記画像に表示されているように、ナビゲーションプロセスは [`navigationStart`](/ja/docs/Web/API/PerformanceTiming/navigationStart), [`unloadEventStart`](/ja/docs/Web/API/PerformanceTiming/unloadEventStart), [`unloadEventEnd`](/ja/docs/Web/API/PerformanceTiming/unloadEventEnd), [`redirectStart`](/ja/docs/Web/API/PerformanceTiming/redirectStart), [`redirectEnd`](/ja/docs/Web/API/PerformanceTiming/redirectEnd), [`fetchStart`](/ja/docs/Web/API/PerformanceTiming/fetchStart), [`domainLookupStart`](/ja/docs/Web/API/PerformanceTiming/domainLookupStart), [`domainLookupEnd`](/ja/docs/Web/API/PerformanceTiming/domainLookupEnd), [`connectStart`](/ja/docs/Web/API/PerformanceTiming/connectStart), [`connectEnd`](/ja/docs/Web/API/PerformanceTiming/connectEnd), [`secureConnectionStart`](/ja/docs/Web/API/PerformanceTiming/secureConnectionStart), [`requestStart`](/ja/docs/Web/API/PerformanceTiming/requestStart), [`responseStart`](/ja/docs/Web/API/PerformanceTiming/responseStart), [`responseEnd`](/ja/docs/Web/API/PerformanceTiming/responseEnd), [`domLoading`](/ja/docs/Web/API/PerformanceTiming/domLoading), [`domInteractive`](/ja/docs/Web/API/PerformanceTiming/domInteractive), [`domContentLoadedEventStart`](/ja/docs/Web/API/PerformanceTiming/domContentLoadedEventStart), [`domContentLoadedEventEnd`](/ja/docs/Web/API/PerformanceTiming/domContentLoadedEventEnd), [`domComplete`](/ja/docs/Web/API/PerformanceTiming/domComplete), [`loadEventStart`](/ja/docs/Web/API/PerformanceTiming/loadEventStart), [`loadEventEnd`](/ja/docs/Web/API/PerformanceTiming/loadEventEnd) から成ります。
+
+![ナビゲーションタイミングイベント指標](screen_shot_2019-05-03_at_1.06.27_pm.png)
+
+上記の指標と少しの計算で、[最初のバイトまでの時間](/ja/docs/Glossary/Time_to_first_byte)、ページ読み込み時間、 DNS 参照、安全な接続かどうかなど、多くの重要な指標を計算することができます。
+
+すべての手順を完了するのにかかる時間を測定するのを支援するために、パフォーマンスタイミング API はナビゲーションの時刻の読み取り専用の測定値を提供します。アプリの時刻を表示し、キャプチャするには、次のように入力します。
+
+```js
+let time = window.performance.timing;
+```
+
+その結果を使用して、アプリのパフォーマンスを測定することができます。
+
+![コンソールに window.performance.timing と入力すると、 PerformanceNavigationTiming インターフェイスのすべての時刻が表示されます。](navigatortiming.png)
+
+順序は次の通りです。
+
+<table>
+  <thead>
+    <tr>
+      <th>パフォーマンスタイミング</th>
+      <th>詳細</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.navigationStart","navigationStart")}}
+      </td>
+      <td>
+        アンロードのプロンプトが同じ閲覧コンテキスト内の前回の文書で終了したとき。前回の文書がない場合、この値は <code>PerformanceTiming.fetchStart</code> と同じになります。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.secureConnectionStart","secureConnectionStart")}}
+      </td>
+      <td>
+        安全な接続のハンドシェイクを始めた時刻。そのような接続がリクエストされなかった場合、 <code>0</code> を返します。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.redirectStart","redirectStart")}}
+      </td>
+      <td>
+        最初の HTTP リダイレクトが始まった時刻。リダイレクトがない場合、またはリダイレクトのオリジンが同じでない場合、返される値は <code>0</code> です。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.redirectEnd","redirectEnd")}}
+      </td>
+      <td>
+        <p>
+          最後の HTTP リダイレクトが完全に完了した時刻、つまり HTTP レスポンスの最後のバイトを受信した時刻です。リダイレクトがない場合、またはリダイレクトのオリジンが同じでない場合、返される値は <code>0</code> です。
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.connectEnd","connectEnd")}}
+      </td>
+      <td>
+        接続がネットワークで開かれた時刻。トランスポート層がエラーを報告し、接続確立が再度開始される場合は、最後の接続確立終了時刻が指定されます。持続的接続を使用している場合、値は <code>PerformanceTiming.fetchStart</code> と同じになります。接続は、安全な接続ハンドシェイク、または SOCKS 認証がすべて終了した時刻で開かれたものとみなされます。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.connectStart","connectStart")}}
+      </td>
+      <td>
+        コネクションを開くためのリクエストがネットワークに送信された時刻。トランスポート層がエラーを報告し、接続確立が再度開始される場合は、最後の接続確立開始時刻が指定されます。持続的接続を使用している場合、値は <code>PerformanceTiming.fetchStart</code> と同じになります。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.domainLookupEnd","domainLookupEnd")}}
+      </td>
+      <td>
+        ドメイン検索が完了した時刻。持続的接続を使用している場合、または情報がキャッシュやローカルリソースに格納されている場合、値は <code>PerformanceTiming.fetchStart</code> と同じになります。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.domainLookupStart","domainLookupStart")}}
+      </td>
+      <td>
+        ドメイン検索を始めた時刻。持続的接続を使用している場合、または情報がキャッシュやローカルリソースに格納されている場合、値は <code>PerformanceTiming.fetchStart</code> と同じになります。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.fetchStart","fetchStart")}}
+      </td>
+      <td>
+        ブラウザーが HTTP リクエストを使用して文書を取得する準備ができた時刻。
+        この時刻は、アプリケーションキャッシュを調べる<em>前</em>です。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.requestStart","requestStart")}}
+      </td>
+      <td>
+        ブラウザーが実際の文書を取得するリクエストをサーバーまたはキャッシュから送信した時刻。リクエストの開始後にトランスポートレイヤーが失敗し、接続が再開された場合、このプロパティには新しいリクエストに対応する時刻が設定されます。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.responseStart","responseStart")}}
+      </td>
+      <td>
+        ブラウザーがレスポンスの最初のバイトを、サーバー、キャッシュ、ローカルリソースから受信した時刻。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.responseEnd","responseEnd")}}
+      </td>
+      <td>
+        ブラウザーがレスポンスの最後のバイトを受信した時刻、または、サーバー、キャッシュ、またはローカルリソースから最初に発生した場合は接続が閉じられた時刻。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.domLoading","domLoading")}}
+      </td>
+      <td>
+        パーサーが作業を始めた時刻、つまり {{domxref('Document.readyState')}} が <code>'loading'</code> に変わり、対応する {{DOMxRef("Document.readystatechange_event", "readystatechange")}} イベントが発生した時刻。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.unloadEventStart","unloadEventStart")}}
+      </td>
+      <td>
+        ウィンドウ内の前回の文書がアンロードを始めた時点を示す {{DOMxRef("Window.unload_event", "unload")}} イベントが発生した時刻。前回の文書がない場合、または前回の文書やリダイレクト先の文書が同じオリジンでない場合、返される値は <code>0</code> です。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.unloadEventEnd","unloadEventEnd")}}
+      </td>
+      <td>
+        <code><a href="/ja/docs/Web/API/Window/unload_event">unload</a></code>イベントハンドラーが完了したとき。前回の文書がない場合、または前回の文書やリダイレクト先の文書が同じオリジンでない場合、返される値は <code>0</code> です。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.domInteractive","domInteractive")}}
+      </td>
+      <td>
+        パーサーがメイン文書での作業を完了し、 <a href="/ja/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> が <code>'interactive'</code> に変わり、対応する <code><a href="/ja/docs/Web/API/Document/readystatechange_event">readystatechange</a></code> イベントが発生した時刻。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.domContentLoadedEventStart","domContentLoadedEventStart")}}
+      </td>
+      <td>
+        パーサーが <code><a href="/ja/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a><//code> イベントを送信する直前、つまり解釈直後に実行できるスクリプトがすべて実行された直後。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.domContentLoadedEventEnd","domContentLoadedEventEnd")}}
+      </td>
+      <td>
+        順番があろうとなかろうと、できるだけ早く実行する必要のあるスクリプトがすべて実行された直後。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.domComplete","domComplete")}}
+      </td>
+      <td>
+        パーサーがメイン文書での作業を完了した時点、すなわち <a href="/ja/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> が <code>'complete'</code> に変わり、対応する <code><a href="/ja/docs/Web/API/Document/readystatechange_event">readystatechange</a><//code> イベントが発生した時点。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.loadEventStart","loadEventStart")}}
+      </td>
+      <td>
+        <code><a href="/ja/docs/Web/API/Window/load_event">load</a></code>イベントが現在の文書に対して送信された時刻。このイベントがまだ送信されていない場合、<code>0</code>を返します。
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("PerformanceTiming.loadEventEnd","loadEventEnd")}}
+      </td>
+      <td>
+        <code><a href="/ja/docs/Web/API/Window/load_event">load</a></code>　イベントハンドラーが終了した時刻、すなわち load イベントが完全に完了した時刻です。このイベントがまだ送信されていないか、まだ完了していない場合、<code>0</code> を返します。
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### タイミングの計算
+
+これらの値を使用して、関心のある固有のタイミングを測定することができます。
+
+```js
+const dns = time.domainLookupEnd - time.domainLookupStart;
+const tcp = time.connectEnd - time.connectStart;
+const ssl = time.requestStart - time.secureConnectionStart;
+```
+
+### 最初のバイトまでの時間
+
+[最初のバイトまでの時間](/ja/docs/Glossary/Time_to_first_byte) は、 `performanceTiming` APIが利用可能な `navigationStart` （ナビゲーションの開始）から `responseStart` （レスポンスデータの最初のバイトを受信）までの時間です。
+
+```js
+const ttfb = time.responseStart - time.navigationStart;
+```
+
+### ページ読み込み時間
+
+[ページ読み込み時間](/ja/docs/Glossary/Page_load_time) は `navigationStart` から現在の文書の load イベントが始まるまでの時間です。これらはパフォーマンスタイミング API でのみ利用可能です。
+
+```js
+let pageloadtime = time.loadEventStart - time.navigationStart;
+```
+
+### DNS 参照時間
+
+DNS 参照時間は、 [`domainLookupStart`](/ja/docs/Web/API/PerformanceResourceTiming/domainLookupStart) と [`domainLookupEnd`](/ja/docs/Web/API/PerformanceResourceTiming/domainLookupEnd) の間の時間です。これらは `performanceTiming` と `performanceNavigationTiming` API の両方で利用可能です。
+
+```js
+const dns = time.domainLookupEnd - time.domainLookupStart;
+```
+
+### TCP
+
+[TCP](/ja/docs/Glossary/TCP) のハンドシェイクにかかる時間は、接続を始めてから終わるまでの時間です。
+
+```js
+const tcp = time.connectEnd - time.connectStart;
+```
+
+### SSL ネゴシエーション
+
+[`secureConnectionStart`](/ja/docs/Web/API/PerformanceResourceTiming/secureConnectionStart) は利用できない場合は `undefined`、 [HTTPS](/ja/docs/Glossary/HTTPS) を用いない場合は `0`、利用可能で使用した場合はタイムスタンプになります。言い換えれば、安全な接続を使用した場合、 `secureConnectionStart` は[真値](/ja/docs/Glossary/Truthy)になり、 `secureConnectionStart` から `requestStart` までの時間は 0 より大きくなります。
+
+```js
+const ssl = time.requestStart - time.secureConnectionStart;
+```
+
+## パフォーマンス項目 API
+
+上記の一般的なパフォーマンスタイミングは非推奨ですが、完全に対応しています。{{domxref('PerformanceEntry', 'パフォーマンス項目 API')}} が登場し、ナビゲーションやリソースの読み込みプロセスに沿って時刻を指定したり計測したりすることができるようになりました。マークを作成することもできます。
+
+```js
+performance.getEntriesByType("navigation").forEach((navigation) => {
+  console.dir(navigation);
+});
+
+performance.getEntriesByType("resource").forEach((resource) => {
+  console.dir(resource);
+});
+
+performance.getEntriesByType("mark").forEach((mark) => {
+  console.dir(mark);
+});
+
+performance.getEntriesByType("measure").forEach((measure) => {
+  console.dir(measure);
+});
+
+performance.getEntriesByType("paint").forEach((paint) => {
+  console.dir(paint);
+});
+
+performance.getEntriesByType("frame").forEach((frame) => {
+  console.dir(frame);
+});
+```
+
+対応しているブラウザーでは、 `performance.getEntriesByType('paint')` を使用して、 `first-paint` と `first-contentful-paint` の測定値を問い合わせることができます。 `performance.getEntriesByType('navigation')` と `performance.getEntriesByType('resource')` を使用して、それぞれナビゲーションとリソースの時刻を問い合わせます。
+
+## ナビゲーションタイミング
+
+ユーザーがウェブサイトやアプリケーションをリクエストすると、[ブラウザーに表示するために](/ja/docs/Web/Performance/How_browsers_work)、ユーザーエージェントは {{glossary('DNS')}} 参照、 {{glossary('TCP handshake', 'TCP ハンドシェイク')}}、 SSL 交渉を含む一連の手順を経て、ユーザーエージェントが実際のリクエストを行い、サーバーがリクエストされた資産を返します。その後、ブラウザーは受け取ったコンテンツを解釈し、DOM、CSSOM、アクセシビリティ、レンダリングツリーを構築し、最終的にページをレンダリングします。ユーザーエージェントが文書の解釈をやめると、ユーザーエージェントは文書の準備状態を _interactive_ に設定します。解釈する必要のある遅延スクリプトがある場合は、それを実行し、[DOMContentLoaded](/ja/docs/Web/API/Document/DOMContentLoaded_event) を発行します。これで文書は読み込み後のタスクを処理できるようになり、この時点で文書は完全に読み込まれたとみなされます。
+
+```js
+const navigationTimings = performance.getEntriesByType("navigation");
+```
+
+`performance.getEntriesByType('navigation')` は、 navigation 型の [PerformanceEntry](/ja/docs/Web/API/PerformanceEntry) オブジェクトの配列を返します。
+
+![performance.getEntriesByType('navigation'); がこの文書のコンソールに入力されたときの結果。](perfgentrybytypenavigation.png)
+
+このようなタイミングから、多くのことを得ることができます。上の画像では、 _name_ プロパティを通して、時刻を計測しているファイルがこの文書化であることがわかります。 この説明の残りの部分では、以下の変数を使用します。
+
+```js
+const timing = performance.getEntriesByType("navigation")[0];
+```
+
+### プロトコル
+
+次の問い合わせを使用することで、プロトコルをチェックすることができます。
+
+```js
+const protocol = timing.nextHopProtocol;
+```
+
+リソースをフェッチするために使用したネットワークプロトコルを返します。この場合は `http/2` のために `h2` を返します。
+
+### 圧縮
+
+圧縮率を取得するには、 transferSize を decodedBodySize で割り、それを 100% から引きます。 74% 以上が節約されたことが分かります。
+
+```js
+const compressionSavings = 1 - timing.transferSize / timing.decodedBodySize;
+```
+
+次のもので計算できます。
+
+```js
+const compressionSavings = 1 - timing.encodedBodySize / timing.decodedBodySize;
+```
+
+ただし、 `transferSize` にはオーバーヘッドのバイトが含まれます。
+
+比較のためにネットワークタブを見てみると、非圧縮で 87.24KB のサイズのファイルを 22.04KB で転送しています。
+
+![ネットワークタブを介して転送されたバイトとサイズの表示](bytesdownloaded.png)
+
+これらの数値で計算すると、`1 - (22.04 / 87.24) = 0.747` という同じ結果が取得されます。ナビゲーションタイミングは、プログラムで転送のサイズと帯域幅の節約を調べる方法を提供します。
+
+これはこの単一の文書のサイズです。つまり、このリソースだけのサイズであり、すべてのリソースを合わせたサイズではないことに注意してください。しかし、所要時間、読み込むイベント、DOM 関連の時刻は、この単一の資産ではなく、ナビゲーション全体に関係しています。クライアント側のウェブアプリケーションは、転送サイズが 10000 以下、デコードする本体サイズが 30000 以下では、これよりも高速に見えるかもしれませんが、JavaScript や CSS、メディア資産が肥大化していないことを意味しているわけではありません。圧縮率を調べることは重要ですが、 DOMContentLoaded イベントが終わってから DOM が完了するまでの時間や期間も確実に調べてください。メインスレッドで JavaScript を長時間実行すると、ユーザーインターフェイスが応答しなくなる可能性があるからです。
+
+### リクエスト時間
+
+APIは、あなたが望むかもしれないすべての測定を提供するわけではありません。例えば、リクエストにかかった時間は？答えを得るために、ある測定値を使用することができます。
+
+レスポンスタイムを測定するには、レスポンス開始時刻からリクエスト開始時刻を引きます。リクエスト開始時刻は、ユーザーエージェントがサーバー、関連するアプリケーションキャッシュ、またはローカルリソースからリソースのリクエストを始める直前の時刻です。レスポンス開始時刻は、ユーザーエージェントの HTTP パーサーが、関連するアプリケーションキャッシュから、あるいはローカルリソースから、あるいはサーバーから、レスポンスの最初のバイトを受信した直後の時刻です。
+
+```js
+const request = timing.responseStart - timing.requestStart;
+```
+
+### load イベントの所要時間
+
+現在の文書の load イベントが発生する直前から、現在の文書の load イベントが完全に終了した時刻までのタイムスタンプを引くことで、 load イベントの所要時間を測定することができます。
+
+```js
+const load = timing.loadEventEnd - timing.loadEventStart;
+```
+
+### DOMContentLoaded イベント
+
+DOMContentLoaded イベントの所要時間は、ユーザーエージェントが DOMContentLoaded イベントを発行する直前の時刻値から、イベントが完全に終了した直後の時刻値を引くことによって測定されます。これを 50ms またはそれ以上に保つことで、確実にレスポンスの良いユーザーインターフェイスを保証することに役立ちます。
+
+```js
+const DOMContentLoaded =
+  timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
+```
+
+### 所要時間
+
+所要時間があります。所要時間は [PerformanceNavigationTiming.loadEventEnd](/ja/docs/Web/API/PerformanceNavigationTiming/loadEventEnd) プロパティと [PerformanceEntry.startTime](/ja/docs/Web/API/PerformanceEntry/startTime) プロパティの差です。
+
+PerformanceNavigationTiming インターフェイスは、`navigate`、`reload`、`back_forward`、`prerender` を返すことで、計測しているナビゲーションの種類に関する情報も提供します。
+
+## リソースタイミング
+
+ナビゲーションタイミングはメインページ（一般に、他のすべての資産がリクエストされた HTML ファイル）のパフォーマンスを測定するのに対し、リソースのタイミングは個々のリソース（メインページから呼び出される資産、およびそれらのリソースがリクエストする資産）のタイミングを測定します。測定の多くは似ています。 DNS 参照、 TCP ハンドシェイク、安全な接続の開始はドメインごとに 1 回ずつ行われます。
+
+![リソースの時刻の図](resourcetiming-timestamps.jpg)
+
+主な用途は、それぞれのリソースを見ていくことです。
+
+## 関連情報
+
+- {{domxref("PerformanceNavigationTiming")}}
+- {{domxref("PerformanceResourceTiming")}},
+- {{domxref("PerformanceMark")}}
+- {{domxref("PerformanceMeasure")}}
+- {{domxref("PerformancePaintTiming")}}

From 531a09139ff5c6851fe2a924e7a52c285135ebb3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 25 Sep 2023 00:00:41 +0900
Subject: [PATCH 206/268] =?UTF-8?q?2023/07/04=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/security/insecure_passwords/index.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/security/insecure_passwords/index.md b/files/ja/web/security/insecure_passwords/index.md
index 547638a841a14c..75557f357199e4 100644
--- a/files/ja/web/security/insecure_passwords/index.md
+++ b/files/ja/web/security/insecure_passwords/index.md
@@ -1,13 +1,17 @@
 ---
 title: 安全でないパスワード
 slug: Web/Security/Insecure_passwords
+l10n:
+  sourceCommit: e74627e6fd9ba19696b918c2bdddfff8aa160787
 ---
 
+{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
+
 HTTP を通じてログインフォームを提供することは、ユーザーのパスワードを暴くための広範にわたる攻撃に対して特に危険です。ネットワークの盗聴者は、ネットワークを覗き見たり、転送によって提供されたページを変更したりしてユーザーのパスワードを盗むことができます。
 
-{{glossary("HTTPS")}} プロトコルは、ネットワーク上での盗聴 (機密性) や改ざん (完全性) といった脅威から、ユーザーのデータを保護できるように設計されています。ユーザーのデータを扱うウェブサイトは、ユーザーを攻撃者から守るために HTTPS を使用してください。 HTTPS を使わなければ、ユーザーの情報 (ログインの資格情報など) が盗まれるのは当たり前になってしまいます。このことを [Firesheep](https://codebutler.github.io/firesheep/) が証明したのは有名です。
+[HTTPS](/ja/docs/Glossary/HTTPS) プロトコルは、ネットワーク上での盗聴（機密性）や改ざん（完全性）といった脅威から、ユーザーのデータを保護できるように設計されています。ユーザーのデータを扱うウェブサイトは、ユーザーを攻撃者から守るために HTTPS を使用してください。 HTTPS を使わなければ、ユーザーの情報（ログインの資格情報など）が盗まれるのは当たり前になってしまいます。このことを [Firesheep](https://codebutler.github.io/firesheep/) が証明したのは有名です。
 
-この問題を修正するためには、 SSL/{{glossary("TLS")}} 証明書をサーバーにインストールし構成してください。様々なベンダーが無料または有料の証明書を提供しています。クラウドプラットフォームを使用しているのであれば、 HTTPS を有効にする方法を独自に持っているかもしれません。
+この問題を修正するためには、 SSL/[TLS](/ja/docs/Glossary/TLS) 証明書をサーバーにインストールし構成してください。様々なベンダーが無料または有料の証明書を提供しています。クラウドプラットフォームを使用しているのであれば、 HTTPS を有効にする方法を独自に持っているかもしれません。
 
 ## パスワードの使い回しに関するメモ
 
@@ -18,5 +22,3 @@ HTTP を通じてログインフォームを提供することは、ユーザー
 ## 関連情報
 
 - [No More Passwords over HTTP, Please!](https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/) — detailed blog post with more information, and FAQ.
-
-{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}

From 61dd10032cc30a031598e7b794308ea6dc7f740d Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Thu, 28 Sep 2023 16:00:02 +0800
Subject: [PATCH 207/268] [zh-cn]: update translation of Number.toPrecision()
 (#16150)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../number/toprecision/index.md               | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md
index 01416872eba79c..44f622e0f4647e 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/toprecision/index.md
@@ -3,36 +3,39 @@ title: Number.prototype.toPrecision()
 slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
 ---
 
-{{JSRef("Global_Objects", "Number")}}
+{{JSRef}}
 
-## 概述
+{{jsxref("Number")}} 值的 **`toPrecision()`** 方法返回一个以指定精度表示该数字的字符串。
 
-**`toPrecision()`** 方法以指定的精度返回该数值对象的字符串表示。
+{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}
 
 ## 语法
 
-```plain
-numObj.toPrecision(precision)
+```js-nolint
+toPrecision()
+toPrecision(precision)
 ```
 
 ### 参数
 
 - `precision` {{optional_inline}}
-  - : 一个用来指定有效数个数的整数。
+  - : 一个指定有效位数的整数。
 
 ### 返回值
 
-以定点表示法或指数表示法表示的一个数值对象的字符串表示，四舍五入到 `precision` 参数指定的显示数字位数。查看 {{jsxref("Number.prototype.toFixed()")}} 方法关于四舍五入的讨论，同样应用于 `toPrecision` 方法。
+一个以定点表示法或指数表示法表示 {{jsxref("Number")}} 对象的字符串，该字符串四舍五入到 `precision` 个有效数字。有关四舍五入的讨论，请参阅 {{jsxref("Number.prototype.toFixed()")}} 方法的描述，其也适用于 `toPrecision()`。
 
-如果忽略 `precision` 参数，则该方法表现类似于 {{jsxref("Number.prototype.toString()")}}。如果该参数是一个非整数值，将会向下舍入到最接近的整数。
+如果 `precision` 参数被省略，则与 {{jsxref("Number.prototype.toString()")}} 行为相同。如果 `precision` 参数不是整数，则将其四舍五入到最近的整数。
 
 ### 异常
 
 - {{jsxref("Global_Objects/RangeError", "RangeError")}}
-  - : 如果 _precison_ 参数不在 1 和 100（包括）之间，将会抛出一个 `RangeError` 。执行环境也可以支持更大或更小的范围。ECMA-262 只需要最多 21 位显示数字。
+  - : 如果 `precision` 不在 `1` 和 `100` 之间（包含两端），则抛出该错误。
 
 ## 示例
 
+### 使用 `toPrecision`
+
 ```js
 let numObj = 5.123456;
 
@@ -48,7 +51,7 @@ console.log(numObj.toPrecision(5)); // 输出 '0.00012300'
 console.log(numObj.toPrecision(2)); // 输出 '0.00012'
 console.log(numObj.toPrecision(1)); // 输出 '0.0001'
 
-// 请注意，在某些情况下可能会返回科学计数法字符串
+// 请注意，在某些情况下可能会返回指数表示法字符串
 console.log((1234.5).toPrecision(2)); // 输出 '1.2e+3'
 ```
 
@@ -60,7 +63,7 @@ console.log((1234.5).toPrecision(2)); // 输出 '1.2e+3'
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
 - {{jsxref("Number.prototype.toFixed()")}}
 - {{jsxref("Number.prototype.toExponential()")}}

From 3facf984e292b95735fd1abed40381f5eda21f5d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 25 Sep 2023 09:24:39 +0900
Subject: [PATCH 208/268] =?UTF-8?q?2023/07/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/xpath/snippets/index.md | 113 +++++++++++----------------
 1 file changed, 44 insertions(+), 69 deletions(-)

diff --git a/files/ja/web/xpath/snippets/index.md b/files/ja/web/xpath/snippets/index.md
index 581f190f206fc7..08a37b86745580 100644
--- a/files/ja/web/xpath/snippets/index.md
+++ b/files/ja/web/xpath/snippets/index.md
@@ -1,9 +1,13 @@
 ---
 title: XPath スニペット
 slug: Web/XPath/Snippets
+l10n:
+  sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a
 ---
 
-この記事ではいくつか XPath コードスニペットを提供します。それは XPath 機能を JavaScript コードに公開する[DOM Level 3 XPath 仕様](http://www.w3.org/TR/DOM-Level-3-XPath/)の標準インタフェースに基づく簡単なユーティリティ関数の簡単な例です。スニペットは実際にあなた自身のコードの中で使用できる関数です。
+{{XsltSidebar}}
+
+この記事ではいくつか XPath コードスニペットを提供します。それは XPath 機能を JavaScript コードに公開する [DOM Level 3 XPath 仕様](https://www.w3.org/TR/DOM-Level-3-XPath/)の標準インタフェースに基づく簡単な**ユーティリティ関数**の簡単な例です。スニペットは実際に自身のコードの中で使用できる関数です。
 
 ### ノード指定の評価関数
 
@@ -12,45 +16,32 @@ slug: Web/XPath/Snippets
 ##### 例:ノード指定のカスタム `evaluateXPath()` ユーティリティ関数を定義する
 
 ```js
-// Evaluate an XPath expression aExpression against a given DOM node
-// or Document object (aNode), returning the results as an array
-// thanks wanderingstan at morethanwarm dot mail dot com for the
-// initial work.
+// 指定された DOM ノードまたは Document オブジェクト (aNode) に対して
+// XPath 式 aExpression を評価し、結果を配列として返します。
+// 最初の作業をしてくれた morethanwarm dot mail dot com の
+// wanderingstan に感謝します。
 function evaluateXPath(aNode, aExpr) {
-  var xpe = new XPathEvaluator();
-  var nsResolver = xpe.createNSResolver(
-    aNode.ownerDocument == null
+  const xpe = new XPathEvaluator();
+  const nsResolver = xpe.createNSResolver(
+    aNode.ownerDocument === null
       ? aNode.documentElement
       : aNode.ownerDocument.documentElement,
   );
-  var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
-  var found = [];
-  var res;
+  const result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
+  const found = [];
+  let res;
   while ((res = result.iterateNext())) found.push(res);
   return found;
 }
 ```
 
-この関数は **`new XPathEvaluator()`** コンストラクタを使用していますが、Firefox、Chrome、Opera、Safari ではサポートされているものの、Edge または Internet Explorer ではサポートされていません。Edge または Internet Explorer のユーザーがアクセスできる Web ドキュメント内のスクリプトは、 **`new XPathEvaluator()`** の呼び出しを次のフラグメントに置き換える必要があります。
-
-```js
-// XPathEvaluator is implemented on objects that implement Document
-var xpe = aNode.ownerDocument || aNode;
-```
-
-その場合、[XPathNSResolver](/ja/docs/Web/API/document/createNSResolver)の作成は次のように単純化できます。
+ただし、`createNSResolver` は、XPath 式の名前空間接頭辞が問い合わせる文書の名前空間接頭辞と一致する（かつ既定の名前空間が使用されていない (回避策については [document.createNSResolver](/ja/docs/Web/API/Document/createNSResolver) を参照)）ことが確認されている場合にのみ使用する必要があります。それ以外の場合は、XPathNSResolver の独自の実装を提供する必要があります。
 
-```js
-var nsResolver = xpe.createNSResolver(xpe.documentElement);
-```
-
-ただし、`createNSResolver`は、XPath 式の名前空間プレフィックスが問い合わせる文書の名前空間プレフィックスと一致する（かつデフォルトの名前空間が使用されていない(回避策については[document.createNSResolver](/ja/docs/Web/API/document/createNSResolver)を参照)）ことが確認されている場合にのみ使用する必要があります。それ以外の場合は、XPathNSResolver の独自の実装を提供する必要があります。
-
-[XMLHttpRequest](/ja/docs/Web/API/XMLHttpRequest)を使用してローカルまたはリモートの XML ファイルを DOM ツリー（[XML のパースとシリアライズ](/ja/docs/Parsing_and_serializing_XML)を参照）に読み込む場合、`evaluateXPath()`の最初の引数は`req.responseXML`である必要があります。
+[XMLHttpRequest](/ja/docs/Web/API/XMLHttpRequest) を使用してローカルまたはリモートの XML ファイルを DOM ツリー（[XML の解釈とシリアライズ](/ja/docs/Web/Guide/Parsing_and_serializing_XML)を参照）に読み込む場合、`evaluateXPath()`の最初の引数は`req.responseXML`である必要があります。
 
 #### 使用例
 
-次の XML ドキュメント（[DOM ツリーの作成方法](/ja/docs/How_to_create_a_DOM_tree)と[XML のパースとシリアライズ](/ja/docs/Parsing_and_serializing_XML)も参照してください）があるとします。
+次の XML ドキュメント（[DOM ツリーの作成方法](/ja/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree)と[XML の解釈とシリアライズ](/ja/docs/Web/Guide/Parsing_and_serializing_XML)も参照してください）があるとします。
 
 ##### 例: カスタム `evaluateXPath()` ユーティリティ関数と一緒に使用する XML 文書
 
@@ -70,15 +61,15 @@ var nsResolver = xpe.createNSResolver(xpe.documentElement);
 </people>
 ```
 
-XPath 式を使用してドキュメントを「照会」できるようになりました。 DOM ツリーを眺めることでも同様の結果が得られますが、XPath 式を使用する方がはるかに高速で強力です。id 属性に頼ることができるのであれば、`document.getElementById()`はまだ強力ですが、XPath ほど強力ではありません。下記は用例です。
+XPath 式を使用して文書を「照会」できるようになりました。 DOM ツリーを眺めることでも同様の結果が得られますが、 XPath 式を使用する方がはるかに高速で強力です。id 属性に頼ることができるのであれば、 `document.getElementById()` はまだ強力ですが、 XPath ほど強力ではありません。下記は用例です。
 
 ##### 例: カスタムの `evaluateXPath()` ユーティリティ関数がある JavaScript コード
 
 ```js
 // display the last names of all people in the doc
-var results = evaluateXPath(people, "//person/@last-name");
-for (var i in results)
-  alert("Person #" + i + " has the last name " + results[i].value);
+let results = evaluateXPath(people, "//person/@last-name");
+for (const i in results)
+  console.log(`Person #${i} has the last name ${results[i].value}`);
 
 // get the 2nd person node
 results = evaluateXPath(people, "/people/person[2]");
@@ -88,37 +79,36 @@ results = evaluateXPath(people, "//person[address/@city='denver']");
 
 // get all the addresses that have "south" in the street name
 results = evaluateXPath(people, "//address[contains(@street, 'south')]");
-alert(results.length);
+console.log(results.length);
 ```
 
 ### docEvaluateArray
 
-以下は、ネームスペースリゾルバなどの特別な必要性に関わらず、XPath の結果を配列に取得（順序づけ）する簡単なユーティリティ関数です。そうでない場合は、[`document.evaluate()`](/ja/docs/Web/API/document/evaluate)のより複雑な構文は避けてください [`XPathResult`](/ja/docs/Web/API/XPathResult)の特別なイテレータ（代わりに配列を返す）を使用する必要があります。
+以下の例は、名前空間リゾルバーなどの特別な必要があるかどうかに関係なく、XPath の結果を配列に（順序付きで）取得する単純なユーティリティ関数です。これは、 [`document.evaluate()`](/ja/docs/Web/API/Document/evaluate) の複雑な構文が要求されない場合や、 [`XPathResult`](/ja/docs/Web/API/XPathResult) において（代わりに配列を返すことで）特別なイテレーターを使わなければならない状況を避けることができます。
 
 ##### 例: シンプルな `docEvaluateArray()` ユーティリティ関数を定義する
 
 ```js
 // Example usage:
-// var els = docEvaluateArray('//a');
-// alert(els[0].nodeName); // gives 'A' in HTML document with at least one link
+// const els = docEvaluateArray('//a');
+// console.log(els[0].nodeName); // gives 'A' in HTML document with at least one link
 
 function docEvaluateArray(expr, doc, context, resolver) {
-  var i,
-    result,
-    a = [];
+  let i;
+  const a = [];
   doc = doc || (context ? context.ownerDocument : document);
   resolver = resolver || null;
   context = context || doc;
 
-  result = doc.evaluate(
+  const result = doc.evaluate(
     expr,
     context,
     resolver,
     XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
     null,
   );
-  for (i = 0; i < result.snapshotLength; i++) {
-    a[i] = result.snapshotItem(i);
+  for (let i = 0; i < result.snapshotLength; i++) {
+    a.push(result.snapshotItem(i));
   }
   return a;
 }
@@ -126,14 +116,14 @@ function docEvaluateArray(expr, doc, context, resolver) {
 
 ### getXPathForElement
 
-次の関数は、要素と XML 文書を渡して、その要素につながる一意の文字列 XPath 式を検索することを可能にします。
+次の関数により、要素と XML 文書を渡して、その要素につながる一意の文字列 XPath 式を検索することができます。
 
 ##### 例: `getXPathForElement()` ユーティリティ関数を定義する
 
 ```js
 function getXPathForElement(el, xml) {
-  var xpath = "";
-  var pos, tempitem2;
+  let xpath = "";
+  let pos, tempitem2;
 
   while (el !== xml.documentElement) {
     pos = 0;
@@ -146,40 +136,25 @@ function getXPathForElement(el, xml) {
       tempitem2 = tempitem2.previousSibling;
     }
 
-    xpath =
-      "*[name()='" +
-      el.nodeName +
-      "' and namespace-uri()='" +
-      (el.namespaceURI === null ? "" : el.namespaceURI) +
-      "'][" +
-      pos +
-      "]" +
-      "/" +
-      xpath;
+    xpath = `*[name()='${el.nodeName}' and namespace-uri()='${
+      el.namespaceURI ?? ""
+    }'][${pos}]/${xpath}`;
 
     el = el.parentNode;
   }
-  xpath =
-    "/*" +
-    "[name()='" +
-    xml.documentElement.nodeName +
-    "' and namespace-uri()='" +
-    (el.namespaceURI === null ? "" : el.namespaceURI) +
-    "']" +
-    "/" +
-    xpath;
+  xpath = `/*[name()='${xml.documentElement.nodeName}' and namespace-uri()='${
+    el.namespaceURI ?? ""
+  }']/${xpath}`;
   xpath = xpath.replace(/\/$/, "");
   return xpath;
 }
 ```
 
-### 関連資料
+### 資料
 
 - [XPath](/ja/docs/Web/XPath)
-- [Forum discussion on this topic](http://forums.mozillazine.org/viewtopic.php?t=229106)
-
-## 合わせてお読みください
+- [このトピックのフォーラムでの議論](https://forums.mozillazine.org/viewtopic.php?t=229106)
 
-- [JavaScript で XPath を使用する](/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript)
+## 関連情報
 
-{{QuickLinksWithSubpages("/ja/docs/Web/XPath")}}
+- [JavaScript での XPath の使用](/ja/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript)

From e7023eabb4fb6e5790603d32f4756ca1c5d63afb Mon Sep 17 00:00:00 2001
From: Jason Lam <jasonlamv-t@hotmail.com>
Date: Thu, 28 Sep 2023 23:04:16 +0800
Subject: [PATCH 209/268] [zh-cn]: update translation of
 Number.toLocaleString() (#16149)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../number/tolocalestring/index.md            | 38 +++++--------------
 1 file changed, 10 insertions(+), 28 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md b/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md
index c220712757d61e..46c050ebb5750d 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/number/tolocalestring/index.md
@@ -5,7 +5,9 @@ slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
 
 {{JSRef}}
 
-**`toLocaleString()`** 方法返回这个数字在特定语言环境下的表示字符串。在使用具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现时，此方法仅仅简单调用了 `Intl.NumberFormat`。
+{{jsxref("Number")}} 值的 **`toLocaleString()`** 方法返回这个数字特定于语言环境的表示字符串。在具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现中，此方法仅仅简单调用了 `Intl.NumberFormat`。
+
+当格式化大量数字时，最好创建一个 {{jsxref("Intl.NumberFormat")}} 对象，并使用其提供的 {{jsxref("Intl/NumberFormat/format", "format()")}} 方法。
 
 {{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}
 
@@ -21,7 +23,7 @@ toLocaleString(locales, options)
 
 `locales` 和 `options` 参数让应用程序可以指定要进行格式转换的语言，并且定制函数的行为。
 
-在使用具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现时，这些参数与 [`Intl.NumberFormat()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) 构造器的参数相同。不支持 `Intl.NumberFormat` 时，会忽略参数，使得使用的区域设置和返回的字符串格式完全由实现决定。
+在使用具有 [`Intl.NumberFormat` API](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 支持的实现时，这些参数与 [`Intl.NumberFormat()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) 构造函数的参数相同。不支持 `Intl.NumberFormat` 时，会忽略参数，使得使用的区域设置和返回的字符串格式完全由实现决定。
 
 - `locales` {{optional_inline}}
 
@@ -33,7 +35,7 @@ toLocaleString(locales, options)
 
   - : 调整输出格式的对象。与 `Intl.NumberFormat()` 构造函数的 [`options`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) 参数相同。
 
-    在无 `Intl.NumberFormat` 支持的实现中，这个参数是忽略的。
+    在无 `Intl.NumberFormat` 支持的实现中，这个参数是被忽略的。
 
 请查阅 [`Intl.NumberFormat()` 构造函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)以了解这些参数的详细信息，以及如何使用它们。
 
@@ -43,10 +45,6 @@ toLocaleString(locales, options)
 
 在使用 `Intl.NumberFormat` 的实现中，这与 `new Intl.NumberFormat(locales, options).format(number)` 调用等价。
 
-## 性能
-
-当格式化非常多的数字时，最好创建一个 {{jsxref("Intl.NumberFormat")}} 对象，并且使用其 {{jsxref("Intl/NumberFormat/format", "format")}} 属性提供的方法。
-
 ## 示例
 
 ### 使用 toLocaleString()
@@ -56,39 +54,23 @@ toLocaleString(locales, options)
 ```js
 const number = 3500;
 
-console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale
+console.log(number.toLocaleString()); // "3,500"，如果区域设置为美国英语
 ```
 
-### 检查 `locales` 和 `options` 参数的支持
+### 检查 locales 和 options 参数的支持
 
-并不是所有实现都需要支持 ECMA-402 标准（国际化 API）。如果浏览器不支持该标准，则参数 `locales` 和 `options` 参数必须都要忽略掉。可以依靠使用非法参数时规定抛出的 {{jsxref("Global_Objects/RangeError", "RangeError")}} 异常来检测支持的情况：
+`locales` 和 `options` 参数可能不被所有实现支持，因为国际化 API 的支持是可选的，一些系统可能没有必要的数据。对于没有国际化支持的实现，`toLocaleString()` 总是使用系统的区域设置，这可能不是你想要的。因为任何支持 `locales` 和 `options` 参数的实现必须支持 {{jsxref("Intl")}} API，你可以检查后者的存在来确定是否支持：
 
 ```js
 function toLocaleStringSupportsLocales() {
-  const number = 0;
-  try {
-    number.toLocaleString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-```
-
-早于 ES5.1 的实现中，携带非法参数调用 `toLocaleString` 不需要抛出范围异常。在所有主机环境下，包括那些支持比 ed 5.1 还早的 ECMA-262 的环境，都能有效检测的方法是直接检测 ECMA-402 中的其他特性，它指定 `Number.prototype.toLocaleString` 需要支持地区选项：
-
-```js
-function toLocaleStringSupportsOptions() {
-  return !!(
+  return (
     typeof Intl === "object" &&
-    Intl &&
+    !!Intl &&
     typeof Intl.NumberFormat === "function"
   );
 }
 ```
 
-它测试全局的 `Intl` 对象，检测它不是 `null` 并且有 `NumberFormat` 的方法。
-
 ### 使用 locales
 
 这个示例展示了不同地区数字格式的差异。为了设置你的应用程序界面下使用的语言格式，请确保使用 `locales` 参数指定了使用的语言（可能还有一些备用语言）：

From 641eae193865e1e7b00f1efa09a70f0a859f7e19 Mon Sep 17 00:00:00 2001
From: Daniel Vaquero <48688355+daniel-vaquero@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:50:31 +0200
Subject: [PATCH 210/268] Spanish Typo (#16186)

Grammar correction: conexines -> conexiones
---
 files/es/web/http/headers/strict-transport-security/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/es/web/http/headers/strict-transport-security/index.md b/files/es/web/http/headers/strict-transport-security/index.md
index 24174b146baf4e..fd44344cb2145c 100644
--- a/files/es/web/http/headers/strict-transport-security/index.md
+++ b/files/es/web/http/headers/strict-transport-security/index.md
@@ -36,7 +36,7 @@ Esto habilita el potencial ataque man-in-the-middle, donde el redireccionamiento
 
 El encabezado HTTP Strict Transport Security permite a un sitio web informar al navegador que nunca cargue el sitio usando HTTP y que debe automáticamente convertir todos los intentos de acceso HTTP a HTTPS.
 
-> **Nota:** El encabezado `Strict-Transport-Security` es **ignorado** por el navegador cuando el sitio es accedido usando HTTP; esto es porque un atacante podría interceptar las conexines HTTP e inyectar el encabezado o removerlo. Cuando el sitio es accedido a través de HTTPS con un certificado sin errores, el navegador sabe que el sitio es capaz de usar HTTPS y cumple con lo indicado en el encabezado `Strict-Transport-Security`.
+> **Nota:** El encabezado `Strict-Transport-Security` es **ignorado** por el navegador cuando el sitio es accedido usando HTTP; esto es porque un atacante podría interceptar las conexiones HTTP e inyectar el encabezado o removerlo. Cuando el sitio es accedido a través de HTTPS con un certificado sin errores, el navegador sabe que el sitio es capaz de usar HTTPS y cumple con lo indicado en el encabezado `Strict-Transport-Security`.
 
 ### Un escenario de ejemplo
 

From 383ff94552a654616b8f5d24417532ac87f47545 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:22:10 +0900
Subject: [PATCH 211/268] [ko]: add index.md for `web/glossary/cryptography`
 (#15790)

[add]: add index.md for web/glossary/cryptography
---
 files/ko/glossary/cryptography/index.md | 29 +++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 files/ko/glossary/cryptography/index.md

diff --git a/files/ko/glossary/cryptography/index.md b/files/ko/glossary/cryptography/index.md
new file mode 100644
index 00000000000000..6b79146a538e7f
--- /dev/null
+++ b/files/ko/glossary/cryptography/index.md
@@ -0,0 +1,29 @@
+---
+title: 암호화 기법 (Cryptography)
+slug: Glossary/Cryptography
+l10n:
+  sourceCommit: 0025477aa4af0321b4c1e3e60c8f6bca08983a60
+---
+
+{{GlossarySidebar}}
+
+**암호화 기법** 또는 암호학은 메시지를 안전하게 인코딩하고 전송하는 방법을 연구하는 과학입니다. 암호학은 안전하지 않은 환경에서 메시지를 인코딩 및 디코딩하는 데 사용되는 알고리즘과 해당 애플리케이션을 설계하고 연구합니다.
+
+암호학은 **데이터 기밀성** 뿐만 아니라 **식별**, **인증**, **부인 방지** 및 **데이터 무결성**도 처리합니다. 따라서 **암호화 시스템**이라는 맥락에서 암호화 방법의 사용법도 연구합니다.
+
+## 같이 보기
+
+- 위키백과의 [암호학](https://en.wikipedia.org/wiki/Cryptography)
+- [MDN 웹 문서 용어사전](/ko/docs/Glossary)
+
+  - {{Glossary("Block cipher mode of operation", "블록 암호 운용 방식")}}
+  - {{Glossary("Cipher", "암호")}}
+  - {{Glossary("Ciphertext", "암호문")}}
+  - {{Glossary("Cipher suite", "암호화 스위트")}}
+  - {{Glossary("Cryptanalysis", "암호 해독")}}
+  - {{Glossary("Decryption", "복호화")}}
+  - {{Glossary("Encryption", "암호화")}}
+  - {{Glossary("Key", "키")}}
+  - {{Glossary("Plaintext", "평문")}}
+  - {{Glossary("Public-key cryptography", "공개키 암호화")}}
+  - {{Glossary("Symmetric-key cryptography", "대칭키 암호화")}}

From 0443b59fc3e3be6a1bceb7fccbc88a1826860d87 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:23:22 +0900
Subject: [PATCH 212/268] [ko]: add index.md for `web/glossary/closure`
 (#15820)

[add]: add index.md for web/glossary/closure
---
 files/ko/glossary/closure/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/ko/glossary/closure/index.md

diff --git a/files/ko/glossary/closure/index.md b/files/ko/glossary/closure/index.md
new file mode 100644
index 00000000000000..fdffb47da9926d
--- /dev/null
+++ b/files/ko/glossary/closure/index.md
@@ -0,0 +1,15 @@
+---
+title: 클로저 (Closure)
+slug: Glossary/Closure
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+실행의 **{{glossary("scope", "범위")}}**를 정의하는 바인딩입니다. {{glossary("JavaScript")}}에서, **{{glossary("function","함수")}}**는 클로저 문맥을 생성합니다.
+
+## 같이 보기
+
+- 위키백과의 [클로저](https://en.wikipedia.org/wiki/Closure_%28computer_programming%29)
+- MDN의 [클로저](/ko/docs/Web/JavaScript/Closures)

From 58473a6ca10a935cf2762c9c7e4373822aa89c69 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:36:58 +0900
Subject: [PATCH 213/268] [ko]: add index.md for `web/glossary/conditional`
 (#15849)

* [add]: add index.md for web/glossary/conditional

* Update files/ko/glossary/conditional/index.md

---------

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>
---
 files/ko/glossary/conditional/index.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 files/ko/glossary/conditional/index.md

diff --git a/files/ko/glossary/conditional/index.md b/files/ko/glossary/conditional/index.md
new file mode 100644
index 00000000000000..c1cfdf31f708bc
--- /dev/null
+++ b/files/ko/glossary/conditional/index.md
@@ -0,0 +1,19 @@
+---
+title: 조건 (Conditional)
+slug: Glossary/Conditional
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**조건**은 조건의 완료되었는지 아닌지에 따라 정상적인 코드 실행을 중단하거나 변경할 수 있는 규칙의 집합입니다.
+
+특정 조건을 만족하게 되면, 하나 이상의 명령이 실행됩니다. 그렇지 않다면, 또 다른 명령이 실행됩니다. 조건이 아직 만족하지 않는 상태 동안 명령어 또는 명령어 세트의 실행을 반복하는 것도 가능합니다.
+
+## 같이 보기
+
+- 위키백과의 [조건문](https://en.wikipedia.org/wiki/Exception_handling#Condition_systems)
+- MDN의 [제어 흐름](/ko/docs/Glossary/Control_flow)
+- [코드에서 결정하기 — 조건절](/ko/docs/Learn/JavaScript/Building_blocks/conditionals)
+- MDN의 [JavaScript의 제어 흐름 및 오류 처리](/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)

From fdd01d372363fbc6416dc930ae9ab2eeacf30f69 Mon Sep 17 00:00:00 2001
From: hanyujie2002 <yujiehan2002@outlook.com>
Date: Fri, 29 Sep 2023 18:39:31 +0800
Subject: [PATCH 214/268] zh-cn: init translation of performance/image (#16039)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../learn/performance/multimedia/index.md     | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 files/zh-cn/learn/performance/multimedia/index.md

diff --git a/files/zh-cn/learn/performance/multimedia/index.md b/files/zh-cn/learn/performance/multimedia/index.md
new file mode 100644
index 00000000000000..b294cccfab85c2
--- /dev/null
+++ b/files/zh-cn/learn/performance/multimedia/index.md
@@ -0,0 +1,151 @@
+---
+title: 多媒体：图片
+slug: Learn/Performance/Multimedia
+---
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}
+
+媒体，即图片和视频，占据了平均网站下载字节的 70% 以上。从下载性能的角度来看，消除媒体和减少文件大小是最容易解决的问题。本文将介绍优化图像和视频以改善网页性能的方法。
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">前提：</th>
+      <td>
+        基本的计算机操作能力，<a
+          href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
+          >已安装基本软件</a
+        >，以及基本的<a href="/zh-CN/docs/Learn/Getting_started_with_the_web"
+          >客户端 Web 技术知识</a
+        >。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">目标：</th>
+      <td>
+        了解各种图像格式、它们对性能的影响，以及如何减少图像对页面整体加载时间的影响。
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+> **备注：** 这是对 Web 上多媒体传输进行优化的概要介绍，只涵盖了一般原理和技术。如需更深入的指南，请参阅 <https://images.guide>。
+
+## 为何优化多媒体？
+
+对于一般网站而言，[其带宽的 51% 来自图像，其次是视频占 25%](https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367)，因此可以说处理和优化多媒体内容非常重要。
+
+你需要考虑数据使用情况。许多人使用的是有限流量套餐，甚至是按使用量付费，每兆字节都要付费。这不仅仅是新兴市场的问题。截至 2018 年，[英国仍有 24% 的用户使用按使用量付费](https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf)。
+
+你还需要考虑内存问题，因为许多移动设备的 RAM 有限。请记住，当图像下载后，它们需要存储在内存中。
+
+## 优化图像传递
+
+尽管图像下载是带宽消耗最大的部分，但其对[感知性能](/zh-CN/docs/Learn/Performance/Perceived_performance)的影响远低于许多人的预期（主要是因为页面文本内容可以立即下载，用户可以在图像到达时看到它们被渲染）。然而，为了提供良好的用户体验，访问者仍然应尽快看到图像。
+
+### 加载策略
+
+对于大多数网站来说，最大的改进之一是[延迟加载](/zh-CN/docs/Web/Performance/Lazy_loading)可视区域以下的图像，而不是在初始页面加载时，无论访客是否滚动查看，都下载所有这些内容。许多 JavaScript 库可以为你实现此功能，例如 [lazysizes](https://github.com/aFarkas/lazysizes)，浏览器供应商目前正在开发一种原生的 `lazyload` 属性，目前处于实验阶段。
+
+除了加载一部分图像之外，接下来你应该考虑图像本身的格式：
+
+- 你是否加载了最优的文件格式？
+- 你是否对图像进行了良好的压缩？
+- 你是否加载了正确的尺寸？
+
+#### 最优格式
+
+最优的文件格式通常取决于图像的特点。
+
+> **备注：** 有关图像类型的一般信息，请参阅[图像文件类型和格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)。
+
+[SVG](/zh-CN/docs/Web/Media/Formats/Image_types#svg_可缩放矢量图形) 格式更适合颜色较少且不太逼真的照片的图像。这需要源文件以矢量图形格式提供。如果这样的图像仅以位图形式存在，则应选择 [PNG](/zh-CN/docs/Web/Media/Formats/Image_types#png_便携式网络图形) 作为后备格式。这种类型的图案示例是徽标、插图、图表或图标（注意：SVG 比图标字体好得多！）。两种格式都支持透明度。
+
+PNG 可以以三种不同的输出组合进行保存：
+
+- 24 位色 + 8 位透明度——提供全色准确性和平滑透明度，以牺牲大小为代价。你可能希望为了避免这种组合，而选择 WebP（见下文）。
+- 8 位色 + 8 位透明度——提供不超过 255 种颜色，但保持平滑的透明度。大小不太大。这些可能是你想要的 PNG。
+- 8 位色 + 1 位透明度——提供不超过 255 种颜色，并仅为每个像素提供无或完全透明度，这使透明边界看起来生硬并且有锯齿。尺寸小，但视觉保真度付出了代价。
+
+优化 SVG 的一个不错的在线工具是 [SVGOMG](https://jakearchibald.github.io/svgomg/)。对于 PNG，有 [ImageOptim 在线](https://imageoptim.com/online)或 [Squoosh](https://squoosh.app/) 这几种工具。
+
+对于不具有透明度的摄影素材，有更广泛的格式可供选择。如果要谨慎行事，那么你应该选择压缩良好的**渐进式 JPEG**。渐进式 JPEG 与普通 JPEG 不同，它们是渐进式显示的（因此得名），这意味着用户先看到的是一个低分辨率的图像版本，随着图像下载而逐渐清晰，而不是图像以全分辨率从上到下加载，或者只有在完全下载后才显示。对于这些图片，一个好的压缩工具是 MozJPEG，可用于在线图像优化工具 [Squoosh](https://squoosh.app/) 中，75% 的质量设置就能够得到优秀的结果。
+
+其他格式在压缩方面改进了 JPEG，但并非所有浏览器都支持：
+
+- [WebP](/zh-CN/docs/Web/Media/Formats/Image_types#webp_图像)——既适用于图像又适用于动图的绝佳选择。WebP 提供比 PNG 或 JPEG 更好的压缩，支持更高的色深、动画帧和透明度等（但不支持渐进式显示）。除具有 Big Sur 或更早版本的 macOS 桌面版 Safari 14 外，所有主流浏览器都支持它。
+
+  > **备注：** 尽管 Apple [宣布在 Safari 14 中支持 WebP](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174)，但在 Safari 版本 16.0 之前，`.webp` 图像无法在早于 Big Sur 版本的 macOS 桌面版本上正常显示，而 iOS 14 上的 Safari *却能*正常显示 `.webp` 图像。
+
+- [AVIF](/zh-CN/docs/Web/Media/Formats/Image_types#avif_图像)——由于其是高性能和免版税的图像格式（甚至比 WebP 更高效），它是用于图像和动图的不错选择（尽管不太广泛）。它现在受 Chrome、Opera 和 Firefox 的支持。另请参阅[将以前的图像格式转换为 AVIF 的在线工具](https://avif.io/)。
+- **JPEG2000**——曾经是 JPEG 的继任者，但仅受 Safari 支持。也不支持渐进式显示。
+
+鉴于 JPEG-XR 和 JPEG2000 的支持范围很窄，并且还要考虑解码成本，JPEG 的唯一真正竞争对手是 WebP。这就是为什么你也可以以该格式提供图像。这可以通过使用配备了 [type 属性](/zh-CN/docs/Web/HTML/Element/picture#type_属性)的 `<picture>` 元素和 `<source>` 元素来完成。
+
+如果所有这些对你的团队来说听起来有点复杂或感觉有太多的工作要做，那么还有一些在线服务，你可以将其用作图像 CDN，它们将根据请求图像的设备或浏览器类型自动提供正确的图像格式。这其中最大的就是 [Cloudinary](https://cloudinary.com/blog/make_all_images_on_your_website_responsive_in_3_easy_steps) 和 [Image Engine](https://imageengine.io/)。
+
+最后，如果你想在页面中包含动图，那么请知道 Safari 允许在 `<img>` 和 `<picture>` 元素中使用视频文件。这样，你还可以为所有其他现代浏览器添加**动态 WebP**。
+
+```html
+<picture>
+  <source type="video/mp4" src="giphy.mp4" />
+  <source type="image/webp" src="giphy.webp" />
+  <img src="giphy.gif" alt="动画 GIF" />
+</picture>
+```
+
+#### 提供最佳尺寸
+
+在图像传输中，采用“一刀切”的方法不会得到最佳结果，这意味着对于较小的屏幕，你希望提供更低分辨率的图像，而对于较大的屏幕则相反。此外，你还希望为那些具有高 DPI 屏幕（例如“Retina”）的设备提供更高分辨率的图像。因此，除了创建许多中间图像变体之外，你还需要一种方法将正确的文件提供给正确的浏览器。这就是你需要通过使用 [media](/zh-CN/docs/Web/HTML/Element/source#media) 和/或 [sizes](/zh-CN/docs/Web/HTML/Element/source#sizes) 属性来升级你的 `<picture>` 和 `<source>` 元素的地方。有关如何组合所有这些属性的详细文章可以在[这里](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/)找到。
+
+关于高 DPI 屏幕，有两个有趣的效果需要记住：
+
+- 在高 DPI 屏幕上，人眼对压缩伪影的敏感度要低得多，这意味着对于这些屏幕上的图像，你可以超过通常的压缩程度。
+- [只有很少的人能够察觉到超过 2 倍 DPI 的分辨率增加](https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio)，这意味着你不需要提供超过 2 倍分辨率的图像。
+
+#### 控制下载图像的优先级（和顺序）
+
+将最重要的图像优先展示给访问者会提供更好的感知性能。
+
+首先，检查你的内容图像是否使用 `<img>` 或 `<picture>` 元素，并且你的背景图像是否在 CSS 中使用 `background-image` 定义——`<img>` 元素中引用的图像比背景图像具有更高的加载优先级。
+
+其次，通过采用优先级提示（Priority Hints），你可以进一步控制优先级，只需在图像标签中添加 `fetchPriority` 属性即可。图像优先级提示的一个示例用例是幻灯片轮播，其中第一张图像的优先级高于后续的图像。
+
+### 渲染策略：在加载图像时避免卡顿
+
+由于图像是异步加载的，并且在第一次绘制后继续加载，如果在加载之前未定义其尺寸，它们可能会导致页面内容重新布局。例如，当图像加载时，文本会被推到页面下方。因此，你需要设置 `width` 和 `height` 属性，以便浏览器可以在布局中为它们预留空间。
+
+当在 HTML {{htmlelement("img")}} 元素上包含图像的 `width` 和 `height` 属性时，浏览器可以在图像加载之前计算图像的宽高比。在图像下载和绘制到屏幕时，这个宽高比用于预留显示图像所需的空间，从而减少或甚至防止布局变化。减少布局变化是良好用户体验和 web 性能的重要组成部分。
+
+浏览器在解析 HTML 时开始渲染内容，通常在下载所有资源（包括图像）之前。包括尺寸使浏览器可以为每个图像预留一个正确尺寸的占位框，以便在首次渲染页面时显示图像。
+
+![两个截图，第一个没有图像但预留了空间，第二个显示了加载到预留空间的图像。](ar-guide.jpg)
+
+没有 `width` 和 `height` 属性，将不会创建占位空间，导致页面在渲染后加载图片时出现明显的{{glossary('jank', '卡顿')}}或布局移动。页面的重新布局和重绘是性能和可用性问题。
+
+在响应式设计中，当容器比图片更窄时，通常使用以下 CSS 代码来防止图片溢出容器：
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+虽然在响应式布局中很有用，但如果不包括宽度和高度信息，就会导致卡顿。如果在解析 `<img>` 元素时没有提供高度信息，则在图片加载之前，此 CSS 实际上将高度设置为 0。当页面在初始显示到屏幕后加载图片时，页面会重新布局和重绘，为新确定的高度创建空间，从而导致布局移动。
+
+浏览器在实际加载图像之前有一种调整图像大小的机制。当 `<img>`、`<video>` 或 `<input type="button">` 元素设置了 `width` 和 `height` 属性时，它的宽高比会在加载前计算出来，并使用提供的尺寸提供给浏览器。
+
+接着，根据宽高比计算出图片的高度，并将正确的尺寸赋给 `<img>` 元素。这样做的好处是，当图片加载时，就不会出现之前提到的卡顿，或者即使列出的尺寸不太精确，卡顿程度也会降到最低。
+
+宽高比仅在图片加载时用于保留空间。一旦图片加载完成，将使用加载的图片的实际宽高比，而不是属性中的宽高比。这确保即使属性尺寸不准确，图片也会以正确的宽高比显示。
+
+虽然上个十年的开发者最佳实践可能建议省略 HTML {{htmlelement("img")}} 上的 `width` 和 `height` 属性，但由于宽高比映射，包含这两个属性被认为是开发者的最佳实践。
+
+对于任何背景图片，很重要的是设置 `background-color` 值，以便在图片加载之前，任何叠加在上面的内容仍然可读。
+
+## 结论
+
+本节我们学习了图像优化的方法。你已经大概掌握了如何优化占一般网站带宽总量一半的图像。但这只是影响用户带宽和页面加载速度的媒体类型之一。接下来，我们要看看视频优化，它可以解决带宽消耗的另外 20%。
+
+{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}

From eecefd004604fba220d23917dcd0a7e98d7e46bb Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:42:51 +0900
Subject: [PATCH 215/268] [ko]: add index.md for `web/glossary/delta` (#15870)

[add]: add index.md for web/glossary/delta
---
 files/ko/glossary/delta/index.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 files/ko/glossary/delta/index.md

diff --git a/files/ko/glossary/delta/index.md b/files/ko/glossary/delta/index.md
new file mode 100644
index 00000000000000..670fd7d9c12b6f
--- /dev/null
+++ b/files/ko/glossary/delta/index.md
@@ -0,0 +1,32 @@
+---
+title: 델타 (Delta)
+slug: Glossary/Delta
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**델타**라는 용어는 두 값 또는 상태 간의 차이를 나타냅니다.
+
+이름은 로마 알파벳의 문자 'D'에 해당하는 그리스 문자 Δ (델타)에서 유래되었습니다. 'D'는 'difference'의 약칭으로 문자 Δ를 사용하는 것을 의미합니다.
+
+'델타'라는 용어는 물리적 또는 가상 객체의 속도, 위치 또는 가속도 변화를 전달할 때 일반적으로 사용됩니다. 음파의 크기나 주파수의 변화를 설명할 때도 사용됩니다.
+
+예를 들어, 화면의 객체가 왼쪽에서 오른쪽으로 얼마나 멀리 이동하는지 설명할 때, 'delta x' 또는 'Δx'라는 용어를 사용할 수 있습니다.
+
+마찬가지로, 'X'의 새 값과 이전 값이 주어지면, 다음과 같이 델타를 계산할 수 있습니다.
+
+```js
+let deltaX = newX - oldX;
+```
+
+더 일반적으로는, 델타를 수신하고 이를 사용하여 저장된 이전 조건을 업데이트합니다.
+
+```js
+let newX = oldX + deltaX;
+```
+
+## 같이 보기
+
+- 마우스 휠 이벤트 (예를 들어, {{domxref("WheelEvent")}}는 {{domxref("WheelEvent.deltaX", "deltaX")}}, {{domxref("WheelEvent.deltaY", "deltaY")}} 및 {{domxref("WheelEvent.deltaZ", "deltaZ")}} 속성에서 마지막 이벤트 이후 휠이 이동한 거리를 제공합니다)

From c70dd490963821978b44d0373e7f0e7d79159c98 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 19:48:08 +0900
Subject: [PATCH 216/268] [ko]: add index.md for `web/glossary/dtls` (#15892)

[add]: add index.md for web/glossary/dtls
---
 files/ko/glossary/dtls/index.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 files/ko/glossary/dtls/index.md

diff --git a/files/ko/glossary/dtls/index.md b/files/ko/glossary/dtls/index.md
new file mode 100644
index 00000000000000..ab4668433a5398
--- /dev/null
+++ b/files/ko/glossary/dtls/index.md
@@ -0,0 +1,29 @@
+---
+title: 데이터그램 전송 계층 보안 (Datagram Transport Layer Security, DTLS)
+slug: Glossary/DTLS
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**데이터그램 전송 계층 보안** (**DTLS**)은 데이터그램 기반 통신을 보호하는 데 사용되는 프로토콜입니다. DTLS은 스트림 중심의 전송 계층 보안 ({{Glossary("TLS")}})을 기반으로 하며, 유사한 수준의 보안을 제공합니다. 데이터그램 프로토콜로서, DTLS는 메시지 전달 순서를 보장하지 않으며, 메시지 전달도 전혀 보장하지 않습니다. 그러나, DTLS는 특히 오버헤드가 낮아지고 대기 시간이 줄어드는 데 있어 데이터그램 프로토콜의 이점도 얻습니다.
+
+이런 기능은 DTLS가 사용되는 가장 일반적인 분야 중 하나인 {{Glossary("WebRTC")}}에 특히 유용합니다. 모든 WebRTC 관련 프로토콜({{Glossary("SCTP")}}, {{Glossary("RTP", "SRTP")}}, 및 {{Glossary("STUN")}})은 DTLS를 사용하여 통신을 암호화해야 합니다.
+
+## 같이 보기
+
+- 위키백과의 [데이터그램 전송 계층 보안](https://en.wikipedia.org/wiki/Datagram_Transport_Layer_Security)
+- 명세서:
+
+  - {{RFC(9147, "The Datagram Transport Layer Security (DTLS) Protocol Version 1.3")}}
+  - {{RFC(6347, "Datagram Transport Layer Security Version 1.2")}}
+
+- 관련 명세
+
+  - {{RFC(5763, "Framework for Establishing a Secure Real-time Transport Protocol (SRTP) Security Context Using DTLS")}}
+  - {{RFC(5764, "DTLS Extension to Establish Keys for the Secure Real-time Transport Protocol (SRTP)")}}
+  - {{RFC(6083, "DTLS for Stream Control Transmission Protocol (SCTP)")}}
+  - {{RFC(8261, "Datagram Transport Layer Security (DTLS) Encapsulation of SCTP Packets")}}
+  - {{RFC(7350, "Datagram Transport Layer Security (DTLS) as Transport for Session Traversal Utilities for NAT (STUN)")}}
+  - {{RFC(7925, "TLS / DTLS Profiles for the Internet of Things")}}

From 4f6673a5f190350b3369e4b3bf8e774c2962c3a4 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 20:03:07 +0900
Subject: [PATCH 217/268] [ko]: add index.md for `web/glossary/dominator`
 (#15908)

[add]: add index.md for web/glossary/dominator
---
 files/ko/glossary/dominator/index.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 files/ko/glossary/dominator/index.md

diff --git a/files/ko/glossary/dominator/index.md b/files/ko/glossary/dominator/index.md
new file mode 100644
index 00000000000000..72a7116226f513
--- /dev/null
+++ b/files/ko/glossary/dominator/index.md
@@ -0,0 +1,18 @@
+---
+title: 지배자 (Dominator)
+slug: Glossary/Dominator
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+그래프 이론에서, 루트 노드에서 노드 B까지 모든 경로가 A를 통과하면 노드 A가 노드 B를 지배합니다.
+
+이 개념은 A를 통해서만 B에 접근할 수 있다는 것을 의미하므로 {{Glossary("가비지 컬렉션")}}에 중요한 개념입니다. 따라서 가비지 컬렉터가 A에 도달할 수 없고 회수하기에 적합하다고 판단하면, B 또한 도달할 수 없고, 회수에 적합하다고 판단합니다. 따라서 A가 지배하는 객체는 A가 가지고 있는 크기(A 자체가 해제될 경우 해제될 수 있는 총 메모리 양)에 포함됩니다.
+
+## 같이 보기
+
+- 위키백과의 [지배자](<https://en.wikipedia.org/wiki/Dominator_(graph_theory)>)
+- [지배자](https://firefox-source-docs.mozilla.org/devtools-user/memory/dominators/index.html)
+- [가비지 컬렉션](/ko/docs/Web/JavaScript/Memory_management#garbage_collection)

From 7986eac812765d321622d0cbbc829d528a55de80 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Fri, 29 Sep 2023 20:05:29 +0900
Subject: [PATCH 218/268] [ko]: add index.md for `web/glossary/encapsulation`
 (#15932)

[add]: add index.md for web/glossary/encapsulation
---
 files/ko/glossary/encapsulation/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 files/ko/glossary/encapsulation/index.md

diff --git a/files/ko/glossary/encapsulation/index.md b/files/ko/glossary/encapsulation/index.md
new file mode 100644
index 00000000000000..83bf4cb361d89d
--- /dev/null
+++ b/files/ko/glossary/encapsulation/index.md
@@ -0,0 +1,14 @@
+---
+title: 캡슐화 (Encapsulation)
+slug: Glossary/Encapsulation
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+캡슐화는 데이터와 {{glossary("function","함수")}}를 하나의 컴포넌트(예, {{glossary("class", "클래스")}})로 압축하고, 그 다음에 해당 컴포넌트에 대한 접근을 제어하여 {{glossary("object", "객체")}}에서 '블랙박스'를 만듭니다. 이 때문에, 해당 클래스의 사용자는 숨겨진 구현이 아닌 해당 인터페이스(즉, 클래스 외부에 노출된 데이터 및 함수)만 알면 됩니다.
+
+## 같이 보기
+
+- 위키백과의 [캡슐화](<https://en.wikipedia.org/wiki/Encapsulation_(object-oriented_programming)>)

From 3c3954febd3ebf562cd69cee3b90189a83b3de65 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Fri, 29 Sep 2023 19:06:00 +0800
Subject: [PATCH 219/268] [zh-cn]: update 'Keyed collections' (#16174)

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../guide/keyed_collections/index.md          | 109 ++++++++++--------
 1 file changed, 59 insertions(+), 50 deletions(-)

diff --git a/files/zh-cn/web/javascript/guide/keyed_collections/index.md b/files/zh-cn/web/javascript/guide/keyed_collections/index.md
index 247b85fa5bd70c..8e66b83c21d52c 100644
--- a/files/zh-cn/web/javascript/guide/keyed_collections/index.md
+++ b/files/zh-cn/web/javascript/guide/keyed_collections/index.md
@@ -1,33 +1,36 @@
 ---
 title: 带键的集合
 slug: Web/JavaScript/Guide/Keyed_collections
+l10n:
+  sourceCommit: 4f86aad2b0b66c0d2041354ec81400c574ab56ca
 ---
 
 {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_objects")}}
 
-这一章介绍由 key 值标记的数据容器；Map 和 Set 对象承载的数据元素可以按照插入时的顺序被迭代遍历。
+本章将介绍由键索引的数据集合；`Map` 和 `Set` 对象包含可按插入顺序迭代的元素。
 
-## 映射
+## Map
 
-### `Map`对象
+### Map 对象
 
-ECMAScript 2015 引入了一个新的数据结构来将一个值映射到另一个值。一个{{jsxref("Map")}}对象就是一个简单的键值对映射集合，可以按照数据插入时的顺序遍历所有的元素。
+{{jsxref("Map")}} 对象就是一个简单的键/值对映射集合，可以按照数据插入时的顺序遍历所有的元素。
 
-下面的代码演示了使用`Map`进行的一些基本操作。请参考{{jsxref("Map")}}以获取更多的样例和完整的 API。你可以使用{{jsxref("Statements/for...of","for...of")}}循环来得到所有的`[key, value]`。
+下面的代码演示了使用 `Map` 进行的一些基本操作。请参考 {{jsxref("Map")}} 以获取更多的样例和完整的 API。你可以使用 {{jsxref("Statements/for...of","for...of")}} 循环来在每一次迭代中得到 `[key, value]` 数组。
 
 ```js
-var sayings = new Map();
+const sayings = new Map();
 sayings.set("dog", "woof");
 sayings.set("cat", "meow");
 sayings.set("elephant", "toot");
 sayings.size; // 3
+sayings.get("dog"); // woof
 sayings.get("fox"); // undefined
 sayings.has("bird"); // false
 sayings.delete("dog");
 sayings.has("dog"); // false
 
-for (var [key, value] of sayings) {
-  console.log(key + " goes " + value);
+for (const [key, value] of sayings) {
+  console.log(`${key} goes ${value}`);
 }
 // "cat goes meow"
 // "elephant goes toot"
@@ -36,59 +39,60 @@ sayings.clear();
 sayings.size; // 0
 ```
 
-### `Object`和`Map`的比较
+### Object 和 Map 的比较
 
-一般地，{{jsxref("Object", "objects", "", 1)}}会被用于将字符串类型映射到数值。`Object`允许设置键值对、根据键获取值、删除键、检测某个键是否存在。而`Map`具有更多的优势。
+一般地，{{jsxref("Object", "object", "", 1)}} 会被用于将字符串类型映射到值。`Object` 允许设置键值对、根据键获取值、删除键、检测某个键是否存在。不过，`Map` 对象还有一些优点，可以更好地应用于映射关系表示中。
 
-- `Object` 的键均为 `String` 类型，在 `Map` 里键可以是任意类型。
-- 必须手动计算`Object`的尺寸，但是可以很容易地获取使用`Map`的尺寸。
-- `Map`的遍历遵循元素的插入顺序。
-- `Object`有原型，所以映射中有一些缺省的键。（可以用 `map = Object.create(null) 回避`）。
+- `Object` 的键均为[字符串](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String)或 [Symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 类型，在 `Map` 里键可以是任意类型。
+- 必须手动计算 `Object` 的大小，但是可以很容易地获取 `Map` 的大小（`size`）。
+- `Map` 的遍历遵循元素的插入顺序。
+- `Object` 有原型，所以映射中有一些缺省的键。（可以用 `map = Object.create(null)` 回避）。
 
-这三条提示可以帮你决定用`Map`还是`Object`：
+这三条提示可以帮你决定用 `Map` 还是 `Object`：
 
-- 如果键在运行时才能知道，或者所有的键类型相同，所有的值类型相同，那就使用`Map`。
-- 如果需要将原始值存储为键，则使用`Map`，因为`Object`将每个键视为字符串，不管它是一个数字值、布尔值还是任何其他原始值。
-- 如果需要对个别元素进行操作，使用`Object`。
+- 如果键在运行时才能知道，或者所有的键类型相同，所有的值类型相同，那就使用 `Map`。
+- 如果需要将原始值存储为键，则使用 `Map`，因为 `Object` 将每个键视为字符串，不管它是一个数字值、布尔值还是任何其他原始值。
+- 如果存在需要对个别元素进行操作的逻辑，使用 `Object`。
 
-### `WeakMap`对象
+### WeakMap 对象
 
-{{jsxref("WeakMap")}}对象也是键值对的集合。它的**键必须是对象类型**，值可以是任意类型。它的键被弱保持，也就是说，当其键所指对象没有其他地方引用的时候，它会被 GC 回收掉。`WeakMap`提供的接口与`Map`相同。
+{{jsxref("WeakMap")}} 是键/值对的集合，其键必须是对象或[非注册符号](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，其值为任意 [JavaScript 类型](/zh-CN/docs/Web/JavaScript/Data_structures)，并且不会对其键创建强引用。也就是说，一个对象作为键出现在 `WeakMap` 中并不会阻止该对象被垃圾回收。一旦作为键的对象被收集，其在任何 `WeakMap` 中的相应值也会被垃圾收集，只要它们没有在其他地方被强引用。唯一可用作 `WeakMap` 键的原始类型类型是 symbol，更具体地说，是[非注册 symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，因为非注册 symbol 保证是唯一的，并且不能被重新创建。
 
-与`Map`对象不同的是，`WeakMap`的键是不可枚举的。不提供列出其键的方法。列表是否存在取决于垃圾回收器的状态，是不可预知的。
+`WeakMap` API 与 `Map` API 基本相同。不过，`WeakMap` 不允许观察其键的有效性，这也是它不允许枚举的原因。因此，没有任何方法可以获取 `WeakMap` 中的键的列表。如果有的话，该列表将取决于垃圾回收的状态，从而引入非确定性。
 
-可以在"Why *Weak*Map?"{{jsxref("WeakMap")}}查看更多信息和示例。
+可以在 {{jsxref("WeakMap")}} 参考页的“为什么使用 WeakMap”小节查看更多信息和示例。
 
-`WeakMap`对象的一个用例是存储一个对象的私有数据或隐藏实施细节。Nick Fitzgerald 的博文["Hiding Implementation Details with ECMAScript 6 WeakMaps"](http://fitzgeraldnick.com/weblog/53/)提供了一个例子。对象内部的私有数据和方法被存储在`WeakMap`类型的`privates`变量中。所有暴露出的原型和情况都是公开的，而其他内容都是外界不可访问的，因为模块并未导出`privates`对象。
+`WeakMap` 对象的一个用例是存储一个对象的私有数据或隐藏实现细节。Nick Fitzgerald 的博文[“使用 ECMAScript 6 WeakMap 隐藏实现细节”](https://fitzgeraldnick.com/2014/01/13/hiding-implementation-details-with-e6-weakmaps.html)提供了一个例子。对象内部的私有数据和方法被存储在 `WeakMap` 类型的 `privates` 变量中。所有暴露出的原型和实例都是公开的，而其他内容都是外界不可访问的，因为模块并未导出 `privates` 对象。
 
 ```js
 const privates = new WeakMap();
 
 function Public() {
   const me = {
-    // Private data goes here
+    // 这里是私有数据
   };
   privates.set(this, me);
 }
 
 Public.prototype.method = function () {
   const me = privates.get(this);
-  // Do stuff with private data in `me`...
+  // 处理 `me` 中的私有数据
+  // …
 };
 
 module.exports = Public;
 ```
 
-## 集合
+## Set
 
-### `Set`对象
+### Set 对象
 
-{{jsxref("Set")}}对象是一组值的集合，这些值是不重复的，可以按照添加顺序来遍历。
+{{jsxref("Set")}} 对象是一组唯一值的集合，可以按照添加顺序来遍历。`Set` 中的值只能出现一次；它在集合 `Set` 中是唯一的。
 
-这里演示了`Set`的基本操作，更多示例和完整 API 可以参考{{jsxref("Set")}}。
+以下代码演示了 `Set` 的基本操作，更多示例和完整 API 可以参考 {{jsxref("Set")}}。
 
 ```js
-var mySet = new Set();
+const mySet = new Set();
 mySet.add(1);
 mySet.add("some text");
 mySet.add("foo");
@@ -97,14 +101,18 @@ mySet.has(1); // true
 mySet.delete("foo");
 mySet.size; // 2
 
-for (let item of mySet) console.log(item);
+for (const item of mySet) {
+  console.log(item);
+}
 // 1
 // "some text"
 ```
 
-### 数组和集合的转换
+### 数组和 Set 之间的转换
+
+可以使用 {{jsxref("Array.from")}} 或[展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)来完成集合到数组的转换。同样，`Set` 的构造函数接受数组作为参数，可以完成从 `Array` 到 `Set` 的转换。
 
-可以使用{{jsxref("Array.from")}}或[展开操作符](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)来完成集合到数组的转换。同样，`Set`的构造器接受数组作为参数，可以完成从`Array`到`Set`的转换。需要重申的是，`Set`对象中的值不重复，所以数组转换为集合时，所有重复值将会被删除。
+> **备注：** `Set` 对象存储*唯一值*，所以数组转换为 Set 时，任何重复值将会被删除！
 
 ```js
 Array.from(mySet);
@@ -113,32 +121,33 @@ Array.from(mySet);
 mySet2 = new Set([1, 2, 3, 4]);
 ```
 
-### `Array`和`Set`的对比
+### 数组和 Set 的对比
 
-一般情况下，在 JavaScript 中使用数组来存储一组元素，而新的集合对象有这些优势：
+一般情况下，在 JavaScript 中使用数组来存储一组元素，而新的 `Set` 对象有这些优势：
 
-- 数组中用于判断元素是否存在的{{jsxref("Array.indexOf", "indexOf")}} 函数效率低下。
-- `Set`对象允许根据值删除元素，而数组中必须使用基于下标的 splice 方法。
-- 数组的`indexOf`方法无法找到{{jsxref("NaN")}}值。
-- `Set`对象存储不重复的值，所以不需要手动处理包含重复值的情况。
+- 根据值（`arr.splice(arr.indexOf(val), 1)`）删除数组元素效率低下。
+- `Set` 对象允许根据值删除元素，而数组中必须使用基于元素下标的 `splice` 方法。
+- 数组的 `indexOf` 方法无法找到 {{jsxref("NaN")}} 值。
+- `Set` 对象存储唯一值，所以不需要手动处理包含重复值的情况。
 
-### `WeakSet`对象
+### WeakSet 对象
 
-{{jsxref("WeakSet")}}对象是一组对象的集合。`WeakSet`中的对象不重复且不可枚举。
+{{jsxref("WeakSet")}} 对象是可收集垃圾值的集合，包括对象和[非注册 symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)。`WeakSet` 中的值只能出现一次。它在 `WeakSet` 的集合中是唯一的。
 
-与{{jsxref("Set")}}对象的主要区别有：
+与 {{jsxref("Set")}} 对象的主要区别有：
 
-- `WeakSets`中的值必须是对象类型，不可以是别的类型
-- `WeakSet`的“_weak_”指的是，对集合中的对象，如果不存在其他引用，那么该对象将可被垃圾回收。于是不存在一个当前可用对象组成的列表，所以`WeakSets`不可枚举
+- 与 `Set` 相反，`WeakSet` 是**对象或 symbol 的集合**，而不是任何类型的任意值的集合。
+- `WeakSet` 的*弱*是指集合中的对象是弱引用的。如果 `WeakSet` 中存储的一个对象不存在其他的引用，那么它就会被垃圾回收。这也意味着集合中不再存储当前对象。
+- `WeakSet` 不可枚举。
 
-`WeakSet`的用例很有限，比如使用 DOM 元素作为键来追踪它们而不必担心内存泄漏。
+`WeakSet` 对象的用例有限。它们不会泄露内存，因此可以安全地使用 DOM 元素作为键，并将其标记用于跟踪等目的。
 
-## `Map`的键和`Set`的值的等值判断
+## Map 和 Set 的键值相等
 
-`Map`的键和`Set`的值的等值判断都基于[same-value-zero algorithm](https://tc39.es/ecma262/#sec-samevaluezero)：
+`Map` 对象和 `Set` 对象的键和值的等值判断都基于 [SameValueZero 算法](/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness#零值相等)：
 
-- 判断使用与`===`相似的规则。
-- `-0`和`+0`相等。
-- {{jsxref("NaN")}}与自身相等（与`===`有所不同）。
+- 等价的作用类似于严格相等运算符 `===`。
+- `-0` 和 `+0` 相等。
+- {{jsxref("NaN")}} 与自身相等（与 `===` 有所不同）。
 
 {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_objects")}}

From 0c52e3855934b6dab8a415623eadf71531b77899 Mon Sep 17 00:00:00 2001
From: takemoto <38633237+takemoto@users.noreply.github.com>
Date: Fri, 29 Sep 2023 01:06:22 +0900
Subject: [PATCH 220/268] =?UTF-8?q?SyntaxError=20=E3=81=A7=E6=AD=A3?=
 =?UTF-8?q?=E3=81=97=E3=81=8F=E5=8B=95=E4=BD=9C=E3=81=97=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E3=81=9F=E3=82=81=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

英語版と同期する際のコピペミスと思われます。
---
 files/ja/web/api/mouseevent/button/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/mouseevent/button/index.md b/files/ja/web/api/mouseevent/button/index.md
index 537367307165b2..92c61b6d3ff378 100644
--- a/files/ja/web/api/mouseevent/button/index.md
+++ b/files/ja/web/api/mouseevent/button/index.md
@@ -61,7 +61,7 @@ button.addEventListener('mouseup', (e) => {
     default:
       log.textContent = `不明なボタンコード: ${e.button}`;
   }
-}
+});
 ```
 
 ### 結果

From 6661c2ded303d7fe94c03bceff5f61f4eca0d30d Mon Sep 17 00:00:00 2001
From: Alexander <alexander_belial999@hotmail.com>
Date: Fri, 29 Sep 2023 13:25:39 -0600
Subject: [PATCH 221/268] es: Create writing_guidelines/what_we_write (#16210)

* es: Update writing_guidelines/what_we_write

* Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Apply suggestions from code review

---------

Co-authored-by: Graywolf <a13x.graywolf@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../writing_guidelines/what_we_write/index.md | 131 ++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 files/es/mdn/writing_guidelines/what_we_write/index.md

diff --git a/files/es/mdn/writing_guidelines/what_we_write/index.md b/files/es/mdn/writing_guidelines/what_we_write/index.md
new file mode 100644
index 00000000000000..b327fd7a685db3
--- /dev/null
+++ b/files/es/mdn/writing_guidelines/what_we_write/index.md
@@ -0,0 +1,131 @@
+---
+title: Lo que escribimos
+slug: MDN/Writing_guidelines/What_we_write
+l10n:
+  sourceCommit: 5cc673ab34acfb189832b22f85a44c6527e4a5ea
+---
+
+{{MDNSidebar}}
+
+MDN Web Docs contiene documentación _neutral al navegador_ que permite a los desarrolladores web escribir código _agnostico al navegador_. En este artículo, encontrarás información sobre si un tema o tipo de contenido determinado debe incluirse en MDN Web Docs.
+
+## Políticas editoriales
+
+Esta sección describe las políticas establecidas por el personal de Mozilla MDN para controlar el contenido de MDN Web Docs. Se espera que todos los colaboradores de MDN Web Docs cumplan con estas políticas.
+
+### Relevancia
+
+Todo el contenido de MDN Web Docs debe ser relevante para la sección de tecnología en la que aparece. El spam (publicidad comercial) y otros contenidos irrelevantes nunca serán aceptados en el sitio. Los colaboradores que sigan intentando enviar spam pueden ser expulsados de MDN a discreción del personal de Mozilla MDN.
+
+Los enlaces salientes a sitios comerciales que sean relevantes para el tema desde el que se enlazan se evaluarán caso por caso. Su valor para ayudar a los desarrolladores web debe superar el beneficio comercial del sitio vinculado.
+
+### Neutralidad
+
+Los artículos en MDN Web Docs deben mantener un [punto de vista neutral](https://en.wikipedia.org/wiki/Wikipedia:Neutral_point_of_view), informando sobre las variaciones del navegador sin sesgo editorial. No se aceptan comentarios despectivos sobre ningún navegador o agente de usuario.
+
+### Estandarización
+
+Las tecnologías web que se documentarán en MDN Web Docs deben estar en una pista estándar y deben ser implementadas por al menos un motor de renderizado. Las variaciones en el soporte del navegador se documentan en la sección [Compatibilidad con los navegadores](/es/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables) de un artículo.
+
+## Sugerir contenido
+
+Si desea sugerir contenido para MDN Web Docs, asegúrese de leer esta página antes de enviarlo para asegurarse de que lo que está sugiriendo sea apropiado.
+
+Para nuevas páginas o guías de referencia, abre un [nuevo _issue_](https://github.com/mdn/mdn/issues/new/choose) que describa qué contenido sugieres y por qué (sé lo más explícito posible).
+
+Para sugerir proyectos más grandes que involucren nuevas secciones de contenido, consulte la página [Criterios de inclusión](/es/docs/MDN/Writing_guidelines/What_we_write/Criteria_for_inclusion), que también describe el proceso de solicitud.
+
+## Temas que pertenecen a MDN Web Docs
+
+En general, si se trata de una tecnología web abierta, la documentamos en MDN Web Docs. Esto incluye cualquier característica que pueda ser utilizada por los desarrolladores web para crear sitios web y aplicaciones, ahora y en un futuro próximo.
+
+Si una función es implementada por varios navegadores y aceptada como estándar o está avanzando hacia la estandarización, entonces sí, definitivamente la documentamos aquí. Si una función sigue siendo muy experimental y no se implementa en varios navegadores y/o puede cambiar, entonces sigue siendo adecuada para su inclusión, pero es posible que no se considere una prioridad para que el equipo de redacción trabaje en ella.
+
+En otras palabras, las tecnologías web que se documentarán en MDN Web Docs deben cumplir los siguientes criterios:
+
+- Estar en una pista estándar.
+- Estar especificado en una especificación publicada por un organismo de normalización fiable.
+- Ser implementado por al menos un motor de renderizado.
+- Se lanzará en una versión de navegador estable.
+
+Nuestro objetivo principal es escribir sobre las siguientes tecnologías web front-end:
+
+- [HTML](/es/docs/Web/HTML)
+- [CSS](/es/docs/Web/CSS)
+- [JavaScript](/es/docs/Web/JavaScript)
+- [APIs Web](/es/docs/Web/API)
+- [HTTP](/es/docs/Web/HTTP)
+
+También documentamos algunos temas más amplios, como [SVG](/es/docs/Web/SVG), [XML](/es/docs/Web/XML), [WebAssembly](/es/docs/WebAssembly) y [Accesibilidad](/es/docs/Learn/Accessibility). Además, proporcionamos extensas [guías de aprendizaje](/es/docs/Learn) para estas tecnologías y también un [glosario](/es/docs/Glossary).
+
+> **Nota:** Las tecnologías de backend generalmente tienen su propia documentación en otro lugar que MDN Web Docs no intenta reemplazar, aunque [tenemos algunas excepciones](/es/docs/Learn/Server-side).
+
+Todo el contenido de MDN Web Docs debe ser relevante para la sección de tecnología en la que aparece. Se espera que los colaboradores sigan estas [pautas de escritura de MDN](/es/docs/MDN/Writing_guidelines) para el estilo de escritura, las muestras de código y otros temas.
+
+Para obtener más detalles sobre los criterios para documentar o no una tecnología en MDN Web Docs, consulte la página [Criterios de inclusión](/es/docs/MDN/Writing_guidelines/What_we_write/Criteria_for_inclusion).
+
+### Cuando documentamos una nueva tecnología
+
+En MDN Web Docs, buscamos constantemente documentar las nuevas tecnologías de estándares web según corresponda.
+Tratamos de encontrar un equilibrio entre publicar la documentación lo suficientemente pronto para que los desarrolladores puedan conocer las nuevas funciones tan pronto como lo necesiten y publicarla lo suficientemente tarde para que la tecnología esté madura y estable para que la documentación no necesite actualizaciones constantes o eliminación rápida.
+
+En general, nuestra definición de lo más pronto que consideraremos documentar una nueva tecnología es: _Cuando la función está en una pista de estándares y se implementa en algún lugar._
+
+Consideramos documentar una nueva tecnología si:
+
+- Está especificada en un documento de especificación publicado bajo una organización de estándares confiable (como W3C, WHATWG, Khronos, IETF, etc.) y ha alcanzado un nivel razonable de estabilidad (por ejemplo, un borrador de trabajo del W3C o una recomendación candidata o cuando la especificación se ve bastante estable a juzgar por el flujo de problemas presentados en su contra).
+- Está implementada consistentemente en al menos un navegador, con otros desarrolladores de navegadores mostrando signos de interés (como un ticket activo o un proceso de "intención de implementar" está en efecto).
+
+No documentamos una nueva tecnología si:
+
+- No tiene una especificación o la especificación es una nota aproximada que parece susceptible de cambiar.
+- Uno o ningún navegador lo han implementado actualmente y los navegadores no compatibles no muestran signos de interés en implementarlo. Puede medir esto preguntando a los ingenieros que trabajan en esos navegadores y mirando los rastreadores de errores del navegador y las listas de correo, etc.
+- No es una tecnología expuesta en la web y/o es completamente propietaria.
+- Ya está mostrando signos de ser obsoleta o reemplazada por una función similar.
+
+## Temas que no pertenecen a MDN Web Docs
+
+En general, cualquier cosa que no sea un estándar web abierto no pertenece a MDN Web Docs. El spam (publicidad comercial) y otros contenidos irrelevantes nunca serán aceptados en el sitio. Los colaboradores que sigan intentando enviar spam pueden ser expulsados de MDN a discreción del personal de Mozilla MDN.
+
+Algunos ejemplos de temas inapropiados para MDN Web Docs son:
+
+- Tecnología que no está expuesta a la web y es específica de un navegador.
+- Tecnología no relacionada con la web.
+- Documentación para usuarios finales. Para los productos Mozilla, por ejemplo, dicha documentación pertenece al [sitio de soporte de Mozilla](https://support.mozilla.org).
+- Enlaces externos de autoenlace o autopromoción. Consulta estas pautas en nuestra [guía de estilo de escritura](/es/docs/MDN/Writing_guidelines/Writing_style_guide#external_links) antes de añadir un enlace externo.
+
+### Cuando eliminamos documentación
+
+Las páginas se eliminan de MDN Web Docs si ya no contienen información que es útil de alguna manera, están lo suficientemente desactualizadas o pueden ser incorrectas hasta el punto de que mantenerlas puede ser engañoso.
+
+Los siguientes ejemplos describen situaciones en las que se pueden eliminar páginas/contenido:
+
+- Los artículos contienen información sobre funciones que no se implementaron en todos los navegadores y que luego se retiraron (generalmente funciones experimentales, como la funcionalidad con prefijo).
+- Las páginas de referencia describen características que se eliminaron de la especificación antes de implementarse en cualquier navegador.
+- Los artículos cubren técnicas que luego se demostró que eran malas prácticas y fueron reemplazadas por mejores técnicas.
+- Los artículos contienen información que luego fue reemplazada por otros artículos de mejor calidad.
+- Los artículos contienen contenido inapropiado para MDN Web Docs.
+- Las secciones de MDN Web Docs no se centran en tecnologías web abiertas y son una carga de mantenimiento.
+
+Para obtener más información sobre _cómo_ eliminar documentos, consulta la guía [Crear, mover y eliminar páginas](/es/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting).
+
+## Tipos de documentos permitidos en MDN Web Docs
+
+En general, nuestra documentación se clasifica en las siguientes categorías:
+
+- Referencias
+- Guías
+- Glosarios
+- Aprender/Tutoriales
+
+En general, MDN Web Docs es para la documentation de _productos_, no para documentation de _proyectos_ o _procesos_. Entonces, si el documento trata sobre "cómo usar una cosa" o "cómo funciona una cosa" (donde, la "cosa" está en una de las categorías de temas mencionadas anteriormente), entonces puede ir a MDN Web Docs.
+
+Si un documento trata sobre "quién está trabajando en el desarrollo de una cosa" o "planes para desarrollar una cosa", entonces no debería ir en MDN Web Docs.
+
+Estos son algunos ejemplos de tipos de documentos que no deberían colocarse en MDN Web Docs:
+
+- Documentos de planificación
+- Documentos de diseño
+- Propuestas de proyectos
+- Especificaciones o normas
+- Material promocional, publicidad o información personal

From 2cf5ec28422e2c630f5fab9aba088b651e5d3658 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 07:10:01 +0900
Subject: [PATCH 222/268] [ko] add index.md for `web/glossary/long_task`
 (#16107)

---
 files/ko/glossary/long_task/index.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 files/ko/glossary/long_task/index.md

diff --git a/files/ko/glossary/long_task/index.md b/files/ko/glossary/long_task/index.md
new file mode 100644
index 00000000000000..819066d589a7b8
--- /dev/null
+++ b/files/ko/glossary/long_task/index.md
@@ -0,0 +1,16 @@
+---
+title: 오래 걸리는 작업 (Long task)
+slug: Glossary/Long_task
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**오래 걸리는 작업 (Long task)** 은 완료하는 데 50ms 이상이 걸리는 작업입니다.
+
+[메인 UI 스레드](/ko/docs/Glossary/Main_thread)가 50ms 이상 사용되는 중단 없는 기간입니다. 흔한 예로는 오래 실행되는 이벤트 핸들러, 비용이 많이 드는 [리플로우](/ko/docs/Glossary/Reflow) 및 기타 재렌더링, 50ms를 초과하는 이벤트 루프의 여러 반복 사이에서 브라우저가 수행하는 작업 등이 있습니다.
+
+## 같이 보기
+
+- [Long task API](/ko/docs/Web/API/PerformanceLongTaskTiming)

From 71462edb569b3e8bd90f585e8b641a268a3d96aa Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 26 Sep 2023 21:49:02 +0900
Subject: [PATCH 223/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../aria/aria_live_regions/index.md           | 113 +++++++++++++-----
 1 file changed, 84 insertions(+), 29 deletions(-)

diff --git a/files/ja/web/accessibility/aria/aria_live_regions/index.md b/files/ja/web/accessibility/aria/aria_live_regions/index.md
index 12c3e5f2d5548f..e551e3c1941710 100644
--- a/files/ja/web/accessibility/aria/aria_live_regions/index.md
+++ b/files/ja/web/accessibility/aria/aria_live_regions/index.md
@@ -1,38 +1,59 @@
 ---
 title: ARIA ライブリージョン
 slug: Web/Accessibility/ARIA/ARIA_Live_Regions
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
+<section id="Quick_links">
+  <ol>
+    <li><a href="/ja/docs/Web/Accessibility/ARIA/Annotations">ARIA アノテーション</a></li>
+    <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Guides">ARIA ガイド</a></li>
+    <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA ライブリージョン</a></li>
+    <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide">ARIA スクリーンリーダー実装ガイド</a></li>
+    <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA の使用: ロール、ステート、プロパティ</a></li>
+    <li><a href="/ja/docs/Web/Accessibility/ARIA/Multipart_labels">マルチパートラベル</a></li>
+    <li><a href="/ja/docs/Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs">ARIA 関連のバグの報告方法</a></li>
+    <li class="toggle">
+      <details><summary>ARIA ステートとプロパティ</summary>
+        {{ListSubpagesForSidebar("Web/Accessibility/ARIA/Attributes", 1)}}
+      </details>
+    </li>
+    <li class="toggle">
+      <details><summary>WAI-ARIA ロール</summary>
+        {{ListSubpagesForSidebar("Web/Accessibility/ARIA/Roles", 1)}}
+      </details>
+    </li>
+  </ol>
+</section>
+
 JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。
 
 > **メモ:** 支援技術はライブリージョンへのコンテンツの _動的な_ 変更を通知します。
->
 > `aria-live` 属性もしくは 特化したライブリージョン `role` （例えば `role="alert"` ）を、変更をアナウンスしたい要素に含めることで有効になりますが、変更が起こる前にこれらの属性が追加されている必要があります。 —　最初からマークアップに含まれていても、 JavaScript で動的に追加しても構いません。
 
 ## ライブリージョン
 
 ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。ライブリージョンは `aria-live` 属性を使って明示するべきです。
 
-**`aria-live`**: `aria-live=POLITENESS_SETTING` はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は `off`、`polite`、`assertive` で、デフォルトは `off` です。この属性は間違いなく最も重要な属性です。
+**`aria-live`**: `aria-live=POLITENESS_SETTING` はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は `off`、`polite`、`assertive` で、既定は `off` です。この属性は間違いなく最も重要な属性です。
 
 通常、`aria-live="polite"` のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。
 
 `aria-live="assertive"` は、即時に伝えてユーザーの注意を引く必要のある、時間にシビアな通知にのみ使用します。 一般的に assertive なライブリージョンへの変更は、スクリーンリーダーがその時に読み上げているものに割り込みます。つまり、うるさかったり、混乱の元になり得るので、控えめに使うべきです。
 
-`aria-live="off"` は要素のデフォルトとして扱われるので、明示的に指定する必要はありません。ただし、暗黙のライブリージョンロール (例えば `role="alert"` ) を持つ要素からの出力を止めたい場合は話が別です。
+`aria-live="off"` は要素の既定として扱われるので、明示的に指定する必要はありません。ただし、暗黙のライブリージョンロール（例えば `role="alert"`）を持つ要素からの出力を止めたい場合は話が別です。
 
 ### 基本的な例: 有益な画面上の情報を更新するドロップダウンボックス
 
 惑星についての情報を提供することに特化したウェブサイトにドロップダウンボックスがあります。ドロップダウンから惑星が選ばれたとき、選択された惑星の情報でページ上のある領域が更新されます。
 
-#### HTML
-
 ```html
 <fieldset>
   <legend>Planet information</legend>
   <label for="planetsSelect">Planet:</label>
   <select id="planetsSelect" aria-controls="planetInfo">
-    <option value="">Select a planet&hellip;</option>
+    <option value="">Select a planet…</option>
     <option value="mercury">Mercury</option>
     <option value="venus">Venus</option>
     <option value="earth">Earth</option>
@@ -54,8 +75,6 @@ JavaScript を使うと、検索結果のリストを瞬時に更新する、も
 </p>
 ```
 
-#### JavaScript
-
 ```js
 const PLANETS_INFO = {
   mercury: {
@@ -109,35 +128,68 @@ renderPlanetInfoButton.addEventListener("click", (event) => {
 });
 ```
 
-#### 結果
-
-{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}
+{{EmbedLiveSample('Basic_example_Dropdown_box_updates_useful_onscreen_information', '', 350)}}
 
 ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは `aria-live="polite"` を持っているため、スクリーンリーダーはユーザーが一時停止するまで、更新の通知を待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星でのみライブリージョンの更新は通知されます。
 
-ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります:
+こちらはライブリージョンへ（字幕を通して）更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットです。
 
-![A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.](Web_Accessibility_ARIA_ARIA_Live_Regions.png)
+![Mac の VoiceOver のスクリーンショット。字幕が表示されています。](web_accessibility_aria_aria_live_regions.png)
 
 ## ライブリージョン属性を含むロール
 
-次の [`role="…"`](/ja/docs/Web/Accessibility/ARIA/Roles) 値を持つ要素は、デフォルトではライブリージョンのように振る舞います:
-
-| ロール      | 説明                                                                                                                                                                                                                   | 互換性に関する注意事項                                                                                                                                                                                                              |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| log         | チャット、エラー、ゲームもしくは別種のログ                                                                                                                                                                             | 互換性を最大限にするために、このロールを使う際には冗長な `aria-live="polite"` を追加します。                                                                                                                                        |
-| status      | ある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。                                                         | 互換性を最大限にするために、このロールを使う際には冗長な `aria-live="polite"` を追加します。                                                                                                                                        |
-| alert       | スクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーの入力を検査する際の通知で重要です。[アラートの例](https://www.w3.org/WAI/ARIA/apg/example-index/alert/alert.html) | 互換性を最大限にするために、このロールを使う際に `aria-live="assertive"` を追加するよう勧める人もいます。しかし、`aria-live` と `role=alert` の両方を追加すると iOS の VoiceOver で二重に読み上げられるという問題を引き起こします。 |
-| progressbar | ウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。 (TBD: 情報の追加を検討中)                                                                                 |                                                                                                                                                                                                                                     |
-| marquee     | 株式相場表示機のようなスクロールするテキストのためのものです。                                                                                                                                                         |                                                                                                                                                                                                                                     |
-| timer       | カウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計の読み上げ。                                                                                                                                     |                                                                                                                                                                                                                                     |
+次の [`role="…"`](/ja/docs/Web/Accessibility/ARIA/Roles) 値を持つ要素は、既定ではライブリージョンのように振る舞います。
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">ロール</th>
+   <th scope="col">説明</th>
+   <th scope="col">互換性に関する注意事項</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>log</td>
+   <td>チャット、エラー、ゲーム、その他の種類のログ</td>
+   <td>互換性を最大限にするために、このロールを使う際には冗長な <code>aria-live="polite"</code> を追加してください。</td>
+  </tr>
+  <tr>
+   <td>status</td>
+   <td>ある種の更新された状態を表すステータスバーもしくは画面上の領域。スクリーンリーダーのユーザーには、現在のステータスを読みとるための特別なコマンドがあります。</td>
+   <td>互換性を最大限にするために、このロールを使う際には冗長な <code>aria-live="polite"</code> を追加してください。</td>
+  </tr>
+  <tr>
+   <td>alert</td>
+   <td>スクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーの入力を検査する際の通知で重要です。<a href="https://www.w3.org/WAI/ARIA/apg/example-index/alert/alert.html" class="external" rel=" noopener">アラートの例。</a></td>
+   <td>互換性を最大限にするために、このロールを使う際に冗長に <code>aria-live="assertive"</code> を追加するよう勧める人もいます。しかし、<code>aria-live</code> と <code>role="alert"</code> の両方を追加すると iOS の VoiceOver で二重に読み上げられるという問題を引き起こします。</td>
+  </tr>
+  <tr>
+   <td>progressbar</td>
+   <td>ウィジェットとライブリージョンのハイブリッド。<code>aria-valuemin</code>、<code>aria-valuenow</code>、<code>aria-valuemax</code> と共に使います。（TBD: 情報の追加を検討中）</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>marquee</td>
+   <td>株式相場表示機のようなスクロールするテキストのためのものです。</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>timer</td>
+   <td>カウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計の読み上げ。</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
 
 ## ライブリージョン属性についてのさらなる説明
 
 ライブリージョンはとてもよくサポートされています。The Paciello Group は、2014年に、[ライブリージョンのサポート状況についての情報](https://www.tpgi.com/screen-reader-support-aria-live-regions/) (2014) を投稿しました。Paul Jadam は特に [`aira-atomic` と `aria-relevant` のサポート](https://pauljadam.com/demos/aria-atomic-relevant.html)についてのリサーチをしました。
 
-1. **`aria-atomic`**: `aria-atomic=BOOLEAN` は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は `false` または `true` で、デフォルトは `false` です。
-2. [**`aria-relevant`**](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant): `aria-relevant=[LIST_OF_CHANGES]` はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は `additions`、`removals`、`text`、`all` から一つ以上で、 `additions text` がデフォルトです。
+1. **`aria-atomic`**: `aria-atomic=BOOLEAN` は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は `false` または `true` で、既定は `false` です。
+2. [**`aria-relevant`**](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)
+
+   : `aria-relevant=[LIST_OF_CHANGES]` はどういった類の変更がライブリージョンに関連するかを設定します。可能な設定は `additions`、`removals`、`text`、`all` から一つ以上で、 `additions text` が既定です。
 
 ### 基本的な例: `aria-atomic`
 
@@ -158,8 +210,10 @@ function updateClock() {
   document.getElementById("clock-mins").textContent =
     `0${now.getMinutes()}`.substr(-2);
 }
+
 /* first run */
 updateClock();
+
 /* update every minute */
 setInterval(updateClock, 60000);
 ```
@@ -171,7 +225,7 @@ setInterval(updateClock, 60000);
 `aria-atomic="true"` はライブリージョンが更新されるたびに、コンテンツの全体 (例 "17:34") が通知されることを保証します。
 
 ```html
-<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
+<div id="clock" role="timer" aria-live="polite" aria-atomic="true">…</div>
 ```
 
 `aria-atomic` のもう一つの例 - ユーザーのアクションによる結果の更新/通知
@@ -191,6 +245,7 @@ setInterval(updateClock, 60000);
 ```js
 function change(event) {
   const yearOut = document.getElementById("year-output");
+
   switch (event.target.id) {
     case "year":
       yearOut.innerHTML = event.target.value;
@@ -211,16 +266,16 @@ function change(event) {
 
 ```html
 <ul id="roster" aria-live="polite" aria-relevant="additions removals">
-  <!-- use JavaScript to add remove users here-->
+  <!-- use JavaScript to add and remove users here -->
 </ul>
 ```
 
 ARIA ライブプロパティの内訳:
 
 - `aria-live="polite"` はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" による中断では、ユーザーのフローを妨げるかもしれないため、これが最も一般的に使用される値です。
-- `aria-atomic` は設定されていません (デフォルトの `false` が入ります) ので、追加または削除されたユーザーのみが読み上げられ、名簿全体が都度読み上げられることはないはずです。
+- `aria-atomic` は設定されていません（既定値の `false` が入ります）ので、追加または削除されたユーザーのみが読み上げられ、名簿全体が都度読み上げられることはないはずです。
 - `aria-relevant="additions removals"` により名簿に追加もしくは削除されたユーザーが読み上げられることを確かにします。
 
 ## 関連情報
 
-- [ARIA Roles](/ja/docs/Web/Accessibility/ARIA/Roles)
+- [ARIA ロール](/ja/docs/Web/Accessibility/ARIA/Roles)

From 6a96282c1db43f5ab4c32f6643ecafa9db2848ce Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 26 Sep 2023 22:22:42 +0900
Subject: [PATCH 224/268] =?UTF-8?q?2023/09/12=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../global_objects/array/find/index.md        | 136 ++++++++----------
 1 file changed, 62 insertions(+), 74 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/array/find/index.md b/files/ja/web/javascript/reference/global_objects/array/find/index.md
index 5f1f1c306cc1f4..063a6f4668a304 100644
--- a/files/ja/web/javascript/reference/global_objects/array/find/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/find/index.md
@@ -2,73 +2,40 @@
 title: Array.prototype.find()
 slug: Web/JavaScript/Reference/Global_Objects/Array/find
 l10n:
-  sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3
+  sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
 ---
 
 {{JSRef}}
 
-`find()` メソッドは、提供されたテスト関数を満たす配列内の最初の要素を返します。
+**`find()`** は {{jsxref("Array")}} インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。
 テスト関数を満たす値がない場合は、 {{jsxref("undefined")}} を返します。
 
-{{EmbedInteractiveExample("pages/js/array-find.html","shorter")}}
-
 - 配列内で見つかった要素の**添字**が必要な場合は、{{jsxref("Array/findIndex", "findIndex()")}} を使用してください。
 - **値の添字**を検索する必要がある場合は、{{jsxref("Array/indexOf", "indexOf()")}} を使用してください。({{jsxref("Array/findIndex", "findIndex()")}} と似ていますが、それぞれの要素の等価性はテスト関数ではなく値でチェックします。)
 - 配列内に値が**存在する**かどうかを調べる必要がある場合は、 {{jsxref("Array/includes", "includes()")}} を使用してください。
 - 指定したテスト関数を満たす要素があるかどうかを調べる必要がある場合は、 {{jsxref("Array/some", "some()")}} を使用してください。
 
-## 構文
+{{EmbedInteractiveExample("pages/js/array-find.html", "shorter")}}
 
-```js
-// アロー関数
-find((element) => {
-  /* … */
-});
-find((element, index) => {
-  /* … */
-});
-find((element, index, array) => {
-  /* … */
-});
-
-// コールバック関数
-find(callbackFn);
-find(callbackFn, thisArg);
+## 構文
 
-// インラインコールバック関数
-find(function (element) {
-  /* … */
-});
-find(function (element, index) {
-  /* … */
-});
-find(function (element, index, array) {
-  /* … */
-});
-find(function (element, index, array) {
-  /* … */
-}, thisArg);
+```js-nolint
+find(callbackFn)
+find(callbackFn, thisArg)
 ```
 
 ### 引数
 
 - `callbackFn`
-
-  - : 配列内の各要素に対して実行する関数です。
-
-    この関数は以下の引数を伴って呼び出されます。
-
+  - : 配列のそれぞれの要素に対して実行する関数です。一致する要素が得られたことを示すには[真値](/ja/docs/Glossary/Truthy)を返し、そうでなければ[偽値](/ja/docs/Glossary/Falsy)を返してください。この関数は以下の引数で呼び出されます。
     - `element`
       - : 配列内で現在処理されている要素です。
     - `index`
-      - : 配列内で現在処理されている要素の添字 (位置) です。
+      - : 配列内で現在処理されている要素の添字（位置）です。
     - `array`
-      - : `find` を呼び出した元の配列です。
-
-    コールバック関数は、一致する要素が見つかった場合は[真値](/ja/docs/Glossary/Truthy)を返す必要があります。
-
+      - : `find()` を呼び出した元の配列です。
 - `thisArg` {{optional_inline}}
-  - : `callbackFn` 内で {{jsxref("Operators/this", "this")}} として使われるオブジェクトです。
+  - : `callbackFn` 内で `this` として使われるオブジェクトです。[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)を参照してください。
 
 ### 返値
 
@@ -77,20 +44,19 @@ find(function (element, index, array) {
 
 ## 解説
 
-`find` メソッドは、配列のそれぞれの添字に対して一度ずつ、`callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。その場合、`find` は直ちにその要素の値を返します。そうでなければ、`find` は {{jsxref("undefined")}} を返します。
+`find()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。配列の要素のそれぞれに対して、添字の昇順に一度ずつ `callbackFn` 関数を実行し、`callbackFn` 関数が[真値](/ja/docs/Glossary/Truthy)を返すまで繰り返します。 `find()` はその要素を返し、配列の反復処理を停止します。もし `callbackFn` が真値を返さない場合、 `find()` は {{jsxref("undefined")}} を返します。
 
-`callbackFn` は、値が割り当てられているものに限らず、配列中の<em>すべて</em>の添字に対して呼び出されます。すなわち、疎配列では値が割り当てられているもののみを呼び出すメソッドに比べて効率的ではないことを意味します。
+`callbackFn` は、値が割り当てられているものに限らず、配列中の*すべて*の添字に対して呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)では、空のスロットは `undefined` と同じ動作をします。
 
-`thisArg` 引数が `find` に与えられた場合、`callbackFn` の呼び出しのたびに、その内部で `this` 値として使用されます。この引数を省略した場合は {{jsxref("undefined")}} が使用されます。
+`find()` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。しかし、配列の長さは最初に `callbackFn` が呼び出される*前に*設定されます。したがって、
 
-`find` は、呼び出した配列を変更 (mutate) しませんが、`callbackFn` で提供された関数は変更する可能性があります。その場合、`find` によって処理される各要素は、最初に `callbackFn` が呼び出される*前に*設定されます。したがって、
+- `callbackFn` は `find()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
+- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
+- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除された](/ja/docs/Web/JavaScript/Reference/Operators/delete) 要素は `undefined` であるかのように処理されます。
 
-- `callbackFn` は `find` の呼び出しが始まった後に追加された要素に対しては実行されません。
-- 既に処理した位置に割り当てられた要素、または範囲外のr要素であった場合は、 `callbackFn` が実行されません。
-- 配列の、既存のまだ呼び出していない要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値は `find` がその要素の添字を処理した時点での値になります。
-- {{jsxref("Operators/delete", "削除")}}された要素も処理されます。
+> **警告:** 上で説明したような同時進行の変更は、理解しにくいコードになることが多いので、（特別な場合を除いて）避けるのが一般的です。
 
-> **警告:** 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
+`find()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
 ## 例
 
@@ -127,7 +93,7 @@ console.log(result); // { name: 'cherries', quantity: 5 }
 
 ### 配列内の素数の検索
 
-次の例は、配列内の素数を探します (配列内に素数が見つからない場合は {{jsxref("undefined")}} を返します)。
+次の例は、配列内の素数を探します（配列内に素数が見つからない場合は {{jsxref("undefined")}} を返します）。
 
 ```js
 function isPrime(element, index, array) {
@@ -144,7 +110,9 @@ console.log([4, 6, 8, 12].find(isPrime)); // undefined, 見つからない
 console.log([4, 5, 8, 12].find(isPrime)); // 5
 ```
 
-以下の例は存在せず削除された要素が処理*される*こと、コールバックに渡される値が処理時点での値であることを示しています。
+### 疎配列における find() の使用
+
+疎配列の空のスロットは処理され、 `undefined` と同じように扱われます。
 
 ```js
 // 添字が 2, 3, 4 の位置に要素がない配列を宣言
@@ -152,20 +120,8 @@ const array = [0, 1, , , , 5, 6];
 
 // 値が割り当てられているものに限らず、すべての添字を表示
 array.find((value, index) => {
-  console.log("Visited index ", index, " with value ", value);
-});
-
-// 削除されたものを含め、すべての添字を表示
-array.find((value, index) => {
-  // 初回で要素 5 を削除
-  if (index === 0) {
-    console.log("Deleting array[5] with value ", array[5]);
-    delete array[5];
-  }
-  // 要素 5 は削除されても処理される
-  console.log("Visited index ", index, " with value ", value);
+  console.log("Visited index", index, "with value", value);
 });
-// 期待される出力:
 // Visited index 0 with value 0
 // Visited index 1 with value 1
 // Visited index 2 with value undefined
@@ -173,7 +129,18 @@ array.find((value, index) => {
 // Visited index 4 with value undefined
 // Visited index 5 with value 5
 // Visited index 6 with value 6
-// array[5] にある値 5 を削除
+
+// 削除されたものを含め、すべての添字を表示
+array.find((value, index) => {
+  // 最初の反復処理で要素 5 を削除
+  if (index === 0) {
+    console.log("Deleting array[5] with value", array[5]);
+    delete array[5];
+  }
+  // 要素 5 は削除されたが、なお処理対象となる
+  console.log("Visited index", index, "with value", value);
+});
+// Deleting array[5] with value 5
 // Visited index 0 with value 0
 // Visited index 1 with value 1
 // Visited index 2 with value undefined
@@ -183,6 +150,22 @@ array.find((value, index) => {
 // Visited index 6 with value 6
 ```
 
+### 配列でないオブジェクトに対する find() の呼び出し
+
+`find()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。
+
+```js
+const arrayLike = {
+  length: 3,
+  "-1": 0.1, // -1 < 0 であるため find() からは無視される
+  0: 2,
+  1: 7.3,
+  2: 4,
+};
+console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)));
+// 7.3
+```
+
 ## 仕様書
 
 {{Specifications}}
@@ -194,8 +177,13 @@ array.find((value, index) => {
 ## 関連情報
 
 - [`Array.prototype.find` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
-- {{jsxref("Array.prototype.findIndex()")}} – 要素を見つけて位置を返す
-- {{jsxref("Array.prototype.includes()")}} – 配列内に値が存在するかどうかをテストする
-- {{jsxref("Array.prototype.filter()")}} – 一致しない要素をすべて除外する
-- {{jsxref("Array.prototype.every()")}} – すべての要素をテストする
-- {{jsxref("Array.prototype.some()")}} – 1 つの要素が一致するまでテストする
+- [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)のガイド
+- {{jsxref("Array")}}
+- {{jsxref("Array.prototype.findIndex()")}}
+- {{jsxref("Array.prototype.findLast()")}}
+- {{jsxref("Array.prototype.findLastIndex()")}}
+- {{jsxref("Array.prototype.includes()")}}
+- {{jsxref("Array.prototype.filter()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
+- {{jsxref("TypedArray.prototype.find()")}}

From 3c2fe752adc89eebc4d7231d9ee5ed646d3a2600 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 26 Sep 2023 22:34:42 +0900
Subject: [PATCH 225/268] =?UTF-8?q?String#html=5Fwrapper=5Fmethods=20?=
 =?UTF-8?q?=E3=81=AE=E3=83=95=E3=83=A9=E3=82=B0=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../javascript/reference/global_objects/string/anchor/index.md  | 2 +-
 .../web/javascript/reference/global_objects/string/big/index.md | 2 +-
 .../javascript/reference/global_objects/string/blink/index.md   | 2 +-
 .../javascript/reference/global_objects/string/bold/index.md    | 2 +-
 .../javascript/reference/global_objects/string/fixed/index.md   | 2 +-
 .../reference/global_objects/string/fontcolor/index.md          | 2 +-
 .../reference/global_objects/string/fontsize/index.md           | 2 +-
 .../javascript/reference/global_objects/string/italics/index.md | 2 +-
 .../javascript/reference/global_objects/string/link/index.md    | 2 +-
 .../javascript/reference/global_objects/string/small/index.md   | 2 +-
 .../javascript/reference/global_objects/string/strike/index.md  | 2 +-
 .../web/javascript/reference/global_objects/string/sub/index.md | 2 +-
 .../web/javascript/reference/global_objects/string/sup/index.md | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/string/anchor/index.md b/files/ja/web/javascript/reference/global_objects/string/anchor/index.md
index 7000d8bb7e2da2..994212123d31f3 100644
--- a/files/ja/web/javascript/reference/global_objects/string/anchor/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/anchor/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`anchor()`** メソッドは、{{HTMLElement("a")}} 要素に name を付けたものに文字列を埋め込んだ文字列 (`<a name="...">str</a>`) を生成します。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 >
 > HTML 仕様書では {{HTMLElement("a")}} 要素に `name` 属性を設定することを許容しなくなりましたので、このメソッドが生成するものは妥当なマークアップになりません。
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/big/index.md b/files/ja/web/javascript/reference/global_objects/string/big/index.md
index b75dbc21b67c36..0c27b050389b0c 100644
--- a/files/ja/web/javascript/reference/global_objects/string/big/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/big/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`big()`** メソッドは、文字列を {{HTMLElement("big")}} 要素の中に埋め込み (`<big>str</big>`)、文字列が大きなフォントで表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。`<big>` 要素自体は [HTML5](/ja/docs/Glossary/HTML5) で削除されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。`<big>` 要素自体は [HTML5](/ja/docs/Glossary/HTML5) で削除されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/blink/index.md b/files/ja/web/javascript/reference/global_objects/string/blink/index.md
index d902bc2f62df1b..f86bf26476d28b 100644
--- a/files/ja/web/javascript/reference/global_objects/string/blink/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/blink/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`blink()`** メソッドは、文字列を (`<blink>str</blink>`) に埋め込んだ文字列を生成し、古いブラウザーにおいて文字列を点滅させるために使用します。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。`blink()` の場合、`<blink>` 要素自体が現代のブラウザーから削除されており、テキストを点滅させることは、複数のアクセシビリティ標準で忌避されています。この要素を使用することは避けてください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。`blink()` の場合、`<blink>` 要素自体が現代のブラウザーから削除されており、テキストを点滅させることは、複数のアクセシビリティ標準で忌避されています。この要素を使用することは避けてください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/bold/index.md b/files/ja/web/javascript/reference/global_objects/string/bold/index.md
index 8d02715aa01fd9..b7d602d0793f7a 100644
--- a/files/ja/web/javascript/reference/global_objects/string/bold/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/bold/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`bold()`** メソッドは、文字列を {{HTMLElement("b")}} 要素に埋め込んだ文字列 (`<b>str</b>`) を生成し、文字列が太字で表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/fixed/index.md b/files/ja/web/javascript/reference/global_objects/string/fixed/index.md
index be5e25c30376c9..2ef9eed05d6b2c 100644
--- a/files/ja/web/javascript/reference/global_objects/string/fixed/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/fixed/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`fixed()`** メソッドは、文字列を {{HTMLElement("tt")}} 要素に埋め込み (`<tt>str</tt>`)、文字列が固定ピッチフォントで表示されるような文字列を生成します。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/fontcolor/index.md b/files/ja/web/javascript/reference/global_objects/string/fontcolor/index.md
index 28e42307af64f5..d24714de156f9b 100644
--- a/files/ja/web/javascript/reference/global_objects/string/fontcolor/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/fontcolor/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`fontcolor()`** メソッドは、文字列を {{HTMLElement("font")}} 要素に埋め込み (`<font color="...">str</font>`)、文字列が指定されたフォント色で表示されるようにする文字列を生成します。
 
-> **メモ:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。`fontcolor()` の場合、`<font>` 要素は [HTML5](/ja/docs/Glossary/HTML5) で廃止されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
+> **メモ:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。`fontcolor()` の場合、`<font>` 要素は [HTML5](/ja/docs/Glossary/HTML5) で廃止されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/fontsize/index.md b/files/ja/web/javascript/reference/global_objects/string/fontsize/index.md
index 0bdf924938cb47..a7766ae9c9da7f 100644
--- a/files/ja/web/javascript/reference/global_objects/string/fontsize/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/fontsize/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`fontcolor()`** メソッドは、文字列を {{HTMLElement("font")}} 要素に埋め込み (`<font size="...">str</font>`)、文字列が指定されたフォントサイズで表示されるようにする文字列を生成します。
 
-> **メモ:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。`fontsize()` の場合、`<font>` 要素は [HTML5](/ja/docs/Glossary/HTML5) で廃止されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
+> **メモ:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。`fontsize()` の場合、`<font>` 要素は [HTML5](/ja/docs/Glossary/HTML5) で廃止されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/italics/index.md b/files/ja/web/javascript/reference/global_objects/string/italics/index.md
index a386a798bae77e..b1e32fa745bd3a 100644
--- a/files/ja/web/javascript/reference/global_objects/string/italics/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/italics/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`italics()`** メソッドは、文字列を {{HTMLElement("i")}} 要素に埋め込んだ文字列 (`<i>str</i>`) を生成し、文字列がイタリック体で表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/link/index.md b/files/ja/web/javascript/reference/global_objects/string/link/index.md
index 5595a45e98f8c1..b1f75d3dd0e3cd 100644
--- a/files/ja/web/javascript/reference/global_objects/string/link/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/link/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`link()`** メソッドは、文字列を {{HTMLElement("a")}} 要素に埋め込み (`<a href="...">str</a>`)、他の URL へのハイパーテイストリンクとして使用される文字列を生成します。
 
-> **メモ:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **メモ:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/small/index.md b/files/ja/web/javascript/reference/global_objects/string/small/index.md
index c4c10f4b15c392..dc0cf6dca5d28f 100644
--- a/files/ja/web/javascript/reference/global_objects/string/small/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/small/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`small()`** メソッドは、文字列を {{HTMLElement("small")}} 要素に埋め込んだ文字列 (`<small>str</small>`) を生成し、文字列が小さなフォントで表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/strike/index.md b/files/ja/web/javascript/reference/global_objects/string/strike/index.md
index a54cdc86b91247..4597c91a91e55c 100644
--- a/files/ja/web/javascript/reference/global_objects/string/strike/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/strike/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`strike()`** メソッドは、文字列を {{HTMLElement("strike")}} 要素に埋め込んだ文字列 (`<strike>str</strike>`) を生成し、文字列が取り消されたテキストとして表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/sub/index.md b/files/ja/web/javascript/reference/global_objects/string/sub/index.md
index dbd2da1b26c61d..cc58c47a231773 100644
--- a/files/ja/web/javascript/reference/global_objects/string/sub/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/sub/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`sub()`** メソッドは、文字列を {{HTMLElement("sub")}} 要素に埋め込んだ文字列 (`<sub>str</sub>`) を生成し、文字列が下付き文字として表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 
diff --git a/files/ja/web/javascript/reference/global_objects/string/sup/index.md b/files/ja/web/javascript/reference/global_objects/string/sup/index.md
index d0465e138bf577..6f12c42ddd2965 100644
--- a/files/ja/web/javascript/reference/global_objects/string/sup/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/sup/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **`sup()`** メソッドは、文字列を {{HTMLElement("sup")}} 要素に埋め込んだ文字列 (`<sup>str</sup>`) を生成し、文字列が上付き文字として表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_wrapper_methods)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。代わりに [DOM API](/ja/docs/Web/API/Document_Object_Model) の [`document.createElement()`](/ja/docs/Web/API/Document/createElement) などを使用してください。
 
 ## 構文
 

From 8a66176545e86460c1c7498f20ba0ad1aff3953a Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 17:02:30 +0900
Subject: [PATCH 226/268] [ko]: add index.md for `web/glossary/exception`
 (#15952)

[add]: add index.md for web/glossary/exception
---
 files/ko/glossary/exception/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 files/ko/glossary/exception/index.md

diff --git a/files/ko/glossary/exception/index.md b/files/ko/glossary/exception/index.md
new file mode 100644
index 00000000000000..ff537fe32260c9
--- /dev/null
+++ b/files/ko/glossary/exception/index.md
@@ -0,0 +1,14 @@
+---
+title: 예외 (Exception)
+slug: Glossary/Exception
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**예외(exception)**는 정상적인 코드 실행을 중단하는 조건입니다. JavaScript {{glossary("syntax error", "문법 에러")}}는 매우 일반적인 예외가 있는 코드입니다.
+
+## 같이 보기
+
+- 위키백과의 [예외 핸들링](https://en.wikipedia.org/wiki/Exception_handling)

From 32c2f606d20b098142805cc0ef255c10d46df951 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 20:22:10 +0900
Subject: [PATCH 227/268] [ko]: add index.md for `web/glossary/fingerprinting`
 (#15968)

[add]: add index.md for web/glossary/fingerprinting
---
 files/ko/glossary/fingerprinting/index.md | 26 +++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 files/ko/glossary/fingerprinting/index.md

diff --git a/files/ko/glossary/fingerprinting/index.md b/files/ko/glossary/fingerprinting/index.md
new file mode 100644
index 00000000000000..6c5c2278565a9c
--- /dev/null
+++ b/files/ko/glossary/fingerprinting/index.md
@@ -0,0 +1,26 @@
+---
+title: 핑거프린팅 (Fingerprinting)
+slug: Glossary/Fingerprinting
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**핑거프린팅(Fingerprinting)** 은 브라우저와 기본 운영체제의 고유한 기능을 수집하고 결합하여, 웹사이트에서 특정 브라우저(더 나아가 특정 사용자)를 식별하는 방식입니다. 핑거프린팅에는 아래가 포함될 수 있습니다.
+
+- 브라우저 버전
+- 시간대 및 선호하는 언어
+- 시스템에서 사용할 수 있는 비디오 또는 오디오 코덱 세트
+- 시스템에 설치된 글꼴
+- 브라우저 설정 상태
+- 컴퓨터의 디스플레이 크기 및 해상도
+
+웹사이트는 기기에서 JavaScript와 CSS를 실행하여 이와 같은 위와 같은 정보를 검색할 수 있으며, 이 데이터를 결합하여 브라우저에 대한 고유한 핑거프린팅을 생성할 수 있으며, 이는 웹에서 사용자를 추적하는 데 사용될 수 있습니다.
+
+웹 표준은 식별 정보를 수집하는 웹 사이트의 기능을 최소화하는 방식으로 설계되었으며, 브라우저는 일반적으로 자체 보호 기능도 추가합니다.
+
+## 같이 보기
+
+- 웹사이트가 귀하의 브라우저를 지문 인식하는 데 사용할 수 있는 데이터를 표시하는 도구인 [Cover Your Tracks](https://coveryourtracks.eff.org)
+- 핑거프린팅을 방지하기 위한 명세서 작성자의 모범 사례인 [웹 명세서에서 브라우저 핑거프린팅 완화](https://www.w3.org/TR/fingerprinting-guidance/)

From c8609ae9b79f0fab4a01bdf9f53f4a217a821f96 Mon Sep 17 00:00:00 2001
From: pirateTurtle <75886763+wogha95@users.noreply.github.com>
Date: Sat, 30 Sep 2023 21:00:27 +0900
Subject: [PATCH 228/268] [ko] translate `strings` (#15368)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* strings 메타데이터 작성

* strings 1차 번역 완료

* strings 1차 lint 수정 반영

* strings 1차 리뷰 반영

* strings 2차 리뷰 반영
---
 .../javascript/first_steps/strings/index.md   | 274 +++++++++++-------
 1 file changed, 164 insertions(+), 110 deletions(-)

diff --git a/files/ko/learn/javascript/first_steps/strings/index.md b/files/ko/learn/javascript/first_steps/strings/index.md
index dce1cc38e00835..1030f997b830f5 100644
--- a/files/ko/learn/javascript/first_steps/strings/index.md
+++ b/files/ko/learn/javascript/first_steps/strings/index.md
@@ -1,6 +1,8 @@
 ---
 title: 문자열 다루기 — 문자열
 slug: Learn/JavaScript/First_steps/Strings
+l10n:
+  sourceCommit: f3b6afa6ec60508dceeec4fd299ec4ba3995c0c2
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
@@ -25,178 +27,230 @@ slug: Learn/JavaScript/First_steps/Strings
 
 ## 단어의 힘
 
-단어는 인간이 커뮤니케이션 함에 있어 커다란 하나의 부분이라고 할 수 있기에 매우 중요합니다. 웹은 사람들이 정보를 교환하고 공유할 수 있도록 설계된 텍스트 기반의 매체이므로, 웹에 표시되는 단어를 제어하는 것이 유용합니다. {{glossary ( "HTML")}}은 텍스트에 구조와 의미를 제공하며, {{glossary ( "CSS")}}는 텍스트에 스타일(일종의 디자인)을 적용할 수 있게 해주며, JavaScript는 문자열을 조작하기 위한 여러 가지 기능 (텍스트 레이블을 표시하고 용어를 원하는 순서로 정렬하는) 등 다양한 작업을 수행할 수 있습니다.
+단어는 인간이 커뮤니케이션 함에 있어 커다란 하나의 부분이라고 할 수 있기에 매우 중요합니다. 웹은 사람들이 정보를 교환하고 공유할 수 있도록 설계된 텍스트 기반의 매체이므로, 웹에 표시되는 단어를 제어하는 것이 유용합니다. {{glossary("HTML")}}은 텍스트에 구조와 의미를 부여하고, {{glossary("CSS")}}는 텍스트의 스타일을 정밀하게 지정할 수 있게 해주며, JavaScript에는 문자열 조작, 사용자 지정 환영 메시지 및 프롬프트 생성, 필요할 때 올바른 텍스트 레이블 표시, 원하는 순서로 용어 정렬 등을 위한 다양한 기능이 포함되어 있습니다.
 
 지금까지 우리가 여러분에게 보여 줬던 거의 모든 프로그램은 문자열 조작과 관련이 있습니다.
 
-## 문자열 — 기초
+## 문자열 선언하기
 
-문자열은 숫자와 유사하게 다루어지지만, 더 깊게 파고들면 눈에 띄는 차이점을 발견하기 시작할 것입니다. 먼저 몇 가지 기본 라인을 콘솔에 입력하여 우리와 친숙하게 만드는 것으로 시작하겠습니다. [이 링크](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html)를 통해 다른 탭이나 창에서 열 수 있고, [브라우저 개발자 도구](/ko/docs/Learn/Common_questions/What_are_browser_developer_tools)를 사용할 수도 있습니다).
+문자열은 언뜻 보기에는 숫자와 비슷하게 다루어지지만, 자세히 살펴보면 몇 가지 눈에 띄는 차이점을 발견할 수 있습니다. [브라우저 개발자 콘솔](/ko/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)에 몇 가지 기본 행을 입력하여 익숙해지는 것부터 시작해 보겠습니다.
 
-### 문자열 만들기
+먼저 다음 줄을 입력합니다.
 
-1. 먼저 아래의 명령어를 입력하세요.
+```js
+const string = "The revolution will not be televised.";
+console.log(string);
+```
 
-   ```js
-   var string = "The revolution will not be televised.";
-   string;
-   ```
+숫자와 마찬가지로 변수를 선언하고 문자열 값으로 초기화한 다음 값을 반환합니다. 여기서 유일한 차이점은 문자열을 작성할 때 값을 따옴표로 묶어야 한다는 점입니다.
 
-   숫자에서 했던 것과 같게, 우리는 변수를 선언하고, 문자열을 초기화 하고, 값을 반환합니다. 차이점은 오직 숫자 대신 문자열을 넣었고, 문자열 값을 따옴표로 감싸주었습니다.
+이 작업을 수행하지 않거나 따옴표 중 하나를 누락하면 오류가 발생합니다. 다음 줄을 입력해 보세요.
 
-2. 따옴표를 빼거나 잘못쓰면 에러가 뜰 것입니다. 아래의 코드를 입력해 보세요.
+```js example-bad
+const badString1 = This is a test;
+const badString2 = 'This is a test;
+const badString3 = This is a test';
+```
 
-   ```js example-bad
-   var badString = This is a test;
-   var badString = 'This is a test;
-   var badString = This is a test';
-   ```
+따옴표로 묶이지 않은 텍스트는 변수 이름, 속성 이름, 예약어 등으로 간주되므로 이러한 줄은 작동하지 않습니다. 브라우저에서 찾을 수 없는 경우 오류가 발생합니다(예: "누락됨; before 문"). 두 번째 따옴표로 표시된 것처럼 브라우저가 문자열이 시작되는 위치는 알 수 있지만 문자열의 끝을 찾을 수 없는 경우 오류("종료되지 않은 문자열 리터럴")가 발생합니다. 프로그램에서 이러한 오류가 발생하면 돌아가서 모든 문자열을 확인하여 따옴표가 누락되지 않았는지 확인하세요.
 
-   따옴표로 감싸져 있지 않은 텍스트는 변수 이름, 속성 이름, 예약어와 유사하다고 가정하기 때문에 이러한 코드는 작동하지 않습니다. 만약 브라우저가 찾을 수 없다면 에러가 발생할 것입니다. (e.g. "missing ; before statement"). 만약 브라우저가 문자열이 시작하는 곳은 볼 수 있지만, 끝나는 곳을 찾지 못하면 에러를 던집니다.("unterminated string literal"). 만약 당신의 프로그램이 에러를 계속 만들어낸다면, 다시 돌아가 당신의 문자열에 빠진 따옴표가 없는지 찾아보십시오.
+이전에 변수 문자열을 정의한 경우 다음이 작동하므로 지금 시도해 보세요.
 
-3. 다음의 코드는 당신이 변수 `string` 을 선언했다면 작동할 것입니다. 아래의 코드를 입력해보세요 :
+```js
+const badString = string;
+console.log(badString);
+```
 
-   ```js
-   var badString = string;
-   badString;
-   ```
+`badString` 은 이제 `string` 과 같은 값으로 설정되었습니다.
 
-   `badString` 은 이제 `string` 과 같은 값으로 설정되었습니다.
+### 따옴표, 쌍따옴표, 백틱
 
-### 따옴표 vs 쌍따옴표
+JavaScript에서는 따옴표(`'`), 쌍따옴표(`"`) 또는 백틱(`` ` ``)을 선택하여 문자열을 감싸을 수 있습니다. 다음 모두 사용할 수 있습니다.
 
-1. 자바스크립트에서는 따옴표와 쌍따옴표가 모두 허용됩니다. 다음의 코드는 문제 없이 작동할 것입니다.
+```js-nolint
+const single = 'Single quotes';
+const double = "Double quotes";
+const backtick = `Backtick`;
 
-   ```js
-   var sgl = "Single quotes.";
-   var dbl = "Double quotes";
-   sgl;
-   dbl;
-   ```
+console.log(single);
+console.log(double);
+console.log(backtick);
+```
 
-2. 따옴표와 쌍따옴표는 차이점이 거의 없어, 편한대로 사용할 수 있습니다. 하지만 당신은 문자열을 감싸는데 한 종류의 따옴표만 사용해야 되며 그렇지 않으면 에러가 발생합니다. 아래의 코드를 실행해 보세요.
+문자열의 시작과 끝에 같은 문자를 사용해야 하며 그렇지 않으면 오류가 발생합니다.
 
-   ```js example-bad
-   var badQuotes = 'What on earth?";
-   ```
+```js-nolint example-bad
+const badQuotes = 'This is not allowed!";
+```
 
-3. 브라우저는 다른종류의 따옴표가 감싸고 있어 문자열이 아직 끝나지 않았다고 생각합니다. 예를 들어, 아래 두 가지 모두 괜찮습니다.
+따옴표를 사용하여 선언한 문자열과 쌍따옴표를 사용하여 선언한 문자열은 동일하며 어떤 스타일을 사용할지는 개인 취향에 따라 다르지만, 한 가지 스타일을 선택하여 코드에서 일관되게 사용하는 것이 좋습니다.
 
-   ```js
-   var sglDbl = 'Would you eat a "fish supper"?';
-   var dblSgl = "I'm feeling blue.";
-   sglDbl;
-   dblSgl;
-   ```
+백틱을 사용하여 선언된 문자열은 [템플릿 리터럴](/ko/docs/Web/JavaScript/Reference/Template_literals)이라고 하는 특수한 종류의 문자열입니다. 템플릿 리터럴은 대부분의 경우 일반 문자열과 비슷하지만 몇 가지 특별한 속성이 있습니다.
 
-4. 하지만, 당신은 같은 종류의 따옴표를 문자열에 포함시킬 수 없습니다. 브라우저는 어느 따옴표가 문자열이 끝났다는 것을 알리는지 혼돈하게 됩니다. 따라서 다음의 코드는 에러가 발생합니다.
+- [JavaScript 삽입](#embedding_javascript)을 할 수 있습니다.
+- [여러 줄](#multiline_strings)로 템플릿 리터럴을 선언할 수 있습니다.
 
-   ```js example-bad
-   var bigmouth = 'I've got no right to take my place...';
-   ```
+## JavaScript 삽입
 
-   이는 우리를 다음 문단으로 이끌어 줍니다.
+템플릿 리터럴 내에서 JavaScript 변수나 표현식을 `${ }`로 감싸면 결과가 문자열에 포함됩니다.
 
-### 문자열 이스케이프 문자
+```js
+const name = "Chris";
+const greeting = `Hello, ${name}`;
+console.log(greeting); // "Hello, Chris"
+```
 
-직전의 문제의 코드를 해결하기 위해, 우리는 따옴표를 이스케이프 문자로 만들어야 합니다. 이스케이프 문자란 어떤 한 문자를 코드가 아닌 문자열로 만들어주는 문자입니다. 자바스크립트에서는 역슬래시 ( \ )를 문자 바로 앞에 작성함으로써 코드가 아닌 문자열로 인식하게 합니다.
+동일한 기법을 사용하여 두 변수를 결합할 수 있습니다.
 
-```js-nolint example-good
-var bigmouth = 'I\'ve got no right to take my place...';
-console.log(bigmouth);
+```js
+const one = "Hello, ";
+const two = "how are you?";
+const joined = `${one}${two}`;
+console.log(joined); // "Hello, how are you?"
 ```
 
-이것은 에러가 일어나지 않습니다. 당신은 `\"` 와 같게도 사용할 수 있습니다. 자세한 사항은 [이스케이프 표기법](/ko/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation)을 참고하십시오
+이렇게 문자열을 서로 연결하는 것을 연결이라고 합니다.
 
-## 문자열 연결하기
+## 컨텍스트에서 연결
 
-1. 'Concatenate'는 '결합' 을 의미하는 프로프래밍 단어입니다. 자바스크립트에서 문자열을 함께 결합하려면 숫자를 더할 때 사용하는 것과 동일한 더하기 (+) 연산자를 사용하지만 이 상황에서는 다른 작업을 수행합니다. 콘솔에 예를 들어 보겠습니다.
+연결이 실제로 어떻게 사용되는지 살펴보겠습니다.
 
-   ```js
-   var one = "Hello, ";
-   var two = "how are you?";
-   var joined = one + two;
-   joined;
-   ```
+```html
+<button>Press me</button>
+<div id="greeting"></div>
+```
+
+```js
+const button = document.querySelector("button");
 
-   변수 `joined` 의 값은 "Hello, how are you?" 입니다.
+function greet() {
+  const name = prompt("What is your name?");
+  const greeting = document.querySelector("#greeting");
+  greeting.textContent = `Hello ${name}, nice to see you!`;
+}
 
-2. 마지막 예에서는, 그저 두 개의 문자열을 결합했을 뿐이지만 각 문자열 사이에 +를 포함하기만 하면 원하는 만큼의 문자열을 결합할 수 있습니다. 다음을 시도해 보십시오.
+button.addEventListener("click", greet);
+```
 
-   ```js
-   var multiple = one + one + one + one + two;
-   multiple;
-   ```
+{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}
 
-3. 또한 변수와 실제 문자열을 혼합하여 사용할 수도 있습니다. 다음을 시도해 보십시오.
+여기서는 팝업 대화 상자를 통해 사용자에게 질문에 대한 답변을 요청한 다음 입력한 텍스트를 지정된 변수(이 경우 이름)에 저장하는 {{domxref("window.prompt()", "window.prompt()")}} 함수를 사용하고 있습니다. 그런 다음 일반 인사말 메시지에 `name`을 삽입하는 문자열을 표시합니다.
 
-   ```js
-   var response = one + "I am fine — " + two;
-   response;
-   ```
+### "+"를 이용한 연결
 
-<div class="note"><p><strong>참고</strong>: 만약 코드에 따옴표나 쌍따옴표로 묶인 문자열을 입력하면 <strong>문자열 리터럴</strong> (string literal) 이라 불립니다.</p></div>
+템플릿 리터럴에만 `${}`를 사용할 수 있으며 일반 문자열에는 사용할 수 없습니다. `+`연산자를 사용하여 일반 문자열을 연결할 수 있습니다.
 
-### 문자열의 연결
+```js
+const greeting = "Hello";
+const name = "Chris";
+console.log(greeting + ", " + name); // "Hello, Chris"
+```
 
-실제 작업에 사용되는 연결 방법에 대해 살펴보겠습니다. 이 과정에 앞부분의 예는 다음과 같습니다.
+하지만 템플릿 리터럴을 사용하면 일반적으로 더 읽기 쉬운 코드를 얻을 수 있습니다.
 
-```html
-<button>Press me</button>
+### 문자열에 표현식 포함
+
+템플릿 리터럴에 변수뿐만 아니라 JavaScript 표현식도 포함할 수 있으며, 그 결과도 결과에 포함됩니다.
+
+```js
+const song = "Fight the Youth";
+const score = 9;
+const highestScore = 10;
+const output = `I like the song ${song}. I gave it a score of ${
+  (score / highestScore) * 100
+}%.`;
+console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."
+```
+
+## 여러줄 문자열
+
+템플릿 리터럴은 소스 코드의 줄 바꿈을 존중하므로 다음과 같이 여러 줄에 걸쳐 있는 문자열을 작성할 수 있습니다.
+
+```js
+const newline = `One day you finally knew
+what you had to do, and began,`;
+console.log(newline);
+
+/*
+One day you finally knew
+what you had to do, and began,
+*/
 ```
 
+일반 문자열을 사용하여 동일한 출력을 얻으려면 문자열에 줄 바꿈 문자(`\n`)를 포함해야 합니다.
+
 ```js
-var button = document.querySelector("button");
+const newline = "One day you finally knew\nwhat you had to do, and began,";
+console.log(newline);
+
+/*
+One day you finally knew
+what you had to do, and began,
+*/
+```
+
+고급 기능에 대한 더 많은 예제와 자세한 내용은 [템플릿 리터럴](/ko/docs/Web/JavaScript/Reference/Template_literals) 참조 페이지를 참조하세요.
+
+## 문자열에 따옴표 포함
 
-button.onclick = function () {
-  var name = prompt("What is your name?");
-  alert("Hello " + name + ", nice to see you!");
-};
+문자열의 시작과 끝을 표시하기 위해 따옴표를 사용하는데, 문자열에 실제 따옴표를 포함하려면 어떻게 해야 할까요? 이것이 작동하지 않는다는 것을 알고 있습니다.
+
+```js-nolint example-bad
+const badQuotes = "She said "I think so!"";
 ```
 
-{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
+한 가지 일반적인 옵션은 다른 문자 중 하나를 사용하여 문자열을 선언하는 것입니다.
+
+```js-nolint
+const goodQuotes1 = 'She said "I think so!"';
+const goodQuotes2 = `She said "I'm not going in there!"`;
+```
 
-여기서 우리는 {{domxref("Window.prompt()", "Window.prompt()")}} 를 4번째 줄에 쓰는데, 그것은 팝업 대화 상자를 통해 질문에 응답하도록 요청한 다음 지정된 변수 내에 입력하는 텍스트를 저장합니다 — 이 경우에는 `name` 에 저장합니다. 우리는{{domxref("Window.alert()", "Window.alert()")}} 을 5번째 줄에 사용하여 두 개의 문자열 리터럴 및 변수의 값이 포함된 다른 팝업을 표시합니다.
+또 다른 옵션은 문제가 있는 따옴표를 이스케이프하는 것입니다. 문자를 이스케이프 처리한다는 것은 문자가 코드의 일부가 아닌 텍스트로 인식되도록 문자에 어떤 조치를 취한다는 뜻입니다. JavaScript에서는 문자 바로 앞에 백슬래시를 넣어 이 작업을 수행합니다. 이렇게 해보세요.
 
-### 숫자 vs 문자열
+```js-nolint
+const bigmouth = 'I\'ve got no right to take my place…';
+console.log(bigmouth);
+```
 
-1. 그러면 문자열과 숫자를 추가 (또는 연결) 하면 어떻게 될까요? 콘솔에서 사용해 보겠습니다.
+동일한 기법을 사용하여 다른 특수 문자를 삽입할 수 있습니다. 자세한 내용은 [이스케이프 시퀀스](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#escape_sequences)를 참조하세요.
 
-   ```js
-   "Front " + 242;
-   ```
+## 숫자 vs. 문자열
 
-   이 경우 오류가 발생할 것으로 예상할 수 있지만 잘 작동합니다. 숫자로 문자열을 나타내려는 것은 말이 안되지만 숫자를 문자열로 표현하는 것은 의미가 있습니다. 그래서 브라우저는 숫자를 문자열로 변환하고 두 문자열을 서로 연결시킵니다.
+문자열과 숫자를 연결하려고 하면 어떻게 될까요? 콘솔에서 시도해 봅시다.
 
-2. 숫자 두 개로도 연결할 수 있습니다 — 따옴표로 감싸면 숫자를 강제로 문자열로 만들 수 있습니다. 아래 코드를 실행해보세요(아래 코드에서 변수가 숫자인지 문자열인지를 확인하기 위해 `typeof` 연산자를 사용합니다.):
+```js
+const name = "Front ";
+const number = 242;
+console.log(`${name}${number}`); // "Front 242"
+```
 
-   ```js
-   var myDate = "19" + "67";
-   typeof myDate;
-   ```
+이 경우 오류가 반환될 것으로 예상할 수 있지만 정상적으로 작동합니다. 숫자를 문자열로 표시하는 방법은 상당히 잘 정의되어 있으므로 브라우저는 숫자를 문자열로 자동 변환하고 두 문자열을 연결합니다.
 
-3. 만약 코드에 문자열로 바꾸고 싶은 숫자형 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않거나 숫자로 바꾸고 싶은 문자열 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않으면 아래와 같은 생성자를 사용할 수 있습니다:
+문자열로 변환하려는 숫자 변수가 있거나 숫자로 변환하려는 문자열 변수가 있는 경우 다음 두 가지 구문을 사용할 수 있습니다.
 
-   - {{jsxref("Number")}} 객체는 가능하면 어떠한 입력값이건 숫자로 바꿉니다. 다음 코드를 실행해보세요:
+- {{jsxref("Number/Number", "Number()")}} 함수는 전달된 모든 것을 숫자로 변환할 수 있는 경우 숫자로 변환합니다. 다음을 시도해 보세요:
 
-     ```js
-     var myString = "123";
-     var myNum = Number(myString);
-     typeof myNum;
-     ```
+  ```js
+  const myString = "123";
+  const myNum = Number(myString);
+  console.log(typeof myNum);
+  // number
+  ```
 
-   - 반면, 모든 숫자는 [`toString()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) 이라는 함수를 가지고 있습니다. 이 함수는 숫자를 동등한 문자열로 변환합니다. 다음 코드를 실행해보세요:
+- 반대로 {{jsxref("String/String", "String()")}} 함수는 인수를 문자열로 변환합니다. 이렇게 해보세요.
 
-     ```js
-     var myNum = 123;
-     var myString = myNum.toString();
-     typeof myString;
-     ```
+  ```js
+  const myNum2 = 123;
+  const myString2 = String(myNum2);
+  console.log(typeof myString2);
+  // string
+  ```
 
-   이 생성자들은 어떤 상황에서는 정말 유용할 수 있습니다. 예를 들어, 만약 어떤 사용자가 숫자를 텍스트 필드 폼에 입력하면, 그 입력 값은 문자열일 것입니다. 하지만 만약 여러분이 이 숫자를 어떤 값에다 더하고 싶다면, 이 입력 값을 숫자로 변환해야 합니다. 이 경우 `Number()` 에 이 값을 넘겨줘서 이 문제를 해결할 수 있습니다.우리는 이미 [Number Guessing Game, in line 61](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L61) 에서 이를 사용한 적이 있습니다.
+이러한 구조는 일부 상황에서 매우 유용할 수 있습니다. 예를 들어 사용자가 양식의 텍스트 필드에 숫자를 입력하면 문자열이 됩니다. 하지만 이 숫자를 무언가에 추가하려면 숫자여야 하므로 Number()를 통해 숫자를 전달하여 처리할 수 있습니다. [숫자 맞추기 게임의 59번째 줄](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L59)에서 정확히 이 작업을 수행했습니다.
 
 ## 마치며
 
-여기까지 자바스크립트에서 다루는 문자열의 기본이었습니다. 다음 글에서는 자바스크립트에서 문자열에 사용할 수 있는 기본 제공 메소드를 조작하는 방법에 대해 알아보겠습니다.
+지금까지 JavaScript에서 다루는 문자열의 기본에 대해 알아봤습니다. 다음 글에서는 이를 바탕으로 JavaScript에서 문자열에 사용할 수 있는 몇 가지 기본 제공 메서드와 이를 사용하여 문자열을 원하는 형태로 조작하는 방법을 살펴보겠습니다.
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}

From 9d1de379a67245a98b821d1f8eabe152dbe9f5c1 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 21:11:11 +0900
Subject: [PATCH 229/268] [ko]:add index.md for `web/glossary/fetch_directive`
 (#15964)

[add]:add index.md for web/glossary/fetch_directive
---
 files/ko/glossary/fetch_directive/index.md | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 files/ko/glossary/fetch_directive/index.md

diff --git a/files/ko/glossary/fetch_directive/index.md b/files/ko/glossary/fetch_directive/index.md
new file mode 100644
index 00000000000000..d181e24eaa33ab
--- /dev/null
+++ b/files/ko/glossary/fetch_directive/index.md
@@ -0,0 +1,30 @@
+---
+title: Fetch 지시어 (Fetch directive)
+slug: Glossary/Fetch_directive
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**{{Glossary("CSP")}} fetch 지시어**는 특정 리소스 유형이 로드될 수 있는 {{HTTPHeader("Content-Security-Policy")}} 헤더 및 제어 위치에 사용됩니다. 예를 들어, {{CSP("script-src")}}는 개발자가 신뢰할 수 있는 스크립트 소스가 페이지에서 실행되도록 허용하는 반면, {{CSP("font-src")}}는 웹 글꼴 소스를 제어합니다.
+
+모든 fetch 지시문은 {{CSP("default-src")}}으로 대체됩니다. 즉, CSP 헤더에 fetch 지시어가 없으면 사용자 에이전트는 `default-src` 지시어를 찾습니다.
+
+전체 목록은 [Fetch 지시어 목록](/ko/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directives)을 참고해주세요.
+
+## 같이 보기
+
+- [용어 사전](/ko/docs/Glossary)
+
+  - {{Glossary("CSP")}}
+  - {{Glossary("Reporting directive")}}
+  - {{Glossary("Document directive")}}
+  - {{Glossary("Navigation directive")}}
+
+- 참고서
+
+  - <https://www.w3.org/TR/CSP/#directives-fetch>
+  - {{HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")}}
+  - {{HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")}}
+  - {{HTTPHeader("Content-Security-Policy")}}

From 7251852ab8496fe3d625ebe26e3c851656dd8201 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 21:12:58 +0900
Subject: [PATCH 230/268] [ko]: add index.md for `web/glossary/fuzzing`
 (#15995)

[add]: add index.md for web/glossary/fuzzing
---
 files/ko/glossary/fuzzing/index.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 files/ko/glossary/fuzzing/index.md

diff --git a/files/ko/glossary/fuzzing/index.md b/files/ko/glossary/fuzzing/index.md
new file mode 100644
index 00000000000000..3ab228b69426a7
--- /dev/null
+++ b/files/ko/glossary/fuzzing/index.md
@@ -0,0 +1,12 @@
+---
+title: 퍼즈 테스팅 (Fuzz testing)
+slug: Glossary/Fuzzing
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**퍼징(Fuzzing)**은 자동화된 도구를 사용해 프로그램 또는 프로그램 기능에 유효하지 않거나 예상치 못한 입력을 제공하고 나서, 결과를 확인해서 프로그램이 충돌하거나 부적절하게 작동하는지 확인하는 소프트웨어 테스팅 기술입니다. 퍼징은 소프트웨어의 안정성, 신뢰성 및 보안을 보장하는 중요한 방법입니다.
+
+- [위키백과: 퍼즈 테스팅(Fuzz testing)](https://en.wikipedia.org/wiki/Fuzz_testing)

From c89a5233364e21cd9289bf213c4c980c7ec44467 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 21:16:30 +0900
Subject: [PATCH 231/268] [ko]: add index.md for `web/glossary/grid_tracks`
 (#16033)

[add]: add index.md for web/glossary/grid_tracks
---
 files/ko/glossary/grid_tracks/index.md | 76 ++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 files/ko/glossary/grid_tracks/index.md

diff --git a/files/ko/glossary/grid_tracks/index.md b/files/ko/glossary/grid_tracks/index.md
new file mode 100644
index 00000000000000..20d9a609f4f5d5
--- /dev/null
+++ b/files/ko/glossary/grid_tracks/index.md
@@ -0,0 +1,76 @@
+---
+title: 그리드 트랙 (Grid Tracks)
+slug: Glossary/Grid_Tracks
+l10n:
+  sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6
+---
+
+{{GlossarySidebar}}
+
+**그리드 트랙(grid track)**은 인접한 두 {{glossary("grid lines", "격자 선")}} 사이의 공간입니다. {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}} 속성 또는 약식 {{cssxref("grid")}} 또는 {{cssxref("grid-template")}} 속성을 사용하여 '명시적 그리드'에 정의됩니다. 트랙은 명시적 그리드에서 생성된 트랙 외부에 그리드 요소를 배치하여 '암시적 그리드'에도 생성됩니다.
+
+아래 이미지는 그리드의 첫 번째 행 트랙을 보여줍니다.
+
+![그리드 트랙을 보여주는 다이어그램](1_grid_track.png)
+
+## 명시적 그리드의 트랙 크기
+
+{{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}}을 사용하여 그리드 트랙을 정의할 때, 모든 길이 단위를 사용할 수 있습니다. 또한, 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타내는 플렉스 단위인 `fr`도 사용할 수 있습니다.
+
+## 예제
+
+아래 예는 3개의 열 트랙(200픽셀 중 하나, 1fr의 두 번째 트랙, 3fr의 세 번째 트랙)이 있는 그리드를 보여줍니다. 그리드 컨테이너에서, 사용가능한 공간에서 200픽셀을 빼고 남은 공간을 4로 나눕니다. 한 부분은 2번째 열에, 나머지 3 부분은 3번째 열에 제공됩니다.
+
+```css hidden
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper > div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+```
+
+```css
+.wrapper {
+  display: grid;
+  grid-template-columns: 200px 1fr 3fr;
+}
+```
+
+```html
+<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+```
+
+{{ EmbedLiveSample('Example', '500', '230') }}
+
+## 암시적 그리드에서의 트랙 크기
+
+암시적 그리드에서 생성된 트랙은 기본적으로 자동으로 크기가 조절되지만, {{cssxref("grid-auto-rows")}} 및 {{cssxref("grid-auto-columns")}} 속성을 사용해 이러한 트랙의 크기를 정의할 수 있습니다.
+
+## 같이 보기
+
+- [그리드 레이아웃의 기본 개념](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
+- [CSS 그리드 레이아웃 명세서의 그리드 트랙 정의](https://drafts.csswg.org/css-grid/#grid-track-concept)
+- 속성 참고서
+
+  - {{cssxref("grid-template-columns")}}
+  - {{cssxref("grid-template-rows")}}
+  - {{cssxref("grid")}}
+  - {{cssxref("grid-template")}}

From df357b3d92db0dbeb9d437505c9ab76119035fdd Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 21:17:40 +0900
Subject: [PATCH 232/268] [ko]: add index.md for `web/glossary/khronos`
 (#16062)

[add]: add index.md for web/glossary/khronos
---
 files/ko/glossary/khronos/index.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 files/ko/glossary/khronos/index.md

diff --git a/files/ko/glossary/khronos/index.md b/files/ko/glossary/khronos/index.md
new file mode 100644
index 00000000000000..d12c77a8b9aaf1
--- /dev/null
+++ b/files/ko/glossary/khronos/index.md
@@ -0,0 +1,17 @@
+---
+title: 크로노스 그룹 (The Khronos Group)
+slug: Glossary/Khronos
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**크로노스 그룹 (The Khronos Group)**은 150개 이상의 업계 선도 기업으로 구성된 회원 중심의 개방형 비영리 컨소시엄입니다. 크로노스 그룹의 목적은 3D 그래픽, 증강 및 가상 현실, 병렬 프로그래밍, 비전 가속 및 기계 학습을 위한 로열티 없는 고급 상호 운용성 표준을 만드는 것입니다.
+
+이 그룹은 {{Glossary("OpenGL")}} 및 {{domxref("WebGL API")}}와 같은 표준을 유지 관리합니다.
+
+## 같이 보기
+
+- 위키백과의 [크로노스 그룹](https://en.wikipedia.org/wiki/Khronos_Group)
+- [크로노스 그룹 웹사이트](https://www.khronos.org/)

From ba5505cdd38a4cab67043646794ce48656095907 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 21:19:00 +0900
Subject: [PATCH 233/268] [ko]: add index.md for `web/glossary/instance`
 (#16100)

[add]: add index.md for web/glossary/instance
---
 files/ko/glossary/instance/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 files/ko/glossary/instance/index.md

diff --git a/files/ko/glossary/instance/index.md b/files/ko/glossary/instance/index.md
new file mode 100644
index 00000000000000..8914b2ad31b6b1
--- /dev/null
+++ b/files/ko/glossary/instance/index.md
@@ -0,0 +1,14 @@
+---
+title: 인스턴스 (Instance)
+slug: Glossary/Instance
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+{{glossary("constructor", "생성자")}}에 의해 생성된 {{glossary("object", "객체")}}는 해당 생성자의 인스턴스입니다.
+
+## 같이 보기
+
+- 위키백과의 [인스턴스](<https://en.wikipedia.org/wiki/Instance_(computer_science)>)

From 3ac44563ef54411249dab6113e8d2196f794c20f Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 21:21:04 +0900
Subject: [PATCH 234/268] [ko]: add index.md for `web/glossary/hpkp` (#16046)

[add]: add index.md for web/glossary/hpkp
---
 files/ko/glossary/hpkp/index.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 files/ko/glossary/hpkp/index.md

diff --git a/files/ko/glossary/hpkp/index.md b/files/ko/glossary/hpkp/index.md
new file mode 100644
index 00000000000000..0eda240888e846
--- /dev/null
+++ b/files/ko/glossary/hpkp/index.md
@@ -0,0 +1,15 @@
+---
+title: HTTP 공개 키 고정 (HPKP)
+slug: Glossary/HPKP
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**HTTP 공개 키 고정(HTTP Public Key Pinning, HPKP)**은 위조된 인증서에 대한 {{Glossary("MITM")}} 공격의 위험을 줄이기 위해 특정 암호화 공개 키를 특정 웹 서버와 연결하도록 웹 클라이언트에 지시하는 더 이상 사용되지 않는 보안 기능입니다.
+
+## 같이 보기
+
+- [RFC 7469](https://datatracker.ietf.org/doc/html/rfc7469)
+- 위키백과의 [HTTP Public Key Pinning](https://en.wikipedia.org/wiki/HTTP_Public_Key_Pinning)

From c478509426758d941edc9e7554a55529b7b69c9d Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sat, 30 Sep 2023 21:34:50 +0900
Subject: [PATCH 235/268] [ko]: add index.md for
 `web/glossary/progressive_web_apps` (#16219)

[add]: add index.md for web/glossary/progressive_web_apps
---
 .../ko/glossary/progressive_web_apps/index.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 files/ko/glossary/progressive_web_apps/index.md

diff --git a/files/ko/glossary/progressive_web_apps/index.md b/files/ko/glossary/progressive_web_apps/index.md
new file mode 100644
index 00000000000000..a48e11208268c8
--- /dev/null
+++ b/files/ko/glossary/progressive_web_apps/index.md
@@ -0,0 +1,19 @@
+---
+title: 프로그레시브 웹 앱 (Progressive web apps)
+slug: Glossary/Progressive_web_apps
+l10n:
+  sourceCommit: e0d92259b485a219840367cf4e23a7069f192eec
+---
+
+{{GlossarySidebar}}
+
+프로그레시브 웹 앱 (Progressive web apps, PWA)은 웹 플랫폼 기술을 사용하여 구축되었지만, 플랫폼별 앱과 같은 사용자 경험을 제공하는 애플리케이션입니다.
+
+이러한 종류의 앱은 검색 엔진을 통한 검색 가능성, {{Glossary("URL")}}을 통한 연결 가능, 여러 폼 요소에서 작동 등 웹의 가장 좋은 부분을 모두 활용하지만, 최신 API([Service Workers](/ko/docs/Web/API/Service_Worker_API) 및 [Push](/ko/docs/Web/API/Push_API))를 통해 점진적으로 향상됩니다.
+
+이러한 기능에는 설치 가능, 오프라인 작업, 서버에서 사용자와의 쉬운 동기화 및 재참여가 포함됩니다.
+
+## 같이 보기
+
+- MDN의 [프로그레시브 웹 앱](/ko/docs/Web/Progressive_web_apps)
+- web.dev의 [프로그레시브 웹 앱](https://web.dev/progressive-web-apps/)

From 4b5fa7ad05de1d7fb6e4065bef85c489e0d55d40 Mon Sep 17 00:00:00 2001
From: Jiujiang Liu <37231523+moshuying@users.noreply.github.com>
Date: Sun, 1 Oct 2023 08:12:21 +0800
Subject: [PATCH 236/268] Update index.md (#16269)

---
 .../web/javascript/equality_comparisons_and_sameness/index.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md b/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md
index 8a5938df947041..188a841886da03 100644
--- a/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md
+++ b/files/zh-cn/web/javascript/equality_comparisons_and_sameness/index.md
@@ -145,7 +145,7 @@ function sameValueZero(x, y) {
 
 ## 相等性方法比较
 
-在比较双等号和三等号时，人们通常说一个时另一个的“增强”版本。例如，双等号可以被称为三等号的扩展版本，因为前者可以执行后者的所有操作，但是会对其操作数进行类型转换——例如 `6 == "6"`。或者，也可以说双等号是基础，而三等号是增强版本，因为它要求两个操作数是相同的类型，因此增加了额外的约束。
+在比较双等号和三等号时，人们通常说一个是另一个的“增强”版本。例如，双等号可以被称为三等号的扩展版本，因为前者可以执行后者的所有操作，但是会对其操作数进行类型转换——例如 `6 == "6"`。或者，也可以说双等号是基础，而三等号是增强版本，因为它要求两个操作数是相同的类型，因此增加了额外的约束。
 
 然而，这种思维方式意味着相等比较形成了一个一维的“光谱”，其中“完全严格”位于一端，“完全宽松”位于另一端。这个模型在 {{jsxref("Object.is")}} 方面存在缺陷，因为它既不比双等号“宽松”，也不比三等号“严格”，也不处于两者之间（可以说既比双等号严格，又比三等号宽松）。从下面的相同比较表中，我们可以看出这是由于 {{jsxref("Object.is")}} 处理 {{jsxref("NaN")}} 的方式。请注意，如果 `Object.is(NaN, NaN)` 求值得到 `false`，我们*可以*说它适合宽松/严格光谱，作为三等号的更严格形式，可以区分 `-0` 和 `+0` 。然而，{{jsxref("NaN")}} 的处理意味着这是不正确的。不幸的是，{{jsxref("Object.is")}} 必须根据其特定特征来考虑，而不是根据其相等运算符的宽松度或严格度来考虑。
 

From 54a7e17dbfd9dffea30cd4e02e90ff5bb29c2c03 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Sun, 1 Oct 2023 09:36:35 +0900
Subject: [PATCH 237/268] [ko]: revise index.md in
 `web/glossary/alignment_container` (#15549)

[revise]: revise index.md in web/glossary/alignment_container
---
 .../ko/glossary/alignment_container/index.md  | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 files/ko/glossary/alignment_container/index.md

diff --git a/files/ko/glossary/alignment_container/index.md b/files/ko/glossary/alignment_container/index.md
new file mode 100644
index 00000000000000..2df41b594cff88
--- /dev/null
+++ b/files/ko/glossary/alignment_container/index.md
@@ -0,0 +1,25 @@
+---
+title: Alignment container
+slug: Glossary/Alignment_Container
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**정렬 컨테이너**는 [정렬 주체](/ko/docs/Glossary/Alignment_Subject)가 정렬되는 직사각형입니다. 정렬 컨테이너는 레이아웃 모드에 의해 정의됩니다. 정렬 컨테이너는 일반적으로 정렬 대상의 포함 블록이며 포함 블록을 설정하는 상자의 쓰기 모드를 가정합니다.
+
+## 같이 보기
+
+- [CSS 박스 정렬](/ko/docs/Web/CSS/CSS_box_alignment) 모듈
+- CSS {{CSSXref("align-content")}} 속성
+- CSS {{CSSXref("align-items")}} 속성
+- CSS {{CSSXref("align-self")}} 속성
+- CSS {{CSSXref("align-tracks")}} 속성
+- CSS {{CSSXref("justify-content")}} 속성
+- CSS {{CSSXref("justify-items")}} 속성
+- CSS {{CSSXref("justify-self")}} 속성
+- CSS {{CSSXref("justify-tracks")}} 속성
+- CSS {{CSSXref("place-content")}} 단축 속성
+- CSS {{CSSXref("place-self")}} 단축 속성
+- CSS {{CSSXref("scroll-snap-align")}} 속성

From da1a55620aaadf585fac1f58d3a0d0906900dcef Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 1 Oct 2023 18:05:56 +0900
Subject: [PATCH 238/268] =?UTF-8?q?2023/09/16=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
 =?UTF-8?q?=20(#16148)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2023/09/16 時点の英語版に同期
---
 .../global_objects/string/big/index.md        | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/string/big/index.md b/files/ja/web/javascript/reference/global_objects/string/big/index.md
index 0c27b050389b0c..0b1fd71b6e0b98 100644
--- a/files/ja/web/javascript/reference/global_objects/string/big/index.md
+++ b/files/ja/web/javascript/reference/global_objects/string/big/index.md
@@ -2,14 +2,14 @@
 title: String.prototype.big()
 slug: Web/JavaScript/Reference/Global_Objects/String/big
 l10n:
-  sourceCommit: f3df52530f974e26dd3b14f9e8d42061826dea20
+  sourceCommit: 5a2cea779777daaff451f21ca3b7f4c28a68de9e
 ---
 
-{{JSRef}} {{deprecated_header}}
+{{JSRef}} {{Deprecated_Header}}
 
-**`big()`** メソッドは、文字列を {{HTMLElement("big")}} 要素の中に埋め込み (`<big>str</big>`)、文字列が大きなフォントで表示されるようにします。
+**`big()`** は {{jsxref("String")}} 値のメソッドで、ｋの文字列を {{HTMLElement("big")}} 要素の中に埋め込み (`<big>str</big>`)、この文字列が大きなフォントで表示されるようにします。
 
-> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。`<big>` 要素自体は [HTML5](/ja/docs/Glossary/HTML5) で削除されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
+> **警告:** [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)はすべて非推奨となっており、互換性目的のみで標準化されています。`<big>` 要素自体は HTML 仕様書から削除されており、今後使用するべきではありません。代わりにウェブ開発者は [CSS](/ja/docs/Web/CSS) プロパティを使用してください。
 
 ## 構文
 
@@ -17,6 +17,10 @@ l10n:
 big()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
 `<big>` 開始タグで始まり、`str` のテキストが来て、 `</big>` 終了タグが来る文字列です。
@@ -25,17 +29,23 @@ big()
 
 ### big() の使用
 
-以下の例では文字列のメソッドを使用して、文字列の大きさを変更しています。
+下記のコードは HTML 文字列を作成し、文書内の本体を文字列で置き換えています。
 
 ```js
-const worldString = "Hello, world";
+const contentString = "Hello, world";
+
+document.body.innerHTML = contentString.big();
+```
+
+これで次の HTML が作成されます。
 
-console.log(worldString.small()); // <small>Hello, world</small>
-console.log(worldString.big()); // <big>Hello, world</big>
-console.log(worldString.fontsize(7)); // <font size="7">Hello, world</font>
+```html
+<big>Hello, world</big>
 ```
 
-{{domxref("HTMLElement/style", "element.style")}} オブジェクトを使用すると、要素の `style` 属性を使用して、次のようにもっと汎用的に操作することができます。
+> **警告:** `big` は有効な要素ではなくなっているので、このマークアップは無効です。
+
+`big()` を使用して直接 HTML テキストを作成する代わりに、 CSS を使用してフォントを操作しましょう。例えば、 {{domxref("HTMLElement/style", "element.style")}} 属性を通して {{cssxref("font-size")}} を操作することができます。
 
 ```js
 document.getElementById("yourElemId").style.fontSize = "2em";
@@ -52,5 +62,5 @@ document.getElementById("yourElemId").style.fontSize = "2em";
 ## 関連情報
 
 - [`String.prototype.big` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- {{jsxref("String.prototype.fontsize()")}}
-- {{jsxref("String.prototype.small()")}}
+- [HTML ラッパーメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#html_ラッパーメソッド)
+- {{HTMLElement("big")}}

From d88588fb4fe49562ddd8b16211f40e07f96ff8c7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 27 Sep 2023 22:45:49 +0900
Subject: [PATCH 239/268] =?UTF-8?q?2023/09/25=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/global_objects/promise/index.md | 77 ++++++++-----------
 1 file changed, 33 insertions(+), 44 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/promise/index.md b/files/ja/web/javascript/reference/global_objects/promise/index.md
index 6493d16425a7c5..cce038ca61b212 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/index.md
@@ -7,7 +7,7 @@ l10n:
 
 {{JSRef}}
 
-**`Promise`** オブジェクトは、非同期処理の完了 (もしくは失敗) の結果およびその結果の値を表します。
+**`Promise`** オブジェクトは、非同期処理の完了（もしくは失敗）の結果およびその結果の値を表します。
 
 プロミスの挙動と使用法について学ぶには、最初に[プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises)をお読みください。
 
@@ -95,7 +95,7 @@ myPromise
 
 プロミスの終了条件は、その連鎖内の次のプロミスの「決定」状態を決定します。「履行」状態はプロミスの完了が成功したことを示し、「拒否」状態は成功しなかったことを示します。連鎖内で履行されたそれぞれのプロミスの返値は、次の `.then()` に渡され、拒否された理由は連鎖内の次の拒否ハンドラー関数に渡されます。
 
-連鎖のプロミスは、ロシア人形のように入れ子になっていますが、スタックの一番上のように取り出されます。連鎖の最初のプロミスは最も深くネストされており、最初に取り出されます。
+連鎖のプロミスは、他のものの中に入れ子になっていますが、スタックの一番上のように取り出されます。連鎖の最初のプロミスは最も深くネストされており、最初に取り出されます。
 
 ```plain
 (プロミス D, (プロミス C, (プロミス B, (プロミス A) ) ) )
@@ -115,7 +115,7 @@ const promiseB = promiseA.then(handleFulfilled1, handleRejected1);
 const promiseC = promiseA.then(handleFulfilled2, handleRejected2);
 ```
 
-既に「決定」状態のプロミスにアクションを割り当てることができます。その場合、アクションは (適切であれば) 最初の非同期の機会に実行されます。プロミスは非同期であることが保証されていることに注意してください。したがって、既に「解決」状態のプロミスに対するアクションは、スタックがクリアされ、クロックティックが経過した後にのみ実行されます。この効果は `setTimeout(action,10)` とよく似ています
+既に「決定」状態のプロミスにアクションを割り当てることができます。その場合、アクションは (適切であれば) 最初の非同期の機会に実行されます。プロミスは非同期であることが保証されていることに注意してください。したがって、既に「解決」状態のプロミスに対するアクションは、スタックがクリアされ、クロックティックが経過した後にのみ実行されます。この効果は `setTimeout(action, 0)` とよく似ています
 
 ```js
 const promiseA = new Promise((resolve, reject) => {
@@ -173,56 +173,44 @@ JavaScript はもともと[シングルスレッド](/ja/docs/Glossary/Thread)
 - {{jsxref("Promise/Promise", "Promise()")}}
   - : 新しい `Promise` オブジェクトを生成します。このコンストラクターは主に、まだプロミスに対応していない関数をラップするために使われます。
 
-## 静的メソッド
-
-- {{JSxRef("Promise.all()")}}
-
-  - : すべてのプロミスが履行されるか、拒否されるかするまで待ちます。
-
-    返却されたプロミスが履行された場合、履行されたプロミスが、複数のプロミスが含まれる反復可能オブジェクトで定義された順番で入った集合配列の値によって履行されます。
-
-    拒否された場合は、反復可能オブジェクトの中で拒否された最初のプロミスの理由によって拒否されます。
-
-- {{JSxRef("Promise.allSettled()")}}
+## 静的プロパティ
 
-  - : すべてのプロミスが決定する (それぞれが履行されるか、拒否される) まで待ちます。
+- {{jsxref("Promise/@@species", "Promise[@@species]")}}
+  - : プロミスのメソッドから返値を構築するために使用するコンストラクターを返します。
 
-    これはすべての与えられたプロミスが履行または拒否された後で、それぞれのプロミスの結果を記述したオブジェクトの配列で解決される Promise を返します。
-
-- {{JSxRef("Promise.any()")}}
-  - : Promise オブジェクトの反復可能オブジェクトを取り、反復可能オブジェクトの中のプロミスのうちの一つが履行され次第、そのプロミスから受け取った値で履行される単一のプロミスを返します。
-- {{JSxRef("Promise.race()")}}
-
-  - : プロミスのうちの 1 つが履行または拒否されるまで待ちます。
-
-    返されたプロミスが履行された場合、反復可能オブジェクトの中で最初に履行されたプロミスの値によって履行されます。
-
-    拒否された場合、最初に拒否されたプロミスの理由によって拒否されます。
+## 静的メソッド
 
-- {{JSxRef("Promise.reject()")}}
+- {{jsxref("Promise.all()")}}
+  - : 入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力さ れたプロミスがすべて履行されたとき（空の反復可能オブジェクトが渡されたときを含める）に、履行された値の配列で履行されます。入力のプロミスのいずれかが拒否されると、この最初の拒否理由によって拒否されます。
+- {{jsxref("Promise.allSettled()")}}
+  - : 入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力のプロミスがすべて決定されたときに履行されます（空の反復可能オブジェクトが渡された場合を含む）。
+- {{jsxref("Promise.any()")}}
+  - : 入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返されたプロミスは、入力されたプロミスのいずれかが履行されたときに履行され、最初の履行値を返します。入力されたプロミスがすべて拒否された場合（空の反復可能オブジェクトが渡された場合も含む）、拒否された理由の配列を含む {{jsxref("AggregateError")}} を返します。
+- {{jsxref("Promise.race()")}}
+  - : 入力としてプロミスの反復可能オブジェクトを受け取り、単一の `Promise` を返します。この返すプロミスは、最初に決定したプロミスの最終的な状態で決定します。
+- {{jsxref("Promise.reject()")}}
   - : 与えられた理由で拒否された新しい `Promise` オブジェクトを返します。
-- {{JSxRef("Promise.resolve()")}}
-
-  - : 与えられた値で解決された新しい `Promise` オブジェクトを返します。もし値が Thenable （つまり `then` メソッドを持っているオブジェクト）ならば、返されるプロミスはその Thenable をたどり、その結果を採用します。そうでなければ、返されるプロミスは与えられた値で履行されます。
-
-    一般に、ある値がプロミスであるかどうかがわからない場合は、代わりに {{JSxRef("Promise.resolve", "Promise.resolve(value)")}} を使用し、返値をプロミスとして扱います。
+- {{jsxref("Promise.resolve()")}}
+  - : 与えられた値で解決された `Promise` オブジェクトを返します。もし値が Thenable （つまり `then` メソッドを持っているオブジェクト）ならば、返されるプロミスはその Thenable をたどり、その結果を採用します。そうでなければ、返されるプロミスは与えられた値で履行されます。
 
 ## インスタンスプロパティ
 
+これらのプロパティは `Promise.prototype` で定義されており、すべての `Promise` インスタンスで共有されます。
+
+- {{jsxref("Object/constructor", "Promise.prototype.constructor")}}
+  - : インスタンスオブジェクトを作成したコンストラクター関数。 `Promise` インスタンスの場合、初期値は {{jsxref("Promise/Promise", "Promise")}} コンストラクターです。
 - `Promise.prototype[@@toStringTag]`
   - : [`@@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列 `"Promise"` です。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。
 
 ## インスタンスメソッド
 
-マイクロタスクのキューやサービスを使用する方法については、[マイクロタスクのガイド](/ja/docs/Web/API/HTML_DOM_API/Microtask_guide)を参照してください。
-
 - {{jsxref("Promise.prototype.catch()")}}
   - : プロミスに拒否ハンドラーコールバックを追加し、コールバックが呼び出されたときの返値で解決する、または、プロミスが履行された場合は、元の履行結果で解決する
     新しいプロミスを返します。
-- {{jsxref("Promise.prototype.then()")}}
-  - : プロミスに履行ハンドラーと拒否ハンドラーを追加し、呼び出されたハンドラーの返値で解決する新しいプロミスを返します。プロミスが処理されなかった場合 (すなわち、関連するハンドラー `onFulfilled` または `onRejected` が関数ではない場合) は、元の解決値を返します。
 - {{jsxref("Promise.prototype.finally()")}}
   - : プロミスにハンドラーを追加し、元のプロミスが解決されたときに解決される新しいプロミスを返します。このハンドラーは、成功か失敗かに関わらず、元のプロミスが完了したときに呼び出されます。
+- {{jsxref("Promise.prototype.then()")}}
+  - : プロミスに履行ハンドラーと拒否ハンドラーを追加し、呼び出されたハンドラーの返値で解決する新しいプロミスを返します。プロミスが処理されなかった場合（すなわち、関連するハンドラー `onFulfilled` または `onRejected` が関数ではない場合）は、元の解決値を返します。
 
 ## 例
 
@@ -315,7 +303,7 @@ new Promise(tetheredGetNumber)
 
 以下の例は `Promise` の仕組みを示したものです。 `testPromise()` メソッドは {{HTMLElement("button")}} をクリックする度に呼び出されます。`testPromise()` メソッドは、 {{domxref("setTimeout()")}} を用いて、 1 秒から 3 秒のランダムな時間の後、メソッドがこれまでに呼ばれた回数で履行されるプロミスを作成します。 `Promise()` コンストラクターを使用してプロミスを生成します。
 
-プロミスが履行されたことは、 {{JSxRef("Promise.prototype.then()","p1.then()")}} で設定されたコールバックによって記録されます。この記録から、メソッドの同期処理部分が、プロミスによる非同期処理からどのように分離されているかがわかります。
+プロミスが履行されたことは、 {{jsxref("Promise/then", "p1.then()")}} で設定されたコールバックによって記録されます。この記録から、メソッドの同期処理部分が、プロミスによる非同期処理からどのように分離されているかがわかります。
 
 短時間に何度もボタンをクリックすると、さまざまなプロミスが次々と履行されていく様子を見ることもできます。
 
@@ -330,6 +318,7 @@ new Promise(tetheredGetNumber)
 
 ```js
 "use strict";
+
 let promiseCount = 0;
 
 function testPromise() {
@@ -393,8 +382,8 @@ btn.addEventListener("click", testPromise);
 <script>
   // ここも同様に領域です
   const bound = frames[0].postMessage.bind(frames[0], "some data", "*");
-  // bound は組み込み関数です -- スタック上にはユーザー
-  // コードがありません -- が、どの領域を使うのでしょうか？
+  // bound は組み込み関数です — スタック上にはユーザー
+  // コードがありません — が、どの領域を使うのでしょうか？
   setTimeout(bound);
   // これでも動作します。スタック上の最も若い（現行の）
   // 領域を使用するからです。
@@ -409,8 +398,8 @@ btn.addEventListener("click", testPromise);
 <script>
   // ここも同様に領域です
   const bound = frames[0].postMessage.bind(frames[0], "some data", "*");
-  // bound は組み込み関数です -- スタック上にはユーザー
-  // コードがありません -- が、どの領域を使うのでしょうか？
+  // bound は組み込み関数です — スタック上にはユーザー
+  // コードがありません — が、どの領域を使うのでしょうか？
   Promise.resolve(undefined).then(bound);
   // これでも動作します。スタック上の最も若い（現行の）
   // 領域を使用するからです。
@@ -460,7 +449,7 @@ btn.addEventListener("click", testPromise);
 ## 関連情報
 
 - [`Promise` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-promise)
-- [プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises)
+- [プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises)ガイド
 - [Promises/A+ specification](https://promisesaplus.com/)
-- [JavaScript Promises: an introduction](https://web.dev/promises/)
-- [Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript](https://www.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript)
+- [JavaScript Promises: an introduction](https://web.dev/promises/) (web.dev, 2013)
+- [Callbacks, Promises, and Coroutines: Asynchronous Programming Patterns in JavaScript](https://www.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript) Domenic Denicola によるスライドショー (2011)

From 1c4f466a8ec5cabc54eeb0daef6bdb09cada1c23 Mon Sep 17 00:00:00 2001
From: Tomoaki Sano <ryan5500@gmail.com>
Date: Sun, 1 Oct 2023 18:39:46 +0900
Subject: [PATCH 240/268] [ja] Update index.md - fix moon num of Jupiter
 (#15990)

* Update index.md

fix moon num of jupter

* Update files/ja/learn/html/tables/basics/index.md

---------

Co-authored-by: Masahiro FUJIMOTO <mfujimot@gmail.com>
---
 files/ja/learn/html/tables/basics/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/learn/html/tables/basics/index.md b/files/ja/learn/html/tables/basics/index.md
index a7aa1acdc0e917..7c2a00cdec6bea 100644
--- a/files/ja/learn/html/tables/basics/index.md
+++ b/files/ja/learn/html/tables/basics/index.md
@@ -27,7 +27,7 @@ slug: Learn/HTML/Tables/Basics
 
 ### テーブルはどのように動作するか
 
-テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62 個の衛星を持つ巨大ガス惑星である木星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。
+テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62 個の衛星を持つ木星型巨大ガス惑星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。
 
 <table>
   <caption>

From c3183c5628ff0bf24384b2607eb07e577e872906 Mon Sep 17 00:00:00 2001
From: n-ogawa <fy59.kou-729@live.jp>
Date: Sat, 30 Sep 2023 21:26:04 +0900
Subject: [PATCH 241/268] =?UTF-8?q?css/resolution=E3=81=8B=E3=82=89css/len?=
 =?UTF-8?q?gth#px=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E5=88=87?=
 =?UTF-8?q?=E3=82=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/resolution/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/css/resolution/index.md b/files/ja/web/css/resolution/index.md
index 1293f042169eed..ff1f3f60e88207 100644
--- a/files/ja/web/css/resolution/index.md
+++ b/files/ja/web/css/resolution/index.md
@@ -20,7 +20,7 @@ slug: Web/CSS/resolution
 - `dpcm`
   - : [センチメートルあたりのドット数](https://en.wikipedia.org/wiki/Dots_per_inch) を表します。1 インチは 2.54 cm なので、`1dpcm ≈ 2.54dpi` です。
 - `dppx`
-  - : ピクセル (`[px](/ja/docs/Web/CSS/length#px)`) あたりのドット数を表します。CSS の `in` と CSS の `px` の比率は 1:96 で固定なので、`1dppx` は `96dpi` と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。
+  - : ピクセル ([`px`](/ja/docs/Web/CSS/length#px)) あたりのドット数を表します。CSS の `in` と CSS の `px` の比率は 1:96 で固定なので、`1dppx` は `96dpi` と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。
 - `x`
   - : `dppx` の別名です。
 

From eba189694b148a0ea8dc27c3ea811c4f33d1d94f Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Sun, 1 Oct 2023 18:29:33 +0800
Subject: [PATCH 242/268] [zh-cn]: update data structures of javascript
 (#16271)

---
 .../web/javascript/data_structures/index.md   | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/files/zh-cn/web/javascript/data_structures/index.md b/files/zh-cn/web/javascript/data_structures/index.md
index 4a290a21edd6ed..31f6f657398259 100644
--- a/files/zh-cn/web/javascript/data_structures/index.md
+++ b/files/zh-cn/web/javascript/data_structures/index.md
@@ -1,17 +1,19 @@
 ---
 title: JavaScript 数据类型和数据结构
 slug: Web/JavaScript/Data_structures
+l10n:
+  sourceCommit: 29c3cbae33047f895b6988615519a6d0f0b31815
 ---
 
 {{jsSidebar("More")}}
 
-编程语言都具有内建的数据结构，但各种编程语言的数据结构常有不同之处。本文试图列出 JavaScript 语言中内建的数据结构及其属性，它们可以用来构建其他的数据结构。同时尽可能地描述与其他语言的不同之处。
+编程语言都具有内建的数据结构，但各种编程语言的数据结构常有不同之处。本文尝试列出 JavaScript 语言中内建的数据结构及其属性，它们可以用来构建其他的数据结构。
 
-[JavaScript 语言概述](/zh-CN/docs/Web/JavaScript/Language_overview)提供了对常见数据类型的类似总结，但是和其他的语言有着更多的比较。
+[JavaScript 语言概述](/zh-CN/docs/Web/JavaScript/Language_overview)提供了对常见数据类型的类似总结，但是更倾向于和其他语言进行比较。
 
 ## 动态和弱类型
 
-JavaScript 是一种有着[动态类型](https://zh.wikipedia.org/wiki/類型系統#靜態和動態檢查)的[动态](https://zh.wikipedia.org/wiki/动态语言)语言。JavaScript 中的变量与任何特定值类型没有任何关联，并且任何变量都可以分配（重新分配）所有类型的值：
+JavaScript 是一种有着[动态类型](https://zh.wikipedia.org/wiki/類型系統#靜態和動態檢查)的[动态](https://zh.wikipedia.org/wiki/动态语言)语言。JavaScript 中的变量与任何特定值类型没有任何关联，任何变量都可以被赋予（和重新赋予）各种类型的值：
 
 ```js
 let foo = 42; // foo 现在是一个数值
@@ -19,28 +21,28 @@ foo = "bar"; // foo 现在是一个字符串
 foo = true; // foo 现在是一个布尔值
 ```
 
-JavaScript 也是一个[弱类型](https://en.wikipedia.org/wiki/Strong_and_weak_typing)语言，这意味着当操作涉及不匹配的类型是否，它将允许隐式类型转换，而不是抛出一个错误。
+JavaScript 也是一个[弱类型](https://zh.wikipedia.org/wiki/强弱类型)语言，这意味着当操作涉及不匹配的类型时，它允许隐式类型转换，而不是抛出类型错误。
 
 ```js
-const foo = 42; // foo is a number
-const result = foo + "1"; // JavaScript coerces foo to a string, so it can be concatenated with the other operand
+const foo = 42; // foo 现在是一个数值
+const result = foo + "1"; // JavaScript 将 foo 强制转换为字符串，因此可以将其与另一个操作数连接起来
 console.log(result); // 421
 ```
 
-强制隐式转换是非常方便的，但是如果开发者不打算转换，或者打算向另一个方向转换（例如，字符串转数值而不是数值到字符串），则会存在潜在的隐患。对于 [symbol](#symbol-类型) 和 [BigInt](#bigint-类型)，JavaScript 总是不允许某些隐式类型转换。
+隐式强制转换是非常方便的，但当转换发生在预期之外的地方，或发生在预期的另一个方向（例如，字符串转换为数值，而不是数值转换为字符串）时，就会产生一些微妙的错误。对于 [symbol](#symbol_类型) 和 [BigInt](#bigint_类型)，JavaScript 有意禁止了某些隐式类型转换。
 
 ## 原始值
 
 除了 [Object](#object) 以外，所有类型都定义了表示在语言最低层面的[不可变](/zh-CN/docs/Glossary/Immutable)值。我们将这些值称为*原始值*。
 
-除了 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)，所有原始类型都可以使用 [`typeof`](/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) 运算符测试。`typeof null` 返回 `"object"`，因此必须使用 `=== null` 来测试 `null`。
+除了 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)，所有原始类型都可以使用 [`typeof`](/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) 运算符进行测试。`typeof null` 返回 `"object"`，因此必须使用 `=== null` 来测试 `null`。
 
-除了 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 和 [`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)，所有原始类型都有它们相应的对象包装类型，这为处理原始值提供可用的方法。例如，[`Number`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number) 对象提供向 [`toExponential()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential) 这样的方法。当在原始值上访问属性时，JavaScript 会自动将值包装到相应的包装对象中，并访问对象上的属性。然而，在 `null` 或 `undefined` 上访问属性时，会抛出 `TypeError` 异常，这需要采用[可选链](/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining)运算符。
+除了 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 和 [`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)，所有原始类型都有它们相应的对象包装类型，这为处理原始值提供可用的方法。例如，[`Number`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number) 对象提供像 [`toExponential()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential) 这样的方法。当在原始值上访问属性时，JavaScript 会自动将值包装到相应的包装对象中，并访问对象上的属性。然而，在 `null` 或 `undefined` 上访问属性时，会抛出 `TypeError` 异常，这需要采用[可选链](/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining)运算符。
 
 | 类型                         | `typeof` 返回值 | 对象包装器            |
 | ---------------------------- | --------------- | --------------------- |
-| [Null](#null_类型)           | `"object"`      | N/A                   |
-| [Undefined](#undefined_类型) | `"undefined"`   | N/A                   |
+| [Null](#null_类型)           | `"object"`      | 不适用                |
+| [Undefined](#undefined_类型) | `"undefined"`   | 不适用                |
 | [Boolean](#boolean_类型)     | `"boolean"`     | {{jsxref("Boolean")}} |
 | [Number](#number_类型)       | `"number"`      | {{jsxref("Number")}}  |
 | [BigInt](#bigint_类型)       | `"bigint"`      | {{jsxref("BigInt")}}  |
@@ -57,16 +59,16 @@ Null 类型只有一个值：[`null`](/zh-CN/docs/Web/JavaScript/Reference/Opera
 
 Undefined 类型只有一个值：[`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)。
 
-从概念上讲，`undefined` 表示没有任何*值*，`null` 表示没有任何*对象*（这也可以构成 [`typeof null === "object"` 的接口](/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof#typeof_null)）。当某些东西没有值时，该语言通常默认为 `undefined`：
+从概念上讲，`undefined` 表示*值*的缺失，`null` 表示*对象*的缺失（这也可以说明 [`typeof null === "object"`](/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof#typeof_null) 的原因）。当某些东西没有值时，该语言通常默认为 `undefined`：
 
 - 没有值（`return;`）的 [`return`](/zh-CN/docs/Web/JavaScript/Reference/Statements/return) 语句，隐式返回 `undefined`。
 - 访问不存在的[对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object)属性（`obj.iDontExist`），返回 `undefined`。
 - 变量声明时没有初始化（`let x;`），隐式初始化为 `undefined`。
-- 许多如 {{jsxref("Array.prototype.find()")}} 和 {{jsxref("Map.prototype.get()")}} 的方法，当没有发现元素时，返回 `undefined`。
+- 许多像 {{jsxref("Array.prototype.find()")}} 和 {{jsxref("Map.prototype.get()")}} 的方法，当没有找到元素时，返回 `undefined`。
 
-`null` 在核心语言中使用频率少得多。最重要的地方是[原型链的末端](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)——其次是与原型交互的方法，如 {{jsxref("Object.getPrototypeOf()")}}、{{jsxref("Object.create()")}} 等，接受或返回 `null` 而不是 `undefined`。
+`null` 在核心语言中使用频率少得多。最重要的地方是[原型链](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)的末端，其次是与原型交互的方法，如 {{jsxref("Object.getPrototypeOf()")}}、{{jsxref("Object.create()")}} 等，接受或返回 `null` 而不是 `undefined`。
 
-`null` 是一个[关键字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#关键字)，但是 `undefined` 是一个普通的[标识符](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers)，恰好是一个全局属性。在实践中，这两个差异很小，因为 `undefined` 不应该被重新定义或者遮蔽。
+`null` 是一个[关键字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#关键字)，但是 `undefined` 是一个普通的[标识符](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#标识符)，恰好是一个全局属性。在实践中，这两个差异很小，因为 `undefined` 不应该被重新定义或者遮蔽。
 
 ### Boolean 类型
 
@@ -78,7 +80,7 @@ Undefined 类型只有一个值：[`undefined`](/zh-CN/docs/Web/JavaScript/Refer
 
 {{jsxref("Number")}} 类型是一种[基于 IEEE 754 标准的双精度 64 位二进制格式的值](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_编码)。它能够存储 2<sup>-1074</sup>（{{jsxref("Number.MIN_VALUE")}}）和 2<sup>1024</sup>（{{jsxref("Number.MAX_VALUE")}}）之间的正浮点数，以及 -2<sup>-1074</sup> 和 -2<sup>1024</sup> 之间的负浮点数，但是它仅能安全地存储在 -(2<sup>53</sup> − 1)（{{jsxref("Number.MIN_SAFE_INTEGER")}}）到 2<sup>53</sup> − 1（{{jsxref("Number.MAX_SAFE_INTEGER")}}）范围内的整数。超出这个范围，JavaScript 将不能安全地表示整数；相反，它们将由双精度浮点近似表示。你可以使用 {{jsxref("Number.isSafeInteger()")}} 检查一个数是否在安全的整数范围内。
 
-±(2<sup>-1074</sup> 到 2<sup>1024</sup>) 范围之外的值会自动转换：
+±(2<sup>-1074</sup> ~ 2<sup>1024</sup>) 范围之外的值会自动转换：
 
 - 大于 {{jsxref("Number.MAX_VALUE")}} 的正值被转换为 `+Infinity`。
 - 小于 {{jsxref("Number.MIN_VALUE")}} 的正值被转换为 `+0`。
@@ -96,7 +98,7 @@ console.log(42 / -0); // -Infinity
 
 {{jsxref("NaN")}}（“**N**ot **a** **N**umber”）是一个特殊种类的数值，当算术运算的结果不表示数值时，通常会遇到它。它也是 JavaScript 中唯一不等于自身的值。
 
-虽然 number 在概念上是一个“数学的值”，并且总是隐式的编码为浮点类型，但是 JavaScript 提供了[位运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#Assignment_operators)。当应用位运算符时，number 首先转换为 32 位整数。
+虽然 number 在概念上是一个“数学的值”，并且总是隐式的编码为浮点类型，但是 JavaScript 提供了[位运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#位运算符)。当应用位运算符时，number 首先转换为 32 位整数。
 
 > **备注：** 尽管位运算符*可以*使用[位掩码](https://zh.wikipedia.org/wiki/掩码)来表示单个数值中的几个布尔值，但通常这不是一个好的做法。JavaScript 提供了表示一组布尔值的其他方法（如布尔数组，或将布尔值分配给命名属性的对象）。位掩码也往往会使代码更难读取、理解和维护。
 
@@ -108,24 +110,24 @@ console.log(42 / -0); // -Infinity
 
 BigInt 是通过将 `n` 附加到整数末尾或调用 [`BigInt()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt) 函数来创建的。
 
-此示例演示了增加 {{jsxref("Number.MAX_SAFE_INTEGER")}} 返回预期结果的位置：
+本例演示了递增 {{jsxref("Number.MAX_SAFE_INTEGER")}} 会返回预期结果：
 
 ```js
 // BigInt
 const x = BigInt(Number.MAX_SAFE_INTEGER); // 9007199254740991n
-x + 1n === x + 2n; // false because 9007199254740992n and 9007199254740993n are unequal
+x + 1n === x + 2n; // false，因为 9007199254740992n 和 9007199254740993n 不相等
 
 // Number
-Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true because both are 9007199254740992
+Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true，因为都等于 9007199254740992
 ```
 
-你可以使用大多数运算符为 BigInt 工作，包括 `+`、`*`、`-`、`**` 和 `%`——唯一被禁止的是 [`>>>`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift)。BigInt 并不是[严格等于](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality)有着相同数学值的 Number，但是它是[宽松的](/zh-CN/docs/Web/JavaScript/Reference/Operators/Equality)。
+你可以使用大多数运算符处理 BigInt，包括 `+`、`*`、`-`、`**` 和 `%`。——唯一被禁止的是 [`>>>`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift)。BigInt 并不是[严格等于](/zh-CN/docs/Web/JavaScript/Reference/Operators/Strict_equality)有着相同数学值的 Number，而是[宽松的](/zh-CN/docs/Web/JavaScript/Reference/Operators/Equality)相等。
 
-BigInt 值并不总是更精确的，也不总是比 number 精确，因为 BigInt 不能表示分数，但是可以表示更准确的大整数。这两种类型都包含各自的类型，并且它们不能相互替代。如果 BigInt 值在算术表达式中与正则数值混合，或者它们相互[隐式转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)，则抛出 {{jsxref("TypeError")}}。
+BigInt 值并不总是更精确的，也不总是比 number 精确，因为 BigInt 不能表示小数，但可以更精确地表示大整数。这两种类型都不能相互替代。如果 BigInt 值在算术表达式中与常规 number 值混合，或者它们相互[隐式转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)，则抛出 {{jsxref("TypeError")}}。
 
 ### String 类型
 
-{{jsxref("String")}} 类型表示文本数据并编码为 [UTF-16 代码单位](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_字符、unicode_码位和字素簇（grapheme_clusters）)的 16 位无符号整数值序列。字符串中的每个元素在字符串中占据一个位置。第一个元素的索引为 `0`，下一个是索引 `1`，依此类推。字符串的长度是它的元素的数量。字符串的[长度](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length)是其中的 UTF-16 代码单元的数量，这可能与 Unicode 字符的实际数量不符；更多细节参见 [`String`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_字符、unicode_码位和字素簇（grapheme_clusters）) 参考页面。
+{{jsxref("String")}} 类型表示文本数据并编码为 [UTF-16 码元](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_字符、unicode_码位和字素簇（grapheme_clusters）)的 16 位无符号整数值序列。字符串中的每个元素在字符串中占据一个位置。第一个元素的索引为 `0`，下一个是索引 `1`，依此类推。字符串的长度是它的元素的数量。字符串的[长度](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length)是其中的 UTF-16 代码单元的数量，这可能与 Unicode 字符的实际数量不符；更多细节参见 [`String`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_字符、unicode_码位和字素簇（grapheme_clusters）) 参考页面。
 
 JavaScript 字符串是不可变的。这意味着一旦字符串被创建，就不可能修改它。字符串方法基于当前字符串的内容创建一个新的字符串——例如：
 
@@ -136,9 +138,9 @@ JavaScript 字符串是不可变的。这意味着一旦字符串被创建，就
 
 使用字符串来表示复杂的数据可能很诱人。这样做会带来短期的好处：
 
-- 容易通过字符串拼接来构造复杂的字串符。
+- 容易通过字符串拼接来构造复杂的字符串。
 - 字符串容易被调试（你看到的打印的内容始终是字符串）。
-- 字符串通常是许多 API 的常见标准（[input 字段](/zh-CN/docs/Web/API/HTMLInputElement)、[local storage](/zh-CN/docs/Web/API/Web_Storage_API) 中的值，以及 [`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest) 使用 `responseText` 等作为响应）而且这些 API 可能只能与字符串一同使用。
+- 字符串通常是许多 API 的常见标准（[input 字段](/zh-CN/docs/Web/API/HTMLInputElement)、[local storage](/zh-CN/docs/Web/API/Web_Storage_API) 中的值，以及 [`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest) 使用 `responseText` 等作为响应，等等）而且这些 API 可能只能与字符串一同使用。
 
 使用约定，字符串一般可以用来表示任何数据结构。但这并不总是一个好主意。例如，使用一个分隔符，可以模拟一个列表（而 JavaScript 数组可能更适合）。不幸的是，当分隔符用于列表中的元素时，列表就会被破坏。这时可以选择转义字符，等等。所有这些都需要约定，并造成不必要的维护负担。
 
@@ -146,17 +148,17 @@ JavaScript 字符串是不可变的。这意味着一旦字符串被创建，就
 
 ### Symbol 类型
 
-{{jsxref("Symbol")}} 是**唯一**并且**不可变**的原始值并且可以用来作为对象属性的键（如下）。在某些程序语言当中，Symbol 也被称作“原子类型”（atom）。symbol 的目的是去创建一个唯一属性键，保证不会与其他代码中的键产生冲突。
+{{jsxref("Symbol")}} 是**唯一**并且**不可变**的原始值并且可以用来作为对象属性的键（如下）。在某些程序语言当中，Symbol 也被称作“原子（atom）类型”。symbol 的目的是去创建一个唯一属性键，保证不会与其他代码中的键产生冲突。
 
 ## Object
 
-在计算机科学中，对象（object）是指内存中的可以被[标识符](/zh-CN/docs/Glossary/Identifier)引用的一块区域。在 JavaScript 中，对象是唯一[可变](/zh-CN/docs/Glossary/Mutable)的值。事实上，[函数](/zh-CN/docs/Web/JavaScript/Reference/Functions)也是具有额外可*调用*能力的对象
+在计算机科学中，对象（object）是指内存中的可以被[标识符](/zh-CN/docs/Glossary/Identifier)引用的一块区域。在 JavaScript 中，对象是唯一[可变](/zh-CN/docs/Glossary/Mutable)的值。事实上，[函数](/zh-CN/docs/Web/JavaScript/Reference/Functions)也是具有额外可*调用*能力的对象。
 
 ### 属性
 
 在 JavaScript 中，对象可以被看作是一组属性的集合。用[对象字面量语法](/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#对象字面量_object_literals)来定义一个对象时，会自动初始化一组有限的属性；然后，这些属性还可以被添加和移除。对象属性等价于键值对。属性键要么是[字符串](#string-类型)类型，要么是 [symbol](#symbol-类型)。属性值可以是任何类型的值，包括其他对象，从而可以构建复杂的数据结构。
 
-有两种对象属性的类型：[*数据*属性](#数据属性)和[*访问器*属性](#访问器属性)。每个属性都有对应的*特性*（attribute）。JavaScript 引擎在内部内置了访问性，但是你可以通过 {{jsxref("Object.defineProperty()")}} 设置它们，或者通过 {{jsxref("Object.getOwnPropertyDescriptor()")}} 读取它们。你可以在 {{jsxref("Object.defineProperty()")}} 页面上读取更多有关信息。
+有两种对象属性的类型：[*数据*属性](#数据属性)和[*访问器*属性](#访问器属性)。每个属性都有对应的*特性*（attribute）。JavaScript 引擎可在内部访问每个属性，但是你可以通过 {{jsxref("Object.defineProperty()")}} 设置它们，或通过 {{jsxref("Object.getOwnPropertyDescriptor()")}} 读取它们。你可以在 {{jsxref("Object.defineProperty()")}} 页面阅读更多有关各种细微差别的信息。
 
 #### 数据属性
 
@@ -173,7 +175,7 @@ JavaScript 字符串是不可变的。这意味着一旦字符串被创建，就
 
 #### 访问器属性
 
-将键与两个访问器函数（`get` 和 `set`）像关联，以获取或者存储值。
+将键与两个访问器函数（`get` 和 `set`）相关联，以获取或者存储值。
 
 > **备注：** 重要的是，意识到它是访问器*属性*——而不是访问器*方法*。我们可以将函数作为值来提供给 JavaScript 对象的访问器，使得对象表现得像一个类——但这并不能使该对象成为类。
 
@@ -190,7 +192,7 @@ JavaScript 字符串是不可变的。这意味着一旦字符串被创建，就
 
 对象的[原型（prototype）](/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)指向另一个对象或者 `null`——从概念上讲，它是对象的隐藏属性，通常表示为 `[[Prototype]]`。对象的 `[[Prototype]]` 属性也可以在对象自身访问。
 
-对象是临时的键值对，因此它们通常当作映射使用。然而，这可能涉及人类工程学、安全以及性能的问题。然而，可以使用 {{jsxref("Map")}} 来存储任意的数据。[`Map` 引用](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#objects_vs._maps)更详细地讨论了使用普通对象和使用 map 存储键值之间的利弊。
+对象是临时的键值对，因此经常被用作映射。不过，这可能存在人体工程学、安全性和性能方面的问题。请使用 {{jsxref("Map")}} 来存储任意数据。[`Map` 参考页面](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#object_和_map_的比较)更详细地讨论了使用普通对象和使用 map 存储键值之间的利弊。
 
 ### Date
 
@@ -198,21 +200,21 @@ JavaScript 字符串是不可变的。这意味着一旦字符串被创建，就
 
 ### 索引类集合：数组和类型化数组
 
-[数组](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)是一种以整数为键（integer-keyed）的属性并与长度（length）属性关联的常规对象。
+[数组](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)是一种以整数为键（integer-keyed）的属性并与长度（`length`）属性关联的常规对象。
 
-此外，数组对象还继承了 `Array.prototype` 的一些操作数组的便捷方法。例如，[`indexOf()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)（搜索数组中的一个值）或 [`push()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push)（向数组中添加一个元素），等等。这使得数组是表示列表或集合的最优选择。
+此外，数组对象还继承了 `Array.prototype` 的一些操作数组的便捷方法。例如，[`indexOf()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)（搜索数组中的一个值）或 [`push()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push)（向数组中添加一个元素），等等。这使得数组成为表示有序列表的理想选择。
 
-[类型化数组](/zh-CN/docs/Web/JavaScript/Typed_arrays)表示底层二进制缓冲区的类数组视图，并且提供了与数组相对应的类似语义的方法。“类型化数组”是一系列数据结构的总话术语，包括 `Int8Array`、`Float32Array` 等等。获取更多细节，请查看[类型化数组](/zh-CN/docs/Web/JavaScript/Typed_arrays)页。类型化数组通常与 {{jsxref("ArrayBuffer")}} 和 {{jsxref("DataView")}} 一起使用。
+[类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)表示底层二进制缓冲区的类数组视图，并且提供了与数组相对应的类似语义的方法。“类型化数组”是一系列数据结构的总话术语，包括 `Int8Array`、`Float32Array` 等等。获取更多细节，请查看[类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)页。类型化数组通常与 {{jsxref("ArrayBuffer")}} 和 {{jsxref("DataView")}} 一起使用。
 
 ### 带键的集合：Map、Set、WeakMap、WeakSet
 
 这些数据结构把对象的引用当作键。{{jsxref("Set")}} 和 {{jsxref("WeakSet")}} 表示唯一值的集合，而 {{jsxref("Map")}} 和 {{jsxref("WeakMap")}} 表示键值相关联的集合。
 
-你也可以自己实现 `Map` 和 `Set`。然而，因为对象不能被比较（例如，在 `<`“小于”的意义上），另一方面，引擎也没有暴露出它的哈希函数，因此查找性能必定是线性的。它们的原始实现（包括 `WeakMap`）的查找性能大致为对数到相对恒定的时间。
+你也可以自己实现 `Map` 和 `Set`。然而，因为对象不能被比较（例如，在 `<`“小于”的意义上），另一方面，引擎也没有暴露出它的哈希函数，因此查找性能必定是线性的。它们的原生实现（包括 `WeakMap`）可以达到近似对数到常数时间的查找性能。
 
-通常，可以通过直接在对象上设置属性或使用 `data-*` 属性，将绑定数据到 DOM 节点。然而缺陷是在任何的脚本内，数据都运行在同样的上下文中。`Map` 和 `WeakMap` 能够方便地将数据*私密*地绑定到一个对象。
+通常，要将数据绑定到 DOM 节点，可以直接在对象上设置属性，或使用 `data-*` 属性。这样做的缺点是，在同一上下文中运行的任何脚本都可以使用这些数据。而 `Map` 和 `WeakMap` 则可以轻松地将数据*隐蔽地*绑定到对象上。
 
-`WeakMap` 和 `WeakSet` 仅允许对象键，即使这些键留在集合中，也允许这些键被垃圾回收。它们专门用于[内存使用优化](/zh-CN/docs/Web/JavaScript/Memory_management#data_structures_aiding_memory_management)。
+`WeakMap` 和 `WeakSet` 只允许将可垃圾回收的值作为键，这些键要么是对象，要么是[未注册的 symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol#全局共享的_symbol)，即使键仍在集合中，也可能被收集。它们专门用于[优化内存使用](/zh-CN/docs/Web/JavaScript/Memory_management#data_structures_aiding_memory_management)。
 
 ### 结构化数据：JSON
 
@@ -220,21 +222,21 @@ JSON（**J**ava**S**cript **O**bject **N**otation）是一种轻量级的数据
 
 ### 标准库中的更多对象
 
-JavaScript 有一个内置对象的标准库。发现更多关于内置对象，请阅读[参考](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects)。
+JavaScript 有一个内置对象的标准库。请阅读[参考页面](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects)，了解有关内置对象的更多信息。
 
 ## 强制类型转换
 
-如上所述，JavaScript 是一个[弱类型](#动态和弱类型)语言。这意味着你经常可以使用与预期类型不同类型的值，并且该语言将为你转换它为正确的类型。为此，JavaScript 定义了少数强制规则。
+如上所述，JavaScript 是一个[弱类型](#动态和弱类型)语言。这意味着你经常可以使用与预期类型不同类型的值，并且该语言将为你转换它为正确的类型。为此，JavaScript 定义了少数强制转换规则。
 
-### 强制原始值转换
+### 原始值强制转换
 
-[强制原始值转换](https://tc39.es/ecma262/#sec-toprimitive)用于得到一个期望的原始值，但对实际类型应该是什么并没有强烈的偏好。通常情况下可以接受[字符串](#string_类型)、[数值](#number_类型)或 [BigInt](#bigint_类型)。例如：
+[原始值强制转换](https://tc39.es/ecma262/multipage/abstract-operations.html#sec-toprimitive)用于得到一个期望的原始值，但对实际类型应该是什么并没有强烈的偏好。通常情况下可以接受[字符串](#string_类型)、[数值](#number_类型)或 [BigInt](#bigint_类型)。例如：
 
 - [`Date()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) 构造函数，当它收到一个不是 `Date` 实例的参数时——字符串表示日期字符串，而数值表示时间戳。
 - [`+`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Addition) 运算符——如果运算对象是字符串，执行字符串串联；否则，执行数值相加。
 - [`==`](/zh-CN/docs/Web/JavaScript/Reference/Operators/Equality) 运算符——如果一个运算对象是原始值，而另一个运算对象是对象（object），则该对象将转换为没有首选类型的原始值。
 
-如果值已经是原始值，则此操作不会进行任何转换。对象按以下顺序调用它的 [`[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)（将 hint 作为 `default`）、`valueOf()` 和 `toString()` 方法，将其转换为原始值。注意，原始值转换会在 `toString()` 方法之前调用 `valueOf()` 方法，这与[强制数字类型转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)的行为相似，但与[强制字符串类型转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)不同。
+如果值已经是原始值，则此操作不会进行任何转换。对象将依次调用它的 [`[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)（将 `default` 作为 hint 值）、`valueOf()` 和 `toString()` 方法，将其转换为原始值。注意，原始值转换会在 `toString()` 方法之前调用 `valueOf()` 方法，这与[数字类型强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)的行为相似，但与[字符串类型强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)不同。
 
 `[@@toPrimitive]()` 方法，如果存在，则必须返回原始值——返回对象，会导致 {{jsxref("TypeError")}}。对于 `valueOf()` 和 `toString()`，如果其中一个返回对象，则忽略其返回值，从而使用另一个的返回值；如果两者都不存在，或者两者都没有返回一个原始值，则抛出 {{jsxref("TypeError")}}。例如，以下代码：
 
@@ -244,29 +246,27 @@ console.log({} + []); // "[object Object]"
 
 `{}` 和 `[]` 都没有 `[@@toPrimitive]()` 方法。`{}` 和 `[]` 都从 {{jsxref("Object.prototype.valueOf")}} 继承 `valueOf()`，其返回对象自身。因为返回值是一个对象，因此它被忽略。因此，调用 `toString()` 方法。[`{}.toString()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) 返回 `"[object Object]"`，而 [`[].toString()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) 返回 `""`，因此这个结果是它们的串联：`"[object Object]"`。
 
-在强制转换为任意的原始类型时，`[@@toPrimitive]()` 方法总是优先调用。原始值的强制转换的行为通常与强制 number 类型类似，因为优先调用 `valueOf()`；然而，有着自定义 `[@@toPrimitive]()` 方法的对象可以选择返回任意的原始值。{{jsxref("Date")}} 和 {{jsxref("Symbol")}} 对象是唯一重写 `[@@toPrimitive]()` 方法的对象。[`Date.prototype[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive) 将 `"default"` hint 视为 `"string"`，而 [`Symbol.prototype[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive) 忽略 hint 并始终返回一个 symbol。
+在强制转换为任意的原始类型时，`[@@toPrimitive]()` 方法总是优先调用。原始值的强制转换的行为通常与 number 类型的强制转换类似，因为优先调用了 `valueOf()`；然而，有着自定义 `[@@toPrimitive]()` 方法的对象可以选择返回任意的原始值。{{jsxref("Date")}} 和 {{jsxref("Symbol")}} 对象是唯一重写 `[@@toPrimitive]()` 方法的对象。[`Date.prototype[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive) 将 `"string"` 视为 `"default"` hint，而 [`Symbol.prototype[@@toPrimitive]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive) 忽略 hint 并始终返回一个 symbol。
 
-### 强制数字类型转换
+### 数字类型强制转换
 
-有两种数字类型：[number](#number_类型) 和 [BigInt](#bigint_类型)。有时候，该语言尤其希望是 number 或 BigInt（例如 {{jsxref("Array.prototype.slice()")}}，其中索引必须是一个数字）；其他时候，它可能容忍并且根据运算对象的类型不同执行不同的运算。有关不允许从其他类型隐式转换的严格强制转换过程，请参阅[强制 number 转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)和[强制 BigInt 转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt#bigint_coercion)。
+有两种数字类型：[number](#number_类型) 和 [BigInt](#bigint_类型)。有时候，该语言期望使用 number 或 BigInt（例如 {{jsxref("Array.prototype.slice()")}}，其中索引必须是一个数字）；其他时候，它可能容忍并且根据运算对象的类型不同执行不同的运算。有关不允许从其他类型隐式转换的严格强制转换过程，请参阅 [number 强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)和 [BigInt 强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt#bigint_强制转换)。
 
-强制数字类型转换与[强制 number 类型转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)几乎相同，只是 BigInt 会按原样返回，而不是引起 {{jsxref("TypeError")}}。强制数字类型转换用于所有算术运算，因为它们重载了 number 和 BigInt 类型。唯一例外的是[一元加](/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_plus)，它总是强制 number 类型转换。
+数字类型强制转换与 [number 类型强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)几乎相同，只是 BigInt 会按原样返回，而不是引起 {{jsxref("TypeError")}}。强制数字类型转换用于所有算术运算，因为它们重载了 number 和 BigInt 类型。唯一例外的是[一元加](/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_plus)，它总是实施 number 强制类型转换。
 
-### 强制其他类型转换
+### 其他类型强制转换
 
-所有的数据类型，除了 Null、Undefined 以及 Symbol，都有它们各自的强制过程。更多细节，请参见[强制字符串转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)、[强制布尔值转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean#boolean_coercion)以及[强制对象转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#object_coercion)。
+所有除了 null、undefined 以及 Symbol 的数据类型，都有它们各自的强制转换过程。更多细节，请参见[字符串强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)、[布尔值强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean#boolean_coercion)以及[对象强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#object_coercion)。
 
 你可能已经注意到，有三种不同的路径可以将对象转换为原始值：
 
-- [强制原始值转换](#强制原始值转换)：`[@@toPrimitive]("default")` → `valueOf()` → `toString()`
-- [强制数字类型转换](#强制数字类型转换)、[强制 number 类型转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)、[强制 BigInt 类型转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt#转化)：`[@@toPrimitive]("number")` → `valueOf()` → `toString()`
-- [强制字符串类型转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)：`[@@toPrimitive]("string")` → `toString()` → `valueOf()`
+- [原始值强制转换](#原始值强制转换)：`[@@toPrimitive]("default")` → `valueOf()` → `toString()`
+- [数字类型强制转换](#数字类型强制转换)、[number 类型强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number#number_强制转换)、[BigInt 类型强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt#转化)：`[@@toPrimitive]("number")` → `valueOf()` → `toString()`
+- [字符串类型强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)：`[@@toPrimitive]("string")` → `toString()` → `valueOf()`
 
 在所有情况下，`[@@toPrimitive]()` 如果存在，必须可调用并返回原始值，而如果它们不可调用或返回对象，`valueOf` 或 `toString` 将被忽略。在过程结束时，如果成功，结果保证是原始值。然后，由此产生的原始值会进一步强制类型转换，具体取决于上下文。
 
 ## 参见
 
-- [由 Oleksii Trekhleb 撰写的 JavaScript 数据类型和数据结构](https://github.com/trekhleb/javascript-algorithms)
-- [Nicholas Zakas 在 JavaScript 中收集了通用数据结构和通用算法。](https://github.com/humanwhocodes/computer-science-in-javascript)
-- [搜索在 JavaScript 中实现的 Tre(i)es](https://github.com/monmohan/dsjslib)
-- [ECMAScript 规范中的数据类型和值](https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values)
+- [JavaScript 数据类型和数据结构](https://github.com/trekhleb/javascript-algorithms)，由 Oleksii Trekhleb 撰写
+- [JavaScript 中的计算机科学](https://github.com/humanwhocodes/computer-science-in-javascript)，由 Nicholas C. Zakas 撰写

From d0a56dfca640f1d5450326d8485f297810e81d56 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 27 Sep 2023 23:12:29 +0900
Subject: [PATCH 243/268] =?UTF-8?q?2023/07/18=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/grid-auto-columns/index.md   | 19 ++++++++----
 .../ja/web/css/grid-template-columns/index.md | 29 ++++++++++---------
 files/ja/web/css/grid-template-rows/index.md  | 26 +++++++++--------
 files/ja/web/css/grid-template/index.md       | 13 +++++----
 files/ja/web/css/grid/index.md                |  7 +++--
 5 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/files/ja/web/css/grid-auto-columns/index.md b/files/ja/web/css/grid-auto-columns/index.md
index 7976424d0e2647..90a07ff80b9f16 100644
--- a/files/ja/web/css/grid-auto-columns/index.md
+++ b/files/ja/web/css/grid-auto-columns/index.md
@@ -1,6 +1,8 @@
 ---
 title: grid-auto-columns
 slug: Web/CSS/grid-auto-columns
+l10n:
+  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
 ---
 
 {{CSSRef}}
@@ -54,6 +56,7 @@ grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
 grid-auto-columns: inherit;
 grid-auto-columns: initial;
 grid-auto-columns: revert;
+grid-auto-columns: revert-layer;
 grid-auto-columns: unset;
 ```
 
@@ -73,15 +76,19 @@ grid-auto-columns: unset;
   - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
 - {{cssxref("min-content")}}
   - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
-- {{cssxref("minmax()", "minmax(min, max)")}}
+- {{cssxref("minmax", "minmax(min, max)")}}
   - : _min_ 以上、_max_ 以下の寸法の範囲を定義する関数記法です。 _max_ が _min_ より小さい場合は、 _max_ は無視され、 _min_ として扱われます。`<flex>` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。
-- {{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
+- {{cssxref("fit-content_function", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
   - : `min(max-content, max(auto, argument))` という式を表します。この式は、トラックの寸法が `auto` の最小値よりも大きい場合に _argument_ で固定されることを除いて、`auto` と同様 (すなわち `minmax(auto, max-content)`) に計算されます。
 - `auto`
 
-  - : 最大値であれば最小コンテンツと同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小サイズ（{{cssxref("min-width")}}/{{cssxref("min-height")}}で指定されたサイズ）を表します。
+  - : 最大値としては、そのトラック内のアイテムの最大の {{cssxref("max-content")}} のサイズを表します。
 
-    > **メモ:** トラックの寸法が `auto` の場合は、{{cssxref("align-content")}}と{{cssxref("justify-content")}}のプロパティによって引き伸ばすことができます。
+    最小値としては、そのトラック内のアイテムの最大の最小サイズ（アイテムの {{cssxref("min-width")}}/{{cssxref("min-height")}} で指定します）を表します。これは常にではありませんが、 {{cssxref("min-content")}} のサイズであることが多いです。
+
+    {{cssxref("minmax", "minmax()")}} 表記の外で使用した場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、 `minmax(min-content,max-content)` と同様の動作をします。
+
+    > **メモ:** トラックの寸法が `auto` の場合は、{{cssxref("align-content")}}と{{cssxref("justify-content")}}のプロパティによって引き伸ばすことができます。従って既定では、 `auto` サイズのトラックはグリッドコンテナーの残りの空間を占めます。
 
 ## 公式定義
 
@@ -136,5 +143,5 @@ grid-auto-columns: unset;
 ## 関連情報
 
 - 関連する CSS プロパティ: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}
-- グリッドレイアウトガイド: [CSS グリッドレイアウトでの自動配置 - 暗黙のグリッド内での行の大きさ](/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#暗黙のグリッド内での行の大きさ)
-- 動画チュートリアル: _[Introducing Grid auto-placement and order](http://gridbyexample.com/video/series-auto-placement-order/)_
+- グリッドレイアウトガイド: [CSS グリッドレイアウトでの自動配置 - 暗黙のグリッド内での行の大きさ](/ja/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout#暗黙のグリッド内での行の大きさ)
+- 動画チュートリアル: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_
diff --git a/files/ja/web/css/grid-template-columns/index.md b/files/ja/web/css/grid-template-columns/index.md
index 3d53ff77761d77..af72a4463c78c2 100644
--- a/files/ja/web/css/grid-template-columns/index.md
+++ b/files/ja/web/css/grid-template-columns/index.md
@@ -1,6 +1,8 @@
 ---
 title: grid-template-columns
 slug: Web/CSS/grid-template-columns
+l10n:
+  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
 ---
 
 {{CSSRef}}
@@ -42,6 +44,7 @@ grid-template-columns:
 grid-template-columns: inherit;
 grid-template-columns: initial;
 grid-template-columns: revert;
+grid-template-columns: revert-layer;
 grid-template-columns: unset;
 ```
 
@@ -63,28 +66,28 @@ grid-template-columns: unset;
     `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。
 
 - {{cssxref("max-content")}}
-  - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
+  - : グリッドトラックを占有しているグリッドアイテムの中で、[最大コンテンツ貢献度](https://www.w3.org/TR/css-sizing-3/#max-content)を表すキーワードです。例えば、グリッドトラックの最初の要素が _"Repetitio est mater studiorum"_ という文を保持しており、 2 つ目の要素が _"Dum spiro, spero"_ という文を保持している場合、最大コンテンツ貢献度は、グリッド要素内のすべての文の中で最大の文 _"Repetitio est mater studiorum"_ のサイズによって定義されます。
 - {{cssxref("min-content")}}
-  - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
-- {{cssxref("minmax()", "minmax(min, max)")}}
+  - : グリッドトラックを占有しているグリッドアイテムの中で、[最小コンテンツ貢献度](https://www.w3.org/TR/css-sizing-3/#min-content)を表すキーワードです。例えば、グリッドトラックの最初の要素が _"Repetitio est mater studiorum"_ という文を保持しており、 2 つ目の要素が _"Dum spiro, spero"_ という文を保持している場合、最小コンテンツ貢献度は、グリッド要素内のすべての文の中で最大の単語 _"studiorum"_ のサイズによって定義されます。
+- {{cssxref("minmax", "minmax(min, max)")}}
   - : _min_ 以上、 _max_ 以下の寸法の範囲を定義する関数表記法です。 _max_ が _min_ より小さい場合、 _max_ は無視され、関数は _min_ として扱われます。最大値として、 `<flex>` 値はトラックのフレックス係数を設定します。最小値としては無効です。
 - `auto`
 
   - : 最大値であれば max-content と同一のキーワードです。
 
-    最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。ふつうは {{cssxref("min-content")}} ですが、必ずそうとは限りません。
+    最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。ふつうは {{cssxref("min-content")}} ですが、必ずしもそうとは限りません。
 
-    {{cssxref("minmax()", "minmax()")}} 表記以外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、`minmax(min-content,max-content)` と同じように動作します。
+    {{cssxref("minmax", "minmax()")}} 表記以外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、 `minmax(min-content,max-content)` と同じように動作します。
 
-    > **メモ:** トラックの寸法が `auto` の場合 (そして `auto` の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。
+    > **メモ:** トラックの寸法が `auto` の場合（そして `auto` だけの場合）、 {{cssxref("align-content")}} および {{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。既定では、 `auto` のサイズのトラックがグリッドコンテナーの残りの空間を占めます。
 
-- `{{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}`
-  - : `min(max-content, max(auto, _argument_))` の式を表し、 `auto` と同様に (すなわち `minmax(auto, max-content)` と) 計算されますが、トラックの寸法が `auto` の最小値よりも大きい場合は _argument_ でクランプされるところが異なります。
-- {{cssxref("repeat()", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}
+- `{{cssxref("fit-content_function", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}`
+  - : `max(minimum, min(limit, max-content))` という式を表し、ここで _minimum_ は `auto` の最小値 （常に {{cssxref("min-content")}} の最小値に等しいわけではありませんが、そうなることが多い） を表し、 _limit_ は fit-content() に引数として渡されるトラックの大きさを計算する関数です。これは基本的に `minmax(auto, max-content)` と `minmax(auto, limit)` の小さい方として計算されます。
+- {{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}
   - : トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。
-- [`masonry`](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout){{Experimental_Inline}}
+- [`masonry`](/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout){{Experimental_Inline}}
   - : masonry の値は、この軸が組積アルゴリズムに従ってレイアウトされるべきであることを示します。
-- [subgrid](/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+- [subgrid](/ja/docs/Web/CSS/CSS_grid_layout/Subgrid)
   - : `subgrid` の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。
 
 > **警告:** `masonry`の値は、グリッド仕様のレベル 3 のもので、現在は Firefox のフラグに隠された実験的な実装があるだけです。
@@ -145,6 +148,6 @@ grid-template-columns: unset;
 ## 関連情報
 
 - 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}
-- [グリッドレイアウトガイド: グリッドレイアウトの基本概念 - グリッドトラック](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#グリッドトラック)
+- [グリッドレイアウトガイド: グリッドレイアウトの基本概念 - グリッドトラック](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#グリッドトラック)
 - 動画チュートリアル: [Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)
-- [サブグリッド](/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+- [サブグリッド](/ja/docs/Web/CSS/CSS_grid_layout/Subgrid)
diff --git a/files/ja/web/css/grid-template-rows/index.md b/files/ja/web/css/grid-template-rows/index.md
index 7dc847720a55d7..51ad8ecc4dbe6b 100644
--- a/files/ja/web/css/grid-template-rows/index.md
+++ b/files/ja/web/css/grid-template-rows/index.md
@@ -1,11 +1,13 @@
 ---
 title: grid-template-rows
 slug: Web/CSS/grid-template-rows
+l10n:
+  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
 ---
 
 {{CSSRef}}
 
-**`grid-template-rows`** は CSS のプロパティで、{{glossary("grid rows", "グリッド行")}}の線名とトラックのサイズ変更機能を定義します。
+**`grid-template-rows`** は CSS のプロパティで、{{glossary("grid_row", "グリッド行")}}の線名とトラックのサイズ変更機能を定義します。
 
 {{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
 
@@ -42,6 +44,7 @@ grid-template-rows:
 grid-template-rows: inherit;
 grid-template-rows: initial;
 grid-template-rows: revert;
+grid-template-rows: revert-layer;
 grid-template-rows: unset;
 ```
 
@@ -60,15 +63,14 @@ grid-template-rows: unset;
 - {{cssxref("&lt;length&gt;")}}
   - : 負の値ではない長さで、列の幅を指定します。
 - {{cssxref("&lt;percentage&gt;")}}
-  - : グリッドコンテナーのブロック方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "&lt;percentage&gt;")}} です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を `auto` として扱う必要があります。
-    トラックの内在的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。
+  - : グリッドコンテナーのブロック方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "&lt;percentage&gt;")}} です。グリッドコンテナーのサイズがそのトラックのサイズに依存している場合、グリッドコンテナーの内在サイズを計算するために、パーセント値は `auto` として扱われなければなりません。トラックの内在的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。
 - {{cssxref("&lt;flex_value&gt;","&lt;flex&gt;")}}
   - : `fr` の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。
 - {{cssxref("max-content")}}
   - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
 - {{cssxref("min-content")}}
   - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
-- {{cssxref("minmax()", "minmax(min, max)")}}
+- {{cssxref("minmax", "minmax(min, max)")}}
   - : _min_ 以上、 _max_ 以下の寸法の範囲を定義する関数表記法です。 _max_ が _min_ より小さい場合、 _max_ は無視され、関数は _min_ として扱われます。最大値として、 `<flex>` 値はトラックのフレックス係数を設定します。最小値としては無効です。
 - `auto`
 
@@ -76,17 +78,17 @@ grid-template-rows: unset;
 
     最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。ふつうは {{cssxref("min-content")}} ですが、必ずそうとは限りません。
 
-    {{cssxref("minmax()", "minmax()")}} 表記以外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、`minmax(min-content,max-content)` と同じように動作します。
+    {{cssxref("minmax", "minmax()")}} の外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、`minmax(min-content,max-content)` と同じように動作します。
 
     > **メモ:** トラックの寸法が `auto` の場合 (そして `auto` の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。
 
-- `{{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}`
-  - : `min(max-content, max(auto, _argument_))` の式を表し、 `auto` と同様に (すなわち `minmax(auto, max-content)` と) 計算されますが、トラックの寸法が `auto` の最小値よりも大きい場合は _argument_ でクランプされるところが異なります。
-- {{cssxref("repeat()", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}
+- {{cssxref("fit-content_function", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
+  - : `min(max-content, max(auto, argument))` の式を表し、 `auto` と同様に（すなわち `minmax(auto, max-content)` と）計算されますが、トラックの寸法が `auto` の最小値よりも大きい場合は _argument_ でクランプされるところが異なります。
+- {{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}
   - : トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の行をよりコンパクトな形式で記述できるようにします。
-- [`masonry`](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout){{Experimental_Inline}}
+- [`masonry`](/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout) {{Experimental_Inline}}
   - : masonry の値は、この軸が組積アルゴリズムに従ってレイアウトされるべきであることを示します。
-- [subgrid](/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+- [subgrid](/ja/docs/Web/CSS/CSS_grid_layout/Subgrid)
   - : `subgrid` の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。
 
 > **警告:** `masonry`の値は、グリッド仕様のレベル 3 のもので、現在は Firefox のフラグに隠された実験的な実装があるだけです。
@@ -147,6 +149,6 @@ grid-template-rows: unset;
 ## 関連情報
 
 - 関連する CSS プロパティ: {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}
-- [グリッドレイアウトガイド: グリッドレイアウトの基本概念 - グリッドトラック](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#グリッドトラック)
+- [グリッドレイアウトガイド: グリッドレイアウトの基本概念 - グリッドトラック](/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#グリッドトラック)
 - 動画チュートリアル: [Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)
-- [サブグリッド](/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+- [サブグリッド](/ja/docs/Web/CSS/CSS_grid_layout/Subgrid)
diff --git a/files/ja/web/css/grid-template/index.md b/files/ja/web/css/grid-template/index.md
index bfdfc14eda4b25..218f5a1a64c5c6 100644
--- a/files/ja/web/css/grid-template/index.md
+++ b/files/ja/web/css/grid-template/index.md
@@ -1,11 +1,13 @@
 ---
 title: grid-template
 slug: Web/CSS/grid-template
+l10n:
+  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
 ---
 
 {{CSSRef}}
 
-**`grid-template`** は CSS のプロパティで、[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティとして {{glossary("grid column", "grid columns")}}、{{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義します。
+**`grid-template`** は CSS のプロパティで、[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティとして {{glossary("grid column", "グリッド列")}}、{{glossary("grid_row", "グリッド行")}}、{{glossary("grid areas", "グリッド領域")}} を定義します。
 
 {{EmbedInteractiveExample("pages/css/grid-template.html")}}
 
@@ -45,6 +47,7 @@ grid-template:
 grid-template: inherit;
 grid-template: initial;
 grid-template: revert;
+grid-template: revert-layer;
 grid-template: unset;
 ```
 
@@ -58,9 +61,9 @@ grid-template: unset;
 
   - : {{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には `auto` が設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は `none` が設定されます)。
 
-    > **メモ:** これらのトラックリストに {{cssxref("repeat()")}} 関数を使うことはできません。トラックは "ASCII アート" 内の行列と一対一の関係で視覚的に並んでいるためです。
+    > **メモ:** これらのトラックリストに {{cssxref("repeat", "repeat()")}} 関数を使うことはできません。トラックは「ASCII アート」内の行列と一対一の関係で視覚的に並んでいるためです。
 
-> **メモ:** {{cssxref("grid")}} 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(`grid-template` ではなく) `grid` を使用してください。
+> **メモ:** {{cssxref("grid")}} 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、（`grid-template` ではなく） `grid` を使用してください。
 
 ## 公式定義
 
@@ -135,6 +138,6 @@ footer {
 ## 関連情報
 
 - 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}
-- グリッドレイアウトガイド: [CSS グリッドにおける線に基づく配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定)
+- グリッドレイアウトガイド: [CSS グリッドにおける線に基づく配置](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#グリッド定義の一括指定)
 - 動画チュートリアル: _[Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/)_
diff --git a/files/ja/web/css/grid/index.md b/files/ja/web/css/grid/index.md
index 20168177f9d92d..5730db55e65978 100644
--- a/files/ja/web/css/grid/index.md
+++ b/files/ja/web/css/grid/index.md
@@ -1,6 +1,8 @@
 ---
 title: grid
 slug: Web/CSS/grid
+l10n:
+  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
 ---
 
 {{CSSRef}}
@@ -54,6 +56,7 @@ grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
 grid: inherit;
 grid: initial;
 grid: revert;
+grid: revert-layer;
 grid: unset;
 ```
 
@@ -130,5 +133,5 @@ grid: unset;
 ## 関連情報
 
 - 関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}
-- グリッドレイアウトガイド: [CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定)
+- グリッドレイアウトガイド: [CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)
+- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#グリッド定義の一括指定)

From 0653c792983ddf54dec6338f7b1ea485f6e671f8 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Mon, 2 Oct 2023 08:17:03 +0800
Subject: [PATCH 244/268] chore(pt-br): remove {{HTMLAttrDef}} macro (#16000)

* chore(pt-br): remove {{HTMLAttrDef}} macro

* fix related broken urls (remove "attr-" prefix)

* fix note cards
---
 .../html/howto/use_data_attributes/index.md   |  2 +-
 .../other_embedding_technologies/index.md     | 10 +--
 .../aria/attributes/aria-label/index.md       |  2 +-
 files/pt-br/web/api/document/write/index.md   |  2 +-
 .../pt-br/web/css/_doublecolon_after/index.md |  2 +-
 files/pt-br/web/css/syntax/index.md           |  2 +-
 .../web/html/content_categories/index.md      |  8 +-
 files/pt-br/web/html/element/a/index.md       | 26 +++----
 files/pt-br/web/html/element/base/index.md    |  4 +-
 files/pt-br/web/html/element/bdo/index.md     |  2 +-
 .../web/html/element/blockquote/index.md      |  2 +-
 files/pt-br/web/html/element/body/index.md    | 56 ++++++-------
 files/pt-br/web/html/element/br/index.md      |  2 +-
 files/pt-br/web/html/element/button/index.md  | 24 +++---
 files/pt-br/web/html/element/caption/index.md |  2 +-
 files/pt-br/web/html/element/dd/index.md      |  2 +-
 files/pt-br/web/html/element/del/index.md     |  4 +-
 files/pt-br/web/html/element/dialog/index.md  |  2 +-
 files/pt-br/web/html/element/dir/index.md     |  2 +-
 files/pt-br/web/html/element/embed/index.md   |  8 +-
 .../pt-br/web/html/element/fieldset/index.md  |  6 +-
 files/pt-br/web/html/element/head/index.md    |  2 +-
 files/pt-br/web/html/element/hr/index.md      | 10 +--
 files/pt-br/web/html/element/html/index.md    |  4 +-
 files/pt-br/web/html/element/iframe/index.md  | 38 ++++-----
 files/pt-br/web/html/element/img/index.md     | 28 +++----
 .../web/html/element/input/checkbox/index.md  |  2 +-
 .../web/html/element/input/date/index.md      | 42 +++++-----
 files/pt-br/web/html/element/input/index.md   | 78 +++++++++----------
 .../web/html/element/input/password/index.md  |  2 +-
 files/pt-br/web/html/element/label/index.md   |  6 +-
 files/pt-br/web/html/element/li/index.md      |  4 +-
 files/pt-br/web/html/element/link/index.md    | 26 +++----
 files/pt-br/web/html/element/marquee/index.md | 28 +++----
 files/pt-br/web/html/element/meta/index.md    | 29 ++++---
 files/pt-br/web/html/element/ol/index.md      |  8 +-
 .../pt-br/web/html/element/optgroup/index.md  |  4 +-
 files/pt-br/web/html/element/option/index.md  |  8 +-
 files/pt-br/web/html/element/pre/index.md     |  6 +-
 files/pt-br/web/html/element/q/index.md       |  2 +-
 files/pt-br/web/html/element/script/index.md  | 20 ++---
 files/pt-br/web/html/element/select/index.md  | 14 ++--
 .../pt-br/web/html/element/textarea/index.md  |  4 +-
 files/pt-br/web/html/element/tfoot/index.md   | 10 +--
 files/pt-br/web/html/element/th/index.md      | 26 +++----
 files/pt-br/web/html/element/time/index.md    |  4 +-
 files/pt-br/web/html/element/track/index.md   | 10 +--
 .../pt-br/web/html/global_attributes/index.md |  4 +-
 files/pt-br/web/html/index.md                 |  2 +-
 .../web/http/headers/referrer-policy/index.md |  2 +-
 50 files changed, 299 insertions(+), 294 deletions(-)

diff --git a/files/pt-br/learn/html/howto/use_data_attributes/index.md b/files/pt-br/learn/html/howto/use_data_attributes/index.md
index fe1b67f3784885..284a483b732873 100644
--- a/files/pt-br/learn/html/howto/use_data_attributes/index.md
+++ b/files/pt-br/learn/html/howto/use_data_attributes/index.md
@@ -3,7 +3,7 @@ title: Utilizando data attributes
 slug: Learn/HTML/Howto/Use_data_attributes
 ---
 
-O [HTML5](/pt-BR/docs/Web/Guide/HTML/HTML5) foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. [Atributos data-\*](/pt-BR/docs/Web/HTML/Global_attributes#attr-dataset) nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como [classList](/pt-BR/docs/Web/API/Element.classList), atributos fora do padrão, propriedades extras no DOM ou o método depreciado [setUserData](/pt-BR/docs/Web/API/Node.setUserData).
+O [HTML5](/pt-BR/docs/Web/Guide/HTML/HTML5) foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. [Atributos data-\*](/pt-BR/docs/Web/HTML/Global_attributes#dataset) nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como [classList](/pt-BR/docs/Web/API/Element.classList), atributos fora do padrão, propriedades extras no DOM ou o método depreciado [setUserData](/pt-BR/docs/Web/API/Node.setUserData).
 
 ## Sintaxe HTML
 
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 000479c85b4a93..3bb600845e1d10 100644
--- a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -235,17 +235,17 @@ Existem algumas sérias [preocupações de segurança](/pt-BR/docs/Learn/HTML/Mu
 
 Este exemplo inclui os fundamentos básicos necessários para usar um `<iframe>`:
 
-- [`allowfullscreen`](/pt-BR/docs/Web/HTML/Element/iframe#attr-allowfullscreen)
+- [`allowfullscreen`](/pt-BR/docs/Web/HTML/Element/iframe#allowfullscreen)
   - : Se definido, ele `<iframe>`poderá ser colocado no modo de tela cheia usando a [API de tela cheia](/pt-BR/docs/Web/API/Fullscreen_API) (um pouco além do escopo deste artigo).
-- [`frameborder`](/pt-BR/docs/Web/HTML/Element/iframe#attr-frameborder)
+- [`frameborder`](/pt-BR/docs/Web/HTML/Element/iframe#frameborder)
   - : Se definido como 1, isso indica ao navegador para desenhar uma borda entre esse quadro e outros quadros, que é o comportamento padrão. 0 remove a borda. Usar isso não é mais recomendado, pois o mesmo efeito pode ser melhor alcançado usando em seu [CSS](/pt-BR/docs/Glossary/CSS) .[`border`](/pt-BR/docs/Web/CSS/border)`: none;`
-- [`src`](/pt-BR/docs/Web/HTML/Element/iframe#attr-src)
+- [`src`](/pt-BR/docs/Web/HTML/Element/iframe#src)
   - : Este atributo, como [`<video>`](/pt-BR/docs/Web/HTML/Element/video)/ [`<img>`](/pt-BR/docs/Web/HTML/Element/img), contém um caminho apontando para o URL do documento a ser incorporado.
-- [`width`](/pt-BR/docs/Web/HTML/Element/iframe#attr-width) e [`height`](/pt-BR/docs/Web/HTML/Element/iframe#attr-height)
+- [`width`](/pt-BR/docs/Web/HTML/Element/iframe#width) e [`height`](/pt-BR/docs/Web/HTML/Element/iframe#height)
   - : Esses atributos especificam a largura e a altura que você deseja que o iframe seja.
 - Conteúdo alternativo
   - : Da mesma forma que outros elementos semelhantes [`<video>`](/pt-BR/docs/Web/HTML/Element/video), você pode incluir conteúdo de fallback entre as `<iframe></iframe>`tags de abertura e fechamento que aparecerão se o navegador não suportar `<iframe>`. Nesse caso, incluímos um link para a página. É improvável que você encontre qualquer navegador que não suporte `<iframe>`s atualmente.
-- [`sandbox`](/pt-BR/docs/Web/HTML/Element/iframe#attr-sandbox)
+- [`sandbox`](/pt-BR/docs/Web/HTML/Element/iframe#sandbox)
   - : Esse atributo, que funciona em navegadores um pouco mais modernos que o restante dos `<iframe>`recursos (por exemplo, IE 10 e superior), requer configurações de segurança mais elevadas; falaremos mais sobre isso na próxima seção.
 
 > **Nota:** Para melhorar a velocidade, é uma boa ideia definir o `src`atributo do iframe com JavaScript após o carregamento do conteúdo principal. Isso torna sua página utilizável mais cedo e diminui o tempo de carregamento da página oficial (uma importante métrica de [SEO](/pt-BR/docs/Glossary/SEO) ).
diff --git a/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md b/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md
index 53174f07453b06..053d527682724c 100644
--- a/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md
+++ b/files/pt-br/web/accessibility/aria/attributes/aria-label/index.md
@@ -30,7 +30,7 @@ Nos casos em que um elemento interativo não tem um nome acessível, ou um nome
 
 A maior parte do conteúdo tem um nome acessível gerado a partir do conteúdo de texto de seu elemento de encapsulamento imediato. Nomes acessíveis também podem ser criados por certos atributos ou elementos associados.
 
-Por padrão, o nome acessível de um botão é o conteúdo entre as tags {{HTMLElement('button')}} de abertura e fechamento, o nome acessível de uma imagem é o conteúdo de seu [`alt`](/pt-BR/docs/Web /HTML/Element/img#attr-alt) e o nome acessível de uma entrada de formulário é o conteúdo do elemento {{HTMLElement('label')}} associado.
+Por padrão, o nome acessível de um botão é o conteúdo entre as tags {{HTMLElement('button')}} de abertura e fechamento, o nome acessível de uma imagem é o conteúdo de seu [`alt`](/pt-BR/docs/Web /HTML/Element/img#alt) e o nome acessível de uma entrada de formulário é o conteúdo do elemento {{HTMLElement('label')}} associado.
 
 Se nenhuma dessas opções estiver disponível, ou se o nome acessível padrão não for apropriado, use o atributo `aria-label` para definir o nome acessível de um elemento.
 
diff --git a/files/pt-br/web/api/document/write/index.md b/files/pt-br/web/api/document/write/index.md
index b30367194a175d..53e2f9caf625f4 100644
--- a/files/pt-br/web/api/document/write/index.md
+++ b/files/pt-br/web/api/document/write/index.md
@@ -58,7 +58,7 @@ Se chamar `document.write()` incorporada em uma tag HTML `<script>` embutida, en
 
 > **Nota:** `document.write` e {{domxref("document.writeln")}} [não funcionam em documentos XHTML](/pt-BR/docs/Archive/Web/Writing_JavaScript_for_HTML) (você receberá o erro "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] no console de erros). Isso acontece ao abrir um arquivo local com a extensão .xhtml ou em qualquer documento exibido com um MIME type `application/xhtml+xml` {{Glossary("MIME type")}}. Mais informações disponíveis em [W3C XHTML FAQ](https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite).
 
-> **Nota:** `document.write` em [deferred](/pt-BR/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous](/pt-BR/docs/Web/HTML/Element/script#attr-async) scripts será ignorado, e você receberá uma mensagem como "A call to `document.write()` from an asynchronously-loaded external script was ignored" no console de erros.
+> **Nota:** `document.write` em [deferred](/pt-BR/docs/Web/HTML/Element/script#defer) ou [asynchronous](/pt-BR/docs/Web/HTML/Element/script#async) scripts será ignorado, e você receberá uma mensagem como "A call to `document.write()` from an asynchronously-loaded external script was ignored" no console de erros.
 
 > **Nota:** Somente no Edge, chamando `document.write` mais de uma vez em {{HTMLElement("iframe")}} causa o erro "SCRIPT70: Permission denied".
 
diff --git a/files/pt-br/web/css/_doublecolon_after/index.md b/files/pt-br/web/css/_doublecolon_after/index.md
index 40ac1a8d4f0366..2ee6559ebbf0e3 100644
--- a/files/pt-br/web/css/_doublecolon_after/index.md
+++ b/files/pt-br/web/css/_doublecolon_after/index.md
@@ -78,7 +78,7 @@ Podemos estilizar textos ou imagens na propriedade {{cssxref("content")}} pratic
 
 ### Dicas
 
-O exemplo a seguir mostra o uso do `::after` [pseudo-elemento](/pt-BR/docs/Web/CSS/Pseudo-elementos) em conjunto com a expressão CSS [`attr()`](/pt-BR/docs/Web/CSS/attr) e um [atributo data personalizado](/pt-BR/docs/Web/HTML/Global_attributes#attr-dataset) `data-descr` para criar uma _dica_ em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em [página separada.](/files/4591/css-only_tooltips.html)
+O exemplo a seguir mostra o uso do `::after` [pseudo-elemento](/pt-BR/docs/Web/CSS/Pseudo-elementos) em conjunto com a expressão CSS [`attr()`](/pt-BR/docs/Web/CSS/attr) e um [atributo data personalizado](/pt-BR/docs/Web/HTML/Global_attributes#dataset) `data-descr` para criar uma _dica_ em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em [página separada.](/files/4591/css-only_tooltips.html)
 
 ```html
 <p>
diff --git a/files/pt-br/web/css/syntax/index.md b/files/pt-br/web/css/syntax/index.md
index a8a26b5fb5081a..8b8e067509477e 100644
--- a/files/pt-br/web/css/syntax/index.md
+++ b/files/pt-br/web/css/syntax/index.md
@@ -28,7 +28,7 @@ Esses blocos são chamados de **blocos de declaração** e as declarações dent
 
 ![css syntax - declarations block.png](/@api/deki/files/6166/=css_syntax_-_declarations_block.png)
 
-> **Nota:** O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML [`style`](/pt-BR/HTML/Global_attributes#attr-style).
+> **Nota:** O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML [`style`](/pt-BR/HTML/Global_attributes#style).
 
 ## Regras CSS
 
diff --git a/files/pt-br/web/html/content_categories/index.md b/files/pt-br/web/html/content_categories/index.md
index 2630de690ed15d..3421bb0dabc1b0 100644
--- a/files/pt-br/web/html/content_categories/index.md
+++ b/files/pt-br/web/html/content_categories/index.md
@@ -28,8 +28,8 @@ Elementos pertencentes a categoria de conteúdo de fluxo tipicamente contém tex
 Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:
 
 - {{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}}
-- {{HTMLElement("link")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#attr-itemprop)** estiver presente
-- {{HTMLElement("meta")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#attr-itemprop)** estiver presente
+- {{HTMLElement("link")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#itemprop)** estiver presente
+- {{HTMLElement("meta")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#itemprop)** estiver presente
 - {{HTMLElement("style")}}, se o atributo [`scoped`](/pt-BR/docs/Web/HTML/Element/style#scoped) estiver presente
 
 ### Conteúdo de seccionamento
@@ -60,9 +60,9 @@ Alguns outros elementos pertencem a essa categoria, mas somente se uma condiçã
 - {{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}}
 - {{HTMLElement("del")}}, se contém somente conteúdo fraseado
 - {{HTMLElement("ins")}}, se contém somente conteúdo fraseado
-- {{HTMLElement("link")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#attr-itemprop) estiver presente
+- {{HTMLElement("link")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#itemprop) estiver presente
 - {{HTMLElement("map")}}, se contém somente conteúdo fraseado
-- {{HTMLElement("meta")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#attr-itemprop) estiver presente
+- {{HTMLElement("meta")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#itemprop) estiver presente
 
 ### Conteúdo embutido
 
diff --git a/files/pt-br/web/html/element/a/index.md b/files/pt-br/web/html/element/a/index.md
index 0adf5e08a44501..e913e9c9d1f282 100644
--- a/files/pt-br/web/html/element/a/index.md
+++ b/files/pt-br/web/html/element/a/index.md
@@ -13,7 +13,7 @@ O **elemento** **`<a>`** em **HTML** (ou elemento âncora), com o atributo [`hre
 
 Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{HTMLAttrDef("download")}}
+- `download`
 
   - : Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor:
 
@@ -29,7 +29,7 @@ Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Glo
     >
     > - Se `Content-Disposition` tiver um diferente `filename` (nome do arquivo) que `download`, o cabeçalho tem prioridade. (Se `Content-Disposition: inline`, Firefox prioriza o cabeçalho enquanto o Chrome escolhe `download`.)
 
-- {{HTMLAttrDef("href")}}
+- `href`
 
   - : A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers:
 
@@ -39,15 +39,15 @@ Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Glo
     - Email addresses with(Endereço de email com) `mailto:` URLs
     - Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do [`registerProtocolHandler()`](/pt-BR/docs/Web/API/Navigator/registerProtocolHandler)
 
-- {{HTMLAttrDef("hreflang")}}
+- `hreflang`
   - : Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as [the global `lang` attribute](/pt-BR/docs/Web/HTML/Global_attributes/lang).
-- {{HTMLAttrDef("ping")}}
+- `ping`
   - : Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições {{HTTPMethod("POST")}} com o corpo `PING` para as URLs. Typically for tracking.
-- {{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}
+- `referrerpolicy`{{Experimental_Inline}}
   - : Quanto do [referrer](/pt-BR/docs/Web/HTTP/Headers/Referer) para ser enviado quando acessar o link. Acesse [`Referrer-Policy`](/pt-BR/docs/Web/HTTP/Headers/Referrer-Policy) para possíveis valores e seus efeitos.
-- {{HTMLAttrDef("rel")}}
+- `rel`
   - : The relationship of the linked URL as space-separated [link types](/pt-BR/docs/Web/HTML/Link_types).
-- {{HTMLAttrDef("target")}}
+- `target`
 
   - : Where to display the linked URL, as the name for a _browsing context_ (a tab, window, or `<iframe>`). The following keywords have special meanings for where to load the URL:
 
@@ -60,28 +60,28 @@ Os atributos do elemento incluem os [atributos globais](/pt-BR/docs/Web/HTML/Glo
 
     > **Warning:** **Note:** Linking to another page with `target="_blank"` will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using `rel="noreferrer noopener"`.
 
-- {{HTMLAttrDef("type")}}
+- `type`
   - : Hints at the linked URL's format with a {{Glossary("MIME type")}}. No built-in functionality.
 
 ### Obsolete attributes
 
-- {{HTMLAttrDef("charset")}}
+- `charset`
 
   - : Hinted at the {{Glossary("character encoding")}} of the linked URL.
 
     > **Note:** This attribute is obsolete and **should not be used by authors**. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.
 
-- {{HTMLAttrDef("coords")}}
+- `coords`
   - : Used with [the `shape` attribute](#shape). A comma-separated list of coordinates.
-- {{HTMLAttrDef("name")}}
+- `name`
 
   - : Was required to define a possible target location in a page. In HTML 4.01, `id` and `name` could both be used on `<a>`, as long as they had identical values.
 
     > **Note:** Use the global attribute [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) instead.
 
-- {{HTMLAttrDef("rev")}}
+- `rev`
   - : Specified a reverse link; the opposite of [the `rel` attribute](#rel). Deprecated for being very confusing.
-- {{HTMLAttrDef("shape")}}
+- `shape`
 
   - : The shape of the hyperlink's region in an image map.
 
diff --git a/files/pt-br/web/html/element/base/index.md b/files/pt-br/web/html/element/base/index.md
index 898b14895b2e6c..f33cf5be3057f2 100644
--- a/files/pt-br/web/html/element/base/index.md
+++ b/files/pt-br/web/html/element/base/index.md
@@ -19,9 +19,9 @@ O _elemento HTML Base_ (**\<base>**) especifica o endereço (URL) utilizada por
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("href")}}
+- `href`
   - : O URL de base para ser usado em todo o documento para endereços URL relativos.Se este atributo for especificado, este elemento deve vir antes de quaisquer outros elementos com atributos cujos valores são URLs.Endereços (URLs) absolutos e relativos são permitidos (mas ver seção nota abaixo).
-- {{htmlattrdef("target")}}
+- `target`
   - : Esse elemento é uma palavra-chave que indica o local padrão para exibir o resultado quando os hiperlinks causarem navegações, por elementos que não têm referência alvo explícita. Em HTML5, é um nome ou palavra-chave para um contexto de navegação. (por exemplo, guia, janela, ou frame incorporada). As seguintes formas têm significados específicos:
 - \_self: Coloca i resultado no mesmo quadro HTML4 ou contexto de navegação, caso HTML5, como o atual. Este valor é o padrão se o atributo não for especificado.
 - \_blank: Coloca o resultado em uma nova janela HTML4 ou janela no contexto de navegação HTML5.
diff --git a/files/pt-br/web/html/element/bdo/index.md b/files/pt-br/web/html/element/bdo/index.md
index 3eb7d7b44b746a..9178bd52290572 100644
--- a/files/pt-br/web/html/element/bdo/index.md
+++ b/files/pt-br/web/html/element/bdo/index.md
@@ -67,7 +67,7 @@ O **_elemento_ HTML `<bdo>` **(_bidirectional override_) é usado para substitui
 
 Os atributos desse elemento incluem os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("dir")}}
+- `dir`
 
   - : Direção de texto neste elemento. Os valores possíveis são:
 
diff --git a/files/pt-br/web/html/element/blockquote/index.md b/files/pt-br/web/html/element/blockquote/index.md
index 16871fdd99dcc0..98f7edfa853a73 100644
--- a/files/pt-br/web/html/element/blockquote/index.md
+++ b/files/pt-br/web/html/element/blockquote/index.md
@@ -18,7 +18,7 @@ O Elemento HTML \<blockquote> (ou Elemento HTML de citação de bloco) indica qu
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : Uma URL que designa um documento de origem ou mensagem para a informação citada. Este atributo destina-se a apontar para informações explicando o contexto ou a referência para a cotação.
 
 ## Notas
diff --git a/files/pt-br/web/html/element/body/index.md b/files/pt-br/web/html/element/body/index.md
index 393d7e1d0e4a46..eccdfe1a0d7e5e 100644
--- a/files/pt-br/web/html/element/body/index.md
+++ b/files/pt-br/web/html/element/body/index.md
@@ -77,61 +77,61 @@ O **elemento** `<body>` do **HTML** representa o conteúdo de um documento HTML.
 
 Estes elementos incluem os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("alink")}}
+- `alink`
   - : Cor do texto para hyperlinks quando selecionados. Esse método não está em conformidade, utilize a propriedade _{{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":active")}}_
-- {{htmlattrdef("background")}}
+- `background`
   - : URI de uma imagem para usar como um papel de parede. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("background")}}._
-- {{htmlattrdef("bgcolor")}}
+- `bgcolor`
   - : Cor de fundo do documento. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("background-color")}}._
-- {{htmlattrdef("bottommargin")}}
+- `bottommargin`
   - : The margin of the bottom of the body. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("margin-bottom")}}._
-- {{htmlattrdef("leftmargin")}}
+- `leftmargin`
   - : The margin of the left of the body. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("margin-left")}}._
-- {{htmlattrdef("link")}}
+- `link`
   - : Cor de textos de links não visitados. Esse método não está em conformidade, utilize o _{{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":link")}}_
-- {{htmlattrdef("onafterprint")}}
+- `onafterprint`
   - : Função para chamar depois que o usuário solicitou a impressão do documento.
-- {{htmlattrdef("onbeforeprint")}}
+- `onbeforeprint`
   - : Função para chamar quando o usuário solicita a impressão do documento.
-- {{htmlattrdef("onbeforeunload")}}
+- `onbeforeunload`
   - : Função para chamar quando o documento está prestes a ser descarregado.
-- {{htmlattrdef("onblur")}}
+- `onblur`
   - : Função para chamar quando o documento perde foco.
-- {{htmlattrdef("onerror")}}
+- `onerror`
   - : Função para chamar quando o documento falha ao carregar corretamente.
-- {{htmlattrdef("onfocus")}}
+- `onfocus`
   - : Função para chamar quando o documento recebe foco.
-- {{htmlattrdef("onhashchange")}}
+- `onhashchange`
   - : Function to call when the fragment identifier part (starting with the hash (`'#'`) character) of the document's current address has changed.
-- {{htmlattrdef("onlanguagechange")}} {{experimental_inline}}
+- `onlanguagechange` {{experimental_inline}}
   - : Function to call when the preferred languages changed.
-- {{htmlattrdef("onload")}}
+- `onload`
   - : Função para chamar quando o documento terminar de carregar
-- {{htmlattrdef("onmessage")}}
+- `onmessage`
   - : Função para chamar quando o documento receber uma mensagem.
-- {{htmlattrdef("onoffline")}}
+- `onoffline`
   - : Função para chamar quando a conexão com a internet falha.
-- {{htmlattrdef("ononline")}}
+- `ononline`
   - : Função para chamar quando a conexão com a internet é restaurada.
-- {{htmlattrdef("onpopstate")}}
+- `onpopstate`
   - : Function to call when the user has navigated session history.
-- {{htmlattrdef("onredo")}}
+- `onredo`
   - : Function to call when the user has moved forward in undo transaction history.
-- {{htmlattrdef("onresize")}}
+- `onresize`
   - : Function to call when the document has been resized.
-- {{htmlattrdef("onstorage")}}
+- `onstorage`
   - : Function to call when the storage area has changed.
-- {{htmlattrdef("onundo")}}
+- `onundo`
   - : Function to call when the user has moved backward in undo transaction history.
-- {{htmlattrdef("onunload")}}
+- `onunload`
   - : Function to call when the document is going away.
-- {{htmlattrdef("rightmargin")}}
+- `rightmargin`
   - : The margin of the right of the body. _This method is non-conforming, use CSS {{cssxref("margin-right")}} property on the element instead._
-- {{htmlattrdef("text")}}
+- `text`
   - : Foreground color of text. _This method is non-conforming, use CSS {{cssxref("color")}} property on the element instead._
-- {{htmlattrdef("topmargin")}}
+- `topmargin`
   - : The margin of the top of the body. _This method is non-conforming, use CSS {{cssxref("margin-top")}} property on the element instead._
-- {{htmlattrdef("vlink")}}
+- `vlink`
   - : Cor do texto para links já visitados. Esse método não está em conformidade, utilize a propriedade _CSS {{cssxref("color")}} em conjunto com a pseudo-classe {{cssxref(":visited")}}._
 
 ## Especificações
diff --git a/files/pt-br/web/html/element/br/index.md b/files/pt-br/web/html/element/br/index.md
index 94d0c44a0121eb..5290db6be0de32 100644
--- a/files/pt-br/web/html/element/br/index.md
+++ b/files/pt-br/web/html/element/br/index.md
@@ -61,7 +61,7 @@ Não use \<br> para aumentar o espaço entre as linhas de texto; para isso use a
 
 Este elemento inclue os [Atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("clear")}} {{Deprecated_Inline}}
+- `clear` {{Deprecated_Inline}}
 
   - : Indica onde começar a próxima linha depois da quebra.
 
diff --git a/files/pt-br/web/html/element/button/index.md b/files/pt-br/web/html/element/button/index.md
index d4caaa38d6666f..1870ba82fe25c0 100644
--- a/files/pt-br/web/html/element/button/index.md
+++ b/files/pt-br/web/html/element/button/index.md
@@ -19,21 +19,21 @@ O **Elemento HTML _`<button>`_** representa um botão clicável.
 
 Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("autofocus")}}
+- `autofocus`
   - : Esse atributo booleano permite-o especificar que o botão possuirá o foco de entrada assim que a página carrega, a menos que o usuário sobrecreva esse comportamento digitanto um controle diferente. Apenas um elemento de um documento associado a um formulário pode ter esse atributo específico.
-- {{htmlattrdef("autocomplete")}} {{non-standard_inline}}
+- `autocomplete` {{non-standard_inline}}
   - : O uso desse atributo em um {{HTMLElement("button")}} não está padronizado nem dentro das especificações do Firefox. Por padrão, diferente de outros navegadores, o [Firefox persiste com o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} nas páginas carregadas. Definir o valor desse atributo para `off` (ex: `autocomplete="off"`) desabilita esse recurso. Veja [Erro do Firefox 654072](https://bugzil.la/654072).
-- {{htmlattrdef("disabled")}}
+- `disabled`
 
   - : Esse atributo booleano indica que o usuário não poderá interagir com o botão. Se esse atributo não for especificado, o botão herdará a configuração do elemento que o contém, por exemplo {{HTMLElement("fieldset")}}, se não existir nenhum elemento com o atributo **disabled** definido, então o botão estará habilitado.
 
     Firefox irá, diferente de outros navegadores, por padrão, [persiste com o estado dinâmico desativado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("button")}} sob as páginas carregadas. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/button#autocomplete) para controlar esse recurso.
 
-- {{htmlattrdef("form")}}
+- `form`
   - : O elemento de formulário que o botão está associado (é o _formulário proprietário_). O valor do atributo deve ser o atributo **id** de um elemento {{HTMLElement("form")}} no mesmo documento. Se esse atributo não for especificado, o elemento `<button>` deve ser descendente de um elemento de formulário. Esse atributo permite que você coloque elementos `<button>` em qualquer lugar do documento, não apenas como descendente de seus elementos {{HTMLElement("form")}}.
-- {{htmlattrdef("formaction")}}
+- `formaction`
   - : A URI de um programa que processa a informação submetida pelo botão. Se especificado, ele sobrescreve o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) do formulário proprietário do botão.
-- {{htmlattrdef("formenctype")}}
+- `formenctype`
 
   - : Se o botão é um botão de envio, esse atributo especifica o tipo de conteúdo que é usado para enviar o formulário para o servidor; Possíveis valores são:
 
@@ -43,7 +43,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
     Se esse atributo fro especificado, ele sobrescreve o atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do formulário proprietário do botão.
 
-- {{htmlattrdef("formmethod")}}
+- `formmethod`
 
   - : Se o botão for um botão de envio, esse atributo especifica o método HTTP que o navegador usará para enviar o formulário. Possíveis valores são:
 
@@ -52,9 +52,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
     Se especificado, esse atributo sobrescreve o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) do formulário proprietário do botão.
 
-- {{htmlattrdef("formnovalidate")}}
+- `formnovalidate`
   - : Se o botão é um botão de envio, esse atributo Booleano especifica que o formulário não é para ser validado quando submetido. Se esse atributo for especificado, ele sobrescreve o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) do formulário proprietário do botão.
-- {{htmlattrdef("formtarget")}}
+- `formtarget`
 
   - : Se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Esse é um nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo, uma aba, janela ou quadro embutido). Se esse atributo é especificado, ele sobrescreve o atributo [`target`](/pt-BR/docs/Web/HTML/Element/form#target) do formulário proprietário do botão. As seguintes palavras-chaves possuem significados especiais:
 
@@ -63,9 +63,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
     - `_parent`: Carrega a resposta no contexto de navegação pai do atual. Se não há nenhum pai, essa opção passa a ser o mesmo que `_self`.
     - `_top`: Carrega a resposta para o contexto de navegação no nível superior (ou seja, o contexto de navegação é um ancestral do atual e não possui nenhum pai). Se não possui nenhum pai, essa opção passa a agir da mesma forma que `_self`.
 
-- {{htmlattrdef("name")}}
+- `name`
   - : O nome do botão que é enviado com os dados do formulário.
-- {{htmlattrdef("type")}}
+- `type`
 
   - : O tipo de botão. O possíveis valores são:
 
@@ -73,7 +73,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
     - `reset`: O botão restaura todos os controles para seus valores iniciais.
     - `button`: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.
 
-- {{htmlattrdef("value")}}
+- `value`
   - : O valor inicial do botão.
 
 ## Notas
diff --git a/files/pt-br/web/html/element/caption/index.md b/files/pt-br/web/html/element/caption/index.md
index a0a82d25897f74..6c96a92b7f2395 100644
--- a/files/pt-br/web/html/element/caption/index.md
+++ b/files/pt-br/web/html/element/caption/index.md
@@ -67,7 +67,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
 Os seguintes atributos são obsoletos e não devem ser usados. Estão documentados abaixo apenas como referência ao atualizar o código, e interesse histórico.
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
 
   - : Esse atributo [enumerado](/pt-BR/docs/Glossary/Enumerated) indica como a legenda deve ser alinhada em relação à tabela. Ele pode ter um dos seguintes valores:
 
diff --git a/files/pt-br/web/html/element/dd/index.md b/files/pt-br/web/html/element/dd/index.md
index bebdb0d2a129b5..d618855fd61d9f 100644
--- a/files/pt-br/web/html/element/dd/index.md
+++ b/files/pt-br/web/html/element/dd/index.md
@@ -66,7 +66,7 @@ O **elemento HTML \<dd>** fornece detalhes ou uma definição mais completa do t
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes) como seus.
 
-- {{htmlattrdef("nowrap")}} {{Non-standard_inline}}
+- `nowrap` {{Non-standard_inline}}
   - : Se o valor deste atributo for `yes`, o texto de definição não será envolvido. O valor padrão é `no`.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/del/index.md b/files/pt-br/web/html/element/del/index.md
index 985eebbc7124b3..5ecdc1909a84b4 100644
--- a/files/pt-br/web/html/element/del/index.md
+++ b/files/pt-br/web/html/element/del/index.md
@@ -17,9 +17,9 @@ O **elemento** **HTML `<del>`** (ou _Elemento_ _HTML_ _de Texto Excluído_) repr
 
 This element includes the [global attributes](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : A URI for a resource that explains the change (for example, meeting minutes).
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : This attribute indicates the time and date of the change and must be a [valid date with an optional time string](https://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time). If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.
 
 ## Examples
diff --git a/files/pt-br/web/html/element/dialog/index.md b/files/pt-br/web/html/element/dialog/index.md
index cc3f74326f44c7..30fb3987f2c0cf 100644
--- a/files/pt-br/web/html/element/dialog/index.md
+++ b/files/pt-br/web/html/element/dialog/index.md
@@ -55,7 +55,7 @@ O **elemento HTML `<dialog>`** representa uma caixa de diálogo ou outro compone
 
 Este elemento inclui os atributos globais. O atributo `tabindex` não deve ser utilizado no elemento `<dialog>`.
 
-- {{htmlattrdef("open")}}
+- `open`
   - : Indica que o Dialog está ativo e pronto para uso. Quando o atributo `open` não for definido, ele não deve ser mostrado ao usuário.
 
 ## Notas de uso
diff --git a/files/pt-br/web/html/element/dir/index.md b/files/pt-br/web/html/element/dir/index.md
index 2e55ef383581f3..a3ca3e1f196ac2 100644
--- a/files/pt-br/web/html/element/dir/index.md
+++ b/files/pt-br/web/html/element/dir/index.md
@@ -15,7 +15,7 @@ Este elemento implementa a interface {{domxref("HTMLDirectoryElement")}}.
 
 Como todos os outros elementos HTML, este elemento suporta os [global attributes](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("compact")}}
+- `compact`
 
   - : Este atributo booleano indica que a lista deve ser renderizada em um estilo compacto. A interpretação deste atributo depende do agente do usuário e não funciona em todos os navegadores.
 
diff --git a/files/pt-br/web/html/element/embed/index.md b/files/pt-br/web/html/element/embed/index.md
index e7aee9e549e502..cbdd4571ef7fc7 100644
--- a/files/pt-br/web/html/element/embed/index.md
+++ b/files/pt-br/web/html/element/embed/index.md
@@ -23,13 +23,13 @@ Lembre-se de que a maioria dos navegadores modernos descontinuou e removeu o sup
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("height")}}
+- `height`
   - : A altura apresentada do recurso, em [CSS pixels.](https://drafts.csswg.org/css-values/#px) Este deve ser um valor absoluto; porcentagens _não_ são permitidas.
-- {{htmlattrdef("src")}}
+- `src`
   - : A URL do recurso que está sendo incorporado.
-- {{htmlattrdef("type")}}
+- `type`
   - : O [tipo MIME](/pt-BR/docs/Glossary/MIME_type) a ser usado para a seleção do _plug-in_ de instanciação.
-- {{htmlattrdef("width")}}
+- `width`
   - : A largura apresentada do recurso, em CSS pixels. Este deve ser um valor absoluto; porcentagens _não_ são permitidas.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/fieldset/index.md b/files/pt-br/web/html/element/fieldset/index.md
index 0730f3aeab15f3..97374c0d77f79d 100644
--- a/files/pt-br/web/html/element/fieldset/index.md
+++ b/files/pt-br/web/html/element/fieldset/index.md
@@ -60,11 +60,11 @@ O **elemento HTML `<fieldset>`** é usado para agrupar elementos, assim como lab
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Se este atributo Booleano está definido, os controles de formulario que são seus descendentes, exceto os descendentes de seu primeiro elemento opcional {{HTMLElement("legend")}}, estarão desativados, i.e., não editável. Eles não receberão qualquer evento de navegação, como clique do mouse ou relacionado com focus. Frequentemente os navegadores mostram tais controles em cinza.
-- {{htmlattrdef("form")}}
+- `form`
   - : Este atributo tem o valor do atributo **id** do elemento {{HTMLElement("form")}} com que se relaciona. Seu valor padrão é o **id** do elemento {{HTMLElement("form")}} mais próximo.
-- {{htmlattrdef("name")}}
+- `name`
 
   - : O nome associado com o grupo.
 
diff --git a/files/pt-br/web/html/element/head/index.md b/files/pt-br/web/html/element/head/index.md
index 4e8665d9217fbe..981fe5081fdd27 100644
--- a/files/pt-br/web/html/element/head/index.md
+++ b/files/pt-br/web/html/element/head/index.md
@@ -62,7 +62,7 @@ O elemento **HTML `<head>` providencia informações gerais** (metadados) sobre
 
 Estes elementos incluem os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("profile")}}
+- `profile`
   - : A URIs de um ou mais perfis de metadados , separado por espaço em branco.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/hr/index.md b/files/pt-br/web/html/element/hr/index.md
index e7daaf5c531d53..5bd2e9f0b4d135 100644
--- a/files/pt-br/web/html/element/hr/index.md
+++ b/files/pt-br/web/html/element/hr/index.md
@@ -17,15 +17,15 @@ O **elemento HTML `<hr>`** representa uma quebra temática entre elementos de n
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("align")}} {{deprecated_inline}} {{Non-standard_Inline}}
+- `align` {{deprecated_inline}} {{Non-standard_Inline}}
   - : Define a regra de alinhamento na página. Se nenhum valor for especificado, o valor padrão é `left`.
-- {{htmlattrdef("color")}} {{Deprecated_Inline}} {{Non-standard_inline}}
+- `color` {{Deprecated_Inline}} {{Non-standard_inline}}
   - : Denife a regra da cor através do nome da cor ou um valor hexadecimal.
-- {{htmlattrdef("noshade")}} {{deprecated_inline}} {{Non-standard_Inline}}
+- `noshade` {{deprecated_inline}} {{Non-standard_Inline}}
   - : Deine a regra para não ter sombreamento.
-- {{htmlattrdef("size")}} {{deprecated_inline}} {{Non-standard_Inline}}
+- `size` {{deprecated_inline}} {{Non-standard_Inline}}
   - : Denife a altura, em pixels.
-- {{htmlattrdef("width")}} {{deprecated_inline}} {{Non-standard_Inline}}
+- `width` {{deprecated_inline}} {{Non-standard_Inline}}
   - : Define a regra de comprimento na página através de um valor em pixel ou porcentagem.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/html/index.md b/files/pt-br/web/html/element/html/index.md
index c9b76c31ea9c1a..623b8ab335ee7c 100644
--- a/files/pt-br/web/html/element/html/index.md
+++ b/files/pt-br/web/html/element/html/index.md
@@ -18,9 +18,9 @@ O elemento **HTML \<html> **(ou _HTML root element_) representa a raiz de um HTM
 
 Esse elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("manifest")}} {{deprecated_inline}} {{Non-standard_Inline}}
+- `manifest` {{deprecated_inline}} {{Non-standard_Inline}}
   - : Especifica a URI de um recurso manifest indicando os recursos que devem ser carregados na memória local. Veja [Recursos offline em Firefox](/pt-BR/docs/HTML/Using_the_application_cache) para detalhes.
-- {{htmlattrdef("version")}} {{deprecated_inline}}
+- `version` {{deprecated_inline}}
   - : Especifica a versão da definição de tipo de documento HTML que governa o documento atual. Esse atributo não é necessário, porque é redundante com a informação de versão na declaração de tipo de documento.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/iframe/index.md b/files/pt-br/web/html/element/iframe/index.md
index 047090a1449649..908b09c891b188 100644
--- a/files/pt-br/web/html/element/iframe/index.md
+++ b/files/pt-br/web/html/element/iframe/index.md
@@ -15,33 +15,33 @@ O **elemento** **HTML** **\<iframe>** (ou _elemento HTML_ _inline frame_) repres
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
   - : O alinhamento deste elemento em relação ao contexto.
-- {{htmlattrdef("allowfullscreen")}}
+- `allowfullscreen`
   - : Esse atributo pode ser definido como true se o quadro é permitido para ser colocado em modo de tela cheia, chamando seu método de {{domxref("element.mozRequestFullScreen()")}}. Se isto não estiver definido, o elemento não pode ser colocado em modo de tela cheia.
-- {{htmlattrdef("frameborder")}}
+- `frameborder`
   - : O valor 1 (o padrão) pede ao navegador para desenhar uma borda entre este quadro e todos os outros quadros. O valor 0 informa ao navegador para não traçar uma fronteira entre este quadro e outros quadros.
-- {{htmlattrdef("height")}}
+- `height`
   - : Indica a altura do quadro HTML 5 em pixels CSS, ou HTML 4 em pixels ou porcentagem.
-- {{htmlattrdef("longdesc")}}
+- `longdesc`
   - : Uma URI de uma longa descrição do quadro. Devido à má utilização generalizada, isto não é útil para navegadores não-visuais.
-- {{htmlattrdef("marginheight")}}
+- `marginheight`
   - : A quantidade de espaço em pixels entre o conteúdo do quadro e suas margens superior e inferior.
-- {{htmlattrdef("marginwidth")}}
+- `marginwidth`
   - : A quantidade de espaço em pixels entre o conteúdo dos quadros e suas margens direita e esquerda.
-- {{htmlattrdef("mozallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}
+- `mozallowfullscreen` {{non-standard_inline}} {{deprecated_inline}}
   - : Use **`allowfullscreen`** ao invés. Em Gecko 9.0 or later, this attribute can be set to `true` if the frame is allowed to be placed into full screen mode by calling its {{domxref("element.mozRequestFullScreen()")}} method. If this isn't set, the element can't be placed into full screen mode.
-- {{htmlattrdef("webkitallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}
+- `webkitallowfullscreen` {{non-standard_inline}} {{deprecated_inline}}
   - : Use **`allowfullscreen`** ao invés. No Chrome 17 ou mais novo (e talvez mais antigo), this attribute can be set to `true` if the frame is allowed to be placed into full screen mode by calling its {{domxref("element.webkitRequestFullScreen()")}} method. If this isn't set, the element can't be placed into full screen mode.
-- {{htmlattrdef("mozapp")}} {{non-standard_inline}}
+- `mozapp` {{non-standard_inline}}
   - : For frames hosting an [open web app](/pt-BR/docs/Apps), this specifies the URL of the [app manifest](/pt-BR/docs/Apps/Manifest). This ensures that the app is loaded with the right permissions. See [Using the Browser API](/pt-BR/docs/DOM/Using_the_Browser_API) for details. Available in Gecko 13.0 and later.
-- {{htmlattrdef("mozbrowser")}} {{non-standard_inline}}
+- `mozbrowser` {{non-standard_inline}}
   - : Indicates that the frame is to appear like a top-level browser window to the embedded content. This means that {{domxref("window.top")}}, {{domxref("window.parent")}}, {{domxref("window.frameElement")}}, etc. will _not_ reflect the frame hierarchy. This allows for a web browser UI to be implemented entirely with web technology, given the right permissions. See [Using the Browser API](/pt-BR/docs/DOM/Using_the_Browser_API) for details. Available in Gecko 13.0 and later.
-- {{htmlattrdef("name")}}
+- `name`
   - : A name for the embedded browsing context (or frame). This can be used as the value of the **`target`** attribute of an {{HTMLElement("a")}} or {{HTMLElement("form")}} element, or the formtarget attribute of an {{HTMLElement("input")}} or {{HTMLElement("button")}} element.
-- {{htmlattrdef("remote")}} {{non-standard_inline}}
+- `remote` {{non-standard_inline}}
   - : Carrega a página do _frame_ em um processo separado.
-- {{htmlattrdef("scrolling")}}
+- `scrolling`
 
   - : Enumerated attribute indicating when the browser should provide a scroll bar (or other scrolling device) for the frame:
 
@@ -49,7 +49,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
     - `yes`: Sempre mostrar uma barra de rolagem.
     - `no`: Nunca mostrar uma barra de rolagem.
 
-- {{htmlattrdef("sandbox")}}
+- `sandbox`
 
   - : If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are:
 
@@ -66,13 +66,13 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
     > - Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user's browser outside a sandboxed `iframe`. It is recommended that such content should be served from a _separate dedicated domain_, to limit the potential damage.
     > - The `sandbox` attribute is not supported in Internet Explorer 9 and earlier versions, or in Opera.
 
-- {{htmlattrdef("seamless")}}
+- `seamless`
   - : This **Boolean attribute** indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the `<iframe>` to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this). In XHTML, attribute minimization is forbidden, and the seamless attribute must be defined as `<iframe seamless="seamless">`.
-- {{htmlattrdef("src")}}
+- `src`
   - : The URL of the page to embed.
-- {{htmlattrdef("srcdoc")}}
+- `srcdoc`
   - : The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the `srcdoc` attribute, it will override the content specified in the `src` attribute (if present). If a browser does NOT support the `srcdoc` attribute, it will show the file specified in the `src` attribute instead (if present).
-- {{htmlattrdef("width")}}
+- `width`
   - : Indicates the width of the frame HTML 5 in CSS pixels, or HTML 4 in pixels or as a percentage.
 
 ## Scripting
diff --git a/files/pt-br/web/html/element/img/index.md b/files/pt-br/web/html/element/img/index.md
index 970e71363218c8..7a7085d9e5505a 100644
--- a/files/pt-br/web/html/element/img/index.md
+++ b/files/pt-br/web/html/element/img/index.md
@@ -29,17 +29,17 @@ O **elemento** **HTML `<img>` **(or _HTML Image Element_) representa a inserçã
 
 Este Elemeto inlcui o [atributo global](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("align")}} {{deprecated_inline}}
+- `align` {{deprecated_inline}}
   - : The alignment of the image with respect to its surrounding context. Use the {{cssxref('vertical-align')}} CSS property.
-- {{htmlattrdef("alt")}}
+- `alt`
 
   - : Este atributo define um texto alternativo que descreve a imagem. Os Usuários irão ver o texto se a URL da imagem estiver errado, a imagem não está em um dos [formatos suportados](#supported_image_formats) ou até a imagem ser baixada .
 
     > **Note:** **Usage note:** Omitting this attribute indicates that the image _is_ a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is _not_ a key part of the content; non-visual browsers may omit it from rendering.
 
-- {{htmlattrdef("border")}} {{deprecated_inline}}
+- `border` {{deprecated_inline}}
   - : The width of a border around the image.
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
 
   - : This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. [CORS-enabled images](/pt-BR/docs/CORS_Enabled_Image) can be reused in the {{HTMLElement("canvas")}} element without being _tainted_. The allowed values are:
 
@@ -50,23 +50,23 @@ Este Elemeto inlcui o [atributo global](/pt-BR/docs/Web/HTML/Global_attributes).
 
     When not present, the resource is fetched without a CORS request (i.e. without sending the `Origin:` HTTP header), preventing its non-tainted usage in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword **anonymous** was used. See [CORS settings attributes](/pt-BR/docs/HTML/CORS_settings_attributes) for additional information.
 
-- {{htmlattrdef("height")}}
+- `height`
   - : The height of the image in HTML 5 CSS pixels, or HTML 4 in pixels or as a percentage.
-- {{htmlattrdef("hspace")}} {{deprecated_inline}}
+- `hspace` {{deprecated_inline}}
   - : The number of pixels of white space to insert to the left and right of the image.
-- {{htmlattrdef("ismap")}}
+- `ismap`
 
   - : This Boolean attribute indicates that the image is part of a server-side map. If so, the precise coordinates of a click are sent to the server.
 
     > **Note:** **Usage note:** This attribute is allowed only if the `<img>` element is a descendant of an {{htmlelement("a")}} element with a valid [`href`](/pt-BR/docs/Web/HTML/Element/a#href) attribute.
 
-- {{htmlattrdef("longdesc")}} {{deprecated_inline}}
+- `longdesc` {{deprecated_inline}}
   - : A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id).
-- {{htmlattrdef("name")}} {{deprecated_inline}}
+- `name` {{deprecated_inline}}
   - : A name for the element. Use the [`id`](/pt-BR/docs/Web/HTML/Global_attributes#id) attribute instead.
-- {{htmlattrdef("src")}}
+- `src`
   - : Image URL, this attribute is obligatory for the `<img>` element. On browsers supporting **srcset**, **src** is ignored if this one is provided.
-- {{htmlattrdef("srcset")}}
+- `srcset`
 
   - : A list of one or more strings separated by commas indicating a set of possible images for the user agent to use. Each string is composed of:
 
@@ -77,15 +77,15 @@ Este Elemeto inlcui o [atributo global](/pt-BR/docs/Web/HTML/Global_attributes).
     Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor.
     The browser chooses the most adequate image to display at a given point of time.
 
-- {{htmlattrdef("width")}}
+- `width`
   - : The width of the image in pixels or percent.
-- {{htmlattrdef("usemap")}}
+- `usemap`
 
   - : The partial URL (starting with '#') of an [image map](/pt-BR/docs/HTML/Element/map) associated with the element.
 
     > **Note:** **Usage note:** You cannot use this attribute if the `<img>` element is a descendant of an {{htmlelement("a")}} or {{HTMLElement("button")}} element.
 
-- {{htmlattrdef("vspace")}} {{deprecated_inline}}
+- `vspace` {{deprecated_inline}}
   - : The number of pixels of white space to insert above and below the image.
 
 ## Formato de imagens suportadas
diff --git a/files/pt-br/web/html/element/input/checkbox/index.md b/files/pt-br/web/html/element/input/checkbox/index.md
index c26104d1ac3c60..3eda748240a497 100644
--- a/files/pt-br/web/html/element/input/checkbox/index.md
+++ b/files/pt-br/web/html/element/input/checkbox/index.md
@@ -193,7 +193,7 @@ Portanto, neste caso, o `indeterminate`estado é usado para afirmar que a coleta
 
 ## Validação
 
-As caixas de seleção suportam [validação](/pt-BR/docs/Web/Guide/HTML/HTML5/Constraint_validation) (oferecidas para todos os [`<input>`](/pt-BR/docs/Web/HTML/Element/input)s). No entanto, a maioria dos {{domxref ("ValidityState")}} s sempre será `false`. Se a caixa de seleção tiver o [`required`](/pt-BR/docs/Web/HTML/Element/input#attr-required) atributo, mas não estiver marcada, ela [`ValidityState.valueMissing`](/pt-BR/docs/Web/API/ValidityState/valueMissing) será `true`.
+As caixas de seleção suportam [validação](/pt-BR/docs/Web/Guide/HTML/HTML5/Constraint_validation) (oferecidas para todos os [`<input>`](/pt-BR/docs/Web/HTML/Element/input)s). No entanto, a maioria dos {{domxref ("ValidityState")}} s sempre será `false`. Se a caixa de seleção tiver o [`required`](/pt-BR/docs/Web/HTML/Element/input#required) atributo, mas não estiver marcada, ela [`ValidityState.valueMissing`](/pt-BR/docs/Web/API/ValidityState/valueMissing) será `true`.
 
 ## Exemplos
 
diff --git a/files/pt-br/web/html/element/input/date/index.md b/files/pt-br/web/html/element/input/date/index.md
index eecbb9aad09146..38f6eda30156e4 100644
--- a/files/pt-br/web/html/element/input/date/index.md
+++ b/files/pt-br/web/html/element/input/date/index.md
@@ -288,17 +288,17 @@ A melhor maneira de lidar com datas nos formulários de um modo entre navegadore
 
 Beside the attributes listed below, this element can have any of the [global attributes](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+- `mozactionhint` {{non-standard_inline}}
   - : Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are `go`, `done`, `next`, `search`, and `send`; these automatically get mapped to the appropriate string (and are case-insensitive).
-- {{htmlattrdef("autofocus")}}
+- `autofocus`
   - : This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the **autofocus** attribute, which is a Boolean. It cannot be applied if the **type** attribute is set to `hidden` (that is, you cannot automatically set focus to a hidden control).
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : This Boolean attribute indicates that the form control is not available for interaction. In particular, the `click` event [will not be dispatched](https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute) on disabled controls. Also, a disabled control's value isn't submitted with the form.
-- {{htmlattrdef("form")}}
+- `form`
   - : The form element that the input element is associated with (its _form owner_). The value of the attribute must be an **id** of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this `<input>` element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place `<input>` elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
-- {{htmlattrdef("formaction")}}
+- `formaction`
   - : The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the [`action`](/pt-BR/docs/Web/HTML/Element/form#action) attribute of the element's form owner.
-- {{htmlattrdef("formenctype")}}
+- `formenctype`
 
   - : If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
 
@@ -308,7 +308,7 @@ Beside the attributes listed below, this element can have any of the [global att
 
     If this attribute is specified, it overrides the [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) attribute of the element's form owner.
 
-- {{htmlattrdef("formmethod")}}
+- `formmethod`
 
   - : If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
 
@@ -317,9 +317,9 @@ Beside the attributes listed below, this element can have any of the [global att
 
     If specified, this attribute overrides the [`method`](/pt-BR/docs/Web/HTML/Element/form#method) attribute of the element's form owner.
 
-- {{htmlattrdef("formnovalidate")}}
+- `formnovalidate`
   - : If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) attribute of the element's form owner.
-- {{htmlattrdef("formtarget")}}
+- `formtarget`
 
   - : If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a _browsing context_ (for example, tab, window, or inline frame). If this attribute is specified, it overrides the [`target`](/pt-BR/docs/Web/HTML/Element/form#target) attribute of the elements's form owner. The following keywords have special meanings:
 
@@ -328,7 +328,7 @@ Beside the attributes listed below, this element can have any of the [global att
     - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
     - `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.
 
-- {{htmlattrdef("inputmode")}}
+- `inputmode`
 
   - : A hint to the browser for which keyboard to display. This attribute applies when the value of the **type** attribute is text, password, email, or url. Possible values are:
 
@@ -344,28 +344,28 @@ Beside the attributes listed below, this element can have any of the [global att
     - `email`: Email input. Use \<input type="email"> if possible instead.
     - `url`: URL input. Use \<input type="url"> if possible instead.
 
-- {{htmlattrdef("list")}}
+- `list`
   - : Identifies a list of pre-defined options to suggest to the user. The value must be the **id** of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.
-- {{htmlattrdef("max")}}
+- `max`
   - : The maximum value for this item, which must not be less than its minimum (**min** attribute) value.
-- {{htmlattrdef("min")}}
+- `min`
   - : The minimum value for this item, which must not be greater than its maximum (**max** attribute) value.
-- {{htmlattrdef("name")}}
+- `name`
   - : The name of the control, which is submitted with the form data.
-- {{htmlattrdef("readonly")}}
+- `readonly`
   - : This Boolean attribute indicates that the user cannot modify the value of the control.
-- {{htmlattrdef("required")}}
+- `required`
   - : This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the **type** attribute is `hidden`, `image`, or a button type (`submit`, `reset`, or `button`). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
-- {{htmlattrdef("selectionDirection")}}
+- `selectionDirection`
   - : The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
-- {{htmlattrdef("spellcheck")}}
+- `spellcheck`
   - : Setting the value of this attribute to `true` indicates that the element needs to have its spelling and grammar checked. The value `default` indicates that the element is to act according to a default behavior, possibly based on the parent element's own `spellcheck` value. The value `false` indicates that the element should not be checked.
-- {{htmlattrdef("step")}}
+- `step`
   - : Works with the **min** and **max** attributes to limit the increments at which a numeric or date-time value can be set. It can be the string `any` or a positive floating point number. If this attribute is not set to `any`, the control accepts only values at multiples of the step value greater than the minimum.
-- {{htmlattrdef("value")}}
+- `value`
   - : The initial value of the control. This attribute is optional.
     Note that when reloading the page, Gecko and IE [will ignore the value specified in the HTML source](https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186), if the value was changed before the reload.
-- {{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
+- `x-moz-errormessage` {{non-standard_inline}}
   - : This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
 
 ## Examples
diff --git a/files/pt-br/web/html/element/input/index.md b/files/pt-br/web/html/element/input/index.md
index f1e8f9e4920ac8..fd772a50cdd672 100644
--- a/files/pt-br/web/html/element/input/index.md
+++ b/files/pt-br/web/html/element/input/index.md
@@ -16,7 +16,7 @@ O **elemento HTML `<input>`** é usado para criar controles interativos para for
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
 
-- {{htmlattrdef("type")}}
+- `type`
 
   - : O tipo de controle a ser exibido. O tipo padrão é **text**, se este atributo não for especificado. Os valores possíveis são:
 
@@ -50,7 +50,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
     - `url`: Um campo para editar uma URL. O valor inserido é validado para ser vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha e espaços em branco antes e após o valor inserido são automaticamente removidos. Você pode usar atributos como **pattern** e **maxlength** para restringir os valores inseridos no controle. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente.
     - `week`: Um controle para inserir uma data consistindo de ano da semana e número da semana sem fuso horário.
 
-- {{htmlattrdef("accept")}}
+- `accept`
 
   - : Se o valor do atributo **type** for `file`, este atributo indica quais tipos de arquivo o servidor aceita; caso contrário, este atributo é ignorado. O valor deve ser uma lista de especificadores de tipo únicos separados por vírgula:
 
@@ -60,9 +60,9 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
     - `video/*` representando arquivos de vídeo
     - `image/*` representando arquivos de imagem
 
-- {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+- `mozactionhint` {{non-standard_inline}}
   - : Especifica uma "dica de ação" usada para determinar como rotular a tecla Enter em dispositivos móveis com teclados virtuais. Os valores suportados são `go`, `done`, `next`, `search` e `send`; estes valores são automaticamente mapeados para o texto apropriado (maiúsculas e minúsculas não são diferenciadas).
-- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
+- `autocapitalize` {{non-standard_inline}}
 
   - : Este é um atributo não padronizado usado pelo iOS Safari Mobile que controla se e como o texto deveria ser automaticamente capitalizado conforme o usuário insere/edita. Os valores não obsoletos estão disponíveis no iOS 5 e posteriores. Os valores possíveis são:
 
@@ -73,7 +73,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
     - `on`: {{deprecated_inline()}} Obsoleto desde o iOS 5.
     - `off`: {{deprecated_inline()}} Obsoleto desde o iOS 5.
 
-- {{htmlattrdef("autocomplete")}}
+- `autocomplete`
 
   - : Este atributo indica se o valor do controle pode ser completado automaticamente pelo navegador. Este atributo é ignorado se o valor do atributo **type** é `hidden`, `password`, `checkbox`, `radio`, `file` ou um tipo de botão (`button`, `submit`, `reset`, `image`). Os valores possíveis são:
 
@@ -84,34 +84,34 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
 
     O atributo **autocomplete** também controla se o Firefox vai, ao contrário de outros navegadores, [persistir o estado dinâmico de desabilitado e marcado (se aplicável)](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. A funcionalidade de persistir é habilitada por padrão. Definir o valor do atributo **autocomplete** para `off` desabilita esta funcionalidade; isto funciona mesmo quando o atributo **autocomplete** não se aplica ao {{HTMLElement("input")}} por causa de seu **type**. Veja [Erro do Firefox 654072](https://bugzil.la/654072).
 
-- {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
+- `autocorrect` {{non-standard_inline}}
 
   - : Este é um atributo não padronizado suportado pelo Safari que é usado para controle se a correção automática deveria ser habilitada quando o usuário entra/edita o texto do {{HTMLElement("input")}}. Os valores possíveis são:
 
     - `on`: Habilita correção automática
     - `off`: Desabilita correção automática
 
-- {{htmlattrdef("autofocus")}}
+- `autofocus`
   - : Este atributo booleano permite que você especifique que um controle de formulário deve ter o foco de entrada de dados assim que a página carrega, a não ser que o usuário sobrescreva este comportamento digitando em um controle diferente, por exemplo. Apenas um elemento de formulário em um documento pode ter o atributo **autofocus**, que é booleano. Este atributo não pode ser aplicado se o atributo **type** estiver definido como `hidden` (isto é, você não pode colocar automaticamente o foco em um controle escondido).
-- {{htmlattrdef("autosave")}}
+- `autosave`
   - : Este atributo deve ser definido com um valor único. Se o valor do atributo **type** for `search`, termos de busca anteriores serão persistidos no menu entre carregamentos de página.
-- {{htmlattrdef("checked")}}
+- `checked`
 
   - : Quando o valor do atributo **type** é `radio` ou `checkbox`, a presença deste atributo booleano indica que o controle é selecionado por padrão; caso contrário, este atributo é ignorado.
 
     O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de marcado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete) para controlar esta funcionalidade.
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
 
   - : Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento `click` [não será disparado](https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute) em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário.
 
     O Firefox vai, por padrão, ao contrário de outros navegadores, [persistir o estado dinâmico de desabilitado](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo [`autocomplete`](/pt-BR/docs/Web/HTML/Element/input#autocomplete) para controlar esta funcionalidade.
 
-- {{htmlattrdef("form")}}
+- `form`
   - : O elemento `<form>` ao qual o elemento `<input>` está associado (seu _formulário dono_). O valor do atributo deve ser um **id** de um elemento {{HTMLElement("form")}}. Este atributo permite que você coloque elementos `<input>` em qualquer lugar num documento, não apenas como descendentes de seus elementos `<form>`. Um `<input>` só pode estar associado a um único formulário.
-- {{htmlattrdef("formaction")}}
+- `formaction`
   - : A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo [`action`](/pt-BR/docs/Web/HTML/Element/form#action) do formulário dono do elemento.
-- {{htmlattrdef("formenctype")}}
+- `formenctype`
 
   - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o tipo de conteúdo que deve ser usado para enviar o formulário para o servidor. Os valores possíveis são:
 
@@ -121,7 +121,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
 
     Se este atributo for especificado, ele sobrescreve o atributo [`enctype`](/pt-BR/docs/Web/HTML/Element/form#enctype) do formulário dono do elemento.
 
-- {{htmlattrdef("formmethod")}}
+- `formmethod`
 
   - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o método HTTP que o navegador deve usar para enviar o formulário. Os valores possíveis são:
 
@@ -130,9 +130,9 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
 
     Se especificado, este atributo sobrescreve o atributo [`method`](/pt-BR/docs/Web/HTML/Element/form#method) do formulário dono do elemento.
 
-- {{htmlattrdef("formnovalidate")}}
+- `formnovalidate`
   - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo [`novalidate`](/pt-BR/docs/Web/HTML/Element/form#novalidate) do formulário dono do elemento.
-- {{htmlattrdef("formtarget")}}
+- `formtarget`
 
   - : Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um _contexto de navegação_ (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo [`target`](/pt-BR/docs/Web/HTML/Element/form#target) do formulário dono do elemento. As seguintes palavras-chave têm significado especial:
 
@@ -141,11 +141,11 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
     - `_parent`: Carrega a resposta no contexto de navegação pai do atual. Se não houver pai, esta opção tem o mesmo comportamento de `_self`.
     - `_top`: Carrega a resposta no contexto de navegação raiz (isto é, o contexto de navegação que é ancestral do atual e não tem pai). Se não houver pai, esta opção tem o mesmo comportamento de `_self`.
 
-- {{htmlattrdef("height")}}
+- `height`
   - : Se o valor do atributo **type** for `image`, este atributo define a altura da imagem mostrada para o botão.
-- {{htmlattrdef("incremental")}} {{non-standard_inline}}
+- `incremental` {{non-standard_inline}}
   - : Este é um atributo não padronizado suportado pelo Safari que é aplicado somente quando o **type** é `search`. Se o atributo estiver presente, independentemente do valor que ele tiver, o {{HTMLElement("input")}} dispara eventos [`search`](/pt-BR/docs/Web/Events/search) conforme o usuário edita o texto do campo. Este evento somente é disparado um tempo após a última tecla ter sido pressionada; este tempo é definido pela implementação e novas digitações zeram o contador de tempo. Em outras palavras, o disparo do evento é filtrado (_debounced_). Se o atributo não estiver presente, o evento [`search`](/pt-BR/docs/Web/Events/search) só é disparado quando o usuário iniciar explicitamente uma busca (por exemplo, pressionando a tecla Enter enquanto estiver no campo).
-- {{htmlattrdef("inputmode")}}
+- `inputmode`
 
   - : Uma dica para o navegador de qual teclado deve ser mostrado. Este atributo se aplica quando o valor do atributo **type** é `text`, `password`, `email` ou `url`. Os valores possíveis são:
 
@@ -161,54 +161,54 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Atributos_globais).
     - `email`: Entrada de email. Use `<input type="email">` se possível em vez disso.
     - `url`: Entrada de URLs. Use `<input type="url">` se possível em vez disso.
 
-- {{htmlattrdef("list")}}
+- `list`
   - : Identifica uma lista de opções pré-definidas de sugestões para o usuário. O valor deve ser o **id** de um elemento {{HTMLElement("datalist")}} no mesmo documento. O navegador mostrará apenas opções que são valores válidos para este elemento. Este atributo é ignorado quando o valor do atributo **type** é `hidden`, `checkbox`, `radio`, `file` ou um tipo de botão.
-- {{htmlattrdef("max")}}
+- `max`
   - : O valor máximo (numérico ou data) para este item, que não deve ser menor que seu valor mínimo (atributo **min**).
-- {{htmlattrdef("maxlength")}}
+- `maxlength`
   - : Se o valor do atributo **type** for `text`, `email`, `search`, `password`, `tel` ou `url`, este atributo especifica o número máximo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado. Seu valor pode exceder o do atributo **size**. Se não for especificado, o usuário pode inserir uma quantidade ilimitada de caracteres. Especificar um valor negativo resulta no comportamento padrão, isto é, o usuário vai poder inserir um número ilimitado de caracteres. Esta regra só é validada quando o valor do atributo é modificado.
-- {{htmlattrdef("min")}}
+- `min`
   - : O valor mínimo (númerico ou data) para este item, que não deve ser maior do que seu máximo (atributo **max**).
-- {{htmlattrdef("minlength")}}
+- `minlength`
   - : Se o valor do atributo **type** for `text`, `email`, `search`, `password`, `tel` ou `url`, este atributo especifica o número mínimo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado.
-- {{htmlattrdef("multiple")}}
+- `multiple`
   - : Este atributo booleano indica se o usuário pode inserir mais de um valor. Ele é aplicado quando o atributo **type** está definido como `email` ou `file`; em outros casos, é ignorado.
-- {{htmlattrdef("name")}}
+- `name`
   - : O nome do controle, que é enviado junto com os dados do formulário.
-- {{htmlattrdef("pattern")}}
+- `pattern`
   - : Uma expressão regular usada para validar o valor do controle. O padrão deve casar com o valor completo da entrada, não apenas uma parte. Use o atributo **title** para descrever o padrão para ajudar o usuário. Este atributo é aplicado quando o valor do atributo **type** é `text`, `search`, `tel`, `url` ou `email`; caso contrário ele é ignorado. A linguagem da expressão regular é a mesma do JavaScript. O padrão não deve estar entre barras.
-- {{htmlattrdef("placeholder")}}
+- `placeholder`
 
   - : Uma dica para o usuário do que ele pode inserir no controle. O texto do atributo não deve conter quebras de linha. Este atributo é aplicado quando o valor do atributo **type** é `text`, `search`, `tel`, `url` ou `email`; caso contrário, ele é ignorado.
 
     > **Nota:** Não use o atributo `placeholder` no lugar de um elemento {{HTMLElement("label")}}. Os propósitos de cada um são diferentes: o atributo {{HTMLElement("label")}} descreve o papel o elemento do formulário, isto é, ele indica que tipo de informação é esperada. Já o atributo `placeholder` é uma dica sobre o formato que o conteúdo deveria ter. Há casos em que o atributo `placeholder` nunca é exibido para o usuário, portanto o formulário deve ser inteligível sem ele.
 
-- {{htmlattrdef("readonly")}}
+- `readonly`
 
   - : Este atributo booleano indica que o usuário não pode modificar o valor do controle.
 
     Este atributo é ignorado se o valor do atributo **type** for `hidden`, `range`, `color`, `checkbox`, `radio`, `file` ou um tipo de botão.
 
-- {{htmlattrdef("required")}}
+- `required`
   - : Este atributo especifica que o usuário deve preencher o campo com um valor antes de enviar o formulário. Ele não pode ser usado quando o atributo **type** está definido como `hidden`, `image` ou um tipo de botão (`submit`, `reset` ou `button`). As pseudoclasses CSS {{cssxref(":optional")}} e {{cssxref(":required")}} serão aplicadas ao campo como for apropriado.
-- {{htmlattrdef("selectionDirection")}}
+- `selectionDirection`
   - : A direção na qual a seleção ocorreu. Vale `forward` se a seleção foi feita no mesmo sentido da escrita do idioma usado ou `backward` se a seleção foi feita na direção oposta. Pode ainda ser `none` se a direção da seleção não for conhecida.
-- {{htmlattrdef("size")}}
+- `size`
   - : O tamanho inicial do controle. Este valor é em pixels a não ser que o valor do atributo **type** seja `text` ou `password`. Neste caso, este valor é um número inteiro de caracteres. A partir do HTML5, este atributo é aplicado apenas quando o atributo **type** está definido como `text`, `search`, `tel`, `url`, `email` ou `password`; caso contrário, ele é ignorado. Além disso, o tamanho deve ser maior que zero. Se você não especificar um tamanho, o valor padrão 20 é usado.
-- {{htmlattrdef("spellcheck")}}
+- `spellcheck`
   - : Definir o valor deste atributo como `true` indica que o elemento deve passar por um corretor ortográfico e gramatical. O valor `default` indica que o elemento deve agir de acordo com seu comportamento padrão, possivelmente baseado no valor do atributo `spellcheck` de seu elemento pai. O valor `false` indica que o elemento não deve ser verificado.
-- {{htmlattrdef("src")}}
+- `src`
   - : Se o valor do atributo **type** for `image`, este atributo especifica uma URI para a localização de uma imagem a ser exibida no botão gráfico; caso contrário, este atributo é ignorado.
-- {{htmlattrdef("step")}}
+- `step`
   - : Trabalha junto com os atributos **min** e **max** para limitar os incrementos em que valores numéricos ou datas podem ser alterados. Seu valor pode ser `any` ou um número de ponto flutuante positivo. Se o valor não for `any`, o controle aceita somente valores múltiplos valor do incremento maiores que o mínimo.
-- {{htmlattrdef("tabindex")}}
+- `tabindex`
   - : A posição do elemento na ordem de navegação pela tecla Tab no documento atual.
-- {{htmlattrdef("value")}}
+- `value`
   - : O valor inicial do controle. Este atributo é opcional exceto quando o valor do atributo **type** for `radio` ou `checkbox`.
     Note que, quando a página é recarregada, Gecko and IE [ignorarão o valor especificado no código HTML](https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186) se o valor tiver sido alterado antes do recarregamento.
-- {{htmlattrdef("width")}}
+- `width`
   - : Se o valor do atributo **type** for `image`, este atributo define a largura da imagem exibida para o botão.
-- {{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
+- `x-moz-errormessage` {{non-standard_inline}}
   - : Essa extensão da Mozilla permite que você especifique a mensagem de erro a ser exibida quando um campo não valida com sucesso.
 
 ## Notas
diff --git a/files/pt-br/web/html/element/input/password/index.md b/files/pt-br/web/html/element/input/password/index.md
index 8bbf7260fda901..3d09d636d3dceb 100644
--- a/files/pt-br/web/html/element/input/password/index.md
+++ b/files/pt-br/web/html/element/input/password/index.md
@@ -186,7 +186,7 @@ Neste exemplo, são válidos apenas valores consistindo de no mínimo quatro e n
 
 {{EmbedLiveSample("Validation_sample1", 600, 40)}}
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Esse atributo booleano indica que o campo de senha não está disponível para interação. Além disso, os valores dos campos marcados com ele não são enviados com o formulário.
 
 ## Exemplos
diff --git a/files/pt-br/web/html/element/label/index.md b/files/pt-br/web/html/element/label/index.md
index 2a9233ecf7f79d..514e10d87ae8b6 100644
--- a/files/pt-br/web/html/element/label/index.md
+++ b/files/pt-br/web/html/element/label/index.md
@@ -17,15 +17,15 @@ Um **elemento** **HTML `<label>` **representa uma legenda para um item em uma in
 
 A tecla de atalho para acessar este elemento a partir do teclado.
 
-- {{htmlattrdef("accesskey")}}
+- `accesskey`
   - : A tecla de atalho para acessar este elemento a partir do teclado.
-- {{htmlattrdef("for")}}
+- `for`
 
   - : O ID de um elemento de formulário relacionados com labelable no mesmo documento como o elemento label. O primeiro elemento tal no documento com uma ID correspondente ao valor do atributo é o controle marcado for este elemento etiqueta.
 
     > **Nota:** Um elemento etiqueta pode ter tanto um for o atributo e um elemento de controlo continham, enquanto os pontos de atributo para o elemento de controlo contido.
 
-- {{htmlattrdef("form")}}
+- `form`
   - : O elemento de forma que o elemento label está associado a (seu proprietário formulário). O valor do atributo deve ser uma identificação de um {{HTMLElement ("form")}} elemento no mesmo documento. Se este atributo não for especificado, este elemento \<label> deve ser um descendente de uma {{HTMLElement ("form")}} elemento. Este atributo permite que você coloque elementos do rótulo em qualquer lugar dentro de um documento, e não apenas como descendentes de seus elementos de formulário.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/li/index.md b/files/pt-br/web/html/element/li/index.md
index 38542a123b74f9..483fa550fce4aa 100644
--- a/files/pt-br/web/html/element/li/index.md
+++ b/files/pt-br/web/html/element/li/index.md
@@ -17,7 +17,7 @@ O **_elemento_** **_HTML_ `<li>`** (ou a Lista dos Itens de um elemento HTML) é
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("value")}}
+- `value`
 
   - : Este atributo de número inteiro indica o valor ordinal atual do item na lista, definido pelo elemento {{HTMLElement("ol")}}. O único valor possível para este atributo é um número, ainda que a lista seja exibida com algarismos romanos, ou letras. A lista de itens que virá em seguida continuará a ser numerada a partir desta posição. O atributo **value** não tem significado para listas desordenadas ({{HTMLElement("ul")}}), nem para menus ({{HTMLElement("menu")}}).
 
@@ -25,7 +25,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
     > **Nota:** Antes de Gecko 9.0, os valores negativos eram, incorretamente, convertidos a 0. A partir de Gecko 9.0 todos os valores inteiros são analisados corretamente.
 
-- {{htmlattrdef("type")}} {{Deprecated_inline}}
+- `type` {{Deprecated_inline}}
 
   - : A característica deste atributo é indicar o tipo de numeração:
 
diff --git a/files/pt-br/web/html/element/link/index.md b/files/pt-br/web/html/element/link/index.md
index 4aed228d4aae49..e875b76de987bb 100644
--- a/files/pt-br/web/html/element/link/index.md
+++ b/files/pt-br/web/html/element/link/index.md
@@ -17,15 +17,15 @@ O **Elemento HTML _\<link>_** especifica as relações entre o documento atual e
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("as")}}
+- `as`
   - : Esse atributo é usado apenas quando `rel="preload"` foi enviado no elemento `<link>`. Especifica o tipo de conteúdo carregado pelo `<link>`, que é necessário para a priorização do conteúdo, solicitação de correspondência, aplicação de [política de segurança de conteúdo](/pt-BR/docs/Web/HTTP/CSP) correta, e configuração do cabeçalho de pedido {{httpheader("Accept")}} correta.
-- {{htmlattrdef("charset")}}
+- `charset`
 
   - : Este atributo define a codificação de caracteres do recurso vinculado. O valor é umespaço e/ou lista delimitada por vírgulas de conjuntos de caracteres, conformedefinido na RFC 2045. O valor padrão é ISO-8859-1.
 
     > **Nota:** Este atributo é obsoleto em HTML5 e **não deve ser usada por autores**. Para atingir seu efeito, use o cabeçalho HTTP Content-Type sobre o recurso vinculado.
 
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
 
   - : Este atributo enumerado indica se a busca da imagem relacionada deve ser feita usando CORS ou não. I-magens de CORS habilitado podem ser reutilizadas no elemento {{HTMLElement("canvas")}} sem ser conta-minado. Os valores permitidos são:
 
@@ -36,7 +36,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
     When not present, the resource is fetched without a CORS request (i.e. without sending the `Origin:` HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword **anonymous** was used. See [CORS settings attributes](/pt-BR/docs/Web/HTML/CORS_settings_attributes) for additional information.
 
-- {{htmlattrdef("disabled")}} {{Non-standard_inline}}
+- `disabled` {{Non-standard_inline}}
 
   - : Este atributo é usado para desativa uma relação com o link. Em conjunto com o script, esse atributo poderia ser usado para ligar e desligar várias relações com stylesheets.
 
@@ -47,11 +47,11 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
     > - If the `disabled` attribute has been added directly to the element on the page, do not include the {{HTMLElement("link")}} element instead;
     > - Set the `disabled` **property** of the `StyleSheet` DOM object via scripting.
 
-- {{htmlattrdef("href")}}
+- `href`
   - : Esse atributo especifica a [URL](/pt-BR/docs/URIs_and_URLs) do recurso vinculado. Uma URL pode ser absolute or relative.
-- {{htmlattrdef("hreflang")}}
+- `hreflang`
   - : Esse atributo indica o idioma do recurso vinculado. É meramente consultivo. Os valores permitidos são determindaos por [BCP47](http://www.ietf.org/rfc/bcp/bcp47.txt) para HTML5 e por [RFC1766](http://www.ietf.org/rfc/rfc1766.txt) para HTML 4. Use esse atributo se apenas os atributos [`href`](/pt-BR/docs/Web/HTML/Element/a#href) estiverem presentes.
-- {{htmlattrdef("media")}}
+- `media`
 
   - : This attribute specifies the media which the linked resource applies to. Its value must be a [media query](/pt-BR/docs/CSS/Media_queries). This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.
 
@@ -59,17 +59,17 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
     >
     > - Browsers not supporting the [CSS3 Media Queries](/pt-BR/docs/CSS/Media_queries) won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.
 
-- {{htmlattrdef("methods")}} {{Non-standard_inline}}
+- `methods` {{Non-standard_inline}}
   - : The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the **title** attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. See [Methods Property (MSDN)](http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx).
-- {{htmlattrdef("rel")}}
+- `rel`
   - : This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the [link types values](/pt-BR/docs/Web/HTML/Link_types). The most common use of this attribute is to specify a link to an external style sheet: the **rel** attribute is set to `stylesheet`, and the **href** attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value `next` for **rel** to preload the next page in a document series.
-- {{htmlattrdef("rev")}}
+- `rev`
 
   - : The value of this attribute shows the relationship of the current document to the linked document, as defined by the [`href`](/pt-BR/docs/Web/HTML/Element/link#href) attribute. The attribute thus defines the reverse relationship compared to the value of the **rel** attribute. [Link types values](/pt-BR/docs/Web/HTML/Link_types) for the attribute are similar to the possible values for [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel).
 
     > **Nota:** This attribute is obsolete in HTML5. **Do not use it**. To achieve its effect, use the [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) attribute with the opposite [link types values](/pt-BR/docs/Web/HTML/Link_types), e.g. made should be replaced by author. Also this attribute doesn't mean _revision_ and must not be used with a version number, which is unfortunately the case on numerous sites.
 
-- {{htmlattrdef("sizes")}}
+- `sizes`
 
   - : This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the [`rel`](/pt-BR/docs/Web/HTML/Element/link#rel) contains the icon [link types value](/pt-BR/docs/Web/HTML/Link_types). It may have the following values:
 
@@ -79,9 +79,9 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
     > **Nota:** Most icon formats are only able to store one single icon; therefore most of the time the [`sizes`](/pt-BR/docs/Web/HTML/Global_attributes#sizes) attribute contains only one entry.
     > MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).
 
-- {{htmlattrdef("target")}}{{Non-standard_inline}}
+- `target`{{Non-standard_inline}}
   - : Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.
-- {{htmlattrdef("type")}}
+- `type`
   - : This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as **text/html**, **text/css**, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is **text/css**, which indicates a Cascading Style Sheet format.
 
 ## Exemplos
diff --git a/files/pt-br/web/html/element/marquee/index.md b/files/pt-br/web/html/element/marquee/index.md
index 2034d0e8dbdab9..548b1232d00948 100644
--- a/files/pt-br/web/html/element/marquee/index.md
+++ b/files/pt-br/web/html/element/marquee/index.md
@@ -9,36 +9,36 @@ O elemento html \<marquee> é usado para inserir uma área de rolagem de texto"s
 
 ## Atributos
 
-- {{htmlattrdef("behavior")}}
+- `behavior`
   - : Define como o texto é rolado dentro da área do letreiro. Os valores possíveis são scroll, slide e alternate. Se nenhum valor for especificado, o valor padrão será scroll.
-- {{htmlattrdef("bgcolor")}}
+- `bgcolor`
   - : Define a cor do plano de fundo do letreiro através do nome da cor (ex: red, blue) ou de um valor hexadecimal.
-- {{htmlattrdef("direction")}}
+- `direction`
   - : Define a direção da rolagem do texto dentro do letreiro, os possíveis valores são: left, right, up & down. Se nenhum valor for especificado, o valor padrão será "left".
-- {{htmlattrdef("height")}}
+- `height`
   - : Define a altura do letreiro em pixeis ou em um valor percentual.
-- {{htmlattrdef("hspace")}}
+- `hspace`
   - : Aplica a margem horizontal.
-- {{htmlattrdef("loop")}}
+- `loop`
   - : Define o número de repetições da animação do letreiro. Se nenhum valor for especificado assumirá o valor padrão de -1, que significa que a animação será repetida infinitamente.
-- {{htmlattrdef("scrollamount")}}
+- `scrollamount`
   - : Define em pixeis o tamanho de rolagem em cada intervalo, o valor padrão é 6.
-- {{htmlattrdef("scrolldelay")}}
+- `scrolldelay`
   - : Define o intervalo de tempo entre cada animação de rolagem em milissegundos. O valor padrão é 85. Qualquer valor menor que 60 será ignorado e o valor 60 será usado, a menos que seja especificado como truespeed.
-- {{htmlattrdef("truespeed")}}
+- `truespeed`
   - : Por padrão, valores abaixo de 60 milissegundos são ignorados, a menos que o valor truespeed esteja presente, caso esteja estes valores são aceitos.
-- {{htmlattrdef("vspace")}}
+- `vspace`
   - : Aplica uma margem vertical em pixeis ou em valor percentual.
-- {{htmlattrdef("width")}}
+- `width`
   - : Define a largura em pixeis ou em um valor percentual.
 
 ## Event Handlers
 
-- {{htmlattrdef("onbounce")}}
+- `onbounce`
   - : Dispara quando o letreiro alcança o final da sua posição de rolagem. Ele apenas dispara quando o comportamento está configurado como `alternate.`
-- {{htmlattrdef("onfinish")}}
+- `onfinish`
   - : Dispara quando o letreiro terminar a quantidade de repetições definida pelo atributo loop. Só pode disparar quando o atributo loop estiver definido para algum número maior que 0, obviamente.
-- {{htmlattrdef("onstart")}}
+- `onstart`
   - : Dispara quando o letreiro começa a se mover.
 
 ## Métodos
diff --git a/files/pt-br/web/html/element/meta/index.md b/files/pt-br/web/html/element/meta/index.md
index 45a4474bade6d1..31dd938e0bd7d0 100644
--- a/files/pt-br/web/html/element/meta/index.md
+++ b/files/pt-br/web/html/element/meta/index.md
@@ -65,7 +65,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
 > **Nota:** o atributo global [`name`](/pt-BR/docs/Web/HTML/Element/meta#name) tem um significado específico para o elemento {{HTMLElement("meta")}}, e o atributo [`itemprop`](/pt-BR/docs/Web/HTML/Element/meta#itemprop) não deve ser definido no mesmo elemento`<meta>` que tem algum desses atributos existentes: [`name`](/pt-BR/docs/Web/HTML/Element/meta#name), [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset).
 
-- {{htmlattrdef("charset")}}
+- `charset`
 
   - : Este atributo define a codificação de caracteres usada na página. Pode ser substituído localmente usando o atributo _lang_ em qualquer elemento. Esse atributo é literalmente uma amarra e deve ser um dos _MIME names_ preferidos para uma codificação de caracteres como definido pela IANA ([defined by the IANA](https://www.iana.org/assignments/character-sets)). Embora o padrão não solicite uma codificação específica, ele dá algumas sugestões:
 
@@ -75,16 +75,17 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
     - Autores não devem usar CESU-8, UTF-7, BOCU-1 e SCSU, also falling in that category and not intended to be used on the web. Cross-scripting attacks with some of these encodings have been documented.
     - Autores não devem usar UTF-32 pois nem todos algorítimos de codificação HTML5 conseguem distingui-lo do UTF-16.
 
-    > **Note:** **Notas:**- O conjunto de caracteres declarado deve corresponder ao da página. Não há motivo válido para declarar um conjunto de caracteres imprecisos.
+    > **Nota:**
     >
+    > - O conjunto de caracteres declarado deve corresponder ao da página. Não há motivo válido para declarar um conjunto de caracteres imprecisos.
     > - Esse elemento {{HTMLElement ("meta")}} deve estar dentro do elemento {{HTMLElement ("head")}} e dentro dos primeiros 1024 bytes da página, pois alguns navegadores só olham para esses primeiros bytes antes de escolher um caractere definido para a página.
     > - Esse elemento {{HTMLElement ("meta")}} é apenas uma parte do algoritmo para determinar o conjunto de caracteres de uma página que os navegadores aplicam. O cabeçalho HTTP Content-Type e quaisquer elementos da BOM têm precedência sobre esse elemento.
     > - É uma boa prática, e altamente recomendável, definir o conjunto de caracteres usando este atributo. Se nenhum conjunto de caracteres estiver definido para uma página, várias técnicas de scripts cruzados poderão prejudicar o usuário da página, como a técnica de cross-scripting de fallback UTF-7. Sempre definindo esta meta irá proteger contra esses riscos.
     > - Esse elemento {{HTMLElement("meta")}} é um sinônimo para o pre-HTML5 `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` onde o atributo `IANAcharset` corresponde ao valor equivalente de [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset). Essa sintaxe ainda é permitida, embora obsoleta e não mais recomendada.
 
-- {{htmlattrdef("content")}}
+- `content`
   - : Esse atributo fornece o valor associado ao atributo [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`name`](/pt-BR/docs/Web/HTML/Element/meta#name), dependendo do contexto.
-- {{htmlattrdef("http-equiv")}}
+- `http-equiv`
 
   - : Este enumerado atributo define a pragma isso pode alterar o comportamento de servers e user-agents. o valor do pragma é definido usando [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) e pode ser um dos seguintes:
 
@@ -92,7 +93,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
       - : este pragma define a linguagem default da página
 
-        > **Note:** não use este pragma, ele esta obsoleto. use o atributo global `lang` no {{HTMLElement("html")}} ao invés deste.
+        > **Nota:** não use este pragma, ele esta obsoleto. use o atributo global `lang` no {{HTMLElement("html")}} ao invés deste.
 
     - `"Content-Security-Policy"`
       - : Este valor permite os administradores do web site definam uma [política de conteúdo](/pt-BR/docs/Web/Security/CSP/CSP_policy_directives) para a página atual. Com algumas exceções, politicas de conteúdo envolvem especificar origens de servidores e endpoints de scripts permitidos, isso ajuda na defesa de cross-server scripting attacks.
@@ -100,8 +101,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
       - : Esse atributo define o [MIME type](/pt-BR/docs/MIME) e o conjunto de caracteres do documento. Isso segue a mesma sintaxe como o HTTP `content-type` entity-header field, mas isto esta dentro de um elemento HTML, a maioria dos valores não é possível. Sendo assim a sintaxe válida para este conteúdo é a literal string '`text/html`' eventualmente seguido por estes caracteres com a seguinte sintaxe: '`; charset=`_`IANAcharset`_' onde `IANAcharset` é o _MIME preferido nome para um conjunto de caracteres como_ [definido pela IANA.](https://www.iana.org/assignments/character-sets)
 
-        > **Note:** **nota de uso:**- Nao use esta pragma ela esta obsoleta. use [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) atributo {{HTMLElement("meta")}} element instead.
+        > **Nota:**
         >
+        > - Nao use esta pragma ela esta obsoleta. use [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) atributo {{HTMLElement("meta")}} element instead.
         > - como o {{HTMLElement("meta")}} pode nao ser usado para mudar o tipo de documento no XHTML, ou em um documento de HTML5 seguindo uma syntax de XHTML, nunca marque MIME type para um XHTML MIME type desta forma. isso sera incoerente.
         > - somente um documento HTML pode usar o content-type, então a maioria disto é redundante: isso porque esta obsoleto e trocado pelo atributo [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset).
 
@@ -120,15 +122,16 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
         > **Nota:** não use este pragma está obsoleto. Use HTTP header set-cookie instead.
 
-- {{htmlattrdef("name")}}
+- `name`
 
   - : Este atributo define o nome do document-level metadata. Isso não deve ser marcado se um dos atributos [`itemprop`](/pt-BR/docs/Web/HTML/Element/meta#itemprop), [`http-equiv`](/pt-BR/docs/Web/HTML/Element/meta#http-equiv) ou [`charset`](/pt-BR/docs/Web/HTML/Element/meta#charset) já estiver preparado.
     este document-level metadata name é associado a um valor, contido pelo atributo [`content`](/pt-BR/docs/Web/HTML/Element/meta#content). os possíveis valores para o elemento name são, com seu valor associado, guardado via [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) attribute:
 
     - `application-name`, define o nome da aplicação que esta rodando na página;
 
-      > **Nota:**- Browsers podem usar isso para identificar a aplicação. isso é diferente do elemento {{HTMLElement("title")}}, que geralmente constituí no nome da aplicação, mas também contém informações específicas como o nome do documento ou status;
+      > **Nota:**
       >
+      > - Browsers podem usar isso para identificar a aplicação. isso é diferente do elemento {{HTMLElement("title")}}, que geralmente constituí no nome da aplicação, mas também contém informações específicas como o nome do documento ou status;
       > - Webpages simples não deveriam definir application-name meta.
 
     - `author`, definindo, em formato livre, o nome do author do documento;
@@ -167,8 +170,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
       | `noimageindex` | previne esta página de aparecer como referencia de alguma imagem indexada                                                                              | [Google](https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812)                                                                                                                                                                                                                                                                         |
       | `nocache`      | sinônimo de `noarchive`                                                                                                                                | [Bing](https://www.bing.com/toolbox/blogs/webmaster/archive/2008/06/03/robots-exclusion-protocol-joining-together-to-provide-better-documentation.aspx)                                                                                                                                                                                                      |
 
-      > **Note:** **Notes:**- Somente robôs cooperativos seguirão as regras definidas pelo nome do robô. Não espere manter as colheitadeiras de e-mail à distância com isso.
+      > **Nota:**
       >
+      > - Somente robôs cooperativos seguirão as regras definidas pelo nome do robô. Não espere manter as colheitadeiras de e-mail à distância com isso.
       > - O robô ainda precisa acessar a página para ler o valor meta. Se você quiser mantê-los sob controle, por exemplo, para evitar o consumo de largura de banda, use um arquivo robots.txt (ou em complemento).
       > - Se você quiser remover a página de um índice, a alteração do meta para `noindex` funcionará, mas somente quando o robô visitar a página novamente. Verifique se o arquivo robots.txt não está impedindo essas visitas. Alguns mecanismos de busca possuem ferramentas para desenvolvedores, permitindo uma remoção rápida de algumas páginas.
       > - Alguns valores possíveis são mutuamente exclusivos, como usar `index` e `noindex`, ou `follow` e `nofollow`, ao mesmo tempo. Nestes casos, o comportamento do robô é indefinido e pode variar de um para o outro. Então evite esses casos.
@@ -193,16 +197,17 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
       | ----------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------- |
       | {{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}} | {{Spec2('CSS3 Device')}} | Non-normatively describes the Viewport META element |
 
-      > **Note:** **Notes:**- Embora não seja padronizado, esse atributo é usado por diferentes navegadores móveis, como o Safari Mobile, o Firefox para celular ou o Opera Mobile.
+      > **Nota:**
       >
+      > - Embora não seja padronizado, esse atributo é usado por diferentes navegadores móveis, como o Safari Mobile, o Firefox para celular ou o Opera Mobile.
       > - Os valores padrão podem mudar de um dispositivo e navegador para outro.
       > - Para aprender sobre esse pragma no Firefox para celular, veja [este artigo](/pt-BR/docs/Mobile/Viewport_meta_tag).
 
-- {{htmlattrdef("scheme")}}
+- `scheme`
 
   - : Este atributo define o esquema no qual os metadados são descritos. Um esquema é um contexto que leva às interpretações corretas dos [`content`](/pt-BR/docs/Web/HTML/Element/meta#content) valores, como um formato.
 
-    > **Note:** **Notes:** Não use este atributo pois esta obsoleto.Não há substituto para isso, pois não houve uso real para isso. Omitir completamente.
+    > **Nota:** Não use este atributo pois esta obsoleto.Não há substituto para isso, pois não houve uso real para isso. Omitir completamente.
 
 ## Notes
 
diff --git a/files/pt-br/web/html/element/ol/index.md b/files/pt-br/web/html/element/ol/index.md
index 3a782bdbbe338d..b751b915121c29 100644
--- a/files/pt-br/web/html/element/ol/index.md
+++ b/files/pt-br/web/html/element/ol/index.md
@@ -21,21 +21,21 @@ Não há limitação para a profundidade e a imbricação das listas definidas c
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("compact")}} {{Deprecated_inline}}
+- `compact` {{Deprecated_inline}}
 
   - : Este atributo boleano sugere que a lista deve ser renderizada em um estilo compacto. A interpretação deste atributo depende do perfil de navegação (_user agent_) e não funciona em todos os navegadores.
 
     > **Nota:** Não utilize este atributo, pois ele se tornou obsoleto. O elemento {{HTMLElement("ol")}} deve ser estilizado usando [CSS](/pt-BR/docs/CSS). Para dar um efeito semelhante ao do atributo compacto, a propriedade [CSS](/pt-BR/docs/CSS) {{cssxref("line-height")}} pode ser utilizada com o valor de 80%.
 
-- {{htmlattrdef("reversed")}}
+- `reversed`
   - : Este atributo boleano especifica que as partes desta lista serão especificadas em ordem reversa, isto é, a menos importante será listada primeiro.
-- {{htmlattrdef("start")}}
+- `start`
 
   - : Este atributo inteiro especifica o valor inicial para a numeração dos itens da lista. Embora o tipo de ordenação dos elementos possa ser com algarismos romanos, tal como XXXI, ou letras, o valor inicial sempre é representado como um inteiro. Para iniciar a contagem a partir da letra "C", utilize \<ol start="3">.
 
     > **Nota:** Este atributo, obsoleto na HTML4, foi reintroduzido na HTML5.
 
-- {{htmlattrdef("type")}}
+- `type`
 
   - : Indica o tipo de numeração:
 
diff --git a/files/pt-br/web/html/element/optgroup/index.md b/files/pt-br/web/html/element/optgroup/index.md
index 0507cc023cc772..45e653e0935056 100644
--- a/files/pt-br/web/html/element/optgroup/index.md
+++ b/files/pt-br/web/html/element/optgroup/index.md
@@ -19,9 +19,9 @@ Em um Formulário Web, o elemento HTML `<optgroup>` cria um agrupamento de opç
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Se este atributo booleano for definido, nenhum dos itens neste **optgroup** poderá ser selecionado. Muitos navegadores marcam como cinza e não permitem que o elemento receba nenhum evento de navegação, como cliques do mouse ou foco.
-- {{htmlattrdef("label")}}
+- `label`
   - : É o nome do optgroup, é o que os navegadores irão exibir como rótulo. Este atributo é obrigatório se o elemento for usado.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/option/index.md b/files/pt-br/web/html/element/option/index.md
index 6414db935ad999..73d5d068265781 100644
--- a/files/pt-br/web/html/element/option/index.md
+++ b/files/pt-br/web/html/element/option/index.md
@@ -17,17 +17,17 @@ Em um formulário Web, o **elemento HTML** `<option>` é usado para criar um con
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Atributos_globais).
 
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Se este atributo booleano estiver definido, esta opção não é selecionável. Frequentemente navegadores acinzentam este tipo de controle, e ele deixa de receber quaisquer eventos de navegação, como cliques do mouse ou eventos relacionados a foco. Se este atributo não estiver definido, o elemento ainda pode ser desabilitado se um de seus ancestrais é um elemento {{HTMLElement("optgroup")}} desabilitado.
-- {{htmlattrdef("label")}}
+- `label`
 
   - : Este atributo é o texto para o rótulo indicando o significado da opção. Se o atributo **label** não estiver definido, seu valor é o conteúdo de texto do elemento.
 
     > **Note:** O atributo **label** é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo **value** descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.
 
-- {{htmlattrdef("selected")}}
+- `selected`
   - : Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento `<option>` for descendente de um elemento {{HTMLElement("select")}} cujo atributo [`multiple`](/pt-BR/docs/Web/HTML/Element/select#multiple) não está definido, apenas um único `<option>` deste elemento {{HTMLElement("select")}} pode ter o atributo **selected**.
-- {{htmlattrdef("value")}}
+- `value`
 
   - : O conteúdo textual deste atributo representa o rótulo que explica a opção. Se ele não estiver definido, seu valor padrão é o texto contido no elemento.
 
diff --git a/files/pt-br/web/html/element/pre/index.md b/files/pt-br/web/html/element/pre/index.md
index 391a23afd99284..90a579cc0ac872 100644
--- a/files/pt-br/web/html/element/pre/index.md
+++ b/files/pt-br/web/html/element/pre/index.md
@@ -20,11 +20,11 @@ Esse elemento apenas inclui atributos globais.
 
 This element only includes the [global attributes](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("cols")}} {{non-standard_inline}}
+- `cols` {{non-standard_inline}}
   - : Contains the _preferred_ count of characters that a line should have. It was a non-standard synonym of [`width`](/pt-BR/docs/Web/HTML/Element/pre#width). To achieve such an effect, use CSS styling instead.
-- {{htmlattrdef("width")}}
+- `width`
   - : Contains the _preferred_ count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.
-- {{htmlattrdef("wrap")}} {{non-standard_inline}}
+- `wrap` {{non-standard_inline}}
   - : Is a _hint_ indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.
 
 ## Exemplos
diff --git a/files/pt-br/web/html/element/q/index.md b/files/pt-br/web/html/element/q/index.md
index d7c51c54cb99ae..315b1aa1ad9b43 100644
--- a/files/pt-br/web/html/element/q/index.md
+++ b/files/pt-br/web/html/element/q/index.md
@@ -58,7 +58,7 @@ slug: Web/HTML/Element/q
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("cite")}}
+- `cite`
   - : O valor deste atributo é uma URL que designa uma fonte ou mensagem para a informação citada. A intenção deste atributo é indicar a informação e explicar o contexto ou referência para a citação.
 
 ## Exemplo
diff --git a/files/pt-br/web/html/element/script/index.md b/files/pt-br/web/html/element/script/index.md
index 565b30c7dd5f2a..20462439c4c384 100644
--- a/files/pt-br/web/html/element/script/index.md
+++ b/files/pt-br/web/html/element/script/index.md
@@ -60,7 +60,7 @@ O **elemento HTML `<script>`** é usado para incluir ou referenciar um script ex
 
 Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("async")}}
+- `async`
 
   - : Um atributo booleano indicando que o navegador deve, se possível, executar o script assíncronamente.
 
@@ -70,9 +70,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
     Veja [Browser compatibility](#browser_compatibility) para notas no suporte do navegador. Veja também [Scripts assíncronos para asm.js](/pt-BR/docs/Games/Techniques/Async_scripts).
 
-- {{htmlattrdef("crossorigin")}}
+- `crossorigin`
   - : Elementos `script` passam o mínimo de informação para {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} em scripts que não passem na checagem do [CORS](/pt-BR/docs/HTTP_access_control). Para permitir logs de erro para sites que usam domínios diferentes para arquivos estáticos, use esse atributo. Veja [CORS settings attributes](/pt-BR/docs/Web/HTML/CORS_settings_attributes) para uma explicação mais detalhada dos argumentos válidos.
-- {{htmlattrdef("defer")}}
+- `defer`
 
   - : Esse atributo Boleano é usado para indicar ao navegador que o script deve ser executado depois que o documento tenha sido parseado, mas antes de disparar o evento {{event("DOMContentLoaded")}}
 
@@ -82,15 +82,15 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
     Para conseguir um efeito similar para scripts inseridos dinamicamente use `async=false`. Scripts com o atributo `defer` vão ser executados na ordem em que aparecem no `document`.
 
-- {{htmlattrdef("integrity")}}
+- `integrity`
   - : Contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See [Subresource Integrity](/pt-BR/docs/Web/Security/Subresource_Integrity).
-- {{htmlattrdef("nomodule")}} {{experimental_inline}}
+- `nomodule` {{experimental_inline}}
   - : This Boolean attribute is set to indicate that the script should not be executed in browsers that support [ES6 modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.
-- {{htmlattrdef("src")}}
+- `src`
   - : This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. If a `script` element has a `src` attribute specified, it should not have a script embedded inside its tags.
-- {{htmlattrdef("text")}}
+- `text`
   - : Like the `textContent`attribute, this attribute sets the text content of the element. Unlike the `textContent` attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.
-- {{htmlattrdef("type")}}
+- `type`
 
   - : Indicates the type of script represented. The value of this attribute will be in one of the following categories:
 
@@ -104,9 +104,9 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
 ### Atributos obsoletos
 
-- {{htmlattrdef("charset")}} {{Deprecated_inline}}
+- `charset` {{Deprecated_inline}}
   - : If present, its value must be an ASCII case-insensitive match for "`utf-8`". Both it's unnecessary to specify the `charset` attribute, because documents must use UTF-8, and the `script` element inherits its character encoding from the document.
-- {{htmlattrdef("language")}} {{Deprecated_inline}}
+- `language` {{Deprecated_inline}}
   - : Like the `type` attribute, this attribute identifies the scripting language in use. Unlike the `type` attribute, however, this attribute's possible values were never standardized. The `type` attribute should be used instead.
 
 ## Notas
diff --git a/files/pt-br/web/html/element/select/index.md b/files/pt-br/web/html/element/select/index.md
index fd6658346607f0..4d7c6da3127353 100644
--- a/files/pt-br/web/html/element/select/index.md
+++ b/files/pt-br/web/html/element/select/index.md
@@ -19,19 +19,19 @@ O elemento HTML _select_ (\<select>) representa um controle que apresenta um men
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Atributos_globais).
 
-- {{htmlattrdef("autofocus")}}
+- `autofocus`
   - : Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o atributo `autofocus`, que é booleano.
-- {{htmlattrdef("disabled")}}
+- `disabled`
   - : Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a configuração do elemento que o contém, por exemplo o elemento `fieldset`; se não há nenhum elemento que o contém com o atributo `disabled`, então o controle está habilitado.
-- {{htmlattrdef("form")}}
+- `form`
   - : O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e não apenas como descendentes de elementos form.
-- {{htmlattrdef("multiple")}}
+- `multiple`
   - : Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser selecionada de cada vez.
-- {{htmlattrdef("name")}}
+- `name`
   - : O nome do controle
-- {{htmlattrdef("required")}}
+- `required`
   - : Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada.
-- {{htmlattrdef("size")}}
+- `size`
   - : Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0.
 
 > **Note:** **Nota sobre o Firefox:** De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites, e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox.
diff --git a/files/pt-br/web/html/element/textarea/index.md b/files/pt-br/web/html/element/textarea/index.md
index 7051f474a93e11..f148a494e9d859 100644
--- a/files/pt-br/web/html/element/textarea/index.md
+++ b/files/pt-br/web/html/element/textarea/index.md
@@ -24,7 +24,7 @@ O `<textarea>` O elemento também aceita vários atributos comuns para formar `<
 
 Este elemento inclui os atributos globais.
 
-- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
+- `autocapitalize` {{non-standard_inline}}
 
   - : Este é um atributo não padrão suportado pelo WebKit no iOS (portanto, quase todos os navegadores executados no iOS, incluindo Safari, Firefox e Chrome), que controla se e como o valor do texto deve ser automaticamente capitalizado quando é inserido / editado pelo do utilizador. Os valores não preteridos estão disponíveis no iOS 5 e posterior. Os valores possíveis são:
 
@@ -35,7 +35,7 @@ Este elemento inclui os atributos globais.
     - `on`: {{deprecated_inline()}} Descontinuado desde o iOS 5.
     - `off`: {{deprecated_inline()}} Descontinuado desde o iOS 5.
 
-- {{htmlattrdef("autocomplete")}}
+- `autocomplete`
 
   - : Este atributo indica se o valor do controle pode ser preenchido automaticamente pelo navegador. Os valores possíveis são:
 
diff --git a/files/pt-br/web/html/element/tfoot/index.md b/files/pt-br/web/html/element/tfoot/index.md
index bd75808f1e90ed..0c46d64c48b145 100644
--- a/files/pt-br/web/html/element/tfoot/index.md
+++ b/files/pt-br/web/html/element/tfoot/index.md
@@ -61,7 +61,7 @@ O **`<tfoot>`** é um **elemento HTML** que define um conjunto de linhas as quai
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("align")}} {{Deprecated_inline}}
+- `align` {{Deprecated_inline}}
 
   - : Estes atributos especificam como será o alinhamento horizontal de cada conteúdo da célula. Os possíveis valores são:
 
@@ -77,7 +77,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
     >
     > - Para obter o mesmo efeito no CSS3, você pode usar os valores [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) com o valor de {{cssxref("text-align")}} propriedade {{unimplemented_inline}}.
 
-- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+- `bgcolor` {{Non-standard_inline}}
 
   - : Este atributo define uma cor de fundo para cada célula da coluna. Cada um dos 6 dígitos define um código hexadecimal no [sRGB](https://www.w3.org/Graphics/Color/sRGB), prefixado pelo '#'. Um desses nomes de cores predefinidos também podem ser usado:
 
@@ -93,19 +93,19 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
     > **Note:** Não use este atributo, como não é mais padrão ele não foi implementado em algumas versões do Microsoft Internet Explorer: o elemento {{HTMLElement("tfoot")}} pode ser estilizando com [CSS](/pt-BR/docs/Web/CSS). Para conseguir simular efeitos do atributo **bgcolor** use a propriedade {{cssxref("background-color")}} do [CSS](/pt-BR/docs/Web/CSS) , nos elementos {{HTMLElement("td")}} ou {{HTMLElement("th")}}.
 
-- {{htmlattrdef("char")}} {{Deprecated_inline}}
+- `char` {{Deprecated_inline}}
 
   - : O elemento é usado para alinhar as células em uma columa. Valores típicos para isso inclui o periódico (.) quando se alinha valores monetários. Se [`align`](/pt-BR/docs/Web/HTML/Element/tfoot#align) não é definido para `char`, este atributo é ignorado
 
     > **Nota:** Não use esté atributo, ele é obsoleto (e não é mais suportado) desde da última versão padrão. Em vez disso use [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) no CSS3, você pode usar o atributo [`char`](/pt-BR/docs/Web/HTML/Element/tfoot#char) com a propriedade {{cssxref("text-align")}}.
 
-- {{htmlattrdef("charoff")}} {{Deprecated_inline}}
+- `charoff` {{Deprecated_inline}}
 
   - : O atributo é usado para indicar um número de caracteres para compensar os dados da coluna dos caracteres de alinhamento especificados pelo atributo **char**.
 
     > **Nota:** Não use esse atributo o mesmo está obsoleto (e não é mais suportado) na última versão padrão.
 
-- {{htmlattrdef("valign")}} {{Deprecated_inline}}
+- `valign` {{Deprecated_inline}}
 
   - : O atributo específico para o alinhamento do texto dentro de cada linha da célula do cabeçalho de uma tabela. Possíveis valores para esse atributo são:
 
diff --git a/files/pt-br/web/html/element/th/index.md b/files/pt-br/web/html/element/th/index.md
index a9db747415de28..85fe3b9946c03e 100644
--- a/files/pt-br/web/html/element/th/index.md
+++ b/files/pt-br/web/html/element/th/index.md
@@ -56,15 +56,15 @@ O **elemento HTML `<th>`** define uma célula cabeçalho do grupo de células de
 
 Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attributes).
 
-- {{htmlattrdef("abbr")}}
+- `abbr`
   - : Este atributo contém uma breve descrição do conteúdo da célula. Alguns usuários-agentes, como leitores, pode apresentar essa descrição antes do próprio conteúdo.
-- {{htmlattrdef("colspan")}}
+- `colspan`
   - : Este atributo contém um valor inteiro não negativo que indica quantas colunas a célula ocupará. Valor padrão `1`. Valores acima de 1000 são considerados incorretos e serão modificados para o valor padrão `1`.
-- {{htmlattrdef("headers")}}
+- `headers`
   - : Este atributo contém uma lista de palavras separadas por espaço, cada uma correspondendo ao atributo **id** dos elementos {{HTMLElement("th")}} que se aplicam a este elemento.
-- {{htmlattrdef("rowspan")}}
+- `rowspan`
   - : Este atributo contém um valor inteiro não negativo que indica quantas linhas a célula estende. Valor padrão `1`. Se seu valor é definido como `0`, ele se estende até o final da tabela ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, mesmo que implicitamente definido), que a célula pertence. Não é possível colocar valores superiores a 65534.
-- {{htmlattrdef("scope")}}
+- `scope`
 
   - : Este atributo define as células a que o cabeçalho (definido no elemento {{HTMLElement("th")}}) se relaciona.
     Possíveis valores:
@@ -79,7 +79,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
 ### Atributos depreciados
 
-- {{htmlattrdef("align")}}
+- `align`
 
   - : Este atributo especifica como o alinhamento horizontal do conteúdo da célula será tratado.
 
@@ -97,13 +97,13 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
     >
     > - Para alcançar o mesmo efeito que os valor `char`, atribue a {{cssxref("text-align")}} o mesmo valor que você usaria para [`char`](/pt-BR/docs/Web/HTML/Element/th#char). {{unimplemented_inline}} no CSS3.
 
-- {{htmlattrdef("axis")}}
+- `axis`
 
   - : Este atributo contém uma lista de palavras separadas por espaço. Cada palavra é o `id` de um grupo de células às quais este cabeçalho se aplica.
 
     > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente: use o atributo [`scope`](/pt-BR/docs/Web/HTML/Element/th#scope).
 
-- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+- `bgcolor` {{Non-standard_inline}}
 
   - : Esse atributo define a cor de fundo de cada célula na coluna. Ele consiste de 6 digitos hexadecimais definidos pelo [sRGB](https://www.w3.org/Graphics/Color/sRGB) com o prefixo '#. Nesse atributo pode ser usado dezesseis cores predefinidas:
 
@@ -119,25 +119,25 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
     > **Note:** Não use esse atributo como padrão pois não é implementado em algumas versões do Microsoft Internet Explorer: O elemento {{HTMLElement("th")}} deve ser estilizado usando [CSS](/pt-BR/docs/Web/CSS). Para criar um efeito semelhante, use a propriedade {{cssxref("background-color")}} do [CSS](/pt-BR/docs/Web/CSS).
 
-- {{htmlattrdef("char")}}
+- `char`
 
   - : O conteúdo da célula está alinhado a um caractere. Os valores típicos incluem um ponto (.) para alinhar números ou valores monetários. Se [`align`](/pt-BR/docs/Web/HTML/Element/th#align) não está definido no `char`, o atributo é ignorado.
 
     > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente. Para obter o mesmo efeito, você pode especificar o caractere como o primeiro valor da propriedade {{cssxref("text-align")}}, {{unimplemented_inline}} no CSS3.
 
-- {{htmlattrdef("charoff")}}
+- `charoff`
 
   - : Este atributo é usado para mudar os dados da coluna para a direita do caractere especificado pelo atributo **char**. Seu valor especifica o comprimento desse deslocamento.
 
     > **Note:**Não use esse atributo, pois ele está obsoleto no padrão mais recente.
 
-- {{htmlattrdef("height")}} {{Deprecated_inline}}
+- `height` {{Deprecated_inline}}
 
   - : Esse atributo é usado para definir uma altura recomendada da célula.
 
     > **Note:**Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("height")}}.
 
-- {{htmlattrdef("valign")}}
+- `valign`
 
   - : Esse atributo especifica como o texto é alinhado verticalmente na célula.
 
@@ -150,7 +150,7 @@ Esse elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
     > **Note:** Não use esse atributo, pois ele está obsoleto no padrão mais recente: use a propriedade CSS {{cssxref("vertical-align")}}.
 
-- {{htmlattrdef("width")}} {{Deprecated_inline}}
+- `width` {{Deprecated_inline}}
 
   - : Este atributo é usado para definir uma largura de célula recomendada. Espaço adicional pode ser adicionado com as propriedades {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} e {{domxref("HTMLTableElement.cellPadding", "cellpadding")}}, e a largura do elemento {{HTMLElement("col")}} pode criar largura extra. Mas, se a largura de uma coluna for muito estreita para mostrar uma célula específica corretamente, ela será ampliada quando exibida.
 
diff --git a/files/pt-br/web/html/element/time/index.md b/files/pt-br/web/html/element/time/index.md
index 63cb2ae625bc6f..426c4bbf9d7b73 100644
--- a/files/pt-br/web/html/element/time/index.md
+++ b/files/pt-br/web/html/element/time/index.md
@@ -26,9 +26,9 @@ Este elemento é destinado a apresentar datas e horas no dispositivo em um forma
 
 Como todo outro elemento HTML, este elemento suporta os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("datetime")}}
+- `datetime`
   - : Esse atributo indica a hora e a data do elemento e deve ser uma data válida com uma string de tempo opcional. Se o valor não puder ser analisado como uma data com uma string de tempo opcional, o elemento não possui um timestamp associado.
-- {{htmlattrdef("pubdate")}}
+- `pubdate`
   - : (This feature is still being discussed by the WHATWG and the W3C HTML5 Working Group.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor [article](/pt-BR/docs/HTML/Element/article) element). If true, the `time` element must have a corresponding date. Additionally, each `time` element indicating a publication date must be the only `time` element that does so for that document.
 
 ## DOM interface
diff --git a/files/pt-br/web/html/element/track/index.md b/files/pt-br/web/html/element/track/index.md
index bad21b1cc139a1..13c899e8b67eb8 100644
--- a/files/pt-br/web/html/element/track/index.md
+++ b/files/pt-br/web/html/element/track/index.md
@@ -50,9 +50,9 @@ O **elemento HTML `<track>` **é usado como filho dos elementos de mídia{{HTMLE
 
 Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
-- {{htmlattrdef("default")}}
+- `default`
   - : This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one `track` element per media element.
-- {{htmlattrdef("kind")}}
+- `kind`
 
   - : How the text track is meant to be used. If omitted the default kind is `subtitles`. If the attribute is not present, it will use the `subtitles`. If the attribute contains an invalid value, it will use `metadata`. (Versions of Chrome earlier than 52 treated an invalid value as `subtitles`.) The following keywords are allowed:
 
@@ -80,11 +80,11 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
       - Tracks used by scripts. Not visible to the user.
 
-- {{htmlattrdef("label")}}
+- `label`
   - : A user-readable title of the text track which is used by the browser when listing available text tracks.
-- {{htmlattrdef("src")}}
+- `src`
   - : Address of the track (`.vtt` file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the {{HTMLElement("audio")}} or {{HTMLElement("video")}} parent element of the `track` element has a [`crossorigin`](/pt-BR/docs/Web/HTML/CORS_settings_attributes) attribute.
-- {{htmlattrdef("srclang")}}
+- `srclang`
   - : Language of the track text data. It must be a valid [BCP 47](https://r12a.github.io/app-subtags/) language tag. If the `kind` attribute is set to `subtitles`, then `srclang` must be defined.
 
 ## Usage notes
diff --git a/files/pt-br/web/html/global_attributes/index.md b/files/pt-br/web/html/global_attributes/index.md
index 3c96161879cc7f..10c41554038085 100644
--- a/files/pt-br/web/html/global_attributes/index.md
+++ b/files/pt-br/web/html/global_attributes/index.md
@@ -30,7 +30,7 @@ Além dos atributos globais HTML básicos, os seguintes atributos globais també
     - `false`, indica que o elemento não deve ser editável.
 
 - [`contextmenu`](/pt-BR/docs/Web/HTML/Global_attributes/contextmenu)
-  - : É o **[`id`](#attr-id)** de um {{HTMLElement("menu")}} para usar como o menu contextual para este elemento.
+  - : É o **[`id`](#id)** de um {{HTMLElement("menu")}} para usar como o menu contextual para este elemento.
 - [`data-*`](/pt-BR/docs/Web/HTML/Global_attributes/data-*)
   - : Forma uma classe de atributos, denominado de dados personalizados, que permite troca de informações proprietárias entre o [HTML](/pt-BR/docs/Web/HTML) e a sua representação no [DOM](/pt-BR/docs/Glossary/DOM) pode ser usada por scripts. Todos esses dados personalizados estão disponíveis através da interface do elemento {{domxref("HTMLElement")}} em que o atributo está definido. A propriedade {{domxref("HTMLElement.dataset")}} dá acesso a eles.
 - [`dir`](/pt-BR/docs/Web/HTML/Global_attributes/dir)
@@ -74,7 +74,7 @@ Além dos atributos globais HTML básicos, os seguintes atributos globais també
 - [`itemtype`](/pt-BR/docs/Web/HTML/Global_attributes/itemtype) {{experimental_inline}}
   - : Especifica a URL do vocabulário que será usado para definir as propriedades do item na estrutura de dados. [`itemscope`](/pt-BR/docs/Web/HTML/Global_attributes/itemscope) é usado para alterar o escopo na estrutura de dados onde o vocabulário definido por [`itemtype`](/pt-BR/docs/Web/HTML/Global_attributes/itemtype) estará ativo.
 - [`lang`](/pt-BR/docs/Web/HTML/Global_attributes/lang)
-  - : Participa da definição do idioma do elemento, o idioma no qual os elementos não-editáveis estão escritos, ou o idioma no qual elementos editáveis devem ser escritos. A Tag contém um único valor no formato definido no documento da IEFT [Tags para Identificação de Idiomas (BCP47)](http://www.ietf.org/rfc/bcp/bcp47.txt). [**xml:lang**](#attr-xml:lang) tem prioridade mais alta que [`lang`](/pt-BR/docs/Web/HTML/Global_attributes/lang).
+  - : Participa da definição do idioma do elemento, o idioma no qual os elementos não-editáveis estão escritos, ou o idioma no qual elementos editáveis devem ser escritos. A Tag contém um único valor no formato definido no documento da IEFT [Tags para Identificação de Idiomas (BCP47)](http://www.ietf.org/rfc/bcp/bcp47.txt). `xml:lang` tem prioridade mais alta que [`lang`](/pt-BR/docs/Web/HTML/Global_attributes/lang).
 - [`spellcheck`](/pt-BR/docs/Web/HTML/Global_attributes/spellcheck) {{experimental_inline}}
 
   - : É um atributo enumerado que define se o elemento pode ser verificado por errors de ortografia. Pode ter os seguintes valores:
diff --git a/files/pt-br/web/html/index.md b/files/pt-br/web/html/index.md
index 23fbcee48935ae..43afcfc513dcb0 100644
--- a/files/pt-br/web/html/index.md
+++ b/files/pt-br/web/html/index.md
@@ -45,7 +45,7 @@ Nossa [Área de Aprendizado de HTML](/pt-BR/docs/Aprender/HTML) apresenta vário
 ## Tópicos avançados
 
 - [Habilitando Imagem CORS](/pt-BR/docs/Web/HTML/CORS_enabled_image)
-  - : O atributo [`crossorigin`](/pt-BR/docs/Web/HTML/Element/img#attr-crossorigin), em combinação com um cabeçalho [CORS](/pt-BR/docs/Glossary/CORS) adequado, permite definir imagens pelo elemento {{HTMLElement("img")}} para ser carregado de outras fontes em um elemento {{HTMLElement("canvas")}} como se estivessem sendo carregados da fonte atual.
+  - : O atributo [`crossorigin`](/pt-BR/docs/Web/HTML/Element/img#crossorigin), em combinação com um cabeçalho [CORS](/pt-BR/docs/Glossary/CORS) adequado, permite definir imagens pelo elemento {{HTMLElement("img")}} para ser carregado de outras fontes em um elemento {{HTMLElement("canvas")}} como se estivessem sendo carregados da fonte atual.
 - [Configuração de atributos CORS](/pt-BR/docs/Web/HTML/CORS_settings_attributes)
   - : Alguns elementos em HTML que suportam [CORS](/pt-BR/docs/HTTP/Access_control_CORS), como por exemplo o {{HTMLElement("img")}} ou {{HTMLElement("video")}}, têm o atributo `crossorigin` (a propriedade `crossOrigin`), que permite configurar as requisições CORS para os dados recebidos pelo elemento.
 - [Gerenciamento de foco em HTML](/pt-BR/docs/Web/HTML/Focus_management_in_HTML)
diff --git a/files/pt-br/web/http/headers/referrer-policy/index.md b/files/pt-br/web/http/headers/referrer-policy/index.md
index c69f621d67f442..00d1fafa6899fa 100644
--- a/files/pt-br/web/http/headers/referrer-policy/index.md
+++ b/files/pt-br/web/http/headers/referrer-policy/index.md
@@ -64,7 +64,7 @@ Referrer-Policy: unsafe-url
 
 ## Integração com HTML
 
-Você também pode colocar política de referência dentro do HTML. Por exemplo, você pode colocar uma política de referência para o documento inteiro com um elemento {{HTMLElement("meta")}} com um [nome](/pt-BR/docs/Web/HTML/Element/meta#attr-name) de `referrer`:
+Você também pode colocar política de referência dentro do HTML. Por exemplo, você pode colocar uma política de referência para o documento inteiro com um elemento {{HTMLElement("meta")}} com um [nome](/pt-BR/docs/Web/HTML/Element/meta#name) de `referrer`:
 
 ```html
 <meta name="referrer" content="origin" />

From 22a7c8b2ec05e515a683597b8a7c6958984b83d4 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Mon, 2 Oct 2023 08:18:34 +0800
Subject: [PATCH 245/268] chore(pt-br): replace old-style specification tables
 part1 (#15989)

---
 .../animationevent/animationevent/index.md    |  2 +-
 .../api/customelementregistry/define/index.md |  4 +-
 .../geolocation/getcurrentposition/index.md   |  4 +-
 .../index.md                                  |  4 +-
 .../web/api/window/load_event/index.md        |  4 +-
 .../global_objects/date/toutcstring/index.md  |  4 +-
 .../reference/global_objects/string/index.md  |  7 +-
 .../web/api/htmlshadowelement/index.md        |  4 +-
 .../web/api/navigatorid/platform/index.md     |  4 +-
 .../web/api/navigatorid/useragent/index.md    |  4 +-
 .../orphaned/web/api/navigatoronline/index.md |  5 +-
 .../web/api/navigatoronline/online/index.md   |  4 +-
 .../web/api/navigatorplugins/index.md         |  4 +-
 .../api/navigatorplugins/javaenabled/index.md |  4 +-
 files/pt-br/web/api/file/index.md             |  4 +-
 .../api/htmlcanvaselement/todataurl/index.md  |  6 +-
 files/pt-br/web/css/--_star_/index.md         |  4 +-
 files/pt-br/web/css/@charset/index.md         |  4 +-
 files/pt-br/web/css/@font-face/index.md       |  6 +-
 files/pt-br/web/css/@import/index.md          |  6 +-
 .../web/css/@media/display-mode/index.md      |  4 +-
 .../css/@media/prefers-color-scheme/index.md  |  4 +-
 files/pt-br/web/css/@page/index.md            |  5 +-
 files/pt-br/web/css/_colon_active/index.md    |  7 +-
 files/pt-br/web/css/_colon_blank/index.md     |  4 +-
 files/pt-br/web/css/_colon_checked/index.md   |  8 +--
 .../pt-br/web/css/_colon_first-child/index.md |  5 +-
 .../web/css/_colon_first-of-type/index.md     |  5 +-
 .../web/css/_colon_focus-within/index.md      |  4 +-
 files/pt-br/web/css/_colon_hover/index.md     |  6 +-
 files/pt-br/web/css/_colon_invalid/index.md   |  6 +-
 .../pt-br/web/css/_colon_last-child/index.md  |  5 +-
 .../web/css/_colon_last-of-type/index.md      |  5 +-
 files/pt-br/web/css/_colon_link/index.md      |  7 +-
 files/pt-br/web/css/_colon_not/index.md       |  5 +-
 files/pt-br/web/css/_colon_nth-child/index.md |  5 +-
 .../web/css/_colon_nth-last-child/index.md    |  5 +-
 .../pt-br/web/css/_colon_nth-of-type/index.md |  5 +-
 .../pt-br/web/css/_colon_only-child/index.md  |  5 +-
 files/pt-br/web/css/_colon_optional/index.md  |  7 +-
 .../pt-br/web/css/_colon_read-write/index.md  |  6 +-
 files/pt-br/web/css/_colon_required/index.md  |  7 +-
 files/pt-br/web/css/_colon_target/index.md    |  6 +-
 files/pt-br/web/css/_colon_valid/index.md     |  6 +-
 files/pt-br/web/css/_colon_visited/index.md   |  8 +--
 .../pt-br/web/css/_doublecolon_after/index.md |  8 +--
 .../web/css/_doublecolon_backdrop/index.md    |  4 +-
 .../css/_doublecolon_first-letter/index.md    |  8 +--
 .../web/css/_doublecolon_first-line/index.md  |  8 +--
 .../web/css/_doublecolon_selection/index.md   |  6 +-
 files/pt-br/web/css/actual_value/index.md     |  4 +-
 files/pt-br/web/css/align-items/index.md      |  7 +-
 files/pt-br/web/css/align-self/index.md       |  7 +-
 files/pt-br/web/css/attr/index.md             |  5 +-
 .../web/css/attribute_selectors/index.md      |  6 +-
 .../web/css/backface-visibility/index.md      |  4 +-
 .../web/css/background-attachment/index.md    |  6 +-
 .../web/css/background-blend-mode/index.md    |  4 +-
 files/pt-br/web/css/background-clip/index.md  |  4 +-
 files/pt-br/web/css/background-color/index.md |  6 +-
 .../pt-br/web/css/background-origin/index.md  |  6 +-
 files/pt-br/web/css/background/index.md       |  6 +-
 files/pt-br/web/css/box-sizing/index.md       |  4 +-
 files/pt-br/web/css/calc/index.md             |  4 +-
 files/pt-br/web/css/class_selectors/index.md  |  7 +-
 files/pt-br/web/css/clear/index.md            |  8 +--
 files/pt-br/web/css/computed_value/index.md   |  4 +-
 files/pt-br/web/css/contain/index.md          |  4 +-
 files/pt-br/web/css/content/index.md          |  5 +-
 .../web/css/css_basic_user_interface/index.md |  6 +-
 files/pt-br/web/css/css_box_model/index.md    |  6 +-
 .../using_css_counters/index.md               |  4 +-
 files/pt-br/web/css/css_display/index.md      |  8 +--
 .../web/css/css_flexible_box_layout/index.md  |  4 +-
 files/pt-br/web/css/css_grid_layout/index.md  | 66 +++++--------------
 .../web/css/css_positioned_layout/index.md    |  5 +-
 files/pt-br/web/css/css_selectors/index.md    |  7 +-
 .../using_css_transitions/index.md            |  4 +-
 files/pt-br/web/css/css_types/index.md        |  4 +-
 .../web/css/descendant_combinator/index.md    |  7 +-
 files/pt-br/web/css/element/index.md          |  4 +-
 files/pt-br/web/css/env/index.md              |  4 +-
 files/pt-br/web/css/flex-flow/index.md        |  4 +-
 files/pt-br/web/css/float/index.md            |  7 +-
 .../web/css/font-feature-settings/index.md    |  4 +-
 .../web/css/font-variation-settings/index.md  |  4 +-
 files/pt-br/web/css/font-weight/index.md      |  7 +-
 .../css/general_sibling_combinator/index.md   |  5 +-
 files/pt-br/web/css/grid-auto-flow/index.md   |  4 +-
 .../web/css/grid-template-columns/index.md    |  4 +-
 files/pt-br/web/css/grid/index.md             |  4 +-
 files/pt-br/web/css/height/index.md           |  7 +-
 files/pt-br/web/css/hyphens/index.md          |  4 +-
 files/pt-br/web/css/id_selectors/index.md     |  7 +-
 files/pt-br/web/css/image/index.md            |  5 +-
 files/pt-br/web/css/initial/index.md          |  5 +-
 files/pt-br/web/css/inline-size/index.md      |  4 +-
 files/pt-br/web/css/isolation/index.md        |  4 +-
 files/pt-br/web/css/line-break/index.md       |  4 +-
 files/pt-br/web/css/margin/index.md           |  7 +-
 100 files changed, 114 insertions(+), 468 deletions(-)

diff --git a/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md
index c254416a0e1384..1437cffb870bbe 100644
--- a/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md
+++ b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.md
@@ -42,7 +42,7 @@ animationEvent.initAnimationEvent(typeArg, canBubbleArg, cancelableArg, animatio
 
 ## Especificações
 
-_Esse método é não-padrão e não é parte de qualquer especificação, no entanto ele esteve presente nos primeiros rascunhos de {{SpecName("CSS3 Animations")}}._
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/conflicting/web/api/customelementregistry/define/index.md b/files/pt-br/conflicting/web/api/customelementregistry/define/index.md
index dc98e55883d440..0d87c2042c16df 100644
--- a/files/pt-br/conflicting/web/api/customelementregistry/define/index.md
+++ b/files/pt-br/conflicting/web/api/customelementregistry/define/index.md
@@ -49,9 +49,7 @@ mytag.textContent = "I am a my-tag element.";
 
 ## Especificações
 
-| Especificação                            | Estado                               | Comentário        |
-| ---------------------------------------- | ------------------------------------ | ----------------- |
-| {{SpecName('Custom Elements')}} | {{Spec2('Custom Elements')}} | definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md b/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md
index 3050b42efcf0eb..e6b3a5de2a4e10 100644
--- a/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md
+++ b/files/pt-br/conflicting/web/api/geolocation/getcurrentposition/index.md
@@ -22,9 +22,7 @@ A interface `PositionOptions` não implementa ou herda nenhum método.
 
 ## Especificações
 
-| Specification                                                                            | Status                           | Comment            |
-| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
-| {{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}} | {{Spec2('Geolocation')}} | Initial definition |
+{{Specifications}}
 
 ## Navegadores compatíveis
 
diff --git a/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md b/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md
index 266f2a0ba63b01..195152d25075a5 100644
--- a/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md
+++ b/files/pt-br/conflicting/web/api/htmlslotelement_ded38e17cacb3809f7af4fec22adcc56/index.md
@@ -22,9 +22,7 @@ myContentObject.select = "h1 .error";
 
 ## Especificações
 
-| Especificações                                                                   | Status                           | Commentário |
-| -------------------------------------------------------------------------------- | -------------------------------- | ----------- |
-| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} |             |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/conflicting/web/api/window/load_event/index.md b/files/pt-br/conflicting/web/api/window/load_event/index.md
index b9f855af959c0e..554acc6a6758dd 100644
--- a/files/pt-br/conflicting/web/api/window/load_event/index.md
+++ b/files/pt-br/conflicting/web/api/window/load_event/index.md
@@ -50,9 +50,7 @@ Existe também os [Gecko-Specific DOM Events](/pt-BR/docs/Web/Events), como o `D
 
 ## Especificações
 
-| Especificação                                                                                    | Status                           | Comentário        |
-| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- |
-| {{SpecName("HTML WHATWG", "webappapis.html#handler-onload", "onload")}} | {{Spec2("HTML WHATWG")}} | Definição inicial |
+{{Specifications}}
 
 ## Veja também
 
diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md
index a7fc110a25c2ca..073a87b7c22e6a 100644
--- a/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md
+++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/date/toutcstring/index.md
@@ -34,9 +34,7 @@ console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
 
 ## Especificações
 
-| Especificação                                                                                                        |
-| -------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}} |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md
index 2f38f30cf29c7a..9736f1cb674248 100644
--- a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md
+++ b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.md
@@ -11,12 +11,7 @@ Passando [`null`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null) para
 
 ## Especificações
 
-| Specification                                                                                | Status                       | Comment                                                        |
-| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------- |
-| {{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}                     | {{Spec2('WebIDL')}}     | Reformulação da definição para remover alguns casos estranhos. |
-| {{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}             | {{Spec2('DOM3 Core')}} | Nenhuma mudança da {{SpecName('DOM2 Core')}}            |
-| {{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}         | {{Spec2('DOM2 Core')}} | Nenhuma mudança da {{SpecName('DOM1')}}                |
-| {{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}} | {{Spec2('DOM1')}}     | Definição inicial.                                             |
+{{Specifications}}
 
 ## Veja também
 
diff --git a/files/pt-br/orphaned/web/api/htmlshadowelement/index.md b/files/pt-br/orphaned/web/api/htmlshadowelement/index.md
index 8eb64a0fb9054b..b609b3832415d3 100644
--- a/files/pt-br/orphaned/web/api/htmlshadowelement/index.md
+++ b/files/pt-br/orphaned/web/api/htmlshadowelement/index.md
@@ -20,9 +20,7 @@ _Esta interface herda os métodos do {{domxref("HTMLElement")}}._
 
 ## Especificações
 
-| Especificação                                                                    | Status                           | Comentário |
-| -------------------------------------------------------------------------------- | -------------------------------- | ---------- |
-| {{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}} | {{Spec2('Shadow DOM')}} |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/orphaned/web/api/navigatorid/platform/index.md b/files/pt-br/orphaned/web/api/navigatorid/platform/index.md
index 38ccbec5066fa7..407db5bb34cffa 100644
--- a/files/pt-br/orphaned/web/api/navigatorid/platform/index.md
+++ b/files/pt-br/orphaned/web/api/navigatorid/platform/index.md
@@ -33,9 +33,7 @@ No Firefox, a preferência `general.platform.override` pode ser usada para sobre
 
 ## Especificações
 
-| Especificação                                                                                            | Status                           | Comentário         |
-| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
-| {{SpecName('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade
 
diff --git a/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md b/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md
index 84b1897aa31b5b..5b33a0d8a019d6 100644
--- a/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md
+++ b/files/pt-br/orphaned/web/api/navigatorid/useragent/index.md
@@ -45,9 +45,7 @@ alert(window.navigator.userAgent)
 
 ## Especificações
 
-| Especificação                                                                                                | Status                           | Comentário         |
-| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
-| {{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade
 
diff --git a/files/pt-br/orphaned/web/api/navigatoronline/index.md b/files/pt-br/orphaned/web/api/navigatoronline/index.md
index 13989c4003f08a..e88918704561e1 100644
--- a/files/pt-br/orphaned/web/api/navigatoronline/index.md
+++ b/files/pt-br/orphaned/web/api/navigatoronline/index.md
@@ -22,10 +22,7 @@ _A interface **`NavigatorOnLine`** não implementa nem herda nenhum método._
 
 ## Especificações
 
-| Especificação                                                                            | Status                           | Comentário                                                                      |
-| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde a ultima atualização, do {{SpecName('HTML5 W3C')}} |
-| {{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}     | {{Spec2('HTML5 W3C')}}     | Snapshot do {{SpecName('HTML WHATWG')}} com sua especificação inicial  |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/orphaned/web/api/navigatoronline/online/index.md b/files/pt-br/orphaned/web/api/navigatoronline/online/index.md
index 19f27eedab00d3..b23646b31de7bc 100644
--- a/files/pt-br/orphaned/web/api/navigatoronline/online/index.md
+++ b/files/pt-br/orphaned/web/api/navigatoronline/online/index.md
@@ -51,9 +51,7 @@ window.addEventListener('online', function(e) { console.log('online'); });
 
 ## Especificações
 
-| Especificações                                                                                                   | Status                           | Comentário        |
-| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- |
-| {{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}} | {{Spec2("HTML WHATWG")}} | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/orphaned/web/api/navigatorplugins/index.md b/files/pt-br/orphaned/web/api/navigatorplugins/index.md
index 0c92e5ad3ca3a0..15ff30f334871f 100644
--- a/files/pt-br/orphaned/web/api/navigatorplugins/index.md
+++ b/files/pt-br/orphaned/web/api/navigatorplugins/index.md
@@ -23,9 +23,7 @@ A interface NavigatorPlugins* `NavigatorPlugins`* não herda nenhum método.
 
 ## Especificações
 
-| Especificação                                                                                | Estado                           | Comentário         |
-| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
-| {{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. |
+{{Specifications}}
 
 ## Navegador compativeis
 
diff --git a/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md b/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md
index 44af7d14ab71dc..3ca840a18fc5e5 100644
--- a/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md
+++ b/files/pt-br/orphaned/web/api/navigatorplugins/javaenabled/index.md
@@ -27,9 +27,7 @@ O valor de retorno para este método indica se a preferência que controla o Jav
 
 ## Especificações
 
-| Esécificações                                                                                                            | Estado                           | Comentário         |
-| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
-| {{SpecName('HTML WHATWG', '#dom-navigator-javaenabled', 'NavigatorPlugins.javaEnabled')}} | {{Spec2('HTML WHATWG')}} | Definição inicial. |
+{{Specifications}}
 
 ## Navegadores compativeis
 
diff --git a/files/pt-br/web/api/file/index.md b/files/pt-br/web/api/file/index.md
index 847ffe8c8b2c13..7534effbeba8b8 100644
--- a/files/pt-br/web/api/file/index.md
+++ b/files/pt-br/web/api/file/index.md
@@ -43,9 +43,7 @@ A interface `File` herda as propriedades da interface {{domxref("Blob")}}.
 
 ## Especificações
 
-| Especificação            | Status                | Comentários        |
-| ------------------------ | --------------------- | ------------------ |
-| {{SpecName('File API')}} | {{Spec2('File API')}} | Definição Inicial. |
+{{Specifications}}
 
 ## Compatibilidade com os Navegadores
 
diff --git a/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md
index fb22b6b172aa28..b1f0580dc2cd0c 100644
--- a/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md
+++ b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md
@@ -120,11 +120,7 @@ function removeColors() {
 
 ## Especificações
 
-| Specification                                                                                     | Status                   | Comment                                                                        |
-| ------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------ |
-| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML WHATWG')}} | No change since the latest snapshot, {{SpecName('HTML5 W3C')}}                 |
-| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}   | {{Spec2('HTML5.1')}}     |                                                                                |
-| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML5 W3C')}}   | Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/--_star_/index.md b/files/pt-br/web/css/--_star_/index.md
index 871d06ff64dfa2..35c7e6bc8108e7 100644
--- a/files/pt-br/web/css/--_star_/index.md
+++ b/files/pt-br/web/css/--_star_/index.md
@@ -78,9 +78,7 @@ Propriedades personalizadas participam na cascata: cada uma delas pode aparecer
 
 ## Especificações
 
-| Specification                                                | Status                      | Comment            |
-| ------------------------------------------------------------ | --------------------------- | ------------------ |
-| {{SpecName("CSS3 Variables", "#defining-variables", "--*")}} | {{Spec2("CSS3 Variables")}} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/@charset/index.md b/files/pt-br/web/css/@charset/index.md
index 893b6c858986f2..b98256bbeeff29 100644
--- a/files/pt-br/web/css/@charset/index.md
+++ b/files/pt-br/web/css/@charset/index.md
@@ -41,9 +41,7 @@ onde :
 
 ## Especificações
 
-| Especificação                                            | Status                | Comentário |
-| -------------------------------------------------------- | --------------------- | ---------- |
-| {{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }} | {{ Spec2('CSS2.1') }} |            |
+{{Specifications}}
 
 ## Compatibilidade de navegadores
 
diff --git a/files/pt-br/web/css/@font-face/index.md b/files/pt-br/web/css/@font-face/index.md
index d04768ea08a2c3..f6e08c3a6b9126 100644
--- a/files/pt-br/web/css/@font-face/index.md
+++ b/files/pt-br/web/css/@font-face/index.md
@@ -124,11 +124,7 @@ Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o u
 
 ## Especificações
 
-| Especificação                                               | Status                  | Comentário                                                           |
-| ----------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------- |
-| {{SpecName('WOFF2.0', '', 'WOFF2 font format')}}            | {{Spec2('WOFF2.0')}}    | Especificação de formato de fonte com novo algoritmo de compactação. |
-| {{SpecName('WOFF1.0', '', 'WOFF font format')}}             | {{Spec2('WOFF1.0')}}    | Especificação de formato                                             |
-| {{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} | {{Spec2('CSS3 Fonts')}} | Definição Inicial                                                    |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/@import/index.md b/files/pt-br/web/css/@import/index.md
index a3ab42d0116bc9..55e9e9c5736820 100644
--- a/files/pt-br/web/css/@import/index.md
+++ b/files/pt-br/web/css/@import/index.md
@@ -42,11 +42,7 @@ where:
 
 ## Especificações
 
-| Especificação                                               | Situação                        | Comentário                                                                                                                                                        |
-| ----------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Media Queries', '#media0', '@import')}}    | {{Spec2('CSS3 Media Queries')}} | Estendeu a sintaxe para apoiar qualquer consulta de mídia e não apenas simples [tipos de mídia (media types)](/pt-BR/docs/Web/CSS/@media#Media_types).            |
-| {{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}} | {{Spec2('CSS2.1')}}             | Adicionado suporte para {{cssxref("&lt;string&gt;")}} para denotar a URL de uma folha de estilo, e obrigatoriedade da regra `@import` no início do documento CSS. |
-| {{SpecName('CSS1', '#the-cascade', '@import')}}             | {{Spec2('CSS1')}}               | Definição inicial                                                                                                                                                 |
+{{Specifications}}
 
 ## Browser compatibilidade
 
diff --git a/files/pt-br/web/css/@media/display-mode/index.md b/files/pt-br/web/css/@media/display-mode/index.md
index 553968f78d2c00..2bbdbc7905a883 100644
--- a/files/pt-br/web/css/@media/display-mode/index.md
+++ b/files/pt-br/web/css/@media/display-mode/index.md
@@ -33,9 +33,7 @@ O recurso `display-mode` é especificado como um valor de uma palavra chave esco
 
 ## Especificações
 
-| Specification                                                               | Status                | Comment            |
-| --------------------------------------------------------------------------- | --------------------- | ------------------ |
-| {{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}} | {{Spec2('Manifest')}} | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/@media/prefers-color-scheme/index.md b/files/pt-br/web/css/@media/prefers-color-scheme/index.md
index 9ec6c10254302a..5917a1fd771943 100644
--- a/files/pt-br/web/css/@media/prefers-color-scheme/index.md
+++ b/files/pt-br/web/css/@media/prefers-color-scheme/index.md
@@ -83,9 +83,7 @@ Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temático
 
 ## Especificações
 
-| Especificação                                                                                     | Estado                          | Comentários        |
-| ------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------ |
-| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}} | {{Spec2('CSS5 Media Queries')}} | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/@page/index.md b/files/pt-br/web/css/@page/index.md
index bf067ae4019d5c..ad59d7b272c2ea 100644
--- a/files/pt-br/web/css/@page/index.md
+++ b/files/pt-br/web/css/@page/index.md
@@ -31,10 +31,7 @@ Podemos fazer referência a vários [pseudo-classes](/pt-BR/docs/CSS/Pseudo-clas
 
 ## Especificações
 
-| Specification                                               | Status                        | Comment                                                                                          |
-| ----------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------ |
-| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}  | {{Spec2('CSS3 Paged Media')}} | Sem mudanças para {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a `@page`. |
-| {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}} | {{Spec2('CSS2.1')}}           |                                                                                                  |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_active/index.md b/files/pt-br/web/css/_colon_active/index.md
index a6bbcddf992803..75422d0d3b2472 100644
--- a/files/pt-br/web/css/_colon_active/index.md
+++ b/files/pt-br/web/css/_colon_active/index.md
@@ -47,12 +47,7 @@ a:active {
 
 ## Especificações
 
-| Especificação                                                             | Status                      | Comentário         |
-| ------------------------------------------------------------------------- | --------------------------- | ------------------ |
-| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}               | {{Spec2('CSS4 Selectors')}} | Nenhuma mudança.   |
-| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}          | {{Spec2('CSS3 Selectors')}} | Nenhuma mudança.   |
-| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}}         | Nenhuma mudança.   |
-| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}                 | {{Spec2('CSS1')}}           | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_blank/index.md b/files/pt-br/web/css/_colon_blank/index.md
index c9ac4dcf005d69..d6e5486e72cc30 100644
--- a/files/pt-br/web/css/_colon_blank/index.md
+++ b/files/pt-br/web/css/_colon_blank/index.md
@@ -17,9 +17,7 @@ A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/CSS)
 
 ## Especificações
 
-| Specification                                             | Status                      | Comment            |
-| --------------------------------------------------------- | --------------------------- | ------------------ |
-| {{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}} | {{Spec2("CSS4 Selectors")}} | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_checked/index.md b/files/pt-br/web/css/_colon_checked/index.md
index 996e32682e28db..9b67f7a28b5b09 100644
--- a/files/pt-br/web/css/_colon_checked/index.md
+++ b/files/pt-br/web/css/_colon_checked/index.md
@@ -156,13 +156,7 @@ Você também pode usar a pseudo-classe `:checked`aplicada a um radioboxe escond
 
 ## Especificações
 
-| Especificação                                                  | Estatus                       | Comentários                                          |
-| -------------------------------------------------------------- | ----------------------------- | ---------------------------------------------------- |
-| {{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }} | {{ Spec2('HTML WHATWG') }}    | Sem mudanças.                                        |
-| {{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}   | {{ Spec2('HTML5 W3C') }}      | Define a semântica sobre o HTML.                     |
-| {{ SpecName('CSS4 Selectors', '#checked', ':checked') }}       | {{ Spec2('CSS4 Selectors') }} | Sem mudanças.                                        |
-| {{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }} | {{ Spec2('CSS3 Basic UI') }}  | Link para Seletores nível 3                          |
-| {{ SpecName('CSS3 Selectors', '#checked', ':checked') }}       | {{ Spec2('CSS3 Selectors') }} | Define a pseudo-classe, mas não associação semântica |
+{{Specifications}}
 
 ## Compatibilidade de navegadores
 
diff --git a/files/pt-br/web/css/_colon_first-child/index.md b/files/pt-br/web/css/_colon_first-child/index.md
index a22eaa38e4a340..acffd7b1a9b127 100644
--- a/files/pt-br/web/css/_colon_first-child/index.md
+++ b/files/pt-br/web/css/_colon_first-child/index.md
@@ -69,10 +69,7 @@ li:first-child {
 
 ## Especificações
 
-| Especificação                                                           | Status                        | Comentário         |
-| ----------------------------------------------------------------------- | ----------------------------- | ------------------ |
-| {{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança.       |
-| {{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. |
+{{Specifications}}
 
 ## Browsers compatíveis
 
diff --git a/files/pt-br/web/css/_colon_first-of-type/index.md b/files/pt-br/web/css/_colon_first-of-type/index.md
index 383e29fcffe154..d94b37a3bdf0ab 100644
--- a/files/pt-br/web/css/_colon_first-of-type/index.md
+++ b/files/pt-br/web/css/_colon_first-of-type/index.md
@@ -80,10 +80,7 @@ article :first-of-type {
 
 ## Especificações
 
-| Specification                                                             | Status                      | Comment                                                           |
-| ------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------- |
-| {{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS4 Selectors')}} | Os elementos correspondentes não são necessários para ter um pai. |
-| {{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial.                                                |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_focus-within/index.md b/files/pt-br/web/css/_colon_focus-within/index.md
index b94dcf0859ef5b..b29facfb1cc9f7 100644
--- a/files/pt-br/web/css/_colon_focus-within/index.md
+++ b/files/pt-br/web/css/_colon_focus-within/index.md
@@ -63,9 +63,7 @@ input {
 
 ## Especificações
 
-| Especificação                                                               | Status                      | Comentário          |
-| --------------------------------------------------------------------------- | --------------------------- | ------------------- |
-| {{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}} | {{Spec2("CSS4 Selectors")}} | Initial definition. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_hover/index.md b/files/pt-br/web/css/_colon_hover/index.md
index aeacfa96605e90..b8ef225599f203 100644
--- a/files/pt-br/web/css/_colon_hover/index.md
+++ b/files/pt-br/web/css/_colon_hover/index.md
@@ -83,11 +83,7 @@ Você pode usar a pseudo-classe `:hover` para construir uma galeria de imagem, e
 
 ## Especificações
 
-| Especificação                                                                           | Status                        | Comentário                                    |
-| --------------------------------------------------------------------------------------- | ----------------------------- | --------------------------------------------- |
-| {{ SpecName('CSS4 Selectors', '#hover', ':hover') }}                                    | {{ Spec2('CSS4 Selectors') }} | Pode ser aplicado a qualquer pseudo-elemento. |
-| {{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }} | {{ Spec2('CSS3 Selectors') }} | Sem mudança significativa.                    |
-| {{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}              | {{ Spec2('CSS2.1') }}         | definição inicial.                            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_invalid/index.md b/files/pt-br/web/css/_colon_invalid/index.md
index 376668585435a8..871caf87520a58 100644
--- a/files/pt-br/web/css/_colon_invalid/index.md
+++ b/files/pt-br/web/css/_colon_invalid/index.md
@@ -98,11 +98,7 @@ Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completam
 
 ## Especificações
 
-| Especificação                                                   | Status                      | Comentário                                            |
-| --------------------------------------------------------------- | --------------------------- | ----------------------------------------------------- |
-| {{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}    | {{Spec2('HTML WHATWG')}}    | Nenhuma alteração.                                    |
-| {{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}      | {{Spec2('HTML5 W3C')}}      | Define a semântica do HTML e validação de restrições. |
-| {{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}} | {{Spec2('CSS4 Selectors')}} | Definição inicial.                                    |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_last-child/index.md b/files/pt-br/web/css/_colon_last-child/index.md
index 6946db7b4351a5..5eb860001640c6 100644
--- a/files/pt-br/web/css/_colon_last-child/index.md
+++ b/files/pt-br/web/css/_colon_last-child/index.md
@@ -39,10 +39,7 @@ li:last-child {
 
 ## Especificações
 
-| Especificação                                                  | Status                        | Comentário         |
-| -------------------------------------------------------------- | ----------------------------- | ------------------ |
-| {{ SpecName('CSS4 Selectors', '#last-child', ':last-child') }} | {{ Spec2('CSS4 Selectors') }} | Sem mudança.       |
-| {{ SpecName('CSS3 Selectors', '#last-child', ':last-child') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade de navegadores
 
diff --git a/files/pt-br/web/css/_colon_last-of-type/index.md b/files/pt-br/web/css/_colon_last-of-type/index.md
index 10cc315968f635..e217adbc6c9182 100644
--- a/files/pt-br/web/css/_colon_last-of-type/index.md
+++ b/files/pt-br/web/css/_colon_last-of-type/index.md
@@ -49,10 +49,7 @@ p em:last-of-type {
 
 ## Especificações
 
-| Specification                                                           | Status                      | Comment            |
-| ----------------------------------------------------------------------- | --------------------------- | ------------------ |
-| {{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS4 Selectors')}} | No change          |
-| {{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS3 Selectors')}} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_link/index.md b/files/pt-br/web/css/_colon_link/index.md
index b5aa0dbad9fe3f..99778a8cd7744c 100644
--- a/files/pt-br/web/css/_colon_link/index.md
+++ b/files/pt-br/web/css/_colon_link/index.md
@@ -22,12 +22,7 @@ a:link {
 
 ## Especificações
 
-| Especificação                                                          | Status                        | Comentário                                       |
-| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------ |
-| {{ SpecName('CSS4 Selectors', '#link', ':link') }}                     | {{ Spec2('CSS4 Selectors') }} | Nenhuma mudança.                                 |
-| {{ SpecName('CSS3 Selectors', '#link', ':link') }}                     | {{ Spec2('CSS3 Selectors') }} | Nenhuma mudança.                                 |
-| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }}         | Uso estrito ao elemento {{ HTMLElement("a") }} . |
-| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}              | {{ Spec2('CSS1') }}           | Definição Inicial.                               |
+{{Specifications}}
 
 ## Compatibilidade do navegador
 
diff --git a/files/pt-br/web/css/_colon_not/index.md b/files/pt-br/web/css/_colon_not/index.md
index 8fe405c6731724..32827c30438d53 100644
--- a/files/pt-br/web/css/_colon_not/index.md
+++ b/files/pt-br/web/css/_colon_not/index.md
@@ -46,10 +46,7 @@ Se obtém resultados como este:
 
 ## Especificações
 
-| Especificação                                           | Status                        | Comentário                                                   |
-| ------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------ |
-| {{ SpecName('CSS4 Selectors', '#negation', ':not()') }} | {{ Spec2('CSS4 Selectors') }} | Extende seus argumentos para permitir seletores não-simples. |
-| {{ SpecName('CSS3 Selectors', '#negation', ':not()') }} | {{ Spec2('CSS3 Selectors') }} | Definição inicial.                                           |
+{{Specifications}}
 
 ## Compatibilidade em Navegadores
 
diff --git a/files/pt-br/web/css/_colon_nth-child/index.md b/files/pt-br/web/css/_colon_nth-child/index.md
index eeebac1a825aed..741b954e307eb2 100644
--- a/files/pt-br/web/css/_colon_nth-child/index.md
+++ b/files/pt-br/web/css/_colon_nth-child/index.md
@@ -154,10 +154,7 @@ div em {
 
 ## Especificações
 
-| Especificação                                                     | Status                      | Comentário                                                                                                                    |
-| ----------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS4 Selectors')}} | Adiciona a sintaxe `of <selector>` e especifica que os elementos correspondentes ao seletor não precisam ter um elemento pai. |
-| {{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial.                                                                                                            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_nth-last-child/index.md b/files/pt-br/web/css/_colon_nth-last-child/index.md
index 4742fd5a3e0f55..ccd8c3c8734009 100644
--- a/files/pt-br/web/css/_colon_nth-last-child/index.md
+++ b/files/pt-br/web/css/_colon_nth-last-child/index.md
@@ -104,10 +104,7 @@ tr:nth-last-child(-n + 3) {
 
 ## Especificações
 
-| Especificação                                                               | Status                      | Comentário                                                  |
-| --------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------- |
-| {{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS4 Selectors')}} | Elementos correspondentes não precisam ter um elemento-pai. |
-| {{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial.                                          |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_nth-of-type/index.md b/files/pt-br/web/css/_colon_nth-of-type/index.md
index b58f22d3154932..6adb944739ad5c 100644
--- a/files/pt-br/web/css/_colon_nth-of-type/index.md
+++ b/files/pt-br/web/css/_colon_nth-of-type/index.md
@@ -67,10 +67,7 @@ p:nth-of-type(1) {
 
 ## Especificações
 
-| Especificação                                                         | Sitação                     | Comentário                                                       |
-| --------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------- |
-| {{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS4 Selectors')}} | Não é necessário que os elementos correspondentes tenham um pai. |
-| {{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial.                                               |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_only-child/index.md b/files/pt-br/web/css/_colon_only-child/index.md
index 18ec5a334a77ab..f9381ddff20157 100644
--- a/files/pt-br/web/css/_colon_only-child/index.md
+++ b/files/pt-br/web/css/_colon_only-child/index.md
@@ -94,10 +94,7 @@ li:only-child {
 
 ## Especificações
 
-| Especificação                                                       | Status                      | Comentário                                                             |
-| ------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------------- |
-| {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS4 Selectors')}} | Não é necessário que os elementos selecionados tenham um elemento-pai. |
-| {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS3 Selectors')}} | Definição inicial.                                                     |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_optional/index.md b/files/pt-br/web/css/_colon_optional/index.md
index 1b71a7537f63a7..026f783f04632a 100644
--- a/files/pt-br/web/css/_colon_optional/index.md
+++ b/files/pt-br/web/css/_colon_optional/index.md
@@ -37,12 +37,7 @@ Entradas requeridas devem ser indicadas visualmente, utilizando um tratamento qu
 
 ## Especificações
 
-| Specification                                                          | Status                        | Comment                                                 |
-| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------- |
-| {{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}       | {{ Spec2('HTML WHATWG') }}    | Sem mudança.                                            |
-| {{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}         | {{ Spec2('HTML5 W3C') }}      | Define a semântica da validação e da restrição do HTML. |
-| {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}          | {{ Spec2('CSS4 Selectors') }} | Sem mudança.                                            |
-| {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }} | {{ Spec2('CSS3 Basic UI') }}  | Define a pseudo-classe, mas não a semântica associada.  |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_read-write/index.md b/files/pt-br/web/css/_colon_read-write/index.md
index e1d31776474b20..2f239a1f4bae06 100644
--- a/files/pt-br/web/css/_colon_read-write/index.md
+++ b/files/pt-br/web/css/_colon_read-write/index.md
@@ -82,11 +82,7 @@ p:read-write {
 
 ## Especificações
 
-| Especificação                                                        | Status                        | Comentário                                                     |
-| -------------------------------------------------------------------- | ----------------------------- | -------------------------------------------------------------- |
-| {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML WHATWG') }}    | Nenhuma mudança.                                               |
-| {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}   | {{ Spec2('HTML5 W3C') }}      | Define a semântica em relação à validação de HTML e restrição. |
-| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}       | {{ Spec2('CSS4 Selectors') }} | Define a pseudo-classe, mas não a semântica associada.         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_required/index.md b/files/pt-br/web/css/_colon_required/index.md
index 149d7b2829264a..cc7f230c1aae98 100644
--- a/files/pt-br/web/css/_colon_required/index.md
+++ b/files/pt-br/web/css/_colon_required/index.md
@@ -37,12 +37,7 @@ Se o formulário também possui campos [opcionais](/pt-BR/docs/Web/CSS/:optional
 
 ## Especificações
 
-| Especificação                                                          | Status                        | Comentário                                             |
-| ---------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ |
-| {{ SpecName('HTML WHATWG', '#selector-required', ':required') }}       | {{ Spec2('HTML WHATWG') }}    | Sem mudança.                                           |
-| {{ SpecName('HTML5 W3C', '#selector-required', ':required') }}         | {{ Spec2('HTML5 W3C') }}      | Define a semântica de validação e de restrição HTML.   |
-| {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}          | {{ Spec2('CSS4 Selectors') }} | Sem mudança.                                           |
-| {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }} | {{ Spec2('CSS3 Basic UI') }}  | Define a pseudo-classe, mas não a semântica associada. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_target/index.md b/files/pt-br/web/css/_colon_target/index.md
index c3c47855118d47..8b01d839370c79 100644
--- a/files/pt-br/web/css/_colon_target/index.md
+++ b/files/pt-br/web/css/_colon_target/index.md
@@ -191,11 +191,7 @@ Você pode usar a pseudo-classe `:target` para criar uma lightbox sem usar JavaS
 
 ## Especificações
 
-| Especificações                                                          | Status                      | Comentário                           |
-| ----------------------------------------------------------------------- | --------------------------- | ------------------------------------ |
-| {{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}} | {{Spec2("HTML WHATWG")}}    | Define semântica específica do HTML. |
-| {{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}         | {{Spec2("CSS4 Selectors")}} | Não há mudanças.                     |
-| {{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}             | {{Spec2("CSS3 Selectors")}} | Definição inicial.                   |
+{{Specifications}}
 
 ## Navegadores compatíveis
 
diff --git a/files/pt-br/web/css/_colon_valid/index.md b/files/pt-br/web/css/_colon_valid/index.md
index b8afc3895334d2..90ed10e0c221ab 100644
--- a/files/pt-br/web/css/_colon_valid/index.md
+++ b/files/pt-br/web/css/_colon_valid/index.md
@@ -26,11 +26,7 @@ Veja {{cssxref(":invalid")}} para um exemplo.
 
 ## Especificações
 
-| Specification                                                 | Status                      | Comment                                                 |
-| ------------------------------------------------------------- | --------------------------- | ------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}      | {{Spec2('HTML WHATWG')}}    | Sem alterações.                                         |
-| {{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}        | {{Spec2('HTML5 W3C')}}      | Define a semântica do HTML e a validação de restrições. |
-| {{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}} | {{Spec2('CSS4 Selectors')}} | Definição inicial                                       |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_colon_visited/index.md b/files/pt-br/web/css/_colon_visited/index.md
index 5cca3bd0ff5933..309bb0ac0a0d5f 100644
--- a/files/pt-br/web/css/_colon_visited/index.md
+++ b/files/pt-br/web/css/_colon_visited/index.md
@@ -88,13 +88,7 @@ a:visited {
 
 ## Especificações
 
-| Especificações                                                               | Status                        | Comentário                                                                                                                                                            |
-| ---------------------------------------------------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }} | {{ Spec2('HTML WHATWG') }}    |                                                                                                                                                                       |
-| {{ SpecName('CSS4 Selectors', '#link', ':visited') }}                        | {{ Spec2('CSS4 Selectors') }} | Sem mudança.                                                                                                                                                          |
-| {{ SpecName('CSS3 Selectors', '#link', ':visited') }}                        | {{ Spec2('CSS3 Selectors') }} | Sem mudança.                                                                                                                                                          |
-| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}    | {{ Spec2('CSS2.1') }}         | Eleva a restrição para aplicar apenas :visited ao elemento {{HTMLElement ("a")}}. Permite que os navegadores restrinjam seu comportamento por motivos de privacidade. |
-| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}                 | {{ Spec2('CSS1') }}           | Definição inicial.                                                                                                                                                    |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_doublecolon_after/index.md b/files/pt-br/web/css/_doublecolon_after/index.md
index 2ee6559ebbf0e3..02cea8b27ef01b 100644
--- a/files/pt-br/web/css/_doublecolon_after/index.md
+++ b/files/pt-br/web/css/_doublecolon_after/index.md
@@ -122,13 +122,7 @@ span[data-descr]:hover::after {
 
 ## Especificações
 
-| Especificação                                                                                          | Status                            | Comentário                                                        |
-| ------------------------------------------------------------------------------------------------------ | --------------------------------- | ----------------------------------------------------------------- |
-| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}                                  | {{Spec2('CSS4 Pseudo-Elements')}} | Sem mudanças significativas em relação à especificação anterior.  |
-| {{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}} | {{Spec2("CSS3 Transitions")}}     | Permite transições em propriedades definidas em pseudo-elementos. |
-| {{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}                         | {{Spec2("CSS3 Animations")}}      | Permite animações em propriedades definidas em pseudo-elementos.  |
-| {{SpecName('CSS3 Selectors', '#gen-content', '::after')}}                                              | {{Spec2('CSS3 Selectors')}}       | Introduz a sintaxe de dois sinais de dois pontos.                 |
-| {{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}                                | {{Spec2('CSS2.1')}}               | Definição inicial, usando a sintaxe de um sinal de dois pontos.   |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_doublecolon_backdrop/index.md b/files/pt-br/web/css/_doublecolon_backdrop/index.md
index f1fe14e2bb996c..6885831a6f6bb7 100644
--- a/files/pt-br/web/css/_doublecolon_backdrop/index.md
+++ b/files/pt-br/web/css/_doublecolon_backdrop/index.md
@@ -13,9 +13,7 @@ Ele não herda de nenhum elemento e também não é herdado. Não há restriçã
 
 ## Especificações
 
-| Especificação                                                          | Status                  | Comentário        |
-| ---------------------------------------------------------------------- | ----------------------- | ----------------- |
-| {{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}} | {{Spec2('Fullscreen')}} | Definição inicial |
+{{Specifications}}
 
 ## Copatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_doublecolon_first-letter/index.md b/files/pt-br/web/css/_doublecolon_first-letter/index.md
index d3c111564b78f4..7b8acbd2899a44 100644
--- a/files/pt-br/web/css/_doublecolon_first-letter/index.md
+++ b/files/pt-br/web/css/_doublecolon_first-letter/index.md
@@ -56,13 +56,7 @@ p::first-letter {
 
 ## Especificações
 
-| Especificações                                                                           | Status                             | Comentários                                                                                                                                                                                                                   |
-| ---------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}          | {{ Spec2('CSS4 Pseudo-Elements')}} | Propriedades permitidas generalizadas para tipografia, decoração de texto e propriedades de layout embutido, {{ cssxref("opacity") }} e {{ cssxref("box-shadow") }}.                                                          |
-| {{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}} | {{ Spec2('CSS3 Text Decoration')}} | Permitido uso de {{cssxref("text-shadow")}} com `::first-letter`.                                                                                                                                                             |
-| {{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}                      | {{ Spec2('CSS3 Selectors') }}      | Comportamento definido entre maiúsculas e minúsculas, como nos itens da lista, ou com comportamento específico do idioma (como o dígrafo holandês `IJ`). A sintaxe de dois dois-pontos para pseudo-elementos foi introduzida. |
-| {{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}                 | {{ Spec2('CSS2.1') }}              | Sem mudanças significativas, apesar que CSS nível 2 continuar aceitando apenas um dois-pontos.                                                                                                                                |
-| {{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}             | {{ Spec2('CSS1') }}                | Definição inicial de um dois-pontos.                                                                                                                                                                                          |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_doublecolon_first-line/index.md b/files/pt-br/web/css/_doublecolon_first-line/index.md
index fd1400f50055bd..561a8135a73dc6 100644
--- a/files/pt-br/web/css/_doublecolon_first-line/index.md
+++ b/files/pt-br/web/css/_doublecolon_first-line/index.md
@@ -66,13 +66,7 @@ Somente um pequeno subconjunto de propriedades CSS pode ser usado com o`::first-
 
 ## Especificações
 
-| Especificação                                                                                  | Status                            | Comentário                                                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}                     | {{Spec2('CSS4 Pseudo-Elements')}} | Define mais estritamente onde `::first-letter` pode ocorrer. Generaliza propriedades permitidas para tipografia, decoração de texto e propriedades de layout embutido e {{cssxref("opacity")}}. Define a herança de`::first-letter`. |
-| {{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}} | {{Spec2('CSS3 Text Decoration')}} | Permite o uso de {{cssxref("text-shadow")}} com `::first-letter`.                                                                                                                                                                    |
-| {{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}                                  | {{Spec2('CSS3 Selectors')}}       | Introdução da sintaxe de dois-pontos.                                                                                                                                                                                                |
-| {{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}                      | {{Spec2('CSS2.1')}}               | Nenhuma mudança.                                                                                                                                                                                                                     |
-| {{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}                         | {{Spec2('CSS1')}}                 | Definição inicial, usando a sintaxe de dois pontos.                                                                                                                                                                                  |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/_doublecolon_selection/index.md b/files/pt-br/web/css/_doublecolon_selection/index.md
index 5bc63e150ccd4a..0e37e9a396ce11 100644
--- a/files/pt-br/web/css/_doublecolon_selection/index.md
+++ b/files/pt-br/web/css/_doublecolon_selection/index.md
@@ -94,11 +94,7 @@ Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do p
 
 ## Especificações
 
-| Especificações                                                                | Status                            | Comentário         |
-| ----------------------------------------------------------------------------- | --------------------------------- | ------------------ |
-| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Definição inicial. |
-
-> **Nota:** `::selection` estava nos rascunhos do Nível 3 dos Seletores de CSS, mas foi removido na fase Recomendação do Candidato porque estava subespecificado (especialmente com elementos aninhados) e a interoperabilidade não foi alcançada ([com base na lista de discussão de estilos W3C](http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html)). Ele retornou no [Nível 4 dos Pseudo-Elementos](http://dev.w3.org/csswg/css-pseudo-4/).
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/actual_value/index.md b/files/pt-br/web/css/actual_value/index.md
index 0b436850da5dad..2735962290eeb7 100644
--- a/files/pt-br/web/css/actual_value/index.md
+++ b/files/pt-br/web/css/actual_value/index.md
@@ -9,9 +9,7 @@ The **actual value** of a CSS property is the [used value](/pt-BR/docs/Web/CSS/u
 
 ## Especificações
 
-| Especificações                                                      | Status              | Comentario        |
-| ------------------------------------------------------------------- | ------------------- | ----------------- |
-| {{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}} | {{Spec2('CSS2.1')}} | Definição inicial |
+{{Specifications}}
 
 ## Veja também
 
diff --git a/files/pt-br/web/css/align-items/index.md b/files/pt-br/web/css/align-items/index.md
index 1d5696e2b4cb08..8418067035ceac 100644
--- a/files/pt-br/web/css/align-items/index.md
+++ b/files/pt-br/web/css/align-items/index.md
@@ -229,12 +229,7 @@ display.addEventListener("change", function (evt) {
 
 ## Especificações
 
-| Especificação                                                             | Status                          | Comentário                                      |
-| ------------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------- |
-| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | Atualização para últimas definições de sintaxe. |
-| {{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}       | {{Spec2('CSS3 Flexbox')}}       | Definição inicial                               |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/align-self/index.md b/files/pt-br/web/css/align-self/index.md
index fc9965e83bda1a..aabd18dcd56470 100644
--- a/files/pt-br/web/css/align-self/index.md
+++ b/files/pt-br/web/css/align-self/index.md
@@ -121,12 +121,7 @@ div:nth-child(3) {
 
 ## Especificações
 
-| Especificação                                                           | Status                          | Comentário                                   |
-| ----------------------------------------------------------------------- | ------------------------------- | -------------------------------------------- |
-| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | Atualiza para últimas definições de sintaxe. |
-| {{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}       | {{Spec2("CSS3 Flexbox")}}       | Definição inicial.                           |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/attr/index.md b/files/pt-br/web/css/attr/index.md
index 0527508f3f4d34..c68a945346b90a 100644
--- a/files/pt-br/web/css/attr/index.md
+++ b/files/pt-br/web/css/attr/index.md
@@ -82,10 +82,7 @@ p::before {
 
 ## Especificações
 
-| Especificação                                           | Status                   | Comentário                                                                                                                                                                                                                       |
-| ------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}} | {{Spec2('CSS3 Values')}} | Added two optional parameters; can be used on all properties; may return other values than {{cssxref("&lt;string&gt;")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small. |
-| {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}   | {{Spec2('CSS2.1')}}      | Limited to the {{cssxref("content")}} property; always return a {{cssxref("&lt;string&gt;")}}.                                                                                                                                   |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/attribute_selectors/index.md b/files/pt-br/web/css/attribute_selectors/index.md
index 17dbb0ceba9b27..41e55e08479e01 100644
--- a/files/pt-br/web/css/attribute_selectors/index.md
+++ b/files/pt-br/web/css/attribute_selectors/index.md
@@ -139,11 +139,7 @@ div[data-lang="zh-TW"] {
 
 ## Especificações
 
-| Specification                                                                      | Status                      | Comment                                                           |
-| ---------------------------------------------------------------------------------- | --------------------------- | ----------------------------------------------------------------- |
-| {{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}      | {{Spec2('CSS4 Selectors')}} | Adiciona um modificador para a seleção do valor do atributo ASCII |
-| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}      | {{Spec2('CSS3 Selectors')}} |                                                                   |
-| {{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS2.1')}}         | Definição Inicial                                                 |
+{{Specifications}}
 
 ## Browser compatibilidade
 
diff --git a/files/pt-br/web/css/backface-visibility/index.md b/files/pt-br/web/css/backface-visibility/index.md
index c2fba3f80f4eba..7034ed598fbf09 100644
--- a/files/pt-br/web/css/backface-visibility/index.md
+++ b/files/pt-br/web/css/backface-visibility/index.md
@@ -186,9 +186,7 @@ td {
 
 ## Especificações
 
-| Especificação                                                                           | Status                       | Comentário        |
-| --------------------------------------------------------------------------------------- | ---------------------------- | ----------------- |
-| {{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}} | {{Spec2('CSS3 Transforms')}} | Definição Inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/background-attachment/index.md b/files/pt-br/web/css/background-attachment/index.md
index de063c98a42447..d8564bbca93c39 100644
--- a/files/pt-br/web/css/background-attachment/index.md
+++ b/files/pt-br/web/css/background-attachment/index.md
@@ -99,11 +99,7 @@ p {
 
 ## Especificações
 
-| Especificação                                                                                | Status                        | Comentário                                                                                      |
-| -------------------------------------------------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}      | {{Spec2('CSS3 Backgrounds')}} | The shorthand property has been extended to support multiple backgrounds and the `local` value. |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}} | {{Spec2('CSS2.1')}}           | Mudança não significativa.                                                                      |
-| {{SpecName('CSS1', '#background-attachment', 'background-attachment')}}                      | {{Spec2('CSS1')}}             | Mudança não significativa                                                                       |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/background-blend-mode/index.md b/files/pt-br/web/css/background-blend-mode/index.md
index 90c1df8c61ead9..d4379efeae747d 100644
--- a/files/pt-br/web/css/background-blend-mode/index.md
+++ b/files/pt-br/web/css/background-blend-mode/index.md
@@ -80,9 +80,7 @@ console.log(document.getElementById("div"));
 
 ## Especificações
 
-| Especificação                                                                    | Status                     | Comentário         |
-| -------------------------------------------------------------------------------- | -------------------------- | ------------------ |
-| {{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }} | {{ Spec2('Compositing') }} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/background-clip/index.md b/files/pt-br/web/css/background-clip/index.md
index 93840e8a955468..08454c0def08b7 100644
--- a/files/pt-br/web/css/background-clip/index.md
+++ b/files/pt-br/web/css/background-clip/index.md
@@ -159,9 +159,7 @@ p {
 
 ## Especificações
 
-| Especificação                                                               | Estado                        | Comentário |
-| --------------------------------------------------------------------------- | ----------------------------- | ---------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}} | {{Spec2('CSS3 Backgrounds')}} |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/background-color/index.md b/files/pt-br/web/css/background-color/index.md
index a946d8d6ee486c..f49ee1ff47d9c4 100644
--- a/files/pt-br/web/css/background-color/index.md
+++ b/files/pt-br/web/css/background-color/index.md
@@ -104,11 +104,7 @@ A cor do contrast é determinada comparando a luminância da cor do texto e da c
 
 ## Especificações
 
-| Specification                                                                      | Comment                                                                                                                                                | Feedback                                                                                          |
-| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}          | Though technically removing the `transparent` keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("&lt;color&gt;")}} | [Backgrounds Level 3 GitHub issues](https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3) |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} |                                                                                                                                                        |                                                                                                   |
-| {{SpecName('CSS1', '#background-color', 'background-color')}}                      | Initial definition                                                                                                                                     |                                                                                                   |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/background-origin/index.md b/files/pt-br/web/css/background-origin/index.md
index c17049518fe613..04a841569dda3b 100644
--- a/files/pt-br/web/css/background-origin/index.md
+++ b/files/pt-br/web/css/background-origin/index.md
@@ -76,11 +76,7 @@ div {
 
 ## Especificações
 
-| Especificação                                                                   | Status                        | Comentário          |
-| ------------------------------------------------------------------------------- | ----------------------------- | ------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Initial definition. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/background/index.md b/files/pt-br/web/css/background/index.md
index 40bb8fbdcbca73..4ee5173c11cff5 100644
--- a/files/pt-br/web/css/background/index.md
+++ b/files/pt-br/web/css/background/index.md
@@ -88,11 +88,7 @@ Um ou mais dos seguintes, por qualquer ordem:
 
 ## Especificações
 
-| Especificação                                                         | estado                     | Comente                                                                                                                                                                                           |
-| --------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName ( 'Fundos CSS3', '# a-fundo', 'fundo')}}                   | {{Spec2 ( 'Fundos CSS3')}} | A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova {{cssxref("background-size")}}, {{cssxref("background-origem")}} e {{cssxref("background-clip")}} propriedades. |
-| {{SpecName ( 'CSS2.1', '# propdef-fundo colors.html', 'background')}} | {{Spec2 ( 'CSS2.1')}}      | Não ocorreram alterações significativas                                                                                                                                                           |
-| {{SpecName ( 'CSS1', '#background', 'background')}}                   | {{Spec2 ( 'CSS1')}}        | definição inicial                                                                                                                                                                                 |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/box-sizing/index.md b/files/pt-br/web/css/box-sizing/index.md
index 5122ff8dad46c4..7d184be875a4eb 100644
--- a/files/pt-br/web/css/box-sizing/index.md
+++ b/files/pt-br/web/css/box-sizing/index.md
@@ -41,9 +41,7 @@ box-sizing: inherit
 
 ## Especificações
 
-| Especificação                                              | Situação                   | Comentário |
-| ---------------------------------------------------------- | -------------------------- | ---------- |
-| {{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}} | {{Spec2('CSS3 Basic UI')}} |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/calc/index.md b/files/pt-br/web/css/calc/index.md
index 0489dee726e09c..390a5cc32765cc 100644
--- a/files/pt-br/web/css/calc/index.md
+++ b/files/pt-br/web/css/calc/index.md
@@ -130,9 +130,7 @@ Isso garante que o tamanho do texto será redimensionado se a página for amplia
 
 ## Especificações
 
-| Especificação                                           | Status                   | Comentário        |
-| ------------------------------------------------------- | ------------------------ | ----------------- |
-| {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} | {{Spec2('CSS3 Values')}} | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/class_selectors/index.md b/files/pt-br/web/css/class_selectors/index.md
index da113f9ba2ae20..03e2347cff82b7 100644
--- a/files/pt-br/web/css/class_selectors/index.md
+++ b/files/pt-br/web/css/class_selectors/index.md
@@ -74,12 +74,7 @@ Observe que isso é o mesmo que [`seletor de atributo`](/pt-BR/docs/Web/CSS/Attr
 
 ## Especificações
 
-| Especificação                                                         | Status                      | Comentário        |
-| --------------------------------------------------------------------- | --------------------------- | ----------------- |
-| {{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}      | {{Spec2('CSS4 Selectors')}} | Sem mudança       |
-| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}      | {{Spec2('CSS3 Selectors')}} |                   |
-| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}}         |                   |
-| {{SpecName('CSS1', '#class-as-selector', 'child selectors')}}         | {{Spec2('CSS1')}}           | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/clear/index.md b/files/pt-br/web/css/clear/index.md
index 6b3bae41e47515..4cc177e9558280 100644
--- a/files/pt-br/web/css/clear/index.md
+++ b/files/pt-br/web/css/clear/index.md
@@ -207,13 +207,7 @@ p {
 
 ## Especificações
 
-| Specification                                                             | Status                              | Comment                                               |
-| ------------------------------------------------------------------------- | ----------------------------------- | ----------------------------------------------------- |
-| {{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}} | {{Spec2('CSS Logical Properties')}} | Adds the values `inline-start` and `inline-end`       |
-| {{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}              | {{Spec2('CSS2.1')}}                 | No significant changes, though details are clarified. |
-| {{SpecName('CSS1', '#clear', 'clear')}}                                   | {{Spec2('CSS1')}}                   | Initial definition                                    |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilidade dos browsers
 
diff --git a/files/pt-br/web/css/computed_value/index.md b/files/pt-br/web/css/computed_value/index.md
index 8514c218b1e7a0..1a043f24363840 100644
--- a/files/pt-br/web/css/computed_value/index.md
+++ b/files/pt-br/web/css/computed_value/index.md
@@ -24,9 +24,7 @@ The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns
 
 ## Especificações
 
-| Especificações                                                          | Status              | Comentário            |
-| ----------------------------------------------------------------------- | ------------------- | --------------------- |
-| {{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}} | {{Spec2("CSS2.1")}} | Especificação inicial |
+{{Specifications}}
 
 ## Veja também
 
diff --git a/files/pt-br/web/css/contain/index.md b/files/pt-br/web/css/contain/index.md
index 639d1c1a03e276..f61e9634f6cee3 100644
--- a/files/pt-br/web/css/contain/index.md
+++ b/files/pt-br/web/css/contain/index.md
@@ -59,9 +59,7 @@ Esta propriedade é útil em páginas que contêm um monte de widgets que são t
 
 ## Especificações
 
-| Especificação                   | Status                       | Comentário         |
-| ------------------------------- | ---------------------------- | ------------------ |
-| {{SpecName('CSS Containment')}} | {{Spec2('CSS Containment')}} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/content/index.md b/files/pt-br/web/css/content/index.md
index cd7251879258a7..6df2c6e3757995 100644
--- a/files/pt-br/web/css/content/index.md
+++ b/files/pt-br/web/css/content/index.md
@@ -239,10 +239,7 @@ li {
 
 ## Especificações
 
-| Especificação                                                | Status                    | Comentário        |
-| ------------------------------------------------------------ | ------------------------- | ----------------- |
-| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} |                   |
-| {{SpecName("CSS2.1", "generate.html#content", "content")}}   | {{Spec2("CSS2.1")}}       | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/css_basic_user_interface/index.md b/files/pt-br/web/css/css_basic_user_interface/index.md
index cb476d97a60357..099d542c534a71 100644
--- a/files/pt-br/web/css/css_basic_user_interface/index.md
+++ b/files/pt-br/web/css/css_basic_user_interface/index.md
@@ -35,8 +35,4 @@ slug: Web/CSS/CSS_basic_user_interface
 
 ## Especificações
 
-| Especificação                     | Status                     | Comentário         |
-| --------------------------------- | -------------------------- | ------------------ |
-| {{SpecName("CSS4 Basic UI")}}     | {{Spec2("CSS4 Basic UI")}} |                    |
-| {{SpecName("CSS3 Basic UI")}}     | {{Spec2("CSS3 Basic UI")}} |                    |
-| {{SpecName("CSS2.1", "ui.html")}} | {{Spec2("CSS2.1")}}        | Definição inicial. |
+{{Specifications}}
diff --git a/files/pt-br/web/css/css_box_model/index.md b/files/pt-br/web/css/css_box_model/index.md
index 1637d080555f66..748adb35173524 100644
--- a/files/pt-br/web/css/css_box_model/index.md
+++ b/files/pt-br/web/css/css_box_model/index.md
@@ -62,8 +62,4 @@ slug: Web/CSS/CSS_box_model
 
 ## Especificações
 
-| Especificação                      | Situação              | Comentário         |
-| ---------------------------------- | --------------------- | ------------------ |
-| {{SpecName("CSS3 Box")}}           | {{Spec2("CSS3 Box")}} |                    |
-| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}}   |                    |
-| {{SpecName("CSS1")}}               | {{Spec2("CSS1")}}     | Initial definition |
+{{Specifications}}
diff --git a/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md
index 2207e325035272..94eb82ed15091a 100644
--- a/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md
+++ b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.md
@@ -94,9 +94,7 @@ Produz este resultado:
 
 ## Especificações
 
-| Specification                                                                   | Status              | Comment |
-| ------------------------------------------------------------------------------- | ------------------- | ------- |
-| {{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}} | {{Spec2('CSS2.1')}} |         |
+{{Specifications}}
 
 ## Veja mais
 
diff --git a/files/pt-br/web/css/css_display/index.md b/files/pt-br/web/css/css_display/index.md
index c6b9d06b50c58c..ab0f717937e188 100644
--- a/files/pt-br/web/css/css_display/index.md
+++ b/files/pt-br/web/css/css_display/index.md
@@ -60,13 +60,7 @@ slug: Web/CSS/CSS_display
 
 ## Especificações
 
-| Specification                                                      | Status                    | Comment                                                                                  |
-| ------------------------------------------------------------------ | ------------------------- | ---------------------------------------------------------------------------------------- |
-| {{SpecName("CSS3 Display", "#the-display-properties", "display")}} | {{Spec2("CSS3 Display")}} | Adicionado `run-in`, `flow`, `flow-root`, `contents` e valores de várias palavras-chave. |
-| {{SpecName("CSS2.1", "visuren.html#display-prop", "display")}}     | {{Spec2("CSS2.1")}}       | Adicionados os valores do modelo de tabela e `inline-block`.                             |
-| {{SpecName("CSS1", "#display", "display")}}                        | {{Spec2("CSS1")}}         | Definição inicial. Valores básicos: `none`, `block`, `inline` e `list-item`.             |
-
-Além do nível de especificação de exibição CSS 3, outras especificações definem o comportamento de vários valores da exibição.
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/css_flexible_box_layout/index.md b/files/pt-br/web/css/css_flexible_box_layout/index.md
index c22c122e7cdfe6..d02688753e8261 100644
--- a/files/pt-br/web/css/css_flexible_box_layout/index.md
+++ b/files/pt-br/web/css/css_flexible_box_layout/index.md
@@ -70,9 +70,7 @@ A propriedade `align-content`, `align-self`, `align-items` e `justify-content` a
 
 ## Especificações
 
-| Especificação                  | Status                      | Comentário         |
-| ------------------------------ | --------------------------- | ------------------ |
-| {{ SpecName('CSS3 Flexbox') }} | {{ Spec2('CSS3 Flexbox') }} | Definição inicial. |
+{{Specifications}}
 
 ## Veja também
 
diff --git a/files/pt-br/web/css/css_grid_layout/index.md b/files/pt-br/web/css/css_grid_layout/index.md
index 93e8098aef112f..be1308b34206da 100644
--- a/files/pt-br/web/css/css_grid_layout/index.md
+++ b/files/pt-br/web/css/css_grid_layout/index.md
@@ -3,6 +3,8 @@ title: CSS Grid Layout
 slug: Web/CSS/CSS_grid_layout
 ---
 
+{{CSSRef}}
+
 > **Nota:** CSS Grid será suportado por vários navegadores até meados de 2017. O suporte em navegadores antigos pode ser obtido habilitando-se uma flag que permite o uso da API. Nesse caso não se esqueça de consultar e fazer referência a cada propriedade e funcionalidade da especificação para certificar-se da sua compatibilidade, bem como para obter maiores informações.
 
 **CSS Grid layout** é uma especificação do W3C projetada para proporcionar um método bi-dimensional para criação de layout CSS que oferece a possibilidade de "layoutar" itens da página com uso de linhas e colunas. CSS grid poderá ser usado para obter uma infinidade de diferentes layouts. O diferencial desse método de criação de layouts reside na possibilidade de se dividir uma página em grandes regiões e de se definir o relacionamento em termos de medidas, posicionamento e camadas entre os diferentes componentes da marcação HTML.
@@ -97,54 +99,16 @@ Tal como as tabelas, grid layout permite ao autor alinhar os componentes da pág
 
 ## Especificações
 
-| Especificação               | Status                   | Comentários        |
-| --------------------------- | ------------------------ | ------------------ |
-| {{ SpecName('CSS3 Grid') }} | {{ Spec2('CSS3 Grid') }} | Definição inicial. |
-
-1. [**CSS**](/pt-BR/docs/Web/CSS)
-2. [**CSS Referência**](/pt-BR/docs/Web/CSS/Reference)
-3. [CSS Grid Layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout)
-4. **Guias**
-
-   1. [Conceitos básicos de grid layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-   2. [Relação com outros métodos de layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-   3. [Posicionamento baseado em linha](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-   4. [Grid template areas](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-   5. [Layout usando grid lines nomeadas](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-   6. [Posicionamento Automático no grid layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-   7. [Alinhamento box no grid layout](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-   8. [Grids, Valores Lógicos e Modos de Escrita](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-   9. [CSS Grid Layout e Acessibilidade](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
-   10. [CSS Grid Layout e Aprimoramento Progressivo](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
-   11. [Realizando layouts comuns usando CSS Grids](/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-
-5. **Propriedades**
-
-   1. [grid](/pt-BR/docs/Web/CSS/grid)
-   2. [grid-area](/pt-BR/docs/Web/CSS/grid-area)
-   3. [grid-auto-columns](/pt-BR/docs/Web/CSS/grid-auto-columns)
-   4. [grid-auto-flow](/pt-BR/docs/Web/CSS/grid-auto-flow)
-   5. [grid-auto-rows](/pt-BR/docs/Web/CSS/grid-auto-rows)
-   6. [grid-column](/pt-BR/docs/Web/CSS/grid-column)
-   7. [grid-column-end](/pt-BR/docs/Web/CSS/grid-column-end)
-   8. [grid-column-gap](/pt-BR/docs/Web/CSS/grid-column-gap)
-   9. [grid-column-start](/pt-BR/docs/Web/CSS/grid-column-start)
-   10. [grid-gap](/pt-BR/docs/Web/CSS/grid-gap)
-   11. [grid-row](/pt-BR/docs/Web/CSS/grid-row)
-   12. [grid-row-end](/pt-BR/docs/Web/CSS/grid-row-end)
-   13. [grid-row-gap](/pt-BR/docs/Web/CSS/grid-row-gap)
-   14. [grid-row-start](/pt-BR/docs/Web/CSS/grid-row-start)
-   15. [grid-template](/pt-BR/docs/Web/CSS/grid-template)
-   16. [grid-template-areas](/pt-BR/docs/Web/CSS/grid-template-areas)
-   17. [grid-template-colunms](/pt-BR/docs/Web/CSS/grid-template-columns)
-   18. [grid-template-rows](/pt-BR/docs/Web/CSS/grid-template-rows)
-
-6. **Glossário**
-
-   1. [Grid lines](/pt-BR/docs/Glossary/Grid_lines)
-   2. [Grid tracks](/pt-BR/docs/Glossary/Grid_tracks)
-   3. [Grid cell](/pt-BR/docs/Glossary/Grid_cell)
-   4. [Grid areas](/pt-BR/docs/Glossary/Grid_areas)
-   5. [Gutters](/pt-BR/docs/Glossary/Gutters)
-   6. [Grid row](/pt-BR/docs/Glossary/Grid_rows)
-   7. [Grid column](/pt-BR/docs/Glossary/Grid_column)
+{{Specifications}}
+
+## Veja também
+
+- Glossário:
+
+  - [Grid lines](/pt-BR/docs/Glossary/Grid_lines)
+  - [Grid tracks](/pt-BR/docs/Glossary/Grid_tracks)
+  - [Grid cell](/pt-BR/docs/Glossary/Grid_cell)
+  - [Grid areas](/pt-BR/docs/Glossary/Grid_areas)
+  - [Gutters](/pt-BR/docs/Glossary/Gutters)
+  - [Grid row](/pt-BR/docs/Glossary/Grid_rows)
+  - [Grid column](/pt-BR/docs/Glossary/Grid_column)
diff --git a/files/pt-br/web/css/css_positioned_layout/index.md b/files/pt-br/web/css/css_positioned_layout/index.md
index 71982dede5e3b8..caf47b3fb9a655 100644
--- a/files/pt-br/web/css/css_positioned_layout/index.md
+++ b/files/pt-br/web/css/css_positioned_layout/index.md
@@ -29,7 +29,4 @@ slug: Web/CSS/CSS_positioned_layout
 
 ## Especificações
 
-| Especificação                            | Status                          | Comentário |
-| ---------------------------------------- | ------------------------------- | ---------- |
-| {{ SpecName('CSS3 Positioning') }}       | {{ Spec2('CSS3 Positioning') }} |            |
-| {{ SpecName('CSS2.1', 'visuren.html') }} | {{ Spec2('CSS2.1') }}           |            |
+{{Specifications}}
diff --git a/files/pt-br/web/css/css_selectors/index.md b/files/pt-br/web/css/css_selectors/index.md
index 1097847a6f212b..c3258ba4ac51f1 100644
--- a/files/pt-br/web/css/css_selectors/index.md
+++ b/files/pt-br/web/css/css_selectors/index.md
@@ -56,9 +56,4 @@ Os Seletores definem quais elementos um conjunto de regras CSS se aplica.
 
 ## Especificações
 
-| Especificação                           | Status                      | Comentário        |
-| --------------------------------------- | --------------------------- | ----------------- |
-| {{SpecName('CSS4 Selectors')}}          | {{Spec2('CSS4 Selectors')}} |                   |
-| {{SpecName('CSS3 Selectors')}}          | {{Spec2('CSS3 Selectors')}} |                   |
-| {{SpecName('CSS2.1', 'selector.html')}} | {{Spec2('CSS2.1')}}         |                   |
-| {{SpecName('CSS1')}}                    | {{Spec2('CSS1')}}           | Definição inicial |
+{{Specifications}}
diff --git a/files/pt-br/web/css/css_transitions/using_css_transitions/index.md b/files/pt-br/web/css/css_transitions/using_css_transitions/index.md
index e1f7d389220409..4deaa06c6702c6 100644
--- a/files/pt-br/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/pt-br/web/css/css_transitions/using_css_transitions/index.md
@@ -1127,9 +1127,7 @@ el.addEventListener("transitionstart", signalStart, true);
 
 ## Especificações
 
-| Especificação                            | Status                        | Comentário        |
-| ---------------------------------------- | ----------------------------- | ----------------- |
-| {{SpecName('CSS3 Transitions', '', '')}} | {{Spec2('CSS3 Transitions')}} | Definição Inícial |
+{{Specifications}}
 
 ## Veja Também
 
diff --git a/files/pt-br/web/css/css_types/index.md b/files/pt-br/web/css/css_types/index.md
index 6cbb5ed79cdc51..d841291b4780b9 100644
--- a/files/pt-br/web/css/css_types/index.md
+++ b/files/pt-br/web/css/css_types/index.md
@@ -37,6 +37,4 @@ Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada
 
 ## Especificações
 
-| Especificação                 | Status                     | Comentário         |
-| ----------------------------- | -------------------------- | ------------------ |
-| {{ SpecName('CSS3 Values') }} | {{ Spec2('CSS3 Values') }} | Definição inicial. |
+{{Specifications}}
diff --git a/files/pt-br/web/css/descendant_combinator/index.md b/files/pt-br/web/css/descendant_combinator/index.md
index f7489862bf312d..cdb97ea77aa8f6 100644
--- a/files/pt-br/web/css/descendant_combinator/index.md
+++ b/files/pt-br/web/css/descendant_combinator/index.md
@@ -65,12 +65,7 @@ li li {
 
 ## Especificações
 
-| Especificação                                                                        | Status                      | Comment            |
-| ------------------------------------------------------------------------------------ | --------------------------- | ------------------ |
-| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}   | {{Spec2("CSS4 Selectors")}} |                    |
-| {{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}   | {{Spec2("CSS3 Selectors")}} |                    |
-| {{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}} | {{Spec2("CSS2.1")}}         |                    |
-| {{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}                | {{Spec2("CSS1")}}           | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/element/index.md b/files/pt-br/web/css/element/index.md
index 78ef7f67aaa613..100e5227c17ea1 100644
--- a/files/pt-br/web/css/element/index.md
+++ b/files/pt-br/web/css/element/index.md
@@ -68,9 +68,7 @@ Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como _backgr
 
 ## Especificações
 
-| Especificação                                                                                        | Estatus                  | Comentário                      |
-| ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------- |
-| {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}} | {{Spec2('CSS4 Images')}} | Actualmente adiado para o CSS4. |
+{{Specifications}}
 
 ## Compatibilidade dos navegadores
 
diff --git a/files/pt-br/web/css/env/index.md b/files/pt-br/web/css/env/index.md
index 39c82cef4ecb54..ef35bfd7314e66 100644
--- a/files/pt-br/web/css/env/index.md
+++ b/files/pt-br/web/css/env/index.md
@@ -103,9 +103,7 @@ A sintaxe _fallback_, como de propriedades customizadas, permite vírgulas. Mas
 
 ## Especificações
 
-| Especificação                                                        | Status                                  | Comentário         |
-| -------------------------------------------------------------------- | --------------------------------------- | ------------------ |
-| {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}} | {{Spec2("CSS3 Environment Variables")}} | Definição inicial. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/flex-flow/index.md b/files/pt-br/web/css/flex-flow/index.md
index 9b812d626e1029..1927985b7da6ef 100644
--- a/files/pt-br/web/css/flex-flow/index.md
+++ b/files/pt-br/web/css/flex-flow/index.md
@@ -54,9 +54,7 @@ elemento {
 
 ## Especificações
 
-| Especificação                                                    | Status                      | Comentário        |
-| ---------------------------------------------------------------- | --------------------------- | ----------------- |
-| {{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }} | {{ Spec2('CSS3 Flexbox') }} | Definição inicial |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/float/index.md b/files/pt-br/web/css/float/index.md
index fbd9b62ed6d089..f93b107877cc9c 100644
--- a/files/pt-br/web/css/float/index.md
+++ b/files/pt-br/web/css/float/index.md
@@ -129,12 +129,7 @@ p.withRedBoxes {
 
 ## Especificações
 
-| Especificação                                                             | Situação                            | Comentário                                                                                                                                                           |
-| ------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}} | {{Spec2('CSS Logical Properties')}} | Adiciona os valores `inline-start` e `inline-end`.                                                                                                                   |
-| {{SpecName('CSS3 Box', '#float', 'float')}}                               | {{Spec2('CSS3 Box')}}               | Muitos valores novos, nem todos claramente definidos ainda. Qualquer diferença em comportamento não relacionado a novas funções são involutárias; por favor informe. |
-| {{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}            | {{Spec2('CSS2.1')}}                 | Sem mudanças                                                                                                                                                         |
-| {{SpecName('CSS1', '#float', 'float')}}                                   | {{Spec2('CSS1')}}                   | Definição inicial                                                                                                                                                    |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/font-feature-settings/index.md b/files/pt-br/web/css/font-feature-settings/index.md
index e7ee9e4ea33563..c9001936aff866 100644
--- a/files/pt-br/web/css/font-feature-settings/index.md
+++ b/files/pt-br/web/css/font-feature-settings/index.md
@@ -96,9 +96,7 @@ td.tabular {
 
 ## Especificações
 
-| Especificacão                                                                         | Estado                  | Comment            |
-| ------------------------------------------------------------------------------------- | ----------------------- | ------------------ |
-| {{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}} | {{Spec2('CSS3 Fonts')}} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/font-variation-settings/index.md b/files/pt-br/web/css/font-variation-settings/index.md
index a681ef629bf0ab..8ba8ef62affad2 100644
--- a/files/pt-br/web/css/font-variation-settings/index.md
+++ b/files/pt-br/web/css/font-variation-settings/index.md
@@ -79,9 +79,7 @@ O CSS do exemplo a seguir pode ser editado para permitir que você mude os valor
 
 ## Especificações
 
-| Especificação                                                                                                                            | Status                  | Comentário         |
-| ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------ |
-| {{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}} | {{Spec2('CSS4 Fonts')}} | Initial definition |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/font-weight/index.md b/files/pt-br/web/css/font-weight/index.md
index f0beb79a385632..c09e5b5a42be13 100644
--- a/files/pt-br/web/css/font-weight/index.md
+++ b/files/pt-br/web/css/font-weight/index.md
@@ -153,12 +153,7 @@ span {
 
 ## Especificações
 
-| Especificações                                                          | Status                        | Comentário                                  |
-| ----------------------------------------------------------------------- | ----------------------------- | ------------------------------------------- |
-| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}          | {{Spec2('CSS3 Fonts')}}       | Sem alterações.                             |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}      | {{Spec2('CSS3 Transitions')}} | Permite animação do atributo `font-weight`. |
-| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}}           | Sem alterações.                             |
-| {{SpecName('CSS1', '#font-weight', 'font-weight')}}                     | {{Spec2('CSS1')}}             |                                             |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/general_sibling_combinator/index.md b/files/pt-br/web/css/general_sibling_combinator/index.md
index ec8bc05959fe39..8dc68af2e6643d 100644
--- a/files/pt-br/web/css/general_sibling_combinator/index.md
+++ b/files/pt-br/web/css/general_sibling_combinator/index.md
@@ -36,10 +36,7 @@ p ~ span {
 
 ## Especificações
 
-| Specification                                                                                    | Status                      | Comment                                         |
-| ------------------------------------------------------------------------------------------------ | --------------------------- | ----------------------------------------------- |
-| {{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }} | {{Spec2('CSS4 Selectors')}} | Renomeia o combinador como "irmão subsequente". |
-| {{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}   | {{Spec2('CSS3 Selectors')}} | Definição inicial.                              |
+{{Specifications}}
 
 ## Navegadores compatíveis
 
diff --git a/files/pt-br/web/css/grid-auto-flow/index.md b/files/pt-br/web/css/grid-auto-flow/index.md
index f8c0514edfe756..f7a74ceb95c672 100644
--- a/files/pt-br/web/css/grid-auto-flow/index.md
+++ b/files/pt-br/web/css/grid-auto-flow/index.md
@@ -118,9 +118,7 @@ function changeGridAutoFlow() {
 
 ## Especificações
 
-| Especificação                                                          | Status                 | Comentário        |
-| ---------------------------------------------------------------------- | ---------------------- | ----------------- |
-| {{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}} | {{Spec2("CSS3 Grid")}} | Definição Inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/grid-template-columns/index.md b/files/pt-br/web/css/grid-template-columns/index.md
index e672261686247a..6b39155cb2a7d5 100644
--- a/files/pt-br/web/css/grid-template-columns/index.md
+++ b/files/pt-br/web/css/grid-template-columns/index.md
@@ -111,9 +111,7 @@ grid-template-columns: unset;
 
 ## Especificações
 
-| Especificação                                                                        | Status                 | Comentário        |
-| ------------------------------------------------------------------------------------ | ---------------------- | ----------------- |
-| {{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}} | {{Spec2("CSS3 Grid")}} | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/grid/index.md b/files/pt-br/web/css/grid/index.md
index 9189cca27a0fa9..9fcaa056307fee 100644
--- a/files/pt-br/web/css/grid/index.md
+++ b/files/pt-br/web/css/grid/index.md
@@ -99,9 +99,7 @@ grid: unset;
 
 ## Especificações
 
-| Especificação                                      | Status                 | Comment           |
-| -------------------------------------------------- | ---------------------- | ----------------- |
-| {{SpecName("CSS3 Grid", "#propdef-grid", "grid")}} | {{Spec2("CSS3 Grid")}} | Definição inicial |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/height/index.md b/files/pt-br/web/css/height/index.md
index 92ea2953329e7c..adfe22561bf8f4 100644
--- a/files/pt-br/web/css/height/index.md
+++ b/files/pt-br/web/css/height/index.md
@@ -104,12 +104,7 @@ div {
 
 ## Especificações
 
-| Specification                                                          | Status                        | Comment                                                                                                   |
-| ---------------------------------------------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}} | {{Spec2('CSS3 Box')}}         | Added the `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box` keywords. |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}          | {{Spec2('CSS3 Transitions')}} | Lists `height` as animatable.                                                                             |
-| {{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}   | {{Spec2('CSS2.1')}}           | Adds support for the {{cssxref("&lt;length&gt;")}} values and precises on which element it applies to.    |
-| {{SpecName('CSS1', '#height', 'height')}}                              | {{Spec2('CSS1')}}             | Initial specification.                                                                                    |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/hyphens/index.md b/files/pt-br/web/css/hyphens/index.md
index e234e1099069e8..f008fad2183718 100644
--- a/files/pt-br/web/css/hyphens/index.md
+++ b/files/pt-br/web/css/hyphens/index.md
@@ -98,9 +98,7 @@ p.auto {
 
 ## Especificações
 
-| Especificação                                             | Condição               | Comentário         |
-| --------------------------------------------------------- | ---------------------- | ------------------ |
-| {{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}} | {{Spec2("CSS3 Text")}} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/id_selectors/index.md b/files/pt-br/web/css/id_selectors/index.md
index c98e6e4cc1ff12..e813cfcfc2a9f3 100644
--- a/files/pt-br/web/css/id_selectors/index.md
+++ b/files/pt-br/web/css/id_selectors/index.md
@@ -36,12 +36,7 @@ span#identificado {
 
 ## Especificações
 
-| Especificação                                                        | Status                      | Comentário        |
-| -------------------------------------------------------------------- | --------------------------- | ----------------- |
-| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}      | {{Spec2("CSS4 Selectors")}} |                   |
-| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}      | {{Spec2("CSS3 Selectors")}} |                   |
-| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}}         |                   |
-| {{SpecName("CSS1", "#id-as-selector", "ID selectors")}}              | {{Spec2("CSS1")}}           | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/image/index.md b/files/pt-br/web/css/image/index.md
index 191c0eca197477..ae7e86ac58a027 100644
--- a/files/pt-br/web/css/image/index.md
+++ b/files/pt-br/web/css/image/index.md
@@ -66,10 +66,7 @@ element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
 
 ## Especificações
 
-| Especificações                                                 | Status                   | Comentário                                                                                                                                                                |
-| -------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS4 Images', '#typedef-image', '&lt;image&gt;')}} | {{Spec2('CSS4 Images')}} | Adiciona {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}. |
-| {{SpecName('CSS3 Images', '#typedef-image', '&lt;image&gt;')}} | {{Spec2('CSS3 Images')}} | Definição inicial. Depois disso, não existe definição explicita do tipo de data `<image>`. Imagens podem ser somente definidas usando a notação funciona `url()` .        |
+{{Specifications}}
 
 ## Compatibilidade do navegador
 
diff --git a/files/pt-br/web/css/initial/index.md b/files/pt-br/web/css/initial/index.md
index 383690c16f4d6e..84d49e0de9e443 100644
--- a/files/pt-br/web/css/initial/index.md
+++ b/files/pt-br/web/css/initial/index.md
@@ -39,10 +39,7 @@ em {
 
 ## Especificações
 
-| Specification                                         | Status                    | Comment                  |
-| ----------------------------------------------------- | ------------------------- | ------------------------ |
-| {{ SpecName('CSS4 Cascade', '#initial', 'initial') }} | {{Spec2('CSS4 Cascade')}} | No changes from Level 3. |
-| {{ SpecName('CSS3 Cascade', '#initial', 'initial') }} | {{Spec2('CSS3 Cascade')}} | Initial definition.      |
+{{Specifications}}
 
 ## Compatibilidade de navegadores
 
diff --git a/files/pt-br/web/css/inline-size/index.md b/files/pt-br/web/css/inline-size/index.md
index 547c040f788a3c..6c64c0b98f0f18 100644
--- a/files/pt-br/web/css/inline-size/index.md
+++ b/files/pt-br/web/css/inline-size/index.md
@@ -66,9 +66,7 @@ A propriedade `inline-size` aproveita os mesmos valores que as propriedades {{cs
 
 ## Especificações
 
-| Especificação                                                                          | Status                              | Comentário        |
-| -------------------------------------------------------------------------------------- | ----------------------------------- | ----------------- |
-| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}} | {{Spec2("CSS Logical Properties")}} | Definição Inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/isolation/index.md b/files/pt-br/web/css/isolation/index.md
index f675c61e1337ae..e98c48ab4cbdc7 100644
--- a/files/pt-br/web/css/isolation/index.md
+++ b/files/pt-br/web/css/isolation/index.md
@@ -77,9 +77,7 @@ Uma das palavras-chave listadas abaixo.
 
 ## Especificações
 
-| Specification                                            | Status                     | Comment            |
-| -------------------------------------------------------- | -------------------------- | ------------------ |
-| {{ SpecName('Compositing', '#isolation', 'Isolation') }} | {{ Spec2('Compositing') }} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/line-break/index.md b/files/pt-br/web/css/line-break/index.md
index f768e8ef168512..4b87141c4d5604 100644
--- a/files/pt-br/web/css/line-break/index.md
+++ b/files/pt-br/web/css/line-break/index.md
@@ -39,9 +39,7 @@ line-break: unset;
 
 ## Especificações
 
-| Especificações                                                  | Status                 | Comentário        |
-| --------------------------------------------------------------- | ---------------------- | ----------------- |
-| {{SpecName('CSS3 Text', '#line-break-property', 'line-break')}} | {{Spec2('CSS3 Text')}} | Definição inicial |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/margin/index.md b/files/pt-br/web/css/margin/index.md
index 32ff99e6fa97b3..144172ea1a1364 100644
--- a/files/pt-br/web/css/margin/index.md
+++ b/files/pt-br/web/css/margin/index.md
@@ -122,12 +122,7 @@ Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, est
 
 ## Especificações
 
-| Especificação                                                    | Status                          | Comentário                               |
-| ---------------------------------------------------------------- | ------------------------------- | ---------------------------------------- |
-| {{ SpecName('CSS3 Box', '#margin', 'margin') }}                  | {{ Spec2('CSS3 Box') }}         | Nenhuma mudança significativa.           |
-| {{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}  | {{ Spec2('CSS3 Transitions') }} | Define `margin` como animável.           |
-| {{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }} | {{ Spec2('CSS2.1') }}           | Remove seu efeito em elementos _inline_. |
-| {{ SpecName('CSS1', '#margin', 'margin') }}                      | {{ Spec2('CSS1') }}             | Definição inicial.                       |
+{{Specifications}}
 
 {{cssinfo}}
 

From 6091fa101c32d8577b51dc590fd62b3fed3a1d9a Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Mon, 2 Oct 2023 08:19:37 +0800
Subject: [PATCH 246/268] chore(pt-br): replace old-style specification tables
 part2 (#15991)

---
 files/pt-br/web/css/margin-bottom/index.md            |  7 +------
 files/pt-br/web/css/margin-top/index.md               |  7 +------
 files/pt-br/web/css/mask/index.md                     |  5 +----
 files/pt-br/web/css/min-height/index.md               |  7 +------
 files/pt-br/web/css/mix-blend-mode/index.md           |  4 +---
 files/pt-br/web/css/number/index.md                   |  7 +------
 files/pt-br/web/css/offset/index.md                   |  4 +---
 files/pt-br/web/css/opacity/index.md                  |  5 +----
 files/pt-br/web/css/outline/index.md                  |  5 +----
 files/pt-br/web/css/overflow/index.md                 |  5 +----
 files/pt-br/web/css/padding-left/index.md             |  7 +------
 files/pt-br/web/css/padding/index.md                  |  6 +-----
 files/pt-br/web/css/pointer-events/index.md           |  6 +-----
 files/pt-br/web/css/position/index.md                 |  5 +----
 files/pt-br/web/css/pseudo-classes/index.md           | 11 +----------
 files/pt-br/web/css/ruby-align/index.md               |  4 +---
 files/pt-br/web/css/scroll-behavior/index.md          |  4 +---
 files/pt-br/web/css/scrollbar-color/index.md          |  4 +---
 files/pt-br/web/css/specified_value/index.md          |  4 +---
 files/pt-br/web/css/text-align/index.md               |  7 +------
 files/pt-br/web/css/text-decoration-style/index.md    |  4 +---
 files/pt-br/web/css/text-decoration/index.md          |  6 +-----
 files/pt-br/web/css/text-rendering/index.md           |  6 +-----
 .../web/css/transform-function/translate/index.md     |  4 +---
 files/pt-br/web/css/transform-style/index.md          |  4 +---
 files/pt-br/web/css/transition-delay/index.md         |  4 +---
 files/pt-br/web/css/type_selectors/index.md           |  7 +------
 files/pt-br/web/css/universal_selectors/index.md      |  6 +-----
 files/pt-br/web/css/var/index.md                      |  4 +---
 files/pt-br/web/css/visibility/index.md               |  7 +------
 files/pt-br/web/css/white-space/index.md              |  5 +----
 files/pt-br/web/css/width/index.md                    |  8 +-------
 files/pt-br/web/css/will-change/index.md              |  4 +---
 files/pt-br/web/css/word-break/index.md               |  4 +---
 files/pt-br/web/html/element/abbr/index.md            |  6 +-----
 files/pt-br/web/html/element/address/index.md         |  6 +-----
 files/pt-br/web/html/element/area/index.md            |  6 +-----
 files/pt-br/web/html/element/aside/index.md           |  5 +----
 files/pt-br/web/html/element/b/index.md               |  6 +-----
 files/pt-br/web/html/element/base/index.md            |  6 +-----
 files/pt-br/web/html/element/bdi/index.md             |  5 +----
 files/pt-br/web/html/element/bdo/index.md             |  6 +-----
 files/pt-br/web/html/element/body/index.md            |  6 +-----
 files/pt-br/web/html/element/br/index.md              |  6 +-----
 files/pt-br/web/html/element/button/index.md          |  6 +-----
 files/pt-br/web/html/element/code/index.md            |  6 +-----
 files/pt-br/web/html/element/dd/index.md              |  6 +-----
 files/pt-br/web/html/element/dfn/index.md             |  6 +-----
 files/pt-br/web/html/element/dialog/index.md          |  5 +----
 files/pt-br/web/html/element/div/index.md             |  6 +-----
 files/pt-br/web/html/element/dt/index.md              |  6 +-----
 files/pt-br/web/html/element/em/index.md              |  6 +-----
 files/pt-br/web/html/element/embed/index.md           |  5 +----
 files/pt-br/web/html/element/fieldset/index.md        |  7 +------
 files/pt-br/web/html/element/figcaption/index.md      |  5 +----
 files/pt-br/web/html/element/header/index.md          |  5 +----
 .../pt-br/web/html/element/heading_elements/index.md  |  6 +-----
 files/pt-br/web/html/element/hr/index.md              |  7 +------
 files/pt-br/web/html/element/html/index.md            |  6 +-----
 files/pt-br/web/html/element/i/index.md               |  6 +-----
 files/pt-br/web/html/element/iframe/index.md          |  6 +-----
 files/pt-br/web/html/element/img/index.md             |  6 +-----
 files/pt-br/web/html/element/input/checkbox/index.md  |  6 +-----
 files/pt-br/web/html/element/input/index.md           |  6 +-----
 files/pt-br/web/html/element/input/password/index.md  |  5 +----
 files/pt-br/web/html/element/label/index.md           |  6 +-----
 files/pt-br/web/html/element/li/index.md              |  6 +-----
 files/pt-br/web/html/element/link/index.md            |  6 +-----
 files/pt-br/web/html/element/main/index.md            |  6 +-----
 files/pt-br/web/html/element/map/index.md             |  6 +-----
 files/pt-br/web/html/element/mark/index.md            |  5 +----
 files/pt-br/web/html/element/meta/index.md            |  7 +------
 files/pt-br/web/html/element/noscript/index.md        |  6 +-----
 files/pt-br/web/html/element/ol/index.md              |  6 +-----
 files/pt-br/web/html/element/optgroup/index.md        |  6 +-----
 files/pt-br/web/html/element/option/index.md          |  6 +-----
 files/pt-br/web/html/element/p/index.md               |  6 +-----
 files/pt-br/web/html/element/picture/index.md         |  4 +---
 files/pt-br/web/html/element/pre/index.md             |  6 +-----
 files/pt-br/web/html/element/q/index.md               |  6 +-----
 files/pt-br/web/html/element/ruby/index.md            |  5 +----
 files/pt-br/web/html/element/s/index.md               |  5 +----
 files/pt-br/web/html/element/section/index.md         |  6 +-----
 files/pt-br/web/html/element/select/index.md          |  6 +-----
 files/pt-br/web/html/element/span/index.md            |  6 +-----
 files/pt-br/web/html/element/strong/index.md          |  6 +-----
 files/pt-br/web/html/element/style/index.md           |  6 +-----
 files/pt-br/web/html/element/template/index.md        |  5 +----
 files/pt-br/web/html/element/tfoot/index.md           |  5 +----
 files/pt-br/web/html/element/th/index.md              |  5 +----
 files/pt-br/web/html/element/title/index.md           |  6 +-----
 .../web/html/global_attributes/accesskey/index.md     |  8 +-------
 .../html/global_attributes/autocapitalize/index.md    |  4 +---
 files/pt-br/web/html/global_attributes/class/index.md |  7 +------
 .../html/global_attributes/contenteditable/index.md   |  7 +------
 .../web/html/global_attributes/data-_star_/index.md   |  6 +-----
 .../pt-br/web/html/global_attributes/hidden/index.md  |  6 +-----
 files/pt-br/web/html/global_attributes/id/index.md    |  7 +------
 files/pt-br/web/html/global_attributes/index.md       |  7 +------
 files/pt-br/web/html/global_attributes/lang/index.md  |  7 +------
 100 files changed, 100 insertions(+), 476 deletions(-)

diff --git a/files/pt-br/web/css/margin-bottom/index.md b/files/pt-br/web/css/margin-bottom/index.md
index 69b6bea691ecc8..7b1fc5f90f2d76 100644
--- a/files/pt-br/web/css/margin-bottom/index.md
+++ b/files/pt-br/web/css/margin-bottom/index.md
@@ -95,12 +95,7 @@ div {
 
 ## Especificações
 
-| Especificação                                                         | Status                        | Comentário                                |
-| --------------------------------------------------------------------- | ----------------------------- | ----------------------------------------- |
-| {{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}           | {{Spec2('CSS3 Box')}}         | Nenhuma mudança significativa             |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}  | {{Spec2('CSS3 Transitions')}} | Definir o `margin-bottom` como "animavel" |
-| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}} | {{Spec2('CSS2.1')}}           | Remove seu efeito nos elementos in-line.  |
-| {{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}               | {{Spec2('CSS1')}}             | Definição inicial                         |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/margin-top/index.md b/files/pt-br/web/css/margin-top/index.md
index 6435516e420553..2681c52b1a9402 100644
--- a/files/pt-br/web/css/margin-top/index.md
+++ b/files/pt-br/web/css/margin-top/index.md
@@ -62,12 +62,7 @@ margin-top: unset;
 
 ## Especificações
 
-| Especificação                                                      | Status                        | Comentário                              |
-| ------------------------------------------------------------------ | ----------------------------- | --------------------------------------- |
-| {{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}              | {{Spec2('CSS3 Box')}}         | Sem mudança significativa.              |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}  | {{Spec2('CSS3 Transitions')}} | Define `margin-top` como animável.      |
-| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}} | {{Spec2('CSS2.1')}}           | Remove esse efeito em elementos inline. |
-| {{SpecName('CSS1', '#margin-top', 'margin-top')}}                  | {{Spec2('CSS1')}}             | Definição inicial.                      |
+{{Specifications}}
 
 ## Compatibilidade de navegadores
 
diff --git a/files/pt-br/web/css/mask/index.md b/files/pt-br/web/css/mask/index.md
index 7bf3aca3302eec..8fea3c3485aa53 100644
--- a/files/pt-br/web/css/mask/index.md
+++ b/files/pt-br/web/css/mask/index.md
@@ -55,10 +55,7 @@ Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma másc
 
 ## Especificações
 
-| Especificação                                               | Estado                 | Comentário                                                                                                                                                               |
-| ----------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{SpecName("CSS Masks", "#the-mask", 'mask')}}              | {{Spec2("CSS Masks")}} | Estende-se a sua utilização para elementos HTML. Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da `mask-*` definidos nessa especificação. |
-| {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}}    | Definição inicial.                                                                                                                                                       |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/min-height/index.md b/files/pt-br/web/css/min-height/index.md
index b5bd32520dca63..a596f8e4f1cc79 100644
--- a/files/pt-br/web/css/min-height/index.md
+++ b/files/pt-br/web/css/min-height/index.md
@@ -58,12 +58,7 @@ form {
 
 ## Especificações
 
-| Especificação                                                          | Status                          | Comentário                                                                                                                                                                                                                                                                                                                                                                                                  |
-| ---------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}  | {{ Spec2('CSS3 Sizing') }}      | Adds the `max-content`, `min-content`, `fit-content`, and `fill-available` keywords. _Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec._                                                                                                                                                                                          |
-| {{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}              | {{ Spec2('CSS3 Flexbox') }}     | An [earlier revision of the spec](https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/) added the `auto` keyword and used it as the initial value. The CSSWG subsequently resolved to revert this change, however. As of March 29, 2013, the latest [Editor's Draft](http://dev.w3.org/csswg/css-flexbox/) doesn't modify the `min-width` property anymore (i.e. it no longer introduces the `auto` value). |
-| {{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}    | {{ Spec2('CSS3 Transitions') }} | Defines `min-height` as animatable.                                                                                                                                                                                                                                                                                                                                                                         |
-| {{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }} | {{ Spec2('CSS2.1') }}           | Initial definition.                                                                                                                                                                                                                                                                                                                                                                                         |
+{{Specifications}}
 
 ## Navegadores compatíveis
 
diff --git a/files/pt-br/web/css/mix-blend-mode/index.md b/files/pt-br/web/css/mix-blend-mode/index.md
index 08dfc25f621e63..6fce0052191b8e 100644
--- a/files/pt-br/web/css/mix-blend-mode/index.md
+++ b/files/pt-br/web/css/mix-blend-mode/index.md
@@ -69,9 +69,7 @@ circle {
 
 ## Especificações
 
-| Specification                                                      | Status                     | Comment                |
-| ------------------------------------------------------------------ | -------------------------- | ---------------------- |
-| {{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }} | {{ Spec2('Compositing') }} | Initial specification. |
+{{Specifications}}
 
 ## Compatibilidade de navegadores
 
diff --git a/files/pt-br/web/css/number/index.md b/files/pt-br/web/css/number/index.md
index 84c5b38baba898..a6bf2f34ef24ae 100644
--- a/files/pt-br/web/css/number/index.md
+++ b/files/pt-br/web/css/number/index.md
@@ -41,12 +41,7 @@ Quando animado, os valores de `<number>` são interpolados como números reais e
 
 ## Especificações
 
-| Especificações                                                   | Status                   | Comentário                    |
-| ---------------------------------------------------------------- | ------------------------ | ----------------------------- |
-| {{SpecName("CSS4 Values", "#numbers", "&lt;number&gt;")}}        | {{Spec2("CSS4 Values")}} | Nenhuma mudança significante. |
-| {{SpecName("CSS3 Values", "#numbers", "&lt;number&gt;")}}        | {{Spec2("CSS3 Values")}} | Nenhuma mudança significante. |
-| {{SpecName("CSS2.1", "syndata.html#numbers", "&lt;number&gt;")}} | {{Spec2("CSS2.1")}}      | Definição explícita.          |
-| {{SpecName("CSS1", "", "&lt;number&gt;")}}                       | {{Spec2("CSS1")}}        | Definição implícita..         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/offset/index.md b/files/pt-br/web/css/offset/index.md
index f713451ede6ffe..dfdb1ca57ee695 100644
--- a/files/pt-br/web/css/offset/index.md
+++ b/files/pt-br/web/css/offset/index.md
@@ -76,9 +76,7 @@ offset: url(arc.svg) 30deg / 50px 100px;
 
 ## Especificações
 
-| Especificação                                                      | Status                           | Comentário        |
-| ------------------------------------------------------------------ | -------------------------------- | ----------------- |
-| {{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}} | {{Spec2('Motion Path Level 1')}} | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/opacity/index.md b/files/pt-br/web/css/opacity/index.md
index cc3cdec6677c4d..17c6f3a51796b0 100644
--- a/files/pt-br/web/css/opacity/index.md
+++ b/files/pt-br/web/css/opacity/index.md
@@ -113,10 +113,7 @@ img.opacity:hover {
 
 ## Especificações
 
-| Especificação                                                  | Status                        | Comentário                    |
-| -------------------------------------------------------------- | ----------------------------- | ----------------------------- |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}} | {{Spec2('CSS3 Transitions')}} | Define opacity como animável. |
-| {{SpecName('CSS3 Colors', '#opacity', 'opacity')}}             | {{Spec2('CSS3 Colors')}}      | Definição inicial.            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/outline/index.md b/files/pt-br/web/css/outline/index.md
index 8fed72df4538d8..e2698561dac6f4 100644
--- a/files/pt-br/web/css/outline/index.md
+++ b/files/pt-br/web/css/outline/index.md
@@ -59,10 +59,7 @@ Um, dois ou três valores, dada em ordem arbitrária:
 
 ## Especificações
 
-| Especificação                                                | Estado                     | Comentário         |
-| ------------------------------------------------------------ | -------------------------- | ------------------ |
-| {{SpecName('CSS3 Basic UI', '#outline', 'outline')}}         | {{Spec2('CSS3 Basic UI')}} | No change          |
-| {{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}} | {{Spec2('CSS2.1')}}        | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/overflow/index.md b/files/pt-br/web/css/overflow/index.md
index ab6d9a95374bfd..b7c8f700272e78 100644
--- a/files/pt-br/web/css/overflow/index.md
+++ b/files/pt-br/web/css/overflow/index.md
@@ -79,10 +79,7 @@ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor
 
 ## Especificações
 
-| Especificação                                                | Status                  | Comment        |
-| ------------------------------------------------------------ | ----------------------- | -------------- |
-| {{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}         | {{ Spec2('CSS3 Box') }} | Sem alteração. |
-| {{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }} | {{ Spec2('CSS2.1') }}   |                |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/padding-left/index.md b/files/pt-br/web/css/padding-left/index.md
index 11ccf5dc5c1bcd..2adeb4650262aa 100644
--- a/files/pt-br/web/css/padding-left/index.md
+++ b/files/pt-br/web/css/padding-left/index.md
@@ -46,12 +46,7 @@ padding-left: inherit
 
 ## Especificações
 
-| Especificação                                                           | Status                          | Comentário                             |
-| ----------------------------------------------------------------------- | ------------------------------- | -------------------------------------- |
-| {{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}              | {{ Spec2('CSS3 Box') }}         | Nenhuma mudança.                       |
-| {{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}   | {{ Spec2('CSS3 Transitions') }} | Define `padding-left` como animatable. |
-| {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }} | {{ Spec2('CSS2.1') }}           | Nenhuma mudança.                       |
-| {{ Specname('CSS1', '#padding-left', 'padding-left') }}                 | {{ Spec2('CSS1') }}             | Definição inicial.                     |
+{{Specifications}}
 
 ## Compatibilidade do Navegador
 
diff --git a/files/pt-br/web/css/padding/index.md b/files/pt-br/web/css/padding/index.md
index ec847a0192a666..b84464bb10f350 100644
--- a/files/pt-br/web/css/padding/index.md
+++ b/files/pt-br/web/css/padding/index.md
@@ -110,11 +110,7 @@ h3 {
 
 ## Especificações
 
-| Especificação                                                   | Status                  | Observações       |
-| --------------------------------------------------------------- | ----------------------- | ----------------- |
-| {{ SpecName('CSS3 Box', '#the-padding', 'padding') }}           | {{ Spec2('CSS3 Box') }} | Sem alteração     |
-| {{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }} | {{ Spec2('CSS2.1') }}   | Sem alteração     |
-| {{ Specname('CSS1', '#padding', 'padding') }}                   | {{ Spec2('CSS1') }}     | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade
 
diff --git a/files/pt-br/web/css/pointer-events/index.md b/files/pt-br/web/css/pointer-events/index.md
index b72a2f9c53d486..730071b3d5338d 100644
--- a/files/pt-br/web/css/pointer-events/index.md
+++ b/files/pt-br/web/css/pointer-events/index.md
@@ -98,11 +98,7 @@ Esta propriedade pode também ser usada para alcançar melhores taxas de quadros
 
 ## Especificações
 
-| Especificações                                                                  | Status              | Comentário |
-| ------------------------------------------------------------------------------- | ------------------- | ---------- |
-| {{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}} | {{Spec2('SVG1.1')}} |            |
-
-Se extende para elementos HTML, embora presente nos primeiros rascunhos do Módulo Básico de Interface do Usuário do CSS nivel 3, foi empurrado para o [nível 4](http://wiki.csswg.org/spec/css4-ui#pointer-events).
+{{Specifications}}
 
 ## Compatibilidade do navegador
 
diff --git a/files/pt-br/web/css/position/index.md b/files/pt-br/web/css/position/index.md
index 0d523d2ce22bab..eeef7f2107b42b 100644
--- a/files/pt-br/web/css/position/index.md
+++ b/files/pt-br/web/css/position/index.md
@@ -329,10 +329,7 @@ Scrolling elements containing `fixed` or `sticky` content can cause performance
 
 ## Especificações
 
-| Specification                                                       | Status                        | Comment                       |
-| ------------------------------------------------------------------- | ----------------------------- | ----------------------------- |
-| {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} | {{Spec2('CSS2.1')}}           |                               |
-| {{SpecName('CSS3 Positioning','#position-property','position')}}    | {{Spec2('CSS3 Positioning')}} | Adds `sticky` property value. |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/pseudo-classes/index.md b/files/pt-br/web/css/pseudo-classes/index.md
index 03749fcfc74fd1..e66851c2258ae1 100644
--- a/files/pt-br/web/css/pseudo-classes/index.md
+++ b/files/pt-br/web/css/pseudo-classes/index.md
@@ -72,16 +72,7 @@ Assim como nas classes regulares, você pode encadear juntas quantas pseudo-clas
 
 ## Especificações
 
-| Especificação                   | Status                       | Comentário                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| ------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{ SpecName('Fullscreen') }}    | {{ Spec2('Fullscreen') }}    | Define `:fullscreen`.                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| {{ SpecName('HTML WHATWG') }}   | {{ Spec2('HTML WHATWG') }}   | Nenhuma mudança de {{ SpecName('HTML5 W3C') }}.                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| {{SpecName('CSS4 Selectors')}}  | {{Spec2('CSS4 Selectors')}}  | Define `:any-link`, `:local-link`, `:scope`, `:active-drop-target`, `:valid-drop-target`, `:invalid-drop-target`, `:current`, `:past`, `:future`, `:placeholder-shown`, `:user-error`, `:blank`, `:nth-match()`, `:nth-last-match()`, `:nth-column()`, `:nth-last-column()`, e `:matches()`. Nenhuma mudança significante das pseudo-classes definidas em {{SpecName('CSS3 Selectors')}} e {{SpecName('HTML5 W3C')}} (embora o significado semântico que não foram retomadas). |
-| {{ SpecName('HTML5 W3C') }}     | {{ Spec2('HTML5 W3C') }}     | Define o siginificado semântico no contexto do HTML `:link`, `:visited`, `:active`, `:enabled`, `:disabled`, `:checked`, e `:indeterminate`. Define `:default`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only`, `:read-write`, e `:dir()`.                                                                                                                                                                                         |
-| {{ SpecName('CSS3 Basic UI') }} | {{ Spec2('CSS3 Basic UI') }} | Define `:default`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only`, e `:read-write`, mas sem associar significado semântico.                                                                                                                                                                                                                                                                                                        |
-| {{SpecName('CSS3 Selectors')}}  | {{Spec2('CSS3 Selectors')}}  | Define `:target`, `:root`, `:nth-child()`, `:nth-last-of-child()`, `:nth-of-type()`, `:nth-last-of-type()`, `:last-child`, `:first-of-type`, `:last-of-type`, `:only-child`, `:only-of-type`, `:empty`, e `:not()`. Denife a sintaxe de `:enabled`, `:disabled`, `:checked`, e `:indeterminate`, mas sem o significado semântico associado. Nenhuma mudança significativa, para as pseudo-classes definidas em {{SpecName('CSS2.1')}}.                                         |
-| {{SpecName('CSS2.1')}}          | {{Spec2('CSS2.1')}}          | Define `:lang()`, `:first-child`, `:hover`, e `:focus`. Nenhuma mudança significativa, para as pseudo-classes definidas em{{SpecName('CSS1')}}.                                                                                                                                                                                                                                                                                                                                |
-| {{SpecName('CSS1')}}            | {{Spec2('CSS1')}}            | Define `:link`, `:visited`, e `:active`, mas sem o significado semântico associado.                                                                                                                                                                                                                                                                                                                                                                                            |
+{{Specifications}}
 
 ## Veja também
 
diff --git a/files/pt-br/web/css/ruby-align/index.md b/files/pt-br/web/css/ruby-align/index.md
index 64d2bdbbb242b2..89827ed5432e9f 100644
--- a/files/pt-br/web/css/ruby-align/index.md
+++ b/files/pt-br/web/css/ruby-align/index.md
@@ -130,9 +130,7 @@ Isso dará o seguinte resultado:
 
 ## Especificações
 
-| Especificação                                                   | Status                 | Comentário         |
-| --------------------------------------------------------------- | ---------------------- | ------------------ |
-| {{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}} | {{Spec2('CSS3 Ruby')}} | Definição inicital |
+{{Specifications}}
 
 ## Compatilibade de Navegador
 
diff --git a/files/pt-br/web/css/scroll-behavior/index.md b/files/pt-br/web/css/scroll-behavior/index.md
index 7b71c40a063ed2..c44c77b2236215 100644
--- a/files/pt-br/web/css/scroll-behavior/index.md
+++ b/files/pt-br/web/css/scroll-behavior/index.md
@@ -99,9 +99,7 @@ scroll-page {
 
 ## Especificações
 
-| Especificações                                                            | Status                  | Comentário             |
-| ------------------------------------------------------------------------- | ----------------------- | ---------------------- |
-| {{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}} | {{Spec2('CSSOM View')}} | Especificações inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegador
 
diff --git a/files/pt-br/web/css/scrollbar-color/index.md b/files/pt-br/web/css/scrollbar-color/index.md
index d8ff056da84b78..5e5c8163fd6f5a 100644
--- a/files/pt-br/web/css/scrollbar-color/index.md
+++ b/files/pt-br/web/css/scrollbar-color/index.md
@@ -84,9 +84,7 @@ When using `scrollbar-color` property with specific color values, authors should
 
 ## Especificações
 
-| Specification                                                         | Status                      | Comment             |
-| --------------------------------------------------------------------- | --------------------------- | ------------------- |
-| {{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}} | {{Spec2("CSS Scrollbars")}} | Initial definition. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/specified_value/index.md b/files/pt-br/web/css/specified_value/index.md
index 90820002469251..0c64882593203a 100644
--- a/files/pt-br/web/css/specified_value/index.md
+++ b/files/pt-br/web/css/specified_value/index.md
@@ -13,9 +13,7 @@ O **valor especificado** de uma propriedade CSS está definido em uma de três m
 
 ## Especificações
 
-| Especificações                                                           | Status              | Comentario        |
-| ------------------------------------------------------------------------ | ------------------- | ----------------- |
-| {{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}} | {{Spec2("CSS2.1")}} | Definição inicial |
+{{Specifications}}
 
 ## Veja também
 
diff --git a/files/pt-br/web/css/text-align/index.md b/files/pt-br/web/css/text-align/index.md
index f96827d890fa73..eda14dadad6597 100644
--- a/files/pt-br/web/css/text-align/index.md
+++ b/files/pt-br/web/css/text-align/index.md
@@ -159,12 +159,7 @@ O modo compátivel-padrão de centralizar um bloco em si sem centralizar seu con
 
 ## Especificações
 
-| Especificação                                                       | Status                              | Comentário                                                                                                        |
-| ------------------------------------------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS Logical Properties', '#text-align', 'text-align')}} | {{Spec2('CSS Logical Properties')}} | Sem mudanças                                                                                                      |
-| {{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}     | {{Spec2('CSS3 Text')}}              | Added the `start`, `end`, and `match-parent` values. Changed the unnamed initial value to `start` (which it was). |
-| {{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}    | {{Spec2('CSS2.1')}}                 | Sem mudanças                                                                                                      |
-| {{SpecName('CSS1', '#text-align', 'text-align')}}                   | {{Spec2('CSS1')}}                   | Definição iniciaç                                                                                                 |
+{{Specifications}}
 
 ## Browser compatibilidade
 
diff --git a/files/pt-br/web/css/text-decoration-style/index.md b/files/pt-br/web/css/text-decoration-style/index.md
index 4ae3457bead73e..3bd46b3368eb6a 100644
--- a/files/pt-br/web/css/text-decoration-style/index.md
+++ b/files/pt-br/web/css/text-decoration-style/index.md
@@ -80,9 +80,7 @@ text-decoration-style: unset;
 
 ## Especificações
 
-| Specification                                                                             | Status                              | Comment                                                                                    |
-| ----------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------ |
-| {{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }} | {{ Spec2('CSS3 Text Decoration') }} | Initial definition. The {{cssxref("text-decoration")}} property wasn't a shorthand before. |
+{{Specifications}}
 
 ## Browser compatíveis
 
diff --git a/files/pt-br/web/css/text-decoration/index.md b/files/pt-br/web/css/text-decoration/index.md
index cc5254a27d539f..eebde2cc3b3b53 100644
--- a/files/pt-br/web/css/text-decoration/index.md
+++ b/files/pt-br/web/css/text-decoration/index.md
@@ -80,11 +80,7 @@ p.underover {
 
 ## Especificações
 
-| Especificação                                                                        | Status                            | Comentários                                                                                                     |
-| ------------------------------------------------------------------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}} | {{Spec2('CSS3 Text Decoration')}} | Transformado em uma propriedade reduzida. Adicionado suporte para o valor {{cssxref('text-decoration-style')}}. |
-| {{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}         | {{Spec2('CSS2.1')}}               | Sem mudanças significantes.                                                                                     |
-| {{SpecName('CSS1', '#text-decoration', 'text-decoration')}}                          | {{Spec2('CSS1')}}                 | Definição inicial.                                                                                              |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/text-rendering/index.md b/files/pt-br/web/css/text-rendering/index.md
index b7a0c319bddf8b..6d4cb353e536d7 100644
--- a/files/pt-br/web/css/text-rendering/index.md
+++ b/files/pt-br/web/css/text-rendering/index.md
@@ -68,11 +68,7 @@ A opção optimizeSpeed não tem efeito na versão 2.0 do Gecko, devido ao códi
 
 ## Especificações
 
-| Specification                                                                     | Status                | Comment |
-| --------------------------------------------------------------------------------- | --------------------- | ------- |
-| {{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }} | {{ Spec2('SVG1.1') }} |         |
-
-Essa é uma especificação SVG, e não é definida em nenhum padrão CSS. Gecko (Firefox) e WebKit aplicam a propriedade `text-rendering` para códigos HTML e XML.
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/transform-function/translate/index.md b/files/pt-br/web/css/transform-function/translate/index.md
index d5dbfc841be9d0..f537e8718fd8fe 100644
--- a/files/pt-br/web/css/transform-function/translate/index.md
+++ b/files/pt-br/web/css/transform-function/translate/index.md
@@ -162,9 +162,7 @@ div {
 
 ## Especificações
 
-| Especificações                                                                 | Estado                       | Comentário        |
-| ------------------------------------------------------------------------------ | ---------------------------- | ----------------- |
-| {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}} | {{Spec2('CSS3 Transforms')}} | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/transform-style/index.md b/files/pt-br/web/css/transform-style/index.md
index 2af7b64122b447..76ffcad6959db4 100644
--- a/files/pt-br/web/css/transform-style/index.md
+++ b/files/pt-br/web/css/transform-style/index.md
@@ -37,9 +37,7 @@ transform-style: unset;
 
 ## Especificações
 
-| Specification                                                                    | Status                        | Comment             |
-| -------------------------------------------------------------------------------- | ----------------------------- | ------------------- |
-| {{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}} | {{Spec2('CSS Transforms 2')}} | Initial definition. |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/transition-delay/index.md b/files/pt-br/web/css/transition-delay/index.md
index ac7acd9579a87e..f76608ff03d961 100644
--- a/files/pt-br/web/css/transition-delay/index.md
+++ b/files/pt-br/web/css/transition-delay/index.md
@@ -327,9 +327,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 
 ## Especificações
 
-| Especificação                                                                      | Status                        | Comentário        |
-| ---------------------------------------------------------------------------------- | ----------------------------- | ----------------- |
-| {{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}} | {{Spec2('CSS3 Transitions')}} | Definição inicial |
+{{Specifications}}
 
 {{cssinfo}}
 
diff --git a/files/pt-br/web/css/type_selectors/index.md b/files/pt-br/web/css/type_selectors/index.md
index 25b84916a18d60..f48832b772c9b2 100644
--- a/files/pt-br/web/css/type_selectors/index.md
+++ b/files/pt-br/web/css/type_selectors/index.md
@@ -44,12 +44,7 @@ span {
 
 ## Especificações
 
-| Especificação                                                                 | Status                      | Comment           |
-| ----------------------------------------------------------------------------- | --------------------------- | ----------------- |
-| {{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}} | {{Spec2('CSS4 Selectors')}} | Sem mudanças      |
-| {{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}           | {{Spec2('CSS3 Selectors')}} | Sem mudanças      |
-| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}      | {{Spec2('CSS2.1')}}         |                   |
-| {{SpecName('CSS1', '#basic-concepts', 'type selectors')}}                     | {{Spec2('CSS1')}}           | Definição Inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/universal_selectors/index.md b/files/pt-br/web/css/universal_selectors/index.md
index de5c21d9e902c5..0a3132a88ac299 100644
--- a/files/pt-br/web/css/universal_selectors/index.md
+++ b/files/pt-br/web/css/universal_selectors/index.md
@@ -72,11 +72,7 @@ O asterisco é opcional para seletores simples. Por exemplo, `*.atencao` e `.ate
 
 ## Especificações
 
-| Especificação                                                                   | Status                      | Comentário                                                                                                                        |
-| ------------------------------------------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}  | {{Spec2('CSS4 Selectors')}} | Sem mudanças                                                                                                                      |
-| {{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}      | {{Spec2('CSS3 Selectors')}} | Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos |
-| {{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}} | {{Spec2('CSS2.1')}}         | Definição inicial                                                                                                                 |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/var/index.md b/files/pt-br/web/css/var/index.md
index 1f74c80e956b00..bb196f7aecfec3 100644
--- a/files/pt-br/web/css/var/index.md
+++ b/files/pt-br/web/css/var/index.md
@@ -59,9 +59,7 @@ body {
 
 ## Especificações
 
-| Especificação                                               | Status                      | Comentário        |
-| ----------------------------------------------------------- | --------------------------- | ----------------- |
-| {{SpecName('CSS3 Variables', '#using-variables', 'var()')}} | {{Spec2('CSS3 Variables')}} | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/visibility/index.md b/files/pt-br/web/css/visibility/index.md
index 53bb214be632bd..8b034cb4ac161b 100644
--- a/files/pt-br/web/css/visibility/index.md
+++ b/files/pt-br/web/css/visibility/index.md
@@ -127,12 +127,7 @@ td {
 
 ## Especificações
 
-| Especificações                                                     | Status                        | Comentários                                               |
-| ------------------------------------------------------------------ | ----------------------------- | --------------------------------------------------------- |
-| {{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}} | {{Spec2('CSS3 Flexbox')}}     | Defines the `collapse` value as it applies to flex items. |
-| {{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}         | {{Spec2('CSS3 Box')}}         | Nenhuma alteração.                                        |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}  | {{Spec2('CSS3 Transitions')}} | Defines `visibility` as animatable.                       |
-| {{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}     | {{Spec2('CSS2.1')}}           | Definição inicial.                                        |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/white-space/index.md b/files/pt-br/web/css/white-space/index.md
index 8e6627f030c1bc..f4c9009e944903 100644
--- a/files/pt-br/web/css/white-space/index.md
+++ b/files/pt-br/web/css/white-space/index.md
@@ -60,10 +60,7 @@ code {
 
 ## Especificações
 
-| Especificação                                                       | Estado                 | Comentário                                   |
-| ------------------------------------------------------------------- | ---------------------- | -------------------------------------------- |
-| {{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}    | {{Spec2('CSS3 Text')}} | Aumenta a precisão dos algoritmos de quebra. |
-| {{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}} | {{Spec2('CSS2.1')}}    | Especificação inicial.                       |
+{{Specifications}}
 
 ## Compatibilidade de Navegadores
 
diff --git a/files/pt-br/web/css/width/index.md b/files/pt-br/web/css/width/index.md
index 0ca6eddd6d58b6..ca3263e9087dd2 100644
--- a/files/pt-br/web/css/width/index.md
+++ b/files/pt-br/web/css/width/index.md
@@ -165,13 +165,7 @@ p.minblue {
 
 ## Especificações
 
-| Especificação                                                         | Status                        | Comentários                                                                                                         |
-| --------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}} | {{Spec2('CSS3 Box')}}         | Adicionadas as palavras-chave `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box` |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}          | {{Spec2('CSS3 Transitions')}} | Lista a largura como animável.                                                                                      |
-| {{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}    | {{Spec2('CSS2.1')}}           | Determina em qual elemento vai ser aplicado.                                                                        |
-| {{SpecName('CSS1', '#width', 'width')}}                               | {{Spec2('CSS1')}}             | Definição inicial                                                                                                   |
-| {{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}        | {{Spec2('CSS3 Sizing')}}      | Adiciona novas palavras-chave para largura e altura.                                                                |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/will-change/index.md b/files/pt-br/web/css/will-change/index.md
index 8839d99277e4d3..c470518db4e2d6 100644
--- a/files/pt-br/web/css/will-change/index.md
+++ b/files/pt-br/web/css/will-change/index.md
@@ -92,9 +92,7 @@ Entretanto pode ser apropriado incluir `will-change` no seu estilo css para uma
 
 ## Especificações
 
-| Especificação                                                  | Estado                       | Comentário         |
-| -------------------------------------------------------------- | ---------------------------- | ------------------ |
-| {{SpecName('CSS Will Change', '#will-change', 'will-change')}} | {{Spec2('CSS Will Change')}} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/css/word-break/index.md b/files/pt-br/web/css/word-break/index.md
index 39e0fac1f5433d..3fc8e0c7104b2e 100644
--- a/files/pt-br/web/css/word-break/index.md
+++ b/files/pt-br/web/css/word-break/index.md
@@ -105,9 +105,7 @@ word-break: unset;
 
 ## Especificações
 
-| Especificação                                                   | Status                 | Commentário       |
-| --------------------------------------------------------------- | ---------------------- | ----------------- |
-| {{SpecName('CSS3 Text', '#word-break-property', 'word-break')}} | {{Spec2('CSS3 Text')}} | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/abbr/index.md b/files/pt-br/web/html/element/abbr/index.md
index 2ec524ad34c613..e30b9bab71da7d 100644
--- a/files/pt-br/web/html/element/abbr/index.md
+++ b/files/pt-br/web/html/element/abbr/index.md
@@ -51,11 +51,7 @@ Obama é presidente dos EUA
 
 ## Especificações
 
-| Especificação                                                                             | Estado                   | Comentário |
-| ----------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '&lt;abbr&gt;')}}       | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}                    | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/address/index.md b/files/pt-br/web/html/element/address/index.md
index 54fa5010137c00..dd07e187771728 100644
--- a/files/pt-br/web/html/element/address/index.md
+++ b/files/pt-br/web/html/element/address/index.md
@@ -51,11 +51,7 @@ Embora o elemento `address` exiba o texto com o mesmo estilo padrão que os elem
 
 ## Especificações
 
-| Especificação                                                                       | Estado                   | Comentário |
-| ----------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'sections.html#the-address-element', '&lt;address&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'sections.html#the-address-element', '&lt;address&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '&lt;address&gt;')}}           | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/area/index.md b/files/pt-br/web/html/element/area/index.md
index 65da202f89fb2e..17c07ccc8fe90d 100644
--- a/files/pt-br/web/html/element/area/index.md
+++ b/files/pt-br/web/html/element/area/index.md
@@ -72,11 +72,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
 ## Especificações
 
-| Especificação                                                                               | Estado                    | Comentário |
-| ------------------------------------------------------------------------------------------- | ------------------------- | ---------- |
-| {{SpecName ('HTML WHATWG', 'a-map-element.html # da-area-elemento', '&lt;area&gt;')}}       | {{Spec2 ('HTML WHATWG')}} |            |
-| {{SpecName ('HTML5 W3C', 'incorporado-content-0.html # da-area-elemento', '&lt;area&gt;')}} | {{Spec2 ('HTML5 W3C')}}   |            |
-| {{SpecName ('HTML4.01', 'struct / objects.html # h-13.6.1', '&lt;area&gt;')}}               | {{Spec2 ('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/aside/index.md b/files/pt-br/web/html/element/aside/index.md
index 9f52e5b2f08a1f..15cea7c32da603 100644
--- a/files/pt-br/web/html/element/aside/index.md
+++ b/files/pt-br/web/html/element/aside/index.md
@@ -31,10 +31,7 @@ Este elemento inclui apenas os [atributos globais](/pt-BR/docs/HTML/Global_attri
 
 ## Especificações
 
-| Especificaçao                                                                                                 | Status                   | Comentario |
-| ------------------------------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '&lt;aside&gt;')}}                               | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'the-aside-element.html#the-aside-element', '&lt;aside&gt;')}} {{todo("brokenLink")}} | {{Spec2('HTML5 W3C')}}   |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/b/index.md b/files/pt-br/web/html/element/b/index.md
index badae871c90cc7..564adee792be1e 100644
--- a/files/pt-br/web/html/element/b/index.md
+++ b/files/pt-br/web/html/element/b/index.md
@@ -44,11 +44,7 @@ Palavras-chave são exibidas com o estilo padrão do elemento \<b>, provavelment
 
 ## Especificações
 
-| Especificaçoes                                                                      | Estado                   | Comentário |
-| ----------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '&lt;b&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '&lt;b&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}             | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Navegadores Compatíveis
 
diff --git a/files/pt-br/web/html/element/base/index.md b/files/pt-br/web/html/element/base/index.md
index f33cf5be3057f2..ea2000925c5917 100644
--- a/files/pt-br/web/html/element/base/index.md
+++ b/files/pt-br/web/html/element/base/index.md
@@ -37,11 +37,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
 ## Especificações
 
-| Especificações                                                                  | Estado                   | Comentários |
-| ------------------------------------------------------------------------------- | ------------------------ | ----------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}  | {{Spec2('HTML WHATWG')}} |             |
-| {{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}} | {{Spec2('HTML5 W3C')}}   |             |
-| {{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}            | {{Spec2('HTML4.01')}}    |             |
+{{Specifications}}
 
 ## Navegadores Compatíveis
 
diff --git a/files/pt-br/web/html/element/bdi/index.md b/files/pt-br/web/html/element/bdi/index.md
index 34df5e207ca4c1..58449ddb6af460 100644
--- a/files/pt-br/web/html/element/bdi/index.md
+++ b/files/pt-br/web/html/element/bdi/index.md
@@ -32,10 +32,7 @@ Como todos os outros elementos do HTML, este elemento tem os atributos globais,
 
 ## Especificações
 
-| Specification                                                                           | Status                   | Comment |
-| --------------------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '&lt;bdi&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '&lt;bdi&gt;')}}        | {{Spec2('HTML5 W3C')}}   |         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/bdo/index.md b/files/pt-br/web/html/element/bdo/index.md
index 9178bd52290572..3ca1fc5921f48d 100644
--- a/files/pt-br/web/html/element/bdo/index.md
+++ b/files/pt-br/web/html/element/bdo/index.md
@@ -92,11 +92,7 @@ A especificação HTML 4 não especificam eventos para este elemento; eles foram
 
 ## Especificações
 
-| Especificação                                                                        | Status                   | Comentário |
-| ------------------------------------------------------------------------------------ | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}         | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '&lt;bdo&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}                      | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/body/index.md b/files/pt-br/web/html/element/body/index.md
index eccdfe1a0d7e5e..a373fc4f8c8b54 100644
--- a/files/pt-br/web/html/element/body/index.md
+++ b/files/pt-br/web/html/element/body/index.md
@@ -136,11 +136,7 @@ Estes elementos incluem os [atributos globais](/pt-BR/docs/Web/HTML/Global_attri
 
 ## Especificações
 
-| Especificação                                                                 | Status                   | Comentário                                                                                                                                                                                               |
-| ----------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', 'sections.html#the-body-element', '&lt;body&gt;')}} | {{Spec2('HTML WHATWG')}} | Changed the list of non-conforming features.                                                                                                                                                             |
-| {{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}   | {{Spec2('HTML5 W3C')}}   | Obsoleted the formerly deprecated attributes. Defined the behavior of the non-conforming and never standardized `margintop`, `marginleft`, `marginright` and `marginbottom`. Added the `on*` attributes. |
-| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}        | {{Spec2('HTML4.01')}}    | Deprecated the `alink`, `background`, `bgcolor`, `link`, `text` and `vlink` attributes.                                                                                                                  |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/br/index.md b/files/pt-br/web/html/element/br/index.md
index 5290db6be0de32..35a4912d35cfa1 100644
--- a/files/pt-br/web/html/element/br/index.md
+++ b/files/pt-br/web/html/element/br/index.md
@@ -87,11 +87,7 @@ USA
 
 ## Especificações
 
-| Especificação                                                                         | Status                   | Comentário |
-| ------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}                  | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com o browser
 
diff --git a/files/pt-br/web/html/element/button/index.md b/files/pt-br/web/html/element/button/index.md
index 1870ba82fe25c0..8d24eaaa377818 100644
--- a/files/pt-br/web/html/element/button/index.md
+++ b/files/pt-br/web/html/element/button/index.md
@@ -92,11 +92,7 @@ Note que esse botão possui CSS aplicado.
 
 ## Especificações
 
-| Especificações                                                                              | Status                   | Comentário |
-| ------------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '&lt;button&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}                | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}                    | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/code/index.md b/files/pt-br/web/html/element/code/index.md
index f9f9f985df5188..4f793f7fc5b09c 100644
--- a/files/pt-br/web/html/element/code/index.md
+++ b/files/pt-br/web/html/element/code/index.md
@@ -87,11 +87,7 @@ Uma regra CSS pode ser definida para o seletor `code` para sobrescrever a fonte
 
 ## Especificações
 
-| Especificação                                                                           | Status                   | Comentário |
-| --------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-code-element', '&lt;code&gt;')}}          | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '&lt;code&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;code&gt;')}}                    | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/dd/index.md b/files/pt-br/web/html/element/dd/index.md
index d618855fd61d9f..fe3c814acaa39f 100644
--- a/files/pt-br/web/html/element/dd/index.md
+++ b/files/pt-br/web/html/element/dd/index.md
@@ -75,11 +75,7 @@ Para exemplos, veja [os exemplos de \<dl>](/pt-BR/docs/Web/HTML/Element/dl#Exemp
 
 ## Especificações
 
-| Especificação                                                                   | Status                   | Comentário |
-| ------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '&lt;dd&gt;')}}      | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dd&gt;')}}              | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/dfn/index.md b/files/pt-br/web/html/element/dfn/index.md
index 8e9b600e4719dc..5de9c5b5b1d23e 100644
--- a/files/pt-br/web/html/element/dfn/index.md
+++ b/files/pt-br/web/html/element/dfn/index.md
@@ -66,11 +66,7 @@ _A Internet_ é um sistema global de redes interconectadas que usam o Internet P
 
 ## Especificações
 
-| Especificação                                                                           | Status                   | Comentário |
-| --------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-dfn-element', '&lt;dfn&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '&lt;dfn&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;dfn&gt;')}}                     | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Navegadores compatíveis
 
diff --git a/files/pt-br/web/html/element/dialog/index.md b/files/pt-br/web/html/element/dialog/index.md
index 30fb3987f2c0cf..0705e725759354 100644
--- a/files/pt-br/web/html/element/dialog/index.md
+++ b/files/pt-br/web/html/element/dialog/index.md
@@ -132,10 +132,7 @@ Este exemplo abre uma caixa de diálogo contendo um formulário quando o botão
 
 ## Especificações
 
-| Especificação                                                                             | Status                   | Comentário        |
-| ----------------------------------------------------------------------------------------- | ------------------------ | ----------------- |
-| {{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}            | {{Spec2('HTML WHATWG')}} |                   |
-| {{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}} | {{Spec2('HTML5.2')}}     | Difinição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/div/index.md b/files/pt-br/web/html/element/div/index.md
index 0a0638f8a32fdb..d8472aace50432 100644
--- a/files/pt-br/web/html/element/div/index.md
+++ b/files/pt-br/web/html/element/div/index.md
@@ -36,11 +36,7 @@ Qualquer tipo de conteúdo aqui. Como \<p>, \<table>. Você dá o nome!
 
 ## Especificações
 
-| Especificação                                                                       | Status                   | Comentário |
-| ----------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}               | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade dos navegadores
 
diff --git a/files/pt-br/web/html/element/dt/index.md b/files/pt-br/web/html/element/dt/index.md
index e75b1ad036399f..1e664b94c6ca28 100644
--- a/files/pt-br/web/html/element/dt/index.md
+++ b/files/pt-br/web/html/element/dt/index.md
@@ -23,11 +23,7 @@ Para exemplo veja [definição de lista](/pt-BR/docs/HTML/Element/dl#Examples).
 
 ## Especificações
 
-| Specification                                                                     | Status                   | Comment |
-| --------------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}   | {{Spec2('HTML5 W3C')}}   |         |
-| {{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dt&gt;')}}                | {{Spec2('HTML4.01')}}    |         |
+{{Specifications}}
 
 ## Navegadores compatíveis
 
diff --git a/files/pt-br/web/html/element/em/index.md b/files/pt-br/web/html/element/em/index.md
index 9ae47cc2690158..86e3bdd9cf77fe 100644
--- a/files/pt-br/web/html/element/em/index.md
+++ b/files/pt-br/web/html/element/em/index.md
@@ -96,11 +96,7 @@ Um exemplo para `<i>` poderia ser: "A _Rainha Mary_ velejou na noite passada". A
 
 ## Especificações
 
-| Especificação                                                                         | Status                   | Comentário |
-| ------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '&lt;em&gt;')}}    | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}                    | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/embed/index.md b/files/pt-br/web/html/element/embed/index.md
index cbdd4571ef7fc7..feb1ce02c81197 100644
--- a/files/pt-br/web/html/element/embed/index.md
+++ b/files/pt-br/web/html/element/embed/index.md
@@ -40,10 +40,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
 ## Especificações
 
-| Specification                                                                             | Status                   | Comment |
-| ----------------------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-embed-element', '&lt;embed&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '&lt;embed&gt;')}}   | {{Spec2('HTML5 W3C')}}   |         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/fieldset/index.md b/files/pt-br/web/html/element/fieldset/index.md
index 97374c0d77f79d..a4232e018bc289 100644
--- a/files/pt-br/web/html/element/fieldset/index.md
+++ b/files/pt-br/web/html/element/fieldset/index.md
@@ -371,12 +371,7 @@ O exemplo a seguinte é feito de puro HTML e CSS. Não contém javascript.
 
 ## Especificações
 
-| Especificação                                                                      | Status                   | Comentário                                                      |
-| ---------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}} | {{Spec2('HTML WHATWG')}} | Definição do elemento fieldset                                  |
-| {{SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')}}     | {{Spec2('HTML WHATWG')}} | Padrão sugerido de renderização dos elementos fieldset e legend |
-| {{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}   | {{Spec2('HTML5 W3C')}}   |                                                                 |
-| {{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}        | {{Spec2('HTML4.01')}}    | Definição inicial                                               |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/figcaption/index.md b/files/pt-br/web/html/element/figcaption/index.md
index 7cc2ec8be38cd4..ed1c3da9a6a96c 100644
--- a/files/pt-br/web/html/element/figcaption/index.md
+++ b/files/pt-br/web/html/element/figcaption/index.md
@@ -46,10 +46,7 @@ Por favor, consulte a página {{HTMLElement("figure")}} para visualizar o exempl
 
 ## Especificações
 
-| Especificação                                                                                   | Status                   | Comentário |
-| ----------------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-figcaption-element', '&lt;figcaption&gt;')}}      | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '&lt;figcaption&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/header/index.md b/files/pt-br/web/html/element/header/index.md
index 9937d1e9366b09..4578724a393a7d 100644
--- a/files/pt-br/web/html/element/header/index.md
+++ b/files/pt-br/web/html/element/header/index.md
@@ -34,10 +34,7 @@ Este elemento não possui outros atributos além dos [atributos globais](/pt-BR/
 
 ## Especificações
 
-| Especificação                                                                     | Status                   | Comentário |
-| --------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'sections.html#the-header-element', '&lt;header&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/heading_elements/index.md b/files/pt-br/web/html/element/heading_elements/index.md
index ac3057548e9bfb..ad67602c6e9caf 100644
--- a/files/pt-br/web/html/element/heading_elements/index.md
+++ b/files/pt-br/web/html/element/heading_elements/index.md
@@ -78,11 +78,7 @@ Em HTML 5, use o elemento {{HTMLElement("section")}} para definir o outline de u
 
 ## Especificações
 
-| Especificação                                                                                                                                                      | Status                   | Comentário |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}                               | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/hr/index.md b/files/pt-br/web/html/element/hr/index.md
index 5bd2e9f0b4d135..41d2b5bae5ee42 100644
--- a/files/pt-br/web/html/element/hr/index.md
+++ b/files/pt-br/web/html/element/hr/index.md
@@ -58,12 +58,7 @@ Para alterar a aparencia da linha ou as lacunas entre ela e os parágrafos, util
 
 ## Especificações
 
-| Especificação                                                                     | Status                   | Comentário                                       |
-| --------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------ |
-| {{SpecName('HTML WHATWG', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}} | {{Spec2('HTML WHATWG')}} | Definição do elemento `hr`                       |
-| {{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}                    | {{Spec2('HTML WHATWG')}} | Sugestão de renderização padrão do elemento `hr` |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}   | {{Spec2('HTML5 W3C')}}   |                                                  |
-| {{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}            | {{Spec2('HTML4.01')}}    |                                                  |
+{{Specifications}}
 
 ## Compatibilidade nos Navegadores
 
diff --git a/files/pt-br/web/html/element/html/index.md b/files/pt-br/web/html/element/html/index.md
index 623b8ab335ee7c..3d3d1d96daed94 100644
--- a/files/pt-br/web/html/element/html/index.md
+++ b/files/pt-br/web/html/element/html/index.md
@@ -45,11 +45,7 @@ Desde que o elemento `<html>` seja o primeiro em documento outro que comenta, es
 
 ## Especificações
 
-| Especificação                                                                       | Status                   | Comentário |
-| ----------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}      | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'the-html-element.html#the-html-element', '&lt;html&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'global.html#h-7.3', '&lt;html&gt;')}}                       | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade dos navegadores
 
diff --git a/files/pt-br/web/html/element/i/index.md b/files/pt-br/web/html/element/i/index.md
index 2a3ff45750262c..b57619140fc140 100644
--- a/files/pt-br/web/html/element/i/index.md
+++ b/files/pt-br/web/html/element/i/index.md
@@ -91,11 +91,7 @@ Uma boa ideia é usar o atributo **class** para identificar porque esse elemento
 
 ## Especificações
 
-| Especificação                                                                     | Status                   | Comentário |
-| --------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-i-element', '&lt;i&gt;')}}          | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}           | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/iframe/index.md b/files/pt-br/web/html/element/iframe/index.md
index 908b09c891b188..48b734c2be762c 100644
--- a/files/pt-br/web/html/element/iframe/index.md
+++ b/files/pt-br/web/html/element/iframe/index.md
@@ -131,11 +131,7 @@ Scripts trying to access a frame's content are subject to the [same-origin polic
 
 ## Especificações
 
-| Especificação                                                                               | Status                   | Comment |
-| ------------------------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-iframe-element', '&lt;iframe&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '&lt;iframe&gt;')}}   | {{Spec2('HTML5 W3C')}}   |         |
-| {{SpecName('HTML4.01', 'present/frames.html#h-16.5', '&lt;iframe&gt;')}}                    | {{Spec2('HTML4.01')}}    |         |
+{{Specifications}}
 
 ## Compatibilidade dos navegadores
 
diff --git a/files/pt-br/web/html/element/img/index.md b/files/pt-br/web/html/element/img/index.md
index 7a7085d9e5505a..78d5a93b5bb377 100644
--- a/files/pt-br/web/html/element/img/index.md
+++ b/files/pt-br/web/html/element/img/index.md
@@ -196,11 +196,7 @@ O valor do atributo `title` é geralmente mostrado ao usuário como uma dica, qu
 
 ## Especificações
 
-| Specification                                                                         | Status                   | Comment |
-| ------------------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'embedded-content-1.html#the-img-element', '&lt;img&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}   | {{Spec2('HTML5 W3C')}}   |         |
-| {{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}                 | {{Spec2('HTML4.01')}}    |         |
+{{Specifications}}
 
 ## Compatibilidade dos navegadores
 
diff --git a/files/pt-br/web/html/element/input/checkbox/index.md b/files/pt-br/web/html/element/input/checkbox/index.md
index 3eda748240a497..8c4ebece139cfb 100644
--- a/files/pt-br/web/html/element/input/checkbox/index.md
+++ b/files/pt-br/web/html/element/input/checkbox/index.md
@@ -290,11 +290,7 @@ otherCheckbox.onchange = function () {
 
 ## Especificações
 
-| Especificação                                                                                                             | Status                    | Comente |
-| ------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------- |
-|                                                                                                                           |                           |         |
-| {{SpecName ('HTML WHATWG', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '&lt;input type = "checkbox"&gt;')}} | {{Spec2 ('HTML WHATWG')}} |         |
-| {{SpecName ('HTML5 W3C', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '&lt;input type = "checkbox"&gt;')}}   | {{Spec2 ('HTML5 W3C')}}   |         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/input/index.md b/files/pt-br/web/html/element/input/index.md
index fd772a50cdd672..ed64d7d04f9f63 100644
--- a/files/pt-br/web/html/element/input/index.md
+++ b/files/pt-br/web/html/element/input/index.md
@@ -267,11 +267,7 @@ Você pode usar o atributo [`mozactionhint`](/pt-BR/docs/Web/HTML/Element/input#
 
 ## Especificações
 
-| Especificação                                                                            | Estado                   | Comentários |
-| ---------------------------------------------------------------------------------------- | ------------------------ | ----------- |
-| {{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '&lt;input&gt;')}} | {{Spec2('HTML WHATWG')}} |             |
-| {{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}               | {{Spec2('HTML5 W3C')}}   |             |
-| {{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}                   | {{Spec2('HTML4.01')}}    |             |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/input/password/index.md b/files/pt-br/web/html/element/input/password/index.md
index 3d09d636d3dceb..0c1e1815e5595a 100644
--- a/files/pt-br/web/html/element/input/password/index.md
+++ b/files/pt-br/web/html/element/input/password/index.md
@@ -238,10 +238,7 @@ cpf.oninput = function (event) {
 
 ## Especificações
 
-| Especificação                                                                                             | Status                   | Comentário        |
-| --------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------- |
-| {{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}} | {{Spec2('HTML WHATWG')}} | Definição inicial |
-| {{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}     | {{Spec2('HTML5.1')}}     | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/label/index.md b/files/pt-br/web/html/element/label/index.md
index 514e10d87ae8b6..6e59b0d3975bd6 100644
--- a/files/pt-br/web/html/element/label/index.md
+++ b/files/pt-br/web/html/element/label/index.md
@@ -48,11 +48,7 @@ A tecla de atalho para acessar este elemento a partir do teclado.
 
 ## Especificações
 
-| Specification                                                                | Status                   | Comment |
-| ---------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}   | {{Spec2('HTML5 W3C')}}   |         |
-| {{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}    | {{Spec2('HTML4.01')}}    |         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/li/index.md b/files/pt-br/web/html/element/li/index.md
index 483fa550fce4aa..07c15ef6a820b4 100644
--- a/files/pt-br/web/html/element/li/index.md
+++ b/files/pt-br/web/html/element/li/index.md
@@ -71,11 +71,7 @@ Para exemplos mais detalhados veja as páginas [\<ol>](/pt-BR/docs/Web/HTML/Elem
 
 ## Especificações
 
-| Especificação                                                                     | Estado                   | Observação |
-| --------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '&lt;li&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '&lt;li&gt;')}}     | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'lists.html#h-10.2', '&lt;li&gt;')}}                       | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/link/index.md b/files/pt-br/web/html/element/link/index.md
index e875b76de987bb..f54536cc90d662 100644
--- a/files/pt-br/web/html/element/link/index.md
+++ b/files/pt-br/web/html/element/link/index.md
@@ -140,11 +140,7 @@ Você pode determinar quando um stylesheet foi carregado observando um `load` ev
 
 ## Especificações
 
-| Specification                                                                        | Status                   | Comment |
-| ------------------------------------------------------------------------------------ | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}       | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}} | {{Spec2('HTML5 W3C')}}   |         |
-| {{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}                 | {{Spec2('HTML4.01')}}    |         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/main/index.md b/files/pt-br/web/html/element/main/index.md
index acf22e756da7fd..c742a0e8d62005 100644
--- a/files/pt-br/web/html/element/main/index.md
+++ b/files/pt-br/web/html/element/main/index.md
@@ -55,11 +55,7 @@ Este elemento admite apenas os [atributos globais](/pt-BR/docs/Web/HTML/Global_a
 
 ## Especificações
 
-| Especificação                                                                       | Estado                   | Comentário                                                                                                                                                                                                     |
-| ----------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}                    | {{Spec2('HTML WHATWG')}} | Removida a restrição sobre não usar \<main> como um filho dos elementos {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}. |
-| {{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}   | {{Spec2('HTML5.1')}}     | Não há mudança na {{SpecName('HTML5 W3C')}}                                                                                                                                                                    |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}} | {{Spec2('HTML5 W3C')}}   | Definição inicial.                                                                                                                                                                                             |
+{{Specifications}}
 
 ## Navegadores compatíveis
 
diff --git a/files/pt-br/web/html/element/map/index.md b/files/pt-br/web/html/element/map/index.md
index 82755950d4c9ae..619e12d067c17d 100644
--- a/files/pt-br/web/html/element/map/index.md
+++ b/files/pt-br/web/html/element/map/index.md
@@ -31,11 +31,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
 ## Especificações
 
-| Especificação                                                                              | Estado                    | Comentário |
-| ------------------------------------------------------------------------------------------ | ------------------------- | ---------- |
-| {{SpecName ('HTML WHATWG', 'a-map-element.html # the-map-elemento', '&lt;map&gt;')}}       | {{Spec2 ('HTML WHATWG')}} |            |
-| {{SpecName ('HTML5 W3C', 'incorporado-content-0.html # the-map-elemento', '&lt;map&gt;')}} | {{Spec2 ('HTML5 W3C')}}   |            |
-| {{SpecName ('HTML4.01', 'struct / objects.html # h-13.6.1', '&lt;map&gt;')}}               | {{Spec2 ('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/mark/index.md b/files/pt-br/web/html/element/mark/index.md
index a19eae4df70935..ad995409170b15 100644
--- a/files/pt-br/web/html/element/mark/index.md
+++ b/files/pt-br/web/html/element/mark/index.md
@@ -34,10 +34,7 @@ Este elemento inclue apenas [atributos Globais](/pt-BR/docs/HTML/Global_attribut
 
 ## Especificações
 
-| Especificações                                                                            | Status                   | Comentários |
-| ----------------------------------------------------------------------------------------- | ------------------------ | ----------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}} | {{Spec2('HTML WHATWG')}} |             |
-| {{SpecName('HTML5 W3C', 'the-mark-element.html#the-mark-element', '&lt;mark&gt;')}}       | {{Spec2('HTML5 W3C')}}   |             |
+{{Specifications}}
 
 ## Compatibilidade
 
diff --git a/files/pt-br/web/html/element/meta/index.md b/files/pt-br/web/html/element/meta/index.md
index 31dd938e0bd7d0..8930969c2a3d59 100644
--- a/files/pt-br/web/html/element/meta/index.md
+++ b/files/pt-br/web/html/element/meta/index.md
@@ -231,12 +231,7 @@ Dependendo do conjunto escolhido, o tipo de metadata pode ser uma das seguintes:
 
 ## Especificações
 
-| Specification                                                                                     | Status                       | Comment                                              |
-| ------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
-| {{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '&lt;meta name="referrer"&gt;')}} | {{Spec2('Referrer Policy')}} | Define valores e semantica `<meta name="referrer">`. |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '&lt;meta&gt;')}}                    | {{Spec2('HTML WHATWG')}}     | Adiciona o atributo `itemprop`                       |
-| {{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '&lt;meta&gt;')}}              | {{Spec2('HTML5 W3C')}}       | Adiciona o atributo `charset`                        |
-| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '&lt;meta&gt;')}}                          | {{Spec2('HTML4.01')}}        |                                                      |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/noscript/index.md b/files/pt-br/web/html/element/noscript/index.md
index 2348947396463e..704e3001437575 100644
--- a/files/pt-br/web/html/element/noscript/index.md
+++ b/files/pt-br/web/html/element/noscript/index.md
@@ -43,11 +43,7 @@ Rocks!
 
 ## Especificações
 
-| Specification                                                                            | Status                   | Comment |
-| ---------------------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('HTML WHATWG', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
-| {{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}}   | {{Spec2('HTML5 W3C')}}   |         |
-| {{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '&lt;noscript&gt;')}}           | {{Spec2('HTML4.01')}}    |         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/ol/index.md b/files/pt-br/web/html/element/ol/index.md
index b751b915121c29..f685861848474e 100644
--- a/files/pt-br/web/html/element/ol/index.md
+++ b/files/pt-br/web/html/element/ol/index.md
@@ -139,11 +139,7 @@ A saída HTML acima será:
 
 ## Especificações
 
-| Especificação                                                                         | Situação                 | Observação |
-| ------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '&lt;ol&gt;')}}     | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}                    | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidede em navegadores
 
diff --git a/files/pt-br/web/html/element/optgroup/index.md b/files/pt-br/web/html/element/optgroup/index.md
index 45e653e0935056..3f6a2e302aa3ee 100644
--- a/files/pt-br/web/html/element/optgroup/index.md
+++ b/files/pt-br/web/html/element/optgroup/index.md
@@ -49,11 +49,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
 ## Especificações
 
-| Especificação                                                                                   | Status                   | Comentário |
-| ----------------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '&lt;optgroup&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}                | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}                      | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/option/index.md b/files/pt-br/web/html/element/option/index.md
index 73d5d068265781..778e9fa3003717 100644
--- a/files/pt-br/web/html/element/option/index.md
+++ b/files/pt-br/web/html/element/option/index.md
@@ -39,11 +39,7 @@ Veja os exemplos do elemento {{HTMLElement("select")}}.
 
 ## Especificações
 
-| Especificação                                                                               | Estado                   | Comentário |
-| ------------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '&lt;option&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}                | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}                    | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/p/index.md b/files/pt-br/web/html/element/p/index.md
index 3eb2016490362e..f2a4c7b36cbdc9 100644
--- a/files/pt-br/web/html/element/p/index.md
+++ b/files/pt-br/web/html/element/p/index.md
@@ -123,11 +123,7 @@ p {
 
 ## Especificações
 
-| Specification                                                                 | Status                   | Comment                                                        |
-| ----------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}      | {{Spec2('HTML WHATWG')}} | Nenhuma alteração desde a última w3c {{SpecName("HTML5 W3C")}} |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}} | {{Spec2('HTML5 W3C')}}   | Atributo `align` está obsoleto                                 |
-| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}             | {{Spec2('HTML4.01')}}    | Definição inicial                                              |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/picture/index.md b/files/pt-br/web/html/element/picture/index.md
index 46d4213799096d..c94e7b0a2c8828 100644
--- a/files/pt-br/web/html/element/picture/index.md
+++ b/files/pt-br/web/html/element/picture/index.md
@@ -85,9 +85,7 @@ O atributo `type` lhe permite especificar um tipo MIME para o(s) recurso(s) forn
 
 ## Especificações
 
-| Specification                                                                              | Status                   | Comment            |
-| ------------------------------------------------------------------------------------------ | ------------------------ | ------------------ |
-| {{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element','&lt;picture&gt;')}} | {{Spec2('HTML WHATWG')}} | Initial definition |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/pre/index.md b/files/pt-br/web/html/element/pre/index.md
index 90a579cc0ac872..0e7aa706148a94 100644
--- a/files/pt-br/web/html/element/pre/index.md
+++ b/files/pt-br/web/html/element/pre/index.md
@@ -48,11 +48,7 @@ body {
 
 ## Especificações
 
-| Especificação                                                                       | Status                   | Comentário                                                  |
-| ----------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança significante na {{SpecName("HTML WHATWG")}} |
-| {{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}   | {{Spec2('HTML5 W3C')}}   | Nenhuma mudança significante na {{SpecName("HTML4.01")}}    |
-| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;dl&gt;')}}                  | {{Spec2('HTML4.01')}}    | `Atributto cols` obsoleto                                   |
+{{Specifications}}
 
 ## Compatibilidade de navegador
 
diff --git a/files/pt-br/web/html/element/q/index.md b/files/pt-br/web/html/element/q/index.md
index 315b1aa1ad9b43..44d216b7ab2130 100644
--- a/files/pt-br/web/html/element/q/index.md
+++ b/files/pt-br/web/html/element/q/index.md
@@ -78,11 +78,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/HTML/Global_attributes).
 
 ## Especificações
 
-| Especificação                                                                     | Status                   | Comentário        |
-| --------------------------------------------------------------------------------- | ------------------------ | ----------------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '&lt;q&gt;')}}          | {{Spec2('HTML WHATWG')}} |                   |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}} | {{Spec2('HTML5 W3C')}}   |                   |
-| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;')}}                 | {{Spec2('HTML4.01')}}    | Definição inicial |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/ruby/index.md b/files/pt-br/web/html/element/ruby/index.md
index 8da16d1450c67e..4fea092c06119c 100644
--- a/files/pt-br/web/html/element/ruby/index.md
+++ b/files/pt-br/web/html/element/ruby/index.md
@@ -35,10 +35,7 @@ Esse elemento somente inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_
 
 ## Especificações
 
-| Especificação                                                                             | Status                   | Comentário |
-| ----------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}} | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}   | {{Spec2('HTML5 W3C')}}   |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/s/index.md b/files/pt-br/web/html/element/s/index.md
index 1dfb6472451586..6aa3f8d03c87fe 100644
--- a/files/pt-br/web/html/element/s/index.md
+++ b/files/pt-br/web/html/element/s/index.md
@@ -110,10 +110,7 @@ Algumas pessoas que usam leitores de tela que desativam deliberadamente o anúnc
 
 ## Especificações
 
-| Especificação                                                                   | Estado                   | Comentário |
-| ------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}}          | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C','text-level-semantics.html#the-s-element','s element')}} | {{Spec2('HTML5 W3C')}}   |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/section/index.md b/files/pt-br/web/html/element/section/index.md
index 6e60ce02b807fd..f6a257a1fe87a7 100644
--- a/files/pt-br/web/html/element/section/index.md
+++ b/files/pt-br/web/html/element/section/index.md
@@ -120,11 +120,7 @@ Este elemento inclui apenas os [atributos globais](/pt-BR/docs/Web/HTML/Global_a
 
 ## Especificações
 
-| Especificação                                                                       | Status                   | Comentários |
-| ----------------------------------------------------------------------------------- | ------------------------ | ----------- |
-| {{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}} | {{Spec2('HTML WHATWG')}} |             |
-| {{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}     | {{Spec2('HTML5.1')}}     |             |
-| {{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}   | {{Spec2('HTML5 W3C')}}   |             |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/select/index.md b/files/pt-br/web/html/element/select/index.md
index 4d7c6da3127353..85e32007ae34d7 100644
--- a/files/pt-br/web/html/element/select/index.md
+++ b/files/pt-br/web/html/element/select/index.md
@@ -61,11 +61,7 @@ A seguir um exemplo de como simular uma lista de seleção com opções editáve
 
 ## Especificações
 
-| Especificação                                                                | Estado                 | Comentários |
-| ---------------------------------------------------------------------------- | ---------------------- | ----------- |
-| {{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}} | {{Spec2('HTML5 W3C')}} |             |
-| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}     | {{Spec2('HTML4.01')}}  |             |
-|                                                                              |                        |             |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/span/index.md b/files/pt-br/web/html/element/span/index.md
index cce78261127945..1a331b264d6e06 100644
--- a/files/pt-br/web/html/element/span/index.md
+++ b/files/pt-br/web/html/element/span/index.md
@@ -36,11 +36,7 @@ Some text
 
 ## Especificações
 
-| Specification                                                                           | Status                   | Comment                                                       |
-| --------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '&lt;span&gt;')}}          | {{Spec2('HTML WHATWG')}} |                                                               |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}} | {{Spec2('HTML5 W3C')}}   | A interface com o DOM agora é {{domxref("HTMLSpanElement")}}. |
-| {{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}                | {{Spec2('HTML4.01')}}    |                                                               |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/strong/index.md b/files/pt-br/web/html/element/strong/index.md
index 655164a65919aa..efbd0f99ae01a0 100644
--- a/files/pt-br/web/html/element/strong/index.md
+++ b/files/pt-br/web/html/element/strong/index.md
@@ -103,11 +103,7 @@ Ao fazer x é **imperativo** que se faça y antes de prosseguir.
 
 ## Especificações
 
-| Especificação                                                                               | Status                   | Comentário |
-| ------------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '&lt;strong&gt;')}}          | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '&lt;strong&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}                  | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Navegadores Compatíveis
 
diff --git a/files/pt-br/web/html/element/style/index.md b/files/pt-br/web/html/element/style/index.md
index 7e8702b608fd29..d6de7d0c3f7edd 100644
--- a/files/pt-br/web/html/element/style/index.md
+++ b/files/pt-br/web/html/element/style/index.md
@@ -69,11 +69,7 @@ Este elemento inclui os [atributos globais](/pt-BR/docs/Web/HTML/Global_attribut
 
 ## Especificações
 
-| Specification                                                                      | Status                     | Comment                                     |
-| ---------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------- |
-| {{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }} | {{ Spec2('HTML WHATWG') }} | No change from {{ SpecName('HTML5 W3C') }}. |
-| {{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}   | {{ Spec2('HTML5 W3C') }}   | Added the `scoped` attribute                |
-| {{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}                | {{ Spec2('HTML4.01') }}    |                                             |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/template/index.md b/files/pt-br/web/html/element/template/index.md
index 0102d2e23955a9..cf1feeebdaaa7a 100644
--- a/files/pt-br/web/html/element/template/index.md
+++ b/files/pt-br/web/html/element/template/index.md
@@ -148,10 +148,7 @@ table td {
 
 ## Especificações
 
-| Especificação                                                                           | Estado                   | Comentário        |
-| --------------------------------------------------------------------------------------- | ------------------------ | ----------------- |
-| {{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}} | {{Spec2('HTML WHATWG')}} | Sem mudanças      |
-| {{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}   | {{Spec2('HTML5 W3C')}}   | Definição Inicial |
+{{Specifications}}
 
 ## Compatibilidade de Navegadores
 
diff --git a/files/pt-br/web/html/element/tfoot/index.md b/files/pt-br/web/html/element/tfoot/index.md
index 0c46d64c48b145..537f7e5bc7c646 100644
--- a/files/pt-br/web/html/element/tfoot/index.md
+++ b/files/pt-br/web/html/element/tfoot/index.md
@@ -122,10 +122,7 @@ Por favor veja a página {{HTMLElement("table")}} para exemplos sobre `<tfoot>`.
 
 ## Especificações
 
-| Especificações                                                                  | Status                   | Comentários |
-| ------------------------------------------------------------------------------- | ------------------------ | ----------- |
-| {{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}     | {{Spec2('HTML WHATWG')}} |             |
-| {{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML5 W3C')}}   |             |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/th/index.md b/files/pt-br/web/html/element/th/index.md
index 85fe3b9946c03e..cfd2c3da7b8773 100644
--- a/files/pt-br/web/html/element/th/index.md
+++ b/files/pt-br/web/html/element/th/index.md
@@ -162,10 +162,7 @@ Veja {{HTMLElement("table")}} para mais elementos `<th>`.
 
 ## Especificações
 
-| Especificações                                                            | Estados                  | Comentário |
-| ------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}     | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}} | {{Spec2('HTML5 W3C')}}   |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/element/title/index.md b/files/pt-br/web/html/element/title/index.md
index c0c41ee2bab179..e9d65d4027a5fd 100644
--- a/files/pt-br/web/html/element/title/index.md
+++ b/files/pt-br/web/html/element/title/index.md
@@ -50,11 +50,7 @@ Para ajudar o usuário, atualize o valor do `title` para refletir mudanças sign
 
 ## Especificações
 
-| Especificação                                                                          | Status                   | Comentário |
-| -------------------------------------------------------------------------------------- | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}       | {{Spec2('HTML WHATWG')}} |            |
-| {{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}} | {{Spec2('HTML5 W3C')}}   |            |
-| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}                | {{Spec2('HTML4.01')}}    |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/accesskey/index.md b/files/pt-br/web/html/global_attributes/accesskey/index.md
index 67acb1ebd16520..d47790a61bb189 100644
--- a/files/pt-br/web/html/global_attributes/accesskey/index.md
+++ b/files/pt-br/web/html/global_attributes/accesskey/index.md
@@ -106,13 +106,7 @@ Devido a esses problemas, geralmente não é aconselhável usar o `accesskey`s p
 
 ## Especificações
 
-| Especificação                                                                        | Status                   | Comentário                                                                                                                                                                                                              |
-| ------------------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}         | {{Spec2('HTML5.2')}}     | Comportamento mais realista descrito para o que é implementado na realidade.                                                                                                                                            |
-| {{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}} | {{Spec2('HTML WHATWG')}} | Nenhuma alteração das últimas especificações do W3C {{SpecName('HTML5.1')}} .                                                                                                                                           |
-| {{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}         | {{Spec2('HTML5.1')}}     | Nenhuma alteração em {{SpecName('HTML5 W3C')}}.                                                                                                                                                                         |
-| {{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}       | {{Spec2('HTML5 W3C')}}   | A partir da {{SpecName('HTML4.01')}}, vários caracteres podem ser definidios como teclas de atalho. Além disso, pode ser definido em qualquer elemento.                                                                 |
-| {{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}               | {{Spec2('HTML4.01')}}    | Suportado apenas em {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} e {{ HTMLElement("textarea") }} |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/autocapitalize/index.md b/files/pt-br/web/html/global_attributes/autocapitalize/index.md
index ab41dc7efad691..b9cbd7c7df44bb 100644
--- a/files/pt-br/web/html/global_attributes/autocapitalize/index.md
+++ b/files/pt-br/web/html/global_attributes/autocapitalize/index.md
@@ -18,9 +18,7 @@ O atributo `autocapitalize` nunca ativa a autocapitalização para um elemento {
 
 ## Especificações
 
-| Especificação                                                                        | Estado                   | Comentário |
-| ------------------------------------------------------------------------------------ | ------------------------ | ---------- |
-| {{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}} | {{Spec2('HTML WHATWG')}} |            |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/class/index.md b/files/pt-br/web/html/global_attributes/class/index.md
index 5315a1841e166b..23e0986d32f5d1 100644
--- a/files/pt-br/web/html/global_attributes/class/index.md
+++ b/files/pt-br/web/html/global_attributes/class/index.md
@@ -11,12 +11,7 @@ Apesar da especificação não impor requesitos sobre os nomes de classes, é co
 
 ## Especificações
 
-| Especificação                                                   | Status                   | Comentário                                                                                                                                                                                                                                                                         |
-| --------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', "elements.html#classes", "class")}}   | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}                                                                                                                                                                                                             |
-| {{SpecName('HTML5.1', "elements.html#classes", "class")}}       | {{Spec2('HTML5.1')}}     | Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}                                                                                                                                                                                           |
-| {{SpecName('HTML5 W3C', "elements.html#classes", "class")}}     | {{Spec2('HTML5 W3C')}}   | Snapshot de {{SpecName('HTML WHATWG')}}. Apartir de {{SpecName('HTML4.01')}}, `class` é um atributo global verdadeiro.                                                                                                                                                             |
-| {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}} | {{Spec2('HTML4.01')}}    | Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, e {{HTMLElement("title")}}. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/contenteditable/index.md b/files/pt-br/web/html/global_attributes/contenteditable/index.md
index de6e5e761d823d..bea9534e937f40 100644
--- a/files/pt-br/web/html/global_attributes/contenteditable/index.md
+++ b/files/pt-br/web/html/global_attributes/contenteditable/index.md
@@ -24,12 +24,7 @@ Você pode definir a cor usada para desenhar a inserção de texto {{Glossary("c
 
 ## Especificações
 
-| Especificação                                                                                                                     | Status                   | Comentário                                                                            |
-| --------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------- |
-| {{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}                                               | {{Spec2("HTML WHATWG")}} | Nenhuma mudança na última instância, {{SpecName("HTML5.2")}}                          |
-| {{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}} | {{Spec2("HTML5.2")}}     | Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5.1")}}   |
-| {{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}} | {{Spec2("HTML5.1")}}     | Instância de {{SpecName("HTML WHATWG")}}, sem mudanças para {{SpecName("HTML5 W3C")}} |
-| {{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}                                                 | {{Spec2("HTML5 W3C")}}   | Instância de {{SpecName("HTML WHATWG")}}, definição inicial.                          |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/data-_star_/index.md b/files/pt-br/web/html/global_attributes/data-_star_/index.md
index a2e7b5d8ca375c..4f88108c75503e 100644
--- a/files/pt-br/web/html/global_attributes/data-_star_/index.md
+++ b/files/pt-br/web/html/global_attributes/data-_star_/index.md
@@ -30,11 +30,7 @@ Para adicionar atributos **data-\*** , mesmo os elementos HTML mais comuns podem
 
 ## Especificações
 
-| Specification                                                                                                  | Status                   | Comment                                                                           |
-| -------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}} | {{Spec2('HTML WHATWG')}} | No change from latest snapshot, {{SpecName('HTML5.1')}}                           |
-| {{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}     | {{Spec2('HTML5.1')}}     | Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}} |
-| {{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}   | {{Spec2('HTML5 W3C')}}   | Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.                      |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/hidden/index.md b/files/pt-br/web/html/global_attributes/hidden/index.md
index 2abca93a2decc8..9789b7b714077a 100644
--- a/files/pt-br/web/html/global_attributes/hidden/index.md
+++ b/files/pt-br/web/html/global_attributes/hidden/index.md
@@ -21,11 +21,7 @@ Similarmente, um elemento canvas com atributo `hidden` poderia ser usado como bu
 
 ## Especificações
 
-| Specification                                                                  | Status                   | Comment                                                              |
-| ------------------------------------------------------------------------------ | ------------------------ | -------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}} | {{Spec2('HTML WHATWG')}} | Sem mudanças desde o último snapshot, {{SpecName('HTML5.1')}}        |
-| {{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}     | {{Spec2('HTML WHATWG')}} | Define o processamento padrão sugerido do atributo hidden usando CSS |
-| {{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}         | {{Spec2('HTML5.1')}}     | Definição inicial do snapshot de {{SpecName('HTML WHATWG')}}         |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/id/index.md b/files/pt-br/web/html/global_attributes/id/index.md
index 2f70f222ffeef4..ad922d4bd28933 100644
--- a/files/pt-br/web/html/global_attributes/id/index.md
+++ b/files/pt-br/web/html/global_attributes/id/index.md
@@ -13,12 +13,7 @@ O valor deste atributo não deve conter lacunas (espaços, tabulações etc.). N
 
 ## Especificações
 
-| Especificação                                                  | Status                   | Comentário                                                                                                                                                                                                                    |
-| -------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde o mais recente snapshot, {{SpecName('HTML5.1')}}                                                                                                                                                        |
-| {{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}     | {{Spec2('HTML5.1')}}     | Snapshot de {{SpecName('HTML WHATWG')}}, nenhuma mudança desde {{SpecName('HTML5 W3C')}}                                                                                                                                      |
-| {{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}   | {{Spec2('HTML5 W3C')}}   | Snapshot de {{SpecName('HTML WHATWG')}}, passa a aceitar `'_'`, `'-'` and `'.'` se não estiverem no começo do ID. Se torna um atributo global verdadeiro.                                                                     |
-| {{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}   | {{Spec2('HTML4.01')}}    | Suportado por todos os elementos menos {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/index.md b/files/pt-br/web/html/global_attributes/index.md
index 10c41554038085..b57a5129a1db34 100644
--- a/files/pt-br/web/html/global_attributes/index.md
+++ b/files/pt-br/web/html/global_attributes/index.md
@@ -103,12 +103,7 @@ Além dos atributos globais HTML básicos, os seguintes atributos globais també
 
 ## Especificações
 
-| Especificação                                                                  | Status                   | Comentário                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| ------------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}} | {{Spec2('HTML WHATWG')}} | From latest snapshot, {{SpecName('HTML5.1')}}, `itemid`, `itemprop`, `itemref`, `itemscope`, and `itemtype` have been added.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| {{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}     | {{Spec2('HTML5.1')}}     | Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, `spellcheck`, `draggable`, and `dropzone` have been added.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| {{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}   | {{Spec2('HTML5 W3C')}}   | Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the `dir`, `lang`, `style`, `id`, `class`, `tabindex`, `accesskey`, and `title` are now true global attributes. `xml:lang` which was initially part of XHTML, is now also part of HTML. `hidden`, `data-*`, `contextmenu`, `contenteditable`, and `translate` have been added.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| {{SpecName('HTML4.01')}}                                                       | {{Spec2('HTML4.01')}}    | There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements. `class` and `style` are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}. `dir` is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}. `id` is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}. `lang` is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}. `tabindex` is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}. `accesskey` is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}. `title` is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 
diff --git a/files/pt-br/web/html/global_attributes/lang/index.md b/files/pt-br/web/html/global_attributes/lang/index.md
index 5f52755834274a..f93f662da84e5f 100644
--- a/files/pt-br/web/html/global_attributes/lang/index.md
+++ b/files/pt-br/web/html/global_attributes/lang/index.md
@@ -24,12 +24,7 @@ Para as pseudo-classes CSS {{cssxref(":lang")}}, dois nomes de idiomas inválido
 
 ## Especificações
 
-| Specification                                                                    | Status                   | Comment                                                                                                                                                                                                                                                                              |
-| -------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}} | {{Spec2('HTML WHATWG')}} | Sem mudança até o último registro, {{SpecName('HTML5.1')}}                                                                                                                                                                                                                           |
-| {{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}     | {{Spec2('HTML5.1')}}     | Registro de {{SpecName('HTML WHATWG')}}, sem mudança para {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                  |
-| {{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}   | {{Spec2('HTML5 W3C')}}   | Registro de {{SpecName('HTML WHATWG')}}, comportamento com `xml:lang` e algoritmo de determinação definido. Ele também é um atributo global.                                                                                                                                         |
-| {{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}                    | {{Spec2('HTML4.01')}}    | Suportado em todos os elementos, mas {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} e {{HTMLElement("script")}}. |
+{{Specifications}}
 
 ## Compatibilidade com navegadores
 

From 31ee8bec1c0d957d0dae7e39aca52cb4216cb5e7 Mon Sep 17 00:00:00 2001
From: Ederson Lucas <27015559+edersonlucas@users.noreply.github.com>
Date: Sun, 1 Oct 2023 21:21:32 -0300
Subject: [PATCH 247/268] fix(pt-BR): correct the incorrect word in the
 documentation for JavaScript Array.prototype.reduce() (#16016)

fix(pt-BR): correct the incorrect word in the documentation for JavaScript reduce
---
 .../reference/global_objects/array/reduce/index.md          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md b/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md
index 14c7bb8f828b6f..debee857c53be4 100644
--- a/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md
+++ b/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.md
@@ -56,7 +56,7 @@ Se a array estiver vazia e o `valorInicial` não tiver sido informado, uma exce
 
 Se a array possuir somente um elemento (independente da posição) e o `valorInicial` não tiver sido fornecido, ou se `valorInicial` for fornecido, mas a array estiver vazia, o valor será retornado sem que a função de `callback` seja chamada.
 
-É mais seguro provir um `valorInicial`, porque existem até _quatro_ possíveis saídas sem o `valorInicial`, como mostrado no exemplo:
+É mais seguro prover um `valorInicial`, porque existem até _quatro_ possíveis saídas sem o `valorInicial`, como mostrado no exemplo:
 
 ```js
 var maxCallback = (acc, cur) => Math.max(acc.x, cur.x);
@@ -99,7 +99,7 @@ Você também pode usar uma {{jsxref("Functions/Arrow_functions", "Arrow Functio
 [0, 1, 2, 3, 4].reduce((accum, curr) => accum + curr);
 ```
 
-Se você informar um valorInicial como o segundo argumento de reduce, o resultado será:
+Se você informar um `valorInicial` como o segundo argumento de reduce, o resultado será:
 
 ```js
 [0, 1, 2, 3, 4].reduce(function (acumulador, valorAtual, indice, array) {
@@ -141,7 +141,7 @@ var total = [0, 1, 2, 3].reduce(
 
 ### Soma de valores de um objeto de um array
 
-Para resumir os valores contidos em um array, você **deve** fornecer um valorInicial, para que cada item passe por sua função.
+Para resumir os valores contidos em um array, você **deve** fornecer um `valorInicial`, para que cada item passe por sua função.
 
 ```js
 var valorInicial = 0;

From 40e9da77157abdf0d703947c167240cb4bb59625 Mon Sep 17 00:00:00 2001
From: Jiujiang Liu <37231523+moshuying@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:00:39 +0800
Subject: [PATCH 248/268] Update index.md (#16287)

---
 .../web/javascript/inheritance_and_the_prototype_chain/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md
index 5b01b3f7c307d3..891ce697b111aa 100644
--- a/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/zh-cn/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -414,7 +414,7 @@ console.log(doSomeInstancing);
 
 如果 `doSomeInstancing` 没有该属性，那么运行时会在 `doSomeInstancing.[[Prototype]]`（也就是 `doSomething.prototype`）中查找该属性。如果 `doSomeInstancing.[[Prototype]]` 有该属性，那么就会使用 `doSomeInstancing.[[Prototype]]` 上的该属性。
 
-否则，如果 `doSomeInstancing.[[Prototype]]` 没有该属性，那么就会在 `doSomeInstancing.[[Prototype]].[[Prototype]]` 中查找该属性。默认情况下，任何函数的 `prototype` 属性的 `[[Prototype]]` 都是 `Object.prototype`。因此，然后会在 `doSomeInstancing.[[Prototype]].[[Prototype]]`（也就是 `doSomething.prototype.[[Prototype]]`（也就是 `Object.prototype`））上查找该属性。
+否则，如果 `doSomeInstancing.[[Prototype]]` 没有该属性，那么就会在 `doSomeInstancing.[[Prototype]].[[Prototype]]` 中查找该属性。默认情况下，任何函数的 `prototype` 属性的 `[[Prototype]]` 都是 `Object.prototype`。因此会在 `doSomeInstancing.[[Prototype]].[[Prototype]]`（也就是 `doSomething.prototype.[[Prototype]]`（也就是 `Object.prototype`））上查找该属性。
 
 如果在 `doSomeInstancing.[[Prototype]].[[Prototype]]` 中没有找到该属性，那么就会在 `doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]` 中查找该属性。但是，这里有一个问题：`doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]]` 不存在，因为 `Object.prototype.[[Prototype]]` 是 `null`。然后，只有在查找完整个 `[[Prototype]]` 链之后，运行时才会断言该属性不存在，并得出该属性的值为 `undefined`。
 

From 64b71c0596203b53f97b770d8b4e4cfc284b3a70 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Mon, 2 Oct 2023 12:32:46 +0900
Subject: [PATCH 249/268] [ko]: add index.md for
 `web/glossary/lossless_compression` (#16113)

[revise]: revise feedback
---
 .../ko/glossary/lossless_compression/index.md | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 files/ko/glossary/lossless_compression/index.md

diff --git a/files/ko/glossary/lossless_compression/index.md b/files/ko/glossary/lossless_compression/index.md
new file mode 100644
index 00000000000000..d23539ca5db747
--- /dev/null
+++ b/files/ko/glossary/lossless_compression/index.md
@@ -0,0 +1,21 @@
+---
+title: 무손실 압축 (Lossless compression)
+slug: Glossary/Lossless_compression
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**무손실 압축(Lossless compression)**은 압축된 데이터를 원본 데이터로 완벽하게 재구성할 수 있는 데이터 압축 알고리즘의 일종입니다. 무손실 압축 방법은 되돌릴 수 있습니다. 무손실 압축의 예로는 {{glossary("GZIP")}}, {{glossary("Brotli")}}, WebP 및 {{glossary("PNG")}}가 있습니다.
+
+반면에 {{glossary("Lossy compression", "손실 압축")}}은 원본 파일에서 일부 데이터를 삭제하여 부정확한 근사치를 사용하기 때문에, 되돌릴 수 없는 압축 방법입니다.
+
+## 같이 보기
+
+- [용어 사전](/ko/docs/Glossary)
+
+  - {{glossary("GZIP")}}
+  - {{glossary("Brotli")}}
+  - {{glossary("PNG")}}
+  - {{glossary("Lossy compression")}}

From ba097ba39fcd0804de8cc115ceb81f7e532d7810 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Mon, 2 Oct 2023 12:33:38 +0900
Subject: [PATCH 250/268] [ko]: add index.md for `web/glossary/etld` (#15950)

[revise]: revise feedback
---
 files/ko/glossary/etld/index.md | 50 +++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 files/ko/glossary/etld/index.md

diff --git a/files/ko/glossary/etld/index.md b/files/ko/glossary/etld/index.md
new file mode 100644
index 00000000000000..c21df46c0b7a7f
--- /dev/null
+++ b/files/ko/glossary/etld/index.md
@@ -0,0 +1,50 @@
+---
+title: 유효 최상위 도메인 (eTLD)
+slug: Glossary/eTLD
+l10n:
+  sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e
+---
+
+{{GlossarySidebar}}
+
+**eTLD**라는 용어는 "유효 최상위 도메인"을 의미하며 단일 조직이 등록할 수 있는 도메인입니다.
+
+최상위 도메인 (TLD)은 도메인 네임에서 마지막 점 다음에 오는 부분입니다. 예를 들어, `crookedtimber.org`의 최상위 도메인은 `org`입니다.
+
+단일 조직에서는 최상위 도메인 바로 아래의 도메인만 등록할 수 있다고 가정합니다. 그러면 다음 도메인이 모두 동일한 조직에 속해 있다는 것을 알 수 있습니다.
+
+```plain
+    xyz.org
+abc.xyz.org
+def.xyz.org
+```
+
+그러나 많은 등록 기관이 최상위 수준보다 낮은 수준에서 도메인을 등록하도록 허용하기 때문에, 이는 일반적인 규칙으로 운용되지 않습니다. 예를 들어, `sussex.ac.uk` 및 `aber.ac.uk`가 서로 다른 조직의 소유라는 것을 의미합니다.
+
+이것은 등록기관의 정책에 따른 문제이므로, 특정 도메인 이름 접미사(예,`ac.uk`)가 공개적으로 등록 가능한지 여부를 알고리즘적으로 판단하는 것을 불가능합니다. [공용 접미사 목록](https://publicsuffix.org/)은 조직이 이름을 직접 등록할 수 있는 모든 접미사 목록입니다. 즉, eTLD 목록입니다.
+
+관련된 개념 **eTLD+1**은 eTLD와 도메인 이름의 다음 부분을 의미합니다. eTLD는 등록 가능하기 때문에, 동일한 eTLD+1을 가진 모든 도메인은 동일한 조직이 소유합니다.
+
+예를 들어, 아래는 모두 eTLD+1 도메인입니다.
+
+- crookedtimber.org
+- theguardian.com
+- sussex.ac.uk
+- aber.ac.uk
+
+이것은 각 도메인 아래의 모든 도메인이 동일한 조직에 속함을 의미합니다. 예를 들어,
+
+```plain
+ film.theguardian.com
+music.theguardian.com
+```
+
+```plain
+      news.sussex.ac.uk
+      blog.sussex.ac.uk
+admissions.sussex.ac.uk
+```
+
+## 같이 보기
+
+- [공용 접미사 목록](https://publicsuffix.org/)

From f9145b96772782a644533c91d67e537fad3a265b Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:04:57 +0800
Subject: [PATCH 251/268] [zh-cn]: update 'sending forms through javascript'
 (#16273)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo <yin199909@aliyun.com>
---
 .../sending_forms_through_javascript/index.md | 304 ++++++++----------
 1 file changed, 138 insertions(+), 166 deletions(-)

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 aac41ba1e028d8..f444d6b6000df6 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
@@ -1,79 +1,88 @@
 ---
 title: 使用 JavaScript 发送表单
 slug: Learn/Forms/Sending_forms_through_JavaScript
+l10n:
+  sourceCommit: 402d8cd44691881e55bf214a7c0cb02bcb817305
 ---
 
 {{LearnSidebar}}
 
-正如在[前面的文章](/zh-CN/docs/HTML/Forms/Sending_and_retrieving_form_data)中讲到的，HTML 表单可以声明式地发送一个 HTTP 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求。本文探讨如何做到这一点。
+HTML 表单可以声明式地发送一个 [HTTP](/zh-CN/docs/Web/HTTP) 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求（例如通过 `XMLHttpRequest`）。本文对这些方法进行了探讨。
 
 ## 表单不总是表单
 
-在渐进式 Web 应用中，使用 [HTML 表单](/zh-CN/docs/Learn/Forms)而不是文字表单让人们来填写变得越来越普遍了——越来越多的开发人员正致力于控制传输数据。
+在渐进式 Web 应用、单页应用和基于框架的应用中，通常会使用 [HTML 表单](/zh-CN/docs/Learn/Forms)来发送数据，而不会在收到响应数据时加载新文档。让我们先来谈谈为什么这需要一种不同的方法。
 
 ### 获得整体界面的控制
 
-标准的 HTML 表单提交会加载数据要发送到的 URL，这意味着浏览器窗口以整页加载进行导航。可以通过隐藏闪烁和网络滞后来避免整页加载以提供更平滑的体验。
+如前一篇文章所述，标准 HTML 表单提交会加载发送数据的 URL，这意味着浏览器窗口会以全页面加载的方式进行导航。避免全页面加载可以避免网络延迟和可能出现的视觉问题（如闪烁），从而提供更流畅的体验。
 
-许多现代用户界面只使用 HTML 表单来收集用户的输入。当用户尝试发送数据时，应用程序将在后台采取控制并且异步地传输数据，只更新 UI 中需要更改的部分。
+许多现代用户界面只使用 HTML 表单来收集用户输入，而不是用于数据提交。当用户尝试发送数据时，应用程序会控制并在后台异步传输数据，只更新用户界面中需要更改的部分。
 
-异步地发送任何数据被称为 [AJAX](/zh-CN/docs/Web/Guide/AJAX)，它代表“**异步 JavaScript 和 XML**”（Asynchronous JavaScript And XML）。
+异步发送任意数据一般称为 [AJAX](/zh-CN/docs/Web/Guide/AJAX)，它代表“**异步 JavaScript 和 XML**”。
 
 ### 表单提交和 AJAX 请求之间的区别？
 
-{{domxref("XMLHttpRequest")}}（XHR）DOM 对象可以构造 HTTP 请求、发送它们，并获取请求结果。创建之初，{{domxref("XMLHttpRequest")}} 被设计用于将 [XML](/zh-CN/docs/Web/XML) 作为传输数据的格式获取和发送。不过，如今 [JSON](/zh-CN/docs/Glossary/JSON) 已经取代了 XML。但是 XML 和 JSON 都不适合对表单数据请求编码。表单数据（`application/x-www-form-urlencoded`）由 URL 编码的键/值对列表组成。为了传输二进制数据，HTTP 请求被重新整合成 `multipart/form-data` 形式。
+{{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`。
 
-AJAX 技术主要依靠 {{domxref("XMLHttpRequest")}} (XHR) DOM 对象。它
+> **备注：** 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，工作原理类似，但有一些优点。你在本文中看到的大部分 XHR 代码都可以换成 Fetch。
 
-> **备注：** 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，其工作原理类似，但具有一些有点。你将在本文中看到的大多数 XHR 代码都可以替换为 Fetch。
+如果你控制了前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），就可以发送 JSON/XML，并随心所欲地处理它们。
 
-如果你控制前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），则可以发送 JSON/XML 并根据需要处理它们。
+但如果要使用第三方服务，就需要按照服务要求的格式发送数据。
 
-但是，如果你想使用第三方服务，你就需要根据服务要求的格式发送数据。
-
-那么如何发送这样的数据呢？下面介绍了你需要使用的不同技术。
+那么我们应该如何发送这些数据呢？下面将介绍所需要的不同技术。
 
 ## 发送表单数据
 
-一共有三种方式来发送表单数据：包括两种传统的方法和一种利用 {{domxref("XMLHttpRequest/FormData","formData")}} 对象的新方法。让我们仔细看一下：
+一共有三种方式来发送表单数据：
+
+- 手工构建 `XMLHttpRequest`。
+- 使用独立的 `FormData` 对象。
+- 使用绑定到 `<form>` 元素的 `FormData`。
+
+让我们仔细看一下。
 
-### 构建 XMLHttpRequest
+### 手工构建 XMLHttpRequest
 
-{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全和最可靠的方式。要使用 {{domxref("XMLHttpRequest")}} 发送表单数据，请通过对其进行 URL 编码来准备数据，并遵守表单数据请求的具体细节。
+{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全可靠的方式。要使用 {{domxref("XMLHttpRequest")}} 发送表单数据，请通过 URL 编码准备数据，并遵守表单数据请求的具体规定。
 
-让我们重建之前的这个例子：
+让我们看个示例：
 
 ```html
-<button type="button" onclick="sendData({test:'ok'})">点击我！</button>
+<button>点我！</button>
 ```
 
-正如你所看到的，HTML 实际上没什么改变。不过，JavaScript 变得截然不同了：
+这是 JavaScript 代码部分：
 
 ```js
+const btn = document.querySelector("button");
+
 function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var urlEncodedData = "";
-  var urlEncodedDataPairs = [];
-  var name;
+  console.log("Sending data");
+
+  const XHR = new XMLHttpRequest();
+
+  const urlEncodedDataPairs = [];
 
-  // 将数据对象转换为URL编码的键/值对数组。
-  for (name in data) {
+  // 将数据对象转换为 URL 编码的键/值对数组。
+  for (const [name, value] of Object.entries(data)) {
     urlEncodedDataPairs.push(
-      encodeURIComponent(name) + "=" + encodeURIComponent(data[name]),
+      `${encodeURIComponent(name)}=${encodeURIComponent(value)}`,
     );
   }
 
-  // 将配对合并为单个字符串，并将所有%编码的空格替换为
+  // 将配对合并为单个字符串，并将所有 % 编码的空格替换为
   // “+”字符；匹配浏览器表单提交的行为。
-  urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");
+  const urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");
 
   // 定义成功数据提交时发生的情况
-  XHR.addEventListener("load", function (event) {
+  XHR.addEventListener("load", (event) => {
     alert("耶！已发送数据并加载响应。");
   });
 
   // 定义错误提示
-  XHR.addEventListener("error", function (event) {
+  XHR.addEventListener("error", (event) => {
     alert("哎呀！出问题了。");
   });
 
@@ -86,47 +95,53 @@ function sendData(data) {
   // 最后，发送我们的数据。
   XHR.send(urlEncodedData);
 }
+
+btn.addEventListener("click", () => {
+  sendData({ test: "ok" });
+});
 ```
 
-在线演示：
+这里是实时演示效果：
 
 {{EmbedLiveSample("构建_xmlhttprequest", "100%", 50)}}
 
-> **备注：** 当你想要往第三方网站传输数据时，使用{{domxref("XMLHttpRequest")}}会受到同源策略的影响。如果你需要执行跨域请求，你需要熟悉一下[CORS 和 HTTP 访问控制](/zh-CN/docs/HTTP/Access_control_CORS).
+> **备注：** 当你想要往第三方网站传输数据时，使用 {{domxref("XMLHttpRequest")}} 会受到{{glossary('same-origin policy', '同源策略')}}的影响。如果你需要执行跨源请求，你需要熟悉一下 [CORS 和 HTTP 访问控制](/zh-CN/docs/Web/HTTP/CORS)。
 
-### 使用 XMLHttpRequest 和 the FormData object（表单数据对象）
+### 使用 XMLHttpRequest 和 FormData 对象
 
-手动建立一个 HTTP 请求非常困难。幸运的是，最近的 [XMLHttpRequest 规范](http://www.w3.org/TR/XMLHttpRequest/)提供了一种方便简单的方法 — 利用{{domxref("XMLHttpRequest/FormData","FormData")}}对象来处理表单数据请求。
+手动建立一个 HTTP 请求非常困难。幸运的是，[XMLHttpRequest 规范](https://www.w3.org/TR/XMLHttpRequest/)提供了一种方便简单的方法——利用 {{domxref("FormData","FormData")}} 对象来处理表单数据请求。
 
-{{domxref("XMLHttpRequest/FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。请注意，{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是“只写”的，这意味着你可以更改它们，但不能检索其内容。
+{{domxref("FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。
 
-使用这个对象在[Using FormData Objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects)中有详细的介绍，不过这里有两个例子：
+该对象的使用详见[使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects)，下面是两个示例：
 
 #### 使用一个独立的 FormData 对象
 
 ```html
-<button type="button" onclick="sendData({test:'ok'})">点我！</button>
+<button>点我！</button>
 ```
 
-你应该会觉得那个 HTML 示例很熟悉。
+你应该会觉得那个 HTML 示例很熟悉，现在来展示 JavaScript 代码：
 
 ```js
+const btn = document.querySelector("button");
+
 function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var FD = new FormData();
+  const XHR = new XMLHttpRequest();
+  const FD = new FormData();
 
   // 把我们的数据添加到这个 FormData 对象中
-  for (name in data) {
-    FD.append(name, data[name]);
+  for (const [name, value] of Object.entries(data)) {
+    FD.append(name, value);
   }
 
   // 定义数据成功发送并返回后执行的操作
-  XHR.addEventListener("load", function (event) {
-    alert("Yeah! 已发送数据并加载响应。");
+  XHR.addEventListener("load", (event) => {
+    alert("耶！已发送数据并加载响应。");
   });
 
   // 定义发生错误时执行的操作
-  XHR.addEventListener("error", function (event) {
+  XHR.addEventListener("error", (event) => {
     alert("Oops! 出错了。");
   });
 
@@ -136,22 +151,26 @@ function sendData(data) {
   // 发送这个 formData 对象，HTTP 请求头会自动设置
   XHR.send(FD);
 }
+
+btn.addEventListener("click", () => {
+  sendData({ test: "ok" });
+});
 ```
 
-在线演示：
+这里是实时演示效果：
 
 {{EmbedLiveSample("使用一个独立的_FormData_对象", "100%", 50)}}
 
 #### 使用绑定到表单元素上的 FormData
 
-你也可以把一个 `FormData` 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个代表表单中包含元素的 `FormData` 。
+你也可以把一个 `FormData` 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个 `FormData` 对象，表示表单中包含的数据。
 
 这段 HTML 是典型的情况：
 
 ```html
 <form id="myForm">
   <label for="myName">告诉我你的名字：</label>
-  <input id="myName" name="name" value="John" />
+  <input id="myName" name="name" value="小明" />
   <input type="submit" value="提交" />
 </form>
 ```
@@ -159,20 +178,20 @@ function sendData(data) {
 但是 JavaScript 接管了这个表单：
 
 ```js
-window.addEventListener("load", function () {
+window.addEventListener("load", () => {
   function sendData() {
-    var XHR = new XMLHttpRequest();
+    const XHR = new XMLHttpRequest();
 
     // 我们把这个 FormData 和表单元素绑定在一起。
-    var FD = new FormData(form);
+    const FD = new FormData(form);
 
-    // 我们定义了数据成功发送时会发生的事。
-    XHR.addEventListener("load", function (event) {
+    // 我们定义了数据成功发送时会发生的事件
+    XHR.addEventListener("load", (event) => {
       alert(event.target.responseText);
     });
 
-    // 我们定义了失败的情形下会发生的事
-    XHR.addEventListener("error", function (event) {
+    // 我们定义了失败的情形下会发生的事件
+    XHR.addEventListener("error", (event) => {
       alert("哎呀！出了一些问题。");
     });
 
@@ -183,11 +202,11 @@ window.addEventListener("load", function () {
     XHR.send(FD);
   }
 
-  // 我们需要获取表单元素
-  var form = document.getElementById("myForm");
+  // 获取表单元素
+  const form = document.getElementById("myForm");
 
-  // ...然后接管表单的提交事件
-  form.addEventListener("submit", function (event) {
+  // 接管表单的 submit 事件
+  form.addEventListener("submit", (event) => {
     event.preventDefault();
 
     sendData();
@@ -195,115 +214,54 @@ window.addEventListener("load", function () {
 });
 ```
 
-在线演示：
+这里是实时演示效果：
 
 {{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}}
 
-你甚至可以通过使用表单的{{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理他们。想了解更多，请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。
-
-### 在隐藏的 iframe 中构建 DOM
-
-最古老的异步发送表单数据方法是用 DOM API 构建表单，然后将其数据发送到隐藏的 {{HTMLElement("iframe")}}。要获得提交的结果，请获取{{HTMLElement("iframe")}}的内容。
-
-> **警告：** 不要使用这项技术。有第三方服务的安全风险，因为它会使你暴露在 [脚本注入攻击](http://en.wikipedia.org/wiki/Cross-site_scripting) 中。如果你使用 HTTPS，它会影响 [同源策略](/zh-CN/docs/JavaScript/Same_origin_policy_for_JavaScript), 这可以使 {{HTMLElement("iframe")}} 内容无法访问。然而，该方法可能是你需要支持很古老的浏览器的唯一选择。
-
-下面是个简单的例子：
-
-```html
-<button onclick="sendData({test:'ok'})">点击我！</button>
-```
-
-所有操作都在下面这段脚本里：
-
-```js
-// 首先创建一个用来发送数据的 iframe.
-var iframe = document.createElement("iframe");
-iframe.name = "myTarget";
-
-// 然后，将 iframe 附加到主文档
-window.addEventListener("load", function () {
-  iframe.style.display = "none";
-  document.body.appendChild(iframe);
-});
-
-// 下面这个函数是真正用来发送数据的。
-// 它只有一个参数，一个由键值对填充的对象。
-function sendData(data) {
-  var name,
-    form = document.createElement("form"),
-    node = document.createElement("input");
-
-  // 定义响应时发生的事件
-  iframe.addEventListener("load", function () {
-    alert("Yeah! Data sent.");
-  });
-
-  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
-  form.target = iframe.name;
-
-  for (name in data) {
-    node.name = name;
-    node.value = data[name].toString();
-    form.appendChild(node.cloneNode());
-  }
-
-  // 表单元素需要附加到主文档中，才可以被发送。
-  form.style.display = "none";
-  document.body.appendChild(form);
-
-  form.submit();
-
-  // 表单提交后，就可以删除这个表单，不影响下次的数据发送。
-  document.body.removeChild(form);
-}
-```
-
-在线演示：
-
-{{EmbedLiveSample("在隐藏的 iframe 中构建 DOM", "100%", 50)}}
+你甚至可以通过使用表单的 {{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理它们。想了解更多，请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。
 
 ## 处理二进制数据
 
-如果你使用一个含有 `<input type="file">` 组件的表格的 {{domxref("XMLHttpRequest/FormData","FormData")}} 对象，传给代码的数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。
+如果你使用一个含有 `<input type="file">` 组件的 {{domxref("FormData","FormData")}} 表单对象，数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。
 
-在现代网络上，二进制数据有很多来源：例如{{domxref("FileReader")}} API、{{domxref("HTMLCanvasElement","Canvas")}} API、[WebRTC](/zh-CN/docs/WebRTC/navigator.getUserMedia) API，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 `FileReader` API 的知识，参阅：[如何在 web 应用程序中使用文件](/zh-CN/docs/Using_files_from_web_applications)。
+在现代网络上，二进制数据有很多来源：例如 {{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)。
 
-在 {{domxref("XMLHttpRequest/FormData","formData")}} 的帮助下，发送二进制数据非常简单，使用 `append()` 方法就可以了。如果你必须手动进行，那确实会有一些棘手。
+发送二进制数据最简单的方法是使用 {{domxref("FormData", "FormData")}} 的 `append()` 方法，如上图所示。如果必须手工操作，就比较麻烦了。
 
-在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多重表单数据请求：
+在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多部分表单数据请求：
 
 ```html
 <form id="myForm">
   <p>
-    <label for="i1">文本数据：</label>
-    <input id="i1" name="myText" value="一些文本数据" />
+    <label for="theText">文本数据：</label>
+    <input id="theText" name="myText" value="一些文本数据" type="text" />
   </p>
   <p>
-    <label for="i2">文件数据：</label>
-    <input id="i2" name="myFile" type="file" />
+    <label for="theFile">文件数据：</label>
+    <input id="theFile" name="myFile" type="file" />
   </p>
   <button>提交！</button>
 </form>
 ```
 
-如你所见，这个 HTML 只是一个标准的 `<form>`。没有什么神奇的事情发生。“魔法”都在 JavaScript 里：
+如你所见，这个 HTML 只是一个标准的 `<form>`，没有什么神奇的事情。“魔法”都在 JavaScript 里：
 
 ```js
 // 因为我们想获取 DOM 节点，
 // 我们在页面加载时初始化我们的脚本。
-window.addEventListener("load", function () {
+window.addEventListener("load", () => {
   // 这些变量用于存储表单数据
-  var text = document.getElementById("i1");
-  var file = {
-    dom: document.getElementById("i2"),
+  const text = document.getElementById("theText");
+  const file = {
+    dom: document.getElementById("theFile"),
     binary: null,
   };
 
   // 使用 FileReader API 获取文件内容
-  var reader = new FileReader();
+  const reader = new FileReader();
 
   // 因为 FileReader 是异步的，会在完成读取文件时存储结果
-  reader.addEventListener("load", function () {
+  reader.addEventListener("load", () => {
     file.binary = reader.result;
   });
 
@@ -313,7 +271,7 @@ window.addEventListener("load", function () {
   }
 
   // 如果没有被选择，一旦用户选择了它，就读取文件。
-  file.dom.addEventListener("change", function () {
+  file.dom.addEventListener("change", () => {
     if (reader.readyState === FileReader.LOADING) {
       reader.abort();
     }
@@ -330,34 +288,30 @@ window.addEventListener("load", function () {
       return;
     }
 
-    // 要构建我们的多重表单数据请求，
+    // 要构建我们的多部分表单数据请求，
     // 我们需要一个 XMLHttpRequest 实例
-    var XHR = new XMLHttpRequest();
+    const XHR = new XMLHttpRequest();
 
     // 我们需要一个分隔符来定义请求的每一部分。
-    var boundary = "blob";
+    const boundary = "blob";
 
     // 将我们的主体请求存储于一个字符串中
-    var data = "";
+    let data = "";
 
     // 所以，如果用户已经选择了一个文件
     if (file.dom.files[0]) {
       // 在请求体中开始新的一部分
-      data += "--" + boundary + "\r\n";
+      data += `--${boundary}\r\n`;
 
       // 把它描述成表单数据
       data +=
         "content-disposition: form-data; " +
         // 定义表单数据的名称
-        'name="' +
-        file.dom.name +
-        '"; ' +
+        `name="${file.dom.name}"; ` +
         // 提供文件的真实名字
-        'filename="' +
-        file.dom.files[0].name +
-        '"\r\n';
+        `filename="${file.dom.files[0].name}"\r\n`;
       // 和文件的 MIME 类型
-      data += "Content-Type: " + file.dom.files[0].type + "\r\n";
+      data += `Content-Type: ${file.dom.files[0].type}\r\n`;
 
       // 元数据和数据之间有一条空行。
       data += "\r\n";
@@ -368,10 +322,10 @@ window.addEventListener("load", function () {
 
     // 文本数据更简单一些
     // 在主体请求中开始一个新的部分
-    data += "--" + boundary + "\r\n";
+    data += `--${boundary}\r\n`;
 
-    // 声明它是表单数据，并命名它
-    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
+    // 假设这是表单数据，并命名它
+    data += `content-disposition: form-data; name="${text.name}"\r\n`;
     // 元数据和数据之间有一条空行。
     data += "\r\n";
 
@@ -379,11 +333,11 @@ window.addEventListener("load", function () {
     data += text.value + "\r\n";
 
     // 一旦完成，“关闭”主体请求
-    data += "--" + boundary + "--";
+    data += `--${boundary}--`;
 
     // 定义成功提交数据执行的语句
-    XHR.addEventListener("load", function (event) {
-      alert("✌！数据已发送且响应已加载。");
+    XHR.addEventListener("load", (event) => {
+      alert("耶！已发送数据并加载响应。");
     });
 
     // 定义发生错误时做的事
@@ -394,35 +348,53 @@ window.addEventListener("load", function () {
     // 建立请求
     XHR.open("POST", "https://example.com/cors.php");
 
-    // 添加需要的 HTTP 头部来处理多重表单数据 POST 请求
+    // 添加需要的 HTTP 头部来处理多部分表单数据 POST 请求
     XHR.setRequestHeader(
       "Content-Type",
-      "multipart/form-data; boundary=" + boundary,
+      `multipart/form-data; boundary=${boundary}`,
     );
 
     // 最后，发送数据。
     XHR.send(data);
   }
 
-  // 访问表单…
-  var form = document.getElementById("myForm");
+  // 获取表单元素
+  const form = document.getElementById("theForm");
 
-  // …接管提交事件
-  form.addEventListener("submit", function (event) {
+  // 添加 submit 事件处理器
+  form.addEventListener("submit", (event) => {
     event.preventDefault();
     sendData();
   });
 });
 ```
 
-在线演示：
+这里是实时演示效果：
 
 {{EmbedLiveSample("处理二进制数据", "100%", 150)}}
 
 ## 总结
 
-取决于不同的浏览器，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫的在旧浏览器上通过 polyfill 使用它：
+取决于不同的浏览器和正在处理数据的类型，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫地在旧浏览器上通过 [polyfill](https://github.com/jimmywarting/FormData) 使用它：
+
+## 参见
+
+### 学习路径
+
+- [你的第一个 HTML 表单](/zh-CN/docs/Learn/Forms/Your_first_form)
+- [如何构建 HTML 表单](/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form)
+- [原生表单控件](/zh-CN/docs/Learn/Forms/Basic_native_form_controls)
+- [HTML5 输入（input）类型](/zh-CN/docs/Learn/Forms/HTML5_input_types)
+- [其他表单控件](/zh-CN/docs/Learn/Forms/Other_form_controls)
+- [UI 伪类](/zh-CN/docs/Learn/Forms/UI_pseudo-classes)
+- [样式化 HTML 表单](/zh-CN/docs/Learn/Forms/Styling_web_forms)
+- [表单数据校验](/zh-CN/docs/Learn/Forms/Form_validation)
+- [发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data)
+
+### 更进一步
 
-- 此 [gist](https://gist.github.com/3120320) 通过 {{domxref("Using_web_workers","Web Worker")}} polyfill 了 `FormData`。
-- [HTML5-formdata](https://github.com/francois2metz/html5-formdata) 试图 polyfill `FormData` 对象，但是它需要 [File API](http://www.w3.org/TR/FileAPI/)
-- 这个 [polyfill](https://github.com/jimmywarting/FormData) 提供了 FormData 所有的大部分新方法（entries, keys, values, 以及对 `for...of` 的支持）
+- **使用 JavaScript 发送表单**
+- [如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)
+- [旧式浏览器的 HTML 表单](/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers)
+- [进一步为 HTML 表单添加样式](/zh-CN/docs/Learn/Forms/Advanced_form_styling)
+- [表单控件兼容性列表](/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls)

From 8359dca7f6e675ce8855b19d4e9860a85d61105d Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Mon, 2 Oct 2023 16:07:34 +0900
Subject: [PATCH 252/268] [ko]: add index.md for
 `web/glossary/first_meaningful_paint` (#15984)

[revise]: revise feedback
---
 .../glossary/first_meaningful_paint/index.md  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 files/ko/glossary/first_meaningful_paint/index.md

diff --git a/files/ko/glossary/first_meaningful_paint/index.md b/files/ko/glossary/first_meaningful_paint/index.md
new file mode 100644
index 00000000000000..dd402e9aeab0e0
--- /dev/null
+++ b/files/ko/glossary/first_meaningful_paint/index.md
@@ -0,0 +1,19 @@
+---
+title: 최초 의미있는 페인트 (First Meaningful Paint, FMP)
+slug: Glossary/First_meaningful_paint
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**최초 의미있는 페인트(FMP)** 이후에 웹 페이지 초기 렌더링 직후 기본 화면 레이아웃(above-the-fold)이 변경되고, 웹 글꼴이 로드됩니다. FMP 이후에 사용자는 웹 페이지를 유용하다고 느낄 수 있습니다.
+
+FMP는 페이지 로드의 작은 차이에도 매우 민감합니다. 이로 인해 일관되지 않은(이중적인) 결과가 발생할 수 있습니다. 측정항목에 대한 정의는 브라우저 별 구현 세부정보에 의존합니다. 즉, 표준화할 수 없고 모든 웹 브라우저에서 구현되지 않았습니다.
+
+> **경고:** 최초 의미있는 페인트 (FMP)는 Lighthouse 6.0부터 지원되지 않습니다. 앞으로는 대신, [LargestContentfulPaint API](https://wicg.github.io/largest-contentful-paint/) 사용을 고려해주세요.
+
+## 같이 보기
+
+- [최초 콘텐트풀 페인트](/ko/docs/Glossary/First_contentful_paint)
+- [최대 콘텐트풀 페인트](https://wicg.github.io/largest-contentful-paint/)

From d7ff042efdc2e23542c4015cef9ed1d08d7ae323 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Mon, 2 Oct 2023 16:08:15 +0900
Subject: [PATCH 253/268] [ko]: add index.md for `web/glossary/gecko` (#16001)

[revise]: revise feedback
---
 files/ko/glossary/gecko/index.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 files/ko/glossary/gecko/index.md

diff --git a/files/ko/glossary/gecko/index.md b/files/ko/glossary/gecko/index.md
new file mode 100644
index 00000000000000..320a7f79acaf59
--- /dev/null
+++ b/files/ko/glossary/gecko/index.md
@@ -0,0 +1,18 @@
+---
+title: 게코 (Gecko)
+slug: Glossary/Gecko
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**게코(Gecko)** 는 Mozilla Project에서 개발하고 {{glossary("Mozilla Firefox","파이어폭스")}} 및 {{glossary("Firefox OS","파이어폭스 운영체제")}}를 포함한 많은 애플리케이션/장치에서 사용되는 레이아웃 엔진입니다.
+
+웹 {{glossary("browser","브라우저")}}에는 {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}} 및 삽입된 콘텐츠(예, 이미지)를 해석하고 모든 것을 화면에 그리는 레이아웃 엔진이라는 소프트웨어가 필요합니다. 추가적으로, 게코(Gecko)는 연관된 {{glossary("API","API")}}가 게코(Gecko)가 지원하는 모든 운영체제에서 잘 작동하는지 확인하고, 적절한 API가 관련 지원 대상에만 노출되도록 합니다. 이것은 게코(Gecko)에는 무엇보다도 네트워킹 스택, 그래픽 스택, 레이아웃 엔진, JavaScript 가상 머신 및 포팅 레이어가 포함되어 있음을 의미합니다.
+
+모든 파이어폭스 운영체제 애플리케이션은 웹 앱이므로 파이어폭스 운영체제는 애플리케이션 런타임으로도 게코(Gecko)를 사용합니다.
+
+## 같이 보기
+
+- 위키백과의 [게코(Gecko)](<https://en.wikipedia.org/wiki/Gecko_(software)>)

From 0c8c303a65640ff31dd07da127ff78bd32602526 Mon Sep 17 00:00:00 2001
From: Javien Lee <kraccoon@kakao.com>
Date: Mon, 2 Oct 2023 18:15:54 +0900
Subject: [PATCH 254/268] ko: update Array.from() (#15637)

* sync with 401fb1dc7295cdd0ad29fad8a52fd37bd176d0b2

* why it fails to check

* guess it's just temporary

* sync with fb85334ffa4a2c88d209b1074909bee0e0abd57a

* Update files/ko/web/javascript/reference/global_objects/array/from/index.md
---
 .../global_objects/array/from/index.md        | 213 +++++++-----------
 1 file changed, 84 insertions(+), 129 deletions(-)

diff --git a/files/ko/web/javascript/reference/global_objects/array/from/index.md b/files/ko/web/javascript/reference/global_objects/array/from/index.md
index f2e3c76adfce44..8ea0eaac2f3df4 100644
--- a/files/ko/web/javascript/reference/global_objects/array/from/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/from/index.md
@@ -1,72 +1,84 @@
 ---
 title: Array.from()
 slug: Web/JavaScript/Reference/Global_Objects/Array/from
+l10n:
+  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
 ---
 
 {{JSRef}}
 
-**`Array.from()`** 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운`Array` 객체를 만듭니다.
+**`Array.from()`** 정적 메서드는 [순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#순회_가능_프로토콜) 또는 [유사 배열](/ko/docs/Web/JavaScript/Guide/Indexed_collections##유사_배열_객체_다루기) 객체에서 얕게 복사된 새로운 `Array` 인스턴스를 생성합니다.
 
-{{EmbedInteractiveExample("pages/js/array-from.html")}}
+{{EmbedInteractiveExample("pages/js/array-from.html", "shorter")}}
 
 ## 구문
 
-```js
-    Array.from(arrayLike[, mapFn[, thisArg]])
+```js-nolint
+Array.from(arrayLike)
+Array.from(arrayLike, mapFn)
+Array.from(arrayLike, mapFn, thisArg)
 ```
 
 ### 매개변수
 
 - `arrayLike`
-  - : 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체.
-- `mapFn`{{Optional_inline}}
-  - : 배열의 모든 요소에 대해 호출할 맵핑 함수.
-- `thisArg`{{Optional_inline}}
-  - : `mapFn` 실행 시에 `this`로 사용할 값.
+  - : 배열로 변환할 순회 가능 또는 유사 배열 객체입니다.
+- `mapFn`{{optional_inline}}
+  - : 배열의 모든 요소에 대해 호출할 함수입니다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수를 통해 먼저 전달되고, `mapFn`의 반환 값이 대신 배열에 추가됩니다. 이 함수는 다음 인수를 사용하여 호출됩니다.
+    - `element`
+      - : 배열에서 처리 중인 현재 요소.
+    - `index`
+      - : 배열에서 처리 중인 현재 요소의 인덱스.
+- `thisArg`{{optional_inline}}
+  - : `mapFn` 실행 시에 `this`로 사용할 값입니다.
 
 ### 반환 값
 
-새로운 {{jsxref("Array")}} 인스턴스.
+새로운 {{jsxref("Array")}} 인스턴스입니다.
 
 ## 설명
 
-다음과 같은 경우에 `Array.from()`으로새`Array`를 만들 수 있습니다.
+다음과 같은 경우에 `Array.from()`을 사용하면 `Array`를 만들 수 있습니다.
+
+- [순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#순회_가능_프로토콜) 객체({{jsxref("Map")}}, {{jsxref("Set")}}과 같은 객체)인 경우. 또는 객체가 순회 가능이 아니라면,
+- 유사 배열 객체(`length` 속성과 인덱싱된 요소가 있는 객체).
 
-- 유사 배열 객체 (`length` 속성과 인덱싱 된 요소를 가진 객체)
-- [순회 가능한 객체](/ko/docs/Web/JavaScript/Guide/iterable) ({{jsxref("Map")}}, {{jsxref("Set")}} 등객체의 요소를 얻을 수 있는 객체)
+순회 가능이 아니거나 유사 배열이 아닌 일반 객체를 배열로 변환하려면(속성 키, 값 또는 둘을 모두 열거하여) {{jsxref("Object.keys()")}}, {{jsxref("Object.values()")}}, 또는 {{jsxref("Object.entries()")}}를 사용해야 합니다. [비동기 순회 가능](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#비동기_순회자와_비동기_순회_가능_프로토콜)을 배열로 변환하려면 {{jsxref("Array.fromAsync()")}}를 사용합니다.
 
-`Array.from()`은 선택 매개변수인 `mapFn`를 가지는데, 배열(혹은 배열 서브클래스)의 각 요소를{{jsxref("Array.prototype.map", "맵핑", "", 0)}}할 때 사용할 수 있습니다. 즉,`Array.from(obj, mapFn, thisArg)`는 중간에 다른 배열을 생성하지 않는다는 점을 제외하면`Array.from(obj).map(mapFn, thisArg)`와 같습니다. 이 특징은 [typed arrays](/ko/docs/Web/JavaScript/Typed_arrays)와 같은 특정 배열 서브클래스에서 중간 배열 값이 적절한 유형에 맞게 생략되기 때문에 특히 중요합니다.
+`Array.from()`은 희소 배열을 생성하지 않습니다. `arrayLike` 객체에 일부 인덱스 속성이 누락된 경우, 새 배열에서 해당 속성은 `undefined`가 됩니다.
 
-`from()` 메서드의 `length` 속성은 1입니다.
+`Array.from()`에는 생성되는 배열의 각 요소에 대해 함수를 실행할 수 있는 {{jsxref("Array/map", "map()")}}과 비슷한 선택적 매개변수 `mapFn`이 있습니다. 좀 더 명확하게 설명하자면, `Array.from(obj, mapFn, thisArg)`는 중간 배열을 생성하지 않는다는 점과 배열이 아직 생성 중이기 때문에 전체 배열 없어 두 개의 인수(`element`, `index`)만 받는다는 점을 제외하면 `Array.from(obj).map(mapFn, thisArg)`과 동일한 결과를 가져옵니다.
 
-ES2015 이후, 클래스 구문은 내장 및 새 클래스의 상속을 가능케 했습니다. 그 결과로 `Array.from`과 같은 정적 메서드는 `Array`의 서브클래스에 의해 상속되며, `Array` 대신 자신의 인스턴스를 만듭니다.
+> **참고:** 이 동작은 [형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays)에서 더 중요한데, 중간 배열에는 적절한 형식에 맞게 잘린 값이 있어야 하기 때문입니다. `Array.from()`은 {{jsxref("TypedArray.from()")}}과 동일한 동작을 하도록 구현되었습니다.
+
+`Array.from()` 메서드는 범용 팩토리 메서드입니다. 예를 들어, `Array`의 하위 클래스가 `from()` 메서드를 상속하는 경우, 상속된 `from()` 메서드는 `Array` 인스턴스 대신 하위 클래스의 새 인스턴스를 반환합니다. 실제로 `this` 값은 새 배열의 길이를 나타내는 단일 인수를 받는 모든 생성자 함수가 될 수 있습니다. 순회 가능이 `arrayLike`로 전달되면 인수 없이 생성자가 호출되고, 배열형 객체가 전달되면 배열형 객체의 [정규화된 length](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length_속성_일반화)를 사용하여 생성자가 호출됩니다. 최종 `length`는 순회가 완료되면 다시 설정됩니다. `this` 값이 생성자 함수가 아닌 경우, 일반 `Array` 생성자가 대신 사용됩니다.
 
 ## 예제
 
-### `String`에서 배열 만들기
+### String으로 배열 만들기
 
 ```js
 Array.from("foo");
-// ["f", "o", "o"]
+// [ "f", "o", "o" ]
 ```
 
-### `Set`에서 배열 만들기
+### Set으로 배열 만들기
 
 ```js
-const s = new Set(["foo", window]);
-Array.from(s);
-// ["foo", window]
+const set = new Set(["foo", "bar", "baz", "foo"]);
+Array.from(set);
+// [ "foo", "bar", "baz" ]
 ```
 
-### `Map`에서 배열 만들기
+### Map으로 배열 만들기
 
 ```js
-const m = new Map([
+const map = new Map([
   [1, 2],
   [2, 4],
   [4, 8],
 ]);
-Array.from(m);
+Array.from(map);
 // [[1, 2], [2, 4], [4, 8]]
 
 const mapper = new Map([
@@ -80,7 +92,16 @@ Array.from(mapper.keys());
 // ['1', '2'];
 ```
 
-### 배열 형태를 가진 객체(`arguments`)에서 배열 만들기
+### NodeList로 배열 만들기
+
+```js
+// DOM 요소의 속성을 기반으로 배열 만들기
+const images = document.querySelectorAll("img");
+const sources = Array.from(images, (image) => image.src);
+const insecureSources = sources.filter((link) => link.startsWith("http://"));
+```
+
+### 유사 배열 객체로 베열 만들기 (arguments)
 
 ```js
 function f() {
@@ -89,143 +110,72 @@ function f() {
 
 f(1, 2, 3);
 
-// [1, 2, 3]
+// [ 1, 2, 3 ]
 ```
 
-### `Array.from`과 화살표 함수 사용하기
+### 화살표 함수와 Array.from() 사용하기
 
 ```js
-// Using an arrow function as the map function to
-// manipulate the elements
+// 화살표 함수를 map 함수로 사용하여 요소 조작
 Array.from([1, 2, 3], (x) => x + x);
 // [2, 4, 6]
 
-// Generate a sequence of numbers
-// Since the array is initialized with `undefined` on each position,
-// the value of `v` below will be `undefined`
+// 숫자 시퀀스 생성하기
+// 배열의 각 위치가 `undefined`로 초기화되므로
+// 아래 'v'의 값은 `undefined`가 됩니다.
 Array.from({ length: 5 }, (v, i) => i);
 // [0, 1, 2, 3, 4]
 ```
 
-### 시퀀스 생성기(range)
+### 시퀀스 생성기 (range)
 
 ```js
-// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc)
+// 시퀀스 생성기 함수 (Clojure, PHP 등에선 "range"라고도 함)
 const range = (start, stop, step) =>
   Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
 
-// Generate numbers range 0..4
+// 0..4 범위의 숫자 생성하기
 range(0, 4, 1);
 // [0, 1, 2, 3, 4]
 
-// Generate numbers range 1..10 with step of 2
+// 두 단계씩 1...10 범위의 숫자 생성
 range(1, 10, 2);
 // [1, 3, 5, 7, 9]
 
-// Generate the alphabet using Array.from making use of it being ordered as a sequence
+// 시퀀스로 정렬되는 것을 활용하여 `Array.from`으로 알파벳을 생성하기
 range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) =>
   String.fromCharCode(x),
 );
 // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
 ```
 
-## 폴리필
+### 배열이 아닌 생성자에 from() 호출하기
 
-`Array.from`은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도`Array.from`을 사용할 수 있습니다. 아래 알고리즘은[`Object`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object)와[`TypeError`](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError)가 변형되지 않고,`callback.call`의 계산 값이 원래의[`Function.prototype.call()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call)과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다. 또한 반복가능자(iterable)는 완벽하게 폴리필 할 수 없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다.
+`from()` 메서드는 새 배열의 `length`를 나타내는 단일 인수를 받아들이는 모든 생성자 함수에서 호출할 수 있습니다.
 
 ```js
-// Production steps of ECMA-262, Edition 6, 22.1.2.1
-if (!Array.from) {
-  Array.from = (function () {
-    var toStr = Object.prototype.toString;
-    var isCallable = function (fn) {
-      return typeof fn === "function" || toStr.call(fn) === "[object Function]";
-    };
-    var toInteger = function (value) {
-      var number = Number(value);
-      if (isNaN(number)) {
-        return 0;
-      }
-      if (number === 0 || !isFinite(number)) {
-        return number;
-      }
-      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
-    };
-    var maxSafeInteger = Math.pow(2, 53) - 1;
-    var toLength = function (value) {
-      var len = toInteger(value);
-      return Math.min(Math.max(len, 0), maxSafeInteger);
-    };
-
-    // The length property of the from method is 1.
-    return function from(arrayLike /*, mapFn, thisArg */) {
-      // 1. Let C be the this value.
-      var C = this;
-
-      // 2. Let items be ToObject(arrayLike).
-      var items = Object(arrayLike);
-
-      // 3. ReturnIfAbrupt(items).
-      if (arrayLike == null) {
-        throw new TypeError(
-          "Array.from requires an array-like object - not null or undefined",
-        );
-      }
-
-      // 4. If mapfn is undefined, then let mapping be false.
-      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
-      var T;
-      if (typeof mapFn !== "undefined") {
-        // 5. else
-        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
-        if (!isCallable(mapFn)) {
-          throw new TypeError(
-            "Array.from: when provided, the second argument must be a function",
-          );
-        }
-
-        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
-        if (arguments.length > 2) {
-          T = arguments[2];
-        }
-      }
-
-      // 10. Let lenValue be Get(items, "length").
-      // 11. Let len be ToLength(lenValue).
-      var len = toLength(items.length);
-
-      // 13. If IsConstructor(C) is true, then
-      // 13. a. Let A be the result of calling the [[Construct]] internal method
-      // of C with an argument list containing the single item len.
-      // 14. a. Else, Let A be ArrayCreate(len).
-      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
-
-      // 16. Let k be 0.
-      var k = 0;
-      // 17. Repeat, while k < len… (also steps a - h)
-      var kValue;
-      while (k < len) {
-        kValue = items[k];
-        if (mapFn) {
-          A[k] =
-            typeof T === "undefined"
-              ? mapFn(kValue, k)
-              : mapFn.call(T, kValue, k);
-        } else {
-          A[k] = kValue;
-        }
-        k += 1;
-      }
-      // 18. Let putStatus be Put(A, "length", len, true).
-      A.length = len;
-      // 20. Return A.
-      return A;
-    };
-  })();
+function NotArray(len) {
+  console.log("NotArray called with length", len);
 }
+
+// 순회 가능
+console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"])));
+// NotArray는 length가 undefined인 상태로 호출됩니다.
+// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }
+
+// 유사 배열
+console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));
+// NotArray는 length가 1인 상태로 호출됩니다.
+// NotArray { '0': 'foo', length: 1 }
+```
+
+`this` 값이 생성자가 아닌 경우, 일반 `Array` 객체가 반환됩니다.
+
+```js
+console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -235,6 +185,11 @@ if (!Array.from) {
 
 ## 같이 보기
 
+- [`core-js`의 `Array.from` 폴리필](https://github.com/zloirock/core-js#ecmascript-array)
+- [인덱스 기반 컬렉션](/ko/docs/Web/JavaScript/Guide/Indexed_collections) 안내서
 - {{jsxref("Array")}}
+- {{jsxref("Array/Array", "Array()")}}
+- {{jsxref("Array.of()")}}
+- {{jsxref("Array.fromAsync()")}}
 - {{jsxref("Array.prototype.map()")}}
 - {{jsxref("TypedArray.from()")}}

From 3d778842e0f847cfa8f659719d9a8fddc071b6dc Mon Sep 17 00:00:00 2001
From: mdn-bot <108879845+mdn-bot@users.noreply.github.com>
Date: Mon, 2 Oct 2023 00:31:26 +0000
Subject: [PATCH 255/268] ja: auto-fix Markdownlint issues

---
 files/ja/web/api/mouseevent/button/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/api/mouseevent/button/index.md b/files/ja/web/api/mouseevent/button/index.md
index 92c61b6d3ff378..0e9d4ba480656f 100644
--- a/files/ja/web/api/mouseevent/button/index.md
+++ b/files/ja/web/api/mouseevent/button/index.md
@@ -45,18 +45,18 @@ l10n:
 ### JavaScript
 
 ```js
-let button = document.querySelector('#button');
-button.addEventListener('mouseup', (e) => {
-  let log = document.querySelector('#log');
+let button = document.querySelector("#button");
+button.addEventListener("mouseup", (e) => {
+  let log = document.querySelector("#log");
   switch (e.button) {
     case 0:
-      log.textContent = '左ボタンがクリックされました。';
+      log.textContent = "左ボタンがクリックされました。";
       break;
     case 1:
-      log.textContent = '中央ボタンがクリックされました。';
+      log.textContent = "中央ボタンがクリックされました。";
       break;
     case 2:
-      log.textContent = '右ボタンがクリックされました。';
+      log.textContent = "右ボタンがクリックされました。";
       break;
     default:
       log.textContent = `不明なボタンコード: ${e.button}`;

From b7d290c245f975db7c0ed1926ab092e530660972 Mon Sep 17 00:00:00 2001
From: HoJeong Im <39ghwjd@naver.com>
Date: Mon, 2 Oct 2023 21:35:53 +0900
Subject: [PATCH 256/268] [ko]: add index.md for `web/glossary/enumerated`
 (#15949)

[add]: add index.md for web/glossary/enumerated
---
 files/ko/glossary/enumerated/index.md | 34 +++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 files/ko/glossary/enumerated/index.md

diff --git a/files/ko/glossary/enumerated/index.md b/files/ko/glossary/enumerated/index.md
new file mode 100644
index 00000000000000..f7add499e29fd0
--- /dev/null
+++ b/files/ko/glossary/enumerated/index.md
@@ -0,0 +1,34 @@
+---
+title: 열거형 (Enumerated)
+slug: Glossary/Enumerated
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+컴퓨터 과학에서, **열거형** 타입은 제한된 이름이 있는 값의 모음으로 구성된 데이터 타입입니다.
+
+## HTML 열거 속성
+
+HTML에서 [열거 속성](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute)은 제한된 사전 정의된 텍스트 값 모음이 있는 속성입니다. 예를 들어, 전역 HTML [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) 속성은 세 가지 유효한 값(`ltr`, `rtl` 및 `auto`)이 있습니다.
+
+열거된 각 속성에는 속성이 값 없이 존재할 경우(값이 누락되는 경우)에 대한 기본값 및 속성에 유효하지 않은 값이 할당될 경우에 대한 기본값이 있습니다. [불리언](/en-US/docs/Glossary/Boolean) HTML 속성과 달리, 이 속성에는 값이 존재하는지, 생략되었는지, 유효하지 않은지에 관계없이 속성이 존재할 때 항상 true입니다. 열거된 HTML 속성을 사용하면, 생략된 값의 기본값이 유효하지 않은 값의 기본값과 다를 수 있습니다.
+
+예를 들어, 전역 HTML [`contenteditable`](/ko/docs/Web/HTML/Global_attributes/contenteditable) 속성은 두 개의 유효한 키워드( `true` 및 `false`)를 가집니다. 속성이 있지만 값이 설정되지 않은 경우, 값은 `true`입니다. 값이 설정되었지만, 유효하지 않은 경우(`contenteditable="contenteditable"`와 같이), 값은 세 번째 상태인 `inherit`으로 매핑됩니다.
+
+## ARIA 열거 속성
+
+ARIA 상태와 속성은 HTML이므로 열거된 속성도 있습니다. ARIA 속성이 열거된 목록에 `true` 및 `false` 값을 모두 포함하는 경우, 일반적으로 생략된 속성은 `false`로, 유효하지 않은 값은 `true`로 처리하는 반면, 빈 문자열이나 생략된 값의 기본값은 속성에 따라 다릅니다.
+
+예를 들어, `aria-current` 속성은 `page`, `step`, `location`, `date`, `time`, `true` 및 `false`를 포함하는 제한된 값 목록을 허용합니다. 이 경우에는, 속성이 없거나, 빈 문자열이거나, 값이 없거나 `aria-current="false"`로 설정된 경우에, 속성은 false이고 사용자에게 노출되지 않습니다. 열거된 값 목록에 없는 비어 있지 않은 문자열 값은 `aria-current="true"`가 설정된 것처럼 처리됩니다.
+
+## JavaScript 열거 속성
+
+JavaScript에서, 열거 가능 속성은 내부 열거 가능 플래그가 true로 설정된 속성입니다. 열거 가능 속성은 단순 할당이나 속성 초기자를 통해 생성된 속성의 기본값입니다. 대부분의 반복 메커니즘([`for...in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 반복문 및 [`Object.keys`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)와 같습니다)은 열거 가능한 키만 접근하게 됩니다.
+
+## 같이 보기
+
+- [불리언](/ko/docs/Glossary/Boolean)
+- [JavaScript 데이터 타입과 자료구조](/ko/docs/Web/JavaScript/Data_structures)
+- HTML 표준의 [열거 속성](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute)

From 92e8e215ea867637062b5205c31ed46bb0e4f875 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 17 Jul 2023 02:08:49 +0900
Subject: [PATCH 257/268] =?UTF-8?q?2023/04/13=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/u/index.md | 124 ++++++++++++++-------------
 1 file changed, 64 insertions(+), 60 deletions(-)

diff --git a/files/ja/web/html/element/u/index.md b/files/ja/web/html/element/u/index.md
index 1dc5161c193b28..8bbc2cba9a0d44 100644
--- a/files/ja/web/html/element/u/index.md
+++ b/files/ja/web/html/element/u/index.md
@@ -1,11 +1,13 @@
 ---
-title: "<u>: 非言語的注釈 (下線) 要素"
+title: "<u>: 非言語的注釈（下線）要素"
 slug: Web/HTML/Element/u
+l10n:
+  sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
 ---
 
 {{HTMLSidebar}}
 
-**HTML** の**非言語的注釈要素** (**`<u>`**) は、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。
+**`<u>`** は [HTML](/ja/docs/Web/HTML) の要素で、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。
 
 > **警告:** この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の {{cssxref("text-decoration")}} プロパティを `underline` に設定したスタイルを適用してください。
 
@@ -13,60 +15,6 @@ slug: Web/HTML/Element/u
 
 `<u>` を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、[使用上の注意](#使用上の注意)を参照してください。
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">
-        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a>
-      </th>
-      <td>
-        <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ"
-          >フローコンテンツ</a
-        >,
-        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
-          >記述コンテンツ</a
-        >, 知覚可能コンテンツ
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">許可されている内容</th>
-      <td>
-        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
-          >記述コンテンツ</a
-        >
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">タグの省略</th>
-      <td>{{no_tag_omission}}</td>
-    </tr>
-    <tr>
-      <th scope="row">許可されている親要素</th>
-      <td>
-        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
-          >記述コンテンツ</a
-        >を受け入れるすべての要素
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">暗黙の ARIA ロール</th>
-      <td>
-        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
-          >対応するロールなし</a
-        >
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">許可されている ARIA ロール</th>
-      <td>すべて</td>
-    </tr>
-    <tr>
-      <th scope="row">DOM インターフェイス</th>
-      <td>{{domxref("HTMLElement")}}</td>
-    </tr>
-  </tbody>
-</table>
-
 ## 属性
 
 この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。
@@ -75,11 +23,11 @@ slug: Web/HTML/Element/u
 
 他の純粋な整形要素と同様に、以前の HTML の下線 (`<u>`) 要素は HTML 4 で非推奨になりました。しかし `<u>` は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。
 
-> **メモ:** (既定で下線が引かれる) ハイパーリンクと誤認されるような方法で、 (これも既定で下線が引かれる) `<u>` 要素を使用することは避けるように注意してください。
+> **メモ:** （既定で下線が引かれる）ハイパーリンクと誤認されるような方法で、（これも既定で下線が引かれる）`<u>` 要素を使用することは避けるように注意してください。
 
 ### 用途
 
-`<u>` 要素の有効な用途としては、綴りエラーの通知、中国語の文字列の[固有名詞記号](https://en.wikipedia.org/wiki/proper_name_mark)の記述、その他の形の注釈などがあります。
+`<u>` 要素の有効な用途としては、綴りエラーの通知、中国語の文字列の[固有名詞記号](https://en.wikipedia.org/wiki/Proper_name_mark)の記述、その他の形の注釈などがあります。
 
 単に表現の目的で下線を引いたり、本の題名を記述したりするために `<u>` を使用するべきでは*ありません*。
 
@@ -94,7 +42,7 @@ slug: Web/HTML/Element/u
 - {{HTMLElement("cite")}}: 書籍やその他の出版物の題名をマーク
 - {{HTMLElement("i")}}: 西洋言語のテキストで技術用語、音訳、考え、船名などを記述
 
-(`<u>` で作成された非言語的な注釈に対して) 言語的な注釈を提供する場合は、 {{HTMLElement("ruby")}} 要素を使用してください。
+（`<u>` で作成された非言語的な注釈に対して）言語的な注釈を提供する場合は、 {{HTMLElement("ruby")}} 要素を使用してください。
 
 意味論的な意味なしで下線を引きたい場合は、 {{cssxref("text-decoration")}} プロパティの値 `underline` を使用してください。
 
@@ -168,7 +116,7 @@ Chicken Noodle Soup With Carrots
 
 {{EmbedLiveSample("Using_the_cite_element", 650, 80)}}
 
-##### cit 要素のスタイル付け
+##### cite 要素のスタイル付け
 
 なお、 `<cite>` 要素の既定のスタイルではテキストを斜体で表示します。 CSS を使用して上書きすることができます。
 
@@ -185,6 +133,62 @@ cite {
 
 {{EmbedLiveSample("Styling_the_cite_element", 650, 80)}}
 
+## 技術的概要
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a>
+      </th>
+      <td>
+        <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ"
+          >フローコンテンツ</a
+        >,
+        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
+          >記述コンテンツ</a
+        >, 知覚可能コンテンツ
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている内容</th>
+      <td>
+        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
+          >記述コンテンツ</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">タグの省略</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている親要素</th>
+      <td>
+        <a href="/ja/docs/Web/HTML/Content_categories#記述コンテンツ"
+          >記述コンテンツ</a
+        >を受け入れるすべての要素
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">暗黙の ARIA ロール</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >対応するロールなし</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている ARIA ロール</th>
+      <td>すべて</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM インターフェイス</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
 ## 仕様書
 
 {{Specifications}}

From 0e19662dfc66998f39bf4a81bf411fe9bb4e4984 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 7 Jul 2023 01:15:57 +0900
Subject: [PATCH 258/268] =?UTF-8?q?2023/06/13=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/rp/index.md | 106 +++++++++++++-------------
 1 file changed, 55 insertions(+), 51 deletions(-)

diff --git a/files/ja/web/html/element/rp/index.md b/files/ja/web/html/element/rp/index.md
index 7a63c17931d5a3..cfba598415eedc 100644
--- a/files/ja/web/html/element/rp/index.md
+++ b/files/ja/web/html/element/rp/index.md
@@ -1,68 +1,23 @@
 ---
-title: "<rp>: ルビのフォールバック用括弧要素"
+title: "<rp>: ルビの代替表示用括弧要素"
 slug: Web/HTML/Element/rp
+l10n:
+  sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c
 ---
 
 {{HTMLSidebar}}
 
-**HTML のルビ代替表示用括弧 (`<rp>`) 要素**は、 {{HTMLElement("ruby")}} 要素によるルビの表示に対応していないブラウザー向けの代替表示用括弧を提供するために使用します。 `<rp>` 要素は、注釈の文字列を {{HTMLElement("rt")}} 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。
+**`<rp>`** は [HTML](/ja/docs/Web/HTML) の要素で、{{HTMLElement("ruby")}} 要素によるルビの表示に対応していないブラウザー向けの代替表示用の括弧を提供するために使用します。それぞれ 1 つの `<rp>` 要素で、注釈の文字列を含む {{HTMLElement("rt")}} 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。
 
 {{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">
-        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a>
-      </th>
-      <td>なし</td>
-    </tr>
-    <tr>
-      <th scope="row">許可されている内容</th>
-      <td>テキスト</td>
-    </tr>
-    <tr>
-      <th scope="row">タグの省略</th>
-      <td>
-        要素の直後に {{HTMLElement("rt")}} または他の
-        <code>&#x3C;rp></code>
-        要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">許可されている親要素</th>
-      <td>
-        {{HTMLElement("ruby")}} 要素。 <code>&#x3C;rp></code> 要素は
-        {{HTMLElement("rt")}}
-        要素の直前または直後に配置しなければなりません。
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">暗黙の ARIA ロール</th>
-      <td>
-        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
-          >対応するロールなし</a
-        >
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">許可されている ARIA ロール</th>
-      <td>すべて</td>
-    </tr>
-    <tr>
-      <th scope="row">DOM インターフェイス</th>
-      <td>{{domxref("HTMLElement")}}</td>
-    </tr>
-  </tbody>
-</table>
-
 ## 属性
 
 この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)以外の属性はありません。
 
 ## 使用上のメモ
 
-- ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。 `<rp>` 要素は {{HTMLElement("ruby")}} 要素に対応していない場合に使用されます。 `<rp>` 要素の内容物で、ルビの存在を示すために何を表示すべきか（通常は括弧）を指定します。
+- ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。`<rp>` 要素は {{HTMLElement("ruby")}} 要素に対応していない場合に使用されます。`<rp>` 要素の内容は、ルビの存在を示すために何を表示すべきか（通常は括弧）を示します。
 
 ## 例
 
@@ -104,13 +59,62 @@ body {
 
 {{EmbedLiveSample("Without_ruby_support", 600, 60)}}
 
+## 技術的概要
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a>
+      </th>
+      <td>なし</td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている内容</th>
+      <td>テキスト</td>
+    </tr>
+    <tr>
+      <th scope="row">タグの省略</th>
+      <td>
+        要素の直後に {{HTMLElement("rt")}} または他の
+        <code>&#x3C;rp></code>
+        要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている親要素</th>
+      <td>
+        {{HTMLElement("ruby")}} 要素。 <code>&#x3C;rp></code> 要素は
+        {{HTMLElement("rt")}}
+        要素の直前または直後に配置しなければなりません。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">暗黙の ARIA ロール</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >対応するロールなし</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">許可されている ARIA ロール</th>
+      <td>すべて</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM インターフェイス</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
 ## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("html.elements.rp")}}
+{{Compat}}
 
 ## 関連情報
 

From 51c3a4be6f2451f5dc71218df40c2a201a755de4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 6 May 2023 02:03:24 +0900
Subject: [PATCH 259/268] =?UTF-8?q?2023/03/31=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/html/element/input/color/index.md  | 115 +++++++++---------
 1 file changed, 60 insertions(+), 55 deletions(-)

diff --git a/files/ja/web/html/element/input/color/index.md b/files/ja/web/html/element/input/color/index.md
index b1b43e21a6ee9c..88cf279716f55c 100644
--- a/files/ja/web/html/element/input/color/index.md
+++ b/files/ja/web/html/element/input/color/index.md
@@ -2,7 +2,7 @@
 title: <input type="color">
 slug: Web/HTML/Element/input/color
 l10n:
-  sourceCommit: 7594b50698a76ce79209b159835e615052915723
+  sourceCommit: 1995a9dbe407d9ee41c3b1b50f29e020a85e456a
 ---
 
 {{HTMLSidebar}}
@@ -15,49 +15,9 @@ CSS の色表現には他にも色名、関数表記、アルファ値つきの
 
 {{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <td><strong><a href="#value">値</a></strong></td>
-      <td>
-        小文字の 16 進数で {{cssxref("&lt;color&gt;")}} を定義する
-         7 文字の文字列
-      </td>
-    </tr>
-    <tr>
-      <td><strong>イベント</strong></td>
-      <td>
-        {{domxref("HTMLElement/change_event", "change")}} および
-        {{domxref("HTMLElement/input_event", "input")}}
-      </td>
-    </tr>
-    <tr>
-      <td><strong>対応する共通属性</strong></td>
-      <td>
-        <a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a> および
-        <a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a>
-      </td>
-    </tr>
-    <tr>
-      <td><strong>IDL 属性</strong></td>
-      <td><code>list</code> および <code>value</code></td>
-    </tr>
-    <tr>
-      <td><strong>DOM インターフェイス</strong></td>
-      <td><p>{{domxref("HTMLInputElement")}}</p></td>
-    </tr>
-    <tr>
-      <td><strong>メソッド</strong></td>
-      <td>
-        {{domxref("HTMLInputElement.select", "select()")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
 ## 値
 
-type が `color` の {{HTMLElement("input")}} 要素の [`value`](/ja/docs/Web/HTML/Element/input#value) は、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。
+{{HTMLElement("input")}} 要素で型が `color` のものの [`value`](/ja/docs/Web/HTML/Element/input#value) は、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。
 
 > **メモ:** 有効な、不透明な *16 進表現*の RGB カラーではない値を設定した場合は、結果的に `#000000` に設定されます。特に、CSS で標準化されている色名や、CSS 関数を値の設定に使用することはできません。HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。`#009900aa` のような 9 文字の 16 進表記で色を設定すると、結果的に `#000000` に設定されます。
 
@@ -67,7 +27,7 @@ type が `color` の入力欄は、対応する属性の数が限られている
 
 ### 既定の色の設定
 
-上記の例で既定値を設定するように変更すると、色の部分があらかじめ既定色で塗りつぶされ、カラーピッカーも（もしあれば）その色が既定になります。
+上記の例で既定値を設定するように変更すると、カラーピッカーがあらかじめ既定色で塗りつぶされ、カラーピッカーも（もしあれば）その色が既定になります。
 
 ```html
 <input type="color" value="#ff0000" />
@@ -101,7 +61,7 @@ function watchColorPicker(event) {
 ブラウザーがカラーピッカーなどを提供している場合、`select()` は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。
 
 ```js
-colorWell.select();
+colorPicker.select();
 ```
 
 ## 検証
@@ -114,13 +74,13 @@ colorWell.select();
 
 ### HTML
 
-HTMLはかなり単純です。数段落の説明的な素材と、 ID が `colorWell` で `color` 型の {{HTMLElement("input")}} があり、これを使用して段落のテキストの色を変更することになります。
+HTMLはかなり単純です。数段落の説明的な素材と、 ID が `color-picker` で `color` 型の {{HTMLElement("input")}} があり、これを使用して段落のテキストの色を変更することになります。
 
 ```html
 <p><code>&lt;input type="color"&gt;</code> コントロールを使用する例です。</p>
 
-<label for="colorWell">色:</label>
-<input type="color" value="#ff0000" id="colorWell" />
+<label for="color-picker">色:</label>
+<input type="color" value="#ff0000" id="color-picker" />
 
 <p>
   カラーピッカーを動かしたときに段落の色が変わるのを見てください。カラーピッカーに変更を加えると、最初の段落の色が、プレビューとして変化します（<code
@@ -136,7 +96,7 @@ HTMLはかなり単純です。数段落の説明的な素材と、 ID が `colo
 まずはいくつかの設定を行います。いくつかの変数を作成し、変数の値をページが最初に読み込まれたとき設定する色にし、ページが完全に読み込まれた時に一度スタートアップ作業を実行させるために {{domxref("Window/load_event", "load")}} ハンドラーを設定します。
 
 ```js
-let colorWell;
+let colorPicker;
 const defaultColor = "#0000ff";
 
 window.addEventListener("load", startup, false);
@@ -148,19 +108,19 @@ window.addEventListener("load", startup, false);
 
 ```js
 function startup() {
-  colorWell = document.querySelector("#colorWell");
-  colorWell.value = defaultColor;
-  colorWell.addEventListener("input", updateFirst, false);
-  colorWell.addEventListener("change", updateAll, false);
-  colorWell.select();
+  colorPicker = document.querySelector("#color-picker");
+  colorPicker.value = defaultColor;
+  colorPicker.addEventListener("input", updateFirst, false);
+  colorPicker.addEventListener("change", updateAll, false);
+  colorPicker.select();
 }
 ```
 
-`colorWell` に取得された `<input>` 要素を格納し、value プロパティに `defaultColor` を代入します。次に、{{domxref("HTMLElement/input_event", "input")}} イベントに `updateFirst()` 関数を、{{domxref("HTMLElement/change_event", "change")}} イベントに `updateAll()` 関数を指定します。これらについては後述します。
+これは color の `<input>` 要素の参照を取得して `colorPicker` という変数に格納し、色入力欄の値を `defaultColor` を設定します。次に、{{domxref("HTMLElement/input_event", "input")}} イベントに `updateFirst()` 関数を、{{domxref("HTMLElement/change_event", "change")}} イベントに `updateAll()` 関数を指定します。これらについては後述します。
 
 最後に {{domxref("HTMLInputElement.select", "select()")}} を呼び出し、色入力のテキストコンテンツを選択します。これはカラーピッカーが提供されていないなどで、テキスト入力欄として表示された場合に利用します。
 
-#### 色の変更に反応させる
+#### 色の変更に応答させる
 
 色の変更に反応する 2 つの関数を与えています。`updateFirst()` 関数は `input` イベントによって呼び出され、文書の最初にある段落要素の色を変えて、入力欄の新しい値と一致させます。 `input` イベントは値を調整する（例えば明るさを増加させるなど）たびに実行されるため、カラーピッカーが使用される毎に繰り返して実行されます。
 
@@ -191,6 +151,51 @@ function updateAll(event) {
 
 {{EmbedLiveSample("Example", 700, 200)}}
 
+## 技術的概要
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <td><strong><a href="#value">値</a></strong></td>
+      <td>
+        小文字の 16 進数で {{cssxref("&lt;color&gt;")}} を定義する 7 文字の文字列
+      </td>
+    </tr>
+    <tr>
+      <td><strong>イベント</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} および
+        {{domxref("HTMLElement/input_event", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>対応する共通属性</strong></td>
+      <td>
+        <a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a> および
+        <a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a>
+      </td>
+    </tr>
+    <tr>
+      <td><strong>IDL 属性</strong></td>
+      <td><code>list</code> および <code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>DOM インターフェイス</strong></td>
+      <td><p>{{domxref("HTMLInputElement")}}</p></td>
+    </tr>
+    <tr>
+      <td><strong>メソッド</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>暗黙の ARIA ロール</strong></td>
+      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"><code>対応するロールなし</code></a></td>
+    </tr>
+  </tbody>
+</table>
+
 ## 仕様書
 
 {{Specifications}}

From 1d0768d7196f5aeaf0196680c5977440c2173bbc Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 7 Jul 2023 01:45:00 +0900
Subject: [PATCH 260/268] =?UTF-8?q?2023/04/13=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/rtc/index.md | 69 ++++++++++++++------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/files/ja/web/html/element/rtc/index.md b/files/ja/web/html/element/rtc/index.md
index 3ecc529ec7ffd5..247ffcab75aa10 100644
--- a/files/ja/web/html/element/rtc/index.md
+++ b/files/ja/web/html/element/rtc/index.md
@@ -1,19 +1,53 @@
 ---
-title: "<rtc>: ルビ文字列コンテナー要素"
+title: "<rtc>: ルビテキストコンテナー要素"
 slug: Web/HTML/Element/rtc
+l10n:
+  sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
 ---
 
-{{HTMLSidebar}}
+{{HTMLSidebar}}{{deprecated_header}}
 
-**HTML のルビ文字列コンテナー (`<rtc>`) 要素**は、 {{HTMLElement("ruby")}} 要素内で使用する {{HTMLElement("rb")}} 要素にルビで与える文字列の、意味を表す注釈を包含します。{{HTMLElement("rb")}} 要素は発音の注釈 ({{HTMLElement("rt")}}) と意味の注釈 ({{HTMLElement("rtc")}}) の両方を持つことができます。
+**`<rtc>`** は [HTML](/ja/docs/Web/HTML) の要素で、{{HTMLElement("ruby")}} 要素内で使用する {{HTMLElement("rb")}} 要素にルビで与える文字列の、意味を表す注釈を包含します。{{HTMLElement("rb")}} 要素は発音の注釈 ({{HTMLElement("rt")}}) と意味の注釈 ({{HTMLElement("rtc")}}) の両方を持つことができます。
 
 {{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}
 
+## 属性
+
+この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。
+
+## 例
+
+```html
+<div class="info">
+  <ruby>
+    <rtc>
+      <rb>旧</rb><rt>jiù</rt>
+      <rb>金</rb><rt>jīn</rt>
+      <rb>山</rb><rt>shān</rt>
+    </rtc>
+    <rtc>San Francisco</rtc>
+  </ruby>
+</div>
+```
+
+```css hidden
+.info {
+  padding-top: 10px;
+  font-size: 36px;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples", 600, 120)}}
+
+## 技術的概要
+
 <table class="properties">
   <tbody>
     <tr>
       <th scope="row">
-        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a>
+        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a>
       </th>
       <td>なし</td>
     </tr>
@@ -48,32 +82,6 @@ slug: Web/HTML/Element/rtc
   </tbody>
 </table>
 
-## 属性
-
-この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。
-
-## 例
-
-```html
-<div class="info">
-  <ruby>
-    <rbc>
-      <rb>旧</rb><rt>jiù</rt> <rb>金</rb><rt>jīn</rt> <rb>山</rb><rt>shān</rt>
-    </rbc>
-    <rtc>San Francisco</rtc>
-  </ruby>
-</div>
-```
-
-```css hidden
-.info {
-  padding-top: 10px;
-  font-size: 36px;
-}
-```
-
-{{EmbedLiveSample("Examples", 600, 120)}}
-
 ## 仕様書
 
 {{Specifications}}
@@ -88,4 +96,3 @@ slug: Web/HTML/Element/rtc
 - {{HTMLElement("rp")}}
 - {{HTMLElement("rb")}}
 - {{HTMLElement("rt")}}
-- {{HTMLElement("rbc")}}

From efeb75854db2780cd016318ec8cc380e3fccfb35 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 25 Jun 2023 01:17:30 +0900
Subject: [PATCH 261/268] =?UTF-8?q?2023/04/13=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/nav/index.md | 62 +++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 10 deletions(-)

diff --git a/files/ja/web/html/element/nav/index.md b/files/ja/web/html/element/nav/index.md
index b18b9ba12f6cee..4fe94958c83abb 100644
--- a/files/ja/web/html/element/nav/index.md
+++ b/files/ja/web/html/element/nav/index.md
@@ -1,11 +1,13 @@
 ---
 title: "<nav>: ナビゲーションセクション要素"
 slug: Web/HTML/Element/nav
+l10n:
+  sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c
 ---
 
 {{HTMLSidebar}}
 
-**HTML の `<nav>` 要素**は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
+**`<nav>`** は [HTML](/ja/docs/Web/HTML) の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
 
 {{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}
 
@@ -13,12 +15,13 @@ slug: Web/HTML/Element/nav
   <tbody>
     <tr>
       <th scope="row">
-        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a>
+        <a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a>
       </th>
       <td>
         <a href="/ja/docs/Web/HTML/Content_categories#フローコンテンツ"
           >フローコンテンツ</a
-        >、<a href="/ja/docs/Web/HTML/Content_categories#区分コンテンツ"
+        >、
+        <a href="/ja/docs/Web/HTML/Content_categories#区分コンテンツ"
           >区分コンテンツ</a
         >、知覚可能コンテンツ
       </td>
@@ -43,6 +46,16 @@ slug: Web/HTML/Element/nav
         >を受け入れるすべての要素
       </td>
     </tr>
+    <tr>
+      <th scope="row">暗黙の ARIA ロール</th>
+      <td>
+        <code
+          ><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role"
+            >navigation</a
+          ></code
+        >
+      </td>
+    </tr>
     <tr>
       <th scope="row">許可されている ARIA ロール</th>
       <td>なし</td>
@@ -60,13 +73,13 @@ slug: Web/HTML/Element/nav
 
 ## 使用上の注意
 
-- すべてのリンクを `<nav>` 要素に入れる必要はありません。 `<nav>` はナビゲーションリンクの主要なブロックのみに用います。 {{HTMLElement("footer")}} にもよくリンクのリストが設置されますが、 {{HTMLElement("nav")}} 要素の中に入れる必要はありません。
-- {{HTMLElement("nav")}} 要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) を使用することができます。[例](/ja/docs/Web/HTML/Element/Heading_Elements#Labeling_section_content)をご覧ください。
+- すべてのリンクを `<nav>` 要素に入れる必要はありません。`<nav>` はナビゲーションリンクの主要なブロックのみに用います。{{HTMLElement("footer")}} にもよくリンクのリストが設置されますが、{{HTMLElement("nav")}} 要素の中に入れる必要はありません。
+- {{HTMLElement("nav")}} 要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) を使用することができます。[例](/ja/docs/Web/HTML/Element/Heading_Elements#labeling_section_content)をご覧ください。
 - スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。
 
 ## 例
 
-この例では、リンクの番号なしリスト ({{HTMLElement("ul")}}) を包含するために `<nav>` ブロックを使用します。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。
+この例では、`<nav>` ブロックを使用して、リンクの番号なしリスト ({{HTMLElement("ul")}}) を囲んでいます。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。
 
 ```html
 <nav class="menu">
@@ -78,16 +91,45 @@ slug: Web/HTML/Element/nav
 </nav>
 ```
 
+`nav` 要素の意味づけはリンクを提供することです。しかし、`nav` 要素はリストを格納する必要はなく、他の種類のコンテンツを格納することもできます。このナビゲーションブロックでは、リンクは散文で指定されています。
+
+```html
+<nav>
+  <h2>Navigation</h2>
+  <p>
+    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
+    whence the sounds of battle can be heard. To the east you can see a large
+    mountain, upon which many <a href="/school">school papers</a> are littered.
+    Far up this mountain you can spy a little figure who appears to be me,
+    desperately scribbling a <a href="/school/thesis">thesis</a>.
+  </p>
+  <p>
+    To the west are several exits. One fun-looking exit is labeled
+    <a href="https://games.example.com/">"games"</a>. Another more
+    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
+  </p>
+  <p>
+    To the south lies a dark and dank <a href="/about">contacts page</a>.
+    Cobwebs cover its disused entrance, and at one point you see a rat run
+    quickly out of the page.
+  </p>
+</nav>
+```
+
+### 結果
+
+{{EmbedLiveSample('Examples')}}
+
 ## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("html.elements.nav")}}
+{{Compat}}
 
 ## 関連情報
 
-- 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
-- [HTML5 文書のセクションとアウトライン](/ja/docs/Sections_and_Outlines_of_an_HTML5_document)
-- [ARIA: Navigation ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role)
+- 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("Heading_Elements", "h1")}}, {{HTMLElement("Heading_Elements", "h2")}}, {{HTMLElement("Heading_Elements", "h3")}}, {{HTMLElement("Heading_Elements", "h4")}}, {{HTMLElement("Heading_Elements", "h5")}}, {{HTMLElement("Heading_Elements", "h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
+- [HTML 文書のセクションとアウトライン](/ja/docs/Web/HTML/Element/Heading_Elements)
+- [ARIA: Navigation ロール](/ja/docs/Web/Accessibility/ARIA/Roles/navigation_role)

From 2ca0faa08617a56ee107af37d795fe4c4370022b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 28 Sep 2023 21:47:05 +0900
Subject: [PATCH 262/268] =?UTF-8?q?2023/04/11=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/http/headers/sec-fetch-user/index.md  | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 files/ja/web/http/headers/sec-fetch-user/index.md

diff --git a/files/ja/web/http/headers/sec-fetch-user/index.md b/files/ja/web/http/headers/sec-fetch-user/index.md
new file mode 100644
index 00000000000000..899bdb806ae903
--- /dev/null
+++ b/files/ja/web/http/headers/sec-fetch-user/index.md
@@ -0,0 +1,71 @@
+---
+title: Sec-Fetch-User
+slug: Web/HTTP/Headers/Sec-Fetch-User
+l10n:
+  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+---
+
+{{HTTPSidebar}}
+
+**`Sec-Fetch-User`** は{{Glossary("Fetch metadata request header", "フェッチメタデータリクエストヘッダー")}}で、これはユーザーアクティベーションによって開始されたリクエストに 対してのみ送られ、その値は常に `?1` です。
+
+サーバーはこのヘッダーを使用して、文書や iframe などからのナビゲーションリクエストがユーザーによって発信されたかどうかを識別できます。
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">ヘッダー種別</th>
+      <td>{{Glossary("Fetch metadata request header", "フェッチメタデータリクエストヘッダー")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
+      <td>はい（<code>Sec-</code> 接頭辞）</td>
+    </tr>
+    <tr>
+      <th scope="row">
+        {{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}
+      </th>
+      <td>いいえ</td>
+    </tr>
+  </tbody>
+</table>
+
+## 構文
+
+```http
+Sec-Fetch-User: ?1
+```
+
+## ディレクティブ
+
+値は常に `?1` です。リクエストがユーザーによるアクティベーション以外で発生した場合、 仕様ではヘッダーを完全に除外するようにブラウザーに要求されています。
+
+## 例
+
+ユーザーが同じオリジンの別のページへのページリンクをクリックした場合、結果として生じるリクエストには以下のヘッダーが入ります。
+
+```http
+Sec-Fetch-Dest: document
+Sec-Fetch-Mode: navigate
+Sec-Fetch-Site: same-origin
+Sec-Fetch-User: ?1
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 関連ヘッダー
+
+  - {{HTTPHeader("Sec-Fetch-Dest")}}
+  - {{HTTPHeader("Sec-Fetch-Mode")}}
+  - {{HTTPHeader("Sec-Fetch-Site")}}
+
+- [Protect your resources from web attacks with Fetch Metadata](https://web.dev/fetch-metadata/) (web.dev)
+- [Fetch Metadata Request Headers playground](https://secmetadata.appspot.com/) (secmetadata.appspot.com)

From eaba6bbb9e94fd9145964c1cc38e30cfde66976c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 28 Sep 2023 22:01:45 +0900
Subject: [PATCH 263/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/fullscreen_api/guide/index.md | 10 ++++++++--
 files/ja/web/api/fullscreen_api/index.md       |  7 ++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/files/ja/web/api/fullscreen_api/guide/index.md b/files/ja/web/api/fullscreen_api/guide/index.md
index 3c5fe25f7b50df..1d8b7e488a1715 100644
--- a/files/ja/web/api/fullscreen_api/guide/index.md
+++ b/files/ja/web/api/fullscreen_api/guide/index.md
@@ -1,6 +1,8 @@
 ---
 title: 全画面 API のガイド
 slug: Web/API/Fullscreen_API/Guide
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{DefaultAPISidebar("Fullscreen API")}}
@@ -67,6 +69,10 @@ if (elem.requestFullscreen) {
 - {{DOMxRef("Document.fullscreenEnabled")}}
   - : `fullscreenEnabled` プロパティは、現在文書内の全画面モードがリクエストされる状態であるかどうかを指示します。
 
+### モバイルブラウザーのビューポートの拡大縮小
+
+モバイルブラウザーによっては、全画面モードのときにビューポートメタタグの設定を無視し、ユーザーによる拡大縮小をブロックするものがあります。例えば、全画面モードでないときにピンチ操作で拡大縮小することができたとしても、全画面モードで表示されたページではピンチ操作で拡大縮小するジェスチャーが動作しないことがあります。
+
 ## ユーザーが知りたいこと
 
 ユーザーには、<kbd>Esc</kbd> キー（または <kbd>F11</kbd>）を押して全画面モードを終了できることを必ず伝えておくとよいでしょう。
@@ -109,9 +115,9 @@ function toggleFullScreen() {
 }
 ```
 
-これは {{DOMxRef("document")}} の `fullscreenElement` 属性の値を調べることから始まります（`moz`, `ms`, `webkit` のいずれかを接頭辞に持つものをチェックします）。もし `null` ならば、文書内のモードは現在ウィンドウモードなので、フルスクリーンモードに切り替える必要があります。全画面モードへの切り替えは {{DOMxRef("element.requestFullscreen()")}} を呼び出すことで行われます。
+これは {{DOMxRef("document")}} の `fullscreenElement` 属性の値を調べることから始まります。もし `null` ならば、文書内のモードは現在ウィンドウモードなので、全画面モードに切り替える必要があります。全画面モードへの切り替えは {{DOMxRef("element.requestFullscreen()")}} を呼び出すことで行われます。
 
-もし既に全画面モードが有効な場合（`fullscreenElement` が non`null`）、 {{DOMxRef("document.exitFullscreen()")}} を呼び出すことになります。
+もし既に全画面モードが有効な場合（`fullscreenElement` が `null` でない場合）、 {{DOMxRef("document.exitFullscreen()")}} を呼び出すことになります。
 
 ## 接頭辞
 
diff --git a/files/ja/web/api/fullscreen_api/index.md b/files/ja/web/api/fullscreen_api/index.md
index 03f64f2efbddb7..699148e04679f9 100644
--- a/files/ja/web/api/fullscreen_api/index.md
+++ b/files/ja/web/api/fullscreen_api/index.md
@@ -2,7 +2,7 @@
 title: 全画面 API
 slug: Web/API/Fullscreen_API
 l10n:
-  sourceCommit: 5f80944f03f785c729c12ac143cf88a1c12e72cd
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{DefaultAPISidebar("Fullscreen API")}}
@@ -59,9 +59,7 @@ _全画面 API は 2 つのイベントを定義しており、全画面モー
 
 ## アクセス制御
 
-全画面モードが利用可能であるかは、[機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)を使用して制御することができます。全画面モードの機能は `"fullscreen"` の文字列によって識別され、既定の許可リストの値は `"self"` であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。
-
-機能ポリシーを使用して API へのアクセスを制御することについて、詳しくは[機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)を参照してください。
+全画面モードが利用可能であるかは、[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)を使用して制御することができます。全画面モードの機能は `"fullscreen"` の文字列によって識別され、既定の許可リストの値は `"self"` であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。
 
 ## 使用上のメモ
 
@@ -121,7 +119,6 @@ function toggleFullScreen() {
 
 ## 関連情報
 
-- [全画面モードの使用](/ja/docs/Web/API/Fullscreen_API)
 - {{DOMxRef("Element.requestFullscreen()")}}
 - {{DOMxRef("Document.exitFullscreen()")}}
 - {{DOMxRef("Document.fullscreen")}}

From 38340ea9207853414faef9ac6a1b6c7b805c1a2a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 28 Sep 2023 22:13:39 +0900
Subject: [PATCH 264/268] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/document/exitfullscreen/index.md  |  5 +-
 files/ja/web/api/document/fullscreen/index.md |  5 +-
 .../document/fullscreenchange_event/index.md  | 72 +++++++++++++------
 .../api/document/fullscreenelement/index.md   |  5 +-
 .../document/fullscreenerror_event/index.md   |  5 +-
 5 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/files/ja/web/api/document/exitfullscreen/index.md b/files/ja/web/api/document/exitfullscreen/index.md
index 8dd1ca04562df3..85b031ff3f862e 100644
--- a/files/ja/web/api/document/exitfullscreen/index.md
+++ b/files/ja/web/api/document/exitfullscreen/index.md
@@ -1,8 +1,9 @@
 ---
-title: Document.exitFullscreen()
+title: "Document: exitFullscreen() メソッド"
+short-title: exitFullscreen()
 slug: Web/API/Document/exitFullscreen
 l10n:
-  sourceCommit: 4e233c16c6f0d347972c5c762f5b836318a46124
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
 {{ApiRef("Fullscreen API")}}
diff --git a/files/ja/web/api/document/fullscreen/index.md b/files/ja/web/api/document/fullscreen/index.md
index c8e26f1e31196f..2374a160270209 100644
--- a/files/ja/web/api/document/fullscreen/index.md
+++ b/files/ja/web/api/document/fullscreen/index.md
@@ -1,8 +1,9 @@
 ---
-title: Document.fullscreen
+title: "Document: fullscreen プロパティ"
+short-title: fullscreen
 slug: Web/API/Document/fullscreen
 l10n:
-  sourceCommit: a33aa4b21a269539354089513b22846f4be83f3c
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
 {{APIRef("Fullscreen API")}}{{Deprecated_Header}}
diff --git a/files/ja/web/api/document/fullscreenchange_event/index.md b/files/ja/web/api/document/fullscreenchange_event/index.md
index 61090d708dd420..919ff5d41ff48e 100644
--- a/files/ja/web/api/document/fullscreenchange_event/index.md
+++ b/files/ja/web/api/document/fullscreenchange_event/index.md
@@ -1,8 +1,9 @@
 ---
 title: "Document: fullscreenchange イベント"
+short-title: fullscreenchange
 slug: Web/API/Document/fullscreenchange_event
 l10n:
-  sourceCommit: 77b8cdb3a05999ade4a269d0ef2443618bb7cd66
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
 {{APIRef}}
@@ -31,6 +32,8 @@ onfullscreenchange = (event) => {};
 
 ## 例
 
+### `fullscreenchange` イベントのログ記録
+
 この例では、 `fullscreenchange` イベントのハンドラーが {{domxref("Document")}} に追加されます。
 
 ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 `click` ハンドラーは `div` の全画面モードを切り替えます。もし `document.fullscreenElement` に値があれば、全画面モードを終了します。そうでない場合は、 div は全画面モードに配置されます。
@@ -39,48 +42,73 @@ onfullscreenchange = (event) => {};
 
 この例のコードで意味しているのは、ある要素が現在全画面モードである場合、 `fullscreenchange` ハンドラーは全画面要素の `id` をコンソールにログ出力するということです。もし `document.fullscreenElement` が null ならば、このコードは全画面モードを離れるための変更であることをメッセージとしてログ出力します。
 
-### HTML
+#### HTML
 
 ```html
-<h1>fullscreenchange event example</h1>
+<h1>fullscreenchange イベントの例</h1>
 <div id="fullscreen-div">
-  <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
+  <button id="toggle-fullscreen">全画面モードの切り替え</button>
+  <pre id="logger"></pre>
 </div>
 ```
 
-### JavaScript
+#### CSS
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+#fullscreen-div {
+  height: 150px;
+  padding: 1rem;
+  background-color: pink;
+}
+
+#logger {
+  height: 80px;
+  padding: 0 0.5rem;
+  background-color: white;
+  overflow: scroll;
+}
+```
+
+#### JavaScript
 
 ```js
+const logger = document.querySelector("#logger");
+const fullScreenElement = document.querySelector("#fullscreen-div");
+
+function log(message) {
+  logger.textContent = `${logger.textContent}\n${message}`;
+}
+
 function fullscreenchanged(event) {
   // document.fullscreenElement は、全画面モードにある要素があれば
   // それを指します。要素がなければ、このプロパティの値は null に
-  // あります。
+  // なります。
   if (document.fullscreenElement) {
-    console.log(
-      `Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
-    );
+    log(`要素: ${document.fullscreenElement.id} が全画面モードに入りました。`);
   } else {
-    console.log("Leaving fullscreen mode.");
+    log("全画面モードを終了しました。");
   }
 }
 
 document.addEventListener("fullscreenchange", fullscreenchanged);
-// or
-document.onfullscreenchange = fullscreenchanged;
 
 // トグルボタンがクリックされたら、全画面モードを切り替える
-document
-  .getElementById("toggle-fullscreen")
-  .addEventListener("click", (event) => {
-    if (document.fullscreenElement) {
-      // exitFullscreen は Document オブジェクトでのみ使用可
-      document.exitFullscreen();
-    } else {
-      el.requestFullscreen();
-    }
-  });
+document.getElementById("toggle-fullscreen").addEventListener("click", () => {
+  if (document.fullscreenElement) {
+    // exitFullscreen は Document オブジェクトでのみ使用可
+    document.exitFullscreen();
+  } else {
+    fullScreenElement.requestFullscreen();
+  }
+});
 ```
 
+{{EmbedLiveSample("Logging fullscreenchange events", 640, 250, "", "", "", "fullscreen")}}
+
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/document/fullscreenelement/index.md b/files/ja/web/api/document/fullscreenelement/index.md
index d42995b5140185..f6a96c493025b3 100644
--- a/files/ja/web/api/document/fullscreenelement/index.md
+++ b/files/ja/web/api/document/fullscreenelement/index.md
@@ -1,8 +1,9 @@
 ---
-title: Document.fullscreenElement
+title: "Document: fullscreenElement プロパティ"
+short-title: fullscreenElement
 slug: Web/API/Document/fullscreenElement
 l10n:
-  sourceCommit: 23aea0fbb04893c64890c89a634250283e2beb71
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
 {{ApiRef("Fullscreen API")}}
diff --git a/files/ja/web/api/document/fullscreenerror_event/index.md b/files/ja/web/api/document/fullscreenerror_event/index.md
index c250f580df5a74..f07544e7da19f8 100644
--- a/files/ja/web/api/document/fullscreenerror_event/index.md
+++ b/files/ja/web/api/document/fullscreenerror_event/index.md
@@ -1,8 +1,9 @@
 ---
 title: "Document: fullscreenerror イベント"
+short-title: fullscreenerror
 slug: Web/API/Document/fullscreenerror_event
 l10n:
-  sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
 ---
 
 {{APIRef}}
@@ -35,7 +36,7 @@ onfullscreenerror = (event) => {};
 const requestor = document.querySelector("div");
 
 function handleError(event) {
-  console.error("an error occurred changing into fullscreen");
+  console.error("全画面モードへの移行時にエラーが発生しました");
   console.log(event);
 }
 

From 6760a7b9ec4c439b45a6cac2e3a8719943b717b9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 28 Sep 2023 23:01:21 +0900
Subject: [PATCH 265/268] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/document/readystate/index.md | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/files/ja/web/api/document/readystate/index.md b/files/ja/web/api/document/readystate/index.md
index 1ca99537cf9c2c..95b27bef9fafd8 100644
--- a/files/ja/web/api/document/readystate/index.md
+++ b/files/ja/web/api/document/readystate/index.md
@@ -1,6 +1,9 @@
 ---
-title: Document.readyState
+title: "Document: readyState プロパティ"
+short-title: readyState
 slug: Web/API/Document/readyState
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("DOM")}}
@@ -16,7 +19,7 @@ slug: Web/API/Document/readyState
 - `loading`
   - : この文書 ({{domxref("document")}}) はまだ読み込み中です。
 - `interactive`
-  - : 文書の読み込みが完了し、文書の解釈はできたが、スクリプト、画像、スタイルシート、フレームなどのサブリソースはまだ読み込み中である。
+  - : 文書の読み込みが完了し、文書の解釈はできたが、スクリプト、画像、スタイルシート、フレームなどのサブリソースはまだ読み込み中である。この状態は、 {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベントが発行されようとしていることを示します。
 - `complete`
   - : 文書とすべてのサブリソースの読み込みが完了しました。この状態は {{domxref("Window/load_event", "load")}} イベントが発行されようとしていることを示しています。
 
@@ -29,13 +32,14 @@ switch (document.readyState) {
   case "loading":
     // この文書はまだ読み込み中。
     break;
-  case "interactive":
+  case "interactive": {
     // この文書は読み込みが終了した。 DOM 要素にアクセスできるようになった。
     // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。
     const span = document.createElement("span");
     span.textContent = "A <span> element.";
     document.body.appendChild(span);
     break;
+  }
   case "complete":
     // ページが完全に読み込み完了。
     console.log(
@@ -49,7 +53,7 @@ switch (document.readyState) {
 
 ```js
 // DOMContentLoaded イベントの代替
-document.onreadystatechange = function () {
+document.onreadystatechange = () => {
   if (document.readyState === "interactive") {
     initApplication();
   }
@@ -59,8 +63,8 @@ document.onreadystatechange = function () {
 ### readystatechange を load イベントの代替とする
 
 ```js
-// load イベントの代替
-document.onreadystatechange = function () {
+// Alternative to load event
+document.onreadystatechange = () => {
   if (document.readyState === "complete") {
     initApplication();
   }
@@ -89,6 +93,7 @@ document.addEventListener("readystatechange", (event) => {
 
 ## 関連情報
 
-- {{domxref("Document/readystatechange_event", "readystatechange")}} イベント
-- {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベント
-- {{domxref("Window/load_event", "load")}} イベント
+- 関連イベント:
+  - {{domxref("Document/readystatechange_event", "readystatechange")}} イベント
+  - {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベント
+  - {{domxref("Window/load_event", "load")}} イベント

From d6f8cc36726563c59129b5a3c8edaf1b9646cde9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 28 Sep 2023 23:09:45 +0900
Subject: [PATCH 266/268] =?UTF-8?q?2023/07/22=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/learn/css/howto/highlight_para_after_h1/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/learn/css/howto/highlight_para_after_h1/index.md b/files/ja/learn/css/howto/highlight_para_after_h1/index.md
index ec00bf1ff4ad9b..fe898cc1bbd10b 100644
--- a/files/ja/learn/css/howto/highlight_para_after_h1/index.md
+++ b/files/ja/learn/css/howto/highlight_para_after_h1/index.md
@@ -2,7 +2,7 @@
 title: 見出しの直後に来た段落を強調表示するには
 slug: Learn/CSS/Howto/Highlight_para_after_h1
 l10n:
-  sourceCommit: 8e2641ebe076ab89299c77a51ece882de4ba5efb
+  sourceCommit: b85bf9fcc2c0062a765d104799d7d45d9e9b13bb
 ---
 
 {{LearnSidebar}}
@@ -15,7 +15,7 @@ l10n:
 
 ## 隣接兄弟結合子
 
-CSS の [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors) のグループには、複数のセレクターを組み合わせて選択することから**結合子**と呼ばれるものが存在します。この例では、[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は {{htmlelement("Heading_Elements", "h1")}} の後に {{htmlelement("p")}} が続いています。`<p>` は `<h1>` の隣接する兄弟要素なので、`h1 + p` で選択することができます。
+CSS の [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors) のグループには、複数のセレクターを組み合わせて選択することから**結合子**と呼ばれるものが存在します。この例では、[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使用することにします。この結合子は、ある要素が他の要素の隣にあることを基準に選択します。HTML は {{htmlelement("Heading_Elements", "h1")}} の後に {{htmlelement("p")}} が続いています。`<p>` は `<h1>` の隣接する兄弟要素なので、`h1 + p` で選択することができます。
 
 {{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}}
 

From fe14b18b973e07ce0c92e90c8f980b355de275ae Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Mon, 2 Oct 2023 21:38:05 +0200
Subject: [PATCH 267/268] `fr` - CycleTracker - Initial translation for HTML
 and CSS chapter  (#16227)

* Initial translation for HTML and CSS chapter

* Compress media asset
---
 .../cycletracker/html_and_css/html.jpg        | Bin 0 -> 38085 bytes
 .../cycletracker/html_and_css/index.md        | 352 ++++++++++++++++++
 2 files changed, 352 insertions(+)
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg
 create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md

diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8022cd701c6ae1aee3768ebdf6816aa430a08b98
GIT binary patch
literal 38085
zcmeFY1zeoXvL`&aTL|tRH0a<EAVBaC+-1<<?w;UIAh=r++zD=jdvFO(aQ6T^ki74G
z&)IXXe0z8A{=U6E!_(FOs_w3qs+M`UpT1uLU`k6!NdTar001b+2XH?Jcn3g)hev>i
zLqtG8Kte)9MtzEgih_bl@B|y<DG4DNDG4DlF*!909XTZv6*2KMZh9tGHcn1XGCE#C
z9(Dm14o-F`BqStM6jXdPG<<dnVhZ;EaJX*=U?D=+!{Ea}Q39Z`pkT0|?mGd*4=Tbv
zsQPDsgNA{HM}$JSp9LWPVqBK}$%HgXMIZXM@eqPwQ29RM9)@3A;cmuXKoV%yzaYWx
zk|m6Sfh~8PoAEd0YNVT8rPBZa=_W{H@`tRLFKj3e0E*W~8_7s!-hCgiNLg96b5UTL
zM?e_35IIzhRN@N|{LUH1x9}uobGQruKQswIQhsfvR&|(~Jf^!kWedM!L!{Q?Zo#*g
z!DgeT(ok2^3V<pe>F<10h!i3L&}#rbBql#SLNN302fiqi)(;7{SC0@pjlDhq+47NQ
z7kr2m3A7Ud&zap!3B@Q$_B%>lA=rm}&Y`Z_k9KMP3}5<42lf1`OqMT!g0?_2O9m>&
zIK9}&?&q5;hR?0W?*Y8+l@V1Uo9%LaU7|9LwI)NlUaoPolM*KV`EKQJ-;{r}W4fy7
zdwVoCGe+oj6P5k;(CEWtOJKv8`xN-_3BM|Cwsp-BSKN=7<oK_UvULXAYP1K+!<%Zk
zP*m+|e7JVBP+vAT(bM}eh6TAiHwjL8r=U`3b)?FENM3Ha(!Y1)Zqu*`O!{cAX4N{5
zGR~SX<=vvz2b!vBM01>5rRL%QS%gB$1;DMxr`lN0=nS`3vD<xlja?3e(s6#_e!{YZ
z{0UF>r{JN9sU!&Mr7@&`Fqj|v$HVa<%4TnFe@y;*Koy>dd$s-rfRS2fxbgi903X+<
za`Bfm0FCa$mwm)r5A&8iOf48vpgEGYC&0p<UH`YxBOl%N<{kAtp!(;k&!B(6wN6Xg
zR*QZ0K~iCOxKTPne|~Mz0P$Sw?;K-p(#=a(!>!jaD?}Jm%@n4)^?DpX<ZZv7nT4nq
zukMhMSC;>D*}DfkPglZ8$+{hO|DEwsH-zq*2;q&h+k+J{({C;r@s7_q_pcXoE<B$n
zI1Ynzyax|$Y8}2$WLlXE`&=y|EdI_5m3tiT)%KR%kZ-JWFWgfjg@?e~ZIug~0O3@N
zCt>GAh)?v#Z&A+lH>GtDy0t6mHv;%~b`vx@#AF`B6Sqvj?_86#;>ljk%xZ6M!*=kx
zAb-1hD0q`LDBPbS<J6l0>dg@knI78)OM^A0NmD<dHO+hVM!o!r%Ib{OJ%BT{MA&-#
z%bep+X<#t(=9|Ha>8kk~yp7YD6b&Aa(m`YALF-d*UD9zh`$@RHIkg9^*{c^Jji3NB
zOM{eaLgHGJJCnc7?1Gz`w^Zp4H>jQ^glA96TCbyckRn)z2FAtZGnjNGTCK_r&7BQM
zv*ap1&2{!<4u=#pm3ajjt#{K^+QTm(Nk{-qIT~B)0|2n72=r?6m??Paz7H?};Cc#q
z{DERVLcbm_TJ0fyk5v8_=nt`{;xkxeRBK*0Pe@m8OiFR+k4puQ*MWiqIn=+Tp<tjO
z6B3rT>!eZZ;_!k*a<D-WT+I!4YA%P?w9SLB1*GjRS^2!sta{BN@#0q=Xn2^1IV%_T
z`UF`L*PV1=O(nw~R5P%^5)pe>OIEHJhb2LyHBX$zUGZBbOjhDNJzG&r$#lQfiAHzb
zOVTT~bavc*-QWCwr3L?}p>OXj&uuabtll>GlMzwwrFPfs8VeQ|w(lL!Wd17gUz#;<
z_Q@=55}NUcChC0W;+Kr)PywF?EmP<Q3uEQyVx+ZyYk-K4{y3n|kc+-|CkN$gqMv*H
zU>r|WW3{<qF1d=4O%M#9n|blKrFQ~cyRyH&{XEtD>GRjO)m|zizf1G;g_ylRw&CyO
zL-a=l<bT2bff$-Q#zWu!RZ91vFyFsqdz{PgTxF2uW8)9__xyI!(`bajV8yk;=e=tE
z&3iO1f4tSWW9OyZ^LZ;J%g*q=shU!!xvO%Nlh+On2@hWVF+94Csp1_DR}ClGF7=qs
z*5PvMs8SY&eO;XSE$yY>V!w<%$_xNNsQ3LV*7`f~5dAxC8Y5*$eZI*vV4Gmc;>wN)
zB);hTM<Ij?5Cb4?`i7+kH-ETl5kKC1QR11bifuD6abV3y9I0E~U}k^wee916kFF9U
zVUN9q=ev-HIMHNf-PY_{s?fRwNz*-GU9CCp7;Ok<E7|AU-{gR%C3{>1e^>j5d-_8Q
zfVlu<?*5sA5Rbhy30aZ<3~;vd5Sh32Pr^7o#2ZevirvFw0z4?W83vvEFK&N}!2%x)
znlQgX`KSET_%uC};Yu8_=MJL+*K~dM=eHKR-_2Ubxp^@1jelo=CVH?lG&S0D$;9c{
z1U8$wlFtX)QBwMIwQ2ISj?Su_?+;%5l7&L^dobgdC*9400%yxVNCh!|7Xp}Cdhjqo
z6L|&XAmiI8|GDz)W9D9KLaV)&wQ(iFK0R7t#W_2nu*dZbl8JDa?!oU&e_Si<Zchjq
z04;P5XKTWP7mAvOyE+p?SmgiE4@T!5WM&3v_5uI`qyc}-{ikA(m7w*H+9C13b0YjD
z2jFq!{|fv&2jwqW9_MK5Ux5E@YN-6B62L_L$?S{201N_uNkAPy_Ll@uzrtT}$o>-U
zadQcc34yDS0nm_0M#Kz&1c_ru%o$!ozW@NJtDZh=o&hF5AZ$2-+7<$RT5CTDprQL*
zvS8Qq;CW>iE<qIp0O+g$Oz|HG0Q4F7F$Of*CAg%4+~6O4GW6LdcZ3`$pQ*g@!2v$V
zpgc&SO#PXOw-u7+^MyX^=zp18G5G4O`1=IG7l1T2yJ*Oc7gPpd8^`s9hyY+n*rcVA
zUO*@a()WS3@;B)VK^~b%g%1?lIF9iX-(L{KaX<pw_+td1lQr~3d?1_bs>Q`WKCFs>
zCfiJyL`eJ>?R{|{7|>@M9}+@}*8Yz7zydtic4M&MO2|tddI3qDy0i5FU?BvISNU7@
z!cPwvN23ws32|H6`j7En+WVM>sNnlZJpZ2sUOY0K9-jc=e`_FN9tQGX4J2&5juk-}
zBM(AkKI@m>HVvg=i}=$IY1AJ8@QVim;PmI{aTq7}a6$SWGDvv*NyFNeb@g?S)IS`%
z7Z3(Ngw=I4&d5|z^ntdba7x$-fO-nPY<(ELY5=+yTNy+M0N_0ZkA=L<gisF<)H4VH
zlOg--3;;pOpGrfJ2dUPF7_d1`^cX{AUOy5X<9|+>U8I+r57={Ub!C_b;xFB6*xvep
zJl7V@Pcjet)eQV!8a&tjwNAq5*sX#6XqO!xxPrRj_6cvEl0!(ebMQKV20{S9M-MCj
zfaIT#(j)&L3?soK1M1r^K4kQGFac1oP|&cjuyC-@&@d3Yf(1asz(GC5fyaD;jfKk&
zB&XukM_}c6@tT5~jY~w4l7?1X!uIzO5DF3M=RAmaI8bQ9rnn^qV+Wi#&~uk+HW~3B
z{E7_+o!*I&o%A->+*t~j5@MfK{v^)$d=FR?K8W+O`kDOssvYA=OKZG4Y`Aj^GTBrF
z()G;R>`EoJ(HfXfiV!Rq8L<z_F){YWA7ktx6cEx?2$YZ{j=arhTTL|(V5fR6lLQ)I
z|H@5w_vNaGNJ9xKBlWdX(A)v?(+wAX;fi-6j!e{v0f6wP=$}+@u}j_tm`p?6gLKbt
z*1l``(1i$Jzf+8_2nz1*t|aOERlDrrj*UvEy~(06HS3nWdkSyhDl`WVDIzV+hI4hC
zv+bl1xb_LmJs=(bWv)akMf|Ek#4H8XlO>8IVwMUA4g8VHbM@{>yKvS*_yC;Y1UfOs
z9DASbmS`h1c)h~J>jM_VHSG}vAPK^T+H_YiJJdNYn+YlaVZFnE6Uz`NXTW)6!u^v8
zG5bg0IF!2Ui44<sM3~hbT3S!N)%D|hK(pLg?XiO+7EE}@1@cR$Tx{PFvDbHvW(t$T
zw24aOyR7~x)R=9!vW#pM0-YMHg2O?){b?WhTey|9bDjmOZ-^7T7rkf(#_(%*bE~UT
z45&LS-UHBE=7i7m20Qzf)qy_YzbZK~xOE+=KTNsg-ULgUl6Bt$zSCaMekK0LpKP!e
zBS(7B^VDYhtNzXZ4^id9kO0TX`v2a~cq&LBWyfZBAp@0VL(PG)K7PJ$-`It{AxUST
z<Ub1_IO>i%v_9p3nBSKxv8IllmqsDCPfQ8Gp6t1&$N2R9Lmt$s!?0fS_K+KdL-2rP
zo=^DQ?%S2V0j~<cGu`F`wwH-B9=1K*;#4{Ara8o2xMDN|c0cj09q#y4wNic3A@j?V
z4M(c7@-uT}H`4Ba^_B|{Tw;33_sik->o*{5j?LxbVgoxqDU<+NrRB8)v3l;wMcdA+
zwGIMKcCNI<3W34yu=*MTy(nCfr^QD`@6eCdwp^a&IF7T^PEYs1mX?&{G~qsLv>J%7
zOnq7O#@$Uvfwq*Y%8-swo5v%tJfX6NO9^JZ{QdL@R{dL?s^_6#Q)7we&MoXfOzo}w
zNFBU$`6M%>yHJX}q$XKM1tZItaf~_7*R@<qG7HgaBQuio9o=783+<SkKMXI*y@PHe
zC$4N3RD9PulQWm^PnDHcg(=oa5qfNa@&x^KsF*oV9%!2Dm^s-)ZO5BegVzT;p01_;
zOseA})-ZWwcYsEsUid0XhY+d2=j)#SuC~N<(-8R%F<0shJci{Qrsi+&<as(|$w!xD
z{M~b7>MSEIG=6mR&Ca(8A^Fbk!D6}82f-sVy&{3L)l|==G_&WdY)e=4{(^^e4=CvK
zO*-i+4WqgH;uc61mXd>UwB>5hM=Tx`0^XFx9}nVKV9t%6k7vWRL&-rbuLsX@BTufd
zGKqo~h!(fVJ~r`>>_aRz)t--Tc{l!6ZofN;EY;OCo%DRQ1GAyK>v)i(z(=WGoGL3R
zwx<27*t%DQlaoVhd;;)|RFbi0B&6>R8VX~o{ZX<HIcKOHE1D%U3AY$`)dx9$oY%*n
z4Y==sCq^1#Hk=K(n#pC5(*-Pol1A$*FE4@!l9HkZo|v*nd(3dywI6o`hXo99#WtI;
z_vKfY%@V+btl)`Lfq?m`s>6Y#a28n&3Bch_#r1b$8`7&IZ@`OW)e&P~5j1C~DKm}V
z8;enK9i}+Y<QflRm1`oP-hLF(#x?XdHMbd7Gmoj}@8~W-)ItbCIRZGd*72eP+d2r;
zp0*#C!;KB~B1LPw&!$L{Jq5*EVqzPhQmY|#;=B=TH%Uw=t0=mv6khFctL{Ipyd_#5
z5}q*3Y_M|H=7oPkZXEl1{jP+!i*Y#)14P}GT0Ep6jA5PX?bIHTTp#{np3tr$jwakD
zG~rW)gVDE3knP2wLIOYPulfFcI8uYcMfr^k_0aam59#UZLv|U&QcQ8eCAy0J)X#Uq
z>;)fFdj4(;{D&7zywlcpkp+&9o?;sMCY|}oqI90)p6U)|^Q&la%%GX5o}(e3;Yd#b
zUXIbI-lO55pbp4IW>016rV#ID_$Jxvl5d6hkiF26Ndcw3-jp!-(dfR<Y?AWmG_ow>
z*`U<EpKIS+c0O!y{m%k~-??PXr|i6)VNmUTQzIQ;p<EoBXBp3E^ht|G`u`DdCG_jj
zrER@F#K!hXS<cHFA?|%%KxYr+#y$DH&b46{d~8$P7{;kjKF}4>#rb|PI4ja@-7&(H
zX%o#_dx>SIm?oCBUXBy=;wrzS27Z?N6$T@U{`O2zl9oMOi-Xuz0^Y>L8-qYUeXhi5
zYK5}8-zC<CUmkU{8FsU&>iCV-IoE<vN7o`(D$I$9-^@+6F=l_LZ})PjkVI2bo*-kx
zw24O+>j;EbU`{;)syu1qM*222Q58YyF-OFHam3q})ZV>h(_teQn(QhO#V*ea!k@1*
zL?)JSio*ga1e%a)RF`xvq{f<ME!Q&;X|B+8z80GNN?(Z@<w0qpM}AJ8aOc;8)$$Fw
z4towO8v|8fIk$W-Ceeeg99Dyk04*k}zifE(PsO7GC0n|k>HQm)4I93^cMbEx+Dj$|
zkp&Ck|C9i88?gIZleCR+eGj@@v0s%gQdy`<q~-mn&BsBxf|V8UPR3uj!>3UABdLb8
zcmpF*S9JjQd!5lstF3a`>IK)WQkE{TIG9aC<;Y-t>L{FsFEM$pp|Ds~+rx%cM3fkQ
zgs;P|)fYf-O7(6|!>ZlbBrcSgfXScgGFkM*%Wy}Y1GoIAVn>bm0;-qV3SHy?T@(gc
z@(|#|fUUvnrh)_)_?jM~CjqhfcbXPCB%qGh2*flBIzKP)Jk%E<Ga%tPnNk;SF(vpe
zjLX5L4nEt?AoXhS9x!1ym(Lh(m04R6sQALeGY#e=<oLM4ba`Z@yCue<(F*AI)wY~h
zOyv$#IQq#w#6`FIkyLGftKX8S6R$O+-9g`{BU?XGN#8Ak>U~`UwUI8}lhM%*b<gUW
z$#<hOlS&FY-FAo!tJj}GpTJ};d$S^H)*u*S$+KE2qzis_#ATfkc}?VB6w2$`3jOvn
z49FG$_Qe-)HC-WUIfGjMMqx61cx}77EHim{H6H2ZRSD4w#?{HwROgdk&}+<rG!~!q
zl>-YR$R7H*1Anm;{@WD0?hY1tpov|qaS^n4<oPswhJ3k<a<{>tqBt?u3Xc?`66-t;
zj-2I_8g=EE3bPa9qGD(sJroL3sJU^}Rdi*q3WTS21S6c;Xh5<MNlg8@goxg1r`?R^
z{+$Fx)$N4<&<gPcSLmypWP$EyOYmfo66s~ox%-%0t|ARAxb90bJ{rsx>hoL`lYac_
zGa5vcCIn<B^S`Zb9v6Qze7UdmGxBFT3B2i_e`ky>wnr}25s>Y-H<H!+P&bO9V}?a>
zt)4G#I5w2UYbuSQwK1yy^-v%!6?x~#-APzekqzzj+#$l*WCm(QH>z8#_8=~`k(<$I
z|Hl<!e<^|o#Pka(kK<^KYUkQjP8f4%YHk8gd3f)kiTV)><uFq}DNUz_;vn(#km04r
z=!&J-Fgtigi_{ywpD5SSN@F-szyZzor7&vHhuCghwj^QZN{Nf6@O8OUjN60X6Z=C#
zj<`T{@w~AXhbirl1U@lB=uuB*0^xR!X!?_`<;zrR%EcWdq?mq(`TVlf0J|vmu}vsE
zG-vCc4>CWWYG<?aQ*pc<(b0E)ALA-;JOk@CWWCDpZfrp?H72@EBD!Wjvx^+qnJP0q
z_Y+jF6mQ^u{j=|)eh<Wcp+P`@s2W}LoJ=oC_tv1<sOJl@GSDQTb(N|VZB1rM$TgSy
z!w@}5C)zu^7+<QMk0qW*uWT6cGG)x@Sx~Qb#D!jE)wtoJ<HRoD%Q@Lm^$H<ijmIE7
zkz^YQFAQUC%ZvV09&YDaFWcl@rf$m9<BKk8;?U#sRJATaw?&hQBjl~DNA4y<Cl<C*
zYpUI~qzE<)2b6~HQ+2f?9AjUdE_V4oQ$v<j%6gnQDIX5FXCF4JV>TpzDIK+<F6Mb@
z<HP<wq>FUT|81fcbxj6eYVeJrlu#*omxDl_{D4^Jp|pB=PJ|h2^;PV^<;wG}gxCQ=
z&luo}xgGH#5~s-A5$rKar=kJ~F;XRgwUx8H#f89nm3iK{A-vWuVV`{gtX0?lAAyY6
z4)LgCy1Eu8xgiIHb*;06#&`Ds1B;$yO9dCGOKKwgqD3onF0fG<N}#j_$>$!`A(HUP
z_`D(|A`YgUWO(iK^p!6!%h4i0yHvDh)6+mPO#xJE^CB$`6Dk?l<7G?sIuzUtEk^SI
zRwg|E5*XHQxIAF+af;!$ODCviq?#{sb^7*BSnI&9Fj3vZ4osZ$tYtrw#TKB-zTa0O
zXr`CXk`Jw3S{gLZqt2*(h5u26RF0W#(OQjF9(Y@H-fn9-XaJ)r`igCg2<Jt>l3%s2
zG-oS@4XFlJHAO56ZKxqM*TrE9F{d-u(sQD>w?j1|<<Yx6Ww4)?bIPKiT)(D<*qI6V
zc3FK}01qJbkaNJrCT6df_X4^tCc>u|-|6`B8JOVqS?J5ie}eqr5FEx@=gR@buaZB{
z%G-+TPr~m9a;LJuJmd2S>F;2SL=13r%}<n6`SE2Z476)&?CRVBWP4Rx>g5}53Da0e
z<%avsw;Ky?7!xN!-^XY`IiAgV)|b52BC%tFZbbMZ@dC->w}JQ7?l8OQry?1HLR@%M
z*PqO1YkiQh53yEc?xU%HS^F&E|2Xs^KSaPS)MOeR%vJQKHVm@-R!1)T_kdf1ziRHi
zI9%7S{maoVs<dcWoS%DvHUC&Nim&_iYAg5Ir+#~rc$-PhW6A+2n!Q-w<)qXtZ-iui
z)NpQlyPT@YppOdJCYCHuM+ZBT$YL=1DUYnvbu)0LW1OjVlGIGZXX1XA3?$wINJ8)o
z#UIfSfd?wC&Dr?w(^aREIQE*$+gFJ{qgYt898MN2?g7bvr(1t;%j~GJ-8)%){5}2p
zM)vAXVS>b|BQ4wMx_7;cOoy}6z=~$kO4|BVMYTAC6)I!b$_@*I&{kqm=L#WuIB=Wo
zOE97(XxN0`nijzCFIO2zt6*$s{PGEXLn5w#bn2#CFq&1zLLr9w=gMN9ex{U8c0|ur
zws|!w(2$mzc?w=^x0b1@zLP7h6;Fli7aKyiIOO*$w8O>#>y+SR-d&RORMFXbqaCoP
zZH5R}y?9&(ZEw`}m$cN0pw!B<-a8wiRc5<iOPHJLt#K)%roSaBX7G18`aChNBu_yK
z-U<slMGi}H4yaK~>;~q_($Enk*raNj#*xrxeDobI#x+i(v(QIIR#FN)Z~EXPZBwUJ
z%}qN7jNT|YCelNJf^=uQk!Lh_5y4H1JYa{&qUrC@FI5$s!j~g(5(=zSpx`;6k+E_p
zgPJWnpEKSAR)IKP*6(8TUPJ(w%yVbeRtD(M(h@X6p9LV~QnCYLO%8W={h@5t&<8ms
zqp<Ck<_(Yvv8mZ+KV5qgV(a19jtXX!D4e)m{LPf|F`y!%_Tt^`Yk0!a8AjD|$Nz+7
zAgr8n_f-RiMxboTKp1Q99b2MN-)>I>dl6)`D+KD=cl(!eqOewl2RG-9OMdUh8NL@)
z-+268pUutuZEbGq^EGvK2p%>R<}sm~14W(FVX2b@f%C8Jb3H&2!=9=&u<QhxYdj;b
zIN1fJRMkXhr0J`d!zif50ZQ$?Iq|+C)QY`1I7V#3tCT1!sm~(7+CQjZ3-Mp_v8jfu
z<lwa#DGK0<V&EUD(FUjvh0AoRXu3FC=)y&NU8X#>#UBv=x&OBYqpK}>HyL7A8nCtM
z_c1PJ*_5ZwFV@bPwnw3wM}LoM1v{@KKiSm?1Ims|D;axF4xe9rpVG1#u6hvkZkexM
z-;o`!lP-Lpgz`-xOtPI&u#@XbM}QjK_^Z&y*d=61X~407&p~Mqjb5T9To__eeT_#}
z$QzAmdDmUqv!Q6$FRS-}c0^@h{#xHwvRA!jCm6{}U%|DfeK2>O6<6$q<>nX$FE$F4
z+K}aqxFP(rpy=tWl%4Fmzwc)%dVhi7O>%eNK)N@*KfXvMxY5o+9kj8B23BAnJ35G9
zvGNgQ<(B%tqBc_Iiq443d8QsgusWPhT5KB=ycdop`;HtySY?S$?jy=4z+ou>@0E)1
z5p_lEsgB<a3ZwsAoBj`91QrP?4s*uYb74#sc&3<M^dRt@_U<Y{cc5Wbao{W688b!`
zhl*o!UlwzkWa-z`o$8`U0IDjxP^1%Vf5|Zo3Ix}IxYCZBX~>=G-?@sb;isl8EJNYS
z%dkU`ag6Rfx{E{=-dWDUG3z?g6cNA`!|pQc(iBk&z_{ZybfpWX`)T%G9#a6+fsQGB
zX{0E5?KAXmPQ~wc;njaxj$3TF=V|_!yi8NQ{-(*Ou)4xv-@HtEGh|KZg#SMfPolGo
z>}k^eesA8GA;1QCn@PW4oqZCuI)M2<LNGlQa#)Tk|KrFVc<n6smg1ZFlsn5kz%<pq
z`?;FUF%<(ra5}uF&X1dg3}1VFARQkT$8EDv*B>ht-WG*sjYaK*iRXk1yli_9@Uvp_
zg$7<IVeIQ%IW?`f7Di>9-X#;NSxX(f(D9rfC#i(0ZirB)x|8km)AGdy-ozWZ6-8Qz
zwhsDM2A&M3COWW<tIf<hs(p|tT7VWZTyVvIEz}NXh>dXAlVT7{!+e)v=s8-SFzEn|
z#e&_rNEN7VZxz|@6<S`ND9R{6Ud<=c#hl80ik*265EC~1eQ<GO7m$X};3*-)(XuBk
zpiZI+3(N~o=QTb4DG1Y@I{so4JA6;WQ6toh!fdq*hOWpcuPy=Z6)QR!8zQPf<3~wm
zEp6po5kYIIW@MLs)hQf$OrdZMVwqH)s6hF8QdE0&QEQ_-!WYOGyr02z35r3`6rmpi
z+g`RAg5ZqF4^2?RNYsz~ST&5P-D3(82vacvyAch#bYQ02gfhtf)KLi0XgEAsBq7{5
zhrkT1$@WhObNK(6rT)~@wENGJyqABE&TYqUE4c~!y=m$X=E>m7?bbyFXgUkL`b0ZA
zS%3r@j<B-)G|%Mwo+=O4jqGS{E=(3XgtqD<fja$jN9U78<LNcBM1fBE(%nCdjDmgB
zo7$8kXXkx6t~%l}FIDaehec#cZAU7Lim&hCu8TGhiRY)N2?)J7vZXSPAn#Kr?*|s<
z04}>(Fxpm`-UK_(cA$}fGMmw4tsJjn8yIpf^``0~rH0nFgXI^DkP^G26vv%s+BVb>
zZyia*p2=YG*D)payxy)@e2&gJ|7})A1e@aLOIn^U!~Q417+z@(vMKMG11j?Zd0mme
zm-^-yHFCbRw>5L+*}+_JM$!htS;_>4772tP!|V$EUgj9@aH3aNtBQSZm^#8SiBPU$
z@q9W4ghLrkyShNk+xbY}VC-lF<V#%el{M#BdBp3N$9MfoncmLqhjehA$8Tz?@PN#A
z(v;+R<X5FV811^ufXduP^OK~D9EFv2u9g_VTP4it@cJvC{SW9VTKDpS{qN4le^9PS
zkCtmaCs3ZzY$t}Aa9RCC5;v)=6#;%SD-+5e%0ijAUDT>E@vc){*;AB+;>>CpQ=zbs
z-2PHJeKLR2O@?3VlQmV=@+OSCPSkYj@1weZ53z>o5UDx6gAy*=^EuCdc7k_fKcvT>
zs{Fs}<o=&~eW0w`-Y;Og`o}5Z<1LQ8Q!o>i{QjGMVk{FWgY+kcon>MIFU3O)zKMTs
z?c;z;c4@<V@OcK9FGXK$<tL89duZ^&p;NIQ8$EN??>z2easbaz2D-ko*1>3_&yHfG
zOx9Qlz<2CN2#ZOT4mAr7d(zGufEQ$5jrF#S{oUxR_))O{@m@Y{o>6sq1kdqK0gYIn
z&4KG{$f7m%c!rd@3#|9C$!nRI#Fu?30`;L&T8H(WoaZL{+kwwZH|N0ej~zZ^@rAlu
z<kRY4A?jFCGEXK_thy3`mwFd2Fi2rR;Ef){V|KfPE`Pox{nDJyPUH9QRT9%W6#R;S
zh_vx#BGjeGowb_piMp#P&f+oLsfrI;BF?FNjz%^qr$2_nGyvI*2+YYtRWW;t@!v5x
zPY=MJ3D0j^lE4!fm~pms`_p6*<&UERB~=hQE4J}Lw4|zoFw{0DU@xzSLrTiS%~l@7
z!)jOR;=cN3VgOGw;CKY?NeYx?QXD1)eSAs#QMx8`4t7-JsZ}7YII%$l>TojCgqn%&
zzCKp8{LAU|x+g~a@`qvx@FLW0h%c=o?K<%#)^pf_k`tq;AfCeku4UByLRNrW3I~@o
z{`f#|UMis9n^b;Y*wK_--H?*0i$lUMU~8^6!gm7~{$)>=C3EEGuLMNY>Zq33v34{n
zj$<ZLI!|rF*o3c6guWL4vHe%P@vhw4A^Y+fa`tk7+&C{PdoLEN`>hMDsHoYW=nAl_
z64gz%YBn=gMrRIc2M&n)G6t^2N}HIx5N@huIwP_d#tdgIededxyHRtuZ)d^g4HhNt
ztgFcPiq86|mV}-^#3WiqODNma$iHX_FAiB?-{E1hrabE$;7;3KLS8dadLma~83LjV
zMWJFfTDILm<}9+xnFx5M`VO`q-(>k#iMsq<rf^dg(-|qdFeW-{aRp7Qm^s=Uv5@-F
z<%bF*{5ojUGZW#AitE0-KlVW4d)pH<#P$O5f&y=%XR={=T9GLXIq`==B0N><{E^Dq
zKIfN|repeJWkF$<`^nX8u5Hvl!JXN}=Or-Gh>KV7FH(1={nA+>#!mUpZD$#QNSnQT
z#L0_CB`T?X7zGis*CdQ(3ntXA49W~+b)_^npmbYna~%Dkep2IpRp2V?mMP%?+Kx<R
z68*7h%mm=<{UV0;Sd~nzci6M;NQq0nk6<up+6vA5NP1?;pTfYB^&TK-d=@YBhnXUO
z3MA#B7{#v=FUGPE)f~lrAY3&mC*M_PGn>h1KKVt2L6G1FB>Vx%%X(xTK4yBUIg;=|
zguOI`6eGd>e+NN3C9DWL{(JWQD+}`l#_yy4KmSeSU#?;Q`TG7(i<x@Au}$;e-+!eC
zIz1)dI6;Y_-2+a2Ag|-dLte*$frdgrfc!rQ6ap;deH<vr>o~AjPvEdA*c4;OFeydi
zK8%jDzcH}$i^-~ZN=_xJtl!4U@mk5gyz&JOwV{Lm@)4()N;|x5_TlfBbdZFhZVQFu
zYwo6oh+{pUX28+4NgclVUnQ^)cJHXlj;(G>Q}I%MVhjm)0!igs%0E)QyiN$J+#23o
zI>nGKy$2lmK#pr`W+bSQt#T;)tvB{=ZElU>7Gi<4L9Zt3J4TS|*YF%7f{Iai^ScaS
zuZGY_k1JnbB32DhN4-FZud)2t?mQ=Xts76k9+!#6eMX67UfyoaE3n$P8Y-nbz|Vx>
zvzKJj*Lu!F6ojE^Jco_4xME2t=<{Qn)`XXYNQ;=_?v?pTQ0f;3S%2;xm@Quf6q&|*
zfaIh%L!kM<X?=sl_cz`q$-)exe9ll~Zq5&FfZUWA+^R|sDCF!lM{j!K-2=#l!EORe
zjT39%rOj=lS3<wLrQx1xu(S4N8(HBya$Tn#XSf$cM0az*$Xgm#pAu`HmNHM+7`Tki
zaTSja@jbPU6p$FO9s34uY7rZoa!*ZxD@cJ+?~`c!Iyq_uKohD)wGo!_eA(o83HZjj
zcl%V<OWD#JUwZ)!KVrc;#ZuN`_S(~P)+F_1ZC|&?&RyTLL=Gm8VEuaF++9?j!g-yH
z_Xp14(hJF-{3<2mAdp?}CaE;7ik>Q6ea!_^6e+fVFNeS_A$(c`4x@RJ4Mi!-_}*<H
zyQ086*1G5cZ&MHck3?&!<9wIY{exNdM8C~(iPZzjtq-ka?8(3kSG?<Q<8p!d78}z#
z)|PJr^Le^BFC13LF)CapKXky#AE&I>&k=3i^#BPI4+2x&*kKAJfBJm?Xs|YSLmYn^
zq8}_eRg+nn%w<;5qp(-9uPiJcz@O%{{+wpAmJTv`dX+c~g>40vFP;t9NjeNUQ);`b
z$j;Pgq1dHxfBQ@mF?<|GDt>DgD_@~p+8}|Osu|cNPy}ksukM8YYy$ee&Ra@eFGubm
z5KHX#Ip1=;x{{#$oDNT2U3;5s>*s3UK?NvmmU+wv@{8SrMtVFfF+VYK?*W+8Zoo``
zMDoWk^9z4}huXNb#?-yFO&dCXH{QA4p+$M;<Nswa#_s&jT7K2_51-6IaW>a7jQ`Hy
z12@xKdwx{EKRxP1G=0F;-eqwez7a*gDW<h29w#<V&C-eB!cxsd0C|DVl=mL6Lmpke
z(JqUC(WKOeKW^!YPUiE?st1o7SSE%tYbnujW@XzgEZ_S4Oq98~lh>(G_k7PnO1a|9
zdjGn(8LMDNh*(ZPW+dn~N8R1(EcHc`?_2I#1==CG#vG~FuQbs=E(xq;MMI5gdgm(G
z&JupgWoyu5op(>jDcoB>PG1_yWfehc-K-SLvz?SudGbv#s!`5^ZRvEu?Rm@)>G&B*
zV0>0S&s<gw<+dbOx2d#+CKMsj=kxKSH5gb0i$$psLgeI(i@Jjh>+hN{u%!;uA|sj#
zR1$2=VPQqgHuCQW9W806eaEdxJ2zG_I&Q$TeS*~5sG^(S_+H~SldwQ<&IWN^v^&pe
z_bstuNd1uQQoug3jz8wgB$MLv&#z2G3A3wNLyvx*>;3@*llDIEm@6@|%^~+XUU+(Z
znHqEq1@l%PT4Dv1ytK5uL-<s#^}@iwGs2pqyq3=^G}tuT(TbhGcVPZ{*XB?)0ZGGt
z{*a{^<#qx1HKM-JtwM`R$J7$Yha9$-Y3>=($qAKPm`K8@eS9Tm*Mc<>ymR(U%GDcB
zV&A;!%pK>MUv%@ZMIOH4xCLGsQlgZZZ8<CtX|#ktCe3nYZ-L6l)E5P2+0n+b4cnd<
zU6r%>>@q$zc1~B_^*sFIvm4vC0#VHPa=z8`&M1WipvC1>4lFMc!lzEmseWl5#Pcu~
zapj!YrdHRnrd!7OACLgwb`g>#MczQJcx7>qiAH@Ca<-okF}1yml0uqLUr!sU<s5lY
zU6tWZp19U#H*Rr!)#k(1=Z5OmePWmLmT_<$NJ0Y`#ow$u&0lhW3v<4GMe*s=5LZ#C
zbogY%*VE6m{+A~hzI9<JP}dBeU{B$vuKhur*WLv;&!LRppKz-@&D2~&4kVi(s@oAr
z;RPP2VCFKnd>GJ-${9&N@cCv(I>A`Ry}vTHzDvaGna{)XY(W5<*ct@4fE`&T8Zjb*
z1fCSo7^`~=V78&o_;e2_@~gAG2e3h$^SgF%*=?%)$QH?b#Qd?;*)jAc{!FHi`s?1W
zubFKlt})KiB~dkYmRqu34LQ-Ge3xJnq~8V4h!uyM<MP#fN}OaXVri%fGoKg>r%gL>
zs2_$px^Ac{s2&MxYQGkfm?&;mI3s~vQaXXqQMQ=d-Em&J5{XXMuU|)+{ScZ^lq2vf
ziBy$&W<u(8WIna4!q&jo^U}EV__XF+Mfs?Q<1#!}okOncoT1RrO2DmN^CB>Dh;gN+
zR`-_ZX#|F6nSs@5iiHX$A_p4YP|Y51bBq_#?i0b0C38OckGg#&DQt>Tv=)0QAzcF#
zRtBnLwOqIanpes5c+O1>`B)fZi6c{AhiylPYPtj{#XgX{9=n3kV&sfsRLc{LB?Jnd
z)CXZZrYyH8+>RIN@_CuJM(?B$&5*#vgj<%}0~Tv}Fhs-lQqGwZ1Tnns0V=6v;=Bb&
zh+Xft*VCfgdlCnBPLt5S0t>j|ouVwm`DhTtn{$)u(k*p7o)w3yhg(tIeCampPhKT&
zSo=YyIIWE~>x`oz*i-u<qL-WQqnX-(z<11>JXr>Yd^#wbI85QsCvI}7IN7b=tDH{j
zSS*=m#?PLufAOHTU}d|sMC5Z~(16M1E;ATOR6nR5S+;39d$t``oEy@OobwsI#^01!
zpn(^7w<yUrr)in%uuu)Y2PjX!r%K-|;a-m!aGp%T(NdbMf3?|Q5ivXgzyyr`SffU;
zAX17XT3pO17JGF?IX0s^r8k$~J)5paH8{UI=3P(DuRdFBI(rW&fA-@x33y%V(j*9Z
z|Mj!g*;|@-X>PR%3&w=aO$*!RG|okDc;ar*Qd4}!bpD+|?~-Lm?hDPR6WYE8OIV?e
zeXpaAm`8$4_BPRcg$~~9#r4=9Ujr|gK8k<it~dJ1lGW7z-@^Yd^+un60zJSgy+;#q
z6J4$)(V2ULIK_u`*Jc1R&kd%(C)!)BrA2pFcd2!UUoBPM6d1BKpftfx-9r9<*@8v|
zsMfs>KwNh<vcz+UdZ7ZXS~W9^NHy)IdpYfW8M1HF2q)yiZK>Tp=W!3P;8>wk9B2&K
zgOW-OPC-zQI=I3Bc^mZB#^jwUcQp=0sC~s$QQ}vrnyV|&#8u|qi@7tw$}=XEYy!6x
zr{%_fpr?xYI(wCjsKUmcU}7*t0D#3BQPuD-kwp;GT?DyHjaB5~nc291@r!QhjTr+>
zxrg>C5BhtX*vc+|r2FjDq;EiMF@vO;3RD4_oFB0>84BszC%<!(JJq*YMV-B=pv7ps
zP-h6vH=6{xx|}O@p>P?-Ea$9zri>QuZ9TNJpBme=u_V~|KL6RkmtWOsx%T4owT6*%
zKD$Y*iWegdd{<;r=1pAkB)3+oC3JB?(&~QqGdsQETjV>?gf=F2p%nRBTL<}Uv^JFw
zhmE&0G-$$4&+BS+B1>0qh)&Su8e?ntdg|-GVr2F6D-^sePbpux%T6XzLMxv;Kr2-D
zslpg)iM!6SH46;5MY%%1#fH%@-1M`8T40zy4w}&#IJuo<0M_s<Z`8~tfV~@|DDhia
zh_sbh2~}%>S`|wgkTz;`kF{QGWLps5>Hv{LtJ;_5&pzpn?A6xEVnkw2y_mY9b}V95
z0dfQL5!@ulfX6)L6WrkCjrT;T0~WL}s*Di~U`uM0RPl71dQ{$aeV?pe-%wmcb*qb^
zxP9D<oV!ibU31e^ckASlrI9Jj!+BW8Vz-04JU7MFj-BRrGusSw&UgY!%{rv5D$GjH
z(p+8|hYSK1lr}5(I~0Q*+T){g3P19IYxm8@Fph2`u7YS6UzzX<4jVWQ8c@>dBUhxm
zE)FknwGFwHvzEyNA_`2tp{UO`?(JPjHI2CWg}2WTGe_{KE20UX=9J)R08hlu%d>5@
zYv9wPcz!~YdnHf3PmSPB^4+wweG@_xA3+N=XBrbI4pjweu<9G|=@d)Y0^gildLVZ*
z?H>muz6iFmw}43|+;-XKlN6cFAF9CvIdqFLkN316<jlW9NLCJ{6U&Nf*9m?`hNA5j
z5!Xj$PJ-xt4@lf`TP9XY_Z$*@&L?e-C4EF~LxL`wG%-ASs>&LxP^uCiFi_j!BTB`y
za^rqrn|Llp8}wtGC@72bYede)kU9RsJpgTdHNVd;Oj@hTiU{v6LrkKZ|MCv}vm?%i
z>P4sZ9^nKWqfygQu$IU1n>JqSqBVm_WzI2uTx%Y`vQq{^%Qk1GMKgouIi@5D#4$v_
z#+VwOxlhHoP)cGv)<ruo#RnQfvAjf|2Hs~zN^tG+%`V%j;BXlFB!D}a4%A<F<4=Qq
zGb2shDmZyOm9azzW6C%^aRlBVT&X9bKi4b>#Z5B=!rud|H3?1nJyx+$b<dDKd<^9B
zol__V4hSDOux@n(y&(EN7Ypp^wy=2LrW`He<yO~WU1**kr%F$W&Jc-6?1=r;pjKJ=
zM0hBceD&xBe8dY!1_pD&VQM~d%fw06w-(~Qcf#c@tZQ?3*|h!G)m5LJJEw@!xanqn
zs4f5EpMG{c3Y`f>Z-Om<E^tNxX0JP(F_Sc=^Ot3dc9m@NRh{YUlo<J+&eO-Ig<3!D
z8|valHa0a(dCy*1F4z9wg8!_0o~TO^ZzQAyfHJoxg(n}^gj<EqsKf3v-RbECYr8UJ
z36OU}E$&D658-YGm1QZ*LK&aW%Ol3LSM{;#7$ic-JeldFYN^9bINsMqlsMb>Od9e?
zP+4Srp?VpKht?d+Yh)JFzFa#dNgeJA-&yrtVKOFZjD^4pcxK--O4XPUmwT&0s5?xb
zxkVh<%FyRV>;(S`NuUC9X2J@d-8_$F8#YZCajc!{zf6ug5x%v4v=8z^k5!=e+hj>!
zD=&ivL`5}cg1XnP=ATHlP%!p$e()(995p%?CR1nIJ@Ng%7_gS{HZ-Q1B5A8LF1SQt
z!FmEPFah2yzZ#@MFB5N3iG#cXklkk(OT0n*b@G%P0qFCA8P!-%BGNZW{;E@>=LCmh
z*C+dYM1>f3xtlSkkYx}<fz?9RB8|x(xatibuqD(ba()n9R?9nJM&|l;wkb3w4v~06
z3YT?*Z!yIjIhngRacJ4Ijs?gq5nBkhS6|%dajIz5W=hq1>L5fwGmLI-laq%gtPpjk
zoUwl-z(KUuz6tqV!fHrj(5znQ{YxU*>z?p8NxbJ>V{?wz6Xe$d3aH>K*7|$E$ecqQ
z#WlZqXGSCWbc1fOyYPM`Jkr{r|E#Z(O>U)OJ=zH2f;HW1<OCj)Q#W*4smSXlm^TCX
zZ^``f;-SX4O=um-Us?N3?%4f+h+vGa@g&jmZ=a$`l?lk5W5v8CzC5T-!_yELR3I?|
zO9EfaQ{KYly=X_{9y9QE=|@mGHM=aNiV{|)^w6O{i40rbs;Gpu1plNxuc?}~e+xB;
zzb&@wEYu;{#r}M;5xP6>(`0q=Cp5>XEB{=~&;rcXEunAj+Wlr~twVlAX`vC({9G&v
z5FOzIGT$mE#VBtAS+~3&CFFvY#-%0MMPF5FWuj2P)8lJ*i@c^G%_%E9sm5+VwOd@Q
zkne)gAFQF=D4+HlaUwxsi`WJKlF1Q~Gq6YpH-4Nuz!2^Iw)eRZG~^YyW^lR;XLQpg
z!xpMn{ey%`6ljJ=H&Pg2o}qyiszfI={Z-34LlaX#Ddp9aGQ7Y&K*n9^W!^wHzC+o{
z`DdP!;S{b!j_q+PSEtWx{Pgk!@-9d$TWF*Ci=ESHa!N#N_-o9x9R(t@6>bCL1E6H>
z!;LWAb5Ya<nX<BqOu;=t{FISo-HS#^B7{Y|ZxtHs<GzPP^ljv){OB#>@d655?z6PV
zaHU?FDlmCDp7rHaI>S?z>Q-wvYCxV71*euQM4@?Xg1}4}3rBuaYNwZ>Nk2n1bcNmT
zqUWA{X+WK4VA${AMh<N#8*I-m+2yb;{I3ElvyObVXDB>Pz~{%l)2fg5OSckqX}I=N
z#;1df>aYqp&T*B%ZPO*Aa6X8Z%ojE%k<FABDwT=x#MF9ZSBtA)?5lL|{7vkJFGdr4
z!nZ-&Xj7d6+yLvhj%;4EiUJBD>s^t!HDPEWrzR#fqcuz-CH&esdEkrH!VDqp%?wqj
zZN>4vc|8l_JDE8fMfm~`0{&diD33~Y`TWHN(%fxP3mS*EhGc+Cxzb4AKo72GWTU<L
zCg<`Qod}0HC6mKibkM6;czlta<TvIEtb+m>j5)6mMb2^1l4hn778eMi<n!!4*)k=_
zteTAuoH2Ukpy&mSWxUdoVI=Og-l;F<V`0t`iU()4R+xS#l87|Tq=H9K3N|LR=KL=D
zslW-=H1URbpN!kIT9})hV%Mpf=dGT&ekgZ0704mYV@}ogv-yG;Ui2ZlW0j-j8<RD3
z3{df>jyKngu!_yRL`11Oi?da5O7h$IjX}N+c{w?TUc#f>c^)UVJhNm)2DRJayftH?
zhBG#UfFD$EW7EdRCrrU{@3v^C&U0?2`-!!-kljtia0_0d^9p)kXR{ILp5yBNT=jY;
zl4vAB<&vuDZe?V4^5JBYjE?{5>}iH{985&&lqLB*l?;Jjsl|!4LuoJ?l_;lMpW8`P
zTw17=yF#86etwa+U8&Vk)wB!!r!de&V$=6qHHC2HH+2ai0v{2~D5RdseK9hquh3TC
zxcN{uX_BSj?UTEJ=-9{$R*SJ9I)%>3vmm$Vm`k@4*h~E`YDLOWpGMBR=^)m!C6d`o
z0O~*kr-hupuc{~?NZ4;k9?xExeR`UooORV5l59it)yimP2SsPLFK(B5vxX#=1l^_K
zOuoPoM}ghz6FK;#G)JM0kMh~<IX}M_&sRs<R>~qbpP5%uc(^qQ?-gaYUs)2KLsQ!l
z`u%tl{Fx$J20OAy>}`4izu67D7()L38&KX5?l^j2gmvw$-i)%+J)klm#G=R{tG1c!
zrl{Y1XO<9!R3^p1D%9OnoHPgRNa|KQBc$*iz;O?l^nQYotn#>>>AlRl!@r{Vyg4*g
zRgo;|&ml|LdWwVQVvzD)L~q(;`L)_PL7g(rZJ;#{oX`I$@V~b9|5!8Ms61>v3u(#k
z0Y4esC#%c=ujSe^OCP));|;_GBHuw=p#OslOguMCH}yToO(D>h2)L^}jP^V(ems0A
zbYUEJUwQn8fnF^+ls!*&X+m#?5~RISE^?=)@2ZNYAy5t)Rp=U$W29qC!=my2YS5bP
zd$f!1X$9s6Y(_uL=Xcf@U!*YfR$UX#f8My@s8<=>H?{wgGQYU4#$DgkS7C9TGXI74
zg8NU#(7GDet?a&vgGbUs4hTaIlA|~Sl0!onlH;rGl@#hmtz65N$_aw3Z5eK@)PhRo
zP0D;)aQUUR(>B7{9rxucA-8{Vyr8w8dOv)Ptpti&kBVol-g^-ghZH+dx<2>p$o(PE
zwu77v9KXfj_wAGq7rh5~=tjJaKOUF8!Jm_2q2;{Y^_G$aiw9_US<|)&rF}PMgU7|4
zdr>zgo#$CKE(8XS$%I4*dyvH{*)=bR8}Eg5PScIoA)CK)WMV$C=8P>&V`Q-Gh98p&
zr6rLh*odiSPZ|uZkgTs*JQ(3bVd^O;%)XZO><9^ZQ9fR<l<!Y3JPVDm96U1_+i^h0
zHQY_ouchzSkrV3=|BW}+BtJB7s2wn#gE(8^`K0Z%r&9rk1>NE+Nf5?P@7hNb^1Hwt
zp((w29CW9$USi{`Iqepe_X+ao4u%Pm;pc%H3!wZy)c!2y(a;NYYl=P1TxWNmE6W2X
ze>5Jrho26|oM7qaFIS%!<`oWeM(G58phrr<#a2+JVWv_L&=P%`D`ba`s{+GeGp1oP
z0gSF-)QS9p_93F!xay{xMi-OL1K?nzk6dE1EV0QtNcRoz#OIp(^7}IR)w<T>Z9qmS
z*>Y5D&9fBgpR4#kP)ZIIco^FFDV%whBAMpctoWoDTDZ}i%DK7h(TYp1<4qDo5<i$U
zmV4X?G1B+!rjj_1C3bb^kalWMwj6M4DTt`-#h<qAZHNTn+Y+9}e^_&tw<zgT!XN$7
zUCuku6sEgiMWv`R7(c?cOA&2=fnJ-tt06Br!n*JQ%w|^xn*LIzq$<!XVN!DB<*MT|
z^4U)=G3dvogKJyV;um>`Ej=ltKtV}dW*z#=c`}j(3$Mdu9c$mLw3u;8S`JQ@D4AmY
z=cRc{--5bSXGrz1(9q1M!W7SGS3WUUa?W<1-f)#t(!#%2vfMqCvm~taBAw8<nKli(
zaIcK)@_MW7_H!{DScAJP+kQn%6|8$6@wI6!Hn(la!jHL=1?@C4UMtl}oO`q%6b3Lm
zHD{=fGDflOCbrc_NC_HZsLxJ74!<EJ-z4>BaVRZV`Z9+j2pWjGL1|vIYA!XUAs$1J
zzo;H?;Pkf{TaWu}bE|liWy(%l-7yAzXLApbxCapZq$U&i@_1JjcO>?c?H-U-^xG=a
z`bumZ_~W$~H(VI%n+E<g#Yf|{c`#mxjdIuj7BiYW`y1nZu<9Bg2akBmyNwHmncKnr
zmvwRW3JOOp?II_AH4k@jZo*H6JIK}#{w;upL^eNjIbw9FoS(Cf!9A4Mc$Cx=MPL`*
zoGPY+N5q!Y5Axf%IuZ_=$GgO8gEgRqc&`Svj2sU-=q?rtjbDU_^G6F4Tm8O1&5%BI
z%CqH&NLzj0FIz&HneSsHST;>c4R&9PYEX$KJAmE<VqT>MvZXW)mVC;ZM@}Yb{gk!c
zUf|1V!2?|o+)ds&o?P9YA7sm5<^uf?sq>Y6%A&i5&U-(BZZ$iOSzB#%52&dLx8p{;
z-A-UDK=BJVqmKaT5S0)zk3nv}SHHgt*o=QX;vaiI^9dAE=(-D&Q?4vi@+-xekdyf?
zO*CYb&$9%aC{0)RL}2FykQq$skbkaQDq0xwF`7WC$j##Yu0~3SzG4T>Z0kLMePc@L
zn@lJ{l^nfy3L2lvOW8)>J~>do_Vc`?Mj#wsRE6C}W7YO4{U#`V+fvVRwa8bZNxI}y
z^erhjd^f#SNY@ubH_u3ukEHQG^X~!1di>s#z>PAnhT#&%LQ9vL0!-HXAykmM<}28(
z1}TXHPb)j2l;`uK;hjE{j*UOFlua}*O+9+_=@Ov`C-l+Nz7^n_H@1;GwO%r$?%G#a
z;RBAz-jN{AN>6Q+@DUVmF5FHe5fSYpP1xjp`G_$mi4CIc^l#-|oy}0aG%Uo*s0<ca
z2S{e@y_p2%g&qt@;=-rsrRtU5eb_F|m62v3?URtqzDwfN8fkI2Cdr-+A<GVlg&(VF
z>rmtE3ndvzo@AA0n!E?}8{R>7Ck?_;kX=XmUw0h@jJZ)g%xQZa+vSS9<FoA=MvjrB
zQ`p9G!9&c?1t(o9u5TGIs{HEkcO}&dY^vX|Rl}}yIaut~e97lJYSb8X&d##)#2dux
zyU;(={wx8^OjR$j@~W9|BnEj0!8g|2tv>}L4$*RKv77PtR&M56BeZO>n-ld$8j;U)
zHVxG_`7rqy(Wl6yTL!*f4fnON1fE)aeL54e+G^y{<M2H5M=k$SRP;RM)`lcX{V|rM
zHSOBXH`i2feFQg^SoLRbN4G|S3$wPhdw>%<o&+hO9SP*!hNCxz9k_3STD{};US9=!
zv~gg{U)bQ%r|*(}NrO_V3lioH;QPr_6S&w~sI5Z|{es5UVy_AYw5KRoUs%c9#xXZ=
zA{QC6qZqtwwL3bRzy0ak*ix&T-xTRYLfTAXzT<Gr<>K)OAK;sy%$363-kspzEv&cI
z0x#2JA*M2qoPc!?c%eM94=0Ddq&#wFpd?m@!^H3RrlSsrliyECY~sBfhUx?Ph>)m1
zh{_<S;xLh@E0%ve(X#n_3lZ-BJCpgxz{YQ*GA1nK7y@swN{Al@-foa_GF9r-V+2+V
zTCWKa_H+G@_Pzovt|e=*@!&4OB|$nsaCd^cyAvFO2X_k&!QC2nhu|LEo#4UUA%Si3
z-poJm{WH7&%+9ype!G9)zFl>y>Q+@(ovL$A)v0s8MBiG{&K?V|m)2<gckutGZSsr|
z#RY{4qICg7!2;GtTfRHkzvPm;;9qnwR+Z%m&~pF`Y3M2p^Z2(qG#ga+{ae<*ao{v-
zoc-oN6Vu9#kqx}E`aw}sVLSca(fTF(fw^@%%gWUG!=GU%v^b+|{UVo96%-DQcKU6p
z)(z9ncD}vAV&ZdUj+`Sm82seFRxi(8{U6BK-h!5J-rw>?ZMmv8fN%!Ag63)n2(pqH
zd~M$bs`BN@&Q)$2!Quve+vt8M@><MM*P^J5AU#mQ5ZBP6fc}8owSx=cV6wVgP+Dl<
zCv-C=YBa*bwic;>TU;Q0XJlCxSZ3+ysKIyIH4sK%kh8X;nqZofJjo%tbfITpjUc^Q
zRIG#M3cy8`X|*W3tWx4<nIO=VO1E6zfRRWqf+)}95a^8(AQ)^t4HY8mCA4aZsvC;v
z@1XLmothF(Lr>H^Jg<!K%DXSx3s>){!|EfS(^HFGD$a#g?786^hTg3&DIQAU^2b41
zvL;1s;C`G{ni0~E?nSble5tvy%CXMN{Xzvpp|1AyYpRuX&m0F4;aak)zQc={O9jT0
zQN#M^4>_IhCGso_Z741A=o$B`EXtiZ(%%^AM<k3NAnwXNa6(7MsXLSo70e91DmV9J
z$aS`am_OttuxZC-A8xt%(SJ_=+djo|cj`!EgO*IG@32XYZmQNpu`A5m@g<3%kF~A$
zAG|DzGKwbHkzCKenKpve($rK93!?d`&k))ARm=EhUgc+G_ns^5c4@mg8Qzv=Yp|Fw
z6J=;k(v7cB&3>Yb$o6}HEX;sw^^G+N!Rxp-yH+n4bU<<^2#JtoXBX+`r-`4hk5^HU
zd6i}ApzeD8nB`dL)fY*wMaE9=x_fP@qJlLk3Hy;XII{&MZZE8WmZNIVK);goNF^RK
zRUMwehc^NO*Oc5SX<`Dzr@bPbua+9NoVu&x#Imr$#76sy<7fxUXkRX7EGFEb@8FKV
zJYGu;1t%ePj%5RSRh+ItLUBZTSKSCEfKZ0=-VSQAitlCEP!$QsGMFZ*sc`Qdzf5zm
zw$zeGs4t5<Vz+`Asl3#kFFTTR#ueX#cU`n;*4}ad${+J<JJyxlDC&m{j8bnSHV>FQ
zfT_f@^9*VI2L0~*N8Im8{>A|(`Qziyaaz8DX#C^+6n|$o<uAjWjMt+cqCn|G-TP$b
zog5CM4&I}to6-rix*)1|OK|>Sa^3r?T#T%pCa~x^-vVrQ`X=S_S1UhWGK01OM6@!l
zQ1Xo`B%)udAV!ca(;0ul(SP`vSioxO&dVQr{foV2{YiKKvwrJSxm83J+aw!hAEBmJ
zn(actvXF1|^b9xJ_dC2u-$R7#@wr4(9W^UCDmh74R~u3=R#3IZU5F7BjC?yWpRh&<
zElOr{h8<naX$?nN%5#gSNPiXUU?FxwPK4)44C3=*#6wOTy)3>h+%&3S205dNm5G{X
zXR@K-=v!qq_pHw=0b=I6)9YuIq%s`^$704_#parP<PIjPUF;RcQehUxbcoQ0j%AI9
zF*<K_iMgmw5z_Pg=u{gBYm*~-alFJ~20NH9NNdN^n(5T_O)i^(F~TFej0l0#f@TAc
zG(g}^SmbIUYfpJ<tsr95cLqJ$+Q{0SHi;<kHr2~tKZUqocI|si)`gIJGStS-8XMOo
zxuqF-{Ahdy;T*v(G!++SDw5~R8RB&7ORsmo?aIeT&sO>gUvWgn$K+f6<e&_%`QF~i
zo0Q=wMiSe3u%}v^*-mm=^8{cMLtz|o?jA49ibYIYKF$>8SHyl(Fzg>`Wo2f^w%Z)W
zs3+Ocjk(OSWPp$TO4)^{dI4%UBYPZ2%IeC^ffaqAGkC7}+fc!#hyHRz-U`yD`i34c
zDX)m4fCF7P4wDX2mnSf!<sG5!;ikZpHOP1_yoap3pVsXr&cy<6?Z?pa+x<2Wmg6K7
zTm2huoP^7GVfasp=+n&xCQ<T}D$E5V+HFGDtV(<|hT#mAP5E1>f*PzF8EWlM0B7!6
z5{rWODl9j>=+R6am*(nZp6^8b*a(HVBU)d}_XZhx>?N6B!MwZv8a^;i+#MxaX5l*$
zYO;hD6O7uc#FYPOB8FC$6vGpD?noYA@?$u<QX(9Q%+Vd@FA}ydzS~n)Pk9M!m=T{f
zncr9@3!jJE9(kratHa#SGWhT65Uwy<N$a-jVvNu>|Gky?|L_K?Cs{@GLh_(F9(>(Z
z!jk-(-vs{Ci67ajQ}veXBgvv~?wgFQ>>{3bK2@b&J`6i`#mDwJaYi=MtXgSAAva@7
zzm3mO!avpK4ORWcvg~MC*HalpG>=s5sxb8IxRQ$n#e#RwKkFO2nB5kKB*V{8WI)N)
z@m7l-$(lC;RmI0`WBYac_ourFqt4ZDd?e#zYSTztXPdUtBYey0n0VH$JL_xq6syHY
z3##T|l)Kr8TpNNlxR1gZ*BgY2f+SvUGsZ#+6$S5+4E8a)$1BsN?S~IAk{HIvh_W^v
zSN`z5{rvb6=eK>9_1rt5?xe9a_4e&5Dc|s~rSa?cv<G{y3XEb7zoc7RFjDY+-fEh~
zt4w3(tJUC<^$=Mvt6@$jUn;q){&B1}Ivs4npPd!tRj^p2P$>?rz$_JJJ!Z$Bqi@5d
zL41^#*dU?z#sBBV2i<(sW6w|=2|W#BWX<Fqo<m&0D3_d0tj|PHay(0Ucfcvecnk!^
zmmm2hpa7S9)5)|BYO*^6`bK&8+&X#t_)h@E+?a4{sng(h-+frD;pa8`5-~03q3`{%
zrDZ(}taSYlZOw0r`n+-qpe_-c8k{cOo0t_4znL3PI=FCV=dKn!fS1?5Ez->IaI5dI
z9o(G9VDZl$LAB54V2BY6;SnFOa|WkKd{gXyC07<8e#oKWU}ZE@h-KhqK{-HzhzKRv
z=11>L_5>*MUU&iw+5|loEGE4a5hCszm@uG-3}b&ptFaRw?3=fYl{njLPo3IRXyCf3
z)=bu<OTopL`yslBr2>g>CTn>}ta<n1yu#8<u!Dp*uwdEo2|)5g;t7Bh_8+LGFqM4b
z@!iU>y-cb1P4ZS^B_Us4UzNX-CM{$H7)z{e8-WQVxle#MYzz-^=u@Ui>N_1B{Tl3u
zcnq~x2q~13PXM|jeVA|6g)|O{y-`d{E4Z8&jhwyTeD!%HLo?Lw#zHuX#fcDkl2-8O
zh_i|e;=|81Z#yBBdS7sfNBB0}P_i~gQmJe1SWF`1`cYXM8x+Sv&^VKy;Wcr)(&WU7
zx}v&6&|Lw=DQ$6J#k)T<u%)6$QUYE&OnvZf75z%VwRpXZjbw<Z#fHzYG@WbBV(*7y
zkeza`BoI;7MX;-kRqE~-%!cEK%_8IgUVQK|yeURdYh7I4)s#@En}{*&V$qtpgF2)7
z!9@3)1kfdNjykj&#=riT6(Nkb(ZJ@yZ9jLR@1uvbHTWK>OKaIRtM3M5AC4w0DNQcQ
zdV_ANQ^XB3EX8k6LVV!6=<>Ig6k~IeOBuhSC+!#;>9~ib9`3c4=Xpe8h%@reM+V1~
zxgvoHj?aBdP3w7aaq?-^ap~xwE`U!iJO6>UeUbkN6$IO&aTnY5pzb-OwOA*8xV3t|
zRIp*iyI)-N8E35^l19pFDrbaP;cA61XCqGB0Ayzgirbx~%QD}Ck}OJjn<GQ<%E6>F
zgzf$t-N{6eQHsQl12yzq&-LdK%6n^TK9CZfa89v1<A9A5G<_gNO_@WA`F;SX{vxmz
zXz5AsF-zzr+scn3VKE|&(g|%lpg!PZeb%0}x8$jbts?z;x+6%K#+0`^7bVv7g)S)C
z@A}AVOlSJMkIEra@%BTcnq_5uIz2A}r_@G#P6CZ_-$l5Y!N*6dVm+SlH0{RSCL@W4
zTnSxa{*^4g3fdEo;^KS{TK5v>>ZUcQt$X|r)q|2nrek$eX~sgciCSy~h3UM+S1OA3
z0T(Pvz3CioZ-?<27H?il--^&`ENn;2vOkozgYC2ONAqKOca#6dvizXcBUOo)2?gDL
z4+LeGkHda3++EC1N$#TU97dxbNvU<G4GXtJL=uyHYn1B}%ZcYY>^xpvfH{09SNJ_K
zGq4SzT7p>faJ;ZPu$=3|i1ob!TSTLsW2WRFwvD-$-H}W9Cf{ejZDlzQqpE()(=~%@
z2yg2NbH^kN?6yOr$F1VUB#;pU12Y8jm7)1$@%~FCOj}Q~Bt{M^3KSB*6qoFX+q*o%
z^|{d=<jXz1lWX=5lZN5zR~p$ueOzj|7<e$PkSmA-F`)7*Yz-C8d;?=4X*S5&T?pkF
zlcMd>UKBFlpqqt)rLR0^Y*`RIcG1xFOF5gO5jZMJ9p+1B$;6Pe_g3H2fey52U(=(%
zTFFs-od(SP^mE^grP>TtAL9&u0$k5vS`2NC@?O!Q(mSuH&SVQBsVG7DB>3Q2Tbkk5
z>R_5J1mj9vmS(GdPfTpBKu<HBwAC&uxaWR9#+I_lHs@YZAye@_4!D^jK#<F3+o1mi
z*)K0(h{9^`!g|#0<UIj-L~}~tJSy0hM=1Y#%x{aV@7=!lVhZCibZ4R7<7k$z1b1s#
zd~qg0eqVev@4=c-(m-}P`}cwko`aYFCiTF7r2gCB-!l1?`p<b=KIg6RD-)A1_TVB@
zj{YW-znl6W*5uErOB()ek^de1ue6|0u}62<e1Aws8^*UFRF1O$%qIU)YxsAqyx-->
z3zT0h$9JNC>ajYt$g-b<ElwYfRW?h!?JJ119^zg0SC>orRUfx?xf*VOXEW_h|DEXn
z$|g{S8$6|5Mj>(WexLxKHhqHzK3xg{3AX$W1$Z|74z`I8KnI^QMH4j0uF|)QIVJUF
z5RmVjSU>xVy?1`JnH;4WnuXiA!yl5)Uaz_NG14<X$&U3Dm~JT5oc%R|^c^k$f6&>B
z(%IyH`+EP63i*en|DT8;eM=Q=_NZ6=4SL441+?k%jXmPO@UwvxyO5Ws&}HGBeaR)5
zo_pst<hsI>@mcWFG2oEcJD3(_%O0pA_5{#1eE~kf<C$>L?8>1YaKiwNT)3{-!CfMQ
zvC*OC7{O>I8+;uAiSQmXR|K15e4!*L^xFb|Nh;)wr63Y)FyC&jLe%*%4gqC*B*f@-
z5_0=@y?xlUd8u2#S!%`JvCWxJ2_KPCNp-*akDQ+fWzY?d4l`Qc1KY5#&UN1|ZF6Lb
ziOY8G+?MD)(3anwHC=0s?rnt}nEm{~$PNq|HT8gtQnINJTFWfuy5SM5um3(Ys#PPN
zJy3{K&$6hRvp`pr!R^<VA4{sKUzbELO0)-2d$#<Aa~5j|oqng$r>!qcoor4Efvgvk
z^L|n9a!CjHI{Rc#a&~4*^vKC{DSB#wl^=--Px3}PK&Te@zP@!_&=*bi!171)&@O|_
z>r0X?Owsr4?PW3=36E`zcTP1Qna2*iPricm>hi0-M<<bXbh!~cmQ5!nF)Ljk36oH~
zel)%i?NI92q*l=8dv5YH5<m<mN*=Ri0X!WGJ^&jn8*>Gpd^h=>VpI#`DQnKmiVwh{
z>mtterKxLkl0ROxmcb0+kS5T)Uei^lk^)C9W%fwgiI#Q*A5Qo|z2?eQAHtn~gfB8W
z-GA)-XTmAYVkLi<CaH;E!9CosT4W0I1$iRfzr1ALH60(z{vE`7Jt+nnt4hS*)V7SU
zD`)L%ocmvT@f1ylXTXBbA9MOs#{U~&3nl;BGcpz=q`%nh7v*A{hzxf$$|b`4SAf0P
z5U@yr+T!w@W5xqJUmN`FaHemFFO>Mc?fA`_r;W1Dieg4R9orZmsQ|YAi_7ve=RHq)
zaz8~2{-uJZ4W5~-N!l1|zY+DQ&h<0{g3#Xj)GH*a4Z`zIM=hPG9&Y87gBy8n`PEQ>
zrWvJziqeVY3%@CL{r;iZ5t43cOH6b@8h+fy>OP+*0QF6oPl{c2Gsf-5C^T?K5lDFm
zetDq<rE{tuaq;p6KT3PxE7&hq>h^|t>N-xcoV_<NW+C?$d%0lF?32t5JtA-1Bo#8M
z7tFX&2N$x_tkLfD*?7t;f<Q8%aMUF~ewek9;*r8{S80fqy2{{`WYr=qxylu9X2$T-
zIx+-p<STfsLKM@27h9#e%`=G$@&m)(J3Dn2NppXYjx$G{e76f3r>oBuC9KK^C9I>B
zaiAW=f1k$onPhJEC1fLWI{LQyege5D%79eZb-a^THbVD9!UstoK|(*?=`q2$n~ABz
zFZrLs+!6&4*oDOr70jg(TeWj5W>4OwfIcOMsgmZ}8M2oMrF7l{x6xRXp)EB<^XY8s
zJP6eNhb=v_L=prJ)T#n3^W$)+phiQ+=?Eb7b7z~Fvk-=9<0^gfT1nkr!N}V_Lcy3t
zjP<BU!L96&yuM|9Qw4wz#@xrFJ&dycAVTKZjz!9%&;~!4o;%dj6imA-blm%%7kUgH
z2f+)XMZrL|525)rP-GYQty!uF4Go!%-!E{Z(o%kv)%75cG-1)=^n{p<8!qE*AMjx^
zUibU1fX}(wy1H{0C3In@#=z^VEb2=FLc6fz7Yi>ZuT-Oa^%qOz2Ag{|HCMr10~t4a
z9EYej4Fel!Ve@_g`#9BwCKjp=+Qp+-TsB&MeOpwOU7j1khEy3ehz;xoKrikyvMOVT
z;+KsZLHgB$mYx7U77BOd!{_HM9>b^FOI~d-?S<{6o0MK*g?ZWRD#afV1jo(Cx4cah
zU&Y&{2d|a1#JOq_OpjF3l{L0uqt6%s*;4kcqz7d8Le+c%h7GrHd1Inq3^%T2HDjsK
zoPkD{Q5k^?NLcAUim+^~?>i(J>)OJO-nh`9;j1Kt=e`cQWfPXtdS4BBZ!?Hg2STxB
z5Rld&=0r||Az(;bM}`lL$Qms(1aL<xea@Bfg6!%t5KS4H%|2}2akc<PT0gGYJON;s
ziVpN@5@~y+Qo3XLSrEhW9Ag9n1FL`5zrOJ}c%w1k>XLP>9(^y3?Myt*Xx79J4<&gT
zI^7gcFQdbvtoSDM^DR6vq+wUgt_dox%NhJUSeu&H*~Zf&_IU*BauNT4;KZR2A9i(X
zD_PlaArT8kAfed5{9(3@wGl{2qbJCbFZIo%n`6K12>|?A6VLupSPaN`N}?_|8h?oy
zYTUYh>qDi@9<^?!K8xs>);XdUwMkU3%a1nr;zsT<gIq-S!@A}BQ1k8E*u8w8135Uz
zfI$T<%_jid@0F3Jc1(BK?^orjnu#oRGAbcb|CfMD>f9fEXB%K5afM_ykt-U3&+_kd
z*z|&wq`~t{q5o%a30U^dsC+q*V7lsS3_eh0<ZM6g{{;iJg{rckBkh(Lr&gX|>}SqC
zgeh)t-!8mQUqD93*_Kfb?=;$#UXh&nkEVtacZAaF3`?4Fh+XlmLt+>BE>RtfBKS$=
z;#bY#8Zh+oey+BMV3}C0t+EQd^9HIL9Qi)JUbj+o10~&#iO{0X4(a&)5rFap06{cY
zVPkpFQIzY3>(z65WKZmO;J_vX&EZ}hgvnT>on=o9eO;nX7sM-Eq;=54>IQB|;+l+)
zf})XUCTS?O7Q{YjbAPlx8A8=t=vWqiH`pUL85Jjxl2?7*#pm<<9|P&YS~*-IW=R5M
z`|b8h5;*!f5W*S>1j{6rEk@v1y5$p(#((pwDse?bkgHz}U*5aq!i=k2gN`Iosk2Ch
z@~DW(d)J!w5n8%O!zPU`Vw27?HagDmAOY3>8;Y*xx5$dzk}>}ksj>5RS2JPq<Z-#z
za~$YwL#w4Ijk>%IjHwRzT~Su5??7tGPGv*m=wIh~&bnC|DndH<x}59`N@sOXlIh&g
zd%kLA(D~(sBY5DUIbauHMzP2HHR}cJ2p>gBd>KD6wMSP`qE;DjF)rgCeT@C#CAHV?
zKx3wRjKb+x==8lRr?Ym=o;zrwXNDq`ZpHk1gaLBAb3SfY>h+yhz=Ho}+GsT*iDqb%
z)&j>CMQ^3)xso;1UT_u#7#-F&-PT}s=~lAH>=&WA%Nq@FP_Hb>*6tsp)H|V!4`oiw
z)$kI>%}z06#2y4bO=E>wXX^((SdevG{=`Aa#d-+IoL1r@W4aD1lln?9O=o6p`>`;)
zb~;plVA$=>sAPJhh(Pdq6}}t?qHJTr8{mK6(kL;bu(i)&gpAiVOK}5G`Oqxzk}b_@
z0wos9qmV396B|n3Pn-J3B_>)FG8(ea)UQSZ+hlw+#Ws1ftbR|)$qkpOAV#Hsu}=-g
zK5xLS9c7?3?k>d5$!fdT&xe23X=}AZcm??MbN4y3z+L_lo)tA{912wcqQa<(GDn$Y
ze$<A&W*YKLC-e(M^eR&G9y7PXnR4VjbOKGpnGImJLghGa@gpz?k(E_gd83%LMoF1f
z7I|i?gBAZrJfswIUr}*mnz@27tFUT2KDLvTO@e*13t}`*iGYalF)q_MkBBmm4IlDK
zZ_CCHqTXCq?GZWTd04RwA3Iu_eIY~~k98oLWssyYfQ|e<{B`OHVC-c1jtUQPNecF@
z>=QukM|-Wpbu;JU!blN)UG1WVH2I2m8)Xq{iPCafwLQj7?2e%0;!gq#DvSZ<sJBHB
zx~r2d^1@a`rE?u}A6(r~zIs4TI=~k86}#lsM4bQBjE6ZE_S&q4uw<Gl^~2glwI_D)
zXjcUZy2lhy8iXJ_MT&PAYkrZHMFFnS0rzpZj7!DhowDpv?dZ!TRnL8DYl&1M)8C?R
z>zIKKqISw0bTaK{E_>d7tOm(5)AJ`#SDJll>ye*uG;4A@%m3sgL@ha{z=Vw8C+NJP
z!#Adtm%{pmP7;<|NnpRK_9LT?k|wY~8ofC;SF46@?=-~JGub2=#oAI`>XmmytsW_K
zcC1$#9e#G><lTw9KR2Unnv-QCD~Fg0Xd=LWx}|LXMaPooBA_nWd{z*_5t{yI@*I!V
z9PO@80y2KkLrhnVZb)MD>@*_p6TlG*8`{1)UKyz?=<^MAl}z;-lji7+)UH-um93A4
z_4gj)^+ndW2I@KK;U_>Vmxj}(I;fOmOXdl{9tATCbF20FhI8`c4ferYg>I|c)t{Xb
zSVt^ir5?gF0)Ji0bbFZa;Dave*-p9M0=^-wtEG_*aOSAboH9nkG})3fDs;NRym7L7
zE5X`Op6*A>$~<D>)zN}3rAbFyWy%HWA<6>MNo_S6%2ZP|8&QZuk*>-H5lVg>36k8L
zn`(}eMdAFKLZsYO%o(BG7{C1548-anWnR3@5Qk=vKiGuV^!>(;=;lB%AAmk$>IbjM
zZoqC9V5>g%Mj=mI5y~<6YhAY$XkKQKOM;dvzHm|@M6g+SYjKT1$LovGRjRSWTXXU7
z`QR7ly(3Z~ZAIA<@-+w({yZXI7`k!w#PMo(Mrpc9(w6o+^wcUOQe?!OqS4fnUJOvw
zq<X3&?qBU;(bK^bv1Dh&B7OmNUCSgn<xRpaM38AondlAdCTe<5k|}5_S}9=Cenqoj
zTS8%GoGN|&s<INqCYYinqq-gdiiNcl@Yo$uEYpE4X|cxV6!wUsrYRDCkOt{G*@^Ec
zD<^!^aAM&Vx{Us5FaJ=C3wRt&Q<({1Ul}&Swbs4AwvwnHGF2y!->6#c=6V5#KS-ee
zc;Sa_d;2{0T6bt-N4>{uG>qD>O;)}*A1yW5{K4`11N6tZ4-sNst#}+DS%}-Eh7UjB
z>!x_|F?zfkPgTJ^pYhi9-lG&ugL!l>F7MQTD{Sw)>X|aQk6P`IeFPz4u<_e8Y_MUC
zv<kC?=S*@Gv+94CgxHsnhJfh^1r86c7p<kL*<2{{rt#nm%a)a@n~M-T<02`vTCj^D
zy%K^jIF+xxy0`tI&}5L!(VI2qmKsM-pGwW3m&{5;jc#=1y@LHr8^gZYrtVhHiM^Z8
zlDmJXt&#F6^HC+zg0<yh=ANkPO;@l`hIy#|oO3Px{T<u|GdL)scD&Q>YC4isP|LnQ
zC4WVc`CB6Xqa@FQO2+(Vg&BX)gE%W`5Z&_dZakkZssV99Xz2x99(8kVcSEq!T!B~E
z9%-#WiCj2Ra=c=vh~@U7wav7>z%Vg^{M2PRpP5TVIhsXv@?re@H&SpD7B*{?ntNCq
zxiQ)Yhe`GIderEYp8%gR^o>jL#3xji6D`0BGj9mNj16wfb~poW;VTdRL#G<W4kgTf
z6^`)f(CxbzBzLowRV9{}(35llAiU03g!S1T`;s;{`3GXktO2<1<?~CTKjt2kmFHEj
z+|N-)qI()2ZRFcx;m`o(<3NjN>}2UiLc@w?h<>Y<!L;6|mj#p|6PX`C*dw7e*jllD
zpHgQ|gNeNSsanmvfedLFuFOG8$2R-h>hkTczd~zQ`1^B8YCs9L951iru7b3IBU?eR
zacT@YyOln4ZL^c+4HT(Z%B(Z4yD8EYg%^%DUIC_m^RI4KzuWHgifrdl=CJXTG0x)M
zHF2PknJcy$>fJrUAaig{<gb5nGQA04>oh<&B~DrWhSU5BSZcSL%zZ&s^tD#McYC`S
zMSYxq<@aX#$@gaz%pk&^8_1;Cc43EUbTG_%JFuxC9)gBn4i&#+4>=EBTkYoBu2k?K
z$+!imR9o~@yNL*au)7PhfejsHI2NKQkZ}@b=0eMqswrX`bjnk^^+6D*{o3?qlSro8
z$&2J*Eq9l3!ifa=)<Bzb#>~fkAk<t5C3;A+Eo2;vdn@4g>U3%oF%1y~J7VF0xb{BI
ziL)HhEF@r=Hb8Zd0B8%CX7+9Da%RM@_fRoOr^mG?h*ULWQW*T2>DH_B9VKZS^i-&p
zk3#E?FM{){T|ELs?Q0|!5$O{=SG2<@%#o%J7`YUpp8y!lyxjTezNOxRt&(35+(Y(8
zg{aA?8FT_V&KZHy3sT=!jbYR!hs3l7r*Tz=43k~2rYSa^VNw^#R!j)Yc|NIBxX5er
z`Ii1(=i%Y-kz=Hnxl-`WoUr5exz;jVtdfWiD#z73qoqBHEWCkk!te&F7?tD-@G2G*
z@!5xOCQ)G2?dqx$PhIn+rD?)UltYP^EbADSVc5*^c_w*BQ;uV}jL|-uDV)c2iQbth
z*dCYZ;}py=OSbheaJU8(tOO4zWk%;)XzOrZjIzqbFx}BxBXN<^V8WwakHSe5<Vi8I
z6@Ob@?g;oKY!W&)`AI>Y=>&B#aJOhs1K3tNCQE8ksHS-OMVkrUOcjtzpmy~HD7%FC
zeG<AoPiyBD5b!&_brLZsG6i8~)K=np=VQLMg0F3|B--i=vfXC>xjM~9m8xQSpR>3g
zUG`~~OPwHPMNn&V9L5ODO>W#|77X@-S+m{~e%Y2^lgu=#h^_YXyoa5Cud_&N4)b=Z
z2&i172$GEdcR3|!71|N`Q2x1p5pQ_7Y)<tSTz4}5^yN9rBEKj8RT*t3QbY~e+@GAw
zg-mqzB5$?gJ;X$&Q{0Lt_=E1p$Bm{Xt$sX`w6)r(Y&-!V7A)s=gaY2hTf8;khRc2~
zXZ`AdG*NMMoT3+j@=lpKpl{=VvK`0V45z#xm2T{~b$oVDc=x@^>zD#dp}zJsPRK`9
zqYhe~Dzg)>@qugtvXr10EP6Q8LNBTiNBfaFVY7FR(PecVi;%PEmG)uj$ik5s9DC{V
zmt?Eo8Z`}1*s&Qo4)_eJh71nu1(KzWi>lwbcnzo$y&8OV9k0I(rOo14T~9ZW&v7oN
zHE(fn$WGF-y6dC>CMu_<(E>01bf##$Ezi{;dLezjue|ueW=5-+JkYxcyRcf(hfC6;
zK1GFBy=K)Si;L~WM4Pz~-nF9%(8gvm)h(&bnViP^;667nkYqV;=8M46gEpx3j#@FE
zGyZL~#2!TP;!6f$8f$8K5YPemD%-_%qUZI<0>%7XiEYy`jeUbR8i63Tl!~SX0T8@X
zdfKz)m--scNpseCVplj>-AuqR5`P{kt~eyNejf<=QaG6_8}9?Epqi6+(OWL*%4*-2
z7&+IN)o%FDy+-uWjb!02KgIQXhIxL9d499`4)`~N&@Knk?YUe3MlA3Yc_s|7{NFmq
zJIh1H>PU$P3YXV2*UF@H)xbu|ELF1FJLo?Mdlu1-eV<3_BXt97yY)SUI-Xn_KhtJT
z(otN<_o{CykF{S=U*1hx!w61(zRE8Xt`p;~u%4dSsS7ah;U5|5V_qy_lQp}dbZ0Z{
zn#qnF4dL~d8Zcy^8WV$auUC0*Ke)r1SQS`j))iMySjeh?PV}DQCziEu^+c8!4|HFC
zN)XR5KbKQ3g}35C`tDJ5RbIUPPc)UXmu3;8y$1HV!sCU{9D=qo$99#rujEi`CG05D
z&U<~`BTR+#ncT-%A)Qn$3v8ZVlENlD{cA!q#nG~Z^BD#q6WuP6ST-}*RIQT2;+N$@
zv)Dp!Q4W;3SuFRA*kB^}uo&F0SnY+bEOrZC!M?7mkr)WN*uuyexYK}_oDVX{F@qjy
zmd>&ff6<b4Rql>8B2G5)cGsTpBilHQk{s{Vqf>XLnc5pfuvs|jFm}l*Uc~3-UU&X^
zwPu+$k9_a^SNZI>j)1bMkh9YJSH!dbnLKw-LQg(f_Qv*?SiKVdCT}4-{tT@6l3F~}
z(ed)2h&F&_2H%`qqgFYEPIK2pH}Gs@%AnfARz`Dq2$wN9Fwg>kRGj_psN@Pg!PmgQ
zvXBMK%3o4O;4O|T7bRZKH6SP_?FoP%mj8Z{TFbx%4>ASv!iBAv3Xur1R=Y)ULe&x;
z6Qb}UeeaWnVcvwroG@+m6Tpxtzq6W5+`?6Br}ecKWs`HfWt?%SVSSjoF{YeA`Z1XC
z3O`^EVDw}BNXz*K_6jCz)osLo3uE>;qtm^Z`Ad^b_Djt117{DP{!dOAPXMrRaiJz9
zQZzd+UdM2gNzTfbVlcR<9mFwIHJ4J_5%z+q46`X4ZnnC#+i40-cuI9Ea9^mjsTfg{
zX%Ku4a|Iw7a4`3y2MPtFK}`A5bE$xAYfflXpH;BgnNGnRC}(h&R~B4895}N@tr#lM
zq*bEfF<-nQ7wZ-}9<Y3mKUU<!4OIpQ)`CC+pm{k7GAjE_o7g2GmB985_>WV$KhOHy
z1l{geRgG6BtDZeQaNY0xvjlmuT${mf<~^in)12k>7TPQm%zEJn>8G=#<!qf*Pc5-r
zdeZzUG9Nz+d%)H3#{SFhXAbC_PY6^7?-f6Vgc1kPO|o8JI$x=jpaT%ZL<v|XZVXim
zG*()QPXf`(vQ36w$KJB=5NN&=<$yreXQj{BQ?Dy6T`<C1)tpI5Qeo?@ld$L|4{dbp
zRRT~`bRNjtu(CGFQ=MpqZ<lTDPgj5_TO&i`MeyBV4xfkn3ki8JHOh_J_xdD;KuNEh
zqd*=1CJ$19I%z4AZC$Z2PV)7?My`|sR-WhJHg#OX4zJwF<36tAH)TScaCRs6M=8Yv
z4npXRt;$OIuSXuPVC!fy>h_4DS`^W!R72@jAi6f?QR(hdV@tH%nmX&uydEG_+3!{?
z=FbCr+nxZLdXjaJiNsh@pa>(vJ_Y@}SP4@>%a-bfP+lNyVWAFwmFgFx(tr#dxI~S?
z8g|4NYXwfRc1c-@#@KflaSguO1?8QIfSc%dMNvPs+S=7~bltVyv|m&Et?U;<F1f+0
zme1um^PTAlq^okTKtxbryIwZ>%S3(&DSLxw-qGt58gztGuQM7QSMgS${aKp$6c(aK
zHEtHbC8OjF=b2o}-mG!UI~{MN-!VDFPJ@nTxBpOGqV1@HQ9`C5Gk~9yncL`aQ&wGn
zKVPA0&KjZcHEZ9#^|c@`Yst3JeYm{<@qVZU%A76gj0EA9%L3|Byvh;QAOVhN&O1pq
z(jx@cJW8xWi>{=a@ai+kq@!UCkiE8h5*lEyx?8bEp;s`Mms*<jN{Qu2HFRr|7|Bet
z3Y}IUW~8fzs~bjMUfQi(RbW_KQRRvq#p|kGuf%L-e?(W%a@1y2R=W!$YB9;&BM=Ej
z?om@ux|=u44d%x)n$WwT(<oHHf44FD4(VdEY|g=L*MYMEsZVhVeRr`FxziujkwE?~
z0uBP4z~-x$U&3a86fuv>*+1=U@3;{y+L(7dx9hYZ7=!LZ{~mcO{42-v+k)=&Gr|7{
zNyB0k8)^2@$+es8w}%qx|BX(%AYs?%(|;>R_j_ijiqFQV>CnO20Z`E3FC+xaZ*Po;
zK!?P@L?dG~kcT1_WMC3dfF{RcW)b%N&DJy|1Oz|emw8)6sXu<i|FhBC3HQ0R_Cejt
zfdIj?JWsJZsnu7p5`X<t`~a=3NZ5bHhyfq<otDK1f+mkj(#b%4yE88QDk8E9yM+Y~
z6HfpIlFb>pb6yb@X8ZZaj}M`t2E2pCIkT%1x&-V+4@M4``{(c{AYDNRkkEq-iEvU3
zs1~W{b;sbI#KXS)W=FYWsmzpg?)&}h!b^>P4##P?;#XIEsJG*r<m~b)Xerc6!aqX`
zz~;lq12v_K6(jp`S)`fj?hev{*K*@Jd#`S>N8?>#M&r#@Y}W>inH=9Uy+jHUCW{99
z|HhO4SHGvzXgp3v!LszZw}LfT)sihnU~N8!!tPxtLarGWR%i9v;}^zvO$2I^Kq&*!
zuc4DkzP$qq=SsLJbZmqk*jlv&1lVF7F&1<pg>^VN)0$xlzj<?mK|*U@u{P2yN#+cb
z26^2QL7$PqF9i6ngZw%dAfe6vHpfD3#QCPF3gcU`(RjqD0_dSw9?Tud!2T$YJ^4nQ
zLhX>dN%3#+xc<-Jy*K(g370ZGkNb{fz=S=$$UqY=`IdHA%)jEbzby3oYePMIPA$`c
zoVK!)e43LVXKbjbdNN-fkqhs1(mNJ53A()%*(k!zxzyDTn*jSaSHZz01K=o0<^8y#
z>%P;=h|i}b>2EL}KY4{Z7xNq5(QJAzFsR*Ndx#yy^R^#;FAli2rKic9;K{WdBsqD0
zTx2tmOJxg}OPRkZG6|b0&mASn_I0PlCpwInLTny*2@5|&@kI}~g09J2lnYAYVcsNn
zMrVV=?uFnQRFhvI!?ocr5Y7Z;m?(*x!CC*XbHTsnp8#dpjzF4a{F*<)(kTq~AaQ*>
z_7uRDYF@{FHLlk9Cp=XSzp(xp^Z$Im`&-=n&)E9+LweHg<iK+R?em-f2?GTQ2LbU*
zV+gD>1fCPnFtHd7pvdF}6`)DU8JL9Z^qB>I=?p<VPYF)|)w8P@@0MJUj^&=P%!eQ+
z;tlg6b>L^a3xzWsuKS9-23>-+1E)*HoU*9Mec=5_PJ3_ir^~|Ns?*hT5&J#oI3>-Z
z*X_g2j>YK`AH80(RSo4X9jk5O+^T?YWmXghsm2=`ol}q$ujU=8Um!iqYDd{=Va9cp
z7xpW#ExXLGxdnHxyoP`7VI0Y)I8YoZqbRc|mV+jht|;ZdgUEkyyN42HlzE?Mt*bHz
ztn<HFs%KtP{gt^&ppLk$$>~47O#e>oAHvRVW^a{&3e$EPEcLxs*&>zwXgx)KXd4s4
zpQuBKD!FY4@)4|ko8|Hp%oi<)8YpUX2Frrp=quR9^MTOfs!Nm(J(=F<AK7l8=DPrw
zl?(qo_H(A+@c_})L=(2ACe8O)E>qlOcqubJ%Ym0A{_6qKq0bM+c<!`eBlfqR779Pe
zQ!RQBtRe(nZ$(b5eY;hDOMKInjdaOtYg($`1M1x4V7#UJJ+UtDNuW^CzdrJRO&Fpl
z2rYiA2vNebe9pPB0{v?V;8q(78|v3^b+vPK^+-%~VQs^9g=xb^Hk=k4h|BowFTdFZ
z?&XSBHFA?!cS?6}=qYL%Z{<_P4bTsq0q<gxBN#g8$IqAid&**d;GV?<^4PEbDkSWE
z3`{Yido7oIY!V$2L!R<rOrb58A~qA3egKyuFdyTTh%N#9C1Hw}bR_r+J~rleAbUtA
zOeRcmy<#G1iWz7|T^<O;00+x`E!dhmH@{=~k>Vx8Pnr4opAU#p_+SO>M1>1`x$hPd
zj`ssbYhA&C{{3)MBGY&6q2zzbJM!&UQ$07=pYJ~rr@uek|46`sgfSep`JWd42M9bk
Ai2wiq

literal 0
HcmV?d00001

diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md
new file mode 100644
index 00000000000000..fc32150206b0d6
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md
@@ -0,0 +1,352 @@
+---
+title: "CycleTracker : fondations HTML et CSS"
+short-title: Fondations HTML et CSS
+slug: Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS
+l10n:
+  sourceCommit: ab8736c08a6664970fec04088182b8c5e29a570a
+---
+
+{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker", "Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}
+
+{{PWASidebar}}
+
+Pour construire une application web progressive, il faut créer une application web fonctionnelle. Dans cet article, nous mettrons en place la structure HTML d'une page web statique dont nous améliorerons l'apparence avec CSS.
+
+Notre projet consiste à créer CycleTracker, une application de suivi menstruel. La première étape de ce [tutoriel sur les PWA](/fr/docs/Web/Progressive_web_apps/Tutorials) consiste à écrire le squelette HTML et CSS. Pour notre application, la section située en haut de la page sera un formulaire où la personne pourra saisir les dates de début et de fin de chaque cycle menstruel. La section en bas de la page affichera une liste des cycles précédents.
+
+On crée un fichier HTML avec les métadonnées au sein de l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) et comme contenu un formulaire et un emplacement pour afficher les données saisies. On ajoute ensuite une feuille de styles CSS externe pour améliorer l'apparence du site.
+
+Pour réaliser ce tutoriel, il est utile d'avoir des notions élémentaire en [HTML](/fr/docs/Learn/Getting_started_with_the_web/HTML_basics), [CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics), et [JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics). Si vous ne connaissez pas ces technologies, MDN contient des [guides pour démarrer sur le Web](/fr/docs/Learn/Getting_started_with_the_web), avec un ensemble d'articles introductifs au développement web.
+
+Dans les chapitres suivants, nous mettrons en place [un environnement de développement local](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) et verrons notre avancée avant d'ajouter [des fonctionnalités JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) pour convertir le contenu statique créé ici en une application web fonctionnelle. Une fois cette application fonctionnelle obtenue, nous pourrons l'améliorer progressivement pour obtenir une PWA qui puisse être installée et fonctionner hors-ligne.
+
+## Contenu web statique
+
+Notre site HTML statique contient des éléments [`<link>`](/fr/docs/Web/HTML/Element/link) et [`<script>`](/fr/docs/Web/HTML/Element/script) qui nous serviront à pointer vers les fichiers CSS et JavaScript externes à venir&nbsp;:
+
+```html
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Cycle Tracker</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Suivi des cycles</h1>
+    <form>
+      <fieldset>
+        <legend>
+          Veuillez saisir la date de début et la date de fin de votre cycle
+        </legend>
+        <p>
+          <label for="start-date">Date de début</label>
+          <input type="date" id="start-date" required />
+        </p>
+        <p>
+          <label for="end-date">Date de fin</label>
+          <input type="date" id="end-date" required />
+        </p>
+      </fieldset>
+      <p>
+        <button type="submit">Ajouter un cycle menstruel</button>
+      </p>
+    </form>
+    <section id="past-periods"></section>
+    <script src="app.js" defer></script>
+  </body>
+</html>
+```
+
+Copiez le contenu de ce HTML dans votre éditeur de texte et enregistrez-le dans un fichier nommé `index.html`.
+
+## Le contenu HTML
+
+Même si le contenu HTML du fichier `index.html` vous semble familier, nous vous conseillons de lire cette section avant d'ajouter [temporairement des données en dur](#textes-temporaires-en-dur), d'ajouter du CSS dans la feuille de style externe [`styles.css`](#contenu-css), et de créer le fichier `app.js` qui contiendra [le code JavaScript de l'application](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality).
+
+La première ligne du document HTML est un préambule [doctype](/fr/docs/Glossary/Doctype) qui permet le bon fonctionnement du contenu.
+
+```html
+<!doctype html>
+```
+
+La balise racine [`<html>`](/fr/docs/Web/HTML/Element/html) englobe tout le contenu et possède l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) qui indique la langue principale de la page.
+
+```html
+<!doctype html>
+<html lang="fr">
+  <!-- les éléments <head> et <body> iront ici -->
+</html>
+```
+
+### La tête du document (`<head>`)
+
+L'élément [`<head>`](/fr/docs/Web/HTML/Element/head) contient des informations à propos de l'application web, interprétables par une machine et qui ne sont pas visibles à l'exception de [`<title>`](/fr/docs/Web/HTML/Element/title) qui affiche le titre de la page dans l'onglet du navigateur.
+
+`<head>` contient toutes les [métadonnées](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML). Les deux premières informations dans `<head>` devraient toujours être le jeu de caractères, qui définit [l'encodage utilisé pour les caractères](/fr/docs/Glossary/Character_encoding), et [l'instruction sur la zone d'affichage (<i lang="en">viewport</i>)](/fr/docs/Web/HTML/Viewport_meta_tag) portée dans une balise [`<meta>`](/fr/docs/Web/HTML/Element/meta) pour que la page soit bien affichée avec la largeur de la zone d'affichage et ne soit pas réduite lorsqu'elle est chargée sur des petits écrans.
+
+```html
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+</head>
+```
+
+On définit le titre de la page avec le texte «&nbsp;Cycle Tracker&nbsp;» dans l'élément [`<title>`](/fr/docs/Web/HTML/Element/title). Même si le reste du contenu de `<head>` n'est pas visible sur la page, on peut voir le contenu de `<title>` dans l'onglet du navigateur lorsque la page est chargée, dans les résultats d'un moteur de recherche ou comme titre par défaut lorsqu'on met un marque-page. Le titre fournit également un nom accessible aux lecteurs d'écran pour les personnes qui se basent sur cette information pour savoir sur quel onglet elles sont.
+
+Le titre aurait pu être «&nbsp;Application de suivi des cycles menstruels&nbsp;», nous avons préféré une version plus courte et anglophone.
+
+```html
+<title>Cycle Tracker</title>
+```
+
+Bien qu'ils soient officiellement facultatifs, ces dex balises `<meta>` et l'élément `<title>` sont trois composants de l'élément `<head>` qui devraient être présents dans tout document HTML.
+
+Le dernier composant inclus dans l'élément `<head>` est un élément [`<link>`](/fr/docs/Web/HTML/Element/link) reliant à notre feuille de style externe `styles.css` (qui n'est pas encore écrite) à notre document HTML.
+
+```html
+<link rel="stylesheet" href="style.css" />
+```
+
+L'élément HTML `<link>` établit une relation entre le document courant et une ressource externe. Il existe plus de 25 valeurs pour l'attribut [`rel`](/fr/docs/Web/HTML/Attributes/rel) (et de nombreuses autres valeurs ne sont pas spécifiées). La forme la plus fréquente, `rel="stylesheet"`, importe une ressource externe comme feuille de style.
+
+Nous reverrons cet élément `<link>` et son attribut `rel` dans un prochain chapitre lorsque nous inclurons [un lien vers le manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file#ajouter_le_manifeste_à_lapplication).
+
+### Le corps du document (`<body>`)
+
+L'élément [`<body>`](/fr/docs/Web/HTML/Element/body) contient tout le contenu qu'on souhaite afficher aux personnes qui visitent le site sur Internet.
+
+Dans cet élément `<body>`, on inclut le nom de l'application sous la forme d'un titre de niveau 1 avec un élément [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), puis on place un formulaire avec un élément [`<form>`](/fr/docs/Web/HTML/Element/form).
+
+```html
+<body>
+  <h1>Suivi des cycles</h1>
+  <form></form>
+</body>
+```
+
+Le formulaire contiendra les instructions, les contrôles de saisie, un libellé pour chaque contrôle et un bouton pour soumettre une nouvelle entrée. Pour les contrôles de notre formulaire, on doit pouvoir saisir une date de début et une date de fin pour chaque cycle menstruel.
+
+Au sein de l'élément `<form>`, on inclut un élément [`<fieldset>`](/fr/docs/Web/HTML/Element/fieldset) avec une légende ([`<legend>`](/fr/docs/Web/HTML/Element/legend)) qui décrit l'objectif de ce groupe de champs.
+
+```html
+<form>
+  <fieldset>
+    <legend>
+      Veuillez saisir la date de début et la date de fin de votre cycle
+    </legend>
+  </fieldset>
+</form>
+```
+
+Les sélecteurs de date sont des éléments [`<input>`](/fr/docs/Web/HTML/Element/input) avec [`type="date"`](/fr/docs/Web/HTML/Element/input/date). On ajoute l'attribut [`required`](/fr/docs/Web/HTML/Attributes/required) pour réduire le risque d'erreur où la personne soumettrait un formulaire incomplet.
+
+Pour associer un libellé (`<label>`) avec chaque contrôle de formulaire, on utilise l'attribut [`id`](/fr/docs/Web/HTML/Global_attributes/id) de chaque `<input>` et on fait correspondre la valeur de l'attribut [`for`](/fr/docs/Web/HTML/Attributes/for) de l'élément [`<label>`](/fr/docs/Web/HTML/Element/label) associé. Chaque libellé associé fournit ainsi un [nom accessible](/fr/docs/Glossary/Accessible_name) au champ du formulaire..
+
+```html
+<label for="start-date">Date de début</label>
+<input type="date" id="start-date" required />
+```
+
+Pour assembler le tout, on ajoute deux paragraphes ([`<p>`](/fr/docs/Web/HTML/Element/p)) au sein de l'élément `<fieldset>`, chacun contenant un sélecteur date pour le début et la fin du cycle menstruel saisi et les libellés ([`<label>`](/fr/docs/Web/HTML/Element/label)) associés. On ajoute aussi un élément [`<button>`](/fr/docs/Web/HTML/Element/button) pour soumettre le formulaire avec le texte «&nbsp;Ajouter un cycle menstruel&nbsp;» entre les balises de l'élément. L'attribut `type="submit"` est optionnel, en effet `submit` est le type par défaut pour les éléments `<button>`.
+
+```html
+<form>
+  <fieldset>
+    <legend>
+      Veuillez saisir la date de début et la date de fin de votre cycle
+    </legend>
+    <p>
+      <label for="start-date">Date de début</label>
+      <input type="date" id="start-date" required />
+    </p>
+    <p>
+      <label for="end-date">Date de fin</label>
+      <input type="date" id="end-date" required />
+    </p>
+  </fieldset>
+  <p>
+    <button type="submit">Ajouter un cycle menstruel</button>
+  </p>
+</form>
+```
+
+Nous vous invitons [à approfondir la construction de formulaires web accessibles](/fr/docs/Learn/Forms).
+
+### Textes temporaires en dur
+
+On ajoute ensuite un élément [`<section>`](/fr/docs/Web/HTML/Element/section) vide. Ce conteneur sera rempli grâce à du code JavaScript.
+
+```html
+<section id="past-periods"></section>
+```
+
+Lorsque la personne enverra le formulaire, nous utiliserons JavaScript pour intercepter les données et afficheront ainsi une liste des cycles passés, avec un titre pour cette section.
+
+Pour le moment, nous allons inscrire temporairement du contenu en dur dans cet élément `<section>`, avec un titre `<h2>` et quelques cycles passés. Ce contenu nous permettra de régler la mise en forme lorsque nous écrirons la feuille de style CSS.
+
+```html
+<section id="past-periods">
+  <h2>Cycles antérieurs</h2>
+  <ul>
+    <li>Du 01/01/2024 au 01/06/2024</li>
+    <li>Du 01/29/2024 au 02/04/2024</li>
+  </ul>
+</section>
+```
+
+Le contenu à l'intérieur de `<section id="past-periods"></section>` est temporaire. Nous le retirerons ou le commenterons lorsque nous aurons [terminé la mise en forme CSS](#contenu_css) et que l'apparence de l'application sera satisfaisante.
+
+### Lien JavaScript
+
+Avant de fermer l'élément `</body>`, on ajoute un lien vers le fichier JavaScript `app.js` (qui n'est pas encore écrit). On ajoute l'attribut [`defer`](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript#async_et_defer) pour que le chargement du script soit différé après le chargement et l'analyse du document HTML.
+
+```html
+<script src="app.js" defer></script>
+```
+
+Le fichier `app.js` contiendra tout le fonctionnement de notre application&nbsp;: les gestionnaires d'évènements pour le bouton, l'enregistrement des données dans le stockage local, et l'affichage des cycles dans la section correspondante.
+
+[Le fichier HTML pour cette étape](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/index.html) est désormais terminé&nbsp;! Vous pouvez ouvrir le fichier dans votre navigateur. Toutefois, vous verrez qu'il est plutôt basique. Nous améliorerons cet aspect dans la section qui vient.
+
+## Contenu CSS
+
+Nous pouvons maintenant mettre en forme notre contenu HTML statique à l'aide de CSS. Voici la feuille de style CSS complète&nbsp;:
+
+```css
+body {
+  margin: 1vh 1vw;
+  background-color: #efe;
+}
+ul,
+fieldset,
+legend {
+  border: 1px solid;
+  background-color: #fff;
+}
+ul {
+  padding: 0;
+  font-family: monospace;
+}
+li,
+legend {
+  list-style-type: none;
+  padding: 0.2em 0.5em;
+  background-color: #cfc;
+}
+li:nth-of-type(even) {
+  background-color: inherit;
+}
+```
+
+Si vous comprenez chacune de ces lignes, n'hésitez pas à copier les règles précédentes ou à écrire votre propre CSS, puis enregistrez le fichier avec le nom [`style.css`](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/style.css), avant de [finaliser les fichiers HTML et CSS](#finaliser-le-html-statique-et-le-css-de-notre-pwa). Si vous découvrez quoi que ce soit dans cette feuille CSS, n'hésitez pas à poursuivre votre lecture, nous allons expliquer chaque règle.
+
+![Capture d'écran de la page web où on voit le fond coloré en vert clair, un formulaire avec une légende, deux sélecteurs de date et un bouton. La section inférieure affiche des données fausses pour deux cycles menstruels ainsi qu'un titre.](html.jpg)
+
+### Explications du CSS
+
+On utilise la propriété [`background-color`](/fr/docs/Web/CSS/background-color) pour créer un arrière-plan vert clair (`#efe`) sur le corps du document (`body`). Pour la liste non-ordonnée, l'ensemble des champs et la légende, on utilise un arrière-plan blanc (`#fff`) et une fine bordure grâce à la propriété [`border`](/fr/docs/Web/CSS/border). On surcharge la valeur de `background-color` pour la légende et les éléments de la liste en utilisant un vert plus foncé (`#cfc`).
+
+On utilise [le sélecteur](/fr/docs/Web/CSS/CSS_selectors) de pseudo-classe [`:nth-of-type(even)`](/fr/docs/Web/CSS/:nth-of-type) pour cibler chaque élément pair de la liste et lui affecter [`inherit`](/fr/docs/Web/CSS/inherit) pour qu'il ait la couleur d'arrière-plan de son parent. Ici, cela signifie que les éléments pairs de la liste auront un arrière-plan blanc (`#fff`), comme celui de la liste.
+
+```css
+body {
+  background-color: #efe;
+}
+ul,
+fieldset,
+legend {
+  border: 1px solid;
+  background-color: #fff;
+}
+li,
+legend {
+  background-color: #cfc;
+}
+li:nth-of-type(even) {
+  background-color: inherit;
+}
+```
+
+Pour que la liste et ses éléments non-ordonnés ne ressemblent pas à une liste, on retire le remplissage (<i lang="en">padding</i>) en indiquant [`padding: 0`](/fr/docs/Web/CSS/padding) sur l'élément `ul`, puis on retire les puces avec [`list-style-type: none`](/fr/docs/Web/CSS/list-style-type).
+
+```css
+ul {
+  padding: 0;
+}
+li {
+  list-style-type: none;
+}
+```
+
+On ajoute un peu d'espace en fixant la marge ([`margin`](/fr/docs/Web/CSS/margin)) du corps en utilisant [les unités relatives à la zone d'affichage (<i lang="en">viewport</i>)](/fr/docs/Web/CSS/length#longueurs_liées_au_viewport) `vw` et `vh`. Ainsi, l'espace laissé autour de l'application sera proportionnel à la taille de la zone d'affichage. On ajoute également un peu de remplissage aux éléments `li` et `legend`. Enfin, pour améliorer l'alignement des données sur les cycles antérieurs, on applique [`font-family: monospace`](/fr/docs/Web/CSS/font-family) sur les éléments `ul` de la section des résultats. Avec une police à chasse fixe, chaque caractère aura ainsi la même largeur.
+
+```css
+body {
+  margin: 1vh 1vw;
+}
+ul {
+  font-family: monospace;
+}
+li,
+legend {
+  padding: 0.2em 0.5em;
+}
+```
+
+On peut combiner ce qu'on vient de construire en plaçant plusieurs propriétés dans chaque bloc de déclaration. On peut même regrouper les styles pour `li` et `legend`. En effet, les styles qui ne s'appliquent pas à un sélecteur donné (comme la déclaration `list-style-type` pour `legend`) sont ignorés.
+
+```css
+body {
+  margin: 1vh 1vw;
+  background-color: #efe;
+}
+ul,
+fieldset,
+legend {
+  border: 1px solid;
+  background-color: #fff;
+}
+ul {
+  padding: 0;
+  font-family: monospace;
+}
+li,
+legend {
+  list-style-type: none;
+  padding: 0.2em 0.5em;
+  background-color: #cfc;
+}
+li:nth-of-type(even) {
+  background-color: inherit;
+}
+```
+
+Si le CSS qui précède vous paraît toujours abscons, n'hésitez pas à lire les définitions des [propriétés CSS](/fr/docs/Glossary/Property/CSS) et [des sélecteurs](/fr/docs/Web/CSS/CSS_selectors), ou à suivre le parcours d'apprentissage [Débuter en CSS](/fr/docs/Learn/CSS/First_steps/Getting_started).
+
+Que vous utilisiez le CSS précédent tel quel, ou que vous ayez adapté cette mise en forme, voire que vous ayez écrit votre feuille de style à partir de 0, incluez ce contenu CSS dans un nouveau fichier et enregistrez-le avec le nom [`style.css`](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/style.css), dans le même répertoire que le fichier `index.html`.
+
+### Finaliser le HTML statique et le CSS de notre PWA
+
+Avant d'aller plus loin, [commentons](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#commentaires_en_html) ou supprimons les fausses données et le titre correspondant&nbsp;:
+
+```html
+<section id="past-periods">
+  <!--
+  <h2>Cycles antérieurs</h2>
+  <ul>
+    <li>Du 01/01/2024 au 01/06/2024</li>
+    <li>Du 01/29/2024 au 02/04/2024</li>
+  </ul>
+  -->
+</section>
+```
+
+## Pour la suite
+
+Avant d'ajouter [les fonctionnalités JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) pour convertir notre contenu statique en application web et de l'améliorer progressivement en une PWA grâce à [un manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) et [un <i lang="en">service worker</i>](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers), nous allons [créer un environnement de développement local](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) pour voir l'évolution de notre application dans notre navigateur.
+
+Avant d'aller plus loin, vous pouvez [voir le résultat obtenu à ce chapitre](https://mdn.github.io/pwa-examples/cycletracker/html_and_css) et télécharger [le code source HTML et CSS de CycleTracker](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css).
+
+{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/", "Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}

From b7377bf12be68aaf930b27417ecf9267e92783cb Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Mon, 2 Oct 2023 23:08:21 +0200
Subject: [PATCH 268/268] Fix #3752 for `fr` - Update `filter` page (#15786)

* Update filter translation to finally fix #3752

* Review suggestions
---
 files/fr/web/css/filter/index.md | 1301 +++---------------------------
 1 file changed, 115 insertions(+), 1186 deletions(-)

diff --git a/files/fr/web/css/filter/index.md b/files/fr/web/css/filter/index.md
index 81d1d471ab0921..31cb09e2f08aa8 100644
--- a/files/fr/web/css/filter/index.md
+++ b/files/fr/web/css/filter/index.md
@@ -1,22 +1,21 @@
 ---
 title: filter
 slug: Web/CSS/filter
+l10n:
+  sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
 ---
 
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-La propriété CSS **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.
+La propriété [CSS](/fr/docs/Web/CSS) **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.
 
-Plusieurs fonctions sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant [un élément SVG `filter`](/fr/docs/Web/SVG/Element/filter).
+Plusieurs [fonctions](#fonctions) comme `blur()` et `contrast()` sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis.
 
 {{EmbedInteractiveExample("pages/css/filter.html")}}
 
 ## Syntaxe
 
 ```css
-/* URL vers un filtre SVG */
-filter: url("filters.svg#filter-id");
-
 /* Fonctions de filtre */
 filter: blur(5px);
 filter: brightness(0.4);
@@ -29,8 +28,12 @@ filter: opacity(25%);
 filter: saturate(30%);
 filter: sepia(60%);
 
+/* URL vers un filtre SVG */
+filter: url("filters.svg#filter-id");
+
 /* On applique plusieurs filtres */
 filter: contrast(175%) brightness(3%);
+filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);
 
 /* On utilise aucun filtre */
 filter: none;
@@ -39,13 +42,14 @@ filter: none;
 filter: inherit;
 filter: initial;
 filter: revert;
+filter: revert-layer;
 filter: unset;
 ```
 
 Avec une fonction, on utilisera la forme suivante&nbsp;:
 
-```css
-filter: <filter-function> [<filter-function>] * | none;
+```css-nolint
+filter: <filter-function> [<filter-function>]* | none;
 ```
 
 En utilisant un élément SVG [`<filter>`](/fr/docs/Web/SVG/Element/filter), on utilisera la forme suivante&nbsp;:
@@ -54,1206 +58,105 @@ En utilisant un élément SVG [`<filter>`](/fr/docs/Web/SVG/Element/filter), on
 filter: url(file.svg#filter-element-id);
 ```
 
-### Interpolation
-
-Si les deux filtres possèdent chacun une liste de même longueur (sans [`<url>`](</fr/docs/Web/CSS/url()>), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète.
-
 ## Fonctions
 
-Pour utiliser la propriété CSS `filter`, on utilisera `none` ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra `none`. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).
+La propriété `filter` s'utilise avec le mot-clé `none` ou avec une à plusieurs fonctions parmi celles listées ensuite. Si le paramètre fourni à l'une de ces fonctions est invalide, la fonction reverra `none`. Sauf mention contraire, les fonctions qui acceptent une valeur exprimée en pourcentage (par exemple `34%`) acceptent également les valeurs exprimées en décimal (par exemple `0.34`).
 
-Lorsqu'une seule propriété `filter` possède deux fonctions (ou plus), le résultat obtenu sera différent de l'application de deux propriétés `filter` (ou plus) séparées avec chacune une fonction.
+Lorsque la valeur de la propriété `filter` contient plusieurs fonctions, les filtres sont appliqués dans l'ordre.
 
-### `url()`
+- [`blur()`](/fr/docs/Web/CSS/filter-function/blur)
 
-La fonction `url()` prend comme argument l'emplacement d'un [élément SVG &lt;filter&gt; à appliquer](/fr/docs/Web/SVG/Element/filter). L'URL peut faire référence à une ancre d'un élément spécifique. Cet élément peut être embarqué dans un fichier XML externe.
+  - : Applique un [flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) à l'image.
 
-```css
-filter: url(resources.svg#c1);
-```
+    ```css
+    filter: blur(5px);
+    ```
 
-### `blur()`
+- [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness)
 
-Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type [`<length>`](/fr/docs/Web/CSS/length) mais la fonction n'accepte pas de valeurs exprimées en pourcentages.
+  - : Rend l'image plus claire ou plus sombre en utilisant un coefficient multiplicateur. L'effet est linéaire&nbsp;: `0%` créera une image complètement noire, `100%` ne modifiera pas l'image et les valeurs supérieures à 100% rendront l'image plus claire.
 
-```css
-filter: blur(5px);
-```
+    ```css
+    filter: brightness(2);
+    ```
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">
-        Exemple <i lang="en">live</i>
-      </th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img
-          id="img1"
-          class="internal default"
-          src="test_form_2.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          id="img2"
-          class="internal default"
-          src="test_form_2.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <div class="svg-container">
-          <svg
-            id="img3"
-            overflow="visible"
-            viewbox="0 0 212 161"
-            color-interpolation-filters="sRGB">
-            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
-              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
-            </filter>
-            <image
-              xlink:href="test_form_2.jpeg"
-              filter="url(#svgBlur)"
-              width="212px"
-              height="161px" />
-          </svg>
-        </div>
-      </td>
-      <td>
-        <img
-          id="img4"
-          class="internal default"
-          src="test_form_2_s.jpg"
-          style="width: 100%;" />
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -webkit-filter: blur(5px);
-  -ms-filter: blur(5px);
-  filter: blur(5px);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin: 0 0 1.286em;
-  height: 100%;
-  width: 85%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-```svg
-<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
-  </filter>
-</svg>
-```
+- [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast)
 
-{{EmbedLiveSample('','100%','236px','','', 'no-codepen')}}
-
-> **Note :** Voir [`blur()`](</fr/docs/Web/CSS/filter-function/blur()>) pour plus d'informations.
-
-### `brightness()`
-
-La fonction [`brightness()`](</fr/docs/Web/CSS/filter-function/brightness()>) permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`.
-
-```css
-filter: brightness(2);
-```
-
-```svg
-<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="brightness">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="[amount]"/>
-      <feFuncG type="linear" slope="[amount]"/>
-      <feFuncB type="linear" slope="[amount]"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB">
- <filter id="brightness">
-    <feComponentTransfer>
-        <feFuncR type="linear" slope="2"/>
-        <feFuncG type="linear" slope="2"/>
-        <feFuncB type="linear" slope="2"/>
-    </feComponentTransfer>
-  </filter>
-  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: brightness(2);
-  -webkit-filter: brightness(2);
-  -ms-filter: brightness(2);
-  filter: brightness(2);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  height: 100%;
-  width: 85%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('','100%','231px','','', 'no-codepen')}}
-
-> **Note :** Voir [`brightness()`](</fr/docs/Web/CSS/filter-function/brightness()>) pour plus d'informations.
-
-### `contrast()`
-
-La fonction [`contrast()`](</fr/docs/Web/CSS/filter-function/contrast()>) permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`.
-
-```css
-filter: contrast(200%);
-```
+  - : Ajuste le contraste de l'image. Une valeur de `0%` rendra l'image grise, `100%` n'aura pas d'effet et les valeurs supérieures à `100%` renforceront le contraste.
 
-```svg
-<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="contrast">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
-```
+    ```css
+    filter: contrast(200%);
+    ```
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB">
- <filter id="contrast">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="2" intercept="-0.5"/>
-      <feFuncG type="linear" slope="2" intercept="-0.5"/>
-      <feFuncB type="linear" slope="2" intercept="-0.5"/>
-    </feComponentTransfer>
-  </filter>
-  <image xlink:href="test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_3_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
+- [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow)
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: contrast(200%);
-  -webkit-filter: contrast(200%);
-  -ms-filter: contrast(200%);
-  filter: contrast(200%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
+  - : Applique une ombre portée suivant les contours de l'image. Son paramètre suit la même syntaxe que celle de la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) (définie dans le module [Arrière-plans et bordures CSS](/fr/docs/Web/CSS/CSS_backgrounds_and_borders)), sauf que le mot-clé `inset` et le paramètre `spread` ne sont pas autorisés. Tous les filtres appliqués après `drop-shadow()` sont appliqués à l'ombre portée également.
 
-{{EmbedLiveSample('','100%','203px','','', 'no-codepen')}}
+    ```css
+    filter: drop-shadow(16px 16px 10px black);
+    ```
 
-> **Note :** Voir [`contrast()`](</fr/docs/Web/CSS/filter-function/contrast()>) pour plus d'informations.
+- [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale)
 
-### `drop-shadow()`
+  - : Convertit l'image en niveaux de gris. Un argument de `100%` rendra l'image uniquement avec des niveaux de gris. Un argument de `0%` ne modifiera pas l'image d'entrée. Les valeurs entre `0%` et `100%` appliquent un effet proportionnel.
 
-La fonction [`drop-shadow()`](</fr/docs/Web/CSS/filter-function/drop-shadow()>) permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [`<shadow>`](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception&nbsp;: les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue&nbsp;; seule différence&nbsp;: les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `<shadow>` sont les suivants&nbsp;:
+    ```css
+    filter: grayscale(100%);
+    ```
 
-- `<offset-x>` `<offset-y>` (nécessaire)
-  - : Deux valeurs [`<length>`](/fr/docs/Web/CSS/length) qui indiquent le décalage de l'ombre portée. `<offset-x>` définit la distance horizontale&nbsp;: des valeurs négatives décaleront l'ombre à gauche de l'élément. `<offset-y>` définit la distance verticale&nbsp;: des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page [`<length>`](/fr/docs/Web/CSS/length) pour les différentes unités utilisables.
-    Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si `<blur-radius>` et/ou `<spread-radius>` sont utilisés).
-- `<blur-radius>` (optionnel)
-  - : Une troisième valeur de type [`<length>`](/fr/docs/Web/CSS/length). Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisées. La valeur par défaut est `0`, le bord de l'ombre sera droit.
-- `<spread-radius>` (optionnel)
-  - : Une quatrième valeur de type [`<length>`](/fr/docs/Web/CSS/length). Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est `0` (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.
-- `<color>` (optionnel)
-  - : Voir [`<color>`](/fr/docs/Web/CSS/color_value) pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété [`color`](/fr/docs/Web/CSS/color) est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).
+- [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate)
 
-```css
-filter: drop-shadow(16px 16px 10px black);
-```
+  - : Applique une rotation de teinte. L'argument angulaire définit le nombre de degrés pour la rotation sur le cercle des teintes. Une valeur de `0deg` n'aura pas d'effet sur l'image.
 
-```svg
-<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
- <filter id="drop-shadow">
-    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
-    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
-    <feFlood flood-color="[color]"/>
-    <feComposite in2="offsetblur" operator="in"/>
-    <feMerge>
-      <feMergeNode/>
-      <feMergeNode in="SourceGraphic"/>
-    </feMerge>
-  </filter>
-</svg>
-```
+    ```css
+    filter: hue-rotate(90deg);
+    ```
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td>
-      <td>
-        <div class="svg-container">
-          <svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB">
-            <defs>
-              <image id="MyImage" xlink:href="test_form_4.jpeg" width="213px" height="161px"/>
-            </defs>
-            <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%">
-              <feOffset dx="9" dy="9" in="SourceAlpha"/>
-              <feGaussianBlur stdDeviation="5"/>
-            </filter>
-            <use xlink:href="#MyImage" filter="url(#drop-shadow)"/>
-            <use xlink:href="#MyImage"/>
-          </svg>
-        </div>
-      </td>
-      <td><img id="img4" class="internal default" src="test_form_4_s.jpg" style="width: 100%;" /></td>
-    </tr>
-    <tr>
-      <td><img alt="test_form_4 distorted border - Image originale" id="img11" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
-      <td><img alt="test_form_4 distorted border - Exemple <i lang="en">live</i>" id="img12" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
-      <td>
-        <div class="svg-container">
-          <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB">
-            <defs>
-              <image id="MyImage2" xlink:href="test_form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/>
-            </defs>
-            <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%">
-              <feOffset dx="5" dy="5.5" in="SourceAlpha"/>
-              <feGaussianBlur stdDeviation="2.5"/>
-              <feComponentTransfer>
-                <feFuncA type="table" tableValues="0 0.8"/>
-              </feComponentTransfer>
-            </filter>
-            <use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/>
-            <use xlink:href="#MyImage2"/>
-          </svg>
-        </div>
-      </td>
-      <td><img alt="test_form_4 distorted border drop shadow - Exemple statique" id="img14" class="internal default" src="test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
+- [`invert()`](/fr/docs/Web/CSS/filter-function/invert)
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: drop-shadow(16px 16px 10px black);
-  -webkit-filter: drop-shadow(16px 16px 10px black);
-  -ms-filter: drop-shadow(16px 16px 10px black);
-  filter: drop-shadow(16px 16px 10px black);
-}
-#img12 {
-  width: 100%;
-  height: auto;
-  -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-  -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-  -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-  filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-#irregular-shape {
-  width: 64%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3,
-#img13 {
-  width: 100%;
-  height: auto;
-}
-```
+  - : Inverse les couleurs de l'image. Si l'argument vaut `100%`, on obtiendra le négatif complet de l'image. Si l'argument vaut `0%`, l'image sera inchangée. Les valeurs entre `0%` et `100%` ont des effets proportionnels.
 
-{{EmbedLiveSample('','100%','400px','','', 'no-codepen')}}
+    ```css
+    filter: invert(100%);
+    ```
 
-> **Note :** Voir [`drop-shadow()`](</fr/docs/Web/CSS/filter-function/drop-shadow()>) pour plus d'informations.
+- [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity)
 
-### `grayscale()`
+  - : Applique un niveau de transparence. Un coefficient de `0%` rendra l'image complètement transparente tandis qu'un coefficient de `100%` laissera l'image inchangée.
 
-Avec la fonction [`grayscale()`](</fr/docs/Web/CSS/filter-function/grayscale()>), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`.
+    ```css
+    filter: opacity(50%);
+    ```
 
-```css
-filter: grayscale(100%);
-```
+- [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate)
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB">
- <filter id="grayscale">
-    <feColorMatrix type="matrix"
-               values="0.2126 0.7152 0.0722 0 0
-                       0.2126 0.7152 0.0722 0 0
-                       0.2126 0.7152 0.0722 0 0
-                       0 0 0 1 0"/>
-  </filter>
-  <image xlink:href="test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_5_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
+  - : Sature l'image. Avec un coefficient de `0%`, l'image sera complètement désaturée. `100%` n'aura pas d'effet sur l'image. Les valeurs supérieures à `100%` augmenteront la saturation.
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: grayscale(100%);
-  -webkit-filter: grayscale(100%);
-  -ms-filter: grayscale(100%);
-  filter: grayscale(100%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
+    ```css
+    filter: saturate(200%);
+    ```
 
-{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}}
+- [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia)
 
-> **Note :** Voir [`grayscale()`](</fr/docs/Web/CSS/filter-function/grayscale()>) pour plus d'informations.
+  - : Convertit l'image en sépia. Un coefficient de `100%` rendra l'image complètement sépia tandis qu'un coefficient `0%` n'aura pas d'effet sur l'image.
 
-### `hue-rotate()`
+    ```css
+    filter: sepia(100%);
+    ```
 
-La fonction [`hue-rotate()`](</fr/docs/Web/CSS/filter-function/hue-rotate()>) applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée.
+## Combiner les fonctions
 
-```css
-filter: hue-rotate(90deg);
-```
-
-```css
-filter: hue-rotate(90deg);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB">
- <filter id="hue-rotate">
-    <feColorMatrix type="hueRotate"
-               values="90"/>
-  </filter>
-  <image xlink:href="test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_6_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: hue-rotate(90deg);
-  -webkit-filter: hue-rotate(90deg);
-  -ms-filter: hue-rotate(90deg);
-  filter: hue-rotate(90deg);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-```html
-<svg
-  style="position: absolute; top: -999999px"
-  xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgHueRotate">
-    <feColorMatrix type="hueRotate" values="[angle]" />
-  </filter>
-</svg>
-```
-
-{{EmbedLiveSample('','100%','221px','','', 'no-codepen')}}
-
-> **Note :** Voir [`hue-rotate()`](</fr/docs/Web/CSS/filter-function/hue-rotate()>) pour plus d'informations.
-
-### `invert()`
-
-La fonction [`invert()`](</fr/docs/Web/CSS/filter-function/invert()>) permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`.
-
-```css
-filter: invert(100%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB">
- <filter id="invert">
-    <feComponentTransfer>
-        <feFuncR type="table" tableValues="1 0"/>
-        <feFuncG type="table" tableValues="1 0"/>
-        <feFuncB type="table" tableValues="1 0"/>
-    </feComponentTransfer>
- </filter>
- <image xlink:href="test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_7_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: invert(100%);
-  -webkit-filter: invert(100%);
-  -ms-filter: invert(100%);
-  filter: invert(100%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('','100%','407px','','', 'no-codepen')}}
-
-> **Note :** Voir [`invert()`](</fr/docs/Web/CSS/filter-function/invert()>) pour plus d'informations.
-
-### `opacity()`
-
-La fonction [`opacity()`](</fr/docs/Web/CSS/filter-function/opacity()>) permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.
-
-```css
-filter: opacity(50%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB">
- <filter id="opacity">
-    <feComponentTransfer>
-        <feFuncA type="table" tableValues="0 0.5">
-    </feComponentTransfer>
- </filter>
- <image xlink:href="test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_14_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: opacity(50%);
-  -webkit-filter: opacity(50%);
-  -ms-filter: opacity(50%);
-  filter: opacity(50%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('','100%','210px','','', 'no-codepen')}}
-
-> **Note :** Voir [`opacity()`](</fr/docs/Web/CSS/filter-function/opacity()>) pour plus d'informations.
-
-### `saturate()`
-
-La fonction [`saturate()`](</fr/docs/Web/CSS/filter-function/saturate()>) sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`.
-
-```css
-filter: saturate(200%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB">
- <filter id="saturate">
-    <feColorMatrix type="saturate"
-               values="2"/>
- </filter>
- <image xlink:href="test_form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_9_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: saturate(200%);
-  -webkit-filter: saturate(200%);
-  -ms-filter: saturate(200%);
-  filter: saturate(200%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('','100%','332px','','', 'no-codepen')}}
-
-> **Note :** Voir [`saturate()`](</fr/docs/Web/CSS/filter-function/saturate()>) pour plus d'informations.
-
-### `sepia()`
-
-La fonction [`sepia()`](</fr/docs/Web/CSS/filter-function/sepia()>) convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`.
-
-```css
-filter: sepia(100%);
-```
-
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th>
-      <th style="text-align: left;" scope="col">Équivalent SVG</th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img id="img1" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
-      <td><img id="img2" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
-      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB">
- <filter id="sepia">
-    <feColorMatrix type="matrix"
-               values="0.393 0.769 0.189 0 0
-                       0.349 0.686 0.168 0 0
-                       0.272 0.534 0.131 0 0
-                       0 0 0 1 0"/>
- </filter>
- <image xlink:href="test_form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
-</svg><div></td>
-      <td><img id="img4" class="internal default" src="test_form_12_s.jpg" style="width: 100%;" /></td>
-    </tr>
-  </tbody>
-</table>
-```
-
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: sepia(100%);
-  -webkit-filter: sepia(100%);
-  -ms-filter: sepia(100%);
-  filter: sepia(100%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
-
-{{EmbedLiveSample('','100%','229px','','', 'no-codepen')}}
-
-> **Note :** Voir [`sepia()`](</fr/docs/Web/CSS/filter-function/sepia()>) pour plus d'informations.
-
-## Enchaîner les fonctions
-
-On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image&nbsp;:
+On peut combiner autant de fonctions que nécessaire pour manipuler le rendu. Les filtres sont alors appliqués dans l'ordre de leur déclaration. Dans l'exemple suivant, on améliore le contraste et la luminosité de l'image&nbsp;:
 
 ```css
 filter: contrast(175%) brightness(103%);
 ```
 
-```html hidden
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th style="text-align: left;" scope="col">Image originale</th>
-      <th style="text-align: left;" scope="col">
-        Exemple <i lang="en">live</i>
-      </th>
-      <th style="text-align: left;" scope="col">Exemple statique</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img
-          id="img1"
-          class="internal default"
-          src="test_form_8.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          id="img2"
-          class="internal default"
-          src="test_form_8.jpeg"
-          style="width: 100%;" />
-      </td>
-      <td>
-        <img
-          id="img4"
-          class="internal default"
-          src="test_form_8_s.jpg"
-          style="width: 100%;" />
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
+### Interpolation
 
-```css hidden
-html {
-  height: 100%;
-}
-body {
-  font:
-    14px/1.286 "Lucida Grande",
-    "Lucida Sans Unicode",
-    "DejaVu Sans",
-    Lucida,
-    Arial,
-    Helvetica,
-    sans-serif;
-  color: rgb(51, 51, 51);
-  height: 100%;
-  overflow: hidden;
-}
-#img2 {
-  width: 100%;
-  height: auto;
-  -moz-filter: contrast(175%) brightness(103%);
-  -webkit-filter: contrast(175%) brightness(103%);
-  -ms-filter: contrast(175%) brightness(103%);
-  filter: contrast(175%) brightness(103%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width: 25%;
-  height: auto;
-}
-#img3 {
-  height: 100%;
-}
-```
+Pour les animations, si les filtres du début et de la fin ont une liste de fonctions de la même taille, sans [`url()`](/fr/docs/Web/CSS/url) et dans le même ordre, chaque filtre est interpolé selon ses règles particulières.
 
-{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}}
+Si les listes de filtres sont de longueurs différentes, la liste la plus courte est complétée à la fin par les filtres supplémentaires de la liste la plus longue. Les fonctions ajoutées utilisent leur valeur initiale (qui ne modifie pas l'image). Tous les filtres alors présents sont interpolés selon leurs règles particulières. Sinon, c'est une interpolation discrète qui est utilisée.
 
 ## Définition formelle
 
@@ -1267,34 +170,60 @@ table.standard-table td {
 
 ### Appliquer des fonctions de filtre
 
-Voici un exemple d'utilisation des fonctions prédéfinies abordées ci-avant. Voyez les exemples précédents pour chaque fonction séparément.
+On applique la propriété `filter` sur la deuxième image, en appliquant des niveaux de gris et un flou (à l'image et à la bordure).
 
 ```css
-.mondiv {
-  filter: grayscale(50%);
-}
-
-/* Appliquer un niveau de gris à 50% et un flou de rayon 10px */
-/* pour toutes les images */
 img {
-  filter: grayscale(0.5) blur(10px);
+  border: 5px solid yellow;
+}
+/* On passe à 40% de niveau de gris */
+/* et un flou de 5px de rayon */
+img:nth-of-type(2) {
+  filter: grayscale(0.4) blur(5px);
 }
 ```
 
-### Appliquer des filtres SVG
+```html
+<img src="pencil.jpg" alt="L'image originale est nette" />
+<img src="pencil.jpg" alt="L'image et la bordure sont floues et atténuées" />
+```
+
+{{EmbedLiveSample('','100%','229px')}}
+
+### Répéter des filtres
 
-Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressources SVG existantes&nbsp;:
+Les fonctions de filtre sont appliquées selon leur ordre d'apparition. On peut donc appliquer plusieurs fois un même filtre.
 
 ```css
-.target {
-  filter: url(#c1);
+#MDN-logo {
+  border: 1px solid blue;
+  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
+        red);
 }
+```
 
-.mydiv {
-  filter: url(commonfilters.xml#large-blur);
-}
+```html hidden
+<svg
+  id="MDN-logo"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 361 104.2"
+  xml:space="preserve"
+  role="img">
+  <title>MDN Web Docs</title>
+  <path
+    d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
+    style="fill: var(--text-primary);"></path>
+  <g style="fill:blue;">
+    <path
+      d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
+  </g>
+</svg>
 ```
 
+{{EmbedLiveSample('','100%','229px')}}
+
+Les filtres sont appliqués dans l'ordre, c'est pour cela que les ombres portées ne sont pas de la même couleur. La teinte de la première ombre portée est modifiée par la fonction `hue-rotate()`, mais pas la teinte de la deuxième.
+
 ## Spécifications
 
 {{Specifications}}
@@ -1305,8 +234,8 @@ Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressou
 
 ## Voir aussi
 
-- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content)
-- La propriété [`mask`](/fr/docs/Web/CSS/mask)
-- [SVG](/fr/docs/Web/SVG)
-- [Un article de HTML5 Rocks&nbsp;: <i lang="en">Understanding CSS filters<i> (en anglais)](https://www.html5rocks.com/en/tutorials/filters/understanding-css/)
-- [Générateur de filtres CSS](https://cssgenerator.org/filter-css-generator.html)
+- La propriété CSS [`backdrop-filter`](/fr/docs/Web/CSS/backdrop-filter)
+- [La composition et les modes de fusion en CSS](/fr/docs/Web/CSS/CSS_compositing_and_blending) avec les propriétés CSS [`background-blend-mode`](/fr/docs/Web/CSS/background-blend-mode) et [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode)
+- La propriété CSS [`mask`](/fr/docs/Web/CSS/mask)
+- [SVG](/fr/docs/Web/SVG) et notamment l'élément [`<filter>`](/fr/docs/Web/SVG/Element/filter) et l'attribut [`filter`](/fr/docs/Web/SVG/Attribute/filter)
+- [Appliquer des effets SVG à du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)